/* HVC Flatsome Full Width + Running Banners */

/* Global full width mode for Flatsome pages/shop/products */
body.hvc-ffb-global-fullwidth #main,
body.hvc-ffb-global-fullwidth .page-wrapper,
body.hvc-ffb-global-fullwidth .shop-container,
body.hvc-ffb-global-fullwidth .product-container,
body.hvc-ffb-global-fullwidth .category-page-row,
body.hvc-ffb-global-fullwidth .row-main,
body.hvc-ffb-global-fullwidth .container,
body.hvc-ffb-global-fullwidth .container-width,
body.hvc-ffb-global-fullwidth .full-width .ubermenu-nav,
body.hvc-ffb-global-fullwidth .row,
body.hvc-ffb-global-fullwidth .large-12.col,
body.hvc-ffb-global-fullwidth .col.large-12 {
    max-width: 100% !important;
    width: 100% !important;
}

body.hvc-ffb-global-fullwidth .container,
body.hvc-ffb-global-fullwidth .container-width,
body.hvc-ffb-global-fullwidth .page-wrapper,
body.hvc-ffb-global-fullwidth .shop-container,
body.hvc-ffb-global-fullwidth .product-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.hvc-ffb-global-fullwidth .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.hvc-ffb-global-fullwidth .col,
body.hvc-ffb-global-fullwidth .gallery-item,
body.hvc-ffb-global-fullwidth .columns {
    padding-left: 8px;
    padding-right: 8px;
}

/* Shortcode full browser width wrapper */
.hvc-ffb-fullwidth {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    clear: both;
}

.hvc-ffb-fullwidth-inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.hvc-ffb-fullwidth.has-inner-padding .hvc-ffb-fullwidth-inner {
    padding-left: 24px;
    padding-right: 24px;
}

.hvc-ffb-fullwidth.has-no-inner .hvc-ffb-fullwidth-inner {
    display: contents;
}

/* Running banner / marquee */
.hvc-ffb-marquee {
    --hvc-ffb-bg: #5b008f;
    --hvc-ffb-color: #ffffff;
    --hvc-ffb-height: 42px;
    --hvc-ffb-font-size: 15px;
    --hvc-ffb-font-weight: 800;
    --hvc-ffb-speed: 26s;
    --hvc-ffb-gap: 90px;

    width: 100%;
    height: var(--hvc-ffb-height);
    min-height: var(--hvc-ffb-height);
    background: var(--hvc-ffb-bg);
    color: var(--hvc-ffb-color);
    overflow: hidden;
    display: flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    box-shadow: none;
    isolation: isolate;
}

.hvc-ffb-marquee.is-full-width {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hvc-ffb-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    min-width: max-content;
    animation: hvcFFBMarqueeMove var(--hvc-ffb-speed) linear infinite;
    will-change: transform;
}

.hvc-ffb-marquee.is-reverse .hvc-ffb-marquee-track {
    animation-direction: reverse;
}

.hvc-ffb-marquee.pause-on-hover:hover .hvc-ffb-marquee-track {
    animation-play-state: paused;
}

.hvc-ffb-marquee-set {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--hvc-ffb-gap);
    padding-right: var(--hvc-ffb-gap);
    min-width: max-content;
}

.hvc-ffb-marquee-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hvc-ffb-color) !important;
    font-size: var(--hvc-ffb-font-size);
    font-weight: var(--hvc-ffb-font-weight);
    line-height: 1;
    letter-spacing: -0.2px;
    text-decoration: none !important;
}

@keyframes hvcFFBMarqueeMove {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 849px) {
    body.hvc-ffb-global-fullwidth .col,
    body.hvc-ffb-global-fullwidth .gallery-item,
    body.hvc-ffb-global-fullwidth .columns {
        padding-left: 6px;
        padding-right: 6px;
    }

    .hvc-ffb-marquee {
        --hvc-ffb-height: 38px;
        --hvc-ffb-font-size: 13px;
        --hvc-ffb-gap: 58px;
    }

    .hvc-ffb-fullwidth.has-inner-padding .hvc-ffb-fullwidth-inner {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hvc-ffb-marquee-track {
        animation-duration: 80s;
    }
}


/* v1.2.1: shortcode helpers to turn full width off again */
body.hvc-ffb-fullwidth-disabled:not(.hvc-ffb-global-fullwidth) .hvc-ffb-marquee.is-full-width,
body.hvc-ffb-keep-banners-fullwidth .hvc-ffb-marquee.is-full-width {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hvc-ffb-normal-width {
    width: 100%;
    max-width: var(--hvc-ffb-normal-width, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding: var(--hvc-ffb-normal-padding, 0 15px);
    clear: both;
}


/* v1.2.3: seamless continuous text loop */
.hvc-ffb-marquee-track {
    transform: translate3d(0, 0, 0);
}

.hvc-ffb-marquee-set + .hvc-ffb-marquee-set {
    margin-left: 0;
}


/* v1.2.4: speed can be set up to 300s and the marquee loop is forced to stay infinite */
.hvc-ffb-marquee .hvc-ffb-marquee-track {
    animation-name: hvcFFBMarqueeMove !important;
    animation-duration: var(--hvc-ffb-speed) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}


/* v1.2.7: mobile full-width + center fix */
@media (max-width: 849px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    /* Every banner shortcode stays true browser-width on mobile, even inside Flatsome rows/columns. */
    .hvc-ffb-marquee,
    .hvc-ffb-marquee.is-full-width,
    body.hvc-ffb-fullwidth-disabled:not(.hvc-ffb-global-fullwidth) .hvc-ffb-marquee.is-full-width,
    body.hvc-ffb-keep-banners-fullwidth .hvc-ffb-marquee.is-full-width {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: auto !important;
        margin-left: -50vw !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .hvc-ffb-marquee-track,
    .hvc-ffb-marquee-set,
    .hvc-ffb-marquee-item {
        align-items: center !important;
    }

    .hvc-ffb-marquee-item {
        justify-content: center !important;
        text-align: center !important;
        min-height: var(--hvc-ffb-height) !important;
    }

    /* Make shortcode wrapper sections full-width and keep their content centered on phones. */
    .hvc-ffb-fullwidth {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        left: 50% !important;
        right: auto !important;
        margin-left: -50vw !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
        text-align: center !important;
    }

    .hvc-ffb-fullwidth-inner,
    .hvc-ffb-normal-width {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hvc-ffb-fullwidth-inner > *,
    .hvc-ffb-normal-width > * {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Flatsome mobile rows/columns used with this plugin stay centered instead of sticking left. */
    body.hvc-ffb-global-fullwidth .row,
    body.hvc-ffb-global-fullwidth .row-small,
    body.hvc-ffb-global-fullwidth .row-large,
    body.hvc-ffb-global-fullwidth .section-content,
    body.hvc-ffb-global-fullwidth .col,
    body.hvc-ffb-global-fullwidth .columns,
    body.hvc-ffb-global-fullwidth .large-12.col,
    body.hvc-ffb-global-fullwidth .col.large-12 {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        justify-content: center !important;
    }
}


/* v1.2.8: hard mobile viewport alignment and centering fix */
@media (max-width: 849px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Hard reset for Flatsome rows that can push banners left/right on phones. */
    body.hvc-ffb-global-fullwidth .row,
    body.hvc-ffb-global-fullwidth .row-small,
    body.hvc-ffb-global-fullwidth .row-large,
    body.hvc-ffb-global-fullwidth .section-content,
    body.hvc-ffb-global-fullwidth .container,
    body.hvc-ffb-global-fullwidth .container-width,
    body.hvc-ffb-global-fullwidth .page-wrapper,
    body.hvc-ffb-global-fullwidth .shop-container,
    body.hvc-ffb-global-fullwidth .product-container {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

    body.hvc-ffb-global-fullwidth .row,
    body.hvc-ffb-global-fullwidth .row-small,
    body.hvc-ffb-global-fullwidth .row-large {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
    }

    body.hvc-ffb-global-fullwidth .col,
    body.hvc-ffb-global-fullwidth .columns,
    body.hvc-ffb-global-fullwidth .large-12.col,
    body.hvc-ffb-global-fullwidth .col.large-12 {
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    /* The JS sets exact viewport width + offset; these rules keep the fallback centered too. */
    .hvc-ffb-marquee,
    .hvc-ffb-marquee.is-full-width {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .hvc-ffb-marquee-track {
        align-items: center !important;
        text-align: center !important;
    }

    .hvc-ffb-marquee-set {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .hvc-ffb-marquee-item {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Center common Flatsome product/category content inside full-width sections on mobile. */
    body.hvc-ffb-global-fullwidth .product-small,
    body.hvc-ffb-global-fullwidth .product-category,
    body.hvc-ffb-global-fullwidth .box,
    body.hvc-ffb-global-fullwidth .box-text,
    body.hvc-ffb-global-fullwidth .price-wrapper,
    body.hvc-ffb-global-fullwidth .star-rating,
    .hvc-ffb-fullwidth .product-small,
    .hvc-ffb-fullwidth .product-category,
    .hvc-ffb-fullwidth .box,
    .hvc-ffb-fullwidth .box-text,
    .hvc-ffb-fullwidth .price-wrapper,
    .hvc-ffb-fullwidth .star-rating {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    body.hvc-ffb-global-fullwidth .box-image,
    body.hvc-ffb-global-fullwidth .box-image img,
    .hvc-ffb-fullwidth .box-image,
    .hvc-ffb-fullwidth .box-image img {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}