/* Hair Extension Saloon – Header Luxury Compact V4
   Fixes:
   - Removes top free shipping strip
   - Replaces large mobile pill header with compact floating luxury controls
*/

:root{
    --hes-v4-gold:#d4a77f;
    --hes-v4-gold-soft:#f1c9a5;
    --hes-v4-dark:#070504;
    --hes-v4-cream:#fff7ef;
}

/* 1) Remove the shipping strip on web and mobile */
.top-strip{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
    visibility:hidden !important;
}

/* Desktop: keep the black luxury navigation clean at very top */
@media (min-width:821px){
    .main-header{
        top:0 !important;
        border-top:0 !important;
    }
}

/* 2) Mobile: remove the wide pill that covers the hero model */
@media (max-width:820px){
    .main-header{
        position:absolute !important;
        top:14px !important;
        left:18px !important;
        right:18px !important;
        width:auto !important;
        height:58px !important;
        min-height:58px !important;
        max-height:58px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        grid-template-columns:none !important;
        gap:0 !important;

        padding:0 !important;
        margin:0 !important;

        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        overflow:visible !important;
        z-index:110 !important;

        pointer-events:none !important;
    }

    .main-header .brand,
    .main-header .mobile-menu-toggle{
        pointer-events:auto !important;
    }

    .main-header .brand{
        width:56px !important;
        height:56px !important;
        min-width:56px !important;
        max-width:56px !important;

        display:grid !important;
        place-items:center !important;

        padding:4px !important;
        margin:0 !important;
        gap:0 !important;

        border-radius:50% !important;
        border:1px solid rgba(212,167,127,.42) !important;
        background:rgba(7,5,4,.48) !important;
        box-shadow:
            0 12px 30px rgba(0,0,0,.22),
            inset 0 0 0 1px rgba(255,255,255,.05) !important;

        backdrop-filter:blur(14px) saturate(1.1) !important;
        -webkit-backdrop-filter:blur(14px) saturate(1.1) !important;
        overflow:hidden !important;
    }

    .main-header .brand img{
        width:48px !important;
        height:48px !important;
        min-width:48px !important;
        max-width:48px !important;
        min-height:48px !important;
        max-height:48px !important;

        display:block !important;
        object-fit:contain !important;
        border-radius:50% !important;
        background:#050505 !important;
        box-shadow:none !important;
    }

    .main-header .brand span{
        display:none !important;
    }

    .main-header .desktop-nav,
    .main-header .appointment-btn{
        display:none !important;
    }

    .main-header .mobile-menu-toggle{
        width:56px !important;
        height:56px !important;
        min-width:56px !important;
        max-width:56px !important;
        min-height:56px !important;
        max-height:56px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        padding:0 !important;
        margin:0 !important;

        border-radius:50% !important;
        border:1px solid rgba(212,167,127,.44) !important;
        background:
            radial-gradient(circle at 35% 20%, rgba(241,201,165,.20), transparent 38%),
            rgba(25,12,7,.64) !important;

        box-shadow:
            0 14px 34px rgba(0,0,0,.26),
            inset 0 0 0 1px rgba(255,255,255,.05) !important;

        backdrop-filter:blur(14px) saturate(1.15) !important;
        -webkit-backdrop-filter:blur(14px) saturate(1.15) !important;

        overflow:hidden !important;
        transform:none !important;
    }

    .main-header .mobile-menu-toggle span{
        display:block !important;
        position:relative !important;

        width:23px !important;
        height:2px !important;
        min-height:2px !important;
        max-height:2px !important;

        margin:0 !important;
        padding:0 !important;

        border-radius:999px !important;
        background:var(--hes-v4-cream) !important;
        box-shadow:0 0 8px rgba(255,247,239,.18) !important;

        transform:none !important;
        opacity:1 !important;
    }

    .main-header .mobile-menu-toggle span:nth-child(2){
        width:27px !important;
    }

    /* Keep hero image visible under floating controls */
    .hero{
        padding-top:0 !important;
    }

    .hero__content{
        position:relative !important;
        z-index:4 !important;
    }

    /* Mobile menu panel remains luxury but not oversized */
    .mobile-menu{
        background:
            radial-gradient(circle at 18% 0%, rgba(212,167,127,.18), transparent 30%),
            #0a0706 !important;
    }

    .mobile-menu__logo{
        width:118px !important;
        height:118px !important;
        max-width:118px !important;
        max-height:118px !important;
        object-fit:contain !important;
        border-radius:50% !important;
        background:#050505 !important;
        box-shadow:
            0 0 0 1px rgba(212,167,127,.42),
            0 16px 38px rgba(0,0,0,.28) !important;
    }
}

/* Extra small screens */
@media (max-width:420px){
    .main-header{
        top:12px !important;
        left:14px !important;
        right:14px !important;
    }

    .main-header .brand,
    .main-header .mobile-menu-toggle{
        width:52px !important;
        height:52px !important;
        min-width:52px !important;
        max-width:52px !important;
        min-height:52px !important;
        max-height:52px !important;
    }

    .main-header .brand img{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        max-width:44px !important;
        min-height:44px !important;
        max-height:44px !important;
    }

    .main-header .mobile-menu-toggle span{
        width:21px !important;
    }

    .main-header .mobile-menu-toggle span:nth-child(2){
        width:25px !important;
    }
}