:root {
  --gold: #c9a14a;
  --gold-dark: #a9822f;
  --black: #1a1a1a;
  --cream: #faf6f0;
  --cream-2: #f3ece1;
  --text: #2b2823;
  --muted: #7a736a;
  --radius: 6px;
}
[hidden] { display: none !important; }

/* Visually hidden but still readable by screen readers — used for form
   labels that are redundant on-screen (a placeholder already shows the
   same text) but still required for accessible name/label association. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

* { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
}
body {
  margin: 0;
  /* Emoji fonts appended as fallbacks — without them, some emoji used as
     icons (🚪 🛍 etc.) silently render as blank "tofu" boxes on Windows/
     Chrome depending on font-substitution behavior, while others happen
     to work; explicit fallbacks make every emoji glyph render consistently. */
  font-family: 'Helvetica Neue', Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: var(--text);
  background: #fff;
}

h1, h2, h3, h4 {
  font-family: Georgia, 'Times New Roman', serif;
  margin: 0;
}

a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

/* Top bar */
.topbar {
  background: var(--black);
  color: #ddd;
  font-size: 12px;
  letter-spacing: .03em;
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 8px 16px;
  flex-wrap: wrap;
}

/* Header */
.header {
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* PUBLIC-ONLY monogram — the text content lives in each page's HTML
   (e.g. <span class="logo-mark">N</span>) and must always be the single
   letter "N", never "NL". "NL" is the admin backend's own emblem
   (admin-shell.js's _nlEmblemSvg()) and must never appear on a
   storefront/account/checkout page, 404/maintenance page, or any other
   customer-facing surface. */
.logo-mark {
  width: 38px;
  height: 38px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 18px;
  color: var(--gold);
}
.logo-mark.dark { border-color: var(--gold); color: var(--gold); }
.logo-text {
  font-family: Georgia, serif;
  font-size: 15px;
  letter-spacing: .08em;
  line-height: 1.1;
}
.logo-text small {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .25em;
}
.footer-logo-image { height: 32px; max-width: 160px; object-fit: contain; }
.main-nav {
  display: flex;
  gap: 26px;
  font-size: 13px;
  letter-spacing: .04em;
  flex-wrap: wrap;
}
.main-nav a { color: var(--text); padding: 4px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.main-nav a:hover, .main-nav a.active { color: var(--gold-dark); border-bottom-color: var(--gold); }
.header-icons { display: flex; gap: 10px; align-items: center; }
.lang-toggle { display: flex; gap: 2px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
.lang-toggle button {
  background: #fff;
  border: none;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--muted);
}
.lang-toggle button.active { background: var(--gold); color: #fff; }
.lang-toggle button:hover:not(.active) { background: var(--cream); }
.icon-btn {
  background: none;
  border: none;
  font-size: 18px;
  position: relative;
  padding: 4px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--gold-dark);
  color: #fff;
  font-size: 10px;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-toggle { display: none; background: none; border: none; font-size: 22px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.mobile-nav { display: none; flex-direction: column; border-top: 1px solid #eee; }
.mobile-nav a { padding: 12px 24px; border-bottom: 1px solid #f3f3f3; font-size: 13px; letter-spacing: .04em; }
.mobile-nav.open { display: flex; }
/* Language switcher, wishlist, and compare are hidden from the header-icons
   row on mobile (not enough width) — this houses them inside the hamburger
   menu instead of just dropping them with no replacement. */
.mobile-nav-utility { display: flex; align-items: center; gap: 16px; padding: 12px 24px; border-bottom: 1px solid #f3f3f3; }
.mobile-nav-utility .lang-toggle { margin-right: auto; }
.mobile-nav-utility a { padding: 0; border-bottom: none; font-size: 13px; }

/* Hero */
.hero {
  background: linear-gradient(120deg, var(--cream) 0%, var(--cream-2) 100%);
  position: relative;
  overflow: hidden;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index: 1;
}
.hero-slides { position: relative; min-height: 520px; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
  background-image: var(--slide-bg-desktop, none);
  background-size: cover;
  background-position: center;
}
.hero-slide.active { opacity: 1; visibility: visible; }
@media (max-width: 640px) {
  .hero-slide { background-image: var(--slide-bg-mobile, var(--slide-bg-desktop, none)); }
}
@media (max-width: 900px) {
  .hero-slides { min-height: 760px; }
}
@media (max-width: 480px) {
  .hero-slides { min-height: 840px; }
}
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 64px 24px;
  position: relative;
  z-index: 2;
}
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255,255,255,.85);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 22px;
  cursor: pointer;
  transition: background .15s;
}
.hero-arrow:hover { background: #fff; }
.hero-arrow-left { left: 16px; }
.hero-arrow-right { right: 16px; }
.hero-dots {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.hero-dot.active { background: var(--gold); }
@media (max-width: 640px) {
  .hero-arrow { width: 32px; height: 32px; font-size: 18px; }
}
.hero-eyebrow {
  color: var(--gold-dark);
  letter-spacing: .15em;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}
.hero-text h1 {
  font-size: 42px;
  line-height: 1.2;
  margin-bottom: 18px;
}
.hero-sub { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 420px; margin-bottom: 28px; }
.btn-gold {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  padding: 14px 32px;
  letter-spacing: .08em;
  font-size: 13px;
  border: none;
  border-radius: var(--radius);
  transition: background .15s;
}
.btn-gold:hover { background: var(--gold-dark); }
.btn-gold.small, .btn-dark.small { padding: 10px 22px; font-size: 12px; }

.hero-image { display: flex; justify-content: center; }
.hero-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 90px);
  grid-template-rows: repeat(2, 110px);
  gap: 14px;
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
}
.hero-product-image { max-width: 100%; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.08); }
.hp {
  background: linear-gradient(160deg, #f4eee3, #e7dcc8);
  border: 1px solid #ddd0b6;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Georgia, serif;
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 6px;
}
.hp small { color: var(--muted); font-weight: 400; font-size: 8px; }
.hp-box { grid-row: span 2; flex-direction: column; background: #1a1a1a; color: var(--gold); gap: 8px; }
.hp-n { font-size: 24px; border: 1px solid var(--gold); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.hp-jar { grid-row: span 1; }

/* Categories */
.categories { background: #fff; padding: 72px 24px 56px; }
.categories-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
/* A fixed-column grid stretches a single real category across 6 empty
   columns, reading as one lonely tile in a wide blank section — flex-wrap
   with a fixed item width keeps any count (1 to 6+) centered and deliberate. */
.categories-inner .cat-item { width: 160px; flex: 0 0 auto; }
.cat-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: var(--radius); transition: background .15s; }
.cat-item:hover { background: var(--cream); }
.cat-icon {
  width: 56px;
  height: 56px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--gold-dark);
  margin-bottom: 4px;
  overflow: hidden;
}
.cat-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cat-name { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.cat-link { font-size: 11px; color: var(--muted); }

/* Section */
.section { max-width: 1280px; margin: 0 auto; padding: 80px 24px 88px; }
@media (max-width: 640px) {
  .section { padding: 56px 16px 64px; }
  .categories { padding: 48px 16px 40px; }
}
.section-title {
  text-align: center;
  font-size: 26px;
  letter-spacing: .05em;
  margin-bottom: 36px;
}
.section-title .star { color: var(--gold); font-size: 14px; vertical-align: middle; }

.shop-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}
.shop-filters select {
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  font-size: 13px;
  background: #fff;
}

/* Product grid / cards */
.carousel { position: relative; }
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
#featuredGrid {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
#featuredGrid::-webkit-scrollbar { display: none; }
#featuredGrid .product-card { flex: 0 0 calc((100% - 80px) / 5); min-width: 200px; }
@media (max-width: 1024px) {
  #featuredGrid .product-card { flex: 0 0 calc((100% - 40px) / 3); }
}
@media (max-width: 640px) {
  #featuredGrid .product-card { flex: 0 0 calc((100% - 20px) / 2); }
}
.product-card {
  border: 1px solid #eee;
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .28s cubic-bezier(.25,.46,.45,.94), transform .28s cubic-bezier(.25,.46,.45,.94), border-color .28s;
  background: #fff;
}
.product-card:hover { box-shadow: 0 22px 56px rgba(0,0,0,.13); transform: translateY(-7px); border-color: #e2d5be; }
.product-img {
  aspect-ratio: 1 / 1;
  /* --pimg-bg/--pimg-pad are set inline per-product by renderProductCard()
     (script.js/collection.js) from the admin's card_background/
     image_padding fields; these are just the fallback for products that
     haven't customized them. */
  background: var(--pimg-bg, linear-gradient(160deg, #f6f1e8, #e9ddc4));
  padding: var(--pimg-pad, 12px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  color: var(--gold-dark);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.badge-stack {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.product-img .badge, .quickview-media .badge {
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: .03em;
}
.badge-staff    { background: #6b4226; }
.badge-organic  { background: #4c7a3a; }
.badge-vegan    { background: #3f8f6e; }
.badge-cf       { background: #8659a3; }
/* --pimg-fit/--pimg-pos are set inline per-product, read from the admin's
   image_fit/image_position fields — 'natural' maps to JS setting
   object-fit:none (no CSS keyword does that on its own). No hover-zoom:
   a forced zoom on hover would crop cover-mode images further and fights
   the "no unintended zoom" requirement outright. */
.product-img-real {
  width: 100%; height: 100%;
  object-fit: var(--pimg-fit, contain);
  object-position: var(--pimg-pos, center);
  cursor: pointer;
  pointer-events: none;
  display: block;
}
.product-img-hover {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: var(--pimg-fit, contain);
  object-position: var(--pimg-pos, center);
  pointer-events: none;
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
}
.product-card:hover .product-img-hover { opacity: 1; }
.product-price-old { font-size: 13px; color: var(--muted); text-decoration: line-through; margin-right: 6px; }
.variant-selectors { display: flex; gap: 6px; margin-bottom: 8px; }
.variant-select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  background: #fff;
}
.add-cart:disabled { opacity: .4; cursor: not-allowed; }
.add-cart:disabled:hover { background: var(--cream-2); color: var(--gold-dark); }
.product-body { padding: 14px 14px 16px; }
.product-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; line-height: 1.35; }
.product-name a { color: inherit; text-decoration: none; transition: color .15s; }
.product-name a:hover { color: var(--gold-dark); }
.product-tag { font-size: 11px; color: var(--muted); margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
.product-rating { font-size: 12px; color: var(--gold); margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.product-rating span { color: var(--muted); font-size: 11px; }
.product-stock { font-size: 11px; font-weight: 600; letter-spacing: .03em; margin-bottom: 8px; }
.product-stock.in-stock  { color: #2e7d32; }
.product-stock.low-stock { color: #d97706; }
.product-stock.out-stock { color: #9e9e9e; }
.product-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-price { font-size: 16px; font-weight: 700; }
.add-cart {
  background: var(--cream-2);
  border: none;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  font-size: 15px;
  color: var(--gold-dark);
  transition: background .17s, transform .12s, box-shadow .17s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.add-cart:hover { background: var(--gold); color: #fff; box-shadow: 0 4px 14px rgba(201,161,74,.38); }
.add-cart:active { transform: scale(.88); }
.add-cart.added { background: var(--gold); color: #fff; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #eee;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  z-index: 2;
}
.carousel-arrow.left { left: -18px; }
.carousel-arrow.right { right: -18px; }

.view-all-wrap { text-align: center; margin-top: 36px; }
.btn-dark {
  display: inline-block;
  background: var(--black);
  color: #fff;
  padding: 14px 32px;
  letter-spacing: .08em;
  font-size: 13px;
  border-radius: var(--radius);
  transition: background .15s;
}
.btn-dark:hover { background: #333; }

/* Promos */
.promos {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.promo {
  border-radius: 10px;
  padding: 36px;
  display: flex;
  align-items: center;
  gap: 24px;
  background-size: cover;
  background-position: center;
}
.promo-light { background: var(--cream); }
.promo-icon { font-size: 40px; }
.promo h3 { font-size: 22px; margin-bottom: 4px; }
.promo p { font-size: 12px; letter-spacing: .05em; color: var(--muted); margin: 0 0 14px; }
.promo-dark { background: var(--black); color: #fff; justify-content: space-between; }
.promo-dark p { color: #bbb; }
.promo-off {
  font-family: Georgia, serif;
  font-size: 30px;
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 50%;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
}
.promo-off small { font-size: 12px; }

/* Trust bar */
.trustbar {
  background: var(--black);
  color: #fff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
  gap: 24px;
}
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-item span { font-size: 26px; color: var(--gold); }
.trust-item strong { display: block; font-size: 13px; letter-spacing: .03em; }
.trust-item p { font-size: 12px; color: #aaa; margin: 2px 0 0; }

/* Footer */
.footer { background: #111; color: #ccc; padding: 56px 0 0; }
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: 28px;
}
.footer-col p { font-size: 13px; line-height: 1.6; color: #999; margin: 16px 0; }
.footer-col h4 { color: #fff; font-size: 13px; letter-spacing: .06em; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 13px; color: #999; margin-bottom: 10px; }
.footer-col a:hover { color: var(--gold); }
.socials { display: flex; gap: 12px; font-size: 18px; }
.newsletter { display: flex; flex-direction: column; gap: 10px; }
.newsletter input {
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
}
.newsletter button {
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-size: 12px;
  letter-spacing: .06em;
}
.newsletter button:hover { background: var(--gold-dark); }
.footer-bottom {
  border-top: 1px solid #2a2a2a;
  margin-top: 40px;
  padding: 20px 24px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #777;
}
.payment-icons { display: flex; gap: 14px; font-size: 11px; letter-spacing: .03em; }

/* Cart drawer — one scrollable region (everything that grows with cart
   size: items, recs, coupon row, address fields) plus one pinned footer
   (order summary + checkout button) that's never covered and never
   scrolls away. Previously the checkout form/summary were plain flex
   siblings after the scroll region with no scroll affordance of their
   own, so on a full cart the submit button could end up unreachable. */
.cart-drawer {
  position: fixed;
  top: 0;
  right: -380px;
  width: 360px;
  max-width: 90vw;
  height: 100%;
  background: #fff;
  box-shadow: -10px 0 30px rgba(0,0,0,.15);
  /* Must outrank .header's z-index:200 — the header is position:sticky, and
     at scrollTop 0 (before it "sticks") it paints at its in-flow position,
     which on mobile can land mid-viewport under a tall/wrapping announcement
     bar. With the old z-index:100 that meant the header visibly punched
     through the open cart drawer instead of the drawer being the topmost
     modal, as aria-modal="true" promises it is. */
  z-index: 500;
  transition: right .25s ease;
  display: flex;
  flex-direction: column;
}
.cart-drawer.open { right: 0; }
.cart-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.cart-drawer-header button { background: none; border: none; font-size: 18px; }
/* The single scroll region — min-height:0 is required for a flex child
   with flex:1 to actually shrink and scroll instead of overflowing its
   flex parent silently (the classic nested-flexbox scroll bug). */
.cart-drawer-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cart-drawer-body { padding: 20px; }
.cart-empty { color: var(--muted); font-size: 14px; }
.cart-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f3f3f3; font-size: 13px; }
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 490; /* just below .cart-drawer, still above .header's 200 */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
/* Toggled on <body> for as long as the drawer is open — the site already
   used this exact pattern for the search overlay and image lightbox, just
   never applied it to the cart drawer, so background page scroll wasn't
   prevented while the drawer was open. */
body.cart-open { overflow: hidden; }

.cart-checkout { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.cart-checkout input, .cart-checkout select { padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
.cart-coupon-row { display: flex; gap: 8px; padding: 0 20px 14px; }
.cart-coupon-row input { flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
.checkout-confirm { padding: 0 20px 20px; font-size: 13px; color: var(--gold-dark); font-weight: 600; }
.checkout-confirm.error { color: #b3261e; }
/* Pinned footer — never inside the scroll region, never covers cart
   items; only ever visible when there's something in the cart. */
.cart-drawer-footer {
  flex-shrink: 0;
  border-top: 1px solid #eee;
  padding: 14px 20px 20px;
  background: #fff;
}
.cart-drawer-footer .btn-gold {
  width: 100%; text-align: center; border: none; cursor: pointer;
  min-height: 44px;
}
.cart-drawer-footer .btn-gold:disabled { opacity: .6; cursor: default; }

/* Product image lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-overlay[hidden] { display: none; }

/* Promo popup (reuses .lightbox-overlay/.lightbox-close for backdrop + X) */
.popup-box {
  background: #fff;
  border-radius: 10px;
  padding: 36px 32px;
  max-width: 420px;
  text-align: center;
}
.popup-image { width: 100%; max-height: 220px; object-fit: cover; border-radius: 6px; margin-bottom: 18px; }
.popup-title { font-family: Georgia, serif; font-size: 24px; margin-bottom: 10px; }
.popup-body { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }

/* Header search overlay */
.search-overlay { align-items: flex-start; }
.search-box {
  background: #fff;
  border-radius: 10px;
  max-width: 900px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  margin-top: 8vh;
  padding: 28px;
  text-align: left;
}
.search-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 18px;
  font-family: inherit;
}
.search-results { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.search-empty { color: var(--muted); text-align: center; padding: 20px 0; }

/* Quick View modal */
.quickview-box {
  background: #fff;
  border-radius: 10px;
  max-width: 900px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 32px;
  text-align: left;
}
/* Shared by the product detail page main image and the Quick View modal.
   --pimg-* custom properties are set per-product by product.js/script.js
   from the same admin fields the grid card uses, so both surfaces always
   agree with each other and with the admin's setting. */
.quickview-main-image {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: var(--pimg-fit, contain);
  object-position: var(--pimg-pos, center);
  border-radius: 8px;
  background: var(--pimg-bg, var(--cream-2));
  padding: var(--pimg-pad, 16px);
  box-sizing: border-box;
}
.quickview-media { position: relative; }
.quickview-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.quickview-thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; opacity: .7; }
.quickview-thumbs img.active { opacity: 1; border-color: var(--gold); }
.quickview-thumb-video {
  width: 56px; height: 56px; border-radius: 4px; cursor: pointer;
  border: 2px solid transparent; opacity: .7;
  background: var(--cream-2); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.quickview-thumb-video.active { opacity: 1; border-color: var(--gold); }
.btn-gold:disabled { opacity: .5; cursor: not-allowed; }
.btn-gold:disabled:hover { background: var(--gold); }
.quickview-info h2 { font-family: Georgia, serif; font-size: 26px; margin: 6px 0 10px; }
.quickview-price { font-size: 20px; font-weight: 700; color: var(--gold-dark); margin-bottom: 12px; }
.quickview-desc { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
.quickview-related, .quickview-fbt, .quickview-reviews { margin-top: 22px; }
.quickview-review-item { border-top: 1px solid #eee; padding: 10px 0; font-size: 13px; }
.quickview-review-item p { margin: 4px 0; color: var(--muted); }
.quickview-review-item span { font-size: 11px; color: var(--muted); }
.review-verified-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 20px;
  background: rgba(46,125,50,.1); color: #2e7d32; font-size: 10px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; vertical-align: middle;
}
#reviewForm { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
#reviewForm input, #reviewForm select, #reviewForm textarea { padding: 8px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; font-family: inherit; }
.quickview-related h4, .quickview-fbt h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; color: var(--muted); }
.quickview-mini-grid { display: flex; gap: 12px; overflow-x: auto; }
.quickview-mini-card { flex-shrink: 0; width: 110px; text-align: center; cursor: pointer; }
.quickview-mini-card img { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; background: var(--cream-2); margin-bottom: 6px; }
.quickview-mini-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 90px; border-radius: 6px; background: var(--cream-2); margin-bottom: 6px; font-size: 10px; letter-spacing: .04em; color: var(--gold); text-align: center; line-height: 1.3; }
.quickview-mini-card span { font-size: 11px; display: block; }
.product-card .quickview-btn,
.product-card .wishlist-btn,
.product-card .compare-btn {
  position: absolute;
  bottom: 8px;
  background: rgba(255,255,255,.9);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
}
.product-card .quickview-btn { right: 8px; }
.product-card .wishlist-btn {
  right: 44px;
  color: #bbb;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s, transform .22s, box-shadow .22s, background .18s;
}
.product-card .wishlist-btn svg { width: 16px; height: 16px; display: block; transition: fill .22s, stroke .22s; }
.product-card .wishlist-btn:hover { color: #c0392b; transform: scale(1.18); }
.product-card .wishlist-btn.active {
  color: #c0392b;
  background: rgba(255,255,255,.97);
  box-shadow: 0 0 0 2px rgba(192,57,43,.18), 0 2px 10px rgba(192,57,43,.22);
}
.product-card .wishlist-btn.active svg { fill: #c0392b; stroke: #c0392b; }
.product-card .wishlist-btn.heart-pop { animation: nx-heart-pop .42s cubic-bezier(.36,.07,.19,.97) both; }
.product-card .compare-btn { right: 80px; color: var(--muted); }
.product-card .compare-btn.active { color: var(--gold-dark); background: var(--cream); }
@media (max-width: 720px) {
  .quickview-box { grid-template-columns: 1fr; padding: 20px; }
}
.lightbox-content {
  max-width: 90vw;
  max-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lightbox-image {
  max-width: 90vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  /* Zoom/pan: transform is driven entirely by JS (translate + scale) so
     panning and pinch-zoom can update it every frame without fighting a
     CSS transition; the transition below only smooths the click-to-zoom
     toggle, and is switched off for the duration of an active drag/pinch. */
  cursor: zoom-in;
  touch-action: none;
  transform-origin: 0 0;
  transition: transform .25s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-image.is-zoomed { cursor: grab; }
.lightbox-image.is-panning { cursor: grabbing; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .lightbox-image { transition: none; }
}
/* Product-page main image: same zoom affordance as the lightbox it opens,
   shown only where zoom is actually wired up (not the Quick View modal,
   which shares .quickview-main-image but doesn't open this lightbox). */
.pdp-zoomable { cursor: zoom-in; }
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,.25); }
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  font-size: 26px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
}
.lightbox-arrow:hover { background: rgba(255,255,255,.25); }
.lightbox-arrow-left { left: 20px; }
.lightbox-arrow-right { right: 20px; }
.lightbox-thumbs {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 60px;
}
.lightbox-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  opacity: .6;
  cursor: pointer;
  transition: opacity .15s, border-color .15s;
}
.lightbox-thumb:hover { opacity: .85; }
.lightbox-thumb.active { opacity: 1; border-color: var(--gold); }

@media (max-width: 640px) {
  .lightbox-arrow { width: 38px; height: 38px; font-size: 20px; }
  .lightbox-close { width: 34px; height: 34px; font-size: 16px; top: 12px; right: 12px; }
  .lightbox-thumbs { padding: 0 16px; bottom: 12px; }
  .lightbox-thumb { width: 40px; height: 40px; }
}

/* Responsive */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .mobile-toggle { display: inline-flex; }
  .header-icons { margin-left: auto; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .promos { grid-template-columns: 1fr; }
  .trustbar { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-text { order: 2; }
  .hero-text h1 { font-size: 32px; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-product-grid { grid-template-columns: repeat(3, 70px); grid-template-rows: repeat(2, 80px); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; }
  .carousel-arrow { display: none; }
  .header-inner { padding: 14px 14px; gap: 10px; }
  .header-icons { gap: 6px; }
  /* Wishlist/compare/lang already have a home in the mobile hamburger menu
     (.mobile-nav-utility), and Join Ambassador is duplicated there too
     (.mobile-join-btn) — hiding all of them from the header-icons row here
     is what actually fixes the underlying bug: with every one of these
     visible, .header-icons overflowed the 390px viewport and pushed the
     hamburger toggle itself off-screen and untappable, silently breaking
     all primary navigation on mobile.
     IMPORTANT: scoped to .header-icons specifically — a bare ".lang-toggle"
     selector here matched the mobile-nav-utility's OWN lang-toggle too and
     hid it, silently breaking language switching in the mobile menu itself
     (the exact thing this rule exists to preserve). */
  .header-icons .lang-toggle, #searchBtn, .header-icons a[href="compare.html"],
  .header-icons a[href="wishlist.html"], .btn-join-ambassador { display: none !important; }
}
@media (max-width: 375px) {
  .hero-text h1 { font-size: 26px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* product.html reuses the .quickview-box layout as a real page section
   instead of a modal — drop the viewport-clamped height/width that only
   made sense inside the lightbox overlay. */
#productDetail.quickview-box { width: auto; max-height: none; overflow-y: visible; margin-top: 32px; }
@media (max-width: 720px) {
  #productDetail.quickview-box { grid-template-columns: 1fr; padding: 20px; }
}

/* Legal / company informational pages (privacy, terms, FAQ, about, etc.) */
.legal-content { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.legal-content h1 { font-size: 32px; margin-bottom: 6px; }
.legal-updated { color: var(--muted); font-size: 13px; margin-bottom: 36px; }
.legal-content h2 { font-size: 19px; margin: 36px 0 12px; }
.legal-content h3 { font-size: 15px; margin: 22px 0 8px; }
.legal-content p { line-height: 1.7; margin: 0 0 14px; color: var(--text); }
.legal-content ul, .legal-content ol { line-height: 1.7; margin: 0 0 14px; padding-left: 22px; color: var(--text); }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--gold-dark); text-decoration: underline; }
.legal-intro { font-size: 15px; color: var(--muted); margin-bottom: 30px; }
.legal-placeholder {
  background: #fff3cd;
  border-radius: 3px;
  padding: 1px 5px;
  font-style: italic;
}
.legal-toc { background: var(--cream); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 36px; }
.legal-toc p { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 10px; }
.legal-toc ol { columns: 2; padding-left: 18px; margin: 0; }
.legal-toc a { color: var(--text); text-decoration: none; font-size: 13px; }
.legal-toc a:hover { color: var(--gold-dark); }
.faq-category { margin-top: 36px; }
.faq-list details {
  border-bottom: 1px solid #eee;
  padding: 14px 0;
}
.faq-list summary {
  font-family: Georgia, serif;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: '+ '; color: var(--gold); display: inline-block; transition: transform .2s; }
.faq-list details[open] summary::before { content: '+ '; transform: rotate(45deg); }
.faq-list details p { margin-top: 10px; color: var(--muted); animation: faqAnswerIn .2s ease; }
@keyframes faqAnswerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.legal-crosslinks {
  max-width: 760px;
  margin: 0 auto 60px;
  padding: 24px 24px 0;
  border-top: 1px solid #eee;
}
.legal-crosslinks p { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 12px; }
.legal-crosslinks-grid { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legal-crosslinks-grid a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .15s; }
.legal-crosslinks-grid a:hover { color: var(--gold-dark); }
.legal-crosslinks-grid span.current { font-size: 13px; color: var(--text); font-weight: bold; }
.about-hero { background: var(--cream); padding: 64px 24px; text-align: center; }
.about-hero h1 { font-size: 36px; margin-bottom: 14px; }
.about-hero p { max-width: 560px; margin: 0 auto; color: var(--muted); font-size: 15px; line-height: 1.7; }
.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 980px; margin: 0 auto 60px; padding: 0 24px; }
.about-values div { text-align: center; padding: 24px 16px; }
.about-values span { font-size: 28px; display: block; margin-bottom: 10px; }
.about-values h3 { font-size: 14px; letter-spacing: .04em; margin-bottom: 8px; }
.about-values p { font-size: 13px; color: var(--muted); line-height: 1.6; }
@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
  .about-values { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   PRODUCT CARD — PREMIUM ENHANCEMENTS
   ═══════════════════════════════════════════════════════ */

/* Quick-View hover overlay on product image */
.product-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,26,26,.38);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .28s;
  pointer-events: none;
}
.product-img:hover .product-img-overlay { opacity: 1; }
.product-img-overlay span {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(201,161,74,.82);
  padding: 7px 16px;
  border-radius: 2px;
}

/* Heart animation keyframe */
@keyframes nx-heart-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.55); }
  55%  { transform: scale(.82); }
  75%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ── Wishlist Toast ─────────────────────────────────── */
.nx-wl-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 30px;
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 9999;
}
.nx-wl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.nx-wl-toast.wl-added { border-bottom: 2px solid #c0392b; }
.nx-wl-toast.wl-removed { border-bottom: 2px solid #9e9e9e; }

/* ── Auth / Sign-in Prompt Modal ────────────────────── */
.nx-auth-prompt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  z-index: 8888;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
.nx-auth-prompt-overlay.open { opacity: 1; pointer-events: auto; }
.nx-auth-prompt {
  background: #fff;
  border-radius: 10px;
  padding: 36px 32px 28px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  transform: translateY(12px);
  transition: transform .22s;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
}
.nx-auth-prompt-overlay.open .nx-auth-prompt { transform: translateY(0); }
.nx-auth-prompt-icon { font-size: 32px; margin-bottom: 12px; }
.nx-auth-prompt h3 { font-size: 20px; margin-bottom: 8px; }
.nx-auth-prompt p  { font-size: 14px; color: var(--muted); margin: 0 0 22px; line-height: 1.55; }
.nx-auth-prompt-btns { display: flex; flex-direction: column; gap: 10px; }
.nx-auth-prompt-btns a,
.nx-auth-prompt-btns button {
  display: block;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nx-auth-btn-primary { background: var(--gold); color: #fff; }
.nx-auth-btn-primary:hover { background: var(--gold-dark); }
.nx-auth-btn-secondary { background: var(--cream-2); color: var(--gold-dark); }
.nx-auth-btn-secondary:hover { background: #e5d9c4; }
.nx-auth-btn-ghost { background: none; color: var(--muted); font-size: 12px; padding: 6px; }
.nx-auth-btn-ghost:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════
   WISHLIST PAGE — PREMIUM REDESIGN
   ═══════════════════════════════════════════════════════ */
.wl-page { max-width: 1140px; margin: 0 auto; padding: 48px 20px 80px; }
.wl-page-hd { display: flex; align-items: baseline; gap: 14px; margin-bottom: 36px; }
.wl-page-hd h1 { font-size: 32px; }
.wl-count { font-size: 14px; color: var(--muted); }
.wl-page-empty {
  text-align: center;
  padding: 80px 20px;
}
.wl-page-empty .wl-empty-icon { font-size: 52px; margin-bottom: 16px; opacity: .35; }
.wl-page-empty h2 { font-size: 22px; margin-bottom: 10px; }
.wl-page-empty p { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.wl-actions-row { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.wl-action-btn {
  padding: 9px 18px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  background: #fff;
  color: var(--text);
  transition: background .14s, border-color .14s;
}
.wl-action-btn:hover { background: var(--cream-2); border-color: #c9a14a40; }
.wl-action-btn.gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.wl-action-btn.gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}
.wl-card {
  border: 1px solid #eee;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.wl-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,.1); transform: translateY(-4px); border-color: #e2d5be; }
.wl-card-img {
  display: block;
  aspect-ratio: 1/1;
  background: linear-gradient(160deg, #f6f1e8, #e9ddc4);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.wl-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.wl-card:hover .wl-card-img img { transform: scale(1.06); }
.wl-card-body { padding: 14px 14px 16px; }
.wl-card-brand { font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.wl-card-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; line-height: 1.35; }
.wl-card-name a { color: inherit; text-decoration: none; }
.wl-card-name a:hover { color: var(--gold-dark); }
.wl-card-price { font-size: 15px; font-weight: 700; color: var(--gold-dark); margin-bottom: 6px; }
.wl-card-stock { font-size: 11px; font-weight: 600; margin-bottom: 12px; }
.wl-card-stock.in-stock  { color: #2e7d32; }
.wl-card-stock.low-stock { color: #d97706; }
.wl-card-stock.out-stock { color: #9e9e9e; }
.wl-card-btns { display: flex; gap: 8px; }
.wl-btn-cart {
  flex: 1;
  padding: 9px 0;
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .14s, transform .1s;
}
.wl-btn-cart:hover { background: var(--gold-dark); }
.wl-btn-cart:active { transform: scale(.94); }
.wl-btn-cart:disabled { background: #ccc; cursor: not-allowed; }
.wl-btn-remove {
  width: 36px;
  height: 36px;
  background: var(--cream-2);
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .14s, color .14s;
  flex-shrink: 0;
}
.wl-btn-remove:hover { background: #fdecea; color: #c0392b; }
.wl-auth-notice {
  background: var(--cream);
  border: 1px solid #e8dcc8;
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wl-auth-notice a { color: var(--gold-dark); font-weight: 600; }
@media (max-width: 600px) {
  .wl-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .wl-page { padding: 28px 14px 60px; }
  .wl-page-hd h1 { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════
   LUXURY PREMIUM UPGRADE — v3
   ═══════════════════════════════════════════════════════ */

/* ── Product card: cursor + gold glow ── */
.product-card { cursor: pointer; }
.product-card:hover {
  box-shadow:
    0 24px 60px rgba(0,0,0,.13),
    0 0 0 1px rgba(201,161,74,.2),
    0 6px 20px rgba(201,161,74,.12);
}

/* ── Quick View pill (appears on image hover) ── */
.qv-pill {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(201,161,74,.55);
  color: var(--gold-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s, background .15s, color .15s;
  z-index: 4;
}
.product-img:hover .qv-pill { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.qv-pill:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
@media (hover: none) { .qv-pill { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } }

/* Replace overlay text with simple scrim */
.product-img-overlay span { display: none; }

/* ── Badge colour variants ── */
.badge { font-weight: 800; }
.badge-new  { background: #1a5276; }
.badge-sale { background: #c0392b; }
.badge-best { background: var(--gold-dark); }
.badge-ltd  { background: #2e4057; }
.badge-excl { background: #1a1a1a; }
.badge-out  { background: #8a8a8a; }

/* ── Loading skeletons ── */
@keyframes nx-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton-card { pointer-events: none; }
.skeleton-img {
  width: 100%;
  aspect-ratio: 1/1;
  background: linear-gradient(90deg, #f0ebe3 25%, #e8e0d5 50%, #f0ebe3 75%);
  background-size: 1200px 100%;
  animation: nx-shimmer 1.5s ease-in-out infinite;
}
.skeleton-body { padding: 14px 14px 16px; }
.skeleton-line {
  height: 11px;
  border-radius: 4px;
  margin-bottom: 9px;
  background: linear-gradient(90deg, #f0ebe3 25%, #e8e0d5 50%, #f0ebe3 75%);
  background-size: 1200px 100%;
  animation: nx-shimmer 1.5s ease-in-out infinite;
}
.skeleton-line.short  { width: 50%; }
.skeleton-line.w-half { width: 35%; }
.skeleton-line.lg     { height: 14px; }

/* ── Add-to-cart success animation ── */
@keyframes nx-check-pop {
  0%   { transform: scale(.7); opacity: 0; }
  55%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.add-cart.success {
  background: #2e7d32 !important;
  color: #fff !important;
  animation: nx-check-pop .32s ease both;
}

/* ── Cart drawer redesign ── */
.cart-drawer { width: 400px; max-width: 92vw; right: -420px; }
.cart-drawer-header { padding: 18px 20px; }
.cart-drawer-header h3 { font-size: 16px; }
.cart-drawer-header button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #eee; background: #fafafa;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .14s, border-color .14s;
}
.cart-drawer-header button:hover { background: #fff; border-color: #c0392b; color: #c0392b; }
.cart-drawer-body { padding: 20px 20px 4px; }

.cart-empty-state {
  text-align: center;
  padding: 48px 20px;
}
.cart-empty-state .ce-icon { font-size: 46px; margin-bottom: 12px; opacity: .28; display: block; }
.cart-empty-state p { font-size: 14px; color: var(--muted); margin-bottom: 18px; }

/* Cart items */
.cart-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f3f3f3;
  position: relative;
  align-items: flex-start;
}
.cart-item-img {
  width: 66px; height: 66px;
  border-radius: 6px;
  background: var(--cream-2);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #eee;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-item-img-ph { width: 100%; height: 100%; background: linear-gradient(160deg,#f6f1e8,#e9ddc4); }
.cart-item-info { flex: 1; min-width: 0; padding-right: 22px; }
.cart-item-name { font-size: 12px; font-weight: 600; line-height: 1.4; margin-bottom: 2px; }
.cart-item-variant { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.cart-item-price { font-size: 13px; font-weight: 700; color: var(--gold-dark); }
.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.cart-qty-btn {
  width: 24px; height: 24px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .14s, background .14s;
  color: var(--text);
  flex-shrink: 0;
}
.cart-qty-btn:hover { border-color: var(--gold); background: var(--cream); }
.cart-qty-count { font-size: 13px; font-weight: 600; min-width: 16px; text-align: center; }
.cart-item-remove {
  position: absolute;
  top: 14px; right: 0;
  background: none; border: none;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: #ccc; cursor: pointer;
  padding: 0;
  transition: color .14s;
}
.cart-item-remove:hover { color: #c0392b; }
.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0 6px;
  font-size: 13px;
  font-weight: 700;
  border-top: 2px solid #eee;
  margin-top: 2px;
}
.cart-discount-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #2e7d32;
  padding-bottom: 4px;
}

/* Cart recommendations */
.cart-recs { border-top: 1px solid #f0f0f0; padding-top: 0; }
.cart-recs-label { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; padding: 14px 0 8px; }
.cart-recs-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; }
.cart-recs-list::-webkit-scrollbar { display: none; }
.cart-rec-item { flex-shrink: 0; width: 80px; cursor: pointer; text-align: center; }
.cart-rec-img {
  width: 80px; height: 80px;
  border-radius: 6px; overflow: hidden;
  background: var(--cream-2);
  margin-bottom: 5px;
  border: 1px solid #eee;
  transition: border-color .14s;
}
.cart-rec-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-rec-item:hover .cart-rec-img { border-color: var(--gold); }
.cart-rec-name { font-size: 10px; line-height: 1.3; color: var(--text); font-weight: 500; }
.cart-rec-price { font-size: 10px; color: var(--gold-dark); font-weight: 700; margin-top: 1px; }

/* ── Quick View close button ── */
.quickview-overlay { align-items: center; justify-content: center; }
.lightbox-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: background .15s, border-color .15s, transform .15s;
  color: #333;
}
.lightbox-close:hover { background: #fff; border-color: var(--gold); color: var(--gold-dark); transform: scale(1.1); }

/* QV stock & shipping */
.qv-stock {
  font-size: 12px; font-weight: 600;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.qv-stock-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.qv-stock.in-stock  { color: #2e7d32; }
.qv-stock.low-stock { color: #d97706; }
.qv-stock.out-stock { color: #9e9e9e; }
.qv-stock.in-stock  .qv-stock-dot { background: #2e7d32; }
.qv-stock.low-stock .qv-stock-dot { background: #d97706; }
.qv-stock.out-stock .qv-stock-dot { background: #9e9e9e; }
.qv-shipping {
  font-size: 12px; color: var(--muted);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 7px;
  line-height: 1.4;
}
.qv-shipping svg { flex-shrink: 0; opacity: .7; }

/* ── Review improvements ── */
.review-verified {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; color: #2e7d32; font-weight: 700;
  background: #e8f5e9; padding: 2px 7px; border-radius: 3px;
  margin-left: 8px; letter-spacing: .02em;
}
.review-helpful-btn {
  background: none; border: 1px solid #e0e0e0; border-radius: 3px;
  font-size: 11px; color: var(--muted); padding: 3px 9px;
  cursor: pointer; transition: border-color .14s, color .14s;
  margin-top: 6px; display: inline-flex; align-items: center; gap: 4px;
}
.review-helpful-btn:hover { border-color: var(--gold); color: var(--gold-dark); }
.review-helpful-btn.voted { border-color: var(--gold); color: var(--gold-dark); background: var(--cream); }
.review-photos { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.review-photo { width: 54px; height: 54px; border-radius: 4px; object-fit: cover; cursor: zoom-in; border: 1px solid #eee; }
.review-login-gate {
  background: var(--cream); border: 1px solid #e8dcc8; border-radius: 6px;
  padding: 14px 18px; font-size: 13px; color: var(--muted);
  margin-top: 12px; text-align: center; line-height: 1.5;
}
.review-login-gate a { color: var(--gold-dark); font-weight: 600; }
.review-photo-upload { margin-top: 8px; }
.review-photo-preview { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.review-photo-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid #eee; }
.review-photo-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px dashed #ddd; border-radius: 4px;
  font-size: 12px; color: var(--muted); cursor: pointer;
  transition: border-color .14s, color .14s;
}
.review-photo-label:hover { border-color: var(--gold); color: var(--gold-dark); }
#reviewForm input, #reviewForm select, #reviewForm textarea { cursor: text; }

/* ── Premium empty states ── */
.nx-empty-state { text-align: center; padding: 56px 20px; }
.nx-empty-state .nx-ei { margin-bottom: 16px; opacity: .22; display: block; }
.nx-empty-state h3 { font-size: 19px; margin-bottom: 8px; }
.nx-empty-state p  { font-size: 14px; color: var(--muted); margin: 0 auto 22px; max-width: 260px; line-height: 1.6; }

/* ── Mobile luxury adjustments ── */
@media (max-width: 640px) {
  .add-cart { width: 40px; height: 40px; font-size: 16px; }
  .product-card .wishlist-btn,
  .product-card .compare-btn { width: 36px; height: 36px; }
  .cart-drawer { width: 100vw; right: -100vw; }
  .cart-drawer.open { right: 0; }
  .quickview-box { margin: 12px; border-radius: 12px; }
  .lightbox-close { top: 10px; right: 10px; width: 32px; height: 32px; }
  .product-card:hover { transform: translateY(-3px); }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM HERO — Static two-column luxury layout
   ═══════════════════════════════════════════════════════════════ */

.hero-static-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(86vh, 700px);
}

/* ── Visual (left column) ───────────────────────────────────── */
.hero-visual {
  position: relative;
  overflow: hidden;
  background: linear-gradient(148deg, #ede4d3 0%, #d8c49a 40%, #c4a060 72%, #b08040 100%);
}

.hero-visual-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 3;
}

/* ── CSS Brand Composition (until real photo is uploaded) ────── */
.hero-composition {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}

/* Studio-style light ray from upper right */
.hc-light-ray {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 65%;
  height: 90%;
  background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.48) 0%, rgba(255,248,230,.18) 35%, transparent 68%);
  pointer-events: none;
}

/* Warm floor pool of light */
.hc-light-pool {
  position: absolute;
  bottom: -5%;
  left: 10%;
  right: 10%;
  height: 50%;
  background: radial-gradient(ellipse at 50% 80%, rgba(255,235,190,.22) 0%, transparent 65%);
  pointer-events: none;
}

/* Large brand seal — background element */
.hc-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hc-seal-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(160,120,60,.3);
  border-radius: 50%;
}
.hc-seal-n {
  font-family: Georgia, serif;
  font-size: 128px;
  color: rgba(100,65,20,.12);
  line-height: 1;
  font-weight: normal;
  letter-spacing: -.02em;
  user-select: none;
}

/* Product arrangement */
.hc-products {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  position: relative;
  z-index: 4;
  margin-bottom: 32px;
}

/* Dropper / serum bottle */
.hc-dropper { display: flex; flex-direction: column; align-items: center; }
.hc-dropper-cap {
  width: 10px;
  height: 26px;
  background: linear-gradient(180deg, rgba(140,105,50,.85) 0%, rgba(100,72,28,.9) 100%);
  border-radius: 5px 5px 0 0;
  box-shadow: inset -2px 0 4px rgba(0,0,0,.12);
}
.hc-dropper-body {
  width: 38px;
  height: 118px;
  background: linear-gradient(175deg, rgba(255,255,255,.88) 0%, rgba(245,235,210,.75) 50%, rgba(220,200,160,.65) 100%);
  border-radius: 19px 19px 10px 10px;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset -5px 0 12px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 13px;
  color: rgba(120,85,30,.45);
}

/* Box */
.hc-box {
  width: 68px;
  height: 88px;
  background: linear-gradient(160deg, #1c1c1c 0%, #282520 100%);
  border-radius: 4px;
  box-shadow: 0 14px 40px rgba(0,0,0,.28), inset 1px 0 1px rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.hc-box-n {
  font-family: Georgia, serif;
  font-size: 20px;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.hc-box-brand {
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(201,161,74,.75);
  text-align: center;
  line-height: 1.4;
}

/* Moisturizer jar */
.hc-jar { display: flex; flex-direction: column; align-items: center; }
.hc-jar-lid {
  width: 70px;
  height: 10px;
  background: linear-gradient(180deg, rgba(210,195,165,.9) 0%, rgba(185,165,125,.95) 100%);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -2px 6px rgba(0,0,0,.06);
}
.hc-jar-body {
  display: none; /* jar lid + body handled by ::after */
}
.hc-jar {
  width: 74px;
  height: 50px;
  background: linear-gradient(160deg, rgba(255,255,255,.82) 0%, rgba(240,228,200,.85) 100%);
  border-radius: 6px 6px 4px 4px;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset -5px 0 12px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.1);
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Pump / toner bottle */
.hc-pump { display: flex; flex-direction: column; align-items: center; }
.hc-pump-head {
  width: 20px;
  height: 22px;
  background: linear-gradient(180deg, rgba(140,105,50,.8) 0%, rgba(110,78,28,.85) 100%);
  border-radius: 10px 10px 0 0;
  position: relative;
}
.hc-pump-head::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 18px;
  background: rgba(100,70,20,.6);
  border-radius: 2px;
}
.hc-pump-body {
  width: 44px;
  height: 96px;
  background: linear-gradient(175deg, rgba(255,255,255,.82) 0%, rgba(235,220,190,.78) 60%, rgba(215,195,155,.72) 100%);
  border-radius: 10px 10px 6px 6px;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset -5px 0 12px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.12);
}

/* Brand wordmark below products */
.hc-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 4;
}
.hc-brand-name {
  font-family: Georgia, serif;
  font-size: 18px;
  letter-spacing: .26em;
  color: rgba(70,44,14,.62);
  display: block;
}
.hc-brand-rule {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(150,110,45,.4);
}
.hc-brand-sub {
  font-size: 8px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(90,60,20,.5);
}

/* ── Hero text (right column) ───────────────────────────────── */
.hero-content {
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 68px 80px 60px;
  position: relative;
}

/* Thin gold accent line on left edge of content column */
.hero-content::before {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(201,161,74,.4) 25%, rgba(201,161,74,.4) 75%, transparent);
}

.hero-eyebrow-new {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: hero-rise .7s ease forwards;
  animation-delay: .1s;
}
.hero-eyebrow-new::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.hero-headline {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(44px, 5vw, 68px);
  font-weight: normal;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 24px;
  opacity: 0;
  animation: hero-rise .7s ease forwards;
  animation-delay: .2s;
}
.hero-headline em {
  font-style: italic;
  color: var(--gold-dark);
}

.hero-description {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.72;
  max-width: 380px;
  margin-bottom: 40px;
  font-weight: 300;
  opacity: 0;
  animation: hero-rise .7s ease forwards;
  animation-delay: .32s;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 48px;
  opacity: 0;
  animation: hero-rise .7s ease forwards;
  animation-delay: .42s;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #1a1a1a;
  color: #fff;
  padding: 15px 34px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .22s, transform .22s, gap .22s;
}
.btn-hero-primary:hover { background: var(--gold-dark); transform: translateY(-1px); gap: 14px; }
.btn-hero-primary svg { flex-shrink: 0; transition: transform .22s; }
.btn-hero-primary:hover svg { transform: translateX(2px); }

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--text);
  padding: 15px 26px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid rgba(0,0,0,.18);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .22s, color .22s, background .22s;
}
.btn-hero-secondary:hover { border-color: var(--gold); color: var(--gold-dark); background: rgba(201,161,74,.04); }

.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid rgba(0,0,0,.07);
  opacity: 0;
  animation: hero-rise .7s ease forwards;
  animation-delay: .52s;
}
.hero-trust-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-stars { color: var(--gold); font-size: 11px; letter-spacing: 3px; }
.hero-trust-label { font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.hero-trust-icon { font-size: 14px; color: var(--gold-dark); }
.hero-trust-divider {
  width: 1px;
  height: 28px;
  background: rgba(0,0,0,.1);
  flex-shrink: 0;
}

/* Entrance animation */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide mode (when admin has uploaded hero slides) */
.hero-slide-mode .hero-static-inner { display: none; }
.hero-slide-mode #heroSlides { display: block !important; }
.hero-slide-mode #heroOverlay { display: block !important; }

/* Mobile hero */
@media (max-width: 960px) {
  .hero-static-inner { grid-template-columns: 1fr; min-height: auto; }
  .hero-visual { height: clamp(340px, 55vw, 520px); }
  .hero-content { padding: 52px 28px 56px; }
  .hero-content::before { display: none; }
  .hero-headline { font-size: clamp(36px, 7vw, 52px); }
  .hero-trust-row { gap: 14px; }
}
@media (max-width: 560px) {
  .hero-visual { height: 300px; }
  .hero-headline { font-size: 34px; }
  .hero-description { font-size: 14px; margin-bottom: 28px; }
  .hero-cta-row { flex-wrap: wrap; }
  .hero-trust-row { flex-wrap: wrap; }
  .hero-trust-divider { display: none; }
  .hc-seal { width: 200px; height: 200px; }
  .hc-seal-n { font-size: 90px; }
  .hc-products { gap: 10px; transform: scale(.85); transform-origin: bottom center; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPLETE ROUTINE NAVIGATOR
   ═══════════════════════════════════════════════════════════════ */

.routine-section {
  background: #fff;
  padding: 88px 24px 80px;
  position: relative;
}

.routine-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,161,74,.25) 30%, rgba(201,161,74,.25) 70%, transparent);
}

.routine-inner { max-width: 1280px; margin: 0 auto; }

.routine-header {
  text-align: center;
  margin-bottom: 60px;
}
.routine-eyebrow {
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--gold-dark);
  font-weight: 700;
  margin-bottom: 14px;
}
.routine-title {
  font-family: Georgia, serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: normal;
  color: var(--text);
  margin-bottom: 12px;
}
.routine-subtitle {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto;
}

.routine-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}

/* Connecting thread between steps */
.routine-steps::after {
  content: '';
  position: absolute;
  top: 34px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(201,161,74,.35) 10%, rgba(201,161,74,.35) 90%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.routine-card {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-right: none;
  padding: 40px 18px 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.25,.46,.45,.94), background .3s;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.routine-card:last-child { border-right: 1px solid #eee; }
.routine-card:hover {
  border-color: rgba(201,161,74,.6);
  box-shadow: 0 20px 52px rgba(201,161,74,.14);
  transform: translateY(-8px);
  background: var(--cream);
  z-index: 2;
}
.routine-card:hover + .routine-card { border-left: none; }

.routine-step-num {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s;
  z-index: 3;
}
.routine-card:hover .routine-step-num { background: var(--gold); }

.routine-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 auto 14px;
  display: block;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94);
}
.routine-card:hover .routine-img { transform: scale(1.06); }

.routine-img-placeholder {
  width: 88px;
  height: 88px;
  background: linear-gradient(160deg, var(--cream), var(--cream-2));
  border-radius: 10px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94);
}
.routine-card:hover .routine-img-placeholder { transform: scale(1.06); }

.routine-step-label {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 700;
  margin-bottom: 6px;
}
.routine-card-name {
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: normal;
  color: var(--text);
  margin-bottom: 7px;
  line-height: 1.3;
}
.routine-card-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 14px;
  flex: 1;
}
.routine-card-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.routine-card-cta {
  display: inline-block;
  background: transparent;
  border: 1px solid #ddd;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 2px;
  cursor: pointer;
  transition: all .22s;
  font-family: inherit;
}
.routine-card:hover .routine-card-cta { background: var(--gold); border-color: var(--gold); color: #fff; }

/* Skeleton state */
.routine-skeleton {
  min-height: 260px;
  background: linear-gradient(90deg, #f8f4ee 25%, #f0e9df 50%, #f8f4ee 75%);
  background-size: 800px 100%;
  animation: nx-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
  border-color: #f0eadf;
}

@media (max-width: 900px) {
  .routine-steps { grid-template-columns: repeat(3, 1fr); }
  .routine-steps::after { display: none; }
  .routine-card { border-right: 1px solid #eee; }
  .routine-card:nth-child(3) { border-right: 1px solid #eee; }
}
@media (max-width: 560px) {
  .routine-steps { grid-template-columns: repeat(2, 1fr); }
  .routine-section { padding: 64px 16px 56px; }
  .routine-card { border-right: 1px solid #eee; }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED COLLECTIONS CAROUSEL
   ═══════════════════════════════════════════════════════════════ */

.collections-section {
  background: var(--cream);
  padding: 80px 24px 88px;
}

.collections-inner { max-width: 1280px; margin: 0 auto; }

.collections-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
  gap: 16px;
}
.collections-eyebrow {
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--gold-dark);
  font-weight: 700;
  margin-bottom: 8px;
}
.collections-title {
  font-family: Georgia, serif;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: normal;
  color: var(--text);
  margin: 0;
}
.collections-view-all {
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(169,130,47,.35);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.collections-view-all:hover { color: var(--text); border-color: var(--text); }

.collections-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.collection-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 2/3;
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s;
}
.collection-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(0,0,0,.22);
}

.collection-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}
.collection-card:hover .collection-card-bg { transform: scale(1.07); }

.collection-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
  transition: opacity .3s;
}
.collection-card:hover .collection-card-overlay { opacity: .85; }

.collection-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 14px 16px;
  color: #fff;
  transform: translateY(3px);
  transition: transform .3s;
}
.collection-card:hover .collection-card-content { transform: translateY(0); }

.collection-card-tag {
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 4px;
  font-weight: 600;
}
.collection-card-name {
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 10px;
  line-height: 1.25;
}
.collection-card-link {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .28s, transform .28s;
}
.collection-card-link::after { content: '→'; }
.collection-card:hover .collection-card-link { opacity: 1; transform: translateX(0); }

@media (max-width: 1100px) {
  .collections-track { grid-template-columns: repeat(3, 1fr); }
  .collection-card { aspect-ratio: 3/4; }
}
@media (max-width: 640px) {
  .collections-track { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .collections-section { padding: 60px 16px 64px; }
  .collections-header { flex-direction: column; align-items: flex-start; }
  .collection-card { aspect-ratio: 3/4; }
  .collection-card-link { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════
   HERO v2 — Kit-first, cinematic dark
   Overrides the previous hero-static-inner / hero-visual / hero-content rules
   ═══════════════════════════════════════════════════════════════ */

.hero-static-inner {
  position: relative;
  display: grid;
  grid-template-columns: 38fr 62fr;
  min-height: min(94vh, 840px);
  overflow: hidden;
  background: linear-gradient(135deg, #0e0d0a 0%, #1b160e 55%, #100f0c 100%);
}

/* "LUXE SUPPLY" — design watermark only, 3% opacity */
.hero-wm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: clamp(56px, 10vw, 160px);
  font-weight: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.032);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
}

/* ── Left column: text ─────────────────────────────────────── */
.hero-content {
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 72px 48px 80px 64px;
  position: relative;
  z-index: 3;
}
.hero-content::before { display: none; }

.hero-eyebrow-new {
  font-size: 9.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: hero-rise .7s ease forwards;
  animation-delay: .1s;
}
.hero-eyebrow-new::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.hero-headline {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(46px, 5.2vw, 78px);
  font-weight: normal;
  line-height: 1.06;
  letter-spacing: -.01em;
  color: #f4ede0;
  margin-bottom: 26px;
  opacity: 0;
  animation: hero-rise .7s ease forwards;
  animation-delay: .18s;
}
.hero-headline em {
  font-style: italic;
  color: var(--gold);
}

.hero-description {
  font-size: 14.5px;
  color: rgba(240,228,208,.52);
  line-height: 1.8;
  max-width: 330px;
  margin-bottom: 18px;
  font-weight: 300;
  opacity: 0;
  animation: hero-rise .7s ease forwards;
  animation-delay: .28s;
}

.hero-kit-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: .22em;
  font-weight: 700;
  color: var(--gold);
  border: 1px solid rgba(201,161,74,.3);
  padding: 7px 15px;
  margin-bottom: 36px;
  width: fit-content;
  opacity: 0;
  animation: hero-rise .7s ease forwards;
  animation-delay: .36s;
}
.hero-kit-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 52px;
  flex-wrap: wrap;
  opacity: 0;
  animation: hero-rise .7s ease forwards;
  animation-delay: .44s;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: #0e0d0a;
  padding: 16px 38px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .22s, transform .22s, gap .22s;
}
.btn-hero-primary:hover { background: #ddb84e; transform: translateY(-2px); gap: 16px; }
.btn-hero-primary svg { flex-shrink: 0; transition: transform .22s; }
.btn-hero-primary:hover svg { transform: translateX(3px); }

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: rgba(240,228,208,.65);
  padding: 16px 28px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid rgba(240,228,208,.2);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .22s, color .22s, background .22s;
}
.btn-hero-secondary:hover { border-color: rgba(240,228,208,.55); color: #f4ede0; background: rgba(255,255,255,.04); }

.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
  opacity: 0;
  animation: hero-rise .7s ease forwards;
  animation-delay: .54s;
  flex-wrap: wrap;
}
.hero-trust-item { display: flex; flex-direction: column; gap: 3px; }
.hero-stars { color: var(--gold); font-size: 10.5px; letter-spacing: 2px; }
.hero-trust-label { font-size: 10.5px; color: rgba(240,228,208,.42); letter-spacing: .02em; }
.hero-trust-icon { font-size: 13px; color: var(--gold); }
.hero-trust-divider { width: 1px; height: 26px; background: rgba(255,255,255,.1); flex-shrink: 0; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Right column: kit visual ─────────────────────────────── */
.hero-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1c1710 0%, #0e0d0a 100%);
  z-index: 3;
}

.hero-kit-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
}

/* ── CSS Kit Composition ──────────────────────────────────── */
.hero-kit-composition {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

/* Studio ambient light from upper-right */
.hkc-ambient {
  position: absolute;
  top: -10%;
  right: -8%;
  width: 80%;
  height: 85%;
  background: radial-gradient(ellipse at 70% 20%, rgba(201,161,74,.14) 0%, rgba(180,130,40,.06) 40%, transparent 70%);
  pointer-events: none;
}

/* Warm floor glow */
.hkc-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: radial-gradient(ellipse at 50% 100%, rgba(201,161,74,.1) 0%, transparent 65%);
  pointer-events: none;
}

/* Surface / shelf shadow */
.hkc-shadow {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 24px;
  background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.45) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

/* Product group */
.hkc-group {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

/* ── Individual kit products ── */
.hkc-prod { display: flex; flex-direction: column; align-items: center; }

/* Serum dropper (tall, back-left) */
.hkc-serum-dropper {
  width: 10px;
  height: 28px;
  background: linear-gradient(180deg, rgba(150,115,60,.9) 0%, rgba(110,80,25,.95) 100%);
  border-radius: 5px 5px 0 0;
  box-shadow: inset -2px 0 4px rgba(0,0,0,.2);
}
.hkc-serum-body {
  width: 42px;
  height: 130px;
  background: linear-gradient(175deg, rgba(255,255,255,.12) 0%, rgba(201,161,74,.22) 50%, rgba(160,120,40,.18) 100%);
  border-radius: 21px 21px 10px 10px;
  border: 1px solid rgba(201,161,74,.25);
  box-shadow: inset -5px 0 14px rgba(0,0,0,.25), 0 12px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(201,161,74,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: italic;
  color: rgba(201,161,74,.5);
  letter-spacing: .06em;
}

/* Kit box (center, dominant) */
.hkc-kitbox {
  width: 110px;
  height: 130px;
}
.hkc-kitbox-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #1e1c18 0%, #252220 50%, #1a1814 100%);
  border: 1px solid rgba(201,161,74,.2);
  border-radius: 4px;
  box-shadow: 0 20px 56px rgba(0,0,0,.6), inset 1px 0 1px rgba(255,255,255,.04), inset 0 1px 1px rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
/* Gold corner accents */
.hkc-kitbox-inner::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid rgba(201,161,74,.12);
  border-radius: 2px;
  pointer-events: none;
}
.hkc-kitbox-seal {
  font-family: Georgia, serif;
  font-size: 22px;
  color: var(--gold);
  border: 1px solid rgba(201,161,74,.5);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.hkc-kitbox-brand {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(201,161,74,.7);
  text-align: center;
  line-height: 1.6;
}
.hkc-kitbox-sub {
  font-size: 5.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(201,161,74,.4);
  text-align: center;
}

/* Toner pump (back-right) */
.hkc-toner-pump {
  width: 16px;
  height: 20px;
  background: linear-gradient(180deg, rgba(150,115,60,.85) 0%, rgba(110,80,25,.9) 100%);
  border-radius: 8px 8px 0 0;
  position: relative;
}
.hkc-toner-pump::after {
  content: '';
  position: absolute;
  top: 3px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 17px;
  background: rgba(80,55,15,.7);
  border-radius: 2px;
}
.hkc-toner-body {
  width: 50px;
  height: 108px;
  background: linear-gradient(175deg, rgba(255,255,255,.1) 0%, rgba(201,161,74,.18) 55%, rgba(140,100,30,.14) 100%);
  border-radius: 12px 12px 6px 6px;
  border: 1px solid rgba(201,161,74,.2);
  box-shadow: inset -5px 0 14px rgba(0,0,0,.22), 0 10px 30px rgba(0,0,0,.38);
}

/* Moisturizer jar (front-left) */
.hkc-jar-lid {
  width: 74px;
  height: 10px;
  background: linear-gradient(180deg, rgba(201,161,74,.55) 0%, rgba(150,110,40,.65) 100%);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -2px 6px rgba(0,0,0,.15);
}
.hkc-jar-base {
  width: 74px;
  height: 46px;
  background: linear-gradient(160deg, rgba(255,255,255,.1) 0%, rgba(201,161,74,.16) 100%);
  border-radius: 0 0 5px 5px;
  border: 1px solid rgba(201,161,74,.18);
  border-top: none;
  box-shadow: inset -5px 0 12px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.35);
}

/* SPF / eye cream tube (front-right) */
.hkc-tube-cap {
  width: 22px;
  height: 16px;
  background: linear-gradient(180deg, rgba(201,161,74,.6) 0%, rgba(140,100,30,.7) 100%);
  border-radius: 4px 4px 2px 2px;
}
.hkc-tube-body {
  width: 36px;
  height: 80px;
  background: linear-gradient(175deg, rgba(255,255,255,.1) 0%, rgba(201,161,74,.2) 100%);
  border-radius: 4px 4px 18px 18px;
  border: 1px solid rgba(201,161,74,.2);
  box-shadow: inset -4px 0 10px rgba(0,0,0,.2), 0 8px 22px rgba(0,0,0,.32);
}

/* Kit label */
.hkc-label {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
}
.hkc-rule {
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(201,161,74,.3);
}
.hkc-label-text {
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(201,161,74,.45);
  font-weight: 600;
  white-space: nowrap;
}

/* Slide mode (admin activates slideshow) */
.hero-slide-mode .hero-static-inner { display: none; }
.hero-slide-mode #heroSlides { display: block !important; }
.hero-slide-mode #heroOverlay { display: block !important; }

/* Responsive hero */
@media (max-width: 980px) {
  .hero-static-inner { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: auto; }
  .hero-visual { order: -1; height: clamp(320px, 52vw, 520px); }
  .hero-content { padding: 56px 28px 60px; background: linear-gradient(180deg, #0e0d0a 0%, #1b160e 100%); }
  .hero-content::before { display: none; }
  .hero-description { max-width: 480px; }
}
@media (max-width: 560px) {
  .hero-visual { height: 300px; }
  .hero-headline { font-size: 40px; }
  .hero-description { font-size: 14px; margin-bottom: 14px; }
  .hero-cta-row { margin-bottom: 36px; gap: 12px; }
  .hero-trust-row { gap: 14px; padding-top: 24px; }
  .hero-trust-divider { display: none; }
  .hkc-group { transform: scale(.82); transform-origin: bottom center; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE STORY SECTIONS — shared layout utilities
   ═══════════════════════════════════════════════════════════════ */

.hp-story-section {
  padding: 96px 24px 100px;
}
.hp-story-section.light { background: #fff; }
.hp-story-section.cream { background: var(--cream); }
.hp-story-inner { max-width: 1280px; margin: 0 auto; }
.hp-story-header { margin-bottom: 60px; }
.hp-story-header.center { text-align: center; }
.hp-story-eyebrow {
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 700;
  margin-bottom: 16px;
}
.hp-story-title {
  font-family: Georgia, serif;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: normal;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.15;
}
.hp-story-sub {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.72;
  max-width: 520px;
}
.hp-story-header.center .hp-story-sub { margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════
   BEST SELLERS
   ═══════════════════════════════════════════════════════════════ */

.hp-best-sellers { background: var(--cream); }

/* ═══════════════════════════════════════════════════════════════════
   STARTER KITS — visually distinct from Featured/Best Sellers/Routine's
   plain grids (never mixed together): a gold-bordered "boutique" frame
   around the same product-card component used everywhere else, so kit
   products still look consistent while the section itself reads as its
   own dedicated moment.
   ═══════════════════════════════════════════════════════════════════ */
.hp-kits-section {
  background: var(--cream);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   BEFORE & AFTER
   ═══════════════════════════════════════════════════════════════ */

.hp-ba-section { background: #0f0e0b; }
.hp-ba-section .hp-story-eyebrow { color: var(--gold); }
.hp-ba-section .hp-story-title { color: #f4ede0; }
.hp-ba-section .hp-story-sub { color: rgba(240,228,208,.5); }

/* Single admin-uploaded before/after image (desktop or mobile via
   <picture>), sized and fitted entirely from admin-controlled settings —
   --ba-fit/--ba-max-w/--ba-max-h are set inline by loadBeforeAfter() in
   script.js. Never upscaled past its natural size (see
   preventImageUpscale() in script.js). */
.hp-ba-single { display: flex; justify-content: center; margin-top: 8px; }
.hp-ba-single img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--ba-max-w, 720px));
  max-height: var(--ba-max-h, 720px);
  object-fit: var(--ba-fit, contain);
  object-position: center;
  border-radius: 8px;
}

.hp-ba-disclaimer {
  text-align: center;
  font-size: 11px;
  color: rgba(240,228,208,.25);
  margin-top: 32px;
  line-height: 1.6;
}

@media (max-width: 560px) { .hp-ba-section { padding: 64px 16px 68px; } }

/* ═══════════════════════════════════════════════════════════════
   CUSTOMER REVIEWS
   ═══════════════════════════════════════════════════════════════ */

.hp-reviews-section { background: #fff; }

.hp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.hp-review-card {
  background: var(--cream);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 8px;
  padding: 28px 26px 26px;
  position: relative;
  transition: box-shadow .3s, transform .3s;
}
.hp-review-card:hover { box-shadow: 0 16px 44px rgba(0,0,0,.1); transform: translateY(-3px); }
.hp-review-card.featured {
  background: var(--text);
  border-color: transparent;
  box-shadow: 0 20px 52px rgba(0,0,0,.18);
}

.hp-review-stars { color: var(--gold); font-size: 12px; letter-spacing: 2px; margin-bottom: 14px; }
.hp-review-body {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 20px;
  font-style: italic;
}
.hp-review-card.featured .hp-review-body { color: rgba(255,255,255,.8); }

.hp-review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hp-review-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.hp-review-author strong { font-size: 13px; display: block; color: var(--text); }
.hp-review-card.featured .hp-review-author strong { color: #fff; }
.hp-review-author span { font-size: 11px; color: var(--muted); display: block; }
.hp-review-card.featured .hp-review-author span { color: rgba(255,255,255,.45); }

.hp-review-badge {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 8.5px;
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,161,74,.12);
  border: 1px solid rgba(201,161,74,.3);
  padding: 4px 10px;
  border-radius: 2px;
}

.hp-reviews-aggregate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.hp-agg-score {
  font-family: Georgia, serif;
  font-size: 52px;
  font-weight: normal;
  color: var(--text);
  line-height: 1;
}
.hp-agg-stars { color: var(--gold); font-size: 16px; letter-spacing: 3px; margin-bottom: 4px; }
.hp-agg-count { font-size: 12px; color: var(--muted); }

@media (max-width: 900px) { .hp-reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hp-reviews-grid { grid-template-columns: 1fr; } .hp-reviews-section { padding: 64px 16px 68px; } }

/* ═══════════════════════════════════════════════════════════════
   WHY CHOOSE NOVA DERM
   ═══════════════════════════════════════════════════════════════ */

.hp-why-section { background: var(--cream); }

.hp-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.hp-why-card {
  text-align: center;
  padding: 40px 28px 36px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.06);
  transition: box-shadow .3s, transform .3s;
}
.hp-why-card:hover { box-shadow: 0 16px 44px rgba(201,161,74,.12); transform: translateY(-4px); }

.hp-why-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(201,161,74,.1), rgba(169,130,47,.05));
  border: 1px solid rgba(201,161,74,.2);
  border-radius: 50%;
  color: var(--gold-dark);
}
.hp-why-title {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: normal;
  color: var(--text);
  margin-bottom: 12px;
}
.hp-why-desc { font-size: 13px; color: var(--muted); line-height: 1.7; }

@media (max-width: 900px) { .hp-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hp-why-grid { grid-template-columns: 1fr; gap: 16px; } .hp-why-section { padding: 64px 16px 68px; } }

/* ═══════════════════════════════════════════════════════════════
   AFFILIATE CTA
   ═══════════════════════════════════════════════════════════════ */

.hp-affiliate-cta {
  background: linear-gradient(135deg, #0e0d0a 0%, #1b1610 50%, #100f0c 100%);
  padding: 100px 24px 108px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hp-affiliate-cta::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse at 50% 30%, rgba(201,161,74,.1) 0%, transparent 65%);
  pointer-events: none;
}
.hp-aff-inner { max-width: 680px; margin: 0 auto; position: relative; z-index: 2; }

.hp-aff-badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: .28em;
  font-weight: 700;
  color: var(--gold);
  border: 1px solid rgba(201,161,74,.3);
  padding: 7px 18px;
  margin-bottom: 32px;
}

.hp-aff-headline {
  font-family: Georgia, serif;
  font-size: clamp(36px, 5vw, 58px);
  font-weight: normal;
  color: #f4ede0;
  line-height: 1.12;
  margin-bottom: 24px;
}
.hp-aff-headline em { font-style: italic; color: var(--gold); }

.hp-aff-sub {
  font-size: 15px;
  color: rgba(240,228,208,.5);
  line-height: 1.78;
  max-width: 520px;
  margin: 0 auto 40px;
}

.hp-aff-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  margin-bottom: 44px;
}
.hp-aff-stat { text-align: center; }
.hp-aff-stat strong { display: block; font-family: Georgia, serif; font-size: 32px; font-weight: normal; color: var(--gold); margin-bottom: 4px; }
.hp-aff-stat span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(240,228,208,.4); }
.hp-aff-stat-divider { width: 1px; height: 48px; background: rgba(255,255,255,.1); }

.hp-aff-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--gold);
  color: #0e0d0a;
  padding: 18px 44px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .22s, transform .22s, gap .22s;
  margin-bottom: 20px;
}
.hp-aff-cta:hover { background: #ddb84e; transform: translateY(-2px); gap: 16px; }
.hp-aff-cta svg { flex-shrink: 0; transition: transform .22s; }
.hp-aff-cta:hover svg { transform: translateX(3px); }

.hp-aff-note { font-size: 12px; color: rgba(240,228,208,.3); line-height: 1.6; margin: 0; }

@media (max-width: 560px) {
  .hp-affiliate-cta { padding: 72px 20px 80px; }
  .hp-aff-stats { gap: 20px; }
  .hp-aff-stat strong { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════ */

.hp-faq-section { background: #fff; }
.hp-faq-inner { max-width: 760px; margin: 0 auto; }

.hp-faq-list { display: flex; flex-direction: column; gap: 0; }

.hp-faq-item {
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.hp-faq-item:first-child { border-top: 1px solid rgba(0,0,0,.07); }

.hp-faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 22px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: normal;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  gap: 16px;
  line-height: 1.4;
  transition: color .2s;
}
.hp-faq-q::-webkit-details-marker { display: none; }
.hp-faq-q::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  color: var(--gold-dark);
  flex-shrink: 0;
  transition: transform .25s;
  line-height: 1;
}
.hp-faq-q[aria-expanded="true"] { color: var(--gold-dark); }
.hp-faq-q[aria-expanded="true"]::after { transform: rotate(45deg); }

.hp-faq-a {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.78;
  padding: 0 4px 24px;
  max-width: 680px;
}

@media (max-width: 560px) { .hp-faq-section { padding: 64px 16px 68px; } .hp-faq-q { font-size: 14px; } }

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT — address fields + order summary
   ═══════════════════════════════════════════════════════════════ */

.co-section-label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 16px 0 10px;
}

.co-addr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cart-checkout input, .cart-checkout select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e0d8cf;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  margin-bottom: 8px;
  transition: border-color .2s;
  box-sizing: border-box;
}
.cart-checkout input:focus, .cart-checkout select:focus {
  outline: none;
  border-color: var(--gold);
}

.co-summary {
  background: var(--cream);
  border-radius: 6px;
  padding: 16px 16px 12px;
  margin: 16px 0 20px;
  border: 1px solid rgba(0,0,0,.06);
}
.co-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  padding: 5px 0;
}
.co-summary-row.total {
  font-weight: 700;
  color: var(--text);
  font-size: 14.5px;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 10px;
  margin-top: 4px;
}
.co-summary-row.discount { color: #2a7a3b; }

/* ═══════════════════════════════════════════════════════════════
   COMPLETE ROUTINE NAVIGATOR — kept, no changes needed
   (rules preserved from earlier block, these are additive)
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   HERO v2 — Dynamic slide fields (Hero Manager CMS)
   ═══════════════════════════════════════════════════════════════ */

/* Per-slide CSS variable overrides — applied by script.js on each slide element */
.hero-slide {
  text-align: var(--slide-text-align, left);
  color: var(--slide-text-color, #ffffff);
  overflow: hidden;
}

/* Background video layer */
.hero-slide-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero-slide .hero-inner {
  position: relative;
  z-index: 1;
}

/* Tablet background: falls back to desktop if no tablet image set */
@media (max-width: 980px) {
  .hero-slide {
    background-image: var(--slide-bg-tablet, var(--slide-bg-desktop, none));
  }
}

/* Optional badge above headline */
.hero-badge {
  display: inline-block;
  font: 700 10px/1 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: inherit;
  margin-bottom: 10px;
}

/* Optional description paragraph */
.hero-description {
  font-size: .95rem;
  line-height: 1.6;
  opacity: .85;
  max-width: 480px;
  margin: .5em 0;
}

/* CTA button — respects --slide-btn-color and --slide-btn-text-color */
.btn-hero-cta {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 4px;
  font: 700 13px/1 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--slide-btn-color, var(--gold, #c9a14a));
  color: var(--slide-btn-text-color, #0e0c09);
  border: 2px solid var(--slide-btn-color, var(--gold, #c9a14a));
  transition: opacity .2s, transform .15s;
  margin-top: 1rem;
}
.btn-hero-cta:hover { opacity: .88; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════
   AMBASSADOR PROGRAM — Full-bleed photo overlay layout
   ═══════════════════════════════════════════════════════════════ */

.hp-ambassador-section {
  position: relative;
  overflow: hidden;
  min-height: 720px;
  background: #0c0b09;
  padding: var(--sec-pt, 0) 0 var(--sec-pb, 0);
}

/* Two-column grid: content (left) + the original photo (right). The
   column split alone is what guarantees text can never overlap the
   model/product -- no overlay layers on top of the photo. */
.hp-amb-inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(56px,7vw,96px) clamp(32px,6vw,72px);
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(360px, 35%) 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
}

/* Content panel -- a comfortable, unhurried column (not cramped),
   pushed to the left edge of its column so it stays well clear of
   the model's hand and the product on the right. */
.hp-amb-content {
  max-width: 440px;
  width: 100%;
  padding: 0;
  background: none;
  position: relative;
  z-index: 2;
  justify-self: start;
}

/* Right column: the original photo, unmodified -- only repositioned
   via object-position within its own frame. No overlay layers. */
.hp-amb-visual {
  position: relative;
  height: clamp(480px, 62vw, 720px);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.hp-amb-visual--no-photo { display: none; }
.hp-amb-bg-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Shifts the visible crop right so the model and product sit
     comfortably away from the text column instead of near the seam.
     Tune this if the source photo changes. */
  object-position: 80% 42%;
  display: block;
}

/* Badge */
.hp-amb-badge {
  display: inline-block;
  border: 1px solid rgba(240,228,208,.28);
  border-radius: 3px;
  color: rgba(240,228,208,.6);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 7px 18px;
  margin-bottom: 30px;
  background: none;
}

/* Headline */
.hp-amb-headline {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  line-height: 1.14;
  color: #f4ede0;
  margin: 0 0 20px;
  letter-spacing: -.01em;
}
.hp-amb-headline em {
  font-style: normal;
  color: var(--gold, #c9a14a);
}

/* Description */
.hp-amb-desc {
  font-size: 15px;
  color: rgba(240,228,208,.55);
  line-height: 1.72;
  margin: 0 0 32px;
  max-width: 400px;
  font-weight: 300;
}

/* Ambassador benefits — elegant horizontal cards instead of a tight
   stacked grid, with consistent spacing and breathing room. */
.hp-amb-benefits-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.hp-amb-benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(201,161,74,.18);
  border-radius: 3px;
  background: rgba(201,161,74,.04);
  transition: border-color .2s, background .2s;
}
.hp-amb-benefit:hover {
  border-color: rgba(201,161,74,.38);
  background: rgba(201,161,74,.07);
}
.hp-amb-benefit-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(201,161,74,.28);
  background: rgba(201,161,74,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #c9a14a);
  flex-shrink: 0;
}
.hp-amb-benefit-text strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(240,228,208,.9);
  white-space: nowrap;
}
.hp-amb-benefit-text span {
  font-size: 10.5px;
  color: rgba(240,228,208,.42);
  line-height: 1.4;
  white-space: nowrap;
}

/* CTA button — larger, premium gold gradient with a soft warm shadow
   and a gentle hover lift, sized to a true 52–56px tap target. */
.hp-amb-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #c9a14a 0%, #e8c875 100%);
  color: #0a0806;
  padding: 18px 40px;
  min-height: 54px;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 36px;
  border-radius: 2px;
  box-shadow: 0 14px 34px rgba(201,161,74,.28);
  transition: box-shadow .25s ease, transform .25s ease, gap .25s ease;
}
.hp-amb-cta:hover {
  transform: translateY(-3px);
  gap: 16px;
  box-shadow: 0 20px 44px rgba(201,161,74,.4);
}
.hp-amb-cta svg { flex-shrink: 0; transition: transform .2s; }
.hp-amb-cta:hover svg { transform: translateX(3px); }

/* Stats row */
.hp-amb-stats {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-bottom: 0;
}
.hp-amb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.hp-amb-stat-icon {
  color: var(--gold, #c9a14a);
  opacity: .75;
  margin-bottom: 6px;
  line-height: 1;
}
.hp-amb-stat strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: normal;
  color: var(--gold, #c9a14a);
  margin-bottom: 3px;
  line-height: 1;
}
.hp-amb-stat span {
  font-size: 8px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(240,228,208,.36);
}
.hp-amb-stat-div {
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,.09);
  flex-shrink: 0;
}
.hp-amb-note { display: none; }

/* Responsive — below 980px, the two-column grid collapses to a single
   column. The visual (model + product) is pulled to the top via
   `order` so the product is the first thing visitors see, with
   Heading → Description → CTA → Benefits following underneath, per
   the mobile content order: the photo itself always stays fully
   visible (object-fit: cover on a fixed-height block, never clipped
   by overlapping text since text now lives in its own stacked block
   below, not on top of the image). */
@media (max-width: 980px) {
  .hp-amb-inner {
    grid-template-columns: 1fr;
    padding: 0 0 56px;
    min-height: auto;
    gap: 0;
  }
  .hp-amb-visual {
    order: -1;
    height: min(66vw, 520px);
    margin-bottom: 40px;
  }
  .hp-amb-content { max-width: 560px; margin: 0 auto; padding: 0 40px; }
}
@media (max-width: 680px) {
  .hp-amb-content { max-width: 100%; padding: 0 24px; }
  .hp-amb-visual { height: min(110vw, 460px); margin-bottom: 32px; }
  .hp-amb-benefits-grid { gap: 10px; }
  .hp-amb-benefit { flex: 1 1 100%; }
  .hp-amb-headline { font-size: clamp(30px, 8vw, 44px); }
  .hp-amb-desc { font-size: 14px; }
  .hp-amb-cta { width: 100%; justify-content: center; }
  .hp-amb-stats { gap: 20px; flex-wrap: wrap; }
  .hp-amb-stat strong { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   NEWSLETTER — Standalone luxury section
   ═══════════════════════════════════════════════════════════════ */

.hp-newsletter-section {
  background: var(--cream, #f5f0e8);
  padding: var(--sec-pt, 96px) 24px var(--sec-pb, 100px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hp-newsletter-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(201,161,74,.08) 0%, transparent 60%);
  pointer-events: none;
}

.hp-nl-inner {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hp-nl-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-dark, #a07830);
  margin: 0 0 16px;
}

.hp-nl-headline {
  font-family: Georgia, serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: normal;
  color: var(--text, #1a1612);
  line-height: 1.2;
  margin: 0 0 18px;
}

.hp-nl-sub {
  font-size: 14.5px;
  color: var(--muted, #7a6e60);
  line-height: 1.7;
  margin: 0 0 40px;
}

.hp-nl-form {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: 0 auto 16px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.hp-nl-input {
  flex: 1;
  border: none;
  padding: 16px 20px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text, #1a1612);
  background: transparent;
  outline: none;
  min-width: 0;
}
.hp-nl-input::placeholder { color: rgba(0,0,0,.35); }

.hp-nl-btn {
  flex-shrink: 0;
  background: var(--gold, #c9a14a);
  color: #0e0c09;
  border: none;
  padding: 16px 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
}
.hp-nl-btn:hover { background: #ddb84e; }

.hp-nl-note {
  font-size: 11.5px;
  color: rgba(0,0,0,.3);
  margin: 0;
}

@media (max-width: 560px) {
  .hp-newsletter-section { padding: 72px 20px 80px; }
  .hp-nl-form { flex-direction: column; border-radius: 6px; }
  .hp-nl-input { padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.08); }
  .hp-nl-btn { padding: 14px; border-radius: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION SPACING — Admin-controlled via CSS custom properties
   Applied by script.js from site_settings JSON
   ═══════════════════════════════════════════════════════════════ */

[data-section-id] {
  padding-top: var(--sec-pt);
  padding-bottom: var(--sec-pb);
  min-height: var(--sec-min-h);
}
/* Only apply when the admin has set values; sections define their own defaults above */
[data-section-id]:not([style*="--sec-pt"]) { padding-top: revert; }
[data-section-id]:not([style*="--sec-pb"]) { padding-bottom: revert; }
[data-section-id]:not([style*="--sec-min-h"]) { min-height: revert; }

/* ═══════════════════════════════════════════════════════════════
   HERO v3 — Cinematic premium upgrade
   Overrides specific v2 rules to scale, animate, and dramatise
   ═══════════════════════════════════════════════════════════════ */

/* Richer dark background with multi-source bokeh */
.hero-static-inner {
  background: #09080600;
  background-image:
    radial-gradient(ellipse 55% 65% at 75% 30%, rgba(201,161,74,.15) 0%, rgba(170,120,30,.07) 40%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 90% 80%, rgba(201,161,74,.08) 0%, transparent 55%),
    radial-gradient(ellipse 70% 80% at 50% 50%, #1a1610 0%, #0e0d0a 60%, #080705 100%);
}

/* ── Golden arc ring behind products ── */
.hkc-arc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(201,161,74,.12);
  pointer-events: none;
  z-index: 1;
  animation: hkc-arc-pulse 6s ease-in-out infinite;
}
.hkc-arc::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgba(201,161,74,.05);
}
.hkc-arc::after {
  content: '';
  position: absolute;
  top: -5%;
  left: 15%;
  width: 70%;
  height: 35%;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,161,74,.22) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(18px);
}
@keyframes hkc-arc-pulse {
  0%, 100% { opacity: .7; transform: translate(-50%, -52%) scale(1); }
  50%       { opacity: 1;  transform: translate(-50%, -52%) scale(1.025); }
}

/* ── Gold bokeh particles ── */
.hkc-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.hkc-particles span {
  position: absolute;
  border-radius: 50%;
  background: rgba(201,161,74,.5);
  animation: hkc-particle-drift linear infinite;
}
.hkc-particles span:nth-child(1)  { width:3px;  height:3px;  top:15%; left:25%; opacity:.45; animation-duration:12s; animation-delay:0s;    }
.hkc-particles span:nth-child(2)  { width:2px;  height:2px;  top:30%; left:70%; opacity:.35; animation-duration:15s; animation-delay:2s;    }
.hkc-particles span:nth-child(3)  { width:4px;  height:4px;  top:60%; left:80%; opacity:.25; animation-duration:10s; animation-delay:4s;    }
.hkc-particles span:nth-child(4)  { width:2px;  height:2px;  top:75%; left:20%; opacity:.4;  animation-duration:13s; animation-delay:1s;    }
.hkc-particles span:nth-child(5)  { width:3px;  height:3px;  top:20%; left:85%; opacity:.3;  animation-duration:11s; animation-delay:6s;    }
.hkc-particles span:nth-child(6)  { width:5px;  height:5px;  top:50%; left:12%; opacity:.2;  animation-duration:16s; animation-delay:3s;    }
.hkc-particles span:nth-child(7)  { width:2px;  height:2px;  top:85%; left:60%; opacity:.4;  animation-duration:14s; animation-delay:5s;    }
.hkc-particles span:nth-child(8)  { width:3px;  height:3px;  top:40%; left:92%; opacity:.25; animation-duration:9s;  animation-delay:7s;    }
.hkc-particles span:nth-child(9)  { width:4px;  height:4px;  top:10%; left:55%; opacity:.35; animation-duration:18s; animation-delay:2.5s;  }
.hkc-particles span:nth-child(10) { width:2px;  height:2px;  top:65%; left:40%; opacity:.3;  animation-duration:12s; animation-delay:8s;    }
@keyframes hkc-particle-drift {
  0%   { transform: translateY(0) translateX(0); opacity: var(--op, .3); }
  33%  { transform: translateY(-14px) translateX(6px); }
  66%  { transform: translateY(-8px) translateX(-5px); }
  100% { transform: translateY(0) translateX(0); opacity: var(--op, .3); }
}

/* ── Scale up product group 1.65× + centre it lower ── */
.hkc-group {
  transform: scale(1.65);
  transform-origin: bottom center;
  margin-bottom: 40px;
  gap: 10px;
}

/* ── Per-product floating animations ── */
@keyframes hkc-float-a {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes hkc-float-b {
  0%, 100% { transform: translateY(-5px); }
  50%       { transform: translateY(6px); }
}
@keyframes hkc-float-c {
  0%, 100% { transform: translateY(-2px); }
  50%       { transform: translateY(9px); }
}
.hkc-serum { animation: hkc-float-a 4.2s ease-in-out infinite; }
.hkc-kitbox { animation: hkc-float-b 5.1s ease-in-out infinite .5s; }
.hkc-toner  { animation: hkc-float-a 4.6s ease-in-out infinite 1s;  }
.hkc-jar    { animation: hkc-float-c 3.9s ease-in-out infinite .3s; }
.hkc-tube   { animation: hkc-float-b 4.3s ease-in-out infinite .8s; }

/* Dominant kit box — taller, heavier */
.hkc-kitbox {
  width: 130px;
  height: 160px;
}
.hkc-kitbox-inner {
  box-shadow: 0 28px 80px rgba(0,0,0,.75), 0 0 40px rgba(201,161,74,.12), inset 1px 0 1px rgba(255,255,255,.05);
}

/* Richer ambient light */
.hkc-ambient {
  background: radial-gradient(ellipse at 65% 15%, rgba(201,161,74,.2) 0%, rgba(180,130,40,.09) 38%, transparent 65%);
}

/* ── Hero trust badges — icon ring style ── */
.hero-trust-badges {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-wrap: wrap;
  opacity: 0;
  animation: hero-rise .7s ease forwards .54s;
}
.hero-trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  min-width: 56px;
}
.hero-badge-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(201,161,74,.3);
  background: rgba(201,161,74,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
}
.hero-trust-badge:hover .hero-badge-ring {
  border-color: rgba(201,161,74,.6);
  background: rgba(201,161,74,.12);
}
.hero-badge-label {
  font-size: 9.5px;
  color: rgba(240,228,208,.45);
  letter-spacing: .04em;
  line-height: 1.5;
}

/* ── Social proof transition strip ── */
.hero-proof-strip {
  background: linear-gradient(90deg, #0f0e0b 0%, #161410 50%, #0f0e0b 100%);
  border-top: 1px solid rgba(201,161,74,.1);
  border-bottom: 1px solid rgba(201,161,74,.07);
  padding: 18px 24px;
}
.hps-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.hps-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.hps-item strong {
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: normal;
  color: var(--gold);
  letter-spacing: .04em;
}
.hps-item span {
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240,228,208,.35);
}
.hps-div {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}
@media (max-width: 680px) {
  .hps-div { display: none; }
  .hps-inner { gap: 20px; justify-content: space-around; }
}

/* Responsive hero v3 */
@media (max-width: 980px) {
  .hkc-arc { width: 360px; height: 360px; }
  .hkc-group { transform: scale(1.3); margin-bottom: 20px; }
}
@media (max-width: 560px) {
  .hkc-arc { width: 260px; height: 260px; }
  .hkc-group { transform: scale(1.0); margin-bottom: 10px; }
  .hero-trust-badges { gap: 16px; }
  .hero-badge-ring { width: 34px; height: 34px; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO REAL IMAGE + 3-LINE HEADLINE + AS SEEN IN BAR
   ═══════════════════════════════════════════════════════════════ */

/* 3-line headline — tighten slightly to fit */
.hero-headline {
  font-size: clamp(40px, 4.4vw, 66px);
  line-height: 1.1;
  margin-bottom: 22px;
}

/* Bottom padding clears the AS SEEN IN bar */
.hero-content {
  padding-bottom: 100px;
}

/* ── Real kit image — featured contained display ── */
.hero-kit-featured {
  position: relative;
  inset: auto;
  width: 88%;
  height: auto;
  max-height: 82%;
  object-fit: contain;
  object-position: center top;
  z-index: 2;
  border-radius: 3px;
  box-shadow: 0 24px 90px rgba(0,0,0,.72), 0 0 0 1px rgba(201,161,74,.1), 0 0 60px rgba(201,161,74,.06);
  opacity: 0;
  animation: hero-rise .9s ease forwards .22s;
}

/* Warm centred glow behind the product image */
.hero-visual {
  background: radial-gradient(ellipse 65% 60% at 50% 42%, #221a0d 0%, #121009 55%, #0a0907 100%);
}

/* ── AS SEEN IN press bar — pinned to bottom of hero-static-inner ── */
.hero-press-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 13px 64px;
  background: rgba(6,5,3,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.055);
  z-index: 20;
  overflow: hidden;
}
.hero-press-label {
  font-size: 7.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(240,228,208,.28);
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 20px;
  border-right: 1px solid rgba(255,255,255,.09);
}
.hero-press-logos {
  display: flex;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  flex-wrap: nowrap;
}
.hero-press-logos > span {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13.5px;
  font-style: italic;
  color: rgba(240,228,208,.26);
  white-space: nowrap;
  letter-spacing: .02em;
  transition: color .25s;
  cursor: default;
  user-select: none;
}
.hero-press-logos > span:hover {
  color: rgba(240,228,208,.55);
}
.hpb-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(201,161,74,.22);
  flex-shrink: 0;
  font-size: 0;
  vertical-align: middle;
}

/* Responsive press bar + featured image */
@media (max-width: 980px) {
  .hero-press-bar { padding: 11px 28px; gap: 16px; }
  .hero-press-logos > span { font-size: 12px; }
  .hero-press-label { padding-right: 14px; }
  .hero-kit-featured { width: 92%; }
  .hero-content { padding-bottom: 80px; }
}
@media (max-width: 680px) {
  .hero-press-bar { padding: 10px 18px; gap: 12px; }
  .hero-press-logos > span { font-size: 10.5px; }
  .hero-press-logos { gap: 12px; }
  .hero-kit-featured { width: 94%; max-height: 90%; }
  .hero-headline { font-size: clamp(34px, 7vw, 52px); }
  .hero-content { padding-bottom: 72px; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO FINAL v2 — Full-bleed photo · caption overlay · styled press bar
   ═══════════════════════════════════════════════════════════════ */

/* Headline — bold heavy weight to match reference */
.hero-headline {
  font-weight: 700;
  font-size: clamp(46px, 5vw, 78px);
  line-height: 1.05;
  letter-spacing: -.02em;
}

/* Hero content bottom clears AS SEEN IN bar (~64px) */
.hero-content { padding-bottom: 96px; }

/* ── Kit image — full-bleed, covers right panel ── */
/* (removes the contained-card look added in previous iteration) */
.hero-kit-featured {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  z-index: 2;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  animation: none;
}

/* Gradient on left edge of visual panel — softens transition to content */
.hero-visual::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: linear-gradient(90deg, rgba(10,8,5,.9) 0%, transparent 100%);
  z-index: 4;
  pointer-events: none;
}
/* Bottom gradient on visual panel — creates space for caption overlay */
.hero-visual::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(0deg, rgba(5,4,2,.85) 0%, transparent 100%);
  z-index: 4;
  pointer-events: none;
}

/* ── COMPLETE DAILY RITUAL caption inside hero-visual ── */
.hero-visual-caption {
  position: absolute;
  bottom: 68px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 6;
  padding: 17px 24px;
  background: rgba(8,6,3,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(201,161,74,.22);
  border-bottom: 1px solid rgba(201,161,74,.1);
}
.hvc-title {
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold, #c9a14a);
  margin-bottom: 7px;
  font-weight: 600;
}
.hvc-sub {
  font-size: 8.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240,228,208,.38);
}

/* ── AS SEEN IN press bar — redesigned large brand names ── */
.hero-press-bar {
  background: rgba(4,3,2,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 0 64px;
  height: 64px;
  gap: 0;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.07);
}
.hero-press-label {
  font-size: 7.5px;
  letter-spacing: .32em;
  color: rgba(240,228,208,.28);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 24px;
  border-right: 1px solid rgba(255,255,255,.1);
  margin-right: 24px;
}
.hero-press-logos {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  overflow: hidden;
}
.hpb-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
  font-size: 0;
}
/* Individual brand name styles */
.hpb-vogue {
  font-family: 'Didot', 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  color: rgba(240,228,208,.52);
  letter-spacing: .08em;
  line-height: 1;
  cursor: default;
  transition: color .2s;
}
.hpb-forbes {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  color: rgba(240,228,208,.44);
  letter-spacing: .04em;
  line-height: 1;
  cursor: default;
  transition: color .2s;
}
.hpb-allure {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 400;
  color: rgba(240,228,208,.44);
  letter-spacing: .01em;
  line-height: 1;
  cursor: default;
  transition: color .2s;
}
.hpb-byrdie {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  color: rgba(240,228,208,.38);
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1;
  cursor: default;
  transition: color .2s;
}
.hpb-vf {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  color: rgba(240,228,208,.36);
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  cursor: default;
  transition: color .2s;
}
.hpb-vogue:hover, .hpb-forbes:hover, .hpb-allure:hover,
.hpb-byrdie:hover, .hpb-vf:hover {
  color: rgba(240,228,208,.7);
}

/* Responsive */
@media (max-width: 980px) {
  .hero-press-bar { padding: 0 28px; height: 56px; }
  .hpb-vogue { font-size: 18px; }
  .hpb-forbes { font-size: 14px; }
  .hpb-allure { font-size: 16px; }
  .hpb-byrdie { font-size: 10px; letter-spacing: .18em; }
  .hpb-vf { display: none; }
  .hero-press-logos { gap: 16px; }
  .hero-visual-caption { bottom: 58px; }
  .hero-content { padding-bottom: 80px; }
}
@media (max-width: 680px) {
  .hero-press-bar { padding: 0 18px; height: 50px; overflow-x: auto; }
  .hpb-vogue { font-size: 15px; }
  .hpb-forbes { font-size: 12px; }
  .hpb-allure { font-size: 14px; }
  .hpb-byrdie { display: none; }
  .hero-press-logos { gap: 12px; }
  .hero-visual-caption { bottom: 52px; padding: 13px 16px; }
  .hero-headline { font-size: clamp(34px, 7.5vw, 56px); font-weight: 700; }
  .hero-content { padding-bottom: 72px; }
}



/* =====================================================================
   LUXURY VISUAL UPGRADE v20260704a
   Matches reference: golden bokeh hero, luxury nav, JOIN AMBASSADOR
   ===================================================================== */

/* ── Logo subtitle ─────────────────────────────────────────────────── */
.logo-text-group { display: flex; flex-direction: column; gap: 0; }
.logo-sub {
  display: block;
  font-size: 7.5px;
  letter-spacing: .3em;
  color: rgba(201,161,74,.65);
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 1px;
  line-height: 1;
}

/* ── JOIN AMBASSADOR header button ─────────────────────────────────── */
.btn-join-ambassador {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold, #c9a14a);
  color: #0a0806 !important;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 9px 13px;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s;
  line-height: 1;
}
.btn-join-ambassador:hover { background: rgba(201,161,74,.8); }

/* Mobile join btn */
.mobile-join-btn {
  display: block;
  background: var(--gold,#c9a14a);
  color: #0a0806 !important;
  text-align: center;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;
  margin-top: 12px;
}

/* ── Header icon SVG cleanup ───────────────────────────────────────── */
.header-icons .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  color: rgba(240,228,208,.8);
  text-decoration: none;
  position: relative;
  transition: color .2s;
}
.header-icons .icon-btn:hover { color: var(--gold,#c9a14a); }
.header-icons .icon-btn svg {
  display: block;
  stroke: currentColor;
  fill: none;
}

/* ── Hero section golden bokeh background ──────────────────────────── */
.hero-static-inner::after {
  /* Override any existing ::after and add golden bokeh glow */
  content: '' !important;
  position: absolute !important;
  right: 0; top: 0;
  width: 65%; height: 100%;
  background:
    radial-gradient(ellipse 90% 75% at 62% 38%, rgba(201,161,74,.13) 0%, transparent 58%),
    radial-gradient(ellipse 55% 55% at 82% 18%, rgba(201,161,74,.07) 0%, transparent 52%),
    radial-gradient(ellipse 40% 60% at 72% 72%, rgba(201,161,74,.05) 0%, transparent 55%);
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ── Hero visual — golden arch glow ────────────────────────────────── */
.hero-visual {
  position: relative;
  overflow: hidden;
}
/* Golden radial glow from center of product image */
.hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(10,8,5,.92) 0%, rgba(10,8,5,.45) 16%, transparent 30%),
    radial-gradient(ellipse 78% 70% at 52% 42%, rgba(201,161,74,.14) 0%, rgba(201,161,74,.04) 45%, transparent 68%);
  pointer-events: none;
}
/* Bottom vignette */
.hero-visual::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  z-index: 3;
  background: linear-gradient(0deg, rgba(5,4,2,.9) 0%, rgba(5,4,2,.4) 55%, transparent 100%);
  pointer-events: none;
}

/* ── Hero headline — larger, heavier ───────────────────────────────── */
.hero-headline {
  font-size: clamp(54px, 5.5vw, 90px) !important;
  font-weight: 800 !important;
  letter-spacing: -.028em !important;
  line-height: 1.01 !important;
  margin-bottom: 22px !important;
}
.hero-headline em {
  font-style: normal !important;
  color: var(--gold, #c9a14a) !important;
}

/* ── Hero CTA buttons improvement ──────────────────────────────────── */
.btn-hero-primary {
  font-size: 11px !important;
  letter-spacing: .2em !important;
  font-weight: 700 !important;
  padding: 16px 34px !important;
  text-transform: uppercase !important;
}
.btn-hero-secondary {
  font-size: 11px !important;
  letter-spacing: .15em !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(201,161,74,.35) !important;
  padding: 15px 28px !important;
  color: rgba(240,228,208,.85) !important;
  gap: 8px !important;
}
.btn-hero-secondary:hover {
  border-color: var(--gold,#c9a14a) !important;
  color: var(--gold,#c9a14a) !important;
}

/* ── Trust badge ring improvements ─────────────────────────────────── */
.hero-badge-ring {
  width: 44px !important;
  height: 44px !important;
  border: 1.5px solid rgba(201,161,74,.45) !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,161,74,.05) !important;
  flex-shrink: 0;
}
.hero-trust-badge {
  gap: 10px !important;
}
.hero-badge-label {
  font-size: 9.5px !important;
  letter-spacing: .08em !important;
  line-height: 1.4 !important;
  color: rgba(240,228,208,.75) !important;
  text-align: left !important;
}

/* ── Caption strip (COMPLETE DAILY RITUAL) ─────────────────────────── */
.hero-visual-caption {
  position: absolute !important;
  bottom: 72px !important;
  left: 0 !important; right: 0 !important;
  z-index: 6 !important;
  text-align: center !important;
  padding: 14px 20px !important;
  background: rgba(4,3,2,.72) !important;
  backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(201,161,74,.2) !important;
  border-bottom: 1px solid rgba(201,161,74,.2) !important;
}
.hvc-title {
  font-size: 11px !important;
  letter-spacing: .28em !important;
  color: rgba(240,228,208,.9) !important;
  font-weight: 600 !important;
  margin: 0 0 3px !important;
}
.hvc-sub {
  font-size: 9.5px !important;
  letter-spacing: .22em !important;
  color: rgba(201,161,74,.7) !important;
  margin: 0 !important;
}

/* ── Press bar improvements ─────────────────────────────────────────── */
.hero-press-bar {
  height: 60px !important;
  background: rgba(3,2,1,.9) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(201,161,74,.12) !important;
}
.hero-press-label {
  font-size: 9px !important;
  letter-spacing: .32em !important;
  color: rgba(240,228,208,.38) !important;
}
.hpb-vogue  { font-size: 20px !important; color: rgba(240,228,208,.55) !important; }
.hpb-forbes { font-size: 16px !important; color: rgba(240,228,208,.48) !important; font-weight: 700 !important; }
.hpb-allure { font-size: 18px !important; color: rgba(240,228,208,.48) !important; font-style: italic !important; }
.hpb-byrdie { font-size: 12px !important; color: rgba(240,228,208,.42) !important; letter-spacing: .22em !important; }
.hpb-vf     { font-size: 10px !important; color: rgba(240,228,208,.4) !important; letter-spacing: .2em !important; }

/* ── Announcement bar (topbar) ──────────────────────────────────────── */
.topbar {
  background: #0a0806 !important;
  border-bottom: 1px solid rgba(201,161,74,.15) !important;
  min-height: 38px !important;
}
.topbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 32px !important;
  padding: 9px 24px !important;
}
.topbar-inner > span {
  font-size: 11px !important;
  letter-spacing: .18em !important;
  color: var(--gold,#c9a14a) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* ── Header dark luxury style ───────────────────────────────────────── */
.header {
  background: rgba(8,7,5,.96) !important;
  border-bottom: 1px solid rgba(201,161,74,.1) !important;
  backdrop-filter: blur(20px) !important;
}
.header-inner {
  padding: 0 clamp(24px,4vw,64px) !important;
  height: 68px !important;
}
/* The header-icons row grew (lang switcher + wishlist + compare added
   alongside the existing search/account/cart/Join button), leaving less
   room for the nav at common desktop widths — tighten gap/size/spacing so a
   realistic 7-8 item nav fits on one line in both English and the longer
   Spanish labels ("CATEGORÍAS", "AFILIADOS") instead of wrapping. */
.main-nav { gap: 7px !important; }
.main-nav a {
  font-size: 10px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: rgba(240,228,208,.78) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color .2s !important;
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--gold,#c9a14a) !important;
}
.logo-text {
  color: rgba(240,228,208,.92) !important;
}


/* =====================================================================
   Z-INDEX FIX v20260704b
   - Disable the broken hero-static-inner::after (blocks content)
   - Give hero-content and hero-visual proper z-index in the grid stack
   - Fix hero-visual background to dark (shows through image edges)
   ===================================================================== */

/* Cancel the overlapping ::after on hero-static-inner */
.hero-static-inner::after {
  content: none !important;
  display: none !important;
}

/* Establish z-index stacking properly within hero-static-inner */
.hero-content {
  position: relative !important;
  z-index: 2 !important;
}
.hero-visual {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  /* Dark background — shows where image has transparency / is lighter than desired */
  background: #060504 !important;
}

/* Ensure the kit image is genuinely full-bleed */
.hero-kit-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  z-index: 1 !important;
}

/* Hero-visual overlay stack:
   z-index 1: image (.hero-kit-media)
   z-index 2: golden arch / left fade (::before)
   z-index 3: bottom vignette (::after)
   z-index 6: caption strip (.hero-visual-caption) — already set
*/
.hero-visual::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background:
    linear-gradient(90deg, rgba(8,6,3,.88) 0%, rgba(8,6,3,.4) 16%, transparent 30%),
    radial-gradient(ellipse 80% 72% at 52% 42%, rgba(201,161,74,.16) 0%, rgba(201,161,74,.05) 42%, transparent 66%) !important;
  pointer-events: none !important;
}
.hero-visual::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0; right: 0 !important;
  height: 42% !important;
  z-index: 3 !important;
  background: linear-gradient(0deg, rgba(4,3,2,.92) 0%, rgba(4,3,2,.45) 50%, transparent 100%) !important;
  pointer-events: none !important;
}

/* The hero-press-bar sits inside hero-static-inner and needs to be above the grid */
.hero-press-bar {
  z-index: 10 !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Topbar single message style */
.topbar-msg {
  font-size: 11px !important;
  letter-spacing: .22em !important;
  color: var(--gold, #c9a14a) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  text-align: center;
}
/* Announcement bar items (when JS populates multiple) */
.announcement-item, .topbar-ann-item {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--gold, #c9a14a);
  text-transform: uppercase;
  font-weight: 500;
}

/* === Ambassador section - dark luxury lifestyle background === */
.ambassador-section,
#embajadoras,
.ambassador-bg {
  background-image: url('uploads/media/ambassador_lifestyle.jpg') !important;
  background-size: cover !important;
  background-position: center 20% !important;
  background-repeat: no-repeat !important;
}
.ambassador-section::before,
#embajadoras::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(4,3,2,.82) 0%,
    rgba(8,6,3,.65) 40%,
    rgba(4,3,2,.55) 100%
  ) !important;
  z-index: 0;
}
.ambassador-section > *,
#embajadoras > * {
  position: relative;
  z-index: 1;
}