/* Black Friday mode (roket/black-friday): loaded only while the mode is on, everything scoped to body.mh-bf */

/* =====================================================
   Countdown bar (#roket-global-timer)
   ===================================================== */
body.mh-bf #roket-global-timer .mh-timer-icon {
    display: none;
}

body.mh-bf #roket-global-timer .mh-timer {
    padding-top: 12px;
    padding-bottom: 12px;
}

body.mh-bf #roket-global-timer .mh-timer-accordion-trigger,
body.mh-bf #roket-global-timer .mh-timer-accordion-trigger a {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.24px;
}

body.mh-bf #roket-global-timer .woo-sctr-countdown-value,
body.mh-bf #roket-global-timer .woo-sctr-countdown-text {
    color: #fff !important;
}

@media (max-width: 768px) {
    body.mh-bf #roket-global-timer .woo-sctr-countdown-text {
        color: #e3e2e1 !important;
    }
}

/* =====================================================
   Homepage hero (Elementor container 89215a2)
   The hero's own background video keeps playing; this image only shows behind it while it loads.
   ===================================================== */
body.mh-bf .elementor-element-89215a2 {
    background-color: #000;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.95) 75%, #000 100%),
        var(--mh-bf-hero-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* The design's dark fade over the video, behind the texts */
body.mh-bf .elementor-element-89215a2 .elementor-background-video-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.95) 75%, #000 100%);
    pointer-events: none;
}

/* Texts are swapped by script; keep the regular copy from flashing first */
body.mh-bf:not(.mh-bf-ready) .elementor-element-f649fdc,
body.mh-bf:not(.mh-bf-ready) .elementor-element-fca1422 {
    visibility: hidden;
}

body.mh-bf .elementor .elementor-element.elementor-element-f649fdc .elementor-heading-title,
body.mh-bf .elementor .elementor-element.elementor-element-fca1422 .wd-text-block {
    max-width: 664px;
}

body.mh-bf .elementor .elementor-element.elementor-element-fca1422 .wd-text-block {
    color: #e3e2e1;
}

body.mh-bf .mh-bf-accent {
    color: #fdd524;
}

body.mh-bf .elementor .elementor-element.elementor-element-fca1422 .mh-bf-accent {
    font-weight: 500;
}

@media (max-width: 1024px) {
    body.mh-bf .elementor .elementor-element.elementor-element-f649fdc .elementor-heading-title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1.44px;
    }
}

@media (max-width: 767px) {
    /* Mobile: the 16:9 video fills the top 40% of the hero and fades into black under the texts */
    body.mh-bf .elementor .elementor-element.elementor-element-89215a2 {
        background-color: #000;
        background-image: none;
    }

    body.mh-bf .elementor-element-89215a2 .elementor-background-video-container {
        bottom: auto;
        height: 40%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    body.mh-bf .elementor-element-89215a2 .elementor-background-video-container::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, #000 100%);
        pointer-events: none;
    }

    body.mh-bf .elementor-element-89215a2 .elementor-background-video-hosted {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        object-fit: cover;
        transform: none;
    }

    body.mh-bf .elementor .elementor-element.elementor-element-f649fdc .elementor-heading-title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -1.12px;
    }

    /* Mobile: one paragraph, as in the design */
    body.mh-bf .elementor .elementor-element.elementor-element-fca1422 br {
        display: none;
    }

    body.mh-bf .elementor .elementor-element.elementor-element-fca1422 .wd-text-block {
        font-size: 16px;
        letter-spacing: -0.32px;
    }

    body.mh-bf .elementor .elementor-element.elementor-element-fca1422 .mh-bf-accent {
        font-size: 18px;
        letter-spacing: -0.54px;
    }
}

/* =====================================================
   Shop / category pages
   ===================================================== */
.mh-bf-banner {
    position: relative;
    z-index: 5;
    width: 100vw;
    height: 320px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    background: #000;
}

.mh-bf-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}