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

.category-page {
    padding: 50px 0;
}

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

/* ==========================
   HEADER
========================== */

.category-header {
    margin-bottom: 40px;
}

.category-header h1 {
    font-size: 36px;
    font-weight: 700;
    color: #222;
}

/* ==========================
   LAYOUT
========================== */

.category-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* ==========================
   SIDEBAR
========================== */

.category-sidebar {
    width: 250px;
    flex-shrink: 0;
}

.category-sidebar h3 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #222;
}

.category-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-sidebar li {
    margin-bottom: 12px;
}

.category-sidebar a {
    text-decoration: none;
    color: #555;
    font-size: 16px;
    transition: 0.3s;
}

.category-sidebar a:hover {
    color: #2e7d32;
    padding-left: 5px;
}

/* ==========================
   PRODUCT GRID
========================== */

.product-grid {
    flex: 1;

    display: grid;

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

    gap: 30px;
}

/* ==========================
   PRODUCT CARD
========================== */

.product-card {
    background: #fff;

    border-radius: 15px;

    overflow: hidden;

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

    transition: 0.3s;
}

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

    box-shadow:
        0 10px 25px rgba(0,0,0,0.12);
}

.product-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.product-content {
   padding:1rem 1.2rem 1.2rem;
}

.product-content h4 {
    margin-bottom:.35rem;

    font-size: 18px;

    font-weight: 600;

    color: #222;
}

.short-description {
    color: #666;

    font-size: 14px;
     margin-bottom:.6rem;

    min-height:auto;

    line-height:1.4;
}

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

.price-row {
    display: flex;
    align-items: center;
    gap: 10px;
     margin-bottom:.5rem;
}

.new-price {
    color: #2e7d32;
    font-size: 22px;
    font-weight: 700;
}

.old-price {
    color: #999;
    text-decoration: line-through;
    font-size: 15px;
}

/* ==========================
   OFFER
========================== */

.offer {
    display: inline-block;

    background: #e8f5e9;

    color: #2e7d32;

    padding: 5px 10px;

    border-radius: 5px;

    font-size: 13px;

    font-weight: 600;

   margin-bottom:.5rem;
}

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

.stock {
    display: inline-block;

    font-size: 14px;

    font-weight: 600;
}

.in-stock {
    color: green;
}

.out-stock {
    color: red;
}

/* ==========================
   EMPTY PRODUCTS
========================== */

.no-products {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 0;
}

.no-products h3 {
    color: #666;
}

/* ==========================
   PAGINATION
========================== */

.pagination {
    margin-top: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}

.pagination a,
.active-page {

    padding: 10px 16px;

    border-radius: 6px;

    text-decoration: none;

    font-size: 15px;
}

.pagination a {
    background: #f5f5f5;
    color: #333;
}

.pagination a:hover {
    background: #2e7d32;
    color: white;
}

.active-page {
    background: #2e7d32;
    color: white;
}

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

@media(max-width: 991px) {

    .category-layout {
        flex-direction: column;
    }

    .category-sidebar {
        width: 100%;
    }

}

@media(max-width: 768px) {

    .category-header h1 {
        font-size: 28px;
    }

    .product-grid {

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

        gap: 20px;
    }

}

@media(max-width: 576px) {

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

    .product-card img {
        height: 220px;
    }

}
/* add to cart button styling */
.product-actions{

    display:flex;

    gap:10px;

    margin-top:12px;

    align-items:center;
}

.pack-select{

    width:120px;

    height:44px;

    border:1px solid #ddd;

    background:white;

    font-size:14px;
}

.add-cart-btn{

    min-width:120px;

    height:44px;

    border:none;

    background:#008000;

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:.3s;
}

.add-cart-btn:hover{

    background:#006d00;
}

.qty-box{

    display:none;

    align-items:center;
}

.qty-box.active{

    display:flex;

    animation:showQty .3s ease;
}

.minus-btn,
.plus-btn{

    width:38px;

    height:44px;

    border:none;

    background:#008000;

    color:#fff;

    font-size:20px;

    cursor:pointer;
}

.qty-box span{

    width:45px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #ddd;
}

@keyframes showQty{

    from{

        opacity:0;
        transform:scale(.9);
    }

    to{

        opacity:1;
        transform:scale(1);
    }
}

.product-card img{

    transition:
        transform .6s ease,
        filter .6s ease;
}

.product-card:hover img{

    transform:scale(1.08);

    filter:brightness(1.05);
}

.add-cart-btn{

    position:relative;

    overflow:hidden;
}

.add-cart-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:120%;
    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.3),
        transparent
    );

    transition:.7s;
}

.add-cart-btn:hover::before{

    left:120%;
}

.add-cart-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(0,128,0,.25);
}

.offer{

    transition:.3s;
}

.product-card:hover .offer{

    transform:scale(1.08);

    background:#dff4e1;
}

.stock{

    transition:.3s;
}

.product-card:hover .in-stock{

    color:#008000;

    text-shadow:
        0 0 8px rgba(0,128,0,.25);
}
.product-card{

    animation:productFade .6s ease;
}

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

@keyframes productFade{

    from{

        opacity:0;

        transform:
            translateY(20px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }
}
/* 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;
    padding: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:badgePulse 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 badgePulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}

/* weight styling */
.product-weight{

    display:inline-flex;

    align-items:center;

    gap:.45rem;

    margin-top:.8rem;

    padding:.55rem .9rem;

    background:#f6f6f6;

    border-radius:.55rem;

    font-size:.88rem;

    font-weight:500;

    color:#444;

}

.product-weight i{

    color:#222;

    font-size:1rem;

}

/* ==================================================================
   REFINED PRODUCT CARD — smaller cards, more breathing room in the
   grid, cleaner price/offer/weight layout
   (appended only — nothing above this line was changed)
   ================================================================== */

.product-grid{

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

    gap:36px 28px;
}

.product-card{

    border-radius:12px;
}

.product-card img{

    height:190px;
}

.product-content{

    padding:.9rem 1rem 1rem;
}

.product-content h4{

    font-size:16px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.short-description{

    font-size:13px;

    margin-bottom:.5rem;
}

.price-row{

    gap:8px;

    margin-bottom:.4rem;
}

.new-price{

    font-size:18px;
}

.old-price{

    font-size:13px;
}

.offer{

    font-size:12px;

    padding:3px 9px;

    margin-bottom:0;

    margin-right:8px;
}

.stock{

    font-size:12px;
}

.product-weight{

    margin-top:.5rem;

    padding:.3rem .65rem;

    font-size:.75rem;
}

.product-actions{

    margin-top:10px;

    gap:8px;
}

.pack-select{

    width:100px;

    height:38px;

    font-size:12px;
}

.add-cart-btn{

    min-width:auto;

    flex:1;

    height:38px;

    font-size:12px;
}

.minus-btn,
.plus-btn{

    width:32px;

    height:38px;

    font-size:18px;
}

.qty-box span{

    width:40px;

    height:38px;

    font-size:14px;
}

@media(max-width:768px){

    .product-card img{

        height:170px;
    }
}

@media(max-width:576px){

    /* Wider container + tighter gaps so the cards themselves get
       more horizontal room (less "tall and narrow") while still
       staying inside the screen. */

    .container{

        width:97%;
    }

    .product-grid{

        grid-template-columns:repeat(2,1fr);

        gap:10px 8px;
    }

    .product-card{

        min-width:0;

        border-radius:10px;

        opacity:0;

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

    .product-card:nth-child(1){ animation-delay:.03s; }
    .product-card:nth-child(2){ animation-delay:.09s; }
    .product-card:nth-child(3){ animation-delay:.15s; }
    .product-card:nth-child(4){ animation-delay:.21s; }
    .product-card:nth-child(5){ animation-delay:.27s; }
    .product-card:nth-child(6){ animation-delay:.33s; }
    .product-card:nth-child(n+7){ animation-delay:.38s; }

    .product-card:active{

        transform:scale(.97);
    }

    @keyframes cardPopMobile{

        from{

            opacity:0;

            transform:translateY(16px) scale(.96);
        }

        to{

            opacity:1;

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

    .product-card img{

        height:100px;
    }

    .product-content,
    .product-content *,
    .product-actions,
    .product-actions *{

        box-sizing:border-box;
    }

    .product-content{

        padding:.5rem .55rem .65rem;

        min-width:0;

        /* Suppresses wrapping by default so offer + In Stock stay on
           one line; re-enabled below for the elements that need to
           wrap (the description, via line-clamp). */

        white-space:nowrap;
    }

    .product-content h4{

        font-size:11.5px;

        line-height:1.25;

        margin-bottom:.2rem;

        overflow:hidden;

        text-overflow:ellipsis;
    }

    .short-description{

        font-size:9.5px;

        line-height:1.3;

        margin-bottom:.35rem;

        white-space:normal;

        display:-webkit-box;

        -webkit-line-clamp:2;

        -webkit-box-orient:vertical;

        overflow:hidden;
    }

    /* Price -- both on one line. */

    .price-row{

        margin-bottom:.3rem;

        gap:5px;

        flex-wrap:nowrap;

        white-space:nowrap;
    }

    .new-price{

        font-size:13px;
    }

    .old-price{

        font-size:9.5px;
    }

    /* Offer + In Stock -- one line (both inline-block, and nowrap is
       inherited from .product-content above, so they can't wrap onto
       separate lines). */

    .offer{

        font-size:9px;

        padding:2px 6px;

        margin:0 5px 0 0;
    }

    .stock{

        font-size:9.5px;
    }

    /* Weight is hidden entirely on mobile per your request -- there
       just isn't room to show it cleanly at this size. It still
       shows normally on tablet/desktop. */

    .product-weight{

        display:none;
    }

    /* "Pack Of 1" removed (hidden) and Add To Cart takes the full
       width in its place. */

    .pack-select{

        display:none;
    }

    .product-actions{

        flex-wrap:wrap;

        gap:8px;

        margin-top:.4rem;

        white-space:normal;
    }

    .add-cart-btn{

        width:100%;

        flex:none;

        height:33px;

        font-size:11.5px;
    }

    .add-cart-btn:active{

        transform:scale(.95);
    }

    .add-cart-btn:active::before{

        left:120%;
    }

    .qty-box{

        width:100%;

        justify-content:center;
    }

    .minus-btn,
    .plus-btn{

        width:30%;

        height:33px;

        font-size:15px;
    }

    .qty-box span{

        flex:1;

        height:33px;

        font-size:12px;
    }

    /* Wishlist -- smaller + a little pop when toggled on. */

    .wishlist-icon{

        top:.4rem;

        right:.4rem;
    }

    .wishlist-toggle{

        width:28px;

        height:28px;

        font-size:12px;
    }

    .wishlist-toggle.active{

        animation:heartPopMobile .4s ease;
    }

    @keyframes heartPopMobile{

        0%{ transform:scale(1); }

        40%{ transform:scale(1.35); }

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

    /* Delivery/parcel badge -- shrunk to just the icon + "FREE" (the
       "Door Delivery"/"Parcel Service" subtitle is hidden) and kept
       tight to the corner so it can no longer overlap the wishlist
       heart. */

    .delivery-badge,
    .parcel-badge{

        top:.4rem;

        left:.4rem;

        padding:.2rem .4rem;

        gap:0;

        border-radius:.4rem;

        max-width:44%;
    }

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

        font-size:.75rem;
    }

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

        font-size:.55rem;
    }

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

        display:none;
    }
}

/* ==================================================================
   BOTTOM ALIGNMENT FIX (all sizes) — Add To Cart now sits at a
   consistent position on every card, regardless of how long the
   product name/description/weight text above it is.
   (appended only — nothing above this line was changed)
   ================================================================== */

.product-card{

    display:flex;

    flex-direction:column;

    height:100%;
}

.product-image{

    flex-shrink:0;
}

.product-content{

    display:flex;

    flex-direction:column;

    flex:1;
}

.product-actions{

    margin-top:auto;

    padding-top:.6rem;
}

/* ==================================================================
   WEIGHT — shown again on mobile, compact "⚖ 80 g" style. The word
   "Weight:" is hidden via the new .weight-label span (see the tiny
   template change needed alongside this CSS — plain text can't be
   partially hidden without it).
   ================================================================== */

.product-weight{

    display:inline-flex;
}

.weight-label{

    display:none;
}

@media(max-width:576px){

    .product-weight{

        display:inline-flex;

        margin:0 0 .4rem;

        padding:.15rem .5rem;

        font-size:10px;

        gap:.3rem;
    }

    .product-weight i{

        font-size:.72rem;
    }
}

/* ==================================================================
   PRICE + OFFER ON ONE LINE, STOCK + WEIGHT ON ONE LINE, BLINKING
   OFFER BADGE (all sizes)
   .price-row/.offer and .stock/.product-weight are separate sibling
   elements in the HTML, so this uses CSS Grid with explicit
   placement to pair them up visually -- with box-sizing:border-box
   and minmax(0,1fr) so it can't overflow the card the way the
   earlier grid attempt did.
   (appended only — nothing above this line was changed)
   ================================================================== */

.product-content{

    display:grid;

    grid-template-columns:minmax(0,1fr) auto;

    column-gap:.5rem;

    min-width:0;
}

.product-content,
.product-content *{

    box-sizing:border-box;
}

.product-content h4{

    grid-column:1 / -1;
}

.short-description{

    grid-column:1 / -1;
}

.price-row{

    grid-column:1;

    grid-row:3;

    align-self:center;

    margin-bottom:0;

    min-width:0;

    flex-wrap:nowrap;

    overflow:hidden;
}

.new-price,
.old-price{

    white-space:nowrap;
}

.offer{

    grid-column:2;

    grid-row:3;

    justify-self:end;

    align-self:center;

    margin:0;

    white-space:nowrap;

    animation:offerBlink 1.6s ease-in-out infinite;
}

@keyframes offerBlink{

    0%,100%{

        background-color:#e8f5e9;
    }

    50%{

        background-color:#9fdcaa;
    }
}

.stock{

    grid-column:1;

    grid-row:4;

    align-self:center;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.product-weight{

    grid-column:2;

    grid-row:4;

    justify-self:end;

    margin-top:0;

    white-space:nowrap;

    max-width:100%;

    overflow:hidden;

    text-overflow:ellipsis;
}

.product-actions{

    grid-column:1 / -1;

    grid-row:5;
}

/* ==================================================================
   FIX: old price was getting clipped off (the grid column didn't
   leave it enough room once combined with the offer badge). Smaller,
   lighter price text so both prices always fit, and the weight chip
   no longer has a background fill.
   (appended only — nothing above this line was changed)
   ================================================================== */

.price-row{

    overflow:visible;
}

.new-price{

    font-size:15px;

    font-weight:600;
}

.old-price{

    font-size:10.5px;

    font-weight:400;
}

.offer{

    font-size:10px;

    font-weight:600;

    padding:2px 6px;
}

.product-weight{

    background:none;

    padding:0;
}

/* ==================================================================
   MINIMUM ORDER QUANTITY NOTE — now shown inline next to the
   quantity stepper (only once "Add To Cart" has been clicked and
   the stepper appears), instead of always sitting above the button.
   Overrides the .min-qty-note rule appended earlier.
   (appended only — nothing above this line was changed)
   ================================================================== */

.min-qty-note{

    display:none;

    align-items:center;

    font-size:.75rem;

    color:#0b8f2d;

    font-weight:600;

    white-space:nowrap;

    margin:0;
}

.min-qty-note.show{

    display:inline-flex;
}
.product-actions{
 
    justify-content:space-between;
}