/* ─── HERO — FULL WIDTH ─── */
.hero {
  position:relative; min-height:auto;
  background:var(--charcoal);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; pointer-events:none;
}
.hero-bg picture {
  position:absolute; inset:0; z-index:1;
}
.hero-bg picture img {
  width:100%; height:100%; object-fit:cover;
}
.hero-bg video {
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover; object-position:70% center;
}
.hero-bg-fallback {
  position:absolute; inset:0;
  background:linear-gradient(135deg, #1a1a18 0%, #2a2520 40%, #1a1715 70%, #0a0a08 100%);
  z-index:0;
}
/* Subtle grain texture */
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.04; pointer-events:none;
}
/* Gradient overlay so text reads */
.hero-overlay {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,8,.9) 0%, rgba(10,10,8,.65) 50%, rgba(10,10,8,.5) 100%);
}
.hero-content {
  position:relative; z-index:4;
  padding:16vw 16px 36px; max-width:860px; width:100%;
  text-shadow:0 2px 20px rgba(0,0,0,.4);
}
.hero-h1 {
  font-family:var(--fd) !important; font-size:clamp(38px,10vw,52px);
  font-weight:300; line-height:.92; letter-spacing:-.02em;
  color:var(--white); margin-bottom:16px;
  max-width:100%; overflow-wrap:break-word; word-break:normal; hyphens:manual;
}
.hero-h1 em { font-style:italic; color:var(--gold); }
.hero-sub,
.hero-empathy {
  font-family:var(--fb); font-size:13px; font-weight:300; font-style:normal;
  color:var(--white); line-height:1.6; max-width:500px; margin-bottom:20px; letter-spacing:0.3px;
}
.hero-cta {
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 24px; background:var(--white); color:var(--ink);
  font-family:var(--fb); font-size:11px; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--white); transition:all .25s cubic-bezier(0.32,0.72,0,1); margin-bottom:12px;
  width:100%; text-align:center;
}
.hero-cta:hover { background:transparent; color:var(--white); border-color:var(--white); }
/* Search */
.hero-search { margin-bottom:16px; position:relative; z-index:10; }
.hero-search .hero-search-icon { position:absolute; left:18px; top:50%; transform:translateY(-50%); pointer-events:none; z-index:5; opacity:1 !important; display:block !important; width:18px !important; height:18px !important; }
.hero-search .hero-search-icon line, .hero-search .hero-search-icon circle { stroke:#fff !important; fill:none !important; }
/* FiboSearch overrides for hero */
.hero-search .dgwt-wcas-search-wrapp { max-width:100% !important; }
.hero-search .dgwt-wcas-search-form { border:1px solid rgba(255,255,255,.55) !important; background:rgba(20,20,18,.82) !important; backdrop-filter:blur(12px); border-radius:0 !important; height:52px !important; }
.hero-search .dgwt-wcas-search-input { background:transparent !important; color:var(--white) !important; font-family:var(--fb) !important; font-size:16px !important; font-weight:300 !important; border:none !important; padding:14px 20px 14px 46px !important; height:50px !important; letter-spacing:.3px; }
.hero-search .dgwt-wcas-search-input::placeholder { color:rgba(255,255,255,.7) !important; opacity:1 !important; }
.hero-search .dgwt-wcas-search-submit { display:none !important; }
.hero-search .dgwt-wcas-ico-magnifier, .hero-search .dgwt-wcas-ico-magnifier-handler, .hero-search .dgwt-wcas-search-submit svg, .hero-search .dgwt-wcas-voice-search, .hero-search .dgwt-wcas-preloader, .hero-search .dgwt-wcas-close, .hero-search .dgwt-wcas-search-form svg { display:none !important; }
.hero-search .dgwt-wcas-sf-wrapp { position:relative; background:transparent !important; padding:0 !important; height:auto !important; }
.hero-search .dgwt-wcas-sf-wrapp::before, .hero-search .dgwt-wcas-sf-wrapp::after { display:none !important; content:none !important; }
.hero-search .dgwt-wcas-search-form::before, .hero-search .dgwt-wcas-search-form::after { display:none !important; content:none !important; }
.hero-search .dgwt-wcas-search-wrapp::before, .hero-search .dgwt-wcas-search-wrapp::after { display:none !important; content:none !important; }
.hero-search .dgwt-wcas-ico-magnifier, .hero-search .dgwt-wcas-ico-magnifier path { fill:var(--ink) !important; }
.hero-search .dgwt-wcas-suggestions-wrapp { border-radius:0 !important; border:1px solid var(--bd) !important; margin-top:2px; box-shadow:0 8px 32px rgba(0,0,0,.15) !important; }
.hero-search .dgwt-wcas-suggestion { font-family:var(--fb) !important; padding:12px 16px !important; }
.hero-search .dgwt-wcas-st { font-family:var(--fb) !important; font-size:14px !important; color:var(--ink) !important; }
.hero-search .dgwt-wcas-sp { font-family:var(--fb) !important; font-size:13px !important; color:var(--ink) !important; }
.hero-search .dgwt-wcas-close { color:rgba(255,255,255,.5) !important; }
.hero-tags { display:none; flex-wrap:wrap; gap:7px; margin-bottom:24px; }
.hero-tag {
  font-family:var(--fb); font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:var(--white); border:1px solid rgba(255,255,255,.4);
  padding:12px 14px; cursor:pointer; transition:all .15s cubic-bezier(0.32,0.72,0,1); background:transparent; min-height:44px; display:inline-flex; align-items:center;
}
.hero-tag:hover { border-color:rgba(255,255,255,.4); color:rgba(255,255,255,.8); }
.hero-tag { cursor:pointer; text-decoration:none; }
/* Stats strip — mobile-first: 2x2 grid base */
.hero-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:18px;
  border-top:1px solid rgba(255,255,255,.1); padding-top:16px; margin-bottom:0;
}
.hs-item { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.hs-item:nth-child(odd) { padding-left:0; padding-right:14px; border-right:1px solid rgba(255,255,255,.1); }
.hs-item:nth-child(even) { padding-left:14px; padding-right:0; }
.hs-item:nth-child(n+3) { border-bottom:none; }
.hs-n { font-family:var(--fb); font-size:24px; font-weight:300; color:var(--white); line-height:1; font-variant-numeric:tabular-nums; }
.hs-l { font-family:var(--fb); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--white); margin-top:4px; }

/* ─── TRUST BAR ─── */
.trust-marquee-wrap {
  background:var(--ink);
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:16px 0;
}
.trust-marquee-track {
  display:flex; align-items:center;
  white-space:nowrap;
  animation:trustScroll 35s linear infinite;
  width:max-content;
}
.trust-marquee-wrap:hover .trust-marquee-track { animation-play-state:paused; }
@keyframes trustScroll {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}
.tm-item {
  font-family:var(--fb); font-size:15px; font-style:normal; letter-spacing:1px;
  color:var(--white); padding:0 32px; white-space:nowrap; font-weight:400;
}
.tm-sep {
  color:rgba(255,255,255,.25); font-size:14px;
}

/* ─── COLLECTIONS NAV ─── */
.collections-nav {
  background:var(--bg); padding:24px 0; text-align:center;
}
.collections-nav-links {
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; padding:0 16px;
}
.collections-nav-links button {
  font-family:var(--fb); font-size:11px; font-weight:400; letter-spacing:0.8px;
  text-transform:uppercase; color:var(--ink); text-decoration:none; background:transparent; cursor:pointer;
  padding:11px 14px; border:1px solid var(--bd); min-height:44px; display:inline-flex; align-items:center;
  transition:all .2s cubic-bezier(0.32,0.72,0,1); white-space:nowrap;
}
.collections-nav-links button:hover {
  color:var(--ink); border-color:var(--ink);
}
.collections-nav-links button.active {
  color:var(--white); background:var(--ink); border-color:var(--ink);
}

/* ─── SECTION HEADERS ─── */
.sh {
  padding:64px 24px 28px; display:flex; align-items:flex-end; justify-content:space-between;
  background:var(--bg); border-top:1px solid var(--bd);
}
.sh-l { display:flex; align-items:flex-start; gap:18px; }
.sh-text .ey {
  font-family:var(--fb); font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ink); font-weight:300; margin-bottom:14px; display:inline-flex; align-items:center; gap:12px;
}
.sh-text .ey::before, .sh-text .ey::after { content:''; display:block; width:24px; height:1px; background:var(--ink); opacity:.25; }
.sh-text .ey::after { width:14px; }
.sh-text h2 { font-family:var(--fd); font-size:clamp(26px,7vw,36px); font-weight:300; font-style:italic; color:var(--ink); line-height:1; }
.sh-r { font-family:var(--fb); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* ─── PRODUCTS (Phlur-style horizontal scroll) ─── */
.products-wrap { padding:0 0 64px; background:var(--bg); overflow:hidden; position:relative; max-width:1440px; margin:0 auto; }
.products { display:grid; grid-template-columns:1fr !important; gap:16px !important; row-gap:32px !important; padding:0 12px !important; }
.products-viewall { display:block; text-align:center; padding:20px 16px 0; }
.products-viewall a { display:block; font-family:var(--fb); font-size:12px; font-weight:400; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink); text-decoration:none; padding:16px; border:1px solid var(--ink); transition:all .2s cubic-bezier(0.32,0.72,0,1); }
.products-viewall a:hover { background:transparent; color:var(--ink); border:1px solid var(--ink); }
.pc { cursor:pointer; position:relative; text-decoration:none; color:inherit; display:flex; flex-direction:column; background:var(--white); -webkit-tap-highlight-color:transparent; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:none; min-width:0; }
.pc:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.pc-img {
  background:var(--bg2); aspect-ratio:3/4; width:100%;
  position:relative; overflow:hidden;
}
.pc-img::after {
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:none;
}
/* Product shot — mobile-first: relative positioning */
.pc-img .pc-product { position:relative; inset:auto; display:flex; align-items:center; justify-content:center; transition:opacity .4s cubic-bezier(0.32,0.72,0,1); z-index:auto; background:var(--bg2); pointer-events:none; }
.pc-img .pc-product img { width:100%; height:100%; object-fit:cover; object-position:center; mix-blend-mode:multiply; }
/* Lifestyle shot — hidden on mobile */
.pc-img .pc-lifestyle { display:none; }
.pc-img .pc-lifestyle img { width:100%; height:100%; object-fit:cover; }
/* Hover: no effect on mobile */
.pc:hover .pc-img .pc-product { opacity:1; }
.pc:hover .pc-img .pc-lifestyle { display:none; }
.pc:hover .pc-img .pc-product img { transform:none; }
.pc-bdg { position:absolute; top:12px; left:12px; font-family:var(--fb); font-size:10px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; z-index:3; }
.pc-bdg--best { background:var(--ink); color:var(--white); }
.pc-bdg--new { background:var(--white); color:var(--ink); border:1px solid var(--ink); }
.pc-bdg--trend { background:var(--ink); color:var(--white); }
.pc-bdg--pick { background:var(--white); color:var(--ink); border:1px solid var(--bd); }
.pc-fam { position:absolute; bottom:12px; left:12px; font-family:var(--fb); font-size:9px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; z-index:3; background:var(--white); color:var(--ink); border:1px solid var(--bd); }
.pc-fam--floral { background:#F9F0F4; color:#8C3B5E; border-color:#E8C8D6; }
.pc-fam--gourmand { background:#FDF5EE; color:#8B5E3C; border-color:#E5CDAE; }
.pc-fam--oriental-spicy, .pc-fam--oriental { background:#F7F0EA; color:#7A4B2A; border-color:#D9C0A5; }
.pc-fam--fresh-citrus, .pc-fam--fresh { background:#EFF6F2; color:#3B6B4F; border-color:#B5D4C1; }
.pc-fam--woody-oud, .pc-fam--woody { background:#F3F0EB; color:#5C4A35; border-color:#C9B99A; }
.pc-fam--chypre-green { background:#F1F4EE; color:#4A5E3B; border-color:#B8C9A5; }
.pc-fam--amber { background:#F8F2E8; color:#7A5C2B; border-color:#D4BC8A; }
.pc-info { padding:16px 14px 20px; flex:1; display:flex; flex-direction:column; border-top:1px solid var(--bd); }
.pc .ruk_rating_snippet { font-size:11px; margin-bottom:8px; }
.pc-rating { margin-bottom:6px; }
.pc-stars { font-size:13px; color:var(--gold); letter-spacing:-1px; }
.pc-stars span { font-size:20px !important; }
.pc-reviews { font-family:var(--fb); font-size:14px; font-weight:400; color:var(--ink); margin-left:2px; }
/* Server-rendered rating (tfw_render_card_rating) — rule 4: amber stars. */
.pc-rating-server { display:flex; align-items:center; gap:6px; margin-bottom:6px; line-height:1; }
.pc-rating-stars { font-family:var(--fb); font-size:12px; color:var(--gold); letter-spacing:2px; }
.pc-rating-count { font-family:var(--fb); font-size:12px; font-weight:400; color:var(--ink); letter-spacing:0.01em; font-variant-numeric:tabular-nums; }
/* min-height reserves ~2 lines so designer-name wrap variance doesn't break row alignment across the card grid. */
.pc-insp { font-family:var(--fb); font-size:12px; font-weight:500; font-style:italic; letter-spacing:0.01em; color:var(--ink); margin-bottom:4px; min-height:2.8em; line-height:1.35; overflow-wrap:break-word; word-break:break-word; }
.pc-name { font-family:var(--fb); font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink); margin-bottom:4px; overflow-wrap:break-word; word-break:break-word; }
.pc-price-link { font-family:var(--fb); font-size:14px; font-weight:600; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:4px; margin-top:auto; font-variant-numeric:tabular-nums; }
.pc-price-link::after { display:none; }
.pc:hover .pc-price-link::after { transform:translateX(3px); }

/* Product card hover — no effect on mobile base */
.pc:hover { transform:none; }
.pc-img .pc-product img { transition:transform .3s cubic-bezier(0.32,0.72,0,1); }

/* ─── SECTION TRANSITIONS ─── */
.section-fade-to-dark {
  height:0;
}
.section-fade-to-light {
  height:0;
}

/* ─── GAMIFIED BUNDLE BUILDER ─── */
.bundle-section { background:#0A0A0A; padding:0; position:relative; overflow:hidden; }
/* Film grain texture — covers entire bundle section */
.bundle-section::before {
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.03) 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.035) 1px, transparent 1px),
    radial-gradient(circle at 60% 30%, rgba(255,255,255,0.025) 1px, transparent 1px),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,0.03) 1px, transparent 1px),
    radial-gradient(circle at 90% 70%, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:2px 2px, 4px 4px, 3px 3px, 5px 5px, 6px 6px, 3px 3px;
  pointer-events:none; z-index:1;
}
.bundle-section > * { position:relative; z-index:2; }
.bundle-builder-inner { display:flex; flex-direction:column; flex:1; max-width:720px; margin:0 auto; }

/* Bundle header — hero style */
.bundle-header-new {
  position:relative; overflow:hidden;
  padding:32px 24px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
/* Subtle radial glow — header only */
.bundle-header-new::after {
  content:''; position:absolute;
  top:40%; left:50%; transform:translate(-50%,-50%);
  width:500px; height:300px;
  background:radial-gradient(ellipse, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events:none; z-index:1;
}
.bundle-header-new > * { position:relative; z-index:2; }

/* Headline */
.bundle-h2 {
  font-family:var(--fd); font-size:clamp(26px,7vw,52px);
  font-weight:300; font-style:italic; line-height:1.05;
  color:var(--white); letter-spacing:-0.025em; margin-bottom:10px;
}
.bhm-price-them {
  font-family:var(--fb); font-style:normal; font-weight:400;
  letter-spacing:-0.02em; text-decoration:line-through; color:#999;
}
.bhm-price-us {
  font-family:var(--fb); font-style:normal; font-weight:600;
  letter-spacing:-0.02em; color:var(--gold);
}

/* Rule */
.bhm-rule {
  width:120px; height:1px;
  background:rgba(255,255,255,0.18);
  margin:0 auto 20px;
}

/* Subtitle */
.bhm-sub {
  font-family:var(--fb); font-size:13px; font-weight:300;
  color:var(--white); letter-spacing:0.04em; margin-bottom:12px;
}
.bhm-num { font-family:var(--fb); }
.bundle-save {
  font-family:var(--fb); font-size:11px; font-weight:500;
  letter-spacing:1px; text-transform:uppercase; color:var(--gold);
}

/* Review — hidden on mobile (already seen on homepage), shown on desktop */
.bhm-review { margin-bottom:14px; max-width:380px; display:none; }
@media(min-width:769px) { .bhm-review { display:block; } }
.bhm-review-stars {
  color:var(--gold); font-size:12px; letter-spacing:2px;
  display:block; margin-bottom:6px;
}
.bhm-review-text {
  font-family:var(--fd); font-size:14px; font-weight:300;
  font-style:italic; color:var(--white); line-height:1.5;
}
.bhm-review-author {
  font-family:var(--fb); font-size:10px; font-weight:400;
  letter-spacing:0.06em; color:var(--white); margin-left:4px;
}

/* Size toggle pills */
.bhm-size-toggle {
  display:flex; gap:0; margin-bottom:16px;
}
.bhm-size-pill {
  font-family:var(--fb); font-size:13px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:0 36px; height:48px; min-width:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.2); background:transparent;
  color:var(--white); cursor:pointer;
  transition:all 0.25s cubic-bezier(0.32,0.72,0,1);
}
.bhm-size-pill + .bhm-size-pill { border-left:none; }
.bhm-size-pill.active {
  background:var(--white); color:var(--ink);
  border-color:var(--white); font-weight:600;
}
.bhm-size-pill:not(.active):hover {
  border-color:rgba(255,255,255,0.5);
}

/* Trust bar — hidden on mobile (already seen on homepage), shown on desktop */
.bhm-trust {
  font-family:var(--fb); font-size:10px; font-weight:400;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--white);
  display:none;
}
@media(min-width:769px) { .bhm-trust { display:block; } }
.bhm-trust-stars { color:var(--gold); letter-spacing:2px; }

/* Bundle controls — search + filters together */
.bundle-controls { padding:16px 24px 12px; display:flex; flex-direction:column; gap:10px; align-items:center; background:var(--white); }
@media(min-width:769px) {
  .bundle-controls { flex-direction:row; align-items:center; gap:12px; }
  .bundle-controls .bundle-search { flex:1; margin-bottom:0; }
  .bundle-controls .bundle-filters { padding:0; }
}
.bundle-header { padding:16px 24px 0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; justify-content:space-between; }

/* SCENT PICKER MODAL */
.scent-picker {
  position:fixed; inset:0; background:rgba(10,10,8,.85); z-index:500;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s cubic-bezier(0.32,0.72,0,1);
  backdrop-filter:blur(4px);
}
.scent-picker.open { opacity:1; pointer-events:auto; }
.sp-inner {
  background:var(--white); max-width:760px; width:92%; max-height:85vh;
  overflow-y:auto; position:relative;
}
.sp-head { padding:28px 32px 12px; border-bottom:1px solid var(--bd); position:sticky; top:0; background:var(--white); z-index:2; }
.sp-head-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sp-search { width:100%; padding:10px 14px; border:1px solid var(--bd); background:var(--bg); font-family:var(--fb); font-size:16px; color:var(--ink); outline:none; }
.sp-search::placeholder { color:var(--ink); font-weight:300; }
.sp-search:focus { border-color:var(--ink); }
.sp-title { font-family:var(--fd); font-size:22px; font-weight:300; font-style:italic; color:var(--ink); }
.sp-close { background:none; border:none; cursor:pointer; font-size:18px; color:var(--ink); transition:color .15s cubic-bezier(0.32,0.72,0,1); }
.sp-close:hover { color:var(--ink); }
.sp-grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--bd); }
.sp-item { background:var(--white); padding:20px 18px; cursor:pointer; transition:background .15s cubic-bezier(0.32,0.72,0,1); }
.sp-item:hover { background:var(--bg2); }
.sp-item-insp { font-family:var(--fb); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); margin-bottom:5px; }
.sp-item-name { font-family:var(--fb); font-size:14px; font-weight:500; color:var(--ink); margin-bottom:4px; }
.sp-item-price { font-family:var(--fb); font-size:13px; font-weight:400; color:var(--ink); }

/* Bundle filter tabs */
.bundle-filters { display:flex; gap:6px; padding:0; flex-wrap:wrap; justify-content:center; }
.bf-tab { font-family:var(--fb); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink); padding:8px 16px; border:1px solid var(--bd); background:transparent; cursor:pointer; transition:all .15s cubic-bezier(0.32,0.72,0,1); text-align:center; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.bf-tab:hover { color:var(--ink); border-color:var(--ink); }
.bf-tab.active { background:var(--ink); color:var(--white); border-color:var(--ink); }

/* Bundle search */
.bundle-search-wrap { padding:10px 24px 0; }
.bundle-search {
  width:100%; padding:12px 16px; background:var(--white);
  border:1px solid var(--bd); font-family:var(--fb); font-size:16px;
  color:var(--ink); outline:none; transition:border-color .15s cubic-bezier(0.32,0.72,0,1);
}
.bundle-search::placeholder { color:var(--ink); font-weight:300; }
.bundle-search:focus { border-color:var(--ink); }

/* Inline bundle product grid */
.bundle-grid {
  display:grid; grid-template-columns:1fr; gap:0;
  padding:4px 24px 100px; height:60vh; min-height:380px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--bd) transparent;
  background:var(--white);
}
@media(min-width:769px) {
  .bundle-grid { grid-template-columns:1fr 1fr; gap:0 24px; height:55vh; min-height:420px; padding:4px 24px 40px; }
}
.bg-img { width:48px; height:48px; object-fit:cover; flex-shrink:0; background:var(--bg2); mix-blend-mode:multiply; }
.bg-item {
  display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--bd); cursor:pointer;
  transition:background .12s cubic-bezier(0.32,0.72,0,1);
}
.bg-item:hover { background:rgba(0,0,0,.02); }
.bg-item.added { opacity:1; }
.bg-item.added .bg-add { color:var(--white); background:var(--ink); border-color:var(--ink); }
.bg-info { flex:1; min-width:0; }
.bg-name { font-family:var(--fb); font-size:15px; font-weight:500; color:var(--ink); line-height:1.3; }
.bg-insp { font-family:var(--fb); font-size:12px; font-weight:300; color:var(--ink); line-height:1.3; }
.bg-add { font-family:var(--fb); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink); flex-shrink:0; padding:7px 14px; border:1px solid var(--ink); background:transparent; cursor:pointer; transition:all .15s cubic-bezier(0.32,0.72,0,1); }
.bg-add:hover { background:var(--ink); color:var(--white); }

/* ─── +1 DUPLICATE BUTTON (Homepage bundle grid) ─── */
.bg-add-more {
  font-family:var(--fb); font-size:13px; font-weight:600;
  color:var(--ink); background:transparent; border:1px solid var(--ink);
  padding:7px 10px; min-height:44px; min-width:44px; flex-shrink:0;
  cursor:pointer; transition:all .15s cubic-bezier(0.32,0.72,0,1);
  margin-right:4px;
}
.bg-add-more:hover { background:var(--ink); color:var(--white); }

/* ─── HOMEPAGE TRIPTYCH SIDEBAR (Desktop Only) ─── */
.hp-triptych { display:none; }
@media(min-width:1024px) {
  .bundle-section {
    display:grid;
    grid-template-columns:1fr 300px;
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
  }
  .bundle-section::before {
    grid-column:1 / -1;
    grid-row:1 / -1;
  }
  .bundle-header-new {
    grid-column:1 / -1;
  }
  .bundle-builder-inner {
    max-width:none;
    margin:0;
    grid-column:1;
  }
  .hp-triptych {
    display:block;
    grid-column:2;
    position:relative;
    overflow:hidden;
    border-left:1px solid rgba(255,255,255,0.12);
  }
  .bundle-builder-inner {
    border-left:1px solid var(--ink);
    border-bottom:1px solid var(--ink);
  }
}
.hp-tri-panels {
  display:flex;
  height:260px;
}
.hp-tri-panel {
  flex:1;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:12px 4px;
  border-right:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
}
.hp-tri-panel:last-child { border-right:none; }
.hp-tri-bg {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 0.5s ease;
}
.hp-tri-panel.filled .hp-tri-bg { opacity:1; }
.hp-tri-panel::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.7) 100%);
  pointer-events:none;
  z-index:1;
}
.hp-tri-num {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  color:rgba(255,255,255,0.2);
  z-index:0;
  transition:opacity 0.3s ease;
}
.hp-tri-panel.filled .hp-tri-num { opacity:0; }
.hp-tri-name {
  position:relative;
  z-index:2;
  font-family:var(--fb);
  font-size:10px;
  font-weight:500;
  color:var(--white);
  text-transform:uppercase;
  letter-spacing:0.08em;
  text-align:center;
  opacity:0;
  transform:translateY(8px);
  transition:all 0.3s ease 0.2s;
}
.hp-tri-panel.filled .hp-tri-name { opacity:1; transform:translateY(0); }
.hp-tri-remove {
  position:absolute;
  top:8px;
  right:8px;
  z-index:3;
  width:24px;
  height:24px;
  min-width:44px;
  min-height:44px;
  margin:-10px -10px 0 0;
  background:rgba(0,0,0,0.5);
  color:var(--white);
  border:none;
  font-size:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.2s ease;
}
.hp-tri-panel:hover .hp-tri-remove { opacity:1; }
.hp-tri-surface {
  height:2px;
  background:rgba(255,255,255,0.06);
}
.hp-tri-info {
  padding:20px 24px 16px;
  text-align:center;
}
.hp-tri-title {
  font-family:var(--fd);
  font-size:18px;
  font-weight:300;
  font-style:italic;
  color:#F0F0F0;
  margin-bottom:4px;
}
.hp-tri-count {
  font-family:var(--fb);
  font-size:10px;
  font-weight:500;
  color:var(--gold);
  display:block;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.hp-tri-pricing {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  margin-bottom:4px;
}
.hp-tri-was {
  font-family:var(--fb);
  font-size:14px;
  font-weight:300;
  color:#555;
  text-decoration:line-through;
}
.hp-tri-price {
  font-family:var(--fb);
  font-size:28px;
  font-weight:600;
  color:var(--white);
  letter-spacing:-0.03em;
  line-height:1;
}
.hp-tri-saving {
  font-family:var(--fb);
  font-size:10px;
  font-weight:500;
  color:var(--gold);
  margin-top:4px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.hp-tri-klarna {
  font-family:var(--fb);
  font-size:10px;
  font-weight:400;
  color:rgba(255,255,255,0.4);
  text-align:center;
  padding:0 20px 16px;
}
.hp-tri-bottom {
  padding:0 20px 20px;
}
.hp-tri-cta {
  width:100%;
  height:48px;
  border:none;
  background:var(--white);
  color:var(--ink);
  font-family:var(--fb);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s ease;
  min-height:44px;
}
.hp-tri-cta.disabled {
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.3);
  cursor:default;
}
.hp-tri-cta:not(.disabled):hover {
  background:transparent;
  color:var(--white);
  border:1px solid var(--white);
}
.hp-tri-upgrade {
  width:100%;
  padding:8px 0;
  background:none;
  border:none;
  font-family:var(--fb);
  font-size:10px;
  font-weight:300;
  color:rgba(255,255,255,0.5);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  display:none;
  min-height:44px;
  text-align:center;
}
.hp-tri-upgrade.visible { display:block; }
.hp-tri-delivery {
  font-family:var(--fb);
  font-size:10px;
  font-weight:400;
  color:rgba(255,255,255,0.4);
  text-align:center;
  margin-top:8px;
}

/* STICKY BUNDLE BAR — all positioning is inline on the element, CSS handles children only */
.sbb-picking { display:flex; align-items:center; justify-content:center; gap:24px; max-width:500px; margin:0 auto; }
.sbb-names { display:flex; gap:4px; flex-wrap:wrap; margin-top:2px; }
.sbb-left { display:flex; align-items:center; gap:12px; flex:1; }
.sbb-bottles { display:flex; gap:10px; }
.sbb-bottle-slot { transition:transform .2s cubic-bezier(0.32,0.72,0,1); }
.sbb-bottle-slot .sbb-bp { fill:rgba(255,255,255,.12); transition:fill .25s cubic-bezier(0.32,0.72,0,1); }
.sbb-bottle-slot.filled .sbb-bp { fill:var(--gold); }
.sbb-bottle-slot.filled { animation:bottlePop .25s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes bottlePop { 0%{transform:scale(0.7)} 50%{transform:scale(1.15)} 100%{transform:scale(1)} }
.sbb-names { display:flex; gap:6px; flex-wrap:wrap; }
.sbb-name-pill { display:inline-flex; align-items:center; gap:4px; font-family:var(--fb); font-size:11px; font-weight:400; color:var(--bg); background:#2a2a2a; border:1px solid #444; padding:4px 10px; animation:pillPop .25s cubic-bezier(0.34,1.56,0.64,1); }
.sbb-name-pill .sbb-x { font-style:normal; font-family:var(--fb); font-size:12px; color:#999; cursor:pointer; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; margin:-10px -10px -10px 0; }
.sbb-name-pill .sbb-x:hover { color:var(--bg); }
.sbb-empty-slot { animation:none; }
@keyframes pillPop { 0%{transform:scale(0.7);opacity:0} 50%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }

/* Combo unlock flash */
.sbb-complete { animation:unlockFlash .4s cubic-bezier(0.32,0.72,0,1); }
@keyframes unlockFlash { 0%{background:#1A1A1A} 30%{background:#2a3a2a} 100%{background:#1A1A1A} }

.sbb-cart-btn { animation:btnReveal .3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes btnReveal { 0%{transform:translateY(8px);opacity:0} 100%{transform:translateY(0);opacity:1} }
.sbb-empty-slot { font-family:var(--fb); font-size:10px; color:#555; border:1px dashed #444; padding:3px 8px; }
.sbb-btn { padding:14px 24px; background:var(--bg); color:#1A1A1A; font-family:var(--fb); font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; border:none; cursor:pointer; white-space:nowrap; transition:opacity .2s cubic-bezier(0.32,0.72,0,1); flex-shrink:0; }
.sbb-btn.disabled { opacity:.35; cursor:default; }
.sbb-complete { display:none; text-align:center; width:100%; }
.sbb-complete-names { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; justify-content:center; }
.sbb-cart-btn { width:100%; padding:14px; background:var(--bg); color:#1A1A1A; font-family:var(--fb); font-size:13px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; border:none; cursor:pointer; text-align:center; animation:btnReveal .3s cubic-bezier(0.34,1.56,0.64,1) .15s both; }

/* Upgrade modal styles moved to tfw-design-system-final.css (shared .tfw-upgrade__*) */

/* ─── COMPLIMENT COUNTER ─── */
.compliment-wrap { background:var(--bg); padding:64px 16px 64px; border-top:1px solid var(--bd); }
.compliment-grid { display:grid; grid-template-columns:1fr !important; gap:12px !important; background:transparent !important; }
.cc { background:var(--white); padding:20px 18px; position:relative; border:1px solid var(--bd); opacity:1 !important; transform:none !important; }
.cc:hover { border-top-color:var(--ink); }
.cc-badge { display:inline-block; background:var(--ink); color:var(--white); font-family:var(--fb); font-size:10px; letter-spacing:1.2px; text-transform:uppercase; padding:4px 10px; margin-bottom:12px; }
.cc-stars { font-size:11px; color:#C17F24; letter-spacing:1.2px; margin-bottom:8px; }
.cc-qmark { display:none; }
.cc-text { font-family:var(--fb); font-size:14px; font-weight:300; color:var(--ink); line-height:1.65; margin-bottom:14px; }
.cc-footer { border-top:1px solid var(--bd); padding-top:12px; display:flex; justify-content:space-between; align-items:baseline; }
.cc-author { font-family:var(--fb); font-size:12px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); }
.cc-product { font-family:var(--fb); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); margin-top:2px; }

/* ─── DISCOVERY SET ─── */
.disc-section { padding:64px 24px; background:var(--bg); border-top:1px solid var(--bd); }
.disc-container { display:grid; grid-template-columns:1fr; background:var(--white); border:none; }
.disc-visual { min-height:240px; height:52vw; max-height:300px; border-right:none; overflow:hidden; padding:0 !important; }
.disc-visual img { width:100%; height:100%; object-fit:cover; object-position:center 78%; display:block; }
.disc-content { padding:24px 16px 32px; display:flex; flex-direction:column; justify-content:center; }
.disc-title { font-family:var(--fd); font-size:clamp(26px,7vw,36px); font-weight:300; line-height:1.05; margin-bottom:12px; color:var(--ink); }
.disc-title em { font-style:italic; }
.disc-desc { font-family:var(--fb); font-size:13px; font-weight:300; color:var(--ink); line-height:1.65; margin-bottom:24px; }
.disc-price-row { font-family:var(--fb); font-size:28px; font-weight:300; color:var(--ink); letter-spacing:-0.02em; margin-bottom:8px; }
.disc-price-note { font-family:var(--fb); font-size:12px; font-weight:300; color:var(--ink); margin-bottom:28px; }
.disc-btn { display:inline-flex; align-items:center; justify-content:center; padding:16px 24px; background:var(--ink); color:var(--white); font-family:var(--fb); font-size:12px; font-weight:400; letter-spacing:0.06em; text-transform:uppercase; border:1px solid var(--ink); cursor:pointer; transition:background .25s cubic-bezier(0.32,0.72,0,1), color .25s cubic-bezier(0.32,0.72,0,1); width:100%; text-align:center; }
.disc-btn:hover { background:transparent; color:var(--ink); }

/* ─── EXIT INTENT POPUP ─── */
.exit-overlay { position:fixed; inset:0; background:rgba(10,10,8,.75); z-index:600; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .28s cubic-bezier(0.32,0.72,0,1); backdrop-filter:blur(4px); }
.exit-overlay.open { opacity:1; pointer-events:auto; }
.exit-popup { background:var(--white); display:grid; grid-template-columns:1fr; max-width:680px; width:90%; position:relative; box-shadow:0 40px 100px rgba(0,0,0,.3); }
.exit-close { position:absolute; top:14px; right:14px; background:none; border:none; cursor:pointer; font-size:16px; color:var(--ink); z-index:2; transition:color .15s cubic-bezier(0.32,0.72,0,1); }
.exit-close:hover { color:var(--ink); }
.exit-visual { background:var(--bg2); min-height:320px; display:none; align-items:center; justify-content:center; border-right:1px solid var(--bd); }
.exit-content { padding:36px 28px; display:flex; flex-direction:column; justify-content:center; }
.exit-kicker { font-family:var(--fb); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); margin-bottom:12px; }
.exit-title { font-family:var(--fd); font-size:clamp(24px,3vw,32px); font-weight:300; color:var(--ink); margin-bottom:10px; line-height:1; }
.exit-title em { font-style:italic; }
.exit-desc { font-family:var(--fb); font-size:13px; font-weight:300; color:var(--ink); line-height:1.65; margin-bottom:20px; }
.exit-offer { display:flex; align-items:baseline; gap:10px; padding:14px 16px; background:var(--bg2); border:1px solid var(--bd); margin-bottom:20px; }
.exit-price { font-family:var(--fb); font-size:32px; font-weight:300; color:var(--ink); }
.exit-price-lbl { font-family:var(--fb); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); }
.exit-btn { width:100%; padding:14px; background:var(--ink); color:var(--white); font-family:var(--fb); font-size:12px; font-weight:400; letter-spacing:0.06em; text-transform:uppercase; border:1px solid var(--ink); cursor:pointer; margin-bottom:8px; transition:all .25s cubic-bezier(0.32,0.72,0,1); }
.exit-btn:hover { background:transparent; color:var(--ink); }
.exit-skip { font-family:var(--fb); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); font-weight:300; cursor:pointer; text-align:center; display:block; text-decoration:underline; text-underline-offset:3px; transition:color .15s cubic-bezier(0.32,0.72,0,1); }
.exit-skip:hover { color:var(--ink); }

/* ─── SCENT QUIZ ─── */
.quiz-desktop {
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(0.32,0.72,0,1), transform .7s cubic-bezier(0.32,0.72,0,1);
}
.quiz-desktop.visible { opacity:1; transform:translateY(0); }
.quiz-desktop .sh { padding-bottom:0; }
.quiz-wrap { display:grid; grid-template-columns:1fr; gap:0; background:var(--bg); padding:0 24px 48px; max-width:1080px; margin:0 auto; }
.quiz-left { background:var(--bg); padding:40px 24px 40px 0; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--bd); }
.quiz-eyebrow { font-family:var(--fb); font-size:10px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink); margin-bottom:20px; display:inline-flex; align-items:center; gap:10px; }
.quiz-eyebrow::before { content:''; display:block; width:20px; height:1px; background:var(--ink); }
.quiz-desc { font-family:var(--fb); font-size:15px; font-weight:300; color:var(--ink); line-height:1.7; margin-bottom:36px; max-width:360px; }
.quiz-benefits { display:flex; flex-direction:column; gap:16px; margin-bottom:40px; padding:28px 0; border-top:1px solid var(--bd); border-bottom:1px solid var(--bd); }
.qb-item { display:flex; align-items:flex-start; gap:12px; font-family:var(--fb); font-size:13px; font-weight:400; color:var(--ink); line-height:1.5; }
.qb-item::before { content:''; display:block; width:16px; height:16px; flex:none; margin-top:1px; border:1px solid var(--bd); border-radius:0; background:var(--white); box-shadow:inset 0 0 0 3px var(--white), inset 0 0 0 5px var(--ink); }
.quiz-full-btn { display:inline-flex; align-items:center; justify-content:center; padding:15px 36px; background:var(--ink); color:var(--white); font-family:var(--fb); font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; border:1px solid var(--ink); cursor:pointer; transition:all .5s cubic-bezier(0.32,0.72,0,1); width:fit-content; margin-bottom:24px; }
.quiz-full-btn:hover { background:transparent; color:var(--ink); }
.quiz-full-btn:active { transform:scale(0.97); }
.quiz-proof { font-family:var(--fb); font-size:11px; font-weight:300; color:var(--ink); display:flex; align-items:center; gap:6px; }
.quiz-proof-stars { color:var(--gold); font-size:12px; letter-spacing:1px; }
.quiz-right { background:var(--bg); padding:32px 0 32px 24px; display:flex; align-items:center; justify-content:center; }
.quiz-card { background:var(--white); border:1px solid var(--bd); padding:40px; max-width:420px; width:100%; box-shadow:0 2px 20px rgba(28,28,26,0.04); }

/* ─── QUIZ RESPONSIVE ─── */
@media(min-width:901px) {
  .quiz-wrap { grid-template-columns:1fr 1fr; }
}

/* ─── SKIP LINK (Accessibility) ─── */
.skip-link {
  position:absolute; top:-100%; left:16px; z-index:9999;
  background:var(--ink); color:var(--white); padding:12px 24px;
  font-family:var(--fb); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  text-decoration:none; transition:top .2s cubic-bezier(0.32,0.72,0,1);
}
.skip-link:focus { top:8px; }

/* ─── FAQ ACCORDION ─── */
.faq-section { max-width:900px; margin:0 auto; padding:0 16px 64px; background:var(--bg); }
.faq-grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--bd); }
.faq-item { background:var(--white); }
.faq-question {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 16px; cursor:pointer; user-select:none; transition:background .12s cubic-bezier(0.32,0.72,0,1);
  font-family:var(--fb); font-size:13px; font-weight:500; color:var(--ink); min-height:52px;
}
.faq-question:hover { background:var(--bg2); }
.faq-chevron {
  width:20px; height:20px; flex:none; transition:transform .25s cubic-bezier(0.32,0.72,0,1);
  stroke:var(--ink); fill:none; stroke-width:1.5;
}
.faq-item.open .faq-chevron { transform:rotate(180deg); }
.faq-answer {
  max-height:0; overflow:hidden; transition:max-height .3s cubic-bezier(0.32,0.72,0,1);
}
.faq-answer-inner {
  padding:0 16px 20px;
  font-family:var(--fb); font-size:14px; font-weight:300; color:var(--ink); line-height:1.65;
}
.faq-item.open .faq-answer { max-height:200px; }

/* ─── HERO MOBILE OPTIMISATION ─── */
.hero-search { display:flex; max-width:100%; }
.hero-bg video { display:none; }
.hero-bg picture { display:block !important; }
/* Lighter overlay on mobile so woman-with-bottle hero image shows through */
.hero-overlay {
  background:linear-gradient(to top, rgba(10,10,8,.82) 0%, rgba(10,10,8,.4) 45%, rgba(10,10,8,.18) 100%);
}
@media(min-width:769px){
  .hero-search { display:block; max-width:520px; }
  .hero-bg video { display:block; }
  /* Restore heavier overlay for desktop (video bg) */
  .hero-overlay {
    background:linear-gradient(to top, rgba(10,10,8,.9) 0%, rgba(10,10,8,.65) 50%, rgba(10,10,8,.5) 100%);
  }
}

/* ─── QUIZ SECTION — Dual layout ─── */

/* Mobile-first: quiz-mobile shown, quiz-desktop hidden by default */
.quiz-desktop { display:none; }
.quiz-mobile { display:block; }

/* Desktop quiz card overrides — use ink system */
.quiz-desktop .mq-progress { height:1px; background:var(--bd); margin-bottom:10px; }
.quiz-desktop .mq-progress-fill { height:1px; background:var(--ink); transition:width .5s cubic-bezier(0.32,0.72,0,1); }
.quiz-desktop .mq-step-label { font-family:var(--fb); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; font-weight:500; color:var(--ink); margin-bottom:24px; }
.quiz-desktop .mq-question { font-family:var(--fd); font-size:24px; font-weight:300; font-style:italic; color:var(--ink); margin-bottom:20px; line-height:1.2; }
.quiz-desktop .mq-options { display:flex; flex-direction:column; gap:8px; background:transparent; }
.quiz-desktop .mq-opt { padding:15px 20px; background:var(--bg); border:1px solid var(--bd); font-family:var(--fb); font-size:12px; font-weight:400; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); cursor:pointer; text-align:center; transition:all .4s cubic-bezier(0.32,0.72,0,1); }
.quiz-desktop .mq-opt:hover { background:var(--bg2); border-color:var(--ink); }
.quiz-desktop .mq-opt:active { transform:scale(0.98); }
.quiz-desktop .mq-result-label { font-family:var(--fb); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; font-weight:500; color:var(--ink); margin-bottom:16px; }
.quiz-desktop .mq-recs { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.quiz-desktop .mq-rec { display:flex; align-items:center; gap:14px; padding:12px; background:var(--bg); border:1px solid var(--bd); cursor:pointer; transition:border-color .4s cubic-bezier(0.32,0.72,0,1); text-decoration:none; }
.quiz-desktop .mq-rec:hover { border-color:var(--ink); }
.quiz-desktop .mq-rec-img { width:52px; height:52px; flex:none; overflow:hidden; background:var(--bg2); }
.quiz-desktop .mq-rec-img img { width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.quiz-desktop .mq-rec-info { flex:1; }
.quiz-desktop .mq-rec-name { font-family:var(--fb); font-size:14px; font-weight:500; color:var(--ink); margin-bottom:2px; }
.quiz-desktop .mq-rec-insp { font-family:var(--fb); font-size:11px; color:var(--ink); }
.quiz-desktop .mq-rec-price { font-family:var(--fb); font-size:13px; font-weight:400; color:var(--ink); flex:none; }
.quiz-desktop .mq-bundle-btn { display:block; width:100%; padding:14px; background:var(--ink); color:var(--white); font-family:var(--fb); font-size:12px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--ink); cursor:pointer; margin-top:12px; transition:all .4s cubic-bezier(0.32,0.72,0,1); }
.quiz-desktop .mq-bundle-btn:hover { background:transparent; color:var(--ink); }
.quiz-desktop .mq-full-quiz { font-family:var(--fb); font-size:13px; color:var(--ink); text-underline-offset:3px; }
.quiz-desktop .mq-restart { font-family:var(--fb); font-size:12px; color:var(--ink); cursor:pointer; text-decoration:underline; text-underline-offset:3px; margin-top:12px; display:inline-block; }

/* Mobile: dark full-width (hidden on desktop) */
.quiz-prompt { background:var(--charcoal); padding:64px 24px; position:relative; overflow:hidden; }
.quiz-prompt::before { content:''; position:absolute; inset:0; background:url('../../img/quiz-bg.webp') center/cover no-repeat; opacity:0.35; }
.quiz-prompt::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,28,26,0.25) 0%, rgba(28,28,26,0.55) 100%); }
.quiz-prompt-inner { max-width:600px; margin:0 auto; position:relative; z-index:2; text-align:center; }
.qp-kicker { font-family:var(--fb); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--white); margin-bottom:16px; }
.qp-title { font-family:var(--fd); font-size:clamp(28px,4vw,44px); font-weight:300; color:var(--white); line-height:1.05; margin-bottom:12px; }
.qp-title em { font-style:italic; }
.qp-desc { font-family:var(--fb); font-size:14px; font-weight:300; color:var(--white); margin-bottom:32px; }
.quiz-mobile .mq-progress { height:2px; background:rgba(255,255,255,.1); margin-bottom:8px; }
.quiz-mobile .mq-progress-fill { height:2px; background:var(--white); transition:width .3s cubic-bezier(0.32,0.72,0,1); }
.quiz-mobile .mq-step-label { font-family:var(--fb); font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--white); margin-bottom:24px; }
.quiz-mobile .mq-question { font-family:var(--fd); font-size:24px; font-weight:300; color:var(--white); margin-bottom:20px; }
.quiz-mobile .mq-options { display:flex; flex-direction:column; gap:8px; }
.quiz-mobile .mq-opt { padding:14px; background:transparent; border:1px solid rgba(255,255,255,.2); font-family:var(--fb); font-size:13px; font-weight:400; color:var(--white); cursor:pointer; text-align:center; transition:all .18s cubic-bezier(0.32,0.72,0,1); }
.quiz-mobile .mq-opt:hover { border-color:var(--white); background:rgba(255,255,255,.08); }
.quiz-mobile .mq-result-label { font-family:var(--fb); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--white); margin-bottom:16px; }
.quiz-mobile .mq-recs { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; text-align:left; }
.quiz-mobile .mq-rec { display:flex; align-items:center; gap:14px; padding:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); cursor:pointer; transition:all .15s cubic-bezier(0.32,0.72,0,1); text-decoration:none; }
.quiz-mobile .mq-rec:hover { border-color:rgba(255,255,255,.3); }
.quiz-mobile .mq-rec-img { width:52px; height:52px; flex:none; overflow:hidden; background:var(--bg2); }
.quiz-mobile .mq-rec-img img { width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.quiz-mobile .mq-rec-name { font-family:var(--fb); font-size:14px; font-weight:500; color:var(--white); margin-bottom:2px; }
.quiz-mobile .mq-rec-insp { font-family:var(--fb); font-size:11px; color:var(--white); }
.quiz-mobile .mq-rec-price { font-family:var(--fb); font-size:13px; font-weight:400; color:var(--white); flex:none; }
.quiz-mobile .mq-bundle-btn { display:block; width:100%; padding:14px; background:var(--white); color:var(--ink); font-family:var(--fb); font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; border:none; cursor:pointer; margin-top:16px; }
.quiz-mobile .mq-full-quiz { font-family:var(--fb); font-size:13px; color:var(--white); text-underline-offset:3px; }
.quiz-mobile .mq-restart { font-family:var(--fb); font-size:12px; color:var(--white); cursor:pointer; text-decoration:underline; text-underline-offset:3px; margin-top:12px; display:inline-block; }

@media(min-width:769px){
  .quiz-desktop { display:block; }
  .quiz-mobile { display:none; }
}

/* ─── SOCIAL PROOF BAR ─── */
.proof-bar { display:grid; grid-template-columns:1fr 1fr; background:var(--charcoal); }
.proof-item { padding:32px 16px; text-align:center; position:relative; }
.proof-item:nth-child(1),.proof-item:nth-child(2) { border-bottom:1px solid rgba(255,255,255,.08); }
.proof-item:nth-child(2n) { border-left:1px solid rgba(255,255,255,.08); }
.proof-item:nth-child(2n+1) { border-left:none; }
.proof-num { font-family:var(--fb); font-size:clamp(22px,6vw,30px); font-weight:300; color:var(--white); line-height:1; margin-bottom:8px; letter-spacing:-0.02em; }
.proof-label { font-family:var(--fb); font-size:9px; font-weight:400; letter-spacing:2px; text-transform:uppercase; color:var(--white); }

/* ─── MOTION SYSTEM ─── */

/* Page load — hero stagger */
.hero-content .hero-h1,
.hero-content .hero-sub,
.hero-content .hero-cta,
.hero-content .hero-search,
.hero-content .hero-tags,
.hero-content .hero-stats,
.hero-content > div[style] { opacity:0; transform:translateY(20px); animation:heroIn .6s cubic-bezier(0.32,0.72,0,1) forwards; }
.hero-content .hero-h1    { animation-delay:200ms; }
.hero-content .hero-sub   { animation-delay:350ms; }
.hero-content .hero-cta   { animation-delay:450ms; }
.hero-content .hero-search{ animation-delay:550ms; }
.hero-content > div[style]{ animation-delay:650ms; }
.hero-content .hero-tags  { animation-delay:750ms; }
.hero-content .hero-stats { animation-delay:850ms; }
.hero-stats .hs-item { opacity:0; transform:translateY(12px); animation:heroIn .5s cubic-bezier(0.32,0.72,0,1) forwards; }
.hero-stats .hs-item:nth-child(1) { animation-delay:900ms; }
.hero-stats .hs-item:nth-child(2) { animation-delay:1000ms; }
.hero-stats .hs-item:nth-child(3) { animation-delay:1100ms; }
.hero-stats .hs-item:nth-child(4) { animation-delay:1200ms; }
@keyframes heroIn { to { opacity:1; transform:translateY(0); } }

/* Scroll reveal — uses global .reveal from design system CSS */
/* Reveal-group children: stagger in */
.reveal-child { opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reveal-child.visible { opacity:1; transform:translateY(0); }

/* Product cards — start hidden for scroll reveal, visible class added by JS */
.products .pc, .products .product-card { opacity:0; transform:translateY(24px); }
.products .pc.visible, .products .product-card.visible,
.products.visible .pc, .products.visible .product-card { opacity:1; transform:translateY(0); }

/* Product card — image zoom on hover */
.pc-img .pc-product img { transition:transform .3s var(--ease-out); }

/* Product card — mobile-first: tap feedback as base */
.pc { transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.pc:active { transform:scale(0.98); }
.pc:hover { transform:none; }

/* Collection tabs — mobile-first: tap feedback as base */
.collections-nav-links button { transition:all .2s var(--ease-out); }
.collections-nav-links button:active { transform:scale(0.95); }
.collections-nav-links button:hover { transform:none; }

/* Button press feedback — mobile base */
.bf-tab:active { transform:scale(0.95); }
.mq-opt:active { transform:scale(0.96); background:rgba(255,255,255,.15); }

/* Reduce stagger on mobile — faster feel (base) */
.reveal { transition-duration:.4s; }
.proof-bar.visible .proof-item { transition-duration:.3s; }

/* Smooth scroll snap on product grid (base) */
.products { scroll-behavior:smooth; }

/* Section headers — fade in */
.sh { opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.sh.visible { opacity:1; transform:translateY(0); }

/* Proof bar — count up feel */
.proof-item { opacity:0; transform:translateY(16px); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.proof-bar.visible .proof-item:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0ms; }
.proof-bar.visible .proof-item:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:100ms; }
.proof-bar.visible .proof-item:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:200ms; }
.proof-bar.visible .proof-item:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:300ms; }

/* Quiz prompt — fade in */
.quiz-prompt-inner { opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.quiz-prompt.visible .quiz-prompt-inner { opacity:1; transform:translateY(0); }

/* Compliment cards — stagger in */
.cc { opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }

/* ─── DESKTOP MOTION ─── */
@media(min-width:769px){
  /* Hover effects — desktop only */
  .pc:hover .pc-img .pc-product img { transform:scale(1.03); }
  .pc:hover { transform:translateY(-4px); }
  .pc:active { transform:scale(0.98); }
  .collections-nav-links button:hover { transform:translateY(-2px); }
  .mq-opt:active { transform:scale(0.97); }
  .reveal { transition-duration:.5s; }
  .proof-bar.visible .proof-item { transition-duration:.4s; }
  .products { scroll-behavior:auto; }
}

/* Smooth focus transitions — uses global rule from design system CSS */


/* ─── PAYMENT TRUST STRIP ─── */
.pay-trust {
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:32px 24px; background:var(--bg); border-top:1px solid var(--bd); border-bottom:1px solid var(--bd);
}
.pay-trust-icon {
  font-family:var(--fb); font-size:10px; font-weight:400;
  color:var(--ink); letter-spacing:0.02em;
  padding:5px 8px; border:1px solid var(--bd);
  display:flex; align-items:center; gap:6px;
}
@media(min-width:481px) {
  .pay-trust { gap:16px; padding:40px 24px; }
  .pay-trust-icon { font-size:11px; padding:6px 12px; }
}
@media(min-width:769px) {
  .pay-trust { padding:48px 48px; }
}

/* ─── EMAIL CAPTURE ─── */
.email-capture {
  background:var(--ink); padding:64px 20px; text-align:center;
  position:relative; overflow:hidden;
  opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(0.32,0.72,0,1), transform .7s cubic-bezier(0.32,0.72,0,1);
}
.email-capture.visible { opacity:1; transform:translateY(0); }
.email-capture::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:48px; height:1px; background:rgba(255,255,255,0.2);
}
.ec-kicker {
  font-family:var(--fb); font-size:9px; font-weight:500;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--white); margin-bottom:20px;
  display:inline-block; border:1px solid rgba(255,255,255,0.15);
  border-radius:0; padding:7px 18px;
  opacity:0; transform:translateY(12px);
  transition:opacity .5s cubic-bezier(0.32,0.72,0,1) .15s, transform .5s cubic-bezier(0.32,0.72,0,1) .15s;
}
.email-capture.visible .ec-kicker { opacity:1; transform:translateY(0); }
.ec-title {
  font-family:var(--fd); font-size:clamp(28px,5vw,44px); font-weight:300;
  color:var(--white); margin-bottom:14px; line-height:1.15;
  opacity:0; transform:translateY(12px);
  transition:opacity .5s cubic-bezier(0.32,0.72,0,1) .25s, transform .5s cubic-bezier(0.32,0.72,0,1) .25s;
}
.email-capture.visible .ec-title { opacity:1; transform:translateY(0); }
.ec-title em { font-style:italic; }
.ec-desc {
  font-family:var(--fb); font-size:13px; font-weight:300;
  color:var(--white); margin-bottom:28px; max-width:380px;
  margin-left:auto; margin-right:auto; line-height:1.65;
  opacity:0; transform:translateY(12px);
  transition:opacity .5s cubic-bezier(0.32,0.72,0,1) .35s, transform .5s cubic-bezier(0.32,0.72,0,1) .35s;
}
.email-capture.visible .ec-desc { opacity:1; transform:translateY(0); }
.ec-form {
  display:flex; flex-direction:column; gap:10px; max-width:440px; margin:0 auto;
  opacity:0; transform:translateY(12px);
  transition:opacity .5s cubic-bezier(0.32,0.72,0,1) .45s, transform .5s cubic-bezier(0.32,0.72,0,1) .45s;
}
.email-capture.visible .ec-form { opacity:1; transform:translateY(0); }
.ec-input {
  flex:1; height:52px; padding:0 18px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.04); color:var(--white);
  font-family:var(--fb); font-size:15px; font-weight:300;
  outline:none; -webkit-appearance:none; border-radius:0;
  transition:border-color .5s cubic-bezier(0.32,0.72,0,1), background .5s cubic-bezier(0.32,0.72,0,1);
}
.ec-input::placeholder { color:rgba(255,255,255,0.4); }
.ec-input:focus { border-color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.07); }
.ec-btn {
  height:52px; padding:0 28px; white-space:nowrap; width:100%;
  background:var(--white); color:var(--ink);
  font-family:var(--fb); font-size:11px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  border:1px solid var(--white); cursor:pointer;
  transition:all .5s cubic-bezier(0.32,0.72,0,1);
}
.ec-btn:hover { background:transparent; color:var(--white); }
.ec-btn:active { transform:scale(0.97); }
.ec-note {
  font-family:var(--fb); font-size:11px; font-weight:300;
  color:var(--white); margin-top:16px;
  opacity:0; transform:translateY(8px);
  transition:opacity .5s cubic-bezier(0.32,0.72,0,1) .55s, transform .5s cubic-bezier(0.32,0.72,0,1) .55s;
}
.email-capture.visible .ec-note { opacity:1; transform:translateY(0); }
@media(min-width:481px) {
  .ec-form { flex-direction:row; gap:0; }
  .ec-input { border-right:none; }
  .ec-btn { width:auto; }
}

/* ─── TOAST NOTIFICATION ─── */
.toast {
  position:fixed; top:16px; right:16px; z-index:400;
  background:var(--ink); color:var(--bg);
  padding:14px 20px; max-width:320px;
  font-family:var(--fb); font-size:13px; font-weight:400;
  display:flex; align-items:center; gap:10px;
  transform:translateX(calc(100% + 20px));
  transition:transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:0 8px 32px rgba(0,0,0,.15);
}
.toast.show { transform:translateX(0); }
.toast-check { width:18px; height:18px; flex-shrink:0; }
.toast-check svg { width:100%; height:100%; stroke:var(--gold); fill:none; stroke-width:2; }

/* ─── SEARCH OVERLAY ─── */
.search-overlay {
  position:fixed; inset:0; z-index:300;
  background:var(--card);
  transform:translateY(100%); opacity:0;
  transition:transform 300ms cubic-bezier(0.32,0.72,0,1), opacity 200ms cubic-bezier(0.32,0.72,0,1);
  will-change:transform;
  display:flex; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.search-overlay.open {
  transform:translateY(0); opacity:1;
}
.search-overlay-scrim {
  position:fixed; inset:0; z-index:299;
  background:rgba(28,28,26,0.4);
  opacity:0; pointer-events:none;
  transition:opacity 200ms cubic-bezier(0.32,0.72,0,1);
}
.search-overlay-scrim.open {
  opacity:1; pointer-events:auto;
}
.so-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; min-height:48px;
  border-bottom:1px solid var(--bd);
}
.so-close {
  background:none; border:none; cursor:pointer;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  margin-right:-12px;
}
.so-close svg { width:20px; height:20px; stroke:var(--ink); stroke-width:1.5; }
.so-title {
  font-family:var(--fb); font-size:14px; font-weight:500;
  letter-spacing:0.02em; color:var(--ink);
}
.so-input-wrap {
  position:relative; margin:12px 16px;
}
.so-input-wrap svg {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:1.4;
  pointer-events:none;
}
.so-input {
  width:100%; height:48px;
  padding:0 44px 0 42px;
  border:1px solid var(--bd); border-radius:0;
  font-family:var(--fb); font-size:16px; font-weight:400;
  color:var(--ink); background:var(--bg);
  outline:none; -webkit-appearance:none;
  transition:border-color 200ms cubic-bezier(0.32,0.72,0,1);
}
.so-input:focus { border-color:#A8B0B8; }
.so-input::placeholder { color:var(--ink); font-weight:300; }
.so-clear {
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  width:44px; height:44px;
  display:none; align-items:center; justify-content:center;
}
.so-clear.show { display:flex; }
.so-clear svg { width:16px; height:16px; stroke:var(--ink); stroke-width:1.5; }
.so-section {
  padding:20px 16px 8px;
}
.so-section-label {
  font-family:var(--fb); font-size:11px; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink); margin-bottom:12px;
}
.so-recent-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:0; min-height:48px;
  border-bottom:1px solid var(--bd);
  cursor:pointer;
}
.so-recent-item:hover { background:var(--bg); }
.so-recent-text {
  font-family:var(--fb); font-size:14px; font-weight:400;
  color:var(--ink); padding:0 8px;
}
.so-recent-del {
  background:none; border:none; cursor:pointer;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.so-recent-del svg { width:14px; height:14px; stroke:var(--ink); stroke-width:1.5; opacity:0.4; }
.so-product {
  display:flex; align-items:center; gap:12px;
  padding:12px 0; min-height:72px;
  border-bottom:1px solid var(--bd);
  cursor:pointer; text-decoration:none; color:var(--ink);
}
.so-product:active { transform:scale(0.98); }
.so-product img {
  width:48px; height:48px; object-fit:cover; flex-shrink:0; background:var(--bg2); mix-blend-mode:multiply;
}
.so-product-info { flex:1; min-width:0; }
.so-product-name {
  font-family:var(--fb); font-size:14px; font-weight:500;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.so-product-insp {
  font-family:var(--fb); font-size:12px; font-weight:400;
  color:var(--ink);
}
.so-product-price {
  font-family:var(--fb); font-size:14px; font-weight:500;
  color:var(--ink); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.so-pills {
  display:flex; flex-wrap:wrap; gap:8px;
}
.so-pill {
  padding:10px 16px; min-height:44px;
  border:1px solid var(--bd); background:var(--bg);
  font-family:var(--fb); font-size:12px; font-weight:400;
  color:var(--ink); cursor:pointer;
  display:flex; align-items:center;
  transition:background 0.18s cubic-bezier(0.32,0.72,0,1), border-color 0.18s cubic-bezier(0.32,0.72,0,1);
}
.so-pill:active { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.so-empty {
  padding:40px 16px; text-align:center;
  font-family:var(--fb); font-size:14px; font-weight:300; color:var(--ink);
}
@media(prefers-reduced-motion:reduce) {
  .search-overlay, .search-overlay-scrim { transition-duration:0.01ms !important; }
}

/* ─── BUNDLE INTRO HEADING ─── */
/* bundle-intro styles removed — replaced by bundle-header-new */

/* ─── HOMEPAGE BUNDLES TAB — curated trio + BYO cards ─── */
/* Uses same .sct-* classes as shop page for consistency */
.hp-bundles-wrap { padding:0 12px; }

.hp-bundles-wrap .sct-trio-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.hp-bundles-wrap .sct-trio-card {
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--bd); background:var(--white); overflow:hidden;
  transition:border-color 0.2s ease;
}
.hp-bundles-wrap .sct-trio-card:hover { border-color:var(--ink); }
.hp-bundles-wrap .sct-trio-bottles {
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--deep); position:relative;
}
.hp-bundles-wrap .sct-trio-bottles::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:40px;
  background:linear-gradient(to top, rgba(17,17,16,0.6), transparent);
  pointer-events:none; z-index:2;
}
.hp-bundles-wrap .sct-trio-bottle-cell { position:relative; aspect-ratio:3/4; overflow:hidden; }
.hp-bundles-wrap .sct-trio-bottle-cell + .sct-trio-bottle-cell { border-left:1px solid rgba(255,255,255,0.08); }
.hp-bundles-wrap .sct-trio-bottle-cell img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.5s cubic-bezier(0,0,0.2,1);
}
.hp-bundles-wrap .sct-trio-card:hover .sct-trio-bottle-cell img { transform:scale(1.03); }
.hp-bundles-wrap .sct-trio-bottle-label {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  text-align:center; padding:8px 4px 12px;
  background:linear-gradient(to top, rgba(17,17,16,0.85), transparent);
}
.hp-bundles-wrap .sct-trio-bottle-name {
  display:block; font-family:var(--fb); font-size:10px; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--white); line-height:1.3;
}
.hp-bundles-wrap .sct-trio-bottle-inspired {
  display:block; font-family:var(--fb); font-size:9px; font-weight:300;
  color:rgba(255,255,255,0.7); line-height:1.4; margin-top:2px;
}
.hp-bundles-wrap .sct-trio-body { padding:20px 16px 24px; text-align:center; }
.hp-bundles-wrap .sct-trio-eyebrow {
  display:block; font-family:var(--fb); font-size:9px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase; color:#8B6E52; margin-bottom:6px;
}
.hp-bundles-wrap .sct-trio-title {
  display:block; font-family:var(--fd); font-size:26px; font-weight:300; font-style:italic;
  color:var(--ink); line-height:1.15; margin-bottom:8px;
}
.hp-bundles-wrap .sct-trio-desc {
  display:block; font-family:var(--fb); font-size:13px; font-weight:300;
  color:var(--ink); line-height:1.55; max-width:340px; margin:0 auto 16px;
}
.hp-bundles-wrap .sct-trio-pricing {
  display:flex; align-items:baseline; justify-content:center; gap:8px; margin-bottom:4px;
}
.hp-bundles-wrap .sct-trio-was {
  font-family:var(--fb); font-size:14px; font-weight:300; color:var(--ink); text-decoration:line-through;
}
.hp-bundles-wrap .sct-trio-now {
  font-family:var(--fb); font-size:28px; font-weight:600; color:var(--ink); letter-spacing:-0.02em;
}
.hp-bundles-wrap .sct-trio-save {
  display:block; font-family:var(--fb); font-size:11px; font-weight:500;
  color:#8B6E52; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px;
}
.hp-bundles-wrap .sct-trio-klarna {
  display:block; font-family:var(--fb); font-size:11px; font-weight:300;
  color:var(--ink); margin-bottom:20px;
}
.hp-bundles-wrap .sct-trio-cta {
  display:block; width:100%; height:48px; line-height:48px;
  background:var(--ink); color:var(--white); border:1px solid var(--ink);
  font-family:var(--fb); font-size:11px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; text-align:center;
  transition:all 0.2s ease; min-height:44px;
}
.hp-bundles-wrap .sct-trio-card:hover .sct-trio-cta { background:transparent; color:var(--ink); }
.hp-bundles-wrap .sct-trio-trust {
  display:block; font-family:var(--fb); font-size:10px; font-weight:300;
  color:var(--ink); margin-top:14px; letter-spacing:0.02em;
}
.hp-bundles-wrap .sct-divider { display:flex; align-items:center; gap:16px; margin:36px 0 20px; }
.hp-bundles-wrap .sct-divider-line { flex:1; height:1px; background:var(--bd); }
.hp-bundles-wrap .sct-divider-text {
  font-family:var(--fb); font-size:10px; font-weight:500;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.hp-bundles-wrap .sct-byo-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.hp-bundles-wrap .sct-byo-card {
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--bd); background:var(--white); overflow:hidden;
  transition:border-color 0.2s ease;
}
.hp-bundles-wrap .sct-byo-card:hover { border-color:var(--ink); }
.hp-bundles-wrap .sct-byo-slots { display:grid; grid-template-columns:repeat(3,1fr); background:var(--deep); }
.hp-bundles-wrap .sct-byo-slot {
  aspect-ratio:4/3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
}
.hp-bundles-wrap .sct-byo-slot + .sct-byo-slot { border-left:1px solid rgba(255,255,255,0.08); }
.hp-bundles-wrap .sct-byo-circle {
  width:56px; height:56px; border:1px dashed rgba(255,255,255,0.35); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color 0.3s ease, transform 0.3s ease;
}
.hp-bundles-wrap .sct-byo-card:hover .sct-byo-circle { border-color:rgba(255,255,255,0.6); transform:scale(1.05); }
.hp-bundles-wrap .sct-byo-circle svg { width:20px; height:20px; color:rgba(255,255,255,0.5); }
.hp-bundles-wrap .sct-byo-slot-label {
  font-family:var(--fb); font-size:9px; font-weight:400;
  letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.5);
}
.hp-bundles-wrap .sct-byo-body { padding:20px 16px 24px; text-align:center; }
.hp-bundles-wrap .sct-byo-eyebrow {
  display:block; font-family:var(--fb); font-size:9px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--ink); margin-bottom:6px;
}
.hp-bundles-wrap .sct-byo-title {
  display:block; font-family:var(--fd); font-size:26px; font-weight:300; font-style:italic;
  color:var(--ink); line-height:1.15; margin-bottom:8px;
}
.hp-bundles-wrap .sct-byo-size {
  display:block; font-family:var(--fb); font-size:13px; font-weight:300;
  color:var(--ink); line-height:1.55; margin-bottom:16px;
}
.hp-bundles-wrap .sct-byo-pricing {
  display:flex; align-items:baseline; justify-content:center; gap:8px; margin-bottom:4px;
}
.hp-bundles-wrap .sct-byo-was {
  font-family:var(--fb); font-size:14px; font-weight:300; color:var(--ink); text-decoration:line-through;
}
.hp-bundles-wrap .sct-byo-now {
  font-family:var(--fb); font-size:28px; font-weight:600; color:var(--ink); letter-spacing:-0.02em;
}
.hp-bundles-wrap .sct-byo-save {
  display:block; font-family:var(--fb); font-size:11px; font-weight:500;
  color:#8B6E52; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px;
}
.hp-bundles-wrap .sct-byo-klarna {
  display:block; font-family:var(--fb); font-size:11px; font-weight:300;
  color:var(--ink); margin-bottom:20px;
}
.hp-bundles-wrap .sct-byo-cta {
  display:block; width:100%; height:48px; line-height:48px;
  background:var(--ink); color:var(--white); border:1px solid var(--ink);
  font-family:var(--fb); font-size:11px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; text-align:center;
  transition:all 0.2s ease; min-height:44px;
}
.hp-bundles-wrap .sct-byo-card:hover .sct-byo-cta { background:transparent; color:var(--ink); }
.hp-bundles-wrap .sct-byo-trust {
  display:block; font-family:var(--fb); font-size:10px; font-weight:300;
  color:var(--ink); margin-top:14px; letter-spacing:0.02em;
}

/* ═══ RESPONSIVE — MOBILE-FIRST (min-width) ═══ */

/* Mobile-only base styles (selectors that only existed inside old max-width queries) */
.hero-quiz-link { display:none; }
.hp-reviews { padding:64px 16px !important; }
.cc-qmark { font-size:48px; }

/* Mobile: show 8 products (4 rows of 2), hide 9-12 */
#grid-bestsellers .pc:nth-child(n+9) { display:none; }

/* ─── min-width:341px — above smallest mobile ─── */
@media(min-width:341px){
  .products { grid-template-columns:1fr 1fr !important; }
  .hp-bundles-wrap .sct-trio-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
  .hp-bundles-wrap .sct-byo-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
}

/* ─── min-width:391px — above small mobile ─── */
@media(min-width:391px){
  .hero-content { padding:20vw 20px 40px; }
  .hero-h1 { font-size:clamp(40px,13vw,58px); margin-bottom:24px; }
  .hero-sub { font-size:14px; }
  .hero-cta { padding:14px 28px; }
  .hs-n { font-size:28px; letter-spacing:-0.01em; }
  .collections-nav-links button { padding:10px 14px; }
  .products { padding:0 16px !important; }
  .disc-content { padding:32px 24px 40px; }
  .faq-question { font-size:14px; }
}

/* ─── min-width:481px — above narrow mobile ─── */
@media(min-width:481px){
  .hero-h1 { font-size:clamp(48px,14vw,72px); }
  .sp-grid { grid-template-columns:1fr 1fr; }
}

/* ─── min-width:769px — tablet / desktop ─── */
@media(min-width:769px){
  .hero { min-height:78vh; }
  .hero-content { padding:0 72px 56px; }
  .hero-h1 { font-size:clamp(68px,9vw,120px); margin-bottom:24px; }
  .hero-sub { font-size:clamp(16px,1.5vw,18px); line-height:1.65; margin-bottom:28px; letter-spacing:0.5px; }
  .hero-cta { padding:16px 36px; font-size:12px; margin-bottom:16px; width:auto; text-align:left; }
  .hero-bg video { object-position:70% center; }
  .hero-tags { display:flex; }
  .hero-quiz-link { display:block; }
  .hero-stats { display:flex; gap:0; margin-top:40px; padding-top:28px; grid-template-columns:none; }
  .hs-item { flex:1; padding:0; padding-right:24px; border-right:1px solid rgba(255,255,255,.08); border-bottom:none; }
  .hs-item:nth-child(odd) { padding-left:0; padding-right:24px; border-right:1px solid rgba(255,255,255,.08); }
  .hs-item:nth-child(even) { padding-left:24px; padding-right:0; }
  .hs-item:last-child { border-right:none; padding-right:0; padding-left:24px; }
  .hs-item:not(:first-child) { padding-left:24px; }
  .hs-n { font-size:clamp(28px,3vw,38px); letter-spacing:normal; }
  .collections-nav { padding:48px 24px 40px; }
  .collections-nav-links { gap:8px; padding:0; }
  .collections-nav-links button { padding:14px 22px; font-size:12px; letter-spacing:1.2px; }
  .sh { padding:96px 48px 48px; }
  .sh-text h2 { font-size:clamp(32px,4vw,52px); }
  .products-wrap { padding:0 48px 96px; }
  #grid-bestsellers .pc:nth-child(n+9) { display:block; } /* show all 12 on tablet+ */
  .products { grid-template-columns:repeat(3,1fr) !important; gap:28px !important; row-gap:28px !important; padding:0 !important; }
  .products-viewall { display:none; }
  .hp-bundles-wrap { padding:0; }
  .hp-bundles-wrap .sct-trio-grid { grid-template-columns:repeat(3,1fr); gap:24px; }
  .hp-bundles-wrap .sct-trio-body { padding:24px 20px 28px; }
  .hp-bundles-wrap .sct-trio-title { font-size:28px; }
  .hp-bundles-wrap .sct-trio-desc { font-size:14px; }
  .hp-bundles-wrap .sct-trio-bottle-name { font-size:11px; }
  .hp-bundles-wrap .sct-byo-body { padding:24px 20px 28px; }
  .hp-bundles-wrap .sct-byo-title { font-size:28px; }
  .hp-bundles-wrap .sct-byo-circle { width:64px; height:64px; }
  .hp-bundles-wrap .sct-byo-circle svg { width:24px; height:24px; }
  .pc { transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out); min-width:auto; }
  .pc-img .pc-product { position:absolute; inset:0; z-index:2; }
  .pc-img .pc-lifestyle { display:block; position:absolute; inset:0; opacity:0; transition:opacity .4s cubic-bezier(0.32,0.72,0,1); z-index:1; pointer-events:none; }
  .pc:hover .pc-img .pc-product { opacity:0; }
  .pc:hover .pc-img .pc-lifestyle { display:block; opacity:1; }
  .pc:hover .pc-img .pc-product img { transform:scale(1.03); }
  .pc:hover { transform:translateY(-6px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
  .pc-info { padding:18px 18px 22px; }
  .pc-rating { margin-bottom:4px; }
  .pc-stars span { font-size:inherit !important; }
  .pc-reviews { font-size:12px; }
  .pc-rating-stars { font-size:13px; }
  .pc-rating-count { font-size:12px; }
  .pc-insp { font-size:12px; min-height:auto; }
  .pc-name { font-size:15px; }
  .pc-price-link { font-size:14px; }
  /* Sticky bundle bar hidden on desktop — mobile only */
  .bundle-header-new { padding:64px 48px 48px; }
  .bundle-h2 { font-size:clamp(36px,5vw,52px); margin-bottom:20px; }
  .sp-grid { grid-template-columns:repeat(3,1fr); }
  .compliment-wrap { padding:96px 48px 96px; }
  .compliment-grid { grid-template-columns:repeat(3,1fr) !important; gap:1px !important; background:var(--bd) !important; }
  .compliment-grid .cc { border:none; }
  .cc { padding:24px; border:none; opacity:0 !important; transform:translateY(24px) !important; }
  .cc-text { font-size:13px; }
  .disc-section { padding:112px 48px; }
  .disc-container { grid-template-columns:1fr 1.2fr; border:1px solid var(--bd); }
  .disc-visual { min-height:320px; height:auto; max-height:none; border-right:1px solid var(--bd); padding:0 !important; }
  .disc-visual img { object-position:center 40%; }
  .disc-content { padding:56px 64px; }
  .disc-title { font-size:clamp(32px,4vw,50px); margin-bottom:20px; }
  .disc-desc { font-size:14px; line-height:1.7; margin-bottom:32px; }
  .disc-price-row { font-size:36px; }
  .disc-btn { width:auto; text-align:center; padding:16px 32px; }
  .exit-popup { grid-template-columns:1fr 1.1fr; }
  .exit-visual { display:flex; }
  .exit-content { padding:44px 36px; }
  .quiz-wrap { padding:0 48px 80px; }
  .quiz-left { padding:48px 56px 48px 0; }
  .quiz-right { padding:48px 0 48px 56px; }
  .faq-section { padding:0 48px 96px; }
  .faq-question { padding:20px 28px; min-height:auto; font-size:14px; }
  .faq-answer-inner { padding:0 28px 24px; }
  .proof-bar { display:flex; }
  .proof-item { flex:1; padding:48px 24px; border-bottom:none; }
  .proof-item:nth-child(1),.proof-item:nth-child(2) { border-bottom:none; }
  .proof-item:nth-child(2n) { border-left:none; }
  .proof-item:nth-child(2n+1) { border-left:none; }
  .proof-item + .proof-item { border-left:1px solid rgba(255,255,255,.08); }
  .proof-num { font-size:clamp(24px,3vw,36px); }
  .proof-label { font-size:10px; letter-spacing:1.8px; }
  .hp-reviews { padding:96px 24px !important; }
  .email-capture { padding:96px 24px; }
  .ec-kicker { font-size:10px; letter-spacing:0.18em; }
  .ec-desc { font-size:14px; margin-bottom:36px; }
}

/* ─── min-width:1025px — large desktop ─── */
@media(min-width:1025px){
  .products { grid-template-columns:repeat(4,1fr) !important; }
  .bundle-header { padding:60px 72px 0; }
}

/* Easing tokens — match design system */
:root {
  --ease-out: cubic-bezier(0.32,0.72,0,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}

/* Reduce motion for users who prefer it */
@media(prefers-reduced-motion:reduce){
  .reveal, .reveal-child { opacity:1; transform:none; transition:none; }
  .trust-marquee-track { animation:none; }
  .hero-content .hero-h1, .hero-content .hero-sub, .hero-content .hero-cta, .hero-content .hero-search, .hero-content .hero-tags, .hero-content .hero-stats, .hero-content > div[style] { animation:none; opacity:1; transform:none; }
  .hero-stats .hs-item { animation:none; opacity:1; transform:none; }
  .pc { transition:none; }
  .proof-item { transition:none; }
}

@keyframes soldPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

.tfw-import-notice { font-family:var(--fb); }

/* Social wall + compact UGC strip styles in tfw-design-system-final.css (shared component) */

/* ════════════════════════════════════════════════════════════════
   PHLUR-SHARPER · 2026-04-21
   Softens floating units + primary buttons only.
   Typography, section rules, inputs, eyebrow tags stay 0px.
   ════════════════════════════════════════════════════════════════ */
.quiz-card,
.pc{border-radius:var(--radius-unit,3px);box-shadow:var(--shadow-unit,0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.03))}

/* Buttons stay 0px — TFW sharp-button brand signal.
   Phlur-sharper applies to cards + floating units only. */