/* The Nutra Agent — shared stylesheet
   Palette from the logo: purple #985AA5, leaf green #68BC8C, navy #2A2765 */

:root{
  --purple:#985AA5; --purple-d:#7A4486; --purple-l:#F4EBF6; --purple-b:#E3CFE7;
  --green:#68BC8C; --green-d:#47966B; --green-l:#EAF7F0;
  --navy:#2A2765; --navy-l:#3A3682;
  --ink:#111111; --g800:#1F1F1F; --g700:#2C2C2C; --g600:#383838; --g500:#565656;
  --g300:#D1D1D1; --g200:#E3E3E3; --g100:#EEEEEE; --g50:#F7F7F7; --g25:#FBFBFB;
  --white:#fff; --wa:#1DA851;
  --warn:#8A5A12; --warn-bg:#FFF8E8; --warn-b:#EFD9A6;
  --sh1:0 1px 4px rgba(0,0,0,.07); --sh2:0 4px 14px rgba(0,0,0,.08); --sh3:0 10px 30px rgba(0,0,0,.10);
  --r8:8px; --r12:12px; --r16:16px; --r24:24px;
  --font:'Josefin Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1280px;
}
*,*::before,*::after{box-sizing:border-box}
/* The browser's own rule for [hidden] is display:none, which any author rule
   that sets display will beat — .pcard{display:flex} did exactly that, so the
   search filter hid nothing. This makes hidden mean hidden. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:16px;font-weight:400;line-height:1.65;letter-spacing:.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.22;font-weight:600;letter-spacing:-.005em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.tnum{font-variant-numeric:tabular-nums}
.center{text-align:center}

/* ---------- preview strip ---------- */
.preview{background:var(--navy);color:#fff;font-size:12.5px}
.preview .wrap{padding-block:7px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.preview b{font-weight:600}
.preview span{opacity:.75}

/* ---------- header ---------- */
/* one bar: logo left, nav centre, icons right */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--white);border-bottom:1px solid var(--g100)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--white)}
.bar .wrap{display:flex;align-items:center;gap:18px;padding-block:12px}
.brand{flex:0 0 auto}
.brand img{height:26px;width:auto}
.nav{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0}
.navlink{padding:9px 13px;font-size:15px;font-weight:400;color:var(--g700);display:inline-flex;align-items:center;gap:6px;border-radius:999px;white-space:nowrap}
.navlink:hover{color:var(--purple-d);background:var(--purple-l)}
.navlink.on{color:var(--purple-d);background:var(--purple-l);font-weight:600}
.has-menu{position:relative}
.dropdown{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--g200);border-radius:var(--r12);box-shadow:var(--sh3);padding:8px;min-width:262px;display:none;z-index:60}
.has-menu:hover .dropdown,.has-menu:focus-within .dropdown{display:block}
.dropdown a{display:flex;justify-content:space-between;gap:14px;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--g700)}
.dropdown a:hover{background:var(--purple-l);color:var(--purple-d)}
.dropdown a span{color:var(--g500);font-size:12.5px}
.acts{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.iconbtn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:background .18s,color .18s}
.iconbtn:hover{background:var(--g100);color:var(--purple-d)}
.burger{display:none;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;color:var(--ink)}
.burger:hover{background:var(--g100)}

/* ---------- shared icon sizing ---------- */
.ic{width:18px;height:18px;flex:0 0 auto;display:block}
.tic{width:21px;height:21px;flex:0 0 auto;display:block}

/* ---------- bottom tab bar (mobile) ---------- */
.tabbar{display:none}
@media(max-width:940px){
  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
    border-top:1px solid var(--g200);
    padding-bottom:env(safe-area-inset-bottom,0px);
    padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
    box-shadow:0 -2px 14px rgba(0,0,0,.06);
  }
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
       padding:9px 2px 8px;font-size:10.5px;font-weight:500;color:var(--g600);min-height:56px;line-height:1}
  .tab span{letter-spacing:.01em}
  .tab.on{color:var(--purple-d);font-weight:600}
  .tab.on .tic{stroke-width:2.1}
  .tab:active{background:var(--g50)}
  .tab-wa{color:var(--wa)}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  .wa-fab{display:none}
}

.searchrow{border-top:1px solid var(--g100);background:var(--g50)}
.searchrow .wrap{display:flex;align-items:center;gap:10px;padding-block:12px}
.searchrow svg{flex:0 0 auto;opacity:.5}
.searchrow input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:15px;outline:none;padding:4px 0}
.searchclose{font-size:24px;line-height:1;color:var(--g500);padding:0 6px}
.searchclose:hover{color:var(--ink)}

@media(max-width:1080px){.navlink{padding:9px 10px;font-size:13.5px}}
@media(max-width:940px){
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--g200);box-shadow:var(--sh2);padding:6px max(16px,env(safe-area-inset-left,0px)) 12px;display:none;max-height:70vh;overflow-y:auto}
  .nav.open{display:flex}
  .navlink{border-radius:8px;padding:13px 10px;justify-content:space-between;font-size:15px}
  .dropdown{position:static;transform:none;display:block;border:none;box-shadow:none;padding:0 0 8px 10px;min-width:0}
  .dropdown a{padding:11px 10px;font-size:14.5px}
  .bar .wrap{position:relative;gap:12px}
  .acts{margin-left:auto}
}

/* ---------- carousel ---------- */
.carousel{position:relative;background:var(--g50);overflow:hidden}
.slides{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.slide{min-width:100%}
.slide img{width:100%;height:auto;aspect-ratio:1800/660;object-fit:cover}
@media(max-width:700px){.slide img{aspect-ratio:auto;height:auto}.cnav{display:none}}
.cnav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.94);border:1px solid var(--g200);box-shadow:var(--sh2);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink);z-index:2}
.cnav:hover{background:#fff;border-color:var(--g300)}
.cprev{left:max(14px,env(safe-area-inset-left,0px))}.cnext{right:max(14px,env(safe-area-inset-right,0px))}
.dots{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:2}
/* works over pale and dark artwork alike */
.dots button{width:9px;height:9px;border-radius:50%;background:rgba(20,16,30,.26);
  box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.dots button.on{background:var(--purple);width:26px;border-radius:999px;
  box-shadow:0 0 0 1px rgba(255,255,255,.6)}

/* ---------- sections ---------- */
.sec{padding-block:clamp(44px,5.5vw,78px)}
.sec.grey{background:var(--g50)}
.sec-h{text-align:center;margin-bottom:34px}
.sec-h h2{font-size:clamp(23px,3vw,31px)}
.sec-h p{color:var(--g600);font-size:15.5px;margin-top:9px;font-weight:400}
.sec-h.left{text-align:left}

/* pill row */
.pills{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border:1px solid var(--g200);border-radius:999px;background:#fff;font-size:15px;font-weight:400;box-shadow:var(--sh1);transition:border-color .18s,transform .18s}
.pill:hover{border-color:var(--purple);transform:translateY(-2px)}
.pill .dot{width:9px;height:9px;border-radius:50%;background:var(--green)}
.pill .arw{color:var(--g500)}

/* product rail */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.rail > *{scroll-snap-align:start;flex:0 0 250px}
@media(max-width:520px){.rail > *{flex:0 0 72%}}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media(max-width:1040px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
@media(max-width:780px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
/* centred row — cards keep their width and sit in the middle, like the reference site */
.grid.center-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.grid.center-grid > *{flex:0 1 276px;max-width:300px}
@media(max-width:620px){.grid.center-grid > *{flex:0 1 100%;max-width:340px}}

/* product card */
.pcard{background:#fff;border:1px solid var(--g200);border-radius:var(--r16);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s;min-width:0}
.pcard:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--g300)}
.pcard .shot{position:relative;background:#fff;aspect-ratio:1;overflow:hidden}
.pcard .shot img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:10px;left:10px;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-b);font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;letter-spacing:.03em}
.veg{position:absolute;bottom:10px;right:10px;width:17px;height:17px;border:1.5px solid var(--green-d);border-radius:3px;display:flex;align-items:center;justify-content:center;background:#fff}
.veg i{width:8px;height:8px;border-radius:50%;background:var(--green-d);display:block}
.pcard .body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.pcard h3{font-size:16.5px;font-weight:500;line-height:1.32}
.pcard .meta{font-size:13.5px;color:var(--g600);font-weight:400}
.pcard .cat{font-size:11.5px;color:var(--purple-d);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.pcard .price{margin-top:auto;padding-top:9px;font-size:17px;font-weight:700}
.pcard .price small{font-size:12px;font-weight:400;color:var(--g500);font-style:italic}
.pcard .pacts{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:0 15px 15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:600;font-size:15px;padding:11px 22px;transition:all .2s;border:1px solid transparent;text-align:center}
.btn-wa{background:var(--wa);color:#fff}.btn-wa:hover{filter:brightness(1.08)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:var(--navy)}
.btn-out{border-color:var(--g300);background:#fff;color:var(--ink)}.btn-out:hover{border-color:var(--ink)}
.btn-pu{background:var(--purple);color:#fff}.btn-pu:hover{background:var(--purple-d)}
.btn-sm{padding:9px 16px;font-size:13px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* range tiles */
.range{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.rtile{position:relative;border-radius:var(--r24);overflow:hidden;min-height:230px;display:flex;align-items:flex-start;padding:22px;color:#fff}
/* A photographed tile: the artwork sits under a wash of the concern's accent,
   with the top and foot darkened so the white words hold their contrast
   wherever the subject happens to fall in the frame. */
.rtile.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 28%;display:block}
.rtile.shot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(14,10,20,.34) 0%,rgba(14,10,20,0) 34%,
                           rgba(14,10,20,0) 50%,rgba(14,10,20,.48) 100%),
    linear-gradient(105deg,rgba(var(--tint),.64) 0%,rgba(var(--tint),.36) 56%,
                           rgba(var(--tint),.20) 100%)}
.rtile.shot img{transition:transform .5s cubic-bezier(.4,0,.2,1)}
.rtile.shot:hover img{transform:scale(1.04)}
.rtile h3{font-size:21px;display:inline-flex;align-items:center;gap:8px;position:relative;z-index:1}
.rtile p{position:absolute;left:22px;right:22px;bottom:22px;font-size:13.5px;opacity:.92;z-index:1;
  /* one line where it fits; a longer caption still wraps rather than clipping */
  text-wrap:balance}

/* chips */
.chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.chip{padding:10px 20px;border:1px solid var(--g200);border-radius:var(--r12);background:#fff;font-size:15px;font-weight:400;color:var(--g700)}
.chip:hover{border-color:var(--g500)}
.chip.on{border-color:var(--ink);border-width:1.5px;color:var(--ink);font-weight:600}

/* promo strip */
.promo{display:block;border-radius:var(--r24);overflow:hidden;transition:transform .25s,box-shadow .25s}
.promo img{width:100%;aspect-ratio:1800/660;object-fit:cover}
.promo img{width:100%;height:auto}
a.promo:hover{transform:translateY(-3px);box-shadow:var(--sh3)}

/* trust */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.tcard{background:var(--tint,#fff);border:1px solid var(--tint-b,var(--g200));border-radius:var(--r16);padding:22px;border-top:3px solid var(--tint-s,var(--green))}
/* each card carries its own tint so the row reads as a set, not four blank boxes */
.trust > .tcard:nth-child(1){--tint:#E7F5EE;--tint-b:#BFE2D1;--tint-s:#4E9E73}
.trust > .tcard:nth-child(2){--tint:#F1E9F6;--tint-b:#D9C7E6;--tint-s:#8B4F99}
.trust > .tcard:nth-child(3){--tint:#E8EEF9;--tint-b:#C6D3EC;--tint-s:#4C63A8}
.trust > .tcard:nth-child(4){--tint:#FBEFE6;--tint-b:#EDD2BD;--tint-s:#B96F3F}
.tcard .ic{width:42px;height:42px;border-radius:12px;background:#fff;color:var(--tint-s,var(--green-d));display:flex;align-items:center;justify-content:center;margin-bottom:13px;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.tcard .ic i{width:14px;height:14px;border-radius:4px;background:var(--green-d);display:block}
.tcard b{display:block;font-family:inherit;font-size:17px;font-weight:600;margin-bottom:7px;color:var(--ink)}
.tcard p{font-size:14.5px;color:var(--g800);line-height:1.65;font-weight:400}

/* ---------- product detail ---------- */
.crumbs{font-size:14px;color:var(--g600);padding-block:16px;font-weight:400}
.crumbs a:hover{color:var(--purple-d)}
.crumbs span{color:var(--g300);margin:0 7px}
.pdetail{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(22px,4vw,54px);align-items:start;padding-bottom:20px}
@media(max-width:900px){.pdetail{grid-template-columns:1fr}}
.gallery{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);display:flex;flex-direction:column;gap:10px}
@media(max-width:900px){.gallery{position:static}}
.gmain{aspect-ratio:1;border:1px solid var(--g200);border-radius:var(--r16);overflow:hidden;background:#fff}
.gmain img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.thumbs button{aspect-ratio:1;border:1px solid var(--g200);border-radius:var(--r8);overflow:hidden;padding:0;background:#fff}
.thumbs button.on{border-color:var(--ink);border-width:2px}
.pdetail h1{font-size:clamp(24px,3.2vw,34px);margin-top:4px}
.subline{color:var(--g700);font-size:15px;margin-top:8px;font-weight:400}
.purpose{font-size:17px;color:var(--g800);margin-top:14px;max-width:56ch;line-height:1.7;font-weight:400}
.lw{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.lw span{background:var(--green-l);color:var(--green-d);border:1px solid #C9E8D6;font-size:12.5px;font-weight:500;padding:6px 13px;border-radius:999px}
.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;background:var(--g200);border:1px solid var(--g200);border-radius:var(--r12);overflow:hidden;margin-top:20px}
.keyfacts div{background:#fff;padding:12px 14px;min-width:0}
.keyfacts b{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--g500);margin-bottom:3px;font-weight:600}
.keyfacts span{font-size:14px}
.buybox{margin-top:20px;border:1px solid var(--g200);border-radius:var(--r16);padding:20px;background:var(--g25)}
.priceline{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:15px}
.priceline .big{font-size:30px;font-weight:700}
.priceline .n{font-size:13px;color:var(--g600)}
.buybox .hint{font-size:12.5px;color:var(--g500);text-align:center;margin-top:10px}

.block{margin-top:34px}
.block > h2{font-size:21px;margin-bottom:5px}
.block > .sub{font-size:13.5px;color:var(--g500);margin-bottom:14px}

/* ingredient panel */
.panel{border:1px solid var(--g200);border-radius:var(--r12);overflow:hidden;background:#fff}
.panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 16px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.panel-h b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.panel-h span{font-size:11.5px;color:var(--g600)}
.irow{display:flex;justify-content:space-between;gap:16px;padding:10px 16px;border-bottom:1px solid var(--g100);font-size:15px;align-items:baseline}
.irow:last-child{border-bottom:none}
.irow:nth-of-type(odd){background:var(--g25)}
.irow.hd{background:#fff;border-bottom:1.5px solid var(--ink)}
.irow.hd .nm{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.irow .nm{min-width:0;color:var(--g800);font-weight:400}
.irow .amt{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.panel-note{padding:13px 16px;font-size:13.5px;color:var(--g700);background:var(--g50);border-top:1px solid var(--g100);line-height:1.6}
.qflag{display:inline-block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-b);padding:1px 6px;border-radius:999px;margin-left:7px;font-weight:600;vertical-align:1px}

.note{border:1px solid var(--g200);border-radius:var(--r12);padding:15px 17px;font-size:14.5px;line-height:1.65;background:#fff;font-weight:400;color:var(--g800)}
.note.warn{background:var(--warn-bg);border-color:var(--warn-b);color:var(--warn)}
.note.green{background:var(--green-l);border-color:#C9E8D6;color:var(--green-d)}
.note b{font-weight:600}
.pending{color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-b);padding:1px 7px;border-radius:4px;font-size:11.5px;font-weight:600;white-space:nowrap}

.legal{border:1px solid var(--g200);border-radius:var(--r12);padding:18px;background:#fff;margin-top:20px}
.legal h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g500);margin-bottom:11px;font-weight:600}
.legal ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.legal li{font-size:14px;color:var(--g700);display:flex;gap:9px;line-height:1.6;font-weight:400}
.legal li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--green);flex-shrink:0;margin-top:8px}
.legal li b{color:var(--ink);font-weight:600}

.faq details{border-bottom:1px solid var(--g200)}
.faq details:first-of-type{border-top:1px solid var(--g200)}
.faq summary{padding:14px 2px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;font-size:15px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--purple-d);font-size:19px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 2px 17px;color:var(--g700);font-size:15px;max-width:70ch;font-weight:400}

/* order sheet */
.sheet{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,8,16,.5)}
.sheet-in{background:#fff;border-radius:18px 18px 0 0;width:100%;max-width:520px;padding:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));max-height:88vh;overflow-y:auto}
@media(min-width:620px){.sheet{align-items:center}.sheet-in{border-radius:var(--r16);padding-bottom:24px}}
.sheet-in h3{font-size:20px;margin-bottom:6px}
.wa-prev{background:#E8F5EC;border:1px solid #C3DECC;border-radius:var(--r12);padding:15px;margin:14px 0;font-size:13.5px;line-height:1.65;white-space:pre-wrap;color:#17331F}

/* editorial */
.prose{max-width:68ch}
.prose h3{font-size:19px;margin-top:28px;margin-bottom:7px}
.prose p{font-size:16px;color:var(--g800);margin-top:11px;line-height:1.8;font-weight:400}
.story p{font-size:17.5px;color:var(--g800);line-height:1.85;margin-top:17px;max-width:62ch;font-weight:400}
.story p:first-child{font-size:21px;color:var(--ink);font-weight:500;line-height:1.5}
.ccols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.ccard{border:1px solid var(--g200);border-radius:var(--r16);padding:20px;background:#fff}
.ccard b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--g500);margin-bottom:9px;font-weight:600}
.ccard p{font-size:15.5px;color:var(--g800);line-height:1.7;font-weight:400}

/* page head */
.phead{background:var(--g50);border-bottom:1px solid var(--g100);padding-block:clamp(28px,4vw,46px)}
.phead h1{font-size:clamp(26px,4vw,40px)}
.phead p{color:var(--g700);margin-top:10px;max-width:62ch;font-size:16px;font-weight:400}

/* footer */
footer.site{background:var(--ink);color:#fff;margin-top:56px}
footer.site .wrap{padding-block:44px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:30px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.fgrid{grid-template-columns:1fr}}
.fgrid img{height:24px;margin-bottom:14px}
.fgrid h5{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#A5A2B4;margin:0 0 12px;font-weight:600}
.fgrid a,.fgrid p{display:block;font-size:14.5px;color:#DEDCE8;line-height:1.75;padding:2px 0;font-weight:400}
.fgrid a:hover{color:#fff}
.fbot{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#B8B5C6;line-height:1.7;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-weight:400}
.fbot p{max-width:72ch}

/* ---------- icon treatments in content ---------- */
.tcard .ic{width:42px;height:42px;border-radius:12px;background:#fff;color:var(--tint-s,var(--green-d));
  display:flex;align-items:center;justify-content:center;margin-bottom:13px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.tcard .ic .ic{width:20px;height:20px;margin:0;background:none;border-radius:0}

.ccard{position:relative}
.ccard .cic{width:40px;height:40px;border-radius:12px;background:var(--purple-l);color:var(--purple-d);
  display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.ccard .cic.wa{background:#E8F5EC;color:var(--wa)}
.ccard .cic .ic{width:19px;height:19px}
.social-row{display:flex;align-items:center;gap:9px;margin-top:4px}
.social-row .ic{color:var(--purple-d)}

.keyfacts div{display:flex;flex-direction:column;gap:2px}
.keyfacts .ic{width:16px;height:16px;color:var(--g500);margin-bottom:5px}

.fline{display:flex;align-items:flex-start;gap:10px;margin-top:10px}
.fline .ic{width:17px;height:17px;margin-top:3px;color:#8E8B9E}
.fsocial{display:flex;gap:9px;margin-top:14px}
.fsocial .sbtn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;color:#DCDAE6}
.fsocial .sbtn .ic{width:17px;height:17px}
.fhandle{font-size:12.5px;opacity:.75;margin-top:10px}

/* ---------- mobile polish ---------- */
@media(max-width:780px){
  body{font-size:15px}
  .phead h1{font-size:clamp(24px,7vw,32px)}
  .sec-h h2{font-size:clamp(21px,5.5vw,26px)}
  .sec-h{margin-bottom:24px}
  .pcard h3{font-size:14.5px}
  .pcard .body{padding:12px 12px 13px;gap:4px}
  .pcard .pacts{padding:0 12px 12px;gap:7px}
  .pcard .price{font-size:15.5px}
  .btn-sm{padding:10px 12px;font-size:12.5px}
  .chips{gap:7px}
  .chip{padding:9px 15px;font-size:13px}
  .pills{gap:9px}
  .pill{padding:10px 16px;font-size:13.5px}
  .range{gap:12px}
  .rtile{min-height:160px;padding:18px;border-radius:var(--r16)}
  .rtile h3{font-size:18px}
  .rtile p{left:18px;right:18px;bottom:18px;font-size:12.5px}
  .trust{gap:12px}
  .tcard{padding:18px}
  .keyfacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdetail h1{font-size:clamp(22px,6vw,28px)}
  .priceline .big{font-size:26px}
  .buybox{padding:16px}
  .block{margin-top:28px}
  .block > h2{font-size:19px}
  .irow{padding:10px 13px;font-size:13.5px;gap:12px}
  .panel-h{padding:12px 13px}
  .legal{padding:16px}
  .faq summary{font-size:14.5px;padding:15px 2px}
  .ccols{gap:12px}
  .ccard{padding:17px}
  footer.site .wrap{padding-block:34px}
  .fgrid{gap:24px}
  .story p{font-size:15.5px}
  .story p:first-child{font-size:19px}
  .prose p{font-size:14.5px}
  .crumbs{font-size:12px;padding-block:12px}
}
@media(max-width:420px){
  .brand img{height:22px}
  .iconbtn{width:36px;height:36px}
  .grid{gap:11px}
  .pcard .pacts{flex-direction:column}
}
/* bigger tap targets on touch devices */
@media(hover:none){
  .btn{min-height:44px}
  .navlink,.chip,.pill{min-height:42px}
  .thumbs button{min-height:56px}
}

/* ---------- mobile: 4:5 banners, 2-up products, sliding trust cards ---------- */
.slide picture,.promo picture{display:block}
@media(max-width:700px){
  .slide img{aspect-ratio:4/5;height:auto;object-fit:cover}
  .promo img{aspect-ratio:4/5;object-fit:cover}
  .promo{border-radius:var(--r16)}
}

@media(max-width:620px){
  /* two products per row everywhere, including the centred home row */
  .grid.center-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid.center-grid > *{flex:none;max-width:none}
  .rail > *{flex:0 0 46%}
}

@media(max-width:780px){
  /* trust cards slide sideways, square, all the same size */
  .trust-rail{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:6px;
    margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));
    margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));
  }
  .trust-rail::-webkit-scrollbar{display:none}
  .trust-rail .tcard{
    flex:0 0 232px;scroll-snap-align:start;aspect-ratio:1;
    display:flex;flex-direction:column;padding:18px;overflow:hidden
  }
  .trust-rail .tcard .ic{width:36px;height:36px;margin-bottom:10px}
  .trust-rail .tcard .ic .ic{width:18px;height:18px}
  .trust-rail .tcard b{font-size:15px;margin-bottom:5px}
  .trust-rail .tcard p{font-size:12.5px;line-height:1.5}
}

@media(max-width:700px){
  .carousel .cnav{display:none}
}

/* ---------- footer: icons beside text, brighter, shorter on mobile ---------- */
.fgrid .fline{display:flex;align-items:flex-start;gap:10px;margin-top:9px}
.fgrid .fline .ic{width:17px;height:17px;margin-top:2px;color:var(--green);flex:0 0 auto}
.fgrid .fline span{flex:1;min-width:0}
.fsocial .sbtn{background:rgba(104,188,140,.16);color:var(--green)}
footer.site .fhandle{display:block}

@media(max-width:860px){
  .fgrid{grid-template-columns:1fr 1fr;gap:22px 20px}
  .fgrid > :first-child{grid-column:1 / -1}
  .fgrid > :last-child{grid-column:1 / -1}
}
@media(max-width:780px){
  footer.site .wrap{padding-block:28px}
  .fgrid h5{margin-bottom:8px}
  .fgrid a,.fgrid p{font-size:13px;padding:1px 0;line-height:1.55}
  .fgrid img{height:21px;margin-bottom:10px}
  .fbot{margin-top:22px;padding-top:14px;font-size:11.5px;gap:10px}
  .fhandle{font-size:12px;margin-top:8px}
  .fsocial{margin-top:11px}
  .fsocial .sbtn{width:33px;height:33px}
}

/* ---------- trust rail: keep cards clear of the screen edge ---------- */
@media(max-width:780px){
  .trust-rail{scroll-padding-left:max(16px,env(safe-area-inset-left,0px))}
  .trust-rail .tcard{flex:0 0 clamp(200px,62vw,236px)}
  .trust-rail::after{content:"";flex:0 0 4px}
}

/* ---------- footer columns: plain on desktop, collapsible on mobile ---------- */
.fcol > summary{list-style:none;cursor:default}
.fcol > summary::-webkit-details-marker{display:none}
.fcol > summary h5{margin:0 0 12px;display:flex;align-items:center;justify-content:space-between}
.fcol > summary h5::after{content:"";display:none}
@media(max-width:780px){
  .fcol > summary{cursor:pointer;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .fcol > summary h5{margin:0}
  .fcol > summary h5::after{content:"+";display:block;font-size:17px;color:var(--green);line-height:1;font-weight:400}
  .fcol[open] > summary h5::after{content:"\2212"}
  .fcol[open] > a:first-of-type{margin-top:9px}
  .fcol > a{padding:6px 0}
}

/* trust rail: cards stay inside the page gutter; the peek shows only blank card padding */
@media(max-width:780px){
  .trust-rail{
    margin-left:0;margin-right:0;padding-left:0;padding-right:0;
    gap:12px;scroll-padding-left:0
  }
  .trust-rail::after{display:none}
  .trust-rail .tcard{flex:0 0 calc(100% - 34px);aspect-ratio:1;padding:22px}
  .trust-rail .tcard .ic{width:40px;height:40px;margin-bottom:12px}
  .trust-rail .tcard .ic .ic{width:19px;height:19px}
  .trust-rail .tcard b{font-size:17px;margin-bottom:7px}
  .trust-rail .tcard p{font-size:14px;line-height:1.6}
}

/* admin link — quiet, for staff only */
.fadmin{opacity:.45;font-size:12px!important}
.fadmin:hover{opacity:1}

/* slides are links now */
.slide{display:block;color:inherit}
.slide picture{display:block}

/* ───────── shop layout: filters beside the grid ───────── */
.shoplayout{display:grid;grid-template-columns:212px minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:start}
.filters{position:sticky;top:calc(env(safe-area-inset-top,0px) + 86px)}
.filters h2{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--g500);
  font-weight:600;margin-bottom:12px;padding-left:2px}
.frow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px;border-radius:10px;font-size:15px;color:var(--g700);
  transition:background .16s,color .16s;line-height:1.3}
.frow:hover{background:var(--g50);color:var(--ink)}
.frow.on{background:var(--purple-l);color:var(--purple-d);font-weight:600}
.fnum{font-size:12.5px;color:var(--g500);flex:0 0 auto}
.frow.on .fnum{color:var(--purple-d)}
.shopmain{min-width:0}
.shopmain .grid{margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1180px){.shopmain .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:880px){
  /* filters become a scrolling row above the grid */
  .shoplayout{display:block}
  .filters{position:static;margin-bottom:20px}
  .filters h2{display:none}
  .filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));
    margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:4px}
  .filters::-webkit-scrollbar{display:none}
  .frow{flex:0 0 auto;border:1px solid var(--g200);background:#fff;border-radius:999px;
    padding:9px 16px;font-size:14px;white-space:nowrap}
  .frow.on{border-color:var(--purple);background:var(--purple-l)}
  .shopmain .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ───────── banner text overlay ───────── */
.slide,.promo{position:relative}
.slide picture,.promo picture{display:block}
.bn-text{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}
/* keep the words clear of the arrows */
.bn-text .wrap{width:100%;pointer-events:none;
  padding-left:max(72px,env(safe-area-inset-left,0px));
  padding-right:max(72px,env(safe-area-inset-right,0px))}
@media(min-width:1440px){.bn-text .wrap{padding-left:max(16px,env(safe-area-inset-left,0px))}}
.bn-text > .wrap > *{pointer-events:auto}
.bn-text h1,.bn-text h2{font-size:clamp(28px,4.2vw,62px);font-weight:700;max-width:15ch;
  letter-spacing:-.015em;line-height:1.04}
.bn-text p{font-size:clamp(14px,1.5vw,21px);margin-top:12px;
  max-width:36ch;line-height:1.3;font-weight:400}
.bn-cta{margin-top:clamp(16px,2vw,26px);padding:13px 28px;font-size:15px;font-weight:600}
.bn-cta:hover{transform:translateY(-1px)}

/* light artwork → dark words; dark artwork → white words */
.bn-light h2{color:#fff;text-shadow:0 2px 18px rgba(20,10,35,.28)}
.bn-light p{color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(20,10,35,.3)}
.bn-light .bn-cta{background:#fff;color:var(--ink)}
.bn-light .bn-cta:hover{background:var(--g50)}

.bn-dark h2{color:var(--purple-d)}
.bn-dark p{color:var(--navy)}
.bn-dark .bn-cta{background:var(--purple);color:#fff}
.bn-dark .bn-cta:hover{background:var(--purple-d)}
.promo .bn-text h1,.promo .bn-text h2{font-size:clamp(24px,3.4vw,50px)}

@media(max-width:700px){
  /* The portrait artwork leaves two clear bands: roughly the top third and a
     strip at the foot. Words go in the first, the button in the second, so
     neither lands on the products. */
  .bn-text{align-items:stretch;padding:0}
  .bn-text .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;
    height:100%;max-width:none;
    padding-left:max(18px,env(safe-area-inset-left,0px));
    padding-right:max(18px,env(safe-area-inset-right,0px));
    padding-top:clamp(26px,7vw,40px);
    padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
  .bn-text h1,.bn-text h2{font-size:clamp(34px,9.4vw,46px);max-width:15ch;line-height:1.02}
  /* The subheading copy is kept short enough to hold to a single line; if a
     longer one is typed in the admin it wraps rather than running off-screen. */
  .bn-text p{font-size:17px;margin-top:9px;max-width:none;line-height:1.25}
  /* auto margin drops the button into the clear strip at the foot */
  .bn-cta{padding:10px 22px;font-size:13.5px;margin-top:auto}
  /* The dots move out of the picture entirely, into a strip underneath, so
     the whole clear foot of the artwork belongs to the button. */
  .carousel{padding-bottom:24px;background:#fff}
  .dots{bottom:7px}
  .dots button{width:7px;height:7px}
  .dots button.on{width:20px}
}

/* A product with no photo in storage and none shipped with the site. Better a
   calm tinted panel than a broken-image icon on the homepage. */
img.noimg{background:#f3f1ec;object-fit:cover}