/* Mega menu card layout (mea-menu-cards)
 *
 * Applies ONLY inside dropdowns whose submenu div carries .mea-menu-cards —
 * added by Mea\MeaMaster\Block\Megamenu\Topmenu when cards are enabled and
 * the dropdown has no Mega Menu designer customization. Without that class
 * none of these rules match and the menu renders stock Porto.
 *
 * Porto rules that MUST be beaten explicitly (styles-l.css, high specificity):
 *   .subchildmenu.mega-columns.columnsN > li { float:left; width:25%; padding:15px 10px 0 }
 *   li.level0.fullwidth .submenu li.level1 > .menu-thumb-img { margin:10px 0 -5px }
 *   li.level0.fullwidth .submenu a { font-size:12px; padding:8px 0; text-transform:uppercase }
 * Hence the liberal !important on layout-critical properties below.
 *
 * Desktop (>=992px): each level-1 category is a card — name header, image
 * tile left, level-2 subcategories as clearly-clickable chevron buttons.
 * Level-1 entries with NO children (li.mea-card-leaf, class added by the
 * block override) render as compact link rows instead of empty card shells.
 * Level-3 hidden. Mobile (<992px): stock accordion, injected thumbs hidden.
 */

@media (min-width: 992px) {
    /* ---- Dropdown panel: rounded corners (Porto forces border-radius:0
       on fullwidth submenus, hence !important) ---- */
    .sw-megamenu.navigation li.level0 > .submenu.mea-menu-cards {
        border-radius: 12px !important;
        overflow: hidden;
    }
    /* Porto adds a hover-bridge ::after to the open submenu (an abspos strip
       3px TALLER than the panel) — inside our overflow-y:auto panel that is
       3px of scroll overflow, i.e. a phantom scrollbar the moment the
       pointer enters the window. Our panels sit flush against the menu item
       and have their own hover grace, so the bridge is unnecessary. */
    .sw-megamenu.navigation li.level0 > .submenu.mea-menu-cards::after {
        content: none !important;
    }

    /* ---- Keep tall panels inside the viewport, open them AT their item ----
       An open flyout must never stretch the page's scroll height: on short
       pages, scrolling moved the pointer off the item, the panel closed, the
       extra height vanished and the browser snapped back up (the "twitch").
       Panels anchor to the menu ul (li is static), each offset to its own
       item's position (--mea-l0off, per nth-child below) so low items like
       Simulation/Linens don't open hundreds of px above the pointer. The
       max-height gives back exactly the offset, so the panel's bottom edge
       never reaches past where the original 100vh-240px cap allowed — page
       height can't grow no matter which item opened. The min() stops the
       offset once only 280px of panel would remain (deep items on short
       viewports); the outer max() keeps it sane on tiny viewports. The
       :has() scoping keeps designer-customized (non-card) dropdowns on
       stock per-item behavior.
       NOTE: megamenu/position.phtml refines this at runtime (measures the
       real panel height and slides the panel UP when the bottom would clip,
       via inline styles with priority important) — the rules below are the
       no-JS fallback. */
    .sw-megamenu.navigation > ul {
        position: relative;
        --mea-l0row: 42px; /* measured level0 row pitch (41px item + 1px gap) */
    }
    .sw-megamenu.navigation > ul > li.level0:has(> .submenu.mea-menu-cards) {
        position: static !important;
    }
    .sw-megamenu.navigation li.level0 > .submenu.mea-menu-cards {
        --mea-l0off: 0px;
        top: calc(var(--mea-l0off) - 16px) !important; /* 15px above the item, matching the JS positioner */
        max-height: calc(100vh - 240px - var(--mea-l0off));
        /* Porto fixes the side-megamenu flyout at 1024px, which runs past
           the right edge of narrow desktop windows (<~1330px) and clips the
           panel. The menu column's right edge is a constant 279px, so cap
           the panel to the remaining width with an 18px margin. Interior
           layouts are fluid (card grid auto-fill, percentage tiles,
           left/right-anchored panes), so they adapt. */
        width: min(1024px, calc(100vw - 296px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
    }
    .sw-megamenu.navigation > ul > li.level0:nth-child(2) > .submenu.mea-menu-cards { --mea-l0off: max(0px, min(calc(1 * var(--mea-l0row)), calc(100vh - 520px))); }
    .sw-megamenu.navigation > ul > li.level0:nth-child(3) > .submenu.mea-menu-cards { --mea-l0off: max(0px, min(calc(2 * var(--mea-l0row)), calc(100vh - 520px))); }
    .sw-megamenu.navigation > ul > li.level0:nth-child(4) > .submenu.mea-menu-cards { --mea-l0off: max(0px, min(calc(3 * var(--mea-l0row)), calc(100vh - 520px))); }
    .sw-megamenu.navigation > ul > li.level0:nth-child(5) > .submenu.mea-menu-cards { --mea-l0off: max(0px, min(calc(4 * var(--mea-l0row)), calc(100vh - 520px))); }
    .sw-megamenu.navigation > ul > li.level0:nth-child(6) > .submenu.mea-menu-cards { --mea-l0off: max(0px, min(calc(5 * var(--mea-l0row)), calc(100vh - 520px))); }
    .sw-megamenu.navigation > ul > li.level0:nth-child(7) > .submenu.mea-menu-cards { --mea-l0off: max(0px, min(calc(6 * var(--mea-l0row)), calc(100vh - 520px))); }
    .sw-megamenu.navigation > ul > li.level0:nth-child(8) > .submenu.mea-menu-cards { --mea-l0off: max(0px, min(calc(7 * var(--mea-l0row)), calc(100vh - 520px))); }
    .sw-megamenu.navigation > ul > li.level0:nth-child(9) > .submenu.mea-menu-cards { --mea-l0off: max(0px, min(calc(8 * var(--mea-l0row)), calc(100vh - 520px))); }
    .sw-megamenu.navigation > ul > li.level0:nth-child(10) > .submenu.mea-menu-cards { --mea-l0off: max(0px, min(calc(9 * var(--mea-l0row)), calc(100vh - 520px))); }
    .sw-megamenu.navigation > ul > li.level0:nth-child(11) > .submenu.mea-menu-cards { --mea-l0off: max(0px, min(calc(10 * var(--mea-l0row)), calc(100vh - 520px))); }
    .sw-megamenu.navigation > ul > li.level0:nth-child(12) > .submenu.mea-menu-cards { --mea-l0off: max(0px, min(calc(11 * var(--mea-l0row)), calc(100vh - 520px))); }

    /* ---- Hover hand-off: snappy, ZERO overlap (client req Jul 14) ----
       The old panel must be fully gone BEFORE the next appears: close hides
       at 80ms (just enough hold to survive 1px boundary jitter — the panel
       sits flush against its item, so no travel gap needs bridging), open
       waits 120ms. close < open guarantees no two dropdowns are ever
       visible together; in-panel dead zones are handled by the pane-default
       rules, NOT by delays. Do not raise these — longer holds visibly
       overlap neighboring dropdowns and the client rejected that twice. */
    .sw-megamenu.navigation li.level0 > .submenu.mea-menu-cards {
        transition: opacity .08s ease, visibility 0s linear .08s !important;
    }
    .sw-megamenu.navigation li.level0:hover > .submenu.mea-menu-cards {
        transition: opacity .1s ease .12s, visibility 0s linear .12s !important;
    }

    /* ---- Dropdown container: uniform card grid ---- */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        /* no dense flow: source order is the cards-then-leaves partition —
           dense would backfill a leaf row up into a gap beside the cards */
        align-items: stretch;
        gap: 14px;
        padding: 16px 18px !important;
        margin: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* ---- Each level-1 category = a card ---- */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li {
        float: none !important;
        clear: none !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        background: #fff;
        border: 1px solid #e2e5e9;
        border-radius: 10px;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start;
        align-content: flex-start;
        gap: 10px 14px;
        transition: border-color .18s ease, box-shadow .18s ease;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li:hover {
        border-color: #0071dc;
        box-shadow: 0 6px 18px rgba(13, 75, 135, 0.10);
    }

    /* ---- Category name = card header (full-width first row) ----
       Keep Porto's uppercase/bold header typography, just position it. */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li > a {
        order: -1;
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #21293c !important;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li > a:hover,
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li > a:hover > span {
        color: #0071dc !important;
        text-decoration: none !important;
    }

    /* ---- Image tile, left ---- */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li > .menu-thumb-img {
        flex: 0 0 84px !important;
        width: 84px !important;
        height: 84px !important;
        margin: 0 !important;
        float: none !important;
        border-radius: 10px;
        background: #f6f8fa;
        display: flex !important;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards .menu-thumb-img img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain;
        padding: 5px;
        box-sizing: border-box;
    }

    /* ---- Wide cards: many subcategories → span the full dropdown ---- */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li.mea-card-wide {
        grid-column: 1 / -1;
    }

    /* ---- Per-category layout: Wound Management (6) + Urological Care (7)
       share the top row — WM takes two columns and grows taller, Uro takes
       the third. When the grid has too few columns, span clamps and Uro
       wraps underneath automatically. ---- */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li.mea-cat-6.mea-card-wide {
        grid-column: span 2;
    }
    /* Urological Care: small card — full-width stacked buttons fill its
       column neatly instead of leaving a ragged half-empty area. */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li.mea-cat-7 > ul.subchildmenu {
        grid-template-columns: 1fr;
    }
    /* Exam Room Accessories (Medical Equipment dropdown): renders last
       (leaves-first order) — give it the whole bottom row to itself. */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li.mea-cat-253 {
        grid-column: 1 / -1;
    }

    /* ---- Level-2 subcategories = uniform button grid ----
       Equal-width cells, fixed height, wraps to the available width. */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li > ul.subchildmenu {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        align-items: stretch;
        align-content: flex-start;
        gap: 7px;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li > ul.subchildmenu > li {
        float: none !important;
        clear: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li > ul.subchildmenu > li > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100% !important;
        height: 36px;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 1px solid #c9d7e4 !important;
        border-radius: 8px;
        background: #fff;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: #0071dc !important;
        box-shadow: 0 1px 2px rgba(16, 42, 67, 0.06);
        transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
    }
    /* one tidy line per button — long names ellipsize (full name in title=) */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li > ul.subchildmenu > li > a > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    /* chevron: makes each entry read as a link, not a tag */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li > ul.subchildmenu > li > a::after {
        content: "\203A"; /* › */
        font-size: 14px;
        line-height: 1;
        color: #7fa3c4;
        flex: 0 0 auto;
        transition: transform .15s ease, color .15s ease;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li > ul.subchildmenu > li > a:hover {
        border-color: #0071dc !important;
        background: #0071dc !important;
        color: #fff !important;
        box-shadow: 0 3px 8px rgba(13, 75, 135, 0.25);
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li > ul.subchildmenu > li > a:hover > span {
        color: #fff !important;
        text-decoration: none !important;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li > ul.subchildmenu > li > a:hover::after {
        color: #fff;
        transform: translateX(2px);
    }

    /* ---- Leaf cards: level-1 entries with no subcategories ----
       Compact one-line link row: small image, name, arrow — clearly a link,
       no empty shell. */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li.mea-card-leaf {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px;
        padding: 10px 14px !important;
        align-self: start;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li.mea-card-leaf > .menu-thumb-img {
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 8px;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li.mea-card-leaf > a {
        order: 0;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0;
        display: inline-flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    /* the arrow that says "this goes somewhere" */
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li.mea-card-leaf > a::after {
        content: "\203A";
        font-size: 18px;
        line-height: 1;
        color: #9aa9b8;
        flex: 0 0 auto;
        transition: transform .15s ease, color .15s ease;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards .subchildmenu.mega-columns > li.mea-card-leaf:hover > a::after {
        color: #0071dc;
        transform: translateX(2px);
    }

    /* ---- Kits showcase (Standard Kits dropdown, .mea-kits-showcase) ----
       Injected hero tile(s) — one per kit line — plus a Custom Kits promo
       tile lead the grid; the real leaf rows stay in the DOM for the mobile
       accordion but are hidden here (the heroes represent them). Kill
       switch: mea/megamenu/kits_promo (unset = on). Copy mirrors
       /supplyinfo. */
    /* li.level1 added for specificity: the browse-mode leaf rule later in
       the file (display: inline-flex !important) ties this selector
       otherwise and would un-hide the leaves in showcase+browse mode. */
    /* only leaves REPRESENTED by a showcase tile are hidden (mea-showcased,
       stamped by the block) — leaves the admin adds beyond the showcase
       render as normal link rows below the sections */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.level1.mea-card-leaf.mea-showcased {
        display: none !important;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-hero {
        grid-column: span 2;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 20px;
        padding: 18px 20px !important;
        background: linear-gradient(135deg, #f2f8ff, #e7f2fd);
        border: 1px solid #cfe3f6;
        /* containing block for the full-tile cover link (safe: this li has
           no browse pane inside — the panel-anchoring trap doesn't apply) */
        position: relative !important;
    }
    /* the whole hero tile is one click target */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-hero > a.mea-kit-hero__cover {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: 1;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* text paints above the cover but clicks pass through it to the
       cover; only the button keeps its own hover/click */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .mea-kit-hero__body {
        position: relative;
        z-index: 2;
        pointer-events: none;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns a.mea-kit-hero__btn {
        pointer-events: auto;
    }
    /* order/flex/width !important: the generic card-header rule
       (> li > a { flex: 0 0 100% !important; order: -1 }) matches every
       anchor in these tiles and must be beaten explicitly. */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-hero > a.mea-kit-hero__img {
        flex: 0 0 150px !important;
        width: 150px !important;
        height: 150px !important;
        order: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 10px;
        background: #fff;
        display: flex !important;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .mea-kit-hero__img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
        padding: 8px;
        box-sizing: border-box;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .mea-kit-hero__body {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-width: 0;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .mea-kit-hero__name {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #21293c;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .mea-kit-hero__pitch {
        font-size: 13.5px;
        line-height: 1.45;
        color: #4e6076;
    }
    /* WYSIWYG pitches arrive as <p> blocks (needed for alignment) — keep
       them flush inside the tiles */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .mea-kit-hero__pitch p,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .mea-kit-custom__pitch p {
        margin: 0 0 3px;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns a.mea-kit-hero__btn {
        display: inline-flex !important;
        align-items: center;
        align-self: flex-start;
        flex: 0 0 auto !important;
        order: 0 !important;
        width: auto !important;
        margin-top: 5px;
        padding: 10px 18px !important;
        border-radius: 8px;
        background: #0071dc !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        box-shadow: 0 2px 6px rgba(0, 113, 220, 0.28);
        transition: background .15s ease;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns a.mea-kit-hero__btn:hover {
        background: #005cb8 !important;
        color: #fff !important;
        text-decoration: none !important;
    }
    /* Slim sub-row variant (secondary showcase entries, e.g. Injection Pads
       under Simulation): a thin strip — small image, name, compact button —
       clearly subordinate to the headline hero above it. */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-hero.mea-kit-hero--slim {
        padding: 10px 20px !important;
        gap: 14px;
        background: #f8fbfe;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-hero.mea-kit-hero--slim > a.mea-kit-hero__img {
        flex: 0 0 52px !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 8px;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-hero.mea-kit-hero--slim .mea-kit-hero__body {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        flex: 1 1 auto;
        min-width: 0;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-hero.mea-kit-hero--slim .mea-kit-hero__name {
        font-size: 14.5px;
        font-weight: 700;
        flex: 1 1 auto;
        min-width: 0;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-hero.mea-kit-hero--slim a.mea-kit-hero__btn {
        margin-top: 0;
        margin-left: auto;
        padding: 6px 13px !important;
        font-size: 12px !important;
        box-shadow: none;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-custom {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 7px;
        padding: 18px 20px !important;
        background: #fbfdff;
        border: 1px dashed #a9c9e8;
        /* containing block for the full-tile cover link (no pane inside) */
        position: relative !important;
    }
    /* whole tile → supplyinfo; text paints under the transparent cover */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-custom > a.mea-kit-custom__cover {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: 1;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* the phone keeps its own tel: click (and the learn-more its hover) */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-custom > a.mea-kit-custom__phone,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-custom > a.mea-kit-custom__link {
        position: relative;
        z-index: 2;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .mea-kit-custom__name {
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #21293c;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .mea-kit-custom__pitch {
        font-size: 13px;
        line-height: 1.5;
        color: #4e6076;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns a.mea-kit-custom__phone {
        flex: 0 0 auto !important;
        order: 0 !important;
        width: auto !important;
        margin-top: auto;
        padding: 0 !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: #0071dc !important;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns a.mea-kit-custom__phone:hover {
        text-decoration: underline !important;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns a.mea-kit-custom__link {
        flex: 0 0 auto !important;
        order: 0 !important;
        width: auto !important;
        padding: 0 !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: #b8860b !important; /* gold */
        text-decoration: none !important;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns a.mea-kit-custom__link:hover {
        color: #96700a !important; /* darker gold on hover */
        text-decoration: none !important;
    }

    /* ---- Showcase + browse: the section (Bags) renders as a normal
       browse row + hover pane BELOW the tiles, like every other dropdown's
       sections. The tiles get a FIXED height so the browse zone can shift
       down by a known amount (--mea-kits-head = tile row + grid gap).
       The stock default-first gating keys on :first-child, which is now a
       hero tile — the sections sit last (leaves-first order), so these
       showcase copies key on :last-child (supports ONE section; the
       block's showcase branch documents this). The pointer resting on the
       tiles also counts as "default" via :has(), so the pane doesn't blink
       out while reading the promo. Divider off: the leaf rows exist in the
       DOM (mobile accordion) but are hidden here, so :has() would draw a
       stray line. */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns {
        --mea-kits-head: 204px; /* one 190px tile row + 14px gap */
    }
    /* more kit lines = more hero rows (the block adds mea-kits-tiles-N);
       each extra row shifts the browse zone down another 204px */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase.mea-kits-tiles-2 .subchildmenu.mega-columns { --mea-kits-head: 408px; }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase.mea-kits-tiles-3 .subchildmenu.mega-columns { --mea-kits-head: 612px; }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase.mea-kits-tiles-4 .subchildmenu.mega-columns { --mea-kits-head: 816px; }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-hero,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-custom {
        height: 190px;
    }
    /* slim sub-rows are a third of a hero's height */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-hero.mea-kit-hero--slim {
        height: 64px;
    }
    /* companion tile beside the slim row — inherits the promo-tile look,
       shrunk to the slim row's height */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-custom.mea-kit-custom--mini {
        height: 64px;
        padding: 8px 14px !important;
        flex-direction: row !important; /* base tile is column !important */
        align-items: center;
        justify-content: center;
        gap: 9px;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .mea-kit-custom--mini .mea-kit-custom__arrow {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        color: #0071dc;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .mea-kit-custom--mini .mea-kit-custom__arrow svg {
        width: 20px;
        height: 20px;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-custom.mea-kit-custom--mini .mea-kit-custom__pitch {
        font-size: 11.5px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* head height when the second showcase row is slim (hero 190 + gap 14 +
       slim 64 + gap 14) — keeps a future browse zone aligned. The extra
       .mea-kits-tiles-2 class out-specifies the generic tiles-2 head rule
       that appears LATER in this file (same-specificity ties = file order). */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase.mea-kits-slim.mea-kits-tiles-2 .subchildmenu.mega-columns {
        --mea-kits-head: 282px;
    }
    /* In browse mode the list is display:block (not the card grid), so the
       tiles pair up as inline-flex boxes — same pattern as the leaf thirds.
       2/3 hero + 1/3 promo + 14px gap; 14px bottom margin puts the section
       row exactly at 14px + --mea-kits-head, aligned with its pane. */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-hero {
        display: inline-flex !important;
        vertical-align: top;
        width: calc(66.666% - 10px) !important;
        margin: 0 14px 14px 0 !important;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns > li.mea-kit-custom {
        display: inline-flex !important;
        vertical-align: top;
        flex-direction: column !important;
        width: calc(33.333% - 4px) !important;
        margin: 0 0 14px 0 !important;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns > li.level1 > ul.subchildmenu {
        top: calc(14px + var(--mea-kits-head, 204px));
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns:has(> li.mea-card-leaf)::after {
        display: none;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns:not(:hover) > li.level1.parent:last-child,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns:has(> li.mea-kit-hero:hover) > li.level1.parent:last-child,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns:has(> li.mea-kit-custom:hover) > li.level1.parent:last-child,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns:hover:not(:has(> li.level1.parent:hover:not(:last-child))) > li.level1.parent:last-child {
        background: #eef4f9;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns:not(:hover) > li.level1.parent:last-child > a::after,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns:has(> li.mea-kit-hero:hover) > li.level1.parent:last-child > a::after,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns:has(> li.mea-kit-custom:hover) > li.level1.parent:last-child > a::after {
        color: #0071dc;
        transform: translateX(2px);
    }
    .sw-megamenu.navigation li.level0:hover > .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns:not(:hover) > li.level1.parent:last-child > ul.subchildmenu,
    .sw-megamenu.navigation li.level0:hover > .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns:has(> li.mea-kit-hero:hover) > li.level1.parent:last-child > ul.subchildmenu,
    .sw-megamenu.navigation li.level0:hover > .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns:has(> li.mea-kit-custom:hover) > li.level1.parent:last-child > ul.subchildmenu,
    /* Dead-zone fix (client screenshot Jul 14): resting the pointer in the
       strip between the section row and its pane matched none of the rules
       above, so the pane vanished. With a single section here, the pane can
       simply stay up anywhere inside the dropdown — guarded so a hovered
       OTHER section (if one is ever added) still wins. */
    .sw-megamenu.navigation li.level0:hover > .submenu.mea-menu-cards.mea-menu-browse.mea-kits-showcase .subchildmenu.mega-columns:hover:not(:has(> li.level1.parent:hover:not(:last-child))) > li.level1.parent:last-child > ul.subchildmenu {
        visibility: visible;
        opacity: 1;
        z-index: 2;
        transition: opacity .1s ease, visibility 0s;
    }

    /* ---- No place in desktop cards for level-3 lists or mobile toggles ---- */
    .sw-megamenu.navigation .submenu.mea-menu-cards ul.subchildmenu ul.subchildmenu,
    .sw-megamenu.navigation .submenu.mea-menu-cards .open-children-toggle {
        display: none !important;
    }

    /* ================================================================
       Two-pane browse layout (.mea-menu-browse)
       Sections (entries WITH children) render as left rows whose hover
       fills the right pane; the first section shows by default. Childless
       entries flow BELOW the browse zone as compact rows. The zone height
       comes from --mea-zone/--mea-prow, set by the mea-browse-parents-{N}
       class the block puts on the submenu. Never needs scrolling.
       ================================================================ */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns {
        display: block !important;
        position: relative;
        padding: 14px !important;
    }

    /* Zone sizing per section count: rows stay compact (~70px, matching the
       childless rows below); the zone is always N x row, so panes for very
       few sections are shorter and scroll internally only if a section has
       an unusually large number of subcategories. */
    /* N=1: the zone sizes to the section's real content — the block adds
       mea-browse-prows-{R} (R = button rows, 3 per row, capped at 3) so a
       one-button section (120px) doesn't get the 3-row zone (200px). The
       row always stretches to the full zone (--mea-prow: var(--mea-zone))
       so it sits flush against the divider whichever height wins, which
       also keeps the flow-height invariant (leaf rows flow below the last
       section row; divider/pane sit at the zone boundary). */
    .sw-megamenu.navigation .submenu.mea-browse-parents-1 .subchildmenu.mega-columns { --mea-zone: 200px; --mea-prow: var(--mea-zone); }
    .sw-megamenu.navigation .submenu.mea-browse-parents-1.mea-browse-prows-1 .subchildmenu.mega-columns { --mea-zone: 120px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-1.mea-browse-prows-2 .subchildmenu.mega-columns { --mea-zone: 150px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-2 .subchildmenu.mega-columns { --mea-zone: 140px; --mea-prow: 70px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-3 .subchildmenu.mega-columns { --mea-zone: 210px; --mea-prow: 70px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-4 .subchildmenu.mega-columns { --mea-zone: 280px; --mea-prow: 70px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-5 .subchildmenu.mega-columns { --mea-zone: 320px; --mea-prow: 64px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-6 .subchildmenu.mega-columns { --mea-zone: 384px; --mea-prow: 64px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-7 .subchildmenu.mega-columns { --mea-zone: 448px; --mea-prow: 64px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-8 .subchildmenu.mega-columns { --mea-zone: 512px; --mea-prow: 64px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-9 .subchildmenu.mega-columns { --mea-zone: 576px; --mea-prow: 64px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-10 .subchildmenu.mega-columns { --mea-zone: 640px; --mea-prow: 64px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-11 .subchildmenu.mega-columns { --mea-zone: 704px; --mea-prow: 64px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-12 .subchildmenu.mega-columns { --mea-zone: 768px; --mea-prow: 64px; }

    /* --- Left rows: one per SECTION (entries with children) --- */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1.parent {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px;
        /* 326 = 300px visual row + 26px invisible bridge spanning the strip
           to the pane (pane starts at 340; rows start at the 14px padding).
           Crossing row → pane never leaves the row's hover, so the selected
           pane can't snap back to the first section mid-crossing. The
           transparent border carries the extra hit area; background-clip
           keeps the hover pill at the visual 300px. */
        width: 326px !important;
        min-width: 0 !important;
        height: var(--mea-prow, 64px);
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 9px 12px !important;
        background: transparent;
        border: 0 !important;
        border-right: 26px solid transparent !important;
        background-clip: padding-box;
        border-radius: 8px;
        box-shadow: none !important;
        transition: background .15s ease;
        /* Porto positions menu lis; static so the right pane anchors to the
           panel-wide ul (otherwise panes collapse inside the 300px row). */
        position: static !important;
    }
    /* Default highlight/pane applies when the pointer is OUTSIDE the list
       or on a childless row below — NOT while crossing the strip between a
       section row and its pane (that instant used to steal the pane back
       to the first section). */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1.parent:hover,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns:not(:hover) > li.level1.parent:first-child,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns:has(> li.mea-card-leaf:hover) > li.level1.parent:first-child,
    /* neutral space inside the dropdown (gaps between leaf rows, area below
       them): keep the default row's highlight in lockstep with its pane —
       without this the highlight blinked off/on while sweeping across the
       leaf buttons ("Tapes flickers") though the pane itself held steady */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns:hover:not(:has(> li.level1.parent:hover)) > li.level1.parent:first-child {
        background: #eef4f9;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1.parent > .menu-thumb-img {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 8px;
    }
    /* Single-section dropdowns: the lone row stretches to the zone, so the
       generic 42px thumb looks lost — the thumb tracks the row height
       instead (row 120 → 100px icon, row 200 → 180px). */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse.mea-browse-parents-1 .subchildmenu.mega-columns > li.level1.parent > .menu-thumb-img {
        flex: 0 0 calc(var(--mea-prow, 120px) - 20px) !important;
        width: calc(var(--mea-prow, 120px) - 20px) !important;
        height: calc(var(--mea-prow, 120px) - 20px) !important;
        border-radius: 10px;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1.parent > a {
        order: 0;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0;
        display: inline-flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0 !important;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1.parent > a::after {
        content: "\203A";
        font-size: 17px;
        line-height: 1;
        color: #9aa9b8;
        flex: 0 0 auto;
        transition: transform .15s ease, color .15s ease;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1.parent:hover > a::after,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns:not(:hover) > li.level1.parent:first-child > a::after,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns:has(> li.mea-card-leaf:hover) > li.level1.parent:first-child > a::after,
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns:hover:not(:has(> li.level1.parent:hover)) > li.level1.parent:first-child > a::after {
        color: #0071dc;
        transform: translateX(2px);
    }

    /* --- Childless entries: compact rows BELOW the browse zone ---
       (base leaf-card styling applies; inline-flex thirds wrap in rows) */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.mea-card-leaf {
        display: inline-flex !important;
        vertical-align: top;
        width: calc(33.333% - 13px) !important;
        margin: 16px 12px 0 0 !important;
    }
    /* Thin divider between the browse zone and the childless rows — only
       drawn when the dropdown actually has both parts. */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns:has(> li.mea-card-leaf)::after {
        content: "";
        position: absolute;
        left: 20px;
        right: 20px;
        top: calc(14px + var(--mea-zone, 440px) + 8px);
        height: 1px;
        background: #e2e5e9;
    }

    /* --- Right pane: the section's subcategory buttons ---
       Uniform grid re-declared here so per-category tweaks from card mode
       (e.g. Urological's single column) don't leak into the pane. Hidden
       panes keep a short visibility grace so the pointer can cross the
       strip between the rows and the pane without the pane dying. */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1 > ul.subchildmenu {
        position: absolute !important;
        top: 14px;
        /* The pane NEVER owns a scrollbar. It is at least the zone height
           and simply grows with its content — content that overshoots
           (browser zoom rounding, font settings, long lists) makes the pane
           taller instead of scrollable. With height:auto a scroll container
           would still show a phantom 1px bar at fractional zoom levels
           (scrollHeight ceils, clientHeight floors), so overflow stays
           visible; genuinely extreme content extends the pane down over the
           rows below, and the PANEL's own scroll takes over past the
           viewport cap — a bar only where it's actually needed. */
        height: auto;
        min-height: var(--mea-zone, 440px);
        left: 340px;
        right: 14px;
        width: auto !important;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 4px 4px 4px 22px !important;
        border-left: 1px solid #e5e9ee;
        background: #fff;
        z-index: 1;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        align-content: start;
        overflow-y: visible;
        visibility: hidden;
        opacity: 0;
        transition: opacity .12s ease .05s, visibility 0s linear .3s;
    }
    /* Default-first pane is gated on li.level0:hover — visibility:visible on
       a descendant overrides the hidden submenu, so an unscoped rule leaves
       an invisible hover-active rectangle over the page when the menu is
       closed (it hijacked hovers on underlying page content). The :has()
       keeps the default pane up while hovering the childless rows below. */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1.parent:hover > ul.subchildmenu,
    .sw-megamenu.navigation li.level0:hover > .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns:not(:hover) > li.level1.parent:first-child > ul.subchildmenu,
    .sw-megamenu.navigation li.level0:hover > .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns:has(> li.mea-card-leaf:hover) > li.level1.parent:first-child > ul.subchildmenu,
    /* dead strip between rows and pane: no row hovered → default pane holds
       (in the showcase variant the first child is a hero tile, not .parent,
       so this rule is a no-op there) */
    .sw-megamenu.navigation li.level0:hover > .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns:hover:not(:has(> li.level1.parent:hover)) > li.level1.parent:first-child > ul.subchildmenu {
        visibility: visible;
        opacity: 1;
        z-index: 2;
        transition: opacity .1s ease, visibility 0s;
    }

    /* --- Section header row inside the right pane ---
       Full selector chains: must out-rank the base card li/button rules. */
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1 > ul.subchildmenu > li.mea-browse-head {
        grid-column: 1 / -1;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 2px 2px 10px !important;
        margin: 0 0 2px !important;
        border-bottom: 1px solid #eef1f4;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1 > ul.subchildmenu > li.mea-browse-head > span.mea-browse-head__name {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        color: #21293c;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1 > ul.subchildmenu > li.mea-browse-head > a.mea-browse-head__all {
        display: inline-flex !important;
        align-items: center;
        width: auto !important;
        height: auto !important;
        flex: 0 0 auto;
        padding: 5px 13px !important;
        border: 1px solid #c9d7e4 !important;
        border-radius: 15px;
        background: #fff !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        color: #0071dc !important;
        white-space: nowrap;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1 > ul.subchildmenu > li.mea-browse-head > a.mea-browse-head__all:hover {
        background: #0071dc !important;
        border-color: #0071dc !important;
        color: #fff !important;
    }
}

/* Narrowest desktop windows: the capped panel's panes hold only TWO
   button columns (three fit again from ~1110px), so single-section
   zones sized for three-column content clip their last row — give the
   prows presets the two-column heights here. */
@media (min-width: 992px) and (max-width: 1109px) {
    .sw-megamenu.navigation .submenu.mea-browse-parents-1 .subchildmenu.mega-columns { --mea-zone: 240px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-1.mea-browse-prows-2 .subchildmenu.mega-columns { --mea-zone: 200px; }
    .sw-megamenu.navigation .submenu.mea-browse-parents-1.mea-browse-prows-1 .subchildmenu.mega-columns { --mea-zone: 140px; }
}

/* Narrow desktop windows (the panel is capped to the viewport here):
   the custom-kits tile drops its pitch line so the fixed 190px tile
   doesn't clip, and pane buttons shrink so two columns still fit. */
@media (min-width: 992px) and (max-width: 1240px) {
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-kits-showcase .mea-kit-custom__pitch {
        display: none;
    }
    .sw-megamenu.navigation .submenu.mea-menu-cards.mea-menu-browse .subchildmenu.mega-columns > li.level1 > ul.subchildmenu {
        /* 140px: the pane's content box bottoms out around 304px at a
           1000px window - two tracks must fit (2*140 + 7 gap = 287) */
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* Mobile / tablet: stock Porto accordion — just keep our injected thumbs
   and the desktop-only browse-pane headers out */
@media (max-width: 991px) {
    .sw-megamenu .submenu.mea-menu-cards .menu-thumb-img,
    .sw-megamenu .submenu.mea-menu-cards .mea-browse-head,
    .sw-megamenu .submenu.mea-menu-cards .mea-kit-hero,
    .sw-megamenu .submenu.mea-menu-cards .mea-kit-custom {
        display: none !important;
    }

    /* Porto stamps a ›-chevron on EVERY accordion row
       (.navigation li.level0 .ui-menu-item>a:before, \f801) — only rows
       that actually expand (li.parent, the ones carrying the
       .open-children-toggle tap target) should show one. */
    .navigation li.level0 .ui-menu-item:not(.parent) > a:before {
        content: none !important;
    }
}