/*
Theme Name: Testtoppen
Theme URI: https://testtoppen.se/
Description: Barntema till Twenty Twenty-Five för Testtoppen. En lugn köpguide: steg, checklista och vinnare. Readex Pro för rubriker, Reddit Sans för text, en accentfärg och hårlinjer.
Author: Testtoppen
Template: twentytwentyfive
Version: 3.0.0
Text Domain: tp-toppen
*/

/* ==========================================================================
   Grund
   Mellanrumsskala: 4, 8, 12, 16, 24, 32, 48, 64, 96 px.
   Rutnät: högst 1200 px, textkolumn 680 px.
   ========================================================================== */

:root {
	--tp-text: #1A1D24;
	--tp-dim: #4E5562;
	--tp-accent: #1B33B8;
	--tp-accent-hover: #13268C;
	--tp-yta: #F4F6FA;
	--tp-linje: #DDE1E8;
	--tp-rubrik: var(--wp--preset--font-family--display);
	--tp-s1: 4px; --tp-s2: 8px; --tp-s3: 12px; --tp-s4: 16px; --tp-s5: 24px; --tp-s6: 32px; --tp-s7: 48px; --tp-s8: 64px; --tp-s9: 96px;
	--tp-textbredd: 680px;
}

body { background: #FFFFFF; color: var(--tp-text); font-size: var(--wp--preset--font-size--medium); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--tp-rubrik); font-weight: 600; color: var(--tp-text); line-height: 1.2; letter-spacing: -.005em; }
h2 { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 var(--tp-s4); }
h3 { font-size: var(--wp--preset--font-size--large); }
p, li, dd { line-height: 1.6; }
a { color: var(--tp-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--tp-accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
::selection { background: #D9DEF7; }
.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; }
.skip-link.screen-reader-text:focus { clip: auto; width: auto; height: auto; margin: 0; padding: var(--tp-s3) var(--tp-s4); background: #fff; color: var(--tp-text); z-index: 100000; top: var(--tp-s2); left: var(--tp-s2); outline: 2px solid var(--tp-accent); }
img { max-width: 100%; height: auto; }
table, .tp-btg, .tp-tabell td, .tp-tabell th { font-variant-numeric: tabular-nums; }

.tp-h1, .tp-article-title { font-family: var(--tp-rubrik); font-size: var(--wp--preset--font-size--xx-large) !important; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 var(--tp-s4); max-width: 22em; text-wrap: balance; }
.tp-h2 { font-size: var(--wp--preset--font-size--x-large); margin: 0; }
.tp-ingress, .tp-dek { font-size: 1.1875rem; line-height: 1.55; color: var(--tp-text); max-width: var(--tp-textbredd); margin: 0 0 var(--tp-s4); }
.tp-dek p { margin: 0; }
.tp-dim { color: var(--tp-dim); font-size: .9375rem; }
.tp-byline { color: var(--tp-dim); font-size: .9375rem; margin: 0 0 var(--tp-s3); }
.tp-kicker { margin: 0 0 var(--tp-s3); font-size: .9375rem; color: var(--tp-dim); }
.tp-kicker a { color: var(--tp-dim); }

/* ==========================================================================
   Sidhuvud
   ========================================================================== */

.tp-header { background: #fff; border-bottom: 1px solid var(--tp-linje); }
.tp-header-in { padding-top: var(--tp-s4); padding-bottom: var(--tp-s4); align-items: center; gap: var(--tp-s5); }
.tp-brand { font-family: var(--tp-rubrik); font-weight: 700; font-size: 1.625rem; letter-spacing: -.015em; color: var(--tp-text); text-decoration: none; white-space: nowrap; }
.tp-brand:hover { color: var(--tp-accent); text-decoration: none; }
.tp-nav .wp-block-navigation-item__content { color: var(--tp-text); text-decoration: none; padding: var(--tp-s2) var(--tp-s3); min-height: 44px; display: inline-flex; align-items: center; }
.tp-nav .wp-block-navigation-item__content:hover { color: var(--tp-accent); text-decoration: underline; text-underline-offset: .3em; }
.tp-nav [aria-current] { color: var(--tp-accent) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.tp-nav .wp-block-navigation__responsive-container.is-menu-open { background: #fff; color: var(--tp-text); padding: var(--tp-s6) var(--tp-s5); }
.tp-nav .wp-block-navigation__responsive-container-open, .tp-nav .wp-block-navigation__responsive-container-close { color: var(--tp-text); min-width: 44px; min-height: 44px; }

.tp-strip { background: var(--tp-yta); border-bottom: 1px solid var(--tp-linje); }
.tp-strip-in { max-width: 1200px; margin: 0 auto; padding: var(--tp-s2) clamp(1rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--tp-s2); font-size: .9375rem; }
.tp-strip-l { color: var(--tp-dim); }
.tp-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--tp-s1); }
.tp-strip a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--tp-s2); color: var(--tp-text); text-decoration: none; }
.tp-strip a:hover { color: var(--tp-accent); text-decoration: underline; }
.tp-strip a[aria-current] { color: var(--tp-accent); text-decoration: underline; text-decoration-thickness: 2px; }

/* ==========================================================================
   Sektioner
   ========================================================================== */

main { padding-bottom: var(--tp-s8); }
.tp-section { padding-top: var(--tp-s7); }
.tp-section.is-forst { padding-top: var(--tp-s7); }
.tp-section + .tp-section { border-top: 1px solid var(--tp-linje); margin-top: var(--tp-s7); }
.tp-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tp-s2) var(--tp-s5); margin: 0 0 var(--tp-s5); }
.tp-sec-link { margin: 0; font-size: .9375rem; }
.tp-sec-lede { color: var(--tp-dim); margin: calc(-1 * var(--tp-s3)) 0 var(--tp-s5); max-width: var(--tp-textbredd); }
.tp-tva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tp-s7); }
.tp-tva > .tp-tva-del { margin: 0 !important; }
.tp-del { margin: var(--tp-s7) 0 0; }
.tp-del > h2 { margin: 0 0 var(--tp-s4); }

/* ==========================================================================
   Startsidan och köpguiderna
   ========================================================================== */

.tp-start { max-width: 760px; margin: 0 0 var(--tp-s6); }
.tp-kgl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 var(--tp-s6); border-top: 1px solid var(--tp-linje); }
.tp-kg { padding: var(--tp-s5) 0; border-bottom: 1px solid var(--tp-linje); }
.tp-kg-t { font-size: 1.25rem; margin: 0 0 var(--tp-s1); }
.tp-kg-t a { color: var(--tp-text); text-decoration: none; }
.tp-kg-t a:hover { color: var(--tp-accent); text-decoration: underline; }
.tp-kg-omr { margin: 0 0 var(--tp-s3); color: var(--tp-dim); font-size: .9375rem; }
.tp-kg-vin { margin: var(--tp-s3) 0 0; font-size: 1rem; }
.tp-steg { margin: 0; padding-left: 1.4em; display: grid; gap: var(--tp-s1); }
.tp-steg li::marker { color: var(--tp-dim); font-variant-numeric: tabular-nums; }

.tp-check { padding: var(--tp-s5); background: var(--tp-yta); border-radius: 4px; }
.tp-check-t { font-size: 1.125rem; margin: 0 0 var(--tp-s3); }
.tp-check-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tp-s2); }
.tp-check-lista li { position: relative; padding-left: 1.9em; }
.tp-check-lista li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1em; height: 1em; border: 1.5px solid var(--tp-dim); border-radius: 2px; background: #fff; }

.tp-cl-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 var(--tp-s6); border-top: 1px solid var(--tp-linje); }
.tp-cl { border-bottom: 1px solid var(--tp-linje); }
.tp-cl summary { cursor: pointer; padding: var(--tp-s4) var(--tp-s6) var(--tp-s4) 0; position: relative; font-weight: 600; min-height: 48px; list-style: none; }
.tp-cl summary::-webkit-details-marker { display: none; }
.tp-cl summary::after { content: "+"; position: absolute; right: var(--tp-s2); top: 50%; transform: translateY(-50%); color: var(--tp-dim); font-size: 1.25rem; }
.tp-cl[open] summary::after { content: "−"; }
.tp-cl .tp-check-lista { padding: 0 0 var(--tp-s3); }
.tp-cl-mer { margin: 0 0 var(--tp-s4); font-size: .9375rem; }

.tp-sj { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tp-s5) var(--tp-s6); }
.tp-sj p { margin: 0; }
.tp-sj p:last-child { grid-column: 1 / -1; }

.tp-register { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: var(--tp-s5); }
.tp-register-t { font-size: 1.0625rem; margin: 0 0 var(--tp-s2); }
.tp-register-t a { color: var(--tp-text); text-decoration: none; }
.tp-register-t a:hover { color: var(--tp-accent); text-decoration: underline; }
.tp-register ul, .tp-enkel { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tp-s1); }
.tp-enkel li { padding: var(--tp-s2) 0; border-bottom: 1px solid var(--tp-linje); }

/* Artikelrader */
.tp-rader { display: grid; border-top: 1px solid var(--tp-linje); }
.tp-rader.is-tre { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 var(--tp-s6); }
.tp-rad { display: flex; gap: var(--tp-s5); padding: var(--tp-s5) 0; border-bottom: 1px solid var(--tp-linje); }
.tp-rad-bild { flex: 0 0 200px; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--tp-yta); }
.tp-rad-bild img { width: 100%; height: 100%; object-fit: cover; }
.tp-rad-text > * { margin: 0; }
.tp-rad-kat { font-size: .875rem; color: var(--tp-dim); margin-bottom: var(--tp-s1) !important; }
.tp-rad-t { font-size: 1.1875rem; line-height: 1.3; margin-bottom: var(--tp-s2) !important; }
.tp-rad-t a { color: var(--tp-text); text-decoration: none; }
.tp-rad-t a:hover { color: var(--tp-accent); text-decoration: underline; }
.tp-rad-ex { color: var(--tp-text); font-size: 1rem; }
.tp-rad-datum, .tp-rad-betyg { font-size: .875rem; color: var(--tp-dim); margin-top: var(--tp-s2) !important; }
.tp-guidelista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 var(--tp-s6); border-top: 1px solid var(--tp-linje); }
.tp-guidelista li { padding: var(--tp-s5) 0; border-bottom: 1px solid var(--tp-linje); }
.tp-guidelista li > * { margin: 0 0 var(--tp-s1); }

/* ==========================================================================
   Tabeller
   ========================================================================== */

.tp-tabomr { overflow-x: auto; margin: 0 0 var(--tp-s5); }
.tp-tabomr:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
.tp-tabell { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tp-tabell caption { text-align: left; font-family: var(--tp-rubrik); font-weight: 600; font-size: 1.0625rem; padding: 0 0 var(--tp-s2); }
.tp-tabell th, .tp-tabell td { text-align: left; vertical-align: top; padding: var(--tp-s3) var(--tp-s4) var(--tp-s3) 0; border-bottom: 1px solid var(--tp-linje); }
.tp-tabell thead th { font-weight: 600; font-size: .9375rem; color: var(--tp-dim); border-bottom: 1px solid var(--tp-text); white-space: nowrap; }
.tp-tabell tbody th { font-weight: 600; }
.tp-tabell .is-tal { text-align: right; white-space: nowrap; }
.tp-tabell a { color: var(--tp-text); }
.tp-tabell a:hover { color: var(--tp-accent); }
.tp-tabell.is-smal { max-width: var(--tp-textbredd); }
.tp-tabell.is-jamfor { min-width: 760px; font-size: .9375rem; }
.tp-tabell.is-jamfor tbody tr:nth-child(even) { background: var(--tp-yta); }
.tp-tabell.is-jamfor th, .tp-tabell.is-jamfor td { padding-left: var(--tp-s2); }
.tp-tabell.is-delbetyg { max-width: 820px; }
.tp-db-c { display: block; font-weight: 400; color: var(--tp-dim); font-size: .9375rem; margin-top: var(--tp-s1); }
.tp-vt-vin { display: inline-flex; align-items: center; gap: var(--tp-s3); }

/* ==========================================================================
   Betyg, märken och toppmärket
   ========================================================================== */

.tp-btg { margin: 0; }
.tp-btg strong { font-weight: 700; }
.tp-btg.is-stor { font-size: 1.25rem; }
.tp-btg.is-stor strong { font-family: var(--tp-rubrik); font-size: 2rem; font-weight: 600; }
.tp-btg-l { color: var(--tp-dim); }
.tp-utm, .tp-pk-utm { display: inline-block; font-size: .875rem; font-weight: 600; color: var(--tp-accent); }
.tp-stampel { display: block; flex: none; height: auto; max-width: 100%; }
.tp-stampel.is-rad { width: 56px; }
.tp-stampel.is-kort { width: 64px; }
.tp-stampel.is-produkt { width: clamp(96px, 26vw, 120px); }
.tp-stampel.is-lista { width: clamp(80px, 24vw, 112px); }
.tp-stampel.is-omrade { width: 80px; float: right; margin: 0 0 var(--tp-s3) var(--tp-s4); }
.tp-om-vin > a:first-child { float: right; margin: 0 0 var(--tp-s3) var(--tp-s4); }
.tp-om-vin > a:first-child .tp-stampel { float: none; margin: 0; }

/* ==========================================================================
   Artikel och sidor
   ========================================================================== */

.tp-article { padding-top: var(--tp-s7); }
.tp-article-head { max-width: 820px; margin: 0 0 var(--tp-s6); }
.tp-figure { margin: 0 0 var(--tp-s6); }
.tp-figure img, .tp-hero-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; }
.tp-figure:empty, .tp-figure:not(:has(img)) { display: none; }
.tp-read { display: grid; grid-template-columns: 220px minmax(0, var(--tp-textbredd)); gap: var(--tp-s7); align-items: start; }
.tp-rail { position: sticky; top: var(--tp-s5); }
.tp-toc { font-size: .9375rem; border-top: 1px solid var(--tp-linje); padding-top: var(--tp-s3); }
.tp-toc-t { font-weight: 600; margin: 0 0 var(--tp-s2); }
.tp-toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: var(--tp-s2); }
.tp-toc a { color: var(--tp-text); text-decoration: none; }
.tp-toc a:hover { color: var(--tp-accent); text-decoration: underline; }
.tp-wide-body { max-width: 1200px; }

.tp-body > * { max-width: var(--tp-textbredd); }
.tp-body > .wp-block-table, .tp-body > figure.wp-block-table { max-width: 820px; }
.tp-body h2 { font-size: var(--wp--preset--font-size--x-large); margin: var(--tp-s7) 0 var(--tp-s3); scroll-margin-top: var(--tp-s5); }
.tp-body h3 { font-size: var(--wp--preset--font-size--large); margin: var(--tp-s6) 0 var(--tp-s2); }
.tp-body p, .tp-body ul, .tp-body ol { margin: 0 0 var(--tp-s4); }
.tp-body li { margin-bottom: var(--tp-s2); }
.tp-body.is-under > *:first-child, .tp-body.is-under > h2:first-child { margin-top: 0; }
.tp-body .wp-block-table { margin: var(--tp-s5) 0; overflow-x: auto; }
.tp-body table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.tp-body th, .tp-body td { text-align: left; padding: var(--tp-s3) var(--tp-s4) var(--tp-s3) 0; border-bottom: 1px solid var(--tp-linje); vertical-align: top; }
.tp-body thead th { border-bottom: 1px solid var(--tp-text); font-weight: 600; color: var(--tp-dim); font-size: .9375rem; }
.tp-body .wp-block-table table.has-fixed-layout { table-layout: auto; }
.tp-faktaruta, .tp-varning { background: var(--tp-yta); padding: var(--tp-s5); border-radius: 4px; margin: var(--tp-s5) 0; }
.tp-varning { background: #FFF6E5; }
.tp-faktaruta > :last-child, .tp-varning > :last-child { margin-bottom: 0; }
.tp-faktaruta-t { font-weight: 600; margin: 0 0 var(--tp-s2) !important; }
.tp-faktaruta ul, .tp-varning ul { padding-left: 1.2em; }
.tp-ansvar, .tp-author { max-width: var(--tp-textbredd); font-size: .9375rem; color: var(--tp-dim); border-top: 1px solid var(--tp-linje); padding-top: var(--tp-s4); margin: var(--tp-s6) 0 0; }
.tp-author { margin-top: var(--tp-s4); }
.tp-more { margin-top: var(--tp-s7); }
.tp-more .tp-h2 { margin: 0 0 var(--tp-s4); }

/* ==========================================================================
   Köpguidesidan
   ========================================================================== */

.tp-gt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tp-s5); max-width: 1000px; margin: 0 0 var(--tp-s5); }
.tp-gt-steg { padding: var(--tp-s5); border: 1px solid var(--tp-linje); border-radius: 4px; }
.tp-gt-steg p { margin: var(--tp-s3) 0 0; }
.tp-gt-hopp { margin: 0 0 var(--tp-s6); font-weight: 600; }
.tp-gv { margin: var(--tp-s7) 0 0; padding-top: var(--tp-s5); border-top: 1px solid var(--tp-linje); max-width: var(--tp-textbredd); }
.tp-gv-lt { font-size: 1.125rem; margin: var(--tp-s4) 0 var(--tp-s2); }
.tp-gv-ol { margin: 0; padding-left: 1.4em; display: grid; gap: var(--tp-s2); }
.tp-gv-u { color: var(--tp-dim); }

/* ==========================================================================
   Brödsmulor, sidhuvud på jämförelsesidor
   ========================================================================== */

.tp-sm ol { list-style: none; margin: 0 0 var(--tp-s5); padding: 0; display: flex; flex-wrap: wrap; font-size: .9375rem; color: var(--tp-dim); }
.tp-sm li + li::before { content: "/"; margin: 0 var(--tp-s2); color: var(--tp-linje); }
.tp-sm a { color: var(--tp-dim); }
.tp-sidhuvud { max-width: 820px; margin: 0 0 var(--tp-s6); }
.tp-underlag { font-size: 1rem; color: var(--tp-text); background: var(--tp-yta); padding: var(--tp-s3) var(--tp-s4); border-radius: 4px; max-width: var(--tp-textbredd); margin: 0 0 var(--tp-s3); }
.tp-om, .tp-pr, .tp-tl { padding-top: var(--tp-s7); }
.tp-om-kg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tp-s5); max-width: 1000px; }
.tp-om-kg > div:first-child { padding: var(--tp-s5); border: 1px solid var(--tp-linje); border-radius: 4px; }
.tp-om-kg h2 { font-size: 1.25rem; }
.tp-om-vin { max-width: 820px; padding-top: var(--tp-s5); border-top: 1px solid var(--tp-linje); }
.tp-om-vin::after { content: ""; display: block; clear: both; }
.tp-om-vin h2 { font-size: 1.375rem; }
.tp-alla-k { font-size: 1.125rem; margin: var(--tp-s5) 0 var(--tp-s2); }
.tp-alla-k a, .tp-del > h2 a { color: var(--tp-text); text-decoration: none; }
.tp-alla-k a:hover, .tp-del > h2 a:hover { color: var(--tp-accent); text-decoration: underline; }

/* Produktrader på kategorisidan och arkivet */
.tp-prader { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tp-linje); max-width: 900px; }
.tp-prad { display: flex; align-items: center; gap: var(--tp-s4); padding: var(--tp-s4) 0; border-bottom: 1px solid var(--tp-linje); }
.tp-prader.is-tat .tp-prad { padding: var(--tp-s3) 0; }
.tp-prad-text { flex: 1; min-width: 0; }
.tp-prad-text > * { margin: 0; }
.tp-prad-t { font-size: 1.125rem; }
.tp-prad-t a, .tp-prad-text > a { color: var(--tp-text); }
.tp-prad-ex { color: var(--tp-dim); font-size: .9375rem; margin-top: var(--tp-s1) !important; }
.tp-prad-b { margin: 0; white-space: nowrap; }

/* ==========================================================================
   Produktsidan
   ========================================================================== */

.tp-pr-bild, .tp-tl-bild { margin: 0 0 var(--tp-s6); max-width: 1000px; }
.tp-pr-bild img, .tp-tl-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; background: var(--tp-yta); }
.tp-omdome { display: flex; gap: var(--tp-s6); align-items: flex-start; justify-content: space-between; max-width: 900px; padding: var(--tp-s5) var(--tp-s6); background: var(--tp-yta); border-radius: 4px; }
.tp-omdome-in { min-width: 0; }
.tp-omdome-in > * { margin: 0 0 var(--tp-s3); }
.tp-omdome-in > :last-child { margin-bottom: 0; }
.tp-omdome h2 { font-size: 1.25rem; }
.tp-omdome-betyg { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tp-s2) var(--tp-s4); }
.tp-omdome-stampel a { display: block; }
.tp-dl { margin: 0; display: grid; gap: var(--tp-s2); }
.tp-dl div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--tp-s4); }
.tp-dl dt { font-weight: 600; }
.tp-dl dd { margin: 0; }
.tp-knapp { display: inline-flex; align-items: center; min-height: 44px; padding: var(--tp-s2) var(--tp-s5); background: var(--tp-accent); color: #fff; text-decoration: none; border-radius: 4px; font-weight: 600; }
.tp-knapp:hover { background: var(--tp-accent-hover); color: #fff; text-decoration: none; }
.tp-pm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tp-s3) var(--tp-s6); max-width: 900px; }
.tp-pm-t { font-family: var(--tp-rubrik); font-size: 1.0625rem; font-weight: 600; margin: 0 0 var(--tp-s2); }
.tp-pm ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--tp-s1); }
.tp-ifg { max-width: var(--tp-textbredd); padding: var(--tp-s5); border: 1px solid var(--tp-linje); border-radius: 4px; }
.tp-ifg h2 { font-size: 1.25rem; }
.tp-ifg .tp-check-lista { margin: 0 0 var(--tp-s4); }
.tp-ifg p:last-child { margin: 0; }
.tp-kallor { margin: 0; padding-left: 1.4em; display: grid; gap: var(--tp-s2); max-width: var(--tp-textbredd); }
.tp-kallor a { overflow-wrap: anywhere; }
.tp-produkt-fot { list-style: none; margin: var(--tp-s6) 0 0; padding: var(--tp-s4) 0 0; border-top: 1px solid var(--tp-linje); max-width: var(--tp-textbredd); display: grid; gap: var(--tp-s1); color: var(--tp-dim); font-size: .9375rem; }

/* ==========================================================================
   Topplistan
   ========================================================================== */

.tp-vv { max-width: 900px; margin: var(--tp-s7) 0 0; padding: var(--tp-s6); border: 1px solid var(--tp-text); border-radius: 4px; }
.tp-vv-huvud { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--tp-s5); margin: 0 0 var(--tp-s3); }
.tp-vv h2 { font-size: 1rem; font-family: var(--wp--preset--font-family--text); font-weight: 600; color: var(--tp-accent); margin: 0 0 var(--tp-s1); scroll-margin-top: var(--tp-s5); }
.tp-vv-t { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 var(--tp-s2); }
.tp-vv-t a { color: var(--tp-text); text-decoration: none; }
.tp-vv-t a:hover { color: var(--tp-accent); text-decoration: underline; }
.tp-vv-betyg { margin: 0; }
.tp-vv-varfor { font-size: 1.125rem; max-width: var(--tp-textbredd); }
.tp-vv .tp-tabomr { margin: var(--tp-s4) 0; }
.tp-vv .tp-pm { margin: 0 0 var(--tp-s4); }

.tp-lista-ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tp-linje); max-width: 900px; }
.tp-lista-plats { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--tp-s4); padding: var(--tp-s5) 0; border-bottom: 1px solid var(--tp-linje); scroll-margin-top: var(--tp-s4); }
.tp-lista-nr { margin: 0; font-family: var(--tp-rubrik); font-weight: 600; font-size: 1.75rem; line-height: 1; color: var(--tp-dim); font-variant-numeric: tabular-nums; }
.tp-lista-plats.is-vinnare .tp-lista-nr { color: var(--tp-accent); }

/* Produktkortet (används i listor och på kategorisidor) */
.tp-pk { display: flex; gap: var(--tp-s5); }
.tp-pk-bild { flex: 0 0 220px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--tp-yta); }
.tp-pk-bild img { width: 100%; height: 100%; object-fit: contain; }
.tp-pk-in { min-width: 0; flex: 1; }
.tp-pk-in > * { margin: 0 0 var(--tp-s3); }
.tp-pk-in > :last-child { margin-bottom: 0; }
.tp-pk-huvud { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--tp-s4); }
.tp-pk-huvud > div > * { margin: 0 0 var(--tp-s1); }
.tp-pk-t { font-size: 1.25rem; }
.tp-pk-t a { color: var(--tp-text); text-decoration: none; }
.tp-pk-t a:hover { color: var(--tp-accent); text-decoration: underline; }
.tp-pk .tp-pm { font-size: 1rem; }
.tp-pk-akt { font-size: 1rem; }

/* ==========================================================================
   Toppmärket, sidan för butiker
   ========================================================================== */

.tp-tm-stor { display: flex; align-items: center; gap: var(--tp-s6); margin: 0 0 var(--tp-s6); max-width: var(--tp-textbredd); }
.tp-tm-stor .tp-stampel { width: 200px; }
.tp-tm-stor figcaption { color: var(--tp-dim); }
.tp-tm-ladda { list-style: none; margin: 0 0 var(--tp-s4) !important; padding: 0; border-top: 1px solid var(--tp-linje); }
.tp-tm-ladda li { margin: 0 !important; border-bottom: 1px solid var(--tp-linje); }
.tp-tm-ladda a { display: flex; align-items: center; min-height: 48px; padding: var(--tp-s2) 0; }

/* ==========================================================================
   Arkiv, sök, sidnumrering
   ========================================================================== */

.tp-arch-wrap { padding-top: var(--tp-s7); }
.tp-arch-head { max-width: 820px; margin: 0 0 var(--tp-s6); }
.tp-arch-desc, .tp-arch-count { color: var(--tp-dim); max-width: var(--tp-textbredd); }
.tp-sok { max-width: 560px; margin: var(--tp-s4) 0; }
.tp-sok label { display: block; font-weight: 600; margin: 0 0 var(--tp-s2); }
.tp-sok-rad { display: flex; gap: var(--tp-s2); }
.tp-sok input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--tp-s3); font: inherit; border: 1px solid var(--tp-dim); border-radius: 4px; background: #fff; color: var(--tp-text); }
.tp-sok button { min-height: 48px; padding: 0 var(--tp-s5); font: inherit; font-weight: 600; border: 0; border-radius: 4px; background: var(--tp-accent); color: #fff; cursor: pointer; }
.tp-sok button:hover { background: var(--tp-accent-hover); }
.tp-pages ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--tp-s2); padding: 0; margin: var(--tp-s6) 0 0; }
.tp-pages a, .tp-pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--tp-s3); border: 1px solid var(--tp-linje); border-radius: 4px; text-decoration: none; }
.tp-pages .current { background: var(--tp-text); color: #fff; border-color: var(--tp-text); }
.tp-amne + .tp-amne { margin-top: var(--tp-s7); }
.tp-amne .tp-h2 { margin: 0 0 var(--tp-s4); }

/* Tilläggets reklamupplysning: en lugn rad */
.tt-reklamupplysning { font-size: .875rem; color: var(--tp-dim); border-bottom: 1px solid var(--tp-linje); padding: var(--tp-s2) 0; margin: 0 0 var(--tp-s4); }
.tt-reklamupplysning p { margin: 0; }

/* ==========================================================================
   Sidfot
   ========================================================================== */

.tp-footer { background: var(--tp-yta); border-top: 1px solid var(--tp-linje); }
.tp-footer-in { padding-top: var(--tp-s7); padding-bottom: var(--tp-s6); font-size: .9375rem; }
.tp-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--tp-s6); }
.tp-footer-brand { font-family: var(--tp-rubrik); font-weight: 700; font-size: 1.375rem; margin: 0 0 var(--tp-s3); }
.tp-footer-about p { margin: 0 0 var(--tp-s3); color: var(--tp-text); }
.tp-footer-t { font-family: var(--wp--preset--font-family--text); font-size: .9375rem; font-weight: 600; margin: 0 0 var(--tp-s3); }
.tp-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tp-s1); }
.tp-footer a { color: var(--tp-text); }
.tp-footer a:hover { color: var(--tp-accent); }
.tp-footer-not { margin: var(--tp-s6) 0 var(--tp-s3); padding-top: var(--tp-s4); border-top: 1px solid var(--tp-linje); color: var(--tp-dim); max-width: 820px; }
.tp-footer-copy { margin: 0; color: var(--tp-dim); }

/* ==========================================================================
   Mobil
   ========================================================================== */

@media (max-width: 900px) {
	.tp-read { grid-template-columns: 1fr; gap: var(--tp-s4); }
	.tp-rail { position: static; }
	.tp-rail[aria-hidden] { display: none; }
	.tp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tp-footer-about { grid-column: 1 / -1; }
	.tp-tva { grid-template-columns: 1fr; gap: 0; }
	.tp-tva > .tp-tva-del + .tp-tva-del { margin-top: var(--tp-s7) !important; }
	.tp-sj { grid-template-columns: 1fr; }
}
@media (max-width: 781px) {
	.tp-strip-in { flex-wrap: nowrap; padding-top: var(--tp-s1); padding-bottom: var(--tp-s1); }
	.tp-strip-l { flex: none; }
	.tp-strip ul { flex-wrap: nowrap; overflow-x: auto; min-width: 0; }
	.tp-strip li { flex: none; }
	.tp-gt, .tp-om-kg, .tp-pm { grid-template-columns: 1fr; }
	.tp-omdome { flex-direction: column-reverse; padding: var(--tp-s5); gap: var(--tp-s4); }
	.tp-dl div { grid-template-columns: 1fr; gap: 0; }
	.tp-vv { padding: var(--tp-s5); }
	.tp-pk { flex-direction: column; }
	.tp-pk-bild { flex: none; width: 100%; }
	.tp-rad-bild { flex-basis: 96px; }
	.tp-lista-plats { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--tp-s3); }
	.tp-lista-nr { font-size: 1.375rem; }
	.tp-prad { flex-wrap: wrap; }
	.tp-prad-text { flex-basis: 100%; }
	.tp-tm-stor { flex-direction: column; align-items: flex-start; }
	.tp-tm-stor .tp-stampel { width: 160px; }
}
@media (max-width: 480px) {
	.tp-footer-grid { grid-template-columns: 1fr; }
	.tp-rad { flex-direction: column; gap: var(--tp-s3); }
	.tp-rad-bild { flex: none; width: 100%; }
	.tp-vt-vin { gap: var(--tp-s2); }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.tp-pm ul { list-style: disc; }
.tp-body.is-under h2 { font-size: 1.3125rem; margin-top: var(--tp-s6); }
.tp-body.is-under h3 { font-size: 1.125rem; }
.tp-tabell td .tp-vt-vin, .tp-tabell td { vertical-align: middle; }
.tp-tabell th[scope="row"] { vertical-align: middle; }
.tp-tabell.is-delbetyg th[scope="row"], .tp-tabell.is-delbetyg td { vertical-align: top; }

/* 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; }