/* Holiday skin. Loaded only when <html data-season="holiday">.
   Remove this file's <link> and set SHOP.season = "base" in products.js to go back to year-round. */
:root[data-season="holiday"] {
  --mark-ring: #D23A48;
  --ink: #0D2620;
  --surface: #143A30;
  --line: #24503F;
  --text: #EEF5F2;
  --dim: #A8C3B9;
  --accent2: #D23A48;
  --art-glow: #1F4C3E;
  --art-deep: #102B24;
  --plate: #0A1E19;
}

/* ambient snow */
[data-season="holiday"] .snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* string lights */
[data-season="holiday"] .lights {
  position: relative; z-index: 3; height: 34px; overflow: hidden;
  background: var(--ink);
}
.lights svg { display: block; width: 100%; height: 34px; }
.bulb { animation: twinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.bulb-glow { animation: glow 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 45% { opacity: 0.35; } 55% { opacity: 0.4; } }
@keyframes glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.05; } }


[data-season="holiday"] .hl::after {
  background: repeating-linear-gradient(90deg, var(--accent2) 0 14px, var(--text) 14px 28px);
  background-size: 28px 100%; opacity: .9; animation: candy 1.4s linear infinite;
}
@keyframes candy { to { background-position: 28px 0; } }
[data-season="holiday"] .ribbon-track span::after { content: "✦"; }
[data-season="holiday"] .snow, [data-season="holiday"] .lights { display: block; }