/*
 * ALTO Theme — Component Styles
 * Nav, cart drawer, hero, sections, pack selector, social proof,
 * features, guarantee, FAQ, sticky bar, checkout modal, page popups,
 * exit intent popup, review form.
 */

/* ══ CART DRAWER ══════════════════════════ */
.cart-overlay { position:fixed; inset:0; z-index:800; background:rgba(0,0,0,.4); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .3s; }
.cart-overlay.open { opacity:1; pointer-events:all; }

.cart-panel {
  position:fixed; top:0; right:0; bottom:0; z-index:801;
  width:420px; max-width:100%; background:var(--white);
  border-left:1px solid var(--border); box-shadow:-8px 0 40px rgba(0,0,0,.1);
  transform:translateX(100%); transition:transform .42s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column; overflow:hidden;
}
.cart-panel.open { transform:translateX(0); }

.cp-head {
  padding:18px 22px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:relative; flex-shrink:0;
}
.cp-head::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-green); }
.cp-title { font-family:var(--fh); font-size:20px; font-weight:800; text-transform:uppercase; color:var(--dark); }
.cp-close { background:none; border:none; color:var(--light); font-size:22px; cursor:pointer; transition:color .2s; line-height:1; }
.cp-close:hover { color:var(--dark); }

/* Cart scrollable body */
.cp-body { flex:1; overflow-y:auto; display:flex; flex-direction:column; }

/* Cart items */
.cp-items { padding:14px 22px; border:1.5px solid var(--border); margin:14px 16px 0; border-radius:3px; }
.cart-empty { text-align:center; padding:36px 22px; font-size:15px; color:var(--light); }

.cp-item { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
.cp-item:last-child { border-bottom:none; }
.cp-item-img { width:56px; height:56px; background:var(--card); border-radius:4px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden; }
.cp-item-img img { width:100%; height:100%; object-fit:cover; }
.cp-item-info { flex:1; }
.cp-item-name  { font-size:14px; font-weight:600; color:var(--dark); margin-bottom:3px; }
.cp-item-qty   { font-size:12px; color:var(--light); margin-bottom:3px; }
.cp-item-price { font-size:14px; font-weight:700; color:var(--price); }
.cp-item-remove { font-size:16px; color:var(--light); cursor:pointer; background:none; border:none; transition:color .2s; padding:0 4px; align-self:flex-start; margin-top:2px; }
.cp-item-remove:hover { color:var(--dark); }

/* ─── CART UPSELL BLOCKS ──────────── */
.cp-upsell-block { padding:14px 22px; border-bottom:1px solid var(--border); display:none; }
.cp-upsell-block.visible { display:block; }
.cub-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.cub-icon { font-size:14px; }
.cub-label { font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--dark); flex:1; }
.cub-badge { font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:3px 10px; color:var(--white); white-space:nowrap; }
.cub-badge.green  { background:var(--grad-green); }
.cub-badge.purple { background:var(--grad); }
.cub-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1.5px solid var(--border); background:var(--card); transition:border-color .25s; }
.cub-row:hover { border-color:#059669; }
.cub-img { width:44px; height:44px; background:var(--white); border-radius:3px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; border:1px solid var(--border); }
.cub-info { flex:1; min-width:0; }
.cub-name { font-size:13px; font-weight:700; color:var(--dark); margin-bottom:2px; }
.cub-desc { font-size:11px; color:var(--light); }
.cub-pricing { display:flex; align-items:baseline; gap:6px; margin-top:3px; flex-wrap:wrap; }
.cub-sale { font-size:15px; font-weight:800; color:var(--price); }
.cub-orig { font-size:11px; color:var(--light); text-decoration:line-through; }
.cub-save { font-size:10px; font-weight:800; color:#059669; }
.cub-add { flex-shrink:0; padding:9px 16px; background:var(--dark); color:var(--white); border:none; font-family:var(--fh); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .25s; white-space:nowrap; }
.cub-add:hover { background:#333; }
.cub-add.added { background:#059669; }
.cp-first-buyer { padding:12px 22px; border-bottom:1px solid rgba(5,150,105,.2); background:rgba(5,150,105,.07); display:none; align-items:center; gap:10px; }
.cp-first-buyer.visible { display:flex; }
.cfb-icon { font-size:20px; flex-shrink:0; }
.cfb-text { font-size:13px; color:var(--dark); line-height:1.4; }
.cfb-text strong { color:#059669; font-weight:800; }
.cfb-text em { font-style:normal; display:block; font-size:11px; color:var(--light); margin-top:2px; }
.cp-discount-reveal {
  padding:14px 22px;
  background:var(--grad-green);
  display:flex; align-items:center; gap:12px;
  position:relative; overflow:hidden;
}
/* shimmer effect */
.cp-discount-reveal::after {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  animation:shimmer 2.8s ease-in-out infinite;
}
@keyframes shimmer { 0%{left:-100%} 100%{left:160%} }
.cdr-icon { font-size:22px; flex-shrink:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
.cdr-text { font-size:13px; color:rgba(255,255,255,.92); line-height:1.5; }
.cdr-text strong { color:var(--white); font-weight:800; font-size:14px; display:block; }
.cdr-text span { display:block; font-size:11px; color:rgba(255,255,255,.75); margin-top:2px; }

/* Cart footer */
.cp-foot { padding:16px 22px; border-top:1px solid var(--border); flex-shrink:0; background:var(--white); }
.cp-total-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.cp-total-lbl { font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--light); }
.cp-total-amt { font-family:var(--fh); font-size:28px; font-weight:900; color:var(--dark); }
/* FINAL SAVINGS message — bold, green, prominent */
.cp-final-msg {
  font-family:var(--fh); font-size:16px; font-weight:900;
  text-transform:uppercase; letter-spacing:.04em;
  margin-bottom:12px; line-height:1.2;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.cp-final-green { color:#059669; }
.cp-final-grad {
  background:var(--grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
/* Free shipping row in cart */
.cp-free-ship {
  display:flex; align-items:center; gap:10px;
  padding:10px 22px; border-bottom:1px solid rgba(5,150,105,.15);
  background:rgba(5,150,105,.05);
}
.cfs-icon { font-size:16px; flex-shrink:0; }
.cfs-text { font-size:13px; color:var(--dark); }
.cfs-orig { color:var(--light); text-decoration:line-through; font-size:13px; }
.cfs-free { color:#059669; font-weight:700; font-size:13px; margin-left:2px; }
.cp-checkout {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:16px; background:var(--grad-green); color:var(--white); border:none;
  font-family:var(--fh); font-size:17px; font-weight:900;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:opacity .25s, transform .2s; margin-bottom:8px;
  position:relative; overflow:hidden;
}
.cp-checkout::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.15); transform:translateX(-110%) skewX(-12deg); transition:transform .5s ease; }
.cp-checkout:hover::before { transform:translateX(110%) skewX(-12deg); }
.cp-checkout:hover { opacity:.92; transform:translateY(-1px); color:var(--white); }
.cp-checkout-note { text-align:center; font-size:11px; color:var(--light); margin-bottom:8px; display:flex; align-items:center; justify-content:center; gap:5px; }
.cp-checkout-note span { font-size:13px; }
.cp-cont { display:block; text-align:center; font-size:12px; color:var(--light); cursor:pointer; text-decoration:none; transition:color .2s; }
.cp-cont:hover { color:var(--dark); }

/* ══ HERO ════════════════════════════════ */
/* ════════════════════════════════════════════════════
   HERO — two-column desktop, stacked mobile
   Desktop:  [headline + sell | video 9:16 sticky]
   Mobile:   headline → video (9:16) → sell
════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--dark);
  color: var(--white);
  overflow: hidden;
  padding-top: var(--total-h);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 80% 50%, color-mix(in srgb, var(--grad-b) 12%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, color-mix(in srgb, var(--grad-a) 7%, transparent) 0%, transparent 50%);
  pointer-events: none;
}

/* ── Layout grid ── */
.hero-layout {
  position: relative; z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  align-items: start;
  min-height: calc(100svh - var(--total-h));
}

/* ── Left column ── */
.hero-left {
  padding: 32px 0 60px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Kicker */
.hero-kicker {
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 12px;
}

/* Headline — NO glow, clean gradient on accent word */
.hero-h1 {
  font-family: var(--fh);
  font-size: clamp(48px, 5.5vw, 76px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .93;
  letter-spacing: -.02em;
  color: var(--white);
  margin-bottom: 16px;
}
.hero-h1 .accent {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: 15px; line-height: 1.75;
  color: rgba(255,255,255,.58);
  max-width: 400px;
  margin-bottom: 32px;
}
.hero-grad-bar {
  width: 72px; height: 4px;
  background: var(--grad);
  margin: 16px 0 20px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.hero-grad-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-100%);
  animation: heroBarSweep 3s ease-in-out infinite;
}
@keyframes heroBarSweep {
  0%    { transform: translateX(-100%); }
  55%,100% { transform: translateX(200%); }
}

/* Mobile video — hidden on desktop */
.hero-vid-mobile { display: none; }

/* ── Selling block ── */
.hero-sell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Product row: thumbnail + name */
.hero-product-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.hpr-photo {
  width: 84px; height: 84px;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.hpr-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.hpr-name {
  font-family: var(--fh);
  font-size: 18px; font-weight: 800;
  text-transform: uppercase; color: var(--white);
  margin-bottom: 3px;
}
.hpr-tagline { font-size: 12px; color: rgba(255,255,255,.5); }

/* Price block */
.hero-price-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.hpb-orig {
  font-size: 14px;
  color: rgba(255,255,255,.3);
  text-decoration: line-through;
}
.hpb-sale {
  font-family: var(--fh);
  font-size: 44px; font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.hpb-curr {
  font-size: 14px;
  color: rgba(255,255,255,.4);
  font-weight: 600;
}
.hpb-save {
  font-size: 13px;
  color: #86efac;
  font-weight: 700;
}

/* Primary CTA */
.hero-cta {
  width: 100%;
  padding: 17px 24px;
  background: var(--grad);
  color: var(--white);
  border: none;
  font-family: var(--fh);
  font-size: 18px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: opacity .25s, transform .2s;
}
.hero-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.15);
  transform: translateX(-110%) skewX(-12deg);
  transition: transform .5s ease;
}
.hero-cta:hover::before { transform: translateX(110%) skewX(-12deg); }
.hero-cta:hover { opacity: .92; transform: translateY(-1px); }

/* Pillow add-on row */
.hero-upsell-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1.5px solid color-mix(in srgb, var(--grad-b) 30%, transparent);
  background: color-mix(in srgb, var(--grad-b) 6%, transparent);
  cursor: pointer;
  transition: all .25s;
}
.hero-upsell-row:hover { border-color: color-mix(in srgb, var(--grad-b) 60%, transparent); background: color-mix(in srgb, var(--grad-b) 12%, transparent); }
.hero-upsell-row.active { border-color: color-mix(in srgb, var(--grad-b) 80%, transparent); background: color-mix(in srgb, var(--grad-b) 18%, transparent); }
.hur-photo {
  width: 60px; height: 60px;
  flex-shrink: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--grad-b) 20%, transparent);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: default; pointer-events: none;
}
.hur-photo img { width:100%; height:100%; object-fit:cover; }
.hur-photo span { font-size: 26px; }
.hur-info { flex: 1; min-width: 0; }
.hur-name { font-size: 13px; font-weight: 700; color: var(--white); }
.hur-sub  { font-size: 11px; color: rgba(196,181,253,.75); }
.hur-right { flex-shrink: 0; text-align: right; }
.hur-price {
  font-family: var(--fh);
  font-size: 16px; font-weight: 900; color: #e9d5ff;
}
.hur-toggle {
  font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(196,181,253,.7);
  margin-top: 2px;
}
.hero-upsell-row.active .hur-toggle { color: #a78bfa; }

/* Trust row */
.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
  flex-wrap: wrap;
}
.hero-trust-row span:first-child { color: #f59e0b; letter-spacing: 2px; }
.htr-divider { opacity: .3; }

/* Price match — subtle pill, more presence than a plain link */
.hero-price-match-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
  align-self: flex-start;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  letter-spacing: .03em;
}
.hero-price-match-link::before {
  content: '🏷️';
  font-size: 13px;
}
.hero-price-match-link:hover {
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.09);
}

/* ── Right column: video ── */
.hero-right {
  position: sticky;
  top: var(--total-h);
  padding: 40px 0 40px;
  height: calc(100svh - var(--total-h));
  display: flex;
  align-items: center;
}
.hero-video-frame {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: calc(100svh - var(--total-h) - 80px);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),
    0 24px 60px rgba(0,0,0,.7);
  background: #111;
}
.hero-vid-el {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero-fallback-inner {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, #1e2a44 0%, #111 100%);
  display: flex; align-items: center; justify-content: center;
}
.hero-video-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.3) 100%);
  pointer-events: none;
  border-radius: 8px;
}
.hero-vid-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; color: rgba(255,255,255,.2); text-align: center;
}
.hero-vid-placeholder span:first-child { font-size: 40px; }
.hero-vid-placeholder span:last-child  { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-family: var(--fh); }

/* ── HERO SCROLL HINT ── */
.hero-scroll {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  z-index: 10;
  opacity: 0; animation: fadeIn .6s ease 1.4s forwards;
}
.hero-scroll span { font-size: 9px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.hero-scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent); }

/* ════════════════════════════════════════════════════
   HERO — RESPONSIVE
════════════════════════════════════════════════════ */

/* Tablet: tighten spacing */
@media(max-width:1100px) {
  .hero-layout { padding: 0 32px; gap: 40px; grid-template-columns: 1fr 300px; }
  .hero-h1 { font-size: clamp(42px, 5vw, 64px); }
}

/* Mobile: single column, video between headline and sell */
@media(max-width:768px) {
  .hero-layout {
    grid-template-columns: 1fr;
    padding: 28px 20px 48px;
    gap: 0;
    min-height: unset;
  }
  /* Desktop video column hidden */
  .hero-right { display: none; }
  /* Mobile video shown */
  .hero-vid-mobile {
    display: block;
    width: 100%;
    margin-bottom: 24px;
  }
  .hero-vid-mobile .hero-video-frame,
  .hero-vid-mobile .hero-slider {
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 70svh;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: #111;
    box-shadow: 0 12px 40px rgba(0,0,0,.6);
    display: block;
  }
  /* Ensure slider fills the frame on mobile */
  .hero-vid-mobile .hero-slider { height: 100%; min-height: 200px; }
  .hero-vid-mobile .hero-slide  { position: absolute; inset: 0; }
  .hero-vid-mobile .hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero-left { padding: 32px 0 0; }
  .hero-h1 { font-size: clamp(36px, 9vw, 52px); }
  .hero-sub { font-size: 14px; margin-bottom: 24px; }
  .hpb-sale { font-size: 36px; }
  .hero-cta { font-size: 16px; padding: 15px; }
}

@media(max-width:420px) {
  .hero-layout { padding: 20px 16px 40px; }
}

/* ══ SOCIAL PROOF — AUTO-SCROLL ═══════════
   Slow auto-scrolling marquee.
   Pauses on hover. Mix of video/photo/text.
   "Add Your Review" button at the bottom.
══════════════════════════════════════════ */
.social-sec { padding:72px 0 56px; background:var(--white); overflow:hidden; }

.social-header { max-width:1200px; margin:0 auto; padding:0 40px 40px; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; }

/* Inventory counter */
.inventory-bar {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:rgba(239,68,68,.08);
  border:1.5px solid rgba(239,68,68,.25);
  border-radius:2px;
}
.inv-icon { font-size:14px; flex-shrink:0; }
.inv-text { font-size:12px; font-weight:700; color:#dc2626; }
.inv-num  { font-family:var(--fh); font-size:18px; font-weight:900; color:#dc2626; }
/* Progress bar */
.inv-progress { width:100%; height:4px; background:rgba(239,68,68,.15); border-radius:2px; margin-top:4px; overflow:hidden; }
.inv-fill { height:100%; background:linear-gradient(90deg,#dc2626,var(--grad-a)); border-radius:2px; width:22%; }

.social-hint  { font-size:12px; color:var(--light); display:flex; align-items:center; gap:6px; }
.social-hint::before { content:'← scroll →'; }

/* The auto-scrolling container */
.social-scroll-outer {
  position:relative; overflow:hidden;
  cursor:grab;
}
.social-scroll-outer:active { cursor:grabbing; }
.social-scroll-outer::before,
.social-scroll-outer::after {
  content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
}
.social-scroll-outer::before { left:0; background:linear-gradient(to right, var(--white), transparent); }
.social-scroll-outer::after  { right:0; background:linear-gradient(to left, var(--white), transparent); }

/* Auto-scrolling track — uses JS translateX, not CSS animation */
.social-track {
  display:flex; gap:16px;
  padding:8px 40px 16px;
  /* Width set in JS */
  will-change:transform;
  user-select:none;
}

/* Card base */
.sp-card {
  flex-shrink:0; width:234px;
  border:1px solid var(--border); border-radius:4px; overflow:hidden;
  background:var(--white); transition:box-shadow .3s, transform .3s;
}
.sp-card:hover { box-shadow:0 8px 28px rgba(0,0,0,.1); transform:translateY(-3px); }

/* Media area */
.sp-media { width:100%; aspect-ratio:9/16; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; height:auto; }
.sp-media.is-photo { background:var(--card); }
.sp-media.is-video { background:#111; }
.sp-media.is-text  { background:linear-gradient(145deg,#1a1a2e,#0f0f1a); }

/* Video — autoplay, muted, no controls unless hover */
.sp-media video { width:100%; height:100%; object-fit:cover; display:block; }
.sp-vid-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); transition:background .3s;
}
.sp-card:hover .sp-vid-overlay { background:rgba(0,0,0,.15); }
.sp-play-btn {
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; padding-left:3px;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  transition:transform .25s;
}
.sp-card:hover .sp-play-btn { transform:scale(1.12); }
.sp-vid-badge { position:absolute; top:10px; left:10px; background:var(--grad); color:var(--white); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:3px 10px; }

/* Photo placeholder overlay */
.sp-photo-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.sp-photo-placeholder .ps-icon { font-size:28px; }
.sp-photo-placeholder .ps-text { font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#bbb; }

/* Text card content */
.sp-text-quote { font-family:var(--fh); font-size:22px; font-weight:700; line-height:1.25; color:var(--dark); margin-bottom:14px; }
.sp-text-stars  { color:var(--price); font-size:16px; letter-spacing:2px; margin-bottom:8px; }
.sp-text-bg-num { position:absolute; top:-8px; right:8px; font-family:var(--fh); font-size:96px; font-weight:900; color:rgba(0,0,0,.04); line-height:1; }

/* Card footer */
.sp-footer { padding:13px 16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; background:var(--white); }
.sp-avatar { width:30px; height:30px; border-radius:50%; background:var(--card); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; overflow:hidden; }
.sp-avatar img { width:100%; height:100%; object-fit:cover; }
.sp-name  { font-size:13px; font-weight:600; color:var(--dark); }
.sp-loc   { font-size:11px; color:var(--light); margin-top:1px; }
.sp-stars { color:var(--price); font-size:11px; letter-spacing:1px; margin-left:auto; flex-shrink:0; }

/* ADD YOUR REVIEW button — bottom of section */
.social-bottom {
  padding:32px 40px 0;
  display:flex; align-items:center; justify-content:center; gap:20px;
  flex-wrap:wrap;
}
.add-review-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 36px;
  background:var(--white);
  border:2px solid var(--border);
  font-family:var(--fh); font-size:15px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dark);
  cursor:pointer; transition:all .28s; position:relative;
}
.add-review-btn::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad); transform:scaleX(0); transition:transform .35s;
}
.add-review-btn:hover { border-color:var(--grad-b); color:var(--grad-b); }
.add-review-btn:hover::before { transform:scaleX(1); }
.add-review-btn .arr { font-size:18px; transition:transform .25s; }
.add-review-btn:hover .arr { transform:translateX(4px); }
.social-bottom-note { font-size:12px; color:var(--light); }

/* ══ FEATURES ══════════════════════════ */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border: 1px solid rgba(255,255,255,.08);
}
.feat-card {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  transition: background .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
  background: var(--dark);
}
.feat-card:last-child { border-right: none; }
.feat-card { border-right: 1px solid rgba(255,255,255,.08); }
.feat-card:hover {
  background: color-mix(in srgb, var(--grad-b) 10%, var(--dark));
  box-shadow: inset 0 0 40px color-mix(in srgb, var(--grad-b) 8%, transparent);
}
.feat-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:3px; background:var(--grad);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
.feat-card:hover::after { transform:scaleX(1); }

/* Photo takes majority of card height */
.feat-card .fc-photo {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--card);
  flex-shrink: 0;
}
.feat-card .fc-photo img { width:100%;height:100%;object-fit:cover;display:block; }
.feat-card .fc-photo .photo-slot { width:100%;height:100%;border:none;background:var(--card); }

/* Content block below the photo */
.feat-card .fc-content {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feat-photo { width:100%; height:150px; margin-bottom:18px; border-radius:3px; }
.feat-num   { font-size:10px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--grad-b); margin-bottom:10px; display:block; }
.feat-title { font-family:var(--fh); font-size:18px; font-weight:800; text-transform:uppercase; color:var(--white); margin-bottom:8px; }
.feat-body  { font-size:13px; line-height:1.75; color:rgba(255,255,255,.55); }
.fc-title   { font-family:var(--fh); font-size:18px; font-weight:800; text-transform:uppercase; color:var(--white); margin-bottom:4px; }
.fc-text    { font-size:13px; line-height:1.75; color:rgba(255,255,255,.55); }

/* ══ PACK CARDS ════════════════════════ */
.pack-section { background:var(--bg); }
.pack-cards-wrap { max-width:940px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 40px 36px; }

.pack-card { border:2px solid var(--border); border-radius:4px; overflow:hidden; transition:border-color .3s, box-shadow .3s; cursor:pointer; position:relative; background:var(--white); }
.pack-card:hover { border-color:#ccc; box-shadow:0 4px 20px rgba(0,0,0,.07); }
.pack-card.selected { border-color:transparent; box-shadow:0 4px 24px rgba(0,0,0,.1); }
.pack-card.selected::before { content:''; position:absolute; inset:0; border-radius:4px; z-index:0; padding:2px; background:var(--grad); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.pack-badge { position:absolute; top:12px; right:12px; z-index:2; font-family:var(--fh); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:var(--grad); color:var(--white); padding:4px 10px; }

.pack-card-inner { display:grid; grid-template-columns:150px 1fr; position:relative; z-index:1; }
.pack-card-photo { height:100%; min-height:190px; border-right:1px solid var(--border); }
.pack-card-photo .photo-slot { height:100%; border:none; border-radius:0; background:var(--card); }

.pack-card-info { padding:22px 20px; display:flex; flex-direction:column; }
.pci-radio { width:18px; height:18px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:10px; transition:border-color .25s; flex-shrink:0; align-self:flex-start; }
.pci-radio::after { content:''; width:8px; height:8px; border-radius:50%; background:var(--grad); opacity:0; transition:opacity .25s; }
.pack-card.selected .pci-radio { border-color:var(--grad-b); }
.pack-card.selected .pci-radio::after { opacity:1; }
.pci-qty   { font-family:var(--fh); font-size:34px; font-weight:900; color:var(--dark); line-height:1; margin-bottom:3px; }
.pci-name  { font-size:12px; font-weight:600; color:var(--body); margin-bottom:12px; }
.pci-prices { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.pci-sale  { font-family:var(--fh); font-size:24px; font-weight:900; color:var(--price); }
.pci-orig  { font-size:13px; color:var(--light); text-decoration:line-through; }
.pci-aud   { font-size:11px; color:var(--light); font-weight:600; }
.pci-each  { font-size:11px; color:var(--green); font-weight:600; }

.pack-upsell { border-top:1px solid var(--border); padding:14px 18px; background:color-mix(in srgb, var(--grad-b) 4%, transparent); position:relative; z-index:1; }
.pu-label { font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--grad-b); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.pu-badge { background:var(--grad); color:var(--white); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; }
.pu-row { display:flex; align-items:center; gap:12px; }
.pu-photo { width:44px; height:44px; flex-shrink:0; border-radius:3px; overflow:hidden; }
.pu-photo .photo-slot { width:100%; height:100%; border:none; background:var(--card); }
.pu-photo .photo-slot .ps-icon { font-size:14px; }
.pu-photo .photo-slot .ps-text { display:none; }
.pu-info { flex:1; min-width:0; }
.pu-name { font-size:13px; font-weight:700; color:var(--dark); margin-bottom:2px; }
.pu-price-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pu-price-sale { font-size:13px; font-weight:800; color:var(--price); }
.pu-price-orig { font-size:11px; color:var(--light); text-decoration:line-through; }
.pu-save { font-size:10px; color:var(--green); font-weight:700; }
.pu-toggle-wrap { display:flex; align-items:center; gap:10px; cursor:pointer; order:-1; }
.toggle-switch { position:relative; width:52px; height:28px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-track { position:absolute; inset:0; border-radius:14px; background:var(--border); transition:background .3s; cursor:pointer; }
.toggle-switch input:checked + .toggle-track { background:var(--grad); }
.toggle-knob { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--white); transition:transform .3s; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.toggle-switch input:checked + .toggle-track .toggle-knob { transform:translateX(24px); }
.pu-toggle-label { font-size:12px; font-weight:500; color:var(--body); }

.pack-cta-wrap { max-width:940px; margin:0 auto; padding:0 40px 20px; }
.pack-runway { display:grid; grid-template-columns:1fr auto; border:1.5px solid var(--border); transition:border-color .3s; overflow:hidden; }
.pack-runway:hover { border-color:var(--grad-b); box-shadow:0 4px 16px color-mix(in srgb, var(--grad-b) 10%, transparent); }
.pr-info { padding:18px 24px; background:var(--card); display:flex; flex-direction:column; justify-content:center; gap:3px; }
.pr-name { font-size:14px; font-weight:700; color:var(--dark); }
.pr-sub  { font-size:11px; color:var(--light); }
.pr-inv { font-size:11px; font-weight:700; color:#c2410c; margin-top:4px; display:flex; align-items:center; gap:4px; }
.pr-inv-dot { font-size:12px; }
.pr-cta { background:var(--grad); border:none; padding:18px 44px; font-family:var(--fh); font-size:15px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--white); cursor:pointer; display:flex; align-items:center; gap:14px; position:relative; overflow:hidden; white-space:nowrap; transition:opacity .28s, padding-right .28s; }
.pr-cta::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.15); transform:translateX(-110%) skewX(-12deg); transition:transform .45s; }
.pr-cta:hover::before { transform:translateX(110%) skewX(-12deg); }
.pr-cta:hover { opacity:.92; padding-right:56px; }
.r-arr { width:14px; height:2px; background:var(--white); position:relative; transition:width .28s; }
.r-arr::after { content:''; position:absolute; right:0; top:-3px; width:6px; height:6px; border-right:2px solid var(--white); border-top:2px solid var(--white); transform:rotate(45deg); }
.pr-cta:hover .r-arr { width:24px; }

.trust { max-width:940px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); border-top:none; }
.tc { padding:13px 14px; text-align:center; display:flex; align-items:center; justify-content:center; gap:7px; border-right:1px solid var(--border); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--light); transition:color .25s, background .25s; }
.tc:last-child { border-right:none; }
.tc:hover { color:var(--dark); background:var(--card); }
.tc svg { width:12px; height:12px; stroke:var(--grad-b); fill:none; stroke-width:2; flex-shrink:0; }

/* ══ GIFTS ════════════════════════════ */
.gifts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-bottom:2px; }
.gift-card { background:var(--white); padding:36px 28px; text-align:center; border:1px solid var(--border); position:relative; overflow:hidden; transition:background .28s; }
.gift-card:hover { background:var(--card); }
.gift-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); transform:scaleX(0); transition:transform .4s; }
.gift-card:hover::before { transform:scaleX(1); }
.gi-photo { width:72px; height:72px; border-radius:50%; margin:0 auto 18px; }
.gi-val  { display:inline-block; font-family:var(--fh); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; background:var(--grad); color:var(--white); padding:4px 12px; margin-bottom:12px; }
.gi-name { font-family:var(--fh); font-size:19px; font-weight:800; text-transform:uppercase; color:var(--dark); margin-bottom:8px; }
.gi-desc { font-size:13px; line-height:1.75; color:var(--body); }
.gi-free { font-size:12px; font-weight:700; color:var(--grad-b); margin-top:12px; display:flex; align-items:center; justify-content:center; gap:8px; }
.gi-free::before,.gi-free::after { content:''; flex:1; height:1px; background:color-mix(in srgb, var(--grad-b) 20%, transparent); max-width:36px; }
.gifts-total { background:var(--card); border:1px solid var(--border); padding:18px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.gt-l { font-size:14px; color:var(--body); }
.gt-l strong { color:var(--dark); font-weight:700; }
.gt-r { font-family:var(--fh); font-size:28px; font-weight:900; color:var(--green); }
.gt-r span { font-size:14px; font-weight:400; color:var(--light); text-decoration:line-through; margin-right:8px; font-family:var(--fb); }

/* ══ UPSELLS ══════════════════════════ */
.up-grid { display:grid; grid-template-columns:1fr; gap:2px; }
.up-card { background:var(--white); border:1px solid var(--border); border-bottom:none; display:grid; grid-template-columns:100px 1fr auto; align-items:center; transition:background .28s; }
.up-grid { gap:0; }
.up-card:last-child { border-bottom:1px solid var(--border); }
.up-card:hover { background:var(--card); }
.up-img { height:110px; overflow:hidden; border-right:1px solid var(--border); }
.up-img .photo-slot { width:100%; height:100%; border:none; background:var(--card); }
.up-body { padding:18px; }
.up-name  { font-family:var(--fh); font-size:17px; font-weight:800; text-transform:uppercase; color:var(--dark); margin-bottom:4px; }
.up-desc  { font-size:12px; color:var(--body); line-height:1.65; margin-bottom:6px; }
.up-price { font-family:var(--fh); font-size:18px; font-weight:800; color:var(--price); }
.up-action { padding:0 18px; border-left:1px solid var(--border); display:flex; align-items:center; }
.up-btn { padding:9px 16px; background:var(--grad); color:var(--white); border:none; font-family:var(--fh); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:opacity .25s; white-space:nowrap; }
.up-btn:hover { opacity:.85; }

/* ══ GUARANTEE ════════════════════════ */
.guar-inner { max-width:680px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:28px; background:var(--dark); border:none; padding:52px 48px; position:relative; overflow:hidden; }
.guar-inner .guar-title { color:var(--white); }
.guar-inner .guar-body  { color:rgba(255,255,255,.6); }
.guar-inner::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% -20%, color-mix(in srgb,var(--glow-b) 25%,transparent) 0%,transparent 65%),radial-gradient(ellipse at 20% 110%, color-mix(in srgb,var(--glow-a) 15%,transparent) 0%,transparent 55%); pointer-events:none; }
.guar-badge { width:108px; height:108px; border-radius:50%; border:none; background:rgba(255,255,255,.08); backdrop-filter:blur(8px); display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; margin:0 auto; box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 28px color-mix(in srgb,var(--glow-b) 40%,transparent),0 0 60px color-mix(in srgb,var(--glow-a) 20%,transparent); animation:gauranteeGlow 2.55s ease-in-out infinite; }
@keyframes gauranteeGlow { 0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 20px color-mix(in srgb,var(--glow-b) 30%,transparent),0 0 40px color-mix(in srgb,var(--glow-a) 15%,transparent);}50%{box-shadow:0 0 0 1.5px rgba(255,255,255,.25),0 0 36px color-mix(in srgb,var(--glow-b) 55%,transparent),0 0 70px color-mix(in srgb,var(--glow-a) 28%,transparent);}}
.gb-n { font-family:var(--fh); font-size:32px; font-weight:900; color:var(--white); line-height:1; }
.gb-l { font-size:9px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.guar-title { font-family:var(--fh); font-size:clamp(20px,2.6vw,30px); font-weight:900; text-transform:uppercase; color:var(--dark); margin-bottom:10px; line-height:1.15; }
.guar-body { font-size:14px; line-height:1.8; color:var(--body); }

/* ══ STICKY BAR ════════════════════════ */
#stickyBar {
  position:fixed; bottom:0; left:0; right:0; z-index:400;
  background:var(--white);
  border-top:3px solid transparent;
  border-image:var(--grad) 1;
  box-shadow:0 -6px 32px rgba(0,0,0,.14), 0 -1px 0 var(--border);
  transform:translateY(110%);
  transition:transform .42s cubic-bezier(.22,1,.36,1);
}
#stickyBar.show { transform:translateY(0); }
/* Ensure footer content is never hidden behind the sticky bar */
#footer { position:relative; z-index:410; padding-bottom:80px; }

.sticky-s0 { padding:8px 40px; display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.s0-l { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.s0-dot { width:7px; height:7px; border-radius:50%; background:var(--grad-a); animation:pulse 2s ease-in-out infinite; flex-shrink:0; }
.s0-name { font-size:14px; font-weight:600; color:var(--dark); }
.s0-prices { display:flex; align-items:baseline; gap:6px; }
.s0-orig { font-size:13px; color:var(--light); text-decoration:line-through; }
.s0-sale { font-family:var(--fh); font-size:24px; font-weight:900; color:var(--price); }
.s0-curr { font-size:10px; color:var(--light); font-weight:600; }
/* Button + shipping note grouped */
.s0-btn-wrap { display:flex; flex-direction:column; align-items:center; gap:5px; }
.s0-btn { background:var(--grad); color:var(--white); border:none; padding:12px 30px; font-family:var(--fh); font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:opacity .25s, transform .2s; white-space:nowrap; }
.s0-btn:hover { opacity:.88; transform:translateY(-1px); }
/* Shipping note — same colour as gradient start so it matches button */
.s0-ship-note { font-size:11px; font-weight:700; color:var(--grad-a); letter-spacing:.03em; text-align:center; white-space:nowrap; }

.sticky-s1 { display:none; }
.sticky-s1.active { display:block; }
.sticky-upsell { background:rgba(5,150,105,.07); border-bottom:1px solid rgba(5,150,105,.2); padding:8px 24px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.su-t { font-size:13px; color:var(--dark); display:flex; align-items:center; gap:6px; }
.su-t strong { color:#059669; font-weight:700; }
.su-badge { background:var(--grad-green); color:var(--white); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; flex-shrink:0; }
.su-btn { padding:8px 18px; background:var(--dark); color:var(--white); border:none; font-family:var(--fh); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; white-space:nowrap; transition:background .25s; flex-shrink:0; }
.su-btn:hover { background:#333; }
.sticky-checkout-row { padding:12px 40px; display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.sc-col .sc-label { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--light); margin-bottom:2px; }
.sc-prices { display:flex; align-items:baseline; gap:8px; }
.sc-orig { font-size:14px; color:var(--light); text-decoration:line-through; }
.sc-sale { font-family:var(--fh); font-size:26px; font-weight:900; color:var(--price); }
.sc-aud  { font-size:11px; color:var(--light); font-weight:600; }
.sc-btn-wrap { display:flex; flex-direction:column; align-items:center; gap:5px; }
.sc-btn { background:var(--grad); color:var(--white); border:none; padding:14px 40px; font-family:var(--fh); font-size:15px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; display:flex; align-items:center; gap:10px; transition:opacity .25s, transform .2s; white-space:nowrap; text-decoration:none; }
.sc-btn:hover { opacity:.88; transform:translateY(-1px); color:var(--white); }

/* ══ EXIT INTENT POPUP ════════════════════════
   Savings reveal — triggered on exit only
══════════════════════════════════════════════ */
.exit-wrap { position:fixed; inset:0; z-index:700; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .4s; }
.exit-wrap.on { opacity:1; pointer-events:all; }
.exit-modal { background:var(--white); max-width:720px; width:100%; display:grid; grid-template-columns:1fr 1fr; position:relative; overflow:hidden; box-shadow:0 32px 80px rgba(0,0,0,.22); transform:translateY(28px) scale(.97); transition:transform .45s cubic-bezier(.22,1,.36,1); }
.exit-wrap.on .exit-modal { transform:none; }
.exit-modal::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-green); z-index:1; }
.exit-close { position:absolute; top:12px; right:12px; z-index:2; background:rgba(0,0,0,.1); border:none; width:28px; height:28px; border-radius:50%; font-size:13px; cursor:pointer; transition:background .2s; }
.exit-close:hover { background:rgba(0,0,0,.2); }
.exit-left { background:var(--dark); padding:44px 32px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.exit-plane { font-size:48px; line-height:1; }
.exit-headline { font-family:var(--fh); font-size:clamp(24px,3.5vw,34px); font-weight:900; text-transform:uppercase; color:var(--white); line-height:1.1; }
.exit-sub { font-size:14px; color:rgba(255,255,255,.58); line-height:1.6; }
.exit-right { padding:32px 28px; display:flex; flex-direction:column; }
.exit-savings-label { font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--light); margin-bottom:14px; }
.exit-line { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); gap:10px; }
.exit-total-line { border-bottom:none; padding-top:12px; }
.el-label      { font-size:13px; color:var(--body); }
.el-label-bold { font-size:14px; font-weight:800; color:var(--dark); }
.el-val        { font-size:14px; font-weight:700; flex-shrink:0; }
.el-green      { color:#059669; }
.el-red        { color:#dc2626; }
.el-total      { font-family:var(--fh); font-size:28px; font-weight:900; color:#059669; }
.exit-divider  { height:2px; background:var(--grad-green); margin:4px 0; }
.exit-orig     { font-size:12px; color:var(--light); margin-top:10px; }
.exit-sale-price { font-family:var(--fh); font-size:24px; font-weight:900; color:var(--price); margin-bottom:14px; margin-top:4px; }
.exit-cta { display:block; text-align:center; padding:14px; background:var(--grad-green); color:var(--white); font-family:var(--fh); font-size:15px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; transition:opacity .25s, transform .2s; margin-bottom:8px; }
.exit-cta:hover { opacity:.88; transform:translateY(-1px); color:var(--white); }
.exit-skip { text-align:center; font-size:11px; color:var(--light); cursor:pointer; transition:color .2s; margin:0; }
.exit-skip:hover { color:var(--dark); }
@media(max-width:620px){ .exit-modal { grid-template-columns:1fr; } .exit-left { padding:24px; flex-direction:row; align-items:center; gap:12px; } .exit-plane { font-size:32px; } .exit-headline { font-size:20px; } .exit-right { padding:20px; } }

/* ══ PRE-FOOTER / FOOTER ══════════════ */
.pre-footer { padding:24px 0; background:var(--dark); overflow:hidden; }
.pre-footer-text { font-family:var(--fh); font-size:clamp(16px,2.5vw,28px); font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.15); white-space:nowrap; display:inline-block; padding:0 48px; }
.grad-divider { height:5px; background:var(--grad); }

footer { background:var(--dark); padding:48px 40px 32px; }
.footer-top { display:grid; grid-template-columns:1fr 1fr 1fr 1.6fr; gap:36px; margin-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:44px; }
.ft-col-title { font-family:var(--fh); font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--white); margin-bottom:5px; }
.ft-links { list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:10px; }
.ft-links a { font-size:13px; color:rgba(255,255,255,.48); text-decoration:none; transition:color .25s; }
.ft-links a:hover { color:var(--white); }
.ft-email-text { font-size:13px; color:rgba(255,255,255,.44); line-height:1.7; margin-bottom:12px; margin-top:10px; }
.ft-email-row { display:flex; border:1px solid rgba(255,255,255,.14); }
.ft-email-input { flex:1; padding:11px 14px; background:rgba(255,255,255,.05); border:none; color:var(--white); font-size:13px; outline:none; min-width:0; }
.ft-email-input::placeholder { color:rgba(255,255,255,.3); }
.ft-email-btn { padding:11px 16px; background:var(--grad); color:var(--white); border:none; font-family:var(--fh); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
.ft-socials { display:flex; gap:10px; margin-top:12px; }
.ft-soc { width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); font-size:12px; text-decoration:none; transition:all .25s; }
.ft-soc:hover { border-color:var(--white); color:var(--white); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.ft-badge { width:64px; height:64px; border-radius:50%; border:2px solid rgba(255,255,255,.2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex-shrink:0; }
.ft-ba { font-family:var(--fh); font-size:24px; font-weight:900; color:var(--white); line-height:1; }
.ft-bs { font-size:6px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.35); }
.ft-tagline { font-family:var(--fh); font-size:13px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.2); text-align:center; }
.ft-copy { font-size:11px; color:rgba(255,255,255,.2); text-align:center; }

/* Desktop checkout: table+total LEFT, payments RIGHT */
@media(min-width:769px){
  .co-modal { max-width:880px; }
  .co-body { display:grid; grid-template-columns:1fr 1fr; padding:0; }
  .co-body-left  { padding:28px 32px; border-right:1px solid var(--border); overflow-y:auto; }
  .co-body-right { padding:28px 32px; display:flex; flex-direction:column; }
}

/* ══ RESPONSIVE ════════════════════════
   Three breakpoints:
   960px — tablet
   640px — large mobile
   420px — small mobile
══════════════════════════════════════ */
/* ══ CHECKOUT MODAL ═══════════════════════════════ */
.co-wrap {
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,.65); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:16px; opacity:0; pointer-events:none; transition:opacity .35s;
}
.co-wrap.on { opacity:1; pointer-events:all; }
.co-modal {
  background:var(--white); width:100%; max-width:640px;
  max-height:92vh; overflow-y:auto;
  position:relative; box-shadow:0 32px 80px rgba(0,0,0,.25);
  transform:translateY(24px) scale(.97);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.co-wrap.on .co-modal { transform:none; }
.co-modal::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-green); z-index:1; }

.co-head {
  padding:20px 28px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--white); z-index:2;
}
.co-head::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-green); }
.co-title { font-family:var(--fh); font-size:20px; font-weight:900; text-transform:uppercase; color:var(--dark); }
.co-close { background:none; border:none; color:var(--light); font-size:20px; cursor:pointer; transition:color .2s; }
.co-close:hover { color:var(--dark); }

.co-body { padding:24px 28px; }

/* Express pay buttons */
.co-express { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.co-pay-btn {
  padding:14px 16px; border:1.5px solid var(--border);
  border-radius:4px; cursor:pointer; transition:all .25s;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:15px; background:var(--white);
}
.co-pay-btn.apple  { background:#000; color:#fff; border-color:#000; font-size:16px; }
.co-pay-btn.google { background:#fff; color:#444; border-color:#dadce0; }
.co-pay-btn.apple:hover  { background:#222; }
.co-pay-btn.google:hover { border-color:#aaa; }
.co-pay-btn.paypal { background:#ffc439; color:#003087; border-color:#ffc439; font-weight:800; }
.co-pay-btn.paypal:hover { background:#f0b620; }
.co-pay-btn.stripe { background:#635bff; color:#fff; border-color:#635bff; }
.co-pay-btn.stripe:hover { background:#5049e5; }
.co-pay-full { grid-column:1/-1; }

.co-divider {
  display:flex; align-items:center; gap:10px; margin:16px 0;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--light);
}
.co-divider::before,.co-divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* Card icons row */
.co-cards { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.co-card-icon {
  width:44px; height:28px; border:1px solid var(--border); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:var(--body); background:var(--card);
  letter-spacing:.04em;
}
.co-card-icon.visa   { color:#1a1f71; background:#f0f4ff; }
.co-card-icon.mc     { color:#eb001b; background:#fff; }
.co-card-icon.amex   { color:#007bc1; background:#f0f8ff; }
.co-card-icon.appay  { background:#000; color:#fff; font-size:9px; }
.co-card-icon.gpay   { color:#4285f4; }

/* Order summary table */
.co-section-lbl {
  font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--light); margin-bottom:12px; margin-top:20px;
}
.co-table { width:100%; border-collapse:collapse; margin-bottom:0; }
.co-table th {
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--light); text-align:left; padding:0 0 10px;
  border-bottom:1px solid var(--border);
}
.co-table th:last-child,.co-table td:last-child { text-align:right; }
.co-table td { padding:14px 0; border-bottom:1px solid var(--border); vertical-align:top; }
.co-item-cell { display:flex; align-items:center; gap:12px; }
.co-item-thumb {
  width:44px; height:44px; flex-shrink:0; border-radius:3px;
  overflow:hidden; background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.co-item-name { font-size:13px; font-weight:600; color:var(--dark); }
.co-item-sub  { font-size:11px; color:var(--light); margin-top:2px; }
.co-orig-price{ font-size:13px; color:var(--light); text-decoration:line-through; }
.co-disc-price{ font-size:14px; font-weight:700; color:var(--price); }

/* Promotions rows */
.co-promo-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--border); gap:10px;
}
.co-promo-label { font-size:13px; color:var(--body); display:flex; align-items:center; gap:8px; }
.co-promo-badge { font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:var(--grad-green); color:var(--white); padding:2px 8px; }
.co-promo-val { font-size:14px; font-weight:700; color:#dc2626; }

/* Total */
.co-total-row {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:16px 0 4px; gap:10px;
}
.co-total-label { font-family:var(--fh); font-size:18px; font-weight:800; text-transform:uppercase; color:var(--dark); }
.co-total-amount { font-family:var(--fh); font-size:32px; font-weight:900; color:var(--dark); }
.co-gst-note { font-size:11px; color:var(--light); margin-bottom:20px; }

/* Final checkout button */
.co-checkout-btn {
  width:100%; padding:18px; background:var(--grad-green); color:var(--white);
  border:none; font-family:var(--fh); font-size:18px; font-weight:900;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  transition:opacity .25s; display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:10px;
}
.co-checkout-btn:hover { opacity:.88; }
.co-trust-row {
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-size:11px; color:var(--light); flex-wrap:wrap; padding-bottom:8px;
}

/* ══ PAGE POPUP MODAL (Warranty, Our Team, Returns, T&C, etc.) ════ */
.page-popup-wrap {
  position:fixed; inset:0; z-index:850;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.page-popup-wrap.on { opacity:1; pointer-events:all; }
.page-popup {
  background:var(--white); width:100%; max-width:680px; max-height:88vh;
  overflow-y:auto; position:relative;
  box-shadow:0 24px 64px rgba(0,0,0,.2);
  transform:translateY(24px) scale(.97);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.page-popup-wrap.on .page-popup { transform:none; }
.page-popup::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad); }
.pp-head {
  padding:22px 32px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--white); z-index:2;
}
.pp-head::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad); }
.pp-title { font-family:var(--fh); font-size:24px; font-weight:900; text-transform:uppercase; color:var(--dark); }
.pp-close { background:none; border:none; color:var(--light); font-size:20px; cursor:pointer; transition:color .2s; }
.pp-close:hover { color:var(--dark); }
.pp-body { padding:32px; font-size:15px; color:var(--body); line-height:1.85; }
.pp-body h3 { font-family:var(--fh); font-size:18px; font-weight:800; text-transform:uppercase; color:var(--dark); margin:24px 0 8px; }
.pp-body h3:first-child { margin-top:0; }
.pp-body p { margin-bottom:14px; }
.pp-body ul { margin:0 0 14px 20px; }
.pp-body li { margin-bottom:6px; }

/* ── REVIEW FORM MODAL ──────────────────────── */
.review-modal-wrap { position:fixed; inset:0; z-index:700; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .4s; }
.review-modal-wrap.on { opacity:1; pointer-events:all; }
.review-modal { background:var(--white); border:1px solid var(--border); padding:44px 40px; max-width:520px; width:100%; position:relative; max-height:90vh; overflow-y:auto; box-shadow:0 24px 64px rgba(0,0,0,.18); transform:translateY(24px) scale(.97); transition:transform .45s cubic-bezier(.22,1,.36,1); }
.review-modal-wrap.on .review-modal { transform:none; }
.review-modal::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad); }
.rm-close { position:absolute; top:14px; right:16px; background:none; border:none; color:var(--light); font-size:20px; cursor:pointer; line-height:1; transition:color .2s; }
.rm-close:hover { color:var(--dark); }
.rm-tag  { font-size:10px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--grad-b); margin-bottom:12px; }
.rm-h    { font-family:var(--fh); font-size:30px; font-weight:900; text-transform:uppercase; color:var(--dark); line-height:1.1; margin-bottom:8px; }
.rm-p    { font-size:14px; color:var(--body); line-height:1.6; margin-bottom:20px; }
.rm-input, .rm-textarea { width:100%; padding:13px 16px; background:var(--card); border:1.5px solid var(--border); color:var(--dark); font-family:var(--fb); font-size:14px; outline:none; transition:border-color .25s; display:block; margin-bottom:12px; box-sizing:border-box; }
.rm-input::placeholder, .rm-textarea::placeholder { color:var(--light); }
.rm-input:focus, .rm-textarea:focus { border-color:var(--grad-b); }
.rm-textarea { resize:vertical; min-height:100px; line-height:1.6; }
/* Stars — CSS radio technique */
.rm-stars-label { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dark); margin-bottom:8px; display:block; margin-top:4px; }
.rm-stars { display:flex; align-items:center; gap:4px; margin-bottom:16px; flex-direction:row-reverse; justify-content:flex-end; }
.rm-stars input[type=radio] { display:none; }
.rm-stars label { font-size:30px; cursor:pointer; color:#ddd; transition:color .15s; line-height:1; }
.rm-stars label:hover,
.rm-stars label:hover ~ label,
.rm-stars input[type=radio]:checked ~ label { color:#f59e0b; }
/* Photo button */
.rm-file-wrap { margin-bottom:14px; }
.rm-file-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:12px 20px;
    border:2px solid var(--border); background:var(--card);
    color:var(--dark); font-family:var(--fh);
    font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    cursor:pointer; transition:all .25s;
}
.rm-file-btn:hover { border-color:var(--grad-b); background:var(--white); }
.rm-optional { font-size:10px; font-weight:400; color:var(--light); text-transform:none; letter-spacing:0; }
.rm-file-name { font-size:12px; color:#059669; font-weight:600; margin-top:6px; }
/* Themed submit button */
.rm-sub {
    width:100%; padding:16px;
    background:var(--grad); color:#ffffff !important; border:none;
    font-family:var(--fh); font-size:17px; font-weight:900;
    letter-spacing:.08em; text-transform:uppercase;
    cursor:pointer; transition:opacity .25s, transform .2s;
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
}
.rm-sub::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.15); transform:translateX(-110%) skewX(-12deg); transition:transform .5s ease; }
.rm-sub:hover::before { transform:translateX(110%) skewX(-12deg); }
.rm-sub:hover { opacity:.9; transform:translateY(-1px); }


/* ══ PREVIEW SECTION (ps-*) ══════════════════════
   Sliding card carousel with progress-bar tabs.
   Duration: 4050ms per slide (adjustable via --ps-dur)
══════════════════════════════════════════════════ */
:root { --ps-dur: 2600ms; }

/* ── SECTION ── */
/* Preview section — full-bleed dark background, contained track */
#previewSection, .preview-sec {
  background: var(--dark, #0e0e0e);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0 60px;
  width: 100%;
  /* Full-bleed: stretch to viewport edges regardless of parent padding */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
}
/* Inner container: headlines, tabs, CTA are contained to site max-width */
.ps {
  width: 100%;
  max-width: 1200px;
  padding: 0 40px;
  text-align: center;
}
.ps-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-bottom: 0;
  display: block;
  text-align: center;
}
.ps-kicker::before {
  display: none;
}
.ps-headline {
  font-family: var(--fh);
  font-size: clamp(42px, 5.5vw, 76px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.01em;
  margin-bottom: 52px;
  text-align: center;
}
.ps-headline em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--grad-a) 55%, transparent)) drop-shadow(0 0 36px color-mix(in srgb, var(--grad-b) 35%, transparent));
  /* animation removed */
}
@keyframes headlineGlow {
  0%,100% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--grad-a) 35%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--grad-b) 20%, transparent)); }
  50%      { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--grad-a) 55%, transparent)) drop-shadow(0 0 24px color-mix(in srgb, var(--grad-b) 35%, transparent)); }
}

/* ── TABS with fill-bar ── */
.ps-tabs {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 32px;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1px; /* ensures border shows */
}
.ps-tabs::-webkit-scrollbar { display: none; }
.ps-tab {
  position: relative;
  padding: 0 0 16px;
  margin-right: 36px;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .3s ease;
  /* Track: always-present dim base */
}
.ps-tab::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
}
/* Fill bar */
.ps-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0%;
  height: 5px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%);
  box-shadow: 0 0 10px var(--grad-a), 0 0 22px color-mix(in srgb, var(--grad-a) 45%, transparent);
}
.ps-tab.active { color: var(--white); }
.ps-tab.filling::after {
  width: 100%;
  transition: width var(--ps-dur) linear;
  animation: barPulse 1.2s ease-in-out infinite;
}
.ps-tab.filled::after  { width: 100%; animation: none; }
.ps-tab.resetting::after { width: 0%; transition: none; animation: none; }
@keyframes barPulse {
  0%,100% { box-shadow: 0 0 8px var(--grad-a), 0 0 20px color-mix(in srgb, var(--grad-a) 40%, transparent); opacity:1; }
  50%      { box-shadow: 0 0 16px var(--grad-a), 0 0 36px color-mix(in srgb, var(--grad-a) 70%, transparent); opacity:.85; }
}

/* ── CAROUSEL STAGE ── */
/* Full-bleed overflow so prev/next peek */
.ps-outer {
  width: calc(100% + 80px);
  margin-left: -40px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.ps-outer:active { cursor: grabbing; }

/* Two-column layout inside each ps-card */
.ps-left  {
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  text-align: left;
}
.ps-right {
  position: relative; height: 380px;
  border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}.ps-right .photo-slot {
  position: static;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  width: 100%; height: 100%; min-height: 280px;
  color: rgba(255,255,255,.3);
}

.ps-track {
  display: flex;
  gap: 20px;
  /* Initial padding shows prev card peeking at ~14% */
  padding-left: 20%;
  will-change: transform;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.ps-track.snap { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.ps-track.drag { transition: none; }

/* Card */
.ps-card {
  flex-shrink: 0;
  width: clamp(320px, 72vw, 900px);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  padding: 48px 44px;
  position: relative;
  /* Dim non-active cards */
  opacity: .3;
  transform: scale(.9) translateZ(0);
  filter: blur(1px);
  transition:
    opacity   .55s cubic-bezier(.22,1,.36,1),
    transform .55s cubic-bezier(.22,1,.36,1),
    filter    .55s ease;
}
.ps-card.active {
  opacity: 1;
  transform: scale(1) translateZ(0);
  filter: none;
}
.ps-card.adjacent {
  opacity: .55;
  transform: scale(.94) translateZ(0);
  filter: blur(.5px);
}
/* Top gradient bar on active */
.ps-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  opacity: 0;
  transition: opacity .5s ease;
}
.ps-card.active::before { opacity: 1; }

/* Card text */
.ps-title {
  font-family: var(--fh);
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.0;
  color: var(--white);
  margin-bottom: 14px;
  text-align: left;
}
.ps-tag {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55);
  margin-bottom: 18px;
  text-align: left;
  width: fit-content;
}
.ps-title span {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ps-body {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,.5);
  margin-bottom: 26px;
  text-align: left;
}
.ps-stats { display: flex; gap: 28px; justify-content: flex-start; }
.stat-n {
  font-family: var(--fh);
  font-size: 36px;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  margin-bottom: 3px;
}
.stat-l {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}

/* Card visual */
.ps-visual {
  position: relative;
  aspect-ratio: 9/11;
  overflow: hidden;
}
.ps-visual::before,
.ps-visual::after {
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  z-index: 2;
  opacity: .5;
}
.ps-visual::before { top:0;left:0; border-top:2px solid var(--grad-a); border-left:2px solid var(--grad-a); }
.ps-visual::after  { bottom:0;right:0; border-bottom:2px solid var(--grad-b); border-right:2px solid var(--grad-b); }

.ps-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.1);
  color: rgba(255,255,255,.18);
}
.ps-placeholder-icon  { font-size: 32px; }
.ps-placeholder-label { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

.ps-badge {
  position:absolute; bottom:14px; left:14px; z-index:3;
  background:rgba(0,0,0,.75); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);
  padding:9px 14px;
  display:flex; align-items:center; gap:10px;
}
/* Hide badge when the parent has no real image (only placeholder) */
.ps-right:not(:has(img)) .ps-badge { display: none; }
.pb-icon { font-size:16px; flex-shrink:0; }
.pb-main { font-size:12px; font-weight:600; color:rgba(255,255,255,.85); }
.pb-sub  { font-size:10px; color:rgba(255,255,255,.35); margin-top:1px; }

/* ── RESPONSIVE ── */
@media(max-width:880px){
  .ps { padding: 0 20px; }
  .ps-outer { width: calc(100% + 40px); margin-left: -20px; }
  .ps-card {
    width: clamp(280px, 82vw, 580px);
    display: flex; flex-direction: column;
    padding: 22px 18px; gap: 6px;
  }
  /* Flatten ps-left so its children become direct flex children of ps-card */
  .ps-left     { display: contents; }
  .ps-tag      { order: 1; margin-bottom: 2px; }
  .ps-title    { order: 2; margin-bottom: 4px; }
  .ps-body     { order: 3; margin-bottom: 6px; }
  .ps-stats    { order: 4; margin-bottom: 0; }
  .ps-right    { order: 5; height: auto; aspect-ratio: 1.1 / 1; margin-top: 10px; }
  .ps-cta      { order: 6; width: 100%; justify-content: center; text-align: center; margin-top: 10px; }
  .ps-track { padding-left: 12%; }
}
@media(max-width:520px){
  .ps-card { width: 82vw; }
  .ps-track { padding-left: 8%; }
  .ps-title { font-size: clamp(22px, 7vw, 34px); }
  .ps-body  { font-size: 14px; }
}


/* ── Preview card: inline CTA link ── */
.ps-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 14px 28px;
  background: var(--grad); color: var(--white);
  font-family: var(--fh); font-size: 16px;
  font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: opacity .25s, transform .2s;
  align-self: flex-start;
}
.ps-cta:hover { opacity: .88; transform: translateY(-2px); }

/* ── Preview card: stats ── */
.ps-stats {
  display: flex; gap: 24px; margin-top: 18px;
}
.ps-stat { display: flex; flex-direction: column; gap: 3px; }
.ps-stat-num {
  font-family: var(--fh); font-size: 28px;
  font-weight: 900; color: var(--white); line-height: 1;
}
.ps-stat-lbl {
  font-size: 9px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

/* ── Preview card: placeholder text (centred) ── */
.ps-right .photo-slot .ps-text {
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.3); text-align: center;
  line-height: 1.6;
}

/* ── ps-cta-wrap (legacy, keep for compat) ── */
.ps-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 44px;
  padding: 0 40px;
  width: 100%;
  max-width: 1200px;
}
.ps-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 48px;
  background: var(--grad);
  color: var(--white);
  font-family: var(--fh);
  font-size: 20px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: opacity .25s, transform .2s;
}
.ps-cta-btn::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,.15);
  transform: translateX(-110%) skewX(-12deg);
  transition: transform .5s ease;
}
.ps-cta-btn:hover::before { transform: translateX(110%) skewX(-12deg); }
.ps-cta-btn:hover { opacity: .9; transform: translateY(-2px); color: var(--white); }

/* ── REVIEW TEXT CARD ────────────────────────── */
.sp-text-card {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: linear-gradient(145deg, #08060f 0%, #120e22 100%);
  gap: 10px;
}
.sp-text-stars {
  color: #f59e0b;
  font-size: 16px;
  letter-spacing: 3px;
  flex-shrink: 0;
}
.sp-text-card p {
  font-family: var(--fb);
  font-size: 13px; line-height: 1.75;
  color: rgba(255,255,255,.9);
  text-align: center;
  font-style: italic;
  margin: 0;
}

/* ── COOKIE CONSENT BANNER ───────────────────── */
.cookie-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 44px;
  z-index: 1200;
  background: rgba(17,17,17,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: none; /* shown by JS via .visible class */
  align-items: center;
  justify-content: center;
  animation: slideDownIn .35s cubic-bezier(.22,1,.36,1);
}
.cookie-banner.visible { display: flex; }
@keyframes slideDownIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.cb-inner {
  max-width: 1200px; width: 100%; margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
}
.cb-text { font-size: 12px; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.cb-link { color: var(--grad-a); text-decoration: underline; cursor: pointer; }
.cb-link:hover { color: var(--white); }
.cb-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cb-decline {
  padding: 4px 12px; background: transparent;
  color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.15);
  font-family: var(--fh); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: all .25s;
}
.cb-decline:hover { border-color: rgba(255,255,255,.4); color: var(--white); }
.cb-accept {
  padding: 4px 14px; background: var(--grad); color: var(--white); border: none;
  font-family: var(--fh); font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: opacity .25s;
}
.cb-accept:hover { opacity: .88; }
@media(max-width:640px) {
  /* Keep text visible but shorter */
  .cb-text { font-size: 11px; white-space: normal; line-height: 1.3; max-width: 180px; }
  .cb-inner { justify-content: space-between; padding: 0 12px; gap: 8px; }
  .cb-actions { flex-shrink: 0; }
}
@media(max-width:360px) {
  .cb-text { display: none; } /* only hide on very small screens */
  .cb-inner { justify-content: flex-end; }
}
/* Free shipping note now lives in .s0-ship-note (State 0 only) */

/* ── POPUP ABOUT ME — side-by-side layout ─────── */
.pp-body-about {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.pp-body-about .pp-body-text { flex: 1; min-width: 0; }
.pp-about-photo {
  flex-shrink: 0;
  width: 180px;
}
.pp-about-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  object-fit: cover;
}
/* New: full-width photo at the bottom of About Me popup */
.pp-about-photo-bottom {
  margin-top: 28px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.pp-about-photo-bottom img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  display: block;
}
@media(max-width:560px) {
  .pp-body-about { flex-direction: column; }
  .pp-about-photo { width: 100%; max-width: 260px; margin: 0 auto; }
  .pp-about-photo-bottom img { max-height: 260px; }
}

/* Features — mobile: photo on top, text below */
@media(max-width:640px) {
  .feat-card { flex-direction: column-reverse; padding: 20px 18px; border-right:none !important; }
  .feat-card .fc-photo { width: 100%; height: 220px; }
  .feat-card .fc-body { width: 100%; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRODUCT UNIT — cushion (2/3) + pillow (1/3)
   Glowing card edge on the whole unit.
   Animated spinning shine on the pillow card edge.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.product-unit {
  display: grid;
  grid-template-columns: 2fr 1fr;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  /* Card-edge glow — important card treatment */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--glow-a) calc(var(--glow-int)*70%), transparent),
    0 0 22px color-mix(in srgb, var(--glow-a) calc(var(--glow-int)*28%), transparent),
    0 0 50px color-mix(in srgb, var(--glow-b) calc(var(--glow-int)*20%), transparent);
}

/* Cushion side */
.pc-main {
  background: rgba(255,255,255,.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  /* Subtle breathing glow on the cushion card edges */
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--glow-a) 30%, transparent);
  animation: cushionGlow 3s ease-in-out infinite;
}
@keyframes cushionGlow {
  0%,100% { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--glow-a) 20%, transparent), 0 0 12px color-mix(in srgb, var(--glow-a) 10%, transparent); }
  50%      { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--glow-a) 45%, transparent), 0 0 22px color-mix(in srgb, var(--glow-a) 18%, transparent); }
}
.pc-main-photo {
  height: 120px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pc-main-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.pc-main-name { font-family:var(--fh); font-size:18px; font-weight:900; text-transform:uppercase; color:var(--white); line-height:1.1; }
.pc-main-prices { display:flex; align-items:baseline; gap:6px; }
.pc-main-orig { font-size:12px; color:rgba(255,255,255,.3); text-decoration:line-through; }
.pc-main-sale { font-family:var(--fh); font-size:22px; font-weight:900; color:var(--white); }
.pc-main-curr { font-size:11px; color:rgba(255,255,255,.3); }
.pc-main-disc { font-size:10px; color:#86efac; font-weight:700; }
.pc-main-cta {
  background:var(--grad); color:var(--white); border:none;
  padding:12px 16px; font-family:var(--fh); font-size:13px;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; width:100%; transition:opacity .25s; margin-top:auto;
}
.pc-main-cta:hover { opacity:.88; }

/* Glowing animated seam between the two cards */
.product-unit::after {
  content:''; position:absolute;
  top:8%; bottom:8%; left:calc(66.666% - 1px); width:2px;
  background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb, var(--grad-a) 70%, transparent) 30%,color-mix(in srgb, var(--grad-b) 90%, transparent) 70%,transparent 100%);
  box-shadow:0 0 8px color-mix(in srgb, var(--grad-b) 60%, transparent),0 0 20px color-mix(in srgb, var(--grad-a) 35%, transparent);
  animation:seamGlow 3s ease-in-out infinite;
  pointer-events:none; z-index:3;
}
@keyframes seamGlow {
  0%,100% { opacity:.6; box-shadow:0 0 8px color-mix(in srgb, var(--grad-b) 50%, transparent),0 0 18px color-mix(in srgb, var(--grad-a) 30%, transparent); }
  50%      { opacity:1;  box-shadow:0 0 14px color-mix(in srgb, var(--grad-b) 85%, transparent),0 0 30px color-mix(in srgb, var(--grad-a) 55%, transparent); }
}

/* Pillow card — spinning shine on border */
.pc-pillow {
  background: color-mix(in srgb, var(--grad-b) 12%, #0a0a0a);
  padding: 16px 12px;
  display: flex; flex-direction:column; align-items:center;
  gap:8px; text-align:center;
  cursor:pointer; transition:background .25s, box-shadow .25s;
  position:relative; overflow:hidden;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--grad-b) 30%, transparent);
}
.pc-pillow:hover  {
  background: color-mix(in srgb, var(--grad-b) 20%, #0a0a0a);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--grad-b) 60%, transparent);
}
.pc-pillow.active {
  background: color-mix(in srgb, var(--grad-b) 26%, #0a0a0a);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--grad-b) 80%, transparent),
              0 0 20px color-mix(in srgb, var(--grad-b) 20%, transparent);
}

/* Gradient border glow — uses site gradient not hardcoded glow vars */
.pc-pillow::before {
  content:''; position:absolute; inset:-1px;
  background: var(--grad);
  z-index:0;
  animation: pillowBorderPulse 2.5s ease-in-out infinite;
}
@keyframes pillowBorderPulse {
  0%,100% { opacity:.35; }
  50%      { opacity:.7; }
}
.pc-pillow::after {
  content:''; position:absolute; inset:1.5px;
  background: color-mix(in srgb, var(--grad-b) 12%, #0a0a0a);
  z-index:1; transition:background .25s;
}
.pc-pillow:hover::after  { background: color-mix(in srgb, var(--grad-b) 20%, #0a0a0a); }
.pc-pillow.active::after { background: color-mix(in srgb, var(--grad-b) 26%, #0a0a0a); }
/* All pillow content above glow layers */
.pc-pillow > * { position:relative; z-index:2; }

.pc-pillow-tag  { font-size:8px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); padding-bottom:7px; border-bottom:1px solid color-mix(in srgb, var(--grad-b) 30%, transparent); width:100%; }
.pc-pillow-photo{ width:56px; height:56px; border-radius:50%; background:color-mix(in srgb, var(--grad-b) 20%, transparent); border:1px solid color-mix(in srgb, var(--grad-b) 35%, transparent); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pc-pillow-photo img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.pc-pillow-name { font-family:var(--fh); font-size:13px; font-weight:800; text-transform:uppercase; color:var(--white); line-height:1.1; }
.pc-pillow-offer{ font-size:10px; color:rgba(255,255,255,.55); line-height:1.5; }
.pc-pillow-price-row { display:flex; align-items:baseline; gap:4px; justify-content:center; }
.pc-pillow-sale { font-family:var(--fh); font-size:15px; font-weight:900; color:var(--white); }
.pc-pillow-orig { font-size:10px; color:rgba(255,255,255,.3); text-decoration:line-through; }
.pc-pillow-toggle {
  width:100%; padding:8px 6px;
  background:color-mix(in srgb, var(--grad-b) 25%, transparent); border:1.5px solid color-mix(in srgb, var(--grad-b) 50%, transparent);
  color:var(--white); font-family:var(--fh); font-size:10px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:all .25s;
  margin-top:auto;
}
.pc-pillow-toggle:hover { background:color-mix(in srgb, var(--grad-b) 45%, transparent); }
.pc-pillow.active .pc-pillow-toggle { background:color-mix(in srgb, var(--grad-b) 70%, transparent); border-color:color-mix(in srgb, var(--grad-b) 50%, transparent); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PACK SELECTOR — new 2/3+1/3 card unit
   Same spinning glow on pillow side (light bg version).
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pack-card-unit {
  display: grid; grid-template-columns: 2fr 1fr;
  overflow: hidden; position: relative;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--grad-a) 30%, transparent),
    0 0 28px color-mix(in srgb, var(--grad-a) 12%, transparent),
    0 0 56px color-mix(in srgb, var(--grad-b) 8%, transparent);
}
.pack-card-unit::after {
  content:''; position:absolute;
  top:8%; bottom:8%; left:calc(66.666% - 1px); width:2px;
  background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb, var(--grad-a) 60%, transparent) 30%,color-mix(in srgb, var(--grad-b) 80%, transparent) 70%,transparent 100%);
  box-shadow:0 0 10px color-mix(in srgb, var(--grad-b) 50%, transparent),0 0 22px color-mix(in srgb, var(--grad-a) 30%, transparent);
  animation:seamGlow 3s ease-in-out infinite;
  pointer-events:none; z-index:2;
}
.pcu-main {
  background:rgba(255,255,255,.04);
  display:grid;
  grid-template-columns:220px 1fr;
  align-items:stretch;
}
.pcu-photo {
  background:#000;
  border-right:1px solid var(--border);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  min-height:220px;
}
.pcu-photo img {
  width:100%; height:100%;
  min-height:220px;
  object-fit:cover; display:block;
  position:absolute; inset:0;
}
.pcu-photo .photo-slot { width:100%; height:100%; min-height:220px; border:none; border-radius:0; }
.pcu-info  { padding:24px 22px; display:flex; flex-direction:column; gap:6px; }
.pcu-name  { font-family:var(--fh); font-size:26px; font-weight:900; text-transform:uppercase; color:var(--white); }
.pcu-tagline { font-size:13px; color:rgba(255,255,255,.5); }
.pcu-prices  { display:flex; align-items:baseline; gap:8px; margin-top:4px; }
.pcu-sale    { font-family:var(--fh); font-size:30px; font-weight:900; color:#ffffff; }
.pcu-orig    { font-size:14px; color:rgba(255,255,255,.3); text-decoration:line-through; }
.pcu-curr    { font-size:12px; color:rgba(255,255,255,.4); }
.pcu-saving  { font-size:12px; color:#86efac; font-weight:700; }
.pcu-cta {
  margin-top:14px; display:inline-flex; align-items:center; gap:8px;
  background:var(--grad); color:var(--white); border:none;
  padding:13px 22px; font-family:var(--fh); font-size:14px;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; transition:opacity .25s; align-self:flex-start;
}
.pcu-cta:hover { opacity:.88; }

/* Pillow side of pack card — light bg, spinning glow */
.pcu-pillow {
  background:color-mix(in srgb, var(--grad-b) 4%, transparent);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; text-align:center;
  padding:20px 14px; cursor:pointer; transition:background .25s;
  position:relative; overflow:hidden;
}
.pcu-pillow:hover  { background:color-mix(in srgb, var(--grad-b) 8%, transparent); }
.pcu-pillow.active { background:color-mix(in srgb, var(--grad-b) 11%, transparent); }
.pcu-pillow::before {
  content:''; position:absolute; inset:-2px;
  background:conic-gradient(
    from var(--spin-angle,0deg),
    transparent 0%,
    color-mix(in srgb, var(--grad-b) 0%, transparent) 15%,
    var(--grad-b) 38%,
    color-mix(in srgb, var(--grad-a) 65%, transparent) 50%,
    var(--grad-b) 62%,
    color-mix(in srgb, var(--grad-b) 0%, transparent) 85%,
    transparent 100%
  );
  animation:spinGlow 3.5s linear infinite; z-index:0;
}
.pcu-pillow::after  { content:''; position:absolute; inset:2px; background:color-mix(in srgb, var(--grad-b) 6%, #080808); z-index:1; transition:background .25s; }
.pcu-pillow:hover::after  { background:color-mix(in srgb, var(--grad-b) 12%, #080808); }
.pcu-pillow.active::after { background:color-mix(in srgb, var(--grad-b) 18%, #080808); }
.pcu-pillow > * { position:relative; z-index:2; }
.pcu-pillow-label  { font-size:8px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--grad-b); padding-bottom:8px; border-bottom:1px solid color-mix(in srgb, var(--grad-b) 12%, transparent); width:100%; }
.pcu-pillow-img    { width:68px; height:68px; border-radius:50%; background:color-mix(in srgb, var(--grad-b) 8%, transparent); border:1px dashed color-mix(in srgb, var(--grad-b) 30%, transparent); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pcu-pillow-img img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.pcu-pillow-name   { font-family:var(--fh); font-size:14px; font-weight:800; text-transform:uppercase; color:var(--white); }
.pcu-pillow-offer  { font-size:11px; color:rgba(255,255,255,.55); font-weight:600; line-height:1.5; }
.pcu-pillow-prices { display:flex; align-items:baseline; gap:5px; }
.pcu-pillow-sale   { font-family:var(--fh); font-size:18px; font-weight:900; color:var(--white); }
.pcu-pillow-orig   { font-size:11px; color:rgba(255,255,255,.3); text-decoration:line-through; }
.pcu-pillow-curr   { font-size:10px; color:rgba(255,255,255,.3); }
.pcu-pillow-toggle {
  width:100%; padding:9px 6px;
  background:color-mix(in srgb, var(--grad-b) 15%, transparent); border:1.5px solid color-mix(in srgb, var(--grad-b) 45%, transparent);
  color:rgba(196,181,253,.9); font-family:var(--fh); font-size:10px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:all .25s; margin-top:4px;
}
.pcu-pillow-toggle:hover { background:color-mix(in srgb, var(--grad-b) 16%, transparent); border-color:var(--grad-b); }
.pcu-pillow.active .pcu-pillow-toggle { background:var(--grad-b); border-color:var(--grad-b); color:var(--white); }

/* Pack trust row */
.pack-trust { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(255,255,255,.08); border-top:none; max-width:940px; margin:0 auto; }
.pack-trust .tc { padding:13px 14px; text-align:center; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--light); border-right:1px solid var(--border); }
.pack-trust .tc:last-child { border-right:none; }

/* ── CART: 10% discount badge ──────────────────── */
.cp-discount-badge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(5,150,105,.08), rgba(13,148,136,.06));
  border: 1px solid rgba(5,150,105,.3);
  margin-bottom: 4px;
}
.cdb-icon { font-size:16px; flex-shrink:0; }
.cdb-text { font-size:11px; line-height:1.5; color:var(--dark); }
.cdb-text strong { color:var(--green); }

/* ── STICKY BAR: updated selectors ─────────────── */
.s0-left  { display:flex; align-items:center; gap:12px; }
.s0-name  { font-size:14px; font-weight:600; color:var(--dark); }
.s0-prices{ display:flex; align-items:baseline; gap:6px; }
.s0-orig  { font-size:12px; color:var(--light); text-decoration:line-through; }
.s0-sale  { font-family:var(--fh); font-size:22px; font-weight:900; color:var(--price); }
.s0-aud   { font-size:11px; color:var(--light); }

/* ── SCROLL POPUP SAVINGS ───────────────────────── */
.exit-savings { background:var(--card); padding:14px 16px; margin-bottom:16px; border:1px solid var(--border); }
.exit-savings-lbl { font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--light); margin-bottom:8px; }
.es-row { display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; color:var(--body); }
.es-val { font-weight:700; color:var(--green); }
.es-total-row { display:flex; justify-content:space-between; align-items:center; padding-top:8px; border-top:1px solid var(--border); }
.es-total-lbl { font-family:var(--fh); font-size:16px; font-weight:900; text-transform:uppercase; color:var(--dark); }
.es-total-val { font-family:var(--fh); font-size:22px; font-weight:900; color:var(--green); }
.exit-cta { display:block; width:100%; padding:15px; background:var(--grad); color:var(--white); border:none; font-family:var(--fh); font-size:15px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; margin-bottom:10px; position:relative; overflow:hidden; transition:opacity .25s; }
.exit-cta::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.15); transform:translateX(-110%) skewX(-12deg); transition:transform .5s ease; }
.exit-cta:hover::before { transform:translateX(110%) skewX(-12deg); }
.exit-cta:hover { opacity:.9; }
.exit-headline { font-family:var(--fh); font-size:clamp(28px,4vw,42px); font-weight:900; text-transform:uppercase; line-height:1.0; margin-bottom:18px; color:var(--dark); }
.exit-product { display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center; padding:14px; margin-bottom:16px; background:color-mix(in srgb, var(--grad-b) 4%, transparent); box-shadow:0 0 0 1.5px color-mix(in srgb, var(--grad-b) 25%, transparent),0 0 14px color-mix(in srgb, var(--grad-b) 8%, transparent); }
.ep-img { height:72px; background:color-mix(in srgb, var(--grad-b) 8%, transparent); border:1px dashed color-mix(in srgb, var(--grad-b) 25%, transparent); display:flex; align-items:center; justify-content:center; font-size:26px; overflow:hidden; }
.ep-img img { width:100%; height:100%; object-fit:cover; }
.ep-name { font-family:var(--fh); font-size:17px; font-weight:900; text-transform:uppercase; margin-bottom:3px; }
.ep-offer { font-size:12px; font-weight:700; color:var(--grad-b); margin-bottom:6px; }
.ep-price-row { display:flex; align-items:baseline; gap:6px; }
.ep-sale { font-family:var(--fh); font-size:19px; font-weight:900; color:var(--price); }
.ep-orig { font-size:11px; color:var(--light); text-decoration:line-through; }
.ep-curr { font-size:10px; color:var(--light); }

.fc-text { font-size:14px; line-height:1.7; color:var(--body); }

.pack-trust-dark { background:rgba(255,255,255,.06); }
.pack-trust-dark .tc { color:rgba(255,255,255,.5); border-right-color:rgba(255,255,255,.1); }

@media(max-width:640px){
  .pack-card-unit { grid-template-columns:1fr; }
  .pack-card-unit::after { display:none; }
  .pcu-main { grid-template-columns:1fr; align-items:center; }
  .pcu-photo { width:100%; height:220px; border-right:none; border-bottom:1px solid var(--border); }

  .pcu-pillow { flex-direction:row; flex-wrap:wrap; justify-content:flex-start; text-align:left; padding:14px; gap:8px; }
  .pcu-pillow-label { border-bottom:none; padding-bottom:0; width:100%; }
  .pcu-pillow::before,.pcu-pillow::after { display:none; }
  .pcu-pillow > * { position:static; }
}

/* ── CART: pillow upsell row ───────────────────── */
.cp-upsell-pillow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px;
  border: 1.5px solid color-mix(in srgb, var(--grad-b) 20%, transparent); background: color-mix(in srgb, var(--grad-b) 3%, transparent);
  margin-bottom: 6px;
}
.cp-upsell-pillow .cpup-left { display:flex; align-items:center; gap:10px; }
.cpup-icon  { font-size:20px; flex-shrink:0; }
.cpup-name  { font-size:13px; font-weight:700; color:var(--dark); }
.cpup-sub   { font-size:11px; color:var(--grad-b); font-weight:600; }
.cpup-btn   { background:var(--grad-b); color:var(--white); border:none; padding:8px 16px; font-family:var(--fh); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; flex-shrink:0; transition:background .2s; }
.cpup-btn:hover { background:var(--grad-a); }

/* ── CART: quantity controls ─────────────────── */
.cp-item-qty-wrap { display:flex; align-items:center; gap:6px; }
.cp-qty-btn { width:22px; height:22px; background:var(--card); border:1px solid var(--border); color:var(--dark); font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; line-height:1; }
.cp-qty-btn:hover { background:var(--dark); color:var(--white); border-color:var(--dark); }
.cp-qty-num { font-size:13px; font-weight:700; min-width:18px; text-align:center; }

/* ── CART: email discount ──────────────────────── */
.cp-email-discount {
  padding: 12px; background: #fffbeb;
  border: 1px solid #fde68a; margin-bottom: 6px;
}
.ced-label { font-size:11px; font-weight:700; color:var(--dark); margin-bottom:8px; }
.ced-row { display:flex; gap:6px; }
.ced-input { flex:1; padding:9px 12px; border:1.5px solid var(--border); background:var(--white); font-size:13px; outline:none; min-width:0; }
.ced-input:focus { border-color:var(--grad-b); }
.ced-btn { background:var(--grad); color:var(--white); border:none; padding:9px 14px; font-family:var(--fh); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; white-space:nowrap; transition:opacity .25s; flex-shrink:0; }
.ced-btn:hover { opacity:.88; }
.ced-applied { font-size:12px; color:var(--green); font-weight:700; margin-top:6px; }

/* ── CART: savings + final note ─────────────────── */
.cp-savings-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:13px; }
.cp-savings-lbl { color:var(--green); font-weight:600; }
.cp-savings-val { font-size:12px; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:700; }
.cp-final-note { font-size:11px; color:var(--light); text-align:center; margin-bottom:6px; }

/* ── POPUP: email capture ───────────────────────── */
.exit-email-wrap { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.exit-email-input { flex:1; min-width:180px; padding:13px 16px; border:1.5px solid var(--border); background:var(--card); color:var(--dark); font-size:14px; outline:none; transition:border-color .25s; }
.exit-email-input:focus { border-color:var(--grad-b); }
.exit-email-btn { background:var(--grad); color:var(--white); border:none; padding:13px 18px; font-family:var(--fh); font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; white-space:nowrap; transition:opacity .25s; flex-shrink:0; }
.exit-email-btn:hover { opacity:.88; }
.exit-email-applied { font-size:13px; color:var(--green); font-weight:700; background:rgba(5,150,69,.06); border:1px solid rgba(5,150,69,.2); padding:10px 14px; }

/* ── PRICE MATCH CARD ────────────────────────────── */
.price-match-card {
  background: rgba(255,255,255,.08);
  border: 1.5px dashed rgba(255,255,255,.2);
  padding: 20px 18px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 10px;
  cursor: pointer; transition: all .25s;
  position: relative;
}
.price-match-card:hover { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.4); }
.pm-icon  { font-size:28px; }
.pm-title { font-family:var(--fh); font-size:16px; font-weight:900; text-transform:uppercase; color:var(--white); line-height:1.2; }
.pm-sub   { font-size:11px; color:rgba(255,255,255,.55); line-height:1.5; }
.pm-cta   { font-family:var(--fh); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(196,181,253,.8); border-bottom:1px solid rgba(196,181,253,.4); cursor:pointer; }

/* Price match modal */
.pm-modal-wrap { position:fixed;inset:0;z-index:1050;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .35s; }
.pm-modal-wrap.on { opacity:1;pointer-events:all; }
.pm-modal { background:var(--white);max-width:420px;width:100%;position:relative;overflow:hidden; }
.pm-modal::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad); }
.pm-modal-head { display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border); }
.pm-modal-title { font-family:var(--fh);font-size:20px;font-weight:900;text-transform:uppercase; }
.pm-modal-close { background:none;border:none;font-size:22px;color:var(--light);cursor:pointer; }
.pm-modal-body { padding:18px 20px; }
.pm-field { margin-bottom:10px; }
.pm-field label { display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dark);margin-bottom:4px; }
.pm-field input { width:100%;padding:9px 12px;background:var(--card);border:1.5px solid var(--border);font-size:14px;outline:none;color:var(--dark);transition:border-color .25s; }
.pm-field input:focus { border-color:var(--grad-b); }
.pm-submit { width:100%;padding:11px;background:var(--grad);color:var(--white);border:none;font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:opacity .25s;margin-top:4px; }
.pm-submit:hover { opacity:.88; }
.pm-result { padding:16px;margin-top:14px;display:none; }
.pm-result.accepted { background:#d1fae5;border:1px solid #6ee7b7;color:#065f46; }
.pm-result.review   { background:#dbeafe;border:1px solid #93c5fd;color:#1d4ed8; }
.pm-result-title { font-family:var(--fh);font-size:18px;font-weight:900;text-transform:uppercase;margin-bottom:6px; }
.pm-result-body  { font-size:13px;line-height:1.6; }

@media(max-width:640px){
  .product-unit { grid-template-columns:1fr; }
  .product-unit::after { display:none; }
  .pc-pillow { border-left:none; border-top:1px solid color-mix(in srgb, var(--grad-b) 20%, transparent); }
  .exit-email-wrap { flex-direction:column; }
  .exit-email-btn { width:100%; text-align:center; }
  .ced-row { flex-direction:column; }
}

/* ── REVIEW VIDEO: sound badge (top-right) ─────── */
.sp-sound-badge {
  position: absolute;
  z-index: 4;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.25);
  color: var(--white);
  font-size: 18px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background .2s, transform .15s;
  user-select: none;
}
/* Centre version — for review videos */
.sp-sound-centre {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.sp-sound-centre:hover { background:rgba(0,0,0,.8); transform: translate(-50%,-50%) scale(1.1); }
.sp-sound-centre.unmuted { background: color-mix(in srgb, var(--grad-b) 75%, transparent); border-color:rgba(255,255,255,.4); }

/* Review media aspect ratio set on .sp-media base rule above */

/* ── PREVIEW SECTION: remove text glow ──────────── */
.ps-headline em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* NO glow — clean gradient only */
  filter: none;
  animation: none;
}
.ps-headline { color: var(--white); }

/* ── GUARANTEE BAND (full-width stripe inside pack section) ── */
.guar-band {
  width: 100%;
  background: #000000 !important;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 36px 40px;
  position: relative;
  /* No ::before — solid black only */
}
.guar-band-inner {
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}
.guar-badge-inline {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 24px color-mix(in srgb, var(--glow-b) 40%, transparent),
    0 0 50px color-mix(in srgb, var(--glow-a) 18%, transparent);
  animation: gauranteeGlow 2.55s ease-in-out infinite;
}
.guar-band-text { flex: 1; min-width: 200px; }
.guar-band .guar-title {
  font-family: var(--fh);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff !important;
  margin-bottom: 8px;
  line-height: 1.1;
}
.guar-band .guar-body {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  line-height: 1.7;
}
@media(max-width:640px) {
  .guar-band { padding: 28px 20px; }
  .guar-band-inner { gap: 20px; }
  .guar-badge-inline { width:72px; height:72px; }
  .guar-band .guar-title { font-size: 22px; }
}

/* ── ADD-REVIEW BUTTON (gradient, interactive) ────── */
.add-review-grad {
  background: var(--grad);
  color: var(--white) !important;
  border: none !important;
  padding: 14px 24px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s, box-shadow .3s;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--glow-b) 35%, transparent);
}
.add-review-grad::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.15);
  transform: translateX(-110%) skewX(-12deg);
  transition: transform .5s ease;
}
.add-review-grad:hover::before { transform: translateX(110%) skewX(-12deg); }
.add-review-grad:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--glow-b) 50%, transparent);
}
.add-review-grad:active { transform: translateY(0); }
.arb-main { font-family: var(--fh); font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.arb-gift {
  background: rgba(255,255,255,.25);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.arb-gift strong { font-size: 15px; }
.arb-arr { font-size: 18px; transition: transform .25s; }
.add-review-grad:hover .arb-arr { transform: translateX(4px); }

/* ── sp-media is-text — for text quote cards ──── */
.sp-media.is-text {
  background: #0d0b1a !important;
  position: relative;
}
.sp-media.is-text .sp-text-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 20px;
}

/* hero-inner-v9 responsive removed — stack is default on all screens */

/* ── GUARANTEE BAND: force black no matter what ── */
.guar-band,
.guar-band * { box-sizing: border-box; }
.guar-band {
  background: #000000 !important;
  color: #ffffff !important;
}
.guar-band .guar-title { color: #ffffff !important; font-weight:900; }
.guar-band .guar-body  { color: rgba(255,255,255,.65) !important; }
.guar-badge-inline .gb-n { color: #ffffff !important; }
.guar-badge-inline .gb-l { color: rgba(255,255,255,.5) !important; }

/* ── REVIEW TEXT CARDS: force dark ── */
.sp-media.is-text,
.sp-card.sp-text-review .sp-media {
  background: #08060f !important;
}
.sp-text-card,
.sp-text-card p {
  background: transparent !important;
  color: rgba(255,255,255,.9) !important;
}

/* ── HERO V9: always stacked — headline / video / purchase ── */
.hero-stack {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 52px 24px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}
.hero-head { width: 100%; text-align: center; margin-bottom: 32px; }
.hero-vid-wrap { width: 100%; margin-bottom: 28px; }
.hero-purchase { width: 100%; }

/* ── SECTION RESPONSIVE FIXES ────────────────────── */
@media(max-width:768px) {
  .social-header { padding: 0 20px 28px; }
  .social-track  { padding: 0 20px 0; }


  /* Pack: stack vertically */
  .pack-card-unit { grid-template-columns: 1fr; }
  .pack-card-unit::after { display: none; }
  .pcu-main { grid-template-columns: 160px 1fr; align-items:center; }
  .pcu-photo { width:160px; height:160px; }

  /* Upsells: stack photo + info vertically */
  .up-card { grid-template-columns: 96px 1fr auto; }
  .up-img   { width: 96px; }

  /* Trust row: 2 cols */
  .pack-trust, .pack-trust-dark { grid-template-columns: repeat(2,1fr); }
  .pack-trust .tc:nth-child(2), .pack-trust-dark .tc:nth-child(2) { border-right: none; }
  .pack-trust .tc:nth-child(3), .pack-trust-dark .tc:nth-child(3) { border-top: 1px solid rgba(255,255,255,.08); }

  /* Pre-footer padding */
  .pre-footer { padding: 20px 0; }
}

@media(max-width:480px) {
  /* Features full bleed photo on small mobile */
  .feat-card { padding: 18px 16px; gap: 14px; }
  .feat-card .fc-photo { width: 100%; height: 180px; }
  .feat-card { flex-direction: column-reverse; }

  /* Upsells: hide action col, make add btn full width */
  .up-card { grid-template-columns: 80px 1fr; }
  .up-action { display: none; }
  .up-body { padding: 14px; }
}

/* ── FAQ wider padding on mobile ── */
@media(max-width:640px) {
}

/* ══ FAQ ACCORDION ═══════════════════════════════════════════ */
.faq-list { max-width:720px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:first-child { border-top:1px solid var(--border); }
.faq-q {
  width:100%; display:flex; align-items:center;
  justify-content:space-between; gap:16px;
  padding:20px 0; background:none; border:none;
  cursor:pointer; font-family:var(--fb); font-size:16px;
  font-weight:600; color:var(--dark); text-align:left;
  transition:color .25s;
}
.faq-q:hover { color:var(--grad-b); }
.faq-arr { font-size:22px; color:var(--light); transition:transform .3s, color .25s; flex-shrink:0; }
.faq-item.open .faq-arr { transform:rotate(45deg); color:var(--grad-b); }
.faq-a {
  font-size:15px; line-height:1.85; color:var(--body);
  max-height:0; overflow:hidden;
  transition:max-height .4s ease, padding .3s ease;
  padding-bottom:0;
}
.faq-item.open .faq-a { max-height:300px; padding-bottom:20px; }
@media(max-width:640px){
  .faq-q { font-size:15px; padding:17px 0; }
  .faq-a { font-size:14px; }
}

/* ── PACK INNER CONTAINER ── */
.pack-inner {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 40px;
}
@media(max-width:768px) {
  .pack-inner { padding: 0 20px; }
}
@media(max-width:480px) {
  .pack-inner { padding: 0 16px; }
}

/* ── GUARANTEE BAND: solid black, white text, no bleed issues ── */
.guar-band {
  width: 100% !important;
  background: transparent !important;
  padding: 40px !important;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.guar-band-inner {
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.guar-band .guar-title,
.guar-band h3 { color: #ffffff !important; }
.guar-band .guar-body,
.guar-band p  { color: rgba(255,255,255,.65) !important; }
.guar-badge-inline .gb-n { color: #ffffff !important; }
.guar-badge-inline .gb-l { color: rgba(255,255,255,.45) !important; }

/* ── PACK SECTION: section header text white on dark ── */
.pack-section .sec-lbl  { color: rgba(255,255,255,.4); }
.pack-section .grad-bar { opacity: .8; }
.pack-section .sec-title { color: var(--white); }
.pack-section p { color: rgba(255,255,255,.6); }

/* ── UPSELLS: action button full-height alignment ── */
.up-action {
  padding: 16px 18px;
  display: flex;
  align-items: center;
}


/* Upsells mobile */
@media(max-width:640px){
  .up-card { grid-template-columns: 80px 1fr; grid-template-rows: auto auto; }
  .up-img  { width:80px; min-height:80px; grid-row: span 2; }
  .up-action { border-left:none; border-top:1px solid var(--border); padding:10px 14px; justify-content:flex-start; }
  .up-btn { width:100%; text-align:center; }
  .up-name { font-size:15px; }
  .up-desc { font-size:12px; }
}

/* ════════════════════════════════════════════════════
   GLOBAL MOBILE FIXES — comprehensive phone optimisation
   Targets ≤640px (phone) specifically
════════════════════════════════════════════════════ */
@media(max-width:640px) {

  /* ── Global spacing ── */
  .sec { padding: 52px 0; }
  .wrap { padding-left: 18px; padding-right: 18px; }

  /* ── Section headers ── */
  .sec-title { font-size: clamp(28px, 8vw, 40px); margin-bottom: 16px; }
  .sec-lbl   { font-size: 10px; }
  .grad-bar  { margin-bottom: 12px; }

  /* ── REVIEWS ── */
  .social-sec { padding: 48px 0 36px; }
  .social-header { padding: 0 18px 24px; gap: 12px; flex-direction: column; align-items: flex-start; }
  .add-review-grad { width: 100%; justify-content: center; }
  .social-scroll-outer::before,
  .social-scroll-outer::after { width: 30px; }

  /* ── PACK SELECTOR ── */
  .pack-card-unit { grid-template-columns: 1fr; }
  .pack-card-unit::after { display: none; }
  .pcu-main { grid-template-columns: 1fr; align-items:center; }
  .pcu-photo { width:100%; height:220px; border-right:none; border-bottom:1px solid var(--border); }

  .pcu-info { padding: 18px 16px; }
  .pcu-name { font-size: 22px; }
  .pcu-sale { font-size: 26px; }
  .pcu-cta { align-self: stretch; text-align: center; justify-content: center; }
  .pcu-pillow { padding: 16px; flex-direction: row; flex-wrap: wrap; text-align: left; }
  .pcu-pillow::before, .pcu-pillow::after { display: none; }
  .pcu-pillow > * { position: static; }
  .pcu-pillow-label { width: 100%; }
  .pack-trust { grid-template-columns: repeat(2,1fr); }
  .pack-trust .tc:nth-child(2), .pack-trust-dark .tc:nth-child(2) { border-right: none; }
  .pack-trust .tc:nth-child(3), .pack-trust-dark .tc:nth-child(3) { border-top: 1px solid rgba(255,255,255,.08); }
  .pack-inner { padding: 0 16px; }

  /* ── GUARANTEE BAND ── */
  .guar-band { padding: 28px 18px !important; }
  .guar-band-inner { gap: 18px; flex-wrap: wrap; }
  .guar-badge-inline { width: 70px; height: 70px; }
  .guar-band .guar-title { font-size: 20px; }


  /* ── TRAVELLER'S CHOICE ── */
  .up-card { grid-template-columns: 80px 1fr; }
  .up-img  { width: 80px; min-height: 80px; }
  .up-action { display: none; } /* hide separate action col */
  .up-body { padding: 14px 12px; }
  /* Add button inline on mobile */
  .up-name::after { content: ''; }

  /* ── FAQ ── */
  .faq-list { max-width: 100%; }
  .faq-q { font-size: 14px; padding: 16px 0; gap: 12px; }
  .faq-a { font-size: 13px; }

  /* ── CART PANEL ── */
  .cart-panel { width: 100%; max-width: 100%; }
  .cp-head { padding: 14px 16px; }
  .cp-body { padding: 12px 16px; }
  .cp-foot { padding: 12px 16px; }
  .ced-row { flex-direction: column; gap: 8px; }
  .ced-btn { width: 100%; }

  /* ── FOOTER ── */
  .footer-top { grid-template-columns: 1fr; gap: 28px; padding: 40px 18px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; }
  .ft-pay-icons { flex-wrap: wrap; gap: 4px; }

  /* ── PAGE POPUPS ── */
  .page-popup { max-height: 90vh; }
  .pp-body { padding: 16px; }
  .pm-modal { max-width: 100%; margin: 0 10px; }

  /* ── STICKY BAR ── */
  .sticky-s0 {
    padding: 10px 16px;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .s0-left { flex: 1; min-width: 0; }
  .s0-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .s0-sale { font-size: 18px; }
  .s0-btn-wrap { flex-shrink: 0; align-items: flex-end; }
  .s0-btn  { padding: 10px 16px; font-size: 12px; white-space: nowrap; }
  .s0-ship-note, .s0-trust { font-size: 9px; text-align: right; }

  /* ── NAV ── */
  #nav { padding: 0 16px; }
  .nav-pills { display: none; } /* hide pill links on mobile, hamburger only */
  .nav-wordmark { font-size: 18px; }

  /* ── PREVIEW SECTION ── */
  .ps { padding: 0 18px; }
  .ps-headline { font-size: clamp(26px, 7vw, 44px); margin-bottom: 28px; }
  .ps-card { padding: 24px 20px; }
  .ps-title { font-size: clamp(22px, 7vw, 34px); }
  .ps-body { font-size: 13px; }

  /* ── PRE-FOOTER ── */
  .pre-footer { padding: 16px 0; }
}

/* ── Tablet (641–900px): minor adjustments ── */
@media(min-width:641px) and (max-width:900px) {
  .wrap { padding-left: 28px; padding-right: 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .pack-card-unit { grid-template-columns: 1fr; }
  .pack-card-unit::after { display: none; }
  .pcu-main { grid-template-columns: 160px 1fr; align-items:center; }
  .pcu-photo { width:160px; height:160px; }
}

/* ── GUARANTEE BADGE: 90 in circle, text below ── */
.guar-badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.guar-badge-inline {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 24px color-mix(in srgb, var(--glow-b) 40%, transparent),
    0 0 50px color-mix(in srgb, var(--glow-a) 18%, transparent);
  animation: gauranteeGlow 2.55s ease-in-out infinite;
}
.guar-badge-inline .gb-n {
  font-family: var(--fh);
  font-size: 38px; font-weight: 900;
  color: #ffffff !important;
  line-height: 1;
}
.gb-under {
  font-size: 10px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  text-align: center;
}
/* Hide old gb-l inside the circle */
.guar-badge-inline .gb-l { display: none; }

/* ── PRE-FOOTER ── */
.pre-footer {
  background: var(--dark) !important;
  padding: 24px 0;
  overflow: hidden;
}
.pre-footer-text {
  font-family: var(--fh);
  font-size: clamp(16px, 2.5vw, 28px);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.18);
  white-space: nowrap;
  display: block;
  text-align: center;
}

/* ── CART: email promo in footer ─────────────────── */
.cp-email-promo {
  padding: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  margin-bottom: 8px;
}
.cep-label {
  font-size: 12px; font-weight: 700;
  color: var(--dark); margin-bottom: 8px;
}
.cep-row { display: flex; gap: 6px; }
.cep-row .ced-input { flex: 1; min-width: 0; }
.cp-email-applied {
  font-size: 12px; font-weight: 700;
  color: var(--green);
  background: rgba(5,150,69,.06);
  border: 1px solid rgba(5,150,69,.2);
  padding: 10px 12px;
  margin-bottom: 8px;
}
@media(max-width:640px){
  .cep-row { flex-direction: column; }
  .ced-btn { width: 100%; }
}

/* ── GLOBAL: ensure nothing bleeds to edges ─────── */
body { overflow-x: hidden; }
.hero-layout,
/* ── Base .wrap — constrains content width with breathing room ── */
.wrap {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}

.social-header,
.pack-inner,
.wrap,
.guar-band-inner,
.footer-top,
.footer-bottom,
.ps { box-sizing: border-box; }

/* ── GLOBAL: max content width with side padding ── */
@media(max-width:640px){
  .hero-sell, .hero-head, .hero-vid-mobile { max-width: 100%; }
  .product-unit { max-width: 100%; }
  .price-match-card { max-width: 100%; }
  section > .wrap { padding-left: 18px; padding-right: 18px; }
}

/* ── FEATURES: clean responsive — 3 col desktop, 1 col mobile ── */
@media(max-width:900px) {
  /* tablet: still 3 col but smaller */
  .feat-card .fc-content { padding: 16px 18px; }
}
@media(max-width:640px) {
  /* phone: 1 card per row, 3 rows total */
  .feat-grid { grid-template-columns: 1fr !important; }
  .feat-card { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  .feat-card:last-child { border-bottom: none !important; }
  .feat-card .fc-photo { aspect-ratio: 4/3; }
}

/* ── PAYMENT METHOD ICONS ─────────────────────── */
.ft-pay-icons { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
.fpi-svg { height:28px; width:auto; border-radius:4px; opacity:.8; }
.fpi-svg:hover { opacity:1; }

/* ── NAV MOBILE: remove About Me pill, fix drawer overflow ── */
@media(max-width:640px) {
  /* Hide all pill nav links — hamburger only on mobile */
  .nav-pills { display: none; }
  /* Drawer full-width, doesn't overflow */
  .nav-drawer {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 16px 20px 24px;
  }
  .nav-drawer a { font-size: 18px; padding: 10px 0; }
  /* Nav padding tighter on mobile */
  #nav { padding: 0 16px; }
  .nav-right { gap: 8px; }
}

/* ════════════════════════════════════════════════════
   CONVERSION UX ADDITIONS
════════════════════════════════════════════════════ */

/* ── Hero urgency line ── */
.hero-urgency {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  letter-spacing: .03em;
}
.hero-urgency strong { color: #fbbf24; }

/* ── Hero trust row — upgraded ── */
.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  flex-wrap: wrap;
}
.htr-stars { color: #f59e0b; letter-spacing: 2px; font-size: 13px; }
.htr-count { color: rgba(255,255,255,.7); font-weight: 700; }
.htr-badge { color: rgba(255,255,255,.55); }
.htr-divider { opacity: .25; }

/* ── Reviews: aggregate score bar ── */
.social-header { max-width:1200px; margin:0 auto; padding:0 40px 40px; }
.sh-left { flex: 1; }
.sh-agg {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  display: inline-flex;
}
.sh-agg-score {
  font-family: var(--fh);
  font-size: 40px; font-weight: 900;
  color: var(--dark); line-height: 1;
}
.sh-agg-stars { color: #f59e0b; font-size: 16px; letter-spacing: 2px; display: block; margin-bottom: 2px; }
.sh-agg-count { font-size: 12px; color: var(--light); font-weight: 600; }

/* ── Review avatars — initials style (no emoji) ── */
.sp-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--grad);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-size: 13px; font-weight: 900;
  color: var(--white);
}

/* ── Pack guarantee note ── */
.pcu-guarantee-note {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  margin-top: 8px;
  font-weight: 600;
}

/* ── Mid-page CTA bar ── */
.mid-cta-bar {
  background: var(--dark);
  padding: 40px 40px;
}
.mid-cta-inner {
  max-width: 940px; margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.mid-cta-headline {
  font-family: var(--fh);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 4px;
}
.mid-cta-sub {
  font-size: 14px;
  color: rgba(255,255,255,.5);
}
.mid-cta-btn {
  background: var(--grad);
  color: var(--white); border: none;
  padding: 16px 32px;
  font-family: var(--fh); font-size: 16px;
  font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: opacity .25s, transform .2s;
  flex-shrink: 0;
}
.mid-cta-btn:hover { opacity: .88; transform: translateY(-1px); }

@media(max-width:640px) {
  .mid-cta-bar { padding: 32px 18px; }
  .mid-cta-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .mid-cta-btn { width: 100%; text-align: center; }
  .sh-agg { display: flex; }
  .social-header { padding: 0 18px 24px; }
}

/* ── Sticky bar — add trust signal ── */
.s0-trust {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  text-align: center;
  margin-top: 3px;
  letter-spacing: .02em;
}

/* ── UPSELLS: upgraded buttons + pricing ── */
.up-btn-primary {
  background: var(--grad);
  color: var(--white); border: none;
  padding: 11px 20px;
  font-family: var(--fh); font-size: 13px;
  font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer; transition: opacity .25s;
  width: 100%;
}
.up-btn-primary:hover { opacity: .88; }
.up-btn-disabled {
  background: var(--card); color: var(--light);
  border: 1px solid var(--border);
  padding: 11px 20px; width: 100%;
  font-family: var(--fh); font-size: 13px;
  font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; cursor: not-allowed;
}
.up-card-soldout { opacity: .5; }
.up-soldout-tag {
  display: inline-block;
  font-size: 9px; background: #dc2626; color: #fff;
  padding: 2px 7px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; vertical-align: middle; margin-left: 4px;
}
.up-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.up-sale { font-family: var(--fh); font-size: 18px; font-weight: 900; color: var(--price); }
.up-orig { font-size: 12px; color: var(--light); text-decoration: line-through; }
.up-orig-through { text-decoration: line-through; }

/* Hero sound badge on mobile — show on vid-mobile frame */
#heroVideoFrameMobile .hero-sound-badge-mobile {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 10;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}

/* ── Hide About Me pill on mobile ── */
@media(max-width:640px) {
  .nav-link-hide-mobile { display: none !important; }
}

/* ── Reviews: CTA below carousel — mobile only ── */
.social-cta-mobile {
  display: none;
}
@media(max-width:640px) {
  .social-cta-mobile {
    display: flex;
    justify-content: center;
    padding: 20px 18px 0;
  }
  .social-cta-mobile .add-review-grad {
    width: 100%;
    justify-content: center;
  }
  /* Hide the top-right CTA in header on mobile (shown below instead) */
  .social-header .add-review-grad {
    display: none;
  }
}

/* ── FOOTER SOCIALS ──────────────────────────── */
.ft-socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.ft-social-link {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--light);
  text-decoration: none;
  transition: color .2s;
}
.ft-social-link:hover { color: var(--dark); }
.ft-social-link svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: .6;
  transition: opacity .2s;
}
.ft-social-link:hover svg { opacity: 1; }

/* ════════════════════════════════════════════════════
   BLOG — listing page + single post
════════════════════════════════════════════════════ */

/* ── Blog listing hero ── */
.blog-main { padding-top: var(--total-h); }
.blog-hero {
  background: var(--dark);
  padding: 64px 40px 60px;
  position: relative;
  overflow: hidden;
}
.blog-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 50%, color-mix(in srgb, var(--grad-b) 14%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 80%, color-mix(in srgb, var(--grad-a) 8%, transparent) 0%, transparent 50%);
  pointer-events: none;
}
.blog-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative; z-index: 1;
}
.blog-hero-kicker {
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
.blog-hero-title {
  font-family: var(--fh);
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .92; letter-spacing: -.02em;
  color: var(--white);
  margin-bottom: 16px;
}
.blog-hero-acc {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.blog-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,.5);
  max-width: 440px;
}

/* ── Blog grid ── */
.blog-grid-sec { padding: 60px 0 80px; }
.blog-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Blog card ── */
.blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform .28s, box-shadow .28s;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.1);
}
.blog-card-img-wrap {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--card);
}
.blog-card-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.blog-card:hover .blog-card-img { transform: scale(1.04); }
.blog-card-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #2a1a3e);
}
.blog-card-img-placeholder span {
  font-family: var(--fh);
  font-size: 28px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.15);
}
.blog-card-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.06) 100%);
  pointer-events: none;
}
.blog-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}
.blog-card-cat {
  font-size: 10px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--grad-b);
}
.blog-card-title {
  font-family: var(--fh);
  font-size: 22px; font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05; letter-spacing: -.01em;
  color: var(--dark);
}
.blog-card-title a {
  color: inherit; text-decoration: none;
  transition: color .2s;
}
.blog-card-title a:hover { color: var(--grad-b); }
.blog-card-excerpt {
  font-size: 13px;
  line-height: 1.7;
  color: var(--body);
  flex: 1;
}
.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.blog-card-date { font-size: 11px; color: var(--light); font-weight: 600; }
.blog-card-read {
  font-family: var(--fh);
  font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--grad-b); text-decoration: none;
  transition: letter-spacing .2s;
}
.blog-card:hover .blog-card-read { letter-spacing: .15em; }

/* ── Pagination ── */
.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 52px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.blog-pagination a {
  font-family: var(--fh);
  font-size: 14px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--dark); text-decoration: none;
  padding: 10px 20px;
  border: 1.5px solid var(--border);
  transition: all .2s;
}
.blog-pagination a:hover {
  border-color: var(--grad-b); color: var(--grad-b);
}

/* ── Empty state ── */
.blog-empty {
  text-align: center;
  padding: 80px 0;
}
.blog-empty-icon { font-size: 48px; margin-bottom: 20px; }
.blog-empty-title {
  font-family: var(--fh);
  font-size: 36px; font-weight: 900;
  text-transform: uppercase; color: var(--dark);
  margin-bottom: 10px;
}
.blog-empty-sub { font-size: 15px; color: var(--body); margin-bottom: 28px; }
.blog-empty-cta {
  display: inline-block;
  padding: 12px 24px;
  background: var(--grad);
  color: var(--white);
  font-family: var(--fh);
  font-size: 14px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  transition: opacity .25s;
}
.blog-empty-cta:hover { opacity: .88; }

/* ════════════════════════════════════════════════════
   SINGLE POST
════════════════════════════════════════════════════ */
.single-main { padding-top: var(--total-h); }

/* Post header */
.post-header {
  max-width: 740px;
  margin: 0 auto;
  padding: 52px 40px 32px;
  text-align: center;
}
.post-cat {
  font-size: 10px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--grad-b);
  margin-bottom: 14px;
  display: inline-block;
}
.post-title {
  font-family: var(--fh);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .95; letter-spacing: -.02em;
  color: var(--dark);
  margin-bottom: 20px;
}
.post-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--light);
  font-weight: 600;
  flex-wrap: wrap;
}
.post-meta-dot { opacity: .35; }

/* Featured image */
.post-featured-img {
  max-width: 940px;
  margin: 0 auto 48px;
  padding: 0 40px;
}
.post-feat-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* Post content */
.post-body-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 40px 64px;
}
.post-content {
  font-size: 17px;
  line-height: 1.85;
  color: #2d2d2d;
}
.post-content h2 {
  font-family: var(--fh);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--dark);
  margin: 44px 0 16px;
  line-height: 1.0;
}
.post-content h3 {
  font-family: var(--fh);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dark);
  margin: 32px 0 12px;
}
.post-content p { margin-bottom: 20px; }
.post-content a { color: var(--grad-b); text-decoration: underline; }
.post-content ul, .post-content ol { margin: 0 0 20px 24px; }
.post-content li { margin-bottom: 8px; }
.post-content img { max-width:100%; height:auto; display:block; margin:28px 0; }
.post-content blockquote {
  border-left: 3px solid var(--grad-a);
  margin: 28px 0;
  padding: 12px 0 12px 24px;
  font-style: italic;
  color: var(--body);
}
.post-content strong { color: var(--dark); font-weight: 700; }

/* Tags */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.post-tag {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dark); text-decoration: none;
  padding: 5px 12px;
  border: 1.5px solid var(--border);
  transition: all .2s;
}
.post-tag:hover { border-color: var(--grad-b); color: var(--grad-b); }

/* Back link */
.post-back { margin-top: 28px; }
.post-back-link {
  font-size: 13px; font-weight: 700;
  color: var(--light); text-decoration: none;
  transition: color .2s;
}
.post-back-link:hover { color: var(--dark); }

/* More posts strip */
.post-more-sec {
  background: var(--bg, #f4f4f0);
  padding: 52px 0;
  border-top: 1px solid var(--border);
}
.post-more-title {
  font-family: var(--fh);
  font-size: 13px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--light);
  margin-bottom: 24px;
}
.post-more-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}
.post-more-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  transition: opacity .25s;
}
.post-more-card:hover { opacity: .78; }
.post-more-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: var(--card);
}
.post-more-img-ph { background: linear-gradient(135deg, var(--dark), #2a1a3e); }
.post-more-name {
  font-family: var(--fh);
  font-size: 17px; font-weight: 900;
  text-transform: uppercase;
  color: var(--dark); line-height: 1.1;
}
.post-more-date { font-size: 11px; color: var(--light); font-weight: 600; }

/* ── Blog responsive ── */
@media(max-width:900px) {
  .blog-grid { grid-template-columns: repeat(2,1fr); }
  .post-more-grid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:640px) {
  .blog-hero { padding: 48px 18px 44px; }
  .blog-wrap  { padding: 0 18px; }
  .blog-grid  { grid-template-columns: 1fr; gap: 20px; }
  .blog-grid-sec { padding: 40px 0 60px; }
  .post-header { padding: 36px 18px 24px; }
  .post-featured-img { padding: 0 18px; }
  .post-body-wrap { padding: 0 18px 48px; }
  .post-content { font-size: 16px; }
  .post-more-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Cart price breakdown ── */
.cp-price-breakdown {
  padding: 10px 0 6px;
  border-top: 1px solid var(--border);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cp-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--body);
  padding: 2px 0;
}
.cp-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.cp-total-lbl {
  font-family: var(--fh);
  font-size: 14px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--dark);
}
.cp-total-amt {
  font-family: var(--fh);
  font-size: 20px; font-weight: 900;
  color: var(--dark);
}

/* ── Cart item image — no emoji fallback ── */
.cp-item-img { width:56px; height:56px; flex-shrink:0; overflow:hidden; background:var(--card); }
.cp-item-img img { width:100%; height:100%; object-fit:cover; display:block; }
.cp-item-img-ph { width:100%; height:100%; background:var(--card); }

/* ── Sound badge centre states ── */
.sp-sound-centre:hover {
  background: rgba(0,0,0,.8);
  transform: translate(-50%,-50%) scale(1.1);
}
.sp-sound-centre.unmuted {
  background: color-mix(in srgb, var(--grad-b) 75%, transparent);
  border-color: rgba(255,255,255,.4);
}

/* ── Cart icon replacements (no emoji) ── */
.cpup-icon-box, .cdb-icon-box, .cfb-icon-box {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 13px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cfb-icon-box { background: #16a34a; }
.cdb-icon-box { background: var(--grad-b); }

/* Hero sound badge with SVG */
.hero-sound-badge {
  line-height: 0;
}
.hero-sound-badge::before {
  content: '';
  display: block;
  width: 15px; height: 15px;
  background: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.8 8.8 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06A9 9 0 0 0 17.73 18L19 19.27 20.27 18 5.27 3 4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.8 8.8 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06A9 9 0 0 0 17.73 18L19 19.27 20.27 18 5.27 3 4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
  -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.hero-sound-badge.unmuted::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
}
.hero-sound-badge svg { display: none !important; }

/* ── Sound badge icon via CSS (no SVG in PHP strings) ── */
.sp-sound-badge::before {
  content: '';
  display: block;
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.8 8.8 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06A9 9 0 0 0 17.73 18L19 19.27 20.27 18 5.27 3 4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.8 8.8 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06A9 9 0 0 0 17.73 18L19 19.27 20.27 18 5.27 3 4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
  -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.sp-sound-badge.unmuted::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
}
/* Remove any stray innerHTML from JS on the badge */
.sp-sound-badge svg { display: none !important; }
.hero-sound-badge svg { display: none !important; }

/* ── Success state with CSS checkmark (no emoji) ── */
.cp-email-applied, .ced-applied, .ft-email-applied, .exit-email-applied {
  display: flex; align-items: center; gap: 7px;
}
.cp-email-applied::before, .ced-applied::before,
.ft-email-applied::before, .exit-email-applied::before {
  content: '';
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 50%;
  background: #16a34a;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background: #16a34a;
}
/* Pillow placeholder box (no emoji) */
.pillow-ph { display:inline-block; width:100%; height:100%; background:color-mix(in srgb, var(--grad-b) 15%, transparent); }

/* ── Configurable icon system ── */
.alto-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em; height: 1em;
  vertical-align: -0.12em;
  flex-shrink: 0;
}
.alto-ic svg { width: 100%; height: 100%; display: block; }
.alto-ic-ph {
  width: 1em; height: 1em;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.25;
}
/* Larger icon contexts */
.fc-icon .alto-ic, .ps-badge-icon .alto-ic { width: 1em; height: 1em; }

/* ════════════════════════════════════════════════════════════
   SHOP PAGE
════════════════════════════════════════════════════════════ */
.shop-main { padding-top: var(--total-h); }

/* Hero */
.shop-hero {
  background: var(--dark);
  padding: 56px 40px 52px;
  position: relative;
  overflow: hidden;
}
.shop-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, color-mix(in srgb, var(--grad-b) 12%, transparent) 0%, transparent 60%),
              radial-gradient(ellipse at 15% 80%, color-mix(in srgb, var(--grad-a) 7%, transparent) 0%, transparent 50%);
  pointer-events: none;
}
.shop-hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.shop-hero-kicker {
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
.shop-hero-title {
  font-family: var(--fh);
  font-size: clamp(40px, 5.5vw, 70px);
  font-weight: 900; text-transform: uppercase;
  line-height: .93; letter-spacing: -.02em;
  color: var(--white); margin-bottom: 14px;
}
.shop-hero-sub { font-size: 15px; color: rgba(255,255,255,.48); max-width: 420px; }

/* Products section */
.shop-products-sec { padding: 52px 0 80px; }
.shop-wrap { max-width: 1100px; margin: 0 auto; padding: 0 40px; }

/* Product grid */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

/* Product card */
.shop-product-card {
  background: var(--white);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: transform .28s, box-shadow .28s;
}
.shop-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.1);
}
.spc-img-wrap {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--card);
}
.spc-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s;
}
.shop-product-card:hover .spc-img { transform: scale(1.04); }
.sp-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  background: var(--grad); color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.sp-badge-feat { background: var(--dark); }
.spc-sold-out {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-size: 18px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.spc-body {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; flex: 1; gap: 7px;
}
.spc-cat {
  font-size: 10px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--grad-b);
}
.spc-name {
  font-family: var(--fh);
  font-size: 21px; font-weight: 900;
  text-transform: uppercase; line-height: 1.05;
  color: var(--dark);
}
.spc-name a { color: inherit; text-decoration: none; }
.spc-name a:hover { color: var(--grad-b); }
.spc-excerpt { font-size: 13px; line-height: 1.65; color: var(--body); flex: 1; }
.spc-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: auto; gap: 12px;
}
.spc-price { display: flex; align-items: baseline; gap: 8px; }
.spc-sale {
  font-family: var(--fh);
  font-size: 22px; font-weight: 900;
  color: var(--price, var(--grad-b));
}
.spc-orig {
  font-size: 13px; color: var(--light);
  text-decoration: line-through;
}
.spc-cta {
  font-family: var(--fh);
  font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--white); background: var(--grad);
  padding: 8px 16px; text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s;
}
.spc-cta:hover { opacity: .88; }
.spc-cta-out { background: var(--card); color: var(--light); cursor: default; }
.spc-cta-out:hover { opacity: 1; }

/* WC pagination */
.woocommerce-pagination { text-align: center; padding-top: 32px; }
.woocommerce-pagination ul { display: inline-flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--border);
  font-family: var(--fh); font-size: 14px; font-weight: 800;
  color: var(--dark); text-decoration: none;
  transition: all .2s;
}
.woocommerce-pagination ul li a:hover { border-color: var(--grad-b); color: var(--grad-b); }
.woocommerce-pagination ul li span.current {
  background: var(--grad); color: #fff; border-color: transparent;
}

/* Empty + back */
.shop-empty { text-align: center; padding: 60px 0; }
.shop-back-cta {
  display: inline-block; margin-top: 16px;
  padding: 12px 24px; background: var(--grad);
  color: #fff; font-family: var(--fh);
  font-size: 14px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
}

/* Responsive */
@media(max-width:900px) { .shop-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px) {
  .shop-hero { padding: 44px 18px 40px; }
  .shop-wrap { padding: 0 18px; }
  .shop-grid { grid-template-columns: 1fr; gap: 20px; }
  .shop-products-sec { padding: 36px 0 60px; }
}

/* ── Contact form inside popup ── */
.alto-contact-form { display:flex; flex-direction:column; gap:14px; }
.acf-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.acf-group { display:flex; flex-direction:column; gap:5px; }
.acf-label { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--dark); }
.acf-input {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-family: var(--fb); font-size: 14px; color: var(--dark);
  outline: none; border-radius: 0; -webkit-appearance: none;
  transition: border-color .2s;
}
.acf-input:focus { border-color: var(--grad-b); }
.acf-textarea { resize: vertical; min-height: 110px; }
.acf-submit {
  padding: 13px;
  background: var(--grad); color: #fff; border: none;
  font-family: var(--fh); font-size: 16px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: opacity .2s; margin-top: 4px;
}
.acf-submit:hover { opacity: .88; }
.acf-submit:disabled { opacity: .5; cursor: default; }
@media(max-width:500px) { .acf-row { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   ALTO SUPPORT CHATBOT
════════════════════════════════════════════════════════════ */
.acb-wrap { display:flex; flex-direction:column; height:100%; min-height:360px; }

/* Email gate */
.acb-gate { display:flex; flex-direction:column; gap:14px; }
.acb-email-form { display:flex; gap:8px; }
.acb-email-form .acb-input { flex:1; }
.acb-error { font-size:12px; color:#dc2626; font-weight:600; }
.acb-error-input { border-color:#dc2626 !important; }

/* Chat area */
.acb-chat { display:flex; flex-direction:column; height:100%; min-height:360px; }
.acb-messages {
  flex:1; overflow-y:auto; padding:4px 0 12px;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin;
}
.acb-msg-row { display:flex; align-items:flex-end; gap:8px; }
.acb-bot { align-self:flex-start; max-width:90%; }
.acb-user { align-self:flex-end; flex-direction:row-reverse; max-width:80%; }

/* Avatar */
.acb-avatar {
  width:28px; height:28px; flex-shrink:0;
  border-radius:50%; background:var(--grad);
  color:#fff; font-family:var(--fh);
  font-size:12px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}

/* Bubbles */
.acb-bubble {
  padding:10px 14px;
  background:var(--card);
  border:1px solid var(--border);
  font-size:13px; line-height:1.65; color:var(--dark);
  border-radius:0 8px 8px 8px;
}
.acb-user-bubble {
  background:var(--dark); color:#fff;
  border-color:var(--dark);
  border-radius:8px 0 8px 8px;
}

/* Typing indicator */
.acb-typing .acb-bubble {
  display:flex; gap:5px; align-items:center; padding:12px 16px;
}
.acb-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--light);
  animation:acbPulse 1.2s ease-in-out infinite;
}
.acb-dot:nth-child(2) { animation-delay:.2s; }
.acb-dot:nth-child(3) { animation-delay:.4s; }
@keyframes acbPulse { 0%,80%,100%{transform:scale(.8);opacity:.5} 40%{transform:scale(1);opacity:1} }

/* Quick-topic chips */
.acb-topics { display:flex; flex-wrap:wrap; gap:6px; padding:6px 0 0 36px; }
.acb-topic-btn {
  font-size:11px; font-weight:700;
  letter-spacing:.04em; padding:6px 12px;
  border:1.5px solid var(--border); background:var(--white);
  color:var(--dark); cursor:pointer;
  border-radius:16px; transition:all .18s;
}
.acb-topic-btn:hover { border-color:var(--grad-b); color:var(--grad-b); }

/* Input row */
.acb-input-row { display:flex; gap:8px; padding-top:10px; border-top:1px solid var(--border); margin-top:8px; }
.acb-input {
  flex:1; padding:10px 14px;
  border:1.5px solid var(--border); background:var(--white);
  font-family:var(--fb); font-size:13px; color:var(--dark);
  outline:none; border-radius:0; -webkit-appearance:none;
  transition:border-color .2s;
}
.acb-input:focus { border-color:var(--grad-b); }
.acb-send-btn {
  padding:10px 18px;
  background:var(--grad-b); color:#fff; border:none;
  font-family:var(--fh); font-size:13px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap; transition:background .2s;
}
.acb-send-btn:hover { background:var(--grad-a); }

/* First greeting bubble */
.acb-bot-msg { display:flex; align-items:flex-start; gap:8px; }
.acb-bot-msg .acb-bubble { border-radius:0 8px 8px 8px; }

/* ── Floating Help button ── */
.acb-float-btn {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 450;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px 12px 14px;
  background: var(--grad-b);
  color: #fff;
  border: none; cursor: pointer;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: transform .22s, box-shadow .22s, background .2s;
  font-family: var(--fh);
}
.acb-float-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
  background: var(--grad-a);
}
.acb-float-icon { width:20px; height:20px; flex-shrink:0; display:flex; }
.acb-float-icon svg { width:100%; height:100%; }
.acb-float-label {
  font-size: 14px; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
/* Hide on checkout page — less distraction */
.woocommerce-checkout .acb-float-btn { display:none; }
/* Mobile: tighter */
@media(max-width:480px) {
  .acb-float-btn { bottom:16px; left:16px; padding:10px 14px 10px 12px; }
  body.sticky-visible .acb-float-btn { bottom:82px; transition:bottom .42s cubic-bezier(.22,1,.36,1); }
  .acb-float-label { font-size:13px; }
}

/* Yes/No escalation chips */
.acb-yesno { padding-left: 36px; }
.acb-topic-yes {
  background: var(--grad-b);
  border-color: var(--grad-b);
  color: #fff;
}
.acb-topic-yes:hover {
  background: var(--grad-a);
  border-color: var(--grad-a);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════
   REVIEW SECTION — two-column layout + 3D float card
════════════════════════════════════════════════════════════ */
.social-two-col {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
  align-items: center;
  min-height: 520px;
}

/* ── 3D product column ── */
.social-3d-col {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  padding: 32px 40px 32px 20px;
}
.s3d-scene {
  perspective: 900px;
  cursor: grab;
  user-select: none;
}
.s3d-scene:active { cursor: grabbing; }
.s3d-card {
  width: 320px; height: 380px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  border-radius: 20px;
}
.s3d-face {
  position: absolute; inset: 0;
  border-radius: 20px; overflow: hidden;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
}
.s3d-img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 24px;
  filter: drop-shadow(0 16px 32px color-mix(in srgb, var(--grad-b) 40%, transparent));
  pointer-events: none;
}
.s3d-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center;
}
.s3d-ph-brand {
  font-family: var(--fh); font-size: 32px; font-weight: 900;
  background: var(--grad); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.s3d-ph-sub {
  font-size: 10px; color: rgba(255,255,255,.3);
  font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.5;
}
/* Gradient ring glow behind card */
.s3d-glow-ring {
  position: absolute; inset: -16px;
  border-radius: 28px;
  background: var(--grad);
  opacity: .18;
  filter: blur(20px);
  z-index: -1;
  animation: s3dGlowPulse 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes s3dGlowPulse {
  0%,100% { opacity: .14; transform: scale(1); filter: blur(20px); }
  50%      { opacity: .28; transform: scale(1.06); filter: blur(26px); }
}
/* Specular shine layer */
.s3d-shine {
  position: absolute; inset: 0;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}
.s3d-card:hover .s3d-shine,
.s3d-card.interacting .s3d-shine { opacity: 1; }
/* Label below 3D card */
.s3d-label { text-align: center; }
.s3d-brand {
  font-family: var(--fh); font-size: 14px; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dark); margin-bottom: 4px;
}
.s3d-sub {
  font-size: 10px; color: var(--light);
  letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700;
}

/* ── Mobile: stack vertically ── */
@media (max-width: 768px) {
  .social-two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* 3D card sits below the reviews, above CTA, on mobile */
  .social-3d-col {
    order: 2;
    padding: 16px 0;
  }
  .s3d-card { width: 280px; height: 330px; }
}

/* ════════════════════════════════════════════════════════════
   COLOUR PICKER
════════════════════════════════════════════════════════════ */
.alto-colour-picker {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.acp-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.acp-label .acp-selected-name {
  color: var(--white); font-weight: 800;
}
.acp-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.acp-swatch {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.15);
  cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative;
  flex-shrink: 0;
}
.acp-swatch:hover {
  transform: scale(1.15);
  border-color: rgba(255,255,255,.5);
}
.acp-swatch.active {
  border-color: var(--white);
  box-shadow: 0 0 0 3px rgba(255,255,255,.2);
  transform: scale(1.1);
}
/* Checkmark on active swatch */
.acp-swatch.active::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/14px no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* Cart context: lighter label */
#cartBody .alto-colour-picker {
  padding: 0 16px;
  margin-top: 8px;
}
#cartBody .acp-label { color: rgba(255,255,255,.35); }

/* Hero card context — tighter spacing */
.hpr-info .alto-colour-picker {
  margin-bottom: 0;
  margin-top: 8px;
}
.hpr-info .acp-label {
  font-size: 10px;
  color: rgba(255,255,255,.35);
}
.hpr-info .acp-swatch {
  width: 20px; height: 20px;
  border-radius: 5px;
}

/* Pack section context */
.pcu-info .alto-colour-picker { margin-bottom: 18px; }

/* ════════════════════════════════════════════════════════════
   CART — Colour swatch dot per line item
════════════════════════════════════════════════════════════ */
.cp-item-colour {
  display: flex; align-items: center; gap: 5px;
  margin: 2px 0 4px;
}
.cp-colour-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.25);
  flex-shrink: 0; display: inline-block;
}
.cp-colour-name {
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* ── Cart: add colour row ── */
.cp-colour-row {
  margin: 2px 16px 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  display: flex; align-items: center; gap: 12px;
}
.cpcr-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.3); white-space: nowrap; flex-shrink: 0;
}
.cpcr-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.cpcr-swatch {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.12);
  cursor: pointer; position: relative; flex-shrink: 0;
  transition: transform .15s, border-color .2s, box-shadow .2s;
}
.cpcr-swatch:hover {
  transform: scale(1.18);
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.cpcr-swatch:active { transform: scale(.92); }
/* Tick when already in cart — still tappable for +1 */
.cpcr-swatch.in-cart {
  border-color: rgba(255,255,255,.5);
}
.cpcr-swatch.in-cart::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  background: rgba(0,0,0,.3);
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════
   PRODUCT IMAGE LIGHTBOX
════════════════════════════════════════════════════════════ */
.alto-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
  opacity: 0; transition: opacity .25s ease;
}
.alto-lightbox.visible { opacity: 1; }

.alto-lightbox-inner {
  position: relative;
  max-width: 92vw; max-height: 92vh;
  display: flex; align-items: center; justify-content: center;
}
.alto-lightbox-inner img {
  max-width: 92vw; max-height: 92vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  cursor: default;
  transform: scale(.95); transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.alto-lightbox.visible .alto-lightbox-inner img { transform: scale(1); }

.alto-lightbox-close {
  position: absolute; top: -16px; right: -16px;
  width: 36px; height: 36px;
  border-radius: 50%; border: none;
  background: rgba(255,255,255,.15);
  color: #fff; font-size: 16px;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background .2s;
  backdrop-filter: blur(8px);
}
.alto-lightbox-close:hover { background: rgba(255,255,255,.3); }

/* Zoom cursor on product images */
.hpr-photo, .pcu-photo { cursor: zoom-in; }

/* ════════════════════════════════════════════════════════════
   HERO PHOTO SLIDER
════════════════════════════════════════════════════════════ */
.hero-slider {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide img { width:100%; height:100%; object-fit:cover; display:block; }

/* Dot nav */
.hero-slider-dots {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 4;
}
.hsd-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none; cursor: pointer;
  transition: background .25s, transform .2s;
  padding: 0;
}
.hsd-dot.active {
  background: #fff;
  transform: scale(1.3);
}

/* Arrow buttons */
.hero-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: 18px;
  width: 38px; height: 38px; border-radius: 50%;
  cursor: pointer; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.hero-slider-arrow:hover { background: rgba(0,0,0,.7); }
.hero-slider-prev { left: 12px; }
.hero-slider-next { right: 12px; }

/* Hide arrows on mobile */
/* Arrows show on all screen sizes */

/* ── 3D float col removed ── */
.social-two-col, .social-3d-col, .s3d-scene, .s3d-card { display: none !important; }

/* ── Review track now full-width ── */
.social-scroll-outer { width: 100%; }