/* =========================================================================
   Bricks WooCommerce Mega Menu
   Always-embedded mode: the menu renders inline at 100% width.
   Design tokens are exposed as CSS variables so they can be themed from
   the Bricks panel controls or overridden globally in your theme.
   ========================================================================= */

.bmm {
	/* ---- Tokens (can be overridden per-instance from Bricks controls) ---- */
	--bmm-text:        #1A1A1A;
	--bmm-muted:       #A8A8A8;
	--bmm-card-bg:     #F6F1E7;
	--bmm-card-radius: 18px;
	--bmm-gap:         12px;
	--bmm-pad:         28px;
	--bmm-sidebar-w:   240px;
	--bmm-ease:        cubic-bezier(0.22, 1, 0.36, 1);

	width: 100%;
	display: block;
	font-family: inherit;
	color: var(--bmm-text);
	line-height: 1.4;
}

/* ---------- Reset ---------- */
.bmm * { box-sizing: border-box; }
.bmm ul { list-style: none; margin: 0; padding: 0; }
.bmm a  { text-decoration: none; color: inherit; }
.bmm button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* =========================================================================
   PANEL (always visible, no floating / no trigger)
   ========================================================================= */
.bmm-panel {
	width: 100%;
	background: transparent;
	padding: var(--bmm-pad) 0;
}

/* =========================================================================
   LAYOUT (sidebar + content)
   ========================================================================= */
.bmm-layout {
	display: grid;
	grid-template-columns: var(--bmm-sidebar-w) 1fr;
	gap: 24px;
	align-items: start;
}

/* Flat tree: root children have no further sub-cats → full-width card grid */
.bmm-layout--flat {
	grid-template-columns: 1fr;
}

/* =========================================================================
   SIDEBAR (left column)
   ========================================================================= */
.bmm-sidebar {
	padding-top: 4px;
}
.bmm-sidebar__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bmm-sidebar__item {
	width: 100%;
}
.bmm-sidebar__link {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 4px;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--bmm-muted);
	text-align: left;
	transition: color 0.18s var(--bmm-ease);
	border-radius: 6px;
}
.bmm-sidebar__link:hover,
.bmm-sidebar__link:focus-visible {
	color: var(--bmm-text);
	outline: none;
}
.bmm-sidebar__link.is-active {
	color: var(--bmm-text);
	font-weight: 700;
}
.bmm-sidebar__chevron {
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.18s var(--bmm-ease), transform 0.18s var(--bmm-ease);
	flex-shrink: 0;
}
.bmm-sidebar__link.is-active .bmm-sidebar__chevron,
.bmm-sidebar__link:hover .bmm-sidebar__chevron {
	opacity: 1;
	transform: translateX(0);
}

/* =========================================================================
   CONTENT (right column with child grids)
   ========================================================================= */
.bmm-content {
	min-height: 1px;
	min-width: 0;
}
.bmm-pane {
	display: none;
	animation: bmm-fade 0.28s var(--bmm-ease);
}
.bmm-pane.is-active {
	display: block;
}
@keyframes bmm-fade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   GRID OF CHILD CATEGORY CARDS
   ========================================================================= */
.bmm-content,
.bmm-pane.is-active,
.bmm-grid {
	width: 100%;
}
.bmm-grid {
	--bmm-cols: 8;
	--bmm-card-min: 130px; /* each column is at least this wide → no compression */
	display: grid;
	box-sizing: border-box;
	/* Fixed number of EQUAL columns, each at least --bmm-card-min wide. Because
	   the panel is a shrink-wrapping dropdown, this forces it to expand to fit the
	   columns (instead of collapsing), and every column is the same width. Extra
	   items wrap to new rows. */
	grid-template-columns: repeat(var(--bmm-cols), minmax(var(--bmm-card-min), 1fr));
	gap: var(--bmm-gap);
}

@media (max-width: 1024px) { .bmm-grid { --bmm-cols: 5; } }
@media (max-width: 640px)  { .bmm-grid { --bmm-cols: 3; } }

/* =========================================================================
   CARD
   ========================================================================= */
.bmm-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 10px 16px;
	background: var(--bmm-card-bg);
	border-radius: var(--bmm-card-radius);
	transition: transform 0.25s var(--bmm-ease), box-shadow 0.25s var(--bmm-ease);
	text-align: center;
	height: 100%;
}
.bmm-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -16px rgba(20, 20, 20, 0.25);
}
.bmm-card__media {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.bmm-card__media img {
	max-width: 78%;
	max-height: 78%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 0.4s var(--bmm-ease);
}
.bmm-card:hover .bmm-card__media img {
	transform: scale(1.06);
}
.bmm-card__name {
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--bmm-text);
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =========================================================================
   EMPTY STATE
   ========================================================================= */
.bmm-empty {
	padding: 40px 12px;
	text-align: center;
	color: var(--bmm-muted);
}
.bmm-empty__link {
	display: inline-block;
	margin-top: 10px;
	color: var(--bmm-text);
	font-weight: 600;
	border-bottom: 1px solid currentColor;
}

/* =========================================================================
   PARENT-PANE LINK (mobile only — "< Category name" at top of child grid)
   ========================================================================= */
.bmm-pane__parent-link {
	display: none;
}

/* =========================================================================
   MOBILE BAR (back button, shown on mobile only)
   ========================================================================= */
.bmm-mobile-bar {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 0 0 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.bmm-mobile-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px 6px 4px;
	font-weight: 600;
	font-size: 0.95rem;
}

/* =========================================================================
   RESPONSIVE — MOBILE & TABLET (<= 900px)
   Drill-down: first screen shows parent list, tapping drills into children.
   ========================================================================= */
@media (max-width: 900px) {

	/* Override Bricks mega-menu wrapper inline min-width + container padding
	   so our menu stretches to full viewport width on mobile.
	   We target any Bricks wrapper that contains our element — including
	   theme-level sections added around the template. */
	.brx-megamenu:has([data-bmm]) {
		min-width: 100vw !important;
		width: 100vw !important;
		left: 0 !important;
		right: 0 !important;
		margin-left: 0 !important;
		padding-inline: 0 !important;
		box-sizing: border-box !important;
	}
	/* Reset every Bricks element wrapper inside, regardless of nesting depth */
	.brx-megamenu:has([data-bmm]) [class*="brxe-"] {
		max-width: 100% !important;
		width: 100% !important;
		padding-inline: 0 !important;
		margin-inline: 0 !important;
	}

	/* Force our root element to take full width no matter what wraps it */
	[data-bmm] {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.bmm-panel {
		padding: 0;
	}

	.bmm-mobile-bar {
		display: flex;
	}

	.bmm-layout {
		display: block;
	}

	.bmm-sidebar {
		width: 100%;
		display: block;
	}
	.bmm-sidebar__list {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
		gap: 2px;
	}
	.bmm-sidebar__item {
		display: block !important;
		width: 100% !important;
	}
	.bmm-sidebar__link {
		display: flex !important;
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 18px 8px;
		font-size: 1.15rem;
		font-weight: 500;
		color: var(--bmm-text);
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	}
	.bmm-sidebar__link.is-active {
		font-weight: 500;
	}
	.bmm-sidebar__chevron {
		opacity: 1;
		transform: none;
		width: 12px;
		height: 12px;
	}

	/* Content pane is hidden until user drills into children */
	.bmm-content {
		display: none;
	}

	/* Flat brand/category trees: cards are the only UI — always show them */
	.bmm--flat .bmm-content {
		display: block !important;
	}
	.bmm--flat .bmm-sidebar {
		display: none !important;
	}
	.bmm--flat .bmm-mobile-bar {
		display: none !important;
	}

	/* "< Parent name" link at top of child pane */
	.bmm-pane__parent-link {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 14px 8px;
		font-size: 1rem;
		font-weight: 600;
		color: var(--bmm-text);
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		margin-bottom: 16px;
	}

	/* Drill-down view switching */
	.bmm[data-mobile-view="children"] .bmm-sidebar  { display: none; }
	.bmm[data-mobile-view="children"] .bmm-content  { display: block; }
	.bmm[data-mobile-view="parents"]  .bmm-mobile-back { display: none; }

	.bmm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.bmm-card {
		padding: 14px 8px 12px;
	}
	.bmm-card__name {
		font-size: 0.88rem;
	}
}

@media (max-width: 480px) {
	.bmm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================================
   BRICKS MULTILEVEL MODE (mobile)
   Tap a parent category → child pane slides in from the right.
   Back button slides back to the parent list.
   Bricks' slide panel handles nav → template. We handle parent → children.
   ========================================================================= */
@media (max-width: 900px) {

	/* Keep the back bar so the back button works */
	.bmm--bricks-multilevel .bmm-mobile-bar {
		display: flex;
	}

	/* Clip overflow so the slide stays within the panel bounds */
	.bmm--bricks-multilevel .bmm-panel {
		overflow: hidden;
	}

	/* Ensure sidebar items are always full-width in multilevel mode too */
	.bmm--bricks-multilevel .bmm-sidebar {
		width: 100% !important;
		display: block !important;
	}
	.bmm--bricks-multilevel .bmm-sidebar__list {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
	}
	.bmm--bricks-multilevel .bmm-sidebar__item {
		display: block !important;
		width: 100% !important;
	}
	.bmm--bricks-multilevel .bmm-sidebar__link {
		display: flex !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Slide-in animation when drilling into children */
	.bmm--bricks-multilevel[data-mobile-view="children"] .bmm-content {
		animation: bmm-slide-in 0.28s var(--bmm-ease);
	}
	.bmm--bricks-multilevel .bmm-pane.is-active {
		animation: bmm-slide-in 0.28s var(--bmm-ease);
	}

	/* Child grid: 3 columns in multilevel mode (slightly more compact) */
	.bmm--bricks-multilevel .bmm-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}
}

@keyframes bmm-slide-in {
	from { transform: translateX(24px); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}

/* =========================================================================
   ACCESSIBILITY
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.bmm-pane,
	.bmm-card,
	.bmm-card__media img,
	.bmm-sidebar__chevron {
		transition: none !important;
		animation: none !important;
	}
}

.bmm-sidebar__link:focus-visible,
.bmm-card:focus-visible,
.bmm-mobile-back:focus-visible {
	outline: 2px solid var(--bmm-text);
	outline-offset: 2px;
	border-radius: 6px;
}