/* ============================================================
   PinkVape — storefront styles · "Pink Premium" redesign
   Bold, confident e-commerce: white space + punchy pink accents,
   deep-plum nav/footer, gradient hero, elevated cards.
   ============================================================ */
:root{
  --ink:#1c0a18;            /* deep plum-charcoal: text + dark surfaces */
  --ink2:#4d3a4a;
  --muted:#7d6b7c;
  --line:#f0e2ea;
  --bg:#faf7f9;
  --card:#ffffff;
  --brand:#e01e79;          /* primary pink */
  --brand-2:#ff6fb0;        /* light pink */
  --brand-ink:#9d174d;      /* deep pink (text on light pink) */
  --brand-deep:#6d0f3d;     /* wine, gradient anchor */
  --night:#23081b;          /* nav / footer plum */
  --tint:#fdf1f7;           /* softest pink surface */
  --tint-2:#fbe3f0;
  --deal:#f97316;
  --new:#16a34a;
  --star:#ffb020;
  --danger:#e11d48;
  --radius:16px;
  --grad:linear-gradient(135deg,var(--brand-2),var(--brand) 60%,#b3145f);
  --shadow:0 10px 30px rgba(120,17,66,.10);
  --shadow-sm:0 2px 10px rgba(120,17,66,.06);
  --shadow-pink:0 14px 34px rgba(224,30,121,.20);
  --wrap:1560px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;line-height:1.6;
  overflow-x:clip;width:100%;max-width:100%;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,3vw,48px)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--brand);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- Top announcement ---------- */
.topbar{
  background:linear-gradient(100deg,#7c0e45,var(--brand) 55%,var(--brand-2) 130%);
  color:#fff;font-size:13px;font-weight:700;text-align:center;padding:9px 16px;
  letter-spacing:.35px;position:relative;overflow:hidden;
}
.topbar::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 220% at 50% -80%,rgba(255,255,255,.28),transparent 60%);pointer-events:none}
.topbar a{text-decoration:underline;text-underline-offset:3px;font-weight:800;position:relative;z-index:1}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:#fff;
  box-shadow:0 1px 0 var(--line),0 10px 28px rgba(120,17,66,.05)
}
/* NO backdrop-filter here: blurring a full-width sticky header repaints on every scrolled
   frame and makes the whole page feel janky. Solid white reads identically and scrolls free.
   The nav lives OUTSIDE the sticky header now (VOS pattern) — only this slim bar sticks. */
.header-main{display:flex;align-items:center;gap:28px;padding-top:17px;padding-bottom:17px} /* NEVER use the padding shorthand here — it zeroes .wrap's side gutters on the same element (the pasted-to-the-wall logo bug) */
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo .word{
  font-weight:900;font-size:25px;letter-spacing:.02em;text-transform:uppercase;color:#fff;
  background:linear-gradient(160deg,#ff8abd,#e01e79 55%,#a91257);
  padding:12px 19px;border-radius:15px;line-height:1;display:inline-block;
  box-shadow:0 8px 20px rgba(224,30,121,.4),0 2px 4px rgba(120,10,50,.25),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 5px rgba(120,10,50,.3);
  text-shadow:0 1px 2px rgba(120,10,50,.35)
}
.logo .word b{color:#43092b;font-weight:900}
.search{flex:1;position:relative;max-width:640px}
.search input{
  width:100%;border:0;border-radius:999px;padding:15px 62px 15px 24px;
  font-size:15.5px;outline:none;transition:.18s;color:var(--ink);font-weight:500;
  background:linear-gradient(180deg,#faeef5,#fff 55%);
  box-shadow:inset 0 3px 7px rgba(120,17,66,.12),inset 0 -1px 0 rgba(255,255,255,.9),0 1px 0 rgba(255,255,255,.85),0 7px 18px rgba(120,17,66,.09);
}
.search input::placeholder{color:var(--muted)}
.search input:focus{background:#fff;box-shadow:inset 0 3px 7px rgba(120,17,66,.10),0 0 0 4px rgba(224,30,121,.16),0 10px 24px rgba(224,30,121,.14)}
.search button{
  position:absolute;right:5px;top:5px;bottom:5px;width:48px;border:0;border-radius:999px;
  background:linear-gradient(160deg,#ff8abd,var(--brand) 55%,#a91257);color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 14px rgba(224,30,121,.45),inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 4px rgba(120,10,50,.35);
  transition:.15s;cursor:pointer
}
.search button:active{transform:translateY(1px);box-shadow:0 3px 8px rgba(224,30,121,.4),inset 0 2px 5px rgba(120,10,50,.4)}
.search button:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 9px 18px rgba(224,30,121,.5),inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 4px rgba(120,10,50,.35)}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-btn{
  display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:999px;border:0;background:transparent;
  color:var(--ink2);font-weight:700;font-size:14px;position:relative;transition:.15s
}
.icon-btn:hover{background:var(--tint);color:var(--brand)}
.icon-btn small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.icon-btn .lbl{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.header-actions .icon-btn[data-open-cart]{background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-2)}
.header-actions .icon-btn[data-open-cart]:hover{background:var(--tint-2);color:var(--brand-ink)}
.cart-count{
  position:absolute;top:1px;left:26px;background:var(--deal);color:#fff;font-size:11px;font-weight:800;
  min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;
  box-shadow:0 2px 6px rgba(249,115,22,.45)
}

/* ---------- Nav ---------- */
.nav{background:linear-gradient(180deg,#2c0c20,var(--night));position:relative;z-index:50}
.nav .wrap{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap}
@media(max-width:1080px){.nav .wrap{flex-wrap:wrap}}
.nav-item:first-child > a{padding-left:0}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a{color:#eed7e5;font-size:13.5px;font-weight:600;padding:14px 12px;display:flex;align-items:center;gap:5px;white-space:nowrap;letter-spacing:.2px;transition:color .14s,background .14s,box-shadow .14s}
.nav-item > a:hover,.nav-item:hover > a{color:#fff;background:rgba(224,30,121,.16);box-shadow:inset 0 -3px 0 var(--brand)}
.nav-item .mcaret{opacity:.5;display:flex}
.nav-badge{position:absolute;top:-2px;left:8px;background:var(--deal);color:#fff;font-size:8.5px;font-weight:800;padding:2px 6px;border-radius:5px 5px 5px 0;letter-spacing:.3px;z-index:3;line-height:1.25}
.nav a.nav-sale{color:#ff8f8f}
.nav-item:hover a.nav-sale{color:#ffb3b3}
.nav a.nav-deals{color:#fff;background:linear-gradient(135deg,var(--brand-2),var(--brand));border:0;border-radius:999px;margin:7px 6px;padding:8px 18px;font-weight:700;box-shadow:0 4px 14px rgba(224,30,121,.4)}
.nav a.nav-deals:hover{filter:brightness(1.08);box-shadow:0 6px 18px rgba(224,30,121,.55)}
/* mega dropdown */
.mega{position:absolute;top:100%;left:0;background:#fff;border-radius:0 0 18px 18px;box-shadow:0 26px 56px rgba(35,8,27,.26);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.16s;z-index:60;border-top:3px solid var(--brand)}
.nav-item.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.nav-item:nth-last-child(-n+3) .mega{left:auto;right:0}
.mega-inner{display:flex;gap:40px;padding:24px 30px;max-width:none;margin:0}
.mega-col h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--brand-ink);margin:0 0 12px;font-weight:800}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-col li{margin-bottom:9px}
.mega-col a{color:var(--ink2);font-size:13.5px;font-weight:500;display:block;white-space:nowrap;transition:.13s}
.mega-col a:hover{color:var(--brand);transform:translateX(3px)}
.nav-toggle{display:none}

/* ---------- USP strip ---------- */
.usps{background:linear-gradient(180deg,#fff,#fdf8fb);border-bottom:1px solid var(--line)}
.usps .wrap{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;padding:13px 20px}
.usp{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--ink2);font-weight:700}
.usp .u-ic{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--tint),var(--tint-2));color:var(--brand);display:grid;place-items:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(224,30,121,.12)}
.usp small{display:block;color:var(--muted);font-weight:500;font-size:11.5px}

/* ---------- Hero ---------- */
.hero{padding:30px 0 12px}
.hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
.hero-main{
  border-radius:26px;padding:54px 50px;color:#fff;min-height:360px;display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(90% 130% at 105% -15%,rgba(255,255,255,.28),transparent 45%),
    radial-gradient(130% 170% at -10% 115%,var(--brand-deep) 0%,transparent 55%),
    linear-gradient(115deg,#ff6fb0 0%,#e01e79 48%,#8f1150 100%);
  position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(157,23,77,.28)
}
.hero-main::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(100deg,transparent 42%,#000);mask-image:linear-gradient(100deg,transparent 42%,#000)
}
.hero-main::after{
  content:"";position:absolute;right:-70px;bottom:-70px;width:320px;height:320px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  box-shadow:inset 0 0 0 34px rgba(255,255,255,.08),0 0 80px rgba(255,255,255,.18)
}
.hero-main .eyebrow{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);padding:8px 16px;border-radius:999px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:relative;z-index:1;opacity:1
}
.hero-main h1{
  font-size:clamp(32px,3.8vw,50px);font-weight:900;letter-spacing:-.03em;margin:18px 0 14px;max-width:16ch;
  position:relative;z-index:1;text-wrap:balance;text-shadow:0 2px 24px rgba(109,15,61,.35)
}
.hero-main p{font-size:16.5px;opacity:.95;max-width:46ch;margin:0 0 26px;position:relative;z-index:1}
.hero-main .btn{position:relative;z-index:1}
.hero-side{display:grid;grid-template-rows:1fr 1fr;gap:18px}
.hero-card{
  border-radius:22px;padding:28px;color:#fff;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s
}
.hero-card::after{content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14)}
.hero-card::before{content:"";position:absolute;right:-24px;bottom:-64px;width:130px;height:130px;border-radius:50%;border:2px dashed rgba(255,255,255,.3)}
.hero-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(35,8,27,.24)}
.hero-card.a{background:linear-gradient(135deg,#ffb056,#f97316 55%,#dd5a0a);box-shadow:0 14px 34px rgba(249,115,22,.25)}
.hero-card.b{background:linear-gradient(135deg,#c81d6f,#8f1150 60%,#5f0b35);box-shadow:0 14px 34px rgba(143,17,80,.3)}
.hero-card h3{font-size:24px;font-weight:900;margin:0 0 5px;letter-spacing:-.02em;position:relative;z-index:1}
.hero-card p{margin:0;opacity:.94;font-size:14px;position:relative;z-index:1}
.hero-card .btn{position:relative;z-index:1}
.btn{
  display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--brand);font-weight:800;font-size:15px;
  padding:13px 26px;border-radius:999px;border:0;width:fit-content;
  transition:transform .18s,box-shadow .18s,filter .18s,background .18s;box-shadow:0 8px 22px rgba(35,8,27,.22)
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(35,8,27,.28)}
.btn:active{transform:translateY(0)}
/* ghost = outline button. Default is for LIGHT page backgrounds (dark text, soft border);
   the translucent white variant lives only on the dark hero cards. */
.btn.ghost{background:#fff;color:#241d30;border:1.5px solid #e6dcea;box-shadow:none}
.btn.ghost:hover{background:#fff;border-color:#e01e79;color:#e01e79}
.hero-card .btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.75);box-shadow:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hero-card .btn.ghost:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.75);color:#fff}
.btn.solid{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(224,30,121,.35)}
.btn.sm{padding:9px 18px;font-size:13.5px}

/* ---------- Category tiles ---------- */
.section{padding:40px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}
.section-head h2{font-size:27px;margin:0}
.section-head h2::after{content:"";display:block;width:46px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2));margin-top:9px}
.section-head p{margin:8px 0 0;color:var(--muted);font-size:14px;max-width:70ch}
.viewall{
  display:inline-flex;align-items:center;gap:6px;color:var(--brand-ink);font-weight:800;font-size:13.5px;white-space:nowrap;
  background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-2);padding:9px 18px;border-radius:999px;transition:.16s
}
.viewall:hover{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(224,30,121,.32);transform:translateY(-1px)}
.cat-tiles{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
.cat-tile{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 10px 16px;text-align:center;
  transition:transform .18s,box-shadow .18s,border-color .18s;box-shadow:var(--shadow-sm)
}
.cat-tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(224,30,121,.14);border-color:rgba(224,30,121,.4)}
.cat-tile .emoji{width:58px;height:58px;margin:0 auto 11px;border-radius:16px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(135deg,var(--tint),var(--tint-2));box-shadow:inset 0 0 0 1px rgba(224,30,121,.1);transition:transform .18s}
.cat-tile:hover .emoji{transform:scale(1.08) rotate(-3deg)}
.cat-tile span{font-size:12px;font-weight:800;color:var(--ink2);display:block;line-height:1.3;letter-spacing:.02em}
.cat-tile:hover span{color:var(--brand-ink)}

/* ---------- Product grid / cards ---------- */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(min-width:1500px){.grid:not(.cols4){grid-template-columns:repeat(6,1fr)}}
.grid.cols4{grid-template-columns:repeat(4,1fr)}
.pcard{
  background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative
}
.pcard:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(40,20,45,.10);border-color:#e6e0ea}
/* Cards stay honest and clean: the grey "No reviews yet" row is noise on every card — show a
   stars row only once a product actually has reviews. (PDP and review pages unaffected.) */
.pcard .stars-none{display:none}
.pcard .thumb{
  aspect-ratio:1/1;display:grid;place-items:center;position:relative;text-align:center;padding:16px;
  background:#fff
}
.pcard .thumb .brandtag{
  position:absolute;top:11px;left:11px;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--brand);
  text-transform:uppercase;z-index:3;background:rgba(255,255,255,.88);padding:3px 8px;border-radius:99px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)
}
.pcard .thumb .brandtag:empty{display:none}
.pcard .thumb .glyph{
  width:92px;height:92px;border-radius:20px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:30px;
  box-shadow:0 10px 24px rgba(224,30,121,.26);margin-bottom:10px
}
.pcard .thumb .pn{font-size:12px;font-weight:700;color:var(--ink2);line-height:1.25;max-width:90%}
.badges{position:absolute;top:39px;left:11px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:3}
/* Wishlist heart, sits on the product image (top-right). Delegated click handler in app.js. */
.wish{position:absolute;top:9px;right:9px;z-index:5;width:34px;height:34px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:grid;place-items:center;cursor:pointer;color:#c2c2ca;box-shadow:0 2px 8px rgba(20,10,24,.14);transition:transform .15s ease,color .15s ease}
.wish svg{width:19px;height:19px;pointer-events:none}
.wish:hover{transform:scale(1.13);color:var(--brand)}
.wish.on{color:var(--brand)}
.wish.on svg path{fill:var(--brand);stroke:var(--brand)}
.wish-count{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--brand);color:#fff;font-size:10px;font-weight:800;display:none;place-items:center;line-height:1}
.gallery-wish{top:16px;right:16px;width:42px;height:42px;z-index:6}
.gallery-wish svg{width:22px;height:22px}
.icon-btn{position:relative}
/* Wishlist buy-box button on the product page */
.pdp-wish{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);color:var(--ink2);border-radius:13px;padding:11px 16px;font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.pdp-wish svg{width:19px;height:19px}
.pdp-wish:hover{border-color:var(--brand);color:var(--brand)}
.pdp-wish.on{border-color:var(--brand);color:var(--brand);background:var(--tint)}
.pdp-wish.on svg path{fill:var(--brand);stroke:var(--brand)}
.badge{font-size:9.5px;font-weight:800;letter-spacing:.5px;padding:3px 8px;border-radius:20px;color:#fff;box-shadow:0 2px 6px rgba(28,10,24,.18)}
.badge.puffs{background:#2a0e20}
.badge.new{background:var(--new)}
.badge.oos{background:var(--muted)}
.badge.disc{background:var(--danger)}
.pcard .body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
.pcard .title{font-size:14px;font-weight:700;color:var(--ink);line-height:1.35;margin:0 0 6px;min-height:38px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard:hover .title{color:var(--brand)}
.stars{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.stars .s{color:var(--star);letter-spacing:1px}
.flav{font-size:11.5px;color:var(--brand);font-weight:700;margin-bottom:8px}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.price{font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.price small{font-size:12px;color:var(--muted);font-weight:600}
.deal-pill{display:inline-block;background:rgba(249,115,22,.13);color:#c2410c;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:20px;margin-bottom:8px;width:fit-content}
.add{
  width:100%;margin-top:11px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-ink));
  color:#fff;font-weight:800;font-size:13.5px;letter-spacing:.01em;
  padding:10px;display:flex;align-items:center;justify-content:center;gap:7px;transition:.16s;
  box-shadow:0 3px 9px rgba(224,30,121,.16)
}
.add:hover{filter:brightness(1.12);box-shadow:0 7px 18px rgba(224,30,121,.35);transform:translateY(-1px)}
.add:active{transform:translateY(0) scale(.98)}
.add.oos{background:var(--line);color:var(--muted);cursor:not-allowed;box-shadow:none;filter:none;transform:none}
.add.added{background:linear-gradient(135deg,#22c55e,var(--new));box-shadow:0 4px 12px rgba(22,163,74,.3)}

/* row scroller */
.scroller{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.scroller .pcard{min-width:230px;max-width:230px;scroll-snap-align:start}
.scroller::-webkit-scrollbar{display:none}
/* Round side arrows injected by app.js (railArrows); hidden at the ends and on touch widths */
.rail-wrap{position:relative}
.rail-arr{position:absolute;top:42%;transform:translateY(-50%);z-index:4;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 3px 14px rgba(30,12,28,.16);display:grid;place-items:center;transition:.15s}
.rail-arr:hover{color:var(--brand);box-shadow:0 5px 18px rgba(30,12,28,.22)}
.rail-prev{left:-8px}.rail-next{right:-8px}
.rail-wrap.at-start .rail-prev,.rail-wrap.at-end .rail-next{opacity:0;pointer-events:none}
@media(max-width:760px){.rail-arr{display:none}}

/* ---------- Brands strip ---------- */
.brands{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.brand-chip{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 10px;text-align:center;font-weight:800;
  color:var(--ink2);letter-spacing:.02em;transition:.16s;box-shadow:var(--shadow-sm);font-size:15px
}
.brand-chip:hover{color:var(--brand);border-color:rgba(224,30,121,.45);transform:translateY(-3px);box-shadow:0 12px 26px rgba(224,30,121,.13);background:linear-gradient(180deg,#fff,var(--tint))}

/* ---------- Welcome / SEO text ---------- */
.prose{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow-sm)}
.prose h2{font-size:24px}
.prose p{color:var(--ink2);margin:0 0 14px}
.prose a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{text-decoration-thickness:2px;color:var(--brand-ink)}
.lf-clip{position:relative;max-height:500px;overflow:hidden;transition:max-height .4s ease}
.lf-clip:not(.lf-open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;border-radius:0 0 20px 20px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.lf-toggle{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:var(--tint);color:var(--brand-ink);border:1px solid var(--brand);font-weight:700;font-size:14px;padding:9px 22px;border-radius:999px;cursor:pointer;transition:.16s}
.lf-toggle:hover{background:var(--brand);color:#fff}
.lf-toggle::after{content:"▾";font-size:11px}
.lf-toggle[aria-expanded="true"]::after{content:"▴"}
.cat-seo h3{font-size:18px;margin:22px 0 10px;color:var(--ink)}
.cat-seo ul{margin:0 0 14px;padding-left:0;list-style:none}
.cat-seo ul li{position:relative;padding:6px 0 6px 28px;color:var(--ink2);line-height:1.5}
.cat-seo ul li::before{content:"✓";position:absolute;left:0;top:6px;width:19px;height:19px;border-radius:50%;background:linear-gradient(135deg,var(--tint-2),rgba(224,30,121,.18));color:var(--brand);font-size:11px;font-weight:800;display:grid;place-items:center}
.cat-seo ul li b{color:var(--ink)}

/* ---------- Reviews ---------- */
.reviews{background:linear-gradient(180deg,#fdf3f8,var(--bg));padding:46px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rev{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff;box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s}
.rev:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.rev .who{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rev .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;box-shadow:0 4px 10px rgba(224,30,121,.25)}
.rev .name{font-weight:700;font-size:14px}
.rev .verified{font-size:11px;color:var(--new);font-weight:700}
.rev .stars{color:var(--star);letter-spacing:2px;margin-bottom:6px}
.rev p{font-size:13px;color:var(--ink2);margin:0}
.rev .when{font-size:11px;color:var(--muted);margin-top:8px}

/* ---------- Category / listing page ---------- */
.crumbs{font-size:13px;color:var(--muted);padding:16px 0}
.crumbs a{color:var(--brand);font-weight:600}
.crumbs a:hover{color:var(--brand-ink)}
.page-head h1{font-size:31px;margin:0 0 10px;letter-spacing:-.025em}
.subcats{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.subcats a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 17px;font-size:13px;font-weight:700;color:var(--ink2);transition:.15s;box-shadow:var(--shadow-sm)}
.subcats a:hover{border-color:var(--brand);color:var(--brand);background:var(--tint);transform:translateY(-1px)}
.listing{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;padding-bottom:40px}
.filters{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;position:sticky;top:90px;box-shadow:var(--shadow-sm)}
.filters h3{font-size:16px;margin:0 0 14px}
.fgroup{border-top:1px solid var(--line);padding:12px 0}
.fgroup summary{font-weight:700;font-size:13.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary::after{content:"+";color:var(--brand);font-weight:800}
.fgroup[open] summary::after{content:"−"}
.fgroup label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);padding:6px 0;cursor:pointer}
.fgroup label:hover{color:var(--brand-ink)}
.fgroup label span{margin-left:auto;color:var(--muted);font-size:12px}
.fgroup input[type=checkbox]{accent-color:var(--brand)}
.listing-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.listing-head .count{color:var(--muted);font-size:13px;font-weight:600}
.sortsel{border:1.5px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13px;font-weight:700;background:#fff;color:var(--ink2)}
.sortsel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(224,30,121,.1)}
.pager{display:flex;gap:6px;justify-content:center;padding:28px 0 10px}
.pager a,.pager span{min-width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:14px;border:1px solid var(--line);background:#fff;color:var(--ink2);transition:.14s}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager .on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(224,30,121,.3)}
.filter-toggle{display:none}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:10px;transition:border-color .15s,box-shadow .15s}
.faq details[open]{border-color:rgba(224,30,121,.35);box-shadow:var(--shadow-sm)}
.faq summary{font-weight:700;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-size:20px;font-weight:800}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--ink2);margin:12px 0 0;font-size:14px}

/* ---------- Product detail ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:24px 0 40px;align-items:start}
.pdp .gallery{background:#fff;border:1px solid var(--line);border-radius:26px;aspect-ratio:1/1;display:grid;place-items:center;text-align:center;padding:30px;position:relative;box-shadow:var(--shadow-sm)}
.pdp .gallery .glyph{width:150px;height:150px;border-radius:28px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:52px;box-shadow:0 16px 38px rgba(224,30,121,.28);margin-bottom:16px}
.pdp .gallery .gname{font-weight:700;color:var(--ink2)}
.pdp h1{font-size:30px;margin:0 0 10px;letter-spacing:-.025em}
.pdp .stars{font-size:14px;margin-bottom:14px}
.pdp .pdp-price{font-size:36px;font-weight:900;margin:6px 0;letter-spacing:-.03em}
.pdp .pdp-price small{font-size:15px;color:var(--muted);font-weight:600}
.pdp .pdp-price .unit-note{font-size:14px;color:var(--muted);font-weight:600;vertical-align:middle;margin-left:6px;letter-spacing:0}
.pdp .deal-pill{font-size:13px;padding:6px 14px}
.opts{margin:20px 0}
.opts h4{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:700;color:var(--ink2);transition:.14s}
.chips button.on,.chips button:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--tint)}
.opt-select{width:100%;max-width:400px;border:1.5px solid var(--line);border-radius:13px;padding:13px 40px 13px 15px;font-size:15px;font-weight:600;color:var(--ink);font-family:inherit;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e01e79' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.opt-select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(224,30,121,.12)}
.opt-select:hover{border-color:var(--brand)}
.nic-warn{margin:16px 0 4px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:12px;padding:11px 14px;font-size:12.5px;line-height:1.5;max-width:400px}
.nic-warn b{color:#7c2d12}
/* product image overlays the placeholder glyph; on load error it hides and the glyph shows */
.pthumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:8px;z-index:2;transition:transform .25s ease}
.pcard:hover .pthumb-img{transform:scale(1.04)}
.pthumb-img.imgfail{display:none}
.gallery-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:22px;z-index:2;border-radius:26px}
.gallery-img.imgfail{display:none}
.pdp .gallery-wrap{position:sticky;top:96px;align-self:start}
/* thumbnail strip */
.gallery-thumbs{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.gthumb{width:62px;height:62px;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:5px;cursor:pointer;flex:0 0 auto;transition:border-color .15s,transform .15s;overflow:hidden}
.gthumb img{width:100%;height:100%;object-fit:contain;display:block}
.gthumb:hover{border-color:var(--brand)}
.gthumb.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(224,30,121,.15)}
/* empty rating state */
.stars-none .s{color:#e6dde3}
.stars .rev-none{color:var(--muted)}
/* buy-box reassurance */
.pdp-reassure{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.pr-stock{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#166534}
.pr-dot{width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18);flex:0 0 auto}
.pr-pay{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pr-pay .pr-lbl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.pr-icons{display:flex;flex-wrap:wrap;gap:6px}
.pr-icons span{font-size:11px;font-weight:700;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 8px}
/* product reviews */
.reviews-summary{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.reviews-summary .rs-score{font-size:34px;font-weight:900;letter-spacing:-.02em;line-height:1}
.reviews-summary .rs-stars{color:var(--star);font-size:18px;letter-spacing:2px}
.reviews-summary .rs-count{color:var(--muted);font-size:14px}
.reviews-list{display:grid;gap:14px;margin-bottom:18px}
.reviews-empty{color:var(--muted)}
.review-item{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff}
.review-item .ri-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.review-item .ri-stars{color:var(--star);letter-spacing:1px;font-size:14px}
.review-item .ri-name{font-weight:700;font-size:14px}
.review-item .ri-date{color:var(--muted);font-size:12px}
.review-item .ri-title{font-weight:700;margin:2px 0 4px}
.review-item .ri-body{color:var(--ink2);font-size:14px;line-height:1.55}
.review-open-btn{margin-bottom:10px}
.review-form{display:grid;gap:12px;max-width:520px;margin-top:12px;border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff}
.review-form .rf-row{display:flex;align-items:center;gap:12px}
.rf-label{font-weight:700;font-size:14px}
.rf-stars{display:flex;gap:2px}
.rf-star{background:none;border:0;font-size:26px;line-height:1;color:#e6dde3;cursor:pointer;padding:0 2px}
.rf-star.on{color:var(--star)}
.rf-input{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;font-family:inherit;width:100%;box-sizing:border-box}
.rf-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(224,30,121,.12)}
.rf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rf-msg{font-size:13.5px;margin:0;min-height:16px}
.rf-msg.ok{color:#16a34a}
.rf-msg.err{color:#dc2626}
/* review-page buy card */
.rev-buy{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin:18px 0;background:#fff;box-shadow:var(--shadow-sm)}
.rev-buy-img{width:72px;height:72px;flex:0 0 auto;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden}
.rev-buy-img img{width:100%;height:100%;object-fit:contain;padding:6px}
.rev-buy-glyph{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:26px;border-radius:12px}
.rev-buy-info{flex:1;min-width:0}
.rev-buy-name{font-weight:800;color:var(--ink);text-decoration:none;font-size:15px;display:block;line-height:1.25}
.rev-buy-name:hover{color:var(--brand)}
.rev-buy-price{font-size:20px;font-weight:900;margin-top:3px}
.rev-buy-deal{font-size:11px;font-weight:800;color:var(--brand-ink);background:var(--tint);border-radius:6px;padding:2px 7px;vertical-align:middle;margin-left:6px}
.rev-buy-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.rev-buy .add{flex:0 0 auto;width:auto;margin-top:0;padding:12px 22px;border-radius:12px}
@media(max-width:560px){.rev-buy{flex-wrap:wrap}.rev-buy .add{width:100%}}
/* Image-less product placeholder: force the swatch to WHITE everywhere, overriding the inline
   per-product colour, so no product ever shows a coloured (blue/purple/teal) image background. */
.pcard .thumb .glyph,.pdp .gallery .glyph,.ci .ci-img{background:#fff!important;color:var(--brand)!important;box-shadow:none!important;border:1px solid var(--line)}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:13px;overflow:hidden;width:fit-content;background:#fff}
.qty button{width:42px;height:48px;border:0;background:#fff;font-size:20px;color:var(--ink2);transition:.13s}
.qty button:hover{background:var(--tint);color:var(--brand)}
.qty input{width:52px;height:48px;border:0;text-align:center;font-weight:800;font-size:16px;color:var(--ink)}
/* ---- Free-shipping progress bar (PDP) ---- */
.ship-bar{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:18px 0 6px;background:linear-gradient(180deg,#fff,var(--tint))}
.ship-msg{font-size:14.5px;color:var(--ink);margin-bottom:10px}
.ship-msg b{color:var(--brand)}
.ship-bar.unlocked .ship-msg b{color:var(--new)}
.ship-track{position:relative;height:10px;border-radius:6px;background:var(--tint-2);overflow:hidden}
.ship-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .4s ease}
.ship-bar.unlocked .ship-fill{background:linear-gradient(90deg,var(--new),#4ade80)}
.ship-pct{position:absolute;right:8px;top:-20px;font-size:12px;font-weight:800;color:var(--muted)}

/* ---- PDP tabs (Specifications / Description / Delivery / About) ---- */
.pdp-tabs .tab-nav{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:22px}
.pdp-tabs .tab-btn{background:none;border:0;padding:12px 18px;font-size:15px;font-weight:700;color:var(--muted);position:relative;margin-bottom:-2px;white-space:nowrap;transition:color .15s}
.pdp-tabs .tab-btn:hover{color:var(--brand-ink)}
.pdp-tabs .tab-btn.active{color:var(--ink)}
.pdp-tabs .tab-btn.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:3px 3px 0 0}
.pdp-tabs .tab-panel{display:none;animation:fadeTab .25s ease}
.pdp-tabs .tab-panel.active{display:block}
@keyframes fadeTab{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pdp-tabs .tab-panel h2{font-size:22px;margin:0 0 14px}
@media(max-width:640px){.pdp-tabs .tab-nav{gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.pdp-tabs .tab-btn{padding:11px 13px;font-size:13.5px}}

/* ---- Why Us? section ---- */
.why-us .whyus-head{display:flex;align-items:center;gap:22px;margin-bottom:30px}
.why-us .whyus-head h2{font-size:30px;margin:0;white-space:nowrap;letter-spacing:-.02em}
.why-us .whyus-line{flex:1;height:3px;background:linear-gradient(90deg,var(--tint-2),var(--brand) 50%,var(--tint-2));border-radius:3px;opacity:.55}
.whyus-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.whyus-item{text-align:center;padding:6px}
.whyus-ic{width:78px;height:78px;margin:0 auto 16px;border-radius:24px;display:grid;place-items:center;color:var(--brand);
  background:linear-gradient(160deg,#fff 0%,var(--tint) 45%,var(--tint-2) 100%);
  box-shadow:0 8px 18px rgba(224,30,121,.18),0 2px 4px rgba(120,17,66,.10),inset 0 2px 0 rgba(255,255,255,.9),inset 0 -3px 6px rgba(224,30,121,.16);
  transition:.2s}
.whyus-item:hover .whyus-ic{background:linear-gradient(160deg,#ff8abd,var(--brand) 55%,#a91257);color:#fff;transform:translateY(-4px);box-shadow:0 16px 30px rgba(224,30,121,.38),inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 5px rgba(120,10,50,.35)}
.whyus-item h3{font-size:14.5px;font-weight:700;color:var(--ink);margin:0;line-height:1.35;letter-spacing:0}
@media(max-width:820px){.whyus-grid{grid-template-columns:repeat(3,1fr);gap:24px 14px}.why-us .whyus-head h2{font-size:24px}}
@media(max-width:480px){.whyus-grid{grid-template-columns:repeat(2,1fr)}.whyus-ic{width:64px;height:64px}}

.buy-row{display:flex;gap:12px;margin:20px 0;flex-wrap:wrap}
.buy-row .add{width:auto;flex:1;min-width:200px;padding:15px 24px;font-size:16px;border-radius:14px;margin-top:0}
.trust-list{border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
.trust-list div{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink2);padding:5px 0;font-weight:600}
.trust-list .u-ic{color:var(--new);background:rgba(22,163,74,.1);box-shadow:none}
.pdp-desc{padding:10px 0 40px;max-width:860px}
.pdp-desc h2{font-size:24px;margin:0 0 12px}
.pdp-desc h3{font-size:18px;margin:28px 0 12px;color:var(--ink);padding-bottom:8px;border-bottom:2px solid var(--line)}
.pdp-desc p{color:var(--ink2);max-width:80ch}
.pdp-desc .feat-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px}
.pdp-desc .feat-list li{position:relative;padding-left:28px;color:var(--ink2);font-size:14.5px;line-height:1.5}
.pdp-desc .feat-list li::before{content:"✓";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:linear-gradient(135deg,var(--tint-2),rgba(224,30,121,.18));color:var(--brand);font-size:11px;font-weight:800;display:grid;place-items:center}
.pdp-desc .feat-list li b{color:var(--ink)}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 34px;border:1px solid var(--line);border-radius:14px;padding:26px 30px;font-size:15px}
.spec-k{font-weight:800;color:var(--ink,#17133a);line-height:1.3}
.spec-v{color:var(--ink2);margin-top:3px;line-height:1.4}
.pdp-desc .howto{margin:0;padding:0;list-style:none;counter-reset:step}
.pdp-desc .howto li{counter-increment:step;position:relative;padding:4px 0 16px 46px;color:var(--ink2);font-size:14.5px;line-height:1.55}
.pdp-desc .howto li::before{content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center;box-shadow:0 4px 10px rgba(224,30,121,.25)}
.pdp-desc .howto li:not(:last-child)::after{content:"";position:absolute;left:14px;top:30px;bottom:2px;width:2px;background:var(--tint-2)}
.pdp-desc .legal-note{font-size:12.5px;color:var(--muted);margin-top:26px;border-top:1px solid var(--line);padding-top:16px}
@media(max-width:820px){.spec-grid{grid-template-columns:repeat(2,1fr);gap:20px 26px}}
@media(max-width:640px){.pdp-desc .feat-list{grid-template-columns:1fr}}
@media(max-width:480px){.spec-grid{grid-template-columns:1fr;gap:16px;padding:20px 22px}}

/* ---------- Simple content pages ---------- */
.content{max-width:820px;margin:0 auto;padding:20px 0 50px}
.content h1{font-size:34px;margin:10px 0 18px;letter-spacing:-.03em}
.content h2{font-size:22px;margin:28px 0 10px}
.content p,.content li{color:var(--ink2);font-size:15px}
.content ul{padding-left:20px}
.content a{color:var(--brand);font-weight:600}
.content a:hover{color:var(--brand-ink)}
.article{max-width:760px}
.article-hero{height:180px;border-radius:20px;margin:8px 0 20px;display:flex;align-items:flex-end;padding:22px}
.article-hero .badge{color:#fff;font-size:12px;font-weight:700;background:rgba(0,0,0,.25);padding:5px 12px;border-radius:20px;box-shadow:none}
.article-meta{font-size:13.5px;color:var(--muted);margin:-6px 0 22px;font-weight:600}
.article-lead p{font-size:17px;line-height:1.65;color:var(--ink2)}
.article-toc{background:var(--tint);border:1px solid var(--tint-2);border-radius:16px;padding:18px 22px;margin:26px 0}
.article-toc h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-ink);margin:0 0 10px;border:0;padding:0}
.article-toc ol{margin:0;padding-left:20px}
.article-toc li{margin:6px 0;font-size:14.5px}
.article-toc a{font-weight:500}
.article-toc a:hover{color:var(--brand)}
.article-sec{scroll-margin-top:80px}
.article-sec h2{font-size:23px;margin:34px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.article-sec h3{font-size:18px;margin:24px 0 8px}
.article-sec p,.article-sec li{font-size:15.5px;line-height:1.7;color:var(--ink2)}
.article-sec ul,.article-sec ol{padding-left:22px;margin:12px 0}
.article-sec li{margin:7px 0}
.article-sec .key-takeaway{background:var(--pill-bg,var(--tint));border-left:3px solid var(--brand);border-radius:0 12px 12px 0;padding:14px 18px;margin:16px 0;font-size:15px}
.article-caveat{background:var(--tint);border:1px solid var(--tint-2);border-radius:12px;padding:16px 20px;margin:30px 0;font-size:13.5px;color:var(--ink2)}
.article-more li{margin:8px 0}
.about-hero{background:radial-gradient(90% 140% at 100% 0%,rgba(255,255,255,.2),transparent 45%),linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;border-radius:22px;padding:40px 36px;margin:6px 0 26px;box-shadow:0 16px 40px rgba(157,23,77,.22)}
.about-hero h2{color:#fff;margin:0 0 10px;font-size:27px}
.about-hero p{color:rgba(255,255,255,.93);margin:0;max-width:60ch;font-size:15.5px}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0 8px}
.about-stats .st{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 12px;text-align:center;box-shadow:var(--shadow-sm)}
.about-stats .st b{display:block;font-size:26px;color:var(--brand);font-weight:900;line-height:1.1;letter-spacing:-.02em}
.about-stats .st span{font-size:12.5px;color:var(--muted);font-weight:600}
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:16px 0 8px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s}
.info-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.info-card .ic{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--tint),var(--tint-2));color:var(--brand);display:grid;place-items:center;margin-bottom:13px}
.info-card .ic svg{width:22px;height:22px}
.info-card h3{font-size:15px;margin:0 0 4px;color:var(--ink)}
.info-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}
.info-card a{color:var(--brand);font-weight:600;word-break:break-word}
@media(max-width:640px){.about-stats{grid-template-columns:1fr 1fr}}
.internal-links{border-top:1px solid var(--line);background:#fff;padding:36px 0}
.internal-links h2{font-size:15px;margin:0 0 14px;color:var(--ink);font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.internal-links h2::before{content:"";width:4px;height:15px;border-radius:3px;background:linear-gradient(var(--brand),var(--brand-2))}
.internal-links h2:not(:first-child){margin-top:28px}
.link-cloud{display:flex;flex-wrap:wrap;gap:9px}
/* flavour / category tags — tappable, pink on hover */
.link-cloud a{display:inline-flex;align-items:center;min-height:38px;font-size:13.5px;background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:7px 15px;color:var(--ink);font-weight:600;line-height:1.2;text-decoration:none;transition:border-color .16s,background .16s,color .16s,transform .16s,box-shadow .16s}
.link-cloud a:hover{border-color:var(--brand);color:var(--brand);background:var(--tint);transform:translateY(-1px);box-shadow:0 5px 14px rgba(224,30,121,.14)}
.link-cloud a:active{transform:translateY(0);box-shadow:none}
.link-cloud a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* prominent card-style links — Related Products, Guides & Comparisons */
.link-cloud--cards a{background:#fff;border-radius:13px;padding:11px 16px;font-weight:700;font-size:14px;box-shadow:0 1px 2px rgba(26,20,32,.05)}
.link-cloud--cards a::after{content:"→";margin-left:9px;color:var(--brand);font-weight:800;display:inline-block;transition:transform .16s}
.link-cloud--cards a:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--tint);transform:translateY(-2px);box-shadow:0 8px 20px rgba(224,30,121,.16)}
.link-cloud--cards a:hover::after{transform:translateX(4px)}
@media(max-width:640px){
  .internal-links{padding:26px 0}
  .link-cloud a{min-height:42px;font-size:14px;padding:8px 16px}
  .link-cloud--cards a{width:100%;justify-content:space-between}
  .link-cloud--cards a::after{margin-left:auto}
}
.card-form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow-sm);margin-top:10px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(224,30,121,.1)}

/* ---------- Age gate ---------- */
.agegate{position:fixed;inset:0;background:rgba(28,10,24,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:200;display:grid;place-items:center;padding:20px}
.agegate .box{background:#fff;border-radius:24px;max-width:440px;width:100%;padding:36px;text-align:center;box-shadow:0 34px 90px rgba(0,0,0,.45)}
.agegate .mark{width:60px;height:60px;margin:0 auto 16px;border-radius:18px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:26px;box-shadow:0 10px 24px rgba(224,30,121,.35)}
.agegate h2{font-size:24px;margin:0 0 8px}
.agegate p{color:var(--muted);font-size:14px;margin:0 0 20px}
.agegate .btns{display:flex;gap:12px}
.agegate button{flex:1;padding:14px;border-radius:14px;font-weight:800;font-size:15px;border:0;transition:.15s}
.agegate .yes{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(224,30,121,.3)}
.agegate .yes:hover{filter:brightness(1.08);transform:translateY(-1px)}
.agegate .no{background:var(--bg);color:var(--ink2);border:1.5px solid var(--line)}
.agegate .no:hover{border-color:var(--muted)}

/* ---------- Cart drawer ---------- */
.drawer-bg{position:fixed;inset:0;background:rgba(28,10,24,.55);z-index:150;opacity:0;visibility:hidden;transition:.2s}
.drawer-bg.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;background:#fff;z-index:160;transform:translateX(100%);transition:.25s;display:flex;flex-direction:column;box-shadow:-14px 0 50px rgba(28,10,24,.3)}
.drawer.open{transform:translateX(0)}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--tint),#fff)}
.drawer .dh h3{margin:0;font-size:18px}
.drawer .dh button{border:0;background:#fff;width:34px;height:34px;border-radius:10px;font-size:18px;box-shadow:var(--shadow-sm);transition:.13s}
.drawer .dh button:hover{color:var(--brand);background:var(--tint)}
.drawer .items{flex:1;overflow-y:auto;padding:12px 20px}
.ci{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.ci .ci-img{width:56px;height:56px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;color:#fff;font-weight:800;overflow:hidden;background:#fff}
.ci .ci-img img{width:100%;height:100%;object-fit:cover;display:block}
.ci .ci-info{flex:1;min-width:0}
.ci .ci-info .n{font-size:13px;font-weight:700;line-height:1.3}
.ci .ci-info .p{color:var(--brand);font-weight:800;font-size:14px;margin-top:2px}
.ci .ci-qty{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px}
.ci .ci-qty button{width:24px;height:24px;border:1px solid var(--line);background:#fff;border-radius:7px;transition:.13s}
.ci .ci-qty button:hover{border-color:var(--brand);color:var(--brand)}
.ci .rm{border:0;background:none;color:var(--muted);font-size:12px;text-decoration:underline}
.ci .rm:hover{color:var(--danger)}
.drawer .df{padding:18px 20px;border-top:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--tint))}
.drawer .df .tot{display:flex;justify-content:space-between;font-weight:800;font-size:18px;margin-bottom:6px}
.drawer .df .tot-sub,.drawer .df .tot-ship{font-weight:500;font-size:14px;color:var(--ink2);margin-bottom:3px}
.drawer .df .tot-ship .ship-amt{color:var(--ink)}
.drawer .df .tot-grand{margin-top:4px;padding-top:8px;border-top:1px solid var(--line)}
.drawer .df .ship{font-size:12px;color:var(--muted);margin-bottom:14px}
.drawer .df .add{padding:15px;border-radius:14px}
.empty-cart{text-align:center;color:var(--muted);padding:50px 20px;font-size:14px}

/* ---------- Newsletter ---------- */
.newsletter{
  background:
    radial-gradient(80% 160% at 85% -30%,rgba(255,255,255,.26),transparent 50%),
    linear-gradient(120deg,#7c0e45,var(--brand) 55%,var(--brand-2) 125%);
  color:#fff;border-radius:26px;padding:48px 40px;text-align:center;margin:40px 0;
  position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(157,23,77,.25)
}
.newsletter::after{content:"";position:absolute;left:-60px;bottom:-90px;width:220px;height:220px;border-radius:50%;border:2px dashed rgba(255,255,255,.3)}
.newsletter h2{font-size:30px;margin:0 0 8px;position:relative;z-index:1}
.newsletter p{opacity:.92;max-width:52ch;margin:0 auto 22px;position:relative;z-index:1}
.nl-form{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap;position:relative;z-index:1}
.nl-form input{flex:1;min-width:200px;border:0;border-radius:999px;padding:15px 22px;font-size:15px;box-shadow:0 6px 16px rgba(35,8,27,.18)}
.nl-form input:focus{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
.nl-form button{background:var(--night);color:#fff;border:0;border-radius:999px;padding:15px 28px;font-weight:800;transition:.15s;box-shadow:0 6px 16px rgba(35,8,27,.3)}
.nl-form button:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(35,8,27,.4)}

/* ---------- Footer ---------- */
.site-footer{background:linear-gradient(180deg,#2a0b1f,#1a0413);color:#cbb2c2;padding:52px 0 0;margin-top:24px;position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-ink),var(--brand) 50%,var(--brand-2))}
.foot-top{display:grid;grid-template-columns:1.5fr 3fr;gap:44px;padding-bottom:34px}
.foot-about .logo .word{color:#fff}
.foot-about p{font-size:13px;color:#b598a9;margin:14px 0 16px;max-width:36ch}
.foot-addr{font-style:normal;font-size:12.5px;line-height:1.7;color:#a08296;margin:0 0 16px;max-width:36ch}
.foot-addr strong{color:#dcc4d1;font-weight:700}
.socials{display:flex;gap:10px}
.soc{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;transition:.15s}
.soc:hover{background:var(--grad);transform:translateY(-3px);box-shadow:0 8px 18px rgba(224,30,121,.35)}
.foot-links{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.foot-col h4{color:#fff;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;margin:0 0 14px}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin-bottom:10px}
.foot-col a{font-size:13.5px;color:#c2a5b7;transition:.13s}
.foot-col a:hover{color:#ff9cc8;padding-left:2px}
.foot-contact{display:flex;flex-wrap:wrap;gap:10px 26px;padding:18px 20px;border-top:1px solid rgba(255,255,255,.09)}
.foot-contact a,.foot-contact span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#c2a5b7}
.foot-contact a:hover{color:#fff}
.foot-contact svg{color:var(--brand-2);flex-shrink:0}
.foot-pay{display:flex;align-items:center;gap:14px;padding:16px 20px;border-top:1px solid rgba(255,255,255,.09);flex-wrap:wrap}
.foot-pay .pay-label{font-size:12px;color:#a08296;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.pays{display:flex;gap:8px;flex-wrap:wrap}
.pays span{background:#fff;color:#23081b;font-size:11px;font-weight:800;padding:5px 10px;border-radius:7px;letter-spacing:.2px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.09);padding:18px 20px;font-size:12.5px;color:#a08296;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-bottom .copy{color:#a08296}
.age-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);padding:6px 12px;border-radius:20px;font-weight:700;color:#fff;font-size:12.5px;box-shadow:inset 0 0 0 1px rgba(255,111,176,.25)}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--night);color:#fff;padding:14px 22px;border-radius:14px;font-weight:600;font-size:14px;z-index:180;transition:.3s;box-shadow:0 14px 34px rgba(28,10,24,.4),inset 0 0 0 1px rgba(255,111,176,.25);display:flex;align-items:center;gap:10px}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.warn{background:#7a1533;box-shadow:0 14px 34px rgba(28,10,24,.4),inset 0 0 0 1px rgba(255,111,176,.4)}
.opt-select.needpick,select.needpick{border-color:#e01e79!important;box-shadow:0 0 0 4px rgba(224,30,121,.2)!important;animation:needpick .5s ease}
@keyframes needpick{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* ---------- Mobile bottom tab bar ---------- */
.mtabs{display:none}
@media(max-width:820px){
  .mtabs{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:130;background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 28px rgba(120,17,66,.1)
  }
  .mtabs a,.mtabs button{
    flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    color:var(--muted);font-size:10.5px;font-weight:700;padding:6px 2px;position:relative;text-decoration:none
  }
  .mtabs a.active{color:var(--brand)}
  .mtabs a svg,.mtabs button svg{width:22px;height:22px}
  .mtabs .cart-count{position:absolute;top:0;left:calc(50% + 6px);background:var(--deal);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 3px}
  body{padding-bottom:64px}
}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .cat-tiles{grid-template-columns:repeat(4,1fr)}
  .grid,.grid.cols4{grid-template-columns:repeat(3,1fr)}
  .brands{grid-template-columns:repeat(4,1fr)}
  .rev-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .hero-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr;gap:26px}
  .pdp{grid-template-columns:1fr}
  .pdp .gallery-wrap{position:relative;top:auto;max-width:420px;width:100%}
  .pdp .gallery{position:relative;top:auto}
}
@media(max-width:820px){
  .topbar{font-size:11.5px;padding:7px 12px;line-height:1.4}
  .header-main{flex-wrap:wrap;gap:10px 8px;padding:11px 0;align-items:center}
  .nav-toggle{order:1;display:grid;place-items:center;background:var(--tint);color:var(--brand-ink);border:0;width:42px;height:42px;border-radius:13px;padding:0}
  .nav-toggle span{display:none}
  .nav-toggle svg{width:22px;height:22px}
  .header-main .logo{order:2;flex:1;justify-content:flex-start;gap:9px}
  .header-main .logo .mark{width:38px;height:38px;font-size:18px}
  .header-main .logo .word{font-size:19px;padding:9px 13px}
  .header-actions{order:3;gap:2px;align-items:center}
  .header-actions .icon-btn[data-open-cart]{background:var(--tint);width:42px;height:42px;border-radius:13px;justify-content:center;padding:0}
  .hide-mobile{display:none}
  .header-actions .icon-btn{padding:6px}
  .search{order:4;flex-basis:100%;max-width:none}
  .search input{padding:11px 48px 11px 16px;font-size:14px}
  .nav{display:none}
  .nav.open{display:block;position:fixed;inset:0;top:0;z-index:145;overflow-y:auto;padding-top:10px;background:linear-gradient(180deg,#2c0c20,#1a0413)}
  .nav.open .wrap{flex-direction:column;align-items:stretch}
  .nav.open .nav-item{flex-direction:column;align-items:stretch;position:static}
  .nav.open .nav-item > a{padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.08);justify-content:space-between}
  .nav.open .nav-badge{position:static;display:inline-block;margin:14px 0 -6px 20px;width:fit-content;align-self:flex-start;border-radius:6px}
  .nav.open .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-radius:0;border-top:0;background:rgba(255,255,255,.04);display:none}
  .nav.open .nav-item.exp .mega{display:block}
  .nav.open .nav-item > a .mcaret{transition:transform .2s}
  .nav.open .nav-item.exp > a .mcaret{transform:rotate(180deg)}
  .nav.open .mega-inner{flex-direction:column;gap:0;padding:4px 20px 14px}
  .nav.open .mega-col h4{color:#c489a6;margin:12px 0 6px;font-size:11px}
  .nav.open .mega-col a{color:#e3cdd9;padding:8px 0;display:block}
  .nav-close{display:none}
  .nav.open .nav-close{display:flex;justify-content:space-between;align-items:center;color:#fff;padding:14px 20px;font-weight:800;font-size:18px}
  .nav.open .nav-close button{background:rgba(255,255,255,.1);border:0;color:#fff;width:36px;height:36px;border-radius:10px;font-size:18px}
  .listing{grid-template-columns:1fr}
  .filters{display:none}
  .filters.open{display:block;position:static}
  .filter-toggle{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 16px;font-weight:700;font-size:14px;color:var(--ink2)}
  /* USP strip -> clean 2x2 grid */
  .usps .wrap{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px}
  .usp{background:#fff;border:1px solid var(--line);border-radius:13px;padding:9px 11px;font-size:12px;gap:8px;box-shadow:var(--shadow-sm)}
  .usp small{display:none}
  .usp .u-ic{width:28px;height:28px;border-radius:9px}
  /* tighter hero */
  .hero{padding:14px 0}
  .hero-main{padding:28px 22px;min-height:0;border-radius:20px}
  .hero-main h1{font-size:25px;margin:10px 0 10px}
  .hero-main p{font-size:14.5px;margin-bottom:16px}
  .hero-main .eyebrow{font-size:10.5px;letter-spacing:.12em;padding:6px 12px}
  .hero-main::after{width:200px;height:200px;right:-50px;bottom:-50px}
  .hero-side{gap:12px}
  .hero-card{padding:20px;border-radius:18px}
  .hero-card h3{font-size:20px}
  .section{padding:24px 0}
  .section-head{margin-bottom:14px}
  .section-head h2{font-size:20px}
  .section-head h2::after{width:36px;height:3px;margin-top:7px}
  .section-head p{font-size:13px}
  .viewall{padding:7px 14px;font-size:12.5px}
  .prose{padding:22px;border-radius:16px}
  .prose h2{font-size:20px}
  .newsletter{padding:30px 20px;border-radius:20px}
  .newsletter h2{font-size:22px}
  .reviews{padding:26px 0}
  .cat-tile .emoji{width:48px;height:48px;font-size:22px}
  .page-head h1{font-size:24px}
  .crumbs{padding:12px 0;font-size:12px}
}
@media(max-width:560px){
  .cat-tiles{grid-template-columns:repeat(2,1fr)}
  .grid,.grid.cols4{grid-template-columns:repeat(2,1fr);gap:12px}
  .brands{grid-template-columns:repeat(2,1fr)}
  .rev-grid{grid-template-columns:1fr}
  .hero-side{grid-template-columns:1fr}
  .hero-main{padding:30px 24px}
  .hero-main h1{font-size:29px}
  .section-head h2{font-size:21px}
  .header-actions .lbl{display:none}
  .pcard .title{min-height:auto}
  .pcard .body{padding:12px 12px 14px}
}
.nav-close{display:none}

/* ---------- Mobile footer polish ---------- */
@media(max-width:820px){
  .site-footer{padding-top:34px;text-align:center}
  .foot-top{gap:24px;padding-bottom:24px}
  .foot-about{display:flex;flex-direction:column;align-items:center}
  .foot-about .logo{justify-content:center}
  .foot-about p{font-size:13px;max-width:38ch;margin:12px auto 16px}
  .socials{justify-content:center}
  .foot-links{grid-template-columns:1fr 1fr;gap:22px 16px;text-align:left;max-width:420px;margin:0 auto;width:100%}
  .foot-col h4{margin-bottom:10px;font-size:12px}
  .foot-col li{margin-bottom:8px}
  .foot-col a{font-size:13px}
  .foot-contact{flex-direction:column;align-items:center;gap:10px;text-align:center}
  .foot-pay{flex-direction:column;gap:10px;justify-content:center}
  .pays{justify-content:center}
  .foot-bottom{flex-direction:column-reverse;text-align:center;gap:12px;padding-bottom:22px}
  .foot-bottom .copy{font-size:12px;line-height:1.5}
}

/* Quick-answer verdict box + Pros/Cons (added content blocks) */
.quick-answer{background:var(--tint);border:1px solid var(--tint-2);border-left:4px solid var(--brand);border-radius:14px;padding:16px 20px;margin:16px 0}
.quick-answer h3{margin:0 0 6px;font-size:16px;color:var(--brand-ink)}
.quick-answer p{margin:0}
.brand-about{margin:14px 0 4px}
.brand-about h3{margin:0 0 8px;font-size:20px;color:var(--brand-ink)}
.brand-about p{margin:0;line-height:1.7}
.cookie-consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;background:#241021;color:#f6eef3;border:1px solid rgba(224,30,121,.4);border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.4);padding:14px 16px}
.cookie-consent[hidden]{display:none}
.cc-inner{display:flex;align-items:center;gap:16px;max-width:1100px;margin:0 auto;flex-wrap:wrap}
.cc-text{margin:0;font-size:14px;line-height:1.55;flex:1 1 320px;color:#ecdde6}
.cc-text a{color:#ff8bc4;text-decoration:underline}
.cc-actions{display:flex;gap:10px;flex:0 0 auto}
.cc-btn{cursor:pointer;border-radius:999px;font-weight:700;font-size:14px;padding:10px 20px;border:1px solid transparent;font-family:inherit;transition:.15s}
.cc-decline{background:transparent;border-color:rgba(246,238,243,.3);color:#f6eef3}
.cc-decline:hover{border-color:rgba(246,238,243,.6)}
.cc-accept{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(224,30,121,.35)}
.cc-accept:hover{filter:brightness(1.08)}
@media(max-width:560px){.cc-inner{flex-direction:column;align-items:stretch;gap:12px}.cc-actions{justify-content:flex-end}}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.pc-col{border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.pc-col h4{margin:0 0 8px;font-size:15px;display:flex;align-items:center;gap:6px;letter-spacing:0}
.pc-pro{background:rgba(22,163,74,.05)}
.pc-pro h4{color:#16a34a}
.pc-pro h4::before{content:"\2713"}
.pc-con{background:var(--tint)}
.pc-con h4{color:var(--danger)}
.pc-con h4::before{content:"\2013"}
.pc-col ul{margin:0;padding-left:18px}
.pc-col li{margin:5px 0;font-size:14px}
@media(max-width:560px){.proscons{grid-template-columns:1fr}}

/* Comparison + best-of pages */
.cmp-wrap{overflow-x:auto;margin:14px 0;border-radius:12px}
.cmp-table{width:100%;border-collapse:collapse;font-size:14px;min-width:480px}
.cmp-table th,.cmp-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.cmp-table thead th{background:linear-gradient(135deg,var(--brand),var(--brand-ink));color:#fff;font-weight:700;border-color:rgba(255,255,255,.15)}
.cmp-table tbody th{background:var(--tint);font-weight:600;width:34%}
.best-list{list-style:none;margin:16px 0;padding:0;counter-reset:best}
.best-item{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:15px 17px;margin:10px 0;background:var(--card,#fff);box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s}
.best-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.best-rank{flex:0 0 auto;font-size:20px;font-weight:900;color:var(--brand);min-width:40px}
.best-body{flex:1}
.best-body a{color:var(--brand-ink);text-decoration:none;font-size:16px;font-weight:700}
.best-body a:hover{text-decoration:underline}
.best-meta{font-size:13px;color:var(--muted,#7a7080);margin:4px 0 6px;font-weight:600}
.best-body p{margin:0;font-size:14px}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:14px 0}
.cmp-card{position:relative;display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:14px;padding:15px 18px;text-decoration:none;background:#fff;box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s,border-color .16s;overflow:hidden}
.cmp-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--brand),var(--brand-2));transform:scaleY(0);transform-origin:center;transition:transform .16s}
.cmp-card:hover{border-color:rgba(224,30,121,.45);transform:translateY(-2px);box-shadow:0 8px 22px rgba(224,30,121,.14)}
.cmp-card:hover::before{transform:scaleY(1)}
.cmp-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.cmp-tx b{color:var(--ink);font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-tx span{font-size:12.5px;color:var(--muted,#6b6f8a);font-weight:500}
.cmp-arw{flex:0 0 auto;color:var(--brand);font-size:18px;font-weight:800;transition:transform .16s;opacity:.6}
.cmp-card:hover .cmp-arw{transform:translateX(4px);opacity:1}
.cmp-card:hover .cmp-tx b{color:var(--brand-ink)}

/* Vaping glossary */
.glossary{margin:16px 0}
.gloss-item{border-bottom:1px solid var(--line);padding:12px 0}
.gloss-item dt{font-weight:700;color:var(--brand-ink);font-size:15px;margin-bottom:3px}
.gloss-item dd{margin:0;font-size:14px;line-height:1.55}

/* Product-page compare table highlight */
.cmp-table tr.cmp-this{background:var(--tint-2)}
.cmp-table tr.cmp-this th{color:var(--brand-ink)}
.cmp-badge{display:inline-block;font-size:10px;font-weight:800;background:var(--grad);color:#fff;padding:1px 7px;border-radius:10px;vertical-align:middle;margin-left:4px}

/* Guide Q&A blocks */
.qa{border-bottom:1px solid var(--line);padding:14px 0;scroll-margin-top:110px}
.qa-q{font-size:17px;margin:0 0 6px;color:var(--brand-ink)}
.qa-a{margin:0;color:var(--ink2)}

/* Vape cost calculator */
.calc{border:1px solid var(--tint-2);border-radius:18px;padding:20px;margin:16px 0;background:var(--tint)}
.calc-in{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.calc-in label{flex:1;min-width:200px;font-size:13px;font-weight:700;display:flex;flex-direction:column;gap:5px}
.calc-in input{padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;background:#fff;transition:border-color .15s}
.calc-in input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(224,30,121,.1)}
.calc-out{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.calc-card{border:1px solid var(--line);border-radius:14px;padding:13px;text-align:center;background:#fff;box-shadow:var(--shadow-sm)}
.calc-card span{display:block;font-size:12px;color:var(--muted,#7a7080);font-weight:600;margin-bottom:4px}
.calc-card b{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.calc-hi{background:var(--grad);border-color:transparent;box-shadow:0 8px 20px rgba(224,30,121,.3)}
.calc-hi span{color:rgba(255,255,255,.88)}
.calc-hi b{color:#fff}
.calc-note{font-size:12px;color:var(--muted,#7a7080);margin-top:10px}
@media(max-width:640px){.calc-out{grid-template-columns:1fr 1fr}}

/* Review score badge */
.rev-score{display:inline-flex;align-items:center;gap:12px;margin:6px 0 14px;padding:10px 18px;border:1px solid var(--tint-2);border-radius:16px;background:var(--tint)}
.rev-stars{color:var(--brand);font-size:20px;letter-spacing:2px}
.rev-num{font-size:22px;font-weight:900;color:var(--brand-ink)}
.rev-label{font-size:12px;color:var(--muted,#7a7080);font-weight:600}

/* Flavour-guide list thumbnails */
.best-thumb{flex:0 0 auto;display:block}
.best-thumb img{width:62px;height:62px;object-fit:contain;border-radius:11px;background:#fff;border:1px solid var(--line)}
@media(max-width:560px){.best-thumb img{width:52px;height:52px}}

/* Compare hub — organised sections */
.cmp-jump{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px;padding:14px 16px;background:var(--tint);border:1px solid var(--tint-2);border-radius:16px}
.cmp-jump a{font-size:13px;font-weight:700;color:var(--brand-ink);padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);transition:.15s}
.cmp-jump a:hover{background:var(--brand);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(224,30,121,.3)}
.cmp-sec{margin:34px 0;scroll-margin-top:110px}
.cmp-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.cmp-sec-head h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em}
.cmp-count{font-size:12px;font-weight:800;color:var(--brand);background:var(--tint-2);border-radius:20px;padding:3px 10px;font-variant-numeric:tabular-nums}
.cmp-desc{margin:0 0 14px;color:var(--muted,#6b6f8a);font-size:14px}

/* Compare hub — full-width layout (broad, not a narrow centre column) */
.cmp-hub{max-width:none}
.cmp-hub > .quick-answer, .cmp-hub > .crumbs, .cmp-hub .cmp-desc, .cmp-hub .cmp-jump{max-width:900px}
.cmp-hub .cmp-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media(max-width:640px){.cmp-hub .cmp-grid{grid-template-columns:1fr}}

/* Live-sync: out-of-stock states (driven by admin) */
.pcard.oos{opacity:.72}
.pcard.oos .thumb{position:relative}
.pcard.oos .thumb::after{content:'Out of stock';position:absolute;left:0;right:0;bottom:0;background:rgba(153,27,27,.92);color:#fff;font-size:11px;font-weight:700;text-align:center;padding:4px 0;letter-spacing:.02em;z-index:4}
.add-oos{background:#e5e7eb!important;color:#6b7280!important;cursor:not-allowed!important;border-color:#e5e7eb!important;box-shadow:none!important;transform:none!important;filter:none!important}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* Recently viewed — theme grid on desktop, snap carousel on mobile */
.rv-section{margin-top:8px}
@media(max-width:820px){
  .rv-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .rv-grid>.pcard{min-width:64%;max-width:64%;flex:0 0 auto;scroll-snap-align:start}
}

/* Back-in-stock notify modal */
.bis-overlay{position:fixed;inset:0;background:rgba(20,14,26,.55);z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px}
.bis-box{position:relative;background:#fff;border-radius:16px;max-width:380px;width:100%;padding:24px 22px;box-shadow:0 18px 60px rgba(0,0,0,.28)}
.bis-box h3{margin:0 0 4px;font-size:20px;color:#241d30}
.bis-line{margin:4px 0 12px;color:#4b4358;font-size:14px}
.bis-x{position:absolute;top:10px;right:12px;background:none;border:0;font-size:24px;line-height:1;color:#9a97ad;cursor:pointer}
.bis-form{display:flex;gap:8px;flex-wrap:wrap}
.bis-email{flex:1;min-width:170px;border:1.5px solid #e6dcea;border-radius:10px;padding:11px 12px;font-size:14px}
.bis-go{background:#e01e79;color:#fff;border:0;border-radius:999px;padding:11px 20px;font-weight:700;cursor:pointer}
.bis-go:disabled{opacity:.6}
.bis-consent{color:#9a97ad;font-size:12px;margin:10px 0 0}
.bis-msg{font-size:14px;margin:10px 0 0;display:none}
.bis-msg.ok{display:block;color:#16a34a;font-weight:600}
.bis-msg.err{display:block;color:#e11d48}

/* Predictive search loading shimmer */
.sr-shim{display:inline-block;background:linear-gradient(90deg,#f3f1f7 25%,#faf8fc 50%,#f3f1f7 75%);background-size:200% 100%;animation:srshim 1.1s infinite}
@keyframes srshim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Email capture popup */
.pvpop-overlay{position:fixed;inset:0;background:rgba(20,14,26,.6);z-index:1300;display:flex;align-items:center;justify-content:center;padding:18px}
.pvpop-box{position:relative;background:#fff;border-radius:18px;max-width:400px;width:100%;padding:30px 26px;text-align:center;box-shadow:0 22px 70px rgba(0,0,0,.32)}
.pvpop-mark{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#e01e79,#ff7eb3);color:#fff;font-weight:900;font-size:26px;display:grid;place-items:center;margin:0 auto 12px}
.pvpop-box h3{margin:0 0 6px;font-size:22px;color:#241d30}
.pvpop-sub{margin:0 0 14px;color:#4b4358;font-size:14px}
.pvpop-x{position:absolute;top:10px;right:14px;background:none;border:0;font-size:26px;line-height:1;color:#9a97ad;cursor:pointer}
.pvpop-form{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pvpop-form input{flex:1;min-width:170px;border:1.5px solid #e6dcea;border-radius:10px;padding:12px;font-size:14px}
.pvpop-form button{background:#e01e79;color:#fff;border:0;border-radius:999px;padding:12px 22px;font-weight:700;cursor:pointer}
.pvpop-form button:disabled{opacity:.6}
.pvpop-consent{color:#9a97ad;font-size:11.5px;margin:12px 0 0}
.pvpop-msg{font-size:13.5px;margin:8px 0 0;display:none}
.pvpop-msg.err{display:block;color:#e11d48}
.pvpop-no{background:none;border:0;color:#9a97ad;font-size:13px;margin-top:10px;cursor:pointer;text-decoration:underline}
.pvpop-code{font-size:24px;font-weight:800;letter-spacing:.06em;background:#fdeef5;color:#e01e79;padding:14px 20px;border-radius:12px;display:inline-block;margin:6px 0}
.pvpop-copy{display:block;margin:4px auto 0;background:none;border:1.5px solid #e6dcea;border-radius:999px;padding:8px 18px;font-weight:700;color:#241d30;cursor:pointer}
.pvpop-shop{display:inline-block;margin-top:14px;background:#e01e79;color:#fff;text-decoration:none;padding:12px 28px;border-radius:999px;font-weight:700}
@media(max-width:560px){.pvpop-overlay{align-items:flex-end;padding:0}.pvpop-box{border-radius:18px 18px 0 0;max-width:none}}

/* Bundle widget (product page) */
.bundle-widget{margin-top:12px;border:1.5px solid #fbcfe8;background:#fdf2f8;border-radius:14px;padding:14px 16px}
.bundle-widget .bw-head{font-weight:800;color:#e01e79;margin-bottom:6px}
.bundle-widget .bw-line{margin:4px 0;font-size:13.5px;color:#4b4358}
.bundle-widget .bw-tiers{border-collapse:collapse;font-size:13.5px;margin:4px 0}
.bundle-widget .bw-tiers td{padding:4px 12px 4px 0}
.bundle-widget .bw-save{color:#16a34a;font-weight:700;font-size:12.5px}
.bundle-widget .bw-progress{display:flex;align-items:center;gap:10px;margin-top:8px}
.bundle-widget .bw-bar{flex:1;height:8px;border-radius:999px;background:#fff;overflow:hidden;border:1px solid #fbcfe8}
.bundle-widget .bw-bar span{display:block;height:100%;width:0;background:#e01e79;transition:width .3s}
.bundle-widget .bw-count{font-size:12.5px;font-weight:700;color:#e01e79;white-space:nowrap}
.bundle-widget .bw-addall{margin-top:8px;background:#e01e79;color:#fff;border:0;border-radius:999px;padding:10px 20px;font-weight:700;cursor:pointer}

/* Upsells: FBT + cross-sell strip + post-purchase */
.fbt-box{border:1.5px solid #e6dcea;border-radius:16px;padding:16px 18px;background:#fff}
.fbt-item{display:flex;gap:10px;align-items:flex-start;margin:6px 0;font-size:14.5px;cursor:pointer}
.fbt-item b{color:#e01e79}
.fbt-item em{color:#9a97ad;font-style:normal;font-size:12.5px}
.fbt-foot{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.fbt-total{font-weight:800;font-size:16px}
.fbt-addall{background:#e01e79;color:#fff;border:0;border-radius:999px;padding:11px 22px;font-weight:700;cursor:pointer}
.ups-strip{border-top:1px solid #f1eef6;padding:10px 14px}
.ups-head{font-weight:800;font-size:13px;margin-bottom:8px;color:#241d30}
.ups-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.ups-card{min-width:118px;max-width:130px;border:1px solid #f1eef6;border-radius:12px;padding:8px;text-align:center;flex:0 0 auto}
.ups-card img{width:64px;height:64px;object-fit:contain}
.ups-nm{font-size:12px;font-weight:600;line-height:1.25;margin:4px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ups-pr{font-size:12.5px;color:#e01e79;font-weight:700}
.ups-add{margin-top:5px;background:#fdeef5;color:#e01e79;border:0;border-radius:999px;padding:5px 14px;font-size:12px;font-weight:700;cursor:pointer}
.ups-post{margin:26px auto 0;max-width:460px;border:1.5px solid #e6dcea;border-radius:16px;padding:18px;text-align:center}
.ups-post h3{margin:0 0 4px}
.ups-post p{color:#6b6f8a;font-size:13.5px;margin:0 0 12px}
.ups-post .ups-row{justify-content:center}
.ups-checkout{display:inline-block;margin-top:12px;background:#e01e79;color:#fff;text-decoration:none;padding:10px 24px;border-radius:999px;font-weight:700}

/* Live filters: chips + mobile drawer */
.fchips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.fchip{background:#fdeef5;color:#e01e79;border:1px solid #fbcfe8;border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:700;cursor:pointer}
.fchip-clear{background:none;color:#6b6f8a;border-color:#e6dcea}
.filters .fapply{display:none;gap:8px;margin-top:12px}
@media(max-width:900px){
  .filters.open{display:block;position:fixed;inset:0;z-index:1100;background:#fff;overflow-y:auto;padding:20px 18px 90px;margin:0;border-radius:0}
  .filters.open .fapply{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;padding:12px 18px;border-top:1px solid #eee;z-index:1101}
  body.filters-open{overflow:hidden}
}

/* Live chat widget */
.chat-bubble{position:fixed;right:18px;bottom:18px;z-index:1150;width:54px;height:54px;border-radius:50%;background:#e01e79;color:#fff;border:0;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 26px rgba(224,30,121,.4)}
.chat-unread{position:absolute;top:-2px;right:-2px;background:#16a34a;color:#fff;font-size:11px;font-weight:800;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px}
.chat-panel{position:fixed;right:18px;bottom:82px;z-index:1151;width:min(360px,calc(100vw - 24px));height:min(480px,70vh);background:#fff;border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#241d30;color:#fff}
.chat-dot{width:9px;height:9px;border-radius:50%;background:#9a97ad}
.chat-dot.on{background:#22c55e}
.chat-state{color:#cfc9dd;font-size:12px}
.chat-x{margin-left:auto;background:none;border:0;color:#cfc9dd;font-size:22px;line-height:1;cursor:pointer}
.chat-thread{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#faf8fc}
.chat-msg span{display:inline-block;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.4;max-width:85%;word-wrap:break-word}
.chat-msg.from-a span{background:#fff;border:1px solid #eee;color:#241d30;border-bottom-left-radius:4px}
.chat-msg.from-v{text-align:right}
.chat-msg.from-v span{background:#e01e79;color:#fff;border-bottom-right-radius:4px;text-align:left}
.chat-msg a{color:inherit;text-decoration:underline}
.chat-quick{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px 0;background:#faf8fc}
.chat-qbtn{background:#fff;border:1.5px solid #e6dcea;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:#e01e79;cursor:pointer}
.chat-pre,.chat-form{display:flex;gap:6px;padding:10px 12px;background:#fff;border-top:1px solid #f1eef6}
.chat-pre{flex-wrap:wrap}
.chat-pre input{flex:1;min-width:120px;border:1.5px solid #e6dcea;border-radius:10px;padding:9px 11px;font-size:13.5px}
.chat-pre button{background:#e01e79;color:#fff;border:0;border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer}
.chat-input{flex:1;border:1.5px solid #e6dcea;border-radius:999px;padding:10px 14px;font-size:13.5px}
.chat-form button{background:#e01e79;color:#fff;border:0;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:15px}
@media(max-width:820px){.chat-bubble{bottom:76px}.chat-panel{bottom:140px}}

/* Signup field errors */
.ferr{color:#dc2626;font-size:12.5px;min-height:0;margin:4px 0 0}
.ferr:empty{display:none}
/* Popular Brands strip + trust band (homepage) */
.brand-strip{padding:34px 0 26px;background:#fff}
.bs-title{text-align:center;font-size:clamp(24px,4vw,34px);margin:0 0 22px}
.bs-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;align-items:center}
.bs-logo{text-decoration:none;color:#241d30;font-weight:900;letter-spacing:2.5px;font-size:15.5px;opacity:.75;transition:opacity .15s,color .15s;white-space:nowrap}
.bs-logo:hover{opacity:1;color:#e01e79}
.bs-logo[data-b="elf-bar"]{color:#7c3aed;font-weight:700;letter-spacing:4px}
.bs-logo[data-b="hayati"]{color:#0891b2;font-style:italic}
.bs-logo[data-b="killa"]{color:#dc2626;font-style:italic;font-weight:800}
.bs-logo[data-b="ske"]{letter-spacing:6px}
.bs-logo[data-b="vaporesso"]{font-weight:700}
.bs-logo[data-b="lost-mary"]{color:#16a34a}
.bs-logo[data-b="elux"]{letter-spacing:5px;color:#111}
.bs-logo:hover{color:#e01e79}
.trust-band{background:#3d0a24;color:#fff;padding:38px 0}
.tb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;text-align:center}
.tb-ic{width:74px;height:74px;border-radius:50%;border:2px solid rgba(255,255,255,.25);display:grid;place-items:center;margin:0 auto 12px;color:#fff}
.tb-item h3{margin:0 0 4px;font-size:18px}
.tb-item p{margin:0;color:#e9c8d9;font-size:13.5px}
.tb-reviews{text-align:center;margin:26px 0 0;color:#e9c8d9;font-size:14px}
.tb-reviews a{color:#ff9dc8;font-weight:700}
/* Reviews hub image cards */
.rvh-feat,.rvh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:14px 0 26px}
.rvh-card{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #f0e3ea;border-radius:14px;padding:10px 14px 10px 10px;text-decoration:none;color:#241d30;transition:box-shadow .15s,transform .15s}
.rvh-card:hover{box-shadow:0 6px 18px rgba(224,30,121,.12);transform:translateY(-2px)}
.rvh-thumb{width:64px;height:64px;flex:0 0 64px;border-radius:10px;overflow:hidden;background:#faf7f9;display:grid;place-items:center}
.rvh-thumb img{width:100%;height:100%;object-fit:contain}
.rvh-thumb img.imgfail{display:none}
.rvh-glyph{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;border-radius:10px}
.rvh-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.rvh-body b{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rvh-stars{color:#f59e0b;font-size:13px;letter-spacing:1px}
.rvh-score{color:#6b6f8a;font-size:12.5px;font-weight:700}
.rvh-read{color:#e01e79;font-size:12.5px;font-weight:700}
/* guide hub thumbnails */
.cmp-card .cmpc-thumb{width:54px;height:54px;flex:0 0 54px;border-radius:10px;overflow:hidden;background:#faf7f9;display:grid;place-items:center;margin-right:10px}
.cmp-card .cmpc-thumb img{width:100%;height:100%;object-fit:contain}
/* sticky buy bar on product pages */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid #f0dbe7;box-shadow:0 -6px 22px rgba(61,10,36,.10);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.sticky-buy .sb-wrap{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:12px}
.sticky-buy .sb-name{flex:1;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buy .sb-price{font-weight:900;color:#e01e79;font-size:16px}
.sticky-buy .sb-add{padding:11px 22px;white-space:nowrap}
@media(max-width:560px){.sticky-buy .sb-name{display:none}.sticky-buy .sb-wrap{justify-content:space-between}}

/* ---- Hero banner slider (Shopify-style, real product imagery; replaces gradient hero) ---- */
.hero-banner{position:relative;overflow:hidden;padding:0;background:#fff}
.hero-banner .hb-track{display:flex;width:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.hero-banner .hb-slide{min-width:100%;position:relative;padding:44px 0 54px}
.hero-banner .hb-s1{background:linear-gradient(115deg,#ffe6f2 0%,#fdeffa 45%,#eef3ff 100%)}
.hero-banner .hb-s2{background:linear-gradient(115deg,#e6f3ff 0%,#eefaff 50%,#f2eeff 100%)}
.hero-banner .hb-s3{background:linear-gradient(115deg,#e9fbf1 0%,#f3fdef 50%,#fdf8e8 100%)}
.hero-banner .hb-s4{background:linear-gradient(115deg,#fdf0e0 0%,#fdf6ea 50%,#f9eaf3 100%)}
.hero-banner .hb-s5{background:linear-gradient(115deg,#efeaff 0%,#f6effe 50%,#ffeef6 100%)}
.hero-banner .hb-s6{background:linear-gradient(115deg,#e8f1f8 0%,#eef6fb 50%,#f3f0fb 100%)}
/* Light burst sits behind the TEXT side only — the image side must stay saturated so the
   multiply blend can melt white product-photo backgrounds into the banner colour. */
.hero-banner .hb-slide::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 30%,rgba(255,255,255,.75),transparent 48%);pointer-events:none}
.hero-banner .hb-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;position:relative;min-height:330px;padding-left:46px;padding-right:46px}
@media(max-width:760px){.hero-banner .hb-inner{min-height:0;padding-left:16px;padding-right:16px}}
@media(prefers-reduced-motion:reduce){.hero-banner .hb-track{transition:none}}
.hero-banner .hb-copy{max-width:440px;flex:none}
.hero-banner .hb-copy .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:13px;color:#b0347c;margin:0}
.hero-banner .hb-word{font-size:clamp(42px,7vw,84px);line-height:.95;margin:8px 0 12px;font-weight:900;text-transform:uppercase;letter-spacing:.01em;color:#33102b;text-shadow:0 2px 0 rgba(255,255,255,.8)}
.hero-banner .hb-copy p{color:#5d4a58;font-size:15.5px;margin:0 0 18px;max-width:44ch}
.hero-banner .hb-imgs{display:flex;align-items:flex-end;gap:8px;flex:1;justify-content:flex-end;min-width:0}
/* True transparent cutouts (PIL edge-flood pipeline) sitting directly on the slide gradient
   with a silhouette shadow — same treatment as the category tiles. */
.hero-banner .hb-imgs img{height:var(--h,200px);width:auto;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(51,16,43,.28));transform:rotate(var(--r,0deg));max-width:24%}
.hero-banner .hb-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;border:0;background:rgba(255,255,255,.88);color:#33102b;width:38px;height:38px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.14);display:grid;place-items:center}
.hero-banner .hb-prev{left:10px}.hero-banner .hb-next{right:10px}
.hero-banner .hb-arr:hover{background:#fff}
.hero-banner .hb-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px;z-index:3}
.hero-banner .hb-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(51,16,43,.22);cursor:pointer;padding:0;transition:all .25s}
.hero-banner .hb-dots button.on{background:#e01e79;width:22px;border-radius:999px}
@media(max-width:760px){
  .hero-banner .hb-inner{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-banner .hb-slide{padding:22px 0 44px}
  .hero-banner .hb-copy{max-width:100%}
  .hero-banner .hb-word{font-size:clamp(34px,10.5vw,52px)}
  .hero-banner .hb-imgs{width:100%;justify-content:center}
  .hero-banner .hb-imgs img{height:calc(var(--h,200px)*.55)}
  .hero-banner .hb-imgs{gap:6px}
  .hero-banner .hb-hide-s{display:none}
  .hero-banner .hb-arr{display:none}
}

/* ---- Category banner tiles (ninja-style: gradient fades to WHITE at the bottom, so
   white-background product photos merge seamlessly into the tile — no pasted-on cards) ---- */
.cat-tiles:has(.cat-tile2){grid-template-columns:repeat(4,1fr);gap:16px}
.cat-tile2{position:relative;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:16px 10px 0;min-height:208px;color:#fff;text-decoration:none;transition:transform .18s,box-shadow .18s;box-shadow:0 4px 14px rgba(30,12,28,.08)}
.cat-tile2:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(30,12,28,.18)}
.ct-title{font-size:clamp(16px,1.6vw,23px);font-weight:900;letter-spacing:.045em;text-transform:uppercase;text-align:center;line-height:1.12;text-shadow:0 2px 10px rgba(0,0,0,.25);position:relative;z-index:2}
.ct-imgs{display:flex;align-items:flex-end;justify-content:center;margin-top:auto;padding:8px 8px 12px;gap:10px}
.ct-imgs img{height:102px;width:auto;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.30))}
.cat-tile2:hover .ct-imgs img{transform:translateY(-3px)}
.ct-imgs img{transition:transform .18s}
.ct-g1{background:linear-gradient(135deg,#f97316,#dc2626)}
.ct-g2{background:linear-gradient(135deg,#e01e79,#9333ea)}
.ct-g3{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.ct-g4{background:linear-gradient(135deg,#16a34a,#84cc16)}
.ct-g5{background:linear-gradient(135deg,#f59e0b,#e11d48)}
.ct-g6{background:linear-gradient(135deg,#8b5cf6,#d946ef)}
.ct-g7{background:linear-gradient(135deg,#06b6d4,#0e7490)}
.ct-g8{background:linear-gradient(135deg,#3b82f6,#ec4899)}
@media(max-width:900px){
  .cat-tiles:has(.cat-tile2){grid-template-columns:repeat(2,1fr);gap:12px}
  .cat-tile2{min-height:168px;padding-top:13px}
  .ct-title{font-size:15px}
  .ct-imgs img{height:92px}
}

/* ---- Auto-scrolling brand marquee (Top Brands) ---- */
.brand-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bm-track{display:flex;width:max-content;animation:bmscroll 36s linear infinite}
.bm-set{display:flex;gap:14px;padding-right:14px}
.bm-set .brand-chip{flex:none;min-width:150px;text-align:center}
.brand-marquee:hover .bm-track{animation-play-state:paused}
@keyframes bmscroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.bm-track{animation:none}.brand-marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}}


/* ---- Mobile product cards: compact + scannable (2.2-card rail peek, tight stack) ---- */
@media(max-width:560px){
  .scroller{gap:10px}
  .scroller .pcard{min-width:164px;max-width:164px}
  .pcard{border-radius:14px}
  .pcard .thumb{padding:10px}
  .pcard .thumb .brandtag{font-size:9px;top:8px;left:8px;padding:2px 7px}
  .badges{top:32px;left:8px}
  .wish{width:30px;height:30px;top:7px;right:7px}
  .wish svg{width:16px;height:16px}
  .pcard .body{padding:9px 10px 11px}
  .pcard .title{font-size:12.5px;min-height:34px;margin-bottom:4px}
  .pcard .flav{font-size:10.5px;margin-bottom:5px}
  .deal-pill{font-size:9.5px;padding:2px 7px;margin-bottom:5px}
  .price{font-size:16.5px}
  .price small{font-size:10.5px}
  .add{padding:9px;font-size:12.5px;margin-top:8px;border-radius:10px;gap:5px}
}


/* ---- Homepage FAQ: compact two-column layout (10 Q&As without eating the page) ---- */
.faq-cols{max-width:1100px;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:start}
.faq-cols details{margin-bottom:0;padding:12px 16px}
.faq-cols summary{font-size:14px}
.faq-cols details p{font-size:13.5px;margin:8px 0 0}
@media(max-width:700px){.faq-cols{grid-template-columns:1fr}}


/* Homepage guide cards: small product thumbnail on the left */
.cmpc-mini{width:52px;height:60px;object-fit:contain;flex:none;filter:drop-shadow(0 4px 6px rgba(30,12,28,.14))}
@media(max-width:560px){.cmpc-mini{width:42px;height:50px}}