/* =========================================================
   OMNICART — Malaysian Premium Grocery
   style.css — design system, layout & components
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --green-900:#05341F;
  --green-800:#08472C;
  --green-700:#0B5D3B;
  --green-600:#0F7048;
  --green-500:#12805A;
  --green-200:#BFE0CE;
  --green-100:#E9F4EE;
  --green-50:#F4FAF6;

  --gold:#C8A15A;

  /* ---- gold, as a surface rather than a trim ----
     Gold was already the metal on this site — the cart handle, the
     wheels, the accent on the dark billboards. What it had never been
     is a panel you could set type on. The trick is keeping the range
     narrow: a wide dark-to-light metal gradient looks convincing and
     cannot carry a single text colour safely, because whatever reads on
     the bright band fails on the dark one. So these steps stay in the
     bright half and the metal comes from the sheen travelling over
     them, not from the fill. */
  --gold-900:#332405;
  --gold-800:#4A3510;
  --gold-700:#6B4E12;
  --gold-600:#8F6D22;
  --gold-500:#B8913C;
  --gold-400:#CBA84E;
  --gold-300:#DFC073;
  --gold-200:#EBD293;
  --gold-100:#F4E5BE;
  --gold-50:#FAF2DE;

  --ink:#12201A;
  --ink-2:#334840;
  /* darkened from #6B7A73: the old value sat at 4.37:1 on white, just
     under AA. Grey text a shopper has to squint at reads as small print
     someone is hoping they will not read. */
  --muted:#5C6B64;
  --line:#E7EDE9;
  --line-2:#F0F4F1;

  --white:#FFFFFF;
  --bg:#FFFFFF;          /* card and panel surfaces — still pure white */
  --bg-soft:#F0F5F1;     /* inputs, thumbnails, alternating bands */

  /* ---- the page itself ----
     Not white. A shop drawn in white on white has nothing for its cards
     to sit on: every panel needs a border to be visible at all, and the
     whole thing reads flat. Warming the ground by a couple of percent
     costs no contrast worth counting and lets every white surface lift
     off it on its own. */
  --page:#F8F7F1;

  --sale:#C0392B;
  --sale-soft:#FCEDEB;
  --warn:#B7791F;
  --info:#1E6FA8;

  /* ---- typefaces ----
     Body: Plus Jakarta Sans. A taller x-height than Inter and more open
     counters, which is what actually decides whether 13px copy is easy
     or merely possible.

     Headlines: Source Serif 4. Fraunces has a 'wonky' axis and soft,
     playful terminals — character that reads as novelty on a shop asking
     for card details. Source Serif was drawn for screens and carries the
     same weight without the quirk.

     Chinese headlines now fall to Noto Sans SC, which is loaded. They
     used to ask for Noto Serif SC, which was never in the font link, so
     they were silently rendering in whatever CJK serif the machine
     happened to have — a different face on every visitor's screen. */
  --font:"Plus Jakarta Sans","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Source Serif 4","Noto Sans SC",Georgia,"Times New Roman",serif;

  /* ---- type scale ----
     One scale, used everywhere. Ad-hoc sizes are what make a site
     feel improvised, and an improvised shop is one people do not
     hand card details to. */
  --t-2xs:13px;    /* legal lines, timestamps — never body copy */
  --t-xs:14px;     /* captions, secondary labels */
  --t-sm:15px;     /* dense UI, and any sentence a shopper reads */
  --t-base:16px;   /* body */
  --t-md:17px;     /* lead paragraphs, card titles */
  --t-lg:20px;
  --t-xl:24px;
  --t-2xl:30px;

  --lh-tight:1.2;
  --lh-snug:1.45;
  --lh-body:1.68;  /* long copy needs air to feel calm and honest */

  /* uppercase micro-labels need the extra tracking or they read as shouting */
  --track-label:.13em;

  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  --r-xl:26px;
  --pill:999px;

  --sh-1:0 1px 2px rgba(9,40,26,.05), 0 1px 3px rgba(9,40,26,.04);
  --sh-2:0 2px 6px rgba(9,40,26,.06), 0 8px 20px -8px rgba(9,40,26,.10);
  --sh-3:0 10px 30px -10px rgba(9,40,26,.18), 0 2px 8px rgba(9,40,26,.06);
  --sh-pop:0 24px 60px -20px rgba(9,40,26,.30), 0 4px 14px rgba(9,40,26,.08);

  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);

  --wrap:1280px;
  --gut:24px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--t-base);
  line-height:var(--lh-body);
  color:var(--ink);
  /* two very soft washes over the warm ground — gold high on the right,
     the house green low on the left. Fixed, so they behave like light in
     the room rather than a pattern that scrolls past. */
  background:
    radial-gradient(1100px 720px at 88% -8%,  rgba(200,161,90,.13), rgba(200,161,90,0) 60%),
    radial-gradient(950px 780px at -8% 14%,   rgba(11,93,59,.08),   rgba(11,93,59,0)   58%),
    var(--page);
  background-attachment:fixed,fixed,fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
}

/* Money, quantities and countdowns line up column to column instead of
   jittering as digits change — the single cheapest way to make prices
   look accounted for rather than made up. */
.price,.price-was,.sum-row .v,.sum-total .v,.cart-line .lp,.mini-p,.cart-each,
.pdp-price .now,.pdp-price .was,.stat b,.cd-box b,.qty span,.slot-fee,
.pm-name,.hact-lg,.order-card .sum-total .v,.f-opt .n,.mega-n{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Headings break where a person would break them, not where the box ends. */
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}
body.locked{overflow:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4,h5{margin:0;line-height:1.2;font-weight:700;letter-spacing:-.02em;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--green-500);outline-offset:2px;border-radius:4px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.hide{display:none !important;}

/* language fade */
body.lang-switching main,body.lang-switching .site-header,body.lang-switching .footer{opacity:.35;transition:opacity .18s;}

/* ---------- 2. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:var(--pill);
  font-size:14px;font-weight:600;letter-spacing:.01em;
  transition:transform .25s var(--e),box-shadow .25s var(--e),background .2s,color .2s,border-color .2s;
  white-space:nowrap;cursor:pointer;
}
.btn:active{transform:translateY(1px);}
.btn svg{width:16px;height:16px;flex:none;}
.btn-primary{background:var(--green-700);color:#fff;box-shadow:0 6px 18px -8px rgba(11,93,59,.7);}
.btn-primary:hover{background:var(--green-800);box-shadow:0 10px 26px -10px rgba(11,93,59,.75);transform:translateY(-1px);}
.btn-ghost{background:#fff;color:var(--green-700);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--green-200);background:var(--green-50);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:#000;}
.btn-gold{background:var(--gold);color:#3B2C10;}
.btn-gold:hover{filter:brightness(1.05);}
.btn-line{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;}
.btn-line:hover{background:rgba(255,255,255,.12);}
.btn-sm{height:36px;padding:0 16px;font-size:13px;}
.btn-lg{height:52px;padding:0 30px;font-size:15px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45;pointer-events:none;}

/* ---------- 3. TOP BAR / OFFER TICKER ---------- */
.topbar{
  position:relative;overflow:hidden;color:#D6E7DD;font-size:12.5px;
  background:linear-gradient(90deg,var(--green-900) 0%,#07422A 50%,var(--green-900) 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .wrap{display:flex;align-items:center;gap:22px;height:40px;}
.topbar-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.topbar-item svg{width:14px;height:14px;flex:none;opacity:.75;}
.topbar-links{display:flex;align-items:center;gap:18px;flex:none;}
.topbar a:hover{color:#fff;}

/* the moving rail */
.ticker{
  flex:1;min-width:0;overflow:hidden;
  /* fade the offers in and out at both ends instead of clipping them dead */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
}
/* The transform is written by initTicker() in app.js every frame —
   see the note there for why this is not a CSS animation. */
.ticker-track{
  display:flex;align-items:center;width:max-content;
  will-change:transform;transform:translate3d(0,0,0);
}
.tk{
  display:inline-flex;align-items:center;gap:9px;padding:0 20px;
  white-space:nowrap;line-height:1;color:#D6E7DD;
  transition:color .2s;
}
.tk:hover{color:#fff;}
.tk-ico{font-size:13.5px;line-height:1;filter:saturate(1.1);}
.tk b{color:var(--gold);font-weight:800;letter-spacing:.01em;}
.tk:hover b{text-decoration:underline;text-underline-offset:3px;}
.tk-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.26);flex:none;}

/* ---------- 4. HEADER ---------- */
.site-header{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 1px 0 var(--line);}
.site-header.scrolled{box-shadow:var(--sh-2);}
.header-main .wrap{display:flex;align-items:center;gap:28px;height:78px;}

.brand{display:flex;align-items:center;gap:11px;flex:none;}
.brand-mark{
  width:42px;height:42px;border-radius:13px;flex:none;
  background:linear-gradient(145deg,var(--green-600),var(--green-800));
  display:grid;place-items:center;color:#fff;
  box-shadow:0 6px 16px -8px rgba(11,93,59,.8);
}
.brand-mark svg{width:27px;height:27px;overflow:visible;}
/* One colour, as the logo is. The wheels are filled rather than
   stroked so they read as solid at 27px, where a 3px ring would close
   up into a dot anyway. */
.lm-wheel{fill:currentColor;stroke:none;}
/* An SVG shape rotates about the viewBox origin unless it is told
   otherwise, which throws a wheel clean out of the frame. */
.lm-wheel,.lm-cart{transform-box:fill-box;transform-origin:50% 50%;}
/* Every place the mark currently appears is 26-27px, where three grid
   lines inside a 15-unit basket land under a pixel apart and turn into
   a grey smudge. The basket outline carries the shape on its own at
   that size, so the grid only comes back above 36px — where it is
   detail rather than noise. */
.lm-grid{display:none;}
.brand-mark:where(.is-lg) svg .lm-grid,
.lm-lg .lm-grid{display:block;opacity:.7;}
.brand-text{line-height:1.05;}
.brand-name{display:block;font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:-.03em;color:var(--green-800);}
.brand-tag{display:block;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:2px;}

.search{position:relative;flex:1;max-width:620px;}
.search-form{
  display:flex;align-items:center;height:48px;
  border:1.5px solid var(--line);border-radius:var(--pill);
  background:var(--bg-soft);transition:border-color .2s,background .2s,box-shadow .2s;
}
.search-form:focus-within{border-color:var(--green-500);background:#fff;box-shadow:0 0 0 4px var(--green-100);}
.search-cat{
  height:100%;border:0;background:none;padding:0 30px 0 20px;
  font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;
  max-width:180px;border-right:1px solid var(--line);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A73' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px;
}
.search-cat:focus{outline:none;}
.search-input{flex:1;height:100%;border:0;background:none;padding:0 16px;font-size:14.5px;min-width:0;}
.search-input::placeholder{color:var(--muted);}
.search-input:focus{outline:none;}
.search-btn{
  width:40px;height:40px;margin-right:4px;border-radius:50%;
  background:var(--green-700);color:#fff;display:grid;place-items:center;flex:none;
  transition:background .2s,transform .2s var(--e);
}
.search-btn:hover{background:var(--green-800);transform:scale(1.05);}
.search-btn svg{width:17px;height:17px;}

.search-panel{
  position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:70;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-pop);padding:8px;max-height:420px;overflow:auto;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s var(--e),visibility .18s;
}
.search-panel.open{opacity:1;visibility:visible;transform:none;}
.sp-head{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 12px 6px;}
.sp-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r);width:100%;text-align:left;transition:background .15s;}
.sp-item:hover{background:var(--green-50);}
.sp-thumb{width:40px;height:40px;border-radius:9px;background:var(--bg-soft);object-fit:cover;flex:none;display:grid;place-items:center;font-size:19px;}
.sp-name{font-size:14px;font-weight:500;}
.sp-meta{font-size:12px;color:var(--muted);}
.sp-price{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--green-700);}
.sp-empty{padding:26px 14px;text-align:center;color:var(--ink-2);font-size:var(--t-xs);}

.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none;}
.hact{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r);
  transition:background .18s;position:relative;
}
.hact:hover{background:var(--bg-soft);}
.hact-ico{width:23px;height:23px;flex:none;color:var(--green-800);}
.hact-txt{line-height:1.15;text-align:left;}
.hact-sm{display:block;font-size:11px;color:var(--muted);}
.hact-lg{display:block;font-size:13.5px;font-weight:650;white-space:nowrap;}
.cart-count{
  position:absolute;top:2px;left:26px;min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--pill);background:var(--sale);color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center;
  box-shadow:0 0 0 2px #fff;transition:transform .3s var(--e-out);
}
.cart-count.bump{transform:scale(1.35);}

/* language switcher */
.lang{position:relative;flex:none;}
.lang-btn{
  display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--pill);
  font-size:13px;font-weight:600;transition:border-color .2s,background .2s;
}
.lang-btn:hover{border-color:var(--green-200);background:var(--green-50);}
.lang-btn .globe{width:16px;height:16px;color:var(--green-700);}
.lang-btn .chev{width:10px;height:7px;transition:transform .25s var(--e);opacity:.6;}
.lang-btn.open .chev{transform:rotate(180deg);}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:196px;z-index:80;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-pop);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;
  transition:opacity .18s,transform .2s var(--e),visibility .18s;
}
.lang-menu.open{opacity:1;visibility:visible;transform:none;}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:var(--r);font-size:14px;transition:background .15s;}
.lang-opt:hover{background:var(--green-50);}
.lang-opt.active{color:var(--green-700);font-weight:650;}
.lang-flag{font-size:16px;line-height:1;}
.lang-name{flex:1;text-align:left;}
.lang-tick{color:var(--green-600);font-weight:700;}

/* ---------- 5. CATEGORY NAV ---------- */
.catbar{border-top:1px solid var(--line);background:#fff;}
.catbar .wrap{display:flex;align-items:center;gap:8px;height:54px;}
.allcat{position:relative;flex:none;}
.allcat-btn{
  display:flex;align-items:center;gap:9px;height:38px;padding:0 18px;
  border-radius:var(--pill);background:var(--green-700);color:#fff;
  font-size:13.5px;font-weight:600;transition:background .2s;
}
.allcat-btn:hover{background:var(--green-800);}
.allcat-btn svg{width:15px;height:15px;}
.mega{
  position:absolute;top:calc(100% + 10px);left:0;z-index:75;
  width:min(1120px,92vw);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-pop);padding:24px 26px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px 20px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s,transform .22s var(--e),visibility .2s;
}
.mega.open{opacity:1;visibility:visible;transform:none;}
.mega-group{min-width:0;}
.mega-dept{
  display:flex;align-items:center;gap:8px;padding:0 8px 10px;margin-bottom:6px;
  border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:750;letter-spacing:.01em;color:var(--green-900);
}
.mega-dept:hover{color:var(--green-600);}
.mega-dept-ico{font-size:15px;line-height:1;}
.mega-link{
  display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;
  font-size:13px;color:var(--ink-2);transition:background .15s,color .15s,transform .15s var(--e);
}
.mega-link:hover{background:var(--green-50);color:var(--green-700);transform:translateX(2px);}
.mega-n{margin-left:auto;font-size:11px;color:var(--muted);}
.mega-foot{
  grid-column:1/-1;margin-top:12px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}

.navlinks{display:flex;align-items:center;gap:2px;flex:1;overflow:hidden;}
.navlinks a{
  padding:9px 14px;border-radius:var(--pill);font-size:13.5px;font-weight:550;
  color:var(--ink-2);transition:background .16s,color .16s;white-space:nowrap;
}
.navlinks a:hover{background:var(--bg-soft);color:var(--green-700);}
.navlinks a.active{color:var(--green-700);background:var(--green-100);font-weight:650;}
.nav-flash{
  display:inline-flex;align-items:center;gap:7px;margin-left:auto;flex:none;
  height:34px;padding:0 15px;border-radius:var(--pill);
  background:var(--gold-100);color:var(--gold-700);font-size:12.5px;font-weight:700;
}
/* the pulse is driven from app.js; a keyframe here would be flattened
   to nothing by the reduce-motion block at the foot of this file */
.nav-flash .dot{width:6px;height:6px;border-radius:50%;background:#C0392B;flex:none;}

.burger{display:none;width:42px;height:42px;border-radius:var(--r);align-items:center;justify-content:center;flex:none;}
.burger i{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:.25s var(--e);}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--e);}
.burger i::before{top:-6px;}
.burger i::after{top:6px;}
.burger.open i{background:transparent;}
.burger.open i::before{top:0;transform:rotate(45deg);}
.burger.open i::after{top:0;transform:rotate(-45deg);}

.drawer{
  position:fixed;top:0;bottom:0;left:0;width:min(340px,86vw);z-index:200;background:#fff;
  transform:translateX(-100%);transition:transform .34s var(--e-out);
  display:flex;flex-direction:column;box-shadow:var(--sh-pop);
}
.drawer.open{transform:none;}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);}
.drawer-body{flex:1;overflow:auto;padding:10px 12px 30px;}
.drawer-sec{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:18px 10px 6px;}
.drawer-sec a{color:var(--green-800);}
.drawer .dl{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:var(--r);font-size:15px;font-weight:550;}
.drawer .dl:hover{background:var(--green-50);}
.drawer .dl-sub{padding:9px 10px;font-size:14px;font-weight:500;color:var(--ink-2);}
.drawer .dl .ico{width:26px;text-align:center;font-size:17px;}
.scrim{position:fixed;inset:0;z-index:150;background:rgba(10,30,20,.42);opacity:0;visibility:hidden;transition:.28s;}
.scrim.on{opacity:1;visibility:visible;}

/* icon-only close */
.iclose{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;transition:background .2s;}
.iclose:hover{background:var(--bg-soft);}
.iclose svg{width:16px;height:16px;}

/* ---------- 6. HERO ---------- */
/* ---- the hero rides on gold ----
   A real foil photograph rather than a gradient, warmed and settled so
   the billboard and the cards read as objects laid on a surface. The
   panels on top are opaque, so nothing here is behind live text — the
   foil only shows in the margins and between the cards, which is where
   a texture earns its keep. */
/* ---- the hero ground ----
   A pale, scuffed plaster wall. Painted rather than photographed: the
   reference was a watermarked stock file, and this reproduces it in
   about a kilobyte of CSS that scales to any width instead of being
   stretched to fit.

   Three parts:
     · a near-white field with the light pooling right of centre, and
       grey settling into the corners and down the left, the way the
       reference is lit
     · blotchy fractal cloud with diagonal brush streaks raked across
       it at -16deg, multiplied over the field
     · a fine speckle on top, which is what makes it read as a surface
       rather than a gradient

   Kept a touch warm (#F3F3F0, not a neutral grey) so it sits with the
   cream page rather than turning the fold cold. */
.hero{
  position:relative;padding:34px 0 20px;isolation:isolate;
  background-color:#F3F3F0;
  background-image:
    radial-gradient(58% 62% at 66% 34%, rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 66%),
    radial-gradient(46% 58% at 1% 6%,   rgba(206,206,203,.55) 0%, rgba(206,206,203,0) 68%),
    radial-gradient(38% 46% at 3% 88%,  rgba(199,199,196,.50) 0%, rgba(199,199,196,0) 70%),
    radial-gradient(44% 40% at 99% 96%, rgba(203,203,200,.48) 0%, rgba(203,203,200,0) 70%),
    radial-gradient(52% 30% at 34% 1%,  rgba(213,213,210,.42) 0%, rgba(213,213,210,0) 72%),
    radial-gradient(40% 34% at 97% 4%,  rgba(209,209,206,.40) 0%, rgba(209,209,206,0) 72%);
  background-repeat:no-repeat;
}
/* the scuffing. multiply, so it bites into the greys at the edges and
   leaves the bright middle alone. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009' numOctaves='5' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='k' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.11' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='900' height='700' filter='url(%23b)'/%3E%3Cg transform='rotate(-16 450 350)'%3E%3Crect x='-260' y='-260' width='1420' height='1220' filter='url(%23k)' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size:cover,300px 300px;
  background-repeat:no-repeat,repeat;
  mix-blend-mode:multiply;
  opacity:.13;
}
/* a hairline along the foot, so the band ends on purpose rather than
   fading out mid-thought. Grey now the ground is grey — a gold rule
   under a plaster wall read as a leftover. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;
  background:linear-gradient(90deg,rgba(150,150,145,0),rgba(150,150,145,.55),rgba(150,150,145,0));
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;}
/* ---- the billboard stage ---- */
.hero-stage{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  min-height:var(--hero-h,404px);box-shadow:var(--sh-1);display:block;padding:0;
  background:var(--bg-soft);
}
.hero-stage:focus-visible{outline:2px solid var(--green-600);outline-offset:3px;}
.hero-slides{position:relative;height:100%;min-height:var(--hero-h,404px);}
.hero-slide{
  position:absolute;inset:0;display:flex;align-items:center;
  /* the extra bottom padding is the rail's room — reserved here so a
     long headline or a third CTA can never run underneath it */
  padding:46px 52px 74px;opacity:0;pointer-events:none;
}
/* keep the copy clear of the controls on the side they sit */
.hero-copy{padding-right:clamp(0px,6vw,90px);}
.hero-slide.on{opacity:1;pointer-events:auto;}
.hero-slide::after{
  content:"";position:absolute;right:-90px;top:-90px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);
  pointer-events:none;
}

/* ---- photo billboards ----
   The picture fills the whole panel and is cropped by object-fit, so
   it works at any width without you cutting versions by hand. It is
   then faded right back — colour pulled out, midtones lifted, a
   tinted wash laid over it — so it reads as atmosphere behind the
   words rather than a photograph with text dumped on top. A picture
   behind type without that treatment is the most common way a hero
   becomes unreadable. */
.hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* barely touched: the picture has to still look like a photograph */
  filter:saturate(.88) contrast(1.03) brightness(1.03);
  transform-origin:68% 42%;
}
/* The picture EMERGES from the panel gradient instead of filling a hard
   rectangle behind everything. Nothing of it survives on the left, where
   the headline sits on clean brand colour; it comes up to full strength
   on the right, where the shot is actually worth looking at. That is what
   buys readability here — not a grey sheet thrown over the whole thing,
   which is the usual trick and the reason most photo heroes look cheap. */
.hero-photo{
  -webkit-mask-image:linear-gradient(100deg, rgba(0,0,0,0) 4%,
    rgba(0,0,0,.06) 28%, rgba(0,0,0,.22) 48%, rgba(0,0,0,.66) 66%,
    rgba(0,0,0,.94) 80%, #000 100%);
          mask-image:linear-gradient(100deg, rgba(0,0,0,0) 4%,
    rgba(0,0,0,.06) 28%, rgba(0,0,0,.22) 48%, rgba(0,0,0,.66) 66%,
    rgba(0,0,0,.94) 80%, #000 100%);
}
/* A dark billboard carries far more of the picture than a light one:
   white type over a deep green wash stays legible with the photograph
   showing straight through it, where dark type on a pale panel does not.
   So the dark themes fade the shot much less and it reads as a duotone
   across the whole panel — the subject stays whole instead of being cut
   in half by the fade. */
.hero-slide.theme-emerald .hero-photo,
.hero-slide.theme-plum .hero-photo,
.hero-slide.theme-indigo .hero-photo{
  -webkit-mask-image:linear-gradient(100deg, rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.16) 32%, rgba(0,0,0,.46) 56%, rgba(0,0,0,.86) 76%, #000 92%);
          mask-image:linear-gradient(100deg, rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.16) 32%, rgba(0,0,0,.46) 56%, rgba(0,0,0,.86) 76%, #000 92%);
}
/* The house palette laid over the shot in colour-blend, so the hues move
   towards the billboard and the brightness stays where the photographer
   put it. This is what makes a stock photo look commissioned. */
.hero-photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--photo-tint,linear-gradient(118deg,#0B5D3B 0%,#12805A 56%,#C8A15A 100%));
  mix-blend-mode:color;opacity:.34;
}
/* each billboard tints its picture towards its own hue, so the shot
   belongs to the panel it is sitting on rather than to the brand in
   general — the same photograph reads green, wine, gold or blue */
.theme-emerald{--photo-tint:linear-gradient(118deg,#0B5D3B 0%,#12805A 56%,#C8A15A 100%);}
.theme-plum{--photo-tint:linear-gradient(118deg,#5B1338 0%,#9B2A58 56%,#C8A15A 100%);}
.theme-gold{--photo-tint:linear-gradient(118deg,#8F6D22 0%,#C8A15A 56%,#E9D2A0 100%);}
.theme-indigo{--photo-tint:linear-gradient(118deg,#152A5C 0%,#2C55A8 56%,#C8A15A 100%);}
/* a soft vignette settles the edges, so the panel does not look like
   a rectangle cut out of a bigger photograph */
.hero-photo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(126% 96% at 62% 38%,
    rgba(9,40,26,0) 46%, rgba(9,40,26,.12) 80%, rgba(9,40,26,.24) 100%);
}
.hero-slide.has-photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--scrim);pointer-events:none;
}
/* the emoji stand-in steps aside once a real photo loads */
.hero-slide.has-photo .hero-art{display:none;}
.hero-slide.has-photo .hero-copy{position:relative;z-index:2;}
.hero-slide.has-photo .hero-disc{z-index:3;}
/* a photo needs a touch more contrast behind the badge than a flat panel */
.hero-slide.has-photo .hero-badge{box-shadow:0 2px 10px rgba(9,40,26,.16);}


/* Each theme carries its own wash, so the same picture works under
   light or dark copy. Two layers: a warm bloom in the top corner for
   depth, and a tinted veil that is heaviest over the text column and
   thins towards the artwork side — never to nothing, because the
   whole panel has to stay quiet enough to read across. */
.theme-emerald{
  --scrim:
    radial-gradient(115% 92% at 93% 5%, rgba(200,161,90,.20) 0%, rgba(200,161,90,0) 62%),
    linear-gradient(100deg,
      rgba(3,34,21,.80) 0%, rgba(4,40,24,.78) 34%,
      rgba(6,54,33,.66) 54%, rgba(9,74,46,.36) 74%,
      rgba(11,88,56,.20) 100%);
}
.theme-plum{
  --scrim:
    radial-gradient(115% 92% at 93% 5%, rgba(200,161,90,.22) 0%, rgba(200,161,90,0) 62%),
    linear-gradient(100deg,
      rgba(30,7,24,.76) 0%, rgba(38,10,30,.73) 34%,
      rgba(60,15,42,.63) 54%, rgba(92,22,60,.35) 74%,
      rgba(112,28,71,.18) 100%);
}
.theme-gold{
  --scrim:
    radial-gradient(115% 92% at 93% 5%, rgba(255,244,214,.30) 0%, rgba(255,244,214,0) 62%),
    linear-gradient(100deg,
      rgba(247,235,203,.52) 0%, rgba(244,229,190,.56) 34%,
      rgba(240,223,174,.62) 54%, rgba(230,206,140,.32) 74%,
      rgba(222,196,124,.14) 100%);
}
.theme-indigo{
  --scrim:
    radial-gradient(115% 92% at 93% 5%, rgba(200,161,90,.22) 0%, rgba(200,161,90,0) 62%),
    linear-gradient(100deg,
      rgba(7,13,34,.76) 0%, rgba(10,20,46,.73) 34%,
      rgba(15,30,68,.63) 54%, rgba(24,48,104,.35) 74%,
      rgba(30,61,130,.18) 100%);
}

/* four looks, so consecutive billboards never blur into one another.
   Mint is the one a photo sits on, so it is built in layers instead of
   a single sweep: a warm gold bloom top-right, a deeper green settling
   into the bottom corner, and the mint ramp underneath. Layered light
   is what reads as expensive — a flat two-stop gradient reads as a
   template. */
/* Four billboards, four hues, one metal. Gold runs through all of them
   as the accent, which is what stops a rotation of unrelated colours
   reading as four different websites. Only one of them is green now:
   the house colour earns the flagship slide, and the other three go
   somewhere else entirely so the panel changes character as it turns. */
.theme-emerald{
  background:
    radial-gradient(118% 92% at 96% 6%,  rgba(200,161,90,.20) 0%, rgba(200,161,90,0) 62%),
    radial-gradient(90% 110% at 12% 100%, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 64%),
    linear-gradient(120deg,#032015 0%,#095030 56%,#0F6E4C 100%);
}
.theme-plum{
  background:
    radial-gradient(118% 92% at 96% 6%,  rgba(200,161,90,.22) 0%, rgba(200,161,90,0) 62%),
    radial-gradient(90% 110% at 12% 100%, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 64%),
    linear-gradient(120deg,#25081D 0%,#5B1338 55%,#8E2350 100%);
}
.theme-gold{background:linear-gradient(120deg,#F6E9C4 0%,#E3C77F 58%,#CBA84E 100%);}
.theme-indigo{
  background:
    radial-gradient(118% 92% at 96% 6%,  rgba(200,161,90,.22) 0%, rgba(200,161,90,0) 62%),
    radial-gradient(90% 110% at 12% 100%, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 64%),
    linear-gradient(125deg,#080F26 0%,#152A5C 55%,#22468F 100%);
}

.theme-emerald .hero-h1,.theme-plum .hero-h1,.theme-indigo .hero-h1{color:#fff;}
.theme-emerald .hero-h1 em,.theme-plum .hero-h1 em,.theme-indigo .hero-h1 em{color:var(--gold);}
.theme-emerald .hero-p,.theme-plum .hero-p,.theme-indigo .hero-p{color:rgba(255,255,255,.88);}
.theme-emerald .hero-badge,.theme-plum .hero-badge,.theme-indigo .hero-badge{background:rgba(255,255,255,.16);color:#fff;box-shadow:none;}
.theme-emerald .btn-ghost,.theme-plum .btn-ghost,.theme-indigo .btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff;}
.theme-emerald .btn-primary,.theme-plum .btn-primary,.theme-indigo .btn-primary{background:var(--gold);color:#3B2C10;box-shadow:0 8px 22px -10px rgba(200,161,90,.8);}
.theme-emerald .btn-primary:hover,.theme-plum .btn-primary:hover,.theme-indigo .btn-primary:hover{background:#D8B571;}
.theme-emerald .hero-disc,.theme-plum .hero-disc,.theme-indigo .hero-disc{
  color:#33240B;
  background:
    radial-gradient(120% 110% at 30% 22%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(150deg,#F0DCA8 0%,#D8B265 44%,#A8792B 100%);
  box-shadow:
    0 22px 48px -16px rgba(200,161,90,.65),
    inset 0 0 0 2px rgba(255,255,255,.55),
    inset 0 0 0 6px rgba(168,121,43,.28),
    inset 0 2px 0 rgba(255,255,255,.6);
}
.theme-emerald .hd-ring,.theme-plum .hd-ring,.theme-indigo .hd-ring{border-color:#F0DCA8;}
.theme-gold .hero-h1{color:var(--gold-900);}
/* the house green picked out on gold — the pairing the logo already
   makes, run the other way round */
.theme-gold .hero-h1 em{color:var(--green-700);}
.theme-gold .hero-p{color:#4A3814;}
.theme-gold .hero-disc{
  color:#fff;
  background:
    radial-gradient(120% 110% at 30% 22%, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(150deg,var(--gold-700) 0%,var(--gold-900) 100%);
  box-shadow:
    0 22px 48px -16px rgba(51,36,5,.6),
    inset 0 0 0 2px rgba(240,220,168,.85),
    inset 0 0 0 6px rgba(255,255,255,.12),
    inset 0 2px 0 rgba(255,255,255,.28);
}

/* ---- controls ----
   Moved out of the copy column entirely. It used to sit bottom-left,
   directly over the headline and buttons; now it lives bottom-right,
   over the artwork, and the slide reserves room so nothing can ever
   collide with it. It also sits on its own frosted pill so it reads
   as a control cluster on a photo, a pale panel or a dark one. */
/* Centred. It sat bottom-right to stay off the copy, but the slide
   already reserves a strip along the bottom for it, so the middle is
   both clear and where a hand reaches first. */
.hero-rail{
  position:absolute;left:50%;transform:translateX(-50%);bottom:20px;z-index:6;
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:var(--pill);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 8px 24px -10px rgba(9,40,26,.42), inset 0 0 0 1px rgba(255,255,255,.65);
}
.hero-nav{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#fff;color:var(--green-800);
  box-shadow:0 2px 6px rgba(9,40,26,.18);
  transition:background .2s,transform .2s var(--e),color .2s,box-shadow .2s;
}
.hero-nav:hover{
  background:var(--green-700);color:#fff;transform:scale(1.09);
  box-shadow:0 6px 16px -6px rgba(11,93,59,.7);
}
.hero-nav:active{transform:scale(.97);}
.hero-nav svg{width:14px;height:14px;}
.hero-nav.is-paused{background:var(--green-700);color:#fff;}

.hero-dots{display:flex;align-items:center;gap:6px;}
.hero-dot{
  width:22px;height:6px;border-radius:var(--pill);flex:none;
  background:rgba(9,40,26,.16);overflow:hidden;position:relative;
  transition:width .32s var(--e),background .25s;
}
.hero-dot:hover{background:rgba(9,40,26,.3);}
.hero-dot.on{width:46px;background:rgba(9,40,26,.14);}
.hero-dot-fill{
  position:absolute;inset:0;width:0;border-radius:var(--pill);
  background:var(--green-700);
}
.hero-dot:not(.on) .hero-dot-fill{background:rgba(11,93,59,.45);}

/* On the dark billboards the whole cluster inverts, so the controls
   keep their contrast instead of washing out into the green. */
.hero-stage[data-theme="emerald"] .hero-rail,
.hero-stage[data-theme="plum"] .hero-rail,
.hero-stage[data-theme="indigo"] .hero-rail{
  background:rgba(4,32,20,.5);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.2);
}
.hero-stage[data-theme="emerald"] .hero-dot,
.hero-stage[data-theme="plum"] .hero-dot,
.hero-stage[data-theme="indigo"] .hero-dot{background:rgba(255,255,255,.24);}
.hero-stage[data-theme="emerald"] .hero-dot:hover,
.hero-stage[data-theme="plum"] .hero-dot:hover,
.hero-stage[data-theme="indigo"] .hero-dot:hover{background:rgba(255,255,255,.4);}
.hero-stage[data-theme="emerald"] .hero-dot-fill,
.hero-stage[data-theme="plum"] .hero-dot-fill,
.hero-stage[data-theme="indigo"] .hero-dot-fill{background:var(--gold);}
.hero-stage[data-theme="emerald"] .hero-dot:not(.on) .hero-dot-fill,
.hero-stage[data-theme="plum"] .hero-dot:not(.on) .hero-dot-fill,
.hero-stage[data-theme="indigo"] .hero-dot:not(.on) .hero-dot-fill{background:rgba(200,161,90,.55);}
.hero-copy{position:relative;z-index:2;max-width:470px;}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;
  border-radius:var(--pill);background:#fff;color:var(--green-700);
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  box-shadow:var(--sh-1);margin-bottom:18px;
}
.hero-h1{
  font-family:var(--font-display);font-size:clamp(32px,4vw,52px);line-height:1.04;
  letter-spacing:-.035em;color:var(--green-900);margin-bottom:16px;
}
.hero-h1 em{font-style:normal;color:var(--green-600);}
.hero-p{font-size:16px;color:var(--ink-2);max-width:410px;margin-bottom:26px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
/* ---- the discount medallion ----
   104px with 26px figures was a sticker. At 140px with 44px figures it
   is the second thing you see after the headline, which is what a
   number like 30% is for. The motion lives in home.js, not here: a CSS
   keyframe is switched off outright by an OS-level reduce-animation
   setting, and this is the one element on the page whose whole job is
   to catch the eye. */
.hero-disc{
  position:absolute;right:40px;top:38px;z-index:3;
  width:140px;height:140px;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  color:#fff;
  background:
    radial-gradient(120% 110% at 30% 22%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(150deg, var(--green-600) 0%, var(--green-700) 46%, var(--green-900) 100%);
  box-shadow:
    0 22px 48px -16px rgba(9,40,26,.7),
    inset 0 0 0 2px rgba(200,161,90,.9),
    inset 0 0 0 6px rgba(255,255,255,.14),
    inset 0 2px 0 rgba(255,255,255,.35);
  overflow:hidden;
}
.hd-txt{position:relative;z-index:3;}
/* the ring that pushes outward lives outside the clip */
.hero-disc{overflow:visible;}
.hd-ring{
  position:absolute;inset:-2px;border-radius:50%;pointer-events:none;z-index:1;
  border:2px solid var(--gold);opacity:0;
}
.hero-disc b{display:block;font-size:44px;line-height:.94;font-family:var(--font-display);letter-spacing:-.03em;}
/* full strength: at 11px the size and tracking already separate this
   from the figure above it, and fading it was costing contrast the
   line could not spare */
.hero-disc .hd-txt span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:1;margin-top:5px;}
.hero-art{position:absolute;right:14px;bottom:0;width:46%;max-width:460px;z-index:1;}
.hero-art .ph{
  aspect-ratio:1/.9;border-radius:var(--r-xl) var(--r-xl) 0 0;background:rgba(255,255,255,.4);
  display:grid;place-items:center;font-size:76px;
}

.hero-side{display:flex;flex-direction:column;gap:18px;}
.hero-card{
  position:relative;overflow:hidden;flex:1;border-radius:var(--r-xl);
  padding:26px 24px;display:flex;flex-direction:column;justify-content:center;
  box-shadow:var(--sh-1);min-height:193px;
  transition:transform .3s var(--e),box-shadow .3s var(--e);
}
.hero-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3);}
.hero-card.a{background:linear-gradient(135deg,var(--green-800),var(--green-600));color:#fff;}
.hero-card.b{background:linear-gradient(135deg,var(--gold-200),#C79E52);color:var(--gold-900);}
/* ---- shine ----
   A single wide band of light crossing the card. It is masked by
   the card's own overflow, so it reads as a reflection travelling
   over glass rather than a shape sliding about. */
.hc-sheen{
  position:absolute;top:-30%;left:0;width:38%;height:160%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.28) 35%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.28) 65%,
    rgba(255,255,255,0) 100%);
  opacity:0;pointer-events:none;z-index:1;
  transform:translateX(-120%) skewX(-18deg);
}
/* on a light metal the sheen has to be near-white and generous, or it
   simply is not visible against what it is crossing */
.hero-card.b .hc-sheen{
  width:46%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,250,236,.46) 30%,
    rgba(255,255,255,.92) 50%,
    rgba(255,250,236,.46) 70%,
    rgba(255,255,255,0) 100%);
}
/* glints on a light card have to be dark, or they vanish */
.hero-card.b .hc-spark{filter:saturate(0) brightness(.42);}
/* and the live badge takes dark-on-light like the rest of the card */
/* the kicker rides at 75% opacity, which is comfortable on the dark
   card and a shade under AA on this one, so it gets its own value */
.hero-card.b .hc-kicker{opacity:.9;}
.hero-card.b .hc-live{background:rgba(51,36,5,.16);color:var(--gold-900);}
.hero-card.b .hc-live.is-live{background:var(--gold-900);color:#F6E7C8;}
/* a fixed gloss along the top edge, under the travelling sheen: the
   sheen says the surface is glass, this says which way the light is
   coming from. Without it the card reads flat between passes. */
.hero-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(168deg,
    rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 26%,
    rgba(255,255,255,0) 52%);
}

/* ---- sparkle ----
   Four-pointed glints, not round dots: a star shape reads as light
   catching an edge, a circle reads as dust on the screen. */
.hc-spark{
  position:absolute;width:12px;height:12px;pointer-events:none;z-index:2;opacity:0;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 62%),
    conic-gradient(from 0deg,
      rgba(255,255,255,0) 0deg, rgba(255,255,255,.9) 10deg, rgba(255,255,255,0) 20deg,
      rgba(255,255,255,0) 70deg, rgba(255,255,255,.9) 90deg, rgba(255,255,255,0) 110deg,
      rgba(255,255,255,0) 160deg, rgba(255,255,255,.9) 180deg, rgba(255,255,255,0) 200deg,
      rgba(255,255,255,0) 250deg, rgba(255,255,255,.9) 270deg, rgba(255,255,255,0) 290deg);
}

/* ---- the live badge ---- */
.hc-live{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  height:24px;padding:0 11px;border-radius:var(--pill);margin-bottom:14px;
  font-size:var(--t-2xs);font-weight:800;letter-spacing:.04em;
  background:rgba(255,255,255,.16);color:#fff;position:relative;z-index:3;
  font-variant-numeric:tabular-nums;
}
.hc-live.is-live{background:var(--gold);color:#3B2C10;}
.hc-live.is-shut{background:rgba(0,0,0,.14);}
.hc-pulse{
  width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
  box-shadow:0 0 0 0 currentColor;
}

.hero-card > *:not(.hc-sheen):not(.hc-spark){position:relative;z-index:3;}

.hc-kicker{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.75;margin-bottom:9px;}
.hc-title{font-family:var(--font-display);font-size:25px;line-height:1.1;letter-spacing:-.025em;margin-bottom:8px;}
.hc-sub{font-size:var(--t-xs);opacity:.9;line-height:1.55;margin-bottom:16px;}
.hc-link{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;}
.hc-link svg{width:14px;height:14px;transition:transform .25s var(--e);}
.hero-card:hover .hc-link svg{transform:translateX(4px);}

/* ---------- 7. TRUST STRIP ---------- */
.trust{margin-top:26px;border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-1);overflow:hidden;}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.trust-item{
  display:flex;align-items:center;gap:15px;padding:24px 26px;
  border-right:1px solid var(--line-2);position:relative;
  transition:background .3s var(--e);
}
.trust-item:last-child{border-right:0;}
.trust-item::after{
  content:"";position:absolute;left:26px;right:26px;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--green-600),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e);
}
.trust-item:hover{background:var(--green-50);}
.trust-item:hover::after{transform:scaleX(1);}

.trust-ico{
  width:52px;height:52px;border-radius:16px;flex:none;
  background:linear-gradient(145deg,var(--green-100),#DCEDE3);
  color:var(--green-700);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(11,93,59,.07);
  transition:transform .4s var(--e-out),box-shadow .35s var(--e),background .35s var(--e);
}
.trust-item:hover .trust-ico{
  transform:translateY(-3px);
  background:linear-gradient(145deg,var(--green-600),var(--green-800));
  color:#fff;
  box-shadow:0 10px 22px -10px rgba(11,93,59,.75);
}
.trust-ico svg{width:30px;height:30px;overflow:visible;stroke-width:1.55;}
/* SVG children rotate about the viewBox origin unless told otherwise,
   which sends a swaying leaf off across the icon. fill-box puts the
   pivot inside the shape itself. */
.trust-ico .t-leafA,.trust-ico .t-leafB{transform-box:fill-box;transform-origin:8% 92%;}
.trust-ico .t-seal{transform-box:fill-box;transform-origin:center;}
.trust-ico .t-drop,.trust-ico .t-shackle,.trust-ico .t-arrow{transform-box:fill-box;transform-origin:center;}

/* ---- supplied artwork ----
   These arrive as flat pictures on white, not as line icons, so the
   tile turns white to match rather than showing a pale square behind a
   white one. The picture is FITTED, never filled: one of them is a wide
   banner and stretching it into a square would be the first thing a
   shopper noticed. The dark hover fill would swallow a white-backed
   image, so image tiles lift on a green ring instead. */
/* ---- the supplied animations ----
   These are flat illustrations on a white ground, so the tile turns
   white to match rather than showing a pale green square behind a
   white one. Fitted, never filled: they are not all the same shape. */
.trust-ico.is-vid{
  width:62px;height:62px;background:#fff;padding:3px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);
}
.trust-ico.is-vid svg{display:none;}
.trust-vid,.ico-vid{
  width:100%;height:100%;object-fit:contain;display:block;border-radius:13px;
  background:#fff;
}
/* the dark hover fill would swallow a white-backed film */
.trust-item:hover .trust-ico.is-vid{
  background:#fff;
  box-shadow:0 10px 22px -10px rgba(11,93,59,.5), inset 0 0 0 1px var(--green-200);
}
.trust-ico svg > *{transition:transform .45s var(--e-out);transform-origin:center;}

/* Each icon reacts the way the thing it depicts would.
   Motion that describes the claim, rather than motion for its own sake. */
[data-ico="fresh"]:hover .trust-ico svg > *:nth-child(1),
[data-ico="fresh"]:hover .trust-ico svg > *:nth-child(2){transform:rotate(-7deg);}
[data-ico="fresh"]:hover .trust-ico svg > *:nth-child(3),
[data-ico="fresh"]:hover .trust-ico svg > *:nth-child(4){transform:rotate(-7deg) translateX(.6px);}

/* the tick lands */
[data-ico="cert"]:hover .trust-ico svg > *:nth-child(2){transform:scale(1.18);}

/* the padlock clicks shut against the card */
[data-ico="card"]:hover .trust-ico svg > *:nth-child(4){transform:translateY(1.4px);}

/* the parcel's arrow travels back out */
[data-ico="return"]:hover .trust-ico svg > *:nth-child(3),
[data-ico="return"]:hover .trust-ico svg > *:nth-child(4){transform:translateX(-2.2px);}

.trust-txt{min-width:0;}
.trust-t{display:block;font-size:var(--t-sm);font-weight:700;letter-spacing:-.005em;margin-bottom:2px;}
.trust-s{display:block;font-size:var(--t-sm);color:var(--ink-2);line-height:1.55;}

/* stacked label pairs that are rendered as sibling spans */
.mega-name,.mega-sub,.rev-name,.rev-loc,.mini-n,.mini-q,
.acct-name,.acct-mail,.opt-t,.opt-s,.cat-name,.cat-count,
.sp-name,.sp-meta,.slot b,.slot span,.stat b,.stat span{display:block;}

/* ---------- 8. SECTIONS ---------- */
.sec{padding:52px 0;}
.sec-soft{background:var(--bg-soft);}

/* ---- 8b. the watercolour wash ----
   A soft green watercolour ground for the departments band. Painted
   rather than photographed: the reference was a watermarked stock
   image, and a handful of gradients reproduce the same wet-paper
   bleed without putting somebody else's file in the repo — and
   without the 300KB.

   The build is three layers, bottom to top:
     · the pale paper colour beneath everything
     · six blooms of green pooling at the corners and edges, with a
       grey-green cloud low and right, the way the reference sits
     · a grain of fractal noise multiplied over the lot, which is what
       stops it reading as a plain CSS gradient

   The centre is deliberately left palest — that is where the heading,
   the standfirst and the cards land, and every one of them was
   measured against the darkest pixel the wash puts underneath it. */
.sec-wash{
  position:relative;
  isolation:isolate;
  background-color:#EFF7DF;
  background-image:
    radial-gradient(55% 60% at 3% 0%,    rgba(139,171,95,.50) 0%, rgba(139,171,95,0) 66%),
    radial-gradient(42% 46% at 20% 6%,   rgba(178,206,133,.55) 0%, rgba(178,206,133,0) 70%),
    radial-gradient(50% 55% at 99% 2%,   rgba(170,201,124,.52) 0%, rgba(170,201,124,0) 68%),
    radial-gradient(46% 50% at 1% 96%,   rgba(146,175,110,.50) 0%, rgba(146,175,110,0) 68%),
    radial-gradient(52% 46% at 97% 92%,  rgba(159,190,118,.48) 0%, rgba(159,190,118,0) 70%),
    radial-gradient(40% 34% at 66% 99%,  rgba(176,189,158,.44) 0%, rgba(176,189,158,0) 72%),
    radial-gradient(66% 62% at 50% 44%,  rgba(247,252,233,.92) 0%, rgba(247,252,233,0) 72%);
  background-repeat:no-repeat;
}
/* the paper grain, shared by both washes. multiply, so it darkens the
   blooms without fogging the pale middle. */
.sec-wash::before,.sec-citrus::before,.sec-deep::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size:760px 760px;
  mix-blend-mode:multiply;
  opacity:.09;
}
/* green-600 is the kicker everywhere else, but on the wash it lands on
   a green bloom and falls to 3.18:1 — under AA for 11px type. Dropped
   two steps darker, which measures 5.2:1 against the darkest pixel the
   wash can put anywhere behind it. */
.sec-wash .sec-kicker{color:#094A2F;}

/* ---- 8c. the citrus wash ----
   Wet yellow bleeding into wet green on watercolour paper, for the
   category band. Same build as the departments wash and the same
   reason for painting it rather than shipping a file: greens pooling
   left and low, yellows flooding the top and right, and the two
   meeting in a pale wash through the middle where the carousel sits.

   Louder than the departments wash on purpose — that band is a
   heading over five white cards, this one is a heading over a row of
   round photographs with nothing else holding the space. */
.sec-citrus{
  position:relative;
  isolation:isolate;
  background-color:#F1EEA6;
  background-image:
    radial-gradient(48% 56% at 4% 34%,   rgba(163,201,113,.62) 0%, rgba(163,201,113,0) 66%),
    radial-gradient(42% 40% at 16% 4%,   rgba(186,214,142,.58) 0%, rgba(186,214,142,0) 68%),
    radial-gradient(44% 46% at 8% 98%,   rgba(155,196,105,.55) 0%, rgba(155,196,105,0) 68%),
    radial-gradient(52% 54% at 98% 12%,  rgba(242,228,94,.68) 0%, rgba(242,228,94,0) 66%),
    radial-gradient(46% 50% at 92% 96%,  rgba(239,224,101,.60) 0%, rgba(239,224,101,0) 68%),
    radial-gradient(38% 34% at 56% 2%,   rgba(244,235,126,.52) 0%, rgba(244,235,126,0) 70%),
    radial-gradient(60% 54% at 46% 52%,  rgba(250,248,222,.80) 0%, rgba(250,248,222,0) 74%);
  background-repeat:no-repeat;
}
/* a touch more tooth than the departments band — this one is meant to
   look like paper that has actually been painted on */
.sec-citrus::before{opacity:.12;}
/* green-600 measures short against the yellow. Same two-step drop as
   the other wash, so the two bands read as a pair. */
.sec-citrus .sec-kicker{color:#094A2F;}
/* --muted lands at 4.38:1 on the pale middle of this wash — a hair
   under AA for 14px. Darkened just for this band; still reads as the
   quiet line under the name. Measured 7.0:1 there and 5.5:1 against
   the darkest pixel the wash can reach. */
.sec-citrus .cw-count{color:#3E4C45;}

/* ---- 8d. the deep band ----
   Wet dark green with light pooling in the middle: mossy at the edges,
   olive and almost yellow where the light lands, with cool teal
   bleeding through low left and mid right. Painted like the other two
   washes and for the same reason.

   Built dark-first: a near-black green ground, blooms of green and
   olive lifting the middle, then a vignette laid back over the top to
   pull the corners down — the vignette is listed first because
   background-image paints the first layer nearest the viewer.

   Everything in the section that was dark ink has to invert, which is
   what the block underneath does. The product cards are opaque white
   and need nothing. */
.sec-deep{
  position:relative;
  isolation:isolate;
  background-color:#16351A;
  background-image:
    radial-gradient(86% 76% at 50% 46%,  rgba(7,22,10,0) 40%,  rgba(7,22,10,.58) 100%),
    radial-gradient(30% 26% at 44% 40%,  rgba(174,196,88,.52) 0%, rgba(174,196,88,0) 70%),
    radial-gradient(48% 44% at 47% 44%,  rgba(140,168,62,.55) 0%, rgba(140,168,62,0) 72%),
    radial-gradient(40% 44% at 16% 74%,  rgba(42,107,98,.46) 0%,  rgba(42,107,98,0) 70%),
    radial-gradient(34% 40% at 84% 58%,  rgba(48,118,106,.42) 0%, rgba(48,118,106,0) 70%),
    radial-gradient(56% 54% at 10% 14%,  rgba(60,136,62,.76) 0%,  rgba(60,136,62,0) 72%),
    radial-gradient(50% 48% at 88% 90%,  rgba(52,122,54,.58) 0%,  rgba(52,122,54,0) 70%),
    radial-gradient(38% 32% at 64% 8%,   rgba(48,120,106,.38) 0%, rgba(48,120,106,0) 72%),
    radial-gradient(48% 44% at 92% 8%,   rgba(46,112,48,.70) 0%,  rgba(46,112,48,0) 72%);
  background-repeat:no-repeat;
}
/* overlay, not multiply: on a dark ground multiplying grain only
   muddies it, while overlay lets the noise lift the lit middle and
   deepen the corners at the same time. */
.sec-deep::before{mix-blend-mode:overlay;opacity:.30;}

/* the section inverts */
.sec-deep .sec-kicker{color:var(--gold-200);}
.sec-deep .sec-title{color:#fff;}
.sec-deep .sec-sub{color:rgba(255,255,255,.88);}
.sec-deep .sec-link{color:var(--gold-200);}
.sec-deep .sec-link:hover{color:#fff;}
/* the white cards need a rim of their own now that the ground is dark,
   otherwise they read as holes punched in it */
.sec-deep .card{border-color:rgba(255,255,255,.16);box-shadow:0 14px 30px -16px rgba(0,0,0,.6);}
.sec-deep .card:hover{border-color:var(--gold);}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;}
.sec-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-600);font-weight:700;margin-bottom:8px;}
.sec-title{font-family:var(--font-display);font-size:clamp(24px,2.6vw,33px);letter-spacing:-.03em;color:var(--green-900);}
.sec-sub{font-size:var(--t-base);color:var(--ink-2);line-height:1.6;margin-top:8px;max-width:580px;}
.sec-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:650;color:var(--green-700);flex:none;padding-bottom:4px;}
.sec-link svg{width:15px;height:15px;transition:transform .25s var(--e);}
.sec-link:hover svg{transform:translateX(4px);}

/* ---------- 9a. DEPARTMENT CARDS ---------- */
.dept-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.dept-card{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);padding:24px 22px 20px;display:flex;flex-direction:column;
  transition:transform .32s var(--e),box-shadow .32s var(--e),border-color .32s;
}
.dept-card::after{
  content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;
  background:var(--green-50);transition:transform .45s var(--e);
}
.dept-card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--green-200);}
.dept-card:hover::after{transform:scale(1.35);}
/* ---- the emoji, as a badge rather than a stray glyph ----
   At 34px loose on the card it read as a bullet point. Sat in its own
   tile at 44px it reads as the department's mark, and it is still the
   thing that identifies the card when the photograph is only mood. */
.dept-emoji{
  position:relative;z-index:2;font-size:40px;line-height:1;margin-bottom:16px;
  width:88px;height:88px;flex:none;border-radius:26px;overflow:hidden;
  display:grid;place-items:center;color:var(--green-700);
  /* a jewel rather than a swatch: light pooling top-left, the house
     green settling into the bottom corner, and a gold hairline round
     the whole thing */
  background:
    radial-gradient(120% 110% at 26% 18%, #fff 0%, #FBFDFB 42%, rgba(255,255,255,0) 78%),
    linear-gradient(150deg,#FFFFFF 0%,#EFF7F2 58%,#DFEFE6 100%);
  box-shadow:
    0 8px 20px -9px rgba(9,40,26,.34),
    inset 0 0 0 1px rgba(200,161,90,.42),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .45s var(--e-out),box-shadow .35s var(--e);
}
.dept-emoji svg{width:52px;height:52px;position:relative;z-index:2;overflow:visible;stroke-width:1.55;}
/* the gold underlayer. Sitting beneath the green strokes rather than
   beside them is what keeps both colours legible this small. */
/* ---- polish on the gold underlayer ----
   A flat gold silhouette under a green outline is a diagram. Giving the
   fill its own light — brighter at the top-left, deeper at the bottom —
   is what makes these read as objects rather than stencils, and it costs
   one gradient shared by all twenty-nine marks. */
.i-fill{fill:url(#omniGold);stroke:none;opacity:.95;
  transform-origin:center;transition:transform .45s var(--e-out),opacity .3s;}
.dept-card:hover .dept-emoji .i-fill,
.cat-tile:hover .cat-img .i-fill{transform:scale(1.08);opacity:1;}
.dept-card:hover .dept-emoji{
  transform:translateY(-5px) scale(1.05);
  box-shadow:
    0 18px 30px -12px rgba(9,40,26,.46),
    inset 0 0 0 1px rgba(200,161,90,.78),
    inset 0 1px 0 rgba(255,255,255,.95);
}
/* a slow band of light crossing the badge, driven from JS so an
   OS-level "reduce animation" setting cannot silently kill it */
.de-sheen{
  position:absolute;top:-40%;left:0;width:52%;height:180%;z-index:1;
  pointer-events:none;opacity:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,252,240,.55) 42%,
    rgba(255,255,255,.95) 52%, rgba(255,252,240,.55) 62%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-140%) skewX(-16deg);
}

/* ---- the photograph ----
   Full width across the top of the card, with the badge overlapping its
   lower edge so the two read as one object rather than a picture with an
   icon parked under it. The card already clips to its own radius, so the
   image needs no rounding of its own. */
.dept-card.has-photo{padding-top:0;}
.dept-photo{
  display:block;position:relative;z-index:1;
  margin:0 -22px 0;height:144px;overflow:hidden;
  background:var(--bg-soft);
}
.dept-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--e-out);
}
.dept-card:hover .dept-photo img{transform:scale(1.06);}
/* a wash at the foot of the picture so the badge always has something
   settled to sit on, whatever the photograph happens to be doing there */
.dept-photo::after{
  content:;position:absolute;inset:auto 0 0 0;height:56%;
  background:linear-gradient(180deg,rgba(248,247,241,0),rgba(248,247,241,.86) 78%,#fff 100%);
}
.dept-card.has-photo .dept-emoji{
  margin-top:-52px;
  box-shadow:0 0 0 5px #fff, 0 10px 22px -10px rgba(9,40,26,.40), inset 0 0 0 1px rgba(11,93,59,.09);
}
.dept-card.has-photo:hover .dept-emoji{
  box-shadow:0 0 0 5px #fff, 0 16px 28px -12px rgba(9,40,26,.5), inset 0 0 0 1px rgba(11,93,59,.14);
}
/* the decorative blob is redundant once there is a real picture */
.dept-card.has-photo::after{display:none;}
.dept-name{position:relative;z-index:1;font-family:var(--font-display);font-size:19px;letter-spacing:-.025em;color:var(--green-900);margin-bottom:7px;}
/* This was 12.5px in the muted grey — the size reserved for timestamps
   and legal lines, on a sentence that is actually selling the
   department. Up to 15px in the body ink: the same words, roughly a
   third more area and nearly twice the contrast. */
.dept-blurb{position:relative;z-index:1;font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;margin-bottom:16px;}
.dept-foot{position:relative;z-index:1;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.dept-count{font-size:var(--t-2xs);font-weight:650;color:var(--muted);}
.dept-go{
  width:32px;height:32px;border-radius:50%;background:var(--green-100);color:var(--green-700);
  display:grid;place-items:center;transition:background .22s,color .22s,transform .22s var(--e);
}
.dept-go svg{width:14px;height:14px;}
.dept-card:hover .dept-go{background:var(--green-700);color:#fff;transform:translateX(3px);}

/* ---------- 9. CATEGORY TILES ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;}

/* ---------- CATEGORY WHEEL ----------
   A focus carousel rather than a grid: the middle category is full
   size and full colour, its neighbours shrink and fade back, and the
   row slides one step at a time. Items are absolutely positioned and
   moved by transform, because a scrolling row cannot give the centre
   a different size from everything else.

   Nothing here animates in CSS. The movement is driven from JS with
   the Web Animations API, since the reduced-motion block at the foot
   of this file flattens transition-duration to almost nothing. */
.catwheel{
  position:relative;height:296px;
  /* the row is far wider than the page; without this the items waiting
     off to the sides push the document open and give every page a
     horizontal scrollbar */
  overflow:hidden;
}
/* The edge fade belongs on the track, not on the wheel. A mask applies
   to every descendant, and the arrows sit at left:4px / right:4px --
   inside the transparent 13% -- so the wheel-level mask was rubbing
   them out almost completely. Masking the track alone fades the items
   and leaves the controls solid. */
.cw-track{
  position:absolute;inset:0;overflow:visible;
  outline:none;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
}
.cw-track:focus-visible{outline:2px solid var(--green-600);outline-offset:8px;border-radius:var(--r-lg);}

.cw-item{
  position:absolute;left:50%;top:6px;width:190px;margin-left:-95px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;cursor:pointer;will-change:transform,opacity;
  transform-origin:50% 42%;
}
.cw-disc{
  position:relative;width:168px;height:168px;border-radius:50%;flex:none;
  display:grid;place-items:center;overflow:hidden;color:var(--green-700);
  background:
    radial-gradient(120% 110% at 28% 20%, #fff 0%, #FBFDFB 44%, rgba(255,255,255,0) 78%),
    linear-gradient(150deg,#FFFFFF 0%,#EFF7F2 58%,#DFEFE6 100%);
  box-shadow:
    0 10px 26px -12px rgba(9,40,26,.34),
    inset 0 0 0 1px rgba(200,161,90,.38);
}
.cw-disc.has-photo{
  background:var(--bg-soft);
  box-shadow:
    0 10px 26px -12px rgba(9,40,26,.34),
    inset 0 0 0 2px rgba(200,161,90,.8),
    inset 0 0 0 3px rgba(255,255,255,.9),
    inset 0 0 26px -8px rgba(9,40,26,.4);
}
.cw-disc img{width:100%;height:100%;object-fit:cover;display:block;}
.cw-disc svg{width:78px;height:78px;overflow:visible;stroke-width:1.5;}
.cw-disc.has-photo svg{display:none;}

.cw-name{font-family:var(--font-display);font-size:19px;line-height:1.2;
  letter-spacing:-.02em;color:var(--green-900);}
.cw-count{font-size:var(--t-xs);color:var(--muted);margin-top:-8px;}

/* the middle one is the one you can act on, so it says so */
.cw-item.is-active .cw-disc{
  box-shadow:
    0 22px 40px -16px rgba(9,40,26,.5),
    inset 0 0 0 3px var(--gold),
    inset 0 0 0 4px rgba(255,255,255,.9),
    inset 0 0 26px -8px rgba(9,40,26,.4);
}
.cw-item.is-active .cw-name{color:var(--green-700);}

/* ---- the wheel's arrows ----
   Were a near-white disc with a thin green chevron, which had almost
   no edge against a pale ground and none at all against the wash.
   Inverted: a solid dark green coin with a white chevron and a gold
   rim, which holds up on anything the section is ever painted.

   They also beckon. A ring pushes out of each one and fades, and the
   chevron leans the way it would take you -- left side and right side
   out of phase, so the pair reads as "there is more, both ways"
   rather than as two things blinking at once. Driven from home.js on
   the Web Animations API; a CSS keyframe would be switched off
   outright by the reduce-motion block at the foot of this file. */
.cw-nav{
  position:absolute;top:74px;z-index:30;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  border:0;color:#fff;cursor:pointer;
  background:
    radial-gradient(120% 110% at 32% 22%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(150deg, var(--green-600) 0%, var(--green-800) 100%);
  box-shadow:
    0 10px 26px -8px rgba(9,40,26,.62),
    inset 0 0 0 1.5px rgba(240,220,168,.85),
    inset 0 0 0 4px rgba(255,255,255,.16);
  transition:transform .22s var(--e),box-shadow .22s var(--e);
}
/* the ring that pushes outward. sits outside the coin, so it needs no
   clipping, and under the chevron. */
.cw-halo{
  position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
  border:2px solid var(--gold);opacity:0;
}
.cw-chev{
  position:relative;display:block;width:12px;height:12px;
  border-top:2.4px solid currentColor;border-right:2.4px solid currentColor;
  border-radius:1.5px;
}
.cw-prev{left:6px;}
.cw-prev .cw-chev{transform:rotate(-135deg) translate(-2px,-2px);}
.cw-next{right:6px;}
.cw-next .cw-chev{transform:rotate(45deg) translate(-2px,-2px);}
.cw-nav:hover,.cw-nav:focus-visible{
  transform:scale(1.1);
  box-shadow:
    0 16px 32px -10px rgba(9,40,26,.72),
    inset 0 0 0 2px var(--gold),
    inset 0 0 0 5px rgba(255,255,255,.22);
}
.cw-nav:focus-visible{outline:2px solid var(--green-900);outline-offset:3px;}
.cw-nav:active{transform:scale(.94);}

.cw-dots{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  display:flex;justify-content:center;gap:5px;flex-wrap:wrap;padding:0 60px;
}
.cw-dot{width:5px;height:5px;border-radius:50%;background:rgba(11,93,59,.22);}
.cw-dot.on{background:var(--gold);transform:scale(1.5);}

@media (max-width:640px){
  .catwheel{height:250px;}
  .cw-item{width:140px;margin-left:-70px;}
  .cw-disc{width:128px;height:128px;}
  .cw-disc svg{width:60px;height:60px;}
  .cw-name{font-size:16px;}
  .cw-nav{width:46px;height:46px;top:50px;}
  .cw-dots{padding:0 46px;}
}
.cat-tile{
  position:relative;overflow:hidden;isolation:isolate;
  /* a light green ground rather than white, so the tile reads as a
     surface of its own instead of a hole cut in the page */
  background:linear-gradient(158deg,#FFFFFF 0%,#F5FBF7 44%,#E7F4EC 100%);
  border:2px solid rgba(11,93,59,.26);border-radius:var(--r-lg);
  padding:16px 10px 14px;text-align:center;
  box-shadow:0 1px 2px rgba(9,40,26,.05);
  transition:transform .32s var(--e),box-shadow .32s var(--e),
             border-color .32s var(--e),background .32s var(--e);
}
/* a pool of green light opening out from under the disc */
.cat-tile::before{
  content:"";position:absolute;left:50%;top:8px;width:150px;height:150px;z-index:-1;
  transform:translateX(-50%) scale(.45);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(11,93,59,.18) 0%, rgba(11,93,59,0) 70%);
  opacity:0;transition:transform .55s var(--e-out),opacity .4s var(--e);
}
/* and a gold rule that draws itself along the foot */
.cat-tile::after{
  content:"";position:absolute;left:13px;right:13px;bottom:0;height:2.5px;border-radius:3px;
  background:linear-gradient(90deg,var(--green-600),var(--gold));
  transform:scaleX(0);transform-origin:left;pointer-events:none;
  transition:transform .45s var(--e);
}
.cat-tile:hover{
  transform:translateY(-6px);
  border-color:var(--green-600);
  background:linear-gradient(158deg,#FFFFFF 0%,#EFF8F3 42%,#DCEFE4 100%);
  box-shadow:0 18px 32px -16px rgba(11,93,59,.48), 0 0 0 3px rgba(11,93,59,.07);
}
.cat-tile:hover::before{opacity:1;transform:translateX(-50%) scale(1.18);}
.cat-tile:hover::after{transform:scaleX(1);}
.cat-tile:hover .cat-name{color:var(--green-700);}
.cat-tile:focus-visible{outline:2px solid var(--green-600);outline-offset:3px;}
/* the same jewel as the department badge, turned round: light pooling
   top-left, a gold hairline, and the mark sitting in the middle of it */
.cat-img{
  position:relative;width:84px;height:84px;margin:0 auto 13px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;font-size:31px;
  color:var(--green-700);
  background:
    radial-gradient(120% 110% at 28% 20%, #fff 0%, #FBFDFB 44%, rgba(255,255,255,0) 78%),
    linear-gradient(150deg,#FFFFFF 0%,#EFF7F2 58%,#DFEFE6 100%);
  box-shadow:
    0 5px 14px -7px rgba(9,40,26,.28),
    inset 0 0 0 1px rgba(200,161,90,.38),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .4s var(--e-out),box-shadow .32s var(--e);
}
/* 48 of 84, so the mark owns the disc instead of floating in it. The
   heavier stroke is what stops a line drawing looking thin and unfinished
   once it is this size. */
.cat-img svg{width:48px;height:48px;overflow:visible;stroke-width:1.55;}
.cat-img.has-photo svg{display:none;}
.cat-tile:hover .cat-img{
  transform:scale(1.06);
  box-shadow:
    0 12px 22px -10px rgba(9,40,26,.4),
    inset 0 0 0 1px rgba(200,161,90,.72),
    inset 0 1px 0 rgba(255,255,255,.95);
}
/* A photograph fills the disc edge to edge; the gold rim stays on top
   of it as a hairline, and a whisper of a shadow inside the edge stops
   a pale photo from bleeding into the pale card behind it. */
.cat-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--e-out);}
.cat-tile:hover .cat-img img{transform:scale(1.09);}
.cat-img.has-photo{
  background:var(--bg-soft);
  box-shadow:
    0 5px 14px -7px rgba(9,40,26,.3),
    inset 0 0 0 2px rgba(200,161,90,.85),
    inset 0 0 0 3px rgba(255,255,255,.9),
    inset 0 0 18px -6px rgba(9,40,26,.35);
}
.cat-tile:hover .cat-img.has-photo{
  box-shadow:
    0 12px 22px -10px rgba(9,40,26,.42),
    inset 0 0 0 2px rgba(200,161,90,1),
    inset 0 0 0 3px rgba(255,255,255,.95),
    inset 0 0 18px -6px rgba(9,40,26,.4);
}
.cat-name{font-size:var(--t-xs);font-weight:600;line-height:1.35;transition:color .25s var(--e);}
.cat-count{font-size:var(--t-2xs);color:var(--muted);margin-top:3px;}

/* ---------- 10. PROMO BANNERS ---------- */
.promo-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;}
.promo{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:34px 36px;min-height:212px;display:flex;flex-direction:column;justify-content:center;
}
.promo.dark{background:linear-gradient(105deg,var(--green-900) 0%,var(--green-700) 100%);color:#fff;}
.promo.light{background:linear-gradient(135deg,var(--gold-100),var(--gold-300));color:var(--gold-900);}
/* 72% opacity is a comfortable hush on the dark card and a shade under
   AA on gold, so the pale card runs its kicker a little louder */
.promo.light .promo-kicker{opacity:.86;}
.promo-kicker{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;opacity:.72;margin-bottom:10px;}
.promo-title{font-family:var(--font-display);font-size:clamp(23px,2.4vw,32px);line-height:1.08;letter-spacing:-.03em;margin-bottom:10px;}
.promo-title span{color:var(--gold);}
.promo-sub{font-size:var(--t-sm);opacity:.9;line-height:1.6;margin-bottom:20px;max-width:340px;}
.promo-disc{
  position:absolute;right:34px;top:50%;transform:translateY(-50%);
  width:96px;height:96px;border-radius:50%;background:var(--gold);color:#3B2C10;
  display:grid;place-items:center;text-align:center;box-shadow:var(--sh-3);
}
.promo-disc b{display:block;font-family:var(--font-display);font-size:24px;line-height:1;}
.promo-disc span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;}

/* ---------- 11. PRODUCT CARD ---------- */
.prod-rail{position:relative;}
.prod-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.prod-grid.g5{grid-template-columns:repeat(5,1fr);}
.prod-grid.g4{grid-template-columns:repeat(4,1fr);}

.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:12px;display:flex;flex-direction:column;
  transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--green-200);}
.card-media{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-soft);
  aspect-ratio:1/1;display:grid;place-items:center;margin-bottom:12px;
}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e);}
.card:hover .card-media img{transform:scale(1.06);}
.card-media .ph{font-size:40px;opacity:.4;}
.badge{
  position:absolute;top:9px;left:9px;height:22px;padding:0 9px;border-radius:var(--pill);
  font-size:10.5px;font-weight:800;letter-spacing:.03em;display:inline-flex;align-items:center;
  background:var(--sale);color:#fff;z-index:2;
}
.badge.new{background:var(--green-600);}
.badge.gold{background:var(--gold);color:#3B2C10;}
.badge.oos{background:#6B7A73;}
.wish{
  position:absolute;top:8px;right:8px;width:31px;height:31px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;z-index:2;
  box-shadow:var(--sh-1);opacity:0;transform:translateY(-4px);
  transition:opacity .25s,transform .25s var(--e);
}
.card:hover .wish,.wish.on{opacity:1;transform:none;}
.wish svg{width:15px;height:15px;color:var(--muted);}
.wish.on svg{color:var(--sale);fill:var(--sale);}

.card-cat{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:650;margin-bottom:5px;}
/* two clamped lines at 15px need 41px, not the 37px that fitted 13.5 */
.card-name{font-size:var(--t-sm);font-weight:600;line-height:1.35;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:41px;}
.card-unit{font-size:12px;color:var(--muted);margin-bottom:9px;}
.card-rate{display:flex;align-items:center;gap:5px;margin-bottom:9px;font-size:11.5px;color:var(--muted);}
.stars{display:inline-flex;gap:1px;color:var(--gold);}
.stars svg{width:11px;height:11px;}
.card-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
.price{font-size:17px;font-weight:800;color:var(--green-800);letter-spacing:-.02em;line-height:1.15;}
.price-was{display:block;font-size:12px;font-weight:500;color:var(--muted);text-decoration:line-through;}
.add-btn{
  width:38px;height:38px;border-radius:12px;flex:none;
  background:var(--green-100);color:var(--green-700);display:grid;place-items:center;
  transition:background .2s,color .2s,transform .2s var(--e);
}
.add-btn:hover{background:var(--green-700);color:#fff;transform:scale(1.06);}
.add-btn svg{width:17px;height:17px;}

.qty{display:inline-flex;align-items:center;height:38px;border-radius:12px;background:var(--green-700);color:#fff;overflow:hidden;flex:none;}
.qty button{width:32px;height:100%;display:grid;place-items:center;color:inherit;transition:background .15s;font-size:16px;line-height:1;}
.qty button:hover{background:rgba(255,255,255,.16);}
.qty span{min-width:26px;text-align:center;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.qty.lite{background:#fff;color:var(--ink);border:1px solid var(--line);}
.qty.lite button:hover{background:var(--line-2);}
.qty.lg{height:48px;border-radius:14px;}
.qty.lg button{width:44px;font-size:19px;}
.qty.lg span{min-width:40px;font-size:15px;}

/* The arrows used to sit 56px above the rail, which is exactly where the
   section head's right-hand side is — on Deal of the Day that is the
   countdown, so they landed on top of the seconds. They now ride the
   edges of the rail itself, which is where a carousel's controls belong
   anyway, and the head is left alone. */
.rail-nav{display:contents;}
.rail-btn{
  position:absolute;top:calc(50% - 26px);z-index:4;
  width:46px;height:46px;border-radius:50%;
  border:1.5px solid rgba(11,93,59,.18);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 22px -10px rgba(9,40,26,.45);
  display:grid;place-items:center;color:var(--green-800);
  transition:background .2s,border-color .2s,color .2s,opacity .25s,transform .25s var(--e);
}
[data-rail-prev]{left:-14px;}
[data-rail-next]{right:-14px;}
.rail-btn:hover{background:var(--green-700);border-color:var(--green-700);color:#fff;transform:scale(1.07);}
/* faded and unclickable at the ends of the track, so the control tells
   you whether there is anything left to see */
.rail-btn[disabled]{opacity:0;pointer-events:none;}
.rail-btn svg{width:17px;height:17px;}
.rail-scroll{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;}
.rail-scroll::-webkit-scrollbar{display:none;}
.rail-scroll>*{scroll-snap-align:start;flex:0 0 clamp(178px,19%,214px);}

.countdown{display:inline-flex;align-items:center;gap:6px;}
.cd-box{min-width:40px;padding:6px 7px;border-radius:9px;background:var(--green-900);color:#fff;text-align:center;}
.cd-box b{display:block;font-size:15px;line-height:1;font-variant-numeric:tabular-nums;}
.cd-box.cd-secs{background:var(--green-700);}
.cd-box span{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;}
.cd-sep{color:var(--muted);font-weight:700;}

/* ---------- 12. WHY / FEATURES ---------- */
/* ---------- SHADER BAND ----------
   A mesh gradient: five very large, very soft colour blobs drifting over
   a deep emerald ground, with film grain on top. The grain is the part
   that sells it — without it the blobs read as a blurry photo, and with
   it they read as a rendered surface.

   The blobs are moved from JS with the Web Animations API. CSS keyframes
   would be switched off outright by an OS-level "reduce animation"
   setting, which is exactly the machine this site is built on. */
.sec-shader{position:relative;overflow:hidden;isolation:isolate;background:#8CA04C;}
.sec-shader > .wrap{position:relative;z-index:2;}
.shader{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.sh-blob{
  position:absolute;border-radius:50%;
  filter:blur(78px);opacity:.85;will-change:transform;
}
/* Recoloured from deep emerald to moss and olive. Same five blobs and
   the same drift; only the paint changed. b3 is the pale one -- it is
   the light streak that runs across the reference, and because it
   drifts with the rest the streak never sits still. */
.b1{width:60%;height:150%;left:-12%;top:-30%;
    background:radial-gradient(circle,#B0C268 0%,rgba(176,194,104,0) 70%);}
.b2{width:55%;height:140%;left:22%;top:-24%;
    background:radial-gradient(circle,#75893B 0%,rgba(117,137,59,0) 70%);}
.b3{width:48%;height:130%;left:56%;top:-16%;
    background:radial-gradient(circle,#D2DC9E 0%,rgba(210,220,158,0) 70%);}
.b4{width:42%;height:120%;left:74%;top:-8%;
    background:radial-gradient(circle,#DFE2B0 0%,rgba(223,226,176,0) 68%);opacity:.5;}
.b5{width:52%;height:120%;left:8%;top:26%;
    background:radial-gradient(circle,#5E7130 0%,rgba(94,113,48,0) 72%);}

/* fine speckle, generated rather than downloaded */
.sh-grain{
  position:absolute;inset:-40%;opacity:.20;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
/* A pale wash down the top of the band. It does two jobs: it joins the
   band to the page instead of butting against it, and it gives the
   heading a light ground to sit on.

   That second job is the load-bearing one. The old ground was near
   black, so the head was white on it. Moss is a mid tone -- white
   measures about 2.6:1 on it, which fails even the 3:1 allowed for
   large text -- so the head has to be dark ink instead, and dark ink
   on mid moss is only about 3.4:1. Lifting the top of the band settles
   both: the same cream that runs through the reference, and every
   line of the head clear of AA on it. */
.sec-shader::after{
  content:"";position:absolute;left:0;right:0;top:0;height:310px;z-index:1;
  background:linear-gradient(180deg,
    rgba(236,241,208,.90) 0%, rgba(236,241,208,.82) 34%,
    rgba(236,241,208,.62) 66%, rgba(236,241,208,0) 100%);
  pointer-events:none;
}

/* the type turns back over for the light ground */
.sec-shader .sec-kicker{color:#0B3D22;}
.sec-shader .sec-title{color:var(--green-900);}
.sec-shader .sec-sub{color:var(--ink-2);}

.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
/* glass, not white: a solid card would punch five holes in the gradient
   and waste the whole effect. Enough blur to keep the text off the
   moving colour underneath. */
/* Frosted white rather than tinted glass. At 10% white the cards were
   only a shade lighter than the gradient behind them, so white type on
   them was doing all the work alone; at 88% the card is its own surface
   and the text can be dark, which is where the real legibility comes
   from. Enough transparency is left for the gradient to move underneath. */
.why-card{
  position:relative;border-radius:var(--r-lg);padding:26px 20px;text-align:center;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .3s var(--e),box-shadow .3s var(--e),background .3s var(--e),border-color .3s;
}
.why-card:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,.95);
  border-color:rgba(200,161,90,.8);
  box-shadow:0 26px 46px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.95);
}
.why-ico{
  width:66px;height:66px;margin:0 auto 15px;border-radius:20px;
  display:grid;place-items:center;color:var(--green-700);
  background:
    radial-gradient(120% 110% at 26% 18%, #fff 0%, #FBFDFB 44%, rgba(255,255,255,0) 78%),
    linear-gradient(150deg,#FFFFFF 0%,#EFF7F2 58%,#DFEFE6 100%);
  box-shadow:
    0 7px 18px -9px rgba(9,40,26,.34),
    inset 0 0 0 1px rgba(200,161,90,.45),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .4s var(--e-out),box-shadow .35s var(--e);
}
.why-ico svg{width:36px;height:36px;overflow:visible;stroke-width:1.5;}
.why-card:hover .why-ico{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 24px -11px rgba(9,40,26,.44),
    inset 0 0 0 1px rgba(200,161,90,.85), inset 0 1px 0 rgba(255,255,255,.95);
}
.why-t{font-size:var(--t-md);font-weight:700;margin-bottom:7px;color:var(--green-900);}
.why-s{font-size:var(--t-xs);color:var(--ink-2);line-height:1.6;}

/* ---- the photograph ----
   A real picture instead of the drawn mark. It runs the full width of
   the card and sits flush to the top, so the card reads as a thing with
   a picture on it rather than a box with a sticker in it.

   The mark is still rendered underneath and comes back on its own if a
   file ever fails to load -- see the note in renderWhy. */
.why-card.has-photo{padding-top:0;overflow:hidden;}
.why-photo{
  position:relative;margin:0 -20px 17px;height:112px;overflow:hidden;
  background:var(--bg-soft);
}
.why-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--e);
}
.why-card:hover .why-photo img{transform:scale(1.06);}
/* a drawn panel behaves like the photographs beside it — same height,
   same lift on hover — but has no dark corners to shade */
.why-photo svg{width:100%;height:100%;display:block;transition:transform .5s var(--e);}
.why-card:hover .why-photo svg{transform:scale(1.06);}
.why-drawn::after{background:linear-gradient(180deg,rgba(9,40,26,0),rgba(9,40,26,.07));}
/* a gold hairline where the picture meets the card, and a little shade
   into it so the image never ends on a hard bright edge */
.why-photo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  background:linear-gradient(180deg,rgba(9,40,26,0),rgba(9,40,26,.16));
  pointer-events:none;
}
.why-photo::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--green-700),var(--gold) 52%,var(--green-700));
  pointer-events:none;
}
.why-card.has-photo .why-ico{display:none;}

/* ---- reviews ----
   A product with none says so in words. An empty five-star row reads
   as a one-star product to anyone scanning a grid quickly, which is
   worse than showing nothing at all. */
.card-rate-none{color:var(--muted);font-size:var(--t-2xs);min-height:19px;display:flex;align-items:center;}
.pdp-norate{color:var(--muted);font-size:var(--t-xs);}

.rv-block{max-width:var(--wrap);margin:0 auto;padding:46px 22px 8px;}
.rv-h{font-family:var(--font-display);font-size:24px;letter-spacing:-.02em;
  color:var(--green-900);margin:0 0 18px;}
.rv-empty,.rv-note{color:var(--ink-2);font-size:var(--t-sm);line-height:1.65;max-width:60ch;margin:0 0 20px;}
.rv-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px;}
.rv-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;}
.rv-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px;}
.rv-top b{font-size:14px;font-weight:650;}
.rv-top time{font-size:var(--t-2xs);color:var(--muted);margin-left:auto;}
.rv-stars{display:inline-flex;gap:1px;color:var(--gold);}
.rv-stars svg{width:14px;height:14px;}
.rv-item p{margin:0;font-size:var(--t-sm);color:var(--ink-2);line-height:1.65;}

.rv-form{display:grid;gap:12px;max-width:560px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;}
.rv-pick{display:flex;gap:4px;}
.rv-star{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  color:var(--line);transition:color .18s,transform .18s var(--e);}
.rv-star svg{width:24px;height:24px;}
.rv-star:hover{transform:scale(1.12);}
.rv-star.on{color:var(--gold);}
.rv-star:focus-visible{outline:2px solid var(--green-600);outline-offset:2px;}
.rv-form .btn{justify-self:start;}

/* WhatsApp keeps its own green. It is the one place on this site where
   borrowing a platform's colour is right rather than lazy — people scan
   for that exact green, and a button in our own green would be missed. */
.btn-wa{
  background:#25D366;color:#0A3B1C;
  display:inline-flex;align-items:center;gap:9px;
}
.btn-wa:hover{filter:brightness(1.06);}
.btn-wa svg{width:18px;height:18px;}

/* ---- the pin ----
   Sits under the wishlist heart, same shape and size so the two read
   as a pair of card controls rather than two unrelated ideas. It only
   renders on things already bought, so most cards show one control. */
.pinbtn{
  position:absolute;top:52px;right:10px;z-index:3;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--muted);
  box-shadow:0 2px 8px -3px rgba(9,40,26,.35), inset 0 0 0 1px var(--line);
  transition:color .2s,background .2s,transform .2s var(--e);
}
.pinbtn svg{width:15px;height:15px;}
.pinbtn:hover{transform:scale(1.08);color:var(--green-700);}
.pinbtn.on{background:var(--green-700);color:#fff;box-shadow:0 4px 12px -4px rgba(11,93,59,.7);}

/* ---- how it gets to you ----
   Two tags that have to be told apart at a glance in a grid of a
   dozen cards, so they differ in colour AND in icon, not colour
   alone — the same card read by someone colour-blind still separates
   a bolt from a parcel. */
.dtag{
  display:inline-flex;align-items:center;gap:5px;
  margin:7px 0 0;padding:3px 8px 3px 6px;border-radius:var(--pill);
  font-size:11px;font-weight:700;letter-spacing:.01em;line-height:1.35;
  white-space:nowrap;max-width:100%;
}
.dtag svg{width:12px;height:12px;flex:none;}
.dtag span{overflow:hidden;text-overflow:ellipsis;}
.dtag-fast{background:var(--green-100);color:#08472C;box-shadow:inset 0 0 0 1px rgba(11,93,59,.22);}
.dtag-post{background:#F6EEDC;color:#5A4223;box-shadow:inset 0 0 0 1px rgba(200,161,90,.42);}

/* on the product page it is a statement, not a footnote */
.dtag-lg{font-size:12.5px;padding:5px 12px 5px 9px;margin:0;}
.dtag-lg svg{width:15px;height:15px;}
.pdp-route{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:14px 0 4px;padding:12px 14px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);
}
.pdp-route > span:last-child{font-size:var(--t-xs);color:var(--ink-2);line-height:1.55;flex:1;min-width:180px;}

/* the cart splits into the two deliveries it will actually become */
.cart-group{
  display:flex;align-items:center;gap:9px;
  margin:22px 0 10px;font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.cart-group:first-child{margin-top:0;}
.cart-group::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---------- 13. PROMISES ---------- */
/* ---- the canopy ----
   A forest canopy, faded right back. Thirty soft clumps of foliage
   massed the way the reference reads -- deep teal-green banked left
   and top-left, mid green through the belly, pale yellow-green
   catching the light down the right -- with two columns of deeper
   shade for trunks so it is not canopy edge to edge.

   It sits on a ::before at 30%, not painted into the section itself.
   That leaves one knob for how far back it fades, and it keeps the
   ground pale enough that the heading stays dark ink and the white
   cards still read as objects in front of it.

   Painted rather than placed: the reference is an illustration that
   is not on this machine, and a wash of clumps scales to any section
   height instead of being stretched to fit. */
.sec-canopy{position:relative;isolation:isolate;background-color:#EAF0DC;}
/* green-600 measured 4.55:1 on the canopy -- technically a pass, but no
   margin at all for 11px type. Same two-step drop the washed bands take. */
.sec-canopy .sec-kicker{color:#094A2F;}

/* ---- 8e. the marble ----
   Blue ink pulled through water: pale swirls over a steel-blue ground,
   with the deeper veins massed low and left the way the reference
   reads. Two turbulence fields make the flow -- one raked at 24deg
   over the other, both type="turbulence" rather than fractalNoise,
   which is what gives veins instead of clouds.

   Kept in the lighter half of the reference. The heading and the
   standfirst sit straight on it, so the veins under them cannot go
   below about rgb(112,142,182) without the small copy dropping under
   AA -- the darkest blues are steered to the bottom corners, where
   the product cards cover them anyway.

   Worth saying plainly: this is the one band on the site that is not
   green or gold. It reads as deliberate rather than stray because the
   countdown chips stay brand green on it, but if it ends up looking
   like a different website, that is why. */
.sec-marble{
  position:relative;
  isolation:isolate;
  background-color:#AEC2DE;
  background-image:
    radial-gradient(46% 52% at 14% 10%, rgba(233,241,251,.60) 0%, rgba(233,241,251,0) 70%),
    radial-gradient(40% 46% at 78% 14%, rgba(226,237,250,.54) 0%, rgba(226,237,250,0) 72%),
    radial-gradient(44% 50% at 60% 62%, rgba(238,245,253,.52) 0%, rgba(238,245,253,0) 72%),
    radial-gradient(38% 44% at 32% 84%, rgba(96,130,180,.74) 0%,  rgba(96,130,180,0) 72%),
    radial-gradient(42% 48% at 4% 62%,  rgba(84,120,174,.78) 0%,  rgba(84,120,174,0) 72%),
    radial-gradient(34% 40% at 94% 88%, rgba(92,128,180,.70) 0%,  rgba(92,128,180,0) 72%),
    radial-gradient(30% 36% at 88% 46%, rgba(112,146,194,.60) 0%, rgba(112,146,194,0) 74%);
  background-repeat:no-repeat;
}
/* the flow. soft-light rather than multiply: on a mid ground multiply
   only darkens, and marble needs the pale swirls as much as the veins. */
.sec-marble::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='800'%3E%3Cfilter id='v' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.006 0.016' numOctaves='6' seed='31'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.02 0.008' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='1000' height='800' filter='url(%23v)'/%3E%3Cg transform='rotate(24 500 400)'%3E%3Crect x='-320' y='-320' width='1640' height='1440' filter='url(%23f)' opacity='0.55'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;background-repeat:no-repeat;
  mix-blend-mode:soft-light;opacity:.55;
}
/* the section inverts to a cool ink so it belongs to the ground */
.sec-marble .sec-kicker{color:#12253F;}
.sec-marble .sec-title{color:#12253F;}
.sec-marble .sec-sub{color:#12253F;}
/* --line on marble is no border at all; the cards were floating */
.sec-marble .card{border-color:rgba(18,37,63,.22);box-shadow:0 6px 18px -10px rgba(12,30,56,.45);}
.sec-marble .card:hover{border-color:var(--green-600);}

/* the countdown block. The label used to carry its colour inline, which
   meant no section could restyle it. The chips stay brand green: they
   are the one thing keeping this band on the same site as the rest. */
.deal-timer{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.deal-timer-label{font-size:12.5px;font-weight:700;color:var(--muted);}
.sec-marble .deal-timer-label{color:#12253F;}
.sec-marble .cd-sep{color:#12253F;}
.sec-canopy::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* full strength now. The fading is done in the palette instead of
     with an opacity knob: every colour is the reference lifted several
     stops, so the canopy reads as a canopy rather than as a haze, and
     the darkest pixel it can reach still leaves the heading clear of
     AA without a veil laid over the top. */
  opacity:.95;
  background-image:
    radial-gradient(16% 13% at 4% 6%, rgba(159,185,164,0.72) 0%, rgba(159,185,164,0) 72%),
    radial-gradient(13% 11% at 15% 14%, rgba(166,191,168,0.66) 0%, rgba(166,191,168,0) 72%),
    radial-gradient(18% 15% at 2% 34%, rgba(162,188,164,0.64) 0%, rgba(162,188,164,0) 72%),
    radial-gradient(12% 10% at 13% 44%, rgba(169,195,156,0.62) 0%, rgba(169,195,156,0) 72%),
    radial-gradient(15% 13% at 5% 68%, rgba(159,185,164,0.66) 0%, rgba(159,185,164,0) 72%),
    radial-gradient(11% 9% at 17% 76%, rgba(166,191,168,0.6) 0%, rgba(166,191,168,0) 72%),
    radial-gradient(13% 11% at 9% 92%, rgba(169,195,156,0.58) 0%, rgba(169,195,156,0) 72%),
    radial-gradient(14% 12% at 28% 4%, rgba(180,204,156,0.64) 0%, rgba(180,204,156,0) 72%),
    radial-gradient(11% 10% at 26% 26%, rgba(175,199,154,0.6) 0%, rgba(175,199,154,0) 72%),
    radial-gradient(16% 14% at 33% 40%, rgba(180,204,156,0.62) 0%, rgba(180,204,156,0) 72%),
    radial-gradient(12% 10% at 24% 60%, rgba(175,199,154,0.58) 0%, rgba(175,199,154,0) 72%),
    radial-gradient(14% 12% at 31% 82%, rgba(180,204,156,0.6) 0%, rgba(180,204,156,0) 72%),
    radial-gradient(10% 9% at 40% 16%, rgba(196,214,160,0.56) 0%, rgba(196,214,160,0) 72%),
    radial-gradient(13% 11% at 45% 30%, rgba(196,214,160,0.58) 0%, rgba(196,214,160,0) 72%),
    radial-gradient(11% 10% at 43% 58%, rgba(190,209,158,0.56) 0%, rgba(190,209,158,0) 72%),
    radial-gradient(15% 13% at 48% 74%, rgba(196,214,160,0.56) 0%, rgba(196,214,160,0) 72%),
    radial-gradient(12% 10% at 40% 96%, rgba(190,209,158,0.54) 0%, rgba(190,209,158,0) 72%),
    radial-gradient(14% 12% at 58% 8%, rgba(203,219,164,0.58) 0%, rgba(203,219,164,0) 72%),
    radial-gradient(12% 10% at 62% 28%, rgba(213,225,178,0.6) 0%, rgba(213,225,178,0) 72%),
    radial-gradient(16% 14% at 57% 50%, rgba(203,219,164,0.56) 0%, rgba(203,219,164,0) 72%),
    radial-gradient(11% 10% at 66% 68%, rgba(213,225,178,0.58) 0%, rgba(213,225,178,0) 72%),
    radial-gradient(13% 11% at 60% 90%, rgba(203,219,164,0.54) 0%, rgba(203,219,164,0) 72%),
    radial-gradient(15% 13% at 78% 10%, rgba(220,231,182,0.64) 0%, rgba(220,231,182,0) 72%),
    radial-gradient(12% 10% at 88% 26%, rgba(228,236,196,0.62) 0%, rgba(228,236,196,0) 72%),
    radial-gradient(17% 14% at 80% 44%, rgba(220,231,182,0.62) 0%, rgba(220,231,182,0) 72%),
    radial-gradient(11% 10% at 92% 60%, rgba(228,236,196,0.6) 0%, rgba(228,236,196,0) 72%),
    radial-gradient(15% 13% at 84% 78%, rgba(220,231,182,0.6) 0%, rgba(220,231,182,0) 72%),
    radial-gradient(12% 10% at 95% 92%, rgba(213,225,178,0.56) 0%, rgba(213,225,178,0) 72%),
    radial-gradient(9% 26% at 22% 52%, rgba(155,182,162,0.4) 0%, rgba(155,182,162,0) 72%),
    radial-gradient(8% 24% at 71% 36%, rgba(155,182,162,0.36) 0%, rgba(155,182,162,0) 72%);
  background-repeat:no-repeat;
}
/* the same grain the washes use, so it reads as painted rather than
   as a pile of gradients */
.sec-canopy::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size:760px 760px;
}
/* ---- the branch ----
   One stem leaves the heading, forks, and runs a limb down to each of
   the three cards. It replaces the three icon tiles: a badge on each
   card said nothing about the card, whereas the limbs say the three
   promises come from one place and are the same undertaking.

   The geometry is written from JS against the real card positions,
   not guessed at from percentages -- a three-column grid with gaps
   does not put its card centres at sixths, and a limb landing five
   pixels off its card is the whole effect gone. */
.promise-branch{position:relative;height:86px;margin:-6px 0 0;pointer-events:none;}
.promise-branch svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.pb-lines path{
  fill:none;stroke:url(#pbGrad);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.pb-lines .pb-stem{stroke-width:2.1;}
.pb-nodes circle{fill:var(--gold);stroke:#fff;stroke-width:2.5;}
.pb-nodes .pb-fork{fill:var(--green-700);stroke:none;}

/* --line is #E7EDE9. On white that is barely a line at all, and on the
   canopy behind it the card edge disappeared outright.

   2px, not 1.5px: at a device pixel ratio of 1 -- which is this screen --
   Chrome snaps a 1.5px border down to 1px, so the half was doing nothing
   at all. 2px in a real green gives the card a drawn edge rather than an
   implied one. */
.promise-card{
  background:#fff;border:2px solid rgba(11,93,59,.42);border-radius:var(--r-lg);
  padding:30px 28px 28px;position:relative;overflow:hidden;
  box-shadow:0 2px 6px -2px rgba(9,40,26,.10);
  transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s;
}
/* the rule the limb lands on. It used to appear only on hover, down
   the left edge, where nothing was pointing at it. Now it is always
   there, along the top, and it is what the branch connects to. */
.promise-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--green-700),var(--gold) 52%,var(--green-700));
  opacity:.9;transition:opacity .3s,height .3s var(--e);
}
.promise-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--green-600);}
.promise-card:hover::before{opacity:1;height:5px;}
.promise-t{
  font-family:var(--font-display);font-size:var(--t-lg);line-height:var(--lh-tight);
  letter-spacing:-.02em;color:var(--green-900);margin-bottom:10px;
}
.promise-s{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--ink-2);}

.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.rev-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:14px;}
.rev-stars{display:inline-flex;gap:2px;color:var(--gold);}
.rev-stars svg{width:15px;height:15px;}
.rev-text{font-size:14.5px;color:var(--ink-2);line-height:1.65;flex:1;}
.rev-who{display:flex;align-items:center;gap:11px;}
.rev-av{width:38px;height:38px;border-radius:50%;background:var(--green-100);color:var(--green-700);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;}
.rev-name{font-size:13.5px;font-weight:650;}
.rev-loc{font-size:12px;color:var(--muted);}

/* ---------- 14. NEWSLETTER ---------- */
/* ---- cocoa ----
   A dark, smoothly blurred chocolate: deep shadow banked into the
   corners, a lighter swirl running the diagonal, no hard edge anywhere.
   Six very large, very soft blooms rather than the brushed clumps of
   the sand version -- the reference here has no visible mark at all,
   so anything with a texture in it would be wrong.

   The panel turns over again with the ground. Sand needed near-black
   brown ink; cocoa is dark enough that white is back, and the button
   has to move with it -- see the note on it below. */
.news{
  position:relative;isolation:isolate;
  border-radius:var(--r-xl);overflow:hidden;
  background-color:#6B4B37;
  background-image:
    radial-gradient(52% 66% at 10% 4%,  rgba(74,50,37,.72) 0%,   rgba(74,50,37,0) 74%),
    radial-gradient(48% 60% at 92% 96%, rgba(78,53,39,.68) 0%,   rgba(78,53,39,0) 74%),
    radial-gradient(40% 58% at 96% 8%,  rgba(88,61,45,.55) 0%,   rgba(88,61,45,0) 74%),
    radial-gradient(38% 54% at 4% 92%,  rgba(84,58,43,.55) 0%,   rgba(84,58,43,0) 74%),
    radial-gradient(46% 62% at 40% 46%, rgba(147,108,78,.62) 0%, rgba(147,108,78,0) 76%),
    radial-gradient(40% 56% at 74% 54%, rgba(138,100,72,.55) 0%, rgba(138,100,72,0) 76%);
  background-repeat:no-repeat;
  color:#fff;
  padding:44px 48px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;
}
/* Just enough noise to stop a gradient this large and this smooth from
   banding on an 8-bit display. Nowhere near enough to read as texture. */
.news::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  mix-blend-mode:overlay;opacity:.07;
}
.news-title{font-family:var(--font-display);font-size:clamp(23px,2.5vw,32px);letter-spacing:-.03em;margin-bottom:10px;color:#fff;}
/* Full white, not white at 90%. The lit swirl through the middle of the
   board is the brightest thing under this copy, and a 15px line faded
   even a tenth lands under AA on it. */
.news-sub{font-size:var(--t-sm);line-height:1.6;max-width:420px;color:#fff;}
.news-form{display:flex;gap:10px;flex-wrap:wrap;}
.news-form input{
  flex:1;min-width:210px;height:52px;border-radius:var(--pill);
  border:1.5px solid rgba(255,255,255,.45);
  background:rgba(255,252,247,.94);color:#33200D;padding:0 22px;font-size:14.5px;
}
.news-form input::placeholder{color:rgba(51,32,13,.62);}
.news-form input:focus{outline:none;border-color:var(--gold-200);background:#fff;
  box-shadow:0 0 0 3px rgba(235,210,147,.45);}
/* Green went on the sand board because gold on tan was gold on gold.
   On cocoa the reverse holds: deep green measures about 1.2:1 against
   this brown -- it would disappear into the panel -- and gold is back
   at better than 4:1. Pale gold, not brand gold, so the darker end of
   the gradient still clears 3:1 as a control boundary. */
.news .btn-gold{
  background:linear-gradient(150deg,#F2DFAE,#CBA84E);
  color:#33240B;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.45);
}
.news .btn-gold:hover{filter:brightness(1.06);}
.news-note{font-size:var(--t-2xs);margin-top:12px;color:#fff;opacity:.92;}

/* ---------- 15. FOOTER ---------- */
.footer{background:var(--green-900);color:#C6DBCF;padding:56px 0 0;margin-top:56px;}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:36px;padding-bottom:44px;}
.foot-brand .brand-name{color:#fff;}
.foot-brand .brand-tag{color:rgba(255,255,255,.5);}
.foot-desc{font-size:var(--t-xs);line-height:1.7;margin:16px 0 20px;max-width:300px;opacity:.92;}
.foot-h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:16px;}
.foot-list li{margin-bottom:10px;}
.foot-list a{font-size:13.5px;opacity:.82;transition:opacity .2s,color .2s,padding-left .2s;}
.foot-list a:hover{opacity:1;color:#fff;padding-left:4px;}
.foot-contact li{display:flex;gap:10px;font-size:13px;margin-bottom:12px;opacity:.82;line-height:1.5;}
.foot-contact svg{width:15px;height:15px;flex:none;margin-top:3px;opacity:.7;}
.socials{display:flex;gap:9px;}
.soc{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background .2s,transform .2s var(--e);}
.soc:hover{background:var(--green-500);transform:translateY(-2px);}
.soc svg{width:16px;height:16px;}
.pay-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.pay-chip{height:30px;padding:0 11px;border-radius:7px;background:rgba(255,255,255,.93);color:#123;display:inline-flex;align-items:center;font-size:11px;font-weight:700;}
/* Who you are, in plain sight. A shop that hides its legal name and
   address is the first thing a cautious shopper notices. */
.foot-legal{
  border-top:1px solid rgba(255,255,255,.1);padding:18px 0 0;
  font-size:var(--t-xs);color:rgba(255,255,255,.6);line-height:1.6;
}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:16px 0 20px;margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:var(--t-2xs);opacity:.7;flex-wrap:wrap;}

/* the amount rides on the button, so the last click holds no surprise */
.btn-amt{
  margin-left:auto;padding-left:14px;font-variant-numeric:tabular-nums;
  font-weight:800;letter-spacing:.01em;
}
.btn-block .btn-amt{border-left:1px solid rgba(255,255,255,.22);}
.foot-bottom a:hover{color:#fff;}

/* ---------- 16. TOASTS ---------- */
.toasts{position:fixed;right:22px;bottom:22px;z-index:300;display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
.toast{
  display:flex;align-items:center;gap:12px;min-width:240px;max-width:360px;
  background:var(--ink);color:#fff;padding:13px 17px;border-radius:var(--r);
  box-shadow:var(--sh-pop);font-size:13.5px;font-weight:500;
  animation:toastIn .35s var(--e-out);
}
.toast.ok{background:var(--green-700);}
.toast.err{background:var(--sale);}
.toast svg{width:17px;height:17px;flex:none;}
.toast.out{animation:toastOut .3s var(--e) forwards;}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateX(20px);}}

/* ---------- 17. MODAL / AUTH ---------- */
.modal{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:.24s;}
.modal.open{opacity:1;visibility:visible;}
.modal-bd{position:absolute;inset:0;background:rgba(8,30,20,.5);backdrop-filter:blur(3px);}
.modal-box{
  position:relative;width:100%;max-width:440px;background:#fff;border-radius:var(--r-xl);
  box-shadow:var(--sh-pop);padding:34px 34px 30px;max-height:92vh;overflow:auto;
  transform:translateY(16px) scale(.97);transition:transform .3s var(--e-out);
}
.modal.open .modal-box{transform:none;}
.modal-box.wide{max-width:560px;}
.modal-x{position:absolute;top:16px;right:16px;}
.auth-head{text-align:center;margin-bottom:24px;}
.auth-mark{width:52px;height:52px;margin:0 auto 14px;border-radius:16px;background:linear-gradient(145deg,var(--green-600),var(--green-800));display:grid;place-items:center;color:#fff;}
.auth-mark svg{width:26px;height:26px;}
.auth-title{font-family:var(--font-display);font-size:25px;letter-spacing:-.03em;color:var(--green-900);}
.auth-sub{font-size:13.5px;color:var(--muted);margin-top:7px;}
.tabs{display:flex;gap:4px;padding:4px;background:var(--bg-soft);border-radius:var(--pill);margin-bottom:22px;}
.tab{flex:1;height:38px;border-radius:var(--pill);font-size:13.5px;font-weight:600;color:var(--muted);transition:background .2s,color .2s,box-shadow .2s;}
.tab.active{background:#fff;color:var(--green-800);box-shadow:var(--sh-1);}

.field{margin-bottom:15px;}
.field label{display:block;font-size:12.5px;font-weight:650;color:var(--ink-2);margin-bottom:7px;}
.field label .req{color:var(--sale);}
.inp{
  width:100%;height:48px;border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;padding:0 15px;font-size:14.5px;transition:border-color .2s,box-shadow .2s;
}
textarea.inp{height:auto;padding:13px 15px;resize:vertical;min-height:88px;line-height:1.55;}
.inp:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 4px var(--green-100);}
.inp.bad{border-color:var(--sale);box-shadow:0 0 0 4px var(--sale-soft);}
select.inp{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A73' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px;
}
.field-err{font-size:12px;color:var(--sale);margin-top:6px;display:none;}
.field.bad .field-err{display:block;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.inp-pre{position:relative;}
.inp-pre span{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:14.5px;color:var(--muted);}
.inp-pre .inp{padding-left:46px;}

.check{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink-2);cursor:pointer;line-height:1.5;}
.check input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--green-700);flex:none;cursor:pointer;}
.check a{color:var(--green-700);font-weight:600;text-decoration:underline;}
.auth-alt{text-align:center;font-size:13px;color:var(--muted);margin-top:18px;}
.auth-alt button{color:var(--green-700);font-weight:650;text-decoration:underline;}
.divider{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--muted);font-size:12px;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);}
.social-row{display:grid;grid-template-columns:1fr;gap:10px;}
.soc-btn{display:flex;align-items:center;justify-content:center;gap:9px;height:46px;border:1.5px solid var(--line);border-radius:var(--r);font-size:13.5px;font-weight:600;transition:border-color .2s,background .2s;}
.soc-btn:hover{border-color:var(--green-200);background:var(--green-50);}
.soc-btn svg{width:17px;height:17px;}
.trust-note{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;color:var(--muted);margin-top:18px;}
.trust-note svg{width:13px;height:13px;}

/* ---------- 18. PAGE HEADS / BREADCRUMB ---------- */
.page-head{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:26px 0;}
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:10px;flex-wrap:wrap;}
.crumbs a:hover{color:var(--green-700);}
.crumbs .sep{opacity:.5;}
.page-title{font-family:var(--font-display);font-size:clamp(25px,3vw,36px);letter-spacing:-.03em;color:var(--green-900);}
.page-sub{font-size:14px;color:var(--muted);margin-top:6px;}

/* ---------- 19. SHOP LAYOUT ---------- */
.shop-layout{display:grid;grid-template-columns:262px 1fr;gap:30px;padding:30px 0 10px;align-items:start;}
.filters{position:sticky;top:150px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.f-group{border-bottom:1px solid var(--line-2);padding:18px 20px;}
.f-group:last-child{border-bottom:0;}
.f-head{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);}
.f-head svg{width:12px;height:12px;transition:transform .25s var(--e);opacity:.6;}
.f-head.closed svg{transform:rotate(-90deg);}
.f-body{margin-top:14px;display:flex;flex-direction:column;gap:11px;}
.f-body.closed{display:none;}
.f-opt{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2);cursor:pointer;}
.f-opt input{width:16px;height:16px;accent-color:var(--green-700);flex:none;cursor:pointer;}
.f-opt .n{margin-left:auto;font-size:12px;color:var(--muted);}
.f-opt:hover{color:var(--green-700);}
.range-row{display:flex;align-items:center;gap:10px;}
.range-row .inp{height:40px;font-size:13.5px;text-align:center;padding:0 8px;}
.f-clear{width:100%;height:40px;border-radius:var(--r);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted);transition:.2s;}
.f-clear:hover{border-color:var(--sale);color:var(--sale);}

.shop-bar{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.shop-count{font-size:13.5px;color:var(--muted);}
.shop-count b{color:var(--ink);}
.shop-tools{margin-left:auto;display:flex;align-items:center;gap:10px;}
.sortsel{height:42px;min-width:190px;border:1px solid var(--line);border-radius:var(--pill);background:#fff;padding:0 38px 0 18px;font-size:13.5px;font-weight:550;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A73' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:11px;}
.sortsel:focus{outline:none;border-color:var(--green-500);}
.filter-toggle{display:none;}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 8px 0 14px;border-radius:var(--pill);background:var(--green-100);color:var(--green-800);font-size:12.5px;font-weight:600;}
.chip button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:13px;line-height:1;opacity:.6;}
.chip button:hover{opacity:1;background:rgba(0,0,0,.07);}

.empty{padding:60px 20px;text-align:center;}
.empty-ico{font-size:46px;margin-bottom:14px;opacity:.5;}
.empty-t{font-size:18px;font-weight:700;margin-bottom:7px;}
.empty-s{font-size:14px;color:var(--muted);margin-bottom:20px;}

.pager{display:flex;align-items:center;justify-content:center;gap:7px;padding:36px 0 10px;}
.pg{min-width:38px;height:38px;padding:0 10px;border-radius:var(--r);border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;display:grid;place-items:center;transition:.2s;}
.pg:hover{border-color:var(--green-500);color:var(--green-700);}
.pg.active{background:var(--green-700);border-color:var(--green-700);color:#fff;}
.pg[disabled]{opacity:.4;pointer-events:none;}

/* ---------- 20. PRODUCT DETAIL ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:34px 0 10px;align-items:start;}
.pdp-gallery{position:sticky;top:150px;}
.pdp-main{
  position:relative;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg-soft);
  aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;margin-bottom:14px;
}
.pdp-main img{width:100%;height:100%;object-fit:cover;}
.pdp-main .ph{font-size:96px;opacity:.35;}
.pdp-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.pdp-thumb{border:1.5px solid var(--line);border-radius:var(--r);background:var(--bg-soft);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;font-size:24px;transition:border-color .2s;}
.pdp-thumb:hover,.pdp-thumb.active{border-color:var(--green-600);}

.pdp-brand{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--green-600);font-weight:700;margin-bottom:10px;}
.pdp-title{font-family:var(--font-display);font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;line-height:1.12;color:var(--green-900);margin-bottom:12px;}
.pdp-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:20px;}
.pdp-price{display:flex;align-items:flex-end;gap:12px;margin-bottom:6px;}
.pdp-price .now{font-size:34px;font-weight:800;color:var(--green-800);letter-spacing:-.03em;line-height:1;}
.pdp-price .was{font-size:17px;color:var(--muted);text-decoration:line-through;}
.pdp-price .off{height:24px;padding:0 10px;border-radius:var(--pill);background:var(--sale-soft);color:var(--sale);font-size:12px;font-weight:800;display:inline-flex;align-items:center;}
.pdp-unit{font-size:13px;color:var(--muted);margin-bottom:22px;}
.pdp-desc{font-size:14.5px;color:var(--ink-2);line-height:1.7;margin-bottom:24px;}
.pdp-buy{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-soft);margin-bottom:22px;}
.pdp-buy .btn{flex:1;min-width:180px;}
.pdp-buy .wishbtn{flex:0 0 56px;min-width:0;padding:0;}
.stock{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--green-600);}
.stock .d{width:8px;height:8px;border-radius:50%;background:currentColor;}
.stock.low{color:var(--warn);}
.stock.out{color:var(--muted);}
.pdp-perks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:24px;}
/* the perk tile takes a film the same way the trust strip does */
.perk-ico.is-vid{background:#fff;padding:2px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);}
.perk-ico.is-vid svg{display:none;}
.perk-ico .ico-vid{width:100%;height:100%;object-fit:contain;display:block;border-radius:9px;background:#fff;}
.perk{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--ink-2);}
.perk-ico{width:36px;height:36px;border-radius:11px;background:var(--green-100);color:var(--green-700);display:grid;place-items:center;flex:none;}
.perk-ico svg{width:17px;height:17px;}
.acc{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:17px 0;font-size:14.5px;font-weight:650;text-align:left;}
.acc-head svg{width:13px;height:13px;transition:transform .25s var(--e);opacity:.55;}
.acc-item.open .acc-head svg{transform:rotate(180deg);}
.acc-body{display:none;padding:0 0 18px;font-size:14px;color:var(--ink-2);line-height:1.7;}
.acc-item.open .acc-body{display:block;}
.spec-row{display:flex;gap:14px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13.5px;}
.spec-row:last-child{border-bottom:0;}
.spec-row .k{width:150px;flex:none;color:var(--muted);}
.spec-row .v{font-weight:550;}

/* ---------- 21. CART ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:30px;padding:30px 0 10px;align-items:start;}
.cart-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);}
.cart-head h3{font-size:16px;}
.cart-row{display:grid;grid-template-columns:88px 1fr auto auto;gap:18px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line-2);}
.cart-row:last-child{border-bottom:0;}
.cart-img{width:88px;height:88px;border-radius:var(--r);background:var(--bg-soft);display:grid;place-items:center;overflow:hidden;font-size:32px;}
.cart-img img{width:100%;height:100%;object-fit:cover;}
.cart-name{font-size:14.5px;font-weight:650;margin-bottom:4px;}
.cart-unit{font-size:12.5px;color:var(--muted);}
.cart-each{font-size:12.5px;color:var(--muted);margin-top:6px;}
.cart-line{text-align:right;min-width:96px;}
.cart-line .lp{font-size:16px;font-weight:800;color:var(--green-800);}
.cart-del{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:.2s;}
.cart-del:hover{background:var(--sale-soft);color:var(--sale);}
.cart-del svg{width:15px;height:15px;}

.summary{position:sticky;top:150px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;}
.summary h3{font-size:16px;margin-bottom:18px;}
.sum-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px;padding:9px 0;color:var(--ink-2);}
.sum-row .v{font-weight:650;color:var(--ink);}
.sum-row.free .v{color:var(--green-600);}
.sum-div{height:1px;background:var(--line);margin:12px 0;}
.sum-total{display:flex;align-items:baseline;justify-content:space-between;font-size:15px;font-weight:700;padding:4px 0 2px;}
.sum-total .v{font-size:26px;font-weight:800;color:var(--green-800);letter-spacing:-.02em;}
.sum-note{font-size:11.5px;color:var(--muted);margin-top:6px;}
.promo-row{display:flex;gap:9px;margin:16px 0 4px;}
.promo-row .inp{height:44px;}
.ship-bar{margin:16px 0 4px;padding:14px;border-radius:var(--r);background:var(--green-50);border:1px solid var(--green-200);font-size:12.5px;color:var(--green-800);}
.ship-track{height:6px;border-radius:var(--pill);background:#fff;margin-top:9px;overflow:hidden;}
.ship-track i{display:block;height:100%;background:var(--green-600);border-radius:var(--pill);transition:width .5s var(--e);}

/* ---------- 22. CHECKOUT ---------- */
.steps{display:flex;align-items:center;justify-content:center;gap:0;padding:26px 0 6px;}
.step{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;color:var(--muted);}
.step-n{width:30px;height:30px;border-radius:50%;background:var(--bg-soft);border:1.5px solid var(--line);display:grid;place-items:center;font-size:13px;flex:none;}
.step.on{color:var(--green-800);}
.step.on .step-n{background:var(--green-700);border-color:var(--green-700);color:#fff;}
.step.done .step-n{background:var(--green-100);border-color:var(--green-200);color:var(--green-700);}
.step-line{width:clamp(30px,7vw,90px);height:1.5px;background:var(--line);margin:0 16px;}

.co-layout{display:grid;grid-template-columns:1fr 388px;gap:30px;padding:22px 0 10px;align-items:start;}
.co-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;margin-bottom:20px;}
.co-card h3{font-size:16.5px;margin-bottom:4px;}
.co-card .co-sub{font-size:13px;color:var(--muted);margin-bottom:20px;}
.opt-grid{display:grid;gap:12px;}
.opt-grid.two{grid-template-columns:1fr 1fr;}
.opt{
  display:flex;align-items:center;gap:13px;padding:15px 16px;border:1.5px solid var(--line);
  border-radius:var(--r);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s;
}
.opt:hover{border-color:var(--green-200);background:var(--green-50);}
.opt.on{border-color:var(--green-600);background:var(--green-50);box-shadow:0 0 0 3px var(--green-100);}
.opt input{width:18px;height:18px;accent-color:var(--green-700);flex:none;cursor:pointer;}
/* The slot used to be a 38px tile holding an 18px emoji. It now holds
   a drawn card at the same 48x32 as a saved payment method, so the two
   lists read as one set rather than two. */
.opt-ico{width:48px;height:32px;flex:none;display:grid;place-items:center;}
.opt-ico svg{width:48px;height:32px;border-radius:5px;display:block;
  box-shadow:0 1px 3px rgba(9,40,26,.28);}
.opt-t{font-size:14px;font-weight:650;}
.opt-s{font-size:var(--t-xs);color:var(--ink-2);margin-top:3px;line-height:1.5;}
.opt-r{margin-left:auto;text-align:right;font-size:13.5px;font-weight:700;color:var(--green-700);white-space:nowrap;}
/* where they live, and what it costs to reach them */
/* the second line, when an order arrives in two parts */
.zone-split{margin-top:8px;font-size:var(--t-xs);line-height:1.55;color:var(--ink-2);
  background:var(--green-50);border:1px dashed var(--green-200);border-radius:var(--r-md);padding:9px 12px;}
.zone-note{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;margin-bottom:16px;border-radius:var(--r);
  background:var(--green-50);border:1px solid var(--green-200);
  font-size:var(--t-sm);color:var(--green-800);line-height:1.55;
}
.zone-note b{font-weight:700;}
.zone-pin{flex:none;display:grid;place-items:center;width:22px;height:22px;color:var(--green-600);}
.zone-pin svg{width:17px;height:17px;}
.zone-sub{color:var(--ink-2);font-size:var(--t-xs);}
.zone-note.is-out{
  background:#FDF1EF;border-color:#F3D5D0;color:#8A3227;display:block;
}
.zone-note.is-out b{display:block;margin-bottom:2px;}

.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.slot{
  padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r);
  text-align:left;transition:.2s;display:flex;flex-direction:column;gap:3px;
}
.slot:hover{border-color:var(--green-200);background:var(--green-50);}
.slot.on{border-color:var(--green-600);background:var(--green-50);box-shadow:0 0 0 3px var(--green-100);}
.slot b{
  display:flex;align-items:baseline;gap:7px;
  font-size:var(--t-sm);font-weight:700;color:var(--ink);
}
.slot-date{font-size:var(--t-2xs);font-weight:500;color:var(--muted);}
.slot-time{font-size:var(--t-sm);color:var(--ink-2);font-variant-numeric:tabular-nums;}
.slot-fee{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:var(--t-xs);color:var(--muted);margin-top:2px;
}
.slot-fee.free{color:var(--green-600);font-weight:700;}
.slot-tag{
  height:18px;padding:0 7px;border-radius:var(--pill);
  background:var(--gold-100);color:var(--gold-700);
  font-size:10px;font-weight:800;letter-spacing:.04em;
  display:inline-flex;align-items:center;
}
/* A booked-out slot must be visibly unavailable, not just faint —
   at 42% opacity it read as a rendering glitch. */
.slot.full{
  pointer-events:none;background:var(--bg-soft);border-style:dashed;
  border-color:var(--line);
}
.slot.full b,.slot.full .slot-time{color:var(--muted);font-weight:600;}
.slot.full .slot-fee{color:var(--muted);font-style:italic;}

.mini-list{max-height:290px;overflow:auto;margin-bottom:6px;}
.mini-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);}
.mini-img{width:48px;height:48px;border-radius:10px;background:var(--bg-soft);display:grid;place-items:center;font-size:20px;flex:none;overflow:hidden;}
.mini-img img{width:100%;height:100%;object-fit:cover;}
.mini-n{font-size:13px;font-weight:600;line-height:1.35;}
.mini-q{font-size:12px;color:var(--muted);}
.mini-p{margin-left:auto;font-size:13.5px;font-weight:700;}

.co-done{max-width:620px;margin:0 auto;text-align:center;padding:60px 0 20px;}
.co-tick{width:88px;height:88px;margin:0 auto 24px;border-radius:50%;background:var(--green-100);color:var(--green-700);display:grid;place-items:center;animation:pop .5s var(--e-out);}
.co-tick svg{width:42px;height:42px;}
@keyframes pop{from{transform:scale(.5);opacity:0;}to{transform:none;opacity:1;}}
.co-done h1{font-family:var(--font-display);font-size:clamp(27px,3.2vw,38px);letter-spacing:-.03em;color:var(--green-900);margin-bottom:12px;}
.co-done p{font-size:15px;color:var(--muted);margin-bottom:8px;}
.order-box{margin:28px 0;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-soft);text-align:left;}

/* ---------- 23. ACCOUNT ---------- */
.acct-layout{display:grid;grid-template-columns:262px 1fr;gap:30px;padding:30px 0 10px;align-items:start;}
.acct-nav{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;position:sticky;top:150px;}
.acct-user{display:flex;align-items:center;gap:12px;padding:14px 12px 16px;border-bottom:1px solid var(--line-2);margin-bottom:8px;}
.acct-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,var(--green-600),var(--green-800));color:#fff;display:grid;place-items:center;font-weight:700;flex:none;}
.acct-name{font-size:14px;font-weight:700;}
.acct-mail{font-size:12px;color:var(--muted);word-break:break-all;}
.acct-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r);font-size:14px;font-weight:550;color:var(--ink-2);width:100%;text-align:left;transition:.18s;}
.acct-link:hover{background:var(--green-50);color:var(--green-700);}
.acct-link.active{background:var(--green-100);color:var(--green-800);font-weight:650;}
.acct-link .ico{width:20px;text-align:center;font-size:15px;}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;}
.panel h2{font-size:19px;margin-bottom:5px;}
.panel .p-sub{font-size:13.5px;color:var(--muted);margin-bottom:24px;}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px;}
.stat{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--bg-soft);}
.stat b{display:block;font-size:25px;font-weight:800;color:var(--green-800);letter-spacing:-.02em;}
.stat span{font-size:12.5px;color:var(--muted);}
.order-card{border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px;}
.order-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.order-id{font-size:14px;font-weight:700;}
.order-date{font-size:12.5px;color:var(--muted);}
.pillstat{height:26px;padding:0 12px;border-radius:var(--pill);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;background:var(--green-100);color:var(--green-700);}
.pillstat.pend{background:#FDF3E0;color:var(--warn);}

/* ---------- 22b. HELP CENTRE ---------- */
.help-hero{
  background:linear-gradient(160deg,var(--green-50),var(--bg-soft) 60%);
  border-bottom:1px solid var(--line);padding:26px 0 34px;
}
.help-h1{
  font-family:var(--font-display);font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-.03em;color:var(--green-900);margin-bottom:10px;
}
.help-sub{font-size:15.5px;color:var(--ink-2);max-width:56ch;margin-bottom:24px;}
.faq-search{
  position:relative;display:flex;align-items:center;max-width:560px;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--pill);
  transition:border-color .2s,box-shadow .2s;
}
.faq-search:focus-within{border-color:var(--green-500);box-shadow:0 0 0 4px var(--green-100);}
.faq-search-ico{display:grid;place-items:center;width:46px;height:52px;color:var(--muted);flex:none;}
.faq-search-ico svg{width:18px;height:18px;}
.faq-search input{flex:1;height:52px;border:0;background:none;font-size:15px;min-width:0;padding-right:8px;}
.faq-search input:focus{outline:none;}
.faq-clear{
  flex:none;margin-right:6px;height:36px;padding:0 16px;border-radius:var(--pill);
  font-size:13px;font-weight:600;color:var(--muted);transition:.2s;
}
.faq-clear:hover{background:var(--bg-soft);color:var(--ink);}
.faq-count{font-size:13px;color:var(--muted);margin-top:12px;min-height:19px;}

.help-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 30px;}
.hc-card{
  display:flex;align-items:center;gap:14px;padding:18px 20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .25s var(--e),box-shadow .25s var(--e),border-color .25s;
}
.hc-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--green-200);}
.hc-ico{
  width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--green-100);color:var(--green-700);
}
.hc-ico.wa{background:#25D36615;color:#1DA851;}
.hc-ico svg{width:20px;height:20px;}
.hc-t{display:block;font-size:14px;font-weight:650;word-break:break-word;}
.hc-s{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;}

.faq-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px;}
.faq-chip{
  height:36px;padding:0 16px;border-radius:var(--pill);
  border:1px solid var(--line);background:#fff;
  font-size:13.5px;font-weight:550;color:var(--ink-2);transition:.2s;
}
.faq-chip:hover{border-color:var(--green-200);background:var(--green-50);}
.faq-chip.on{background:var(--green-700);border-color:var(--green-700);color:#fff;font-weight:650;}

.faq-list{max-width:820px;}
.faq-group{margin-bottom:34px;scroll-margin-top:150px;}
.faq-h{
  display:flex;align-items:center;gap:11px;
  font-family:var(--font-display);font-size:21px;letter-spacing:-.02em;
  color:var(--green-900);margin-bottom:14px;
}
.faq-ico{font-size:20px;line-height:1;}
.faq-item{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  margin-bottom:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.faq-item[open]{border-color:var(--green-200);box-shadow:var(--sh-1);}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;cursor:pointer;list-style:none;
  font-size:15px;font-weight:600;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--green-700);}
.faq-item summary svg{width:13px;height:13px;flex:none;opacity:.55;transition:transform .25s var(--e);}
.faq-item[open] summary svg{transform:rotate(180deg);}
.faq-a{padding:0 20px 18px;font-size:var(--t-base);line-height:1.75;color:var(--ink-2);max-width:66ch;}

.help-more{
  margin:14px 0 20px;padding:30px 32px;border-radius:var(--r-xl);
  background:linear-gradient(120deg,var(--green-900),var(--green-700));color:#fff;
}
.help-more h2{font-family:var(--font-display);font-size:24px;letter-spacing:-.025em;margin-bottom:8px;}
.help-more p{font-size:14.5px;opacity:.84;max-width:52ch;margin-bottom:20px;}
.help-more-links{display:flex;gap:10px;flex-wrap:wrap;}
.help-more .btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff;}
.help-more .btn-ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);}

/* ---------- 22c. ABOUT ---------- */
.about{max-width:720px;margin:0 auto;padding:34px 0 20px;}
.about-lede{
  font-family:var(--font-display);font-size:clamp(19px,2.2vw,23px);line-height:1.55;
  color:var(--green-900);padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:32px;
}
.about-sec{margin-bottom:34px;scroll-margin-top:150px;}
.about-sec h2{
  font-family:var(--font-display);font-size:22px;letter-spacing:-.025em;
  color:var(--green-900);margin-bottom:12px;
}
.about-sec p{font-size:15.5px;line-height:1.78;color:var(--ink-2);margin-bottom:14px;}
.about-contact{display:flex;flex-direction:column;gap:12px;}
.about-contact li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2);}
.about-contact svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--green-600);}
.about-contact a{color:var(--green-700);font-weight:600;}
.about-contact a:hover{text-decoration:underline;}

/* ---------- 22d. 404 ---------- */
.nf{padding:70px 0 90px;text-align:center;}
.nf-code{
  font-family:var(--font-display);font-size:clamp(80px,16vw,150px);line-height:.9;
  font-weight:700;letter-spacing:-.05em;color:var(--green-100);margin-bottom:6px;
}
.nf-h1{font-family:var(--font-display);font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;color:var(--green-900);margin-bottom:12px;}
.nf-sub{font-size:16px;color:var(--muted);max-width:48ch;margin:0 auto 28px;}
.nf-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:44px;}
.nf-depts{padding-top:32px;border-top:1px solid var(--line);max-width:640px;margin:0 auto;}
.nf-lbl{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:14px;}
.nf-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.nf-chip{
  height:38px;padding:0 16px;border-radius:var(--pill);border:1px solid var(--line);
  background:#fff;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:550;transition:.2s;
}
.nf-chip:hover{border-color:var(--green-600);color:var(--green-700);transform:translateY(-2px);}

/* skip link — first thing a keyboard or screen reader hits */
.skip{
  position:absolute;left:12px;top:-60px;z-index:300;
  background:var(--green-700);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) var(--r);
  font-size:14px;font-weight:600;transition:top .2s var(--e);
}
.skip:focus{top:0;}

@media (max-width:820px){
  .help-contact{grid-template-columns:1fr;}
}

/* ---------- 22e. ORDER TRACKING ---------- */
.trk-back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  font-size:var(--t-sm);font-weight:600;color:var(--muted);transition:color .2s;
}
.trk-back:hover{color:var(--green-700);}
.trk-back svg{width:14px;height:14px;}

.trk-head{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:22px 24px;border-radius:var(--r-lg);margin-bottom:20px;
  background:linear-gradient(120deg,var(--green-900),var(--green-700));color:#fff;
}
.trk-head.is-done{background:linear-gradient(120deg,#0B5D3B,#12805A);}
.trk-head-ico{
  width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.14);
}
.trk-head-ico svg{width:23px;height:23px;}
.trk-head-t{display:block;font-family:var(--font-display);font-size:var(--t-xl);letter-spacing:-.025em;}
.trk-head-s{display:block;font-size:var(--t-sm);opacity:.85;margin-top:3px;}
.trk-head-no{
  margin-left:auto;font-family:var(--mono,ui-monospace,monospace);
  font-size:var(--t-xs);letter-spacing:.08em;opacity:.7;
  font-variant-numeric:tabular-nums;
}
.trk-demo{margin-bottom:22px;}

/* the journey */
.trk-line{list-style:none;margin:0 0 24px;padding:0;position:relative;}
.trk-step{
  display:flex;align-items:flex-start;gap:16px;padding:0 0 24px 0;position:relative;
}
.trk-step:last-child{padding-bottom:0;}
/* the connecting rail, drawn behind the dots */
.trk-step::before{
  content:"";position:absolute;left:13px;top:26px;bottom:0;width:2px;
  background:var(--line);
}
.trk-step:last-child::before{display:none;}
.trk-step.is-done::before{background:var(--green-600);}
.trk-dot{
  width:28px;height:28px;border-radius:50%;flex:none;z-index:1;
  display:grid;place-items:center;
  border:2px solid var(--line);background:#fff;color:#fff;
  transition:background .3s,border-color .3s,transform .3s var(--e-out);
}
.trk-dot svg{width:13px;height:13px;}
.is-done .trk-dot{background:var(--green-600);border-color:var(--green-600);}
.is-now .trk-dot{
  border-color:var(--green-600);background:#fff;
  box-shadow:0 0 0 5px var(--green-100);transform:scale(1.06);
}
.trk-body{flex:1;min-width:0;padding-top:2px;}
.trk-name{display:block;font-size:var(--t-base);font-weight:650;color:var(--ink);}
.is-todo .trk-name{color:var(--muted);font-weight:550;}
.trk-note{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:2px;line-height:1.55;}
.is-todo .trk-note{opacity:.75;}
.trk-time{
  font-size:var(--t-xs);color:var(--muted);flex:none;padding-top:4px;
  font-variant-numeric:tabular-nums;
}
.is-now .trk-time{color:var(--green-700);font-weight:700;}

.trk-alert{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-soft);margin-bottom:20px;
}
.trk-alert-txt{flex:1;min-width:200px;}
.trk-alert-txt b{display:block;font-size:var(--t-sm);margin-bottom:3px;}
.trk-alert-txt span{font-size:var(--t-xs);color:var(--muted);line-height:1.55;}

.trk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
.trk-card{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;}
.trk-card h4{
  font-size:var(--t-2xs);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:8px;
}
.trk-card p{font-size:var(--t-sm);line-height:1.65;color:var(--ink-2);}
.trk-total{font-size:var(--t-lg);font-weight:800;color:var(--green-800);font-variant-numeric:tabular-nums;}
.trk-help{font-size:var(--t-sm);color:var(--muted);}
.trk-help a{color:var(--green-700);font-weight:650;}
.trk-help a:hover{text-decoration:underline;}

.order-top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

@media (max-width:640px){
  .trk-grid{grid-template-columns:1fr;}
  .trk-head-no{margin-left:0;flex-basis:100%;}
}

/* ---------- 23a. SAVED PAYMENT METHODS ---------- */
.pm-list{display:flex;flex-direction:column;gap:12px;}
.pm-row{
  display:flex;align-items:center;gap:16px;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;transition:border-color .2s,box-shadow .2s;
}
.pm-row:hover{border-color:var(--green-200);box-shadow:var(--sh-1);}
.pm-row.is-default{border-color:var(--green-200);background:var(--green-50);}
.pm-art{width:48px;height:32px;flex:none;display:grid;place-items:center;}
.pm-art svg{width:48px;height:32px;border-radius:5px;display:block;}
.pm-info{flex:1;min-width:0;}
.pm-name{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:15px;font-weight:650;letter-spacing:.02em;
}
.pm-pill{
  height:20px;padding:0 9px;border-radius:var(--pill);
  background:var(--green-700);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;letter-spacing:.06em;
}
.pm-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;}
.pm-actions{display:flex;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end;}
.pm-btn{
  height:32px;padding:0 13px;border-radius:var(--pill);
  border:1px solid var(--line);background:#fff;
  font-size:12.5px;font-weight:600;color:var(--ink-2);transition:.18s;
}
.pm-btn:hover{border-color:var(--green-600);color:var(--green-700);}
.pm-btn.danger:hover{border-color:var(--sale);color:var(--sale);background:var(--sale-soft);}
.pm-foot{font-size:12.5px;color:var(--muted);margin-top:20px;line-height:1.6;max-width:62ch;}

/* add-method dialog */
.pm-input{position:relative;}
.pm-input .inp{padding-right:64px;font-variant-numeric:tabular-nums;letter-spacing:.06em;}
.pm-brand{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:40px;height:27px;pointer-events:none;
}
.pm-brand svg{width:40px;height:27px;border-radius:4px;display:block;}
.pm-nocvv{font-size:12px;color:var(--muted);line-height:1.6;margin-top:2px;}
.pm-pane{margin-bottom:4px;}

/* saved methods at checkout */
.pm-pick{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.pm-pick .opt{padding:13px 15px;}
.pm-pick .pm-art{width:42px;height:28px;}
.pm-pick .pm-art svg{width:42px;height:28px;}

@media (max-width:640px){
  .pm-row{flex-wrap:wrap;}
  .pm-info{flex-basis:calc(100% - 64px);}
  .pm-actions{flex-basis:100%;justify-content:flex-start;}
}

/* ---------- 23b. LEGAL PAGES ---------- */
.legal{max-width:760px;margin:0 auto;padding:34px 0 20px;}
.legal-draft{
  padding:16px 20px;border-radius:var(--r);margin-bottom:28px;
  background:#FDF6E9;border:1px solid #F0DFBC;color:#7A5A19;font-size:13.5px;line-height:1.6;
}
.legal-draft b{display:block;margin-bottom:3px;}
.legal-updated{font-size:var(--t-2xs);color:var(--muted);margin-bottom:18px;}
.legal-intro{
  font-size:16.5px;line-height:1.7;color:var(--ink-2);
  padding-bottom:28px;border-bottom:1px solid var(--line);
}
.legal-toc{
  margin:28px 0 40px;padding:22px 24px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);
}
.legal-toc h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.legal-toc ol{list-style:none;columns:2;column-gap:32px;}
.legal-toc li{margin-bottom:8px;break-inside:avoid;}
.legal-toc a{font-size:13.5px;color:var(--ink-2);}
.legal-toc a:hover{color:var(--green-700);text-decoration:underline;}
.legal-sec{margin-bottom:34px;scroll-margin-top:150px;}
.legal-sec h2{
  font-family:var(--font-display);font-size:20px;letter-spacing:-.02em;
  color:var(--green-900);margin-bottom:12px;
}
.legal-sec p{font-size:15px;line-height:1.75;color:var(--ink-2);margin-bottom:13px;}
.legal-sec p:last-child{margin-bottom:0;}
.legal mark.todo{
  background:#FFF1C9;color:#7A5A19;padding:1px 7px;border-radius:5px;
  font-weight:600;font-size:13.5px;box-decoration-break:clone;
}
.legal-foot{
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-2);
}
.legal-foot a{color:var(--green-700);font-weight:600;}
.legal-foot a:hover{text-decoration:underline;}
.legal-cross{margin-top:10px;}
@media (max-width:640px){
  .legal-toc ol{columns:1;}
}

/* ---------- 24. MISC ---------- */
.halal{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--pill);background:var(--green-100);color:var(--green-700);font-size:11px;font-weight:800;letter-spacing:.04em;}
.note{padding:14px 16px;border-radius:var(--r);background:var(--green-50);border:1px solid var(--green-200);font-size:13px;color:var(--green-800);line-height:1.6;}
.note.warn{background:#FDF6E9;border-color:#F0DFBC;color:#7A5A19;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--e-out),transform .7s var(--e-out);}
.reveal.in{opacity:1;transform:none;}

/* ---------- 25. RESPONSIVE ---------- */
@media (max-width:1180px){
  .dept-grid{grid-template-columns:repeat(3,1fr);}
  .mega{grid-template-columns:repeat(3,1fr);}
  .cat-grid{grid-template-columns:repeat(6,1fr);}
  .prod-grid{grid-template-columns:repeat(4,1fr);}
  .prod-grid.g5{grid-template-columns:repeat(4,1fr);}
  .why-grid{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1.4fr repeat(3,1fr);}
  .foot-brand{grid-column:1/-1;}
}
/* Between the desktop grid and the mobile header there is a band where
   topbar + brand + search + three actions no longer fit on one line.
   Drop the wordier bits rather than letting the page scroll sideways. */
@media (max-width:1120px){
  .header-main .wrap{gap:16px;}
  .hact-txt{display:none;}
  .hact{padding:8px 10px;}
  .cart-count{left:auto;right:2px;top:2px;}
  .search-cat{max-width:130px;padding-left:16px;}
  .topbar-links .topbar-item{display:none;}
  .navlinks a{padding:9px 11px;}
  .ticker{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);}
}

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-side{flex-direction:row;}
  .hero-main{min-height:var(--hero-h,340px);padding:38px;}
  .hero-art{width:38%;opacity:.9;}
  .shop-layout,.cart-layout,.co-layout,.acct-layout{grid-template-columns:1fr;}
  .filters,.summary,.acct-nav,.pdp-gallery{position:static;}
  .filters{display:none;}
  .filters.open{display:block;}
  .filter-toggle{display:inline-flex;}
  .pdp{grid-template-columns:1fr;gap:30px;}
  .pdp-gallery{max-width:520px;margin-inline:auto;width:100%;}
  .nav-flash{display:none;}
  .news{grid-template-columns:1fr;padding:34px;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .trust-item:nth-child(2){border-right:0;}
  .trust-item:nth-child(-n+2){border-bottom:1px solid var(--line-2);}
}
@media (max-width:900px){
  .catbar,.topbar-links,.hact-txt{display:none;}
  .burger{display:inline-flex;}
  .header-main .wrap{height:70px;gap:14px;flex-wrap:wrap;}
  .search{order:3;flex-basis:100%;max-width:none;margin-bottom:12px;}
  .header-main .wrap{height:auto;padding-top:12px;}
  .search-cat{display:none;}
  .cart-count{left:auto;right:2px;top:0;}
  .hact{padding:8px;}
  .lang-btn{padding:0 10px;}
  .promo-grid{grid-template-columns:1fr;}
  .rev-grid{grid-template-columns:1fr;}
  /* one column has nothing to fan out to, so the branch keeps only
     its stem */
  .promise-branch{height:40px;}
  .filters.open{position:fixed;inset:auto 0 0 0;z-index:210;max-height:82vh;overflow:auto;border-radius:var(--r-xl) var(--r-xl) 0 0;}
}
@media (max-width:768px){
  /* a phone has swipe; an arrow here only covers a card */
  .rail-btn{display:none;}

  /* a fixed background repaints on every scroll frame on mobile, and
     the wash is barely visible on a narrow screen anyway */
  body{background-attachment:scroll,scroll,scroll;}
  :root{--gut:16px;}
  /* on a phone the ticker gets the whole bar to itself */
  .topbar{font-size:11.5px;}
  .topbar .wrap{gap:0;padding:0;height:36px;}
  .topbar-links{display:none;}
  .tk{padding:0 14px;gap:7px;}
  .sec{padding:38px 0;}
  .cat-grid{grid-template-columns:repeat(3,1fr);}
  .dept-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .dept-card{padding:20px 18px 16px;}
  .prod-grid,.prod-grid.g5,.prod-grid.g4{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .hero-side{flex-direction:column;}
  .hero-main{padding:0;min-height:var(--hero-h,430px);}
  .hero-art,.hero-disc{display:none;}

  /* A phone gives the copy the whole panel, so the stage has to be tall
     enough to hold the tallest slide plus the rail. Slides are absolutely
     positioned for the crossfade and cannot push the box open themselves. */
  .hero-slides{min-height:var(--hero-h,430px);}
  .hero-slide{padding:28px 22px 78px;}

  /* Centre the rail and drop the arrows: swiping is the natural gesture
     here, and two fewer buttons keeps the cluster clear of the CTA. */
  .hero-rail{
    left:50%;right:auto;bottom:16px;transform:translateX(-50%);
    padding:7px 12px;
  }
  .hero-rail .hero-nav#heroPrev,
  .hero-rail .hero-nav#heroNext{display:none;}
  .hero-dot{width:20px;}
  .hero-dot.on{width:40px;}
  /* On a phone the copy has the whole width, so the picture emerges
     from the BOTTOM rather than the right — same idea turned through
     ninety degrees. The headline sits on clean brand colour and the
     shot fills the space under the buttons. */
  .hero-photo{
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.12) 34%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.80) 80%, #000 100%);
            mask-image:linear-gradient(180deg, rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.12) 34%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.80) 80%, #000 100%);
  }
  /* the dark billboards keep their heavier share of the picture here too,
     and these carry the theme class so they outrank the wide-screen rule
     that would otherwise still be running the fade left-to-right */
  .hero-slide.theme-emerald .hero-photo,
  .hero-slide.theme-plum .hero-photo,
  .hero-slide.theme-indigo .hero-photo{
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.07) 0%,
      rgba(0,0,0,.12) 34%, rgba(0,0,0,.42) 58%, rgba(0,0,0,.86) 80%, #000 100%);
            mask-image:linear-gradient(180deg, rgba(0,0,0,.07) 0%,
      rgba(0,0,0,.12) 34%, rgba(0,0,0,.42) 58%, rgba(0,0,0,.86) 80%, #000 100%);
  }
  .hero-slide.has-photo{--scrim:linear-gradient(
    180deg, rgba(3,38,23,.70) 0%, rgba(5,55,34,.66) 55%, rgba(11,93,59,.34) 100%);}
  .hero-slide.has-photo.theme-plum{--scrim:linear-gradient(
    180deg, rgba(30,7,24,.72) 0%, rgba(60,15,42,.68) 55%, rgba(112,28,71,.36) 100%);}
  .hero-slide.has-photo.theme-gold{--scrim:linear-gradient(
    180deg, rgba(247,235,203,.60) 0%, rgba(243,228,186,.62) 55%, rgba(230,206,140,.36) 100%);}
  .hero-slide.has-photo.theme-indigo{--scrim:linear-gradient(
    180deg, rgba(7,13,34,.72) 0%, rgba(15,30,68,.68) 55%, rgba(30,61,130,.36) 100%);}
  .hero-p{max-width:none;}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .news{padding:28px 22px;}
  .modal-box{padding:26px 22px 24px;}
  .cart-row{grid-template-columns:70px 1fr auto;gap:12px;padding:16px;}
  .cart-img{width:70px;height:70px;}
  .cart-line{grid-column:2/-1;display:flex;align-items:center;justify-content:space-between;text-align:left;}
  .opt-grid.two{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .pdp-perks{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr;}
  .steps{gap:0;}
  .step span.step-t{display:none;}
  .step.on span.step-t{display:inline;}
  .toasts{left:16px;right:16px;bottom:16px;align-items:stretch;}
  .toast{max-width:none;}
}
@media (max-width:520px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr;}
  .brand-tag{display:none;}
  .pdp-thumbs{grid-template-columns:repeat(4,1fr);}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .reveal{opacity:1;transform:none;}
  /* NOTE: the offer ticker is deliberately left running here. It is the
     shop's main promo surface and is driven by JS rather than a CSS
     animation, so it keeps moving even with animation effects switched
     off at OS level. It still pauses on hover/focus. */

  /* The trust strip's hover feedback is also kept. Reduced motion is a
     request for less vestibular disturbance, not for a dead interface:
     these are 2-3px shifts and a 7° tilt that only ever play in direct
     response to a deliberate hover, never on their own and never on a
     loop. Snapping them to zero made the strip feel broken rather than
     calm. Everything genuinely ambient — parallax, floats, the pulsing
     dot — stays disabled above. */
  .trust-item,
  .trust-item::after,
  .trust-ico,
  .trust-ico svg > *{transition-duration:.34s !important;}
}

@media print{
  .site-header,.footer,.toasts,.drawer,.scrim{display:none !important;}
}

/* Placed last on purpose. An earlier max-width:640 block would still be
   overridden by the max-width:1024 rules further down the file, since
   both match on a phone and the later one wins. */
@media (max-width:640px){
  /* two across leaves about 150px for the words once the icon tile has
     taken its share, which wraps the copy to one word a line */
  .trust-grid{grid-template-columns:1fr;}
  .trust-item{border-right:0;border-bottom:1px solid var(--line-2);padding:16px 18px;}
  .trust-item:last-child{border-bottom:0;}
}

@media (max-width:1120px){
  .hero-disc{width:118px;height:118px;right:28px;top:28px;}
  .hero-disc b{font-size:36px;}
  .hero-disc span{font-size:10px;}
}