/*
 * Shiru Maina Creations - theme styles
 * Design tokens live in :root. Change them here and everything follows.
 */

/* ============================================================
   SHIRU MAINA CREATIONS
   Hero sits in a padded shell. Everything below runs full width
   in the same visual language. One typeface, green gradients.
   ============================================================ */
:root{
  --g-950:#0E2415;
  --g-900:#12301C;
  --g-700:#255B39;
  --g-500:#3F8B54;
  --g-400:#69AE79;
  --lime-400:#C6ED77;
  --lime-500:#A5DE55;
  --lime-600:#87C93F;
  --mint-50:#F4F9EF;
  --mint-100:#EAF3E4;
  --mint-200:#DDEBD4;
  --mint-300:#CBE0BE;

  --ink:#101A12;
  --muted:#63756A;
  --white:#FFFFFF;
  --line:rgba(16,26,18,.08);

  --font:'General Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-shell:32px;
  --r-card:24px;
  --r-in:18px;
  --r-pill:999px;

  --wrap:1260px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(120% 70% at 8% 0%,#CFE3CC 0%,transparent 52%),
    linear-gradient(180deg,#C7DEC7 0%,#DCE9D2 16%,#EFF4E7 34%,#F7FAF2 60%,#F7FAF2 100%);
  font-family:var(--font);color:var(--ink);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.08}
button,input{font-family:inherit}
button{border:0;background:none;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2.5px solid var(--g-700);outline-offset:3px;border-radius:8px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ============================================================
   SHELL — hero section only
   ============================================================ */
.shell-outer{padding:20px}
.shell{
  max-width:var(--wrap);margin:0 auto;padding:18px;
  border-radius:var(--r-shell);
  background:
    radial-gradient(90% 70% at 0% 0%,#EDF4EA 0%,transparent 60%),
    linear-gradient(158deg,#EFF5EB 0%,#F5F9EC 48%,#E9F1DC 100%);
  box-shadow:0 40px 90px rgba(14,36,21,.16),0 2px 6px rgba(14,36,21,.05);
}

/* ---------------- Top bar ---------------- */
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.logo-slot{
  background:var(--white);border-radius:var(--r-pill);
  padding:9px 22px;flex:none;display:flex;align-items:center;
  box-shadow:0 1px 2px rgba(14,36,21,.05);
}
.logo-slot img{height:34px;width:auto}

.search{
  flex:1;display:flex;align-items:center;gap:10px;
  background:var(--white);border-radius:var(--r-pill);
  padding:7px 7px 7px 24px;
  box-shadow:0 1px 2px rgba(14,36,21,.05);
}
.search input{flex:1;border:0;outline:none;background:none;font-size:14.5px;color:var(--ink);padding:9px 0}
.search input::placeholder{color:#94A399}
.search .go{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--g-950);color:#fff;display:grid;place-items:center;font-size:16px;
  transition:transform .18s ease;
}
.search .go:hover{transform:rotate(90deg)}

.tb-actions{display:flex;align-items:center;gap:10px;flex:none}
.circ{
  width:48px;height:48px;border-radius:50%;
  background:var(--white);display:grid;place-items:center;font-size:17px;
  box-shadow:0 1px 2px rgba(14,36,21,.05);
  transition:transform .18s ease;position:relative;
}
.circ:hover{transform:translateY(-2px)}
.circ .n{
  position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--g-700);color:#fff;
  font-size:10.5px;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--mint-50);
}
.who{
  display:flex;align-items:center;gap:11px;
  background:var(--white);border-radius:var(--r-pill);
  padding:6px 20px 6px 7px;font-size:14px;font-weight:500;
  box-shadow:0 1px 2px rgba(14,36,21,.05);
}
.who img{width:36px;height:36px;border-radius:50%;object-fit:cover}

/* ---------------- Hero grid ---------------- */
/* Both columns stretch to the taller of the two; the last card in each
   absorbs whatever height is left over, so nothing ends short. */
.grid{display:grid;grid-template-columns:1fr 316px;gap:16px;align-items:stretch}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.col--side .tall{flex:1 1 auto;min-height:250px}
.col .hero{flex:0 0 auto}
.col .trio{flex:1 1 auto}
.card{
  background:var(--white);border-radius:var(--r-card);
  box-shadow:0 1px 2px rgba(14,36,21,.04);
  position:relative;overflow:hidden;
}

.hero{
  display:grid;grid-template-columns:1.02fr .98fr;gap:20px;
  padding:34px 34px 30px;min-height:466px;
  background:
    radial-gradient(80% 70% at 92% 34%,#EFF7E9 0%,transparent 62%),
    linear-gradient(152deg,#FFFFFF 0%,#FCFDFA 55%,#F3F8EC 100%);
}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:8px 17px;
  font-size:12.5px;font-weight:500;
  box-shadow:0 1px 2px rgba(14,36,21,.04);
}
.chip .sq{width:13px;height:13px;border-radius:4px;background:linear-gradient(140deg,var(--lime-500),var(--g-500));flex:none}

.hero h1{font-size:clamp(38px,4.6vw,58px);font-weight:600;letter-spacing:-.042em;line-height:1.02;margin:22px 0 0}
.hero h1 .g{
  background:linear-gradient(96deg,var(--g-700) 0%,var(--lime-600) 55%,var(--g-500) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.feature{display:flex;align-items:center;gap:16px;margin:30px 0 0}
.num{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1.5px #C3CFC4;flex:none}
.dash{flex:none;width:104px;height:12px;position:relative}
.dash::before{
  content:'';position:absolute;left:0;top:50%;width:88px;height:1px;
  background:repeating-linear-gradient(to right,#C3CFC4 0 4px,transparent 4px 8px);
}
.dash::after{
  content:'';position:absolute;right:6px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:6px;height:6px;border-top:1.4px solid #A9B8AB;border-right:1.4px solid #A9B8AB;
}
.feature h3{font-size:17.5px;font-weight:600;letter-spacing:-.02em}
.feature p{font-size:13px;color:var(--muted);margin:5px 0 0;max-width:30ch;line-height:1.45}

.cta{
  display:inline-flex;align-items:center;gap:14px;
  background:linear-gradient(98deg,var(--lime-400) 0%,var(--lime-600) 100%);
  color:var(--g-950);border-radius:var(--r-pill);padding:8px 8px 8px 26px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;margin:32px 0 0;
  box-shadow:0 10px 26px rgba(135,201,63,.38);
  transition:transform .18s ease,box-shadow .18s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(135,201,63,.46)}
.cta .arw{width:42px;height:42px;border-radius:50%;flex:none;background:var(--g-950);color:#fff;display:grid;place-items:center;font-size:16px}
.cta--dark{background:var(--g-950);color:#fff;box-shadow:0 10px 26px rgba(14,36,21,.28)}
.cta--dark .arw{background:var(--lime-500);color:var(--g-950)}

.follow{display:flex;align-items:center;gap:12px;margin:34px 0 0}
.follow span{font-size:12.5px;color:var(--muted)}
.follow a{
  width:34px;height:34px;border-radius:50%;background:var(--mint-100);
  display:grid;place-items:center;font-size:10.5px;font-weight:600;color:var(--g-700);
  transition:background .18s ease,transform .18s ease;
}
.follow a:hover{background:var(--lime-400);transform:translateY(-2px)}
.follow a svg{width:16px;height:16px;display:block}
.socials a svg{width:17px;height:17px;display:block}

.stage{position:relative;display:grid;place-items:center;min-height:330px}
.stage-img{
  width:88%;max-width:400px;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;
  transition:opacity .32s ease,transform .7s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 26px 40px rgba(14,36,21,.18));
}
.stage.swapping .stage-img{opacity:0}
.stage:hover .stage-img{transform:scale(1.03)}
.dot{position:absolute;border-radius:50%;pointer-events:none}
.d1{width:19px;height:19px;background:#B9C9BC;top:14%;left:6%}
.d2{width:11px;height:11px;background:#CFDCCE;top:8%;left:26%}
.d3{width:14px;height:14px;background:var(--g-700);top:30%;left:20%}
.d4{width:10px;height:10px;background:var(--g-500);top:46%;right:12%}
.d5{width:15px;height:15px;background:var(--lime-500);bottom:22%;left:8%}
.d6{width:9px;height:9px;background:#C3CFC4;bottom:14%;right:22%}
.arc{position:absolute;left:6%;right:6%;bottom:2%;height:88px;pointer-events:none;opacity:.5}
.stage-btn{
  position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  width:40px;height:40px;border-radius:50%;background:var(--white);
  border:1px solid var(--line);display:grid;place-items:center;font-size:13px;color:var(--muted);
  box-shadow:0 6px 16px rgba(14,36,21,.10);
}

/* ---------------- Hero trio + side ---------------- */
.trio{display:grid;grid-template-columns:1fr .82fr 1.34fr;gap:16px}
.more{padding:22px;display:flex;flex-direction:column}
.more-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.more h4{font-size:17px;font-weight:600;letter-spacing:-.025em}
.more p{font-size:12.5px;color:var(--muted);margin:5px 0 0}
.heart{
  width:36px;height:36px;border-radius:50%;background:var(--mint-100);
  display:grid;place-items:center;font-size:14px;color:var(--g-700);flex:none;
  transition:transform .18s ease,background .18s ease;
}
.heart:hover{transform:scale(1.08);background:var(--lime-400)}
/* Compact product list — fills the card and is genuinely useful */
.mini-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1 1 auto}
.mini-list li{display:flex;align-items:center;gap:11px}
.mini-img{width:46px;height:46px;border-radius:13px;overflow:hidden;background:var(--mint-100);flex:none}
.mini-img img{width:100%;height:100%;object-fit:cover}
.mini-txt{flex:1;min-width:0}
.mini-txt b{display:block;font-size:13px;font-weight:600;letter-spacing:-.022em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-txt em{font-style:normal;font-size:11.5px;color:var(--muted)}
.mini-price{font-size:12.5px;font-weight:600;color:var(--g-700);flex:none}
.mini-all{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;background:var(--mint-100);border-radius:var(--r-pill);
  padding:8px 8px 8px 18px;font-size:12.5px;font-weight:600;
  transition:background .18s ease;
}
.mini-all:hover{background:var(--lime-400)}
.mini-all span{width:30px;height:30px;border-radius:50%;background:var(--g-950);color:#fff;display:grid;place-items:center;font-size:12px;flex:none}

.stat{padding:22px 18px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;text-align:center}
.stat .orb{margin:2px 0}
.stat-note{font-size:11.5px;color:var(--muted);line-height:1.35;max-width:20ch}
.faces{display:flex}
.faces img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2.5px solid var(--white);margin-left:-11px}
.faces img:first-child{margin-left:0}
.orb{
  width:112px;height:112px;border-radius:50%;
  background:linear-gradient(150deg,var(--g-500),var(--g-700));color:#fff;
  display:grid;place-items:center;align-content:center;
  box-shadow:0 12px 26px rgba(37,91,57,.32);
}
.orb b{display:block;font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1}
.orb span{display:block;font-size:11px;opacity:.82;margin-top:3px}
.rating{display:inline-flex;align-items:center;gap:6px;background:var(--mint-100);border-radius:var(--r-pill);padding:7px 15px;font-size:12px;font-weight:500}
.rating i{font-style:normal;color:#E8A33D}

/* Split card: copy left, image bleeding to the card edge on the right.
   Height is held by min-height so the row keeps its original proportion. */
.popular{padding:0;display:grid;grid-template-columns:1fr 44%;overflow:hidden;min-height:368px}
.pop-copy{padding:22px;display:flex;flex-direction:column}
.pop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pill-sm{display:inline-flex;align-items:center;gap:6px;background:var(--mint-100);border-radius:var(--r-pill);padding:6px 14px;font-size:11.5px;font-weight:500}
.pill-sm i{font-style:normal;color:#D5566E}
.corner{
  width:36px;height:36px;border-radius:50%;background:var(--white);
  border:1px solid var(--line);display:grid;place-items:center;font-size:13px;flex:none;
  transition:background .18s ease,color .18s ease;
}
.corner:hover{background:var(--g-950);color:#fff}
.popular h4{font-size:21px;font-weight:600;letter-spacing:-.032em;margin:15px 0 0;max-width:14ch;line-height:1.14}
.pop-copy p{font-size:12.5px;color:var(--muted);margin:11px 0 0;max-width:30ch;line-height:1.5}
.pop-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pop-thumbs{display:flex;flex:none}
.pop-thumbs img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2.5px solid var(--white);margin-left:-12px}
.pop-thumbs img:first-child{margin-left:0}
.pop-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--g-950);color:#fff;border-radius:var(--r-pill);
  padding:7px 7px 7px 18px;font-size:12.5px;font-weight:600;
  transition:transform .18s ease;
}
.pop-cta:hover{transform:translateY(-2px)}
.pop-cta span{width:28px;height:28px;border-radius:50%;background:var(--lime-500);color:var(--g-950);display:grid;place-items:center;font-size:11px;flex:none}

.pop-media{position:relative;background:var(--mint-100)}
.pop-media img{width:100%;height:100%;object-fit:cover}
.pop-media .corner{position:absolute;top:14px;right:14px;z-index:2}
.pop-media .rate{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(255,255,255,.94);border-radius:var(--r-pill);
  padding:5px 12px;font-size:11px;font-weight:600;
  display:flex;align-items:center;gap:5px;
}
.pop-media .rate i{font-style:normal;color:#E8A33D}

.colours{padding:20px;flex:0 0 auto}
.colours h4{font-size:16.5px;font-weight:600;letter-spacing:-.025em}
.colour-row{display:flex;gap:10px;margin-top:16px}
.cw{
  width:44px;height:44px;border-radius:50%;flex:1;
  background-size:cover;background-position:center;
  border:2.5px solid transparent;box-shadow:0 0 0 1px rgba(16,26,18,.10);
  transition:transform .18s ease,border-color .18s ease;
}
.cw:hover{transform:scale(1.09)}
.cw[aria-pressed="true"]{border-color:var(--g-700);box-shadow:0 0 0 1px var(--g-700)}

/* Same treatment: image bleeds to the card edge, copy column filled
   top to bottom with a chip, title and price. */
.newgen{padding:0;display:grid;grid-template-columns:1fr 46%;min-height:180px;overflow:hidden;flex:0 0 auto}
.newgen-copy{padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.newgen h4{font-size:19px;font-weight:600;letter-spacing:-.03em;line-height:1.16;margin-top:11px}
.newgen-price{font-size:14.5px;font-weight:600;color:var(--g-700);letter-spacing:-.02em}
.newgen-price em{display:block;font-style:normal;font-size:11px;font-weight:400;color:var(--muted);margin-top:2px}
.newgen-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.newgen-shot{position:relative;background:var(--mint-100)}
.newgen-shot img{width:100%;height:100%;object-fit:cover}

.tall{position:relative;min-height:326px}
.tall img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tall .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,36,21,.86) 0%,rgba(14,36,21,.28) 46%,transparent 74%)}
.tall .corner{position:absolute;top:14px;right:14px;z-index:2}
.tall .cap{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;color:#fff}
.tall .cap b{display:block;font-size:19px;font-weight:600;letter-spacing:-.028em;line-height:1.2}
.tall .cap span{display:block;font-size:12.5px;opacity:.78;margin-top:5px}

/* ============================================================
   FULL-WIDTH SECTIONS
   ============================================================ */
.band{padding:78px 0}
.band--white{background:var(--white)}
.band--mint{background:var(--mint-100)}

.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.band-head h2{font-size:clamp(28px,3.3vw,42px);font-weight:600;letter-spacing:-.038em;margin-top:16px}
.band-head p{font-size:14.5px;color:var(--muted);margin:12px 0 0;max-width:54ch}
.link{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  font-size:14px;font-weight:500;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:10px 10px 10px 20px;
  transition:transform .18s ease;
}
.band--white .link{background:var(--mint-100);border-color:transparent}
.link:hover{transform:translateY(-2px)}
.link .arw{width:30px;height:30px;border-radius:50%;background:var(--g-950);color:#fff;display:grid;place-items:center;font-size:12px}

/* ---------- Categories ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:198px;gap:16px}
.cat{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--mint-200);display:block;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease}
.cat:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(14,36,21,.16)}
.cat--feature{grid-column:span 2;grid-row:span 2}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center 26%)}
.cat .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,36,21,.86) 0%,rgba(14,36,21,.24) 48%,transparent 76%)}
.cat .corner{position:absolute;top:14px;right:14px;z-index:2;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.cat:hover .corner{opacity:1;transform:translateY(0)}
.cat .cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}
.cat .cap b{display:block;font-size:19px;font-weight:600;letter-spacing:-.03em}
.cat--feature .cap b{font-size:30px}
.cat .cap span{display:block;font-size:12.5px;opacity:.76;margin-top:4px}

/* ---------- Products ---------- */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prod{background:var(--white);border-radius:var(--r-card);padding:12px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(14,36,21,.04);transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease}
.band--white .prod{background:var(--mint-50)}
.prod:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(14,36,21,.12)}
.shot{position:relative;border-radius:var(--r-in);overflow:hidden;aspect-ratio:1;background:var(--mint-100);display:grid;place-items:center}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.shot--contain img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.prod:hover .shot img{transform:scale(1.05)}
.shot .heart{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.94);z-index:2}
.shot .flag{position:absolute;top:11px;left:11px;z-index:2;background:var(--g-950);color:#fff;border-radius:var(--r-pill);padding:5px 12px;font-size:10.5px;font-weight:600;letter-spacing:.04em}
.prod-meta{padding:15px 7px 0;flex:1}
.prod-cat{font-size:11.5px;color:var(--muted);font-weight:500}
.prod-name{font-size:17px;font-weight:600;letter-spacing:-.028em;margin-top:4px;line-height:1.2}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 7px 4px}
.prod-sub{font-size:11.5px;color:var(--muted)}
.price{
  background:linear-gradient(98deg,var(--lime-400),var(--lime-600));color:var(--g-950);
  border-radius:var(--r-pill);padding:10px 17px;font-size:13.5px;font-weight:600;flex:none;
  box-shadow:0 6px 16px rgba(135,201,63,.32);transition:transform .18s ease;
}
.price:hover{transform:translateY(-2px)}

/* ---------- Why satin (numbered) ---------- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why-item{background:var(--white);border-radius:var(--r-card);padding:28px;box-shadow:0 1px 2px rgba(14,36,21,.04)}
.band--white .why-item{background:var(--mint-50)}
.why-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.why-item h3{font-size:19px;font-weight:600;letter-spacing:-.028em}
.why-item p{font-size:13.5px;color:var(--muted);margin:9px 0 0;line-height:1.55}

/* ---------- Promos ---------- */
.promos{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.promo{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:340px;display:flex;align-items:flex-end;padding:32px}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promo .veil{position:absolute;inset:0;background:linear-gradient(94deg,rgba(14,36,21,.90) 0%,rgba(14,36,21,.42) 58%,rgba(14,36,21,.16) 100%)}
.promo-body{position:relative;z-index:2;color:#fff;max-width:34ch}
.promo-body .chip{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none}
.promo-body h3{font-size:clamp(24px,2.7vw,34px);font-weight:600;letter-spacing:-.035em;margin:16px 0 0}
.promo-body p{font-size:14px;opacity:.82;margin:10px 0 22px}

/* ---------- Journal ---------- */
.journal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{background:var(--white);border-radius:var(--r-card);padding:12px;display:block;box-shadow:0 1px 2px rgba(14,36,21,.04);transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease}
.band--white .post{background:var(--mint-50)}
.post:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(14,36,21,.12)}
.post .band-img{border-radius:var(--r-in);overflow:hidden;aspect-ratio:16/10;background:var(--mint-100)}
.post .band-img img{width:100%;height:100%;object-fit:cover;object-position:center 26%}
.post-meta{display:inline-flex;align-items:center;gap:6px;background:var(--mint-100);border-radius:var(--r-pill);padding:5px 13px;font-size:11px;font-weight:500;margin:16px 7px 0}
.band--white .post-meta{background:var(--white)}
.post h3{font-size:18.5px;font-weight:600;letter-spacing:-.03em;line-height:1.24;margin:12px 7px 0}
.post p{font-size:13px;color:var(--muted);margin:9px 7px 10px;line-height:1.5}

/* ---------- Newsletter ---------- */
.news-card{
  border-radius:var(--r-shell);padding:48px;
  background:
    radial-gradient(70% 90% at 88% 10%,rgba(198,237,119,.22) 0%,transparent 60%),
    linear-gradient(140deg,var(--g-700) 0%,var(--g-900) 62%,var(--g-950) 100%);
  color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;
  box-shadow:0 30px 70px rgba(14,36,21,.24);
}
.news-card .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.news-card h2{font-size:clamp(28px,3.2vw,40px);font-weight:600;letter-spacing:-.038em;margin:18px 0 0}
.news-card h2 .g{
  background:linear-gradient(96deg,var(--lime-400),var(--lime-600));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.news-card p{font-size:14px;opacity:.76;margin:12px 0 0;max-width:44ch}
.news-form{display:flex;gap:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);padding:7px 7px 7px 24px}
.news-form input{flex:1;background:none;border:0;outline:none;color:#fff;font-size:14.5px;padding:11px 0}
.news-form input::placeholder{color:rgba(255,255,255,.5)}
.news-form button{
  background:linear-gradient(98deg,var(--lime-400),var(--lime-600));color:var(--g-950);
  border-radius:var(--r-pill);padding:12px 24px;font-size:14px;font-weight:600;flex:none;
}
.news-note{font-size:12.5px;opacity:.6;margin:14px 0 0;padding-left:24px}

/* ---------- Trust ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.trust div{background:var(--white);border-radius:var(--r-in);padding:20px 22px;box-shadow:0 1px 2px rgba(14,36,21,.04)}
.trust b{display:block;font-size:14px;font-weight:600;letter-spacing:-.02em}
.trust span{font-size:12.5px;color:var(--muted)}
.trust .pay-slot{display:block;margin-bottom:10px}
.trust .pay-slot img,.trust .pay-slot svg{height:20px;width:auto}
.pay-slot .pay-fallback{display:none}
.pay-slot.is-fallback .pay-fallback{display:block}
.pay-slot--chip img,.pay-slot--chip svg{height:16px;width:auto}

/* ---------- Footer ---------- */
.footer{background:var(--g-950);color:rgba(255,255,255,.62);padding:70px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:48px}
.footer h4{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 18px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.footer a{font-size:14px;transition:color .18s ease}
.footer a:hover{color:#fff}
.footer-brand p{font-size:14px;margin:18px 0 22px;max-width:34ch;line-height:1.55}
.footer .logo-slot{display:inline-flex;padding:9px 20px}
.socials{display:flex;gap:9px}
.socials a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff}
.socials a:hover{background:var(--lime-500);color:var(--g-950)}
.pay{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.pay span{background:#fff;border-radius:8px;padding:7px 11px;display:flex;align-items:center}
.pay svg{height:16px;width:auto}
.footer-base{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .grid{grid-template-columns:1fr}
  .col--side{display:grid;grid-template-columns:repeat(3,1fr)}
  .trio{grid-template-columns:1fr 1fr}
  .popular{grid-column:span 2}
  .products{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .cat--feature{grid-column:span 2;grid-row:span 1}
  .why{grid-template-columns:1fr}
  .journal{grid-template-columns:1fr}
  .promos{grid-template-columns:1fr}
  .news-card{grid-template-columns:1fr;gap:26px;padding:34px}
  .trust{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .popular{grid-template-columns:1fr;min-height:0}
  .pop-media{min-height:210px}
  .newgen{grid-template-columns:1fr}
  .newgen-shot{min-height:170px}
  .shell-outer{padding:10px}
  .shell{padding:12px;border-radius:24px}
  .hero{grid-template-columns:1fr;padding:26px 22px;min-height:0}
  .stage{min-height:280px;order:-1}
  .col--side{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr}
  .popular{grid-column:span 1}
  .search{display:none}
  .who span{display:none}
  .band{padding:54px 0}
  .cats{grid-template-columns:1fr;grid-auto-rows:170px}
  .cat--feature{grid-column:span 1}
  .products{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}


/* ============================================================
   Live catalogue: cards became links, so a few elements need
   their block behaviour restoring.
   ============================================================ */
.shot-link{position:absolute;inset:0;display:block}
.shot-link img{width:100%;height:100%}
.shot--contain .shot-link{display:grid;place-items:center}
.shot--contain .shot-link img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.prod-meta{display:block;text-decoration:none;color:inherit}
a.price{display:inline-block;text-decoration:none;line-height:1.2}
.cat .corner{display:grid}
.mini-img{display:block}
.mini-txt{display:block;text-decoration:none;color:inherit}
.prod .price del{opacity:.55;font-weight:500;margin-right:5px}
.prod .price ins{text-decoration:none}
.prod-name{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ============================================================
   SHOP + PRODUCT PAGES
   Same tokens, same card language as the homepage.
   ============================================================ */

.crumbs{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);margin-bottom:20px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;opacity:.45}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:clamp(27px,3.2vw,40px);font-weight:600;letter-spacing:-.038em}
.page-head h1 em{font-style:normal;color:var(--muted);font-weight:400;font-size:.52em;margin-left:10px;letter-spacing:-.02em}
.page-head p{font-size:14px;color:var(--muted);margin:10px 0 0;max-width:56ch}

/* ---------- Filter bar ---------- */
.filters{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--white);border-radius:var(--r-pill);
  padding:9px 10px;box-shadow:0 1px 2px rgba(14,36,21,.04);margin-bottom:18px;
}
.fpill{
  display:inline-flex;align-items:center;gap:8px;padding:10px 17px;
  border-radius:var(--r-pill);background:var(--mint-100);
  font-size:13px;font-weight:500;transition:background .16s ease;
}
.fpill:hover{background:var(--mint-200)}
.fpill i{font-style:normal;font-size:8px;opacity:.55}
.fpill[aria-pressed="true"]{background:var(--g-950);color:#fff}
.fpill--ghost{background:transparent;border:1px solid var(--line)}
.filters .gap{flex:1 1 auto}
.fcount{font-size:12.5px;color:var(--muted);padding:0 8px}

/* ---------- Shop promo strip ---------- */
.shop-promo{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  min-height:186px;display:flex;align-items:center;padding:30px 34px;margin-bottom:20px;
  background:linear-gradient(100deg,var(--g-700) 0%,var(--g-900) 58%,var(--g-950) 100%);
  color:#fff;
}
.shop-promo .art{position:absolute;right:0;top:0;bottom:0;width:42%;overflow:hidden}
.shop-promo .art img{width:100%;height:100%;object-fit:cover;opacity:.9}
.shop-promo .art::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--g-900),transparent 62%)}
.shop-promo .body{position:relative;z-index:2;max-width:44ch}
.shop-promo .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.shop-promo h3{font-size:clamp(22px,2.5vw,30px);font-weight:600;letter-spacing:-.035em;margin:14px 0 0}
.shop-promo p{font-size:13.5px;opacity:.76;margin:9px 0 0;max-width:38ch}

/* ---------- Product card ---------- */
.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pc{
  position:relative;border-radius:20px;overflow:hidden;display:block;
  aspect-ratio:3/4.25;background:var(--mint-100);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease;
}
.pc:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(14,36,21,.16)}
.pc-media{position:absolute;inset:0}
.pc-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center 22%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pc:hover .pc-media img{transform:scale(1.04)}
.pc--contain .pc-media{display:grid;place-items:start center;padding:6% 10% 0}
.pc--contain .pc-media img{width:100%;height:66%;object-fit:contain;mix-blend-mode:multiply}
.pc-badge{
  position:absolute;top:12px;left:12px;z-index:3;
  background:#fff;border-radius:var(--r-pill);padding:6px 13px;
  font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--g-700);
  box-shadow:0 2px 8px rgba(14,36,21,.10);
}
.pc-heart{
  position:absolute;top:10px;right:10px;z-index:3;
  width:35px;height:35px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;font-size:14px;color:var(--muted);
  transition:transform .18s ease,color .18s ease;
}
.pc-heart:hover{transform:scale(1.1)}
.pc-heart[aria-pressed="true"]{color:var(--g-700)}
.pc-info{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
  background:#fff;border-radius:15px;padding:13px 14px 12px;
  box-shadow:0 8px 22px rgba(14,36,21,.12);
}
.pc-name{
  font-size:13.5px;font-weight:600;letter-spacing:-.022em;line-height:1.32;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
}
.pc-rate{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);margin-top:5px}
.pc-rate i{font-style:normal;color:#E8A33D}
.pc-rate .none{opacity:.7}
.pc-price{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.pc-price b{font-size:14.5px;font-weight:600;letter-spacing:-.02em}
.pc-price del{font-size:12px;color:var(--muted)}
.pc-cart{height:0;opacity:0;overflow:hidden;transition:height .22s ease,opacity .18s ease,margin .22s ease}
.pc:hover .pc-cart,.pc:focus-within .pc-cart{height:40px;opacity:1;margin-top:11px}
.pc-cart span{
  display:flex;align-items:center;justify-content:center;gap:8px;height:40px;
  border-radius:var(--r-pill);
  background:linear-gradient(98deg,var(--lime-400),var(--lime-600));
  color:var(--g-950);font-size:12.5px;font-weight:600;
}

/* ---------- Pagination ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:34px}
.pager a{
  min-width:44px;height:44px;padding:0 14px;border-radius:var(--r-pill);
  background:#fff;display:grid;place-items:center;font-size:13.5px;font-weight:600;
  box-shadow:0 1px 2px rgba(14,36,21,.04);transition:transform .18s ease;
}
.pager a:hover{transform:translateY(-2px)}
.pager a.on{background:var(--g-950);color:#fff}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}

.gallery{background:#fff;border-radius:var(--r-card);padding:16px;box-shadow:0 1px 2px rgba(14,36,21,.04)}
.gal-main{
  position:relative;border-radius:var(--r-in);overflow:hidden;aspect-ratio:1;
  background:var(--mint-100);display:grid;place-items:center;
}
.gal-main img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .3s ease}
.gal-main.swapping img{opacity:0}
.gal-flag{
  position:absolute;top:14px;left:14px;z-index:2;background:#fff;border-radius:var(--r-pill);
  padding:6px 14px;font-size:10.5px;font-weight:600;color:var(--g-700);
}
.gal-zoom{
  position:absolute;bottom:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;font-size:14px;
  box-shadow:0 4px 14px rgba(14,36,21,.12);
}
.gal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:12px}
.gal-thumbs button{
  position:relative;border-radius:13px;overflow:hidden;aspect-ratio:1;
  background:var(--mint-100);border:2px solid transparent;padding:0;
  transition:border-color .18s ease;
}
.gal-thumbs button img{width:100%;height:100%;object-fit:cover}
.gal-thumbs button[aria-pressed="true"]{border-color:var(--g-700)}
.gal-more{
  position:absolute;inset:0;background:rgba(14,36,21,.66);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:600;
}

.pdp-info h1{font-size:clamp(26px,3.1vw,38px);font-weight:600;letter-spacing:-.038em;line-height:1.08}
.pdp-lede{font-size:14.5px;color:var(--muted);margin:14px 0 0;line-height:1.55;max-width:46ch}
.pdp-more{font-size:13.5px;font-weight:600;color:var(--g-700);margin-top:8px;display:inline-block}
.pdp-meta{display:flex;align-items:center;gap:16px;margin:18px 0 0;font-size:13px;flex-wrap:wrap;color:var(--muted)}
.pdp-meta b{color:var(--ink);font-weight:600}
.pdp-meta i{font-style:normal;color:#E8A33D}
.pdp-meta .sep{opacity:.35}
.pdp-price{display:flex;align-items:baseline;gap:12px;margin:18px 0 0}
.pdp-price b{font-size:clamp(28px,3.4vw,38px);font-weight:600;letter-spacing:-.035em}
.pdp-price del{font-size:16px;color:#BE4A38}
.pdp-price .save{
  background:var(--mint-100);border-radius:var(--r-pill);padding:5px 12px;
  font-size:11.5px;font-weight:600;color:var(--g-700);
}

.opt{margin-top:26px}
.opt-label{font-size:13px;font-weight:600;margin-bottom:11px}
.opt-label em{font-style:normal;color:var(--muted);font-weight:400}
.sw-row{display:flex;gap:9px;flex-wrap:wrap}
.sw-sq{
  width:48px;height:48px;border-radius:13px;
  background-size:cover;background-position:center;
  border:2.5px solid transparent;box-shadow:0 0 0 1px rgba(16,26,18,.12);
  transition:transform .18s ease,border-color .18s ease;
}
.sw-sq:hover{transform:translateY(-2px)}
.sw-sq[aria-pressed="true"]{border-color:var(--g-950)}
.size-row{display:flex;gap:9px;flex-wrap:wrap}
.size-btn{
  min-width:74px;height:46px;padding:0 16px;border-radius:13px;
  background:#fff;border:1.5px solid var(--line);
  font-size:13.5px;font-weight:600;transition:all .16s ease;
}
.size-btn:hover{border-color:var(--g-400)}
.size-btn[aria-pressed="true"]{background:var(--g-950);border-color:var(--g-950);color:#fff}
.size-btn[disabled]{opacity:.34;text-decoration:line-through;cursor:not-allowed}
.size-help{font-size:12.5px;color:var(--g-700);font-weight:600;margin-top:11px;display:inline-flex;align-items:center;gap:7px}

.buy{display:grid;gap:10px;margin-top:28px}
.btn-cart{
  display:flex;align-items:center;justify-content:center;gap:11px;height:56px;
  border-radius:var(--r-pill);
  background:linear-gradient(98deg,var(--lime-400),var(--lime-600));
  color:var(--g-950);font-size:15.5px;font-weight:600;
  box-shadow:0 12px 28px rgba(135,201,63,.36);
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn-cart:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(135,201,63,.44)}
.btn-buy{
  height:56px;border-radius:var(--r-pill);background:#fff;
  border:1.5px solid var(--g-700);color:var(--g-700);
  font-size:15.5px;font-weight:600;display:grid;place-items:center;
  transition:background .18s ease;
}
.btn-buy:hover{background:var(--mint-100)}
.util{display:flex;justify-content:space-between;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.util button{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500}
.util button:hover{color:var(--ink)}
.assure{display:grid;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.assure div{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--muted)}
.assure b{color:var(--ink);font-weight:600}
.assure .ic{
  width:32px;height:32px;border-radius:10px;background:var(--mint-100);
  display:grid;place-items:center;flex:none;color:var(--g-700);font-size:14px;
}

/* ---------- Tabs + reviews ---------- */
.tabs{display:flex;gap:5px;background:var(--mint-100);border-radius:var(--r-pill);padding:5px;margin-bottom:24px;width:fit-content;max-width:100%;overflow-x:auto}
.tabs button{padding:11px 24px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:all .16s ease}
.tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(14,36,21,.08)}

.panel{display:none}
.panel.on{display:block}
.prose{background:#fff;border-radius:var(--r-card);padding:30px 34px;box-shadow:0 1px 2px rgba(14,36,21,.04);max-width:74ch}
.prose h3{font-size:18px;font-weight:600;letter-spacing:-.028em;margin:26px 0 10px}
.prose h3:first-child{margin-top:0}
.prose p{font-size:14.5px;color:var(--muted);line-height:1.66;margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{font-size:14.5px;color:var(--muted);line-height:1.66;margin-bottom:7px}
.prose strong{color:var(--ink);font-weight:600}

.rev-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;align-items:start}
.rev-list{background:#fff;border-radius:var(--r-card);padding:26px 28px;box-shadow:0 1px 2px rgba(14,36,21,.04)}
.rev-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.rev-head h3{font-size:17px;font-weight:600;letter-spacing:-.028em}
.rev-head span{font-size:12.5px;color:var(--muted)}
.rev{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.rev:last-child{border-bottom:0;padding-bottom:0}
.rev>img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.rev b{font-size:13.5px;font-weight:600;display:block}
.stars{color:#E8A33D;font-size:12px;letter-spacing:1.5px;margin-top:3px;display:block}
.rev p{font-size:13.5px;color:var(--muted);margin:9px 0 0;line-height:1.6}
.rev-actions{display:flex;gap:16px;margin-top:11px;font-size:12px;color:var(--muted)}
.rev-summary{background:#fff;border-radius:var(--r-card);padding:26px 28px;box-shadow:0 1px 2px rgba(14,36,21,.04)}
.rev-score{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.rev-score b{font-size:38px;font-weight:600;letter-spacing:-.035em;line-height:1}
.rev-score span{font-size:12.5px;color:var(--muted);display:block;margin-top:5px}
.bar-row{display:flex;align-items:center;gap:11px;margin-top:9px;font-size:12px;color:var(--muted)}
.bar-row .n{width:10px;text-align:right}
.bar{flex:1;height:8px;border-radius:5px;background:var(--mint-200);overflow:hidden}
.bar i{display:block;height:100%;background:#E8A33D;border-radius:5px}
.bar-row .c{width:28px;text-align:right}
.rev-empty{text-align:center;padding:34px 20px}
.rev-empty p{font-size:13.5px;color:var(--muted);margin:0 0 16px}

/* ---------- Related ---------- */
.rel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.rel-head h2{font-size:clamp(21px,2.4vw,28px);font-weight:600;letter-spacing:-.035em}
.rel-nav{display:flex;gap:8px}
.rel-nav button{
  width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;font-size:14px;transition:background .18s ease,color .18s ease;
}
.rel-nav button:hover{background:var(--g-950);color:#fff}

@media (max-width:1100px){
  .grid-products{grid-template-columns:repeat(3,1fr)}
  .pdp{grid-template-columns:1fr;gap:22px}
  .rev-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .grid-products{grid-template-columns:repeat(2,1fr)}
  .shop-promo{padding:24px;min-height:0}
  .shop-promo .art{display:none}
  .filters{border-radius:var(--r-card)}
  .util{flex-wrap:wrap;justify-content:flex-start;gap:18px}
}
@media (max-width:520px){
  .grid-products{grid-template-columns:1fr}
  .gal-thumbs{grid-template-columns:repeat(4,1fr)}
}



/* ============================================================
   MAPPING ONTO WOOCOMMERCE'S OWN MARKUP
   The gallery, variation form and tabs are Woo's output. These
   rules dress them as the approved design without replacing them.
   ============================================================ */

.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;background:#fff;border-radius:var(--r-card);
  padding:18px 22px;margin:0 0 20px;font-size:14px;
  border-left:4px solid var(--g-500);box-shadow:0 1px 2px rgba(14,36,21,.04);
}
.woocommerce-error{border-left-color:#BE4A38}
.woocommerce-message .button,.woocommerce-info .button{float:right;font-weight:600;color:var(--g-700)}

/* ---------- Gallery ---------- */
.gallery{position:relative}
.woocommerce-product-gallery{position:relative}
.woocommerce-product-gallery__wrapper{margin:0}
.woocommerce-product-gallery__image{
  border-radius:var(--r-in);overflow:hidden;background:var(--mint-100);
}
.woocommerce-product-gallery__image a{display:block}
.woocommerce-product-gallery__image img{width:100%;height:auto;display:block}
.woocommerce-product-gallery .flex-viewport{border-radius:var(--r-in);overflow:hidden;background:var(--mint-100)}
.woocommerce-product-gallery__trigger{
  position:absolute;right:14px;bottom:14px;z-index:3;
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;font-size:0;text-indent:0;
  box-shadow:0 4px 14px rgba(14,36,21,.12);
}
.woocommerce-product-gallery__trigger::after{content:'\2295';font-size:17px;color:var(--ink)}
.flex-control-thumbs{
  display:grid;grid-template-columns:repeat(5,1fr);gap:9px;
  margin:12px 0 0;padding:0;list-style:none;
}
.flex-control-thumbs li{margin:0}
.flex-control-thumbs img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:13px;
  border:2px solid transparent;cursor:pointer;opacity:1;
  transition:border-color .18s ease;
}
.flex-control-thumbs img.flex-active,.flex-control-thumbs img:hover{border-color:var(--g-700)}

/* ---------- Variation form ---------- */
.pdp-info form.cart{margin:26px 0 0}
.variations{width:100%;border:0;margin:0 0 4px}
.variations,.variations tbody,.variations tr,.variations th,.variations td{display:block;width:100%}
.variations tr{margin-bottom:24px}
.variations th.label{padding:0 0 11px;text-align:left}
.variations th.label label{font-size:13px;font-weight:600;color:var(--ink);margin:0}
.variations th.label .smc-chosen{font-style:normal;color:var(--muted);font-weight:400}
.variations td.value{position:relative;padding:0}
/* Hidden only when PHP has confirmed it rendered replacement buttons. */
.variations select.smc-native-select{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.smc-select-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.smc-swatches{display:flex;gap:9px;flex-wrap:wrap}
.smc-swatches .sw-sq[disabled]{opacity:.3;cursor:not-allowed}
.smc-swatches .sw-sq[disabled]::after{
  content:'';position:absolute;inset:0;
}
.reset_variations{
  display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--muted);
}
.reset_variations:hover{color:var(--ink)}
.woocommerce-variation-price{margin:8px 0 18px}
.woocommerce-variation-price .price{font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.woocommerce-variation-price del{font-size:15px;color:var(--muted);margin-left:8px}
.woocommerce-variation-availability p{font-size:13px;color:var(--muted);margin:0 0 14px}
.woocommerce-variation-description{font-size:13.5px;color:var(--muted);margin:0 0 14px}

/* ---------- Quantity + add to cart ---------- */
.pdp-info .quantity{display:inline-flex;align-items:center;margin:0 0 12px}
.pdp-info .quantity input.qty{
  width:88px;height:52px;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:#fff;
  text-align:center;font-family:var(--font);font-size:15px;font-weight:600;
}
.pdp-info .single_add_to_cart_button,
.pdp-info .wc-forward.button,
.pdp-info button.button.alt{
  display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;height:56px;border:0;cursor:pointer;
  border-radius:var(--r-pill);
  background:linear-gradient(98deg,var(--lime-400),var(--lime-600));
  color:var(--g-950);font-family:var(--font);font-size:15.5px;font-weight:600;
  box-shadow:0 12px 28px rgba(135,201,63,.36);
  transition:transform .18s ease,box-shadow .18s ease;
}
.pdp-info .single_add_to_cart_button:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(135,201,63,.44)}
.pdp-info .single_add_to_cart_button:disabled,
.pdp-info .single_add_to_cart_button.disabled{
  opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;
}
.pdp-info .stock.out-of-stock{
  background:#FCEDEA;color:#9B3527;border-radius:var(--r-in);
  padding:13px 18px;font-size:13.5px;font-weight:600;
}

.woocommerce-product-details__short-description{font-size:14.5px;color:var(--muted);line-height:1.55}
.product_meta{display:none}

/* ---------- Tabs ---------- */
.woocommerce-tabs{margin-top:0}
.woocommerce-tabs ul.tabs{
  display:flex;gap:5px;list-style:none;margin:0 0 24px;padding:5px;
  background:var(--mint-100);border-radius:var(--r-pill);width:fit-content;max-width:100%;
  overflow-x:auto;scrollbar-width:none;
}
.woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs li a{
  display:block;padding:11px 24px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;
  transition:all .16s ease;
}
.woocommerce-tabs ul.tabs li.active a{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(14,36,21,.08)}
.woocommerce-tabs .panel{
  background:#fff;border-radius:var(--r-card);padding:30px 34px;
  box-shadow:0 1px 2px rgba(14,36,21,.04);max-width:74ch;
}
.woocommerce-tabs .panel > h2:first-child{display:none}
.woocommerce-tabs .panel h3{font-size:18px;font-weight:600;letter-spacing:-.028em;margin:26px 0 10px}
.woocommerce-tabs .panel p,.woocommerce-tabs .panel li{font-size:14.5px;color:var(--muted);line-height:1.66}
.woocommerce-tabs .panel strong{color:var(--ink);font-weight:600}
.woocommerce-tabs #tab-reviews.panel{max-width:none}

/* ---------- Reviews ---------- */
#reviews{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;align-items:start}
#reviews #comments{order:1}
#reviews #review_form_wrapper{order:2}
#reviews .commentlist{list-style:none;margin:0;padding:0}
#reviews .commentlist li{padding:20px 0;border-bottom:1px solid var(--line)}
#reviews .comment_container{display:flex;gap:14px}
#reviews img.avatar{width:44px;height:44px;border-radius:50%;flex:none}
#reviews .comment-text{flex:1}
#reviews .star-rating{color:#E8A33D;font-size:12px;margin:3px 0 0}
#reviews .meta{font-size:13.5px;font-weight:600;margin:0 0 8px}
#reviews .description p{font-size:13.5px;color:var(--muted);line-height:1.6}
#review_form_wrapper{background:var(--mint-50);border-radius:var(--r-card);padding:24px}
#review_form_wrapper .comment-reply-title{font-size:16px;font-weight:600;display:block;margin-bottom:14px}
#review_form_wrapper input[type=text],#review_form_wrapper input[type=email],#review_form_wrapper textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-in);
  padding:12px 16px;font-family:var(--font);font-size:14px;background:#fff;
}
#review_form_wrapper textarea{min-height:110px;resize:vertical}
#review_form_wrapper .submit{
  border:0;cursor:pointer;border-radius:var(--r-pill);padding:13px 26px;
  background:var(--g-950);color:#fff;font-family:var(--font);font-size:14px;font-weight:600;
}
.woocommerce-noreviews{font-size:14px;color:var(--muted)}

/* ---------- Related ---------- */
.related.products,.upsells.products{margin-top:56px}
.related.products > h2,.upsells.products > h2{
  font-size:clamp(21px,2.4vw,28px);font-weight:600;letter-spacing:-.035em;margin:0 0 18px;
}

/* ---------- Pagination ---------- */
.woocommerce-pagination ul.page-numbers{
  display:flex;justify-content:center;align-items:center;gap:8px;
  list-style:none;margin:34px 0 0;padding:0;border:0;
}
.woocommerce-pagination li{margin:0;border:0}
.woocommerce-pagination .page-numbers{
  min-width:44px;height:44px;padding:0 14px;border-radius:var(--r-pill);
  background:#fff;display:grid;place-items:center;font-size:13.5px;font-weight:600;
  box-shadow:0 1px 2px rgba(14,36,21,.04);transition:transform .18s ease;
}
.woocommerce-pagination .page-numbers:hover{transform:translateY(-2px)}
.woocommerce-pagination .page-numbers.current{background:var(--g-950);color:#fff}

/* ---------- Empty state ---------- */
.empty-shop{
  background:#fff;border-radius:var(--r-card);padding:54px 30px;text-align:center;
  box-shadow:0 1px 2px rgba(14,36,21,.04);
}
.empty-shop h2{font-size:24px;font-weight:600;letter-spacing:-.03em}
.empty-shop p{font-size:14px;color:var(--muted);margin:12px 0 22px}
.empty-shop .btn-buy{display:inline-grid;padding:0 30px}

.page-head-desc{font-size:14px;color:var(--muted);margin-top:10px;max-width:60ch}
.page-head-desc p{margin:0}
.fpill.is-on{background:var(--g-950);color:#fff}
.fsort{position:relative}
.fsort select{
  appearance:none;-webkit-appearance:none;
  padding:10px 34px 10px 17px;border-radius:var(--r-pill);border:0;
  background:var(--mint-100);font-family:var(--font);font-size:13px;font-weight:500;
  color:var(--ink);cursor:pointer;
}
.fsort::after{
  content:'\25BC';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:8px;opacity:.55;pointer-events:none;
}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* ============================================================
   FIXES FROM LIVE REVIEW
   ============================================================ */

/* Product card foot: the meta line must never push the price pill.
   One line, ellipsis, price stays put. */
.prod-foot{align-items:center}
.prod-sub{
  flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.prod .price{flex:0 0 auto;white-space:nowrap}
.prod-name{min-height:0}

/* Hero mini list: same discipline - the name column shrinks, the price does not. */
.mini-list li{min-width:0}
.mini-txt{flex:1 1 auto;min-width:0}
.mini-txt b,.mini-txt em{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mini-price{flex:0 0 auto;white-space:nowrap}

/* Hero product is a link now; keep it sized as the image was. */
.stage-link{
  display:grid;place-items:center;width:88%;max-width:400px;
  cursor:pointer;text-decoration:none;
}
.stage-link .stage-img{width:100%;max-width:none}

/* Side cards became links. */
a.card.newgen,a.card.tall{text-decoration:none;color:inherit;display:grid}
a.card.tall{display:block}
a.card.newgen:hover,a.card.tall:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(14,36,21,.14)}
a.card.newgen,a.card.tall{transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease}
.newgen .corner,.tall .corner{pointer-events:none}
a.card.newgen:hover .corner,a.card.tall:hover .corner{background:var(--g-950);color:#fff}

/* The mint band met the section above it with a hard edge. Fade it in. */
.band--mint{
  background:linear-gradient(180deg,
    rgba(234,243,228,0) 0%,
    var(--mint-100) 18%,
    var(--mint-100) 100%);
}


/* ============================================================
   UNIFORM PRODUCT CARDS
   Equal-height media, cover fill, identical structure everywhere.
   `contain` was sizing each image by its own aspect ratio, which is
   what made the grid uneven - every image now fills the same box.
   ============================================================ */

.grid-products{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  align-items:stretch;
}
.band--white .grid-products .pc{background:var(--mint-50)}

.pc{
  position:relative;display:flex;flex-direction:column;
  aspect-ratio:auto;height:100%;
  border-radius:20px;overflow:hidden;background:var(--mint-100);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease;
}
.pc:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(14,36,21,.16)}

/* Fixed-ratio media block. Every card's image is the same height. */
.pc-media{
  position:relative;inset:auto;display:block;
  aspect-ratio:1;width:100%;flex:0 0 auto;
  background:var(--mint-100);overflow:hidden;
}
.pc-media img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,center 50%);
  mix-blend-mode:normal;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.pc:hover .pc-media img{transform:scale(1.04)}

/* Info sits below the image, not over it, and fills the remaining height
   so every card's price line lands on the same baseline. */
.pc-info{
  position:relative;left:auto;right:auto;bottom:auto;
  display:flex;flex-direction:column;
  flex:1 1 auto;margin:8px;padding:13px 14px 12px;
  background:#fff;border-radius:15px;box-shadow:none;
}
.pc-name{
  font-size:13.5px;font-weight:600;letter-spacing:-.022em;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.64em;
}
.pc-rate{margin-top:6px}
.pc-price{margin-top:auto;padding-top:8px}
.pc-cart{height:0;opacity:0;overflow:hidden;transition:height .22s ease,opacity .18s ease,margin .22s ease}
.pc:hover .pc-cart,.pc:focus-within .pc-cart{height:38px;opacity:1;margin-top:10px}
.pc-cart span{height:38px}

/* The old contain treatment is retired - keep the class inert so any
   stale markup does not reintroduce the uneven sizing. */
.pc--contain .pc-media{display:block;padding:0}
.pc--contain .pc-media img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}

@media (max-width:1100px){ .grid-products{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .grid-products{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .grid-products{grid-template-columns:1fr} }


/* ============================================================
   CARD SURFACE
   The catalogue mixes product-on-white shots with on-model
   photography. On a tinted card the white-backed shots read as
   pasted-in rectangles. Making the card itself white removes the
   seam entirely: white photo backgrounds disappear into the card
   and the product appears to float, while lifestyle shots simply
   fill the frame. The section behind is tinted instead, so the
   cards still separate cleanly.
   ============================================================ */

.band--tint{background:var(--mint-50)}

.pc{
  background:#FFFFFF;
  border:1px solid rgba(16,26,18,.07);
  box-shadow:0 1px 2px rgba(14,36,21,.03);
}
.band--white .grid-products .pc,
.band--tint .grid-products .pc{background:#FFFFFF}

.pc:hover{
  box-shadow:0 20px 44px rgba(14,36,21,.13);
  border-color:rgba(16,26,18,.05);
}

/* Media sits flush to the card edge - no inset, no second surface. */
.pc-media{
  background:#FFFFFF;
  margin:0;border-radius:0;
  border-bottom:1px solid rgba(16,26,18,.05);
}

/* Info is part of the card, not a panel floating on it. */
.pc-info{
  background:transparent;
  margin:0;padding:15px 16px 16px;
  border-radius:0;box-shadow:none;
}

.pc-name{font-size:14px;line-height:1.3;min-height:2.6em}
.pc-rate{margin-top:7px}
.pc-price{padding-top:10px}
.pc-price b{font-size:15px}

/* Badge and heart need a little more separation now the backdrop is white. */
.pc-badge{
  background:var(--g-950);color:#fff;
  box-shadow:0 2px 10px rgba(14,36,21,.18);
}
.pc-heart{
  background:#FFFFFF;
  box-shadow:0 2px 10px rgba(14,36,21,.12);
}


/* ============================================================
   PRODUCT PAGE - LIVE FIXES
   ============================================================ */

/* The legacy homepage grid was matching WooCommerce's
   <section class="related products">, turning the whole section into a
   four-column grid. Heading in column one, all four cards crushed into
   column two. Neutralised. */
.products{display:block}
section.related.products,
section.upsells.products,
section.up-sells.products{display:block;margin-top:56px}

/* WooCommerce floats the gallery at 48% by default. */
.gallery .woocommerce-product-gallery,
.woocommerce div.product .gallery div.images{
  width:100%!important;float:none!important;margin:0!important;opacity:1!important;
}
.woocommerce-product-gallery__wrapper{display:block}

/* Price: current figure first and large, original struck beside it. */
.pdp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.pdp-price b{
  font-size:clamp(27px,3.3vw,37px);font-weight:600;letter-spacing:-.035em;color:var(--ink);
}
.pdp-price del{font-size:17px;color:#BE4A38;opacity:1;text-decoration:line-through}

/* Quantity sits beside the button, not above it. */
.pdp-info form.cart{margin:24px 0 0}
.pdp-info form.cart:not(.variations_form),
.woocommerce-variation-add-to-cart{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.pdp-info .quantity{flex:0 0 auto;margin:0}
.pdp-info .single_add_to_cart_button{flex:1 1 220px;width:auto}

/* Stock line. */
.pdp-info p.stock{font-size:13px;font-weight:600;color:var(--g-700);margin:12px 0 0}
.pdp-info p.stock.out-of-stock{color:#9B3527}

/* ---------- Tabs: panels use the full width ---------- */
.woocommerce-tabs .panel{max-width:none;padding:30px 34px}
.tab-two{display:grid;grid-template-columns:1.55fr 1fr;gap:34px;align-items:start}
.tab-main{max-width:66ch}
.tab-main > *:first-child{margin-top:0}
.tab-main h3{font-size:18px;font-weight:600;letter-spacing:-.028em;margin:26px 0 10px}
.tab-main p,.tab-main li{font-size:14.5px;color:var(--muted);line-height:1.66}
.tab-main strong{color:var(--ink);font-weight:600}
.size-list{margin:0 0 16px;padding-left:20px}
.size-list li{margin-bottom:8px}

.tab-side{
  background:var(--mint-50);border-radius:var(--r-in);padding:24px 26px;
  position:sticky;top:24px;
}
.tab-side h3,.tab-side h4{font-size:15px;font-weight:600;letter-spacing:-.02em;margin:0 0 14px}
.tab-side p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0 0 10px}
.tab-side .care-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px}
.tab-side dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 18px}
.tab-side dt{font-size:12.5px;color:var(--muted)}
.tab-side dd{margin:0;font-size:13px;font-weight:600;text-align:right}
.tab-side dd a{color:inherit}
.tab-side--wide{position:static}

/* ---------- Reviews ---------- */
.rev-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}
.rev-list{background:transparent;padding:0;box-shadow:none}
#reviews{display:block}
#reviews .woocommerce-Reviews-title{font-size:17px;font-weight:600;letter-spacing:-.028em;margin:0 0 6px}
#reviews #comments{margin-bottom:26px}
#reviews #review_form_wrapper{order:0}
.rev-summary{
  background:var(--mint-50);border-radius:var(--r-in);padding:24px 26px;
  box-shadow:none;position:sticky;top:24px;
}
.rev-empty b{font-size:15px;font-weight:600;display:block;margin-bottom:8px}

@media (max-width:1000px){
  .tab-two,.rev-grid{grid-template-columns:1fr;gap:24px}
  .tab-side,.rev-summary{position:static}
  .tab-main{max-width:none}
}


/* ============================================================
   PRODUCT PAGE - ROUND TWO
   ============================================================ */

/* Gallery: the image sits in a tinted panel, as designed. */
.gallery .woocommerce-product-gallery__wrapper,
.gallery .flex-viewport{
  background:var(--mint-50);border-radius:var(--r-in);overflow:hidden;
}
.gallery .woocommerce-product-gallery__image img{
  display:block;width:100%;height:auto;
  aspect-ratio:1;object-fit:contain;padding:6%;
  mix-blend-mode:multiply;
}

/* Thumb strip: five across, the fifth carrying the overflow count. */
.flex-control-thumbs{grid-template-columns:repeat(5,1fr)}
.flex-control-thumbs li{position:relative}
.flex-control-thumbs li.smc-more::after{
  content:attr(data-more);
  position:absolute;inset:0;z-index:2;border-radius:13px;
  background:rgba(14,36,21,.68);color:#fff;
  display:grid;place-items:center;
  font-size:11.5px;font-weight:600;pointer-events:none;
}

/* Swatches need a visible frame now they sit on white. */
.smc-swatches--colour .sw-sq{
  width:52px;height:52px;border-radius:14px;
  background-color:#fff;background-size:cover;background-position:center;
  border:2px solid rgba(16,26,18,.10);
}
.smc-swatches--colour .sw-sq[aria-pressed="true"]{border-color:var(--g-950)}
.smc-swatches--colour .sw-sq[disabled]{opacity:.32}

/* Related products header with arrows. */
.related .rel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.related .rel-head h2{margin:0}
.related.products > h2{display:none}
.rel-nav{display:flex;gap:8px}
.rel-nav button{
  width:42px;height:42px;border-radius:50%;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;font-size:15px;
  transition:background .18s ease,color .18s ease;
}
.rel-nav button:hover{background:var(--g-950);color:#fff}

/* Lettered review avatars in place of Gravatar's grey silhouette. */
.smc-avatar{
  border-radius:50%;display:grid;place-items:center;flex:none;
  color:#fff;font-weight:600;font-size:15px;line-height:1;
}
#reviews .commentlist li{border-bottom:1px solid var(--line)}
#reviews .comment_container{align-items:flex-start}

@media (max-width:820px){
  .related .grid-products{
    display:flex;overflow-x:auto;scroll-behavior:smooth;
    gap:12px;scrollbar-width:none;
  }
  .related .grid-products::-webkit-scrollbar{display:none}
  .related .grid-products .pc{flex:0 0 72%}
}


/* ============================================================
   WOOCOMMERCE PAGE CONTAINER
   ============================================================ */
.band--shop{padding:26px 0 70px}

/* ============================================================
   GALLERY - specificity
   WooCommerce ships `.woocommerce div.product div.images
   .flex-control-thumbs li { width:25%; float:left }`, which outranks a
   plain `.flex-control-thumbs li`. Matching its weight, and using
   !important only where we are overriding a plugin stylesheet.
   ============================================================ */
.woocommerce div.product .gallery .flex-control-thumbs,
.gallery ol.flex-control-thumbs,
.gallery ul.flex-control-thumbs{
  display:grid!important;
  grid-template-columns:repeat(5,1fr);
  gap:9px;margin:12px 0 0!important;padding:0!important;
  list-style:none;float:none!important;overflow:visible;
}
.woocommerce div.product .gallery .flex-control-thumbs li,
.gallery ol.flex-control-thumbs li,
.gallery ul.flex-control-thumbs li{
  width:auto!important;float:none!important;margin:0!important;
  list-style:none;position:relative;
}
.woocommerce div.product .gallery .flex-control-thumbs img,
.gallery ol.flex-control-thumbs img,
.gallery ul.flex-control-thumbs img{
  width:100%!important;height:auto!important;
  aspect-ratio:1;object-fit:cover;
  border-radius:13px;border:2px solid transparent;
  opacity:1!important;cursor:pointer;display:block;
  transition:border-color .18s ease;
}
.gallery .flex-control-thumbs img.flex-active,
.gallery .flex-control-thumbs img:hover{border-color:var(--g-700)}

/* Main image stage */
.woocommerce div.product .gallery div.images,
.gallery .woocommerce-product-gallery{
  width:100%!important;float:none!important;margin:0!important;opacity:1!important;
}
.gallery .woocommerce-product-gallery__image > a,
.gallery .woocommerce-product-gallery__image{display:block}

/* Sale flash: ours sits top-left of the card, Woo's is suppressed. */
.gallery .onsale{display:none}

/* ============================================================
   PRICE ROW
   The save badge was dropping to its own line. Keep the row on one
   line where it fits and align the badge with the baseline.
   ============================================================ */
.pdp-price{align-items:baseline;row-gap:8px}
.pdp-price .save{
  align-self:center;flex:0 0 auto;
  background:var(--mint-100);color:var(--g-700);
  border-radius:var(--r-pill);padding:6px 13px;
  font-size:11.5px;font-weight:600;white-space:nowrap;
}


/* ============================================================
   SWATCHES - server rendered
   ============================================================ */
.smc-swatches{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 4px}
.smc-swatches--pill .size-btn{
  min-width:74px;height:46px;padding:0 18px;border-radius:13px;
  background:#fff;border:1.5px solid rgba(16,26,18,.12);
  font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--ink);
  cursor:pointer;transition:all .16s ease;
}
.smc-swatches--pill .size-btn:hover:not([disabled]){border-color:var(--g-400)}
.smc-swatches--pill .size-btn[aria-pressed="true"]{background:var(--g-950);border-color:var(--g-950);color:#fff}
.smc-swatches--pill .size-btn[disabled]{opacity:.32;text-decoration:line-through;cursor:not-allowed}

.smc-swatches--colour .sw-sq{
  width:54px;height:54px;border-radius:14px;padding:0;cursor:pointer;
  background-color:#fff;background-size:cover;background-position:center;
  border:2px solid rgba(16,26,18,.12);
  transition:transform .16s ease,border-color .16s ease;
}
.smc-swatches--colour .sw-sq:hover:not([disabled]){transform:translateY(-2px)}
.smc-swatches--colour .sw-sq[aria-pressed="true"]{border-color:var(--g-950);box-shadow:0 0 0 2px rgba(14,36,21,.12)}
.smc-swatches--colour .sw-sq[disabled]{opacity:.3;cursor:not-allowed}

.variations th.label .smc-chosen{font-style:normal;font-weight:400;color:var(--muted)}


/* Seven colourways need to sit on one row in the buy column. */
.smc-swatches--colour{gap:8px}
.smc-swatches--colour .sw-sq{width:50px;height:50px;border-radius:13px}
@media (max-width:1240px){
  .smc-swatches--colour .sw-sq{width:46px;height:46px}
}
.smc-swatches--pill .size-btn{min-width:0;padding:0 22px}

/* Meta row and price should stay on one line where the column allows. */
.pdp-meta{gap:12px}
.pdp-price{gap:14px}


/* ============================================================
   BUY BOX - matching the approved mockup
   ============================================================ */

/* Any select we did NOT replace stays fully visible and usable. */
.variations select:not(.smc-native-select){
  width:100%;max-width:340px;height:46px;padding:0 14px;
  border:1.5px solid rgba(16,26,18,.12);border-radius:13px;
  background:#fff;font-family:var(--font);font-size:14px;color:var(--ink);
}

/* Label sits above its controls with the chosen value beside it. */
.variations tr{margin-bottom:22px}
.variations th.label{padding:0 0 10px}
.variations th.label label{font-size:13.5px;font-weight:600;color:var(--ink)}
.variations th.label .smc-chosen{font-style:normal;font-weight:400;color:var(--muted)}

/* Seven colourways, one row, as designed. */
.smc-swatches{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.smc-swatches--colour .sw-sq{
  width:52px;height:52px;border-radius:13px;padding:0;cursor:pointer;
  background-color:#fff;background-size:cover;background-position:center;
  border:2px solid rgba(16,26,18,.10);
}
.smc-swatches--colour .sw-sq[aria-pressed="true"]{
  border-color:var(--g-950);box-shadow:0 0 0 2px rgba(14,36,21,.10);
}

.smc-swatches--pill .size-btn{
  min-width:96px;height:52px;padding:0 24px;border-radius:13px;
  background:#fff;border:1.5px solid rgba(16,26,18,.12);
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
}
.smc-swatches--pill .size-btn[aria-pressed="true"]{
  background:var(--g-950);border-color:var(--g-950);color:#fff;
}

/* Reset link only matters once something is chosen. */
.reset_variations{display:none}
.woocommerce-variation.single_variation{margin:0}
.woocommerce-variation-price{margin:0 0 16px}