/*=========================================================
ARJUNA PLANNERS
PRODUCT.CSS

Product Page Only Styles
=========================================================*/



/*=========================================================
PRODUCT SECTION
=========================================================*/

.product-section{

    min-height:calc(100vh - 82px);

    padding:100px 0 40px;

    background:var(--white);

}




/*=========================================================
PRODUCT CONTAINER
=========================================================*/
.product-section .product-container{

    max-width:1200px;
    margin:0 auto;
    padding:0 24px;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:start;

}

.product-section .product-gallery{

    position:sticky;
    top:110px;

    align-self:start;

    display:flex;
    flex-direction:column;
    align-items:center;

}


.product-section .product-main-image{

    flex:none;

    display:flex;

    justify-content:center;

    align-items:center;

}



.product-section .product-main-image img{

    display:flex;

    justify-content:center;

    align-items:center;

    max-height:530px;

}






/*=========================================================
THUMBNAILS
=========================================================*/


.product-section .product-thumbnails{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:8px;

}



.product-section .product-thumb{

    width:75px;

    height:75px;

    padding:5px;

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

    border-radius:12px;

    background:white;

    cursor:pointer;

}



.product-section .product-thumb.active{

    border:2px solid var(--secondary);

}



.product-section .product-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:8px;

}







/*=========================================================
RIGHT PRODUCT INFO
=========================================================*/


.product-section .product-info{

    display:flex;

    flex-direction:column;

}




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


.product-section .product-badge{

    display:inline-flex;

    width:max-content;

    padding:7px 16px;

    border-radius:50px;

    background:#EEF3F8;

    color:var(--secondary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    margin-bottom:18px;

}







/*=========================================================
TITLE
=========================================================*/


.product-section .product-title{

    font-family:'Open Sans',sans-serif;

    font-size:42px;

    line-height:1.15;

    color:var(--dark);

    margin-bottom:18px;

}





/*=========================================================
DESCRIPTION
=========================================================*/


.product-section .product-description{

    font-size:17px;

    line-height:1.7;

    color:var(--text);

    margin-bottom:15px;

}







/*=========================================================
RATING
=========================================================*/


.product-section .product-rating{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

}



.product-section .product-stars{

    color:#F5A623;

    font-size:20px;

    letter-spacing:2px;

}



.product-section .product-rating span{

    font-size:15px;

    font-weight:600;

    color:var(--text);

}







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


.product-section .product-price{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}



.product-section .product-current-price{

    font-size:32px;

    font-weight:700;

    color:var(--dark);

}



.product-section .product-old-price{

    font-size:20px;

    color:#8995A5;

    text-decoration:line-through;

}



.product-section .product-discount{

    padding:5px 12px;

    border-radius:20px;

    background:#E9F7EF;

    color:#198754;

    font-size:14px;

    font-weight:700;

}







/*=========================================================
BONUS BOX
=========================================================*/


.product-section .product-bonus{

    display:inline-flex;
    align-items:center;

    padding:12px 18px;

    background:#EEF8F1;

    border:1px solid #CDE8D3;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    color:#198754;

    margin-bottom:20px;

}



.product-section .product-bonus h3{

    font-size:18px;

    margin-bottom:10px;

}



.product-section .product-bonus li{

    font-size:15px;

    color:var(--text);

    line-height:1.8;

}







/*=========================================================
PURCHASE ROW
=========================================================*/


.product-section .product-purchase-row{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:18px;

}




.product-section .product-quantity{

    height:52px;

    display:flex;

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

    border-radius:12px;

    overflow:hidden;

}




.product-section .product-quantity button{

    width:42px;

    border:none;

    background:#F5F7FA;

    font-size:22px;

    cursor:pointer;

}




.product-section .qty-input{

    width:45px;

    border:none;

    text-align:center;

    font-size:17px;

    font-weight:700;

    outline:none;

}





.product-section .product-buy-btn{

    flex:1;

    height:52px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:white;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

}







/*=========================================================
TRUST POINTS
=========================================================*/


.product-section .product-trust{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    font-size:13px;

    color:var(--text);

    margin-bottom:15px;

}







/*=========================================================
ACCORDION
=========================================================*/


.product-section .product-accordion{

    margin-top:auto;

}



.product-section .product-accordion-item{

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

}



.product-section .product-accordion-btn{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    border:none;

    background:none;

    font-size:16px;

    font-weight:700;

    color:var(--dark);

    cursor:pointer;

}



.product-section .product-accordion-content{

    display:none;

    padding-bottom:15px;

}



.product-section .product-accordion-content p{

    font-size:15px;

    line-height:1.7;

}






/*=========================================================
TABLET
=========================================================*/


@media(max-width:991px){


.product-section .product-container{

    grid-template-columns:1fr;

    gap:40px;

}


.product-section .product-main-image img{

    max-height:500px;

}



}







/*=========================================================
MOBILE
=========================================================*/


@media(max-width:600px){


.product-section{

    padding:90px 0 40px;

}


.product-section .product-container{

    padding:0 20px;

}


.product-section .product-title{

    font-size:32px;

}



.product-section .product-purchase-row{

    flex-direction:column;

    align-items:stretch;

}



.product-section .product-buy-btn{

    width:100%;

}



.product-section .product-thumbnails{

    gap:10px;

    margin-top:4px;

}



.product-section .product-thumb{

    width:60px;

    height:60px;

}



}

.product-section .product-gallery{

    transform:translateY(-30px);

}

@media (max-width:600px){

.product-section .product-purchase-row{

    flex-direction:column;

    align-items:stretch;

    gap:14px;

}


.product-section .product-quantity{

    width:100%;

    justify-content:center;

    height:56px;

}


.product-section .qty-input{

    width:70px;

}


.product-section .product-buy-btn{

    width:100%;

    height:56px;

    flex:none;

    font-size:17px;

}

}