/* MLR nav — responsive layout (opt-in). The widget wraps the list + the dropdown in
   .mlr-nav-resp and the per-breakpoint Layout / Horizontal-fit controls set CSS variables on
   the Elementor element; this baseline consumes them so the layout switches per device without
   extra markup. Defaults (no vars) = a vertical list, dropdown hidden. */

.mlr-nav-resp .mlr-nav-listwrap   { display: var(--mlr-nav-list-d, block); }
.mlr-nav-resp .mlr-nav-selectwrap { display: var(--mlr-nav-select-d, none); }
.mlr-nav-resp .mlr-nav-selectwrap > select { width: 100%; }

.mlr-nav-resp .mlr-cat-nav-list,
.mlr-nav-resp .mlr-subcat-nav-list {
    display: flex !important;                 /* beat the (off) Columns grid when responsive */
    grid-template-columns: none !important;
    flex-direction: var(--mlr-nav-flow, column);
    flex-wrap: var(--mlr-nav-wrap, nowrap);
    overflow-x: var(--mlr-nav-ox, visible);
    -webkit-overflow-scrolling: touch;
    list-style: none;
    margin: 0;
    padding: 0;
}
.mlr-nav-resp .mlr-cat-nav-list > li,
.mlr-nav-resp .mlr-subcat-nav-list > li {
    /* grow:1 + basis:0 → TRUE equal-width fill (every item the same width regardless of label
       length); grow:0 + basis:auto → natural width (vertical / horizontal-scroll). basis MUST be 0
       in fill mode: with basis:auto items grow from their content width, so the longest label ends
       up widest. */
    flex: var(--mlr-nav-grow, 0) 0 var(--mlr-nav-basis, auto);
    min-width: 0;
}
/* Horizontal-scroll layout: keep items on one line and hide the scrollbar chrome on touch. */
.mlr-nav-resp .mlr-cat-nav-list::-webkit-scrollbar,
.mlr-nav-resp .mlr-subcat-nav-list::-webkit-scrollbar { height: 0; width: 0; }

/* MLR Category Button (1.1.0): a link styled as a button; colours, padding and radius come from the widget. */
.mlr-category-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;text-decoration:none;cursor:pointer}