/* Unlisted Christmas Drop preparation. No rules affect existing app pages. */
.christmas-page { --brass: #f7c968; --muted: #d3ded3; --line: #b3c5a84d; background: #092b25; }
.christmas-opening { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 75% 20%, #28654b, transparent 70%), #0d352b; border-bottom: 1px solid var(--line); }
.christmas-opening::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #092b25 5%, #092b25bb 44%, #092b2522 80%); }
.christmas-backdrop { position: absolute; right: 0; bottom: 0; z-index: -2; width: 65%; height: 100%; object-fit: cover; object-position: center 65%; opacity: .85; }
.christmas-page .product-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 60px; padding-block: 64px; }
.christmas-page .product-hero h1 { font-size: 34px; }
.christmas-page .product-hook em { color: #8b3b38; }
.christmas-display { position: relative; isolation: isolate; padding: 36px 0; }
.christmas-page .christmas-display .screen-stage { width: 210px; margin-left: auto; margin-right: 0; }
.christmas-globe { position: absolute; z-index: 1; width: 75%; max-width: 340px; left: -18%; bottom: 10%; filter: drop-shadow(0 18px 22px #021d20aa); pointer-events: none; }
.christmas-page figcaption { color: #d3ded3; }
.christmas-page h2 em { color: var(--brass); }
.christmas-spill-note { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.christmas-spill-note > img { width: 100%; border: 1px solid var(--line); border-radius: 10px; }
.christmas-collection { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.christmas-collection > figure { background: #071f20; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.christmas-collection > figure img { width: 100%; height: auto; }
.christmas-collection > figure figcaption { padding: 0 20px 20px; }
@media (max-width: 1100px) {
  .christmas-page .product-hero { gap: 32px; }
  .christmas-globe { left: -8%; width: 65%; bottom: 8%; }
  .christmas-page .christmas-display .screen-stage { width: 190px; }
  .christmas-collection { gap: 32px; }
}
@media (max-width: 800px) {
  .christmas-page .product-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .christmas-page .christmas-display .screen-stage { width: 160px; }
  .christmas-globe { left: -18%; width: 85%; bottom: 2%; }
  .christmas-collection { grid-template-columns: minmax(0, 1fr); }
  .christmas-collection > figure { max-width: 700px; }
}
@media (max-width: 680px) {
  .christmas-page .product-hero { grid-template-columns: minmax(0, 1fr); padding-block: 28px 36px; gap: 28px; }
  .christmas-page .product-hero h1 { font-size: 30px; }
  .christmas-opening::after { background: linear-gradient(#092b25 18%, #092b25cc 42%, #092b2522 70%); }
  .christmas-backdrop { width: 100%; height: 62%; object-position: center bottom; }
  .christmas-display { width: min(100%, 360px); margin-inline: auto; padding: 16px 12px 0; }
  .christmas-page .christmas-display .screen-stage { width: 190px; }
  .christmas-globe { width: 65%; left: -3%; bottom: 9%; }
  .christmas-spill-note { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .christmas-spill-note > img { max-width: 230px; }
}