/* Components: reusable pieces used across templates. */

/* ---- Breadcrumbs ---- */

/* One line under the site header (template-parts/breadcrumbs.php). A long current page ends in
   an ellipsis; on phones it is left out (the title says it) and the trail ends with its parent. */
.breadcrumbs {
	padding-block: 0.75rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.25;
}

.breadcrumbs__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__item {
	display: flex;
	flex: none;
	align-items: center;
	min-width: 0;
	white-space: nowrap;
}

.breadcrumbs__item:last-child {
	flex: 0 1 auto;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "";
	flex: none;
	width: 0.375rem;
	height: 0.375rem;
	margin-inline: 0.5rem 0.625rem;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	opacity: 0.7;
	transform: rotate(-45deg);
}

.breadcrumbs__item > * {
	overflow: hidden;
	padding-block: 0.25rem;
	text-overflow: ellipsis;
}

.breadcrumbs a {
	color: var(--wp--preset--color--text);
	text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.breadcrumbs a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration-color: currentColor;
}

@media (max-width: 760px) {
	.breadcrumbs__item:last-child {
		display: none;
	}

	.breadcrumbs__item:nth-last-child(2) {
		flex: 0 1 auto;
	}
}

/* Product pages end the row with arrows to the previous and next product in the trail's
   category. They reach into the row's padding, so the row keeps its height; a missing neighbour
   is a muted placeholder. theme.js shows a card with the product under them. */
.breadcrumbs--pager {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.breadcrumbs--pager .breadcrumbs__list {
	flex: 1 1 auto;
	min-width: 0;
}

.product-pager {
	display: flex;
	flex: none;
	gap: 0.25rem;
	margin-block: -0.25rem;
}

.product-pager__link {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	color: var(--wp--preset--color--text);
}

.product-pager__link[href]:hover {
	border-color: currentColor;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

.product-pager__link:focus-visible {
	border-radius: 50%;
}

.product-pager__link:not([href]) {
	opacity: 0.35;
}

.product-pager__link .icon {
	width: 1.125rem;
	height: 1.125rem;
}

.product-pager__card {
	position: absolute;
	top: calc(100% - 0.25rem);
	right: var(--utomhus-gutter);
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 20rem;
	padding: 0.625rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--utomhus-radius);
	background: var(--wp--preset--color--white);
	box-shadow: var(--utomhus-shadow);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.product-pager__card[hidden],
.product-pager__card img[hidden] {
	display: none;
}

.product-pager__card img {
	flex: none;
	width: 4rem;
	height: 4rem;
	border-radius: var(--utomhus-radius-small);
	background: var(--wp--preset--color--surface);
	object-fit: cover;
}

.product-pager__label {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
}

.product-pager__title {
	display: -webkit-box;
	overflow: hidden;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.product-pager__card:hover .product-pager__title {
	color: var(--wp--preset--color--primary);
}

@media (max-width: 760px) {
	.product-pager__card {
		left: var(--utomhus-gutter);
		width: auto;
	}
}

/* ---- Cards ---- */

/* Grids of cards and tiles: post cards, the document library and the category tiles. */
.card-grid,
.document-library__grid,
.category-tiles {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.card-grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.post-card {
	display: flex;
	flex-direction: column;
}

.post-card__link {
	color: inherit;
	text-decoration: none;
}

.post-card__image {
	aspect-ratio: 16 / 10;
	margin-bottom: 0.85rem;
	overflow: hidden;
	border-radius: var(--utomhus-radius);
	background: var(--wp--preset--color--surface);
}

.post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.post-card__link:hover img {
	transform: scale(1.03);
}

.post-card__title {
	margin-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--large);
}

.post-card__link:hover .post-card__title {
	color: var(--wp--preset--color--primary);
}

.post-card__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Product list and card ----
   One list (woocommerce/loop/loop-start.php) and one card (woocommerce/content-product.php)
   for every product shown in a list. Cards in a row stretch to the same height and push
   their footer to the bottom, so prices and buttons line up across the row. */

.product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

@media (max-width: 1100px) {
	.product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
}

.product-card {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}

.product-card__link {
	color: inherit;
	text-decoration: none;
}

/* Square image area; the image is contained and centered in it, whatever its proportions.
   The image multiplies onto the tile, so white photo backgrounds take the tile's color
   instead of showing as a white square. On tinted bands the tile is white. */
.product-card__image {
	aspect-ratio: 1;
	margin-bottom: 0.75rem;
	padding: 0.75rem;
	overflow: hidden;
	border-radius: var(--utomhus-radius);
	background: var(--wp--preset--color--surface);
	isolation: isolate;
}

.is-style-tinted .product-card__image {
	background: var(--wp--preset--color--white);
}

.product-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.3s ease;
}

.product-card__link:hover img {
	transform: scale(1.04);
}

/* Long compound words ("antenneforlengelseskabel") hyphenate, or break, instead of pushing
   a narrow card and the page wider than the screen. */
.product-card__title {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 600;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.product-card__link:hover .product-card__title {
	color: var(--wp--preset--color--primary);
}

.product-card__text {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--utomhus-text-xs);
	line-height: 1.5;
}

/* Price (or partner brand) left, button right, on one line at the bottom of the card. The
   minimum height fits the button and the tallest brand logo, so every footer is the same
   height and the buttons of a row share one line. */
.product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 2.5rem;
	margin-top: auto;
}

.product-card__footer .button {
	flex-shrink: 0;
	margin-left: auto;
}

.product-card__brand img {
	display: block;
	max-width: 110px;
	max-height: 36px;
	width: auto;
}

/* Narrow cards (two columns on phones): price above a full-width button, the same for every
   card of that width, so a row still lines up. */
@container (max-width: 220px) {
	.product-card__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.product-card__footer .button {
		margin-left: 0;
	}
}

/* ---- Prices ---- */

.product-price {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.product-price .amount,
.product-price ins {
	color: inherit;
	text-decoration: none;
}

.product-price del {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	opacity: 1;
}

.price-unit {
	color: var(--wp--preset--color--muted);
	font-size: 0.8em;
	font-weight: 400;
}

/* ---- Horizontal carousel (product rows, reference rows, quotes) ----
   A scroll-snap row; theme.js adds previous/next buttons. Works without JS.
   `.carousel .carousel__track` outranks the product grid's column rules, so a product row
   (`ul.product-grid.carousel__track`) gets one implicit column per card. */

.carousel {
	position: relative;
}

.carousel .carousel__track {
	display: grid;
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--wp--preset--spacing--50)) / 4);
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0 0 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
}

.carousel .carousel__track::-webkit-scrollbar {
	display: none;
}

.carousel .carousel__track > * {
	margin: 0;
	scroll-snap-align: start;
}

.carousel__button {
	position: absolute;
	top: 35%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	box-shadow: var(--utomhus-shadow);
	cursor: pointer;
}

.carousel__button[disabled] {
	opacity: 0;
	pointer-events: none;
}

.carousel__button--prev {
	left: -1rem;
}

.carousel__button--next {
	right: -1rem;
}

@media (max-width: 1100px) {
	.carousel .carousel__track {
		grid-auto-columns: calc((100% - 2 * var(--wp--preset--spacing--50)) / 2.6);
	}
}

@media (max-width: 600px) {
	.carousel .carousel__track {
		grid-auto-columns: 72%;
	}

	.carousel__button {
		display: none;
	}
}

/* ---- Full-size view (theme.js fullSizeView): photos shown large, for content galleries and the
   product gallery. ---- */

.full-size-view {
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--white);
}

.full-size-view::backdrop {
	background: var(--wp--preset--color--white);
}

.full-size-view[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.full-size-view__image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.full-size-view .carousel__button {
	display: inline-flex;
	top: 50%;
	transform: translateY(-50%);
}

.full-size-view .carousel__button--prev {
	left: 1rem;
}

.full-size-view .carousel__button--next {
	right: 1rem;
}

.full-size-view .full-size-view__close {
	top: 1rem;
	right: 1rem;
	transform: none;
}

.full-size-view__count {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	transform: translateX(-50%);
}

.full-size-view .carousel__button[hidden] {
	display: none;
}

/* ---- Accordion (details/summary) ----
   Also the page kit's FAQ ("Spørsmål og svar"): core/details blocks in group.faq, shown as
   accordion cards; the summary is the question, the paragraphs the answer. */

.accordion {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.accordion__title,
.faq > .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.accordion__title::-webkit-details-marker,
.faq > .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.accordion__title::after,
.faq > .wp-block-details > summary::after {
	content: "+";
	flex: none;
	font-size: 1.4em;
	font-weight: 400;
	line-height: 1;
}

.accordion[open] > .accordion__title::after,
.faq > .wp-block-details[open] > summary::after {
	content: "–";
}

.accordion__body {
	padding-bottom: 1rem;
}

.faq > .wp-block-details > :not(summary) {
	margin-block: 0 1rem;
}

.faq {
	max-width: 48rem;
}

.accordion--card,
.faq > .wp-block-details {
	margin-bottom: 0.6rem;
	padding: 0 1.1rem;
	border: 0;
	border-radius: var(--utomhus-radius);
	background: var(--wp--preset--color--surface);
}

.accordion--card .accordion__title,
.faq > .wp-block-details > summary {
	font-size: 1rem;
}

/* ---- Header cart link ---- */

.cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.85rem;
	border-radius: var(--utomhus-radius-pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.cart-link.has-items {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.cart-link:hover {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--white);
}

.cart-link__total .amount {
	color: inherit;
}

.cart-link__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.3rem;
	border-radius: var(--utomhus-radius-pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-size: var(--utomhus-text-2xs);
}

@media (max-width: 600px) {
	.cart-link__total {
		display: none;
	}
}

/* ---- Order steps (handleliste → legg inn info → vent på svar) ---- */

.order-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 1.5rem auto 2rem;
	padding-top: 1rem;
	list-style: none;
	counter-reset: step;
}

.order-steps__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.order-steps__step::before {
	content: "";
	position: absolute;
	top: 1.4rem;
	left: -50%;
	right: 50%;
	z-index: -1;
	height: 2px;
	background: var(--wp--preset--color--border);
}

.order-steps__step:first-child::before {
	display: none;
}

.order-steps__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.8rem;
	height: 2.8rem;
	margin-bottom: 0.5rem;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
}

.order-steps__title {
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.order-steps__text {
	max-width: 22ch;
	font-size: var(--utomhus-text-xs);
}

.order-steps__step.is-current,
.order-steps__step.is-done {
	color: var(--wp--preset--color--text);
}

.order-steps__step.is-current .order-steps__icon {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.order-steps__step.is-done .order-steps__icon {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.order-steps__step.is-done::before,
.order-steps__step.is-current::before {
	background: var(--wp--preset--color--primary);
}

@media (max-width: 600px) {
	.order-steps__text {
		display: none;
	}

	.order-steps__title {
		font-size: var(--utomhus-text-2xs);
	}
}

/* ---- Pagination ---- */

.pagination,
.woocommerce-pagination {
	margin-top: var(--wp--preset--spacing--60);
}

.nav-links,
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	border: 0 !important;
	list-style: none;
}

/* WooCommerce wraps each number in a list item; it adds no line or spacing of its own, also in
   page content (the search results). */
.woocommerce-pagination ul.page-numbers li {
	display: flex;
	margin: 0;
}

/* The numbers and arrows (WooCommerce's list around them is also .page-numbers). */
a.page-numbers,
span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	border-radius: var(--utomhus-radius-small);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* ---- Contact and business forms (utomhus-site [utomhus_form]) ---- */

.utomhus-form form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
}

.utomhus-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.utomhus-form__field--textarea,
.utomhus-form__field--checkbox,
.utomhus-form__submit,
.utomhus-form__error-summary {
	grid-column: 1 / -1;
}

.utomhus-form__field--checkbox label {
	display: flex;
	gap: 0.6rem;
	font-weight: 400;
}

.utomhus-form__optional {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.utomhus-form__submit {
	justify-self: start;
}

.utomhus-form__error,
.utomhus-form__error-summary {
	margin: 0;
	color: var(--utomhus-error);
	font-size: var(--wp--preset--font-size--small);
}

.utomhus-form__success {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: var(--utomhus-radius-small);
	background: var(--wp--preset--color--surface);
}

.utomhus-form__trap {
	position: absolute;
	left: -9999px;
}

@media (max-width: 600px) {
	.utomhus-form form {
		grid-template-columns: 1fr;
	}
}

/* ---- Notices (WooCommerce and theme) ----
   The theme's own look and icons, whether or not WooCommerce's stylesheet is on the page (it
   loads only on the handleliste, checkout and account, before this file). */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	position: relative;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem 1rem 3rem;
	border: 0;
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: var(--utomhus-radius-small);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	list-style: none;
	overflow-wrap: break-word;
}

.woocommerce-error {
	border-left-color: var(--utomhus-error);
}

.woocommerce-error li {
	margin: 0.25rem 0;
	padding: 0;
}

.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
	content: "";
	display: block;
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16 9.8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16 9.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-info::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E");
}

.woocommerce-error::before {
	background: var(--utomhus-error);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E");
}

/* Room for the floated button. */
.woocommerce-error::after,
.woocommerce-info::after,
.woocommerce-message::after {
	content: "";
	display: table;
	clear: both;
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	margin-left: 1rem;
}

/* ---- Side navigation (template-parts/side-nav.php) ----
   The one side menu: start page hero, shop archives and articles. A flat panel of rows; groups
   (article categories) fold open. On phones a menu either hides (the header's category bar
   takes over) or folds behind a toggle ("Hurtigmeny"). */

.side-nav {
	display: flex;
	flex-direction: column;
	padding: 1rem 0.75rem;
	border-radius: var(--utomhus-radius);
	background: var(--wp--preset--color--surface);
}

.side-nav__body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

/* The small uppercase label: side menu titles, the phone menu's titles and facts' labels. */
.side-nav__title,
.mobile-menu__title,
.fact__label {
	color: var(--wp--preset--color--muted);
	font-size: var(--utomhus-text-2xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.side-nav__title {
	margin: 0 0 0.4rem;
	padding: 0 0.75rem;
}

.side-nav__list,
.side-nav__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.side-nav li {
	margin: 0;
}

.side-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.55rem 0.75rem;
	border-radius: var(--utomhus-radius-small);
	color: var(--wp--preset--color--text);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	list-style: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.side-nav__link::-webkit-details-marker {
	display: none;
}

.side-nav__link::after {
	opacity: 0.4;
}

.side-nav__link:hover,
.side-nav__link[aria-current] {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

.side-nav__link:hover::after,
.side-nav__link[aria-current]::after {
	opacity: 1;
}

/* Group chevrons point down, and up while open. */
.side-nav__group summary::after {
	transform: translateY(-0.15em) rotate(45deg);
}

.side-nav__group details[open] > summary::after {
	transform: translateY(0.15em) rotate(-135deg);
}

.side-nav__sublist {
	margin: 0.15rem 0 0.5rem 0.75rem;
	border-left: 2px solid var(--wp--preset--color--border);
}

.side-nav__sublink {
	display: block;
	margin-left: -2px;
	padding: 0.35rem 0.75rem;
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	text-decoration: none;
}

.side-nav__sublink:hover {
	color: var(--wp--preset--color--primary);
}

.side-nav__sublink[aria-current] {
	border-left-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.side-nav__more {
	margin-top: auto;
	padding: 0.75rem 0.75rem 0.25rem;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.side-nav__more::after {
	content: " →";
}

.side-nav__more:hover,
.side-nav__more[aria-current] {
	text-decoration: underline;
}

.side-nav__toggle {
	display: none;
}

@media (max-width: 900px) {
	.side-nav--hide {
		display: none;
	}

	.side-nav--collapse {
		padding-block: 0.5rem;
	}

	/* theme.js shows the toggle and folds the menu; without it the menu is simply shown. */
	.side-nav__toggle:not([hidden]) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0.55rem 0.75rem;
		border: 0;
		background: none;
		color: var(--wp--preset--color--text);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}

	.side-nav__toggle::after {
		transform: translateY(-0.15em) rotate(45deg);
	}

	.side-nav__toggle[aria-expanded="true"]::after {
		transform: translateY(0.15em) rotate(-135deg);
	}

	.side-nav__toggle:not([hidden]) + .side-nav__body .side-nav__title,
	.side-nav.is-collapsed .side-nav__body {
		display: none;
	}
}

/* ---- Article archive filters ([article_filters]) ---- */

.article-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}

.article-filters__group {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.article-filters__label {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.article-filters select,
.tags-dropdown__toggle {
	width: auto;
	min-height: 2.4rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--utomhus-radius-small);
	background: var(--wp--preset--color--white);
	font: inherit;
	cursor: pointer;
}

.tags-dropdown {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	z-index: 20;
	width: 280px;
	padding: 0.75rem;
	border-radius: var(--utomhus-radius);
	background: var(--wp--preset--color--white);
	box-shadow: var(--utomhus-shadow);
}

.tags-dropdown__options {
	display: grid;
	gap: 0.35rem;
	max-height: 260px;
	overflow-y: auto;
}

.tags-dropdown__option {
	display: flex;
	gap: 0.5rem;
	font-weight: 400;
}

.tags-dropdown__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.tags-dropdown__all,
.tags-dropdown__none {
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font: inherit;
	cursor: pointer;
}

.tags-dropdown__apply {
	margin-left: auto;
}

/* ---- Article page (single-post.php) ----
   Shared parts in a template: banner, lead, side menu ("Innhold"), product card, carousel and
   call to action. From 901 px the contents and the product float at the top right: text keeps
   its 760 px measure beside them, and wide content elements fill the width left beside them,
   then the whole page below them. On phones the contents fold above the text and the product
   follows it. */

.article {
	--article-rail: clamp(240px, 22vw, 320px);
	--article-gap: var(--wp--preset--spacing--60);
}

.article__intro {
	padding-top: var(--wp--preset--spacing--60);
}

.article__intro .lead {
	margin: 0;
}

.article__byline {
	display: flex;
	flex-wrap: wrap;
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.article__byline > * + *::before {
	content: "·";
	margin-inline: 0.6rem;
}

.article__body {
	display: flow-root;
	margin-top: var(--wp--preset--spacing--60);
}

.article__contents .side-nav__link {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.article__product .product-grid {
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
}

/* Text keeps the reading measure; wide elements may use the full width. */
.article__content > * {
	max-width: var(--wp--style--global--content-size);
}

.article__content > :is(.alignwide, .alignfull, .post-list, .product-grid, .carousel) {
	max-width: none;
	margin-block: var(--wp--preset--spacing--60);
}

/* Blocks with a box of their own (images, tables, single cards, carousels) keep clear of the
   floating contents and product; grid and flex elements already do. */
.article__content > :is(figure, .is-style-card, .is-style-card-contain, .carousel) {
	display: flow-root;
}

/* Article cards placed in the text: four to a row, as in "Andre leser også". */
.article__content > .post-list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.article__content > h2:not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--70);
}

.article__content > h3:not(:first-child) {
	margin-block-start: 2rem;
}

.article__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.article__share-title {
	margin: 0 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

@media (min-width: 901px) {
	.article__contents,
	.article__product {
		float: right;
		clear: right;
		width: var(--article-rail);
		margin: 0 0 var(--wp--preset--spacing--50) var(--article-gap);
	}
}

@media (max-width: 900px) {
	.article__body {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--50);
	}

	.article__product {
		order: 1;
		max-width: 22rem;
	}

	.article__content > .post-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 901px) and (max-width: 1100px) {
	.article__content > .post-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.article__content > .post-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Reference page (single-references.php) ----
   Page kit elements in a template: banner, facts, section headers, the content's gallery. */

.reference__report {
	margin: 1.5rem 0 0;
}

.reference__description {
	padding-block: 0 clamp(2rem, 1.25rem + 2vw, 3rem);
}

/* ---- Call to action (template-parts/cta.php) ---- */

.cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* ---- Filter chips (the reference list's categories, Nedlastinger's categories) ----
   Pill buttons; the pressed one is filled. */

.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1.5rem;
}

.filter-chip {
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--utomhus-radius-pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.filter-chip:hover {
	border-color: var(--wp--preset--color--primary);
}

.filter-chip[aria-pressed="true"] {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.carousel--quotes .wp-block-quote {
	margin: 0;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: var(--utomhus-radius);
	background: var(--wp--preset--color--surface);
}

.carousel--quotes .carousel__track {
	grid-auto-columns: calc((100% - 2 * var(--wp--preset--spacing--50)) / 3);
}

.map-embed {
	display: block;
	width: 100%;
	height: 400px;
	border: 0;
	border-radius: var(--utomhus-radius);
}

/* ---- Document link (template-parts/document-link.php) ----
   A product document as one row: the type as a label, the name with the file format and size
   under it, and a download icon. Used by the document library's cards and the product page's
   "Nedlastinger" (.document-list). */

.document-link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "type name icon" "type meta icon";
	align-items: center;
	column-gap: 0.65rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--utomhus-radius-small);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.document-link:hover {
	background: var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
}

/* Without a visible name (it only repeated the title above), the row is label, size, icon. */
.document-link--short {
	grid-template-areas: "type meta icon";
}

.document-link__type {
	grid-area: type;
	padding: 0.2rem 0.5rem;
	border-radius: var(--utomhus-radius-pill);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	color: var(--wp--preset--color--primary);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.document-link__name {
	grid-area: name;
	font-weight: 500;
	overflow-wrap: break-word;
	hyphens: auto;
}

.document-link__meta {
	grid-area: meta;
	color: var(--wp--preset--color--muted);
	font-size: var(--utomhus-text-2xs);
}

.document-link__icon {
	grid-area: icon;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--wp--preset--color--primary);
}

.document-list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0 0 1rem;
	list-style: none;
}

/* On the product page every row has the height of a named one, so rows without a name match. */
.document-list .document-link {
	min-height: 3.125rem;
	align-content: center;
}

/* ---- Document library ([produkt_nedlastinger]) ----
   A search field, category and type chips and a count above a grid of document cards: the
   product's image, its categories, its name and its documents. On phones the chips scroll in
   one row, like the category bar, and cards lay the image beside the text. */

.document-library [hidden] {
	display: none !important;
}

.document-library__tools {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.document-library__search {
	position: relative;
	display: block;
	max-width: 28rem;
}

.document-library__search .icon {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--wp--preset--color--muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.document-library__search input[type="search"] {
	padding-left: 2.6rem;
	border-radius: var(--utomhus-radius-pill);
}

.document-library .filter-chips {
	margin: 0;
}

.document-library__count {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.document-library__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.document-library__empty {
	margin: 0;
	padding: 2rem 1rem;
	border-radius: var(--utomhus-radius);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.document-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--utomhus-radius);
	background: var(--wp--preset--color--surface);
}

/* The frame keeps its ratio whatever the image's own size (overflow stops content from
   stretching it). */
.document-card__image {
	display: block;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	padding: 0.75rem;
	background: var(--wp--preset--color--white);
}

.document-card__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.document-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.9rem 1rem 1rem;
}

.document-card__categories {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--utomhus-text-2xs);
}

.document-card__title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.document-card__title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.document-card__title a:hover {
	color: var(--wp--preset--color--primary);
}

.document-card__documents {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.document-card .document-link {
	background: var(--wp--preset--color--white);
}

.document-card .document-link:hover {
	background: var(--wp--preset--color--border);
}

@media (max-width: 1200px) {
	.document-library__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

	/* One row that scrolls and fades out at the right, like the category bar. */
	.document-library .filter-chips {
		flex-wrap: nowrap;
		margin-inline: calc(-1 * var(--utomhus-gutter));
		padding-inline: var(--utomhus-gutter);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: var(--utomhus-fade-right);
		mask-image: var(--utomhus-fade-right);
	}

	.document-library .filter-chips::-webkit-scrollbar {
		display: none;
	}

	.document-library .filter-chip {
		flex: none;
	}
}

@media (max-width: 600px) {
	.document-library__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}

	.document-card {
		flex-direction: row;
	}

	.document-card__image {
		flex: 0 0 5.5rem;
		align-self: flex-start;
		aspect-ratio: 1;
		margin: 0.75rem 0 0.75rem 0.75rem;
		padding: 0.35rem;
		border-radius: var(--utomhus-radius-small);
	}

	.document-card__body {
		padding: 0.75rem;
	}
}

/* ---- Search results ([utomhus_products]) ---- */

.search-results {
	padding-top: 1.5rem;
}

.search-results__title {
	font-size: var(--wp--preset--font-size--xx-large);
}

.search-results__count {
	color: var(--wp--preset--color--muted);
}

.post-card__meta {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* ---- Consent banner (the utomhus-site plugin's marketing.php and marketing.js) ----
   A fixed bar over the bottom of the page, so showing it never moves the content. */

.consent {
	position: fixed;
	inset: auto 0 0;
	z-index: 900;
	max-height: 90vh;
	overflow-y: auto;
	padding-block: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--white);
	box-shadow: 0 -4px 16px rgb(0 0 0 / 0.08);
}

.consent[hidden],
.consent__choices[hidden] {
	display: none;
}

.consent:focus {
	outline: none;
}

.consent__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
}

.consent__text {
	flex: 1 1 28rem;
}

.consent__title {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--medium);
}

.consent__text p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.consent__choices {
	display: grid;
	flex-basis: 100%;
	gap: 0.75rem;
	order: 1;
	font-size: var(--wp--preset--font-size--small);
}

.consent__choices p {
	margin: 0;
}

.consent__choice {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.consent__choice input {
	margin-top: 0.2rem;
}

.consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* "Godta alle" and "Kun nødvendige" look the same; "Velg selv" and "Lagre valget" are secondary
   (on shop pages base.css's ".woocommerce button.button" would otherwise outrank it). */
.consent .button.button--secondary {
	background: transparent;
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 2px currentColor;
}

.consent .button.button--secondary:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

@media (max-width: 599px) {
	.consent__actions .button {
		flex: 1 1 auto;
	}
}