/* ==========================================================================
   MA' NATURAL - TEMA NAVIDEÑO
   Se superpone al diseño normal: todo cuelga de la clase "navidad" en <html>.
   Quitando esa clase (interruptor en el panel admin) el sitio vuelve a verse
   exactamente igual que antes. Paleta: verde bosque + dorado de la marca,
   con rojo cálido como acento y blanco nieve.
   ========================================================================== */

html.navidad {
  --xmas-red: #b3202a;
  --xmas-red-dark: #7d1119;
  --xmas-gold: #e8c24a;
  --xmas-snow: #fffdf7;
}

/* ---------- Guirnalda de luces colgando de la barra superior ---------- */
.xmas-lights { display: none; }

html.navidad .navbar {
  border-bottom: 0;
  box-shadow: 0 2px 0 0 var(--xmas-red), 0 4px 0 0 var(--xmas-gold), 0 10px 24px rgba(125, 17, 25, 0.12);
}

html.navidad .xmas-lights {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  height: 40px;
  overflow: hidden;
  pointer-events: none;
  list-style: none;
  padding: 0;
}

.xmas-lights li {
  --c: #ff4d4d;
  position: relative;
  flex: 0 0 46px;
  height: 100%;
}
.xmas-lights li:nth-child(4n+1) { --c: #ff4d4d; }
.xmas-lights li:nth-child(4n+2) { --c: #ffd75e; }
.xmas-lights li:nth-child(4n+3) { --c: #5cdb54; }
.xmas-lights li:nth-child(4n+4) { --c: #fff4d6; }

/* cable que cuelga entre bulbos */
.xmas-lights li::before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: -9px;
  height: 18px;
  border-bottom: 2px solid #1c2b1f;
  border-radius: 50%;
}
/* bulbo */
.xmas-lights li::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  width: 11px;
  height: 17px;
  margin-left: -5.5px;
  border-radius: 50% 50% 55% 55%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--c) 45%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--c) 70%, transparent);
  animation: xmas-twinkle 2.4s ease-in-out infinite;
}
.xmas-lights li:nth-child(3n)::after   { animation-delay: -0.8s; animation-duration: 2.9s; }
.xmas-lights li:nth-child(3n+1)::after { animation-delay: -1.6s; animation-duration: 2.1s; }
.xmas-lights li:nth-child(5n)::after   { animation-delay: -0.3s; }

@keyframes xmas-twinkle {
  0%, 100% { opacity: 1;    box-shadow: 0 0 12px 3px color-mix(in srgb, var(--c) 75%, transparent); }
  50%      { opacity: 0.45; box-shadow: 0 0 4px 0 color-mix(in srgb, var(--c) 45%, transparent); }
}

/* ---------- Nieve y destellos (canvas creado por theme-navidad.js) ---------- */
#xmas-snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 998;
}

/* ---------- Hero ---------- */
html.navidad .hero-section {
  background:
    radial-gradient(ellipse 60% 50% at 12% 0%, rgba(179, 32, 42, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 50% at 88% 0%, rgba(232, 194, 74, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(27, 77, 36, 0.06) 0%, rgba(247, 250, 246, 1) 100%);
}
html.navidad .hero-badge {
  background: linear-gradient(90deg, rgba(179, 32, 42, 0.12), rgba(232, 194, 74, 0.22));
  color: var(--xmas-red-dark);
  border: 1px solid rgba(179, 32, 42, 0.25);
}
/* deja espacio para que las luces cuelguen sin tapar la insignia */
html.navidad .hero-section { padding-top: 104px; }
html.navidad .hero-title::after {
  content: '';
  display: block;
  width: 84px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--xmas-red), var(--xmas-gold), var(--primary-herb));
}

/* ---------- Controles y tarjetas ---------- */
html.navidad .filter-btn.active {
  background: linear-gradient(135deg, var(--xmas-red), var(--xmas-red-dark));
  border-color: var(--xmas-red);
  box-shadow: 0 6px 16px rgba(179, 32, 42, 0.32);
}
html.navidad .filter-btn:hover { border-color: var(--xmas-red); color: var(--xmas-red); }

html.navidad .product-card { position: relative; }
html.navidad .product-card:hover {
  box-shadow: 0 25px 50px rgba(15, 48, 22, 0.15), 0 0 0 2px rgba(232, 194, 74, 0.55);
}
/* brillo diagonal tipo escarcha al pasar el cursor */
html.navidad .product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
  z-index: 3;
}
html.navidad .product-card:hover::after {
  transform: translateX(120%);
  transition: transform 0.9s ease;
}

html.navidad .cart-fab {
  background: linear-gradient(135deg, var(--xmas-red), var(--xmas-red-dark));
  box-shadow: 0 10px 26px rgba(179, 32, 42, 0.45);
}

html.navidad .footer { border-top: 3px solid var(--xmas-red); }

/* ---------- Promociones: versión navideña ---------- */
html.navidad .promos-section {
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.10) 0 2px, transparent 3px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.08) 0 2px, transparent 3px) 0 0 / 61px 61px,
    linear-gradient(165deg, var(--xmas-red-dark) 0%, #4a0b11 38%, var(--primary-forest-dark) 100%);
}
html.navidad .promos-eyebrow {
  color: var(--xmas-gold);
  background: rgba(232, 194, 74, 0.14);
  border-color: rgba(232, 194, 74, 0.55);
}
html.navidad .promos-title { color: var(--xmas-snow); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
html.navidad .promos-subtitle { color: rgba(255, 253, 247, 0.82); }

/* panel de armado: tarjeta crema con borde dorado y brillo en la cinta */
html.navidad .regalo-panel {
  border-color: rgba(232, 194, 74, 0.7);
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(232, 194, 74, 0.35);
}
html.navidad .regalo-stage {
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(232, 194, 74, 0.7);
}
html.navidad .regalo-ribbon {
  background: linear-gradient(110deg, #c9a227 0%, #f6e08a 45%, #c9a227 100%);
  background-size: 200% 100%;
  animation: xmas-shimmer 3.2s linear infinite;
}
@keyframes xmas-shimmer { to { background-position: -200% 0; } }

html.navidad .regalo-kicker { color: var(--xmas-red); }
html.navidad .regalo-tag-hole { background: rgba(179, 32, 42, 0.45); }
html.navidad .regalo-tag input:checked + .regalo-tag-card { border-color: var(--xmas-red); box-shadow: 0 10px 18px rgba(179, 32, 42, 0.25); }
html.navidad .regalo-price-now { color: var(--xmas-red); }
html.navidad .regalo-deadline { color: var(--xmas-red-dark); }
html.navidad .regalo-add-btn {
  background: linear-gradient(135deg, var(--xmas-red), var(--xmas-red-dark));
  box-shadow: 0 10px 22px rgba(179, 32, 42, 0.42);
}
html.navidad .regalo-add-btn:hover { box-shadow: 0 14px 30px rgba(179, 32, 42, 0.55); }

/* entrada escalonada */
html.navidad .regalo > * { animation: xmas-rise 0.8s var(--transition-smooth) both; }
html.navidad .regalo > .regalo-stage { animation-delay: 0.08s; }
html.navidad .regalo > .regalo-panel { animation-delay: 0.16s; }
@keyframes xmas-rise {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 719px) {
  .xmas-lights li { flex-basis: 38px; }
}

/* ---------- Accesibilidad: sin movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  html.navidad .xmas-lights li::after,
  html.navidad .regalo-ribbon,
  html.navidad .regalo > * { animation: none !important; }
  html.navidad .product-card::after { display: none; }
  #xmas-snow { display: none; }
}