/* =====================================================================
 * Jasmin Maziva — CWS-Suite mobile menu, "Mega Menu 3b" drill-down.
 *
 * Pairs with cws-suite/menu-panel.php + cws-suite/menu-item.php.
 * The design uses Manrope; the @import is deliberately commented out — enqueue
 * the font properly in functions.php rather than uncommenting it here.
 *
 * @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
 *
 * SPECIFICITY
 * -----------
 * Three things outrank a single-class rule here and every selector below is
 * built to clear all of them, with specificity rather than !important:
 *
 *   the Elementor kit   `.elementor-kit-N a|button { color; background-color }`   (0,1,1)
 *   the plugin skin     `.menu-items .single-menu-level { padding: 80px 16px 0 }` (0,3,0)
 *   the widget controls `{{WRAPPER}} .menu-group { gap }`, padding-top, icon
 *                       colour and the whole typography group                    (0,2,0)–(0,4,1)
 *
 * The working prefix is `.mobile-menu-content .jm-mm .menu-items`, which is
 * (0,3,0) before the target class. Do not shorten it.
 *
 * Mind that {{WRAPPER}} is not one class: Elementor prints it as
 * `.elementor-N .elementor-element.elementor-element-XXX`, three classes, so a
 * control targeting a descendant of the widget can reach (0,5,0) and outrank
 * the prefix + one class. Where that happens — the level's "Padding top" is the
 * known case — double a class in the compound rather than reaching for
 * `!important`.
 *
 * Item text is never set on the <a> itself: the plugin releases
 * `.single-menu-item.is-custom a` to `inherit` at (0,5,1), which would beat
 * anything reasonable we wrote. All type lives on the child spans instead,
 * which that rule does not touch.
 * ================================================================== */

.jm-mm {
	/* Brand */
	--jm-blue:        #0b7da9;
	--jm-blue-deep:   #096a90;
	--jm-blue-track:  #dbeaf1;
	--jm-ink:         #16333f;
	--jm-ink-soft:    #33525d;
	--jm-muted:       #8a9aa1;
	--jm-muted-soft:  #9bacb4;

	/* Surfaces */
	--jm-paper:       #fff;
	--jm-hover:       #f6fafb;
	--jm-soft:        #eaf4f8;
	--jm-line:        #f0f4f6;
	--jm-line-fine:   #f2f5f7;

	/* Cues */
	--jm-cue:         #b8c6cc;
	--jm-cue-faint:   #dbe3e7;
	--jm-cue-deep:    #cbd8dd;
	--jm-cue-r:       20px;

	/* Accent — neutral until an item carries jm-accent-* */
	--jm-a:           #0b7da9;
	--jm-a-deep:      #096a90;
	--jm-a-bg:        #eaf4f8;
	--jm-a-bd:        #d6e9f2;
	--jm-a-tint:      #eaf4f8;

	/* Motion */
	--jm-ease:        cubic-bezier(.32, .72, 0, 1);

	--jm-font:        inherit;

	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	font-family: var(--jm-font);
	background: var(--jm-paper);
}

/* The sliding panel is position: fixed and the plugin gives it no z-index, so it
   stacked on source order alone and lost to anything fixed further down the page
   — on a shop page the Filters Pro widget's floating "Filteri" button (z-index
   90), its scrim (99) and its sheet (100) all painted straight over the open
   menu. The header itself is not the problem: the widget wrapper carries
   `.elementor-widget-cws_suite_mobilemenu { z-index: 9999 }`, but that element
   is statically positioned, where z-index has no effect and no stacking context
   is created — so the value never reached the panel.

   Above all three of the widget's layers, and left round for the next one.
   Scoped to the wrapper for (0,2,0), a step above the plugin's own rule.

   This only ranks the panel within whatever stacking context its Elementor
   header sits in, so it is not the whole fix: a sticky header, a transform or an
   opacity anywhere above would trap it regardless of the number. The paired
   `body:has(.mobile-menu-content.active)` block in filters-panel.css is what
   makes it hold in that case, by taking those layers out of the paint entirely
   while the menu is open. */
.mobile-menu-wrap .mobile-menu-content {
	z-index: 1000;
}

/* The panel scrolls its levels internally, like the design's phone frame —
   the shell must not add a second scrollbar around them. */
.mobile-menu-content .mobile-menu-custom-panel {
	overflow: hidden;
	background: var(--jm-paper);
}

/* =====================================================================
 * 1. Top bar — root screen only
 * ================================================================== */

.mobile-menu-content .jm-mm .jm-mm__top {
	flex: 0 0 auto;
	background: var(--jm-blue);
	padding: 14px 0 16px;
	max-height: 320px;
	overflow: hidden;
	/* Collapses by clipping only. Fading it as well would take the blue bar
	   through pale-blue to white on every drill-down and back again on the way
	   out; `overflow: hidden` already hides everything the collapse eats. */
	transition:
		max-height 340ms var(--jm-ease),
		padding    340ms var(--jm-ease);
}

.mobile-menu-content .jm-mm .jm-mm__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 18px 14px;
}

.mobile-menu-content .jm-mm .jm-mm__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	transition: background 160ms ease, transform 160ms var(--jm-ease);
}

.mobile-menu-content .jm-mm .jm-mm__close:hover,
.mobile-menu-content .jm-mm .jm-mm__close:focus-visible {
	background: rgba(255, 255, 255, .26);
}

.mobile-menu-content .jm-mm .jm-mm__close:active {
	transform: scale(.94);
}

.mobile-menu-content .jm-mm .jm-mm__close svg {
	width: 19px;
	height: 19px;
}

.mobile-menu-content .jm-mm .jm-mm__close svg path {
	stroke: #fff;
}

.mobile-menu-content .jm-mm .jm-mm__brand {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	text-decoration: none;
}

.mobile-menu-content .jm-mm .jm-mm__wordmark {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.2px;
	color: #fff;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mobile-menu-content .jm-mm .jm-mm__logo img {
	display: block;
	width: auto;
	height: 34px;
	max-width: 190px;
	object-fit: contain;
}

/* --- cart (cws_menu_part('cart')) --------------------------------- */

.mobile-menu-content .jm-mm .jm-mm__cart {
	flex: 0 0 auto;
	margin-right: 4px;
}

.mobile-menu-content .jm-mm .jm-mm__cart .cws-minicart-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mobile-menu-content .jm-mm .jm-mm__cart .cws-cart-icon {
	width: 25px;
	height: 25px;
	color: #9fd94b;
}

.mobile-menu-content .jm-mm .jm-mm__cart .cws-cart-icon svg path {
	stroke: #9fd94b;
	stroke-width: 2;
}

.mobile-menu-content .jm-mm .jm-mm__cart .cws-cart-quantity-wrap {
	top: -7px;
	right: -9px;
}

.mobile-menu-content .jm-mm .jm-mm__cart .cws-cart-quantity-wrap .cws-cart-quantity {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	width: auto;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #7cb342;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.mobile-menu-content .jm-mm .jm-mm__cart .cws-cart-totals,
.mobile-menu-content .jm-mm .jm-mm__cart .cws-cart-totals .amount {
	color: #fff;
	font-size: 15px;
	font-weight: 800;
}

/* --- additional header template ----------------------------------- */

.mobile-menu-content .jm-mm .jm-mm__promo {
	padding: 0 18px 14px;
}

/* --- search -------------------------------------------------------
 *
 * Two shapes live here. menu-panel.php renders the `searchflow` widget from a
 * saved template and falls back to cws_menu_part('search_products') — a plain
 * GET form — when that template is missing, so both are styled: the
 * `.cws-searchflow` block below, and the `.cws-menu-search` block after it.
 */

.mobile-menu-content .jm-mm .jm-mm__search {
	padding: 0 18px;
}

/* --- search: the searchflow widget (live dropdown + mobile overlay) ---
 *
 * Only the bar is restyled, to the same white pill as the GET form. The
 * dropdown and the full-screen overlay are left to the widget's own CSS,
 * which already ships this palette.
 *
 * Deliberately no position, width or max-width on `.cws-searchflow`: below
 * the widget's "Mobile overlay below (px)" it promotes itself to
 * `position: fixed; inset: 0` as `.is-overlay`, and any of those three would
 * trap or shrink the overlay inside the menu panel. Nothing else here needs
 * guarding — `.mobile-menu-content` slides on `left`, not `transform`, so it
 * never becomes a containing block for the fixed overlay.
 *
 * Keep that breakpoint at or above the menu's own. Below it the widget shows
 * its anchored desktop dropdown instead, and since `.jm-mm__top` is
 * `overflow: hidden` an absolutely-positioned dropdown is clipped to the
 * header.
 */

.mobile-menu-content .jm-mm .jm-mm__search .cws-searchflow {
	/* The widget is token-driven, so recolour it rather than override rules. */
	--cws-sf-accent: var(--jm-blue);
	--cws-sf-ink:    var(--jm-ink);
	--cws-sf-muted:  var(--jm-muted-soft);
	font-size: 15px;
}

.mobile-menu-content .jm-mm .jm-mm__search .cws-searchflow__bar {
	height: auto;
	min-height: 46px;
	padding: 4px 6px 4px 15px;
	border: 0;
	border-radius: 12px;
	background: var(--jm-paper);
}

/* The blue header already separates the bar from its surroundings; a focus
   ring drawn white-on-white reads as a rendering fault, so the icon and
   caret carry the focused state instead. */
.mobile-menu-content .jm-mm .jm-mm__search .cws-searchflow.is-focused .cws-searchflow__bar {
	border: 0;
	box-shadow: none;
}

.mobile-menu-content .jm-mm .jm-mm__search .cws-searchflow__input {
	font-size: 15px;
	font-weight: 600;
}

.mobile-menu-content .jm-mm .jm-mm__search .cws-searchflow__input::placeholder {
	color: var(--jm-muted-soft);
	font-weight: 600;
	opacity: 1;
}

/* Overlay mode: the widget owns the viewport and paints its own white page,
   so the pill above would put white on white. Hand the bar back to the
   widget's own tinted treatment. */
.mobile-menu-content .jm-mm .jm-mm__search .cws-searchflow.is-overlay .cws-searchflow__bar {
	padding: 0 8px 0 16px;
	border: 1.5px solid #e2eaed;
	background: var(--cws-sf-soft);
}

/* --- search: the plain GET form (fallback) ------------------------- */

.mobile-menu-content .jm-mm .jm-mm__search .cws-menu-search {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 13px 15px;
	border-radius: 12px;
	background: #fff;
}

.mobile-menu-content .jm-mm .jm-mm__search .cws-menu-search::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239bacb4' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mobile-menu-content .jm-mm .jm-mm__search .cws-menu-search__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--jm-ink);
	-webkit-appearance: none;
	appearance: none;
}

.mobile-menu-content .jm-mm .jm-mm__search .cws-menu-search__input:focus {
	outline: 0;
	box-shadow: none;
}

.mobile-menu-content .jm-mm .jm-mm__search .cws-menu-search__input::placeholder {
	color: var(--jm-muted-soft);
	font-weight: 600;
	opacity: 1;
}

/* Enter still submits; the design has no visible button. */
.mobile-menu-content .jm-mm .jm-mm__search .cws-menu-search__submit {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =====================================================================
 * 2. The floating close — takes over once the top bar collapses
 * ================================================================== */

.mobile-menu-content .jm-mm .jm-mm__close--float {
	position: absolute;
	top: 12px;
	right: 16px;
	z-index: 6;
	opacity: 0;
	visibility: hidden;
	transform: scale(.8);
	transition:
		opacity    200ms ease,
		transform  240ms var(--jm-ease),
		visibility 0s linear 240ms;
}

.mobile-menu-content .jm-mm:has(.single-menu-level.menu-level-1.inactive) .jm-mm__close--float {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity    220ms ease 120ms,
		transform  260ms var(--jm-ease) 120ms,
		visibility 0s;
}

/* =====================================================================
 * 3. Deep state — the top bar and the footer fold away below level 1
 * ================================================================== */

.mobile-menu-content .jm-mm:has(.single-menu-level.menu-level-1.inactive) .jm-mm__top {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.mobile-menu-content .jm-mm:has(.single-menu-level.menu-level-1.inactive) .jm-mm__foot {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* =====================================================================
 * 4. Levels, groups and the panel transition
 * ================================================================== */

.mobile-menu-content .jm-mm .jm-mm__nav {
	flex: 1 1 auto;
	min-height: 0;
	position: relative;
	overflow: hidden;
}

/* Beats the plugin's `padding: 80px 16px 0` (0,3,0) and the widget's own
   "Padding top" slider. That slider is the one control the working prefix
   cannot clear on its own: Elementor expands {{WRAPPER}} to the page class
   plus the element class, so it lands at
   `.elementor-N .elementor-element.elementor-element-XXX .menu-items .single-menu-level`
   — (0,5,0) against the prefix's (0,4,0). `.jm-mm` and `.single-menu-level`
   are doubled to take this rule to (0,6,0); they match exactly what the
   single form matches. Zeroing the slider in Elementor removes the rule at
   source and is the better fix if you have the widget open. */
.mobile-menu-content .jm-mm.jm-mm .menu-items .single-menu-level.single-menu-level {
	padding: 0 0 28px;
	background: var(--jm-paper);
	/* Nothing fades. `opacity` and `visibility` are held at their old values for
	   the length of the slide and then snap, so the outgoing level stays fully
	   painted while it moves off and disappears only once it is off-screen.
	   Transitioning either of them instead cross-fades an opaque white panel
	   against the panel's own white — the wash that reads as a flash.

	   The hold ends at 280ms, just inside the 300ms slide: the plugin drops
	   `data-direction` on the incoming level's transitionend, which reverts
	   this level's `--enter-x` to 0. Ending on the same frame would risk
	   catching it snapping back to centre while still painted. */
	transition:
		transform  300ms var(--jm-ease),
		opacity    0s linear 280ms,
		visibility 0s linear 280ms;
	overscroll-behavior: contain;
}

/* The incoming level must not wait for that delay, and must paint above the
   outgoing one — on a back tap it is the earlier of the two in the DOM, so
   source order alone would put it underneath. */
.mobile-menu-content .jm-mm.jm-mm .menu-items .single-menu-level.single-menu-level.active {
	z-index: 2;
	transition:
		transform  300ms var(--jm-ease),
		opacity    0s,
		visibility 0s;
}

/* Beats the widget's "Items Spacing between" slider on {{WRAPPER}} .menu-group. */
.mobile-menu-content .jm-mm .menu-items .menu-group {
	gap: 0;
}

/* The outgoing level slides the way the design's panels do — px, not %. */
.mobile-menu-content[data-direction="forward"] .jm-mm .menu-items .single-menu-level.inactive {
	--enter-x: -52px;
}

.mobile-menu-content[data-direction="back"] .jm-mm .menu-items .single-menu-level.inactive {
	--enter-x: 52px;
}

/* The incoming level is class-swapped in the same task as the direction
   attribute, so a transition would have nothing to interpolate from — an
   animation restarts on apply, which is what makes it visible. */
.mobile-menu-content[data-direction="forward"] .jm-mm .menu-items .single-menu-level.active {
	animation: jm-mm-slide-fwd 300ms var(--jm-ease) both;
}

.mobile-menu-content[data-direction="back"] .jm-mm .menu-items .single-menu-level.active {
	animation: jm-mm-slide-back 300ms var(--jm-ease) both;
}

/* Slide only — deliberately no opacity ramp.
 *
 * The plugin transitions `transform` and `opacity` but not `visibility`, so an
 * outgoing level is hidden on the same frame its class is swapped. There is
 * nothing left underneath to cross-fade against: a level that starts partly
 * transparent is composited over the panel's white, and since the level carries
 * its own white background the whole screen washes out for the length of the
 * slide. That wash is the flash. The levels are opaque, so the incoming one
 * covers the panel by itself. */
@keyframes jm-mm-slide-fwd {
	from { transform: translateX(52px); }
	to   { transform: none; }
}

@keyframes jm-mm-slide-back {
	from { transform: translateX(-52px); }
	to   { transform: none; }
}

@keyframes jm-mm-spin {
	to { transform: rotate(360deg); }
}

@keyframes jm-mm-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* =====================================================================
 * 5. The back row — the design's per-level blue header
 * ================================================================== */

.mobile-menu-content .jm-mm .menu-items .back-menu-item {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px 68px 14px 18px;
	background: var(--jm-blue);
	cursor: pointer;
}

/* Card groups need air under the blue bar; plain row groups sit flush against
   it, as in the design. Done here rather than as a margin-top on the card
   itself, which the plugin pins with `.single-menu-item.is-custom
   { margin-top: 0 !important }` — this way nothing needs !important. */
.mobile-menu-content .jm-mm .menu-items .menu-group:has(.jm-mi--brand) .back-menu-item,
.mobile-menu-content .jm-mm .menu-items .menu-group:has(.jm-mi--featured) .back-menu-item {
	margin-bottom: 12px;
}

.mobile-menu-content .jm-mm .menu-items .back-menu-item > svg {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 9px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .14);
	box-sizing: border-box;
	transition: background 160ms ease;
}

.mobile-menu-content .jm-mm .menu-items .back-menu-item > svg path {
	stroke: #fff;
	stroke-width: 2.4;
}

.mobile-menu-content .jm-mm .menu-items .back-menu-item:active > svg {
	background: rgba(255, 255, 255, .28);
}

.mobile-menu-content .jm-mm .menu-items .back-menu-item a {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.2px;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =====================================================================
 * 6. Items — shared row chrome
 * ================================================================== */

/* `.menu-item` is carried purely for weight: the plugin lays out level-2+
   parents with `.single-menu-level:not(.menu-level-1) .single-menu-item:has(> svg)`
   at (0,4,1), which would otherwise win and add an 8px gap to those rows only. */
.mobile-menu-content .jm-mm .menu-items .single-menu-item.menu-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding-right: var(--jm-cue-r);
	border-bottom: 1px solid var(--jm-line);
	background: transparent;
	transition: background 150ms ease;
}

.mobile-menu-content .jm-mm .menu-items .single-menu-item:hover,
.mobile-menu-content .jm-mm .menu-items .single-menu-item:active {
	background: var(--jm-hover);
}

/* The plugin parks a permanent translateX on the last-tapped leaf; the press
   feedback here is the background flash above, and menu.js drops the class. */
.mobile-menu-content .jm-mm .menu-items .menu-item.menu-item-clicked {
	transform: none;
}

/* Deliberately (0,4,0), not (0,5,0): every variant override below sits at the
   same weight and wins on source order. Adding .single-menu-item here would
   make this rule unbeatable by them. */
.mobile-menu-content .jm-mm .menu-items .jm-mi {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 19px 10px 19px 20px;
	text-decoration: none;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi__text {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi__label {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--jm-ink-soft);
	transition: color 140ms ease;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi__sub {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--jm-muted);
}

/* --- the two chevrons ---------------------------------------------
 * A parent item's chevron is the plugin's own <svg>, appended after the
 * template output — it is the drill-down signal and must stay a direct child.
 * A leaf's chevron is .jm-mi__cue, nested inside the <a> so it is invisible to
 * `children('svg')`.
 * ------------------------------------------------------------------ */

.mobile-menu-content .jm-mm .menu-items .single-menu-item > svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	transition: opacity 140ms ease, transform 200ms var(--jm-ease);
}

.mobile-menu-content .jm-mm .menu-items .single-menu-item > svg path {
	stroke: var(--jm-cue);
	stroke-width: 2.6;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi__cue {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--jm-cue-faint);
	transition: color 140ms ease, transform 200ms var(--jm-ease);
}

.mobile-menu-content .jm-mm .menu-items .jm-mi__cue svg {
	width: 16px;
	height: 16px;
	margin: 0;
	stroke-width: 2.6;
}

/* `currentColor` on the path is inherited, and an inherited value loses to the
   plugin's explicit `.single-menu-item svg path { stroke: … }` (and to the
   widget's "Menu item icon colour" control). Restate it as an own value. */
.mobile-menu-content .jm-mm .menu-items .jm-mi__cue svg path {
	stroke: currentColor;
}

.mobile-menu-content .jm-mm .menu-items .single-menu-item:hover > svg,
.mobile-menu-content .jm-mm .menu-items .jm-mi:hover .jm-mi__cue {
	transform: translateX(3px);
}

/* --- the spinner (menu.js swaps it in on tap) ----------------------
 * Two states, one spinner:
 *   .jm-is-loading     a drill-down tap — replaces the plugin's arrow
 *   .jm-is-navigating  a leaf tap — a real page load, so it sits where
 *                      nothing was, and stays until the browser leaves
 * ------------------------------------------------------------------ */

.mobile-menu-content .jm-mm .menu-items .single-menu-item.jm-is-loading > svg {
	opacity: 0;
}

.mobile-menu-content .jm-mm .menu-items .single-menu-item.jm-is-loading::after,
.mobile-menu-content .jm-mm .menu-items .single-menu-item.jm-is-navigating::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--jm-cue-r);
	width: 17px;
	height: 17px;
	margin-top: -8.5px;
	border: 2.4px solid var(--jm-a-bd);
	border-top-color: var(--jm-a);
	border-radius: 999px;
	animation: jm-mm-spin 700ms linear infinite;
}

/* A leaf tap is about navigation, not about which brand branch you happen to
   be standing in, so it stays brand blue even inside the green or red lists. */
.mobile-menu-content .jm-mm .menu-items .single-menu-item.jm-is-navigating::after {
	border-color: var(--jm-blue-track);
	border-top-color: var(--jm-blue);
}

/* =====================================================================
 * 7. Rows by level
 * ================================================================== */

/* Level 1 — a parent reads as a section, a leaf as a plain link. */
.mobile-menu-content .jm-mm .menu-items .jm-mi--l1.jm-mi--parent .jm-mi__label {
	font-size: 17px;
	font-weight: 800;
	color: var(--jm-ink);
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--l1:not(.jm-mi--parent) .jm-mi__label {
	font-size: 17px;
	font-weight: 700;
	color: var(--jm-ink-soft);
}

/* Level 2 — title plus the "N kategorija" line. */
.mobile-menu-content .jm-mm .menu-items .jm-mi--l2 {
	padding-top: 18px;
	padding-bottom: 18px;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--l2 .jm-mi__label {
	font-size: 16.5px;
	font-weight: 800;
	color: var(--jm-ink);
}

/* Level 3 and deeper — the long category lists. */
.mobile-menu-content .jm-mm .menu-items .jm-mi--l3 {
	padding-top: 15px;
	padding-bottom: 15px;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--l3 .jm-mi__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--jm-ink-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi--l3) {
	border-bottom-color: var(--jm-line-fine);
}

.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi--l3):hover {
	background: var(--jm-a-bg);
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--l3:hover .jm-mi__label {
	color: var(--jm-a-deep);
}


/* =====================================================================
 * 8. Variants — brand card, featured, view-all, section label
 * ================================================================== */

/* --- brand card ----------------------------------------------------- */

.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi--brand) {
	--jm-cue-r: 32px;
	margin: 0 16px 12px;
	padding-right: 16px;
	border: 1px solid var(--jm-a-bd);
	border-radius: 16px;
	background: var(--jm-a-bg);
	transition: background 150ms ease, box-shadow 200ms ease, transform 200ms var(--jm-ease);
}

.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi--brand):hover {
	background: var(--jm-a-bg);
	box-shadow: 0 12px 26px -16px rgba(18, 48, 60, .38);
	transform: translateY(-1px);
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--brand {
	gap: 13px;
	padding: 16px;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--brand .jm-mi__label {
	font-size: 16.5px;
	font-weight: 800;
	color: var(--jm-ink);
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--brand .jm-mi__sub {
	color: #7c8d95;
}

.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi--brand) > svg path {
	stroke: var(--jm-a);
}

/* --- the tile ------------------------------------------------------- */

.mobile-menu-content .jm-mm .menu-items .jm-mi__tile {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 13px;
	background: #fff;
	color: var(--jm-a);
}

.mobile-menu-content .jm-mm .menu-items .jm-mi__tile img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 5px;
	box-sizing: border-box;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi__tile-text {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .4px;
	line-height: 1;
}

/* --- featured promo -------------------------------------------------- */

.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi--featured) {
	--jm-cue-r: 30px;
	margin: 0 16px 10px;
	padding-right: 14px;
	border: 0;
	border-radius: 16px;
	background: var(--jm-a-tint);
	animation: jm-mm-rise 320ms var(--jm-ease) both;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--featured {
	gap: 13px;
	padding: 14px;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--featured .jm-mi__tile {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(18, 48, 60, .12);
}

/* Featured flips the hierarchy: the description is the eyebrow, the title
   is the headline. */
.mobile-menu-content .jm-mm .menu-items .jm-mi--featured .jm-mi__text {
	display: flex;
	flex-direction: column-reverse;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--featured .jm-mi__label {
	font-size: 14px;
	font-weight: 700;
	color: var(--jm-ink);
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--featured .jm-mi__sub {
	margin: 0 0 2px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--jm-a);
}

/* --- view-all banner -------------------------------------------------- */

.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi--viewall) {
	border-bottom: 0;
	background: var(--jm-a-tint);
}

.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi--viewall):hover {
	background: var(--jm-a-tint);
	filter: brightness(.97);
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--viewall {
	padding-top: 14px;
	padding-bottom: 14px;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--viewall .jm-mi__label {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--jm-a-deep);
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--viewall .jm-mi__cue {
	color: var(--jm-a-deep);
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--viewall .jm-mi__cue svg {
	width: 15px;
	height: 15px;
}

/* --- section label (WordPress class: special-submenu) ------------------ */

/* Styled as a heading but still a working link: this site already uses
   `special-submenu` on custom links that point at real pages, and swallowing
   their clicks would quietly remove a navigation path. */
.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi--label),
.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi--label):hover {
	border-bottom: 0;
	background: transparent;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--label {
	padding: 26px 20px 8px;
}

.mobile-menu-content .jm-mm .menu-items .jm-mi--label .jm-mi__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--jm-muted-soft);
}

/* =====================================================================
 * 9. Accents — set on the wrapper so the plugin's own arrow inherits them
 * ================================================================== */

.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi[data-accent="green"]) {
	--jm-a:      #6f9e34;
	--jm-a-deep: #5a8a26;
	--jm-a-bg:   #f7fbec;
	--jm-a-bd:   #e8f0d5;
	--jm-a-tint: #f4f8dd;
}

.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi[data-accent="red"]) {
	--jm-a:      #d0453b;
	--jm-a-deep: #c23f35;
	--jm-a-bg:   #fef7f6;
	--jm-a-bd:   #fadedb;
	--jm-a-tint: #fdeceb;
}

.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi[data-accent="blue"]) {
	--jm-a:      #0b7da9;
	--jm-a-deep: #096a90;
	--jm-a-bg:   #eaf4f8;
	--jm-a-bd:   #d6e9f2;
	--jm-a-tint: #eaf4f8;
}

/* Current page. Last and at (0,6,0) so it beats every level and variant rule
   above rather than depending on where they happen to sit in the file. */
.mobile-menu-content .jm-mm .menu-items .single-menu-item .jm-mi.is-current .jm-mi__label {
	color: var(--jm-a-deep);
}

/* =====================================================================
 * 10. Footer CTA
 * ================================================================== */

.mobile-menu-content .jm-mm .jm-mm__foot {
	flex: 0 0 auto;
	max-height: 260px;
	padding: 16px 20px 20px;
	overflow: hidden;
	background: var(--jm-paper);
	border-top: 1px solid var(--jm-line);
	transition:
		max-height 340ms var(--jm-ease),
		padding    340ms var(--jm-ease);
}

.mobile-menu-content .jm-mm .jm-mm__cta {
	display: block;
	padding: 16px;
	border-radius: 14px;
	background: var(--jm-soft);
}

.mobile-menu-content .jm-mm .jm-mm__cta-title {
	display: block;
	font-size: 14px;
	font-weight: 800;
	color: var(--jm-blue);
}

.mobile-menu-content .jm-mm .jm-mm__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--jm-blue);
	text-decoration: none;
}

.mobile-menu-content .jm-mm .jm-mm__cta-arrow {
	display: inline-flex;
	transition: transform 200ms var(--jm-ease);
}

.mobile-menu-content .jm-mm .jm-mm__cta-arrow svg {
	width: 13px;
	height: 13px;
}

.mobile-menu-content .jm-mm .jm-mm__cta-link:hover .jm-mm__cta-arrow {
	transform: translateX(4px);
}

/* =====================================================================
 * 11. Focus and reduced motion
 * ================================================================== */

.mobile-menu-content .jm-mm .jm-mi:focus-visible,
.mobile-menu-content .jm-mm .jm-mm__close:focus-visible,
.mobile-menu-content .jm-mm .jm-mm__cta-link:focus-visible {
	outline: 2px solid var(--jm-blue);
	outline-offset: -3px;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu-content .jm-mm .jm-mm__top,
	.mobile-menu-content .jm-mm .jm-mm__foot,
	.mobile-menu-content .jm-mm .menu-items .single-menu-item,
	.mobile-menu-content .jm-mm .menu-items .single-menu-item > svg,
	.mobile-menu-content .jm-mm .menu-items .jm-mi__cue {
		transition-duration: 1ms;
	}

	/* Carries the same doubled classes as the rule it is overriding: that one
	   sets the delay through the `transition` shorthand, and a longhand only
	   wins from equal or greater weight. The hold is timed to a slide that no
	   longer happens here, and left in place it would park the outgoing level
	   on screen for 300ms after the swap. */
	.mobile-menu-content .jm-mm.jm-mm .menu-items .single-menu-level.single-menu-level,
	.mobile-menu-content .jm-mm.jm-mm .menu-items .single-menu-level.single-menu-level.active {
		transition-duration: 1ms;
		transition-delay: 0s;
	}

	.mobile-menu-content[data-direction] .jm-mm .menu-items .single-menu-level.active,
	.mobile-menu-content .jm-mm .menu-items .single-menu-item:has(> .jm-mi--featured) {
		animation: none;
	}

	/* Slowed, not removed: the navigating spinner is a loading indicator, and
	   suppressing it entirely would leave a leaf tap with no feedback at all. */
	.mobile-menu-content .jm-mm .menu-items .single-menu-item.jm-is-loading::after,
	.mobile-menu-content .jm-mm .menu-items .single-menu-item.jm-is-navigating::after {
		animation-duration: 2s;
	}
}