/* Farmore promotion banners (assets/js/promo.js). Loaded by the home and shop pages, and by the live preview in
   Simple Invoices → Promotions, so the shop sees exactly what customers will see.
   Designs: "launch" (dark green, flip clock), "gift" (free gift spotlight), "glass" (light glass card), "strip" (one line).
   "Create your own" sets --pm-bg / --pm-bg2 / --pm-text / --pm-accent on the banner. */
.promo-zone, .promo-zone *, .promo-zone *::before, .promo-zone *::after { box-sizing: border-box; }
.promo-zone { --pm-font: var(--font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif);
  width: 100%; max-width: calc(var(--wrap, 1120px) + 2 * var(--gutter, clamp(16px, 4vw, 40px))); margin-inline: auto;
  padding: clamp(28px, 4vw, 48px) var(--gutter, clamp(16px, 4vw, 40px)) 0; font-family: var(--pm-font); }
.promo-zone[hidden] { display: none; }
@keyframes offerPulse { 70% { box-shadow: 0 0 0 7px rgba(31, 157, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); } }

/* ----- slider ----- */
.pm-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; padding: 0 0 34px; margin-bottom: -22px; }
.pm-track::-webkit-scrollbar { display: none; }
.pm-slide { scroll-snap-align: start; min-width: 0; display: grid; }
.pm-slide > .pm-card { height: 100%; }
.pm-slide.launch { padding-top: 0; }
.pm-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.pm-dots { display: flex; gap: 8px; }
.pm-dot-btn { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .2); cursor: pointer; transition: width .3s var(--spring, ease), background-color .2s; }
.pm-dot-btn[aria-current="true"] { width: 24px; background: #1d5a3a; }
.pm-dot-btn:focus-visible, .pm-arrow:focus-visible, .pm-cta:focus-visible { outline: 3px solid #4a90e2; outline-offset: 3px; }
.pm-arrow { width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(120, 120, 128, .12); color: inherit; display: grid; place-items: center; }
.pm-arrow::before { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(135deg); margin-left: 3px; }
.pm-next::before { transform: rotate(-45deg); margin: 0 3px 0 0; }
.pm-arrow:hover { background: rgba(120, 120, 128, .2); }
@media (hover: none) { .pm-arrow { display: none; } }

/* ----- the button every design shares ----- */
.pm-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
  font: 600 1rem/1 var(--pm-font); letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap; will-change: transform;
  background: var(--pm-accent, #1d5a3a); color: var(--pm-ctatext, #fff); transition: transform .25s cubic-bezier(.2, .9, .25, 1), box-shadow .25s; }
.pm-cta:hover { transform: translateY(-2px); }
.fx-magnetic .pm-cta:hover { transform: none; }
.pm-cta-wrap { margin-top: 26px; }

/* ===== "launch": the original Farmore launch banner (moved here from style.css) ===== */
.launch { padding-top: clamp(28px, 4vw, 48px); }
.launch[hidden] { display: none; }
.launch-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center;
  padding: clamp(32px, 5vw, 64px); border-radius: 32px; color: #f4f1e8;
  background: radial-gradient(120% 140% at 0% 0%, #1d5a3a 0%, #0f3524 42%, #0a2219 100%);
  box-shadow: 0 30px 80px -30px rgba(10, 34, 25, .55), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.launch-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.launch-aura i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: aura 18s ease-in-out infinite alternate; }
.launch-aura i:nth-child(1) { width: 46%; aspect-ratio: 1; left: -8%; top: -30%; background: #3e9b62; }
.launch-aura i:nth-child(2) { width: 38%; aspect-ratio: 1; right: -6%; bottom: -40%; background: #c9a85c; opacity: .32; animation-duration: 22s; }
.launch-aura i:nth-child(3) { width: 30%; aspect-ratio: 1; right: 28%; top: -35%; background: #2a6f8f; opacity: .3; animation-duration: 26s; }
@keyframes aura { to { transform: translate(8%, 10%) scale(1.15); } }
.launch-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .07) 45%, transparent 60%); background-size: 250% 100%; animation: launchSheen 9s ease-in-out infinite; }
@keyframes launchSheen { 0%, 30% { background-position: 120% 0; } 70%, 100% { background-position: -40% 0; } }
.launch-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #d9c48f; }
.launch-dot { width: 7px; height: 7px; border-radius: 50%; background: #e3c77c; box-shadow: 0 0 0 0 rgba(227, 199, 124, .6); animation: offerPulse 1.8s infinite; }
.launch h2 { color: #fbf8ef; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; margin: 0 0 16px; }
.launch-sub { margin: 0; color: rgba(244, 241, 232, .78); font-size: clamp(1rem, 1.4vw, 1.1875rem); max-width: 38ch; }
.launch-sub b { color: #f0d892; font-weight: 600; }
.launch-clock { justify-self: end; text-align: center; padding: clamp(20px, 3vw, 32px) clamp(18px, 3vw, 34px); border-radius: 26px;
  background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.launch-label { margin: 0 0 14px; font-size: .875rem; font-weight: 500; color: rgba(244, 241, 232, .7); letter-spacing: .01em; }

.ld { display: grid; justify-items: center; gap: 10px; }

.ld b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #fffdf6; }
.ld b.tick { animation: digitIn .5s cubic-bezier(.2, .9, .25, 1); }
@keyframes digitIn { from { transform: translateY(-55%); opacity: 0; filter: blur(3px); } to { transform: none; opacity: 1; filter: none; } }
.ld small { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 232, .55); }

.launch-when { margin: 16px 0 0; font-size: .875rem; color: rgba(244, 241, 232, .62); }
.launch.is-soon .launch-dot { background: #9fd3b0; }
@media (max-width: 860px) {
  .launch-card { grid-template-columns: 1fr; text-align: center; border-radius: 28px; }
  .launch-sub { margin-inline: auto; }
  .launch-clock { justify-self: stretch; }
}
@media (max-width: 420px) { .launch-card { padding: 28px 18px; }  }
@media (prefers-reduced-motion: reduce) { .launch-aura i, .launch-card::after, .launch-dot, .ld b.tick { animation: none; } }
/* ===== v14 · Launch banner: contour abstract + interactive clear-glass timer =====
   Performance: every moving piece is its own GPU layer that only ever changes transform/opacity,
   so scrolling and pointer moves never repaint the artwork. */
.launch-card { --mx: .5; --my: .5; --sp: 0; --lxp: 600px; --lyp: 200px; --lit: .5; --gx: 50%; --gy: 30%; }
.launch-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.ll-par { position: absolute; inset: -6%; will-change: transform; }
.ll-par svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ll-par path { fill: none; stroke: rgba(214, 232, 196, .14); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 110ms); }
.ll1 path { transition-delay: calc(var(--i) * 110ms + 160ms); }
.ll2 path { transition-delay: calc(var(--i) * 110ms + 320ms); }
.launch.is-in .ll-par path { stroke-dashoffset: 0; }
/* three depths: further lines move less with the pointer and with scroll */
.ll0 { transform: translate3d(calc((var(--mx) - .5) * -12px), calc(var(--sp) * 14px), 0); }
.ll1 { transform: translate3d(calc((var(--mx) - .5) * -26px), calc(var(--sp) * 30px), 0); }
.ll2 { transform: translate3d(calc((var(--mx) - .5) * -42px), calc(var(--sp) * 48px), 0); }
/* the same lines in gold, seen only through a soft moving "window": sunlight across terraces.
   The window moves one way and its contents the other, so the gold lines stay aligned. */
.ll-lit-wrap { position: absolute; left: 0; top: 0; width: 460px; height: 460px; opacity: var(--lit); will-change: transform, opacity;
  transform: translate3d(calc(var(--lxp) - 230px), calc(var(--lyp) - 230px), 0);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .32) 48%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .32) 48%, transparent 100%); }
.ll-lit-inner { position: absolute; left: 0; top: 0; width: var(--cw, 1120px); height: var(--ch, 384px); will-change: transform;
  transform: translate3d(calc(230px - var(--lxp)), calc(230px - var(--lyp)), 0); }
.ll-lit-inner path { stroke: rgba(243, 214, 140, .6); stroke-width: 1.35; }
.launch-light { position: absolute; left: 0; top: 0; width: 1040px; height: 1040px; border-radius: 50%; opacity: var(--lit); will-change: transform, opacity;
  transform: translate3d(calc(var(--lxp) - 520px), calc(var(--lyp) - 520px), 0);
  background: radial-gradient(closest-side, rgba(255, 236, 190, .11), rgba(255, 236, 190, 0)); }

/* timer: clear glass, low opacity and low blur, tilting toward the pointer */
.launch-clock { position: relative; overflow: hidden; background: rgba(255, 255, 255, .035);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -30px rgba(0, 0, 0, .55);
  transform: perspective(1000px) rotateX(calc((.5 - var(--my)) * 8deg)) rotateY(calc((var(--mx) - .5) * 11deg)) translate3d(0, calc(var(--sp) * -20px), 0);
  will-change: transform; }
.launch-clock::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: calc(.35 + var(--lit) * .65);
  background: radial-gradient(240px circle at var(--gx) var(--gy), rgba(255, 255, 255, .16), transparent 60%); }
.launch-clock::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(243, 214, 140, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.launch-clock > * { position: relative; }

.launch-copy { transform: translate3d(0, calc(var(--sp) * 10px), 0); will-change: transform; }
/* legibility: small labels raised from 55% to 72% (about 5.6:1 on #0f3524) */
.ld small { color: rgba(244, 241, 232, .72); }
.launch-when { color: rgba(244, 241, 232, .74); }
/* the slow sheen and the colour clouds move by transform only (no repainting) */
.launch-card::after { background-size: 100% 100%; width: 250%; inset: 0 auto 0 0; transform: translate3d(48%, 0, 0); animation: launchSheen2 9s ease-in-out infinite; will-change: transform; }
@keyframes launchSheen2 { 0%, 30% { transform: translate3d(48%, 0, 0); } 70%, 100% { transform: translate3d(-100%, 0, 0); } }
.launch-aura i { will-change: transform; }
.launch:not(.is-vis) .launch-aura i, .launch:not(.is-vis) .launch-card::after { animation-play-state: paused; }
@media (hover: none) { .launch-clock::before { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .ll-par path { stroke-dashoffset: 0; transition: none; }
  .ll0, .ll1, .ll2, .launch-clock, .launch-copy { transform: none; }
  .ll-lit-wrap, .launch-light { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .launch-clock { background: #163f2c; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .launch-label, .ld small, .launch-when, .launch-sub { color: #fff; }
  .launch-clock { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
}
/* colour clouds as soft gradients instead of blurred blobs: same look, no per-frame blur */
.launch-aura i { filter: none; background: none !important; opacity: 1; }
.launch-aura i:nth-child(1) { width: 70%; left: -20%; top: -55%; background: radial-gradient(closest-side, rgba(62, 155, 98, .5), rgba(62, 155, 98, 0)) !important; }
.launch-aura i:nth-child(2) { width: 60%; right: -18%; bottom: -70%; background: radial-gradient(closest-side, rgba(201, 168, 92, .26), rgba(201, 168, 92, 0)) !important; }
.launch-aura i:nth-child(3) { width: 48%; right: 20%; top: -60%; background: radial-gradient(closest-side, rgba(42, 111, 143, .26), rgba(42, 111, 143, 0)) !important; }
/* ===== v14 · Launch flip clock (shop + home), gold "final hours", spark bursts ===== */
.launch-home { padding: clamp(28px, 4vw, 56px) 0 0; }
.launch-cta { margin-top: 26px; min-height: 50px; background: linear-gradient(180deg, #f3dc9a, #d9b45e); color: #1d2a1f; font-weight: 600;
  box-shadow: 0 12px 30px -12px rgba(227, 199, 124, .7), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .25s cubic-bezier(.2, .9, .25, 1), box-shadow .25s; }
.launch-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(227, 199, 124, .85), inset 0 1px 0 rgba(255, 255, 255, .6); }
.launch-label { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.launch-urgent { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #2a1d05; background: linear-gradient(180deg, #ffe29a, #f0b84c); box-shadow: 0 0 0 0 rgba(240, 184, 76, .6); animation: offerPulse 1.6s infinite; }
.launch-urgent[hidden] { display: none; }

.flipclock { display: flex; align-items: flex-start; justify-content: center; gap: clamp(5px, 1vw, 12px); }
.fu { display: grid; justify-items: center; gap: 10px; }
.fu small { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 232, .72); }
.fpair { display: flex; gap: 4px; }
.fsep { display: grid; gap: calc(var(--fh) * .2); padding-top: calc(var(--fh) * .3); }
.fsep i { width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 241, 232, .45); animation: sepBlink 1s steps(1) infinite; }
@keyframes sepBlink { 50% { opacity: .25; } }
.launch.no-days [data-fu="d"], .launch.no-days [data-fsep="d"] { display: none; }
.launch-clock { --fh: clamp(2.7rem, 5.4vw, 4.6rem); }
.fd { position: relative; display: block; width: calc(var(--fh) * .68); height: var(--fh); perspective: calc(var(--fh) * 5);
  font-size: calc(var(--fh) * .7); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #fffdf6; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.fd > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: linear-gradient(180deg, #2b6446 0%, #1f5038 100%); }
.fd-top, .fd-ft { top: 0; border-radius: 12px 12px 2px 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.fd-bot, .fd-fb { bottom: 0; border-radius: 2px 2px 12px 12px; background: linear-gradient(180deg, #1c4a33 0%, #143a28 100%) !important; box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .6); }
.fd i { position: absolute; left: 0; right: 0; height: var(--fh); line-height: var(--fh); text-align: center; font-style: normal; }
.fd-top i, .fd-ft i { top: 0; }
.fd-bot i, .fd-fb i { bottom: 0; }
.fd::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; z-index: 3; background: rgba(4, 22, 14, .65); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.fd-ft { z-index: 2; transform-origin: 50% 100%; }
.fd-fb { z-index: 2; transform-origin: 50% 0; transform: rotateX(90deg); }
.fd-ft::after, .fd-fb::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.fd-ft::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .45)); }
.fd-fb::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .45)); }
.fd.go .fd-ft { animation: flipTop .32s cubic-bezier(.55, .06, .7, .4) forwards; }
.fd.go .fd-ft::after { animation: flipShade .32s ease-in forwards; }
.fd.go .fd-fb { animation: flipBot .3s .3s cubic-bezier(.2, .7, .3, 1.25) forwards; }
.fd.go .fd-fb::after { opacity: 1; animation: flipShade .3s .3s ease-out reverse forwards; }
@keyframes flipTop { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes flipBot { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
@keyframes flipShade { from { opacity: 0; } to { opacity: 1; } }
.fu-s .fd > span { background: linear-gradient(180deg, #33704f 0%, #245a3f 100%); }

.launch-meter { position: relative; height: 6px; margin: 22px auto 0; max-width: 340px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.lm-fill { position: absolute; inset: 0; transform-origin: 0 50%; border-radius: inherit; transition: transform 1s linear;
  background: linear-gradient(90deg, #6cc48f, #e3c77c 70%, #fff3c4); background-size: 200% 100%; animation: meterFlow 3.2s linear infinite; }
.lm-fill::after { content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 14px; margin: -7px -7px 0 0; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, rgba(255, 243, 196, .0) 70%); filter: blur(.3px); }
@keyframes meterFlow { from { background-position: 0 0; } to { background-position: -200% 0; } }

.launch.is-urgent .fd > span { background: linear-gradient(180deg, #7a5a1c 0%, #5e4413 100%); }
.launch.is-urgent .fd-bot, .launch.is-urgent .fd-fb { background: linear-gradient(180deg, #57400f 0%, #45320b 100%) !important; }
.launch.is-urgent .fd { color: #fff6da; text-shadow: 0 0 18px rgba(255, 214, 120, .55); }
.launch.is-urgent .lm-fill { background: linear-gradient(90deg, #f0b84c, #ffe29a, #f0b84c); background-size: 200% 100%; }
.launch.is-last .flipclock { animation: lastBeat 1s ease-in-out infinite; }
@keyframes lastBeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.025); } 24% { transform: scale(1); } }

.launch-burst { position: absolute; z-index: 5; width: 0; height: 0; pointer-events: none; }
.launch-burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff9e0 0 35%, #f0cd78 60%, rgba(240, 205, 120, 0) 72%);
  animation: spark 1.25s cubic-bezier(.15, .8, .3, 1) forwards; }
.launch-burst i:nth-child(3n) { background: radial-gradient(circle, #eafff1 0 35%, #7fd3a0 60%, rgba(127, 211, 160, 0) 72%); }
@keyframes spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.2); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
}
.launch-clock { cursor: default; }

@media (max-width: 560px) { .launch-clock { --fh: clamp(2.1rem, 10.5vw, 3rem); padding-inline: 12px; } .fpair { gap: 3px; } .fsep i { width: 5px; height: 5px; } .fu small { letter-spacing: .08em; font-size: .625rem; } }
@media (max-width: 360px) { .launch-clock { --fh: 1.9rem; } }
@media (prefers-reduced-motion: reduce) {
  .fd.go .fd-ft, .fd.go .fd-fb, .fd.go .fd-ft::after, .fd.go .fd-fb::after, .fsep i, .lm-fill, .launch-urgent, .launch.is-last .flipclock { animation: none; }
  .fd-fb { transform: none; display: none; } .fd-ft { display: none; }
  .launch-burst { display: none; }
}
@media (forced-colors: active) { .fd > span { background: Canvas !important; border: 1px solid CanvasText; } .fd { color: CanvasText; } }
@media (min-width: 861px) { .launch-card { grid-template-columns: minmax(0, 1fr) auto; } .launch-copy { min-width: 0; } }


.launch .pm-cta-wrap { margin-top: 0; }
.launch .pm-text:empty { display: none; }

/* ===== "gift": free gift spotlight ===== */
.pm-gift .pm-card, .pm-glass .pm-card, .pm-strip .pm-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; color: var(--pm-text, #1d2a1f); }
.pm-gift .pm-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "copy pic" "clock pic"; column-gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(32px, 5vw, 60px); background: radial-gradient(120% 140% at 0% 0%, var(--pm-bg, #fff8e8) 0%, var(--pm-bg2, #f3e3bf) 100%);
  box-shadow: 0 30px 70px -34px rgba(90, 60, 10, .45), inset 0 0 0 1px rgba(255, 255, 255, .5); }
.pm-gift .pm-copy { grid-area: copy; }
.pm-gift .pm-pic { grid-area: pic; }
.pm-gift .pm-clock { grid-area: clock; align-self: start; margin-top: 22px; }
.pm-slide:not(.launch) .pm-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pm-accent, #8a5a00); }
.pm-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(227, 199, 124, .6); animation: offerPulse 1.8s infinite; }
.pm-slide:not(.launch) .pm-title { margin: 0 0 14px; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 650; color: inherit; overflow-wrap: anywhere; }
.pm-slide:not(.launch) .pm-text { margin: 0; font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.45; opacity: .86; max-width: 42ch; }
.pm-slide:not(.launch) .pm-text b { font-weight: 650; opacity: 1; color: var(--pm-accent, inherit); }
.pm-worth { display: inline-block; margin: 14px 0 0; padding: 6px 12px; border-radius: 999px; font-size: .875rem; font-weight: 650;
  background: color-mix(in srgb, var(--pm-accent, #2a5a3a) 12%, transparent); color: var(--pm-accent, #2a5a3a); }
.launch .pm-worth { background: rgba(227, 199, 124, .16); color: #f0d892; }
.pm-gift .pm-cta { --pm-ctatext: #fffdf6; background: var(--pm-accent, #2a5a3a); box-shadow: 0 14px 30px -14px rgba(42, 90, 58, .7); }
.pm-pic { position: relative; justify-self: center; width: min(100%, 340px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); display: grid; place-items: center; }
.pm-pic img { width: 82%; height: 82%; object-fit: cover; border-radius: 50%; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .45); transform: rotate(-4deg); }
.pm-free { position: absolute; top: 8%; right: 4%; padding: 10px 16px; border-radius: 999px; font: 800 1rem/1 var(--pm-font); letter-spacing: .12em;
  color: #fff; background: linear-gradient(180deg, #e2564a, #b8322a); box-shadow: 0 12px 24px -10px rgba(184, 50, 42, .8); transform: rotate(8deg); }

/* ===== "glass": a light glass card ===== */
.pm-glass .pm-card { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; grid-template-areas: "copy clock" "copy pic"; gap: 16px clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(32px, 5vw, 60px); background: linear-gradient(135deg, var(--pm-bg, #eef4ff) 0%, var(--pm-bg2, #dfeaf8) 100%);
  box-shadow: 0 30px 70px -36px rgba(0, 48, 107, .4), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .6); color: var(--pm-text, #0c2340); }
.pm-glass .pm-copy { grid-area: copy; }
.pm-glass .pm-clock { grid-area: clock; justify-self: center; }
.pm-glass .pm-pic { grid-area: pic; width: min(100%, 220px); }
.pm-glass .pm-kicker { color: var(--pm-accent, #0050b4); }
.pm-glass .pm-cta { background: var(--pm-accent, #0050b4); box-shadow: 0 14px 30px -14px rgba(0, 80, 180, .7); }
.pm-bgfx { position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 15% 10%, rgba(255, 255, 255, .7), transparent 70%), radial-gradient(35% 45% at 90% 100%, color-mix(in srgb, var(--pm-accent, #0050b4) 22%, transparent), transparent 70%); }

/* ===== "strip": one line ===== */
.pm-strip .pm-card { padding: 16px clamp(18px, 3vw, 28px); background: linear-gradient(90deg, var(--pm-bg, #0f3524), var(--pm-bg2, #1d5a3a)); color: var(--pm-text, #fbf8ef); border-radius: 22px; }
.pm-strip .pm-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.pm-strip .pm-kicker { margin: 0; color: var(--pm-accent, #e3c77c); }
.pm-strip .pm-title { margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.3rem); letter-spacing: -.015em; }
.pm-strip .pm-text { font-size: .9375rem; flex: 1 1 260px; }
.pm-strip .pm-cta-wrap { margin: 0 0 0 auto; }
.pm-strip .pm-cta { min-height: 40px; padding: 0 18px; background: var(--pm-accent, #e3c77c); --pm-ctatext: #1d2a1f; }
.pm-strip .pm-clock { display: flex; align-items: center; gap: 8px; }
.pm-strip .pm-label, .pm-strip .pm-when { margin: 0; }
.pm-strip .pm-when { display: none; }

/* ----- timers in the new designs ----- */
.pm-clock .pm-label { margin: 0 0 10px; font-size: .875rem; font-weight: 600; opacity: .8; }
.pm-inline-t { margin: 0; font: 650 clamp(1.4rem, 2.6vw, 2rem)/1.1 var(--pm-font); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pm-strip .pm-inline-t { font-size: 1.05rem; }
.pm-when { margin: 8px 0 0; font-size: .8125rem; opacity: .74; }
.pm-ring { position: relative; width: 132px; height: 132px; }
.pm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pm-ring circle { fill: none; stroke-width: 8; }
.pm-ring-bg { stroke: color-mix(in srgb, var(--pm-text, #0c2340) 12%, transparent); }
.pm-ring-arc { stroke: var(--pm-accent, #0050b4); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.pm-ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pm-ring-big { font: 700 1.6rem/1 var(--pm-font); font-variant-numeric: tabular-nums; }
.pm-ring-small { margin-top: 4px; font-size: .75rem; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }
.pm-slide.is-urgent .pm-inline-t, .pm-slide.is-urgent .pm-ring-big { color: #b8322a; }
.launch.is-urgent .pm-ring-big, .launch.is-urgent .pm-inline-t { color: #fff6da; }

/* "Create your own" on the launch design: the shop's colours */
.launch.pm-custom .launch-card { background: radial-gradient(120% 140% at 0% 0%, var(--pm-bg2, #1d5a3a) 0%, var(--pm-bg, #0f3524) 60%); color: var(--pm-text, #f4f1e8); }
.launch.pm-custom h2, .launch.pm-custom .launch-sub, .launch.pm-custom .launch-label, .launch.pm-custom .launch-when { color: var(--pm-text); }
.launch.pm-custom .launch-kicker, .launch.pm-custom .launch-sub b { color: var(--pm-accent); }
.launch.pm-custom .launch-cta { background: var(--pm-accent); }
.launch .pm-clock-inline, .launch .pm-clock-ring { justify-self: end; }
.launch .pm-inline-t, .launch .pm-ring-big { color: #fffdf6; }
.launch .pm-ring-bg { stroke: rgba(255, 255, 255, .14); }
.launch .pm-ring-arc { stroke: #e3c77c; }
.launch .pm-ring { margin: 0 auto; }

/* ----- mouse effects (promo.js sets --mx --my --gx --gy only while the pointer is over the banner) ----- */
.pm-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: calc(var(--lit, .5) * .9);
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 40%), rgba(255, 255, 255, .22), transparent 60%); mix-blend-mode: soft-light; }
.pm-card > *:not(.pm-glow):not(.launch-aura):not(.launch-fx):not(.pm-bgfx):not(.launch-burst):not(.pd-l):not(.pm-spot):not(.pm-spark):not(.pm-lights):not(.pm-fire):not(.pm-veil):not(.pm-charge):not(.dw-sky) { position: relative; z-index: 1; }
.fx-tilt .pm-card { transform: perspective(1200px) rotateX(calc((.5 - var(--my, .5)) * 5deg)) rotateY(calc((var(--mx, .5) - .5) * 7deg)); will-change: transform; transition: box-shadow .3s; }
.fx-shine .pm-card::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translate3d(-120%, 0, 0); }
.fx-shine .pm-card.shine-go::before { animation: pmShine 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes pmShine { to { transform: translate3d(120%, 0, 0); } }

@media (max-width: 860px) {
  .pm-gift .pm-card { grid-template-columns: 1fr; grid-template-areas: "pic" "copy" "clock"; text-align: center; }
  .pm-gift .pm-pic { width: min(70%, 260px); }
  .pm-glass .pm-card { grid-template-columns: 1fr; grid-template-areas: "copy" "clock" "pic"; text-align: center; }
  .pm-slide:not(.launch) .pm-text { margin-inline: auto; }
  .pm-gift .pm-clock, .pm-glass .pm-clock { justify-self: center; text-align: center; }
  .pm-ring { margin-inline: auto; }
  .pm-strip .pm-copy { justify-content: center; text-align: center; }
  .pm-strip .pm-cta-wrap { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-dot, .fx-shine .pm-card::before { animation: none; }
  .fx-tilt .pm-card { transform: none; }
  .pm-track { scroll-behavior: auto; }
  .pm-cta { transition: none; }
}
@media (prefers-reduced-transparency: reduce) { .pm-glow, .pm-bgfx { display: none; } }
@media (prefers-contrast: more) { .pm-text, .pm-when, .pm-clock .pm-label { opacity: 1; } }
@media (forced-colors: active) { .pm-card { border: 1px solid CanvasText; } .pm-cta { border: 1px solid ButtonText; } }
.promo-band[hidden] { display: none; }
.pm-cta-wrap[hidden] { display: none !important; }

/* ===== "design": banners made in the app's design editor =====
   Each layer's place is in artboard units (desktop 1200 wide, phone 390 wide) set as custom properties by promo.js.
   The wrapper is a size container, so the banner scales to exactly the width it has, never wider; at 600 px or less
   the phone artboard is used. Text sizes scale with the banner (cqw), so nothing reflows or spills out. */
.pd-wrap { container-type: inline-size; width: 100%; min-width: 0; }
.pd { position: relative; isolation: isolate; overflow: hidden; width: 100%; aspect-ratio: 1200 / var(--dh, 360); border-radius: calc(var(--rad, 28) / 1200 * 100cqw);
  font-family: var(--pm-font); box-shadow: 0 22px 34px -26px rgba(0, 0, 0, .5); }
.pd-l { position: absolute; z-index: 1; box-sizing: border-box; display: flex; margin: 0; overflow: hidden; min-width: 0;
  left: calc(var(--x) / 1200 * 100%); top: calc(var(--y) / var(--dh, 360) * 100%); width: calc(var(--w) / 1200 * 100%); height: calc(var(--h) / var(--dh, 360) * 100%);
  font-size: calc(var(--fs) / 1200 * 100cqw); border-radius: calc(var(--r, 0) / 1200 * 100cqw); overflow-wrap: anywhere; }
.pd-l > span { display: block; width: 100%; }
.pd-image img { width: 100%; height: 100%; display: block; }
a.pd-button { text-decoration: none; cursor: pointer; transition: transform .2s, filter .2s; }
a.pd-button:hover { filter: brightness(1.08); }
a.pd-button:active { transform: scale(.97); }
a.pd-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pd-timer { gap: .4em; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pd-timer > span { width: auto; }
.pd-tl { opacity: .85; font-weight: 500; }
.pd-boxes { display: inline-flex !important; gap: .3em; }
.pd-box { display: inline-grid; justify-items: center; min-width: 2.1em; padding: .25em .3em; border-radius: .35em; background: rgba(255, 255, 255, .14); line-height: 1; }
.pd-box small { font-size: .42em; opacity: .75; text-transform: uppercase; letter-spacing: .08em; margin-top: .25em; }
.pd-l.hide-d { display: none; }
@container (max-width: 600px) {
  .pd { aspect-ratio: 390 / var(--mh, 440); border-radius: calc(var(--rad, 28) / 390 * 100cqw); }
  /* phone places: --px --py --pw --ph --pfs (not --mx/--my: those are the mouse position used by the effects) */
  .pd-l { left: calc(var(--px) / 390 * 100%); top: calc(var(--py) / var(--mh, 440) * 100%); width: calc(var(--pw) / 390 * 100%); height: calc(var(--ph) / var(--mh, 440) * 100%);
    font-size: calc(var(--pfs) / 390 * 100cqw); border-radius: calc(var(--r, 0) / 390 * 100cqw); }
  .pd-l.hide-d { display: flex; }
  .pd-l.hide-m { display: none; }
}
@media (prefers-reduced-motion: reduce) { a.pd-button { transition: none; } }
@media (forced-colors: active) { .pd { border: 1px solid CanvasText; } }

/* ----- more mouse effects ----- */
/* parallax: layers move at their own depth (--dep) with the mouse (or, on phones, with how the phone is held) */
.fx-parallax .pd-l, .fx-parallax .pm-card > [style*="--dep"], .pfx-parallax .pd-l, .pfx-parallax .pm-card > [style*="--dep"] {
  translate: calc((var(--mx, .5) - .5) * var(--dep, 1) * -12px) calc((var(--my, .5) - .5) * var(--dep, 1) * -9px); will-change: translate; }
/* spotlight: the banner dims around a circle of light that follows the mouse */
.pm-spot { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; opacity: calc((var(--lit, .5) - .5) * 2); transition: opacity .35s;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), transparent 0, transparent 35%, rgba(0, 0, 0, .5) 75%); }
/* lift: the card rises towards the mouse */
@media (hover: hover) and (pointer: fine) {
  .fx-lift .pm-card { transition: transform .45s cubic-bezier(.2, .9, .25, 1.1), box-shadow .45s; }
  .fx-lift .pm-card:hover { transform: translateY(-8px) scale(1.012); box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .5); }
}

/* ----- phone effects (only on phones, or the app's phone preview) ----- */
.pfx-tilt .pm-card { transform: perspective(900px) rotateX(calc((.5 - var(--my, .5)) * 12deg)) rotateY(calc((var(--mx, .5) - .5) * 16deg)); will-change: transform; }
.pfx-tilt .pm-glow { mix-blend-mode: soft-light; opacity: .9; background: radial-gradient(70% 90% at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .35), transparent 60%); }
.pfx-float .pd-l, .pfx-float .pm-card > [style*="--dep"] { animation: pmFloat 6s ease-in-out infinite; animation-delay: calc(var(--dep, 1) * -1.3s); }
@keyframes pmFloat { 50% { transform: translateY(calc(var(--dep, 1) * -3px)); } }
@media (prefers-reduced-motion: reduce) {
  .fx-parallax .pd-l, .pfx-parallax .pd-l, .fx-parallax .pm-card > *, .pfx-parallax .pm-card > * { translate: none !important; }
  .pfx-tilt .pm-card, .fx-lift .pm-card:hover { transform: none !important; }
  .pfx-float .pd-l, .pfx-float .pm-card > * { animation: none !important; }
  .pm-spot { display: none; }
}

/* ===== Diwali: sparkles (mouse) and festival lights (phones) ===== */
.pm-glow.warm { mix-blend-mode: screen; opacity: calc((var(--lit, .5) - .4) * 1.4);
  background: radial-gradient(180px circle at var(--gx, 50%) var(--gy, 40%), rgba(255, 196, 92, .42), rgba(255, 122, 24, .14) 45%, transparent 70%); }
.pm-spark { position: absolute; z-index: 6; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none;
  background: #ffd36b; box-shadow: 0 0 6px 2px rgba(255, 190, 70, .85), 0 0 14px 4px rgba(255, 140, 30, .45);
  transform: scale(var(--s, 1)); animation: pmSpark 800ms cubic-bezier(.15, .7, .3, 1) forwards; }
.pm-spark.orange { background: #ff9a3c; box-shadow: 0 0 6px 2px rgba(255, 120, 30, .8), 0 0 12px 3px rgba(255, 80, 20, .4); }
.pm-spark.white { background: #fff8e6; box-shadow: 0 0 5px 2px rgba(255, 245, 210, .9); width: 4px; height: 4px; }
.pm-spark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.5px; height: 16px; margin: -8px 0 0 -.75px; background: linear-gradient(transparent, rgba(255, 230, 160, .9), transparent); transform: rotate(45deg); }
@keyframes pmSpark {
  0% { opacity: 1; transform: translate(0, 0) scale(var(--s, 1)); }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 30px)) scale(.2); }
}
.pm-lights { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit;
  translate: calc((var(--mx, .5) - .5) * -18px) calc((var(--my, .5) - .5) * -12px); }
.pm-lantern { position: absolute; left: var(--x); top: 112%; width: 9px; height: 11px; border-radius: 45% 45% 40% 40%;
  background: radial-gradient(circle at 50% 60%, #fff2c4 0, #ffc04a 45%, #ff7a18 100%);
  box-shadow: 0 0 10px 3px rgba(255, 170, 60, .55), 0 0 24px 8px rgba(255, 110, 20, .22);
  translate: calc((var(--mx, .5) - .5) * var(--dep, 1) * -10px) 0;
  animation: pmRise var(--d, 10s) linear infinite, pmTwinkle 1.8s ease-in-out infinite alternate; }
.pm-lantern.big { width: 14px; height: 17px; }
/* rises from below the banner to above it (top in %, so it fits any banner height), swaying a little */
@keyframes pmRise {
  0% { top: 112%; transform: translateX(0); opacity: 0; }
  10% { opacity: .95; }
  50% { transform: translateX(calc(var(--w, 0) * 18px)); }
  85% { opacity: .8; }
  100% { top: -14%; transform: translateX(calc(var(--w, 0) * -10px)); opacity: 0; }
}
@keyframes pmTwinkle { from { filter: brightness(.85); } to { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .pm-spark, .pm-lights { display: none; } }

/* ----- fire canvas (sparkler, crackers) ----- */
.pm-fire { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; }
/* ----- Firecracker reveal ----- */
.pm-veil { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, rgba(18, 2, 31, .35), rgba(10, 2, 18, .72));
  -webkit-backdrop-filter: blur(3px) saturate(.7); backdrop-filter: blur(3px) saturate(.7); transition: opacity .8s ease, backdrop-filter .8s ease; }
.pm-veil.gone { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
.pm-veil-hint { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 .9375rem/1 var(--pm-font); color: #2a0612; background: linear-gradient(100deg, #ffe7a8, #ffb347); letter-spacing: .01em;
  box-shadow: 0 0 0 1px rgba(255, 220, 150, .6), 0 0 24px rgba(255, 170, 60, .55), 0 10px 24px -10px rgba(0, 0, 0, .6); animation: pmHint 2.2s ease-in-out infinite; }
.pm-veil-hint:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pm-veil-ico { display: inline-block; animation: pmSpin 3s linear infinite; }
@keyframes pmHint { 50% { box-shadow: 0 0 0 1px rgba(255, 220, 150, .8), 0 0 40px rgba(255, 170, 60, .8), 0 10px 24px -10px rgba(0, 0, 0, .6); } }
@keyframes pmSpin { to { transform: rotate(360deg); } }
.is-veiled .pm-card { touch-action: pan-y; } /* a sideways swipe on a phone lights the crackers instead of scrolling */
.pm-charge { position: absolute; z-index: 8; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#fff6d6, #ffd36b, #ff9a3c var(--a, 0deg), rgba(255, 255, 255, .28) 0); animation: pmCharge 520ms linear forwards;
  -webkit-mask: radial-gradient(circle, transparent 25px, #000 26px); mask: radial-gradient(circle, transparent 25px, #000 26px);
  filter: drop-shadow(0 0 10px rgba(255, 190, 70, 1)); }
.has-reveal .pm-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pmCharge { to { --a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .pm-fire, .pm-veil, .pm-charge { display: none; } }

/* ===== "diwali": the festival of lights, drawn entirely in CSS =====
   Plum night sky, marigold and diya glows, twinkling lights, the gift's photo in a gold-ringed halo (a carousel when the
   gift has several photos), gold-to-orange button. Words, timer and photo come from the offer like the other designs. */
.pm-slide.pm-diwali .pm-bgfx { display: none; }
.pm-slide.pm-diwali .pm-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; color: #fff4e0;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "copy pic" "clock cta"; column-gap: clamp(20px, 4vw, 56px); row-gap: 18px; align-items: center;
  padding: clamp(28px, 4.5vw, 56px) clamp(24px, 5vw, 64px);
  background: radial-gradient(120% 140% at 75% 15%, #5a1240 0%, #3a0a2c 38%, #12021f 100%);
  box-shadow: 0 30px 70px -30px rgba(40, 4, 30, .7), inset 0 0 0 1px rgba(255, 207, 107, .14); }
.pm-slide.pm-diwali .pm-copy { grid-area: copy; min-width: 0; }
.pm-slide.pm-diwali .pm-pic { grid-area: pic; }
.pm-slide.pm-diwali .pm-clock { grid-area: clock; align-self: end; }
.pm-slide.pm-diwali .pm-cta-wrap { grid-area: cta; justify-self: center; align-self: end; margin: 0; }
/* the sky: two diya glows and twinkling lights */
.dw-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden;
  background: radial-gradient(42% 70% at 82% 8%, rgba(255, 179, 71, .5), rgba(255, 122, 24, .14) 45%, transparent 70%),
              radial-gradient(30% 50% at 0% 100%, rgba(255, 122, 24, .32), transparent 70%); }
.dw-sky i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 10px 3px rgba(255, 190, 70, .6);
  pointer-events: auto; cursor: pointer; animation: dwTwinkle 2.6s ease-in-out infinite alternate, dwSway 7s ease-in-out infinite; animation-delay: inherit;
  transition: opacity .5s ease, scale .5s ease, left 0s, top 0s; }
.dw-sky i::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; } /* a bigger target to click */
@keyframes dwTwinkle { from { filter: brightness(.7); } to { filter: brightness(1.3); } }
@keyframes dwSway { 0%, 100% { transform: translate(0, 0) scale(.9); } 25% { transform: translate(4px, -5px) scale(1.1); } 50% { transform: translate(-3px, -8px) scale(.95); } 75% { transform: translate(-5px, -2px) scale(1.12); } }
/* three ways to move: rise (drifts up and fades, then starts again), wander (a slow loop around), sway (small and gentle) */
.dw-star.rise, .pd-star.rise { animation-name: dwTwinkle, dwRise; animation-duration: 2.4s, 11s; animation-timing-function: ease-in-out, linear; }
.dw-star.wander, .pd-star.wander { animation-name: dwTwinkle, dwWander; animation-duration: 2.8s, 16s; }
@keyframes dwRise { 0% { transform: translateY(18px) scale(.6); opacity: 0; } 12% { opacity: 1; } 80% { opacity: .9; } 100% { transform: translateY(-70px) translateX(8px) scale(1.05); opacity: 0; } }
@keyframes dwWander { 0%, 100% { transform: translate(0, 0) scale(.9); } 20% { transform: translate(22px, -14px) scale(1.1); } 45% { transform: translate(6px, -30px) scale(.95); }
  70% { transform: translate(-20px, -12px) scale(1.15); } 85% { transform: translate(-10px, 8px) scale(1); } }
/* a few lights float in front of the words */
.dw-sky.front { z-index: 3; background: none; }
.pd-star.front { z-index: 3; }
/* popped: gone in a flash, then back slowly somewhere else */
.dw-star.pop, .pd-star.pop { opacity: 0 !important; scale: 2.2; transition: opacity .25s ease, scale .25s ease; }
.dw-star.back, .pd-star.back { animation: dwBack 1.8s ease-out both, dwSway 7s ease-in-out infinite; }
@keyframes dwBack { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
.pd-star { pointer-events: auto; cursor: pointer; animation: dwSway 7s ease-in-out infinite; transition: opacity .5s, scale .5s; }
.pd-star::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.pd-star:nth-of-type(2n) { animation-duration: 8.5s; animation-direction: reverse; }
/* the words */
.pm-slide.pm-diwali .pm-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .8125rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #ffcf6b; }
.pm-slide.pm-diwali .pm-kicker .pm-dot { display: none; }
.pm-slide.pm-diwali .pm-kicker::before, .pm-slide.pm-diwali .pm-kicker::after { content: "✦"; font-size: .85em; }
.pm-slide.pm-diwali .pm-title { margin: 0 0 14px; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.04; letter-spacing: -.025em; font-weight: 800; color: #fff4e0; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); overflow-wrap: anywhere; }
.dw-save { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.01em; color: #ffb347; }
.dw-save b { font-weight: 800; }
.dw-save::after { content: ""; display: block; width: 120px; height: 3px; margin-top: 12px; border-radius: 2px; background: linear-gradient(90deg, #ffcf6b, #ff7a18); opacity: .85; }
.pm-slide.pm-diwali .pm-text { margin: 12px 0 0; font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.45; color: rgba(255, 244, 224, .82); max-width: 44ch; }
.pm-slide.pm-diwali .pm-text b { color: #ffcf6b; }
.pm-slide.pm-diwali .pm-worth { display: inline-block; margin: 12px 0 0; padding: 6px 12px; border-radius: 999px; background: rgba(255, 207, 107, .14); color: #ffd98a; font-weight: 600; font-size: .875rem; }
/* the photo: round, gold ring, halo */
.pm-slide.pm-diwali .pm-pic { width: min(100%, 300px); background: radial-gradient(closest-side, rgba(255, 207, 107, .32), rgba(255, 122, 24, .1) 70%, transparent); }
.pm-slide.pm-diwali .pm-pic::before { content: ""; position: absolute; inset: 2%; border-radius: 50%; border: 1.5px solid rgba(255, 207, 107, .55); }
.pm-slide.pm-diwali .pm-pic > img, .pm-slide.pm-diwali .pm-pic > .pm-photos { width: 80%; height: 80%; border-radius: 50%; transform: none; box-shadow: 0 0 0 2px #ffcf6b, 0 24px 44px -18px rgba(0, 0, 0, .7); }
.pm-slide.pm-diwali .pm-free { background: linear-gradient(180deg, #ffcf6b, #ff8c2a); color: #2a0612; box-shadow: 0 0 22px rgba(255, 170, 60, .6); }
/* the button */
.pm-slide.pm-diwali .pm-cta { --pm-ctatext: #2a0612; color: #2a0612; background: linear-gradient(100deg, #ffcf6b, #ff8c2a); font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255, 220, 150, .5), 0 0 28px rgba(255, 170, 60, .5), 0 14px 30px -14px rgba(0, 0, 0, .6); }
.pm-slide.pm-diwali .pm-cta:hover { filter: brightness(1.06); }
/* the timer: boxes */
.pm-slide.pm-diwali .pm-label { color: rgba(255, 244, 224, .85); }
.pm-slide.pm-diwali .pm-when { color: rgba(255, 244, 224, .6); }
.pm-boxes { display: inline-flex; gap: 8px; margin: 6px 0 0; font-variant-numeric: tabular-nums; font-size: 1.375rem; font-weight: 700; color: inherit; }
.pm-boxes .pd-box { min-width: 2.2em; padding: .3em .35em; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 207, 107, .18); }
@media (max-width: 860px) {
  .pm-slide.pm-diwali .pm-card { grid-template-columns: 1fr; grid-template-areas: "pic" "copy" "clock" "cta"; text-align: left; }
  .pm-slide.pm-diwali .pm-pic { width: min(60%, 220px); }
  .pm-slide.pm-diwali .pm-cta-wrap { justify-self: stretch; }
  .pm-slide.pm-diwali .pm-cta { width: 100%; justify-content: center; }
}

/* ===== photo carousel (the free gift's photos) ===== */
.pm-photos { position: relative; overflow: hidden; display: block; }
.pm-pic .pm-photos { place-self: center; }
.pm-photos-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.pm-photos-track::-webkit-scrollbar { display: none; }
.pm-photo { position: relative; flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; }
.pm-photo img, .pm-pic .pm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; box-shadow: none; transform: none; }
.pm-photo-cap { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); max-width: 86%; padding: 4px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 .6875rem/1.3 var(--pm-font); letter-spacing: .04em; color: #2a0612; background: rgba(255, 220, 150, .92); }
.pm-photo-dots { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.pm-photo-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .55); transition: width .3s, background .3s; }
.pm-photo-dots i.on { width: 16px; background: #fff; }
.pm-pic.is-carousel .pm-photo-cap { bottom: 18%; }
@media (prefers-reduced-motion: reduce) { .dw-sky i, .pd-star { animation: none !important; } .pm-photo-dots i { transition: none; } }

/* clicks pass through the words to the lights behind them (buttons and the photo carousel still take clicks) */
.pm-slide.pm-diwali .pm-copy, .pm-slide.pm-diwali .pm-clock, .pd .pd-text, .pd .pd-timer, .pd .pd-shape:not(.pd-star) { pointer-events: none; }
.pm-slide.pm-diwali .pm-copy a, .pm-slide.pm-diwali .pm-copy button { pointer-events: auto; }
.pd-image .pm-photos { width: 100%; height: 100%; }

/* ---------- 5 Nov 2026: a picture layer with several photos taking turns (fade, pop, zoom; swipe uses the track) ---------- */
.pm-stack { width: 100%; height: 100%; }
.pm-stack .pm-photo { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.pm-stack .pm-photo.on { opacity: 1; z-index: 1; }
.pm-stack.fx-fade .pm-photo { transition: opacity .8s ease; }
.pm-stack.fx-pop .pm-photo { transform: scale(.55); transition: opacity .35s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.pm-stack.fx-pop .pm-photo.on { transform: scale(1); }
.pm-stack.fx-pop .pm-photo.off { transform: scale(1.12); opacity: 0; transition: opacity .3s ease, transform .3s ease; }
.pm-stack.fx-zoom .pm-photo { transform: scale(1.25); transition: opacity .7s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.pm-stack.fx-zoom .pm-photo.on { transform: scale(1); }
.pm-stack.fx-zoom .pm-photo.off { transform: scale(.9); }
.pm-stack .pm-photo-dots { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .pm-stack .pm-photo { transition: opacity .2s linear !important; transform: none !important; } }