/*
Theme Name: Utetestet
Theme URI: https://utetestet.se/
Description: Tema för Utetestet, jämförelser av grillar, robotgräsklippare, högtryckstvättar och trädgårdsmaskiner utifrån dokumenterade produktdata. Lugn och lättläst: vit sida, mörkgröna rubriker och en liten orange markering.
Author: Utetestet
Template: twentytwentyfive
Version: 2.0.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: ut-ute
*/

/* ---------- Grund ---------- */

:root {
	--ut-text: #1A1D19;
	--ut-text-2: #4B5548;
	--ut-gron: #1F4A1A;
	--ut-gron-2: #2B5E22;
	--ut-glod: #C2410C;
	--ut-yta: #F4F6F2;
	--ut-linje: #D8DED4;
	--ut-linje-2: #8A9686;
	--ut-vit: #FFFFFF;
	--ut-display: var(--wp--preset--font-family--display);
	--ut-brod: var(--wp--preset--font-family--text);
	--ut-s1: 4px; --ut-s2: 8px; --ut-s3: 12px; --ut-s4: 16px; --ut-s5: 24px; --ut-s6: 32px; --ut-s7: 48px; --ut-s8: 64px; --ut-s9: 96px;

	/* Variabler för jämförelsedelarna */
	--ute-accent: var(--ut-gron);
	--ute-pa-accent: #FFFFFF;
	--ute-yta: #FFFFFF;
	--ute-bakgrund: var(--ut-yta);
	--ute-text: var(--ut-text);
	--ute-text-svag: var(--ut-text-2);
	--ute-kant: var(--ut-linje-2);
	--ute-radie: 4px;
	--ute-font-rubrik: var(--ut-display);
	--ute-vinnare: var(--ut-gron);
	--ute-pa-vinnare: #FFFFFF;
	--ute-vinnare-text: var(--ut-gron);
	--ute-metod-yta: var(--ut-yta);
	--ute-metod-text: var(--ut-text);
	--ute-plus: #22662A;
	--ute-minus: #9F1D1D;
	--ute-mellanrum: 1rem;
	--ute-bild-ratio: 4 / 3;
	--ute-guidebild-ratio: 2 / 1;
}

body { background: var(--ut-vit); color: var(--ut-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: #D9E8D2; }
a { color: var(--ut-gron-2); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ut-gron); text-decoration-thickness: 2px; }
:where(a, button, input, summary, [tabindex]):focus-visible { outline: 3px solid var(--ut-gron); outline-offset: 2px; }
.skip-link.screen-reader-text:focus { background: var(--ut-vit); color: var(--ut-gron); clip: auto; clip-path: none; height: auto; width: auto; padding: .8rem 1.1rem; z-index: 100000; top: .5rem; left: .5rem; font-weight: 700; border: 2px solid var(--ut-gron); }
.screen-reader-text:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
h1, h2, h3, h4 { text-wrap: balance; color: var(--ut-gron); }
p { text-wrap: pretty; }
img { max-width: 100%; height: auto; }
.ut-tal, .ute-betyg__tal, .ut-tabell .is-tal, .ute-tabell__tabell td { font-variant-numeric: tabular-nums; }
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0 !important; }

.ut-meta { margin: var(--ut-s2) 0 0; font-size: .9375rem; color: var(--ut-text-2); }
.ut-label { display: block; font-size: .9375rem; font-weight: 600; margin: 0 0 var(--ut-s2); }
.ut-lanka { font-weight: 600; }
.ut-etikett { display: inline-block; margin: 0 0 var(--ut-s2); padding: 2px 8px; border: 1px solid var(--ut-gron); border-radius: 2px; color: var(--ut-gron); font-size: .875rem; font-weight: 600; line-height: 1.5; }
.ut-etikett.is-vinnare { background: var(--ut-gron); color: var(--ut-vit); }
.ut-knapp { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 4px; background: var(--ut-gron); color: var(--ut-vit); font-weight: 600; text-decoration: none; }
.ut-knapp:hover { background: #163812; color: var(--ut-vit); text-decoration: none; }
.ut-knapp.is-annons { background: var(--ut-vit); color: var(--ut-gron); border: 1px solid var(--ut-gron); }
.ut-annons { font-weight: 400; font-size: .875rem; margin-left: 4px; }
.ut-stampel { display: block; height: auto; }

/* Tabeller: rubrikrad, hårlinjer och högerställda tal. */
.ut-tabellomrade { overflow-x: auto; }
.ut-tabell { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ut-tabell caption { text-align: left; font-weight: 600; padding-bottom: var(--ut-s2); }
.ut-tabell th, .ut-tabell td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ut-linje); text-align: left; vertical-align: top; }
.ut-tabell thead th { font-weight: 600; font-size: .9375rem; color: var(--ut-text-2); border-bottom: 2px solid var(--ut-text); }
.ut-tabell tbody th { font-weight: 600; }
.ut-tabell .is-tal { text-align: right; white-space: nowrap; }
.ut-tabell.is-kompakt { font-size: .9375rem; max-width: 420px; }
.ut-tabell.is-specar th { width: 45%; font-weight: 400; color: var(--ut-text-2); }

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

.ut-header { background: var(--ut-vit); border-bottom: 1px solid var(--ut-linje); }
.ut-header-in { min-height: 72px; gap: var(--ut-s5); }
.ut-ordbild { font-family: var(--ut-display); font-weight: 700; font-size: 1.75rem; color: var(--ut-gron); text-decoration: none; letter-spacing: -.01em; }
.ut-ordbild:hover { color: var(--ut-gron); text-decoration: none; }
.ut-nav { font-size: 1rem; font-weight: 500; }
.ut-nav .wp-block-navigation-item__content { color: var(--ut-text); padding: 10px 12px !important; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.ut-nav .wp-block-navigation-item__content:hover { color: var(--ut-gron); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.ut-nav [aria-current] { color: var(--ut-gron); text-decoration: underline; text-decoration-color: var(--ut-glod); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.ut-nav .wp-block-navigation__responsive-container-open, .ut-nav .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: var(--ut-text); }
.ut-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--ut-vit) !important; color: var(--ut-text) !important; padding: var(--ut-s4) var(--ut-s5) !important; }
.ut-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: var(--ut-s8); }
.ut-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.ut-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; gap: 0 !important; width: 100%; }
.ut-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; padding: 12px 0 !important; width: 100%; border-bottom: 1px solid var(--ut-linje); }
@media (min-width: 600px) and (max-width: 1023px) {
	.ut-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex !important; }
	.ut-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
	.ut-nav .wp-block-navigation__responsive-container.is-menu-open { display: flex !important; position: fixed; inset: 0; z-index: 100000; overflow: auto; }
	.ut-nav .wp-block-navigation__responsive-container-close { display: inline-flex !important; }
	.ut-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column !important; }
	.ut-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: flex; flex-direction: column; }
	.ut-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { max-width: 680px; margin: 0 auto; width: 100%; }
}

/* ---------- Startsidan ---------- */

.ut-intro { padding: var(--ut-s7) 0 var(--ut-s6); border-bottom: 1px solid var(--ut-linje); }
.ut-intro h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.12; margin: 0 0 var(--ut-s4); max-width: 22ch; }
.ut-intro-text { max-width: 62ch; font-size: 1.1875rem; margin: 0; color: var(--ut-text); }
.ut-del { margin-top: var(--ut-s7); }
.ut-home > .alignwide > .ut-del:last-child, .ut-more { margin-bottom: var(--ut-s8); }
.ut-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ut-s2) var(--ut-s5); margin: 0 0 var(--ut-s4); padding-bottom: var(--ut-s2); border-bottom: 1px solid var(--ut-linje); }
.ut-sec-title { font-size: 1.625rem; margin: 0; }
.ut-sec-more { font-weight: 600; }
.ut-vinnarcell { display: flex; align-items: center; gap: var(--ut-s3); }
.ut-vinnarcell .ut-stampel { width: 56px; flex: none; }
.ut-listor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ut-s6) var(--ut-s5); }
.ut-lista-bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ut-yta); margin-bottom: var(--ut-s3); }
.ut-lista-bild img { width: 100%; height: 100%; object-fit: cover; }
.ut-lista-titel { font-size: 1.25rem; margin: 0 0 var(--ut-s2); }
.ut-lista-titel a { color: var(--ut-gron); text-decoration: none; }
.ut-lista-titel a:hover { text-decoration: underline; }
.ut-lista-ingress { margin: 0 0 var(--ut-s2); font-size: 1rem; color: var(--ut-text-2); }
.ut-lista-vinnare { margin: 0; font-size: 1rem; }
.ut-katlista, .ut-guidelista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ut-s6); }
.ut-katlista li, .ut-guidelista li { padding: var(--ut-s3) 0; border-bottom: 1px solid var(--ut-linje); display: grid; gap: var(--ut-s1); }
.ut-katlista a, .ut-guidelista a { font-weight: 600; font-size: 1.125rem; }
.ut-katlista span, .ut-guidelista span { color: var(--ut-text-2); font-size: 1rem; }
.ut-poster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ut-s6) var(--ut-s5); }
.ut-post-bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ut-yta); margin-bottom: var(--ut-s3); }
.ut-post-bild img { width: 100%; height: 100%; object-fit: cover; }
.ut-post-titel { font-size: 1.1875rem; line-height: 1.25; margin: 0 0 var(--ut-s2); }
.ut-post-titel a { color: var(--ut-gron); text-decoration: none; }
.ut-post-titel a:hover { text-decoration: underline; }
.ut-post-ingress { margin: 0; font-size: 1rem; color: var(--ut-text-2); }
.ut-metod-text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ut-s5); }
.ut-metod-text p { margin: 0; font-size: 1rem; }
.ut-metod-text p:last-child { grid-column: 1 / -1; }
.ut-metod .ut-sec-title { margin-bottom: var(--ut-s4); padding-bottom: var(--ut-s2); border-bottom: 1px solid var(--ut-linje); }

/* ---------- Artikel och sida ---------- */

.ut-article { margin-top: var(--ut-s7) !important; }
.ut-article-head { max-width: 760px; }
.ut-overlank { margin: 0 0 var(--ut-s2); font-weight: 600; }
.ut-article-title { font-size: clamp(2rem, 4vw, 2.75rem) !important; line-height: 1.12 !important; margin: 0 0 var(--ut-s4); }
.ut-dek { font-size: 1.1875rem; line-height: 1.55; color: var(--ut-text-2); max-width: 62ch; margin: 0 0 var(--ut-s4); }
.ut-dek p { margin: 0; }
.ut-byline { margin: 0; font-size: .9375rem; color: var(--ut-text-2); }
.ut-byline strong { color: var(--ut-text); }
.ut-hero-img { margin: var(--ut-s6) 0 0 !important; }
.ut-hero-img img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.ut-read { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 280px); justify-content: space-between; gap: var(--ut-s6) var(--ut-s8); margin-top: var(--ut-s6) !important; }
.ut-read.is-sida { grid-template-columns: minmax(0, 680px); }
.ut-read.is-guide { grid-template-columns: minmax(0, 260px) minmax(0, 680px); justify-content: start; }
.ut-read-side { display: grid; align-content: start; gap: var(--ut-s5); }
.ut-body { font-size: var(--wp--preset--font-size--medium); line-height: 1.62; }
.ut-body > * { max-width: 68ch; }
.ut-body h2 { font-size: 1.625rem; margin: var(--ut-s7) 0 var(--ut-s3); scroll-margin-top: var(--ut-s5); }
.ut-body h3 { font-size: 1.25rem; margin: var(--ut-s6) 0 var(--ut-s2); }
.ut-body ul, .ut-body ol { padding-left: 1.3rem; }
.ut-body li { margin: var(--ut-s1) 0; }
.ut-body blockquote { border-left: 3px solid var(--ut-linje-2); margin: var(--ut-s5) 0; padding: 0 0 0 var(--ut-s4); }
.ut-body table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.ut-body th, .ut-body td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ut-linje); vertical-align: top; }
.ut-body thead th { border-bottom: 2px solid var(--ut-text); }
.ut-body .wp-block-table { overflow-x: auto; }
.ut-body .ut-fakta { background: var(--ut-yta); padding: var(--ut-s4) var(--ut-s5); margin: var(--ut-s5) 0; }
.ut-body .ut-fakta > :first-child { margin-top: 0; }
.ut-body .ut-fakta > :last-child { margin-bottom: 0; }
.ut-toc { border-top: 2px solid var(--ut-text); padding-top: var(--ut-s3); }
.ut-toc-h { font-weight: 600; margin: 0 0 var(--ut-s2); }
.ut-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--ut-s1); font-size: .9375rem; }
.ut-toc a { color: var(--ut-text); }
.ut-toc a:hover { color: var(--ut-gron); }
.ut-read.is-guide .ut-read-side { position: sticky; top: var(--ut-s5); align-self: start; }
.ut-sidoruta { border-top: 2px solid var(--ut-text); padding-top: var(--ut-s3); font-size: 1rem; }
.ut-sidoruta-h { font-size: 1.125rem; margin: 0 0 var(--ut-s2); }
.ut-sidoruta p { margin: 0 0 var(--ut-s2); }
.ut-author { margin-top: var(--ut-s7); padding-top: var(--ut-s4); border-top: 1px solid var(--ut-linje); max-width: 68ch; }
.ut-author-h { font-size: 1.125rem; margin: 0 0 var(--ut-s2); }
.ut-author p { margin: 0; font-size: 1rem; }

/* ---------- Arkiv och sök ---------- */

.ut-arch-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--ut-s6); align-items: end; padding: var(--ut-s7) 0 var(--ut-s5); margin: 0 0 var(--ut-s6); border-bottom: 1px solid var(--ut-linje); }
.ut-arch-head:not(:has(.ut-amne-topp)) { grid-template-columns: minmax(0, 1fr); }
.ut-arch-title { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.12; margin: 0 0 var(--ut-s3); }
.ut-arch-desc { max-width: 62ch; color: var(--ut-text-2); margin: 0; }
.ut-arch-count { margin: var(--ut-s3) 0 0; font-size: .9375rem; }
.ut-amne-topp ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ut-text); }
.ut-amne-topp li { padding: var(--ut-s2) 0; border-bottom: 1px solid var(--ut-linje); font-size: 1rem; }
.ut-amnesrad { margin: 0 0 var(--ut-s6); }
.ut-search-form > div { display: flex; gap: var(--ut-s2); max-width: 560px; }
.ut-search-form input { flex: 1; min-width: 0; min-height: 48px; padding: 8px 12px; font: inherit; font-size: 1rem; border: 1px solid var(--ut-linje-2); border-radius: 4px; background: var(--ut-vit); color: var(--ut-text); }
.ut-search-form input::placeholder { color: #66705F; }
.ut-search-form button { min-height: 48px; padding: 8px 18px; border: 0; border-radius: 4px; background: var(--ut-gron); color: var(--ut-vit); font: inherit; font-weight: 600; cursor: pointer; }
.ut-pages { margin: var(--ut-s6) 0 0; }
.ut-pages ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ut-s2); padding: 0; margin: 0; }
.ut-pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ut-linje-2); color: var(--ut-text); text-decoration: none; }
.ut-pages .page-numbers.current { background: var(--ut-gron); color: var(--ut-vit); border-color: var(--ut-gron); }
.ut-archive { padding-bottom: var(--ut-s8); }
.ut-rutnat, .ute-rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--ut-s5); list-style: none; padding: 0; }

/* ---------- Sidfot ---------- */

.ut-footer { background: var(--ut-yta); border-top: 1px solid var(--ut-linje); margin-top: 0; }
.ut-footer-in { padding-block: var(--ut-s7) var(--ut-s5); }
.ut-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--ut-s6); }
.ut-footer-namn { font-family: var(--ut-display); font-weight: 700; font-size: 1.375rem; color: var(--ut-gron); margin: 0 0 var(--ut-s2); }
.ut-footer-om p { font-size: .9375rem; max-width: 46ch; margin: 0 0 var(--ut-s3); }
.ut-footer-h { font-family: var(--ut-brod); font-size: 1rem; font-weight: 700; color: var(--ut-text); margin: 0 0 var(--ut-s2); }
.ut-footer-col ul { list-style: none; margin: 0; padding: 0; }
.ut-footer-col a { display: inline-block; padding: 4px 0; font-size: .9375rem; color: var(--ut-text); text-decoration: none; }
.ut-footer-col a:hover { color: var(--ut-gron); text-decoration: underline; }
.ut-footer-copy { margin: var(--ut-s6) 0 0; padding-top: var(--ut-s4); border-top: 1px solid var(--ut-linje); font-size: .875rem; color: var(--ut-text-2); }

/* ---------- Jämförelser, topplistor och kategorier ---------- */

main.ute-main { margin-top: 0 !important; padding-top: var(--ut-s6); padding-bottom: var(--ut-s8) !important; }
.ute-brodsmulor { font-size: .9375rem; margin: 0 0 var(--ut-s4); }
.ute-brodsmulor ol { display: flex; flex-wrap: wrap; gap: 0 var(--ut-s2); list-style: none; padding: 0; margin: 0; }
.ute-brodsmulor li + li::before { content: "/"; margin-right: var(--ut-s2); color: var(--ut-text-2); }
.ute-reklamupplysning { font-size: .875rem; color: var(--ut-text-2); background: none; border: 0; border-bottom: 1px solid var(--ut-linje); padding: 0 0 var(--ut-s2); margin: 0 0 var(--ut-s4); }

/* Betyget i text. */
.ute-betyg { margin: var(--ut-s1) 0 var(--ut-s2); line-height: 1.2; }
.ute-betyg__tal { font-family: var(--ut-display); font-weight: 700; font-size: 1.375rem; color: var(--ut-text); }
.ute-betyg__skala { color: var(--ut-text-2); }
.ute-betyg__etikett { display: block; font-size: .9375rem; font-weight: 600; color: var(--ut-text-2); margin-bottom: var(--ut-s1); }
.ute-betyg--stor .ute-betyg__tal { font-size: 2.75rem; line-height: 1; }
.ute-betyg--stor .ute-betyg__skala { font-size: 1.125rem; }

/* Produktkort. */
.ute-produktkort { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ut-s4); padding: var(--ut-s5) 0; border-top: 1px solid var(--ut-linje); }
.ute-produktkort.har-bild.is-bred { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
.ute-produktkort__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--ut-yta); }
.ute-produktkort__huvud { display: flex; justify-content: space-between; gap: var(--ut-s4); align-items: flex-start; }
.ute-produktkort__marke .ut-stampel { width: 64px; }
.ute-produktkort__namn { font-size: 1.25rem; line-height: 1.25; margin: 0; }
.ute-produktkort.is-bred .ute-produktkort__namn { font-size: 1.5rem; }
.ute-produktkort__namn a { color: var(--ut-gron); text-decoration: none; }
.ute-produktkort__namn a:hover { text-decoration: underline; }
.ute-produktkort__ingress { margin: var(--ut-s2) 0 var(--ut-s4); max-width: 68ch; }
.ute-produktkort__passar { margin: var(--ut-s3) 0; font-size: 1rem; }
.ute-produktkort__underlag { margin: var(--ut-s2) 0; font-size: .9375rem; color: var(--ut-text-2); }
.ute-produktkort__lankar { margin: var(--ut-s3) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ut-s2) var(--ut-s5); }
.ut-rutnat .ute-produktkort, .ute-rutnat .ute-produktkort { border-top: 2px solid var(--ut-text); padding-top: var(--ut-s4); }
.ut-forochemot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--ut-s3) var(--ut-s6); margin: var(--ut-s3) 0; }
.ut-forochemot h3, .ut-forochemot-h { font-family: var(--ut-brod); font-size: 1rem; font-weight: 700; color: var(--ut-text); margin: 0 0 var(--ut-s1); }
.ut-forochemot ul { margin: 0; padding-left: 1.2rem; font-size: 1rem; }
.ut-forochemot li { margin: 2px 0; }

/* Topplistan. */
.ute-lista__platser { list-style: none; margin: 0; padding: 0; counter-reset: plats; }
.ute-lista__plats { counter-increment: plats; position: relative; padding-left: 3.25rem; scroll-margin-top: var(--ut-s5); }
.ute-lista__plats::before { content: counter(plats) "."; position: absolute; left: 0; top: var(--ut-s5); font-family: var(--ut-display); font-weight: 700; font-size: 1.75rem; line-height: 1.2; color: var(--ut-text-2); }
.ute-lista__plats.is-vinnare::before { color: var(--ut-glod); }
.ute-underlag { font-size: 1rem; color: var(--ut-text-2); margin: 0 0 var(--ut-s5); max-width: 68ch; padding-left: var(--ut-s3); border-left: 3px solid var(--ut-glod); }
.ut-vartval { margin: var(--ut-s6) 0; padding: var(--ut-s5); background: var(--ut-yta); border-top: 3px solid var(--ut-gron); }
.ut-vartval-huvud { display: flex; justify-content: space-between; gap: var(--ut-s5); align-items: flex-start; }
.ut-vartval-titel { font-size: 1.75rem; margin: 0 0 var(--ut-s2); }
.ut-vartval-betyg { margin: 0; font-size: 1.125rem; color: var(--ut-text-2); }
.ut-vartval-betyg .ut-tal { font-family: var(--ut-display); font-weight: 700; font-size: 2rem; color: var(--ut-text); }
.ut-vartval-marke .ut-stampel { width: 112px; }
.ut-vartval-varfor { font-size: 1.125rem; max-width: 62ch; }
.ut-vartval .ut-tabell { margin: var(--ut-s3) 0; }

/* Guidesidan (topplistan). */
.ute-guide__titel, .ute-arkiv__titel { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.12; margin: 0 0 var(--ut-s3); max-width: 24ch; }
.ute-guide__meta { font-size: .9375rem; color: var(--ut-text-2); margin: 0 0 var(--ut-s3); }
.ute-guide__ingress, .ute-arkiv__ingress { font-size: 1.1875rem; line-height: 1.55; color: var(--ut-text-2); max-width: 62ch; margin: 0 0 var(--ut-s4); }
.ute-guide__bild { margin: 0 0 var(--ut-s5); }
.ute-guide__bild img, .ute-guide__img { width: 100%; object-fit: cover; }
.ute-sektion { margin: var(--ut-s7) 0 0; }
.ute-sektion > h2, .ute-sektion__rubrik, .ute-metodruta__rubrik { font-size: 1.625rem; margin: 0 0 var(--ut-s4); padding-bottom: var(--ut-s2); border-bottom: 1px solid var(--ut-linje); }
.ute-snabbval { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ut-text); }
.ute-snabbval__val { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; gap: var(--ut-s3); padding: 10px 0; border-bottom: 1px solid var(--ut-linje); align-items: baseline; }
.ute-snabbval__utmarkelse { font-weight: 600; }
.ute-snabbval__val--vinnare .ute-snabbval__utmarkelse { color: var(--ut-gron); }
.ute-snabbval__betyg { font-variant-numeric: tabular-nums; color: var(--ut-text-2); white-space: nowrap; }
.ute-tabellomrade { margin: 0; }
.ute-tabell { overflow-x: auto; }
.ute-tabell__tabell { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .9375rem; }
.ute-tabell__caption { text-align: left; font-weight: 600; padding-bottom: var(--ut-s2); }
.ute-tabell__tabell th, .ute-tabell__tabell td { padding: 10px 12px; border-bottom: 1px solid var(--ut-linje); text-align: left; vertical-align: top; }
.ute-tabell__tabell thead th { border-bottom: 2px solid var(--ut-text); font-weight: 600; }
.ute-tabell__tabell tbody th { font-weight: 600; color: var(--ut-text-2); }
.ute-tabell__tips { font-size: .875rem; color: var(--ut-text-2); }
.ute-prosa { font-size: var(--wp--preset--font-size--medium); line-height: 1.62; max-width: 68ch; }
.ute-prosa h2 { font-size: 1.625rem; margin: var(--ut-s7) 0 var(--ut-s3); }
.ute-prosa h3 { font-size: 1.25rem; margin: var(--ut-s5) 0 var(--ut-s2); }
.ute-metodruta { margin: var(--ut-s7) 0 0; padding: var(--ut-s5); background: var(--ut-yta); }
.ute-metodruta__typer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ut-s4) var(--ut-s6); }
.ute-metodruta__typ { background: none !important; padding: 0 !important; }
.ute-metodruta__namn { font-weight: 700; }
.ute-metodruta__beskrivning { margin: var(--ut-s1) 0 0; font-size: 1rem; }

/* Produktsidan. */
.ute-bedomning__huvud { max-width: 760px; }
.ute-bedomning__titel { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.12; margin: 0 0 var(--ut-s3); }
.ute-bedomning__meta { font-size: .9375rem; color: var(--ut-text-2); margin: 0 0 var(--ut-s4); }
.ute-bedomning__ingress { font-size: 1.1875rem; line-height: 1.55; color: var(--ut-text); max-width: 62ch; margin: 0 0 var(--ut-s5); }
.ute-bedomning__kropp { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 340px); grid-template-areas: "bild omdome" "text omdome"; justify-content: space-between; gap: 0 var(--ut-s8); }
.ute-bedomning__bild { grid-area: bild; margin: 0 0 var(--ut-s5); }
.ute-bedomning__kropp > .ut-omdome { grid-area: omdome; align-self: start; position: sticky; top: var(--ut-s5); }
.ute-bedomning__kropp > .ute-bedomning__text { grid-area: text; }
.ute-bedomning__text > section:first-child { margin-top: 0; }
.ute-bedomning__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--ut-yta); }
.ut-omdome { border-top: 3px solid var(--ut-gron); background: var(--ut-yta); padding: var(--ut-s5); }
.ut-omdome-huvud { display: flex; justify-content: space-between; gap: var(--ut-s4); align-items: flex-start; }
.ut-omdome-h { font-size: 1.25rem; margin: 0 0 var(--ut-s2); }
.ut-omdome-marke .ut-stampel { width: 112px; }
.ut-fakta { margin: var(--ut-s4) 0; border-top: 1px solid var(--ut-linje); }
.ut-fakta div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--ut-s3); padding: 8px 0; border-bottom: 1px solid var(--ut-linje); font-size: 1rem; }
.ut-fakta dt { color: var(--ut-text-2); }
.ut-fakta dd { margin: 0; }
.ut-omdome-underlag { font-size: .9375rem; color: var(--ut-text-2); margin: var(--ut-s3) 0; }
.ute-bedomning__text { max-width: 760px; }
.ute-bedomning__text > section { margin-top: var(--ut-s6); }
.ute-bedomning__text h2 { font-size: 1.625rem; margin: 0 0 var(--ut-s3); }
.ute-bedomning__prosa { margin-top: var(--ut-s6); font-size: var(--wp--preset--font-size--medium); line-height: 1.62; max-width: 68ch; }
.ute-bedomning__prosa h2 { margin: var(--ut-s6) 0 var(--ut-s3); }
.ut-kallor { padding-left: 1.4rem; font-size: 1rem; }
.ut-kallor li { margin: var(--ut-s1) 0; overflow-wrap: anywhere; }

/* Kategori- och arkivsidor från tillägget. */
.ute-arkiv__huvud { padding-bottom: var(--ut-s4); margin-bottom: var(--ut-s5); border-bottom: 1px solid var(--ut-linje); }
.ute-arkiv__intro { max-width: 68ch; }
.ute-arkiv__sortering, .ute-arkiv__tomt { color: var(--ut-text-2); font-size: .9375rem; }
.ute-kategorinav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ut-s2) var(--ut-s5); padding: 0; margin: 0 0 var(--ut-s5); }
.ute-kategorinav a { font-weight: 600; }
.ute-kategorinav [aria-current] { color: var(--ut-text); text-decoration: none; }
.ute-guidekort { border-top: 2px solid var(--ut-text); padding-top: var(--ut-s3); }
.ute-guidekort__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ute-guidekort__innehall { padding: var(--ut-s2) 0 0 !important; }
.ute-guidekort__lank { color: var(--ut-gron); text-decoration: none; font-family: var(--ut-display); font-weight: 700; font-size: 1.25rem; }
.ute-guidekort__lank:hover { text-decoration: underline; }
.ute-guidekort__meta, .ute-guidekort__utdrag { font-size: 1rem; color: var(--ut-text-2); }
.ute-kriterier { margin-top: var(--ut-s6); }
.ute-markning { font-size: .875rem; font-weight: 600; border-radius: 2px; }
.ute-paginering a, .ute-paginering span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Sidan om märket för vinnare. */
.ut-stampel-stor { margin: var(--ut-s5) 0; display: grid; justify-items: start; gap: var(--ut-s2); }
.ut-stampel-stor .ut-stampel { width: min(280px, 100%); }
.ut-stampel-stor figcaption { font-size: .9375rem; color: var(--ut-text-2); }
.ut-stampel-filer { padding-left: 1.3rem; }
.ut-stampel-filer li { margin: var(--ut-s2) 0; }
.ut-stampel-filer a { font-weight: 600; }

/* ---------- Mindre skärmar ---------- */

@media (max-width: 1023px) {
	.ut-read, .ut-read.is-guide { grid-template-columns: minmax(0, 1fr); }
	.ut-read.is-guide .ut-read-side { position: static; order: -1; }
	.ut-footer-grid { grid-template-columns: 1fr 1fr; }
	.ut-listor, .ut-poster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ut-arch-head { grid-template-columns: minmax(0, 1fr) !important; }
	.ute-bedomning__kropp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bild" "omdome" "text"; }
	.ute-bedomning__kropp > .ut-omdome { position: static; margin-bottom: var(--ut-s6); }
}
@media (max-width: 700px) {
	.ut-ordbild { font-size: 1.5rem; }
	.ut-listor, .ut-poster, .ut-katlista, .ut-guidelista, .ut-metod-text, .ute-metodruta__typer, .ut-footer-grid { grid-template-columns: minmax(0, 1fr); }
	.ut-intro { padding-top: var(--ut-s6); }
	.ute-produktkort.har-bild.is-bred { grid-template-columns: minmax(0, 1fr); }
	.ute-lista__plats { padding-left: 2.25rem; }
	.ute-lista__plats::before { font-size: 1.375rem; }
	.ute-snabbval__val { grid-template-columns: minmax(0, 1fr) auto; }
	.ute-snabbval__utmarkelse { grid-column: 1 / -1; }
	.ut-vartval { padding: var(--ut-s4); }
	.ut-vartval-huvud, .ut-omdome-huvud { flex-direction: column; }
	.ut-vartval-marke .ut-stampel, .ut-omdome-marke .ut-stampel { width: 96px; }
	.ut-fakta div { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.ut-vinnarcell .ut-stampel { width: 40px; }
	.ut-vinnartabell-dold { display: none; }
	.ute-guidekort__innehall { padding-left: 0; padding-right: 0; }
	.ut-tabell { font-size: .9375rem; }
}

/* Brödtextens vikt: föräldratemat sätter 300, som är för tunt för läsning. */
body, p, li, dd, dt, td, figcaption, blockquote, .wp-block-post-excerpt__excerpt { font-weight: 400; }