.hero-section{
    width:100%;
    overflow:hidden;
}

.hero-slide{
    position:relative;
}


.hero-slide img{
    width:100%;
    height:85vh;
    object-fit:cover;
}

/* HERO CONTENT */

.hero-content{

    position:absolute;

    top:50%;
    left:6%;

    transform:translateY(-50%);

    max-width:650px;

    z-index:2;

    padding:35px;

    background:
        rgba(255,255,255,0.01);

    /* backdrop-filter:
        blur(10px); */

    border:
        1px solid rgba(255,255,255,0.15);

    border-radius:20px;

    animation:fadeHero 1.2s ease;
}

/* HEADING */

.hero-content h1{

    font-family: 'Cormorant Garamond', serif;

    font-size:
        clamp(2.8rem,5vw,5rem);

    font-weight:600;

    font-style:italic;

    line-height:1.15;

    color:#fff;

    letter-spacing:.5px;

    margin-bottom:20px;

    text-shadow:
        0 3px 12px rgba(0,0,0,.35);
}

.hero-content h1::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin-top:15px;

    background:#7ed957;

    border-radius:20px;
}

/* SUBTITLE */

.hero-content p{

    font-size:1.2rem;

    font-weight:300;

    line-height:1.8;

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

    margin-top:20px;

    text-shadow:
        0 2px 8px rgba(0,0,0,.25);
}

/* BUTTON */

.hero-btn{

    display:inline-block;

    margin-top:30px;

    padding:14px 36px;

    background:#4caf50;

    color:white;

    text-decoration:none;

    border-radius:50px;

    font-size:15px;

    font-weight:500;

    transition:.4s;
}

.hero-btn:hover{

    transform:
        translateY(-4px);

    background:#388e3c;

    box-shadow:
        0 12px 30px rgba(76,175,80,.35);
}

/* ANIMATION */

@keyframes fadeHero{

    from{

        opacity:0;

        transform:
            translateY(-50%)
            translateX(-40px);

    }

    to{

        opacity:1;

        transform:
            translateY(-50%)
            translateX(0);

    }

}

/* RESPONSIVE */

@media(max-width:768px){

    .hero-slide img{
        height:70vh;
    }

    .hero-content{

        left:5%;
        right:5%;

        max-width:100%;

        padding:25px;
    }

    .hero-content h1{

        font-size:2.3rem;
    }

    .hero-content p{

        font-size:1rem;
    }

}

.product-section{
    padding:5rem 4%;
    text-align:center;
}

.product-section h2{
    font-size:3rem;
    font-weight:700;
}

.product-section p{
    margin-bottom:3rem;
}

.product-card{
    background:#fff;
    transition:.4s;
}

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

.product-card img{
    width:100%;
    height:20rem;
    object-fit:cover;
}

.product-card h4{
    margin-top:1rem;
    text-align:left;
}

.price-row{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    margin:1rem 0;
}

.price{
    color:#008000;
    font-weight:700;
}

.old-price{
    text-decoration:line-through;
    color:#888;
}

.discount{
    color:#2f8f2f;
}

/* .product-card button{
    width:100%;
    padding:.9rem;
    border:none;
    background:#008000;
    color:white;
    font-weight:600;
} */

.working-slide{
    position:relative;
}

.working-slide img{
    width:100%;
    height:30rem;
    object-fit:cover;
}

.working-content{
    position:absolute;
    left:8%;
    top:50%;
    transform:translateY(-50%);
    max-width:40rem;
}

.working-content h2{
    font-size:3rem;
    margin-bottom:1rem;
}

.working-content p{
    font-size:1.2rem;
}

.swiper-button-next,
.swiper-button-prev{
    color:#0f8b0f;
}

@media(max-width:768px){

    .hero-slide img{
        height:60vh;
    }

    .hero-content{
        left:5%;
        right:5%;
    }

    .working-slide img{
        height:20rem;
    }

    .working-content h2{
        font-size:2rem;
    }

    .product-section h2{
        font-size:2rem;
    }
}

/* ===================================
   CATEGORY SECTION
=================================== */

.category-section {
    padding: 70px 0;
    background: #f8f8f8;
}

.section-heading {
    text-align: center;
    margin-bottom: 50px;
}

.section-heading h2 {
    font-size: 42px;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
}

.section-heading p {
    color: #666;
    font-size: 18px;
}

/* ===================================
   CATEGORY GRID
=================================== */

.category-container {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(160px, 1fr));

    gap: 45px 25px;

    justify-items: center;

}

/* ===================================
   CATEGORY LINK
=================================== */

.category-link {
    text-decoration: none;
}

/* ===================================
   CATEGORY CARD
=================================== */

.category-card {

    text-align: center;

    position: relative;

    animation:
        floatCategory 4s ease-in-out infinite;

}

.category-card img {

    width: 130px;

    height: 130px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #2e7d32;

    transition: all .4s ease;

    background: white;

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

}

.category-card h4 {

    margin-top: 15px;

    font-size: 18px;

    font-weight: 500;

    color: #222;

    transition: .3s;

}

/* ===================================
   HOVER EFFECTS
=================================== */

.category-card:hover img {

    transform:
        scale(1.12)
        rotate(3deg);

    box-shadow:
        0 0 25px rgba(46,125,50,.45);

    border-color:
        #4caf50;

}

.category-card:hover h4 {

    color: #2e7d32;

    transform:
        translateY(-3px);

}

/* ===================================
   GREEN GLOW RING
=================================== */

.category-card::before {

    content: "";

    position: absolute;

    top: -8px;
    left: -8px;

    width: 146px;
    height: 146px;

    border-radius: 50%;

    background:
        radial-gradient(
            rgba(76,175,80,.15),
            transparent
        );

    opacity: 0;

    transition: .4s;

}

.category-card:hover::before {

    opacity: 1;

    animation:
        pulseGlow 1.5s infinite;

}

/* ===================================
   FLOAT ANIMATION
=================================== */

@keyframes floatCategory {

    0% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-6px);
    }

    100% {
        transform:
            translateY(0);
    }

}

/* ===================================
   GLOW ANIMATION
=================================== */

@keyframes pulseGlow {

    0% {

        transform: scale(1);

        opacity: .4;

    }

    50% {

        transform: scale(1.08);

        opacity: .7;

    }

    100% {

        transform: scale(1);

        opacity: .4;

    }

}

/* ===================================
   STAGGER ANIMATION
=================================== */

.category-card:nth-child(1) {
    animation-delay: 0s;
}

.category-card:nth-child(2) {
    animation-delay: .2s;
}

.category-card:nth-child(3) {
    animation-delay: .4s;
}

.category-card:nth-child(4) {
    animation-delay: .6s;
}

.category-card:nth-child(5) {
    animation-delay: .8s;
}

.category-card:nth-child(6) {
    animation-delay: 1s;
}

.category-card:nth-child(7) {
    animation-delay: 1.2s;
}

.category-card:nth-child(8) {
    animation-delay: 1.4s;
}

.category-card:nth-child(9) {
    animation-delay: 1.6s;
}

.category-card:nth-child(10) {
    animation-delay: 1.8s;
}

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

@media(max-width:991px){

    .category-container {

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

    }

}

@media(max-width:768px){

    .category-container {

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

        gap: 30px 20px;

    }

    .category-card img {

        width: 110px;
        height: 110px;

    }

}

@media(max-width:576px){

    .category-container {

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

    }

    .section-heading h2 {

        font-size: 32px;

    }

    .category-card img {

        width: 95px;
        height: 95px;

    }

    .category-card h4 {

        font-size: 15px;

    }

}
.category-card {

    opacity: 0;

    animation:
        fadeUp .8s ease forwards,
        floatCategory 4s ease-in-out infinite;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(40px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

/* ===================================
   LATEST PRODUCT CAROUSEL PREMIUM
=================================== */

.product-section{

    padding:80px 4%;
    background:#fff;
    position:relative;
}

.product-section h2{

    font-size:48px;
    font-weight:700;
    margin-bottom:10px;
    color:#222;
}

.product-section p{

    font-size:18px;
    color:#777;
    margin-bottom:50px;
}

.latestSwiper{

    padding:20px 10px 60px;
}

.latestSwiper .swiper-slide{

    height:auto;
}

.product-card{

    background:#fff;
    border-radius:8px;

    overflow:hidden;

    transition:all .4s ease;

    height:100%;

    border:1px solid #efefef;

    box-shadow:
        0 5px 20px rgba(0,0,0,.05);
}

.product-card:hover{

    transform:
        translateY(-10px);

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

.product-card img{

    width:100%;
    height:300px;

    object-fit:cover;

    transition:.6s ease;
}

.product-card:hover img{

    transform:scale(1.08);
}

.product-card h4{

    font-size:22px;

    font-weight:500;

    color:#222;

    padding:15px;

    min-height:80px;

    line-height:1.4;
}

.price-row{

    padding:0 15px;

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;
}

.price{

    font-size:28px;

    font-weight:700;

    color:#008000;
}

.old-price{

    font-size:18px;

    color:#999;

    text-decoration:line-through;
}

.discount{

    color:#2e7d32;

    font-weight:600;
}


/* SWIPER BUTTONS */

.latestSwiper .swiper-button-next,
.latestSwiper .swiper-button-prev{

    width:55px;
    height:55px;

    background:#fff;

    border-radius:50%;

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

    color:#4caf50;

    transition:.3s;
}

.latestSwiper .swiper-button-next:hover,
.latestSwiper .swiper-button-prev:hover{

    background:#4caf50;
    color:#fff;

    transform:scale(1.1);
}

.latestSwiper .swiper-button-next::after,
.latestSwiper .swiper-button-prev::after{

    font-size:20px;
    font-weight:700;
}

/* ACTIVE CARD */

.latestSwiper .swiper-slide-active .product-card{

    animation:
        productPop .6s ease;
}

@keyframes productPop{

    from{

        opacity:0;
        transform:translateY(30px);
    }

    to{

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

/* RESPONSIVE */

@media(max-width:991px){

    .product-card img{

        height:250px;
    }

    .product-section h2{

        font-size:38px;
    }
}

@media(max-width:768px){

    .product-card img{

        height:220px;
    }

    .product-card h4{

        font-size:18px;
    }

    .price{

        font-size:22px;
    }

    .latestSwiper .swiper-button-next,
    .latestSwiper .swiper-button-prev{

        width:45px;
        height:45px;
    }
}

/* add to cart button css */
/* =================================
   NURSERY PRODUCT STYLE
================================= */

.product-card{

    border:none;
    box-shadow:none;
    border-radius:0;
}

.product-card:hover{

    transform:none;
    box-shadow:none;
}

.product-card h4{

    padding:8px 0 0;
    margin:0;

    font-size:16px;
    font-weight:500;

    min-height:auto;

    text-align:left;

    line-height:1.3;
}

.price-row{

    padding:0;

    margin:6px 0;

    gap:8px;
}

.price{

    font-size:16px;

    font-weight:700;
}

.old-price{

    font-size:14px;
}

.discount{

    font-size:14px;
}

.product-actions{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:10px;
}

.pack-select{

    width:160px;

    height:46px;

    border:1px solid #d7d7d7;

    background:#fff;

    font-size:14px;

    padding:0 16px;
 line-height:48px;

    box-sizing:border-box;

    appearance:auto;
    outline:none;
}

.add-cart-btn{

    height:46px;

    min-width:160px;
    padding:0 24px;

    border:none;

    background:#008000;

    color:#fff;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;
}

.add-cart-btn:hover{

    background:#006b00;
}

.qty-box{

    display:none;

    align-items:center;
     gap:0;
}

.qty-box.active{

    display:flex;

     animation:qtyFadeIn .35s ease;
}

.minus-btn,
.plus-btn{

    width:40px;

    height:46px;

    border:none;

    background:#008000;

    color:white;

    font-size:22px;

    cursor:pointer;
     transition:
        background .3s ease,
        transform .2s ease,
        box-shadow .3s ease;
}
.minus-btn:hover,
.plus-btn:hover{

    background:#00a000;

    transform:translateY(-2px);

    box-shadow:
        0 5px 15px rgba(0,128,0,.25);
}

/* CLICK EFFECT */

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

    transform:scale(.92);
}



.qty-box span{

    width:60px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #ddd;
   background:#fff;
    font-size:18px;
     transition:.3s;
}

@keyframes qtyFadeIn{

    from{

        opacity:0;

        transform:
            scale(.85)
            translateY(8px);
    }

    to{

        opacity:1;

        transform:
            scale(1)
            translateY(0);
    }
}
.plus-btn:hover{

    animation:pulseGreen .6s ease;
}

@keyframes pulseGreen{

    0%{

        transform:scale(1);
    }

    50%{

        transform:scale(1.08);
    }

    100%{

        transform:scale(1);
    }
}
/* 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: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 size, cleaner price/weight layout
   (appended only — nothing above this line was changed)
   ================================================================== */

.product-card{

    border:1px solid #eee;

    border-radius:12px;

    box-shadow:0 3px 14px rgba(0,0,0,.06);

    overflow:hidden;
}

.product-card:hover{

    transform:translateY(-6px);

    box-shadow:0 14px 32px rgba(0,0,0,.1);
}

.product-card img{

    height:200px;
}

.product-card h4{

    padding:12px 14px 0;

    font-size:16px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.price-row{

    padding:0 14px;

    margin:8px 0 0;

    row-gap:6px;

    align-items:center;
}

.price{

    font-size:18px;
}

.old-price{

    font-size:13px;
}

.discount{

    font-size:12px;

    font-weight:700;

    background:#eaf7ea;

    color:#2e7d32;

    padding:2px 9px;

    border-radius:20px;

    line-height:1.6;
}

/* Weight now always gets its own row (whether it's nested inside
   .price-row, as in the Latest Products markup, or a plain sibling,
   as in the Most Popular markup) via the flex-basis:100% trick --
   it only takes effect when it actually IS a flex child. */

.product-weight{

    flex-basis:100%;

    margin:8px 14px 0;

    padding:.35rem .7rem;

    font-size:.78rem;

    background:#f3f6f2;
}

.product-actions{

    padding:0 14px 14px;

    margin-top:10px;

    gap:8px;
}

.pack-select{

    width:120px;

    height:40px;

    font-size:13px;

    padding:0 10px;
}

.add-cart-btn{

    height:40px;

    min-width:auto;

    flex:1;

    padding:0 14px;

    font-size:13px;

    border-radius:8px;
}

.minus-btn,
.plus-btn{

    width:34px;

    height:40px;

    font-size:18px;
}

.qty-box span{

    width:44px;

    height:40px;

    font-size:15px;
}

@media(max-width:768px){

    .product-card img{

        height:170px;
    }
}

/* ==================================================================
   FIX: swiper nav arrows were vertically centered on the WHOLE
   slide (image + text below), which is why they landed on top of
   the product name. Pinning them to the vertical center of the
   image itself instead, at each breakpoint's actual image height.
   Also: true 2-per-row mobile layout (breakpoints already switched
   to slidesPerView:2 in home.js), with everything shrunk to fit --
   "Pack Of 1" hidden, Add To Cart full width, badges/arrows/
   wishlist resized, name/price/weight all kept visible.
   (appended only — nothing above this line was changed)
   ================================================================== */

.latestSwiper .swiper-button-next,
.latestSwiper .swiper-button-prev,
.popularSwiper .swiper-button-next,
.popularSwiper .swiper-button-prev{

    top:100px;
}

.add-cart-btn.is-loading{

    color:transparent;

    pointer-events:none;

    position:relative;
}

.add-cart-btn.is-loading::after{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:16px;

    height:16px;

    margin:-8px 0 0 -8px;

    border:2px solid rgba(255,255,255,.4);

    border-top-color:#fff;

    border-radius:50%;

    animation:cartBtnSpin .7s linear infinite;
}

.add-cart-btn.is-error{

    background:#c0392b !important;
}

@keyframes cartBtnSpin{

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

@media(max-width:768px){

    .latestSwiper .swiper-button-next,
    .latestSwiper .swiper-button-prev,
    .popularSwiper .swiper-button-next,
    .popularSwiper .swiper-button-prev{

        top:85px;
    }
}

@media(max-width:576px){

    .latestSwiper,
    .popularSwiper{

        padding:14px 6px 50px;
    }

    .product-card{

        border-radius:10px;

        min-width:0;
    }

    .product-card img{

        height:110px;
    }

    .latestSwiper .swiper-button-next,
    .latestSwiper .swiper-button-prev,
    .popularSwiper .swiper-button-next,
    .popularSwiper .swiper-button-prev{

        width:28px;

        height:28px;

        top:55px;
    }

    .latestSwiper .swiper-button-next::after,
    .latestSwiper .swiper-button-prev::after,
    .popularSwiper .swiper-button-next::after,
    .popularSwiper .swiper-button-prev::after{

        font-size:11px;
    }

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

        box-sizing:border-box;
    }

    .product-card h4{

        padding:8px 10px 0;

        font-size:11.5px;
    }

    .price-row{

        padding:0 10px;

        margin:4px 0 0;

        gap:5px;

        flex-wrap:wrap;
    }

    .price{

        font-size:13px;
    }

    .old-price{

        font-size:9.5px;
    }

    .discount{

        font-size:8.5px;

        padding:1px 6px;
    }

    .product-weight{

        margin:5px 10px 0;

        padding:.2rem .5rem;

        font-size:9px;

        gap:.25rem;
    }

    .product-weight i{

        font-size:.68rem;
    }

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

    .pack-select{

        display:none;
    }

    .product-actions{

        padding:0 10px 10px;

        margin-top:6px;

        gap:6px;
    }

    .add-cart-btn{

        width:100%;

        min-width:0;

        flex:1;

        height:32px;

        font-size:11px;

        padding:0 8px;
    }

    .qty-box{

        width:100%;

        justify-content:center;
    }

    .minus-btn,
    .plus-btn{

        width:26%;

        height:32px;

        font-size:14px;
    }

    .qty-box span{

        flex:1;

        height:32px;

        font-size:12px;
    }

    .wishlist-icon{

        top:8px;

        right:8px;
    }

    .wishlist-toggle{

        width:26px;

        height:26px;

        font-size:11px;
    }

    .delivery-badge,
    .parcel-badge{

        top:6px;

        left:6px;

        padding:.2rem .4rem;

        gap:.3rem;

        border-radius:.4rem;

        max-width:70%;
    }

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

        font-size:.32rem;
    }

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

        font-size:.55rem;
    }

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

        font-size:.48rem;
    }
}

/* ==================================================================
   FIX ROUND 2: arrows were landing near the top of the image
   instead of centered -- the previous top values didn't account for
   .latestSwiper's own top padding (20px), and .popularSwiper had no
   matching padding/arrow styling at all, which is also why its
   arrows looked different from the first carousel. Also: price +
   old price + offer weren't fitting on one line at the smallest
   card width, so they were wrapping.
   (appended only — nothing above this line was changed)
   ================================================================== */

/* Give popularSwiper the same padding as latestSwiper so both
   carousels share one consistent coordinate space for the arrows. */

.popularSwiper{

    padding:20px 10px 60px;
}

/* Match popularSwiper's arrows to latestSwiper's white-circle style. */

.popularSwiper .swiper-button-next,
.popularSwiper .swiper-button-prev{

    width:55px;

    height:55px;

    background:#fff;

    border-radius:50%;

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

    color:#4caf50;

    transition:.3s;
}

.popularSwiper .swiper-button-next:hover,
.popularSwiper .swiper-button-prev:hover{

    background:#4caf50;

    color:#fff;

    transform:scale(1.1);
}

.popularSwiper .swiper-button-next::after,
.popularSwiper .swiper-button-prev::after{

    font-size:20px;

    font-weight:700;
}

/* Corrected vertical centering (padding-top + half the image
   height), now identical for both carousels. */

.latestSwiper .swiper-button-next,
.latestSwiper .swiper-button-prev,
.popularSwiper .swiper-button-next,
.popularSwiper .swiper-button-prev{

    top:120px;
}

@media(max-width:768px){

    .popularSwiper .swiper-button-next,
    .popularSwiper .swiper-button-prev{

        width:45px;

        height:45px;
    }

    .latestSwiper .swiper-button-next,
    .latestSwiper .swiper-button-prev,
    .popularSwiper .swiper-button-next,
    .popularSwiper .swiper-button-prev{

        top:105px;
    }

    /* Badges sized down with rem units for this range too. */

    .delivery-badge,
    .parcel-badge{

        padding:.3rem .5rem;

        gap:.35rem;
    }

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

        font-size:.9rem;
    }

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

        font-size:.65rem;
    }

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

        font-size:.58rem;
    }
}

@media(max-width:576px){

    .popularSwiper .swiper-button-next,
    .popularSwiper .swiper-button-prev{

        width:28px;

        height:28px;
    }

    .popularSwiper .swiper-button-next::after,
    .popularSwiper .swiper-button-prev::after{

        font-size:11px;
    }

    .latestSwiper .swiper-button-next,
    .latestSwiper .swiper-button-prev,
    .popularSwiper .swiper-button-next,
    .popularSwiper .swiper-button-prev{

        top:69px;
    }

    /* Badges even smaller, still in rem. */

    .delivery-badge,
    .parcel-badge{

        padding:.2rem .4rem;

        gap:.25rem;
    }

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

        font-size:.7rem;
    }

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

        font-size:.5rem;
    }

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

        font-size:.45rem;
    }

    .price-row{

        gap:4px;
    }

    .price{

        font-size:12px;
    }

    .old-price{

        font-size:9px;
    }

    .discount{

        font-size:8px;

        padding:1px 5px;
    }
}

/* ==================================================================
   FIXES: price/old-price/offer wrapping onto separate lines,
   arrows sitting too high (missing the swiper's own top padding in
   the offset math), badge font sizes, and the 2nd carousel's arrows
   not matching the 1st carousel's design.
   (appended only — nothing above this line was changed)
   ================================================================== */

@media(max-width:768px){

    .price-row{

        flex-wrap:nowrap;

        align-items:center;

        gap:6px;
    }

    .price{

        font-size:9px;

        white-space:nowrap;
    }

    .old-price{

        font-size:0.5rem;

        white-space:nowrap;
    }

    .discount{

       font-size:0.5rem;

        padding:2px 7px;

        white-space:nowrap;
        margin-right:0;
    }

}

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

    font-size:.65rem;
}

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

    font-size:.55rem;
}

@media(max-width:768px){

    .delivery-badge,
    .parcel-badge{

        padding:.3rem .5rem;

        gap:.35rem;
    }

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

        font-size:0.5rem;
    }

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

        font-size:.4rem;
    }

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

        font-size:.4rem;

    }
}

.latestSwiper .swiper-button-next,
.latestSwiper .swiper-button-prev,
.popularSwiper .swiper-button-next,
.popularSwiper .swiper-button-prev{

    width:55px;

    height:55px;

    background:#fff;

    border-radius:50%;

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

    color:#4caf50;

    transition:.3s;

    top:120px;
}

.latestSwiper .swiper-button-next:hover,
.latestSwiper .swiper-button-prev:hover,
.popularSwiper .swiper-button-next:hover,
.popularSwiper .swiper-button-prev:hover{

    background:#4caf50;

    color:#fff;

    transform:scale(1.1);
}

.latestSwiper .swiper-button-next::after,
.latestSwiper .swiper-button-prev::after,
.popularSwiper .swiper-button-next::after,
.popularSwiper .swiper-button-prev::after{

    font-size:10px;

    font-weight:700;
}

@media(max-width:768px){

    .latestSwiper .swiper-button-next,
    .latestSwiper .swiper-button-prev,
    .popularSwiper .swiper-button-next,
    .popularSwiper .swiper-button-prev{

        width:45px;

        height:45px;

        top:105px;
    }
}

@media(max-width:576px){

    .latestSwiper .swiper-button-next,
    .latestSwiper .swiper-button-prev,
    .popularSwiper .swiper-button-next,
    .popularSwiper .swiper-button-prev{

        width:28px;

        height:28px;

        top:100px;
    }

    .latestSwiper .swiper-button-next::after,
    .latestSwiper .swiper-button-prev::after,
    .popularSwiper .swiper-button-next::after,
    .popularSwiper .swiper-button-prev::after{

        font-size:11px;
    }
}
@media(max-width:576px){

    .category-container{

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

        gap:16px;
    }

    .category-card{

        background:#fff;

        border-radius:14px;

        padding:8px 8px 12px;

        box-shadow:0 4px 14px rgba(0,0,0,.07);

        text-align:left;

        opacity:0;

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

    /* the circular glow ring doesn't suit a rectangle card */

    .category-card::before{

        display:none;
    }

    .category-card img{

        width:100%;

        height:100px;

        border-radius:10px;

        object-fit:cover;

        border:none;

        box-shadow:none;

        transition:transform .4s ease;
    }

    .category-card:active img{

        transform:scale(1.04);
    }

    .category-card:active{

        transform:scale(.97);
    }

    .category-card h4{

        margin-top:.55rem;

        font-size:14px;

        font-weight:600;

        text-align:left;

        transform:none;
    }

    .category-count{

        display:block;

        margin-top:.15rem;

        font-size:11.5px;

        color:#888;

        font-weight:400;
    }

    @keyframes categoryCardIn{

        from{

            opacity:0;

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

        to{

            opacity:1;

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

/* ==================================================================
   CATEGORY PRODUCT COUNT — desktop/tablet only (matches the
   reference image: blue count text under the category name).
   Scoped to min-width:577px so it can't affect the mobile
   rectangle-card version styled directly above.
   (appended only — nothing above this line was changed)
   ================================================================== */

@media(min-width:577px){

    .category-count{

        display:block;

        margin-top:.3rem;

        font-size:.95rem;

        color:#3b82f6;

        font-weight:500;

        transition:color .3s ease;
    }

    .category-card:hover .category-count{

        color:#1d4ed8;
    }
}

/* ==================================================================
   CATEGORY CARDS — desktop/tablet now use the same rounded-
   rectangle card style as mobile (image + name + count inside a
   white card), instead of the circular photo. Scoped to
   min-width:577px so the existing mobile version above is untouched.
   (appended only — nothing above this line was changed)
   ================================================================== */

@media(min-width:577px){

    .category-card{

        background:#fff;

        border-radius:14px;

        padding:10px 10px 16px;

        box-shadow:0 4px 16px rgba(0,0,0,.07);

        text-align:left;

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

    .category-card:hover{

        transform:translateY(-6px);

        box-shadow:0 10px 26px rgba(0,0,0,.1);
    }

    /* the circular glow ring doesn't suit a rectangle card */

    .category-card::before{

        display:none;
    }

    .category-card img{

        width:100%;

        height:180px;

        border-radius:10px;

        object-fit:cover;

        border:none;

        box-shadow:none;

        transition:transform .4s ease;
    }

    .category-card:hover img{

        transform:scale(1.05);

        border-color:transparent;
    }

    .category-card h4{

        margin-top:.7rem;

        text-align:left;

        transform:none;
    }

    .category-card:hover h4{

        transform:none;
    }
}

/* ==================================================================
   FIX: image was too tall (180px), cards felt cramped together,
   and the product count was blue instead of the site's green.
   (appended only — nothing above this line was changed)
   ================================================================== */

@media(min-width:577px){

    .category-container{

        gap:34px 28px;
    }

    .category-card img{

        height:135px;
    }
}

.category-count{

    color:#2e7d32 !important;
}

.category-card:hover .category-count{

    color:#1b5e20 !important;
}

/* ==========================================================
   MINIMUM ORDER QUANTITY NOTE — hidden by default, shown next to
   the quantity stepper only once Add To Cart has been clicked
   (cart.js already adds the .show class at that point).
   Append this to home.css — nothing else needs to change there.
   ========================================================== */

.min-qty-note{

    display:none;

    align-items:center;

    font-size:.90rem;

    color:#0b8f2d;

    font-weight:600;

    white-space:nowrap;

    margin:0;
}

.min-qty-note.show{

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