/* DOUBLE POINTS COUNTDOWN (site/promo.js). Luke's picks, 27 Sep 2026:
   desktop = mock B (docs/double-points/mock-B-1512x982.png),
   phone   = mock P2 (docs/double-points/mock-P2-390x844.png). */
.dpromo{pointer-events:none;color:#fff;font-family:var(--display);z-index:5}
.dpromo b,.dpromo em{font-style:italic}
.dpromo__clock{font-variant-numeric:tabular-nums}

/* only at home: never mid-rip, never while a purchase or a multi reveal owns the screen */
html:not([data-state="browse"]) .dpromo,
html[data-purchase] .dpromo,
html[data-multi-reveal="1"] .dpromo{visibility:hidden}

/* ---- desktop: the slab under the header buttons ---- */
.header__right{position:relative}
.dpromo--desk{position:absolute;right:0;top:calc(100% + 14px);width:232px;transform:rotate(-3.5deg);
  transform-origin:top right;filter:drop-shadow(0 8px 14px rgba(11,15,24,.35))}
.dpromo--desk .dpromo__slab{background:var(--acc);border:3px solid var(--key);border-radius:14px 14px 4px 4px;
  padding:9px 12px 7px;display:flex;align-items:center;gap:9px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.14)}
.dpromo--desk svg{width:30px;height:30px;flex:none}
.dpromo--desk .dpromo__big{font:italic 900 34px/.9 var(--display);text-shadow:0 3px 0 var(--key);letter-spacing:.3px;white-space:nowrap}
.dpromo--desk .dpromo__small{font:italic 900 13px/1 var(--display);letter-spacing:.8px;margin-top:3px}
.dpromo--desk .dpromo__tab{background:var(--key);border:3px solid var(--key);border-top:0;border-radius:0 0 12px 12px;
  padding:6px 12px 7px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dpromo--desk .dpromo__ends{font:700 11px/1 var(--ui);color:#AEB6C8;letter-spacing:1.3px}
.dpromo--desk .dpromo__clock{font:italic 900 24px/1 var(--display)}
/* the header shrinks with the window (its buttons are 33px tall at 1147x655, 43px at
   1512x982); the slab follows the same ratio so it never outgrows the buttons above it */
@media (max-width:1400px){.dpromo--desk{transform:rotate(-3.5deg) scale(.86)}}
@media (max-width:1200px){.dpromo--desk{transform:rotate(-3.5deg) scale(.78);top:calc(100% + 10px)}}
@media (max-width:1023px){.dpromo--desk{display:none}}

/* ---- phone: the sticker on the centre pack ---- */
.dpromo--phone{position:absolute;left:0;top:0;z-index:400;transform:rotate(8deg);background:var(--acc);border:3px solid var(--key);
  border-radius:12px;padding:6px 10px 5px;display:flex;flex-direction:column;align-items:center;gap:3px;
  white-space:nowrap;box-shadow:0 4px 0 var(--key)}
.dpromo--phone:not([data-placed="1"]){visibility:hidden}
.dpromo--phone .dpromo__big{font:italic 900 19px/1 var(--display);text-shadow:0 2px 0 var(--key)}
.dpromo--phone .dpromo__clock{font:italic 900 15px/1 var(--display);background:var(--key);border-radius:6px;padding:3px 6px 2px}
@media (min-width:1024px){.dpromo--phone{display:none}}

@media (prefers-reduced-motion:no-preference){
  .dpromo--desk,.dpromo--phone{animation:dpromo-in .32s cubic-bezier(.2,.9,.3,1.2) both}
}
@keyframes dpromo-in{from{opacity:0;scale:.85}to{opacity:1;scale:1}}