/*
 * VAPR Print Manager – butikksiden (0.6.0, #22b).
 * Butikkmenyen (faner, sortering, antall), introteksten og prisen på kortene.
 * Bare designvariablene – ingen faste farger. Lastes på butikk-, kategori- og stikkordsider.
 */

/* Butikkmenyen ------------------------------------------------------- */
.vpm-bm {
	width: 100%;
	text-align: center;
}
.vpm-bm__liste {
	display: flex;
	justify-content: safe center;
	gap: var(--space-m, 24px);
	margin: 0;
	padding: 0 2px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	box-shadow: inset 0 -1px 0 var(--color-border);
}
.vpm-bm__liste::-webkit-scrollbar {
	display: none;
}
.vpm-bm__fane {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}
.vpm-bm__fane a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 2px;
	color: var(--color-text-muted);
	font-size: var(--text-s, 15px);
	letter-spacing: var(--menu-letter-spacing, 0em);
	text-transform: var(--menu-text-transform, none);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease, box-shadow .2s ease;
}
.vpm-bm__fane a:hover {
	color: var(--color-text);
}
.vpm-bm__fane a[aria-current] {
	color: var(--color-text);
	box-shadow: inset 0 -2px 0 var(--color-primary);
}
.vpm-bm a:focus-visible,
.vpm-bm summary:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Antall og sortering */
.vpm-bm__rad {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s, 16px);
	margin-top: var(--space-xs, 8px);
	color: var(--color-text-muted);
	font-size: var(--text-s, 15px);
}
.vpm-bm__antall {
	margin: 0;
}
.vpm-bm__sorter {
	position: relative;
}
.vpm-bm__sorter summary {
	display: flex;
	align-items: center;
	gap: .4em;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
}
.vpm-bm__sorter summary::-webkit-details-marker {
	display: none;
}
.vpm-bm__sorter summary span {
	color: var(--color-text);
}
.vpm-bm__sorter summary::after {
	content: "";
	width: .45em;
	height: .45em;
	margin-left: .2em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
}
.vpm-bm__sorter[open] summary::after {
	transform: translateY(25%) rotate(-135deg);
}
.vpm-bm__sorter ul {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 20;
	min-width: 12em;
	margin: 0;
	padding: var(--space-2xs, 4px) 0;
	list-style: none;
	text-align: left;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card, 0px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.vpm-bm__sorter li {
	margin: 0;
}
.vpm-bm__sorter li a {
	display: block;
	padding: .6em 1em;
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
}
.vpm-bm__sorter li a:hover {
	background: var(--color-surface);
}
.vpm-bm__sorter li a[aria-current] {
	font-weight: 600;
}

/* Mange kategorier (0.113.0, #133): på PC de seks første som faner og resten under «Flere ▾». */
.vpm-bm__flere {
	display: none;
}
@media (min-width: 768px) {
	.vpm-bm--flere .vpm-bm__liste {
		flex-wrap: wrap;
		overflow: visible;
	}
	.vpm-bm--flere .vpm-bm__fane--ekstra {
		display: none;
	}
	.vpm-bm--flere .vpm-bm__flere {
		display: block;
		position: relative;
	}
	.vpm-bm__flere summary {
		display: flex;
		align-items: center;
		gap: .4em;
		min-height: 44px;
		padding: 0 2px;
		color: var(--color-text-muted);
		font-size: var(--text-s, 15px);
		letter-spacing: var(--menu-letter-spacing, 0em);
		text-transform: var(--menu-text-transform, none);
		white-space: nowrap;
		cursor: pointer;
		list-style: none;
		transition: color .2s ease;
	}
	.vpm-bm__flere summary::-webkit-details-marker {
		display: none;
	}
	.vpm-bm__flere summary::after {
		content: "";
		width: .45em;
		height: .45em;
		margin-left: .1em;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-25%) rotate(45deg);
	}
	.vpm-bm__flere details[open] summary::after {
		transform: translateY(25%) rotate(-135deg);
	}
	.vpm-bm__flere summary:hover,
	.vpm-bm__flere details[open] summary {
		color: var(--color-text);
	}
	.vpm-bm__flere summary.vpm-bm__flere-aktiv {
		color: var(--color-text);
		box-shadow: inset 0 -2px 0 var(--color-primary);
	}
	.vpm-bm__flere ul {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 20;
		min-width: 12em;
		max-height: 60vh;
		overflow-y: auto;
		margin: 0;
		padding: var(--space-2xs, 4px) 0;
		list-style: none;
		text-align: left;
		background: var(--color-bg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-card, 0px);
		box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
	}
	.vpm-bm__flere li {
		margin: 0;
	}
	.vpm-bm__flere li a {
		display: block;
		min-height: 0;
		padding: .6em 1em;
		color: var(--color-text);
		text-decoration: none;
		white-space: nowrap;
	}
	.vpm-bm__flere li a:hover {
		background: var(--color-surface);
	}
	.vpm-bm__flere li a[aria-current] {
		font-weight: 600;
	}
}

@media (max-width: 767px) {
	/* Én rad man sveiper sidelengs; svak toning til høyre viser at det finnes flere. */
	.vpm-bm__liste {
		justify-content: flex-start;
		gap: var(--space-s, 16px);
		padding-right: var(--space-m, 24px);
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--space-m, 24px)), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - var(--space-m, 24px)), transparent);
	}
}

/* Introteksten ------------------------------------------------------- */
.vpm-bi {
	max-width: 46em;
	margin: 0 auto;
	color: var(--color-text-muted);
	text-align: center;
}
.vpm-bi p {
	margin: 0 0 .8em;
}
.vpm-bi > :last-child {
	margin-bottom: 0;
}
.vpm-bi a {
	color: var(--color-text);
}

/* Prisen på kortene -------------------------------------------------- */
.vpm-kortpris {
	margin: var(--space-2xs, 4px) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-s, 15px);
}

/* ==================================================================== */
/* Bilder-siden (0.137.0, #145): søk, kategorier, format, «Vis flere»,  */
/* tekst ved musepekeren og hurtigvisning (PC). Bare designvariablene – */
/* unntak: overlegg på bilder (fast mørk toning, som toppbildene).      */
/* ==================================================================== */

.vpm-sr,
.vpm-bs__etikett {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.vpm-bm--bilder {
	display: flex;
	flex-direction: column;
	gap: var(--space-m, 24px);
	text-align: left;
}

/* Søket */
.vpm-bs__rad {
	display: flex;
	max-width: 820px;
}
.vpm-bs__felt {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 16px;
	border: 2px solid var(--color-primary);
	border-right: 0;
	border-radius: var(--radius-button, 0px) 0 0 var(--radius-button, 0px);
	background: var(--color-bg);
	color: var(--color-primary);
}
.vpm-bs__felt input {
	flex: 1;
	min-width: 0;
	height: 100%;
	min-height: 52px;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-m, 17px);
}
.vpm-bs__felt input::placeholder {
	color: var(--color-text-muted);
	opacity: 1;
}
.vpm-bs__felt:focus-within {
	box-shadow: 0 0 0 3px var(--color-border);
}
.vpm-bs__knapp {
	flex: 0 0 auto;
	min-height: 56px;
	padding: 0 28px;
	border: 2px solid var(--color-primary);
	border-radius: 0 var(--radius-button, 0px) var(--radius-button, 0px) 0;
	background: var(--color-primary);
	color: var(--color-on-primary);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.vpm-bs__knapp:hover {
	background: var(--color-primary-dark, var(--color-primary));
}
.vpm-bs__knapp:focus-visible,
.vpm-chip:focus-visible,
.vpm-bf__nullstill:focus-visible,
.vpm-mer__knapp:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Kategorier og format */
.vpm-bf {
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 16px);
	padding: var(--space-s, 16px) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.vpm-bf__rad {
	display: flex;
	align-items: flex-start;
	gap: var(--space-s, 16px);
}
.vpm-bf__navn {
	flex: 0 0 96px;
	padding-top: 12px;
	color: var(--color-text-muted);
	font-size: var(--text-xs, 13px);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.vpm-bf__valg {
	flex: 1;
	min-width: 0;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vpm-bf__valg li {
	margin: 0;
}
.vpm-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button, 0px);
	background: var(--color-bg);
	color: var(--color-text);
	font-size: var(--text-s, 15px);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, background-color .15s ease;
}
.vpm-chip:hover {
	border-color: var(--color-primary);
	color: var(--color-text);
}
.vpm-chip[aria-current] {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-on-primary);
}
.vpm-chip--format[aria-current] {
	background: var(--color-bg);
	color: var(--color-text);
	box-shadow: inset 0 0 0 1px var(--color-primary);
	font-weight: 600;
}
.vpm-chip__form {
	display: inline-block;
	border: 1.5px solid currentColor;
}
.vpm-chip__form--liggende { width: 20px; height: 13px; }
.vpm-chip__form--staende { width: 13px; height: 20px; }
.vpm-chip__form--kvadrat { width: 16px; height: 16px; }
.vpm-chip__form--panorama { width: 26px; height: 10px; }
.vpm-bf__nullstill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	color: var(--color-primary);
	font-size: var(--text-s, 15px);
	white-space: nowrap;
}
.vpm-bm--bilder .vpm-bm__rad {
	margin-top: 0;
}
.vpm-bm--bilder .vpm-bm__antall strong {
	color: var(--color-text);
}
.vpm-bf__ingen {
	margin: 0;
	color: var(--color-text-muted);
}

@media (max-width: 767px) {
	.vpm-bf__rad {
		flex-direction: column;
		gap: 8px;
	}
	.vpm-bf__navn {
		flex-basis: auto;
		padding-top: 0;
	}
	.vpm-bf__rad > .vpm-bf__valg {
		width: 100%;
	}
	.vpm-chip {
		padding: 0 12px;
		font-size: var(--text-xs, 14px);
	}
	/* Formatene er få: én rad som kan sveipes. */
	.vpm-bf__rad--format .vpm-bf__valg {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.vpm-bs__knapp {
		padding: 0 18px;
	}
}

/* «Vis flere bilder» */
.vpm-mer__sider {
	display: none !important;
}
.vpm-mer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: var(--space-l, 40px);
	text-align: center;
}
.vpm-mer__tekst {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-s, 15px);
}
.vpm-mer__linje {
	width: 240px;
	max-width: 70%;
	height: 3px;
	background: var(--color-border);
}
.vpm-mer__fyll {
	display: block;
	height: 100%;
	background: var(--color-primary);
	transition: width .3s ease;
}
.vpm-mer__knapp {
	min-height: 52px;
	padding: 0 40px;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-button, 0px);
	background: var(--color-bg);
	color: var(--color-primary);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.vpm-mer__knapp:hover {
	background: var(--color-surface);
}
.vpm-mer__knapp[disabled] {
	opacity: .6;
	cursor: progress;
}
@media (max-width: 767px) {
	.vpm-mer__knapp {
		width: 100%;
	}
}

/* Tekst ved musepekeren – bare PC med mus */
.vpm-ki {
	display: none;
}
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
	body.vpm-bilder li.product {
		position: relative;
	}
	body.vpm-bilder .vpm-ki {
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		z-index: 2;
		display: flex;
		align-items: flex-end;
		overflow: hidden;
		border-radius: var(--radius-card, 0px);
		pointer-events: none;
		opacity: 0;
		transition: opacity .2s ease;
	}
	body.vpm-bilder li.product:hover .vpm-ki,
	body.vpm-bilder li.product:focus-within .vpm-ki {
		opacity: 1;
	}
	.vpm-ki__panel {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 16px 18px;
		background: rgba(18, 22, 19, .86);
		color: #fff;
		pointer-events: auto;
		cursor: pointer;
		text-align: left;
	}
	.vpm-ki__tittel {
		margin: 0;
		font-size: var(--text-m, 18px);
		font-weight: 600;
		line-height: 1.3;
	}
	.vpm-ki__om {
		margin: 0;
		color: rgba(255, 255, 255, .85);
		font-size: var(--text-s, 14px);
		line-height: 1.45;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.vpm-ki__bunn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-top: 4px;
	}
	.vpm-ki__pris {
		font-size: var(--text-s, 15px);
	}
	.vpm-ki__knapp {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 36px;
		padding: 0 14px;
		border: 1px solid #fff;
		border-radius: var(--radius-button, 0px);
		background: transparent;
		color: #fff;
		font: inherit;
		font-size: var(--text-s, 14px);
		cursor: pointer;
	}
	.vpm-ki__knapp:hover {
		background: rgba(255, 255, 255, .15);
	}
	.vpm-ki__knapp:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.vpm-bilder .vpm-ki,
	.vpm-mer__fyll {
		transition: none;
	}
}

/* Hurtigvisning */
html.vpm-hv-apen {
	overflow: hidden;
}
.vpm-hv {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	display: none;
}
.vpm-hv[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}
.vpm-hv::backdrop {
	background: rgba(18, 22, 19, .78);
}
.vpm-hv__boks {
	display: flex;
	width: min(1160px, calc(100vw - 200px));
	height: min(720px, calc(100vh - 80px));
	background: var(--color-bg);
	color: var(--color-text);
	border-radius: var(--radius-card, 0px);
	overflow: hidden;
}
.vpm-hv__bilde {
	flex: 0 0 62%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
}
.vpm-hv__bilde img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.vpm-hv__tekst {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 44px 36px 28px;
	overflow-y: auto;
}
.vpm-hv__lukk {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	color: var(--color-text);
	cursor: pointer;
}
.vpm-hv__kat {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-xs, 13px);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.vpm-hv__tittel {
	margin: 0;
	padding-right: 36px;
	font-family: var(--font-heading, inherit);
	font-size: var(--text-xl, 30px);
	line-height: 1.2;
}
.vpm-hv__pris {
	margin: 0;
	font-size: var(--text-m, 18px);
}
.vpm-hv__om {
	margin: 0;
	color: var(--color-text);
	font-size: var(--text-s, 15px);
	line-height: 1.6;
}
.vpm-hv__mer {
	align-self: flex-start;
	color: var(--color-primary);
	font-size: var(--text-s, 15px);
}
.vpm-hv__fakta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-s, 14px);
}
.vpm-hv__fakta div {
	display: flex;
	gap: 6px;
}
.vpm-hv__fakta dt {
	color: var(--color-text);
	font-weight: 600;
}
.vpm-hv__fakta dt::after {
	content: ":";
}
.vpm-hv__fakta dd {
	margin: 0;
}
.vpm-hv__knapp {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 20px;
	border-radius: var(--radius-button, 0px);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-weight: 600;
	text-decoration: none;
}
.vpm-hv__knapp:hover {
	background: var(--color-primary-dark, var(--color-primary));
	color: var(--color-on-primary);
}
.vpm-hv__fot {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: var(--color-text-muted);
	font-size: var(--text-xs, 13px);
}
.vpm-hv__pil {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: var(--radius-button, 0px);
	background: transparent;
	color: #fff;
	cursor: pointer;
}
.vpm-hv__pil:hover {
	background: rgba(255, 255, 255, .12);
}
.vpm-hv__pil[disabled] {
	opacity: .3;
	cursor: default;
}
.vpm-hv button:focus-visible,
.vpm-hv a:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
.vpm-hv__pil:focus-visible {
	outline-color: #fff !important;
}

/* ==================================================================== */
/* Oppsettene og visningene (0.138.0, #146)                             */
/* Body-klassene vpm-oppsett-<rolig|galleri|motiver> og                 */
/* vpm-vis-<rute|rader|murverk|flate> settes av VPM_Shop_Filter.        */
/* Ingen endring i Bricks-malen: malens overskrift, introtekst, meny og */
/* produktliste flyttes bare med CSS.                                   */
/* ==================================================================== */

/* Nedtrekk ved siden av hverandre (format og sortering) */
.vpm-bm__nedtrekk {
	display: flex;
	align-items: center;
	gap: var(--space-xs, 8px);
}

/* --- Bildenes sideforhold (--r) – fra klassen på .vpm-ki ------------ */
body.vpm-bilder li.product:has(.vpm-r-5) { --r: 0.25; }
body.vpm-bilder li.product:has(.vpm-r-6) { --r: 0.3; }
body.vpm-bilder li.product:has(.vpm-r-7) { --r: 0.35; }
body.vpm-bilder li.product:has(.vpm-r-8) { --r: 0.4; }
body.vpm-bilder li.product:has(.vpm-r-9) { --r: 0.45; }
body.vpm-bilder li.product:has(.vpm-r-10) { --r: 0.5; }
body.vpm-bilder li.product:has(.vpm-r-11) { --r: 0.55; }
body.vpm-bilder li.product:has(.vpm-r-12) { --r: 0.6; }
body.vpm-bilder li.product:has(.vpm-r-13) { --r: 0.65; }
body.vpm-bilder li.product:has(.vpm-r-14) { --r: 0.7; }
body.vpm-bilder li.product:has(.vpm-r-15) { --r: 0.75; }
body.vpm-bilder li.product:has(.vpm-r-16) { --r: 0.8; }
body.vpm-bilder li.product:has(.vpm-r-17) { --r: 0.85; }
body.vpm-bilder li.product:has(.vpm-r-18) { --r: 0.9; }
body.vpm-bilder li.product:has(.vpm-r-19) { --r: 0.95; }
body.vpm-bilder li.product:has(.vpm-r-20) { --r: 1; }
body.vpm-bilder li.product:has(.vpm-r-21) { --r: 1.05; }
body.vpm-bilder li.product:has(.vpm-r-22) { --r: 1.1; }
body.vpm-bilder li.product:has(.vpm-r-23) { --r: 1.15; }
body.vpm-bilder li.product:has(.vpm-r-24) { --r: 1.2; }
body.vpm-bilder li.product:has(.vpm-r-25) { --r: 1.25; }
body.vpm-bilder li.product:has(.vpm-r-26) { --r: 1.3; }
body.vpm-bilder li.product:has(.vpm-r-27) { --r: 1.35; }
body.vpm-bilder li.product:has(.vpm-r-28) { --r: 1.4; }
body.vpm-bilder li.product:has(.vpm-r-29) { --r: 1.45; }
body.vpm-bilder li.product:has(.vpm-r-30) { --r: 1.5; }
body.vpm-bilder li.product:has(.vpm-r-31) { --r: 1.55; }
body.vpm-bilder li.product:has(.vpm-r-32) { --r: 1.6; }
body.vpm-bilder li.product:has(.vpm-r-33) { --r: 1.65; }
body.vpm-bilder li.product:has(.vpm-r-34) { --r: 1.7; }
body.vpm-bilder li.product:has(.vpm-r-35) { --r: 1.75; }
body.vpm-bilder li.product:has(.vpm-r-36) { --r: 1.8; }
body.vpm-bilder li.product:has(.vpm-r-37) { --r: 1.85; }
body.vpm-bilder li.product:has(.vpm-r-38) { --r: 1.9; }
body.vpm-bilder li.product:has(.vpm-r-39) { --r: 1.95; }
body.vpm-bilder li.product:has(.vpm-r-40) { --r: 2; }
body.vpm-bilder li.product:has(.vpm-r-41) { --r: 2.05; }
body.vpm-bilder li.product:has(.vpm-r-42) { --r: 2.1; }
body.vpm-bilder li.product:has(.vpm-r-43) { --r: 2.15; }
body.vpm-bilder li.product:has(.vpm-r-44) { --r: 2.2; }
body.vpm-bilder li.product:has(.vpm-r-45) { --r: 2.25; }
body.vpm-bilder li.product:has(.vpm-r-46) { --r: 2.3; }
body.vpm-bilder li.product:has(.vpm-r-47) { --r: 2.35; }
body.vpm-bilder li.product:has(.vpm-r-48) { --r: 2.4; }
body.vpm-bilder li.product:has(.vpm-r-49) { --r: 2.45; }
body.vpm-bilder li.product:has(.vpm-r-50) { --r: 2.5; }
body.vpm-bilder li.product:has(.vpm-r-51) { --r: 2.55; }
body.vpm-bilder li.product:has(.vpm-r-52) { --r: 2.6; }
body.vpm-bilder li.product:has(.vpm-r-53) { --r: 2.65; }
body.vpm-bilder li.product:has(.vpm-r-54) { --r: 2.7; }
body.vpm-bilder li.product:has(.vpm-r-55) { --r: 2.75; }
body.vpm-bilder li.product:has(.vpm-r-56) { --r: 2.8; }
body.vpm-bilder li.product:has(.vpm-r-57) { --r: 2.85; }
body.vpm-bilder li.product:has(.vpm-r-58) { --r: 2.9; }
body.vpm-bilder li.product:has(.vpm-r-59) { --r: 2.95; }
body.vpm-bilder li.product:has(.vpm-r-60) { --r: 3; }
body.vpm-bilder li.product:has(.vpm-r-61) { --r: 3.05; }
body.vpm-bilder li.product:has(.vpm-r-62) { --r: 3.1; }
body.vpm-bilder li.product:has(.vpm-r-63) { --r: 3.15; }
body.vpm-bilder li.product:has(.vpm-r-64) { --r: 3.2; }
body.vpm-bilder li.product:has(.vpm-r-65) { --r: 3.25; }
body.vpm-bilder li.product:has(.vpm-r-66) { --r: 3.3; }
body.vpm-bilder li.product:has(.vpm-r-67) { --r: 3.35; }
body.vpm-bilder li.product:has(.vpm-r-68) { --r: 3.4; }
body.vpm-bilder li.product:has(.vpm-r-69) { --r: 3.45; }
body.vpm-bilder li.product:has(.vpm-r-70) { --r: 3.5; }
body.vpm-bilder li.product:has(.vpm-r-71) { --r: 3.55; }
body.vpm-bilder li.product:has(.vpm-r-72) { --r: 3.6; }
body.vpm-bilder li.product:has(.vpm-r-73) { --r: 3.65; }
body.vpm-bilder li.product:has(.vpm-r-74) { --r: 3.7; }
body.vpm-bilder li.product:has(.vpm-r-75) { --r: 3.75; }
body.vpm-bilder li.product:has(.vpm-r-76) { --r: 3.8; }
body.vpm-bilder li.product:has(.vpm-r-77) { --r: 3.85; }
body.vpm-bilder li.product:has(.vpm-r-78) { --r: 3.9; }
body.vpm-bilder li.product:has(.vpm-r-79) { --r: 3.95; }
body.vpm-bilder li.product:has(.vpm-r-80) { --r: 4; }

/* --- Eget format: rette rader ---------------------------------------- */
/* Hvert kort vokser i forhold til sideforholdet, så alle i en rad blir  */
/* like høye og viser hele bildet. Siste rad fylles ikke ut (::after).   */
body.vpm-bilder.vpm-vis-rader ul.products {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--space-l, 40px) var(--space-s, 16px) !important;
}
body.vpm-bilder.vpm-vis-rader ul.products::before {
	display: none;
}
body.vpm-bilder.vpm-vis-rader ul.products::after {
	content: "";
	flex: 1000000 1 0px;
}
body.vpm-bilder.vpm-vis-rader ul.products > li.product {
	--shop-image-ratio: var(--r, 1.5);
	--shop-image-fit: cover;
	--shop-image-pad: 0px;
	--shop-image-bg: transparent;
	flex-grow: calc(var(--r, 1.5) * 100);
	flex-shrink: 1;
	flex-basis: calc(var(--r, 1.5) * var(--shop-row-h, 220px));
	width: auto !important;
	min-width: 0;
	max-width: 100%;
	margin: 0 !important;
	float: none !important;
}
@media (max-width: 767px) {
	body.vpm-bilder.vpm-vis-rader ul.products {
		gap: var(--space-m, 24px) 10px !important;
	}
	body.vpm-bilder.vpm-vis-rader ul.products > li.product {
		flex-basis: calc(var(--r, 1.5) * var(--shop-row-h-mobile, 120px));
	}
}

/* --- Eget format: murverk -------------------------------------------- */
body.vpm-bilder.vpm-vis-murverk ul.products {
	display: block !important;
	columns: var(--shop-columns, 3);
	column-gap: var(--space-m, 24px);
}
body.vpm-bilder.vpm-vis-murverk ul.products::before,
body.vpm-bilder.vpm-vis-murverk ul.products::after {
	display: none;
}
body.vpm-bilder.vpm-vis-murverk ul.products > li.product {
	--shop-image-ratio: var(--r, 1.5);
	--shop-image-fit: cover;
	--shop-image-pad: 0px;
	--shop-image-bg: transparent;
	display: inline-block;
	width: 100% !important;
	margin: 0 0 var(--space-l, 40px) !important;
	float: none !important;
	break-inside: avoid;
	vertical-align: top;
}
@media (max-width: 991px) {
	body.vpm-bilder.vpm-vis-murverk ul.products {
		columns: 2;
		column-gap: var(--space-s, 16px);
	}
	body.vpm-bilder.vpm-vis-murverk ul.products > li.product {
		margin-bottom: var(--space-m, 24px) !important;
	}
}

/* --- Eget format på flate -------------------------------------------- */
body.vpm-bilder.vpm-vis-flate li.product {
	--shop-image-ratio: 1 / 1;
	--shop-image-fit: contain;
	--shop-image-bg: var(--color-surface);
	--shop-image-pad: 10%;
}

/* --- Galleri: flaten bak toppen -------------------------------------- */
/* Malens beholder blir et rutenett med én kolonne. Overskriften (rad 1), */
/* introteksten (rad 2) og søket (rad 3) legges oppå flaten (rad 1–3),    */
/* som går fra kant til kant. Resten kommer under i rekkefølge.          */
body.vpm-oppsett-galleri [data-vapr-seksjon="produkter"] {
	padding-top: 0 !important;
	overflow-x: clip;
}
body.vpm-oppsett-galleri [data-vapr-seksjon="produkter"] > .brxe-container {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}
body.vpm-oppsett-galleri [data-vapr-seksjon="produkter"] > .brxe-container > :is(h1, .brxe-heading):first-child {
	grid-area: 1 / 1;
	position: relative;
	z-index: 1;
	padding-top: var(--shop-top-pad, var(--space-xl, 64px));
	color: var(--shop-top-text, var(--color-text));
}
body.vpm-oppsett-galleri [data-vapr-seksjon="produkter"] > .brxe-container > .brxe-vapr-butikkintro {
	grid-area: 2 / 1;
	position: relative;
	z-index: 1;
	justify-self: center;
	max-width: 46em;
	color: var(--shop-top-muted, var(--color-text-muted));
}
body.vpm-oppsett-galleri [data-vapr-seksjon="produkter"] > .brxe-container > .brxe-vapr-butikkintro :is(p, a, strong, em) {
	color: inherit;
}
body.vpm-oppsett-galleri [data-vapr-seksjon="produkter"] > .brxe-container > .brxe-vapr-butikkmeny,
body.vpm-oppsett-galleri .vpm-bm--galleri {
	display: contents;
}
.vpm-gt {
	grid-area: 1 / 1 / 4 / 2;
	align-self: stretch;
	justify-self: stretch;
	position: relative;
	overflow: hidden;
	margin-inline: calc(50% - 50vw);
	background: var(--shop-top-bg, var(--color-surface));
}
.vpm-gt__bilde {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--fokus-butikk-toppbilde, center);
}
.vpm-gt--bilde::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, calc(var(--shop-top-tone, .4) * .8)), rgba(0, 0, 0, var(--shop-top-tone, .4)));
}
body.vpm-topp-bilde {
	--shop-top-text: #fff;
	--shop-top-muted: rgba(255, 255, 255, .9);
}
body.vpm-topp-bilde [data-vapr-seksjon="produkter"] > .brxe-container > :is(h1, .brxe-heading):first-child {
	text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.vpm-bm--galleri .vpm-bs {
	grid-area: 3 / 1;
	position: relative;
	z-index: 1;
	justify-self: center;
	width: min(640px, 100%);
	padding-bottom: var(--shop-top-pad-b, var(--space-l, 40px));
}
body.vpm-topp-bilde .vpm-bm--galleri .vpm-bs {
	padding-bottom: var(--shop-top-pad, var(--space-xl, 64px));
}
/* Søket som én pille med knappen inni */
.vpm-bm--galleri .vpm-bs__rad {
	max-width: none;
	align-items: center;
	gap: 8px;
	min-height: 58px;
	padding: 5px 5px 5px 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button, 0px);
	background: var(--color-bg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.vpm-bm--galleri .vpm-bs__rad:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-border);
}
.vpm-bm--galleri .vpm-bs__felt {
	min-height: 46px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-text-muted);
}
.vpm-bm--galleri .vpm-bs__felt:focus-within {
	box-shadow: none;
}
.vpm-bm--galleri .vpm-bs__felt input {
	min-height: 44px;
}
.vpm-bm--galleri .vpm-bs__knapp {
	min-height: 46px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--radius-button, 0px);
}
/* Kategoriene midt under toppen, uten navn foran */
.vpm-bm--galleri .vpm-bf {
	padding: var(--space-m, 24px) 0 var(--space-s, 16px);
	border: 0;
}
.vpm-bm--galleri .vpm-bf__rad {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.vpm-bm--galleri .vpm-bf__navn {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.vpm-bm--galleri .vpm-bf__valg {
	flex: 0 1 auto;
	justify-content: center;
}
.vpm-bm--galleri .vpm-bm__rad {
	padding-top: var(--space-s, 16px);
	margin-bottom: var(--space-m, 24px);
	border-top: 1px solid var(--color-border);
}

/* --- Galleri: linjen som følger med ---------------------------------- */
.vpm-gl {
	position: fixed;
	top: var(--vpm-gl-top, 0px);
	left: 0;
	right: 0;
	z-index: 990;
	text-align: left;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.vpm-gl.is-synlig {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity .2s ease, transform .2s ease;
}
.vpm-gl[hidden] {
	display: none;
}
.vpm-gl__rad {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px max(20px, calc((100vw - 1100px) / 2));
	background: var(--color-bg);
	box-shadow: 0 1px 0 var(--color-border), 0 6px 14px rgba(0, 0, 0, .06);
	font-size: var(--text-s, 15px);
}
.vpm-gl__kat,
.vpm-gl__rad .vpm-bm__sorter summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button, 0px);
	background: var(--color-bg);
	color: var(--color-text);
	font: inherit;
	font-size: var(--text-s, 15px);
	cursor: pointer;
}
.vpm-gl__kat {
	min-width: 0;
	max-width: 46%;
	white-space: nowrap;
}
.vpm-gl__kat > span {
	overflow: hidden;
	text-overflow: ellipsis;
}
.vpm-gl__kat::after {
	content: "";
	flex: 0 0 auto;
	width: .45em;
	height: .45em;
	margin-left: .2em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
}
.vpm-gl__kat[aria-expanded="true"] {
	border-color: var(--color-primary);
}
.vpm-gl__kat[aria-expanded="true"]::after {
	transform: translateY(25%) rotate(-135deg);
}
.vpm-gl__kat:hover,
.vpm-gl__rad .vpm-bm__sorter summary:hover {
	border-color: var(--color-primary);
}
.vpm-gl__nullstill {
	color: var(--color-primary);
	font-size: var(--text-s, 15px);
	white-space: nowrap;
}
.vpm-gl__fyll {
	flex: 1;
}
.vpm-gl__antall {
	color: var(--color-text-muted);
	white-space: nowrap;
}
.vpm-gl__antall strong {
	color: var(--color-text);
}
.vpm-gl__sok {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button, 0px);
	color: var(--color-text);
}
.vpm-gl__sok:hover {
	border-color: var(--color-primary);
	color: var(--color-text);
}
.vpm-gl :is(button, a, summary):focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
.vpm-gl__felt {
	position: absolute;
	top: calc(100% + 8px);
	left: max(20px, calc((100vw - 1100px) / 2));
	width: min(760px, calc(100vw - 40px));
	max-height: calc(100vh - var(--vpm-gl-top, 0px) - 90px);
	overflow-y: auto;
	padding: 20px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card, 0px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
}
.vpm-gl__felt[hidden] {
	display: none;
}
.vpm-gl__topp {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.vpm-gl__navn {
	flex: 1;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-xs, 13px);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.vpm-gl__lukk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -8px -8px -8px 0;
	border: 0;
	background: none;
	color: var(--color-text);
	cursor: pointer;
}
.vpm-gl__felt .vpm-bf__valg {
	justify-content: flex-start;
}
.vpm-gl__under {
	margin: 16px 0 8px;
	color: var(--color-text-muted);
	font-size: var(--text-xs, 13px);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.vpm-gl__vis {
	width: 100%;
	min-height: 50px;
	margin-top: 20px;
	border: 0;
	border-radius: var(--radius-button, 0px);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.vpm-gl__mob {
	display: none !important;
}
@media (max-width: 767px) {
	.vpm-gl__pc,
	.vpm-gl__fyll,
	.vpm-gl__rad > .vpm-gl__nullstill,
	.vpm-gl__rad > .vpm-bm__sorter,
	.vpm-gl__sok {
		display: none !important;
	}
	.vpm-gl__mob {
		display: revert !important;
	}
	.vpm-gl__rad {
		padding: 8px 16px;
	}
	.vpm-gl__kat {
		flex: 1;
		max-width: none;
		justify-content: space-between;
	}
	.vpm-gl__felt {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-height: 82vh;
		padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
		border: 0;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
		overscroll-behavior: contain;
	}
	.vpm-gl__navn {
		color: var(--color-text);
		font-size: var(--text-m, 17px);
		letter-spacing: 0;
		text-transform: none;
	}
	/* Skyggen bak feltet nedenfra */
	.vpm-gl.is-apen::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .35);
	}
	.vpm-gl__felt .vpm-bf__valg {
		gap: 6px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.vpm-gl,
	.vpm-gl.is-synlig {
		transition: none;
	}
}

/* --- Motiver: kategoriene som bildekort ------------------------------ */
.vpm-mk {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--space-s, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.vpm-mk li {
	margin: 0;
}
.vpm-mk__kort {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--color-text);
	text-decoration: none;
}
.vpm-mk__bilde {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-card, 0px);
	background: var(--color-surface);
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow .15s ease;
}
.vpm-mk__bilde img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.vpm-mk__kort--alle .vpm-mk__bilde {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
}
.vpm-mk__navn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-s, 15px);
	line-height: 1.3;
}
.vpm-mk__kort:hover .vpm-mk__bilde img {
	transform: scale(1.04);
}
.vpm-mk__kort:hover .vpm-mk__navn {
	text-decoration: underline;
	text-underline-offset: .2em;
}
.vpm-mk__kort[aria-current] .vpm-mk__bilde {
	box-shadow: 0 0 0 3px var(--color-primary);
}
.vpm-mk__kort[aria-current] .vpm-mk__navn {
	font-weight: 600;
}
.vpm-mk__kort:focus-visible {
	outline: none;
}
.vpm-mk__kort:focus-visible .vpm-mk__bilde {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}
.vpm-bm--motiver .vpm-bf__rad:first-child {
	flex-wrap: wrap;
}
@media (max-width: 767px) {
	/* Én rad man sveiper sidelengs – to og et halvt kort synes. */
	.vpm-mk {
		display: flex;
		width: calc(100% + 8px);
		margin: -4px;
		padding: 4px;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	.vpm-mk::-webkit-scrollbar {
		display: none;
	}
	.vpm-mk li {
		flex: 0 0 38%;
		scroll-snap-align: start;
	}
}
@media (prefers-reduced-motion: reduce) {
	.vpm-mk__bilde img,
	.vpm-mk__bilde {
		transition: none;
	}
}

/* --- Galleri på mobil ------------------------------------------------- */
@media (max-width: 767px) {
	body.vpm-oppsett-galleri [data-vapr-seksjon="produkter"] > .brxe-container > :is(h1, .brxe-heading):first-child {
		padding-top: var(--shop-top-pad-mobile, var(--space-l, 40px));
	}
	.vpm-bm--galleri .vpm-bs {
		padding-bottom: var(--space-m, 24px);
	}
	body.vpm-topp-bilde .vpm-bm--galleri .vpm-bs {
		padding-bottom: var(--shop-top-pad-mobile, var(--space-l, 40px));
	}
	.vpm-gt__bilde {
		object-position: var(--fokus-butikk-toppbilde-mobil, var(--fokus-butikk-toppbilde, center));
	}
	.vpm-bm--galleri .vpm-bf__rad {
		flex-direction: row;
		justify-content: flex-start;
	}
	.vpm-bm--galleri .vpm-bf__valg {
		justify-content: flex-start;
	}
	.vpm-bm--galleri .vpm-bm__rad {
		margin-bottom: var(--space-s, 16px);
	}
	.vpm-bm--galleri .vpm-bm__nedtrekk .vpm-bm__sorter summary {
		gap: .3em;
	}
	/* Søkeknappen skjules på mobil (tastaturet har «Søk») – den står fortsatt for skjermlesere. */
	.vpm-bm--galleri .vpm-bs__knapp {
		position: absolute;
		width: 1px;
		height: 1px;
		min-height: 0;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.vpm-bm--galleri .vpm-bs__rad {
		min-height: 52px;
		padding: 3px 16px;
	}
}