/* ============================================================
   Bee Exquisite — storefront design system (v3)
   Champagne · Gold · Plum. Bold, layered, high-end beauty.
   Colours, fonts, radii and density come from the theme,
   which the Staff Portal writes into :root at runtime.
   ============================================================ */
:root{
  --bg:#FFFBF5; --paper:#FFFFFF; --soft:#FBF2E4; --line:#EADFCB;
  --ink:#2A1A26; --ink-2:#5C4453; --muted:#736070; --muted-soft:#6E5B69;
  --accent:#C9922E; --accent-2:#F2D89B; --dark:#3B1E36;
  --plum:#3B1E36; --plum-2:#5A3A54; --blush:#F7E3E8; --on-plum:#F6EEDF;
  --accent-wash:#FDF6EA; --gold-soft:#F7EBD3;
  --accent-text:#8F6416; --accent-text-soft:#8A5F14; --on-plum-muted:#C9B4C4;
  --muted:#736070; --muted-soft:#6E5B6B;
  --gold-grad:linear-gradient(120deg,#F2D89B 0%,#C9922E 42%,#EBD5A6 62%,#F2D89B 100%);
  --ok:#2F6F4F; --warn:#9A6C14; --bad:#A8342C; --info:#2B5B8A;
  --r-s:6px; --r-m:14px; --r-l:22px; --r-xl:30px; --r-btn:999px;
  --sec-pad:60px; --type-scale:1; --ratio:3/4;
  --card-shadow:0 4px 16px rgba(59,30,54,.06),0 18px 44px rgba(59,30,54,.07);
  --card-border:#EADFCB;
  --sh-1:0 1px 3px rgba(59,30,54,.07),0 4px 14px rgba(59,30,54,.06);
  --sh-2:0 8px 22px rgba(59,30,54,.10),0 22px 56px rgba(59,30,54,.10);
  --sh-3:0 28px 90px rgba(35,15,32,.30);
  --comb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='80' viewBox='0 0 46 80'%3E%3Cpath d='M23 0 L46 13 L46 40 L23 53 L0 40 L0 13 Z' fill='none' stroke='%23C9922E' stroke-opacity='.45' stroke-width='1.1'/%3E%3Cpath d='M23 53 L46 66 M23 53 L0 66' stroke='%23C9922E' stroke-opacity='.45' stroke-width='1.1'/%3E%3C/svg%3E");
  --serif:"Playfair Display","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1360px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:calc(16px * var(--type-scale));line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0 0 .5em;letter-spacing:-.018em;color:var(--plum)}
h1{font-size:clamp(2.3rem,5vw,4rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.9rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
em{font-style:italic;font-family:var(--serif)}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.sr:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;z-index:120;
  background:var(--plum);color:#fff;padding:14px 22px;border-radius:var(--r-btn);
  box-shadow:var(--sh-2);font-weight:700}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.muted{color:var(--muted)}
.center{text-align:center}
/* padding-block, not padding.
   Sixteen pages carry class="wrap sec" on the same element. `.sec` is defined
   after `.wrap`, so a shorthand `padding: X 0` here silently reset `.wrap`'s
   `padding: 0 28px` to zero — and those pages ran hard against both edges of
   the screen with their text touching the glass. Setting only the block axis
   leaves the inline padding alone. */
.sec{padding-block:var(--sec-pad);position:relative}
.sec-tint{background:var(--soft)}
.sec-tint .eyebrow,.page-head .eyebrow,.sec-blush .eyebrow{color:var(--accent-text-soft)}
.sec-tint .muted,.page-head .muted,.sec-blush .muted{color:var(--muted-soft)}
.sec-blush{background:linear-gradient(180deg,var(--bg),var(--blush) 45%,var(--bg))}
.sec-plum{background:var(--plum);color:var(--on-plum);position:relative;overflow:hidden}
.sec-plum::before{content:"";position:absolute;inset:0;background-image:var(--comb);opacity:.16;pointer-events:none}
.sec-plum h1,.sec-plum h2,.sec-plum h3{color:#fff}
.sec-plum .muted,.news .muted,.ftr .muted,.ftr p,.ftr small{color:var(--on-plum-muted)}
.sec-plum .eyebrow,.ftr .eyebrow{color:var(--accent-2)}
.sec-plum .eyebrow::after,.ftr .eyebrow::after{background:var(--accent-2)}
.sec-plum .brand-sub,.ftr .brand-sub,.news .brand-sub{color:var(--accent-2)}
.sec-plum>*{position:relative;z-index:1}
.pattern{background-image:var(--comb)}

/* gold eyebrow with rule */
.eyebrow{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;font-weight:800;
  color:var(--accent-text);margin-bottom:.9em;display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";flex:0 0 42px;height:1px;background:var(--gold-grad)}
.sec-head.center .eyebrow,.center .eyebrow{justify-content:center}

/* ------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 28px;
  border-radius:var(--r-btn);border:1.5px solid transparent;cursor:pointer;font-weight:700;
  font-size:.9rem;letter-spacing:.04em;transition:.2s ease;background:var(--plum);color:#fff;
  text-align:center;line-height:1.2;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:none}
.btn[disabled],.btn.is-disabled{opacity:.4;pointer-events:none}
.btn-gold{background:var(--gold-grad);background-size:200% 100%;color:#2A1A26;border-color:transparent;
  box-shadow:0 2px 10px rgba(201,146,46,.28)}
.btn-gold::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg);transition:left .55s ease}
.btn-gold:hover::after{left:120%}
.btn-ghost{background:transparent;border-color:var(--accent);color:var(--plum)}
.btn-ghost:hover{background:var(--accent);color:#fff}
.btn-light{background:var(--paper);color:var(--plum);border-color:var(--line)}
.btn-light:hover{border-color:var(--accent)}
.sec-plum .btn-light,.sec-plum .btn-ghost,.hero .btn-ghost,.hero .btn-light,
.split-copy .btn-ghost,.split-copy .btn-light,.news .btn-ghost,.news .btn-light,
.points-hero .btn-light{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.sec-plum .btn-light:hover,.sec-plum .btn-ghost:hover,.hero .btn-ghost:hover,.hero .btn-light:hover,
.split-copy .btn-ghost:hover,.split-copy .btn-light:hover,.news .btn-ghost:hover,.news .btn-light:hover,
.points-hero .btn-light:hover{background:#fff;color:var(--plum);border-color:#fff}
.btn-sm{padding:9px 18px;font-size:.8rem}
.btn-lg{padding:17px 38px;font-size:.98rem}
.btn-block{width:100%}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none;
  stroke-linecap:round;stroke-linejoin:round}
svg.inline{width:14px;height:14px;display:inline-block;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:1.7}
.link-u{text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:0;padding:0;color:inherit}
.link-u:hover{color:var(--accent-text)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ------------------------------------------------ forms */
.field{margin-bottom:16px}
.field label,.lbl{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
/* input:not([type]) matters: an <input> with no type attribute behaves as
   text but is not matched by input[type=text], so any field written without
   an explicit type silently lost all of its styling and collapsed to its
   intrinsic width. */
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=search],input[type=date],input[type=url],select,textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-s);
  background:var(--paper);font:inherit;font-size:.95rem;color:var(--ink);transition:.15s}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238E7A86' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
textarea{min-height:110px;resize:vertical}
.err{color:var(--bad);font-size:.82rem;margin-top:5px;display:none;font-weight:600}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--bad)}
.field.invalid .err{display:block}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}
.check{display:flex;align-items:center;gap:10px;font-size:.9rem;cursor:pointer;color:var(--ink-2);padding:3px 0}
.check input{width:18px;height:18px;accent-color:var(--accent);margin:0;flex:none}
@media(max-width:640px){.grid-2{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------ announcement + header */
.announce{background:var(--plum);color:var(--accent-2);font-size:.7rem;letter-spacing:.16em;
  overflow:hidden;text-transform:uppercase;font-weight:600;position:relative}
.announce::before{content:"";position:absolute;inset:0;background-image:var(--comb);opacity:.2}
.announce-track{display:flex;gap:80px;white-space:nowrap;padding:10px 0;animation:marq 46s linear infinite;
  width:max-content;position:relative}
.announce:hover .announce-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 93%,transparent);
  backdrop-filter:saturate(170%) blur(14px);border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 22%,transparent)}
/* overflow-x:clip is the hard guarantee. The mega menu is a sibling of this
   element, not a child, so nothing that should escape is clipped — but no
   future menu item can ever push the page sideways again. */
.hdr-main{display:flex;align-items:center;gap:20px;padding:16px 0;min-width:0;overflow-x:clip}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand svg{width:38px;height:38px}
.brand>span{display:block}
.brand-name{display:block;font-family:var(--serif);font-size:1.36rem;letter-spacing:.15em;line-height:1;
  text-transform:uppercase;color:var(--plum)}
.brand-sub{display:block;font-size:.69rem;letter-spacing:.34em;color:var(--accent-text);text-transform:uppercase;
  margin-top:5px;font-weight:700}
.nav{display:flex;gap:2px;margin-left:14px;min-width:0;flex:0 1 auto;overflow:hidden}
.nav>a,.nav>button{background:none;border:0;cursor:pointer;padding:10px 11px;font-size:.85rem;
  font-weight:600;letter-spacing:.03em;position:relative;white-space:nowrap;color:var(--ink)}
.nav>a::after,.nav>button::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:.22s}
.nav>a:hover::after,.nav>button:hover::after,.nav>a.active::after{transform:scaleX(1)}
.hdr-tools{margin-left:auto;display:flex;align-items:center;gap:2px;flex:0 0 auto}
.icon-btn{background:none;border:0;cursor:pointer;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;position:relative;transition:.15s}
.icon-btn:hover{background:var(--gold-soft)}
.icon-btn svg{width:20px;height:20px;stroke:var(--plum);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pip{position:absolute;top:3px;right:2px;min-width:19px;height:19px;padding:0 5px;background:var(--gold-grad);
  color:#2A1A26;font-size:.64rem;font-weight:800;border-radius:10px;display:grid;place-items:center;line-height:1;
  box-shadow:0 1px 4px rgba(201,146,46,.5)}
.cur-sel{border:1.5px solid var(--line);border-radius:var(--r-btn);padding:8px 28px 8px 13px;font-size:.78rem;
  font-weight:800;background-color:transparent;width:auto;cursor:pointer;letter-spacing:.06em}
.burger{display:none}

.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:2px solid transparent;
  border-image:var(--gold-grad) 1;box-shadow:var(--sh-2);opacity:0;visibility:hidden;
  transform:translateY(-8px);transition:.2s;z-index:59}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega-in{max-width:var(--wrap);margin:0 auto;padding:34px 28px 38px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) 320px;gap:30px}
.mega .mega-h{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:14px;font-weight:800}
.mega a{display:block;padding:6px 0;font-size:.9rem;transition:.15s}
.mega a:hover{color:var(--accent);padding-left:5px}
.mega-promo{border-radius:var(--r-m);overflow:hidden;position:relative;box-shadow:var(--sh-1)}
.mega-promo img{height:170px;width:100%;object-fit:cover}
.mega-promo div{padding:15px 17px;background:var(--plum);color:#fff}
.mega-promo strong{font-family:var(--serif);font-size:1.06rem;display:block}
.mega-promo span{font-size:.78rem;color:var(--accent-2)}

/* ------------------------------------------------ hero */
.hero{position:relative;background:var(--plum);overflow:hidden;color:var(--on-plum)}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--comb);opacity:.16;z-index:1}
.hero-slide{display:grid;grid-template-columns:1.02fr 1.1fr;min-height:min(80vh,700px);position:relative;z-index:2}
.hero-copy{padding:clamp(34px,5vw,86px);display:flex;flex-direction:column;justify-content:center;
  max-width:720px;margin-left:auto;width:100%}
.hero-copy .eyebrow{color:var(--accent-2)}
.hero-copy .eyebrow::after{background:var(--accent-2)}
.hero-copy h1{color:#fff;margin-bottom:.3em;font-size:clamp(2.4rem,4.6vw,4.1rem)}
.hero-copy h1 em{color:var(--accent-2)}
.hero-copy p{color:var(--on-plum-muted);font-size:1.08rem;max-width:44ch}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
.hero-media{position:relative;background:var(--soft)}
.hero-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--plum) 0%,transparent 14%);opacity:.75}
.hero-dots{position:absolute;bottom:26px;left:clamp(34px,5vw,86px);display:flex;gap:9px;z-index:3;align-items:center}
.hero-pause{margin-left:14px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.42);
  width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;
  color:#fff;cursor:pointer;flex:none}
.hero-pause svg{width:13px;height:13px;fill:#fff}
.hero-pause:hover{background:#fff}
.hero-pause:hover svg{fill:var(--plum)}
.hero-dots button[data-h]{width:38px;height:3px;border:0;background:rgba(255,255,255,.28);cursor:pointer;padding:0}
.hero-dots button[data-h].on{background:var(--gold-grad)}
.hero-ticks{display:flex;gap:22px;margin-top:30px;color:var(--on-plum-muted);font-size:.84rem;flex-wrap:wrap;
  letter-spacing:.04em}
.hero-ticks span{display:flex;align-items:center;gap:7px}

.trust-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--gold-grad);
  background-size:200% 100%;position:relative}
.trust-row div{padding:24px 20px;text-align:center;border-right:1px solid rgba(42,26,38,.14);color:#2A1A26}
.trust-row div:last-child{border-right:0}
.trust-row strong{display:block;font-size:.88rem;font-weight:800;letter-spacing:.02em}
.trust-row span{font-size:.78rem;opacity:.75}

/* ------------------------------------------------ section heads */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:36px;flex-wrap:wrap}
.sec-head p{margin:0;color:var(--muted);max-width:56ch}
.sec-plum .sec-head p{color:var(--on-plum-muted)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.tab{padding:10px 20px;border-radius:var(--r-btn);border:1.5px solid var(--line);background:var(--paper);
  cursor:pointer;font-size:.84rem;font-weight:700;transition:.18s;letter-spacing:.03em;color:var(--ink-2)}
.tab:hover{border-color:var(--accent);color:var(--plum)}
.tab.on{background:var(--plum);color:#fff;border-color:var(--plum)}

/* ------------------------------------------------ categories */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cat-tile{position:relative;display:block;transition:.25s;text-align:center}
.cat-tile img{width:100%;aspect-ratio:4/4.4;object-fit:cover;
  border-radius:240px 240px var(--r-m) var(--r-m);border:1px solid var(--line);
  box-shadow:var(--sh-1);transition:.35s}
.cat-tile:hover img{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--accent)}
.cat-tile-body{padding:16px 8px 0}
.cat-tile-body strong{font-family:var(--serif);font-size:1.18rem;display:block;color:var(--plum)}
.cat-tile-body span{font-size:.79rem;color:var(--muted);display:block;margin-top:3px}
.cat-tile-body .go{font-size:.75rem;color:var(--accent-text);font-weight:800;margin-top:9px;display:block;
  letter-spacing:.12em;text-transform:uppercase}

/* ------------------------------------------------ product card */
.p-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.p-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-card{background:var(--paper);border:1px solid var(--card-border);border-radius:var(--r-m);
  overflow:hidden;display:flex;flex-direction:column;transition:.25s;position:relative;box-shadow:var(--card-shadow)}
.p-card::after{content:"";position:absolute;inset:0;border-radius:var(--r-m);pointer-events:none;
  border:1.5px solid transparent;transition:.25s}
.p-card:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.p-card:hover::after{border-color:var(--accent)}
.p-media{position:relative;aspect-ratio:var(--ratio);overflow:hidden;background:var(--soft);display:block}
.p-media img{width:100%;height:100%;object-fit:cover;transition:opacity .45s ease,transform .6s ease}
.p-media img.alt{position:absolute;inset:0;opacity:0}
.p-card:hover .p-media img.alt{opacity:1}
.p-card:hover .p-media img{transform:scale(1.04)}
/* Badges are labels, not controls. Sitting on top of the product link with
   pointer-events enabled, they swallowed clicks on the top-left corner of
   every card that carried one — so a shopper aiming at "Bestseller" got
   nothing at all. */
.p-badges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;z-index:2;
  align-items:flex-start;pointer-events:none}
.p-badges .badge{pointer-events:none}
.badge{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;
  border-radius:var(--r-btn);background:var(--plum);color:#fff;box-shadow:0 2px 8px rgba(59,30,54,.2)}
.badge.sale{background:var(--bad)}
.badge.new{background:var(--ok)}
.badge.gold{background:var(--gold-grad);color:#2A1A26}
.badge.out{background:var(--muted)}
.p-tools{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:7px;z-index:2}
.p-tool{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--line);
  cursor:pointer;display:grid;place-items:center;transition:.18s;box-shadow:var(--sh-1);opacity:0;transform:translateX(8px)}
.p-card:hover .p-tool,.p-tool.on{opacity:1;transform:none}
.p-tool:hover{background:var(--accent);border-color:var(--accent)}
.p-tool:hover svg{stroke:#fff}
.p-tool svg{width:17px;height:17px;stroke:var(--plum);fill:none;stroke-width:1.7}
.p-tool.on svg{stroke:var(--accent)}
.p-fav.on svg{fill:var(--bad);stroke:var(--bad)}
.p-quick{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;opacity:0;transform:translateY(10px);transition:.25s}
.p-card:hover .p-quick{opacity:1;transform:none}
.p-body{padding:17px 18px 20px;display:flex;flex-direction:column;flex:1}
.p-cat{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);font-weight:800}
.p-name{font-family:var(--serif);font-size:1.08rem;line-height:1.3;margin:8px 0 8px;color:var(--plum)}
.p-name a:hover{color:var(--accent)}
.p-rate{display:flex;align-items:center;gap:5px;font-size:.75rem;color:var(--muted);margin-bottom:11px}
.stars{display:inline-flex;gap:1px}
.stars svg{width:13px;height:13px;fill:var(--accent);stroke:none}
.stars svg.off{fill:var(--line)}
.p-price{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.p-price b{font-size:1.12rem;font-weight:700;color:var(--plum);font-family:var(--serif)}
.p-price s{color:var(--muted);font-size:.85rem}
.p-swatches{display:flex;gap:6px;margin-top:11px}
.sw{width:16px;height:16px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line);display:inline-block}
.p-stock{font-size:.73rem;margin-top:10px;color:var(--ok);font-weight:700;letter-spacing:.02em}
.p-stock.low{color:var(--warn)}
.p-stock.none{color:var(--muted)}

/* ------------------------------------------------ shop */
.shop{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start}
.filters{position:sticky;top:100px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);
  padding:4px 20px 18px;max-height:calc(100vh - 128px);overflow:auto;box-shadow:var(--sh-1)}
.fgrp{border-bottom:1px solid var(--line);padding:16px 0}
.fgrp:last-child{border-bottom:0}
.fgrp>button{display:flex;width:100%;justify-content:space-between;align-items:center;background:none;
  border:0;cursor:pointer;font-weight:800;font-size:.76rem;padding:0;letter-spacing:.16em;text-transform:uppercase;
  color:var(--plum)}
.fgrp>button svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:2;transition:.2s}
.fgrp.closed>button svg{transform:rotate(-90deg)}
.fgrp.closed .fbody{display:none}
.fbody{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.check span.n{margin-left:auto;color:var(--muted);font-size:.76rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r-btn);padding:8px 14px;
  font-size:.8rem;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:7px;font-weight:600}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--plum);color:#fff;border-color:var(--plum)}
.shop-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.shop-bar .count{color:var(--muted);font-size:.88rem}
.shop-bar select{width:auto;padding:10px 36px 10px 14px;font-size:.85rem}
.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.af{display:inline-flex;align-items:center;gap:8px;background:var(--gold-soft);border:1px solid var(--accent);
  border-radius:var(--r-btn);padding:6px 9px 6px 14px;font-size:.78rem;font-weight:600;color:var(--plum)}
.af button{border:0;background:none;cursor:pointer;font-size:1rem;line-height:1;color:var(--plum)}
.pager{display:flex;justify-content:center;gap:7px;margin-top:44px;flex-wrap:wrap}
.pager button{min-width:44px;height:44px;border:1.5px solid var(--line);background:var(--paper);
  border-radius:var(--r-s);cursor:pointer;font-weight:700;color:var(--plum)}
.pager button:hover:not([disabled]){border-color:var(--accent)}
.pager button.on{background:var(--plum);color:#fff;border-color:var(--plum)}
.pager button[disabled]{opacity:.35;cursor:default}
.btn-filters{display:none}
@media(max-width:1080px){
  .btn-filters{display:inline-flex}
  .shop .filters{display:none;margin-bottom:18px}
  .shop .filters.show{display:block}
}

/* ------------------------------------------------ product page */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.gal{display:grid;grid-template-columns:96px 1fr;gap:15px}
.gal-thumbs{display:flex;flex-direction:column;gap:11px}
.gal-thumbs button{border:1.5px solid var(--line);border-radius:var(--r-s);overflow:hidden;padding:0;
  cursor:pointer;background:var(--soft);aspect-ratio:var(--ratio);position:relative;transition:.18s}
.gal-thumbs button:hover{border-color:var(--accent)}
.gal-thumbs button.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.gal-thumbs img{width:100%;height:100%;object-fit:cover}
.gal-thumbs .vid::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(59,30,54,.42);color:#fff;font-size:1rem}
.gal-main{position:relative;border-radius:var(--r-m);overflow:hidden;background:var(--soft);
  aspect-ratio:var(--ratio);cursor:crosshair;box-shadow:var(--sh-1);border:1px solid var(--line)}
.gal-main img{width:100%;height:100%;object-fit:cover;transition:transform .1s linear}
.gal-main.zoomed img{transform:scale(2.1)}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.95);border:1px solid var(--line);cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--sh-1)}
.gal-nav:hover{background:var(--accent);border-color:var(--accent)}
.gal-nav:hover svg{stroke:#fff}
.gal-nav.prev{left:14px}.gal-nav.next{right:14px}
.gal-nav svg{width:18px;height:18px;stroke:var(--plum);fill:none;stroke-width:2}
.gal-badge{position:absolute;top:14px;left:14px;background:var(--plum);color:var(--accent-2);
  font-size:.68rem;padding:6px 13px;border-radius:var(--r-btn);z-index:2;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700}
.gal-tools{position:absolute;bottom:14px;right:14px;display:flex;gap:8px;z-index:2}
.gal-tools button{background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:var(--r-btn);
  padding:8px 14px;font-size:.74rem;cursor:pointer;font-weight:700;display:inline-flex;gap:7px;align-items:center;
  color:var(--plum)}
.gal-tools button:hover{border-color:var(--accent);color:var(--accent)}
.gal-tools button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none;
  stroke-linecap:round;stroke-linejoin:round}
.gal-count{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.95);border:1px solid var(--line);
  font-size:.72rem;padding:6px 12px;border-radius:var(--r-btn);font-weight:700;color:var(--plum)}
.spin-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(59,30,54,.8);
  color:#fff;padding:9px 18px;border-radius:var(--r-btn);font-size:.8rem;pointer-events:none}

.pdp-title{font-size:clamp(1.9rem,3vw,2.6rem);margin-bottom:10px}
.price-row{display:flex;align-items:baseline;gap:14px;margin:18px 0;flex-wrap:wrap}
.price-now{font-size:2.1rem;font-weight:700;font-family:var(--serif);color:var(--plum)}
.price-was{color:var(--muted);text-decoration:line-through}
.price-off{background:var(--bad);color:#fff;font-size:.68rem;font-weight:800;padding:5px 11px;
  border-radius:var(--r-btn);letter-spacing:.1em;text-transform:uppercase}
.instal{font-size:.84rem;color:var(--muted);margin:-8px 0 16px}
.urgency{display:flex;gap:18px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-2);
  background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:var(--r-s);padding:12px 16px;margin-bottom:18px}
.urgency b{color:var(--plum)}
.urgency .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;
  margin-right:7px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.opt-row{margin:20px 0}
.opt-row .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.opt-row .lbl span{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}
.opt-row .lbl button{font-size:.76rem;text-transform:none;letter-spacing:0;color:var(--accent-text);font-weight:700}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-btn);
  background:var(--paper);overflow:hidden}
.qty button{width:44px;height:48px;border:0;background:none;cursor:pointer;font-size:1.2rem;color:var(--plum)}
.qty button:hover{background:var(--gold-soft)}
.qty input{width:50px;border:0;text-align:center;font-weight:700;padding:0;background:none}
.qty input:focus{box-shadow:none}
.buy-row{display:flex;gap:12px;margin:24px 0 14px;flex-wrap:wrap}
.buy-row .btn{flex:1;min-width:190px}
.usp-mini{display:flex;flex-direction:column;gap:12px;background:var(--soft);border-radius:var(--r-m);
  padding:20px 22px;margin:22px 0;font-size:.88rem;border:1px solid var(--line)}
.usp-mini div{display:flex;gap:12px;align-items:flex-start}
.usp-mini svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.9;flex:none;margin-top:3px}
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item>button{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;
  border:0;padding:18px 0;cursor:pointer;font-weight:700;font-size:.95rem;text-align:left;gap:14px;color:var(--plum)}
.acc-item>button svg{width:15px;height:15px;stroke:var(--accent);stroke-width:2;fill:none;transition:.2s;flex:none}
.acc-item.open>button svg{transform:rotate(45deg)}
.acc-body{display:none;padding-bottom:20px;color:var(--ink-2);font-size:.94rem}
.acc-item.open .acc-body{display:block}
.spec-tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.spec-tbl td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec-tbl td:first-child{color:var(--muted);width:42%}

.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:58;background:var(--paper);
  border-top:2px solid transparent;border-image:var(--gold-grad) 1;box-shadow:0 -8px 30px rgba(59,30,54,.12);
  transform:translateY(110%);transition:transform .28s}
.sticky-buy.on{transform:none}
.sticky-in{max-width:var(--wrap);margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:18px}
.sticky-in img{width:50px;height:62px;object-fit:cover;border-radius:var(--r-s)}
.sticky-in .nm{font-weight:700;font-size:.92rem;color:var(--plum)}
.sticky-in .vr{font-size:.78rem;color:var(--muted)}
.sticky-in .sp{margin-left:auto;display:flex;gap:14px;align-items:center}
.sticky-in .sp b{font-family:var(--serif);font-size:1.15rem;color:var(--plum)}
@media(max-width:700px){.sticky-in img,.sticky-in .vr{display:none}}

.fbt{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.fbt-item{width:126px;text-align:center;font-size:.78rem;color:var(--ink-2)}
.fbt-item img{aspect-ratio:var(--ratio);object-fit:cover;border-radius:var(--r-s);border:1px solid var(--line)}
.fbt-item b{color:var(--plum)}
.fbt-plus{font-size:1.6rem;color:var(--accent-text)}
.fbt-total{margin-left:auto;text-align:right;min-width:200px}

.rev-summary{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-m);padding:30px;margin-bottom:28px;box-shadow:var(--sh-1)}
.rev-big{font-size:3.4rem;font-family:var(--serif);line-height:1;color:var(--plum)}
.rev-bars{display:flex;flex-direction:column;gap:8px}
.rev-bar{display:flex;align-items:center;gap:11px;font-size:.8rem;cursor:pointer;background:none;border:0;
  padding:2px 0;width:100%;color:inherit}
.rev-bar:hover i{outline:1px solid var(--accent)}
.rev-bar i{flex:1;height:8px;background:var(--soft);border-radius:4px;overflow:hidden}
.rev-bar i b{display:block;height:100%;background:var(--gold-grad)}
.rev{border-bottom:1px solid var(--line);padding:22px 0}
.rev-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:6px}
.rev-av{width:40px;height:40px;border-radius:50%;background:var(--plum);color:var(--accent-2);
  display:grid;place-items:center;font-weight:700;font-size:.88rem}
.verified{font-size:.7rem;color:var(--ok);font-weight:800;letter-spacing:.04em}
.rev-photos{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.rev-photos img{width:78px;height:78px;object-fit:cover;border-radius:var(--r-s);cursor:pointer;border:1px solid var(--line)}
.rev-photos img:hover{border-color:var(--accent)}
.rev-help{margin-top:11px;font-size:.8rem;color:var(--muted);display:flex;gap:14px;align-items:center}
.qa{border-bottom:1px solid var(--line);padding:20px 0}
.qa .q{font-weight:700;display:flex;gap:11px;color:var(--plum)}
.qa .a{margin:9px 0 0 28px;padding-left:16px;border-left:2px solid var(--accent);color:var(--ink-2);font-size:.93rem}
.qa .mark{color:var(--accent-text);font-weight:800;font-family:var(--serif)}

/* ------------------------------------------------ drawers, modals */
.scrim{position:fixed;inset:0;background:rgba(30,14,26,.5);opacity:0;visibility:hidden;transition:.25s;z-index:90;
  backdrop-filter:blur(3px)}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(450px,100%);background:var(--bg);z-index:91;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
  box-shadow:var(--sh-3)}
.drawer.open{transform:none}
.drawer.left{right:auto;left:0;transform:translateX(-100%)}
.drawer.left.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;
  border-bottom:1px solid var(--line);background:var(--plum);color:#fff}
.drawer-head h3{margin:0;font-size:1.15rem;color:#fff}
.drawer-head .x{color:#fff}
.drawer-body{flex:1;overflow:auto;padding:20px 24px}
.drawer-foot{border-top:1px solid var(--line);padding:20px 24px;background:var(--paper)}
.x{background:none;border:0;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem}
.x:hover{background:rgba(255,255,255,.14)}
.modal{position:fixed;inset:0;z-index:92;display:none;padding:22px;overflow:auto}
.modal.open{display:grid;place-items:center}
.modal-in{background:var(--bg);border-radius:var(--r-l);max-width:960px;width:100%;box-shadow:var(--sh-3);
  position:relative;max-height:92vh;overflow:auto;border-top:4px solid transparent;border-image:var(--gold-grad) 1}
.modal-in.sm{max-width:490px}
.modal-in.pad{padding:32px}
.modal-x{position:absolute;top:14px;right:14px;z-index:3;background:var(--paper);border:1px solid var(--line)}

.lightbox{position:fixed;inset:0;z-index:96;background:rgba(30,14,26,.96);display:none;
  grid-template-rows:1fr auto;padding:26px}
.lightbox.open{display:grid}
.lightbox img{max-width:100%;max-height:100%;margin:auto;object-fit:contain;border-radius:var(--r-s)}
.lb-strip{display:flex;gap:9px;justify-content:center;padding-top:18px;flex-wrap:wrap}
.lb-strip img{width:62px;height:78px;object-fit:cover;border-radius:5px;cursor:pointer;opacity:.45;margin:0}
.lb-strip img.on{opacity:1;outline:2px solid var(--accent)}
.lb-close{position:absolute;top:20px;right:22px;color:#fff;background:rgba(255,255,255,.14);border:0;
  width:46px;height:46px;border-radius:50%;font-size:1.4rem;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:0;
  width:48px;height:48px;border-radius:50%;color:#fff;cursor:pointer;font-size:1.3rem}
.lb-nav.prev{left:22px}.lb-nav.next{right:22px}

.cmp-bar{position:fixed;left:0;right:0;bottom:0;z-index:57;background:var(--plum);color:#fff;
  transform:translateY(110%);transition:.28s;border-top:2px solid transparent;border-image:var(--gold-grad) 1}
.cmp-bar.on{transform:none}
.cmp-in{max-width:var(--wrap);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cmp-in img{width:46px;height:58px;object-fit:cover;border-radius:5px}
.cmp-slot{position:relative}
.cmp-slot button{position:absolute;top:-7px;right:-7px;width:21px;height:21px;border-radius:50%;
  background:var(--accent);color:#fff;border:0;font-size:.75rem;cursor:pointer;line-height:1}
.cmp-tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.cmp-tbl th,.cmp-tbl td{padding:13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp-tbl th{background:var(--soft);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cmp-tbl img{width:100%;aspect-ratio:var(--ratio);object-fit:cover;border-radius:var(--r-s)}

.cl{display:grid;grid-template-columns:82px 1fr auto;gap:15px;padding:16px 0;border-bottom:1px solid var(--line)}
.cl img{width:82px;height:104px;object-fit:cover;border-radius:var(--r-s);background:var(--soft)}
.cl-name{font-weight:600;font-size:.92rem;line-height:1.3;color:var(--plum)}
.cl-var{font-size:.79rem;color:var(--muted);margin-top:3px}
.cl-rm{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.78rem;text-decoration:underline;padding:0;margin-top:8px}
.cl-rm:hover{color:var(--bad)}
.qty-mini{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-btn);
  background:var(--paper);margin-top:9px}
.qty-mini button{width:32px;height:32px;border:0;background:none;cursor:pointer;color:var(--plum)}
.qty-mini span{min-width:26px;text-align:center;font-weight:700;font-size:.85rem}
.totals{font-size:.92rem}
.totals div{display:flex;justify-content:space-between;padding:7px 0;gap:12px}
.totals .grand{border-top:1px solid var(--line);margin-top:9px;padding-top:14px;font-size:1.2rem;font-weight:700;
  color:var(--plum);font-family:var(--serif)}
.free-ship{background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  border-radius:var(--r-s);padding:13px 15px;font-size:.82rem;margin-bottom:16px;color:var(--plum)}
.free-ship .bar{height:7px;background:#fff;border-radius:4px;margin-top:9px;overflow:hidden}
.free-ship .bar b{display:block;height:100%;background:var(--gold-grad)}
.gift-line{background:var(--blush);border-radius:var(--r-s);padding:11px 14px;font-size:.84rem;margin:14px 0;color:var(--plum)}

/* ------------------------------------------------ blocks */
.usp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.usp{background:var(--paper);border:1px solid var(--card-border);border-radius:var(--r-m);padding:28px;
  box-shadow:var(--card-shadow)}
.sec-plum .usp{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);box-shadow:none;color:#EFE4EC}
.sec-plum .usp strong{color:#fff}
.sec-plum .usp p{color:var(--on-plum-muted)}
.usp svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.6;flex:none;
  padding:0;margin-bottom:0}
.usp .ico-ring{width:52px;height:52px;border-radius:50%;background:var(--gold-soft);display:grid;
  place-items:center;margin-bottom:16px}
.sec-plum .usp .ico-ring{background:rgba(242,216,155,.16)}
.usp strong{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:7px;color:var(--plum)}
.usp p{margin:0;font-size:.88rem;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--sh-2)}
.split img{height:100%;width:100%;object-fit:cover;min-height:380px}
.split-copy{padding:clamp(32px,4vw,62px);display:flex;flex-direction:column;justify-content:center;
  background:var(--plum);color:var(--on-plum-muted);position:relative}
.split-copy::before{content:"";position:absolute;inset:0;background-image:var(--comb);opacity:.16}
.split-copy>*{position:relative;z-index:1}
.split-copy h2{color:#fff}
.split-copy .eyebrow{color:var(--accent-2)}
.split-copy .eyebrow::after{background:var(--accent-2)}
.ed-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ed{background:var(--paper);border:1px solid var(--card-border);border-radius:var(--r-m);overflow:hidden;
  box-shadow:var(--card-shadow);transition:.25s;display:block}
.ed:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.ed img{aspect-ratio:4/3;object-fit:cover}
.ed div{padding:20px}
.ed span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);font-weight:800}
.ed h3{font-size:1.08rem;margin:9px 0;color:var(--plum)}
.ed p{font-size:.86rem;color:var(--muted);margin:0}
.quote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.quote{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-m);
  padding:32px;position:relative;color:#EFE4EC}
.quote::before{content:"\201C";position:absolute;top:6px;left:22px;font-family:var(--serif);font-size:4.4rem;
  color:var(--accent-2);opacity:.5;line-height:1}
.quote p{font-family:var(--serif);font-size:1.08rem;line-height:1.55;color:#fff;position:relative}
.quote footer{font-size:.8rem;color:var(--accent-2);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.quote .stars svg{fill:var(--accent-2)}
.news{background:var(--plum);border-radius:var(--r-l);padding:clamp(36px,5vw,66px);text-align:center;
  position:relative;overflow:hidden;color:var(--on-plum-muted);box-shadow:var(--sh-2)}
.news::before{content:"";position:absolute;inset:0;background-image:var(--comb);opacity:.18}
.news>*{position:relative;z-index:1}
.news h2{color:#fff}
.news .eyebrow{color:var(--accent-2);justify-content:center}
.news .eyebrow::after{background:var(--accent-2)}
.news form{display:flex;gap:11px;max-width:520px;margin:24px auto 10px}
.news form .btn{white-space:nowrap;flex:none}
@media(max-width:560px){.news form{flex-direction:column}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:30px 0}
.stat{border-top:2px solid transparent;border-image:var(--gold-grad) 1;padding-top:16px}
.stat b{display:block;font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--plum)}
.stat span{font-size:.84rem;color:var(--muted)}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:10px 0 32px}
.tier{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:30px;
  box-shadow:var(--card-shadow);position:relative;overflow:hidden}
.tier::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gold-grad)}
.tier .off{font-family:var(--serif);font-size:1.85rem;display:block;margin:8px 0 2px;color:var(--plum)}
.tier ul{padding-left:18px;margin:14px 0 0;font-size:.88rem;color:var(--ink-2)}
.callout{background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  border-left:4px solid var(--accent);border-radius:var(--r-s);padding:20px 24px;margin:24px 0;color:var(--plum)}
.callout b{display:block;margin-bottom:5px}

/* ------------------------------------------------ footer */
.ftr{background:var(--plum);color:var(--on-plum-muted);margin-top:80px;padding:70px 0 28px;font-size:.89rem;
  position:relative;overflow:hidden}
.ftr::before{content:"";position:absolute;inset:0;background-image:var(--comb);opacity:.14}
.ftr>*{position:relative;z-index:1}
.ftr-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:38px}
.ftr .ftr-h{font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:16px;font-weight:800}
.ftr a{display:block;padding:7px 0;color:var(--on-plum-muted)}
.ftr a:hover{color:var(--accent-2)}
.ftr .brand-name{color:#fff}
.ftr .brand svg ellipse,.ftr .brand svg circle,
.drawer-head .brand svg ellipse,.drawer-head .brand svg circle{fill:#FDF6EA}
.ftr .brand svg path[stroke]{stroke:var(--plum)}
.ftr-bot{border-top:1px solid rgba(255,255,255,.14);margin-top:48px;padding-top:24px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--on-plum-muted)}
.pay{display:flex;gap:8px;flex-wrap:wrap}
.pay span{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:4px;
  padding:5px 10px;font-size:.66rem;letter-spacing:.08em;font-weight:800;color:#D9C6D2}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;padding:0;color:#E5D5E0}
.social a:hover{background:var(--gold-grad);color:#2A1A26;border-color:transparent}
.social svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ------------------------------------------------ misc */
.toasts{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:99;display:flex;
  flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{background:var(--plum);color:#fff;padding:14px 24px;border-radius:var(--r-btn);box-shadow:var(--sh-2);
  font-size:.88rem;display:flex;align-items:center;gap:10px;animation:pop .3s ease;
  border:1px solid rgba(242,216,155,.4)}
.toast.good{background:var(--ok);border-color:transparent}
.toast.bad{background:var(--bad);border-color:transparent}
@keyframes pop{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.crumbs{font-size:.8rem;color:var(--muted);padding:22px 0;letter-spacing:.03em}
.crumbs a:hover{color:var(--accent)}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.empty svg{width:56px;height:56px;stroke:var(--accent);opacity:.45;fill:none;stroke-width:1.3;margin:0 auto 18px}
.page-head{background:var(--soft);border-bottom:1px solid var(--line);padding:44px 0 48px;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;background-image:var(--comb);opacity:.2}
.page-head>*{position:relative;z-index:1}
.page-head h1{margin-bottom:10px}
.page-head p{color:var(--ink-2);margin:0;max-width:62ch;font-size:1.04rem}
.prose{max-width:74ch}
.prose h2{margin-top:1.8em}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:10px}
.prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.card{background:var(--paper);border:1px solid var(--card-border);border-radius:var(--r-m);padding:28px;
  box-shadow:var(--card-shadow)}
.tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.1em;padding:5px 12px;
  border-radius:var(--r-btn);text-transform:uppercase}
.tag.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.tag.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.tag.bad{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
.tag.info{background:color-mix(in srgb,var(--info) 13%,transparent);color:var(--info)}
.tag.mute{background:var(--soft);color:var(--muted)}

.steps{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted)}
.step b{width:29px;height:29px;border-radius:50%;background:var(--soft);color:var(--ink-2);
  display:grid;place-items:center;font-size:.78rem;border:1.5px solid var(--line);font-family:var(--sans)}
.step.on{color:var(--plum);font-weight:700}
.step.on b{background:var(--gold-grad);color:#2A1A26;border-color:transparent}
.step.done b{background:var(--ok);color:#fff;border-color:var(--ok)}
.step+.step::before{content:"";width:28px;height:1px;background:var(--line);margin-right:6px}
.co{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:start}
.co-side{position:sticky;top:100px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);
  padding:26px;box-shadow:var(--card-shadow)}
.co-side h3{color:var(--plum)}
.radio-card{display:flex;gap:13px;align-items:flex-start;border:1.5px solid var(--line);border-radius:var(--r-s);
  padding:16px;cursor:pointer;background:var(--paper);margin-bottom:10px;transition:.18s}
.radio-card:hover{border-color:var(--accent)}
.radio-card.on{border-color:var(--accent);background:var(--gold-soft)}
.radio-card input{margin:3px 0 0;accent-color:var(--accent);width:18px;height:18px;flex:none}
.radio-card b{display:block;font-size:.93rem;color:var(--plum)}
.radio-card span{font-size:.82rem;color:var(--muted)}
.radio-card .pr{margin-left:auto;font-weight:700;white-space:nowrap;color:var(--plum)}
.express{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:10px}
.express button{padding:15px;border-radius:var(--r-s);border:1.5px solid var(--line);background:var(--paper);
  cursor:pointer;font-weight:800;font-size:.85rem;letter-spacing:.03em}
.express button:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}
.express .apple{background:#000;color:#fff;border-color:#000}
.express .paypal{background:#ffc439;color:#12233e;border-color:#ffc439}
.express .paystack{background:#00c3f7;color:#03293c;border-color:#00c3f7}
@media(max-width:560px){.express{grid-template-columns:minmax(0,1fr)}}

.acct{display:grid;grid-template-columns:250px 1fr;gap:38px;align-items:start}
.acct-nav{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:11px;
  position:sticky;top:100px;box-shadow:var(--sh-1)}
.acct-nav button{display:flex;width:100%;gap:12px;align-items:center;background:none;border:0;padding:13px 15px;
  border-radius:var(--r-s);cursor:pointer;font-size:.9rem;text-align:left;color:var(--ink-2);font-weight:600}
.acct-nav button:hover{background:var(--gold-soft);color:var(--plum)}
.acct-nav button.on{background:var(--plum);color:#fff}
.acct-nav svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
.otbl{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--paper)}
.otbl th{text-align:left;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:14px;border-bottom:2px solid var(--line);background:var(--soft)}
.otbl td{padding:14px;border-bottom:1px solid var(--line);vertical-align:middle}
.otbl tr:hover td{background:var(--gold-soft)}
.points-hero{background:var(--plum);border-radius:var(--r-m);padding:32px;display:grid;
  grid-template-columns:1fr auto;gap:24px;align-items:center;margin-bottom:24px;color:var(--on-plum-muted);
  position:relative;overflow:hidden}
.points-hero::before{content:"";position:absolute;inset:0;background-image:var(--comb);opacity:.18}
.points-hero>*{position:relative;z-index:1}
.points-hero .eyebrow{color:var(--accent-2)}
.points-hero .eyebrow::after{background:var(--accent-2)}
.points-hero b{font-family:var(--serif);font-size:3rem;line-height:1;display:block;color:#fff}
.points-hero svg{width:60px;height:60px;stroke:var(--accent-2);fill:none;stroke-width:1.2}
.tier-bar{height:9px;background:rgba(255,255,255,.14);border-radius:5px;overflow:hidden;margin-top:14px}
.tier-bar b{display:block;height:100%;background:var(--gold-grad);font-size:0}

.search-ov{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 97%,transparent);z-index:95;
  display:none;padding:74px 24px;overflow:auto}
.search-ov.open{display:block}
.search-in{max-width:840px;margin:0 auto}
.search-in input{font-size:1.35rem;padding:18px 20px;border-radius:var(--r-m)}
.s-sugg{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.s-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:24px}
.s-item{display:flex;gap:13px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);
  padding:12px;align-items:center;box-shadow:var(--sh-1)}
.s-item:hover{border-color:var(--accent)}
.s-item img{width:58px;height:72px;object-fit:cover;border-radius:5px}
.s-item strong{font-size:.92rem;display:block;color:var(--plum)}
.s-item span{font-size:.8rem;color:var(--muted)}

.quiz-wrap{max-width:780px;margin:0 auto}
.quiz-bar{height:7px;background:var(--soft);border-radius:4px;overflow:hidden;margin-bottom:34px}
.quiz-bar b{display:block;height:100%;background:var(--gold-grad);transition:width .35s}
.quiz-opts{display:grid;gap:13px;margin:28px 0}
.quiz-opt{display:flex;align-items:center;gap:16px;padding:20px 24px;border:1.5px solid var(--line);
  border-radius:var(--r-m);background:var(--paper);cursor:pointer;font-size:1.02rem;text-align:left;transition:.18s;
  color:var(--ink);box-shadow:var(--sh-1)}
.quiz-opt:hover{border-color:var(--accent);transform:translateX(4px)}
.quiz-opt.on{border-color:var(--accent);background:var(--gold-soft)}
.quiz-opt i{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;
  place-items:center;font-style:normal;font-size:.8rem;font-weight:800;flex:none;color:var(--plum)}
.quiz-opt.on i{background:var(--gold-grad);color:#2A1A26;border-color:transparent}

.article{max-width:780px;margin:0 auto}
.article img.hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-m);margin-bottom:34px;
  box-shadow:var(--sh-1)}
.article p{font-size:1.06rem;line-height:1.78;color:var(--ink-2)}
.article p:first-of-type::first-letter{font-family:var(--serif);font-size:3.8rem;float:left;line-height:.82;
  padding:6px 12px 0 0;color:var(--accent)}

.popup{position:fixed;bottom:26px;left:26px;z-index:94;background:var(--plum);color:var(--on-plum-muted);
  border-radius:var(--r-m);box-shadow:var(--sh-3);padding:28px;max-width:350px;display:none;overflow:hidden}
.popup::before{content:"";position:absolute;inset:0;background-image:var(--comb);opacity:.18}
.popup>*{position:relative;z-index:1}
.popup.on{display:block;animation:pop .4s ease}
.popup h3{margin-bottom:7px;color:#fff}
.popup .x{position:absolute;top:8px;right:8px;color:#fff;z-index:2}
@media(max-width:560px){.popup{left:14px;right:14px;max-width:none;bottom:14px}}

/* ------------------------------------------------ device */
.mob-bar{position:fixed;bottom:0;left:0;right:0;z-index:59;background:var(--paper);
  border-top:2px solid transparent;border-image:var(--gold-grad) 1;display:none;
  grid-template-columns:repeat(5,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 24px rgba(59,30,54,.1)}
body.is-mobile .mob-bar,body.is-tablet.is-touch .mob-bar{display:grid}
body.is-mobile{padding-bottom:70px}
.mob-bar a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 0 9px;
  font-size:.7rem;letter-spacing:.05em;position:relative;color:var(--muted);text-transform:uppercase;font-weight:700}
.mob-bar a.on{color:var(--accent)}
.mob-bar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.mob-bar .pip{position:absolute;top:5px;right:calc(50% - 20px);font-style:normal}
body.is-mobile .sticky-buy,body.is-tablet.is-touch .sticky-buy{bottom:70px}
body.is-mobile .cmp-bar,body.is-tablet.is-touch .cmp-bar{bottom:70px}
body.is-mobile .toasts{bottom:86px}
body.is-mobile .popup{bottom:82px}
body.is-touch .p-tool{opacity:1;transform:none}
body.is-touch .p-quick{display:none}
body.is-touch .gal-main{cursor:zoom-in}
body.is-touch .btn{padding-top:16px;padding-bottom:16px}
body.is-touch .chip{padding:11px 16px}
body.is-touch .icon-btn{width:44px;height:44px;flex:none}
body.is-touch .p-tool{width:44px;height:44px}
body.is-touch .qty-mini button{width:40px;height:40px}
body.is-touch .gal-thumbs button{min-height:64px}
body.is-touch .x{width:44px;height:44px}
body.is-touch .cl-rm,body.is-touch .link-u{padding:6px 0;display:inline-block;min-height:24px}
body.is-touch .hero-dots button[data-h]{height:44px;background:transparent;position:relative}
body.is-touch .hero-dots button[data-h]::after{content:"";position:absolute;left:0;right:0;top:20px;height:3px;
  background:rgba(255,255,255,.28)}
body.is-touch .hero-dots button[data-h].on::after{background:var(--gold-grad)}
body.is-touch .ftr a{padding:10px 0}
body.is-touch .mega a{padding:10px 0}
body.is-touch .qty button{width:48px;height:50px}
body.is-touch .acc-item>button{padding:20px 0}
body.is-touch .brand{min-height:44px}
body.is-touch .hero-dots .hero-pause{width:44px;height:44px}
body.is-touch .rev-bar{min-height:44px}
body.is-touch .link-u{display:inline-block;padding:6px 0;min-height:34px}
body.is-touch .crumbs a,body.is-touch .crumbs span{display:inline-block;padding:14px 2px}
body.is-touch .gal-tools button,body.is-touch .p-actions button,
body.is-touch .btn-sm,body.is-touch .chip-sm{min-height:44px}
body.is-touch .swatch,body.is-touch .opt-btn{min-height:44px;min-width:44px}
body.is-touch .mega{display:none}
body.is-mobile .hero-slide{min-height:auto}
body.is-mobile .hero-media{min-height:0;height:46vh}
body.is-mobile .eyebrow::after{display:none}
body.is-mobile .hero-copy{padding:30px 20px 40px}
body.is-mobile .hero-media::after{background:linear-gradient(180deg,var(--plum) 0%,transparent 22%)}
body.is-mobile .sec-head{margin-bottom:24px}
body.is-mobile .gal-nav{width:44px;height:44px}
body.is-mobile .gal-tools button{padding:7px 11px;font-size:.7rem}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .announce-track{animation:none}
}

/* ------------------------------------------------ responsive */
@media(max-width:1080px){
  .p-grid,.cat-grid,.usp-grid,.ed-grid,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quote-grid,.tiers{grid-template-columns:minmax(0,1fr)}
  .pdp{grid-template-columns:1fr;gap:34px}
  .co{grid-template-columns:minmax(0,1fr)}
  .co-side{position:static}
  .shop{grid-template-columns:minmax(0,1fr)}
  .filters{position:static;max-height:none}
  .acct{grid-template-columns:minmax(0,1fr)}
  .acct-nav{position:static;display:flex;overflow:auto;gap:5px}
  .acct-nav button{white-space:nowrap}
  .mega-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega-promo{display:none}
  .rev-summary{grid-template-columns:minmax(0,1fr)}
}
/* ---------------------------------------------------------------- header fit
   The header carries a brand lock-up, nine navigation items and six tools.
   Below about 1300px they stop fitting side by side, and the old single
   breakpoint at 860px meant that on a 1024px screen — an iPad in landscape,
   or a small laptop — the toolbar was pushed off the right edge and the
   currency selector, search, account, wishlist and basket simply could not
   be clicked.

   Rather than pick one new magic number, navigation items now drop out in
   priority order as space runs out. Every one of them is still reachable in
   the menu drawer, so nothing is lost — the header just stops trying to show
   everything at once. The overflow:hidden on .nav above is the belt to this
   set of braces: even if a future menu item is unexpectedly wide, it can be
   clipped but it can never push the page sideways again. */
@media(max-width:1320px){
  .nav>a,.nav>button{padding:10px 9px;font-size:.82rem}
  .nav{margin-left:8px}
  .hdr-main{gap:12px}
}
@media(max-width:980px){
  .brand-name{font-size:1.15rem;letter-spacing:.1em}
}
/* Fallback for the rare case where JavaScript has not run: drop items by
   position so the row still fits. The measurer above supersedes this the
   moment it runs, and handles menus staff have edited. */
html:not(.js) .nav>*:nth-child(n+9){display:none}
@media(max-width:1180px){ html:not(.js) .nav>*:nth-child(n+8){display:none} }
@media(max-width:1080px){ html:not(.js) .nav>*:nth-child(n+7){display:none} }
@media(max-width:900px){
  .nav{display:none}
  .burger{display:grid}
  .hero-slide{grid-template-columns:1fr}
  .hero-media{min-height:340px;position:relative;order:-1}
  .trust-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-row div:nth-child(2){border-right:0}
  .split{grid-template-columns:minmax(0,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:28px}
  .s-res{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){ .cur-sel{display:none} }

/* On a 360px phone the burger, brand lock-up and five 44px tool buttons need
   413px — so the basket fell off the right edge and the page scrolled
   sideways. Search and Saved both already live in the bottom navigation bar,
   so they come out of the header here rather than being duplicated into an
   overflow. Nothing becomes unreachable. */
@media(max-width:460px){
  .hdr-tools #btnSearch,.hdr-tools .ic-wish{display:none}
  .hdr-main{gap:0}
}
@media(max-width:380px){
  .hdr-tools .ic-acct{display:none}
  .brand svg{width:26px;height:26px}
}

@media(max-width:600px){
  .brand svg{width:30px;height:30px}
  .brand-name{font-size:.94rem;letter-spacing:.07em}
  .brand-sub{display:none}
  .hdr-main{gap:2px;padding:12px 0}
  .icon-btn{width:40px;height:40px;flex:none}
  .p-grid,.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .p-body{padding:13px 14px 16px}
  .p-name{font-size:.94rem}
  .usp-grid,.ed-grid,.stats{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .gal-thumbs{flex-direction:row;overflow:auto;order:2}
  .gal-thumbs button{width:72px;flex:none}
  .wrap{padding:0 17px}
  .ftr-grid{grid-template-columns:minmax(0,1fr)}
  .cat-tile img{border-radius:150px 150px var(--r-m) var(--r-m)}
}
@media print{
  .hdr,.ftr,.announce,.no-print,.sticky-buy,.cmp-bar,.mob-bar{display:none!important}
  body{background:#fff}
}

/* ---------- cookie consent ---------- */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:97;background:var(--plum);color:var(--on-plum-muted);
  box-shadow:0 -8px 34px rgba(0,0,0,.24);padding:16px clamp(16px,4vw,40px)}
.consent-in{max-width:var(--wrap);margin:0 auto;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.consent p{margin:0;flex:1 1 420px;font-size:.86rem;line-height:1.55}
.consent b{color:#fff}
.consent a{color:var(--accent-2);text-decoration:underline}
.consent-btns{display:flex;gap:10px;flex-wrap:wrap}
body.is-mobile .consent{bottom:70px}
body.is-touch .consent .btn{min-height:44px}

/* ---------- terms acceptance ---------- */
.co-terms{margin-top:16px;font-size:.86rem}
.co-terms.bad-outline{outline:2px solid var(--bad);outline-offset:6px;border-radius:8px}

/* ==========================================================================
   Responsive layouts that used to be inline styles
   --------------------------------------------------------------------------
   These three grids were written as style="grid-template-columns:..." on the
   element. An inline style beats any media query, so they never collapsed —
   which is why the FAQ page scrolled sideways on a tablet and the journal's
   "more reading" row squeezed three cards into a 360px phone. Same layouts,
   now able to respond.
   ========================================================================== */
.faq-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:42px;align-items:start}
.contact-layout{display:grid;grid-template-columns:1.2fr minmax(0,1fr);gap:38px;align-items:start}
.ed-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

@media(max-width:1080px){
  .faq-layout,.contact-layout{grid-template-columns:1fr;gap:28px}
  .ed-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .ed-grid-3{grid-template-columns:1fr}
}

/* Long words and unbroken strings must never widen a column. Product names,
   article titles and customer-written review text are all user data, and any
   of them can contain something that does not wrap. */
h1,h2,h3,h4,p,li,td,th,.p-name,.pdp-title,.ed-card h3{overflow-wrap:break-word}
.wrap,.card,.p-body,.ed-body,.acc-item,.adv-opt{min-width:0}

/* Form controls carry a browser default intrinsic width of roughly 170px and
   will not shrink below it, which is enough to burst a two-column field row on
   a narrow phone. This is the account sign-in form widening the page. */
input,select,textarea{min-width:0;max-width:100%}

/* Pagination on a 320px screen: eight page buttons plus previous and next do
   not fit on one line, so the row wraps rather than running off the edge. */
.pager{flex-wrap:wrap;justify-content:center}

/* Category labels and field labels are single words or short phrases that
   cannot wrap mid-word by default. On a 320px phone "Clip-Ins & Ponytails"
   was wider than the card that held it. */
.p-cat,.p-meta,.field label,.chip,.badge{overflow-wrap:anywhere;hyphens:auto}

/* The grid min-content trap.
   A `1fr` track refuses to shrink below the intrinsic minimum width of its
   contents, so one long product name or a two-column card grid could force a
   whole column — and therefore the page — wider than the screen. `minmax(0,1fr)`
   on the track, or min-width:0 on the item, tells the track it is allowed to
   be narrower than its contents want. This is why the shop scrolled sideways
   on a 320px phone. */
.shop>*,.acct>*,.co>*,.pdp>*,.p-grid>*,.cat-grid>*,.ed-grid>*,.usp-grid>*,
.quote-grid>*,.stats>*,.tiers>*,.adv-wrap>*,.adv-result>*{min-width:0}