/** Shopify CDN: Minification failed

Line 7444:14 Expected identifier but found whitespace
Line 7444:15 Unexpected "3px"
Line 7685:0 Expected "}" to go with "{"

**/
/* ═══════════════════════════════════════════════
   ARSHE PERFUMES — WHITE LUXURY EDITION
   Pure White • Matte Black • Cinematic 3D Background
   ═══════════════════════════════════════════════ */

:root {
  /* ═══ ARSHÉ WARM LUXURY PALETTE ═══ */

  /* Warm Neutral Backgrounds */
  --arshe-ivory: #FFFFFF;          /* Warm ivory - primary bg */
  --arshe-ivory-light: #F7F7F7;    /* Lighter ivory */
  --arshe-cream: #EEEEEE;          /* Softer cream */
  --arshe-sand: #D9D9D9;           /* Sand accent */
  --arshe-champagne: #EEEEEE;      /* Champagne satin */
  --arshe-beige: #B8B8B8;          /* Deeper beige */

  /* Text & Accents */
  --arshe-black: #111111;          /* Deep black */
  --arshe-black-soft: #171717;     /* Softer black */
  --arshe-charcoal: #444444;       /* Warm charcoal */
  --arshe-muted: #666666;          /* Muted brown-gray */
  --arshe-light: #B8B8B8;          /* Light warm gray */

  /* Gold Accent (use sparingly) */
  --arshe-gold: #666666;           /* Antique gold */
  --arshe-gold-light: #B8B8B8;     /* Soft gold */

  /* Lines & Borders */
  --arshe-line: rgba(17, 17, 17, 0.08);
  --arshe-line-strong: rgba(17, 17, 17, 0.15);

  /* Shadows */
  --arshe-shadow-sm: 0 4px 20px rgba(43, 41, 38, 0.06);
  --arshe-shadow-md: 0 15px 40px rgba(43, 41, 38, 0.1);
  --arshe-shadow-lg: 0 30px 80px rgba(43, 41, 38, 0.15);

  /* LEGACY MAPPING (keep old code working) */
  --luxe-white: #FFFFFF;
  --luxe-white-soft: #F7F7F7;
  --luxe-white-warm: #FFFFFF;
  --luxe-gray-light: #EEEEEE;
  --luxe-gray-mid: #EEEEEE;
  --luxe-gray-border: #D9D9D9;
  --luxe-black: #111111;
  --luxe-black-pure: #000000;
  --luxe-black-soft: #171717;
  --luxe-text-primary: #111111;
  --luxe-text-secondary: #444444;
  --luxe-text-muted: #666666;
  --luxe-text-light: #B8B8B8;
  --luxe-line: rgba(17, 17, 17, 0.08);
  --luxe-line-strong: rgba(17, 17, 17, 0.15);
  --luxe-line-subtle: rgba(17, 17, 17, 0.04);
  --luxe-shadow-sm: 0 4px 20px rgba(43, 41, 38, 0.06);
  --luxe-shadow-md: 0 15px 40px rgba(43, 41, 38, 0.1);
  --luxe-shadow-lg: 0 30px 80px rgba(43, 41, 38, 0.15);

  /* Typography */
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --container: 1400px;

  /* Transitions */
  --ease-luxe: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-power: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════
   🎬  CINEMATIC 3D MOVING BACKGROUND
   Covers entire viewport ALWAYS while scrolling
   ═══════════════════════════════════════════════ */

.luxe-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -100 !important;
  overflow: hidden !important;
  background: var(--luxe-white) !important;
  perspective: 1500px;
  transform-style: preserve-3d;
  pointer-events: none !important;
}

/* Ambient gradient layer */
.luxe-bg::before {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(0, 0, 0, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(0, 0, 0, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.02) 0%, transparent 60%);
  animation: ambientFlow 30s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes ambientFlow {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  33% {
    transform: translate3d(-40px, 60px, 20px) rotate(3deg);
  }
  66% {
    transform: translate3d(60px, -40px, -20px) rotate(-3deg);
  }
}

/* Large cinematic blobs */
.luxe-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: block !important;
  transform-style: preserve-3d;
}

.luxe-particle {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
  pointer-events: none;
}

.luxe-particle:nth-child(1) {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.09) 0%, transparent 70%);
  top: -20%;
  left: -15%;
  animation: cinematicMove1 30s ease-in-out infinite;
}

.luxe-particle:nth-child(2) {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.07) 0%, transparent 70%);
  top: 15%;
  right: -20%;
  animation: cinematicMove2 35s ease-in-out infinite;
}

.luxe-particle:nth-child(3) {
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.08) 0%, transparent 70%);
  bottom: -25%;
  left: 25%;
  animation: cinematicMove3 40s ease-in-out infinite;
}

.luxe-particle:nth-child(4) {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.06) 0%, transparent 70%);
  top: 45%;
  left: 35%;
  animation: cinematicMove4 45s ease-in-out infinite;
}

.luxe-particle:nth-child(5) {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.07) 0%, transparent 70%);
  top: 70%;
  right: 15%;
  animation: cinematicMove5 32s ease-in-out infinite;
}

.luxe-particle:nth-child(6) {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.06) 0%, transparent 70%);
  top: -10%;
  left: 50%;
  animation: cinematicMove1 38s ease-in-out infinite reverse;
}

/* Hide extra particles */
.luxe-particle:nth-child(n+7) {
  display: none;
}

/* Cinematic 3D movements */
@keyframes cinematicMove1 {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  25% {
    transform: translate3d(250px, 150px, 100px) scale(1.2) rotate(60deg);
  }
  50% {
    transform: translate3d(500px, 350px, -80px) scale(0.85) rotate(120deg);
  }
  75% {
    transform: translate3d(200px, 250px, 50px) scale(1.1) rotate(60deg);
  }
}

@keyframes cinematicMove2 {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate3d(-300px, 250px, -100px) scale(1.25) rotate(-80deg);
  }
  66% {
    transform: translate3d(-200px, 500px, 80px) scale(0.8) rotate(-140deg);
  }
}

@keyframes cinematicMove3 {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate3d(350px, -400px, 120px) scale(1.35) rotate(180deg);
  }
}

@keyframes cinematicMove4 {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  20% {
    transform: translate3d(-250px, -200px, 60px) scale(1.15) rotate(40deg);
  }
  40% {
    transform: translate3d(-500px, 150px, -50px) scale(0.9) rotate(80deg);
  }
  60% {
    transform: translate3d(-250px, 400px, 70px) scale(1.2) rotate(120deg);
  }
  80% {
    transform: translate3d(150px, 250px, -60px) scale(0.85) rotate(160deg);
  }
}

@keyframes cinematicMove5 {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-400px, -500px, 100px) scale(1.3);
  }
}

.luxe-vignette {
  display: none;
}

/* ═══════════════════════════════════════════════
   📌  TRANSPARENT HEADER
   ═══════════════════════════════════════════════ */

.arshe-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 24px 40px;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: all 0.5s var(--ease-luxe);
}

.arshe-header.scrolled {
  padding: 16px 40px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--luxe-line);
}

.arshe-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
}

.arshe-header__nav-left {
  display: none;
  gap: 40px;
  align-items: center;
}

.arshe-header__logo {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 10px;
  color: var(--luxe-black);
  text-transform: uppercase;
  text-align: center;
  transition: color 0.4s var(--ease-luxe);
  text-decoration: none;
  display: inline-block;
}

.arshe-header__logo:hover {
  color: var(--luxe-black-pure);
}

.arshe-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.arshe-nav-link {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--luxe-text-primary);
  padding: 8px 0;
  position: relative;
  transition: color 0.4s var(--ease-luxe);
}

.arshe-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--luxe-black);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-luxe);
}

.arshe-nav-link:hover {
  color: var(--luxe-black-pure);
}

.arshe-nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.arshe-icon-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--luxe-text-primary);
  border-radius: 50%;
  position: relative;
  transition: all 0.4s var(--ease-luxe);
}

.arshe-icon-btn:hover {
  color: var(--luxe-black-pure);
  background: rgba(0, 0, 0, 0.05);
}

.arshe-icon-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.25;
}

.arshe-cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--luxe-black);
  color: var(--luxe-white);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arshe-menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  cursor: pointer;
}

.arshe-menu-toggle span {
  height: 1px;
  background: var(--luxe-black);
  transition: all 0.3s var(--ease-luxe);
}

@media (min-width: 900px) {
  .arshe-header__nav-left { display: flex; }
  .arshe-menu-toggle { display: none; }
}

@media (max-width: 899px) {
  .arshe-header { padding: 18px 20px; }
  .arshe-header.scrolled { padding: 14px 20px; }
  .arshe-header__logo { font-size: 18px; letter-spacing: 6px; }
  .arshe-header__actions { gap: 8px; }
}

/* ═══════════════════════════════════════════════
   ✨  HERO SECTION
   ═══════════════════════════════════════════════ */

.luxe-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 20px 80px;
  position: relative;
  background: transparent;
}

.luxe-hero__video-bg,
.luxe-hero__overlay {
  display: none;
}

.luxe-hero__content {
  max-width: 1000px;
  position: relative;
  z-index: 2;
}

.luxe-hero__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
}

.luxe-hero__ornament-line {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--luxe-black), transparent);
}

.luxe-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--luxe-text-primary);
}

.luxe-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(70px, 16vw, 220px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: 8px;
  color: var(--luxe-black);
  margin-bottom: 32px;
  text-transform: uppercase;
}

.luxe-hero__title-line {
  display: block;
  overflow: hidden;
}

.luxe-hero__title-word {
  display: inline-block;
  transform: translateY(120%);
  animation: wordReveal 1.2s var(--ease-power) forwards;
}

.luxe-hero__title-word--delay-1 { animation-delay: 0.2s; }
.luxe-hero__title-word--delay-2 { animation-delay: 0.5s; }

.luxe-hero__title-accent {
  display: block;
  overflow: hidden;
}

.luxe-hero__title-accent-word {
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  color: var(--luxe-black);
  letter-spacing: 12px;
  transform: translateY(120%);
  animation: wordReveal 1.2s var(--ease-power) 0.8s forwards;
}

@keyframes wordReveal {
  to { transform: translateY(0); }
}

.luxe-hero__tagline {
  font-family: var(--font-serif);
  font-size: clamp(18px, 3vw, 28px);
  font-style: italic;
  color: var(--luxe-text-secondary);
  margin-bottom: 56px;
  letter-spacing: 6px;
  font-weight: 300;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-luxe) 1.3s forwards;
}

.luxe-hero__tagline::before,
.luxe-hero__tagline::after {
  content: '·';
  color: var(--luxe-black);
  margin: 0 20px;
  font-style: normal;
}

.luxe-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 22px 52px;
  background: transparent;
  border: 1px solid var(--luxe-black);
  color: var(--luxe-black);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 5px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.6s var(--ease-luxe);
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-luxe) 1.6s forwards;
}

.luxe-btn__fill {
  position: absolute;
  inset: 0;
  background: var(--luxe-black);
  transform: translateY(101%);
  transition: transform 0.6s var(--ease-luxe);
  z-index: 0;
}

.luxe-btn:hover .luxe-btn__fill {
  transform: translateY(0);
}

.luxe-btn:hover {
  color: var(--luxe-white);
}

.luxe-btn > * {
  position: relative;
  z-index: 1;
}

.luxe-btn__arrow {
  width: 24px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.5s var(--ease-luxe);
}

.luxe-btn__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.luxe-btn:hover .luxe-btn__arrow {
  width: 36px;
}

.luxe-hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--luxe-text-muted);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  z-index: 2;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-luxe) 2s forwards;
}

.luxe-hero__scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, var(--luxe-black), transparent);
  animation: scrollPulse 2.5s ease-in-out infinite;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.4); opacity: 0.3; }
}

/* ═══════════════════════════════════════════════
   🎁  3D DISCOVERY SET
   ═══════════════════════════════════════════════ */

.luxe-discovery {
  position: relative;
  padding: 160px 20px;
  overflow: hidden;
  perspective: 2000px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: transparent;
}

.luxe-discovery__container {
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.luxe-discovery__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.luxe-discovery__spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--luxe-black);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  opacity: 0;
}

.luxe-discovery__spark:nth-child(1) { top: 20%; left: 15%; animation: sparkFloat 8s ease-in-out infinite; }
.luxe-discovery__spark:nth-child(2) { top: 30%; left: 85%; animation: sparkFloat 10s ease-in-out infinite 1s; }
.luxe-discovery__spark:nth-child(3) { top: 60%; left: 20%; animation: sparkFloat 9s ease-in-out infinite 2s; }
.luxe-discovery__spark:nth-child(4) { top: 70%; left: 75%; animation: sparkFloat 11s ease-in-out infinite 3s; }
.luxe-discovery__spark:nth-child(5) { top: 45%; left: 50%; animation: sparkFloat 7s ease-in-out infinite 4s; }
.luxe-discovery__spark:nth-child(6) { top: 15%; left: 60%; animation: sparkFloat 12s ease-in-out infinite 5s; }
.luxe-discovery__spark:nth-child(7) { top: 80%; left: 40%; animation: sparkFloat 9s ease-in-out infinite 2s; }
.luxe-discovery__spark:nth-child(8) { top: 25%; left: 40%; animation: sparkFloat 10s ease-in-out infinite 6s; }
.luxe-discovery__spark:nth-child(9) { top: 55%; left: 90%; animation: sparkFloat 8s ease-in-out infinite 4s; }
.luxe-discovery__spark:nth-child(10) { top: 75%; left: 10%; animation: sparkFloat 11s ease-in-out infinite 3s; }

@keyframes sparkFloat {
  0%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  20% {
    opacity: 1;
    transform: translate(20px, -30px) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-15px, -60px) scale(1.5);
  }
  80% {
    opacity: 0.5;
    transform: translate(30px, -80px) scale(0.8);
  }
}

.luxe-discovery__visual {
  position: relative;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  perspective: 1500px;
  cursor: pointer;
}

.luxe-discovery__scene {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.luxe-discovery__box {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%) rotateX(60deg) translateZ(-40px);
  width: 80%;
  height: 30%;
  background: linear-gradient(180deg, #333 0%, #0A0A0A 100%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.3),
    inset 0 0 60px rgba(0, 0, 0, 0.4);
  transform-style: preserve-3d;
}

.luxe-discovery__box::before {
  content: 'ARSHE';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-60deg) translateZ(2px);
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: 8px;
  color: var(--luxe-white);
  opacity: 0.8;
}

.luxe-discovery__ribbon {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.3) 80%,
    transparent 100%);
  transform: translateY(-50%);
  animation: ribbonShimmer 3s ease-in-out infinite;
}

@keyframes ribbonShimmer {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.luxe-discovery__vials {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.luxe-discovery__vial {
  position: absolute;
  width: 60px;
  height: 180px;
  transform-style: preserve-3d;
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  cursor: pointer;
  opacity: 0;
  animation: vialRise 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.luxe-discovery__vial--1 { animation-delay: 0.1s; transform: translateX(-180px) translateY(20px) translateZ(-60px) rotateY(30deg); }
.luxe-discovery__vial--2 { animation-delay: 0.2s; transform: translateX(-120px) translateY(-10px) translateZ(-20px) rotateY(20deg); }
.luxe-discovery__vial--3 { animation-delay: 0.3s; transform: translateX(-60px) translateY(-25px) translateZ(20px) rotateY(10deg); }
.luxe-discovery__vial--4 { animation-delay: 0.4s; transform: translateX(0) translateY(-35px) translateZ(40px) rotateY(0); }
.luxe-discovery__vial--5 { animation-delay: 0.5s; transform: translateX(60px) translateY(-25px) translateZ(20px) rotateY(-10deg); }
.luxe-discovery__vial--6 { animation-delay: 0.6s; transform: translateX(120px) translateY(-10px) translateZ(-20px) rotateY(-20deg); }
.luxe-discovery__vial--7 { animation-delay: 0.7s; transform: translateX(180px) translateY(20px) translateZ(-60px) rotateY(-30deg); }

@keyframes vialRise {
  from { opacity: 0; }
  to { opacity: 1; }
}

.luxe-discovery__vial-cap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 30px;
  background: linear-gradient(180deg, #333 0%, #0A0A0A 100%);
  border-radius: 4px 4px 2px 2px;
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.3);
}

.luxe-discovery__vial-cap::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.luxe-discovery__vial-neck {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.luxe-discovery__vial-body {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 130px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(60, 40, 30, 0.5) 20%,
      rgba(40, 25, 15, 0.7) 60%,
      rgba(20, 15, 10, 0.9) 100%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px 4px 8px 8px;
  box-shadow:
    inset 3px 0 8px rgba(255, 255, 255, 0.2),
    inset -3px 0 8px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.luxe-discovery__vial-body::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 15%;
  width: 20%;
  height: 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
  border-radius: 50%;
}

.luxe-discovery__vial-body::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75%;
  background: linear-gradient(180deg,
    rgba(70, 45, 25, 0.6) 0%,
    rgba(30, 20, 10, 0.9) 100%);
}

.luxe-discovery__vial-label {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  padding: 4px 2px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--luxe-black);
  text-align: center;
  z-index: 2;
}

.luxe-discovery__vial-num {
  font-family: var(--font-serif);
  font-size: 9px;
  font-style: italic;
  color: var(--luxe-black);
  letter-spacing: 1px;
}

.luxe-discovery__vial-name {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  padding: 8px 14px;
  background: var(--luxe-black);
  color: var(--luxe-white);
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 2px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s var(--ease-luxe);
  z-index: 10;
}

.luxe-discovery__vial:hover .luxe-discovery__vial-name {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.luxe-discovery__vial:hover {
  z-index: 20;
}

.luxe-discovery__vial--1:hover { transform: translateX(-180px) translateY(-10px) translateZ(-60px) rotateY(30deg) scale(1.15); }
.luxe-discovery__vial--2:hover { transform: translateX(-120px) translateY(-40px) translateZ(-20px) rotateY(20deg) scale(1.15); }
.luxe-discovery__vial--3:hover { transform: translateX(-60px) translateY(-55px) translateZ(20px) rotateY(10deg) scale(1.15); }
.luxe-discovery__vial--4:hover { transform: translateX(0) translateY(-65px) translateZ(40px) rotateY(0) scale(1.15); }
.luxe-discovery__vial--5:hover { transform: translateX(60px) translateY(-55px) translateZ(20px) rotateY(-10deg) scale(1.15); }
.luxe-discovery__vial--6:hover { transform: translateX(120px) translateY(-40px) translateZ(-20px) rotateY(-20deg) scale(1.15); }
.luxe-discovery__vial--7:hover { transform: translateX(180px) translateY(-10px) translateZ(-60px) rotateY(-30deg) scale(1.15); }

.luxe-discovery__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.08) 0%, transparent 60%);
  filter: blur(40px);
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.luxe-discovery__content {
  padding: 40px 0;
}

.luxe-discovery__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--luxe-text-primary);
  margin-bottom: 24px;
}

.luxe-discovery__eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--luxe-black);
}

.luxe-discovery__title {
  font-family: var(--font-serif);
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 300;
  color: var(--luxe-black);
  letter-spacing: 3px;
  line-height: 1.05;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.luxe-discovery__title em {
  font-style: italic;
  color: var(--luxe-black);
}

.luxe-discovery__subtitle {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--luxe-text-secondary);
  margin-bottom: 40px;
  font-style: italic;
  line-height: 1.6;
}

.luxe-discovery__benefits {
  list-style: none;
  padding: 24px 0;
  margin: 40px 0;
  border-top: 1px solid var(--luxe-line);
  border-bottom: 1px solid var(--luxe-line);
}

.luxe-discovery__benefit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--luxe-text-primary);
  letter-spacing: 1px;
  font-weight: 300;
}

.luxe-discovery__check {
  width: 20px;
  height: 20px;
  border: 1px solid var(--luxe-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--luxe-black);
  flex-shrink: 0;
  font-size: 10px;
}

.luxe-discovery__pricing {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin: 32px 0;
  flex-wrap: wrap;
}

.luxe-discovery__price-old {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--luxe-text-muted);
  text-decoration: line-through;
  font-weight: 300;
}

.luxe-discovery__price-new {
  font-family: var(--font-serif);
  font-size: 56px;
  color: var(--luxe-black);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1;
}

.luxe-discovery__save {
  padding: 6px 14px;
  background: var(--luxe-black);
  color: var(--luxe-white);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
}

.luxe-discovery__urgency {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--luxe-black);
  letter-spacing: 2px;
}

.luxe-discovery__urgency-dot {
  width: 8px;
  height: 8px;
  background: var(--luxe-black);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

@media (max-width: 899px) {
  .luxe-discovery { padding: 100px 20px; }
  .luxe-discovery__visual { aspect-ratio: 1; max-width: 400px; margin: 0 auto; }
  .luxe-discovery__vial { width: 40px; height: 130px; }
  .luxe-discovery__vial-cap { width: 28px; height: 22px; }
  .luxe-discovery__vial-neck { top: 20px; width: 14px; }
  .luxe-discovery__vial-body { top: 25px; width: 32px; height: 95px; }
  .luxe-discovery__vial-label { bottom: 20px; width: 26px; }
  .luxe-discovery__vial-num { font-size: 8px; }
  .luxe-discovery__vial--1 { transform: translateX(-130px) translateY(15px) translateZ(-40px) rotateY(30deg); }
  .luxe-discovery__vial--2 { transform: translateX(-90px) translateY(-5px) translateZ(-15px) rotateY(20deg); }
  .luxe-discovery__vial--3 { transform: translateX(-45px) translateY(-20px) translateZ(15px) rotateY(10deg); }
  .luxe-discovery__vial--4 { transform: translateX(0) translateY(-25px) translateZ(30px) rotateY(0); }
  .luxe-discovery__vial--5 { transform: translateX(45px) translateY(-20px) translateZ(15px) rotateY(-10deg); }
  .luxe-discovery__vial--6 { transform: translateX(90px) translateY(-5px) translateZ(-15px) rotateY(-20deg); }
  .luxe-discovery__vial--7 { transform: translateX(130px) translateY(15px) translateZ(-40px) rotateY(-30deg); }
  .luxe-discovery__content { padding: 0; text-align: center; }
  .luxe-discovery__eyebrow::after { content: ''; width: 40px; height: 1px; background: var(--luxe-black); }
  .luxe-discovery__benefits { text-align: left; }
  .luxe-discovery__pricing { justify-content: center; }
}

@media (min-width: 900px) {
  .luxe-discovery__container { grid-template-columns: 1fr 1fr; gap: 100px; }
}

/* ═══════════════════════════════════════════════
   🎠  3D CAROUSEL
   ═══════════════════════════════════════════════ */

.luxe-carousel-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  background: transparent;
}

.luxe-carousel-header {
  text-align: center;
  margin-bottom: 60px;
  padding: 0 20px;
}

.luxe-carousel {
  position: relative;
  width: 100%;
  height: 700px;
  perspective: 2000px;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.luxe-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.luxe-carousel__slide {
  position: absolute;
  width: 320px;
  height: 560px;
  transition: all 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
  cursor: pointer;
  transform-style: preserve-3d;
  opacity: 0;
  pointer-events: none;
}

.luxe-carousel__slide.visible {
  opacity: 1;
  pointer-events: auto;
}

.luxe-carousel__slide.center { transform: translateX(0) translateZ(0) rotateY(0); z-index: 5; opacity: 1; }
.luxe-carousel__slide.left-1 { transform: translateX(-280px) translateZ(-200px) rotateY(35deg); z-index: 3; opacity: 0.7; }
.luxe-carousel__slide.left-2 { transform: translateX(-450px) translateZ(-400px) rotateY(45deg); z-index: 1; opacity: 0.35; }
.luxe-carousel__slide.right-1 { transform: translateX(280px) translateZ(-200px) rotateY(-35deg); z-index: 3; opacity: 0.7; }
.luxe-carousel__slide.right-2 { transform: translateX(450px) translateZ(-400px) rotateY(-45deg); z-index: 1; opacity: 0.35; }
.luxe-carousel__slide.hidden { transform: translateX(0) translateZ(-800px) rotateY(0); opacity: 0; pointer-events: none; }

.luxe-carousel__card {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--luxe-line);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.5s var(--ease-luxe);
}

.luxe-carousel__slide.center .luxe-carousel__card {
  border-color: var(--luxe-black);
  box-shadow: var(--luxe-shadow-lg);
}

.luxe-carousel__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-luxe);
  pointer-events: none;
}

.luxe-carousel__slide.center .luxe-carousel__card::before {
  opacity: 1;
}

.luxe-carousel__image {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--luxe-white-soft) 0%, var(--luxe-gray-mid) 100%);
}

.luxe-carousel__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.luxe-carousel__placeholder {
  text-align: center;
  padding: 20px;
  z-index: 1;
}

.luxe-carousel__placeholder-num {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--luxe-black);
  letter-spacing: 6px;
  margin-bottom: 30px;
  opacity: 0.7;
}

.luxe-carousel__placeholder-name {
  font-family: var(--font-serif);
  font-size: 36px;
  font-style: italic;
  color: var(--luxe-black);
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: 1.2;
}

.luxe-carousel__info {
  padding: 24px 20px;
  text-align: center;
  border-top: 1px solid var(--luxe-line);
  background: rgba(255, 255, 255, 0.95);
}

.luxe-carousel__number {
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  color: var(--luxe-text-muted);
  letter-spacing: 4px;
  margin-bottom: 8px;
}

.luxe-carousel__name {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--luxe-black);
  letter-spacing: 3px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.luxe-carousel__category {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--luxe-text-secondary);
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.luxe-carousel__price {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--luxe-black);
  letter-spacing: 2px;
}

.luxe-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
  padding: 0 20px;
}

.luxe-carousel__btn {
  width: 56px;
  height: 56px;
  border: 1px solid var(--luxe-line-strong);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  color: var(--luxe-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s var(--ease-luxe);
}

.luxe-carousel__btn:hover {
  background: var(--luxe-black);
  color: var(--luxe-white);
  border-color: var(--luxe-black);
  transform: scale(1.1);
}

.luxe-carousel__btn svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}

.luxe-carousel__dots {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
}

.luxe-carousel__dot {
  width: 32px;
  height: 2px;
  background: var(--luxe-line-strong);
  cursor: pointer;
  transition: all 0.4s var(--ease-luxe);
  border: none;
  padding: 0;
}

.luxe-carousel__dot:hover { background: var(--luxe-text-muted); }
.luxe-carousel__dot.active { background: var(--luxe-black); width: 48px; }

.luxe-carousel__hint {
  text-align: center;
  margin-top: 24px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--luxe-text-muted);
  opacity: 0.7;
}

.luxe-carousel__hint-arrow {
  display: inline-block;
  margin: 0 8px;
  color: var(--luxe-black);
}

.luxe-carousel__tap-hint {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 6px 14px;
  background: var(--luxe-black);
  color: var(--luxe-white);
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.5s var(--ease-luxe);
}

.luxe-carousel__slide.center .luxe-carousel__tap-hint {
  opacity: 1;
}

@media (max-width: 899px) {
  .luxe-carousel { height: 620px; perspective: 1500px; }
  .luxe-carousel__slide { width: 280px; height: 500px; }
  .luxe-carousel__slide.left-1 { transform: translateX(-200px) translateZ(-150px) rotateY(30deg); opacity: 0.5; }
  .luxe-carousel__slide.right-1 { transform: translateX(200px) translateZ(-150px) rotateY(-30deg); opacity: 0.5; }
  .luxe-carousel__slide.left-2, .luxe-carousel__slide.right-2 { opacity: 0; pointer-events: none; }
  .luxe-carousel__name { font-size: 20px; }
  .luxe-carousel__placeholder-name { font-size: 28px; }
  .luxe-carousel__btn { width: 48px; height: 48px; }
}

@media (max-width: 480px) {
  .luxe-carousel { height: 560px; }
  .luxe-carousel__slide { width: 260px; height: 460px; }
  .luxe-carousel__slide.left-1 { transform: translateX(-160px) translateZ(-120px) rotateY(28deg); opacity: 0.4; }
  .luxe-carousel__slide.right-1 { transform: translateX(160px) translateZ(-120px) rotateY(-28deg); opacity: 0.4; }
}

@media (min-width: 1200px) {
  .luxe-carousel__slide { width: 360px; height: 620px; }
  .luxe-carousel { height: 760px; }
}

/* ═══════════════════════════════════════════════
   COMMON SECTION STYLES
   ═══════════════════════════════════════════════ */

.luxe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--luxe-text-primary);
  margin-bottom: 24px;
}

.luxe-eyebrow::before,
.luxe-eyebrow::after {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--luxe-black);
}

.luxe-section-title {
  font-family: var(--font-serif);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 300;
  color: var(--luxe-black);
  letter-spacing: 4px;
  line-height: 1;
  margin-bottom: 24px;
}

.luxe-section-title em {
  font-style: italic;
  color: var(--luxe-black);
}

.luxe-section-subtitle {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--luxe-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  font-style: italic;
  line-height: 1.6;
  font-weight: 300;
}

/* ═══════════════════════════════════════════════
   ⭐  CAMPAIGN
   ═══════════════════════════════════════════════ */

.luxe-campaign {
  padding: 160px 20px;
  position: relative;
  background: transparent;
}

.luxe-campaign__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
}

.luxe-campaign__visual {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--luxe-white-soft) 0%, var(--luxe-gray-mid) 100%);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--luxe-line);
  box-shadow: var(--luxe-shadow-md);
}

.luxe-campaign__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(0, 0, 0, 0.08) 0%, transparent 60%);
}

.luxe-campaign__label {
  position: absolute;
  top: 40px;
  left: 40px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  color: var(--luxe-black);
  letter-spacing: 5px;
  text-transform: uppercase;
  z-index: 2;
}

.luxe-campaign__product-name {
  position: absolute;
  bottom: 60px;
  left: 40px;
  right: 40px;
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 300;
  letter-spacing: 6px;
  color: var(--luxe-black);
  text-transform: uppercase;
  z-index: 2;
  line-height: 1;
}

.luxe-campaign__content { padding: 40px; }

.luxe-campaign__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--luxe-text-primary);
  margin-bottom: 24px;
}

.luxe-campaign__title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  color: var(--luxe-black);
  letter-spacing: 3px;
  line-height: 1.1;
  margin-bottom: 32px;
  text-transform: uppercase;
}

.luxe-campaign__title em { font-style: italic; }

.luxe-campaign__desc {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--luxe-text-secondary);
  line-height: 1.7;
  margin-bottom: 40px;
  font-style: italic;
}

@media (min-width: 900px) {
  .luxe-campaign__inner { grid-template-columns: 1fr 1fr; gap: 80px; }
}

/* ═══════════════════════════════════════════════
   🌺  NOTES GALLERY
   ═══════════════════════════════════════════════ */

.luxe-notes {
  padding: 160px 20px;
  position: relative;
  background: transparent;
}

.luxe-notes__container { max-width: var(--container); margin: 0 auto; }

.luxe-notes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 80px;
}

.luxe-note-card {
  aspect-ratio: 3/4;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--luxe-line);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s var(--ease-luxe);
  box-shadow: var(--luxe-shadow-sm);
}

.luxe-note-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(255, 255, 255, 0.9) 100%);
  z-index: 1;
}

.luxe-note-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-luxe);
}

.luxe-note-card:hover {
  border-color: var(--luxe-black);
  box-shadow: var(--luxe-shadow-md);
}

.luxe-note-card:hover img { transform: scale(1.1); }

.luxe-note-card__info {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 2;
}

.luxe-note-card__label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--luxe-text-primary);
  margin-bottom: 8px;
}

.luxe-note-card__name {
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  color: var(--luxe-black);
  letter-spacing: 2px;
}

@media (min-width: 700px) {
  .luxe-notes__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════
   🎯  QUIZ
   ═══════════════════════════════════════════════ */

.luxe-quiz {
  padding: 160px 20px;
  text-align: center;
  position: relative;
  background: transparent;
}

.luxe-quiz__container { max-width: 800px; margin: 0 auto; }

.luxe-quiz__question { margin-top: 60px; display: none; }
.luxe-quiz__question.active { display: block; animation: fadeUp 0.6s var(--ease-luxe); }

.luxe-quiz__question-num {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--luxe-text-secondary);
  letter-spacing: 4px;
  margin-bottom: 20px;
}

.luxe-quiz__question-text {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 300;
  color: var(--luxe-black);
  margin-bottom: 48px;
  line-height: 1.3;
  letter-spacing: 1px;
}

.luxe-quiz__options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.luxe-quiz__option {
  padding: 24px 32px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--luxe-line-strong);
  color: var(--luxe-black);
  font-family: var(--font-serif);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.4s var(--ease-luxe);
  text-align: left;
  letter-spacing: 1px;
}

.luxe-quiz__option:hover {
  border-color: var(--luxe-black);
  background: var(--luxe-black);
  color: var(--luxe-white);
  padding-left: 40px;
}

.luxe-quiz__result {
  display: none;
  padding: 60px 40px;
  border: 1px solid var(--luxe-black);
  margin-top: 40px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.luxe-quiz__result.active { display: block; animation: fadeUp 0.8s var(--ease-luxe); }

.luxe-quiz__result-eyebrow {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--luxe-text-secondary);
  letter-spacing: 4px;
  margin-bottom: 16px;
}

.luxe-quiz__result-name {
  font-family: var(--font-serif);
  font-size: clamp(48px, 6vw, 72px);
  color: var(--luxe-black);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 300;
}

.luxe-quiz__result-desc {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--luxe-text-secondary);
  margin-bottom: 32px;
  line-height: 1.7;
}

.luxe-quiz__progress {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.luxe-quiz__progress-dot {
  width: 32px;
  height: 2px;
  background: var(--luxe-line-strong);
  transition: background 0.4s var(--ease-luxe);
}

.luxe-quiz__progress-dot.active { background: var(--luxe-black); }

/* ═══════════════════════════════════════════════
   💬  TESTIMONIALS
   ═══════════════════════════════════════════════ */

.luxe-testimonials {
  padding: 160px 20px;
  position: relative;
  background: transparent;
}

.luxe-testimonials__container { max-width: var(--container); margin: 0 auto; }

.luxe-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 80px;
}

.luxe-testimonial {
  padding: 48px 40px;
  border: 1px solid var(--luxe-line);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  transition: all 0.5s var(--ease-luxe);
  position: relative;
  box-shadow: var(--luxe-shadow-sm);
}

.luxe-testimonial:hover {
  border-color: var(--luxe-black);
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--luxe-shadow-md);
}

.luxe-testimonial__quote-mark {
  font-family: var(--font-serif);
  font-size: 80px;
  color: var(--luxe-black);
  line-height: 0.5;
  margin-bottom: 20px;
  font-style: italic;
  opacity: 0.15;
}

.luxe-testimonial__stars {
  color: var(--luxe-black);
  font-size: 14px;
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.luxe-testimonial__quote {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--luxe-black);
  line-height: 1.7;
  margin-bottom: 32px;
}

.luxe-testimonial__author {
  padding-top: 24px;
  border-top: 1px solid var(--luxe-line);
}

.luxe-testimonial__name {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--luxe-black);
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.luxe-testimonial__product {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--luxe-text-secondary);
  letter-spacing: 3px;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  .luxe-testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════
   📸  INSTAGRAM
   ═══════════════════════════════════════════════ */

.luxe-instagram {
  padding: 160px 20px 100px;
  background: transparent;
}

.luxe-instagram__container { max-width: var(--container); margin: 0 auto; }

.luxe-instagram__handle {
  font-family: var(--font-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--luxe-black);
  text-align: center;
  margin-top: 12px;
  letter-spacing: 3px;
}

.luxe-instagram__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 60px;
}

.luxe-instagram__item {
  aspect-ratio: 1/1;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: opacity 0.4s var(--ease-luxe);
  box-shadow: var(--luxe-shadow-sm);
}

.luxe-instagram__item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.4s var(--ease-luxe);
  z-index: 1;
}

.luxe-instagram__item:hover::before { background: rgba(0, 0, 0, 0.1); }

.luxe-instagram__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-luxe);
}

.luxe-instagram__item:hover img { transform: scale(1.05); }

.luxe-instagram__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--luxe-black);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 3px;
  opacity: 0.5;
}

@media (min-width: 700px) { .luxe-instagram__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .luxe-instagram__grid { grid-template-columns: repeat(6, 1fr); } }

/* ═══════════════════════════════════════════════
   📖  STORY
   ═══════════════════════════════════════════════ */

.luxe-story {
  padding: 180px 20px;
  text-align: center;
  position: relative;
  background: transparent;
}

.luxe-story__container { max-width: 900px; margin: 0 auto; }

.luxe-story__ornament {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
}

.luxe-story__ornament-line {
  width: 100px;
  height: 1px;
  background: var(--luxe-black);
}

.luxe-story__ornament-dot {
  width: 8px;
  height: 8px;
  background: var(--luxe-black);
  border-radius: 50%;
}

.luxe-story__title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 300;
  color: var(--luxe-black);
  margin-bottom: 40px;
  letter-spacing: 3px;
  line-height: 1.15;
}

.luxe-story__title em { font-style: italic; color: var(--luxe-black); }

.luxe-story__text {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.9;
  color: var(--luxe-text-secondary);
  font-style: italic;
  margin-bottom: 48px;
  font-weight: 300;
}

.luxe-story__signature {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--luxe-text-primary);
  letter-spacing: 8px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
   📧  NEWSLETTER
   ═══════════════════════════════════════════════ */

.luxe-newsletter {
  padding: 140px 20px;
  text-align: center;
  border-top: 1px solid var(--luxe-line);
  background: transparent;
}

.luxe-newsletter__container { max-width: 600px; margin: 0 auto; }

.luxe-newsletter__title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 300;
  color: var(--luxe-black);
  margin-bottom: 20px;
  letter-spacing: 3px;
}

.luxe-newsletter__title em { font-style: italic; color: var(--luxe-black); }

.luxe-newsletter__desc {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--luxe-text-secondary);
  margin-bottom: 48px;
  font-size: 18px;
  line-height: 1.7;
}

.luxe-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.luxe-newsletter__input {
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--luxe-line-strong);
  color: var(--luxe-black);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 1px;
  outline: none;
  transition: border-color 0.4s var(--ease-luxe);
}

.luxe-newsletter__input::placeholder {
  color: var(--luxe-text-muted);
  letter-spacing: 2px;
}

.luxe-newsletter__input:focus { border-color: var(--luxe-black); }

.luxe-newsletter__btn {
  padding: 20px 36px;
  background: var(--luxe-black);
  color: var(--luxe-white);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.5s var(--ease-luxe);
}

.luxe-newsletter__btn:hover {
  background: var(--luxe-black-pure);
  letter-spacing: 6px;
}

@media (min-width: 500px) {
  .luxe-newsletter__form { flex-direction: row; }
  .luxe-newsletter__input { flex: 1; }
}

/* ═══════════════════════════════════════════════
   🦶  FOOTER
   ═══════════════════════════════════════════════ */

.luxe-footer {
  padding: 100px 20px 50px;
  border-top: 1px solid var(--luxe-line);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
}

.luxe-footer__container { max-width: var(--container); margin: 0 auto; }

.luxe-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  margin-bottom: 60px;
  text-align: center;
}

.luxe-footer__brand {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--luxe-line);
}

.luxe-footer__logo {
  font-family: var(--font-serif);
  font-size: 36px;
  letter-spacing: 10px;
  color: var(--luxe-black);
  margin-bottom: 16px;
  text-transform: uppercase;
  font-weight: 300;
}

.luxe-footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--luxe-text-primary);
  letter-spacing: 5px;
  font-size: 14px;
  text-transform: uppercase;
}

.luxe-footer__col-title {
  font-family: var(--font-sans);
  color: var(--luxe-text-primary);
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 500;
}

.luxe-footer__col ul { list-style: none; }

.luxe-footer__col a {
  font-family: var(--font-sans);
  color: var(--luxe-text-secondary);
  font-size: 13px;
  line-height: 2.6;
  letter-spacing: 1px;
  transition: color 0.4s var(--ease-luxe);
}

.luxe-footer__col a:hover { color: var(--luxe-black); }

.luxe-footer__bottom {
  padding-top: 36px;
  border-top: 1px solid var(--luxe-line);
  text-align: center;
  color: var(--luxe-text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 3px;
}

@media (min-width: 700px) {
  .luxe-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    text-align: left;
    gap: 60px;
  }
  .luxe-footer__brand { padding-bottom: 0; border-bottom: none; }
}

/* ═══════════════════════════════════════════════
   🪟  MODAL
   ═══════════════════════════════════════════════ */

.luxe-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s var(--ease-luxe);
}

.luxe-modal-overlay.active {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  opacity: 1;
  visibility: visible;
}

.luxe-modal {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--luxe-line-strong);
  max-width: 1200px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.85) translateY(30px);
  transition: transform 0.7s var(--ease-luxe);
  box-shadow: var(--luxe-shadow-lg);
}

.luxe-modal-overlay.active .luxe-modal {
  transform: scale(1) translateY(0);
}

.luxe-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--luxe-black);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: all 0.4s var(--ease-luxe);
}

.luxe-modal__close:hover {
  background: var(--luxe-black);
  color: var(--luxe-white);
  transform: rotate(90deg);
}

.luxe-modal__close svg { width: 20px; height: 20px; stroke-width: 1.5; }

.luxe-modal__grid {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 500px;
}

.luxe-modal__image {
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--luxe-white-soft) 0%, var(--luxe-gray-mid) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.luxe-modal__image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.05) 0%, transparent 70%);
}

.luxe-modal__image img { width: 100%; height: 100%; object-fit: cover; }

.luxe-modal__image-placeholder {
  font-family: var(--font-serif);
  font-size: 52px;
  letter-spacing: 10px;
  color: var(--luxe-black);
  text-transform: uppercase;
  font-style: italic;
  z-index: 1;
  text-align: center;
  padding: 0 20px;
}

.luxe-modal__content {
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.luxe-modal__eyebrow {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 4px;
  color: var(--luxe-text-secondary);
  margin-bottom: 20px;
}

.luxe-modal__title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 400;
  color: var(--luxe-black);
  letter-spacing: 3px;
  margin-bottom: 12px;
  line-height: 1.1;
  text-transform: uppercase;
}

.luxe-modal__category {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--luxe-text-secondary);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--luxe-line);
}

.luxe-modal__description {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--luxe-text-secondary);
  line-height: 1.9;
  margin-bottom: 40px;
  font-style: italic;
}

.luxe-modal__notes-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--luxe-text-primary);
  margin-bottom: 20px;
}

.luxe-modal__note {
  display: flex;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--luxe-line);
}

.luxe-modal__note-label {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--luxe-black);
  min-width: 90px;
  font-size: 15px;
}

.luxe-modal__note-value {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--luxe-text-primary);
  letter-spacing: 1px;
  font-weight: 300;
}

.luxe-modal__meta {
  display: flex;
  gap: 32px;
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid var(--luxe-line);
  border-bottom: 1px solid var(--luxe-line);
}

.luxe-modal__meta-item { flex: 1; }

.luxe-modal__meta-label {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--luxe-text-muted);
  margin-bottom: 6px;
}

.luxe-modal__meta-value {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--luxe-black);
}

.luxe-modal__price {
  font-family: var(--font-serif);
  font-size: 48px;
  color: var(--luxe-black);
  margin-bottom: 32px;
  font-weight: 400;
  letter-spacing: 2px;
}

@media (min-width: 800px) { .luxe-modal__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 799px) {
  .luxe-modal__content { padding: 32px 24px; }
  .luxe-modal__meta { flex-direction: column; gap: 16px; }
}

/* ═══════════════════════════════════════════════
   📱  MOBILE STICKY CART
   ═══════════════════════════════════════════════ */

.luxe-mobile-cart {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(30px);
  border-top: 1px solid var(--luxe-line-strong);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-luxe);
}

.luxe-mobile-cart.visible { transform: translateY(0); }

.luxe-mobile-cart__info { display: flex; flex-direction: column; }

.luxe-mobile-cart__count {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--luxe-text-secondary);
  margin-bottom: 4px;
}

.luxe-mobile-cart__total {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--luxe-black);
}

.luxe-mobile-cart__btn {
  padding: 14px 28px;
  background: var(--luxe-black);
  color: var(--luxe-white);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
}

@media (max-width: 899px) {
  .luxe-mobile-cart { display: flex; }
}

/* ═══════════════════════════════════════════════
   🎬  SCROLL REVEAL
   ═══════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.2s var(--ease-luxe), transform 1.2s var(--ease-luxe);
}

.reveal.revealed { opacity: 1; transform: translateY(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1s var(--ease-luxe), transform 1s var(--ease-luxe);
}

.reveal-scale.revealed { opacity: 1; transform: scale(1); }

.reveal-rotate {
  opacity: 0;
  transform: perspective(1000px) rotateX(20deg) translateY(60px);
  transition: opacity 1.2s var(--ease-luxe), transform 1.2s var(--ease-luxe);
}

.reveal-rotate.revealed {
  opacity: 1;
  transform: perspective(1000px) rotateX(0) translateY(0);
}

.reveal-blur {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1s var(--ease-luxe), filter 1s var(--ease-luxe);
}

.reveal-blur.revealed { opacity: 1; filter: blur(0); }

/* ═══════════════════════════════════════════════
   🎬  CINEMATIC PRELOADER (WHITE THEME)
   ═══════════════════════════════════════════════ */

.luxe-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--luxe-white);
  overflow: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.luxe-preloader.hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.luxe-preloader.removed { display: none !important; }

body.luxe-loading { overflow: hidden !important; }

.luxe-preloader__space {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.05) 0%, transparent 60%),
    var(--luxe-white);
}

.luxe-preloader__stars { position: absolute; inset: 0; }

.luxe-preloader__star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--luxe-black);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  opacity: 0;
}

.luxe-preloader__star:nth-child(1) { top: 15%; left: 20%; animation: starTwinkle 3s ease-in-out infinite; }
.luxe-preloader__star:nth-child(2) { top: 25%; left: 75%; animation: starTwinkle 4s ease-in-out infinite 0.5s; }
.luxe-preloader__star:nth-child(3) { top: 60%; left: 15%; animation: starTwinkle 3.5s ease-in-out infinite 1s; }
.luxe-preloader__star:nth-child(4) { top: 70%; left: 85%; animation: starTwinkle 4.5s ease-in-out infinite 1.5s; }
.luxe-preloader__star:nth-child(5) { top: 40%; left: 90%; animation: starTwinkle 3s ease-in-out infinite 2s; }
.luxe-preloader__star:nth-child(6) { top: 80%; left: 45%; animation: starTwinkle 4s ease-in-out infinite 0.8s; }
.luxe-preloader__star:nth-child(7) { top: 20%; left: 50%; animation: starTwinkle 3.2s ease-in-out infinite 1.3s; }
.luxe-preloader__star:nth-child(8) { top: 55%; left: 60%; animation: starTwinkle 3.8s ease-in-out infinite 2.2s; }
.luxe-preloader__star:nth-child(9) { top: 35%; left: 25%; animation: starTwinkle 4.2s ease-in-out infinite 0.3s; }
.luxe-preloader__star:nth-child(10) { top: 75%; left: 30%; animation: starTwinkle 3.5s ease-in-out infinite 1.7s; }
.luxe-preloader__star:nth-child(11) { top: 45%; left: 40%; animation: starTwinkle 4s ease-in-out infinite 0.9s; }
.luxe-preloader__star:nth-child(12) { top: 10%; left: 65%; animation: starTwinkle 3.3s ease-in-out infinite 2.5s; }

@keyframes starTwinkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1.5); }
}

.luxe-preloader__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 0, 0, 0.08) 0%, transparent 60%);
  filter: blur(60px);
  opacity: 0;
  animation: glowFadeIn 1.5s ease 0.3s forwards;
}

@keyframes glowFadeIn { to { opacity: 1; } }

.luxe-preloader__tagline {
  position: absolute;
  top: calc(50% + 100px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 2vw, 18px);
  color: var(--luxe-text-secondary);
  letter-spacing: 6px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  animation: taglineIn 0.8s ease 1.3s forwards;
  transition: opacity 0.4s ease;
  z-index: 10;
}

.luxe-preloader.flying .luxe-preloader__tagline { opacity: 0 !important; }

@keyframes taglineIn { to { opacity: 0.9; } }

.luxe-preloader__loading {
  position: absolute;
  top: calc(50% + 140px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  opacity: 0;
  animation: dotsIn 0.5s ease 1.8s forwards;
  transition: opacity 0.4s ease;
  z-index: 10;
}

.luxe-preloader.flying .luxe-preloader__loading { opacity: 0 !important; }

@keyframes dotsIn { to { opacity: 1; } }

.luxe-preloader__dot {
  width: 6px;
  height: 6px;
  background: var(--luxe-black);
  border-radius: 50%;
  animation: dotPulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

.luxe-preloader__dot:nth-child(1) { animation-delay: 0s; }
.luxe-preloader__dot:nth-child(2) { animation-delay: 0.2s; }
.luxe-preloader__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.5); }
}

.luxe-preloader__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(80px, 15vw, 180px);
  font-weight: 300;
  letter-spacing: 12px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--luxe-black);
  z-index: 100;
  white-space: nowrap;
  transition:
    top 1.2s cubic-bezier(0.7, 0, 0.3, 1),
    font-size 1.2s cubic-bezier(0.7, 0, 0.3, 1),
    letter-spacing 1.2s cubic-bezier(0.7, 0, 0.3, 1);
  will-change: top, font-size, letter-spacing;
}

.luxe-preloader__letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(50px);
  animation: letterIn 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.luxe-preloader__letter:nth-child(1) { animation-delay: 0.3s; }
.luxe-preloader__letter:nth-child(2) { animation-delay: 0.4s; }
.luxe-preloader__letter:nth-child(3) { animation-delay: 0.5s; }
.luxe-preloader__letter:nth-child(4) { animation-delay: 0.6s; }
.luxe-preloader__letter:nth-child(5) { animation-delay: 0.7s; }

@keyframes letterIn {
  to { opacity: 1; transform: translateY(0); }
}

.luxe-preloader.flying .luxe-preloader__logo {
  top: 37px !important;
  font-size: 26px !important;
  letter-spacing: 10px !important;
}

.luxe-preloader.flying .luxe-preloader__glow {
  opacity: 0;
  transition: opacity 0.6s ease;
}

@media (max-width: 768px) {
  .luxe-preloader.flying .luxe-preloader__logo {
    top: 27px !important;
    font-size: 18px !important;
    letter-spacing: 6px !important;
  }
}

/* Hide header during preloader */
body.luxe-loading .arshe-header,
body.luxe-flying .arshe-header {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

body.luxe-header-visible .arshe-header {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* ═══════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
   ═══════════════════════════════════════════════ */

@media (max-width: 640px) {
  .luxe-particle:nth-child(4),
  .luxe-particle:nth-child(5),
  .luxe-particle:nth-child(6) { opacity: 0.5; }
  .luxe-hero { padding: 120px 20px 100px; }
  .luxe-carousel-section { padding: 80px 0; }
  .luxe-campaign,
  .luxe-notes,
  .luxe-quiz,
  .luxe-testimonials,
  .luxe-story { padding: 100px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .luxe-particle,
  .luxe-preloader__star,
  .luxe-discovery__spark { animation: none !important; }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--luxe-white); }
::-webkit-scrollbar-thumb {
  background: var(--luxe-text-muted);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--luxe-black); }

/* ═══════════════════════════════════════════════
   🎯 FORCE UNIFIED BACKGROUND — CRITICAL FIX
   ═══════════════════════════════════════════════ */

/* Ensure HTML and BODY are transparent so fixed bg shows */
html {
  background: transparent !important;
}

body,
body.gradient {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Ensure fixed background is ALWAYS visible */
.luxe-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -100 !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: translateZ(0);
}

/* Force ALL Shopify sections and main to be transparent */
main,
#MainContent,
.shopify-section,
.shopify-section-group-header-group,
.shopify-section-group-footer-group,
.content-for-layout {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Force all luxe sections transparent */
.luxe-hero,
.luxe-discovery,
.luxe-carousel-section,
.luxe-campaign,
.luxe-notes,
.luxe-quiz,
.luxe-testimonials,
.luxe-instagram,
.luxe-newsletter,
.luxe-story,
.luxe-sticky-products {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Fix Dawn theme default backgrounds */
.gradient,
.color-background-1,
.color-background-2,
.color-scheme-1,
.color-scheme-2,
.color-scheme-3 {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure particles are visible */
.luxe-particles {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
}

.luxe-particle {
  display: block !important;
  position: absolute !important;
}

/* Hide first 6 particles as blobs, rest hidden */
.luxe-particle:nth-child(n+7) {
  display: none !important;
}

/* ═══════════════════════════════════════════════
   🎯 NUCLEAR FIX — TRANSPARENT EVERYTHING
   Forces background visible on ENTIRE page
   ═══════════════════════════════════════════════ */

/* Kill all backgrounds on ALL elements */
html,
body,
main,
#MainContent,
.shopify-section,
[class*="shopify-section"],
.gradient,
[class*="color-scheme"],
[class*="color-background"],
.content-for-layout,
.section,
[id*="shopify-section"] {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Force ARSHE sections transparent */
section.luxe-hero,
section.luxe-discovery,
section.luxe-carousel-section,
section.luxe-campaign,
section.luxe-notes,
section.luxe-quiz,
section.luxe-testimonials,
section.luxe-instagram,
section.luxe-newsletter,
section.luxe-story,
.luxe-hero,
.luxe-discovery,
.luxe-carousel-section,
.luxe-campaign,
.luxe-notes,
.luxe-quiz,
.luxe-testimonials,
.luxe-instagram,
.luxe-newsletter,
.luxe-story {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Preserve fixed background */
.luxe-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -100 !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Also add MASSIVE moving blobs on the html itself as backup */
html::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -99;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(0, 0, 0, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 50% 70%, rgba(0, 0, 0, 0.11) 0%, transparent 50%),
    radial-gradient(circle at 30% 90%, rgba(0, 0, 0, 0.09) 0%, transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(0, 0, 0, 0.10) 0%, transparent 50%);
  animation: htmlBgFlow 40s ease-in-out infinite;
  filter: blur(60px);
}

@keyframes htmlBgFlow {
  0%, 100% {
    background-position: 20% 20%, 80% 30%, 50% 70%, 30% 90%, 90% 90%;
  }
  25% {
    background-position: 50% 40%, 30% 60%, 70% 20%, 60% 80%, 20% 50%;
  }
  50% {
    background-position: 80% 60%, 20% 20%, 40% 90%, 90% 40%, 10% 80%;
  }
  75% {
    background-position: 40% 80%, 60% 40%, 20% 60%, 70% 20%, 50% 30%;
  }
}

/* ═══════════════════════════════════════════════
   ✨  PREMIUM 3D FLOATING EFFECTS
   Sharp • Cinematic • Sophisticated
   ═══════════════════════════════════════════════ */

/* ═══ ENHANCED BACKGROUND WITH LIGHT SOURCES ═══ */
html::before {
  background:
    radial-gradient(circle at 15% 15%, rgba(212, 175, 55, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 0.4) 0%, transparent 45%),
    radial-gradient(circle at 50% 60%, rgba(0, 0, 0, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 25% 90%, rgba(212, 175, 55, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(0, 0, 0, 0.09) 0%, transparent 50%),
    radial-gradient(circle at 70% 10%, rgba(0, 0, 0, 0.06) 0%, transparent 40%) !important;
  filter: blur(80px) !important;
}

/* Add a second lighting layer with different colors */
html::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -98;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 40% 30%, rgba(255, 245, 220, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 70%, rgba(240, 240, 255, 0.4) 0%, transparent 45%);
  animation: lightingShift 25s ease-in-out infinite;
  filter: blur(100px);
}

@keyframes lightingShift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.7;
  }
  33% {
    transform: translate(80px, -60px) scale(1.15);
    opacity: 1;
  }
  66% {
    transform: translate(-60px, 80px) scale(0.9);
    opacity: 0.8;
  }
}

/* ═══ FLOATING CARDS WITH DEPTH ═══ */

/* Product carousel cards - Premium glass */
.luxe-carousel__card {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.12),
    0 5px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03) !important;
  transform: perspective(1000px) translateZ(0);
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.luxe-carousel__slide.center .luxe-carousel__card {
  border-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.18),
    0 15px 40px rgba(0, 0, 0, 0.12),
    0 5px 15px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: perspective(1000px) translateZ(0) scale(1.02);
}

/* Testimonial floating cards */
.luxe-testimonial {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important;
  transform: perspective(1000px) translateZ(0);
}

.luxe-testimonial:hover {
  transform: perspective(1000px) translateY(-15px) translateZ(20px) rotateX(2deg) !important;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.15),
    0 15px 30px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Note cards floating */
.luxe-note-card {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.luxe-note-card:hover {
  transform: perspective(1000px) translateY(-10px) translateZ(30px) scale(1.03) !important;
  box-shadow:
    0 35px 70px rgba(0, 0, 0, 0.15),
    0 15px 25px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Instagram cards floating */
.luxe-instagram__item {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.08),
    0 5px 15px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.luxe-instagram__item:hover {
  transform: perspective(1000px) translateY(-8px) translateZ(20px) !important;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.15),
    0 10px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Campaign visual */
.luxe-campaign__visual {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.12),
    0 12px 30px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: perspective(1000px) rotateY(-2deg);
  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.luxe-campaign__visual:hover {
  transform: perspective(1000px) rotateY(0deg) translateZ(30px) !important;
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.18),
    0 20px 50px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Quiz options - glass buttons */
.luxe-quiz__option {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.luxe-quiz__option:hover {
  background: var(--luxe-black) !important;
  color: var(--luxe-white) !important;
  transform: translateY(-3px) translateZ(15px) !important;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.25),
    0 5px 15px rgba(0, 0, 0, 0.15) !important;
  border-color: var(--luxe-black) !important;
}

/* Quiz result box */
.luxe-quiz__result {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Newsletter input */
.luxe-newsletter__input {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transition: all 0.3s ease !important;
}

.luxe-newsletter__input:focus {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Newsletter button */
.luxe-newsletter__btn {
  background: linear-gradient(135deg, #1a1a1a 0%, #000 100%) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.2),
    0 3px 10px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.luxe-newsletter__btn:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 5px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Hero button - premium glass */
.luxe-btn {
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.luxe-btn:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Carousel navigation buttons */
.luxe-carousel__btn {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.luxe-carousel__btn:hover {
  transform: scale(1.15) translateY(-3px) !important;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Header glass effect enhanced */
.arshe-header.scrolled {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.9) !important;
}

/* Modal enhanced */
.luxe-modal {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 50px 150px rgba(0, 0, 0, 0.25),
    0 20px 60px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Footer with glass */
.luxe-footer {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.05) !important;
}

/* ═══ FLOATING ANIMATIONS ═══ */

/* Make all cards subtly float on load */
.luxe-note-card,
.luxe-instagram__item,
.luxe-testimonial {
  animation: gentleFloat 6s ease-in-out infinite;
}

.luxe-note-card:nth-child(2) { animation-delay: 0.5s; }
.luxe-note-card:nth-child(3) { animation-delay: 1s; }
.luxe-note-card:nth-child(4) { animation-delay: 1.5s; }
.luxe-note-card:nth-child(5) { animation-delay: 2s; }
.luxe-note-card:nth-child(6) { animation-delay: 2.5s; }

.luxe-testimonial:nth-child(2) { animation-delay: 1s; }
.luxe-testimonial:nth-child(3) { animation-delay: 2s; }

.luxe-instagram__item:nth-child(2) { animation-delay: 0.3s; }
.luxe-instagram__item:nth-child(3) { animation-delay: 0.6s; }
.luxe-instagram__item:nth-child(4) { animation-delay: 0.9s; }
.luxe-instagram__item:nth-child(5) { animation-delay: 1.2s; }
.luxe-instagram__item:nth-child(6) { animation-delay: 1.5s; }

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* Pause floating on hover */
.luxe-note-card:hover,
.luxe-instagram__item:hover,
.luxe-testimonial:hover {
  animation-play-state: paused;
}

/* ═══ SHIMMER EFFECTS ═══ */

.luxe-carousel__card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  transform: rotate(0deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.luxe-carousel__slide.center .luxe-carousel__card::after {
  animation: shimmer 3s ease-in-out infinite;
  opacity: 1;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(0deg); }
  100% { transform: translateX(100%) rotate(0deg); }
}

/* ═══ 3D DEPTH ON HERO ═══ */

.luxe-hero__title {
  text-shadow:
    0 5px 15px rgba(0, 0, 0, 0.1),
    0 2px 5px rgba(0, 0, 0, 0.05);
  transform: perspective(1000px) translateZ(0);
}

.luxe-hero__content {
  animation: heroFloat 8s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: perspective(1000px) translateZ(0) rotateX(0deg); }
  50% { transform: perspective(1000px) translateZ(30px) rotateX(1deg); }
}

/* ═══ SECTION TITLES WITH DEPTH ═══ */

.luxe-section-title,
.luxe-discovery__title,
.luxe-campaign__title,
.luxe-story__title,
.luxe-newsletter__title {
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ═══ PARALLAX SCROLL ENHANCEMENTS ═══ */

.luxe-hero,
.luxe-discovery,
.luxe-campaign,
.luxe-story {
  position: relative;
}

.luxe-hero::before,
.luxe-campaign::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ═══ SMOOTH SCROLL BEHAVIOR ═══ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* ═══ LIGHT REFLECTIONS ON CARDS ═══ */

.luxe-carousel__card,
.luxe-testimonial,
.luxe-note-card,
.luxe-instagram__item,
.luxe-campaign__visual {
  position: relative;
  overflow: hidden;
}

.luxe-testimonial::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
  pointer-events: none;
  border-radius: inherit;
}

/* ═══ ACCENT SHADOWS FOR PRODUCT VISUAL ═══ */

.luxe-carousel__image {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(240, 240, 240, 0.8) 50%,
    rgba(220, 220, 220, 0.8) 100%) !important;
  position: relative;
}

.luxe-carousel__image::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 30%;
  height: 30%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(20px);
  pointer-events: none;
}

/* ═══ GOLD ACCENT TOUCHES ═══ */

.luxe-hero__title-accent-word,
.luxe-section-title em,
.luxe-story__title em {
  background: linear-gradient(135deg, #B8860B 0%, #FFD700 50%, #B8860B 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 8px rgba(184, 134, 11, 0.3));
}

/* ═══ ENHANCED SCROLL INDICATOR ═══ */

.luxe-hero__scroll {
  animation: scrollBounce 2.5s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

/* ═══ PREMIUM BADGES/PRICE TAGS ═══ */

.luxe-discovery__save {
  background: linear-gradient(135deg, #000 0%, #1a1a1a 100%) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.luxe-discovery__price-new {
  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* ═══ CINEMATIC ENTRY ANIMATIONS ═══ */

.luxe-section-title,
.luxe-section-subtitle,
.luxe-eyebrow {
  opacity: 0;
  transform: translateY(30px);
  animation: cinematicIn 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.luxe-section-title { animation-delay: 0.2s; }
.luxe-section-subtitle { animation-delay: 0.4s; }
.luxe-eyebrow { animation-delay: 0s; }

@keyframes cinematicIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══ REDUCED MOTION SUPPORT ═══ */

@media (prefers-reduced-motion: reduce) {
  .luxe-note-card,
  .luxe-instagram__item,
  .luxe-testimonial,
  .luxe-hero__content {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════
   ✨ MOVING PARTICLES EVERYWHERE
   Cover entire page from top to bottom
   ═══════════════════════════════════════════════ */

/* Create particles container on body that stays fixed */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -50;
  pointer-events: none;
  background:
    /* Large soft gray blob 1 */
    radial-gradient(circle 400px at 10% 20%, rgba(0, 0, 0, 0.06) 0%, transparent 60%),
    /* Large soft gray blob 2 */
    radial-gradient(circle 350px at 90% 30%, rgba(0, 0, 0, 0.05) 0%, transparent 60%),
    /* Gold light source */
    radial-gradient(circle 450px at 50% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 60%),
    /* Bottom left blob */
    radial-gradient(circle 380px at 20% 80%, rgba(0, 0, 0, 0.06) 0%, transparent 60%),
    /* Bottom right blob */
    radial-gradient(circle 420px at 80% 70%, rgba(0, 0, 0, 0.05) 0%, transparent 60%),
    /* Small accent light */
    radial-gradient(circle 300px at 60% 20%, rgba(212, 175, 55, 0.04) 0%, transparent 60%);
  animation: particlesMove 30s ease-in-out infinite;
  filter: blur(40px);
  will-change: background-position, transform;
}

/* Second layer of particles for depth */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -51;
  pointer-events: none;
  background:
    radial-gradient(circle 500px at 30% 60%, rgba(0, 0, 0, 0.04) 0%, transparent 65%),
    radial-gradient(circle 450px at 70% 40%, rgba(212, 175, 55, 0.03) 0%, transparent 65%),
    radial-gradient(circle 400px at 15% 90%, rgba(0, 0, 0, 0.05) 0%, transparent 65%);
  animation: particlesMove2 45s ease-in-out infinite;
  filter: blur(60px);
  will-change: transform;
}

/* Movement animations */
@keyframes particlesMove {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  25% {
    transform: translate(50px, -80px) scale(1.1) rotate(2deg);
  }
  50% {
    transform: translate(100px, 50px) scale(0.95) rotate(-1deg);
  }
  75% {
    transform: translate(-50px, 80px) scale(1.05) rotate(1deg);
  }
}

@keyframes particlesMove2 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate(-80px, 100px) scale(1.15) rotate(-2deg);
  }
  66% {
    transform: translate(100px, -60px) scale(0.9) rotate(2deg);
  }
}

/* Add sparkle particles floating everywhere */
html::before {
  background:
    /* Small gold sparkles */
    radial-gradient(circle 2px at 5% 10%, rgba(212, 175, 55, 0.8), transparent),
    radial-gradient(circle 2px at 15% 25%, rgba(0, 0, 0, 0.4), transparent),
    radial-gradient(circle 3px at 30% 15%, rgba(212, 175, 55, 0.6), transparent),
    radial-gradient(circle 2px at 45% 35%, rgba(0, 0, 0, 0.5), transparent),
    radial-gradient(circle 2px at 60% 20%, rgba(212, 175, 55, 0.7), transparent),
    radial-gradient(circle 3px at 75% 45%, rgba(0, 0, 0, 0.4), transparent),
    radial-gradient(circle 2px at 90% 25%, rgba(212, 175, 55, 0.6), transparent),
    radial-gradient(circle 2px at 20% 55%, rgba(0, 0, 0, 0.5), transparent),
    radial-gradient(circle 3px at 40% 65%, rgba(212, 175, 55, 0.7), transparent),
    radial-gradient(circle 2px at 55% 75%, rgba(0, 0, 0, 0.4), transparent),
    radial-gradient(circle 2px at 70% 85%, rgba(212, 175, 55, 0.6), transparent),
    radial-gradient(circle 3px at 85% 60%, rgba(0, 0, 0, 0.5), transparent),
    radial-gradient(circle 2px at 25% 90%, rgba(212, 175, 55, 0.7), transparent),
    radial-gradient(circle 2px at 50% 95%, rgba(0, 0, 0, 0.4), transparent),
    radial-gradient(circle 3px at 80% 95%, rgba(212, 175, 55, 0.6), transparent),
    /* Background lighting */
    radial-gradient(circle at 15% 15%, rgba(212, 175, 55, 0.10) 0%, transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 0.3) 0%, transparent 45%),
    radial-gradient(circle at 50% 60%, rgba(0, 0, 0, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 25% 90%, rgba(212, 175, 55, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(0, 0, 0, 0.07) 0%, transparent 50%) !important;
  filter: blur(0) !important;
  animation: sparkleMove 20s ease-in-out infinite !important;
}

@keyframes sparkleMove {
  0%, 100% {
    background-position:
      0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%,
      0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%,
      0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%,
      0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    opacity: 1;
  }
  50% {
    background-position:
      50% 30%, -30% 20%, 40% -20%, -20% 40%, 30% 50%,
      -40% 30%, 20% -30%, 40% 20%, -30% 40%, 50% -20%,
      -20% 30%, 40% 20%, -30% -40%, 20% 30%, -40% 50%,
      0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    opacity: 0.7;
  }
}

/* Rising floating sparkles */
.luxe-bg::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -49;
  pointer-events: none;
  background-image:
    radial-gradient(circle 3px at 10% 100%, rgba(212, 175, 55, 0.8), transparent 70%),
    radial-gradient(circle 2px at 25% 100%, rgba(0, 0, 0, 0.4), transparent 70%),
    radial-gradient(circle 3px at 40% 100%, rgba(212, 175, 55, 0.6), transparent 70%),
    radial-gradient(circle 2px at 55% 100%, rgba(0, 0, 0, 0.5), transparent 70%),
    radial-gradient(circle 3px at 70% 100%, rgba(212, 175, 55, 0.7), transparent 70%),
    radial-gradient(circle 2px at 85% 100%, rgba(0, 0, 0, 0.4), transparent 70%),
    radial-gradient(circle 3px at 95% 100%, rgba(212, 175, 55, 0.6), transparent 70%);
  animation: sparklesRise 15s linear infinite;
}

@keyframes sparklesRise {
  0% {
    background-position:
      0% 100%, 0% 100%, 0% 100%, 0% 100%,
      0% 100%, 0% 100%, 0% 100%;
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    background-position:
      0% -100%, 0% -100%, 0% -100%, 0% -100%,
      0% -100%, 0% -100%, 0% -100%;
    opacity: 0;
  }
}

/* Ensure everything stays on top */
.arshe-header,
main,
#MainContent,
.luxe-footer {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════
   💎 PREMIUM 3D BOLD FLOATING BUBBLES
   Active • Dark • Fast • Everywhere
   ═══════════════════════════════════════════════ */

/* Kill previous particles */
body::before,
body::after,
html::before,
html::after,
.luxe-bg::after {
  display: none !important;
}

/* Create bubble container fixed on viewport */
body {
  position: relative;
}

body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -50 !important;
  pointer-events: none !important;
  display: block !important;
  background:
    /* BOLD DARK BUBBLES - Large */
    radial-gradient(circle 180px at 15% 20%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.15) 40%, transparent 70%),
    radial-gradient(circle 200px at 85% 15%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.18) 40%, transparent 70%),
    radial-gradient(circle 220px at 50% 45%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.12) 40%, transparent 70%),
    radial-gradient(circle 190px at 20% 75%, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.16) 40%, transparent 70%),
    radial-gradient(circle 210px at 80% 80%, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.14) 40%, transparent 70%),
    /* Gold accent bubbles */
    radial-gradient(circle 150px at 45% 25%, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.08) 40%, transparent 70%),
    radial-gradient(circle 160px at 60% 70%, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.1) 40%, transparent 70%);
  animation: bubblesFloat1 15s ease-in-out infinite !important;
  filter: blur(20px);
  will-change: transform;
}

/* Second bubble layer */
body::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -49 !important;
  pointer-events: none !important;
  display: block !important;
  background:
    radial-gradient(circle 140px at 30% 40%, rgba(0, 0, 0, 0.20) 0%, transparent 70%),
    radial-gradient(circle 160px at 70% 30%, rgba(0, 0, 0, 0.22) 0%, transparent 70%),
    radial-gradient(circle 130px at 40% 90%, rgba(0, 0, 0, 0.18) 0%, transparent 70%),
    radial-gradient(circle 170px at 90% 60%, rgba(0, 0, 0, 0.24) 0%, transparent 70%),
    radial-gradient(circle 120px at 10% 50%, rgba(0, 0, 0, 0.20) 0%, transparent 70%),
    radial-gradient(circle 140px at 55% 15%, rgba(212, 175, 55, 0.14) 0%, transparent 70%);
  animation: bubblesFloat2 20s ease-in-out infinite !important;
  filter: blur(15px);
  will-change: transform;
}

/* Third layer for depth */
html::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -48 !important;
  pointer-events: none !important;
  display: block !important;
  background:
    radial-gradient(circle 100px at 25% 60%, rgba(0, 0, 0, 0.30) 0%, transparent 65%),
    radial-gradient(circle 120px at 65% 85%, rgba(0, 0, 0, 0.28) 0%, transparent 65%),
    radial-gradient(circle 90px at 85% 40%, rgba(0, 0, 0, 0.32) 0%, transparent 65%),
    radial-gradient(circle 110px at 15% 30%, rgba(0, 0, 0, 0.26) 0%, transparent 65%),
    radial-gradient(circle 100px at 50% 75%, rgba(0, 0, 0, 0.28) 0%, transparent 65%),
    radial-gradient(circle 130px at 75% 20%, rgba(212, 175, 55, 0.20) 0%, transparent 65%);
  animation: bubblesFloat3 12s ease-in-out infinite !important;
  filter: blur(10px);
  will-change: transform;
}

/* FAST animations for active feel */
@keyframes bubblesFloat1 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  20% {
    transform: translate(150px, -100px) scale(1.15) rotate(15deg);
  }
  40% {
    transform: translate(-100px, 150px) scale(0.9) rotate(-10deg);
  }
  60% {
    transform: translate(200px, 100px) scale(1.1) rotate(20deg);
  }
  80% {
    transform: translate(-150px, -50px) scale(1.05) rotate(-15deg);
  }
}

@keyframes bubblesFloat2 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  25% {
    transform: translate(-200px, 100px) scale(1.2) rotate(-20deg);
  }
  50% {
    transform: translate(150px, -150px) scale(0.85) rotate(15deg);
  }
  75% {
    transform: translate(100px, 200px) scale(1.1) rotate(-10deg);
  }
}

@keyframes bubblesFloat3 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate(180px, 120px) scale(1.25) rotate(25deg);
  }
  66% {
    transform: translate(-120px, -180px) scale(0.9) rotate(-20deg);
  }
}

/* Add another particle layer using ::after on html */
html::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -47 !important;
  pointer-events: none !important;
  display: block !important;
  background:
    /* Small bold sparkles */
    radial-gradient(circle 4px at 12% 18%, rgba(0, 0, 0, 0.9), transparent 60%),
    radial-gradient(circle 5px at 28% 32%, rgba(212, 175, 55, 0.9), transparent 60%),
    radial-gradient(circle 3px at 42% 15%, rgba(0, 0, 0, 0.8), transparent 60%),
    radial-gradient(circle 5px at 58% 45%, rgba(212, 175, 55, 0.9), transparent 60%),
    radial-gradient(circle 4px at 72% 22%, rgba(0, 0, 0, 0.9), transparent 60%),
    radial-gradient(circle 5px at 88% 38%, rgba(212, 175, 55, 0.9), transparent 60%),
    radial-gradient(circle 4px at 15% 55%, rgba(0, 0, 0, 0.9), transparent 60%),
    radial-gradient(circle 5px at 32% 68%, rgba(212, 175, 55, 0.9), transparent 60%),
    radial-gradient(circle 3px at 48% 82%, rgba(0, 0, 0, 0.9), transparent 60%),
    radial-gradient(circle 5px at 65% 72%, rgba(212, 175, 55, 0.9), transparent 60%),
    radial-gradient(circle 4px at 80% 88%, rgba(0, 0, 0, 0.9), transparent 60%),
    radial-gradient(circle 5px at 92% 62%, rgba(212, 175, 55, 0.9), transparent 60%),
    radial-gradient(circle 3px at 8% 88%, rgba(0, 0, 0, 0.9), transparent 60%),
    radial-gradient(circle 4px at 22% 95%, rgba(212, 175, 55, 0.9), transparent 60%),
    radial-gradient(circle 5px at 55% 92%, rgba(0, 0, 0, 0.9), transparent 60%);
  animation: sparklesActive 8s ease-in-out infinite !important;
  filter: none !important;
}

@keyframes sparklesActive {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translate(50px, -30px) rotate(90deg);
    opacity: 0.7;
  }
  50% {
    transform: translate(-40px, 40px) rotate(180deg);
    opacity: 1;
  }
  75% {
    transform: translate(30px, 20px) rotate(270deg);
    opacity: 0.8;
  }
}

/* Ensure content stays above bubbles */
.arshe-header,
main,
#MainContent,
.luxe-footer,
.luxe-preloader {
  position: relative;
  z-index: 1;
}

.luxe-header {
  z-index: 100;
}

.luxe-modal-overlay,
.luxe-preloader {
  z-index: 99999;
}

/* ═══════════════════════════════════════════════
   🎨 HERO IMAGE - FULL HOMEPAGE
   ═══════════════════════════════════════════════ */

/* Hide old hero completely */
.luxe-hero {
  display: none !important;
}

/* New full image hero */
.luxe-hero-image {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  z-index: 2;
  background: #F8F5F0;
}

.luxe-hero-image__wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #F5F1E8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.luxe-hero-image__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  animation: heroImageBreathe 25s ease-in-out infinite;
  display: block;
  background: #F5F1E8;
}

@keyframes heroImageBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Placeholder if no image */
.luxe-hero-image__placeholder {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F8F5F0 0%, #EEE 100%);
  color: #999;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 24px;
  font-style: italic;
}

/* Scroll indicator */
.luxe-hero-image__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #0A0A0A;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  opacity: 0;
  animation: scrollFadeIn 1s ease 1s forwards, scrollBounce 2s ease-in-out 2s infinite;
}

.luxe-hero-image__scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, #0A0A0A, transparent);
}

@keyframes scrollFadeIn {
  to { opacity: 1; }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

/* Mobile optimization */
@media (max-width: 899px) {
  .luxe-hero-image__wrapper {
    height: 100vh;
    min-height: 500px;
  }

  .luxe-hero-image__img {
    object-position: center center;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .luxe-hero-image__scroll {
    font-size: 9px;
    letter-spacing: 4px;
  }
}

/* ═══════════════════════════════════════════════
   📱 MOBILE FIX — Full Screen Image + Transparent Header
   ═══════════════════════════════════════════════ */

/* MOBILE — Show full image without empty space */
@media (max-width: 899px) {

  /* Hero image on mobile - fill entire screen */
  .luxe-hero-image {
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .luxe-hero-image__wrapper {
    height: 100vh !important;
    width: 100vw !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .luxe-hero-image__img {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
  }

  /* Header COMPLETELY transparent on mobile */
  .arshe-header {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  .arshe-header.scrolled {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
  }

  /* Make header text WHITE on mobile so visible on image */
  .arshe-header__logo {
    color: #FFFFFF !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }

  .arshe-icon-btn {
    color: #FFFFFF !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }

  .arshe-icon-btn svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  }

  .arshe-menu-toggle span {
    background: #FFFFFF !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  }

  .arshe-cart-count {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  /* Homepage/body transparent */
  body {
    background: transparent !important;
  }

  /* Hide scroll indicator on mobile (image is full screen) */
  .luxe-hero-image__scroll {
    display: none !important;
  }
}

/* DESKTOP — Keep normal (full image visible with cream sides) */
@media (min-width: 900px) {
  .luxe-hero-image__wrapper {
    background: #F5F1E8;
  }
}

/* When scrolled on mobile - restore normal header text */
@media (max-width: 899px) {
  .arshe-header.scrolled .arshe-header__logo,
  .arshe-header.scrolled .arshe-icon-btn {
    color: #0A0A0A !important;
    text-shadow: none !important;
  }

  .arshe-header.scrolled .arshe-icon-btn svg {
    filter: none;
  }

  .arshe-header.scrolled .arshe-menu-toggle span {
    background: #0A0A0A !important;
    box-shadow: none !important;
  }
}

/* ═══════════════════════════════════════════════
   📱 SHOW DIFFERENT IMAGES FOR DESKTOP/MOBILE
   ═══════════════════════════════════════════════ */

/* Hide mobile image by default (show desktop) */
.luxe-hero-image__img--mobile {
  display: none !important;
}

.luxe-hero-image__img--desktop {
  display: block !important;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
}

/* On mobile screens - show mobile, hide desktop */
@media (max-width: 899px) {
  .luxe-hero-image__img--desktop {
    display: none !important;
  }

  .luxe-hero-image__img--mobile {
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .luxe-hero-image__wrapper {
    background: transparent !important;
    display: block !important;
  }

  /* Header transparent on mobile */
  .arshe-header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  .arshe-header.scrolled {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
  }

  /* Header text WHITE on mobile for visibility */
  .arshe-header__logo {
    color: #FFFFFF !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }

  .arshe-icon-btn {
    color: #FFFFFF !important;
  }

  .arshe-icon-btn svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  }

  .arshe-menu-toggle span {
    background: #FFFFFF !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  }

  .arshe-cart-count {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  /* Turn dark when scrolled */
  .arshe-header.scrolled .arshe-header__logo,
  .arshe-header.scrolled .arshe-icon-btn {
    color: #0A0A0A !important;
    text-shadow: none !important;
  }

  .arshe-header.scrolled .arshe-icon-btn svg {
    filter: none !important;
  }

  .arshe-header.scrolled .arshe-menu-toggle span {
    background: #0A0A0A !important;
    box-shadow: none !important;
  }

  /* Hide scroll indicator on mobile */
  .luxe-hero-image__scroll {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════
   ⚫ HEADER TEXT — DARK BLACK
   ═══════════════════════════════════════════════ */

/* Desktop header text - dark black */
.arshe-header__logo {
  color: #000000 !important;
  text-shadow: none !important;
}

.arshe-header__logo:hover {
  color: #000000 !important;
}

.arshe-nav-link {
  color: #000000 !important;
}

.arshe-icon-btn {
  color: #000000 !important;
}

.arshe-icon-btn svg {
  color: #000000 !important;
  filter: none !important;
}

.arshe-menu-toggle span {
  background: #000000 !important;
  box-shadow: none !important;
}

.arshe-cart-count {
  background: #000000 !important;
  color: #FFFFFF !important;
}

/* Mobile - keep dark black too */
@media (max-width: 899px) {
  .arshe-header__logo {
    color: #000000 !important;
    text-shadow: none !important;
  }

  .arshe-icon-btn {
    color: #000000 !important;
  }

  .arshe-icon-btn svg {
    filter: none !important;
    color: #000000 !important;
  }

  .arshe-menu-toggle span {
    background: #000000 !important;
    box-shadow: none !important;
  }

  .arshe-cart-count {
    background: #000000 !important;
    color: #FFFFFF !important;
  }

  /* Scrolled state - also dark black */
  .arshe-header.scrolled .arshe-header__logo,
  .arshe-header.scrolled .arshe-icon-btn {
    color: #000000 !important;
    text-shadow: none !important;
  }

  .arshe-header.scrolled .arshe-icon-btn svg {
    filter: none !important;
  }

  .arshe-header.scrolled .arshe-menu-toggle span {
    background: #000000 !important;
    box-shadow: none !important;
  }
}

/* ═══════════════════════════════════════════════
   🎁 DISCOVERY SET - WITH IMAGE
   ═══════════════════════════════════════════════ */

/* Hide old 3D vial elements */
.luxe-discovery__scene,
.luxe-discovery__box,
.luxe-discovery__ribbon,
.luxe-discovery__vials,
.luxe-discovery__vial,
.luxe-discovery__glow,
.luxe-discovery__particles {
  display: none !important;
}

/* New image wrapper */
.luxe-discovery__visual {
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: default !important;
  perspective: 1500px;
  position: relative;
}

.luxe-discovery__image-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #F5F1E8;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.08);
  transform: perspective(1500px) translateZ(0);
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.luxe-discovery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  animation: discoveryImageBreathe 20s ease-in-out infinite;
}

@keyframes discoveryImageBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Hover effect - lift and tilt */
.luxe-discovery__image-wrapper:hover {
  transform: perspective(1500px) translateZ(30px) rotateY(-3deg) rotateX(2deg);
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.25),
    0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Mobile - stack vertically */
@media (max-width: 899px) {
  .luxe-discovery__visual {
    aspect-ratio: 1/1;
    max-width: 100%;
    margin: 0 auto;
  }

  .luxe-discovery__image {
    object-fit: cover;
  }
}

/* ═══════════════════════════════════════════════
   📱 DISCOVERY - DESKTOP + MOBILE IMAGES
   ═══════════════════════════════════════════════ */

/* Show desktop image by default, hide mobile */
.luxe-discovery__image--desktop {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.luxe-discovery__image--mobile {
  display: none !important;
}

/* On mobile screens - switch images */
@media (max-width: 899px) {
  .luxe-discovery__image--desktop {
    display: none !important;
  }

  .luxe-discovery__image--mobile {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Adjust wrapper for square mobile image */
  .luxe-discovery__visual {
    aspect-ratio: 1/1 !important;
    max-width: 500px;
    margin: 0 auto;
  }

  .luxe-discovery__image-wrapper {
    aspect-ratio: 1/1;
  }
}

/* ═══════════════════════════════════════════════
   🎨 HOMEPAGE HERO - FLOATING IMAGE LIKE DISCOVERY
   Sides visible, background moving, premium 3D
   ═══════════════════════════════════════════════ */

/* Override existing hero styles */
.luxe-hero-image {
  min-height: 100vh !important;
  padding: 120px 40px 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  position: relative;
  overflow: visible !important;
}

/* Wrapper — Floating card style */
.luxe-hero-image__wrapper {
  width: 100% !important;
  max-width: 1400px !important;
  height: auto !important;
  aspect-ratio: 3/2 !important;
  overflow: hidden !important;
  background: #F5F1E8 !important;
  border-radius: 8px;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.2),
    0 15px 40px rgba(0, 0, 0, 0.12),
    0 5px 15px rgba(0, 0, 0, 0.08) !important;
  transform: perspective(1500px) translateZ(0);
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  z-index: 2;
}

/* Hover - 3D lift effect */
.luxe-hero-image__wrapper:hover {
  transform: perspective(1500px) translateZ(30px) rotateY(-1deg) rotateX(1deg) !important;
  box-shadow:
    0 60px 150px rgba(0, 0, 0, 0.28),
    0 25px 60px rgba(0, 0, 0, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Desktop image */
.luxe-hero-image__img,
.luxe-hero-image__img--desktop {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  animation: heroImageBreathe 25s ease-in-out infinite;
}

@keyframes heroImageBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Scroll indicator - move below the image */
.luxe-hero-image__scroll {
  position: absolute !important;
  bottom: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  color: #0A0A0A !important;
}

/* MOBILE - Same floating style */
@media (max-width: 899px) {
  .luxe-hero-image {
    padding: 100px 20px 60px !important;
    min-height: 100vh !important;
  }

  .luxe-hero-image__wrapper {
    aspect-ratio: 4/5 !important;
    max-width: 100% !important;
    border-radius: 6px;
    box-shadow:
      0 30px 70px rgba(0, 0, 0, 0.18),
      0 10px 25px rgba(0, 0, 0, 0.12) !important;
  }

  /* Show desktop image on mobile if no mobile version */
  .luxe-hero-image__img--desktop {
    display: block !important;
  }

  .luxe-hero-image__img--mobile {
    display: none !important;
  }

  /* If mobile image exists, use it */
  .luxe-hero-image__img--mobile[src] {
    display: block !important;
  }

  .luxe-hero-image__img--desktop + .luxe-hero-image__img--mobile[src] {
    display: block !important;
  }

  .luxe-hero-image__img--desktop:has(+ .luxe-hero-image__img--mobile[src]) {
    display: none !important;
  }

  /* Header BACK to transparent with dark text (since bg is visible around image) */
  .arshe-header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
  }

  .arshe-header__logo,
  .arshe-icon-btn {
    color: #000000 !important;
    text-shadow: none !important;
  }

  .arshe-icon-btn svg {
    filter: none !important;
  }

  .arshe-menu-toggle span {
    background: #000000 !important;
    box-shadow: none !important;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .luxe-hero-image {
    padding: 90px 15px 50px !important;
  }

  .luxe-hero-image__wrapper {
    aspect-ratio: 3/4 !important;
  }
}

/* ═══════════════════════════════════════════════
   📏 REDUCE GAP BETWEEN SECTIONS - MOBILE
   ═══════════════════════════════════════════════ */

/* Reduce hero padding on mobile */
@media (max-width: 899px) {
  .luxe-hero-image {
    padding: 80px 15px 20px !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Reduce discovery padding */
  .luxe-discovery {
    padding: 40px 20px !important;
    min-height: auto !important;
  }

  /* Reduce all section paddings on mobile */
  .luxe-carousel-section,
  .luxe-campaign,
  .luxe-notes,
  .luxe-quiz,
  .luxe-testimonials,
  .luxe-instagram,
  .luxe-newsletter,
  .luxe-story {
    padding: 60px 20px !important;
  }
}

/* Extra small screens - even tighter */
@media (max-width: 480px) {
  .luxe-hero-image {
    padding: 70px 10px 15px !important;
  }

  .luxe-discovery {
    padding: 30px 15px !important;
  }
}

/* Desktop - keep normal spacing */
@media (min-width: 900px) {
  .luxe-hero-image {
    padding: 120px 40px 60px !important;
    min-height: 100vh !important;
  }

  .luxe-discovery {
    padding: 100px 40px !important;
    min-height: auto !important;
  }
}

/* ═══════════════════════════════════════════════
   🎨 ARSHÉ WARM LUXURY BACKGROUND
   Update background to warm ivory (matches image)
   ═══════════════════════════════════════════════ */

/* Update background base to warm ivory */
.luxe-bg {
  background: #FFFFFF !important;
}

/* Update body ::before particles to warm tones */
body::before {
  background:
    radial-gradient(circle 180px at 15% 20%, rgba(184, 149, 90, 0.15) 0%, rgba(184, 149, 90, 0.08) 40%, transparent 70%),
    radial-gradient(circle 200px at 85% 15%, rgba(43, 41, 38, 0.10) 0%, rgba(43, 41, 38, 0.06) 40%, transparent 70%),
    radial-gradient(circle 220px at 50% 45%, rgba(184, 149, 90, 0.12) 0%, rgba(184, 149, 90, 0.06) 40%, transparent 70%),
    radial-gradient(circle 190px at 20% 75%, rgba(43, 41, 38, 0.10) 0%, rgba(43, 41, 38, 0.05) 40%, transparent 70%),
    radial-gradient(circle 210px at 80% 80%, rgba(184, 149, 90, 0.12) 0%, rgba(184, 149, 90, 0.06) 40%, transparent 70%),
    radial-gradient(circle 150px at 45% 25%, rgba(215, 185, 139, 0.15) 0%, transparent 70%),
    radial-gradient(circle 160px at 60% 70%, rgba(184, 149, 90, 0.10) 0%, transparent 70%) !important;
}

body::after {
  background:
    radial-gradient(circle 140px at 30% 40%, rgba(43, 41, 38, 0.08) 0%, transparent 70%),
    radial-gradient(circle 160px at 70% 30%, rgba(184, 149, 90, 0.10) 0%, transparent 70%),
    radial-gradient(circle 130px at 40% 90%, rgba(43, 41, 38, 0.08) 0%, transparent 70%),
    radial-gradient(circle 170px at 90% 60%, rgba(184, 149, 90, 0.10) 0%, transparent 70%),
    radial-gradient(circle 120px at 10% 50%, rgba(43, 41, 38, 0.08) 0%, transparent 70%),
    radial-gradient(circle 140px at 55% 15%, rgba(215, 185, 139, 0.12) 0%, transparent 70%) !important;
}

html::before {
  background:
    radial-gradient(circle 100px at 25% 60%, rgba(43, 41, 38, 0.12) 0%, transparent 65%),
    radial-gradient(circle 120px at 65% 85%, rgba(184, 149, 90, 0.14) 0%, transparent 65%),
    radial-gradient(circle 90px at 85% 40%, rgba(43, 41, 38, 0.14) 0%, transparent 65%),
    radial-gradient(circle 110px at 15% 30%, rgba(184, 149, 90, 0.12) 0%, transparent 65%),
    radial-gradient(circle 100px at 50% 75%, rgba(43, 41, 38, 0.12) 0%, transparent 65%),
    radial-gradient(circle 130px at 75% 20%, rgba(215, 185, 139, 0.15) 0%, transparent 65%) !important;
}

html::after {
  background:
    radial-gradient(circle 4px at 12% 18%, rgba(43, 41, 38, 0.6), transparent 60%),
    radial-gradient(circle 5px at 28% 32%, rgba(184, 149, 90, 0.8), transparent 60%),
    radial-gradient(circle 3px at 42% 15%, rgba(43, 41, 38, 0.5), transparent 60%),
    radial-gradient(circle 5px at 58% 45%, rgba(184, 149, 90, 0.8), transparent 60%),
    radial-gradient(circle 4px at 72% 22%, rgba(43, 41, 38, 0.6), transparent 60%),
    radial-gradient(circle 5px at 88% 38%, rgba(184, 149, 90, 0.8), transparent 60%),
    radial-gradient(circle 4px at 15% 55%, rgba(43, 41, 38, 0.6), transparent 60%),
    radial-gradient(circle 5px at 32% 68%, rgba(184, 149, 90, 0.8), transparent 60%),
    radial-gradient(circle 3px at 48% 82%, rgba(43, 41, 38, 0.5), transparent 60%),
    radial-gradient(circle 5px at 65% 72%, rgba(184, 149, 90, 0.8), transparent 60%),
    radial-gradient(circle 4px at 80% 88%, rgba(43, 41, 38, 0.6), transparent 60%),
    radial-gradient(circle 5px at 92% 62%, rgba(184, 149, 90, 0.8), transparent 60%),
    radial-gradient(circle 3px at 8% 88%, rgba(43, 41, 38, 0.5), transparent 60%),
    radial-gradient(circle 4px at 22% 95%, rgba(184, 149, 90, 0.8), transparent 60%),
    radial-gradient(circle 5px at 55% 92%, rgba(43, 41, 38, 0.6), transparent 60%) !important;
}

/* Update preloader background */
.luxe-preloader {
  background: #FFFFFF !important;
}

.luxe-preloader__space {
  background:
    radial-gradient(circle at 50% 50%, rgba(184, 149, 90, 0.1) 0%, transparent 60%),
    #FFFFFF !important;
}

.luxe-preloader__logo {
  color: #111111 !important;
}

.luxe-preloader__tagline {
  color: #444444 !important;
  letter-spacing: 6px !important;
}

.luxe-preloader__dot {
  background: #666666 !important;
}

.luxe-preloader__star {
  background: #111111 !important;
}

/* Body should be transparent */
body,
body.gradient {
  background: transparent !important;
  color: #111111 !important;
}

/* ═══════════════════════════════════════════════
   ✨ ARSHÉ HERO - CONVERSION FOCUSED
   Split layout: Content + Image
   ═══════════════════════════════════════════════ */

/* Hide old hero styles */
.luxe-hero-image {
  display: none !important;
}

/* New Hero */
.arshe-hero {
  position: relative;
  min-height: 100vh;
  padding: 100px 40px 60px;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 2;
}

.arshe-hero__container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
}

/* LEFT: Content */
.arshe-hero__content {
  animation: heroFadeUp 1.2s var(--ease-luxe) forwards;
}

.arshe-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #666666;
  margin-bottom: 32px;
  font-weight: 500;
}

.arshe-hero__eyebrow-line {
  flex: 1;
  height: 1px;
  background: #666666;
  max-width: 60px;
}

.arshe-hero__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 300;
  color: #111111;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 24px;
}

.arshe-hero__subtitle {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(18px, 2vw, 22px);
  color: #444444;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 40px;
  max-width: 480px;
}

/* PRICING */
.arshe-hero__pricing {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.arshe-hero__price-old {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 28px;
  color: #666666;
  text-decoration: line-through;
  font-weight: 400;
}

.arshe-hero__price-new {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 56px;
  color: #111111;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1;
}

.arshe-hero__price-save {
  padding: 6px 14px;
  background: #111111;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  border-radius: 2px;
}

/* VOUCHER */
.arshe-hero__voucher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(184, 149, 90, 0.08);
  border: 1px solid rgba(184, 149, 90, 0.2);
  color: #666666;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 40px;
  border-radius: 2px;
}

.arshe-hero__voucher-icon {
  font-size: 14px;
}

/* CTAs */
.arshe-hero__ctas {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.arshe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 40px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.4s var(--ease-luxe);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.arshe-btn--primary {
  background: #111111;
  color: #FFFFFF;
  border-color: #111111;
}

.arshe-btn--primary:hover {
  background: transparent;
  color: #111111;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.15);
}

.arshe-btn--secondary {
  background: transparent;
  color: #111111;
  border-color: #111111;
}

.arshe-btn--secondary:hover {
  background: #111111;
  color: #FFFFFF;
  transform: translateY(-2px);
}

.arshe-btn__arrow {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.arshe-btn:hover .arshe-btn__arrow {
  transform: translateX(5px);
}

/* TRUST */
.arshe-hero__trust {
  display: flex;
  align-items: center;
  gap: 16px;
}

.arshe-hero__stars {
  color: #666666;
  font-size: 16px;
  letter-spacing: 3px;
}

.arshe-hero__trust-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #444444;
  letter-spacing: 1px;
}

/* RIGHT: Visual */
.arshe-hero__visual {
  position: relative;
  animation: heroFadeIn 1.4s var(--ease-luxe) 0.3s both;
}

.arshe-hero__image-wrapper {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    0 40px 100px rgba(43, 41, 38, 0.15),
    0 15px 40px rgba(43, 41, 38, 0.1);
  background: #FFFFFF;
  transform: perspective(1500px) translateZ(0);
  transition: transform 0.8s var(--ease-luxe);
}

.arshe-hero__image-wrapper:hover {
  transform: perspective(1500px) translateZ(30px) rotateY(-2deg);
}

.arshe-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: heroImageBreathe 20s ease-in-out infinite;
}

.arshe-hero__image--mobile {
  display: none;
}

/* Animations */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes heroImageBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* SCROLL INDICATOR */
.arshe-hero__scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #444444;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0;
  animation: scrollFadeIn 1s ease 1.8s forwards;
}

.arshe-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, #111111, transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollFadeIn { to { opacity: 1; } }
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.4); opacity: 0.3; }
}

/* MOBILE */
@media (max-width: 899px) {
  .arshe-hero {
    padding: 60px 20px 40px;
    min-height: auto;
  }

  .arshe-hero__container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .arshe-hero__visual {
    order: -1;
  }

  .arshe-hero__image-wrapper {
    aspect-ratio: 3/4;
    max-width: 100%;
  }

  .arshe-hero__image--desktop {
    display: none;
  }

  .arshe-hero__image--mobile {
    display: block;
  }

  .arshe-hero__content {
    text-align: center;
    padding: 0 10px;
  }

  .arshe-hero__eyebrow {
    justify-content: center;
    margin-bottom: 20px;
  }

  .arshe-hero__subtitle {
    margin: 0 auto 32px;
  }

  .arshe-hero__pricing {
    justify-content: center;
  }

  .arshe-hero__voucher {
    text-align: center;
    justify-content: center;
  }

  .arshe-hero__ctas {
    flex-direction: column;
    width: 100%;
  }

  .arshe-btn {
    width: 100%;
    padding: 18px 30px;
  }

  .arshe-hero__trust {
    justify-content: center;
  }

  .arshe-hero__scroll {
    display: none;
  }
}

/* ═══════════════════════════════════════════════
   🎯 CRITICAL FIXES — WARM IVORY + ANNOUNCEMENT
   ═══════════════════════════════════════════════ */

/* ═══ 1. FORCE WARM IVORY BACKGROUND ═══ */
html {
  background: #FFFFFF !important;
}

body,
body.gradient {
  background: transparent !important;
  color: #111111 !important;
}

.luxe-bg {
  background: #FFFFFF !important;
}

/* Hide old white background gradients */
.luxe-bg::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(184, 149, 90, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(43, 41, 38, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(184, 149, 90, 0.04) 0%, transparent 60%) !important;
}

/* ═══ 2. FIX ANNOUNCEMENT BAR — THIN & SINGLE LINE ═══ */
.arshe-announcement {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 101 !important;
  background: #111111 !important;
  color: #FFFFFF !important;
  padding: 8px 0 !important;
  overflow: hidden !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.arshe-announcement__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 60px !important;
  white-space: nowrap !important;
  animation: announcementScroll 45s linear infinite !important;
  padding-left: 100% !important;
  width: max-content !important;
}

.arshe-announcement__item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  white-space: nowrap !important;
}

.arshe-announcement__dot {
  color: #B8B8B8 !important;
  font-size: 10px !important;
  opacity: 0.7 !important;
}

@keyframes announcementScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ═══ 3. FIX HEADER POSITION (below announcement) ═══ */
.arshe-header {
  top: 32px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}

.arshe-header.scrolled {
  top: 32px !important;
  background: rgba(245, 240, 232, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important;
}

/* Fix body padding to account for announcement bar */
body {
  padding-top: 0 !important;
}

/* Header text - dark black on warm bg */
.arshe-header__logo {
  color: #111111 !important;
}

.arshe-nav-link {
  color: #111111 !important;
}

.arshe-icon-btn {
  color: #111111 !important;
}

.arshe-cart-count {
  background: #111111 !important;
  color: #FFFFFF !important;
}

/* ═══ 4. MOBILE ANNOUNCEMENT ═══ */
@media (max-width: 899px) {
  .arshe-announcement {
    height: 28px !important;
    padding: 6px 0 !important;
  }

  .arshe-announcement__item {
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }

  .arshe-announcement__track {
    gap: 40px !important;
    animation-duration: 35s !important;
  }

  .arshe-header {
    top: 28px !important;
  }

  .arshe-header.scrolled {
    top: 28px !important;
  }
}

/* ═══ 5. HIDE PRELOADER LOGO TEXT-SHADOW ═══ */
.luxe-preloader__logo {
  color: #111111 !important;
  text-shadow: none !important;
}

.luxe-preloader__letter {
  color: #111111 !important;
  background: none !important;
  -webkit-text-fill-color: #111111 !important;
}

/* ═══ 6. PRELOADER BACKGROUND ═══ */
.luxe-preloader {
  background: #FFFFFF !important;
}

.luxe-preloader__space {
  background:
    radial-gradient(circle at 50% 50%, rgba(184, 149, 90, 0.1) 0%, transparent 60%),
    #FFFFFF !important;
}

.luxe-preloader__tagline {
  color: #444444 !important;
}

.luxe-preloader__dot {
  background: #666666 !important;
  box-shadow: 0 0 8px rgba(184, 149, 90, 0.3) !important;
}

.luxe-preloader__star {
  background: #111111 !important;
  box-shadow: 0 0 6px rgba(17, 17, 17, 0.3) !important;
}

.luxe-preloader__glow {
  background: radial-gradient(circle, rgba(184, 149, 90, 0.15) 0%, transparent 60%) !important;
}

/* ═══ 7. HIDE ANNOUNCEMENT DURING PRELOADER ═══ */
body.luxe-loading .arshe-announcement {
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

body.luxe-header-visible .arshe-announcement {
  opacity: 1;
  visibility: visible;
  transition: all 0.6s ease;
}

/* ═══ 8. HIDE STICKY BAR BY DEFAULT ═══ */
.arshe-sticky-bar {
  display: none !important;
}

/* ═══════════════════════════════════════════════
   🎨 MATCH WEBSITE THEME TO PRODUCT PHOTO
   Warm cream/beige with natural sunlight feel
   ═══════════════════════════════════════════════ */

/* Main background - warm cream (matches product photo) */
html {
  background: #EEEEEE !important;
}

body,
body.gradient {
  background: transparent !important;
  color: #171717 !important;
}

.luxe-bg {
  background: #EEEEEE !important;
}

/* Ambient gradients - warm champagne tones */
.luxe-bg::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(184, 149, 90, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(90, 75, 55, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(215, 195, 165, 0.08) 0%, transparent 60%) !important;
}

/* Update floating particles - warm palette */
body::before {
  background:
    radial-gradient(circle 180px at 15% 20%, rgba(184, 149, 90, 0.18) 0%, rgba(184, 149, 90, 0.10) 40%, transparent 70%),
    radial-gradient(circle 200px at 85% 15%, rgba(90, 75, 55, 0.12) 0%, rgba(90, 75, 55, 0.06) 40%, transparent 70%),
    radial-gradient(circle 220px at 50% 45%, rgba(184, 149, 90, 0.14) 0%, rgba(184, 149, 90, 0.08) 40%, transparent 70%),
    radial-gradient(circle 190px at 20% 75%, rgba(90, 75, 55, 0.12) 0%, rgba(90, 75, 55, 0.06) 40%, transparent 70%),
    radial-gradient(circle 210px at 80% 80%, rgba(184, 149, 90, 0.14) 0%, rgba(184, 149, 90, 0.08) 40%, transparent 70%),
    radial-gradient(circle 150px at 45% 25%, rgba(215, 185, 139, 0.18) 0%, transparent 70%),
    radial-gradient(circle 160px at 60% 70%, rgba(184, 149, 90, 0.12) 0%, transparent 70%) !important;
}

body::after {
  background:
    radial-gradient(circle 140px at 30% 40%, rgba(90, 75, 55, 0.10) 0%, transparent 70%),
    radial-gradient(circle 160px at 70% 30%, rgba(184, 149, 90, 0.12) 0%, transparent 70%),
    radial-gradient(circle 130px at 40% 90%, rgba(90, 75, 55, 0.10) 0%, transparent 70%),
    radial-gradient(circle 170px at 90% 60%, rgba(184, 149, 90, 0.12) 0%, transparent 70%),
    radial-gradient(circle 120px at 10% 50%, rgba(90, 75, 55, 0.10) 0%, transparent 70%),
    radial-gradient(circle 140px at 55% 15%, rgba(215, 185, 139, 0.14) 0%, transparent 70%) !important;
}

html::before {
  background:
    radial-gradient(circle 100px at 25% 60%, rgba(90, 75, 55, 0.14) 0%, transparent 65%),
    radial-gradient(circle 120px at 65% 85%, rgba(184, 149, 90, 0.16) 0%, transparent 65%),
    radial-gradient(circle 90px at 85% 40%, rgba(90, 75, 55, 0.16) 0%, transparent 65%),
    radial-gradient(circle 110px at 15% 30%, rgba(184, 149, 90, 0.14) 0%, transparent 65%),
    radial-gradient(circle 100px at 50% 75%, rgba(90, 75, 55, 0.14) 0%, transparent 65%),
    radial-gradient(circle 130px at 75% 20%, rgba(215, 185, 139, 0.16) 0%, transparent 65%) !important;
}

/* Sparkles - warm gold tones */
html::after {
  background:
    radial-gradient(circle 4px at 12% 18%, rgba(90, 75, 55, 0.7), transparent 60%),
    radial-gradient(circle 5px at 28% 32%, rgba(184, 149, 90, 0.9), transparent 60%),
    radial-gradient(circle 3px at 42% 15%, rgba(90, 75, 55, 0.6), transparent 60%),
    radial-gradient(circle 5px at 58% 45%, rgba(184, 149, 90, 0.9), transparent 60%),
    radial-gradient(circle 4px at 72% 22%, rgba(90, 75, 55, 0.7), transparent 60%),
    radial-gradient(circle 5px at 88% 38%, rgba(184, 149, 90, 0.9), transparent 60%),
    radial-gradient(circle 4px at 15% 55%, rgba(90, 75, 55, 0.7), transparent 60%),
    radial-gradient(circle 5px at 32% 68%, rgba(184, 149, 90, 0.9), transparent 60%),
    radial-gradient(circle 3px at 48% 82%, rgba(90, 75, 55, 0.6), transparent 60%),
    radial-gradient(circle 5px at 65% 72%, rgba(184, 149, 90, 0.9), transparent 60%),
    radial-gradient(circle 4px at 80% 88%, rgba(90, 75, 55, 0.7), transparent 60%),
    radial-gradient(circle 5px at 92% 62%, rgba(184, 149, 90, 0.9), transparent 60%),
    radial-gradient(circle 3px at 8% 88%, rgba(90, 75, 55, 0.6), transparent 60%),
    radial-gradient(circle 4px at 22% 95%, rgba(184, 149, 90, 0.9), transparent 60%),
    radial-gradient(circle 5px at 55% 92%, rgba(90, 75, 55, 0.7), transparent 60%) !important;
}

/* Update preloader to match */
.luxe-preloader {
  background: #EEEEEE !important;
}

.luxe-preloader__space {
  background:
    radial-gradient(circle at 50% 50%, rgba(184, 149, 90, 0.12) 0%, transparent 60%),
    #EEEEEE !important;
}

.luxe-preloader__logo,
.luxe-preloader__letter {
  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;
}

.luxe-preloader__tagline {
  color: #444444 !important;
}

.luxe-preloader__dot {
  background: #666666 !important;
}

.luxe-preloader__star {
  background: #444444 !important;
}

/* Header background - subtle warm cream */
.arshe-header {
  background: transparent !important;
}

.arshe-header.scrolled {
  background: rgba(231, 217, 196, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(90, 75, 55, 0.1) !important;
}

/* Header text - dark warm brown */
.arshe-header__logo {
  color: #171717 !important;
}

.arshe-nav-link {
  color: #171717 !important;
}

.arshe-icon-btn {
  color: #171717 !important;
}

.arshe-cart-count {
  background: #171717 !important;
  color: #EEEEEE !important;
}

/* Section backgrounds - transparent to show warm cream */
.luxe-hero,
.arshe-hero,
.luxe-discovery,
.luxe-carousel-section,
.luxe-campaign,
.luxe-notes,
.luxe-quiz,
.luxe-testimonials,
.luxe-instagram,
.luxe-newsletter,
.luxe-story,
main,
#MainContent,
.shopify-section {
  background: transparent !important;
}

/* All body text - warm dark */
body {
  color: #171717 !important;
}

/* ═══════════════════════════════════════════════
   ✨ ARSHÉ HERO - CONVERSION FOCUSED
   Split layout: Content + Image
   ═══════════════════════════════════════════════ */

/* Hide old hero styles */
.luxe-hero-image,
.luxe-hero {
  display: none !important;
}

/* NEW HERO */
.arshe-hero {
  position: relative;
  min-height: calc(100vh - 32px);
  padding: 80px 40px 60px;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 2;
}

.arshe-hero__container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
}

/* LEFT: Content */
.arshe-hero__content {
  animation: heroContentFadeUp 1.2s var(--ease-luxe) forwards;
}

@keyframes heroContentFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.arshe-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #666666;
  margin-bottom: 32px;
  font-weight: 500;
}

.arshe-hero__eyebrow-line {
  height: 1px;
  background: #666666;
  flex: 0 0 60px;
}

.arshe-hero__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(42px, 5.5vw, 72px);
  font-weight: 300;
  color: #171717;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 24px;
}

.arshe-hero__subtitle {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(17px, 1.8vw, 20px);
  color: #444444;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 36px;
  max-width: 480px;
}

/* PRICING */
.arshe-hero__pricing {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.arshe-hero__price-old {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 26px;
  color: #666666;
  text-decoration: line-through;
  font-weight: 400;
}

.arshe-hero__price-new {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 52px;
  color: #171717;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1;
}

.arshe-hero__price-save {
  padding: 6px 14px;
  background: #171717;
  color: #EEEEEE;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  border-radius: 2px;
}

/* VOUCHER */
.arshe-hero__voucher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(184, 149, 90, 0.12);
  border: 1px solid rgba(184, 149, 90, 0.3);
  color: #8B6F3D;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 36px;
  border-radius: 2px;
}

.arshe-hero__voucher-icon {
  font-size: 14px;
  color: #666666;
}

/* CTAs */
.arshe-hero__ctas {
  display: flex;
  gap: 14px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.arshe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 36px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.4s var(--ease-luxe);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.arshe-btn--primary {
  background: #171717;
  color: #EEEEEE;
  border-color: #171717;
}

.arshe-btn--primary:hover {
  background: transparent;
  color: #171717;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(43, 41, 38, 0.2);
}

.arshe-btn--secondary {
  background: transparent;
  color: #171717;
  border-color: #171717;
}

.arshe-btn--secondary:hover {
  background: #171717;
  color: #EEEEEE;
  transform: translateY(-2px);
}

.arshe-btn__arrow {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.arshe-btn:hover .arshe-btn__arrow {
  transform: translateX(5px);
}

/* TRUST */
.arshe-hero__trust {
  display: flex;
  align-items: center;
  gap: 14px;
}

.arshe-hero__stars {
  color: #666666;
  font-size: 16px;
  letter-spacing: 3px;
}

.arshe-hero__trust-text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #444444;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* RIGHT: Image */
.arshe-hero__visual {
  animation: heroImageFadeIn 1.4s var(--ease-luxe) 0.3s both;
}

@keyframes heroImageFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.arshe-hero__image-wrapper {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    0 40px 100px rgba(43, 41, 38, 0.15),
    0 15px 40px rgba(43, 41, 38, 0.1);
  background: #EEEEEE;
  transform: perspective(1500px) translateZ(0);
  transition: transform 0.8s var(--ease-luxe);
}

.arshe-hero__image-wrapper:hover {
  transform: perspective(1500px) translateZ(30px) rotateY(-2deg);
}

.arshe-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: heroImageBreathe 20s ease-in-out infinite;
}

.arshe-hero__image--mobile {
  display: none;
}

@keyframes heroImageBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* MOBILE */
@media (max-width: 899px) {
  .arshe-hero {
    padding: 40px 20px 40px;
    min-height: auto;
  }

  .arshe-hero__container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .arshe-hero__visual {
    order: -1;
  }

  .arshe-hero__image-wrapper {
    aspect-ratio: 3/4;
    max-width: 100%;
  }

  .arshe-hero__image--desktop {
    display: none;
  }

  .arshe-hero__image--mobile {
    display: block;
  }

  .arshe-hero__content {
    text-align: center;
    padding: 0 10px;
  }

  .arshe-hero__eyebrow {
    justify-content: center;
    margin-bottom: 20px;
  }

  .arshe-hero__title {
    font-size: clamp(36px, 8vw, 48px);
  }

  .arshe-hero__subtitle {
    margin: 0 auto 28px;
  }

  .arshe-hero__pricing {
    justify-content: center;
  }

  .arshe-hero__price-new {
    font-size: 44px;
  }

  .arshe-hero__voucher {
    text-align: center;
    justify-content: center;
    margin-bottom: 28px;
  }

  .arshe-hero__ctas {
    flex-direction: column;
    width: 100%;
  }

  .arshe-btn {
    width: 100%;
    padding: 16px 30px;
  }

  .arshe-hero__trust {
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════
   💎 ARSHÉ BENEFITS SECTION
   4 elegant benefit cards
   ═══════════════════════════════════════════════ */

.arshe-benefits {
  padding: 100px 40px;
  position: relative;
  z-index: 2;
}

.arshe-benefits__container {
  max-width: 1400px;
  margin: 0 auto;
}

.arshe-benefits__header {
  text-align: center;
  margin-bottom: 70px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.arshe-benefits__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 300;
  color: #171717;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.arshe-benefits__subtitle {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(16px, 1.6vw, 19px);
  color: #444444;
  line-height: 1.6;
  font-style: italic;
}

.arshe-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.arshe-benefits__card {
  text-align: center;
  padding: 32px 20px;
  transition: transform 0.6s var(--ease-luxe);
}

.arshe-benefits__card:hover {
  transform: translateY(-8px);
}

.arshe-benefits__icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 24px;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s var(--ease-luxe);
}

.arshe-benefits__card:hover .arshe-benefits__icon {
  transform: scale(1.1) rotate(5deg);
}

.arshe-benefits__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1;
}

.arshe-benefits__label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #666666;
  margin-bottom: 12px;
}

.arshe-benefits__heading {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #171717;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.arshe-benefits__text {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 15px;
  color: #444444;
  line-height: 1.6;
  font-style: italic;
  max-width: 200px;
  margin: 0 auto;
}

/* Elegant divider between cards on desktop */
@media (min-width: 900px) {
  .arshe-benefits__card {
    position: relative;
  }

  .arshe-benefits__card:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 30%;
    height: 40%;
    width: 1px;
    background: rgba(184, 149, 90, 0.2);
  }
}

/* TABLET */
@media (max-width: 1024px) {
  .arshe-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }

  .arshe-benefits__card:nth-child(2)::after {
    display: none;
  }
}

/* MOBILE */
@media (max-width: 640px) {
  .arshe-benefits {
    padding: 60px 20px;
  }

  .arshe-benefits__header {
    margin-bottom: 40px;
  }

  .arshe-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 15px;
  }

  .arshe-benefits__card {
    padding: 20px 10px;
  }

  .arshe-benefits__icon {
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
  }

  .arshe-benefits__label {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .arshe-benefits__heading {
    font-size: 18px;
  }

  .arshe-benefits__text {
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════
   🎁 ARSHÉ DISCOVERY SET - CONVERSION POWERHOUSE
   ═══════════════════════════════════════════════ */

/* Hide OLD 3D vial elements */
.luxe-discovery__scene,
.luxe-discovery__box,
.luxe-discovery__ribbon,
.luxe-discovery__vials,
.luxe-discovery__vial,
.luxe-discovery__glow,
.luxe-discovery__particles,
.luxe-discovery__spark {
  display: none !important;
}

/* NEW Discovery Section */
.arshe-discovery {
  padding: 100px 40px;
  position: relative;
  z-index: 2;
}

.arshe-discovery__container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* LEFT: Image with Badge */
.arshe-discovery__visual {
  position: relative;
}

.arshe-discovery__badge {
  position: absolute;
  top: -12px;
  left: -12px;
  z-index: 5;
  background: #171717;
  color: #EEEEEE;
  padding: 10px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(43, 41, 38, 0.2);
  animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.arshe-discovery__image-wrapper {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    0 40px 100px rgba(43, 41, 38, 0.18),
    0 15px 40px rgba(43, 41, 38, 0.1);
  background: #EEEEEE;
  transform: perspective(1500px) translateZ(0);
  transition: transform 0.8s var(--ease-luxe);
}

.arshe-discovery__image-wrapper:hover {
  transform: perspective(1500px) translateZ(30px) rotateY(2deg);
  box-shadow:
    0 50px 120px rgba(43, 41, 38, 0.25),
    0 20px 50px rgba(43, 41, 38, 0.15);
}

.arshe-discovery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: discoveryImageBreathe 20s ease-in-out infinite;
}

@keyframes discoveryImageBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* RIGHT: Content */
.arshe-discovery__content {
  padding: 20px 0;
}

.arshe-discovery__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #666666;
  margin-bottom: 24px;
}

.arshe-discovery__eyebrow-line {
  width: 40px;
  height: 1px;
  background: #666666;
}

.arshe-discovery__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 300;
  color: #171717;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.arshe-discovery__title em {
  font-style: italic;
  color: #666666;
}

.arshe-discovery__subtitle {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 18px;
  color: #444444;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 32px;
  max-width: 500px;
}

/* FEATURES */
.arshe-discovery__features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}

.arshe-discovery__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #171717;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.arshe-discovery__feature-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #666666;
  color: #FFFFFF;
  border-radius: 50%;
  flex-shrink: 0;
}

/* PRICING BOX */
.arshe-discovery__pricing-box {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: rgba(184, 149, 90, 0.08);
  border: 1px solid rgba(184, 149, 90, 0.2);
  border-radius: 4px;
  margin-bottom: 24px;
}

.arshe-discovery__pricing {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.arshe-discovery__price-old {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 24px;
  color: #666666;
  text-decoration: line-through;
  font-weight: 400;
}

.arshe-discovery__price-new {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 48px;
  color: #171717;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
}

.arshe-discovery__save-badge {
  padding: 6px 14px;
  background: #171717;
  color: #EEEEEE;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  border-radius: 2px;
}

/* CTA BUTTON */
.arshe-discovery__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 22px 40px;
  background: #171717;
  color: #EEEEEE;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  margin-bottom: 24px;
  transition: all 0.4s var(--ease-luxe);
  position: relative;
  overflow: hidden;
}

.arshe-discovery__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #666666, #8B6F3D);
  transform: translateX(-100%);
  transition: transform 0.4s var(--ease-luxe);
  z-index: 0;
}

.arshe-discovery__cta:hover::before {
  transform: translateX(0);
}

.arshe-discovery__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(43, 41, 38, 0.25);
}

.arshe-discovery__cta > * {
  position: relative;
  z-index: 1;
}

.arshe-discovery__cta-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.arshe-discovery__cta:hover .arshe-discovery__cta-arrow {
  transform: translateX(6px);
}

/* TRUST ROW */
.arshe-discovery__trust {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(184, 149, 90, 0.15);
  border-bottom: 1px solid rgba(184, 149, 90, 0.15);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.arshe-discovery__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #444444;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
}

.arshe-discovery__trust-icon {
  color: #666666;
  font-size: 10px;
}

/* URGENCY */
.arshe-discovery__urgency {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: #8B6F3D;
  letter-spacing: 1px;
}

.arshe-discovery__urgency-dot {
  width: 8px;
  height: 8px;
  background: #666666;
  border-radius: 50%;
  animation: urgencyPulse 2s ease-in-out infinite;
}

@keyframes urgencyPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(184, 149, 90, 0.4);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
    box-shadow: 0 0 0 8px rgba(184, 149, 90, 0);
  }
}

/* MOBILE */
@media (max-width: 899px) {
  .arshe-discovery {
    padding: 60px 20px;
  }

  .arshe-discovery__container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .arshe-discovery__badge {
    top: -8px;
    left: -8px;
    padding: 8px 14px;
    font-size: 9px;
  }

  .arshe-discovery__image-wrapper {
    aspect-ratio: 4/3;
  }

  .arshe-discovery__content {
    padding: 0 10px;
    text-align: center;
  }

  .arshe-discovery__eyebrow {
    justify-content: center;
  }

  .arshe-discovery__subtitle {
    margin: 0 auto 28px;
  }

  .arshe-discovery__features {
    grid-template-columns: 1fr;
    text-align: left;
    max-width: 300px;
    margin: 0 auto 28px;
  }

  .arshe-discovery__pricing-box {
    flex-direction: column;
    gap: 12px;
    padding: 20px;
  }

  .arshe-discovery__pricing {
    justify-content: center;
  }

  .arshe-discovery__price-new {
    font-size: 42px;
  }

  .arshe-discovery__cta {
    padding: 18px 30px;
    font-size: 12px;
  }

  .arshe-discovery__trust {
    justify-content: center;
    gap: 16px;
  }

  .arshe-discovery__urgency {
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════
   🎯 ARSHÉ HERO - REAL BUSINESS MODEL
   Clean pricing · No fake discounts
   ═══════════════════════════════════════════════ */

/* Hide old fake pricing elements */
.arshe-hero__price-old,
.arshe-hero__price-new,
.arshe-hero__price-save,
.arshe-hero__voucher,
.arshe-hero__trust {
  display: none !important;
}

/* NEW clean pricing */
.arshe-hero__pricing {
  margin-bottom: 36px !important;
}

.arshe-hero__price-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px 32px;
  background: rgba(43, 41, 38, 0.04);
  border-left: 3px solid #666666;
  border-radius: 2px;
}

.arshe-hero__price {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 52px;
  color: #171717;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
}

.arshe-hero__price-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #444444;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
}

/* Journey visualization */
.arshe-hero__journey {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(184, 149, 90, 0.2);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: #444444;
}

.arshe-hero__journey-step {
  color: #171717;
}

.arshe-hero__journey-arrow {
  color: #666666;
  font-size: 14px;
}

/* MOBILE */
@media (max-width: 899px) {
  .arshe-hero__price-block {
    padding: 16px 24px;
    align-items: center;
  }

  .arshe-hero__price {
    font-size: 44px;
  }

  .arshe-hero__pricing {
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .arshe-hero__journey {
    justify-content: center;
    font-size: 9px;
    letter-spacing: 2px;
    gap: 8px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .arshe-hero__journey {
    flex-direction: column;
    gap: 8px;
  }

  .arshe-hero__journey-arrow {
    transform: rotate(90deg);
    display: inline-block;
  }
}

/* ═══════════════════════════════════════════════
   🎁 DISCOVERY SET - REAL PRICING VERSION
   ═══════════════════════════════════════════════ */

/* Hide old fake elements */
.arshe-discovery__badge,
.arshe-discovery__price-old,
.arshe-discovery__save-badge,
.arshe-discovery__trust,
.arshe-discovery__urgency {
  display: none !important;
}

/* Update pricing (hide old) */
.arshe-discovery__pricing {
  display: none !important;
}

/* NEW pricing box */
.arshe-discovery__pricing-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 24px 28px !important;
  background: rgba(43, 41, 38, 0.04) !important;
  border-left: 3px solid #666666 !important;
  border-radius: 2px !important;
  margin-bottom: 28px !important;
}

.arshe-discovery__price-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.arshe-discovery__price-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #666666;
}

.arshe-discovery__price {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 48px !important;
  color: #171717 !important;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
}

.arshe-discovery__price-note {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #666666;
  letter-spacing: 1px;
  font-style: italic;
  margin-top: 8px;
}

/* WHAT'S INSIDE Block */
.arshe-discovery__whats-inside {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(184, 149, 90, 0.08), rgba(215, 185, 139, 0.04));
  border: 1px solid rgba(184, 149, 90, 0.15);
  border-radius: 2px;
  margin-bottom: 28px;
  text-align: center;
}

.arshe-discovery__whats-inside-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #666666;
  margin-bottom: 12px;
}

.arshe-discovery__quantity {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
  font-family: 'DM Serif Display', Georgia, serif;
  color: #171717;
}

.arshe-discovery__quantity-number {
  font-size: 42px;
  font-weight: 500;
  line-height: 1;
}

.arshe-discovery__quantity-x {
  font-size: 24px;
  color: #666666;
  font-style: italic;
}

.arshe-discovery__quantity-size {
  font-size: 28px;
  font-weight: 400;
}

.arshe-discovery__quantity-desc {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 15px;
  color: #444444;
  font-style: italic;
  letter-spacing: 1px;
}

/* MOBILE */
@media (max-width: 899px) {
  .arshe-discovery__pricing-box {
    align-items: center !important;
    text-align: center !important;
    padding: 20px 24px !important;
  }

  .arshe-discovery__price-info {
    align-items: center;
  }

  .arshe-discovery__price {
    font-size: 42px !important;
  }

  .arshe-discovery__whats-inside {
    padding: 18px 20px;
  }

  .arshe-discovery__quantity-number {
    font-size: 36px;
  }
} 

/* ═══════════════════════════════════════════════
   💎 ARSHÉ DISCOVERY RITUAL
   5-step vertical timeline experience
   ═══════════════════════════════════════════════ */

.arshe-ritual {
  padding: 100px 40px;
  position: relative;
  z-index: 2;
}

.arshe-ritual__container {
  max-width: 900px;
  margin: 0 auto;
}

/* HEADER */
.arshe-ritual__header {
  text-align: center;
  margin-bottom: 70px;
}

.arshe-ritual__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #666666;
  margin-bottom: 24px;
}

.arshe-ritual__eyebrow-line {
  width: 40px;
  height: 1px;
  background: #666666;
}

.arshe-ritual__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 300;
  color: #171717;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.arshe-ritual__subtitle {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 19px;
  color: #444444;
  line-height: 1.6;
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
}

/* TIMELINE */
.arshe-ritual__timeline {
  position: relative;
  margin-bottom: 60px;
}

.arshe-ritual__step {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 30px 0;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: ritualStepIn 0.8s var(--ease-luxe) forwards;
}

.arshe-ritual__step:nth-child(1) { animation-delay: 0.1s; }
.arshe-ritual__step:nth-child(2) { animation-delay: 0.2s; }
.arshe-ritual__step:nth-child(3) { animation-delay: 0.3s; }
.arshe-ritual__step:nth-child(4) { animation-delay: 0.4s; }
.arshe-ritual__step:nth-child(5) { animation-delay: 0.5s; }

@keyframes ritualStepIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Left side (number + line) */
.arshe-ritual__step-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 80px;
}

.arshe-ritual__step-number {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 42px;
  font-weight: 300;
  color: #666666;
  font-style: italic;
  line-height: 1;
  padding-bottom: 20px;
  background: transparent;
  z-index: 2;
  position: relative;
}

.arshe-ritual__step-line {
  width: 1px;
  flex: 1;
  min-height: 100px;
  background: linear-gradient(180deg, #666666 0%, rgba(184, 149, 90, 0.2) 100%);
  position: relative;
}

.arshe-ritual__step-line::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #666666;
}

/* Content */
.arshe-ritual__step-content {
  flex: 1;
  padding-bottom: 20px;
}

.arshe-ritual__step-icon {
  width: 48px;
  height: 48px;
  color: #444444;
  margin-bottom: 20px;
  transition: transform 0.4s var(--ease-luxe);
}

.arshe-ritual__step:hover .arshe-ritual__step-icon {
  transform: scale(1.1) rotate(-5deg);
  color: #666666;
}

.arshe-ritual__step-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #666666;
  margin-bottom: 12px;
}

.arshe-ritual__step-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  color: #171717;
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
}

.arshe-ritual__step-desc {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 17px;
  color: #444444;
  line-height: 1.6;
  font-style: italic;
  max-width: 500px;
}

/* Highlighted step (last one) */
.arshe-ritual__step--highlight .arshe-ritual__step-content {
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(184, 149, 90, 0.08), rgba(215, 185, 139, 0.04));
  border-left: 3px solid #666666;
  border-radius: 2px;
  margin-left: 0;
}

/* Price tag in last step */
.arshe-ritual__price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 18px;
  background: rgba(43, 41, 38, 0.06);
  border: 1px solid rgba(184, 149, 90, 0.25);
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #444444;
}

.arshe-ritual__price-tag-price {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  color: #171717;
  font-weight: 500;
  letter-spacing: -0.5px;
}

/* CTA */
.arshe-ritual__cta-wrap {
  text-align: center;
  padding-top: 20px;
}

.arshe-ritual__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 44px;
  background: #171717;
  color: #EEEEEE;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #171717;
  border-radius: 2px;
  transition: all 0.4s var(--ease-luxe);
}

.arshe-ritual__cta:hover {
  background: transparent;
  color: #171717;
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(43, 41, 38, 0.2);
}

.arshe-ritual__cta-arrow {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.arshe-ritual__cta:hover .arshe-ritual__cta-arrow {
  transform: translateX(6px);
}

.arshe-ritual__cta-note {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 14px;
  color: #666666;
  font-style: italic;
  margin-top: 16px;
  letter-spacing: 1px;
}

/* MOBILE */
@media (max-width: 899px) {
  .arshe-ritual {
    padding: 60px 20px;
  }

  .arshe-ritual__header {
    margin-bottom: 50px;
  }

  .arshe-ritual__step {
    gap: 20px;
    padding: 20px 0;
  }

  .arshe-ritual__step-side {
    width: 50px;
  }

  .arshe-ritual__step-number {
    font-size: 32px;
    padding-bottom: 16px;
  }

  .arshe-ritual__step-line {
    min-height: 60px;
  }

  .arshe-ritual__step-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
  }

  .arshe-ritual__step-title {
    font-size: 22px;
  }

  .arshe-ritual__step-desc {
    font-size: 15px;
  }

  .arshe-ritual__step--highlight .arshe-ritual__step-content {
    padding: 20px 22px;
  }

  .arshe-ritual__cta {
    width: 100%;
    padding: 18px 30px;
  }
}

/* ═══════════════════════════════════════════════
   🎬 CINEMATIC SCROLL ANIMATIONS
   Premium reveal effects for entire site
   ═══════════════════════════════════════════════ */

/* Base reveal states */
[data-scroll],
.arshe-hero__content,
.arshe-hero__visual,
.arshe-benefits__header,
.arshe-benefits__card,
.arshe-discovery__visual,
.arshe-discovery__content,
.arshe-ritual__header,
.arshe-ritual__step,
.arshe-ritual__cta-wrap,
.luxe-carousel-header,
.luxe-carousel,
.luxe-campaign__visual,
.luxe-campaign__content,
.luxe-notes__container > *,
.luxe-quiz__container > *,
.luxe-testimonials__container > *,
.luxe-instagram__container > * {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 1s cubic-bezier(0.19, 1, 0.22, 1),
    transform 1s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: opacity, transform;
}

/* Visible state - animate in */
[data-scroll].in-view,
.in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Slide from left */
[data-scroll="left"],
.arshe-hero__content,
.arshe-discovery__visual,
.arshe-campaign__visual {
  transform: translateX(-60px);
}

[data-scroll="left"].in-view,
.arshe-hero__content.in-view,
.arshe-discovery__visual.in-view,
.arshe-campaign__visual.in-view {
  transform: translateX(0) !important;
}

/* Slide from right */
[data-scroll="right"],
.arshe-hero__visual,
.arshe-discovery__content,
.arshe-campaign__content {
  transform: translateX(60px);
}

[data-scroll="right"].in-view,
.arshe-hero__visual.in-view,
.arshe-discovery__content.in-view,
.arshe-campaign__content.in-view {
  transform: translateX(0) !important;
}

/* Scale in effect */
[data-scroll="scale"],
.arshe-benefits__card,
.luxe-note-card,
.luxe-instagram__item,
.luxe-testimonial {
  opacity: 0;
  transform: scale(0.9);
}

[data-scroll="scale"].in-view,
.arshe-benefits__card.in-view,
.luxe-note-card.in-view,
.luxe-instagram__item.in-view,
.luxe-testimonial.in-view {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Staggered delays for grids */
.arshe-benefits__card:nth-child(1) { transition-delay: 0s; }
.arshe-benefits__card:nth-child(2) { transition-delay: 0.15s; }
.arshe-benefits__card:nth-child(3) { transition-delay: 0.3s; }
.arshe-benefits__card:nth-child(4) { transition-delay: 0.45s; }

.arshe-ritual__step:nth-child(1) { transition-delay: 0s; }
.arshe-ritual__step:nth-child(2) { transition-delay: 0.2s; }
.arshe-ritual__step:nth-child(3) { transition-delay: 0.4s; }
.arshe-ritual__step:nth-child(4) { transition-delay: 0.6s; }
.arshe-ritual__step:nth-child(5) { transition-delay: 0.8s; }

.luxe-note-card:nth-child(1) { transition-delay: 0s; }
.luxe-note-card:nth-child(2) { transition-delay: 0.1s; }
.luxe-note-card:nth-child(3) { transition-delay: 0.2s; }
.luxe-note-card:nth-child(4) { transition-delay: 0.3s; }
.luxe-note-card:nth-child(5) { transition-delay: 0.4s; }
.luxe-note-card:nth-child(6) { transition-delay: 0.5s; }
.luxe-note-card:nth-child(7) { transition-delay: 0.6s; }
.luxe-note-card:nth-child(8) { transition-delay: 0.7s; }

.luxe-instagram__item:nth-child(1) { transition-delay: 0s; }
.luxe-instagram__item:nth-child(2) { transition-delay: 0.08s; }
.luxe-instagram__item:nth-child(3) { transition-delay: 0.16s; }
.luxe-instagram__item:nth-child(4) { transition-delay: 0.24s; }
.luxe-instagram__item:nth-child(5) { transition-delay: 0.32s; }
.luxe-instagram__item:nth-child(6) { transition-delay: 0.4s; }

.luxe-testimonial:nth-child(1) { transition-delay: 0s; }
.luxe-testimonial:nth-child(2) { transition-delay: 0.15s; }
.luxe-testimonial:nth-child(3) { transition-delay: 0.3s; }

/* ═══ PARALLAX EFFECTS ═══ */

/* Image parallax on scroll */
.arshe-hero__image-wrapper,
.arshe-discovery__image-wrapper,
.luxe-campaign__visual {
  transition: transform 0.1s ease-out;
}

/* ═══ SECTION HEADERS - Extra dramatic ═══ */

.arshe-benefits__header,
.arshe-ritual__header,
.luxe-carousel-header {
  transform: translateY(60px);
}

/* Sub-elements of headers (eyebrow, title, subtitle) */
.arshe-benefits__header > *,
.arshe-ritual__header > *,
.luxe-carousel-header > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.arshe-benefits__header.in-view > *:nth-child(1),
.arshe-ritual__header.in-view > *:nth-child(1),
.luxe-carousel-header.in-view > *:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.arshe-benefits__header.in-view > *:nth-child(2),
.arshe-ritual__header.in-view > *:nth-child(2),
.luxe-carousel-header.in-view > *:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.arshe-benefits__header.in-view > *:nth-child(3),
.arshe-ritual__header.in-view > *:nth-child(3),
.luxe-carousel-header.in-view > *:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

/* ═══ TEXT REVEAL ANIMATIONS ═══ */

.arshe-hero__title,
.arshe-discovery__title,
.arshe-ritual__title,
.luxe-section-title {
  overflow: hidden;
  position: relative;
}

.arshe-hero__title::after,
.arshe-discovery__title::after,
.arshe-ritual__title::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(184, 149, 90, 0.15), transparent);
  transform: translateX(-100%);
  animation: titleShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes titleShimmer {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ═══ SMOOTH SCROLL BEHAVIOR ═══ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* ═══ SECTION DIVIDERS ═══ */

.arshe-hero + .arshe-benefits,
.arshe-benefits + .arshe-discovery,
.arshe-discovery + .arshe-ritual,
.arshe-ritual + .luxe-carousel-section,
.luxe-carousel-section + .luxe-campaign,
.luxe-campaign + .luxe-notes,
.luxe-notes + .luxe-quiz,
.luxe-quiz + .luxe-testimonials,
.luxe-testimonials + .luxe-instagram {
  position: relative;
}

.arshe-hero + .arshe-benefits::before,
.arshe-benefits + .arshe-discovery::before,
.arshe-discovery + .arshe-ritual::before,
.arshe-ritual + .luxe-carousel-section::before,
.luxe-carousel-section + .luxe-campaign::before,
.luxe-campaign + .luxe-notes::before,
.luxe-notes + .luxe-quiz::before,
.luxe-quiz + .luxe-testimonials::before,
.luxe-testimonials + .luxe-instagram::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #666666, transparent);
  opacity: 0.5;
}

/* ═══ SCROLL PROGRESS BAR ═══ */

.arshe-scroll-progress {
  position: fixed;
  top: 32px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(184, 149, 90, 0.1);
  z-index: 100;
  pointer-events: none;
}

.arshe-scroll-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #666666, #B8B8B8);
  width: 0%;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(184, 149, 90, 0.5);
}

@media (max-width: 899px) {
  .arshe-scroll-progress {
    top: 28px;
  }
}

/* ═══ IMAGE ZOOM ON SCROLL ═══ */

.arshe-hero__image,
.arshe-discovery__image,
.luxe-note-card img {
  will-change: transform;
  transition: transform 0.4s ease-out;
}

/* ═══ REDUCE MOTION ═══ */

@media (prefers-reduced-motion: reduce) {
  [data-scroll],
  .arshe-hero__content,
  .arshe-hero__visual,
  .arshe-benefits__card,
  .arshe-discovery__visual,
  .arshe-discovery__content,
  .arshe-ritual__step {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════
   📖 ARSHÉ STORY TEASER
   ═══════════════════════════════════════════════ */

.arshe-story-teaser {
  padding: 120px 40px;
  position: relative;
  z-index: 2;
}

.arshe-story-teaser__container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.arshe-story-teaser__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #666666;
  margin-bottom: 24px;
}

.arshe-story-teaser__eyebrow-line {
  width: 40px;
  height: 1px;
  background: #666666;
}

.arshe-story-teaser__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 300;
  color: #171717;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 24px;
}

.arshe-story-teaser__title em {
  font-style: italic;
  color: #666666;
}

.arshe-story-teaser__subtitle {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(18px, 2vw, 22px);
  color: #444444;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.arshe-story-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 44px;
  background: transparent;
  color: #171717;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #171717;
  border-radius: 2px;
  transition: all 0.4s var(--ease-luxe);
}

.arshe-story-teaser__cta:hover {
  background: #171717;
  color: #EEEEEE;
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(43, 41, 38, 0.2);
}

.arshe-story-teaser__cta-arrow {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.arshe-story-teaser__cta:hover .arshe-story-teaser__cta-arrow {
  transform: translateX(6px);
}

@media (max-width: 899px) {
  .arshe-story-teaser {
    padding: 80px 20px;
  }
}

/* ═══════════════════════════════════════════════
   🛍️ ARSHÉ PRODUCT PAGE
   Premium luxury product template
   ═══════════════════════════════════════════════ */

/* Hide default Shopify product styles */
.template-product .product,
.template-product .price,
.template-product .product-form,
.template-product .product__title,
.template-product .product-info {
  display: none !important;
}

/* NEW Product Layout */
.arshe-product {
  padding: 60px 40px 100px;
  position: relative;
  z-index: 2;
}

.arshe-product__container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* LEFT: Gallery */
.arshe-product__gallery {
  position: sticky;
  top: 100px;
}

.arshe-product__image-wrapper {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(43, 41, 38, 0.04);
  box-shadow:
    0 30px 80px rgba(43, 41, 38, 0.12),
    0 10px 30px rgba(43, 41, 38, 0.08);
}

.arshe-product__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.arshe-product__image-wrapper--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #EEEEEE, #B8B8B8);
}

.arshe-product__placeholder {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 42px;
  color: #8B6F3D;
  letter-spacing: 4px;
  text-align: center;
  padding: 40px;
}

.arshe-product__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.arshe-product__thumb {
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px;
  transition: opacity 0.3s;
}

.arshe-product__thumb:hover {
  opacity: 0.7;
}

.arshe-product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* RIGHT: Details */
.arshe-product__details {
  padding: 20px 0;
}

.arshe-product__vendor {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #666666;
  margin-bottom: 16px;
  font-weight: 600;
}

.arshe-product__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 300;
  color: #171717;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.arshe-product__type {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 16px;
  font-style: italic;
  color: #444444;
  margin-bottom: 32px;
}

.arshe-product__type-line {
  width: 30px;
  height: 1px;
  background: #666666;
}

/* PRICING */
.arshe-product__price {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(43, 41, 38, 0.04);
  border-left: 3px solid 
/* ARSHÉ PRELOADER RELIABILITY */
.luxe-preloader { display:flex; align-items:center; justify-content:center; }
.luxe-preloader__space { opacity:.96; }
@media (max-width: 749px) {
  .luxe-preloader__logo { font-size:clamp(62px, 18vw, 100px); letter-spacing:8px; }
  .luxe-preloader__tagline { top:calc(50% + 78px); font-size:10px; letter-spacing:4px; }
  .luxe-preloader__loading { top:calc(50% + 112px); }
}
@media (prefers-reduced-motion: reduce) {
  .luxe-preloader__letter, .luxe-preloader__star, .luxe-preloader__glow, .luxe-preloader__dot { animation:none !important; opacity:1 !important; transform:none !important; }
  .luxe-preloader { transition-duration:.2s !important; }
}


/* ARSHÉ FIRST-VISIT MINIMAL PRELOADER
   Clean white canvas, centered wordmark, fade only.
   No stars, dots, glow, or flight-to-header movement. */
.luxe-preloader {
  background: #fff !important;
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility .6s ease !important;
}

.luxe-preloader__space,
.luxe-preloader__glow,
.luxe-preloader__stars,
.luxe-preloader__loading {
  display: none !important;
}

.luxe-preloader__logo {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: clamp(80px, 15vw, 180px) !important;
  letter-spacing: 12px !important;
  transition: none !important;
  animation: arshePreloaderLogoFadeIn .7s ease both !important;
}

.luxe-preloader__letter {
  opacity: 0 !important;
  transform: none !important;
  animation: arshePreloaderLetterFade .55s ease forwards !important;
}
.luxe-preloader__letter:nth-child(1) { animation-delay: .08s !important; }
.luxe-preloader__letter:nth-child(2) { animation-delay: .13s !important; }
.luxe-preloader__letter:nth-child(3) { animation-delay: .18s !important; }
.luxe-preloader__letter:nth-child(4) { animation-delay: .23s !important; }
.luxe-preloader__letter:nth-child(5) { animation-delay: .28s !important; }

.luxe-preloader__tagline {
  opacity: 0 !important;
  animation: arshePreloaderTaglineFade .55s ease .42s forwards !important;
  transition: none !important;
}

.luxe-preloader.hiding .luxe-preloader__logo,
.luxe-preloader.hiding .luxe-preloader__tagline {
  opacity: 1;
}

.luxe-preloader.hiding {
  opacity: 0 !important;
  visibility: hidden !important;
}

.luxe-preloader.flying .luxe-preloader__logo,
.luxe-preloader.flying .luxe-preloader__tagline,
.luxe-preloader.flying .luxe-preloader__glow,
.luxe-preloader.flying .luxe-preloader__loading {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  opacity: 1 !important;
}

@keyframes arshePreloaderLogoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes arshePreloaderLetterFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes arshePreloaderTaglineFade {
  from { opacity: 0; }
  to { opacity: .9; }
}

@media (max-width: 749px) {
  .luxe-preloader__logo {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: clamp(62px, 18vw, 100px) !important;
    letter-spacing: 8px !important;
  }
  .luxe-preloader__tagline {
    top: calc(50% + 78px) !important;
    font-size: 10px !important;
    letter-spacing: 4px !important;
    transform: translateX(-50%) !important;
  }
}


/* =========================================================
   ARSHÉ V17 — MINIMAL SESSION PRELOADER
   Once per browsing session; never on internal page navigation.
   Plain white canvas, centered wordmark, fade only.
   ========================================================= */
.luxe-preloader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  background: #fff !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .45s ease, visibility .45s ease !important;
}

/* Nothing decorative: remove every old preloader visual. */
.luxe-preloader__space,
.luxe-preloader__stars,
.luxe-preloader__star,
.luxe-preloader__glow,
.luxe-preloader__loading,
.luxe-preloader__dot {
  display: none !important;
  animation: none !important;
}

/* The wordmark fades as one piece and never moves. */
.luxe-preloader__logo {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: auto !important;
  max-width: calc(100vw - 48px) !important;
  font-size: clamp(78px, 10vw, 132px) !important;
  line-height: .95 !important;
  letter-spacing: 9px !important;
  color: #111 !important;
  white-space: nowrap !important;
  text-align: center !important;
  animation: arsheV17LogoFade .7s ease both !important;
  transition: none !important;
  will-change: opacity !important;
}

.luxe-preloader__letter {
  display: inline !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.luxe-preloader__tagline {
  position: static !important;
  transform: none !important;
  margin-top: 24px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 4px !important;
  color: #777 !important;
  opacity: 0 !important;
  white-space: nowrap !important;
  animation: arsheV17TaglineFade .5s ease .25s forwards !important;
}

.luxe-preloader.hiding {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Prevent any legacy flight state from moving or resizing the wordmark. */
.luxe-preloader.flying .luxe-preloader__logo,
.luxe-preloader.flying .luxe-preloader__tagline {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  opacity: 1 !important;
}

@keyframes arsheV17LogoFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes arsheV17TaglineFade {
  from { opacity: 0; }
  to { opacity: .72; }
}

/* Subsequent pages in the same tab/session: hide before first paint. */
html.arshe-preloader-seen .luxe-preloader {
  display: none !important;
}

@media (max-width: 749px) {
  .luxe-preloader {
    padding: 0 20px !important;
  }
  .luxe-preloader__logo {
    max-width: calc(100vw - 40px) !important;
    font-size: clamp(50px, 14vw, 66px) !important;
    letter-spacing: 4px !important;
  }
  .luxe-preloader__tagline {
    margin-top: 18px !important;
    font-size: 8px !important;
    letter-spacing: 2.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .luxe-preloader__logo,
  .luxe-preloader__tagline { animation: none !important; opacity: 1 !important; }
  .luxe-preloader { transition-duration: .2s !important; }
}