img,
video {
    max-width: 100%;
    height: auto;
}

* {
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .contact-page-shell,
    .sb-login-page,
    .register-page {
        grid-template-columns: 1fr !important;
    }

    .sb-login-right,
    .register-right {
        display: none !important;
    }

    .contact-form-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .header-shell {
        padding: 16px 20px !important;
    }

    .main-nav {
        display: none !important;
    }

    .contact-form-panel,
    .register-box,
    .sb-login-box {
        padding: 32px 22px !important;
    }

    .contact-submit,
    .register-button,
    .sb-login-button {
        width: 100% !important;
        min-width: 0 !important;
    }

    input,
    textarea,
    select {
        font-size: 16px !important;
    }
    @media (max-width: 768px) {
        .header-shell {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            padding: 18px 20px !important;
            z-index: 50 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 14px !important;
            background: transparent !important;
        }

        .header-top-row,
        .header-main-row,
        .header-icons,
        .header-actions {
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .brand-logo,
        .site-logo,
        .header-logo {
            font-size: 30px !important;
            line-height: 1.1 !important;
            text-align: center !important;
            white-space: nowrap !important;
        }

        .main-nav {
            display: flex !important;
            justify-content: center !important;
            gap: 18px !important;
            flex-wrap: wrap !important;
            font-size: 11px !important;
            letter-spacing: 0.16em !important;
        }

        .header-icon-row {
            display: flex !important;
            justify-content: center !important;
            gap: 18px !important;
        }

        .hero,
        .hero-media,
        .hero video,
        #heroVideo {
            height: 100vh !important;
            min-height: 560px !important;
            object-fit: cover !important;
        }
    }
    @media (max-width: 768px) {
        .header-shell {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            z-index: 1000 !important;
            background: transparent !important;
        }

        .site-header,
        .lux-header {
            width: 100% !important;
        }

        .header-row {
            display: grid !important;
            grid-template-columns: 1fr !important;
            justify-items: center !important;
            gap: 12px !important;
            padding: 28px 18px 0 !important;
        }

        .header-left,
        .header-right {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 18px !important;
            width: 100% !important;
        }

        .logo {
            font-size: 31px !important;
            line-height: 1.1 !important;
            text-align: center !important;
            white-space: nowrap !important;
            order: 1 !important;
        }

        .header-left {
            order: 0 !important;
        }

        .header-right {
            order: 2 !important;
        }

        .icon-link,
        .search-wrap {
            width: 22px !important;
            height: 22px !important;
        }

        .icon-link svg,
        .search-wrap svg {
            width: 22px !important;
            height: 22px !important;
        }

        .main-nav {
            display: flex !important;
            justify-content: center !important;
            flex-wrap: wrap !important;
            gap: 10px 18px !important;
            padding: 18px 20px 0 !important;
            width: 100% !important;
        }

        .main-nav a {
            font-size: 11px !important;
            letter-spacing: 0.14em !important;
            line-height: 1.4 !important;
        }

        .account-user-label {
            display: none !important;
        }

        .hero,
        .hero-media {
            height: 100vh !important;
            min-height: 667px !important;
        }

        #heroVideo {
            width: 100% !important;
            height: 100vh !important;
            min-height: 667px !important;
            object-fit: cover !important;
        }
    }
    /* =========================
   CLEAN MOBILE HEADER FIX
========================= */

    @media (max-width: 768px) {
        .header-shell {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            z-index: 9999 !important;
            background: linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0.45),
                    rgba(0, 0, 0, 0.18),
                    transparent
            ) !important;
            padding: 22px 18px 18px !important;
        }

        .site-header,
        .lux-header {
            width: 100% !important;
        }

        .header-row {
            display: grid !important;
            grid-template-columns: 1fr !important;
            justify-items: center !important;
            align-items: center !important;
            gap: 12px !important;
            padding: 0 !important;
        }

        .logo {
            order: 1 !important;
            font-size: 30px !important;
            line-height: 1 !important;
            color: #ffffff !important;
            text-align: center !important;
            white-space: nowrap !important;
            margin: 0 !important;
        }

        .header-left {
            order: 0 !important;
            display: flex !important;
            justify-content: center !important;
            gap: 22px !important;
            width: 100% !important;
        }

        .header-right {
            order: 2 !important;
            display: flex !important;
            justify-content: center !important;
            gap: 22px !important;
            width: 100% !important;
            margin-top: 2px !important;
        }

        .icon-link,
        .search-wrap {
            width: 22px !important;
            height: 22px !important;
            color: #ffffff !important;
        }

        .icon-link svg,
        .search-wrap svg {
            width: 22px !important;
            height: 22px !important;
            stroke: #ffffff !important;
        }

        .count-badge {
            top: -8px !important;
            right: -8px !important;
            width: 15px !important;
            height: 15px !important;
            font-size: 9px !important;
        }

        .account-user-label {
            display: none !important;
        }

        @media (max-width: 768px) {
            .main-nav {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                flex-wrap: nowrap !important;
                gap: 14px !important;
                width: 100% !important;
                margin-top: 14px !important;
                padding: 0 6px 14px !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
                white-space: nowrap !important;
            }

            .main-nav a {
                color: #ffffff !important;
                font-size: 10px !important;
                font-weight: 600 !important;
                letter-spacing: 0.12em !important;
                line-height: 1.4 !important;
                text-transform: uppercase !important;
            }
        }
        .hero {
            height: 100vh !important;
            min-height: 667px !important;
            overflow: hidden !important;
        }

        .hero-media,
        #heroVideo {
            width: 100% !important;
            height: 100vh !important;
            min-height: 667px !important;
            object-fit: cover !important;
        }
    }

}