/* 🎅 Christmas (Santa) — landing. Built from portal skins: xmas-classic/tokens.css + _map/landing.css + xmas-classic/landing.css + Santa sleigh layer. Visuals only. */
/* =============================================================================
   SKIN: xmas-classic — 🎄 Christmas Classic
   Deep Christmas red and pine green with gold, falling snow, Mountains of Christmas headings.
   Seasonal design, PORTAL ONLY. Generated by generators/gen_seasonal.py — edit there.
   ============================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&family=Rubik:wght@500;700;800&display=swap");

:root[data-skin] {
  --sk-scheme: dark;
  --sk-bg: #0c2117;
  --sk-bg-chrome: #5c0d12;
  --sk-chrome-text: #fff4e0;
  --sk-chrome-text-2: rgba(255,244,224,0.72);
  --sk-chrome-border: rgba(255,255,255,0.12);
  --sk-surface: #123124;
  --sk-surface-2: #1a3d2e;
  --sk-surface-3: #123124;
  --sk-overlay: rgba(0,0,0,.72);
  --sk-text: #fdf8ee;
  --sk-text-2: #e4efe6;
  --sk-text-3: #a9c4b3;
  --sk-text-4: #a9c4b3;
  --sk-link: #d4202c;
  --sk-border: #2c5a43;
  --sk-border-strong: #2c5a43;
  --sk-hairline: rgba(253,248,238,0.08);
  --sk-accent: #d4202c;
  --sk-accent-hover: #d4202c;
  --sk-accent-soft: rgba(212,32,44,0.16);
  --sk-accent-ink: #ffffff;
  --sk-grad-a: #b3121d;
  --sk-grad-b: #e2b13c;
  --sk-gradient: linear-gradient(90deg,#b3121d,#e2b13c);
  --sk-grad-ink: #ffffff;
  --sk-gold: #e2b13c;
  --sk-teal: #e2b13c;
  --sk-navy: #5c0d12;
  --sk-success: #2fbf71;
  --sk-warning: #e2b13c;
  --sk-danger: #ff4d5e;
  --sk-progress-track: #1a3d2e;
  --sk-progress-fill: #d4202c;
  --sk-font-head: "Rubik", system-ui, sans-serif;
  --sk-font-body: "Rubik", system-ui, sans-serif;
  --sk-head-style: normal;
  --sk-head-weight: 800;
  --sk-head-transform: none;
  --sk-head-tracking: .2px;
  --sk-radius-sm: 7px;
  --sk-radius-btn: 14px;
  --sk-radius-card: 14px;
  --sk-radius-pill: 999px;
  --sk-shadow: 0 12px 30px rgba(0,0,0,.5);
  --sk-shadow-lg: 0 20px 46px rgba(0,0,0,.65);
  --sk-logo-filter: drop-shadow(0 0 10px rgba(242,210,122,.45));
}

/* =============================================================================
   SKIN MAP — HOMEPAGE (public/landing/index.html, the iframe inside "/").
   Shared by ALL skins; reads ONLY --sk-* tokens. The homepage defines its own
   short token set on :root — this file points each one at the skin, plus the
   few literal colours the homepage uses. Section numbers match SKIN-MAP.md (L1–L10).
   ============================================================================= */

/* L1. token bridge */
:root[data-skin] {
  color-scheme: var(--sk-scheme);
  --bg-page: var(--sk-bg);
  --bg-surface: var(--sk-surface);
  --bg-surface-alt: var(--sk-surface-2);
  --accent-primary: var(--sk-accent);
  --accent-primary-hover: var(--sk-accent-hover);
  --accent-gradient-start: var(--sk-grad-a);
  --accent-gradient-end: var(--sk-grad-b);
  --gradient: var(--sk-gradient);
  --accent-gold: var(--sk-gold);
  --accent-teal: var(--sk-teal);
  --accent-navy: var(--sk-navy);
  --text-primary: var(--sk-text);
  --text-secondary: var(--sk-text-3);
  --border-subtle: var(--sk-border);
  --progress-track: var(--sk-progress-track);
  --progress-fill: var(--sk-progress-fill);
  --r-sm: var(--sk-radius-sm);
  --r-btn: var(--sk-radius-btn);
  --r-card: var(--sk-radius-card);
  --r-pill: var(--sk-radius-pill);
  --f-head: var(--sk-font-head);
  --f-body: var(--sk-font-body);
}

/* L2. canvas + chrome */
:root[data-skin] body { background: var(--sk-bg); color: var(--sk-text-3); }
:root[data-skin] .nav { background: color-mix(in srgb, var(--sk-bg-chrome) 96%, transparent); }
:root[data-skin] .footer { background: var(--sk-bg-chrome); }
:root[data-skin] h1, :root[data-skin] h2, :root[data-skin] h3, :root[data-skin] h4, :root[data-skin] .btn { color: var(--sk-text); }
/* header + footer sit on --sk-bg-chrome, so they use the chrome ink */
:root[data-skin] .nav { border-bottom-color: var(--sk-chrome-border); }
:root[data-skin] .nav .logo b, :root[data-skin] .nav .nav-link, :root[data-skin] .nav .btn-outline,
:root[data-skin] .nav .btn-pill, :root[data-skin] .nav-burger { color: var(--sk-chrome-text); border-color: var(--sk-chrome-border); }
:root[data-skin] .nav .logo small { color: var(--sk-chrome-text-2); }
:root[data-skin] .footer { color: var(--sk-chrome-text-2); border-top-color: var(--sk-chrome-border); }
:root[data-skin] .footer .f-head, :root[data-skin] .footer .f-cats a,
:root[data-skin] .footer .trust-box, :root[data-skin] .footer .age, :root[data-skin] .footer .sec-link { color: var(--sk-chrome-text); }
:root[data-skin] .footer .trust-box, :root[data-skin] .footer .f-cats a, :root[data-skin] .footer .f-cats { border-color: var(--sk-chrome-border); } /* social icons keep their brand colours */
:root[data-skin] .footer .age { border-color: var(--sk-chrome-text); }
:root[data-skin] .footer .f-about { background: color-mix(in srgb, var(--sk-chrome-text) 6%, var(--sk-bg-chrome)); }
:root[data-skin] .footer .f-about h3 { color: var(--sk-chrome-text); }
@media (max-width: 980px) { :root[data-skin] .nav-links { background: var(--sk-bg-chrome); } }
:root[data-skin] .btn-red, :root[data-skin] .btn-violet { color: var(--sk-accent-ink); }
:root[data-skin] .btn-violet { background: var(--sk-grad-a); color: var(--sk-grad-ink); }
/* everything sitting ON the gradient uses --sk-grad-ink (dark on metallic skins) */
:root[data-skin] .marquee-item { color: var(--sk-grad-ink); }
:root[data-skin] .stat-dots i { background: color-mix(in srgb, var(--sk-grad-ink) 30%, transparent); }
:root[data-skin] .stat-dots i.on { background: var(--sk-grad-ink); }
:root[data-skin] .stat-slide .stars { color: inherit; }

/* L3. headings follow the skin's heading style */
:root[data-skin] .hero-headline, :root[data-skin] .sec-title, :root[data-skin] .promo-copy h2,
:root[data-skin] .stat-mid strong, :root[data-skin] .w-name, :root[data-skin] .f-head,
:root[data-skin] .f-about h3, :root[data-skin] .tab, :root[data-skin] .nav-link, :root[data-skin] .sec-label, :root[data-skin] .f-cats a {
  font-style: var(--sk-head-style);
  text-transform: var(--sk-head-transform);
}

/* L4. placeholders + wells */
:root[data-skin] .hero-media, :root[data-skin] .card-media, :root[data-skin] .stats > div,
:root[data-skin] .w-strip div { background-color: var(--sk-surface-3); }
:root[data-skin] .hero-card { background: var(--sk-bg); }
:root[data-skin] .hero-info { border-right-color: var(--sk-hairline); }
:root[data-skin] .dd-menu { background: var(--sk-surface); }

/* L5. cards */
:root[data-skin] .card { box-shadow: var(--sk-shadow); }
:root[data-skin] .card:hover { box-shadow: var(--sk-shadow-lg); }
:root[data-skin] .price-pill { background: var(--sk-text); color: var(--sk-bg); }
:root[data-skin] .tab[aria-selected="true"] { background: var(--sk-text); color: var(--sk-bg); }

/* L6. promo banner */
:root[data-skin] .promo {
  background: radial-gradient(120% 140% at 100% 50%, color-mix(in srgb, var(--sk-gold) 14%, transparent), transparent 55%), var(--sk-surface-3);
}
:root[data-skin] .promo-copy .btn { border-color: var(--sk-text); }

/* L7. winners */
:root[data-skin] .w-quote { color: var(--sk-text-2); }
:root[data-skin] .w-pill {
  background: color-mix(in srgb, var(--sk-teal) 14%, transparent);
  color: color-mix(in srgb, var(--sk-teal) 55%, var(--sk-text));
  border-color: color-mix(in srgb, var(--sk-teal) 45%, transparent);
}

/* L8. footer bits */
:root[data-skin] .f-contact svg { stroke: var(--sk-gold); }

/* L10. text sitting on the PAGE background follows the skin ink (the homepage
   hard-codes #fff for these). Text on photos / accent fills / the gradient stays white. */
:root[data-skin] .hero-info h3, :root[data-skin] .price-now, :root[data-skin] .card-title,
:root[data-skin] .sold-label, :root[data-skin] .w-name, :root[data-skin] .sec-label,
:root[data-skin] .tab:hover, :root[data-skin] #moreBtn, :root[data-skin] .promo-copy .btn { color: var(--sk-text); }
:root[data-skin] .hero-headline { color: #fff; }            /* always on a photo */
:root[data-skin] .stat-mid, :root[data-skin] .stat-mid strong { color: var(--sk-grad-ink); } /* on the gradient */
:root[data-skin] .footer .f-links a:hover, :root[data-skin] .footer .f-contact a:hover { color: var(--sk-chrome-text); }

/* L9. links */
:root[data-skin] .sec-link, :root[data-skin] .w-more { color: var(--sk-text); border-bottom-color: var(--sk-accent); }

/* xmas-classic — homepage */
:root[data-skin] body { background: radial-gradient(ellipse at 50% -10%, #1f4a35 0%, transparent 60%), linear-gradient(180deg,#0f2a1d,#0b1d14) !important; background-attachment: fixed !important; background-color: #0c2117 !important; }
:root[data-skin] .hero-headline, :root[data-skin] .sec-title {
  font-family: "Mountains of Christmas", "Rubik", serif !important; font-weight: 700 !important; font-style: normal !important;
  letter-spacing: .5px !important; text-transform: none !important; color: #f2d27a !important;
  text-shadow: 0 0 18px rgba(242,210,122,.45);
}
:root[data-skin] .btn-red, :root[data-skin] .btn-violet { background: linear-gradient(180deg,#d4202c,#b3121d) !important; color: #ffffff !important; border: 0 !important; box-shadow: 0 6px 18px rgba(242,210,122,.45) !important; font-weight: 800 !important; }
:root[data-skin] .bar i { background: repeating-linear-gradient(135deg,#d4202c 0 10px,#f2d27a 10px 20px) !important; }
:root[data-skin] .card, :root[data-skin] .hero-card {  }
:root[data-skin] .marquee-item { color: #ffffff !important; font-weight: 800 !important; }
:root[data-skin] .tab[aria-selected="true"], :root[data-skin] .price-pill { background: #d4202c !important; color: #ffffff !important; }
:root[data-skin] .hero-media { border-bottom: 3px solid #d4202c; }
:root[data-skin] .wrap, :root[data-skin] .section, :root[data-skin] .footer, :root[data-skin] .nav { position: relative; z-index: 2; }

:root[data-skin] body::before {
  content: ""; position: fixed; inset: -120px 0 0 0; z-index: 1; pointer-events: none; opacity: 0.85;
  background-image:
    radial-gradient(3px 3px at 20px 30px, #ffffff, transparent), radial-gradient(2px 2px at 90px 120px, #ffffff, transparent),
    radial-gradient(2.5px 2.5px at 160px 60px, #ffffff, transparent), radial-gradient(2px 2px at 230px 170px, #ffffff, transparent),
    radial-gradient(3px 3px at 300px 90px, #ffffff, transparent);
  background-size: 320px 220px; animation: sk-snow 14s linear infinite;
}
:root[data-skin] body::after {
  content: ""; position: fixed; inset: -120px 0 0 0; z-index: 1; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(1.5px 1.5px at 40px 60px, #ffffff, transparent), radial-gradient(1.5px 1.5px at 140px 20px, #ffffff, transparent),
    radial-gradient(1px 1px at 210px 130px, #ffffff, transparent), radial-gradient(1.5px 1.5px at 270px 190px, #ffffff, transparent);
  background-size: 300px 240px; animation: sk-snow 22s linear infinite;
}
@keyframes sk-snow { from { background-position: 0 0; } to { background-position: 60px 240px; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin] body::before, :root[data-skin] body::after, :root[data-skin] .footer::before, :root[data-skin] footer::before, :root[data-skin] body > *:first-child::before { animation: none !important; }
  :root[data-skin] body::before, :root[data-skin] .footer::before, :root[data-skin] footer::before { display: none; }
}

/* ---- 🎅 SANTA'S SLEIGH (added 6 Nov 2026): Santa and two reindeer fly across the top of the
   screen every 24s, trailing gold sparkles. Real element (<div class="xm-sky"><i></div> in
   app/layout.js and public/landing/index.html) on a fixed layer above the content
   (pointer-events: none; z-index 3 — dialogs/popups sit far higher). ---- */
:root[data-skin] .xm-sky { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; contain: strict; }
:root[data-skin] .xm-sky i { position: absolute; top: 30%; left: 0; display: flex; align-items: center; white-space: nowrap; font-style: normal; font-size: 56px; line-height: 1; will-change: transform; transform: translateX(110vw); animation: xm-fly 24s linear infinite 2s; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
:root[data-skin] .xm-sky i::before { content: "\1F98C\1F98C\1F385"; letter-spacing: -6px; animation: xm-bob 1.6s ease-in-out infinite; }
:root[data-skin] .xm-sky i::after { content: ""; width: 180px; height: 26px; margin-left: 4px; opacity: .9;
  background: radial-gradient(circle at 6% 50%, #fff6c8 0 2.5px, transparent 3.5px), radial-gradient(circle at 18% 30%, #f2d27a 0 2px, transparent 3px), radial-gradient(circle at 30% 70%, #ffffff 0 2px, transparent 3px), radial-gradient(circle at 44% 40%, #f2d27a 0 1.6px, transparent 2.6px), radial-gradient(circle at 58% 64%, #fff6c8 0 1.4px, transparent 2.4px), radial-gradient(circle at 72% 36%, #f2d27a 0 1.2px, transparent 2px), radial-gradient(circle at 88% 58%, #ffffff 0 1px, transparent 1.8px), linear-gradient(90deg, rgba(242,210,122,.55), transparent);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 2px; background-repeat: no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 50%;
  animation: xm-twinkle .5s steps(2) infinite; }
@keyframes xm-fly { 0% { transform: translateX(110vw) translateY(0); } 45% { transform: translateX(-420px) translateY(-14px); } 100% { transform: translateX(-420px) translateY(-14px); } }
@keyframes xm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes xm-twinkle { 50% { opacity: .55; } }
@media (max-width: 640px) { :root[data-skin] .xm-sky i { font-size: 36px; top: 26%; } :root[data-skin] .xm-sky i::after { width: 110px; } }
@media (prefers-reduced-motion: reduce) { :root[data-skin] .xm-sky { display: none; } }