/*
 * Barnfavoriter — temats enda stilmall.
 *
 * Färger, typsnitt och avstånd kommer från theme.json. Här ligger bara det som
 * inte går att uttrycka där: rutnät, kort, badges och de egna blocken.
 *
 * Filen är registrerad med en 'path', så WordPress bäddar in den i <head> om
 * den understiger styles_inline_size_limit (20 kB). I dag ligger den strax över
 * och serveras som en cachad fil — en enda begäran för hela sajten.
 */

/* ---------------------------------------------------------------- Grunder */

:root {
	--bf-radie-s: 5px;
	--bf-radie-m: 8px;
	--bf-radie-l: 10px;
	--bf-pill: 99px;
	--bf-linje: 1px solid var(--wp--preset--color--linje-svag);
	--bf-linje-stark: 1px solid var(--wp--preset--color--linje);
	--bf-fokusring: 0 0 0 2px var(--wp--preset--color--lin), 0 0 0 4px var(--wp--preset--color--lera-text);
	--bf-strip: repeating-linear-gradient(135deg, var(--wp--preset--color--sand) 0 9px, #F5F2EC 9px 18px);

	/*
	 * Köpknappens färg. Byt här så följer alla köpknappar med — i produktkort,
	 * utmärkelsekort och mobilens köpfot. Grönt poppar mot den varma linen;
	 * var(--wp--preset--color--lera-text) ger tillbaka den leriga tonen.
	 * Kontrollerat mot WCAG AA: 4,87:1 mot lin.
	 */
	--bf-cta: #3D7A52;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	height: auto;
}

/* ------------------------------------------------------- Tillgänglighet */

.bf-hoppa {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1rem 1.5rem;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--lin);
	font-weight: 600;
	border-radius: 0 0 var(--bf-radie-s) 0;
}

.bf-hoppa:focus {
	left: 0;
	top: 0;
	color: var(--wp--preset--color--lin);
	text-decoration: underline;
}

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

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--lera-text);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Ge ankarmål luft under det klistrade sidhuvudet. */
[id] {
	scroll-margin-top: 5rem;
}

/* -------------------------------------------------------------- Etiketter */

.bf-etikett {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dampad);
	border: 1px solid var(--wp--preset--color--linje-svag);
	border-radius: 3px;
	padding: 0.4em 0.55em;
	margin: 0;
}

.bf-etikett--guld {
	color: var(--wp--preset--color--guld-text);
	background: var(--wp--preset--color--guld-yta);
	border-color: var(--wp--preset--color--guld-linje);
}

.bf-etikett--salvia {
	color: var(--wp--preset--color--salvia-text);
	background: var(--wp--preset--color--salvia-yta);
	border-color: var(--wp--preset--color--salvia-linje);
}

.bf-etikett--ros {
	color: var(--wp--preset--color--ros-text);
	background: var(--wp--preset--color--ros-yta);
	border-color: var(--wp--preset--color--ros-linje);
}

.bf-etikett--lera {
	color: var(--wp--preset--color--lera-text);
	border-color: transparent;
	background: none;
	padding-left: 0;
	padding-right: 0;
	letter-spacing: 0.14em;
}

.bf-etikett--neutral {
	border-color: transparent;
	background: none;
	padding-left: 0;
	padding-right: 0;
	letter-spacing: 0.12em;
}

.bf-etikett--guld-mork {
	color: var(--wp--preset--color--guld);
	border-color: transparent;
	background: none;
	padding-left: 0;
	padding-right: 0;
	letter-spacing: 0.14em;
}

/* ----------------------------------------------------------------- Badges */

.bf-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--bf-pill);
	padding: 0.6em 0.85em;
	border: 1px solid transparent;
}

.bf-badge--primar {
	background: var(--wp--preset--color--guld-text);
	color: var(--wp--preset--color--lin);
}

.bf-badge--sekundar {
	background: var(--wp--preset--color--salvia-yta);
	border-color: var(--wp--preset--color--salvia-linje);
	color: var(--wp--preset--color--salvia-text);
}

.bf-badge--ovrig {
	background: var(--wp--preset--color--papper);
	border-color: var(--wp--preset--color--linje-svag);
	color: var(--wp--preset--color--dampad);
}

/* ------------------------------------------------------------------ Chips */

.bf-chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bf-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--brodtext);
	background: var(--wp--preset--color--vit);
	border: var(--bf-linje-stark);
	border-radius: var(--bf-pill);
	padding: 0.7rem 1rem;
	text-decoration: none;
}

.bf-chip:hover {
	border-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

.bf-chip--aktiv,
.bf-chip--aktiv:hover {
	background: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--lin);
	font-weight: 600;
}

.bf-chip__antal {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	color: inherit;
	opacity: 0.7;
}

.bf-utmarkelser__chips .bf-chip {
	background: var(--wp--preset--color--papper);
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	padding: 0.6rem 0.9rem;
}

.bf-chip__etikett {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dampad);
}

.bf-chip__vinnare {
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--black);
}

/* ---------------------------------------------------------------- Knappar */

.bf-knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: 48px;
	padding: 0.9rem 1.25rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: var(--bf-radie-s);
	border: 1px solid transparent;
}

.bf-knapp--primar {
	background: var(--bf-cta);
	color: var(--wp--preset--color--lin);
}

.bf-knapp--primar:hover,
.bf-knapp--primar:focus {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--lin);
	text-decoration: none;
}

.bf-knapp--sekundar {
	background: var(--wp--preset--color--vit);
	color: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
}

.bf-knapp--sekundar:hover,
.bf-knapp--sekundar:focus {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--lin);
	text-decoration: none;
}

/* ---------------------------------------------------------- Platshållare */

.bf-platshallare {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--bf-strip);
	border-radius: var(--bf-radie-s);
}

/* ------------------------------------------------------------- Testkort */

.bf-testkort {
	background: var(--wp--preset--color--vit);
	border: var(--bf-linje);
	border-radius: var(--bf-radie-m);
	overflow: hidden;
}

.bf-testkort__lank {
	display: grid;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.bf-testkort__lank:hover {
	color: inherit;
	text-decoration: none;
}

.bf-testkort__lank:hover .bf-testkort__titel {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bf-testkort__media img,
.bf-testkort__media .bf-platshallare {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 0;
}

.bf-testkort__kropp {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 1.25rem;
}

.bf-testkort__etiketter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.bf-testkort__titel {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--black);
}

.bf-testkort__utdrag,
.bf-testkort__underrubrik {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--dampad);
}

.bf-testkort__fotnot {
	margin-top: auto;
	padding-top: 0.2rem;
}

/* Kompakt (kategoriöversikten). */
.bf-testkort--kompakt .bf-testkort__media img,
.bf-testkort--kompakt .bf-testkort__media .bf-platshallare {
	aspect-ratio: 4 / 3;
	max-height: 112px;
}

.bf-testkort--kompakt .bf-testkort__kropp {
	padding: 1rem;
	gap: 0.4rem;
}

.bf-testkort--kompakt .bf-testkort__titel {
	font-size: 1.0625rem;
}

.bf-testkort--salvia.bf-testkort--kompakt {
	background: var(--wp--preset--color--papper);
	border-color: var(--wp--preset--color--salvia-linje);
}

/* Lista (sökträffar). */
.bf-testkort--lista {
	border: 0;
	border-radius: 0;
	background: transparent;
	border-bottom: var(--bf-linje);
}

.bf-testkort--lista .bf-testkort__lank {
	grid-template-columns: 130px 1fr auto;
	gap: 1.5rem;
	align-items: center;
	padding: 1.375rem 0;
}

.bf-testkort--lista .bf-testkort__media img,
.bf-testkort--lista .bf-testkort__media .bf-platshallare {
	border-radius: var(--bf-radie-s);
	aspect-ratio: 3 / 2;
}

.bf-testkort--lista .bf-testkort__kropp {
	padding: 0;
}

.bf-testkort--lista .bf-testkort__titel {
	font-size: 1.3125rem;
}

.bf-testkort__pil {
	color: var(--wp--preset--color--dampad);
	font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- Rutnät */

.bf-rutnat__huvud {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.625rem;
}

.bf-rutnat__rubrik {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
}

.bf-rutnat__lank {
	font-weight: 600;
	font-size: 0.875rem;
}

.bf-rutnat__lista {
	display: grid;
	gap: 1.625rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.bf-rutnat--kompakt .bf-rutnat__lista {
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}

.bf-rutnat--lista .bf-rutnat__lista {
	display: block;
}

/* ------------------------------------------------------ Kategoriöversikt */

.bf-oversikt__sektion + .bf-oversikt__sektion {
	margin-top: var(--wp--preset--spacing--50);
}

.bf-oversikt__huvud {
	display: flex;
	align-items: baseline;
	gap: 0.875rem;
	padding: 1.375rem 0 1rem;
	border-top: var(--bf-linje-stark);
}

.bf-oversikt__rubrik {
	margin: 0;
	font-size: 1.625rem;
}

.bf-oversikt__rubrik a {
	color: inherit;
}

.bf-oversikt__huvud p {
	margin: 0;
}

.bf-oversikt__lista {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}

/* ------------------------------------------------------------ Ålderstegen */

.bf-aldersteg ul {
	display: grid;
	gap: 0.625rem;
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bf-aldersteg--kol-1 ul {
	grid-template-columns: 1fr;
}

.bf-aldersteg--kol-3 ul {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bf-aldersteg--kol-5 ul {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.bf-aldersteg a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.9rem 1.0625rem;
	background: var(--wp--preset--color--vit);
	border: var(--bf-linje-stark);
	border-radius: 6px;
	color: var(--wp--preset--color--black);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
}

.bf-aldersteg a:hover {
	border-color: var(--wp--preset--color--black);
	text-decoration: none;
}

.bf-aldersteg__antal {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wp--preset--color--dampad);
}

/* ------------------------------------------------------------- Brödsmulor */

.bf-smulor ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dampad);
}

.bf-smulor li + li::before {
	content: "/";
	margin-right: 0.75rem;
	color: var(--wp--preset--color--linje);
}

.bf-smulor a {
	color: inherit;
}

/* --------------------------------------------------------- Testhuvud */

.bf-testhuvud__fakta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.625rem;
	margin: 0;
	padding: 1.125rem 0;
	border-top: var(--bf-linje);
	border-bottom: var(--bf-linje);
}

.bf-testhuvud__fakta dt {
	margin-bottom: 0.45rem;
}

.bf-testhuvud__fakta dd {
	margin: 0;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--black);
}

/*
 * Skribentens porträtt står till höger om namnet, på samma rad. Bilden är en
 * utsmyckning — namnet står redan där — så den är aria-hidden och tom i alt,
 * och radens höjd är låst så att den inte hoppar medan bilden laddas.
 */
.bf-testhuvud__av {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.bf-portratt {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wp--preset--color--papper);
}

.bf-disclosure {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--wp--preset--color--dampad);
}

/* --------------------------------------------------------- Utmärkelser */

.bf-utmarkelser__rubrik {
	margin: 0 0 1.25rem;
	font-size: 1.625rem;
}

.bf-utmarkelser__kort {
	display: grid;
	gap: 1.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.bf-utmarkelsekort {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	background: var(--wp--preset--color--vit);
	border: var(--bf-linje);
	border-radius: var(--bf-radie-m);
	padding: 1.375rem;
}

.bf-utmarkelsekort--primar {
	border-color: var(--wp--preset--color--guld-linje);
}

.bf-utmarkelsekort__bild {
	width: 100%;
}

.bf-utmarkelsekort__bild img,
.bf-utmarkelsekort__bild .bf-platshallare {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--bf-radie-s);
}

.bf-utmarkelsekort__namn {
	margin: 0;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.25;
}

.bf-utmarkelsekort__namn a {
	color: var(--wp--preset--color--black);
}

.bf-utmarkelsekort__text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--dampad);
}

.bf-utmarkelsekort .bf-knapp {
	width: 100%;
	margin-top: auto;
}

.bf-utmarkelser__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 1.125rem 0 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------ Produktrecension */

.bf-produkt {
	margin-block: var(--wp--preset--spacing--60);
}

.bf-produkt__huvud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
	margin-bottom: 1.375rem;
}

.bf-rang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: var(--bf-pill);
	background: var(--wp--preset--color--guld-text);
	color: var(--wp--preset--color--lin);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	font-weight: 500;
}

.bf-produkt__namn {
	margin: 0;
	font-size: clamp(1.625rem, 3.5vw, 2.125rem);
}

.bf-produkt__bild {
	margin: 0 0 1.625rem;
}

/*
 * Bilden länkar till butiken. Länken får inte lägga på någon egen yta — den
 * ska sitta exakt runt bilden — men den ska synas som klickbar och få en
 * tydlig fokusram när man tabbar sig fram.
 */
.bf-produkt__bildlank {
	display: block;
	border-radius: var(--bf-radie-m);
}

.bf-produkt__bildlank:hover img {
	opacity: 0.92;
}

.bf-produkt__bildlank:focus-visible {
	outline: 3px solid var(--wp--preset--color--salvia);
	outline-offset: 3px;
}

.bf-produkt__bild img,
.bf-produkt__bild .bf-platshallare {
	width: 100%;
	border-radius: var(--bf-radie-m);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/*
 * Produktbilder ur butiksflöden.
 *
 * De är fotade mot vitt, ofta höga och smala, och innehåller sällan något
 * utanför själva produkten. Beskärs de som en redaktionell bild försvinner
 * halva produkten. De ramas därför in i stället: hela bilden syns, höjden är
 * begränsad så att en stående bild inte tar över artikeln, och den vita
 * bakgrunden gör att bildens egen bakgrund går ihop med ramen.
 */
img.bf-bild--produktfoto {
	object-fit: contain;
	background: #fff;
}

.bf-produkt__bild img.bf-bild--produktfoto {
	display: block;
	width: auto;
	max-width: min(100%, 30rem);
	height: auto;
	max-height: 26rem;
	aspect-ratio: auto;
	margin-inline: auto;
	padding: 1.25rem;
	border: var(--bf-linje);
}

/*
 * Samma sak på utmärkelsekortet. Där är rutan 4:3, och en stående produktbild
 * som ramas in i den lämnar stora vita fält över och under. Höjden begränsas
 * därför i stället för att bilden ska fylla en ruta den inte har formen för.
 */
.bf-utmarkelsekort__bild img.bf-bild--produktfoto {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 11rem;
	aspect-ratio: auto;
	margin-inline: auto;
}

/* ------------------------------------------------------------ Faktatabell */

.bf-fakta {
	border: var(--bf-linje);
	border-radius: var(--bf-radie-m);
	overflow: hidden;
	margin-block: 1.625rem;
}

.bf-fakta__rubrik {
	margin: 0;
	padding: 0.875rem 1.25rem;
	background: var(--wp--preset--color--papper);
	border-bottom: var(--bf-linje);
}

.bf-fakta__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	margin: 0;
}

.bf-fakta__rad {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 1.25rem;
	border-bottom: 1px solid #F0EDE6;
	border-right: 1px solid #F0EDE6;
	font-size: 0.875rem;
	line-height: 1.4;
}

.bf-fakta__rad dt {
	color: var(--wp--preset--color--dampad);
}

.bf-fakta__rad dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	color: var(--wp--preset--color--black);
}

/* -------------------------------------------------------------- Omdömen */

/* --------------------------------------------------------------- Textruta */

/*
 * Ett avsnitt som ska läsas som en egen enhet — köpguide, ordlista, bakgrund.
 * Rutan bidrar med bakgrund och luft, inget annat: innehållet är vanlig text
 * med vanliga rubriker, så att typografin är den samma som i brödtexten och
 * rubrikerna hittar till innehållsförteckningen.
 */
.bf-textruta {
	border-radius: var(--bf-radie-m);
	padding: 1.75rem 1.875rem;
	margin-block: var(--wp--preset--spacing--50);
}

.bf-textruta--papper {
	background: var(--wp--preset--color--papper);
	border: var(--bf-linje);
}

.bf-textruta--salvia {
	background: var(--wp--preset--color--salvia-yta);
	border: 1px solid var(--wp--preset--color--salvia-linje);
}

.bf-textruta--guld {
	background: var(--wp--preset--color--guld-yta);
	border: 1px solid var(--wp--preset--color--guld-linje);
}

/* Första och sista barnet ska inte trycka isär rutan med egna marginaler. */
.bf-textruta > *:first-child {
	margin-top: 0;
}

.bf-textruta > *:last-child {
	margin-bottom: 0;
}

.bf-textruta h2 {
	margin-bottom: 0.75rem;
}

.bf-textruta h3 {
	margin-top: 1.625rem;
	margin-bottom: 0.5rem;
}

@media (max-width: 600px) {
	.bf-textruta {
		padding: 1.375rem 1.25rem;
	}
}

.bf-omdome {
	border-radius: var(--bf-radie-m);
	padding: 1.25rem;
	margin-block: 1.125rem;
}

.bf-omdome--positiv {
	background: var(--wp--preset--color--salvia-yta);
	border: 1px solid var(--wp--preset--color--salvia-linje);
}

.bf-omdome--negativ {
	background: var(--wp--preset--color--ros-yta);
	border: 1px solid var(--wp--preset--color--ros-linje);
}

.bf-omdome > p {
	margin: 0 0 0.875rem;
}

.bf-omdome__lista {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--brodtext);
}

.bf-omdome__lista li {
	display: flex;
	gap: 0.6rem;
}

.bf-omdome__lista li::before {
	content: attr(data-ikon);
	flex: none;
}

.bf-omdome__lista[data-ikon="+"] li::before {
	content: "+";
	color: var(--wp--preset--color--salvia-text);
}

.bf-omdome__lista[data-ikon="−"] li::before {
	content: "−";
	color: var(--wp--preset--color--ros-text);
}

/* Två kolumner när plus och minus står bredvid varandra. */
@media (min-width: 782px) {
	.bf-produkt .bf-omdome--positiv + .bf-omdome--negativ {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------- Köpmodul */

.bf-kop {
	margin-block: 1.625rem;
}

.bf-kop--rad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	background: var(--wp--preset--color--papper);
	border: var(--bf-linje-stark);
	border-radius: var(--bf-radie-m);
	padding: 1.25rem 1.5rem;
}

.bf-kop__namn {
	margin: 0;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--black);
}

.bf-kop__pris {
	margin: 0.3rem 0 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--dampad);
}

.bf-kop:not(.bf-kop--rad) .bf-knapp {
	width: 100%;
}

/* ------------------------------------------------------------------ Dom */

.bf-dom {
	background: var(--wp--preset--color--lin);
	border: var(--bf-linje-stark);
	border-radius: var(--bf-radie-m);
	padding: 1.625rem;
}

.bf-dom__rubrik {
	margin: 1.125rem 0 1.25rem;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--black);
}

.bf-dom--salvia .bf-dom__rubrik {
	color: var(--wp--preset--color--salvia-text);
}

.bf-dom--ros .bf-dom__rubrik {
	color: var(--wp--preset--color--ros-text);
}

.bf-dom__skala {
	display: flex;
	gap: 5px;
	margin-bottom: 0.75rem;
}

.bf-dom__steg {
	flex: 1;
	height: 6px;
	border-radius: var(--bf-pill);
	background: var(--wp--preset--color--linje);
}

.bf-dom--salvia .bf-dom__steg--fylld {
	background: var(--wp--preset--color--salvia);
}

.bf-dom--ros .bf-dom__steg--fylld {
	background: var(--wp--preset--color--ros-text);
}

.bf-dom--neutral .bf-dom__steg--fylld {
	background: var(--wp--preset--color--guld-text);
}

.bf-dom__skalatext {
	display: flex;
	justify-content: space-between;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dampad);
}

.bf-dom__text {
	margin: 1.25rem 0 0;
	padding-top: 1.125rem;
	border-top: var(--bf-linje);
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--wp--preset--color--brodtext);
}

/* ------------------------------------------------------------------- FAQ */

.bf-faq {
	border-top: var(--bf-linje);
	margin-block: 1.625rem;
}

.bf-fraga {
	border-bottom: var(--bf-linje);
}

.bf-fraga__rubrik {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 0;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--wp--preset--color--black);
	cursor: pointer;
	list-style: none;
}

.bf-fraga__rubrik::-webkit-details-marker {
	display: none;
}

.bf-fraga__ikon {
	flex: none;
	width: 1rem;
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--dampad);
	text-align: center;
}

.bf-fraga__ikon::before {
	content: "+";
}

.bf-fraga[open] .bf-fraga__ikon::before {
	content: "−";
}

.bf-fraga__svar {
	padding-bottom: 1.125rem;
	max-width: 62ch;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--wp--preset--color--brodtext);
}

.bf-fraga__svar > :first-child {
	margin-top: 0;
}

/* -------------------------------------------------------------- Kortlista */

.bf-kortlista {
	display: grid;
	gap: 1px;
	margin: 0 0 1.625rem;
	padding: 0;
	list-style: none;
	background: var(--wp--preset--color--linje-svag);
	border: var(--bf-linje);
	border-radius: var(--bf-radie-m);
	overflow: hidden;
	counter-reset: bf-kort;
}

.bf-kortlista--kol-2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.bf-kortlista--kol-3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.bf-kortlista--kol-4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.bf-kort {
	background: var(--wp--preset--color--lin);
	padding: 1.25rem 1.375rem;
}

.bf-kortlista--numrerad .bf-kort::before {
	counter-increment: bf-kort;
	content: counter(bf-kort, decimal-leading-zero);
	display: block;
	margin-bottom: 0.875rem;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.875rem;
	font-weight: 300;
	color: var(--wp--preset--color--lera-text);
}

.bf-kort__rubrik {
	margin: 0 0 0.4rem;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--wp--preset--color--black);
}

.bf-kort__text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--wp--preset--color--dampad);
}

/* Mörk variant (Så testade vi). */
.bf-kortlista--mork {
	background: #3A362F;
	border-color: #3A362F;
}

.bf-kortlista--mork .bf-kort {
	background: var(--wp--preset--color--black);
}

.bf-kortlista--mork .bf-kort__rubrik {
	color: var(--wp--preset--color--lin);
}

.bf-kortlista--mork .bf-kort__text {
	color: #B7B1A5;
}

/* -------------------------------------------------------------- Testmetod */

.bf-testmetod {
	background: var(--wp--preset--color--black);
	border-radius: var(--bf-radie-m);
	padding: 2rem 2.125rem;
	margin-block: var(--wp--preset--spacing--60);
	/* Ljus grundfärg, så att inget ärver mörk text mot mörk botten. */
	color: #B7B1A5;
}

/*
 * Rutans enda H2. Den är mindre än artikelns egna H2:or med flit — rutan är
 * ett avsnitt i texten, inte en ny artikel — men den är fortfarande en H2, så
 * att innehållsförteckningen och läsaren ser samma struktur.
 */
.bf-testmetod__rubrik {
	margin: 0 0 1.125rem;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--wp--preset--color--lin);
}

.bf-testmetod > p,
.bf-testmetod > ul,
.bf-testmetod > ol {
	margin: 0 0 1rem;
}

.bf-testmetod > ul,
.bf-testmetod > ol {
	padding-left: 1.25rem;
}

.bf-testmetod li {
	margin-bottom: 0.4rem;
}

.bf-testmetod h3,
.bf-testmetod h4 {
	margin: 1.75rem 0 0.6rem;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--wp--preset--color--lin);
}

.bf-testmetod > :last-child {
	margin-bottom: 0;
}

/* Guld läser som länk mot den mörka bottnen, och klarar kontrastkravet. */
.bf-testmetod a {
	color: var(--wp--preset--color--guld);
}

.bf-testmetod strong {
	color: var(--wp--preset--color--lin);
}

.bf-testmetod .bf-kortlista {
	background: transparent;
	border: 0;
	gap: 1.625rem;
	margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.bf-testmetod .bf-kort {
	background: transparent;
	padding: 0;
}

.bf-testmetod .bf-kort__rubrik {
	color: var(--wp--preset--color--lin);
}

.bf-testmetod .bf-kort__text {
	color: #B7B1A5;
}

/* ---------------------------------------------------------------- Källor */

.bf-kallor {
	background: var(--wp--preset--color--papper);
	border: var(--bf-linje-stark);
	border-radius: var(--bf-radie-m);
	padding: 1.375rem;
}

.bf-kallor__lista {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.4;
}

.bf-kallor__granskad {
	margin: 1rem 0 0;
	padding-top: 0.875rem;
	border-top: var(--bf-linje-stark);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dampad);
}

/* ------------------------------------------------------------- Läs också */

.bf-lasocksa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	background: var(--wp--preset--color--papper);
	border: var(--bf-linje-stark);
	border-radius: var(--bf-radie-m);
	padding: 1.375rem 1.5rem;
	margin-block: 1.625rem;
}

.bf-lasocksa__titel {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.3;
}

.bf-lasocksa__titel a {
	color: var(--wp--preset--color--black);
}

/* ------------------------------------------------ Innehållsförteckning */

.bf-toc__lista {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0.875rem 0 0;
	padding: 0 0 0 1rem;
	list-style: none;
	border-left: var(--bf-linje-stark);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.35;
}

.bf-toc__rad a {
	color: var(--wp--preset--color--brodtext);
}

.bf-toc__rad--sektion a {
	color: var(--wp--preset--color--black);
	font-weight: 700;
}

/* ---------------------------------------------------------------- Sök */

.bf-sok__huvud {
	margin-bottom: 1.625rem;
}

.bf-sok__antal {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dampad);
}

.bf-sok__ord {
	color: var(--wp--preset--color--black);
}

/* Söksidans fält får designens form. */
.bf-sok-falt .wp-block-search__input {
	border: var(--bf-linje-stark);
	border-radius: var(--bf-radie-m);
	background: var(--wp--preset--color--vit);
	padding: 1.05rem 1.375rem;
	font-size: 1.1875rem;
	font-weight: 500;
	color: var(--wp--preset--color--black);
}

.bf-sok-falt .wp-block-search__button {
	border-radius: var(--bf-radie-m);
}

.bf-sok__tomt {
	color: var(--wp--preset--color--dampad);
}

/* --------------------------------------------------------------- Köpfot */

.bf-kopfot {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	background: var(--wp--preset--color--lin);
	border-top: var(--bf-linje-stark);
	padding: 0.875rem 1.25rem calc(0.875rem + env(safe-area-inset-bottom));
	box-shadow: 0 -10px 24px -18px rgba(35, 33, 29, 0.4);
}

.bf-kopfot__text {
	min-width: 0;
}

.bf-kopfot__namn {
	margin: 0;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--wp--preset--color--black);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bf-kopfot__pris {
	margin: 0.3rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	color: var(--wp--preset--color--dampad);
}

.bf-kopfot .bf-knapp {
	margin-left: auto;
	white-space: nowrap;
}

@media (min-width: 782px) {
	.bf-kopfot {
		display: none !important;
	}
}

/* -------------------------------------------------------- Sidhuvud/fot */

.bf-trustbar {
	background: var(--wp--preset--color--black);
	color: #B7B1A5;
	padding: 0.625rem 1rem;
	text-align: center;
}

.bf-trustbar p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bf-sidhuvud {
	border-bottom: var(--bf-linje);
	background: var(--wp--preset--color--lin);
}

.bf-tagline {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dampad);
	margin: 0.35rem 0 0;
}

.bf-sidfot {
	background: var(--wp--preset--color--papper);
	border-top: var(--bf-linje-stark);
}

.bf-sidfot .wp-block-heading {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dampad);
}

.bf-finstilt {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dampad);
}

/* ---------------------------------------------------------- Artikeltext */

.bf-artikel > p {
	max-width: var(--wp--custom--lasbredd, 68ch);
}

.bf-ingress {
	font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
	line-height: 1.65;
	color: var(--wp--preset--color--brodtext);
}

.bf-mork {
	background: var(--wp--preset--color--black);
	color: #B7B1A5;
	border-radius: var(--bf-radie-m);
}

.bf-mork :where(h1, h2, h3, h4, p strong) {
	color: var(--wp--preset--color--lin);
}

.bf-mork a:not(.bf-knapp):not(.wp-block-button__link) {
	color: var(--wp--preset--color--lin);
	text-decoration: underline;
}

.bf-statistik {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: clamp(1.875rem, 4vw, 2.375rem);
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--lin);
}

/* --------------------------------------------------------- Sidokolumner */

.bf-med-sidokolumn {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.25rem);
	grid-template-columns: 236px minmax(0, 1fr);
	align-items: start;
}

.bf-med-sidokolumn--hoger {
	grid-template-columns: minmax(0, 1fr) 320px;
}

.bf-sticky {
	position: sticky;
	top: 1.25rem;
}

@media (max-width: 1023px) {
	.bf-med-sidokolumn,
	.bf-med-sidokolumn--hoger {
		grid-template-columns: 1fr;
	}

	.bf-sticky {
		position: static;
	}

	.bf-toc {
		display: none;
	}
}

/* ------------------------------------------------------------- Småskärm */

@media (max-width: 781px) {
	.bf-testkort--lista .bf-testkort__lank {
		grid-template-columns: 88px 1fr;
		gap: 1rem;
	}

	.bf-testkort__pil {
		display: none;
	}

	.bf-testkort--lista .bf-testkort__titel {
		font-size: 1.0625rem;
	}

	.bf-kop--rad,
	.bf-lasocksa {
		flex-direction: column;
		align-items: stretch;
	}

	.bf-kop--rad .bf-knapp,
	.bf-lasocksa .bf-knapp {
		width: 100%;
	}

	.bf-testmetod {
		padding: 1.5rem 1.375rem;
	}

	.bf-har-kopfot .wp-site-blocks {
		padding-bottom: 5.5rem;
	}
}

/* --------------------------------------------------------------- Utskrift */

@media print {
	.bf-kopfot,
	.bf-toc,
	.bf-sidhuvud,
	.bf-trustbar,
	.wp-block-navigation {
		display: none !important;
	}

	.bf-produkt {
		break-inside: avoid;
	}
}

/* Ålderstegen som meny i sidhuvudet. */
.bf-aldersteg--rad ul {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.5rem;
	margin: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.bf-aldersteg--rad ul::-webkit-scrollbar {
	display: none;
}

.bf-aldersteg--rad a {
	min-height: 0;
	padding: 0 0 0.15rem;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	font-weight: 500;
	color: var(--wp--preset--color--brodtext);
	white-space: nowrap;
}

.bf-aldersteg--rad a:hover {
	color: var(--wp--preset--color--black);
	border-bottom-color: var(--wp--preset--color--linje);
}

.bf-aldersteg--rad .bf-aldersteg__aktiv {
	color: var(--wp--preset--color--black);
	font-weight: 700;
	border-bottom-color: var(--wp--preset--color--lera);
}

.bf-aldersteg--rad .bf-aldersteg__antal {
	display: none;
}

/* ------------------------------------------------------------ Arkivkort */

.bf-arkivkort {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.bf-arkivkort .wp-block-post-featured-image {
	margin-bottom: 0.4rem;
}

.bf-arkivkort .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
}

.bf-arkivkort .wp-block-post-title {
	margin: 0;
	line-height: 1.3;
}

.bf-arkivkort .wp-block-post-title a {
	color: var(--wp--preset--color--black);
}

.bf-arkivkort .wp-block-post-terms,
.bf-arkivkort .wp-block-post-excerpt {
	margin: 0;
}

.bf-arkivkort .wp-block-post-terms {
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bf-arkivkort .wp-block-post-excerpt__excerpt {
	line-height: 1.6;
}

.bf-arkivkort .wp-block-post-excerpt__more-text {
	display: none;
}

/* Sidnumrering. */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--bf-linje-stark);
	font-size: 0.875rem;
	font-weight: 500;
}

/* Sökfältet i sidhuvudet. */
.bf-sidhuvud .wp-block-search__input {
	border: var(--bf-linje-stark);
	border-radius: var(--bf-pill);
	padding: 0.6rem 1rem;
	background: var(--wp--preset--color--vit);
	font-size: 0.8125rem;
}

/* Navigeringens overlay på mobil. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--lin);
	padding-top: var(--wp--preset--spacing--60);
}

/* Författarrutan. */
.wp-block-post-author-biography {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--bf-linje);
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--wp--preset--color--dampad);
}

/* ------------------------------------------------- Plus och minus i par */

/*
 * När en produktrecension har både ”det vi gillar” och ”det vi inte gillar”
 * står de bredvid varandra, som i designen. Allt annat i recensionen får full
 * bredd. Webbläsare utan :has() staplar dem i stället — fullt läsbart.
 */
@media (min-width: 782px) {
	.bf-produkt:has(.bf-omdome--positiv + .bf-omdome--negativ) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.125rem;
	}

	.bf-produkt:has(.bf-omdome--positiv + .bf-omdome--negativ) > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	.bf-produkt > .bf-omdome--positiv:has(+ .bf-omdome--negativ) {
		grid-column: 1;
	}

	.bf-produkt > .bf-omdome--positiv:has(+ .bf-omdome--negativ) + .bf-omdome--negativ {
		grid-column: 2;
	}
}

/* Utmärkelsekorten ska rymmas tre i bredd även i en smalare spalt. */
.bf-utmarkelser__kort {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

/* Udda sista ålderssteg tar hela raden i stället för att lämna ett hål. */
.bf-aldersteg--kol-2 li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Bildyta med randig platshållare tills en riktig bild lagts in. */
.bf-bildyta {
	background: var(--bf-strip);
	border-radius: var(--bf-radie-m);
	min-height: 320px;
	overflow: hidden;
}

.bf-bildyta figure,
.bf-bildyta img {
	margin: 0;
	width: 100%;
	display: block;
}

/* Sidfotens länklistor. */
.bf-sidfot .wp-block-navigation {
	font-weight: 500;
}

/* ------------------------------------------------------- Sidhuvudets rad */

/*
 * Desktop: titel | ålderstegen | meny med sökfält.
 * Mobil: titel + hamburgare på första raden, ålderstegen på den andra.
 * Sökfältet ligger inuti menyn och följer därför med in i mobilens overlay
 * i stället för att lägga sig som ett eget band under rubriken.
 */
@media (max-width: 781px) {
	.bf-sidhuvud__rad {
		row-gap: 0.875rem;
	}

	.bf-sidhuvud__rad > .wp-block-site-title,
	.bf-sidhuvud__rad > .wp-block-group:has(.wp-block-site-title) {
		order: 1;
	}

	.bf-sidhuvud__rad > .bf-meny {
		order: 2;
	}

	.bf-sidhuvud__rad > .bf-aldersteg {
		order: 3;
		flex-basis: 100%;
		margin-inline: calc(-1 * var(--wp--style--root--padding-right, 1.25rem));
		padding-inline: var(--wp--style--root--padding-right, 1.25rem);
	}

	.bf-sidhuvud__rad > .bf-aldersteg ul {
		gap: 1.25rem;
		/*
		 * "safe" gör att raden faller tillbaka till vänsterställd när den är
		 * bredare än skärmen — annars hamnar första åldern utanför och går
		 * inte att scrolla fram.
		 */
		justify-content: safe center;
	}
}

/* Sökfältet inuti menyn. */
.bf-meny .wp-block-search {
	margin: 0;
}

.bf-meny .wp-block-search__input {
	border: var(--bf-linje-stark);
	border-radius: var(--bf-pill);
	padding: 0.55rem 1rem;
	background: var(--wp--preset--color--vit);
	font-size: 0.8125rem;
}

/* I mobilens overlay ska sökfältet ta hela bredden. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-search,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-search__inside-wrapper {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-search__input {
	font-size: 1rem;
	padding: 0.9rem 1.25rem;
}

/* ------------------------------------------------------------- Tre spår */

.bf-spar {
	border-top: var(--bf-linje);
	border-bottom: var(--bf-linje);
}

.bf-spar__rad {
	padding-block: var(--wp--preset--spacing--50);
	margin-block: 0;
}

.bf-spar__kol {
	padding-inline: var(--wp--preset--spacing--50);
}

.bf-spar__kol:first-child {
	padding-left: 0;
}

.bf-spar__kol:last-child {
	padding-right: 0;
}

.bf-spar__kol + .bf-spar__kol {
	border-left: var(--bf-linje);
}

.bf-spar__kol .wp-block-heading {
	margin: 0.75rem 0 0.5rem;
}

.bf-spar__kol .wp-block-heading a {
	color: var(--wp--preset--color--black);
}

.bf-spar__kol p:last-child {
	margin-bottom: 0;
}

@media (max-width: 781px) {
	.bf-spar__kol,
	.bf-spar__kol + .bf-spar__kol {
		padding-inline: 0;
		border-left: 0;
	}

	.bf-spar__kol + .bf-spar__kol {
		border-top: var(--bf-linje);
		padding-top: var(--wp--preset--spacing--40);
	}
}

/* --------------------------------------------------- Två butiker i kortet */

.bf-kop__knappar {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.bf-kop--rad .bf-kop__knappar {
	min-width: min(100%, 250px);
}

.bf-kop:not(.bf-kop--rad) .bf-kop__knappar .bf-knapp {
	width: 100%;
}

.bf-kop__pris--andra {
	margin: 0;
	text-align: center;
}

/* --------------------------------------------------- Enkla länklistor */

/*
 * Sidfoten ska vara fyra spalter text, inte piller och rutor. Ålderstegen och
 * temafiltret kan därför också ritas som vanliga länklistor.
 */
.bf-lankar ul {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
}

.bf-lankar a {
	color: var(--wp--preset--color--brodtext);
	background: none;
	border: 0;
	padding: 0;
	min-height: 0;
	display: inline;
	font-weight: 500;
}

.bf-lankar a:hover {
	color: var(--wp--preset--color--black);
	border: 0;
}

.bf-lankar .bf-aldersteg__antal,
.bf-lankar .bf-chip__antal {
	display: none;
}

/* ------------------------------------------------------------- Sidfoten */

.bf-sidfot__spalter {
	margin-bottom: var(--wp--preset--spacing--60);
}

.bf-sidfot .wp-block-heading {
	margin: 0;
}

.bf-sidfot .wp-block-site-title {
	margin-bottom: 0.75rem;
}

.bf-sidfot .bf-lankar {
	margin-top: 0.875rem;
}

.bf-sidfot .bf-lankar ul {
	margin-top: 0;
}

/* Navigeringsblocket i sidfoten ska bete sig som de andra länklistorna. */
.bf-sidfot .wp-block-navigation .wp-block-navigation-item__content {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--brodtext);
}

.bf-sidfot .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--black);
}

@media (max-width: 781px) {
	.bf-sidfot__spalter {
		gap: var(--wp--preset--spacing--50);
	}
}

/* --------------------------------------------------- Menyn på mobil */

/*
 * Kärnans overlay ärver menyns högerställning och lägger sökfältet löst i
 * flödet. Här blir den i stället en vänsterställd lista med tydliga träffytor
 * och sökfältet överst.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	padding-top: var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: var(--bf-linje);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1rem 0;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--wp--preset--color--black);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-search {
	order: -1;
	margin-bottom: var(--wp--preset--spacing--40);
}


/* ------------------------------------------------ Åldersraden, mobil */
/*
 * bf-aldersteg-overflow
 *
 * Åldersraden är ett flexbarn med flex-basis: 100%. Utan min-width: 0 får
 * den inte krympa under sitt innehåll, så de sex åldrarna tvingade hela
 * dokumentet bredare än skärmen och sidan gick att dra i sidled. Raden ska
 * i stället scrolla inuti sig själv.
 */
@media (max-width: 781px) {
	.bf-sidhuvud__rad > .bf-aldersteg {
		min-width: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.bf-sidhuvud__rad > .bf-aldersteg::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	.bf-sidhuvud__rad > .bf-aldersteg ul {
		flex-wrap: nowrap;
	}
}