/* ============================================================
   HERO.CSS
   ============================================================ */

/* ── Suppress spacer ── */
.spacer {
    display: none;
}

/* ── Break the hero out of ALL iPOS container constraints ── */
.hero {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    min-height: 560px;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Also reset any iPOS parent that wraps the hero */
.container:has(.hero),
.container_row:has(.hero),
.container_cell:has(.hero) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Background image layer */
.hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
}

    .hero__bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient( to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.25) 100% );
    }

/* Text content */
.hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 24px;
    max-width: 900px;
    width: 100%;
}

.hero__title {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 700;
    line-height: 1.0;
    color: #fff;
    margin-bottom: 16px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero__text {
    font-size: clamp(13px, 2vw, 16px);
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ============================================================
   NAV — transparent on top, white on scroll / menu open
   ============================================================ */
.nav,
.navigation-wrap {
    transition: background-color 300ms ease !important;
}

    /* Transparent */
    .nav.nav--top,
    .nav.nav--top .navigation-wrap {
        background-color: transparent !important;
        border-bottom-color: transparent !important;
        box-shadow: none !important;
    }

        .nav.nav--top .logo-image,
        .nav.nav--top .search,
        .nav.nav--top .image-4,
        .nav.nav--top .image-5,
        .nav.nav--top .icon_wishlist {
            filter: brightness(0) invert(1) !important;
        }

        .nav.nav--top .navigation-item,
        .nav.nav--top .dropdown-toggle,
        .nav.nav--top .dropdown-toggle-2 {
            color: #fff !important;
            opacity: 0.9 !important;
        }

    /* Scrolled / menu open */
    .nav.nav--scrolled,
    .nav.nav--scrolled .navigation-wrap {
        background-color: #fff !important;
        border-bottom-color: #e8e8e8 !important;
    }

        .nav.nav--scrolled .logo-image,
        .nav.nav--scrolled .search,
        .nav.nav--scrolled .image-4,
        .nav.nav--scrolled .image-5,
        .nav.nav--scrolled .icon_wishlist {
            filter: none !important;
        }

        .nav.nav--scrolled .navigation-item,
        .nav.nav--scrolled .dropdown-toggle,
        .nav.nav--scrolled .dropdown-toggle-2 {
            color: #43464d !important;
            opacity: 0.6 !important;
        }

.mega-menu {
    background-color: #fff !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 767px) {
    .hero {
        height: 80vh !important;
        min-height: 400px;
    }
}

@media screen and (max-width: 479px) {
    .hero {
        height: 70vh !important;
        min-height: 340px;
    }
}