/* =========================================================
   AR CABLES - SOLAR CABLE PAGE ADDITIONS
========================================================= */

.solar-header{
    position:sticky;
    top:0;
    z-index:9999;
}

.solar-header .container{
    display:flex;
    align-items:center;
}

.solar-header-cart{
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:50%;
    background:#fff;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    position:relative;
    margin-left:auto;
    margin-right:16px;
    transition:.3s ease;
}

.solar-header-cart:hover{
    background:#ff6500;
    color:#fff;
}

.solar-header-cart i{
    font-size:19px;
}

.solar-header-cart span{
    position:absolute;
    top:-5px;
    right:-5px;
    width:21px;
    height:21px;
    border-radius:50%;
    background:#ff6500;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:700;
}


/* MOBILE MENU */

.solar-menu{
    display:none;
    border:0;
    background:transparent;
    width:42px;
    height:42px;
    padding:0;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    cursor:pointer;
}

.solar-menu span{
    display:block;
    width:23px;
    height:2px;
    background:#fff;
    border-radius:5px;
}


/* SOLAR PRODUCTS */

.solar-products{
    padding:80px 0;
    background:#fff;
}

.solar-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:40px;
}

.solar-card{
    background:#fff;
    border:1px solid #e9e9e9;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.07);
    transition:.3s ease;
}

.solar-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.13);
}

.solar-card-image{
    height:230px;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
}

.solar-card-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.solar-card-content{
    padding:20px;
}

.solar-rating{
    color:#ff9d00;
    font-size:13px;
    margin-bottom:10px;
}

.solar-rating span{
    color:#777;
    margin-left:5px;
}

.solar-card h3{
    margin:8px 0 12px;
    font-size:17px;
    line-height:1.4;
}

.solar-price{
    color:#e95d00;
    font-size:20px;
    font-weight:800;
}

.solar-price small{
    color:#777;
    font-size:11px;
    font-weight:500;
}

.solar-stock{
    color:#18883b;
    font-size:13px;
    font-weight:600;
    margin:12px 0;
}

.solar-stock i{
    font-size:7px;
    margin-right:5px;
}


/* COLOUR */

.solar-colours{
    display:flex;
    gap:12px;
    margin:15px 0;
}

.solar-colour{
    border:1px solid #ddd;
    background:#fff;
    border-radius:8px;
    padding:7px 10px;
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
}

.solar-colour.selected{
    border-color:#ff6500;
    box-shadow:0 0 0 1px #ff6500;
}

.solar-colour i{
    width:15px;
    height:15px;
    border-radius:50%;
    display:block;
    border:2px solid #fff;
    box-shadow:0 0 0 1px #aaa;
}

.solar-colour .red{
    background:#e00000;
}

.solar-colour .black{
    background:#111;
}


/* BUTTONS */

.solar-buttons{
    display:grid;
    grid-template-columns:1fr 52px;
    gap:8px;
}

.solar-details{
    height:47px;
    background:#111;
    color:#fff;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}

.solar-details:hover{
    background:#222;
}

.solar-add{
    height:47px;
    border:0;
    border-radius:9px;
    background:#ff6500;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:17px;
}

.solar-add:hover{
    background:#df5600;
}

.solar-add.added{
    background:#ff6500;
    color:#fff;
}


/* RESPONSIVE */

@media(max-width:1100px){

    .solar-grid{
        grid-template-columns:repeat(3,1fr);
    }

}


@media(max-width:800px){

    .solar-header .navbar{
        display:none;
        position:absolute;
        top:100%;
        left:4%;
        right:4%;
        background:#111;
        border-radius:10px;
        padding:8px;
    }

    .solar-header .navbar.open{
        display:block;
    }

    .solar-header .navbar ul{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
    }

    .solar-header .navbar li a{
        display:block;
        padding:12px;
        border-bottom:1px solid #292929;
    }

    .solar-menu{
        display:flex;
    }

    .solar-header-cart{
        width:42px;
        height:42px;
        margin-right:8px;
    }

    .solar-header .quote-btn{
        font-size:11px;
        padding:9px 12px;
    }

    .solar-grid{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .solar-card-image{
        height:190px;
    }

    .solar-card-content{
        padding:14px;
    }

}


@media(max-width:500px){

    .solar-grid{
        grid-template-columns:1fr;
    }

    .solar-card-image{
        height:230px;
    }

}

/* =========================================================
   SOLAR CABLE PRODUCT / DETAIL ADDITIONS
========================================================= */

.solar-header .container{
    display:flex;
    align-items:center;
}

.solar-header .navbar{
    margin-left:auto;
}

.solar-cart{
    margin-left:18px !important;
}

.solar-menu{
    display:none;
    border:0;
    background:transparent;
    width:42px;
    height:42px;
    padding:0;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
}

.solar-menu span{
    display:block;
    width:23px;
    height:2px;
    background:#fff;
    border-radius:4px;
}

.solar-products{
    padding:75px 0;
}

.solar-card{
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 28px rgba(0,0,0,.07);
    transition:.3s ease;
}

.solar-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 38px rgba(0,0,0,.12);
}

.solar-card-image{
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:#fff;
}

.solar-rating{
    color:#ff9d00;
    font-size:13px;
    margin-bottom:9px;
}

.solar-card h3{
    font-size:17px;
    line-height:1.45;
    margin:8px 0 12px;
}

.solar-colours{
    display:flex;
    gap:9px;
    margin:14px 0;
}

.solar-colour .red{background:#e00000}
.solar-colour .black{background:#111}

.solar-buttons{
    display:grid;
    grid-template-columns:1fr 52px;
    gap:8px;
}

.solar-add:hover,
.solar-add.added{
    background:#ff6500;
    color:#fff;
}

/* DETAIL OPTIONS */

.solar-detail-option{
    margin:18px 0;
}

.solar-detail-option h4{
    margin:0 0 10px;
}

.solar-detail-option select{
    width:100%;
    max-width:320px;
    height:46px;
    border:1px solid #ddd;
    border-radius:9px;
    padding:0 12px;
    background:#fff;
    font-size:14px;
}

.solar-detail-colours{
    display:flex;
    gap:10px;
}

.solar-detail-colour{
    border:1px solid #ddd;
    background:#fff;
    border-radius:9px;
    padding:9px 14px;
    display:flex;
    align-items:center;
    gap:7px;
    cursor:pointer;
    font-weight:600;
}

.solar-detail-colour.active{
    border-color:#ff6500;
    box-shadow:0 0 0 1px #ff6500;
}

.solar-detail-colour span{
    width:17px;
    height:17px;
    border-radius:50%;
    display:inline-block;
    border:2px solid #fff;
    box-shadow:0 0 0 1px #aaa;
}

.solar-red{background:#e00000}
.solar-black{background:#111}

.solar-detail-option small{
    display:block;
    color:#777;
    margin-top:7px;
}

.solar-total-box{
    border:1px solid #eee;
    border-radius:12px;
    padding:15px;
    margin:20px 0;
    background:#fafafa;
}

.solar-total-box > div{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:6px 0;
}

.solar-total-box span{
    color:#666;
}

.solar-grand-total{
    border-top:1px solid #ddd;
    margin-top:7px;
    padding-top:12px !important;
    font-size:18px;
}

.solar-grand-total strong{
    color:#e95d00;
}

/* MOBILE */

@media(max-width:1100px){
}

@media(max-width:800px){
    .solar-header .navbar{
        display:none;
        position:absolute;
        top:100%;
        left:4%;
        right:4%;
        margin:0;
        background:#111;
        border-radius:10px;
        padding:8px;
        box-shadow:0 12px 25px rgba(0,0,0,.2);
    }

    .solar-cart{
        margin-left:auto !important;
        margin-right:7px !important;
        width:42px;
        height:42px;
    }

    .solar-header .quote-btn{
        padding:9px 12px;
        font-size:11px;
    }
}

@media(max-width:500px){

    .solar-header .logo img{
        max-width:100px;
    }

    .solar-header .quote-btn{
        display:none;
    }

    .solar-total-box > div{
        font-size:13px;
    }
}


/* =========================================================
   AR CABLES — SOLAR DETAIL MOBILE HEADER FIX
   ========================================================= */
@media (max-width:760px){
    .solar-header .container{
        width:calc(100% - 16px) !important;
        height:68px !important;
        min-height:68px !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 40px 82px 40px !important;
        gap:6px !important;
        align-items:center !important;
        position:relative !important;
    }

    .solar-header .logo{
        grid-column:1 !important;
        grid-row:1 !important;
        min-width:0 !important;
    }

    .solar-header .logo img{
        width:53px !important;
        height:53px !important;
        object-fit:contain !important;
    }

    .solar-header .navbar{
        grid-column:1 / -1 !important;
        grid-row:2 !important;
        top:calc(100% + 8px) !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;
        background:rgba(7,10,14,.99) !important;
        border:1px solid rgba(255,255,255,.10) !important;
        border-radius:14px !important;
        box-shadow:0 22px 55px rgba(0,0,0,.40) !important;
    }

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

    .solar-header .header-cart{
        grid-column:2 !important;
        grid-row:1 !important;
        justify-self:center !important;
        width:40px !important;
        height:40px !important;
        margin:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .solar-header .solar-cart{
        margin:0 !important;
        width:40px !important;
        height:40px !important;
        position:relative !important;
    }

    .solar-header .solar-cart #cartCount{
        position:absolute !important;
        top:-4px !important;
        right:-4px !important;
        min-width:16px !important;
        height:16px !important;
        padding:0 3px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:999px !important;
        background:#ff5a1f !important;
        color:#fff !important;
        font-size:8px !important;
        font-weight:800 !important;
    }

    .solar-header .quote-btn{
        grid-column:3 !important;
        grid-row:1 !important;
        justify-self:stretch !important;
        display:inline-flex !important;
        width:82px !important;
        min-width:82px !important;
        height:40px !important;
        min-height:40px !important;
        padding:0 7px !important;
        margin:0 !important;
        border-radius:10px !important;
        font-size:9px !important;
        white-space:nowrap !important;
    }

    .solar-menu{
        grid-column:4 !important;
        grid-row:1 !important;
        justify-self:end !important;
        display:flex !important;
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        min-height:40px !important;
        margin:0 !important;
        padding:0 !important;
        border:1px solid rgba(255,255,255,.14) !important;
        border-radius:10px !important;
        background:rgba(255,255,255,.07) !important;
        z-index:1000000 !important;
    }

    .solar-menu span{
        width:19px !important;
        height:2px !important;
        background:#fff !important;
        border-radius:999px !important;
        transition:.2s ease !important;
    }

    .solar-menu.is-open span:nth-child(1){
        transform:translateY(7px) rotate(45deg) !important;
    }

    .solar-menu.is-open span:nth-child(2){
        opacity:0 !important;
    }

    .solar-menu.is-open span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg) !important;
    }

    .solar-detail-option select,
    .solar-detail-colours{
        max-width:100% !important;
    }
}

@media (max-width:430px){
    .solar-header .container{
        width:calc(100% - 12px) !important;
        grid-template-columns:minmax(0,1fr) 38px 76px 38px !important;
        gap:5px !important;
    }

    .solar-header .logo img{
        width:49px !important;
        height:49px !important;
    }

    .solar-header .header-cart,
    .solar-header .solar-cart,
    .solar-header .solar-menu{
        width:38px !important;
        height:38px !important;
        min-width:38px !important;
        min-height:38px !important;
    }

    .solar-header .quote-btn{
        width:76px !important;
        min-width:76px !important;
        height:38px !important;
        min-height:38px !important;
        font-size:8.5px !important;
    }
}


/* =========================================================
   AR CABLES — FINAL SOLAR HEADER FIX
   ========================================================= */
.solar-header{position:sticky !important; top:0 !important; left:0 !important; width:100% !important; z-index:99999 !important;}
.solar-header .container{
    width:min(94%,1320px) !important;
    min-height:76px !important;
    height:76px !important;
    margin:0 auto !important;
    padding:7px 0 !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto auto auto !important;
    align-items:center !important;
    gap:12px !important;
    box-sizing:border-box !important;
}
.solar-header .logo{grid-column:1 !important; min-width:0 !important;}
.solar-header .navbar{grid-column:2 !important; justify-self:center !important; margin:0 !important; min-width:0 !important;}
.solar-header .navbar ul{display:flex !important; align-items:center !important; justify-content:center !important; gap:3px !important; margin:0 !important; padding:0 !important; white-space:nowrap !important;}
.solar-header .solar-cart{grid-column:3 !important; justify-self:center !important; margin:0 !important; width:46px !important; height:46px !important; min-width:46px !important; border-radius:12px !important; background:rgba(255,255,255,.07) !important; color:#fff !important; border:1px solid rgba(255,255,255,.10) !important;}
.solar-header .solar-cart i{font-size:17px !important;}
.solar-header .solar-cart #cartCount{top:-5px !important; right:-5px !important; width:auto !important; min-width:17px !important; height:17px !important; font-size:8px !important;}
.solar-header .quote-btn{grid-column:4 !important; justify-self:center !important; width:96px !important; min-width:96px !important; height:42px !important; min-height:42px !important; padding:0 12px !important; margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important; box-sizing:border-box !important;}
.solar-header .solar-menu{grid-column:5 !important; justify-self:end !important; display:none !important;}

@media (max-width:980px) and (min-width:761px){
    .solar-header .container{gap:7px !important; width:96% !important;}
    .solar-header .navbar a{padding:7px 8px !important; font-size:10px !important;}
    .solar-header .solar-cart{width:42px !important; height:42px !important; min-width:42px !important;}
    .solar-header .quote-btn{width:88px !important; min-width:88px !important; height:40px !important; min-height:40px !important; font-size:10px !important;}
}

@media (max-width:760px){
    .solar-header,
    .solar-header .container{height:68px !important; min-height:68px !important;}
    .solar-header .container{width:calc(100% - 12px) !important; padding:5px 0 !important; grid-template-columns:minmax(0,1fr) 38px 78px 38px !important; gap:5px !important;}
    .solar-header .logo{grid-column:1 !important;}
    .solar-header .logo img{width:51px !important; height:51px !important;}
    .solar-header .navbar{grid-column:1 / -1 !important; grid-row:2 !important; position:absolute !important; top:calc(100% + 7px) !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; background:rgba(7,13,25,.985) !important; border:1px solid rgba(255,255,255,.10) !important; border-radius:14px !important; box-shadow:0 22px 55px rgba(0,0,0,.38) !important; z-index:100000 !important;}
    .solar-header .navbar.open{visibility:visible !important; opacity:1 !important; pointer-events:auto !important; transform:translateY(0) !important;}
    .solar-header .navbar ul{display:grid !important; grid-template-columns:1fr !important; gap:2px !important; white-space:normal !important;}
    .solar-header .navbar a{width:100% !important; min-height:42px !important; padding:10px 13px !important; font-size:12px !important; box-sizing:border-box !important;}
    .solar-header .solar-cart{grid-column:2 !important; width:38px !important; height:38px !important; min-width:38px !important; border-radius:10px !important; margin:0 !important; justify-self:center !important;}
    .solar-header .solar-cart #cartCount{top:-4px !important; right:-4px !important; min-width:15px !important; height:15px !important; font-size:7px !important;}
    .solar-header .quote-btn{grid-column:3 !important; width:78px !important; min-width:78px !important; height:38px !important; min-height:38px !important; padding:0 6px !important; font-size:8.5px !important; border-radius:10px !important; margin:0 !important;}
    .solar-header .solar-menu{grid-column:4 !important; display:flex !important; justify-self:end !important; width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; margin:0 !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:10px !important; background:rgba(255,255,255,.07) !important; z-index:100001 !important;}
    .solar-header .solar-menu span{width:18px !important; height:2px !important; background:#fff !important;}
}

@media (max-width:420px){
    .solar-header,
    .solar-header .container{height:64px !important; min-height:64px !important;}
    .solar-header .container{width:calc(100% - 10px) !important; grid-template-columns:minmax(0,1fr) 36px 74px 36px !important; gap:4px !important;}
    .solar-header .logo img{width:49px !important; height:49px !important;}
    .solar-header .solar-cart,.solar-header .solar-menu{width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important;}
    .solar-header .quote-btn{width:74px !important; min-width:74px !important; height:36px !important; min-height:36px !important; font-size:8px !important;}
}

/* =========================================================
   FINAL MOBILE HEADER FIX — SOLAR PAGE
   Fixed header + Get Quote kept inside header.
   ========================================================= */
@media (max-width:760px){
    html,body{overflow-x:hidden !important;}
    body{padding-top:68px !important;}
    .solar-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;
    }
    .solar-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 38px !important;
        grid-template-rows:68px !important;
        align-items:center !important;
        gap:5px !important;
        box-sizing:border-box !important;
    }
    .solar-header .logo{grid-column:1 !important;grid-row:1 !important;}
    .solar-header .logo img{width:51px !important;height:51px !important;max-width:51px !important;}
    .solar-header .navbar{top:68px !important;}
    .solar-header .solar-cart{grid-column:2 !important;grid-row:1 !important;justify-self:center !important;width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;margin:0 !important;}
    .solar-header .quote-btn{grid-column:3 !important;grid-row:1 !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;}
    .solar-header .solar-menu{grid-column:4 !important;grid-row:1 !important;justify-self:end !important;width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;margin:0 !important;}
}
@media (max-width:420px){
    body{padding-top:64px !important;}
    .solar-header,.solar-header .container{height:64px !important;min-height:64px !important;}
    .solar-header .container{grid-template-columns:minmax(0,1fr) 36px 74px 36px !important;grid-template-rows:64px !important;gap:4px !important;}
    .solar-header .navbar{top:64px !important;}
    .solar-header .logo img{width:49px !important;height:49px !important;}
    .solar-header .solar-cart,.solar-header .solar-menu{width:36px !important;height:36px !important;min-width:36px !important;min-height:36px !important;}
    .solar-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;}
}