.hero-slider {
    background-color: var(--color-red);
    overflow: hidden;
    position: relative;
    margin-bottom: 28px;
}

/* Header is ALWAYS absolute inside the sticky wrap on pages with hero-slider.
   Wrap reserves default header height (146px = 54 info bar + 92 header) so toggling
   .hero-slider-visible only changes height/bg/logo — smooth CSS transitions, zero layout shift. */
body.has-hero-slider .site-header-wrap {
    height: 146px;
}

body.has-hero-slider .site-header {
    position: absolute;
    top: 54px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    transition: background-color 0.3s ease, height 0.3s ease;
}

body.has-hero-slider .site-header__logo-img {
    transition: height 0.3s ease;
}

/* Pull hero up under the reserved header space so it starts visually at info-bar bottom */
body.has-hero-slider .hero-slider {
    margin-top: -92px;
}

/* Hero logo hidden by default (only shown when hero section is visible in viewport) */
body.has-hero-slider .site-header__logo-img--hero {
    display: none;
}

/* When hero is visible in viewport: taller red header + large logo (position unchanged) */
body.hero-slider-visible .site-header {
    background-color: var(--color-red);
    height: 150px;
}

.slide-menu,
.account-menu {
    transition: top 0.3s ease, height 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body.hero-slider-visible #slideMenu,
body.hero-slider-visible #accountMenu {
    background-color: var(--color-white);
}

body.hero-slider-visible .slide-menu,
body.hero-slider-visible .account-menu {
    top: 204px;
    height: calc(100dvh - 204px);
}

/* Search panel sits right below the header — follow the taller red-hero header */
body.has-hero-slider .search-panel {
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, top 0.3s ease;
}

body.hero-slider-visible .search-panel {
    top: 203px;
}

body.hero-slider-visible .site-header__cart-badge {
    background-color: var(--color-white);
    color: var(--color-red);
}

/* Slide/account menu open while hero visible: header matches the white menu panel */
body.hero-slider-visible.menu-open .site-header {
    background-color: var(--color-white);
}

body.hero-slider-visible.menu-open .site-header__cart-badge {
    background-color: var(--color-red);
    color: var(--color-white);
}

body.hero-slider-visible .site-header__logo-img--hero {
    display: block;
    height: 117px;
    transform: translateX(2.08%);
}

body.hero-slider-visible .site-header__logo-img--main {
    display: none;
}

.hero-slider__swiper {
    width: 100%;
    height: 720px;
}

.hero-slider__slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slider__inner {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 50px;
}

.hero-slider__title {
    position: absolute;
    left: 50px;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-family: var(--font-decorative);
    font-weight: 400;
    font-size: clamp(120px, 19.44vw, 280px);
    line-height: 1;
    color: var(--color-white);
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: clamp(5px, 0.83vw, 12px) clamp(6px, 0.97vw, 14px) 0 rgba(0, 0, 0, 0.35);
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 1;
}

/* Static overlay: holds the image outside the moving swiper-wrapper, same inner box
   as slides so .hero-slider__image positioning stays identical. Above slides, below pagination. */
.hero-slider__static {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero-slider__image {
    position: absolute;
    right: 14.18%;
    bottom: 6.46%;
    width: 19.94%;
    max-width: 290px;
    z-index: 2;
    pointer-events: none;
}

.hero-slider__image img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-slider__description {
    position: absolute;
    left: 50px;
    right: 50px;
    bottom: 134px;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--color-white);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
    z-index: 3;
}

.hero-slider__description p {
    margin: 0;
}

.hero-slider__btn {
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-decorative);
    font-size: 20px;
    padding: 12px 0;
    border-radius: 50px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.17);
    transition: background-color var(--transition);
    z-index: 4;
}

.hero-slider__btn:hover {
    opacity: 1;
}

.hero-slider .hero-slider__swiper .hero-slider__pagination {
    position: absolute;
    left: max(50px, calc((100% - 1440px) / 2 + 50px));
    bottom: 40px;
    display: flex;
    gap: 10px;
    z-index: 4;
    width: auto;
}

.hero-slider__pagination .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    background-color: var(--color-black);
    opacity: 1;
    border-radius: 50%;
    margin: 0;
    transition: background-color var(--transition);
    cursor: pointer;
}

.hero-slider__pagination .swiper-pagination-bullet-active {
    background-color: var(--color-white);
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hero-slider__image {
        right: 5%;
        width: 15%;
        max-width: 140px;
    }
}

@media (max-width: 768px) {
    /* Mobile wrap: 32 info bar + 81 header = 113px */
    body.has-hero-slider .site-header-wrap {
        height: 113px;
    }

    body.has-hero-slider .site-header {
        top: 32px;
    }

    body.has-hero-slider .hero-slider {
        margin-top: -81px;
    }

    body.hero-slider-visible .site-header {
        height: 96px;
    }

    body.hero-slider-visible .site-header__logo-img--hero {
        height: 77px;
    }

    body.hero-slider-visible .slide-menu,
    body.hero-slider-visible .account-menu {
        top: 128px;
        height: calc(100dvh - 128px);
    }

    body.hero-slider-visible .search-panel {
        top: 127px;
    }

    .hero-slider__swiper {
        height: 484px;
    }

    .hero-slider__inner {
        padding: 0 20px;
    }

    .hero-slider__title {
        left: 20px;
        right: 20px;
        top: 115px;
        transform: none;
        font-size: 71px;
        text-align: center;
        white-space: normal;
        text-shadow: 4px 5px 0 rgba(0, 0, 0, 0.35);
        padding: 0;
    }

    .hero-slider__image {
        left: 50%;
        right: auto;
        bottom: 14%;
        width: 120px;
        max-width: 120px;
        transform: translateX(-50%);
    }

    .hero-slider__description {
        left: 20px;
        right: 20px;
        top: 205px;
        bottom: auto;
        max-width: 320px;
        font-size: 14px;
        line-height: 1.35;
        text-shadow: 1.5px 1.5px 0 rgba(0, 0, 0, 0.25);
    }

    .hero-slider__btn {
        bottom: 20px;
        width: 205px;
        font-size: 20px;
        padding: 12px 0;
    }

    .hero-slider .hero-slider__swiper .hero-slider__pagination {
        display: none;
    }
}