/**
 * Sidomenyn som sektionsväljare på tablet och mobil (≤ 991 px).
 * Markupen byggs av assets/js/section-nav.js; se includes/section-nav.php.
 *
 * Raden och panelen ligger i sidomenyns <aside>. Bakgrunderna går kant i
 * kant via box-shadow + clip-path, så containerns bredd och gutter påverkas
 * inte. Selektorerna börjar med aside.section-nav för att slå de globala
 * klassernas regler (dtpa03/dtpa70, dtcp-klasserna).
 */

.section-nav__bar,
.section-nav__backdrop,
.section-nav__count,
.section-pager {
	display: none;
}

.section-nav__panel {
	display: contents;
}

@media (max-width: 991px) {
	aside.section-nav {
		position: sticky !important;
		top: var(--x-header-height, 0px) !important;
		z-index: 90;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
	}

	/* Raden ligger direkt under headern – ingen sektionspadding ovanför (innehållssidorna). */
	.brxe-section:has(> .brxe-container > aside.section-nav) {
		padding-top: 0 !important;
	}

	/* Produktarkivets filterrad fastnar under raden i stället för bakom den. */
	body.has-section-nav .product-filterbar.brxe-block {
		top: calc(var(--x-header-height, 0px) + var(--section-nav-height, 0px));
	}

	/* ---------- Raden ---------- */

	.section-nav__bar {
		position: relative;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		width: 100%;
		min-height: 3rem;
		margin: 0;
		padding: 0.8rem 0;
		border: 0;
		border-radius: 0;
		font: inherit;
		font-size: var(--text-s);
		line-height: 1.3;
		text-align: left;
		color: var(--base);
		background: var(--base-ultra-light);
		box-shadow: 0 0 0 100vmax var(--base-ultra-light), 0 1px 0 100vmax var(--base-light);
		clip-path: inset(0 -100vmax -1px);
		cursor: pointer;
	}

	.section-nav__bar:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: -2px;
	}

	.section-nav__trail {
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.section-nav__crumb + .section-nav__crumb::before {
		content: "·";
		margin: 0 0.4em;
		font-weight: 400;
		color: var(--base);
	}

	strong.section-nav__crumb {
		font-weight: 600;
		color: var(--text-dark);
	}

	.section-nav__action {
		display: flex;
		flex: none;
		align-items: center;
		gap: 0.6rem;
		font-weight: 500;
		color: var(--base-dark);
	}

	.section-nav__chevron {
		width: 0.5rem;
		height: 0.5rem;
		margin-top: -0.25rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}

	aside.section-nav.is-open .section-nav__bar {
		color: rgb(255 255 255 / 0.72);
		background: var(--base-dark);
		box-shadow: 0 0 0 100vmax var(--base-dark);
	}

	aside.section-nav.is-open strong.section-nav__crumb,
	aside.section-nav.is-open .section-nav__crumb::before,
	aside.section-nav.is-open .section-nav__action {
		color: var(--white);
	}

	aside.section-nav.is-open .section-nav__chevron {
		margin-top: 0.3rem;
		transform: rotate(-135deg);
	}

	/* ---------- Panel och bakgrund ---------- */

	.section-nav__panel {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 2;
		display: none;
		max-height: calc(100vh - var(--section-nav-bottom, 8rem));
		max-height: calc(100dvh - var(--section-nav-bottom, 8rem));
		padding: var(--space-s) 0 var(--space-l);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--body-bg-color);
		box-shadow: 0 0 0 100vmax var(--body-bg-color);
		clip-path: inset(0 -100vmax);
	}

	.section-nav__backdrop {
		position: fixed;
		inset: 0;
		z-index: 1;
		background: rgb(14 42 54 / 0.35);
	}

	aside.section-nav.is-open .section-nav__panel,
	aside.section-nav.is-open .section-nav__backdrop {
		display: block;
	}

	/* Gamla mobilknappen "Undermeny" (section-mallen 18986) ersätts av raden. */
	aside.section-nav #brxe-kullfu {
		display: none !important;
	}

	aside.section-nav .sidebar-product-nav {
		display: flex !important;
	}

	/* ---------- Gemensamt för trädet ---------- */

	.section-nav__count {
		display: inline;
		flex: none;
		font-size: var(--text-xs);
		font-weight: 400;
		color: var(--base);
	}

	/* ---------- WP-menyn (.product-sidenav__menu) ---------- */

	aside.section-nav .product-sidenav__menu.brxe-nav-menu .bricks-nav-menu {
		display: block;
	}

	aside.section-nav .product-sidenav__menu.brxe-nav-menu .bricks-nav-menu > li {
		width: 100%;
		break-inside: avoid;
	}

	aside.section-nav .product-sidenav__menu.brxe-nav-menu .bricks-nav-menu > li.menu-heading {
		margin: var(--space-m) 0 0;
		padding: 0.6rem 0 0.5rem;
		border-top: 0;
		border-bottom: 1px solid var(--base-light);
		break-after: avoid;
	}

	aside.section-nav .product-sidenav__menu.brxe-nav-menu .bricks-nav-menu > li.menu-heading:first-child {
		margin-top: 0;
	}

	aside.section-nav .product-sidenav__menu.brxe-nav-menu .bricks-nav-menu > li > a,
	aside.section-nav .product-sidenav__menu.brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle > a {
		min-height: 2.75rem;
		padding: 0.55rem 0.75rem;
		border: 0;
		border-bottom: 1px solid var(--base-ultra-light);
		font-size: var(--text-m);
		color: var(--text-dark);
		background: transparent;
	}

	/* dtpa70 visar alla undermenyer med !important – här bara grenen man står i. */
	aside.section-nav .product-sidenav__menu li.section-nav__closed > .sub-menu {
		display: none !important;
	}

	aside.section-nav .product-sidenav__menu .sub-menu {
		margin: 0.35rem 0 0.6rem 2px;
		padding-left: 0.75rem;
		border-left: 2px solid var(--base-dark);
	}

	aside.section-nav .product-sidenav__menu .sub-menu > li > a {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0 0.75rem;
		font-size: var(--text-s);
		color: var(--base);
	}

	aside.section-nav .product-sidenav__menu.brxe-nav-menu .bricks-nav-menu li.current-menu-item > a,
	aside.section-nav .product-sidenav__menu.brxe-nav-menu .bricks-nav-menu li.current-menu-item > .brx-submenu-toggle > a {
		font-weight: 600;
		color: var(--base-dark);
		background: var(--primary-ultra-light);
	}

	aside.section-nav .product-sidenav__menu .current-menu-item .menu-item-count {
		color: var(--base);
		opacity: 1;
	}

	/* ---------- Innehållssidornas meny (.content-nav) ---------- */

	aside.section-nav .content-nav__title {
		margin: 0;
		padding: 0.6rem 0 0.5rem;
		border-bottom: 1px solid var(--base-light);
	}

	aside.section-nav .content-nav {
		border-top: 0;
	}

	aside.section-nav .content-nav__item {
		break-inside: avoid;
		border-bottom-color: var(--base-ultra-light);
	}

	aside.section-nav .content-nav__link {
		align-items: center;
		gap: 0.75rem;
		min-height: 2.75rem;
		padding: 0.55rem 0.75rem;
		border-left: 0;
	}

	aside.section-nav .content-nav__link[aria-current="page"] {
		color: var(--base-dark);
		background: var(--primary-ultra-light);
	}

	aside.section-nav .content-nav__sub {
		margin: 0.35rem 0 0.6rem 2px;
		padding-left: 0.75rem;
		border-top: 0;
		border-left: 2px solid var(--base-dark);
	}

	aside.section-nav .content-nav__link.content-nav__sublink {
		padding-left: 0.75rem;
	}

	aside.section-nav .content-nav__item.section-nav__closed > .content-nav__sub {
		display: none;
	}

	aside.section-nav .content-nav__help {
		margin-top: var(--space-m);
	}

	/* ---------- Undersidesmenyn (.page-sidenav, komponenten "Sidomeny – Undersidor") ---------- */

	/* Bricks-blocken krymper annars raderna till textens bredd. */
	aside.section-nav .page-sidenav,
	aside.section-nav .page-sidenav li,
	aside.section-nav .page-sidenav li > div {
		align-items: stretch;
		row-gap: 0;
	}

	aside.section-nav .page-sidenav a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		min-height: 2.75rem;
		padding: 0.55rem 0.75rem;
		border-bottom: 1px solid var(--base-ultra-light);
		color: var(--text-dark);
		text-decoration: none;
	}

	aside.section-nav .page-sidenav a[aria-current="page"] {
		font-weight: 600;
		color: var(--base-dark);
		background: var(--primary-ultra-light);
	}

	aside.section-nav .page-sidenav li > div {
		margin: 0.35rem 0 0.6rem 2px;
		padding-left: 0.75rem;
		border-left: 2px solid var(--base-dark);
	}

	aside.section-nav .page-sidenav li.section-nav__closed > div {
		display: none;
	}

	/* Tom undersidesmeny: ingen tom remsa ovanför innehållet. */
	aside.section-nav--empty {
		display: none !important;
	}

	/* ---------- Föregående/Nästa sist i huvudspalten ---------- */

	.section-pager {
		display: flex;
		align-self: stretch;
		justify-content: space-between;
		width: 100%;
		gap: var(--space-m);
		margin-top: var(--space-xl);
		padding-top: var(--space-s);
		border-top: 1px solid var(--base-light);
	}

	.section-pager__item {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		max-width: 48%;
		text-decoration: none;
	}

	.section-pager__next {
		align-items: flex-end;
		margin-left: auto;
		text-align: right;
	}

	.section-pager__label {
		font-size: var(--text-xs);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--base);
	}

	.section-pager__title {
		font-size: var(--text-m);
		line-height: 1.3;
		color: var(--primary-semi-dark);
	}

	.section-pager__item:hover .section-pager__title {
		color: var(--primary);
	}
}

/* Tablet: trädet i två spalter. */
@media (min-width: 768px) and (max-width: 991px) {
	aside.section-nav .product-sidenav__menu.brxe-nav-menu .bricks-nav-menu,
	aside.section-nav .content-nav {
		columns: 2;
		column-gap: var(--space-xl);
	}
}

/* Mobil: bara de två sista leden i sökvägen. */
@media (max-width: 767px) {
	.section-nav__crumb:not(:nth-last-child(-n + 2)) {
		display: none;
	}

	.section-nav__crumb:nth-last-child(2)::before {
		content: none;
	}
}