/*=========================================================
AL ASIF TRADERS
PRODUCT PAGE
Part 1
=========================================================*/

:root{

    --primary:#16a34a;
    --primary-dark:#15803d;
    --secondary:#f8fafc;
    --border:#e5e7eb;
    --text:#1f2937;
    --muted:#6b7280;
    --danger:#ef4444;
    --warning:#f59e0b;
    --shadow:0 10px 30px rgba(0,0,0,.08);

}

body{

    background:#f7f8fa;
    font-family:'Poppins',sans-serif;
    color:var(--text);

}

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

.product-breadcrumb{

    background:#fff;
    border-bottom:1px solid var(--border);
    padding:14px 0;

}

.product-breadcrumb .breadcrumb{

    margin:0;
    font-size:14px;

}

.product-breadcrumb a{

    text-decoration:none;
    color:#555;
    transition:.3s;

}

.product-breadcrumb a:hover{

    color:var(--primary);

}

/*==================================================
PRODUCT DETAILS
==================================================*/

.product-details{

    padding:60px 0;

}

.product-gallery{

    background:#fff;
    border-radius:16px;
    padding:25px;
    box-shadow:var(--shadow);

}

/*==================================================
MAIN IMAGE
==================================================*/

.product-main-image{

    position:relative;
    overflow:hidden;
    border:1px solid #eee;
    border-radius:14px;
    background:#fff;
    height:460px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.product-main-image img{

    max-width:100%;
    max-height:100%;
    transition:.4s;

}

.product-main-image:hover img{

    transform:scale(1.08);

}

.discount-ribbon{

    position:absolute;
    top:15px;
    left:15px;

    background:#ef4444;
    color:#fff;

    padding:8px 14px;

    border-radius:30px;

    font-size:13px;
    font-weight:600;

}

/*==================================================
THUMBNAILS
==================================================*/

.product-thumbnails{

    margin-top:20px;

    display:flex;
    gap:12px;

    flex-wrap:wrap;

}

.thumb-item{

    width:85px;
    height:85px;

    border:2px solid transparent;

    border-radius:12px;

    overflow:hidden;

    cursor:pointer;

    transition:.3s;

}

.thumb-item:hover{

    border-color:var(--primary);

}

.product-thumb{

    width:100%;
    height:100%;

    object-fit:cover;

}

.product-thumb.active{

    border:2px solid var(--primary);

}

/*==================================================
EXTRA ICONS
==================================================*/

.product-extra-icons{

    display:grid;

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

    gap:15px;

}

.extra-box{

    background:#f8fafc;

    border-radius:12px;

    padding:16px;

    display:flex;

    align-items:center;

    gap:12px;

}

.extra-box i{

    width:45px;
    height:45px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;

}

.extra-box span{

    font-size:14px;
    font-weight:600;

}



/*=========================================================
PRODUCT INFORMATION
Part 2
=========================================================*/

.product-info{

    background:#fff;
    padding:35px;
    border-radius:16px;
    box-shadow:var(--shadow);

}

/*==================================================
BRAND
==================================================*/

.product-brand{

    margin-bottom:10px;

}

.product-brand a{

    color:var(--primary);
    font-size:15px;
    font-weight:600;
    text-decoration:none;

}

.product-brand a:hover{

    text-decoration:underline;

}

/*==================================================
TITLE
==================================================*/

.product-title{

    font-size:34px;
    font-weight:700;
    color:#222;
    line-height:1.35;
    margin-bottom:15px;

}

/*==================================================
RATING
==================================================*/

.product-rating{

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;

    margin-bottom:22px;

}

.rating-stars{

    color:#ffc107;
    font-size:18px;

}

.product-rating span{

    font-weight:700;
    color:#111;

}

.product-rating small{

    color:#777;

}

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

.product-meta{

    border-top:1px solid #eee;
    border-bottom:1px solid #eee;

    padding:18px 0;
    margin-bottom:25px;

}

.product-meta div{

    margin-bottom:10px;
    color:#444;
    font-size:15px;

}

.product-meta strong{

    color:#111;
    width:120px;
    display:inline-block;

}

/*==================================================
PRICE BOX
==================================================*/

.price-box{

    margin-bottom:28px;

}

.sale-price{

    color:var(--primary);
    font-size:42px;
    font-weight:700;
    margin-bottom:10px;

}

.price-row{

    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;

}

.old-price{

    color:#999;
    text-decoration:line-through;
    font-size:22px;

}

.save-badge{

    background:#ef4444;
    color:#fff;
    font-size:14px;
    font-weight:600;

    padding:7px 14px;
    border-radius:30px;

}

/*==================================================
DESCRIPTION
==================================================*/

.short-description{

    font-size:15px;
    line-height:1.9;
    color:#555;

    margin-bottom:30px;

}

/*==================================================
VARIANTS
==================================================*/

.variant-group{

    margin-bottom:25px;

}

.variant-group label{

    display:block;
    font-size:15px;
    font-weight:700;
    margin-bottom:12px;

}

.variant-options{

    display:flex;
    flex-wrap:wrap;
    gap:10px;

}

.variant-btn{

    background:#fff;

    border:2px solid #ddd;

    padding:10px 18px;

    border-radius:10px;

    cursor:pointer;

    font-size:14px;
    font-weight:600;

    transition:.3s;

}

.variant-btn:hover{

    border-color:var(--primary);
    color:var(--primary);

}

.variant-btn.active{

    background:var(--primary);
    color:#fff;
    border-color:var(--primary);

}

/*==================================================
QUANTITY
==================================================*/

.quantity-wrapper{

    margin-top:25px;
    margin-bottom:30px;

}

.quantity-wrapper label{

    display:block;
    font-weight:700;
    margin-bottom:10px;

}

.quantity-box{

    width:170px;
    height:52px;

    display:flex;

    border:2px solid #ddd;
    border-radius:10px;

    overflow:hidden;

}

.qty-btn{

    width:50px;

    background:#f5f5f5;

    border:none;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

.qty-btn:hover{

    background:var(--primary);
    color:#fff;

}

.quantity-box input{

    flex:1;

    border:none;

    text-align:center;

    font-size:18px;
    font-weight:600;

    outline:none;

}


/*=========================================================
PRODUCT ACTION BUTTONS
Part 3
=========================================================*/

.product-action-buttons{

    display:flex;
    gap:15px;
    flex-wrap:wrap;

    margin-top:30px;
    margin-bottom:25px;

}

.btn-add-cart,
.btn-buy-now{

    flex:1;

    min-height:56px;

    border:none;

    border-radius:12px;

    font-size:16px;
    font-weight:600;

    transition:.35s;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    cursor:pointer;

}

.btn-add-cart{

    background:var(--primary);
    color:#fff;

}

.btn-add-cart:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(22,163,74,.25);

}

.btn-buy-now{

    background:#ff9800;
    color:#fff;

}

.btn-buy-now:hover{

    background:#f57c00;

    transform:translateY(-3px);

}

/*==================================================
SECONDARY BUTTONS
==================================================*/

.extra-buttons{

    display:flex;
    gap:12px;
    flex-wrap:wrap;

    margin-bottom:35px;

}

.btn-whatsapp-order{

    flex:1;

    min-width:220px;

    height:52px;

    border-radius:12px;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    font-weight:600;

    transition:.35s;

}

.btn-whatsapp-order:hover{

    background:#1db954;

    color:#fff;

}

.btn-extra{

    background:#fff;

    border:2px solid #ddd;

    color:#444;

    padding:12px 20px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

    cursor:pointer;

}

.btn-extra:hover{

    background:var(--primary);

    border-color:var(--primary);

    color:#fff;

}

/*==================================================
FEATURE BOXES
==================================================*/

.product-features{

    display:grid;

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

    gap:18px;

    margin-top:25px;

}

.feature-box{

    background:#fafafa;

    border:1px solid #eee;

    border-radius:14px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:15px;

    transition:.35s;

}

.feature-box:hover{

    border-color:var(--primary);

    transform:translateY(-5px);

}

.feature-box i{

    width:55px;
    height:55px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:24px;

    flex-shrink:0;

}

.feature-box h6{

    margin:0;
    font-weight:700;
    font-size:16px;

}

.feature-box p{

    margin:4px 0 0;
    color:#777;
    font-size:14px;

}

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

.product-tabs-section{

    padding:70px 0;

}

.product-tabs-section .nav-tabs{

    border:none;

    margin-bottom:30px;

    gap:15px;

}

.product-tabs-section .nav-link{

    border:none;

    background:#f4f4f4;

    color:#555;

    font-weight:600;

    padding:14px 30px;

    border-radius:10px;

    transition:.3s;

}

.product-tabs-section .nav-link:hover{

    background:#e9f8ef;

    color:var(--primary);

}

.product-tabs-section .nav-link.active{

    background:var(--primary);

    color:#fff;

}

.tab-content{

    background:#fff;

    border-radius:16px;

    box-shadow:var(--shadow);

    padding:35px;

}

.tab-pane{

    color:#555;

    line-height:1.9;

    font-size:15px;

}

.tab-pane table{

    margin-bottom:0;

}

.tab-pane table th{

    width:220px;

    background:#f8f8f8;

    font-weight:600;

}

.tab-pane table td{

    vertical-align:middle;

}

.tab-pane img{

    max-width:100%;

    border-radius:10px;

}

/*==================================================
NO REVIEW
==================================================*/

#reviews{

    text-align:center;

}

#reviews i{

    font-size:65px;

    color:var(--primary);

    margin-bottom:20px;

}

#reviews h4{

    font-weight:700;

}

#reviews p{

    color:#777;

}


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

.related-products,
.recent-products{

    padding:70px 0;

}

.section-title{

    text-align:center;
    margin-bottom:40px;

}

.section-title h2{

    font-size:34px;
    font-weight:700;
    color:#222;

}

.section-title p{

    color:#777;
    margin-top:8px;

}

/*==================================================
RELATED CARD
==================================================*/

.related-card{

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.related-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.related-card img{

    width:100%;
    height:240px;

    object-fit:contain;

    background:#fff;

    padding:20px;

    transition:.35s;

}

.related-card:hover img{

    transform:scale(1.05);

}

.related-body{

    padding:20px;

}

.related-brand{

    color:var(--primary);

    font-size:13px;

    font-weight:600;

    margin-bottom:8px;

}

.related-body h5{

    font-size:17px;

    min-height:50px;

    margin-bottom:15px;

}

.related-body h5 a{

    text-decoration:none;

    color:#222;

    transition:.3s;

}

.related-body h5 a:hover{

    color:var(--primary);

}

.related-price{

    color:var(--primary);

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

}

.related-body .btn{

    border-radius:10px;
    font-weight:600;

}

/*==================================================
RECENT PRODUCTS
==================================================*/

.recent-products{

    background:#f7f8fa;

}

/*==================================================
MOBILE BUY BAR
==================================================*/

.mobile-buy-bar{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    background:#fff;

    border-top:1px solid #ddd;

    display:none;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    padding:12px;

    z-index:9999;

    box-shadow:0 -8px 20px rgba(0,0,0,.10);

}

.mobile-price{

    font-size:22px;

    font-weight:700;

    color:var(--primary);

    white-space:nowrap;

}

.mobile-cart-btn,
.mobile-buy-btn{

    flex:1;

    border:none;

    height:48px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.mobile-cart-btn{

    background:var(--primary);

    color:#fff;

}

.mobile-buy-btn{

    background:#ff9800;

    color:#fff;

}

.mobile-cart-btn:hover{

    background:var(--primary-dark);

}

.mobile-buy-btn:hover{

    background:#ef6c00;

}

/*==================================================
GENERAL ANIMATIONS
==================================================*/

.product-main-image img,
.related-card img,
.variant-btn,
.btn-add-cart,
.btn-buy-now,
.btn-extra,
.btn-whatsapp-order,
.feature-box{

    transition:all .35s ease;

}

button{

    outline:none;

}

button:focus{

    box-shadow:none;

}

img{

    user-select:none;

}

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

@media(max-width:1200px){

.product-title{

    font-size:30px;

}

.sale-price{

    font-size:36px;

}

.related-card img{

    height:220px;

}

}

@media(max-width:992px){

.product-gallery,
.product-info{

    margin-bottom:30px;

}

.product-features{

    grid-template-columns:1fr;

}

.product-extra-icons{

    grid-template-columns:1fr 1fr;

}

.related-card img{

    height:200px;

}

}

@media(max-width:768px){

.product-title{

    font-size:26px;

}

.sale-price{

    font-size:32px;

}

.product-action-buttons{

    flex-direction:column;

}

.extra-buttons{

    flex-direction:column;

}

.btn-whatsapp-order,
.btn-extra{

    width:100%;

}

.product-tabs-section .nav-tabs{

    flex-wrap:nowrap;

    overflow-x:auto;

}

.product-tabs-section .nav-link{

    white-space:nowrap;

}

.related-card img{

    height:170px;

}

.mobile-buy-bar{

    display:flex;

}

body{

    padding-bottom:90px;

}

}

@media(max-width:576px){

.product-details{

    padding:30px 0;

}

.product-gallery,
.product-info{

    padding:18px;

}

.product-main-image{

    height:320px;

}

.thumb-item{

    width:65px;
    height:65px;

}

.product-extra-icons{

    grid-template-columns:1fr;

}

.related-card img{

    height:150px;

}

.related-price{

    font-size:20px;

}

.section-title h2{

    font-size:28px;

}

.tab-content{

    padding:20px;

}

.product-meta strong{

    width:95px;

}

.quantity-box{

    width:150px;

}

}

@media(max-width:420px){

.product-title{

    font-size:22px;

}

.sale-price{

    font-size:28px;

}

.mobile-price{

    font-size:18px;

}

.mobile-cart-btn,
.mobile-buy-btn{

    font-size:14px;

}

}