/* Shared styles — chrome (header, tier bar, chips, cart) + Featured variants. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700;800;900&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&display=swap");
@import url("colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg-page); color: var(--fg-default); font-family: var(--font-sans); }

/* ───────────────────────── ARTBOARD SHELL ───────────────────────── */
.artboard-page {
  background: var(--bg-page);
  width: 100%;
  min-height: 100%;
  font-family: var(--font-sans);
  color: hsl(var(--foreground));
  position: relative;
}

/* ───────────────────────── HEADER ───────────────────────── */
.app-header { background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border)); }
.header-inner { max-width: 1320px; margin: 0 auto; padding: 14px 36px; display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; gap: 16px; color: hsl(var(--foreground)); }
.brand-divider { width: 1px; height: 30px; background: hsl(var(--border)); }
.brand-tagline {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: hsl(var(--foreground) / .75);
  line-height: 1.3;
  font-weight: 500;
}
.header-chips { display: flex; gap: 24px; }
.chip-trust {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground));
}
.chip-trust svg { color: hsl(var(--primary)); }

/* ───────────────────────── TIER BAR ───────────────────────── */
.tier-bar { background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border)); position: relative; z-index: 5; }
.tier-bar-inner { max-width: 1320px; margin: 0 auto; padding: 12px 36px 14px; }
.tier-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; }
.tier-title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin: 0; }
.tier-sub { margin: 2px 0 0; color: hsl(var(--muted-foreground)); font-size: 14px; }
.tier-sub b { color: hsl(var(--primary)); font-weight: 700; }
.tier-status { text-align: right; }
.tier-eyebrow {
  font-family: var(--font-heading); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: hsl(var(--muted-foreground)); font-weight: 500;
}
.tier-name { font-weight: 700; color: hsl(var(--muted-foreground)); margin-top: 2px; display: inline-flex; align-items: center; gap: 8px; }
.tier-name.on { color: hsl(var(--primary)); }
.settings-btn { border: 0; background: transparent; cursor: pointer; color: hsl(var(--muted-foreground)); padding: 2px; }
.bar-outer { position: relative; height: 18px; background: hsl(var(--secondary)); border-radius: 9999px; overflow: hidden; }
.tier-marker {
  position: absolute; top: 0; height: 100%;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 10px;
  font-size: 9px; font-weight: 700; color: hsl(var(--muted-foreground));
  border-right: 1px solid hsl(var(--border));
  z-index: 2;
}
.tier-marker.on { color: #fff; }
.tier-marker.last { border-right: 0; }
.tier-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(152 55% 36%));
  transition: width .7s var(--ease-out); overflow: hidden;
}
.tier-shimmer { position: absolute; inset: 0; background: rgba(255,255,255,.3); animation: shimmer 2.5s infinite; }

/* ───────────────────────── CHIP FILTERS ───────────────────────── */
.chip-row {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 0 22px;
  flex-wrap: wrap;
}
.chip-filters {
  display: inline-flex; align-items: center; gap: 6px;
  background: hsl(var(--foreground)); color: hsl(var(--background));
  border: 0; padding: 8px 14px; border-radius: 9999px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.chip-tab {
  background: transparent; border: 1px solid hsl(var(--border));
  padding: 8px 16px; border-radius: 9999px;
  font-size: 13px; font-weight: 500; color: hsl(var(--foreground));
  cursor: pointer; transition: all .15s;
}
.chip-tab:hover { background: hsl(var(--secondary)); }
.chip-tab.on {
  background: hsl(43 90% 60%); border-color: hsl(43 90% 60%); color: hsl(30 60% 15%);
  font-weight: 700;
}
.chip-search {
  margin-left: auto;
  width: 36px; height: 36px;
  background: transparent; border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

/* ───────────────────────── MAIN LAYOUT ───────────────────────── */
.page-content { padding: 8px 36px 64px; }
.content-inner { max-width: 1320px; margin: 0 auto; display: flex; gap: 28px; }
.storefront-main { flex: 1; min-width: 0; }
.cart-sidebar { width: 360px; flex-shrink: 0; }

.page-title { font-family: var(--font-heading); font-size: 38px; font-weight: 700; letter-spacing: -.015em; margin: 12px 0 6px; }
.page-sub { color: hsl(var(--muted-foreground)); font-size: 15px; margin: 0; max-width: 620px; }

/* Sommelier promo strip (small CTA above filters) */
.sommelier-strip {
  display: flex; align-items: center; gap: 14px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius-xl);
  padding: 12px 16px;
  margin-top: 18px;
}
.sommelier-strip .ss-glyph {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, hsl(43 95% 75%), hsl(30 50% 35%));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.sommelier-strip .ss-body { flex: 1; }
.sommelier-strip .ss-body strong { font-size: 14px; }
.sommelier-strip .ss-body p { margin: 2px 0 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.sommelier-strip .ss-cta {
  background: hsl(43 90% 65%); color: hsl(30 60% 15%);
  border: 0; padding: 9px 16px; border-radius: 9999px;
  font-weight: 700; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ───────────────────────── CART SIDEBAR ───────────────────────── */
.cart-shell {
  position: sticky; top: 20px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--card-border));
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow);
}
.cart-head { background: hsl(var(--foreground)); color: hsl(var(--background)); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.cart-head-left { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.cart-count-pill { background: rgba(255,255,255,.16); padding: 2px 12px; border-radius: 9999px; font-size: 12px; font-weight: 700; }

.cart-scroll { padding: 14px; max-height: 540px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.purchase-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.purchase-opt {
  padding: 10px 12px; border-radius: 9px;
  border: 2px solid hsl(var(--border));
  background: hsl(var(--card)); text-align: left; cursor: pointer;
}
.purchase-opt.on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .05); }
.purchase-opt .opt-row { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: hsl(var(--muted-foreground)); }
.purchase-opt.on .opt-row { color: hsl(var(--foreground)); }
.opt-help { font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 4px; display: block; }
.opt-help b { color: hsl(var(--primary)); }

.frequency-row .tier-eyebrow { margin-bottom: 6px; font-weight: 700; }
.frequency-row select {
  width: 100%; padding: 8px 12px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border)); border-radius: 8px;
  font-size: 13px; font-weight: 500; color: hsl(var(--foreground));
}

.cart-empty { text-align: center; padding: 24px 0; color: hsl(var(--muted-foreground)); }
.cart-empty svg { color: hsl(var(--muted-foreground) / .3); margin-bottom: 10px; }
.cart-empty p { margin: 0; }
.cart-empty p.small { font-size: 12px; margin-top: 4px; }
.cart-items { display: flex; flex-direction: column; gap: 8px; }
.cart-item { display: flex; gap: 10px; padding: 10px; background: hsl(var(--secondary) / .5); border-radius: 9px; align-items: flex-start; }
.bag-thumb { background: #0e0905; padding: 3px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-grind { font-size: 11px; color: hsl(var(--muted-foreground)); }
.cart-item-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.cart-item-price { font-weight: 600; font-size: 13px; }
.qty-mini { display: inline-flex; align-items: center; background: hsl(var(--card)); border-radius: 9999px; border: 1px solid hsl(var(--border)); }
.qty-mini button { width: 24px; height: 24px; border: 0; background: transparent; cursor: pointer; color: hsl(var(--muted-foreground)); }
.qty-mini span { width: 22px; text-align: center; font-weight: 700; font-size: 12px; }
.cart-remove { border: 0; background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; padding: 2px; }

.cart-foot { border-top: 1px solid hsl(var(--border)); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cart-line { display: flex; justify-content: space-between; font-size: 13px; }
.cart-line.primary { color: hsl(var(--primary)); font-weight: 600; }
.cart-line.total { border-top: 1px solid hsl(var(--border)); padding-top: 10px; margin-top: 4px; font-size: 16px; font-weight: 700; }
.cart-notice { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.cart-notice.ok { color: hsl(var(--primary)); background: hsl(var(--primary) / .1); }
.cart-notice.warn { color: hsl(30 60% 35%); background: hsl(43 95% 92%); }
.checkout-btn {
  width: 100%; background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  border: 0; padding: 14px; border-radius: 12px;
  font-weight: 700; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--shadow); margin-top: 4px;
}
.cart-secure { text-align: center; font-size: 11px; color: hsl(var(--muted-foreground)); margin: 4px 0 0; }

/* ───────────────────────── SHARED LITTLE COMPONENTS ───────────────────────── */
.stars { color: hsl(43 95% 55%); display: inline-flex; gap: 1px; align-items: center; }
.roast-dots { display: inline-flex; gap: 3px; align-items: center; }
.roast-dot { width: 7px; height: 7px; border-radius: 9999px; }

.eyebrow-mini {
  font-family: var(--font-heading);
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 700;
  color: hsl(var(--muted-foreground));
}

.section-head { display: flex; align-items: end; justify-content: space-between; margin: 36px 0 16px; gap: 24px; }
.section-head .left { min-width: 0; }
.section-head .eyebrow-mini { color: hsl(var(--primary)); }
.section-head h2 {
  font-family: var(--font-heading);
  font-size: 28px; font-weight: 700; letter-spacing: -.01em;
  margin: 6px 0 0;
}
.section-head .sub { font-size: 14px; color: hsl(var(--muted-foreground)); margin: 4px 0 0; max-width: 540px; }
.section-link {
  font-size: 13px; font-weight: 600; color: hsl(var(--primary));
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.section-link:hover { text-decoration: underline; }

.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: hsl(0 60% 45%);
  background: hsl(0 80% 96%);
  padding: 3px 10px; border-radius: 9999px;
}
.live-badge .pulse {
  width: 6px; height: 6px; border-radius: 9999px; background: hsl(0 70% 50%);
  box-shadow: 0 0 0 0 hsl(0 70% 50% / .7);
  animation: live-pulse 1.6s infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 hsl(0 70% 50% / .6); }
  70% { box-shadow: 0 0 0 8px hsl(0 70% 50% / 0); }
  100% { box-shadow: 0 0 0 0 hsl(0 70% 50% / 0); }
}

/* Pill add buttons */
.add-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: hsl(var(--foreground)); color: hsl(var(--background));
  border: 0; padding: 9px 16px; border-radius: 9999px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.add-pill.primary { background: hsl(var(--primary)); }
.add-pill.gold { background: hsl(43 80% 55%); color: hsl(30 60% 15%); }
.add-pill:hover { filter: brightness(1.08); }

/* ───────────────────────── PROMO STRIP ───────────────────────── */
.promo-strip {
  margin: 22px 0;
  background: linear-gradient(95deg, hsl(30 60% 18%) 0%, hsl(30 50% 22%) 60%, hsl(43 70% 32%) 100%);
  color: #f0e4cf;
  border-radius: var(--radius-xl);
  padding: 16px 22px;
  display: flex; align-items: center; gap: 18px;
  position: relative;
  overflow: hidden;
}
.promo-strip::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 50%, hsl(43 90% 60% / .35), transparent 50%);
  pointer-events: none;
}
.promo-strip .promo-glyph {
  width: 44px; height: 44px; border-radius: 50%;
  background: hsl(43 90% 65%); color: hsl(30 70% 15%);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.promo-strip .promo-text { flex: 1; position: relative; }
.promo-strip .promo-text h4 {
  font-family: var(--font-heading); font-size: 18px; margin: 0; color: #f8eed8;
  letter-spacing: -.005em;
}
.promo-strip .promo-text p { margin: 2px 0 0; font-size: 13px; color: hsl(43 50% 82%); }
.promo-strip .promo-clock { font-size: 12px; color: hsl(43 50% 82%); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.promo-strip .promo-clock span {
  background: rgba(0,0,0,.25); padding: 4px 10px; border-radius: 6px;
  font-family: var(--font-mono); font-weight: 700; letter-spacing: .04em;
  color: #f0e4cf;
}

/* ─── BUNDLE CARDS (used in editorial, bundle-first, social) ─── */
.bundle-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius-xl);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  transition: box-shadow .25s, border-color .25s, transform .25s;
}
.bundle-card:hover { box-shadow: var(--shadow-xl); border-color: hsl(var(--primary) / .35); }
.bundle-card .bundle-art {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.bundle-card .bundle-art .bag-stack {
  position: absolute; bottom: -8%; left: 50%; transform: translateX(-50%);
  display: flex; align-items: end; gap: 0;
  height: 100%;
  padding: 14% 0 0;
}
.bundle-card .bundle-art .bag-stack > * {
  width: 28%; flex-shrink: 0;
}
.bundle-card .bundle-art .bag-stack > *:nth-child(2) { transform: translateY(-8%); z-index: 2; }
.bundle-card .bundle-art .bag-stack > *:nth-child(1) { transform: translateX(15%) rotate(-4deg); }
.bundle-card .bundle-art .bag-stack > *:nth-child(3) { transform: translateX(-15%) rotate(4deg); }
.bundle-card .bundle-art .bag-stack.six > *:nth-child(4),
.bundle-card .bundle-art .bag-stack.six > *:nth-child(5),
.bundle-card .bundle-art .bag-stack.six > *:nth-child(6) { display: none; }

.bundle-badge {
  position: absolute; top: 12px; left: 12px;
  background: hsl(var(--foreground)); color: hsl(var(--background));
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  padding: 5px 10px; border-radius: 9999px;
}
.bundle-badge.gold { background: hsl(43 90% 60%); color: hsl(30 60% 15%); }
.bundle-badge.sage { background: hsl(152 48% 28%); color: #fff; }
.bundle-badge.new  { background: hsl(0 65% 50%); color: #fff; }

.bundle-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bundle-name { font-family: var(--font-heading); font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.bundle-tagline { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 0; }
.bundle-blurb { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 6px 0 0; line-height: 1.5; }
.bundle-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.bundle-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: hsl(var(--secondary)); color: hsl(var(--muted-foreground));
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 9999px;
}
.bundle-chip.tier-sage { background: hsl(152 30% 88%); color: hsl(152 48% 25%); }
.bundle-chip.tier-bronze { background: hsl(30 50% 88%); color: hsl(30 60% 30%); }
.bundle-chip.tier-silver { background: hsl(30 5% 88%); color: hsl(30 8% 30%); }
.bundle-chip.tier-gold { background: hsl(43 70% 88%); color: hsl(30 60% 25%); }

.bundle-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 10px; }
.bundle-price-row .price { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: hsl(var(--foreground)); }
.bundle-price-row .compare { font-size: 14px; color: hsl(var(--muted-foreground)); text-decoration: line-through; }
.bundle-price-row .save { font-size: 12px; font-weight: 700; color: hsl(var(--primary)); margin-left: auto; }

.bundle-cta {
  margin-top: 14px;
  width: 100%;
  background: hsl(var(--foreground)); color: hsl(var(--background));
  border: 0; padding: 13px; border-radius: 12px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s;
}
.bundle-cta:hover { background: hsl(var(--primary)); }
.bundle-cta.green { background: hsl(var(--primary)); color: #fff; }
.bundle-cta.gold { background: hsl(43 80% 55%); color: hsl(30 60% 15%); }

/* Tier unlocks badge */
.tier-unlocks {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: hsl(var(--muted-foreground));
  margin-top: 6px;
}
.tier-unlocks b { color: hsl(var(--primary)); font-weight: 700; }

/* ─── PRODUCT MINI CARDS (compact grid card with bag) ─── */
.product-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--card-border));
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .25s, border-color .25s;
  position: relative;
}
.product-card:hover { box-shadow: var(--shadow-lg); border-color: hsl(var(--primary) / .3); }
.product-art {
  background: hsl(var(--secondary));
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.product-art > svg { transition: transform .6s var(--ease-out); }
.product-card:hover .product-art > svg { transform: scale(1.06); }
.product-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-meta { display: flex; align-items: center; justify-content: space-between; }
.product-meta-l { display: flex; align-items: center; gap: 8px; }
.roast-name { font-size: 10px; font-weight: 800; color: hsl(var(--muted-foreground)); letter-spacing: .08em; text-transform: uppercase; }
.product-name { font-family: var(--font-heading); font-size: 17px; font-weight: 700; margin: 4px 0 0; letter-spacing: -.005em; }
.product-notes { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 0; }
.product-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid hsl(var(--border) / .5); display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.price-stack .save-label { font-size: 10px; font-weight: 700; color: hsl(var(--primary)); display: block; }
.price-stack .price { font-weight: 700; font-size: 16px; }
.price-stack .compare-at { font-size: 11px; color: hsl(var(--muted-foreground)); text-decoration: line-through; margin-left: 4px; }
.add-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: hsl(var(--foreground)); color: hsl(var(--background));
  border: 0; padding: 8px 14px;
  border-radius: 9px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.review-mini { font-size: 11px; color: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: 4px; }

/* ─── BESTSELLER RANK ROW ─── */
.rank-row {
  display: grid;
  grid-template-columns: 56px 96px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius-xl);
  margin-bottom: 10px;
  transition: box-shadow .25s, border-color .25s;
}
.rank-row:hover { box-shadow: var(--shadow-lg); border-color: hsl(var(--primary) / .3); }
.rank-num {
  font-family: var(--font-heading); font-size: 56px; font-weight: 800;
  color: hsl(var(--foreground)); line-height: 1;
  letter-spacing: -.04em;
}
.rank-row.gold .rank-num { color: hsl(43 80% 55%); }
.rank-thumb {
  width: 96px; height: 96px;
  background: hsl(var(--secondary)); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
}
.rank-info .rank-name { font-family: var(--font-heading); font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.rank-info .rank-quote { font-size: 13px; color: hsl(30 15% 30%); margin: 6px 0 0; line-height: 1.5; font-style: italic; max-width: 540px; }
.rank-info .rank-by { font-size: 11px; color: hsl(var(--muted-foreground)); margin: 6px 0 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rank-info .rank-by .live-badge { font-style: normal; }
.rank-cta { display: flex; flex-direction: column; align-items: end; gap: 6px; }
.rank-cta .rank-price { font-weight: 700; font-size: 17px; }
.rank-cta .rank-price .compare-at { font-size: 12px; color: hsl(var(--muted-foreground)); text-decoration: line-through; margin-left: 4px; font-weight: 500; }

/* ─── NEW DROPS FILMSTRIP ─── */
.filmstrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.drop-card {
  position: relative;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.drop-art {
  position: relative;
  aspect-ratio: 5/4;
  background: hsl(var(--secondary));
  padding: 24px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.drop-tag {
  position: absolute; top: 12px; left: 12px;
  background: hsl(0 65% 50%); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  padding: 5px 10px; border-radius: 9999px;
}
.drop-tag.new { background: hsl(var(--primary)); }
.drop-tag.seasonal { background: hsl(30 40% 30%); color: hsl(43 80% 70%); }
.drop-body { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.drop-name { font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.005em; }
.drop-meta { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 0; }
.drop-stock { font-size: 11px; font-weight: 600; color: hsl(0 60% 45%); margin: 2px 0 0; }

/* ─── STARTER TRIO CARDS ─── */
.starter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.starter-card {
  position: relative;
  padding: 22px 22px 18px;
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  min-height: 280px;
}
.starter-card .label {
  font-family: var(--font-heading);
  font-size: 22px; font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.15;
}
.starter-card .hint { font-size: 13px; opacity: .8; margin: 0; }
.starter-card .trio-bags {
  display: flex; gap: 4px; padding: 8px 0 4px;
  flex: 1; align-items: end;
}
.starter-card .trio-bags > div {
  flex: 1; max-width: 78px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.3));
}
.starter-card .add-trio {
  width: 100%; border: 0; padding: 11px;
  border-radius: 9999px;
  font-weight: 700; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: hsl(var(--background)); color: hsl(var(--foreground));
}

/* ─── EDITORIAL HERO (variation A) ─── */
.editorial-hero {
  position: relative;
  background: linear-gradient(125deg, hsl(152 48% 22%) 0%, hsl(152 48% 18%) 55%, hsl(30 30% 16%) 100%);
  color: #f3ead7;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 500px;
}
.editorial-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, hsl(43 90% 65% / .25), transparent 55%);
  pointer-events: none;
}
.editorial-hero .eh-text { padding: 44px 44px 40px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.editorial-hero .eh-eyebrow { font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: hsl(43 80% 70%); font-weight: 600; }
.editorial-hero h1 {
  font-family: var(--font-heading);
  font-size: 56px; line-height: 1.02; font-weight: 700;
  margin: 0; letter-spacing: -.02em;
  color: #faf3e2;
}
.editorial-hero h1 em { font-style: italic; color: hsl(43 80% 65%); font-weight: 600; }
.editorial-hero .eh-blurb { font-size: 16px; line-height: 1.55; color: hsl(43 50% 88%); margin: 0; max-width: 460px; }
.editorial-hero .eh-meta {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: 12px; color: hsl(43 50% 80%); margin: 2px 0;
}
.editorial-hero .eh-meta b { color: hsl(43 80% 75%); }
.editorial-hero .eh-cta-row { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.editorial-hero .eh-cta-row .price-block { display: flex; flex-direction: column; }
.editorial-hero .eh-cta-row .price-block .now { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: #faf3e2; line-height: 1; }
.editorial-hero .eh-cta-row .price-block .was { font-size: 13px; text-decoration: line-through; color: hsl(43 30% 65%); margin-top: 2px; }
.editorial-hero .eh-cta-primary {
  background: hsl(43 90% 65%); color: hsl(30 60% 15%);
  border: 0; padding: 16px 24px; border-radius: 9999px;
  font-weight: 800; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px hsl(43 90% 50% / .3);
}
.editorial-hero .eh-art {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 30px;
}
.editorial-hero .eh-art .bag-fan { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; }
.editorial-hero .eh-art .bag-fan > div {
  position: absolute;
  width: 38%;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.5));
  transform-origin: 50% 100%;
}
.editorial-hero .eh-art .bag-fan > div:nth-child(1) { transform: translate(-28%, 0) rotate(-12deg); }
.editorial-hero .eh-art .bag-fan > div:nth-child(2) { transform: translate(0, -4%) rotate(0); z-index: 3; }
.editorial-hero .eh-art .bag-fan > div:nth-child(3) { transform: translate(28%, 0) rotate(12deg); }
.editorial-hero .eh-art .bag-fan > div:nth-child(4) { transform: translate(-50%, 8%) rotate(-22deg); opacity: .9; }
.editorial-hero .eh-art .bag-fan > div:nth-child(5) { transform: translate(50%, 8%) rotate(22deg); opacity: .9; }
.editorial-hero .eh-art .bag-fan > div:nth-child(6) { transform: translate(-12%, 22%) rotate(-6deg); opacity: .85; z-index: 4; width: 32%; }

.eh-corner-stat {
  position: absolute; top: 30px; right: 30px;
  text-align: right;
  font-size: 11px; color: hsl(43 50% 80%);
}
.eh-corner-stat strong { font-family: var(--font-heading); font-size: 22px; color: #faf3e2; font-weight: 700; display: block; }

/* ─── BUNDLE-FIRST: 3-up tall card row (variation B) ─── */
.bundle-stack-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 18px;
  margin: 6px 0 12px;
}
.bundle-stack-row .bundle-card.hero {
  background: linear-gradient(180deg, hsl(152 48% 26%) 0%, hsl(152 48% 20%) 100%);
  color: #f3ead7;
  border-color: transparent;
}
.bundle-stack-row .bundle-card.hero .bundle-name { color: #faf3e2; }
.bundle-stack-row .bundle-card.hero .bundle-tagline,
.bundle-stack-row .bundle-card.hero .bundle-blurb { color: hsl(43 50% 88%); }
.bundle-stack-row .bundle-card.hero .bundle-art { background: hsl(152 48% 16%); }
.bundle-stack-row .bundle-card.hero .bundle-chip { background: hsl(43 80% 60%); color: hsl(30 60% 15%); }
.bundle-stack-row .bundle-card.hero .bundle-price-row .price { color: #faf3e2; }
.bundle-stack-row .bundle-card.hero .bundle-price-row .compare { color: hsl(43 30% 65%); }
.bundle-stack-row .bundle-card.hero .bundle-price-row .save { color: hsl(43 90% 70%); }
.bundle-stack-row .bundle-card.hero .bundle-cta { background: hsl(43 90% 60%); color: hsl(30 60% 15%); }

/* Top 3 bestsellers — bundle-first variant: numbered cards */
.bestseller-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.bestseller-card {
  position: relative;
  background: hsl(var(--card)); border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius-xl); overflow: hidden;
  padding: 18px;
}
.bestseller-card .rank-badge {
  position: absolute; top: 14px; right: 14px;
  background: hsl(var(--foreground)); color: hsl(var(--background));
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 9999px;
  letter-spacing: .04em;
}
.bestseller-card.gold .rank-badge { background: hsl(43 90% 60%); color: hsl(30 60% 15%); }
.bestseller-card .bc-art {
  background: hsl(var(--secondary)); border-radius: 12px;
  aspect-ratio: 1/1; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.bestseller-card h4 { font-family: var(--font-heading); font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.005em; }
.bestseller-card .bc-rating { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 4px 0 0; display: flex; align-items: center; gap: 6px; }
.bestseller-card .bc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.bestseller-card .bc-foot .price { font-weight: 700; font-size: 16px; }

/* ─── SOCIAL VARIANT — quote carousel + counter banner ─── */
.activity-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius-xl);
  padding: 14px 20px;
  margin: 6px 0 8px;
}
.activity-banner .lb-glyph {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: hsl(0 80% 96%); color: hsl(0 65% 50%);
  display: inline-flex; align-items: center; justify-content: center;
}
.activity-banner .lb-text { display: flex; flex-direction: column; gap: 2px; }
.activity-banner .lb-text strong { font-size: 14px; }
.activity-banner .lb-text .ticker { font-family: var(--font-heading); font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: hsl(var(--primary)); }
.activity-banner .lb-text small { color: hsl(var(--muted-foreground)); font-size: 12px; }
.activity-banner .lb-avatars { display: flex; align-items: center; }
.activity-banner .lb-avatars .ava {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid hsl(var(--card));
  margin-left: -8px;
  background: linear-gradient(135deg, hsl(43 60% 65%), hsl(30 40% 35%));
  font-size: 11px; font-weight: 700; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}

/* social-style review card */
.review-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius-xl);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.review-card .rc-head { display: flex; align-items: center; gap: 10px; }
.review-card .rc-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, hsl(152 30% 50%), hsl(152 40% 25%));
  color: #fff; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.review-card .rc-meta { display: flex; flex-direction: column; }
.review-card .rc-meta b { font-size: 13px; font-weight: 600; }
.review-card .rc-meta small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.review-card .rc-quote { font-size: 14px; line-height: 1.55; color: hsl(30 15% 25%); margin: 0; }
.review-card .rc-product {
  display: flex; gap: 10px; align-items: center;
  padding-top: 10px; margin-top: 4px;
  border-top: 1px solid hsl(var(--border));
}
.review-card .rc-product .rc-bag {
  width: 44px; height: 56px;
  background: #0e0905; border-radius: 6px; padding: 3px;
}
.review-card .rc-product .rc-prod-info { flex: 1; }
.review-card .rc-product .rc-prod-info b { font-size: 13px; font-weight: 600; }
.review-card .rc-product .rc-prod-info small { font-size: 11px; color: hsl(var(--muted-foreground)); display: block; }
.review-card .rc-product button {
  border: 1px solid hsl(var(--foreground)); background: transparent;
  font-size: 12px; font-weight: 700; padding: 7px 14px;
  border-radius: 9999px; cursor: pointer;
}

.review-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}

/* Live counter row */
.live-counter-card {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 0;
}
.live-counter-card .lc-num {
  font-family: var(--font-heading);
  font-size: 32px; font-weight: 700;
  color: hsl(var(--primary)); line-height: 1;
}
.live-counter-card small { color: hsl(var(--muted-foreground)); font-size: 12px; display: block; }

/* Compact grid for the regular product cards under featured (when there's any) */
.compact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* ────────────────────────── GIFT MILESTONE BAR ────────────────────────── */
.gift-bar {
  background: linear-gradient(180deg, hsl(43 65% 96%) 0%, hsl(43 50% 93%) 100%);
  border-bottom: 1px solid hsl(43 40% 84%);
  position: relative;
}
.gift-bar-inner { max-width: 1320px; margin: 0 auto; padding: 12px 36px 22px; }
.gift-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 24px; }
.gift-head-left { display: flex; align-items: center; gap: 10px; }
.gift-glyph {
  width: 30px; height: 30px; border-radius: 9999px;
  background: hsl(43 90% 60%); color: hsl(30 70% 18%);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gift-title { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: hsl(30 50% 18%); }
.gift-sub { font-size: 12px; color: hsl(30 25% 35%); margin-top: 1px; }
.gift-sub b { color: hsl(30 70% 25%); font-weight: 700; }
.gift-unlocked-count {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  background: hsl(152 48% 32%); color: #fff;
  padding: 4px 10px; border-radius: 9999px;
}
.gift-track { position: relative; height: 50px; margin: 0 16px; }
.gift-track::before {
  content: ''; position: absolute; top: 13px; left: 0; right: 0; height: 4px;
  background: hsl(43 30% 80%);
  border-radius: 9999px;
}
.gift-fill {
  position: absolute; top: 13px; left: 0; height: 4px;
  background: linear-gradient(90deg, hsl(43 90% 55%), hsl(30 65% 45%));
  border-radius: 9999px;
  transition: width .7s var(--ease-out);
}
.gift-node {
  position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; z-index: 2;
}
.gift-node-dot {
  width: 30px; height: 30px; border-radius: 9999px;
  background: hsl(43 30% 88%); color: hsl(30 25% 50%);
  border: 2px solid hsl(43 30% 80%);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .25s;
}
.gift-node.on .gift-node-dot {
  background: hsl(43 90% 55%); color: hsl(30 70% 18%);
  border-color: hsl(30 65% 35%);
  box-shadow: 0 4px 10px hsl(43 90% 50% / .35);
}
.gift-node-label { display: flex; flex-direction: column; line-height: 1.15; font-size: 10px; color: hsl(30 25% 40%); white-space: nowrap; }
.gift-node-label b { font-size: 11px; color: hsl(30 50% 22%); font-weight: 700; }
.gift-node.on .gift-node-label { color: hsl(30 70% 25%); }
.gift-node.on .gift-node-label b { color: hsl(30 65% 22%); }

/* ────────────── AI BUNDLE BUILDER HERO (variation D + AI strips) ────────────── */
.ai-hero {
  background:
    radial-gradient(circle at 90% 10%, hsl(265 60% 50% / .35), transparent 50%),
    radial-gradient(circle at 10% 90%, hsl(43 90% 60% / .25), transparent 50%),
    linear-gradient(135deg, hsl(30 20% 12%) 0%, hsl(30 18% 14%) 100%);
  color: #f3ead7;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  padding: 36px 40px;
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: center;
}
.ai-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  background: linear-gradient(90deg, hsl(43 90% 70%), hsl(265 70% 75%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ai-hero h2 {
  font-family: var(--font-heading);
  font-size: 44px; line-height: 1.05; font-weight: 700;
  margin: 10px 0 8px; letter-spacing: -.02em; color: #faf3e2;
}
.ai-hero h2 em { font-style: italic; color: hsl(43 80% 70%); font-weight: 600; }
.ai-hero p { color: hsl(43 30% 80%); font-size: 14px; line-height: 1.55; margin: 0 0 14px; max-width: 460px; }
.ai-prompt-box {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  position: relative;
}
.ai-bot {
  width: 30px; height: 30px; border-radius: 9999px;
  background: linear-gradient(135deg, hsl(265 70% 60%), hsl(43 80% 60%));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.ai-typed { flex: 1; font-size: 13px; color: hsl(43 40% 85%); font-family: var(--font-mono); }
.ai-typed .cursor {
  display: inline-block; width: 7px; height: 14px; background: hsl(43 80% 65%);
  vertical-align: -2px; margin-left: 2px; animation: blink 1.1s infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.ai-quick-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.ai-quick {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: hsl(43 30% 85%);
  font-size: 12px; font-weight: 500;
  padding: 8px 14px; border-radius: 9999px;
  cursor: pointer;
}
.ai-quick:hover { background: rgba(255,255,255,.14); }
.ai-cta-row { display: flex; gap: 12px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.ai-cta-primary {
  background: hsl(43 90% 65%); color: hsl(30 60% 15%);
  border: 0; padding: 14px 22px; border-radius: 9999px;
  font-weight: 800; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px hsl(43 90% 50% / .3);
}
.ai-cta-secondary {
  background: transparent; color: hsl(43 30% 85%);
  border: 1px solid rgba(255,255,255,.22);
  padding: 12px 18px; border-radius: 9999px;
  font-weight: 600; font-size: 13px; cursor: pointer;
}
.ai-stat { font-size: 11px; color: hsl(43 30% 70%); }
.ai-stat b { color: hsl(43 80% 70%); }
.ai-preview { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.ai-suggestion-card {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 10px;
  width: 92%; max-width: 380px;
  position: relative;
}
.ai-card-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: hsl(265 50% 45%);
}
.ai-suggestion-card h4 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.ai-card-bags { display: flex; gap: 6px; padding: 8px 0; height: 120px; }
.ai-card-bags > div { flex: 1; }
.ai-card-meta { font-size: 12px; color: hsl(var(--muted-foreground)); }
.ai-card-meta b { color: hsl(var(--primary)); }
.ai-card-cta {
  background: hsl(var(--foreground)); color: hsl(var(--background));
  border: 0; padding: 11px; border-radius: 9px;
  font-weight: 700; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}

/* ──────────── MADE-FOR-YOU AI RAIL ──────────── */
.mfy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mfy-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; position: relative;
}
.mfy-art {
  background: hsl(var(--secondary));
  aspect-ratio: 1/1; padding: 18px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.mfy-match {
  position: absolute; top: 12px; left: 12px;
  background: hsl(265 60% 45%); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  padding: 5px 10px; border-radius: 9999px;
  display: inline-flex; align-items: center; gap: 4px;
}
.mfy-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.mfy-body h4 { font-family: var(--font-heading); font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -.005em; }
.mfy-reason {
  font-size: 12px; color: hsl(265 30% 30%);
  font-style: italic; margin: 0;
  background: hsl(265 60% 96%);
  padding: 6px 10px; border-radius: 8px;
  border-left: 3px solid hsl(265 60% 60%);
  line-height: 1.4;
}
.mfy-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.mfy-foot .price { font-weight: 700; font-size: 15px; }

/* ──────────── SUBSCRIBE & SAVE CARD ──────────── */
.sub-save-card {
  background: linear-gradient(135deg, hsl(152 48% 24%) 0%, hsl(152 48% 18%) 100%);
  color: #f3ead7;
  border-radius: var(--radius-2xl);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.sub-save-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 30%, hsl(43 90% 60% / .25), transparent 55%);
  pointer-events: none;
}
.sub-save-card .sub-text { position: relative; }
.sub-save-card .sub-eyebrow {
  font-family: var(--font-heading); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: hsl(43 80% 70%); font-weight: 700;
}
.sub-save-card h3 { font-family: var(--font-heading); font-size: 30px; line-height: 1.1; margin: 8px 0 6px; letter-spacing: -.015em; color: #faf3e2; }
.sub-save-card h3 em { font-style: italic; color: hsl(43 80% 70%); font-weight: 600; }
.sub-save-card p { font-size: 13px; color: hsl(43 30% 85%); margin: 0 0 14px; max-width: 380px; line-height: 1.55; }
.sub-perks { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.sub-perks li { font-size: 13px; color: hsl(43 30% 88%); display: flex; align-items: center; gap: 8px; }
.sub-perks li svg { color: hsl(43 90% 65%); flex-shrink: 0; }

.sub-calc {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-xl);
  padding: 22px; position: relative;
}
.sub-calc-toggle {
  display: flex; background: rgba(0,0,0,.25); border-radius: 9999px; padding: 3px; margin-bottom: 12px;
}
.sub-calc-toggle button {
  flex: 1; padding: 7px 10px; border-radius: 9999px;
  background: transparent; border: 0; color: hsl(43 30% 75%);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.sub-calc-toggle button.on { background: hsl(43 90% 65%); color: hsl(30 60% 15%); }
.sub-calc-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: hsl(43 30% 85%); padding: 8px 0; }
.sub-calc-row.divider { border-top: 1px solid rgba(255,255,255,.12); margin-top: 4px; padding-top: 12px; }
.sub-calc-row b { color: #f8eed8; }
.sub-calc-row.total { font-size: 14px; font-weight: 700; color: #faf3e2; }
.sub-calc-row.total span:last-child { font-family: var(--font-heading); font-size: 28px; color: hsl(43 90% 70%); font-weight: 700; }

/* ──────────── SUBSCRIBER-ONLY RAIL ──────────── */
.sub-only-rail {
  background: hsl(43 95% 96%);
  border: 1px dashed hsl(43 60% 70%);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  margin: 14px 0;
}
.so-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.so-badge {
  background: hsl(30 60% 18%); color: hsl(43 90% 70%);
  font-size: 10px; font-weight: 800; letter-spacing: .15em;
  padding: 5px 10px; border-radius: 6px;
}
.so-title { font-family: var(--font-heading); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.so-sub { font-size: 12px; color: hsl(30 25% 38%); margin-left: auto; max-width: 320px; text-align: right; }
.so-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.so-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--card-border));
  border-radius: 12px; padding: 12px;
  display: flex; gap: 10px; align-items: center;
  position: relative;
}
.so-bag { width: 56px; height: 70px; background: #0e0905; border-radius: 6px; padding: 3px; flex-shrink: 0; }
.so-info { min-width: 0; flex: 1; }
.so-info b { font-size: 12px; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-info small { font-size: 11px; color: hsl(var(--muted-foreground)); display: block; }
.so-info .price { font-weight: 700; font-size: 13px; }
.so-info .price .crossed { font-size: 11px; color: hsl(var(--muted-foreground)); text-decoration: line-through; margin-left: 4px; font-weight: 500; }
.so-lock { position: absolute; top: 6px; right: 8px; font-size: 9px; font-weight: 700; color: hsl(43 50% 35%); letter-spacing: .1em; }

/* ──────────── REORDER LAST-BUNDLE CARD ──────────── */
.reorder-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px; align-items: center;
}
.ro-bags { display: flex; align-items: end; height: 84px; }
.ro-bags > div { width: 50px; margin-right: -14px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)); }
.ro-bags > div:last-child { margin-right: 0; }
.ro-text h4 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.ro-text p { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 4px 0 0; }
.ro-text .ro-meta { font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 6px; }

/* Footer divider */
.footer-divider {
  margin-top: 48px; padding-top: 16px;
  border-top: 1px solid hsl(var(--border));
  text-align: center;
  font-size: 12px; color: hsl(var(--muted-foreground));
}

/* ════════════════════════════ HEADER EXPLORATIONS ════════════════════════════ */

/* ── Shared header helpers ── */
.hdr-icon-btn {
  position: relative;
  width: 38px; height: 38px;
  background: transparent; border: 1px solid hsl(var(--border));
  border-radius: 9999px; color: hsl(var(--foreground));
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.hdr-icon-btn:hover { background: hsl(var(--secondary)); }
.hdr-icon-count {
  position: absolute; top: -4px; right: -4px;
  background: hsl(var(--primary)); color: #fff;
  min-width: 16px; height: 16px; border-radius: 9999px;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.cart-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: hsl(var(--foreground)); color: hsl(var(--background));
  border: 0; padding: 9px 16px; border-radius: 9999px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.cart-btn span { background: hsl(var(--background) / .15); color: hsl(var(--background)); padding: 2px 8px; border-radius: 9999px; font-size: 11px; }
.cart-btn b { font-weight: 700; }
.cart-btn.primary { background: hsl(var(--primary)); }
.cart-btn.small { padding: 7px 12px; font-size: 12px; }

.nav-link {
  font-size: 14px; font-weight: 600;
  color: hsl(var(--foreground));
  text-decoration: none;
  padding: 8px 4px;
  position: relative;
}
.nav-link:hover { color: hsl(var(--primary)); }
.nav-link.on { color: hsl(var(--primary)); }
.nav-link.on::after {
  content: ''; position: absolute; bottom: 0; left: 4px; right: 4px;
  height: 2px; background: hsl(var(--primary)); border-radius: 9999px;
}

/* ── H2: Utility Nav ── */
.header-utility .header-inner { padding: 12px 36px; }
.utility-nav { display: flex; gap: 28px; align-items: center; }
.utility-right { display: flex; gap: 10px; align-items: center; }

/* ── H3: Announcement bar + centered logo ── */
.announcement-bar {
  background: hsl(30 50% 12%);
  color: hsl(43 50% 80%);
}
.announcement-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 9px 36px;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap;
}
.announcement-inner b { color: hsl(43 80% 70%); font-weight: 700; }
.announce-dot {
  width: 6px; height: 6px; border-radius: 9999px;
  background: hsl(0 70% 50%);
  box-shadow: 0 0 0 0 hsl(0 70% 50% / .7);
  animation: live-pulse 1.6s infinite;
}
.announce-clock {
  background: rgba(255,255,255,.08); padding: 3px 10px; border-radius: 9999px;
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600;
}
.header-centered .header-inner-centered {
  padding: 16px 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.header-centered .hdr-left { display: flex; align-items: center; gap: 18px; }
.header-centered .hdr-right { display: flex; align-items: center; gap: 10px; justify-self: end; }

/* ── H4: AI-first search header ── */
.header-ai-first { background: hsl(30 20% 14%); border-bottom-color: hsl(30 20% 22%); }
.header-ai-first .brand { color: hsl(43 50% 90%); }
.header-ai-first .nav-link { color: hsl(43 30% 80%); }
.header-ai-first .hdr-icon-btn { border-color: rgba(255,255,255,.18); color: hsl(43 30% 85%); }
.header-ai-first .hdr-icon-btn:hover { background: rgba(255,255,255,.07); }
.header-ai-first .cart-btn { background: hsl(43 90% 65%); color: hsl(30 60% 15%); }
.header-ai-first .cart-btn span { background: rgba(0,0,0,.18); color: hsl(30 60% 15%); }
.header-ai-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px 36px;
}
.ai-search-bar {
  display: flex; align-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9999px;
  padding: 6px 6px 6px 16px;
  gap: 10px;
  max-width: 640px; width: 100%;
  margin: 0 auto;
}
.ai-search-glyph {
  width: 28px; height: 28px; border-radius: 9999px;
  background: linear-gradient(135deg, hsl(265 70% 60%), hsl(43 80% 60%));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.ai-search-bar input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: hsl(43 50% 92%);
  font-size: 14px;
  font-family: var(--font-sans);
}
.ai-search-bar input::placeholder { color: hsl(43 30% 65%); }
.ai-search-go {
  background: hsl(43 90% 65%); color: hsl(30 60% 15%);
  border: 0; width: 36px; height: 36px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ai-suggest-row {
  max-width: 1320px; margin: 0 auto;
  padding: 4px 36px 14px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.ai-suggest-eyebrow { font-size: 11px; color: hsl(43 30% 65%); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ai-suggest {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: hsl(43 30% 88%);
  font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: 9999px;
  cursor: pointer;
}
.ai-suggest:hover { background: rgba(255,255,255,.14); }

/* ── H5: Personalized welcome ── */
.welcome-block { flex: 1; display: flex; justify-content: center; }
.welcome-line { display: flex; align-items: center; gap: 12px; }
.welcome-ava {
  width: 38px; height: 38px; border-radius: 9999px;
  background: linear-gradient(135deg, hsl(152 30% 45%), hsl(152 50% 25%));
  color: #fff; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.welcome-greeting { font-family: var(--font-heading); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.welcome-greeting b { font-weight: 700; }
.welcome-meta {
  font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 2px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.welcome-meta b { color: hsl(var(--foreground)); font-weight: 700; }
.tier-pill {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  padding: 2px 8px; border-radius: 4px;
}
.tier-pill.gold { background: hsl(43 90% 60%); color: hsl(30 60% 15%); }

/* ── H6: Integrated tier ── */
.header-integrated-inner {
  padding: 12px 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.inline-tier { display: flex; flex-direction: column; gap: 6px; max-width: 540px; margin: 0 auto; width: 100%; }
.inline-tier-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.inline-tier-eyebrow { font-family: var(--font-heading); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: hsl(var(--muted-foreground)); }
.inline-tier-state { color: hsl(var(--muted-foreground)); font-size: 12px; }
.inline-tier-state b { color: hsl(var(--foreground)); font-weight: 700; }
.inline-tier-count { font-size: 12px; font-weight: 700; color: hsl(var(--primary)); }
.inline-tier-bar {
  position: relative; height: 8px;
  background: hsl(var(--secondary)); border-radius: 9999px;
  overflow: hidden;
}
.inline-tier-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(152 55% 36%));
  transition: width .6s var(--ease-out);
}
.inline-tier-tick {
  position: absolute; top: -3px;
  width: 14px; height: 14px; border-radius: 9999px;
  background: hsl(var(--card)); border: 2px solid hsl(var(--border));
  transform: translateX(-50%);
  z-index: 2;
  transition: all .25s;
}
.inline-tier-tick.on { background: hsl(43 90% 60%); border-color: hsl(var(--primary)); }

/* ── H7: Editorial magazine ── */
.header-editorial { background: hsl(43 40% 96%); border-bottom: 1px solid hsl(43 30% 84%); }
.header-editorial-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 36px;
}
.editorial-meta-left, .editorial-meta-right {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-heading);
  font-size: 11px; letter-spacing: .18em; color: hsl(30 25% 40%); text-transform: uppercase; font-weight: 600;
}
.editorial-meta-right { align-items: flex-end; gap: 8px; }
.ed-issue { color: hsl(30 50% 20%); font-weight: 700; }
.ed-date { color: hsl(30 25% 40%); }
.ed-stat { color: hsl(30 35% 25%); }
.ed-mark { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ed-tagline {
  font-family: var(--font-heading); font-style: italic;
  font-size: 12px; color: hsl(30 30% 30%);
  letter-spacing: 0; font-weight: 400;
  text-transform: none;
}