/* =========================================================
   BINOISE — Shared Hero Slider
   Home + product brand landing pages use exactly the same engine.
   Desktop artwork: 2048x460
   Mobile artwork: 1360x760
   ========================================================= */

.binoise-hero {
    width: 100%;
    padding-top: 14px;
    background: #fff;
}

.binoise-hero__container {
    width: min(calc(100% - var(--bnoise-layout-inline-space, 56px)), var(--bnoise-layout-max, 1680px));
    margin-inline: auto;
}

.binoise-hero__shell {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.binoise-hero__swiper,
.binoise-hero__swiper .swiper-wrapper,
.binoise-hero__slide {
    width: 100%;
    min-height: 0;
}

.binoise-hero__swiper,
.binoise-hero__slide {
    aspect-ratio: 2048 / 460;
    height: auto !important;
}

.binoise-hero__swiper {
    overflow: hidden;
    border-radius: inherit;
    background: #eee;
}

.binoise-hero__link,
.binoise-hero__picture,
.binoise-hero__image {
    display: block;
    width: 100%;
    height: 100%;
}

.binoise-hero__picture {
    background: #eee;
}

.binoise-hero__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* A legacy brand cover is only a safe fallback until dedicated slides are added. */
.binoise-hero__slide.is-fallback .binoise-hero__picture {
    background: #f3f4f5;
}

.binoise-hero__slide.is-fallback .binoise-hero__image {
    object-fit: contain;
}

.binoise-hero__arrows {
    position: absolute;
    z-index: 12;
    inset-inline: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.binoise-hero__arrow {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(245, 246, 247, .72);
    color: #4c535d;
    box-shadow: 0 7px 22px rgba(18, 22, 28, .08);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    cursor: pointer;
    pointer-events: auto;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.binoise-hero__arrow img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

@media (hover: hover) {
    .binoise-hero__arrow:hover {
        transform: scale(1.05);
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 10px 28px rgba(18, 22, 28, .13);
    }
}

.binoise-hero__pagination.swiper-pagination {
    position: absolute;
    z-index: 12;
    bottom: 8px !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.binoise-hero__pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    opacity: 1;
    transition: width .22s ease, background .22s ease;
}

.binoise-hero__pagination .swiper-pagination-bullet-active {
    width: 30px;
    background: #ff641f;
}

/* On brand pages the breadcrumb owns the top breathing room. */
.binoise-hero--brand {
    padding-top: 0;
}

@media (min-width: 1024px) {
    .binoise-hero__arrows {
        inset-inline: 112px;
    }
}

@media (max-width: 1024px) {
    .binoise-hero__container {
        width: min(calc(100% - 32px), var(--bnoise-layout-max, 1680px));
    }

    .binoise-hero__arrows {
        inset-inline: 16px;
    }
}

@media (max-width: 768px) {
    .binoise-hero {
        padding-top: 10px;
    }

    .binoise-hero--brand {
        padding-top: 0;
    }

    .binoise-hero__container {
        width: calc(100% - 16px);
    }

    .binoise-hero__shell,
    .binoise-hero__swiper {
        border-radius: 12px;
    }

    .binoise-hero__swiper,
    .binoise-hero__slide {
        aspect-ratio: 1360 / 760;
    }

    .binoise-hero__image {
        object-fit: cover;
    }

    .binoise-hero__slide.is-fallback .binoise-hero__image {
        object-fit: contain;
    }

    .binoise-hero__arrows {
        inset-inline: 10px;
    }

    .binoise-hero__arrow {
        width: 24px;
        height: 24px;
    }

    .binoise-hero__arrow img {
        width: 16px;
        height: 16px;
    }

    .binoise-hero__pagination.swiper-pagination {
        bottom: 6px !important;
        gap: 9px;
    }

    .binoise-hero__pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }

    .binoise-hero__pagination .swiper-pagination-bullet-active {
        width: 28px;
        height: 7px;
    }
}