.s9-black-friday {
    --s9-bf-edge: 24px;
    --s9-bf-ink: var(--Main-Blue-900, #031d3d);
    --s9-bf-yellow: #ffd43c;
    --s9-bf-radius: 12px;
    --s9-bf-inset: 16px;
    position: fixed;
    z-index: 850;
    right: max(var(--s9-bf-edge), env(safe-area-inset-right));
    bottom: max(var(--s9-bf-edge), env(safe-area-inset-bottom), var(--s9-bf-clearance, 0px));
    display: block;
    width: min(332px, calc(100vw - 2 * var(--s9-bf-edge)));
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: var(--s9-bf-radius);
    background: transparent;
    color: var(--s9-bf-ink);
    font-family: "League Spartan", Arial, sans-serif;
    text-align: left;
    cursor: pointer;
}

.s9-black-friday[hidden] { display: none; }

html:has(#s9-black-friday-coupon[open]) .s9-black-friday--ticket { visibility: hidden; }

.s9-black-friday:focus-visible {
    outline: 2px solid var(--s9-bf-ink);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px #fff;
}

.s9-black-friday__ticket {
    display: block;
    filter: drop-shadow(0 4px 8px rgb(3 29 61 / 20%));
}

.s9-black-friday__face,
.s9-black-friday__bottom {
    --s9-bf-notch: bottom;
    display: grid;
    padding-inline: var(--s9-bf-inset);
    border: 1px solid var(--s9-bf-ink);
    mask-image:
        radial-gradient(circle at left var(--s9-bf-notch), transparent 5px, #000 5.5px),
        radial-gradient(circle at right var(--s9-bf-notch), transparent 5px, #000 5.5px);
    mask-composite: intersect;
}

.s9-black-friday__face {
    grid-template-columns: max-content minmax(0, max-content);
    align-items: center;
    justify-content: center;
    column-gap: 18px;
    padding-block: 13px 12px;
    border-bottom: 0;
    border-radius: var(--s9-bf-radius) var(--s9-bf-radius) 0 0;
    background: var(--s9-bf-yellow);
}

.s9-black-friday__discount {
    color: inherit;
    font-size: 90px;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.065em;
    white-space: nowrap;
}

.s9-black-friday__discount > span {
    margin-inline-start: 2px;
    font-size: .65em;
    letter-spacing: -.05em;
}

.s9-black-friday__copy {
    display: grid;
    gap: 7px;
}

.s9-black-friday__label {
    font-size: 14px;
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.s9-black-friday__offer {
    color: inherit;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.s9-black-friday__discount,
.s9-black-friday__label,
.s9-black-friday__offer {
    text-box: trim-both cap alphabetic;
}

.s9-black-friday__bottom {
    --s9-bf-notch: top;
    row-gap: 9px;
    padding-block: 9px;
    border-top: 1px dashed rgb(3 29 61 / 36%);
    border-radius: 0 0 var(--s9-bf-radius) var(--s9-bf-radius);
    background: #fff;
}

.s9-black-friday__timer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.s9-black-friday__timer-region { display: contents; }

.s9-black-friday__unit {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 3px;
    color: var(--Gray-700, #4a5578);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.08;
}

.s9-black-friday__unit + .s9-black-friday__unit::before {
    position: absolute;
    inset-block: 3px;
    inset-inline-start: 0;
    border-inline-start: 1px solid var(--Gray-300, #dcdfea);
    content: '';
}

.s9-black-friday__unit strong {
    color: var(--s9-bf-ink);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-box: trim-both cap alphabetic;
}

.s9-black-friday__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40px;
    box-sizing: border-box;
    padding-inline: 10px;
    border-radius: 6px;
    background: var(--s9-bf-ink);
    color: #fff;
    font-size: 18px;
    font-weight: 650;
    line-height: 1;
}

.s9-black-friday__arrow {
    position: relative;
    flex: 0 0 13px;
    height: 2px;
    margin-inline-end: 2px;
    background: currentColor;
}

.s9-black-friday__arrow::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 6px;
    height: 6px;
    border: solid currentColor;
    border-width: 2px 2px 0 0;
    transform: translateY(-50%) rotate(45deg);
    content: '';
}

.s9-black-friday:hover .s9-black-friday__action,
.s9-black-friday:focus-visible .s9-black-friday__action {
    background: var(--Main-Blue-700, #0e44b0);
}

@media (prefers-reduced-motion: no-preference) {
    .s9-black-friday__action { transition: background-color 220ms ease-in-out; }
}

.s9-black-friday__deadline {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 580px) {
    .s9-black-friday {
        --s9-bf-edge: 12px;
        --s9-bf-inset: 13px;
        width: min(296px, calc(100vw - 2 * var(--s9-bf-edge)));
    }

    @supports (zoom: .92) {
        .s9-black-friday--ticket {
            width: min(275px, calc(100vw - 2 * var(--s9-bf-edge)));
        }

        .s9-black-friday--ticket .s9-black-friday__ticket { zoom: .92; }
    }

    .s9-black-friday__face {
        column-gap: 10px;
        padding-block: 12px 11px;
    }

    .s9-black-friday__bottom {
        row-gap: 8px;
        padding-block: 8px;
    }

    .s9-black-friday__discount { font-size: 84px; }
    .s9-black-friday__label { font-size: 13px; }
    .s9-black-friday__offer { font-size: 24px; }
    .s9-black-friday__unit strong { font-size: 30px; }
}

.s9-black-friday--bar {
    --s9-bf-copy-size: 17px;
    position: fixed;
    inset: var(--s9-promo-banner-h, 0px) 0 auto;
    width: 100%;
    border-radius: 0;
    background: var(--s9-bf-yellow);
}

html:has(.s9-black-friday--bar:not([hidden])) {
    --s9-bf-page-offset: calc(var(--s9-promo-banner-h, 0px) + var(--s9-bf-stack-height, 0px));
    scroll-padding-top: var(--s9-bf-page-offset);
}

#page-root:has(> .s9-black-friday--bar:not([hidden])) {
    padding-top: calc(var(--s9-promo-banner-h, 0px) + var(--s9-bf-reserved-height, 0px));
}

#page-root:has(> .s9-black-friday--bar:not([hidden])) > header {
    position: fixed;
    top: calc(var(--s9-promo-banner-h, 0px) + var(--s9-bf-bar-height, 0px));
    transition-property: height, background-color, backdrop-filter;
}

#page-root:has(> .s9-black-friday--bar:not([hidden])) > header #header-navigation.show-menu {
    top: 100%;
    height: calc(100dvh - var(--s9-bf-page-offset));
}

.s9-black-friday--bar:focus-visible {
    outline-offset: -3px;
    box-shadow: none;
}

.s9-black-friday--bar .s9-black-friday__ticket {
    display: grid;
    grid-template-columns: minmax(0, max-content) max-content max-content;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 1.35vw, 22px);
    padding: 7px 16px;
    filter: none;
}

.s9-black-friday--bar .s9-black-friday__face {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3px 10px;
    padding: 0;
    border: 0;
    background: transparent;
    mask-image: none;
    text-align: center;
}

.s9-black-friday--bar .s9-black-friday__label,
.s9-black-friday__bar-offer {
    font-size: var(--s9-bf-copy-size);
    line-height: 1;
    text-box: trim-both cap alphabetic;
}

.s9-black-friday__bar-offer { font-weight: 750; }

.s9-black-friday__bar-separator,
.s9-black-friday__bar-arrow {
    display: none;
}

.s9-black-friday--bar .s9-black-friday__bottom { display: contents; }

.s9-black-friday--bar .s9-black-friday__timer {
    grid-template-columns: repeat(4, minmax(52px, 1fr));
    text-align: center;
}

.s9-black-friday--bar .s9-black-friday__unit {
    align-content: start;
    gap: 3px;
    color: var(--s9-bf-ink);
    font-size: 12px;
}

.s9-black-friday--bar .s9-black-friday__unit + .s9-black-friday__unit::before {
    inset-block: 2px;
    border-color: rgb(3 29 61 / 24%);
}

.s9-black-friday--bar .s9-black-friday__unit strong {
    font-family: ui-monospace, monospace !important;
    font-size: 19px;
}

.s9-black-friday--bar .s9-black-friday__unit > span {
    text-box: trim-both cap text;
}

.s9-black-friday--bar .s9-black-friday__action {
    gap: 8px;
    min-height: 36px;
    padding-inline: 12px;
    font-size: var(--s9-bf-copy-size);
    white-space: nowrap;
}

.s9-black-friday--bar .s9-black-friday__action-label {
    text-box: trim-both cap alphabetic;
}

@media (max-width: 780px) {
    .s9-black-friday--bar { --s9-bf-copy-size: clamp(14px, 3.85vw, 16px); }

    .s9-black-friday--bar .s9-black-friday__ticket {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        row-gap: 0;
        max-width: 380px;
        margin-inline: auto;
        padding: 9px 10px;
    }

    .s9-black-friday--bar .s9-black-friday__face {
        min-height: 20px;
        gap: 4px clamp(4px, 5vw - 12px, 6px);
    }

    .s9-black-friday__bar-arrow {
        display: block;
    }

    .s9-black-friday__bar-separator {
        display: block;
        flex: 0 0 3px;
        height: 3px;
        border-radius: 50%;
        background: currentColor;
    }

    .s9-black-friday__sale-word,
    .s9-black-friday--bar .s9-black-friday__action {
        display: none;
    }

    .s9-black-friday--bar .s9-black-friday__label {
        letter-spacing: .025em;
    }

    .s9-black-friday--bar .s9-black-friday__timer-region {
        display: block;
        width: min(100%, 248px);
        max-height: var(--s9-bf-timer-height, none);
        overflow: hidden;
    }

    .s9-black-friday--bar .s9-black-friday__timer {
        padding-top: 8px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .s9-black-friday--bar.is-timer-collapsed .s9-black-friday__timer-region {
        max-height: 0;
        opacity: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
        .s9-black-friday--bar .s9-black-friday__timer-region {
            transition: max-height 240ms ease-in-out, opacity 180ms ease-in-out;
        }
    }
}