/* ==========================================================================
   Pro Peptide Australia — Design System 2026
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --ink:#080C10;
  --ink-2:#101822;
  --ink-3:#1B2632;
  --brand:#0B5F52;
  --brand-600:#0A5348;
  --brand-700:#08423A;
  --accent:#00C9A7;
  --accent-2:#3EE0B4;
  --accent-soft:#E6FBF6;
  --sale:#C81E23;
  --gold:#C9A961;

  /* Neutrals */
  --bone:#FAFBFB;
  --paper:#FFFFFF;
  --line:#E7EBEC;
  --line-2:#F0F3F4;
  --muted:#5C6B72;
  --muted-2:#667479;

  /* Type */
  --font-display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;

  /* Space & shape */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px; --r-full:999px;
  --shadow-xs:0 1px 2px rgba(8,12,16,.05);
  --shadow-sm:0 2px 8px rgba(8,12,16,.05),0 1px 2px rgba(8,12,16,.04);
  --shadow:0 10px 30px -12px rgba(8,12,16,.14),0 2px 8px rgba(8,12,16,.04);
  --shadow-lg:0 28px 60px -22px rgba(8,12,16,.24),0 6px 18px rgba(8,12,16,.06);
  --shadow-glow:0 18px 46px -18px rgba(11,95,82,.5);

  --wrap:1280px;
  --hdr:112px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 20px)}
body{overflow-x:hidden;
  font-family:var(--font-body);
  font-size:16px;line-height:1.65;color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
  overflow-x:hidden;
}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--ink)}

h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
h1{font-size:clamp(2.4rem,5.6vw,4.35rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.02em}
h4{font-size:1.075rem;letter-spacing:-.015em}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,880px);margin-inline:auto}
.section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.section-sm{padding:clamp(2.5rem,4.5vw,4rem) 0}
.bg-bone{background:var(--bone)}
.bg-ink{background:var(--ink);color:#DCE5EA}
.bg-ink h2,.bg-ink h3,.bg-ink h4{color:#fff}

.sec-head{margin-bottom:clamp(2rem,3.5vw,3.25rem)}
.sec-head.center{text-align:center;max-width:730px;margin-inline:auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.71rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);margin-bottom:.85rem;
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--brand))}
.sec-head.center .eyebrow::after{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--accent))}
.bg-ink .eyebrow{color:var(--accent-2)}
.sec-sub{color:var(--muted);font-size:1.055rem;margin-top:.9rem;max-width:62ch}
.sec-head.center .sec-sub{margin-inline:auto}
.bg-ink .sec-sub{color:#A2B3BA}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.65rem;border-radius:var(--r-full);
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  font-weight:700;font-size:.925rem;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .25s,color .25s,border-color .25s;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(120deg,var(--brand),var(--accent));
  opacity:0;transition:opacity .35s var(--ease);
}
.btn:hover{transform:translateY(-2.5px);box-shadow:var(--shadow-glow)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{--bg:linear-gradient(120deg,var(--brand) 0%,#0d7a68 55%,var(--accent) 130%)}
.btn-primary::after{background:linear-gradient(120deg,#0d7a68,var(--accent))}
.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn-ghost:hover{--fg:#fff;--bd:transparent}
.btn-light{--bg:#fff;--fg:var(--ink)}
.btn-light:hover{--fg:#fff}
.btn-outline-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.28)}
.btn-outline-light:hover{--bd:transparent}
.btn-lg{padding:1.15rem 2.1rem;font-size:1rem}
.btn-sm{padding:.65rem 1.15rem;font-size:.83rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .ic{width:17px;height:17px;flex:none;transition:transform .35s var(--ease)}
.btn:hover .ic-arrow{transform:translateX(4px)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.92rem;
  color:var(--brand);transition:gap .3s var(--ease),color .2s;
}
.link-arrow:hover{gap:.8rem;color:var(--accent)}
.bg-ink .link-arrow{color:var(--accent-2)}

/* ---------- Header ---------- */
.announce{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
}
.announce::before,.announce::after{
  content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none;
}
.announce::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.announce::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.ticker{display:flex;width:max-content;animation:ticker 42s linear infinite;overflow:hidden}
.ticker:hover{animation-play-state:paused}
.ticker-row{display:flex;align-items:center;padding:.62rem 0}
.ticker-row span{display:inline-flex;align-items:center;gap:.5rem;padding-inline:1.5rem;white-space:nowrap;color:#D3DEE2}
.ticker-row span b{color:var(--accent-2);font-weight:700}
.ticker-row span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--brand);margin-left:1.5rem;box-shadow:0 0 0 2px rgba(0,201,167,.2)}
@keyframes ticker{to{transform:translateX(-50%)}}

.promo-bar{
  background:linear-gradient(100deg,var(--brand) 0%,#0d7a68 45%,#00a98d 100%);
  color:#fff;text-align:center;font-size:.83rem;font-weight:600;padding:.6rem 1rem;
  display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;
}
.promo-bar b{background:rgba(255,255,255,.18);padding:.16rem .6rem;border-radius:var(--r-full);font-weight:800;letter-spacing:.04em;backdrop-filter:blur(6px)}
.promo-bar a{text-decoration:underline;text-underline-offset:3px;font-weight:800}

.hdr{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--line);transition:box-shadow .3s,background .3s}
.hdr.scrolled{box-shadow:0 6px 26px -14px rgba(8,12,16,.2)}
.hdr-in{display:flex;align-items:center;gap:1.6rem;height:78px}
.logo{display:flex;align-items:center;flex:none;transition:opacity .25s}
.logo:hover{opacity:.72}
.logo img{height:52px;width:auto}

.nav{display:flex;align-items:center;gap:.15rem;margin-left:.5rem}
.nav > li{position:relative}
.nav-link{
  display:flex;align-items:center;gap:.35rem;padding:.62rem .85rem;border-radius:var(--r-full);
  font-weight:650;font-size:.915rem;color:var(--ink-2);letter-spacing:-.01em;
  transition:color .22s,background .22s;
}
.nav-link:hover,.nav-link[aria-expanded=true],.nav-link.active{color:var(--brand);background:var(--accent-soft)}
.nav-link .chev{width:13px;height:13px;transition:transform .3s var(--ease);opacity:.6}
.nav-link[aria-expanded=true] .chev{transform:rotate(180deg)}

/* Mega menu */
.mega{
  position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;
  width:min(94vw,880px);background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);padding:1.6rem;
  display:grid;grid-template-columns:1.35fr .85fr;gap:1.6rem;
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);
  transition:opacity .3s var(--ease),transform .35s var(--ease-out),visibility .3s;
}
.mega.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.mega-item{display:flex;gap:.85rem;padding:.8rem;border-radius:var(--r);transition:background .22s,transform .28s var(--ease)}
.mega-item:hover{background:var(--bone);transform:translateX(3px)}
.mega-ic{
  width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent-soft),#fff);border:1px solid #D8F2EB;color:var(--brand);
}
.mega-ic svg{width:19px;height:19px}
.mega-item strong{display:block;font-size:.9rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.mega-item span{display:block;font-size:.775rem;color:var(--muted);line-height:1.45;margin-top:.12rem}
.mega-item em{font-style:normal;font-size:.7rem;color:var(--brand);font-weight:700}
.mega-side{background:linear-gradient(160deg,var(--ink) 0%,var(--ink-3) 100%);border-radius:var(--r-lg);padding:1.4rem;color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;position:relative;overflow:hidden}
.mega-side::before{content:"";position:absolute;width:200px;height:200px;background:radial-gradient(circle,rgba(0,201,167,.3),transparent 70%);top:-70px;right:-60px}
.mega-side h4{color:#fff;font-size:1.1rem;margin-bottom:.4rem;position:relative}
.mega-side p{font-size:.82rem;color:#A8B9C0;position:relative}
.mega-side .btn{position:relative}

.hdr-actions{display:flex;align-items:center;gap:.35rem;margin-left:auto}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:var(--r-full);
  display:grid;place-items:center;color:var(--ink-2);
  transition:background .22s,color .22s,transform .25s var(--ease);
}
.icon-btn:hover{background:var(--accent-soft);color:var(--brand);transform:translateY(-1.5px)}
.icon-btn svg{width:20px;height:20px}
.badge-count{
  position:absolute;top:2px;right:1px;min-width:18px;height:18px;padding:0 5px;
  background:var(--sale);color:#fff;border-radius:var(--r-full);
  font-size:.66rem;font-weight:800;display:grid;place-items:center;
  border:2px solid #fff;transform:scale(0);transition:transform .35s var(--ease-out);
}
.badge-count.show{transform:scale(1)}
.burger{display:none}

/* ---------- Search overlay ---------- */
.search-ov{
  position:fixed;inset:0;z-index:400;background:rgba(8,12,16,.55);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;padding:12vh 1.25rem 2rem;
}
.search-ov.open{opacity:1;visibility:visible}
.search-box{
  width:min(100%,720px);margin-inline:auto;background:#fff;border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);overflow:hidden;transform:translateY(-18px) scale(.98);
  transition:transform .4s var(--ease-out);
}
.search-ov.open .search-box{transform:none}
.search-in{display:flex;align-items:center;gap:.85rem;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line)}
.search-in svg{width:21px;height:21px;color:var(--muted);flex:none}
.search-in input{flex:1;border:0;font-size:1.08rem;font-weight:600;outline:0;background:none}
.search-in input::placeholder{color:var(--muted-2);font-weight:500}
.search-esc{font-size:.68rem;font-weight:800;color:var(--muted);border:1px solid var(--line);padding:.22rem .5rem;border-radius:7px}
.search-res{max-height:52vh;overflow-y:auto;padding:.55rem}
.search-hint{padding:1.5rem;text-align:center;color:var(--muted);font-size:.88rem}
.sr-item{display:flex;align-items:center;gap:.95rem;padding:.65rem;border-radius:var(--r);transition:background .18s}
.sr-item:hover,.sr-item.sel{background:var(--bone)}
.sr-item img{width:50px;height:50px;object-fit:contain;border-radius:10px;background:var(--bone);flex:none}
.sr-item strong{display:block;font-size:.9rem;font-weight:700;color:var(--ink)}
.sr-item span{font-size:.76rem;color:var(--muted)}
.sr-item .sr-price{margin-left:auto;font-weight:800;color:var(--brand);font-size:.92rem}
.search-quick{display:flex;flex-wrap:wrap;gap:.45rem;padding:1rem 1.4rem;border-top:1px solid var(--line-2);background:var(--bone)}
.search-quick b{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);width:100%;margin-bottom:.15rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.36rem .8rem;border-radius:var(--r-full);background:#fff;border:1px solid var(--line);font-size:.79rem;font-weight:650;transition:all .22s var(--ease)}
.chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1.5px);box-shadow:var(--shadow-sm)}

/* ---------- Mobile drawer ---------- */
.m-nav{
  position:fixed;top:0;right:0;bottom:0;width:min(90vw,400px);z-index:420;
  background:#fff;transform:translateX(101%);transition:transform .45s var(--ease-out);
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
}
.m-nav.open{transform:none}
.m-nav-hd{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.35rem;border-bottom:1px solid var(--line)}
.m-nav-hd img{height:32px}
.m-nav-body{flex:1;overflow-y:auto;padding:1rem 1.35rem 2rem}
.m-link{display:flex;align-items:center;justify-content:space-between;padding:.95rem 0;font-weight:700;font-size:1.06rem;border-bottom:1px solid var(--line-2);letter-spacing:-.02em}
.m-link svg{width:16px;height:16px;color:var(--muted-2);transition:transform .3s}
.m-sub{max-height:0;overflow:hidden;transition:max-height .45s var(--ease-out)}
.m-sub a{display:flex;justify-content:space-between;padding:.62rem 0 .62rem 1rem;font-size:.92rem;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line-2)}
.m-sub a:hover{color:var(--brand)}
.m-sub a em{font-style:normal;font-size:.78rem;color:var(--muted)}
.m-acc.open + .m-sub{max-height:520px}
.m-acc.open svg{transform:rotate(180deg)}
.m-nav-ft{padding:1.25rem 1.35rem;border-top:1px solid var(--line);background:var(--bone);display:grid;gap:.6rem}
.m-nav-ft a.mail{font-size:.85rem;color:var(--muted);font-weight:600;text-align:center}

.scrim{position:fixed;inset:0;background:rgba(8,12,16,.5);backdrop-filter:blur(3px);z-index:410;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.scrim.open{opacity:1;visibility:visible}
body.locked{overflow:hidden}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 78% -6%,rgba(0,201,167,.16),transparent 62%),
    radial-gradient(760px 500px at 4% 100%,rgba(11,95,82,.11),transparent 60%),
    linear-gradient(178deg,#FBFDFD 0%,#F2F7F6 100%);
  padding:clamp(3rem,6.5vw,5.5rem) 0 clamp(3.5rem,6vw,5rem);
}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.pill{
  display:inline-flex;align-items:center;gap:.55rem;padding:.44rem .95rem .44rem .5rem;
  background:rgba(255,255,255,.85);border:1px solid rgba(11,95,82,.16);border-radius:var(--r-full);
  font-size:.775rem;font-weight:700;color:var(--brand-700);backdrop-filter:blur(10px);
  box-shadow:0 2px 12px rgba(11,95,82,.07);
}
.pill i{
  width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent));
  display:grid;place-items:center;flex:none;
}
.pill i svg{width:11px;height:11px;color:#fff}
.hero h1{margin:1.35rem 0 0}
.hero h1 .grad{
  background:linear-gradient(105deg,var(--brand) 10%,#0d8a74 45%,var(--accent) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{font-size:clamp(1.02rem,1.5vw,1.155rem);color:var(--muted);margin-top:1.35rem;max-width:53ch;line-height:1.72}
.hero-cta{display:flex;gap:.8rem;margin-top:2.1rem;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:2.6rem;padding-top:2.1rem;border-top:1px solid rgba(11,95,82,.13)}
.hero-stats b{display:block;font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.72rem);font-weight:800;color:var(--ink);letter-spacing:-.035em}
.hero-stats span{font-size:.735rem;color:var(--muted);font-weight:600;line-height:1.35;display:block;margin-top:.16rem}

.hero-visual{position:relative}
.hero-card{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(155deg,#fff,#F3F8F7);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 40px 80px -34px rgba(8,40,34,.32),0 0 0 1px rgba(11,95,82,.06);
  padding:2rem;aspect-ratio:1/1;display:grid;place-items:center;
}
.hero-card::before{
  content:"";position:absolute;inset:0;
  background:conic-gradient(from 210deg at 50% 50%,rgba(0,201,167,.14),transparent 28%,rgba(11,95,82,.1) 62%,transparent 88%);
  animation:spin 26s linear infinite;
}
@keyframes spin{to{rotate:360deg}}
.hero-card img{position:relative;width:82%;filter:drop-shadow(0 30px 42px rgba(8,40,34,.24))}
.hero-float{
  position:absolute;background:rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.95);border-radius:var(--r-lg);padding:.85rem 1.1rem;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:.75rem;
  animation:float 6s ease-in-out infinite;
}
.hero-float b{display:block;font-size:.87rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.hero-float span{font-size:.72rem;color:var(--muted);font-weight:600}
.hero-float i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;background:linear-gradient(140deg,var(--brand),var(--accent))}
.hero-float i svg{width:17px;height:17px;color:#fff}
.hf-1{top:8%;left:-5%;animation-delay:-1s}
.hf-2{bottom:11%;right:-4%;animation-delay:-3.2s}
.hf-3{bottom:-3%;left:8%;animation-delay:-5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ---------- USP strip ---------- */
.usp{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem}
.usp-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.55rem;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s;
  position:relative;overflow:hidden;
}
.usp-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.usp-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.usp-card:hover::after{transform:scaleX(1)}
.usp-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.05rem;background:linear-gradient(140deg,var(--accent-soft),#fff);border:1px solid #D8F2EB;color:var(--brand)}
.usp-ic svg{width:22px;height:22px}
.usp-card h4{margin-bottom:.42rem}
.usp-card p{font-size:.865rem;color:var(--muted);line-height:1.62}

/* ---------- Product card ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.35rem}
.pgrid-3{grid-template-columns:repeat(3,1fr)}
.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .42s var(--ease-out),box-shadow .42s var(--ease-out),border-color .3s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#DCE6E4}
.card-media{position:relative;aspect-ratio:1/1;background:linear-gradient(165deg,#FCFDFD,#F2F6F5);overflow:hidden;display:block}
.card-media img{width:100%;height:100%;object-fit:contain;padding:9%;transition:transform .65s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.075)}
.card-badges{position:absolute;top:.8rem;left:.8rem;display:flex;flex-direction:column;gap:.35rem;z-index:2}
.tagx{
  display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .62rem;border-radius:var(--r-full);
  font-size:.66rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase;backdrop-filter:blur(8px);
}
.t-sale{background:var(--sale);color:#fff;box-shadow:0 4px 12px rgba(200,30,35,.3)}
.t-new{background:var(--ink);color:#fff}
.t-best{background:linear-gradient(120deg,var(--brand),var(--accent));color:#fff}
.t-oos{background:rgba(92,107,114,.9);color:#fff}
.card-tools{position:absolute;top:.8rem;right:.8rem;display:flex;flex-direction:column;gap:.4rem;z-index:2;opacity:0;transform:translateX(10px);transition:opacity .35s var(--ease),transform .4s var(--ease-out)}
.card:hover .card-tools,.card:focus-within .card-tools{opacity:1;transform:none}
.tool{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  display:grid;place-items:center;color:var(--ink-2);box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.045);
  transition:all .25s var(--ease);
}
.tool:hover{background:var(--ink);color:#fff;transform:scale(1.1)}
.tool svg{width:16px;height:16px}
.tool.on{background:var(--sale);color:#fff;border-color:transparent}
.tool.on.cmp{background:var(--brand)}
.card-qv{
  position:absolute;left:.8rem;right:.8rem;bottom:.8rem;z-index:2;
  padding:.65rem;border-radius:var(--r-full);background:rgba(8,12,16,.88);backdrop-filter:blur(12px);
  color:#fff;font-size:.8rem;font-weight:700;text-align:center;
  opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease),transform .4s var(--ease-out),background .25s;
}
.card:hover .card-qv{opacity:1;transform:none}
.card-qv:hover{background:var(--brand)}
.card-body{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;flex:1;gap:.42rem}
.card-cat{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.card-title{font-size:1rem;font-weight:750;letter-spacing:-.022em;color:var(--ink);line-height:1.32}
.card-title a:hover{color:var(--brand)}
.card-meta{display:flex;align-items:center;gap:.4rem;font-size:.755rem;color:var(--muted)}
.stars{display:inline-flex;gap:1px}
.stars svg{width:12.5px;height:12.5px;color:var(--gold)}
.stars svg.off{color:#DDE3E4}
.card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:.7rem;margin-top:auto;padding-top:.7rem}
.price{display:flex;align-items:baseline;gap:.42rem;flex-wrap:wrap}
.price b{font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--ink);letter-spacing:-.035em}
.price s{font-size:.83rem;color:var(--muted);font-weight:600}
.price .save{font-size:.68rem;font-weight:800;color:var(--sale);background:rgba(200,30,35,.09);padding:.1rem .42rem;border-radius:5px;width:100%}
.add-btn{
  width:42px;height:42px;flex:none;border-radius:var(--r-full);background:var(--ink);color:#fff;
  display:grid;place-items:center;transition:all .3s var(--ease);
}
.add-btn:hover{background:linear-gradient(120deg,var(--brand),var(--accent));transform:scale(1.09) rotate(4deg);box-shadow:var(--shadow-glow)}
.add-btn svg{width:18px;height:18px}
.add-btn.done{background:var(--brand)}
.stock-line{display:inline-flex;align-items:center;gap:.35rem;font-size:.73rem;font-weight:700;color:var(--brand)}
.stock-line i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(0,201,167,.18);animation:pulse 2.4s ease-in-out infinite}
.stock-line.out{color:var(--muted)}
.stock-line.out i{background:var(--muted-2);box-shadow:none;animation:none}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(0,201,167,0)}}

/* Skeleton */
.skel{background:linear-gradient(100deg,#EFF2F3 30%,#F8FAFA 50%,#EFF2F3 70%);background-size:220% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{to{background-position:-220% 0}}
.card-skel .card-media{background:#F1F4F5}
.card-skel .sk-l{height:11px;margin-bottom:.55rem}

/* ---------- Category tiles ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.35rem}
.cat-tile{
  position:relative;border-radius:var(--r-lg);overflow:hidden;padding:1.85rem;min-height:230px;
  background:linear-gradient(158deg,var(--ink) 0%,var(--ink-3) 100%);color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.cat-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.cat-tile::before{
  content:"";position:absolute;width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,201,167,.28),transparent 68%);
  top:-90px;right:-80px;transition:transform .7s var(--ease-out);
}
.cat-tile:hover::before{transform:scale(1.45) translate(-14px,14px)}
.cat-tile img{position:absolute;right:-8px;bottom:-14px;width:132px;opacity:.3;filter:grayscale(1) brightness(2.2);transition:transform .7s var(--ease-out),opacity .5s;mix-blend-mode:luminosity}
.cat-tile:hover img{transform:scale(1.1) translateY(-8px);opacity:.42}
.cat-tile .n{position:relative;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2)}
.cat-tile h3{position:relative;color:#fff;margin:.55rem 0 .5rem;font-size:1.28rem}
.cat-tile p{position:relative;font-size:.83rem;color:#A3B4BB;line-height:1.6;max-width:34ch}
.cat-tile .go{position:relative;display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;font-size:.85rem;font-weight:700;color:#fff;transition:gap .3s}
.cat-tile:hover .go{gap:.85rem}
.cat-tile .go svg{width:15px;height:15px}

/* ---------- Split / feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.feat-list{display:grid;gap:1.05rem;margin-top:1.9rem}
.feat{display:flex;gap:1rem;align-items:flex-start}
.feat-ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:linear-gradient(140deg,var(--brand),var(--accent));color:#fff;box-shadow:0 6px 16px -6px rgba(11,95,82,.5)}
.feat-ic svg{width:18px;height:18px}
.feat strong{display:block;font-weight:750;color:var(--ink);letter-spacing:-.018em;margin-bottom:.16rem;font-size:1rem}
.feat p{font-size:.885rem;color:var(--muted);line-height:1.65}
.bg-ink .feat strong{color:#fff}
.bg-ink .feat p{color:#A2B3BA}

.glass-panel{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:var(--r-xl);
  padding:2rem;backdrop-filter:blur(18px);
}
.spec-rows{display:grid;gap:.05rem}
.spec-row{display:flex;justify-content:space-between;gap:1rem;padding:.95rem .2rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:.9rem}
.spec-row:last-child{border:0}
.spec-row span{color:#A2B3BA;font-weight:600}
.spec-row b{color:#fff;font-weight:750;font-family:var(--font-mono);font-size:.85rem}
.spec-row b.ok{color:var(--accent-2)}

/* ---------- Testimonials ---------- */
.rev-head{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;justify-content:center;margin-top:1.4rem}
.rev-score{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-full);padding:.55rem 1.15rem;box-shadow:var(--shadow-sm)}
.rev-score b{font-family:var(--font-display);font-size:1.35rem;font-weight:800;letter-spacing:-.04em}
.rev-score small{font-size:.76rem;color:var(--muted);font-weight:600}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:1.25rem;width:max-content;animation:ticker 68s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.rev-card{
  width:370px;flex:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.6rem;display:flex;flex-direction:column;gap:.85rem;
  transition:transform .4s var(--ease-out),box-shadow .4s;
}
.rev-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rev-card p{font-size:.925rem;color:var(--ink-2);line-height:1.72;flex:1}
.rev-who{display:flex;align-items:center;gap:.7rem;padding-top:.85rem;border-top:1px solid var(--line-2)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#fff;background:linear-gradient(140deg,var(--brand),var(--accent));flex:none}
.rev-who strong{display:block;font-size:.87rem;font-weight:750;color:var(--ink)}
.rev-who span{font-size:.73rem;color:var(--muted);display:flex;align-items:center;gap:.3rem}
.gicon{width:13px;height:13px}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:.75rem}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq-item[open]{border-color:#CDE8E1;box-shadow:var(--shadow-sm)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.15rem 1.4rem;font-weight:700;font-size:.985rem;color:var(--ink);
  cursor:pointer;list-style:none;letter-spacing:-.015em;transition:color .22s;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--brand)}
.faq-q i{
  width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;position:relative;transition:all .32s var(--ease);
}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform .32s var(--ease)}
.faq-q i::before{width:11px;height:1.8px}
.faq-q i::after{width:1.8px;height:11px}
.faq-item[open] .faq-q i{background:var(--brand);border-color:var(--brand);color:#fff;rotate:135deg}
.faq-item[open] .faq-q i::after{transform:scaleY(0)}
.faq-a{padding:0 1.4rem 1.35rem;color:var(--muted);font-size:.925rem;line-height:1.75;max-width:82ch}
.faq-a p+p,.faq-a ul{margin-top:.75rem}
.faq-a ul{display:grid;gap:.4rem;padding-left:1.1rem;list-style:disc}
.faq-a strong{color:var(--ink-2)}
.faq-a a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- CTA banner ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(2.5rem,5vw,4.2rem);
  background:linear-gradient(130deg,var(--ink) 0%,#0d3b34 55%,var(--brand) 130%);
  color:#fff;text-align:center;
}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 50% 0%,rgba(0,201,167,.24),transparent 70%)}
.cta-band > *{position:relative}
.cta-band h2{color:#fff}
.cta-band p{color:#B4C4CA;max-width:60ch;margin:1rem auto 0;font-size:1.03rem}
.cta-actions{display:flex;gap:.8rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}

/* ---------- Newsletter ---------- */
.nl-form{display:flex;gap:.6rem;max-width:480px;margin:1.7rem auto 0;flex-wrap:wrap}
.nl-form input{
  flex:1;min-width:220px;padding:1rem 1.3rem;border-radius:var(--r-full);
  border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;
  font-size:.93rem;font-weight:600;transition:border-color .25s,background .25s;
}
.nl-form input::placeholder{color:#93A5AD}
.nl-form input:focus{outline:0;border-color:var(--accent);background:rgba(255,255,255,.11)}
.nl-note{font-size:.755rem;color:#A2B3BA;margin-top:1rem}

/* ---------- Trust badges ---------- */
.trust-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.trust{
  display:inline-flex;align-items:center;gap:.55rem;padding:.68rem 1.15rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-full);
  font-size:.82rem;font-weight:700;color:var(--ink-2);box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.trust:hover{transform:translateY(-2.5px);box-shadow:var(--shadow-sm);border-color:#CDE8E1}
.trust svg{width:17px;height:17px;color:var(--brand)}
.pay-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.pay{
  height:34px;min-width:52px;padding:0 .6rem;border-radius:8px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;font-size:.66rem;font-weight:850;letter-spacing:.02em;color:var(--ink-2);
}
.bg-ink .pay{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#D5DEE3}

/* ---------- Disclaimer ---------- */
.disclaimer{
  display:flex;gap:1.15rem;padding:1.5rem 1.7rem;border-radius:var(--r-lg);
  background:linear-gradient(120deg,#FFF9EC,#FFFCF6);border:1.5px solid #F2DFB4;
}
.disclaimer i{width:38px;height:38px;flex:none;border-radius:11px;background:#FBE9C2;display:grid;place-items:center;color:#96601A}
.disclaimer i svg{width:19px;height:19px}
.disclaimer strong{display:block;font-size:.74rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase;color:#8A5A15;margin-bottom:.32rem}
.disclaimer p{font-size:.875rem;color:#7A5518;line-height:1.66}
.disclaimer.dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.disclaimer.dark strong{color:var(--accent-2)}
.disclaimer.dark p{color:#B0C0C7}
.disclaimer.dark i{background:rgba(0,201,167,.14);color:var(--accent-2)}

/* ---------- Footer ---------- */
.ft{background:var(--ink);color:#A2B3BA;padding-top:clamp(3rem,5vw,4.5rem)}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem}
.ft-brand img{height:40px;margin-bottom:1.25rem}
.ft-brand p{font-size:.885rem;line-height:1.72;max-width:38ch;color:#A2B3BA}
.ft-contact{display:grid;gap:.6rem;margin-top:1.4rem}
.ft-contact a,.ft-contact div{display:flex;gap:.65rem;align-items:flex-start;font-size:.86rem;color:#A8B9C0;transition:color .22s}
.ft-contact a:hover{color:var(--accent-2)}
.ft-contact svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--brand)}
.ft h5{font-family:var(--font-display);font-size:.755rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:1.15rem}
.ft-links{display:grid;gap:.62rem}
.ft-links a{font-size:.875rem;color:#A2B3BA;transition:color .22s,transform .28s var(--ease);display:inline-block}
.ft-links a:hover{color:var(--accent-2);transform:translateX(3px)}
.ft-links a em{font-style:normal;font-size:.74rem;color:#A2B3BA;margin-left:.3rem}
.ft-mid{padding:2rem 0;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:2rem;align-items:center;flex-wrap:wrap}
.ft-bot{padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;font-size:.795rem}
.ft-bot a:hover{color:var(--accent-2)}
.ft-legal{display:flex;gap:1.35rem;flex-wrap:wrap}
.socials{display:flex;gap:.5rem}
.social{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:all .28s var(--ease)}
.social:hover{background:var(--brand);border-color:transparent;transform:translateY(-3px)}
.social svg{width:16px;height:16px;color:#fff}

/* .ft-links reused inside <main> on light backgrounds */
main .ft-links a{color:var(--muted)}
main .ft-links a:hover{color:var(--brand)}
main .ft-links a em{color:var(--muted)}

/* ---------- Page hero ---------- */
.phero{
  background:
    radial-gradient(760px 340px at 82% -30%,rgba(0,201,167,.14),transparent 62%),
    linear-gradient(178deg,#FBFDFD,#F3F7F7);
  padding:clamp(2rem,4vw,3.2rem) 0 clamp(2.2rem,4vw,3.4rem);border-bottom:1px solid var(--line);
}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.42rem;font-size:.795rem;color:var(--muted);margin-bottom:1.1rem}
.crumbs a{transition:color .2s;font-weight:600}
.crumbs a:hover{color:var(--brand)}
.crumbs svg{width:12px;height:12px;opacity:.45}
.crumbs [aria-current]{color:var(--ink);font-weight:700}
.phero h1{font-size:clamp(2rem,4vw,3.05rem)}
.phero p{color:var(--muted);margin-top:.9rem;max-width:66ch;font-size:1.02rem}

/* ---------- Shop layout ---------- */
.shop-wrap{display:grid;grid-template-columns:266px 1fr;gap:2.2rem;align-items:start}
.filters{position:sticky;top:calc(74px + 1.5rem);display:grid;gap:.5rem;max-height:calc(100vh - 110px);overflow-y:auto;padding-right:.3rem}
.filters::-webkit-scrollbar{width:5px}
.filters::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.fgroup{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.25rem}
.fgroup h5{font-size:.735rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:.95rem;display:flex;justify-content:space-between;align-items:center}
.fopt{display:flex;align-items:center;gap:.65rem;padding:.42rem 0;font-size:.875rem;color:var(--muted);cursor:pointer;transition:color .2s;font-weight:600}
.fopt:hover{color:var(--ink)}
.fopt input{
  appearance:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:5.5px;flex:none;
  position:relative;cursor:pointer;transition:all .22s var(--ease);background:#fff;
}
.fopt input:checked{background:var(--brand);border-color:var(--brand)}
.fopt input:checked::after{
  content:"";position:absolute;left:5.5px;top:2px;width:4.5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;rotate:45deg;
}
.fopt input:checked ~ span{color:var(--ink);font-weight:700}
.fopt em{margin-left:auto;font-style:normal;font-size:.76rem;color:var(--muted);font-weight:650}
.frange{padding-top:.35rem}
.frange output{display:flex;justify-content:space-between;font-size:.83rem;font-weight:750;color:var(--ink);margin-bottom:.85rem}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;
  background:var(--line);outline:0;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;
  border:4px solid var(--brand);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .2s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid var(--brand);cursor:pointer}

.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.shop-count{font-size:.87rem;color:var(--muted);font-weight:600}
.shop-count b{color:var(--ink);font-weight:800}
.shop-ctl{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
.sel{
  appearance:none;padding:.6rem 2.4rem .6rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-full);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6B72' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center;
  font-size:.85rem;font-weight:650;cursor:pointer;transition:border-color .22s;
}
.sel:hover{border-color:var(--brand)}
.view-tog{display:flex;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-full);padding:3px}
.view-tog button{width:34px;height:32px;border-radius:var(--r-full);display:grid;place-items:center;color:var(--muted);transition:all .22s}
.view-tog button.on{background:var(--ink);color:#fff}
.view-tog svg{width:15px;height:15px}
.filter-open{display:none}
.active-filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.2rem}
.af{display:inline-flex;align-items:center;gap:.45rem;padding:.36rem .55rem .36rem .85rem;border-radius:var(--r-full);background:var(--accent-soft);border:1px solid #CDEDE4;color:var(--brand-700);font-size:.78rem;font-weight:700}
.af button{width:22px;height:22px;border-radius:50%;background:rgba(11,95,82,.13);display:grid;place-items:center;color:var(--brand-700);transition:background .2s}
.af button:hover{background:var(--brand);color:#fff}
.af svg{width:9px;height:9px}

/* list view */
.pgrid.list{grid-template-columns:1fr;gap:1rem}
.pgrid.list .card{flex-direction:row}
.pgrid.list .card-media{width:210px;flex:none;aspect-ratio:1/1}
.pgrid.list .card-body{padding:1.4rem 1.6rem}
.pgrid.list .card-desc{display:block;font-size:.865rem;color:var(--muted);line-height:1.6;margin-top:.3rem}
.card-desc{display:none}
.pgrid.list .card-qv{display:none}

.empty{text-align:center;padding:4.5rem 1rem}
.empty svg{width:52px;height:52px;color:var(--line);margin:0 auto 1.2rem}
.empty h3{margin-bottom:.6rem}
.empty p{color:var(--muted);margin-bottom:1.6rem}

.pager{display:flex;justify-content:center;align-items:center;gap:.4rem;margin-top:3rem;flex-wrap:wrap}
.pager button{
  min-width:42px;height:42px;padding:0 .8rem;border-radius:var(--r-full);border:1.5px solid var(--line);
  background:#fff;font-weight:700;font-size:.88rem;color:var(--ink-2);transition:all .25s var(--ease);
}
.pager button:hover:not(:disabled){border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.pager button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pager button:disabled{opacity:.35;cursor:not-allowed}

/* ---------- Product page ---------- */
.pdp{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.gallery{position:sticky;top:calc(74px + 1.6rem);display:grid;gap:.85rem}
.gal-main{
  position:relative;aspect-ratio:1/1;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(165deg,#FCFDFD,#EFF5F4);border:1px solid var(--line);cursor:zoom-in;
}
.gal-main img{width:100%;height:100%;object-fit:contain;padding:7%;transition:transform .5s var(--ease-out)}
.gal-main.zoom img{transform:scale(2.1);padding:0}
.gal-hint{
  position:absolute;bottom:1rem;right:1rem;display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem .8rem;border-radius:var(--r-full);background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  font-size:.72rem;font-weight:700;color:var(--ink-2);box-shadow:var(--shadow-sm);pointer-events:none;transition:opacity .3s;
}
.gal-main.zoom .gal-hint{opacity:0}
.gal-hint svg{width:13px;height:13px}
.gal-badges{position:absolute;top:1rem;left:1rem;display:flex;flex-direction:column;gap:.4rem;z-index:2}
.gal-thumbs{display:flex;gap:.65rem;flex-wrap:wrap}
.gal-thumbs button{
  width:80px;height:80px;border-radius:var(--r);overflow:hidden;border:1.5px solid var(--line);
  background:#F7FAFA;transition:all .28s var(--ease);padding:6px;
}
.gal-thumbs button img{width:100%;height:100%;object-fit:contain}
.gal-thumbs button:hover{border-color:var(--brand)}
.gal-thumbs button.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,95,82,.11)}

.buybox{display:grid;gap:1.35rem}
.pdp-cat{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--brand)}
.pdp h1{font-size:clamp(1.75rem,3.2vw,2.5rem);margin-top:.55rem}
.pdp-rating{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--muted);font-weight:600}
.pdp-rating a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.buy-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;
  box-shadow:var(--shadow-sm);display:grid;gap:1.15rem;
}
.buy-price{display:flex;align-items:flex-end;gap:.7rem;flex-wrap:wrap}
.buy-price b{font-family:var(--font-display);font-size:2.5rem;font-weight:800;letter-spacing:-.045em;color:var(--ink);line-height:1}
.buy-price s{font-size:1.12rem;color:var(--muted);font-weight:600}
.buy-price .save{background:var(--sale);color:#fff;font-size:.74rem;font-weight:800;padding:.28rem .65rem;border-radius:var(--r-full)}
.buy-tax{font-size:.775rem;color:var(--muted)}
.qty-row{display:flex;gap:.7rem;align-items:stretch}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-full);overflow:hidden;flex:none;background:#fff}
.qty button{width:44px;height:52px;font-size:1.15rem;font-weight:700;color:var(--muted);transition:background .2s,color .2s}
.qty button:hover{background:var(--bone);color:var(--brand)}
.qty input{width:46px;text-align:center;border:0;font-weight:800;font-size:1rem;outline:0;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.buy-actions{display:grid;gap:.65rem}
.buy-row2{display:grid;grid-template-columns:1fr auto auto;gap:.55rem}
.icon-sq{
  width:52px;height:52px;border-radius:var(--r-full);border:1.5px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);transition:all .26s var(--ease);background:#fff;
}
.icon-sq:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.icon-sq.on{background:var(--sale);border-color:var(--sale);color:#fff}
.icon-sq.on.cmp{background:var(--brand);border-color:var(--brand)}
.icon-sq svg{width:19px;height:19px}
.buy-perks{display:grid;gap:.62rem;padding-top:1.15rem;border-top:1px solid var(--line-2)}
.perk{display:flex;gap:.7rem;align-items:flex-start;font-size:.845rem;color:var(--muted);line-height:1.55}
.perk svg{width:16px;height:16px;color:var(--brand);flex:none;margin-top:2.5px}
.perk b{color:var(--ink-2);font-weight:750}
.ship-progress{background:var(--bone);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.05rem}
.ship-progress p{font-size:.8rem;color:var(--muted);margin-bottom:.55rem}
.ship-progress b{color:var(--brand);font-weight:800}
.pbar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .8s var(--ease-out)}

/* Tabs */
.tabs{display:flex;gap:.35rem;border-bottom:1px solid var(--line);margin-bottom:2rem;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:.9rem 1.25rem;font-weight:700;font-size:.92rem;color:var(--muted);white-space:nowrap;
  border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:all .25s;letter-spacing:-.015em;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--brand);border-color:var(--brand)}
.tab-panel{display:none;animation:fadeUp .45s var(--ease-out)}
.tab-panel.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.prose{max-width:75ch;color:var(--muted);font-size:.955rem;line-height:1.78}
.prose h3{color:var(--ink);margin:2rem 0 .8rem}
.prose h4{color:var(--ink);margin:1.5rem 0 .6rem}
.prose p+p{margin-top:1rem}
.prose ul{list-style:disc;padding-left:1.35rem;display:grid;gap:.5rem;margin:1rem 0}
.prose ol{list-style:decimal;padding-left:1.35rem;display:grid;gap:.5rem;margin:1rem 0}
.prose strong{color:var(--ink-2);font-weight:700}
.prose a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.prose hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.prose table{margin:1.2rem 0;font-size:.9rem}
.prose th,.prose td{padding:.75rem 1rem;border:1px solid var(--line);text-align:left}
.prose th{background:var(--bone);font-weight:750;color:var(--ink)}

.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;max-width:820px}
.spec-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.05rem 1.2rem;transition:border-color .3s,box-shadow .3s}
.spec-card:hover{border-color:#CDE8E1;box-shadow:var(--shadow-xs)}
.spec-card dt{font-size:.685rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.42rem}
.spec-card dd{font-size:1rem;font-weight:700;color:var(--ink);font-family:var(--font-mono);letter-spacing:-.01em;line-height:1.4;word-break:break-word}
.spec-card.hl{background:linear-gradient(140deg,#EEFCF7,#F8FEFC);border-color:#B7EFDC}
.spec-card.hl dd{color:var(--brand-700)}

/* FBT */
.fbt{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.6rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.fbt-items{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;flex:1}
.fbt-i{display:flex;flex-direction:column;align-items:center;gap:.45rem;width:120px;text-align:center}
.fbt-i img{width:78px;height:78px;object-fit:contain;background:var(--bone);border-radius:var(--r);padding:6px}
.fbt-i span{font-size:.74rem;font-weight:700;color:var(--ink-2);line-height:1.3}
.fbt-i b{font-size:.82rem;color:var(--brand);font-weight:800}
.fbt-plus{font-size:1.3rem;color:var(--muted-2);font-weight:300}
.fbt-buy{text-align:right}
.fbt-buy p{font-size:.78rem;color:var(--muted);margin-bottom:.2rem}
.fbt-buy b{display:block;font-family:var(--font-display);font-size:1.55rem;font-weight:800;letter-spacing:-.04em;margin-bottom:.7rem}

/* Reviews */
.rv-sum{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:center;padding:1.8rem;background:var(--bone);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:1.8rem}
.rv-big{text-align:center}
.rv-big b{display:block;font-family:var(--font-display);font-size:3.2rem;font-weight:800;letter-spacing:-.05em;line-height:1}
.rv-big .stars svg{width:16px;height:16px}
.rv-big span{display:block;font-size:.8rem;color:var(--muted);margin-top:.4rem;font-weight:600}
.rv-bars{display:grid;gap:.42rem}
.rv-bar{display:flex;align-items:center;gap:.75rem;font-size:.8rem;color:var(--muted);font-weight:600}
.rv-bar i{flex:1;height:7px;border-radius:7px;background:var(--line);overflow:hidden}
.rv-bar i b{display:block;height:100%;border-radius:7px;background:var(--gold)}
.rv-list{display:grid;gap:1rem}
.rv{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem}
.rv-hd{display:flex;align-items:center;gap:.8rem;margin-bottom:.75rem}
.rv-hd strong{font-size:.92rem;font-weight:750;color:var(--ink)}
.rv-hd .vf{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:700;color:var(--brand);background:var(--accent-soft);padding:.15rem .5rem;border-radius:var(--r-full)}
.rv-hd .vf svg{width:10px;height:10px}
.rv-hd time{margin-left:auto;font-size:.76rem;color:var(--muted-2)}
.rv p{font-size:.91rem;color:var(--muted);line-height:1.7}

/* ---------- Cart drawer ---------- */
.cart-dr{
  position:fixed;top:0;right:0;bottom:0;width:min(94vw,442px);z-index:430;background:#fff;
  transform:translateX(101%);transition:transform .45s var(--ease-out);
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
}
.cart-dr.open{transform:none}
.cart-hd{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.45rem;border-bottom:1px solid var(--line)}
.cart-hd h3{font-size:1.12rem;display:flex;align-items:center;gap:.55rem}
.cart-hd h3 em{font-style:normal;font-size:.72rem;background:var(--accent-soft);color:var(--brand);padding:.16rem .5rem;border-radius:var(--r-full);font-weight:800}
.cart-body{flex:1;overflow-y:auto;padding:1.2rem 1.45rem;display:grid;gap:.9rem;align-content:start}
.ci{display:flex;gap:.9rem;padding-bottom:.9rem;border-bottom:1px solid var(--line-2);animation:fadeUp .35s var(--ease-out)}
.ci:last-child{border-bottom:0}
.ci img{width:74px;height:74px;object-fit:contain;background:var(--bone);border-radius:var(--r-sm);flex:none;padding:5px}
.ci-in{flex:1;min-width:0;display:flex;flex-direction:column;gap:.28rem}
.ci-in strong{font-size:.885rem;font-weight:700;line-height:1.35;color:var(--ink)}
.ci-in strong:hover{color:var(--brand)}
.ci-in .pu{font-size:.78rem;color:var(--muted)}
.ci-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto}
.ci-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-full);overflow:hidden}
.ci-qty button{width:28px;height:28px;font-size:.9rem;font-weight:700;color:var(--muted);transition:background .18s}
.ci-qty button:hover{background:var(--bone);color:var(--brand)}
.ci-qty span{min-width:26px;text-align:center;font-size:.83rem;font-weight:800}
.ci-tot{font-weight:800;font-size:.94rem;color:var(--ink)}
.ci-del{font-size:.74rem;color:var(--muted-2);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.ci-del:hover{color:var(--sale)}
.cart-ft{border-top:1px solid var(--line);padding:1.3rem 1.45rem;display:grid;gap:.85rem;background:var(--bone)}
.cart-line{display:flex;justify-content:space-between;font-size:.875rem;color:var(--muted);font-weight:600}
.cart-line.tot{font-size:1.12rem;color:var(--ink);font-weight:800;padding-top:.75rem;border-top:1px solid var(--line)}
.cart-line.tot b{font-family:var(--font-display);letter-spacing:-.035em}
.cart-empty{text-align:center;padding:3.5rem 1.5rem;display:grid;gap:.7rem;place-items:center}
.cart-empty svg{width:56px;height:56px;color:var(--line)}
.cart-empty p{color:var(--muted);font-size:.9rem}

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;z-index:440;display:grid;place-items:center;padding:1.25rem;
  background:rgba(8,12,16,.6);backdrop-filter:blur(9px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.modal.open{opacity:1;visibility:visible}
.modal-in{
  width:min(100%,1180px);max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);height:calc(100vh - 48px);overflow:hidden;background:#fff;border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);position:relative;transform:scale(.96) translateY(14px);
  transition:transform .4s var(--ease-out);display:flex;flex-direction:column;box-sizing:border-box;
}
#qvC{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.modal.open .modal-in{transform:none}
.modal-x{position:absolute;top:.7rem;right:.7rem;width:36px;height:36px;border-radius:50%;background:var(--bone);display:grid;place-items:center;z-index:5;transition:all .25s;box-shadow:var(--shadow-sm)}
.modal-x:hover{background:var(--ink);color:#fff;rotate:90deg}
.modal-x svg{width:17px;height:17px}
.qv{display:grid;grid-template-columns:46% 54%;grid-template-rows:minmax(0,1fr);gap:0;flex:1 1 auto;min-height:0;overflow:hidden;align-items:stretch}
.qv-img{background:linear-gradient(165deg,#FBFDFD,#EFF5F4);display:flex;align-items:center;justify-content:center;padding:1rem;overflow:hidden;min-height:0;min-width:0}
.qv-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;flex:none}
.qv-body{padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:.65rem;overflow-y:auto;min-height:0;min-width:0;position:relative}
.qv-body h3{font-size:1.25rem;line-height:1.2;margin:0}
.qv-body .buy-price b{font-size:1.4rem}
.qv-body .spec-grid{grid-template-columns:1fr 1fr;gap:.4rem}
.qv-body .spec-card{padding:.55rem .7rem}
.qv-body .spec-card dt{font-size:.6rem}
.qv-body .spec-card dd{font-size:.82rem}
.qv-body .disclaimer{padding:.6rem .8rem;margin-top:auto;flex-shrink:0}
.qv-body .disclaimer p{font-size:.75rem}
.qv-body .buy-row2{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center;margin-top:.3rem;flex-shrink:0}
.qv-body .buy-row2 .btn-primary{padding:.7rem 1rem;font-size:.85rem;white-space:nowrap}
.qv-body .link-arrow{margin-top:.2rem;font-size:.82rem}

/* ---------- Compare ---------- */
.cmp-table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.cmp-table table{min-width:660px}
.cmp-table th,.cmp-table td{padding:1rem 1.15rem;text-align:left;border-bottom:1px solid var(--line-2);font-size:.885rem;vertical-align:top}
.cmp-table thead th{background:var(--bone);font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;font-weight:850;color:var(--muted);position:sticky;top:0}
.cmp-table tbody th{font-weight:700;color:var(--ink);width:180px;background:#FCFDFD}
.cmp-p{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;min-width:170px}
.cmp-p img{width:74px;height:74px;object-fit:contain;background:var(--bone);border-radius:var(--r-sm);padding:5px}
.cmp-p strong{font-size:.88rem;line-height:1.35}
.cmp-table td s{color:var(--muted)}

/* ---------- Toast ---------- */
.toasts{position:fixed;bottom:1.35rem;right:1.35rem;z-index:500;display:grid;gap:.6rem;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:.8rem;padding:.9rem 1.2rem;border-radius:var(--r);
  background:var(--ink);color:#fff;box-shadow:var(--shadow-lg);font-size:.88rem;font-weight:650;
  transform:translateX(120%);transition:transform .48s var(--ease-out);pointer-events:auto;max-width:340px;
}
.toast.show{transform:none}
.toast i{width:26px;height:26px;border-radius:50%;background:var(--brand);display:grid;place-items:center;flex:none}
.toast i svg{width:14px;height:14px;color:#fff}
.toast.err i{background:var(--sale)}

/* ---------- Forms ---------- */
.form-grid{display:grid;gap:1.05rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.field label{display:block;font-size:.79rem;font-weight:750;color:var(--ink-2);margin-bottom:.45rem;letter-spacing:-.005em}
.field label .req{color:var(--sale)}
.field input,.field select,.field textarea{
  width:100%;padding:.88rem 1.1rem;border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;font-size:.925rem;font-weight:550;transition:border-color .22s,box-shadow .22s;
}
.field textarea{min-height:140px;resize:vertical;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3.5px rgba(11,95,82,.1)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2);font-weight:450}
.field small{display:block;font-size:.75rem;color:var(--muted);margin-top:.35rem}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--muted);line-height:1.55;cursor:pointer}
.check input{appearance:none;width:19px;height:19px;border:1.5px solid var(--line);border-radius:5.5px;flex:none;margin-top:1px;position:relative;cursor:pointer;transition:all .2s;background:#fff}
.check input:checked{background:var(--brand);border-color:var(--brand)}
.check input:checked::after{content:"";position:absolute;left:6px;top:2.5px;width:4.5px;height:9.5px;border:solid #fff;border-width:0 2px 2px 0;rotate:45deg}
.check a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px}

.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem;display:grid;gap:1.05rem;height:max-content}
.info-row{display:flex;gap:.9rem;align-items:flex-start}
.info-row .ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--accent-soft);color:var(--brand);border:1px solid #D8F2EB}
.info-row .ic svg{width:17px;height:17px}
.info-row strong{display:block;font-size:.755rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.22rem}
.info-row a,.info-row p{font-size:.925rem;color:var(--ink-2);font-weight:650;line-height:1.55;word-break:break-word}
.info-row a:hover{color:var(--brand)}

/* ---------- COA ---------- */
.coa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.coa-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;cursor:zoom-in;
  transition:transform .4s var(--ease-out),box-shadow .4s;
}
.coa-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.coa-card .im{aspect-ratio:3/4;overflow:hidden;background:var(--bone)}
.coa-card img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease-out)}
.coa-card:hover img{transform:scale(1.04)}
.coa-card .cap{padding:.9rem 1.05rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;border-top:1px solid var(--line-2)}
.coa-card .cap b{font-size:.83rem;font-weight:750}
.coa-card .cap svg{width:15px;height:15px;color:var(--brand)}
.lightbox{position:fixed;inset:0;z-index:460;background:rgba(8,12,16,.93);display:grid;place-items:center;padding:2rem;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:var(--r);box-shadow:var(--shadow-lg)}
.lb-x{position:absolute;top:1.4rem;right:1.4rem;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.13);color:#fff;display:grid;place-items:center;transition:background .25s}
.lb-x:hover{background:rgba(255,255,255,.26)}
.lb-x svg{width:20px;height:20px}

/* ---------- Scroll reveal ---------- */
.rv-el{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.rv-el.in{opacity:1;transform:none}
.rv-el[data-d="1"]{transition-delay:.08s}
.rv-el[data-d="2"]{transition-delay:.16s}
.rv-el[data-d="3"]{transition-delay:.24s}
.rv-el[data-d="4"]{transition-delay:.32s}
.rv-el[data-d="5"]{transition-delay:.4s}

/* ---------- Misc ---------- */
.to-top{
  position:fixed;bottom:1.35rem;left:1.35rem;width:46px;height:46px;border-radius:50%;z-index:180;
  background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:all .38s var(--ease-out);
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brand);transform:translateY(-3px)}
.to-top svg{width:19px;height:19px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;top:-60px;left:1rem;z-index:600;background:var(--ink);color:#fff;padding:.75rem 1.3rem;border-radius:0 0 var(--r) var(--r);font-weight:700;font-size:.87rem;transition:top .25s}
.skip:focus{top:0}
.hr{border:0;border-top:1px solid var(--line)}
.mt-a{margin-top:auto}
.text-center{text-align:center}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .coa-grid{grid-template-columns:repeat(3,1fr)}
  .shop-wrap{grid-template-columns:230px 1fr;gap:1.6rem}
}
@media(max-width:1024px){
  .nav,.hdr .desk-only{display:none}
  .burger{display:grid}
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-visual{max-width:460px;margin-inline:auto;width:100%}
  .hf-1{left:-2%}.hf-2{right:-2%}
  .usp{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:2.5rem}
  .pdp{grid-template-columns:1fr}
  .gallery{position:static}
  .ft-top{grid-template-columns:1fr 1fr;gap:2rem}
  .qv{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .qv-img{aspect-ratio:16/10;padding:.8rem;max-height:24vh;overflow:hidden;flex:0 0 auto}
  .qv-img img{max-height:22vh}
  .qv-body{padding:1rem;overflow-y:auto;flex:1 1 auto;min-height:0}
}
@media(max-width:860px){
  .shop-wrap{grid-template-columns:1fr}
  .filters{
    position:fixed;top:0;left:0;bottom:0;width:min(90vw,340px);z-index:420;background:#fff;
    max-height:none;padding:1.2rem;overflow-y:auto;transform:translateX(-101%);
    transition:transform .45s var(--ease-out);box-shadow:var(--shadow-lg);display:block;
  }
  .filters.open{transform:none}
  .filters .fgroup{border-left:0;border-right:0;border-radius:0;border-top:0;padding-inline:0}
  .filter-open{display:inline-flex}
  .filters-hd{display:flex!important;align-items:center;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:.5rem}
  .pgrid.list .card{flex-direction:column}
  .pgrid.list .card-media{width:100%}
  .fbt{flex-direction:column;align-items:stretch}
  .fbt-buy{text-align:left}
  .rv-sum{grid-template-columns:1fr;gap:1.5rem}
}
@media(max-width:720px){
  :root{--hdr:96px}
  .wrap{width:min(100% - 2rem,var(--wrap))}
  /* prevent min-content blowouts in grid/flex children */
  .pdp,.buybox,.split,.shop-wrap,.hero-grid{min-width:0}
  .pdp > *,.buybox > *,.split > *,.shop-wrap > *,.buy-card > *,.info-card > *{min-width:0}
  .btn{white-space:normal;text-align:center}
  .buy-row2{grid-template-columns:1fr}
  .buy-row2 .icon-sq{width:100%}
  /* comfortable tap targets */
  .promo-bar a,.link-arrow,.ft-links a,.ft-legal a,.crumbs a,.m-sub a,
  .prose ul a,.info-row a,.faq-a a,.ci-del,.card-title a{
    min-height:36px;display:inline-flex;align-items:center;
  }
  .ft-links a,.m-sub a{min-height:40px}
  .card-title a{display:block;padding-block:2px}
  .sr-item{min-height:56px}
  /* inline links in body copy: pad to a comfortable 36px hit area */
  .prose a,.faq-a a,.info-row a,.check a,.m-nav-ft a.mail,
  .ft-contact a,.nl-note a,.buy-perks a,.pdp-rating a,.cart-empty a{
    display:inline-block;padding-block:.42rem;line-height:1.35;
  }
  .search-esc{min-height:34px;display:inline-flex;align-items:center}
  .af{min-height:40px;padding:.4rem .5rem .4rem .9rem}
  .af button{width:30px;height:30px}
  form[data-contact] p a,#coItems a,.info-card p a,.info-card a[href^="mailto"]{
    display:inline-block;padding-block:.45rem;line-height:1.35;
  }
  .pgrid,.pgrid-3{grid-template-columns:repeat(2,1fr);gap:.9rem}
  .coa-grid{grid-template-columns:repeat(2,1fr);gap:.9rem}
  .cat-grid{grid-template-columns:1fr}
  .usp{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .spec-grid{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr;gap:2.2rem}
  .ft-mid{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .card-body{padding:.85rem .9rem 1rem}
  .card-title{font-size:.9rem}
  .price b{font-size:1.05rem}
  .add-btn{width:37px;height:37px}
  .card-tools{opacity:1;transform:none}
  .rev-card{width:300px}
  .hero-float{padding:.6rem .8rem}
  .hero-float b{font-size:.78rem}
  .hero-float span{font-size:.66rem}
  .hf-3{display:none}
  .buy-price b{font-size:2rem}
  .gal-thumbs button{width:64px;height:64px}
  .toasts{left:1rem;right:1rem;bottom:1rem}
  .toast{max-width:none}
  .to-top{bottom:1rem;left:1rem;width:42px;height:42px}
}
@media(max-width:420px){
  .pgrid,.pgrid-3,.coa-grid{grid-template-columns:1fr}
  h1{font-size:2.05rem}
  .buy-row2{grid-template-columns:1fr}
  .icon-sq{width:100%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv-el{opacity:1;transform:none}
}
@media print{
  .hdr,.ft,.announce,.promo-bar,.cart-dr,.to-top,.scrim,.toasts{display:none!important}
  body{background:#fff}
}

/* ==========================================================================
   Phase 2 — header shrink · sticky ATC · ripple · coupon · transitions
   ========================================================================== */

/* ---------- Header shrink on scroll ---------- */
.hdr-in{transition:height .34s var(--ease-out)}
.logo img{transition:height .34s var(--ease-out)}
.hdr.shrink .hdr-in{height:64px}
.hdr.shrink .logo img{height:42px}
.hdr.shrink .nav-link{padding-block:.5rem}
.promo-bar{transition:max-height .4s var(--ease-out),opacity .3s,padding .34s var(--ease-out);max-height:60px;overflow:hidden}
body.scrolled-far .promo-bar{max-height:0;opacity:0;padding-block:0}

/* ---------- Button ripple ---------- */
.btn,.add-btn,.icon-btn,.tool,.chip,.pager button,.icon-sq{position:relative;overflow:hidden}
.ripple{
  position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.42);animation:ripple .62s var(--ease-out) forwards;
}
.btn-ghost .ripple,.chip .ripple,.icon-btn .ripple,.tool .ripple,
.pager button .ripple,.icon-sq .ripple,.btn-light .ripple{background:rgba(11,95,82,.22)}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* ---------- Page transition ---------- */
@keyframes pageIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
main{animation:pageIn .5s var(--ease-out) both}
body.leaving main,body.leaving .hdr,body.leaving .ft{opacity:.35;transition:opacity .22s ease}
.route-bar{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:600;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  box-shadow:0 0 12px rgba(0,201,167,.55);opacity:0;transition:width .3s var(--ease-out),opacity .3s;
}
.route-bar.on{opacity:1}

/* ---------- Sticky mobile add-to-cart (PDP) ---------- */
.atc-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:190;
  display:none;align-items:center;gap:.8rem;padding:.7rem .9rem;
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.9);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px -14px rgba(8,12,16,.24);
  transform:translateY(104%);transition:transform .42s var(--ease-out);
}
.atc-bar.show{transform:none}
.atc-bar img{width:46px;height:46px;object-fit:contain;background:var(--bone);border-radius:11px;padding:4px;flex:none}
.atc-info{flex:1;min-width:0}
.atc-info strong{display:block;font-size:.83rem;font-weight:750;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.atc-info span{display:flex;align-items:baseline;gap:.4rem;font-size:.95rem;font-weight:800;color:var(--brand);font-family:var(--font-display)}
.atc-info span s{font-size:.76rem;color:var(--muted);font-weight:600}
.atc-bar .btn{flex:none;padding-inline:1.15rem}
@media(max-width:1024px){.atc-bar{display:flex}}
@media(max-width:1024px){.to-top{bottom:5.6rem}}

/* ---------- Cart coupon / shipping estimate ---------- */
.cart-tools-row{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.cart-tools-row summary{
  display:flex;align-items:center;gap:.55rem;padding:.72rem .95rem;cursor:pointer;list-style:none;
  font-size:.83rem;font-weight:700;color:var(--ink-2);transition:color .2s;
}
.cart-tools-row summary::-webkit-details-marker{display:none}
.cart-tools-row summary:hover{color:var(--brand)}
.cart-tools-row summary svg{width:15px;height:15px;color:var(--brand)}
.cart-tools-row summary::after{content:"+";margin-left:auto;font-size:1.05rem;font-weight:600;color:var(--muted);transition:transform .3s}
.cart-tools-row[open] summary::after{transform:rotate(45deg)}
.coupon-form{display:flex;gap:.45rem;padding:0 .95rem .8rem}
.coupon-form input{
  flex:1;min-width:0;padding:.62rem .85rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-size:.85rem;font-weight:600;text-transform:uppercase;transition:border-color .2s;
}
.coupon-form input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,95,82,.1)}
.coupon-form .sel{padding-block:.62rem}
.coupon-msg{padding:0 .95rem .8rem;font-size:.78rem;font-weight:650;line-height:1.5}
.coupon-msg:empty{display:none}
.coupon-msg.ok{color:var(--brand)}
.coupon-msg.err{color:var(--sale)}

/* ---------- Search history ---------- */
.search-hist{display:flex;flex-wrap:wrap;gap:.4rem;padding:.85rem 1.4rem;border-top:1px solid var(--line-2)}
.search-hist b{width:100%;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.15rem;display:flex;justify-content:space-between;align-items:center}
.search-hist b button{font-size:.68rem;color:var(--muted);text-decoration:underline;text-transform:none;letter-spacing:0}
.search-hist b button:hover{color:var(--sale)}
.hist-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .72rem;border-radius:var(--r-full);background:var(--bone);border:1px solid var(--line);font-size:.78rem;font-weight:600;transition:all .2s}
.hist-chip:hover{border-color:var(--brand);color:var(--brand)}
.hist-chip svg{width:11px;height:11px;opacity:.5}
.sr-group{padding:.55rem .75rem .2rem;font-size:.68rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.sr-empty-sug{padding:1.1rem 1.4rem 1.4rem;text-align:center}
.sr-empty-sug p{font-size:.88rem;color:var(--muted);margin-bottom:.85rem}
.sr-empty-sug .trust-row{gap:.4rem}

/* ---------- Collections ---------- */
.coll-hero{
  position:relative;border-radius:var(--r-xl);overflow:hidden;padding:clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;
  background:linear-gradient(150deg,var(--ink),var(--ink-3));color:#fff;
}
.coll-hero::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;top:-160px;right:-110px;background:radial-gradient(circle,rgba(0,201,167,.26),transparent 68%)}
.coll-hero > *{position:relative}
.coll-hero h2{color:#fff}
.coll-hero p{color:#A2B3BA;margin-top:.9rem;max-width:52ch}
.coll-strip{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.6rem}
.coll-mini{display:flex;gap:.7rem;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:.6rem .85rem;transition:all .3s var(--ease)}
.coll-mini:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.coll-mini img{width:38px;height:38px;object-fit:contain;background:rgba(255,255,255,.9);border-radius:9px;padding:3px}
.coll-mini span{font-size:.8rem;font-weight:700;color:#fff}
.coll-mini em{display:block;font-style:normal;font-size:.72rem;color:var(--accent-2);font-weight:700}
.coll-visual{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.coll-visual img{width:100%;aspect-ratio:1;object-fit:contain;background:rgba(255,255,255,.94);border-radius:var(--r);padding:9%}

/* ---------- Account ---------- */
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.acct-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem}
.acct-card h3{margin-bottom:.4rem}
.acct-card > p{color:var(--muted);font-size:.9rem;margin-bottom:1.5rem;line-height:1.65}
.acct-tabs{display:flex;gap:.3rem;background:var(--bone);padding:4px;border-radius:var(--r-full);margin-bottom:1.6rem}
.acct-tabs button{flex:1;padding:.62rem;border-radius:var(--r-full);font-size:.87rem;font-weight:700;color:var(--muted);transition:all .28s var(--ease)}
.acct-tabs button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.acct-panel{display:none}
.acct-panel.on{display:block;animation:fadeUp .4s var(--ease-out)}
.order-look{display:grid;gap:1rem}
.order-res{padding:1.2rem;border-radius:var(--r);background:var(--bone);border:1px solid var(--line);font-size:.88rem;color:var(--muted);line-height:1.7}
.order-res:empty{display:none}

/* ---------- Instagram / social gallery ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
.ig-tile{
  position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(165deg,#FCFDFD,#EFF5F4);border:1px solid var(--line);display:block;
  transition:transform .45s var(--ease-out),box-shadow .45s;
}
.ig-tile:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--shadow-lg);z-index:2}
.ig-tile img{width:100%;height:100%;object-fit:contain;padding:12%;transition:transform .6s var(--ease-out)}
.ig-tile:hover img{transform:scale(1.09)}
.ig-tile::after{
  content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,95,82,.82),transparent 62%);
  opacity:0;transition:opacity .4s;
}
.ig-tile:hover::after{opacity:1}
.ig-cap{
  position:absolute;left:.6rem;right:.6rem;bottom:.55rem;z-index:2;color:#fff;font-size:.72rem;font-weight:750;
  opacity:0;transform:translateY(8px);transition:all .4s var(--ease-out);line-height:1.3;
}
.ig-tile:hover .ig-cap{opacity:1;transform:none}

/* ---------- How ordering works ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem;counter-reset:step}
.step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem 1.4rem 1.5rem;
  transition:transform .4s var(--ease-out),box-shadow .4s,border-color .3s;
}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#CDE8E1}
.step-n{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;margin-bottom:1rem;
  background:linear-gradient(140deg,var(--brand),var(--accent));color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;box-shadow:0 8px 18px -8px rgba(11,95,82,.55);
}
.step h4{margin-bottom:.4rem}
.step p{font-size:.865rem;color:var(--muted);line-height:1.62}
.step::after{
  content:"";position:absolute;top:2.85rem;right:-.72rem;width:1.44rem;height:1.5px;
  background:linear-gradient(90deg,var(--line),transparent);z-index:2;
}
.step:last-child::after{display:none}

@media(max-width:1024px){
  .ig-grid{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
  .coll-hero{grid-template-columns:1fr}
  .acct-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .ig-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .steps{grid-template-columns:1fr}
  .acct-card{padding:1.4rem}
  .coll-visual{gap:.5rem}
  .hdr.shrink .hdr-in{height:58px}
}

/* Sitemap page: heading links need a comfortable touch target on mobile */
@media(max-width:720px){
  main h3 a{display:inline-flex;min-height:42px;align-items:center}
}

/* ==========================================================================
   CHECKOUT v2 — stepped bank-transfer flow
   ========================================================================== */
.co-wrap{padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(3rem,6vw,5rem)}

/* progress */
.co-steps{display:flex;align-items:center;gap:.5rem;max-width:620px;margin:0 auto clamp(2rem,4vw,3rem);counter-reset:cs}
.co-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:.55rem;position:relative;text-align:center}
.co-step::before{content:"";position:absolute;top:19px;left:calc(-50% + 22px);right:calc(50% + 22px);height:2px;background:var(--line);transition:background .45s var(--ease)}
.co-step:first-child::before{display:none}
.cs-dot{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:#fff;border:2px solid var(--line);color:var(--muted-2);
  transition:all .4s var(--ease-out);position:relative;z-index:1;
}
.cs-dot svg{width:17px;height:17px;transition:opacity .3s}
.cs-dot b{position:absolute;font-size:.85rem;font-weight:800;opacity:0;transition:opacity .3s}
.cs-l{font-size:.79rem;font-weight:700;color:var(--muted);letter-spacing:-.01em;transition:color .3s}
.co-step.on .cs-dot{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 6px 18px -6px rgba(11,95,82,.55)}
.co-step.on .cs-l{color:var(--ink)}
.co-step.done .cs-dot{border-color:var(--brand);background:var(--accent-soft);color:var(--brand)}
.co-step.done::before,.co-step.on::before{background:var(--brand)}
.co-step.done .cs-l{color:var(--brand)}

/* layout */
.co-grid{display:grid;grid-template-columns:1fr 380px;gap:2.2rem;align-items:start}
.co-side{position:sticky;top:calc(74px + 1.4rem);display:grid;gap:1rem}

/* panels */
.co-panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.6vw,2rem);box-shadow:var(--shadow-sm);
}
.co-panel[hidden]{display:none}
.co-panel.on{animation:fadeUp .45s var(--ease-out)}
.co-head{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.6rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line-2)}
.co-ic{
  width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent-soft),#fff);border:1px solid #D8F2EB;color:var(--brand);
}
.co-ic svg{width:21px;height:21px}
.co-head h2{font-size:1.32rem;letter-spacing:-.025em}
.co-head p{font-size:.87rem;color:var(--muted);margin-top:.22rem;line-height:1.55}
.co-sub{font-size:.95rem;font-weight:750;color:var(--ink);margin:1.7rem 0 .85rem;letter-spacing:-.015em}
.co-panel .field{margin-bottom:1.05rem}
.co-panel .f2,.co-panel .f3{margin-bottom:0}
.f3{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1.05rem}
.opt{font-weight:600;color:var(--muted-2);font-size:.74rem;text-transform:none;letter-spacing:0}
.field input:user-invalid,.field select:user-invalid{border-color:var(--sale);box-shadow:0 0 0 3px rgba(200,30,35,.09)}
.eta-note{
  display:flex;gap:.55rem;align-items:center;padding:.75rem 1rem;border-radius:var(--r);
  background:var(--accent-soft);border:1px solid #CDEDE4;color:var(--brand-700);
  font-size:.845rem;font-weight:650;margin-top:.2rem;animation:fadeUp .35s var(--ease-out);
}

/* radio option rows */
.opt-list{display:grid;gap:.6rem}
.opt-row{
  display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.15rem;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--r);background:#fff;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.opt-row:hover{border-color:#BFE3D9;background:#FCFEFD}
.opt-row input{
  appearance:none;width:20px;height:20px;border:2px solid var(--line);border-radius:50%;flex:none;
  margin-top:2px;cursor:pointer;position:relative;transition:border-color .22s;background:#fff;
}
.opt-row input:checked{border-color:var(--brand);border-width:6px}
.opt-row:has(input:checked){border-color:var(--brand);background:linear-gradient(150deg,#F4FBF9,#fff);box-shadow:0 0 0 3px rgba(11,95,82,.07)}
.opt-body strong{display:flex;align-items:center;gap:.5rem;font-size:.92rem;font-weight:750;color:var(--ink);margin-bottom:.2rem}
.opt-body span{display:block;font-size:.845rem;color:var(--muted);line-height:1.58}
.rec{font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--accent-soft);color:var(--brand);padding:.14rem .45rem;border-radius:var(--r-full)}

/* payment method block */
.pay-method{
  display:flex;gap:1rem;align-items:flex-start;padding:1.3rem 1.4rem;border-radius:var(--r-lg);
  background:linear-gradient(150deg,#F2FBF8,#fff);border:1.5px solid var(--brand);
  box-shadow:0 0 0 3px rgba(11,95,82,.06);
}
.pm-tick{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none;margin-top:2px}
.pm-tick svg{width:14px;height:14px}
.pm-body strong{display:block;font-size:1.02rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:.35rem}
.pm-body p{font-size:.885rem;color:var(--muted);line-height:1.65}
.pm-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
.pm-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.755rem;font-weight:700;color:var(--brand-700);background:#fff;border:1px solid #CDEDE4;padding:.34rem .7rem;border-radius:var(--r-full)}
.pm-tag svg{width:13px;height:13px}

.how-pay{margin-top:1.5rem}
.pay-steps{display:grid;gap:.9rem;counter-reset:p}
.pay-steps li{display:flex;gap:.9rem;align-items:flex-start}
.pay-steps li b{
  width:27px;height:27px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-size:.78rem;font-weight:800;margin-top:1px;
}
.pay-steps li strong{display:block;font-size:.9rem;font-weight:750;color:var(--ink);margin-bottom:.14rem}
.pay-steps li span{display:block;font-size:.855rem;color:var(--muted);line-height:1.6}
.hold-note{
  display:flex;gap:.55rem;align-items:center;margin-top:1.1rem;padding:.8rem 1rem;border-radius:var(--r);
  background:#FFF9EC;border:1px solid #F2DFB4;color:#7A5518;font-size:.845rem;font-weight:600;
}
.hold-note svg{width:15px;height:15px;flex:none;color:#96601A}
.hold-note b{color:#6A4711}
.co-agree{margin-top:1.6rem;padding:1.05rem 1.2rem;border-radius:var(--r);background:var(--bone);border:1px solid var(--line)}
.co-fine{font-size:.76rem;color:var(--muted);text-align:center;margin-top:.9rem;line-height:1.55}

.co-nav{display:flex;gap:.7rem;justify-content:space-between;align-items:center;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line-2);flex-wrap:wrap}
.co-nav .btn-primary{flex:1;min-width:210px;justify-content:center}
.co-nav .btn-ghost{flex:none}

/* summary */
.co-sum{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.sum-toggle{
  display:none;width:100%;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem;font-size:.9rem;font-weight:750;color:var(--ink);
}
.sum-toggle > span:first-child{display:flex;align-items:center;gap:.55rem}
.sum-toggle svg{width:16px;height:16px;color:var(--brand)}
.sum-tog-r{display:flex;align-items:center;gap:.6rem}
.sum-tog-r b{font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.03em}
.sum-toggle .chev{display:grid;transition:transform .32s var(--ease)}
.sum-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.sum-body{padding:1.3rem}
.sum-items{display:grid;gap:.85rem;max-height:290px;overflow-y:auto;margin-bottom:1rem}
.sum-items::-webkit-scrollbar{width:5px}
.sum-items::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.sum-i{display:flex;gap:.75rem;align-items:center}
.sum-i .thumb{position:relative;flex:none}
.sum-i img{width:52px;height:52px;object-fit:contain;background:var(--bone);border-radius:10px;padding:4px}
.sum-i .qty-pip{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-full);
  background:var(--ink);color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center;border:2px solid #fff;
}
.sum-i .nm{flex:1;min-width:0}
.sum-i .nm strong{display:block;font-size:.83rem;font-weight:700;line-height:1.32;color:var(--ink)}
.sum-i .nm span{font-size:.75rem;color:var(--muted)}
.sum-i .amt{font-size:.87rem;font-weight:800;color:var(--ink);white-space:nowrap}
.sum-prog:not(:empty){margin-bottom:1rem}
.sum-lines{display:grid;gap:.55rem;padding-top:1rem;border-top:1px solid var(--line-2);margin-bottom:1rem}
.sum-lines .cart-line em{font-style:normal;font-weight:800;color:var(--brand)}

.co-assure{display:grid;gap:.72rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.25rem 1.35rem}
.co-assure li{display:flex;gap:.7rem;align-items:flex-start;font-size:.835rem;color:var(--muted);line-height:1.55}
.co-assure svg{width:16px;height:16px;color:var(--brand);flex:none;margin-top:2px}
.co-assure b{color:var(--ink-2);font-weight:750}

/* ---------- confirmation ---------- */
.co-done{padding:clamp(2rem,5vw,4rem) 0 clamp(3.5rem,7vw,6rem);animation:fadeUp .55s var(--ease-out)}
.done-hero{text-align:center;margin-bottom:2.5rem}
.done-tick{
  width:70px;height:70px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1.3rem;
  background:linear-gradient(140deg,var(--brand),var(--accent));color:#fff;
  box-shadow:0 18px 40px -14px rgba(11,95,82,.55);animation:pop .6s var(--ease-out) both;
}
.done-tick svg{width:32px;height:32px}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.done-hero h1{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.done-hero p{color:var(--muted);margin-top:.9rem;font-size:1.03rem}
.done-hero b{color:var(--ink);font-weight:800}

.pay-card{background:#fff;border:2px solid var(--brand);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:2rem}
.pay-card-hd{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.05rem 1.4rem;background:linear-gradient(120deg,var(--ink),#0d3b34);color:#fff;
}
.pay-card-hd > span{display:flex;align-items:center;gap:.6rem;font-weight:750;font-size:.98rem}
.pay-card-hd svg{width:18px;height:18px;color:var(--accent-2)}
.pay-card-hd .btn-ghost{--fg:#fff;--bd:rgba(255,255,255,.3)}
.pay-rows{display:grid}
.pay-row-i{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.4rem;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.pay-row-i:last-child{border-bottom:0}
.pay-row-i dt{font-size:.775rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pay-row-i dt em{display:block;font-style:normal;font-size:.66rem;letter-spacing:.04em;color:var(--sale);margin-top:.15rem}
.pay-row-i dd{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:1rem;font-weight:700;color:var(--ink);text-align:right;word-break:break-word}
.pay-row-i.hl{background:linear-gradient(150deg,#F2FBF8,#fff)}
.pay-row-i.hl dd{font-size:1.2rem;color:var(--brand-700);letter-spacing:-.01em}
.cp{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--bone);border:1px solid var(--line);color:var(--muted);transition:all .22s;flex:none}
.cp:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.cp svg{width:14px;height:14px}
.cp.done{background:var(--brand);border-color:var(--brand);color:#fff}
.pay-card-note{display:flex;gap:.7rem;align-items:flex-start;padding:1.05rem 1.4rem;background:#FFF9EC;border-top:1px solid #F2DFB4;font-size:.83rem;color:#7A5518;line-height:1.62}
.pay-card-note svg{width:16px;height:16px;color:#96601A;flex:none;margin-top:2px}

.done-next{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;margin-bottom:2rem}
.done-next h3{font-size:1.1rem;margin-bottom:1.1rem}
.done-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.5rem}
.done-sum{background:var(--bone);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;margin-bottom:1.6rem}
.done-sum h3{font-size:1.05rem;margin-bottom:1rem}
.done-help{text-align:center;font-size:.87rem;color:var(--muted);line-height:1.65}
.done-help a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}

@media(max-width:1024px){
  .co-grid{grid-template-columns:1fr}
  .co-side{position:static;order:-1}
  .sum-toggle{display:flex}
  .sum-body{display:none;border-top:1px solid var(--line-2)}
  .sum-body.open{display:block;animation:fadeUp .35s var(--ease-out)}
  .co-assure{display:none}
}
@media(max-width:720px){
  .f3{grid-template-columns:1fr 1fr}
  .f3 .field:first-child{grid-column:1/-1}
  .cs-l{font-size:.7rem}
  .cs-dot{width:34px;height:34px}
  .cs-dot svg{display:none}
  .cs-dot b{opacity:1}
  .co-step::before{top:17px}
  .co-nav{flex-direction:column-reverse}
  .co-nav .btn{width:100%;min-width:0}
  .pay-row-i{flex-direction:column;align-items:flex-start;gap:.4rem}
  .pay-row-i dd{text-align:left}
  .done-actions .btn{width:100%}
}
@media print{
  .co-wrap,.co-steps,.done-actions,.co-assure,.atc-bar{display:none!important}
  .co-done{padding:0}
  .pay-card{box-shadow:none;border-color:#000}
}

/* ==========================================================================
   PRODUCT CARD — full-width labelled Add to Cart
   ========================================================================== */
.card-foot{padding-top:.6rem;padding-bottom:.15rem}
.btn-cart{
  position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;margin-top:.75rem;padding:.72rem 1rem;border-radius:var(--r-full);
  background:var(--ink);color:#fff;font-weight:750;font-size:.875rem;letter-spacing:-.01em;
  cursor:pointer;overflow:hidden;isolation:isolate;border:1.5px solid transparent;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .25s;
}
.btn-cart::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(120deg,var(--brand),var(--accent));opacity:0;transition:opacity .32s var(--ease);
}
.btn-cart:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}
.btn-cart:hover::after{opacity:1}
.btn-cart:active{transform:translateY(0) scale(.985)}
.btn-cart svg{width:15px;height:15px;flex:none}
.btn-cart.done{background:var(--brand);border-color:transparent;transform:translateY(0)!important}
.btn-cart.done::after{opacity:0}
.btn-cart-alt{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-cart-alt:hover{color:#fff;border-color:transparent}

/* list view: keep button inline-sized */
.pgrid.list .btn-cart{width:auto;min-width:180px;margin-top:.9rem}

/* quick-view chip sits above the button */
.card:hover .card-qv{transform:translateY(-2px)}

@media(max-width:720px){
  
  
}
@media(max-width:420px){
}

/* ==========================================================================
   CART PAGE v2
   ========================================================================== */
.cart-page{display:grid;grid-template-columns:1fr 372px;gap:2.2rem;align-items:start}
.cart-side{position:sticky;top:calc(74px + 1.4rem);display:grid;gap:1rem}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.cart-head span{font-size:.9rem;font-weight:750;color:var(--ink)}
.cart-clear{font-size:.8rem;font-weight:650;color:var(--muted);text-decoration:underline;text-underline-offset:3px;transition:color .2s;min-height:36px;display:inline-flex;align-items:center;padding-inline:.2rem}
.cart-clear:hover{color:var(--sale)}

.cart-items{display:grid;gap:.85rem}
.ci-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.15rem;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem 1.25rem;
  transition:border-color .28s,box-shadow .28s,transform .28s var(--ease-out);
  animation:fadeUp .35s var(--ease-out);
}
.ci-row:hover{border-color:#CDE8E1;box-shadow:var(--shadow-sm)}
.ci-img{flex:none;display:block;border-radius:var(--r);overflow:hidden;background:var(--bone)}
.ci-img img{width:88px;height:88px;object-fit:contain;padding:7px;transition:transform .45s var(--ease-out)}
.ci-row:hover .ci-img img{transform:scale(1.06)}
.ci-main{min-width:0;display:grid;gap:.22rem}
.ci-cat{font-size:.67rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.ci-name{font-size:1rem;font-weight:750;letter-spacing:-.02em;color:var(--ink);line-height:1.32}
.ci-name:hover{color:var(--brand)}
.ci-unit{font-size:.83rem;color:var(--muted);font-weight:600}
.ci-unit s{color:var(--muted-2);margin-left:.25rem}
.ci-stock{display:inline-flex;align-items:center;gap:.4rem;font-size:.755rem;font-weight:700;color:var(--brand);margin-top:.12rem}
.ci-stock i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(0,201,167,.18)}
.ci-act{display:grid;justify-items:end;gap:.55rem;text-align:right}
.ci-act .ci-qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-full);overflow:hidden;background:#fff}
.ci-act .ci-qty button{width:34px;height:36px;font-size:1rem;font-weight:700;color:var(--muted);transition:background .2s,color .2s}
.ci-act .ci-qty button:hover{background:var(--bone);color:var(--brand)}
.ci-act .ci-qty span{min-width:32px;text-align:center;font-size:.9rem;font-weight:800}
.ci-line{font-family:var(--font-display);font-size:1.16rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.ci-act .ci-del{font-size:.77rem;color:var(--muted-2);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.ci-act .ci-del:hover{color:var(--sale)}

.cart-cont{margin-top:1.4rem}
.pay-hint{
  display:flex;gap:.6rem;align-items:flex-start;margin-top:.85rem;padding:.8rem .95rem;
  border-radius:var(--r);background:var(--bone);border:1px solid var(--line);
  font-size:.79rem;color:var(--muted);line-height:1.55;
}
.pay-hint svg{width:15px;height:15px;color:var(--brand);flex:none;margin-top:1px}
.pay-hint b{color:var(--ink-2);font-weight:750}

.cart-empty-page{text-align:center;padding:clamp(3rem,7vw,5rem) 1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl)}
.cart-empty-page svg{width:64px;height:64px;color:var(--line);margin:0 auto 1.4rem}
.cart-empty-page h2{font-size:1.55rem;margin-bottom:.7rem}
.cart-empty-page p{color:var(--muted);max-width:44ch;margin:0 auto 1.9rem;line-height:1.7}
.cart-empty-cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

@media(max-width:1024px){
  .cart-page{grid-template-columns:1fr}
  .cart-side{position:static}
  .cart-side .co-assure{display:grid}
}
@media(max-width:640px){
  .ci-row{grid-template-columns:auto 1fr;gap:.9rem;padding:.95rem}
  .ci-img img{width:70px;height:70px}
  .ci-act{grid-column:1/-1;grid-template-columns:auto 1fr auto;justify-items:stretch;align-items:center;
          text-align:left;gap:.75rem;padding-top:.85rem;border-top:1px solid var(--line-2)}
  .ci-act .ci-qty{justify-self:start}
  .ci-line{text-align:center}
  .ci-act .ci-del{justify-self:end}
  .cart-empty-cta .btn{width:100%}
}

/* ---------- Account: recent orders ---------- */
.recent-orders{display:grid;gap:.55rem;margin-bottom:1.4rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line-2)}
.ord-chip{
  display:grid;gap:.2rem;text-align:left;width:100%;padding:.85rem 1rem;
  border:1.5px solid var(--line);border-radius:var(--r);background:#fff;
  transition:border-color .25s,box-shadow .25s,transform .25s var(--ease-out);
}
.ord-chip:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-1.5px)}
.oc-ref{font-family:var(--font-mono);font-size:.85rem;font-weight:800;color:var(--brand-700)}
.oc-meta{font-size:.78rem;color:var(--muted);font-weight:650}
.oc-items{font-size:.76rem;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Confirmation header ---------- */
body.co-done-body .hdr,body.co-done-body .ft,body.co-done-body .to-top,body.co-done-body .route-bar{display:none!important}
body.co-done-body{background:var(--bone)}
body.co-done-body .co-done{padding-top:clamp(2rem,5vw,3.5rem)}
.done-logo{margin:0 auto 1.6rem;opacity:1;max-height:43px;width:auto;display:block}

@media print{
  body.co-done-body .done-logo{display:block!important}
  .done-logo{filter:none}
}