/*
  Christmas season layer for pedro.market: Gingerbread Peak.

  Palette
    plum     #1b1530  page ground, night sky
    ginger   #8a4a1f  cards
    icing    #fffaf2  outlines, text
    holly    #c42530  primary action
    gold     #ffd36b  highlights, lights
    mint     #5fcfa6  tags

  Type
    Grandstander  display, names and headings only
    Nunito Sans   controls, numbers, body
*/

:root {
  --xm-poster: "Grandstander", "Segoe UI", system-ui, sans-serif;
  --xm-ui: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
}

body[data-theme-season="christmas"] {
  --ground: #1b1530;
  --panel: #8a4a1f;
  --panel-2: #5a2c10;
  --line: rgba(255, 250, 242, 0.32);
  --accent: #c42530;
  --accent-ink: #fff;
  --amber: #ffd36b;
  --foam: #fffaf2;
  --dim: #cfc6e6;
  --display: var(--xm-poster);
  --sans: var(--xm-ui);
  background: var(--ground);
  color: var(--foam);
}

body[data-theme-season="christmas"] [class*="OceanBackground_"] { display: none !important; }
body[data-theme-season="christmas"] h1,
body[data-theme-season="christmas"] h2 { font-family: var(--xm-poster); font-weight: 800; letter-spacing: 0.01em; }

/* Painted under all page content without touching the base theme's stacking. */
.xm-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #1b1530; }

/* String of lights across the top edge. Colors cycle through four steps. */
.xm-lights {
  position: fixed; top: 0; left: 0; right: 0; height: 1.6rem; z-index: 60; pointer-events: none;
  background: linear-gradient(#3a2f52, #3a2f52) 0 0 / 100% 2px no-repeat;
}
.xm-lights i {
  position: absolute; top: 2px; width: 0.55rem; height: 0.8rem; border-radius: 50% 50% 55% 55%;
  background: var(--c); box-shadow: 0 0 10px 2px var(--c);
  animation: xm-glow 2.4s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes xm-glow { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }

@media (prefers-reduced-motion: reduce) {
  .xm-lights i { animation: none; }
}

/* Santa hat worn by the "o" of the wordmark: the fur brim is an arc that follows the
   letter's curve and covers its top. Sized in em so it tracks the wordmark's font size. */
.xm-hat { position: relative; display: inline-block; }
.xm-hat::before {
  /* Tilted like a hat pulled down on one side: the brim is low on the left, the tip flops left. */
  /* Flat holly-and-icing pieces with the cards' solid offset shadow, like the rest of the scene. */
  content: ""; position: absolute; left: -0.16em; top: -0.03em; width: 0.84em; height: 0.7em; pointer-events: none;
  transform: rotate(-4deg); transform-origin: 59% 53%;
  filter: drop-shadow(0 0.035em 0 rgba(7, 4, 15, .55));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M106 56C106 22 80 6 58 10C42 14 30 28 24 46C30 42 36 42 40 46L36 60Q70 34 106 56Z' fill='%23c42530'/%3E%3Cpath d='M58 10C42 14 30 28 24 46C30 42 36 42 40 46C44 32 50 20 58 10Z' fill='%23a01d27'/%3E%3Cpath d='M30 70Q70 44 112 70' fill='none' stroke='%23d9cdbb' stroke-width='16' stroke-linecap='round'/%3E%3Cpath d='M30 66Q70 40 112 66' fill='none' stroke='%23fffaf2' stroke-width='16' stroke-linecap='round'/%3E%3Ccircle cx='22' cy='53' r='9.5' fill='%23d9cdbb'/%3E%3Ccircle cx='22' cy='50' r='9.5' fill='%23fffaf2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Desktop storefront renders 12% larger than the base theme, as in the Halloween theme.
   Zoom scales layout too, so nothing wraps differently. Phones and tablets keep the base
   size: zoomed at 768px, the cart button sat on top of the logo. */
@media (min-width: 64rem) {
  body[data-theme-season="christmas"] > main,
  body[data-theme-season="christmas"] > .CartDropdown_host__mCnlq,
  body[data-theme-season="christmas"] > .account-access { zoom: 1.12; }
  body[data-theme-season="christmas"] #store-view.page_wrap__NBl5k { padding-bottom: 3rem; }
}

/* ---------------------------------------------------------- Gingerbread Peak scene */

/* Every piece is drawn on the same 1440×900 frame and sized by viewport height. */
.xp { position: absolute; bottom: 0; height: 100vh; }
.xp > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.xp-sky, .xp-hills, .xp-ground { left: 0; right: 0; }
/* The store's grid is wider than the demo's (cards span ~14%–86% at 1440px), so the
   peaks keep full height and slide outward to stand in the side margins, as in the demo. */
.xp-peak { left: -22vh; aspect-ratio: 680 / 900; }
.xp-ridge { right: -12vh; aspect-ratio: 560 / 900; }
.xp-lvil { left: 0; aspect-ratio: 520 / 900; }
.xp-rvil { right: 0; aspect-ratio: 540 / 900; }
.xp-moon { right: 0; aspect-ratio: 560 / 900; }

/* Parallax: only transforms change, so planes move without repainting. */
.xp { transform-origin: 50% 100%; transition: transform 2.4s cubic-bezier(.2, .7, .2, 1); will-change: transform; }

/* The cave in the peak; the mob is clipped by the opening. */
.xp-cave {
  position: absolute; left: 38.38%; top: 29.11%; width: 7.06%; height: 4.89%;
  overflow: hidden; background: #0b0816; border-radius: 50% 50% 12% 12% / 55% 55% 12% 12%;
  box-shadow: 0 0 0 3px #1b1530;
}
.xp-mob { position: absolute; left: 18.75%; top: 11%; width: 62.5%; transform: translateY(110%); animation: xp-peek 11s ease-in-out infinite; }
@keyframes xp-peek {
  0%, 52% { transform: translate(0, 110%) }
  60% { transform: translate(0, 0) }
  68% { transform: translate(-8%, 0) }
  78% { transform: translate(8%, 0) }
  86% { transform: translate(0, 0) }
  94%, 100% { transform: translate(0, 110%) }
}

/* Snow: separate flakes (built in christmas.js), each falling and swaying on its own clock. */
.xp-snow { position: absolute; inset: 0; overflow: hidden; }
.xp-snow i { position: absolute; top: -24px; left: var(--x); animation: xp-fall var(--t) linear var(--dl) infinite; will-change: transform; }
.xp-snow b { display: block; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,var(--o)) 0 38%, rgba(255,255,255,0) 72%); animation: xp-sway var(--w) ease-in-out infinite alternate; }
.xp-snow b.nr { background: radial-gradient(circle, rgba(255,255,255,var(--o)) 0 22%, rgba(255,255,255,.25) 48%, rgba(255,255,255,0) 72%); }
@keyframes xp-fall { to { transform: translate3d(var(--dx), calc(100vh + 48px), 0) } }
@keyframes xp-sway { from { transform: translateX(calc(var(--a) * -1)) } to { transform: translateX(var(--a)) } }

/* Santa crosses the moon about every 14s. */
.xp-sleigh { animation: xp-sleigh 14s linear infinite; }
@keyframes xp-sleigh {
  0% { transform: translate(900px, 303px) rotate(-14deg); opacity: 0 }
  4% { opacity: 1 }
  55% { transform: translate(1470px, 161px) rotate(-14deg); opacity: 1 }
  56%, 100% { transform: translate(1470px, 161px) rotate(-14deg); opacity: 0 }
}
.xp-trail circle { animation: xp-twinkle .5s steps(2) infinite; }
.xp-nose { animation: xp-twinkle 1s ease-in-out infinite; }
@keyframes xp-twinkle { 50% { opacity: .2 } }
/* Elves bob as they walk; their paths are generated per walk in christmas.js. */
.xp-bob { animation: xp-bob .32s steps(2) infinite; }
@keyframes xp-bob { 50% { transform: translateY(-1.2px) } }

/* Phones: one flank only, so the cards keep the screen. */
@media (max-width: 40rem) {
  .xp-peak { height: 55vh; }
  .xp-ridge, .xp-rvil, .xp-moon { display: none; }
  .xp-lvil { height: 80vh; left: -2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .xp { transition: none; }
  .xp-mob, .xp-snow i, .xp-snow b, .xp-trail circle, .xp-bob { animation: none; }
  .xp-mob { transform: none; }
  .xp-sleigh, [class^="xp-e"] { display: none; }
}

/* ---------------------------------------------------------- Gingerbread cards */

/* Cards keep their own width and sit together in the middle. The base grid's 1fr
   columns spread two cards to opposite halves of the page with a wide gap between. */
@media (min-width: 40.01rem) {
  body[data-theme-season="christmas"] .Storefront_grid__OG8Wb { grid-template-columns: repeat(auto-fit, 17.5rem); justify-content: center; gap: 1.5rem; }
  /* Wide enough for three cards per row (3 × 17.5rem + 2 gaps), never four. */
  body[data-theme-season="christmas"] .page_wrap__NBl5k { max-width: 60rem; }
}

body[data-theme-season="christmas"] .ProductCard_card__JrE_3 {
  background-color: #8a4a1f; border: 0; border-radius: 28px;
  box-shadow: 0 10px 0 #5a2c10, 0 24px 40px rgba(10, 5, 20, .55);
  /* Own compositor layer: the parallax planes behind move every frame, and without this the
     card was re-rasterised with them, making a dashed outline on its round corners shimmer. */
  will-change: transform;
}
/* Icing stitch, drawn once as a vector inside the card rather than as a CSS outline. */
body[data-theme-season="christmas"] .ProductCard_card__JrE_3::after {
  content: ""; position: absolute; inset: 6px; border-radius: 22px; pointer-events: none;
  border: 2.5px dashed rgba(255, 250, 242, .85);
}
body[data-theme-season="christmas"] .ProductCard_name__6lJpV { font-family: var(--xm-poster); }
body[data-theme-season="christmas"] .ProductCard_cta__SH03T { background: #c42530; color: #fff; border-radius: 999px; box-shadow: inset 0 -4px 0 #a01d27; }

/* Sign-in dialog: the base theme's teal fields and pink button. */
body[data-theme-season="christmas"] .account-glass input { background-color: #1b1530; }
body[data-theme-season="christmas"] .account-primary { background: #c42530; color: #fff; box-shadow: inset 0 -4px 0 #a01d27; }

/* Base-theme ocean tints left on controls. */
body[data-theme-season="christmas"] :is(.CheckoutPlayer_option__0oQUR, .CheckoutPlayer_input__HVb1M, .account-access) { background-color: #2a2148; border-color: rgba(255, 250, 242, .3); }
body[data-theme-season="christmas"] .ProductCard_step__OqX1U { background-color: rgba(40, 18, 6, .25); }
body[data-theme-season="christmas"] .page_pay__sh1ZI:disabled { background-color: rgba(196, 37, 48, .35); }

/* ---------------------------------------------------------- Performance */
/* Live backdrop blur over an animated background is recomputed every frame and
   made the store stutter. A solid fill reads the same at no cost. */
body[data-theme-season="christmas"] *,
body[data-theme-season="christmas"] ::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Panels that relied on the blur are see-through without it: the cart showed the Sign in
   button and the mountains through itself. Opaque fills, set with `background` so the
   base theme's translucent gradients go too. */
body[data-theme-season="christmas"] :is(.CartDropdown_panel__KH4E3, .delivery-rules, .page_panel__AEIs7, #payment-recipient, .account-glass, .TrustBar_stats__nnw1q, .TrustBar_status__zI_Xs) { background: #2a2148; }
body[data-theme-season="christmas"] :is(.delivery-rules, .account-login, .account-logout)::backdrop { background: rgba(15, 10, 30, .82); }
body[data-theme-season="christmas"] :is(.ProductCard_sceneBadge__aCsgO, .CartDropdown_trigger__Gu95b) { background-color: rgba(90, 44, 16, .85); }
body[data-theme-season="christmas"] .StockBadge_badge__vh3f_.theme-instock { color: #4ade80; border-color: rgba(74, 222, 128, .45); }

/* ---------------------------------------------------------- Card lights (owner's pick) */
[class*="ProductCard_sceneBadge__"] { z-index: 7; top: 1.6rem; }
.xm-card-lights { position: absolute; left: 3%; right: 3%; top: 1px; height: 28px; z-index: 8; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%2030'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%203%20Q50%2033%20100%203'%20stroke%3D'%231d3b26'%20stroke-width%3D'1.6'%20fill%3D'none'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3C%2Fsvg%3E") 0 0/100% 100% no-repeat; }
.xm-card-lights i { position: absolute; width: 9px; height: 13px; margin-left: -4.5px; border-radius: 50% 50% 45% 45%; background: var(--b); box-shadow: 0 0 10px 2px var(--b); animation: xm-bulb 1.6s steps(1) infinite; }
.xm-card-lights i::before { content: ""; position: absolute; left: 2px; top: -4px; width: 5px; height: 5px; border-radius: 1px; background: #3b4a3f; }
@keyframes xm-bulb { 50% { opacity: .45; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .xm-card-lights i { animation: none; } }