/* ---- css/shop.css (scoped to .sim-shop; generated by tools/tour/build-tour-css.mjs — do not edit) ---- */
/* Customer online store — fresh "grocery" theme (green + white), a SEPARATE
   look from the red+white portal. Grid product cards, rounded friendly sans,
   soft shadows. All tokens scoped to .shop-body so nothing leaks to the portal. */
.sim-shop.shop-body{
  --g-primary:  #2E7D32;   /* deep grocery green — buttons, headings */
  --g-primary-d:#215B25;
  --g-accent:   #43A047;   /* brighter green */
  --g-soft:     #E8F5E9;   /* light green chip / badge background */
  --g-bg:       #F4F7F4;   /* page background */
  --g-card:     #FFFFFF;
  --g-ink:      #1E2B24;
  --g-muted:    #83908A;
  --g-line:     #E7ECE8;
  --g-amber:    #F6A609;   /* deals / ratings */
  --g-amber-s:  #FFF6E2;
  --g-strike:   #AEB7B1;

  /* older inline refs in a couple views map onto the grocery palette */
  --lx-line:var(--g-line); --lx-off:var(--g-ink); --lx-muted:var(--g-muted);
  --lx-surface:var(--g-card); --lx-surface2:var(--g-soft);
  --lx-red:var(--g-primary); --lx-red-bright:#E53935; --lx-gold:var(--g-amber);
  --sm-accent:var(--g-primary); --sm-ink:var(--g-ink); --sm-paper:var(--g-card);
  --sm-paper2:var(--g-soft); --sm-line:var(--g-line); --sm-muted:var(--g-muted);

  margin:0; background:var(--g-bg); color:var(--g-ink);
  font-family:"Poppins","Segoe UI",system-ui,sans-serif;
  padding-bottom:78px; min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* ── Top bar: brand left, cart right; green search row underneath */
.sim-shop .shop-topbar{
  background:var(--g-card); border-bottom:1px solid var(--g-line);
  position:sticky; top:0; z-index:10; padding:12px 16px 12px;
}
.sim-shop .shop-topbar .row1{ display:flex; align-items:center; justify-content:space-between; }
.sim-shop .shop-topbar .brand{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:19px; color:var(--g-ink); }
.sim-shop .shop-topbar .brand .logo{
  width:30px; height:30px; border-radius:9px; background:var(--g-soft); color:var(--g-primary);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.sim-shop .shop-topbar .brand b{ color:var(--g-primary); }
.sim-shop .shop-topbar .icons{ display:flex; align-items:center; gap:16px; }
.sim-shop .shop-avatar{ background:none; border:none; color:var(--g-ink); font-size:20px; padding:0; cursor:pointer; }
.sim-shop .shop-bag{ position:relative; color:var(--g-ink); font-size:21px; text-decoration:none; }
.sim-shop .shop-bag .count{
  position:absolute; top:-7px; right:-9px; background:var(--g-primary); color:#fff;
  font-size:10px; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:600;
}
.sim-shop .shop-search{ display:flex; gap:8px; margin-top:12px; }
.sim-shop .shop-search input{
  flex:1; border:1px solid var(--g-line); background:var(--g-bg); border-radius:12px;
  padding:11px 15px; font-size:14px; color:var(--g-ink); font-family:inherit;
}
.sim-shop .shop-search input::placeholder{ color:var(--g-muted); }
.sim-shop .shop-search button{ border:none; background:var(--g-primary); color:#fff; border-radius:12px; width:46px; font-size:16px; }

.sim-shop .shop-container{ max-width:560px; margin:0 auto; padding:16px; }

/* Labels / titles */
.sim-shop .shop-cap{ text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:var(--g-muted); font-weight:600; }
.sim-shop .shop-muted{ color:var(--g-muted); }
.sim-shop .shop-green{ color:var(--g-primary); }
.sim-shop .shop-gold{ color:var(--g-amber); }
.sim-shop .sm-title{ font-weight:700; font-size:22px; color:var(--g-ink); margin:0; }
.sim-shop .sec-head{ display:flex; align-items:center; justify-content:space-between; margin:22px 0 12px; }
.sim-shop .sec-head h2{ font-size:17px; font-weight:700; margin:0; color:var(--g-ink); }
.sim-shop .sec-head a{ font-size:12px; color:var(--g-primary); text-decoration:none; font-weight:600; }

/* Hero banner */
.sim-shop .shop-hero{
  background:linear-gradient(135deg,var(--g-primary),var(--g-accent)); color:#fff;
  border-radius:18px; padding:24px 22px; position:relative; overflow:hidden;
}
.sim-shop .shop-hero .eyebrow{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.9; font-weight:600; }
.sim-shop .shop-hero h1{ font-size:26px; font-weight:700; line-height:1.15; margin:8px 0 16px; }
.sim-shop .shop-hero h1 span{ color:#DCF3DC; }
.sim-shop .shop-hero .cta{
  display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--g-primary);
  border:none; border-radius:30px; padding:11px 22px; font-weight:700; font-size:14px; text-decoration:none;
}

/* Cards / panels */
.sim-shop .shop-card{ background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; padding:16px; margin-bottom:12px; }
.sim-shop .shop-redbox{ background:var(--g-soft); border:1px solid #D7ECD8; border-radius:14px; padding:18px; color:var(--g-ink); }
.sim-shop .info-tile{ background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; padding:16px; }

/* Buttons */
.sim-shop .btn-shop-primary{
  background:var(--g-primary); color:#fff; border:none; border-radius:12px; padding:14px;
  font-weight:700; width:100%; font-size:14px; font-family:inherit;
}
.sim-shop .btn-shop-primary:hover{ background:var(--g-primary-d); color:#fff; }
.sim-shop .btn-shop-dark{
  background:var(--g-card); color:var(--g-primary); border:1.5px solid var(--g-primary); border-radius:12px;
  padding:12px; font-weight:700; width:100%; font-size:13px; font-family:inherit;
}
.sim-shop .btn-shop-dark:hover{ background:var(--g-soft); color:var(--g-primary); }

/* Category pills (home) */
.sim-shop .cat-scroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
.sim-shop .cat-pill{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; width:72px;
}
.sim-shop .cat-pill .ic{ width:60px; height:60px; border-radius:18px; background:var(--g-soft); color:var(--g-primary);
  display:flex; align-items:center; justify-content:center; font-size:26px; }
.sim-shop .cat-pill span{ font-size:11px; color:var(--g-ink); text-align:center; font-weight:500; }

/* ── PRODUCT GRID (the requested grid view) */
.sim-shop .pgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.sim-shop .pcard{ background:var(--g-card); border:1px solid var(--g-line); border-radius:16px; padding:10px; position:relative; display:flex; flex-direction:column; }
.sim-shop .pcard .imgwrap{
  position:relative; border-radius:12px; overflow:hidden; background:var(--g-soft);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.sim-shop .pcard .imgwrap img{ width:100%; height:100%; object-fit:cover; }
.sim-shop .pcard .imgwrap .ph{ color:var(--g-accent); font-size:40px; }
.sim-shop .pcard .badge-memb{
  position:absolute; top:8px; left:8px; background:var(--g-soft); color:var(--g-primary);
  font-size:9px; font-weight:700; letter-spacing:.04em; padding:3px 8px; border-radius:20px; text-transform:uppercase;
}
.sim-shop .pcard .oos{ position:absolute; inset:0; background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#B0453E; letter-spacing:.05em; text-transform:uppercase; }
.sim-shop .pcard .unit{ font-size:11px; color:var(--g-muted); }
.sim-shop .pcard .nm{ font-size:13.5px; font-weight:600; color:var(--g-ink); line-height:1.25; margin:2px 0 8px; min-height:34px; }
.sim-shop .pcard .prow2{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.sim-shop .pcard .price{ font-size:15px; font-weight:700; color:var(--g-ink); }
.sim-shop .pcard .was{ font-size:11px; color:var(--g-strike); text-decoration:line-through; margin-left:5px; }
.sim-shop .pcard .add{
  width:36px; height:36px; border-radius:11px; background:var(--g-soft); color:var(--g-primary); border:none;
  font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.sim-shop .pcard .add:hover{ background:var(--g-primary); color:#fff; }
.sim-shop .qtystep{ display:flex; align-items:center; gap:0; border:1px solid var(--g-primary); border-radius:11px; overflow:hidden; }
.sim-shop .qtystep button{ width:30px; height:34px; background:var(--g-soft); border:none; color:var(--g-primary); font-size:16px; }
.sim-shop .qtystep b{ min-width:26px; text-align:center; font-weight:600; font-size:13px; color:var(--g-ink); }

/* AOP-style / provenance & status pills */
.sim-shop .sm-tag{ background:var(--g-soft); color:var(--g-primary); font-size:9px; letter-spacing:.06em; padding:3px 8px; border-radius:20px; text-transform:uppercase; font-weight:700; }
.sim-shop .sm-status{ font-size:10px; letter-spacing:.04em; text-transform:uppercase; background:var(--g-soft); color:var(--g-primary); padding:4px 10px; border-radius:20px; font-weight:700; }

/* Branch picker */
.sim-shop .branch-row{
  display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--g-line); border-radius:14px;
  margin-bottom:12px; background:var(--g-card); cursor:pointer; text-decoration:none; color:inherit;
}
.sim-shop .branch-row:hover{ border-color:var(--g-primary); color:inherit; }
.sim-shop .branch-row .ic{ width:44px; height:44px; border-radius:12px; background:var(--g-soft); color:var(--g-primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px; }
.sim-shop .branch-row .nm{ font-weight:600; font-size:15px; }

/* Cart list rows */
.sim-shop .prow{ display:flex; gap:12px; align-items:center; padding:14px; background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; margin-bottom:10px; }
.sim-shop .prow .thumb{ width:56px; height:56px; border-radius:12px; background:var(--g-soft); flex:0 0 auto; object-fit:cover; }
.sim-shop .prow .thumb-ph{ width:56px; height:56px; border-radius:12px; background:var(--g-soft); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--g-accent); font-size:24px; }
.sim-shop .prow .nm{ font-weight:600; font-size:14px; color:var(--g-ink); }
.sim-shop .prow .pr{ font-weight:700; font-size:14px; color:var(--g-ink); }
.sim-shop .prow .memb{ color:var(--g-primary); font-size:10px; font-weight:600; }
.sim-shop .btn-add{ width:34px; height:34px; border-radius:11px; background:var(--g-primary); color:#fff; border:none; font-size:19px; line-height:1; }

/* Generic list rows / totals */
.sim-shop .sm-listrow{ display:flex; justify-content:space-between; align-items:center; padding:15px 4px; border-bottom:1px solid var(--g-line); color:var(--g-ink); text-decoration:none; }
.sim-shop .sm-listrow .r{ color:var(--g-muted); font-size:13px; }
.sim-shop .sm-total-row{ display:flex; justify-content:space-between; padding:6px 0; color:var(--g-ink); font-size:14px; }
.sim-shop .sm-total-row span:first-child{ color:var(--g-muted); }
.sim-shop .sm-total-row.grand{ font-size:19px; font-weight:700; color:var(--g-ink); border-top:1px solid var(--g-line); margin-top:10px; padding-top:14px; }
.sim-shop .sm-total-row.grand span:first-child{ color:var(--g-ink); }

/* Bottom nav */
.sim-shop .shop-bottomnav{
  position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:space-around; padding:10px 0 14px;
  border-top:1px solid var(--g-line); background:var(--g-card); z-index:20;
}
.sim-shop .shop-bottomnav a{ color:var(--g-muted); text-align:center; font-size:10px; text-decoration:none; flex:1; font-weight:500; }
.sim-shop .shop-bottomnav a i{ font-size:20px; display:block; margin-bottom:2px; }
.sim-shop .shop-bottomnav a.on{ color:var(--g-primary); }

/* ── CATEGORY GRID ────────────────────────────────────────────────────────
   The browse-by-category screens. The home strip (.cat-pill) stays exactly as
   it is - that is a horizontal shortcut row, this is the full grid you land on
   from the Categories tab, and they are not the same component.

   Three columns on a phone. Uploaded category images are cover-cropped into a
   fixed square so a mixed set of portrait and landscape uploads still reads as
   a grid; a category without an image gets its initial rather than a broken
   image box, because an unfilled image is normal, not an error. */
.sim-shop .cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sim-shop .cat-tile{
  position:relative; display:flex; flex-direction:column; align-items:center;
  background:var(--g-card); border:1px solid var(--g-line); border-radius:14px;
  padding:14px 6px 11px; text-decoration:none; color:var(--g-ink);
  min-height:104px;
}
.sim-shop .cat-tile:hover{ border-color:var(--g-primary); }
.sim-shop .cat-tile:focus-visible{ outline:2px solid var(--g-primary); outline-offset:2px; }
.sim-shop .cat-tile .ic{
  width:48px; height:48px; border-radius:15px; background:var(--g-soft);
  color:var(--g-primary); display:grid; place-items:center; overflow:hidden;
  margin-bottom:8px; flex-shrink:0;
}
.sim-shop .cat-tile .ic img{ width:100%; height:100%; object-fit:cover; display:block; }
.sim-shop .cat-tile .ic .mono-init{ font-size:19px; font-weight:800; }
.sim-shop .cat-tile .nm{
  font-size:11.5px; font-weight:600; line-height:1.3; text-align:center;
  /* Two lines, then ellipsis. "Fruit & Vegetables" must not make one tile
     taller than its neighbours and break the row. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.sim-shop .cat-tile .chev{
  position:absolute; top:8px; inset-inline-end:9px;
  font-size:13px; font-weight:700; color:var(--g-primary); line-height:1;
}

/* Breadcrumb. Only ever three levels deep - CategoryTreeService.MaxDepth. */
.sim-shop .shop-crumb{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12px; color:var(--g-muted); margin:0 0 14px;
}
.sim-shop .shop-crumb a{ color:var(--g-primary); text-decoration:none; font-weight:600; }
.sim-shop .shop-crumb b{ color:var(--g-ink); font-weight:600; }
.sim-shop .shop-crumb .sep{ color:var(--g-strike); }

@media (max-width:340px){
  .sim-shop .cat-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Five tabs, not four. At 10px the two longest labels ("Categories",
   "Products") wrapped and pushed the bar taller than the icons. Slightly
   smaller type and a hard no-wrap keeps every target on one line without
   shrinking the tap area, which stays the full flex column. */
.sim-shop .shop-bottomnav a{ font-size:9.5px; white-space:nowrap; padding:0 2px; }
.sim-shop .shop-bottomnav a i{ font-size:19px; }

/* ── PRODUCT SEARCH ───────────────────────────────────────────────────────
   44px minimum, because this is a touch surface and a search box below the
   thumb target is the control people miss most. */
.sim-shop .shop-search{
  display:flex; align-items:center; gap:9px; background:var(--g-card);
  border:1px solid var(--g-line); border-radius:12px; padding:0 12px;
  min-height:44px; margin-bottom:12px;
}
.sim-shop .shop-search:focus-within{ border-color:var(--g-primary); box-shadow:0 0 0 3px var(--g-soft); }
.sim-shop .shop-search i{ color:var(--g-muted); font-size:15px; flex-shrink:0; }
.sim-shop .shop-search input{
  border:0; outline:none; background:transparent; flex:1; min-width:0;
  font-size:14px; color:var(--g-ink); font-family:inherit;
  /* 16px on iOS or Safari zooms the page on focus; 14px with this is safe
     because the field is inside a max-width column. */
}
.sim-shop .shop-search input::placeholder{ color:var(--g-muted); }
.sim-shop .shop-search .clear{
  color:var(--g-muted); text-decoration:none; font-size:20px; line-height:1;
  padding:0 2px; flex-shrink:0;
}
.sim-shop .shop-search .clear:hover{ color:var(--g-ink); }

/* ── CATEGORY CHIPS + SORT ────────────────────────────────────────────────
   Narrowing the flat product list without leaving it. Scrolls sideways rather
   than wrapping to three rows and pushing the products off the first screen. */
.sim-shop .shop-chips{
  display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; margin-bottom:10px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.sim-shop .shop-chips::-webkit-scrollbar{ display:none; }
.sim-shop .shop-chips .chip{
  flex:0 0 auto; font-size:12px; font-weight:500; padding:7px 13px; border-radius:17px;
  background:var(--g-card); border:1px solid var(--g-line); color:var(--g-ink);
  text-decoration:none; white-space:nowrap; min-height:34px;
  display:inline-flex; align-items:center;
}
.sim-shop .shop-chips .chip.on{
  background:var(--g-primary); border-color:var(--g-primary); color:#fff; font-weight:600;
}
.sim-shop .shop-chips .chip:focus-visible{ outline:2px solid var(--g-primary); outline-offset:2px; }

.sim-shop .shop-sortbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px; font-size:12px; color:var(--g-muted);
}
.sim-shop .shop-sortbar .lbl{ font-weight:600; white-space:nowrap; }
.sim-shop .shop-sortbar .opts{ display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; }
.sim-shop .shop-sortbar .opts::-webkit-scrollbar{ display:none; }
.sim-shop .shop-sortbar .opts a{
  color:var(--g-muted); text-decoration:none; white-space:nowrap; padding:4px 0;
}
.sim-shop .shop-sortbar .opts a.on{ color:var(--g-primary); font-weight:700; }

/* Empty-state type, so the two views that use it cannot drift apart and no
   inline style= is needed (the 397 -> 0 acceptance test). */
.sim-shop .shop-empty-t{ font-size:15px; font-weight:700; margin:0 0 4px; }
.sim-shop .shop-empty-p{ font-size:13px; color:var(--g-muted); margin:0; line-height:1.55; }

/* ── IMAGE FALLBACKS ──────────────────────────────────────────────────────
   Every image slot now paints its fallback FIRST and lays the photo over the
   top, so an <img> whose file has gone (onerror="this.remove()") reveals the
   icon instead of the browser's torn-page glyph.

   WHY THIS KEEPS HAPPENING: uploads live in wwwroot/uploads/, which is not in
   source control and is not carried by a deployment package. Restore a database
   onto a fresh deployment and every ImageUrl in it points at a file that is no
   longer on disk - the path is valid, the row is valid, the file is absent.
   Checking IsNullOrWhiteSpace(ImageUrl) cannot detect that; only the browser can,
   and this is how it tells us.

   The image is absolutely positioned so it covers the fallback exactly, in every
   slot, at every size. */
.sim-shop .pcard .imgwrap,
.sim-shop .cat-tile .ic,
.sim-shop .cat-pill .ic,
.sim-shop .dealcard .imgwrap{ position:relative; }

.sim-shop .pcard .imgwrap img,
.sim-shop .cat-tile .ic img,
.sim-shop .cat-pill .ic img,
.sim-shop .dealcard .imgwrap img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; background:var(--g-soft);
  /* Above the fallback icon, below the badges (.badge-memb, .oos, .save). */
  z-index:1;
}
.sim-shop .pcard .imgwrap .badge-memb,
.sim-shop .pcard .imgwrap .oos,
.sim-shop .dealcard .imgwrap .save,
.sim-shop .dealcard .imgwrap .code,
.sim-shop .dealcard .imgwrap .ends{ z-index:2; }
/* Deal cards are 16:10 but product pictures are square: show the whole
   picture (with its pack-size badge) instead of cropping top and bottom. */
.sim-shop .dealcard .imgwrap img{ object-fit:contain; }

/* The picture is decorative in a tile whose name is already written beneath it,
   so a broken one must not leave alt text sitting across the icon. */
.sim-shop .cat-tile .ic img,
.sim-shop .cat-pill .ic img{ font-size:0; color:transparent; }

/* Product detail hero. The placeholder holds the 320px whether or not the photo
   arrives, so a missing file cannot collapse the page. */
.sim-shop .pd-mainwrap{ position:relative; height:320px; background:#fafbfc; }
.sim-shop .pd-mainwrap .pd-ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#c3c9d0; font-size:56px;
}
.sim-shop .pd-mainwrap .pd-main{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  background:#fafbfc; z-index:1;
}

/* ── LIVE TRACKING (356) ──────────────────────────────────────────────────
   The card carries the accent bar because the status IS derived from a ledger
   of status events - the same meaning the bar has everywhere else in this
   product. Nothing decorative gets it. */
.sim-shop .track-card{
  display:block; position:relative; overflow:hidden; text-decoration:none; color:inherit;
  background:var(--g-card); border:1px solid var(--g-line); border-radius:14px;
  padding:14px; margin-bottom:12px;
}
.sim-shop .track-card::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px;
  background:var(--g-primary);
}
.sim-shop .track-card.bad::before{ background:#C4142B; }
.sim-shop .track-card.bad{ border-color:#F0C9CE; }
.sim-shop .track-card .hd{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.sim-shop .track-card .st{ font-size:14px; font-weight:700; }
.sim-shop .track-card.bad .st{ color:#C4142B; }
.sim-shop .track-card .sub{ font-size:11.5px; color:var(--g-muted); margin-top:2px; line-height:1.45; }

/* One segment per forward step. */
.sim-shop .track-card .pbar{ display:flex; gap:4px; margin:12px 0 4px; }
.sim-shop .track-card .pbar i{ flex:1; height:4px; border-radius:2px; background:var(--g-line); }
.sim-shop .track-card .pbar i.on{ background:var(--g-primary); }
.sim-shop .track-card .pbar i.now{ background:var(--g-accent); }
.sim-shop .track-card .pbar-lbl{
  display:flex; justify-content:space-between; font-size:8.5px; color:var(--g-muted);
  text-transform:uppercase; letter-spacing:.05em; font-weight:600;
}

.sim-shop .track-card .paynote{
  margin-top:11px; border-radius:10px; padding:9px 11px;
  font-size:11.5px; font-weight:600; line-height:1.5;
}
.sim-shop .track-card .paynote.cod{ background:#FFF4DE; border:1px solid #F3E0AE; color:#7A5B00; }
.sim-shop .track-card .paynote.paid{ background:var(--g-soft); border:1px solid #CDE6D0; color:#1B5E20; }

.sim-shop .track-refresh{
  display:flex; align-items:center; gap:6px; justify-content:center;
  font-size:10.5px; color:var(--g-muted); margin:14px 0 2px;
}
.sim-shop .track-refresh .dotpulse{ width:6px; height:6px; border-radius:50%; background:var(--g-accent); }

.sim-shop .sm-status.grey{ background:#F1F3F1; color:var(--g-muted); }
.sim-shop .sm-status.bad{ background:#FBE9EB; color:#C4142B; }

/* ---- mobile/onlinestore/store.css (scoped to .sim-shop; generated by tools/tour/build-tour-css.mjs — do not edit) ---- */
/* ═══════════════════════════════════════════════════════════════════════════
   Online store — the PWA layer ONLY.

   WHAT THIS FILE USED TO BE, AND WHY THAT WAS WRONG
   -------------------------------------------------
   It was a copy of the DRIVER app's stylesheet. It styled `.stop`, `.cash` and
   the delivery sync chip — none of which exist in a shop — and, fatally, it
   declared its own `:root` palette in v2 navy and a `body` rule using it.

   _StoreApp loads it AFTER shop.css, so those two rules repainted the entire
   storefront navy over the green it has always been. The shop looked like a
   different product, and every green button, chip and heading in shop.css was
   fighting a background that no longer matched.

   shop.css OWNS THE STOREFRONT'S LOOK. Its palette is --g-primary #2E7D32,
   --g-accent #43A047, --g-soft #E8F5E9 — deep grocery green on white — and it
   is not overridden here. This file now adds only what shop.css cannot know
   about: the things that are true because the page is running as an INSTALLED
   APP rather than a browser tab.
   ═══════════════════════════════════════════════════════════════════════════ */

/* iOS notch and home indicator. Without these the top bar sits under the status
   bar and the bottom of the page under the home bar — R4. Applied as padding on
   the existing chrome rather than as a new layout, so nothing moves in a browser
   where the insets are zero. */
.sim-shop .shop-topbar { padding-top: env(safe-area-inset-top); }
.sim-shop .shop-main   { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.sim-shop         { padding-left: env(safe-area-inset-left);
               padding-right: env(safe-area-inset-right); }

/* Installed, there is no browser chrome to pull down on, so overscroll must not
   bounce the whole document — it reads as the app coming loose. */
@media (display-mode: standalone) {
    .sim-shop, .sim-shop { overscroll-behavior-y: contain; }
}

/* Field density (Part 6.5) for the touch targets only. A shopper is one-handed
   and moving; 44px is the floor on any touch surface. Colour is deliberately
   NOT set here — shop.css decides that. */
.sim-shop .shop-topbar .shop-bag,
.sim-shop .btn-shop-primary,
.sim-shop .btn-shop-secondary { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
    .sim-shop * { transition: none !important; animation: none !important; }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────
   shop.css centres content in a 560px column, which is right on a phone and
   right on a desktop — a grocery list does not want to be 1900px wide.

   What it did NOT have is behaviour BELOW that width, because it was written
   against a phone and never resized. On a narrow window (a docked browser, a
   split screen, an emulator at 380px) the 16px gutters plus the fixed 60px
   category tiles overflowed and the page scrolled sideways. A horizontal
   scrollbar on a shop is how a customer loses the "Add" button.                */

/* Nothing may be wider than the window. The single most common cause of
   sideways scroll is one child that forgot. */
.sim-shop, .sim-shop { max-width: 100%; overflow-x: hidden; }
.sim-shop img, .sim-shop svg, .sim-shop table { max-width: 100%; }

@media (max-width: 420px) {
    .sim-shop .shop-container      { padding-left: 12px; padding-right: 12px; }
    .sim-shop .shop-topbar .brand  { font-size: 17px; }
    .sim-shop .shop-topbar .icons  { gap: 12px; }
    .sim-shop .cat-pill            { width: 64px; }
    .sim-shop .cat-pill .ic        { width: 52px; height: 52px; border-radius: 15px; }
}

/* Tablet and desktop: the column stays 560px, but the bottom tab bar should not
   stretch across a 27-inch monitor — it aligns with the content it belongs to. */
@media (min-width: 561px) {
    .sim-shop .shop-bottomnav { max-width: 560px; margin: 0 auto; left: 0; right: 0; }
}

/* The tab bar is fixed, so the last row of content must clear it or the final
   product in a list is permanently unreachable behind it. */
.sim-shop .shop-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ── .btn-shop-secondary — a class that was referenced and never defined ─────
   shop.css has .btn-shop-primary and .btn-shop-dark. Several views, including
   the landing page and the guest checkout panel, use .btn-shop-secondary, which
   matched no rule at all — so "Sign in" and "Create an account" rendered as bare
   blue anchor text next to a green button.

   Defined here in the storefront's own palette: a green OUTLINE button. Outline
   rather than solid because the page already has one solid green primary ("Shop
   as a guest") and two solid buttons of equal weight is a screen that has not
   decided what it wants you to do.                                             */
.sim-shop .btn-shop-secondary {
    display: inline-block;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--g-primary);
    background: #fff;
    color: var(--g-primary);
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    min-height: 44px;
    cursor: pointer;
}
.sim-shop .btn-shop-secondary:hover  { background: var(--g-soft); color: var(--g-primary); }
.sim-shop .btn-shop-secondary:focus-visible { outline: 2px solid var(--g-primary); outline-offset: 2px; }

/* The cart badge inside the bottom tab. shop.css styles .count for the top bar,
   where it sits over a 40px icon button; in the tab bar the anchor is a column
   (icon over label), so it needs its own placement or it lands under the word. */
.sim-shop .shop-bottomnav a > .count {
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--g-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* ---- css/shop-additions.css (scoped to .sim-shop; generated by tools/tour/build-tour-css.mjs — do not edit) ---- */
/* ═══════════════════════════════════════════════════════════════════════
   SHOP ADDITIONS — Round 1.
   Loaded AFTER shop.css so it can rely on the --g-* tokens without
   redefining any of them. Copied from the approved mockups' own CSS block
   (mockups/store-additions.css); nothing here was redesigned in the build.

   NO NEW COLOUR. Every value is an existing --g-* token, except the two
   amber inks (#8A5A00, #5C3D00, #4A3000) which the mockups already carry as
   readable text on --g-amber-s. Decision R1-7: cash-to-collect is the one
   place amber outranks green.
   ═══════════════════════════════════════════════════════════════════════ */

/* points panel · ledger treatment of the existing balance data */
.sim-shop .pts-panel{ background:var(--g-card); border:1px solid var(--g-line); border-radius:14px;
  padding:16px 18px 16px 21px; position:relative; overflow:hidden; }
.sim-shop .pts-panel::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:4px; background:var(--g-primary); }
.sim-shop .pts-panel .row2{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.sim-shop .pts-panel .v{ font-size:30px; line-height:34px; font-weight:700; color:var(--g-ink); font-variant-numeric:tabular-nums; }
.sim-shop .pts-panel .m{ font-size:11px; color:var(--g-muted); margin-top:2px; }
.sim-shop .pts-panel .worth{ text-align:right; font-size:11px; color:var(--g-muted); }
.sim-shop .pts-panel .worth b{ display:block; font-size:17px; color:var(--g-primary); font-variant-numeric:tabular-nums; }
.sim-shop .pts-panel .pend{ margin-top:11px; padding-top:10px; border-top:1px solid var(--g-line);
  font-size:12px; color:var(--g-muted); }

/* deals strip · where a Marketing promotion becomes visible */
.sim-shop .deal-scroll{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.sim-shop .deal-scroll::-webkit-scrollbar{ display:none; }
.sim-shop .dealcard{ flex:0 0 224px; scroll-snap-align:start; background:var(--g-card);
  border:1px solid var(--g-line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.sim-shop .dealcard:hover{ color:inherit; }
.sim-shop .dealcard .imgwrap{ position:relative; aspect-ratio:16/10; background:var(--g-soft);
  display:flex; align-items:center; justify-content:center; color:var(--g-accent); font-size:32px; }
.sim-shop .dealcard .save{ position:absolute; top:9px; left:9px; background:var(--g-amber); color:#4A3000;
  font-size:11px; font-weight:800; padding:4px 9px; border-radius:20px; }
.sim-shop .dealcard .code{ position:absolute; top:9px; left:9px; background:var(--g-primary); color:#fff;
  font-size:10px; font-weight:800; padding:4px 9px; border-radius:20px; letter-spacing:.04em; }
.sim-shop .dealcard .ends{ position:absolute; bottom:9px; left:9px; background:rgba(30,43,36,.72); color:#fff;
  font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; }
.sim-shop .dealcard .b{ padding:11px 13px 13px; display:flex; flex-direction:column; flex:1; }
.sim-shop .dealcard .nm{ font-size:13px; font-weight:600; line-height:1.3; color:var(--g-ink); min-height:34px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sim-shop .dealcard .prow2{ display:flex; align-items:baseline; gap:7px; margin-top:7px; }
.sim-shop .dealcard .price{ font-size:18px; font-weight:700; color:var(--g-ink); font-variant-numeric:tabular-nums; }
.sim-shop .dealcard .earn{ font-size:11px; color:var(--g-primary); font-weight:700; margin-top:3px; }
.sim-shop .dealcard .btn-shop-primary{ margin-top:10px; padding:11px; font-size:13px; }

/* live order strip on home */
.sim-shop .track-mini{ background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; padding:14px 16px; }
.sim-shop .track-mini .st{ font-weight:700; font-size:15px; color:var(--g-ink); }
.sim-shop .track-mini .eta{ font-size:12px; color:var(--g-muted); margin-top:2px; }
.sim-shop .pbar{ display:flex; gap:5px; margin-top:12px; }
.sim-shop .pbar i{ flex:1; height:5px; border-radius:20px; background:var(--g-line); }
.sim-shop .pbar i.on{ background:var(--g-primary); }
.sim-shop .pbar i.now{ background:var(--g-accent); animation:pb 1.6s ease-in-out infinite; }
@keyframes pb{ 0%,100%{opacity:1} 50%{opacity:.4} }
@media (prefers-reduced-motion:reduce){ .sim-shop .pbar i.now{ animation:none } }
.sim-shop .track-mini .who{ display:flex; align-items:center; gap:11px; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--g-line); }
.sim-shop .avat{ width:38px; height:38px; border-radius:50%; background:var(--g-soft); color:var(--g-primary);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:0 0 auto; }

/* tracking timeline · one row per OnlineOrderStatusHistory row */
.sim-shop .tl{ position:relative; padding-left:30px; }
.sim-shop .tl::before{ content:''; position:absolute; left:9px; top:9px; bottom:16px; width:2px; background:var(--g-line); }
.sim-shop .ev{ position:relative; padding-bottom:20px; }
.sim-shop .ev:last-child{ padding-bottom:0; }
.sim-shop .ev .pin{ position:absolute; left:-30px; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--g-card); border:2px solid var(--g-line); display:flex; align-items:center;
  justify-content:center; font-size:10px; color:var(--g-muted); }
.sim-shop .ev.done .pin{ background:var(--g-primary); border-color:var(--g-primary); color:#fff; }
.sim-shop .ev.now  .pin{ background:var(--g-accent); border-color:var(--g-soft); color:#fff; box-shadow:0 0 0 4px var(--g-soft); }
.sim-shop .ev .t{ font-weight:700; font-size:14px; color:var(--g-ink); }
.sim-shop .ev.todo .t{ color:var(--g-muted); font-weight:600; }
.sim-shop .ev.now  .t{ color:var(--g-primary); }
.sim-shop .ev .d{ font-size:12.5px; color:var(--g-muted); margin-top:3px; line-height:1.45; }
.sim-shop .ev .when{ font-size:11px; color:var(--g-muted); font-variant-numeric:tabular-nums; margin-top:3px; }

/* cash-to-collect · the one place amber outranks green */
.sim-shop .cod-box{ background:var(--g-amber-s); border:1px solid var(--g-amber); border-radius:14px; padding:14px 16px; }
.sim-shop .cod-box .k{ font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#8A5A00; }
.sim-shop .cod-box .v{ font-size:27px; line-height:31px; font-weight:700; color:#5C3D00;
  font-variant-numeric:tabular-nums; margin-top:2px; }
.sim-shop .cod-box .m{ font-size:12px; color:#8A5A00; margin-top:3px; }

/* substitution note on an order line */
.sim-shop .sub-note{ font-size:11.5px; color:#8A5A00; background:var(--g-amber-s); border-radius:9px;
  padding:5px 9px; margin-top:5px; line-height:1.4; }

/* ── ONE ADDITION THE MOCKUP CSS DID NOT CARRY ──────────────────────────
   mockup 02 marks up a struck-through was-price inside .dealcard .prow2, but
   store-additions.css defines no rule for it and shop.css scopes .was to
   .pcard only — so the old price rendered as plain text at full size, reading
   as a second live price. Same values as .pcard .was, no new colour. Recorded
   in CHECKPOINT_27 §6 as a gap in the approved artefact, not a redesign. */
.sim-shop .dealcard .was{ font-size:11px; color:var(--g-strike); text-decoration:line-through; }

/* ── TWO HELPERS THE NEW MARKUP NEEDS ───────────────────────────────────
   Both replace inline style= attributes the mockups used for brevity. The
   acceptance test for the redesign is that the inline-style count reaches
   zero, so a mockup shortcut becomes a class here rather than travelling
   into a real view. */

/* A dark button that sits INSIDE a row rather than filling it — the Call
   button on the tracking strip and the driver card. */
.sim-shop .btn-shop-dark.btn-inline,
.sim-shop .btn-shop-primary.btn-inline{ width:auto; padding:9px 16px; font-size:12.5px; }

/* A link that wraps card furniture and must not look like a link. */
.sim-shop .card-link{ text-decoration:none; color:inherit; display:block; }
.sim-shop .card-link:hover{ color:inherit; }

/* The 12px variant of the muted note. Was an inline style in the mockup. */
.sim-shop .shop-muted.sm{ font-size:12px; }

/* ── ROUND 2 · A4 · a category picture inside the existing pill ────────────
   The pill, its size and its radius are untouched. A picture simply fills the
   circle the icon used to sit in, so a strip that mixes categories with and
   without a picture still reads as one row of the same object.
   R2-3: storefront tiles only — the back office never renders this. */
.sim-shop .cat-pill .ic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}