.shop-promotion-countdown[hidden] {
    display: none;
}

.shop-promotion-countdown {
    --shop-countdown-accent: #247fa8;
    position: relative;
    isolation: isolate;
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    align-items: stretch;
    margin-top: 0.75rem;
    overflow: hidden;
    border: 1px solid rgb(36 127 168 / 0.28);
    border-color: color-mix(in srgb, var(--shop-countdown-accent) 28%, transparent);
    background: rgb(255 255 255 / 0.92);
    color: #11191f;
    transition: border-color 320ms ease, background-color 320ms ease;
}

.shop-promotion-countdown::before {
    position: absolute;
    z-index: 0;
    inset: 0 auto 0 0;
    width: 0.18rem;
    background: var(--shop-countdown-accent);
    content: '';
    transition: background-color 320ms ease;
}

.shop-promotion-countdown.is-ending-soon {
    --shop-countdown-accent: #c47722;
}

.shop-promotion-countdown.is-ending-now {
    --shop-countdown-accent: #bd4343;
}

.shop-promotion-countdown__label {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 clamp(5.75rem, 28%, 8rem);
    flex-direction: column;
    justify-content: center;
    padding: 0.65rem 0.8rem;
    color: var(--shop-countdown-accent);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    line-height: 1.35;
    transition: color 320ms ease;
}

.shop-promotion-countdown__divider {
    width: 1px;
    flex: 0 0 1px;
    margin: 0.55rem 0;
    background: linear-gradient(transparent, rgb(36 127 168 / 0.35), transparent);
    background: linear-gradient(transparent, color-mix(in srgb, var(--shop-countdown-accent) 45%, transparent), transparent);
    transition: background 320ms ease;
}

.shop-promotion-countdown__timer {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shop-promotion-countdown__unit {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.25rem;
    text-align: center;
}

.shop-promotion-countdown__unit + .shop-promotion-countdown__unit::before {
    position: absolute;
    top: 27%;
    bottom: 27%;
    left: 0;
    width: 1px;
    background: rgb(17 25 31 / 0.08);
    content: '';
}

.shop-promotion-countdown__value {
    display: inline-block;
    min-width: 2.25ch;
    color: #1b668a;
    color: color-mix(in srgb, var(--shop-countdown-accent) 72%, #11191f);
    font-size: clamp(0.94rem, 1.25vw, 1.12rem);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    letter-spacing: 0.035em;
    line-height: 1;
    transform-origin: center;
    transition: color 320ms ease;
    will-change: transform, opacity;
}

.shop-promotion-countdown__value.is-changing {
    animation: shop-countdown-digit-change 300ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.shop-promotion-countdown__caption {
    margin-top: 0.3rem;
    color: rgb(17 25 31 / 0.5);
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    line-height: 1;
}

@keyframes shop-countdown-digit-change {
    from {
        opacity: 0.28;
        transform: translateY(0.22rem) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 35rem) {
    .shop-promotion-countdown {
        min-height: 3.2rem;
    }

    .shop-promotion-countdown__label {
        flex-basis: 5.35rem;
        padding-inline: 0.6rem;
        font-size: 0.56rem;
        letter-spacing: 0.09em;
    }

    .shop-promotion-countdown__unit {
        padding-inline: 0.1rem;
    }

    .shop-promotion-countdown__caption {
        font-size: 0.46rem;
        letter-spacing: 0.045em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-promotion-countdown,
    .shop-promotion-countdown::before,
    .shop-promotion-countdown__label,
    .shop-promotion-countdown__divider,
    .shop-promotion-countdown__value {
        transition: none;
    }

    .shop-promotion-countdown__value.is-changing {
        animation: none;
    }
}