/*!
 * Black Friday 2025 Styles
 * Cutting-edge flip countdown with minimal dark theme
 */

/* ========================================
   BLACK FRIDAY PAGE CONTAINER
   ======================================== */

.black-friday-page {
    width: 100%;
    background: var(--color-bg);
}

.black-friday-main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

/* ========================================
   HERO SECTION - CENTERED LAYOUT
   ======================================== */

/* Override category page 2-column grid for centered layout */
.black-friday-page .sonniss-category-hero__content--centered {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.black-friday-page .value-stack--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.black-friday-page .value-stack--centered .deal-badge {
    margin: 0 auto 1.5rem;
}

.black-friday-page .value-stack--centered .sonniss-category-hero__headline {
    text-align: center;
}

.black-friday-page .value-stack--centered .sonniss-category-hero__description {
    text-align: center;
    max-width: 1000px;
}

/* CTA Button Centered */
.bf-cta-centered {
    margin: 2rem auto 0;
    max-width: 350px;
}

/* ========================================
   FLIP COUNTDOWN CLOCK - STUNNING DESIGN
   ======================================== */

.bf-flip-countdown-wrapper {
    margin: 3rem 0 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

.bf-flip-countdown {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.time-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.label {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.flip-clock {
    position: relative;
    width: 100px;
    height: 120px;
    perspective: 1000px;
}

.flip-card {
    position: relative;
    width: 100%;
    height: 100%;
}

.flip-card-top,
.flip-card-bottom {
    position: absolute;
    width: 100%;
    overflow: hidden;
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-variant-numeric: tabular-nums;
}

.flip-card-top {
    height: 53%;
}

.flip-card-bottom {
    height: 47%;
}

.flip-card-top::before,
.flip-card-bottom::before {
    content: attr(data-value);
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 4.5rem;
    font-weight: 700;
    color: #f0f0f0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 120px; /* Same as flip-clock height */
}

.flip-card-top {
    top: 0;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #111;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.4),
        0 8px 16px rgba(0,0,0,0.3),
        0 16px 32px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 20px rgba(174, 110, 49, 0.1);
}

.flip-card-top::before {
    top: -3px;
}

.flip-card-bottom {
    bottom: 0;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #444;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.4),
        0 8px 16px rgba(0,0,0,0.3),
        0 16px 32px rgba(0,0,0,0.2),
        inset 0 -1px 0 rgba(255,255,255,0.05),
        0 0 20px rgba(174, 110, 49, 0.1);
}

.flip-card-bottom::before {
    top: -63px; /* Negative half of height + offset to show bottom half of number */
}

.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.flip-card-back-top,
.flip-card-back-bottom {
    position: absolute;
    width: 100%;
    overflow: hidden;
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backface-visibility: hidden;
    font-variant-numeric: tabular-nums;
}

.flip-card-back-top {
    height: 53%;
}

.flip-card-back-bottom {
    height: 47%;
}

.flip-card-back-top::before,
.flip-card-back-bottom::before {
    content: attr(data-value);
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 4.5rem;
    font-weight: 700;
    color: #f0f0f0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 120px;
}

.flip-card-back-top {
    top: 0;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #111;
    transform-origin: bottom;
    transform: rotateX(0deg);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.4),
        0 8px 16px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.flip-card-back-top::before {
    top: -3px;
}

.flip-card-back-bottom {
    bottom: 0;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #444;
    transform-origin: top;
    transform: rotateX(90deg);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.4),
        0 8px 16px rgba(0,0,0,0.3),
        inset 0 -1px 0 rgba(255,255,255,0.05);
}

.flip-card-back-bottom::before {
    top: -63px;
}

/* Flip animation */
.flip-card.flipping .flip-card-back-top {
    animation: flipTop 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.flip-card.flipping .flip-card-back-bottom {
    animation: flipBottom 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

@keyframes flipTop {
    0% {
        transform: rotateX(0deg);
        z-index: 2;
    }
    50% {
        transform: rotateX(-90deg);
        z-index: 2;
    }
    100% {
        transform: rotateX(-90deg);
        z-index: 1;
    }
}

@keyframes flipBottom {
    0% {
        transform: rotateX(90deg);
        z-index: 1;
    }
    50% {
        transform: rotateX(90deg);
        z-index: 1;
    }
    51% {
        transform: rotateX(90deg);
        z-index: 2;
    }
    100% {
        transform: rotateX(0deg);
        z-index: 2;
    }
}

/* ========================================
   PRODUCT SECTIONS - MINIMAL & ELEGANT
   ======================================== */

.bf-product-section {
    margin-bottom: 5rem;
}

.bf-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.bf-section-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(174, 110, 49, 0.15) 0%, rgba(174, 110, 49, 0.08) 100%);
    color: var(--color-text);
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    border: 1px solid rgba(174, 110, 49, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bf-section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.bf-section-description {
    font-size: 1rem;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Section-specific subtle accents */
.bf-section--lightning .bf-section-badge {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.2) 0%, rgba(174, 110, 49, 0.1) 100%);
    border-color: rgba(212, 165, 116, 0.3);
}

.bf-section--discounts .bf-section-badge {
    background: linear-gradient(135deg, rgba(174, 110, 49, 0.15) 0%, rgba(174, 110, 49, 0.08) 100%);
    border-color: rgba(174, 110, 49, 0.25);
}

.bf-section--bundles .bf-section-badge {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.18) 0%, rgba(174, 110, 49, 0.1) 100%);
    border-color: rgba(212, 165, 116, 0.28);
}

.bf-section--exclusive .bf-section-badge {
    background: linear-gradient(135deg, rgba(174, 110, 49, 0.2) 0%, rgba(174, 110, 49, 0.12) 100%);
    border-color: rgba(174, 110, 49, 0.3);
}

.bf-section--all-deals .bf-section-badge {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.15) 0%, rgba(174, 110, 49, 0.08) 100%);
    border-color: rgba(212, 165, 116, 0.25);
}

/* No products message */
.bf-no-products {
    text-align: center;
    padding: 3rem;
    color: var(--color-text-secondary);
    font-size: 1rem;
}

/* ========================================
   LIGHTNING DEALS - PREMIUM CONTAINER
   ======================================== */

.bf-lightning-container {
    position: relative;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.6) 0%, rgba(15, 15, 15, 0.4) 100%);
    border: 1px solid rgba(212, 165, 116, 0.25);
    border-radius: var(--radius-lg);
    padding: 4rem 2rem;
    margin: 0 0 5rem 0;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.3),
        0 12px 24px rgba(0, 0, 0, 0.25),
        0 24px 48px rgba(0, 0, 0, 0.15),
        0 0 60px rgba(212, 165, 116, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    overflow: hidden;
}

/* Subtle top highlight line */
.bf-lightning-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 165, 116, 0.4) 50%,
        transparent 100%);
}

/* Enhanced hover state for interactivity */
.bf-lightning-container:hover {
    border-color: rgba(212, 165, 116, 0.35);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.3),
        0 12px 24px rgba(0, 0, 0, 0.25),
        0 24px 48px rgba(0, 0, 0, 0.15),
        0 0 80px rgba(212, 165, 116, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Remove bottom margin from section inside container */
.bf-lightning-container .bf-product-section {
    margin-bottom: 0;
}

/* Refresh indicator badge */
.bf-lightning-refresh-badge {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.2) 0%, rgba(174, 110, 49, 0.15) 100%);
    color: rgba(212, 165, 116, 1);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(212, 165, 116, 0.35);
    box-shadow:
        0 2px 8px rgba(212, 165, 116, 0.15),
        0 0 20px rgba(212, 165, 116, 0.08);
    z-index: 10;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow:
            0 2px 8px rgba(212, 165, 116, 0.15),
            0 0 20px rgba(212, 165, 116, 0.08);
    }
    50% {
        box-shadow:
            0 2px 8px rgba(212, 165, 116, 0.25),
            0 0 30px rgba(212, 165, 116, 0.15);
    }
}

/* Enhanced Lightning badge styling */
.bf-lightning-container .bf-section-badge {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.25) 0%, rgba(174, 110, 49, 0.15) 100%);
    border-color: rgba(212, 165, 116, 0.4);
    color: rgba(212, 165, 116, 1);
    box-shadow:
        0 2px 8px rgba(212, 165, 116, 0.2),
        0 0 20px rgba(212, 165, 116, 0.1);
}

/* ========================================
   TRUST SECTION - ELEGANT DARK THEME
   ======================================== */

.bf-trust-section {
    background: var(--color-bg-darker);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    margin: 4rem 0;
    border: 1px solid var(--color-border);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.bf-trust-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 2rem 0;
    letter-spacing: -0.01em;
}

.bf-trust-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    align-items: center;
    justify-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.bf-trust-company {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}

.bf-trust-company:hover {
    transform: scale(1.05);
    opacity: 1;
}

.bf-trust-company img {
    max-width: 100%;
    height: auto;
    max-height: 50px;
    filter: grayscale(30%) brightness(0.9);
    transition: filter 0.3s ease;
}

.bf-trust-company:hover img {
    filter: grayscale(0%) brightness(1);
}

/* ========================================
   ALL DEALS CTA SECTION
   ======================================== */

.bf-all-deals-cta {
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.95) 0%, rgba(30, 30, 30, 0.98) 100%);
    border-radius: var(--radius-lg);
    padding: 5rem 2rem;
    margin: 5rem 0 2rem;
    border: 1px solid rgba(174, 110, 49, 0.2);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.3),
        0 12px 24px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(174, 110, 49, 0.1);
    position: relative;
    overflow: hidden;
}

.bf-all-deals-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(174, 110, 49, 0.3) 50%,
        transparent 100%);
}

.bf-all-deals-cta__container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.bf-all-deals-cta .bf-section-badge {
    background: linear-gradient(135deg, rgba(174, 110, 49, 0.15) 0%, rgba(174, 110, 49, 0.08) 100%);
    color: rgba(174, 110, 49, 1);
    border: 1px solid rgba(174, 110, 49, 0.3);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(174, 110, 49, 0.2);
}

.bf-all-deals-cta__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.bf-all-deals-cta__description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 650px;
}

.bf-all-deals-cta__button {
    margin-top: 1rem;
    padding: 1rem 3rem;
    font-size: 1.1rem;
    min-width: 280px;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(174, 110, 49, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Shimmer animation effect */
.bf-all-deals-cta__button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.bf-all-deals-cta__button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.4),
        0 12px 24px rgba(174, 110, 49, 0.3);
}

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

@media (max-width: 1024px) {
    .black-friday-main-content {
        padding: 0 1.5rem 3rem;
    }

    .bf-section-title {
        font-size: 2rem;
    }

    .flip-clock {
        width: 100px;
        height: 120px;
    }

    .flip-card-top,
    .flip-card-bottom,
    .flip-card-back-top,
    .flip-card-back-bottom {
        font-size: 3rem;
    }

    .bf-flip-countdown {
        gap: 1.5rem;
    }

    .bf-lightning-container {
        padding: 3.5rem 1.5rem;
        margin: 0 0 4rem 0;
    }

    .bf-lightning-refresh-badge {
        top: 1.5rem;
        right: 1.5rem;
        font-size: 0.7rem;
        padding: 0.45rem 0.9rem;
    }

    .bf-all-deals-cta {
        padding: 4rem 2rem;
        margin: 4rem 0 2rem;
    }

    .bf-all-deals-cta__title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .black-friday-main-content {
        padding: 0 1rem 2rem;
    }

    .black-friday-page .sonniss-category-hero__content--centered {
        padding: 3rem 1.5rem;
    }

    .bf-product-section {
        margin-bottom: 3rem;
    }

    .bf-section-header {
        margin-bottom: 2rem;
    }

    .bf-section-title {
        font-size: 1.8rem;
    }

    .bf-section-description {
        font-size: 0.95rem;
    }

    .flip-clock {
        width: 80px;
        height: 100px;
    }

    .flip-card-top,
    .flip-card-bottom,
    .flip-card-back-top,
    .flip-card-back-bottom {
        font-size: 2.5rem;
    }

    .label {
        font-size: 0.75rem;
    }

    .bf-flip-countdown {
        gap: 1rem;
    }

    .bf-lightning-container {
        padding: 3rem 1.5rem;
        margin: 0 0 3rem 0;
    }

    .bf-lightning-refresh-badge {
        top: 1.5rem;
        right: 1.5rem;
        font-size: 0.65rem;
        padding: 0.4rem 0.8rem;
    }

    .bf-trust-logos {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1.5rem;
    }

    .bf-trust-section h2 {
        font-size: 1.3rem;
    }

    .bf-all-deals-cta {
        padding: 3rem 1.5rem;
        margin: 3rem 0 2rem;
    }

    .bf-all-deals-cta__title {
        font-size: 1.8rem;
    }

    .bf-all-deals-cta__description {
        font-size: 1rem;
    }

    .bf-all-deals-cta__button {
        padding: 0.9rem 2.5rem;
        font-size: 1rem;
        min-width: 240px;
    }
}

@media (max-width: 480px) {
    .bf-section-title {
        font-size: 1.5rem;
    }

    .bf-section-badge {
        font-size: 0.7rem;
        padding: 0.35rem 1rem;
    }

    .flip-clock {
        width: 70px;
        height: 90px;
    }

    .flip-card-top,
    .flip-card-bottom,
    .flip-card-back-top,
    .flip-card-back-bottom {
        font-size: 2rem;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }

    .label {
        font-size: 0.7rem;
        letter-spacing: 1px;
    }

    .bf-flip-countdown {
        gap: 0.75rem;
    }

    .bf-flip-countdown-wrapper {
        margin: 2rem 0 1.5rem;
    }

    .bf-lightning-container {
        padding: 2.5rem 1rem;
        margin: 0 0 2.5rem 0;
    }

    .bf-lightning-refresh-badge {
        top: 1rem;
        right: 1rem;
        font-size: 0.6rem;
        padding: 0.35rem 0.7rem;
        letter-spacing: 0.03em;
    }

    .bf-all-deals-cta {
        padding: 2.5rem 1rem;
        margin: 2.5rem 0 1.5rem;
    }

    .bf-all-deals-cta__title {
        font-size: 1.5rem;
    }

    .bf-all-deals-cta__description {
        font-size: 0.95rem;
    }

    .bf-all-deals-cta__button {
        padding: 0.85rem 2rem;
        font-size: 0.95rem;
        min-width: 200px;
    }

    .bf-trust-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .bf-trust-company img {
        max-height: 40px;
    }

    .bf-trust-section {
        padding: 2rem 1rem;
    }
}

/* ===========================================================================
   COUNTDOWN, RESPONSIVE FIX  (20 August 2026)

   Shared by every template that uses .bf-flip-countdown:
     page-344-sfx-sale.php, page-black-friday.php,
     page-spring-sale.php ("Seasonal Sale (Reusable)")
   so future campaigns cloned from the reusable template inherit it.

   TWO BUGS, obvious below about 500px.

   1. The four tiles did not fit. At 390px the row had 252px of space (four
      nested padded containers eat 136px of the viewport) but four 70px tiles
      plus three 12px gaps need 316px, so SECONDS wrapped onto a second row.
      Fixed by letting the tiles flex-shrink instead of holding a fixed width.

   2. The digits never scaled, and overflowed the tile SIDEWAYS. They are drawn
      by ::before, which hardcodes font-size:4.5rem. Every media query above sets
      font-size on .flip-card-top (the PARENT), which the ::before overrides, so
      none of it ever reached the glyph. Measured at 390px: two digits at 72px
      are 82.8px wide in a 70px tile, so 12.8px was clipped by overflow:hidden.
      That is the "digits look cut off" the vendor's agency reported.

   READ THIS BEFORE CHANGING ANY CLOCK SIZE. The glyph is split across the two
   cards by three values that must move TOGETHER: line-height (120px), and the
   two vertical slides top:-3px and top:-63px. At the old 70x90 tile they still
   happened to centre the number correctly (measured glyph centre 44.7 against a
   clock centre of 45), so the ORIGINAL vertical split was fine. It only breaks
   if you scale one without the others: scaling the clock and the line-height but
   leaving -63px alone drops the bottom copy 20px too high and the bottoms of the
   digits vanish. That happened during this fix and was caught by the owner.
   Below, all three derive from the same container, so they cannot drift apart.

   The desktop clock is exactly 100px wide, so 1cqw of .time-section equals 1px
   at desktop size. Every constant below is therefore the SAME NUMBER as the
   desktop rule it replaces, just in cqw instead of px. The mobile clock is a
   true scale model of the desktop one, at any width, with no magic numbers.
   =========================================================================== */

@media (max-width: 767px) {

    .bf-flip-countdown-wrapper { width: 100%; }

    .bf-flip-countdown {
        width: 100%;
        flex-wrap: nowrap;        /* four on one row, always */
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
    }

    /* The tile is the container the digits size themselves against. */
    .bf-flip-countdown .time-section {
        flex: 1 1 0;              /* share the row evenly, shrink as needed */
        min-width: 0;
        max-width: 84px;          /* stop growing as we approach 768px */
        gap: 0.5rem;
        container-type: inline-size;
    }

    .bf-flip-countdown .flip-clock {
        width: 100%;
        height: 120cqw;           /* was 120px on a 100px-wide clock */
    }

    .bf-flip-countdown .flip-card-top::before,
    .bf-flip-countdown .flip-card-bottom::before,
    .bf-flip-countdown .flip-card-back-top::before,
    .bf-flip-countdown .flip-card-back-bottom::before {
        font-size: 72cqw;         /* was 4.5rem = 72px */
        line-height: 120cqw;      /* was 120px, must equal the clock height */
    }

    /* The two slides that split the number across the two cards. */
    .bf-flip-countdown .flip-card-top::before,
    .bf-flip-countdown .flip-card-back-top::before {
        top: -3cqw;               /* was -3px */
    }
    .bf-flip-countdown .flip-card-bottom::before,
    .bf-flip-countdown .flip-card-back-bottom::before {
        top: -63cqw;              /* was -63px */
    }

    /* The label scales off the same container as the digits. A fixed size looked
       fine at 390px but "MINUTES" and "SECONDS" overflowed a 37px tile at 320px on
       a page without the hero padding trim. 17cqw matches the 0.7rem-on-a-70px-tile
       the old 480px rule used; the clamp stops it going illegible or oversized. */
    .bf-flip-countdown .label {
        font-size: clamp(0.42rem, 17cqw, 0.68rem);
        letter-spacing: 0.04em;
        white-space: nowrap;
    }
}