/* The shop film, in the Retail section: the Register's Sell screen with a count on every tile.
   It shares the stage and the tablet with the floor film (floor.css) and the Sell screen with the
   hero (the .till rules in hero.css); this file adds what only the shop has. Drawn from the captures in
   design/sections/retail/reference/. Every selector starts with .floor.shop; see the class-name note in hero.css. */

.floor.shop.cut .till { opacity: 0; }
/* The shop is five tiles across at every size: its 24 products and Open amount fill five rows exactly,
   and the hero's four-across rule for small screens would push the last rows off the tablet. */
@container (max-width: 520px) { .floor.shop .till .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.floor.shop .till .acts b { font-family: var(--pp-font-body); }

/* ---- Stock on the tiles, as the Register shows it: white is fine, amber is running low, red is none left,
   and a tile with none left fades (design/sections/retail/reference/register-sell-2026-09-17.png) ---- */
.floor.shop .till .tile .stock { transition: background-color .4s var(--pp-ease), color .4s var(--pp-ease); }
.floor.shop .till .tile .stock.low { background: #9A6318; color: #fff; }
.floor.shop .till .tile .stock.out { background: #9E2A44; color: #fff; }
.floor.shop .till .tile .photo, .floor.shop .till .tile .name, .floor.shop .till .tile .row { transition: opacity .4s var(--pp-ease); }
.floor.shop .till .tile.has-photo { transition: background-color .4s var(--pp-ease), transform .18s var(--pp-ease), filter .18s var(--pp-ease); }
.floor.shop .till .tile.gone { background: color-mix(in srgb, var(--t) 50%, #F5F5EF); }
.floor.shop .till .tile.gone .photo { opacity: .5; }
.floor.shop .till .tile.gone .name, .floor.shop .till .tile.gone .row { opacity: .6; }
.floor.shop .till .tile.gone .flag { color: var(--ink); }