/* ============================================================
   TAFILALET — RIAD LUXE DESIGN SYSTEM
   Scoped under body.luxe so the existing site is not affected.
   ============================================================ */

body.luxe {
  /* ---------- COLOR — Riad raffiné, cream/ivoire dominant ---------- */
  --lx-ivory: #f7f0e3;
  --lx-ivory-deep: #f1e8d5;
  --lx-paper: #fbf6ea;
  --lx-paper-warm: #f9efdc;
  --lx-sand: #e6d8bd;
  --lx-sand-deep: #c9b896;

  --lx-espresso: #2e1c10;
  --lx-ink: #1a120c;
  --lx-night: #120c08;
  --lx-muted: #7a685a;
  --lx-muted-soft: #9b8b7c;

  --lx-terracotta: #c75b39;
  --lx-terracotta-deep: #9f3f27;
  --lx-terracotta-soft: #e07e5c;

  --lx-gold: #c9a05a;
  --lx-gold-deep: #a17a3a;
  --lx-gold-soft: #e0c590;
  --lx-gold-bright: #e8c177;

  --lx-olive: #5a6b3e;
  --lx-blue: #2a5a6e;          /* Majorelle accent — use sparingly */

  --lx-line: rgba(46, 28, 16, 0.08);
  --lx-line-strong: rgba(46, 28, 16, 0.16);
  --lx-line-gold: rgba(201, 160, 90, 0.32);
  --lx-line-gold-strong: rgba(201, 160, 90, 0.55);

  /* ---------- SHADOW ---------- */
  --lx-shadow-soft: 0 8px 28px rgba(64, 38, 18, 0.06), 0 2px 8px rgba(64, 38, 18, 0.04);
  --lx-shadow-warm: 0 22px 58px rgba(159, 63, 39, 0.14);
  --lx-shadow-deep: 0 32px 80px rgba(46, 28, 16, 0.18);
  --lx-shadow-card: 0 14px 38px rgba(46, 28, 16, 0.08), 0 1px 0 rgba(255, 250, 240, 0.6) inset;
  --lx-glow-gold: 0 0 60px rgba(201, 160, 90, 0.28);
  --lx-glow-lantern: 0 0 90px rgba(232, 193, 119, 0.42);

  /* ---------- GEOMETRY ---------- */
  --lx-radius: 16px;
  --lx-radius-lg: 24px;
  --lx-radius-xl: 32px;
  --lx-arch-top: 50% 50% 16px 16px / 32% 32% 16px 16px;
  --lx-arch-full: 50% 50% 50% 50% / 38% 38% 50% 50%;
  --lx-container: 1240px;
  --lx-container-narrow: 980px;

  /* ---------- MOTION ---------- */
  --lx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --lx-ease-silk: cubic-bezier(0.32, 0.72, 0, 1);
  --lx-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- TYPE ---------- */
  --lx-display: "Cormorant Garamond", "DM Serif Display", Georgia, serif;
  --lx-body: "Source Sans 3", "Inter", system-ui, sans-serif;
  --lx-arabic: "Amiri", "Cormorant Garamond", serif;

  /* ---------- APPLY BASE ---------- */
  background: var(--lx-ivory);
  color: var(--lx-ink);
  font-family: var(--lx-body);
  font-feature-settings: "ss01", "kern";
}

body.luxe ::selection {
  background: var(--lx-terracotta);
  color: var(--lx-paper);
}

/* hide the existing preloader & progress bar on luxe pages (we have our own) */
body.luxe .preloader,
body.luxe .progress-bar {
  display: none;
}

/* ---------- TYPOGRAPHY ---------- */

body.luxe h1, body.luxe h2, body.luxe h3, body.luxe h4 {
  font-family: var(--lx-display);
  color: var(--lx-espresso);
  letter-spacing: -0.01em;
  line-height: 1.02;
  font-weight: 500;
  text-wrap: balance;
  margin: 0;
}

body.luxe .lx-display {
  font-family: var(--lx-display);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 0.98;
}

body.luxe .lx-display em,
body.luxe h1 em,
body.luxe h2 em {
  font-style: italic;
  color: var(--lx-terracotta-deep);
  font-weight: 400;
}

body.luxe .lx-arabic {
  font-family: var(--lx-arabic);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--lx-gold-deep);
}

body.luxe .lx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--lx-arabic);
  font-style: italic;
  color: var(--lx-terracotta-deep);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 0;
}

body.luxe .lx-kicker::before,
body.luxe .lx-kicker.flanked::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

body.luxe .lx-eyebrow {
  font-family: var(--lx-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lx-gold-deep);
  margin: 0;
}

body.luxe .lx-overline {
  font-family: var(--lx-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lx-muted);
  margin: 0;
}

body.luxe .lx-lede {
  color: var(--lx-muted);
  font-size: clamp(1.04rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}

/* ---------- CONTAINER ---------- */

body.luxe .lx-container {
  width: min(calc(100% - 40px), var(--lx-container));
  margin-inline: auto;
}

body.luxe .lx-container.narrow {
  max-width: var(--lx-container-narrow);
}

body.luxe .lx-section {
  padding: clamp(60px, 8vw, 120px) 0;
  position: relative;
}

/* ---------- DECORATIVE BACKGROUNDS ---------- */

/* paper background — subtle dot grid texture */
body.luxe .lx-bg-paper {
  background:
    radial-gradient(circle at 16px 16px, rgba(46, 28, 16, 0.04) 1.3px, transparent 1.3px) 0 0/32px 32px,
    var(--lx-paper);
}

/* warm gradient wash */
body.luxe .lx-bg-warm {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(201, 160, 90, 0.16), transparent 55%),
    radial-gradient(ellipse at 0% 80%, rgba(199, 91, 57, 0.08), transparent 55%),
    var(--lx-paper);
}

/* zellij motif parallax field (uses CSS background — animates with scroll var) */
body.luxe .lx-zellij-field {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.luxe .lx-zellij-field::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  opacity: var(--lx-zellij-opacity, 0.08);
  background-image: var(--lx-zellij-svg);
  background-size: 220px 220px;
  background-position: 0 var(--lx-parallax-y, 0px);
  transition: background-position 0.05s linear;
  pointer-events: none;
}

/* night zellij field (dark) */
body.luxe .lx-zellij-field.dark::before {
  opacity: 0.14;
  filter: invert(1) sepia(0.4) saturate(2);
}

/* Authentic Moroccan zellige tessellation: Khatam (8-point) + Safa (cross/lozenge)
   220x220 tile that pavages seamlessly. Geometry: R=44, r=33.66 for stars
   placed at corners (shared between tiles) and at center. Safa lozenges fill
   the edge midpoints. */
body.luxe {
  --lx-zellij-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke='%23a17a3a' stroke-width='1.1' stroke-linejoin='round'><path d='M44 0 L33.66 12.9 L33.66 33.66 L12.9 33.66 L0 44'/><path d='M176 0 L186.34 12.9 L186.34 33.66 L207.1 33.66 L220 44'/><path d='M0 176 L12.9 186.34 L33.66 186.34 L33.66 207.1 L44 220'/><path d='M220 176 L207.1 186.34 L186.34 186.34 L186.34 207.1 L176 220'/><path d='M154 110 L141.1 122.9 L141.1 141.1 L122.9 141.1 L110 154 L97.1 141.1 L78.9 141.1 L78.9 122.9 L66 110 L78.9 97.1 L78.9 78.9 L97.1 78.9 L110 66 L122.9 78.9 L141.1 78.9 L141.1 97.1 Z'/><path d='M110 0 L122.9 12.9 L110 25.8 L97.1 12.9 Z'/><path d='M220 110 L207.1 122.9 L194.2 110 L207.1 97.1 Z'/><path d='M110 220 L122.9 207.1 L110 194.2 L97.1 207.1 Z'/><path d='M0 110 L12.9 122.9 L25.8 110 L12.9 97.1 Z'/><circle cx='110' cy='110' r='3.5'/></g></svg>");
}

/* ---------- SVG ORNAMENTS — used via class on a div/span ---------- */

body.luxe .lx-orn {
  display: inline-block;
  width: 32px;
  height: 32px;
  color: var(--lx-gold-deep);
  flex-shrink: 0;
}

body.luxe .lx-orn-divider {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 auto;
  color: var(--lx-gold-deep);
}

body.luxe .lx-orn-divider::before,
body.luxe .lx-orn-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
  opacity: 0.45;
  max-width: 220px;
}

body.luxe .lx-orn-divider svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* ---------- LANTERN — floating SVG component ---------- */

body.luxe .lx-lantern {
  position: absolute;
  width: var(--lantern-size, 120px);
  pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(232, 193, 119, 0.4));
  animation: lxLanternFloat 7s ease-in-out infinite;
  transform-origin: top center;
}

body.luxe .lx-lantern.delay-1 { animation-delay: -2.3s; }
body.luxe .lx-lantern.delay-2 { animation-delay: -4.7s; }

body.luxe .lx-lantern::before {
  content: "";
  position: absolute;
  inset: -40% -40% auto -40%;
  height: 200%;
  background: radial-gradient(ellipse 50% 50% at 50% 30%, rgba(232, 193, 119, 0.35), transparent 60%);
  opacity: 0.9;
  pointer-events: none;
  animation: lxLanternGlow 4s ease-in-out infinite alternate;
}

@keyframes lxLanternFloat {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%     { transform: translateY(-12px) rotate(1.2deg); }
}

@keyframes lxLanternGlow {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* ---------- BUTTONS ---------- */

body.luxe .lx-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--lx-body);
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: 0.005em;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.45s var(--lx-ease-silk),
              box-shadow 0.45s var(--lx-ease-silk),
              background 0.32s var(--lx-ease-silk),
              border-color 0.32s var(--lx-ease-silk),
              color 0.32s var(--lx-ease-silk);
}

body.luxe .lx-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 250, 240, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.65s var(--lx-ease-silk);
}

body.luxe .lx-btn:hover::before,
body.luxe .lx-btn:focus-visible::before { transform: translateX(120%); }

body.luxe .lx-btn:hover,
body.luxe .lx-btn:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

body.luxe .lx-btn:active { transform: translateY(0) scale(0.985); transition-duration: 0.15s; }

body.luxe .lx-btn-primary {
  background: linear-gradient(180deg, var(--lx-terracotta) 0%, var(--lx-terracotta-deep) 100%);
  color: var(--lx-paper);
  box-shadow: 0 12px 28px rgba(159, 63, 39, 0.28), inset 0 1px 0 rgba(255, 250, 240, 0.2);
}

body.luxe .lx-btn-primary:hover,
body.luxe .lx-btn-primary:focus-visible {
  box-shadow: 0 18px 40px rgba(159, 63, 39, 0.42), inset 0 1px 0 rgba(255, 250, 240, 0.24);
}

body.luxe .lx-btn-ghost {
  background: transparent;
  color: var(--lx-espresso);
  border-color: var(--lx-line-strong);
}

body.luxe .lx-btn-ghost:hover,
body.luxe .lx-btn-ghost:focus-visible {
  border-color: var(--lx-terracotta);
  background: rgba(199, 91, 57, 0.06);
  color: var(--lx-terracotta-deep);
}

body.luxe .lx-btn-gold {
  background: transparent;
  color: var(--lx-gold-deep);
  border: 1px solid var(--lx-line-gold-strong);
}

body.luxe .lx-btn-gold:hover,
body.luxe .lx-btn-gold:focus-visible {
  background: var(--lx-gold);
  color: var(--lx-paper);
  border-color: var(--lx-gold);
  box-shadow: 0 18px 40px rgba(201, 160, 90, 0.34);
}

body.luxe .lx-btn-whatsapp {
  background: #25d366;
  color: #fff;
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.32);
  font-weight: 700;
  padding: 0 32px;
  min-height: 56px;
}

body.luxe .lx-btn-whatsapp:hover,
body.luxe .lx-btn-whatsapp:focus-visible {
  background: #1ebe5b;
  box-shadow: 0 22px 48px rgba(37, 211, 102, 0.42);
}

body.luxe .lx-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 250, 240, 0.18);
  transition: transform 0.45s var(--lx-ease-silk), background 0.32s ease;
}

body.luxe .lx-btn:hover .lx-btn-arrow,
body.luxe .lx-btn:focus-visible .lx-btn-arrow {
  transform: translateX(4px);
  background: rgba(255, 250, 240, 0.3);
}

body.luxe .lx-btn-ghost .lx-btn-arrow,
body.luxe .lx-btn-gold .lx-btn-arrow {
  background: rgba(46, 28, 16, 0.06);
  color: currentColor;
}

body.luxe .lx-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--lx-terracotta-deep);
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  position: relative;
}

body.luxe .lx-text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 1.6rem;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transform-origin: left;
  transform: scaleX(0.5);
  transition: transform 0.55s var(--lx-ease-silk), opacity 0.32s ease;
}

body.luxe .lx-text-link:hover::after,
body.luxe .lx-text-link:focus-visible::after { transform: scaleX(1); opacity: 0.7; }

/* ---------- CARDS ---------- */

body.luxe .lx-card {
  position: relative;
  background: var(--lx-paper);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius-lg);
  padding: clamp(20px, 2.4vw, 32px);
  box-shadow: var(--lx-shadow-card);
  transition: transform 0.45s var(--lx-ease-silk),
              box-shadow 0.45s var(--lx-ease-silk),
              border-color 0.32s ease;
}

body.luxe .lx-card.hover-lift:hover,
body.luxe .lx-card.hover-lift:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--lx-shadow-warm);
  border-color: var(--lx-line-gold);
}

body.luxe .lx-card.has-arch {
  border-radius: var(--lx-arch-top);
  padding-top: clamp(56px, 7vw, 92px);
}

body.luxe .lx-card.has-arch::before {
  content: "";
  position: absolute;
  inset: 14px 14px auto 14px;
  height: 70px;
  border: 1px solid var(--lx-line-gold);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}

body.luxe .lx-card.has-arch::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background: var(--lx-zellij-star-svg);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.7;
}

/* Authentic Khatam Sulaymani — 8-point star from two overlapping squares
   R=14, r=10.71 (R/√(2+√2)). Used standalone on cards. */
body.luxe {
  --lx-zellij-star-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23a17a3a' stroke-width='1.2' stroke-linejoin='round'><path d='M30 16 L25.29 20.71 L25.29 25.29 L20.71 25.29 L16 30 L11.29 25.29 L6.71 25.29 L6.71 20.71 L2 16 L6.71 11.29 L6.71 6.71 L11.29 6.71 L16 2 L20.71 6.71 L25.29 6.71 L25.29 11.29 Z'/><path d='M22 16 L19.18 18.82 L19.18 22.83 L15.17 22.83 L12 26 L9.83 22.83 L9 22.83 L8.83 19.18 L6 16 L8.83 12.82 L9.17 9.17 L13.18 9.17 L16 6 L18.82 9.17 L22.83 9.17 L22.83 12.82 Z' stroke-opacity='0.5'/></svg>");
}

/* corner ornaments for cards */
body.luxe .lx-card.has-corners::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  width: 24px; height: 24px;
  border-top: 1px solid var(--lx-line-gold-strong);
  border-left: 1px solid var(--lx-line-gold-strong);
  border-radius: 8px 0 0 0;
  pointer-events: none;
}

body.luxe .lx-card.has-corners::after {
  content: "";
  position: absolute;
  bottom: 12px; right: 12px;
  width: 24px; height: 24px;
  border-bottom: 1px solid var(--lx-line-gold-strong);
  border-right: 1px solid var(--lx-line-gold-strong);
  border-radius: 0 0 8px 0;
  pointer-events: none;
}

/* paper texture overlay (subtle) */
body.luxe .lx-card.has-texture {
  background:
    radial-gradient(circle at 16px 16px, rgba(46, 28, 16, 0.025) 1.2px, transparent 1.2px) 0 0/32px 32px,
    var(--lx-paper);
}

/* ---------- BADGES + PILLS ---------- */

body.luxe .lx-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--lx-ivory-deep);
  color: var(--lx-espresso);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--lx-line);
}

body.luxe .lx-pill.gold {
  background: rgba(201, 160, 90, 0.14);
  color: var(--lx-gold-deep);
  border-color: var(--lx-line-gold);
}

body.luxe .lx-pill.terra {
  background: rgba(199, 91, 57, 0.12);
  color: var(--lx-terracotta-deep);
  border-color: rgba(199, 91, 57, 0.24);
}

body.luxe .lx-pill.olive {
  background: rgba(90, 107, 62, 0.14);
  color: var(--lx-olive);
  border-color: rgba(90, 107, 62, 0.28);
}

body.luxe .lx-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

body.luxe .lx-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 14px 8px 12px;
  background: var(--lx-ink);
  color: var(--lx-paper);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
}

body.luxe .lx-status-dot .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.22);
  animation: lxPulse 2s ease-in-out infinite;
}

@keyframes lxPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.22); }
  50%      { box-shadow: 0 0 0 9px rgba(37, 211, 102, 0.04); }
}

/* ---------- ANIMATIONS — reveal & motion ---------- */

/* Reveal animations — only hide elements when JS has confirmed it ran.
   If JS fails or is slow, content stays visible by default (no "grand vide"). */
body.luxe [data-lx-reveal] {
  transition: opacity 0.9s var(--lx-ease-silk),
              transform 0.9s var(--lx-ease-silk),
              filter 0.9s var(--lx-ease-silk);
  transition-delay: var(--lx-reveal-delay, 0s);
}

body.luxe.lx-js-ran [data-lx-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(4px);
}

body.luxe.lx-js-ran [data-lx-reveal="scale"]:not(.is-visible) { transform: translateY(28px) scale(0.96); }
body.luxe.lx-js-ran [data-lx-reveal="left"]:not(.is-visible)  { transform: translateX(-32px); }
body.luxe.lx-js-ran [data-lx-reveal="right"]:not(.is-visible) { transform: translateX(32px); }

/* word-by-word blur reveal */
body.luxe [data-lx-split] {
  display: inline;
}

body.luxe [data-lx-split] .lx-word {
  display: inline-block;
  transition: opacity 0.9s var(--lx-ease-silk),
              filter 0.9s var(--lx-ease-silk),
              transform 0.9s var(--lx-ease-silk);
  transition-delay: calc(var(--i) * 0.08s);
}

body.luxe.lx-js-ran [data-lx-split]:not(.is-visible) .lx-word {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.5em);
}

/* masonry breathing — used on grid children */
body.luxe [data-lx-masonry] > * {
  transition: opacity 0.9s var(--lx-ease-silk),
              transform 0.9s var(--lx-ease-silk);
}

body.luxe.lx-js-ran [data-lx-masonry] > *:not(.is-visible) {
  opacity: 0;
  transform: translateY(40px) scale(0.94);
}

/* ---------- SPICE PARTICLES (refined) ---------- */

body.luxe .lx-spice-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

body.luxe .lx-spice-field span {
  position: absolute;
  bottom: -20px;
  left: var(--x);
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--lx-gold-bright), var(--lx-gold-deep));
  opacity: 0;
  box-shadow: 0 0 12px rgba(232, 193, 119, 0.6);
  animation: lxSpiceRise var(--d, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes lxSpiceRise {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  12%  { opacity: 0.7; }
  85%  { opacity: 0.55; }
  100% { opacity: 0; transform: translate3d(40px, -110vh, 0); }
}

/* confetti / spice puff anchor for add-to-cart */
body.luxe .lx-burst {
  position: fixed;
  pointer-events: none;
  z-index: 200;
}

body.luxe .lx-burst span {
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c, var(--lx-gold-bright));
  box-shadow: 0 0 8px var(--c, var(--lx-gold-bright));
  transform: translate(-50%, -50%);
  animation: lxBurst 900ms var(--lx-ease-silk) forwards;
}

@keyframes lxBurst {
  0%   { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.4); }
}

/* ---------- HEADER (LUXE) ---------- */

body.luxe .lx-header {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(calc(100% - 32px), 1180px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px 22px;
  background: rgba(247, 240, 227, 0.82);
  border: 1px solid var(--lx-line);
  border-radius: 999px;
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 18px 60px rgba(46, 28, 16, 0.1);
  min-height: 64px;
  transition: background 0.32s ease, box-shadow 0.32s ease, min-height 0.32s ease;
}

body.luxe .lx-header.is-scrolled {
  background: rgba(247, 240, 227, 0.95);
  box-shadow: 0 22px 70px rgba(46, 28, 16, 0.14);
}

body.luxe .lx-header .lx-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--lx-espresso);
}

body.luxe .lx-header .lx-brand img {
  width: 130px;
  height: auto;
}

body.luxe .lx-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
}

body.luxe .lx-nav a {
  position: relative;
  text-decoration: none;
  color: var(--lx-espresso);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding: 8px 4px;
}

body.luxe .lx-nav a::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 1px;
  background: var(--lx-gold-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.42s var(--lx-ease-silk);
}

body.luxe .lx-nav a:hover::after,
body.luxe .lx-nav a:focus-visible::after,
body.luxe .lx-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

body.luxe .lx-nav .lx-nav-cta {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--lx-espresso);
  color: var(--lx-paper);
}

body.luxe .lx-nav .lx-nav-cta::after { display: none; }

body.luxe .lx-nav .lx-nav-cta:hover { background: var(--lx-terracotta-deep); }

body.luxe .lx-nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--lx-line);
  color: var(--lx-espresso);
  cursor: pointer;
}

body.luxe .lx-nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 4px auto;
  background: currentColor;
  transition: transform 0.32s, opacity 0.32s;
}

@media (max-width: 880px) {
  body.luxe .lx-header { padding: 6px 6px 6px 18px; }
  body.luxe .lx-nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; }
  body.luxe .lx-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    background: var(--lx-ivory);
    transform: translateX(100%);
    transition: transform 0.45s var(--lx-ease-silk);
    z-index: 999;
    gap: 24px;
  }
  body.luxe .lx-nav a { font-family: var(--lx-display); font-size: 2rem; }
  body.luxe.lx-nav-open .lx-nav { transform: translateX(0); }
  body.luxe.lx-nav-open .lx-nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  body.luxe.lx-nav-open .lx-nav-toggle span:nth-child(2) { opacity: 0; }
  body.luxe.lx-nav-open .lx-nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  body.luxe.lx-nav-open { overflow: hidden; }
}

/* ---------- FOOTER (LUXE) ---------- */

body.luxe .lx-footer {
  background:
    radial-gradient(ellipse 80% 100% at 15% 0%, rgba(106, 43, 23, 0.6), transparent 60%),
    linear-gradient(160deg, #2a1409 0%, #1f0f07 100%);
  color: rgba(247, 240, 227, 0.78);
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}

body.luxe .lx-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  position: relative;
}

body.luxe .lx-footer h4 {
  font-family: var(--lx-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lx-gold-soft);
  margin: 0 0 18px;
}

body.luxe .lx-footer-grid a {
  display: block;
  color: rgba(247, 240, 227, 0.82);
  text-decoration: none;
  padding: 4px 0;
  font-size: 0.95rem;
  transition: color 0.32s;
}

body.luxe .lx-footer-grid a:hover { color: var(--lx-gold-soft); }

body.luxe .lx-footer-base {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(247, 240, 227, 0.12);
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  color: rgba(247, 240, 227, 0.5);
}

@media (max-width: 760px) {
  body.luxe .lx-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  body.luxe .lx-footer-base { flex-direction: column; gap: 12px; }
}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  body.luxe *, body.luxe *::before, body.luxe *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  body.luxe [data-lx-reveal],
  body.luxe [data-lx-split] .lx-word,
  body.luxe [data-lx-masonry] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}