/* SECTION-BRANDS-CAROUSEL */
.brands-carousel-block {
    text-align: center;
    padding-top: 64px;
    padding-bottom: 40px;
    background: #fdfdfd;

    .brands-carousel__head {
        margin-bottom: 40px;
        display: flex;
        flex-direction: column;
        row-gap: 16px;
        width: 100%;
    }

    .title-section-Demo {
        font-family: "Demo";
        font-size: 48px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.21;
        letter-spacing: normal;
        color: #002c45;
        margin-bottom: 0;
    }

    .section-desc {
        font-family: "Inter";
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.39;
        letter-spacing: normal;
        color: var(--dark-blue);
        margin-bottom: 0;
    }

    /* --- carousel shell (mirrors .section-used-with.can-be-used-block) --- */

    .brands-carousel-swiper-wrap {
        position: relative;
        width: 100%;

        /* The arrows are shared - see assets/css/carousel-arrows.css. They span this
           wrap, whose height includes the 40px padding-bottom that .swiper carries to
           keep the card box-shadow from being clipped. Left at 100% the glyph would
           sit 20px below the slides, so tell the shared rule how tall the track
           actually is. This is the documented per-block hook, not a nudge. */
        --icl-arrow-align: calc(100% - 40px);
    }

    /* position:static lets the absolutely positioned arrows escape to the wrap edges */
    .swiper {
        position: static;
        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 40px;
        padding-top: 0;
    }

    .swiper-slide {
        opacity: 1;
        height: auto !important;
    }

    /* Owned explicitly: can-be-used-block prints an unscoped
       `.swiper-wrapper { justify-content: center }` when a crop has exactly one
       recommended product, which would otherwise centre this wrapper too. */
    .swiper-wrapper {
        justify-content: flex-start;
        align-items: stretch;
    }

    /* --- card (mirrors .swiper-slide-custom + .item-slider-products) --- */

    .swiper-slide-custom {
        border-radius: 5px;
        box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.08);
        background-color: #fff;
        /* flex so the card fills the stretched slide and the "Brand details" link
           stays pinned to the bottom, aligned across cards of unequal text length */
        display: flex;
    }

    .brands-carousel__card {
        padding: 40px 32px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        flex: 1 1 auto;
        text-align: left;
    }

    /* Logos are normalized by HEIGHT: the source images carry their own top/bottom
       padding, so a fixed-height box with `height:100%; width:auto` renders a short
       logo and a long wordmark at the same optical size. */
    .brands-carousel__logo-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
        width: 100%;
        height: 56px;
        overflow: hidden;
    }

    .brands-carousel__logo-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
        max-width: 100%;
    }

    .brands-carousel__logo {
        height: 100%;
        width: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: left center;
    }

    .brands-carousel__logo-fallback {
        font-family: Inter;
        font-size: 24px;
        font-weight: bold;
        line-height: 1.33;
        color: #002b46;
    }

    .brands-carousel__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin: 0;
        padding: 10px 0;
    }

    .brands-carousel__intro {
        font-family: Inter;
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.56;
        letter-spacing: normal;
        text-align: left;
        color: #002c45;
        display: -webkit-box;
        word-break: break-word;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
        min-height: calc(3 * 1.56em);
        max-height: calc(3 * 1.56em);
        height: calc(3 * 1.56em);
        width: 100%;
    }

    .brands-carousel__link {
        font-size: 18px;
        text-decoration: underline;
        font-family: Inter;
        color: #00B5D3;
        margin-top: 8px;
    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* --- mobile --- */

    @media (max-width: 991px) {
        padding-top: 40px;
        text-align: unset;

        .brands-carousel__head {
            margin-bottom: 24px;
            gap: 8px;
        }

        .title-section-Demo {
            font-size: 28px;
            text-align: left;
            background-color: unset !important;
            margin-bottom: 0;
        }

        .section-desc {
            margin-bottom: 0;
            line-height: 1.55;
            text-align: left;
        }

        .wrap-items-mobile {
            flex-wrap: nowrap;
            flex-direction: row;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            --bs-gutter-x: 20px;
            margin-right: -20px;
            margin-left: -20px;
            padding-right: 10px;
            padding-left: 10px;
            scroll-snap-type: x mandatory;
            /* scroll-snap aligns a card's edge to the scrollport edge, which would
               swallow the 10px padding above and leave the first card 10px left of
               the title. scroll-padding keeps the snap inside that inset, so the card
               lines up with .brands-carousel__head. */
            scroll-padding-left: 10px;
            scroll-padding-right: 10px;
        }

        .wrap-items-mobile::-webkit-scrollbar {
            display: none;
        }

        .wrap-card-mobile {
            scroll-snap-align: start;
            margin-bottom: 40px;
        }

        .wrap-card-mobile .brands-carousel__card {
            padding: 46px 26px;
            border-radius: 5px;
            box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
            background-color: #fff;
            margin: 0 0;
            min-height: 260px;
        }

        .brands-carousel__body {
            padding: 0;
        }

        .brands-carousel__intro {
            font-size: 16px;
        }

        .brands-carousel__link {
            display: block;
            margin-top: 8px !important;
            text-decoration: underline;
            color: #00B5D3;
            line-height: 1.44;
            font-size: 16px;
        }
    }
}

/*    SECTION-BRANDS-CAROUSEL END  */