/* =============================================================================
   WELLUNEX public site — theme

   The public pages share the panel's look: warm paper, ink text, one antique
   gold accent, Inter for the interface and Fraunces for headings. The old
   obsidian-and-gold look stays as the dark theme (html[data-theme="dark"]).

   How the colours switch: the public CSS and views write their colours as
   var(--wx-*, <the original dark colour>). Where a --wx-* token is undefined
   the original colour applies, so the dark theme, the panel and the guest
   pages render exactly as before. This file defines the tokens for the light
   palette, and lets any block pick a palette of its own:
     .wx-paper   light palette (cream band, also inside the dark theme)
     .wx-night   dark palette (ink band, also inside the light theme)
     .wx-device  the original look and typefaces, for phone and card mock-ups
   ============================================================================= */

/* 1. Typography (both themes) -------------------------------------------------- */
html.wx-site,
html.wx-site .wx-paper,
html.wx-site[data-theme="dark"] .wx-dark-paper,
html.wx-site .wx-night {
  --font-royal: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wx-radius-sm: 8px;
  --wx-radius: 12px;
  --wx-radius-lg: 18px;
}

/* 2. Light palette ------------------------------------------------------------- */
html.wx-site:not([data-theme="dark"]),
html.wx-site .wx-paper,
html.wx-site[data-theme="dark"] .wx-dark-paper {
  color-scheme: light;

  --wx-bg: #F2F0ED;
  --wx-bg-2: #EAE7E3;
  --wx-surface: #FAF9F7;
  --wx-surface-2: #EFECE8;
  --wx-line: #DDD8D1;
  --wx-line-strong: #C9C2B8;
  --wx-line-dark: #DDD8D1;
  --wx-ink: #24161A;
  --wx-ink-2: #4A3C40;
  --wx-ink-3: #6B5E62;
  --wx-gold: #7B2235;
  --wx-gold-2: #7B2235;
  --wx-gold-soft: #F1DDE1;
  --wx-field: #FDFCFB;
  --wx-ok: #1E7049;
  --wx-info: #2B5590;
  --wx-pink: #9D2A63;
  --wx-danger: #A82418;
  --wx-warn: #8C5B10;
  --wx-purple: #6B3FA0;
  --wx-on-ink: #F7F3EC;
  --wx-fg-rgb: 36 22 26;
  --wx-gold-rgb: 123 34 53;
  --wx-bg-rgb: 250 249 247;
  --wx-sunk-rgb: 36 22 26;
  --wx-sunk-k: 0.14;
  --wx-shadow-k: 0.28;
  --wx-header-bg: rgb(242 240 237 / 0.9);
  --wx-footer-bg: #EAE7E3;

  /* The shared core tokens, as the public CSS still reads them */
  --bg-obsidian: #F2F0ED;
  --bg-dark: #F2F0ED;
  --bg-surface: #FAF9F7;
  --bg-card-dark: #FAF9F7;
  --bg-card-border: rgb(123 34 53 / 0.2);
  --gold-imperial: #7B2235;
  --gold-champagne: #7B2235;
  --gold-400: #7B2235;
  --gold-300: #7B2235;
  --gold-200: #F1DDE1;
  --gold-100: #F5EDDD;
  /* A fill, under dark text: a soft gold that dark text reads on. Gradient
     text is restyled separately (.text-gold-gradient, --showroom-gold-foil). */
  --gold-gradient: linear-gradient(135deg, #E2C990 0%, #CFAE68 100%);
  --gold-shimmer: linear-gradient(90deg, #621A2A 0%, #9A7535 50%, #621A2A 100%);
  --text-pure: #24161A;
  --text-light: #24161A;
  --text-mist: #6B5E62;
  --text-muted: #6B5E62;
  --shadow-luxury: 0 1px 2px rgb(29 26 22 / 0.05), 0 8px 24px rgb(29 26 22 / 0.07);
  --shadow-glow: 0 0 0 transparent;

  /* The panel's tokens, for rules shared with it (tools-light.css) */
  --pn-bg: #EDEBE8;
  --pn-surface: #FAF9F7;
  --pn-surface-2: #EFECE8;
  --pn-surface-3: #E6DFD3;
  --pn-field: #FDFCFB;
  --pn-border: #DDD8D1;
  --pn-border-strong: #C9C2B8;
  --pn-ink: #24161A;
  --pn-ink-2: #4A3C40;
  --pn-ink-3: #6B5E62;
  --pn-on-ink: #F7F5F2;
  --pn-accent: #7B2235;
  --pn-accent-strong: #621A2A;
  --pn-accent-soft: #F1DDE1;
  --pn-success: #1E7049;
  --pn-success-soft: #D9E9DF;
  --pn-warning: #8C5B10;
  --pn-warning-soft: #F1E2C6;
  --pn-danger: #A82418;
  --pn-danger-soft: #F2DCD8;
  --pn-info: #2B5590;
  --pn-info-soft: #DAE3EF;
  --pn-radius-sm: 7px;
  --pn-radius: 10px;
  --pn-radius-lg: 14px;
  --pn-shadow-sm: 0 1px 2px rgba(29, 26, 22, .06);
  --pn-shadow: 0 1px 2px rgba(29, 26, 22, .05), 0 6px 20px rgba(29, 26, 22, .06);
  --pn-focus: 0 0 0 3px rgba(123, 34, 53, .25);
  --pn-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pn-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --pn-topbar-h: 72px;

  /* Planning tools (tools.css) */
  --tool-ink: #24161A;
  --tool-ink-soft: #4A3C40;
  --tool-ink-dim: #4A3C40;
  --tool-muted: #6B5E62;
  --tool-faint: #6F675B;
  --tool-accent: #7B2235;
  --tool-accent-fill: #24161A;
  --tool-accent-on-fill: #F7F3EC;
  --tool-accent-border: #7B2235;
  --tool-surface: #FAF9F7;
  --tool-surface-2: #EFECE8;
  --tool-surface-3: #EAE7E3;
  --tool-sunken: rgb(42 37 31 / 0.04);
  --tool-sunken-2: rgb(42 37 31 / 0.07);
  --tool-border: #DDD8D1;
  --tool-border-soft: #E6DFD3;
  --tool-border-input: #D3CDC5;
  --tool-line: rgb(133 99 42 / 0.22);
  --tool-line-2: rgb(133 99 42 / 0.3);
  --tool-line-3: rgb(133 99 42 / 0.4);
  --tool-accent-soft: rgb(133 99 42 / 0.1);
  --tool-ok: #1E7049;
  --tool-ok-bright: #1E7049;
  --tool-danger: #A82418;
  --tool-danger-bright: #A82418;
  --tool-warn: #8C5B10;
  --tool-info: #2B5590;
  --tool-shadow: 0 1px 2px rgb(29 26 22 / 0.05), 0 6px 20px rgb(29 26 22 / 0.06);
  --tool-shadow-lg: 0 12px 32px rgb(29 26 22 / 0.1);
}

/* 3. Dark palette inside a light page (ink bands, mock-ups) --------------------- */
html.wx-site .wx-night,
html.wx-site .wx-device {
  color-scheme: dark;

  --wx-bg: initial;
  --wx-bg-2: initial;
  --wx-surface: initial;
  --wx-surface-2: initial;
  --wx-line: initial;
  --wx-line-strong: initial;
  --wx-line-dark: initial;
  --wx-ink: initial;
  --wx-ink-2: initial;
  --wx-ink-3: initial;
  --wx-gold: initial;
  --wx-gold-2: initial;
  --wx-gold-soft: initial;
  --wx-field: initial;
  --wx-ok: initial;
  --wx-info: initial;
  --wx-pink: initial;
  --wx-danger: initial;
  --wx-warn: initial;
  --wx-purple: initial;
  --wx-on-ink: initial;
  --wx-fg-rgb: initial;
  --wx-gold-rgb: initial;
  --wx-bg-rgb: initial;
  --wx-sunk-rgb: initial;
  --wx-sunk-k: initial;
  --wx-shadow-k: initial;
  --wx-header-bg: initial;
  --wx-footer-bg: initial;

  --bg-obsidian: #0B0C10;
  --bg-dark: #0B0C10;
  --bg-surface: #15171E;
  --bg-card-dark: #15171E;
  --bg-card-border: rgba(212, 175, 55, 0.18);
  --gold-imperial: #D4AF37;
  --gold-champagne: #E5C06E;
  --gold-400: #D4AF37;
  --gold-300: #E5C06E;
  --gold-200: #F3E5C8;
  --gold-100: #FAF4E6;
  --gold-gradient: linear-gradient(135deg, #D4AF37 0%, #E5C06E 100%);
  --gold-shimmer: linear-gradient(90deg, #D4AF37 0%, #FFF3B0 50%, #D4AF37 100%);
  --text-pure: #F8F9FA;
  --text-light: #F8F9FA;
  --text-mist: #8E95A5;
  --text-muted: #8E95A5;
  --shadow-luxury: 0 20px 40px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(212, 175, 55, 0.18);
  --shadow-glow: 0 0 35px rgba(212, 175, 55, 0.35);
}

/* A mock-up keeps the typefaces of the invitation it depicts. */
html.wx-site .wx-device {
  --font-royal: 'Fraunces', Georgia, serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* A band carries its own background and text colour. */
/* !important: an inline `background:` shorthand on a band resets its colour to
   transparent, and a translucent glow would then show the page underneath. */
.wx-paper,
html.wx-site[data-theme="dark"] .wx-dark-paper { background-color: var(--wx-bg) !important; color: var(--wx-ink); }
.wx-night { background-color: #0B0C10 !important; color: #F8F9FA; }
/* A page that ends in a band meets the footer without a gap. */
body:has(.wx-ends-page) .wx-footer { margin-top: 0; }

/* 4. Base ------------------------------------------------------------------------ */
html.wx-site { background-color: var(--bg-obsidian); }
html.wx-site body {
  background-color: var(--bg-obsidian);
  color: var(--text-pure);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}
html.wx-site :where(h1,
h2,
h3,
h4) { font-family: var(--font-serif); letter-spacing: -0.01em; }

/* Form controls: core.css paints every field and button dark. Same specificity
   as that rule, later in the cascade, so any class still wins. */
:where(html.wx-site:not([data-theme="dark"])) input,
:where(html.wx-site:not([data-theme="dark"])) select,
:where(html.wx-site:not([data-theme="dark"])) textarea {
  color: #24161A;
  background-color: #FDFCFB;
  border-color: #D3CDC5;
}
:where(html.wx-site:not([data-theme="dark"])) button {
  color: #24161A;
  background-color: #FAF9F7;
  border-color: #D3CDC5;
}
:where(html.wx-site:not([data-theme="dark"])) select option { background-color: #FDFCFB; color: #24161A; }
:where(html.wx-site:not([data-theme="dark"])) input:focus,
:where(html.wx-site:not([data-theme="dark"])) select:focus,
:where(html.wx-site:not([data-theme="dark"])) textarea:focus {
  border-color: #7B2235;
  box-shadow: 0 0 0 3px rgb(123 34 53 / 0.2);
}
:where(html.wx-site:not([data-theme="dark"])) ::placeholder { color: #8C8185; }
@supports (-moz-appearance: none) { :where(html.wx-site:not([data-theme="dark"])) * { scrollbar-color: rgb(150 115 50 / 0.42) transparent; } }
:where(html.wx-site:not([data-theme="dark"])) ::-webkit-scrollbar-track { background: transparent; }
:where(html.wx-site:not([data-theme="dark"])) ::-webkit-scrollbar-thumb { background: rgb(150 115 50 / 0.42); border: 2px solid transparent; background-clip: padding-box; box-shadow: none; border-radius: 10px; }
:where(html.wx-site:not([data-theme="dark"])) ::-webkit-scrollbar-thumb:hover { background-color: rgb(150 115 50 / 0.7); }
:where(html.wx-site:not([data-theme="dark"])) ::selection { background: #F1DDE1; color: #24161A; }

/* 5. Shared components on the site ------------------------------------------------ */
html.wx-site .btn-gold,
html.wx-site .btn-outline-gold {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--wx-radius);
}
html.wx-site:not([data-theme="dark"]) .btn-gold:not(.wx-night *),
html.wx-site .wx-paper .btn-gold:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-gold:not(.wx-night *),
html.wx-site .wx-paper .btn-gold,
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-gold {
  color: #F7F3EC;
  background: #24161A;
  border: 1px solid #24161A;
  box-shadow: 0 1px 2px rgb(29 26 22 / 0.12);
  filter: none;
}
html.wx-site:not([data-theme="dark"]) .btn-gold:hover:not(.wx-night *),
html.wx-site .wx-paper .btn-gold:hover:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-gold:hover:not(.wx-night *),
html.wx-site .wx-paper .btn-gold:hover,
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-gold:hover {
  background: #3A332B;
  box-shadow: 0 6px 18px rgb(29 26 22 / 0.16);
  filter: none;
}
html.wx-site:not([data-theme="dark"]) .btn-outline-gold:not(.wx-night *),
html.wx-site .wx-paper .btn-outline-gold:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-outline-gold:not(.wx-night *),
html.wx-site .wx-paper .btn-outline-gold,
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-outline-gold {
  color: #24161A;
  background: transparent;
  border: 1px solid #C9C2B8;
}
html.wx-site:not([data-theme="dark"]) .btn-outline-gold:hover:not(.wx-night *),
html.wx-site .wx-paper .btn-outline-gold:hover:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-outline-gold:hover:not(.wx-night *),
html.wx-site .wx-paper .btn-outline-gold:hover,
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-outline-gold:hover {
  color: #24161A;
  background: #EAE7E3;
  border-color: #A99E8C;
  box-shadow: none;
}
html.wx-site .wx-night .btn-gold {
  color: #0B0C10;
  background: linear-gradient(135deg, #D4AF37 0%, #E5C06E 100%);
  border: none;
}
html.wx-site .wx-night .btn-outline-gold {
  color: #E5C06E;
  background: rgba(21, 23, 30, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.35);
}

html.wx-site:not([data-theme="dark"]) .badge-luxury:not(.wx-night *),
html.wx-site .wx-paper .badge-luxury:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .badge-luxury:not(.wx-night *),
html.wx-site .wx-paper .badge-luxury,
html.wx-site[data-theme="dark"] .wx-dark-paper .badge-luxury {
  background: #F1DDE1;
  border-color: #D9C29A;
  color: #621A2A;
}

html.wx-site:not([data-theme="dark"]) .luxury-card:not(.wx-night *),
html.wx-site .wx-paper .luxury-card:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .luxury-card:not(.wx-night *),
html.wx-site .wx-paper .luxury-card,
html.wx-site[data-theme="dark"] .wx-dark-paper .luxury-card {
  background: #FAF9F7;
  border-color: #DDD8D1;
  box-shadow: 0 1px 2px rgb(29 26 22 / 0.05), 0 8px 24px rgb(29 26 22 / 0.06);
}
html.wx-site:not([data-theme="dark"]) .luxury-card:hover:not(.wx-night *),
html.wx-site .wx-paper .luxury-card:hover:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .luxury-card:hover:not(.wx-night *),
html.wx-site .wx-paper .luxury-card:hover,
html.wx-site[data-theme="dark"] .wx-dark-paper .luxury-card:hover {
  border-color: #C9C2B8;
  box-shadow: 0 2px 4px rgb(29 26 22 / 0.06), 0 14px 32px rgb(29 26 22 / 0.09);
}
html.wx-site:not([data-theme="dark"]) .luxury-input:not(.wx-night *),
html.wx-site .wx-paper .luxury-input:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .luxury-input:not(.wx-night *),
html.wx-site .wx-paper .luxury-input,
html.wx-site[data-theme="dark"] .wx-dark-paper .luxury-input {
  background: #FDFCFB;
  color: #24161A;
  border-color: #D3CDC5;
}
html.wx-site:not([data-theme="dark"]) .text-gold-gradient:not(.wx-night *),
html.wx-site .wx-paper .text-gold-gradient:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .text-gold-gradient:not(.wx-night *) {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #7B2235;
}
html.wx-site .wx-ico { color: var(--gold-imperial); }

/* 6. Brand mark ----------------------------------------------------------------- */
.wx-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex-shrink: 0; }
.wx-brand-mark {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: #24161A; border: 1px solid #24161A;
}
html[data-theme="dark"] .wx-brand-mark,
.wx-night .wx-brand-mark {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(21, 23, 30, 0.9) 100%);
  border-color: rgba(212, 175, 55, 0.4);
}
.wx-brand-mark svg { width: 24px; height: 24px; }
.wx-brand-name {
  display: block; font-family: var(--font-serif); font-size: 1.22rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--text-pure); line-height: 1.1;
}
.wx-brand-sub { display: block; font-size: 0.72rem; color: var(--text-mist); letter-spacing: 0.02em; margin-top: 2px; }

/* 7. Header ---------------------------------------------------------------------- */
.wx-header {
  position: sticky; top: 0; z-index: 50; width: 100%;
  background: var(--wx-header-bg, rgba(11, 12, 16, 0.94));
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid var(--wx-line, rgba(212, 175, 55, 0.18));
}
.wx-header-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 28px; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.wx-nav { display: flex; align-items: center; gap: 4px; }
.wx-nav-link {
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  font-size: 0.93rem; font-weight: 500; color: var(--wx-ink-2, #E5E7EB);
  transition: background-color .15s ease, color .15s ease;
}
.wx-nav-link:hover { color: var(--wx-ink, #FFFFFF); background: rgb(var(--wx-fg-rgb, 255 255 255) / 0.06); }
.wx-nav-link[aria-current="page"] { color: var(--wx-ink, #FFFFFF); background: rgb(var(--wx-fg-rgb, 255 255 255) / 0.08); }
.wx-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wx-header-actions .btn-gold,
.wx-header-actions .btn-outline-gold { padding: 9px 18px; font-size: 0.9rem; }

.wx-icon-btn {
  width: 40px; height: 40px; flex: none; padding: 0;
  display: inline-grid; place-items: center; cursor: pointer;
  border-radius: 999px;
  background: transparent !important;
  border: 1px solid var(--wx-line, rgba(212, 175, 55, 0.3)) !important;
  color: var(--wx-ink-2, #E5C06E) !important;
  transition: background-color .15s ease;
}
.wx-icon-btn:hover { background: rgb(var(--wx-fg-rgb, 255 255 255) / 0.07) !important; }
.wx-icon-btn svg { width: 19px; height: 19px; }
.wx-theme-toggle .wx-when-dark { display: none; }
html[data-theme="dark"] .wx-theme-toggle .wx-when-dark { display: inline; }
html[data-theme="dark"] .wx-theme-toggle .wx-when-light { display: none; }

.wx-menu-btn { display: none; }
.wx-drawer {
  display: none; position: absolute; top: 72px; left: 0; right: 0; z-index: 49;
  padding: 14px 20px 22px; flex-direction: column; gap: 4px;
  background: var(--wx-surface, #0E1015);
  border-bottom: 1px solid var(--wx-line, rgba(212, 175, 55, 0.3));
  box-shadow: 0 18px 40px rgb(0 0 0 / calc(0.5 * var(--wx-shadow-k, 1)));
}
.wx-drawer.active { display: flex; animation: mobileMenuSlide .2s ease-out; }
.wx-drawer-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 12px; border-radius: 10px; text-decoration: none;
  color: var(--wx-ink, #FFFFFF); font-weight: 500;
}
.wx-drawer-link:hover { background: rgb(var(--wx-fg-rgb, 255 255 255) / 0.06); }
.wx-drawer-link .wx-ico { color: var(--wx-ink-3, #E5C06E); }
.wx-drawer-sep { height: 1px; margin: 8px 0; background: var(--wx-line, rgba(212, 175, 55, 0.2)); }
.wx-drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wx-drawer-actions > :only-child { grid-column: 1 / -1; }

@media (max-width: 992px) {
  .wx-nav, .wx-header-actions .wx-hide-sm { display: none; }
  .wx-menu-btn { display: inline-grid; }
  .wx-header-inner { padding: 0 16px; height: 64px; gap: 12px; }
  .wx-drawer { top: 64px; }
  .wx-brand-sub { display: none; }
}

/* 8. Footer --------------------------------------------------------------------- */
.wx-footer {
  margin-top: 96px; padding: 64px 0 32px;
  background: var(--wx-footer-bg, #08080C);
  border-top: 1px solid var(--wx-line, rgba(212, 175, 55, 0.15));
  color: var(--text-mist);
  font-size: 0.9rem;
}
.wx-footer-grid {
  display: grid; gap: 40px 32px; margin-bottom: 44px;
  grid-template-columns: minmax(220px, 1.3fr) repeat(5, minmax(130px, 1fr));
}
.wx-footer-about p { margin-top: 14px; line-height: 1.65; max-width: 34ch; }
.wx-footer h2 {
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wx-ink, var(--gold-champagne)); margin-bottom: 14px;
}
.wx-footer ul { list-style: none; display: grid; gap: 9px; }
.wx-footer a { color: var(--text-mist); text-decoration: none; }
.wx-footer a:hover { color: var(--wx-ink, #D4AF37); text-decoration: underline; text-underline-offset: 3px; }
.wx-footer-imprint {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; border-radius: var(--wx-radius);
  background: rgb(var(--wx-fg-rgb, 255 255 255) / 0.03);
  border: 1px solid var(--wx-line, rgba(212, 175, 55, 0.15));
  font-size: 0.8rem; line-height: 1.7;
}
.wx-footer-imprint strong { color: var(--wx-ink-2, #D1D5DB); font-weight: 600; }
.wx-footer-imprint .wx-company { color: var(--wx-ink, #FFFFFF); }
.wx-footer-imprint a { color: var(--wx-gold, var(--gold-champagne)); }
.wx-footer-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.wx-footer-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  font-size: 0.74rem; color: var(--wx-ink-2, #D1D5DB);
  border: 1px solid var(--wx-line, rgba(255, 255, 255, 0.1));
  background: rgb(var(--wx-fg-rgb, 255 255 255) / 0.03);
}
.wx-footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 22px; padding-top: 22px; font-size: 0.82rem;
  border-top: 1px solid var(--wx-line, rgba(255, 255, 255, 0.06));
}
.wx-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.wx-footer-bottom button {
  background: none !important; border: 0 !important; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-mist) !important;
}
.wx-footer-bottom button:hover { color: var(--wx-ink, #D4AF37) !important; text-decoration: underline; }
@media (max-width: 1080px) { .wx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wx-footer-about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .wx-footer { padding-top: 48px; margin-top: 64px; } .wx-footer-grid { gap: 32px 20px; } }

/* Home: the try-it card sits inside the hero, so no section edge runs through it. */
html.wx-site .hero-ambient-canvas { min-height: 0; padding-bottom: 72px; }
html.wx-site .hero-simulator-wrap .live-simulator-bar { margin-top: 64px; }
@media (max-width: 768px) {
  html.wx-site .hero-ambient-canvas { padding-bottom: 40px; }
  html.wx-site .hero-simulator-wrap .live-simulator-bar { margin-top: 36px; padding: 22px 20px; }
}

/* 9. Home (light) ------------------------------------------------------------------
   Scoped to the light palette; the dark theme keeps wellunex-landing.css as is. */
:root:not([data-theme="dark"]) .hero-ambient-canvas:not(.wx-night *),
html.wx-site .wx-paper .hero-ambient-canvas:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-ambient-canvas:not(.wx-night *) {
  background:
    radial-gradient(900px circle at 78% 18%, rgb(214 196 160 / 0.35), transparent 65%),
    radial-gradient(700px circle at 10% 80%, rgb(226 214 196 / 0.45), transparent 70%),
    #F2F0ED;
}
:root:not([data-theme="dark"]) .hero-ambient-canvas:not(.wx-night *)::before,
html.wx-site .wx-paper .hero-ambient-canvas:not(.wx-night *)::before,
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-ambient-canvas:not(.wx-night *)::before { opacity: 0.6; }
html.wx-site .hero-title-main { font-weight: 500; letter-spacing: -0.025em; }
:root:not([data-theme="dark"]) .hero-title-serif-italic:not(.wx-night *),
html.wx-site .wx-paper .hero-title-serif-italic:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-title-serif-italic:not(.wx-night *) {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #7B2235;
}
:root:not([data-theme="dark"]) .hero-title-main .text-gold-gradient:not(.wx-night *),
html.wx-site .wx-paper .hero-title-main .text-gold-gradient:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-title-main .text-gold-gradient:not(.wx-night *) { color: #24161A; }
:root:not([data-theme="dark"]) .hero-description-lead:not(.wx-night *),
html.wx-site .wx-paper .hero-description-lead:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-description-lead:not(.wx-night *) { color: #4A3C40; font-weight: 400; }
:root:not([data-theme="dark"]) .hero-editorial-tag:not(.wx-night *),
html.wx-site .wx-paper .hero-editorial-tag:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-editorial-tag:not(.wx-night *) { background: #FAF9F7; border-color: #DDD8D1; box-shadow: none; }
:root:not([data-theme="dark"]) .hero-tag-dot:not(.wx-night *),
html.wx-site .wx-paper .hero-tag-dot:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-tag-dot:not(.wx-night *) { background: #7B2235; box-shadow: none; }
html.wx-site .hero-tag-text,
html.wx-site .hero-demo-switch-label { font-family: var(--font-sans); letter-spacing: 0.08em; font-weight: 600; }
:root:not([data-theme="dark"]) .hero-tag-text:not(.wx-night *),
html.wx-site .wx-paper .hero-tag-text:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-tag-text:not(.wx-night *),
:root:not([data-theme="dark"]) .hero-demo-switch-label:not(.wx-night *),
html.wx-site .wx-paper .hero-demo-switch-label:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-demo-switch-label:not(.wx-night *) { color: #7B2235; }

html.wx-site .btn-luxury-primary,
html.wx-site .btn-luxury-secondary {
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  border-radius: 12px; padding: 15px 28px;
}
:root:not([data-theme="dark"]) .btn-luxury-primary:not(.wx-night *),
html.wx-site .wx-paper .btn-luxury-primary:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-luxury-primary:not(.wx-night *) {
  color: #F7F3EC; background: #24161A; border-color: #24161A;
  box-shadow: 0 1px 2px rgb(29 26 22 / 0.12), 0 10px 24px -8px rgb(29 26 22 / 0.35);
}
:root:not([data-theme="dark"]) .btn-luxury-primary:not(.wx-night *)::after,
html.wx-site .wx-paper .btn-luxury-primary:not(.wx-night *)::after,
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-luxury-primary:not(.wx-night *)::after { display: none; }
:root:not([data-theme="dark"]) .btn-luxury-primary:hover:not(.wx-night *),
html.wx-site .wx-paper .btn-luxury-primary:hover:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-luxury-primary:hover:not(.wx-night *) { background: #3A332B; transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgb(29 26 22 / 0.4); }
:root:not([data-theme="dark"]) .btn-luxury-secondary:not(.wx-night *),
html.wx-site .wx-paper .btn-luxury-secondary:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-luxury-secondary:not(.wx-night *) { color: #24161A; background: rgb(251 248 243 / 0.7); border-color: #C9C2B8; }
:root:not([data-theme="dark"]) .btn-luxury-secondary:hover:not(.wx-night *),
html.wx-site .wx-paper .btn-luxury-secondary:hover:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .btn-luxury-secondary:hover:not(.wx-night *) { background: #EAE7E3; border-color: #A99E8C; box-shadow: none; transform: translateY(-2px); }
:root:not([data-theme="dark"]) .hero-proof-mark:not(.wx-night *),
html.wx-site .wx-paper .hero-proof-mark:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-proof-mark:not(.wx-night *) { color: #7B2235; }

html.wx-site .hero-demo-pill,
html.wx-site .lookbook-filter-btn { font-family: var(--font-sans); letter-spacing: 0; }
:root:not([data-theme="dark"]) .hero-demo-pill:not(.wx-night *),
html.wx-site .wx-paper .hero-demo-pill:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-demo-pill:not(.wx-night *),
:root:not([data-theme="dark"]) .lookbook-filter-btn:not(.wx-night *),
html.wx-site .wx-paper .lookbook-filter-btn:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .lookbook-filter-btn:not(.wx-night *) { background: #FAF9F7; border-color: #DDD8D1; color: #4A3C40; box-shadow: none; }
:root:not([data-theme="dark"]) .hero-demo-pill:hover:not(.wx-night *),
html.wx-site .wx-paper .hero-demo-pill:hover:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-demo-pill:hover:not(.wx-night *),
:root:not([data-theme="dark"]) .lookbook-filter-btn:hover:not(.wx-night *),
html.wx-site .wx-paper .lookbook-filter-btn:hover:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .lookbook-filter-btn:hover:not(.wx-night *) { border-color: #A99E8C; color: #24161A; background: #FAF9F7; transform: none; box-shadow: none; }
:root:not([data-theme="dark"]) .hero-demo-pill.active:not(.wx-night *),
html.wx-site .wx-paper .hero-demo-pill.active:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .hero-demo-pill.active:not(.wx-night *),
:root:not([data-theme="dark"]) .lookbook-filter-btn.active:not(.wx-night *),
html.wx-site .wx-paper .lookbook-filter-btn.active:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .lookbook-filter-btn.active:not(.wx-night *) { background: #24161A; border-color: #24161A; color: #F7F3EC; box-shadow: none; }

:root:not([data-theme="dark"]) .floating-glass-card:not(.wx-night *),
html.wx-site .wx-paper .floating-glass-card:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .floating-glass-card:not(.wx-night *) {
  background: rgb(251 248 243 / 0.94); border-color: #DDD8D1;
  box-shadow: 0 1px 2px rgb(29 26 22 / 0.06), 0 16px 36px rgb(29 26 22 / 0.12);
}
/* Showroom (home and /sablonlar). showroom.css is shared with the panel, so the
   light look is set here rather than in its tokens. */
:root:not([data-theme="dark"]) .showroom:not(.wx-night *),
html.wx-site .wx-paper .showroom:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .showroom:not(.wx-night *) { --showroom-gold-foil: linear-gradient(112deg, #5E451A 0%, #8F6C2F 50%, #621A2A 100%); }
:root:not([data-theme="dark"]) .showroom-btn--ghost:not(.wx-night *),
html.wx-site .wx-paper .showroom-btn--ghost:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .showroom-btn--ghost:not(.wx-night *) { color: #24161A; border-color: #C9C2B8; }
:root:not([data-theme="dark"]) .showroom-btn--ghost:hover:not(.wx-night *),
html.wx-site .wx-paper .showroom-btn--ghost:hover:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .showroom-btn--ghost:hover:not(.wx-night *) { color: #24161A; border-color: #A99E8C; background: #EAE7E3; }
:root:not([data-theme="dark"]) .showroom-btn--gold:not(.wx-night *),
html.wx-site .wx-paper .showroom-btn--gold:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .showroom-btn--gold:not(.wx-night *),
:root:not([data-theme="dark"]) .godly-island-btn:not(.wx-night *),
html.wx-site .wx-paper .godly-island-btn:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .godly-island-btn:not(.wx-night *) { background: #24161A; color: #F7F3EC; box-shadow: none; }

/* Planning tools hub: the invitation card is the one ink card among the tools. */
:root:not([data-theme="dark"]) .tool-card--cta,
html.wx-site .wx-paper .tool-card--cta,
html.wx-site[data-theme="dark"] .wx-dark-paper .tool-card--cta { background: #24161A; border-color: #24161A; }
:root:not([data-theme="dark"]) .tool-card--cta h3,
html.wx-site .wx-paper .tool-card--cta h3,
html.wx-site[data-theme="dark"] .wx-dark-paper .tool-card--cta h3 { color: #F7F3EC; }
:root:not([data-theme="dark"]) .tool-card--cta p,
html.wx-site .wx-paper .tool-card--cta p,
html.wx-site[data-theme="dark"] .wx-dark-paper .tool-card--cta p { color: #CFC7B8; }
:root:not([data-theme="dark"]) .tool-card--cta .tool-card-note,
html.wx-site .wx-paper .tool-card--cta .tool-card-note,
html.wx-site[data-theme="dark"] .wx-dark-paper .tool-card--cta .tool-card-note { color: #E2C990; }
:root:not([data-theme="dark"]) .tool-card--cta .tool-badge,
html.wx-site .wx-paper .tool-card--cta .tool-badge,
html.wx-site[data-theme="dark"] .wx-dark-paper .tool-card--cta .tool-badge { background: rgb(226 201 144 / 0.18); color: #F7F3EC; }
:root:not([data-theme="dark"]) .tool-card--cta .tool-card-icon,
html.wx-site .wx-paper .tool-card--cta .tool-card-icon,
html.wx-site[data-theme="dark"] .wx-dark-paper .tool-card--cta .tool-card-icon { background: #E2C990; color: #24161A; }
:root:not([data-theme="dark"]) .tool-card--cta .btn-gold,
html.wx-site .wx-paper .tool-card--cta .btn-gold,
html.wx-site[data-theme="dark"] .wx-dark-paper .tool-card--cta .btn-gold { background: #E2C990; border-color: #E2C990; color: #24161A; }

/* Gold foil text in a cream band (e.g. the showroom's numbered steps). */
html.wx-site .wx-paper,
html.wx-site[data-theme="dark"] .wx-dark-paper { --showroom-gold-foil: linear-gradient(112deg, #5E451A 0%, #8F6C2F 50%, #621A2A 100%); }

/* …and inside a dark band the showroom keeps its own look. */
html.wx-site .wx-night .showroom-btn--ghost { color: #E8E2D3; border-color: rgba(255, 255, 255, 0.18); background: transparent; }
html.wx-site .wx-night .showroom-btn--ghost:hover { color: #FFFFFF; border-color: #E5C06E; }
html.wx-site .wx-night .showroom-btn--gold { background: linear-gradient(135deg, #D4AF37 0%, #E5C06E 100%); color: #1A1406; }
html.wx-site .wx-night.showroom,
html.wx-site .wx-night .showroom { --showroom-gold-foil: linear-gradient(112deg, #9c7431 0%, #f1dfa9 42%, #c9a255 68%, #8a6428 100%); }
html.wx-site .wx-night .lookbook-filter-btn { background: #13161F; border-color: rgba(255, 255, 255, 0.08); color: #9CA3AF; }
html.wx-site .wx-night .lookbook-filter-btn.active { background: linear-gradient(135deg, #D4AF37 0%, #AA771C 100%); border-color: #D4AF37; color: #000; }

:root:not([data-theme="dark"]) .live-simulator-bar:not(.wx-night *),
html.wx-site .wx-paper .live-simulator-bar:not(.wx-night *),
html.wx-site[data-theme="dark"] .wx-dark-paper .live-simulator-bar:not(.wx-night *) {
  background: #FAF9F7; border-color: #DDD8D1;
  box-shadow: 0 1px 2px rgb(29 26 22 / 0.05), 0 18px 40px rgb(29 26 22 / 0.08);
}