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

.product-details{

padding:80px 0;

background:#FAFAFA;

}

.product-details-grid{

display:grid;

grid-template-columns:520px 1fr;

gap:70px;

align-items:start;

}

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

.product-gallery{

position:sticky;

top:100px;

}

.product-main-image{

background:#fff;

border-radius:28px;

padding:25px;

border:1px solid #EEF2F7;

box-shadow:0 15px 40px rgba(15,23,42,.05);

overflow:hidden;

}

.product-main-image img{

width:100%;

height:520px;

object-fit:contain;

transition:.45s;

cursor:zoom-in;

}

.product-main-image:hover img{

transform:scale(1.08);

}

/*==================================================
                CONTENT
==================================================*/

.product-category{

display:inline-flex;

padding:8px 16px;

border-radius:40px;

background:#DCFCE7;

color:#15803D;

font-weight:700;

margin-bottom:18px;

}

.product-content h1{

font-size:44px;

line-height:1.2;

margin-bottom:20px;

color:#111827;

}

.product-rating{

display:flex;

align-items:center;

gap:4px;

margin-bottom:24px;

color:#F59E0B;

}

.product-rating span{

margin-left:10px;

color:#6B7280;

}

.product-price{

display:flex;

align-items:center;

gap:16px;

margin-bottom:32px;

flex-wrap:wrap;

}

.product-price h2{

font-size:46px;

color:#111827;

}

.product-price span{

font-size:22px;

text-decoration:line-through;

color:#9CA3AF;

}

.product-price label{

padding:8px 14px;

background:#DCFCE7;

border-radius:40px;

font-weight:700;

color:#15803D;

}

.product-short-info{

display:grid;

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

gap:18px;

margin-bottom:35px;

}

.product-short-info div{

background:#fff;

padding:22px;

border-radius:18px;

border:1px solid #EEF2F7;

}

.product-short-info strong{

display:block;

margin-bottom:8px;

font-size:14px;

color:#6B7280;

}

.product-short-info p{

font-weight:700;

color:#111827;

}

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

.product-buttons{

display:flex;

gap:18px;

margin-bottom:40px;

}

.btn-primary,

.btn-secondary{

flex:1;

padding:18px;

border:none;

border-radius:16px;

font-size:16px;

font-weight:700;

display:flex;

justify-content:center;

align-items:center;

gap:10px;

cursor:pointer;

transition:.35s;

}

.btn-primary{

background:#16A34A;

color:#fff;

}

.btn-primary:hover{

background:#15803D;

transform:translateY(-3px);

}

.btn-secondary{

background:#fff;

border:1px solid #E5E7EB;

}

.btn-secondary:hover{

background:#111827;

color:#fff;

}

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

.product-description{

background:#fff;

padding:30px;

border-radius:22px;

border:1px solid #EEF2F7;

}

.product-description h3{

margin-bottom:18px;

font-size:26px;

}

.product-description p{

line-height:1.9;

color:#4B5563;

}

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

.related-products{

margin-top:90px;

}

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

@media(max-width:1200px){

.product-details-grid{

grid-template-columns:420px 1fr;

gap:45px;

}

.product-main-image img{

height:430px;

}

}

@media(max-width:992px){

.product-details-grid{

grid-template-columns:1fr;

}

.product-gallery{

position:static;

}

.product-main-image img{

height:400px;

}

}

@media(max-width:768px){

.product-content h1{

font-size:34px;

}

.product-price h2{

font-size:34px;

}

.product-short-info{

grid-template-columns:1fr;

}

.product-buttons{

flex-direction:column;

}

}

@media(max-width:576px){

.product-details{

padding:45px 0;

}

.product-main-image{

padding:15px;

}

.product-main-image img{

height:300px;

}

.product-content h1{

font-size:28px;

}

.product-price{

gap:10px;

}

.product-price h2{

font-size:30px;

}

.product-price span{

font-size:18px;

}

.product-description{

padding:22px;

}

}

/*=========================================
        PRODUCT ACTION CARD
=========================================*/

.product-action-card{

background:#fff;

border:1px solid #E5E7EB;

border-radius:24px;

padding:24px;

margin-bottom:35px;

box-shadow:0 10px 30px rgba(15,23,42,.05);

}

.product-quantity{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:24px;

}

.product-quantity span{

font-weight:700;

color:#111827;

}

.quantity-box{

display:flex;

align-items:center;

border:1px solid #E5E7EB;

border-radius:14px;

overflow:hidden;

}

.quantity-box button{

width:46px;

height:46px;

border:none;

background:#F9FAFB;

cursor:pointer;

font-size:22px;

font-weight:700;

transition:.3s;

}

.quantity-box button:hover{

background:#16A34A;

color:#fff;

}

.quantity-box input{

width:60px;

height:46px;

border:none;

text-align:center;

font-size:18px;

font-weight:700;

outline:none;

}

.buy-form{
        width: 100px;
        height: 100px;
}

/*==================================
        BUY NOW BUTTON
==================================*/

.buy-btn{

width:100%;

display:flex;

justify-content:center;

align-items:center;

gap:10px;

padding:15px 20px;

margin-top:15px;

border:none;

outline:none;

border-radius:14px;

cursor:pointer;

font-size:16px;

font-weight:700;

color:#fff;

background:linear-gradient(135deg,#16a34a,#22c55e);

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

transition:all .35s ease;

position:relative;

overflow:hidden;

}

.buy-btn i{

font-size:22px;

transition:.35s;

}

.buy-btn:hover{

transform:translateY(-4px);

box-shadow:0 18px 35px rgba(22,163,74,.35);

background:linear-gradient(135deg,#15803d,#16a34a);

}

.buy-btn:hover i{

transform:translateX(4px) scale(1.15);

}

.buy-btn:active{

transform:scale(.97);

}

.buy-btn::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transition:.7s;

}

.buy-btn:hover::before{

left:100%;

}

/*==================================
        MOBILE
==================================*/

@media(max-width:768px){

.buy-btn{

padding:14px 18px;

font-size:15px;

}

.buy-btn i{

font-size:20px;

}

}


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

.product-thumbnail-wrapper{

display:flex;

gap:15px;

margin-top:22px;

flex-wrap:wrap;

}

.product-thumbnail{

width:90px;

height:90px;

border-radius:18px;

overflow:hidden;

border:2px solid transparent;

cursor:pointer;

transition:.35s;

background:#fff;

}

.product-thumbnail img{

width:100%;

height:100%;

object-fit:cover;

}

.product-thumbnail:hover{

transform:translateY(-5px);

border-color:#16A34A;

}

.active-thumb{

border-color:#16A34A;

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

}

@media(max-width:768px){

.product-thumbnail{

width:70px;

height:70px;

}

.product-thumbnail-wrapper{

justify-content:center;

}

}

/*=============================
        IMAGE FADE
=============================*/

#mainProductImage{

transition:opacity .25s ease,transform .35s ease;

}

.fade-in{

animation:imageFade .35s;

}

@keyframes imageFade{

from{

opacity:.2;
transform:scale(.96);

}

to{

opacity:1;
transform:scale(1);

}

}

/*=============================
        ACTIVE THUMB
=============================*/

.product-thumbnail{

transition:.3s;

}

.product-thumbnail:hover{

border-color:#16A34A;

transform:translateY(-4px);

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

}

.active-thumb{

border:2px solid #16A34A;

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

}