/* ==========================================================
 * MM Menu Builder — Frontend Styles v2.0.0
 *
 * Major changes from v1:
 *   - Accordion uses display:grid + grid-template-rows: 0fr → 1fr
 *     (modern, smooth animation — no JS height juggling, no text-jump).
 *   - Desktop and mobile have separate CSS variables for columns,
 *     item size, title size, gap, animation, hover effect.
 *   - All grid styles support explicit columns via --mmmb-grid-d /
 *     --mmmb-grid-m (no more "only circular works in 3-column").
 *   - Drawer header: close button on the LEFT (in RTL flow), title on
 *     the RIGHT, with SVG icons and a colored accent bar.
 *   - Section header: vertical accent on the start edge when open,
 *     SVG chevron, item-count badge.
 *   - Outer section list scrolls when > N accordions (custom scrollbar
 *     + fade hint at the bottom).
 *   - Inner section body scrolls when items > threshold (custom
 *     scrollbar).
 *   - 100+ items per accordion supported without breaking layout.
 * ========================================================== */

/* ==========================================================
 * Base + CSS Variables (per-menu defaults overridden inline)
 * ========================================================== */
.mmmb-wrap,
.mmmb-drawer {
	/* Colors */
	--mmmb-c-primary: #c8a45c;
	--mmmb-c-text: #2b2b2b;
	--mmmb-c-subtitle: #9ca3af;
	--mmmb-c-bg: #ffffff;
	--mmmb-c-item-bg: #ffffff;
	--mmmb-c-border: #e6e6e6;
	--mmmb-c-badge: #e74c3c;
	--mmmb-c-badge-text: #ffffff;
	--mmmb-c-hover-bg: rgba(200,164,92,0.08);
	--mmmb-c-section-title: #1f2937;

	/* Typography */
	--mmmb-font: Vazirmatn, Tahoma, sans-serif;

	/* Sizing — desktop */
	--mmmb-size: 90px;
	--mmmb-radius: 50%;
	--mmmb-card-radius: 14px;
	--mmmb-gap: 14px;
	--mmmb-pad: 14px;
	--mmmb-title-size: 14px;
	--mmmb-title-weight: 600;
	--mmmb-subtitle-size: 11px;
	--mmmb-section-title-size: 14px;
	--mmmb-section-title-weight: 700;
	--mmmb-tab-title-size: 13px;
	--mmmb-border-width: 0px;

	/* Sizing — mobile (intentionally NOT defined here so they don't shadow inline overrides.
	 * They are read inside @media (max-width: 600px) with explicit FIXED fallbacks that
	 * are INDEPENDENT of the desktop variables, so changing a desktop slider never leaks
	 * into mobile.) */

	/* Shadows */
	--mmmb-shadow: 0 1px 6px rgba(0,0,0,0.08);
	--mmmb-shadow-hover: 0 6px 16px rgba(0,0,0,0.12);

	/* Misc */
	--mmmb-transition: 250ms;
	--mmmb-drawer-width: 380px;

	/* Card minimum width (used by auto-fill grids; each style overrides) */
	--mmmb-card-min: 120px;

	/* Sections scroll */
	--mmmb-section-max-h: 480px;
	--mmmb-sections-max-visible: 6;

	/* Accordion animation */
	--mmmb-accordion-speed: 320ms;
	--mmmb-accordion-easing: cubic-bezier(0.4, 0, 0.2, 1);

	font-family: var(--mmmb-font);
	color: var(--mmmb-c-text);
	box-sizing: border-box;
	direction: rtl;
}
.mmmb-wrap *, .mmmb-drawer * { box-sizing: border-box; }
.mmmb-wrap {
	background: var(--mmmb-c-bg) !important;
	padding: var(--mmmb-pad);
	border-radius: var(--mmmb-card-radius);
}
.mmmb-nav-trigger-item > .mmmb-trigger {
	display: inline-flex;
	align-items: center;
	height: 100%;
}

/* ==========================================================
 * Trigger button
 * ========================================================== */
.mmmb-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--mmmb-c-primary);
	color: #fff !important;
	border-radius: 8px;
	text-decoration: none !important;
	font-family: var(--mmmb-font);
	cursor: pointer;
	border: 0;
	font-size: 14px;
	transition: all var(--mmmb-transition) ease;
}
.mmmb-trigger:hover { filter: brightness(.95); transform: translateY(-1px); }
.mmmb-trigger-icon { font-size: 16px; line-height: 1; }

/* ==========================================================
 * Drawer — v2 redesigned
 * ========================================================== */
.mmmb-drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 9999999;
	visibility: hidden;
	opacity: 0;
	transition: opacity .25s ease, visibility .25s ease;
}
.mmmb-drawer.is-open { visibility: visible; opacity: 1; }
.mmmb-drawer-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(0,0,0,0.45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.mmmb-drawer-panel {
	position: absolute;
	top: 0; bottom: 0;
	right: 0;
	width: var(--mmmb-drawer-width-desktop, var(--mmmb-drawer-width));
	max-width: 92vw;
	background: var(--mmmb-c-bg);
	box-shadow: -8px 0 30px rgba(0,0,0,0.18);
	transform: translateX(100%);
	transition: transform .3s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.mmmb-drawer[data-position="left"] .mmmb-drawer-panel {
	right: auto; left: 0;
	box-shadow: 8px 0 30px rgba(0,0,0,0.18);
	transform: translateX(-100%);
}
.mmmb-drawer.is-open .mmmb-drawer-panel { transform: translateX(0); }

/* New v2 header: DOM order is [title, close]. In RTL flex this renders
 * as: close on the LEFT, title on the RIGHT (the convention user asked for). */
.mmmb-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px 14px 12px;
	border-bottom: 1px solid var(--mmmb-c-border);
	flex-shrink: 0;
	position: relative;
	background: var(--mmmb-c-bg);
}
.mmmb-drawer-header::after {
	/* subtle elevation under the header */
	content: '';
	position: absolute;
	right: 0; left: 0; bottom: -6px;
	height: 6px;
	background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, transparent 100%);
	pointer-events: none;
}
.mmmb-drawer-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}
.mmmb-drawer-title-accent {
	width: 4px;
	height: 22px;
	background: var(--mmmb-c-primary);
	border-radius: 3px;
	flex-shrink: 0;
}
.mmmb-drawer-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--mmmb-c-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mmmb-drawer-close {
	background: transparent;
	border: 1px solid var(--mmmb-c-border);
	width: 36px; height: 36px;
	border-radius: 10px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mmmb-c-text);
	flex-shrink: 0;
	transition: all 180ms ease;
}
.mmmb-drawer-close svg { display: block; }
.mmmb-drawer-close:hover {
	background: var(--mmmb-c-hover-bg);
	border-color: var(--mmmb-c-primary);
	color: var(--mmmb-c-primary);
	transform: rotate(90deg);
}
.mmmb-drawer-close:active { transform: rotate(90deg) scale(0.95); }

.mmmb-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 18px 24px;
	/* Custom scrollbar — always visible (user request: "مشخص باشه اسکرول میشه") */
	scrollbar-width: thin;
	scrollbar-color: var(--mmmb-c-primary) rgba(0,0,0,0.04);
}
.mmmb-drawer-body::-webkit-scrollbar { width: 8px; }
.mmmb-drawer-body::-webkit-scrollbar-track {
	background: rgba(0,0,0,0.04);
	border-radius: 4px;
	margin: 4px;
}
.mmmb-drawer-body::-webkit-scrollbar-thumb {
	background: var(--mmmb-c-primary);
	border-radius: 4px;
	opacity: 0.7;
}
.mmmb-drawer-body::-webkit-scrollbar-thumb:hover { opacity: 1; }

body.mmmb-drawer-open { overflow: hidden; }

/* ==========================================================
 * Tabs container (rendered when menu has >1 tab)
 * ========================================================== */
.mmmb-tabs-container {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 14px;
	min-height: 240px;
}
.mmmb-tabs-nav {
	border-left: 1px solid var(--mmmb-c-border);
	padding-left: 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mmmb-tab-btn {
	background: transparent;
	border: 0;
	padding: 12px 6px;
	cursor: pointer;
	font-family: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--mmmb-c-text);
	border-radius: 8px;
	font-size: var(--mmmb-tab-title-size);
	transition: all .15s ease;
}
.mmmb-tab-btn:hover { background: var(--mmmb-c-hover-bg); }
.mmmb-tab-btn.is-active {
	color: var(--mmmb-c-primary);
	font-weight: 700;
	background: var(--mmmb-c-hover-bg);
}
.mmmb-tab-icon { font-size: 22px; }
.mmmb-tabs-content { min-width: 0; }
.mmmb-tab-pane { display: none; }
.mmmb-tab-pane.is-active { display: block; animation: mmmb-tab-fade .25s ease; }

@keyframes mmmb-tab-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* ==========================================================
 * Sections scroll wrap — v2 NEW
 * When there are more accordions than max-visible, the section list
 * gets a max-height with a visible custom scrollbar and a bottom fade hint.
 * ========================================================== */
.mmmb-sections-scroll-wrap {
	position: relative;
	max-height: calc(var(--mmmb-sections-max-visible, 6) * 60px + (var(--mmmb-sections-max-visible, 6) - 1) * 10px);
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 4px;
	padding-left: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--mmmb-c-primary) rgba(0,0,0,0.05);
	scroll-behavior: smooth;
}
.mmmb-sections-scroll-wrap::-webkit-scrollbar { width: 6px; }
.mmmb-sections-scroll-wrap::-webkit-scrollbar-track {
	background: rgba(0,0,0,0.04);
	border-radius: 3px;
}
.mmmb-sections-scroll-wrap::-webkit-scrollbar-thumb {
	background: var(--mmmb-c-primary);
	border-radius: 3px;
}
.mmmb-sections-scroll-fade {
	pointer-events: none;
	position: sticky;
	bottom: 0;
	left: 0; right: 0;
	height: 20px;
	margin-top: -20px;
	background: linear-gradient(180deg, transparent 0%, var(--mmmb-c-bg) 100%);
	z-index: 2;
}
/* If user is at the bottom of the scroll, JS removes the fade. */
.mmmb-sections-scroll-wrap.is-scrolled-end .mmmb-sections-scroll-fade { opacity: 0; transition: opacity 200ms ease; }

/* ==========================================================
 * Section accordion — v2 REWRITTEN
 * Modern grid-template-rows trick: no JS height math, no jump.
 * ========================================================== */
.mmmb-section { margin-bottom: 10px; }

.mmmb-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	background: var(--mmmb-c-bg);
	border: 1px solid var(--mmmb-c-border);
	border-radius: 12px;
	padding: 12px 16px;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--mmmb-section-title-size);
	font-weight: var(--mmmb-section-title-weight);
	color: var(--mmmb-c-section-title);
	text-align: right;
	transition: background .15s ease, border-color .15s ease, box-shadow .2s ease;
	position: relative;
	overflow: hidden;
}
.mmmb-section-header:hover {
	border-color: var(--mmmb-c-primary);
	background: var(--mmmb-c-hover-bg);
}
.mmmb-section.is-open .mmmb-section-header {
	border-color: var(--mmmb-c-primary);
	background: var(--mmmb-c-hover-bg);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.mmmb-section-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	text-align: right;
}
.mmmb-section-accent {
	width: 3px;
	height: 0;
	background: var(--mmmb-c-primary);
	border-radius: 2px;
	flex-shrink: 0;
	transition: height 250ms ease;
}
.mmmb-section.is-open .mmmb-section-accent { height: 20px; }
.mmmb-section-header:hover .mmmb-section-accent { height: 16px; }

.mmmb-section-title {
	flex: 1;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mmmb-section-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.mmmb-section-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 7px;
	background: var(--mmmb-c-hover-bg);
	color: var(--mmmb-c-primary);
	border-radius: 11px;
	font-size: 11px;
	font-weight: 700;
	font-family: var(--mmmb-font);
}
.mmmb-section.is-open .mmmb-section-count {
	background: var(--mmmb-c-primary);
	color: #fff;
}
.mmmb-section-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	transition: transform 250ms var(--mmmb-accordion-easing);
	color: var(--mmmb-c-subtitle);
}
.mmmb-section-arrow svg { display: block; }
.mmmb-section.is-open .mmmb-section-arrow {
	transform: rotate(180deg);
	color: var(--mmmb-c-primary);
}

/* The smooth-open mechanic.
 * .mmmb-section-body is the outer grid; its only child .mmmb-section-body-inner
 * lives in a single grid row. We animate the row from 0fr → 1fr. The inner
 * div has overflow:hidden and min-height:0 so the clipping is clean. The
 * inner also fades in via opacity so we never see "text under text". */
.mmmb-section-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--mmmb-accordion-speed) var(--mmmb-accordion-easing);
	will-change: grid-template-rows;
}
.mmmb-section.is-open > .mmmb-section-body { grid-template-rows: 1fr; }

.mmmb-section-body-inner {
	overflow: hidden;
	min-height: 0;
	opacity: 0;
	padding: 0;
	transition:
		opacity calc(var(--mmmb-accordion-speed) * 0.7) ease,
		padding var(--mmmb-accordion-speed) var(--mmmb-accordion-easing);
}
.mmmb-section.is-open > .mmmb-section-body > .mmmb-section-body-inner {
	opacity: 1;
	padding: 14px 4px 8px;
}

/* When an accordion has too many items, give it an inner scroll
 * (user said: "هر اکاردئون ممکنه ۱۰۰ تا ایتم باشه — مرتب نمایش بده"). */
.mmmb-section[data-inner-scroll="1"].is-open > .mmmb-section-body > .mmmb-section-body-inner {
	max-height: var(--mmmb-section-max-h, 480px);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--mmmb-c-primary) rgba(0,0,0,0.05);
	padding-left: 8px;
	/* Keep the wrap container from growing past max-height — useful when
	 * the section is collapsed and re-opened; otherwise grid 1fr would want
	 * to expand to fit content. */
}
.mmmb-section[data-inner-scroll="1"] .mmmb-section-body-inner::-webkit-scrollbar { width: 6px; }
.mmmb-section[data-inner-scroll="1"] .mmmb-section-body-inner::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 3px; }
.mmmb-section[data-inner-scroll="1"] .mmmb-section-body-inner::-webkit-scrollbar-thumb { background: var(--mmmb-c-primary); border-radius: 3px; }

/* For non-accordion styles (mega, inline), the body is always visible. */
.mmmb-style-mega .mmmb-section-body,
.mmmb-style-inline .mmmb-section-body {
	display: block;
	grid-template-rows: none;
}
.mmmb-style-mega .mmmb-section-body-inner,
.mmmb-style-inline .mmmb-section-body-inner {
	overflow: visible;
	opacity: 1;
	padding: 0;
	transition: none;
}

/* Older-browser fallback: if grid-template-rows transition is not interpolated,
 * we still get a snappy show/hide (no animation, but no broken layout). */
@supports not (grid-template-rows: 0fr) {
	.mmmb-section-body { display: block; height: 0; overflow: hidden; transition: height .25s ease; }
	.mmmb-section.is-open > .mmmb-section-body { height: auto; }
	.mmmb-section-body-inner { opacity: 1; padding: 14px 4px 8px; }
}

/* ==========================================================
 * Default item structure
 * ========================================================== */
.mmmb-items {
	display: grid;
	gap: var(--mmmb-gap);
	/* Each style class below sets --mmmb-grid-default. Inline --mmmb-grid-d
	 * (when columns_desktop is explicit) overrides it. */
	grid-template-columns: var(--mmmb-grid-d, var(--mmmb-grid-default, repeat(auto-fill, minmax(120px, 1fr))));
}
.mmmb-item {
	text-decoration: none !important;
	color: inherit !important;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 0;
	transition: all var(--mmmb-transition) ease;
}
.mmmb-item-media {
	background: var(--mmmb-c-item-bg);
	border-radius: var(--mmmb-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mmmb-size);
	height: var(--mmmb-size);
	box-shadow: var(--mmmb-shadow);
	border: var(--mmmb-border-width) solid var(--mmmb-c-border);
	transition: all var(--mmmb-transition) ease;
	flex-shrink: 0;
}
.mmmb-item-media img { width: 100%; height: 100%; object-fit: cover; }
.mmmb-item-icon { font-size: 30px; color: var(--mmmb-c-primary); }
.mmmb-item-placeholder { color: var(--mmmb-c-subtitle); font-size: 22px; }
.mmmb-item-text {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	width: 100%;
}
.mmmb-item-title {
	font-size: var(--mmmb-title-size);
	font-weight: var(--mmmb-title-weight);
	color: var(--mmmb-c-text);
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.mmmb-item-subtitle {
	font-size: var(--mmmb-subtitle-size);
	color: var(--mmmb-c-subtitle);
	overflow-wrap: anywhere;
}
.mmmb-item-badge {
	position: absolute;
	top: -4px;
	left: -4px;
	background: var(--mmmb-c-badge);
	color: var(--mmmb-c-badge-text);
	border-radius: 10px;
	padding: 2px 7px;
	font-size: 10px;
	font-weight: 700;
	z-index: 2;
}

/* ==========================================================
 * STYLE 1: CIRCULAR  — sets per-style auto-fill default
 * ========================================================== */
.mmmb-items-circular {
	--mmmb-grid-default: repeat(auto-fill, minmax(var(--mmmb-card-min, var(--mmmb-size)), 1fr));
	gap: 18px 12px;
	padding: 4px 0;
}

/* ==========================================================
 * STYLE 2: MEGA (multi-column with section labels)
 * ========================================================== */
.mmmb-style-mega .mmmb-tabs-container { grid-template-columns: 1fr; }
.mmmb-style-mega .mmmb-tabs-nav {
	flex-direction: row;
	border-left: 0;
	border-bottom: 1px solid var(--mmmb-c-border);
	padding-left: 0;
	padding-bottom: 8px;
	margin-bottom: 14px;
	order: 1;
}
.mmmb-style-mega .mmmb-tab-btn { flex-direction: row; padding: 8px 14px; }
.mmmb-style-mega .mmmb-tabs-content { order: 2; }
.mmmb-style-mega .mmmb-section-header {
	background: transparent;
	border: 0;
	padding: 0 0 10px;
	font-size: 13px;
	color: var(--mmmb-c-primary);
	letter-spacing: .5px;
	cursor: default;
	pointer-events: none;
}
.mmmb-style-mega .mmmb-section-arrow,
.mmmb-style-mega .mmmb-section-count,
.mmmb-style-mega .mmmb-section-accent { display: none; }
.mmmb-style-mega .mmmb-items-mega {
	--mmmb-grid-default: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px;
}
.mmmb-style-mega .mmmb-item {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
}
.mmmb-style-mega .mmmb-item:hover { background: var(--mmmb-c-hover-bg); }
.mmmb-style-mega .mmmb-item-media {
	width: 44px; height: 44px;
	border-radius: 8px;
}
.mmmb-style-mega .mmmb-item-icon { font-size: 18px; }
.mmmb-style-mega .mmmb-item-text { text-align: right; align-items: flex-start; }

/* ==========================================================
 * STYLE 3: GRID (cards)
 * ========================================================== */
.mmmb-items-grid {
	--mmmb-grid-default: repeat(auto-fill, minmax(var(--mmmb-card-min, 160px), 1fr));
}
.mmmb-style-grid .mmmb-item {
	background: var(--mmmb-c-item-bg);
	border: 1px solid var(--mmmb-c-border);
	border-radius: var(--mmmb-card-radius);
	padding: 14px;
	overflow: hidden;
}
.mmmb-style-grid .mmmb-item:hover {
	border-color: var(--mmmb-c-primary);
	box-shadow: var(--mmmb-shadow-hover);
}
.mmmb-style-grid .mmmb-item-media {
	width: 80px; height: 80px;
	border-radius: var(--mmmb-card-radius);
	box-shadow: none;
}

/* ==========================================================
 * STYLE 4: LIST (vertical with icon)
 * ========================================================== */
.mmmb-items-list {
	--mmmb-grid-default: 1fr;
	gap: 0;
}
.mmmb-style-list .mmmb-item {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--mmmb-c-border);
	border-radius: 0;
}
.mmmb-style-list .mmmb-item:last-child { border-bottom: 0; }
.mmmb-style-list .mmmb-item:hover { background: var(--mmmb-c-hover-bg); }
.mmmb-style-list .mmmb-item-media {
	width: 40px; height: 40px;
	border-radius: 8px;
	box-shadow: none;
}
.mmmb-style-list .mmmb-item-icon { font-size: 16px; }
.mmmb-style-list .mmmb-item-text { text-align: right; align-items: flex-start; flex: 1; }

/* ==========================================================
 * STYLE 5: INLINE (horizontal pills)
 * ========================================================== */
.mmmb-style-inline .mmmb-section-header { display: none; }
.mmmb-items-inline {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	grid-template-columns: none;
}
.mmmb-style-inline .mmmb-item {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 30px;
	background: var(--mmmb-c-item-bg);
	border: 1px solid var(--mmmb-c-border);
}
.mmmb-style-inline .mmmb-item:hover {
	border-color: var(--mmmb-c-primary);
	background: var(--mmmb-c-hover-bg);
}
.mmmb-style-inline .mmmb-item-media {
	width: 28px; height: 28px;
	border-radius: 50%;
	box-shadow: none;
}
.mmmb-style-inline .mmmb-item-icon { font-size: 14px; }
.mmmb-style-inline .mmmb-item-text { text-align: right; }
.mmmb-style-inline .mmmb-item-subtitle { display: none; }

/* ==========================================================
 * STYLE 6: CAROUSEL (horizontal scroll snap)
 * ========================================================== */
.mmmb-items-carousel {
	display: flex !important;
	grid-template-columns: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: var(--mmmb-gap);
	padding: 8px 4px 14px;
	scrollbar-width: thin;
	scrollbar-color: var(--mmmb-c-primary) transparent;
}
.mmmb-items-carousel::-webkit-scrollbar { height: 6px; }
.mmmb-items-carousel::-webkit-scrollbar-track { background: transparent; }
.mmmb-items-carousel::-webkit-scrollbar-thumb { background: var(--mmmb-c-primary); border-radius: 3px; }
.mmmb-style-carousel .mmmb-item {
	flex: 0 0 150px;
	scroll-snap-align: start;
	background: var(--mmmb-c-item-bg);
	border-radius: var(--mmmb-card-radius);
	padding: 16px 12px;
	border: 1px solid var(--mmmb-c-border);
}
.mmmb-style-carousel .mmmb-item:hover {
	border-color: var(--mmmb-c-primary);
	box-shadow: var(--mmmb-shadow-hover);
}
.mmmb-style-carousel .mmmb-item-media {
	width: 70px; height: 70px;
	border-radius: var(--mmmb-card-radius);
	box-shadow: none;
}

/* ==========================================================
 * STYLE 7: HEXAGON (clip-path hex shape)
 * ========================================================== */
.mmmb-items-hexagon {
	--mmmb-grid-default: repeat(auto-fill, minmax(var(--mmmb-card-min, 110px), 1fr));
	gap: 12px;
	padding: 4px 0;
}
.mmmb-style-hexagon .mmmb-item-media {
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	border-radius: 0;
	box-shadow: none;
	width: 100px;
	height: 110px;
	background: var(--mmmb-c-primary);
	color: #fff;
}
.mmmb-style-hexagon .mmmb-item-icon { color: #fff; font-size: 28px; }
.mmmb-style-hexagon .mmmb-item-placeholder { color: rgba(255,255,255,0.6); }
.mmmb-style-hexagon .mmmb-item:hover .mmmb-item-media {
	background: var(--mmmb-c-text);
}

/* ==========================================================
 * STYLE 8: MASONRY (CSS columns - variable heights)
 * ========================================================== */
.mmmb-items-masonry {
	display: block !important;
	grid-template-columns: none;
	column-count: var(--mmmb-cols-d, 3);
	column-gap: var(--mmmb-gap);
}
.mmmb-style-masonry .mmmb-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: var(--mmmb-gap);
	background: var(--mmmb-c-item-bg);
	border-radius: var(--mmmb-card-radius);
	padding: 12px;
	border: 1px solid var(--mmmb-c-border);
	display: block;
}
.mmmb-style-masonry .mmmb-item:nth-child(3n) .mmmb-item-media { height: 140px; }
.mmmb-style-masonry .mmmb-item:nth-child(3n+1) .mmmb-item-media { height: 180px; }
.mmmb-style-masonry .mmmb-item:nth-child(3n+2) .mmmb-item-media { height: 100px; }
.mmmb-style-masonry .mmmb-item-media {
	width: 100%;
	border-radius: 10px;
	box-shadow: none;
	margin-bottom: 8px;
}
.mmmb-style-masonry .mmmb-item-text { text-align: right; align-items: flex-start; }
.mmmb-style-masonry .mmmb-item:hover {
	border-color: var(--mmmb-c-primary);
	box-shadow: var(--mmmb-shadow-hover);
}

/* ==========================================================
 * STYLE 9: CARDS-HOVER (image bg + overlay text)
 * ========================================================== */
.mmmb-items-cards-hover {
	--mmmb-grid-default: repeat(auto-fill, minmax(var(--mmmb-card-min, 180px), 1fr));
}
.mmmb-style-cards-hover .mmmb-item {
	position: relative;
	height: 200px;
	border-radius: var(--mmmb-card-radius);
	overflow: hidden;
	background: var(--mmmb-c-primary);
}
.mmmb-style-cards-hover .mmmb-item-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
}
.mmmb-style-cards-hover .mmmb-item-media img {
	transition: transform .6s ease;
}
.mmmb-style-cards-hover .mmmb-item:hover .mmmb-item-media img {
	transform: scale(1.1);
}
.mmmb-style-cards-hover .mmmb-item-icon {
	color: #fff;
	font-size: 40px;
	opacity: .9;
}
.mmmb-style-cards-hover .mmmb-item-text {
	position: absolute;
	inset: auto 0 0 0;
	padding: 14px;
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.9) 100%);
	color: #fff;
	text-align: right;
	align-items: flex-start;
	z-index: 2;
}
.mmmb-style-cards-hover .mmmb-item-title { color: #fff; font-size: 15px; }
.mmmb-style-cards-hover .mmmb-item-subtitle { color: rgba(255,255,255,0.85); }

/* ==========================================================
 * STYLE 10: ICON-TILES (square tile, icon top, label bottom)
 * ========================================================== */
.mmmb-items-icon-tiles {
	--mmmb-grid-default: repeat(auto-fill, minmax(var(--mmmb-card-min, 110px), 1fr));
	gap: 12px;
}
.mmmb-style-icon-tiles .mmmb-item {
	background: var(--mmmb-c-item-bg);
	border-radius: var(--mmmb-card-radius);
	padding: 20px 12px;
	border: 1px solid var(--mmmb-c-border);
	min-height: 130px;
	justify-content: center;
}
.mmmb-style-icon-tiles .mmmb-item:hover {
	border-color: var(--mmmb-c-primary);
	background: var(--mmmb-c-hover-bg);
}
.mmmb-style-icon-tiles .mmmb-item-media {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	box-shadow: none;
	background: var(--mmmb-c-hover-bg);
	margin-bottom: 4px;
}
.mmmb-style-icon-tiles .mmmb-item-icon { color: var(--mmmb-c-primary); font-size: 26px; }

/* ==========================================================
 * SHADOW PRESETS (via .mmmb-shadow-* on wrap)
 * ========================================================== */
.mmmb-shadow-none .mmmb-item-media,
.mmmb-shadow-none.mmmb-style-grid .mmmb-item,
.mmmb-shadow-none.mmmb-style-carousel .mmmb-item,
.mmmb-shadow-none.mmmb-style-masonry .mmmb-item,
.mmmb-shadow-none.mmmb-style-icon-tiles .mmmb-item { box-shadow: none !important; }

.mmmb-shadow-strong .mmmb-item-media { box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important; }
.mmmb-shadow-strong.mmmb-style-grid .mmmb-item,
.mmmb-shadow-strong.mmmb-style-carousel .mmmb-item,
.mmmb-shadow-strong.mmmb-style-masonry .mmmb-item,
.mmmb-shadow-strong.mmmb-style-icon-tiles .mmmb-item { box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important; }

.mmmb-shadow-glow .mmmb-item-media { box-shadow: 0 0 24px var(--mmmb-c-primary) !important; }
.mmmb-shadow-glow .mmmb-item:hover .mmmb-item-media { box-shadow: 0 0 36px var(--mmmb-c-primary) !important; }

/* ==========================================================
 * HOVER EFFECTS (DESKTOP — via .mmmb-hover-* on wrap)
 * ========================================================== */
.mmmb-hover-lift .mmmb-item:hover { transform: translateY(-4px); }
.mmmb-hover-lift .mmmb-item:hover .mmmb-item-media { box-shadow: var(--mmmb-shadow-hover); }

.mmmb-hover-scale .mmmb-item:hover { transform: scale(1.06); }

.mmmb-hover-glow .mmmb-item:hover .mmmb-item-media { box-shadow: 0 0 24px var(--mmmb-c-primary); }

.mmmb-hover-rotate .mmmb-item:hover .mmmb-item-media { transform: rotate(6deg) scale(1.05); }

.mmmb-hover-pulse .mmmb-item:hover .mmmb-item-media { animation: mmmb-pulse .6s ease; }
@keyframes mmmb-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

.mmmb-hover-zoom .mmmb-item:hover .mmmb-item-media img { transform: scale(1.15); }
.mmmb-hover-zoom .mmmb-item-media img { transition: transform .5s ease; }

/* ==========================================================
 * ENTRANCE ANIMATIONS (DESKTOP — via .mmmb-anim-* on wrap)
 * ========================================================== */
.mmmb-anim-fade .mmmb-item { animation: mmmb-fade-in .6s ease both; }
.mmmb-anim-slide-up .mmmb-item { animation: mmmb-slide-up .5s ease both; }
.mmmb-anim-slide-down .mmmb-item { animation: mmmb-slide-down .5s ease both; }
.mmmb-anim-zoom-in .mmmb-item { animation: mmmb-zoom-in .5s cubic-bezier(.34,1.56,.64,1) both; }
.mmmb-anim-flip .mmmb-item { animation: mmmb-flip-in .6s ease both; }
.mmmb-anim-bounce .mmmb-item { animation: mmmb-bounce-in .7s cubic-bezier(.68,-0.55,.27,1.55) both; }
.mmmb-anim-blur .mmmb-item { animation: mmmb-blur-in .5s ease both; }

/* Stagger: each item has --idx set inline */
.mmmb-anim-stagger .mmmb-item { animation-delay: calc(var(--idx, 0) * 60ms); }

@keyframes mmmb-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes mmmb-slide-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}
@keyframes mmmb-slide-down {
	from { opacity: 0; transform: translateY(-20px); }
	to   { opacity: 1; transform: none; }
}
@keyframes mmmb-zoom-in {
	from { opacity: 0; transform: scale(0.7); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes mmmb-flip-in {
	from { opacity: 0; transform: rotateY(90deg); }
	to   { opacity: 1; transform: rotateY(0); }
}
@keyframes mmmb-bounce-in {
	0%   { opacity: 0; transform: scale(0.3); }
	50%  { transform: scale(1.08); }
	70%  { transform: scale(0.95); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes mmmb-blur-in {
	from { opacity: 0; filter: blur(10px); }
	to   { opacity: 1; filter: none; }
}

/* ==========================================================
 * BACKGROUND EFFECTS (.mmmb-bg-*)
 * ========================================================== */

/* ---- Glass / Glassmorphism ---- */
.mmmb-bg-glass {
	background: rgba(255, 255, 255, 0.55) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
}
.mmmb-bg-glass-dark {
	background: rgba(20, 20, 30, 0.55) !important;
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 20px;
	color: #f9fafb;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.mmmb-bg-glass-dark .mmmb-item-title { color: #f9fafb; }
.mmmb-bg-glass-dark .mmmb-section-header { background: rgba(255,255,255,0.04); color: #fff; border-color: rgba(255,255,255,0.1); }

/* ---- Neon ---- */
.mmmb-bg-neon {
	background: #0a0a14 !important;
	border: 2px solid var(--mmmb-c-primary);
	border-radius: 16px;
	padding: 22px;
	color: #fff;
	box-shadow:
		0 0 12px var(--mmmb-c-primary),
		0 0 30px var(--mmmb-c-primary),
		inset 0 0 18px rgba(0,0,0,0.6);
}
.mmmb-bg-neon .mmmb-item-title {
	color: #fff;
	text-shadow: 0 0 6px var(--mmmb-c-primary), 0 0 14px var(--mmmb-c-primary);
}
.mmmb-bg-neon .mmmb-item-media {
	border: 2px solid var(--mmmb-c-primary);
	box-shadow: 0 0 10px var(--mmmb-c-primary), inset 0 0 8px rgba(0,0,0,0.6);
}
.mmmb-bg-neon .mmmb-item-icon { color: var(--mmmb-c-primary); text-shadow: 0 0 8px var(--mmmb-c-primary); }
.mmmb-bg-neon .mmmb-section-header {
	background: rgba(255,255,255,0.04);
	border-color: var(--mmmb-c-primary);
	color: #fff;
	box-shadow: 0 0 8px var(--mmmb-c-primary) inset;
}
.mmmb-bg-neon .mmmb-tab-btn { color: rgba(255,255,255,0.7); }
.mmmb-bg-neon .mmmb-tab-btn.is-active {
	color: #fff;
	background: rgba(255,255,255,0.04);
	text-shadow: 0 0 8px var(--mmmb-c-primary);
}
.mmmb-bg-neon .mmmb-tabs-nav { border-color: rgba(255,255,255,0.08); }

/* ---- Granite ---- */
.mmmb-bg-granite {
	background:
		radial-gradient(at 20% 25%, rgba(255,255,255,0.08) 0, transparent 40%),
		radial-gradient(at 80% 70%, rgba(0,0,0,0.06) 0, transparent 50%),
		radial-gradient(at 60% 20%, rgba(255,255,255,0.04) 0, transparent 30%),
		linear-gradient(135deg, #4a4e5a 0%, #2d3038 100%) !important;
	border-radius: 16px;
	padding: 20px;
	color: #f9fafb;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.mmmb-bg-granite .mmmb-item-title { color: #f9fafb; }
.mmmb-bg-granite .mmmb-section-header {
	background: rgba(255,255,255,0.06);
	color: #f9fafb;
	border-color: rgba(255,255,255,0.1);
}
.mmmb-bg-granite .mmmb-tab-btn { color: rgba(249,250,251,0.7); }
.mmmb-bg-granite .mmmb-tab-btn.is-active { color: #fff; background: rgba(255,255,255,0.1); }

/* ---- Mesh gradient ---- */
.mmmb-bg-mesh {
	background:
		radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.5) 0, transparent 50%),
		radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.4) 0, transparent 50%),
		radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.4) 0, transparent 50%),
		radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.4) 0, transparent 50%),
		radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.4) 0, transparent 50%),
		linear-gradient(135deg, #fff 0%, #fafafa 100%) !important;
	border-radius: 20px;
	padding: 22px;
}

/* ---- Aurora ---- */
.mmmb-bg-aurora {
	background:
		linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.15), rgba(245, 158, 11, 0.15)) !important;
	background-size: 400% 400%;
	border-radius: 20px;
	padding: 22px;
	animation: mmmb-aurora 15s ease infinite;
}
@keyframes mmmb-aurora {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* ---- Noise / paper grain ---- */
.mmmb-bg-noise {
	background: #f9fafb !important;
	background-image:
		url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	border-radius: 16px;
	padding: 20px;
}

/* ==========================================================
 * Custom Glass (v3.0.15) — drives opacity and blur from inline
 * CSS variables emitted by the renderer. The background color is
 * composed at PHP render time from the user's color_bg + the
 * opacity slider as the alpha channel, so the live preview and
 * the front-end always match exactly.
 *
 *  --mmmb-glass-bg      : full rgba() string (desktop / base)
 *  --mmmb-glass-blur    : px value for backdrop blur (desktop / base)
 *  --mmmb-glass-bg-m    : optional mobile override (rgba)
 *  --mmmb-glass-blur-m  : optional mobile override (px)
 *
 * The `.mmmb-glass-mobile-only` modifier is added by the renderer
 * when ONLY the mobile glass is enabled — desktop falls back to
 * the standard menu background and the mobile @media block below
 * re-enables the glass styling on small viewports.
 * ========================================================== */
.mmmb-bg-custom-glass {
	background: var(--mmmb-glass-bg, rgba(255, 255, 255, 0.55)) !important;
	-webkit-backdrop-filter: blur(var(--mmmb-glass-blur, 20px)) saturate(160%);
	backdrop-filter: blur(var(--mmmb-glass-blur, 20px)) saturate(160%);
	/* Border + shadow use rgba black so they're visible on both light and
	 * dark backgrounds (white-on-white was invisible in v3.0.15-rc1). */
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 20px;
	padding: 20px;
	box-shadow:
		0 12px 40px rgba(31, 38, 135, 0.20),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* Mobile-only glass: neutralize styling on desktop. */
.mmmb-bg-custom-glass.mmmb-glass-mobile-only {
	background: var(--mmmb-c-bg, #ffffff) !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: none;
	box-shadow: none;
	padding: 0;
}

/* ---- Drawer / popup mode: project glass onto the visible panel ----
 * In drawer/popup, build_wrap_classes attaches the glass class to the
 * outer .mmmb-drawer overlay. But the actual visible surface is the
 * inner .mmmb-drawer-panel, which has its own opaque background. We
 * push the glass effect onto the panel here so the user sees it.
 * Specificity (0,2,1) + !important to beat .mmmb-drawer.mmmb-force-text
 * .mmmb-drawer-panel which sets background to color_bg. */
.mmmb-drawer.mmmb-bg-custom-glass .mmmb-drawer-panel {
	background: var(--mmmb-glass-bg, rgba(255, 255, 255, 0.55)) !important;
	-webkit-backdrop-filter: blur(var(--mmmb-glass-blur, 20px)) saturate(160%);
	backdrop-filter: blur(var(--mmmb-glass-blur, 20px)) saturate(160%);
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.mmmb-drawer.mmmb-bg-custom-glass.mmmb-glass-mobile-only .mmmb-drawer-panel {
	background: var(--mmmb-c-bg, #ffffff) !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: 0;
}

/* ---- Inner elements: let the glass show through ----
 * Section headers, items, tab buttons all have opaque backgrounds via
 * --mmmb-c-bg / --mmmb-c-item-bg. Those would fully cover the wrap's
 * glass background. Make them transparent (or barely-tinted) inside a
 * glass container so the effect is actually visible. Specificity (0,2,N)
 * matches the existing .mmmb-wrap.mmmb-force-text .X rules at line ~1380
 * and ours come later in the file, so cascade picks ours.
 *
 * We use a faint neutral tint (rgba(255,255,255,0.12)) rather than full
 * transparent so accordion headers and items still read as cards. The
 * open-state hover keeps slightly more tint for contrast. */
.mmmb-wrap.mmmb-bg-custom-glass .mmmb-section-header,
.mmmb-drawer.mmmb-bg-custom-glass .mmmb-section-header {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
}
.mmmb-wrap.mmmb-bg-custom-glass .mmmb-section.is-open .mmmb-section-header,
.mmmb-drawer.mmmb-bg-custom-glass .mmmb-section.is-open .mmmb-section-header {
	background: rgba(255, 255, 255, 0.25) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
}
.mmmb-wrap.mmmb-bg-custom-glass .mmmb-item,
.mmmb-drawer.mmmb-bg-custom-glass .mmmb-item {
	background: rgba(255, 255, 255, 0.08) !important;
}
.mmmb-wrap.mmmb-bg-custom-glass .mmmb-item:hover,
.mmmb-drawer.mmmb-bg-custom-glass .mmmb-item:hover {
	background: rgba(255, 255, 255, 0.18) !important;
}
.mmmb-wrap.mmmb-bg-custom-glass .mmmb-tab-btn,
.mmmb-drawer.mmmb-bg-custom-glass .mmmb-tab-btn {
	background: transparent !important;
}
.mmmb-wrap.mmmb-bg-custom-glass .mmmb-tab-btn.is-active,
.mmmb-drawer.mmmb-bg-custom-glass .mmmb-tab-btn.is-active {
	background: rgba(255, 255, 255, 0.2) !important;
}
/* When only mobile glass is enabled, undo the inner-transparency on
 * desktop so the standard menu look returns at wider viewports. */
.mmmb-wrap.mmmb-bg-custom-glass.mmmb-glass-mobile-only .mmmb-section-header,
.mmmb-drawer.mmmb-bg-custom-glass.mmmb-glass-mobile-only .mmmb-section-header,
.mmmb-wrap.mmmb-bg-custom-glass.mmmb-glass-mobile-only .mmmb-item,
.mmmb-drawer.mmmb-bg-custom-glass.mmmb-glass-mobile-only .mmmb-item {
	background: var(--mmmb-c-bg) !important;
	border-color: var(--mmmb-c-border) !important;
}


/* v3.0.24 — typography controls for mobile-primary menus and Drawer/Popup panels.
   These rules affect font-size only; no dimensions, padding, gap, or layout values are changed. */
.mmmb-menu-device-mobile .mmmb-tab-btn { font-size: var(--mmmb-tab-title-size-m, var(--mmmb-tab-title-size, 12px)); }
.mmmb-menu-device-mobile .mmmb-section-title { font-size: var(--mmmb-section-title-size-m, var(--mmmb-section-title-size, 13px)); }
.mmmb-menu-device-mobile .mmmb-item-title { font-size: var(--mmmb-title-size-m, var(--mmmb-title-size, 13px)); }
.mmmb-menu-device-mobile .mmmb-item-subtitle { font-size: var(--mmmb-subtitle-size-m, var(--mmmb-subtitle-size, 10px)); }

/* ==========================================================
 * Responsive — Mobile  (under 600px)
 * v2.1: Mobile uses FIXED fallback values that are independent of
 * desktop. Changing a desktop slider NEVER affects mobile. To override
 * mobile, set the corresponding `mobile_*` setting in the inspector.
 * ========================================================== */
@media (max-width: 600px) {
	.mmmb-drawer-panel { max-width: 100vw; width: min(var(--mmmb-drawer-width-mobile, var(--mmmb-drawer-width)), 100vw); }
	.mmmb-drawer[data-mobile-position="right"] .mmmb-drawer-panel { right: 0; left: auto; box-shadow: -8px 0 30px rgba(0,0,0,0.18); transform: translateX(100%); }
	.mmmb-drawer[data-mobile-position="left"] .mmmb-drawer-panel { right: auto; left: 0; box-shadow: 8px 0 30px rgba(0,0,0,0.18); transform: translateX(-100%); }
	.mmmb-drawer.is-open .mmmb-drawer-panel { transform: translateX(0); }
	.mmmb-drawer-body { padding: 14px 14px 24px; }
	.mmmb-drawer-header { padding: 12px 14px 12px 10px; }
	.mmmb-drawer-title { font-size: 15px; }

	.mmmb-tabs-container { grid-template-columns: 86px minmax(0, 1fr); gap: 10px; }
	.mmmb-tabs-nav { padding-left: 5px; }
	.mmmb-tab-btn { padding: 10px 5px; font-size: var(--mmmb-tab-title-size-m, 12px); }

	.mmmb-section-header { padding: 11px 13px; }
	.mmmb-section-title { font-size: var(--mmmb-section-title-size-m, 13px); }

	/* Mobile-specific sizing — each `var(--mmmb-*-m, <fixed>)` falls back to
	 * a FIXED numeric value, NOT to its desktop counterpart. This guarantees
	 * that changing a desktop slider doesn't propagate into mobile. */
	.mmmb-item-media {
		width: var(--mmmb-size-m, 72px);
		height: var(--mmmb-size-m, 72px);
		border-radius: var(--mmmb-radius-m, 50%);
		border-width: var(--mmmb-border-width-m, 0px);
	}
	.mmmb-item-title { font-size: var(--mmmb-title-size-m, 13px); }
	.mmmb-item-subtitle { font-size: var(--mmmb-subtitle-size-m, 10px); }
	.mmmb-items { gap: var(--mmmb-gap-m, 12px); }

	/* Card radius on mobile (overridable independent of desktop). */
	.mmmb-style-grid .mmmb-item,
	.mmmb-style-carousel .mmmb-item,
	.mmmb-style-masonry .mmmb-item,
	.mmmb-style-icon-tiles .mmmb-item,
	.mmmb-style-cards-hover .mmmb-item {
		border-radius: var(--mmmb-card-radius-m, var(--mmmb-card-radius));
	}
	.mmmb-style-grid .mmmb-item-media,
	.mmmb-style-carousel .mmmb-item-media,
	.mmmb-style-icon-tiles .mmmb-item-media {
		border-radius: var(--mmmb-card-radius-m, var(--mmmb-card-radius));
	}

	/* Mobile-specific grid columns. If neither --mmmb-grid-m nor
	 * --mmmb-grid-d is set, the style class's auto-fill default still
	 * applies — but with the smaller mobile card min. */
	.mmmb-items {
		grid-template-columns: var(--mmmb-grid-m, var(--mmmb-grid-d, var(--mmmb-grid-default, repeat(auto-fill, minmax(82px, 1fr)))));
	}

	/* Mobile masonry columns. */
	.mmmb-items-masonry { column-count: var(--mmmb-cols-m, var(--mmmb-cols-d, 2)); }

	/* Default mobile card mins for each style if no explicit columns. */
	.mmmb-items-circular { --mmmb-grid-default: repeat(auto-fit, minmax(82px, 1fr)); gap: 14px 10px; }
	.mmmb-items-grid { --mmmb-grid-default: repeat(auto-fill, minmax(140px, 1fr)); }
	.mmmb-items-hexagon { --mmmb-grid-default: repeat(auto-fill, minmax(95px, 1fr)); }
	.mmmb-items-icon-tiles { --mmmb-grid-default: repeat(auto-fill, minmax(95px, 1fr)); }
	.mmmb-items-cards-hover { --mmmb-grid-default: repeat(auto-fill, minmax(150px, 1fr)); }
	.mmmb-items-mega { --mmmb-grid-default: repeat(auto-fill, minmax(150px, 1fr)); }

	.mmmb-style-circular .mmmb-item-media {
		width: min(var(--mmmb-size-m, 72px), 86px);
		height: min(var(--mmmb-size-m, 72px), 86px);
	}
}
@media (max-width: 400px) {
	.mmmb-items-masonry { column-count: var(--mmmb-cols-m, 1); }
}

/* ==========================================================
 * Mobile-only entrance animations (.mmmb-m-anim-*)
 * These take precedence over desktop anim classes only on mobile.
 * ========================================================== */
@media (max-width: 600px) {
	/* Disable desktop animation on mobile when a mobile override exists. */
	.mmmb-m-anim-none .mmmb-item { animation: none !important; }

	.mmmb-m-anim-fade .mmmb-item { animation: mmmb-fade-in .6s ease both !important; }
	.mmmb-m-anim-slide-up .mmmb-item { animation: mmmb-slide-up .5s ease both !important; }
	.mmmb-m-anim-slide-down .mmmb-item { animation: mmmb-slide-down .5s ease both !important; }
	.mmmb-m-anim-zoom-in .mmmb-item { animation: mmmb-zoom-in .5s cubic-bezier(.34,1.56,.64,1) both !important; }
	.mmmb-m-anim-flip .mmmb-item { animation: mmmb-flip-in .6s ease both !important; }
	.mmmb-m-anim-bounce .mmmb-item { animation: mmmb-bounce-in .7s cubic-bezier(.68,-0.55,.27,1.55) both !important; }
	.mmmb-m-anim-blur .mmmb-item { animation: mmmb-blur-in .5s ease both !important; }

	/* Mobile-only hover variants (note: hover on mobile = tap, but kept for
	 * consistency with desktop). */
	.mmmb-m-hover-none .mmmb-item:hover { transform: none !important; }
	.mmmb-m-hover-lift .mmmb-item:hover { transform: translateY(-3px); }
	.mmmb-m-hover-scale .mmmb-item:hover { transform: scale(1.04); }
	.mmmb-m-hover-glow .mmmb-item:hover .mmmb-item-media { box-shadow: 0 0 18px var(--mmmb-c-primary); }
	.mmmb-m-hover-rotate .mmmb-item:hover .mmmb-item-media { transform: rotate(4deg) scale(1.03); }
	.mmmb-m-hover-pulse .mmmb-item:hover .mmmb-item-media { animation: mmmb-pulse .6s ease; }
	.mmmb-m-hover-zoom .mmmb-item:hover .mmmb-item-media img { transform: scale(1.1); }

	/* ===== v3.0.15: Custom glass mobile overrides =====
	 * Falls back: --mmmb-glass-bg-m -> --mmmb-glass-bg -> default rgba.
	 * Same for blur. So a mobile-only override works without needing
	 * desktop values, and a desktop value still applies on mobile when
	 * no mobile-specific override is set. */
	.mmmb-bg-custom-glass {
		background: var(--mmmb-glass-bg-m, var(--mmmb-glass-bg, rgba(255, 255, 255, 0.55))) !important;
		-webkit-backdrop-filter: blur(var(--mmmb-glass-blur-m, var(--mmmb-glass-blur, 20px))) saturate(160%);
		backdrop-filter: blur(var(--mmmb-glass-blur-m, var(--mmmb-glass-blur, 20px))) saturate(160%);
	}
	/* Same projection onto the drawer panel for mobile values. */
	.mmmb-drawer.mmmb-bg-custom-glass .mmmb-drawer-panel {
		background: var(--mmmb-glass-bg-m, var(--mmmb-glass-bg, rgba(255, 255, 255, 0.55))) !important;
		-webkit-backdrop-filter: blur(var(--mmmb-glass-blur-m, var(--mmmb-glass-blur, 20px))) saturate(160%);
		backdrop-filter: blur(var(--mmmb-glass-blur-m, var(--mmmb-glass-blur, 20px))) saturate(160%);
	}
	/* When ONLY the mobile glass is enabled, re-apply the glass shell
	 * styling that the .mmmb-glass-mobile-only modifier reset above. */
	.mmmb-bg-custom-glass.mmmb-glass-mobile-only {
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 20px;
		padding: 20px;
		box-shadow:
			0 12px 40px rgba(31, 38, 135, 0.20),
			inset 0 1px 0 rgba(255, 255, 255, 0.45);
	}
	.mmmb-drawer.mmmb-bg-custom-glass.mmmb-glass-mobile-only .mmmb-drawer-panel {
		border-left: 1px solid rgba(255, 255, 255, 0.25);
		border-right: 1px solid rgba(255, 255, 255, 0.25);
	}
	/* Re-enable the see-through inner elements on mobile when in
	 * mobile-only glass mode (desktop kept them solid for normal look). */
	.mmmb-wrap.mmmb-bg-custom-glass.mmmb-glass-mobile-only .mmmb-section-header,
	.mmmb-drawer.mmmb-bg-custom-glass.mmmb-glass-mobile-only .mmmb-section-header {
		background: rgba(255, 255, 255, 0.12) !important;
		border-color: rgba(255, 255, 255, 0.25) !important;
	}
	.mmmb-wrap.mmmb-bg-custom-glass.mmmb-glass-mobile-only .mmmb-item,
	.mmmb-drawer.mmmb-bg-custom-glass.mmmb-glass-mobile-only .mmmb-item {
		background: rgba(255, 255, 255, 0.08) !important;
	}
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.mmmb-wrap *, .mmmb-drawer * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ==========================================================
 * v2 final guard: prevent any kind of text clip during accordion
 * transitions. Combined with the grid-rows trick, this fully removes
 * the "text first goes under then snaps" bug from v1.
 * ========================================================== */
.mmmb-item,
.mmmb-item-text,
.mmmb-item-title,
.mmmb-item-subtitle {
	min-width: 0;
	max-width: 100%;
}
.mmmb-item-title,
.mmmb-item-subtitle {
	overflow-wrap: anywhere;
	word-break: normal;
}

/* ==========================================================
 * v2.1 — Popup display mode  (centered modal, X-only close)
 *
 * Used when [mm_menu mode="popup"] or [mm_menu_trigger mode="popup"].
 * The renderer adds `.mmmb-popup` to the drawer wrapper. The overlay
 * does NOT have data-mmmb-close attribute by default (controlled by the
 * `popup_close_on_overlay` setting), so only the X button closes it.
 * ========================================================== */
.mmmb-drawer.mmmb-popup .mmmb-drawer-overlay {
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.mmmb-drawer.mmmb-popup .mmmb-drawer-panel {
	position: absolute;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	width: var(--mmmb-popup-width, 720px);
	max-width: 92vw;
	max-height: var(--mmmb-popup-max-h, 85vh);
	height: auto;
	transform: translate(-50%, -50%) scale(0.94);
	opacity: 0;
	border-radius: var(--mmmb-popup-radius, 16px);
	box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);
	transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .25s ease;
	overflow: hidden;
}
.mmmb-drawer.mmmb-popup.is-open .mmmb-drawer-panel {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}
.mmmb-drawer.mmmb-popup[data-position="left"] .mmmb-drawer-panel,
.mmmb-drawer.mmmb-popup[data-position="right"] .mmmb-drawer-panel {
	/* Popup ignores the drawer position — it's always centered. */
	left: 50%;
	right: auto;
	transform: translate(-50%, -50%) scale(0.94);
}
.mmmb-drawer.mmmb-popup.is-open[data-position="left"] .mmmb-drawer-panel,
.mmmb-drawer.mmmb-popup.is-open[data-position="right"] .mmmb-drawer-panel {
	transform: translate(-50%, -50%) scale(1);
}

/* Inside the popup, the header gets a slightly different look. */
.mmmb-drawer.mmmb-popup .mmmb-drawer-header {
	background: linear-gradient(180deg, var(--mmmb-c-bg) 0%, var(--mmmb-c-bg) 100%);
	border-bottom: 1px solid var(--mmmb-c-border);
}
.mmmb-drawer.mmmb-popup .mmmb-drawer-body {
	max-height: calc(var(--mmmb-popup-max-h, 85vh) - 66px);
}

/* Popup on mobile: full-width, full-height-ish, less rounded. */
@media (max-width: 600px) {
	.mmmb-drawer.mmmb-popup .mmmb-drawer-panel {
		width: 96vw;
		max-height: 90vh;
		border-radius: 12px;
	}
}

/* ==========================================================
 * v2.1 — Force text color cascade  (.mmmb-force-text on wrap)
 *
 * Answers the user's request: "colors should apply to the whole menu —
 * text/items/accordion/tabs". With this class, color_text propagates
 * to every text element in the menu that doesn't have a more specific
 * color override. This is on by default (force_text_color = 1).
 *
 * Active tab keeps its primary highlight color; subtitle keeps its
 * subtitle color; section title keeps its section_title color. All
 * other text inherits from --mmmb-c-text.
 * ========================================================== */
.mmmb-wrap.mmmb-force-text,
.mmmb-drawer.mmmb-force-text,
.mmmb-drawer.mmmb-force-text .mmmb-drawer-panel,
.mmmb-drawer.mmmb-force-text .mmmb-drawer-body,
.mmmb-wrap.mmmb-force-text .mmmb-tabs-content,
.mmmb-wrap.mmmb-force-text .mmmb-tab-pane,
.mmmb-drawer.mmmb-force-text .mmmb-tabs-content,
.mmmb-drawer.mmmb-force-text .mmmb-tab-pane {
	color: var(--mmmb-c-text);
}

/* These pieces explicitly opt in to the text color (defeating any default browser/theme color). */
.mmmb-wrap.mmmb-force-text .mmmb-drawer-title,
.mmmb-drawer.mmmb-force-text .mmmb-drawer-title,
.mmmb-wrap.mmmb-force-text .mmmb-tab-btn,
.mmmb-drawer.mmmb-force-text .mmmb-tab-btn,
.mmmb-wrap.mmmb-force-text .mmmb-tab-title,
.mmmb-drawer.mmmb-force-text .mmmb-tab-title,
.mmmb-wrap.mmmb-force-text .mmmb-item-title,
.mmmb-drawer.mmmb-force-text .mmmb-item-title {
	color: var(--mmmb-c-text);
}

/* Active tab + section count keep their primary highlight. */
.mmmb-wrap.mmmb-force-text .mmmb-tab-btn.is-active,
.mmmb-drawer.mmmb-force-text .mmmb-tab-btn.is-active {
	color: var(--mmmb-c-primary);
}

/* Subtitle keeps its own dimmer color. */
.mmmb-wrap.mmmb-force-text .mmmb-item-subtitle,
.mmmb-drawer.mmmb-force-text .mmmb-item-subtitle {
	color: var(--mmmb-c-subtitle);
}

/* Section title keeps its dedicated color. */
.mmmb-wrap.mmmb-force-text .mmmb-section-title,
.mmmb-drawer.mmmb-force-text .mmmb-section-title {
	color: var(--mmmb-c-section-title);
}

/* And the accordion header/section count are tinted by the primary. */
.mmmb-wrap.mmmb-force-text .mmmb-section-header,
.mmmb-drawer.mmmb-force-text .mmmb-section-header {
	color: var(--mmmb-c-section-title);
	background: var(--mmmb-c-bg);
	border-color: var(--mmmb-c-border);
}
.mmmb-wrap.mmmb-force-text .mmmb-section.is-open .mmmb-section-header,
.mmmb-drawer.mmmb-force-text .mmmb-section.is-open .mmmb-section-header {
	background: var(--mmmb-c-hover-bg);
	border-color: var(--mmmb-c-primary);
}

/* Drawer panel + body background also follow color_bg when force-text is active. */
.mmmb-drawer.mmmb-force-text .mmmb-drawer-panel,
.mmmb-drawer.mmmb-force-text .mmmb-drawer-header {
	background: var(--mmmb-c-bg);
}

/* v3.0.4 - Device-specific tab groups */
.mmmb-device-mobile{display:none!important}
.mmmb-device-desktop{display:block}
@media (max-width:600px){
  .mmmb-device-desktop.has-mobile-version{display:none!important}
  .mmmb-device-mobile{display:block!important}
}

/* ==========================================================
 * v3.0.17 — 10 modern desktop/mobile menu templates
 * ========================================================== */

/* Desktop 1: Glass Mega Menu */
.mmmb-items-desk-glass-mega { --mmmb-grid-default: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.mmmb-style-desk-glass-mega .mmmb-tabs-container,
.mmmb-style-desk-apple-float .mmmb-tabs-container,
.mmmb-style-desk-ecom-grid .mmmb-tabs-container,
.mmmb-style-desk-minimal-line .mmmb-tabs-container { grid-template-columns: 1fr; }
.mmmb-style-desk-glass-mega {
	background: rgba(255,255,255,.58) !important;
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 24px;
	padding: 22px;
	box-shadow: 0 24px 70px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.6);
}
.mmmb-style-desk-glass-mega .mmmb-tabs-nav { flex-direction: row; border: 0; padding: 0 0 14px; gap: 8px; }
.mmmb-style-desk-glass-mega .mmmb-tab-btn { border-radius: 999px; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.55); }
.mmmb-style-desk-glass-mega .mmmb-section-header { background: transparent; border: 0; padding: 0 0 10px; color: var(--mmmb-c-primary); pointer-events: none; }
.mmmb-style-desk-glass-mega .mmmb-section-arrow,
.mmmb-style-desk-glass-mega .mmmb-section-count,
.mmmb-style-desk-glass-mega .mmmb-section-accent { display: none; }
.mmmb-style-desk-glass-mega .mmmb-item { flex-direction: row; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.48); border: 1px solid rgba(255,255,255,.48); }
.mmmb-style-desk-glass-mega .mmmb-item:hover { background: rgba(255,255,255,.72); box-shadow: 0 18px 35px rgba(15,23,42,.12); }
.mmmb-style-desk-glass-mega .mmmb-item-media { width: 46px; height: 46px; border-radius: 15px; box-shadow: none; }
.mmmb-style-desk-glass-mega .mmmb-item-text { text-align: right; align-items: flex-start; }

/* Desktop 2: Apple-style floating menu */
.mmmb-items-desk-apple-float { --mmmb-grid-default: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mmmb-style-desk-apple-float { background: #fff; border-radius: 26px; padding: 20px; box-shadow: 0 18px 55px rgba(15,23,42,.14); border: 1px solid rgba(15,23,42,.06); }
.mmmb-style-desk-apple-float .mmmb-tabs-nav { flex-direction: row; border: 0; padding: 0 0 12px; gap: 6px; }
.mmmb-style-desk-apple-float .mmmb-tab-btn { border-radius: 999px; background: #f6f7f9; padding: 9px 15px; }
.mmmb-style-desk-apple-float .mmmb-tab-btn.is-active { background: #111827; color: #fff; }
.mmmb-style-desk-apple-float .mmmb-section-header { background: transparent; border: 0; color: #6b7280; padding: 0 2px 10px; pointer-events: none; }
.mmmb-style-desk-apple-float .mmmb-section-arrow,
.mmmb-style-desk-apple-float .mmmb-section-count,
.mmmb-style-desk-apple-float .mmmb-section-accent { display: none; }
.mmmb-style-desk-apple-float .mmmb-item { flex-direction: row; gap: 12px; align-items: center; padding: 11px; border-radius: 18px; }
.mmmb-style-desk-apple-float .mmmb-item:hover { background: #f5f7fb; transform: translateY(-2px); }
.mmmb-style-desk-apple-float .mmmb-item-media { width: 44px; height: 44px; border-radius: 14px; box-shadow: none; background: #f3f4f6; }
.mmmb-style-desk-apple-float .mmmb-item-text { text-align: right; align-items: flex-start; }

/* Desktop 3: E-commerce mega grid */
.mmmb-items-desk-ecom-grid { --mmmb-grid-default: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.mmmb-style-desk-ecom-grid .mmmb-tabs-nav { flex-direction: row; border: 0; padding: 0 0 14px; gap: 8px; }
.mmmb-style-desk-ecom-grid .mmmb-tab-btn { background: var(--mmmb-c-hover-bg); border-radius: 14px; }
.mmmb-style-desk-ecom-grid .mmmb-section-header { background: transparent; border: 0; color: var(--mmmb-c-primary); padding: 0 0 9px; pointer-events: none; }
.mmmb-style-desk-ecom-grid .mmmb-section-arrow,
.mmmb-style-desk-ecom-grid .mmmb-section-count,
.mmmb-style-desk-ecom-grid .mmmb-section-accent { display: none; }
.mmmb-style-desk-ecom-grid .mmmb-item { min-height: 168px; padding: 16px 12px; border-radius: 20px; border: 1px solid var(--mmmb-c-border); background: linear-gradient(180deg, #fff, var(--mmmb-c-item-bg)); overflow: hidden; }
.mmmb-style-desk-ecom-grid .mmmb-item:hover { border-color: var(--mmmb-c-primary); box-shadow: 0 18px 36px rgba(15,23,42,.12); }
.mmmb-style-desk-ecom-grid .mmmb-item-media { width: 82px; height: 82px; border-radius: 20px; box-shadow: none; background: var(--mmmb-c-hover-bg); }

/* Desktop 4: Minimal line */
.mmmb-items-desk-minimal-line { --mmmb-grid-default: 1fr; gap: 0; }
.mmmb-style-desk-minimal-line { background: #fff; border-radius: 18px; border: 1px solid var(--mmmb-c-border); padding: 10px 18px; }
.mmmb-style-desk-minimal-line .mmmb-tabs-nav { flex-direction: row; border: 0; border-bottom: 1px solid var(--mmmb-c-border); padding: 0 0 10px; }
.mmmb-style-desk-minimal-line .mmmb-tab-btn { background: transparent; border-radius: 0; border-bottom: 2px solid transparent; }
.mmmb-style-desk-minimal-line .mmmb-tab-btn.is-active { border-bottom-color: var(--mmmb-c-primary); }
.mmmb-style-desk-minimal-line .mmmb-section-header { background: transparent; border: 0; padding: 14px 0 6px; pointer-events: none; }
.mmmb-style-desk-minimal-line .mmmb-section-arrow,
.mmmb-style-desk-minimal-line .mmmb-section-count,
.mmmb-style-desk-minimal-line .mmmb-section-accent { display: none; }
.mmmb-style-desk-minimal-line .mmmb-item { flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--mmmb-c-border); border-radius: 0; }
.mmmb-style-desk-minimal-line .mmmb-item:hover { color: var(--mmmb-c-primary); transform: translateX(-4px); }
.mmmb-style-desk-minimal-line .mmmb-item-media { width: 36px; height: 36px; border-radius: 10px; box-shadow: none; background: transparent; }
.mmmb-style-desk-minimal-line .mmmb-item-text { text-align: right; align-items: flex-start; }

/* Desktop 5: Side panel mega */
.mmmb-style-desk-side-panel .mmmb-tabs-container { display: grid; grid-template-columns: 190px 1fr; gap: 18px; }
.mmmb-style-desk-side-panel .mmmb-tabs-nav { flex-direction: column; border-left: 1px solid var(--mmmb-c-border); border-bottom: 0; padding-left: 14px; }
.mmmb-style-desk-side-panel .mmmb-tab-btn { border-radius: 16px; justify-content: flex-start; background: transparent; }
.mmmb-style-desk-side-panel .mmmb-tab-btn.is-active { background: var(--mmmb-c-hover-bg); color: var(--mmmb-c-primary); }
.mmmb-items-desk-side-panel { --mmmb-grid-default: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mmmb-style-desk-side-panel .mmmb-section-header { background: transparent; border: 0; padding: 0 0 10px; pointer-events: none; }
.mmmb-style-desk-side-panel .mmmb-section-arrow,
.mmmb-style-desk-side-panel .mmmb-section-count,
.mmmb-style-desk-side-panel .mmmb-section-accent { display: none; }
.mmmb-style-desk-side-panel .mmmb-item { flex-direction: row; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--mmmb-c-item-bg); border: 1px solid transparent; }
.mmmb-style-desk-side-panel .mmmb-item:hover { border-color: var(--mmmb-c-border); background: var(--mmmb-c-hover-bg); }
.mmmb-style-desk-side-panel .mmmb-item-media { width: 42px; height: 42px; border-radius: 12px; box-shadow: none; }
.mmmb-style-desk-side-panel .mmmb-item-text { text-align: right; align-items: flex-start; }

/* Mobile 1: iOS bottom sheet */
.mmmb-items-mob-ios-sheet { --mmmb-grid-default: 1fr; gap: 8px; }
.mmmb-style-mob-ios-sheet .mmmb-drawer-panel,
.mmmb-style-mob-ios-sheet.mmmb-wrap { border-radius: 28px 28px 0 0; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.mmmb-style-mob-ios-sheet .mmmb-section-header { border-radius: 18px; background: rgba(255,255,255,.66); }
.mmmb-style-mob-ios-sheet .mmmb-item { flex-direction: row; align-items: center; gap: 12px; padding: 13px; border-radius: 18px; background: rgba(255,255,255,.72); }
.mmmb-style-mob-ios-sheet .mmmb-item-media { width: 42px; height: 42px; border-radius: 13px; box-shadow: none; }
.mmmb-style-mob-ios-sheet .mmmb-item-text { text-align: right; align-items: flex-start; }

/* Mobile 2: Material drawer */
.mmmb-items-mob-material-drawer { --mmmb-grid-default: 1fr; gap: 2px; }
.mmmb-style-mob-material-drawer .mmmb-section-header { border-radius: 12px; background: transparent; border: 0; }
.mmmb-style-mob-material-drawer .mmmb-section.is-open .mmmb-section-header { background: var(--mmmb-c-hover-bg); }
.mmmb-style-mob-material-drawer .mmmb-item { flex-direction: row; align-items: center; gap: 14px; padding: 12px 10px; border-radius: 14px; }
.mmmb-style-mob-material-drawer .mmmb-item:hover { background: var(--mmmb-c-hover-bg); }
.mmmb-style-mob-material-drawer .mmmb-item-media { width: 40px; height: 40px; border-radius: 50%; box-shadow: none; }
.mmmb-style-mob-material-drawer .mmmb-item-text { text-align: right; align-items: flex-start; }

/* Mobile 3: Rounded cards */
.mmmb-items-mob-rounded-cards { --mmmb-grid-default: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mmmb-style-mob-rounded-cards .mmmb-item { min-height: 128px; padding: 14px 10px; border-radius: 24px; background: var(--mmmb-c-item-bg); border: 1px solid var(--mmmb-c-border); box-shadow: 0 8px 22px rgba(15,23,42,.07); }
.mmmb-style-mob-rounded-cards .mmmb-item-media { width: 58px; height: 58px; border-radius: 20px; box-shadow: none; background: var(--mmmb-c-hover-bg); }
.mmmb-style-mob-rounded-cards .mmmb-section-header { border-radius: 18px; }

/* Mobile 4: Bubble menu */
.mmmb-items-mob-bubble-menu { --mmmb-grid-default: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mmmb-style-mob-bubble-menu .mmmb-item { background: transparent; padding: 6px; }
.mmmb-style-mob-bubble-menu .mmmb-item-media { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 12px 24px rgba(15,23,42,.13); background: var(--mmmb-c-primary); color: #fff; }
.mmmb-style-mob-bubble-menu .mmmb-item-icon { color: #fff; }
.mmmb-style-mob-bubble-menu .mmmb-item-title { font-size: var(--mmmb-title-size-m, 12px); }
.mmmb-style-mob-bubble-menu .mmmb-item-subtitle { display: none; }
.mmmb-style-mob-bubble-menu .mmmb-item:hover .mmmb-item-media { transform: translateY(-4px) scale(1.04); }
.mmmb-style-mob-bubble-menu .mmmb-section-header { border-radius: 18px; }

/* Mobile 5: Story navigation */
.mmmb-items-mob-story-nav { display: flex !important; grid-template-columns: none; overflow-x: auto; gap: 10px; padding: 8px 2px 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.mmmb-style-mob-story-nav .mmmb-section-header { display: none; }
.mmmb-style-mob-story-nav .mmmb-item { flex: 0 0 104px; height: 148px; position: relative; overflow: hidden; border-radius: 24px; background: var(--mmmb-c-primary); scroll-snap-align: start; justify-content: flex-end; padding: 10px; }
.mmmb-style-mob-story-nav .mmmb-item-media { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; opacity: .92; }
.mmmb-style-mob-story-nav .mmmb-item-text { position: relative; z-index: 2; width: 100%; color: #fff; text-align: right; align-items: flex-start; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.mmmb-style-mob-story-nav .mmmb-item-title { color: #fff; }
.mmmb-style-mob-story-nav .mmmb-item-subtitle { color: rgba(255,255,255,.82); }
.mmmb-style-mob-story-nav .mmmb-item:after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.62)); }

@media (max-width: 600px) {
	.mmmb-style-desk-side-panel .mmmb-tabs-container { grid-template-columns: 1fr; }
	.mmmb-style-desk-side-panel .mmmb-tabs-nav,
	.mmmb-style-desk-glass-mega .mmmb-tabs-nav,
	.mmmb-style-desk-apple-float .mmmb-tabs-nav,
	.mmmb-style-desk-ecom-grid .mmmb-tabs-nav,
	.mmmb-style-desk-minimal-line .mmmb-tabs-nav { overflow-x: auto; flex-wrap: nowrap; }
	.mmmb-items-mob-rounded-cards { --mmmb-grid-default: repeat(2, minmax(0, 1fr)); }
	.mmmb-items-mob-bubble-menu { --mmmb-grid-default: repeat(3, minmax(0, 1fr)); }
}

/* v3.0.18 — configurable tab icon position */
.mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-tab-btn.mmmb-tab-icon-after {
	flex-direction: row;
}
.mmmb-tab-btn.mmmb-tab-icon-after {
	flex-direction: row-reverse;
}
.mmmb-tab-btn.mmmb-tab-icon-above {
	flex-direction: column;
}
.mmmb-tab-btn.mmmb-tab-icon-below {
	flex-direction: column-reverse;
}
.mmmb-tab-btn.mmmb-tab-icon-hidden .mmmb-tab-icon {
	display: none;
}
.mmmb-tab-btn .mmmb-tab-icon.dashicons {
	width: auto;
	height: auto;
	font-size: 22px;
	line-height: 1;
}
.mmmb-style-mega .mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-style-mega .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-glass-mega .mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-style-desk-glass-mega .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-apple-float .mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-style-desk-apple-float .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-ecom-grid .mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-style-desk-ecom-grid .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-minimal-line .mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-style-desk-minimal-line .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-side-panel .mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-style-desk-side-panel .mmmb-tab-btn.mmmb-tab-icon-after {
	flex-direction: row;
}
.mmmb-style-mega .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-glass-mega .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-apple-float .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-ecom-grid .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-minimal-line .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-side-panel .mmmb-tab-btn.mmmb-tab-icon-after {
	flex-direction: row-reverse;
}
.mmmb-style-mega .mmmb-tab-btn.mmmb-tab-icon-above,
.mmmb-style-desk-glass-mega .mmmb-tab-btn.mmmb-tab-icon-above,
.mmmb-style-desk-apple-float .mmmb-tab-btn.mmmb-tab-icon-above,
.mmmb-style-desk-ecom-grid .mmmb-tab-btn.mmmb-tab-icon-above,
.mmmb-style-desk-minimal-line .mmmb-tab-btn.mmmb-tab-icon-above,
.mmmb-style-desk-side-panel .mmmb-tab-btn.mmmb-tab-icon-above {
	flex-direction: column;
}
.mmmb-style-mega .mmmb-tab-btn.mmmb-tab-icon-below,
.mmmb-style-desk-glass-mega .mmmb-tab-btn.mmmb-tab-icon-below,
.mmmb-style-desk-apple-float .mmmb-tab-btn.mmmb-tab-icon-below,
.mmmb-style-desk-ecom-grid .mmmb-tab-btn.mmmb-tab-icon-below,
.mmmb-style-desk-minimal-line .mmmb-tab-btn.mmmb-tab-icon-below,
.mmmb-style-desk-side-panel .mmmb-tab-btn.mmmb-tab-icon-below {
	flex-direction: column-reverse;
}

/* v3.0.20 — uploaded image icons for menu tabs */
.mmmb-tab-btn .mmmb-tab-icon img,
.mmmb-tab-icon.mmmb-tab-icon-image {
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: inline-block;
	vertical-align: middle;
	border-radius: 6px;
}


/* v3.0.21 — configurable tab icon size */
.mmmb-tab-btn .mmmb-tab-icon { width: var(--mmmb-tab-icon-size, 24px); height: var(--mmmb-tab-icon-size, 24px); font-size: var(--mmmb-tab-icon-size, 24px); line-height: 1; }
.mmmb-tab-btn .mmmb-tab-icon.dashicons { width: var(--mmmb-tab-icon-size, 24px); height: var(--mmmb-tab-icon-size, 24px); font-size: var(--mmmb-tab-icon-size, 24px); line-height: var(--mmmb-tab-icon-size, 24px); }
.mmmb-tab-btn .mmmb-tab-icon img,
.mmmb-tab-icon.mmmb-tab-icon-image img { width: var(--mmmb-tab-icon-size, 24px); height: var(--mmmb-tab-icon-size, 24px); }

/* v3.0.21 — final position override */
.mmmb-tab-btn.mmmb-tab-icon-before { flex-direction: row !important; }
.mmmb-tab-btn.mmmb-tab-icon-after { flex-direction: row-reverse !important; }
.mmmb-tab-btn.mmmb-tab-icon-above { flex-direction: column !important; }
.mmmb-tab-btn.mmmb-tab-icon-below { flex-direction: column-reverse !important; }
.mmmb-tab-btn.mmmb-tab-icon-hidden .mmmb-tab-icon { display: none !important; }

/* ==========================================================
 * v3.0.26 — RTL shop category hub
 *
 * A dedicated category-navigation template. The structural layout uses a
 * temporary LTR flex row only to keep the sidebar physically on the RIGHT;
 * every visual child is explicitly reset to RTL, including text and icons.
 * ========================================================== */
.mmmb-trigger-rtl-category-hub {
	direction: rtl;
	flex-direction: row;
}
.mmmb-trigger-rtl-category-hub .mmmb-trigger-icon { order: 1; }
.mmmb-trigger-rtl-category-hub .mmmb-trigger-label { order: 2; }

.mmmb-wrap.mmmb-style-rtl-category-hub {
	background: var(--mmmb-c-bg) !important;
	border: 1px solid var(--mmmb-c-border);
	border-radius: 24px;
	box-shadow: 0 20px 54px rgba(15,23,42,.12);
	max-width: 1120px;
	overflow: hidden;
	padding: 0;
}
.mmmb-drawer.mmmb-style-rtl-category-hub .mmmb-drawer-panel {
	width: min(1040px, 100vw);
	max-width: 100vw;
	background: var(--mmmb-c-bg);
}
.mmmb-drawer.mmmb-style-rtl-category-hub .mmmb-drawer-header {
	direction: rtl;
	padding: 16px 22px 16px 14px;
}
.mmmb-drawer.mmmb-style-rtl-category-hub .mmmb-drawer-body {
	overflow: hidden;
	padding: 0;
}

.mmmb-category-hub {
	direction: ltr;
	display: flex;
	min-height: 520px;
	width: 100%;
	background: var(--mmmb-c-bg);
}
.mmmb-wrap.mmmb-style-rtl-category-hub .mmmb-category-hub { min-height: 530px; }
.mmmb-drawer.mmmb-style-rtl-category-hub .mmmb-category-hub { height: 100%; }

.mmmb-category-sidebar {
	order: 2;
	flex: 0 0 252px;
	width: 252px;
	direction: rtl;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-left: 1px solid var(--mmmb-c-border);
	color: var(--mmmb-c-text);
	min-width: 0;
}
.mmmb-category-sidebar-head {
	border-bottom: 1px solid var(--mmmb-c-border);
	color: var(--mmmb-c-text);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.5;
	padding: 20px 20px 15px;
	text-align: right;
}
.mmmb-category-list {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	overflow-y: auto;
	padding: 10px;
	scrollbar-color: var(--mmmb-c-primary) transparent;
	scrollbar-width: thin;
}
.mmmb-category-list::-webkit-scrollbar { width: 5px; }
.mmmb-category-list::-webkit-scrollbar-thumb { background: var(--mmmb-c-primary); border-radius: 5px; }
.mmmb-category-tab {
	position: relative;
	direction: rtl;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 52px;
	gap: 11px;
	margin: 0;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	border-radius: 12px;
	color: var(--mmmb-c-text);
	cursor: pointer;
	font: inherit;
	font-size: var(--mmmb-tab-title-size);
	text-align: right;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.mmmb-category-tab:hover,
.mmmb-category-tab:focus-visible {
	background: var(--mmmb-c-hover-bg);
	color: var(--mmmb-c-primary);
	outline: 0;
}
.mmmb-category-tab:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mmmb-c-primary) 24%, transparent); }
.mmmb-category-tab.is-active {
	background: linear-gradient(90deg, rgba(255,255,255,0), var(--mmmb-c-hover-bg));
	color: var(--mmmb-c-primary);
	font-weight: 800;
}
.mmmb-category-tab.is-active::before {
	position: absolute;
	right: 0;
	top: 12px;
	bottom: 12px;
	width: 3px;
	background: var(--mmmb-c-primary);
	border-radius: 3px 0 0 3px;
	content: '';
}
.mmmb-category-tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: currentColor;
	flex: 0 0 28px;
}
.mmmb-category-tab-icon .mmmb-tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.mmmb-category-tab-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mmmb-category-tab-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--mmmb-c-subtitle);
	flex: 0 0 18px;
}
.mmmb-category-tab-arrow svg { display: block; width: 16px; height: 16px; }
.mmmb-category-tab.is-active .mmmb-category-tab-arrow { color: var(--mmmb-c-primary); }

.mmmb-category-search { display: none; }
.mmmb-category-no-results {
	margin: 10px 18px 18px;
	color: var(--mmmb-c-subtitle);
	font-size: 13px;
	text-align: right;
}

.mmmb-category-content {
	order: 1;
	direction: rtl;
	flex: 1 1 auto;
	min-width: 0;
	overflow-y: auto;
	background:
		radial-gradient(circle at 12% 8%, rgba(200,164,92,.13), transparent 22%),
		linear-gradient(180deg, #fffdf9 0%, #fff 44%);
	color: var(--mmmb-c-text);
	scrollbar-color: var(--mmmb-c-primary) transparent;
	scrollbar-width: thin;
}
.mmmb-category-content::-webkit-scrollbar { width: 6px; }
.mmmb-category-content::-webkit-scrollbar-thumb { background: var(--mmmb-c-primary); border-radius: 5px; }
.mmmb-category-pane { display: none; min-height: 100%; }
.mmmb-category-pane.is-active { display: block; animation: mmmb-category-pane-in .22s ease both; }
@keyframes mmmb-category-pane-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.mmmb-category-content-head {
	position: relative;
	min-height: 152px;
	margin: 0;
	padding: 33px 34px 28px;
	border-bottom: 1px solid rgba(230,230,230,.72);
	overflow: hidden;
}
.mmmb-category-content-head::after {
	position: absolute;
	left: 34px;
	top: 30px;
	width: 118px;
	height: 94px;
	border: 1px solid color-mix(in srgb, var(--mmmb-c-primary) 28%, transparent);
	border-radius: 48% 52% 44% 56%;
	box-shadow: 20px 14px 0 -8px color-mix(in srgb, var(--mmmb-c-primary) 10%, transparent);
	content: '';
	transform: rotate(-12deg);
}
.mmmb-category-content-head h2 {
	position: relative;
	z-index: 1;
	margin: 0 0 8px;
	color: var(--mmmb-c-text);
	font-size: clamp(20px, 2vw, 27px);
	font-weight: 800;
	line-height: 1.35;
	text-align: right;
}
.mmmb-category-content-head p {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--mmmb-c-subtitle);
	font-size: 14px;
	text-align: right;
}
.mmmb-category-mobile-back { display: none; }
.mmmb-category-section { padding: 0 34px 28px; }
.mmmb-category-section:first-of-type { padding-top: 28px; }
.mmmb-category-section h3 {
	margin: 0 0 13px;
	color: var(--mmmb-c-section-title);
	font-size: var(--mmmb-section-title-size);
	font-weight: var(--mmmb-section-title-weight);
	line-height: 1.5;
	text-align: right;
}
.mmmb-items-rtl-category-hub {
	--mmmb-grid-default: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, var(--mmmb-gap), 18px);
}
.mmmb-style-rtl-category-hub .mmmb-item {
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 170px;
	gap: 10px;
	overflow: hidden;
	padding: 14px;
	background: var(--mmmb-c-item-bg);
	border: 1px solid var(--mmmb-c-border);
	border-radius: max(14px, var(--mmmb-card-radius));
	box-shadow: 0 4px 16px rgba(15,23,42,.045);
	text-align: right;
}
.mmmb-style-rtl-category-hub .mmmb-item:hover {
	border-color: var(--mmmb-c-primary);
	box-shadow: 0 16px 31px rgba(15,23,42,.12);
	transform: translateY(-3px);
}
.mmmb-style-rtl-category-hub .mmmb-item-media {
	width: 100%;
	height: 106px;
	background: linear-gradient(145deg, rgba(200,164,92,.12), rgba(255,255,255,.55));
	border: 0;
	border-radius: 14px;
	box-shadow: none;
}
.mmmb-style-rtl-category-hub .mmmb-item-media img { object-fit: contain; padding: 4px; }
.mmmb-style-rtl-category-hub .mmmb-item-icon { color: var(--mmmb-c-primary); font-size: 44px; line-height: 1; }
.mmmb-style-rtl-category-hub .mmmb-item-text { align-items: flex-start; text-align: right; }
.mmmb-style-rtl-category-hub .mmmb-item-title { text-align: right; }
.mmmb-style-rtl-category-hub .mmmb-item-badge { right: 10px; left: auto; }
.mmmb-category-empty {
	margin: 28px 34px;
	padding: 20px;
	background: rgba(255,255,255,.7);
	border: 1px dashed var(--mmmb-c-border);
	border-radius: 14px;
	color: var(--mmmb-c-subtitle);
	font-size: 14px;
	text-align: right;
}

@media (max-width: 720px) {
	.mmmb-drawer.mmmb-style-rtl-category-hub .mmmb-drawer-panel {
		width: 100%;
		max-width: 100%;
	}
	.mmmb-drawer.mmmb-style-rtl-category-hub .mmmb-drawer-body { overflow-y: auto; }
	.mmmb-drawer.mmmb-style-rtl-category-hub .mmmb-category-hub { height: auto; min-height: 100%; }
	.mmmb-wrap.mmmb-style-rtl-category-hub { border-radius: 18px; }
	.mmmb-category-hub { display: block; min-height: 0; direction: rtl; }
	.mmmb-category-sidebar {
		width: 100%;
		border: 0;
		background: var(--mmmb-c-bg);
	}
	.mmmb-drawer.mmmb-style-rtl-category-hub .mmmb-category-sidebar-head { display: none; }
	.mmmb-category-sidebar-head { padding: 18px 18px 12px; }
	.mmmb-category-search {
		position: relative;
		display: block;
		margin: 0;
		padding: 12px 16px;
		border-bottom: 1px solid var(--mmmb-c-border);
	}
	.mmmb-category-search svg {
		position: absolute;
		right: 28px;
		top: 50%;
		z-index: 1;
		width: 20px;
		height: 20px;
		color: var(--mmmb-c-text);
		pointer-events: none;
		transform: translateY(-50%);
	}
	.mmmb-category-search input {
		width: 100%;
		height: 48px;
		padding: 0 44px 0 14px;
		background: #fff;
		border: 1px solid var(--mmmb-c-border);
		border-radius: 12px;
		box-shadow: none;
		color: var(--mmmb-c-text);
		font: inherit;
		font-size: 14px;
		outline: 0;
		text-align: right;
	}
	.mmmb-category-search input:focus { border-color: var(--mmmb-c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mmmb-c-primary) 18%, transparent); }
	.mmmb-category-list { gap: 0; max-height: none; overflow: visible; padding: 0; }
	.mmmb-category-tab {
		min-height: 59px;
		padding: 12px 18px;
		border-bottom: 1px solid var(--mmmb-c-border);
		border-radius: 0;
	}
	.mmmb-category-tab.is-active { background: var(--mmmb-c-hover-bg); }
	.mmmb-category-tab.is-active::before { top: 14px; bottom: 14px; }
	.mmmb-category-no-results { margin: 16px 18px; }
	.mmmb-category-content { display: none; min-height: 100%; overflow: visible; background: var(--mmmb-c-bg); }
	.mmmb-category-hub.is-showing-category .mmmb-category-sidebar { display: none; }
	.mmmb-category-hub.is-showing-category .mmmb-category-content { display: block; }
	.mmmb-category-mobile-back {
		direction: rtl;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: 14px 16px 2px;
		padding: 8px 0;
		background: transparent;
		border: 0;
		color: var(--mmmb-c-primary);
		cursor: pointer;
		font: inherit;
		font-size: 13px;
		font-weight: 700;
	}
	.mmmb-category-mobile-back span { display: inline-flex; width: 18px; height: 18px; }
	.mmmb-category-mobile-back svg { width: 18px; height: 18px; }
	.mmmb-category-content-head { min-height: auto; padding: 12px 18px 18px; background: transparent; }
	.mmmb-category-content-head::after { display: none; }
	.mmmb-category-content-head h2 { margin-bottom: 5px; font-size: 21px; }
	.mmmb-category-content-head p { font-size: 13px; }
	.mmmb-category-section { padding: 0 16px 20px; }
	.mmmb-category-section:first-of-type { padding-top: 20px; }
	.mmmb-category-section h3 { margin-bottom: 10px; }
	.mmmb-items-rtl-category-hub { --mmmb-grid-default: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mmmb-style-rtl-category-hub .mmmb-item { min-height: 142px; padding: 10px; border-radius: 14px; }
	.mmmb-style-rtl-category-hub .mmmb-item-media { height: 78px; border-radius: 11px; }
	.mmmb-style-rtl-category-hub .mmmb-item-icon { font-size: 34px; }
	.mmmb-style-rtl-category-hub .mmmb-item-title { font-size: var(--mmmb-title-size-m, 13px); }
	.mmmb-category-empty { margin: 20px 16px; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.mmmb-category-pane.is-active { animation: none; }
	.mmmb-category-tab,
	.mmmb-style-rtl-category-hub .mmmb-item { transition: none; }
}

/* v3.0.22 — fix tab icon placement: after text and below text */
.mmmb-tab-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--mmmb-tab-icon-gap, 8px) !important;
}
.mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-mega .mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-style-mega .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-glass-mega .mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-style-desk-glass-mega .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-apple-float .mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-style-desk-apple-float .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-ecom-grid .mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-style-desk-ecom-grid .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-minimal-line .mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-style-desk-minimal-line .mmmb-tab-btn.mmmb-tab-icon-after,
.mmmb-style-desk-side-panel .mmmb-tab-btn.mmmb-tab-icon-before,
.mmmb-style-desk-side-panel .mmmb-tab-btn.mmmb-tab-icon-after {
	flex-direction: row !important;
}
.mmmb-tab-btn.mmmb-tab-icon-above,
.mmmb-tab-btn.mmmb-tab-icon-below,
.mmmb-style-mega .mmmb-tab-btn.mmmb-tab-icon-above,
.mmmb-style-mega .mmmb-tab-btn.mmmb-tab-icon-below,
.mmmb-style-desk-glass-mega .mmmb-tab-btn.mmmb-tab-icon-above,
.mmmb-style-desk-glass-mega .mmmb-tab-btn.mmmb-tab-icon-below,
.mmmb-style-desk-apple-float .mmmb-tab-btn.mmmb-tab-icon-above,
.mmmb-style-desk-apple-float .mmmb-tab-btn.mmmb-tab-icon-below,
.mmmb-style-desk-ecom-grid .mmmb-tab-btn.mmmb-tab-icon-above,
.mmmb-style-desk-ecom-grid .mmmb-tab-btn.mmmb-tab-icon-below,
.mmmb-style-desk-minimal-line .mmmb-tab-btn.mmmb-tab-icon-above,
.mmmb-style-desk-minimal-line .mmmb-tab-btn.mmmb-tab-icon-below,
.mmmb-style-desk-side-panel .mmmb-tab-btn.mmmb-tab-icon-above,
.mmmb-style-desk-side-panel .mmmb-tab-btn.mmmb-tab-icon-below {
	flex-direction: column !important;
}
.mmmb-tab-btn.mmmb-tab-icon-before .mmmb-tab-icon,
.mmmb-tab-btn.mmmb-tab-icon-above .mmmb-tab-icon { order: 1 !important; }
.mmmb-tab-btn.mmmb-tab-icon-before .mmmb-tab-title,
.mmmb-tab-btn.mmmb-tab-icon-above .mmmb-tab-title { order: 2 !important; }
.mmmb-tab-btn.mmmb-tab-icon-after .mmmb-tab-title,
.mmmb-tab-btn.mmmb-tab-icon-below .mmmb-tab-title { order: 1 !important; }
.mmmb-tab-btn.mmmb-tab-icon-after .mmmb-tab-icon,
.mmmb-tab-btn.mmmb-tab-icon-below .mmmb-tab-icon { order: 2 !important; }
.mmmb-tab-btn.mmmb-tab-icon-hidden .mmmb-tab-icon { display: none !important; }

/* v3.0.27 — bundled business SVG icons inherit the active menu color. */
.mmmb-business-svg {
	display: inline-block;
	width: var(--mmmb-tab-icon-size, 24px);
	height: var(--mmmb-tab-icon-size, 24px);
	color: currentColor;
	fill: none;
	stroke: currentColor;
	vertical-align: middle;
	flex: 0 0 auto;
}
.mmmb-category-tab-icon .mmmb-business-svg { display: block; }

/* ==========================================================
 * v3.2.0 — Colored business SVG pack
 *
 * The sprite symbols are pulled in through <use>, so their shadow tree
 * can only be reached by *inherited* properties. Two are used:
 *
 *   color                -> consumed by stroke="currentColor"
 *   --mmmb-icon-accent   -> consumed by fill="var(--mmmb-icon-accent, currentColor)"
 *
 * The renderer sets both inline per icon (from MMMB_Icons), so the rules
 * here only need to establish the fallback chain and the sizing box. When
 * a menu is in monochrome mode the renderer emits neither variable and
 * everything below resolves to the pre-3.2.0 currentColor behaviour.
 * ========================================================== */
.mmmb-business-svg {
	color: var(--mmmb-icon-color, currentColor);
	flex: 0 0 auto;
}

/* Colored icons must not be repainted by the force-text-color cascade or by
 * a template's own hover/active color. Those rules legitimately own the
 * *text* color of an item, but an icon in brand colors is not text. */
.mmmb-force-text .mmmb-business-svg.is-colored,
.mmmb-business-svg.is-colored {
	color: var(--mmmb-icon-color, currentColor);
}

/* Item icons: the sprite fills the box that .mmmb-item-icon already sizes,
 * instead of carrying the fixed tab-icon dimensions. */
.mmmb-item-icon-svg {
	width: 1em;
	height: 1em;
	color: var(--mmmb-icon-color, currentColor);
	vertical-align: middle;
}

/* Uploaded/custom item icons use the same visual box as built-in SVGs. */
.mmmb-item-icon-image {
	display: block;
	width: 1em;
	height: 1em;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.mmmb-item-icon-dashicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
}

/* ==========================================================
 * v3.2.0 — Desktop shop mega menu (style = desk-shop-mega)
 *
 * Layout mirrors a Persian marketplace header:
 *   .mmmb-shop-mega-bar    -> horizontal chip row (tabs)
 *   .mmmb-shop-mega-panel  -> RTL grid: link columns first (right),
 *                             promo card last (left)
 * ========================================================== */
.mmmb-style-desk-shop-mega {
	direction: rtl;
	background: var(--mmmb-c-bg, #fff);
	border-radius: var(--mmmb-card-radius, 16px);
}

.mmmb-shop-mega {
	position: relative;
	direction: rtl;
	font-family: var(--mmmb-font, inherit);
}

/* ---- Chip bar ---- */
.mmmb-shop-mega-bar {
	display: flex;
	align-items: stretch;
	gap: 4px;
	padding: 6px;
	overflow-x: auto;
	scrollbar-width: thin;
	background: var(--mmmb-c-bg, #fff);
	border-radius: 14px;
}

.mmmb-shop-mega-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 10px 14px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--mmmb-c-text, #2b2b2b);
	font: inherit;
	font-size: var(--mmmb-tab-title-size, 13px);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--mmmb-transition, 250ms) ease, color var(--mmmb-transition, 250ms) ease;
}

.mmmb-shop-mega-chip:hover {
	background: var(--mmmb-c-hover-bg, rgba(0, 0, 0, .04));
}

.mmmb-shop-mega-chip.is-active {
	background: var(--mmmb-c-primary, #7c3aed);
	color: #fff;
}

/* The active chip is a solid brand-colored pill, so a brand-colored icon
 * sitting on it would fight the background. Force it to the chip's own
 * text color for that one state only. */
.mmmb-shop-mega-chip.is-active .mmmb-business-svg {
	color: currentColor;
	--mmmb-icon-accent: currentColor;
}

.mmmb-shop-mega-chip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Icon above the label (the seeded default) — the chip becomes a tile. */
.mmmb-shop-mega-chip:has(.mmmb-shop-mega-chip-icon) {
	align-items: center;
}

/* ---- Panels ---- */
.mmmb-shop-mega-panels {
	position: relative;
}

.mmmb-shop-mega-panel {
	display: none;
	grid-template-columns: 1fr;
	gap: 18px;
	padding: 20px;
	margin-top: 8px;
	background: var(--mmmb-c-bg, #fff);
	border: 1px solid var(--mmmb-c-border, #e6e6e6);
	border-radius: 18px;
}

.mmmb-shop-mega-panel.is-active {
	display: grid;
}

.mmmb-shop-mega-panel.has-promo {
	/* Columns take the free space on the right; the promo keeps a fixed
	 * rail on the left (RTL: last in DOM = leftmost). */
	grid-template-columns: minmax(0, 1fr) 240px;
}

/* Dropdown variant: the panel floats over the page instead of pushing it
 * down. Used when the menu lives in a site header. It stays hidden until
 * JS adds .is-open to the wrapper (hover or click), regardless of which
 * chip is marked active — the active chip only decides *which* panel would
 * show, not *whether* the group is open. */
.mmmb-shop-mega--dropdown .mmmb-shop-mega-panel {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 60;
	box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
}

.mmmb-shop-mega--dropdown:not(.is-open) .mmmb-shop-mega-panel {
	display: none;
}

.mmmb-shop-mega--dropdown.is-open .mmmb-shop-mega-panel.is-active {
	display: grid;
}

/* ---- Columns ---- */
.mmmb-shop-mega-cols {
	display: grid;
	grid-template-columns: var(--mmmb-grid-d, repeat(auto-fit, minmax(var(--mmmb-shop-col-min, 170px), 1fr)));
	gap: var(--mmmb-gap, 14px);
	align-items: start;
}

.mmmb-shop-mega-col {
	min-width: 0;
	/* In the RTL shop grid, columns are laid out from right to left. The
	 * separator therefore belongs on the inline-end (left) edge of every
	 * column except the final, left-most column. This keeps separators
	 * correct when columns are added, removed or reordered dynamically. */
	padding-inline-end: var(--mmmb-gap, 14px);
}

.mmmb-shop-mega-col:not(:last-child) {
	border-inline-end: 1px solid var(--mmmb-c-border, #e6e6e6);
}

.mmmb-shop-mega-col:last-child {
	padding-inline-end: 0;
}

.mmmb-shop-mega-col-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	color: var(--mmmb-c-section-title, #1f2937);
	font-size: var(--mmmb-section-title-size, 14px);
	font-weight: var(--mmmb-section-title-weight, 700);
	line-height: 1.5;
}

.mmmb-shop-mega-col-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mmmb-shop-mega-col-icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-inline-start: auto;
}

.mmmb-shop-mega-links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mmmb-shop-mega-link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	color: var(--mmmb-c-text, #2b2b2b);
	font-size: var(--mmmb-title-size, 14px);
	line-height: 1.7;
	text-decoration: none;
	transition: color var(--mmmb-transition, 250ms) ease, transform var(--mmmb-transition, 250ms) ease;
}

.mmmb-shop-mega-link:hover,
.mmmb-shop-mega-link:focus-visible {
	color: var(--mmmb-c-primary, #7c3aed);
	/* Nudge toward the reading direction's start edge. */
	transform: translateX(-3px);
}

.mmmb-shop-mega-link-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	font-size: 18px;
	line-height: 1;
	color: var(--mmmb-c-primary, #7c3aed);
}

.mmmb-shop-mega-link-icon .mmmb-business-svg,
.mmmb-shop-mega-link-icon .mmmb-item-icon-image,
.mmmb-shop-mega-link-icon .mmmb-item-icon-dashicon {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	max-height: 100%;
	font-size: inherit !important;
}

.mmmb-shop-mega-link-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mmmb-shop-mega-link-badge {
	position: static;
	flex: 0 0 auto;
}

/* ---- Promo card ---- */
.mmmb-shop-mega-promo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 20px 16px;
	border-radius: 18px;
	background: var(--mmmb-c-hover-bg, #f5f3ff);
	color: var(--mmmb-c-text, #2b2b2b);
	text-align: center;
	text-decoration: none;
}

.mmmb-shop-mega-promo-media {
	display: block;
	width: 100%;
	margin-bottom: 6px;
}

.mmmb-shop-mega-promo-media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 150px;
	object-fit: contain;
	margin: 0 auto;
}

.mmmb-shop-mega-promo-title {
	font-size: calc(var(--mmmb-title-size, 14px) + 2px);
	font-weight: 700;
	line-height: 1.6;
}

.mmmb-shop-mega-promo-subtitle {
	font-size: var(--mmmb-subtitle-size, 12px);
	color: var(--mmmb-c-subtitle, #6b7280);
	line-height: 1.6;
}

.mmmb-shop-mega-promo-cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 10px;
	padding: 9px 18px;
	border-radius: 10px;
	background: var(--mmmb-c-primary, #7c3aed);
	color: #fff;
	font-size: calc(var(--mmmb-title-size, 14px) - 1px);
	font-weight: 600;
	transition: filter var(--mmmb-transition, 250ms) ease;
}

a.mmmb-shop-mega-promo:hover .mmmb-shop-mega-promo-cta {
	filter: brightness(1.1);
}

.mmmb-shop-mega-empty {
	margin: 0;
	padding: 24px 8px;
	color: var(--mmmb-c-subtitle, #9ca3af);
	font-size: 13px;
	text-align: center;
}

/* ---- Narrow viewports ----
 * The chip row keeps scrolling horizontally (that is the point of chips),
 * the panel collapses to a single column and the promo drops below the
 * links instead of squeezing them into an unreadable rail. */
@media (max-width: 900px) {
	.mmmb-shop-mega-panel,
	.mmmb-shop-mega-panel.has-promo {
		grid-template-columns: 1fr;
	}

	.mmmb-shop-mega-cols {
		grid-template-columns: var(--mmmb-grid-m, repeat(auto-fit, minmax(150px, 1fr)));
	}

	.mmmb-shop-mega-col {
		border-inline-start: 0;
		border-inline-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;
	}

	/* A floating panel has nowhere to float on a phone. */
	.mmmb-shop-mega--dropdown .mmmb-shop-mega-panel {
		position: static;
		box-shadow: none;
	}
}

/* ==========================================================
 * v3.3.4 — Header-anchored full-width professional mega menu
 *
 * This wrapper is used only by the `desk-shop-mega` style when it is
 * opened from a category button in the site header.  It intentionally is
 * not a side drawer: JavaScript measures the clicked button and sets
 * --mmmb-mega-top, while this panel always occupies the complete viewport
 * width directly below that point.
 * ========================================================== */
.mmmb-mega-dropdown.mmmb-style-desk-shop-mega {
	--mmmb-mega-top: 0px;
	--mmmb-mega-gap: 12px;
	position: fixed;
	inset: 0;
	z-index: 9999999;
	display: block;
	background: transparent;
	border-radius: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, visibility .18s ease;
}

.mmmb-mega-dropdown.mmmb-style-desk-shop-mega.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* The transparent layer makes a click outside the panel close it without
 * dimming the site or creating the empty grey side area of a drawer. */
.mmmb-mega-dropdown-backdrop {
	position: absolute;
	inset: 0;
	background: transparent;
}

.mmmb-mega-dropdown-panel {
	position: absolute;
	/* Keep a modest breathing room below the category button, so the
	 * header remains clearly visible above the card. */
	top: calc(var(--mmmb-mega-top, 0px) + var(--mmmb-mega-gap, 12px));
	left: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	/* Natural height makes the card stop after its final item. The max is
	 * only a safety limit: a long menu reaches the bottom of the viewport
	 * and then scrolls inside this panel, not behind it. */
	height: auto;
	min-height: 0;
	max-height: calc(100vh - var(--mmmb-mega-top, 0px) - var(--mmmb-mega-gap, 12px));
	max-height: calc(100dvh - var(--mmmb-mega-top, 0px) - var(--mmmb-mega-gap, 12px));
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	background: var(--mmmb-c-bg, #fff);
	border-top: 1px solid var(--mmmb-c-border, #e6e6e6);
	border-bottom: 1px solid var(--mmmb-c-border, #e6e6e6);
	box-shadow: 0 22px 48px rgba(15, 23, 42, .18);
	transform: translateY(-8px);
	opacity: 0;
	transition: transform .2s ease, opacity .18s ease;
}

.mmmb-mega-dropdown.is-open .mmmb-mega-dropdown-panel {
	transform: translateY(0);
	opacity: 1;
}

.mmmb-mega-dropdown-content {
	width: 100%;
	box-sizing: border-box;
	padding: 12px clamp(16px, 4vw, 64px) 20px;
}

.mmmb-mega-dropdown-content > .mmmb-shop-mega {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

/* Reserve a clean place for the close button without shrinking the menu. */
.mmmb-mega-dropdown .mmmb-shop-mega-bar {
	padding-inline-start: 52px;
}

.mmmb-mega-dropdown .mmmb-shop-mega-panel {
	margin-top: 10px;
}

.mmmb-mega-dropdown-close {
	position: absolute;
	top: 22px;
	left: clamp(16px, 4vw, 64px);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--mmmb-c-border, #e6e6e6);
	border-radius: 9px;
	background: var(--mmmb-c-bg, #fff);
	color: var(--mmmb-c-text, #2b2b2b);
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(15, 23, 42, .10);
	transition: color var(--mmmb-transition, 250ms) ease, background var(--mmmb-transition, 250ms) ease, transform var(--mmmb-transition, 250ms) ease;
}

.mmmb-mega-dropdown-close:hover,
.mmmb-mega-dropdown-close:focus-visible {
	background: var(--mmmb-c-hover-bg, #f5f3ff);
	color: var(--mmmb-c-primary, #7c3aed);
	transform: translateY(-1px);
}

@media (max-width: 900px) {
	.mmmb-mega-dropdown.mmmb-style-desk-shop-mega {
		--mmmb-mega-gap: 8px;
	}

	.mmmb-mega-dropdown-content {
		padding: 10px 12px 18px;
	}

	.mmmb-mega-dropdown .mmmb-shop-mega-bar {
		padding-inline-start: 48px;
	}

	.mmmb-mega-dropdown-close {
		top: 18px;
		left: 16px;
	}
}

/* ==========================================================
 * v3.6.0 — Three-level nested item navigation
 * ========================================================== */
.mmmb-menu-node,
.mmmb-shop-mega-node {
	position: relative;
	min-width: 0;
}
.mmmb-menu-node-row,
.mmmb-shop-mega-node-row {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}
.mmmb-menu-node-row > .mmmb-item,
.mmmb-shop-mega-node-row > .mmmb-shop-mega-link {
	flex: 1 1 auto;
	min-width: 0;
}
/* Preserve the original root-item geometry now that each item is wrapped in a hierarchy node. */
.mmmb-items-inline > .mmmb-menu-node { flex: 0 0 auto; }
.mmmb-items-mob-story-nav > .mmmb-menu-node {
	flex: 0 0 104px;
	height: 148px;
	scroll-snap-align: start;
}
.mmmb-items-mob-story-nav > .mmmb-menu-node > .mmmb-menu-node-row,
.mmmb-items-mob-story-nav > .mmmb-menu-node > .mmmb-menu-node-row > .mmmb-item {
	width: 100%;
	height: 100%;
}
/* The legacy :last-child selector now sees the anchor inside every row.
 * Re-apply list separators against the actual root hierarchy nodes instead. */
.mmmb-items-list > .mmmb-menu-node > .mmmb-menu-node-row > .mmmb-item {
	border-bottom: 1px solid var(--mmmb-c-border);
}
.mmmb-items-list > .mmmb-menu-node:last-child > .mmmb-menu-node-row > .mmmb-item {
	border-bottom: 0;
}
.mmmb-submenu-toggle {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	color: var(--mmmb-c-subtitle, #64748b);
	width: 28px;
	height: 28px;
	padding: 5px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	cursor: pointer;
	transition: background var(--mmmb-transition, 250ms) ease, color var(--mmmb-transition, 250ms) ease, transform var(--mmmb-transition, 250ms) ease;
	z-index: 4;
}
.mmmb-submenu-toggle:hover,
.mmmb-submenu-toggle:focus-visible {
	background: var(--mmmb-c-hover-bg, rgba(200,164,92,.1));
	color: var(--mmmb-c-primary, #c8a45c);
	outline: none;
}
.mmmb-submenu-toggle svg { width: 100%; height: 100%; display: block; transition: transform .2s ease; }
.mmmb-menu-node.is-open > .mmmb-menu-node-row > .mmmb-submenu-toggle svg,
.mmmb-shop-mega-node.is-open > .mmmb-shop-mega-node-row > .mmmb-submenu-toggle svg { transform: rotate(-90deg); }
.mmmb-submenu {
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--mmmb-c-bg, #fff);
	border: 1px solid var(--mmmb-c-border, #e5e7eb);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(15,23,42,.16);
}

@media (min-width: 721px) {
	.mmmb-section.is-open > .mmmb-section-body > .mmmb-section-body-inner,
	.mmmb-shop-mega-panel,
	.mmmb-shop-mega-cols,
	.mmmb-shop-mega-col { overflow: visible; }
	.mmmb-menu-node > .mmmb-submenu,
	.mmmb-shop-mega-node > .mmmb-submenu {
		position: absolute;
		top: -7px;
		right: calc(100% + 8px);
		left: auto;
		width: min(260px, 78vw);
		z-index: 120;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(8px) scale(.985);
		transform-origin: top right;
		transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
	}
	.mmmb-menu-node.is-flipped > .mmmb-submenu,
	.mmmb-shop-mega-node.is-flipped > .mmmb-submenu {
		right: auto;
		left: calc(100% + 8px);
		transform-origin: top left;
	}
	.mmmb-menu-node.is-open > .mmmb-submenu,
	.mmmb-shop-mega-node.is-open > .mmmb-submenu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(0) scale(1);
	}
	.mmmb-submenu .mmmb-menu-node-row > .mmmb-item {
		flex-direction: row;
		align-items: center;
		gap: 9px;
		padding: 8px 9px;
		border-radius: 10px;
		background: transparent;
		border: 0;
		height: auto;
		min-height: 40px;
		overflow: visible;
	}
	.mmmb-submenu .mmmb-item:hover,
	.mmmb-submenu .mmmb-item:focus-visible { background: var(--mmmb-c-hover-bg, rgba(200,164,92,.09)); box-shadow: none; transform: none; }
	.mmmb-submenu .mmmb-item-media { width: 26px !important; height: 26px !important; min-width: 26px; border-radius: 8px !important; box-shadow: none; }
	.mmmb-submenu .mmmb-item-text { align-items: flex-start; text-align: right; }
	.mmmb-submenu .mmmb-item-title { font-size: 13px; }
	.mmmb-submenu .mmmb-item-subtitle { font-size: 10px; }
	.mmmb-submenu .mmmb-menu-node + .mmmb-menu-node,
	.mmmb-shop-mega-submenu > .mmmb-shop-mega-node + .mmmb-shop-mega-node { margin-top: 2px; }
	.mmmb-items-carousel > .mmmb-menu-node { flex: 0 0 150px; scroll-snap-align: start; }
	.mmmb-items-masonry > .mmmb-menu-node { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
	.mmmb-style-masonry .mmmb-menu-node:nth-child(3n) > .mmmb-menu-node-row > .mmmb-item .mmmb-item-media { height: 140px; }
	.mmmb-style-masonry .mmmb-menu-node:nth-child(3n+1) > .mmmb-menu-node-row > .mmmb-item .mmmb-item-media { height: 180px; }
	.mmmb-style-masonry .mmmb-menu-node:nth-child(3n+2) > .mmmb-menu-node-row > .mmmb-item .mmmb-item-media { height: 100px; }
}

.mmmb-shop-mega-node-row { gap: 2px; }
.mmmb-shop-mega-submenu-toggle { width: 24px; height: 24px; flex-basis: 24px; padding: 4px; }
.mmmb-shop-mega-submenu {
	display: block;
	min-width: 220px;
}
.mmmb-shop-mega-submenu .mmmb-shop-mega-link { padding: 7px 6px; border-radius: 9px; }
.mmmb-shop-mega-submenu .mmmb-shop-mega-link:hover,
.mmmb-shop-mega-submenu .mmmb-shop-mega-link:focus-visible { background: var(--mmmb-c-hover-bg, rgba(200,164,92,.09)); transform: none; }

@media (max-width: 720px) {
	.mmmb-menu-node-row,
	.mmmb-shop-mega-node-row { width: 100%; }
	.mmmb-menu-node > .mmmb-submenu,
	.mmmb-shop-mega-node > .mmmb-submenu {
		display: block;
		position: static;
		width: auto;
		max-height: 0;
		margin: 0 12px 0 0;
		padding: 0 10px;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		border-radius: 10px;
		box-shadow: none;
		border-color: transparent;
		border-inline-start: 2px solid transparent;
		background: var(--mmmb-c-bg, #fff);
		transition: max-height .24s ease, opacity .18s ease, margin .24s ease, padding .24s ease, visibility .24s ease;
	}
	.mmmb-menu-node.is-open > .mmmb-submenu,
	.mmmb-shop-mega-node.is-open > .mmmb-submenu {
		max-height: 640px;
		margin: 4px 12px 6px 0;
		padding: 5px 10px 5px 5px;
		opacity: 1;
		visibility: visible;
		border-color: var(--mmmb-c-border, #e5e7eb);
		border-inline-start-color: var(--mmmb-c-primary, #c8a45c);
		background: color-mix(in srgb, var(--mmmb-c-bg, #fff) 94%, var(--mmmb-c-primary, #c8a45c));
	}
	.mmmb-menu-node.is-open > .mmmb-menu-node-row > .mmmb-submenu-toggle svg,
	.mmmb-shop-mega-node.is-open > .mmmb-shop-mega-node-row > .mmmb-submenu-toggle svg { transform: rotate(-90deg); }
	.mmmb-submenu .mmmb-item,
	.mmmb-shop-mega-submenu .mmmb-shop-mega-link {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		padding: 8px 6px;
		min-height: 38px;
		border-radius: 8px;
		background: transparent;
		border: 0;
		box-shadow: none;
	}
	.mmmb-submenu .mmmb-item-media { width: 24px !important; height: 24px !important; min-width: 24px; border-radius: 7px !important; box-shadow: none; }
	.mmmb-submenu .mmmb-item-text { align-items: flex-start; text-align: right; }
	.mmmb-submenu-toggle { width: 34px; height: 34px; flex-basis: 34px; }
	.mmmb-shop-mega-submenu { min-width: 0; }
}