/* ============================================================
   HomeZ — storefront styles
   Full-width layout, one colour per category.
   ============================================================ */
:root{
  --max:1560px;
  --ink:#1B2220;
  --ink-2:#56635F;
  --ink-3:#8B9793;
  --line:#E7ECEA;
  --line-2:#D6DEDB;
  --paper:#F6F9F7;
  --white:#fff;

  --green:#12583A;
  --green-mid:#1B9152;
  --green-bright:#25AE65;
  --mint:#E4F5EC;
  --mint-2:#CDEBDC;

  --tan:#CCA36E;
  --tan-soft:#FBF1E2;
  --tan-deep:#96702F;

  --sun:#E8890C;
  --sun-soft:#FFF4E3;
  --violet:#7C4DDA;
  --violet-soft:#F2ECFF;
  --teal:#0E9AA0;
  --teal-soft:#E2F6F7;
  --rose:#D8446B;
  --rose-soft:#FDECF1;
  --blue:#2E7ACB;
  --blue-soft:#E6F1FC;
  --sale:#D43F2A;

  --r:10px; --r-m:15px; --r-l:22px; --r-xl:28px;
  --sh:0 1px 2px rgba(27,34,32,.05);
  --sh-2:0 12px 30px -16px rgba(27,34,32,.26);
  --sh-3:0 28px 60px -30px rgba(27,34,32,.34);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);overflow-x:hidden;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Plus Jakarta Sans",sans-serif;
  letter-spacing:-.022em;margin:0;font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--green-mid);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;width:100%}

/* ---------- atoms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;
  border-radius:999px;font-weight:600;font-size:14px;white-space:nowrap;
  transition:transform .16s var(--ease),background .18s,border-color .18s,color .18s,box-shadow .18s}
.btn:active{transform:scale(.97)}
.btn-green{background:var(--green-mid);color:#fff;box-shadow:0 8px 20px -10px rgba(27,145,82,.7)}
.btn-green:hover{background:var(--green-bright)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#333d3a}
.btn-sun{background:var(--sun);color:#fff}
.btn-sun:hover{background:#f59b24}
.btn-white{background:#fff;color:var(--ink);box-shadow:var(--sh)}
.btn-white:hover{color:var(--green-mid)}
.btn-line{border:1.5px solid var(--line-2)}
.btn-line:hover{border-color:var(--green-mid);color:var(--green-mid)}
.btn-soft{background:var(--mint);color:var(--green)}
.btn-soft:hover{background:var(--green-mid);color:#fff}
.btn-danger{border:1.5px solid var(--line-2);color:var(--sale)}
.btn-danger:hover{border-color:var(--sale)}
.btn-ghost{color:var(--ink-2);padding:7px 10px}
.btn-ghost:hover{color:var(--green-mid)}
.btn-sm{padding:8px 15px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.ico{width:20px;height:20px;display:block;flex:none}
.ico-s{width:16px;height:16px;display:block;flex:none}
.muted{color:var(--ink-2)}
.tiny{font-size:12.5px}
.money{font-variant-numeric:tabular-nums;font-weight:700}
.was{color:var(--ink-3);text-decoration:line-through;font-weight:500;font-size:12.5px}
.off{color:var(--sale);font-weight:700;font-size:12.5px}
.stars{display:inline-flex;gap:1px;color:#F0A92B;line-height:1}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  background:var(--mint);color:var(--green);font-size:12.5px;font-weight:600}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:4px 11px;border-radius:999px}
.tag i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.tag-ok{background:var(--mint);color:#157046}
.tag-wait{background:var(--sun-soft);color:var(--tan-deep)}
.tag-off{background:#FBE9E6;color:var(--sale)}
.tag-mute{background:var(--paper);color:var(--ink-3)}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:11px 14px;border:1.5px solid var(--line);
  border-radius:var(--r);background:#fff;transition:border-color .18s,box-shadow .18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-mid);
  box-shadow:0 0 0 3px rgba(37,174,101,.14)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}

/* ---------- header ---------- */
.util{background:linear-gradient(90deg,var(--green) 0%,#17724A 45%,var(--teal) 100%);color:rgba(255,255,255,.9);font-size:12.5px}
.util .wrap{display:flex;align-items:center;gap:22px;height:38px}
.util span{display:flex;align-items:center;gap:7px}
.util .ico{width:15px;height:15px}
.util .right{margin-left:auto;display:flex;gap:18px}
.util a,.util button{color:rgba(255,255,255,.85)}
.util a:hover,.util button:hover{color:#fff}

.hdr{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 1px 0 var(--line)}
.hdr-main{display:flex;align-items:center;gap:16px;height:78px}
.logo{flex:none}
.logo img{height:40px;width:auto}
.cat-btn{display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:999px;
  background:var(--green);color:#fff;font-size:13.5px;font-weight:600;flex:none;
  transition:background .18s}
.cat-btn:hover{background:var(--green-mid)}
.cat-btn .ico{width:17px;height:17px}
.cat-btn[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
.cat-btn svg:last-child{transition:transform .2s}
.searchbar{flex:1;min-width:0;display:flex;align-items:center;border:2px solid var(--green-mid);
  border-radius:999px;overflow:hidden;background:#fff}
.searchbar input{flex:1;border:0;padding:11px 18px;min-width:0}
.searchbar input:focus{outline:none}
.searchbar button{background:var(--green-mid);color:#fff;padding:0 24px;align-self:stretch;
  display:grid;place-items:center;transition:background .18s}
.searchbar button:hover{background:var(--green-bright)}
.hdr-right{display:flex;align-items:center;gap:4px;flex:none}
.hbtn{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;
  color:var(--ink-2);transition:background .18s,color .18s;position:relative}
.hbtn:hover{background:var(--paper);color:var(--green-mid)}
.hbtn .lbl{font-size:13px;font-weight:600;line-height:1.15;text-align:left}
.hbtn .lbl small{display:block;font-size:11px;font-weight:500;color:var(--ink-3)}
.cart-btn .dot{position:absolute;top:2px;left:26px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--sale);color:#fff;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;border:2px solid #fff}

.quicknav{border-top:1px solid var(--line)}
.quicknav .wrap{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.quicknav .wrap::-webkit-scrollbar{display:none}
.quicknav a,.quicknav button{padding:11px 15px;font-size:13.5px;font-weight:500;color:var(--ink-2);
  white-space:nowrap;border-bottom:2px solid transparent;transition:.18s}
.quicknav a:hover,.quicknav button:hover{color:var(--green-mid)}
.quicknav a[aria-current="true"],.quicknav button[aria-current="true"]{color:var(--green);font-weight:700;border-bottom-color:var(--green-mid)}
.qn-note{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tan-deep);
  background:var(--tan-soft);padding:5px 13px;border-radius:999px;white-space:nowrap}
.qn-note .ico{width:15px;height:15px}

.cat-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);
  box-shadow:var(--sh-3);padding:20px 0 24px;animation:drop .22s var(--ease);z-index:31}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cat-panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.cat-item{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r-m);
  text-align:left;background:var(--t,#EEF3F1);transition:transform .2s var(--ease)}
.cat-item:hover{transform:translateY(-3px)}
.cat-ico{width:40px;height:40px;border-radius:12px;background:#fff;color:var(--c,#1B9152);
  display:grid;place-items:center;flex:none}
.cat-item b{display:block;font-size:13.5px;color:var(--ink)}
.cat-item small{color:var(--ink-2);font-size:11.5px}

/* ---------- hero ---------- */
.hero{padding:20px 0 4px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px}
.banner{position:relative;border-radius:var(--r-xl);overflow:hidden;height:360px;touch-action:pan-y;
  box-shadow:var(--sh-2)}
.b-track{display:flex;height:100%;transition:transform .6s var(--ease);will-change:transform}
.b-slide{flex:0 0 100%;height:100%;display:grid;grid-template-columns:1.02fr .98fr;
  align-items:center;gap:20px;padding:36px 44px}
.theme-sunset{background:linear-gradient(120deg,#FFE9CC 0%,#FFD6A8 45%,#FFC48A 100%)}
.theme-mint{background:linear-gradient(120deg,#DFF3E9 0%,#C6EBDA 48%,#B3E4DD 100%)}
.theme-rose{background:linear-gradient(120deg,#FBE6EE 0%,#F3DCFB 52%,#E5DEFF 100%)}
.b-copy .kicker{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:rgba(255,255,255,.72);color:var(--ink);padding:5px 12px;border-radius:999px}
.b-copy h2{font-size:clamp(26px,2.5vw,38px);line-height:1.06;font-weight:800;margin:12px 0 0;max-width:15ch}
.b-copy p{margin:10px 0 0;color:rgba(27,34,32,.72);font-size:14.5px;max-width:36ch}
.b-copy .price{margin-top:14px;display:flex;align-items:baseline;gap:9px}
.b-copy .price b{font-family:"Bricolage Grotesque",sans-serif;font-size:27px;font-weight:800}
.b-copy .btn{margin-top:18px}
.b-art{height:100%;display:grid;place-items:center;padding:8px}
.b-art img{max-height:290px;width:auto;border-radius:var(--r-l);
  box-shadow:0 22px 40px -22px rgba(27,34,32,.45)}
.b-ctrl{position:absolute;left:44px;bottom:22px;z-index:3}
.dots{display:flex;gap:6px}
.dots button{width:8px;height:8px;border-radius:999px;background:rgba(27,34,32,.25);
  transition:width .3s var(--ease),background .3s}
.dots button[aria-current="true"]{width:24px;background:var(--ink)}
.arw{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:var(--sh-2);display:grid;place-items:center;
  color:var(--ink);z-index:3;opacity:0;transition:opacity .24s}
.banner:hover .arw{opacity:1}
.arw.l{left:14px}.arw.r{right:14px}

.side-promos{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.promo{border-radius:var(--r-xl);padding:22px;display:flex;flex-direction:column;
  justify-content:space-between;text-align:left;min-height:0;transition:transform .24s var(--ease)}
.promo:hover{transform:translateY(-4px)}
.promo b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:21px;font-weight:800;line-height:1.14}
.promo em{display:block;font-style:normal;font-size:12.5px;margin-top:5px;opacity:.78}
.pr-cta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700}
.pr-cta svg{width:15px;height:15px}
.p-violet{background:linear-gradient(140deg,#EFE6FF,#DCCCFF);color:#4B2A93}
.p-teal{background:linear-gradient(140deg,#DFF4F5,#C2EAEC);color:#0A6266}

/* ---------- sections ---------- */
.sec{padding:36px 0}
.sec-tight{padding-top:8px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.sec-head h2{font-size:24px;font-weight:800}
.sec-head p{margin:4px 0 0;color:var(--ink-2);font-size:13.5px}
.link{font-size:13.5px;font-weight:700;color:var(--green-mid)}
.link:hover{text-decoration:underline}

/* category tiles */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px}
.cat-tile{position:relative;border-radius:var(--r-l);padding:18px;background:var(--t,#EEF3F1);text-align:left;
  overflow:hidden;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .24s var(--ease),box-shadow .24s}
.cat-tile:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.ct-ico,.cat-tile b,.cat-tile small{position:relative;z-index:2}
.ct-art{position:absolute;right:-14px;top:-14px;width:104px;height:104px;border-radius:50%;
  overflow:hidden;opacity:.95;box-shadow:0 10px 24px -14px rgba(27,34,32,.5)}
.ct-art img{width:100%;height:100%;object-fit:cover}
.ct-ico{width:38px;height:38px;border-radius:12px;background:#fff;color:var(--c,#1B9152);
  display:grid;place-items:center;margin-bottom:auto}
.cat-tile b{display:block;font-size:14px;color:var(--ink);margin-top:14px;max-width:11ch;line-height:1.25}
.cat-tile small{color:var(--c,#1B9152);font-size:11.5px;font-weight:700}

/* value strip */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.value{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);padding:16px 18px}
.value span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none}
.value b{display:block;font-size:13.5px}
.value small{color:var(--ink-2);font-size:12px}

/* flash deals */
.deals{background:linear-gradient(135deg,#FFF1DC 0%,#FFE3E8 55%,#F1E6FF 100%);
  border-radius:var(--r-xl);padding:24px}
.deals-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.deals-head h2{font-size:22px;font-weight:800}
.deals-head p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
.bolt{width:42px;height:42px;border-radius:14px;background:var(--sun);color:#fff;
  display:grid;place-items:center;flex:none}
.clock{display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.clock b{background:var(--ink);color:#fff;border-radius:8px;padding:5px 9px;font-size:13.5px;font-weight:700}
.clock i{font-style:normal;color:var(--ink-3);font-weight:700}
.deals-head .btn-white{margin-left:auto}
.scroller{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 6px;scroll-behavior:smooth;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller>*{flex:0 0 218px}

/* split colour strips */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.strip{border-radius:var(--r-xl);padding:30px 34px;text-align:left;
  transition:transform .24s var(--ease)}
.strip:hover{transform:translateY(-4px)}
.strip b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:23px;font-weight:800;line-height:1.14}
.strip p{margin:9px 0 16px;font-size:13.5px;opacity:.8;max-width:42ch}
.strip span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700}
.strip span svg{width:16px;height:16px}
.s-sun{background:linear-gradient(130deg,#FFEFD6,#FFDCAE);color:#7A4E07}
.s-rose{background:linear-gradient(130deg,#FDE7EF,#F7D7E6);color:#8C2B4C}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px;
  border-top:4px solid var(--c,#1B9152)}
.quote p{margin:12px 0 16px;font-size:14px;line-height:1.66}
.who{display:flex;align-items:center;gap:11px}
.who span{width:40px;height:40px;border-radius:50%;background:var(--c,#1B9152);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px}
.who b{display:block;font-size:13px}
.who small{color:var(--ink-3);font-size:11.5px}

/* newsletter */
.cta{background:linear-gradient(120deg,var(--green) 0%,#15714A 50%,#0E7F84 100%);
  border-radius:var(--r-xl);padding:42px 46px;color:#fff;display:grid;
  grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;position:relative;overflow:hidden}
.cta h2{font-size:28px;font-weight:800}
.cta p{margin:8px 0 0;color:rgba(255,255,255,.82);font-size:14.5px}
.cta-form{display:flex;gap:8px;background:rgba(255,255,255,.14);padding:7px;border-radius:999px;
  position:relative;z-index:2}
.cta-form input{flex:1;background:none;border:0;padding:10px 18px;color:#fff;min-width:0}
.cta-form input::placeholder{color:rgba(255,255,255,.62)}
.cta-form input:focus{outline:none}
.cta-blob{position:absolute;width:320px;height:320px;border-radius:50%;
  background:rgba(255,255,255,.07);right:-90px;top:-120px}
.cta-blob.b2{left:-110px;bottom:-160px;top:auto;right:auto;width:280px;height:280px;
  background:rgba(255,255,255,.05)}

/* ---------- product card ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  position:relative;display:flex;flex-direction:column;
  transition:transform .24s var(--ease),box-shadow .24s,border-color .24s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
.card-img{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden;cursor:pointer}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.card:hover .card-img img{transform:scale(1.05)}
.badge{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:8px;font-size:10.5px;
  font-weight:700;background:var(--green-mid);color:#fff;z-index:2}
.badge-sale{background:var(--sale)}
.badge-tan{background:var(--violet)}
.fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:var(--ink-3);box-shadow:var(--sh);z-index:2;transition:.18s}
.fav:hover,.fav[aria-pressed="true"]{color:var(--sale)}
.card-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-cat{align-self:flex-start;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.card-body h3{font-family:"Plus Jakarta Sans",sans-serif;font-size:13.5px;font-weight:600;
  line-height:1.35;letter-spacing:0;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.card-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.card-price .money{font-family:"Bricolage Grotesque",sans-serif;font-size:17px;font-weight:800;color:var(--green)}
.card-meta{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3)}
.card-add{margin-top:auto;padding-top:10px}
.card-add .btn{width:100%}

/* ---------- shop ---------- */
.shop-hero{background:linear-gradient(120deg,var(--mint) 0%,#E9F3FF 55%,var(--violet-soft) 100%);
  padding:26px 0 30px;border-bottom:1px solid var(--line)}
.shop-hero h1{font-size:30px;font-weight:800;margin:8px 0 4px}
.shop-hero p{margin:0;color:var(--ink-2);font-size:14px}
.crumb{font-size:12.5px;color:var(--ink-2)}
.crumb a:hover,.crumb button:hover{color:var(--green-mid)}
.shop{display:grid;grid-template-columns:238px 1fr;gap:24px;padding:22px 0 44px;align-items:start}
.filt{position:sticky;top:130px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);padding:18px}
.filt h4{font-size:12.5px;font-weight:700;margin-bottom:10px}
.fgroup{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.fopt{display:flex;text-decoration:none;align-items:center;gap:9px;padding:6px 0;font-size:13.5px;color:var(--ink-2);
  width:100%;text-align:left}
.fopt:hover{color:var(--c,var(--green-mid))}
.fopt i{width:15px;height:15px;border-radius:5px;border:1.5px solid var(--line-2);display:block;
  flex:none;transition:.16s}
.fopt[aria-pressed="true"]{color:var(--ink);font-weight:700}
.fopt[aria-pressed="true"] i{background:var(--c,var(--green-mid));border-color:var(--c,var(--green-mid));
  box-shadow:inset 0 0 0 3px #fff}
.fopt.plain{padding-left:2px}
.filt-help{display:flex;gap:11px;align-items:center;background:var(--mint);border-radius:var(--r);
  padding:13px;color:var(--green)}
.filt-help b{display:block;font-size:12.5px}
.filt-help small{font-size:11.5px;color:var(--ink-2)}
.shopbar{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);padding:10px 14px;margin-bottom:14px;flex-wrap:wrap}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:var(--mint);color:var(--c,#1B9152);font-size:12px;font-weight:700;
  background:color-mix(in srgb,var(--c,#1B9152) 12%,#fff)}
.chip svg{width:12px;height:12px}
.sel{padding:9px 13px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:13.5px}

/* ---------- about ---------- */
.faqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:20px}
.faq b{font-size:14.5px}
.faq p{margin:7px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.62}

/* ---------- footer ---------- */
.ftr{background:#fff;border-top:1px solid var(--line);padding:44px 0 26px;margin-top:26px}
.ftr-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px}
.ftr img{height:36px;margin-bottom:12px}
.ftr h4{font-size:12.5px;font-weight:700;margin-bottom:12px}
.ftr a,.ftr button{display:block;color:var(--ink-2);font-size:13px;padding:4px 0;text-align:left}
.ftr a:hover,.ftr button:hover{color:var(--green-mid)}
.ftr-btm{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;display:flex;
  justify-content:space-between;gap:14px;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}

/* ---------- overlays ---------- */
.scrim{position:fixed;inset:0;background:rgba(27,34,32,.45);z-index:40;animation:fade .22s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);background:#fff;z-index:41;
  display:flex;flex-direction:column;animation:slide .36s var(--ease)}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.dr-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;
  border-bottom:1px solid var(--line)}
.dr-head h3{font-size:17px;font-weight:800}
.dr-body{flex:1;overflow-y:auto;padding:14px 22px}
.dr-foot{padding:18px 22px;border-top:1px solid var(--line);background:var(--paper)}
.cline{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.cline .thumb{width:62px;height:62px;border-radius:var(--r);overflow:hidden;background:#fff;
  border:1px solid var(--line);flex:none}
.cline .thumb img{width:100%;height:100%;object-fit:cover}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;margin-top:6px}
.qty button{width:26px;height:26px;display:grid;place-items:center;color:var(--ink-2);font-weight:700}
.qty span{min-width:24px;text-align:center;font-size:13px;font-weight:600}
.modal{position:fixed;z-index:41;top:50%;left:50%;transform:translate(-50%,-50%);width:min(940px,95vw);
  max-height:92vh;overflow-y:auto;background:#fff;border-radius:var(--r-xl);animation:pop .3s var(--ease);
  box-shadow:var(--sh-3)}
.modal-sm{width:min(440px,95vw)}
.modal-md{width:min(660px,95vw)}
@keyframes pop{from{opacity:0;transform:translate(-50%,-47%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.modal-pad{padding:28px}
.modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:var(--ink-2);box-shadow:var(--sh);z-index:3}
.modal h3{font-size:21px;font-weight:800}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

.pd{display:grid;grid-template-columns:1fr 1fr}
.pd-media{background:var(--paper);padding:22px}
.pd-main{border-radius:var(--r-m);overflow:hidden;aspect-ratio:1/1;background:#fff;border:1px solid var(--line)}
.pd-main img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.pd-thumbs button{border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;background:#fff;
  border:2px solid var(--line);transition:.18s}
.pd-thumbs button[aria-current="true"]{border-color:var(--green-mid)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover}
.pd-info{padding:28px}
.pd-info h2{font-size:24px;font-weight:800;line-height:1.18;margin:10px 0 8px}
.pd-price{display:flex;align-items:baseline;gap:10px;margin:14px 0}
.pd-price .money{font-family:"Bricolage Grotesque",sans-serif;font-size:30px;font-weight:800;color:var(--green)}
.spec{display:flex;justify-content:space-between;gap:16px;font-size:13px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.spec span:first-child{color:var(--ink-3)}
.spec span:last-child{font-weight:600;text-align:right}
.empty{padding:50px 24px;text-align:center;color:var(--ink-2)}
.empty b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:5px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:12px 22px;border-radius:999px;font-size:13.5px;font-weight:600;z-index:60;box-shadow:var(--sh-3);
  animation:tin .28s var(--ease)}
@keyframes tin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

img.img-missing{opacity:0}
.card-img,.pd-main,.tmb,.thumb,.ct-art,.b-art{background:var(--paper)}

.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr}
  .side-promos{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .promo{min-height:130px}
}
@media (max-width:1000px){
  .split{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr;padding:30px}
  .shop{grid-template-columns:1fr}
  .filt{position:static}
  .pd{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .util .right{display:none}
  .hdr-main{height:auto;padding:12px 0;flex-wrap:wrap}
  .searchbar{order:4;flex-basis:100%}
  .cat-btn span{display:none}
  .cat-btn{padding:11px 13px}
  .hbtn .lbl{display:none}
  .qn-note{display:none}
  .b-slide{grid-template-columns:1fr;padding:24px}
  .b-art{display:none}
  .banner{height:280px}
  .b-ctrl{left:24px}
}
@media (max-width:620px){
  .wrap{padding:0 14px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .side-promos{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .sec{padding:26px 0}
  .shop-hero h1{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   Added for the live store: reviews, auth pages, pagination,
   order detail and payment handoff.
   ============================================================ */
.page-head{background:linear-gradient(120deg,var(--mint) 0%,#E9F3FF 55%,var(--violet-soft) 100%);
  padding:26px 0 30px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:30px;font-weight:800;margin:8px 0 4px}
.page-head p{margin:0;color:var(--ink-2);font-size:14px}

.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px}
.pagination a{display:inline-flex}
.pagination button{min-width:38px;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);
  background:#fff;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.pagination button:hover:not([disabled]){border-color:var(--green-mid);color:var(--green-mid)}
.pagination button[aria-current="true"]{background:var(--green-mid);border-color:var(--green-mid);color:#fff}
.pagination button[disabled]{opacity:.4;cursor:not-allowed}

/* product detail page */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:34px;padding:26px 0 44px;align-items:start}
.gallery-main{border-radius:var(--r-l);overflow:hidden;aspect-ratio:1/1;background:#fff;
  border:1px solid var(--line)}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.gallery-thumbs button{border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;background:#fff;
  border:2px solid var(--line);transition:.18s}
.gallery-thumbs button[aria-current="true"]{border-color:var(--green-mid)}
.gallery-thumbs img{width:100%;height:100%;object-fit:cover}
.buybox{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:26px;
  position:sticky;top:130px}
.buybox h1{font-size:25px;font-weight:800;line-height:1.2;margin:10px 0 10px}
.buybox .pd-price{margin:16px 0}
.stock-line{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin:12px 0}
.stock-line.in{color:var(--green-mid)}
.stock-line.low{color:var(--sun)}
.stock-line.out{color:var(--sale)}
.qty-row{display:flex;gap:10px;align-items:center;margin:16px 0}
.buy-actions{display:grid;gap:9px}
.ship-note{display:flex;gap:10px;align-items:flex-start;background:var(--mint);border-radius:var(--r);
  padding:13px;margin-top:16px;font-size:12.5px;color:var(--green)}

/* reviews */
.reviews{padding:0 0 50px}
.review-summary{display:grid;grid-template-columns:200px 1fr;gap:28px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-l);padding:24px;margin-bottom:18px;align-items:center}
.review-score{text-align:center}
.review-score b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:46px;
  font-weight:800;line-height:1}
.review-score small{display:block;color:var(--ink-3);font-size:12px;margin-top:6px}
.bar-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-2);margin-bottom:6px}
.bar{flex:1;height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:#F0A92B;border-radius:999px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:20px;margin-bottom:10px}
.review-head{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.review-head .who span{width:38px;height:38px;border-radius:50%;background:var(--mint);color:var(--green);
  display:grid;place-items:center;font-weight:700;font-size:14px}
.review b.r-title{display:block;font-size:14.5px;margin-bottom:4px}
.review p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.66}
.review-date{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.rating-input{display:flex;gap:4px;margin-bottom:12px}
.rating-input button{width:34px;height:34px;display:grid;place-items:center;color:var(--line-2);
  border-radius:8px}
.rating-input button[aria-pressed="true"],.rating-input button.lit{color:#F0A92B}
.rating-input svg{width:24px;height:24px}

/* auth and account */
.auth-page{max-width:430px;margin:0 auto;padding:44px 0 60px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:30px}
.auth-card h1{font-size:23px;font-weight:800;margin-bottom:6px}
.auth-switch{text-align:center;font-size:13px;color:var(--ink-2);margin-top:16px}
.auth-switch button{color:var(--green-mid);font-weight:700}
.form-error{background:#FBE9E6;color:var(--sale);border-radius:var(--r);padding:11px 14px;
  font-size:13px;font-weight:600;margin-bottom:14px}
.form-note{background:var(--mint);color:var(--green);border-radius:var(--r);padding:11px 14px;
  font-size:13px;font-weight:600;margin-bottom:14px}

.checkout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;padding:26px 0 50px;
  align-items:start}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:22px;
  position:sticky;top:130px}
.summary h3{font-size:16px;font-weight:800;margin-bottom:14px}
.sum-line{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:6px 0}
.sum-total{display:flex;justify-content:space-between;border-top:1px solid var(--line);
  margin-top:10px;padding-top:12px;font-size:17px}
.pay-option{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);
  border-radius:var(--r-m);padding:14px;margin-bottom:9px;cursor:pointer;transition:.18s}
.pay-option:hover{border-color:var(--green-mid)}
.pay-option[aria-checked="true"]{border-color:var(--green-mid);background:var(--mint)}
.pay-option input{margin-top:3px}
.pay-option b{display:block;font-size:14px}
.pay-option small{color:var(--ink-2);font-size:12px}

.order-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);margin-bottom:14px;
  overflow:hidden}
.order-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.order-line{display:flex;gap:12px;align-items:center;padding:9px 0}
.order-line .tmb{width:54px;height:54px;border-radius:var(--r);overflow:hidden;background:var(--paper);
  flex:none;border:1px solid var(--line)}
.order-line .tmb img{width:100%;height:100%;object-fit:cover}

.loading{display:grid;place-items:center;padding:70px 0;color:var(--ink-3);font-size:14px}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--green-mid);animation:spin .8s linear infinite;margin-bottom:12px}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,#EEF2F0 25%,#F7FAF8 50%,#EEF2F0 75%);
  background-size:400% 100%;animation:shimmer 1.3s ease-in-out infinite;border-radius:var(--r-m)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk-card{height:290px}

@media (max-width:1000px){
  .pdp{grid-template-columns:1fr}
  .buybox{position:static}
  .checkout{grid-template-columns:1fr}
  .summary{position:static}
  .review-summary{grid-template-columns:1fr}
}

/* ============================================================
   MOBILE AND RESPONSIVE LAYER
   ------------------------------------------------------------
   Added after a measured audit at 360, 390, 414 and 768 px.
   Three classes of problem were found and are fixed here.

   1. Grid blowout. Several layouts collapse to one column with
      `grid-template-columns:1fr`, but a `1fr` track still has a
      minimum size of `auto`, so wide content pushes the track
      past the viewport. The product page overflowed by 120 px
      and the admin panel by up to 450 px for this reason alone.
      `minmax(0,1fr)` lets the track shrink, which is what the
      single-column rules were meant to do.

   2. Tap targets. Header, footer and pagination controls were
      between 15 and 39 px tall. Anything a finger has to hit is
      brought to 44 px, the size below which misses become
      common.

   3. Text inputs under 16 px. Mobile Safari zooms the page in
      when a smaller field is focused and does not zoom back out,
      which leaves the customer stranded mid-checkout.
   ============================================================ */

/* --- 1. Let every single-column layout actually shrink ------- */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1000px){
  .split,.cta,.shop,.pd,.pdp,.checkout,.review-summary,.g2{
    grid-template-columns:minmax(0,1fr)}
  /* Flex and grid children do not shrink below their content
     unless told to, which is the other half of the same bug. */
  .pdp>*,.shop>*,.checkout>*,.cta>*,.split>*,.pd>*{min-width:0}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Nothing may draw wider than the screen. */
img,video,canvas,svg,iframe{max-width:100%}
.wrap,.panel,.order-card,.setting-card{min-width:0}

/* --- 2. Phone layout --------------------------------------- */
@media (max-width:620px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side-promos{grid-template-columns:minmax(0,1fr)}

  /* The call to action loses its generous desktop padding, which
     is what pushed the newsletter field past the screen edge. */
  .cta{padding:26px 20px;border-radius:var(--r-l)}
  .cta h2{font-size:22px}
  .cta-form{flex-wrap:wrap;border-radius:var(--r-l);padding:8px}
  .cta-form input{flex:1 1 100%;padding:12px 14px}
  .cta-form .btn{flex:1 1 100%;justify-content:center}
  .cta-blob{display:none}

  /* Product page: image first, then the buy box, both full width. */
  .pdp{padding:14px 0 32px;gap:18px}
  .buybox{padding:18px;border-radius:var(--r-l)}
  .buybox h1{font-size:21px}
  .gallery-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}

  /* Two columns of footer links is cramped under about 400 px. */
  .ftr-grid{gap:22px}
  .ftr-btm{flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
}

@media (max-width:420px){
  /* One product per row below this width. Two columns leaves the
     name and price too narrow to read at a glance. */
  .grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ftr-grid{grid-template-columns:minmax(0,1fr)}
  .page-head h1,.shop-hero h1{font-size:21px}
  .sec{padding:22px 0}
}

/* --- 3. Touch targets and typing --------------------------- */
/* Keyed on width rather than on `pointer:coarse` alone. Pointer
   detection is not reliable on hybrid laptops or in some in-app
   browsers, and a narrow screen is almost always a touch screen,
   so width is the safer signal. The coarse-pointer block below
   then adds the cases that only matter to a finger. */
@media (max-width:860px){
  .hbtn,.cat-btn,.btn,.pager button{min-height:44px}
  .hbtn{padding:10px 12px}
  .btn-sm{min-height:40px;padding:9px 14px}
  /* Footer links were 15 px tall, which is a coin toss to hit. */
  .ftr a,.ftr button{padding:11px 0;min-height:42px}
  .ftr-legal a{padding:9px 0;min-height:38px}
  .crumb a{display:inline-block;padding:7px 0;min-height:32px}
  .qty button{min-width:42px;min-height:42px}
  .switch-row input{width:22px;height:22px}

  /* 16 px is the threshold below which mobile Safari zooms in on
     focus and does not zoom back out. */
  .field input,.field select,.field textarea,.searchbar input,.cta-form input{font-size:16px}
}

@media (pointer:coarse){
  .gallery-thumbs button{min-height:44px}
  .tag,.chip{min-height:32px}
}

/* --- 4. Respect the notch and the home indicator ----------- */
@media (max-width:860px){
  .wrap{padding-left:max(14px,env(safe-area-inset-left));
        padding-right:max(14px,env(safe-area-inset-right))}
  .ftr{padding-bottom:max(24px,env(safe-area-inset-bottom))}
}

/* --- 5. Tables in page copy -------------------------------- */
/* Used on the privacy page. A table of two text columns cannot
   shrink indefinitely, so it scrolls sideways inside its own box
   rather than widening the page. */
.tbl{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.tbl th{text-align:left;font-weight:700;font-size:12.5px;color:var(--ink-2);
  padding:10px 12px;border-bottom:1.5px solid var(--line)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
@media (max-width:620px){
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal}
  .tbl th,.tbl td{min-width:150px}
}

/* --- 6. Controls added with the policy pages and cancelling -- */
.ftr-legal{display:flex;flex-wrap:wrap;gap:4px 16px}
.ftr-legal a{display:inline-block;color:var(--ink-2);font-size:12.5px;padding:2px 0}
.ftr-legal a:hover{color:var(--green-mid)}
.order-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.order-actions .sub{margin:0;font-size:12.5px}
@media (max-width:480px){
  .order-actions{gap:8px}
  .order-actions .btn{width:100%;justify-content:center}
}

/* Long words, order numbers and email addresses must not push the
   layout wide on a narrow screen. */
.order-card-head b,.ord-no,.sub,.muted{overflow-wrap:break-word}

/* Filter options and section links are tapped as often as buttons,
   so they get a finger-sized hit area on narrow screens. Inline
   links inside a sentence are deliberately left alone: stretching
   those would open gaps in the paragraph around them. */
@media (max-width:860px){
  .fopt{min-height:44px;display:flex;align-items:center}
  .sec-head a,.sec-head button{min-height:40px;display:inline-flex;align-items:center}
  .filt{padding-bottom:4px}
}

/* The category strip under the header was clipped on a phone: the
   last link sat beyond the right edge with no way to reach it.
   It scrolls sideways instead, with the scrollbar hidden so it
   reads as part of the design rather than as a stray control. */
@media (max-width:860px){
  .quicknav .wrap{display:flex;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .quicknav .wrap::-webkit-scrollbar{display:none}
  .quicknav a{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center}
  /* A little padding at the end so the last link clears the edge
     and it is visibly a strip that keeps going. */
  .quicknav .wrap::after{content:'';flex:0 0 8px}
}

/* Header on a phone.
   Below 860px the search bar wraps onto its own line. Nothing then filled
   the first row, so the logo, the menu button and the account and cart
   icons all bunched against the left edge with about 60px of dead space on
   the right, which put a heavy green pill immediately beside the wordmark.
   Pushing the icons to the right edge spreads the row and separates the
   two. */
@media (max-width:860px){
  .hdr-main{gap:18px;row-gap:10px}
  .hdr-right{margin-left:auto}
  /* A slightly smaller wordmark, so the pill beside it does not dominate
     the row. Pushing the icons right frees over 100px, which is spent on
     the gap between the wordmark and the menu button rather than left as
     a hole at the end of the row. */
  .logo img{height:34px}
  .cat-btn{padding:10px 14px;gap:7px}
}

@media (max-width:420px){
  .hdr-main{gap:16px}
  .logo img{height:30px}
}