/*--------------------------------------
Product Image Zoom Wrapper
--------------------------------------*/

.product-image-wrapper{

    position:relative;

    overflow:hidden;

    border:1px solid #dee2e6;

    border-radius:12px;

    background:#f8f9fa;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:zoom-in;

}

.product-image{

    width:100%;

    height:550px;

    object-fit:cover;

	transition:
		transform .12s linear,
		opacity .20s ease;
	
	will-change:transform;

}

/*--------------------------------------
Zoom Lens
--------------------------------------*/

.zoom-lens{

    position:absolute;

    width:140px;

    height:140px;

    border:2px solid rgba(255,255,255,.9);

    background:rgba(255,255,255,.18);

    border-radius:12px;

    backdrop-filter:blur(2px);

    pointer-events:none;

    display:none;

    z-index:20;

}

/*--------------------------------------
Product Thumbnails
--------------------------------------*/

.thumbnail{

    width:80px;

    height:80px;

    object-fit:cover;

    cursor:pointer;

    border:2px solid transparent;

    border-radius:10px;

    transition:all .25s ease;

}

.thumbnail:hover{

    border-color:#dc3545;

    transform:translateY(-2px);

}

.thumbnail.active{

    border-color:#dc3545;

    box-shadow:0 0 0 2px rgba(220,53,69,.15);

}


/*--------------------------------------
Product Price
--------------------------------------*/

.product-price{

    font-size:40px;

    font-weight:bold;

    color:#dc3545;

}


/*--------------------------------------
Product Rating
--------------------------------------*/

.product-rating{

    color:#6c757d;

    margin-bottom:20px;

}


/*--------------------------------------
Purchase Buttons
--------------------------------------*/

.btn-buy{

    transition:.2s;

}

.btn-buy:hover{

    transform:translateY(-3px);

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}


/*--------------------------------------
Quantity
--------------------------------------*/

.quantity-box{

    max-width:170px;
	

}

/*--------------------------------------
Product Information
--------------------------------------*/

.product-name{

    font-size:42px;

    font-weight:700;

    letter-spacing:.3px;

    padding-left:20px;

}

.section-title{

    font-size:20px;

    font-weight:600;

    margin-bottom:15px;

}

/*------------------------------------
Homepage Product Cards
------------------------------------*/

.home-product-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.35s;

    height:100%;

}

.home-product-card:hover{

    transform:translateY(-8px);

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

}

.home-product-image-wrapper{

    position:relative;

    overflow:hidden;

}

.home-product-image{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.35s;

}

.home-product-card:hover .home-product-image{

    transform:scale(1.08);

}

.home-product-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#dc3545;

    color:#fff;

    padding:6px 12px;

    border-radius:30px;

    font-size:11px;

    font-weight:700;

}

.home-product-body{

    padding:22px;

}

.home-product-category{

    color:#dc3545;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.home-product-title{

    font-size:22px;

    font-weight:700;

    margin:10px 0;

}

.home-product-description{

    color:#666;

    line-height:1.6;

    min-height:55px;

}

.home-product-price{

    color:#dc3545;

    font-size:30px;

    font-weight:700;

}

.home-product-stock{

    color:#198754;

    font-weight:600;

    margin-top:8px;

}

.home-product-btn{

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.home-product-btn:hover{

    transform:translateY(-2px);

}

/*--------------------------------------
Image Lightbox
--------------------------------------*/

.lightbox{

    display:none;

    position:fixed;

    inset:0;

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

    z-index:9999;

    justify-content:center;

    align-items:center;

    animation:fadeIn .25s ease;

}

.lightbox.show{

    display:flex;

}

.lightbox-image{

    max-width:90%;

    max-height:90%;

    object-fit:contain;

    border-radius:12px;

    transform:none !important;

}

.lightbox-close{

    position:absolute;

    top:25px;

    right:40px;

    color:#ffffff;

    font-size:45px;

    cursor:pointer;

    user-select:none;

    transition:.2s;

}

.lightbox-close:hover{

    color:#dc3545;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}