/* =========================================================================
   Black November theme
   Active while html[data-season="black-november"] (set from src/data/campaigns.js).
   The site keeps its own colours (festive red→orange, warm neutrals). Black and
   electric yellow are used only as accents: the menu link, the lead hero slide,
   countdown boxes, small "shop deals" pills and the yellow offer highlights.
   ========================================================================= */

:root[data-season="black-november"] {
  --bn-black: #0a0a0b;
  --bn-yellow: #ffd60a;
}

/* ---- top bar: original gradient; just the CTA pill gets the campaign accent ---- */
[data-season="black-november"] .topbar__cta { background: var(--bn-black); color: var(--bn-yellow); }
[data-season="black-november"] .topbar__msg--deal a:hover .topbar__cta { background: #26262b; }

/* ---- header chip: original gradient; black/yellow tag icon as the accent ---- */
[data-season="black-november"] .deal-chip__icon { background: var(--bn-black); color: var(--bn-yellow); }

/* ---- menu link: same weight as its neighbours, with a black tag and a thin yellow marker ---- */
.nav__list .nav__campaign { gap: 6px; color: var(--color-ink); font-weight: 700; }
.nav__campaign span {
  background: linear-gradient(transparent 64%, var(--bn-yellow, #ffd60a) 64%, var(--bn-yellow, #ffd60a) 92%, transparent 92%);
  padding: 0 2px;
}
.nav__list .nav__campaign:hover { background: var(--color-surface); color: var(--color-ink); }
.nav__campaign .icon { width: 16px; height: 16px; color: var(--bn-black, #0a0a0b); stroke-width: 2; }

/* ---- hero: typographic campaign slide ---- */
.slide--campaign { background: var(--bn-black, #0a0a0b); }
.slide--campaign::after { display: none; }
.campaign-slide {
  position: absolute; inset: 0; overflow: hidden;
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 24px;
  padding: 48px 56px 92px; color: #fff;
  background:
    radial-gradient(circle at 82% 28%, rgba(255, 214, 10, .22), transparent 46%),
    radial-gradient(circle at 8% 110%, rgba(255, 214, 10, .12), transparent 40%),
    var(--bn-black, #0a0a0b);
}
.slide--campaign .campaign-slide__copy > * { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.slide--campaign.is-active .campaign-slide__copy > * { opacity: 1; transform: none; }
.slide--campaign.is-active .campaign-slide__copy > :nth-child(2) { transition-delay: .08s; }
.slide--campaign.is-active .campaign-slide__copy > :nth-child(3) { transition-delay: .16s; }
.slide--campaign.is-active .campaign-slide__copy > :nth-child(n + 4) { transition-delay: .24s; }

.campaign-slide__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bn-yellow, #ffd60a);
}
/* "live" dot: a crisp yellow ring expands and fades. (A soft glow read as a grey smudge on the black.) */
.campaign-slide__pulse { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bn-yellow, #ffd60a); }
.campaign-slide__pulse::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid var(--bn-yellow, #ffd60a); opacity: 0;
  animation: bn-ring 1.8s var(--ease) infinite;
}
@keyframes bn-ring {
  0% { transform: scale(1); opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .campaign-slide__pulse::after { animation: none; } }
.campaign-slide__title {
  margin-top: 14px; color: #fff;
  font-size: clamp(40px, 4.4vw, 72px); font-weight: 800; line-height: .92; letter-spacing: -.04em; text-transform: uppercase;
}
.campaign-slide__title span { display: block; color: transparent; -webkit-text-stroke: 2px var(--bn-yellow, #ffd60a); }
.campaign-slide__offer { margin-top: 18px; max-width: 36ch; font-size: 18px; color: rgba(255, 255, 255, .82); }
.campaign-slide__offer b { color: var(--bn-yellow, #ffd60a); }
.campaign-slide__timer { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.campaign-slide__timer b {
  margin-left: 6px; padding: 4px 10px; border-radius: 6px;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: 15px; font-variant-numeric: tabular-nums;
}
.campaign-slide .hero__ctas { margin-top: 24px; }

/* collage of top deals */
/* The collage is a size container: each tile is as wide as the space allows (44% of the
   width) but never so big that the two rows collide (≈ half the height, minus the price
   strip). Top tiles sit in the corners, the third bottom-centre, so no price is ever covered. */
.campaign-slide__collage { position: relative; height: 100%; min-height: 380px; container-type: size; }
.deal-tile {
  --tile-w: min(44cqw, 46cqh - 58px);
  position: absolute; width: var(--tile-w); display: grid; gap: 6px; padding: 8px;
  border-radius: 16px; background: #fff; color: var(--color-ink);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55);
  transition: transform .4s var(--ease);
}
.deal-tile:hover { transform: rotate(0) scale(1.04); z-index: 4; }
.deal-tile__media { aspect-ratio: 1 / 1; border-radius: 10px; }
.deal-tile--1 { top: 5%; left: 2%; transform: rotate(-6deg); }
.deal-tile--2 { top: 0; right: 4%; transform: rotate(5deg); }
.deal-tile--3 { bottom: 0; left: calc(50% - var(--tile-w) / 2); z-index: 2; transform: rotate(-2deg); }
.deal-tile__badge {
  position: absolute; top: -12px; right: -12px; z-index: 1;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--bn-yellow, #ffd60a); color: var(--bn-black, #0a0a0b);
  font-size: 15px; font-weight: 800; transform: rotate(12deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.deal-tile__price { display: grid; padding: 0 4px 2px; line-height: 1.25; white-space: nowrap; }
.deal-tile__price s { font-size: 11px; color: var(--color-muted); }
.deal-tile__price b { font-size: 15px; font-weight: 800; color: var(--color-sale); }

/* ---- home: deals band ----
   Solid red, full width. Each product is its own white "deal tile", and the band
   ends in one smooth, gentle wave that flows into the page, rather than a hard
   line, a fade or a busy decorative edge. */
.deals-band {
  --wave-height: 72px;
  position: relative;
  margin-top: 88px; padding: 72px 0 calc(var(--wave-height) + 24px); color: #fff;
  background:
    radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1.4px) 0 0 / 26px 26px,
    linear-gradient(110deg, #9f0e23 0%, #d0282f 34%, #e8492f 64%, #f07a1f 100%);
}
.deals-band::after { /* the wave, drawn in the page colour over the bottom of the band */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--wave-height); pointer-events: none;
  background: var(--color-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0 72V40C180 12 360 4 560 18s380 46 600 40c120-3 210-16 280-30v44z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0 72V40C180 12 360 4 560 18s380 46 600 40c120-3 210-16 280-30v44z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.deals-band > .container { position: relative; z-index: 1; }
/* the next section starts closer, so the wave leads straight into it */
.deals-band + .section { padding-top: 40px; }
.deals__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.deals__kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: var(--bn-black, #0a0a0b); color: var(--bn-yellow, #ffd60a);
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.deals__kicker .icon { width: 16px; height: 16px; stroke-width: 2; }
.deals__title { margin-top: 16px; color: #fff; font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
.deals__title span { color: var(--bn-yellow, #ffd60a); text-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.deals__sub { margin-top: 12px; max-width: 52ch; font-size: 17px; color: rgba(255, 255, 255, .88); }
.deals__timer > p { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.deals__timer .cd-units { min-width: 340px; margin-top: 0; }
.deals__timer .cd-unit { background: var(--bn-black, #0a0a0b); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.deals__timer .cd-unit b { color: var(--bn-yellow, #ffd60a); }
.deals__timer .cd-unit small { color: rgba(255, 255, 255, .7); }

/* each product is a white tile on the red, like a price tag pinned to a board */
.deals__track { padding: 6px 4px 22px; margin: -6px -4px 0; } /* room so tile shadows aren't clipped */
.deals-band .card {
  padding: 10px 10px 14px; border-radius: var(--radius-lg);
  background: #fff; color: var(--color-text);
  box-shadow: 0 12px 30px rgba(90, 10, 20, .22), 0 2px 6px rgba(90, 10, 20, .12);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.deals-band .card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(90, 10, 20, .3), 0 2px 6px rgba(90, 10, 20, .12); }
.deals-band .card__body { padding: 12px 6px 0; }
.deals-band .card__title a::after { border-radius: var(--radius-lg); }

/* "Shop all deals" sits under the countdown, completing the offer block */
.deals__all {
  width: 100%; margin-top: 12px;
  background: var(--bn-black, #0a0a0b); color: var(--bn-yellow, #ffd60a);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}
.deals__all:hover { background: #26262b; }

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .campaign-slide { padding: 40px 48px 88px; } /* full-width slide here, so the collage keeps its room */
}
/* portrait tablets: still room for a smaller collage beside the copy (the tiles size themselves) */
@media (max-width: 900px) and (min-width: 720px) {
  .campaign-slide { grid-template-columns: 1.2fr 1fr; gap: 16px; padding: 36px 32px 64px; }
  .campaign-slide__collage { min-height: 300px; }
}
/* phones: copy only */
@media (max-width: 719px) {
  .campaign-slide { grid-template-columns: 1fr; align-content: center; }
  .campaign-slide__collage { display: none; }
}
@media (max-width: 600px) {
  .campaign-slide { padding: 28px 22px 72px; }
  .campaign-slide__offer { font-size: 16px; }
  .deals-band { --wave-height: 40px; margin-top: 64px; padding: 56px 0 calc(var(--wave-height) + 16px); }
  .deals-band + .section { padding-top: 32px; }
  .deals__timer, .deals__timer .cd-units { width: 100%; min-width: 0; }
}