/* BBA Side Rail — fixed left rail widget. Typography via global vars (theme wiring). */
.bba-side-rail {
    width: var(--bba-rail-w, 30vw);
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
    background: var(--e-global-color-cloud, #f1f1f1);
    padding: 48px 28px;
    box-sizing: border-box;
    overflow-y: auto;
}
.bba-side-rail.is-fixed {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 5;
}
.bba-side-rail.is-static { position: static; }
.bba-side-rail-brand { display: block; margin-bottom: 44px; text-decoration: none; }
.bba-side-rail-brand img { display: block; width: 150px; height: auto; }
.bba-side-rail-site-title {
    font-family: var(--e-global-typography-primary-font-family, "DM Sans"), Georgia, serif;
    font-weight: var(--e-global-typography-primary-font-weight, 500);
    font-size: clamp(26px, 3vw, 34px);
    color: var(--e-global-color-primary, #1d1d1b);
}
.bba-side-rail-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bba-side-rail-menu ul ul { margin-top: 12px; padding-left: 0; }
.bba-side-rail-menu a {
    font-family: var(--e-global-typography-bba-menu-font-family, "DM Sans"), Arial, Helvetica, sans-serif;
    font-weight: var(--e-global-typography-bba-menu-font-weight, 500);
    font-size: var(--e-global-typography-bba-menu-font-size, 16px);
    letter-spacing: var(--e-global-typography-bba-menu-letter-spacing, 3px);
    text-transform: var(--e-global-typography-bba-menu-text-transform, uppercase);
    color: var(--e-global-color-primary, #1d1d1b);
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.bba-side-rail-menu a:hover { opacity: 0.55; }
.bba-side-rail-submenu a {
    font-weight: var(--e-global-typography-bba-submenu-font-weight, 300);
    color: var(--e-global-color-text, #666666);
    letter-spacing: var(--e-global-typography-bba-submenu-letter-spacing, 3px);
}

/* Menu Only (embed) mode: no panel chrome — the styled nav alone. */
.bba-side-rail-embed {
    width: 100%;
    max-width: none;
    background: none;
    padding: 0;
    overflow: visible;
}

/* Split layout: bottom menu pinned to the bottom of the rail. The menu list
   scrolls internally so the footer stays visible, like the reference. */
.bba-side-rail.has-bottom,
.bba-side-rail-embed.has-bottom {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bba-side-rail.has-bottom .bba-side-rail-brand { flex: 0 0 auto; }
.bba-side-rail.has-bottom .bba-side-rail-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.bba-side-rail.has-bottom .bba-side-rail-footermenu,
.bba-side-rail-embed.has-bottom .bba-side-rail-footermenu {
    flex: 0 0 auto;
    margin-top: auto;
}

/* Reference style (mockup): white panel, muted small-caps section titles,
   12px sentence-case items with 0.5px tracking, active item = 600 weight
   with 2px left border and 8px padding (no underline, no box-shadow bar). */
.bba-side-rail[data-style="reference"] .bba-side-rail-menu { --bba-rail-bar: #1A1A1A; }
.bba-side-rail[data-style="reference"] .bba-side-rail-menu > ul { gap: var(--bba-ref-top-gap, 30px); }
.bba-side-rail.bba-side-rail[data-style="reference"] .bba-side-rail-menu > ul > li > a {
    font-family: var(--e-global-typography-bba_menu-font-family, "Poppins"), Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #737373;
    transition: color 0.2s ease;
}
.bba-side-rail[data-style="reference"] .bba-side-rail-submenu {
    display: flex;
    flex-direction: column;
    gap: var(--bba-ref-sub-gap, 12px);
    margin-top: var(--bba-ref-sub-mt, 16px);
}
.bba-side-rail.bba-side-rail[data-style="reference"] .bba-side-rail-submenu a {
    font-family: var(--e-global-typography-bba_menu-font-family, "Poppins"), Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: none;
    color: #1A1A1A;
    transition: color 0.2s ease;
}
/* Nested levels (v1.6): per-level indent + gap. Level 3 defaults to the
   Level 2 look with its own indent; its controls re-scope via .sub-lvl-3. */
.bba-side-rail[data-style="reference"] .sub-lvl-2 { padding-left: var(--bba-ref-indent-2, 0px); }
.bba-side-rail.bba-side-rail[data-style="reference"] .sub-lvl-3 {
    gap: var(--bba-ref-sub3-gap, var(--bba-ref-sub-gap, 12px));
    padding-left: var(--bba-ref-indent-3, 12px);
}
.bba-side-rail.bba-side-rail[data-style="reference"] .sub-lvl-3 a {
    font-family: var(--e-global-typography-bba_menu-font-family, "Poppins"), Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: none;
    color: #1A1A1A;
    transition: color 0.2s ease;
}
.bba-side-rail.bba-side-rail[data-style="reference"] .bba-side-rail-menu a:hover { color: #737373; }
.bba-side-rail.bba-side-rail[data-style="reference"] .bba-side-rail-submenu li.is-current > a,
.bba-side-rail.bba-side-rail[data-style="reference"] .bba-side-rail-menu > ul > li.is-current > a {
    font-weight: 600;
    color: #1A1A1A;
    border-left: var(--bba-ref-bar-w, 2px) solid var(--bba-rail-bar, #1A1A1A);
    padding-left: 8px;
    margin-left: -10px;
}

/* Bottom menu (Studio / Gallery / Contact) — small caps like the mockup footer. */
.bba-side-rail[data-style="reference"] .bba-side-rail-footermenu { margin-top: 40px; }
.bba-side-rail[data-style="reference"] .bba-side-rail.has-bottom .bba-side-rail-footermenu,
.bba-side-rail-embed[data-style="reference"].has-bottom .bba-side-rail-footermenu { margin-top: auto; padding-top: 40px; }
.bba-side-rail[data-style="reference"] .bba-side-rail-footermenu > ul { gap: 12px; }
.bba-side-rail.bba-side-rail[data-style="reference"] .bba-side-rail-footermenu a {
    font-family: var(--e-global-typography-bba_menu-font-family, "Poppins"), Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1A1A1A;
    text-decoration: none;
}

/* Submenu behaviors: collapse (accordion) and hover open. "Always open" is
   the default with no data-submenu rules. Both work at any nesting depth. */
.bba-side-rail[data-submenu="collapse"] .bba-side-rail-submenu,
.bba-side-rail[data-submenu="hover"] .bba-side-rail-submenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease;
}
.bba-side-rail[data-submenu="hover"] li:hover > .bba-side-rail-submenu,
.bba-side-rail[data-submenu="hover"] li:focus-within > .bba-side-rail-submenu {
    max-height: 1600px;
    opacity: 1;
}
/* On product pages the current collection's chain renders pre-opened. */
.bba-side-rail[data-submenu="hover"] li.is-current-ancestor > .bba-side-rail-submenu {
    max-height: 1600px;
    opacity: 1;
}
.bba-side-rail[data-submenu="collapse"] li.is-open > .bba-side-rail-submenu,
.bba-side-rail[data-submenu="collapse"] li.is-current-ancestor > .bba-side-rail-submenu {
    max-height: 1600px;
    opacity: 1;
}
.bba-side-rail .bba-rail-toggle {
    position: absolute;
    right: 0;
    top: 2px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px;
    color: inherit;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.bba-side-rail li.has-children { position: relative; }
.bba-side-rail .bba-rail-toggle:hover { opacity: 1; }
.bba-side-rail .bba-rail-toggle svg { display: block; transition: transform 0.3s ease; }
.bba-side-rail li.is-open > .bba-rail-toggle svg { transform: rotate(180deg); }
.bba-side-rail li.has-children > a { padding-right: 22px; }
/* Collapsed sections add zero extra space (the section gap provides the
   separation; the slider can add some back if wanted). */
.bba-side-rail[data-submenu="collapse"] .bba-side-rail-menu > ul > li {
    margin-bottom: var(--bba-collapse-gap, 0px);
}
.bba-side-rail[data-submenu="collapse"] .bba-side-rail-submenu { margin-top: 0; }
.bba-side-rail[data-submenu="collapse"] li.is-open > .bba-side-rail-submenu,
.bba-side-rail[data-submenu="collapse"] li.is-current-ancestor > .bba-side-rail-submenu {
    margin-top: var(--bba-ref-sub-mt, 16px);
}

/* Burger (drawer mode, mobile only) */
.bba-side-rail-burger {
    display: none;
    position: fixed;
    top: 16px; left: 16px;
    z-index: 90;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 10px;
}
.bba-side-rail-burger svg { display: block; }
.bba-side-rail-burger svg line {
    stroke: var(--e-global-color-primary, #1d1d1b);
    stroke-width: 2;
}

@media (max-width: 800px) {
    .bba-side-rail[data-mobile="stack"] { position: static !important; width: 100% !important; max-width: none !important; }
    .bba-side-rail[data-mobile="hidden"] { display: none !important; }
    .bba-side-rail[data-mobile="drawer"] {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: min(80vw, 340px) !important;
        transform: translateX(-103%);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        z-index: 80;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
        padding-top: 84px;
    }
    .bba-side-rail[data-mobile="drawer"].is-open { transform: translateX(0); }
    .bba-side-rail-burger { display: inline-flex; }
}