/*
 * Wrooom Katalog — frontend.
 *
 * Everything below is expressed in the theme's own variables and idioms, so the
 * catalogue reads as the same site as before: dark navy cards on the navy
 * ground, the bright blue as the one accent, pill buttons and rounded fields.
 * Change the palette in the customizer and this follows. Remove it entirely
 * with wp_dequeue_style( 'wrooom' ).
 */

.wrooom-soeg,
.wrooom-vare,
.wrooom-vare__detaljer {
	--wrooom-kort: var(--global-palette9, #082a42);
	--wrooom-kant: rgba(255, 255, 255, 0.09);
	--wrooom-accent: var(--global-palette1, #23a9e0);
	--wrooom-accent-m: var(--global-palette2, #0d73ba);
	--wrooom-daempet: var(--global-palette6, #cbd2d9);
	--wrooom-radius: 1em;
}

/* ---------------------------------------------------------- fælles ---- */

.wrooom-forhandlere,
.wrooom-liste {
	list-style: none;
	margin: 0 0 2em;
	padding: 0;
}

.wrooom-etiket,
.wrooom-liste__forhandlere,
.wrooom-pris__forhandlere,
.wrooom-soeg__felt > label {
	font-size: 0.7em;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wrooom-accent);
}

/* ------------------------------------------------- varekort i liste ---- */

.wrooom-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.25rem;
}

.wrooom-liste__vare {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem;
	background: var(--wrooom-kort);
	border-radius: var(--wrooom-radius);
	border: 1px solid transparent;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.wrooom-liste__vare:hover,
.wrooom-liste__vare:focus-within {
	transform: translateY(-2px);
	border-color: var(--wrooom-accent);
}

/* Forhandlernes billeder ligger på hvid baggrund; en lys flade under dem
   holder gennemsigtige PNG'er synlige på det mørke kort. */
.wrooom-liste__billede {
	width: 100%;
	height: 160px;
	object-fit: contain;
	background: var(--global-palette3, #fff);
	border-radius: calc(var(--wrooom-radius) - 0.4em);
	padding: 0.6rem;
	margin-bottom: 0.4rem;
}

.wrooom-liste__titel {
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	color: inherit;
}

.wrooom-liste__titel:hover,
.wrooom-liste__titel:focus {
	color: var(--wrooom-accent);
}

.wrooom-liste__pris {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 1.05em;
}

/* ------------------------------------------------------- varesiden ---- */

.wrooom-vare__billede img {
	max-width: 340px;
	height: auto;
	background: var(--global-palette3, #fff);
	border-radius: var(--wrooom-radius);
	padding: 1rem;
}

.wrooom-pris {
	font-size: 1.6em;
	font-weight: 700;
	margin: 0.6em 0 1em;
	line-height: 1.2;
}

.wrooom-pris__beloeb {
	font-variant-numeric: tabular-nums;
}

.wrooom-pris__sep {
	color: var(--wrooom-daempet);
	opacity: 0.5;
	font-weight: 400;
	margin: 0 0.15em;
}

.wrooom-vare__overskrift {
	font-size: 1.1em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 1.5em 0 0.6em;
}

/* Forhandlerlisten — det kataloget kan, som ingen enkelt shop kan */
.wrooom-forhandlere {
	background: var(--wrooom-kort);
	border-radius: var(--wrooom-radius);
	overflow: hidden;
}

.wrooom-forhandler {
	display: grid;
	grid-template-columns: minmax(8rem, 1.3fr) auto auto minmax(6rem, 1fr) auto;
	align-items: center;
	gap: 0.4rem 1.25rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--wrooom-kant);
}

.wrooom-forhandlere > .wrooom-forhandler:last-child {
	border-bottom: 0;
}

.wrooom-forhandler__navn {
	font-weight: 700;
}

.wrooom-forhandler__pris {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-weight: 700;
	font-size: 1.1em;
}

.wrooom-forhandler__lager {
	font-size: 0.8em;
	color: var(--wrooom-daempet);
	white-space: nowrap;
}

.wrooom-forhandler__varenr {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 0.78em;
	color: var(--wrooom-daempet);
}

.wrooom-forhandler--udsolgt {
	opacity: 0.55;
}

/* Knappen følger temaets pilleform */
.wrooom-forhandler__link {
	display: inline-block;
	white-space: nowrap;
	background: var(--wrooom-accent-m);
	color: var(--global-palette3, #fff);
	padding: 0.75em 1.4em;
	border-radius: 100px;
	font-size: 0.82em;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}

.wrooom-forhandler__link:hover,
.wrooom-forhandler__link:focus {
	background: var(--wrooom-accent);
	color: var(--global-palette7, #041b28);
}

.wrooom-varenumre {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 0.85em;
	color: var(--wrooom-daempet);
}

.wrooom-vare__maerker a {
	color: var(--wrooom-accent);
}

.wrooom-forhandlere__tom {
	padding: 1.25rem;
	background: var(--wrooom-kort);
	border-radius: var(--wrooom-radius);
	color: var(--wrooom-daempet);
}

/* ------------------------------------------------------- søgningen ---- */

.wrooom-soeg__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.9rem 1.1rem;
	margin-bottom: 2rem;
	padding: 1.25rem;
	background: var(--wrooom-kort);
	border-radius: var(--wrooom-radius);
}

.wrooom-soeg__form--enkel {
	background: none;
	padding: 0;
	gap: 0.6rem;
	align-items: center;
}

.wrooom-soeg__felt {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.wrooom-soeg__felt--tekst {
	flex: 1 1 20rem;
}

.wrooom-soeg__form input[type="search"] {
	width: 100%;
	background: #eee;
	color: #000;
	border: 2px solid var(--wrooom-accent);
	border-radius: 30px;
	padding: 0.75em 1.4em;
}

.wrooom-soeg__form select {
	background: #eee;
	color: #000 !important;
	border: 2px solid transparent;
	border-radius: 30px;
	padding: 0.7em 1.2em;
	max-width: 15rem;
}

.wrooom-soeg__form select:focus {
	border-color: var(--wrooom-accent);
}

.wrooom-soeg__felt--afkryds {
	flex-direction: row;
	gap: 1.25rem;
	align-items: center;
	padding-bottom: 0.6em;
}

.wrooom-soeg__felt--afkryds label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85em;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

.wrooom-soeg__form button {
	background: var(--wrooom-accent-m);
	color: var(--global-palette3, #fff);
	border: 0;
	border-radius: 100px;
	padding: 0.85em 1.8em;
	font-size: 0.9em;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wrooom-soeg__form button:hover,
.wrooom-soeg__form button:focus {
	background: var(--wrooom-accent);
	color: var(--global-palette7, #041b28);
}

.wrooom-soeg__antal {
	font-size: 0.85em;
	color: var(--wrooom-daempet);
	margin-bottom: 1rem;
}

.wrooom-soeg__tom {
	padding: 1.5rem;
	background: var(--wrooom-kort);
	border-radius: var(--wrooom-radius);
	color: var(--wrooom-daempet);
}

.wrooom-sider {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 2rem;
}

.wrooom-sider .page-numbers {
	display: inline-block;
	min-width: 2.6em;
	text-align: center;
	padding: 0.6em 1em;
	border-radius: 100px;
	background: var(--wrooom-kort);
	color: inherit;
	text-decoration: none;
	font-size: 0.9em;
}

.wrooom-sider .page-numbers:hover,
.wrooom-sider .page-numbers:focus {
	background: var(--wrooom-accent-m);
	color: var(--global-palette3, #fff);
}

.wrooom-sider .page-numbers.current {
	background: var(--wrooom-accent);
	color: var(--global-palette7, #041b28);
	font-weight: 700;
}

.wrooom-sider .page-numbers.dots {
	background: none;
}

/* ----------------------------------------------------------- småt ---- */

@media (max-width: 782px) {
	.wrooom-forhandler {
		grid-template-columns: 1fr auto;
		gap: 0.3rem 1rem;
	}

	.wrooom-forhandler__varenr {
		grid-column: 1 / -1;
	}

	.wrooom-forhandler__link {
		grid-column: 1 / -1;
		text-align: center;
		margin-top: 0.5rem;
	}

	.wrooom-soeg__form select {
		max-width: none;
		width: 100%;
	}

	.wrooom-soeg__felt {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wrooom-liste__vare,
	.wrooom-forhandler__link,
	.wrooom-soeg__form button {
		transition: none;
	}

	.wrooom-liste__vare:hover {
		transform: none;
	}
}

/* The bare hero form is one line: field, then button. */
.wrooom-soeg__form--enkel {
	flex-wrap: nowrap;
}

.wrooom-soeg__form--enkel input[type="search"] {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.wrooom-soeg__form--enkel button {
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	.wrooom-soeg__form--enkel {
		flex-wrap: wrap;
	}

	.wrooom-soeg__form--enkel input[type="search"] {
		flex: 1 1 100%;
	}
}

/* Term archives: the theme's own description, kept in the catalogue rhythm. */
.wrooom-arkiv__beskrivelse {
	max-width: 46rem;
	margin: 0 0 1.5rem;
	color: var(--global-palette6, #cbd2d9);
}

/* On a wide screen the picture stands beside the price and the dealers,
   the way a product page normally reads. Without a picture nothing moves. */
@media (min-width: 900px) {
	.wrooom-vare:has(.wrooom-vare__billede) {
		display: grid;
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		column-gap: 2.5rem;
		align-items: start;
	}

	.wrooom-vare:has(.wrooom-vare__billede) > .wrooom-vare__billede {
		grid-column: 1;
		grid-row: 1 / span 20;
		margin: 0;
	}

	.wrooom-vare:has(.wrooom-vare__billede) > *:not(.wrooom-vare__billede) {
		grid-column: 2;
	}

	.wrooom-vare__billede img {
		width: 100%;
		max-width: none;
	}
}

/* On a phone the five filters would push the results off the screen, so the
   drop-downs pair up two to a row and the button spans the width. */
@media (max-width: 782px) {
	.wrooom-soeg__form {
		gap: 0.7rem 0.7rem;
		padding: 1rem;
	}

	.wrooom-soeg__form > .wrooom-soeg__felt {
		flex: 1 1 calc(50% - 0.7rem);
		min-width: 0;
	}

	.wrooom-soeg__form > .wrooom-soeg__felt--tekst,
	.wrooom-soeg__form > .wrooom-soeg__felt--afkryds,
	.wrooom-soeg__form > .wrooom-soeg__felt--knap {
		flex: 1 1 100%;
	}

	.wrooom-soeg__form select {
		max-width: none;
		width: 100%;
		padding: 0.6em 1em;
	}

	.wrooom-soeg__form input[type="search"] {
		padding: 0.6em 1.2em;
	}

	.wrooom-soeg__felt--knap button {
		width: 100%;
	}
}

/* Phones: two cards to a row, and drop-downs that do not clip their label. */
@media (max-width: 600px) {
	.wrooom-liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.8rem;
	}

	.wrooom-liste__vare {
		padding: 0.7rem;
	}

	.wrooom-liste__billede {
		height: 110px;
	}

	.wrooom-liste__titel {
		font-size: 0.9em;
	}

	.wrooom-soeg__form select {
		padding: 0.6em 0.8em;
		font-size: 0.95em;
	}
}

/* Hero-søgningen: feltet skal ikke spænde hele vejen ud i en bred sektion,
   og teksten i det tomme felt skal kunne læses. */
.wrooom-soeg__form--enkel {
	width: 70%;
	max-width: 60rem;
	margin-inline: auto;
}

.wrooom-soeg__form input[type="search"]::placeholder {
	color: #4a5560;
	opacity: 1;
}

@media (max-width: 782px) {
	.wrooom-soeg__form--enkel {
		width: 100%;
	}
}

/* Hele varekortet er klikbart, ikke kun titlen. Linkets pseudoelement
   dækker kortet, så markup og skærmlæsere er upaåvirkede. */
.wrooom-liste__vare {
	position: relative;
}

.wrooom-liste__titel::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Rullelisternes punkter arver ellers sidens mørke bund og bliver sort på
   mørkeblåt. De skal se ud som feltet selv. */
.wrooom-soeg__form select option {
	background-color: #fff;
	color: #000;
}

/* Varer uden billede får en pladsholder i samme størrelse, så rækkerne står
   lige. Pris og forhandlerantal skubbes ned i bunden af kortet. */
.wrooom-liste__billede--tom {
	display: block;
}

.wrooom-liste__titel {
	margin-top: 0.15em;
}

.wrooom-liste__pris {
	margin-top: auto;
}

/* Forhandlerrækken, enkel: navn øverst, lagerstatus og varenummer stille
   nedenunder, pris og knap i hver sin kolonne til højre. */
.wrooom-forhandler {
	/* Faste kolonner, så varenumrene står under hinanden fra række til række. */
	grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr) auto auto;
	gap: 0.15rem 1.25rem;
}

.wrooom-forhandler__navn {
	grid-column: 1;
	grid-row: 1;
}

.wrooom-forhandler__lager {
	grid-column: 1;
	grid-row: 2;
}

.wrooom-forhandler__varenr {
	grid-column: 2;
	grid-row: 2;
}

.wrooom-forhandler__pris {
	grid-column: 3;
	grid-row: 1 / span 2;
	text-align: right;
}

.wrooom-forhandler__link {
	grid-column: 4;
	grid-row: 1 / span 2;
	white-space: nowrap;
}

@media (max-width: 782px) {
	.wrooom-forhandler {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.wrooom-forhandler__navn {
		grid-column: 1;
		grid-row: 1;
	}

	.wrooom-forhandler__pris {
		grid-column: 2;
		grid-row: 1;
	}

	.wrooom-forhandler__lager {
		grid-column: 1;
		grid-row: 2;
	}

	.wrooom-forhandler__varenr {
		grid-column: 2;
		grid-row: 2;
		text-align: right;
	}

	.wrooom-forhandler__link {
		grid-column: 1 / -1;
		grid-row: 3;
		text-align: center;
		margin-top: 0.6rem;
	}
}

/* Varenummeret står under forhandlerens navn. "Ikke på lager" — den eneste
   lagerbesked der er en oplysning — står ved siden af. */
.wrooom-forhandler__varenr {
	grid-column: 1;
	grid-row: 2;
}

.wrooom-forhandler__lager {
	grid-column: 2;
	grid-row: 2;
}

@media (max-width: 782px) {
	.wrooom-forhandler__varenr {
		grid-column: 1;
		grid-row: 2;
		text-align: left;
	}

	.wrooom-forhandler__lager {
		grid-column: 2;
		grid-row: 2;
		text-align: right;
	}
}

/* Pladsholderen er en motorcykel, ikke et generisk billedikon. Inline SVG,
   så der ikke hentes en fil for hver vare uden billede. */
.wrooom-liste__billede--tom,
.wrooom-vare__billede--tom {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40' fill='none' stroke='%239aa7b4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='28' r='8' stroke-width='3'/%3E%3Ccircle cx='50' cy='28' r='8' stroke-width='3'/%3E%3Cpath stroke-width='2.5' d='M14 28l9-3'/%3E%3Cpath fill='%239aa7b4' stroke='none' d='M23 25h9a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2h-9a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2z'/%3E%3Cpath fill='%239aa7b4' stroke='none' d='M22 18c3-5 10-6 14-3l-3 3z'/%3E%3Cpath stroke-width='2.8' d='M13 16h9'/%3E%3Cpath stroke-width='2.5' d='M36 15l7-4'/%3E%3Cpath stroke-width='2.5' d='M40 10h6'/%3E%3Cpath stroke-width='2.5' d='M43 12l7 16'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--global-palette5, #edf2f7);
}

.wrooom-liste__billede--tom {
	background-size: 62px 39px;
}

/* Varesiden: samme flade som et rigtigt produktbillede ville have. */
.wrooom-vare__billede--tom {
	display: block;
	width: 100%;
	max-width: 340px;
	aspect-ratio: 1 / 1;
	border-radius: var(--wrooom-radius);
	background-size: 45% auto;
}

@media (min-width: 900px) {
	.wrooom-vare__billede--tom {
		max-width: none;
	}
}

@media (max-width: 600px) {
	.wrooom-liste__billede--tom {
		background-size: 52px 33px;
	}
}

/* Temaet sætter hvid tekst på fokuserede felter; her er bunden lys. */
.wrooom-soeg__form input[type="search"],
.wrooom-soeg__form input[type="search"]:focus,
.wrooom-soeg__form input[type="search"]:focus-visible,
.wrooom-soeg__form select:focus {
	color: #000;
}

/* Felt og knap i hero-søgningen skal have samme højde. */
.wrooom-soeg__form--enkel {
	align-items: stretch;
}

.wrooom-soeg__form--enkel input[type="search"],
.wrooom-soeg__form--enkel button {
	line-height: 1.2;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
}

/* Temaets ul-indrykning må ikke skubbe varekortene ind på sider hvor listen
   står i indholdsområdet. */
ul.wrooom-liste {
	padding: 0;
	margin-left: 0;
	list-style: none;
}

/* Knapfeltet har en usynlig etiket, så det har samme opbygning som de andre
   felter og dermed samme højde og bundlinje. */
.wrooom-soeg__afstand {
	display: block;
	font-size: 0.7em;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
	line-height: inherit;
}

.wrooom-soeg__form > .wrooom-soeg__felt--knap {
	align-self: auto;
	justify-content: flex-end;
}

.wrooom-soeg__form--enkel .wrooom-soeg__afstand {
	display: none;
}

/* Ens felthoejder i soegeformularen. */
.wrooom-soeg__form input[type="search"],
.wrooom-soeg__form select,
.wrooom-soeg__form button {
	min-height: 3.25rem;
	padding-top: 0;
	padding-bottom: 0;
}

.wrooom-soeg__form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Temaets .single-content ul { padding: 2em } skubber listerne ind på sider,
   hvor kataloget står i indholdsområdet. Katalogets egne lister har ingen
   punkttegn og skal holde kant med resten. */
.wrooom-soeg ul.wrooom-liste,
.single-content ul.wrooom-liste,
.entry-content ul.wrooom-liste,
.wrooom-vare ul.wrooom-forhandlere,
.single-content ul.wrooom-forhandlere,
.entry-content ul.wrooom-forhandlere {
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}

/* På telefon står knappen i fuld bredde på sin egen linje; den usynlige
   etiket ville bare lave et hul over den. */
@media (max-width: 782px) {
	.wrooom-soeg__afstand {
		display: none;
	}
}

/* Alle felter har nu samme opbygning og højde, så de justeres fra toppen.
   Med flex-end lagde knappen sig et hak lavere end rullelisterne. */
.wrooom-soeg__form {
	align-items: flex-start;
}

.wrooom-soeg__form--enkel {
	align-items: stretch;
}

/* Temaet farver fokuserede felter hvidt på mørkeblåt. Katalogets felter er
   lyse, så de beholder deres egne farver når de får fokus. */
.wrooom-soeg__form select:focus,
.wrooom-soeg__form select:focus-visible,
.wrooom-soeg__form input[type="search"]:focus,
.wrooom-soeg__form input[type="search"]:focus-visible {
	background-color: #eee;
	color: #000;
	box-shadow: none;
}

.wrooom-soeg__form select:focus option,
.wrooom-soeg__form select option {
	background-color: #fff;
	color: #000;
}

/* Står kortene på en sektion i samme farve som kortet selv — som på
   forsidens fanebladsstrimmel — forsvinder de. Dér løftes de et trin. */
.kt-tab-inner-content .wrooom-liste__vare {
	background: #10395a;
	background: color-mix(in srgb, var(--global-palette9, #082a42) 86%, #ffffff);
}

/* Telefon: hero-søgningen står i fuld bredde — felt øverst, knap under. */
@media (max-width: 600px) {
	.wrooom-soeg__form--enkel button {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* Varetitler er alt fra to ord til en linje med tre varenumre. Uden en fast
   højde bliver rækkerne ujævne, og pris og forhandlerantal løb fra hinanden.
   Titlen fylder højst tre linjer og altid mindst tre linjers højde; hele
   titlen står på varesiden. */
.wrooom-liste__titel {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(3 * 1.4em);
}

/* Temaet sætter display på links, så klampen skal bindes fastere. */
.wrooom-liste .wrooom-liste__titel {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.35;
	min-height: calc(3 * 1.35em);
	max-height: calc(3 * 1.35em);
}

/* Et flex-element kan ikke være -webkit-box, og uden den klipper titlen midt
   i en linje i stedet for at slutte med ellípse. Kortet lægges derfor i
   normalt blokfløw; titlens faste højde holder rækkerne lige. */
.wrooom-liste__vare {
	display: block;
}

.wrooom-liste__billede,
.wrooom-liste__pris,
.wrooom-liste__forhandlere {
	display: block;
}

.wrooom-liste__titel {
	margin-top: 0.7rem;
}

.wrooom-liste__pris {
	margin-top: 0.35rem;
}

.wrooom-liste__forhandlere {
	margin-top: 0.3rem;
}

/* På telefon er der to kort pr. række og kortere plads; to linjer titel giver
   mindre død luft under de korte navne. */
@media (max-width: 600px) {
	.wrooom-liste .wrooom-liste__titel {
		-webkit-line-clamp: 2;
		min-height: calc(2 * 1.35em);
		max-height: calc(2 * 1.35em);
	}
}

/* "2 forhandlere" må ikke brække midt over, og prislinjen fylder mindre på
   telefon. */
.wrooom-pris__forhandlere {
	white-space: nowrap;
}

@media (max-width: 600px) {
	.wrooom-pris {
		font-size: 1.25em;
	}

	.wrooom-vare__billede img,
	.wrooom-vare__billede--tom {
		max-width: 260px;
		margin-inline: auto;
	}
}

/* Telefon: varenummeret får sin egen linje, så det ikke brækker midt i tallet. */
@media (max-width: 782px) {
	.wrooom-forhandler__varenr {
		grid-column: 1 / -1;
		grid-row: 2;
		text-align: left;
		white-space: nowrap;
	}

	.wrooom-forhandler__lager {
		grid-column: 1 / -1;
		grid-row: 3;
		text-align: left;
	}

	.wrooom-forhandler__link {
		grid-column: 1 / -1;
		grid-row: 4;
	}
}

/* Varenumre og mærker sad klods op ad forhandlerlisten. */
.wrooom-vare__detaljer {
	margin-top: 2.5rem;
}

.wrooom-vare__detaljer .wrooom-vare__overskrift {
	margin-bottom: 0.5rem;
}

@media (max-width: 782px) {
	.wrooom-vare__detaljer {
		margin-top: 2rem;
	}
}

/* Billedkolonnen var højere end pris og forhandlerliste tilsammen, så der stod
   et stort tomt felt under listen. Smallere kolonne, lavere billede. */
@media (min-width: 900px) {
	.wrooom-vare:has(.wrooom-vare__billede) {
		grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
		column-gap: 2rem;
	}

	.wrooom-vare__billede img {
		max-height: 16rem;
		object-fit: contain;
	}

	.wrooom-vare__billede--tom {
		max-height: 16rem;
	}
}

/* Billedet spændte over 20 rækker; de tomme rækker under højrekolonnen lagde
   luft til bunden af blokken. Det spænder nu over de rækker der findes. */
@media (min-width: 900px) {
	.wrooom-vare:has(.wrooom-vare__billede) {
		row-gap: 0;
		align-content: start;
	}

	.wrooom-vare:has(.wrooom-vare__billede) > .wrooom-vare__billede {
		grid-row: 1 / -1;
	}
}

/* Billedets højde blev fordelt ud over rækkerne og skubbede "Køb hos" væk fra
   prisen. Den overskydende højde lægges i sidste række i stedet. */
@media (min-width: 900px) {
	.wrooom-vare:has(.wrooom-vare__billede) {
		grid-template-rows: auto auto 1fr;
	}

	.wrooom-vare:has(.wrooom-vare__billede) > .wrooom-vare__billede {
		align-self: start;
	}
}