/* ==========================
MOBILE SECTION DISPLAY FIX
========================== */

@media(max-width:768px){

    html,
    body{
        height:auto !important;
        min-height:100%;
        overflow-x:hidden !important;
        overflow-y:auto !important;
    }


    header,
    section,
    footer{
        position:relative !important;
        display:block !important;
    }


    .hero{
        min-height:700px !important;
    }


    .about,
    .products,
    .why-us,
    .stats,
    .services,
    .reviews,
    .seo-content,
    .cta,
    .footer{
        display:block !important;
        height:auto !important;
        min-height:auto !important;
        opacity:1 !important;
        visibility:visible !important;
    }

}

/* =========================================================
   AR CABLES — UNIFIED PRODUCT / DETAIL RESPONSIVE FIX
   Scope: cable listing cards + product detail pages only.
   No product content, prices, images or links changed.
   ========================================================= */

/* ---------- ALL CABLE LISTING CARDS ---------- */
.wire-grid{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:22px !important;
    align-items:stretch !important;
}

.wire-grid .bw-card{
    width:100% !important;
    min-width:0 !important;
    height:100% !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

.wire-grid .bw-image{
    width:100% !important;
    height:220px !important;
    min-height:220px !important;
    flex:0 0 220px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    padding:18px !important;
}

.wire-grid .bw-image img{
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:184px !important;
    object-fit:contain !important;
}

.wire-grid .bw-content{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    box-sizing:border-box !important;
    padding:17px !important;
}

.wire-grid .bw-content h3{
    min-height:48px !important;
    margin:0 0 9px !important;
    line-height:1.42 !important;
    overflow-wrap:anywhere !important;
}

.wire-grid .bw-price{
    min-height:27px !important;
}

.wire-grid .bw-stock{
    min-height:18px !important;
    margin:9px 0 12px !important;
}

.wire-grid .bw-buttons{
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 48px !important;
    gap:8px !important;
    margin-top:auto !important;
}

.wire-grid .bw-buttons .bw-details,
.wire-grid .bw-buttons .bw-cart{
    width:100% !important;
    min-width:0 !important;
    height:48px !important;
    min-height:48px !important;
    box-sizing:border-box !important;
}

/* Aluminium listing pages use the same card geometry. */
.building-products .wire-grid .bw-card{
    align-self:stretch !important;
}

/* ---------- SOLAR LISTING CARDS ---------- */
.solar-grid{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:22px !important;
    align-items:stretch !important;
}

.solar-grid .solar-card{
    width:100% !important;
    min-width:0 !important;
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

.solar-grid .solar-card-image{
    width:100% !important;
    height:220px !important;
    min-height:220px !important;
    flex:0 0 220px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    padding:18px !important;
}

.solar-grid .solar-card-image img{
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:184px !important;
    object-fit:contain !important;
}

.solar-grid .solar-card-content{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    box-sizing:border-box !important;
    padding:17px !important;
}

.solar-grid .solar-card h3{
    min-height:50px !important;
    margin:8px 0 10px !important;
    line-height:1.42 !important;
    overflow-wrap:anywhere !important;
}

.solar-grid .solar-stock{
    min-height:20px !important;
}

.solar-grid .solar-colours{
    min-height:42px !important;
}

.solar-grid .solar-buttons{
    width:100% !important;
    margin-top:auto !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 48px !important;
    gap:8px !important;
}

.solar-grid .solar-details,
.solar-grid .solar-add{
    width:100% !important;
    min-width:0 !important;
    height:48px !important;
    min-height:48px !important;
    box-sizing:border-box !important;
}

/* ---------- ALL PRODUCT DETAIL PAGES ---------- */
.product-details .container{
    width:min(92%,1180px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.product-details .product-layout{
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:30px !important;
    align-items:stretch !important;
    box-sizing:border-box !important;
}

.product-details .product-left,
.product-details .product-right{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

.product-details .product-left{
    position:relative !important;
    top:auto !important;
    height:100% !important;
}

.product-details .main-image{
    width:100% !important;
    height:520px !important;
    min-height:520px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.product-details .main-image img{
    width:auto !important;
    max-width:100% !important;
    max-height:455px !important;
    height:auto !important;
    object-fit:contain !important;
}

.product-details .product-right{
    height:100% !important;
    box-sizing:border-box !important;
}

.product-details #productName{
    overflow-wrap:anywhere !important;
}

.product-details .product-status{
    align-items:stretch !important;
}

.product-details .status-item{
    min-width:0 !important;
    min-height:82px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
}

.product-details .product-buttons{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    gap:9px !important;
    box-sizing:border-box !important;
}

.product-details .product-buttons button{
    width:100% !important;
    min-width:0 !important;
    min-height:52px !important;
    height:52px !important;
    box-sizing:border-box !important;
    padding:0 10px !important;
    white-space:nowrap !important;
}

.product-details .trust-badges{
    width:100% !important;
    align-items:stretch !important;
}

.product-details .trust-badges .badge{
    min-width:0 !important;
    min-height:82px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
}

/* ---------- TABLET ---------- */
@media (max-width:1050px){
    .wire-grid,
    .solar-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:18px !important;
    }

    .product-details .product-layout{
        gap:22px !important;
    }

    .product-details .main-image{
        height:460px !important;
        min-height:460px !important;
    }

    .product-details .main-image img{
        max-height:395px !important;
    }

    .product-details .product-buttons{
        grid-template-columns:1fr !important;
    }
}

/* ---------- MOBILE: SAME GEOMETRY ON ALL CABLE LISTINGS ---------- */
@media (max-width:760px){
    .wire-grid,
    .solar-grid{
        width:100% !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }

    .wire-grid .bw-card,
    .solar-grid .solar-card{
        min-width:0 !important;
        border-radius:14px !important;
    }

    .wire-grid .bw-image,
    .solar-grid .solar-card-image{
        height:160px !important;
        min-height:160px !important;
        flex-basis:160px !important;
        padding:10px !important;
    }

    .wire-grid .bw-image img,
    .solar-grid .solar-card-image img{
        max-height:138px !important;
    }

    .wire-grid .bw-content,
    .solar-grid .solar-card-content{
        padding:12px !important;
    }

    .wire-grid .bw-content h3,
    .solar-grid .solar-card h3{
        min-height:58px !important;
        font-size:12px !important;
        line-height:1.4 !important;
        margin-bottom:8px !important;
    }

    .wire-grid .bw-price,
    .wire-grid .bw-stock{
        font-size:10px !important;
    }

    .wire-grid .bw-buttons,
    .solar-grid .solar-buttons{
        grid-template-columns:minmax(0,1fr) 42px !important;
        gap:6px !important;
    }

    .wire-grid .bw-buttons .bw-details,
    .wire-grid .bw-buttons .bw-cart,
    .solar-grid .solar-details,
    .solar-grid .solar-add{
        height:42px !important;
        min-height:42px !important;
    }

    .solar-grid .solar-colours{
        gap:5px !important;
        min-height:38px !important;
        margin:9px 0 !important;
    }

    .solar-grid .solar-colour{
        min-width:0 !important;
        padding:6px 7px !important;
        font-size:9px !important;
    }

    /* Same detail layout for house, core, aluminium and solar pages. */
    .product-details{
        padding:32px 0 50px !important;
    }

    .product-details .container{
        width:calc(100% - 24px) !important;
    }

    .product-details .product-layout{
        grid-template-columns:1fr !important;
        gap:14px !important;
        margin:0 !important;
    }

    .product-details .product-left{
        order:1 !important;
        height:auto !important;
        padding:12px !important;
        border-radius:16px !important;
    }

    .product-details .product-right{
        order:2 !important;
        height:auto !important;
        padding:15px !important;
        border-radius:16px !important;
    }

    .product-details .main-image{
        height:285px !important;
        min-height:285px !important;
        padding:16px !important;
        border-radius:14px !important;
    }

    .product-details .main-image img{
        max-width:100% !important;
        max-height:245px !important;
    }

    .product-details .product-brand{
        font-size:9px !important;
        padding:6px 11px !important;
        margin-bottom:10px !important;
    }

    .product-details #productName{
        font-size:20px !important;
        line-height:1.3 !important;
        margin:8px 0 12px !important;
    }

    .product-details .product-rating{
        margin-bottom:12px !important;
        font-size:12px !important;
    }

    .product-details .price-box{
        margin:12px 0 !important;
        padding:14px !important;
        border-radius:13px !important;
    }

    .product-details #productPrice{
        font-size:25px !important;
        line-height:1.2 !important;
    }

    .product-details .discount-badge{
        padding:5px 9px !important;
        font-size:8px !important;
    }

    .product-details .product-status{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:7px !important;
        margin:14px 0 !important;
    }

    .product-details .status-item{
        min-height:70px !important;
        padding:8px 4px !important;
        border-radius:10px !important;
    }

    .product-details .status-item i{
        font-size:16px !important;
        margin-bottom:5px !important;
    }

    .product-details .status-item span{
        font-size:8px !important;
        line-height:1.25 !important;
    }

    .product-details .product-right h4{
        font-size:13px !important;
        margin:14px 0 8px !important;
    }

    .product-details .colour-box,
    .product-details .solar-detail-colours{
        gap:7px !important;
        margin-bottom:14px !important;
    }

    .product-details .colour-box span{
        width:30px !important;
        height:30px !important;
    }

    .product-details .solar-detail-colour{
        padding:7px 10px !important;
        font-size:10px !important;
    }

    .product-details .solar-detail-option select,
    .product-details #coilLength,
    .product-details #meterInput{
        width:100% !important;
        max-width:none !important;
        height:44px !important;
        box-sizing:border-box !important;
    }

    .product-details .quantity{
        margin:12px 0 !important;
        justify-content:flex-start !important;
    }

    .product-details .quantity button{
        width:42px !important;
        height:42px !important;
    }

    .product-details .quantity input{
        width:58px !important;
        height:42px !important;
    }

    .product-details .solar-total-box{
        margin:14px 0 !important;
        padding:12px !important;
    }

    .product-details .solar-total-box > div{
        font-size:10px !important;
    }

    .product-details .solar-grand-total{
        font-size:15px !important;
    }

    .product-details .product-buttons{
        width:100% !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
        margin-top:15px !important;
    }

    .product-details .product-buttons button{
        width:100% !important;
        height:46px !important;
        min-height:46px !important;
        font-size:11px !important;
        white-space:nowrap !important;
    }

    .product-details .trust-badges{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:6px !important;
        margin-top:14px !important;
    }

    .product-details .trust-badges .badge{
        min-height:68px !important;
        padding:7px 3px !important;
        border-radius:9px !important;
    }

    .product-details .trust-badges .badge i{
        font-size:16px !important;
        margin-bottom:4px !important;
    }

    .product-details .trust-badges .badge span{
        font-size:7px !important;
        line-height:1.25 !important;
    }

    .product-details .secure-payment{
        margin-top:10px !important;
        font-size:9px !important;
        text-align:center !important;
    }
}

@media (max-width:430px){
    .wire-grid,
    .solar-grid{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .wire-grid .bw-image,
    .solar-grid .solar-card-image{
        height:190px !important;
        min-height:190px !important;
        flex-basis:190px !important;
    }

    .wire-grid .bw-image img,
    .solar-grid .solar-card-image img{
        max-height:165px !important;
    }

    .wire-grid .bw-content h3,
    .solar-grid .solar-card h3{
        min-height:auto !important;
        font-size:14px !important;
    }

    .product-details .product-status,
    .product-details .trust-badges{
        grid-template-columns:1fr !important;
    }

    .product-details .status-item,
    .product-details .trust-badges .badge{
        min-height:58px !important;
        flex-direction:row !important;
        justify-content:flex-start !important;
        gap:8px !important;
        padding:8px 10px !important;
    }

    .product-details .status-item i,
    .product-details .trust-badges .badge i{
        margin:0 !important;
    }
}