/*
 * Brandsiden (varemærkearkivet) for shop.habe.dk.
 *
 * Indlæses KUN på brandarkivet (se functions.php) og efter site.css, så alt
 * herunder vinder på rækkefølge frem for !important. Alligevel er hver regel
 * scopet til body.habe-brandside: filen skal kunne indlæses bredere en dag
 * uden at den vælter kategori- og søgearkiverne.
 *
 * Ingen hex-værdier. Farverne kommer fra tokens i style.css, så en
 * tonejustering kun skal laves ét sted. Designoplægget nævner en række nye
 * hex-værdier (#cdd6db, #2f4049, #eef0f1, #f4f6f7, #e8ebec m.fl.) som IKKE
 * findes som tokens. De er derfor gengivet med de nærmeste eksisterende toner,
 * og hvor en mellemtone var nødvendig, er den blandet med color-mix() af to
 * tokens frem for at sætte en ny hex. Se rapporten for listen over tokens der
 * mangler i style.css.
 *
 * Markuppen er en blanding af vores egen (brand-side.php), Gutenberg
 * (.wp-block-*) og WooCommerce/Blocksy. Derfor er selektorerne ofte to-tre
 * klasser dybe: Gutenberg lægger sine layoutregler i et <style> i <head>, som
 * kan stå EFTER vores stilark, og Blocksy farver .wp-block-button__link fra
 * Customizeren. Én klasse ville give uafgjort på specificitet og et resultat
 * der afhænger af indlæsningsrækkefølgen.
 */

body.habe-brandside {
	/*
	 * Georgia er et MIDLERTIDIGT valg og IKKE brandets officielle serif. Den
	 * står som dokumenteret pladsholder indtil licensen er på plads — så skal
	 * kun denne ene linje rettes. Samme værdi som på forsiden.
	 */
	--habe-serif: Georgia, "Times New Roman", serif;

	/* Én luftvariabel frem for et tal pr. sektion, så rytmen holder 375-1440 px. */
	--habe-bluft: clamp(2rem, 4vw, 3.5rem);

	/*
	 * Brandheroens gradient bruger panel-tokenene fra style.css. De blev lagt
	 * ind til forsidens hero, og tonerne er de samme designet beder om her
	 * (#cdd3d6 og #bfc7ca mod brandheroens #cdd6db og #bfc9cf) — så hellere
	 * genbruge end at sætte to nye hex ved siden af dem.
	 *
	 * Forsvinder de en dag, falder feltet tilbage til background-color:
	 * var(--habe-dis) og står ensfarvet. Det er en forringelse, ikke et brud.
	 */
	--habe-btone-1: var(--habe-panel-lys);
	--habe-btone-2: var(--habe-panel-moerk);

	/*
	 * Kortkanten i designet (#eef0f1) er lysere end --beautyshop-kant og ligger
	 * tæt på --habe-taage. Den står som variabel, så den ene dag der kommer et
	 * rigtigt token, kun skal rettes her.
	 */
	--habe-bkant: var(--habe-taage);

	/*
	 * Den meget lyse flade bag kategorikort og tom-tilstand (#f4f6f7/#f6f8f9 i
	 * designet). --habe-taage er nærmeste token, men et par nuancer for mørk,
	 * så den blandes op med hvid frem for at indføre en ny hex.
	 */
	--habe-bflade: color-mix(in srgb, var(--habe-taage) 55%, var(--habe-hvid));

	/*
	 * Skyggen under kortene. rgba() kan ikke bygges af et token uden color-mix,
	 * og en hardkodet sort ville ikke følge paletten.
	 */
	--habe-bskygge: 0 6px 16px color-mix(in srgb, var(--habe-blaek) 10%, transparent);

	/*
	 * Pilen tegnes som maske, ikke som billede: background-color: currentColor
	 * farver den, så den altid følger teksten og virker i både lys og mørk
	 * kontekst. Farven %23000 inde i data-URI'en er derfor kun maskens alfa —
	 * den ses aldrig. var() kan ikke bruges inde i en data-URI, og det er den
	 * eneste grund til at der overhovedet står en hex-værdi i denne fil.
	 */
	--habe-bpil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 6h20.5M16 1.5 20.5 6 16 10.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}

/*
 * Vandret overløb er den hyppigste mobilfejl og er usynlig på desktop. Grid- og
 * flex-børn får som udgangspunkt min-width:auto og nægter at krympe under deres
 * indhold — derfor nulstilles det her ét sted frem for sektion for sektion.
 */
body.habe-brandside .habe-bhero__tekst,
body.habe-brandside .habe-bhero__foto,
body.habe-brandside .habe-bkort,
body.habe-brandside .habe-bintro__logo,
body.habe-brandside .habe-bintro__tekst,
body.habe-brandside .habe-filtre,
body.habe-brandside .habe-katalog__produkter,
body.habe-brandside .habe-bkamp {
	min-width: 0;
	max-width: 100%;
}

/* ------------------------------------------------------- temaets titelbånd */

/*
 * Blocksys .page-title er sidens eneste RIGTIGE h1 — den synlige
 * .habe-brandside__titel er aria-hidden dekoration og tæller ikke som
 * overskrift. Derfor skjules h1 visuelt, men skal blive i tilgængelighedstræet:
 * display:none ville fjerne den helt, og siden ville stå uden h1 for en
 * skærmlæser, der navigerer efter overskrifter.
 */
body.habe-brandside h1.page-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Selve titelbåndet ville ellers stå tilbage som en tom grå flade på et par
 * hundrede pixels, fordi Blocksy polstrer det uafhængigt af indholdet.
 */
body.habe-brandside .hero-section {
	padding: 0;
	margin: 0;
	min-height: 0;
	background: none;
	border: 0;
}

body.habe-brandside .hero-section .entry-header {
	padding: 0;
	margin: 0;
	min-height: 0;
}

/*
 * Blocksys container polstrer allerede siden, og .habe-indhold gør det igen.
 * To lag polstring skubber indholdet ~100 px ind mod midten i stedet for de
 * ~45 px designoplægget viser. Rammen styres af .habe-indhold alene.
 */
body.habe-brandside .ct-container {
	/*
	 * Blocksy centrerer containeren med margin-inline:auto og en fast bredde —
	 * ikke med max-width. Derfor skal både bredden OG margenerne nulstilles;
	 * kun max-width ville efterlade de ~56 px i hver side.
	 */
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	padding-block: 0;
}

/* Tom WooCommerce-header over kataloget — må ikke efterlade luft. */
body.habe-brandside .woocommerce-products-header:empty {
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------ topsektionen */

/*
 * Ingen baggrundsflade og INGEN clip-path her.
 *
 * I den nye reference står brødkrumme og brandnavn på hvid bund, og kun selve
 * heroboksen er tonet. Lige så vigtigt: heroens produktfoto rager med vilje op
 * over boksens overkant, og en clip-path på denne beholder ville klippe
 * præcis den overhæng af. Fladen skal derfor blive hvid og overløbet synligt.
 */
body.habe-brandside .habe-brandside__top {
	position: relative;
	padding-block: clamp(0.75rem, 1.6vw, 1.25rem) 0;
}

/* ------------------------------------------------------------- brødkrumme */

body.habe-brandside .habe-broedkrumme ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.78125rem;
	line-height: 1.4;
	color: var(--beautyshop-tekst-daempet);
}

/*
 * Skillestregen sættes som ::before på alle undtagen den første frem for som
 * separat markup, så den aldrig står alene i starten af en ombrudt linje.
 */
body.habe-brandside .habe-broedkrumme li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--habe-graagroen);
}

body.habe-brandside .habe-broedkrumme a {
	color: inherit;
	text-decoration: none;
}

body.habe-brandside .habe-broedkrumme a:hover,
body.habe-brandside .habe-broedkrumme a:focus-visible {
	text-decoration: underline;
}

body.habe-brandside .habe-broedkrumme [aria-current="page"] {
	color: var(--beautyshop-tekst);
}

/* ------------------------------------------------------------- brandnavnet */

/*
 * Sidetitlen i systemfont, ikke en efterligning af navnetrækket. Det er et
 * udtrykkeligt krav i kravspecen: BABORs logo er logografik og må aldrig
 * sættes med en skrift. Navnetrækket i heroen er derfor et rigtigt billede,
 * og denne overskrift er ren tekst.
 *
 * 30-42 px og vægt 500 som i designet.
 */
body.habe-brandside .habe-brandside__titel {
	position: relative;
	/* Over heroens overhængende foto, så navnet aldrig havner bag produkterne. */
	z-index: 3;
	margin: 0.875rem 0 1.25rem;
	font-size: clamp(1.875rem, 3.2vw, 2.625rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--beautyshop-tekst);
}

/* Driftsbesked til redaktøren, ikke til kunden — må ikke ligne designet. */
body.habe-brandside .habe-brandside__mangler {
	margin: 0 0 var(--habe-bluft);
	padding: 1rem;
	border: 1px dashed var(--beautyshop-kant);
	background: var(--habe-hvid);
	font-size: 0.875rem;
	color: var(--beautyshop-tekst-daempet);
}

/* ------------------------------------------------------------------ knapper */

body.habe-brandside .habe-knapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block: 0;
}

body.habe-brandside .habe-knap {
	margin: 0;
}

/*
 * Tre klasser dybt, fordi Blocksy selv farver
 * .wp-block-button .wp-block-button__link ud fra Customizerens knapfarve.
 * To klasser ville give uafgjort.
 */
body.habe-brandside .habe-knapper .habe-knap .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	/* 46 px: over de 44 px WCAG 2.5.8 kræver, også når teksten kun er én linje. */
	min-height: 2.875rem;
	padding: 0.75rem 1.75rem;
	background-color: var(--habe-blaek);
	color: var(--habe-hvid);
	border: 1px solid var(--habe-blaek);
	/* Skarpe hjørner. Cirklen i logoet er identitetens eneste runding. */
	border-radius: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Pilen i knappen er dekoration: ::after, så den aldrig læses op. */
body.habe-brandside .habe-knapper .habe-knap .wp-block-button__link::after {
	content: "";
	width: 1.25rem;
	height: 0.75rem;
	flex: none;
	background-color: currentColor;
	-webkit-mask-image: var(--habe-bpil);
	mask-image: var(--habe-bpil);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

body.habe-brandside .habe-knapper .habe-knap .wp-block-button__link:hover,
body.habe-brandside .habe-knapper .habe-knap .wp-block-button__link:focus-visible {
	background-color: var(--habe-hvid);
	color: var(--habe-blaek);
}

/* --------------------------------------------------------------------- hero */

body.habe-brandside .habe-bhero {
	position: relative;
	margin-block: 0;
}

/*
 * Selve den tonede boks. Gradienten ligger på RÆKKEN og ikke på gruppen, fordi
 * fotoet skal kunne rage op over boksens overkant: lå fladen på en forælder der
 * også omsluttede overhænget, ville tonen følge med op og overhænget forsvinde
 * visuelt.
 *
 * background-color sættes først som fallback. Kan browseren ikke color-mix(),
 * står feltet ensfarvet i --habe-dis i stedet for helt uden flade.
 */
body.habe-brandside .habe-bhero .habe-bhero__rk {
	position: relative;
	/*
	 * Gap nulstilles: felterne skal støde op til hinanden, så heroen læses som
	 * ét bånd og ikke som to kort.
	 */
	gap: 0;
	align-items: stretch;
	margin-block: 0;
	background-color: var(--habe-dis);
	background-image: linear-gradient(100deg, var(--habe-btone-1), var(--habe-btone-2));
}

/*
 * Kolonnebredderne følger designoplægget: tekst maks 440 px, foto resten.
 * Kun over Gutenbergs egen stablingsgrænse (781 px) — derunder tvinger
 * Gutenberg flex-basis til 100 %, og det skal den have lov til.
 */
@media (min-width: 782px) {
	/*
	 * Mindstehøjden er bevidst LAV. Boksens højde bestemmes af tekstspalten,
	 * og jo lavere boksen er i forhold til fotoets bredde, jo mere rager
	 * produkterne op over overkanten. En høj mindstehøjde ville æde overhænget.
	 */
	body.habe-brandside .habe-bhero .habe-bhero__rk {
		min-height: clamp(11.25rem, 18vw, 16.25rem);
	}

	body.habe-brandside .habe-bhero .habe-bhero__tekst {
		flex: 1 1 15rem;
		/*
		 * 310-370 px og ikke designoplæggets faste 440: tekstspalten bestemmer
		 * boksens HØJDE, og fotofeltet får resten af bredden. Jo bredere
		 * tekstspalten er, jo smallere og dermed lavere bliver fotoet — og så
		 * forsvinder overhænget over overkanten, som er hele pointen i motivet.
		 *
		 * Loftet vokser alligevel lidt med skærmen: overskriften vokser også,
		 * og ved 1440 px brækkede "SMUKKERE HUD." til to linjer i en spalte der
		 * stod fast på 310 px.
		 */
		max-width: clamp(19.375rem, 24vw, 23.125rem);
	}

	body.habe-brandside .habe-bhero .habe-bhero__foto {
		flex: 2 1 23.75rem;
	}
}

body.habe-brandside .habe-bhero .habe-bhero__tekst {
	position: relative;
	/* Over fotoet: dets venstre kant blødes ud hen over tekstspalten. */
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.25rem, 2.4vw, 2.25rem);
	color: var(--beautyshop-tekst);
}

body.habe-brandside .habe-bhero__over {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.7;
	letter-spacing: 0.3em;
	font-weight: 500;
	text-transform: uppercase;
	/*
	 * Skifer og ikke graagroen: den spærrede småtekst står på en tonet flade, og
	 * de lyseste toner i paletten holder ikke kontrastkravet ved 12 px.
	 */
	color: var(--beautyshop-tekst-daempet);
}

body.habe-brandside .habe-bhero__titel {
	margin: 0.75rem 0 0;
	/* Serif kun til de store redaktionelle overskrifter — se --habe-serif. */
	font-family: var(--habe-serif);
	font-size: clamp(1.375rem, 2.1vw, 2rem);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--beautyshop-tekst);
}

body.habe-brandside .habe-bhero__brod {
	margin: 0.75rem 0 0;
	/* ca. 40 tegn pr. linje — designets 300 px ved 14 px. */
	max-width: 21.5em;
	font-size: 0.84375rem;
	line-height: 1.55;
	color: var(--beautyshop-tekst);
}

/*
 * Fotofeltet er kun en ramme: billedet ligger absolut i den, så det kan være
 * HØJERE end feltet og hænge ud over overkanten, præcis som i designet, hvor
 * produkterne bryder ud af boksen.
 */
body.habe-brandside .habe-bhero .habe-bhero__foto {
	position: relative;
	padding: 0;
	background: none;
}

/*
 * Fotoet forankres i bunden og får sin højde af sit EGET forhold — 614/1434 =
 * 42,82 % af bredden — via padding-top og ikke aspect-ratio.
 *
 * To grunde. For det første slår aspect-ratio ikke pålideligt igennem her, og
 * et lazy-loadet <img> uden højde måler 0 px og efterlader et tomt felt.
 * padding-top regnes altid af forælderens BREDDE og kan derfor ikke kollapse.
 * For det andet er det netop forskellen mellem den højde og tekstspaltens
 * højde der bliver overhænget over boksens overkant: jo bredere fotofeltet er,
 * jo højere bliver motivet, og jo mere rager produkterne op — helt som i
 * designet, uden et procenttal vi selv skal gætte.
 *
 * min-height sikrer at feltet aldrig bliver LAVERE end boksen. Var det det,
 * ville den tonede flade stikke frem over motivet som en vandret stribe.
 *
 * Det er også grunden til at .habe-brandside__top IKKE må have clip-path eller
 * overflow:hidden. Rører man det ene, forsvinder det andet.
 */
body.habe-brandside .habe-bhero__billede {
	position: absolute;
	inset: auto 0 0 0;
	height: 0;
	min-height: 100%;
	/*
	 * Loftet er en sikring, ikke en designværdi: uden det ville overhænget
	 * vokse med containeren og en dag nå op bag sidehovedet. .habe-indhold
	 * stopper ved 1440 px, hvor forholdet ville give ca. 420 px. Loftet på
	 * 384 px holder overhænget under brødkrummen, så motivet aldrig når op
	 * bag sidehovedet.
	 */
	padding-top: min(42.82%, 24rem);
	margin: 0;
	overflow: hidden;
	/* Under tekstspalten, over den tonede flade. */
	z-index: 1;
}

body.habe-brandside .habe-bhero__billede img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	/*
	 * cover er KUN rigtigt her. Heroens foto er et bredt, sammensat motiv
	 * (1434x614) og er stort nok til at fylde feltet. Alle andre motiver på
	 * siden er små udsnit og står contained — se kategorikort og kampagnefelter.
	 */
	object-fit: cover;
	/* Navnetrækket og stenen står i højre side og må aldrig beskæres væk. */
	object-position: right bottom;
}

/*
 * Blødt skift mellem den tonede flade og fotoets venstre kant, så samlingen
 * ikke tegner en lodret linje. Ligger over billedet (z-index 2) og er
 * gennemsigtig for mus, så knappen under den stadig kan rammes.
 */
body.habe-brandside .habe-bhero .habe-bhero__foto::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 2;
	width: clamp(2.5rem, 7vw, 5.625rem);
	background-image: linear-gradient(90deg, var(--habe-btone-1), transparent);
	pointer-events: none;
}

/*
 * "Se mere" ligger oven på stenpodiet i fotoet. Procentplacering og ikke faste
 * pixels: motivet skaleres med feltet, så knappen skal følge med.
 */
body.habe-brandside .habe-bhero .habe-bhero__knap {
	position: absolute;
	right: 6%;
	top: 62%;
	z-index: 3;
	margin: 0;
}

/*
 * Heroens knap er den ene undtagelse fra den versale knaptypografi: designet
 * viser "Se mere →" i normal sætningsform, fordi den står midt i et foto og
 * ikke i et kampagnefelt.
 */
body.habe-brandside .habe-bhero__knap .habe-knap .wp-block-button__link {
	padding: 0.75rem 1.625rem;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
}

/* ------------------------------------------------------- kategorikortene */

body.habe-brandside .habe-bkort__rk {
	display: grid;
	/*
	 * auto-fit med min(100%, 14.5rem) som i designet: fire kort på brede
	 * skærme, og kortene falder selv ned i to og én kolonne. min(100%, …)
	 * er det der forhindrer vandret overløb på 320 px, hvor 232 px ellers
	 * ville være bredere end sporet.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
	gap: clamp(0.875rem, 1.8vw, 1.5rem);
	/* Padding og ikke margin: fladen skal være ubrudt ned til introen. */
	padding-block: clamp(1.25rem, 2.4vw, 2.125rem) 0;
}

/*
 * Gutenberg giver hvert barn i en flow-gruppe margin-block: 24 px — også når
 * gruppen er lavet om til et gitter. I et gitter tæller margenen MED i rækkens
 * højde, så de tre første kort blev 152 px høje plus 24 px margen, mens det
 * sidste (uden margen) blev strakt til 176. Resultatet var fire kort i tre
 * forskellige højder. Margenen skal væk, ikke kompenseres for.
 */
body.habe-brandside .habe-bkort__rk > .habe-bkort {
	margin-block: 0;
}

body.habe-brandside .habe-bkort {
	display: flex;
	align-items: stretch;
	/*
	 * min-height og ikke aspect-ratio: motiverne er små udsnit, og et fast
	 * forhold ville gøre kortet dobbelt så højt som motivet på brede skærme.
	 * Gittercellerne strækkes alligevel til samme højde, så kortene bliver ens
	 * uden at højden hænger på bredden.
	 */
	min-height: clamp(7.375rem, 10vw, 9.125rem);
	/*
	 * Referencen viser kortet som ÉN sammenhængende, meget lys flade — ikke en
	 * hvid krop med et tonet billedfelt ved siden af. --habe-taage alene er for
	 * mørk, så den blandes op med hvid. Kanten er den samme tone: den ses kun
	 * som en antydning, og det er meningen.
	 */
	background: var(--habe-bflade);
	border: 1px solid var(--habe-bkant);
	color: var(--beautyshop-tekst);
	text-decoration: none;
	/* Rektangulære kort. Cirklen i logoet er identitetens eneste runding. */
	border-radius: 0;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

body.habe-brandside .habe-bkort:hover,
body.habe-brandside .habe-bkort:focus-visible {
	box-shadow: var(--habe-bskygge);
}

/*
 * Motivfeltet i venstre side, ca. halvdelen af kortet som i designet.
 * Selve fladen er tonet, så et fritlagt produktfoto får en baggrund at stå på
 * og kortets hvide krop bliver ren tekst.
 */
body.habe-brandside .habe-bkort__billede {
	flex: 0 0 41%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
}

/*
 * Motiverne er katalogfotos fra butikkens egne varer (400-480 px). scale-down
 * og IKKE cover: begge holder proportionerne, men cover ville skære toppen af
 * en høj flakon, og scale-down skalerer aldrig OP, så et mindre aktiv aldrig
 * bliver grynet.
 *
 * Boksen sættes til 100 % frem for auto, fordi billederne er lazy-loadede: et
 * ikke-indlæst <img> med width:auto måler 0x0, og så ville kortet falde sammen
 * inden billedet overhovedet kom i nærheden af skærmen.
 *
 * multiply og ikke en hvid plade bag motivet: kataloget blander PNG'er med
 * gennemsigtig baggrund og JPEG'er med hvid. Uden blanding stod JPEG'erne som
 * et hvidt rektangel midt på kortets tonede flade. multiply lader hvidt gå i
 * ét med fladen og bevarer produktets egne skygger — og ingen af varianterne
 * skal rettes i Photoshop først.
 */
body.habe-brandside .habe-bkort__billede img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	object-position: center;
	mix-blend-mode: multiply;
}

/*
 * Labelen får kortets højre side og står venstrestillet som i designet.
 * Pilen er et flex-søskende og IKKE en ::after på tekstspanet: som en del af
 * tekstens linjeboks stjal den ~30 px af bredden på HVER linje, og
 * "Fjerner makeup og renser huden" brød så til fire linjer.
 */
/*
 * Block og ikke flex, og pilen inline efter sidste ord.
 *
 * Som flex-item ville pilen dele linjeboks med teksten og stjæle ~28 px af
 * bredden på HVER linje — "Fjerner makeup og renser huden" brød så til tre
 * linjer mod referencens to. Som inline-block følger pilen efter sidste ord,
 * præcis som i referencen, og koster kun plads på den sidste linje.
 */
body.habe-brandside .habe-bkort__label {
	flex: 1 1 auto;
	align-self: center;
	display: block;
	padding: 0.75rem 0.625rem 0.75rem 0.5rem;
	font-size: 0.84375rem;
	font-weight: 500;
	line-height: 1.35;
	text-wrap: pretty;
}

body.habe-brandside .habe-bkort__label::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.5rem;
	width: 1.25rem;
	height: 0.75rem;
	background-color: currentColor;
	-webkit-mask-image: var(--habe-bpil);
	mask-image: var(--habe-bpil);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ------------------------------------------------------------ brandintro */

body.habe-brandside .habe-bintro {
	padding-block: var(--habe-bluft);
}

body.habe-brandside .habe-bintro .habe-bintro__rk {
	gap: clamp(1.25rem, 3vw, 2.75rem);
	align-items: flex-start;
	margin-block: 0;
}

body.habe-brandside .habe-bintro .habe-bintro__logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * Logofilen er en rasterreference klippet fra mockuppet — ikke et godkendt
 * brandaktiv og kun 336 px bred. Den må derfor ikke skaleres OP: width står på
 * 100 % af en boks med et loft under aktivets egen bredde, så billedet kun
 * krymper. Skaleret op ville den se grynet ud og foregive en kvalitet aktivet
 * ikke har.
 */
body.habe-brandside .habe-bintro__billede {
	margin: 0;
	width: 100%;
	max-width: clamp(8.75rem, 14vw, 12.25rem);
}

body.habe-brandside .habe-bintro__billede img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Lodret skillelinje mellem logo og tekst, som i referencen. */
@media (min-width: 782px) {
	body.habe-brandside .habe-bintro .habe-bintro__tekst {
		padding-left: clamp(1.25rem, 2.6vw, 2.5rem);
		border-left: 1px solid var(--habe-bkant);
	}
}

body.habe-brandside .habe-bintro__tekst p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	max-width: 48.75em;
	color: var(--beautyshop-tekst);
}

body.habe-brandside .habe-bintro__resten p {
	margin-top: 0.875rem;
}

/*
 * Knappen står med hidden i markup'en og afsløres af brandside.js. Uden
 * JavaScript er hele teksten synlig, og knappen findes slet ikke — en knap der
 * ikke folder noget ud ville love en funktion siden ikke havde.
 */
body.habe-brandside .habe-bintro__mere {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	/* 44 px klikområde, WCAG 2.5.8 — teksten alene er kun ~20 px høj. */
	min-height: 2.75rem;
	margin-top: 0.25rem;
	padding: 0 0.25rem 0 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--beautyshop-tekst);
}

body.habe-brandside .habe-bintro__mere:hover {
	color: var(--beautyshop-tekst-daempet);
}

body.habe-brandside .habe-bintro__mere:focus-visible {
	outline: var(--beautyshop-focus-outline);
	outline-offset: 2px;
}

/*
 * Chevronen peger ned når panelet er lukket og drejes 180° når det er åbent.
 * Tilstanden læses af aria-expanded — samme attribut som skærmlæseren bruger —
 * så visning og oplæsning ikke kan komme ud af trit.
 */
body.habe-brandside .habe-chevron {
	flex: none;
	transition: transform 0.2s ease;
}

body.habe-brandside [aria-expanded="true"] > .habe-chevron {
	transform: rotate(180deg);
}

/* ----------------------------------------------------------------- katalog */

body.habe-brandside .habe-katalog {
	display: grid;
	/*
	 * Filterkolonnen 176-260 px som i designet, produkterne resten.
	 * minmax(0,…) så gitteret må krympe under sit indhold i stedet for at
	 * skubbe siden bred.
	 */
	grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
	gap: clamp(1.375rem, 3vw, 2.75rem);
	align-items: start;
	padding-block: 0 var(--habe-bluft);
	/*
	 * Ankeret for "Se mere" i heroen. scroll-margin-top giver den klæbende
	 * sidehoved plads, så overskriften ikke lander under headeren.
	 */
	scroll-margin-top: 6rem;
}

/* ------------------------------------------------------------------ filtre */

/*
 * Mærkenavnet øverst i kolonnen. <p> og ikke en overskrift: kolonnens
 * overskrift er det skjulte h2 "Filtrér produkter", og en ekstra h-tag her
 * ville lægge et niveau ind som ikke svarer til noget indhold.
 */
body.habe-brandside .habe-filtre__maerke {
	margin: 0 0 0.75rem;
	padding: 0.125rem 0;
	font-size: 0.90625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--beautyshop-tekst);
}

body.habe-brandside .habe-facet {
	padding-block: 0 0.625rem;
	/* Topkant pr. gruppe, som i designet — ikke bundkant. */
	border-top: 1px solid var(--habe-bkant);
}

body.habe-brandside .habe-facet__titel {
	margin: 0;
	padding: 0.875rem 0 0;
	font-size: 0.84375rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--beautyshop-tekst);
}

/*
 * Knappen bygges af brandside.js INDE i overskriften. Overskriften beholder
 * dermed sin rolle i dokumentstrukturen, og knappen bliver det interaktive
 * element — mønsteret fra WAI-ARIA Authoring Practices' accordion.
 */
body.habe-brandside .habe-facet__knap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem;
	width: 100%;
	/* 44 px målflade: overskriftsteksten alene er kun ~19 px høj. */
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
}

body.habe-brandside .habe-facet__knap:focus-visible {
	outline: var(--beautyshop-focus-outline);
	outline-offset: 2px;
}

body.habe-brandside .habe-facet__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.habe-brandside .habe-facet__punkt {
	display: flex;
	align-items: center;
	gap: 0.5625rem;
	/*
	 * 44 px højt klikområde. Referencen har tættere rækker, men et 17 px højt
	 * mål er under WCAG 2.5.8 — og det vejer tungere end de få pixels
	 * kolonnen bliver højere.
	 */
	min-height: 2.75rem;
	padding-right: 0.25rem;
	color: var(--beautyshop-tekst);
	font-size: 0.84375rem;
	line-height: 1.4;
	text-decoration: none;
}

body.habe-brandside .habe-facet__punkt:hover .habe-facet__navn,
body.habe-brandside .habe-facet__punkt:focus-visible .habe-facet__navn {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * Checkboksen tegnes i CSS. Markuppen er et <a>, ikke et <input>, fordi
 * filtrering sker via sidevisning uden JavaScript — boksen er derfor ren
 * dekoration (aria-hidden i markup), og tilstanden meldes med aria-current.
 */
body.habe-brandside .habe-facet__boks {
	position: relative;
	flex: none;
	width: 0.9375rem;
	height: 0.9375rem;
	border: 1px solid var(--habe-graagroen);
	background: var(--habe-hvid);
}

body.habe-brandside .habe-facet__navn {
	flex: 1 1 auto;
}

body.habe-brandside .habe-facet__antal {
	flex: none;
	font-size: 0.78125rem;
	color: var(--habe-graagroen);
	font-variant-numeric: tabular-nums;
}

/*
 * Valgt tilstand markeres på TRE måder — udfyldt boks, flueben og fed tekst —
 * så den ikke kun kan aflæses af farve eller form alene.
 */
body.habe-brandside .habe-facet__punkt.er-valgt .habe-facet__boks {
	border-color: var(--habe-blaek);
	background: var(--habe-blaek);
}

body.habe-brandside .habe-facet__punkt.er-valgt .habe-facet__boks::after {
	content: "";
	position: absolute;
	left: 0.28125rem;
	top: 0.03125rem;
	width: 0.3125rem;
	height: 0.5rem;
	border: solid var(--habe-hvid);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

body.habe-brandside .habe-facet__punkt.er-valgt .habe-facet__navn {
	font-weight: 600;
}

body.habe-brandside .habe-filtre__nulstil {
	margin: 0 0 0.5rem;
}

body.habe-brandside .habe-filtre__nulstil a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--beautyshop-tekst);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* --------------------------------------------------------- sortering m.m. */

/*
 * Sortering til venstre, sideskifter til højre — designets rækkefølge.
 * Blocksy skriver resultattælleren først i DOM'en, så den flyttes med order
 * frem for med markup vi ikke ejer.
 */
body.habe-brandside .woo-listing-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 0 0 1rem;
}

body.habe-brandside .woocommerce-ordering {
	order: 1;
	margin: 0;
}

/*
 * Blocksy sætter versaler og spærring på resultattælleren. Den er hjælpetekst,
 * ikke en overskrift, og skal ikke råbe højere end varenavnene. Designet har
 * den ikke, men et katalog uden "af hvor mange" er dårligere at bruge end et
 * med — den bliver, bare dæmpet.
 */
body.habe-brandside .woocommerce-result-count {
	order: 2;
	margin: 0;
	font-size: 0.78125rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--habe-graagroen);
}

/* mr:auto skubber sideskifteren helt ud til højre uden en tom mellemboks. */
body.habe-brandside .habe-sider {
	order: 3;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;
	font-size: 0.84375rem;
}

body.habe-brandside .habe-sider .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 px målflade, også når tallet kun er ét ciffer. */
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.25rem;
	color: var(--beautyshop-tekst-daempet);
	text-decoration: none;
}

body.habe-brandside .habe-sider .page-numbers:hover {
	color: var(--beautyshop-tekst);
}

body.habe-brandside .habe-sider .page-numbers.current {
	font-weight: 700;
	color: var(--beautyshop-tekst);
	/* Underkant som i designet — ikke en ramme om hele tallet. */
	box-shadow: inset 0 -1px 0 0 var(--habe-blaek);
}

/*
 * Blocksy skrumper sorteringen til et ikon med en usynlig <select> ovenpå på
 * smalle skærme. Ikonet skjules overalt: målfladen bliver 33 px bred, og valget
 * kan ikke læses. En almindelig <select> med tekst er både større og tydeligere.
 */
body.habe-brandside .woo-listing-top .ct-sort-icon {
	display: none;
}

/*
 * Kantløs select som i designet. 44 px høj og med en synlig fokusramme, så den
 * stadig kan findes og rammes — en kantløs kontrol må ikke også være usynlig
 * for tastaturet.
 */
body.habe-brandside .woocommerce-ordering select.orderby {
	min-height: 2.75rem;
	padding: 0.25rem 0.25rem 0.25rem 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--beautyshop-tekst);
	font-size: 0.84375rem;
	font-weight: 600;
	cursor: pointer;
}

body.habe-brandside .woocommerce-ordering select.orderby:focus-visible {
	outline: var(--beautyshop-focus-outline);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- tom liste */

body.habe-brandside .habe-tom {
	padding: 2.75rem 1.25rem;
	background: var(--habe-bflade);
	text-align: center;
}

body.habe-brandside .habe-tom__besked {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--beautyshop-tekst);
}

body.habe-brandside .habe-tom__nulstil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	margin-top: 0.875rem;
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--habe-blaek);
	background: none;
	color: var(--habe-blaek);
	font-size: 0.78125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.habe-brandside .habe-tom__nulstil:hover,
body.habe-brandside .habe-tom__nulstil:focus-visible {
	background: var(--habe-blaek);
	color: var(--habe-hvid);
}

/* ------------------------------------------------------------ produktgitter */

body.habe-brandside .habe-katalog__produkter ul.products {
	display: grid;
	/* Tre kolonner på desktop — referencens gitter. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.2vw, 1.625rem) clamp(0.875rem, 1.8vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.habe-brandside .habe-katalog__produkter ul.products li.product {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
}

/*
 * Rækkefølgen i kortet: foto, mærke, navn, kategori, pris, kurv.
 *
 * Blocksy skriver prisen FØR kategorimetaen, og designet vil have den under.
 * Rækkefølgen rettes med order frem for i markup vi ikke ejer. Alle seks skal
 * have en værdi: sætter man kun to, ryger de to bag alt med order 0 i stedet
 * for på deres plads.
 */
body.habe-brandside .habe-katalog__produkter ul.products li.product figure {
	order: 1;
	margin: 0 0 0.625rem;
}

body.habe-brandside .habe-katalog__produkter ul.products li.product .beautyshop-product-media {
	order: 2;
}

body.habe-brandside .habe-katalog__produkter ul.products li.product .woocommerce-loop-product__title {
	order: 3;
}

body.habe-brandside .habe-katalog__produkter ul.products li.product .entry-meta {
	order: 4;
}

body.habe-brandside .habe-katalog__produkter ul.products li.product .price {
	order: 5;
}

body.habe-brandside .habe-katalog__produkter ul.products li.product .ct-woo-card-actions {
	order: 6;
}

body.habe-brandside .habe-katalog__produkter ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	/*
	 * contain, IKKE cover. Billederne spænder fra smalle flakoner til brede
	 * æsker — med cover ville emballagen blive skåret midt over.
	 */
	object-fit: contain;
	/*
	 * Hvid, ikke tonet. Designet viser #f4f6f7 bag varefotoet, men kataloget
	 * blander PNG med gennemsigtig baggrund og JPEG med hvid bagt ind: på en
	 * tonet flade tegner JPEG'erne et synligt hvidt rektangel. Se den fulde
	 * begrundelse ved --beautyshop-vareflade i style.css.
	 */
	background: var(--beautyshop-vareflade);
	border-radius: 0;
}

body.habe-brandside .habe-katalog__produkter .beautyshop-brand {
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--beautyshop-tekst-daempet);
}

body.habe-brandside .habe-katalog__produkter .beautyshop-brand a {
	color: inherit;
	text-decoration: none;
}

body.habe-brandside .habe-katalog__produkter ul.products li.product .woocommerce-loop-product__title {
	margin: 0.1875rem 0 0;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--beautyshop-tekst);
}

body.habe-brandside .habe-katalog__produkter ul.products li.product .woocommerce-loop-product__title a {
	color: inherit;
	text-decoration: none;
}

body.habe-brandside .habe-katalog__produkter ul.products li.product .price {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--beautyshop-tekst);
}

/*
 * Kategorimetaen står hvor designet har varens størrelse. Butikken har ingen
 * størrelsesattribut — der findes ikke ÉN produktattribut i installationen —
 * så pladsen bruges til den ene sekundære oplysning der faktisk findes.
 */
body.habe-brandside .habe-katalog__produkter ul.products li.product .entry-meta {
	margin: 0.125rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.78125rem;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
	color: var(--beautyshop-tekst-daempet);
}

body.habe-brandside .habe-katalog__produkter ul.products li.product .entry-meta a {
	color: inherit;
	text-decoration: none;
}

/*
 * Kurvknappen skubbes ned i bunden af kortet, så knapperne står på linje
 * uanset hvor mange linjer varenavnet fylder. Den er ALTID synlig: en
 * handling der kun dukker op ved hover findes ikke for tastatur og berøring.
 *
 * Designet har ingen kurvknap på kortet, men det er en webshop: at fjerne
 * købsknappen fra katalogsiden for at ramme et mockup ville koste salg.
 */
body.habe-brandside .habe-katalog__produkter .ct-woo-card-actions {
	margin-top: auto;
	padding-top: 0.75rem;
	opacity: 1;
	visibility: visible;
	transform: none;
}

body.habe-brandside .habe-katalog__produkter .ct-woo-card-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 1rem;
	border: 1px solid var(--habe-blaek);
	border-radius: 0;
	background: var(--habe-hvid);
	color: var(--habe-blaek);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.habe-brandside .habe-katalog__produkter .ct-woo-card-actions .button:hover,
body.habe-brandside .habe-katalog__produkter .ct-woo-card-actions .button:focus-visible {
	background: var(--habe-blaek);
	color: var(--habe-hvid);
}

/* ------------------------------------------------------------- paginering */

/*
 * Blocksys sideskifter i bunden bliver stående. Designet viser kun den i
 * toppen, men efter 24 produkter er bunden præcis der hånden er — at fjerne
 * den ville tvinge kunden helt op igen for at komme videre.
 */
body.habe-brandside .habe-katalog__produkter .ct-pagination {
	margin-top: var(--habe-bluft);
}

body.habe-brandside .habe-katalog__produkter .ct-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	border-radius: 0;
	color: var(--beautyshop-tekst);
	text-decoration: none;
}

body.habe-brandside .habe-katalog__produkter .ct-pagination .page-numbers.current {
	font-weight: 700;
	box-shadow: inset 0 -1px 0 0 var(--habe-blaek);
}

/* --------------------------------------------------------------- kampagner */

body.habe-brandside .habe-brandside__bund {
	padding-block: 0 var(--habe-bluft);
}

body.habe-brandside .habe-bkamp__rk {
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: stretch;
	margin-block: 0;
}

/*
 * Kampagnefeltet: tekst til venstre, foto som dækkende flade i højre side, og
 * en blødt udtonende overgang imellem — som i designet.
 *
 * min-height og ikke aspect-ratio: felterne er flex-børn i en Gutenberg-række
 * og strækkes derfor til samme højde af sig selv, så de holder linje uanset
 * hvor mange linjer titlen fylder. aspect-ratio slår desuden ikke pålideligt
 * igennem sammen med Gutenbergs egne kolonneregler.
 */
body.habe-brandside .habe-bkamp {
	/*
	 * Motivfeltets bredde står i ABSOLUTTE enheder, ikke i procent.
	 * Procent-padding regnes ud fra FORÆLDERENS bredde — ikke feltets egen — så
	 * "padding-right: 42%" blev 42 % af hele rækken og klemte tekstspalten ned
	 * til fire pixels bred. Den fejl er usynlig indtil teksten står på højkant.
	 */
	--habe-bkamp-luft: clamp(1.375rem, 2.6vw, 2.5rem);

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-height: clamp(13.125rem, 17vw, 15.625rem);
	padding: var(--habe-bkamp-luft);
	background: var(--habe-bkamp-flade);
	overflow: hidden;
}

/*
 * Teksten holdes i venstre side af et LOFT PÅ BØRNENE og ikke af en
 * padding-right i procent på feltet selv.
 *
 * Procent-padding regnes ud fra FORÆLDERENS bredde — her hele rækken — og ikke
 * ud fra feltets egen. "padding-right: 44%" blev derfor 44 % af rækken og
 * klemte tekstspalten ned til få pixels, så overskriften stod på højkant.
 * max-width på børnene regnes derimod af feltets egen indholdsbredde og gør
 * præcis det man tror.
 */
body.habe-brandside .habe-bkamp__titel,
body.habe-brandside .habe-bkamp p,
body.habe-brandside .habe-bkamp .habe-knapper {
	max-width: 58%;
}

/*
 * Figuren ligger før titlen i markup'en. Den tages ud af flowet og lægges i
 * højre side i stedet for at bruge order, så den kan dække hele feltets højde
 * uanset hvor mange tekstlinjer der står ved siden af.
 */
body.habe-brandside .habe-bkamp__billede {
	position: absolute;
	inset: 0 0 0 auto;
	width: 60%;
	margin: 0;
}

/*
 * cover her, i modsætning til kategorikortene: kampagnemotiverne er
 * beskæringsvenlige stemningsfotos (590x236 og 584x236) uden et produkt der
 * kan blive skåret over — og designet vil netop have dem som dækkende flade.
 */
body.habe-brandside .habe-bkamp__billede img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 40% 20%;
}

/*
 * Udtoningen fra fladen ind over motivets venstre kant. Uden den tegner
 * samlingen en hård lodret linje midt i feltet.
 */
body.habe-brandside .habe-bkamp::after {
	content: "";
	position: absolute;
	inset: 0 40% 0 auto;
	width: 22%;
	z-index: 1;
	background-image: linear-gradient(90deg, var(--habe-bkamp-flade), transparent);
	pointer-events: none;
}

/*
 * Referencen viser begge kampagnefelter som LYSE flader med mørk tekst, og
 * begge motiver har selv en lys baggrund. Kravspecens tekst beskriver det
 * højre felt som mørkt (#5f6567 med hvid skrift), men reference-PNG'en er det
 * visuelle facit, og der er de ens. Skal feltet en dag være rigtigt mørkt, er
 * det denne ene variabel — og så skal tekstfarverne følge med.
 */
body.habe-brandside .habe-bkamp--lys,
body.habe-brandside .habe-bkamp--moerk {
	--habe-bkamp-flade: var(--habe-dis);
}

/* Teksten skal ligge over både motivet og udtoningen. */
body.habe-brandside .habe-bkamp__titel,
body.habe-brandside .habe-bkamp p,
body.habe-brandside .habe-bkamp .habe-knapper {
	position: relative;
	z-index: 2;
}

body.habe-brandside .habe-bkamp__titel {
	margin: 0;
	/* Serif kun til de store redaktionelle overskrifter — se --habe-serif. */
	font-family: var(--habe-serif);
	font-size: clamp(1.3125rem, 2vw, 1.75rem);
	font-weight: 400;
	line-height: 1.3;
	color: var(--beautyshop-tekst);
}

body.habe-brandside .habe-bkamp p {
	margin: 0.625rem 0 0;
	max-width: min(24em, 58%);
	font-size: 0.84375rem;
	line-height: 1.5;
	color: var(--beautyshop-tekst);
}

body.habe-brandside .habe-bkamp .habe-knapper {
	margin-top: 1.125rem;
}

body.habe-brandside .habe-bkamp .habe-knapper .habe-knap .wp-block-button__link {
	min-height: 2.75rem;
	padding: 0.75rem 1.25rem;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
}

/*
 * Overskrifter i brandintroen står i serif ligesom hero- og kampagnetitlerne.
 * Reglen står her selvom det redigerbare indhold p.t. ikke har en overskrift:
 * lægger redaktøren en ind, skal den ikke pludselig være sans.
 */
body.habe-brandside .habe-bintro h2,
body.habe-brandside .habe-bintro h3 {
	font-family: var(--habe-serif);
	font-weight: 400;
	line-height: 1.24;
	color: var(--beautyshop-tekst);
}

/* ------------------------------------------------- mellemstore skærme */

@media (max-width: 1023px) {
	body.habe-brandside .habe-katalog {
		grid-template-columns: minmax(10rem, 13.5rem) minmax(0, 1fr);
	}

	body.habe-brandside .habe-katalog__produkter ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ mobil */

/*
 * 781 px og ikke 782: det er Gutenbergs egen stablingsgrænse for
 * .wp-block-columns, og to forskellige grænser ville give et vindue på én
 * pixel hvor heroens kolonner står side om side med mobilens typografi.
 */
@media (max-width: 781px) {
	body.habe-brandside .habe-bhero .habe-bhero__rk {
		gap: 0;
	}

	/*
	 * Stablet skal fotoet ikke længere rage op over noget: overhænget giver kun
	 * mening ved siden af tekstspalten. Både figuren OG billedet skal ud af den
	 * absolutte opsætning — glemmer man kun det ene, bliver billedet hængende
	 * som et lag hen over kategorikortene under heroen.
	 */
	body.habe-brandside .habe-bhero__billede {
		position: static;
		height: auto;
		min-height: 0;
		padding-top: 0;
		overflow: visible;
	}

	body.habe-brandside .habe-bhero .habe-bhero__foto {
		min-height: 0;
	}

	/*
	 * Fast højde og ikke aspect-ratio: motivet er 1434x614, og i fuld bredde på
	 * en telefon ville det kun blive ~160 px højt, hvor produkterne knap kan
	 * ses. En fast højde med cover beskærer i stedet og holder dem store —
	 * og en fast højde kan heller ikke kollapse til 0 på et lazy-loadet
	 * billede, sådan som aspect-ratio kan.
	 */
	body.habe-brandside .habe-bhero__billede img {
		position: static;
		width: 100%;
		height: clamp(11rem, 34vw, 15rem);
		object-fit: cover;
		object-position: 72% bottom;
	}

	/*
	 * Knappen kan ikke længere sidde på et podie der ikke er der: den lægges
	 * under fotoet som en almindelig knap i flowet.
	 */
	body.habe-brandside .habe-bhero .habe-bhero__knap {
		position: static;
		justify-content: center;
		padding: clamp(1rem, 4vw, 1.5rem);
		background: var(--habe-btone-2);
	}

	body.habe-brandside .habe-bhero .habe-bhero__foto::before {
		display: none;
	}

	/*
	 * På mobil er kortet kun ca. 170 px bredt. Står motivet i venstre halvdel,
	 * får labelen under 80 px og ord som "Kropspleje" brækkes midt over.
	 * Derfor bliver motivet smallere og labelen får resten.
	 */
	body.habe-brandside .habe-bkort__billede {
		flex-basis: 38%;
	}

	body.habe-brandside .habe-bkort__label {
		font-size: 0.8125rem;
	}

	body.habe-brandside .habe-bintro .habe-bintro__logo {
		justify-content: flex-start;
	}

	/*
	 * Filtrene lægges over produkterne som en åben, kompakt blok.
	 *
	 * Med brandside.js kan hver gruppe foldes sammen, så kolonnen fylder få
	 * linjer. Uden JavaScript står de åbne — og det er stadig bedre end en
	 * drawer der kun kan lukkes op med et script der ikke kom frem.
	 */
	body.habe-brandside .habe-katalog {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.25rem, 4vw, 2rem);
	}

	body.habe-brandside .habe-facet__liste {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	body.habe-brandside .habe-facet__punkt {
		/* Chippen er selv målfladen — 44 px høj, derfor ingen ekstra padding-block. */
		min-height: 2.75rem;
		padding-inline: 0.75rem;
		border: 1px solid var(--beautyshop-kant);
		background: var(--habe-hvid);
	}

	body.habe-brandside .habe-facet__punkt.er-valgt {
		border-color: var(--habe-blaek);
	}

	body.habe-brandside .habe-facet__navn {
		flex: 0 1 auto;
	}

	body.habe-brandside .habe-katalog__produkter ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Stablet er felterne fulde skærmbredde, og et 584 px bredt motiv i en
	 * 40 %-kolonne på en 375 px skærm ville stå som et frimærke. Motivet får
	 * derfor hele bredden som et bånd øverst, og teksten står under.
	 */
	body.habe-brandside .habe-bkamp {
		min-height: 0;
		padding-right: var(--habe-bkamp-luft);
	}

	body.habe-brandside .habe-bkamp__billede {
		position: static;
		width: auto;
		height: 8.75rem;
		order: 2;
		margin-top: clamp(1rem, 4vw, 1.5rem);
	}

	body.habe-brandside .habe-bkamp::after {
		display: none;
	}

	body.habe-brandside .habe-bkamp__titel,
	body.habe-brandside .habe-bkamp p,
	body.habe-brandside .habe-bkamp .habe-knapper {
		order: 1;
	}
}

/* -------------------------------------------------------- meget smalle skærme */

/*
 * Under ca. 420 px er to produktkort på række så smalle at prisen og navnet
 * brækker. Én kolonne er mindre pænt, men læsbart.
 */
@media (max-width: 26.25rem) {
	body.habe-brandside .habe-katalog__produkter ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------- reduceret bevægelse */

/*
 * style.css dæmper allerede globalt, men reglen gentages her, så denne fil kan
 * læses og flyttes for sig uden at tilgængeligheden følger med ved et tilfælde.
 */
@media (prefers-reduced-motion: reduce) {
	body.habe-brandside .habe-bkort,
	body.habe-brandside .habe-chevron,
	body.habe-brandside .habe-tom__nulstil,
	body.habe-brandside .habe-knapper .habe-knap .wp-block-button__link,
	body.habe-brandside .habe-katalog__produkter .ct-woo-card-actions .button {
		transition: none;
	}
}
