/**
 * Mega Menu Switcher element.
 *
 * Base (desktop) = two columns: a vertical nav of "cards" on the left, one
 * content pane on the right. The `.alm-ms-stacked` class is toggled by JS (via
 * matchMedia on the configurable breakpoint) to switch to the compact,
 * nav-on-top mobile layout. Style-tab controls override the Figma defaults set
 * here because Bricks scopes them to the element id (higher specificity).
 */

.alm-mega-switcher {
	--alm-ms-nav-bg: #f8f5f1;
	--alm-ms-card-bg: #f1ece3;
	--alm-ms-card-active-bg: #ddd1bb;
	--alm-ms-border: rgba(0, 0, 0, 0.08);
	--alm-ms-icon-box-bg: transparent;
	--alm-ms-content-bg: #ffffff;
	--alm-ms-nav-width: 320px;
	--alm-ms-nav-gap: 16px;
	--alm-ms-nav-padding: 16px;
	--alm-ms-card-radius: 4px;
	--alm-ms-card-padding: 16px;
	--alm-ms-pane-padding: 24px;
	--alm-ms-pane-gap: 40px;
	/* Item colours: set inline on a card + its pane when the item has its own colours.
	   Default cards darken on active/hover; items with an active colour keep their
	   background and get an inset border in that colour instead. */
	--alm-ms-item-bg: var(--alm-ms-card-bg);
	--alm-ms-item-bg-active: var(--alm-ms-card-active-bg);
	--alm-ms-item-accent: transparent;
	--alm-ms-accent-width: 3px;

	display: flex;
	align-items: stretch;
	width: 100%;
	border-bottom: 1px solid var(--alm-ms-border);
}

/* ---------------------------------------------------------------- Nav column */

.alm-mega-switcher__nav {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: var(--alm-ms-nav-gap);
	max-width: var(--alm-ms-nav-width);
	min-width: 0;
	padding: var(--alm-ms-nav-padding);
	background-color: var(--alm-ms-nav-bg);
	border-right: 1px solid var(--alm-ms-border);
}

.alm-mega-switcher__nav-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--alm-ms-nav-gap);
	width: 100%;
	aspect-ratio: 288 / 184;
	margin: 0;
	padding: var(--alm-ms-card-padding);
	background-color: var(--alm-ms-item-bg);
	border: 0;
	border-radius: var(--alm-ms-card-radius);
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		box-shadow 0.15s ease;
}

.alm-mega-switcher__nav-item:hover {
	background-color: var(--alm-ms-item-bg-active);
	box-shadow: inset 0 0 0 1px var(--alm-ms-item-accent);
}

.alm-mega-switcher__nav-item.is-active {
	background-color: var(--alm-ms-item-bg-active) !important;
	box-shadow: inset 0 0 0 var(--alm-ms-accent-width) var(--alm-ms-item-accent) !important;
}

.alm-mega-switcher__nav-item:focus-visible {
	outline: 2px solid #bda07a;
	outline-offset: 2px;
}

.alm-ms-nav-icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	background-color: var(--alm-ms-icon-box-bg);
	border-radius: 2px;
}

.alm-ms-nav-icon-box img,
.alm-ms-nav-icon-box svg {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.alm-ms-nav-icon-box i {
	font-size: 48px;
	line-height: 1;
}

.alm-ms-nav-label {
	font-size: 18px;
	font-weight: 900;
	line-height: 1.2;
	color: #000;
}

/* Link-only items: label + arrow on one row */
.alm-mega-switcher__nav-item--link {
	cursor: pointer;
}

.alm-ms-nav-label-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.alm-ms-nav-arrow {
	display: inline-flex;
	align-items: center;
	color: #000;
}

.alm-ms-nav-arrow svg {
	display: block;
}

/* ------------------------------------------------------------- Content panes */

.alm-mega-switcher__panels {
	flex: 1 0 0;
	min-width: 0;
	background-color: var(--alm-ms-content-bg);
}

.alm-switcher-pane {
	display: none;
	flex-direction: column;
	gap: var(--alm-ms-pane-gap);
	padding: var(--alm-ms-pane-padding);
}

.alm-switcher-pane.is-active {
	display: flex;
}

/* Link items carry a hidden, empty pane only to keep index alignment. */
.alm-switcher-pane--link {
	display: none !important;
}

/* Opt-in class for content inside a pane (e.g. titles): the item's background colour.
   The active colour is available as var(--alm-ms-item-accent), e.g. for a border. */
.alm-ms-item-bg {
	background-color: var(--alm-ms-item-bg);
}

/* -------------------------------------------------------------- Mobile stack */

.alm-mega-switcher.alm-ms-stacked {
	--alm-ms-accent-width: 2px;
	flex-direction: column;
}

.alm-mega-switcher.alm-ms-stacked .alm-mega-switcher__nav {
	flex-direction: row;
	flex-wrap: wrap;
	max-width: none;
	gap: 8px;
	border-right: 0;
	border-bottom: 1px solid var(--alm-ms-border);
}

/* Compact pill buttons: icon + label inline, no forced aspect ratio. */
.alm-mega-switcher.alm-ms-stacked .alm-mega-switcher__nav-item {
	flex: 0 1 auto;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: auto;
	aspect-ratio: auto;
	padding: 8px 12px;
	border-radius: 999px;
}

.alm-mega-switcher.alm-ms-stacked .alm-ms-nav-icon-box {
	width: 24px;
	height: 24px;
	padding: 2px;
	background-color: transparent;
	border-radius: 0;
}

.alm-mega-switcher.alm-ms-stacked .alm-ms-nav-icon-box img,
.alm-mega-switcher.alm-ms-stacked .alm-ms-nav-icon-box svg {
	width: 20px;
	height: 20px;
}

.alm-mega-switcher.alm-ms-stacked .alm-ms-nav-icon-box i {
	font-size: 18px;
}

.alm-mega-switcher.alm-ms-stacked .alm-ms-nav-label {
	font-size: 14px;
	white-space: nowrap;
}

.alm-mega-switcher.alm-ms-stacked .alm-ms-nav-label-row {
	width: auto;
}

/* Builder fallback: show the children placeholder so panes stay editable. */
.brx-nestable-children-placeholder {
	display: block;
}

/* -------------------------------------------------------- Builder preview */
/**
 * In the Bricks editor the panes are Vue-injected and never get `.is-active`,
 * so drive visibility off the current selection instead: Bricks marks the
 * selected canvas element with `.is-active-element`. Show only the pane that
 * IS the selected element or CONTAINS it (i.e. the item being edited), and fall
 * back to the first pane when nothing inside the switcher is selected.
 *
 * `.brx-body.iframe` wraps the page only inside the builder canvas, so none of
 * these rules affect the live frontend.
 */
.brx-body.iframe .alm-mega-switcher__panels {
	display: flex;
	flex-direction: column;
}

.brx-body.iframe .alm-switcher-pane {
	display: none !important;
}

.brx-body.iframe .alm-switcher-pane.is-active-element,
.brx-body.iframe .alm-switcher-pane:has(.is-active-element) {
	display: flex !important;
}

/* Nothing selected inside the switcher → preview the first (non-link) pane. */
.brx-body.iframe .alm-mega-switcher__panels:not(:has(.is-active-element))>.alm-switcher-pane:first-child:not(.alm-switcher-pane--link) {
	display: flex !important;
}

/* Link items never have a panel, even in the builder. */
.brx-body.iframe .alm-switcher-pane--link {
	display: none !important;
}

.brx-has-megamenu.open > .brx-submenu-toggle > button {
	transform: rotate(180deg);
}

@media (max-width: 991px) {
	.brx-submenu-toggle>*,
	.brx-nav-nested-items > li > a {
		padding: 16px !important;
		font-size: 16px !important;
	}

	.brxe-woocommerce-mini-cart .cart-detail {
		position: fixed;
		max-height: calc(100vh - 80px);
		left: 0 !important;
		right: 0 !important;
		top: 52px;
		width: 100%;
	}

	.brx-nav-nested-items > li {
		width: 100%;
	}
}