/*==========================================================
    SEAN B SHOP
    PRODUCT DETAILS PAGE
    product.css
    CLEAN MARKETPLACE VERSION
==========================================================*/



/*==========================================================
    PRODUCT PAGE RESET
==========================================================*/


.product-page{

    background:#f6f7fb;

    color:#111827;

    padding-bottom:50px;

}


.product-page *{

    box-sizing:border-box;

}



.product-page img{

    max-width:100%;

    display:block;

}





/*==========================================================
    BREADCRUMB
==========================================================*/


.product-breadcrumb{

    background:#fff;

    border-bottom:1px solid #e5e7eb;

    padding:14px 0;

}



.product-breadcrumb nav{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:.8rem;

}



.product-breadcrumb a{

    color:#64748b;

}



.product-breadcrumb a:hover{

    color:#e60000;

}



.product-breadcrumb i{

    font-size:.65rem;

    color:#94a3b8;

}



.product-breadcrumb span{

    color:#0b1f3a;

    font-weight:600;

}







/*==========================================================
    PRODUCT MAIN SECTION
==========================================================*/


.product-details{

    padding:30px 0;

}



.product-layout{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:35px;

    align-items:start;

}





/*==========================================================
    PRODUCT GALLERY
==========================================================*/


.product-gallery{

    background:#fff;

    border-radius:18px;

    border:1px solid #e5e7eb;

    padding:20px;

}



.main-product-image{

    height:420px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f8fafc;

    border-radius:15px;

}



.main-product-image img{

    width:100%;

    height:100%;

    object-fit:contain;

}



.discount-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#e60000;

    color:#fff;

    padding:6px 12px;

    border-radius:20px;

    font-size:.75rem;

    font-weight:700;

}








/*==========================================================
    PRODUCT INFORMATION
==========================================================*/


.product-information{

    background:#fff;

    border-radius:18px;

    padding:25px;

    border:1px solid #e5e7eb;

}





.product-category{

    display:inline-block;

    background:#eef3ff;

    color:#0b1f3a;

    padding:5px 12px;

    border-radius:20px;

    font-size:.75rem;

    font-weight:700;

}





.product-information h1{

    margin:15px 0;

    font-size:1.7rem;

    line-height:1.3;

    color:#0b1f3a;

    font-weight:800;

}





.product-rating{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}



.stars i{

    color:#f59e0b;

    font-size:.85rem;

}



.product-rating span{

    color:#64748b;

    font-size:.8rem;

}





.product-price{

    display:flex;

    align-items:center;

    gap:15px;

    margin:15px 0;

}



.product-price strong{

    font-size:1.7rem;

    color:#e60000;

}



.product-price del{

    color:#94a3b8;

    font-size:.95rem;

}







/*==========================================================
    STOCK
==========================================================*/


.stock-status{

    margin:15px 0;

}



.in-stock{

    background:#dcfce7;

    color:#166534;

    padding:7px 14px;

    border-radius:20px;

    font-size:.8rem;

    font-weight:700;

}



.out-stock{

    background:#fee2e2;

    color:#991b1b;

    padding:7px 14px;

    border-radius:20px;

    font-size:.8rem;

}






.product-description{

    color:#475569;

    font-size:.9rem;

    line-height:1.7;

    margin:20px 0;

}








/*==========================================================
    PURCHASE AREA
==========================================================*/


.purchase-box{

    margin-top:25px;

}



.quantity-wrapper label{

    display:block;

    font-size:.8rem;

    font-weight:700;

    margin-bottom:8px;

}





.quantity-control{

    display:flex;

    width:130px;

    height:38px;

}



.qty-btn{

    width:38px;

    border:none;

    background:#0b1f3a;

    color:white;

    cursor:pointer;

}





.quantity-input{

    width:55px;

    text-align:center;

    border:1px solid #ddd;

}





.purchase-buttons{

    display:flex;

    gap:10px;

    margin-top:20px;

}





.btn-cart,
.btn-buy{

    height:45px;

    padding:0 25px;

    border-radius:25px;

    border:none;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    font-size:.85rem;

    font-weight:700;

    cursor:pointer;

}



.btn-cart{

    background:#0b1f3a;

    color:white;

}



.btn-buy{

    background:#e60000;

    color:white;

}



.btn-wishlist{

    width:45px;

    border-radius:50%;

    border:1px solid #ddd;

    background:white;

}






/*==========================================================
    PRODUCT META
==========================================================*/


.product-meta{

    margin-top:25px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;

}



.meta-item{

    background:#f8fafc;

    padding:14px;

    border-radius:12px;

}



.meta-item span{

    display:block;

    color:#64748b;

    font-size:.75rem;

}



.meta-item strong{

    color:#0b1f3a;

    font-size:.85rem;

}






/*==========================================================
    FEATURES
==========================================================*/


.product-features{

    margin-top:25px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

}



.feature-item{

    background:#fff;

    border:1px solid #e5e7eb;

    padding:15px;

    border-radius:14px;

    display:flex;

    gap:12px;

    align-items:center;

}



.feature-item i{

    color:#e60000;

    font-size:22px;

}



.feature-item strong{

    display:block;

    font-size:.8rem;

}



.feature-item small{

    color:#64748b;

}







/*==========================================================
    SELLER CARD
==========================================================*/


.seller-card{

    margin-top:25px;

    background:#0b1f3a;

    color:white;

    padding:18px;

    border-radius:15px;

    display:flex;

    gap:15px;

}



.seller-icon{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#e60000;

    display:flex;

    align-items:center;

    justify-content:center;

}



.seller-card h4{

    margin:0 0 5px;

}



.seller-card p{

    margin:0;

    font-size:.8rem;

    color:#dbeafe;

}






/*==========================================================
    PRODUCT TABS
==========================================================*/


.product-tabs{

    background:white;

    margin-top:30px;

    padding:30px 0;

}



.tabs-nav{

    display:flex;

    gap:10px;

    border-bottom:1px solid #ddd;

}



.tab-btn{

    padding:12px 20px;

    border:none;

    background:none;

    font-weight:700;

    cursor:pointer;

}



.tab-btn.active{

    color:#e60000;

    border-bottom:3px solid #e60000;

}



.tab-panel{

    display:none;

    padding:25px 0;

    color:#475569;

    line-height:1.7;

}



.tab-panel.active{

    display:block;

}



.spec-table{

    width:100%;

    border-collapse:collapse;

}



.spec-table th,
.spec-table td{

    padding:12px;

    border-bottom:1px solid #eee;

    text-align:left;

}





.delivery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}



.delivery-grid div{

    text-align:center;

}





/*==========================================================
    RELATED PRODUCTS
==========================================================*/


.related-products{

    padding:45px 0;

}



.related-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}



.related-card{

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    border:1px solid #e5e7eb;

}



.related-image{

    height:170px;

    background:#f8fafc;

}



.related-image img{

    width:100%;

    height:100%;

    object-fit:contain;

}



.related-body{

    padding:15px;

}



.related-body h3{

    font-size:.9rem;

}



.related-price{

    color:#e60000;

    font-weight:800;

}



.related-btn{

    display:block;

    margin-top:10px;

    text-align:center;

    padding:8px;

    background:#0b1f3a;

    color:#fff;

    border-radius:20px;

    font-size:.75rem;

}







/*==========================================================
    RESPONSIVE
==========================================================*/


@media(max-width:992px){


.product-layout{

    grid-template-columns:1fr;

}



.product-features{

    grid-template-columns:repeat(2,1fr);

}



.related-grid{

    grid-template-columns:repeat(3,1fr);

}


}




@media(max-width:600px){


.product-information{

    padding:18px;

}



.product-information h1{

    font-size:1.3rem;

}



.main-product-image{

    height:300px;

}



.purchase-buttons{

    flex-wrap:wrap;

}



.product-meta{

    grid-template-columns:1fr;

}



.product-features{

    grid-template-columns:1fr;

}



.delivery-grid{

    grid-template-columns:1fr;

}



.related-grid{

    grid-template-columns:repeat(2,1fr);

}



}