/* ============================================================
   Tavoron – Header "Shop" Mega Menu

   IMPORTANT: This stylesheet must load AFTER Astra Pro's own dynamic
   inline CSS (the astra-addon-css handle) or several rules here lose
   specificity/cascade fights against Astra's own generated styles.
   The enqueue call for this file (in functions.php) declares
   'astra-addon-css' as a dependency specifically to guarantee that
   load order - do not enqueue this file without that dependency.
   ============================================================ */

/* ── Shop button (outer wrapper) ──────────────────────────────────────────
 * No background/pill by design - "Shop" reads as a plain nav item, same
 * treatment as Products/Services, just with the hamburger icon and Level 1
 * flyout arrow. Base text/icon color is intentionally left uncontrolled
 * here (see below) so it inherits exactly what .ast-builder-menu-1 gets per
 * page - white over the transparent homepage hero, navy on Shop/Search/PDP
 * (which have their own solid-background header CSS in algolia-shop.css /
 * search.css / product-single.css). Forcing a single hardcoded color here
 * previously fought those page-specific rules and left Shop invisible
 * (white-on-white) on Shop/Search/PDP while every other page was fine. */
.ast-builder-menu-2 {
    flex-shrink: 0;
    align-self: center !important;
    height: auto !important;
}
.ast-builder-menu-2 .ast-nav-menu {
    height: auto !important;
    align-items: center !important;
}
.ast-builder-menu-2 .ast-nav-menu > li {
    height: auto !important;
    align-self: center !important;
}

/* Top-level trigger link — height matches phone CTA button. Padding stays
 * left-only (10px) to match the OUTER .ast-builder-menu-2 wrapper's own
 * 10px right padding from Astra core, keeping the gutter to "Products"
 * the same width as the gutter from the left edge.
 * Weight/size match the Header (Primary) menu's own Customizer typography
 * (header-menu1-font-weight: 600, header-menu1-font-size: 0.85em on a 17px
 * body = 14.45px) — this location has no Customizer typography of its own
 * (header-menu2-font-weight/family: inherit), so 700/13px here previously
 * read as a visibly different, bolder/smaller font than every other item. */
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link {
    font-family: Montserrat, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14.45px !important;
    padding: 0 0 0 10px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: fit-content !important;
    gap: 6px !important;
    white-space: nowrap !important;
    background: transparent !important;
}
/* This link also carries Astra's default `::after { content: "" }` (used
 * for something else in Astra core, unrelated to this button) which is a
 * real, if invisible, flex item - it added a second phantom gap (this
 * link's flex `gap` above) after the arrow with no visible element to
 * show for it, pushing the button 6px wider on the right than the arrow
 * needed. Killing the generated content removes it as a flex participant. */
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link::after {
    content: none !important;
}
/* Yellow hover state is keyed to :hover on the trigger LINK itself
 * (.menu-link:hover), not the ancestor <li>. The mega-menu panel is a DOM
 * sibling of .menu-link (both are direct children of the same <li>), so
 * an ancestor-<li>:hover selector stays true for as long as the pointer
 * is anywhere inside the open panel, leaving the trigger stuck yellow
 * while browsing its submenu items. Astra core's own primary-menu hover
 * color (e.g. Services) is scoped the same direct way, which is why
 * Services correctly reverts to its normal color the moment the pointer
 * leaves the trigger link for its dropdown - matching that behavior here.
 * .focus stays ancestor-scoped (li.focus) since that class is intentionally
 * toggled on ancestor <li>s for keyboard-tab accessibility. */
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link:hover,
.ast-builder-menu-2 .ast-nav-menu > li.focus > .menu-link {
    background-color: transparent !important;
    color: #f6be00 !important;
}
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link:hover .menu-text,
.ast-builder-menu-2 .ast-nav-menu > li.focus > .menu-link .menu-text {
    color: #f6be00 !important;
}

/* Base (non-hover) text color: explicitly pinned to the SAME CSS variable
 * Astra uses for .ast-builder-menu-1 (Services/Industries/etc - see the
 * "Shop button (outer wrapper)" comment above), instead of leaving it truly
 * unset. Menu 2 (this Shop/Products trigger) has no such built-in link to
 * that variable, so on any page without a page-type override (home, and
 * plain inner pages like /services/) it was falling through to an unrelated
 * page-wide default - e.g. Elementor's global kit "a { color: ... }" rule -
 * rendering navy/blue here while Services correctly showed white right next
 * to it. Pinning to var(--ast-global-color-3) keeps this trigger in lockstep
 * with Services on every page and every environment automatically (no
 * hardcoded value to drift between local/live), while Shop/Search/PDP's own
 * solid-background header CSS (algolia-shop.css / search.css /
 * product-single.css) still wins on those pages - those rules add extra
 * body-class/ID scoping, which outranks this one on specificity alone. */
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link,
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link .menu-text {
    color: var(--ast-global-color-3) !important;
}

/* Drop-arrow: base color left uncontrolled (inherits per-page like the
 * text above), yellow on hover. */
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link:hover .icon-arrow svg,
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link:hover .ast-icon svg,
.ast-builder-menu-2 .ast-nav-menu > li.focus > .menu-link .icon-arrow svg,
.ast-builder-menu-2 .ast-nav-menu > li.focus > .menu-link .ast-icon svg {
    fill: #f6be00;
    stroke: #f6be00;
}

/* Menu icon (the hamburger/grid glyph before "Products"): Astra Addon's own
 * Customizer-generated CSS pins this to --ast-global-color-0 (the site's
 * yellow/gold accent) unconditionally, so it rendered yellow at all times
 * instead of matching the label text like the drop-arrow above does. Same
 * base/hover split as the drop-arrow: match the text color by default,
 * yellow only on hover/focus. The Customizer rule targets this exact icon
 * by menu-item ID with the same specificity, so !important is needed here
 * to win.
 * fill/color use currentColor/inherit rather than a hardcoded value or
 * variable - the .menu-link text color itself differs per page (white on
 * home, #183a4b on shop/search/PDP via algolia-shop.css/search.css/
 * product-single.css's own higher-specificity body-class rules), and every
 * one of those rules already sets .menu-link and .menu-text to the same
 * color together. Inheriting from .menu-link keeps the icon in lockstep
 * with whichever of those wins on a given page, with nothing to duplicate
 * here. */
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link .astra-mm-icon-label svg {
    fill: currentColor !important;
    color: inherit !important;
}
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link:hover .astra-mm-icon-label svg,
.ast-builder-menu-2 .ast-nav-menu > li.focus > .menu-link .astra-mm-icon-label svg {
    fill: #f6be00 !important;
    color: #f6be00 !important;
}

/* Astra hides this leading icon (the one before "Shop", separate from the
 * visible down-arrow inside .dropdown-menu-toggle after the text) via its
 * own display:none - but a display:none flex child still gets counted an
 * extra time by this browser's `gap` intrinsic-sizing pass, adding one
 * phantom 6px gap-width to the button's fit-content size with no matching
 * visible gap, which is what was pushing the button's right edge 6px past
 * the actual arrow. Taking it out of flow entirely (instead of relying on
 * display:none alone) avoids that miscount. */
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link > .icon-arrow:first-child {
    display: block !important;
    position: absolute !important;
    left: -9999px !important;
}
/* The toggle button carrying the visible arrow inherits Astra's own
 * height/line-height (60px, sized for the full header bar) which is much
 * taller than this 40px pill - it still lands centered by the flex
 * align-items above, but resetting it to a normal inline box removes the
 * oversized, oddly-proportioned hit target and guarantees the arrow centers
 * on the pill itself rather than on Astra's assumed row height. */
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link .dropdown-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 0 !important;
}
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link .dropdown-menu-toggle .ast-icon.icon-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
}
/* The real source of the lopsided right-side space: Astra's own
 * `.ast-icon.icon-arrow svg` rule carries `margin-left: 10px` (meant for
 * icons that sit to the left of other content elsewhere in Astra). That
 * margin - not any width on the wrapper spans - was the extra ~10px
 * inflating this box past the 7.8px glyph, so no amount of `width: auto`
 * on the spans above could remove it. Zeroing just the margin (leaving
 * width/height alone, since those size the visible glyph correctly)
 * is what actually closes the gap without repeating the "arrow
 * disappears" regression from constraining the svg's own box. */
.ast-builder-menu-2 .ast-nav-menu > li > .menu-link .dropdown-menu-toggle .ast-icon.icon-arrow svg {
    margin-left: 0 !important;
}

/* ── Mega menu panel background ── */
.ast-builder-menu-2 .sub-menu,
.ast-builder-menu-2 .astra-megamenu {
    background: #fff;
}

/* ── Mega menu panel — Level 1 vertical list; hovering a Level 1 row opens
 * a Level 2 flyout to its right laid out as horizontal columns; Level 3
 * items list vertically underneath their Level 2 column header.
 * Must NOT override display on the panel globally (Astra hides it via
 * display:none; overriding that makes the panel always-open on inner pages).
 * Scope layout only when Astra hover state triggers visibility.
 * ─────────────────────────────────────────────────────────────────────── */
.ast-builder-menu-2 .astra-megamenu-li:hover .astra-megamenu.sub-menu,
.ast-builder-menu-2 .astra-megamenu-li.focus .astra-megamenu.sub-menu,
.ast-builder-menu-2 .astra-megamenu-li.tvr-l1-open .astra-megamenu.sub-menu {
    /* Must stay in lockstep with the tvr-l1-open visibility override below -
     * during the grace-period window (real :hover gone, tvr-l1-open still
     * holding the panel open) these sizing rules used to fall away since
     * they were only gated on :hover/.focus, while opacity/visibility
     * stayed on. The panel then reverted to its unstyled (near full-width)
     * size, shoving the Level 2 flyout - positioned at left:100% of THIS
     * panel - way off to the right as a disconnected second box. */
    display: block !important;
    padding: 10px 20px !important;
    box-sizing: border-box !important;
    /* Astra core gives .sub-menu panels a themed top accent border by
     * default. At this panel overridden width it reads as a yellow line
     * that abruptly stops partway across the header instead of spanning
     * anything meaningful - remove it. */
    border-top: none !important;
    /* Combined with the Level 2 flyout width below, this totals 1280px.
     * Previously offset left:-20px on the assumption the panel should line
     * up with the site container edge rather than the Shop button - that
     * pulled the panel 20px further left than the button itself, leaving
     * it visibly hanging off the left side of the trigger instead of
     * starting under it. left:0 anchors the panel to the button it opens
     * from, which is what a dropdown is expected to align with. */
    width: 300px !important;
    left: 0 !important;
    box-shadow: none !important;
}

/* ── Level 1 container flicker fix ──────────────────────────────────────
 * Astra core shows/hides the ENTIRE megamenu (this panel + every Level 1
 * row) via raw CSS :hover with zero grace period (astra-addon's own
 * mega-menu.css, several `:hover { opacity:1; visibility:visible }`
 * rules). This panel is ~1280px wide, and the Level 2 flyout below has
 * real gaps between columns (nothing painted there) - a cursor moving
 * near a column boundary or the panel's outer edge can genuinely lose
 * :hover for a few ms mid-gesture, which with zero grace period reads as
 * the whole menu blinking shut and open again. Overridden here to be
 * driven by a JS class instead (see tavoron_megamenu_l2_hover_intent's
 * l1HideTimer), which opens instantly but closes only after a short
 * delay that a quick re-entry cancels - same dwell-then-persist pattern
 * as the Level 2 rows. Scoped to just the panel + its direct Level 1
 * rows; the Level 2/3 flyout already has its own independent opacity
 * control below and must not be touched here. */
.ast-builder-menu-2 .astra-megamenu-li:not(.tvr-l1-open) .astra-megamenu.sub-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.ast-builder-menu-2 .astra-megamenu-li.tvr-l1-open .astra-megamenu.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.ast-builder-menu-2 .astra-megamenu-li.tvr-l1-open .astra-megamenu.sub-menu > .menu-item {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── Level 1: vertical list. Forced position:static (overriding Astras own
 * position:relative on .menu-item) so this row is NOT the positioning
 * context for its Level 2 flyout below - that flyout positions against
 * the outer panel (already position:absolute) instead, so it always
 * starts at the top of the panel regardless of which Level 1 item
 * triggered it. ── */
.ast-builder-menu-2 .astra-megamenu > .menu-item {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: static !important;
}

/* Font/weight/line-height/row padding here match the Header menu's own
 * ".sub-menu .menu-link" dropdown (e.g. Services) - see the flex layout
 * and arrow rule below for the added Level 2 flyout indicator. */
.ast-builder-menu-2 .astra-megamenu > .menu-item > .menu-link {
    color: #183a4b !important;
    /* The Shop builder location has no menu-typography override in Astra
     * Customizer, so it was falling back to the site's body font (Roboto)
     * while the Header menu's own dropdown (e.g. Services) has one set to
     * Montserrat - the two menus read as mismatched fonts side by side. */
    font-family: Montserrat, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 0 !important;
    display: flex !important;
    /* flex-start (not center) so the arrow lines up with the first line of
     * text on every row - rows that wrap to two lines (e.g. "Engineered
     * Systems & Custom Integration") would otherwise center the arrow
     * against their own taller box, sitting lower than the arrows on
     * single-line rows above/below it. */
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    background: transparent !important;
    text-decoration: none !important;
    border-bottom: none !important;
    cursor: pointer;
}
.ast-builder-menu-2 .astra-megamenu > .menu-item > .menu-link:hover {
    color: #f6be00 !important;
    background: transparent !important;
}
/* Grow the text to fill the row instead of leaving justify-content to size
 * the gap off the text's own (variable) natural width - without this the
 * arrow's x position drifted per row depending on how long that row's
 * label was, instead of sitting flush against one consistent right edge. */
.ast-builder-menu-2 .astra-megamenu > .menu-item > .menu-link .menu-text {
    flex: 1 1 auto !important;
}

/* Level 1 flyout indicator - reuses Astra's own toggle icon (already in the
 * menu markup) instead of the generic .icon-arrow hidden below, so exactly
 * one arrow shows per row, right-aligned by the flex layout above.
 * Astra's own CSS makes this toggle position:absolute (centered against
 * the nearest positioned ancestor) for its own accordion/flyout behavior.
 * The Level 1 row itself is forced position:static above (so the Level 2
 * flyout always anchors to the outer panel, not to whichever row triggered
 * it) - which means an absolutely positioned toggle skips the row entirely
 * and centers against that outer panel instead, landing every row's arrow
 * at the exact same coordinates on top of each other (only the topmost
 * was ever visible). Forcing position:static pulls it back into normal
 * flex flow as a sibling of .menu-text, one per row. Astra also rotates
 * the toggle span itself (not just the inner svg); reset that here so
 * only the svg rotation below applies - otherwise the two rotations stack. */
.ast-builder-menu-2 .astra-megamenu > .menu-item.menu-item-has-children > .menu-link .dropdown-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}
.ast-builder-menu-2 .astra-megamenu > .menu-item.menu-item-has-children > .menu-link .dropdown-menu-toggle .icon-arrow,
.ast-builder-menu-2 .astra-megamenu > .menu-item.menu-item-has-children > .menu-link .dropdown-menu-toggle .ast-icon {
    display: inline-flex !important;
}
.ast-builder-menu-2 .astra-megamenu > .menu-item.menu-item-has-children > .menu-link .dropdown-menu-toggle svg {
    width: 9px !important;
    height: 9px !important;
    fill: #183a4b !important;
    stroke: #183a4b !important;
    transform: rotate(-90deg) !important;
}
.ast-builder-menu-2 .astra-megamenu > .menu-item.menu-item-has-children > .menu-link:hover .dropdown-menu-toggle svg {
    fill: #f6be00 !important;
    stroke: #f6be00 !important;
}

/* ── Level 2: flyout panel to the right of the hovered Level 1 row,
 * columns laid out horizontally ── */
.ast-builder-menu-2 .astra-megamenu > .menu-item > .sub-menu {
    /* Always flex-laid-out; opacity/visibility (not display) control the
     * show/hide state below - switching is instant (no transition) so
     * content stays in lockstep with the hovered row at real traversal
     * speed, see the .tvr-l2-open rule below for why. */
    display: flex !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    /* Positioned against the outer Level 1 panel (position:static is forced
     * on the row above), not against whichever row triggered it - so top:0
     * and left:100% resolve to the outer panel top-right corner every time. */
    top: 0 !important;
    left: 100% !important;
    z-index: 99999 !important;
    background: #fff !important;
    border: 1px solid #e0e6ea !important;
    box-shadow: none !important;
    padding: 16px 20px !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    /* No flex `gap` here on purpose - a flex gap is real empty space with
     * nothing painted in it, so a cursor moving along a column boundary
     * genuinely exits every element's box between columns, losing :hover
     * on the Level 1 trigger for a few ms and (combined with Astra core's
     * own :hover-driven opacity elsewhere) reading as a flicker. The same
     * visual spacing is recreated as padding on each column below instead,
     * which is still inside a real element's box and stays hoverable. */
    gap: 0 !important;
    /* 1280px total (Level 1 at 300px + this 980px) matches the site container width */
    width: 980px !important;
    /* Matches the Level 1 panel rendered height (set as a CSS var by JS,
     * see tavoron_megamenu_l2_hover_intent) so a short category flyout
     * still reaches down as far as the bottom Level 1 row - otherwise
     * moving toward the flyout from a lower row could overshoot past its
     * bottom edge into empty space and lose hover. */
    min-height: var(--tvr-l1-height, auto) !important;
    box-sizing: border-box !important;
}
/* Visibility is driven entirely by JS (tvr-l2-open), not raw :hover - with
 * several Level 1 rows stacked above/below a flyout that always opens at
 * the panel top, relying on :hover alone means passing the mouse over
 * other rows on the way to the flyout switches/closes it mid-transit,
 * which reads as the whole side panel flickering open and shut.
 *
 * No fade transition here on purpose. A fade-in takes longer than a
 * normal traversal down the Level 1 list - each row you pass over starts
 * fading in and then gets cut off mid-fade the instant the next row is
 * hovered, before it ever finishes appearing. That partial glimpse-then-
 * cut on every row is what reads as flicker. Switching instantly (no
 * animation) keeps the flyout content in exact lockstep with whichever
 * row is hovered, which is what stays smooth at real traversal speed. */
.ast-builder-menu-2 .astra-megamenu > .menu-item.tvr-l2-open > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.ast-builder-menu-2 .astra-megamenu > .menu-item > .sub-menu > .menu-item {
    display: block !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    /* Recreates the removed flex `gap` as padding (8px + 8px = 16px
     * between adjacent columns) so the spacing stays inside a hoverable
     * element box instead of being real dead space - see the gap:0 note
     * on the flyout container above. */
    padding: 0 8px !important;
    box-sizing: border-box !important;
}
.ast-builder-menu-2 .astra-megamenu > .menu-item > .sub-menu > .menu-item:first-child {
    padding-left: 0 !important;
}
.ast-builder-menu-2 .astra-megamenu > .menu-item > .sub-menu > .menu-item:last-child {
    padding-right: 0 !important;
}
/* Font/weight/casing/spacing here match the Header menu's nested flyout
 * (e.g. Services > Value-Added Services > Kitting) instead of the previous
 * bold/uppercase column-header treatment. */
.ast-builder-menu-2 .astra-megamenu > .menu-item > .sub-menu > .menu-item > .menu-link {
    color: #183a4b;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    padding: 0 0 8px;
    display: block;
    white-space: normal;
    line-height: 1.3;
    background: transparent;
    border-bottom: none;
    margin-bottom: 8px;
}
.ast-builder-menu-2 .astra-megamenu > .menu-item > .sub-menu > .menu-item > .menu-link:hover {
    color: #f6be00;
    background: transparent;
}

/* ── Level 3: plain vertical list within its Level 2 column ── */
.ast-builder-menu-2 .astra-megamenu > .menu-item > .sub-menu > .menu-item > .sub-menu {
    position: static !important;
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Same font-size/line-height as Level 1 and Level 2 (14px / 1.3) so only
 * weight and color carry the hierarchy, not a mismatched size - rows keep
 * the wider 5px padding for breathing room under their bold header. */
.ast-builder-menu-2 .astra-megamenu > .menu-item > .sub-menu > .menu-item > .sub-menu > .menu-item > .menu-link {
    color: #5a7a89;
    font-family: Montserrat, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400;
    padding: 5px 0 !important;
    display: block;
    white-space: normal;
    line-height: 1.3;
    background: transparent;
}
.ast-builder-menu-2 .astra-megamenu > .menu-item > .sub-menu > .menu-item > .sub-menu > .menu-item > .menu-link:hover {
    color: #f6be00;
    background: transparent;
}

/* Hide drop-arrows inside mega menu (Level 2/3 rows never flyout further).
 * The Level 1 flyout indicator above overrides this for its own row via
 * higher selector specificity - it targets the same .icon-arrow/.ast-icon
 * elements but scoped through .dropdown-menu-toggle. */
.ast-builder-menu-2 .astra-megamenu .menu-item-has-children > .menu-link .icon-arrow,
.ast-builder-menu-2 .astra-megamenu .menu-item-has-children > .menu-link .ast-icon {
    display: none !important;
}

/* ── Mobile: two-tab hamburger menu styles ── */
@media (max-width: 1024px) {
    .tv-mob-tabs {
        display: flex;
        border-bottom: 2px solid #e0e6ea;
        margin: 0 0 8px;
        flex-shrink: 0;
    }
    .tv-mob-tab {
        flex: 1;
        padding: 11px 8px;
        background: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        font-size: 13px;
        font-weight: 700;
        color: #8a9da5;
        cursor: pointer;
        margin-bottom: -2px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        transition: color 0.15s, border-color 0.15s;
    }
    .tv-mob-tab.active {
        color: #183a4b;
        border-bottom-color: #183a4b;
    }
    .tv-mob-panel-shop {
        overflow-y: auto;
    }
    .tv-mob-shop-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    /* Row is a plain positioned container, not a flex row: Astra's own
     * toggle button is absolutely positioned as an overlay on top of the
     * link rather than a flex sibling next to it, so the link's box gets
     * the row's FULL width and wraps text exactly like Astra's does. An
     * earlier flex-based version gave the toggle its own share of the
     * row's width, leaving less room for text, so it wrapped to more
     * lines than Astra's version of the same text - producing taller rows
     * and a layout that read as "different spacing" even though every
     * padding value matched. Divider border-bottom lives here on the row
     * (not the link) purely so a leaf item with no toggle still gets a
     * full-width line - with the toggle now an overlay, the link itself
     * already spans full width regardless, but keeping it on the row
     * avoids re-deriving this per item type. */
    .tv-mob-shop-row {
        position: relative;
        border-bottom: 0.8px solid #ddd;
    }
    /* Colors/fonts/weights below are pulled directly from the primary Menu
     * tab's native Astra accordion (computed styles) so this Products tab
     * reads as the same design: Montserrat 14.45px throughout, navy
     * #183a4b at every level (Astra doesn't fade nested levels to a
     * lighter/muted color), 600 weight for the top level and 500 for every
     * nested level, no divider lines between items, no border-left indent
     * guides, and a flat ~30px left indent for nested levels (Astra doesn't
     * indent progressively deeper per level either). */
    /* Right padding is wider than the primary Menu tab's own 20px: since
     * both this link and the toggle overlay share the same absolute-
     * positioning approach as Astra's real accordion, Astra's 20px doesn't
     * actually reserve enough room to guarantee the text never reaches the
     * icon - it just happens not to collide with Astra's own (shorter)
     * category names. This tab's real category names run longer, so text
     * was visibly running behind the arrow. 44px clears the icon's ~20px
     * inset + ~16px width + a small buffer, every item, regardless of
     * length. */
    .tv-mob-shop-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 44px 0 20px;
        color: #183a4b;
        font-family: Montserrat, sans-serif;
        font-size: 14.45px;
        font-weight: 600;
        text-decoration: none;
        line-height: 1.4;
    }
    .tv-mob-shop-link:hover { color: #f6be00; }
    /* Absolutely positioned overlay, exactly like Astra's own toggle -
     * right padding matches the primary Menu tab: its toggle button sits
     * only ~4.5px from the row's right edge, but the button itself has
     * enough internal padding that the visible arrow SVG actually lands
     * ~20px in - measuring just the button's CSS `right` position (as an
     * earlier pass did) undercounts this by missing that inner padding. */
    .tv-mob-shop-toggle {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        color: #183a4b;
        padding: 10px 20px 10px 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Belt-and-braces: some mobile browsers paint a yellow focus/active
     * fill on plain <button>s that -webkit-tap-highlight-color alone
     * doesn't suppress - force it transparent explicitly in both states. */
    .tv-mob-shop-toggle:focus,
    .tv-mob-shop-toggle:active {
        background: none;
        outline: none;
    }
    /* Arrow size/weight pulled directly from the primary Menu tab's Astra
     * accordion (computed 16.15x14.45px there, and identical at every
     * nesting depth - Astra never shrinks it deeper in, so .tv-mob-sub-toggle
     * below uses this same size rather than a smaller one). */
    .tv-mob-shop-toggle svg {
        width: 16px;
        height: 14px;
        fill: #183a4b;
        transition: transform 0.2s ease;
        display: block;
    }
    .tv-mob-shop-toggle.open svg {
        transform: rotate(180deg);
    }
    .tv-mob-sub-list {
        list-style: none;
        padding: 0;
        margin: 0;
        background-color: #fff;
    }
    .tv-mob-sub-list li { padding: 0; }
    .tv-mob-sub-list a {
        display: block;
        padding: 8px 44px 5px 30px;
        color: #183a4b;
        font-family: Montserrat, sans-serif;
        font-size: 14.45px;
        font-weight: 500;
        text-decoration: none;
    }
    .tv-mob-sub-list a:hover { color: #f6be00; }

    /* ── Mobile: Level 3, nested inside a Level 2 row's expand/collapse ── */
    .tv-mob-sub-list li.tv-mob-sub-item { padding: 0; }
    /* Same overlay approach as .tv-mob-shop-row above: the toggle is an
     * absolutely-positioned overlay, not a flex sibling, so the link gets
     * the row's full width and wraps text exactly like Astra's does. */
    .tv-mob-sub-row {
        position: relative;
        border-bottom: 0.8px solid #ddd;
    }
    .tv-mob-sub-row .tv-mob-sub-link { display: block; padding: 8px 44px 5px 30px; }
    .tv-mob-sub-toggle {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        color: #183a4b;
        padding: 6px 20px 6px 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tv-mob-sub-toggle:focus,
    .tv-mob-sub-toggle:active {
        background: none;
        outline: none;
    }
    .tv-mob-sub-toggle svg {
        width: 16px;
        height: 14px;
        fill: #183a4b;
        transition: transform 0.2s ease;
        display: block;
    }
    .tv-mob-sub-toggle.open svg {
        transform: rotate(180deg);
    }
    .tv-mob-l3-list {
        list-style: none;
        padding: 0;
        margin: 0;
        background-color: #fff;
    }
    .tv-mob-l3-list li { padding: 0; }
    .tv-mob-l3-list a {
        display: block;
        padding: 8px 20px 5px 50px;
        color: #183a4b;
        font-family: Montserrat, sans-serif;
        font-size: 14.45px;
        font-weight: 500;
        text-decoration: none;
    }
    .tv-mob-l3-list a:hover { color: #f6be00; }
}