/**
 * BWOD Mega Meny — interiør-CSS.
 *
 * Rammen (bakgrunn, bredde, padding, skygge) settes i Beaver Builder på den
 * lagrede raden. Dette stilarket eier de tre panene.
 *
 * Merkevaretokens er hentet fra asbestutstyr.no sin faktiske profil. Ingen nye
 * farger innføres.
 */

.bwod-mm {
	--au-red: #c8131f;
	--au-ink: #212121;
	--au-body: #221122;
	--au-heading: #333333;
	--au-surface: #ffffff;
	--au-surface-2: #f2f2f2;
	--au-border: #e2e2e2;
	--au-radius: 2px;
	--au-font: "Poppins", sans-serif;

	font-family: var(--au-font);
	color: var(--au-body);
}

.bwod-mm *,
.bwod-mm *::before,
.bwod-mm *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Panelgrid */

.bwod-mm__paneler {
	display: grid;
	grid-template-columns: 300px 1fr;
	align-items: stretch;
	min-height: 320px;
}

/* --------------------------------------------------------- Pane 1: hovedkat */

.bwod-mm__hoved {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--au-surface-2);
}

.bwod-mm__hoved-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bwod-mm__hoved-lenke {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 10px 16px 10px 13px;
	/* --au-kat settes inline per kategori når «Farge per hovedkategori» er på.
	   Uten den faller streken tilbake på hovedfargen. */
	border-left: 3px solid var(--au-kat, var(--au-red));
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--au-ink);
	text-decoration: none;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.bwod-mm__hoved-navn {
	flex: 1 1 auto;
}

.bwod-mm__hoved-lenke:hover,
.bwod-mm__hoved-lenke:focus-visible {
	background: #e8e8e8;
	color: var(--au-ink);
}

.bwod-mm__hoved-lenke.is-aktiv {
	background: var(--au-surface);
	color: var(--au-ink);
}

.bwod-mm__chevron {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	opacity: 0.55;
}

/* Butikk-raden nederst. Leser som en kategori, men er en navigasjonshandling —
   derfor skilt med en topplinje og rød tekst i stedet for rød venstrestrek. */
.bwod-mm__hoved-item--butikk {
	margin-top: 8px;
	border-top: 1px solid var(--au-border);
}

.bwod-mm__hoved-lenke--butikk {
	border-left-color: transparent;
	color: var(--au-red);
}

.bwod-mm__hoved-lenke--butikk .bwod-mm__chevron {
	opacity: 1;
	color: var(--au-red);
}

.bwod-mm__hoved-lenke--butikk:hover,
.bwod-mm__hoved-lenke--butikk:focus-visible {
	background: #e8e8e8;
	color: var(--au-red);
	text-decoration: underline;
}

.bwod-mm__hoved-lenke.is-aktiv .bwod-mm__chevron {
	opacity: 1;
	color: var(--au-kat, var(--au-red));
}

/* --------------------------------------------- Pane 2 + 3: gren for aktiv kat */

.bwod-mm__gren {
	display: none;
	grid-template-columns: 340px minmax(0, 460px);
	gap: 32px;
	padding: 24px 28px;
	background: var(--au-surface);
}

.bwod-mm__gren.is-aktiv {
	display: grid;
}

.bwod-mm__gren[hidden] {
	display: none;
}

.bwod-mm__tittel {
	margin: 0 0 14px;
	font-family: var(--au-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--au-heading);
}

/* Pane 2 */

.bwod-mm__under-liste {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.bwod-mm__under-liste li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bwod-mm__under-lenke {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 8px 8px 8px 11px;
	border-left: 2px solid var(--au-kat, var(--au-red));
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--au-body);
	text-decoration: none;
	transition: background-color 150ms ease-out;
}

.bwod-mm__under-lenke span {
	flex: 1 1 auto;
}

.bwod-mm__under-lenke:hover,
.bwod-mm__under-lenke:focus-visible {
	background: var(--au-surface-2);
	/* Fargen må gjentas i hover-tilstanden. Utelates den, vinner temaets
	   a:hover-regel og teksten skifter farge uventet. */
	color: var(--au-body);
}

.bwod-mm__vis-alt {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	color: var(--au-red);
	text-decoration: underline;
}

/* Pane 3 */

.bwod-mm__prod-liste {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.bwod-mm__prod {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--au-border);
}

.bwod-mm__prod:last-child {
	border-bottom: 0;
}

.bwod-mm__prod-lenke {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 8px 4px;
	color: var(--au-body);
	text-decoration: none;
	transition: background-color 150ms ease-out;
}

.bwod-mm__prod-lenke:hover,
.bwod-mm__prod-lenke:focus-visible {
	background: var(--au-surface-2);
	color: var(--au-body);
}

.bwod-mm .bwod-mm__prod-bilde {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	max-width: 48px;
	object-fit: contain;
	border-radius: var(--au-radius);
	background: var(--au-surface-2);
}

.bwod-mm__prod-navn {
	flex: 1 1 auto;
	display: -webkit-box;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.bwod-mm__butikk {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	color: var(--au-red);
	text-decoration: underline;
}

/* ----------------------------------------------------------------- Merker */

/* Merke-grenen bruker full bredde i stedet for to-kolonners oppsettet, siden
   den ikke har underkategorier og produkter å skille. */
.bwod-mm__gren--merker {
	grid-template-columns: 1fr;
}

.bwod-mm__merke-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bwod-mm__merke-liste li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bwod-mm__merke {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 96px;
	padding: 12px 10px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-surface);
	color: var(--au-body);
	text-align: center;
	text-decoration: none;
	transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.bwod-mm__merke:hover,
.bwod-mm__merke:focus-visible {
	border-color: var(--au-kat, var(--au-red));
	background: var(--au-surface-2);
	color: var(--au-body);
}

/* Scopet med .bwod-mm foran med vilje. Beaver Builder setter
   `.fl-module img { max-width: 100% }` — én klasse + ett element (0,1,1) slår
   én klasse (0,1,0), så en usikret `.bwod-mm__merke-logo` taper og brede logoer
   blir bredere enn taket. Samme felle som temaets a:hover-farge. */
.bwod-mm .bwod-mm__merke-logo {
	display: block;
	width: auto;
	max-width: 96px;
	height: 48px;
	max-height: 48px;
	object-fit: contain;
}

/* Plassholder når merket ikke har logo: forbokstav i stedet for tom boks, som
   ville lest som et bilde som ikke lastet. Holder korthøyden lik logo-kortene. */
/* Må scopes like sterkt som base-regelen over, ellers vinner dens `width: auto`
   og sirkelen kollapser til en ellipse rundt bokstaven. */
.bwod-mm .bwod-mm__merke-logo--tom {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--au-surface-2);
	color: var(--au-heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}

.bwod-mm__merke-navn {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

/* ---------------------------------------------------------------- Banner */

/* Kolonne 4. Formatet er låst med aspect-ratio slik at et bilde med andre
   proporsjoner beskjæres i stedet for å endre høyden på hele panelet. */
.bwod-mm__banner {
	align-self: start;
	width: 100%;
	max-width: 384px;
}

.bwod-mm__banner-lenke {
	display: block;
	text-decoration: none;
	border-radius: var(--au-radius);
	transition: opacity 150ms ease-out;
}

.bwod-mm__banner-lenke:hover,
.bwod-mm__banner-lenke:focus-visible {
	opacity: 0.92;
}

.bwod-mm .bwod-mm__banner-bilde {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 384 / 476;
	object-fit: cover;
	border-radius: var(--au-radius);
}

/* Banneret skal fylle LEDIG plass, ikke stjele fra innholdet. Under 1280 px er
   det ikke nok bredde til en tredje kolonne uten at underkategoriene og
   produktlisten klemmes sammen — målt til at produktkolonnen falt fra 460 til
   300 px ved 1440 px da banneret alltid var på. Derfor legges den tredje
   kolonnen først til over brytpunktet, og under det finnes banneret i markupen
   men vises ikke. Det dekker samtidig mobil, der panelet er en drill-down.

   Brytpunktet er målt, ikke gjettet: ved 1280 px ble produktkolonnen 220 px og
   banneret 220 px — for trangt. Ved 1440 px blir det 340/300/300, som holder. */
.bwod-mm__banner {
	display: none;
}

@media (min-width: 1440px) {
	.bwod-mm__gren {
		grid-template-columns: 340px minmax(0, 460px) minmax(0, 384px);
	}

	/* Merke-grenen har ingen banner og skal fortsatt bruke full bredde. */
	.bwod-mm__gren--merker {
		grid-template-columns: 1fr;
	}

	.bwod-mm__banner {
		display: block;
	}
}

/* ------------------------------------------------------------- Fokusringer */

.bwod-mm a:focus-visible,
.bwod-mm button:focus-visible,
.bwod-mm-lukk:focus-visible {
	outline: 3px solid var(--au-red);
	outline-offset: 2px;
}

/* ------------------------------------------------- Panel, toggle og scrim */

/* Panelet portaleres til <body> og posisjoneres fixed, fordi Beaver
   Builder-rader jevnlig har overflow: hidden og transform-kontekster som
   klipper absolutt-posisjonerte barn. */
.bwod-mm-panel {
	position: fixed;
	z-index: 100000;
	display: none;
	overflow-y: auto;
	background: var(--au-surface, #fff);
	border-top: 4px solid var(--au-red, #c8131f);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.bwod-mm-panel.is-open {
	display: block;
	animation: bwod-mm-inn 150ms ease-out both;
}

@keyframes bwod-mm-inn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Lukkeknapp i panelet.
 *
 * Tema-hardnet med vilje: geometrien er låst identisk i base, :hover, :focus,
 * :focus-visible og :active. Uten det kan temaets button-regler flytte knappen
 * mellom mousedown og mouseup, slik at click aldri fyrer og første trykk ser ut
 * som det ikke gjør noe. Bare fargene endres på interaksjon. */
.bwod-mm-lukk,
.bwod-mm-lukk:hover,
.bwod-mm-lukk:focus,
.bwod-mm-lukk:focus-visible,
.bwod-mm-lukk:active {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	bottom: auto !important;
	left: auto !important;
	z-index: 2 !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	transform: none !important;
	appearance: none !important;
	border: 1px solid var(--au-border) !important;
	border-radius: 50% !important;
	background: var(--au-surface, #fff);
	color: var(--au-ink, #212121);
	cursor: pointer;
	line-height: 1 !important;
}

.bwod-mm-lukk:hover,
.bwod-mm-lukk:focus-visible {
	background: var(--au-surface-2, #f2f2f2);
	color: var(--au-red);
}

.bwod-mm-lukk svg {
	width: 20px;
	height: 20px;
}

/* Vises kun der panelet dekker hele skjermen. Over brytpunktet lukker scrim,
   utenforklikk og Escape. */
@media (max-width: 1023px) {
	.bwod-mm-lukk,
	.bwod-mm-lukk:hover,
	.bwod-mm-lukk:focus,
	.bwod-mm-lukk:focus-visible,
	.bwod-mm-lukk:active {
		display: inline-flex !important;
	}
}

/* Chat-widgeten ligger på z-index 2147483647 — over alt vi kan sette — og
 * dekker nederste hjørne av panelet på mobil. Den vikes mens menyen er åpen.
 *
 * Merk at `display` IKKE kan brukes: widgeten setter `display: unset !important`
 * i sin egen inline-stil, og inline !important slår !important fra et stilark.
 * `visibility` og `pointer-events` setter den derimot uten !important, så der
 * vinner vi. Bytt selektoren hvis siden bruker en annen widget. */
body.bwod-mm-apen > iframe[src*="weply.chat"] {
	visibility: hidden !important;
	pointer-events: none !important;
}

.bwod-mm-scrim {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	background: rgba(0, 0, 0, 0.35);
}

.bwod-mm-scrim.is-open {
	display: block;
}

.bwod-mm-admin-varsel {
	margin: 8px 0;
	padding: 10px 14px;
	border-left: 4px solid var(--au-red, #c8131f);
	background: #fff4ec;
	font-size: 13px;
	color: #212121;
}

/* ------------------------------------------------------ Mobil: drill-down */

@media (max-width: 1023px) {
	.bwod-mm-panel {
		inset: auto 0 0 0;
		top: 0;
		max-height: 100dvh;
		/* Gir lukkeknappen en egen stripe øverst. Uten den legger den seg over
		   første kategorirad og skjuler chevronen der. */
		padding-top: 56px;
	}

	.bwod-mm__paneler {
		display: block;
		min-height: 0;
	}

	.bwod-mm__hoved {
		background: var(--au-surface);
	}

	.bwod-mm__hoved-lenke {
		min-height: 48px;
		border-bottom: 1px solid var(--au-border);
	}

	.bwod-mm__gren,
	.bwod-mm__gren.is-aktiv {
		display: none;
	}

	.bwod-mm[data-mobil-niva="2"] .bwod-mm__hoved {
		display: none;
	}

	.bwod-mm[data-mobil-niva="2"] .bwod-mm__gren.is-aktiv {
		display: block;
		padding: 16px;
	}

	.bwod-mm__under-lenke,
	.bwod-mm__prod-lenke {
		min-height: 48px;
	}

	.bwod-mm__tilbake {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		min-height: 48px;
		max-height: 48px;
		padding: 12px 16px;
		background: var(--au-surface-2);
		border: 0;
		border-bottom: 1px solid var(--au-border);
		font-family: var(--au-font);
		font-size: 15px;
		font-weight: 600;
		color: var(--au-ink);
		cursor: pointer;
		text-align: left;
	}

	/* SVG-en injiseres av JS og har ingen klasse, så størrelsen må låses her —
	   ellers strekker den seg til full knappehøyde. Ned-chevronen roteres til
	   å peke venstre. */
	.bwod-mm__tilbake svg {
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
		transform: rotate(90deg);
	}
}

@media (min-width: 1024px) {
	.bwod-mm__tilbake {
		display: none;
	}
}


/* ------------------------------------------------- Trigger-knappen i menyen */

/* Chevronen ligger INNI lenka, ikke som et løst ikon ved siden av — det var
   problemet med den gamle separate knappen. Den snus når panelet er åpent. */
.bwod-mm-trigger {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}

.bwod-mm-trigger__pil {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
}

.bwod-mm-trigger__pil svg {
	width: 14px;
	height: 14px;
	transition: transform 150ms ease-out;
}

.bwod-mm-trigger[aria-expanded="true"] .bwod-mm-trigger__pil svg {
	transform: rotate(180deg);
}

/* Rammen er en innstilling. `currentColor` gjør at den følger menyens egen
   tekstfarge i stedet for å låse pluginen til én kundes profil.
   Geometrien merkes !important fordi Beaver Builders per-node menyregler
   (.fl-node-xxx .menu-item > a) ellers vinner på specificity. */
.bwod-mm-trigger--ramme {
	border: 2px solid currentColor !important;
	border-radius: 255px !important;
	padding: 12px 16px !important;
	line-height: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
	.bwod-mm-trigger__pil svg {
		transition: none;
	}
}

/* ------------------------------------------------------- Redusert bevegelse */

@media (prefers-reduced-motion: reduce) {
	.bwod-mm-panel.is-open {
		animation: none;
	}

	.bwod-mm * {
		transition: none !important;
	}
}