/*
 * Promotion page look. Every rule is scoped to a body class (Lagom's own promotion theme class
 * or alx-promo-page), so ordinary pages are unchanged.
 *
 * Bigger hero countdown (Lagom's native timer, sized with Lagom's own heading variables).
 * On automatically for Lagom promotion pages with Theme "Black Week" or "Christmas Sale"
 * (Lagom adds page-promotion-<theme> to <body>); any other page opts in by typing
 * alx-promo-page into Page Settings > Body class.
 */
.alx-promo-page .site-banner .timer .timer-box-num,
.page-promotion-black_week .site-banner .timer .timer-box-num,
.page-promotion-christmas_sale .site-banner .timer .timer-box-num {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}
.alx-promo-page .site-banner .timer .timer-box-label,
.page-promotion-black_week .site-banner .timer .timer-box-label,
.page-promotion-christmas_sale .site-banner .timer .timer-box-label {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}
.alx-promo-page .site-banner .timer .timer-box.is-bordered,
.page-promotion-black_week .site-banner .timer .timer-box.is-bordered,
.page-promotion-christmas_sale .site-banner .timer .timer-box.is-bordered,
.alx-promo-page .site-banner .timer .timer-box.is-boxed,
.page-promotion-black_week .site-banner .timer .timer-box.is-boxed,
.page-promotion-christmas_sale .site-banner .timer .timer-box.is-boxed {
  min-width: 128px;
  padding: var(--spacing-2x) var(--spacing-3x);
}
.alx-promo-page .site-banner .timer .timer-divider,
.page-promotion-black_week .site-banner .timer .timer-divider,
.page-promotion-christmas_sale .site-banner .timer .timer-divider {
  padding-left: var(--spacing-3x);
  padding-right: var(--spacing-3x);
}
@media (max-width: 767.98px) {
  .alx-promo-page .site-banner .timer .timer-box-num,
.page-promotion-black_week .site-banner .timer .timer-box-num,
.page-promotion-christmas_sale .site-banner .timer .timer-box-num {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
  }
  .alx-promo-page .site-banner .timer .timer-box-label,
.page-promotion-black_week .site-banner .timer .timer-box-label,
.page-promotion-christmas_sale .site-banner .timer .timer-box-label {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }
  .alx-promo-page .site-banner .timer .timer-box.is-bordered,
.page-promotion-black_week .site-banner .timer .timer-box.is-bordered,
.page-promotion-christmas_sale .site-banner .timer .timer-box.is-bordered,
.alx-promo-page .site-banner .timer .timer-box.is-boxed,
.page-promotion-black_week .site-banner .timer .timer-box.is-boxed,
.page-promotion-christmas_sale .site-banner .timer .timer-box.is-boxed {
    min-width: 70px;
    padding: var(--spacing-1x) calc(var(--spacing-1x) + 2px);
  }
  .alx-promo-page .site-banner .timer .timer-divider,
.page-promotion-black_week .site-banner .timer .timer-divider,
.page-promotion-christmas_sale .site-banner .timer .timer-divider {
    padding-left: 4px;
    padding-right: 4px;
  }
}