/* ==========================================================================
   Halloween exclusive skin (2026). Everything here is scoped to html.hw,
   which a small script in <head> adds only until the deadline in
   data-hw-ends. After that the page falls back to its normal look on its
   own. To remove for good: delete this file's <link>, the hw script and
   the .hw-only elements from / and /exclusive.
   ========================================================================== */

.hw-only { display: none !important; }
html.hw .hw-only { display: revert !important; }

html.hw {
  --pumpkin: #FF7A1A;
  --pumpkin-deep: #E8590C;
  --night: #120C1A;
}

/* ---- Hero: orange glow over the lilac one, bats, a web in the corner ---- */
html.hw .hero::before {
  background:
    radial-gradient(closest-side at 35% 45%, rgba(255,122,26,.16), transparent 70%),
    radial-gradient(closest-side at 65% 55%, rgba(106,85,232,.14), transparent 72%);
}
.hw-bats { position: absolute; inset: 0; pointer-events: none; z-index: 0 !important; overflow: hidden; }
.hw-bat { position: absolute; width: 46px; height: auto; fill: #2A1E38; opacity: .78; animation: hw-flap 3.2s ease-in-out infinite; }
.hw-bat.b1 { top: 110px; left: 7%;  width: 64px; }
.hw-bat.b2 { top: 360px; left: 9%;  width: 34px; opacity: .5; animation-delay: -1.1s; }
.hw-bat.b3 { top: 150px; right: 6%; width: 58px; animation-delay: -.6s; }
.hw-bat.b4 { top: 330px; right: 9%; width: 30px; opacity: .45; animation-delay: -2s; }
@keyframes hw-flap {
  0%, 100% { transform: translateY(0) rotate(-4deg) scaleX(1); }
  50%      { transform: translateY(-10px) rotate(3deg) scaleX(.86); }
}
.hw-web { position: absolute; top: 0; left: calc(-1 * var(--gutter)); transform: scaleX(-1); width: 170px; height: 170px; pointer-events: none; opacity: .22; z-index: 0 !important; }
.hw-web path { fill: none; stroke: #171523; stroke-width: 1.1; }

/* ---- The exclusive ribbon above the headline ---- */
.hw-ribbon {
  margin: 0 0 4px;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 7px 18px 7px 8px;
  border-radius: 999px;
  background: var(--night);
  color: #FCEBDC;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  box-shadow: 0 10px 26px -14px rgba(232,89,12,.9), inset 0 0 0 1px rgba(255,122,26,.45);
}
html.hw .hw-ribbon { display: inline-flex !important; }
.hw-ribbon .hw-pk { flex: none; width: 26px; height: 26px; }
.hw-ribbon b { color: var(--pumpkin); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.hw-ribbon i { font-style: normal; opacity: .45; }

/* ---- Buttons go pumpkin ---- */
html.hw .btn,
html.hw .close-sec .btn,
html.hw .deal-btn {
  background: linear-gradient(180deg, #FF8C33 0%, var(--pumpkin-deep) 100%);
  color: #1B0D02;
  box-shadow: 0 14px 34px -12px rgba(232,89,12,.8);
}
html.hw .btn:hover,
html.hw .close-sec .btn:hover,
html.hw .deal-btn:hover { background: linear-gradient(180deg, #FFA057 0%, #F06A1E 100%); box-shadow: 0 18px 40px -12px rgba(232,89,12,.9); }

/* ---- Dark bands: a candle-light glow from the bottom ---- */
html.hw .dark {
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(255,122,26,.10), transparent 70%),
    radial-gradient(ellipse 60% 35% at 50% 0%, rgba(106,85,232,.10), transparent 70%),
    var(--ground);
}

/* ---- Small exclusive notes near the buy points ---- */
.hw-note {
  margin: 10px 0 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--pumpkin-deep);
}
html.hw .hw-note { display: flex !important; }
.dark .hw-note { color: #FFA45C; }
.hw-note svg { flex: none; width: 20px; height: 20px; }

html.hw .order { box-shadow: 0 30px 60px -34px rgba(23,21,35,.45), 0 0 0 2px rgba(255,122,26,.55); position: relative; }
.hw-stamp {
  position: absolute; top: -14px; right: 18px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--night); color: #FFB36B;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,122,26,.5);
}

/* ---- Countdown bar ---- */
html.hw .deal-bar {
  background: linear-gradient(90deg, #120C1A 0%, #1E1226 50%, #120C1A 100%);
  box-shadow: 0 -1px 0 rgba(255,122,26,.55), 0 -10px 30px -12px rgba(23,21,35,.45);
}
html.hw .deal-text { display: flex; align-items: center; gap: 8px; }
html.hw .deal-text b { color: #FF9A4A; }
.deal-text .hw-pk { width: 24px; height: 24px; flex: none; }
html.hw .deal-clock span { border-color: rgba(255,122,26,.3); }

@media (max-width: 640px) {
  .hw-web { width: 110px; height: 110px; }
  .hw-web { left: calc(-1 * var(--gutter) - 10px); }
  .hw-bat.b1 { display: none; }
  .hw-bat.b2 { display: none; }
  .hw-bat.b3 { top: 60px; right: 26%; width: 30px; }
  .hw-bat.b4 { display: none; }
  html.hw .deal-text { justify-content: center; }
  .hw-long { display: none; }
}
@media (max-width: 480px) {
  html.hw .hw-ribbon { flex-wrap: wrap; justify-content: center; column-gap: 8px; row-gap: 2px; padding: 8px 16px; border-radius: 18px; font-size: .84rem; text-align: center; }
  .hw-ribbon .hw-pk { width: 22px; height: 22px; }
  .hw-ribbon i { display: none; }
  .hw-ribbon span { flex-basis: 100%; text-wrap: balance; }
  .hw-note { display: block; text-align: center; text-wrap: balance; }
  html.hw .hw-note { display: block !important; }
  .hw-note svg { display: inline-block; vertical-align: -4px; margin-right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-bat { animation: none; }
}