/* ============================================================
   LittleRoots — "Beebox"-inspired theme (loaded LAST, overrides all).
   Clean white canvas · golden-yellow CTAs · chunky Caprasimo display.
   Re-maps the shared design tokens so existing components re-skin,
   then adds the new storefront components (marquee, hero slider,
   category circles, trust row, product carousels).
   ============================================================ */

:root {
  --cream: #ffffff;
  --cream-soft: #fbf7ef;
  --sage: #8faa73;
  --sage-deep: #5f7a45;
  --olive: #4f6a3a;
  --brown: #b98a5e;
  --brown-deep: #2c2620;      /* headings / dark ink */
  --peach: #ef9f78;
  --mustard: #f4c94f;
  --ink: #2c2620;
  --muted: #7a7168;
  --line: rgba(44, 38, 32, 0.12);
  --glass: #fbf7ef;
  --primary: #f4c94f;
  --primary-dark: #ecba2f;
  --primary-ink: #2a2010;
  --radius: 14px;
  --radius-lg: 22px;
  --font-display: "Quicksand", "Nunito Sans", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, sans-serif;
  --shadow-sm: 0 6px 18px -12px rgba(44, 38, 32, .5);
  --shadow-md: 0 18px 40px -22px rgba(44, 38, 32, .45);
}

body {
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
}
/* clean white canvas — retire the old atmospheric washes */
.atmosphere { display: none !important; }

h1, h2, h3, .headline, .hero-title { font-family: var(--font-display); letter-spacing: .2px; }

/* ---------- Announcement marquee ---------- */
.announce-bar { background: var(--brown-deep); color: #fff; overflow: hidden; white-space: nowrap; }
.announce-track { display: inline-flex; gap: 3.5rem; padding: 1.25rem 0; animation: announce-scroll 28s linear infinite; will-change: transform; }
.announce-track span { font-size: .95rem; letter-spacing: .02em; opacity: .95; }
.announce-track strong { color: var(--mustard); }
@keyframes announce-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Header ---------- */
.store-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 16px -14px rgba(44,38,32,.6);
  padding: .6rem clamp(1rem, 3vw, 2.25rem);
}
.site-logo img { filter: none; }
.site-logo span { font-family: var(--font-display); }
.name-little { color: var(--sage-deep); }
.name-roots { color: var(--brown); }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--brown-deep); cursor: pointer; }
.site-nav a { font-weight: 600; color: var(--ink); position: relative; }
.site-nav a.active, .site-nav a:hover { color: var(--olive); }
.site-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 3px; background: var(--mustard); }
.header-search input { background: var(--cream-soft); border-color: transparent; }
.header-search input:focus { background: #fff; }
.ha-icon { color: var(--brown-deep); }
.ha-badge { background: var(--sage-deep); }
.btn-login { background: var(--mustard); color: var(--primary-ink); font-weight: 700; }
.btn-login:hover { background: var(--primary-dark); color: var(--primary-ink); }
.ha-avatar { background: var(--sage-deep); }

/* ---------- Nav dropdown (Shop by Collection) ---------- */
.nav-drop { position: relative; display: inline-block; }
.nav-drop-trigger { display: inline-flex; align-items: center; gap: .3rem; }
.nd-caret { font-size: .7rem; transition: transform .2s ease; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: .5rem; opacity: 0; visibility: hidden; transition: all .2s ease; z-index: 200;
}
.nav-drop-menu::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop:hover .nd-caret { transform: rotate(180deg); }
.nav-drop-menu a { display: flex; align-items: center; justify-content: space-between; padding: .6rem .85rem; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none; }
.nav-drop-menu a:hover { background: var(--cream-soft); color: var(--olive); }
.nav-drop-menu a.ndm-all { color: var(--olive); border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; margin-bottom: .25rem; }
.ndm-count { background: var(--cream-soft); color: var(--muted); font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.nav-drop-menu a:hover .ndm-count { background: #fff; }

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--mustard); color: var(--primary-ink);
  font-weight: 700; border-radius: 11px;
  box-shadow: 0 12px 24px -14px rgba(236,186,47,.9);
}
.btn-primary:hover { background: var(--primary-dark); color: var(--primary-ink); }
.btn-ghost { background: #fff; border: 2px solid var(--brown-deep); color: var(--brown-deep); border-radius: 11px; font-weight: 700; }
.btn-ghost:hover { background: var(--brown-deep); color: #fff; }
.btn-cart {
  background: var(--brown-deep); color: #fff; border-radius: 10px; font-weight: 700;
  letter-spacing: .02em; text-transform: none;
}
.btn-cart:hover { background: var(--olive); color: #fff; }

/* ---------- Product cards ---------- */
.product-grid { gap: clamp(1rem, 2.2vw, 1.5rem); }
.product-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(244,201,79,.6); }
.product-card .product-media { background: var(--cream-soft); border-radius: 0; aspect-ratio: 1/1; display:block; overflow:hidden; }
.product-card .product-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.product-card:hover .product-media img { transform: scale(1.06); }
.product-body { padding: .9rem 1rem 1.1rem; }
a.product-name { font-family: var(--font-body); font-weight: 700; color: var(--brown-deep); font-size: .95rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
a.product-name:hover { color: var(--olive); }
.product-price .now { font-weight: 800; color: var(--brown-deep); font-size: 1.05rem; }
.product-price .was { color: var(--muted); }
.badge-off { background: var(--peach); color: #fff; font-weight: 700; border-radius: 999px; }
.badge-featured { background: var(--sage-deep); color: #fff; font-weight: 700; border-radius: 999px; }
.wl-heart { background: #fff; box-shadow: var(--shadow-sm); }
.wl-heart.active { color: #e0563a; }
.stars { color: var(--mustard); }
.stars .star.empty, .stars .star.half { color: rgba(244,201,79,.32); }
.stars .star.half::before { color: var(--mustard); }

/* ---------- Section heading (chunky) ---------- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; }
.section-head h2 { font-family: var(--font-display); color: var(--brown-deep); font-size: clamp(1.5rem, 4vw, 2.3rem); margin: 0; }
.section-head .see-all { color: var(--olive); font-weight: 700; text-decoration: none; white-space: nowrap; }
.section-head .see-all:hover { text-decoration: underline; }
.section-sub { color: var(--muted); text-align: center; margin: -0.5rem 0 1.5rem; }

/* ---------- Home wrapper full-bleed sections ---------- */
.home { width: 100%; max-width: none; margin: 0; padding: 0 0 4rem; }
.home > section { width: min(100% - 2.5rem, 1240px); margin-inline: auto; }
.home > section.full-bleed { width: 100%; }

/* ---------- Hero slider (full-bleed) ---------- */
.hero-slider { position: relative; overflow: hidden; }
.hero-slider.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; }
.hs-track { display: flex; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.hs-slide { min-width: 100%; position: relative; min-height: clamp(360px, 46vw, 560px); display: flex; align-items: center; overflow: hidden; }
.hs-slide.theme-a { background: radial-gradient(circle at 80% 20%, #fef3d0, #f6d98f); }
.hs-slide.theme-b { background: radial-gradient(circle at 80% 20%, #edf3e2, #c7dcae); }
.hs-slide.theme-c { background: radial-gradient(circle at 80% 20%, #fce6d8, #f3c6ab); }
.hs-slide::after { content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='3' cy='3' r='1.4' fill='%23ffffff' opacity='0.25'/%3E%3C/svg%3E"); pointer-events:none; }
.hs-inner { width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1rem,4vw,3rem); padding: clamp(2rem,5vw,3.5rem) 0; position: relative; z-index: 1; }
.hs-eyebrow { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--olive); font-size: .82rem; }
.hs-title { font-family: var(--font-display); color: var(--brown-deep); font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.05; margin: .6rem 0 .9rem; }
.hs-text { color: #5b5148; max-width: 44ch; margin: 0 0 1.75rem; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.55; }
.hs-art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 300px; }
.hs-blob { position: absolute; width: min(78%, 420px); aspect-ratio: 1/1; background: rgba(255,255,255,.55); border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; animation: blob-morph 12s ease-in-out infinite; }
.hs-art img { position: relative; width: min(70%, 360px); aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; box-shadow: 0 30px 50px -20px rgba(44,38,32,.4); border: 8px solid #fff; animation: float-soft 6s ease-in-out infinite; }
.hs-art-2 { position: absolute; bottom: 6%; right: 10%; width: 34% !important; aspect-ratio: 1/1; border: 6px solid #fff !important; animation: float-soft 5s ease-in-out infinite reverse !important; }
.hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--brown-deep); font-size: 1.6rem; cursor: pointer; box-shadow: var(--shadow-sm); z-index: 3; display: flex; align-items: center; justify-content: center; }
.hs-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.hs-arrow.prev { left: clamp(.75rem,3vw,2rem); } .hs-arrow.next { right: clamp(.75rem,3vw,2rem); }
.hs-dots { position: absolute; bottom: 1.25rem; left: 0; right: 0; display: flex; gap: .5rem; justify-content: center; z-index: 3; }
.hs-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(44,38,32,.28); cursor: pointer; padding: 0; }
.hs-dots button.active { background: var(--brown-deep); width: 26px; border-radius: 6px; }

/* A finished admin-uploaded banner: the artwork fills the slide edge to edge
   (no theme tint, no ::after dot texture, no separately-typed headline —
   the graphic already carries all of that). object-fit: contain means the
   image is never cropped, so on a wide full-bleed slide it commonly
   letterboxes instead of filling every edge — a plain white gutter there
   reads as broken, so default to the same warm cream every other image bed
   on the site uses. The admin "Background Colour" field on the banner
   (index.php prints it as an inline style when set) overrides this per
   banner and always wins, since an inline style beats any class rule here —
   set it to the artwork's own background for a seamless blend. */
.hs-slide.is-image { padding: 0; background: var(--cream-soft); }
.hs-slide.is-image::after { display: none; }
.hs-image-link { display: block; width: 100%; height: 100%; }
.hs-image-wrap { display: block; width: 100%; height: 100%; }
/* contain, not cover: this is a finished marketing graphic with text and
   logos drawn right up to the edges (banner_form.php's "image-only banner"
   path) — cover crops whichever edge doesn't match the slide's aspect
   ratio, and on a wide/flat strip banner that clips the headline and the
   trailing icons first. Letterboxing never loses artwork; cropping does.
   height: auto (not 100%) lets the box settle at the artwork's own aspect
   ratio instead of stretching to whatever the slide's min-height happens to
   be — deliberately uncapped, so full-bleed width always fills edge to edge
   with no side gutter; the trade-off (explicit choice, not an oversight) is
   that a wide-but-not-ultra-wide banner like this renders tall (~800px+) on
   a wide desktop screen, same as before either fix in this section existed. */
.hs-image { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; }
/* Below ~760px a wide banner is width-constrained under object-fit:contain,
   so it always renders edge-to-edge at full slide width — object-position
   only has room to act when a taller image_mobile crop is uploaded instead
   (banner_picture_html already prefers that file when present). */
@media (max-width: 760px) {
  .hs-slide.is-image { min-height: clamp(280px, 78vw, 420px); }
  .hs-image { object-position: left center; }
  /* The artwork is edge-to-edge (headline baked in on the left, icons on
     the right) and the arrow buttons sit vertically centred over that same
     band, so on a phone they land directly on top of the banner's own text
     and icons. Drop them here; the dots + autoplay + touch-swipe (js/store.js)
     remain as mobile navigation. */
  .hero-slider .hs-arrow { display: none; }
}

@keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes blob-morph { 0%,100% { border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; } 50% { border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; } }
@media (max-width: 820px){
  .hs-inner { grid-template-columns: 1fr; text-align: center; }
  .hs-text { margin-inline: auto; }
  .hs-art { order: -1; min-height: 220px; }
  .hs-art img { width: 220px; }
}

/* ---------- Category circles ---------- */
.cat-circles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(110px, 1fr); gap: clamp(.75rem, 2vw, 1.5rem); overflow-x: auto; padding: .5rem .25rem 1rem; scroll-snap-type: x mandatory; }
.cat-circle { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-decoration: none; scroll-snap-align: start; }
.cc-img { width: clamp(84px, 12vw, 120px); height: clamp(84px, 12vw, 120px); border-radius: 50%; background: var(--cream-soft); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; border: 2px solid transparent; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; overflow: hidden; }
.cc-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-circle:hover .cc-img { transform: translateY(-4px); border-color: var(--mustard); box-shadow: var(--shadow-sm); }
.cc-name { font-weight: 700; color: var(--brown-deep); font-size: .84rem; text-align: center; }

/* ---------- Trust row ---------- */
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; background: var(--cream-soft); border-radius: var(--radius-lg); padding: clamp(1.1rem, 3vw, 1.75rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.trust-item { display: flex; align-items: center; gap: .75rem; justify-content: center; }
.trust-item .ti-ico { font-size: 1.8rem; }
.trust-item h4 { margin: 0; font-family: var(--font-body); font-weight: 800; color: var(--brown-deep); font-size: .95rem; }
.trust-item p { margin: 0; color: var(--muted); font-size: .78rem; }

/* ---------- Product carousel ---------- */
.pc-section { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.pc-nav { display: flex; gap: .5rem; }
.pc-nav button { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--brown-deep); background: #fff; color: var(--brown-deep); font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; }
.pc-nav button:hover { background: var(--brown-deep); color: #fff; }
.pc-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 260px); justify-content: start; gap: clamp(1rem, 2vw, 1.4rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .75rem; scrollbar-width: none; }
@media (max-width: 560px){ .pc-track { grid-auto-columns: minmax(72vw, 78vw); } }
.pc-track::-webkit-scrollbar { display: none; }
.pc-track > .product-card { scroll-snap-align: start; }

/* ---------- Promo band ---------- */
.promo-band { background: linear-gradient(120deg, var(--mustard), #f7d977); border-radius: var(--radius-lg); padding: clamp(1.75rem, 5vw, 3rem); text-align: center; margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.promo-band h2 { font-family: var(--font-display); color: var(--primary-ink); font-size: clamp(1.6rem, 4.5vw, 2.6rem); margin: 0 0 .5rem; }
.promo-band p { color: #5a4a1e; margin: 0 0 1.5rem; }

/* ---------- Offers: a wallet of printed tickets ----------
   The whole band sits on a tinted, dashed "wallet" panel so the offers read
   as one designed object rather than three cards floating on the page. Each
   ticket is real printed stock: paper texture, a stub embossed with a burst,
   a punched perforation (masks on BOTH halves, so the hole shows the panel
   through it), and a shine that sweeps on hover. */
.coupon-band {
  position: relative;
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border-radius: calc(var(--radius-lg) + 8px);
  background:
    radial-gradient(90% 70% at 92% 0%, rgba(230, 200, 132, .22) 0%, rgba(230, 200, 132, 0) 60%),
    radial-gradient(80% 70% at 0% 100%, rgba(168, 190, 145, .2) 0%, rgba(168, 190, 145, 0) 58%),
    linear-gradient(160deg, #fffdf8 0%, #f6f1e5 100%);
  border: 1px solid rgba(143, 170, 115, .3);
  overflow: hidden;
}
/* a dashed inner keyline, inset from the border — the "wallet" stitching */
.coupon-band::before {
  content: "";
  position: absolute; inset: 9px;
  border: 1px dashed rgba(140, 109, 77, .22);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.cb-head {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.cb-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0 0 .3rem; font-size: .7rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; color: var(--olive);
}
.cb-head h2 {
  margin: 0; font-family: var(--font-display); color: var(--brown-deep);
  font-size: clamp(1.55rem, 3.2vw, 2.2rem); line-height: 1.06;
}
.cb-note {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  color: var(--brown); background: rgba(255, 255, 255, .8);
  border: 1px dashed rgba(140, 109, 77, .4);
  border-radius: 999px; padding: .35rem .8rem; white-space: nowrap;
}

.coupon-tickets {
  position: relative; z-index: 1;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.coupon-tickets.is-single { grid-template-columns: 1fr; }

.coupon-ticket {
  --ct-a: #e6c884;          /* stub gradient, light */
  --ct-b: var(--mustard);   /* stub gradient, deep  */
  --ct-ink: var(--primary-ink);
  --ct-stub-w: 8.2rem;      /* where the perforation falls */
  --ct-notch: #faf6ec;      /* the wallet panel, showing through the punch */
  position: relative;
  display: flex; align-items: stretch; isolation: isolate;
  border-radius: 16px;
  /* laid paper: two hairline gradients over warm white */
  background:
    repeating-linear-gradient(90deg, rgba(140, 109, 77, .028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(140, 109, 77, .022) 0 1px, transparent 1px 5px),
    linear-gradient(178deg, #ffffff 0%, #fffdf7 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 2px 4px -2px rgba(44, 38, 32, .18),
    0 18px 34px -22px rgba(44, 38, 32, .55);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease;
}
.coupon-ticket:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 3px 6px -2px rgba(44, 38, 32, .2),
    0 30px 46px -26px rgba(44, 38, 32, .6);
}
/* The punched notches, painted OVER the ticket in the panel's colour rather
   than masked out of it. A CSS mask replaces border-radius clipping, so the
   earlier masked version lost the ticket's rounded outer corners — square
   yellow corners poking out of a rounded card. */
.coupon-ticket::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(circle 11px at var(--ct-stub-w) 0, var(--ct-notch) 97%, transparent 100%),
    radial-gradient(circle 11px at var(--ct-stub-w) 100%, var(--ct-notch) 97%, transparent 100%);
}

/* a light sweep across the stock on hover — printed stock catching the light */
.coupon-ticket::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0;
  opacity: 0; transition: background-position .7s ease, opacity .3s ease;
}
.coupon-ticket:hover::after { opacity: 1; background-position: -30% 0; }

.coupon-ticket.is-ship { --ct-a: #b9d3a5; --ct-b: #8fae7a; }
.coupon-ticket.is-gift { --ct-a: #f3bda9; --ct-b: #e2917a; }

/* ---- the stub ---- */
.ct-stub {
  position: relative; flex: 0 0 var(--ct-stub-w);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  padding: 1.3rem .8rem; text-align: center;
  color: var(--ct-ink);
  border-radius: 16px 0 0 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(158deg, var(--ct-a), var(--ct-b));
}
/* an embossed sunburst behind the number, so the stub is not a flat swatch */
.ct-stub::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 46%,
              rgba(255, 255, 255, .16) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 14deg);
  -webkit-mask: radial-gradient(58% 58% at 50% 46%, #000 40%, transparent 72%);
  mask: radial-gradient(58% 58% at 50% 46%, #000 40%, transparent 72%);
}
.ct-stub > * { position: relative; z-index: 1; }
.ct-ico {
  font-size: 1.7rem; line-height: 1; margin-bottom: .15rem;
  filter: drop-shadow(0 2px 3px rgba(44, 38, 32, .22));
}
.ct-stub strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.98rem, 2.2vw, 1.14rem); line-height: 1.1; letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.ct-amount {
  font-size: clamp(1.5rem, 3.6vw, 2.05rem) !important;
  letter-spacing: -.01em !important; line-height: 1 !important;
}
.ct-stub-sub {
  font-size: .64rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; opacity: .72;
}
/* the perforation: dashes plus a small cut mark, like a real tear line */
/* right:0, not -1px — the stub clips its own overflow now, to keep the
   sunburst inside the rounded corners. */
.ct-stub::after {
  content: ""; position: absolute; top: 13px; bottom: 13px; right: 0; z-index: 2;
  border-right: 2px dashed rgba(90, 74, 30, .4);
}

/* ---- the body ---- */
.ct-body {
  position: relative; flex: 1 1 auto; min-width: 0;
  padding: 1.15rem 1.3rem; display: flex; flex-direction: column;
  border-radius: 0 16px 16px 0;
  overflow: hidden;
}
/* faint sprout watermark in the dead corner */
.ct-body::before {
  content: "🌿";
  position: absolute; right: .5rem; bottom: -.9rem;
  font-size: 3.4rem; line-height: 1; opacity: .06; pointer-events: none;
}
.ct-valid {
  align-self: flex-start; margin-bottom: .5rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--brown); background: rgba(140, 109, 77, .09);
  border-radius: 999px; padding: .22rem .6rem;
}
.ct-body h3 {
  font-family: var(--font-display); color: var(--brown-deep);
  font-size: clamp(1.1rem, 2.5vw, 1.38rem); line-height: 1.18; margin: 0 0 .35rem;
}
.ct-body p { color: #6b6055; font-size: .855rem; line-height: 1.55; margin: 0 0 1rem; max-width: 34ch; }
.ct-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }

.ct-code {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-family: var(--font-body); font-weight: 800; letter-spacing: .1em; font-size: .85rem;
  color: var(--brown-deep);
  background: linear-gradient(180deg, #fffdf7, #f4eee1);
  border: 2px dashed rgba(90, 74, 30, .45);
  border-radius: 10px; padding: .48rem .8rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 3px 8px -5px rgba(44, 38, 32, .5);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.ct-code svg { opacity: .55; }
.ct-code:hover {
  transform: translateY(-1px); border-color: var(--brown-deep);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 7px 14px -8px rgba(44, 38, 32, .6);
}
.ct-code:hover svg { opacity: 1; }
.ct-code.copied {
  border-style: solid; border-color: #2e7d32; color: #2e7d32;
  background: linear-gradient(180deg, #f6fbf6, #eaf4ea);
}
.ct-code.is-auto {
  cursor: default; border-style: solid; border-color: rgba(140, 109, 77, .28);
  background: rgba(140, 109, 77, .06); box-shadow: none;
  font-weight: 700; letter-spacing: .03em; font-size: .8rem; color: var(--brown);
}
.ct-code.is-auto::before {
  content: "✓"; font-weight: 900; color: var(--olive);
}
.ct-code.is-auto:hover { transform: none; border-color: rgba(140, 109, 77, .28); }

.ct-cta {
  font-weight: 800; font-size: .84rem; color: var(--olive);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid rgba(122, 138, 96, .35); padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.ct-cta:hover { color: var(--brown-deep); border-bottom-color: var(--brown-deep); }

@media (max-width: 460px) {
  .coupon-ticket { flex-direction: column; }
  /* Stacked, the perforation runs horizontally at a height that depends on the
     copy, so there is nothing fixed to punch against — the dashed rule carries
     it alone. */
  .coupon-ticket::before { display: none; }
  .ct-stub {
    flex: 0 0 auto; min-width: 0; flex-direction: row; gap: .65rem;
    padding: .8rem; border-radius: 16px 16px 0 0;
  }
  .ct-stub strong { font-size: 1.08rem; }
  .ct-amount { font-size: 1.45rem !important; }
  .ct-stub br { display: none; }
  .ct-stub::before { display: none; }
  .ct-stub::after { top: auto; right: 13px; left: 13px; bottom: -1px; border-right: 0; border-bottom: 2px dashed rgba(90, 74, 30, .4); }
  .ct-body { border-radius: 0 0 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .coupon-ticket, .coupon-ticket::after, .ct-code { transition: none; }
  .coupon-ticket:hover { transform: none; }
}

/* ---------- Home feature band (reused) ---------- */
.home-band { margin-top: clamp(2.25rem,5vw,3.5rem); }
.band-item { background: var(--cream-soft); border: 1px solid var(--line); }
.band-item h3 { font-family: var(--font-display); }

/* ---------- Footer ---------- */
.store-footer { background: var(--brown-deep); border: 0; margin-top: 4rem; }
.store-footer .foot-col h4 { color: #fff; }
.store-footer .foot-col a, .store-footer .foot-brand p { color: rgba(255,255,255,.72); }
.store-footer .foot-col a:hover { color: var(--mustard); }
/* footer wordmark colours now live with the brand lockup at the end of this
   file — a `.store-footer .site-logo span` rule here would out-specify them. */
.store-footer .foot-base { border-top-color: rgba(255,255,255,.14); color: rgba(255,255,255,.6); }
.store-footer .site-logo img { filter: brightness(0) invert(1); opacity: .95; }

/* ---------- Shop / page headline tune ---------- */
.page-intro .headline, .store-page .headline { color: var(--brown-deep); }
.chip.active { background: var(--brown-deep); border-color: var(--brown-deep); }
.chip { background: #fff; }

/* ---------- Auth / cards on white ---------- */
.auth-card, .co-card, .cart-summary, .checkout-summary, .review-form-wrap, .order-detail-card, .account-nav, .review-card, .order-item-card { background: #fff; box-shadow: var(--shadow-sm); }

/* ---------- Pincode / delivery checker (product page) ---------- */
/* .pin-check / .pin-label / .pin-row now live with the delivery card in
   css/upgrade.css §"DELIVERY CARD" — they are part of that composition. */
.pin-result { margin-top: .65rem; font-size: .88rem; min-height: 1.2em; }
.pin-result.ok { color: var(--olive); font-weight: 600; }
.pin-result.err { color: #c0492b; }
.pin-cod { display: inline-block; margin-left: .5rem; padding: .1rem .55rem; border-radius: 999px; background: var(--sage-deep); color: #fff; font-size: .72rem; font-weight: 700; }
.pin-cod-no { background: #b98a5e; }

/* ---------- Shipment tracking timeline ---------- */
.track-timeline { display: flex; flex-direction: column; gap: 0; margin-top: .5rem; }
.track-step { display: flex; gap: .85rem; align-items: flex-start; position: relative; padding-bottom: 1.1rem; }
.track-step:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -2px; width: 2px; background: var(--line); }
.track-step.done:not(:last-child)::before { background: var(--sage); }
.ts-dot { width: 14px; height: 14px; border-radius: 50%; background: #d9d2c7; flex: none; margin-top: 2px; box-shadow: 0 0 0 3px #fff; z-index: 1; }
.track-step.done .ts-dot { background: var(--sage-deep); }
.track-step strong { display: block; color: var(--brown-deep); font-size: .92rem; }
.track-step small { color: var(--muted); font-size: .8rem; }

/* ---------- Razorpay payment page ---------- */
.pay-wrap { display: flex; justify-content: center; padding: clamp(1.5rem, 5vw, 3rem) 0; }
.pay-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(1.75rem, 5vw, 2.75rem); max-width: 440px; width: 100%; text-align: center; }
.pay-emoji { font-size: 2.6rem; }
.pay-card h1 { font-family: var(--font-display); color: var(--brown-deep); font-size: 1.6rem; margin: .4rem 0 .3rem; }
.pay-order { color: var(--muted); margin: 0 0 1rem; }
.pay-amount { font-family: var(--font-display); font-size: 2.4rem; color: var(--brown-deep); margin-bottom: 1.25rem; }
.pay-note { color: var(--muted); font-size: .82rem; margin: 1rem 0; }

/* ---------- Brand story ---------- */
.story {
  position: relative;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(143, 170, 115, .28);
  border-radius: calc(var(--radius-lg) + 6px);
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(212, 226, 195, .38) 0%, rgba(212, 226, 195, 0) 55%),
    linear-gradient(150deg, #fffdf8 0%, #f7f3e8 100%);
  overflow: hidden;
}

/* --- collage --- */
.story-media { position: relative; padding: 0 0 clamp(1rem, 4vw, 2.5rem) 0; }
.story-frame { margin: 0; background: #fff; box-shadow: var(--shadow-md); overflow: hidden; }
.story-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A leaf-ish silhouette: two rounded corners, two soft ones. */
.story-frame-1 {
  border-radius: calc(var(--radius-lg) + 18px) 12px calc(var(--radius-lg) + 18px) 12px;
  aspect-ratio: 4 / 3.4;
}
.story-frame-2 {
  position: absolute; right: -.5rem; bottom: 0;
  width: 40%; aspect-ratio: 1 / 1;
  border: 7px solid #fff;
  border-radius: 20px;
  transform: rotate(-3deg);
}
.story-badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  background: #fff; color: var(--brown-deep);
  font-weight: 700; font-size: .8rem;
  padding: .45rem .8rem; border-radius: 999px; box-shadow: var(--shadow-sm);
}
/* A little wax-seal disc, rotated — the human touch the copy talks about. */
.story-seal {
  position: absolute; left: -.6rem; bottom: 12%; z-index: 3;
  display: grid; place-items: center;
  width: 82px; height: 82px; border-radius: 50%;
  background: var(--mustard); color: var(--primary-ink);
  box-shadow: 0 10px 22px -12px rgba(44, 38, 32, .8);
  transform: rotate(-9deg);
}
.story-seal b {
  font-family: var(--font-display); font-size: .78rem; line-height: 1.15;
  text-align: center; letter-spacing: .03em;
}
.story-leaf { position: absolute; font-size: 1.5rem; opacity: .5; pointer-events: none; }
.story-leaf-a { top: -.3rem; right: 18%; transform: rotate(18deg); }
.story-leaf-b { bottom: 34%; right: -.4rem; transform: rotate(-24deg); }

/* --- copy --- */
.story-copy h2 {
  font-family: var(--font-display); color: var(--brown-deep);
  font-size: clamp(1.5rem, 3.5vw, 2.4rem); line-height: 1.12; margin: .3rem 0 1rem;
}
.story-copy h2 em { font-style: normal; color: var(--olive); }
.story-copy p { color: #5b5148; line-height: 1.65; margin: 0 0 1rem; }
.story-lede { font-size: 1.02rem; }
.story-points { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: grid; gap: .7rem; }
.story-points li {
  display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: .1rem .7rem;
}
.story-points .sp-ico {
  grid-row: span 2; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); font-size: .95rem;
}
.story-points b { color: var(--brown-deep); font-weight: 700; font-size: .93rem; }
.story-points i { font-style: normal; color: var(--muted); font-size: .82rem; line-height: 1.45; }

/* ---------- Newsletter ---------- */
.newsletter { width: 100vw; margin-left: calc(50% - 50vw); margin-top: clamp(3rem, 7vw, 5rem); background: linear-gradient(120deg, var(--sage-deep), var(--olive)); color: #fff; }
.nl-inner { width: var(--wrap); margin-inline: auto; padding: clamp(2.5rem, 6vw, 4rem) 0; text-align: center; }
.nl-inner h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.6rem); margin: 0 0 .5rem; color: #fff; }
.nl-inner > p { opacity: .92; margin: 0 auto 1.5rem; max-width: 46ch; }
.nl-form { display: flex; gap: .6rem; max-width: 460px; margin: 0 auto; }
.nl-form input { flex: 1; padding: .9rem 1.1rem; border: 0; border-radius: 12px; font-family: var(--font-body); font-size: 1rem; }
.nl-form input:focus { outline: 3px solid rgba(255,255,255,.4); }
.nl-form button { padding: .9rem 1.6rem; border: 0; border-radius: 12px; background: var(--mustard); color: var(--primary-ink); font-weight: 800; font-family: var(--font-body); cursor: pointer; white-space: nowrap; }
.nl-form button:hover { background: var(--primary-dark); }
.nl-msg { min-height: 1.2em; margin: .75rem 0 0; font-weight: 600; }
.nl-msg.success { color: #eaffea; } .nl-msg.error { color: #ffe2d6; }
.nl-fine { opacity: .7; font-size: .78rem; margin-top: .5rem; }
@media (max-width: 900px){
  .story { grid-template-columns: 1fr; }
  .story-media { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px){
  .story-frame-2, .story-seal, .story-leaf { display: none; }
  .story-media { padding-bottom: 0; }
  .nl-form { flex-direction: column; }
}

/* ============================================================
   Full-desktop-width containers (use more of the screen)
   ============================================================ */
:root { --wrap: min(100% - clamp(1.75rem, 5vw, 5rem), 1600px); }
.home > section:not(.full-bleed),
.shop, .store-page { width: var(--wrap) !important; margin-inline: auto; }
/* product detail reads better at a comfortable width, not full-bleed */
.pdx { width: min(100% - 2rem, 1720px) !important; margin-inline: auto; }
.cart-layout, .checkout-layout, .account-layout { width: var(--wrap); margin-inline: auto; }
/* denser product grids on wide screens */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (min-width: 1400px){ .product-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }

/* ============================================================
   Product detail — redesigned
   ============================================================ */
.pdx { padding: clamp(1rem, 3vw, 2rem) 0 clamp(3rem, 7vw, 5rem); animation: rise-in .6s cubic-bezier(.22,1,.36,1) both; }
.breadcrumb { font-size: .82rem; color: var(--muted); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--olive); }
.breadcrumb span { margin: 0 .4rem; opacity: .5; }
.breadcrumb em { color: var(--brown-deep); font-style: normal; font-weight: 700; }

/* Both tracks use minmax(0, …) so a grid item can never be forced wider than
   its track by the intrinsic (natural) width of the product image inside it. */
/* Capped, not full-bleed: the page itself is wide (the tabs and the rails
   below want that room), but a buy panel that stretches to 980px turns Add to
   Cart into an 830px slab. The grid stays left-aligned with the tabs. */
.pdx-grid { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 560px); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; max-width: 1156px; }
.pdx-info { min-width: 0; }

/* gallery */
/* matches the gallery track cap above */
.pdx-gallery { position: sticky; top: 92px; display: flex; flex-direction: column; gap: .9rem; width: 100%; min-width: 0; max-width: 540px; }
.pdx-stage { position: relative; width: 100%; background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pdx-stage img { width: 100%; max-width: 100%; height: 100%; object-fit: contain; transition: transform .18s ease; transform-origin: center center; will-change: transform; }
.pdx-stage.pdx-zoomable { cursor: zoom-in; }
.pdx-zoom-hint { position: absolute; bottom: .7rem; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: .35rem; background: rgba(44,38,32,.72); color: #fff; font-size: .72rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.pdx-stage:hover .pdx-zoom-hint { opacity: 1; }
.pdx-badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; }
.pdx-heart { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.pdx-thumbs { display: flex; flex-direction: row; gap: .6rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.pdx-thumb { padding: 0; width: 80px; flex: 0 0 80px; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--cream-soft); cursor: pointer; aspect-ratio: 1/1; transition: border-color .15s ease, transform .15s ease; }
.pdx-thumb:hover { transform: translateY(-2px); }
.pdx-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pdx-thumb.active { border-color: var(--mustard); }

/* Lightbox (image popup) */
.lr-lightbox { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; background: rgba(20,16,12,.93); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: llbFade .18s ease; }
.lr-lightbox.open { display: flex; }
@keyframes llbFade { from { opacity: 0; } to { opacity: 1; } }
.lr-lightbox .llb-stage { max-width: 92vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.lr-lightbox .llb-img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.55); background: #fff; }
.lr-lightbox .llb-close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; font-size: 1.7rem; line-height: 1; background: rgba(255,255,255,.14); border: none; border-radius: 50%; color: #fff; cursor: pointer; transition: background .15s ease; }
.lr-lightbox .llb-close:hover { background: rgba(255,255,255,.3); }
.lr-lightbox .llb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: none; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.lr-lightbox .llb-nav:hover { background: rgba(255,255,255,.3); }
.lr-lightbox .llb-prev { left: 22px; } .lr-lightbox .llb-next { right: 22px; }
.lr-lightbox .llb-count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #fff; font-size: .85rem; letter-spacing: .04em; opacity: .85; }
@media (max-width: 760px) {
  .lr-lightbox .llb-nav { width: 40px; height: 40px; font-size: 1.5rem; background: rgba(255,255,255,.2); }
  .lr-lightbox .llb-prev { left: 8px; } .lr-lightbox .llb-next { right: 8px; }
  .lr-lightbox .llb-img, .lr-lightbox .llb-stage { max-width: 96vw; }
}

/* info panel */
.pdx-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 700; color: var(--olive); margin: 0 0 .5rem; }
.pdx-title { font-family: var(--font-display); font-weight: 700; color: var(--brown-deep); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.12; margin: 0 0 .75rem; }
.pdx-rating-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pdx-rating { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--muted); font-size: .85rem; font-weight: 600; }
.pdx-rating.muted .stars { opacity: .6; }
.pdx-stock { font-size: .82rem; font-weight: 700; }
.pdx-stock.in { color: var(--sage-deep); }
.pdx-stock.made { color: var(--brown); }
.pdx-price { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem .85rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pdx-price .now { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--brown-deep); }
.pdx-price .was { color: var(--muted); text-decoration: line-through; font-size: 1.1rem; }
.pdx-price .save { background: #eafae1; color: var(--olive); font-weight: 700; font-size: .8rem; padding: .25rem .6rem; border-radius: 999px; }
.pdx-price .pdx-tax { flex-basis: 100%; color: var(--muted); font-size: .74rem; }
.pdx-short { color: #5b5148; line-height: 1.6; margin: 1rem 0; max-width: 64ch; }
.pdx-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.chipfact { display: inline-flex; align-items: center; gap: .4rem; background: var(--cream-soft); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .8rem; font-size: .8rem; font-weight: 600; color: var(--brown-deep); }
.chipfact i { font-style: normal; }
.pdx-buy { display: flex; gap: .75rem; align-items: stretch; margin-bottom: .75rem; }
.pdx-buy .qty-stepper { display: flex; align-items: center; border: 1.5px solid var(--brown-deep); border-radius: 11px; overflow: hidden; }
.pdx-buy .qty-stepper button { border: 0; background: transparent; width: 36px; font-size: 1.15rem; cursor: pointer; color: var(--brown-deep); }
.pdx-buy .qty-stepper input { width: 38px; border: 0; text-align: center; font-size: 1rem; font-family: var(--font-body); font-weight: 700; -moz-appearance: textfield; }
.pdx-buy .qty-stepper input::-webkit-outer-spin-button, .pdx-buy .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdx-add { flex: 1; font-size: .95rem; padding: .7rem 1.1rem; }
.pdx-buy-row2 { display: flex; gap: .6rem; margin-bottom: 1.1rem; }
.pdx-buy-row2 .btn-ghost { flex: 1; text-align: center; padding: .58rem; font-size: .85rem; }
.pdx-wish.active { border-color: #e0563a; color: #e0563a; }

/* tabs — the whole parent-facing content, one pane at a time */
/* Same cap as .pdx-grid, so the buy panel and the tabs share one
   content column instead of the tabs running 460px wider. */
.pdx-tabs { margin-top: clamp(2.25rem, 5vw, 3.25rem); max-width: 1156px; }
.tabs-nav {
  display: flex; gap: .2rem; flex-wrap: nowrap;
  border-bottom: 2px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  border: 0; background: none; padding: .85rem 1.15rem;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  color: var(--muted); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .15s ease, border-color .15s ease;
}
.tab-btn:hover { color: var(--brown-deep); }
.tab-btn.active { color: var(--brown-deep); border-bottom-color: var(--mustard); }
.tab-btn .tab-n {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 .3rem;
  border-radius: 999px; background: var(--cream-soft); border: 1px solid var(--line);
  font-size: .68rem; font-weight: 800; color: var(--muted);
}
.tab-btn.active .tab-n { background: var(--mustard); border-color: var(--mustard); color: var(--primary-ink); }
.tab-pane { display: none; padding: 1.6rem 0 0; color: #5b5148; line-height: 1.7; }
.tab-pane.active { display: block; animation: rise-in .4s ease both; }
/* Prose stays readable even though the pane now spans the wider page. */
.tab-pane .lr-block, .tab-pane .lr-video, .tab-pane .lr-faq { max-width: 78ch; }
.tab-pane .lr-block-text, .tab-pane .lr-block-list { max-width: 72ch; }
#pane-reviews .lr-block { max-width: min(100%, 92ch); }
.spec-table { width: 100%; border-collapse: collapse; max-width: 640px; }
.spec-table th, .spec-table td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--line); font-size: .92rem; }
.spec-table th { color: var(--muted); font-weight: 600; width: 42%; }
.spec-table td { color: var(--brown-deep); font-weight: 600; }
.desc-text { margin-bottom: 1.5rem; }
.desc-h { font-family: var(--font-display); color: var(--brown-deep); font-size: 1.15rem; margin: 0 0 .9rem; }
.desc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem 1.5rem; max-width: 760px; }
.desc-grid > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .1rem; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.desc-grid span { color: var(--muted); }
.desc-grid b { color: var(--brown-deep); text-align: right; }
.desc-grid b a { color: var(--olive); text-decoration: none; }
.ship-list { padding-left: 1.1rem; }
.ship-list li { margin-bottom: .5rem; }
.reviews-summary { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--cream-soft); border-radius: var(--radius); margin-bottom: 1.25rem; }
.rs-score { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--brown-deep); line-height: 1; }
.rs-count { color: var(--muted); font-size: .8rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  /* Single column: the gallery must follow the viewport, not its 460px desktop
     cap, otherwise the stage overflows the screen on phones. */
  .pdx-grid { grid-template-columns: minmax(0, 1fr); }
  .pdx-gallery { position: static; margin-inline: auto; }
  .pdx-thumbs { justify-content: center; }
}
@media (max-width: 560px){
  .pdx-buy { flex-wrap: wrap; }
  .pdx-add { flex-basis: 100%; }
  .pdx-thumb { width: 64px; flex: 0 0 64px; }
}
/* ---------- Responsive (base) ---------- */
@media (max-width: 860px) {
  .trust-row { grid-template-columns: 1fr 1fr; }
  .hs-slide { grid-template-columns: 1fr; text-align: center; }
  .hs-slide .hs-text { margin-inline: auto; }
  .hs-art { display: none; }
}
.nav-close { display: none; }
.lr-nav-backdrop { display: none; }

@media (max-width: 760px) {
  .nav-toggle { display: block; order: -1; }

  /* The header's entrance animation leaves a residual transform (fill-mode:both),
     which would make .site-header the containing block for the position:fixed
     drawer below — clamping it to the header's height instead of the viewport.
     Disable the animation on mobile so the drawer anchors to the viewport. */
  .site-header { animation: none; transform: none; }

  /* ---- Off-canvas side drawer ---- */
  .site-nav {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(84vw, 330px); height: 100dvh; max-height: 100dvh;
    background: #fff; flex-direction: column; align-items: stretch;
    justify-content: flex-start;               /* top-aligned (override store.css center) */
    order: 0; flex-basis: auto;                /* neutralise store.css @720 leak */
    /* No side padding on the drawer itself — every row carries its own instead,
       so the tappable link runs the full width. With the padding here, the
       1.1rem strip beside each row was dead space right where the caret sits. */
    gap: .1rem; padding: 4.25rem 0 2rem;
    box-shadow: var(--shadow-md); z-index: 1200;
    transform: translateX(-100%); transition: transform .28s ease;
    overflow-y: auto; display: flex;
  }
  body.lr-nav-open .site-nav { transform: translateX(0); }
  body.lr-nav-open { overflow: hidden; }

  /* The drawer lives inside .store-header, which is its own stacking context
     (position:sticky; z-index:100) — so the drawer's z-index:1200 is capped at
     100 in the root and the backdrop (z-index:1100) would paint OVER the drawer,
     dimming the menu itself. Lift the header above the backdrop while open so the
     drawer sits above the scrim and only the page content behind dims. */
  body.lr-nav-open .store-header { z-index: 1300; }

  .lr-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1100;
    background: rgba(38, 28, 18, .45);
    opacity: 0; visibility: hidden; transition: opacity .28s ease;
  }
  body.lr-nav-open .lr-nav-backdrop { opacity: 1; visibility: visible; }

  .nav-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 1rem; right: 1rem;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--cream-soft); color: var(--brown-deep);
    font-size: 1.1rem; cursor: pointer;
  }

  /* `.site-nav .nav-drop-trigger`, not a bare `.nav-drop-trigger`: styles.css
     has a `.site-nav a { font-size: .82rem }` that outranks a single class and
     was shrinking the "Shop by …" rows next to Home / About / Contact. */
  .site-nav > a, .site-nav .nav-drop-trigger {
    display: flex; align-items: center; width: 100%;
    padding: .95rem 1.1rem; border-bottom: 1px solid var(--line);
    font-size: 1.02rem; border-radius: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .site-nav a.active::after { display: none; }

  /* ---- Shop by Collection = click-to-expand accordion ---- */
  .nav-drop { position: static; display: block; width: 100%; }
  .site-nav .nav-drop-trigger { justify-content: space-between; gap: .75rem; }

  /* The caret is what people actually aim at, so it gets a real 34px target
     with a pill behind it instead of an 8px glyph pinned to the drawer edge.
     Negative block margin keeps the row height unchanged. */
  .nd-caret {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-block: -6px; border-radius: 50%;
    background: var(--cream-soft); color: var(--brown-deep);
    font-size: .95rem; line-height: 1;
    transition: transform .25s ease, background .2s ease, color .2s ease;
  }

  .nav-drop-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; border: 0; box-shadow: none; background: var(--cream-soft);
    padding: 0; max-height: 0; overflow: hidden;
    transition: max-height .3s ease; z-index: auto;
  }
  .nav-drop-menu::before { display: none; }
  /* neutralise desktop hover-open on touch. IMPORTANT: also reset the desktop
     hover transform (translateX(-50%)) — on the now-static full-width menu it
     would shift the list left by half its width and clip the category names.
     The caret has to be reset for the same reason: a tap leaves :hover stuck,
     so the arrow would spin to "open" while the panel stayed shut — which is
     exactly what a broken accordion looks like. */
  .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { max-height: 0; transform: none; }
  .nav-drop:hover .nd-caret, .nav-drop:focus-within .nd-caret { transform: none; }
  .nav-drop.open .nav-drop-menu,
  .nav-drop.open:hover .nav-drop-menu {
    max-height: 70vh; overflow-y: auto; padding: .35rem 0 .45rem; transform: none;
    border-bottom: 1px solid var(--line);
  }
  .nav-drop.open .nd-caret { transform: rotate(180deg); background: var(--olive); color: #fff; }
  .site-nav .nav-drop.open > .nav-drop-trigger { color: var(--olive); border-bottom-color: transparent; }
  .nav-drop-menu a {
    margin: 0 .6rem; padding: .62rem .7rem; font-size: .92rem;
    border-radius: 10px; color: var(--brown-deep);
  }
  .nav-drop-menu a.ndm-all {
    background: #fff; border-bottom: 0; border-radius: 10px;
    margin-bottom: .3rem; font-weight: 800;
  }
  .nav-drop-menu .ndm-count { background: #fff; }
}
@media (max-width: 560px) {
  /* One per row, left-aligned against a shared icon column: centring each item
     independently left the icons and text ragged, since the labels differ in
     length. */
  .trust-row { grid-template-columns: 1fr; gap: .5rem; padding: .6rem; }
  .trust-item {
    justify-content: flex-start; gap: .8rem;
    background: #fff; border-radius: 14px; padding: .7rem .85rem;
  }
  .trust-item .ti-ico {
    flex: 0 0 42px; width: 42px; height: 42px;
    display: grid; place-items: center;
    background: var(--cream-soft); border-radius: 12px;
    font-size: 1.35rem; line-height: 1;
  }
  .trust-item h4 { font-size: .93rem; }
  .trust-item p { font-size: .77rem; margin-top: .1rem; }
}

/* ============================================================
   Brand wordmark — the "little roots" lockup
   Mirrors the master logo's own lettering instead of plain body text:
   rounded chunky Baloo 2, sage "little" with a peach heart tittle
   (dotless ı + inline SVG heart), walnut "roots", and a letterspaced
   tagline. Colours are sampled straight from assets/logo-trans.png so
   the HTML wordmark and the illustration read as one mark.
   All display: declarations are stated explicitly here — styles.css
   hides `.site-logo span` under 560px and we want the wordmark to stay.
   ============================================================ */
:root {
  --brand-green: #7e865c;   /* "little" */
  --brand-brown: #8a6640;   /* "roots"  */
  --brand-heart: #e09c72;   /* heart over the i */
  --brand-slug:  #6a7253;   /* tagline  */
  --font-brand: "Baloo 2", "Quicksand", "Nunito Sans", system-ui, sans-serif;
}

.site-logo { gap: .55rem; align-items: center; }
.site-logo img {
  width: 70px; height: 47px;      /* logo-2026-icon.png — tight crop, 1.48:1 */
  object-fit: contain;
  background: none;                /* transparent PNG — never paint behind it */
  filter: none;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.site-logo .brand-word {
  display: grid;
  gap: .3em;
  font-size: clamp(.95rem, .3vw + .88rem, 1.06rem);   /* single scale knob */
  line-height: 1;
}

.site-logo .brand-line {
  display: flex;
  align-items: baseline;
  gap: .28em;
  font-family: var(--font-brand);
  font-size: 1.95em;
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.005em;
}

/* styles.css pins `.site-logo span` to 1rem/500, which would beat plain
   inheritance — re-inherit so the words take .brand-line's size and weight. */
.site-logo .name-little,
.site-logo .name-roots,
.site-logo .lr-i { font: inherit; letter-spacing: inherit; }

.site-logo .name-little { display: inline; position: relative; color: var(--brand-green); }
.site-logo .name-roots  { display: inline; color: var(--brand-brown); }

/* dotless ı carries its own heart, so the tittle is a shape we control */
.site-logo .lr-i { display: inline-block; position: relative; }
.site-logo .lr-heart {
  position: absolute; left: 50%; bottom: .63em;
  width: .33em; height: .33em;
  transform: translateX(-50%) rotate(-9deg);
  transform-origin: 50% 100%;
  fill: var(--brand-heart);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.site-logo .brand-tag {
  display: block;
  font-family: var(--font-body);
  font-size: .46em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
  color: var(--brand-slug);
  margin-left: .2em;
}

/* a little life on hover — the heart beats, the toys tilt */
.site-logo:hover .lr-heart { transform: translateX(-50%) translateY(-2px) rotate(-9deg) scale(1.22); }
.site-logo:hover img       { transform: translateY(-1px) rotate(-2deg) scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .site-logo img, .site-logo .lr-heart { transition: none; }
}

/* ---- footer: same lockup, larger, tuned for the dark walnut panel ---- */
.store-footer .site-logo img { width: 100px; height: 68px; filter: none; opacity: 1; }
.store-footer .brand-word { font-size: 1.16rem; }
.store-footer .name-little { color: #b6cd8e; }
.store-footer .name-roots  { color: #e2bb8c; }
.store-footer .brand-tag   { color: rgba(255, 255, 255, .5); }
.store-footer .lr-heart    { fill: var(--peach); }

/* styles.css:733 (`.site-footer p`) shouts the brand sentence in wide-tracked
   caps — a leftover from the old footer. Let it read as a sentence again. */
.store-footer .foot-brand p { text-transform: none; letter-spacing: .005em; font-size: .9rem; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .site-logo .brand-tag { display: none; }
  .store-footer .brand-tag { display: block; }
}
@media (max-width: 560px) {
  .site-logo img { width: 54px; height: 36px; }
  .site-logo .brand-word { font-size: .84rem; }
  .store-footer .site-logo img { width: 84px; height: 57px; }
  .store-footer .brand-word { font-size: 1rem; }
  .store-footer .brand-tag { letter-spacing: .12em; }
}

/* ============================================================
   Live visitors — "7 People are viewing right now."
   Product badge: a warm cream pill whose live-ness is carried by the brand's
   own stacking-ring toy (three rings bobbing in sequence) plus a slow light
   sweep across the pill — no generic eye or blinking red dot.
   Counts come from presence.php; see presence_* in inc/functions.php.
   ============================================================ */
.live-viewers {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: .1rem 0 .15rem;
  padding: .38rem .9rem .38rem .62rem;
  border: 1px solid rgba(143, 170, 115, .42);
  border-radius: 999px;
  background: linear-gradient(100deg, #f6f2e6 0%, #fffdf8 55%, #f7f3e8 100%);
  box-shadow: 0 10px 20px -18px rgba(44, 38, 32, .9);
  font-size: .9rem;
  color: var(--ink);
}
.live-viewers[hidden] { display: none; }

/* the light sweep — reads as "live" without shouting */
.live-viewers::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .8) 50%, transparent 64%);
  transform: translateX(-120%);
  animation: lv-sweep 5.5s ease-in-out infinite;
  pointer-events: none;
}

/* stacker-ring motif, straight out of the logo */
.live-viewers .lv-rings {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 2px; flex: 0 0 auto; width: 20px;
}
.live-viewers .lv-rings i {
  display: block; height: 4px; border-radius: 999px;
  animation: lv-bob 2.4s ease-in-out infinite;
}
.live-viewers .lv-rings i:nth-child(1) { width: 9px;  background: var(--peach);   }
.live-viewers .lv-rings i:nth-child(2) { width: 14px; background: var(--mustard); animation-delay: .18s; }
.live-viewers .lv-rings i:nth-child(3) { width: 19px; background: var(--sage);    animation-delay: .36s; }

.live-viewers .lv-count {
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--brown-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.live-viewers .lv-text { color: var(--muted); }

/* JS adds .lv-tick whenever the number actually changes */
.live-viewers .lv-count.lv-tick { animation: lv-tick .55s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes lv-sweep { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes lv-bob   { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-2.5px); } }
@keyframes lv-tick  { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-3px) scale(1.16); } 100% { transform: translateY(0) scale(1); } }

/* ---- site-wide count, sits in the dark footer base ---- */
.live-site {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: .9rem;
  padding: .2rem .7rem .2rem .55rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-size: .78rem;
  color: rgba(255, 255, 255, .68);
}
.live-site[hidden] { display: none; }
.live-site .ls-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #8ec98a;
  animation: ls-blink 2.4s ease-in-out infinite;
}
.live-site .ls-count { color: #fff; font-weight: 800; }

@keyframes ls-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(142, 201, 138, .5); opacity: 1; }
  55%      { box-shadow: 0 0 0 5px rgba(142, 201, 138, 0); opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
  .live-viewers::after, .live-viewers .lv-rings i,
  .live-viewers .lv-count.lv-tick, .live-site .ls-dot { animation: none; }
}
@media (max-width: 560px) {
  .live-viewers { font-size: .86rem; }
  .live-site { margin: .5rem 0 0; }
}

/* ============================================================
   New Arrivals — full-width editorial header + draggable slider
   The heading, counter and arrows sit in one header row above the
   track, so the cards get the whole width instead of two thirds.
   Driven by the [data-na-*] hooks in js/store.js.
   ============================================================ */
.na-section { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* ---- header ---- */
.na-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  padding-bottom: .9rem;
}
.na-head-copy { min-width: 0; max-width: 62ch; }
.na-head-side { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }

.na-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0 0 .35rem;
  font-size: .7rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--olive);
}
.na-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--peach);
  box-shadow: 0 0 0 4px rgba(239, 159, 120, .2);
  animation: na-ping 2.8s ease-out infinite;
}
.na-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
  line-height: 1.06;
  color: var(--brown-deep);
}
.na-sub { margin: .4rem 0 0; font-size: .89rem; line-height: 1.55; color: var(--muted); }

.na-ctrl { display: flex; align-items: center; gap: .5rem; }
.na-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--brown-deep);
  background: #fff; color: var(--brown-deep);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, opacity .2s ease, transform .2s ease;
}
.na-arrow:hover:not(:disabled) { background: var(--brown-deep); color: #fff; transform: translateY(-1px); }
.na-arrow:disabled { opacity: .28; cursor: default; }
.na-count {
  margin-right: .25rem; font-size: .85rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.na-count strong { color: var(--brown-deep); font-weight: 800; }
.na-count i { margin: 0 .22rem; font-style: normal; opacity: .45; }

.na-all {
  color: var(--olive); font-weight: 700; font-size: .89rem; text-decoration: none;
  white-space: nowrap;
}
.na-all:hover { text-decoration: underline; }

/* A hairline that doubles as the scroll position — the whole width is the
   track, the coloured part is how far along the shopper has read. */
.na-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(44, 38, 32, .1);
  overflow: hidden;
}
.na-bar span {
  display: block; height: 100%; width: 15%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mustard), var(--peach));
  transition: width .28s ease;
}

/* ---- slider ---- */
.na-viewport { position: relative; min-width: 0; }
.na-viewport::after {                   /* soft fade hinting more cards */
  content: "";
  position: absolute; top: 0; right: -1px;
  width: 46px; height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 78%);
  pointer-events: none;
  transition: opacity .25s ease;
}
.na-viewport.at-end::after { opacity: 0; }

.na-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(216px, 250px);
  gap: clamp(.85rem, 1.8vw, 1.2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 1rem .3rem 1rem;
  scrollbar-width: none;
  cursor: grab;
}
.na-track::-webkit-scrollbar { display: none; }
.na-track > .product-card { scroll-snap-align: start; }
.na-track:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: var(--radius); }
/* while dragging: no snap fighting the pointer, and no click-through on cards */
.na-track.is-drag { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.na-track.is-drag .product-card { pointer-events: none; }

/* ---- "New" corner tag ---- */
.badge-new {
  position: absolute; top: .7rem; left: .7rem; z-index: 4;
  background: var(--brown-deep); color: #fff;
  font-size: .63rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 999px;
}
.badge-new ~ .badge-featured { top: 2.6rem; }   /* stack, never overlap */

/* shop.css puts the discount pill top-right, where .wl-heart already sits, so
   the two overlapped on every card. Move it to the free bottom-left corner. */
.product-card .badge-off {
  top: auto; right: auto;
  bottom: .7rem; left: .7rem;
  font-size: .7rem;
  padding: .28rem .6rem;
  box-shadow: 0 6px 14px -8px rgba(44, 38, 32, .7);
}

@keyframes na-ping {
  0%       { box-shadow: 0 0 0 0 rgba(239, 159, 120, .5); }
  70%, 100%{ box-shadow: 0 0 0 8px rgba(239, 159, 120, 0); }
}

@media (max-width: 860px) {
  .na-head { align-items: flex-start; }
  .na-head-side { width: 100%; justify-content: space-between; }
}
@media (max-width: 560px) {
  .na-track { grid-auto-columns: minmax(70vw, 76vw); }
  .na-viewport::after { width: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .na-dot { animation: none; }
  .na-track { scroll-behavior: auto; }
}

/* ============================================================
   Parent reviews — closing testimonial rail (index.php §14)
   Keeps .pc-section so js/store.js scopes its arrows to this
   carousel and not to the best-sellers track further up.
   ============================================================ */
.rv-section { margin-top: clamp(2.5rem, 6vw, 4rem); }
.rv-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.rv-eyebrow {
  margin: 0 0 .25rem; font-size: .7rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; color: var(--olive);
}
.rv-head h2 {
  margin: 0; font-family: var(--font-display); color: var(--brown-deep);
  font-size: clamp(1.5rem, 3.2vw, 2.15rem); line-height: 1.08;
}
.rv-track { grid-auto-columns: minmax(268px, 300px); padding-top: .9rem; align-items: stretch; }
.rv-track > .rv-card { scroll-snap-align: start; }

.rv-card {
  position: relative;
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.5rem 1.15rem 1.05rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #fffdf8 0%, var(--cream-soft) 100%);
  box-shadow: 0 10px 26px -20px rgba(44, 38, 32, .5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rv-card:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -24px rgba(44, 38, 32, .55); }
.rv-quote {
  position: absolute; top: -.35rem; right: .85rem;
  font-family: var(--font-display); font-size: 4.2rem; line-height: 1;
  color: var(--mustard); opacity: .3; pointer-events: none;
}
.rv-stars { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.rv-title { margin: .15rem 0 0; font-size: .96rem; font-family: var(--font-display); color: var(--brown-deep); }
.rv-text { margin: 0; font-size: .87rem; line-height: 1.6; color: #5b5148; }
.rv-foot {
  margin-top: auto; padding-top: .8rem; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: .35rem;
}
.rv-prod { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--muted); font-size: .78rem; }
.rv-prod img { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.rv-prod:hover span { color: var(--olive); text-decoration: underline; }
.rv-by { font-size: .76rem; color: var(--brown); font-weight: 600; }

/* ---------- Brand story, ready-made banner variant ----------
   Used when assets/story-banner.(webp|png|jpg) exists: the artwork already
   carries the copy and the lockup, so the section is the picture plus the
   one thing the artwork has no room for — a real button. */
.story.is-banner {
  display: block; padding: 0; border: 0; background: none; overflow: visible;
  text-align: center;
}
.story-banner {
  display: block; border-radius: calc(var(--radius-lg) + 6px); overflow: hidden;
  border: 1px solid rgba(143, 170, 115, .28);
  box-shadow: 0 18px 40px -28px rgba(44, 38, 32, .55);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}
.story-banner:hover { transform: translateY(-3px); box-shadow: 0 28px 54px -30px rgba(44, 38, 32, .6); }
.story-banner img, .story-banner picture { display: block; width: 100%; height: auto; }
.story-banner-cta { display: inline-block; margin-top: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
  .story-banner { transition: none; }
  .story-banner:hover { transform: none; }
}