/* Homepage carousels only; desktop spacing and controls retain their existing styles. */
@media (max-width: 767px) {
    .home-carousel-section {
        padding-block: 24px;
        overflow: hidden;
    }

    .home-carousel-heading {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .home-carousel-heading .fade-in-up {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .home-carousel-heading .section-label {
        margin-bottom: 4px;
    }

    .home-carousel-heading .section-title {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 0;
    }

    .home-carousel-heading .section-divider {
        display: none;
    }

    .home-carousel-actions {
        width: 100%;
        gap: 8px;
    }

    .home-carousel-actions > a {
        order: -1;
        margin-inline-end: auto;
        min-height: 44px;
        padding: 8px 14px;
        border: 1px solid #cbd5a0;
        border-radius: 12px;
        background: #f5f8e7;
        color: #455314;
        font-size: 13px;
    }

    .home-carousel-actions > button {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid #d9dfc6;
        background: #fff;
        color: #34411d;
        box-shadow: 0 2px 5px rgb(23 35 47 / 6%);
        transition: background-color 150ms, opacity 150ms;
    }

    .home-carousel-actions > .product-swiper-next,
    .home-carousel-actions > .news-swiper-next {
        background: #bed433;
        border-color: #bed433;
        color: #17232f;
    }

    /* In RTL, previous points right and next points left. */
    .home-carousel-actions > button svg {
        transform: rotate(180deg);
    }

    .home-carousel-actions > button:active {
        background: #dce8a3;
    }

    .home-carousel-actions > button:focus-visible,
    .home-carousel-actions > a:focus-visible {
        outline: 2px solid #52651a;
        outline-offset: 3px;
    }

    .home-carousel-actions > button.swiper-button-disabled {
        opacity: .35;
        box-shadow: none;
        cursor: default;
    }

    .home-carousel-actions > button.swiper-button-lock {
        display: none;
    }
}