/* ═══════════════════════════════════════════════════════════════════════
   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 */
.pts-panel{ background:var(--g-card); border:1px solid var(--g-line); border-radius:14px;
  padding:16px 18px 16px 21px; position:relative; overflow:hidden; }
.pts-panel::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:4px; background:var(--g-primary); }
.pts-panel .row2{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.pts-panel .v{ font-size:30px; line-height:34px; font-weight:700; color:var(--g-ink); font-variant-numeric:tabular-nums; }
.pts-panel .m{ font-size:11px; color:var(--g-muted); margin-top:2px; }
.pts-panel .worth{ text-align:right; font-size:11px; color:var(--g-muted); }
.pts-panel .worth b{ display:block; font-size:17px; color:var(--g-primary); font-variant-numeric:tabular-nums; }
.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 */
.deal-scroll{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.deal-scroll::-webkit-scrollbar{ display:none; }
.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; }
.dealcard:hover{ color:inherit; }
.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; }
.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; }
.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; }
.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; }
.dealcard .b{ padding:11px 13px 13px; display:flex; flex-direction:column; flex:1; }
.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; }
.dealcard .prow2{ display:flex; align-items:baseline; gap:7px; margin-top:7px; }
.dealcard .price{ font-size:18px; font-weight:700; color:var(--g-ink); font-variant-numeric:tabular-nums; }
.dealcard .earn{ font-size:11px; color:var(--g-primary); font-weight:700; margin-top:3px; }
.dealcard .btn-shop-primary{ margin-top:10px; padding:11px; font-size:13px; }

/* live order strip on home */
.track-mini{ background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; padding:14px 16px; }
.track-mini .st{ font-weight:700; font-size:15px; color:var(--g-ink); }
.track-mini .eta{ font-size:12px; color:var(--g-muted); margin-top:2px; }
.pbar{ display:flex; gap:5px; margin-top:12px; }
.pbar i{ flex:1; height:5px; border-radius:20px; background:var(--g-line); }
.pbar i.on{ background:var(--g-primary); }
.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){ .pbar i.now{ animation:none } }
.track-mini .who{ display:flex; align-items:center; gap:11px; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--g-line); }
.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 */
.tl{ position:relative; padding-left:30px; }
.tl::before{ content:''; position:absolute; left:9px; top:9px; bottom:16px; width:2px; background:var(--g-line); }
.ev{ position:relative; padding-bottom:20px; }
.ev:last-child{ padding-bottom:0; }
.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); }
.ev.done .pin{ background:var(--g-primary); border-color:var(--g-primary); color:#fff; }
.ev.now  .pin{ background:var(--g-accent); border-color:var(--g-soft); color:#fff; box-shadow:0 0 0 4px var(--g-soft); }
.ev .t{ font-weight:700; font-size:14px; color:var(--g-ink); }
.ev.todo .t{ color:var(--g-muted); font-weight:600; }
.ev.now  .t{ color:var(--g-primary); }
.ev .d{ font-size:12.5px; color:var(--g-muted); margin-top:3px; line-height:1.45; }
.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 */
.cod-box{ background:var(--g-amber-s); border:1px solid var(--g-amber); border-radius:14px; padding:14px 16px; }
.cod-box .k{ font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#8A5A00; }
.cod-box .v{ font-size:27px; line-height:31px; font-weight:700; color:#5C3D00;
  font-variant-numeric:tabular-nums; margin-top:2px; }
.cod-box .m{ font-size:12px; color:#8A5A00; margin-top:3px; }

/* substitution note on an order line */
.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. */
.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. */
.btn-shop-dark.btn-inline,
.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. */
.card-link{ text-decoration:none; color:inherit; display:block; }
.card-link:hover{ color:inherit; }

/* The 12px variant of the muted note. Was an inline style in the mockup. */
.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. */
.cat-pill .ic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}