/* Sitewide commerce pieces, loaded on every page: the campaign banner, countdowns, plan cards while a campaign runs,
   and the preview pill (preview builds and localhost only). --cc is the running campaign's colour, set by commerce-ui.js. */

/* ---------- banner above the menu ---------- */
.promo{background:var(--cc,var(--flare));color:var(--ink);position:relative;z-index:55}
.promo[hidden]{display:none}
.promo-in{display:flex;align-items:center;justify-content:center;gap:6px 14px;min-height:46px;padding-block:6px;font-size:14px;line-height:1.3;font-weight:600}
.promo-badge{flex:none;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--bone);padding:6px 9px;border-radius:999px}
.promo-text{min-width:0;text-wrap:balance}
.promo-left{font-weight:700}
.promo-time{flex:none}
.promo-cta{flex:none;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.promo-x{flex:none;width:44px;height:44px;margin-right:-12px;border:0;background:none;color:var(--ink);font-size:24px;line-height:1;display:grid;place-items:center;border-radius:50%}
.promo-x:hover{background:rgba(12,11,16,.12)}
.promo .cd{background:var(--ink);color:var(--bone);padding:6px 10px;border-radius:999px}
@media (max-width:640px){
  .promo-in{justify-content:flex-start;padding-right:0;gap:4px 10px;font-size:13px}
  .promo-text{flex:1 1 140px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .promo-badge{display:none}
  .promo-cta{display:none}
}

/* ---------- countdown (d h m s; colons only on phones) ---------- */
.cd{display:inline-flex;align-items:baseline;gap:8px;font:700 13px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.cd-u{display:inline-flex;align-items:baseline;gap:2px}
.cd-u[hidden]{display:none}
.cd-u b{font-weight:700}
.cd-u i{font-style:normal;font-weight:400;opacity:.65;font-size:11px;text-transform:lowercase}
@media (max-width:480px){
  .cd{gap:0}
  .cd-u i{display:none}
  .cd-u[data-u="d"] i{display:inline;margin-right:7px}
  .cd-u:not([data-u="d"]):not(:first-child)::before,.cd-u[data-u="d"][hidden]+.cd-u::before{content:none}
  .cd-u:not([data-u="d"])+.cd-u::before{content:":";opacity:.6;margin-inline:2px}
}
.cd-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin:0 auto 28px;padding:14px 18px;max-width:640px;border-radius:20px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--cc,var(--night-4))}
.cd-card[hidden]{display:none}
.cd-card .chip i{background:var(--cc,var(--volt))}
.cd-card .cd{font-size:20px}
.cd-card .cd-u i{font-size:12px}
.cd-lab{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cd-left{font:700 12px/1 var(--mono);color:var(--cc,var(--volt))}

/* ---------- plan cards while a campaign changes their price ---------- */
.plan[data-campaigned]{box-shadow:inset 0 0 0 2px var(--cc,var(--flare)),0 40px 100px -60px var(--cc,var(--flare))}
.plan[data-campaigned] .badge.chip{background:var(--cc,var(--flare));color:var(--ink)}
.plan[data-campaigned] .price b{color:var(--cc,var(--bone))}
.plan[data-campaigned].hot{border-color:transparent}
.plan[hidden]{display:none}

/* ---------- preview pill ---------- */
.rv{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:85;width:max-content;max-width:min(420px,calc(100vw - 24px));display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:20px;background:rgba(23,21,31,.96);box-shadow:0 0 0 1px var(--night-4),0 20px 40px -12px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.rv-t{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 6px 0 12px;border:0;border-radius:999px;background:none;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);cursor:pointer}
.rv-t::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none}
.rv-t span{margin-right:auto}
.rv-i{width:28px;height:28px;padding:6px;border-radius:50%;background:var(--night-3);color:var(--bone);flex:none;transition:transform .2s}
.rv-t:hover .rv-i{background:var(--night-4)}
.rv.min .rv-i{transform:rotate(180deg)}
.rv-opts{display:flex;flex-wrap:wrap;gap:4px}
.rv-opts button{min-height:36px;padding:0 12px;border:0;border-radius:999px;background:var(--night-3);color:var(--bone);font:600 13px/1 var(--font);cursor:pointer}
.rv-opts button[aria-pressed="true"]{background:var(--bone);color:var(--ink)}
@media (pointer:coarse){.rv-t,.rv-opts button{min-height:44px}}
.rv.min .rv-opts,.rv.min .rv-links{display:none}
.rv-links{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin:2px 0 0;padding:4px 6px 0;border-top:1px solid var(--night-3);font-size:13px}
.rv-links small{font:700 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.rv-links a{color:var(--bone);min-height:32px;display:inline-flex;align-items:center}.rv-links a[aria-current]{color:var(--volt)}
@media (max-width:760px){.rv{bottom:calc(86px + env(safe-area-inset-bottom,0px))}}
body.checkout-page .rv{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion:reduce){.promo *,.cd-card *{transition:none!important}}