body.holiday-detail-page {
  --holiday-glow: rgba(255, 255, 255, .16);
  --holiday-warm: rgba(244, 186, 92, .32);
  --holiday-cool: rgba(92, 160, 244, .24);
  --holiday-accent-card: url("/assets/card-ref.png");
  background:
    radial-gradient(circle at 78% 28%, var(--holiday-glow), transparent 28%),
    radial-gradient(circle at 22% 72%, var(--holiday-warm), transparent 30%),
    linear-gradient(135deg, #050711 0%, #0a1324 48%, #05070d 100%) !important;
  overflow-x: hidden;
}

body.holiday-detail-page.christmas-days-page {
  background: #071326 !important;
}

body.holiday-detail-page::before {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 6, 14, .86), rgba(4, 10, 22, .46) 48%, rgba(2, 7, 16, .72)),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.62)) !important;
}

.holiday-detail-page .site-header {
  z-index: 1000 !important;
  overflow: visible !important;
}

.holiday-detail-page .site-header .nav-menu {
  z-index: 1100 !important;
}

.holiday-detail-hero {
  position: relative;
  grid-template-columns: minmax(0, .94fr) minmax(440px, .72fr);
  min-height: calc(100vh - 92px);
  width: min(1320px, calc(100% - 72px));
  margin: 0 auto;
  padding: 96px 0 64px;
  gap: 54px;
}

.holiday-detail-hero::before {
  content: "";
  position: absolute;
  inset: 52px -26px 28px;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 34px;
  background:
    var(--holiday-scene),
    linear-gradient(135deg, rgba(5, 10, 21, .78), rgba(8, 16, 30, .34));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 28px 80px rgba(0,0,0,.34);
}

.holiday-detail-hero::after {
  content: "";
  position: absolute;
  inset: 52px -26px 28px;
  z-index: -1;
  border-radius: 34px;
  background: linear-gradient(90deg, rgba(1,5,12,.76) 0%, rgba(1,5,12,.38) 48%, rgba(1,5,12,.10) 100%);
}

.holiday-hero-copy {
  align-self: center;
  max-width: 690px;
  padding-left: 44px;
}

.holiday-hero-copy h1 {
  margin: 10px 0 18px;
  color: #fff;
  font-size: clamp(70px, 8vw, 116px);
  line-height: .9;
  letter-spacing: 0;
  text-shadow: 0 10px 42px rgba(0,0,0,.42);
}

.holiday-hero-copy .days-question {
  margin-top: 24px;
}

.holiday-countdown-card {
  align-self: center;
  text-align: left;
}

.holiday-countdown-card h2 {
  margin: 12px 0 4px;
  font-size: 36px;
  line-height: 1.05;
}

.holiday-countdown-card > small {
  display: block;
  color: rgba(232,240,249,.78);
}

.holiday-countdown-card .premium-time-grid {
  margin-top: 26px;
}

.countdown-facts {
  display: grid;
  gap: 10px;
  margin: 20px 0 18px;
}

.countdown-facts p {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 14px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(222,232,242,.80);
  line-height: 1.4;
}

.countdown-facts span {
  color: rgba(222,232,242,.62);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.countdown-facts strong {
  color: #fff;
  font-size: 14px;
}

.holiday-guide-grid,
.collection-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.holiday-detail-page .related-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.holiday-detail-page .related-card-grid .holiday-card {
  width: auto !important;
  max-width: 100%;
  min-width: 0;
}

.holiday-guide-grid a,
.collection-mini-grid a {
  min-height: 128px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(8,16,32,.68);
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.16);
}

.holiday-guide-grid strong {
  color: #fff;
  font-size: 18px;
}

.holiday-guide-grid span,
.holiday-guide-grid em {
  color: rgba(222,232,242,.72);
  font-style: normal;
}

.holiday-guide-grid em {
  margin-top: auto;
  color: #fff;
  font-weight: 800;
}

.collection-mini-grid a {
  min-height: 72px;
  justify-content: center;
  color: #fff;
  font-weight: 820;
}

.disabled-card {
  opacity: .62;
  cursor: default;
}

.holiday-detail-page .tradition-window {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.62)),
    var(--holiday-accent-card);
}

.holiday-detail-page .fact-icon {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.24), transparent 36%),
    linear-gradient(135deg, var(--holiday-warm), rgba(255,255,255,.08));
}

.halloween-detail-page {
  --holiday-glow: rgba(168, 88, 255, .30);
  --holiday-warm: rgba(255, 122, 38, .32);
  --holiday-cool: rgba(61, 25, 98, .36);
  --holiday-accent-card: url("/assets/card-halloween-premium.png");
  --holiday-scene:
    radial-gradient(circle at 74% 18%, rgba(236,233,214,.86) 0 8%, rgba(236,233,214,.14) 9%, transparent 20%),
    radial-gradient(circle at 69% 78%, rgba(255,116,32,.42), transparent 18%),
    radial-gradient(circle at 82% 78%, rgba(255,116,32,.22), transparent 13%),
    radial-gradient(ellipse at 82% 62%, rgba(31, 13, 55, .92), transparent 32%),
    linear-gradient(145deg, rgba(23,8,39,.96), rgba(7,9,22,.68) 48%, rgba(8,5,16,.38));
}

.thanksgiving-detail-page {
  --holiday-glow: rgba(255, 207, 116, .34);
  --holiday-warm: rgba(190, 92, 32, .30);
  --holiday-cool: rgba(84, 42, 20, .18);
  --holiday-accent-card: url("/assets/card-thanksgiving-premium.png");
  --holiday-scene:
    radial-gradient(circle at 70% 30%, rgba(255,210,132,.48), transparent 24%),
    radial-gradient(ellipse at 78% 72%, rgba(157, 86, 34, .42), transparent 34%),
    linear-gradient(145deg, rgba(60,31,14,.88), rgba(15,10,8,.58) 48%, rgba(8,7,6,.32));
}

.black-friday-detail-page {
  --holiday-glow: rgba(255, 209, 104, .28);
  --holiday-warm: rgba(210, 160, 58, .28);
  --holiday-cool: rgba(72, 86, 116, .30);
  --holiday-accent-card: url("/assets/card-black-friday-premium.png");
  --holiday-scene:
    linear-gradient(105deg, rgba(0,0,0,.92), rgba(16,16,20,.48) 48%, rgba(186,139,52,.18)),
    radial-gradient(circle at 74% 32%, rgba(255,210,116,.30), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 84px),
    linear-gradient(160deg, rgba(2,2,4,.98), rgba(12,12,18,.72) 58%, rgba(48,37,18,.42));
}

.new-year-detail-page {
  --holiday-glow: rgba(255, 214, 117, .34);
  --holiday-warm: rgba(249, 189, 75, .30);
  --holiday-cool: rgba(74, 120, 210, .26);
  --holiday-accent-card: url("/assets/card-new-year-premium.png");
  --holiday-scene:
    radial-gradient(circle at 70% 20%, rgba(255,219,129,.50), transparent 16%),
    radial-gradient(circle at 84% 30%, rgba(120,172,255,.22), transparent 22%),
    radial-gradient(circle at 80% 60%, rgba(255,220,128,.20), transparent 20%),
    linear-gradient(145deg, rgba(5,12,32,.94), rgba(6,18,42,.58) 48%, rgba(12,8,20,.30));
}

.easter-detail-page {
  --holiday-glow: rgba(218, 247, 188, .34);
  --holiday-warm: rgba(255, 235, 196, .30);
  --holiday-cool: rgba(86, 148, 92, .26);
  --holiday-accent-card: url("/assets/card-easter-premium.png");
  --holiday-scene:
    radial-gradient(circle at 70% 24%, rgba(255,248,220,.55), transparent 22%),
    radial-gradient(ellipse at 76% 72%, rgba(186, 223, 165, .34), transparent 34%),
    linear-gradient(145deg, rgba(20,54,42,.84), rgba(14,40,32,.48) 50%, rgba(252,244,220,.18));
}

.halloween-detail-page { --holiday-hero-image: url("/images/holidays/halloween-hero.jpg"); }
.thanksgiving-detail-page { --holiday-hero-image: url("/images/holidays/thanksgiving-hero.jpg"); }
.black-friday-detail-page { --holiday-hero-image: url("/images/holidays/black-friday-hero.jpg"); }
.new-year-detail-page { --holiday-hero-image: url("/images/holidays/new-year-hero.jpg"); }
.easter-detail-page { --holiday-hero-image: url("/images/holidays/easter-hero.jpg"); }

.holiday-detail-page .holiday-detail-hero {
  height: 100vh !important;
  min-height: 100vh !important;
  width: auto !important;
  margin: 0 !important;
  padding: 118px 40px 70px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.holiday-detail-page .holiday-detail-hero::before,
.holiday-detail-page .holiday-detail-hero::after {
  display: none !important;
}

.holiday-detail-page .holiday-hero-copy.christmas-hero-card {
  position: relative;
  width: min(1060px, 100%);
  max-width: none;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.holiday-detail-page .holiday-hero-copy h1 {
  margin: 6px 0 18px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(66px, 7.6vw, 108px);
  line-height: .94;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 10px 34px rgba(0,0,0,.34);
}

.holiday-detail-page .hero-intro {
  max-width: 620px;
}

.holiday-detail-page .holiday-hero-copy .premium-time-grid {
  width: min(1120px, 100%);
}

.holiday-detail-page .holiday-hero-copy .actions {
  margin-top: 0;
}

.halloween-detail-page::before {
  background:
    linear-gradient(90deg, rgba(10,4,18,.84) 0%, rgba(20,8,34,.62) 36%, rgba(20,8,34,.22) 68%, rgba(3,4,12,.34) 100%),
    radial-gradient(circle at 78% 38%, rgba(255,116,32,.18), transparent 34%),
    linear-gradient(180deg, rgba(2,3,10,.48) 0%, rgba(2,3,10,.08) 42%, rgba(2,3,10,.72) 100%) !important;
}

.thanksgiving-detail-page::before {
  background:
    linear-gradient(90deg, rgba(28,12,4,.82) 0%, rgba(58,26,8,.56) 38%, rgba(90,42,10,.18) 70%, rgba(20,8,3,.28) 100%),
    radial-gradient(circle at 76% 38%, rgba(255,190,92,.18), transparent 34%),
    linear-gradient(180deg, rgba(18,7,2,.42) 0%, rgba(18,7,2,.08) 42%, rgba(18,7,2,.66) 100%) !important;
}

.black-friday-detail-page::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(9,9,12,.64) 38%, rgba(44,34,14,.18) 72%, rgba(0,0,0,.34) 100%),
    radial-gradient(circle at 76% 36%, rgba(255,205,92,.16), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,.72) 100%) !important;
}

.new-year-detail-page::before {
  background:
    linear-gradient(90deg, rgba(3,8,24,.82) 0%, rgba(5,14,38,.56) 38%, rgba(18,25,58,.20) 70%, rgba(3,6,18,.30) 100%),
    radial-gradient(circle at 78% 30%, rgba(255,216,116,.18), transparent 34%),
    linear-gradient(180deg, rgba(3,8,24,.42) 0%, rgba(3,8,24,.08) 42%, rgba(3,8,24,.66) 100%) !important;
}

.easter-detail-page::before {
  background:
    linear-gradient(90deg, rgba(8,32,22,.78) 0%, rgba(18,54,38,.50) 38%, rgba(238,246,218,.16) 70%, rgba(8,24,18,.26) 100%),
    radial-gradient(circle at 76% 34%, rgba(255,244,202,.20), transparent 34%),
    linear-gradient(180deg, rgba(5,22,16,.38) 0%, rgba(5,22,16,.06) 42%, rgba(5,22,16,.58) 100%) !important;
}

@media (max-width: 980px) {
  .holiday-detail-hero {
    grid-template-columns: 1fr;
    width: min(100% - 32px, 1320px);
  }

  .holiday-hero-copy {
    padding-left: 0;
  }

  .holiday-guide-grid,
  .collection-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}