/* ═══════════════════════════════════════════════════════════
   HOME PAGE — HERO ENHANCEMENTS
   Loaded after style.css; overrides + additions for the
   scroll-driven canvas hero on index.php
═══════════════════════════════════════════════════════════ */

/* ── Allow extra width for overlay-1 with new content ────── */
.text-overlay[data-pos="left"] { max-width: min(440px, 44vw) !important; }
.text-overlay[data-pos="right"] { max-width: min(380px, 38vw) !important; }

/* Subtle backdrop card behind overlay text — only on overlay-1 */
#overlay-1 .overlay-inner {
  position: relative;
  padding: 2px 0;
}
#overlay-1 .overlay-inner::before {
  content: '';
  position: absolute; inset: -28px -34px;
  background: radial-gradient(ellipse 80% 70% at 30% 50%, rgba(7,26,16,.35) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

/* ── White text palette — whole hero section ──────────────
   Hero canvas reads dark/green; white headings and body
   give stronger contrast than gold-light across every
   overlay. Primary CTA keeps its green gradient as the
   single brand accent. */
#hero-section .hero-chip {
  color: #fff;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}
#hero-section .hero-chip svg { stroke: #fff; opacity: .9; }

#hero-section .overlay-heading {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

#hero-section .overlay-rule {
  background: rgba(255,255,255,.6);
  opacity: .8;
}

#hero-section .overlay-body {
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}

#hero-section .hero-btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.05);
}
#hero-section .hero-btn--ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.65);
  color: #fff;
}

#hero-section .hero-stats {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
}
#hero-section .hero-stat:not(:last-child) {
  border-right-color: rgba(255,255,255,.16);
}
#hero-section .hero-stat-num { color: #fff; }
#hero-section .hero-stat-num em { color: rgba(255,255,255,.7); }
#hero-section .hero-stat-lbl { color: rgba(255,255,255,.6); }

#hero-section .hero-trust-lbl { color: rgba(255,255,255,.55); }
#hero-section .hero-trust-icon { color: rgba(255,255,255,.7); }
#hero-section .hero-trust-icon svg { stroke: #fff; opacity: .85; }
#hero-section .hero-trust-icon:hover { color: #fff; }
#hero-section .hero-trust-icon:hover svg { opacity: 1; }

/* Overlays 2 / 3 / 4 — step badge, bullets, link */
#hero-section .hero-step-badge {
  color: #fff;
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.06);
}
#hero-section .hero-step-badge .num { color: #fff; }
#hero-section .hero-step-badge .num::after {
  background: rgba(255,255,255,.55);
}

#hero-section .hero-bullet { color: rgba(255,255,255,.78); }
#hero-section .hero-bullet::before {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.14);
}

#hero-section .overlay-cta {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.4);
}
#hero-section .overlay-cta:hover {
  color: #fff;
  border-bottom-color: #fff;
}

#hero-section .scroll-indicator-text { color: rgba(255,255,255,.55); }
#hero-section .scroll-arrow {
  background: linear-gradient(to bottom, rgba(255,255,255,.55), transparent);
}

/* ── Keep the tall intro clear of the fixed navbar ─────────
   Nav wrapper sits at top:24px and is 72px tall (≈96px band).
   Instead of centring overlay-1 against the full viewport
   (which pushes its top edge under the navbar), reserve that
   band and centre the content within the space below it. */
@media (min-width: 768px) {
  #overlay-1.text-overlay[data-pos="left"] {
    top: 116px;
    bottom: 5vh;
    transform: none !important;
    display: flex;
    align-items: center;
  }
}

/* ── Step badge for overlay 2 / 3 (numbered chip) ────────── */
.hero-step-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Jost', sans-serif; font-size: .62rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: #EAF6EF; align-self: flex-start;
  padding: 7px 16px 7px 14px;
  border-radius: 999px;
  background: rgba(7, 26, 16, 0.42);
  border: 1px solid rgba(157, 213, 188, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.hero-step-badge .num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 1.5rem; font-weight: 400;
  color: #E9C77E; line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.hero-step-badge .num::after {
  content: ''; display: inline-block; width: 24px; height: 1px;
  background: rgba(157,213,188,.5); vertical-align: middle;
  margin-left: 10px;
}
.text-overlay[data-pos="right"] .hero-step-badge { align-self: flex-end; flex-direction: row-reverse; }
.text-overlay[data-pos="right"] .hero-step-badge .num::after {
  margin-left: 0; margin-right: 10px;
}

/* ── Stats strip (overlay 1, after CTAs) ─────────────────── */
.hero-stats {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 0; align-items: center;
  margin-top: 28px;
  padding: 14px 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(157,213,188,.18);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: fit-content;
}
.hero-stat { padding: 0 18px; min-width: 0; }
.hero-stat:not(:last-child) { border-right: 1px solid rgba(157,213,188,.15); }
.hero-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem; font-weight: 500; line-height: 1;
  color: var(--gold-light);
  display: flex; align-items: baseline; gap: 2px;
}
.hero-stat-num em {
  font-style: normal; font-size: 1rem;
  color: var(--gold); margin-left: 1px;
}
.hero-stat-lbl {
  font-family: 'Jost', sans-serif;
  font-size: .58rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
  white-space: nowrap;
}

/* ── Trust mini-strip (overlay 1 bottom) ─────────────────── */
.hero-trust-strip {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px; flex-wrap: wrap;
}
.hero-trust-lbl {
  font-family: 'Jost', sans-serif; font-size: .56rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.hero-trust-icons { display: flex; align-items: center; gap: 14px; }
.hero-trust-icon {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Jost', sans-serif; font-size: .62rem;
  font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  transition: color .25s ease;
}
.hero-trust-icon svg {
  width: 14px; height: 14px; stroke: var(--gold-light);
  fill: none; stroke-width: 1.8; flex-shrink: 0;
}
.hero-trust-icon:hover { color: var(--gold-light); }

/* ── Micro-bullets (overlays 2 / 3) ──────────────────────── */
.hero-bullets {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px;
}
.hero-bullet {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Jost', sans-serif; font-size: .76rem;
  font-weight: 400; letter-spacing: .04em;
  color: rgba(255,255,255,.65);
}
.hero-bullet::before {
  content: ''; width: 5px; height: 5px;
  border-radius: 50%; background: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(46,155,101,.18);
  flex-shrink: 0;
}
.text-overlay[data-pos="right"] .hero-bullet { flex-direction: row-reverse; }

/* ── Magnetic / interactive CTAs ─────────────────────────── */
.hero-btn { will-change: transform; }
.hero-btn--primary { position: relative; overflow: hidden; }
.hero-btn--primary::before {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg);
  transition: left .8s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.hero-btn--primary:hover::before { left: 140%; }

/* ── Heading line-stagger setup (GSAP fills opacity) ─────── */
.split-line {
  display: block; overflow: hidden;
}
.split-line > span {
  display: inline-block; will-change: transform, opacity;
}

/* ── Scroll indicator — refined GSAP target ──────────────── */
.scroll-indicator { will-change: opacity, transform; }

/* ── Vignette refined ────────────────────────────────────── */
.hero-vignette {
  background: radial-gradient(ellipse 80% 80% at 50% 45%,
      transparent 35%,
      rgba(0,0,0,.4) 78%,
      rgba(0,0,0,.7) 100%) !important;
}

/* ── Bottom edge fade for readability ────────────────────── */
.hero-sticky::after {
  content: ''; position: absolute; left: 0; right: 0;
  bottom: 0; height: 22%;
  background: linear-gradient(180deg, transparent 0%, rgba(7,26,16,.55) 100%);
  pointer-events: none; z-index: 2;
}

/* ── Watermark mask ──────────────────────────────────────────
   The hero frames are AI-generated and carry a baked-in "Veo"
   watermark in the bottom-right corner. The canvas draws every
   frame with a centred "cover" fit, so the watermark always lands
   in the same spot. This feathered patch sits over that corner and
   reads as a deeper extension of the vignette, hiding the mark
   across every aspect ratio. (Hidden on ≤767px — see mobile block,
   where cover-cropping already pushes the mark off-screen.) */
.hero-wm-mask {
  position: absolute;
  right: 0; bottom: 0;
  width: clamp(160px, 16vw, 300px);
  height: clamp(90px, 14vh, 170px);
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(135% 135% at 100% 100%,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.9)  18%,
      rgba(0,0,0,.55) 44%,
      rgba(0,0,0,.2)  68%,
      transparent     86%);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1180px) {
  .text-overlay[data-pos="left"] { max-width: min(380px, 50vw) !important; }
  .hero-stats { padding: 12px 14px; }
  .hero-stat { padding: 0 12px; }
  .hero-stat-num { font-size: 1.35rem; }
}

@media (max-width: 900px) {
  .text-overlay[data-pos="left"] { left: 5% !important; max-width: min(360px, 80vw) !important; }
  .text-overlay[data-pos="right"] { right: 5% !important; max-width: min(340px, 70vw) !important; }
  .hero-trust-lbl { display: none; }
  .hero-stats { gap: 0; padding: 10px 12px; }
  .hero-stat { padding: 0 10px; }
}

@media (max-width: 767px) {
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-top: 22px;
    padding: 12px 10px;
  }
  .hero-stat { padding: 0 6px; text-align: center; }
  .hero-stat-num { font-size: 1.15rem; justify-content: center; }
  .hero-stat-lbl { font-size: .52rem; letter-spacing: .14em; }
  .hero-trust-strip { justify-content: center; gap: 12px; margin-top: 18px; }
  .hero-trust-icon { font-size: .56rem; }
  .hero-trust-icon span { display: none; }
  .hero-trust-icon svg { width: 18px; height: 18px; }

  .hero-bullets { align-items: center; }
  .hero-bullet { justify-content: center; font-size: .72rem; }

  .hero-step-badge { align-self: center !important; flex-direction: row !important; }
  .hero-step-badge .num { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  .hero-stat-num { font-size: 1rem; }
  .hero-stat-num em { font-size: .75rem; }
  .hero-stat-lbl { font-size: .48rem; }
}

/* ── Per-letter text reveal on viewport entry ──────────── */
.eyebrow,
.sec-title,
.sec-desc,
.hp-craft-desc,
.hp-step-body h4,
.hp-step-body p,
.hp-bridal-title,
.hp-bridal-desc,
.hp-newsletter-title,
.hp-newsletter-desc,
.hp-stats-title,
.hp-press-eyebrow,
.hp-feat-t,
.hp-feat-d,
.cta-eyebrow,
.cta-band > h2,
.cta-band > p{
  opacity:0;
}
.eyebrow.is-shown,
.sec-title.is-shown,
.sec-desc.is-shown,
.hp-craft-desc.is-shown,
.hp-step-body h4.is-shown,
.hp-step-body p.is-shown,
.hp-bridal-title.is-shown,
.hp-bridal-desc.is-shown,
.hp-newsletter-title.is-shown,
.hp-newsletter-desc.is-shown,
.hp-stats-title.is-shown,
.hp-press-eyebrow.is-shown,
.hp-feat-t.is-shown,
.hp-feat-d.is-shown,
.cta-eyebrow.is-shown,
.cta-band > h2.is-shown,
.cta-band > p.is-shown{
  opacity:1;
}
.is-shown .word{
  display:inline-block;
  white-space:nowrap;
}
.is-shown .char{
  display:inline-block;
  will-change:transform, opacity;
  backface-visibility:hidden;
}

html.reduced-motion .eyebrow,
html.reduced-motion .sec-title,
html.reduced-motion .sec-desc,
html.reduced-motion .hp-craft-desc,
html.reduced-motion .hp-step-body h4,
html.reduced-motion .hp-step-body p,
html.reduced-motion .hp-bridal-title,
html.reduced-motion .hp-bridal-desc,
html.reduced-motion .hp-newsletter-title,
html.reduced-motion .hp-newsletter-desc,
html.reduced-motion .hp-stats-title,
html.reduced-motion .hp-press-eyebrow,
html.reduced-motion .hp-feat-t,
html.reduced-motion .hp-feat-d,
html.reduced-motion .cta-eyebrow,
html.reduced-motion .cta-band > h2,
html.reduced-motion .cta-band > p{
  opacity:1 !important;
}
html.reduced-motion .char{
  opacity:1 !important;
  transform:none !important;
}
@media (prefers-reduced-motion: reduce){
  .eyebrow, .sec-title, .sec-desc, .hp-craft-desc,
  .hp-step-body h4, .hp-step-body p,
  .hp-bridal-title, .hp-bridal-desc,
  .hp-newsletter-title, .hp-newsletter-desc,
  .hp-stats-title, .hp-press-eyebrow,
  .hp-feat-t, .hp-feat-d,
  .cta-eyebrow, .cta-band > h2, .cta-band > p{ opacity:1; }
  .char{
    opacity:1 !important;
    transform:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   BEYOND EXPRESSION — Pure Monochrome
   Chanel / Saint Laurent / Acne Studios aesthetic.
   No colour. Contrast & typography do all the work.
   ─ BLACK     #000000  the boldest dark
   ─ NOIR      #141414  soft-black for large dark areas
   ─ GRAPHITE  #4A4A4A  mid-dark text & accents
   ─ STEEL     #8A8A8A  secondary text, dividers
   ─ MIST      #E0E0E0  hairline borders, soft surfaces
   ─ SNOW      #FAFAFA  off-white base
   ─ WHITE     #FFFFFF  primary surface
   Loaded only on the home page; other pages keep their identity.
═══════════════════════════════════════════════════════════ */

:root {
  --gold:    #4A4A4A;   /* GRAPHITE — replaces metallic accent */
  --gold-l:  #8A8A8A;   /* STEEL — light accent / dividers */
  --gold-d:  #2A2A2A;   /* deeper graphite — gradient endpoint */
  --ink:     #000000;   /* PURE BLACK */
  --navy:    #141414;   /* NOIR — soft black for large dark areas */
  --cream:   #FAFAFA;   /* SNOW */
  --wine:    #000000;   /* PURE BLACK — interactive solid */
  --wine-d:  #000000;   /* PURE BLACK */
  --border:  #E0E0E0;   /* MIST hairline */
}

/* ── Hero overlay (overlay-1 backdrop card) ───────────────── */
#overlay-1 .overlay-inner::before {
  background: radial-gradient(ellipse 80% 70% at 30% 50%, rgba(0,0,0,.62) 0%, transparent 70%);
}

/* ── Step badge — chrome chip on a space-black scrim ─────── */
.hero-step-badge {
  color: #FAFAFA;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(74, 74, 74, 0.5);
}
.hero-step-badge .num { color: #FFFFFF; }
.hero-step-badge .num::after { background: rgba(74,74,74,.65); }

/* ── Stats strip & trust strip (hero) ─────────────────────── */
.hero-stats {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(74,74,74,.3);
}
.hero-stat:not(:last-child) { border-right: 1px solid rgba(74,74,74,.22); }

/* ── Micro-bullet dots (overlays 2 & 3) ───────────────────── */
.hero-bullet::before {
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(74,74,74,.22), 0 0 12px rgba(74,74,74,.4);
}

/* ── Bottom-edge fade ─────────────────────────────────────── */
.hero-sticky::after {
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.72) 100%);
}

/* ═══════════════════════════════════════════════════════════
   Section ambient gradients — chrome bloom on pearl
═══════════════════════════════════════════════════════════ */

/* Collections — pearl into soft pearl */
.hp-collections {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
}
.hp-collections::before {
  background:
    radial-gradient(ellipse 50% 40% at 90% 0%, rgba(74,74,74,.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 5% 100%, rgba(0,0,0,.10) 0%, transparent 70%);
}
.hp-col-card-shade {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 35%, rgba(0,0,0,.94) 100%);
}
.hp-col-card:hover .hp-col-card-cta {
  background: linear-gradient(135deg, #000000, #000000);
  border-color: #000000;
  color: #FAFAFA;
}

/* Bestsellers — filter pills */
.hp-bestsellers { background: #FFFFFF; }
.hp-filter-pill:hover {
  border-color: rgba(0,0,0,.45);
  background: #FAFAFA;
}
.hp-filter-pill.active {
  background: linear-gradient(135deg, #000000 0%, #000000 100%);
  border-color: #000000;
  color: #FAFAFA;
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
}
.hp-filter-count {
  background: rgba(74,74,74,.26);
  color: #000000;
}
.hp-filter-pill.active .hp-filter-count {
  background: rgba(245,242,236,.2);
  color: #FAFAFA;
}

/* Bestsellers — product cards */
.hp-prod-card:hover {
  border-color: rgba(0,0,0,.42);
  box-shadow: 0 20px 44px rgba(0,0,0,.14);
}
.hp-prod-hover-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, transparent 100%);
}
.hp-prod-quick {
  background: linear-gradient(135deg, #000000 0%, #000000 100%);
  color: #FAFAFA;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.hp-prod-quick:hover {
  background: linear-gradient(135deg, #FFFFFF 0%, #4A4A4A 100%);
  color: #000000;
  box-shadow: 0 8px 22px rgba(74,74,74,.55);
}
.hp-prod-qty {
  background: linear-gradient(135deg, #000000, #000000);
  box-shadow: 0 6px 16px rgba(0,0,0,.32);
}

/* Craftsmanship — space-black velvet section */
.hp-craft::before {
  background:
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(74,74,74,.22) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(0,0,0,.24) 0%, transparent 60%);
}
.hp-craft-img-wrap::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%);
}
.hp-craft-step:hover {
  background: rgba(74,74,74,.08);
  border-color: rgba(74,74,74,.32);
}
.hp-step-no {
  border: 1px solid rgba(74,74,74,.52);
  background: rgba(74,74,74,.14);
  color: #FFFFFF;
}
.hp-craft-eyebrow { color: #FFFFFF; }

/* Bridal showcase — vignette scrim that darkens behind the centred
   content while keeping the image edges bright. Warm brown tones, no
   pure black. The radial gradient does the heavy lifting for legibility. */
.hp-bridal-overlay {
  background:
    /* Strong centred vignette behind the text content */
    radial-gradient(ellipse 60% 70% at 50% 50%,
      rgba(35, 22, 12, .78) 0%,
      rgba(35, 22, 12, .55) 35%,
      rgba(35, 22, 12, .25) 60%,
      transparent 85%),
    /* Top + bottom edge fades for additional contrast */
    linear-gradient(180deg,
      rgba(35, 22, 12, .35) 0%,
      transparent 25%,
      transparent 75%,
      rgba(35, 22, 12, .45) 100%);
}
.hp-bridal-halo {
  background: radial-gradient(ellipse at center, rgba(220,200,170,.18) 0%, rgba(220,200,170,.06) 45%, transparent 70%);
}

/* Force solid white on the gradient-fill title so it stays visible
   regardless of the background. Stronger shadows everywhere. */
.hp-bridal .hp-bridal-eyebrow {
  color: #FFFFFF;
  text-shadow: 0 2px 16px rgba(20,12,4,.9), 0 1px 4px rgba(0,0,0,.7);
}
.hp-bridal .hp-bridal-title {
  text-shadow: 0 4px 30px rgba(20,12,4,.85), 0 2px 8px rgba(0,0,0,.55);
}
.hp-bridal .hp-bridal-title-shine,
.hp-bridal .hp-bridal-title-shine .char {
  /* Override the pearl-to-pearl gradient with solid white so the
     title is legible against any backdrop tone. */
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #FFFFFF !important;
  color: #FFFFFF !important;
  text-shadow: 0 4px 30px rgba(20,12,4,.85), 0 2px 8px rgba(0,0,0,.55);
}
.hp-bridal .hp-bridal-desc {
  color: #FFFFFF;
  text-shadow: 0 2px 16px rgba(20,12,4,.85), 0 1px 4px rgba(0,0,0,.6);
}
.hp-bridal .hp-bridal-mini {
  background: rgba(20,12,4,.32);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hp-bridal .hp-bridal-mini strong,
.hp-bridal .hp-bridal-mini span {
  color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(20,12,4,.75);
}

/* Bridal CTAs — chrome gradient on space black */
.hp-btn-gold {
  background: linear-gradient(135deg, #FFFFFF 0%, #4A4A4A 100%);
  color: #000000;
  box-shadow: 0 8px 24px rgba(74,74,74,.4);
}
.hp-btn-gold:hover {
  background: linear-gradient(135deg, #D6DAE0 0%, #FFFFFF 100%);
  box-shadow: 0 14px 36px rgba(74,74,74,.6);
}
.hp-btn-gold--pulse::before {
  background: linear-gradient(135deg, rgba(74,74,74,.7), rgba(0,0,0,.6));
}

/* Testimonials */
.hp-testi-sec { background: #FAFAFA; }
.hp-tcard:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.36);
}
.hp-tcard-quote {
  color: rgba(0,0,0,.16);
}

/* Features */
.hp-feat-card:hover {
  border-color: rgba(0,0,0,.4);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.hp-feat-card:hover .hp-feat-ico {
  background: linear-gradient(135deg, #000000, #000000);
  border-color: #000000;
}

/* Newsletter */
.hp-newsletter-inner::before {
  background:
    radial-gradient(ellipse 35% 60% at 100% 0%, rgba(74,74,74,.22) 0%, transparent 70%),
    radial-gradient(ellipse 30% 50% at 0% 100%, rgba(0,0,0,.14) 0%, transparent 70%);
}
.hp-newsletter-field:focus-within {
  border-color: #000000;
  box-shadow: 0 0 0 4px rgba(0,0,0,.16);
}

/* Stats — space-black band with chrome glow */
.hp-stats::before {
  background:
    radial-gradient(ellipse 50% 60% at 0% 0%, rgba(74,74,74,.26) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 100% 100%, rgba(0,0,0,.22) 0%, transparent 60%);
}
.hp-stat:hover { background: rgba(74,74,74,.09); }
.hp-stats-eyebrow { color: #FFFFFF; }

/* Stats numbers — chrome to white text sweep */
.hp-stat-num {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Instagram overlay — indigo to space black */
.hp-insta-overlay {
  background: linear-gradient(135deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.94) 100%);
}

/* Press */
.hp-press::before {
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(74,74,74,.18) 0%, transparent 60%);
}
.hp-press-eyebrow { color: #FFFFFF; }

/* Style finder quiz */
.hp-style {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
}
.hp-style::before {
  background:
    radial-gradient(ellipse 40% 50% at 100% 0%, rgba(74,74,74,.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(0,0,0,.12) 0%, transparent 60%);
}
/* Step indicator — clean monochrome */
.hp-style-progress-fill {
  top: 15px;
  background: rgba(0,0,0,.08);
}
.hp-style-step {
  color: rgba(0,0,0,.4);
  background: transparent;
  letter-spacing: .18em;
}
.hp-style-step b {
  font-weight: 600;
  transition: color .35s ease;
}
.hp-style-step i {
  background: #FFFFFF;
  border: 1.5px solid rgba(0,0,0,.14);
  color: rgba(0,0,0,.42);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}
.hp-style-step.is-active {
  color: #0A0A0A;
}
.hp-style-step.is-active i {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #FFFFFF;
  box-shadow:
    0 0 0 4px rgba(0,0,0,.08),
    0 6px 16px rgba(0,0,0,.22);
  transform: scale(1.08);
}
.hp-style-step.is-done {
  color: #0A0A0A;
}
.hp-style-step.is-done i {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.hp-style-opt::before {
  background: linear-gradient(135deg, rgba(74,74,74,.12), rgba(0,0,0,.06));
}
.hp-style-opt:hover {
  border-color: rgba(0,0,0,.4);
}
.hp-style-opt.is-selected {
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(0,0,0,.22), 0 14px 30px rgba(0,0,0,.12);
}
.hp-style-opt.is-selected::after {
  background-color: #000000;
}
.hp-style-opt.is-selected .hp-style-opt-ico {
  background: linear-gradient(135deg, #000000, #000000);
  color: #FAFAFA;
}
.hp-style-opt:hover .hp-style-opt-ico {
  background: #000000;
  color: #FAFAFA;
}
.hp-style-tag {
  background: rgba(74,74,74,.22);
  border: 1px solid rgba(74,74,74,.4);
  color: #000000;
}

/* Progress fill in the quiz — solid charcoal */
.hp-style-progress-fill::after {
  background: #0A0A0A;
}

/* CTA band */
.cta-band {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
}
.cta-band::before {
  background:
    radial-gradient(ellipse 50% 60% at 80% 0%, rgba(74,74,74,.24) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 100%, rgba(0,0,0,.14) 0%, transparent 60%);
}
.cta-eyebrow { color: #000000; }
.btn-wh-ghost {
  color: #000000;
  border: 1px solid rgba(0,0,0,.4);
}
.btn-wh-ghost:hover {
  background: rgba(0,0,0,.06);
  border-color: #000000;
}

/* Quick-view modal */
.hp-qv-backdrop { background: rgba(0,0,0,.88); }
.hp-qv-count    { background: rgba(0,0,0,.72); }
.hp-qv-dots     { background: rgba(0,0,0,.58); }
.hp-qv-dot.is-active { background: #FFFFFF; }

/* ── Marquee — space-black band with chrome text ─────────── */
.marquee {
  background: linear-gradient(90deg, #000000 0%, #000000 50%, #000000 100%);
}
.mq-item { color: #FAFAFA; opacity: .95; }
.mq-dot  { background: #FFFFFF; opacity: .85; }

/* ── Btn-wh (CTA primary) — indigo, hovers to space black ── */
.cta-band p { color: rgba(0,0,0,0.72); }
.btn-wh {
  background: linear-gradient(135deg, #000000 0%, #000000 100%);
  color: #FAFAFA;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.btn-wh:hover {
  background: linear-gradient(135deg, #000000 0%, #000000 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 32px rgba(0,0,0,.5);
}

/* ═══════════════════════════════════════════════════════════
   Sparkle / shimmer accents — diamond-grade chrome highlights
═══════════════════════════════════════════════════════════ */

/* Sparkle dots in the bridal banner — diamond-bright chrome glints */
.hp-spark {
  background: radial-gradient(circle, #FFFFFF 0%, rgba(74,74,74,.88) 40%, transparent 70%);
}
.hp-spark::after {
  background: radial-gradient(circle, rgba(74,74,74,.55) 0%, transparent 60%);
}

/* Flourish line + gem above bridal title */
.hp-bridal-flourish-line {
  background: linear-gradient(90deg, transparent 0%, rgba(74,74,74,.78) 100%);
}
.hp-bridal-flourish-line:last-child {
  background: linear-gradient(90deg, rgba(74,74,74,.78) 0%, transparent 100%);
}
.hp-bridal-flourish-gem {
  color: #FFFFFF;
  filter: drop-shadow(0 0 8px rgba(74,74,74,.85));
}

/* Bridal title shimmer — pearl-to-chrome sweep */
.hp-bridal-title-shine,
.hp-bridal-title-shine .char {
  background-image: linear-gradient(110deg, #FFFFFF 0%, #FFFFFF 30%, #FFFFFF 48%, #FAFAFA 56%, #FFFFFF 70%, #FFFFFF 100%);
}

/* What We Offer — chrome / indigo accents */
.hp-offer {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
}
.hp-offer::before {
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(74,74,74,.22) 0%, transparent 60%);
}
.hp-offer-tab.is-active {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 100%);
  border-color: rgba(74,74,74,.5);
}
.hp-offer-tab.is-active .hp-offer-tab-tag { color: #000000; }
.hp-offer-tag {
  background: rgba(74,74,74,.26);
  border: 1px solid rgba(74,74,74,.48);
  color: #000000;
}
.hp-offer-cta { color: #000000; }
.hp-offer-cta:hover { color: #000000; border-color: #000000; }

/* ═══════════════════════════════════════════════════════════
   Craft stamp circle — chrome disc on space black
═══════════════════════════════════════════════════════════ */
.hp-craft-stamp {
  background: linear-gradient(135deg, #FFFFFF 0%, #2A2A2A 100%);
  color: #000000;
  box-shadow: 0 14px 40px rgba(74,74,74,.36), inset 0 0 0 1px rgba(255,255,255,.32);
}
.hp-craft-stamp-lbl { color: rgba(0,0,0,.88); }

/* Testimonial avatars — indigo-to-chrome gradient */
.hp-tcard-avatar {
  background: linear-gradient(135deg, #FFFFFF 0%, #000000 100%);
  color: #FFFFFF;
}

/* Stars / category text */
.hp-tcard-stars { color: #000000; }
.hp-prod-cat    { color: #000000; }
.hp-prod-badge  { color: #000000; }

/* Product add-to-cart button */
.hp-prod-add {
  background: #FAFAFA;
  color: #000000;
}
.hp-prod-add:hover {
  background: linear-gradient(135deg, #000000, #000000);
  border-color: #000000;
  color: #FAFAFA;
}

/* Wishlist heart */
.hp-prod-wish:hover,
.hp-prod-wish.is-active {
  background: linear-gradient(135deg, #000000, #000000);
  border-color: #000000;
  color: #FAFAFA;
}

/* Newsletter section base */
.hp-newsletter { background: #FAFAFA; }
.hp-newsletter-eyebrow { color: #000000; }


/* ═══════════════════════════════════════════════════════════
   BUTTON SYSTEM — pure black/white inversions
   On dark backgrounds : WHITE solid ⇄ TRANSPARENT + WHITE border
   On light backgrounds: BLACK solid ⇄ TRANSPARENT + BLACK border
   No gradients. No tinted shadows. Crisp typography moves.
═══════════════════════════════════════════════════════════ */

/* ─── HERO BUTTONS (sit on dark image) ──────────────────── */
#hero-section .hero-btn--primary {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #FFFFFF;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
#hero-section .hero-btn--primary:hover {
  background: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
#hero-section .hero-btn--primary svg { stroke: currentColor; }

#hero-section .hero-btn--ghost {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.55);
}
#hero-section .hero-btn--ghost:hover {
  background: #FFFFFF;
  color: #000000;
  border-color: #FFFFFF;
}

/* ─── BRIDAL BANNER CTAs (sit on dark image) ────────────── */
.hp-btn-gold {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #FFFFFF;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.hp-btn-gold:hover {
  background: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  filter: none;
}
.hp-btn-gold svg { stroke: currentColor; }
.hp-btn-gold--pulse::before {
  background: rgba(255,255,255,.35);
}

/* Quiz result "View Piece" CTA sits on a white card, not the bridal banner —
   invert on hover instead of going transparent + white (which is invisible). */
.hp-style-result-actions .hp-btn-gold {
  background: #0F0F0F;
  color: #FFFFFF;
  border: 1px solid #0F0F0F;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.hp-style-result-actions .hp-btn-gold:hover {
  background: #FFFFFF;
  color: #0F0F0F;
  border-color: #0F0F0F;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  filter: none;
}

.hp-btn-ghost {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.55);
}
.hp-btn-ghost:hover {
  background: #FFFFFF;
  color: #000000;
  border-color: #FFFFFF;
}

/* ─── CTA BAND BUTTONS (sit on snow cream) ──────────────── */
.btn-wh {
  background: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.btn-wh:hover {
  background: transparent;
  color: #000000;
  border-color: #000000;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.btn-wh svg { stroke: currentColor; }

.btn-wh-ghost {
  background: transparent;
  color: #000000;
  border: 1px solid #000000;
}
.btn-wh-ghost:hover {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}

/* ─── PRODUCT CARD ICONS (Quick View, Add, Wish) ────────── */
.hp-prod-quick {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #FFFFFF;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.hp-prod-quick:hover {
  background: #000000;
  color: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}

.hp-prod-add {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #E0E0E0;
}
.hp-prod-add:hover {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
  transform: rotate(90deg);
}

.hp-prod-wish {
  background: rgba(255,255,255,.96);
  color: #000000;
  border: 1px solid #E0E0E0;
}
.hp-prod-wish:hover,
.hp-prod-wish.is-active {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}
.hp-prod-wish:hover svg,
.hp-prod-wish.is-active svg { fill: #FFFFFF; stroke: #FFFFFF; }

.hp-prod-qty {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* ─── FILTER PILLS (sit on white bestsellers) ───────────── */
.hp-filter-pill {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #E0E0E0;
}
.hp-filter-pill:hover {
  background: #FAFAFA;
  border-color: #000000;
}
.hp-filter-pill.active {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.hp-filter-count {
  background: #F0F0F0;
  color: #000000;
}
.hp-filter-pill.active .hp-filter-count {
  background: rgba(255,255,255,.22);
  color: #FFFFFF;
}

/* ─── STYLE-FINDER QUIZ BUTTONS ─────────────────────────── */
.hp-btn-ghost--dark {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
}
.hp-btn-ghost--dark:hover {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}

/* ─── NEWSLETTER SUBMIT (uses .hp-btn-gold base) ────────── */
.hp-newsletter-form.is-success .hp-btn-gold {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}

/* ─── COLLECTIONS CARD CTA "Explore →" ──────────────────── */
.hp-col-card-cta {
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  color: #FFFFFF;
}
.hp-col-card:hover .hp-col-card-cta {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #000000;
}

/* ─── OFFER PANEL CTA arrow link ────────────────────────── */
.hp-offer-cta {
  color: #000000;
  border-bottom-color: #000000;
}
.hp-offer-cta:hover {
  color: #4A4A4A;
  border-bottom-color: #4A4A4A;
}

/* ─── HERO LINK-ARROW (Bestsellers "View All Products") ──── */
.hp-link-arrow {
  color: #000000;
}
.hp-link-arrow:hover {
  color: #4A4A4A;
}

/* ═══════════════════════════════════════════════════════════
   DEME-INSPIRED PALETTE — warm cream + champagne accent
   Used by the 3 new ecommerce sections below to introduce
   warmth without disturbing the existing monochrome system.
═══════════════════════════════════════════════════════════ */
:root {
  --de-cream:        #F5EFE5;   /* main warm-cream surface          */
  --de-cream-soft:   #FBF7F0;   /* lighter cream for cards          */
  --de-bone:         #E8DECB;   /* hairline borders                 */
  --de-bone-mid:     #D9CCB1;   /* divider / accent                 */
  --de-clay:         #8B6F47;   /* deep champagne (accent / hover)  */
  --de-clay-d:       #5C4A33;   /* darker clay                      */
  --de-ink:          #1A1815;   /* near-black (warmer than pure)    */
  --de-ink-soft:     #6B5D4F;   /* secondary warm grey              */
}

/* ═══════════════════════════════════════════════════════════
   SHOP BY OCCASION — image tile grid (DEME-style)
   ─ 4-col grid of large image tiles, hover zoom + reveal,
     occasion-based curation
═══════════════════════════════════════════════════════════ */
.hp-occasion {
  background: var(--de-cream);
  position: relative;
}
.hp-occasion .sec-in { position: relative; }

.hp-occ-hd {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.hp-occ-eyebrow {
  color: var(--de-clay);
  margin-bottom: 14px;
}
.hp-occ-title {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  color: var(--de-ink);
  margin: 0 0 16px;
  line-height: 1.05;
  letter-spacing: -.005em;
}
.hp-occ-desc {
  font-family: 'Jost', sans-serif;
  font-size: .95rem;
  color: var(--de-ink-soft);
  line-height: 1.6;
  margin: 0;
}

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

.hp-occ-tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: #FFFFFF;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  isolation: isolate;
  background: var(--de-ink);
  cursor: pointer;
  transition: transform .55s cubic-bezier(.4,0,.2,1),
              box-shadow .55s ease;
  will-change: transform;
}
.hp-occ-tile.is-entering,
.hp-occ-tile {
  animation: hp-occ-rise .65s cubic-bezier(.4,0,.2,1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes hp-occ-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hp-occ-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 70px rgba(60, 40, 20, .22);
}

.hp-occ-tile-img {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hp-occ-tile-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.22, 1, .36, 1), filter .6s ease;
  filter: saturate(.94);
}
.hp-occ-tile:hover .hp-occ-tile-img img {
  transform: scale(1.08);
  filter: saturate(1.04);
}

.hp-occ-tile-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(20,15,5,.55) 75%, rgba(15,10,2,.88) 100%);
  pointer-events: none;
  transition: opacity .55s ease;
}
.hp-occ-tile:hover .hp-occ-tile-shade { opacity: .92; }

.hp-occ-tile-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 28px 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.hp-occ-tile-count {
  font-family: 'Jost', sans-serif;
  font-size: .52rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-bottom: 8px;
}
.hp-occ-tile-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem; font-weight: 500;
  color: #FFFFFF;
  margin: 0 0 6px;
  line-height: 1;
  letter-spacing: -.005em;
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
.hp-occ-tile-sub {
  font-family: 'Jost', sans-serif;
  font-size: .82rem;
  color: rgba(255,255,255,.78);
  margin: 0 0 18px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height .5s cubic-bezier(.4,0,.2,1),
              opacity .35s ease,
              transform .5s cubic-bezier(.4,0,.2,1),
              margin .5s ease;
}
.hp-occ-tile:hover .hp-occ-tile-sub {
  max-height: 60px;
  opacity: 1;
  transform: translateY(0);
}

.hp-occ-tile-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Jost', sans-serif;
  font-size: .64rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: #FFFFFF;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.45);
  width: fit-content;
  transition: gap .35s ease, border-color .3s ease, color .25s ease;
}
.hp-occ-tile-cta svg {
  width: 14px; height: 14px;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.hp-occ-tile:hover .hp-occ-tile-cta {
  gap: 14px;
  border-bottom-color: #FFFFFF;
}
.hp-occ-tile:hover .hp-occ-tile-cta svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .hp-occ-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-occ-tile-name { font-size: 1.7rem; }
}
@media (max-width: 560px) {
  .hp-occ-grid { grid-template-columns: 1fr; gap: 16px; }
  .hp-occ-tile { aspect-ratio: 4 / 5; }
  .hp-occ-tile-meta { padding: 22px 22px 24px; }
  .hp-occ-tile-name { font-size: 1.55rem; }
  /* Touch devices — always show sub */
  .hp-occ-tile-sub { max-height: 60px; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   IN FOCUS — dual editorial showcase (DEME-style)
   ─ side-by-side feature cards with portrait images,
     editorial overlay text, soft hover lift, gold accents
═══════════════════════════════════════════════════════════ */
.hp-focus {
  background: #FFFFFF;
  position: relative;
}

.hp-focus-hd {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 640px;
}
.hp-focus-eyebrow {
  color: var(--de-clay);
  margin-bottom: 12px;
}
.hp-focus-title {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  color: var(--de-ink);
  margin: 0;
  line-height: 1;
  letter-spacing: -.005em;
}

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

.hp-focus-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--de-cream-soft);
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .55s cubic-bezier(.4,0,.2,1),
              box-shadow .55s ease;
  will-change: transform;
}
.hp-focus-card.is-entering,
.hp-focus-card {
  animation: hp-focus-rise .7s cubic-bezier(.4,0,.2,1) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}
@keyframes hp-focus-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hp-focus-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 38px 70px rgba(60, 40, 20, .18);
}

.hp-focus-card-img {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--de-bone);
}
.hp-focus-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s cubic-bezier(.22, 1, .36, 1), filter .6s ease;
  filter: saturate(.94);
}
.hp-focus-card:hover .hp-focus-card-img img {
  transform: scale(1.06);
  filter: saturate(1.04);
}

/* Decorative inset frame — appears on hover */
.hp-focus-card-frame {
  position: absolute;
  top: 14px; left: 14px; right: 14px; bottom: 14px;
  border: 1px solid rgba(255,255,255,.5);
  pointer-events: none;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .5s ease, transform .55s cubic-bezier(.4,0,.2,1);
  z-index: 2;
  border-radius: 2px;
}
.hp-focus-card:hover .hp-focus-card-frame {
  opacity: 1;
  transform: scale(1);
}

.hp-focus-card-body {
  padding: 36px 36px 38px;
  position: relative;
}
.hp-focus-card-tag {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: .58rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--de-clay);
  margin-bottom: 14px;
  position: relative;
  padding-left: 38px;
}
.hp-focus-card-tag::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 28px; height: 1px;
  background: var(--de-clay);
}

.hp-focus-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 500;
  color: var(--de-ink);
  margin: 0 0 12px;
  line-height: 1.1;
  letter-spacing: -.005em;
  transition: color .3s ease;
}
.hp-focus-card:hover .hp-focus-card-name { color: var(--de-clay-d); }

.hp-focus-card-desc {
  font-family: 'Jost', sans-serif;
  font-size: .92rem;
  color: var(--de-ink-soft);
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 440px;
}

.hp-focus-card-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Jost', sans-serif;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--de-ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--de-ink);
  transition: gap .35s cubic-bezier(.4,0,.2,1),
              color .25s ease,
              border-color .25s ease;
  width: fit-content;
}
.hp-focus-card-cta svg {
  width: 14px; height: 14px;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.hp-focus-card:hover .hp-focus-card-cta {
  gap: 16px;
  color: var(--de-clay);
  border-bottom-color: var(--de-clay);
}
.hp-focus-card:hover .hp-focus-card-cta svg { transform: translateX(4px); }

/* Tone variants — subtle background differentiation */
.hp-focus-card--a { background: var(--de-cream); }
.hp-focus-card--b { background: var(--de-cream-soft); }

@media (max-width: 900px) {
  .hp-focus-grid { grid-template-columns: 1fr; gap: 20px; }
  .hp-focus-card-body { padding: 28px 24px 32px; }
}

/* ═══════════════════════════════════════════════════════════
   THE FESTIVE EDIT — themed product carousel (DEME-style)
   ─ left editorial intro panel + horizontal product rail
═══════════════════════════════════════════════════════════ */
.hp-edit {
  background: #EFE6D2;
  position: relative;
  overflow: hidden;
}
.hp-edit .sec-in { position: relative; }

.hp-edit-stage {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 56px;
  align-items: center;
}

/* ── Editorial intro panel (left) ──────────────────────── */
.hp-edit-intro {
  position: relative;
}
.hp-edit-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .9rem;
  color: var(--de-clay);
  letter-spacing: .04em;
  margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 14px;
}
.hp-edit-num::after {
  content: '';
  width: 40px; height: 1px;
  background: var(--de-clay);
}
.hp-edit-eyebrow {
  color: var(--de-clay);
  margin-bottom: 14px;
}
.hp-edit-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem, 4.2vw, 3.6rem);
  font-weight: 400;
  color: var(--de-ink);
  margin: 0 0 22px;
  line-height: .95;
  letter-spacing: -.015em;
}
.hp-edit-desc {
  font-family: 'Jost', sans-serif;
  font-size: .95rem;
  color: var(--de-ink-soft);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 320px;
}

.hp-edit-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Jost', sans-serif;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--de-ink);
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--de-ink);
  margin-bottom: 36px;
  width: fit-content;
  transition: gap .35s cubic-bezier(.4,0,.2,1),
              color .25s ease,
              border-color .25s ease;
}
.hp-edit-link svg {
  width: 14px; height: 14px;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.hp-edit-link:hover {
  gap: 16px;
  color: var(--de-clay);
  border-bottom-color: var(--de-clay);
}
.hp-edit-link:hover svg { transform: translateX(4px); }

.hp-edit-nav {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.hp-edit-nav-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--de-bone-mid);
  color: var(--de-ink);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .3s ease, border-color .3s ease, color .25s ease,
              transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.hp-edit-nav-btn svg { width: 16px; height: 16px; }
.hp-edit-nav-btn:hover {
  background: var(--de-ink);
  border-color: var(--de-ink);
  color: #FFFFFF;
  transform: translateY(-2px);
}
.hp-edit-nav-btn:disabled,
.hp-edit-nav-btn[disabled] {
  opacity: .3;
  cursor: not-allowed;
  transform: none;
  background: transparent;
  color: var(--de-ink);
  border-color: var(--de-bone-mid);
}

/* ── Product rail (right) ──────────────────────────────── */
.hp-edit-rail-wrap {
  position: relative;
  min-width: 0;
}
.hp-edit-rail {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 4px 24px;
  cursor: grab;
  scroll-behavior: smooth;
  /* Fade out the right edge so cards visibly continue offscreen */
  mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
}
.hp-edit-rail::-webkit-scrollbar { display: none; }
.hp-edit-rail.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}
.hp-edit-rail.is-dragging * { pointer-events: none; }

.hp-edit-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
}
.hp-edit-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.hp-edit-card-img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--de-bone);
  border-radius: 4px;
  margin-bottom: 16px;
}
.hp-edit-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
  filter: saturate(.94);
}
.hp-edit-card-link:hover .hp-edit-card-img img {
  transform: scale(1.06);
  filter: saturate(1.04);
}

.hp-edit-card-wish {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 0;
  color: var(--de-ink);
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 4;
  opacity: 0;
  transform: translateY(-4px) scale(.92);
  transition: opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1),
              background .25s ease, color .25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.hp-edit-card-wish svg { width: 15px; height: 15px; transition: fill .25s ease; }
.hp-edit-card:hover .hp-edit-card-wish {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hp-edit-card-wish:hover { background: var(--de-ink); color: #FFFFFF; transform: scale(1.08); }
.hp-edit-card-wish.is-active {
  background: var(--de-clay);
  color: #FFFFFF;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hp-edit-card-wish.is-active svg { fill: #FFFFFF; }

/* Quick View overlay — slides up from bottom */
.hp-edit-card-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(0deg, rgba(20,15,10,.86) 0%, transparent 100%);
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  text-align: center;
}
.hp-edit-card-link:hover .hp-edit-card-overlay {
  transform: translateY(0);
}
.hp-edit-card-quick {
  display: inline-block;
  color: #FFFFFF;
  font-family: 'Jost', sans-serif;
  font-size: .62rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  padding: 6px 14px;
  border-bottom: 1px solid #FFFFFF;
}

.hp-edit-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.hp-edit-card-cat {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: .54rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--de-clay);
  margin-bottom: 6px;
}
.hp-edit-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem; font-weight: 500;
  color: var(--de-ink);
  margin: 0 0 4px;
  line-height: 1.2;
  transition: color .25s ease;
}
.hp-edit-card-link:hover .hp-edit-card-name { color: var(--de-clay-d); }
.hp-edit-card-sub {
  font-family: 'Jost', sans-serif;
  font-size: .76rem;
  color: var(--de-ink-soft);
  margin: 0 0 10px;
}
.hp-edit-card-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--de-ink);
  white-space: nowrap;
}

/* Add to cart button — sits below the price, outside the link */
.hp-edit-card-cart {
  margin-top: 14px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--de-ink);
  color: #FFFFFF;
  border: 1.5px solid var(--de-ink);
  font-family: 'Jost', sans-serif;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 11px 14px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .3s ease, color .3s ease, transform .3s cubic-bezier(.4,0,.2,1),
              box-shadow .3s ease;
}
.hp-edit-card-cart svg {
  width: 15px; height: 15px;
  stroke: currentColor;
  transition: transform .35s ease;
}
.hp-edit-card-cart::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg);
  transition: left .8s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.hp-edit-card-cart:hover {
  background: var(--de-clay);
  border-color: var(--de-clay);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(139,111,71,.32);
}
.hp-edit-card-cart:hover::before { left: 140%; }
.hp-edit-card-cart:hover svg { transform: translateX(2px) rotate(-6deg); }
.hp-edit-card-cart.is-added {
  background: #1F8A4C;
  border-color: #1F8A4C;
}
.hp-edit-card-cart.is-added::before { display: none; }

@media (max-width: 1024px) {
  .hp-edit-stage { grid-template-columns: 280px 1fr; gap: 40px; }
  .hp-edit-card { flex-basis: 240px; }
}
@media (max-width: 760px) {
  .hp-edit-stage { grid-template-columns: 1fr; gap: 28px; }
  .hp-edit-title { font-size: clamp(2.2rem, 8vw, 2.8rem); }
  .hp-edit-desc { max-width: 100%; }
  .hp-edit-link { margin-bottom: 24px; }
  .hp-edit-rail {
    /* Drop the mask on mobile so cards aren't visually clipped */
    mask-image: none;
    -webkit-mask-image: none;
  }
  .hp-edit-card { flex-basis: 220px; }
  /* Touch — show wish always (no hover state) */
  .hp-edit-card-wish { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-occ-tile,
  .hp-focus-card,
  .hp-edit-rail { animation: none !important; transition: none !important; }
  .hp-edit-rail { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════
   SHOP THE EDITS — tabbed product showcase
   ─ tabs at top, each panel = 1 featured product + 4-card grid
   ─ smooth fade transition between edits
═══════════════════════════════════════════════════════════ */
.hp-shop {
  background: var(--de-cream);
  position: relative;
  overflow: hidden;
}
.hp-shop .sec-in { position: relative; }

/* ── Header ─────────────────────────────────────────────── */
.hp-shop-hd {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 36px;
}
.hp-shop-eyebrow {
  color: var(--de-clay);
  margin-bottom: 14px;
}
.hp-shop-title {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  color: var(--de-ink);
  margin: 0 0 14px;
  line-height: 1.05;
  letter-spacing: -.005em;
}
.hp-shop-desc {
  font-family: 'Jost', sans-serif;
  font-size: .95rem;
  color: var(--de-ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* ── Tabs ───────────────────────────────────────────────── */
.hp-shop-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--de-bone);
  padding-bottom: 0;
}
.hp-shop-tab {
  background: transparent;
  border: 0;
  padding: 14px 22px 20px;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  position: relative;
  transition: color .25s ease;
  margin-bottom: -1px;
}
.hp-shop-tab-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .82rem;
  color: var(--de-clay);
  opacity: .75;
  transition: opacity .25s ease;
}
.hp-shop-tab-label {
  font-family: 'Jost', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--de-ink-soft);
  transition: color .25s ease, font-weight .25s ease;
}
.hp-shop-tab::after {
  content: '';
  position: absolute;
  left: 22px; right: 22px; bottom: -1px;
  height: 2px;
  background: var(--de-ink);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.hp-shop-tab:hover .hp-shop-tab-label { color: var(--de-ink); }
.hp-shop-tab:hover .hp-shop-tab-tag { opacity: 1; }
.hp-shop-tab.is-active .hp-shop-tab-label { color: var(--de-ink); font-weight: 600; }
.hp-shop-tab.is-active .hp-shop-tab-tag { opacity: 1; }
.hp-shop-tab.is-active::after { transform: scaleX(1); }

/* ── Stage + panels (only active visible, others stacked behind) ── */
.hp-shop-stage {
  position: relative;
  min-height: 540px;
}
.hp-shop-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .4s cubic-bezier(.4,0,.2,1);
}
.hp-shop-panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.hp-shop-panel.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

/* ── Featured product (left) ────────────────────────────── */
.hp-shop-feat {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.4,0,.2,1),
              box-shadow .5s ease;
  will-change: transform;
}
.hp-shop-feat:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px rgba(60,40,20,.18);
}

.hp-shop-feat-img {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--de-bone);
}
.hp-shop-feat-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
  filter: saturate(.95);
}
.hp-shop-feat:hover .hp-shop-feat-img img {
  transform: scale(1.06);
  filter: saturate(1.05);
}

.hp-shop-feat-flag {
  position: absolute;
  top: 18px; left: 18px;
  font-family: 'Jost', sans-serif;
  font-size: .56rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  background: var(--de-ink);
  color: #FFFFFF;
  padding: 7px 13px;
  border-radius: 3px;
  z-index: 3;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.hp-shop-feat-wish {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 0;
  color: var(--de-ink);
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 3;
  transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.hp-shop-feat-wish svg { width: 16px; height: 16px; transition: fill .25s ease; }
.hp-shop-feat-wish:hover { background: var(--de-ink); color: #FFFFFF; transform: scale(1.06); }
.hp-shop-feat-wish.is-active { background: var(--de-clay); color: #FFFFFF; }
.hp-shop-feat-wish.is-active svg { fill: #FFFFFF; }

.hp-shop-feat-body {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.hp-shop-feat-cat {
  font-family: 'Jost', sans-serif;
  font-size: .56rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--de-clay);
  margin-bottom: 4px;
}
.hp-shop-feat-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  font-weight: 500;
  color: var(--de-ink);
  margin: 0 0 6px;
  line-height: 1.15;
  letter-spacing: -.005em;
  transition: color .25s ease;
}
.hp-shop-feat:hover .hp-shop-feat-name { color: var(--de-clay-d); }
.hp-shop-feat-sub {
  font-family: 'Jost', sans-serif;
  font-size: .85rem;
  color: var(--de-ink-soft);
  line-height: 1.5;
  margin: 0 0 14px;
}
.hp-shop-feat-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--de-bone);
}
.hp-shop-feat-prices {
  display: flex; align-items: baseline; gap: 10px;
}
.hp-shop-feat-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--de-ink);
}
.hp-shop-feat-price-old {
  font-family: 'Jost', sans-serif;
  font-size: .85rem;
  color: var(--de-ink-soft);
  text-decoration: line-through;
}
.hp-shop-feat-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Jost', sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--de-ink);
  padding: 11px 16px;
  border: 1px solid var(--de-ink);
  border-radius: 4px;
  background: transparent;
  transition: background .25s ease, color .25s ease, gap .3s ease;
}
.hp-shop-feat-cta svg { width: 14px; height: 14px; transition: transform .3s ease; }
.hp-shop-feat:hover .hp-shop-feat-cta {
  background: var(--de-ink);
  color: #FFFFFF;
  gap: 12px;
}
.hp-shop-feat:hover .hp-shop-feat-cta svg { transform: translateX(3px); }

/* ── Supporting 2×2 grid (right) ────────────────────────── */
.hp-shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.hp-shop-card {
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #FFFFFF;
  border-radius: 6px;
  overflow: hidden;
  opacity: 0;
  animation: hp-shop-fade .5s cubic-bezier(.4,0,.2,1) both;
  animation-delay: calc(var(--k, 0) * 70ms + 120ms);
  transition: transform .4s cubic-bezier(.4,0,.2,1),
              box-shadow .4s ease;
}
@keyframes hp-shop-fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hp-shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(60,40,20,.14);
}

.hp-shop-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--de-bone);
}
.hp-shop-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}
.hp-shop-card:hover .hp-shop-card-img img { transform: scale(1.07); }

.hp-shop-card-disc {
  position: absolute;
  top: 10px; left: 10px;
  font-family: 'Jost', sans-serif;
  font-size: .52rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  background: var(--de-ink);
  color: #FFFFFF;
  padding: 4px 9px;
  border-radius: 2px;
  z-index: 3;
}
.hp-shop-card-wish {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 0;
  color: var(--de-ink);
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 3;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1),
              background .25s ease, color .25s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.hp-shop-card-wish svg { width: 12px; height: 12px; transition: fill .25s ease; }
.hp-shop-card:hover .hp-shop-card-wish { opacity: 1; transform: translateY(0); }
.hp-shop-card-wish:hover { background: var(--de-ink); color: #FFFFFF; }
.hp-shop-card-wish.is-active {
  background: var(--de-clay);
  color: #FFFFFF;
  opacity: 1;
  transform: translateY(0);
}
.hp-shop-card-wish.is-active svg { fill: #FFFFFF; }

/* Quick add — slides up from bottom of image on hover */
.hp-shop-card-quick {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 3;
  transform: translateY(120%);
  opacity: 0;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.hp-shop-card:hover .hp-shop-card-quick {
  transform: translateY(0);
  opacity: 1;
}
.hp-shop-card-add {
  width: 100%;
  background: var(--de-ink);
  color: #FFFFFF;
  border: 0;
  padding: 9px 12px;
  border-radius: 3px;
  font-family: 'Jost', sans-serif;
  font-size: .58rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  transition: background .25s ease, color .25s ease;
}
.hp-shop-card-add svg { width: 12px; height: 12px; transition: transform .3s ease; }
.hp-shop-card-add:hover {
  background: #FFFFFF;
  color: var(--de-ink);
  box-shadow: 0 0 0 1px var(--de-ink) inset;
}
.hp-shop-card-add:hover svg { transform: rotate(90deg); }

.hp-shop-card-body {
  padding: 14px 16px 18px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.hp-shop-card-cat {
  font-family: 'Jost', sans-serif;
  font-size: .5rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--de-clay);
}
.hp-shop-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; font-weight: 500;
  color: var(--de-ink);
  margin: 2px 0 4px;
  line-height: 1.2;
  letter-spacing: -.005em;
  transition: color .25s ease;
}
.hp-shop-card:hover .hp-shop-card-name { color: var(--de-clay-d); }
.hp-shop-card-prices {
  display: flex; align-items: baseline; gap: 8px;
}
.hp-shop-card-price {
  font-family: 'Jost', sans-serif;
  font-size: .82rem; font-weight: 500;
  color: var(--de-ink);
}
.hp-shop-card-price-old {
  font-family: 'Jost', sans-serif;
  font-size: .72rem;
  color: var(--de-ink-soft);
  text-decoration: line-through;
}

/* ── Foot ────────────────────────────────────────────────── */
.hp-shop-foot {
  text-align: center;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--de-bone);
}
.hp-shop-foot-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Jost', sans-serif;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--de-ink);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--de-ink);
  transition: gap .35s cubic-bezier(.4,0,.2,1), color .25s ease, border-color .25s ease;
}
.hp-shop-foot-link svg {
  width: 16px; height: 16px;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.hp-shop-foot-link:hover {
  gap: 18px;
  color: var(--de-clay);
  border-bottom-color: var(--de-clay);
}
.hp-shop-foot-link:hover svg { transform: translateX(4px); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hp-shop-panel { grid-template-columns: 1fr; gap: 20px; }
  .hp-shop-stage { min-height: 0; }
  .hp-shop-panel {
    position: relative;
    inset: auto;
  }
  .hp-shop-panel:not(.is-active) { display: none; }
  .hp-shop-feat-img { aspect-ratio: 16 / 11; }
  .hp-shop-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
@media (max-width: 760px) {
  .hp-shop-tabs { gap: 0; }
  .hp-shop-tab { padding: 12px 14px 18px; }
  .hp-shop-tab-tag { font-size: .72rem; }
  .hp-shop-tab-label { font-size: .74rem; letter-spacing: .02em; }
  .hp-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hp-shop-feat-foot { flex-direction: column; align-items: stretch; }
  .hp-shop-feat-cta { justify-content: center; }
  /* Touch — show wish + quick add always */
  .hp-shop-card-wish { opacity: 1; transform: none; }
  .hp-shop-card-quick { transform: translateY(0); opacity: 1; }
}
@media (max-width: 480px) {
  .hp-shop-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-left: 4px; padding-right: 4px;
  }
  .hp-shop-tabs::-webkit-scrollbar { display: none; }
  .hp-shop-card-add span { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   SEARCH PANEL — match the same B&W glass treatment
═══════════════════════════════════════════════════════════ */
.srch-panel {
  background: rgba(20,20,20,.97);
  border-color: rgba(255,255,255,.12);
}
.srch-panel::before {
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(255,255,255,.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255,255,255,.04) 0%, transparent 55%);
}
.srch-sidebar { scrollbar-color: rgba(255,255,255,.25) transparent; }
.srch-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); }
.srch-body { scrollbar-color: rgba(255,255,255,.3) transparent; }
.srch-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); }
.srch-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.5); }

/* Search input field */
.srch-input,
.srch-input:focus,
.srch-input-wrap {
  border-color: rgba(255,255,255,.2);
}
.srch-input-wrap:focus-within {
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}

/* Search tabs & chips */
.srch-cat,
.srch-chip {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.8);
}
.srch-cat:hover,
.srch-chip:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.4);
  color: #FFFFFF;
}
.srch-cat.is-active,
.srch-chip.is-active {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #000000;
}

/* Search result rows */
.srch-result-row:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.srch-result-row.is-focused {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

/* Empty / no-results icon */
.srch-no-results svg { stroke: rgba(255,255,255,.45); }

/* Search submit / arrow CTA */
.srch-go {
  background: #FFFFFF;
  color: #000000;
}
.srch-go:hover { background: rgba(255,255,255,.88); }

/* ═══════════════════════════════════════════════════════════
   MOBILE HERO REDESIGN  (≤767px)
   Replaces the heavy scroll-driven canvas hero with a clean
   single-screen still hero card. Keeps the brand feel via
   gentle Ken-Burns bg motion, stagger fade-up entries, a
   shimmer-sweep heading, count-up stats and a tappable
   scroll cue. No 3D, no canvas — but still interactive.
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Collapse the tall 500vh scroll section to one screen */
  .hero-scroll-section {
    height: auto !important;
    min-height: 100svh;
  }
  /* Pure ink monochrome backdrop — the home palette.
     Flex-column layout so the product image and the content
     adapt together to the viewport height — no dead space. */
  .hero-sticky {
    position: relative !important;
    top: auto !important;
    height: 100svh;
    min-height: 640px;
    overflow: hidden;
    background: #000 !important;
    animation: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    padding: 88px 0 64px;   /* 88 = nav clearance, 64 = scroll-cue room */
  }

  /* ── Soft radial backlight behind the product (decorative) ── */
  .hero-sticky::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 56vh;
    z-index: 0;
    background:
      radial-gradient(60% 60% at 50% 32%,
        rgba(180,180,180,.18) 0%,
        rgba(120,120,120,.08) 35%,
        rgba(74,74,74,.04)    55%,
        transparent           75%);
    animation: mhGlow 6s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes mhGlow {
    0%   { opacity: .8;  transform: translateY(0);   }
    100% { opacity: 1;   transform: translateY(-6px); }
  }

  /* ── THE HERO PRODUCT — emerald choker, takes the upper flex slot ── */
  .hero-sticky::before {
    content: '';
    flex: 1 1 auto;
    width: 100%;
    min-height: 220px;
    max-height: 48vh;
    z-index: 1;
    background:
      url('../hero_section/_MConverter.eu_final_video-528.png')
      center 38% / cover no-repeat;
    /* Soft fade at top + bottom edges so it floats inside the dark surface */
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%,
      #000        10%,
      #000        85%,
      transparent 100%);
            mask-image: linear-gradient(180deg,
      transparent 0%,
      #000        10%,
      #000        85%,
      transparent 100%);
    filter:
      drop-shadow(0 24px 48px rgba(0,0,0,.65))
      contrast(1.06)
      saturate(1.05);
    animation: mhProductFloat 7s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes mhProductFloat {
    0%   { transform: translateY(0);    }
    100% { transform: translateY(-8px); }
  }

  /* Kill the canvas + old vignette */
  #hero-canvas    { display: none !important; }
  .hero-vignette  { display: none !important; }
  /* Mobile uses the still <::before> image — cover-cropping already
     pushes the watermark off-screen, and the mask would otherwise
     land in the content area below the image. */
  .hero-wm-mask   { display: none !important; }

  /* Drop the secondary scroll-tied overlays */
  #overlay-2, #overlay-3, #overlay-4 { display: none !important; }

  /* Overlay-1 — flex child, sits directly under the product image */
  #overlay-1.text-overlay {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    max-width: none !important;
    width: 100% !important;
    flex: 0 0 auto;
    margin-top: 12px;
    padding: 0 24px !important;
    text-align: center;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
    z-index: 5;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  #overlay-1 .overlay-inner {
    width: 100%;
    max-width: 460px;
    align-items: center;
    gap: 12px;
    padding: 0;
  }
  /* Drop the radial scrim — pure ink bg already carries contrast */
  #overlay-1 .overlay-inner::before { display: none !important; }

  /* Chip — refined pill, glass surface */
  #overlay-1 .hero-chip {
    align-self: center !important;
    font-size: .54rem;
    padding: 6px 14px 6px 11px;
    letter-spacing: .26em;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.92) !important;
  }
  #overlay-1 .hero-chip svg { width: 11px; height: 11px; opacity: .8; }

  /* Heading — large, light serif, the centrepiece typography */
  #overlay-1 .overlay-heading {
    font-size: clamp(2.4rem, 13vw, 3.2rem) !important;
    line-height: 1.0;
    letter-spacing: -.008em;
    font-weight: 300;
    margin: 6px 0 2px;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    text-shadow:
      0 2px 24px rgba(0,0,0,.6),
      0 0 36px rgba(255,255,255,.04);
  }
  /* Force any GSAP-wrapped child spans visible */
  #overlay-1 .overlay-heading .split-line,
  #overlay-1 .overlay-heading .split-line > span {
    opacity: 1 !important;
    transform: none !important;
    color: #fff;
  }

  /* Rule — soft gradient hairline */
  #overlay-1 .overlay-rule {
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent) !important;
    margin: 4px auto !important;
    opacity: .85;
  }

  /* Body — generous line-height, restrained */
  #overlay-1 .overlay-body {
    font-size: .8rem;
    line-height: 1.55;
    max-width: 32ch;
    margin: 0 auto !important;
    color: rgba(255,255,255,.72);
    font-weight: 300;
  }

  /* CTAs — equal-weight, generous, side-by-side */
  #overlay-1 .hero-cta-row {
    margin-top: 12px;
    gap: 10px;
    width: 100%;
    justify-content: center;
  }
  #overlay-1 .hero-btn {
    flex: 1 1 0;
    justify-content: center;
    padding: 13px 14px;
    font-size: .6rem;
    letter-spacing: .16em;
    min-width: 0;
    gap: 6px;
    border-radius: 999px;
  }
  #overlay-1 .hero-btn svg { width: 12px; height: 12px; }
  #overlay-1 .hero-btn--primary {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
    box-shadow: 0 12px 28px rgba(255,255,255,.18) !important;
  }
  #overlay-1 .hero-btn--primary:active {
    transform: scale(.97);
    transition: transform .12s ease;
  }
  #overlay-1 .hero-btn--ghost {
    display: inline-flex !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    color: #fff !important;
  }

  /* Stats — minimal, three pieces inline (no card) */
  #overlay-1 .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    width: 100%;
    max-width: 340px;
    margin: 14px auto 0 !important;
    padding: 10px 4px !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #overlay-1 .hero-stat { padding: 2px 4px; text-align: center; }
  #overlay-1 .hero-stat:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,.08) !important;
  }
  #overlay-1 .hero-stat-num {
    font-size: 1.15rem;
    justify-content: center;
    color: #fff !important;
    font-weight: 400;
  }
  #overlay-1 .hero-stat-num em {
    font-size: .68rem;
    color: rgba(255,255,255,.5);
  }
  #overlay-1 .hero-stat-lbl {
    font-size: .42rem;
    letter-spacing: .14em;
    color: rgba(255,255,255,.45);
    white-space: normal;
    line-height: 1.25;
    padding: 0 2px;
    margin-top: 2px;
  }

  /* Hide trust strip — the stats already do the trust signaling */
  #overlay-1 .hero-trust-strip { display: none !important; }

  /* Very narrow phones (iPhone SE 1st gen, etc.) — tighten the buttons */
  @media (max-width: 360px) {
    #overlay-1 .hero-btn {
      padding: 12px 8px;
      font-size: .54rem;
      letter-spacing: .1em;
    }
    #overlay-1 .hero-btn svg { display: none; }
    #overlay-1.text-overlay { padding: 0 18px 56px !important; }
  }

  /* Scroll cue — minimal arrow only, no text on mobile */
  .scroll-indicator {
    bottom: 10px !important;
    cursor: pointer;
    z-index: 10;
    gap: 0 !important;
  }
  .scroll-indicator-text { display: none !important; }
  .scroll-arrow {
    height: 22px;
    background: linear-gradient(to bottom,
      rgba(255,255,255,.5), transparent) !important;
    animation: mhArrowBounce 1.8s ease-in-out infinite;
  }
  @keyframes mhArrowBounce {
    0%, 100% { transform: translateY(0);   opacity: .55; }
    50%      { transform: translateY(5px); opacity: 1;   }
  }

  /* ── Stagger fade-up reveal ─────────────────────────────── */
  .mh-reveal {
    opacity: 0;
    transform: translateY(18px);
    animation: mhRiseIn .9s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: var(--mh-delay, 0ms);
  }
  @keyframes mhRiseIn {
    to { opacity: 1; transform: none; }
  }
}

/* Respect reduced-motion on mobile */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .hero-sticky::before,
  .hero-sticky::after { animation: none !important; }
  .mh-reveal          { animation: none !important; opacity: 1 !important; transform: none !important; }
  .scroll-arrow       { animation: none !important; opacity: .5; }
}