/* Christmas theme, November 2026 to New Year's Day. Only applies while christmas.js puts the
   "xmas" class on <html> (it stops on its own at midnight January 1, Jamaica time).
   Keeps the Nowmerce blue and adds gold sparkles, Christmas lights, a Santa hat, poinsettias, red and gold.
   No snow: it doesn't snow in Jamaica (owner's note).
   Works on the website and in the app (the html.in-app rules).
   To remove it completely: delete the christmas.css / christmas.js lines from the pages. */

html.xmas {
  --coral: #d62839;        /* Christmas red replaces coral on buttons, badges and the search button */
  --coral-600: #b81e2e;
  --xm-gold: #f5c451;
  --xm-pine: #0f5132;
  --xm-pine-2: #17734a;
  --xm-red-900: #6e0b17;
}

/* Ribbon: deep red with a gold pill */
html.xmas .ribbon { background: linear-gradient(90deg, var(--xm-red-900), #9b1022 50%, var(--xm-red-900)); color: #ffe9ec; }
html.xmas .ribbon .pill { background: var(--xm-gold); color: #5a0912; }

/* Header: gold sparkles twinkling in place, and a string of twinkling lights along the bottom edge */
html.xmas header.top, html.xmas .top { position: relative; }
html.xmas header#top { position: sticky; }
html.xmas header.top::before, html.xmas .top::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(2px 2px at 24px 30px, #ffe08a 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86px 70px, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 150px 18px, #ffd166 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 205px 92px, #ffe08a 50%, transparent 51%),
    radial-gradient(2px 2px at 262px 52px, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 318px 12px, #ffd166 50%, transparent 51%);
  background-size: 340px 120px;
  filter: drop-shadow(0 0 3px rgba(255,209,102,.9));
  animation: xm-sparkle 2.6s ease-in-out infinite alternate;
}
html.xmas header.top > :not(.mega), html.xmas .top > :not(.mega) { position: relative; z-index: 1; }   /* the Departments drop-down keeps its own positioning */
@keyframes xm-sparkle { from { opacity: .25; } to { opacity: .95; } }

html.xmas header.top::after, html.xmas .top::after,
html.xmas.in-app .app-bar::after, html.xmas.in-app .pdp-bar::after, html.xmas.in-app .drawer header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; z-index: 2; pointer-events: none;
  /* the wire, then bulbs in red, gold, green and blue */
  background:
    radial-gradient(4px 5.5px at 9px 9px, #ff4d5e 60%, transparent 66%),
    radial-gradient(4px 5.5px at 33px 11px, #ffd166 60%, transparent 66%),
    radial-gradient(4px 5.5px at 57px 9px, #3ddc84 60%, transparent 66%),
    radial-gradient(4px 5.5px at 81px 11px, #5cc8ff 60%, transparent 66%),
    radial-gradient(12px 6px at 48px 0, transparent 92%, rgba(20,30,50,.55) 95%, transparent 100%);
  background-size: 96px 16px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 3px rgba(255,220,120,.55));
  animation: xm-twinkle 1.6s steps(2, jump-none) infinite alternate;
}
@keyframes xm-twinkle { from { filter: drop-shadow(0 0 2px rgba(255,220,120,.4)) brightness(.85); } to { filter: drop-shadow(0 0 6px rgba(255,220,120,.9)) brightness(1.15); } }
html.xmas.in-app .app-bar, html.xmas.in-app .drawer header { position: relative; }

/* Santa hat on the N (christmas.js adds .xm-hat to the logo) */
html.xmas .brand { position: relative; }
html.xmas .xm-hat {
  position: absolute; left: 1px; top: -5px; width: 27px; height: 22px; z-index: 3; pointer-events: none;
  transform: rotate(-16deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 44'%3E%3Cpath d='M6 33C10 17 22 4 36 6c7 1 11 7 12 14l-6 1c-1-5-4-8-8-8-8 0-15 9-19 21z' fill='%23d62839'/%3E%3Cpath d='M36 6c7 1 11 7 12 14l-6 1c-1-5-4-8-8-8z' fill='%23a51627'/%3E%3Crect x='2' y='31' width='34' height='10' rx='5' fill='%23fff'/%3E%3Ccircle cx='46' cy='24' r='6' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
@media (max-width: 560px) { html.xmas .xm-hat { width: 24px; height: 20px; top: -4px; } }
/* In the app the logo is cropped to the N, so let the hat stick out of the crop */
html.xmas.in-app header#top .brand { overflow: visible; }
html.xmas.in-app header#top .brand picture { display: block; width: 30px; overflow: hidden; }
html.xmas.in-app .xm-hat { left: -3px; top: -9px; }

/* Hero: gold highlight words */
html.xmas .slide h1 em, html.xmas .slide h2 em { color: var(--xm-gold); }
html.xmas .btn.coral { box-shadow: 0 10px 24px -8px rgba(214,40,57,.6); }

/* Side cards: candy red and pine green instead of coral and sky */
html.xmas .pc-coral { background: linear-gradient(140deg, #fff1f2 0%, #ffc9cf 100%); color: var(--xm-red-900); }
html.xmas .pc-coral .go { color: #b81e2e; }
html.xmas .pc-sky { background: linear-gradient(140deg, #ecfdf3 0%, #bfe9d0 100%); color: var(--xm-pine); }
html.xmas .pc-sky .go { color: var(--xm-pine-2); }

/* "Christmas gift ideas" banner on the home page (christmas.js) */
html.xmas .xm-gifts {
  position: relative; display: flex; align-items: center; gap: 18px; overflow: hidden;
  margin: 28px 0 0; padding: 22px 26px; border-radius: 22px; text-decoration: none; color: #fff;
  background: radial-gradient(circle at 88% 20%, rgba(245,196,81,.35), transparent 40%), linear-gradient(120deg, var(--xm-pine) 0%, var(--xm-pine-2) 60%, #1f8f5c 100%);
  box-shadow: 0 14px 30px -14px rgba(15,81,50,.6);
}
html.xmas .xm-gifts .gift { flex: none; font-size: 46px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
html.xmas .xm-gifts b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
html.xmas .xm-gifts span { display: block; margin-top: 2px; font-size: 14px; color: #d8f3e4; }
html.xmas .xm-gifts .go { flex: none; margin-left: auto; padding: 10px 18px; border-radius: 999px; background: var(--xm-gold); color: #4a3200; font-weight: 800; font-size: 14px; }
html.xmas .xm-gifts::after { content: "★"; position: absolute; right: 150px; top: -14px; font-size: 76px; color: rgba(245,196,81,.16); }
@media (max-width: 560px) {
  html.xmas .xm-gifts { padding: 18px; gap: 14px; }
  html.xmas .xm-gifts .gift { font-size: 38px; }
  html.xmas .xm-gifts b { font-size: 17px; }
  html.xmas .xm-gifts span { font-size: 12.5px; }
  html.xmas .xm-gifts .go { display: none; }
}
html.xmas.in-app .xm-gifts { margin: 0 0 22px; border-radius: 18px; }

/* Footer: a red, gold and green festive stripe along the top */
html.xmas body > footer, html.xmas .foot { position: relative; }
html.xmas body > footer::before, html.xmas .foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #d62839 0 44px, var(--xm-gold) 44px 88px, var(--xm-pine-2) 88px 132px);
}
html.xmas .band { background: linear-gradient(180deg, #0b4fb8, var(--navy)); }

/* The app: red for the selected tab, sparkles and lights on the bars */
html.xmas.in-app .app-tabs a[aria-current="page"] { color: var(--coral); }
html.xmas.in-app .app-tabs a[aria-current="page"]::before { background: var(--coral); }
html.xmas.in-app .app-bar::before, html.xmas.in-app .drawer header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(2px 2px at 30px 14px, #ffe08a 50%, transparent 51%),
                    radial-gradient(1.5px 1.5px at 120px 38px, rgba(255,255,255,.8) 50%, transparent 51%),
                    radial-gradient(2px 2px at 210px 22px, #ffd166 50%, transparent 51%);
  background-size: 260px 56px; filter: drop-shadow(0 0 3px rgba(255,209,102,.9));
  animation: xm-sparkle 2.6s ease-in-out infinite alternate;
}
html.xmas.in-app .app-bar > *, html.xmas.in-app .drawer header > * { position: relative; z-index: 1; }

/* Poinsettias and gold stars drift down the screen on the first page of a visit (christmas.js) */
html.xmas .xm-flurry { position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none; }
html.xmas .xm-flake { position: absolute; top: -50px; animation: xm-fall ease-in forwards; }
html.xmas .xm-flake svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
@keyframes xm-fall {
  0% { transform: translate(0, 0) rotate(0); }
  35% { transform: translate(calc(var(--dx) * -.5), 36vh) rotate(90deg); }
  70% { transform: translate(var(--dx), 72vh) rotate(170deg); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * .3), 110vh) rotate(250deg); opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  html.xmas header.top::before, html.xmas .top::before, html.xmas.in-app .app-bar::before, html.xmas.in-app .drawer header::before { animation: none; }
  html.xmas header.top::after, html.xmas .top::after, html.xmas.in-app .app-bar::after { animation: none; }
}