/*=========================================================
    SANVI MASALE
    PRODUCT DETAILS
=========================================================*/

:root{

    --pd-primary:#C62828;
    --pd-primary-dark:#A61919;
    --pd-red:#E53935;

    --pd-green:#1B5E20;
    --pd-green-light:#2E7D32;

    --pd-gold:#FFC107;

    --pd-dark:#242424;
    --pd-text:#666;
    --pd-light:#FFF8F2;

    --pd-border:#EEEEEE;

    --pd-shadow:
        0 15px 40px rgba(0,0,0,.08);

    --pd-transition:
        all .35s ease;

}


/*=========================================================
    PAGE
=========================================================*/

.product-details-page{

    background:#fff;

    overflow:hidden;

}


/*=========================================================
    BREADCRUMB
=========================================================*/

.product-breadcrumb-section{

    background:#FFF9F4;

    border-bottom:
        1px solid #F2E6DC;

}


.product-breadcrumb{

    min-height:58px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    font-size:12px;

}


.product-breadcrumb a{

    color:#777;

    text-decoration:none;

    transition:var(--pd-transition);

}


.product-breadcrumb a:hover{

    color:var(--pd-primary);

}


.product-breadcrumb i{

    font-size:9px;

    color:#aaa;

}


.product-breadcrumb span{

    color:var(--pd-primary);

    font-weight:700;

}


/*=========================================================
    MAIN PRODUCT
=========================================================*/

.product-main-section{

    padding:70px 0 80px;

}


/*=========================================================
    PRODUCT GALLERY
=========================================================*/

.product-gallery{

    position:relative;

    min-height:620px;

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            #FFFDF9,
            #FFF2E6
        );

    border:1px solid
        #F0E4DA;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


.product-gallery::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    border:70px solid
        rgba(198,40,40,.045);

    left:-180px;

    bottom:-170px;

}


.product-gallery::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:
        rgba(255,193,7,.07);

    right:-100px;

    top:-100px;

}


.product-main-image{

    position:relative;

    z-index:2;

    width:100%;

    height:580px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;

}


.product-main-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    mix-blend-mode:multiply;

    transition:
        transform .5s ease;

}


.product-gallery:hover
.product-main-image img{

    transform:scale(1.035);

}


/*=========================================================
    GALLERY BADGE
=========================================================*/

.product-gallery-badge{

    position:absolute;

    top:22px;

    left:22px;

    z-index:5;

    display:flex;

    align-items:center;

    gap:6px;

    padding:9px 15px;

    border-radius:30px;

    background:#fff;

    color:var(--pd-primary);

    font-size:11px;

    font-weight:800;

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

}


.product-gallery-badge i{

    color:var(--pd-gold);

}


/*=========================================================
    WISHLIST
=========================================================*/

.product-detail-wishlist{

    position:absolute;

    right:22px;

    top:22px;

    z-index:5;

    width:45px;

    height:45px;

    border:1px solid
        #E8E8E8;

    border-radius:50%;

    background:#fff;

    color:#555;

    cursor:pointer;

    transition:var(--pd-transition);

}


.product-detail-wishlist:hover,
.product-detail-wishlist.active{

    background:var(--pd-primary);

    color:#fff;

    border-color:
        var(--pd-primary);

    transform:scale(1.08);

}


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

.product-image-caption{

    position:absolute;

    z-index:4;

    bottom:18px;

    left:50%;

    transform:translateX(-50%);

    white-space:nowrap;

    padding:9px 18px;

    border-radius:30px;

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

    box-shadow:
        0 7px 20px rgba(0,0,0,.08);

    color:#777;

    font-size:10px;

    font-weight:600;

}


.product-image-caption i{

    color:var(--pd-green);

    margin-right:5px;

}


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

.product-details-content{

    padding:10px 5px;

}


.detail-category{

    display:inline-block;

    padding:7px 13px;

    border-radius:30px;

    background:#FFF3E0;

    color:var(--pd-primary);

    font-size:10px;

    letter-spacing:1.2px;

    font-weight:800;

    text-transform:uppercase;

    margin-bottom:13px;

}


.detail-product-title{

    color:var(--pd-dark);

    font-size:
        clamp(32px,4vw,48px);

    font-weight:800;

    line-height:1.1;

    margin:0 0 15px;

}


.detail-rating-row{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    padding-bottom:22px;

    border-bottom:
        1px solid var(--pd-border);

}


.detail-stars{

    color:#FFC107;

    font-size:17px;

    letter-spacing:2px;

}


.detail-rating-row span{

    font-size:12px;

    color:#777;

    font-weight:600;

}


.detail-rating-row .rating-divider{

    color:#ccc;

}


.detail-short-description{

    color:#666;

    font-size:15px;

    line-height:1.8;

    margin:22px 0;

}


/*=========================================================
    PRICE
=========================================================*/

.detail-price-box{

    padding:17px 20px;

    background:#FFF9F4;

    border:1px solid
        #F2E1D4;

    border-radius:15px;

    margin-bottom:24px;

}


.price-label{

    display:block;

    color:#999;

    font-size:11px;

    font-weight:700;

    margin-bottom:5px;

}


.detail-price{

    color:var(--pd-primary);

    font-size:29px;

    font-weight:800;

}


.detail-price-box small{

    color:#999;

    font-size:10px;

}


/*=========================================================
    PACK SIZE
=========================================================*/

.pack-size-section{

    margin-bottom:25px;

}


.pack-size-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:12px;

}


.pack-size-header strong{

    color:#333;

    font-size:14px;

}


.pack-size-header span{

    color:var(--pd-primary);

    font-size:10px;

    font-weight:700;

}


.pack-size-options{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


.pack-option{

    position:relative;

    cursor:pointer;

}


.pack-option input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}


.pack-option-inner{

    min-width:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:13px 17px;

    border:1px solid #ddd;

    border-radius:11px;

    background:#fff;

    transition:var(--pd-transition);

}


.pack-option:hover
.pack-option-inner{

    border-color:var(--pd-primary);

}


.pack-option.active
.pack-option-inner{

    background:#FFF3E0;

    border-color:var(--pd-primary);

    color:var(--pd-primary);

}


.pack-check{

    width:18px;

    height:18px;

    border:1px solid #ccc;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:8px;

    color:transparent;

}


.pack-option.active
.pack-check{

    background:var(--pd-primary);

    border-color:var(--pd-primary);

    color:#fff;

}


.pack-name{

    font-size:12px;

    font-weight:700;

}


/*=========================================================
    QUANTITY
=========================================================*/

.quantity-section{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:22px;

}


.quantity-section > strong{

    font-size:14px;

    color:#333;

}


.quantity-control{

    height:46px;

    display:flex;

    align-items:center;

    border:1px solid #ddd;

    border-radius:11px;

    overflow:hidden;

}


.quantity-btn{

    width:42px;

    height:46px;

    border:0;

    background:#fff;

    color:#555;

    cursor:pointer;

    transition:var(--pd-transition);

}


.quantity-btn:hover{

    background:var(--pd-primary);

    color:#fff;

}


.quantity-control input{

    width:50px;

    height:46px;

    border:0;

    border-left:1px solid #eee;

    border-right:1px solid #eee;

    text-align:center;

    font-size:14px;

    font-weight:700;

    color:#333;

    outline:none;

}


/*=========================================================
    ACTIONS
=========================================================*/

.product-detail-actions{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:10px;

    margin-bottom:25px;

}


.detail-add-cart,
.detail-buy-now{

    height:54px;

    border-radius:13px;

    border:0;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    cursor:pointer;

    font-size:14px;

    font-weight:800;

    transition:var(--pd-transition);

}


.detail-add-cart{

    background:#FFF3E0;

    border:1px solid
        #FFD180;

    color:var(--pd-primary);

}


.detail-add-cart:hover{

    background:var(--pd-primary);

    color:#fff;

    border-color:
        var(--pd-primary);

    transform:translateY(-2px);

}


.detail-buy-now{

    background:
        linear-gradient(
            135deg,
            var(--pd-primary),
            var(--pd-red)
        );

    color:#fff;

    box-shadow:
        0 10px 25px
        rgba(198,40,40,.20);

}


.detail-buy-now:hover{

    background:
        linear-gradient(
            135deg,
            var(--pd-green),
            var(--pd-green-light)
        );

    transform:translateY(-2px);

}


/*=========================================================
    BENEFITS
=========================================================*/

.product-benefits{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;

    padding-top:20px;

    border-top:
        1px solid var(--pd-border);

}


.benefit-item{

    display:flex;

    align-items:center;

    gap:10px;

}


.benefit-icon{

    width:38px;

    height:38px;

    flex-shrink:0;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F1F8F2;

    color:var(--pd-green);

}


.benefit-item strong{

    display:block;

    color:#444;

    font-size:11px;

    margin-bottom:3px;

}


.benefit-item span{

    display:block;

    color:#999;

    font-size:9px;

}


/*=========================================================
    PRODUCT INFORMATION
=========================================================*/

.product-information-section{

    padding:70px 0;

    background:#FFF9F4;

}


.product-information-card{

    background:#fff;

    border:1px solid
        #F0E5DC;

    border-radius:22px;

    overflow:hidden;

}


.product-tabs{

    display:flex;

    border-bottom:
        1px solid #eee;

}


.product-tab{

    position:relative;

    padding:20px 30px;

    border:0;

    background:none;

    color:#888;

    cursor:pointer;

    font-size:13px;

    font-weight:700;

}


.product-tab::after{

    content:"";

    position:absolute;

    left:20px;

    right:20px;

    bottom:-1px;

    height:3px;

    background:var(--pd-primary);

    transform:scaleX(0);

    transition:var(--pd-transition);

}


.product-tab.active{

    color:var(--pd-primary);

}


.product-tab.active::after{

    transform:scaleX(1);

}


.product-tab-content{

    display:none;

    padding:35px;

}


.product-tab-content.active{

    display:block;

}


.product-tab-content h3{

    color:#333;

    font-size:22px;

    font-weight:800;

    margin-bottom:12px;

}


.product-tab-content p{

    color:#666;

    font-size:14px;

    line-height:1.8;

    margin:0;

}


/*=========================================================
    HIGHLIGHTS
=========================================================*/

.detail-highlights{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;

    margin-top:25px;

}


.detail-highlights div{

    padding:13px 15px;

    background:#FFF9F4;

    border-radius:10px;

    color:#555;

    font-size:12px;

    font-weight:600;

}


.detail-highlights i{

    color:var(--pd-green);

    margin-right:7px;

}


/*=========================================================
    WHY SANVI
=========================================================*/

.detail-why-section{

    padding:80px 0;

}


.detail-section-heading{

    text-align:center;

    max-width:650px;

    margin:0 auto 45px;

}


.detail-section-heading > span{

    color:var(--pd-primary);

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

}


.detail-section-heading h2{

    color:#222;

    font-size:
        clamp(28px,4vw,40px);

    font-weight:800;

    margin:8px 0 10px;

}


.detail-section-heading h2 strong{

    color:var(--pd-primary);

}


.detail-section-heading p{

    color:#777;

    font-size:14px;

    line-height:1.7;

    margin:0;

}


/*=========================================================
    FEATURE CARD
=========================================================*/

.detail-feature-card{

    height:100%;

    padding:30px 22px;

    text-align:center;

    background:#fff;

    border:1px solid
        var(--pd-border);

    border-radius:18px;

    transition:var(--pd-transition);

}


.detail-feature-card:hover{

    transform:translateY(-7px);

    border-color:
        rgba(198,40,40,.2);

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

}


.feature-icon{

    width:65px;

    height:65px;

    margin:0 auto 18px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFF3E0;

    color:var(--pd-primary);

    font-size:24px;

}


.detail-feature-card h3{

    color:#333;

    font-size:17px;

    font-weight:800;

    margin-bottom:9px;

}


.detail-feature-card p{

    color:#888;

    font-size:12px;

    line-height:1.7;

    margin:0;

}


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

.related-products-section{

    padding:80px 0 100px;

    background:#FFF9F4;

}


.related-product-card{

    height:100%;

    background:#fff;

    border:1px solid
        #F0E5DC;

    border-radius:18px;

    overflow:hidden;

    transition:var(--pd-transition);

}


.related-product-card:hover{

    transform:translateY(-7px);

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

}


.related-image{

    height:260px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            145deg,
            #FFFDF9,
            #FFF2E6
        );

    padding:20px;

}


.related-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    mix-blend-mode:multiply;

    transition:var(--pd-transition);

}


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

    transform:scale(1.06);

}


.related-content{

    padding:20px;

}


.related-content > span{

    color:var(--pd-green);

    font-size:9px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


.related-content h3{

    margin:7px 0 15px;

}


.related-content h3 a{

    color:#333;

    text-decoration:none;

    font-size:17px;

    font-weight:800;

    transition:var(--pd-transition);

}


.related-content h3 a:hover{

    color:var(--pd-primary);

}


.related-view{

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:var(--pd-primary);

    text-decoration:none;

    font-size:11px;

    font-weight:800;

}


.related-view:hover{

    color:var(--pd-green);

}


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

@media(max-width:991px){

    .product-main-section{

        padding:50px 0 60px;

    }


    .product-gallery{

        min-height:550px;

    }


    .product-main-image{

        height:510px;

    }


    .product-details-content{

        padding:0;

    }


    .detail-product-title{

        font-size:38px;

    }

}


@media(max-width:767px){

    .product-breadcrumb{

        padding:12px 0;

        line-height:1.6;

    }


    .product-main-section{

        padding:35px 0 45px;

    }


    .product-gallery{

        min-height:470px;

        border-radius:20px;

    }


    .product-main-image{

        height:440px;

        padding:30px;

    }


    .product-gallery-badge{

        top:14px;

        left:14px;

        font-size:9px;

    }


    .product-detail-wishlist{

        top:14px;

        right:14px;

        width:40px;

        height:40px;

    }


    .product-image-caption{

        font-size:8px;

        padding:7px 12px;

    }


    .detail-product-title{

        font-size:32px;

    }


    .detail-short-description{

        font-size:14px;

    }


    .product-benefits{

        grid-template-columns:
            1fr;

    }


    .product-information-section{

        padding:50px 0;

    }


    .product-tabs{

        overflow-x:auto;

    }


    .product-tab{

        white-space:nowrap;

        padding:17px 20px;

    }


    .product-tab-content{

        padding:25px 20px;

    }


    .detail-highlights{

        grid-template-columns:
            1fr;

    }


    .detail-why-section,
    .related-products-section{

        padding:60px 0;

    }

}


@media(max-width:575px){

    .product-gallery{

        min-height:400px;

    }


    .product-main-image{

        height:370px;

        padding:25px;

    }


    .detail-product-title{

        font-size:29px;

    }


    .detail-rating-row{

        gap:6px;

    }


    .detail-stars{

        font-size:14px;

    }


    .product-detail-actions{

        grid-template-columns:
            1fr;

    }


    .pack-option-inner{

        min-width:105px;

        padding:11px 13px;

    }


    .quantity-section{

        align-items:center;

    }


    .detail-section-heading{

        padding:0 15px;

    }


    .related-image{

        height:280px;

    }

}