*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    background:#f7f7f7;
}

.product-page{
    max-width:1400px;
    margin:auto;
    padding:30px;
    display:grid;
    grid-template-columns:55% 45%;
    gap:40px;
}
.product_container h4
{
    padding: 20px;
   
    color:green!important;
}
/* Gallery */

.gallery{
    display:flex;
    gap:20px;
}

.thumbs{
    width:100px;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.thumb{
    width:70px;
    height:70px;
    object-fit:cover;
    border:2px solid #ddd;
    border-radius:12px;
    cursor:pointer;
    transition:.3s;
}

.thumb:hover{
    border-color:#2e7d32;
}

.thumb.active{
    border:3px solid #2e7d32;
}

.main-image-box{
    flex:1;
    background:#fff;
    border-radius:15px;
    padding:20px;
    overflow:hidden; /* visible ki jagah hidden */
}

.zoom-container{
    height: 480px;
    position:relative;
    overflow:hidden; /* visible ki jagah hidden */
    border-radius:15px;
}

.main-image{
    width:100%;
    display:block;
    border-radius:15px;
    transition:transform .2s ease;
    transform-origin:center center;
}

/* Details */

.product-details{
    background:#fff;
    padding:30px;
    border-radius:15px;
}

.brand-name{
    font-size:14px;
    color:#666;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.product-title{
    font-size:30px;
    line-height:1.2;
    margin-bottom:10px;
    font-weight:400;
}

.price-row{
    display:flex;
    align-items:center;
    gap:15px;
}

.price{
    font-size:42px;
    font-weight:bold;
}

.old-price{
    font-family: Arial, Helvetica, sans-serif;
    color:#999;
    text-decoration:line-through;
    font-size:28px;
}

.discount{
    background:#e8f5e9;
    color:#2e7d32;
    padding:8px 15px;
    border-radius:20px;
    font-weight:bold;
}

.tax{
    color:#666;
}

.rating{
    margin-top:25px;
    color:#2e7d32;
    font-size:22px;
}

.rating span{
    color:#333;
    font-size:18px;
}

hr{
    margin:30px 0;
}

.size-box{
    margin-top:15px;
    display:flex;
    gap:15px;
}

.size-btn{
    padding:12px 25px;
    border:1px solid #ccc;
    background:#fff;
    cursor:pointer;
    border-radius:10px;
}

.active-size{
    border:2px solid #2e7d32;
    color:#2e7d32;
    font-weight:bold;
}

.btn-row{
    margin-top:40px;
    display:flex;
    gap:15px;
}

.cart-btn{
    flex:1;
    background:#2e7d32;
    color:white;
    border:none;
    padding:16px;
    font-size:18px;
    border-radius:10px;
    cursor:pointer;
}

.buy-btn{
    flex:1;
    background:white;
    color:#2e7d32;
    border:2px solid #2e7d32;
    padding:16px;
    font-size:18px;
    border-radius:10px;
    cursor:pointer;
}

/* Mobile */

@media(max-width:768px){

.product-page{
    grid-template-columns:1fr;
}

.gallery{
    flex-direction:column-reverse;
}

.thumbs{
    width:100%;
    flex-direction:row;
}

.thumb{
    width:70px;
    height:70px;
}

.product-title{
    font-size:28px;
}

.price{
    font-size:30px;
}

}

.custom-accordion{
    margin-left: 30px;
    margin-right: 30px;
}

.accordion-item{
    border:1px solid #e5e7eb;
    border-radius:10px;
    margin-bottom:12px;
    overflow:hidden;
}

.accordion-header{
    width:100%;
    border:none;
    background:#fff;
    padding:18px 20px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:18px;
    font-weight:600;
    
}

.accordion-header.active{
    background:#166534;
    color:#fff;
}

.icon{
    font-size:24px;
    transition:.3s;
}

.accordion-content{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
}

.accordion-body{
    padding:20px;
    background:#fff;
    line-height:1.8;
}
.reviews-section{
    padding:50px 0;
}

.review-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    margin: 10px;
}

.reviews-list h2{
    margin-bottom:15px;
    margin-left: 20px;
}

.review-card{
    background:#fff;
    border:1px solid #e5e5e5;
    padding:15px;
    margin-bottom:20px;
    margin-left: 20px;
    border-radius:10px;
}

.review-stars{
    color:#1f8b3a;
    font-size:20px;
    margin-bottom:10px;
}

.review-card h4{
    margin-bottom:10px;
}

.review-card p{
    line-height:1.7;
    color:#555;
    margin-bottom:10px;
}

.review-card span{
    color:#888;
}

.review-summary{
    background:#fff;
    border:1px solid #e5e5e5;
    padding:40px;
    text-align:center;
    border-radius:10px;
    height:fit-content;
    position:sticky;
    top:20px;
}

.review-summary h2{
    font-size:50px;
    color:#1f8b3a;
}

.write-review-btn{
    margin-top:20px;
    width:100%;
    padding:15px;
    border:none;
    background:#1f8b3a;
    color:#fff;
    font-size:18px;
    cursor:pointer;
}

/* FORM */

.review-form-section{
    display:none;
    margin-top:40px;
}

.review-form-section.show{
    display:block;
}

.review-form-container{
    max-width:800px;
    margin:auto;
    background:#fff;
    border:1px solid #e5e5e5;
    padding:40px;
}

.review-form-container h2{
    text-align:center;
    margin-bottom:30px;
}

.form-group{
    margin-bottom:25px;
}

.form-group label{
    display:block;
    margin-bottom:10px;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
}

.star-rating{
    font-size:35px;
}

.star{
    color:#ccc;
    cursor:pointer;
}

.star.active{
    color:#1f8b3a;
}

.upload-box{
    width:120px;
    height:120px;
    border:1px solid #ddd;
    display:flex;
    justify-content:center;
    align-items:center;
}

.upload-box input{
    display:none;
}

.upload-box label{
    font-size:45px;
    cursor:pointer;
}

.review-buttons{
    display:flex;
    gap:15px;
}

.cancel-btn{
    padding:12px 25px;
    border:1px solid #1f8b3a;
    background:#fff;
    color:#1f8b3a;
    cursor:pointer;
}

.submit-btn{
    padding:12px 25px;
    border:none;
    background:#1f8b3a;
    color:#fff;
    cursor:pointer;
}

@media(max-width:768px){

    .review-layout{
        grid-template-columns:1fr;
    }

}
.cart-qty-control {
    width: 180px;
    height: 48px;
}

.cart-add-full {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: #1f7a3f;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.cart-stepper {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1f7a3f;
    border-radius: 8px;
    overflow: hidden;
}

.qty-symbol {
    width: 54px;
    height: 48px;
    border: none;
    background: #176332;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
}

.qty-number {
    flex: 1;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.d-none {
    display: none !important;
}
/* =========================
   PRODUCT ACTION BUTTONS
========================= */

.btn-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.cart-qty-control {
    flex: 1;
    min-width: 240px;
    max-width: 320px;
    position: relative;
}

/* ---------- Add To Cart Full Button ---------- */
.cart-add-full {
    width: 100%;
    height: 54px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #1c7c43 0%, #146c37 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(20, 108, 55, 0.22);
    transition: all 0.25s ease;
    outline: none;
}

.cart-add-full:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(20, 108, 55, 0.28);
    background: linear-gradient(135deg, #218a4b 0%, #16753b 100%);
}

.cart-add-full:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(20, 108, 55, 0.22);
}

/* ---------- Stepper ---------- */
.cart-stepper {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #1c7c43 0%, #146c37 100%);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(20, 108, 55, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.qty-symbol {
    width: 62px;
    height: 54px;
    border: none;
    background: rgba(0, 0, 0, 0.12);
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-symbol:hover {
    background: rgba(0, 0, 0, 0.2);
}

.qty-symbol:active {
    transform: scale(0.96);
}

.qty-number {
    flex: 1;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ---------- Buy Now Button ---------- */
.buy-btn {
    min-width: 220px;
    height: 54px;
    padding: 0 26px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffb347 0%, #ff8c42 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(255, 140, 66, 0.22);
    transition: all 0.25s ease;
    outline: none;
}

.buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(255, 140, 66, 0.28);
    background: linear-gradient(135deg, #ffbe5c 0%, #ff934b 100%);
}

.buy-btn:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(255, 140, 66, 0.22);
}

/* ---------- Hide utility ---------- */
.d-none {
    display: none !important;
}

/* =========================
   SIZE BUTTONS POLISH
========================= */
.size-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.size-btn {
    min-width: 90px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1.5px solid #d9e4d7;
    background: #ffffff;
    color: #2a2a2a;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
}

.size-btn:hover {
    border-color: #1c7c43;
    color: #1c7c43;
    box-shadow: 0 6px 16px rgba(28, 124, 67, 0.10);
}

.size-btn.active-size {
    background: #1c7c43;
    border-color: #1c7c43;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(28, 124, 67, 0.20);
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media (max-width: 768px) {
    .btn-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cart-qty-control,
    .buy-btn {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

    .cart-add-full,
    .cart-stepper,
    .buy-btn {
        height: 50px;
    }

    .qty-symbol {
        width: 58px;
        height: 50px;
        font-size: 22px;
    }

    .qty-number {
        font-size: 17px;
    }
}
/* =========================================================
   PRODUCT VIEW - MOBILE PRODUCT GRID FIX
   Keep Similar Products / All Products at 2 cards per row
   on phones, while preserving Bootstrap desktop/tablet layout.
========================================================= */
@media (max-width: 767px) {
    .product_container > .container {
        width: 100%;
        max-width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }

    .product_container .row {
        display: flex;
        flex-wrap: wrap;
        margin-left: -5px;
        margin-right: -5px;
    }

    .product_container .row > .col-lg-3,
    .product_container .row > .col-md-4,
    .product_container .row > .col-sm-6 {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 10px;
        display: flex;
    }

    .product_container .product-card {
        width: 100%;
        height: 100% !important;
        min-width: 0;
    }

    .product_container .product-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto !important;
        min-height: 0;
    }

    .product_container .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 6px;
    }

    .product_container .product-info {
        padding: 9px 6px 11px;
    }

    .product_container .product-title_home_page {
        font-size: 11.5px;
        line-height: 1.3;
        min-height: 30px;
    }

    .product_container .price-section {
        gap: 3px;
        margin-top: 6px;
    }

    .product_container .current-price {
        font-size: 16px;
    }

    .product_container .original-price {
        font-size: 10px;
    }

    .product_container .discount-inline,
    .product_container .discount-badge {
        font-size: 8.5px;
        padding: 2px 5px;
    }

    .product_container .product-card-actions {
        top: 7px;
        right: 7px;
        gap: 5px;
    }

    .product_container .product-action-circle,
    .product_container .icon-btn {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
}

/* =========================================================
   MAKORO PRODUCT VIEW — MOBILE POLISH OVERRIDES
   Keeps desktop unchanged and fixes excessive mobile spacing.
   ========================================================= */
@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Main product page uses almost full mobile width */
    .product-page {
        width: calc(100% - 16px) !important;
        max-width: none !important;
        margin: 8px auto 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Product gallery */
    .gallery {
        width: 100% !important;
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-image-box {
        width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        padding: 8px !important;
        border-radius: 14px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    /* Remove the old fixed 480px mobile height */
    .zoom-container {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        background: #fff !important;
    }

    .main-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
        border-radius: 12px !important;
    }

    /* Thumbnails stay compact and horizontal */
    .thumbs {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        padding: 2px 2px 6px !important;
        margin: 0 !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .thumbs::-webkit-scrollbar {
        display: none;
    }

    .thumb {
        flex: 0 0 62px !important;
        width: 62px !important;
        height: 62px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    /* Product information card */
    .product-details {
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 18px 14px 16px !important;
        border-radius: 14px !important;
        background: #fff !important;
    }

    .brand-name {
        font-size: 12px !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 6px !important;
    }

    .product-title {
        font-size: clamp(24px, 7.2vw, 30px) !important;
        line-height: 1.16 !important;
        margin: 0 0 14px !important;
    }

    .price-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px 10px !important;
        margin-bottom: 6px !important;
    }

    .price {
        font-size: 31px !important;
        line-height: 1 !important;
    }

    .old-price {
        font-size: 20px !important;
        line-height: 1 !important;
    }

    .discount {
        padding: 6px 11px !important;
        border-radius: 16px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .tax,
    .stock-status {
        font-size: 14px !important;
        margin: 7px 0 !important;
    }

    .rating {
        margin-top: 16px !important;
        font-size: 19px !important;
        line-height: 1.25 !important;
    }

    .rating span {
        font-size: 15px !important;
    }

    .product-details hr {
        margin: 18px 0 !important;
    }

    .product-details h3 {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin: 0 0 10px !important;
    }

    .size-box {
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .size-btn {
        min-width: 0 !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
    }

    .btn-row {
        margin-top: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .cart-qty-control,
    .buy-btn,
    .sold-out-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .cart-add-full,
    .cart-stepper,
    .buy-btn,
    .sold-out-btn {
        height: 48px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
    }

    /* Accordion sits close to product details */
    .custom-accordion {
        width: calc(100% - 16px) !important;
        margin: 12px auto 0 !important;
        padding: 0 !important;
    }

    .accordion-item {
        margin-bottom: 10px !important;
        border-radius: 12px !important;
    }

    .accordion-header {
        padding: 14px 15px !important;
        font-size: 16px !important;
    }

    .accordion-body {
        padding: 14px 15px !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    /* Reviews use the same mobile width */
    .reviews-section {
        width: calc(100% - 16px) !important;
        margin: 14px auto 0 !important;
        padding: 20px 0 !important;
    }

    .review-layout {
        display: block !important;
        margin: 0 !important;
    }

    .reviews-list h2,
    .review-card {
        margin-left: 0 !important;
    }

    .review-summary {
        position: static !important;
        margin-top: 12px !important;
        padding: 18px 14px !important;
    }

    /* Similar / All Products: two cards per row on mobile */
    .product_container {
        padding: 18px 0 !important;
    }

    .product_container > .container {
        width: calc(100% - 12px) !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .product_container .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -4px !important;
        margin-right: -4px !important;
    }

    .product_container .row > [class*="col-"] {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 8px !important;
    }

    .product_container .product-card {
        width: 100% !important;
        height: 100% !important;
        border-radius: 13px !important;
    }

    .product_container .product-image {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .product_container .product-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 5px !important;
    }

    .product_container .product-info {
        padding: 8px 6px 10px !important;
    }

    .product_container .product-title_home_page {
        font-size: 11.5px !important;
        line-height: 1.28 !important;
        min-height: 30px !important;
    }

    .product_container .price-section {
        margin-top: 6px !important;
        gap: 3px !important;
    }

    .product_container .current-price {
        font-size: 16px !important;
    }

    .product_container .original-price {
        font-size: 9.5px !important;
    }

    .product_container .discount-inline,
    .product_container .discount-badge {
        font-size: 8px !important;
        padding: 2px 5px !important;
    }

    .product-card-actions {
        top: 7px !important;
        right: 7px !important;
        gap: 5px !important;
    }

    .product-action-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 380px) {
    .product-page,
    .custom-accordion,
    .reviews-section {
        width: calc(100% - 12px) !important;
    }

    .product-details {
        padding: 16px 12px 14px !important;
    }

    .product-title {
        font-size: 23px !important;
    }

    .price {
        font-size: 29px !important;
    }

    .old-price {
        font-size: 18px !important;
    }

    .discount {
        font-size: 13px !important;
        padding: 5px 9px !important;
    }

    .thumb {
        flex-basis: 58px !important;
        width: 58px !important;
        height: 58px !important;
    }
}
/* =====================================================
   MOBILE - ADD TO CART & BUY NOW SAME SIZE
===================================================== */

@media (max-width: 768px) {

    .btn-row {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 26px !important;
        padding: 0 !important;
    }

    .cart-qty-control,
    .buy-btn {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        margin: 0 !important;
    }

    .cart-add-full,
    .buy-btn {
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 18px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 14px !important;

        font-size: 17px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }

    .buy-btn {
        box-sizing: border-box !important;
    }
}