/* ==========================================================
   BDA STOREFRONT SHELL
   Shared container system + header shell (mega menu, mobile
   category drawer, smart auto-hide header).

   Everything is scoped to body.bda-storefront, which header.php
   adds only to public storefront pages. Admin / vendor / user
   panels use their own header and are never touched.
   ========================================================== */

:root{
    --bda-rail-max: 1680px;
    --bda-rail-gutter: 16px;

    /* sirf <header class="mf-header"> ki height - spacer iske barabar hota hai */
    --bda-header-h: 190px;   /* kept in sync by storefront-shell.js */

    /* header + nav strip, yaani wo point jahan se dropdown panels latakte
       hain. Mega menu aur nav flyout ki max-height ISI se nikalti hai -
       --bda-header-h se nahi, kyunki nav strip header ke BAAHAR hai aur
       uski height (~50px) chhoot jati thi. Us chhooti hui height ki wajah
       se panel viewport ke neeche nikal kar kat jata tha. */
    --bda-shell-h: 250px;    /* kept in sync by storefront-shell.js */
}

/* ---------- 1. one container system for the whole storefront ---------- */
body.bda-storefront .container{
    width: 100%;
    max-width: var(--bda-rail-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--bda-rail-gutter);
    padding-right: var(--bda-rail-gutter);
}

@media (min-width: 1200px){
    body.bda-storefront{ --bda-rail-gutter: 24px; }
}
@media (max-width: 991px){
    body.bda-storefront{ --bda-rail-gutter: 16px; }
}
@media (max-width: 767px){
    body.bda-storefront{ --bda-rail-gutter: 10px; }
}

/* full-bleed section backgrounds stay allowed - only the rail is constrained */
body.bda-storefront .mf-site-header,
body.bda-storefront .mf-footer,
body.bda-storefront .mf-newsletter{ width: 100%; }

/* ---------- 2. smart auto-hide header ---------- */
body.bda-storefront .mf-site-header{
    transition: transform .28s ease;
    will-change: transform;
}
body.bda-storefront.bda-header-hidden .mf-site-header{
    transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce){
    body.bda-storefront .mf-site-header{ transition: none; }
}

/* ---------- 3. desktop mega menu ---------- */
.bda-allcat{ position: relative; }

.bda-mega{
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    z-index: 1400;
    display: none;
    width: min(1050px, calc(100vw - 32px));
    max-height: calc(100dvh - var(--bda-shell-h) - 16px);
    background: #fff;
    border: 1px solid var(--bda-line, #e4e9f0);
    border-radius: 12px;
    box-shadow: 0 22px 48px rgba(11,37,69,.16);
    overflow: hidden;
}
.bda-allcat.is-open .bda-mega{ display: grid; grid-template-columns: 244px minmax(0,1fr); }

/* left rail: scrollable list of every main category */
.bda-mega-left{
    background: #f7f9fc;
    border-right: 1px solid var(--bda-line, #e4e9f0);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    min-height: 0;
    scrollbar-width: thin;
}
.bda-mega-tab{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--bda-ink, #0f2340);
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.bda-mega-tab i{ color: #94a3b8; font-size: 14px; }
.bda-mega-tab:hover,
.bda-mega-tab.is-current{
    background: #fff;
    color: var(--bda-navy, #0b2545);
    box-shadow: 0 2px 8px rgba(11,37,69,.08);
}
.bda-mega-tab.is-current i{ color: var(--bda-orange, #f26a1b); }
.bda-mega-tab.is-active-branch{ color: var(--bda-orange, #f26a1b); }
.bda-mega-tab:focus-visible{ outline: 3px solid var(--bda-orange, #f26a1b); outline-offset: -3px; }

/* right panel: mid headings + end links in responsive columns */
.bda-mega-right{
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 18px 18px;
    min-height: 0;
    min-width: 0;
    scrollbar-width: thin;
}
.bda-mega-panel{ display: none; }
.bda-mega-panel.is-current{ display: block; }

.bda-mega-all{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bda-navy, #0b2545);
    text-decoration: none;
}
.bda-mega-all:hover{ color: var(--bda-orange, #f26a1b); }

.bda-mega-cols{
    columns: 3;
    column-gap: 22px;
}
@media (max-width: 1279px){ .bda-mega-cols{ columns: 2; } }

.bda-mega-group{
    break-inside: avoid;
    margin: 0 0 14px;
}
.bda-mega-head{
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--bda-navy, #0b2545);
    text-decoration: none;
    margin-bottom: 5px;
}
.bda-mega-head:hover{ color: var(--bda-orange, #f26a1b); }
.bda-mega-group ul{ list-style: none; margin: 0; padding: 0; }
.bda-mega-group li a{
    display: block;
    padding: 4px 0;
    font-size: 12.5px;
    color: var(--bda-muted, #5c6b80);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.bda-mega-group li a:hover,
.bda-mega-group li a.is-active{ color: var(--bda-orange, #f26a1b); }

/* ---------- 4. category row (shows every ON category) ----------
   Earlier this row was capped at 3-7 items by breakpoint and the rest were
   pushed into "All Categories". Admin now controls exactly which categories
   appear (Index Page Manage > Header Menu), so the row shows them all: it
   wraps to a second line on narrower desktops instead of hiding any. */
body.bda-storefront .mf-menu{
    flex-wrap: wrap;
    row-gap: 2px;
    min-width: 0;
}
body.bda-storefront .mf-menu > li{ flex: 0 0 auto; }
body.bda-storefront .mf-menu > li > a{
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* every top category stays in the row on desktop (mobile uses the drawer) */
@media (min-width: 992px){
    .mf-menu > li.bda-nav-item{ display: block; }
}
/* a touch more compact so more fit on one line before wrapping */
@media (min-width: 992px){
    body.bda-storefront .mf-menu > li > a{ padding-left: 10px; padding-right: 10px; }
}

/* ---------- 5. bounded hover flyout for a priority category ---------- */
.bda-nav-flyout{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1300;
    display: none;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100dvh - var(--bda-shell-h) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid var(--bda-line, #e4e9f0);
    border-radius: 12px;
    box-shadow: 0 22px 48px rgba(11,37,69,.16);
    padding: 16px 18px;
}
@media (min-width: 992px){
    .mf-menu > li.bda-nav-item{ position: relative; }
    .mf-menu > li.bda-nav-item:hover > .bda-nav-flyout,
    .mf-menu > li.bda-nav-item:focus-within > .bda-nav-flyout,
    .mf-menu > li.bda-nav-item.is-open > .bda-nav-flyout{ display: block; }
    /* keep the panel reachable while the pointer travels from the link */
    .mf-menu > li.bda-nav-item > .bda-nav-flyout::before{
        content: "";
        position: absolute;
        top: -10px; left: 0; right: 0; height: 10px;
    }
    /* flyouts near the right edge open leftwards instead of being cut off */
    .mf-menu > li.bda-nav-item.bda-flyout-right > .bda-nav-flyout{ left: auto; right: 0; }
}
@media (max-width: 991px){
    .bda-nav-flyout{ display: none !important; }
}

/* ---------- 6. mobile off-canvas category drawer ---------- */
.bda-drawer-overlay{
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(8,18,32,.55);
}
.bda-drawer{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1600;
    display: flex;
    flex-direction: column;
    width: min(88vw, 360px);
    height: 100dvh;
    max-height: 100dvh;
    background: #fff;
    box-shadow: 0 0 40px rgba(8,18,32,.28);
    transform: translateX(-100%);
    transition: transform .26s ease;
    visibility: hidden;
}
.bda-drawer.is-open{ transform: translateX(0); visibility: visible; }
@media (prefers-reduced-motion: reduce){
    .bda-drawer{ transition: none; }
}
body.bda-drawer-open{ overflow: hidden; }

.bda-drawer-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--bda-line, #e4e9f0);
    flex: 0 0 auto;
}
.bda-drawer-head h2{
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--bda-navy, #0b2545);
}
.bda-drawer-close{
    width: 44px;
    height: 44px;
    border: 1px solid var(--bda-line, #e4e9f0);
    background: #fff;
    border-radius: 10px;
    color: var(--bda-ink, #0f2340);
    font-size: 18px;
}
.bda-drawer-close:focus-visible{ outline: 3px solid var(--bda-orange, #f26a1b); outline-offset: 2px; }

.bda-drawer-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 24px;
}
.bda-drawer-list{ list-style: none; margin: 0; padding: 0; }
.bda-drawer-item{ border-bottom: 1px solid #f1f4f8; }
.bda-drawer-row{ display: flex; align-items: stretch; }
.bda-drawer-link{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 14px;
    color: var(--bda-ink, #0f2340);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.bda-drawer-link:hover{ color: var(--bda-orange, #f26a1b); }
.bda-drawer-toggle{
    flex: 0 0 48px;
    width: 48px;
    min-height: 48px;
    border: none;
    border-left: 1px solid #f1f4f8;
    background: transparent;
    color: var(--bda-muted, #5c6b80);
    font-size: 18px;
}
.bda-drawer-toggle[aria-expanded="true"] i{ transform: rotate(180deg); }
.bda-drawer-toggle i{ transition: transform .2s ease; display: inline-block; }
.bda-drawer-toggle:focus-visible{ outline: 3px solid var(--bda-orange, #f26a1b); outline-offset: -3px; }

.bda-drawer-sub{ padding: 2px 14px 12px; background: #fafbfd; }
.bda-drawer-group{ padding: 8px 0 4px; }
.bda-drawer-mid{
    display: block;
    min-height: 44px;
    line-height: 1.4;
    padding: 10px 0 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--bda-navy, #0b2545);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.bda-drawer-group ul{ list-style: none; margin: 0; padding: 0 0 0 12px; }
.bda-drawer-group li a{
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 12.5px;
    color: var(--bda-muted, #5c6b80);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.bda-drawer-group li a:hover,
.bda-drawer-group li a.is-active{ color: var(--bda-orange, #f26a1b); }

/* the drawer replaces the old expanding menu: never grow the fixed header.
   On phones the whole nav row disappears - the categories button now sits in
   the first mobile row, which keeps the fixed header compact. */
@media (max-width: 991px){
    body.bda-storefront .mf-menu{ display: none !important; }
    body.bda-storefront .mf-nav.active .mf-menu{ display: none !important; }
    body.bda-storefront .bda-allcat{ display: none; }
    body.bda-storefront .mf-nav-wrap{ min-height: 0; }
}
@media (max-width: 991px){
    /* nav row would be empty here (menu + all-categories are desktop only) */
    body.bda-storefront .mf-nav{ display: none; }

    body.bda-storefront .mf-mobile-toggle{
        position: static !important;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 10px;
        background: var(--bda-navy, #0b2545);
        color: #fff;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    body.bda-storefront .mf-mobile-toggle:focus-visible{
        outline: 3px solid var(--bda-orange, #f26a1b);
        outline-offset: 2px;
    }
    body.bda-storefront .mf-mobile-header{ padding: 8px 0 9px; }
    body.bda-storefront .mf-mobile-top{ margin-bottom: 8px; gap: 8px; }
    body.bda-storefront .mf-mobile-logo{ text-align: center; }
    body.bda-storefront .mf-mobile-logo img{ max-height: 34px; }
}
@media (min-width: 992px){
    .bda-drawer,
    .bda-drawer-overlay{ display: none !important; }
}

/* ---------- 7. no element may push the document wider than the viewport ---------- */
/* Bootstrap rows use fixed -15px margins. When the rail gutter is smaller
   (10px on phones) the row sticks 5px past the container on each side and the
   document becomes wider than the viewport. Tie both to the same token. */
body.bda-storefront .container > .row,
body.bda-storefront .container .row{
    margin-left: calc(-1 * var(--bda-rail-gutter));
    margin-right: calc(-1 * var(--bda-rail-gutter));
}
body.bda-storefront .container .row > [class*="col-"]{
    padding-left: var(--bda-rail-gutter);
    padding-right: var(--bda-rail-gutter);
}

body.bda-storefront .container,
body.bda-storefront .row{ min-width: 0; }
body.bda-storefront img,
body.bda-storefront video,
body.bda-storefront iframe{ max-width: 100%; }

/* fixed/sticky bars must follow the real viewport, never 100vw */
body.bda-storefront .amz-sticky-buy{ left: 0; right: 0; width: auto; }