/* Safe home showcase - does not replace main layout */

.home-product-card h3 a{
    color:#0f172a;
    text-decoration:none;
}

.home-product-card h3 a:hover{
    color:#0078d7;
}

.home-product-image{
    display:flex;
    align-items:center;
    justify-content:center;
    height:165px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:12px;
    margin-bottom:12px;
}

.home-product-image img{
    max-width:100%;
    max-height:145px;
    object-fit:contain;
}

.home-product-card p{
    min-height:42px;
    color:#64748b;
    line-height:1.5;
    font-size:14px;
}

.home-stock{
    margin:9px 0 13px;
    font-size:13px;
    font-weight:800;
}

.home-stock.in{
    color:#047857;
}

.home-stock.out{
    color:#b91c1c;
}

.home-detail-btn{
    border:0;
    border-radius:8px;
    background:#0078d7;
    color:#fff;
    padding:8px 12px;
    text-decoration:none;
    font-weight:800;
    font-size:13px;
}

.benefits div span{
    display:block;
    color:#64748b;
    margin-top:6px;
    line-height:1.5;
}

/* Home products with category sidebar */

/* Space between hero and new products/category area */
.hero{
    margin-bottom:24px !important;
}

.home-products-layout{
    margin-top:0 !important;
}

.home-products-topbar{
    margin-bottom:16px !important;
}

.home-products-topbar .store-list-heading{
    color:#2563eb !important;
    font-size:16px !important;
    line-height:1.35 !important;
    font-weight:500 !important;
}

.home-products-sidebar{
    position:static !important;
}

@media(max-width:900px){
    .hero{
        margin-bottom:18px !important;
    }

    .home-products-layout{
        margin-top:0 !important;
    }

}

/* Home hero without category panel */
.hero{
    grid-template-columns:1fr !important;
}

.hero-banner-shell{
    min-height:0 !important;
    padding:0 !important;
    display:block !important;
    background:transparent !important;
    border-radius:12px !important;
    overflow:hidden !important;
    width:100% !important;
    max-width:100% !important;
}

.home-main-heading{
    margin:0 0 18px 0 !important;
    padding:16px 20px !important;
    color:#0b3a75 !important;
    background:linear-gradient(180deg, #ffffff 0%, #f6fbff 100%) !important;
    border:1px solid #c8def4 !important;
    border-radius:8px !important;
    font-family:"Segoe UI", Arial, sans-serif !important;
    font-size:clamp(25px, 3vw, 38px) !important;
    line-height:1.18 !important;
    font-weight:900 !important;
    letter-spacing:.2px !important;
    text-align:center !important;
    width:100% !important;
    text-shadow:0 1px 0 rgba(255, 255, 255, .85) !important;
    box-shadow:0 8px 22px rgba(11, 58, 117, .09) !important;
}

.products-main-heading{
    margin-top:0 !important;
}

.hero.hero-banner-shell > .home-banner-slider,
.hero-banner-shell .home-banner-slider{
    border-radius:16px !important;
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    transform:none !important;
}

.hero-panel{
    display:none !important;
}


/* Home product sections use the same clean product card format as product listing */
.home-products-main .home-product-grid{
    align-items:stretch !important;
}

.home-products-main .store-product-card{
    display:flex !important;
    flex-direction:column !important;
    min-height:100% !important;
}

.home-products-main .store-product-card .store-product-image{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:170px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    overflow:hidden !important;
    cursor:pointer !important;
    text-decoration:none !important;
}

.home-products-main .store-product-card .store-product-image img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:170px !important;
    object-fit:contain !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    pointer-events:none !important;
}

.home-products-main .store-product-card h3{
    margin:10px 12px 8px !important;
    text-align:center !important;
    min-height:auto !important;
}

.home-products-main .store-product-card h3 a{
    display:block !important;
    color:#111827 !important;
    text-decoration:none !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
}

.home-products-main .store-product-card .product-bottom{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding:0 12px 8px !important;
    margin-top:auto !important;
    margin-bottom:0 !important;
    border:0 !important;
    background:transparent !important;
}

.home-products-main .store-product-card .product-bottom strong{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    color:#dc2626 !important;
    font-size:20px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    margin:0 !important;
}

.home-products-main .store-list-cart-form{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin:0 12px 10px !important;
    padding:0 !important;
}

.home-products-main .store-list-cart-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:150px !important;
    min-height:36px !important;
    border:0 !important;
    border-radius:8px !important;
    background:#2563eb !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1 !important;
    cursor:pointer !important;
    text-decoration:none !important;
}

.home-products-main .store-list-cart-btn:hover{
    background:#1d4ed8 !important;
}

.home-products-main .store-list-out-of-stock{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:150px !important;
    min-height:36px !important;
    margin:0 auto 10px !important;
    border-radius:8px !important;
    background:#f3f4f6 !important;
    color:#6b7280 !important;
    font-size:13px !important;
    font-weight:700 !important;
}


/* Home featured products before new products */
.home-store-section{
    margin:0 0 28px !important;
}

.home-store-section:last-child{
    margin-bottom:0 !important;
}

.home-featured-section{
    margin-bottom:34px !important;
}

/* Optional homepage banner slots between featured and new products. */
.home-banner-section{
    margin:0 0 28px !important;
}

.home-banner-slider{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    aspect-ratio:900 / 220;
    border:1px solid #e2e8f0 !important;
    border-radius:12px !important;
    overflow:hidden !important;
    background:#f8fafc !important;
    box-shadow:0 8px 22px rgba(15,23,42,.07) !important;
    box-sizing:border-box !important;
}

.home-banner-track{
    position:relative !important;
    width:100% !important;
    height:100% !important;
}

.home-banner-slide{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    opacity:0;
    pointer-events:none;
    transition:opacity .45s ease;
}

.home-banner-slide.is-active{
    opacity:1;
    pointer-events:auto;
}

.home-banner-slide img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
}

.home-banner-dots{
    position:absolute !important;
    left:0;
    right:0;
    bottom:10px;
    display:flex !important;
    justify-content:center !important;
    gap:8px !important;
    pointer-events:none;
}

.home-banner-dot{
    width:9px !important;
    height:9px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.72) !important;
    box-shadow:0 1px 4px rgba(15,23,42,.25) !important;
    cursor:pointer !important;
    pointer-events:auto;
}

.home-banner-dot.is-active{
    width:22px !important;
    border-radius:999px !important;
    background:#fff !important;
}

@media(max-width:760px){
    .hero-banner-shell,
    .home-banner-slider{
        width:100% !important;
        max-width:100% !important;
    }

    .home-banner-slider{
        aspect-ratio:900 / 220 !important;
        border-radius:10px !important;
    }

    .home-banner-section{
        width:100% !important;
        max-width:100% !important;
        overflow:hidden !important;
    }
}
