/* =========================================================
   AR CABLES — ALUMINIUM PAGES ONLY
   Mobile header alignment / sticky fix.
   Existing page structure and design are intentionally untouched.
   ========================================================= */

.header{
    position:sticky !important;
    top:0 !important;
    z-index:99999 !important;
}

@media (max-width:760px){

    body{
        overflow-x:hidden !important;
    }

    .header{
        position:sticky !important;
        top:0 !important;
        width:100% !important;
        min-height:68px !important;
        height:68px !important;
        z-index:99999 !important;
    }

    .header .container{
        position:relative !important;
        width:calc(100% - 12px) !important;
        max-width:none !important;
        min-height:68px !important;
        height:68px !important;
        margin:0 auto !important;
        padding:5px 0 !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 38px 78px 40px !important;
        grid-template-rows:68px !important;
        align-items:center !important;
        gap:5px !important;
        box-sizing:border-box !important;
    }

    .header .logo{
        grid-column:1 !important;
        grid-row:1 !important;
        justify-self:start !important;
        min-width:0 !important;
        margin:0 !important;
        display:flex !important;
        align-items:center !important;
    }

    .header .logo img{
        width:51px !important;
        height:51px !important;
        max-width:51px !important;
        object-fit:contain !important;
        display:block !important;
    }

    .header .header-cart{
        grid-column:2 !important;
        grid-row:1 !important;
        justify-self:center !important;
        position:relative !important;
        width:38px !important;
        min-width:38px !important;
        height:38px !important;
        min-height:38px !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:10px !important;
        box-sizing:border-box !important;
        z-index:3 !important;
    }

    .header .header-cart a{
        width:100% !important;
        height:100% !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        position:relative !important;
    }

    .header .header-cart i{
        font-size:15px !important;
    }

    .header .header-cart span{
        position:absolute !important;
        top:-4px !important;
        right:-4px !important;
        min-width:15px !important;
        width:auto !important;
        height:15px !important;
        padding:0 4px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:999px !important;
        font-size:7px !important;
        line-height:1 !important;
        z-index:4 !important;
    }

    .header .quote-btn{
        grid-column:3 !important;
        grid-row:1 !important;
        justify-self:center !important;
        position:relative !important;
        width:78px !important;
        min-width:78px !important;
        max-width:78px !important;
        height:38px !important;
        min-height:38px !important;
        margin:0 !important;
        padding:0 8px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        box-sizing:border-box !important;
        white-space:nowrap !important;
        font-size:9px !important;
        line-height:1 !important;
        z-index:3 !important;
    }

    .header .mobile-menu-btn{
        grid-column:4 !important;
        grid-row:1 !important;
        justify-self:end !important;
        position:relative !important;
        width:40px !important;
        min-width:40px !important;
        height:40px !important;
        min-height:40px !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;
        border:0 !important;
        z-index:4 !important;
    }

    .header .mobile-menu-btn span{
        display:block !important;
        width:17px !important;
        height:2px !important;
        min-height:2px !important;
        margin:0 !important;
        border-radius:4px !important;
    }

    .header .navbar{
        position:absolute !important;
        top:calc(100% + 6px) !important;
        left:6px !important;
        right:6px !important;
        width:auto !important;
        margin:0 !important;
        padding:8px !important;
        display:block !important;
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;
        transform:translateY(-8px) !important;
        z-index:999999 !important;
        box-sizing:border-box !important;
        border-radius:14px !important;
    }

    .header .navbar.mobile-open{
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:auto !important;
        transform:translateY(0) !important;
    }

    .header .navbar ul{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:2px !important;
        margin:0 !important;
        padding:0 !important;
        list-style:none !important;
    }

    .header .navbar li{
        width:100% !important;
        margin:0 !important;
    }

    .header .navbar a{
        width:100% !important;
        min-height:42px !important;
        padding:10px 13px !important;
        display:flex !important;
        align-items:center !important;
        box-sizing:border-box !important;
        font-size:12px !important;
    }
}

@media (max-width:390px){
    .header .container{
        width:calc(100% - 8px) !important;
        grid-template-columns:minmax(0,1fr) 36px 74px 38px !important;
        gap:4px !important;
    }

    .header .header-cart{
        width:36px !important;
        min-width:36px !important;
        height:36px !important;
        min-height:36px !important;
    }

    .header .quote-btn{
        width:74px !important;
        min-width:74px !important;
        max-width:74px !important;
        height:36px !important;
        min-height:36px !important;
        font-size:8.5px !important;
    }

    .header .mobile-menu-btn{
        width:38px !important;
        min-width:38px !important;
        height:38px !important;
        min-height:38px !important;
    }
}

/* =========================================================
   FINAL MOBILE HEADER FIX — ALUMINIUM PAGES
   Header stays fixed and Get Quote stays INSIDE the header.
   Existing HTML/design structure is unchanged.
   ========================================================= */
@media (max-width:760px){
    html,body{
        overflow-x:hidden !important;
    }

    body{
        padding-top:68px !important;
    }

    .header{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        height:68px !important;
        min-height:68px !important;
        margin:0 !important;
        z-index:999999 !important;
        box-sizing:border-box !important;
    }

    .header .container{
        position:relative !important;
        width:calc(100% - 12px) !important;
        height:68px !important;
        min-height:68px !important;
        margin:0 auto !important;
        padding:5px 0 !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 38px 78px 40px !important;
        grid-template-rows:68px !important;
        align-items:center !important;
        gap:5px !important;
        box-sizing:border-box !important;
    }

    .header .logo{
        grid-column:1 !important;
        grid-row:1 !important;
        align-self:center !important;
    }

    .header .logo img{
        width:51px !important;
        height:51px !important;
        max-width:51px !important;
        display:block !important;
    }

    .header .navbar{
        position:absolute !important;
        top:68px !important;
        left:6px !important;
        right:6px !important;
        width:auto !important;
        height:auto !important;
        margin:0 !important;
        padding:8px !important;
        display:block !important;
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;
        transform:translateY(-8px) !important;
        z-index:1000000 !important;
    }

    .header .navbar.mobile-open{
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:auto !important;
        transform:translateY(0) !important;
    }

    .header .header-cart{
        grid-column:2 !important;
        grid-row:1 !important;
        position:relative !important;
        justify-self:center !important;
        width:38px !important;
        min-width:38px !important;
        height:38px !important;
        min-height:38px !important;
        margin:0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        z-index:5 !important;
    }

    .header .quote-btn{
        grid-column:3 !important;
        grid-row:1 !important;
        position:relative !important;
        justify-self:center !important;
        width:78px !important;
        min-width:78px !important;
        max-width:78px !important;
        height:38px !important;
        min-height:38px !important;
        margin:0 !important;
        padding:0 6px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        box-sizing:border-box !important;
        white-space:nowrap !important;
        z-index:5 !important;
    }

    .header .mobile-menu-btn{
        grid-column:4 !important;
        grid-row:1 !important;
        position:relative !important;
        justify-self:end !important;
        width:40px !important;
        min-width:40px !important;
        height:40px !important;
        min-height:40px !important;
        margin:0 !important;
        padding:0 !important;
        z-index:6 !important;
    }
}

@media (max-width:390px){
    body{padding-top:64px !important;}
    .header,.header .container{height:64px !important;min-height:64px !important;}
    .header .container{grid-template-columns:minmax(0,1fr) 36px 74px 38px !important;grid-template-rows:64px !important;gap:4px !important;}
    .header .navbar{top:64px !important;}
    .header .logo img{width:49px !important;height:49px !important;}
    .header .header-cart{width:36px !important;min-width:36px !important;height:36px !important;min-height:36px !important;}
    .header .quote-btn{width:74px !important;min-width:74px !important;max-width:74px !important;height:36px !important;min-height:36px !important;font-size:8px !important;}
    .header .mobile-menu-btn{width:38px !important;min-width:38px !important;height:38px !important;min-height:38px !important;}
}