/* css/refined/imagery.css -- owner R1-RF-IMAGERY (REFINE-COMMON). Every rule is scoped under body.rf. */

/* One image language (REFINE-COMMON rule 4).
   1. The category drawings (_sprite.html, the refined set, which carries its own paint): one line weight on screen at every
      size (non-scaling, 1.75 px), one palette (the tile's --tint and --tint-i), a 16 % silhouette and knock-outs to the tile. Sizes stay today's.
   2. The snapshot frame (snap()): a straight print with a hairline and a low shadow; a licensed packshot sits white and
      contained with air around it, otherwise the drawing on its tint (the macro decides).
   3. Small photo tiles (44 px rows, basket, favourites): white, contained, never cropped, never over 64 px.
   4. Empty states: the companion asleep, drawn in the same line, in place of the tag icon. */

/* 1. The drawings */
body.rf .icon--cat{stroke-width:1.75px}
body.rf .cat-tile{background:var(--tint,var(--line-2));border-color:color-mix(in srgb,var(--tint-i,var(--ink)) 12%,transparent)}

/* 2. The snapshot frame */
body.rf .snap{transform:none;border-color:var(--line);box-shadow:0 1px 2px rgba(32,26,28,.06)}
body.rf .snap::before{content:none}
body.rf .snap--icon{border-color:color-mix(in srgb,var(--tint-i,var(--ink)) 12%,transparent)}
body.rf .snap__img{box-sizing:border-box;padding:8%;object-fit:contain;background:#fff}

/* 3. Small photo tiles */
body.rf .thumb--photo,
body.rf .product-row__thumb{max-width:64px;max-height:64px;background:#fff;border:1px solid var(--line)}
body.rf .thumb--photo img,
body.rf .product-row__thumb img{box-sizing:border-box;padding:2px;object-fit:contain;background:#fff}

/* 4. The companion asleep: a squircle face, closed eyes and a small z, one line on a 16 % face (B2's art.py, mood asleep) */
body.rf .empty__icon{position:relative}
body.rf .empty__icon>.icon{display:none}
body.rf .empty__icon::before{
  content:"";width:40px;height:40px;background:currentColor;
  -webkit-mask:var(--rf-asleep) center/contain no-repeat;mask:var(--rf-asleep) center/contain no-repeat;
  --rf-asleep:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.16' d='M21.5 12l-.04 3.6-.12 1.39-.19 1.02-.28.82-.36.67-.46.55-.55.46-.67.36-.82.28-1.02.19-1.39.12L12 21.5l-3.6-.04-1.39-.12-1.02-.19-.82-.28-.67-.36-.55-.46-.46-.55-.36-.67-.28-.82-.19-1.02-.12-1.39L2.5 12l.04-3.6.12-1.39.19-1.02.28-.82.36-.67.46-.55.55-.46.67-.36.82-.28 1.02-.19 1.39-.12L12 2.5l3.6.04 1.39.12 1.02.19.82.28.67.36.55.46.46.55.36.67.28.82.19 1.02.12 1.39z'/%3E%3Cpath d='M7.3 12.2q1.8 1.7 3.6 0M13.1 12.2q1.8 1.7 3.6 0'/%3E%3Cpath d='M15.6 5.4h2.4l-2.4 2.6h2.4' stroke-width='.9'/%3E%3C/svg%3E");
}