.black-friday-banner {
    position: relative;
    z-index: 40;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.73);
    color: #fff;
    background: linear-gradient(105deg, #000 0%, #0f2d10 54%, #114e34 100%);
    box-shadow: 0 8px 24px rgba(2, 31, 21, .16);
    cursor: pointer;
}

.black-friday-banner::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 32% 115% at 75% -15%, rgba(112, 255, 126, .34), transparent 58%),
        linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .025) 50%, transparent 72%);
    content: '';
    pointer-events: none;
}

.black-friday-banner__inner {
    position: static;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(32px, 6vw, 90px);
    align-items: center;
    padding-top: 17px;
    padding-bottom: 17px;
}

.black-friday-banner__copy {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 1px;
    padding-left: 24px;
}

.black-friday-banner__copy::before {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(#d9ffac, #35c96e);
    box-shadow: 0 0 14px rgba(112, 255, 126, .42);
    content: '';
}

.black-friday-banner__label {
    width: fit-content;
    color: #9af29f;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .22em;
    line-height: 1.2;
    text-transform: uppercase;
}

.black-friday-banner__headline {
    color: #fff;
    font-size: clamp(22px, 2.3vw, 32px);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.08;
}

.black-friday-banner__copy p {
    margin: 2px 0 0;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(13px, 1.25vw, 16px);
    line-height: 1.4;
}

.black-friday-banner__mobile-ends {
    display: none;
}

.black-friday-banner__price {
    color: #9af29f;
    font-size: 1.22em;
    font-weight: 950;
}
.black-friday-banner__price__large {
    color: #9af29f;
    font-weight: 950;
}

.black-friday-banner__previous-price {
    color: rgba(255, 255, 255, .7);
}

.black-friday-banner__code {
    color: #fff;
    font-weight: 900;
    letter-spacing: .035em;
}

.black-friday-banner__button {
    display: inline-flex;
    min-width: 202px;
    min-height: 52px;
    gap: 20px;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 11px;
    color: #06331f;
    background: linear-gradient(135deg, #eaffdc, #8ff593);
    box-shadow: 0 10px 28px rgba(4, 24, 17, .25), inset 0 1px 0 rgba(255, 255, 255, .75);
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.black-friday-banner__button::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    content: '';
}

.black-friday-banner__button:hover,
.black-friday-banner__button:focus-visible {
    color: #04291d;
    background: linear-gradient(135deg, #f3ffe9, #a6ffa9);
    box-shadow: 0 13px 32px rgba(4, 24, 17, .32), inset 0 1px 0 rgba(255, 255, 255, .8);
    transform: none;
}

.black-friday-banner__button:focus-visible {
    outline: 3px solid rgba(154, 242, 159, .5);
    outline-offset: 3px;
}

.black-friday-banner__button span:last-child {
    font-size: 22px;
    line-height: 1;
    transition: transform .18s ease;
}

.black-friday-banner__button:hover span:last-child,
.black-friday-banner__button:focus-visible span:last-child {
    transform: translateX(3px);
}

@media (max-width: 760px) {
    .black-friday-banner {
        box-shadow: none;
    }

    .black-friday-banner::before {
        background:
            radial-gradient(ellipse 70% 100% at 100% 0%, rgba(51, 160, 91, .18), transparent 65%),
            linear-gradient(105deg, transparent, rgba(255, 255, 255, .02));
    }

    .black-friday-banner__inner {
        grid-template-areas:
            "label ends"
            "headline headline"
            "detail button";
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 14px;
        row-gap: 4px;
        width: 100%;
        padding: 18px 22px 20px;
    }

    .black-friday-banner__copy {
        display: contents;
    }

    .black-friday-banner__copy::before {
        display: none;
    }

    .black-friday-banner__label {
        grid-area: label;
        align-self: center;
        font-size: 11px;
    }

    .black-friday-banner__mobile-ends {
        display: block;
        grid-area: ends;
        align-self: center;
        color: rgba(255, 255, 255, .86);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .black-friday-banner__headline {
        grid-area: headline;
        margin-top: 2px;
        font-size: clamp(16px, 5vw, 20px);
        letter-spacing: -.035em;
        line-height: 1.12;
        white-space: nowrap;
        margin-top: 5px;
    }

    .black-friday-banner__copy p {
        grid-area: detail;
        align-self: center;
        margin: -1px 0 0;
        font-size: clamp(11px, 2.85vw, 13px);
        letter-spacing: -.015em;
        line-height: 1.35;
        white-space: nowrap;
    }

    .black-friday-banner__desktop-ends {
        display: none;
    }

    .black-friday-banner__button {
        grid-area: button;
        min-width: 0;
        min-height: 0;
        gap: 7px;
        align-self: center;
        padding: 3px 0;
        border: 0;
        border-bottom: 2px solid #a9f4a7;
        border-radius: 0;
        color: #b9f7b5;
        background: transparent;
        box-shadow: none;
        font-size: clamp(10px, 2.75vw, 12px);
    }

    .black-friday-banner__button:hover,
    .black-friday-banner__button:focus-visible {
        color: #d6ffd2;
        background: transparent;
        box-shadow: none;
    }

    .black-friday-banner__button span:last-child {
        font-size: 19px;
    }
}

@media (max-width: 390px) {
    .black-friday-banner__inner {
        column-gap: 9px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .black-friday-banner__headline {
        font-size: 14px;
    }

    .black-friday-banner__copy p {
        font-size: 9px;
    }

    .black-friday-banner__button {
        font-size: 10px;
    }
}

@media (max-width: 340px) {
    .black-friday-banner__inner {
        column-gap: 6px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .black-friday-banner__headline {
        font-size: 12px;
    }

    .black-friday-banner__copy p {
        font-size: 8px;
    }

    .black-friday-banner__button {
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .black-friday-banner__button,
    .black-friday-banner__button span:last-child {
        transition: none;
    }
}