:root {
        --spacing: 3px;
    }

    /* Shared */
    .homepage-occasions {
        position: relative;
    }

    .homepage-occasions .homepage-occasions-container {
        display: flex;
        gap: var(--spacing);
        width: 100%;
    }

    .homepage-occasions .occasions-scroll-container_carousel {
        position: relative;
        width: 100% !important;
        white-space: nowrap;
        cursor: pointer;
        scroll-behavior: smooth;
        scrollbar-width: none;
        /* Hide scrollbar on Firefox */
        -ms-overflow-style: none;
        /* Hide scrollbar on IR & Edge */
    }

    /* Shared -- hide horizontal scrollbar on chrome */
    .homepage-occasions .occasions-scroll-container_carousel::-webkit-scrollbar {
        display: none;
    }

    /* Shared -- Image loading to reduce CLS */
    .homepage-occasions-banner>a,
    .homepage-occasions-banner picture,
    .homepage-occasions-banner img {
        display: block;
    }

    .homepage-occasions-banner picture {
        height: auto;
        aspect-ratio: 600 / 800;
    }

    .homepage-occasions-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }



    /* Shared -- Font Sizes */
    .homepage-occasions h2.homepage-occasions-header {
        font-size: 24px;
        width: 100%;
        padding: 0 30px;
        margin-bottom: 12px;
    }

    .homepage-occasions .homepage-occasions-text-block {
        margin-top: 5px;
    }

    .homepage-occasions p.homepage-occasions-text {
        text-transform: uppercase;
        font-size: 16px;
        text-align: center;
        text-decoration: none;
    }



    /* Shared -- buttons */
    .homepage-occasions .recommendations_wide-controls {
        position: absolute;
    }

    .homepage-occasions .C_swiper_button-prev_custom {
        left: 0px;
    }

    .homepage-occasions .C_swiper_button-next_custom {
        right: 0px;
    }

    .homepage-occasions .C_recommendations_wide-btn {
        width: 50%;
        text-align: center;
    }

    .homepage-occasions .C_swiper_button-next_custom,
    .homepage-occasions .C_swiper_button-prev_custom {
        position: absolute;
        text-align: center;
        cursor: pointer;

        height: 100%;

        pointer-events: auto;
    }




    /* Ver 1: Carousel Everywhere */
    .homepage-occasions.carousel .occasions-scroll-container_carousel {
        overflow-x: scroll;
        cursor: pointer;
    }

    .homepage-occasions.carousel .homepage-occasions-banner {
        min-width: calc((100% / 4.5) - var(--spacing)) !important;

    }

    .homepage-occasions.carousel .homepage-occasions-container.occasions-scroll-container_carousel .homepage-occasions-banner {
        flex: 0 0 auto;
        max-width: 20%;
        aspect-ratio: auto;
    }

    .homepage-occasions.carousel .recommendations_wide-controls {
        display: flex !important;
        right: 25px;
    }


    /* Ver 2: static desktop/tablet, carousel mobile */
    .homepage-occasions.static .occasions-scroll-container_carousel {
        overflow-x: hidden;
        cursor: default;
    }

    .homepage-occasions.static {
        --banners-per-row: 3;
    }

    .homepage-occasions.static .homepage-occasions-banner {
        /* Change "3" to any number of banners to be shown in full width row */
        min-width: calc((100% / var(--banners-per-row, 3)) - var(--spacing));
    }

    .homepage-occasions.static .recommendations_wide-controls {
        display: none;
    }




    /* media queries */
    @media only screen and (max-width: 1023px) {
        .homepage-occasions.carousel h2.homepage-occasions-header {
            font-size: 18px;
            margin-bottom: 8px;
        }

        .homepage-occasions.carousel .homepage-occasions-container.occasions-scroll-container_carousel .homepage-occasions-banner {
            max-width: 40%;
        }
    }

    @media only screen and (max-width: 767px) {

        .homepage-occasions-banner picture {
            aspect-ratio: 390 / 520;
        }

        .homepage-occasions h2.homepage-occasions-header {
            padding: 0 15px;
        }


        .homepage-occasions.carousel .homepage-occasions-container.occasions-scroll-container_carousel .homepage-occasions-banner {
            flex: 0 0 65%;
            max-width: 65%;
            width: 65%;
        }

        /* mobile: both versions behave as carousel */
        .homepage-occasions.carousel .homepage-occasions-banner,
        .homepage-occasions.static .homepage-occasions-banner {
            flex: 0 0 65%;
            min-width: 65%;
            max-width: 65%;
            width: 65%;
        }

        .homepage-occasions.carousel .occasions-scroll-container_carousel,
        .homepage-occasions.static .occasions-scroll-container_carousel {
            overflow-x: scroll;
            cursor: pointer;
        }

        .homepage-occasions.carousel .recommendations_wide-controls,
        .homepage-occasions.static .recommendations_wide-controls {
            display: flex !important;
            right: 0;
        }
    }