.brand-mega-menu-container {
    /* Fill the parent (Elementor mega menu container, mobile menu panel,
       or page content column) instead of breaking out to viewport width.
       The previous `width: 100vw` + negative-margin breakout made the menu
       wider than narrow parents (e.g. the mobile slide-out menu panel),
       so the overflow became draggable in every direction. */
    width: 100%;
    max-width: 100%;
    font-family: inherit;
    padding: 10px 0 40px 0;
    background: #fff;
    box-sizing: border-box;
    margin-top: 0;
    overflow-x: hidden;
}

.brand-alphabet-filter {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 50px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: center;
}
.brand-alphabet-filter::-webkit-scrollbar { display: none; }

.alphabet-btn {
    background: none !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    outline: none !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    transition: 0.3s;
    text-transform: uppercase;
    border-radius: 50% !important;
    margin: 0 5px;
    flex-shrink: 0;
    padding: 0 !important;
    line-height: 1 !important;
    min-width: 40px;
}

.alphabet-btn:hover,
.alphabet-btn:focus {
    border-color: #999 !important;
    color: #000;
    box-shadow: none !important;
    outline: none !important;
}

.alphabet-btn.active {
    color: #fff !important;
    background-color: #000 !important;
    border-color: #000 !important;
}

.alphabet-btn[data-filter="all"] {
    width: auto !important;
    min-width: 60px;
    padding: 0 15px !important;
    border-radius: 30px !important;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px 20px;
    padding: 0 50px;
    max-width: 1400px;
    margin: 0 auto;
    /* Defensive: a grid container is itself a flex/grid item of its parent
       in some Elementor layouts; min-width: 0 stops it from pushing out. */
    min-width: 0;
    box-sizing: border-box;
}

.brand-item {
    font-size: 14px;
    line-height: 1.4;
    /* Override grid's default `min-width: auto` (= intrinsic content size).
       Without this, a long brand name with white-space: nowrap forces its
       grid item to that width, pushing the whole 2-column grid wider than
       the parent — e.g. ~362px in a 270px mobile menu panel. With min-
       width: 0 the column respects its 1fr share and the ellipsis kicks
       in for long names. */
    min-width: 0;
}

.brand-item a {
    text-decoration: none;
    color: #555;
    transition: 0.2s;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-item a:hover {
    color: #000;
    padding-left: 5px;
}

@media (max-width: 1400px) { .brand-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1200px) { .brand-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px)  { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
    /* Default (mode=bar): scale the alphabet filter down so it fits as a
       horizontal scroller. The desktop bar's 40px circles can't fit across
       a phone, so we shrink them and let users swipe sideways. */
    .brand-alphabet-filter {
        justify-content: flex-start !important;
        padding: 10px 16px !important;
        margin-bottom: 20px !important;
        gap: 6px;
        scroll-padding-inline: 16px;
    }
    .alphabet-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
        font-size: 12px;
        margin: 0 !important;
    }
    .alphabet-btn[data-filter="all"] {
        min-width: 44px;
        padding: 0 10px !important;
    }
    .brand-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 14px !important;
        gap: 4px 6px !important;
    }
    .brand-mega-menu-container { padding: 10px 0 30px 0 !important; }
}

/* ==========================================================================
   Mobile mode: select — native <select> dropdown replaces the alphabet bar
   ========================================================================== */

.brand-mobile-select-wrap { display: none; }

@media (max-width: 768px) {
    /* Hide the alphabet bar on mobile in select mode and show the dropdown. */
    [data-mobile-mode="select"] .brand-alphabet-filter { display: none !important; }

    [data-mobile-mode="select"] .brand-mobile-select-wrap {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 20px 24px;
    }
    .brand-mobile-select-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #555;
    }
    .brand-mobile-select-control {
        position: relative;
    }
    .brand-mobile-select-control::after {
        content: "";
        position: absolute;
        right: 14px;
        top: 50%;
        width: 14px;
        height: 14px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") center/contain no-repeat;
        pointer-events: none;
        transform: translateY(-50%);
    }
    .brand-mobile-select {
        width: 100%;
        padding: 12px 40px 12px 14px;
        /* 16px font-size prevents iOS Safari from zooming the viewport on focus. */
        font-size: 16px;
        font-weight: 500;
        color: #111;
        line-height: 1.2;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .brand-mobile-select:focus {
        outline: none;
        border-color: #111;
    }
}

/* ==========================================================================
   Mobile modes: sticky & accordion — grouped letter sections
   ========================================================================== */

.brand-grouped {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
    min-width: 0;
    box-sizing: border-box;
}

.brand-group {
    margin-bottom: 28px;
    min-width: 0;
}

.brand-group-body {
    min-width: 0;
}

.brand-group-header {
    width: 100%;
    margin: 0 0 12px;
    padding: 4px 0;
    background: transparent;
    /* !important on border/outline/shadow defeats the parent theme's
       <button> styles (rounded outline, focus ring) that otherwise
       draw a thin pill around every letter heading. */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: left;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    color: inherit;
}
.brand-group-header:hover,
.brand-group-header:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.brand-group-letter {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
}

.brand-group-count {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}

.brand-group-chevron {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    color: #555;
    transition: transform 0.2s ease;
}

.brand-group.is-open .brand-group-chevron {
    transform: rotate(180deg);
}

.brand-group-body {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px 20px;
}

@media (max-width: 1400px) { .brand-group-body { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1200px) { .brand-group-body { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px)  { .brand-group-body { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 768px) {
    .brand-grouped { padding: 0 14px; }
    .brand-group { margin-bottom: 20px; }
    .brand-group-body {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px 6px;
    }
    .brand-group-letter { font-size: 18px; }
}

/* Sticky mode on mobile: side-column layout.
   The letter lives in a thin left column; the brands fill the right column.
   This is significantly more compact than the old iOS-Contacts-style
   full-width letter headers — vertical scroll length drops by roughly 40%
   because each section no longer needs a dedicated header row. The letter
   still pins (position: sticky) so as the user scrolls past a long section
   the letter stays visible at the top of its column. Filter bar is hidden
   because scrolling is the navigation. */
@media (max-width: 768px) {
    [data-mobile-mode="sticky"] .brand-alphabet-filter { display: none !important; }

    [data-mobile-mode="sticky"] .brand-group {
        display: grid;
        grid-template-columns: 30px 1fr;
        gap: 0 10px;
        margin-bottom: 16px;
    }

    [data-mobile-mode="sticky"] .brand-group-header {
        /* Override the base flex header styles for the side-column layout. */
        position: sticky;
        top: 8px;
        align-self: start;
        z-index: 1;
        margin: 0;
        padding: 2px 0 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    [data-mobile-mode="sticky"] .brand-group-letter {
        font-size: 16px;
        line-height: 1;
    }

    [data-mobile-mode="sticky"] .brand-group-count {
        display: none;
    }
}

/* Accordion mode on mobile: each section is collapsed by default; tap a
   header to expand. JS toggles .is-open. Filter bar is hidden because the
   accordion is the navigation. */
@media (max-width: 768px) {
    [data-mobile-mode="accordion"] .brand-alphabet-filter { display: none !important; }

    [data-mobile-mode="accordion"] .brand-group {
        margin-bottom: 8px;
        border: 1px solid #eee;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
    }

    [data-mobile-mode="accordion"] .brand-group-header {
        cursor: pointer;
        margin: 0;
        padding: 14px 16px;
        background: #fafafa;
    }
    [data-mobile-mode="accordion"] .brand-group-header:hover { background: #f4f4f4; }

    [data-mobile-mode="accordion"] .brand-group:not(.is-open) .brand-group-body {
        display: none;
    }

    [data-mobile-mode="accordion"] .brand-group-body {
        padding: 12px 16px 16px;
    }
}

/* On desktop in accordion mode, the chevron is decorative only (sections
   are always expanded). Hide it so it doesn't suggest an interaction. */
@media (min-width: 769px) {
    [data-mobile-mode="accordion"] .brand-group-chevron { display: none; }
}

/* ==========================================================================
   Mobile menu panel safety net
   --------------------------------------------------------------------------
   When the brand mega menu shortcode is placed inside an Elementor mega menu
   that's then attached to the WordPress mobile menu, any Elementor section
   configured with "Stretch Section" still forces width: 100vw via inline
   styles — even though the parent (the mobile menu panel) is only ~295-335px
   wide. That makes the section overflow the panel, and the overflow becomes
   horizontally draggable inside the panel.
   The fix: when an Elementor section/container/column lands inside the
   .page-mobile-menu-content panel, force it to fill its parent at 100% and
   undo the stretch's inline left/transform values.
   ========================================================================== */
.page-mobile-menu-content .elementor-section,
.page-mobile-menu-content .elementor-section.elementor-section-stretched,
.page-mobile-menu-content .elementor-container,
.page-mobile-menu-content .elementor-column,
.page-mobile-menu-content .elementor-widget-wrap,
.page-mobile-menu-content .elementor-widget,
.page-mobile-menu-content .elementor-shortcode {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    left: 0 !important;
    transform: none !important;
}

/* ==========================================================================
   Desktop fallback for grouped modes (sticky, accordion)
   --------------------------------------------------------------------------
   The sticky/accordion markup is grouped into <section>s for mobile, but on
   desktop we want the SAME flat 6-column grid as bar mode — a long grouped
   list inside a hover-mega-menu would scroll forever. The trick is
   `display: contents`: it removes .brand-group and .brand-group-body from
   the box tree, so their .brand-item children promote to direct grid items
   of .brand-grouped. The result is visually identical to the flat grid in
   bar mode, without rendering the markup twice.
   ========================================================================== */
@media (min-width: 769px) {
    [data-mobile-mode="sticky"] .brand-grouped,
    [data-mobile-mode="accordion"] .brand-grouped {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 5px 20px;
    }
    [data-mobile-mode="sticky"] .brand-group,
    [data-mobile-mode="sticky"] .brand-group-body,
    [data-mobile-mode="accordion"] .brand-group,
    [data-mobile-mode="accordion"] .brand-group-body {
        display: contents;
    }
    [data-mobile-mode="sticky"] .brand-group-header,
    [data-mobile-mode="accordion"] .brand-group-header {
        display: none;
    }
}
@media (min-width: 769px) and (max-width: 1400px) {
    [data-mobile-mode="sticky"] .brand-grouped,
    [data-mobile-mode="accordion"] .brand-grouped { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 769px) and (max-width: 1200px) {
    [data-mobile-mode="sticky"] .brand-grouped,
    [data-mobile-mode="accordion"] .brand-grouped { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 769px) and (max-width: 992px) {
    [data-mobile-mode="sticky"] .brand-grouped,
    [data-mobile-mode="accordion"] .brand-grouped { grid-template-columns: repeat(3, 1fr); }
}