/* ==========================================================
   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;
    --bda-header-h: 190px;   /* 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-header-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. priority category row (responsive count, never wraps) ---------- */
body.bda-storefront .mf-menu{
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}
body.bda-storefront .mf-menu > li{ flex: 0 0 auto; }
body.bda-storefront .mf-menu > li > a{
    max-width: 15ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* how many categories stay in the row per breakpoint */
@media (min-width: 992px){
    .mf-menu > li.bda-nav-item{ display: none; }
    .mf-menu > li.bda-nav-item[data-nav-index="1"],
    .mf-menu > li.bda-nav-item[data-nav-index="2"],
    .mf-menu > li.bda-nav-item[data-nav-index="3"]{ display: block; }
}
@media (min-width: 1200px){
    .mf-menu > li.bda-nav-item[data-nav-index="4"],
    .mf-menu > li.bda-nav-item[data-nav-index="5"]{ display: block; }
}
@media (min-width: 1440px){
    .mf-menu > li.bda-nav-item[data-nav-index="6"]{ display: block; }
}
@media (min-width: 1600px){
    .mf-menu > li.bda-nav-item[data-nav-index="7"]{ display: block; }
}

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