/**
 * Atelier — Countdown/deal widget (C18). Two variants, both faithful to
 * their respective design comps (T3 Campaign Landing vs T10 PDP on-sale
 * state) -- consolidated here per playbook §5.x "fix the component, don't
 * restyle a shared control in page CSS." Previously duplicated ad-hoc in
 * pages/_campaign.css and pages/_pdp-states.css; those now compose this.
 */
.atl-countdown { display: flex; align-items: center; gap: 8px; }

/* --boxed: bordered surface box per unit + label underneath (PDP on-sale state) */
.atl-countdown--boxed { gap: 14px; }
.atl-countdown--boxed .atl-countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--atl-surface);
  border: 1px solid var(--atl-border);
  padding: 8px 14px;
  min-width: 52px;
}
.atl-countdown--boxed .atl-countdown-num { font-family: 'Cormorant Garamond', serif; font-size: 24px; }
.atl-countdown--boxed .atl-countdown-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--atl-text-muted); }

/* --inverted: dark solid block per unit + colon separators + trailing label (Campaign hero) */
.atl-countdown--inverted .atl-countdown-unit {
  background: var(--atl-text);
  color: var(--atl-band-text);
  padding: 10px 13px;
  font-size: 20px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
}
.atl-countdown--inverted .atl-countdown-sep { font-size: 18px; color: var(--atl-text-subtle); }
.atl-countdown--inverted .atl-countdown-label { font-size: 12.5px; margin-left: 10px; color: var(--atl-text-muted); }

@media (max-width: 767px) {
  .atl-countdown { flex-wrap: wrap; }
}