/* ============================================================
   LittleRoots — 2026 master upgrade components.
   Loaded LAST, after theme.css, so it can restyle without
   editing the existing sheets. Reuses the theme tokens
   (--ink, --muted, --line, --primary, --sage-deep …) rather
   than introducing a second palette.

   Sections
     1  Side cart drawer + reward ladder      (brief §3)
     2  Free gift block                       (brief §2)
     3  Coupon / offer list                   (brief §19)
     4  Banners                               (brief §1)
     5  Shop by Age / Shop by Skill           (brief §15 §17)
     6  FAQ accordion                         (brief §6)
     7  Floating WhatsApp CTA                 (brief §20)
     8  Delivery estimate + order timeline    (brief §11 §24)
     9  Product detail additions              (brief §18)
    10  Reviews with photo/video              (brief §12 §13)
    11  Predictive search                     (brief §22)
    12  Product filters                       (brief §23)
    13  Checkout steps                        (brief §4 §25)
    14  Skeleton loaders + empty states       (brief §35)
    15  Mobile-first refinements              (brief §31)
    16  Wishlist popup
   ============================================================ */

:root {
  --lr-drawer-w: 430px;
  --lr-gift: #e0a92c;
  --lr-ok: #4f8a4f;
  --lr-warn: #c0492a;
  --lr-wa: #25d366;
}

/* ============================================================
   1. SIDE CART DRAWER
   The drawer is rendered at document ROOT (not inside the
   header) — .store-header is a sticky stacking context, so a
   drawer nested inside it could never paint above the backdrop.
   ============================================================ */

.cd-backdrop {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(28, 25, 23, .48);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
body.lr-cart-open .cd-backdrop { opacity: 1; visibility: visible; }

.lr-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1500;
  width: min(var(--lr-drawer-w), 100vw);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(102%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -12px 0 40px -18px rgba(28, 25, 23, .45);
  will-change: transform;
}
body.lr-cart-open .lr-cart-drawer { transform: translateX(0); }

.cd-head {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.15rem; border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.cd-head h2 {
  margin: 0; font-family: var(--font-display);
  font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase;
}
.cd-head .cd-count { color: var(--muted); font-weight: 600; }
.cd-close {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 1.35rem; line-height: 1; color: var(--muted);
  width: 34px; height: 34px; border-radius: 50%;
}
.cd-close:hover { background: var(--cream-soft); color: var(--ink); }

/* The AJAX refresh swaps the whole of #lrCartBody, which contains .cd-inner
   AND .cd-foot. So the wrapper is the flex column and .cd-inner is the actual
   scroller — that keeps the totals + checkout button pinned while the item
   list scrolls, without the endpoint needing to know about the chrome. */
.cd-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.cd-inner { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ---- reward ladder / progress bar ---- */
.cd-progress { padding: .9rem 1.15rem 1.1rem; background: var(--cream-soft); border-bottom: 1px solid var(--line); }
.cd-progress-msg { font-size: .84rem; font-weight: 700; color: var(--ink); margin: 0 0 .6rem; }
.cd-progress-msg .cd-amt { color: var(--sage-deep); }
.cd-progress.is-won .cd-progress-msg { color: var(--lr-ok); }
.cd-bar { position: relative; height: 7px; border-radius: 6px; background: rgba(44, 38, 32, .1); }
.cd-bar-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  border-radius: 6px; background: linear-gradient(90deg, var(--sage-deep), var(--primary));
  transition: width .35s ease;
}
.cd-stops { position: relative; height: 34px; margin-top: .4rem; }
.cd-stop { position: absolute; top: 0; font-size: .68rem; line-height: 1.15; color: var(--muted); text-align: center; width: 96px; }
.cd-stop i { display: block; font-style: normal; font-size: .8rem; margin-bottom: .1rem; }
.cd-stop.reached { color: var(--lr-ok); font-weight: 700; }
.cd-stop-dot {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2px solid rgba(44, 38, 32, .25);
}
.cd-stop.reached .cd-stop-dot { border-color: var(--lr-ok); background: var(--lr-ok); }

/* ---- line items ---- */
.cd-items { list-style: none; margin: 0; padding: 0; }
.cd-item { display: grid; grid-template-columns: 74px 1fr auto; gap: .8rem; padding: .95rem 1.15rem; border-bottom: 1px solid var(--line); }
.cd-item-img { display: block; width: 74px; height: 74px; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.cd-item-img img { width: 100%; height: 100%; object-fit: contain; }
.cd-item-name { display: block; font-weight: 600; font-size: .87rem; color: var(--ink); text-decoration: none; line-height: 1.3; }
.cd-item-name:hover { color: var(--sage-deep); }
.cd-item-variant { display: block; font-size: .74rem; color: var(--muted); margin-top: .12rem; }
.cd-item-price { display: flex; align-items: baseline; gap: .4rem; margin-top: .3rem; font-size: .85rem; }
.cd-item-price .now { font-weight: 700; }
.cd-item-price .was { text-decoration: line-through; color: var(--muted); font-size: .76rem; }
.cd-item-price .off { color: var(--lr-ok); font-size: .72rem; font-weight: 700; }
.cd-item-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: .45rem; }
.cd-line-total { font-weight: 700; font-size: .87rem; white-space: nowrap; }

.cd-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.cd-qty button { background: none; border: 0; cursor: pointer; width: 26px; height: 26px; font-size: .95rem; line-height: 1; color: var(--ink); }
.cd-qty button:hover:not(:disabled) { background: var(--cream-soft); }
.cd-qty button:disabled { opacity: .35; cursor: not-allowed; }
.cd-qty input { width: 30px; border: 0; text-align: center; font-size: .82rem; font-weight: 600; -moz-appearance: textfield; }
.cd-qty input::-webkit-outer-spin-button, .cd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cd-remove { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: .95rem; padding: 2px 4px; line-height: 1; }
.cd-remove:hover { color: var(--lr-warn); }

/* ---- section headings inside the drawer ---- */
.cd-section { padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.cd-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; }
.cd-section-head h3 { margin: 0; font-family: var(--font-display); font-size: .93rem; }
.cd-section-head .cd-more { font-size: .76rem; color: var(--sage-deep); text-decoration: none; font-weight: 700; }

/* ---- horizontally scrollable recommendation rail ---- */
.cd-rail { display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .35rem; margin: 0 -.2rem; scrollbar-width: thin; }
.cd-rail::-webkit-scrollbar { height: 5px; }
.cd-rail::-webkit-scrollbar-thumb { background: rgba(44, 38, 32, .2); border-radius: 4px; }
.cd-rec { flex: 0 0 132px; scroll-snap-align: start; position: relative; }
.cd-rec-media { position: relative; display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; aspect-ratio: 1; }
.cd-rec-media img { width: 100%; height: 100%; object-fit: contain; }
.cd-rec-off { position: absolute; top: 4px; left: 4px; right: auto; background: var(--lr-warn); color: #fff; font-size: .62rem; font-weight: 800; padding: .12rem .32rem; border-radius: 3px; }
.cd-rec-name { display: block; font-size: .76rem; line-height: 1.28; margin: .35rem 0 .15rem; color: var(--ink); text-decoration: none; min-height: 2.1em; }
.cd-rec-price { display: flex; align-items: baseline; gap: .3rem; font-size: .78rem; }
.cd-rec-price .now { font-weight: 700; }
.cd-rec-price .was { text-decoration: line-through; color: var(--muted); font-size: .68rem; }
.cd-rec-add { display: block; width: 100%; margin-top: .35rem; padding: .3rem; border: 1px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-size: .7rem; font-weight: 800; letter-spacing: .06em; cursor: pointer; }
.cd-rec-add:hover { background: var(--ink); color: #fff; }
.cd-rec-add.is-loading { opacity: .6; pointer-events: none; }

/* ---- sticky footer ---- */
.cd-foot { flex: 0 0 auto; border-top: 1px solid var(--line); padding: .95rem 1.15rem 1.1rem; background: #fff; box-shadow: 0 -8px 22px -20px rgba(28, 25, 23, .5); }
.cd-sums { list-style: none; margin: 0 0 .6rem; padding: 0; font-size: .82rem; }
.cd-sums li { display: flex; justify-content: space-between; gap: 1rem; padding: .18rem 0; color: var(--muted); }
.cd-sums li span:last-child { color: var(--ink); font-weight: 600; }
.cd-sums li.is-discount span:last-child { color: var(--lr-ok); }
.cd-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .5rem; border-top: 1px solid var(--line); font-family: var(--font-display); }
.cd-total .lbl { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cd-total .val { font-size: 1.2rem; font-weight: 800; }
.cd-saved { margin: .35rem 0 0; font-size: .78rem; color: var(--lr-ok); font-weight: 700; }
.cd-checkout { display: block; width: 100%; margin-top: .75rem; padding: .8rem; border: 0; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-weight: 800; font-size: .93rem; text-align: center; text-decoration: none; cursor: pointer; }
.cd-checkout:hover { background: var(--primary-dark); }
.cd-foot-note { margin: .5rem 0 0; font-size: .72rem; color: var(--muted); text-align: center; }

/* ---- empty state ---- */
.cd-empty { padding: 3rem 1.5rem; text-align: center; }
.cd-empty-emoji { font-size: 2.4rem; }
.cd-empty h3 { font-family: var(--font-display); margin: .6rem 0 .3rem; font-size: 1.05rem; }
.cd-empty p { color: var(--muted); font-size: .85rem; margin: 0 0 1rem; }

/* ============================================================
   2. FREE GIFT BLOCK
   ============================================================ */
.lr-gift {
  display: flex; gap: .8rem; align-items: center;
  padding: .8rem 1.15rem;
  background: linear-gradient(100deg, #fff8e6, #fdf1d8);
  border-bottom: 1px solid var(--line);
}
.lr-gift-img { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 8px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.lr-gift-img img { width: 100%; height: 100%; object-fit: contain; }
.lr-gift-copy { min-width: 0; }
.lr-gift-tag { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a5f10; }
.lr-gift-name { display: block; font-size: .84rem; font-weight: 700; line-height: 1.3; }
.lr-gift-note { display: block; font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.lr-gift-pick { margin-left: auto; flex: 0 0 auto; }
.lr-gift-pick select { font-size: .74rem; padding: .3rem .45rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; max-width: 130px; }

/* Locked gift teaser (value not yet reached) */
.lr-gift.is-locked { background: var(--cream-soft); }
.lr-gift.is-locked .lr-gift-img { filter: grayscale(1); opacity: .65; }
.lr-gift.is-locked .lr-gift-tag { color: var(--muted); }

/* ============================================================
   3. COUPON / OFFER LIST
   ============================================================ */
.lr-offers { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lr-offers-head { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .7rem .9rem; background: var(--cream-soft); border: 0; cursor: pointer; font: inherit; text-align: left; }
.lr-offers-head strong { font-size: .84rem; }
.lr-offers-head .lr-caret { margin-left: auto; transition: transform .2s ease; color: var(--muted); }
.lr-offers[open] .lr-offers-head .lr-caret, .lr-offers.is-open .lr-offers-head .lr-caret { transform: rotate(180deg); }
.lr-offers-body { padding: .3rem 0; }
.lr-offer { display: flex; align-items: center; gap: .7rem; padding: .65rem .9rem; border-top: 1px solid var(--line); }
.lr-offer-code { font-family: var(--font-display); font-weight: 800; font-size: .82rem; letter-spacing: .05em; border: 1px dashed var(--ink); border-radius: 5px; padding: .18rem .45rem; white-space: nowrap; }
.lr-offer-copy { min-width: 0; flex: 1 1 auto; }
.lr-offer-label { display: block; font-size: .82rem; font-weight: 700; }
.lr-offer-note { display: block; font-size: .72rem; color: var(--muted); }
.lr-offer.is-locked .lr-offer-code { border-color: var(--line); color: var(--muted); }
.lr-offer.is-locked .lr-offer-note { color: var(--lr-warn); }
.lr-offer-apply { border: 0; background: var(--ink); color: #fff; border-radius: 999px; padding: .35rem .8rem; font-size: .74rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.lr-offer-apply:hover { background: var(--sage-deep); }
.lr-offer-remove { border: 0; background: none; color: var(--lr-warn); font-size: .74rem; font-weight: 700; cursor: pointer; text-decoration: underline; }
.lr-coupon-form { display: flex; gap: .45rem; padding: .7rem .9rem; border-top: 1px solid var(--line); }
.lr-coupon-form input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem; font-size: .82rem; text-transform: uppercase; }
.lr-coupon-form button { border: 1px solid var(--ink); background: #fff; border-radius: 8px; padding: .45rem .8rem; font-size: .78rem; font-weight: 800; cursor: pointer; }
.lr-coupon-form button:hover { background: var(--ink); color: #fff; }
.lr-coupon-msg { padding: 0 .9rem .6rem; font-size: .76rem; }
.lr-coupon-msg.ok { color: var(--lr-ok); }
.lr-coupon-msg.err { color: var(--lr-warn); }
.lr-applied { display: flex; align-items: center; gap: .5rem; padding: .65rem .9rem; background: #f2f8f2; border-top: 1px solid var(--line); font-size: .82rem; }
.lr-applied strong { font-family: var(--font-display); letter-spacing: .04em; }

/* ============================================================
   4. BANNERS
   ============================================================ */
.lr-banner-slot { display: grid; gap: 1rem; margin: clamp(1rem, 3vw, 1.75rem) 0; }
.lr-banner { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--cream-soft); }
a.lr-banner-link { display: block; text-decoration: none; color: inherit; }
.lr-banner-img-wrap { display: block; }
.lr-banner-img { display: block; width: 100%; height: auto; }
.lr-banner-copy { padding: 1.1rem 1.25rem; }
.lr-banner-img + .lr-banner-copy,
.lr-banner-img-wrap + .lr-banner-copy {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(20, 18, 16, .78));
  color: #fff;
}
.lr-banner-copy h3 { margin: 0 0 .2rem; font-family: var(--font-display); font-size: clamp(1rem, 2.4vw, 1.4rem); }
.lr-banner-copy p { margin: 0; font-size: .86rem; opacity: .92; }
.lr-banner-cta { display: inline-block; margin-top: .7rem; }
/* a copy-only banner (no artwork) needs its own ink colour */
.lr-banner > .lr-banner-copy:first-child { color: var(--ink); }
.lr-banner > .lr-banner-copy:first-child p { color: var(--muted); }

.lr-banner-cart_drawer, .lr-banner-checkout_trust { margin: 0; }
.lr-banner-cart_drawer .lr-banner { border-radius: 0; }

/* ============================================================
   5. SHOP BY AGE / SHOP BY SKILL
   ============================================================ */
.lr-tiles { display: grid; gap: clamp(.6rem, 1.6vw, 1rem); grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.lr-tile {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--tile-tint, var(--cream-soft));
  text-decoration: none; color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 116px;
}
.lr-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lr-tile-ico { font-size: 1.6rem; line-height: 1; }
.lr-tile-name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.lr-tile-sub { font-size: .72rem; color: var(--muted); line-height: 1.3; }
.lr-tile-count { margin-top: auto; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sage-deep); }
.lr-tile-img { width: 100%; aspect-ratio: 16/10; object-fit: contain; border-radius: 6px; background: #fff; }

/* skills read as a denser chip grid */
.lr-tiles.is-skills { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.lr-tiles.is-skills .lr-tile { min-height: 92px; background: #fff; }
.lr-tiles.is-skills .lr-tile:hover { border-color: var(--sage-deep); }

/* ============================================================
   6. FAQ ACCORDION
   ============================================================ */
.lr-faq { border-top: 1px solid var(--line); }
.lr-faq-item { border-bottom: 1px solid var(--line); }
.lr-faq-item > summary {
  cursor: pointer; padding: .95rem .25rem .95rem 0; list-style: none;
  font-weight: 600; font-size: .95rem; display: flex; gap: .75rem; align-items: flex-start;
}
.lr-faq-item > summary::-webkit-details-marker { display: none; }
.lr-faq-item > summary::after {
  content: "+"; margin-left: auto; flex: 0 0 auto;
  font-size: 1.25rem; line-height: 1; color: var(--muted); transition: transform .2s ease;
}
.lr-faq-item[open] > summary::after { content: "−"; }
.lr-faq-item > summary:hover { color: var(--sage-deep); }
.lr-faq-body { padding: 0 2rem .95rem 0; color: var(--muted); font-size: .89rem; line-height: 1.65; }

/* ============================================================
   7. FLOATING WHATSAPP CTA
   ============================================================ */
.lr-wa {
  position: fixed; right: clamp(.9rem, 2.5vw, 1.4rem); bottom: clamp(.9rem, 2.5vw, 1.4rem);
  z-index: 1200;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem .85rem .6rem .62rem;
  border-radius: 999px; background: var(--lr-wa); color: #fff;
  font-weight: 700; font-size: .84rem; text-decoration: none;
  box-shadow: 0 10px 26px -10px rgba(37, 211, 102, .7);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lr-wa:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .8); }
.lr-wa svg { width: 24px; height: 24px; flex: 0 0 auto; fill: currentColor; }
.lr-wa-label { max-width: 190px; }
.lr-wa-close {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: 50%; border: 0; background: var(--ink); color: #fff;
  font-size: .7rem; line-height: 1; cursor: pointer;
  display: none;
}
.lr-wa:hover .lr-wa-close { display: block; }

/* Never sit on top of a checkout button: the sticky buy bar and the tab bar
   both raise the CTA out of the way. */
body.lr-has-stickybuy .lr-wa { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
body.lr-cart-open .lr-wa { opacity: 0; pointer-events: none; }

@media (max-width: 640px) {
  .lr-wa-label { display: none; }
  .lr-wa { padding: .7rem; }
}

/* ============================================================
   8. DELIVERY ESTIMATE + ORDER TIMELINE
   ============================================================ */
.lr-eta { margin-top: .6rem; padding: .75rem .85rem; border-radius: var(--radius); background: var(--cream-soft); border: 1px solid var(--line); }
.lr-eta.is-ok { background: #f2f8f2; border-color: rgba(79, 138, 79, .3); }
.lr-eta.is-no { background: #fdf2f0; border-color: rgba(192, 73, 42, .3); }
.lr-eta-line { display: flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 700; }
.lr-eta-date { font-size: .82rem; margin-top: .25rem; }
.lr-eta-date strong { color: var(--ink); }
.lr-eta-note { font-size: .72rem; color: var(--muted); margin: .3rem 0 0; }
.lr-eta-cod { display: inline-block; margin-top: .4rem; font-size: .7rem; font-weight: 700; padding: .12rem .45rem; border-radius: 4px; background: rgba(79, 138, 79, .14); color: #3d6b3d; }
.lr-eta-cod.is-no { background: rgba(44, 38, 32, .08); color: var(--muted); }

/* ============================================================
   DELIVERY CARD  (journey + PIN check + assurances)
   One card, three bands separated by dashed rules. Previously these
   were three separately bordered boxes stacked on each other, which
   read as three unfinished drafts rather than one answer to "when
   does it arrive and can I trust you".
   ============================================================ */
.pdx-deliver {
  margin: 1.1rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 90% at 0% 0%, #fffdf7 0%, rgba(255, 253, 247, 0) 62%),
    var(--cream-soft);
  overflow: hidden;
}

/* ---- band 1: the journey ---- */
.lr-journey { position: relative; margin: 0; padding: .85rem 1rem .45rem; border: 0; background: none; }

.lr-journey-head { display: flex; align-items: center; gap: .45rem; margin: 0 0 .95rem; }
.lr-journey-leaf { flex: 0 0 auto; width: 16px; height: 16px; color: var(--sage-deep); }
.lr-journey-leaf svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.lr-journey-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: .88rem; letter-spacing: .01em; color: var(--brown-deep);
}
.lr-journey-eta {
  margin-left: auto; white-space: nowrap;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--brown); background: rgba(244, 201, 79, .22);
  border: 1px solid rgba(201, 163, 90, .4); border-radius: 999px; padding: .24rem .6rem;
}
.lr-journey-eta b { color: var(--brown-deep); font-weight: 800; text-transform: none; letter-spacing: 0; }

/* ---- the string ---- */
.lr-journey-track {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  list-style: none; margin: 0; padding: 0;
}

/* Bead centres sit at 1/6, 1/2 and 5/6 of the track. Both threads are drawn
   behind the beads (z-index 0 vs 1) so they appear to pass through them. */
.lr-journey-track::before,
.lr-journey-track::after {
  content: ""; position: absolute; top: 18px; height: 3px; z-index: 0; border-radius: 3px;
}
/* committed: order → dispatch */
.lr-journey-track::before {
  left: 16.667%; right: 50%;
  background: linear-gradient(90deg, var(--sage-deep), rgba(140, 109, 77, .55));
}
/* estimated: dispatch → your door */
.lr-journey-track::after {
  left: 50%; right: 16.667%;
  background-image: linear-gradient(90deg, var(--brown) 0 6px, transparent 6px 13px);
  background-size: 13px 3px; background-repeat: repeat-x;
  opacity: .75;
}

.lr-journey-stop {
  position: relative; z-index: 1; text-align: center; min-width: 0;
  padding: 0 .35rem;
}

.lr-journey-bead {
  position: relative;
  width: 40px; height: 40px; margin: 0 auto .5rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  border: 2px solid rgba(92, 70, 50, .22);
  color: var(--brown);
  box-shadow: 0 2px 0 rgba(44, 38, 32, .06), 0 6px 14px -10px rgba(44, 38, 32, .6);
}
.lr-journey-bead svg { width: 18px; height: 18px; display: block; }
/* the hole a lacing bead is threaded through */
.lr-journey-bead::after {
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%; border: 1px dashed rgba(44, 38, 32, .13);
}

.lr-journey-stop.is-start .lr-journey-bead {
  background: var(--sage-deep); border-color: var(--sage-deep); color: #fff;
}
.lr-journey-stop.is-start .lr-journey-bead::after { border-color: rgba(255, 255, 255, .34); }
.lr-journey-stop.is-mid .lr-journey-bead { border-color: var(--brown); color: var(--brown-deep); }
.lr-journey-stop.is-end .lr-journey-bead {
  background: var(--mustard); border-color: var(--primary-dark); color: var(--primary-ink);
  box-shadow: 0 2px 0 rgba(44, 38, 32, .09), 0 0 0 5px rgba(244, 201, 79, .2);
}
.lr-journey-stop.is-end .lr-journey-bead::after { border-color: rgba(42, 32, 16, .2); }

.lr-journey-label {
  display: block; font-family: var(--font-display);
  font-weight: 700; font-size: .8rem; color: var(--brown-deep); line-height: 1.25;
}
.lr-journey-date {
  display: block; font-size: .73rem; color: var(--muted);
  margin-top: .12rem; white-space: nowrap;
}
.lr-journey-stop.is-end .lr-journey-date { color: var(--brown-deep); font-weight: 700; }

/* A bead travelling the dashed stretch — the parcel on its way. */
.lr-journey-spark {
  position: absolute; top: 15px; left: 50%; z-index: 2;
  width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--peach);
  box-shadow: 0 0 0 3px rgba(239, 159, 120, .22);
  animation: lr-journey-slide 3.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes lr-journey-slide {
  0%, 8%    { left: 50%; opacity: 0; }
  18%       { opacity: 1; }
  78%       { opacity: 1; }
  92%, 100% { left: 83.333%; opacity: 0; }
}

.lr-journey-note {
  margin: .85rem 0 0; padding-top: .65rem;
  border-top: 1px dashed rgba(92, 70, 50, .2);
  font-size: .71rem; line-height: 1.5; color: var(--muted); text-align: center;
}

/* The estimate can be refined by a PIN check — flash the change so the
   shopper sees their own input take effect. */
.lr-journey-date.is-updated { animation: lr-journey-pop .55s ease; }
@keyframes lr-journey-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.13); color: var(--sage-deep); }
  100% { transform: scale(1); }
}

/* ---- band 2: the PIN check ---- */
.pdx-deliver .pin-check {
  margin: 0; padding: .8rem 1rem .9rem;
  border: 0; border-top: 1px dashed rgba(92, 70, 50, .2);
  border-radius: 0; background: rgba(255, 255, 255, .5);
}
.pin-label {
  display: flex; align-items: center; gap: .45rem;
  font-weight: 700; color: var(--brown-deep); margin-bottom: .5rem; font-size: .82rem;
}
.pin-ico { flex: 0 0 auto; width: 17px; height: 17px; color: var(--sage-deep); }
.pin-ico svg { display: block; width: 100%; height: 100%; }
.pin-row { display: flex; gap: .5rem; }
.pin-row input {
  flex: 1; min-width: 0; padding: .58rem .85rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font-family: var(--font-body); font-size: .85rem; letter-spacing: .06em;
}
.pin-row input::placeholder { letter-spacing: .02em; color: #a89c8f; }
.pin-row input:focus { outline: none; border-color: var(--mustard); box-shadow: 0 0 0 3px rgba(244, 201, 79, .22); }
.pin-row button {
  flex: 0 0 auto; padding: .58rem 1.15rem; border: 0; border-radius: 10px;
  background: var(--brown-deep); color: #fff; font-family: var(--font-body);
  font-weight: 700; font-size: .83rem; cursor: pointer;
  transition: background .15s ease;
}
.pin-row button:hover { background: var(--olive); }
.pin-row button:disabled { opacity: .6; cursor: default; }

/* ---- band 3: the assurances ---- */
.pdx-assure {
  list-style: none; margin: 0; padding: .75rem 1rem .85rem;
  border-top: 1px dashed rgba(92, 70, 50, .2);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem .85rem;
}
.pdx-assure li { display: flex; align-items: flex-start; gap: .55rem; min-width: 0; }
.pa-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); color: var(--sage-deep);
}
.pa-ico svg { width: 14px; height: 14px; display: block; }
.pa-txt { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pa-txt b { font-size: .78rem; font-weight: 700; color: var(--brown-deep); line-height: 1.2; }
.pa-txt i { font-style: normal; font-size: .7rem; color: var(--muted); line-height: 1.35; }

@media (max-width: 620px) {
  .lr-journey-head { flex-wrap: wrap; }
  .lr-journey-eta { margin-left: 0; width: 100%; text-align: center; }
  .lr-journey-bead { width: 42px; height: 42px; }
  .lr-journey-bead svg { width: 18px; height: 18px; }
  .lr-journey-track::before, .lr-journey-track::after { top: 19px; }
  .lr-journey-spark { top: 16px; }
  .lr-journey-label { font-size: .8rem; }
  .lr-journey-date { font-size: .72rem; white-space: normal; }
  .pdx-assure { grid-template-columns: 1fr; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lr-journey-spark { animation: none; opacity: 0; }
}

/* --- stage timeline (order tracking) --- */
.lr-track { display: flex; gap: 0; margin: 1rem 0; overflow-x: auto; padding-bottom: .25rem; }
.lr-track-stage { flex: 1 1 0; min-width: 92px; text-align: center; position: relative; padding-top: 26px; }
.lr-track-stage::before {
  content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px;
  background: var(--line);
}
.lr-track-stage:first-child::before { left: 50%; }
.lr-track-stage:last-child::before { right: 50%; }
.lr-track-stage.done::before { background: var(--lr-ok); }
.lr-track-dot {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line); z-index: 1;
}
.lr-track-stage.done .lr-track-dot { background: var(--lr-ok); border-color: var(--lr-ok); }
.lr-track-stage.current .lr-track-dot { box-shadow: 0 0 0 5px rgba(79, 138, 79, .18); }
.lr-track-ico { display: block; font-size: 1.05rem; line-height: 1; margin-bottom: .2rem; }
.lr-track-label { display: block; font-size: .74rem; font-weight: 700; line-height: 1.25; }
.lr-track-stage:not(.done) .lr-track-label { color: var(--muted); }
.lr-track-date { display: block; font-size: .68rem; color: var(--muted); margin-top: .1rem; }
.lr-track-aborted { padding: .7rem .9rem; border-radius: var(--radius); background: #fdf2f0; color: #8a3a22; font-size: .85rem; font-weight: 700; }

.lr-track-log { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.lr-track-log li { padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .84rem; display: flex; gap: .75rem; justify-content: space-between; }
.lr-track-log .lr-tl-when { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.lr-track-log .lr-tl-where { display: block; color: var(--muted); font-size: .74rem; }

/* ============================================================
   9. PRODUCT DETAIL ADDITIONS
   ============================================================ */
.lr-skills { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; }
.lr-skill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: .76rem; font-weight: 700; color: var(--ink); text-decoration: none;
}
.lr-skill:hover { border-color: var(--sage-deep); color: var(--sage-deep); }
.lr-agechips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.lr-agechip { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--ink); text-decoration: none; background: var(--chip-tint, var(--cream-soft)); border: 1px solid var(--line); }

.lr-block { margin: 1.6rem 0; }
.lr-block h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 .6rem; }
.lr-block-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.lr-block-list li { position: relative; padding-left: 1.4rem; font-size: .9rem; line-height: 1.6; color: var(--ink); }
.lr-block-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--lr-ok); font-weight: 800; }
.lr-block-text { font-size: .92rem; line-height: 1.7; color: var(--ink); }

.lr-video { margin: 1.6rem 0; }
.lr-video-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 16/9; }
.lr-video-frame iframe, .lr-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lr-video-caption { margin: .5rem 0 0; font-size: .8rem; color: var(--muted); }

/* sticky mobile buy bar */
.lr-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1150;
  display: none; gap: .6rem; align-items: center;
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -10px 26px -20px rgba(28, 25, 23, .55);
}
.lr-buybar.is-on { display: flex; }
.lr-buybar-thumb {
  width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain;
  background: var(--cream-soft); border: 1px solid var(--line); border-radius: 9px;
}
/* The bar names the toy it is about — by the time it appears, the title has
   long scrolled away. */
.lr-buybar-meta { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.lr-buybar-name {
  font-size: .8rem; font-weight: 700; color: var(--ink); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lr-buybar-price { min-width: 0; display: flex; align-items: baseline; gap: .4rem; }
.lr-buybar-price .now { font-weight: 800; font-size: .95rem; }
.lr-buybar-price .was { font-size: .72rem; color: var(--muted); text-decoration: line-through; }
.lr-buybar-add { margin-left: auto; flex: 1 1 auto; max-width: 230px; border: 0; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-weight: 800; padding: .75rem 1rem; cursor: pointer; }
.lr-buybar-add:hover { background: var(--primary-dark); }

/* ============================================================
   10. REVIEWS WITH PHOTO / VIDEO
   ============================================================ */
.lr-rv-media { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.lr-rv-thumb { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #fff; padding: 0; cursor: pointer; position: relative; }
.lr-rv-thumb img, .lr-rv-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lr-rv-thumb.is-video::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .38); color: #fff; font-size: .95rem; }
.lr-verified { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #3d6b3d; background: rgba(79, 138, 79, .13); padding: .12rem .42rem; border-radius: 4px; }
.lr-rv-helpful { margin-top: .6rem; display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--muted); }
.lr-rv-helpful button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .22rem .65rem; font-size: .74rem; font-weight: 700; cursor: pointer; color: var(--ink); }
.lr-rv-helpful button:hover { border-color: var(--sage-deep); color: var(--sage-deep); }
.lr-rv-helpful button.voted { background: var(--cream-soft); pointer-events: none; opacity: .75; }
.lr-rv-featured { border-left: 3px solid var(--primary); padding-left: .85rem; }
.lr-rv-more { display: block; margin: 1rem auto 0; border: 1px solid var(--ink); background: #fff; border-radius: 999px; padding: .5rem 1.2rem; font-weight: 700; font-size: .82rem; cursor: pointer; }
.lr-rv-upload { margin-top: .6rem; }
.lr-rv-upload label { font-size: .8rem; font-weight: 600; display: block; margin-bottom: .25rem; }
.lr-rv-upload input[type=file] { font-size: .8rem; }
.lr-rv-hint { font-size: .72rem; color: var(--muted); margin: .25rem 0 0; }

/* ============================================================
   11. PREDICTIVE SEARCH
   ============================================================ */
.header-search { position: relative; }
.lr-sugg {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1250;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); overflow: hidden; display: none;
  max-height: min(70vh, 460px); overflow-y: auto;
}
.lr-sugg.is-open { display: block; }
.lr-sugg-group { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.lr-sugg-group:last-child { border-bottom: 0; }
.lr-sugg-title { padding: .3rem .8rem; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lr-sugg-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem; text-decoration: none; color: var(--ink); font-size: .85rem; }
.lr-sugg-item:hover, .lr-sugg-item.is-active { background: var(--cream-soft); }
.lr-sugg-item img { width: 38px; height: 38px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; flex: 0 0 auto; }
.lr-sugg-name { min-width: 0; flex: 1 1 auto; }
.lr-sugg-name b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-sugg-name small { color: var(--muted); font-size: .72rem; }
.lr-sugg-price { font-weight: 700; font-size: .82rem; white-space: nowrap; }
.lr-sugg-empty { padding: .9rem .8rem; font-size: .84rem; color: var(--muted); }

/* ============================================================
   12. PRODUCT FILTERS
   ============================================================ */
/* The listing is a rail plus results. The rail sticks on desktop and turns
   into a left drawer under 1000px — one block of markup, two behaviours. */
.shop-layout {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  align-items: start;
}

.shop-rail {
  position: sticky; top: calc(var(--lr-header-h, 96px) + 1rem); align-self: start; z-index: 2;
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--lr-header-h, 96px) - 2rem);
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--cream-soft);
  overflow: hidden;
}
.rail-head {
  display: flex; align-items: center; gap: .6rem; flex: 0 0 auto;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line);
}
.rail-head h2 {
  margin: 0; flex: 1 1 auto; display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--brown-deep);
}
.rail-n {
  display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 .32rem;
  border-radius: 999px; background: var(--sage-deep); color: #fff;
  font-family: var(--font-body); font-size: .66rem; font-weight: 700; line-height: 1;
}
.rail-clear { font-size: .76rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.rail-clear:hover { color: #a2481a; }
.rail-x { display: none; }
.rail-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 1rem .4rem; }
.rail-foot { display: none; }

/* One collapsible group per facet. */
.fgroup { border-top: 1px solid var(--line); }
.fgroup:first-of-type { border-top: 0; }
.fgroup > summary {
  display: flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none;
  padding: .85rem 0 .5rem;
  font-size: .71rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::after {
  content: ""; margin-left: auto; width: 6px; height: 6px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.fgroup[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.fgroup > summary:hover { color: var(--brown-deep); }
.fg-n {
  display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 .28rem;
  border-radius: 999px; background: var(--sage-deep); color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: 0; line-height: 1;
}

.fopts { display: flex; flex-direction: column; padding-bottom: .7rem; }
.fopt {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .5rem; margin: 0 -.5rem; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: .86rem; line-height: 1.3;
  transition: background .15s ease, color .15s ease;
}
.fopt:hover { background: rgba(138, 154, 117, .14); }
.fopt.is-on { color: var(--brown-deep); font-weight: 600; }
.fbox {
  position: relative; flex: 0 0 auto; width: 16px; height: 16px;
  border: 1.5px solid rgba(92, 70, 50, .3); border-radius: 5px; background: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.fopt.is-radio .fbox { border-radius: 50%; }
.fopt:hover .fbox { border-color: var(--sage-deep); }
.fopt.is-on .fbox { background: var(--sage-deep); border-color: var(--sage-deep); }
.fopt.is-on .fbox::after {
  content: ""; position: absolute; left: 4.5px; top: 1.3px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.7px 1.7px 0; transform: rotate(42deg);
}
.fopt.is-radio.is-on .fbox::after {
  left: 3.7px; top: 3.7px; width: 5px; height: 5px;
  border: 0; border-radius: 50%; background: #fff; transform: none;
}
.fico { flex: 0 0 auto; font-size: .92rem; line-height: 1; }
.ftxt { flex: 1 1 auto; min-width: 0; }
.fn { flex: 0 0 auto; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Results column: a quiet bar carrying the count, the sort and (on phones)
   the button that opens the rail. */
.shop-main { min-width: 0; }
.shop-main .shop-toolbar {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: .5rem .85rem; margin-bottom: 1.1rem;
}
.tb-count { font-size: .82rem; color: var(--muted); }
.tb-filters { display: none; }

.lr-active-filters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.lr-active-filters .lbl { font-size: .74rem; color: var(--muted); font-weight: 700; }
.lr-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; background: var(--cream-soft); border: 1px solid var(--line); font-size: .76rem; text-decoration: none; color: var(--ink); }
.lr-pill .x { color: var(--muted); font-weight: 800; }
.lr-pill:hover .x { color: var(--lr-warn); }
.lr-pill.is-clear { background: none; border-color: transparent; font-weight: 700; color: #a2481a; text-decoration: underline; text-underline-offset: 2px; }

/* Legacy chip row — login.php still uses .lr-fchip for its tab strip. */
.lr-fchip {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .3rem .65rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: .78rem; color: var(--ink); text-decoration: none; font-weight: 600;
}
.lr-fchip:hover { border-color: var(--sage-deep); }
.lr-fchip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.lr-fchip .n { font-size: .68rem; opacity: .65; }

/* Off-canvas below the two-column breakpoint. */
.rail-scrim { display: none; }

@media (max-width: 1000px) {
  .shop-layout { grid-template-columns: 1fr; }

  .tb-filters {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .85rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--cream-soft);
    font-family: var(--font-body); font-size: .84rem; font-weight: 600; color: var(--ink);
    cursor: pointer;
  }
  .tb-filters:hover { border-color: var(--sage-deep); }
  .tb-filters .n {
    display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 .28rem;
    border-radius: 999px; background: var(--sage-deep); color: #fff; font-size: .64rem; line-height: 1;
  }

  /* main.shop keeps an identity transform from its rise-in animation, and a
     transformed ancestor becomes the containing block for position:fixed —
     which would peg the drawer to the page instead of the viewport. Drop it
     for as long as the drawer is open; at that point it is a no-op anyway. */
  body.lr-rail-open main.shop { animation: none; transform: none; }

  .shop-rail {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1350;
    /* align-self from the desktop rule would still self-align this box inside
       its grid area and leave it content-tall instead of viewport-tall. */
    align-self: auto;
    width: min(330px, 88vw); max-height: none;
    border: 0; border-radius: 0; box-shadow: 12px 0 40px -18px rgba(28, 25, 23, .45);
    transform: translateX(-102%);
    /* visibility, not just transform — a drawer parked off-screen must stay
       out of the tab order until it is opened. */
    visibility: hidden;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility .28s ease;
    will-change: transform;
  }
  body.lr-rail-open .shop-rail { transform: translateX(0); visibility: visible; }

  .rail-x {
    display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
    border: 1px solid var(--line); border-radius: 50%; background: #fff;
    color: var(--muted); font-size: .82rem; cursor: pointer;
  }
  .rail-foot { display: block; flex: 0 0 auto; padding: .8rem 1rem; border-top: 1px solid var(--line); }
  .rail-foot .btn-primary { width: 100%; }

  .rail-scrim {
    display: block; position: fixed; inset: 0; z-index: 1340;
    background: rgba(28, 25, 23, .48);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
  }
  body.lr-rail-open .rail-scrim { opacity: 1; visibility: visible; }
  body.lr-rail-open { overflow: hidden; }
}

/* On a phone the bar has to hold Filters, the count and Sort on one line. */
@media (max-width: 560px) {
  .shop-main .shop-toolbar { padding: .45rem .6rem; gap: .5rem; }
  .shop-main .tb-group { gap: .5rem; }
  .tb-sortlbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tb-group select { padding: .35rem .5rem; font-size: .8rem; }
  .tb-filters { padding: .4rem .7rem; }
  .tb-count { font-size: .78rem; }
}

/* ============================================================
   13. CHECKOUT STEPS
   ============================================================ */
.lr-steps { display: flex; gap: .3rem; margin: 0 0 1.4rem; list-style: none; padding: 0; flex-wrap: wrap; }
.lr-step { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--muted); font-weight: 700; }
.lr-step + .lr-step::before { content: "›"; margin-right: .3rem; color: var(--line); }
.lr-step .n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); font-size: .68rem; }
.lr-step.done { color: var(--lr-ok); }
.lr-step.done .n { background: var(--lr-ok); border-color: var(--lr-ok); color: #fff; }
.lr-step.current { color: var(--ink); }
.lr-step.current .n { border-color: var(--ink); background: var(--ink); color: #fff; }

.lr-addr-list { display: grid; gap: .6rem; margin-bottom: 1rem; }
.lr-addr {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem .9rem; border: 1.5px solid var(--line); border-radius: var(--radius);
  cursor: pointer; background: #fff;
}
.lr-addr:hover { border-color: var(--sage-deep); }
.lr-addr input { margin-top: .2rem; }
.lr-addr.is-sel { border-color: var(--ink); background: var(--cream-soft); }
.lr-addr-name { font-weight: 700; font-size: .88rem; }
.lr-addr-text { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.lr-addr-tag { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-deep); }

.lr-trust { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.lr-trust-item { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--muted); font-weight: 600; }
.lr-trust-item i { font-style: normal; font-size: 1rem; }

/* ============================================================
   14. SKELETON LOADERS + EMPTY STATES
   ============================================================ */
.lr-skel { position: relative; overflow: hidden; background: #efe9e0; border-radius: 6px; }
.lr-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: lr-shimmer 1.25s infinite;
}
@keyframes lr-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.lr-skel-card { display: grid; gap: .5rem; }
.lr-skel-media { aspect-ratio: 1; border-radius: 8px; }
.lr-skel-line { height: 11px; }
.lr-skel-line.short { width: 55%; }
.lr-skel-line.mid { width: 78%; }
.lr-skel-row { display: grid; grid-template-columns: 74px 1fr; gap: .8rem; padding: .95rem 1.15rem; }
.lr-skel-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.lr-empty { text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 1rem; }
.lr-empty-ico { font-size: 2.2rem; }
.lr-empty h3 { font-family: var(--font-display); margin: .6rem 0 .35rem; }
.lr-empty p { color: var(--muted); font-size: .89rem; margin: 0 auto 1.1rem; max-width: 42ch; }

@media (prefers-reduced-motion: reduce) {
  .lr-skel::after { animation: none; }
  .lr-cart-drawer, .cd-backdrop, .cd-bar-fill { transition: none; }
  .lr-tile:hover { transform: none; }
}

/* ============================================================
   15. MOBILE-FIRST REFINEMENTS
   ============================================================ */
@media (max-width: 760px) {
  .lr-cart-drawer { width: 100vw; }
  .cd-item { grid-template-columns: 64px 1fr auto; gap: .65rem; padding: .8rem .9rem; }
  .cd-item-img { width: 64px; height: 64px; }
  .cd-head, .cd-progress, .cd-section, .cd-foot { padding-left: .9rem; padding-right: .9rem; }
  .cd-rec { flex: 0 0 122px; }

  /* thumb-friendly targets everywhere the shopper taps a lot */
  .cd-qty button { width: 32px; height: 32px; }
  .cd-remove { padding: 6px 8px; }
  .lr-fchip { padding: .42rem .8rem; font-size: .82rem; }

  .lr-tiles { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .lr-track-stage { min-width: 78px; }
  .lr-sugg { max-height: 60vh; }
}

/* Nothing on the page may scroll sideways (brief §31). */
html, body { overflow-x: hidden; }
.lr-banner-copy, .lr-block, .lr-faq { max-width: 100%; }

/* ============================================================
   16. WISHLIST POPUP
   Centred dialog rather than a side drawer — the cart already owns
   the right edge, and two panels sliding from the same side reads
   as one broken panel. z-index sits just under the cart drawer.
   ============================================================ */
.wp-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(28, 25, 23, .48);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
body.lr-wish-open .wp-backdrop { opacity: 1; visibility: visible; }

.wp-modal {
  position: fixed; z-index: 1250;
  top: 50%; left: 50%;
  width: min(520px, calc(100vw - 2rem));
  max-height: min(76vh, 680px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(28, 25, 23, .7);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -46%) scale(.97);
  transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1), visibility .22s ease;
  overflow: hidden;
}
body.lr-wish-open .wp-modal {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.wp-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: .75rem;
  padding: .95rem 1.15rem; border-bottom: 1px solid var(--line);
}
.wp-head h2 {
  margin: 0; flex: 1 1 auto;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--brown-deep);
}
.wp-count { color: var(--muted); font-weight: 400; font-size: .9rem; }
.wp-close {
  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--cream-soft);
  color: var(--muted); font-size: .85rem; cursor: pointer;
}
.wp-close:hover { background: #fff; color: var(--ink); }

.wp-body-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.wp-list {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  list-style: none; margin: 0; padding: .5rem .75rem;
}
.wp-item {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center;
  gap: .8rem; padding: .6rem .4rem; border-radius: 12px;
}
.wp-item + .wp-item { border-top: 1px solid var(--line); border-radius: 0; }
.wp-item:hover { background: var(--cream-soft); }

.wp-thumb {
  position: relative; width: 64px; height: 64px; flex: 0 0 auto;
  display: block; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; overflow: hidden;
}
.wp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.wp-off {
  position: absolute; left: 0; bottom: 0;
  background: var(--sage-deep); color: #fff;
  font-size: .58rem; font-weight: 700; padding: .1rem .3rem; border-radius: 0 6px 0 0;
}

.wp-body { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.wp-name {
  font-size: .88rem; font-weight: 600; color: var(--ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wp-name:hover { color: var(--olive); }
.wp-price { display: flex; align-items: baseline; gap: .4rem; }
.wp-price .now { font-weight: 800; font-size: .9rem; color: var(--brown-deep); }
.wp-price .was { font-size: .74rem; color: var(--muted); text-decoration: line-through; }
.wp-add {
  align-self: flex-start; margin-top: .15rem;
  border: 1px solid var(--brown-deep); border-radius: 999px; background: none;
  color: var(--brown-deep); font-family: var(--font-body); font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  padding: .28rem .7rem; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wp-add:hover { background: var(--brown-deep); color: #fff; }
.wp-out { font-size: .74rem; font-weight: 700; color: #a2481a; }
.wp-remove {
  align-self: start; width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; background: none; color: var(--muted); font-size: .8rem; cursor: pointer; border-radius: 50%;
}
.wp-remove:hover { background: #fdecea; color: #a2481a; }

.wp-foot { flex: 0 0 auto; padding: .85rem 1.15rem; border-top: 1px solid var(--line); background: var(--cream-soft); }
.wp-more { display: block; width: 100%; text-align: center; }
.wp-note { margin: .55rem 0 0; text-align: center; font-size: .72rem; color: var(--muted); }

.wp-empty { padding: 2.25rem 1.25rem; text-align: center; }
.wp-empty-ico { font-size: 2.2rem; }
.wp-empty h3 { font-family: var(--font-display); color: var(--brown-deep); margin: .6rem 0 .35rem; }
.wp-empty p { color: var(--muted); font-size: .88rem; margin: 0 auto 1.1rem; max-width: 34ch; }

@media (max-width: 480px) {
  .wp-modal { width: calc(100vw - 1.25rem); max-height: 82vh; }
  .wp-item { grid-template-columns: 56px 1fr auto; gap: .65rem; }
  .wp-thumb { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-modal, .wp-backdrop { transition: none; }
}