/** Shopify CDN: Minification failed

Line 21:18 Unexpected "{"
Line 21:27 Expected ":"
Line 21:34 Unexpected "{"
Line 22:24 Expected identifier but found whitespace
Line 22:26 Unexpected "{"
Line 22:35 Expected ":"
Line 22:61 Expected ":"
Line 23:27 Expected identifier but found whitespace
Line 23:29 Unexpected "{"
Line 23:38 Expected ":"
... and 1 more hidden warnings

**/
/* ============================================================
   Countdown Timer Banner — countdown-timer.css
   ============================================================ */

/* ---------- Section shell ---------- */
#shopify-section-{{ section.id }} {
  --section-padding-top: {{ section.settings.padding_top }}px;
  --section-padding-bottom: {{ section.settings.padding_bottom }}px;
}

/* ---------- Outer banner — full-width wrapper, transparent ---------- */
.countdown-banner {
  width: 100%;
  box-sizing: border-box;
  contain: layout style;
}

/* ---------- Inner: the visible rounded blue card ----------
   Layout approach: flexbox with justify-content + gap.
   Mobile  → space-between (timer hugs left, content hugs right)
   Desktop → center with a large fixed gap, so the timer + content
             form one centered group with consistent spacing between
             them — this is the layout that matches the approved design. */
.countdown-banner__inner {
  margin: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 9px 37px 8px;
  background: #3885e9;
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .countdown-banner__inner {
    width: 100%;
    margin: 15px 6px 5px;
    gap: 205px;
    padding: 10px 15px;
    justify-content: center;
  }
}

/* ---------- Timer block (left column) ---------- */
.countdown-banner__timer-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.countdown-banner__timer {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 2px solid #fff;
  border-radius: 4px;
  padding: 6px 14px;
  background: transparent;
}

.countdown-banner__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
}

.countdown-banner__number {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.countdown-banner__label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 3px;
}

.countdown-banner__sep {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  padding: 0 2px;
  align-self: flex-start;
  margin-top: 2px;
}

/* ---------- Content block: heading + subtext ---------- */
.countdown-banner__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.countdown-banner__heading {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.1;
}

.countdown-banner__subtext {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.04em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet + mobile: scale everything down and keep the compact
   space-between layout from the base (mobile-first) rules on
   .countdown-banner__inner above — the wide centered gap is
   desktop-only (≥1024px, see rule above) */
@media (max-width: 1023px) {
  .countdown-banner__content {
    white-space: normal;
    word-break: break-word;
  }

  .countdown-banner__timer {
    padding: 4px 8px;
    gap: 1px;
  }

  .countdown-banner__unit {
    min-width: 26px;
  }

  .countdown-banner__number {
    font-size: 14px;
  }

  .countdown-banner__sep {
    font-size: 14px;
  }

  .countdown-banner__label {
    font-size: 8px;
    letter-spacing: 0.04em;
  }

  .countdown-banner__heading {
    font-size: 12px;
    letter-spacing: 0.08em;
    white-space: normal;
    word-break: break-word;
  }

  .countdown-banner__subtext {
    font-size: 10px;
    white-space: normal;
    word-break: break-word;
  }
}

/* Very small screens (≤ 380px) */
@media (max-width: 380px) {
  .countdown-banner__inner {
    gap: 4px;
    padding: 8px 16px 7px;
  }

  .countdown-banner__number {
    font-size: 12px;
  }

  .countdown-banner__sep {
    font-size: 12px;
  }

  .countdown-banner__unit {
    min-width: 22px;
  }

  .countdown-banner__timer {
    padding: 3px 6px;
    border-width: 1.5px;
  }

  .countdown-banner__heading {
    font-size: 10px;
  }

  .countdown-banner__subtext {
    font-size: 9px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .countdown-banner * {
    transition: none !important;
    animation: none !important;
  }
}