/* CHRISTMAS FEATURE — remove this stylesheet and christmas.js after Christmas. */
.header-social { position: relative; }
.header-social .christmas-social-link {
  transform-origin: center;
  transition: transform 650ms cubic-bezier(.18,.85,.24,1.18);
}
.header-social .christmas-compass {
  position: absolute;
  left: 50%; top: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%) scale(.12);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: transform 620ms cubic-bezier(.16,1.3,.32,1), opacity 180ms ease;
}
.header-social .christmas-compass img {
  width: 100%; height: 100%; display: block;
  opacity: 1 !important; transform: none !important;
  animation: none !important;
}
/* Entrance flash sits over the compass; inner-circle metallic sweep is independent. */
.christmas-compass::before,
.christmas-compass::after {
  content: ""; position: absolute; inset: -14%; border-radius: 50%;
  pointer-events: none; opacity: 0;
}
.christmas-compass::before {
  z-index: 3;
  background: radial-gradient(circle, #fff 0%, rgba(255,246,204,.98) 13%, rgba(255,201,94,.62) 30%, transparent 67%);
  filter: drop-shadow(0 0 14px #ffdf92);
}
/* The pale-blue SVG circle extends about 37.75% of the icon width
   from its centre (SVG viewBox 1993.609 and inner radius 752.5).
   Inset by 12.5% to keep the shine wholly inside its dark border. */
.christmas-compass::after {
  z-index: 4;
  inset: 12.5%;
  border-radius: 50%;
  background-image: linear-gradient(
    110deg,
    transparent 42%,
    rgba(255, 255, 255, .08) 45%,
    rgba(255, 255, 255, .9) 49%,
    rgba(255, 249, 220, .76) 52%,
    transparent 56%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  /* Keep the mask stationary; animate the light inside it, not the mask. */
}
.christmas-active .christmas-social-link:first-child { transform: translateX(-12px) scale(.5); }
.christmas-active .christmas-social-link:nth-child(2) { transform: translateX(12px) scale(.5); }
.christmas-active .christmas-compass {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Preserve the translate centring when the compass is hovered.
   The global .header-social a:hover rule otherwise replaces its transform. */
.header-social .christmas-compass:hover,
.header-social .christmas-compass:active {
  transform: translate(-50%, -50%) scale(1.15);
  opacity: 1;
}

.christmas-reveal .christmas-compass::before { animation: christmasBurst 700ms ease-out both; }
/* The ::after layer scales together with its compass link on hover. */
.christmas-active .christmas-compass::after {
  animation: christmasMetalSweep 2s linear infinite;
}
@keyframes christmasBurst {
  0% { opacity: 0; transform: scale(.15); }
  16% { opacity: 1; transform: scale(.85); }
  48% { opacity: .9; transform: scale(2); }
  100% { opacity: 0; transform: scale(3); }
}
@keyframes christmasMetalSweep {
  0%, 12% { opacity: 0; background-position: 100% 0; }
  18% { opacity: .95; }
  36% { opacity: .95; background-position: 0% 0; }
  44%, 100% { opacity: 0; background-position: 0% 0; }
}
/* On smaller screens do not let the extra icon widen the header grid. */
@keyframes christmasDisclaimerReveal {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 767px) {
  .header-main { column-gap: 2vw; }
  .header-social { gap: clamp(14px, 5vw, 26px); }
  .header-social .christmas-compass { width: 40px; height: 40px; }
  .christmas-active .christmas-social-link:first-child { transform: translateX(-7px) scale(.5); }
  .christmas-active .christmas-social-link:nth-child(2) { transform: translateX(7px) scale(.5); }
}
@media (max-width: 360px) {
  .header-social { gap: 10px; }
  .header-social .christmas-compass { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .header-social .christmas-social-link,
  .header-social .christmas-compass { transition: none !important; }
  .christmas-compass::before, .christmas-compass::after { animation: none !important; }
}


/* =========================================================
   CHRISTMAS COMPASS — CLICK / TAP DUST & SPARKLES
   Reuses MENU/BOOK's navDustShake and navSparkleShake keyframes
   defined in style.css. The elements scale with the compass on hover.
   ========================================================= */
.header-social .christmas-compass .christmas-click-dust,
.header-social .christmas-compass .christmas-click-sparkles {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}
.header-social .christmas-compass .christmas-click-dust {
  width: 144px;
  height: 64px;
  background:
    radial-gradient(circle at 8% 55%, rgba(245, 215, 160, .7) 0 3px, transparent 4px),
    radial-gradient(circle at 18% 30%, rgba(220, 185, 125, .6) 0 4px, transparent 5px),
    radial-gradient(circle at 28% 70%, rgba(250, 225, 175, .65) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 65%, rgba(235, 200, 145, .65) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 28%, rgba(250, 225, 170, .7) 0 3px, transparent 4px),
    radial-gradient(circle at 93% 55%, rgba(220, 185, 125, .55) 0 3px, transparent 4px);
  filter: blur(1px);
}
.header-social .christmas-compass .christmas-click-sparkles {
  width: 152px;
  height: 70px;
  background:
    radial-gradient(circle at 5% 48%, #fff7d8 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 16% 20%, #ffe5a0 0 1px, transparent 2px),
    radial-gradient(circle at 26% 75%, #ffffff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 74% 70%, #ffe6a3 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 84% 22%, #fff9dd 0 1px, transparent 2px),
    radial-gradient(circle at 96% 48%, #ffffff 0 1.5px, transparent 2.5px);
}
/* Both animations begin on click/tap, not on hover. */
.header-social .christmas-compass.christmas-particles-playing .christmas-click-dust {
  animation: navDustShake .5s ease-out .05s 1 both;
}
.header-social .christmas-compass.christmas-particles-playing .christmas-click-sparkles {
  animation: navSparkleShake .5s ease-out .05s 1 both;
}
@media (prefers-reduced-motion: reduce) {
  .header-social .christmas-compass .christmas-click-dust,
  .header-social .christmas-compass .christmas-click-sparkles {
    animation: none !important;
  }
}

/* =========================================================
   CHRISTMAS FULL-SCREEN OVERLAY
   Temporary: all structure is injected by christmas.js.
   xmas.jpg slaps in for 1 second; xmas-white.svg fades in after.
   Header's defined desktop width: .header-main { max-width: 850px; }.
   ========================================================= */
body.christmas-overlay-open {
  overflow: hidden;
}
.christmas-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 10000;
  isolation: isolate;
  overflow: hidden;
  background: #392c25;
}
.christmas-scene-backdrop {
  position: absolute;
  inset: 0;
  background: #392c25 url('/images/backgrounds/xmas.jpg') center / cover no-repeat;
  transform-origin: 50% 35%;
  animation: christmasScreenSlap 1s cubic-bezier(.23,.7,.25,1) both;
  will-change: transform, opacity;
}
/* Arrive from above, squash on impact, then settle after the bounce/shake. */
@keyframes christmasScreenSlap {
  0%   { opacity: 0; transform: translate3d(0,-22vh,0) scale(1.18); }
  9%   { opacity: 1; }
  23%  { transform: translate3d(0,0,0) scale(1.04,.94); }
  31%  { transform: translate3d(0,13px,0) scale(1,1.045); }
  38%  { transform: translate3d(-9px,-5px,0) scale(1.018,.984); }
  46%  { transform: translate3d(7px,4px,0) scale(1.005,1.012); }
  57%  { transform: translate3d(-4px,-2px,0) scale(1.004,.996); }
  70%  { transform: translate3d(2px,1px,0) scale(1.002); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

/* Dust shoots out towards all four screen edges after impact. */
.christmas-impact-dust {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle at 15% 12%, rgba(251,226,181,.92) 0 3px, transparent 5px),
    radial-gradient(circle at 68% 23%, rgba(213,184,142,.75) 0 6px, transparent 9px),
    radial-gradient(circle at 34% 36%, rgba(250,235,204,.85) 0 3px, transparent 6px),
    radial-gradient(circle at 84% 49%, rgba(214,177,127,.74) 0 8px, transparent 12px),
    radial-gradient(circle at 18% 64%, rgba(255,245,222,.84) 0 4px, transparent 7px),
    radial-gradient(circle at 65% 78%, rgba(229,199,157,.78) 0 5px, transparent 9px),
    radial-gradient(circle at 30% 92%, rgba(245,218,179,.72) 0 7px, transparent 11px);
  filter: blur(.8px);
}
.christmas-impact-dust-left,
.christmas-impact-dust-right {
  top: 0;
  width: min(24vw, 240px);
  height: 100%;
}
.christmas-impact-dust-left {
  left: 0;
  animation: christmasDustLeft .75s ease-out .19s both;
}
.christmas-impact-dust-right {
  right: 0;
  animation: christmasDustRight .75s ease-out .19s both;
}
.christmas-impact-dust-top,
.christmas-impact-dust-bottom {
  left: 0;
  width: 100%;
  height: min(20vh, 160px);
}
.christmas-impact-dust-top {
  top: 0;
  animation: christmasDustTop .7s ease-out .19s both;
}
.christmas-impact-dust-bottom {
  bottom: 0;
  animation: christmasDustBottom .7s ease-out .19s both;
}
@keyframes christmasDustLeft {
  0%   { opacity: 0; transform: translateX(10vw) scale(.5); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-7vw) scale(1.25); }
}
@keyframes christmasDustRight {
  0%   { opacity: 0; transform: translateX(-10vw) scale(.5); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(7vw) scale(1.25); }
}
@keyframes christmasDustTop {
  0%   { opacity: 0; transform: translateY(8vh) scale(.6); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-7vh) scale(1.3); }
}
@keyframes christmasDustBottom {
  0%   { opacity: 0; transform: translateY(-8vh) scale(.6); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(7vh) scale(1.3); }
}

/* White panel and its vector banner are one centred, responsive unit.
   The max width matches .header-main { max-width: 850px; }.
   The panel is additionally constrained by viewport height in landscape. */
.christmas-white-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.christmas-white-art {
  --christmas-art-ratio: 1.64;
  position: relative;
  flex: 0 0 auto;
  width: min(850px, 100vw, calc(100dvh * var(--christmas-art-ratio)));
  pointer-events: auto;
  opacity: 0;
  animation: christmasWhiteFade 1.25s ease-in-out 1s both;
}
.christmas-white-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* The sample shows approximately 7% top/side padding within the white SVG.
   Individual SVGs remain sharp and in their original proportions. */
.christmas-banner {
  position: absolute;
  top: 7%;
  left: 7%;
  width: 86%;
  height: 14.5%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--christmas-word-gap, 1.4%);
  pointer-events: none;
}
.christmas-banner-year {
  display: flex;
  align-items: flex-start;
  gap: var(--christmas-year-gap, 2px);
  height: 100%;
  flex: 0 0 auto;
}
.christmas-banner img {
  display: block;
  width: auto;
  height: var(--christmas-letter-height, 100%);
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
  pointer-events: none;
}

/* Locked final layout, animated into place in sequence. */
.christmas-banner-year img,
.christmas-banner > img {
  opacity: 0;
  will-change: transform, opacity;
}

/* 2026 shoots in one after another, 0.15s apart. */
.christmas-banner-year img:nth-child(1) {
  animation: christmasYearShotIn .34s cubic-bezier(.2,.9,.25,1.18) 1.12s both;
}
.christmas-banner-year img:nth-child(2) {
  animation: christmasYearShotIn .34s cubic-bezier(.2,.9,.25,1.18) 1.27s both;
}
.christmas-banner-year img:nth-child(3) {
  animation: christmasYearShotIn .34s cubic-bezier(.2,.9,.25,1.18) 1.42s both;
}
.christmas-banner-year img:nth-child(4) {
  animation: christmasYearShotIn .34s cubic-bezier(.2,.9,.25,1.18) 1.57s both;
}

/* XMAS floats in over 0.5s once the year has landed. */
.christmas-banner > img:nth-of-type(1) {
  animation: christmasXmasFloatIn .5s cubic-bezier(.19,.82,.24,1) 1.82s both;
}

/* DEALS glides in quickly from the left side of the screen. */
.christmas-banner > img:nth-of-type(2) {
  animation: christmasDealsGlideIn .34s cubic-bezier(.15,.86,.27,1) 2.34s both;
}

@keyframes christmasYearShotIn {
  0% {
    opacity: 0;
    transform: translate3d(0, -34px, 0) scale(.42) rotate(-4deg);
  }
  58% {
    opacity: 1;
    transform: translate3d(0, 4px, 0) scale(1.08) rotate(.8deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@keyframes christmasXmasFloatIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale(.9);
  }
  48% {
    opacity: 1;
    transform: translate3d(0, -8px, 0) scale(1.035);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes christmasDealsGlideIn {
  0% {
    opacity: 0;
    transform: translate3d(calc(-100vw - 100%), 0, 0);
  }
  72% {
    opacity: 1;
    transform: translate3d(12px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* Two fixed columns under the unchanged SILVER and GOLD headings.
   The banner, columns and their artwork move together with the white panel.
   Keep the heading widths/positions from the previous version. */
.christmas-offers {
  position: absolute;
  top: 22.5%;
  bottom: 7%;
  left: 8.5%;
  right: 8%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  pointer-events: none;
}
.christmas-offer-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.christmas-offer-column-silver { width: 50%; }
.christmas-offer-column-gold   { width: 45%; }
.christmas-offers img {
  display: block;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
/* Headings retain their previous visual size and pop timings. */
.christmas-offers .christmas-offer-silver,
.christmas-offers .christmas-offer-gold {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  transform-origin: center center;
}
.christmas-offers .christmas-offer-silver {
  animation: christmasOfferPop .43s cubic-bezier(.2,.88,.28,1) 2.80s both;
}
.christmas-offers .christmas-offer-gold {
  animation: christmasOfferPop .43s cubic-bezier(.2,.88,.28,1) 3.25s both;
}
@keyframes christmasOfferPop {
  0%   { opacity: 0; transform: scale(.2); }
  55%  { opacity: 1; transform: scale(1.14); }
  78%  { opacity: 1; transform: scale(.94); }
  100% { opacity: 1; transform: scale(1); }
}

/* One SVG per step. Evenly divided row slots keep all six/five graphics
   within the white panel on small screens without distorting any vectors. */
.christmas-offer-list {
  display: grid;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: clamp(3px, .55vw, 6px);
  gap: clamp(1.6px, .36vw, 4px);
}
.christmas-silver-items { grid-template-rows: repeat(6, 4.65cqw); }
/* Reserve an empty sixth slot so the five gold lines use the same row pitch as silver. */
.christmas-gold-items   { grid-template-rows: repeat(6, 4.65cqw); }
.christmas-offers {
  container-type: inline-size;
}
.christmas-offer-list {
  justify-items: start;
}
.christmas-gold-items {
  justify-items: end;
}
.christmas-offer-list img {
  width: auto;
  height: min(100%, 4.65cqw); /* enlarged numbered vectors with matching row pitch */
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: left center;
  transform-origin: left center;
}
.christmas-gold-items img {
  object-position: right center;
  transform-origin: right center;
}

/* Silver: six descending 'ladder' arrivals, 0.15 seconds apart.
   Heading GOLD ends at 3.68 seconds. Silver starts at 3.72 seconds.
   Total silver reveal = .42 + (5 * .15) = 1.17 seconds. */
.christmas-silver-items img {
  animation: christmasSilverLadder .42s cubic-bezier(.2,.82,.2,1) both;
}
.christmas-silver-items img:nth-child(1) { animation-delay: 3.72s; }
.christmas-silver-items img:nth-child(2) { animation-delay: 3.87s; }
.christmas-silver-items img:nth-child(3) { animation-delay: 4.02s; }
.christmas-silver-items img:nth-child(4) { animation-delay: 4.17s; }
.christmas-silver-items img:nth-child(5) { animation-delay: 4.32s; }
.christmas-silver-items img:nth-child(6) { animation-delay: 4.47s; }

/* Gold: starts 0.585s after silver (the midpoint of silver's 1.17s
   TOTAL reveal), not halfway through any one silver element. A stronger
   elastic tug and one fewer row give gold a more prominent finish. */
.christmas-gold-items img {
  animation: christmasGoldLadder .52s cubic-bezier(.18,.84,.23,1) both;
}
.christmas-gold-items .christmas-gold-line:nth-child(1) img { animation-delay: 4.305s; }
.christmas-gold-items .christmas-gold-line:nth-child(2) img { animation-delay: 4.455s; }
.christmas-gold-items .christmas-gold-line:nth-child(3) img { animation-delay: 4.605s; }
.christmas-gold-items .christmas-gold-line:nth-child(4) img { animation-delay: 4.755s; }
.christmas-gold-items .christmas-gold-line:nth-child(5) img { animation-delay: 4.905s; }

/* Each new piece falls down, overshoots, tugs back up, and settles. */
@keyframes christmasSilverLadder {
  0%   { opacity: 0; transform: translate3d(0,-25px,0) scale(.95,.77); }
  52%  { opacity: 1; transform: translate3d(0,6px,0) scale(1.005,1.075); }
  73%  { opacity: 1; transform: translate3d(0,-4px,0) scale(1,.965); }
  88%  { opacity: 1; transform: translate3d(0,2px,0) scale(1,1.02); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes christmasGoldLadder {
  0%   { opacity: 0; transform: translate3d(0,-29px,0) scale(.92,.69); }
  52%  { opacity: 1; transform: translate3d(0,9px,0) scale(1.02,1.12); }
  72%  { opacity: 1; transform: translate3d(0,-6px,0) scale(.995,.94); }
  87%  { opacity: 1; transform: translate3d(0,2px,0) scale(1,1.035); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

@keyframes christmasWhiteFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}



/* Bottom disclaimer */
.christmas-disclaimer {
  position: absolute;
  left: 50%;
  bottom: 4.5%;
  transform: translateX(-50%);
  display: block;
  width: min(78%, 560px);
  height: auto;
  max-width: calc(100% - 14%);
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  animation: christmasDisclaimerReveal .75s ease-out 5.50s both;
}

@media (max-width: 767px) {
  .christmas-disclaimer {
    bottom: 4%;
    width: min(82%, 520px);
  }
}

/* Temporary dismissal control, until the Christmas page is completed. */
.christmas-scene-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: rgba(40,30,24,.65);
  color: #fff;
  font: 32px/1 Arial, sans-serif;
  cursor: pointer;
  opacity: 0;
  animation: christmasWhiteFade .45s ease 1.5s both;
}
.christmas-scene-close:hover,
.christmas-scene-close:focus-visible {
  background: rgba(40,30,24,.9);
}

@media (prefers-reduced-motion: reduce) {
  .christmas-scene-backdrop,
  .christmas-white-art,
  .christmas-scene-close,
  .christmas-banner-year img,
  .christmas-banner > img,
  .christmas-offers img { animation: none !important; opacity: 1; transform: none; }
  .christmas-impact-dust { display: none; }
}


/* Metallic gleam clipped to the visible silhouette of gold.svg.
   The disclaimer finishes at 6.25s (5.50s delay + .75s reveal). */
.christmas-gold-shine-wrap {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}
.christmas-gold-shine-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(255,255,255,0.08) 43%,
    rgba(255,250,200,0.8) 49%,
    rgba(255,255,255,0.95) 51%,
    rgba(255,230,142,0.35) 55%,
    transparent 63%
  ) no-repeat;
  background-size: 260% 100%;
  -webkit-mask: url('/images/xmas/text/gold.svg') center / 100% 100% no-repeat;
  mask: url('/images/xmas/text/gold.svg') center / 100% 100% no-repeat;
  animation: christmasGoldMaskedGleam 6s linear 6.25s infinite both;
}
@keyframes christmasGoldMaskedGleam {
  0%, 2.5% { opacity: 0; background-position: 100% 0; }
  4.2% { opacity: 1; }
  13.75% { opacity: 1; background-position: 0% 0; }
  17.5%, 100% { opacity: 0; background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .christmas-gold-shine-wrap::after { animation: none !important; opacity: 0 !important; }
}

/* Five numbered GOLD lines: identical SVG-clipped shine to GOLD DEAL.
   Span acts only as a positioned paint layer; the SVG retains its ladder animation. */
.christmas-gold-items .christmas-gold-line {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  justify-self: end;
}
.christmas-gold-items .christmas-gold-line img {
  display: block;
  width: auto;
  height: min(100%, 4.65cqw);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: right center;
  transform-origin: right center;
}
.christmas-gold-items .christmas-gold-line::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(255,255,255,.08) 43%,
    rgba(255,250,200,.8) 49%,
    rgba(255,255,255,.95) 51%,
    rgba(255,230,142,.35) 55%,
    transparent 63%
  ) no-repeat;
  background-size: 260% 100%;
  -webkit-mask: var(--gold-line-mask) center / 100% 100% no-repeat;
  mask: var(--gold-line-mask) center / 100% 100% no-repeat;
  animation: christmasGoldMaskedGleam 6s linear 6.25s infinite both;
}
@media (prefers-reduced-motion: reduce) {
  .christmas-gold-items .christmas-gold-line::after {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* =========================================================
   MOBILE CHRISTMAS POSTER — single column, naturally scrollable.
   Desktop CSS above remains unchanged. Remove with the Christmas files.
   ========================================================= */
@media (max-width: 600px) {
  .christmas-scene { overflow: hidden; }
  .christmas-white-stage {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 10px 28px;
    align-items: initial;
    justify-content: initial;
    pointer-events: auto;
  }
  .christmas-white-art {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-height: calc(100dvh - 44px);
    padding: 34px clamp(16px, 5vw, 28px) 32px;
    margin: 0 auto;
    background: rgba(252, 252, 250, .97) url('/images/backgrounds/xmas-white.svg') center / cover no-repeat;
    border: 1px solid rgba(80, 58, 42, .55);
    box-shadow: 0 10px 32px rgba(0,0,0,.32);
  }
  .christmas-white-image { display: none; }
  .christmas-banner {
    position: relative;
    top: auto; left: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%; height: auto;
    align-items: center;
    gap: 8px 8px;
    padding: 0 0 18px;
  }
  .christmas-banner-year {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%; height: auto;
    gap: clamp(1px, .55vw, 4px);
  }
  .christmas-banner-year img {
    width: auto;
    height: clamp(52px, 17vw, 80px) !important;
    max-width: 24%;
  }
  .christmas-banner > img {
    width: 100%;
    height: auto !important;
    max-height: 85px;
    object-fit: contain;
  }
  .christmas-offers {
    position: relative;
    inset: auto;
    container-type: normal;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    width: 100%;
    margin: 0;
  }
  .christmas-offer-column {
    width: 100%;
    padding: 18px 15px 20px;
    border: 1px solid rgba(86, 70, 58, .18);
    border-radius: 4px;
  }
  .christmas-offer-column-silver {
    background: rgba(229, 229, 229, .65);
  }
  .christmas-offer-column-gold {
    background: rgba(250, 228, 168, .66);
    border-color: rgba(155, 113, 28, .58);
    box-shadow: 0 4px 20px rgba(136, 97, 14, .13);
  }
  .christmas-offers .christmas-offer-silver,
  .christmas-offers .christmas-offer-gold {
    width: 100%;
    max-height: 75px;
    object-fit: contain;
  }
  .christmas-gold-shine-wrap { width: 100%; }
  .christmas-offer-list,
  .christmas-silver-items,
  .christmas-gold-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(13px, 3.8vw, 21px);
    margin-top: 18px;
  }
  .christmas-gold-items { align-items: flex-end; }
  .christmas-offer-list img,
  .christmas-gold-items .christmas-gold-line img {
    width: auto;
    height: clamp(27px, 8vw, 40px) !important;
    max-width: 100%;
    max-height: none;
  }
  .christmas-gold-items .christmas-gold-line {
    width: fit-content;
    height: auto;
    max-width: 100%;
    align-self: flex-end;
  }
  .christmas-disclaimer {
    position: relative;
    left: auto;
    bottom: auto;
    display: block;
    align-self: center;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 32px 0 0;
    transform: none;
  }
  .christmas-scene-close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: 16px;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .christmas-disclaimer { transform: none !important; clip-path: none !important; opacity: 1 !important; }
}

/* Remove transient touch/focus rectangles on the compass link.
   Keep a visible outline for genuine keyboard navigation. */
.header-social a.christmas-compass {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.header-social a.christmas-compass:focus:not(:focus-visible) {
  outline: none;
}
.header-social a.christmas-compass:focus-visible {
  outline: 2px solid var(--cream, #f7dca6);
  outline-offset: 5px;
  border-radius: 50%;
}