/* 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}

/* Product count (1.3.0): "At the end of the row" pushes the count with its own margin. */
.mlr-cat-nav-list .mlr-cat-nav-count { margin-left: var(--mlr-count-ml, 0); flex: 0 0 auto; }

/* Button icons (1.3.1): Elementor's inline SVG icons have no size of their own; default them to the
   text size so a button never stretches. The widgets' "Icon size" control overrides this. */
.mlr-order-button svg,.mlr-category-button svg,.mlr-change-location svg,.mlr-location-select svg{width:1em;height:1em;flex:0 0 auto;fill:currentColor}
/* 1.3.4: text read by screen readers but not shown (e.g. the name of an icon-only button). */
.mlr-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 1.3.5: description of the current category / subcategory. Inside the current item in a vertical
   list; after the list or dropdown in horizontal and dropdown layouts (the per-device Layout control
   sets the two variables, so only one copy is ever displayed). Outside the responsive wrapper the
   widget prints only the copy that fits its mode. */
.mlr-nav-desc{display:block}
.mlr-nav-resp .mlr-nav-desc--inline{display:var(--mlr-nav-desc-in,block)}
.mlr-nav-resp .mlr-nav-desc--after{display:var(--mlr-nav-desc-out,none)}