/* ============================================================
   LITTLE FAIRY — HOME
   ------------------------------------------------------------
   Tokens & components inlined from Little Fairy Design System v1.0
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Brand palette (mandatory) */
  --lf-lavender-deep: #6D4E69;
  --lf-soft-lavender: #C9A1D6;
  --lf-pastel-pink:   #EAB6D8;
  --lf-mint:          #B2D8B3;
  --lf-sage:          #618B58;
  --lf-gold:          #D4AF37;
  --lf-gold-soft:     #E8C77A;
  --lf-cream:         #FAF5EC;
  --lf-paper:         #FFFBF4;
  --lf-ink:           #3B2E3A;

  /* Extended */
  --lf-lavender-mist: #F4ECF5;
  --lf-blush:         #FBE9F2;
  --lf-mint-mist:     #ECF5EC;
  --lf-gold-glow:     rgba(212,175,55,0.20);
  --lf-gold-haze:     rgba(232,199,122,0.35);
  --lf-ink-soft:      #6B5A68;
  --lf-ink-muted:     #8B7C8A;
  --lf-line:          #E9DDE6;
  --lf-line-gold:     #E6CFA1;

  /* Semantic */
  --bg: var(--lf-paper);
  --bg-alt: var(--lf-cream);
  --bg-tint: var(--lf-lavender-mist);
  --fg1: var(--lf-lavender-deep);
  --fg2: var(--lf-ink);
  --fg3: var(--lf-ink-soft);
  --fg4: var(--lf-ink-muted);
  --fg-on-dark: var(--lf-paper);

  /* Type */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-script:  'Allura', 'Playfair Display', cursive;

  --fs-display: clamp(56px, 8vw, 112px);
  --fs-h1:      clamp(44px, 6vw, 80px);
  --fs-h2:      clamp(32px, 4.2vw, 56px);
  --fs-h3:      clamp(24px, 2.6vw, 34px);
  --fs-h4:      clamp(18px, 1.6vw, 22px);
  --fs-lead:    clamp(18px, 1.4vw, 22px);
  --fs-body:    17px;
  --fs-script:  clamp(28px, 3vw, 44px);
  --fs-small:   14px;
  --fs-micro:   11px;

  --lh-tight: 1.06;
  --lh-snug:  1.2;
  --lh-normal:1.5;
  --lh-loose: 1.75;
  --ls-eyebrow: 0.28em;
  --ls-tight:  -0.01em;

  /* Spacing */
  --lf-space-1: 4px; --lf-space-2: 8px; --lf-space-3: 12px;
  --lf-space-4: 16px; --lf-space-5: 24px; --lf-space-6: 32px;
  --lf-space-7: 48px; --lf-space-8: 64px; --lf-space-9: 96px;
  --lf-space-10: 128px; --lf-space-11: 160px;

  --lf-pad-snug:    80px;
  --lf-pad-default: 120px;
  --lf-pad-xl:      160px;

  /* Radii */
  --lf-radius-sm: 8px;
  --lf-radius-md: 16px;
  --lf-radius-lg: 24px;
  --lf-radius-xl: 36px;
  --lf-radius-pill: 999px;

  /* Shadows */
  --lf-shadow-xs: 0 1px 3px  rgba(109, 78, 105, 0.06);
  --lf-shadow-sm: 0 4px 14px rgba(109, 78, 105, 0.08);
  --lf-shadow-md: 0 14px 36px rgba(109, 78, 105, 0.10);
  --lf-shadow-lg: 0 28px 64px rgba(109, 78, 105, 0.14);
  --lf-shadow-gold-glow: 0 8px 28px rgba(212, 175, 55, 0.30);

  /* Motion */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
}

/* ---------- BASE ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection { background: var(--lf-gold-haze); color: var(--lf-lavender-deep); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--lf-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- TYPE CLASSES ---------- */
.lf-display, .lf-headline, .lf-h1, .lf-h2, .lf-h3 { color: var(--fg1); margin: 0; text-wrap: balance; }
.lf-display em, .lf-headline em, .lf-h1 em, .lf-h2 em, .lf-h3 em {
  font-style: italic; font-weight: 500; color: var(--lf-gold);
}
.lf-display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.lf-headline,
.lf-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.lf-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.lf-h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.lf-h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); letter-spacing: 0.02em; line-height: var(--lh-snug); color: var(--fg1); margin: 0; }

.lf-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--lf-lavender-deep);
}
.lf-eyebrow::before, .lf-eyebrow::after {
  content: "✦"; font-size: 10px; color: var(--lf-gold); letter-spacing: 0;
}

.lf-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--fg3); margin: 0; text-wrap: pretty; }
.lf-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg2); margin: 0; text-wrap: pretty; }
.lf-script { font-family: var(--font-script); font-weight: 400; font-size: var(--fs-script); line-height: 1.1; color: var(--lf-gold); margin: 0; }
.lf-small { font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg3); margin: 0; }
.lf-micro { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg4); }

/* ---------- LAYOUT SHELL ---------- */
.lf-shell { max-width: 1240px; margin: 0 auto; padding: 0 7vw; }
.lf-section { padding: var(--lf-pad-default) 0; position: relative; }
.lf-section--snug { padding: var(--lf-pad-snug) 0; }
.lf-section--xl { padding: var(--lf-pad-xl) 0; }

.lf-bg-paper    { background: var(--lf-paper); }
.lf-bg-cream    { background: var(--lf-cream); }
.lf-bg-lavender { background: var(--lf-lavender-mist); }
.lf-bg-blush    { background: var(--lf-blush); }
.lf-bg-mint     { background: var(--lf-mint-mist); }

.lf-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--lf-space-8);
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
}
.lf-section-head .lf-eyebrow { justify-content: center; }
.lf-section-head .lf-lead { margin-top: 8px; }

/* ---------- DIVIDER ---------- */
.lf-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin: 48px auto; color: var(--lf-gold);
}
.lf-divider::before, .lf-divider::after {
  content: ""; display: block;
  width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lf-gold), transparent);
}
.lf-divider__ornament {
  font-size: 18px; color: var(--lf-gold); line-height: 1;
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.4));
}

/* ---------- BUTTONS ---------- */
.lf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 16px 32px;
  border: none; cursor: pointer;
  border-radius: var(--lf-radius-pill);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  white-space: nowrap;
  position: relative; overflow: hidden;
  text-decoration: none;
}
.lf-btn--primary {
  background: linear-gradient(135deg, var(--lf-gold-soft) 0%, var(--lf-gold) 60%, #B98F1F 100%);
  color: #fff;
  box-shadow: var(--lf-shadow-gold-glow);
  animation: lf-aura 2.6s ease-in-out infinite;
}
.lf-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(212,175,55,0.45);
}
.lf-btn--primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.45) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 800ms var(--ease-out);
  pointer-events: none;
}
.lf-btn--primary:hover::after { transform: translateX(120%); }
@keyframes lf-aura {
  0%, 100% { box-shadow: 0 8px 24px rgba(212,175,55,0.30), 0 0 0 0 rgba(212,175,55,0.45); }
  50%      { box-shadow: 0 8px 32px rgba(212,175,55,0.40), 0 0 0 12px rgba(212,175,55,0.0); }
}

.lf-btn--secondary {
  background: transparent;
  color: var(--lf-lavender-deep);
  border: 1.5px solid var(--lf-lavender-deep);
  padding: 14.5px 30.5px;
}
.lf-btn--secondary:hover { background: var(--lf-lavender-deep); color: #fff; }

.lf-btn--ghost {
  background: transparent;
  color: var(--lf-lavender-deep);
  padding: 6px 0;
  border-radius: 0;
  font-size: 13px;
  letter-spacing: 0.2em;
  position: relative;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-body);
  display: inline-block;
}
.lf-btn--ghost::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--lf-gold);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.lf-btn--ghost:hover::after { transform: scaleX(1.1); }

.lf-btn--lg { padding: 22px 44px; font-size: 15px; }

/* ---------- CARDS ---------- */
.lf-card {
  background: var(--lf-cream);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-md);
  padding: 32px;
  box-shadow: var(--lf-shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.lf-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--lf-shadow-md);
}

/* ---------- BADGES ---------- */
.lf-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--lf-line);
  background: var(--lf-paper);
  color: var(--lf-lavender-deep);
  border-radius: var(--lf-radius-pill);
}

/* ============================================================
   NAV (DS pill-shape, floating, solid white)
   ============================================================ */
.site-nav {
  position: fixed;
  top: 22px; left: 0; right: 0;
  z-index: 100;
  padding: 0 28px;
  pointer-events: none;
  transition: top var(--dur-base) var(--ease-out);
}
.site-nav__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 18px 18px 18px 32px;
  background: var(--lf-paper);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-pill);
  box-shadow: 0 14px 38px rgba(109,78,105,0.16);
  pointer-events: auto;
  position: relative;
  transition: padding var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.site-nav.scrolled { top: 14px; }
.site-nav.scrolled .site-nav__inner {
  padding: 10px 14px 10px 24px;
  box-shadow: 0 8px 22px rgba(109,78,105,0.12);
}

.site-nav__brand {
  display: inline-flex; align-items: center;
  position: relative;
  flex-shrink: 0;
  line-height: 0;
  position: relative;
  z-index: 1;
}
.site-nav__brand img {
  height: 108px; width: auto;
  margin: -32px 0;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(109,78,105,0.18));
  transition: height var(--dur-base) var(--ease-out),
              margin var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.site-nav.scrolled .site-nav__brand img {
  height: 60px;
  margin: 0;
}
.site-nav__brand:hover img {
  transform: rotate(-2deg) scale(1.02);
}

/* --- Sticky logo swap: default visible, swap to "scrolled" PNG once
       the nav gains the .scrolled class. Both <img> share the same slot. --- */
.site-nav__brand-img--default { display: block; }
.site-nav__brand-img--scrolled {
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.site-nav.scrolled .site-nav__brand-img--default { opacity: 0; visibility: hidden; }
.site-nav.scrolled .site-nav__brand-img--scrolled {
  opacity: 1; visibility: visible;
}
.site-nav__brand:hover .site-nav__brand-img--scrolled {
  transform: translateY(-50%) rotate(-2deg) scale(1.02);
}

.site-nav__links {
  display: flex; gap: 32px;
  font-family: var(--font-body);
  font-size: 17px;
  align-items: center;
}
.site-nav__links a {
  position: relative;
  padding: 6px 0;
  color: var(--lf-lavender-deep);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--dur-base);
}
.site-nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--lf-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.site-nav__links a:hover { color: var(--lf-gold); }
.site-nav__links a:hover::after { transform: scaleX(1); }

.site-nav__cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.site-nav .lf-btn--primary {
  padding: 14px 24px;
  font-size: 12px;
  letter-spacing: 0.2em;
  animation: none;
  box-shadow: 0 6px 18px rgba(212,175,55,0.36);
}
.site-nav.scrolled .lf-btn--primary {
  padding: 12px 22px;
  font-size: 11px;
}
.site-nav .lf-btn--primary:hover {
  animation: lf-aura 2.6s ease-in-out infinite;
}

.site-nav__burger {
  display: none;
  background: transparent; border: none;
  cursor: pointer;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--lf-lavender-deep);
  padding: 0;
  border-radius: 50%;
}
.site-nav__burger svg { width: 22px; height: 22px; }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--lf-paper);
  display: flex; flex-direction: column;
  padding: 32px 7vw;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu__top {
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-menu__close {
  width: 64px; height: 64px;
  background: transparent; border: none;
  cursor: pointer; color: var(--lf-lavender-deep);
  font-size: 44px;
  line-height: 1;
}
.mobile-menu__links {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 56px;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--lf-lavender-deep);
}
.mobile-menu__links a {
  display: block;
  width: 100%;
  padding: 14px 8px;
  border-bottom: 1px solid var(--lf-line);
  transition: color var(--dur-base);
}
.mobile-menu__links a:hover { color: var(--lf-gold); }
.mobile-menu__cta { margin-top: auto; padding-bottom: 32px; }

/* ============================================================
   SECTION 1 — HERO (production design, from little-fairy-hero.html)
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: #1d1530;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-video.is-hidden { visibility: hidden; }

/* Fallback when video is missing */
.hero-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(234,182,216,0.45), transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(201,161,214,0.45), transparent 55%),
    radial-gradient(ellipse at 60% 80%, rgba(232,199,122,0.32), transparent 60%),
    linear-gradient(135deg, #6D4E69 0%, #4a3548 100%);
}

/* Vignette + bottom fade overlay for legibility */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(29,21,48,0.25) 70%, rgba(29,21,48,0.55) 100%),
    linear-gradient(to bottom, transparent 50%, rgba(29,21,48,0.35) 100%);
  transition: opacity 1.2s var(--ease-out);
}

.hero-spotlight {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1300px;
  height: 720px;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(29, 21, 48, 0.78) 0%,
    rgba(29, 21, 48, 0.62) 25%,
    rgba(29, 21, 48, 0.40) 50%,
    rgba(29, 21, 48, 0.18) 70%,
    rgba(29, 21, 48, 0) 85%
  );
  filter: blur(20px);
  transition: opacity 1.2s var(--ease-out);
}

.hero.is-magic-active .hero-spotlight { opacity: 0; }
.hero.is-magic-active .hero-vignette  { opacity: 0.3; }

.hero-sparkles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.hero-sparkles::before,
.hero-sparkles::after {
  content: "";
  position: absolute;
  inset: -50px;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 229, 153, 0.9), transparent 70%),
    radial-gradient(1.5px 1.5px at 28% 72%, rgba(255, 240, 200, 0.7), transparent 70%),
    radial-gradient(2.5px 2.5px at 51% 32%, rgba(255, 220, 130, 0.85), transparent 70%),
    radial-gradient(1.5px 1.5px at 67% 55%, rgba(255, 235, 175, 0.8), transparent 70%),
    radial-gradient(2px 2px at 84% 22%, rgba(255, 225, 150, 0.9), transparent 70%),
    radial-gradient(1.5px 1.5px at 91% 68%, rgba(255, 240, 200, 0.75), transparent 70%),
    radial-gradient(2px 2px at 38% 90%, rgba(255, 220, 130, 0.85), transparent 70%);
  background-size: 800px 800px;
  animation: hero-drift 30s linear infinite;
}
.hero-sparkles::after {
  background-size: 600px 600px;
  animation-duration: 45s;
  animation-direction: reverse;
  opacity: 0.6;
}
@keyframes hero-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-200px); }
}

.hero-content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  max-width: 1080px;
  margin: 0 auto;
  transition: opacity 0.8s var(--ease-out), transform 1.2s var(--ease-out);
}
.hero.is-magic-active .hero-content {
  opacity: 0;
  transform: translateY(-20px);
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--lf-gold-soft);
  margin-bottom: 28px;
  opacity: 0;
  animation: hero-rise-in 1.2s var(--ease-out) 0.3s forwards;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 2px 12px rgba(0,0,0,0.6);
}
.hero-eyebrow .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--lf-gold-soft);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 14px;
  transform: translateY(-2px);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1.05;
  color: var(--lf-paper);
  margin-bottom: 28px;
  letter-spacing: -0.5px;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.6),
    0 6px 24px rgba(0,0,0,0.5),
    0 12px 48px rgba(29, 21, 48, 0.4);
  opacity: 0;
  animation: hero-rise-in 1.4s var(--ease-out) 0.5s forwards;
}
.hero h1 .magic-line {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--lf-gold-soft);
  position: relative;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.5),
    0 4px 18px rgba(212, 175, 55, 0.5),
    0 8px 32px rgba(212, 175, 55, 0.3);
}
.hero h1 .magic-line::before,
.hero h1 .magic-line::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--lf-gold-soft), transparent);
  vertical-align: middle;
  margin: 0 24px;
  transform: translateY(-6px);
}

.hero-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  color: rgba(250, 245, 236, 0.95);
  margin-bottom: 56px;
  letter-spacing: 1.5px;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.55),
    0 4px 18px rgba(0,0,0,0.45);
  opacity: 0;
  animation: hero-rise-in 1.2s var(--ease-out) 0.7s forwards;
}

.hero-cta-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: hero-rise-in 1.2s var(--ease-out) 0.9s forwards;
  position: relative;
}
.hero-cta-group::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 320px; height: 90px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(232, 199, 122, 0.45) 0%,
    rgba(232, 199, 122, 0.15) 50%,
    transparent 75%
  );
  z-index: -1;
  animation: hero-cta-pulse 2.8s cubic-bezier(0.7, 0, 0.3, 1) infinite;
  pointer-events: none;
}
@keyframes hero-cta-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}

.hero-secondary-link {
  display: inline-block;
  margin-top: 22px;
  color: rgba(250, 245, 236, 0.78);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
  opacity: 0;
  animation: hero-rise-in 1.2s var(--ease-out) 1.1s forwards;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.hero-secondary-link:hover { color: var(--lf-gold-soft); }
.hero-secondary-link .arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
  margin-left: 4px;
}
.hero-secondary-link:hover .arrow { transform: translateX(4px); }

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

/* Hero buttons (.btn family is hero-local) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 19px 42px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn-primary {
  color: var(--lf-lavender-deep);
  background: linear-gradient(135deg, var(--lf-gold-soft) 0%, var(--lf-gold) 100%);
  box-shadow:
    0 10px 30px rgba(212, 175, 55, 0.5),
    0 0 0 1px rgba(255, 235, 175, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.5);
  font-weight: 600;
  padding: 22px 56px;
  font-size: 17px;
  letter-spacing: 2.5px;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 38px rgba(212, 175, 55, 0.6),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-primary .btn-icon {
  transition: transform 0.4s var(--ease-out);
  font-size: 18px;
}
.btn-primary:hover .btn-icon { transform: rotate(15deg) scale(1.15); }
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.7s var(--ease-out);
}
.btn-primary:hover::before { left: 100%; }

/* Scroll indicator */
.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(250, 245, 236, 0.65);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0;
  animation: hero-rise-in 1.2s var(--ease-out) 1.4s forwards;
  transition: opacity 0.6s var(--ease-out);
}
.hero.is-magic-active .scroll-cue { opacity: 0; }
.scroll-cue-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, var(--lf-gold-soft), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue-line::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 30%;
  background: var(--lf-gold-soft);
  animation: scroll-pulse 2.4s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes scroll-pulse {
  0%   { transform: translateY(-100%); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(300%); opacity: 0; }
}

/* Magic burst flash on trigger */
.magic-burst {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at center,
      rgba(255, 235, 175, 0.95) 0%,
      rgba(255, 220, 120, 0.5) 30%,
      rgba(255, 220, 120, 0) 70%);
  transition: opacity 0.5s var(--ease-out);
}
.magic-burst.is-active { opacity: 1; }

@media (max-width: 900px) {
  .hero h1 .magic-line::before,
  .hero h1 .magic-line::after { width: 30px; margin: 0 12px; }
  .hero-cta-group { flex-direction: column; width: 100%; align-items: center; }
  .btn { width: 100%; max-width: 360px; justify-content: center; }
}

/* ============================================================
   SECTION 2 — WHAT IS A CARTON CAKE?
   ============================================================ */
.what {
  background: var(--lf-paper);
}
.what__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--lf-space-9);
  align-items: center;
}
.what__copy { display: flex; flex-direction: column; gap: 20px; }
.what__ornament {
  width: 80px; height: 1px;
  background: linear-gradient(90deg, var(--lf-gold), transparent);
  margin-top: 12px;
}
.what__video-wrap {
  position: relative;
  border-radius: var(--lf-radius-lg);
  overflow: hidden;
  box-shadow: var(--lf-shadow-md);
  aspect-ratio: 4 / 5;
  background: var(--lf-lavender-mist);
}
.what__video-wrap::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%; bottom: -40px;
  height: 80px;
  background: radial-gradient(ellipse at center, var(--lf-gold-glow), transparent 65%);
  z-index: -1;
  filter: blur(20px);
}
.what__video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.what__video-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 18px;
  background:
    radial-gradient(circle at 30% 30%, rgba(234,182,216,0.6), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(201,161,214,0.6), transparent 60%),
    var(--lf-lavender-mist);
  color: var(--lf-lavender-deep);
}
.what__video-fallback .lf-script { color: var(--lf-gold); font-size: 48px; }
.what__video-fallback .lf-small { color: var(--lf-lavender-deep); font-style: italic; }

/* Floating corner brackets on video frame */
.what__video-wrap > .corner {
  position: absolute;
  width: 28px; height: 28px;
  border: 1.5px solid var(--lf-gold-soft);
  z-index: 2;
  opacity: 0.85;
}
.what__video-wrap > .corner.tl { top: 16px; left: 16px; border-right: none; border-bottom: none; border-top-left-radius: 8px; }
.what__video-wrap > .corner.tr { top: 16px; right: 16px; border-left: none; border-bottom: none; border-top-right-radius: 8px; }
.what__video-wrap > .corner.bl { bottom: 16px; left: 16px; border-right: none; border-top: none; border-bottom-left-radius: 8px; }
.what__video-wrap > .corner.br { bottom: 16px; right: 16px; border-left: none; border-top: none; border-bottom-right-radius: 8px; }

/* ============================================================
   SECTION 3 — MEET OLLIE
   ============================================================ */
.ollie {
  background: var(--lf-mint-mist);
  position: relative;
  overflow: hidden;
}
.ollie::before {
  content: "";
  position: absolute;
  top: -8%; right: -6%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178,216,179,0.55) 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}
.ollie .lf-shell { position: relative; z-index: 1; }
.ollie__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--lf-space-9);
  align-items: center;
}
.ollie__portrait {
  position: relative;
  border-radius: var(--lf-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--lf-shadow-md);
  background: var(--lf-lavender-mist);
  border: 1px solid var(--lf-line);
}
.ollie__portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--lf-sage);
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  opacity: 0.35;
  margin: 12px;
}
/* Outer sage vine accents (very subtle) */
.ollie__portrait::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 12% 10%, rgba(97,139,88,0.18), transparent 30%),
    radial-gradient(circle at 88% 90%, rgba(97,139,88,0.18), transparent 30%);
  z-index: -1;
  pointer-events: none;
}
.ollie__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ollie__portrait-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 35%, rgba(232,199,122,0.45), transparent 55%),
    linear-gradient(180deg, var(--lf-blush), var(--lf-lavender-mist));
  color: var(--lf-lavender-deep);
  text-align: center;
  padding: 32px;
}
.ollie__portrait-fallback .lf-script { color: var(--lf-gold); font-size: 56px; margin-bottom: 8px; }

.ollie__copy { display: flex; flex-direction: column; gap: 22px; }
.ollie__signature {
  font-family: var(--font-script);
  color: var(--lf-sage);
  font-size: 38px;
  line-height: 1;
  margin-top: 8px;
}

/* ============================================================
   SECTION 4 — CHOOSE YOUR MAGIC (Products)
   ============================================================ */
.products {
  background: var(--lf-cream);
  position: relative;
  overflow: hidden;
}
.products::before {
  content: "";
  position: absolute;
  top: 10%; left: -10%;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lf-pastel-pink) 0%, transparent 70%);
  opacity: 0.22;
  filter: blur(50px);
  z-index: 0;
}
.products::after {
  content: "";
  position: absolute;
  bottom: 5%; right: -8%;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lf-mint) 0%, transparent 70%);
  opacity: 0.22;
  filter: blur(50px);
  z-index: 0;
}
.products .lf-shell { position: relative; z-index: 1; }

.products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.product-card {
  background: var(--lf-paper);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-lg);
  overflow: hidden;
  box-shadow: var(--lf-shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column;
  position: relative;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lf-shadow-lg);
}
/* Per-variant subtle edge accents — a thin gradient strip under the image */
.product-card__image::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 2;
}
.product-card[data-variant="flex"]    .product-card__image::after { background: linear-gradient(90deg, transparent, var(--lf-pastel-pink), transparent); }
.product-card[data-variant="classic"] .product-card__image::after { background: linear-gradient(90deg, transparent, var(--lf-gold), transparent); }
.product-card[data-variant="premium"] .product-card__image::after { background: linear-gradient(90deg, transparent, var(--lf-soft-lavender), transparent); }
.product-card[data-variant="pet"]     .product-card__image::after { background: linear-gradient(90deg, transparent, var(--lf-mint), transparent); }
/* Hover glow per variant */
.product-card[data-variant="flex"]:hover    { border-color: var(--lf-pastel-pink); box-shadow: 0 14px 36px rgba(234,182,216,0.28); }
.product-card[data-variant="classic"]:hover { border-color: var(--lf-line-gold);   box-shadow: 0 14px 36px rgba(212,175,55,0.22); }
.product-card[data-variant="premium"]:hover { border-color: var(--lf-soft-lavender); box-shadow: 0 14px 36px rgba(201,161,214,0.28); }
.product-card[data-variant="pet"]:hover     { border-color: var(--lf-mint);        box-shadow: 0 14px 36px rgba(178,216,179,0.32); }

.product-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--lf-cream);
}
.product-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__image img { transform: scale(1.04); }
.product-card__image-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  text-align: center; padding: 24px;
}
.product-card[data-variant="flex"]    .product-card__image-fallback { background: radial-gradient(ellipse at center, rgba(234,182,216,0.5), transparent 70%), var(--lf-blush); }
.product-card[data-variant="classic"] .product-card__image-fallback { background: radial-gradient(ellipse at center, rgba(232,199,122,0.45), transparent 70%), var(--lf-cream); }
.product-card[data-variant="premium"] .product-card__image-fallback { background: radial-gradient(ellipse at center, rgba(201,161,214,0.5), transparent 70%), var(--lf-lavender-mist); }
.product-card[data-variant="pet"]     .product-card__image-fallback { background: radial-gradient(ellipse at center, rgba(178,216,179,0.55), transparent 70%), var(--lf-mint-mist); }
.product-card__image-fallback .lf-script { color: var(--lf-gold); font-size: 38px; line-height: 1; }
.product-card[data-variant="pet"]  .product-card__image-fallback .lf-script { color: var(--lf-sage); }
.product-card__image-fallback small { color: var(--lf-lavender-deep); font-family: var(--font-body); font-style: italic; font-size: 13px; opacity: 0.7; }

.product-card__body {
  padding: 24px 22px 22px;
  display: flex; flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.product-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--lf-lavender-deep);
  line-height: 1.15;
  margin: 0;
}
.product-card__subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  color: var(--lf-gold);
  margin: -2px 0 0;
}
.product-card[data-variant="premium"] .product-card__subtitle { color: var(--lf-soft-lavender); }
.product-card[data-variant="pet"]     .product-card__subtitle { color: var(--lf-sage); }
.product-card[data-variant="flex"]    .product-card__subtitle { color: var(--lf-pastel-pink); }
.product-card__body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg2);
  margin: 4px 0 0;
}
.product-card__footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex; align-items: flex-end; justify-content: space-between;
  border-top: 1px solid var(--lf-line);
  gap: 12px;
  flex-wrap: wrap;
}
.product-card__price {
  display: flex; flex-direction: column;
  font-family: var(--font-body);
}
.product-card__price small {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg4);
}
.product-card__price strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--lf-lavender-deep);
  letter-spacing: -0.01em;
}
.product-card__price strong em {
  font-style: italic;
  color: var(--lf-gold);
  font-weight: 500;
}
.product-card .lf-badge {
  font-size: 10px;
  padding: 6px 10px;
  letter-spacing: 0.18em;
}

.products__below {
  margin-top: 64px;
  text-align: center;
  display: flex; flex-direction: column;
  gap: 28px; align-items: center;
}
.products__below p {
  max-width: 580px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--fg3);
  text-wrap: pretty;
}

/* ============================================================
   SECTION 5 — WHY LITTLE FAIRY (Benefits)
   ============================================================ */
.why {
  background: var(--lf-blush);
  position: relative;
  overflow: hidden;
}
.why::before {
  content: "";
  position: absolute;
  top: 8%; right: -6%;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178,216,179,0.4) 0%, transparent 65%);
  filter: blur(40px);
  z-index: 0;
}
.why::after {
  content: "";
  position: absolute;
  bottom: 8%; left: -6%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,199,122,0.3) 0%, transparent 65%);
  filter: blur(40px);
  z-index: 0;
}
.why .lf-shell { position: relative; z-index: 1; }
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 48px;
  margin-top: 56px;
}
.benefit {
  display: flex; flex-direction: column;
  gap: 18px;
}
.benefit__icon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  position: relative;
}
.benefit__icon::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  opacity: 0.7;
}
.benefit__icon svg { width: 26px; height: 26px; stroke: currentColor; z-index: 1; }

/* Variant: gold */
.benefit__icon--gold     { color: var(--lf-gold); background: radial-gradient(circle at center, rgba(212,175,55,0.22), transparent 70%); }
.benefit__icon--gold::before     { border: 1px solid var(--lf-line-gold); }

/* Variant: sage */
.benefit__icon--sage     { color: var(--lf-sage); background: radial-gradient(circle at center, rgba(97,139,88,0.22), transparent 70%); }
.benefit__icon--sage::before     { border: 1px solid rgba(97,139,88,0.45); }

/* Variant: pink */
.benefit__icon--pink     { color: var(--lf-lavender-deep); background: radial-gradient(circle at center, rgba(234,182,216,0.6), transparent 70%); }
.benefit__icon--pink::before     { border: 1px solid rgba(234,182,216,0.7); }

/* Variant: lavender */
.benefit__icon--lavender { color: var(--lf-lavender-deep); background: radial-gradient(circle at center, rgba(201,161,214,0.4), transparent 70%); }
.benefit__icon--lavender::before { border: 1px solid rgba(201,161,214,0.6); }

.benefit__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--lf-lavender-deep);
  margin: 0;
  line-height: 1.2;
}
.benefit__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg3);
  margin: 0;
  text-wrap: pretty;
}

.why__divider {
  margin: 80px auto 0;
}

/* ============================================================
   SECTION 6 — HAPPY MOMENTS (Reviews)
   ============================================================ */
.reviews {
  background: var(--lf-lavender-mist);
}
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.review-card {
  background: var(--lf-paper);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-md);
  padding: 40px 32px 32px;
  position: relative;
  box-shadow: var(--lf-shadow-sm);
  display: flex; flex-direction: column;
  gap: 24px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--lf-shadow-md); }
.review-card::before {
  content: "“";
  position: absolute;
  top: 4px; left: 20px;
  font-family: var(--font-display);
  font-size: 84px;
  line-height: 1;
  color: var(--lf-gold);
  opacity: 0.85;
}
.review-card__quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--lf-lavender-deep);
  margin: 0;
  position: relative;
  text-wrap: pretty;
}
.review-card__author {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  color: var(--fg3);
  margin: 0;
}
.review-card__author strong {
  font-style: normal;
  font-weight: 600;
  color: var(--lf-lavender-deep);
}
.review-card__footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--lf-line);
  display: flex; align-items: center; gap: 14px;
}
.review-card__thumb {
  width: 64px; height: 64px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--lf-lavender-mist);
  border: 1px solid var(--lf-line);
  flex-shrink: 0;
  position: relative;
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.review-card__thumb:hover {
  transform: scale(1.05);
  box-shadow: var(--lf-shadow-sm);
}
.review-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.review-card__thumb-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--lf-gold);
  font-size: 22px;
  background: var(--lf-lavender-mist);
}
.review-card__thumb-label {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--fg4);
  line-height: 1.3;
}
.reviews__below {
  margin-top: 56px;
  text-align: center;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  z-index: 500;
  background: rgba(59, 46, 58, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 72px 24px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox.open { opacity: 1; pointer-events: auto; }

.lightbox__stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  max-width: min(1100px, 88vw);
  max-height: 100%;
}
.lightbox__img-wrap {
  position: relative;
  max-width: 88vw;
  max-height: 64vh;
  border-radius: var(--lf-radius-md);
  overflow: hidden;
  box-shadow: var(--lf-shadow-lg);
  background: var(--lf-paper);
  transform: scale(0.96);
  transition: transform var(--dur-base) var(--ease-out);
}
.lightbox.open .lightbox__img-wrap { transform: scale(1); }
.lightbox__img-wrap img {
  max-width: 88vw; max-height: 64vh;
  width: auto; height: auto;
  display: block;
}
.lightbox__placeholder {
  width: min(560px, 80vw);
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 30%, rgba(234,182,216,0.4), transparent 60%),
    var(--lf-paper);
  color: var(--lf-lavender-deep);
  padding: 32px; text-align: center; gap: 16px;
}
.lightbox__caption {
  color: var(--lf-paper);
  font-family: var(--lf-font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 80vw;
  opacity: 0.9;
}
.lightbox__close {
  position: absolute;
  top: 14px; right: 18px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.25);
  color: var(--lf-paper);
  font-size: 28px; line-height: 1;
  cursor: pointer;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background var(--dur-base), transform var(--dur-base);
  z-index: 6;
}
.lightbox__close:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); }

.lightbox__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--lf-paper);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background var(--dur-base), transform var(--dur-base);
}
.lightbox__nav:hover { background: rgba(255,255,255,0.18); transform: translateY(-50%) scale(1.06); }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }
.lightbox__nav svg { width: 26px; height: 26px; }

.lightbox__thumbs {
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  display: flex; gap: 8px;
  justify-content: center;
  padding: 0 24px 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  z-index: 4;
}
.lightbox__thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  padding: 0; border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__thumb:hover { opacity: 0.95; transform: translateY(-2px); }
.lightbox__thumb.is-active { opacity: 1; border-color: var(--lf-gold); }

@media (max-width: 720px) {
  .lightbox { padding: 56px 12px 16px; }
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__nav svg { width: 22px; height: 22px; }
  .lightbox__thumb { width: 52px; height: 52px; }
  .lightbox__img-wrap, .lightbox__img-wrap img { max-height: 58vh; }
}

/* ============================================================
   SECTION 7 — BLOG
   ============================================================ */
.blog {
  background: var(--lf-paper);
}
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.blog-card {
  display: flex; flex-direction: column;
  background: var(--lf-paper);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-md);
  overflow: hidden;
  box-shadow: var(--lf-shadow-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--lf-shadow-md);
}
.blog-card__cover {
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.blog-card[data-tone="lavender"] .blog-card__cover {
  background:
    radial-gradient(circle at 30% 30%, rgba(201,161,214,0.55), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(234,182,216,0.45), transparent 60%),
    var(--lf-lavender-mist);
}
.blog-card[data-tone="blush"] .blog-card__cover {
  background:
    radial-gradient(circle at 30% 30%, rgba(234,182,216,0.65), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(232,199,122,0.35), transparent 60%),
    var(--lf-blush);
}
.blog-card[data-tone="mint"] .blog-card__cover {
  background:
    radial-gradient(circle at 30% 30%, rgba(178,216,179,0.65), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(232,199,122,0.3), transparent 60%),
    var(--lf-mint-mist);
}
.blog-card__flourish {
  color: var(--lf-gold);
  font-family: var(--font-script);
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 2px 12px rgba(212,175,55,0.4));
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
}
.blog-card__flourish::before {
  content: "✦";
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--lf-gold);
  opacity: 0.85;
}
.blog-card__body {
  padding: 28px 28px 32px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.blog-card__date {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lf-gold);
  font-weight: 600;
}
.blog-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--lf-lavender-deep);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.blog-card__excerpt {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg3);
  margin: 0;
  text-wrap: pretty;
}
.blog-card__link {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--lf-lavender-deep);
  font-size: 15px;
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  position: relative;
  padding-bottom: 2px;
}
.blog-card__link::after {
  content: "";
  position: absolute; left: 0; right: 14px; bottom: 0;
  height: 1px; background: var(--lf-gold);
  transform: scaleX(0.6); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.blog-card:hover .blog-card__link::after { transform: scaleX(1); }

.blog__below {
  margin-top: 56px;
  text-align: center;
}

/* ============================================================
   SECTION 8 — GALLERY (Full-width marquee, 6+ visible columns)
   ============================================================ */
.gallery {
  background: var(--lf-cream);
  overflow: hidden;
  padding: var(--lf-pad-default) 0;
}
.gallery__marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gallery__marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.gallery__marquee-track.is-dragging { cursor: grabbing; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); }
}
.gallery__marquee-slide {
  flex: 0 0 240px;
  height: 320px;
  border-radius: var(--lf-radius-md);
  overflow: hidden;
  box-shadow: var(--lf-shadow-sm);
  background: var(--lf-lavender-mist);
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.gallery__marquee-track.is-dragging .gallery__marquee-slide { cursor: grabbing; }
.gallery__marquee-slide:hover {
  transform: translateY(-4px);
  box-shadow: var(--lf-shadow-md);
  z-index: 2;
}
.gallery__marquee-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
/* 10% lavender tint overlay for cohesion */
.gallery__marquee-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--lf-lavender-mist);
  mix-blend-mode: multiply;
  opacity: 0.10;
  pointer-events: none;
}
.gallery__marquee-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  background:
    radial-gradient(circle at 30% 30%, rgba(234,182,216,0.45), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(201,161,214,0.5), transparent 60%),
    var(--lf-lavender-mist);
  color: var(--lf-lavender-deep);
}
.gallery__marquee-fallback .lf-script { color: var(--lf-gold); font-size: 32px; }

.gallery__below {
  margin-top: 56px;
  text-align: center;
}

@media (max-width: 768px) {
  .gallery__marquee-slide { flex-basis: 180px; height: 240px; }
  .gallery__marquee-track { animation-duration: 45s; }
}

/* ============================================================
   FOOTER (centered, cream throughout)
   ============================================================ */
.site-footer {
  background: var(--lf-cream);
  color: var(--lf-ink);
  text-align: center;
  padding: 88px 24px 32px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  /* soft gold halo behind logo */
  content: "";
  position: absolute;
  top: -60px; left: 50%;
  width: 720px; height: 420px;
  background: radial-gradient(ellipse at center, var(--lf-gold-haze), transparent 65%);
  transform: translateX(-50%);
  z-index: 0;
  filter: blur(40px);
  opacity: 0.5;
  pointer-events: none;
}
.site-footer::after {
  /* soft pink wash bottom corners */
  content: "";
  position: absolute;
  bottom: -80px; left: 50%;
  width: 600px; height: 220px;
  background: radial-gradient(ellipse at center, rgba(234,182,216,0.25), transparent 70%);
  transform: translateX(-50%);
  z-index: 0;
  filter: blur(40px);
  pointer-events: none;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.site-footer__logo {
  display: block;
  height: auto !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 96px !important;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(109,78,105,0.16));
  transition: transform var(--dur-slow) var(--ease-out);
}
.site-footer__logo:hover {
  transform: scale(1.02) rotate(-1deg);
}

.footer-tagline {
  font-family: var(--font-script);
  font-size: clamp(30px, 3.2vw, 42px);
  color: var(--lf-gold);
  line-height: 1.1;
  margin: 4px 0 0;
}
.footer-line {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg3);
  margin: 0;
  max-width: 520px;
  text-wrap: pretty;
}

.footer-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  margin-top: 18px;
  font-family: var(--font-body);
  row-gap: 4px;
}
.footer-nav a {
  padding: 6px 18px;
  color: var(--lf-lavender-deep);
  font-size: 15px;
  position: relative;
  transition: color var(--dur-base);
  letter-spacing: 0.01em;
}
.footer-nav a + a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 14px;
  transform: translateY(-50%);
  background: var(--lf-line);
  pointer-events: none;
}
.footer-nav a:hover { color: var(--lf-gold); }

.footer-social {
  display: flex; gap: 14px;
  margin-top: 14px;
  align-items: center;
}
.footer-social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lf-paper);
  border: 1px solid var(--lf-line);
  color: var(--lf-lavender-deep);
  transition: background var(--dur-base), color var(--dur-base),
              transform var(--dur-base), border-color var(--dur-base);
}
.footer-social a:hover {
  background: var(--lf-gold);
  border-color: var(--lf-gold);
  color: #fff;
  transform: translateY(-2px);
}
.footer-social svg { width: 18px; height: 18px; }

.footer-contact {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg3);
  margin: 6px 0 0;
}
.footer-contact a {
  color: var(--lf-lavender-deep);
  font-style: italic;
}
.footer-contact a:hover { color: var(--lf-gold); }

.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  width: 100%;
  max-width: 760px;
  position: relative;
  display: flex;
  align-items: center; justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg4);
}
.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(100%, 480px);
  transform: translateX(-50%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lf-gold), transparent);
}
.footer-bottom__center {
  color: var(--lf-gold);
  font-size: 14px;
}
@media (max-width: 600px) {
  .footer-bottom { flex-direction: column; gap: 8px; }
  .footer-nav a { padding: 6px 12px; font-size: 14px; }
  .site-footer__logo { max-width: 150px !important; max-height: 80px !important; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --lf-pad-default: 96px; --lf-pad-xl: 120px; }
  .what__inner,
  .ollie__inner { grid-template-columns: 1fr; gap: 48px; }
  .ollie__inner .ollie__portrait { max-width: 480px; margin: 0 auto; }
  .products__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .why__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
  .reviews__grid,
  .blog__grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 48px; }
  .site-nav__links { display: none; }
  .site-nav__burger { display: inline-flex; }
  .site-nav .lf-btn--primary { display: none; }
}
@media (max-width: 640px) {
  :root { --lf-pad-default: 72px; --lf-pad-snug: 56px; }
  .lf-shell { padding: 0 6vw; }
  .products__grid { grid-template-columns: 1fr; gap: 20px; }
  .why__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-cta-group { flex-direction: column; gap: 18px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
  .review-card { padding: 36px 24px 24px; }
  .site-nav { padding: 0 14px; top: 14px; }
  .site-nav__inner { padding: 6px 8px 6px 16px; gap: 12px; }
  .site-nav__brand img { height: 70px; margin: -18px 0; }
  .site-nav.scrolled .site-nav__brand img { height: 52px; margin: 0; }
  .site-footer__logo-stage { padding: 56px 24px 72px; }
  .site-footer__logo { max-width: 160px !important; max-height: 84px !important; }
}


/* ============================================================
   WORDPRESS MENU SUPPORT — added by Little Fairy theme (IT Lion)
   Renders wp_nav_menu() UL/LI structure inside .site-nav__links
   and .mobile-menu__links, plus CSS-only hover dropdowns.
   ============================================================ */

/* Reset UL inside the desktop nav so design-system styles still apply. */
.site-nav__links .site-nav__menu {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__links .site-nav__item {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dropdown caret on items with children. */
.site-nav__links .site-nav__item.has-children > a::before {
  content: "";
  display: inline-block;
  margin-right: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: 2px;
  opacity: 0.6;
  transition: transform var(--dur-base);
}
.site-nav__links .site-nav__item.has-children:hover > a::before {
  transform: rotate(-180deg);
}

/* Submenu panel. */
.site-nav__links .site-nav__sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  list-style: none;
  margin: 0;
  padding: 10px 0;
  min-width: 220px;
  background: var(--lf-paper);
  border: 1px solid var(--lf-line);
  border-radius: 16px;
  box-shadow: 0 16px 32px rgba(109, 78, 105, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  z-index: 120;
}
.site-nav__links .site-nav__item.has-children:hover > .site-nav__sub,
.site-nav__links .site-nav__item.has-children:focus-within > .site-nav__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.site-nav__links .site-nav__sub li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__links .site-nav__sub a {
  display: block;
  padding: 9px 22px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  color: var(--lf-lavender-deep);
}
.site-nav__links .site-nav__sub a::after { display: none !important; }
.site-nav__links .site-nav__sub a:hover {
  color: var(--lf-gold);
  background: var(--lf-lavender-mist);
}

/* Mobile menu: same UL/LI shape — flatten everything to plain rows. */
.mobile-menu__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.mobile-menu__links .site-nav__sub {
  margin-top: 8px;
  padding-left: 18px;
  border-left: 2px solid var(--lf-line);
}
.mobile-menu__links .site-nav__sub a {
  font-size: 22px;
  padding: 10px 0;
}
.mobile-menu__links .site-nav__item { width: 100%; }
.mobile-menu__links .site-nav__item.has-children > a::before {
  content: "";
  display: inline-block;
  margin-right: 8px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  vertical-align: 4px;
  opacity: 0.6;
}

/* Collapse desktop nav cleanly on mobile. */
@media (max-width: 980px) {
  .site-nav__links .site-nav__menu { display: none; }
}

/* ============================================================
   MEDIA / FALLBACK STACKING FIX — IT Lion
   The fallback overlays sit on top via position:absolute. When the
   real img/video successfully loads, lift it above the fallback so
   actual media shows. If onerror hides the img/video (display:none),
   the fallback shows through.
   ============================================================ */
.what__video,
.ollie__portrait img,
.product-card__image img,
.gallery__marquee-slide img {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.what__video-fallback,
.ollie__portrait-fallback,
.product-card__image-fallback,
.gallery__marquee-fallback {
  z-index: 0;
}
/* Lavender tint overlay must paint above the photo, not below the fallback,
   so the photo (z=1) shows and the fallback (z=0) stays hidden. */
.gallery__marquee-slide::after { z-index: 2; }

/* ============================================================
   IT LION — UX REFINEMENTS (margin/mobile-nav/glass/gallery)
   ============================================================ */

/* 1) Kill the legacy underscores theme margin-top on .page-content
      so the hero hugs the top of the viewport. */
body.lf-body .page-content,
.lf-body .entry-content,
.lf-body .entry-summary {
  margin: 0;
}

/* 4) Container width: align section shells with the header's outer
      bounds so everything reads as one column instead of nested.
      Header has padding 0 28px; section shells now match. */
@media (min-width: 641px) {
  .lf-shell { padding: 0 28px; }
}

/* 6) Liquid-glass tint on the scrolled (mobile + desktop) sticky bar. */
.site-nav.scrolled .site-nav__inner {
  background: rgba(253, 250, 246, 0.72);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  border-color: rgba(229, 219, 199, 0.55);
}

/* 2) Mobile: header is full-width, edge-to-edge, no pill radius.
   3) Mobile: scroll-up-to-reveal is handled by JS adding `is-hidden`
              (translateY off-canvas). Hide that translation on desktop. */
@media (max-width: 980px) {
  .site-nav { padding: 0; top: 0; }
  .site-nav.scrolled { top: 0; }
  .site-nav__inner {
    max-width: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    box-shadow: 0 6px 18px rgba(109,78,105,0.10);
    padding: 10px 16px;
    background: var(--lf-paper);
  }
  .site-nav.scrolled .site-nav__inner {
    padding: 8px 14px;
    background: var(--lf-paper);
  }
  /* Slide-up hide on scroll-down */
  .site-nav { transition: transform 320ms var(--ease-out), top var(--dur-base) var(--ease-out); }
  .site-nav.is-hidden { transform: translateY(-110%); }
  /* Mobile brand: bigger logo, no negative margin so padding shows */
  .site-nav__brand img { height: 84px; margin: 0; }
  .site-nav.scrolled .site-nav__brand img { height: 56px; margin: 0; }
}

/* 3b) Burger morphs into an X when the menu is open. */
.site-nav__burger { position: relative; transition: transform var(--dur-base) var(--ease-out); }
.site-nav__burger svg { transition: opacity var(--dur-base) var(--ease-out); }
.site-nav__burger[aria-expanded="true"] svg { opacity: 0; }
.site-nav__burger::before,
.site-nav__burger::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%) rotate(0);
  opacity: 0;
  transition: transform 320ms var(--ease-out), opacity 200ms var(--ease-out);
}
.site-nav__burger[aria-expanded="true"]::before {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg);
}
.site-nav__burger[aria-expanded="true"]::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 3c) Mobile sidebar opens smoothly with a slide + fade, not a flash. */
.mobile-menu {
  transform: translateX(8%);
  transition: opacity 320ms var(--ease-out), transform 380ms var(--ease-out), visibility 320ms;
  visibility: hidden;
}
.mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
}

/* 3d) Mobile sub-menus start COLLAPSED. The parent gets `.is-open` from JS
       to expand them. We animate max-height for a smooth open/close. */
.mobile-menu__links .site-nav__item.has-children > .site-nav__sub {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  border-left-color: transparent;
  transition: max-height 320ms var(--ease-out),
              margin-top 220ms var(--ease-out),
              padding 220ms var(--ease-out),
              border-color 220ms var(--ease-out);
}
.mobile-menu__links .site-nav__item.has-children.is-open > .site-nav__sub {
  max-height: 800px;
  margin-top: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-left-color: var(--lf-line);
}
.mobile-menu__links .site-nav__item.has-children > a::before {
  transition: transform 240ms var(--ease-out);
}
.mobile-menu__links .site-nav__item.has-children.is-open > a::before {
  transform: rotate(-180deg);
}

/* 7) Gallery: photos-only block flush against the footer. */
.gallery {
  padding: 24px 0 0;
}
.gallery__marquee {
  padding: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.gallery__below { display: none; }

/* ============================================================
   HOMEPAGE TYPE TIGHTENING — v1 SANDBOX
   Scope: Home tuning round. Once approved → promote into the
   global token block (lines 43–63) and update Design System.
   Do NOT propagate to other pages until reviewed.
============================================================ */

/* --- T1. Body/lead readability bump (global tokens override) --- */
:root {
  --fs-body: 18px;
  --fs-lead: clamp(19px, 1.6vw, 25px);
}
.lf-body {
  font-weight: 500;             /* Cormorant 500 (loaded) — punije slovo */
  line-height: 1.7;             /* sa 1.75 — i dalje prozračno, manje raštrkano */
  letter-spacing: 0.005em;
}
.lf-lead {
  font-weight: 500;             /* punije od regular p — vidljivo, ne anemično */
  line-height: 1.55;            /* kompaktniji red, deluje "gušće" */
  letter-spacing: 0.005em;
  color: var(--fg2);            /* puna ink boja umesto soft — ne bledi */
}

/* --- T2. Hero — smanjeni h1 i subtitle da video diše --- */
.hero h1 {
  font-size: clamp(36px, 5vw, 68px);
  margin-bottom: 22px;
  letter-spacing: -0.4px;
}
.hero-subtitle {
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: 1.2px;
  margin-bottom: 44px;
}

/* --- T3. Allura script emphasis — TEST (Option A)
       Hero .magic-line + Ollie h2 <em> only.
       Allura je tanji vertikalno → font-size mora biti 1.4–1.55× okolnog
       teksta da bi vizuelno balansirao Playfair. Italic je off jer je
       Allura već script — italic bi udvostručio nagib. --- */
.hero h1 .magic-line {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.45em;
  line-height: 0.95;
  letter-spacing: 0;
  margin-top: 8px;
  padding-bottom: 6px;          /* descenders ("g","y") need room */
}
/* flourish lines around magic-line — discretno spuštene da prate baseline Allura */
.hero h1 .magic-line::before,
.hero h1 .magic-line::after {
  width: 56px;
  margin: 0 18px;
  transform: translateY(-2px);
}

.ollie .lf-h2 em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.55em;
  line-height: 0.9;
  letter-spacing: 0;
  padding: 0 6px;
  /* gold color iz globalnog em pravila (linija 127) — preserved */
}

/* --- T4. Product card micro-text — čitljivost cena i metadata --- */
.product-card__price small {
  font-size: 12px;
  letter-spacing: 0.18em;
}
.product-card__price strong {
  font-size: 22px;
  font-weight: 600;
}
.product-card__subtitle {
  font-size: 15.5px;
  letter-spacing: 0.01em;
}
.product-card__body p {
  font-size: 16px;
  line-height: 1.65;
}

/* ============================================================
   HOMEPAGE TYPE TIGHTENING — v2 SANDBOX
   Round 2: Allura everywhere on heading em, p tracking, pricing
   UX, focus outlines off, fairy scrollbar, hero text fade.
============================================================ */

/* --- T5. Allura script for ALL <em> inside headings (replaces Playfair italic).
       Production code: extends the global rule at line 127.
       EXCLUDES: .product-card__price em (numeric price stays italic Cormorant) --- */
.lf-display em,
.lf-headline em,
.lf-h1 em,
.lf-h2 em,
.lf-h3 em {
  font-family: var(--font-script);
  font-style: normal;          /* Allura is already a script — italic would double-slant */
  font-weight: 400;
  font-size: 1.5em;
  line-height: 0.92;
  letter-spacing: 0;
  padding: 0 6px;
  color: var(--lf-gold);
  display: inline-block;
  transform: translateY(2px);   /* baseline correction — Allura sits slightly high */
}
/* Hero magic-line — same Allura treatment (override v1 sizing for consistency) */
.hero h1 .magic-line {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 0.95;
  letter-spacing: 0;
  margin-top: 10px;
  padding-bottom: 6px;
}
/* Restore numeric price <em> back to Cormorant italic gold (no Allura on €) */
.product-card__price strong em,
.lf-badge em {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1em;
  line-height: inherit;
  padding: 0;
  transform: none;
  color: var(--lf-gold);
  display: inline;
}

/* --- T6. ALL paragraphs in content sections — letter-spacing 1px, min 17px --- */
.hero p,
.lf-section p {
  letter-spacing: 1px;
  font-size: max(17px, 1em);     /* never goes below 17px regardless of class */
}
/* Specifically bump previously-small p variants to 17px clean */
.product-card__body p,
.product-card__subtitle,
.benefit__body,
.blog-card__excerpt,
.review-card__author {
  font-size: 17px;
  letter-spacing: 1px;
}
/* Hero subtitle keeps its own clamp but inherits 1px tracking */
.hero-subtitle {
  letter-spacing: 1px;
}

/* --- T7. Pricing block — proper visual hierarchy.
       Restructured via CSS-only without touching markup.
       "From" becomes a gold uppercase tag on top.
       "€73.99" becomes the dominant element (28-34px).
       "10–20 slices" badge gets pulled visually next to price. --- */
.product-card__footer {
  align-items: center;
}
.product-card__price {
  position: relative;
  gap: 2px;
}
.product-card__price small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lf-gold);
  line-height: 1;
  margin-bottom: 2px;
}
.product-card__price strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1;
  color: var(--lf-lavender-deep);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
}
.product-card__price strong em {
  /* Numeric — already restored above (Cormorant italic, no transform) */
  font-size: 1em;
  font-weight: 600;
  color: var(--lf-lavender-deep);
  font-style: normal;            /* numeric should NOT be italic for clarity */
}
/* "per guest" suffix variant (Fairy Flex card) — keep readable */
.product-card[data-variant="flex"] .product-card__price strong {
  font-size: clamp(22px, 2.2vw, 26px);
}
/* Badge — clearer contrast, gold border, lavender text */
.product-card .lf-badge {
  font-size: 11px;
  padding: 7px 12px;
  border: 1px solid var(--lf-gold-soft);
  background: rgba(232, 199, 122, 0.08);
  color: var(--lf-lavender-deep);
  font-weight: 600;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

/* --- T8. Kill focus outline on logo + nav links + mobile menu links.
       Keeps :focus-visible accessibility on form inputs / CTAs intact. --- */
.site-nav__brand,
.site-nav__brand:focus,
.site-nav__brand:focus-visible,
.site-nav__links a,
.site-nav__links a:focus,
.site-nav__links a:focus-visible,
.site-nav__sub a,
.site-nav__sub a:focus,
.site-nav__sub a:focus-visible,
.mobile-menu__links a,
.mobile-menu__links a:focus,
.mobile-menu__links a:focus-visible,
.mobile-menu__close,
.mobile-menu__close:focus,
.mobile-menu__close:focus-visible,
.site-nav__burger,
.site-nav__burger:focus,
.site-nav__burger:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* --- T9. Scrollbar — thin gold fairy thread, uklopljen sa brand-om --- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--lf-gold) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--lf-gold-soft) 0%, var(--lf-gold) 60%, var(--lf-lavender-deep) 100%);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.25);
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--lf-gold) 0%, var(--lf-lavender-deep) 100%);
  background-clip: padding-box;
}

/* --- T10. Hero "Start the Magic" — smoother text fade.
       Currently the gold burst flashes instantly covering text.
       Fix: extend hero-content fade with translate+blur+scale, AND
       delay the magic-burst opacity transition so the text dissolve
       is visible BEFORE the gold flash takes over. --- */
.hero-content {
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.4s var(--ease-out),
    filter 1.1s var(--ease-out);
}
.hero.is-magic-active .hero-content {
  opacity: 0;
  transform: translateY(-28px) scale(0.96);
  filter: blur(6px);
}
.magic-burst {
  /* keep 0.5s in-fade but delay by 0.35s so text fade reads first */
  transition: opacity 0.7s var(--ease-out) 0.35s;
}
/* Also delay the scroll cue fade-out so it disappears WITH the text, not before */
.hero .scroll-cue {
  transition: opacity 0.9s var(--ease-out);
}

/* ============================================================
   HOMEPAGE TYPE TIGHTENING — v3 SANDBOX
   Reviews carousel (photo-first), footer copyright, hero
   responsive (video framing + Allura mobile wrap)
============================================================ */

/* --- T11. Reviews — photo on top (full width of card), text below.
       Carousel: scroll-snap horizontal track + prev/next + dots. --- */

/* Hide legacy review-card subcomponents */
.review-card__footer,
.review-card__thumb,
.review-card__thumb-label { display: none; }

.reviews__carousel {
  position: relative;
  margin-top: var(--lf-space-9);
  padding: 0 8px;
}
.reviews__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 12px;
}
.reviews__track::-webkit-scrollbar { display: none; }

.reviews__carousel .review-card {
  flex: 0 0 calc(33.333% - 16px);
  min-width: 300px;
  scroll-snap-align: start;
  background: var(--lf-paper);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-lg);
  box-shadow: var(--lf-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0; /* photo flush to edges */
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.reviews__carousel .review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lf-shadow-md);
}
.reviews__carousel .review-card::before { display: none; } /* kill legacy decoration */

/* Photo — full width, bigger height, on top */
.review-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  border: 0;
  padding: 0;
  background: var(--lf-lavender-mist);
  cursor: zoom-in;
  overflow: hidden;
}
.review-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 600ms var(--ease-out);
}
.review-card__photo:hover img { transform: scale(1.03); }
.review-card__photo-hint {
  position: absolute;
  bottom: 10px; right: 10px;
  background: rgba(29, 21, 48, 0.65);
  color: var(--lf-paper);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--lf-radius-pill);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.review-card__photo:hover .review-card__photo-hint,
.review-card__photo:focus-visible .review-card__photo-hint { opacity: 1; }

.review-card__body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.review-card__quote {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg2);
  font-style: italic;
  margin: 0;
  /* clamp to 5 lines so cards stay equal height-ish */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card__author {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg3);
  letter-spacing: 0.5px;
}
.review-card__author strong {
  color: var(--lf-lavender-deep);
  font-weight: 600;
}

/* Nav buttons — perfect circle, centered SVG arrow */
.reviews__nav {
  position: absolute;
  top: 38%;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--lf-gold-soft);
  background: rgba(252, 243, 233, 0.95);
  color: var(--lf-lavender-deep);
  cursor: pointer;
  z-index: 4;
  box-shadow: var(--lf-shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 0;            /* kill the legacy ‹ › text glyph if still present */
  line-height: 0;
  transform: translateY(-50%);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
.reviews__nav svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reviews__nav:hover {
  background: var(--lf-gold-soft);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
  box-shadow: var(--lf-shadow-md);
}
.reviews__nav:focus { outline: none; }
.reviews__nav:focus-visible {
  outline: 2px solid var(--lf-gold);
  outline-offset: 3px;
}
.reviews__nav--prev { left: -24px; }
.reviews__nav--next { right: -24px; }

/* Dots */
.reviews__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.reviews__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--lf-gold-soft);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 200ms, transform 200ms;
}
.reviews__dot.is-active {
  background: var(--lf-gold);
  transform: scale(1.25);
}

/* Responsive: 2 cards on tablet, 1 on mobile */
@media (max-width: 980px) {
  .reviews__carousel .review-card { flex: 0 0 calc(50% - 12px); }
  .reviews__nav--prev { left: 4px; }
  .reviews__nav--next { right: 4px; }
}
@media (max-width: 640px) {
  .reviews__carousel .review-card { flex: 0 0 88%; min-width: 0; }
  .reviews__nav { top: 32%; }
  .review-card__photo { aspect-ratio: 3 / 4; }
}

/* --- T12. Footer copyright — readable size --- */
.footer-bottom {
  font-size: 15px;
  gap: 14px;
}
.footer-bottom span { color: var(--fg3); }
.footer-bottom a {
  color: var(--lf-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms;
}
.footer-bottom a:hover { border-bottom-color: var(--lf-gold); }
.footer-bottom__center { font-size: 16px; }

@media (max-width: 600px) {
  .footer-bottom { font-size: 14px; }
}

/* --- T13. Hero responsive — better video framing + Allura wrap on mobile.
       Mobile: pull video focus to the right (fairy + cake area), keep
       Allura magic-line on its own balanced line. --- */
@media (max-width: 900px) {
  .hero {
    min-height: 640px;
  }
  .hero-video {
    object-position: 68% center;  /* favours right side: fairy + cake */
  }
  .hero h1 {
    font-size: clamp(26px, 6.5vw, 40px);
    letter-spacing: -0.3px;
    margin-bottom: 20px;
  }
  .hero h1 .magic-line {
    display: block;            /* always wrap to own line */
    font-size: 1.45em;         /* smaller Allura on mobile so video shows */
    margin-top: 4px;
    padding-bottom: 8px;
    line-height: 0.95;
  }
  .hero h1 .magic-line::before,
  .hero h1 .magic-line::after {
    width: 28px;
    margin: 0 10px;
    transform: translateY(-4px);
  }
  .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    margin-bottom: 18px;
  }
  .hero-subtitle {
    font-size: 14px;
    letter-spacing: 0.6px;
    margin-bottom: 32px;
    line-height: 1.55;
  }
  /* Subtitle <br> can stack awkwardly on phones */
  .hero-subtitle br { display: none; }
  .hero-content { padding: 0 20px; }
}
@media (max-width: 520px) {
  .hero { min-height: 580px; }
  .hero-content {
    justify-content: flex-end;       /* push text toward bottom on phones */
    padding-bottom: 80px;            /* small ~1cm lift from absolute bottom */
  }
  .scroll-cue { display: none; }     /* hide scroll indicator on phones */
  .hero-video { object-position: 72% center; } /* push further right for cake */
  .hero h1 { font-size: clamp(22px, 7vw, 32px); margin-bottom: 16px; }
  .hero h1 .magic-line { font-size: 1.5em; padding-bottom: 10px; }
  .hero h1 .magic-line::before,
  .hero h1 .magic-line::after { width: 20px; margin: 0 6px; }
}

/* ============================================================
   HOMEPAGE TYPE TIGHTENING — v4 SANDBOX
   Pricing "per guest" sizing, badge contrast, hero text fade fix
============================================================ */

/* --- T14. Pricing — "per guest" smaller unit, never as big as the number.
       Markup change: <span class="product-card__price-unit">per guest</span>
       inside the <strong>. CSS makes it Cormorant 12px gold caps. --- */
.product-card__price-unit {
  display: inline-block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lf-gold);
  margin-left: 8px;
  transform: translateY(-2px);   /* visual baseline tweak vs number */
  vertical-align: baseline;
  line-height: 1;
}
/* Fairy Flex card shouldn't shrink the number now (we fixed "per guest" instead) */
.product-card[data-variant="flex"] .product-card__price strong {
  font-size: clamp(26px, 2.6vw, 32px); /* match other cards */
}

/* --- T15. Badge — much stronger contrast for "10-20 SLICES" visibility --- */
.product-card .lf-badge {
  font-size: 12px;
  padding: 8px 14px;
  border: 1px solid var(--lf-gold);
  background: rgba(232, 199, 122, 0.28);  /* was 0.08 — too pale */
  color: var(--lf-lavender-deep);
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.product-card[data-variant="premium"] .lf-badge {
  background: rgba(212, 175, 55, 0.22);
  border-color: var(--lf-gold);
}
.product-card[data-variant="pet"] .lf-badge {
  background: rgba(214, 232, 196, 0.35);  /* soft sage tint for paws & play */
  border-color: var(--lf-sage, #8FAE7A);
}
.product-card[data-variant="flex"] .lf-badge {
  background: rgba(234, 182, 216, 0.30);  /* soft pink for flex */
  border-color: var(--lf-pastel-pink, #D89AC0);
}

/* --- T16. Hero text fade — slow, gentle, nothing else changes.
       Idle video keeps playing, no overlay flash, no trigger video.
       Click → text drifts up & blurs softly → smooth scroll to Section 2. --- */
.hero-content {
  transition:
    opacity 1.4s var(--ease-out),
    transform 1.6s var(--ease-out),
    filter 1.4s var(--ease-out);
}
.hero.is-magic-active .hero-content {
  opacity: 0;
  transform: translateY(-28px) scale(0.96);
  filter: blur(6px);
}
.hero .scroll-cue {
  transition: opacity 1.1s var(--ease-out);
}
.hero.is-magic-active .scroll-cue { opacity: 0; }

/* Hero "Start the Magic" — video swap behavior restored (decision reversed).
   Click flow: gold flash overlay → idle video crossfades out, trigger video in
   → scroll to next section. */
.hero-video           { transition: opacity 0.6s var(--ease-out); }
.hero-video.is-hidden { opacity: 0; pointer-events: none; }
#hero-trigger         { opacity: 0; }
.hero.is-magic-active #hero-idle    { opacity: 0; }
.hero.is-magic-active #hero-trigger { opacity: 1; }

/* ============================================================
   HOMEPAGE — v5: PRODUCT CARDS "MAGIC REVEAL"
   Veil = lavender card with package name covers each product
   photo. When .products__grid enters viewport, veils peel away
   one by one with sparkle burst + scale + blur fade.
============================================================ */

/* --- T17. Veil — initial covering layer over the product photo --- */
.product-card__veil {
  position: absolute;
  inset: 0;
  z-index: 4;                       /* above photo (z=1) + fallback (z=0) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 22px;
  text-align: center;
  pointer-events: none;             /* never blocks clicks once revealed */

  /* Lavender storybook background with gold halo + sparkle dust */
  background:
    radial-gradient(ellipse at 30% 22%, rgba(232,199,122,0.42), transparent 55%),
    radial-gradient(ellipse at 78% 80%, rgba(244,212,232,0.4), transparent 60%),
    linear-gradient(150deg, #B591C7 0%, #8E6BA8 55%, #6D4E69 100%);
  color: var(--lf-paper);
  overflow: hidden;

  /* Initial state — fully covering */
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition:
    opacity 900ms var(--ease-out),
    transform 1100ms var(--ease-out),
    filter 900ms var(--ease-out);
}

/* Per-variant accent tint baked into the veil background */
.product-card[data-variant="flex"]    .product-card__veil { background-image: radial-gradient(ellipse at 30% 22%, rgba(232,199,122,0.42), transparent 55%), radial-gradient(ellipse at 78% 80%, rgba(234,182,216,0.55), transparent 60%), linear-gradient(150deg, #C9A8D5 0%, #B591C7 55%, #6D4E69 100%); }
.product-card[data-variant="classic"] .product-card__veil { background-image: radial-gradient(ellipse at 30% 22%, rgba(252,232,168,0.55), transparent 60%), radial-gradient(ellipse at 78% 80%, rgba(244,212,232,0.4), transparent 60%), linear-gradient(150deg, #B591C7 0%, #8E6BA8 55%, #4C3650 100%); }
.product-card[data-variant="premium"] .product-card__veil { background-image: radial-gradient(ellipse at 30% 22%, rgba(232,199,122,0.4), transparent 55%), radial-gradient(ellipse at 78% 80%, rgba(201,161,214,0.55), transparent 60%), linear-gradient(150deg, #9F7BB5 0%, #6D4E69 60%, #3D2A41 100%); }
.product-card[data-variant="pet"]     .product-card__veil { background-image: radial-gradient(ellipse at 30% 22%, rgba(232,199,122,0.4), transparent 55%), radial-gradient(ellipse at 78% 80%, rgba(178,216,179,0.55), transparent 60%), linear-gradient(150deg, #B591C7 0%, #7E8E84 60%, #4C5E4F 100%); }

/* Decorative subtle border + inner glow */
.product-card__veil::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(232, 199, 122, 0.55);
  border-radius: var(--lf-radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 60%);
  pointer-events: none;
}
/* Sparkle burst pseudo — invisible until reveal */
.product-card__veil::after {
  content: "";
  position: absolute;
  inset: 18%;
  background:
    radial-gradient(circle, rgba(255,235,175,0.85) 0%, rgba(232,199,122,0.45) 30%, transparent 65%);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.4);
  border-radius: 50%;
}

/* Veil contents */
.product-card__veil .lf-script {
  font-family: var(--font-script);
  font-size: clamp(40px, 4.4vw, 60px);
  color: var(--lf-paper);
  line-height: 1;
  text-shadow:
    0 2px 8px rgba(29, 21, 48, 0.35),
    0 0 28px rgba(232, 199, 122, 0.45);
  letter-spacing: 0;
}
.product-card__veil-sparkle {
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--lf-gold-soft);
  text-shadow: 0 0 18px rgba(232, 199, 122, 0.7);
  animation: lfVeilTwinkle 2.6s ease-in-out infinite;
}
.product-card__veil-hint {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(252, 243, 233, 0.86);
  margin-top: 6px;
}

/* Floating twinkle dust dots — pure CSS */
.product-card__veil-twinkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,235,175,0.95), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 24%, rgba(255,235,175,0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 78%, rgba(252,243,233,0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 72%, rgba(232,199,122,0.95), transparent 60%),
    radial-gradient(1px 1px at 50% 44%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 36% 58%, rgba(232,199,122,0.8), transparent 60%),
    radial-gradient(1px 1px at 68% 38%, rgba(252,243,233,0.75), transparent 60%);
  animation: lfVeilDust 4.2s ease-in-out infinite alternate;
}

@keyframes lfVeilTwinkle {
  0%, 100% { opacity: 0.45; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.25) rotate(180deg); }
}
@keyframes lfVeilDust {
  0%   { opacity: 0.55; transform: translateY(0); }
  100% { opacity: 1;    transform: translateY(-6px); }
}
@keyframes lfVeilBurst {
  0%   { opacity: 0;   transform: scale(0.4); }
  35%  { opacity: 1;   transform: scale(1.05); }
  100% { opacity: 0;   transform: scale(1.6); }
}

/* --- T18. The reveal: triggered when .products__grid is in viewport.
       Existing JS adds .is-visible to .reveal-stagger when scrolled in.
       Each child card peels its veil with a staggered delay. --- */

/* Card 1 veil peel + burst */
.products__grid.is-visible > .product-card:nth-child(1) .product-card__veil {
  transition-delay: 0.45s;
  opacity: 0;
  transform: scale(1.18);
  filter: blur(10px);
}
.products__grid.is-visible > .product-card:nth-child(1) .product-card__veil::after {
  animation: lfVeilBurst 1.3s var(--ease-out) 0.35s 1 forwards;
}

/* Card 2 */
.products__grid.is-visible > .product-card:nth-child(2) .product-card__veil {
  transition-delay: 1.0s;
  opacity: 0;
  transform: scale(1.18);
  filter: blur(10px);
}
.products__grid.is-visible > .product-card:nth-child(2) .product-card__veil::after {
  animation: lfVeilBurst 1.3s var(--ease-out) 0.9s 1 forwards;
}

/* Card 3 */
.products__grid.is-visible > .product-card:nth-child(3) .product-card__veil {
  transition-delay: 1.55s;
  opacity: 0;
  transform: scale(1.18);
  filter: blur(10px);
}
.products__grid.is-visible > .product-card:nth-child(3) .product-card__veil::after {
  animation: lfVeilBurst 1.3s var(--ease-out) 1.45s 1 forwards;
}

/* Card 4 */
.products__grid.is-visible > .product-card:nth-child(4) .product-card__veil {
  transition-delay: 2.1s;
  opacity: 0;
  transform: scale(1.18);
  filter: blur(10px);
}
.products__grid.is-visible > .product-card:nth-child(4) .product-card__veil::after {
  animation: lfVeilBurst 1.3s var(--ease-out) 2.0s 1 forwards;
}

/* Don't show legacy fallback "fairy-flex.png" small text under the veil
   (was useful only when images were missing — they all load now). */
.product-card__image-fallback small { display: none; }

/* Accessibility — respect reduced motion: just fade veils out together */
@media (prefers-reduced-motion: reduce) {
  .product-card__veil,
  .product-card__veil-sparkle,
  .product-card__veil-twinkles {
    animation: none !important;
  }
  .products__grid.is-visible > .product-card .product-card__veil {
    transition: opacity 400ms ease;
    transition-delay: 0s;
    transform: none;
    filter: none;
  }
  .product-card__veil::after { animation: none !important; }
}

/* Mobile: faster cascade so users don't wait too long on small screens */
@media (max-width: 720px) {
  .products__grid.is-visible > .product-card:nth-child(1) .product-card__veil { transition-delay: 0.3s; }
  .products__grid.is-visible > .product-card:nth-child(2) .product-card__veil { transition-delay: 0.75s; }
  .products__grid.is-visible > .product-card:nth-child(3) .product-card__veil { transition-delay: 1.2s; }
  .products__grid.is-visible > .product-card:nth-child(4) .product-card__veil { transition-delay: 1.65s; }

  .products__grid.is-visible > .product-card:nth-child(1) .product-card__veil::after { animation-delay: 0.2s; }
  .products__grid.is-visible > .product-card:nth-child(2) .product-card__veil::after { animation-delay: 0.65s; }
  .products__grid.is-visible > .product-card:nth-child(3) .product-card__veil::after { animation-delay: 1.1s; }
  .products__grid.is-visible > .product-card:nth-child(4) .product-card__veil::after { animation-delay: 1.55s; }
}

/* ============================================================
   CUSTOMER REVIEWS PAGE (/what-our-customers-say-about-us)
   ============================================================ */
.cr-hero { padding-top: 96px; padding-bottom: 24px; }
.cr-hero__count {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg3);
  font-size: 15px;
  margin-top: 18px;
}
.cr-hero__count strong { color: var(--lf-gold); font-style: normal; font-weight: 700; font-size: 17px; }

.cr-section { padding-top: 32px; padding-bottom: 96px; }

.reviews-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 32px;
}
.reviews-page__grid > .cr-card {
  background: var(--lf-paper);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-lg);
  box-shadow: var(--lf-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.reviews-page__grid > .cr-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lf-shadow-md);
}
.reviews-page__grid > .cr-card::before { display: none; } /* kill gold quote glyph from .review-card */
.reviews-page__grid > .cr-card .review-card__quote {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fg2);
}

.review-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--lf-lavender-mist), var(--lf-paper));
  cursor: default;
}
.review-card__photo--placeholder span {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--lf-gold);
  line-height: 1;
}

.cr-empty {
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg3);
  padding: 64px 0;
}

.cr-cta {
  margin-top: 64px;
  text-align: center;
  padding: 40px 24px;
  background: linear-gradient(135deg, var(--lf-lavender-mist), var(--lf-paper));
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-lg);
}
.cr-cta__lead {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--lf-lavender-deep);
  margin: 0 0 18px;
}

@media (max-width: 1050px) {
  .reviews-page__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .reviews-page__grid { grid-template-columns: 1fr; gap: 22px; }
  .cr-hero { padding-top: 64px; }
}

/* ============================================================
   NAV — non-clickable dropdown parent (used by "About")
   ============================================================ */
.site-nav__links .lf-menu-no-click > a {
  cursor: default;
  pointer-events: none;
}
/* Re-enable hover styling on the LI so the dropdown still opens */
.site-nav__links .lf-menu-no-click { cursor: default; }
.site-nav__links .lf-menu-no-click > a:hover { color: var(--lf-lavender-deep); }

/* ============================================================
   GALLERY PAGE — masonry scrapbook (/gallery)
   ============================================================ */
.gallery-hero { padding-top: 96px; padding-bottom: 16px; }
.gallery-hero__count {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg3);
  font-size: 15px;
  margin-top: 18px;
}
.gallery-hero__count strong { color: var(--lf-gold); font-style: normal; font-weight: 700; font-size: 17px; }

.gallery-section { padding-top: 32px; padding-bottom: 96px; }

.lf-masonry {
  column-count: 3;
  column-gap: 18px;
  margin-top: 24px;
}
.lf-masonry__item {
  break-inside: avoid;
  margin: 0 0 18px;
  position: relative;
  display: block;
}
.lf-masonry__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-md);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--lf-paper);
  position: relative;
  box-shadow: var(--lf-shadow-sm);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.lf-masonry__btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--lf-shadow-md);
}
.lf-masonry__btn img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 600ms var(--ease-out);
}
.lf-masonry__btn:hover img { transform: scale(1.03); }
.lf-masonry__hint {
  position: absolute;
  bottom: 10px; right: 10px;
  background: rgba(29, 21, 48, 0.65);
  color: var(--lf-paper);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--lf-radius-pill);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.lf-masonry__btn:hover .lf-masonry__hint,
.lf-masonry__btn:focus-visible .lf-masonry__hint { opacity: 1; }
.lf-masonry__cap {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--fg3);
  text-align: center;
  margin: 8px 4px 0;
}

.gallery-empty {
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg3);
  padding: 64px 0;
}
.gallery-cta {
  margin-top: 64px;
  text-align: center;
  padding: 40px 24px;
  background: linear-gradient(135deg, var(--lf-lavender-mist), var(--lf-paper));
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-lg);
}
.gallery-cta__lead {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--lf-lavender-deep);
  margin: 0 0 18px;
}

@media (max-width: 1050px) {
  .lf-masonry { column-count: 2; }
}
@media (max-width: 600px) {
  .lf-masonry { column-count: 1; }
  .gallery-hero { padding-top: 64px; }
}

/* ============================================================
   HOME — FEATURED GALLERY CAROUSEL (Section 7.5)
   ============================================================ */
.lf-section.gallery-home {
  padding-top: 72px;
  padding-bottom: 56px;
}
.gallery-home__strip {
  position: relative;
  margin-top: 48px;
}
.gallery-home__track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 6px 18px;
}
.gallery-home__track::-webkit-scrollbar { display: none; }
.gallery-home__card {
  flex: 0 0 calc(25% - 17px);
  min-width: 220px;
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-lg);
  overflow: hidden;
  background: var(--lf-paper);
  box-shadow: var(--lf-shadow-sm);
  cursor: zoom-in;
  padding: 0;
  position: relative;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.gallery-home__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lf-shadow-md);
}
.gallery-home__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.gallery-home__card:hover img { transform: scale(1.05); }

.gallery-home__nav {
  position: absolute;
  top: 50%;
  width: 44px; height: 44px;
  transform: translateY(-50%);
  border: 1px solid var(--lf-line);
  background: var(--lf-paper);
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: var(--lf-shadow-sm);
  color: var(--lf-lavender-deep);
}
.gallery-home__nav:hover { background: var(--lf-lavender-mist); }
.gallery-home__nav svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }
.gallery-home__nav--prev { left: -10px; }
.gallery-home__nav--next { right: -10px; }

.gallery-home__below { text-align: center; margin-top: 36px; }

/* Full-bleed variant — track runs edge-to-edge of the viewport,
   header + CTA stay inside .lf-shell. */
.gallery-home--fullbleed .gallery-home__strip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.gallery-home--fullbleed .gallery-home__track {
  padding-left: clamp(16px, 4vw, 64px);
  padding-right: clamp(16px, 4vw, 64px);
}
.gallery-home--fullbleed .gallery-home__nav--prev { left: clamp(8px, 2vw, 28px); }
.gallery-home--fullbleed .gallery-home__nav--next { right: clamp(8px, 2vw, 28px); }

@media (max-width: 1050px) {
  .gallery-home__card { flex: 0 0 calc(33.333% - 15px); }
}
@media (max-width: 720px) {
  .gallery-home__card { flex: 0 0 calc(50% - 11px); min-width: 180px; }
  .gallery-home__nav { display: none; }
}
@media (max-width: 480px) {
  .gallery-home__card { flex: 0 0 calc(70% - 11px); }
}

/* ============================================================
   STAY CONNECTED PAGE
   ============================================================ */
.sc-hero { padding-top: 96px; padding-bottom: 24px; }

.sc-block { padding: 80px 0; }
.sc-block--alt { background: linear-gradient(180deg, var(--lf-paper) 0%, var(--lf-lavender-mist) 100%); }
.sc-block__shell { max-width: 1080px; margin: 0 auto; }

.sc-block__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.sc-step {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lf-gold);
  margin-bottom: 14px;
}
.sc-block__foot {
  text-align: center;
  margin: 48px auto 0;
  max-width: 760px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg2);
}

.sc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sc-card {
  background: var(--lf-paper);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-lg);
  padding: 32px 28px;
  box-shadow: var(--lf-shadow-sm);
  display: flex; flex-direction: column;
  gap: 12px;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.sc-card:hover { transform: translateY(-3px); box-shadow: var(--lf-shadow-md); }
.sc-card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--lf-lavender-mist), var(--lf-paper));
  display: grid; place-items: center;
  color: var(--lf-gold);
}
.sc-card__icon svg { width: 24px; height: 24px; }
.sc-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--lf-lavender-deep);
  margin: 4px 0 0;
}
.sc-card__lead { margin: 0; font-size: 16px; }
.sc-card__note {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--fg3);
  margin: 4px 0 0;
  line-height: 1.55;
}
.sc-card__note a { color: var(--lf-lavender-deep); border-bottom: 1px dotted var(--lf-line); }

.sc-link {
  color: var(--lf-lavender-deep);
  font-weight: 600;
  word-break: break-word;
}
.sc-link:hover { color: var(--lf-gold); }
.sc-link--big {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--lf-gold);
}

.sc-address {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg2);
  display: flex; flex-direction: column;
  gap: 2px;
}

/* Mailbox + Cooperation panels */
.sc-mailbox,
.sc-cooperation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.sc-mailbox__copy { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--fg2); }
.sc-mailbox__copy p { margin: 0 0 14px; }
.sc-list,
.sc-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 10px; align-content: flex-start; align-items: flex-start; }
.sc-tags { align-self: start; }
.sc-list li,
.sc-tags li {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.25;
  padding: 10px 20px;
  background: linear-gradient(135deg, #F5EAF7 0%, #FBF1FA 100%);
  border: 1px solid rgba(178, 144, 195, 0.45);
  border-radius: var(--lf-radius-pill);
  color: var(--lf-lavender-deep);
  box-shadow: 0 1px 2px rgba(91, 64, 105, 0.06);
  white-space: nowrap;
  transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
}
.sc-list li:hover,
.sc-tags li:hover {
  transform: translateY(-1px);
  border-color: var(--lf-gold);
  box-shadow: 0 4px 10px rgba(199, 161, 90, 0.18);
}
@media (max-width: 540px) {
  .sc-list li, .sc-tags li { white-space: normal; }
}
.sc-mailbox__cta,
.sc-cooperation__cta {
  background: var(--lf-paper);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-lg);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--lf-shadow-sm);
}
.sc-mailbox__label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lf-gold);
  margin: 0;
}
.sc-mailbox__cta .lf-btn { margin-top: 8px; }

/* Social row */
.sc-handle {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--lf-lavender-deep);
  margin: 8px 0 0;
  font-size: 18px;
}
.sc-socials {
  display: flex; justify-content: center; gap: 18px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.sc-social {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-pill);
  background: var(--lf-paper);
  color: var(--lf-lavender-deep);
  font-family: var(--font-body);
  font-size: 15px;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms;
}
.sc-social:hover { transform: translateY(-2px); background: var(--lf-paper); box-shadow: var(--lf-shadow-sm); color: var(--lf-gold); }
.sc-social__icon { width: 22px; height: 22px; display: grid; place-items: center; color: currentColor; }
.sc-social__icon svg { width: 100%; height: 100%; }

.sc-listings { text-align: center; margin-top: 32px; }
.sc-listings__head {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg3);
  margin: 0 0 14px;
}
.sc-listings__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sc-listing {
  padding: 8px 16px;
  border: 1px dashed var(--lf-line);
  border-radius: var(--lf-radius-pill);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--lf-lavender-deep);
}
.sc-listing:hover { color: var(--lf-gold); border-color: var(--lf-gold); }

.sc-bullets {
  list-style: none; padding: 0; margin: 32px auto 0;
  max-width: 720px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg2);
}
.sc-bullets li {
  position: relative; padding-left: 22px;
}
.sc-bullets li::before {
  content: "✦";
  position: absolute; left: 0;
  color: var(--lf-gold);
}

/* Community */
.sc-community__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.sc-community__card {
  background: var(--lf-paper);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-md);
  padding: 28px 18px;
  text-align: center;
  display: flex; flex-direction: column;
  gap: 10px;
  box-shadow: var(--lf-shadow-sm);
}
.sc-community__card span {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--lf-gold);
}
.sc-community__card p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--lf-lavender-deep);
  line-height: 1.4;
}

.sc-jump {
  margin-top: 32px;
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}

/* Footer dynamic-contact rows */
.footer-contact a,
.footer-contact span { color: inherit; }
.footer-contact .footer-contact__row {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  margin: 4px 0;
}
.footer-contact__row strong { color: var(--lf-gold); font-weight: 600; }

/* Responsive */
@media (max-width: 980px) {
  .sc-cards { grid-template-columns: 1fr; }
  .sc-mailbox, .sc-cooperation { grid-template-columns: 1fr; }
  .sc-community__grid { grid-template-columns: repeat(2, 1fr); }
  .sc-bullets { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .sc-hero { padding-top: 64px; }
  .sc-block { padding: 56px 0; }
}

/* ============================================================
   FAQ PAGE
============================================================ */
.faq-hero { padding-top: 96px; padding-bottom: 24px; }
.faq-hero .lf-section-head { max-width: 760px; margin: 0 auto; text-align: center; }

.faq-section { padding-top: 24px; padding-bottom: 96px; }
.faq-shell { max-width: 880px; margin: 0 auto; }

.faq-group { margin-bottom: 56px; }
.faq-group__title {
  font-family: var(--lf-font-display);
  color: var(--lf-lavender-deep);
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 4px 12px;
  border-bottom: 1px dashed rgba(178, 144, 195, 0.35);
}
.faq-group__icon {
  color: var(--lf-gold);
  font-size: 18px;
}

.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq-item {
  background: var(--lf-paper);
  border: 1px solid rgba(178, 144, 195, 0.18);
  border-radius: var(--lf-radius-md);
  box-shadow: 0 2px 8px rgba(91, 64, 105, 0.04);
  overflow: hidden;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.faq-item[open] {
  border-color: rgba(199, 161, 90, 0.55);
  box-shadow: 0 6px 22px rgba(91, 64, 105, 0.08);
}
.faq-item__summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--lf-font-display);
  font-weight: 500;
  color: var(--lf-ink);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.4;
  transition: background var(--dur-base), color var(--dur-base);
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary:hover { background: rgba(234, 219, 245, 0.25); }
.faq-item[open] .faq-item__summary { color: var(--lf-lavender-deep); }

.faq-item__q { flex: 1 1 auto; }
.faq-item__chev {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(234, 219, 245, 0.55);
  color: var(--lf-lavender-deep);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base), background var(--dur-base);
}
.faq-item__chev svg { width: 16px; height: 16px; }
.faq-item[open] .faq-item__chev {
  transform: rotate(180deg);
  background: var(--lf-gold-soft);
  color: var(--lf-paper);
}

.faq-item__body {
  padding: 0 22px 20px;
  color: var(--lf-ink);
  font-family: var(--lf-font-body);
  line-height: 1.65;
  animation: faqFadeIn 0.32s ease both;
}
.faq-item__a { margin: 0 0 10px; font-size: 15.5px; }
.faq-item__bullets {
  margin: 8px 0 0;
  padding-left: 20px;
  list-style: none;
}
.faq-item__bullets li {
  position: relative;
  padding: 4px 0 4px 16px;
  font-size: 15px;
}
.faq-item__bullets li::before {
  content: "✦";
  position: absolute; left: -4px; top: 4px;
  color: var(--lf-gold);
  font-size: 10px;
}

@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.faq-help {
  margin-top: 56px;
  background: linear-gradient(135deg, var(--lf-lavender-soft) 0%, var(--lf-paper) 100%);
  border: 1px solid rgba(178, 144, 195, 0.25);
  border-radius: var(--lf-radius-lg);
  padding: 36px 32px;
  text-align: center;
}
.faq-help__title {
  font-family: var(--lf-font-display);
  color: var(--lf-lavender-deep);
  font-size: clamp(22px, 2.4vw, 26px);
  margin: 0 0 8px;
}
.faq-help__text {
  color: var(--lf-ink); margin: 0 0 22px;
  font-family: var(--lf-font-body);
}
.faq-help__row {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

@media (max-width: 600px) {
  .faq-group { margin-bottom: 40px; }
  .faq-item__summary { padding: 16px 18px; gap: 12px; }
  .faq-item__body { padding: 0 18px 18px; }
  .faq-help { padding: 28px 22px; }
}

/* ============================================================
   TERMS & CONDITIONS PAGE
============================================================ */
.tc-hero { padding-top: 96px; padding-bottom: 24px; }
.tc-hero .lf-section-head { max-width: 760px; margin: 0 auto; text-align: center; }
.tc-intro {
  max-width: 760px; margin: 28px auto 0;
  font-family: var(--lf-font-body);
  color: var(--lf-ink);
  line-height: 1.7;
  font-size: 16px;
  text-align: center;
}
.tc-intro p { margin: 0 0 12px; }
.tc-intro p:last-child { margin-bottom: 0; }

.tc-section { padding-top: 24px; padding-bottom: 96px; }
.tc-shell { max-width: 900px; margin: 0 auto; }

.tc-list { display: flex; flex-direction: column; gap: 18px; }

.tc-card {
  background: var(--lf-paper);
  border: 1px solid rgba(178, 144, 195, 0.18);
  border-radius: var(--lf-radius-md);
  padding: 26px 30px 22px;
  box-shadow: 0 2px 8px rgba(91, 64, 105, 0.04);
}
.tc-card__head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(178, 144, 195, 0.3);
  margin-bottom: 14px;
}
.tc-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 28px; padding: 0 10px;
  border-radius: 999px;
  background: var(--lf-gold-soft);
  color: var(--lf-paper);
  font-family: var(--lf-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.tc-card__title {
  font-family: var(--lf-font-display);
  color: var(--lf-lavender-deep);
  font-size: clamp(17px, 1.8vw, 20px);
  margin: 0;
  line-height: 1.3;
}
.tc-card__body {
  color: var(--lf-ink);
  font-family: var(--lf-font-body);
  font-size: 15.5px;
  line-height: 1.65;
}
.tc-card__body p { margin: 0 0 10px; }
.tc-card__body p:last-child { margin-bottom: 0; }
.tc-card__list {
  margin: 6px 0 12px;
  padding-left: 0;
  list-style: none;
}
.tc-card__list li {
  position: relative;
  padding: 4px 0 4px 18px;
  font-size: 15px;
}
.tc-card__list li::before {
  content: "✦";
  position: absolute; left: 0; top: 6px;
  color: var(--lf-gold);
  font-size: 10px;
}

.tc-contact {
  margin-top: 40px;
  background: linear-gradient(135deg, var(--lf-paper) 0%, var(--lf-lavender-soft) 100%);
  border: 1px solid rgba(178, 144, 195, 0.25);
  border-radius: var(--lf-radius-lg);
  padding: 30px 32px;
  text-align: center;
}
.tc-contact__title {
  font-family: var(--lf-font-display);
  color: var(--lf-lavender-deep);
  font-size: clamp(20px, 2.2vw, 24px);
  margin: 0 0 6px;
}
.tc-contact__intro {
  color: var(--lf-ink); margin: 0 0 16px;
  font-family: var(--lf-font-body);
}
.tc-contact__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center;
}
.tc-contact__list a {
  color: var(--lf-lavender-deep);
  text-decoration: none;
  font-family: var(--lf-font-body);
  font-size: 15px;
  border-bottom: 1px solid rgba(178, 144, 195, 0.4);
  transition: color var(--dur-base), border-color var(--dur-base);
}
.tc-contact__list a:hover { color: var(--lf-gold); border-color: var(--lf-gold); }

@media (max-width: 600px) {
  .tc-card { padding: 22px 20px 18px; }
  .tc-card__head { gap: 10px; }
  .tc-contact { padding: 24px 20px; }
}

/* Footer legal row */
.footer-legal {
  margin-top: 18px; text-align: center;
}
.footer-legal a {
  color: var(--lf-lavender-deep);
  font-family: var(--lf-font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px dotted rgba(178,144,195,0.5);
  transition: color var(--dur-base), border-color var(--dur-base);
}
.footer-legal a:hover { color: var(--lf-gold); border-color: var(--lf-gold); }

/* ============================================================
   AVAILABILITY CALENDAR — /availability/
============================================================ */
.avail-hero { padding-top: var(--lf-pad-snug); padding-bottom: var(--lf-space-7); }
.avail-hero__hint {
  margin-top: var(--lf-space-4);
  font-size: 15px;
  color: var(--fg3);
  line-height: 1.5;
}
.avail-hero__hint a {
  color: var(--lf-lavender-deep);
  font-weight: 600;
  border-bottom: 1px dotted var(--lf-soft-lavender);
  text-decoration: none;
  transition: color var(--dur-base), border-color var(--dur-base);
}
.avail-hero__hint a:hover { color: var(--lf-gold); border-color: var(--lf-gold); }

.avail-banner {
  display: flex;
  align-items: center;
  gap: var(--lf-space-4);
  margin: var(--lf-space-6) auto 0;
  max-width: 760px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #FBF1FA 0%, #F5EAF7 100%);
  border: 1px solid rgba(178, 144, 195, 0.45);
  border-radius: var(--lf-radius-md);
  box-shadow: var(--lf-shadow-xs);
}
.avail-banner__star {
  font-size: 22px;
  color: var(--lf-gold);
  line-height: 1;
}
.avail-banner p {
  margin: 0;
  font-size: 16px;
  color: var(--lf-lavender-deep);
  font-weight: 500;
  line-height: 1.4;
}

.avail-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lf-space-3) var(--lf-space-5);
  justify-content: center;
  list-style: none;
  margin: var(--lf-space-6) 0 0;
  padding: 0;
  font-size: 14px;
  color: var(--fg3);
}
.avail-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.avail-legend__sw {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--lf-line);
  background: var(--lf-paper);
}
.avail-legend__sw.is-free {
  background: linear-gradient(135deg, #E8F4E8 0%, #F1F8F1 100%);
  border-color: #9ec79e;
}
.avail-legend__sw.is-full {
  background: var(--lf-line);
  border-color: var(--lf-lavender-deep);
  background-image: repeating-linear-gradient(45deg,
    transparent 0 3px,
    rgba(109,78,105,0.35) 3px 4px);
}

.avail-section { padding-top: var(--lf-space-7); padding-bottom: var(--lf-pad-default); }

.lf-cal-stage { position: relative; }

.lf-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lf-space-5);
  margin-bottom: var(--lf-space-6);
}
.lf-cal-nav__btn {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lf-paper);
  color: var(--lf-lavender-deep);
  border: 1.5px solid var(--lf-soft-lavender);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur-base), background var(--dur-base),
              color var(--dur-base), border-color var(--dur-base),
              box-shadow var(--dur-base);
  box-shadow: var(--lf-shadow-xs);
}
.lf-cal-nav__btn svg { width: 22px; height: 22px; display: block; }
.lf-cal-nav__btn:hover:not(:disabled) {
  background: var(--lf-lavender-deep);
  color: var(--lf-paper);
  border-color: var(--lf-lavender-deep);
  transform: translateY(-1px);
  box-shadow: var(--lf-shadow-sm);
}
.lf-cal-nav__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.lf-cal-nav__label {
  font-family: var(--ff-display, 'Playfair Display'), serif;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  color: var(--lf-lavender-deep);
  min-width: 220px;
  text-align: center;
  letter-spacing: 0.01em;
}

.lf-cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--lf-space-6);
}
/* Pagination: only the active page's cards are visible */
.lf-cal[data-page]:not(.is-visible) { display: none; }

.lf-cal {
  position: relative;
  z-index: 1;
  background: var(--lf-paper);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-md);
  padding: var(--lf-space-5);
  box-shadow: var(--lf-shadow-xs);
}
/* When any day in a card is hovered/focused, lift the WHOLE card above its
   siblings so the tooltip can paint over the next month's card. */
.lf-cal:has(.lf-cal__day[data-tip]:hover),
.lf-cal:has(.lf-cal__day[data-tip]:focus-visible) {
  z-index: 50;
}
.lf-cal__head { text-align: center; margin-bottom: var(--lf-space-4); }
.lf-cal__title {
  font-family: var(--ff-display, 'Playfair Display'), serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--lf-lavender-deep);
  margin: 0;
}
.lf-cal__year {
  font-family: 'Allura', cursive;
  font-size: 28px;
  color: var(--lf-gold);
  font-weight: 400;
  margin-left: 4px;
}

.lf-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg4);
  margin-bottom: 6px;
}

.lf-cal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  overflow: visible;
}
.lf-cal__pad { aspect-ratio: 1; }

.lf-cal__day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E8F4E8 0%, #F1F8F1 100%);
  color: #3f6b3f;
  border: 1px solid #b8d8b8;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
  transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
}
.lf-cal__num { line-height: 1; }
.lf-cal__icon {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 9px;
  line-height: 1;
}

.lf-cal__day.is-past {
  background: transparent;
  border-color: transparent;
  color: var(--fg4);
  opacity: 0.35;
  pointer-events: none;
}

.lf-cal__day.is-full {
  background: var(--lf-line);
  background-image: repeating-linear-gradient(45deg,
    transparent 0 4px,
    rgba(109,78,105,0.32) 4px 5px);
  border-color: var(--lf-lavender-deep);
  color: var(--lf-lavender-deep);
}

.lf-cal__day[data-tip] { cursor: help; }
.lf-cal__day[data-tip]:hover,
.lf-cal__day[data-tip]:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--lf-shadow-sm);
  outline: none;
  border-color: var(--lf-gold);
  z-index: 2;
}

/* Desktop tooltip — chip above the day */
.lf-cal__tip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--lf-lavender-deep);
  color: var(--lf-paper);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
  padding: 16px 26px;
  border-radius: var(--lf-radius-pill);
  border: 2px solid var(--lf-gold);
  box-shadow: 0 20px 48px rgba(109, 78, 105, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base), transform var(--dur-base);
  z-index: 10;
}
.lf-cal__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: var(--lf-lavender-deep);
}
.lf-cal__day[data-tip]:hover .lf-cal__tip,
.lf-cal__day[data-tip]:focus-visible .lf-cal__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile tip — full-width sheet below the grid */
.lf-cal__mobile-tip {
  display: none;
  position: sticky;
  bottom: 20px;
  margin: var(--lf-space-6) auto 0;
  max-width: 640px;
  padding: 20px 28px;
  background: var(--lf-lavender-deep);
  color: var(--lf-paper);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: center;
  border-radius: var(--lf-radius-pill);
  border: 2px solid var(--lf-gold);
  box-shadow: 0 20px 48px rgba(109, 78, 105, 0.35);
  z-index: 20;
}
.lf-cal__mobile-tip.is-visible { display: block; }

@media (hover: none) {
  /* Hide chip tooltip on touch — use the shared mobile tip element instead */
  .lf-cal__tip { display: none; }
  .lf-cal__day[data-tip] { cursor: pointer; }
}

.avail-cta {
  text-align: center;
  margin-top: var(--lf-space-9);
  padding: var(--lf-space-7) var(--lf-space-5);
  background: linear-gradient(135deg, var(--lf-cream) 0%, var(--lf-paper) 100%);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-lg);
}
.avail-cta__lead {
  font-family: var(--ff-display, 'Playfair Display'), serif;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--lf-lavender-deep);
  margin: 0 0 var(--lf-space-4);
}

@media (max-width: 600px) {
  .lf-cal { padding: var(--lf-space-4); }
  .lf-cal__title { font-size: 20px; }
  .lf-cal__year { font-size: 24px; }
  .lf-cal__day { font-size: 12px; }
  .lf-cal__icon { font-size: 8px; }
}

/* ============================================================
   HERO TOP SPACING — give the eyebrow room to breathe
   below the sticky site header (was 80–96px, now 140px).
============================================================ */
.avail-hero,
.cr-hero,
.faq-hero,
.gallery-hero,
.sc-hero,
.tc-hero {
  padding-top: 140px;
}
@media (max-width: 720px) {
  .avail-hero,
  .cr-hero,
  .faq-hero,
  .gallery-hero,
  .sc-hero,
  .tc-hero {
    padding-top: 110px;
  }
}

/* ============================================================
   SINGLE PRODUCT — Little Fairy design-system styled
   (Hero, gallery, details card, related, final CTA)
============================================================ */
.lf-product-hero {
  padding-top: 130px;
  padding-bottom: 0;
  background: transparent;
}
.lf-product-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lf-ink-soft);
  margin: 0;
}
.lf-product-crumbs a { color: var(--lf-lavender-deep); }
.lf-product-crumbs a:hover { color: var(--lf-gold); }
.lf-product-crumbs span { color: var(--lf-gold); font-size: 9px; }

/* ----- Main grid ----- */
.lf-product-main {
  padding-top: 28px;
  padding-bottom: clamp(60px, 7vw, 110px);
  background: var(--lf-paper);
}
.lf-product-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 960px) {
  .lf-product-grid { grid-template-columns: 1fr; }
}

/* ----- Gallery ----- */
.lf-product-gallery__frame {
  position: relative;
  border-radius: var(--lf-radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--lf-cream) 0%, var(--lf-lavender-mist) 100%);
  box-shadow: var(--lf-shadow-md);
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
}
.lf-product-gallery__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .25s var(--ease-out), transform 1.2s var(--ease-out);
}
.lf-product-gallery__frame:hover .lf-product-gallery__img {
  transform: scale(1.03);
}
.lf-product-gallery__placeholder {
  font-family: var(--font-script);
  font-size: 80px;
  color: var(--lf-gold);
  opacity: .5;
}
.lf-product-gallery__sparkle {
  position: absolute; top: 14px; right: 16px;
  font-size: 22px; color: var(--lf-gold);
  text-shadow: 0 2px 8px rgba(0,0,0,.15);
  pointer-events: none;
}

.lf-product-thumbs {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px;
}
.lf-product-thumbs__item {
  width: 76px; height: 76px;
  border-radius: var(--lf-radius-sm);
  border: 2px solid transparent;
  background: var(--lf-cream);
  padding: 0; overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.lf-product-thumbs__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-product-thumbs__item:hover { border-color: var(--lf-gold-soft); transform: translateY(-2px); }
.lf-product-thumbs__item.is-active { border-color: var(--lf-gold); box-shadow: var(--lf-shadow-sm); }

/* ----- Details card ----- */
.lf-product-card {
  background: linear-gradient(180deg, #ffffff 0%, var(--lf-cream) 100%);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--lf-shadow-sm);
  position: sticky; top: 110px;
}
@media (max-width: 960px) { .lf-product-card { position: static; } }

.lf-product-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px;
}
.lf-product-tag {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--lf-lavender-deep);
  padding: 6px 12px;
  border-radius: var(--lf-radius-pill);
  background: var(--lf-lavender-mist);
  border: 1px solid rgba(109,78,105,0.15);
}

.lf-product-card__title {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.4vw, 44px);
}

.lf-product-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  padding: 18px 22px;
  background: var(--lf-paper);
  border: 1px solid var(--lf-line-gold);
  border-radius: var(--lf-radius-md);
  margin-bottom: 24px;
}
.lf-product-price__now {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 2.8vw, 36px);
  color: var(--lf-lavender-deep);
  letter-spacing: var(--ls-tight);
}
.lf-product-price__was {
  font-size: 18px; color: var(--lf-ink-muted);
  text-decoration: line-through;
}
.lf-product-price__tag {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: #fff;
  background: var(--lf-gold);
  padding: 4px 10px; border-radius: var(--lf-radius-pill);
}
.lf-product-price__note {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 13px; line-height: 1.55;
  color: var(--lf-ink-soft); font-style: italic;
}

.lf-product-features {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: grid; gap: 10px;
}
.lf-product-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; line-height: 1.55;
  color: var(--lf-ink);
}
.lf-product-features li span { color: var(--lf-gold); font-size: 12px; line-height: 1.6; flex-shrink: 0; }

.lf-product-cta {
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 24px;
}
.lf-product-buynow {
  align-self: stretch;
  text-align: center;
  justify-content: center;
}
.lf-product-buynow.is-loading {
  opacity: .75;
  pointer-events: none;
  cursor: wait;
}
.lf-product-qty-row {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.lf-product-qty-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lf-lavender-deep);
}
.lf-product-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-pill);
  box-shadow: var(--lf-shadow-xs);
}
.lf-product-qty__btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  background: var(--lf-lavender-mist);
  color: var(--lf-lavender-deep);
  font-family: var(--font-display);
  font-size: 22px; line-height: 1; font-weight: 500;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
}
.lf-product-qty__btn:hover {
  background: var(--lf-lavender-deep);
  color: #fff;
  transform: scale(1.06);
}
.lf-product-qty__btn:active { transform: scale(0.96); }
.lf-product-qty__input {
  width: 48px; border: 0; background: transparent; text-align: center;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  color: var(--lf-lavender-deep);
  letter-spacing: 0.02em;
  appearance: textfield; -moz-appearance: textfield;
  outline: none;
}
.lf-product-qty__input::-webkit-outer-spin-button,
.lf-product-qty__input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.lf-product-qty__input:focus { color: var(--lf-gold); }

.lf-product-cart-success {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-radius: var(--lf-radius-pill);
  background: linear-gradient(135deg, #EAF5EA, #F1F8F1);
  border: 1px solid #b8d8b8;
  color: #3f6b3f;
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lf-product-cart-success.is-shown { opacity: 1; transform: translateY(0); }
.lf-product-cart-success__star { color: var(--lf-gold); }

.lf-product-variable { margin-top: 4px; }
.lf-product-variable .single_variation_wrap .woocommerce-variation-price { margin-bottom: 14px; }
.lf-product-variable .button.single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 14.5px 30.5px;
  border: 1.5px solid var(--lf-lavender-deep);
  background: transparent; color: var(--lf-lavender-deep);
  border-radius: var(--lf-radius-pill);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.lf-product-variable .button.single_add_to_cart_button:hover { background: var(--lf-lavender-deep); color: #fff; }

.lf-product-meta {
  display: grid; gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--lf-line);
  font-size: 13px; color: var(--lf-ink-soft);
}
.lf-product-meta strong {
  display: inline-block;
  min-width: 80px;
  color: var(--lf-lavender-deep);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  margin-right: 8px;
}
.lf-product-meta a { color: var(--lf-lavender-deep); border-bottom: 1px solid var(--lf-line-gold); }
.lf-product-meta a:hover { color: var(--lf-gold); }
.lf-product-meta__share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lf-product-meta__share .heateor_sss_sharing_ul { display: inline-flex; gap: 6px; padding: 0; margin: 0; list-style: none; }

/* ----- Description ----- */
.lf-product-desc {
  background: var(--lf-cream);
  padding-top: clamp(60px, 7vw, 100px);
  padding-bottom: clamp(60px, 7vw, 100px);
}
.lf-product-desc__body {
  max-width: 760px; margin: 32px auto 0;
  font-size: 17px; line-height: 1.8;
  color: var(--lf-ink);
}
.lf-product-desc__body p { margin: 0 0 18px; }
.lf-product-desc__body h2,
.lf-product-desc__body h3 { color: var(--lf-lavender-deep); margin: 28px 0 12px; }
.lf-product-desc__body a { color: var(--lf-lavender-deep); border-bottom: 1px solid var(--lf-gold); }

/* ----- Related / upsells ----- */
.lf-product-related {
  background: var(--lf-lavender-mist);
  padding-top: clamp(60px, 7vw, 100px);
  padding-bottom: clamp(60px, 7vw, 100px);
}
.lf-product-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.lf-product-card-mini {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-md);
  overflow: hidden;
  box-shadow: var(--lf-shadow-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  color: inherit;
}
.lf-product-card-mini:hover {
  transform: translateY(-4px);
  box-shadow: var(--lf-shadow-md);
}
.lf-product-card-mini__media {
  aspect-ratio: 4 / 3;
  background: var(--lf-cream);
  overflow: hidden;
}
.lf-product-card-mini__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.lf-product-card-mini:hover .lf-product-card-mini__media img { transform: scale(1.06); }
.lf-product-card-mini__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.lf-product-card-mini__price { margin: 0; color: var(--lf-gold); font-weight: 600; }

/* ----- Final CTA strip ----- */
.lf-product-final {
  background:
    radial-gradient(ellipse at 80% 30%, rgba(212,175,55,0.18), transparent 60%),
    linear-gradient(135deg, var(--lf-lavender-deep) 0%, #4a3548 100%);
  color: #fff;
  padding-top: clamp(60px, 7vw, 100px);
  padding-bottom: clamp(60px, 7vw, 100px);
}
.lf-product-final .lf-eyebrow { color: #f3d27b; }
.lf-product-final .lf-eyebrow::before,
.lf-product-final .lf-eyebrow::after { color: #f3d27b; }
.lf-product-final .lf-h2 { color: #fff; }
.lf-product-final .lf-h2 em { color: #f3d27b; font-family: var(--font-script); font-size: 1.15em; }
.lf-product-final .lf-lead { color: rgba(255,255,255,0.88); margin-top: 16px; max-width: 560px; }
.lf-product-final__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  flex-wrap: wrap;
}
.lf-product-final__inner > div { flex: 1 1 360px; }

/* ----- Hide legacy WC bits the redesign doesn't use ----- */
.lf-product-main .woocommerce-tabs,
.lf-product-main .related.products,
.lf-product-main .up-sells { display: none; }

/* ============================================================
   CHECKOUT + CART — Little Fairy design-system overrides on top
   of the [woocommerce_checkout] / [woocommerce_cart] shortcodes
============================================================ */
.lf-checkout-hero {
  padding-top: 140px;
  padding-bottom: 8px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(234,182,216,0.30), transparent 55%),
    radial-gradient(ellipse at 88% 10%, rgba(201,161,214,0.28), transparent 55%),
    linear-gradient(180deg, var(--lf-paper) 0%, var(--lf-lavender-mist) 100%);
  text-align: center;
}
.lf-checkout-hero .lf-section-head { max-width: 760px; margin: 0 auto; }
.lf-checkout-hero .lf-lead { max-width: 600px; margin: 18px auto 0; }

.lf-checkout-page {
  padding-top: clamp(36px, 5vw, 56px);
  padding-bottom: clamp(64px, 8vw, 110px);
  background: var(--lf-paper);
}

/* ----- Two-column layout -----
   WC checkout's <form.woocommerce-checkout> renders 3+ direct children:
     #customer_details           (billing + shipping wrapper)
     <h3 id="order_review_heading">
     <div id="order_review">     (table + payment + place-order)
   Auto-flow stacks them vertically. We place customer-details on the
   left and the heading + order-review block on the right column. */
.lf-checkout-page .woocommerce { width: 100%; }
/* Float-based two-column layout: customer_details left, heading+order_review
   stacked on the right. Floats keep the right-column items hugging each
   other regardless of how tall customer_details grows. */
.lf-checkout-page form.woocommerce-checkout {
  display: block;
}
.lf-checkout-page form.woocommerce-checkout::after {
  content: ""; display: table; clear: both;
}
.lf-checkout-page form.woocommerce-checkout > #customer_details {
  float: left;
  width: calc(52.5% - 14px);
  margin-bottom: 24px;
}
.lf-checkout-page form.woocommerce-checkout > #order_review_heading {
  float: right;
  clear: right;
  width: calc(47.5% - 14px);
  margin: 0 0 22px;
}
.lf-checkout-page form.woocommerce-checkout > #order_review,
.lf-checkout-page form.woocommerce-checkout > .woocommerce-checkout-review-order {
  float: right;
  clear: right;
  width: calc(47.5% - 14px);
}
/* Inner billing / shipping wrapper inside #customer_details */
.lf-checkout-page .col2-set,
.lf-checkout-page .col2-set .col-1,
.lf-checkout-page .col2-set .col-2 {
  width: 100%; max-width: none; float: none; margin: 0;
}
.lf-checkout-page .col2-set { display: grid; gap: clamp(20px, 2.5vw, 32px); }

@media (max-width: 880px) {
  .lf-checkout-page form.woocommerce-checkout > #customer_details,
  .lf-checkout-page form.woocommerce-checkout > #order_review_heading,
  .lf-checkout-page form.woocommerce-checkout > #order_review,
  .lf-checkout-page form.woocommerce-checkout > .woocommerce-checkout-review-order {
    float: none;
    clear: none;
    width: 100%;
  }
}

/* ----- Cards (billing/shipping/order review) ----- */
.lf-checkout-page .woocommerce-billing-fields,
.lf-checkout-page .woocommerce-shipping-fields,
.lf-checkout-page .woocommerce-additional-fields,
.lf-checkout-page #order_review_heading + #order_review,
.lf-checkout-page .cart_totals,
.lf-checkout-page .cart-collaterals,
.lf-checkout-page .woocommerce-cart-form {
  background: linear-gradient(180deg, #ffffff 0%, var(--lf-cream) 100%);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-lg);
  padding: clamp(22px, 3vw, 36px);
  box-shadow: var(--lf-shadow-sm);
}

/* Sticky disabled — incompatible with the float-based layout above. */

/* ----- Section headings ----- */
.lf-checkout-page h3,
.lf-checkout-page #order_review_heading,
.lf-checkout-page .cart_totals h2,
.lf-checkout-page .cross-sells h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--lf-lavender-deep);
  letter-spacing: var(--ls-tight);
  margin: 0 0 22px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--lf-line-gold);
  position: relative;
}
.lf-checkout-page h3::before,
.lf-checkout-page #order_review_heading::before,
.lf-checkout-page .cart_totals h2::before {
  content: "✦";
  color: var(--lf-gold);
  margin-right: 10px;
  font-size: 0.7em;
  vertical-align: middle;
}

/* ----- Form fields ----- */
.lf-checkout-page .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
}
.lf-checkout-page .form-row label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lf-lavender-deep);
  margin: 0;
}
.lf-checkout-page .form-row label .required,
.lf-checkout-page .form-row label .optional { color: var(--lf-gold); }

.lf-checkout-page .woocommerce-input-wrapper { width: 100%; }
.lf-checkout-page input[type="text"],
.lf-checkout-page input[type="email"],
.lf-checkout-page input[type="tel"],
.lf-checkout-page input[type="password"],
.lf-checkout-page input[type="number"],
.lf-checkout-page input[type="url"],
.lf-checkout-page textarea,
.lf-checkout-page select,
.lf-checkout-page .select2-selection {
  display: block;
  width: 100% !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--lf-ink) !important;
  background: #fff !important;
  border: 1.5px solid var(--lf-line) !important;
  border-radius: var(--lf-radius-md) !important;
  padding: 14px 18px !important;
  height: auto !important;
  min-height: 52px !important;
  box-shadow: none !important;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  outline: none !important;
}
.lf-checkout-page textarea { min-height: 120px !important; line-height: 1.55 !important; }
.lf-checkout-page input:focus,
.lf-checkout-page textarea:focus,
.lf-checkout-page select:focus,
.lf-checkout-page .select2-container--focus .select2-selection {
  border-color: var(--lf-gold) !important;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.18) !important;
}

/* Select2 (WC's country/state dropdown) */
.lf-checkout-page .select2-selection { display: flex !important; align-items: center !important; padding: 6px 18px !important; }
.lf-checkout-page .select2-selection__rendered { color: var(--lf-ink) !important; line-height: 1.4 !important; padding: 0 !important; }
.lf-checkout-page .select2-selection__arrow { height: 100% !important; right: 14px !important; }
.lf-checkout-page .select2-selection__arrow b {
  border-color: var(--lf-lavender-deep) transparent transparent transparent !important;
}
.select2-dropdown {
  border: 1.5px solid var(--lf-line) !important;
  border-radius: var(--lf-radius-md) !important;
  box-shadow: var(--lf-shadow-md) !important;
  overflow: hidden;
}
.select2-results__option--highlighted {
  background: var(--lf-lavender-mist) !important;
  color: var(--lf-lavender-deep) !important;
}

/* Checkboxes */
.lf-checkout-page .woocommerce-form__label-for-checkbox,
.lf-checkout-page #ship-to-different-address label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 15px;
  letter-spacing: 0; text-transform: none;
  color: var(--lf-ink); font-weight: 500;
  cursor: pointer;
}
.lf-checkout-page input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--lf-lavender-deep);
  border-radius: 4px; background: #fff;
  cursor: pointer; position: relative;
  flex-shrink: 0;
}
.lf-checkout-page input[type="checkbox"]:checked {
  background: var(--lf-gold); border-color: var(--lf-gold);
}
.lf-checkout-page input[type="checkbox"]:checked::after {
  content: ""; position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ----- Order review table (checkout right column) ----- */
.lf-checkout-page table.shop_table {
  width: 100%; border: 0; background: transparent;
  border-collapse: collapse; border-spacing: 0;
  margin: 0;
}
.lf-checkout-page table.shop_table th,
.lf-checkout-page table.shop_table td {
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--lf-line);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--lf-ink);
  vertical-align: middle;
  background: transparent;
}
.lf-checkout-page table.shop_table thead th {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lf-lavender-deep);
  font-weight: 600;
  padding-bottom: 12px;
}
.lf-checkout-page table.shop_table tfoot th,
.lf-checkout-page table.shop_table .order-total th,
.lf-checkout-page table.shop_table .order-total td {
  font-family: var(--font-display);
  color: var(--lf-lavender-deep);
  font-weight: 600;
  font-size: 18px;
}
.lf-checkout-page table.shop_table .order-total .amount {
  color: var(--lf-gold);
  font-size: 22px;
}
.lf-checkout-page table.shop_table .product-name strong { font-weight: 600; }
.lf-checkout-page table.shop_table .product-name .product-quantity {
  font-family: var(--font-body); font-size: 13px;
  color: var(--lf-ink-soft); margin-left: 6px;
}
.lf-checkout-page table.shop_table tr:last-child td,
.lf-checkout-page table.shop_table tr:last-child th { border-bottom: 0; }

/* ----- Payment box ----- */
.lf-checkout-page #payment,
.lf-checkout-page .woocommerce-checkout-payment {
  background: transparent !important;
  border: 0;
  margin: 22px 0 0;
  padding: 0;
}
.lf-checkout-page #payment ul.payment_methods {
  list-style: none;
  padding: 0; margin: 0 0 18px;
  border: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.lf-checkout-page #payment ul.payment_methods li {
  background: #fff;
  border: 1.5px solid var(--lf-line);
  border-radius: var(--lf-radius-md);
  padding: 16px 18px;
  margin: 0;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.lf-checkout-page #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--lf-gold);
  background: linear-gradient(180deg, #fff, var(--lf-cream));
}
.lf-checkout-page #payment ul.payment_methods label {
  font-family: var(--font-body); font-weight: 600;
  font-size: 15px; letter-spacing: 0; text-transform: none;
  color: var(--lf-ink); margin: 0 0 0 6px;
  cursor: pointer;
}
.lf-checkout-page #payment input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 2px solid var(--lf-lavender-deep);
  border-radius: 50%; background: #fff;
  margin-right: 6px;
  position: relative; vertical-align: middle;
  cursor: pointer;
}
.lf-checkout-page #payment input[type="radio"]:checked {
  border-color: var(--lf-gold);
}
.lf-checkout-page #payment input[type="radio"]:checked::after {
  content: ""; position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--lf-gold);
}
.lf-checkout-page .payment_box {
  background: var(--lf-lavender-mist) !important;
  border-radius: var(--lf-radius-md) !important;
  padding: 14px 18px !important;
  margin: 14px 0 0 !important;
  color: var(--lf-ink-soft) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.lf-checkout-page .payment_box::before { display: none !important; }

.lf-checkout-page .woocommerce-terms-and-conditions-wrapper {
  margin: 18px 0;
  padding: 16px 18px;
  background: var(--lf-cream);
  border: 1px dashed var(--lf-line-gold);
  border-radius: var(--lf-radius-md);
}

/* ----- Terms & Conditions accept checkbox (make the box clearly visible) ----- */
.lf-checkout-page .woocommerce-terms-and-conditions-wrapper .terms-and-conditions {
  margin: 0;
}
.lf-checkout-page .form-row.validate-required label.checkbox,
.lf-checkout-page .woocommerce-terms-and-conditions-wrapper label.checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--lf-ink);
  margin: 0;
}
.lf-checkout-page #terms,
.lf-checkout-page input#terms[type="checkbox"],
.lf-checkout-page .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 1px 0 0 0 !important;
  padding: 0;
  background: #fff;
  border: 2px solid var(--lf-gold) !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.lf-checkout-page #terms:hover,
.lf-checkout-page .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:hover {
  border-color: var(--lf-gold) !important;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.18);
}
.lf-checkout-page #terms:checked,
.lf-checkout-page .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked {
  background: var(--lf-gold) !important;
  background-image: linear-gradient(135deg, var(--lf-gold-soft) 0%, var(--lf-gold) 70%, #B98F1F 100%) !important;
  background-color: var(--lf-gold) !important;
  border-color: var(--lf-gold) !important;
}
.lf-checkout-page #terms:checked::after,
.lf-checkout-page .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.lf-checkout-page .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
  display: inline;
}
.lf-checkout-page .woocommerce-terms-and-conditions-wrapper a {
  color: var(--lf-lavender-deep);
  font-weight: 600;
  border-bottom: 1px solid var(--lf-gold);
}
.lf-checkout-page .woocommerce-terms-and-conditions-wrapper .required {
  color: var(--lf-gold);
  font-weight: 700;
  text-decoration: none;
}

/* ----- Place order / proceed to checkout buttons ----- */
.lf-checkout-page #place_order,
.lf-checkout-page .checkout-button,
.lf-checkout-page .wc-proceed-to-checkout .button {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 100% !important;
  gap: 10px;
  font-family: var(--font-body) !important;
  font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 20px 36px !important;
  background: linear-gradient(135deg, var(--lf-gold-soft) 0%, var(--lf-gold) 60%, #B98F1F 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--lf-radius-pill) !important;
  box-shadow: var(--lf-shadow-gold-glow) !important;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out) !important;
  margin-top: 8px !important;
  position: relative; overflow: hidden;
}
.lf-checkout-page #place_order:hover,
.lf-checkout-page .checkout-button:hover,
.lf-checkout-page .wc-proceed-to-checkout .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(212,175,55,0.45) !important;
}

/* ----- Coupon / login slide-down notices ----- */
.lf-checkout-page .woocommerce-info,
.lf-checkout-page .woocommerce-message,
.lf-checkout-page .woocommerce-error,
.lf-checkout-page .woocommerce-notice {
  background: var(--lf-lavender-mist) !important;
  border: 1px solid var(--lf-line-gold);
  border-left: 4px solid var(--lf-gold) !important;
  color: var(--lf-ink) !important;
  border-radius: var(--lf-radius-md) !important;
  padding: 16px 22px !important;
  margin: 0 0 24px !important;
  font-family: var(--font-body);
  font-size: 15px;
}
.lf-checkout-page .woocommerce-info::before,
.lf-checkout-page .woocommerce-message::before,
.lf-checkout-page .woocommerce-error::before,
.lf-checkout-page .woocommerce-notice::before { display: none !important; }
.lf-checkout-page .woocommerce-info a,
.lf-checkout-page .woocommerce-message a {
  color: var(--lf-lavender-deep);
  border-bottom: 1px solid var(--lf-gold);
}
.lf-checkout-page .showcoupon,
.lf-checkout-page .showlogin { color: var(--lf-gold) !important; font-weight: 600; }

.lf-checkout-page form.checkout_coupon,
.lf-checkout-page form.login {
  background: #fff;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-md);
  padding: 22px;
  margin: 0 0 22px !important;
}
.lf-checkout-page form.checkout_coupon .button,
.lf-checkout-page form.login .button {
  background: transparent !important;
  color: var(--lf-lavender-deep) !important;
  border: 1.5px solid var(--lf-lavender-deep) !important;
  border-radius: var(--lf-radius-pill) !important;
  padding: 12px 26px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.lf-checkout-page form.checkout_coupon .button:hover,
.lf-checkout-page form.login .button:hover {
  background: var(--lf-lavender-deep) !important; color: #fff !important;
}

/* ============================================================
   CART PAGE
============================================================ */
.lf-cart-page table.shop_table_responsive,
.lf-cart-page table.cart {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: transparent;
  margin-bottom: 28px;
}
.lf-cart-page table.cart thead th {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lf-lavender-deep);
  padding: 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lf-line-gold);
  text-align: left;
}
.lf-cart-page table.cart tbody td {
  padding: 18px 14px;
  border: 0;
  border-bottom: 1px solid var(--lf-line);
  vertical-align: middle;
  background: transparent;
  font-family: var(--font-body);
  color: var(--lf-ink);
}
.lf-cart-page table.cart tbody tr:last-child td { border-bottom: 0; }
/* Reserve column widths so the thumbnail cell can't collapse */
.lf-cart-page table.cart th.product-remove,
.lf-cart-page table.cart td.product-remove { width: 52px; text-align: center; }
.lf-cart-page table.cart th.product-thumbnail,
.lf-cart-page table.cart td.product-thumbnail { width: 96px; }
.lf-cart-page table.cart th.product-price,
.lf-cart-page table.cart td.product-price { width: 110px; }
.lf-cart-page table.cart th.product-quantity,
.lf-cart-page table.cart td.product-quantity { width: 120px; }
.lf-cart-page table.cart th.product-subtotal,
.lf-cart-page table.cart td.product-subtotal { width: 120px; text-align: right; }
.lf-cart-page td.product-thumbnail img {
  width: 80px !important; height: 80px !important;
  min-width: 80px; max-width: none !important;
  object-fit: cover;
  border-radius: var(--lf-radius-sm);
  border: 1px solid var(--lf-line);
}
.lf-cart-page td.product-name a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--lf-lavender-deep);
}
.lf-cart-page td.product-name a:hover { color: var(--lf-gold); }
.lf-cart-page td.product-price,
.lf-cart-page td.product-subtotal { color: var(--lf-ink); font-weight: 600; }
.lf-cart-page td.product-subtotal .amount { color: var(--lf-gold); font-size: 17px; }
.lf-cart-page td.product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--lf-lavender-mist);
  color: var(--lf-lavender-deep) !important;
  text-decoration: none;
  font-size: 20px; font-weight: 400 !important;
  line-height: 1;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.lf-cart-page td.product-remove a.remove:hover { background: var(--lf-lavender-deep); color: #fff !important; }

/* Cart quantity field */
.lf-cart-page td.product-quantity .quantity { display: inline-flex; align-items: center; }
.lf-cart-page td.product-quantity input.qty {
  width: 70px !important;
  text-align: center;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--lf-lavender-deep) !important;
  border: 1.5px solid var(--lf-line) !important;
  border-radius: var(--lf-radius-pill) !important;
  padding: 10px !important;
  background: #fff !important;
}
.lf-cart-page td.product-quantity input.qty:focus {
  border-color: var(--lf-gold) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}

/* Coupon + Update Cart row — FLOAT layout inside the table-cell.
   IMPORTANT: the .actions element is a <td>. WebKit/Safari (and some others) IGNORE
   `display:flex`/`display:block` on table-cell elements, so a flex-on-<td> approach
   silently fell back to the legacy WooCommerce floats and piled the coupon input,
   Apply coupon and Update cart on top of each other. The robust cross-browser fix is
   to NOT touch the td's display at all and lay the children out with floats:
     - .coupon group floats left (and is itself a flex row: input + Apply side by side)
     - Update cart floats right
     - a real clearfix ::after contains the floats so the cell wraps them.
   Floats are honoured on td children in every browser. */
.lf-cart-page .cart td.actions {
  padding: 18px 14px 0;
  border-top: 1px solid var(--lf-line);
  text-align: left;
}
.lf-cart-page .cart td.actions::before { content: none !important; display: none !important; }
.lf-cart-page .cart td.actions::after { content: "" !important; display: table !important; clear: both !important; }
.lf-cart-page .cart td.actions .clear,
.lf-cart-page .cart td.actions .coupon .clear,
.lf-cart-page .cart td.actions br { display: none !important; }

/* Coupon group: float left, flex row for input + Apply button */
.lf-cart-page .cart td.actions .coupon {
  float: left !important;
  display: flex !important;
  gap: 10px;
  align-items: center;
  max-width: 100%;
}
.lf-cart-page .cart td.actions .coupon .input-text {
  float: none !important;
  width: 220px; max-width: 50vw; min-width: 130px;
  padding: 12px 18px !important;
  border: 1.5px solid var(--lf-line) !important;
  border-radius: var(--lf-radius-pill) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  background: #fff !important;
  outline: none !important;
}
.lf-cart-page .cart td.actions .coupon .input-text:focus {
  border-color: var(--lf-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.18) !important;
}

/* Update Cart: float to the far right */
.lf-cart-page .cart td.actions button[name="update_cart"] { float: right !important; }

/* Shared button styling */
.lf-cart-page .cart td.actions .button[name="apply_coupon"],
.lf-cart-page .cart td.actions .button[name="update_cart"] {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--lf-lavender-deep) !important;
  border: 1.5px solid var(--lf-lavender-deep) !important;
  border-radius: var(--lf-radius-pill) !important;
  padding: 12px 26px !important;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.lf-cart-page .cart td.actions .button[name="apply_coupon"]:hover,
.lf-cart-page .cart td.actions .button[name="update_cart"]:hover {
  background: var(--lf-lavender-deep) !important; color: #fff !important;
}
.lf-cart-page .cart td.actions button[name="update_cart"]:disabled {
  opacity: 0.45; cursor: not-allowed;
}
.lf-cart-page .cart td.actions button[name="update_cart"]:disabled:hover {
  background: transparent !important; color: var(--lf-lavender-deep) !important;
}

/* Mobile: stack coupon group above a full-width Update Cart */
@media (max-width: 600px) {
  .lf-cart-page .cart td.actions .coupon { float: none !important; margin-bottom: 12px; }
  .lf-cart-page .cart td.actions .coupon .input-text { flex: 1 1 auto; max-width: none; }
  .lf-cart-page .cart td.actions button[name="update_cart"] { float: none !important; display: block; width: 100%; }
}

/* ----- Cart page: table LEFT, totals card RIGHT (2-col on desktop) ----- */
@media (min-width: 880px) {
  .lf-cart-page .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 36px;
    align-items: start;
  }
  .lf-cart-page .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .lf-cart-page .woocommerce-cart-form { grid-column: 1; margin: 0; min-width: 0; }
  .lf-cart-page .cart-collaterals { grid-column: 2; }
  /* Lock the table to its grid cell: fixed layout makes width:100% authoritative
     (auto layout treats 100% as a minimum, letting the table overflow at wide viewports) */
  .lf-cart-page table.cart { table-layout: fixed; width: 100%; }
}

/* Cart totals card on the right */
.lf-cart-page .cart-collaterals {
  display: block;
  margin-top: 0;
  width: auto;
}
.lf-cart-page .cart_totals {
  width: 100% !important;
  background: #fff;
  border: 1px solid var(--lf-line-gold);
  border-radius: var(--lf-radius-lg);
  padding: 22px 24px 26px;
}
.lf-cart-page .cart_totals .shop_table th,
.lf-cart-page .cart_totals .shop_table td {
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--lf-line);
}
.lf-cart-page .cart_totals .order-total th,
.lf-cart-page .cart_totals .order-total td {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  color: var(--lf-lavender-deep);
  border-bottom: 0;
  padding-top: 16px;
}
.lf-cart-page .cart_totals .order-total .amount { color: var(--lf-gold); font-size: 22px; }

/* Cross-sells (Woo's "you might also like") on the cart page */
.lf-cart-page .cross-sells {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--lf-line);
}
.lf-cart-page .cross-sells .products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 24px;
  list-style: none; padding: 0; margin: 0;
}

/* Empty cart */
.lf-checkout-page .cart-empty,
.lf-checkout-page .woocommerce-info.cart-empty {
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--lf-cream) 100%) !important;
  border: 1px dashed var(--lf-line-gold) !important;
  border-radius: var(--lf-radius-lg) !important;
  padding: 56px 24px !important;
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  color: var(--lf-lavender-deep) !important;
  border-left: 1px dashed var(--lf-line-gold) !important;
}
.lf-checkout-page .return-to-shop { text-align: center; margin-top: 22px; }

/* Pull WooCommerce's hidden tax info / small print into a softer tone */
.lf-checkout-page .woocommerce-checkout small,
.lf-checkout-page .woocommerce small,
.lf-checkout-page small.includes_tax { color: var(--lf-ink-soft); font-size: 12px; }