/*--------------------------------------
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;

}

.main-discount-badge
{
    position:absolute;

    top:12px;
    left:12px;

    z-index:999;

    background:#dc3545;
    color:#fff;

    padding:6px 12px;

    font-size:20px;
    font-weight:700;

    border-radius:10px;

    box-shadow:0 4px 12px rgba(220,53,69,.25);

    pointer-events:none;
}

.product-image{

    width:100%;

    height:360px;

    object-fit:contain;
    
    position:relative;
    
    z-index:1;

	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:65px;

    height:65px;

    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
{
    width: 145px;
}

.quantity-box .btn
{
    width: 42px;
    height: 40px;
}

.quantity-input
{
    width: 60px;

    border: 1px solid #ced4da;

    border-left: 0;
    border-right: 0;

    text-align: center;

    font-size: 16px;

    font-weight: 600;

    height: 40px;

    outline: none;

    background: #fff;
}

.quantity-input:focus
{
    outline: none;
}

.quantity-input::-webkit-inner-spin-button,
.quantity-input::-webkit-outer-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}

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

.product-name{

    font-size:34px;

    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;

    }

}

/* =====================================
   Product Catalog Page
===================================== */

.product-page-header {
    margin-bottom: 40px;
}


.product-grid .product-card {
    height: 100%;
}


.breadcrumb {

    font-size: 14px;

}


.breadcrumb a {

    color: #dc3545;

    text-decoration: none;

}


.breadcrumb a:hover {

    text-decoration: underline;

}

/*--------------------------------------
Shared Product Card
--------------------------------------*/

.product-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.35s ease;

    display:flex;

    flex-direction:column;

    height:100%;

}

.product-card:hover{

    transform:translateY(-8px);

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

}


/*--------------------------------------
Product Image
--------------------------------------*/

.product-card-image-wrapper{

    position:relative;

    background:#f8f9fa;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    height:220px;

    overflow:hidden;

}

.product-card-image{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:.35s ease;

}

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

    transform:scale(1.05);

}


/*--------------------------------------
Badge
--------------------------------------*/

.product-card-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#dc3545;

    color:#fff;

    padding:6px 14px;

    border-radius:50px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

    z-index:2;

}


/*--------------------------------------
Body
--------------------------------------*/

.product-card-body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:18px;

}


/*--------------------------------------
Chip
--------------------------------------*/

.product-chip{

    display:inline-block;

    width:max-content;

    padding:5px 12px;

    border:1px solid #f3b2b8;

    border-radius:50px;

    background:#fff5f5;

    color:#dc3545;

    font-size:11px;

    font-weight:600;

    margin-bottom:15px;

}


/*--------------------------------------
Title
--------------------------------------*/

.product-card-title{

    font-size:21px;

    font-weight:700;

    line-height:1.4;

    min-height:58px;

    margin-bottom:12px;

}


/*--------------------------------------
Description
--------------------------------------*/

.product-card-description{

    color:#6c757d;

    line-height:1.6;

    font-size:14px;

    min-height:48px;

    margin-bottom:18px;

}


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

.product-card-price{

    color:#dc3545;

    font-size:30px;

    font-weight:700;

    margin-top:15px;

}


/*--------------------------------------
Stock
--------------------------------------*/

.product-card-stock{

    color:#198754;

    font-size:14px;

    font-weight:600;

    margin-top:8px;

}


/*--------------------------------------
Button
--------------------------------------*/

.product-card-btn{

    margin-top:auto;

    border-radius:12px;

    background:#dc3545;

    color:#fff;

    font-weight:600;

    padding:11px;

    transition:.3s;

}

.product-card-btn:hover{

    background:#bb2d3b;

    color:#fff;

}


/*--------------------------------------
Product Action Buttons
--------------------------------------*/

.btn-add-cart,
.btn-buy-now
{
    height: 42px;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 600;
}

.btn-add-cart i,
.btn-buy-now i
{
    font-size: 18px;
}

/*--------------------------------------
Product Thumbnail Gallery
--------------------------------------*/

.product-thumbnails
{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 0;
    scrollbar-width: thin;
}

.product-thumbnails::-webkit-scrollbar
{
    height: 6px;
}

.product-thumbnails::-webkit-scrollbar-thumb
{
    background: #ced4da;
    border-radius: 10px;
}

.product-thumbnails .thumbnail
{
    flex: 0 0 auto;
}