/* ================================
CAROUSEL GALLERY
================================ */

.carousel-wrapper{
max-width:1100px;
margin:0 auto;
overflow:hidden;
position:relative;
}

.carousel-wrapper::before,
.carousel-wrapper::after{
content:"";
position:absolute;
top:0;
width:120px;
height:100%;
z-index:5;
pointer-events:none;
}

.carousel-wrapper::before{
left:0;
background:linear-gradient(to right,#0f1115,transparent);
}

.carousel-wrapper::after{
right:0;
background:linear-gradient(to left,#0f1115,transparent);
}

.carousel-track{
display:flex;
gap:40px;
will-change:transform;
}

.product-card{
flex:0 0 340px;
background:#1a1d24;
border-radius:16px;
overflow:hidden;
cursor:pointer;
display:flex;
flex-direction:column;
transition:transform .4s ease;
}

.product-card:hover{
transform:scale(1.04);
}

.product-card img{
width:100%;
height:240px;
object-fit:contain;
background:#000;
transition:transform .4s ease;
}

.product-card:hover img{
transform:scale(1.06);
}

.product-card h3{
text-align:center;
padding:18px 12px;
font-size:1rem;
}


/* ================================
MODAL
================================ */

.product-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.9);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:.4s ease;
z-index:9999;
}

.product-modal.active{
opacity:1;
visibility:visible;
}

.modal-content{
text-align:center;
transform:scale(.9);
transition:.4s ease;
}

.product-modal.active .modal-content{
transform:scale(1);
}

.modal-content img{
max-width:90vw;
max-height:70vh;
border-radius:16px;
}

.modal-close{
position:absolute;
top:30px;
right:40px;
font-size:40px;
color:white;
cursor:pointer;
}

.modal-content h2{
margin-top:20px;
}