/* UN Megamenu — taxonomy-driven Elementor widget.
 *
 * Layout is driven entirely by CSS container queries on the menu's OWN width
 * (via the `.un-megamenu-shell` wrapper), never the viewport — and independently
 * of the widget's display_mode. Wherever The7 puts the menu it adapts:
 *   • wide container  (full-width "Shop" panel)        → everything expanded, multi-column
 *   • narrow container (off-canvas drawer: phone/tablet) → stacked tap-accordion
 * No hover anywhere — opening is click/tap only (see un-megamenu.js). */

.un-megamenu-shell {
	container-type: inline-size;
	container-name: un-mm;
	width: 100%;
}

.un-megamenu {
	--un-mm-panel-width: 280px;
	--un-mm-panel-radius: 6px;
	--un-mm-z-panel: 1000;
	/* Default = accordion (narrow-first). Flipped to 0 in the wide container query.
	   un-megamenu.js reads this to decide whether a phase click toggles or navigates. */
	--un-mm-accordion: 1;
	position: relative;
	width: 100%;
}

.un-megamenu ul,
.un-megamenu ol,
.un-megamenu li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.un-megamenu li::before,
.un-megamenu li::marker {
	content: none !important;
	display: none !important;
}

/* ----------------------------------------------------------------- */
/* Default layout = stacked tap-accordion (mode-agnostic).            */
/* Applies to every .un-megamenu until a wide container overrides it. */
/* ----------------------------------------------------------------- */

.un-megamenu__list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.un-megamenu__top {
	position: relative;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
}

.un-megamenu__top > a,
.un-megamenu__top > button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 6px;
	padding: 12px 8px;
	color: inherit;
	text-decoration: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	transition: color 120ms ease, background-color 120ms ease;
}

.un-megamenu__chevron {
	display: inline-block;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
	margin-top: -3px;
	transition: transform 160ms ease;
}

.un-megamenu__top.is-open > a .un-megamenu__chevron,
.un-megamenu__top.is-open > button .un-megamenu__chevron {
	transform: rotate( -135deg );
	margin-top: 3px;
}

/* Accordion panel: collapses smoothly via grid-template-rows 0fr → 1fr.
   The inner sublist carries the padding so a closed panel is truly 0-height. */
.un-megamenu__panel {
	position: static;
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	min-width: 0;
	transition: grid-template-rows 200ms ease;
}

.un-megamenu__top.is-open > .un-megamenu__panel {
	grid-template-rows: 1fr;
}

.un-megamenu__panel > .un-megamenu__sublist {
	min-height: 0;
	overflow: hidden;
}

.un-megamenu__sublist {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding: 2px 0 12px 16px;
}

.un-megamenu__sublist a {
	display: block;
	padding: 6px 0;
	color: inherit;
	text-decoration: none;
	transition: color 120ms ease;
}

.un-megamenu__sublist a:hover {
	text-decoration: underline;
}

.un-megamenu__view-all {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
}

.un-megamenu__view-all a {
	font-weight: 600;
}

/* ----------------------------------------------------------------- */
/* Wide container → "tout déplié": all sub-cats visible, multi-column. */
/* Mode-agnostic, so the desktop look is correct no matter which       */
/* instance The7 shows. The deliberate column bundling (Finition+Soin) */
/* only applies when the expanded renderer emitted .--col-start.       */
/* ----------------------------------------------------------------- */

@container un-mm (min-width: 641px) {
	.un-megamenu {
		--un-mm-accordion: 0;
	}

	.un-megamenu__list {
		display: block;
		column-count: var( --un-mm-expanded-cols, 6 );
		column-gap: 32px;
	}

	.un-megamenu__top {
		display: block;
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		margin-bottom: 28px;
		border-bottom: 0;
	}

	/* First item of each logical column starts a fresh column (expanded renderer
	   only). The :not(:first-child) guard prevents an empty leading column. */
	.un-megamenu--expanded .un-megamenu__top--col-start:not(:first-child) {
		break-before: column;
		-webkit-column-break-before: always;
	}

	.un-megamenu__top > a,
	.un-megamenu__top > button {
		display: block;
		width: auto;
		padding: 0 0 8px 0;
		font-weight: 600;
		border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
		white-space: normal;
	}

	.un-megamenu__chevron {
		display: none;
	}

	/* Panel is always-open inline content here.
	   `visibility: inherit` (not `visible`) is deliberate: if a parent hides the
	   menu (e.g. a collapsed The7 sub-nav) we must not override that and leave
	   invisible-but-clickable ghost links. */
	.un-megamenu__panel {
		display: block;
		grid-template-rows: none;
		overflow: visible;
		opacity: 1;
		visibility: inherit;
		transition: none;
	}

	.un-megamenu__sublist {
		padding: 16px;
		gap: 4px;
	}

	.un-megamenu__sublist a {
		padding: 4px 0;
		font-weight: 400;
	}

	.un-megamenu__view-all {
		margin-top: 8px;
		padding-top: 8px;
	}
}

/* Trim columns as the wide container narrows (still above the 641px accordion
   cutoff). Below 641 the layout becomes the stacked accordion. */
@container un-mm (min-width: 641px) and (max-width: 1100px) {
	.un-megamenu__list {
		column-count: min( 4, var( --un-mm-expanded-cols, 6 ) );
	}
}

@container un-mm (min-width: 641px) and (max-width: 820px) {
	.un-megamenu__list {
		column-count: 3;
	}
}

/* Editor preview: force panels hidden so they never ghost over the editor canvas. */
.un-megamenu.un-mm-editor-mode .un-megamenu__panel {
	display: none !important;
}