.winter-promo{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-winter-promo);
    color: #fff;
    padding: 28px 0 40px;
}
@media (min-width: 768px){
    .winter-promo{ padding: 19px 0 17px; }
}

.winter-promo__inner{
    position: relative;
    z-index: 2;
    text-align: center;
}
.winter-promo__eyebrow{
    font-family: Crimson Text;
    font-weight: 700;
    font-size: var(--font-size-xxl);
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;

}
.winter-promo__title{
    font-family: Crimson Text;
    font-weight: 400;
    font-size: var(--font-size-xl);
    leading-trim: NONE;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;

}
.winter-promo__cta{ margin-bottom: 16px; }

.winter-promo__btn{
    background: #FF8989;
    padding: 5px 27px 6px 28px;
    border-radius: 5px;

    font-family: Crimson Text;
    font-weight: 600;
    font-size: var(--font-size-xl);
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #FFFFFF;

    transition: var(--transition-fast);
}
.winter-promo__btn:hover{
    transform: translateY(-2px);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(102, 217, 239, 0.3);
}

.snow-canvas{
    position: absolute;
    left: 0; right: 0; top: 0;
    bottom: auto;
    height: 50%;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

.countdown{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 20px;
    gap: 12px 20px;
}
.countdown-label{
    grid-column: 1;
    justify-self: end;
}

.countdown-label{
    font-family: Crimson Text;
    font-weight: 600;
    font-size: var(--font-size-sm);
    leading-trim: NONE;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: middle;

}
.countdown-inner{
    grid-column: 2;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    align-items: start;
    gap: 0 0;
    padding: 0 25px 6px;
    background-color: var(--bg-winter-promo-countdown-inner);
    border-radius: 10px;
    box-shadow: 0 2px 6px 0 #00000040;
    width: auto;
    min-width: 440px;
}

.slot{

}

.slot--days{ margin-right: calc(var(--font-size-xxl) + 4px); }

.slot .label{
    display: block;
    margin-top: 10px;
    font-family: Crimson Text;
    font-weight: 400;
    font-size: var(--font-size-xs);
    line-height: 1;
}

.slot .num{
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-family: Allerta;
    font-weight: 400;
    font-size: calc(var(--font-size-xxl) + 10px);
    line-height: 1;
    vertical-align: middle;
}

.sep{
    align-self: start;
    font-family: Allerta;
    font-weight: 400;
    font-size: calc(var(--font-size-xxl) + 10px);
    line-height: 1;
    opacity: .95;
    user-select: none;
    margin: 0 15px;
}

@keyframes numFlipOut{
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; }
}

@keyframes numFlipIn{
    0%   { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.winter-promo__garland{
    position:absolute;
    left:0; right:0; top:0;
    height:0;
    z-index:2;
    pointer-events:none;
}

.garland{
    position:absolute;
    width:400px;
    height:120px;
    overflow: visible;
}

.garland--left{
    top: 72px;
    left: -21px;
    transform-origin: 0 0;
    transform: rotate(-23deg);
}

.garland--right{
    top: 38px;
    right: -32px;
    transform-origin: 100% 0;
    transform: rotate(18deg);
}

.winter-promo__garland,
.garland,
.garland g { filter: none !important; }
.garland path[stroke="#000"] { filter: none !important; }

:root{
    --bulb-red: #FF4D4D;
}
.garland [fill="red"]{
    color: var(--bulb-red);
    fill: var(--bulb-red) !important;
    stroke: var(--bulb-red) !important;
}
.garland [fill="#f7f80d"]   { color: #f7f80d; }
.garland [fill="#51c4f1"]   { color: #51c4f1; }
.garland [fill="#85cf5a"]   { color: #85cf5a; }
.garland [fill="#f46b00"]   { color: #f46b00; }
.garland [fill="#bd5103"]   { color: #bd5103; }

.garland [fill="red"],
.garland [fill="#f7f80d"],
.garland [fill="#51c4f1"],
.garland [fill="#85cf5a"],
.garland [fill="#f46b00"],
.garland [fill="#bd5103"]{

    filter:
            drop-shadow(0 0 6px  currentColor)
            drop-shadow(0 0 14px currentColor);
    transition: filter .35s ease, opacity .35s ease;

    animation: garland-glow var(--d, 2.4s) ease-in-out infinite both;
    animation-delay: var(--delay, 0s);
}

@keyframes garland-glow {
    0% {
        opacity: .95;
        filter:
                drop-shadow(0 0 6px  currentColor)
                drop-shadow(0 0 14px currentColor);
    }
    40% {
        opacity: 1;
        filter:
                drop-shadow(0 0 10px currentColor)
                drop-shadow(0 0 22px currentColor);
    }
    60% {
        opacity: .58;
        filter:
                drop-shadow(0 0 3px  currentColor)
                drop-shadow(0 0 7px  currentColor);
    }
    100% {
        opacity: .95;
        filter:
                drop-shadow(0 0 7px  currentColor)
                drop-shadow(0 0 16px currentColor);
    }
}

.garland--left g:nth-of-type(3n)     [fill] { --delay: .10s; --d: 2.2s; }
.garland--left g:nth-of-type(3n+1)   [fill] { --delay: .40s; --d: 2.4s; }
.garland--left g:nth-of-type(3n+2)   [fill] { --delay: .70s; --d: 2.8s; }

.garland--right g:nth-of-type(4n)    [fill] { --delay: .15s; --d: 2.1s; }
.garland--right g:nth-of-type(4n+1)  [fill] { --delay: .55s; --d: 2.3s; }
.garland--right g:nth-of-type(4n+2)  [fill] { --delay: .85s; --d: 2.6s; }
.garland--right g:nth-of-type(4n+3)  [fill] { --delay: 1.10s; --d: 2.9s; }

.winter-promo__garland:hover .garland [fill="red"],
.winter-promo__garland:hover .garland [fill="#f7f80d"],
.winter-promo__garland:hover .garland [fill="#51c4f1"],
.winter-promo__garland:hover .garland [fill="#85cf5a"],
.winter-promo__garland:hover .garland [fill="#f46b00"],
.winter-promo__garland:hover .garland [fill="#bd5103"]{
    filter:
            drop-shadow(0 0 9px  currentColor)
            drop-shadow(0 0 20px currentColor);
}


@media (max-width: 820px){
    .garland{
        width: 330px;
    }

    .garland--left{
        transform: rotate(-28deg);
    }
}

@media (max-width: 700px){
    .garland{
        width: 250px;
    }
    .garland--left{
        transform: rotate(-33deg);
        left: -43px;
    }
    .garland--right {
        right: -45px;
        transform: rotate(25deg);
    }


    .countdown-inner{
        padding: 6px 25px 6px;
        width: 100%;
        min-width: 0;
    }

    .winter-promo__eyebrow{
        font-size: var(--font-size-xl);
    }
    .winter-promo__title{
        font-size: var(--font-size-lg);
    }

    .slot .num{
        font-size: var(--font-size-xxl);
    }

    .sep{
        font-size: var(--font-size-xxl);
        margin: 0 6px;
    }
}

@media (max-width: 568px){
    .winter-promo{
        padding: 10px 0 40px;
    }

    .garland {
        width: 200px;
    }
    .garland--left{
        top: 48px;
    }
    .garland--right{
        top: 27px;
    }


    .winter-promo__eyebrow {
        font-size: var(--font-size-md);
    }
    .winter-promo__title {
        font-size: var(--font-size-sm);
    }

    .winter-promo__btn{
        font-size: var(--font-size-md);
    }

    .countdown-label{
        font-size: var(--font-size-xs);
    }
    .countdown-inner {
        padding: 6px 10px 6px;
    }
    .slot--days {
        margin-right: var(--font-size-md);
    }
    .slot .num {
        font-size: var(--font-size-xl);
    }

}

@media (max-width: 475px){
    .garland--right {
        right: -41px;
        transform: rotate(27deg);
    }
    .garland--left {
        transform: rotate(-35deg);
        left: -43px;
    }

    .countdown-label{
        font-size: var(--font-size-xxs);
    }

    .sep{
        margin: 0px 2px;
    }
}

@media (max-width: 436px) {
    .garland {
        width: 153px;
    }
    .garland--left {
        left: -52px;
        top: 13px;
    }
    .garland--right {
        right: -41px;
        top: -15px;
    }

    .winter-promo__eyebrow {
        font-size: var(--font-size-sm);
    }
    .winter-promo__title {
        font-size: var(--font-size-xs);
    }
    .winter-promo__btn{
        font-size: var(--font-size-sm);
    }

    .countdown{
        margin-top: 10px;
        gap: 12px 10px;
    }
    .slot--days {
        margin-right: var(--font-size-sm);
    }
    .slot .num {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 390px) {
    .winter-promo__eyebrow {
        font-size: var(--font-size-xs);
    }
    .winter-promo__title {
        font-size: 12px;
        margin: 0;
    }

    .winter-promo__cta {
        margin-bottom: 5px;
    }
    .winter-promo__btn{
        padding: 1.1px 10.6px 1.9px 10.4px;
        font-size: var(--font-size-xs);
    }

    .slot--days{
        margin-right: var(--font-size-xs);
    }
    .slot .num {
        font-size: var(--font-size-lg);
    }
    .sep {
        font-size: var(--font-size-lg);
        margin: 4px 2px;
    }
    .slot .label{
        font-size: var(--font-size-xxxs);
    }
}