/* ==========================================================
   HOMEPAGE REDESIGN
   This stylesheet is loaded by header.php on index.php only, so the
   width rules below never reach product / category / cart / checkout.
   Backgrounds stay full-bleed; only the content rail is constrained.
   ========================================================== */

body{background:var(--bda-grey-50, #f7f9fc);}
#siteContent{background:var(--bda-grey-50, #f7f9fc);}

/* content rail is now shared for every storefront page and lives in
   assets/css/storefront-shell.css (body.bda-storefront .container) */

/* ---------- section rhythm ---------- */
.home-redesign > section{margin:0;}
.home-redesign .bda-cats,
.home-redesign .bda-benefits,
.home-redesign .bda-promos,
.home-redesign .bda-rewards{padding:26px 0 0;}

/* ---------- hero ---------- */
.home-redesign .bda-hero{padding:16px 0 0;}
.home-redesign .bda-hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    align-items:center;
    gap:24px;
    background:#fff;
    border:1px solid var(--bda-line);
    border-radius:16px;
    padding:22px 28px;
    min-height:300px;
    overflow:hidden;
}
.home-redesign .bda-hero-copy h1{
    margin:0 0 10px;
    font-size:36px;
    line-height:1.14;
    font-weight:800;
    color:var(--bda-navy);
    letter-spacing:-.4px;
}
.home-redesign .bda-hero-accent{color:var(--bda-orange);}
.home-redesign .bda-hero-copy p{
    margin:0 0 16px;
    font-size:15px;
    line-height:1.5;
    color:var(--bda-muted);
    max-width:46ch;
}
.home-redesign .bda-hero-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--bda-navy);
    color:#fff !important;
    text-decoration:none !important;
    font-weight:700;
    font-size:15px;
    padding:11px 20px;
    border-radius:10px;
    min-height:46px;
    border:2px solid var(--bda-lime);
}
.home-redesign .bda-hero-cta i{
    background:var(--bda-lime);
    color:var(--bda-navy);
    width:26px;
    height:26px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
}
.home-redesign .bda-hero-cta:hover{background:var(--bda-navy-soft);}
.home-redesign .bda-hero-points{
    list-style:none;
    margin:16px 0 0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    font-size:13px;
    font-weight:600;
    color:var(--bda-ink);
}
.home-redesign .bda-hero-points i{color:var(--bda-orange);margin-right:6px;}
.home-redesign .bda-hero-visual{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:auto;
    aspect-ratio:2 / 1;
    max-height:none;
    overflow:hidden;
    border-radius:14px;
    background:#f2f4f7;
}
.home-redesign .bda-hero-visual-link{display:block;width:100%;height:100%;}
.home-redesign .bda-hero-visual picture{display:block;width:100%;height:100%;}
.home-redesign .bda-hero-visual img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:cover;
    display:block;
}
.home-redesign .bda-hero-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
    width:100%;
    background:#eef3fa;
    border-radius:14px;
}
.home-redesign .bda-hero-fallback img{width:auto;max-width:240px;}

/* ---------- section heads ---------- */
.home-redesign .bda-block-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    margin:0 0 14px;
}
.home-redesign .bda-block-head h2{
    margin:0;
    font-size:24px;
    font-weight:800;
    color:var(--bda-navy);
}

/* ---------- category strip: always ONE row, scrolls if it overflows ---------- */
.home-redesign .bda-cat-grid{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 8px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}
.home-redesign .bda-cat-grid::-webkit-scrollbar{height:6px;}
.home-redesign .bda-cat-grid::-webkit-scrollbar-thumb{
    background:#d7dee8;
    border-radius:999px;
}
.home-redesign .bda-cat-tile{
    flex:1 0 118px;
    max-width:190px;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none !important;
    background:#fff;
    border:1px solid var(--bda-line);
    border-radius:12px;
    padding:12px 8px;
    height:100px;
    transition:.2s ease;
}
.home-redesign .bda-cat-tile:hover{
    border-color:var(--bda-orange);
    box-shadow:0 10px 20px rgba(11,37,69,.08);
    transform:translateY(-2px);
}
.home-redesign .bda-cat-thumb{
    width:44px;
    height:44px;
    border-radius:11px;
    background:#f3f6fb;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex:0 0 44px;
}
/* image tiles fill the same box as icon tiles so every tile reads equally */
.home-redesign .bda-cat-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    padding:0;
    border-radius:11px;
}
.home-redesign .bda-cat-thumb i{font-size:20px;color:var(--bda-navy);}
.home-redesign .bda-cat-name{
    font-size:12.5px;
    font-weight:700;
    color:var(--bda-ink);
    text-align:center;
    line-height:1.25;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* ---------- benefits strip ---------- */
.home-redesign .bda-benefit-row{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    background:#fbfaef;
    border:1px solid #eceab8;
    border-radius:14px;
    padding:12px 6px;
}
.home-redesign .bda-benefit{
    display:flex;
    align-items:center;
    gap:12px;
    padding:4px 16px;
    border-right:1px solid #e8e6c9;
}
.home-redesign .bda-benefit:last-child{border-right:none;}
.home-redesign .bda-benefit i{
    font-size:24px;
    color:var(--bda-navy);
    flex:0 0 auto;
}
.home-redesign .bda-benefit strong{
    display:block;
    font-size:14px;
    font-weight:700;
    color:var(--bda-ink);
    margin-bottom:2px;
}
.home-redesign .bda-benefit span{
    display:block;
    font-size:12.5px;
    color:var(--bda-muted);
    line-height:1.45;
}
.home-redesign .bda-benefit a{color:var(--bda-navy);font-weight:600;}

/* ---------- promo banners ---------- */
.home-redesign .bda-promo-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:14px;
}
.home-redesign .bda-promo{
    display:block;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--bda-line);
}
.home-redesign .bda-promo img{
    width:100%;
    height:auto;
    aspect-ratio:11/6;
    object-fit:cover;
    display:block;
}
.home-redesign a.bda-promo:hover{border-color:var(--bda-orange);}

/* ---------- referral block ---------- */
.home-redesign .bda-rewards-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    background:var(--bda-navy);
    border-radius:16px;
    padding:26px 30px;
    color:#fff;
}
.home-redesign .bda-rewards-copy h2{
    margin:0 0 8px;
    font-size:22px;
    font-weight:800;
    color:#fff;
}
.home-redesign .bda-rewards-copy p{
    margin:0 0 16px;
    color:#c8d6e8;
    font-size:14px;
    max-width:62ch;
    line-height:1.6;
}
.home-redesign .bda-rewards-btn{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:11px 20px;
    border-radius:10px;
    background:var(--bda-lime);
    color:var(--bda-navy) !important;
    font-weight:700;
    text-decoration:none !important;
}
.home-redesign .bda-rewards-btn:hover{background:#fff;}
.home-redesign .bda-rewards-art i{
    font-size:64px;
    color:rgba(255,255,255,.22);
}

/* PRODUCT */
.mf-product-section{padding:6px 0 18px;}
.mf-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:12px;
}
.mf-section-head-left h2{
    margin:0 0 5px;
    font-size:28px;
    font-weight:800;
    color:#1f1f1f;
}
.mf-section-head-left p{
    margin:0;
    color:#777;
    font-size:14px;
}
.mf-view-all{
    color:#111;
    background:#fff;
    border:1px solid #e6e6e6;
    padding:10px 16px;
    border-radius:6px;
    text-decoration:none !important;
    font-weight:700;
    transition:.25s ease;
}
.mf-view-all:hover{
    background:var(--theme-primary);
    border-color:var(--theme-primary);
    color:#111;
}
/* The product card skin (.mf-product-card / -inner / -image / -info,
   badges, rating, price, delivery and the Add to Cart control) used to
   be duplicated here AND in assets/css/product-card.css, which is why
   the same product looked different on the homepage and on a category
   page. It now lives only in assets/css/product-card.css - this file
   keeps section layout and page chrome. */
.product-carousel{position:relative;}
.product-carousel .owl-stage{
    display:flex;
    align-items:flex-start;
}
.product-carousel .owl-item{padding:0 !important;}
.product-carousel .owl-item{height:auto !important;}
.product-carousel .owl-stage-outer{padding:2px 0 4px;}

/* nav arrows carousel ke side me — neeche ki khaali row hat jaye.
   Owl renders the arrows as <div> (not <button>), so the selectors must stay
   element independent, otherwise .owl-nav keeps its own flow row. */
.product-carousel .owl-nav{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:0;          /* reserves no space in the flow */
    margin:0 !important;
    padding:0 !important;
    pointer-events:none;
}
/* fewer items than the visible count: no navigation at all */
.product-carousel .owl-nav.disabled,
.product-carousel.bda-nav-off .owl-nav{display:none !important;}

.product-carousel .owl-nav .owl-prev,
.product-carousel .owl-nav .owl-next{
    position:absolute;
    top:105px;          /* around the vertical centre of the image area */
    width:38px;
    height:38px;
    margin:0 !important;
    padding:0 !important;
    border:1px solid #e6e6e6 !important;
    border-radius:50% !important;
    background:#fff !important;
    color:#333 !important;
    font-size:20px !important;
    line-height:36px !important;
    text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,.10);
    transition:.25s ease;
    pointer-events:auto;
    z-index:5;
}
.product-carousel .owl-nav .owl-prev{left:-8px;}
.product-carousel .owl-nav .owl-next{right:-8px;}
.product-carousel .owl-nav .owl-prev:hover,
.product-carousel .owl-nav .owl-next:hover{
    background:var(--theme-primary) !important;
    border-color:var(--theme-primary) !important;
    color:#111 !important;
}
.product-carousel .owl-nav .owl-prev.disabled,
.product-carousel .owl-nav .owl-next.disabled{
    opacity:.35;
    cursor:default;
    box-shadow:none;
}
.product-carousel .owl-nav .owl-prev.disabled:hover,
.product-carousel .owl-nav .owl-next.disabled:hover{
    background:#fff !important;
    border-color:#e6e6e6 !important;
    color:#333 !important;
}

/* AUTH */
#siteContent.is-blurred{
    filter:blur(7px);
    pointer-events:none;
    user-select:none;
    transition:filter .2s ease;
}
.auth-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999999;
    padding:16px;
}
.auth-modal{
    width:100%;
    max-width:420px;
    background:#fff;
    border-radius:14px;
    padding:22px 20px;
    box-shadow:0 12px 40px rgba(0,0,0,.35);
    text-align:center;
}
.auth-modal h3{
    margin:0 0 10px;
    font-size:22px;
    font-weight:800;
}
.auth-modal p{
    margin:0 0 16px;
    font-size:14px;
    opacity:.85;
    line-height:1.5;
}
.auth-actions{
    display:grid;
    gap:10px;
}
.auth-btn{
    display:inline-block;
    padding:12px 14px;
    border-radius:10px;
    text-decoration:none !important;
    font-weight:700;
    color:#fff !important;
}
.auth-login{background:#0d6efd;}
.auth-register{background:#198754;}

/* RESPONSIVE */
@media (max-width: 1199px){
    .home-redesign .bda-hero-copy h1{font-size:32px;}
    .home-redesign .bda-benefit-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px;}
    .home-redesign .bda-benefit:nth-child(2){border-right:none;}
}

@media (max-width: 991px){
    .home-redesign .bda-hero-inner{
        grid-template-columns:1fr;
        padding:20px 18px;
        gap:16px;
        min-height:0;
    }
    .home-redesign .bda-hero-copy h1{font-size:30px;}
    /* stacked layout: headline, copy and CTA come before the visual */
    .home-redesign .bda-hero-copy{order:1;}
    .home-redesign .bda-hero-visual{order:2;max-height:none;aspect-ratio:2 / 1;}
    .home-redesign .bda-hero-visual img{max-height:none;}

    /* stacked head must stay left aligned (the desktop skin centres it) */
    .mf-section-head,
    .home-redesign .mf-section-head{
        flex-direction:column;
        align-items:flex-start;
        text-align:left;
    }

    .product-carousel .owl-nav .owl-prev,
    .product-carousel .owl-nav .owl-next{top:110px;}
}

@media (max-width: 767px){
    .home-redesign .bda-cats,
    .home-redesign .bda-benefits,
    .home-redesign .bda-promos,
    .home-redesign .bda-rewards{padding:18px 0 0;}

    .home-redesign .bda-hero{padding:8px 0 0;}
    .home-redesign .bda-hero-inner{padding:14px 13px;border-radius:14px;gap:8px;}
    .home-redesign .bda-hero-copy h1{font-size:22px;line-height:1.18;margin-bottom:6px;}
    .home-redesign .bda-hero-copy p{font-size:13px;line-height:1.4;margin-bottom:10px;}
    .home-redesign .bda-hero-cta{width:100%;justify-content:center;min-height:44px;padding:9px 16px;font-size:14px;}
    .home-redesign .bda-hero-points{gap:4px 12px;font-size:11px;margin-top:10px;}
    .home-redesign .bda-hero-points i{margin-right:4px;}
    .home-redesign .bda-hero-visual{max-height:none;aspect-ratio:2 / 1;}
    .home-redesign .bda-hero-visual img{max-height:none;}
    .home-redesign .bda-hero-fallback{min-height:100px;}

    .home-redesign .bda-block-head{margin-bottom:10px;}
    .home-redesign .bda-block-head h2{font-size:18px;}

    /* swipeable category chips */
    .home-redesign .bda-cat-grid{gap:8px;padding-bottom:6px;}
    .home-redesign .bda-cat-tile{
        flex:0 0 96px;
        max-width:96px;
        height:96px;
        padding:10px 6px;
        gap:6px;
    }
    .home-redesign .bda-cat-thumb{width:38px;height:38px;flex-basis:38px;border-radius:10px;}
    .home-redesign .bda-cat-thumb i{font-size:17px;}
    .home-redesign .bda-cat-name{font-size:11.5px;}

    /* compact two-column trust grid instead of four tall rows */
    .home-redesign .bda-benefit-row{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        padding:10px;
    }
    .home-redesign .bda-benefit{
        border-right:none;
        border-bottom:none;
        padding:4px 4px;
        gap:8px;
        align-items:flex-start;
    }
    .home-redesign .bda-benefit i{font-size:18px;margin-top:2px;}
    .home-redesign .bda-benefit strong{font-size:12.5px;line-height:1.25;}
    .home-redesign .bda-benefit span{font-size:11px;line-height:1.35;}

    /* promos scroll sideways instead of stacking above the products */
    .home-redesign .bda-promo-row{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        gap:10px;
        padding-bottom:6px;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
    }
    .home-redesign .bda-promo{
        flex:0 0 80%;
        max-width:80%;
        scroll-snap-align:start;
    }

    .home-redesign .bda-rewards-box{
        flex-direction:column;
        align-items:flex-start;
        padding:22px 18px;
    }
    .home-redesign .bda-rewards-art{display:none;}
    .home-redesign .bda-rewards-btn{width:100%;justify-content:center;}

    .mf-section-head-left h2{font-size:22px;}
    .product-carousel .owl-nav .owl-prev,
    .product-carousel .owl-nav .owl-next{
        top:95px;
        width:36px;
        height:36px;
        line-height:34px !important;
    }
    .product-carousel .owl-nav .owl-prev{left:0;}
    .product-carousel .owl-nav .owl-next{right:0;}
    .auth-modal{padding:18px 16px;}
}

@media (max-width: 400px){
    .home-redesign .bda-cat-tile{flex-basis:88px;max-width:88px;height:92px;}
}
/* .mf-price-row / .mf-delivery-line moved to assets/css/product-card.css */

.food-icon{
    width:16px;
    height:16px;
    border:2px solid;
    display:inline-block;
    position:relative;
    border-radius:2px;
    flex:0 0 16px;
    background:#fff;
}

.food-icon::after{
    content:'';
    width:8px;
    height:8px;
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.food-icon.veg{
    border-color:#008000;
}

.food-icon.veg::after{
    background:#008000;
}

.food-icon.nonveg{
    border-color:#d60000;
}

.food-icon.nonveg::after{
    background:#d60000;
}

/* ==========================================================
   Product card skin for the redesigned homepage only
   (hooks, ids and cart behaviour are untouched)
   ========================================================== */
.home-redesign .mf-product-section{padding:14px 0 10px;}
.home-redesign .mf-section-head{
    align-items:center;
    margin-bottom:14px;
}
.home-redesign .mf-section-head-left h2{
    font-size:24px;
    color:var(--bda-navy);
}
.home-redesign .mf-view-all{
    border-color:var(--bda-line);
    color:var(--bda-navy);
    border-radius:8px;
}
.home-redesign .mf-view-all:hover{
    background:var(--bda-navy);
    border-color:var(--bda-navy);
    color:#fff;
}

/* equal-height cards inside each carousel row */
.home-redesign .product-carousel .owl-stage{align-items:stretch;}
.home-redesign .product-carousel .owl-item{display:flex;align-items:stretch;}

/* The homepage-only card overrides that used to live here (lime CTA,
   solid orange discount chip, 210px image stage, per-row title heights)
   are gone. The homepage now renders exactly the same card as every
   other listing surface - see assets/css/product-card.css. */

/* ==========================================================
   Final overrides (must stay last: the card skin above sets
   align-items:center for the desktop section head)
   ========================================================== */
@media (max-width: 991px){
    .home-redesign .mf-section-head{
        flex-direction:column;
        align-items:flex-start;
        text-align:left;
        gap:8px;
    }
    .home-redesign .mf-section-head-right{align-self:flex-start;}
}

/* ==========================================================
   CATEGORY PRODUCT ROWS
   One row per top category, cards come from the shared helper
   inc/product-card.php (same markup as every other homepage row).
   ========================================================== */
.home-redesign .bda-catrow{padding:18px 0 0;}
.home-redesign .bda-catrow-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}
.home-redesign .bda-catrow-title{flex:1 1 auto;min-width:0;}
.home-redesign .bda-catrow-title h2{
    margin:0;
    font-size:22px;
    font-weight:800;
    color:var(--bda-navy);
    letter-spacing:-.2px;
    line-height:1.2;
}
.home-redesign .bda-catrow-title p{
    margin:3px 0 0;
    font-size:13px;
    color:var(--bda-muted);
}
/* "View All" reads as an orange text action on the right of the row head,
   balancing the navy section title on the left. */
.home-redesign .bda-catrow-viewall{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:40px;
    padding:0 4px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--bda-orange);
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    transition:color .2s ease;
}
.home-redesign .bda-catrow-viewall:hover,
.home-redesign .bda-catrow-viewall:focus{
    color:#d95612;
    text-decoration:underline;
}
.home-redesign .bda-catrow-viewall:focus-visible,
.home-redesign .bda-catrow-nav:focus-visible{
    outline:3px solid var(--bda-orange);
    outline-offset:2px;
}

.home-redesign .bda-catrow-body{position:relative;}

/* One horizontal rail at every breakpoint - a card must never wrap onto a
   second line, so the row height stays exactly one card tall.
   flex-basis controls how many cards are visible; the rest scroll. */
/* The rail's column layout (2 / 3 / 4 responsive grid) is defined once in
   assets/css/product-card.css together with the card itself, so a card and
   the track it sits in can never disagree about their width again. */

/* The edge arrows belonged to the horizontal rail. The row is a grid now,
   so there is nothing to scroll - home-category-rows.js leaves them hidden
   and product-card.css keeps them display:none. The styling stays here in
   case a future surface re-enables a scrolling rail. */
.home-redesign .bda-catrow-nav{
    position:absolute;
    top:105px;
    z-index:5;
    width:38px;
    height:38px;
    border:1px solid var(--bda-line);
    border-radius:50%;
    background:#fff;
    color:var(--bda-navy);
    font-size:20px;
    line-height:1;
    box-shadow:0 6px 18px rgba(11,37,69,.10);
    transition:.2s ease;
}
.home-redesign .bda-catrow-nav[hidden]{display:none;}
.home-redesign .bda-catrow-nav.prev{left:-8px;}
.home-redesign .bda-catrow-nav.next{right:-8px;}
.home-redesign .bda-catrow-nav:hover{
    background:var(--bda-navy);
    border-color:var(--bda-navy);
    color:#fff;
}
.home-redesign .bda-catrow-nav:disabled{opacity:.35;cursor:default;box-shadow:none;}

@media (max-width: 991px){
    .home-redesign .bda-catrow-title h2{font-size:20px;}
}

@media (max-width: 767px){
    .home-redesign .bda-catrow{padding:14px 0 0;}
    .home-redesign .bda-catrow-head{margin-bottom:8px;}
    .home-redesign .bda-catrow-title h2{font-size:18px;}
    .home-redesign .bda-catrow-viewall{min-height:36px;padding:0 12px;font-size:12.5px;}
}

/* ---- progressive loading skeleton + error ---- */
.home-redesign .bda-catrow-skeleton{
    display:flex;
    min-width:0;
    box-sizing:border-box;
}
.home-redesign .bda-catrow-skeleton span{
    display:block;
    width:100%;
    border:1px solid var(--bda-line);
    border-radius:14px;
    background:linear-gradient(90deg,#eef1f6 25%,#f6f8fa 37%,#eef1f6 63%);
    background-size:400% 100%;
    animation:bdaExploreShimmer 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
    .home-redesign .bda-catrow-skeleton span{animation:none;}
}

.home-redesign .bda-catrow-retry{
    flex:0 0 auto;
    align-self:center;
    margin:0 8px;
    min-height:40px;
    padding:0 16px;
    border:1px solid var(--bda-line);
    border-radius:10px;
    background:#fff;
    color:var(--bda-navy);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}
.home-redesign .bda-catrow-retry:hover{border-color:var(--bda-orange);color:var(--bda-orange);}

/* ==========================================================
   EXPLORE PRODUCTS - compact homepage catalogue browser
   Scoped to .bda-explore; the product cards inside reuse the
   .home-redesign card skin defined above (no new card design).
   ========================================================== */
.home-redesign .bda-explore{padding:8px 0 0;}
/* the block that follows Explore keeps a tight, deliberate gap */
.home-redesign .bda-explore + section{padding-top:18px;}

/* NOTE: the "Explore Products" block was removed from the homepage. The
   .bda-explore rules below are no longer rendered by index.php - they are kept
   only so the block can be restored without rewriting its styling. */
/* light grey panel: the white product cards have to read as separate cards,
   a white shell made the whole block look like one big white slab */
.home-redesign .bda-explore-shell{
    background:#eef2f7;
    border:1px solid #e2e8f1;
    border-radius:14px;
    padding:14px 16px 16px;
}
.home-redesign .bda-explore-head{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-bottom:10px;
}
/* desktop: title left, controls dead-centre of the panel (the empty third
   column mirrors the title so the group is not pushed to the right edge) */
@media (min-width: 992px){
    .home-redesign .bda-explore-head{
        display:grid;
        grid-template-columns:1fr auto 1fr;
    }
}
.home-redesign .bda-explore-title{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:2px 8px;
    flex:0 1 auto;
    min-width:0;
}
.home-redesign .bda-explore-title h2{
    margin:0;
    white-space:nowrap;   /* the heading never breaks into two lines */
    font-size:22px;
    font-weight:800;
    color:var(--bda-navy);
    letter-spacing:-.2px;
}
.home-redesign .bda-explore-count{
    margin:0;
    font-size:13px;
    color:var(--bda-muted);
}
.home-redesign .bda-explore-sub{
    flex:1 1 100%;
    margin:0;
    font-size:13px;
    color:var(--bda-muted);
}

/* ---- desktop filter row ---- */
/* auto margins on both sides centre the controls in the leftover space
   instead of pinning them to the right edge */
.home-redesign .bda-explore-filters{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0 auto;
}
.home-redesign .bda-explore-select{
    height:38px;
    width:auto;              /* content based, no giant stretched pills */
    min-width:0;
    max-width:190px;
    padding:0 30px 0 12px;   /* room for the custom chevron */
    border:1px solid #dbe3ee;
    border-radius:10px;
    background-color:#fff;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230b2545' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 11px center;
    color:var(--bda-navy);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.home-redesign .bda-explore-select:hover{
    border-color:#b9c7da;
    box-shadow:0 1px 4px rgba(11,37,69,.06);
}
.home-redesign .bda-explore-select:focus-visible{
    outline:3px solid var(--bda-orange);
    outline-offset:1px;
}
/* an applied filter is visible at a glance, not only after opening it */
.home-redesign .bda-explore-select.is-set{
    border-color:var(--bda-navy);
    background-color:#eaf0f8;
    font-weight:700;
    box-shadow:inset 0 0 0 1px var(--bda-navy);
}
.home-redesign .bda-explore-clear{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:38px;
    padding:0 14px;
    border:1px solid transparent;
    border-radius:10px;
    background:transparent;
    color:var(--bda-navy);
    font-size:13px;
    font-weight:700;
    transition:.2s ease;
}
.home-redesign .bda-explore-clear i{font-size:11px;}
.home-redesign .bda-explore-clear:hover:not(:disabled){
    border-color:var(--bda-orange);
    background:#fff;
    color:var(--bda-orange);
}
.home-redesign .bda-explore-clear:disabled{
    opacity:.4;
    cursor:default;
}
.home-redesign .bda-explore-mobilebar{display:none;}

/* ---- quick category chips ---- */
.home-redesign .bda-explore-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
}
.home-redesign .bda-explore-chip{
    flex:0 0 auto;
    height:35px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    border:1px solid var(--bda-line);
    border-radius:999px;
    background:#fff;
    color:var(--bda-ink);
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    transition:.2s ease;
}
.home-redesign .bda-explore-chip:hover{border-color:#c9d5e3;}
.home-redesign .bda-explore-chip.is-active{
    background:var(--bda-navy);
    border-color:var(--bda-navy);
    color:#fff;
}
.home-redesign .bda-explore-chip:focus-visible{
    outline:3px solid var(--bda-orange);
    outline-offset:2px;
}

/* ---- results grid (same cards, grid instead of carousel) ---- */
/* fixed 5 columns so the cards keep the lead-carousel width instead of
   collapsing into six narrow ones (auto-fill did exactly that) */
.home-redesign .bda-explore-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0;
    align-items:stretch;
}
.home-redesign .bda-explore-grid .mf-product-card{padding:6px;}

/* the card body stays exactly the homepage card (210px image, same paddings);
   only the delivery line is capped so one verbose product cannot stretch the
   whole grid row */
.home-redesign .bda-explore-grid .mf-delivery-line{
    display:inline-flex;      /* timeline + charge share one line where they fit */
    max-width:100%;
    font-size:11.5px;
    margin:0 10px 6px 0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.home-redesign .bda-explore-grid .mf-delivery-line i{margin-right:5px;}
/* the same discount already sits in the corner badge; dropping the duplicate
   keeps price + MRP on one line at the 5-up card width */
.home-redesign .bda-explore-grid .bda-price-off{display:none;}
.home-redesign .bda-explore-results{position:relative;min-height:120px;}
.home-redesign .bda-explore-results[aria-busy="true"] .bda-explore-grid{opacity:.45;}
.home-redesign .bda-explore-results[aria-busy="true"]{cursor:progress;}

/* skeletons keep the height stable while a filter is applied */
.home-redesign .bda-explore-skeleton{
    margin:6px;
    border:1px solid var(--bda-line);
    border-radius:14px;
    overflow:hidden;
    background:#fff;
}
.home-redesign .bda-explore-skeleton span{
    display:block;
    background:linear-gradient(90deg,#eef1f6 25%,#f6f8fa 37%,#eef1f6 63%);
    background-size:400% 100%;
    animation:bdaExploreShimmer 1.2s ease-in-out infinite;
}
.home-redesign .bda-explore-skeleton .sk-img{height:210px;}
.home-redesign .bda-explore-skeleton .sk-line{height:12px;margin:14px 14px 0;border-radius:6px;}
.home-redesign .bda-explore-skeleton .sk-line.short{width:55%;}
.home-redesign .bda-explore-skeleton .sk-btn{height:44px;margin:16px 14px;border-radius:10px;}
@keyframes bdaExploreShimmer{
    0%{background-position:100% 50%;}
    100%{background-position:0 50%;}
}
@media (prefers-reduced-motion: reduce){
    .home-redesign .bda-explore-skeleton span{animation:none;}
    .home-redesign .bda-explore-drawer-panel{transition:none;}
}

.home-redesign .bda-explore-empty,
.home-redesign .bda-explore-error{
    padding:26px 16px;
    text-align:center;
    color:var(--bda-muted);
}
.home-redesign .bda-explore-empty h3,
.home-redesign .bda-explore-error h3{
    margin:0 0 6px;
    font-size:18px;
    font-weight:800;
    color:var(--bda-navy);
}
.home-redesign .bda-explore-empty p,
.home-redesign .bda-explore-error p{margin:0 0 14px;font-size:13.5px;}

.home-redesign .bda-explore-more{
    display:flex;
    justify-content:center;
    margin-top:14px;
}
.home-redesign .bda-explore-cta{
    min-height:44px;
    padding:11px 26px;
    border-radius:10px;
    border:1px solid var(--bda-navy);
    background:var(--bda-navy);
    color:#fff;
    font-weight:700;
    font-size:14px;
    transition:.2s ease;
}
.home-redesign .bda-explore-cta:hover{
    background:var(--bda-orange);
    border-color:var(--bda-orange);
}
.home-redesign .bda-explore-cta[hidden]{display:none;}
.home-redesign .bda-explore-cta.is-loading{opacity:.7;pointer-events:none;}

/* ---- mobile: compact bar + bottom sheet ---- */
.home-redesign .bda-explore-drawer[hidden]{display:none;}
.home-redesign .bda-explore-drawer{
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:flex-end;
}
.home-redesign .bda-explore-drawer-backdrop{
    position:absolute;
    inset:0;
    background:rgba(11,37,69,.55);
}
.home-redesign .bda-explore-drawer-panel{
    position:relative;
    width:100%;
    max-height:80vh;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:16px 16px 0 0;
    box-shadow:0 -10px 40px rgba(0,0,0,.25);
}
.home-redesign .bda-explore-drawer-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    border-bottom:1px solid var(--bda-line);
}
.home-redesign .bda-explore-drawer-head h3{
    margin:0;
    flex:1 1 auto;
    font-size:17px;
    font-weight:800;
    color:var(--bda-navy);
}
.home-redesign .bda-explore-drawer-close{
    width:44px;height:44px;
    border:1px solid var(--bda-line);
    border-radius:10px;
    background:#fff;
    color:var(--bda-ink);
}
.home-redesign .bda-explore-drawer-body{
    flex:1 1 auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:14px 16px;
    display:grid;
    gap:14px;
}
.home-redesign .bda-explore-drawer-group label{
    display:block;
    margin-bottom:6px;
    font-size:13px;
    font-weight:700;
    color:var(--bda-navy);
}
.home-redesign .bda-explore-drawer-group .bda-explore-select{
    width:100%;
    max-width:none;
    border-radius:10px;
}
.home-redesign .bda-explore-drawer-foot{
    display:flex;
    gap:10px;
    padding:12px 16px;
    border-top:1px solid var(--bda-line);
}
.home-redesign .bda-explore-drawer-clear,
.home-redesign .bda-explore-drawer-apply{
    flex:1 1 0;
    min-height:46px;
    border-radius:10px;
    font-weight:700;
    font-size:14px;
    border:1px solid var(--bda-line);
    background:#fff;
    color:var(--bda-navy);
}
.home-redesign .bda-explore-drawer-apply{
    background:var(--bda-lime);
    border-color:var(--bda-lime-dark);
}
/* both elements: overflow on body alone does not reliably lock Chrome */
html.bda-explore-lock,
body.bda-explore-lock{overflow:hidden;}

@media (max-width: 1199px){
    .home-redesign .bda-explore-select{max-width:160px;font-size:12.5px;}
    .home-redesign .bda-explore-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width: 991px){
    .home-redesign .bda-explore-head{gap:8px 12px;}
    .home-redesign .bda-explore-filters{width:100%;}
    .home-redesign .bda-explore-select{flex:0 1 auto;max-width:none;}
    /* tablet keeps 3 up, matching the homepage carousel at this width */
    .home-redesign .bda-explore-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* 768-991px keeps 3 columns; below 768 the results become a swipe rail */

@media (max-width: 767px){
    .home-redesign .bda-explore{padding:8px 0 0;}
    .home-redesign .bda-explore + section{padding-top:16px;}
    .home-redesign .bda-explore-shell{padding:12px 10px 14px;border-radius:12px;}
    .home-redesign .bda-explore-title h2{font-size:18px;}
    .home-redesign .bda-explore-filters{display:none;}
    /* the count lives in the mobile bar here, so the heading copy is dropped
       (display:none also keeps it out of the accessibility tree) */
    .home-redesign .bda-explore-count{display:none;}
    .home-redesign .bda-explore-mobilebar{
        display:flex;
        align-items:center;
        gap:8px;
        width:100%;
    }
    .home-redesign .bda-explore-mbtn{
        display:inline-flex;
        align-items:center;
        gap:7px;
        min-height:44px;
        padding:0 16px;
        border:1px solid var(--bda-line);
        border-radius:999px;
        background:#fff;
        color:var(--bda-navy);
        font-size:13.5px;
        font-weight:700;
    }
    .home-redesign .bda-explore-mbtn.is-set{
        border-color:var(--bda-navy);
        background:#eaf0f8;
    }
    .home-redesign .bda-explore-mbadge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-width:18px;
        height:18px;
        padding:0 5px;
        border-radius:999px;
        background:var(--bda-orange);
        color:#fff;
        font-size:11px;
        font-weight:800;
        line-height:1;
    }
    .home-redesign .bda-explore-mbadge[hidden]{display:none;}

    /* chips swipe instead of wrapping into a tall block */
    .home-redesign .bda-explore-chips{
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:4px;
        scrollbar-width:none;
        -ms-overflow-style:none;
        scroll-snap-type:x proximity;
    }
    .home-redesign .bda-explore-chips::-webkit-scrollbar{display:none;}
    .home-redesign .bda-explore-chip{scroll-snap-align:start;height:35px;padding:0 13px;font-size:13px;}

    /* results become a contained horizontal rail: the homepage stays short and
       Load More simply appends to the end of the same rail */
    .home-redesign .bda-explore-grid{
        display:flex;
        grid-template-columns:none;
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:hidden;
        gap:0;
        padding-bottom:4px;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -ms-overflow-style:none;
        overscroll-behavior-x:contain;
    }
    .home-redesign .bda-explore-grid::-webkit-scrollbar{display:none;}
    .home-redesign .bda-explore-grid .mf-product-card{
        flex:0 0 72%;      /* ~1.5 cards visible: the next one stays a cue */
        max-width:72%;
        padding:5px;
        scroll-snap-align:start;
    }
    /* mobile rail keeps the homepage mobile card proportions (190px image) */
    .home-redesign .bda-explore-skeleton{flex:0 0 72%;max-width:72%;}
    .home-redesign .bda-explore-skeleton .sk-img{height:190px;}
}

@media (max-width: 400px){
    .home-redesign .bda-explore-shell{padding:10px 8px 12px;}
    .home-redesign .bda-explore-skeleton .sk-img{height:132px;}
}

/* "How referrals work" link sits next to the rewards CTA */
.home-redesign .bda-rewards-link{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    margin-left:12px;
    color:var(--bda-navy);
    font-size:14px;
    font-weight:700;
    text-decoration:underline;
}
.home-redesign .bda-rewards-link:hover{color:var(--bda-orange);}
@media (max-width: 599px){
    .home-redesign .bda-rewards-link{margin-left:0;margin-top:8px;}
}