/*==================================================
QUICK VIEW MODAL
==================================================*/

.quick-view{

position:fixed;

inset:0;

background:rgba(0,0,0,.55);

display:none;

justify-content:center;

align-items:center;

z-index:999999;

backdrop-filter:blur(6px);

animation:fadeIn .25s ease;

}

.quick-view.active{

display:flex;

}

.quick-overlay{

position:absolute;

inset:0;

}

.quick-box{

position:relative;

background:#fff;

width:min(1100px,95vw);

max-height:90vh;

overflow:auto;

border-radius:24px;

box-shadow:0 30px 80px rgba(0,0,0,.25);

animation:popup .28s ease;

}

.quick-close{

position:absolute;

right:18px;

top:18px;

width:44px;

height:44px;

border:none;

border-radius:50%;

cursor:pointer;

background:#f5f5f5;

font-size:28px;

transition:.3s;

z-index:50;

}

.quick-close:hover{

background:#c8104d;

color:#fff;

}

.quick-content{

display:grid;

grid-template-columns:520px 1fr;

gap:45px;

padding:40px;

}

/* IMAGE */

.quick-images{

display:flex;

gap:15px;

}

.quick-thumbs{

display:flex;

flex-direction:column;

gap:12px;

}

.quick-thumbs img{

width:70px;

height:85px;

object-fit:cover;

border-radius:14px;

cursor:pointer;

border:2px solid transparent;

transition:.3s;

}

.quick-thumbs img.active{

border-color:#c8104d;

}

.quick-main{

flex:1;

border-radius:20px;

overflow:hidden;

background:#fafafa;

}

.quick-main img{

width:100%;

height:600px;

object-fit:cover;

transition:.35s;

}

.quick-main img:hover{

transform:scale(1.08);

}

/* DETAILS */

.quick-info h2{

font-size:34px;

margin-bottom:10px;

}

.quick-category{

font-size:14px;

color:#999;

margin-bottom:18px;

}

.quick-rating{

color:#ffb400;

font-size:15px;

margin-bottom:18px;

}

.quick-price{

display:flex;

align-items:center;

gap:12px;

margin-bottom:20px;

}

.quick-current{

font-size:34px;

font-weight:700;

color:#c8104d;

}

.quick-old{

font-size:20px;

text-decoration:line-through;

color:#888;

}

.quick-save{

display:inline-block;

padding:8px 16px;

background:#dff7e2;

color:#188038;

border-radius:40px;

font-weight:600;

margin-bottom:25px;

}

/* COLORS */

.quick-title{

font-weight:700;

margin:22px 0 12px;

}

.quick-colors{

display:flex;

gap:12px;

flex-wrap:wrap;

}

.quick-color{

width:42px;

height:42px;

border-radius:50%;

cursor:pointer;

border:3px solid transparent;

transition:.3s;

}

.quick-color.active{

border-color:#c8104d;

}

/* SIZE */

.quick-sizes{

display:flex;

gap:10px;

flex-wrap:wrap;

}

.quick-size{

padding:11px 18px;

border:2px solid #ddd;

border-radius:12px;

cursor:pointer;

background:#fff;

transition:.25s;

}

.quick-size.active{

background:#c8104d;

border-color:#c8104d;

color:#fff;

}

/* QUANTITY */

.quick-qty{

display:flex;

align-items:center;

width:150px;

margin-top:18px;

border:2px solid #eee;

border-radius:14px;

overflow:hidden;

}

.quick-qty button{

width:45px;

height:48px;

border:none;

background:#fff;

cursor:pointer;

font-size:22px;

}

.quick-qty span{

flex:1;

text-align:center;

font-weight:700;

}

/* BUTTONS */

.quick-actions{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

margin-top:35px;

}

.quick-cart{

height:58px;

border:none;

border-radius:16px;

background:#fff0f5;

color:#c8104d;

font-weight:700;

cursor:pointer;

font-size:16px;

}

.quick-buy{

height:58px;

border:none;

border-radius:16px;

background:linear-gradient(135deg,#c8104d,#ef2d73);

color:#fff;

font-weight:700;

font-size:16px;

cursor:pointer;

}

.quick-cart:hover,

.quick-buy:hover{

transform:translateY(-3px);

}

/* MOBILE */

@media(max-width:900px){

.quick-content{

grid-template-columns:1fr;

padding:22px;

}

.quick-images{

flex-direction:column-reverse;

}

.quick-thumbs{

flex-direction:row;

overflow:auto;

}

.quick-main img{

height:420px;

}

.quick-info h2{

font-size:28px;

}

}

@media(max-width:480px){

.quick-main img{

height:320px;

}

.quick-actions{

grid-template-columns:1fr;

}

.quick-current{

font-size:28px;

}

.quick-info h2{

font-size:22px;

}

}

/* ANIMATION */

@keyframes popup{

from{

opacity:0;

transform:translateY(30px) scale(.96);

}

to{

opacity:1;

transform:none;

}

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}