/* ==========================
   PRODUCT DETAIL
========================== */

.product-detail-section {
    padding: 60px 0;
}

.container {
    width: 90%;
    max-width: 1400px;
    margin: auto;
}

.product-detail-wrapper{

    display:grid;

    grid-template-columns:minmax(300px,540px) 1fr;

    gap:3.5rem;

    align-items:start;

    opacity:0;

    animation:fadeUp .55s ease forwards;

}

/* ===========================
   IMAGE GALLERY
=========================== */

.image-gallery{

    display:flex;

    flex-direction:column;

    gap:1.2rem;

}

/* ===========================
   MAIN IMAGE
=========================== */

.main-image-wrapper{

    position:relative;

    width:100%;

    aspect-ratio:4/3;

    border-radius:1.2rem;

    overflow:hidden;

    background:#fff;

    cursor:zoom-in;

    box-shadow:0 .8rem 2rem rgba(0,0,0,.08);

}

#main-product-image{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:opacity .3s ease, transform .45s ease;

}

.main-image-wrapper:hover #main-product-image{

    transform:scale(1.12);

}

/* ===========================
   CAROUSEL ARROWS
=========================== */

.carousel-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:2.8rem;

    height:2.8rem;

    border:none;

    border-radius:50%;

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

    cursor:pointer;

    box-shadow:0 .3rem .8rem rgba(0,0,0,.15);

    transition:.3s;

    z-index:10;

}

.carousel-arrow:hover{

    background:#0b8f2d;

    color:#fff;

    transform:translateY(-50%) scale(1.08);

}

.carousel-arrow:disabled{

    opacity:.5;

    cursor:default;

    transform:translateY(-50%);
}

.prev-arrow{

    left:1rem;

}

.next-arrow{

    right:1rem;

}

/* ===========================
   THUMBNAILS (horizontal row)
=========================== */

.thumbnail-column{

    display:flex;

    flex-direction:row;

    flex-wrap:wrap;

    gap:.9rem;

}

.thumbnail{

    width:5.4rem;

    height:5.4rem;

    flex:0 0 auto;

    border:.12rem solid #e5e5e5;

    border-radius:.9rem;

    overflow:hidden;

    cursor:pointer;

    transition:.3s;

    background:#fff;

    position:relative;

}

.thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.thumbnail:hover img{

    transform:scale(1.08);

}

.thumbnail.active{

    border-color:#0b8f2d;

    box-shadow:0 0 0 2px rgba(11,143,45,.18);

    transform:translateY(-.15rem);

}

/* ==========================
   INFO PANEL
========================== */

.product-info{

    padding-top:.4rem;

}

.product-info-top{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:1rem;

}

.product-info h1{

    font-size:2rem;

    line-height:1.3;

    margin:0 0 .5rem;

    color:#1c1c1c;

    font-weight:800;

}

.product-detail-wishlist{

    flex-shrink:0;
}

.short-description {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* ==========================
   PRICE
========================== */
.price-section{

    display:flex;

    align-items:center;

    gap:1rem;

    margin:0 0 .9rem;

    flex-wrap:wrap;

}

.new-price{

    font-size:2rem;

    color:#0b8f2d;

    font-weight:800;

}

.old-price{

    font-size:1.1rem;

    text-decoration:line-through;

    color:#9a9a9a;

}

.offer-badge{

    background:#eaf8ee;

    color:#0b8f2d;

    padding:.4rem .85rem;

    border-radius:.5rem;

    font-weight:700;

    font-size:.85rem;

    animation:badgePulse 2.6s infinite;

}

/* ==========================
   STOCK
========================== */

.stock-status {
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 15px;
}

.in-stock {
    color: #0b8f2d;
}

.out-stock {
    color: #d92d20;
}

/* ==========================
   INFO CHIPS (weight etc.)
========================== */

.info-chips{

    display:flex;

    flex-wrap:wrap;

    gap:.8rem;

    margin-bottom:1.6rem;

}

.info-chip{

    display:flex;

    align-items:center;

    gap:.7rem;

    background:#f6f9f5;

    border:1px solid #ebf2ea;

    border-radius:.8rem;

    padding:.65rem 1rem;

    transition:.25s ease;

}

.info-chip:hover{

    transform:translateY(-2px);

    box-shadow:0 .5rem 1rem rgba(11,143,45,.1);

    border-color:#d9ecd6;

}

.info-chip i{

    font-size:1.15rem;

    color:#0b8f2d;

}

.chip-text{

    display:flex;

    flex-direction:column;

    line-height:1.25;
}

.chip-label{

    font-size:.72rem;

    color:#8a938a;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.03em;

}

.chip-value{

    font-size:.92rem;

    color:#222;

    font-weight:700;

}

/* ==========================
   QUANTITY + ADD TO CART
========================== */

.quantity-section {
    margin-bottom: 22px;
}

.quantity-section label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    font-size:.95rem;
    color:#222;
}

.qty-action-row{

    display:flex;

    align-items:stretch;

    gap:1rem;
}

.detail-qty-box{

    display:flex;

    align-items:center;

    gap:0;

    border:1px solid #e2e8df;

    border-radius:.7rem;

    overflow:hidden;

    flex-shrink:0;
}

.detail-minus-btn,
.detail-plus-btn{

    width:2.6rem;

    height:100%;

    min-height:3rem;

    border:none;

    background:#0b8f2d;

    color:#fff;

    font-size:1.2rem;

    cursor:pointer;

    transition:.2s ease;
}

.detail-minus-btn:hover,
.detail-plus-btn:hover{

    background:#078220;
}

.detail-minus-btn:active,
.detail-plus-btn:active{

    transform:scale(.9);
}

.detail-qty-box span{

    width:3.2rem;

    height:3rem;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:1.05rem;

    background:#fff;

    transition:transform .15s ease;
}

.detail-qty-value.bump{

    animation:qtyBump .22s ease;
}

@keyframes qtyBump{

    0%{ transform:scale(1); }

    40%{ transform:scale(1.25); }

    100%{ transform:scale(1); }
}

/* Add To Cart button */

.add-cart-btn{

    position:relative;

    flex:1;

    min-height:3rem;

    border:none;

    border-radius:.7rem;

    background:#0b8f2d;

    color:#fff;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    overflow:hidden;

    transition:background .3s ease, transform .2s ease, box-shadow .3s ease;

    box-shadow:0 6px 16px rgba(11,143,45,.2);
}

.add-cart-btn .btn-label{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    transition:opacity .2s ease, transform .2s ease;
}

.add-cart-btn:hover{

    background:#078220;

    transform:translateY(-2px);

    box-shadow:0 10px 22px rgba(11,143,45,.28);
}

.add-cart-btn:disabled{

    cursor:default;

    transform:none;
}

.btn-spinner{

    position:absolute;

    top:50%;

    left:50%;

    width:1.15rem;

    height:1.15rem;

    margin:-.575rem 0 0 -.575rem;

    border:.18rem solid rgba(255,255,255,.4);

    border-top-color:#fff;

    border-radius:50%;

    opacity:0;

    transform:scale(.6);

    transition:opacity .2s ease, transform .2s ease;
}

.add-cart-btn.is-loading .btn-label{

    opacity:0;

    transform:scale(.85);
}

.add-cart-btn.is-loading .btn-spinner{

    opacity:1;

    transform:scale(1);

    animation:spin .7s linear infinite;
}

.add-cart-btn.is-success{

    background:#0a7a26;
}

.add-cart-btn.is-error{

    animation:shake .4s ease;

    background:#d92d20;
}

@keyframes shake{

    0%,100%{ transform:translateX(0); }

    20%{ transform:translateX(-6px); }

    40%{ transform:translateX(6px); }

    60%{ transform:translateX(-4px); }

    80%{ transform:translateX(4px); }
}

.add-cart-btn.is-success .btn-label i{

    animation:none;
}

@keyframes spin{

    to{ transform:rotate(360deg); }
}

/* ==========================
   TRUST ROW
========================== */

.trust-row{

    display:flex;

    flex-wrap:wrap;

    gap:1.4rem;

    padding-top:1.4rem;

    border-top:1px solid #eef3ec;
}

.trust-item{

    display:flex;

    align-items:center;

    gap:.5rem;

    font-size:.85rem;

    color:#6b7280;

    font-weight:600;
}

.trust-item i{

    color:#0b8f2d;
}

/* ==========================
   SHARED ANIMATIONS
========================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(1rem);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

@keyframes badgePulse{

    0%{ transform:scale(1); }

    50%{ transform:scale(1.05); }

    100%{ transform:scale(1); }
}

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

.description-section{

    margin-top:5rem;

    background:#fff;

    border-radius:1rem;

    padding:2.5rem;

    box-shadow:

        0 .5rem 1.4rem rgba(0,0,0,.08);

}

.description-section h2 {
    margin-bottom: 20px;
    color: #222;
}

.description-content {
    line-height: 1.9;
    color: #555;
}

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

.related-products {
    padding: 40px 0 80px;
}

.related-products h2 {
    margin-bottom: 30px;
}

.related-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(250px, 1fr));

    gap: 25px;
}

.related-card {
    background: #fff;

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 3px 12px rgba(0,0,0,0.08);

    text-align: center;

    transition: 0.3s;
}

.related-card:hover {
    transform: translateY(-5px);
}

.related-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.related-card h4 {
    padding: 15px 10px 5px;
    color: #222;
}

.related-card p {
    color: #2e7d32;
    font-weight: 700;
    padding-bottom: 15px;
}

/* wishlist icon in product css */
.product-card{

    position:relative;
}
.wishlist-icon{

    position:absolute;

    top:15px;

    right:15px;

    z-index:5;
}

.wishlist-toggle{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

    border-radius:50%;

    cursor:pointer;

    font-size:18px;

    transition:.3s ease;

    box-shadow:
    0 4px 12px rgba(0,0,0,.12);
}

.wishlist-toggle:hover{

    transform:scale(1.12);
}

.wishlist-toggle.active{

    color:#ff2d55;
}
/* delivery badge */
.product-image{

    position:relative;

    overflow:hidden;

    border-radius:1rem;

}
/* ===========================
   DELIVERY BADGES
=========================== */
.delivery-badge,
.parcel-badge{

    position:absolute;

    top:.8rem;

    left:.8rem;

    display:flex;

    align-items:center;

    gap:.55rem;

    color:#fff;

    padding:.45rem .75rem;

    border-radius:.55rem;

    z-index:20;

    box-shadow:
        0 .35rem .9rem rgba(0,0,0,.18);

    backdrop-filter:blur(.3rem);

    animation:badgePulse2 2.5s infinite;

}
.delivery-badge{



    background:linear-gradient(

        135deg,

        #10b143,

        #087d2f

    );

}

.parcel-badge{



    background:linear-gradient(

        135deg,

        #1976d2,

        #0d47a1

    );

}
.delivery-badge i,
.parcel-badge i{

    font-size:1.3rem;

    color:white;

}
.delivery-badge div,
.parcel-badge div{

    display:flex;

    flex-direction:column;

    line-height:1.05;

}
.delivery-badge span,
.parcel-badge span{

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.05rem;

}
.delivery-badge small,
.parcel-badge small{

    font-size:.62rem;

    opacity:.95;

}
@keyframes badgePulse2{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================================================
   RESPONSIVE — TABLET ("other devices")
   Boxed, compact two-column card, matching the reference:
   image + thumbnails on the left, all info on the right,
   stock status and the weight chip share a row, and the
   feature/trust list sits above the quantity + add-to-cart
   row. Everything below is achieved with CSS Grid explicit
   placement so the visual order can differ from the HTML
   order without touching the markup.
   ========================================================== */

@media(max-width:992px){

    .product-detail-section{

        padding:2.5rem 0;
    }

    .product-detail-wrapper{

        grid-template-columns:minmax(220px,300px) 1fr;

        gap:1.8rem;

        background:#fff;

        border:1px solid #edf2ec;

        border-radius:1.4rem;

        padding:1.6rem;

        box-shadow:0 1rem 2.4rem rgba(20,80,30,.07);

        animation:cardIn .5s cubic-bezier(.22,1,.36,1) forwards;
    }

    .main-image-wrapper{

        aspect-ratio:1/1;

        box-shadow:none;

        border:1px solid #f0f0f0;
    }

    .carousel-arrow{

        width:2.2rem;

        height:2.2rem;

        font-size:.85rem;
    }

    .thumbnail{

        width:4.2rem;

        height:4.2rem;
    }

    /* Re-flow the info column with CSS Grid so we can control
       exact visual order + put stock/weight side-by-side
       without changing the HTML. */

    .product-info{

        display:grid;

        grid-template-columns:1fr 1fr;

        column-gap:1rem;

        padding-top:0;
    }

    .product-info-top,
    .short-description,
    .price-section{

        grid-column:1 / -1;
    }

    .product-info-top{ grid-row:1; }
    .short-description{ grid-row:2; margin-bottom:14px; }
    .price-section{ grid-row:3; margin-bottom:.6rem; }

    .stock-status{

        grid-row:4;

        grid-column:1;

        margin-bottom:0;

        align-self:center;
    }

    .info-chips{

        grid-row:4;

        grid-column:2;

        justify-self:end;

        margin-bottom:0;
    }

    .info-chip{

        padding:.5rem .8rem;
    }

    .chip-text{

        flex-direction:row;

        align-items:baseline;

        gap:.35rem;
    }

    .chip-label::after{

        content:":";
    }

    /* Feature/trust list moves above the quantity row purely
       via explicit grid placement. */

    .trust-row{

        grid-row:5;

        grid-column:1 / -1;

        flex-direction:column;

        gap:.6rem;

        border-top:none;

        padding-top:1.1rem;

        margin-top:.4rem;
        border-top:1px solid #eef3ec;
    }

    .quantity-section{

        grid-row:6;

        grid-column:1 / -1;

        margin-top:1.1rem;

        margin-bottom:0;
    }

    .product-info h1{

        font-size:1.5rem;
    }

    .new-price{

        font-size:1.55rem;
    }

    /* staggered reveal once the card animates in */

    .product-info-top,
    .short-description,
    .price-section,
    .stock-status,
    .info-chips,
    .trust-row,
    .quantity-section{

        opacity:0;

        animation:fadeUp .45s ease forwards;
    }

    .short-description{ animation-delay:.06s; }
    .price-section{ animation-delay:.12s; }
    .stock-status{ animation-delay:.18s; }
    .info-chips{ animation-delay:.18s; }
    .trust-row{ animation-delay:.24s; }
    .quantity-section{ animation-delay:.3s; }
}

@keyframes cardIn{

    from{

        opacity:0;

        transform:translateY(1.4rem) scale(.98);
    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);
    }
}

/* ==========================================================
   RESPONSIVE — MOBILE
   Single-column boxed card, same reordering logic as the
   tablet block above (inherited via the cascade), collapsed
   to one column.
   ========================================================== */

@media(max-width:600px){

    .product-detail-section{

        padding:1.2rem 0 2.5rem;
    }

    .container{

        width:94%;
    }

    .product-detail-wrapper{

        grid-template-columns:1fr;

        gap:1.1rem;

        padding:1.1rem;

        border-radius:1.2rem;
    }

    .product-info{

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

    .main-image-wrapper{

        aspect-ratio:1/1;
    }

    .carousel-arrow{

        width:2rem;

        height:2rem;

        font-size:.75rem;
    }

    .thumbnail-column{

        flex-wrap:nowrap;

        gap:.4rem;

        overflow-x:auto;

        padding-bottom:.2rem;

        -ms-overflow-style:none;

        scrollbar-width:none;
    }

    .thumbnail-column::-webkit-scrollbar{

        display:none;
    }

    .thumbnail{

        width:2.6rem;

        height:2.6rem;

        border-radius:.55rem;

        flex-shrink:0;
    }

    .product-info h1{

        font-size:1.3rem;
    }

    .short-description{

        font-size:.88rem;

        margin-bottom:12px;
    }

    .new-price{

        font-size:1.4rem;
    }

    .old-price{

        font-size:.9rem;
    }

    .offer-badge{

        font-size:.75rem;

        padding:.3rem .6rem;
    }

    .stock-status{

        font-size:.85rem;
    }

    .info-chip{

        padding:.4rem .6rem;

        gap:.5rem;

        white-space:nowrap;
    }

    .info-chip i{

        font-size:.95rem;
    }

    .chip-text{

        white-space:nowrap;
    }

    .chip-label{

        font-size:.66rem;
    }

    .chip-value{

        font-size:.78rem;

        white-space:nowrap;
    }

    .trust-item{

        font-size:.8rem;
    }

    .quantity-section label{

        font-size:.85rem;

        margin-bottom:.6rem;
    }

    .qty-action-row{

        gap:.6rem;
    }

    .detail-qty-box{

        border-radius:.6rem;
    }

    .detail-minus-btn,
    .detail-plus-btn{

        width:2.2rem;

        min-height:2.6rem;

        font-size:1.05rem;
    }

    .detail-qty-box span{

        width:2.6rem;

        height:2.6rem;

        font-size:.95rem;
    }

    .add-cart-btn{

        min-height:2.6rem;

        padding:0 1rem;

        font-size:.82rem;

        border-radius:.6rem;

        letter-spacing:.01em;
    }

    .add-cart-btn .btn-label{

        gap:.45rem;

        white-space:nowrap;
    }
}

/* ==========================================================
   MINIMUM ORDER QUANTITY NOTE
   (append to product_detail.css — nothing else changes)
   ========================================================== */

.min-qty-note{

    font-size:.8rem;

    color:#0b8f2d;

    font-weight:600;

    margin-top:.5rem;
}