/* Seasonal theme: Christmas. Scoped entirely under .christmas-theme so it never leaks into the
   regular storefront look, and overrides only the CSS custom properties storefront-home-v2.css
   already defines on .storefront-v2 -- every component that reads --ml-pink/--ml-line/etc. picks
   up the festive palette automatically, no per-component overrides needed. */

/* storefront-home-v2.css scopes its palette to .storefront-v2, but the header, footer and the
   .btn/.btn.secondary buttons they (and the hero) use are styled by style.css's site-wide
   --rose/--gold variables instead -- override both sets so the whole page (not just the
   .storefront-v2 section) picks up the festive palette. */
body.christmas-theme {
  --rose: #c8102e;
  --rose-dark: #8f0e1f;
  --rose-soft: #f2f8f3;
  --rose-pale: #e8f3ea;
  --gold: #b08d2e;
}

.storefront-v2.christmas-theme {
  --ml-pink: #c8102e;
  --ml-pink-deep: #8f0e1f;
  --ml-soft: #f2f8f3;
  --ml-cream: #fffaf0;
  --ml-line: #d9c48f;
  --ml-shadow: 0 18px 46px rgba(45, 90, 61, .12);
  position: relative;
}

.christmas-banner {
  margin: 0 0 16px;
  padding: 12px 20px;
  border-radius: 14px;
  background: linear-gradient(90deg, #8f0e1f, #c8102e 50%, #1e6b3a);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 10px 24px rgba(143, 14, 31, .18);
}

.christmas-banner .xmas-days {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .5);
  text-underline-offset: 3px;
}

/* Santa / stocking / gift, filling the gap the hero's short headline otherwise leaves between
   the copy and the product collage. Desktop only (the mobile hero stacks the collage right
   underneath the copy, with no gap to fill, and crowding one in would just cover the text). */
.christmas-theme .hero-copy {
  position: relative;
}

.christmas-theme .hero-decor {
  position: absolute;
  top: -6px;
  right: 18px;
  display: flex;
  gap: 4px;
  font-size: 52px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(143, 14, 31, .2));
  animation: christmas-bob 3.6s ease-in-out infinite;
}

.christmas-theme .hero-decor span:nth-child(2) { animation: christmas-bob 3.6s ease-in-out infinite .3s; }
.christmas-theme .hero-decor span:nth-child(3) { animation: christmas-bob 3.6s ease-in-out infinite .6s; }

@keyframes christmas-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

/* A playful "days to Christmas" badge, pinned at a jaunty angle just under the Santa/stocking/
   gift row, filling the rest of that gap. The banner above already states the same count in
   plain text for anyone using a screen reader or with reduced motion, so this card is purely
   decorative (aria-hidden) and free to be as fun as it likes. */
.christmas-theme .hero-countdown {
  position: absolute;
  top: 108px;
  right: 26px;
  width: 128px;
  padding: 16px 8px;
  border-radius: 20px;
  background: linear-gradient(160deg, #8f0e1f, #c8102e 55%, #1e6b3a);
  color: #fff;
  text-align: center;
  box-shadow: 0 16px 32px rgba(143, 14, 31, .28);
  pointer-events: none;
  animation: christmas-countdown-pulse 2.8s ease-in-out infinite;
}

.christmas-theme .hero-countdown strong {
  display: block;
  font-family: 'Marcellus', 'Playfair Display', serif;
  font-size: 42px;
  line-height: 1;
}

/* Only the "días para Navidad" label -- not the clock's own <span>s, which .hero-countdown-clock
   styles separately (a bare "span" selector here would also match those and override their
   font-size/margin). */
.christmas-theme .hero-countdown > span {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.35;
}

.christmas-theme .hero-countdown-clock {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, .4);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  font-family: 'Marcellus', 'Playfair Display', serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

@keyframes christmas-countdown-pulse {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50% { transform: rotate(2deg) scale(1.06); }
}

@media (max-width: 1100px) {
  .christmas-theme .hero-decor,
  .christmas-theme .hero-countdown { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .christmas-theme .hero-decor,
  .christmas-theme .hero-decor span,
  .christmas-theme .hero-countdown { animation: none; }
}

/* Falling snow: a handful of absolutely-positioned flakes, randomized and spawned by
   christmas-theme.js, drifting down a fixed full-viewport layer above everything but
   never intercepting clicks (pointer-events: none). */
.christmas-snow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.christmas-snow .flake {
  position: absolute;
  top: -5vh;
  /* White text on this page's cream/white background was nearly invisible except where a
     flake happened to cross the red banner -- an icy blue reads as snow and actually shows up
     against a light page, with a dark soft shadow underneath for extra definition. */
  color: #cfe8ff;
  text-shadow: 0 0 4px rgba(39, 68, 110, .35), 0 2px 5px rgba(20, 40, 70, .25);
  animation-name: christmas-fall, christmas-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  will-change: transform;
}

@keyframes christmas-fall {
  from { transform: translateY(-5vh); }
  to { transform: translateY(105vh); }
}

@keyframes christmas-sway {
  0%, 100% { margin-left: 0; }
  50% { margin-left: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .christmas-snow { display: none; }
}

.christmas-theme .hero {
  background: linear-gradient(135deg, #fff 0%, #fbfff9 56%, #eef6ef 100%);
}

/* The Santa/stocking/gift row and the countdown card both sit in the top-right corner of
   .hero-copy -- keep the paragraph narrower there (desktop only, same breakpoint the
   decorations use) so its text never runs underneath them. */
@media (min-width: 1101px) {
  .christmas-theme .hero-copy > p {
    /* Measured, not guessed: at the narrowest width this breakpoint covers (just above 1100px),
       .hero-copy is only ~410px wide and the countdown card's left edge sits at ~253px from
       .hero-copy's own left edge -- both 420px and an earlier 300px attempt still ran the
       paragraph's text under the card. 240px keeps the paragraph's right edge left of the
       card at every width this media query applies to (the column only gets wider above it). */
    max-width: 240px;
  }
}

.christmas-theme .why-strip {
  background: linear-gradient(90deg, #fbf4e4, #fff 55%, #eef6ef);
}

.christmas-theme .why-title {
  background: linear-gradient(145deg, #fbf4e4, #f3e7c8);
}

/* style.css's .btn gradient hardcodes its second stop (#cf527a) instead of using a variable,
   so overriding --rose alone leaves a pink undertone on the primary button -- replace the whole
   gradient here for a clean red-to-deep-red look. */
body.christmas-theme .btn:not(.secondary) {
  background: linear-gradient(135deg, #c8102e, #8f0e1f);
}