:root{
  --ink:#252525;
  --brand:#315C3A;
  --brand-dk:#24462B;
  --brand-tint:#DFEDD5;
  --paper:#EEF5E9;
  --paper-2:#DCE9D2;
  --red:#9B090D;
  --red-dk:#7A0709;
  --accent:#EEF5E9;
  --star:#315C3A;
  --line:rgba(37,37,37,.16);
  --sans:"Poppins",system-ui,sans-serif;
  --serif:"Poppins",system-ui,sans-serif;
  --pad:clamp(18px,4vw,56px);
  --hero-tint:#2E2036;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;letter-spacing:-.015em;line-height:1.05;margin:0}
.wrap{max-width:1340px;margin:0 auto;padding-inline:var(--pad)}

/* ================= HEADER ================= */
header{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid rgba(37,37,37,.1)}
.bar{display:flex;align-items:center;gap:18px;height:86px}
.logo{flex:none;display:block}
.logo img{height:52px;width:auto}
nav{display:flex;align-items:center;gap:26px;margin-left:auto}
nav a{font-family:var(--sans);font-size:15.5px;font-weight:600;text-decoration:none;color:var(--ink);position:relative;padding:4px 0}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;background:var(--brand);transition:right .25s ease}
nav a:hover::after,nav a.on::after{right:0}
.search{position:relative;flex:none;width:190px}
.search input{width:100%;border:1px solid rgba(37,37,37,.14);background:#F5F4F1;border-radius:999px;padding:9px 36px 9px 16px;font-family:var(--sans);font-size:14px;color:var(--ink)}
.search input::placeholder{color:rgba(37,37,37,.42)}
.search input:focus{outline:none;border-color:var(--brand);background:#fff}
.search button{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;padding:6px;line-height:0;color:rgba(37,37,37,.55)}
.acct{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;border:0;border-radius:999px;padding:9px 18px;font-family:var(--sans);font-size:14.5px;font-weight:600;white-space:nowrap}
.acct:hover{background:var(--brand-dk)}
.iconbtn{position:relative;background:none;border:0;padding:6px;line-height:0;color:var(--ink)}
.iconbtn:hover{color:var(--brand)}
.iconbtn b{position:absolute;top:-1px;right:-3px;background:var(--brand);color:#fff;font-family:var(--sans);font-size:10.5px;font-weight:700;min-width:17px;height:17px;border-radius:999px;display:grid;place-items:center;padding:0 4px}
.burger{display:none;background:none;border:0;padding:6px;line-height:0}
.rule{height:3px;background:var(--ink)}

/* mobile drawer nav */
.mnav{display:none;position:fixed;inset:0 0 0 auto;width:min(310px,86%);background:#fff;z-index:95;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);padding:22px;flex-direction:column;gap:2px}
.mnav.on{transform:none}
.mnav a{font-family:var(--sans);font-weight:600;font-size:19px;text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line)}
.mnav .close{align-self:flex-end;background:none;border:0;font-size:28px;line-height:1;margin-bottom:8px}

/* ================= HERO ================= */
.hero{background:var(--hero-tint);color:var(--paper);transition:background .8s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 12% 0%,rgba(255,255,255,.08),transparent 60%);pointer-events:none}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;padding-block:clamp(46px,6.5vw,80px) clamp(42px,5.5vw,68px);position:relative;z-index:2}
.eyebrow{font-family:var(--sans);font-size:13px;font-weight:500;opacity:.72;margin:0 0 20px}
.grain-name{font-family:var(--sans);font-weight:700;font-size:clamp(42px,7.4vw,92px);line-height:.94;letter-spacing:-.035em;margin:0 0 8px}
.grain-latin{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(18px,2.2vw,27px);opacity:.82;margin:0 0 20px}
.grain-note{font-size:18px;line-height:1.55;max-width:44ch;opacity:.9;margin:0 0 14px}
.grain-facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0;list-style:none}
.grain-facts li{font-family:var(--sans);font-size:12.5px;font-weight:500;border:1px solid rgba(234,231,219,.35);border-radius:999px;padding:5px 13px}
.hero-cta{display:inline-flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);text-decoration:none;font-family:var(--sans);font-weight:600;font-size:15px;padding:13px 24px;border-radius:999px}
.hero-cta:hover{background:#fff;color:var(--brand)}
.hero-cta small{font-family:var(--serif);font-weight:400;opacity:.6}
.index{border-top:1px solid rgba(234,231,219,.22);align-self:start}
.index button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(234,231,219,.22);color:var(--paper);padding:11px 4px;font-family:var(--sans);font-size:14.5px;font-weight:500;opacity:.6;transition:opacity .25s,padding .25s}
.index button:hover{opacity:1;padding-left:10px}
.index button[aria-current="true"]{opacity:1;font-weight:700}
.chip{width:15px;height:15px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(234,231,219,.4)}
.index .cat{margin-left:auto;font-family:var(--serif);font-size:13px;opacity:.65}

/* ================= STOCKISTS ================= */
.stockists{background:var(--brand)}
.stockists .wrap{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;padding-block:24px;color:#fff}
.stockists p{margin:0}
.stockists .lead{font-family:var(--sans);font-weight:700;font-size:15px;line-height:1.35}
.stockists .lead em{display:block;font-style:normal;font-weight:400;opacity:.78;font-size:13px}
.names{font-family:var(--sans);font-size:14.5px;font-weight:500;opacity:.95}

/* ================= SECTIONS ================= */
section{padding-block:clamp(54px,6.5vw,92px)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:34px;flex-wrap:wrap}
.head h2{font-size:clamp(28px,3.6vw,44px);max-width:16ch}
.head p{margin:8px 0 0;max-width:52ch;opacity:.72;font-size:16.5px}
.head a{font-family:var(--sans);font-size:14.5px;font-weight:600;text-decoration:none;color:var(--brand);border-bottom:2px solid var(--brand);padding-bottom:2px;white-space:nowrap}

.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat-tile{position:relative;overflow:hidden;border-radius:4px;text-decoration:none;color:#fff;min-height:210px;background:var(--brand);display:flex;align-items:flex-end}
.cat-tile:nth-child(1){grid-column:span 2;min-height:300px}
.cat-tile:nth-child(4){grid-column:span 2}
.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cat-tile:hover img{transform:scale(1.045)}
.cat-tile .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(30,6,7,.85),rgba(30,6,7,.05) 62%)}
.cat-tile .txt{position:relative;padding:20px;z-index:2}
.cat-tile h3{font-size:22px;margin-bottom:3px}
.cat-tile .sub{font-family:var(--serif);font-style:italic;font-size:15px;opacity:.82}
.cat-tile .n{position:absolute;top:16px;right:18px;z-index:2;font-family:var(--sans);font-size:12.5px;font-weight:500;opacity:.85}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{display:flex;flex-direction:column}
.shot{position:relative;aspect-ratio:1;background:var(--paper-2);overflow:hidden;border-radius:4px}
.shot img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;top:10px;left:10px;background:var(--brand);color:#fff;font-family:var(--sans);font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px}
.card h3{font-size:18.5px;margin-top:14px}
.card .desc{font-size:15px;opacity:.66;margin-top:3px;line-height:1.4}
.meta{display:flex;align-items:baseline;gap:9px;margin-top:9px}
.price{font-family:var(--sans);font-size:19px;font-weight:700}
.was{font-size:14.5px;opacity:.5;text-decoration:line-through}
.stars{font-size:13.5px;opacity:.72;margin-top:6px}
/* Quantity stepper joined to the button, as one control. */
.qtyadd{display:flex;align-items:stretch;gap:8px;margin-top:12px}
.qty{display:flex;align-items:center;flex:none;border:1.5px solid var(--brand);
  border-radius:10px;overflow:hidden;background:#fff}
.qty button{width:30px;align-self:stretch;background:none;border:0;cursor:pointer;
  color:var(--brand);font-family:var(--sans);font-size:17px;font-weight:700;line-height:1;
  transition:background .18s}
.qty button:hover{background:var(--brand-tint)}
.qty button:disabled{opacity:.32;cursor:default;background:none}
.qty .qnum{min-width:26px;text-align:center;font-family:var(--sans);font-size:14.5px;
  font-weight:700;font-variant-numeric:tabular-nums;
  border-inline:1.5px solid var(--brand)}

/* WooCommerce renders this as a link, so the text colour and underline have to
   be stated or the theme's link styles leak through and it reads as dark text
   on dark green. */
.add,.qtyadd a.add,.qtyadd .add{flex:1;display:inline-flex;align-items:center;
  justify-content:center;margin:0;
  background:var(--brand);border:1.5px solid var(--brand);color:#fff !important;
  text-decoration:none !important;border-radius:10px;padding:11px 14px;
  font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.02em;
  text-align:center;transition:background .2s,border-color .2s,box-shadow .25s}
.add:hover,.qtyadd a.add:hover{background:var(--brand-dk);border-color:var(--brand-dk);
  box-shadow:0 8px 18px rgba(49,92,58,.28)}
.add.loading{opacity:.7}
.add.done,.add.added{background:var(--brand-dk);border-color:var(--brand-dk);color:#fff !important}

/* WooCommerce drops a "View cart" link in after a successful add */
.qtyadd .added_to_cart{display:none}

.qtyadd.is-plain .add{flex:1}
@media (max-width:420px){
  .qtyadd{flex-wrap:wrap}
  .qty{width:100%;justify-content:center}
  .qty button{flex:1}
}

.finder{background:var(--brand-tint)}
.finder-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.qs{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:0;list-style:none}
.qs button{background:none;border:1.5px solid rgba(49,92,58,.3);border-radius:999px;padding:9px 17px;font-family:var(--sans);font-size:14.5px;font-weight:500}
.qs button:hover{border-color:var(--brand)}
.qs button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.result{background:#fff;border-radius:4px;padding:28px;min-height:250px}
.result h3{font-size:23px;margin-bottom:4px}
.result .sub{font-family:var(--serif);font-style:italic;font-size:16.5px;opacity:.7;margin-bottom:12px}
.result p{margin:0 0 18px;font-size:16.5px}
.result .empty{opacity:.6;font-family:var(--sans);font-size:16px}
.rec{display:flex;gap:16px;align-items:center;border-top:1px solid var(--line);padding-top:16px}
.rec div{flex:1}
.rec strong{font-family:var(--sans);font-size:16px;display:block}
.rec .p{font-family:var(--sans);font-weight:600;opacity:.7;font-size:14.5px}

/* The four steps, side by side with a hairline rail behind the numerals. Short
   enough to scan; the detail lives on the About page. */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.2vw,32px);padding-block:clamp(26px,3vw,40px) 0;border:0}
.step{position:relative;background:none;padding:0;border:0}
.step::before{content:"";position:absolute;top:15px;left:calc(50% + 24px);
  right:calc(-50% - 24px);height:1px;background:var(--line)}
.step:last-child::before{display:none}

.step .num{position:relative;z-index:2;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;
  font-family:var(--sans);font-size:13px;font-weight:800;margin-bottom:16px}
.step h3{font-size:17.5px;letter-spacing:-.02em;margin-bottom:7px}
.step p{margin:0;font-size:15px;line-height:1.6;opacity:.68;max-width:32ch}

/* the way through to the full account */
.millmore{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,44px)}
.millmore a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--brand);font-family:var(--sans);font-size:15px;font-weight:700;
  border-bottom:2px solid transparent;padding-bottom:3px;transition:border-color .25s}
.millmore a:hover{border-bottom-color:var(--brand)}

@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);row-gap:clamp(24px,3vw,34px)}
  .step:nth-child(2)::before{display:none}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr;row-gap:22px}
  .step::before{display:none}
  .step .num{margin-bottom:10px}
}

footer{background:var(--ink);color:var(--paper);padding-block:clamp(46px,5.5vw,68px) 28px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
footer h4{font-size:14px;font-weight:600;margin-bottom:14px;opacity:.6}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px}
footer a{font-size:15.5px;text-decoration:none;opacity:.88}
footer a:hover{color:var(--accent)}
.flogo{height:54px;width:auto;margin-bottom:14px;filter:brightness(0) invert(1);opacity:.95}
.addr{font-size:15.5px;opacity:.75;max-width:30ch;margin:0 0 14px}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{font-family:var(--sans);font-size:11.5px;font-weight:500;border:1px solid rgba(234,231,219,.3);border-radius:4px;padding:5px 10px;opacity:.8}
.legal{border-top:1px solid rgba(234,231,219,.16);margin-top:42px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;opacity:.6}

.scrim{position:fixed;inset:0;background:rgba(20,16,12,.5);opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(410px,100%);background:var(--paper);z-index:90;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.dhead h3{font-size:19px}
.dhead button{background:none;border:0;font-size:24px;line-height:1;padding:4px 8px}
.items{flex:1;overflow:auto;padding:8px 24px}
.line{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.line img{width:62px;height:62px;object-fit:cover;border-radius:3px;background:var(--paper-2)}
.line .nm{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.25}
.qty{display:flex;align-items:center;gap:12px;margin-top:8px}
.qty button{width:25px;height:25px;border:1px solid var(--line);background:none;border-radius:50%;line-height:1}
.qty span{font-family:var(--sans);font-size:14px;font-weight:600;min-width:14px;text-align:center}
.line .amt{margin-left:auto;font-family:var(--sans);font-weight:600;font-size:15px}
.empty-cart{padding:60px 0;text-align:center;opacity:.55;font-size:16px}
.dfoot{border-top:1px solid var(--line);padding:20px 24px}
.tot{display:flex;justify-content:space-between;font-family:var(--sans);font-weight:700;font-size:18px;margin-bottom:6px}
.ship{font-size:14px;opacity:.65;margin:0 0 16px}
/* This was styling the drawer's Checkout button, but WooCommerce also puts
   class="checkout" on the checkout FORM — so the whole form was being drawn as
   a giant green pill with white text. Scoped to buttons and links only. */
button.checkout,a.checkout,.drawer .checkout{width:100%;background:var(--brand);color:#fff;
  border:0;border-radius:999px;padding:15px;font-family:var(--sans);font-weight:600;font-size:15.5px}
button.checkout:hover,a.checkout:hover,.drawer .checkout:hover{background:var(--brand-dk)}
/* and make sure nothing leaks onto the form itself */
form.checkout{background:none;color:inherit;border-radius:0;padding:0;width:auto}

@media (max-width:1180px){ nav{gap:18px} nav a{font-size:14.5px} .search{width:150px} }
@media (max-width:1040px){
  .bar{height:74px;gap:12px}
  nav,.search,.acct span{display:none}
  .acct{padding:9px 12px}
  .burger{display:block;order:9}
  .mnav{display:flex}
  .hero-in,.finder-in{grid-template-columns:1fr;gap:38px}
  .grid,.steps{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .cat-tile:nth-child(1),.cat-tile:nth-child(4){grid-column:span 2}
  .fgrid{grid-template-columns:1fr 1fr}
  .stockists .wrap{grid-template-columns:1fr;gap:10px}
}
@media (max-width:680px){
  .logo img{height:42px}
  .grid{grid-template-columns:1fr 1fr;gap:16px}
  .steps{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}html{scroll-behavior:auto}}

/* ---------- WordPress / WooCommerce additions ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:10px 16px;z-index:200;font-family:var(--sans)}
.skip:focus{left:8px;top:8px}
nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
nav li{margin:0}
.mnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.woo{padding-block:clamp(40px,5vw,72px)}
.woo .products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;list-style:none;margin:0;padding:0}
.grid .products{display:contents}
.card .added_to_cart{display:none}
.card .add.loading{opacity:.6;pointer-events:none}
.entry{max-width:70ch;margin-inline:auto}
.woocommerce-mini-cart{list-style:none;margin:0;padding:0}
.woocommerce-mini-cart-item{display:flex;gap:12px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);position:relative}
.woocommerce-mini-cart-item img{width:62px;height:62px;object-fit:cover;border-radius:3px;order:-1}
.woocommerce-mini-cart-item a{font-family:var(--sans);font-size:15px;font-weight:600;text-decoration:none;line-height:1.25}
.woocommerce-mini-cart-item .quantity{display:block;font-family:var(--sans);font-size:14px;opacity:.7;margin-top:4px}
.woocommerce-mini-cart-item .remove_from_cart_button{position:absolute;right:0;top:16px;text-decoration:none;opacity:.45;font-size:18px}
.woocommerce-mini-cart-item .remove_from_cart_button:hover{opacity:1;color:var(--brand)}
.woocommerce-mini-cart__total{display:flex;justify-content:space-between;font-family:var(--sans);font-weight:700;font-size:18px;padding:18px 0 0;margin:0}
.woocommerce-mini-cart__empty-message{padding:60px 0;text-align:center;opacity:.55;font-size:16px}
.woocommerce-mini-cart__buttons{display:none}
a.checkout{display:block;text-align:center;text-decoration:none;background:var(--brand);color:#fff;border-radius:999px;padding:15px;font-family:var(--sans);font-weight:600;font-size:15.5px}
a.checkout:hover{background:var(--brand-dk);color:#fff}
@media (max-width:1040px){.woo .products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.woo .products{grid-template-columns:1fr 1fr;gap:16px}}

/* ---------- video & reels ---------- */
.watch{background:var(--ink);color:var(--paper)}
.watch .head h2{color:var(--paper)}
.watch .head p{opacity:.7}
.watch .head a{color:var(--paper);border-color:var(--accent)}
.feature{position:relative;max-width:880px;border-radius:5px;overflow:hidden;background:#000;aspect-ratio:16/9}
.feature video{width:100%;height:100%;object-fit:cover;display:block}
.playbtn{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,16,12,.32);border:0;width:100%;cursor:pointer;transition:background .25s}
.playbtn:hover{background:rgba(20,16,12,.18)}
.playbtn span{width:64px;height:64px;border-radius:50%;background:var(--brand);display:grid;place-items:center;box-shadow:0 6px 26px rgba(0,0,0,.4)}
.playbtn svg{margin-left:3px}
.playbtn.hide{opacity:0;pointer-events:none}
.fcap{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;background:linear-gradient(to top,rgba(10,8,6,.88),transparent);pointer-events:none}
.fcap strong{display:block;font-family:var(--sans);font-size:19px;font-weight:600}
.fcap span{font-family:var(--serif);font-style:italic;font-size:15px;opacity:.8}
.fcap.hide{opacity:0;transition:opacity .3s}

.reels-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:52px 0 18px;flex-wrap:wrap}
.reels-head h3{font-size:22px}
.reels-head p{margin:0;font-size:15px;opacity:.6}
.reels{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(212px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.reels::-webkit-scrollbar{height:6px}
.reels::-webkit-scrollbar-thumb{background:rgba(234,231,219,.28);border-radius:99px}
.reel{position:relative;aspect-ratio:9/16;border-radius:5px;overflow:hidden;background:#000;scroll-snap-align:start}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel .playbtn span{width:46px;height:46px}
.reel .rcap{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(to top,rgba(10,8,6,.9),transparent);font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.3;pointer-events:none;transition:opacity .3s}
.reel .rcap.hide{opacity:0}
.reel .dur{position:absolute;top:10px;right:10px;font-family:var(--sans);font-size:11.5px;font-weight:600;background:rgba(10,8,6,.6);padding:3px 8px;border-radius:999px}
@media (max-width:680px){ .reels{grid-auto-columns:minmax(168px,1fr);gap:12px} .reels-head{margin-top:36px} }

/* ---------- taste the difference: category carousel ---------- */
.taste{background:#fff;padding-block:clamp(48px,6vw,80px)}
.taste h2{text-align:center;font-size:clamp(26px,3.2vw,38px);margin-bottom:clamp(30px,4vw,46px)}
.carousel{position:relative}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * 26px) / 5);gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 4px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.tcard{scroll-snap-align:start;text-decoration:none;color:var(--ink);display:block;text-align:center}
.tcard .circle{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--paper-2);box-shadow:0 4px 18px rgba(37,37,37,.13);transition:box-shadow .3s,transform .3s}
.tcard .circle img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tcard:hover .circle{box-shadow:0 10px 30px rgba(49,92,58,.22);transform:translateY(-4px)}
.tcard:hover .circle img{transform:scale(1.07)}
.tcard .label{display:block;margin-top:16px;font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.01em}
.tcard .count{display:block;font-size:14px;opacity:.55;margin-top:1px}

.arrow{position:absolute;top:0;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 3px 12px rgba(37,37,37,.28);transition:background .2s,opacity .2s}
.arrow:hover{background:var(--brand)}
.arrow[disabled]{opacity:.25;pointer-events:none}
.arrow.prev{left:-6px}
.arrow.next{right:-6px}

.dots{display:flex;justify-content:center;gap:8px;margin-top:26px}
.dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:rgba(37,37,37,.2);transition:width .3s,background .3s}
.dots button[aria-current="true"]{width:26px;background:var(--ink)}

@media (max-width:1000px){ .rail{grid-auto-columns:calc((100% - 2 * 20px) / 3);gap:20px} }
@media (max-width:680px){
  .rail{grid-auto-columns:calc((100% - 16px) / 2.2);gap:16px}
  .tcard .label{font-size:15.5px;margin-top:12px}
  .arrow{width:32px;height:32px}
  .arrow.prev{left:-4px}
  .arrow.next{right:-4px}
}

/* ---------- certification strip ---------- */
.certs{background:#fff;border-top:1px solid rgba(37,37,37,.08);padding-block:clamp(26px,3.4vw,40px)}
.certrail{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,56px);overflow-x:auto;scrollbar-width:none}
.certrail::-webkit-scrollbar{display:none}
.cert{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--brand);opacity:.82;transition:opacity .25s}
.cert:hover{opacity:1}
.cert svg{display:block;height:62px;width:auto}
.cert img{height:62px;width:auto;object-fit:contain}
.cert small{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--ink);opacity:.55;text-align:center;max-width:15ch;line-height:1.3}
@media (max-width:680px){ .cert svg,.cert img{height:50px} .certrail{justify-content:flex-start;padding-bottom:6px} }

/* ---------- tabbed product shelf ---------- */
.shelf{background:#fff;padding-top:clamp(44px,5vw,64px)}
.tabs{display:flex;justify-content:center;gap:clamp(20px,4vw,46px);flex-wrap:wrap;margin-bottom:clamp(28px,3.6vw,42px)}
.tabs button{background:none;border:0;padding:6px 2px;font-family:var(--sans);font-size:clamp(19px,2.2vw,26px);font-weight:600;letter-spacing:-.02em;color:rgba(37,37,37,.42);border-bottom:2.5px solid transparent;transition:color .2s,border-color .2s}
.tabs button:hover{color:rgba(37,37,37,.7)}
.tabs button[aria-selected="true"]{color:var(--brand);border-color:var(--brand)}
.shelfgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.shelfgrid .card h3{font-size:16px;line-height:1.25}
.shelfgrid .card .desc{font-size:13.5px;margin-top:4px}
.shelfgrid .card .stars{font-size:12.5px}
.shelfgrid .card .price{font-size:17px}
.shelfgrid .card .was{font-size:13.5px}
.shelfgrid .card .add{padding:9px;font-size:13.5px}
.shelfmore{display:flex;justify-content:center;margin-top:34px}
.shelfmore a{display:inline-block;text-decoration:none;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--brand);border:1.5px solid var(--brand);border-radius:999px;padding:12px 30px;transition:background .2s,color .2s}
.shelfmore a:hover{background:var(--brand);color:#fff}
.panel[hidden]{display:none}
@media (max-width:1200px){ .shelfgrid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:900px){ .shelfgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){ .shelfgrid{grid-template-columns:repeat(2,1fr);gap:14px} }

/* filled add-to-cart, matching the shelf */
.add{background:var(--brand);border-color:var(--brand);color:#fff}
.add:hover{background:var(--brand-dk);border-color:var(--brand-dk);color:#fff}

/* Woo's [products] shortcode wraps cards in ul.products; dissolve it into our grid. */
.shelfgrid .products,
.grid .products{display:contents;list-style:none;margin:0;padding:0}

/* ---------- fixes ---------- */

/* 1. Carousel circles were <span> elements left as inline, so aspect-ratio,
      border-radius and overflow were all being ignored. */
.tcard .circle{display:block}
.cat-tile .txt,.cat-tile .sub{display:block}

/* 2. Broken or slow images should still read as a designed circle. */
.tcard .circle{background:linear-gradient(150deg,var(--paper-2),#cfc9b6)}

/* 3. Tighten the gap between the carousel and the certification strip. */
.taste{padding-bottom:clamp(30px,3.4vw,44px)}
.carousel .dots{margin-top:22px}

/* 4. Certification strip: larger marks, readable captions, real separation. */
.certs{border-top:1px solid rgba(37,37,37,.09);border-bottom:1px solid rgba(37,37,37,.09);padding-block:clamp(30px,3.6vw,44px)}
.certrail{gap:clamp(16px,3vw,40px)}
.cert{gap:11px;opacity:1}
.cert svg,.cert img{height:74px}
.cert svg{stroke-width:0}
.cert small{font-size:12.5px;font-weight:600;opacity:.72;max-width:16ch}
@media (max-width:900px){ .cert svg,.cert img{height:58px} .cert small{font-size:11.5px} }

/* 5. The shelf background was clipped to the content width because the section
      carried .wrap itself. It now bleeds full width with .wrap nested inside. */
.shelf{background:#fff;padding-block:clamp(44px,5vw,64px) clamp(48px,5.5vw,72px)}

/* 6. Tab labels were too faint to read as navigation. */
.tabs button{color:rgba(37,37,37,.55);border-bottom-width:3px}
.tabs button:hover{color:var(--ink)}

/* ---------- certification strip: larger, continuously running ---------- */
.certs{padding-block:clamp(38px,4.4vw,58px);overflow:hidden}
.certmarquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.certtrack{display:flex;align-items:flex-start;width:max-content;gap:clamp(46px,6vw,96px);
  animation:certrun 42s linear infinite;will-change:transform}
.certmarquee:hover .certtrack,
.certmarquee:focus-within .certtrack{animation-play-state:paused}
@keyframes certrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.certtrack .cert{flex:none;width:150px;display:flex;flex-direction:column;align-items:center;gap:14px;
  color:var(--brand);opacity:1}
.certtrack .cert svg,.certtrack .cert img{height:96px;width:auto}
.certtrack .cert small{font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.35;
  color:var(--ink);opacity:.78;text-align:center;max-width:17ch;min-height:2.7em}

@media (max-width:900px){
  .certtrack{gap:44px}
  .certtrack .cert{width:124px}
  .certtrack .cert svg,.certtrack .cert img{height:78px}
  .certtrack .cert small{font-size:13px}
}
@media (max-width:680px){
  .certtrack{gap:32px;animation-duration:30s}
  .certtrack .cert{width:108px}
  .certtrack .cert svg,.certtrack .cert img{height:66px}
  .certtrack .cert small{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .certtrack{animation:none;width:100%;justify-content:space-around;flex-wrap:wrap;row-gap:28px}
  .certtrack .cert.is-clone{display:none}
  .certmarquee{-webkit-mask-image:none;mask-image:none}
}

/* The track carries four copies of the set, so it shifts by a quarter and the
   remaining three quarters always cover the viewport, even on a wide monitor. */
@keyframes certrun{from{transform:translateX(0)}to{transform:translateX(-25%)}}
.certtrack{animation-duration:34s}
@media (max-width:680px){ .certtrack{animation-duration:26s} }
@media (prefers-reduced-motion:reduce){ .certtrack .cert.is-clone{display:none} }

/* ---------- top announcement ribbon ---------- */
.promo{background:var(--paper);border-bottom:1px solid rgba(37,37,37,.1);overflow:hidden;position:relative;z-index:75}
.promotrack{display:flex;align-items:center;width:max-content;gap:0;
  animation:promorun 46s linear infinite;will-change:transform}
.promo:hover .promotrack{animation-play-state:paused}
@keyframes promorun{from{transform:translateX(0)}to{transform:translateX(-25%)}}
.promo-item{flex:none;display:inline-flex;align-items:center;gap:10px;
  padding:11px clamp(28px,4vw,58px);
  font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.005em;color:var(--ink);white-space:nowrap}
.promo-item svg{flex:none;color:var(--brand)}
@media (max-width:680px){
  .promo-item{font-size:12.5px;padding:9px 22px;gap:8px}
  .promotrack{animation-duration:32s}
}
@media (prefers-reduced-motion:reduce){
  .promotrack{animation:none;width:100%;justify-content:space-around;flex-wrap:wrap}
  .promo-item.is-clone{display:none}
}

/* The ribbon now closes the page rather than opening it. */
.promo{border-top:1px solid rgba(37,37,37,.1);border-bottom:0}

/* Ribbon sits between the header rule and the hero: no borders needed. */
.promo{border-top:0;border-bottom:0}

/* Cards stretch to the tallest in the row, so push the price and button to the
   bottom and let the name and blurb take whatever height they need above. */
.card{height:100%}
.card .meta{margin-top:auto;padding-top:9px}
.shelfgrid .card h3{min-height:2.5em}

/* Four tiles read better as one even row than as a 2-1-1 with a half-empty
   second row. Two up on tablet, one up on mobile. */
.cats{grid-template-columns:repeat(4,1fr)}
.cat-tile:nth-child(1),.cat-tile:nth-child(4){grid-column:span 1}
.cat-tile{min-height:330px}
.cat-tile:nth-child(1){min-height:330px}
@media (max-width:1000px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .cat-tile:nth-child(1),.cat-tile:nth-child(4){grid-column:span 1}
  .cat-tile{min-height:280px}
}
@media (max-width:560px){ .cats{grid-template-columns:1fr} }

/* ---------- shop by need ---------- */
.needs-head{margin-bottom:clamp(26px,3.2vw,40px)}
.needs-head h2{font-size:clamp(30px,4vw,50px);max-width:none;margin-bottom:10px}
.needs-head p{margin:0;max-width:56ch;opacity:.7;font-size:17px}
.needgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.need{display:block;text-decoration:none;color:var(--ink)}
.need .pic{display:block;position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--paper-2)}
.need .pic img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.6,.3,1)}
.need:hover .pic img{transform:scale(1.05)}
.need .pic::after{content:"";position:absolute;inset:0;border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(37,37,37,.07);pointer-events:none}
.need .nlabel{display:block;margin-top:16px;font-family:var(--sans);font-size:clamp(18px,1.6vw,22px);
  font-weight:600;letter-spacing:-.015em;transition:color .2s}
.need:hover .nlabel{color:var(--brand)}
.need .nsub{display:block;margin-top:4px;font-size:15.5px;opacity:.62;line-height:1.4}
.needs-more{display:flex;justify-content:center;margin-top:clamp(30px,3.4vw,44px)}
.needs-more a{display:inline-block;text-decoration:none;font-family:var(--sans);font-size:15px;font-weight:600;
  color:var(--brand);border:1.5px solid var(--brand);border-radius:999px;padding:12px 30px;transition:background .2s,color .2s}
.needs-more a:hover{background:var(--brand);color:#fff}
@media (max-width:1000px){ .needgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .needgrid{grid-template-columns:1fr} .need .nlabel{font-size:20px} }

/* ---------- shop by need (v2) ---------- */
.needs{background:#fff;padding-block:clamp(56px,6.5vw,92px)}
.needs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
  margin-bottom:clamp(30px,3.6vw,46px)}
.needs-head h2{font-size:clamp(30px,4vw,50px);max-width:14ch;margin-bottom:10px}
.needs-head p{margin:0;max-width:50ch;opacity:.7;font-size:17px}
.needs-head .fnd{font-family:var(--sans);font-size:15px;font-weight:600;text-decoration:none;color:var(--brand);
  border-bottom:2px solid var(--brand);padding-bottom:3px;white-space:nowrap}

.needgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px);align-items:start}
.need{display:block;text-decoration:none;color:var(--ink)}
.need:nth-child(even){margin-top:clamp(20px,3vw,44px)}

.need .pic{display:block;position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--paper-2)}
.need .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.3,1)}
.need:hover .pic img{transform:scale(1.055)}

/* the copy sits in a white panel that rides up over the photograph */
.need .ninfo{position:relative;z-index:2;margin:-52px 16px 0;background:#fff;border-radius:10px;
  padding:18px 18px 16px;box-shadow:0 10px 30px rgba(37,37,37,.13);
  transition:transform .3s cubic-bezier(.2,.6,.3,1),box-shadow .3s}
.need:hover .ninfo{transform:translateY(-6px);box-shadow:0 16px 38px rgba(49,92,58,.18)}
.need .nlabel{display:block;font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.need .nsub{display:block;margin-top:6px;font-size:14.5px;opacity:.6;line-height:1.45}
.need .ngo{display:flex;align-items:center;gap:7px;margin-top:12px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--brand)}
.need .ngo svg{transition:transform .3s}
.need:hover .ngo svg{transform:translateX(4px)}

@media (max-width:1000px){
  .needgrid{grid-template-columns:repeat(2,1fr)}
  .need:nth-child(even){margin-top:0}
  .need:nth-child(2),.need:nth-child(4){margin-top:clamp(18px,4vw,40px)}
}
@media (max-width:560px){
  .needgrid{grid-template-columns:1fr;gap:26px}
  .need:nth-child(n){margin-top:0}
  .need .ninfo{margin-inline:20px}
}

/* Container spans must be block boxes. Left inline, they fragment and their
   background, padding, radius and shadow break apart. */
.need .ninfo,
.need .pic,
.tcard .circle,
.cat-tile .txt{display:block}

/* ---------- product spotlight: what is inside the mix ---------- */
.spot{position:relative;background:var(--paper);overflow:hidden;padding-block:clamp(50px,6vw,86px)}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(-38deg,rgba(37,37,37,.035) 0 2px,transparent 2px 26px)}
.spot-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.08fr;
  gap:clamp(28px,4vw,64px);align-items:center}

.spot-pic{position:relative;display:grid;place-items:center}
.spot-pic::before{content:"";position:absolute;width:88%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 36%,#fff,rgba(255,255,255,0) 72%)}
.spot-pic img{position:relative;width:min(100%,430px);border-radius:14px;
  pointer-events:none;-webkit-user-drag:none;user-select:none}

.spot-body{text-align:center}
.spot-body h2{font-size:clamp(25px,3vw,38px);line-height:1.15;max-width:20ch;margin:0 auto 8px}
.spot-body .lede{margin:0 auto clamp(24px,3vw,36px);max-width:44ch;font-size:16.5px;opacity:.7}

.mixgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin-bottom:clamp(26px,3vw,38px)}
.mix{text-align:center}
.mix img{width:100%;border-radius:10px;transition:transform .4s cubic-bezier(.2,.6,.3,1)}
.mix:hover img{transform:translateY(-5px) scale(1.03)}
.mix b{display:block;margin-top:9px;font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.mix span{display:block;font-size:13.5px;opacity:.55;margin-top:1px}

.spot-cta{display:inline-block;text-decoration:none;background:var(--brand);color:#fff;
  font-family:var(--sans);font-size:15.5px;font-weight:600;padding:14px 38px;border-radius:999px;
  transition:background .2s,transform .2s}
.spot-cta:hover{background:var(--brand-dk);transform:translateY(-2px)}
.spot-note{margin:14px 0 0;font-size:14px;opacity:.55}

@media (max-width:900px){
  .spot-in{grid-template-columns:1fr;gap:26px}
  .spot-pic img{width:min(78%,330px)}
}
@media (max-width:560px){
  .mixgrid{grid-template-columns:repeat(2,1fr)}
  .mix b{font-size:14.5px}
}

/* ---------- spotlight slider ---------- */
.spot-in{cursor:grab;touch-action:pan-y;user-select:none}
.spot-in:active{cursor:grabbing}
.spot-in img{-webkit-user-drag:none;user-select:none}
.spot-stage{transition:opacity .28s ease,transform .28s ease}
.spot-stage.out-left{opacity:0;transform:translateX(-26px)}
.spot-stage.out-right{opacity:0;transform:translateX(26px)}

.spot-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(22px,2.6vw,34px);position:relative;z-index:3}
.sarrow{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(37,37,37,.2);background:none;
  display:grid;place-items:center;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.sarrow:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.sdots{display:flex;gap:8px}
.sdots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:rgba(37,37,37,.22);transition:width .3s,background .3s}
.sdots button[aria-current="true"]{width:28px;background:var(--brand)}
.spot-count{font-family:var(--sans);font-size:13.5px;font-weight:600;opacity:.5;min-width:44px;text-align:center}
@media (max-width:560px){ .sarrow{width:36px;height:36px} }

/* ---------- swipe is scoped to the pack image ---------- */
.spot-in{cursor:auto;user-select:auto;touch-action:auto}
.spot-in:active{cursor:auto}
.spot-pic{cursor:grab;touch-action:pan-y;user-select:none;padding-bottom:34px}
.spot-pic:active{cursor:grabbing}
.spot-pic:focus-visible{outline:2.5px solid var(--brand);outline-offset:6px;border-radius:14px}
.spot-hint{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);opacity:.42;
  transition:opacity .25s}
.spot-pic:hover .spot-hint{opacity:.75}
.spot-hint svg{animation:hintnudge 2.4s ease-in-out infinite}
@keyframes hintnudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){ .spot-hint svg{animation:none} }

/* ---------- spotlight: larger pack, slide-in, free-from marks ---------- */
.spot{padding-block:clamp(44px,5.4vw,78px)}
.spot-in{grid-template-columns:1.02fr 1.1fr;gap:clamp(20px,3vw,48px)}

/* the pack runs larger and bleeds toward the left edge, as in the reference */
.spot-pic{justify-items:start}
.spot-pic img{width:min(112%,540px);margin-left:clamp(-64px,-4vw,0px)}
.spot-pic::before{width:104%;left:-6%}

/* copy cross-fades, the pack travels further */
.spot-stage{transition:opacity .34s ease,transform .34s cubic-bezier(.3,.7,.3,1)}
.spot-pic.out-left{opacity:0;transform:translateX(-72px)}
.spot-pic.out-right{opacity:0;transform:translateX(72px)}
.spot-body.out-left,.spot-body.out-right{opacity:0;transform:none}

.spot-body .subline{margin:0 auto 22px;font-family:var(--sans);font-size:16px;font-weight:600;opacity:.72}
.spot-body h2{margin-bottom:6px}
.spot-body .lede{margin-bottom:22px}

/* flex wrap so an incomplete last row centres instead of hanging left */
.mixgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.4vw,20px)}
.mix{flex:0 0 calc((100% - 2 * clamp(10px,1.4vw,20px)) / 3);max-width:170px}
.mix .thumb{position:relative;display:block;border-radius:10px;overflow:hidden}
.mix .thumb img{width:100%;display:block}

/* a crossed-out mark for what is deliberately left out */
.mix.no .thumb::after,.mix.no .thumb::before{content:"";position:absolute;left:14%;right:14%;top:50%;
  height:3px;background:var(--red);border-radius:3px}
.mix.no .thumb::after{transform:rotate(38deg)}
.mix.no .thumb::before{transform:rotate(-38deg)}
.mix.no b{color:var(--red)}

.spot-progress{position:relative;width:52px;height:3px;border-radius:3px;background:rgba(37,37,37,.14);overflow:hidden}
.spot-progress i{position:absolute;inset:0 100% 0 0;background:var(--brand);transition:right .2s linear}
@media (max-width:900px){
  .spot-pic{justify-items:center}
  .spot-pic img{width:min(82%,340px);margin-left:0}
  .spot-pic::before{width:88%;left:6%}
}
@media (max-width:560px){ .mix{flex-basis:calc((100% - 14px) / 2)} }

/* Crossed-out items get a clean roundel rather than a washed-out heap, which
   read as nothing at all. */
.mix.no .thumb{aspect-ratio:1;border-radius:50%;background:rgba(155,9,13,.06);
  box-shadow:inset 0 0 0 1.5px rgba(155,9,13,.18);display:grid;place-items:center;
  max-width:118px;margin:0 auto}
.mix.no .thumb img{display:none}
.mix.no .thumb::before,.mix.no .thumb::after{left:24%;right:24%;height:2.5px;opacity:.85}
.mix.no b{color:var(--red)}
.mix.no span{opacity:.5}

/* ---------- mayoora favourites ---------- */
.favs{background:var(--paper);padding-block:clamp(54px,6.5vw,90px)}
.favs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
  margin-bottom:clamp(28px,3.4vw,44px)}
.favs-head h2{font-size:clamp(29px,3.8vw,46px);max-width:16ch;margin-bottom:9px}
.favs-head p{margin:0;max-width:50ch;opacity:.7;font-size:16.5px}
.favs-head a{font-family:var(--sans);font-size:15px;font-weight:600;text-decoration:none;color:var(--brand);
  border-bottom:2px solid var(--brand);padding-bottom:3px;white-space:nowrap}

.favgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.fav{background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 2px 10px rgba(37,37,37,.06);
  transition:box-shadow .35s cubic-bezier(.2,.6,.3,1),transform .35s cubic-bezier(.2,.6,.3,1)}
.fav:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(49,92,58,.15)}

.fav .fpic{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--paper-2)}
.fav .fpic img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.3,1)}
.fav:hover .fpic img{transform:scale(1.07)}
.fav .fpack{position:absolute;top:11px;left:11px;background:rgba(255,255,255,.94);color:var(--ink);
  font-family:var(--sans);font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px}

.fav .fbody{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.fav h3{font-size:18px;line-height:1.25;letter-spacing:-.015em}

/* the benefit is the reason to buy, so it gets the accent and a sweep on hover */
.fav .benefit{position:relative;display:inline-block;align-self:flex-start;margin-top:8px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--brand);line-height:1.35}
.fav .benefit::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;
  background:var(--brand);opacity:.35;transition:right .45s cubic-bezier(.2,.6,.3,1)}
.fav:hover .benefit::after{right:0}

.fav .frow{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px}
.fav .fprice{font-family:var(--sans);font-size:19px;font-weight:700}
.fav .fprice small{display:block;font-family:var(--serif);font-size:13px;font-weight:400;opacity:.55;margin-top:-2px}
.fav .add{margin:0 0 0 auto;width:auto;padding:10px 20px;font-size:13.5px}

/* The favourite card now carries a stepper too, so the row stacks the price
   above the controls rather than trying to fit all three side by side. */
.fav .frow{flex-wrap:wrap}
.fav .frow .qtyadd{margin-top:0;width:100%;flex:0 0 100%}
.fav .frow .qtyadd .add{margin-left:0;flex:1}
.fav .frow .qtyadd .qty{flex:none}

/* one orchestrated reveal: the row deals itself out, once */
.favgrid .fav{opacity:0;transform:translateY(30px) scale(.965) rotate(-1.4deg);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.favgrid.in .fav{opacity:1;transform:none;transition-delay:calc(var(--i) * 80ms)}
.favgrid.in .fav:hover{transition-delay:0s}

@media (max-width:960px){ .favgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .favgrid{grid-template-columns:1fr}
  .fav .fpic{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
  .favgrid .fav{opacity:1;transform:none;transition:none}
  .fav:hover{transform:none}
}

/* ---------- watch: player plus playlist ---------- */
.watch{background:#fff;color:var(--ink);padding-block:clamp(54px,6.5vw,90px)}
.watch .head h2{color:var(--ink)}
.watch .head p{opacity:.7}
.watch .head a{color:var(--brand);border-color:var(--brand)}

.watch-in{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(20px,2.6vw,36px);align-items:start}

.player{position:relative;border-radius:12px;overflow:hidden;background:#14110E;aspect-ratio:16/9;
  box-shadow:0 14px 40px rgba(37,37,37,.16)}
.player video{width:100%;height:100%;object-fit:cover;display:block;background:#14110E}
.player .playbtn{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,16,12,.22);
  border:0;width:100%;cursor:pointer;transition:background .25s}
.player .playbtn:hover{background:rgba(20,16,12,.08)}
.player .playbtn span{width:66px;height:66px;border-radius:50%;background:var(--brand);display:grid;place-items:center;
  box-shadow:0 8px 28px rgba(0,0,0,.42);transition:transform .25s}
.player .playbtn:hover span{transform:scale(1.07)}
.player .playbtn svg{margin-left:4px}
.player .playbtn.hide{opacity:0;pointer-events:none}

.nowplaying{margin-top:16px}
.nowplaying h3{font-size:21px;letter-spacing:-.015em}
.nowplaying p{margin:5px 0 0;font-size:16px;opacity:.66;max-width:56ch}

/* the playlist */
.playlist{display:flex;flex-direction:column;gap:6px;max-height:none}
.plrow{display:grid;grid-template-columns:104px 1fr;gap:13px;align-items:center;width:100%;
  background:none;border:0;text-align:left;padding:8px;border-radius:10px;position:relative;
  transition:background .22s}
.plrow:hover{background:var(--paper)}
.plrow[aria-current="true"]{background:var(--paper)}
.plrow[aria-current="true"]::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  border-radius:3px;background:var(--brand)}
.plthumb{position:relative;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:var(--paper-2)}
.plthumb img{width:100%;height:100%;object-fit:cover}
.plthumb .dur{position:absolute;right:5px;bottom:5px;background:rgba(20,16,12,.78);color:#fff;
  font-family:var(--sans);font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:4px}
.plthumb .mini{position:absolute;inset:0;display:grid;place-items:center;opacity:0;background:rgba(20,16,12,.36);transition:opacity .22s}
.plrow:hover .plthumb .mini,.plrow[aria-current="true"] .plthumb .mini{opacity:1}
.plmeta b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.plmeta span{display:block;font-size:13px;opacity:.55;margin-top:2px}
.plrow[aria-current="true"] .plmeta b{color:var(--brand)}

@media (max-width:1000px){
  .watch-in{grid-template-columns:1fr}
  .playlist{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
}
@media (max-width:560px){
  .playlist{grid-template-columns:1fr}
  .plrow{grid-template-columns:92px 1fr}
}

/* ---------- reels rail, under the player ---------- */
.reels-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  margin:clamp(38px,4.4vw,58px) 0 16px}
.reels-head h3{font-size:22px;letter-spacing:-.015em;color:var(--ink)}
.reels-head p{margin:0;font-size:14.5px;opacity:.55}
.reels{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(196px,1fr);gap:clamp(12px,1.4vw,18px);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.reels::-webkit-scrollbar{height:6px}
.reels::-webkit-scrollbar-thumb{background:rgba(37,37,37,.2);border-radius:99px}
.reel{position:relative;aspect-ratio:9/16;border-radius:11px;overflow:hidden;background:#14110E;
  scroll-snap-align:start;box-shadow:0 4px 16px rgba(37,37,37,.1);
  transition:transform .35s cubic-bezier(.2,.6,.3,1),box-shadow .35s}
.reel:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(37,37,37,.18)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel .playbtn{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,16,12,.20);
  border:0;width:100%;cursor:pointer;transition:background .25s}
.reel .playbtn:hover{background:rgba(20,16,12,.06)}
.reel .playbtn span{width:46px;height:46px;border-radius:50%;background:var(--brand);display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.4)}
.reel .playbtn.hide{opacity:0;pointer-events:none}
.reel .rcap{position:absolute;left:0;right:0;bottom:0;padding:13px;
  background:linear-gradient(to top,rgba(10,8,6,.9),transparent);
  font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1.3;color:#fff;
  pointer-events:none;transition:opacity .3s}
.reel .rcap.hide{opacity:0}
.reel .dur{position:absolute;top:9px;right:9px;background:rgba(10,8,6,.66);color:#fff;
  font-family:var(--sans);font-size:11px;font-weight:600;padding:3px 7px;border-radius:999px}
@media (max-width:680px){ .reels{grid-auto-columns:minmax(156px,1fr)} .reel .rcap{font-size:12.5px} }

/* ---------- why buy from mayoora ---------- */
.why{background:#fff;padding-block:clamp(50px,6vw,84px);
  border-top:1px solid rgba(37,37,37,.08);border-bottom:1px solid rgba(37,37,37,.08)}
.why h2{text-align:center;font-size:clamp(27px,3.4vw,40px);margin-bottom:8px}
.why .whylede{text-align:center;margin:0 auto clamp(32px,4vw,50px);max-width:52ch;font-size:16.5px;opacity:.68}
.whygrid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,30px)}
.whyitem{text-align:center}
.whyitem .art{display:block;width:100%;max-width:126px;margin:0 auto 14px;
  transition:transform .45s cubic-bezier(.2,.6,.3,1)}
.whyitem:hover .art{transform:translateY(-7px) rotate(-1.5deg)}
.whyitem b{display:block;font-family:var(--sans);font-size:16.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.whyitem span{display:block;margin-top:5px;font-size:14.5px;opacity:.58;line-height:1.4;max-width:22ch;margin-inline:auto}

/* one dealt-out reveal, same pattern as the favourites row */
.whygrid .whyitem{opacity:0;transform:translateY(22px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)}
.whygrid.in .whyitem{opacity:1;transform:none;transition-delay:calc(var(--i) * 85ms)}
.whygrid.in .whyitem:hover .art{transition-delay:0s}

@media (max-width:900px){ .whygrid{grid-template-columns:repeat(3,1fr);gap:26px} }
@media (max-width:560px){
  .whygrid{grid-template-columns:repeat(2,1fr);gap:22px}
  .whyitem .art{max-width:94px}
  .whyitem b{font-size:15px}
  .whyitem span{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .whygrid .whyitem{opacity:1;transform:none;transition:none}
  .whyitem:hover .art{transform:none}
}

/* ---------- why buy: 3D stage and motion ---------- */
.why{background:linear-gradient(180deg,#fff 0%,#FBFAF7 100%)}
.whygrid{gap:clamp(12px,1.6vw,26px)}
.whyitem{perspective:900px}

/* each illustration stands on a lit plinth and floats above it */
.whyitem .stage{position:relative;width:100%;max-width:158px;margin:0 auto 16px;aspect-ratio:1;
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.whyitem .plinth{position:absolute;inset:6% 6% 6%;border-radius:50%;
  background:radial-gradient(60% 55% at 42% 34%,#fff 0%,#F3EFE5 46%,#E2DCCB 100%);
  box-shadow:inset 0 -10px 22px rgba(46,36,25,.10),inset 0 6px 14px rgba(255,255,255,.9),
             0 16px 30px rgba(46,36,25,.13);
  transform:translateZ(0)}
.whyitem .art{position:absolute;inset:12%;display:grid;place-items:center;
  transform:translateZ(34px);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.whyitem .art-svg{width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(46,36,25,.20))}

/* a slow idle float, offset per item so the row never pulses in unison */
.whygrid.in .whyitem .stage{animation:whyfloat 5.4s ease-in-out infinite;
  animation-delay:calc(var(--i) * .7s)}
@keyframes whyfloat{0%,100%{translate:0 0}50%{translate:0 -7px}}

.whyitem:hover .art{transform:translateZ(54px) scale(1.05)}
.whyitem:hover .plinth{box-shadow:inset 0 -10px 22px rgba(46,36,25,.12),
  inset 0 6px 14px rgba(255,255,255,.95),0 26px 44px rgba(49,92,58,.20)}

.whyitem b{transition:color .25s}
.whyitem:hover b{color:var(--brand)}

/* moving parts inside the illustrations, only while hovered */
.a-wheel{transform-box:fill-box;transform-origin:center}
.whyitem:hover .a-wheel{animation:whyspin 1.6s linear infinite}
.whyitem:hover .a-wheel-2{animation-delay:-.2s}
@keyframes whyspin{to{transform:rotate(360deg)}}

.a-crank{transform-box:fill-box;transform-origin:50% 92%}
.whyitem:hover .a-crank{animation:whyspin 1.9s linear infinite}

.a-sway{transform-box:fill-box;transform-origin:50% 100%}
.whyitem:hover .a-sway{animation:whysway 2.2s ease-in-out infinite}
@keyframes whysway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

.a-lift{transform-box:fill-box;transform-origin:center}
.whyitem:hover .a-lift{animation:whylift 1.8s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes whylift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.a-drop{opacity:0}
.whyitem:hover .a-drop{animation:whydrop 1.1s ease-in infinite;animation-delay:var(--d,0s)}
@keyframes whydrop{0%{opacity:0;transform:translateY(-4px)}
  20%{opacity:1}80%{opacity:1;transform:translateY(8px)}100%{opacity:0;transform:translateY(10px)}}

.a-pin{transform-box:fill-box;transform-origin:50% 100%}
.whyitem:hover .a-pin{animation:whypin 1.5s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes whypin{0%,100%{transform:translateY(0)}35%{transform:translateY(-9px)}}

@media (max-width:900px){ .whyitem .stage{max-width:132px} }
@media (max-width:560px){ .whyitem .stage{max-width:118px;margin-bottom:12px} }

@media (prefers-reduced-motion:reduce){
  .whygrid.in .whyitem .stage{animation:none}
  .whyitem:hover .art{transform:translateZ(34px)}
  .whyitem :is(.a-wheel,.a-crank,.a-sway,.a-lift,.a-drop,.a-pin){animation:none !important}
  .a-drop{opacity:.9}
}

/* ---------- why buy: deeper plinth and stronger contrast ---------- */
.why{background:linear-gradient(180deg,#FBFAF6 0%,#F2EFE6 100%)}
.whyitem .plinth{
  background:radial-gradient(62% 56% at 40% 32%,#FFFDF8 0%,#EFE9DA 44%,#D5CDB8 100%);
  box-shadow:inset 0 -14px 26px rgba(31,23,16,.20),
             inset 0 8px 16px rgba(255,255,255,.95),
             0 18px 34px rgba(31,23,16,.20)}
.whyitem:hover .plinth{
  box-shadow:inset 0 -14px 26px rgba(31,23,16,.24),
             inset 0 8px 16px rgba(255,255,255,.98),
             0 28px 48px rgba(120,7,10,.30)}
.whyitem .art-svg{filter:drop-shadow(0 10px 12px rgba(31,23,16,.34))}
.whyitem b{color:var(--ink)}
.whyitem span{opacity:.68}

/* ================= page motion system ================= */

/* reading progress, sits above everything */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;pointer-events:none;
  background:transparent}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));
  transform-origin:left;transition:width .1s linear}

/* header settles when the page is scrolled */
header{transition:box-shadow .3s ease,background .3s ease}
header.stuck{box-shadow:0 6px 24px rgba(37,37,37,.10)}
header.stuck .bar{height:70px}
.bar{transition:height .3s cubic-bezier(.2,.7,.3,1)}

/* one reveal treatment, used everywhere */
[data-reveal] > *{opacity:0;transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
[data-reveal].in > *{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 75ms)}

/* headings wipe up behind a mask rather than fading in */
[data-wipe]{display:inline-block;clip-path:inset(0 0 110% 0);transform:translateY(14px);
  transition:clip-path .75s cubic-bezier(.2,.8,.25,1),transform .75s cubic-bezier(.2,.8,.25,1)}
[data-wipe].in{clip-path:inset(0 0 -15% 0);transform:none}

/* A compact figure strip. The About page tells this story properly; here it
   only needs to be a glance, so these sit on one rule rather than in cards. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px);
  margin-bottom:clamp(30px,3.6vw,46px);padding-top:22px;
  border-top:1px solid var(--line)}
.stat{position:relative}

.stat b{display:flex;align-items:baseline;gap:1px;
  font-family:var(--sans);font-size:clamp(28px,3vw,38px);font-weight:800;
  letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.stat b span{display:inline;font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  line-height:inherit;color:inherit;opacity:1;margin:0}
.stat b i{font-style:normal;font-size:.46em;font-weight:700;color:var(--brand);
  opacity:.9;margin-left:3px}

.stat > span{display:block;margin-top:8px;font-family:var(--sans);font-size:13.5px;
  font-weight:500;line-height:1.5;opacity:.58;max-width:24ch}

@media (max-width:900px){ .stats{grid-template-columns:repeat(2,1fr);row-gap:26px} }
@media (max-width:520px){ .stats{grid-template-columns:1fr} }

/* gentle pointer parallax in the hero */
.hero-in > div:first-child{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.hero .index{transition:transform .5s cubic-bezier(.2,.7,.3,1)}

/* 3D tilt on the shop-by-need tiles */
.need{perspective:1000px}
.need .tiltbox{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.need .ninfo{transform:translateZ(26px)}

/* product cards get a touch of depth on hover */
.card{transition:transform .35s cubic-bezier(.2,.6,.3,1)}
.shelfgrid .card:hover,.grid .card:hover{transform:translateY(-5px)}
.shelfgrid .card:hover .shot,.grid .card:hover .shot{box-shadow:0 16px 32px rgba(37,37,37,.16)}
.card .shot{transition:box-shadow .35s}

@media (prefers-reduced-motion:reduce){
  [data-reveal] > *{opacity:1;transform:none;transition:none}
  [data-wipe]{clip-path:none;transform:none;transition:none}
  .hero-in > div:first-child,.hero .index,.need .tiltbox{transform:none !important}
  .progress i{transition:none}
}

/* ================= depth pass two ================= */

/* --- spotlight: the pack turns as the section passes --- */
.spot-pic{perspective:1200px}
.spot-pic .packwrap{position:relative;transform-style:preserve-3d;
  transition:transform .25s linear}
.spot-pic .packwrap img{position:relative;z-index:2;transform:translateZ(0)}
/* a reflection on the floor beneath it */
.spot-pic .packwrap::after{content:"";position:absolute;left:8%;right:8%;bottom:-8px;height:56px;
  background:radial-gradient(50% 100% at 50% 0%,rgba(31,23,16,.30),rgba(31,23,16,0) 72%);
  filter:blur(4px);transform:translateZ(-40px);pointer-events:none}

/* --- product cards gain depth on pointer --- */
.shelfgrid,.favgrid,.grid{perspective:1400px}
.shelfgrid .card,.grid .card,.favgrid .fav{transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s cubic-bezier(.2,.7,.3,1)}
.shelfgrid .card .shot,.grid .card .shot,.favgrid .fav .fpic{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.shelfgrid .card:hover .shot,.grid .card:hover .shot{transform:translateZ(38px)}
.favgrid .fav:hover .fpic{transform:translateZ(30px)}
.shelfgrid .card:hover,.grid .card:hover{transform:none}
.favgrid .fav:hover{transform:none}

/* --- hero index reads as a panel angled in space --- */
.hero .index{perspective:1100px}
.hero .index .indexinner{transform-style:preserve-3d;transform:rotateY(-7deg);
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.hero .index:hover .indexinner{transform:rotateY(0deg)}
.hero .index button{transform-style:preserve-3d;
  transition:opacity .25s,padding .25s,transform .4s cubic-bezier(.2,.7,.3,1),background .25s}
.hero .index button:hover{transform:translateZ(26px)}
.hero .index button[aria-current="true"]{transform:translateZ(18px);
  background:linear-gradient(90deg,rgba(234,231,219,.10),transparent)}
.hero .index button[aria-current="true"] .chip{box-shadow:0 0 0 1px rgba(234,231,219,.7),0 6px 16px rgba(0,0,0,.45)}

@media (max-width:900px){
  .hero .index .indexinner{transform:none}
  .spot-pic .packwrap::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .spot-pic .packwrap{transform:none !important}
  .hero .index .indexinner{transform:none}
  .shelfgrid .card:hover .shot,.grid .card:hover .shot,.favgrid .fav:hover .fpic{transform:none}
  .hero .index button:hover,.hero .index button[aria-current="true"]{transform:none}
}


/* shared form and step styles */
/* --- steps --- */
.steps-bar{display:flex;align-items:center;gap:0;margin-bottom:clamp(26px,3vw,40px);flex-wrap:wrap}
.stp{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:14px;font-weight:600;opacity:.42}
.stp i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:12px;background:rgba(37,37,37,.12);color:var(--ink)}
.stp.on{opacity:1}
.stp.on i{background:var(--brand);color:#fff}
.stp.done{opacity:.75}
.stp.done i{background:var(--field,#3F5D3A);background:var(--brand);color:#fff}
.stpline{flex:1;min-width:22px;height:2px;background:rgba(37,37,37,.14);margin:0 12px;border-radius:2px}
.stpline.on{background:var(--brand)}

/* --- two column shell --- */
.shop-grid{display:grid;grid-template-columns:1.6fr .95fr;gap:clamp(22px,3vw,46px);align-items:start}
.panel{background:#fff;border-radius:12px;padding:clamp(18px,2.2vw,26px);
  box-shadow:0 2px 12px rgba(37,37,37,.06)}
.panel + .panel{margin-top:16px}
.panel h2{font-size:19px;letter-spacing:-.015em;margin-bottom:4px}
.panel .hint{margin:0 0 18px;font-size:14.5px;opacity:.6}

/* --- free delivery meter --- */
.meter{background:var(--brand-tint);border-radius:10px;padding:14px 16px;margin-bottom:18px}
.meter p{margin:0 0 9px;font-family:var(--sans);font-size:14px;font-weight:600}
.meter .track{height:6px;border-radius:6px;background:rgba(49,92,58,.16);overflow:hidden}
.meter .track i{display:block;height:100%;border-radius:6px;background:var(--brand);
  transition:width .6s cubic-bezier(.2,.7,.3,1)}

/* --- summary --- */
.summary{position:sticky;top:96px}
.sumrow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:16px}
.sumrow.total{border-top:1px solid var(--line);margin-top:8px;padding-top:15px;
  font-family:var(--sans);font-size:21px;font-weight:700}
.sumrow .muted{opacity:.6}
.sumrow .free{color:var(--brand);font-family:var(--sans);font-weight:600;font-size:15px}
.btn{display:block;width:100%;text-align:center;text-decoration:none;border:0;border-radius:999px;
  background:var(--brand);color:#fff;font-family:var(--sans);font-size:16px;font-weight:600;padding:16px;
  margin-top:16px;transition:background .2s,transform .2s}
.btn:hover{background:var(--brand-dk);transform:translateY(-2px)}
.btn.ghost{background:none;color:var(--brand);border:1.5px solid var(--brand);padding:14px;font-size:15px}
.btn.ghost:hover{background:var(--brand);color:#fff}
.coupon{display:flex;gap:8px;margin-top:14px}
.coupon input{flex:1;min-width:0}

/* --- forms --- */
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--sans);font-size:13.5px;font-weight:600;margin-bottom:6px}
.field .opt{font-weight:400;opacity:.5}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea{
  width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:9px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(49,92,58,.12)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.help{font-size:13px;opacity:.55;margin:6px 0 0}

/* --- trust row --- */
.trust{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:16px}
.trust span{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;
  font-weight:600;opacity:.6}

/* --- account --- */
/* One card with tabs. Two columns wasted most of the sign-in side, because
   signing in is two fields and registering is five. */
.acct-card{max-width:460px;margin-inline:auto;background:#fff;border-radius:16px;
  border:1px solid var(--line);padding:clamp(24px,2.8vw,34px);
  box-shadow:0 18px 44px rgba(37,37,37,.07)}
.acct-card .ltabs{margin-bottom:22px}
.acct-card .panel{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.acct-card .panel + .panel{margin-top:0}
.acct-card .panel[hidden]{display:none}

/* keep the old two-column rule for anywhere else that still uses it */
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px);align-items:start;
  max-width:960px;margin-inline:auto}
.acct-grid .panel{padding:clamp(22px,2.6vw,32px)}
.divider{display:flex;align-items:center;gap:12px;margin:18px 0;font-family:var(--sans);font-size:12.5px;
  font-weight:600;opacity:.42}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.check{display:flex;align-items:center;gap:9px;font-size:15px;margin:4px 0 14px}
.check input{width:17px;height:17px;accent-color:var(--brand)}
.small-link{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--brand);text-decoration:none;
  border-bottom:1.5px solid rgba(49,92,58,.35);padding-bottom:1px}
.small-link:hover{border-color:var(--brand)}

/* --- account dashboard --- */
.dash{display:grid;grid-template-columns:230px 1fr;gap:clamp(18px,2.4vw,32px);align-items:start}
.dashnav{background:#fff;border-radius:12px;padding:10px;box-shadow:0 2px 12px rgba(37,37,37,.06)}
.dashnav a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:9px;text-decoration:none;
  font-family:var(--sans);font-size:14.5px;font-weight:600;opacity:.7}
.dashnav a:hover{background:var(--paper);opacity:1}
.dashnav a.on{background:var(--brand);color:#fff;opacity:1}
.otable{width:100%;border-collapse:collapse}
.otable th{text-align:left;font-family:var(--sans);font-size:12.5px;font-weight:600;opacity:.5;
  padding:0 0 10px;border-bottom:1px solid var(--line)}
.otable td{padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:middle}
.otable tr:last-child td{border-bottom:0}
.pill{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:600;padding:4px 10px;
  border-radius:999px;background:rgba(49,92,58,.09);color:var(--brand)}
.pill.done{background:rgba(63,93,58,.12);color:#3F5D3A}
.pill.transit{background:rgba(49,92,58,.12);color:var(--brand-dk)}

@media (max-width:1000px){
  .shop-grid,.dash{grid-template-columns:1fr}
  .summary{position:static}
  .acct-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cartline{grid-template-columns:70px 1fr}
  .cartline img{width:70px;height:70px}
  .cartline .right{grid-column:2;text-align:left;display:flex;align-items:center;gap:14px}
  .row2{grid-template-columns:1fr}
  .stpline{margin:0 6px}
  .stp span{display:none}
}


/* ================= WooCommerce: cart, checkout, account ================= */
.woo{padding-block:clamp(28px,3.6vw,48px) clamp(56px,7vw,92px)}
.woo h1,.woo .entry-title{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.025em;margin-bottom:18px}
.woo a{color:inherit}
.woocommerce-breadcrumb{font-family:var(--sans);font-size:13.5px;font-weight:500;opacity:.55;margin-bottom:14px}

/* notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;margin:0 0 20px;padding:14px 18px;border-radius:10px;background:#fff;
  border-left:3px solid var(--brand);font-size:15.5px;box-shadow:0 2px 10px rgba(37,37,37,.06)}
.woocommerce-error{border-left-color:#B3261E}
.woocommerce-message .button,.woocommerce-info .button{float:right;margin-left:14px}

/* ---- cart ---- */
.woocommerce-cart-form{background:#fff;border-radius:12px;padding:clamp(14px,2vw,24px);
  box-shadow:0 2px 12px rgba(37,37,37,.06)}
.shop_table{width:100%;border-collapse:collapse}
.shop_table thead{display:none}
.woocommerce-cart-form__cart-item{display:grid;grid-template-columns:88px 1fr auto;gap:16px;
  align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.woocommerce-cart-form__cart-item td{border:0;padding:0;display:block}
.woocommerce-cart-form__cart-item .product-remove{grid-column:3;grid-row:1;text-align:right}
.woocommerce-cart-form__cart-item .product-thumbnail{grid-column:1;grid-row:1}
.woocommerce-cart-form__cart-item .product-thumbnail img{width:88px;height:88px;object-fit:cover;
  border-radius:9px;background:var(--paper-2)}
.woocommerce-cart-form__cart-item .product-name{grid-column:2;grid-row:1;
  font-family:var(--sans);font-size:16.5px;font-weight:600;line-height:1.3}
.woocommerce-cart-form__cart-item .product-name a{text-decoration:none}
.woocommerce-cart-form__cart-item .product-price{display:none}
.woocommerce-cart-form__cart-item .product-quantity{grid-column:2;grid-row:2;margin-top:8px}
.woocommerce-cart-form__cart-item .product-subtotal{grid-column:3;grid-row:2;text-align:right;
  font-family:var(--sans);font-size:18px;font-weight:700}
.quantity input[type=number]{width:74px;text-align:center;padding:9px 6px;border-radius:999px}
a.remove{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--paper);color:var(--ink) !important;text-decoration:none;font-size:16px;line-height:1}
a.remove:hover{background:var(--brand);color:#fff !important}
.actions .coupon{display:flex;gap:8px;margin-top:16px}
.actions .coupon input{flex:1;min-width:0}
.actions > .button[name=update_cart]{margin-top:12px}

/* ---- cart totals ---- */
.cart-collaterals{margin-top:22px}
.cart_totals{background:#fff;border-radius:12px;padding:clamp(18px,2.2vw,26px);
  box-shadow:0 2px 12px rgba(37,37,37,.06)}
.cart_totals h2{font-size:19px;margin-bottom:10px}
.cart_totals table{width:100%;border-collapse:collapse}
.cart_totals th,.cart_totals td{padding:9px 0;text-align:left;font-weight:400;font-size:16px;border:0}
.cart_totals td{text-align:right}
.cart_totals th{opacity:.6}
.cart_totals .order-total th,.cart_totals .order-total td{border-top:1px solid var(--line);padding-top:15px;
  font-family:var(--sans);font-size:20px;font-weight:700;opacity:1}
.wc-proceed-to-checkout{margin-top:14px}

/* ---- buttons ---- */
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
#place_order,.checkout-button{
  display:inline-block;text-align:center;text-decoration:none;border:0;border-radius:999px;
  background:var(--brand);color:#fff;font-family:var(--sans);font-size:15.5px;font-weight:600;
  padding:14px 28px;transition:background .2s,transform .2s;cursor:pointer}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
#place_order:hover,.checkout-button:hover{background:var(--brand-dk);color:#fff;transform:translateY(-2px)}
.checkout-button,#place_order{display:block;width:100%;font-size:16px;padding:16px}
.button[name=update_cart],.button[name=apply_coupon]{background:none;color:var(--brand);
  border:1.5px solid var(--brand);padding:12px 22px}
.button[name=update_cart]:hover,.button[name=apply_coupon]:hover{background:var(--brand);color:#fff}
.button[disabled]{opacity:.45;pointer-events:none}

/* ---- checkout: form on the left, order summary on a panel to the right ----
   The summary is the thing people re-check before paying, so it sits on its own
   tinted panel that runs the height of the page and stays put while the form
   scrolls. */

.woocommerce-checkout .woo{max-width:1240px;margin-inline:auto;
  padding-inline:var(--pad)}
form.checkout{display:grid;grid-template-columns:1.25fr .9fr;
  gap:clamp(26px,4vw,64px);align-items:start}
#customer_details{grid-column:1;min-width:0}
#order_review_heading{display:none}
#order_review{grid-column:2;min-width:0}

/* --- the form side --- */
#customer_details .col-1,#customer_details .col-2{width:auto;float:none}
.woocommerce-billing-fields,.woocommerce-shipping-fields,.woocommerce-additional-fields{
  background:none;border-radius:0;padding:0;margin-bottom:26px;box-shadow:none}
.woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,#payment-heading{
  font-family:var(--sans);font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0 0 14px}

.form-row{margin-bottom:12px;padding:0}
.form-row label{display:block;font-family:var(--sans);font-size:13px;font-weight:600;
  opacity:.62;margin-bottom:5px}
.form-row .required{color:var(--brand);text-decoration:none}
.form-row-first,.form-row-last{width:calc(50% - 6px);float:left}
.form-row-last{float:right}
.form-row.form-row-wide{clear:both}
.woocommerce-input-wrapper{display:block;width:100%}

.woocommerce-checkout .input-text,
.woocommerce-checkout select{width:100%;background:#fff;border:1px solid rgba(37,37,37,.22);
  border-radius:8px;padding:14px 14px;font-family:var(--sans);font-size:15.5px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(49,92,58,.14)}
.select2-container--default .select2-selection--single{height:auto;
  border:1px solid rgba(37,37,37,.22);border-radius:8px;padding:10px 6px}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  font-family:var(--sans);font-size:15.5px;color:var(--ink);line-height:1.5}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:10px}

/* --- shipping choices as selectable rows --- */
#shipping_method{list-style:none;margin:0;padding:0}
#shipping_method{perspective:1000px}
#shipping_method li{display:flex;align-items:center;gap:11px;
  border:1px solid rgba(37,37,37,.22);border-radius:10px;padding:15px 16px;margin-bottom:10px;
  font-family:var(--sans);font-size:15px;transform-style:preserve-3d;
  transition:border-color .2s,background .2s,transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s}
#shipping_method li:hover{transform:translateY(-2px) rotateX(4deg);
  box-shadow:0 12px 24px rgba(37,37,37,.1)}
#shipping_method li:has(input:checked){border-color:var(--brand);background:rgba(49,92,58,.05);
  box-shadow:inset 0 0 0 1px var(--brand)}
#shipping_method li input{width:18px;height:18px;accent-color:var(--brand)}
#shipping_method li label{flex:1;margin:0;display:flex;justify-content:space-between;gap:12px;
  cursor:pointer;font-weight:500}
#shipping_method li label .amount{font-weight:700}

/* --- the summary panel --- */
#order_review{background:#F5F3EE;border:1px solid rgba(37,37,37,.09);border-radius:14px;
  padding:clamp(20px,2.4vw,28px);position:sticky;top:96px;box-shadow:none;perspective:900px}

#order_review .shop_table{margin:0;border:0;width:100%;display:block}
#order_review .shop_table thead{display:none}
/* No inner scroller. A cut-off list with its own scrollbar inside a page that
   already scrolls is the thing people miss items in. */
#order_review .shop_table tbody{display:block}
#order_review .shop_table tfoot{display:block}

#order_review .cart_item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;
  align-items:center;padding:14px 0;border:0;
  border-bottom:1px solid rgba(37,37,37,.09)}
#order_review .cart_item:last-child{border-bottom:0}
#order_review .cart_item td{padding:0;border:0;font-size:15px;text-align:left;display:block}
#order_review .cart_item .product-name{min-width:0;font-family:var(--sans);font-size:14.5px;
  line-height:1.35;overflow:visible}
#order_review .cart_item .product-total{text-align:right;font-family:var(--sans);
  font-weight:700;font-size:15px;white-space:nowrap}

/* the thumbnail, with the quantity on its corner */
.co-thumb{position:relative;display:block;width:64px;height:64px;border-radius:10px;
  background:#fff;border:1px solid rgba(37,37,37,.12);
  transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .4s}
.co-thumb img{width:100%;height:100%;object-fit:contain;display:block;padding:5px}
.co-qty{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;border-radius:999px;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  font-family:var(--sans);font-size:11.5px;font-weight:700;padding:0 6px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);transform:translateZ(30px)}
/* the pack lifts out of its tile on hover */
#order_review .cart_item:hover .co-thumb{transform:translateY(-4px) rotateX(8deg) rotateY(-8deg);
  box-shadow:0 14px 26px rgba(37,37,37,.18)}
.product-quantity{display:none}

#order_review .cart-subtotal,#order_review .shipping,#order_review .order-total,
#order_review .fee,#order_review .tax-rate{display:flex;justify-content:space-between;
  gap:12px;padding:9px 0;border:0}
#order_review .cart-subtotal th,#order_review .shipping th,#order_review .fee th,
#order_review .order-total th{font-family:var(--sans);font-size:14.5px;font-weight:500;
  opacity:.75;padding:0;border:0;text-align:left}
#order_review .cart-subtotal td,#order_review .shipping td,#order_review .fee td{
  font-family:var(--sans);font-size:14.5px;font-weight:600;padding:0;border:0;text-align:right}
#order_review tfoot .cart-subtotal{border-top:1px solid rgba(37,37,37,.14) !important;
  margin-top:8px;padding-top:16px}
#order_review .order-total{border-top:1px solid rgba(37,37,37,.14) !important;
  margin-top:6px;padding-top:16px;align-items:baseline}
#order_review .order-total th{font-size:19px;font-weight:700;opacity:1}
#order_review .order-total td{font-family:var(--sans);font-size:26px;font-weight:800;
  letter-spacing:-.03em;padding:0;border:0;text-align:right}
#order_review .order-total small{display:block;font-size:12.5px;font-weight:500;opacity:.55;
  margin-top:4px}

/* --- coupon, styled as the discount box on the panel --- */
.checkout_coupon{background:none;border:0;padding:0;margin:16px 0 0}
.checkout_coupon .form-row{margin:0}
.co-coupon{display:flex;gap:8px;margin:16px 0 4px}
.co-coupon input{flex:1;min-width:0;background:#fff;border:1px solid rgba(37,37,37,.22);
  border-radius:8px;padding:13px 14px;font-family:var(--sans);font-size:15px}
.co-coupon button{border:1px solid rgba(37,37,37,.22);background:#fff;border-radius:8px;
  padding:0 20px;font-family:var(--sans);font-size:14.5px;font-weight:700;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.co-coupon button:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* payment methods as choice tiles */
#payment{background:none;border-radius:0;margin-top:8px}
#payment ul.payment_methods{list-style:none;margin:0;padding:0;border:0}
#payment ul.payment_methods{perspective:1000px}
#payment li.wc_payment_method{border:1px solid rgba(37,37,37,.22);border-radius:10px;
  padding:15px 16px;margin-bottom:10px;transform-style:preserve-3d;
  transition:border-color .2s,background .2s,transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s}
#payment li.wc_payment_method:hover{transform:translateY(-2px) rotateX(4deg);
  box-shadow:0 12px 24px rgba(37,37,37,.1)}
#payment li.wc_payment_method:hover{border-color:rgba(49,92,58,.45)}
#payment li.wc_payment_method:has(input:checked){border-color:var(--brand);
  background:rgba(49,92,58,.05);box-shadow:inset 0 0 0 1px var(--brand)}
#payment li.wc_payment_method label{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:15.5px;font-weight:600;margin:0;cursor:pointer}
#payment li.wc_payment_method input[type=radio]{width:18px;height:18px;accent-color:var(--brand)}
#payment .payment_box{background:none;margin:8px 0 0 28px;padding:0;font-size:14.5px;opacity:.7}
#payment .payment_box::before{display:none}
#payment .place-order{padding:0;margin-top:16px}
.woocommerce-terms-and-conditions-wrapper{font-size:14px;opacity:.7;margin-bottom:14px}
.co-secure{display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-family:var(--sans);font-size:13.5px;opacity:.6}

@media (max-width:980px){
  form.checkout{grid-template-columns:1fr}
  #customer_details,#order_review{grid-column:1}
  /* the summary goes first on a phone, so people see what they are paying for */
  #order_review{order:-1;position:static}
}

/* ---- account ---- */
.acct-intro{text-align:center;max-width:52ch;margin:0 auto clamp(22px,2.6vw,32px)}
.acct-intro .sub{margin:0;font-size:16.5px;line-height:1.6;opacity:.66}
.acct-intro h1{margin-bottom:6px}
.acct-intro .sub{margin:0;opacity:.66;font-size:16.5px}
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px);align-items:start;
  max-width:960px;margin-inline:auto}
.acct-grid.single{grid-template-columns:1fr;max-width:470px}
.woocommerce-account .woocommerce-MyAccount-navigation{width:230px;float:left;margin-right:32px}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:10px;background:#fff;
  border-radius:12px;box-shadow:0 2px 12px rgba(37,37,37,.06)}
.woocommerce-MyAccount-navigation li a{display:block;padding:11px 13px;border-radius:9px;
  text-decoration:none;font-family:var(--sans);font-size:14.5px;font-weight:600;opacity:.7}
.woocommerce-MyAccount-navigation li a:hover{background:var(--paper);opacity:1}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--brand);color:#fff;opacity:1}
.woocommerce-MyAccount-content{overflow:hidden;background:#fff;border-radius:12px;
  padding:clamp(18px,2.4vw,30px);box-shadow:0 2px 12px rgba(37,37,37,.06)}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{font-family:var(--sans);
  font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0 0 12px}
.woocommerce-orders-table{width:100%;border-collapse:collapse}
.woocommerce-orders-table th{text-align:left;font-family:var(--sans);font-size:12.5px;font-weight:600;
  opacity:.5;padding:0 0 10px;border-bottom:1px solid var(--line)}
.woocommerce-orders-table td{padding:14px 8px 14px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.woocommerce-orders-table .button{padding:9px 18px;font-size:13.5px}
.woocommerce-Address{background:var(--paper);border-radius:10px;padding:18px;margin-top:10px}
.woocommerce-Address-title h3{margin-bottom:8px}

@media (max-width:1000px){
  form.checkout{grid-template-columns:1fr}
  #customer_details,#order_review_heading,#order_review{grid-column:1}
  #order_review{position:static}
  .acct-grid{grid-template-columns:1fr}
  .woocommerce-account .woocommerce-MyAccount-navigation{width:100%;float:none;margin:0 0 16px}
  .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:4px}
}
@media (max-width:560px){
  .form-row-first,.form-row-last{width:100%;float:none}
  .woocommerce-cart-form__cart-item{grid-template-columns:70px 1fr}
  .woocommerce-cart-form__cart-item .product-thumbnail img{width:70px;height:70px}
  .woocommerce-cart-form__cart-item .product-subtotal{grid-column:2;grid-row:3;text-align:left}
  .woocommerce-cart-form__cart-item .product-remove{grid-column:2;grid-row:4;text-align:left;margin-top:6px}
}

/* ---------- Elementor coexistence ---------- */
/* Elementor pages keep the theme's type and colour, but manage their own layout. */
.elementor-page .entry{max-width:none;margin:0}
.elementor-widget-heading .elementor-heading-title{font-family:var(--sans);letter-spacing:-.015em}
.elementor-widget-text-editor{font-family:var(--serif)}
.elementor-button{border-radius:999px;font-family:var(--sans);font-weight:600}
.elementor-button-info,.elementor-button.elementor-size-md{background:var(--brand)}
.elementor-section.elementor-section-boxed > .elementor-container{max-width:1340px}

/* ================= product detail ================= */
.pdp{padding-block:clamp(22px,3vw,38px) clamp(56px,7vw,92px)}
.pdp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,3.4vw,60px);align-items:start}

/* gallery */
.gal{position:sticky;top:96px}
.gal-main{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--paper-2)}
.gal-main img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s}
.gal-tag{position:absolute;top:14px;left:14px;background:var(--brand);color:#fff;font-family:var(--sans);
  font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px}
.gal-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin-top:12px}
.gal-thumbs button{aspect-ratio:1;border-radius:9px;overflow:hidden;border:2px solid transparent;
  background:var(--paper-2);padding:0;transition:border-color .2s}
.gal-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumbs button[aria-current="true"]{border-color:var(--brand)}

/* summary */
.pdp h1{font-size:clamp(27px,3.4vw,40px);letter-spacing:-.025em;line-height:1.1;margin-bottom:5px}
.pdp .latin{font-family:var(--serif);font-style:italic;font-size:18px;opacity:.65;margin:0 0 14px}
.pdp .rate{display:flex;align-items:center;gap:9px;font-size:14.5px;margin-bottom:18px}
.pdp .rate b{font-family:var(--sans);font-weight:600}
.pdp .rate a{opacity:.6;text-decoration:underline;text-underline-offset:3px}
.pdp .stars{color:var(--star);letter-spacing:1px}

.priceline{display:flex;align-items:baseline;gap:11px;margin-bottom:6px}
.priceline .now{font-family:var(--sans);font-size:31px;font-weight:700;letter-spacing:-.03em}
.priceline .was{font-size:18px;opacity:.45;text-decoration:line-through}
.priceline .off{font-family:var(--sans);font-size:12.5px;font-weight:600;color:#fff;background:var(--brand);
  padding:4px 9px;border-radius:999px}
.taxnote{margin:0 0 20px;font-size:14px;opacity:.55}

/* pack size */
.packs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.packs button{background:none;border:1.5px solid var(--line);border-radius:10px;padding:10px 16px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;line-height:1.2;text-align:left;transition:.2s}
.packs button small{display:block;font-family:var(--serif);font-size:12.5px;font-weight:400;opacity:.55;margin-top:2px}
.packs button:hover{border-color:rgba(49,92,58,.5)}
.packs button[aria-current="true"]{border-color:var(--brand);background:rgba(49,92,58,.05)}

.buybar{display:flex;gap:10px;align-items:stretch;margin-bottom:14px}
.buybar .qtybox{margin:0;flex:none}
.buybar .btn{margin:0;flex:1;padding:15px}
.btn.buy{background:var(--ink)}
.btn.buy:hover{background:#000}

.pdp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 22px;
  padding:16px 0;border-block:1px solid var(--line)}
.pdp-trust div{text-align:center}
.pdp-trust b{display:block;font-family:var(--sans);font-size:13.5px;font-weight:600}
.pdp-trust span{display:block;font-size:12.5px;opacity:.55;margin-top:2px}

.facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.facts span{font-family:var(--sans);font-size:12.5px;font-weight:600;border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;background:#fff}

.blurb{font-size:17px;line-height:1.65;opacity:.82;margin-bottom:22px;max-width:52ch}

/* accordion */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%;background:none;border:0;padding:17px 0;display:flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:16px;font-weight:600;text-align:left;color:var(--ink)}
.acc-head .mark{margin-left:auto;width:20px;height:20px;position:relative;flex:none}
.acc-head .mark::before,.acc-head .mark::after{content:"";position:absolute;background:var(--brand);
  border-radius:2px;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.acc-head .mark::before{left:0;right:0;top:9px;height:2px}
.acc-head .mark::after{top:0;bottom:0;left:9px;width:2px}
.acc-head[aria-expanded="true"] .mark::after{transform:rotate(90deg) scaleX(0)}
.acc-panel{overflow:hidden;height:0;transition:height .35s cubic-bezier(.2,.7,.3,1)}
.acc-panel .inner{padding:0 0 20px;font-size:16px;line-height:1.65;opacity:.82;max-width:60ch}
.acc-panel table{width:100%;border-collapse:collapse;font-size:15.5px}
.acc-panel td{padding:8px 0;border-bottom:1px solid var(--line)}
.acc-panel td:last-child{text-align:right;font-family:var(--sans);font-weight:600}

/* what is inside */
.inside{margin-top:clamp(46px,5vw,72px)}
.inside h2{font-size:clamp(24px,3vw,34px);margin-bottom:6px}
.inside p.lede{margin:0 0 26px;opacity:.68;font-size:16.5px;max-width:52ch}

/* ---- sticky buy bar, all screen sizes ----
   Appears once the real Add to cart leaves the viewport, and hides again when
   it comes back. Carries the thumbnail and name because by then the photograph
   is off screen. */
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:120;background:#fff;
  border-top:1px solid rgba(37,37,37,.12);box-shadow:0 -8px 30px rgba(37,37,37,.1);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.3,1);
  padding-block:11px}
.stickybuy.on{transform:none}

.stickyin{display:flex;align-items:center;gap:14px}

.sthumb{flex:none;width:48px;height:48px;border-radius:9px;overflow:hidden;background:var(--paper);
  border:1px solid rgba(37,37,37,.1)}
.sthumb img{width:100%;height:100%;object-fit:contain;display:block;padding:3px}

.stname{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stname b{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stprice{font-family:var(--sans);font-size:14px;font-weight:700}
.stprice del{opacity:.45;font-weight:500;margin-right:5px}
.stprice ins{text-decoration:none}

.stqty{flex:none;display:flex;align-items:center;border:1px solid rgba(37,37,37,.25);
  border-radius:9px;overflow:hidden;background:#fff}
.stqty button{width:34px;height:42px;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:17px;font-weight:700;color:var(--brand);
  transition:background .18s}
.stqty button:hover{background:var(--brand-tint)}
.stqty button:disabled{opacity:.32;cursor:default;background:none}
.stqty .qnum{min-width:34px;text-align:center;font-family:var(--sans);font-size:15px;
  font-weight:700;font-variant-numeric:tabular-nums}

.stadd{flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff !important;text-decoration:none !important;
  border-radius:9px;padding:13px 30px;font-family:var(--sans);font-size:15px;font-weight:700;
  transition:background .2s,box-shadow .25s}
.stadd:hover{background:var(--brand-dk);box-shadow:0 8px 20px rgba(49,92,58,.3)}
.stickybuy .added_to_cart{display:none}

@media (max-width:640px){
  .stickyin{gap:10px}
  .sthumb,.stname{display:none}
  .stqty{flex:none}
  .stadd{flex:1;padding:14px}
}
.stickybuy .btn{margin:0;flex:1;padding:14px}

@media (max-width:900px){
  .pdp-grid{grid-template-columns:1fr;gap:24px}
  .gal{position:static}
  .stickybuy{display:flex}
}
@media (max-width:560px){
  .pdp-trust{grid-template-columns:1fr;gap:12px;text-align:left}
  .pdp-trust div{display:flex;gap:8px;align-items:baseline;text-align:left}
  .pdp-trust span{margin:0}
  .buybar{flex-wrap:wrap}
  .buybar .btn{flex:1 1 100%}
}


/* ingredient grid on the product page, six across */
.pdp ~ .inside .mixgrid,.inside .mixgrid{justify-content:flex-start}
.inside .mix{flex:0 0 calc((100% - 5 * clamp(10px,1.4vw,20px)) / 6);max-width:150px}
@media (max-width:900px){ .inside .mix{flex-basis:calc((100% - 2 * 14px) / 3)} }
@media (max-width:560px){ .inside .mix{flex-basis:calc((100% - 14px) / 2)} }

/* WooCommerce gallery inside our shell */
.woocommerce-product-gallery{width:100% !important;float:none !important;margin-bottom:0 !important}
.woocommerce-product-gallery__wrapper{border-radius:14px;overflow:hidden}
.woocommerce-product-gallery__image img{border-radius:14px}
/* Thumbnails run down the left of the main image rather than underneath it.
   With ten or more images a row underneath either shrinks them to nothing or
   scrolls sideways; a column keeps them all in view beside the photograph. */
.woocommerce-product-gallery{position:relative;display:grid;
  grid-template-columns:78px minmax(0,1fr);gap:14px;align-items:start}
/* With the slider on, WooCommerce wraps the images in .flex-viewport — so the
   grid position has to go on that, or the slider lands in the thumbnail column
   underneath the thumbnails and the main image looks blank. */
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .flex-viewport{grid-column:2;order:2;
  width:100%;max-width:100%;min-width:0}
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper{
  grid-column:auto;width:100%}

.flex-control-thumbs{grid-column:1;order:1;
  display:flex !important;flex-direction:column;gap:9px;
  max-height:560px;overflow-y:auto;padding:0 4px 0 0;margin:0;list-style:none;
  scrollbar-width:thin}
.flex-control-thumbs li{width:auto !important;margin:0 !important;float:none !important}
.flex-control-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:9px;border:2px solid transparent;opacity:1 !important;cursor:pointer;
  background:#fff;transition:border-color .2s}
.flex-control-thumbs img:hover{border-color:rgba(49,92,58,.4)}
.flex-control-thumbs img.flex-active{border-color:var(--brand)}

@media (max-width:600px){
  .woocommerce-product-gallery{grid-template-columns:1fr}
  .woocommerce-product-gallery__wrapper,
  .woocommerce-product-gallery .flex-viewport{grid-column:1;order:1}
  .flex-control-thumbs{grid-column:1;order:2;flex-direction:row;max-height:none;
    overflow-x:auto;overflow-y:hidden}
  .flex-control-thumbs li{flex:0 0 68px}
}
.onsale{position:absolute;top:14px;left:14px;z-index:3;background:var(--brand);color:#fff;
  font-family:var(--sans);font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;
  margin:0 !important;min-height:0 !important;line-height:1.4 !important}

/* summary column: WooCommerce's own elements, our type */
.summary .product_title{font-size:clamp(27px,3.4vw,40px);letter-spacing:-.025em;line-height:1.1;margin-bottom:8px}
.summary .woocommerce-product-rating{display:flex;align-items:center;gap:9px;margin-bottom:18px;font-size:14.5px}
.summary .star-rating{color:var(--star)}
.summary .woocommerce-review-link{opacity:.6;text-decoration:underline;text-underline-offset:3px}
.summary .price{display:flex;align-items:baseline;gap:11px;font-family:var(--sans);font-size:31px;
  font-weight:700;letter-spacing:-.03em;margin:0 0 6px;color:var(--ink)}
.summary .price del{font-family:var(--serif);font-size:18px;font-weight:400;opacity:.45}
.summary .price ins{text-decoration:none}
.summary .woocommerce-product-details__short-description{font-size:17px;line-height:1.65;opacity:.82;
  margin-bottom:22px;max-width:52ch}
.summary form.cart{display:flex;gap:10px;align-items:stretch;margin:0 0 14px;flex-wrap:wrap}
.summary form.cart .quantity{flex:none}
.summary form.cart .quantity input{width:88px;text-align:center;padding:14px 6px;border-radius:999px}
.summary form.cart .single_add_to_cart_button{flex:1;padding:15px 28px;font-size:16px}
.summary .variations{width:100%}
.summary .variations td{padding:0 0 12px;display:block}
.summary .stock{font-family:var(--sans);font-size:14px;font-weight:600}
.summary .stock.in-stock{color:#3F5D3A}
.summary .stock.out-of-stock{color:var(--brand)}

/* reviews */
#reviews{margin-top:clamp(46px,5vw,72px)}
#reviews h2{font-size:clamp(24px,3vw,34px);margin-bottom:18px}
.commentlist{list-style:none;margin:0;padding:0}
.commentlist li{padding:18px 0;border-bottom:1px solid var(--line)}
.comment_container{display:flex;gap:14px}
.comment_container img{width:44px;height:44px;border-radius:50%}
.comment-text .star-rating{color:var(--star);margin-bottom:6px}
/* Related and up-sells were never given a grid, so they fell back to
   WooCommerce's own float layout — which is why the cards climbed up beside the
   gallery instead of sitting below it. */
.related,.up-sells{clear:both;margin-top:clamp(46px,5vw,72px);
  padding-top:clamp(30px,3.4vw,46px);border-top:1px solid var(--line)}
.related > h2,.up-sells > h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.025em;
  margin-bottom:22px}

.related ul.products,.up-sells ul.products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);
  list-style:none;margin:0;padding:0;float:none;perspective:1400px}
.related ul.products::before,.related ul.products::after,
.up-sells ul.products::before,.up-sells ul.products::after{content:none}
.related ul.products > li,.up-sells ul.products > li{
  float:none;width:auto;margin:0;clear:none}

.related .card,.up-sells .card{min-width:0;height:100%}
.related .card .shot,.up-sells .card .shot{position:relative;display:block;width:100%;
  aspect-ratio:1;overflow:hidden;border-radius:14px;background:#fff;
  border:1px solid var(--line);transition:box-shadow .35s,border-color .3s}
.related .card:hover .shot,.up-sells .card:hover .shot{border-color:var(--brand);
  box-shadow:0 16px 32px rgba(37,37,37,.13)}
.related .card .shot img,.up-sells .card .shot img{width:100%;height:100%;
  object-fit:contain;padding:12px;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.related .card:hover .shot img,.up-sells .card:hover .shot img{transform:scale(1.05)}
.related .card h3,.up-sells .card h3{font-size:15.5px;line-height:1.3;margin-top:12px;
  min-height:2.6em}

@media (max-width:1100px){
  .related ul.products,.up-sells ul.products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .related ul.products,.up-sells ul.products{grid-template-columns:repeat(2,1fr)}
}

/* ---------- motion is opt-in, so nothing is hidden if the script fails ---------- */
/* The reveal and heading-wipe rules only apply once JS confirms it is running. */
html:not(.mayoora-js) [data-reveal] > *{opacity:1 !important;transform:none !important}
html:not(.mayoora-js) [data-wipe]{clip-path:none !important;transform:none !important}

/* ---------- two layout fixes ---------- */

/* data-wipe made headings inline-block, which broke centred headings —
   they shrank to their text and sat left. clip-path works fine on a block. */
[data-wipe]{display:block}
.why h2[data-wipe],.taste h2[data-wipe]{display:block;text-align:center}

/* The heading wipe is retired. Headings are always visible; the row reveal
   below them is what gives the page its entrance. */
[data-wipe]{clip-path:none !important;transform:none !important;display:block}
.why h2,.taste h2{text-align:center}

/* ---------- product shelf grid fix ---------- */
/* The [products] shortcode wraps its list in <div class="woocommerce"> around
   <ul class="products">. Only the ul was being dissolved, so the whole list
   became a single grid cell. Dissolve every wrapper instead. */
/* The shelf tab panel carries .panel for its tab role, not for the shop's
   white card styling. Without this it paints an empty white box. */
.shelf .panel{background:none;border-radius:0;padding:0;box-shadow:none}
.shelf .panel + .panel{margin-top:0}

/* The [products] shortcode also prints an empty notices wrapper as a sibling of
   the list. It is not inside ul.products, so the JS cleanup never saw it, and
   because its parent is display:contents it became a grid cell of its own —
   pushing the whole row one column to the right and orphaning the last card. */
.shelfgrid .woocommerce-notices-wrapper,
.grid .woocommerce-notices-wrapper{display:none}

.shelfgrid > *:not(.card):not(.fav),
.grid > *:not(.card):not(.fav){display:contents}
.shelfgrid .woocommerce,.grid .woocommerce,
.shelfgrid ul.products,.grid ul.products{display:contents;list-style:none;margin:0;padding:0}

/* Cards must be allowed to shrink inside their grid track, or a wide image
   forces the column open. */
.shelfgrid .card,.grid .card{min-width:0}
.shelfgrid .card .shot,.grid .card .shot{width:100%}
.shelfgrid .card img,.grid .card img{max-width:100%;height:auto}
.shelfgrid .card .shot img,.grid .card .shot img{height:100%;object-fit:cover}

/* ---------- shelf grid, done properly ---------- */
/* display:contents on the shortcode wrappers was fragile and left an empty
   first cell. Make the product list itself the grid instead. */
.shelfgrid,.grid{display:block;perspective:none}
.shelfgrid > .woocommerce,.grid > .woocommerce{display:block}
.shelfgrid ul.products,.grid ul.products{
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px);
  list-style:none;margin:0;padding:0;perspective:1400px}
.shelfgrid ul.products > li,.grid ul.products > li,
.shelfgrid ul.products > .card,.grid ul.products > .card{margin:0;width:auto;float:none;min-width:0}

/* In the loop the image wrapper is an <a>, which is inline by default, so
   aspect-ratio was ignored and the thumbnails came out at ragged heights. */
.card .shot{display:block}
.card .shot img{display:block;width:100%;height:100%;object-fit:cover}

@media (max-width:1200px){ .shelfgrid ul.products,.grid ul.products{grid-template-columns:repeat(4,1fr)} }
@media (max-width:900px){ .shelfgrid ul.products,.grid ul.products{grid-template-columns:repeat(3,1fr)} }
@media (max-width:600px){ .shelfgrid ul.products,.grid ul.products{grid-template-columns:repeat(2,1fr);gap:14px} }

/* An uploaded image can stand in for the drawn illustration. */
.whyitem .art-img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 10px 12px rgba(31,23,16,.28))}

/* ---------- nav bullets ---------- */
/* wp_nav_menu is called with items_wrap '%3$s', so the <li> items sit directly
   inside <nav> with no <ul>. The list-style:none on nav ul never matched them,
   so browsers drew default markers. */
header nav,header nav li,.mnav,.mnav li{list-style:none}
header nav li{margin:0;display:block}
header nav li a{display:block}
.mnav li{margin:0}

/* ---------- sign-in modal ---------- */
.lscrim{position:fixed;inset:0;background:rgba(20,16,12,.55);opacity:0;pointer-events:none;
  transition:opacity .28s;z-index:180}
.lscrim.on{opacity:1;pointer-events:auto}
.lmodal{position:fixed;top:50%;left:50%;z-index:190;width:min(440px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);overflow:auto;background:#fff;border-radius:14px;
  padding:26px 26px 28px;box-shadow:0 30px 70px rgba(20,16,12,.32);
  transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;
  transition:opacity .28s cubic-bezier(.2,.7,.3,1),transform .28s cubic-bezier(.2,.7,.3,1)}
.lmodal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.lclose{position:absolute;top:12px;right:14px;background:none;border:0;font-size:26px;line-height:1;
  color:rgba(37,37,37,.45);padding:4px 8px}
.lclose:hover{color:var(--brand)}

.ltabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:0 0 20px}
.ltabs button{background:none;border:0;padding:0 0 12px;font-family:var(--sans);font-size:17px;
  font-weight:600;letter-spacing:-.015em;color:rgba(37,37,37,.45);border-bottom:2.5px solid transparent;
  margin-bottom:-1px;transition:color .2s,border-color .2s}
.ltabs button:hover{color:var(--ink)}
.ltabs button[aria-selected="true"]{color:var(--brand);border-color:var(--brand)}

.lpane .hint{margin:0 0 16px;font-size:14.5px;opacity:.6}
.lpane[hidden]{display:none}
.lmodal .btn{margin-top:18px}
.lnotice{margin-bottom:16px}
.lnotice ul{list-style:none;margin:0;padding:0}
.lnotice li,.lnotice .woocommerce-error,.lnotice .woocommerce-message{
  background:rgba(49,92,58,.07);border-left:3px solid var(--brand);border-radius:8px;
  padding:11px 14px;font-size:14.5px;margin:0 0 8px}
.lnotice a{color:var(--brand)}

@media (max-width:480px){
  .lmodal{padding:22px 18px 24px;border-radius:12px}
  .ltabs button{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .lmodal,.lscrim{transition:none}
}

/* ---------- account dashboard layout ---------- */
/* The float-based layout collapsed: the nav rendered as a floating row and the
   content overlapped the footer. Grid instead. */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:230px 1fr;
  gap:clamp(18px,2.4vw,32px);align-items:start}
.woocommerce-account .woocommerce-MyAccount-navigation{width:auto;float:none;margin:0}
.woocommerce-account .woocommerce-MyAccount-navigation ul{display:block}
.woocommerce-account .woocommerce-MyAccount-navigation li{display:block;margin:0}
.woocommerce-account .woocommerce-MyAccount-navigation li a{white-space:normal}
.woocommerce-account .woocommerce-MyAccount-content{overflow:visible;margin:0}

/* The dashboard greeting reads better as normal prose. */
.woocommerce-MyAccount-content p{font-size:16.5px;line-height:1.65;max-width:62ch}
.woocommerce-MyAccount-content p + p{margin-top:12px}
.woocommerce-MyAccount-content a{color:var(--brand)}

/* Logged-out account page: the two panels are laid out by .acct-grid, so the
   WooCommerce wrapper must not also try to be a grid. */
.woocommerce-account:not(.logged-in) .woocommerce{display:block}

@media (max-width:1000px){
  .woocommerce-account .woocommerce{grid-template-columns:1fr}
  .woocommerce-account .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:4px}
}

/* Sign in and register sit at equal height rather than one hanging short. */
.acct-grid{align-items:stretch}
.acct-grid > .panel{display:flex;flex-direction:column}
.acct-grid > .panel form{display:flex;flex-direction:column;flex:1}
.acct-grid > .panel .btn{margin-top:auto}
.acct-grid > .panel .woocommerce-privacy-policy-text{font-size:13.5px;opacity:.6;margin:14px 0 0}
.acct-grid > .panel .woocommerce-privacy-policy-text p{font-size:13.5px;line-height:1.5}


/* ================= about page, second design ================= */
.ab2{--sand:#EFE9DA;--ink2:#2E2E2E}

/* --- hero: copy left, offset photo pair right --- */
.a2hero{position:relative;overflow:hidden;background:var(--paper);
  padding-block:clamp(38px,5vw,72px) clamp(48px,6vw,90px)}
.a2hero::before{content:"";position:absolute;width:min(52vw,720px);aspect-ratio:1;border-radius:50%;
  background:var(--brand-tint);right:-14vw;top:-20vw;z-index:0}
.a2in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4vw,66px);align-items:center}
.a2kick{display:inline-flex;align-items:center;gap:9px;background:#fff;border-radius:999px;
  padding:8px 16px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 4px 16px rgba(37,37,37,.08);margin-bottom:22px}
.a2kick i{width:7px;height:7px;border-radius:50%;background:var(--brand);font-style:normal}
.a2hero h1{font-size:clamp(38px,5.6vw,76px);line-height:1.0;letter-spacing:-.038em;margin:0 0 20px;max-width:13ch}
.a2hero h1 span{color:var(--brand)}
.a2lede{font-size:clamp(17px,1.7vw,20px);line-height:1.6;max-width:44ch;opacity:.72;margin:0 0 28px}
.a2facts{display:flex;flex-wrap:wrap;gap:22px;list-style:none;padding:0;margin:0}
.a2facts li{border-left:2px solid var(--brand);padding-left:13px}
.a2facts b{display:block;font-family:var(--sans);font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1}
.a2facts span{display:block;font-size:13.5px;opacity:.58;margin-top:4px}

.a2pics{position:relative;padding-bottom:12%}
.a2pics img{border-radius:16px;display:block;box-shadow:0 26px 60px rgba(37,37,37,.18)}
.a2pics .tall{width:74%;position:relative;z-index:2}
.a2pics .wide{width:60%;position:absolute;right:0;bottom:0;z-index:3;border:6px solid var(--paper)}
.a2stamp{position:absolute;top:-18px;right:8%;z-index:4;width:104px;height:104px;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;text-align:center;
  font-family:var(--sans);font-weight:700;line-height:1.1;font-size:13px;
  box-shadow:0 14px 34px rgba(49,92,58,.34);animation:a2spin 22s linear infinite}
.a2stamp b{display:block;font-size:26px;letter-spacing:-.02em}
@keyframes a2spin{to{transform:rotate(360deg)}}

/* --- pull quote --- */
.a2quote{background:var(--ink);color:var(--paper);padding-block:clamp(48px,6vw,86px)}
.a2quote p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3.2vw,40px);line-height:1.35;
  max-width:26ch;margin:0 auto;text-align:center}
.a2quote cite{display:block;text-align:center;margin-top:22px;font-family:var(--sans);font-style:normal;
  font-size:13.5px;font-weight:600;opacity:.55;letter-spacing:.03em}

/* --- timeline --- */
.a2time{background:#fff;padding-block:clamp(54px,6.5vw,96px);overflow:hidden}
.a2thead{margin-bottom:clamp(30px,4vw,54px)}
.a2thead h2{font-size:clamp(27px,3.4vw,42px);letter-spacing:-.025em}
.a2thead p{margin:10px 0 0;opacity:.66;font-size:17px}

.a2tl{position:relative;perspective:1400px}
.a2line{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.3,.8,.3,1)}
.a2tl.in .a2line{transform:scaleX(1)}

.a2track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);
  gap:clamp(12px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:thin}
.a2track::-webkit-scrollbar{height:6px}
.a2track::-webkit-scrollbar-thumb{background:rgba(37,37,37,.18);border-radius:99px}

.a2step{position:relative;scroll-snap-align:start;display:grid;
  grid-template-rows:1fr auto 1fr;align-items:center;min-height:330px;transform-style:preserve-3d}

.a2tcard{position:relative;background:var(--paper);border-radius:16px;
  padding:clamp(20px,2.2vw,26px);margin:0 0 26px;grid-row:1;align-self:end;overflow:hidden;
  transform-style:preserve-3d;
  opacity:0;transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .45s cubic-bezier(.2,.8,.3,1),
             box-shadow .4s,background .3s}
.a2tl.in .a2tcard{opacity:1;transform:none;transition-delay:calc(.15s + var(--i) * .12s)}
.a2step:nth-child(even) .a2tcard{grid-row:3;align-self:start;margin:26px 0 0}
.a2tcard:hover{background:#fff;box-shadow:0 24px 50px rgba(37,37,37,.16)}

.a2ghost{position:absolute;right:-6px;bottom:-22px;font-family:var(--sans);font-weight:800;
  font-size:78px;line-height:1;letter-spacing:-.05em;color:var(--brand);opacity:.07;
  pointer-events:none;transform:translateZ(-30px)}
.a2tcard b{display:block;font-family:var(--sans);font-size:27px;font-weight:700;letter-spacing:-.025em;
  margin-bottom:9px;transform:translateZ(26px)}
.a2tcard p{margin:0;font-size:15.5px;line-height:1.55;opacity:.7;transform:translateZ(14px)}

.a2stem{position:absolute;left:50%;width:2px;background:var(--line);grid-row:1;
  height:26px;bottom:0;transform:translateX(-50%)}
.a2step:nth-child(even) .a2stem{grid-row:3;top:0;bottom:auto}

.a2dot{grid-row:2;justify-self:center;width:15px;height:15px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 5px #fff,0 0 0 7px rgba(49,92,58,.18);z-index:2;
  transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.a2tl.in .a2dot{transform:scale(1);transition-delay:calc(.1s + var(--i) * .12s)}
.a2step:hover .a2dot{box-shadow:0 0 0 5px #fff,0 0 0 11px rgba(49,92,58,.22)}

@media (max-width:760px){
  .a2line{left:22px;right:auto;top:0;bottom:0;width:2px;height:auto;
    transform:scaleY(0);transform-origin:top;transition:transform 1.1s cubic-bezier(.3,.8,.3,1)}
  .a2tl.in .a2line{transform:scaleY(1)}
  .a2track{grid-auto-flow:row;grid-auto-columns:auto;gap:0;overflow:visible;padding-left:52px}
  .a2step{grid-template-rows:auto;min-height:0;display:block;padding-bottom:22px}
  .a2step:nth-child(even) .a2tcard,.a2tcard{grid-row:auto;margin:0}
  .a2stem{display:none}
  .a2dot{position:absolute;left:-37px;top:26px}
}
@media (prefers-reduced-motion:reduce){
  .a2line,.a2tcard,.a2dot{transition:none !important;opacity:1 !important;transform:none !important}
  .a2line{transform:scaleX(1) !important}
}

/* --- alternating rows --- */
.a2rows{background:var(--paper);padding-block:clamp(54px,6.5vw,96px)}
.a2row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,66px);align-items:center;
  margin-bottom:clamp(34px,4.5vw,72px)}
.a2row:last-child{margin-bottom:0}
.a2row:nth-child(even) .a2rpic{order:2}
.a2rpic img{width:100%;border-radius:16px;display:block;box-shadow:0 20px 46px rgba(37,37,37,.14)}
.a2num{display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:800;letter-spacing:.1em;
  color:var(--brand);margin-bottom:12px}
.a2row h3{font-size:clamp(23px,2.8vw,34px);letter-spacing:-.02em;margin-bottom:12px;max-width:18ch}
.a2row p{margin:0;font-size:17px;line-height:1.65;opacity:.74;max-width:46ch}

/* --- stockist ring --- */
.a2stock{position:relative;overflow:hidden;color:var(--paper);
  padding-block:clamp(52px,6.5vw,90px) clamp(34px,4.5vw,62px);
  background:
    radial-gradient(70% 60% at 50% 62%,rgba(49,92,58,.34),transparent 68%),
    radial-gradient(90% 70% at 12% 0%,rgba(255,255,255,.07),transparent 60%),
    linear-gradient(180deg,#2E2E2E 0%,#1A130E 100%)}
/* faint grain texture over the whole band */
.a2stock::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(-38deg,rgba(255,255,255,.028) 0 2px,transparent 2px 26px)}
.a2stock .wrap,.a2stock .a2ring,.a2stock .a2flat{position:relative;z-index:3}

.a2shead{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;
  margin-bottom:clamp(18px,2.4vw,30px)}
.a2shead h2{font-size:clamp(27px,3.4vw,42px);letter-spacing:-.025em;color:var(--paper)}
.a2shead p{margin:10px 0 0;opacity:.66;font-size:17px;max-width:48ch;color:var(--paper)}
.a2spill{display:flex;align-items:baseline;gap:12px;border-radius:16px;padding:16px 24px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.a2spill b{font-family:var(--sans);font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--accent)}
.a2spill span{font-size:14.5px;opacity:.7;max-width:14ch;line-height:1.3}

/* the stage */
.a2ring{position:relative;height:clamp(330px,35vw,450px);
  perspective:2000px;perspective-origin:50% 46%;touch-action:pan-y;cursor:grab}
.a2ring:active{cursor:grabbing}

/* a dashed ring turning the other way, behind everything */
.a2orbit{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotateX(74deg);
  width:min(84vw,900px);aspect-ratio:1;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.14);animation:a2orbit 46s linear infinite;pointer-events:none}
.a2orbit::before{content:"";position:absolute;inset:9%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.08)}
@keyframes a2orbit{to{transform:translate(-50%,-50%) rotateX(74deg) rotate(360deg)}}

/* pooled light on the floor */
.a2floor{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:min(78vw,860px);height:120px;border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(243,235,221,.30),transparent 70%);filter:blur(6px)}

.a2spin{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(-7deg) rotateY(var(--rot,0deg));will-change:transform}
.a2face{position:absolute;left:50%;top:50%;width:236px;margin:-90px 0 0 -118px;
  border-radius:20px;padding:24px 20px;text-align:center;backface-visibility:hidden;
  background:linear-gradient(165deg,#FFFDF8,#F2ECE0);
  box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.5) inset;
  color:var(--ink);
  transform:rotateY(calc(var(--n) * var(--step))) translateZ(var(--r));
  transition:box-shadow .3s}
.a2face:hover{box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 2px var(--accent) inset}
.a2face .a2mono{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;
  margin:0 auto 15px;background:var(--c);color:#fff;
  font-family:var(--sans);font-size:23px;font-weight:700;
  box-shadow:0 10px 22px rgba(0,0,0,.3),0 0 0 4px rgba(255,255,255,.55)}
.a2face b{display:block;font-family:var(--sans);font-size:16.5px;font-weight:700;line-height:1.25}
.a2face em{display:block;font-style:normal;font-size:13px;opacity:.55;margin-top:5px}

.a2hint{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);margin:0;z-index:4;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:var(--paper);opacity:.5}
.a2hint::before,.a2hint::after{content:"";width:22px;height:1px;background:currentColor;opacity:.5}

/* flat fallback */
.a2flat{display:none;list-style:none;margin:0;padding:0;grid-template-columns:1fr;gap:10px}
.a2flat li{display:flex;align-items:center;gap:13px;border-radius:14px;padding:14px 16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.a2flat .a2mono{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;flex:none;
  background:var(--c);color:#fff;font-family:var(--sans);font-size:18px;font-weight:700}
.a2flat b{display:block;font-family:var(--sans);font-size:15.5px;font-weight:700;color:var(--paper)}
.a2flat em{display:block;font-style:normal;font-size:13px;opacity:.6;margin-top:2px;color:var(--paper)}

@media (max-width:720px){
  .a2ring{display:none}
  .a2flat{display:grid;padding-inline:var(--pad)}
}
@media (prefers-reduced-motion:reduce){
  .a2ring{display:none}
  .a2flat{display:grid;padding-inline:var(--pad)}
  .a2orbit{animation:none}
}

/* --- closing card --- */
.a2cta{background:var(--paper);color:var(--ink);padding-block:clamp(52px,6.5vw,96px) clamp(56px,7vw,104px)}
.a2card{background:#fff;border-radius:22px;text-align:center;position:relative;overflow:hidden;
  padding:clamp(38px,5vw,68px) clamp(24px,4vw,60px);max-width:900px;margin-inline:auto;
  box-shadow:0 20px 60px rgba(37,37,37,.10)}
.a2card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#2E2036,#6E3B2A,#8A4436,#A8724A,#C9A97E,#D2A544,#B9AE8E,#9B8B6A,#7C8391)}
.a2dots{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.a2dots span{width:15px;height:15px;border-radius:50%;box-shadow:0 2px 6px rgba(37,37,37,.18);
  transform:scale(0);animation:a2pop .5s cubic-bezier(.3,1.5,.5,1) forwards;
  animation-delay:calc(var(--i) * 45ms);transition:transform .25s}
.a2dots span:hover{transform:scale(1.45)!important}
@keyframes a2pop{to{transform:scale(1)}}
.a2cta h2{font-size:clamp(28px,4vw,50px);letter-spacing:-.03em;margin-bottom:12px}
.a2cta p{margin:0 0 30px;opacity:.66;font-size:17.5px;max-width:44ch;margin-inline:auto}
.a2btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--brand);color:#fff;
  font-family:var(--sans);font-size:16px;font-weight:700;padding:16px 36px;border-radius:999px;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background .2s}
.a2btn:hover{background:var(--brand-dk);color:#fff;transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(49,92,58,.32)}
.a2btn svg{transition:transform .25s}
.a2btn:hover svg{transform:translateX(4px)}

@media (max-width:940px){
  .a2in,.a2row{grid-template-columns:1fr}
  .a2row:nth-child(even) .a2rpic{order:0}
  .a2pics{max-width:460px;margin-inline:auto}
  .a2names{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .a2facts{gap:16px}
  .a2stamp{width:84px;height:84px;font-size:11px}
  .a2stamp b{font-size:21px}
}
@media (prefers-reduced-motion:reduce){ .a2stamp{animation:none} }

/* ================= footer ================= */

/* --- contact strip above it --- */
.ft-top{background:var(--brand);color:#fff}
.ft-top .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,3vw,52px);
  align-items:center;padding-block:clamp(30px,3.6vw,50px)}
.ft-say h2{font-size:clamp(23px,2.8vw,36px);letter-spacing:-.025em;margin:0 0 8px;max-width:20ch}
.ft-say p{margin:0;opacity:.85;font-size:16.5px;max-width:46ch}
.ft-act{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.ft-wa{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--brand);
  text-decoration:none;font-family:var(--sans);font-size:15.5px;font-weight:700;
  padding:15px 26px;border-radius:999px;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s}
.ft-wa:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.24);color:var(--brand)}
.ft-call{text-decoration:none;color:#fff;font-family:var(--sans);padding:12px 20px;border-radius:14px;
  border:1.5px solid rgba(255,255,255,.35);transition:background .22s,border-color .22s}
.ft-call:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);color:#fff}
.ft-call span{display:block;font-size:12px;opacity:.75;font-weight:500}
.ft-call b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;margin-top:2px}

/* --- main --- */
footer{position:relative;background:var(--ink);color:var(--paper);
  padding-block:clamp(46px,6vw,76px) 26px}
.ft-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(24px,3vw,46px)}
.flogo{height:52px;width:auto;filter:brightness(0) invert(1);opacity:.95;margin-bottom:18px}
.ft-tag{font-size:16px;line-height:1.6;opacity:.85;max-width:34ch;margin:0 0 16px}
footer .addr{font-size:14.5px;opacity:.55;max-width:30ch;margin:0 0 10px;line-height:1.6}
.ft-mail{margin:0 0 20px}
.ft-mail a{font-size:15px;text-decoration:none;opacity:.85;border-bottom:1px solid rgba(234,231,219,.3);
  padding-bottom:2px}
.ft-mail a:hover{color:var(--accent);border-color:var(--accent)}
.ft-social{display:flex;gap:10px}
.ft-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:rgba(234,231,219,.08);color:var(--paper);
  transition:background .25s,transform .25s,color .25s}
.ft-social a:hover{background:var(--brand);color:#fff;transform:translateY(-3px)}

.ft-col h4{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;opacity:.5;margin:0 0 16px}
.ft-col ul{list-style:none;margin:0;padding:0}
.ft-col li{margin-bottom:11px}
.ft-col a{position:relative;font-size:15.5px;text-decoration:none;opacity:.85;
  transition:opacity .2s,color .2s,padding-left .25s}
.ft-col a::before{content:"";position:absolute;left:0;top:50%;width:0;height:1.5px;background:var(--accent);
  transition:width .25s;transform:translateY(-50%)}
.ft-col a:hover{opacity:1;color:var(--accent);padding-left:16px}
.ft-col a:hover::before{width:11px}

.ft-news{margin-top:clamp(28px,3vw,44px);padding-top:clamp(24px,3vw,36px);
  border-top:1px solid rgba(234,231,219,.14)}

/* --- reassurance row --- */
.ft-assure{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,3.4vw,46px);
  padding-top:clamp(24px,3vw,34px);border-top:1px solid rgba(234,231,219,.14)}
.ft-assure span{font-family:var(--sans);font-size:12.5px;font-weight:600;
  background:rgba(234,231,219,.07);border-radius:999px;padding:8px 15px;opacity:.85}
.ft-assure .ft-lic{background:none;border:1px solid rgba(234,231,219,.22);opacity:.6;font-weight:500}
.ft-assure .amount,.ft-assure bdi{font-weight:600}

.legal{border-top:1px solid rgba(234,231,219,.14);margin-top:26px;padding-top:20px;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;opacity:.5}

/* --- back to top --- */
.ft-top-btn{position:fixed;right:clamp(14px,3vw,30px);bottom:clamp(14px,3vw,30px);z-index:120;
  width:46px;height:46px;border-radius:50%;border:0;background:var(--brand);color:#fff;
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(49,92,58,.36);
  opacity:0;pointer-events:none;transform:translateY(14px);
  transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.3,1),background .2s}
.ft-top-btn.on{opacity:1;pointer-events:auto;transform:none}
.ft-top-btn:hover{background:var(--brand-dk);transform:translateY(-3px)}

@media (max-width:1000px){
  .ft-top .wrap{grid-template-columns:1fr}
  .ft-act{justify-content:flex-start}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .ft-grid{grid-template-columns:1fr}
  .ft-wa,.ft-call{width:100%;justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){ .ft-top-btn{transition:opacity .01ms} }

@media (prefers-reduced-motion:reduce){ .a2dots span{animation:none;transform:scale(1)} }

/* --- customer reviews --- */
.a2rev{background:#fff;padding-block:clamp(52px,6.5vw,94px)}
.a2revhead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
  margin-bottom:clamp(28px,3.4vw,46px)}
.a2revhead h2{font-size:clamp(27px,3.4vw,42px);letter-spacing:-.025em;max-width:18ch}
.a2revhead p{margin:10px 0 0;opacity:.66;font-size:17px}
.a2score{display:flex;align-items:center;gap:14px;background:var(--paper);border-radius:16px;
  padding:16px 22px}
.a2score b{font-family:var(--sans);font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1}
.a2stars{display:block;color:var(--star);font-size:15px;letter-spacing:2px}
.a2score em{display:block;font-style:normal;font-size:13.5px;opacity:.55;margin-top:3px}

.a2revs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.a2rcard{position:relative;margin:0;background:var(--paper);border-radius:16px;
  padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s,background .3s}
.a2rcard:hover{transform:translateY(-6px);background:#fff;box-shadow:0 22px 46px rgba(37,37,37,.13)}
.a2quote-mark{position:absolute;top:6px;right:20px;font-family:var(--serif);font-size:74px;
  line-height:1;color:var(--brand);opacity:.12;pointer-events:none}
.a2rstars{color:var(--star);font-size:15px;letter-spacing:2px;margin-bottom:12px}
.a2rcard blockquote{margin:0 0 20px;font-size:16.5px;line-height:1.6;opacity:.82}
.a2rcard figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--line)}
.a2avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--brand);color:#fff;font-family:var(--sans);font-size:17px;font-weight:700}
.a2rcard figcaption b{display:block;font-family:var(--sans);font-size:15px;font-weight:600}
.a2rcard figcaption em{display:block;font-style:normal;font-size:13.5px;opacity:.55}
.a2ver{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(63,93,58,.14);color:#3F5D3A;flex:none}

@media (max-width:940px){ .a2revs{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .a2revs{grid-template-columns:1fr}
  .a2revhead{flex-direction:column;align-items:flex-start}
}

/* A photograph can replace the lettered circle in a review. */
img.a2avatar{object-fit:cover;padding:0;background:var(--paper-2)}
.a2rcard:hover img.a2avatar{transform:scale(1.06)}
img.a2avatar{transition:transform .35s cubic-bezier(.2,.8,.3,1)}

/* ================= combo page ================= */

/* --- hero --- */
.cbhero{position:relative;overflow:hidden;color:var(--paper);
  padding-block:clamp(40px,5vw,74px) clamp(46px,6vw,86px);
  background:
    radial-gradient(80% 70% at 78% 30%,rgba(243,235,221,.22),transparent 62%),
    radial-gradient(90% 80% at 10% 0%,rgba(255,255,255,.08),transparent 58%),
    linear-gradient(180deg,#2A5233 0%,#1B3A22 100%)}
.cbhero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(-38deg,rgba(255,255,255,.03) 0 2px,transparent 2px 26px)}
.cbin{position:relative;z-index:3;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(24px,4vw,60px);align-items:center}
.cbtag{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#252525;
  border-radius:999px;padding:8px 16px;font-family:var(--sans);font-size:12.5px;font-weight:800;
  letter-spacing:.03em;margin-bottom:20px}
.cbhero h1{font-size:clamp(36px,5.4vw,72px);line-height:1.0;letter-spacing:-.038em;margin:0 0 18px;max-width:13ch}
.cbhero h1 span{color:var(--accent)}
.cblede{font-size:clamp(17px,1.7vw,20px);line-height:1.6;max-width:44ch;opacity:.85;margin:0 0 26px}
.cbpoints{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.cbpoints li{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;
  font-weight:600;border:1px solid rgba(255,249,239,.3);border-radius:999px;padding:8px 15px}
.cbpoints svg{color:var(--accent);flex:none}
.cbpic{position:relative}
.cbpic img{border-radius:20px;display:block;box-shadow:0 30px 70px rgba(0,0,0,.42);
  animation:cbbob 8s ease-in-out infinite}
@keyframes cbbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.cbsave{position:absolute;top:-16px;right:-8px;z-index:4;width:110px;height:110px;border-radius:50%;
  background:var(--accent);color:#252525;display:grid;place-items:center;text-align:center;
  font-family:var(--sans);font-weight:800;line-height:1.05;font-size:12.5px;
  box-shadow:0 16px 36px rgba(0,0,0,.35);animation:cbspin 20s linear infinite}
.cbsave b{display:block;font-size:29px;letter-spacing:-.03em}
@keyframes cbspin{to{transform:rotate(360deg)}}

/* --- grid --- */
.cbsec{background:var(--paper);padding-block:clamp(52px,6.5vw,94px)}
.cbhead{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;
  margin-bottom:clamp(26px,3.2vw,44px)}
.cbhead h2{font-size:clamp(27px,3.4vw,42px);letter-spacing:-.025em}
.cbhead p{margin:10px 0 0;opacity:.66;font-size:17px;max-width:50ch}

/* --- combo rows: pack shot beside the copy, not above it --------------------
   The pack shots are wide (up to 2.3:1 for a four-pack set). Stacked in a tall
   card they sat small in the middle of a lot of nothing; laid out sideways they
   get the full width of their panel and the card stops being mostly air. */

.cbgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,24px);
  perspective:1600px}

.cbcard{position:relative;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  align-items:stretch;margin:0;background:#fff;border-radius:16px;
  border:1px solid var(--line);transform-style:preserve-3d;
  /* one transform carries both the entrance and the pointer tilt — keeping them
     on separate rules meant whichever won the cascade cancelled the other */
  transform:
    translateY(var(--ty,44px))
    rotateX(calc(var(--erx,-13deg) + var(--rx,0deg)))
    rotateY(var(--ry,0deg));
  opacity:var(--op,0);
  transition:transform .85s cubic-bezier(.16,.84,.3,1),opacity .7s ease,
             box-shadow .45s,border-color .3s;
  will-change:transform}
.cbcard.is-in{--ty:0px;--erx:0deg;--op:1}
.cbcard.is-live{transition:transform .1s linear,opacity .7s ease,box-shadow .45s,border-color .3s}
.cbcard:hover{border-color:var(--brand);
  /* the shadow slides opposite the tilt, so the card looks lifted off the page */
  box-shadow:calc(var(--ry,0deg) / 1deg * -1.4px) 26px 50px rgba(37,37,37,.19)}

/* --- pack shot: no panel of its own, so the card reads as one surface --- */
.cbshot{position:relative;display:grid;place-items:center;padding:26px 10px 26px 20px;
  transform:translateZ(20px)}
.cbshot::before{content:"";position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:104%;aspect-ratio:1.4;border-radius:50%;
  background:radial-gradient(ellipse,rgba(49,92,58,.10),transparent 66%);
  transition:scale .6s cubic-bezier(.2,.8,.3,1)}
.cbcard:hover .cbshot::before{scale:1.09}
.cbshot img{position:relative;width:100%;max-height:190px;object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(37,37,37,.16));
  transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.cbcard:hover .cbshot img{
  transform:translateZ(44px) scale(1.06)
    translate(calc(var(--ry,0deg) / 1deg * -1.1px), calc(var(--rx,0deg) / 1deg * 1.1px))}

.cbribbon{position:absolute;top:14px;left:14px;z-index:5;
  background:var(--brand);color:#fff;border-radius:10px;padding:7px 11px;text-align:center;
  font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.07em;line-height:1.1;
  box-shadow:0 8px 18px rgba(49,92,58,.3);transform:translateZ(48px);
  transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.cbcard:hover .cbribbon{transform:translateZ(64px)}
.cbribbon b{display:block;font-size:16px;letter-spacing:-.03em;margin-top:1px;white-space:nowrap}
.cbribbon .amount,.cbribbon bdi{font-weight:800}

/* --- copy --- */
.cbbody{display:flex;flex-direction:column;padding:22px 22px 20px 6px;
  transform:translateZ(10px)}
.cbbody h3{font-size:19.5px;letter-spacing:-.025em;line-height:1.2;margin-bottom:4px}
.cbcount{display:block;font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.04em;color:var(--brand);opacity:.75;margin-bottom:12px}
.cbchips{display:flex;flex-direction:column;gap:5px;list-style:none;margin:0 0 16px;padding:0}
.cbchips li{position:relative;font-family:var(--sans);font-size:12.5px;font-weight:500;
  padding-left:15px;opacity:.72}
.cbchips li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--brand);opacity:.5}

.cbfoot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:auto;
  padding-top:15px;border-top:1px solid var(--line)}
.cbnow{font-family:var(--sans);font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1}
.cbnow small{display:block;font-size:12px;font-weight:500;opacity:.45;
  text-decoration:line-through;margin-top:3px}
.cboff{font-family:var(--sans);font-size:11px;font-weight:800;color:var(--brand);
  background:var(--brand-tint);border-radius:999px;padding:5px 9px}
.cbadd{margin-left:auto;border:0;border-radius:999px;background:var(--brand);color:#fff;
  padding:11px 18px;font-family:var(--sans);font-size:13.5px;font-weight:700;white-space:nowrap;
  transform:translateZ(26px);
  transition:background .2s,box-shadow .25s,transform .55s cubic-bezier(.2,.8,.3,1)}
.cbcard:hover .cbadd{transform:translateZ(38px)}
.cbadd:hover{background:var(--brand-dk);box-shadow:0 10px 22px rgba(49,92,58,.34)}

@media (max-width:1180px){ .cbgrid{grid-template-columns:1fr} }
@media (max-width:560px){
  .cbcard{grid-template-columns:1fr}
  .cbshot{padding:24px 20px 4px}
  .cbshot img{max-height:150px}
  .cbbody{padding:14px 20px 20px}
  .cbadd{margin-left:0;width:100%}
}
/* no pointer to track, so drop the tilt rather than leave cards skewed */
@media (hover:none){
  .cbcard{transform:none}
  .cbcard::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cbcard,.cbshot img,.cbribbon,.cbadd{transition:none;transform:none}
}

/* --- bulk & gifting band --- */
.cbbulk{position:relative;overflow:hidden;color:var(--paper);
  padding-block:clamp(48px,6vw,86px);
  background:
    radial-gradient(70% 70% at 82% 40%,rgba(243,235,221,.24),transparent 62%),
    linear-gradient(180deg,#2A2018 0%,#1A130E 100%)}
.cbbulk::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(-38deg,rgba(255,255,255,.028) 0 2px,transparent 2px 26px)}
.cbbulk .wrap{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4vw,64px);align-items:center}
.cbbulk h2{font-size:clamp(27px,3.6vw,46px);letter-spacing:-.03em;margin-bottom:14px;max-width:16ch;
  color:var(--paper)}
.cbbulk h2 span{color:var(--accent)}
.cbbulk .lede{margin:0 0 26px;font-size:17.5px;line-height:1.6;opacity:.8;max-width:44ch}
.cbwho{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px}
.cbwho li{display:flex;gap:13px;align-items:flex-start;font-size:16px;opacity:.9}
.cbwho svg{color:var(--accent);flex:none;margin-top:3px}
.cbbtns{display:flex;gap:12px;flex-wrap:wrap}
.cbwa{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#252525;
  text-decoration:none;font-family:var(--sans);font-size:15.5px;font-weight:700;
  padding:15px 26px;border-radius:999px;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s}
.cbwa:hover{color:#2E2E2E;transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.34)}
.cbghost{display:inline-flex;align-items:center;gap:9px;color:var(--paper);text-decoration:none;
  font-family:var(--sans);font-size:15.5px;font-weight:600;padding:15px 24px;border-radius:999px;
  border:1.5px solid rgba(255,249,239,.32);transition:background .22s,border-color .22s}
.cbghost:hover{background:rgba(255,249,239,.12);border-color:rgba(255,249,239,.6);color:var(--paper)}

/* the tiered price card */
.cbtiers{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:22px;padding:clamp(22px,2.6vw,32px);backdrop-filter:blur(6px)}
.cbtiers h3{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;opacity:.55;margin-bottom:18px;color:var(--paper)}
.cbtier{display:flex;align-items:center;gap:16px;padding:15px 0;
  border-bottom:1px solid rgba(255,249,239,.13);transition:padding-left .3s}
.cbtier:last-child{border-bottom:0}
.cbtier:hover{padding-left:8px}
.cbtier b{font-family:var(--sans);font-size:17px;font-weight:700;min-width:96px}
.cbtier span{font-size:15px;opacity:.68;flex:1}
.cbtier em{font-style:normal;font-family:var(--sans);font-size:19px;font-weight:800;color:var(--accent)}

/* --- FAQ --- */
.cbfaq{background:var(--paper);padding-block:clamp(48px,6vw,88px)}
.cbfaq .cbhead{margin-bottom:clamp(22px,2.6vw,34px)}
.cbq{border-top:1px solid var(--line)}
.cbq:last-of-type{border-bottom:1px solid var(--line)}
.cbq button{width:100%;background:none;border:0;padding:22px 0;display:flex;align-items:center;gap:18px;
  text-align:left;font-family:var(--sans);font-size:17.5px;font-weight:600;color:var(--ink);
  transition:color .2s}
.cbq button:hover{color:var(--brand)}
.cbq .mk{margin-left:auto;width:34px;height:34px;border-radius:50%;flex:none;position:relative;
  background:rgba(49,92,58,.09);transition:background .25s,transform .35s cubic-bezier(.2,.8,.3,1)}
.cbq button:hover .mk{background:var(--brand)}
.cbq .mk::before,.cbq .mk::after{content:"";position:absolute;background:var(--brand);border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background .25s}
.cbq .mk::before{left:10px;right:10px;top:16px;height:2px}
.cbq .mk::after{top:10px;bottom:10px;left:16px;width:2px}
.cbq button:hover .mk::before,.cbq button:hover .mk::after{background:#fff}
.cbq button[aria-expanded="true"] .mk{background:var(--brand);transform:rotate(180deg)}
.cbq button[aria-expanded="true"] .mk::before{background:#fff}
.cbq button[aria-expanded="true"] .mk::after{transform:rotate(90deg) scaleX(0)}
.cbq .panel{overflow:hidden;height:0;transition:height .35s cubic-bezier(.2,.7,.3,1)}
.cbq .panel .inner{padding:0 0 24px;font-size:16.5px;line-height:1.7;opacity:.75;max-width:66ch}
.cbq .panel .inner p{margin:0}

@media (max-width:900px){ .cbbulk .wrap{grid-template-columns:1fr} }


/* ================= certifications and stockists ================= */
.badges{background:var(--paper);padding-block:clamp(46px,5.6vw,84px);position:relative;overflow:hidden}
.badges::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(-38deg,rgba(37,37,37,.02) 0 2px,transparent 2px 26px)}
.badges .wrap{position:relative;z-index:2}

.bd-lane{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,40px);align-items:center}
.bd-lane + .bd-lane{margin-top:clamp(26px,3.2vw,44px);padding-top:clamp(26px,3.2vw,44px);
  border-top:1px solid var(--line)}

.bd-label{max-width:15ch}
.bd-kick{display:block;font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brand);margin-bottom:7px}
.bd-label h2{font-size:clamp(21px,2.4vw,30px);letter-spacing:-.025em;line-height:1.1}

/* the scrolling lane */
.bd-track{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bd-run{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);width:max-content;
  animation:bdrun var(--dur,42s) linear infinite}
.bd-track.rev .bd-run{animation-direction:reverse}
.bd-track:hover .bd-run{animation-play-state:paused}
@keyframes bdrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.bd-item{flex:none;display:grid;place-items:center;background:#fff;border-radius:16px;
  width:clamp(130px,15vw,178px);height:clamp(88px,9.5vw,112px);padding:clamp(14px,1.6vw,20px);
  box-shadow:0 4px 16px rgba(37,37,37,.07);text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
.bd-item img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) opacity(.55);transition:filter .35s,transform .35s cubic-bezier(.2,.8,.3,1)}
.bd-item:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(37,37,37,.16)}
.bd-item:hover img{filter:none;transform:scale(1.06)}
.bd-item.seal{border-radius:50%;width:clamp(96px,10.5vw,124px);height:clamp(96px,10.5vw,124px)}

@media (max-width:820px){
  .bd-lane{grid-template-columns:1fr;gap:16px}
  .bd-label{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .bd-run{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .bd-item.is-clone{display:none}
  .bd-track{mask-image:none;-webkit-mask-image:none}
}

/* ---------- certifications: medallion row (1.0.141) ---------- */
.ct{background:#fff;padding-block:clamp(50px,6vw,88px);position:relative;overflow:hidden}
.ct::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:120%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(223,237,213,.7),transparent 70%)}
.ct .wrap{position:relative}
.ct-head{text-align:center;max-width:620px;margin:0 auto clamp(30px,4vw,50px)}
.ct-kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.ct-kick::before,.ct-kick::after{content:"";width:22px;height:1.5px;background:currentColor;opacity:.5}
.ct-head h2{margin:0 0 10px;font-size:clamp(26px,3vw,38px);letter-spacing:-.025em;line-height:1.08}
.ct-head p{margin:0;font-size:15px;line-height:1.6;opacity:.66}
.ct-row{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(14px,2vw,28px) clamp(10px,1.6vw,22px);
  list-style:none;margin:0;padding:0}
.ct-item{flex:0 1 222px;display:flex;flex-direction:column;align-items:center;text-align:center;margin:0;
}
.ct-medal{position:relative;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;
  background:var(--c,#315C3A);color:#fff;box-shadow:0 14px 28px -10px var(--c,#315C3A);
  transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s}
.ct-medal::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--c,#315C3A);opacity:.18;
  transition:inset .45s cubic-bezier(.2,.8,.3,1),opacity .45s}
.ct-medal svg{width:46px;height:46px}
.ct-medal img{width:78%;height:auto}
.ct-item.is-logo .ct-medal{background:#fff;box-shadow:0 14px 30px -12px rgba(37,37,37,.35),inset 0 0 0 1.5px rgba(37,37,37,.08)}
.ct-item.is-logo .ct-medal::before{border-color:#315C3A}
.ct-item:hover .ct-medal{transform:translateY(-6px) rotate(-4deg)}
.ct-item:hover .ct-medal::before{inset:-13px;opacity:.35}
.ct-name{font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.ct-what{font-size:12.5px;opacity:.6;margin-top:2px;line-height:1.4}
.ct-num{margin-top:10px;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--brand);
  background:var(--paper);border-radius:12px;padding:5px 12px;line-height:1.35;overflow-wrap:break-word;max-width:100%}
@media (max-width:640px){
  .ct-row{display:grid;grid-template-columns:1fr 1fr}
  .ct-medal{width:84px;height:84px}.ct-medal svg{width:38px;height:38px}
  .ct-num{font-size:10.5px;padding:4px 9px}
  .ct-item:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;max-width:60%}
}
@media (prefers-reduced-motion:reduce){.ct-medal,.ct-medal::before{transition:none}}

/* Text tiles stand in until real retailer logos are uploaded. */
.bd-item.text{font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);text-align:center;line-height:1.25;opacity:.72;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,color .3s,opacity .3s}
.bd-item.text:hover{color:var(--brand);opacity:1}

/* --- empty upload slots, shown to editors only --- */
.bd-lane.is-empty .bd-label h2,.bd-lane.is-empty .bd-kick{opacity:.55}
.bd-track.is-static{-webkit-mask-image:none;mask-image:none}
.bd-track.is-static .bd-run{animation:none;flex-wrap:wrap;width:auto}
.bd-item.bd-empty{background:rgba(37,37,37,.02);box-shadow:none;
  border:1.5px dashed rgba(37,37,37,.22);display:grid;place-items:center;gap:5px;
  font-family:var(--sans);font-size:12px;font-weight:600;color:rgba(37,37,37,.42);
  text-decoration:none;text-align:center;line-height:1.2}
.bd-item.bd-empty:hover{border-color:var(--brand);color:var(--brand);background:rgba(49,92,58,.04);
  transform:translateY(-4px);box-shadow:none}
.bd-plus{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:rgba(37,37,37,.07);font-size:17px;font-weight:700;line-height:1}
.bd-item.bd-empty:hover .bd-plus{background:var(--brand);color:#fff}
.bd-note{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:clamp(20px,2.4vw,32px) 0 0;
  padding-top:18px;border-top:1px dashed var(--line);
  font-family:var(--sans);font-size:13px;font-weight:500;color:rgba(37,37,37,.5)}
.bd-note svg{color:var(--brand);flex:none}
.bd-note a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- robustness fixes ---------- */

/* The ring depended on JS to set its radius. Without it every card collapsed to
   the centre and vanished behind the others. Sensible defaults mean it renders
   with or without script. */
.a2ring{--r:420px;--step:45deg}
@media (max-width:1100px){ .a2ring{--r:340px} }
@media (max-width:900px){ .a2ring{--r:270px} }

/* WooCommerce puts an empty wrapper at the top of the loop, which was taking
   the first cell of the product grid and pushing everything along one. */
/* :empty missed wrappers holding only whitespace, so one still took a cell.
   Anything in the loop that is not a product card is not a grid item. */
.shelfgrid ul.products > *:not(.product):not(.card),
.grid ul.products > *:not(.product):not(.card){display:none}
.shelfgrid .woocommerce-notices-wrapper,
.grid .woocommerce-notices-wrapper{display:none}

/* About page: when a photograph has not been uploaded, the text should take the
   full width rather than sitting beside an empty column. */
.a2row:not(.has-pic){grid-template-columns:1fr;max-width:66ch}
.a2row:not(.has-pic) .a2rpic{display:none}
.a2in:not(.has-pics){grid-template-columns:1fr}
.a2in:not(.has-pics) .a2pics{display:none}

/* Editor-only slot, matching the one on the homepage. */
.a2slot{display:grid;place-items:center;gap:8px;min-height:220px;border-radius:16px;
  border:1.5px dashed rgba(37,37,37,.22);background:rgba(37,37,37,.02);text-decoration:none;
  font-family:var(--sans);font-size:13px;font-weight:600;color:rgba(37,37,37,.45);text-align:center;
  transition:border-color .25s,color .25s,background .25s}
.a2slot:hover{border-color:var(--brand);color:var(--brand);background:rgba(49,92,58,.04)}
.a2slot .bd-plus{width:34px;height:34px;font-size:19px}
.a2hero .a2slot{min-height:300px}

.a2row:not(.has-pic):has(.a2slot){grid-template-columns:1fr 1fr;max-width:none}
.a2row:not(.has-pic):has(.a2slot) .a2rpic{display:none}
.a2in:not(.has-pics):has(.a2slot){grid-template-columns:1.05fr .95fr}
@supports not (selector(:has(*))){
  .a2row:not(.has-pic),.a2in:not(.has-pics){grid-template-columns:1fr}
}

/* Editor-only setup panel, shown when no combo products exist yet. */
.cbsetup{background:#fff;border:1.5px dashed rgba(37,37,37,.2);border-radius:20px;
  padding:clamp(26px,3.4vw,44px);max-width:820px}
.cbsetup h2{font-size:clamp(23px,2.8vw,32px);letter-spacing:-.025em;margin-bottom:10px}
.cbsetup > p{margin:0 0 20px;opacity:.68;font-size:16.5px}
.cbsetup code{background:rgba(49,92,58,.09);color:var(--brand);border-radius:6px;
  padding:2px 7px;font-size:.92em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cbsteps-list{margin:0 0 26px;padding-left:20px}
.cbsteps-list li{font-size:16px;line-height:1.6;opacity:.8;margin-bottom:10px}
.cbsetup-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0}

/* Example cards inside the setup block — a sketch of what will appear once
   there are products, so an empty page is not mistaken for a broken one. */
.cbghosts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 26px}
.cbghost-card{display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch;gap:12px;
  border:1.5px dashed rgba(37,37,37,.22);border-radius:14px;padding:12px}
.cbghost-shot{display:grid;place-items:center;min-height:84px;border-radius:10px;
  background:rgba(37,37,37,.05);font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;opacity:.4}
.cbghost-body{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}
.cbghost-body b{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.01em}
.cbghost-body i{font-style:normal;font-family:var(--sans);font-size:11.5px;
  font-weight:600;color:var(--brand);opacity:.75}
.cbghost-body em{font-style:normal;font-family:var(--sans);font-size:16px;font-weight:800;
  letter-spacing:-.02em;margin-top:2px}
.cbghost-body s{font-size:12px;font-weight:500;opacity:.42;margin-left:3px}
@media (max-width:900px){ .cbghosts{grid-template-columns:1fr} }
.cbghost.dark{color:var(--ink);border-color:var(--line);padding:14px 22px;font-size:15px}
.cbghost.dark:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ================= CONTACT PAGE ================= */

/* --- hero --- */
.cthero{position:relative;overflow:hidden;color:var(--paper);
  padding-block:clamp(38px,4.6vw,66px) clamp(40px,5vw,72px);
  background:
    radial-gradient(80% 70% at 82% 22%,rgba(243,235,221,.20),transparent 62%),
    radial-gradient(90% 80% at 8% 0%,rgba(255,255,255,.08),transparent 58%),
    linear-gradient(180deg,#2A5233 0%,#1B3A22 100%)}
.cthero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(-38deg,rgba(255,255,255,.03) 0 2px,transparent 2px 26px)}
.ctheroin{position:relative;z-index:3;max-width:1340px}
.ctkick{display:inline-flex;align-items:center;background:var(--accent);color:#252525;
  border-radius:999px;padding:8px 16px;font-family:var(--sans);font-size:12.5px;font-weight:800;
  letter-spacing:.03em;margin-bottom:18px}
.cthero h1{font-size:clamp(34px,5vw,66px);line-height:1.02;letter-spacing:-.038em;margin:0 0 16px;max-width:16ch}
.cthero h1 span{color:var(--accent)}
.ctlede{font-size:clamp(16.5px,1.6vw,19px);line-height:1.6;max-width:56ch;opacity:.86;margin:0}

/* --- main grid --- */
.ctmain{padding-block:clamp(40px,5vw,76px)}
.ctgrid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,3.4vw,54px);align-items:start}

/* --- channel cards --- */
.ctchannels{display:flex;flex-direction:column;gap:12px}
.ctcard{display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  transition:border-color .2s,transform .2s,box-shadow .2s}
a.ctcard:hover{border-color:var(--brand);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(37,37,37,.09)}
.ctcard.is-static{cursor:default}
.ctico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;
  background:var(--brand-tint);color:var(--brand)}
.ctcard.is-wa .ctico{background:#E4F3E7;color:#1E8A44}
.ctico.is-plain{width:auto;height:auto;background:none;color:var(--brand);border-radius:0;
  place-items:start;padding-top:2px}
.ctbody{display:block;min-width:0}
.ctbody b{display:block;font-family:var(--sans);font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.ctbody em{display:block;font-family:var(--sans);font-style:normal;font-size:17px;font-weight:600;
  color:var(--brand);margin-top:2px;word-break:break-word}
.ctbody i{display:block;font-style:normal;font-size:14.5px;line-height:1.5;opacity:.68;margin-top:5px}

.cthours{display:block;margin-top:7px}
.cthrow{display:flex;justify-content:space-between;gap:14px;font-family:var(--sans);font-size:14.5px;
  padding:5px 0;border-bottom:1px solid rgba(37,37,37,.08)}
.cthrow:last-child{border-bottom:0}
.cthrow span:first-child{font-weight:600}
.cthrow span:last-child{opacity:.7}

.ctempty{display:block;text-align:center;text-decoration:none;color:var(--brand);
  font-family:var(--sans);font-size:14.5px;font-weight:600;
  border:1.5px dashed rgba(49,92,58,.45);border-radius:14px;padding:20px}
.ctempty:hover{background:var(--brand-tint)}

/* --- form --- */
.ctformwrap{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,2.6vw,36px)}
.ctformwrap h2{font-size:clamp(23px,2.4vw,31px);letter-spacing:-.028em;margin:0 0 6px}
.ctformsub{font-size:15.5px;line-height:1.55;opacity:.72;margin:0 0 22px}
.ctnote{font-family:var(--sans);font-size:15px;line-height:1.55;border-radius:11px;
  padding:14px 17px;margin:0 0 20px}
.ctnote.is-good{background:#E4F3E7;color:#14612F;border:1px solid rgba(30,138,68,.28)}
.ctnote.is-bad{background:var(--brand-tint);color:var(--brand-dk);border:1px solid rgba(49,92,58,.28)}

.cthp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ctfield{margin-bottom:16px}
.ctpair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ctfield label{display:block;font-family:var(--sans);font-size:13.5px;font-weight:600;
  margin-bottom:6px;letter-spacing:.005em}
.ctfield label span{color:var(--brand)}
.ctfield label i{font-style:normal;font-weight:400;opacity:.55}
.ctfield input,.ctfield select,.ctfield textarea{width:100%;font-family:var(--sans);font-size:16px;
  color:var(--ink);background:#F7F6F2;border:1px solid rgba(37,37,37,.14);border-radius:10px;
  padding:12px 14px;transition:border-color .18s,background .18s}
.ctfield textarea{resize:vertical;min-height:120px;line-height:1.55}
.ctfield select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23191510' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.ctfield input:focus,.ctfield select:focus,.ctfield textarea:focus{outline:none;
  border-color:var(--brand);background:#fff}

.ctsend{display:inline-flex;align-items:center;justify-content:center;background:var(--brand);
  color:#fff;border:0;border-radius:999px;padding:14px 32px;font-family:var(--sans);
  font-size:15.5px;font-weight:700;transition:background .2s}
.ctsend:hover{background:var(--brand-dk)}
.ctsmall{font-size:13.5px;opacity:.6;margin:12px 0 0}

/* --- the mill --- */
.ctvisit{background:var(--paper-2);padding-block:clamp(40px,5vw,72px)}
.ctvin{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,3.4vw,54px);align-items:center}
.ctvisit h2{font-size:clamp(25px,2.9vw,40px);letter-spacing:-.032em;margin:0 0 18px}
.ctaddr{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.55;margin:0 0 16px}
.ctvnote{font-size:16px;line-height:1.65;opacity:.75;max-width:46ch;margin:0 0 20px}
.ctdir{display:inline-flex;align-items:center;text-decoration:none;color:var(--brand);
  font-family:var(--sans);font-size:15px;font-weight:700;border-bottom:2px solid transparent;
  padding-bottom:2px;transition:border-color .2s}
.ctdir:hover{border-bottom-color:var(--brand)}
.ctmap{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:#fff;aspect-ratio:16/10}
.ctmap iframe{display:block;width:100%;height:100%;border:0}
.ctmap.is-empty{display:grid;place-items:center;text-align:center;text-decoration:none;
  color:var(--brand);font-family:var(--sans);font-size:15px;font-weight:600;
  border:1.5px dashed rgba(49,92,58,.45);background:transparent}
.ctmap.is-empty:hover{background:var(--brand-tint)}

/* --- wholesale band --- */
.cttrade{background:linear-gradient(180deg,#2E2E2E 0%,#252525 100%);color:var(--paper);
  padding-block:clamp(34px,4vw,58px)}
.cttin{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px);align-items:center;
  justify-content:space-between}
.cttrade h2{font-size:clamp(24px,2.7vw,37px);letter-spacing:-.032em;margin:0 0 10px}
.cttrade h2 span{color:var(--accent)}
.cttrade p{font-size:16.5px;line-height:1.6;opacity:.78;max-width:52ch;margin:0}
.ctbtns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ctbtn{display:inline-flex;align-items:center;background:var(--accent);color:#252525;
  text-decoration:none;font-family:var(--sans);font-size:15.5px;font-weight:700;
  border-radius:999px;padding:14px 28px;transition:background .2s}
.ctbtn:hover{background:#FFFFFF}
.ctghost{display:inline-flex;align-items:center;color:var(--paper);text-decoration:none;
  font-family:var(--sans);font-size:15px;font-weight:600;border:1.5px solid rgba(234,231,219,.32);
  border-radius:999px;padding:13px 24px;transition:border-color .2s,background .2s}
.ctghost:hover{border-color:var(--paper);background:rgba(234,231,219,.08)}

/* --- registered details --- */
.ctlegal{padding-block:clamp(34px,4vw,58px)}
.ctlegal h2{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;opacity:.55;margin:0 0 18px}
.ctdl{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px 30px;margin:0}
.ctdl div{border-top:2px solid var(--line);padding-top:11px}
.ctdl dt{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;opacity:.55;margin:0 0 4px}
.ctdl dd{font-size:16px;line-height:1.5;margin:0}

/* --- contact page responsive --- */
@media (max-width:1000px){
  .ctgrid{grid-template-columns:1fr}
  .ctvin{grid-template-columns:1fr}
  .cttin{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .ctpair{grid-template-columns:1fr;gap:0}
  .ctcard{padding:15px 16px;gap:13px}
  .ctico{width:38px;height:38px}
  .ctbtn,.ctghost,.ctsend{width:100%;justify-content:center}
  .ctmap{aspect-ratio:4/3}
}

/* ================= ALL PRODUCTS PAGE ================= */

/* A proper page header, so this page opens the same way About, Combo and
   Contact do instead of a bare title on the page background. */
.aphero{position:relative;overflow:hidden;color:var(--paper);
  padding-block:clamp(36px,4.4vw,64px) clamp(38px,4.8vw,70px);
  background:
    radial-gradient(78% 68% at 84% 20%,rgba(243,235,221,.20),transparent 62%),
    radial-gradient(90% 80% at 6% 0%,rgba(255,255,255,.08),transparent 58%),
    linear-gradient(180deg,#2A5233 0%,#1B3A22 100%)}
.aphero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(-38deg,rgba(255,255,255,.03) 0 2px,transparent 2px 26px)}
.apheroin{position:relative;z-index:3}
.apkick{display:inline-flex;align-items:center;background:var(--accent);color:#252525;
  border-radius:999px;padding:8px 16px;font-family:var(--sans);font-size:12.5px;font-weight:800;
  letter-spacing:.03em;margin-bottom:16px}
.aphero h1{font-size:clamp(32px,4.8vw,62px);letter-spacing:-.035em;line-height:1.03}
.aplede{margin:14px 0 0;max-width:58ch;font-size:clamp(16px,1.5vw,18px);line-height:1.6;opacity:.84}
.aplede p{margin:0}

/* Category filters. They scroll sideways on a phone rather than wrapping into
   four ragged lines. */
.apfilters{position:sticky;top:86px;z-index:60;background:var(--paper);
  border-bottom:1px solid rgba(37,37,37,.10);box-shadow:0 6px 18px rgba(37,37,37,.05)}
.apfrow{display:flex;gap:9px;overflow-x:auto;padding-block:14px;
  scrollbar-width:none;-ms-overflow-style:none}
.apfrow::-webkit-scrollbar{display:none}
.apchip{flex:none;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-family:var(--sans);font-size:14px;font-weight:600;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s}
.apchip span{font-size:11.5px;font-weight:700;opacity:.45}
.apchip:hover{border-color:var(--brand);color:var(--brand)}
.apchip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.apchip.is-on span{opacity:.7}

.apsec{background:var(--paper);padding-block:clamp(26px,3.2vw,44px) clamp(52px,6.5vw,90px);
  scroll-margin-top:150px}
.apcount{font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;opacity:.45;margin:0 0 20px}
/* Its own grid. .shelfgrid cannot be reused here: it is display:block and
   expects a ul.products inside it to do the laying out. */
.apgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);
  perspective:1500px}

/* The pack lifts clear of its frame rather than the card tipping. On a shop
   page the product should be the thing that moves, not the box around it. */
.apgrid .card{position:relative;min-width:0;height:100%;transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.3,1),z-index 0s}
.apgrid .card:hover{z-index:5}

.apgrid .card .shot{position:relative;display:block;width:100%;aspect-ratio:1;
  overflow:visible;border-radius:14px;background:#fff;border:1px solid var(--line);
  transform-style:preserve-3d;
  transition:background .35s,border-color .35s,box-shadow .45s}
.apgrid .card:hover .shot{background:var(--brand-tint);border-color:transparent;
  box-shadow:0 22px 44px rgba(37,37,37,.14)}

/* the pool the pack stands in, so it does not look like it is floating loose */
.apgrid .card .shot::after{content:"";position:absolute;left:50%;bottom:12%;
  translate:-50% 0;width:56%;height:14px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(37,37,37,.34),transparent 70%);
  opacity:0;transition:opacity .45s,width .5s cubic-bezier(.2,.8,.3,1)}
.apgrid .card:hover .shot::after{opacity:1;width:68%}

.apgrid .card .shot img{position:relative;z-index:2;width:100%;height:100%;
  object-fit:contain;padding:14px;
  transition:transform .5s cubic-bezier(.2,.8,.3,1),filter .5s}
.apgrid .card:hover .shot img{
  transform:translateZ(70px) translateY(-16px) scale(1.06);
  filter:drop-shadow(0 20px 22px rgba(37,37,37,.28))}

.apgrid .card h3{font-size:16px;line-height:1.25;margin-top:12px;min-height:2.5em;
  transition:color .3s}
.apgrid .card:hover h3{color:var(--brand)}
.apgrid .card .desc{font-size:13.5px;margin-top:4px}
.apgrid .card .price{font-size:17px}
.apgrid .card .was{font-size:13.5px}
.apgrid .card .add{padding:9px;font-size:13.5px}

@media (hover:none){
  .apgrid .card .shot img{transform:none}
  .apgrid .card .shot::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .apgrid .card,.apgrid .card .shot,.apgrid .card .shot img{transition:none;transform:none}
}

.appages{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-top:clamp(30px,3.6vw,48px)}
.appages .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none;
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink);
  transition:background .2s,color .2s,border-color .2s}
.appages .page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.appages .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}
.appages .dots{border:0;background:none}

.apempty{background:#fff;border:1.5px dashed rgba(37,37,37,.2);border-radius:20px;
  padding:clamp(30px,4vw,52px);text-align:center}
.apempty h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.025em;margin-bottom:10px}
.apempty p{margin:0 auto;max-width:46ch;font-size:16.5px;opacity:.68}
.apbtns{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;
  margin-top:22px !important}

@media (max-width:1100px){ .apgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1040px){ .apfilters{top:74px} }
@media (max-width:760px){ .apgrid{grid-template-columns:repeat(2,1fr)} }

/* ================= WHY AN ORDER DID NOT GO THROUGH ================= */

.paywhy{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:12px;padding:clamp(20px,2.4vw,30px);margin-bottom:26px}
.paywhy h2{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;margin-bottom:10px}
.paywhy p{margin:0 0 12px;font-size:16px;line-height:1.6;opacity:.78}
.paywhy ul{margin:0 0 18px;padding-left:20px}
.paywhy li{font-size:15.5px;line-height:1.6;opacity:.72;margin-bottom:6px}

.cancelwhy{background:var(--brand-tint);border-radius:12px;
  padding:clamp(18px,2.2vw,26px);margin-bottom:26px}
.cancelwhy h2{font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.cancelwhy p{margin:0 0 14px;font-size:15px;opacity:.7}
.cancelwhy form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.cancelwhy select,.cancelwhy textarea{flex:1;min-width:200px;border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;font-family:var(--sans);font-size:15px;background:#fff}
.cancelwhy button{flex:none}

/* "Why choose this" list on the product page */
.pdpwhy{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.pdpwhy li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;line-height:1.5}
.pdpwhy svg{flex:none;margin-top:3px;color:var(--brand)}
.pdpwhy span{opacity:.82}

/* ---------- saving badge beside the price ---------- */
.pdpsave{display:inline-block;margin-left:10px;vertical-align:middle;
  background:var(--brand-tint);color:var(--brand-dk);border-radius:999px;
  padding:5px 11px;font-family:var(--sans);font-size:12.5px;font-weight:800;
  letter-spacing:.02em}

/* ---------- rating summary with a bar per star ---------- */
.pdprate{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3vw,46px);
  align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,2.4vw,30px);margin-top:clamp(36px,4vw,56px)}
.pdprate-score{text-align:center;min-width:130px}
.pdprate-score b{display:block;font-family:var(--sans);font-size:44px;font-weight:800;
  letter-spacing:-.04em;line-height:1}
.pdprate-stars{display:block;color:var(--star);font-size:17px;letter-spacing:2px;margin-top:6px}
.pdprate-count{display:block;font-family:var(--sans);font-size:13px;opacity:.55;margin-top:5px}

.pdprate-bars{display:flex;flex-direction:column;gap:7px;min-width:0}
.pdprate-row{display:grid;grid-template-columns:34px 1fr 40px;align-items:center;gap:10px;
  font-family:var(--sans);font-size:13px}
.pdprate-row span{opacity:.6;white-space:nowrap}
.pdprate-row i{display:block;height:8px;border-radius:999px;background:rgba(37,37,37,.09);
  overflow:hidden}
.pdprate-row i b{display:block;height:100%;background:var(--brand);border-radius:999px}
.pdprate-row em{font-style:normal;text-align:right;opacity:.5}

@media (max-width:620px){
  .pdprate{grid-template-columns:1fr;gap:20px}
  .pdprate-score{min-width:0}
}

/* ================= OFTEN BOUGHT TOGETHER =================
   The products in a row with plus signs between them, which reads as a set at
   a glance rather than a list to work through. */

.fbt{background:var(--paper);border-radius:18px;
  padding:clamp(22px,2.8vw,34px);margin-top:clamp(30px,3.6vw,50px)}
.fbt h2{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;margin:0 0 22px}

.fbt-row{display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(10px,1.6vw,22px);flex-wrap:wrap;margin-bottom:24px}

.fbt-plus{align-self:center;font-family:var(--sans);font-size:26px;font-weight:300;
  color:var(--brand);opacity:.55;line-height:1;padding-top:34px}

.fbt-item{position:relative;flex:1 1 190px;max-width:230px;display:flex;
  flex-direction:column;align-items:center;text-align:center;gap:8px;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:16px 14px 18px;transition:border-color .25s,box-shadow .3s,transform .3s}
.fbt-item:hover{border-color:var(--brand);transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(37,37,37,.1)}
.fbt-item:has(input:checked){border-color:var(--brand);background:var(--brand-tint)}
.fbt-item.is-this{cursor:default}
.fbt-item.is-this:hover{transform:none;box-shadow:none;border-color:var(--brand)}

/* the checkbox itself is hidden; the tick in the corner is the control */
.fbt-item input{position:absolute;opacity:0;width:0;height:0}
.fbt-tick{position:absolute;top:10px;left:10px;width:22px;height:22px;border-radius:6px;
  border:1.5px solid rgba(37,37,37,.25);background:#fff;transition:background .2s,border-color .2s}
.fbt-tick::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);
  transition:transform .2s}
.fbt-item:has(input:checked) .fbt-tick{background:var(--brand);border-color:var(--brand)}
.fbt-item:has(input:checked) .fbt-tick::after{transform:rotate(45deg) scale(1)}
.fbt-item:has(input:disabled) .fbt-tick{opacity:.45}

.fbt-pic{display:block;width:100%;aspect-ratio:1;max-width:120px;border-radius:10px;
  overflow:hidden;background:var(--paper)}
.fbt-pic img{width:100%;height:100%;object-fit:contain;display:block;padding:6px}
.fbt-name{font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.3}
.fbt-cost{font-family:var(--sans);font-size:14px;font-weight:600;opacity:.8}
.fbt-cost del{opacity:.45;font-weight:500;margin-right:4px}
.fbt-cost ins{text-decoration:none}
.fbt-this{font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand);background:#fff;border:1px solid var(--brand);
  border-radius:999px;padding:3px 9px;margin-top:2px}

.fbt-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;
  padding-top:20px;border-top:1px solid rgba(37,37,37,.12)}
.fbt-sum{text-align:center}
.fbt-sum span{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;opacity:.5}
.fbt-sum b{display:block;font-family:var(--sans);font-size:28px;font-weight:800;
  letter-spacing:-.03em;margin-top:3px}
.fbt-sum em{display:block;font-style:normal;font-family:var(--sans);font-size:13.5px;
  font-weight:700;color:var(--brand);margin-top:3px}
.fbt-add{border:0;border-radius:999px;background:var(--brand);color:#fff;
  padding:15px 30px;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;
  transition:background .2s,box-shadow .25s}
.fbt-add:hover{background:var(--brand-dk);box-shadow:0 12px 26px rgba(49,92,58,.32)}
.fbt-add[disabled]{opacity:.5;cursor:default;box-shadow:none}

@media (max-width:640px){
  .fbt-row{flex-direction:column;align-items:stretch}
  .fbt-item{max-width:none;flex-direction:row;text-align:left;align-items:center;
    padding-left:44px}
  .fbt-tick{top:50%;translate:0 -50%}
  .fbt-pic{width:64px;flex:none}
  .fbt-plus{padding:0;text-align:center}
  .fbt-foot{flex-direction:column;align-items:stretch}
  .fbt-add{width:100%}
}

/* ================= PRODUCT PAGE: white, and more air =================
   The rest of the site is warm beige, which suits a heritage brand. A product
   page is a decision screen: a pack shot photographed on white sits in a
   visible grey box against beige, and the price has to fight the background.
   White here, beige everywhere else. */

body.single-product{background:#fff}
body.single-product .woo{background:#fff}
.pdp{padding-block:clamp(26px,3.4vw,46px) clamp(60px,7vw,96px)}

/* more room for the photograph, which is what people are actually looking at */
/* fr units share whatever is left after the content, so a gallery with a wide
   image was squeezing the summary to a couple of hundred pixels. A minimum on
   the second column stops that: the buy controls need room to sit side by side. */
.pdp-grid{grid-template-columns:minmax(0,1.05fr) minmax(360px,0.95fr);
  gap:clamp(28px,4vw,72px)}
.pdp .summary{min-width:0}
@media (max-width:900px){
  .pdp-grid{grid-template-columns:1fr}
  .pdp .summary{min-width:auto}
}
.gal-main,.woocommerce-product-gallery__wrapper{background:#fff;
  border:1px solid rgba(37,37,37,.07);border-radius:16px}

/* a clearer ladder: big name, quiet sub-line, price that carries weight */
.pdp h1{font-size:clamp(30px,3.9vw,46px);line-height:1.06;margin-bottom:8px}
.pdp .latin{font-size:17px;margin-bottom:16px}
.pdp .priceline,.pdp .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;
  margin:20px 0 6px}
/* the story sits between the rating and the price now, so it needs a top
   margin it never had when it followed the price. Matches .pdpstory. */
.pdp .summary .woocommerce-product-details__short-description{margin:14px 0 18px}
.pdp .price .amount,.pdp .now{font-family:var(--sans);font-size:clamp(28px,3vw,36px);
  font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.pdp .price del{opacity:.4}
.pdp .price del .amount{font-size:18px;font-weight:500}
.pdp .price ins{text-decoration:none}

/* the panels stop being cards on beige and become quiet rules on white */
.pdp .pdp-trust{background:none;border:1px solid rgba(37,37,37,.1);border-radius:14px;
  padding:16px 10px;gap:10px}
.pdp .pdp-trust > *{min-width:0}
@media (max-width:520px){ .pdp .pdp-trust{grid-template-columns:1fr;text-align:left} }
.pdp .facts span{background:rgba(49,92,58,.07);border:0}
.pdp .acc{border-top:1px solid rgba(37,37,37,.1)}
.pdp .acc > div{border-bottom:1px solid rgba(37,37,37,.1)}

/* the surrounding sections keep the warmth, so the page still feels Mayoora */
body.single-product .inside,
body.single-product .fbt,
body.single-product .pdprate,
body.single-product .related,
body.single-product .up-sells{background:var(--paper);border-radius:20px;
  padding:clamp(22px,2.8vw,36px);border:0;margin-top:clamp(30px,3.6vw,50px)}
body.single-product .related,body.single-product .up-sells{border-top:0}

/* ================= REVIEWS ON THE PRODUCT PAGE ================= */

.pdpreviews{background:#fff;border:1px solid rgba(37,37,37,.12);border-radius:4px;
  padding:clamp(24px,3vw,40px);margin-top:clamp(30px,3.6vw,48px)}
.pdpreviews > h2{font-family:var(--sans);font-size:clamp(26px,3.2vw,38px);font-weight:600;
  letter-spacing:-.02em;color:var(--brand);margin:0 0 22px}

/* --- the summary strip: average, bars, and the button --- */
.rvsum{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,44px);
  align-items:start;padding-bottom:20px;border-bottom:1px solid rgba(37,37,37,.1)}
.rvsum-avg{min-width:150px}
.rvstars{color:var(--star);letter-spacing:1px;white-space:nowrap}
.rvsum-avg .rvstars{font-size:21px}
.rvsum-based{display:block;font-family:var(--sans);font-size:14px;opacity:.7;margin-top:6px}

.rvsum-bars{display:flex;flex-direction:column;gap:5px;min-width:0;
  border-left:1px solid rgba(37,37,37,.1);border-right:1px solid rgba(37,37,37,.1);
  padding-inline:clamp(16px,2.4vw,32px)}
.rvbar{display:grid;grid-template-columns:auto minmax(90px,1fr) 40px 44px;
  gap:10px;align-items:center;font-family:var(--sans);font-size:13px}
.rvbar .rvstars{font-size:13px}
.rvbar i{display:block;height:14px;background:#fff;border:1px solid rgba(37,37,37,.18)}
.rvbar i b{display:block;height:100%;background:var(--star)}
.rvbar em{font-style:normal;text-align:right;opacity:.75}
.rvbar u{text-decoration:none;text-align:right;opacity:.55}

.rvwrite{align-self:start;border:1px solid rgba(37,37,37,.35);background:#fff;
  border-radius:3px;padding:11px 20px;font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--ink);cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s}
.rvwrite:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* --- the list --- */
.pdpreviews .commentlist{list-style:none;margin:0;padding:0}
.pdpreviews .commentlist li{padding:22px 0;border-bottom:1px solid rgba(37,37,37,.1)}
.pdpreviews .comment_container{display:block}
.pdpreviews .comment_container img,
.pdpreviews .cavatar{float:left;width:44px;height:44px;border-radius:50%;
  margin-right:14px;background:rgba(37,37,37,.08);color:var(--ink);
  display:grid;place-items:center;font-family:var(--sans);font-weight:600;font-size:17px}
.pdpreviews .comment-text{overflow:hidden}
.pdpreviews .star-rating{color:var(--star);font-size:15px;letter-spacing:1px;
  display:inline-block;margin:0 10px 0 0;vertical-align:middle}
.pdpreviews .woocommerce-review__published-date{font-family:var(--sans);font-size:14px;
  opacity:.7;vertical-align:middle}
.pdpreviews .woocommerce-review__author{font-family:var(--sans);font-weight:700;font-size:15px;
  display:inline-block;margin-top:5px}
.pdpreviews .verified{display:inline-block;margin-right:8px;background:var(--ink);color:#fff;
  border-radius:2px;padding:2px 7px;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.02em;vertical-align:middle}
.pdpreviews .rvtitle{display:block;font-family:var(--sans);font-weight:700;font-size:15px;
  margin-top:8px}
.pdpreviews .description p{margin:6px 0 0;font-size:15.5px;line-height:1.55;opacity:.85}

/* --- the form, hidden until Write a review is pressed --- */
.pdpreviews #review_form_wrapper{margin-top:26px;background:var(--paper);border-radius:12px;
  padding:clamp(20px,2.4vw,30px)}
.pdpreviews #review_form_wrapper[hidden]{display:none}
.pdpreviews .comment-reply-title{display:block;font-family:var(--sans);font-size:17px;
  font-weight:700;margin-bottom:6px}
.pdpreviews .comment-notes,.pdpreviews .comment-form-cookies-consent label{font-size:14.5px;opacity:.7}
.pdpreviews .comment-form-rating label{display:block;font-family:var(--sans);font-size:14px;
  font-weight:600;margin:14px 0 6px}
.pdpreviews .stars a{color:var(--star)}
.pdpreviews .comment-form p{margin:0 0 14px}
.pdpreviews .comment-form label{display:block;font-family:var(--sans);font-size:14px;
  font-weight:600;margin-bottom:6px}
.pdpreviews .comment-form input[type="text"],
.pdpreviews .comment-form input[type="email"],
.pdpreviews .comment-form textarea{width:100%;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;font-family:var(--sans);font-size:15.5px}
.pdpreviews .comment-form textarea{min-height:120px;resize:vertical}
.pdpreviews .comment-form input:focus,.pdpreviews .comment-form textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(49,92,58,.12)}
.pdpreviews .comment-form .submit{border:0;border-radius:999px;background:var(--brand);
  color:#fff;padding:13px 28px;font-family:var(--sans);font-size:14.5px;font-weight:700;
  cursor:pointer;transition:background .2s,box-shadow .25s}
.pdpreviews .comment-form .submit:hover{background:var(--brand-dk);
  box-shadow:0 10px 22px rgba(49,92,58,.3)}
.pdpreviews .woocommerce-verification-required{font-size:15px;opacity:.72}

@media (max-width:860px){
  .rvsum{grid-template-columns:1fr;gap:18px}
  .rvsum-bars{border:0;padding-inline:0}
  .rvwrite{justify-self:start}
}

/* ---- PIN code lookup ---- */
.pinnote{display:block;margin:-6px 0 12px;font-family:var(--sans);font-size:13.5px;
  color:var(--brand);opacity:.9}
.pinnote[data-kind="warn"]{color:var(--red)}
.pinsuggest{margin:0 0 14px;background:#fff;border:1px solid rgba(37,37,37,.16);
  border-radius:10px;padding:10px;box-shadow:0 10px 26px rgba(37,37,37,.1)}
.pinsuggest > span{display:block;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;opacity:.45;padding:2px 6px 8px}
.pinsuggest{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.pinsuggest > span{grid-column:1/-1}
.pinsuggest button{display:block;width:100%;text-align:left;border:0;background:none;
  border-radius:7px;padding:9px 10px;font-family:var(--sans);font-size:14.5px;color:var(--ink);
  cursor:pointer;transition:background .15s}
.pinsuggest button:hover{background:var(--brand-tint);color:var(--brand-dk)}

/* ---- Google Places suggestions ---- */
.gplaces{display:block;margin:-6px 0 12px;font-family:var(--sans);font-size:12px;opacity:.45}
.pac-container{border:1px solid rgba(37,37,37,.16);border-radius:10px;
  box-shadow:0 14px 34px rgba(37,37,37,.14);margin-top:5px;font-family:var(--sans);
  background:#fff;z-index:200}
.pac-item{padding:11px 14px;border-top:1px solid rgba(37,37,37,.07);font-size:14px;
  color:rgba(37,37,37,.7);cursor:pointer;line-height:1.4}
.pac-item:first-child{border-top:0}
.pac-item:hover,.pac-item-selected{background:var(--brand-tint)}
.pac-item-query{font-size:14.5px;font-weight:700;color:var(--ink)}
.pac-matched{font-weight:800}
.pac-icon{display:none}
.pac-logo::after{margin:6px 14px 10px;opacity:.6}

/* ---- product page: breadcrumb, title, price ladder, buy buttons ---- */

.pdpcrumb{padding-block:clamp(14px,1.8vw,24px) 0}
.pdpcrumb .crumb{font-family:var(--sans);font-size:14px;opacity:.7}
.pdpcrumb .crumb a{color:var(--brand);text-decoration:none}
.pdpcrumb .crumb a:hover{text-decoration:underline}

/* the name in brand green, which is what makes the page read as a shop
   rather than a document */
.pdp .product_title{color:var(--brand);font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}

.pdptax{margin:4px 0 0;font-family:var(--sans);font-size:14px;opacity:.6}

/* quantity and Add to cart on one line, Buy it now filled underneath */
.pdp form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin:22px 0 0}
.pdp form.cart .quantity{flex:none;display:flex;align-items:center;
  border:1px solid rgba(37,37,37,.25);border-radius:10px;overflow:hidden;background:#fff}
.pdp form.cart .quantity input[type="number"]{width:64px;height:100%;border:0;text-align:center;
  background:none;font-family:var(--sans);font-size:16px;font-weight:600;padding:14px 0}
.pdp form.cart .quantity input::-webkit-outer-spin-button,
.pdp form.cart .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp form.cart .quantity input[type="number"]{-moz-appearance:textfield}

.pdp form.cart button.single_add_to_cart_button{flex:1;min-width:180px;
  background:#fff;border:1.5px solid var(--brand);color:var(--brand);border-radius:10px;
  padding:15px 22px;font-family:var(--sans);font-size:15.5px;font-weight:700;cursor:pointer;
  transition:background .2s,color .2s,box-shadow .25s}
.pdp form.cart button.single_add_to_cart_button:hover{background:var(--brand-tint)}

.pdpbuy{flex:0 0 100%;background:var(--brand);border:1.5px solid var(--brand);color:#fff;
  border-radius:10px;padding:16px 22px;font-family:var(--sans);font-size:16px;font-weight:700;
  cursor:pointer;transition:background .2s,box-shadow .25s}
.pdpbuy:hover{background:var(--brand-dk);box-shadow:0 12px 26px rgba(49,92,58,.3)}

@media (max-width:520px){
  .pdp form.cart .quantity,.pdp form.cart button.single_add_to_cart_button{flex:1 0 100%}
}

/* ---- gallery: zoom trigger, arrows ---- */

.woocommerce-product-gallery{position:relative}

/* WooCommerce prints a magnifier link for the lightbox but leaves it unstyled,
   so it was invisible. */
.woocommerce-product-gallery__trigger{position:absolute;top:14px;right:14px;z-index:6;
  width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid rgba(37,37,37,.12);
  display:grid;place-items:center;text-indent:-9999px;overflow:hidden;
  box-shadow:0 6px 18px rgba(37,37,37,.12);cursor:zoom-in;
  transition:transform .25s,box-shadow .25s}
.woocommerce-product-gallery__trigger::after{content:"";position:absolute;
  width:15px;height:15px;border:2px solid var(--ink);border-radius:50%;
  top:12px;left:12px}
.woocommerce-product-gallery__trigger::before{content:"";position:absolute;
  width:2px;height:8px;background:var(--ink);border-radius:2px;
  transform:rotate(-45deg);bottom:10px;right:13px}
.woocommerce-product-gallery__trigger:hover{transform:scale(1.06);
  box-shadow:0 10px 24px rgba(37,37,37,.18)}

/* previous and next, over the photograph */
.galarrow{position:absolute;top:50%;translate:0 -50%;z-index:5;
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);
  border:1px solid rgba(37,37,37,.12);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 18px rgba(37,37,37,.12);color:var(--ink);
  transition:background .2s,transform .25s,opacity .2s}
.galarrow:hover{background:#fff;transform:translateY(-1px) scale(1.05)}
.galarrow[disabled]{opacity:.35;cursor:default;transform:none}
.galarrow.prev{left:12px}
.galarrow.next{right:12px}

@media (max-width:600px){
  .galarrow{width:38px;height:38px}
  .galarrow.prev{left:6px}
  .galarrow.next{right:6px}
}

/* ---- the rating line under the product name ----
   WooCommerce prints "Rated 5.00 out of 5 based on 1 customer rating" as plain
   text beside the stars, which wraps into three lines in a narrow column and
   repeats what the stars already say. The words are kept for screen readers and
   hidden from view; the link is shortened. */
.summary .woocommerce-product-rating{display:flex;align-items:center;gap:10px;
  flex-wrap:nowrap;margin:0 0 16px;font-family:var(--sans);font-size:14px}
.summary .woocommerce-product-rating .star-rating{flex:none;color:var(--star);
  font-size:15px;letter-spacing:1px;margin:0}
.summary .woocommerce-product-rating .star-rating span::before{color:var(--star)}
/* the sentence itself, out of sight but still read aloud */
.summary .woocommerce-product-rating .star-rating > span:not(.woocommerce-review-link),
.summary .woocommerce-product-rating > .rating,
.summary .woocommerce-product-rating .woocommerce-review-link + *{position:absolute;
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap}
.summary .woocommerce-product-rating .woocommerce-review-link{flex:none;color:var(--ink);
  opacity:.6;text-decoration:none;border-bottom:1px solid rgba(37,37,37,.28);
  white-space:nowrap;padding-bottom:1px}
.summary .woocommerce-product-rating .woocommerce-review-link:hover{opacity:1;
  color:var(--brand);border-bottom-color:var(--brand)}

/* ---- admin-only "what is missing" panel on the product page ---- */
.pdptodo{background:#FFF8E6;border:1.5px dashed rgba(198,139,44,.55);border-radius:14px;
  padding:clamp(20px,2.4vw,28px);margin-top:clamp(28px,3.4vw,44px)}
.pdptodo h2{font-size:19px;letter-spacing:-.02em;margin:0 0 4px}
.pdptodo-note{margin:0 0 16px;font-family:var(--sans);font-size:13.5px;opacity:.6}
.pdptodo ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.pdptodo li{display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:baseline;
  padding-top:10px;border-top:1px solid rgba(37,37,37,.1)}
.pdptodo li:first-child{border-top:0;padding-top:0}
.pdptodo li b{font-family:var(--sans);font-size:14.5px}
.pdptodo li span{font-size:14.5px;line-height:1.55;opacity:.75}
.pdptodo-btn{display:inline-block;background:var(--brand);color:#fff !important;
  text-decoration:none !important;border-radius:999px;padding:11px 22px;
  font-family:var(--sans);font-size:14px;font-weight:700}
.pdptodo-btn:hover{background:var(--brand-dk)}
@media (max-width:640px){ .pdptodo li{grid-template-columns:1fr;gap:2px} }

/* ---- admin-only placeholders where a section will go ---- */
.mslot{display:block;border:1.5px dashed rgba(198,139,44,.6);border-radius:10px;
  background:rgba(255,248,230,.7);padding:11px 14px;margin:12px 0}
.mslot b{display:block;font-family:var(--sans);font-size:13.5px;font-weight:700;
  color:#8A5E12;letter-spacing:.01em}
.mslot span{display:block;margin-top:3px;font-family:var(--sans);font-size:12.5px;
  line-height:1.5;color:rgba(37,37,37,.62)}

/* ---- product description, open rather than an accordion ----
   Under the buy area, full width, everything visible. A shopper reading this
   far has already decided they are interested; making them click five times to
   read the detail loses more than it saves. */

.pdesc{margin-top:clamp(34px,4vw,56px)}
.pdesc-tab{position:relative;text-align:center;font-family:var(--sans);
  font-size:clamp(19px,2.2vw,24px);font-weight:600;color:var(--brand);
  letter-spacing:-.01em;padding-bottom:14px;margin:0 0 clamp(24px,3vw,38px)}
/* a full hairline with the heading sitting on it, as on a tab strip */
.pdesc-tab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(37,37,37,.14)}
.pdesc-tab::after{content:"";position:absolute;left:50%;translate:-50% 0;bottom:0;
  width:clamp(140px,18vw,220px);height:2px;background:var(--brand)}

.pdesc-body{max-width:920px;margin-inline:auto;display:grid;
  gap:clamp(24px,3vw,38px)}
.pdesc-block h3{display:flex;align-items:center;gap:11px;
  font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:-.01em;
  margin:0 0 10px}
.pdesc-n{flex:none;display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--brand);color:#fff;
  font-size:13px;font-weight:800;line-height:1}
.pdesc-text{font-size:16px;line-height:1.7;opacity:.82}
.pdesc-text p{margin:0 0 12px}
.pdesc-text p:last-child{margin-bottom:0}
.pdesc-text ul{margin:0 0 12px;padding-left:20px}
.pdesc-text li{margin-bottom:7px}
.pdesc-text table{width:100%;border-collapse:collapse;margin:0}
.pdesc-text th,.pdesc-text td{text-align:left;padding:9px 0;
  border-bottom:1px solid rgba(37,37,37,.1);font-size:15.5px}
.pdesc-text th{font-family:var(--sans);font-weight:600;opacity:.7}
.pdesc-text td{font-family:var(--sans);font-weight:700;text-align:right}

@media (max-width:600px){
  .pdesc-block h3{font-size:16px}
  .pdesc-text{font-size:15.5px}
}

/* WooCommerce prints its own "Reviews" heading inside the comments template,
   directly under ours. One is enough. */
.pdpreviews #reviews > h2:not(:first-child),
.pdpreviews .woocommerce-Reviews-title{display:none}

/* An empty Related products box is worse than none: it reads as broken. */
.related:not(:has(ul.products)),
.up-sells:not(:has(ul.products)){display:none}
.related ul.products:empty,
.up-sells ul.products:empty{display:none}

/* ---------- empty video band ---------- */
/* Placeholder frames shown while no film has a URL, so the band holds its space
   during the build instead of disappearing. */
.player.is-empty{background:rgba(37,37,37,.07);border:1px dashed rgba(37,37,37,.18)}
.plrow.is-empty{display:grid;grid-template-columns:104px 1fr;gap:13px;align-items:center;
  width:100%;padding:9px 4px;border-bottom:1px solid rgba(37,37,37,.08);opacity:.55}
.plrow.is-empty .plthumb{display:block;aspect-ratio:16/9;border-radius:5px;
  background:rgba(37,37,37,.07);border:1px dashed rgba(37,37,37,.18)}
.plrow.is-empty .plmeta b{display:block;height:11px;width:62%;border-radius:3px;
  background:rgba(37,37,37,.1)}
.plrow.is-empty .plmeta span{display:block;height:9px;width:40%;margin-top:7px;border-radius:3px;
  background:rgba(37,37,37,.07)}
.reel.is-empty{background:rgba(37,37,37,.07);border:1px dashed rgba(37,37,37,.18)}

/* ---------- shelf grid, last word ---------- */
/* This has been fixed three times and come back three times, so the rule sits
   at the end of the file and is marked important. Nothing earlier can turn the
   shelf back into a stack. The panel class has been taken off the markup as
   well, so no shop, account or FAQ styling can reach it either. */
.shelf [data-shelf][role="tabpanel"]{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:18px;
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
  height:auto;
  overflow:visible}
.shelf [data-shelf][role="tabpanel"][hidden]{display:none !important}
.shelf [data-shelf][role="tabpanel"] > .card{min-width:0;width:auto;margin:0}

@media (max-width:1200px){
  .shelf [data-shelf][role="tabpanel"]{grid-template-columns:repeat(4,minmax(0,1fr)) !important} }
@media (max-width:900px){
  .shelf [data-shelf][role="tabpanel"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important} }
@media (max-width:680px){
  .shelf [data-shelf][role="tabpanel"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px} }

/* ---------- WhatsApp ---------- */
/* A round icon button. It only grows into a pill if you fill in a label under
   Mayoora, Homepage, Footer and shop details — blank by default. */
.wafloat{position:fixed;right:20px;bottom:20px;z-index:130;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;width:56px;height:56px;padding:0;border-radius:999px;
  background:#25D366;color:#fff;text-decoration:none;
  font-family:var(--sans);font-size:14.5px;font-weight:600;
  box-shadow:0 6px 22px rgba(37,37,37,.22);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.wafloat:hover{color:#fff;transform:translateY(-3px) scale(1.04);
  box-shadow:0 10px 28px rgba(37,37,37,.3)}
.wafloat:active{transform:translateY(-1px) scale(.98)}
.wafloat-icon{display:grid;place-items:center;line-height:0}
.wafloat-icon svg{width:28px;height:28px}

/* With a label the button becomes a pill instead. */
.wafloat.has-label,.wafloat.is-unset{width:auto;height:auto;padding:13px 20px 13px 15px}
.wafloat-text{white-space:nowrap}

/* A soft pulse the first time it settles, so the eye finds it once. */
@keyframes wapulse{
  0%{box-shadow:0 6px 22px rgba(37,37,37,.22),0 0 0 0 rgba(37,211,102,.45)}
  70%{box-shadow:0 6px 22px rgba(37,37,37,.22),0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 6px 22px rgba(37,37,37,.22),0 0 0 0 rgba(37,211,102,0)} }
.wafloat{animation:wapulse 2.6s ease-out 1.2s 3}
.wafloat:hover{animation:none}

/* The sticky buy bar owns the bottom of a product page, so step above it. */
body.single-product .wafloat{bottom:86px}
@media (max-width:680px){
  .wafloat{right:14px;bottom:14px;width:52px;height:52px}
  .wafloat.has-label{width:52px;height:52px;padding:0}
  .wafloat-text{display:none}
  body.single-product .wafloat{bottom:82px} }
@media (prefers-reduced-motion:reduce){
  .wafloat,.wafloat:hover{transition:none;transform:none;animation:none} }

/* "Ask about this product", under the cart row */
.waask{display:inline-flex;align-items:center;gap:7px;margin:2px 0 16px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--brand);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.waask:hover{color:var(--brand-dk)}
.waask svg{flex:none;opacity:.8}

.wathanks{margin:18px 0 0;font-family:var(--sans);font-size:15px}
.wathanks a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* Admin-only prompt shown where the button would be, until a number is set. */
.wafloat.is-unset{background:var(--ink);opacity:.85}
.wafloat.is-unset:hover{opacity:1}

/* ---------- claim an offer ---------- */
/* A tab pinned to the left edge, turned on its side. Left, because the right is
   already the WhatsApp button and the sticky buy bar. */
.offertab{position:fixed;left:0;top:50%;transform:translateY(-50%) translateX(-3px);
  z-index:128;border:0;padding:0;background:var(--brand);color:#fff;cursor:pointer;
  border-radius:0 10px 10px 0;box-shadow:0 4px 18px rgba(37,37,37,.22);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .2s}
.offertab:hover{transform:translateY(-50%) translateX(0);background:var(--brand-dk)}
.offertab-in{display:flex;align-items:center;gap:8px;padding:16px 11px;
  writing-mode:vertical-rl;rotate:180deg;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.01em}
.offertab svg{rotate:90deg}

@media (max-width:680px){
  .offertab-in{padding:13px 9px;font-size:13px} }

/* panel */
.offerwrap{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px}
.offerwrap[hidden]{display:none}
.offerback{position:absolute;inset:0;background:rgba(20,16,12,.5)}
.offerbox{position:relative;width:min(430px,100%);max-height:88vh;overflow:auto;
  background:#fff;border-radius:14px;padding:clamp(24px,3vw,32px);
  box-shadow:0 24px 60px rgba(20,16,12,.3)}
.offerx{position:absolute;top:10px;right:14px;background:none;border:0;
  font-size:26px;line-height:1;color:var(--ink);opacity:.5;cursor:pointer}
.offerx:hover{opacity:1}
.offerbox h2{font-size:clamp(21px,2.4vw,25px);letter-spacing:-.02em;margin:0 0 8px;padding-right:24px}
.offernote{margin:0 0 18px;font-size:15px;line-height:1.6;opacity:.72}
.offernote.is-bad{color:var(--red);opacity:1;font-weight:600}

.offerf{display:block;margin-bottom:13px}
.offerf > span{display:block;margin-bottom:5px;font-family:var(--sans);
  font-size:13.5px;font-weight:600}
.offerf input,.offerf select,.offerf textarea{width:100%;font-family:var(--sans);font-size:15px;
  color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:9px;
  padding:11px 13px;transition:border-color .2s,box-shadow .2s}
.offerf input:focus,.offerf select:focus,.offerf textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(49,92,58,.12)}
.offerf textarea{resize:vertical;min-height:62px}

.offerok{display:flex;gap:9px;align-items:flex-start;margin:4px 0 16px;
  font-size:13.5px;line-height:1.5;opacity:.8}
.offerok input{margin-top:3px;flex:none}

.offersend{width:100%;border:0;border-radius:999px;background:var(--brand);color:#fff;
  padding:14px;font-family:var(--sans);font-size:15.5px;font-weight:600;cursor:pointer;
  transition:background .2s,transform .2s}
.offersend:hover{background:var(--brand-dk);transform:translateY(-2px)}
.offersmall{margin:11px 0 0;font-size:12.5px;text-align:center;opacity:.55}

/* honeypot, hidden from people but not from bots */
.offerhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .offertab,.offertab:hover,.offersend:hover{transition:none;transform:translateY(-50%)} }

/* ---------- rewards panel ---------- */
/* Bottom left. The right belongs to WhatsApp and the sticky buy bar, the left
   edge midway belongs to the offer tab. */
.ptstab{position:fixed;left:18px;bottom:18px;z-index:128;display:inline-flex;align-items:center;
  gap:9px;padding:12px 20px 12px 16px;border:0;border-radius:999px;cursor:pointer;
  background:var(--brand);color:#fff;font-family:var(--sans);font-size:14.5px;font-weight:600;
  box-shadow:0 6px 22px rgba(37,37,37,.22);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .2s}
.ptstab:hover{background:var(--brand-dk);transform:translateY(-3px)}
.ptstab svg{flex:none}

.ptswrap{position:fixed;inset:0;z-index:401;display:grid;place-items:end start;padding:20px}
.ptswrap[hidden]{display:none}
.ptsback{position:absolute;inset:0;background:rgba(20,16,12,.5)}
.ptsbox{position:relative;width:min(370px,100%);max-height:86vh;display:flex;flex-direction:column;
  background:var(--paper);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(20,16,12,.32)}

.ptshead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--brand);color:#fff;padding:16px 18px}
.ptshead h2{margin:0;font-family:var(--sans);font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.ptsx{background:none;border:0;color:#fff;font-size:24px;line-height:1;opacity:.8;cursor:pointer}
.ptsx:hover{opacity:1}

.ptsbody{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.ptscard{background:#fff;border-radius:12px;padding:20px 18px;
  box-shadow:0 2px 10px rgba(37,37,37,.06)}
.ptscard.is-warn{background:#FFF6E6;box-shadow:none;font-size:13.5px;line-height:1.55}
.ptscard.is-warn p{margin:0 0 8px}
.ptscard.is-warn a{color:var(--brand);font-weight:600}
.ptscard h3{margin:0 0 6px;text-align:center;font-size:19px;letter-spacing:-.015em}
.ptscard h4{margin:18px 0 2px;font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;opacity:.5}
.ptssub{margin:0 0 12px;text-align:center;font-size:14.5px;line-height:1.55;opacity:.7}

.ptsbal{margin:8px 0 4px;text-align:center;line-height:1.1}
.ptsbal b{display:block;font-family:var(--sans);font-size:38px;font-weight:700;color:var(--brand)}
.ptsbal span{font-size:14px;opacity:.6}

.ptsbtn{display:block;text-align:center;text-decoration:none;background:var(--brand);color:#fff;
  border-radius:999px;padding:11px;font-family:var(--sans);font-size:14.5px;font-weight:600}
.ptsbtn:hover{background:var(--brand-dk);color:#fff}

.ptslist{list-style:none;margin:0;padding:0}
.ptslist li{display:flex;align-items:center;gap:13px;padding:13px 0;
  border-bottom:1px solid rgba(37,37,37,.08)}
.ptslist li:last-child{border-bottom:0}
.ptsicon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--brand-tint);color:var(--brand)}
.ptstext{display:flex;flex-direction:column;gap:2px;min-width:0}
.ptstext b{font-family:var(--sans);font-size:14.5px;font-weight:600}
.ptstext span{font-size:13px;opacity:.6;line-height:1.4}

.ptsterms{margin:2px 0 0;text-align:center;font-size:12.5px}
.ptsterms a{color:var(--ink);opacity:.6;text-decoration:underline;text-underline-offset:3px}

@media (max-width:680px){
  .ptstab{left:14px;bottom:14px;padding:11px 17px 11px 14px;font-size:13.5px}
  .ptswrap{padding:0;place-items:end stretch}
  .ptsbox{width:100%;max-height:82vh;border-radius:14px 14px 0 0} }
@media (prefers-reduced-motion:reduce){
  .ptstab,.ptstab:hover{transition:none;transform:none} }

/* A category with no thumbnail and no products to borrow from: show its initial
   rather than an empty panel. */
.need .pic.is-empty{display:grid;place-items:center;background:var(--brand-tint)}
.picnote{font-family:var(--serif);font-size:clamp(46px,5vw,72px);line-height:1;
  color:var(--brand);opacity:.28}

/* ---------- product card, tidied ---------- */
/* Titles and descriptions run to different lengths, so prices and buttons were
   landing at a different height in every card and the rows read as ragged.
   Clamping the text and pushing the price block to the bottom lines them up. */
.card{height:100%}
.card h3{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.28;min-height:calc(2 * 1.28em)}
.card .desc{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.card .meta{margin-top:auto;padding-top:10px}

/* A loyalty plugin injects its "earn N points" line into the button row, which
   split the stepper away from the button. Anything in that row that is not the
   stepper or the button is moved above it and set as a quiet note. */
.qtyadd{flex-wrap:wrap}
.qtyadd > *:not(.qty):not(.add):not(.added_to_cart){
  order:-1;flex:0 0 100%;margin:0 0 2px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  color:var(--brand);opacity:.85;line-height:1.35}

/* ---------- checkout tidy-up ---------- */
/* A loyalty plugin drops a bright banner above the form in its own colours.
   Rather than fight it, restyle it into the brand and give it the width of the
   page so it reads as a header rather than something wedged into the column. */
.woocommerce-checkout .wlr_message,
.woocommerce-checkout .wlr-checkout-message,
.woocommerce-checkout .wlr_checkout_message,
.woocommerce-checkout .woocommerce-info{
  display:flex;align-items:center;gap:11px;
  margin:0 0 22px;padding:14px 18px;
  background:var(--brand-tint);border:1px solid rgba(49,92,58,.18);border-left:3px solid var(--brand);
  border-radius:10px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--brand);
  line-height:1.45}
.woocommerce-checkout .woocommerce-info a{color:var(--brand);text-decoration:underline}
.woocommerce-checkout .wlr_message img,
.woocommerce-checkout .wlr-checkout-message img{width:24px;height:24px;flex:none}

/* The payment method label is a gateway title, an icon and a description, and
   the Razorpay one ran past the edge of its box. */
.wc_payment_methods label{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  min-width:0;word-break:break-word}
.wc_payment_methods label img{max-width:74px;height:auto;margin:0}
.wc_payment_methods .payment_box{margin-top:8px;font-size:14px;line-height:1.5}

/* Two code boxes stacked looked like a mistake. If a plugin adds a second one
   after ours, the pair at least sit as one block. */
.co-coupon + .co-coupon{margin-top:8px}

/* ---------- checkout, second pass ---------- */
/* Guessing the loyalty plugin's class names did not work. Every class it uses
   contains "wlr", so match on that instead and the banner is caught whatever
   the exact name turns out to be. */
.woocommerce-checkout .entry [class*="wlr"],
.woocommerce-checkout form.checkout [class*="wlr"],
.woocommerce-cart .entry [class*="wlr"]{
  background:var(--brand-tint) !important;
  border:1px solid rgba(49,92,58,.18) !important;
  border-left:3px solid var(--brand) !important;
  border-radius:10px !important;
  color:var(--brand) !important;
  font-family:var(--sans) !important;font-size:14.5px !important;font-weight:600 !important;
  line-height:1.45 !important}
.woocommerce-checkout .entry [class*="wlr"] *,
.woocommerce-cart .entry [class*="wlr"] *{color:var(--brand) !important;border-color:transparent !important}
.woocommerce-checkout .entry [class*="wlr"] input,
.woocommerce-checkout .entry [class*="wlr"] button{background:#fff !important;
  border:1.5px solid var(--line) !important;border-radius:9px !important}
.woocommerce-checkout .entry [class*="wlr"] button{background:var(--brand) !important;color:#fff !important;
  border-color:var(--brand) !important}

/* The plugin's own floating launcher lives at the end of the body, outside the
   page content. Nothing above may touch it — restyling a third-party widget
   from the outside is how it ends up with its label sitting on its icon. */
body > [class*="wlr"],
body > [id*="wlr"],
body > div > [class*="wlr_launcher"],
[class*="wlr"][class*="launcher"],
[class*="wlr"][class*="widget"],
[id*="wlr"][id*="launcher"]{
  background:revert !important;border:revert !important;border-radius:revert !important;
  color:revert !important;font-family:revert !important;font-size:revert !important;
  font-weight:revert !important;line-height:revert !important}

/* The reassurance row was landing underneath the Place order button instead of
   after it, so the two overlapped. Put it back in normal flow. */
.woocommerce-checkout .trust,
#payment .place-order .trust{
  position:static;display:flex;flex-wrap:wrap;gap:7px 15px;
  clear:both;float:none;width:100%;margin:14px 0 0;padding:0;
  grid-template-columns:none}
.woocommerce-checkout .trust span,
#payment .place-order .trust span{
  display:inline-flex;align-items:center;
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  opacity:.6;white-space:nowrap}
#payment .place-order{display:block;overflow:visible}
#place_order{position:relative;float:none;margin-bottom:0}

/* ---------- checkout: room to breathe, and a little depth ---------- */
/* The page was packed tight against the header and the fields sat shoulder to
   shoulder. Space is the cheapest thing that makes a checkout feel calm. */
.woocommerce-checkout .woo{padding-block:clamp(28px,4vw,56px)}
.woocommerce-checkout .steps-bar{margin-bottom:clamp(28px,4vw,52px)}
form.checkout{gap:clamp(32px,5vw,80px)}

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields{margin-bottom:clamp(30px,3.4vw,44px)}
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#payment-heading{margin-bottom:20px}
.woocommerce-checkout .form-row{margin-bottom:18px}
.woocommerce-checkout .form-row label{margin-bottom:7px}
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-container .select2-selection--single,
.woocommerce-checkout select{padding-block:13px}

/* The summary lifts off the page rather than sitting flat on it, and settles
   when you scroll to it. Depth, not decoration — it is the panel people
   re-read before paying, so it should feel like the front-most thing. */
#order_review{
  padding:clamp(22px,2.4vw,30px);
  box-shadow:0 1px 2px rgba(37,37,37,.04),0 12px 34px -18px rgba(37,37,37,.3);
  transition:box-shadow .5s ease, transform .5s ease}
#order_review:hover{box-shadow:0 1px 2px rgba(37,37,37,.05),0 20px 46px -20px rgba(37,37,37,.34)}

/* Fields lift very slightly as you reach them, so the eye tracks down the form
   instead of scanning a flat wall of boxes. */
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus{
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(49,92,58,.13),0 6px 16px -8px rgba(49,92,58,.4)}
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select{transition:border-color .2s,box-shadow .25s,transform .25s}

/* Place order: presses in when tapped, so the tap is felt. */
#place_order{box-shadow:0 10px 24px -12px rgba(49,92,58,.75);transition:
  background .2s,transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .25s}
#place_order:active{transform:translateY(1px) scale(.99);
  box-shadow:0 4px 12px -8px rgba(49,92,58,.7)}

/* Everything above is motion of one or two pixels. A checkout is the one page
   where nothing should move much: people are handing over money and card
   details, and movement there reads as instability. */
@media (prefers-reduced-motion:reduce){
  #order_review,#order_review:hover,
  .woocommerce-checkout input.input-text:focus,
  .woocommerce-checkout textarea:focus,
  .woocommerce-checkout select:focus,
  #place_order,#place_order:active{transition:none;transform:none} }

/* ---------- checkout: more room ---------- */
/* Second pass. Wider gutters, taller fields, more air between every block. */
.woocommerce-checkout .woo{padding-block:clamp(40px,5.5vw,84px)}
.woocommerce-checkout .steps-bar{margin-bottom:clamp(40px,5vw,72px)}
form.checkout{gap:clamp(40px,6vw,104px)}

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields{margin-bottom:clamp(40px,4.4vw,60px)}
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#payment-heading{margin-bottom:26px}
.woocommerce-checkout .form-row{margin-bottom:24px}
.woocommerce-checkout .form-row label{margin-bottom:9px}
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single{padding-block:16px}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{margin-bottom:0}
#order_review{padding:clamp(28px,3vw,38px)}
#payment .place-order{margin-top:26px}

/* ---------- checkout: the 3D ---------- */
/* All of it is transform and opacity only, which the phone composites on the
   GPU. Nothing here forces a re-layout, so it stays smooth on a mid-range
   Android on mobile data — the machine most of your customers are using. */

.woocommerce-checkout .steps-bar,
form.checkout{perspective:1400px}

/* The summary panel is a card floating above the page. It leans a degree or two
   towards the cursor, which is what makes it read as an object rather than a
   rectangle. Driven from JS so it follows the pointer. */
#order_review{
  transform-style:preserve-3d;
  transform:perspective(1400px)
    rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .5s ease;
  will-change:transform}
#order_review.is-tilting{transition:transform .12s linear,box-shadow .5s ease}
#order_review:hover{box-shadow:
  0 2px 4px rgba(37,37,37,.05),
  0 30px 60px -26px rgba(37,37,37,.42)}

/* The item thumbnails stand slightly proud of the panel. */
.co-thumb{transform:translateZ(30px);
  box-shadow:0 6px 16px -8px rgba(37,37,37,.4);
  transition:transform .45s cubic-bezier(.2,.8,.3,1)}
#order_review:hover .co-thumb{transform:translateZ(46px) scale(1.04)}
.co-qty{transform:translateZ(56px)}

/* The total sits closest to the reader, because it is the number they came to
   check. */
.woocommerce-checkout .order-total,
.woocommerce-checkout #order_review .co-total{transform:translateZ(22px)}

/* Fields tip forward a fraction as you land in them. */
.woocommerce-checkout .form-row{perspective:900px}
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select{
  transform-origin:center bottom;
  transition:border-color .2s,box-shadow .3s,transform .3s cubic-bezier(.2,.8,.3,1)}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus{
  transform:perspective(900px) rotateX(2.2deg) translateY(-2px);
  box-shadow:0 0 0 3px rgba(49,92,58,.14),0 12px 26px -14px rgba(49,92,58,.6)}

/* Sections arrive one after another instead of all at once. */
@keyframes coRise{
  from{opacity:0;transform:perspective(1200px) translateY(22px) rotateX(6deg)}
  to{opacity:1;transform:perspective(1200px) translateY(0) rotateX(0)} }
.woocommerce-checkout .steps-bar,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #payment,
.woocommerce-checkout #order_review{
  animation:coRise .62s cubic-bezier(.2,.8,.3,1) both}
.woocommerce-checkout .steps-bar{animation-delay:.02s}
.woocommerce-checkout .woocommerce-billing-fields{animation-delay:.1s}
.woocommerce-checkout #order_review{animation-delay:.16s}
.woocommerce-checkout .woocommerce-shipping-fields{animation-delay:.22s}
.woocommerce-checkout .woocommerce-additional-fields{animation-delay:.28s}
.woocommerce-checkout #payment{animation-delay:.34s}

/* The step dots pop as they are reached, and the completed one keeps a ring. */
.steps-bar{perspective:900px}
.steps-bar .stp i{transition:transform .45s cubic-bezier(.2,1.5,.4,1),
  background .3s,box-shadow .3s}
.steps-bar .stp.done i,
.steps-bar .stp.on i{transform:translateZ(16px) scale(1.1);
  box-shadow:0 0 0 5px rgba(49,92,58,.13),0 8px 18px -10px rgba(49,92,58,.7)}
.steps-bar .stpline{transition:background .5s ease}

/* Place order: raised, with a light sweeping across it, and it presses in. */
#place_order{position:relative;overflow:hidden;
  transform:perspective(700px) translateZ(0);
  box-shadow:0 14px 30px -14px rgba(49,92,58,.85);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .3s,background .2s}
#place_order::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);animation:coSheen 4.2s ease-in-out 1.4s infinite}
@keyframes coSheen{0%{left:-60%}55%{left:130%}100%{left:130%}}
#place_order:hover{transform:perspective(700px) translateY(-3px) rotateX(4deg);
  box-shadow:0 22px 40px -16px rgba(49,92,58,.9)}
#place_order:active{transform:perspective(700px) translateY(1px) rotateX(0) scale(.985);
  box-shadow:0 6px 14px -10px rgba(49,92,58,.8)}

/* Phones get the arrival animation and the button, but no pointer tilt — there
   is no pointer, and the panel is full width. */
@media (max-width:900px){
  #order_review{transform:none !important}
  .co-thumb,#order_review:hover .co-thumb{transform:none}
  .co-qty{transform:none} }

@media (prefers-reduced-motion:reduce){
  .woocommerce-checkout .steps-bar,
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields,
  .woocommerce-checkout #payment,
  .woocommerce-checkout #order_review{animation:none}
  #order_review,#place_order,.co-thumb,
  .woocommerce-checkout input.input-text:focus,
  .woocommerce-checkout textarea:focus,
  .woocommerce-checkout select:focus{transform:none !important;transition:none}
  #place_order::after{display:none} }

/* ---------- checkout: fix the column widths ---------- */
/* Widening the gutter to 104px ate the summary column, which is why the item
   name, the security line and the trust row all started wrapping onto two and
   three lines. Give the summary a fixed, comfortable width and let the form
   take what is left, then widen the page to pay for the gutter. */
.woocommerce-checkout .woo{max-width:1340px}
form.checkout{grid-template-columns:minmax(0,1fr) 400px;
  gap:clamp(30px,3.6vw,68px)}

#order_review{padding:clamp(24px,2.4vw,32px)}
.woocommerce-checkout .co-secure{white-space:normal;font-size:12.5px;line-height:1.45}

/* The trust row had gone vertical because there was no width to sit across. */
.woocommerce-checkout .trust,
#payment .place-order .trust{justify-content:center;gap:6px 14px}

@media (max-width:1100px){
  form.checkout{grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,3vw,40px)} }
@media (max-width:900px){
  form.checkout{grid-template-columns:1fr} }

/* ---------- checkout: make the page use the width it has ---------- */
/* The whole checkout block has been sitting at roughly 660px on a 1900px
   screen the entire time — the two columns were simply splitting that. Giving
   the summary a fixed 400px made it obvious, because the form got what was
   left, which was not much. Force the container to the full page width and go
   back to a proportional split so both columns grow with the screen. */
.woocommerce-checkout .woo{max-width:1340px !important;width:100% !important}
.woocommerce-checkout form.checkout{
  width:100% !important;max-width:none !important;
  grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr) !important}
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review{width:auto;max-width:none;min-width:0}

/* Fields fill their column instead of stopping short. */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row .select2-container{width:100%;max-width:none}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last{width:100%}

@media (max-width:1100px){
  .woocommerce-checkout form.checkout{
    grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr) !important} }
@media (max-width:900px){
  .woocommerce-checkout form.checkout{grid-template-columns:1fr !important} }

/* ---------- checkout: out to the edges ---------- */
/* Wider than the rest of the site on purpose. The checkout has no navigation
   or reading column to line up with, so the space either side was doing
   nothing. */
.woocommerce-checkout .woo{
  max-width:min(1600px,94vw) !important;
  padding-inline:clamp(16px,2.5vw,40px) !important}
.woocommerce-checkout .steps-bar{max-width:min(1600px,94vw);margin-inline:auto}

/* The summary can take more width now, and the form column is capped so the
   fields do not stretch into one long unreadable line. */
.woocommerce-checkout form.checkout{
  grid-template-columns:minmax(0,1fr) clamp(360px,30%,470px) !important;
  gap:clamp(32px,4vw,88px)}

/* Paired fields sit properly side by side instead of stacking with space to
   spare. Address, town and PIN share a row on a wide screen. */
@media (min-width:1100px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
    display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
  .woocommerce-checkout .form-row-wide,
  .woocommerce-checkout #billing_address_1_field,
  .woocommerce-checkout #billing_address_2_field,
  .woocommerce-checkout #billing_country_field,
  .woocommerce-checkout #order_comments_field{grid-column:1 / -1}
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last{grid-column:auto;width:100%;float:none} }

@media (max-width:1100px){
  .woocommerce-checkout form.checkout{
    grid-template-columns:minmax(0,1fr) clamp(300px,32%,380px) !important} }
@media (max-width:900px){
  .woocommerce-checkout .woo{max-width:100% !important}
  .woocommerce-checkout form.checkout{grid-template-columns:1fr !important} }

/* ---------- checkout width: the actual cause ---------- */
/* The checkout is an ordinary WordPress page holding the [woocommerce_checkout]
   shortcode, so it renders through page.php and is wrapped in .entry — not the
   .woo wrapper I had been widening. And .entry is capped at 70ch, about 660px,
   because it is meant for readable paragraphs of prose. That cap is where all
   the empty space either side was coming from. A checkout is not prose. */
.woocommerce-checkout .entry,
.woocommerce-cart .entry,
.woocommerce-account .entry,
.woocommerce-order-received .entry{
  max-width:none !important;
  margin-inline:0 !important;
  width:100% !important}

/* Now the page itself can take the width. */
.woocommerce-checkout .wrap,
.woocommerce-cart .wrap{max-width:min(1600px,94vw)}

.woocommerce-checkout .head{max-width:none}

/* ---------- loyalty launcher: move it to the left ---------- */
/* Position only — no colours, no borders, no typography. Restyling the plugin's
   widget from out here is what put its label on top of its icon before. Moving
   it cannot break how it looks, only where it sits.
   The proper place to do this is WPLoyalty's own launcher settings; this is
   here for the case where that setting does not exist or does not stick. */
[class*="wlr"][class*="launcher"],
[id*="wlr"][id*="launcher"],
[class*="wlr"][class*="float"],
[id*="wlr_holder"],
body > div[class*="wlr"]{
  left:20px !important;
  right:auto !important}

/* The offer tab is pinned to the left edge halfway down, so the launcher sits
   at the bottom where they cannot meet. */
@media (max-width:680px){
  [class*="wlr"][class*="launcher"],
  [id*="wlr"][id*="launcher"],
  [id*="wlr_holder"],
  body > div[class*="wlr"]{left:14px !important} }

/* ---------- everything down the left edge ---------- */
/* WhatsApp sits lowest because it is the one people reach for most. The
   loyalty launcher stacks above it, and the offer tab stays pinned halfway up
   the edge where neither can reach it. */
.wafloat{left:20px;right:auto}
body.single-product .wafloat{bottom:86px}

[class*="wlr"][class*="launcher"],
[id*="wlr"][id*="launcher"],
[class*="wlr"][class*="float"],
[id*="wlr_holder"],
body > div[class*="wlr"]{
  left:20px !important;
  right:auto !important;
  bottom:92px !important}

@media (max-width:680px){
  .wafloat{left:14px;right:auto}
  [class*="wlr"][class*="launcher"],
  [id*="wlr"][id*="launcher"],
  [id*="wlr_holder"],
  body > div[class*="wlr"]{left:14px !important;bottom:80px !important} }

/* On a short screen in portrait the offer tab would meet the stack, so it
   moves up out of the way. */
@media (max-height:720px){
  .offertab{top:40%} }

/* ---------- category chips: glow, no underline ---------- */
/* A global link-hover underline was showing through beneath the pill. Killed on
   every state, and replaced with a ring of light around the pill itself. */
.apchip,
.apchip:hover,
.apchip:focus,
.apchip:active,
.apchip:visited{text-decoration:none !important}

.apchip{
  position:relative;
  transition:background .25s,color .25s,border-color .25s,
    box-shadow .35s ease,transform .25s cubic-bezier(.2,.8,.3,1)}

.apchip:hover{
  border-color:var(--brand);
  color:var(--brand);
  transform:translateY(-2px);
  box-shadow:
    0 0 0 3px rgba(49,92,58,.12),
    0 0 18px rgba(49,92,58,.28),
    0 8px 20px -10px rgba(49,92,58,.55)}

.apchip:hover span{opacity:.7}

/* The selected chip glows a little on its own so it still reads as chosen when
   the cursor is elsewhere, and brighter when you come back to it. */
.apchip.is-on{
  box-shadow:0 0 0 3px rgba(49,92,58,.14),0 6px 18px -8px rgba(49,92,58,.6)}
.apchip.is-on:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:
    0 0 0 4px rgba(49,92,58,.18),
    0 0 24px rgba(49,92,58,.45),
    0 10px 24px -10px rgba(49,92,58,.7)}

/* Keyboard focus keeps a visible ring — the glow alone is too soft to count. */
.apchip:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .apchip,.apchip:hover,.apchip.is-on:hover{transition:none;transform:none} }

/* ---------- category chips: kill the inherited underline ---------- */
/* Setting text-decoration:none on the chip was never going to work. When an
   ancestor carries an underline, the line paints straight through every
   descendant and the child cannot cancel it — that is how text-decoration is
   specified. So it has to come off the row and the bar as well. */
.apfilters,
.apfilters *,
.apfrow,
.apfrow *,
.apchip,
.apchip *,
.apchip:hover,
.apchip:hover *,
.apchip:focus,
.apchip:focus *,
.apchip:active,
.apchip:visited{
  text-decoration:none !important;
  -webkit-text-decoration:none !important;
  text-decoration-line:none !important;
  text-decoration-color:transparent !important;
  text-underline-offset:0 !important;
  border-bottom:0 !important}

/* The glow, marked important so a plugin stylesheet loading after this one
   cannot flatten it. */
.apchip:hover{
  border:1px solid var(--brand) !important;
  color:var(--brand);
  transform:translateY(-2px);
  box-shadow:
    0 0 0 3px rgba(49,92,58,.13),
    0 0 20px rgba(49,92,58,.32),
    0 8px 22px -10px rgba(49,92,58,.6) !important}

.apchip.is-on{
  border:1px solid var(--brand) !important;
  box-shadow:0 0 0 3px rgba(49,92,58,.14),0 6px 18px -8px rgba(49,92,58,.6) !important}

.apchip.is-on:hover{
  color:#fff;
  box-shadow:
    0 0 0 4px rgba(49,92,58,.2),
    0 0 26px rgba(49,92,58,.5),
    0 10px 26px -10px rgba(49,92,58,.75) !important}

/* ---------- category chips: soften the glow ---------- */
/* The previous version opened with a hard-edged 3px ring. At that size a solid
   ring does not read as light, it reads as a second border — heaviest along the
   bottom where it meets the drop shadow, which is exactly where the line was
   appearing. Blur only now, so it glows rather than outlines. */
.apchip:hover{
  border:1px solid var(--brand) !important;
  color:var(--brand);
  transform:translateY(-2px);
  box-shadow:
    0 0 10px rgba(49,92,58,.22),
    0 0 26px rgba(49,92,58,.3),
    0 6px 20px -12px rgba(49,92,58,.5) !important}

.apchip.is-on{
  border:1px solid var(--brand) !important;
  box-shadow:0 0 14px rgba(49,92,58,.28),0 5px 16px -10px rgba(49,92,58,.5) !important}

.apchip.is-on:hover{
  color:#fff;
  box-shadow:
    0 0 14px rgba(49,92,58,.35),
    0 0 32px rgba(49,92,58,.42),
    0 8px 24px -12px rgba(49,92,58,.6) !important}

/* ---------- category chips: glow with drop-shadow, not box-shadow ---------- */
/* box-shadow paints a rectangle-derived shape behind the element and, stacked
   two or three deep, its lower edge can resolve into what looks like a straight
   line under the pill. filter: drop-shadow follows the rendered shape instead,
   so a rounded pill glows as a rounded pill with no straight edge anywhere. */
.apchip:hover,
.apchip.is-on,
.apchip.is-on:hover{box-shadow:none !important}

.apchip{filter:none;transition:background .25s,color .25s,border-color .25s,
  filter .35s ease,transform .25s cubic-bezier(.2,.8,.3,1)}

.apchip:hover{
  border:1px solid var(--brand) !important;
  color:var(--brand);
  transform:translateY(-2px);
  filter:drop-shadow(0 0 6px rgba(49,92,58,.35))
         drop-shadow(0 0 16px rgba(49,92,58,.28))}

.apchip.is-on{filter:drop-shadow(0 0 8px rgba(49,92,58,.32))}
.apchip.is-on:hover{
  color:#fff;
  filter:drop-shadow(0 0 8px rgba(49,92,58,.45))
         drop-shadow(0 0 22px rgba(49,92,58,.38))}

@media (prefers-reduced-motion:reduce){
  .apchip,.apchip:hover{transition:none;transform:none} }

/* ---------- category chips: glow only, border untouched ---------- */
/* Working theory: what reads as an underline is the bottom of the green hover
   border. Against the pale pill the bottom edge is the highest-contrast part of
   the outline, and with a glow sitting beneath it, it thickens into a line.
   So the border no longer changes on hover — it stays exactly as it is on the
   other chips, and only the light and the lift respond. */
.apchip:hover{
  border:1px solid var(--line) !important;
  color:var(--brand);
  transform:translateY(-2px);
  filter:drop-shadow(0 0 7px rgba(49,92,58,.34))
         drop-shadow(0 0 18px rgba(49,92,58,.26))}

/* The chosen chip is solid green, so its edge is not in question. */
.apchip.is-on{border:1px solid var(--brand) !important}

/* ---------- category chips: the underline, properly ---------- */
/* Now visible at size: it is a text underline, under the words, matching the
   text colour — not an edge or a shadow. It survived every rule so far because
   something is setting it with a stronger selector than .apchip:hover, and a
   plain !important at equal specificity does not win that.
   So: match with far more specificity than anything reasonable would use. */
html body .apfilters .apfrow a.apchip,
html body .apfilters .apfrow a.apchip:link,
html body .apfilters .apfrow a.apchip:visited,
html body .apfilters .apfrow a.apchip:hover,
html body .apfilters .apfrow a.apchip:focus,
html body .apfilters .apfrow a.apchip:active,
html body .apfilters .apfrow a.apchip *,
html body .apfilters .apfrow a.apchip:hover *,
html body .apfilters .apfrow a.apchip:focus *,
html body .apfilters .apfrow a.apchip:active *{
  text-decoration:none !important;
  -webkit-text-decoration:none !important;
  text-decoration-line:none !important;
  text-decoration-style:none !important;
  text-decoration-color:transparent !important;
  text-decoration-thickness:0 !important;
  background-image:none !important;
  border-bottom:0 !important;
  box-shadow:none !important}

/* Restore the glow after that blanket box-shadow reset above. */
html body .apfilters .apfrow a.apchip:hover{
  color:var(--brand);
  transform:translateY(-2px);
  filter:drop-shadow(0 0 7px rgba(49,92,58,.34))
         drop-shadow(0 0 18px rgba(49,92,58,.26))}
html body .apfilters .apfrow a.apchip.is-on{
  background:var(--brand);color:#fff;
  filter:drop-shadow(0 0 9px rgba(49,92,58,.34))}
html body .apfilters .apfrow a.apchip.is-on:hover{color:#fff;
  filter:drop-shadow(0 0 9px rgba(49,92,58,.45))
         drop-shadow(0 0 24px rgba(49,92,58,.36))}

/* ---------- category chips: it is a pseudo-element ---------- */
/* A specificity override that clears every text-decoration property did not
   remove it, so it is not text-decoration. A line under the text that no
   decoration rule touches is almost always a pseudo-element — a small bar
   positioned under the label on hover, which is a common way animated
   underlines are built. The theme draws no such thing on these chips, so it is
   arriving from a plugin or a parent theme rule. Remove it at the source. */
html body .apfilters .apfrow a.apchip::before,
html body .apfilters .apfrow a.apchip::after,
html body .apfilters .apfrow a.apchip:hover::before,
html body .apfilters .apfrow a.apchip:hover::after,
html body .apfilters .apfrow a.apchip:focus::before,
html body .apfilters .apfrow a.apchip:focus::after,
html body .apfilters .apfrow a.apchip span::before,
html body .apfilters .apfrow a.apchip span::after,
html body .apfilters .apfrow a.apchip:hover span::before,
html body .apfilters .apfrow a.apchip:hover span::after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  height:0 !important;
  width:0 !important;
  opacity:0 !important}

/* ---------- category chips: the blink ---------- */
/* A pulse while the cursor is on the chip: the glow breathes in and out rather
   than sitting at one brightness. Opacity and filter only, so it costs nothing
   to animate. */
@keyframes chipBlink{
  0%   {filter:drop-shadow(0 0 4px rgba(49,92,58,.20)) drop-shadow(0 0 10px rgba(49,92,58,.14))}
  50%  {filter:drop-shadow(0 0 10px rgba(49,92,58,.52)) drop-shadow(0 0 24px rgba(49,92,58,.40))}
  100% {filter:drop-shadow(0 0 4px rgba(49,92,58,.20)) drop-shadow(0 0 10px rgba(49,92,58,.14))} }

html body .apfilters .apfrow a.apchip:hover{
  animation:chipBlink 1.5s ease-in-out infinite;
  color:var(--brand);
  transform:translateY(-2px)}

html body .apfilters .apfrow a.apchip.is-on:hover{
  animation:chipBlink 1.5s ease-in-out infinite;
  color:#fff}

@media (prefers-reduced-motion:reduce){
  html body .apfilters .apfrow a.apchip:hover,
  html body .apfilters .apfrow a.apchip.is-on:hover{animation:none;transform:none} }

/* ---------- category chips: stop the row running off the edge ---------- */
/* Ten categories no longer fit on one line, so the last one was being cut in
   half by the edge of the screen — and it was the selected one. On a wide
   screen the row wraps onto a second line and centres instead. */
html body .apfilters .apfrow{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  overflow-x:visible;
  padding-block:16px}

/* On a phone wrapping would eat half the screen, so it stays a single
   scrolling row there, with a fade at the right edge to show there is more. */
@media (max-width:760px){
  html body .apfilters .apfrow{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    padding-inline:var(--pad,16px);
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  html body .apfilters .apfrow a.apchip{scroll-snap-align:start} }

/* ---------- the hover underline, at the root ---------- */
/* It is on the pagination too, so it was never a chip problem — something is
   underlining every link on hover site-wide. Chasing it component by component
   was always going to fail. Turn it off for all links, then hand it back to the
   few places that genuinely want an underline. */
html body a:hover,
html body a:focus,
html body a:active{
  text-decoration:none;
  -webkit-text-decoration:none}

/* Places where an underline is the right thing: prose links, breadcrumbs,
   review links and policy links all read as links because of it. */
html body .entry p a,
html body .pdpcrumb .crumb a:hover,
html body .summary .woocommerce-review-link,
html body .pdp .rate a,
html body .bd-note a,
html body .wathanks a,
html body .ptsterms a,
html body .waask,
html body .woocommerce-checkout .woocommerce-info a,
html body .site-footer .legal a:hover{
  text-decoration:underline;
  text-underline-offset:3px}

/* Controls are not prose. Nothing round or pill-shaped gets a line under it. */
html body .appages .page-numbers,
html body .appages .page-numbers:hover,
html body .appages .page-numbers:focus,
html body .apchip,
html body .apchip:hover,
html body .apchip:focus,
html body .btn,
html body .btn:hover,
html body .add,
html body .add:hover,
html body .need,
html body .need:hover{
  text-decoration:none !important;
  -webkit-text-decoration:none !important}

/* The pagination gets the same glow as the chips, for consistency. */
html body .appages .page-numbers{transition:background .25s,color .25s,
  border-color .25s,filter .35s ease,transform .25s cubic-bezier(.2,.8,.3,1)}
html body .appages .page-numbers:hover{
  color:var(--brand);transform:translateY(-2px);
  filter:drop-shadow(0 0 7px rgba(49,92,58,.34)) drop-shadow(0 0 16px rgba(49,92,58,.24))}
html body .appages .page-numbers.current:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  html body .appages .page-numbers:hover{transition:none;transform:none} }

/* ---------- shop grid: bigger cards ---------- */
/* Four across on a wide screen left each pack about 230px to be seen in, which
   is not much for a product where the pack is the thing being sold. Three
   across is roughly 40% wider. The catalogue is 52 products, so the extra
   scrolling costs little next to being able to see what you are buying. */
html body .apgrid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.4vw,34px)}

/* A taller stage, and the pack scaled to fill it consistently rather than
   sitting at whatever size it happened to be photographed at. contain, not
   cover, so nothing is cropped off the edge of a pack. */
html body .apgrid .card .shot{
  aspect-ratio:4/5;
  background:linear-gradient(180deg,#fff 0%,var(--brand-tint) 100%);
  padding:26px 24px 30px;
  border-radius:10px}
html body .apgrid .card .shot img{
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(37,37,37,.16))}

/* Name and price grow with the card. */
html body .apgrid .card h3{font-size:16.5px;line-height:1.3}
html body .apgrid .card .price,
html body .apgrid .card .woocommerce-Price-amount{font-size:18px}

@media (max-width:1180px){
  html body .apgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  html body .apgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  html body .apgrid{grid-template-columns:1fr;gap:20px}
  html body .apgrid .card .shot{aspect-ratio:1/1} }

/* ---------- My Product: white background ---------- */
/* The warm beige is the house background everywhere else. On this page it sits
   directly behind fifty product photographs, most of which are cut out on
   white, so every pack carried a faint beige halo. White lets the packs read
   as packs. */
body.page-template-page-products{background:#fff}
body.page-template-page-products .apfilters{
  background:#fff;
  border-bottom:1px solid rgba(37,37,37,.10)}

/* On white the cards need an edge of their own, or they dissolve into the
   page. A hairline border does that without adding weight. */
body.page-template-page-products .apgrid .card{
  border:1px solid rgba(37,37,37,.10);
  border-radius:14px;
  background:#fff;
  overflow:hidden}

/* The pack stage keeps its soft green wash so the image area still separates
   from the card, now that the card itself is white on white. */
body.page-template-page-products .apgrid .card .shot{
  border-radius:0;
  background:linear-gradient(180deg,#FBFDFA 0%,var(--brand-tint) 100%)}

body.page-template-page-products .apgrid .card .body,
body.page-template-page-products .apgrid .card .meta{padding-inline:16px}
body.page-template-page-products .apcount{opacity:.5}

/* ---------- shop grid: back to four across ---------- */
/* Four per row, keeping the taller stage and the consistent pack framing from
   the three-across version — the framing was the part that made the row read
   evenly, not the column count. */
html body .apgrid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2vw,28px)}

@media (max-width:1180px){
  html body .apgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  html body .apgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  html body .apgrid{grid-template-columns:1fr;gap:20px} }

/* ---------- shop grid: let the pack fill the frame ---------- */
/* The stage had 26px of padding on top of the letterboxing that object-fit
   contain already leaves, so the pack was sitting in about 60% of the box with
   dead space all round. Cut the padding right back and square the stage, so
   the pack is the thing you see. */
html body .apgrid .card .shot{
  aspect-ratio:1/1;
  padding:8px}
html body .apgrid .card .shot img{
  width:100%;height:100%;
  object-fit:contain;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}

/* Hover scales the pack itself rather than pushing the whole card forward, so
   the movement reads as looking closer at the product. */
html body .apgrid .card:hover .shot img{transform:scale(1.06)}
html body .apgrid .card:hover .shot{transform:none}

@media (prefers-reduced-motion:reduce){
  html body .apgrid .card:hover .shot img{transform:none} }

/* ---------- shop grid: no stage, just the pack ---------- */
/* The tinted panel behind the pack was reading as a box the product sits
   inside. Removed: no padding, no gradient, no rounded inner frame. The image
   runs to the edges of the card and the pack is the only thing in view. */
html body .apgrid .card .shot{
  aspect-ratio:1/1;
  padding:0;
  background:#fff;
  border-radius:0}
html body .apgrid .card .shot img{
  width:100%;height:100%;
  object-fit:contain;
  filter:none}

/* Whatever white space is left inside the frame now belongs to the photograph
   itself, not to the layout. Cropping it away with object-fit:cover would cut
   the top off a bottle or the side off a box, so the fix for that is trimming
   the images, not the CSS. */
html body .apgrid .card:hover .shot img{transform:scale(1.05)}

/* ---------- My Product: soft green too ---------- */
/* Brought back in line with the rest of the site. The white was an earlier
   request; soft green now applies everywhere without exception. */
body.page-template-page-products{background:var(--paper)}
body.page-template-page-products .apfilters{background:var(--paper)}
body.page-template-page-products .apsec{background:var(--paper)}

/* Cards stay white so the packs still separate from the page, and the hairline
   border is no longer needed now that there is contrast behind them. */
body.page-template-page-products .apgrid .card{
  background:#fff;
  border:1px solid rgba(37,37,37,.08)}
body.page-template-page-products .apgrid .card .shot{background:#fff}

/* ---------- Poppins throughout ---------- */
/* One family everywhere, so both tokens now point at it. Poppins has a large
   x-height and geometric letterforms, which run wider and read heavier than
   the faces they replace — so body text drops slightly and long headlines get
   tighter tracking to stop them sprawling. */
body{font-size:16px;line-height:1.65;letter-spacing:0}
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.22}
h1,.hero h1{letter-spacing:-.035em}

/* Poppins at small sizes needs a little air or it sets solid. */
.pack,.apchip,.qty,.btn,.add,.price{letter-spacing:0}
small,.offersmall,.ptsterms,.pts{letter-spacing:.005em}

/* It carries no true italic in the weights loaded, so anywhere the old serif
   was used italic for emphasis now leans on weight instead. */
em,i{font-style:italic}
blockquote{font-style:normal;font-weight:500}

/* ---------- shop grid: remove the frame entirely ---------- */
/* Three things were still drawing a box around the pack: a border on the image
   frame, 14px of padding on the image itself, and the shadow pool it stood in.
   Clearing the background and the rounding last time left all three behind. */
html body .apgrid .card .shot{
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  background:#fff !important;
  box-shadow:none !important}
html body .apgrid .card:hover .shot{
  background:#fff !important;
  border:0 !important;
  box-shadow:none !important}
html body .apgrid .card .shot::after,
html body .apgrid .card:hover .shot::after{display:none !important}
html body .apgrid .card .shot img{
  padding:0 !important;
  width:100%;height:100%;
  object-fit:contain;
  filter:none}
html body .apgrid .card:hover .shot img{
  transform:scale(1.05);
  filter:none}

/* Rows line up: the name reserves two lines whatever its length, and the price
   block sits at the foot of the card. */
html body .apgrid .card{height:100%;display:flex;flex-direction:column}
html body .apgrid .card h3{
  margin-top:12px;min-height:2.5em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body .apgrid .card .desc{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em}
html body .apgrid .card .price{margin-top:auto}

/* ---------- shop grid: centre the card text ---------- */
/* The pack sits centred in its frame, so left-aligned text underneath pulled
   against it. Name, description and price now share the pack's centre line. */
html body .apgrid .card h3,
html body .apgrid .card .desc,
html body .apgrid .card .price,
html body .apgrid .card .pack{text-align:center}
html body .apgrid .card .price{
  display:flex;align-items:baseline;justify-content:center;gap:8px}
html body .apgrid .card .was,
html body .apgrid .card del{margin:0}
html body .apgrid .card .qtyadd{justify-content:center}

/* ---------- "Direct from farmers": the cart actually travels ---------- */
/* The wheels were spinning while the cart stood still, which reads as slipping
   rather than moving. Now the whole cart rolls across the disc, the wheels turn
   at a speed that matches the distance covered, and the load jostles over the
   ground. The point of the tile is grain coming in from the farm, so the cart
   should arrive rather than idle. */
.a-cart{transform-box:view-box;transform-origin:center}
.a-load{transform-box:fill-box;transform-origin:50% 100%}

@keyframes whyroll{
  0%   {transform:translateX(-14%)}
  100% {transform:translateX(14%)} }
@keyframes whyjostle{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%    {transform:translateY(-1.4px) rotate(-1.2deg)}
  60%    {transform:translateY(-.6px) rotate(.9deg)} }

.whyitem:hover .a-cart{
  animation:whyroll 3.6s cubic-bezier(.45,0,.55,1) infinite alternate}
.whyitem:hover .a-load{animation:whyjostle .9s ease-in-out infinite}
.whyitem:hover .a-load-2{animation-delay:-.35s}

/* The wheel spin already existed; slowing it to match the travel speed is what
   stops it looking like the wheels are turning faster than the cart moves. */
.whyitem:hover .a-wheel{animation:whyspin 2.4s linear infinite}
.whyitem:hover .a-wheel-2{animation-delay:-.3s}

/* The ground shadow stretches as the cart passes over it. */
.whyitem .a-shadow{transition:transform .6s ease,opacity .6s ease}
.whyitem:hover .a-shadow{opacity:.3}

/* On a phone there is no hover, so the cart rolls in once as the row appears
   and then settles. */
@media (hover:none){
  .whygrid.in .whyitem:first-child .a-cart{
    animation:whyrollin 1.4s cubic-bezier(.2,.8,.3,1) both}
  .whygrid.in .whyitem:first-child .a-wheel{
    animation:whyspin 1.4s linear 1}
}
@keyframes whyrollin{
  from{transform:translateX(-26%)}
  to  {transform:translateX(0)} }

@media (prefers-reduced-motion:reduce){
  .whyitem:hover .a-cart,
  .whyitem:hover .a-load,
  .whyitem:hover .a-wheel,
  .whygrid.in .whyitem:first-child .a-cart{animation:none} }

/* ================= video hero (1.0.143; film uncovered, words beneath 1.0.150) ================= */
.vhero{display:block;position:relative;background:var(--brand-dk);color:#fff}
.vhero-frame{position:relative;width:100%;aspect-ratio:var(--vr,16/9);overflow:hidden;background:#1d2a20}
.vhero-film{display:block;width:100%;height:100%;object-fit:cover}
.vhero-sound{position:absolute;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);z-index:2;
  display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;cursor:pointer;
  font:600 14px/1 var(--sans);color:#fff;background:rgba(20,34,24,.45);border:1.5px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,border-color .25s,transform .25s}
.vhero-sound:hover{background:rgba(20,34,24,.7);border-color:#fff;transform:translateY(-2px)}
.vhero-sound .i-on,.vhero-sound .l-on,.vhero-sound[aria-pressed="true"] .i-off,.vhero-sound[aria-pressed="true"] .l-off{display:none}
.vhero-sound[aria-pressed="true"] .i-on,.vhero-sound[aria-pressed="true"] .l-on{display:inline}
.vhero-band{background:var(--brand-dk);position:relative}
.vhero-band::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--brand),rgba(223,237,213,.6),var(--brand))}
.vhero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);
  align-items:end;padding-block:clamp(32px,4.2vw,58px)}
.vhero h1{margin:0;font-family:var(--sans);font-weight:800;font-size:clamp(28px,3.4vw,50px);
  line-height:1.06;letter-spacing:-.03em;color:#fff;max-width:18ch}
.vhero-side{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.vhero-sub{margin:0;max-width:46ch;font-size:clamp(15px,1.2vw,17.5px);line-height:1.65;color:rgba(255,255,255,.84)}
.vhero-in > *{animation:vhup .9s cubic-bezier(.2,.8,.3,1) both}
.vhero-in > :nth-child(2){animation-delay:.15s}
@keyframes vhup{from{opacity:0;transform:translateY(22px)}}
@media (max-width:820px){
  .vhero-in{grid-template-columns:1fr;gap:16px;padding-block:26px 34px}
  .vhero-sound{padding:9px 14px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.vhero-in > *{animation:none}}

/* ================= card quantity + add: one capsule (1.0.148) =================
   Stepper and button share one rounded outline: round - and + buttons on the
   left, a filled "Add" with a cart icon on the right. Written with html body
   in front so it wins over the older .qty rules further up this file. */
html body .qtyadd{display:flex;flex-wrap:nowrap;align-items:center;gap:0;margin-top:14px;height:46px;
  border:1.5px solid var(--brand);border-radius:999px;background:#fff;padding:3px;overflow:hidden;
  transition:box-shadow .25s,border-color .25s}
html body .qtyadd:hover{box-shadow:0 8px 20px -10px rgba(36,70,43,.45)}
html body .qtyadd .qty{display:flex;align-items:center;gap:0;margin:0;padding:0 2px 0 1px;border:0;border-radius:0;
  flex:none;width:auto;height:100%;background:none;justify-content:flex-start}
html body .qtyadd .qty button{width:30px;height:30px;flex:none;align-self:center;border:0;border-radius:50%;
  background:var(--paper);color:var(--brand);font:700 17px/1 var(--sans);cursor:pointer;padding:0;
  display:grid;place-items:center;transition:background .2s,color .2s,transform .15s}
html body .qtyadd .qty button:hover{background:var(--brand);color:#fff}
html body .qtyadd .qty button:active{transform:scale(.9)}
html body .qtyadd .qty button:disabled{opacity:.35;background:var(--paper);color:var(--brand);cursor:default}
html body .qtyadd .qty .qnum{min-width:26px;text-align:center;font:700 15px/1 var(--sans);color:var(--ink);border:0}
html body .qtyadd .add{flex:1;min-width:0;height:100%;margin:0 0 0 4px;padding:0 12px;border:0;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  background:var(--brand);color:#fff;font:700 14px/1 var(--sans);letter-spacing:0;text-decoration:none;
  transition:background .25s}
html body .qtyadd .add::before{content:"";width:17px;height:17px;flex:none;background:currentColor;
  -webkit-mask:var(--ico-cart) center/contain no-repeat;mask:var(--ico-cart) center/contain no-repeat;
  transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
html body .qtyadd .add:hover{background:var(--brand-dk);color:#fff}
html body .qtyadd .add:hover::before{transform:translateX(-2px) rotate(-8deg)}
html body .qtyadd .add.loading{opacity:.65;pointer-events:none}
html body .qtyadd .add.added::before{-webkit-mask-image:var(--ico-tick);mask-image:var(--ico-tick)}
html body .qtyadd .added_to_cart{display:none}
/* Products without a stepper (Select options, Read more): the whole capsule is the button */
html body .qtyadd.is-plain{padding:3px}
html body .qtyadd.is-plain .add{margin:0}
html body .qtyadd.is-plain .add::before{display:none}
.qtyadd{--ico-cart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 11.2a2 2 0 0 0 2 1.6h8.3a2 2 0 0 0 2-1.55L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3C/svg%3E");
  --ico-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")}
/* The favourites row keeps its capsule full width under the price */
html body .fav .frow .qtyadd{width:100%;flex:0 0 100%}
@media (max-width:420px){
  html body .qtyadd{height:42px}
  html body .qtyadd .qty button{width:26px;height:26px;font-size:15px}
  html body .qtyadd .qty .qnum{min-width:20px;font-size:14px}
  html body .qtyadd .add{padding:0 8px;font-size:13px;gap:5px}
  html body .qtyadd .add::before{width:15px;height:15px}
}

/* ================= pagination: no menu underline (1.0.149) =================
   The page numbers sit inside a <nav>, so they picked up the header menu's
   sliding underline (nav a::after) as a green line under the circle. */
html body nav.appages a::after,
html body nav.appages .page-numbers::after,
html body .woocommerce-pagination a::after{content:none !important;display:none !important}

/* ================= favourites: whole photo, no cropping (1.0.151) =================
   The product photos are square, but the favourites row drew them in a wide
   16:11 frame (16:9 on phones), cutting off the top and bottom of every
   pack. Square frame, whole photo. */
html body .fav .fpic{aspect-ratio:1 / 1 !important}
html body .fav .fpic img{object-fit:cover;object-position:center}

/* ================= reels: fixed card width (1.0.152) =================
   Each reel column used minmax(196px, 1fr), so a single reel stretched to
   the whole container width and became a giant poster. Now every reel is a
   phone-sized card, about a fifth of the row, whatever the count. */
html body .reels{grid-auto-columns:clamp(160px,calc((100% - 4 * 18px) / 5),240px);justify-content:start}
@media (max-width:680px){ html body .reels{grid-auto-columns:clamp(150px,44vw,200px)} }

/* ================= Watch, redesigned (1.0.153) =================
   Dark green band. Copy and reel list on the left; the reels as a stack of
   phone cards on the right, the front one framed like a phone. Films, if any,
   run underneath as wide cards. */
.w2{position:relative;overflow:hidden;background:var(--brand-dk);color:#fff;padding-block:clamp(60px,7vw,110px)}
.w2::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(45% 60% at 78% 45%,rgba(223,237,213,.16),transparent 70%),
             repeating-linear-gradient(-38deg,rgba(255,255,255,.022) 0 2px,transparent 2px 28px)}
.w2 .wrap{position:relative}
.w2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.w2-grid.no-reels{grid-template-columns:1fr}
.w2-kick{display:inline-flex;align-items:center;gap:8px;font:800 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-tint);margin-bottom:14px}
.w2-kick::before{content:"";width:8px;height:8px;border-radius:50%;background:#E0463A;box-shadow:0 0 0 4px rgba(224,70,58,.25);animation:w2rec 1.6s ease-in-out infinite}
@keyframes w2rec{50%{opacity:.35}}
.w2 h2{margin:0 0 14px;color:#fff;font-size:clamp(30px,3.6vw,48px);letter-spacing:-.03em;line-height:1.05}
.w2-intro{margin:0 0 30px;max-width:44ch;font-size:clamp(15px,1.2vw,17px);line-height:1.65;color:rgba(255,255,255,.72)}
.w2-note{margin:0;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.08);font-size:14px;color:rgba(255,255,255,.8)}
.w2-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:480px}
.w2-list li{margin:0}
.w2-item{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;text-align:left;cursor:pointer;
  padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;
  font-family:var(--sans);transition:background .25s,border-color .25s,transform .25s}
.w2-item:hover{background:rgba(255,255,255,.09);transform:translateX(4px)}
.w2-item[aria-current="true"]{background:#fff;color:var(--ink);border-color:#fff}
.w2-num{font:800 13px/1 var(--sans);letter-spacing:.04em;opacity:.55}
.w2-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.w2-meta b{font-size:15px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w2-meta span{font-size:12.5px;opacity:.6}
.w2-go{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);transition:background .25s}
.w2-go svg{width:14px;height:14px;margin-left:2px}
.w2-item[aria-current="true"] .w2-go{background:var(--brand);color:#fff}
.w2-more{display:inline-block;margin-top:22px;font:700 14px/1 var(--sans);color:var(--brand-tint);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:4px}

/* the phone stack */
.w2-stage{position:relative;display:grid;place-items:center;min-height:clamp(470px,44vw,640px)}
.w2-deck{position:relative;width:clamp(230px,21vw,300px);aspect-ratio:9/16}
.w2-card{position:absolute;inset:0;border-radius:38px;overflow:hidden;background:#0d1610;
  border:9px solid #0d1610;box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .6s,filter .6s;transform-origin:50% 85%}
.w2-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0d1610}
.w2-card.is-front{z-index:3;transform:none;opacity:1}
.w2-card.is-b1{z-index:2;transform:translateX(46%) scale(.84) rotate(7deg);opacity:.7;filter:brightness(.6);cursor:pointer}
.w2-card.is-b2{z-index:1;transform:translateX(-46%) scale(.84) rotate(-7deg);opacity:.6;filter:brightness(.55);cursor:pointer}
.w2-card.is-out{z-index:0;transform:scale(.7);opacity:0;pointer-events:none}
.w2-card.is-empty{background:linear-gradient(160deg,#2f4a36,#16261b)}
.w2-notch{position:absolute;top:8px;left:50%;translate:-50% 0;width:34%;height:20px;border-radius:999px;background:#0d1610;z-index:4}
.w2-dur{position:absolute;top:38px;right:12px;z-index:4;font:700 11px/1 var(--sans);padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff}
.w2-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:60px 16px 22px;font:700 15px/1.3 var(--sans);color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent);pointer-events:none}
.w2-sound{position:absolute;top:36px;left:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;cursor:pointer;
  font:700 11.5px/1 var(--sans);color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.w2-sound .s-on,.w2-sound[aria-pressed="true"] .s-off{display:none}
.w2-sound[aria-pressed="true"] .s-on{display:inline}
.w2-card:not(.is-front) .w2-sound,.w2-card:not(.is-front) .w2-dur{opacity:0}
.w2-bar{position:absolute;left:14px;right:14px;bottom:10px;height:3px;border-radius:3px;background:rgba(255,255,255,.25);z-index:4;overflow:hidden}
.w2-bar i{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.w2-hit{position:absolute;inset:0;z-index:2;border:0;background:transparent;cursor:pointer}
.w2-card.is-paused .w2-hit::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;translate:-50% -50%;border-radius:50%;
  background:rgba(49,92,58,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;
  box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* films underneath */
.w2-films{margin-top:clamp(50px,6vw,84px)}
.w2-films h3{margin:0 0 18px;color:#fff;font-size:22px}
.w2-frow{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.w2-film{margin:0}
.w2-fbox{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0d1610;box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.w2-fbox video{width:100%;height:100%;object-fit:cover;display:block}
.w2-fplay{position:absolute;inset:0;border:0;background:rgba(0,0,0,.18);cursor:pointer;display:grid;place-items:center;transition:background .25s}
.w2-fplay span{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:rgba(49,92,58,.92);color:#fff;transition:transform .3s}
.w2-fplay:hover span{transform:scale(1.1)}
.w2-film.is-playing .w2-fplay,.w2-film.is-playing .w2-dur{display:none}
.w2-fbox .w2-dur{top:12px}
.w2-film figcaption{display:flex;flex-direction:column;gap:3px;margin-top:12px}
.w2-film figcaption b{font:700 15.5px/1.3 var(--sans)}
.w2-film figcaption span{font-size:13px;opacity:.62}

@media (max-width:900px){
  .w2-grid{grid-template-columns:1fr}
  .w2-stage{order:-1;min-height:0;padding:10px 0 20px}
  .w2-deck{width:min(62vw,270px)}
  .w2-card.is-b1{transform:translateX(38%) scale(.84) rotate(6deg)}
  .w2-card.is-b2{transform:translateX(-38%) scale(.84) rotate(-6deg)}
  .w2-list{max-width:none}
}
@media (prefers-reduced-motion:reduce){.w2-card{transition:none}.w2-kick::before{animation:none}}

/* ================= Watch: polish and motion (1.0.155) ================= */
.watch{background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--paper) 100%)}
/* big player */
html body .player{border-radius:20px;box-shadow:0 30px 60px -28px rgba(20,40,26,.45),0 0 0 1px rgba(37,37,37,.06)}
html body .player video{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
html body .player:hover video{transform:scale(1.025)}
html body .player .playbtn{background:linear-gradient(0deg,rgba(15,28,19,.55),rgba(15,28,19,.05) 55%)}
html body .player .playbtn span{width:78px;height:78px;position:relative}
html body .player .playbtn span::before,html body .player .playbtn span::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);animation:plring 2.4s cubic-bezier(.2,.7,.3,1) infinite}
html body .player .playbtn span::after{animation-delay:1.2s}
@keyframes plring{from{transform:scale(1);opacity:.9}to{transform:scale(1.75);opacity:0}}
.pl-chip{position:absolute;top:16px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  font:700 11.5px/1 var(--sans);letter-spacing:.04em;color:#fff;background:rgba(15,28,19,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.pl-chip i{width:7px;height:7px;border-radius:50%;background:#E0463A;animation:plrec 1.4s ease-in-out infinite}
@keyframes plrec{50%{opacity:.3}}
.nowplaying h3{transition:color .3s}
/* side list */
.pl-label{display:block;margin:0 0 10px 4px;font:800 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
html body .plrow{border-radius:14px;transition:opacity .7s ease calc(var(--i,0) * 90ms),background .25s,transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
html body .plrow:hover{background:#F6FAF3;transform:translateX(5px)}
html body .plrow[aria-current="true"]{background:#fff;box-shadow:0 12px 28px -16px rgba(36,70,43,.4),0 0 0 1px rgba(49,92,58,.14)}
html body .plthumb{border-radius:10px}
html body .plthumb img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
html body .plrow:hover .plthumb img{transform:scale(1.08)}
/* equaliser on the playing row */
html body .plrow[aria-current="true"] .plthumb::after{content:"";position:absolute;left:8px;bottom:8px;width:14px;height:12px;z-index:2;
  background:linear-gradient(#fff,#fff) 0 100%/3px 40% no-repeat,linear-gradient(#fff,#fff) 5.5px 100%/3px 90% no-repeat,linear-gradient(#fff,#fff) 11px 100%/3px 60% no-repeat;
  animation:pleq .9s ease-in-out infinite alternate}
@keyframes pleq{to{background-size:3px 95%,3px 35%,3px 80%}}
/* reels */
html body .reel{border-radius:18px;box-shadow:0 18px 36px -22px rgba(20,40,26,.55);
  transition:opacity .7s ease calc(var(--i,0) * 110ms),transform .55s cubic-bezier(.2,.8,.3,1),box-shadow .45s}
html body .reel:hover{transform:translateY(-8px);box-shadow:0 30px 50px -24px rgba(20,40,26,.6)}
html body .reel video{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
html body .reel:hover video{transform:scale(1.06)}
html body .reel .playbtn span{position:relative;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
html body .reel:hover .playbtn span{transform:scale(1.15)}
html body .reel .rcap{transition:transform .4s cubic-bezier(.2,.8,.3,1),opacity .3s;font-size:14.5px;padding:40px 14px 16px}
html body .reel:hover .rcap{transform:translateY(-4px)}
.reels-head h3{position:relative;padding-left:14px}
.reels-head h3::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px rgba(49,92,58,.18)}
@media (prefers-reduced-motion:reduce){
  html body .player .playbtn span::before,html body .player .playbtn span::after,.pl-chip i,
  html body .plrow[aria-current="true"] .plthumb::after{animation:none}
  html body .reel,html body .reel video,html body .player video{transition:none}
}

/* ================= reels: thumbnails and motion (1.0.156) =================
   Without a featured image, each reel now shows its own frame as the
   thumbnail. While it loads, a soft shimmer runs across the card. Idle
   thumbnails drift very slowly (a gentle zoom). On a mouse, pointing at a
   reel plays it silently in place. */
html body .reel{background:#1c2a20}
html body .reel:not(.is-ready)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.10) 50%,transparent 70%) 0 0/250% 100%;
  animation:reelshim 1.4s linear infinite}
@keyframes reelshim{from{background-position:120% 0}to{background-position:-120% 0}}
html body .reel video{animation:reeldrift 16s ease-in-out infinite alternate}
html body .reel:nth-child(even) video{animation-delay:-8s}
@keyframes reeldrift{from{transform:scale(1)}to{transform:scale(1.07)}}
html body .reel:hover video,html body .reel.is-preview video{animation-play-state:paused}
html body .reel.is-preview .playbtn span{transform:scale(1.18);background:rgba(49,92,58,.95)}
html body .reel.is-preview .dur{opacity:0}
html body .reel .dur{transition:opacity .25s}
/* little "preview" tag while it plays silently */
html body .reel.is-preview::after{content:"Preview · tap for sound";position:absolute;top:12px;left:12px;z-index:3;
  padding:5px 9px;border-radius:999px;font:700 10.5px/1 var(--sans);color:#fff;background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.plthumb .plvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
@media (prefers-reduced-motion:reduce){html body .reel video,html body .reel:not(.is-ready)::before{animation:none}}
/* room for the hover lift inside the scrolling row */
html body .reels{padding-top:14px;margin-top:-14px}

/* ================= mobile pass (1.0.157) =================
   Checked at 360, 390 and 414 px wide. Tightens the sections that ran far
   too long on a phone and fixes a few small breakages. */
@media (max-width:640px){
  /* Why buy: the fifth item centres under the other four */
  .whygrid .whyitem:last-child:nth-child(odd){grid-column:1 / -1}

  /* Shop by need: two across instead of one giant tile per screen */
  html body .needgrid{grid-template-columns:1fr 1fr;gap:14px 12px}
  html body .need:nth-child(n){margin-top:0}
  html body .need .pic{aspect-ratio:4/5;border-radius:12px}
  html body .need .ninfo{margin:-34px 8px 0;padding:10px 12px;border-radius:10px}
  html body .need .nlabel{font-size:14.5px;line-height:1.25}
  html body .need .nsub{display:none}
  html body .need .ngo{margin-top:6px;font-size:12px}

  /* Favourites: swipe sideways, one and a bit cards on screen */
  html body .favgrid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin-inline:calc(-1 * var(--pad));padding:4px var(--pad) 14px;scroll-padding-inline:var(--pad);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  html body .favgrid::-webkit-scrollbar{display:none}
  html body .favgrid > .fav{scroll-snap-align:start}

  /* Counters: two by two */
  html body .stats{grid-template-columns:1fr 1fr;gap:22px 16px}

  /* Certifications: breathing room between rows */
  html body .ct-row{row-gap:30px}

  /* Footer: link columns side by side */
  html body .ft-grid{grid-template-columns:1fr 1fr;gap:30px 18px}
  html body .ft-grid .ft-brand{grid-column:1 / -1}
}
/* Footer badge: the price inside "Free delivery above" was drawn as a pill
   inside the pill, because the badge rule also hit the price's own spans. */
html body .ft-assure span span,html body .ft-assure span bdi{all:unset;font:inherit;color:inherit}

/* ================= hero photo strip + lightbox (1.0.158) ================= */
.pstrip{background:var(--brand-dk);padding-block:clamp(26px,3vw,40px) 0}
.pstrip-row{list-style:none;margin:0;padding:6px 2px 8px;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(210px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.pstrip-row li{margin:0;scroll-snap-align:start}
.pstrip-tile{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#1d2a20;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.6);outline-offset:3px;transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s}
.pstrip-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pstrip-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 55%);opacity:.7;transition:opacity .3s}
.pstrip-tile:hover{transform:translateY(-4px);box-shadow:0 22px 40px -18px rgba(0,0,0,.7)}
.pstrip-tile:hover img{transform:scale(1.08)}
.pstrip-zoom{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transform:scale(.7);transition:opacity .25s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.pstrip-tile:hover .pstrip-zoom,.pstrip-tile:focus-visible .pstrip-zoom{opacity:1;transform:none}
.pstrip-cap{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;color:#fff;font:600 13px/1.3 var(--sans)}
@media (max-width:640px){ .pstrip-row{grid-auto-columns:62%} .pstrip-zoom{opacity:1;transform:none} }

.lb{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;background:rgba(10,18,12,.92);
  padding:max(20px,env(safe-area-inset-top,0px)) 16px max(20px,env(safe-area-inset-bottom,0px));
  opacity:0;transition:opacity .25s}
.lb.is-open{opacity:1}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(1200px,100%)}
.lb img{max-width:100%;max-height:calc(100svh - 140px);object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:scale(.96);transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.lb.is-open img{transform:none}
.lb figcaption{color:#fff;font:600 14.5px/1.4 var(--sans);text-align:center}
.lb-count{color:rgba(255,255,255,.6);font:600 12px/1 var(--sans);letter-spacing:.06em}
.lb button{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.12);transition:background .2s}
.lb button:hover{background:rgba(255,255,255,.25)}
.lb-close{top:max(16px,env(safe-area-inset-top,0px));right:16px}
.lb-prev{left:16px;top:50%;translate:0 -50%}
.lb-next{right:16px;top:50%;translate:0 -50%}
@media (max-width:640px){ .lb-prev,.lb-next{top:auto;bottom:max(18px,env(safe-area-inset-bottom,0px));translate:none} }

/* ================= photo box in the video's corner (1.0.160) =================
   The video stays full width. A small glass panel of up to four thumbnails
   sits in its bottom-left (or bottom-right) corner; the sound button moves to
   the opposite corner. Clicking a thumbnail opens the viewer. */
.vhero-pbox{position:absolute;bottom:clamp(12px,2vw,28px);z-index:3;list-style:none;margin:0;
  display:flex;gap:8px;padding:8px;border-radius:18px;
  background:rgba(15,28,19,.42);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);animation:pboxin .8s .4s cubic-bezier(.2,.8,.3,1) both}
.vhero-pbox.is-left{left:clamp(12px,2vw,28px)}
.vhero-pbox.is-right{right:clamp(12px,2vw,28px)}
.vhero-pbox li{margin:0}
.vhero-pbox li[hidden]{display:none}
.pbox-tile{position:relative;display:block;width:clamp(64px,7.4vw,112px);aspect-ratio:4/3;border-radius:11px;overflow:hidden;
  background:#1d2a20;outline-offset:2px;transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
.pbox-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pbox-tile:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 12px 24px -10px rgba(0,0,0,.7)}
.pbox-tile:hover img{transform:scale(1.1)}
.pbox-tile .pmore{font-size:clamp(15px,1.5vw,20px)}
@keyframes pboxin{from{opacity:0;transform:translateY(16px)}}
/* keep the sound button in the other corner */
.vhero-frame:has(.vhero-pbox.is-right) .vhero-sound{right:auto;left:clamp(12px,2vw,28px)}
@media (max-width:640px){
  .vhero-pbox{gap:5px;padding:5px;border-radius:12px}
  .pbox-tile{width:52px;border-radius:8px}
  .vhero-pbox li:nth-child(4){display:none}
  .vhero-sound .l-off,.vhero-sound .l-on{display:none !important}
  .vhero-sound{padding:9px}
}
@media (prefers-reduced-motion:reduce){.vhero-pbox{animation:none}}
.pmore{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(15,28,19,.6);
  color:#fff;font:800 20px/1 var(--sans);letter-spacing:-.02em;transition:background .3s}
.pbox-tile:hover .pmore{background:rgba(15,28,19,.4)}

/* ===== 1.0.162 · About page pull quotes, rotating ===== */
.a2quote .a2q-track{display:grid;position:relative}
.a2quote.a2q-many{overflow:hidden;overflow-x:clip;overflow-y:visible}
.a2quote .a2q-slide{grid-area:1/1;margin:0;align-self:center}
.a2quote.a2q-many .a2q-slide{opacity:0;visibility:hidden;transform:translateX(34px);
  transition:opacity .55s ease,transform .75s cubic-bezier(.2,.7,.2,1),visibility 0s linear .75s}
.a2quote.a2q-many .a2q-slide.is-out{transform:translateX(-34px)}
.a2quote.a2q-many .a2q-slide.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .6s ease .12s,transform .8s cubic-bezier(.2,.7,.2,1) .12s,visibility 0s}
.a2quote.a2q-many .a2q-track{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.a2quote.a2q-many .a2q-track:active{cursor:grabbing}
.a2q-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:clamp(26px,3vw,38px)}
.a2q-dots{display:flex;align-items:center;gap:2px}
.a2q-dot{appearance:none;border:0;background:none;padding:0;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;color:inherit;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.a2q-dot span{display:block;position:relative;overflow:hidden;width:8px;height:8px;border-radius:99px;
  background:rgba(238,245,233,.28);transition:width .35s cubic-bezier(.2,.7,.2,1),background .3s}
.a2q-dot:hover span{background:rgba(238,245,233,.5)}
.a2q-dot.is-on{width:46px}
.a2q-dot.is-on span{width:38px;background:rgba(238,245,233,.22)}
.a2q-dot i{position:absolute;inset:0;border-radius:inherit;background:var(--paper);transform-origin:left center;transform:scaleX(0)}
.a2q-dot.is-on i{transform:scaleX(1)}
.a2quote.is-live .a2q-dot.is-on i{transform:scaleX(0);animation:a2qfill var(--a2q-ms,6500ms) linear forwards}
.a2quote.is-live.is-paused .a2q-dot.is-on i{animation-play-state:paused}
@keyframes a2qfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.a2q-arrow{appearance:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:transparent;color:var(--paper);border:1px solid rgba(238,245,233,.26);
  transition:background .25s,border-color .25s,transform .25s}
.a2q-arrow:hover{background:rgba(238,245,233,.1);border-color:rgba(238,245,233,.55)}
.a2q-arrow:active{transform:scale(.94)}
.a2q-dot:focus-visible,.a2q-arrow:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
@media (max-width:600px){
  .a2q-arrow{width:34px;height:34px}
  .a2quote.a2q-many .a2q-slide{transform:translateX(22px)}
  .a2quote.a2q-many .a2q-slide.is-out{transform:translateX(-22px)}
  .a2quote.a2q-many .a2q-slide.is-on{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .a2quote.a2q-many .a2q-slide,.a2quote.a2q-many .a2q-slide.is-on,.a2quote.a2q-many .a2q-slide.is-out{transform:none;transition:opacity .2s linear,visibility 0s}
  .a2quote.is-live .a2q-dot.is-on i{animation:none;transform:scaleX(1)}
}