/* Hair Extension Saloon – Premium Logo Placement V3 */
:root{
    --hes-logo-gold:#d4a77f;
    --hes-logo-cream:#fff7ef;
    --hes-logo-dark:#050505;
}

/* Desktop header logo */
@media (min-width:821px){
    .main-header{
        grid-template-columns:310px minmax(0,1fr) auto !important;
        min-height:92px !important;
        height:92px !important;
        align-items:center !important;
    }

    .main-header .brand{
        display:flex !important;
        align-items:center !important;
        gap:15px !important;
        min-width:0 !important;
        max-width:310px !important;
    }

    .main-header .brand img{
        width:74px !important;
        height:74px !important;
        max-width:74px !important;
        max-height:74px !important;
        min-width:74px !important;
        object-fit:contain !important;
        border-radius:50% !important;
        background:#050505 !important;
        padding:0 !important;
        box-shadow:
            0 0 0 1px rgba(212,167,127,.55),
            0 10px 28px rgba(0,0,0,.42) !important;
    }

    .main-header .brand span{
        display:grid !important;
        color:#fff !important;
        line-height:1.05 !important;
        min-width:0 !important;
    }

    .main-header .brand strong{
        color:#fff7ef !important;
        font-family:Georgia, "Times New Roman", serif !important;
        font-size:20px !important;
        font-weight:400 !important;
        letter-spacing:.06em !important;
        white-space:nowrap !important;
    }

    .main-header .brand small{
        color:var(--hes-logo-gold) !important;
        font-size:10px !important;
        font-weight:800 !important;
        letter-spacing:.42em !important;
        margin-left:2px !important;
        white-space:nowrap !important;
    }

    .desktop-nav{
        gap:24px !important;
    }
}

/* Mobile header logo */
@media (max-width:820px){
    .main-header{
        height:82px !important;
        min-height:82px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:12px !important;
        padding:0 16px 0 18px !important;
        overflow:visible !important;
    }

    .main-header .brand{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        flex:0 0 auto !important;
        width:auto !important;
        max-width:86px !important;
        min-width:66px !important;
        margin:0 !important;
    }

    .main-header .brand img{
        width:64px !important;
        height:64px !important;
        min-width:64px !important;
        max-width:64px !important;
        max-height:64px !important;
        object-fit:contain !important;
        border-radius:50% !important;
        background:#050505 !important;
        box-shadow:
            0 0 0 1px rgba(212,167,127,.50),
            0 10px 26px rgba(0,0,0,.20) !important;
    }

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

    .main-header .mobile-menu-toggle{
        margin-left:auto !important;
        flex:0 0 56px !important;
        width:56px !important;
        height:56px !important;
    }

    .mobile-menu__logo{
        width:126px !important;
        height:126px !important;
        max-width:126px !important;
        max-height:126px !important;
        border-radius:50% !important;
        object-fit:contain !important;
        background:#050505 !important;
        box-shadow:
            0 0 0 1px rgba(212,167,127,.55),
            0 15px 36px rgba(0,0,0,.25) !important;
    }
}

/* Footer logo */
.footer__brand img{
    width:140px !important;
    height:140px !important;
    max-width:140px !important;
    max-height:140px !important;
    object-fit:contain !important;
    border-radius:50% !important;
    background:#050505 !important;
    box-shadow:
        0 0 0 1px rgba(212,167,127,.50),
        0 18px 40px rgba(0,0,0,.34) !important;
}

@media (max-width:820px){
    .footer__brand img{
        width:116px !important;
        height:116px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}