/* Product and benefit carousel controls. */
body.template-home .home-products-carousel {
    position: relative;
    min-width: 0;
}

body.template-home .home-products-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 40px;
    margin-top: 10px;
}

body.template-home .home-products-carousel__controls[hidden] {
    display: none !important;
}

body.template-home .home-products-carousel__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 0;
    border: 1px solid #efbad4;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(217, 2, 109, 0.12);
    color: #D9026D;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

body.template-home .home-products-carousel__arrow:hover,
body.template-home .home-products-carousel__arrow:focus-visible {
    background-color: #D9026D;
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

body.template-home .home-products-carousel__arrow:disabled {
    cursor: default;
    opacity: 0.35;
    transform: none;
}

body.template-home .home-products-carousel__arrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.template-home .home-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 22px;
}

body.template-home .home-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: #efbad4;
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
}

body.template-home .home-carousel-dot.is-active {
    width: 22px;
    background-color: #D9026D;
}

body.template-home .home-benefits-carousel .home-carousel-dot {
    background-color: rgba(255, 255, 255, 0.48);
}

body.template-home .home-benefits-carousel .home-carousel-dot.is-active {
    background-color: #F2B705;
}

body.template-home .home-benefits-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 30px);
    align-items: center;
}

@media (max-width: 992px) {
    body.template-home .home-benefits-track {
        gap: 40px 20px;
    }
}

@media (max-width: 767px) {
    body.template-home .home-products-grid {
        gap: 10px;
        margin-right: 0;
        margin-left: 0;
        padding: 4px 0 12px;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
    }

    body.template-home .home-products-grid > .item-product,
    body.template-home .home-products-grid > .js-item-product {
        flex: 0 0 calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
        min-width: 0;
    }

    body.template-home .home-products-carousel__controls {
        margin-top: 6px;
    }

    body.template-home .home-benefits-track {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.template-home .home-benefits-track::-webkit-scrollbar {
        display: none;
    }

    body.template-home .home-benefits-track > .benefit-item {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        scroll-snap-align: start;
    }

    body.template-home .home-benefits-carousel .benefits-dots {
        display: flex;
    }
}