/* promo.css — promo-mode overlay, layered on sales-shell.css.
   Source of truth: design/od-promo/screens/desktop.html inline <style>
   (extracted promo-only rules). Enqueued ONLY when a page is in promo
   mode (inc/enqueue.php). Depends on pg-sales-shell. */

/* ---- PROMO MODE overlay (added on top of any sales-shell page when a promo is live) ---- */
  /* sticky deadline strip */
  .promo-bar { position: sticky; top: 0; z-index: 60; background: var(--brand); color: #fff; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; padding: 11px 20px; font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.01em; text-align: center;}

.promo-bar strong { color: #fff; font-weight: 800;}

.promo-bar .promo-clock { font-variant-numeric: tabular-nums; background: rgba(255,255,255,0.20); padding: 3px 11px; border-radius: var(--radius-pill); letter-spacing: 0.04em;}

/* slim, distraction-free header for promo */
  .nav--slim .nav__links { display: none;}

.nav--slim .promo-price { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-heading); font-weight: 700; color: var(--ink-heading);}

.nav--slim .promo-price .was { font-size: var(--text-sm); font-weight: 500; color: var(--ink-light); text-decoration: line-through; font-family: var(--font-body);}

/* ---- promo deal-module order box (ported from the OD B1B promo seed -- consistent promo order box everywhere) ---- */
  .order__badge { position: absolute; top: 18px; right: 22px; background: var(--brand); color: #fff; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 13px; border-radius: var(--radius-pill); z-index: 2; line-height: 1;}

.commit { background: var(--brand-wash); border: 1px solid var(--brand-soft); border-radius: var(--radius-md); padding: var(--space-8) var(--space-6);}

.dm-price { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--space-8);}

.dm-price__top { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2);}

.dm-price__was { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--ink-light); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--ink-muted);}

.dm-price__save { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--accent-soft); color: var(--accent-deep); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid var(--accent);}

.dm-price__now { font-family: var(--font-heading); font-size: clamp(3.5rem, 9vw, 5.5rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink-heading); line-height: 1; margin: var(--space-1) 0 var(--space-2);}

.dm-price__cap { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-muted);}

.dm-cd { text-align: center; margin-bottom: var(--space-8);}

.dm-cd__label { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); margin-bottom: var(--space-3);}

.dm-cd__row { display: inline-flex; align-items: flex-start; gap: var(--space-3);}

.dm-cd__cell { display: flex; flex-direction: column; align-items: center;}

.dm-cd__num { font-family: var(--font-heading); font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-heading); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 10px 16px; min-width: 76px; text-align: center; line-height: 1; box-shadow: inset 0 -2px 0 rgba(27,25,22,0.04);}

.dm-cd__cap { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); margin-top: var(--space-2);}

.dm-cd__sep { font-family: var(--font-heading); font-size: clamp(2rem, 6vw, 2.75rem); color: var(--ink-light); align-self: center; margin-top: -4px;}

.dm-divider { margin: var(--space-8) 0 var(--space-6); border: none; border-top: 1px solid var(--hairline);}

.dm-guarantee { display: flex; gap: var(--space-4); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-body); margin-bottom: var(--space-4); line-height: var(--leading-normal);}

.dm-guarantee__tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-xs); margin-top: 2px;}

.dm-fine { font-size: var(--text-xs); color: var(--ink-muted); line-height: var(--leading-normal); text-align: center;}

@media (max-width: 560px) {
  .commit {padding: var(--space-6) var(--space-4);}
  .dm-cd__row {gap: var(--space-2);}
  .dm-cd__num {min-width: 50px; padding: 8px 8px; font-size: 1.6rem;}
  .dm-cd__sep {font-size: 1.6rem;}
  .order__badge {top: 14px; right: 14px; font-size: 10px; padding: 5px 10px;}
}