/* ==========================================================================
   Kakle – kategoriside (PLP) og produktside (PDP)
   Bygger paa tokens og komponenter i style.css. Lastes etter den.
   ========================================================================== */

/* ---------- 1. Felles sidetopp ------------------------------------------- */
.smule {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2);
    list-style: none; margin: 0; padding: var(--r5) 0 0;
    font-size: .82rem; color: var(--tekst-svak);
}
.smule li { display: flex; align-items: center; gap: var(--r2); }
.smule li + li::before {
    content: ''; width: 5px; height: 5px; flex: none;
    border-top: 1.5px solid var(--kant-sterk);
    border-right: 1.5px solid var(--kant-sterk);
    transform: rotate(45deg);
}
.smule a:hover { color: var(--gronn-dyp); text-decoration: underline; text-underline-offset: 3px; }
.smule [aria-current] { color: var(--tekst); font-weight: 500; }

.sidetopp { padding-block: var(--r5) var(--r6); }
.sidetopp h1 { margin-bottom: var(--r3); }
.sidetopp__rad { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--r6); }
.sidetopp__ingress { color: var(--tekst-svak); max-width: 62ch; margin: 0; }
.sidetopp__ingress p { margin-bottom: var(--r3); }

/* Lang SEO-tekst foldes ut – kort innledning over rutenettet, resten paa
   forespoersel. Hele teksten ligger i DOM, saa soekemotorer ser alt. */
.les-mer { margin-top: var(--r3); }
.les-mer[hidden] { display: none; }
.les-mer-knapp {
    background: none; border: 0; padding: 0;
    font-size: .9rem; font-weight: 600; color: var(--gronn-dyp);
    text-decoration: underline; text-underline-offset: 4px;
}

/* ---------- 2. Underkategorier (chips med bilde) ------------------------- */
.underkat {
    display: flex; gap: var(--r3);
    list-style: none; margin: 0 0 var(--r7); padding: 0 0 var(--r2);
    overflow-x: auto;
    scrollbar-width: thin;
}
.underkat a {
    display: flex; align-items: center; gap: var(--r3);
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: 100px;
    padding: 6px 18px 6px 6px;
    white-space: nowrap;
    font-size: .9rem; font-weight: 500; color: var(--navy);
    transition: border-color var(--fart), background var(--fart), transform var(--fart);
}
.underkat img {
    width: 40px; height: 40px; flex: none;
    object-fit: contain;
    background: var(--sand);
    border-radius: 50%;
    padding: 3px;
}
.underkat a:hover { border-color: var(--navy); transform: translateY(-2px); }
.underkat .er-valgt a,
.underkat a[aria-current] { background: var(--navy); border-color: var(--navy); color: var(--tekst-hvit); }
.underkat a em { font-style: normal; color: var(--tekst-svak); font-size: .8rem; }
.underkat a[aria-current] em { color: rgba(255,255,255,.65); }

/* ---------- 3. PLP-oppsett ----------------------------------------------- */
.plp {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    gap: var(--r8);
    align-items: start;
    padding-bottom: var(--r9);
}

/* --- Filterkolonne --- */
.filter { position: sticky; top: calc(var(--topp-h) + var(--r4)); }
.filter__topp {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: var(--r4); margin-bottom: var(--r2);
    border-bottom: 1px solid var(--kant);
}
.filter__topp h2 {
    font-family: var(--ui); font-size: .78rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-svak);
    margin: 0;
}
.nullstill {
    background: none; border: 0; padding: 0;
    font-size: .82rem; font-weight: 600; color: var(--rod);
    text-decoration: underline; text-underline-offset: 3px;
}

.filter__lukk,
.filter__bunn { display: none; }

.filter__gruppe { border-bottom: 1px solid var(--kant); }
.filter__gruppe > summary {
    display: flex; align-items: center; justify-content: space-between;
    list-style: none; cursor: pointer;
    padding: var(--r4) 0;
    font-size: .95rem; font-weight: 600; color: var(--navy);
}
.filter__gruppe > summary::-webkit-details-marker { display: none; }
.filter__gruppe > summary::after {
    content: ''; flex: none; width: 10px; height: 10px;
    border-right: 2px solid var(--tekst-svak);
    border-bottom: 2px solid var(--tekst-svak);
    transform: rotate(45deg) translate(-2px,-2px);
    transition: transform var(--fart);
}
.filter__gruppe[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.filter__innhold { padding-bottom: var(--r5); display: grid; gap: var(--r2); }

.avkryss {
    display: flex; align-items: center; gap: var(--r3);
    cursor: pointer; font-size: .9rem; color: var(--tekst);
    padding: 3px 0;
}
.avkryss input {
    appearance: none; -webkit-appearance: none;
    width: 19px; height: 19px; flex: none; margin: 0;
    border: 1.5px solid var(--kant-sterk);
    border-radius: 5px; background: var(--hvit);
    display: grid; place-items: center;
    transition: background var(--fart), border-color var(--fart);
}
.avkryss input::after {
    content: ''; width: 10px; height: 6px;
    border-left: 2px solid var(--hvit); border-bottom: 2px solid var(--hvit);
    transform: rotate(-45deg) scale(0);
    transition: transform var(--fart);
}
.avkryss input:checked { background: var(--gronn-dyp); border-color: var(--gronn-dyp); }
.avkryss input:checked::after { transform: rotate(-45deg) scale(1); }
.avkryss span { flex: 1; }
.avkryss em { font-style: normal; font-size: .8rem; color: var(--tekst-svak); }
.avkryss:hover span { color: var(--gronn-dyp); }

.prisrad { display: flex; align-items: center; gap: var(--r2); margin-bottom: var(--r3); }
.prisrad input {
    width: 100%; min-width: 0;
    border: 1.5px solid var(--kant); border-radius: var(--radius-s);
    padding: 9px 10px; font: inherit; font-size: .88rem;
    background: var(--hvit);
}
.prisrad input:focus { outline: none; border-color: var(--gronn); }
.prisrad span { color: var(--tekst-svak); }

.filter__hjelp {
    display: block;
    margin-top: var(--r5);
    background: linear-gradient(150deg, var(--gronn-lys), var(--sand));
    border-radius: var(--radius-l);
    padding: var(--r5);
}
.filter__hjelp strong { display: block; font-family: var(--display); font-size: 1.02rem; color: var(--navy); margin-bottom: 6px; }
.filter__hjelp p { font-size: .85rem; color: var(--tekst-svak); margin-bottom: var(--r3); }
.filter__hjelp span { font-size: .85rem; font-weight: 600; color: var(--gronn-dyp); }

/* --- Verktoylinje --- */
.verktoylinje {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--r4);
    padding-bottom: var(--r4);
    border-bottom: 1px solid var(--kant);
    margin-bottom: var(--r5);
}
.treff { font-size: .9rem; color: var(--tekst-svak); margin: 0; }
.treff strong { color: var(--navy); }
.verktoylinje__hoyre { display: flex; align-items: center; gap: var(--r3); }

.filterknapp { display: none; }

.sorter {
    display: flex; align-items: center; gap: var(--r2);
    font-size: .9rem; color: var(--tekst-svak);
}
.sorter select {
    appearance: none; -webkit-appearance: none;
    border: 1.5px solid var(--kant); border-radius: 100px;
    background: var(--hvit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5C70' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
    padding: 9px 36px 9px 16px;
    font: inherit; font-size: .9rem; font-weight: 500; color: var(--navy);
}
.sorter select:focus { outline: none; border-color: var(--gronn); }

.aktive-filtre { display: flex; flex-wrap: wrap; gap: var(--r2); margin-bottom: var(--r5); }
.filterflis {
    display: inline-flex; align-items: center; gap: var(--r2);
    background: var(--gronn-lys); border: 1px solid var(--gronn);
    border-radius: 100px; padding: 5px 8px 5px 14px;
    font-size: .82rem; font-weight: 500; color: var(--gronn-dyp);
}
.filterflis button {
    display: grid; place-items: center;
    width: 18px; height: 18px; border: 0; border-radius: 50%;
    background: rgba(110,131,33,.18); color: var(--gronn-dyp);
    font-size: 14px; line-height: 1;
}
.filterflis button:hover { background: var(--gronn-dyp); color: var(--hvit); }

/* --- Rutenett --- */
.plp-rutenett { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r5); }

/* Innskutt flis i rutenettet. Bryter monotonien og gir en vei videre
   for den som ikke finner fram paa egen haand. */
.promo-flis {
    grid-column: span 1;
    display: flex; flex-direction: column; justify-content: center;
    background: var(--navy); color: rgba(255,255,255,.75);
    border-radius: var(--radius-l);
    padding: var(--r6);
}
.promo-flis strong {
    display: block; font-family: var(--display); font-size: 1.3rem;
    color: var(--tekst-hvit); margin-bottom: var(--r3);
}
.promo-flis p { font-size: .9rem; margin-bottom: var(--r5); }

.last-flere { text-align: center; margin-top: var(--r8); }
.last-flere p { font-size: .88rem; color: var(--tekst-svak); margin-bottom: var(--r3); }
.fremdrift {
    width: 180px; height: 4px; margin: 0 auto var(--r5);
    background: var(--kant); border-radius: 100px; overflow: hidden;
}
.fremdrift i { display: block; height: 100%; background: var(--gronn); border-radius: 100px; }

/* --- SEO-tekst nederst --- */
.plp-seo { background: var(--hvit); border-top: 1px solid var(--kant); padding-block: var(--r9); }
.plp-seo__inn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r8); }
.plp-seo h2 { font-size: 1.6rem; }
.plp-seo h3 { font-size: 1.1rem; margin-top: var(--r5); }
.plp-seo p, .plp-seo li { color: var(--tekst-svak); font-size: .95rem; }
.plp-seo ul { padding-left: 1.1rem; }
.plp-seo a { color: var(--gronn-dyp); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 4. PDP-oppsett ----------------------------------------------- */
.pdp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: var(--r8);
    align-items: start;
    padding-bottom: var(--r8);
}

/* --- Galleri --- */
/* Galleriet staar i ro mens hoyre kolonne rulles. Den er kortere enn
   kjoepskolonnen, saa produktet er synlig hele veien ned. */
.galleri {
    display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: var(--r4);
    position: sticky;
    top: calc(var(--topp-fast, 114px) + var(--r4));
    align-self: start;
}
.galleri__mini { display: grid; gap: var(--r2); align-content: start; }
.galleri__mini button {
    aspect-ratio: 1; padding: 4px;
    background: var(--hvit);
    border: 1.5px solid var(--kant);
    border-radius: var(--radius-m);
    overflow: hidden;
    transition: border-color var(--fart);
}
.galleri__mini img { width: 100%; height: 100%; object-fit: contain; }
.galleri__mini button:hover { border-color: var(--kant-sterk); }
.galleri__mini button[aria-current="true"] { border-color: var(--navy); }

.galleri__scene {
    position: relative;
    aspect-ratio: 1;
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: var(--radius-l);
    overflow: hidden;
}
.galleri__scene img {
    width: 100%; height: 100%; object-fit: contain;
    padding: var(--r6);
    transition: transform 500ms cubic-bezier(.2,.7,.3,1);
}
.galleri__scene:hover img { transform: scale(1.5); }
.galleri__flagg { position: absolute; top: var(--r4); left: var(--r4); z-index: 2; display: grid; gap: var(--r2); justify-items: start; }
.galleri__hint {
    position: absolute; right: var(--r4); bottom: var(--r4); z-index: 2;
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
    border-radius: 100px; padding: 6px 14px;
    font-size: .78rem; color: var(--tekst-svak);
    pointer-events: none;
}
.galleri__hint svg { width: 15px; height: 15px; }

/* --- Kjoepsboks -----------------------------------------------------------
   Hoyre kolonne er delt i fem tydelige trinn, i den rekkefolgen en kjoeper
   trenger dem: hvem og hva  ->  kjoepet  ->  nokkeltall  ->  hva som folger
   med  ->  hjelp. Bare kjoepskortet er hevet fra flaten; resten ligger flatt,
   saa blikket har ett sted aa lande.
   -------------------------------------------------------------------------- */
.kjopsboks { display: grid; gap: var(--r5); align-content: start; }

/* 1. Hvem og hva */
.kjopsboks__hode { display: grid; gap: var(--r3); }
.kjopsboks__merke {
    display: flex; align-items: center; gap: var(--r3); margin: 0;
    font-size: .74rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gronn-dyp);
}
.kjopsboks__merke a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kjopsboks__merke .vnr { color: var(--tekst-svak); letter-spacing: .06em; font-weight: 500; }
.kjopsboks h1 { font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.2rem); margin: 0; }
.kjopsboks__kort { font-size: .95rem; color: var(--tekst-svak); margin: 0; }

.stjerner { display: flex; align-items: center; gap: var(--r2); font-size: .85rem; color: var(--tekst-svak); margin: 0; }
.stjerner__ikoner { display: flex; gap: 2px; color: var(--gull); }
.stjerner__ikoner svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.stjerner strong { color: var(--navy); }
.stjerner a { text-decoration: underline; text-underline-offset: 3px; }
.stjerner a:hover { color: var(--gronn-dyp); }

/* 2. Kjoepskortet – sidens eneste hevede flate */
.kjopskort {
    display: grid; gap: var(--r4);
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: var(--radius-l);
    padding: var(--r5);
    box-shadow: var(--skygge-s);
}

.prisblokk { border: 0; padding: 0; }
.prisblokk__rad { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--r2) var(--r3); }
.prisblokk__na {
    font-family: var(--display); font-size: 2.3rem; font-weight: 900;
    color: var(--navy); letter-spacing: -.025em; line-height: 1;
}
.prisblokk__for { font-size: 1rem; color: var(--tekst-svak); text-decoration: line-through; }
.prisblokk__mva { font-size: .82rem; color: var(--tekst-svak); margin: 0; }
.delbetaling {
    display: flex; align-items: center; gap: var(--r2);
    margin: var(--r2) 0 0; font-size: .85rem; color: var(--tekst-svak);
}
.delbetaling svg { width: 17px; height: 17px; }
.delbetaling b { color: var(--navy); }

.lagerlinje {
    display: grid; gap: var(--r2);
    padding-block: var(--r4);
    border-block: 1px solid var(--kant);
}
.lagerlinje p { display: flex; align-items: flex-start; gap: var(--r3); margin: 0; font-size: .88rem; color: var(--tekst-svak); }
.lagerlinje svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--tekst-svak); }
.lagerlinje b { color: var(--navy); font-weight: 600; }
.lagerprikk { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 6px; }
.lagerprikk.er-paa { background: var(--gronn); box-shadow: 0 0 0 3px rgba(151,174,50,.22); }
.lagerprikk.er-faa { background: var(--gull); box-shadow: 0 0 0 3px rgba(200,146,47,.2); }

.kjoprad { display: flex; gap: var(--r3); }
.antall {
    display: flex; align-items: center; flex: none;
    border: 1.5px solid var(--kant); border-radius: 100px;
    background: var(--hvit);
}
.antall button {
    width: 42px; height: 52px;
    background: none; border: 0; color: var(--navy);
    font-size: 1.2rem; line-height: 1; border-radius: 100px;
}
.antall button:hover { color: var(--gronn-dyp); }
.antall input {
    width: 32px; border: 0; background: none; text-align: center;
    font: inherit; font-weight: 600; color: var(--navy);
    -moz-appearance: textfield;
}
.antall input::-webkit-outer-spin-button,
.antall input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kjoprad .knapp { flex: 1; padding-block: 16px; }

.vipps {
    width: 100%;
    background: #FF5B24; color: var(--hvit);
    border-radius: 100px; border: 0;
    padding: 14px 24px; font-size: .95rem; font-weight: 600;
    transition: filter var(--fart);
}
.vipps:hover { filter: brightness(1.07); }

.betalingsmerker {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--r2) var(--r3);
    font-size: .76rem; color: var(--tekst-svak);
}
.betalingsmerker img { height: 20px; width: auto; }

/* 3. og 4. Flate kort – informasjon, ikke handling */
.kortboks {
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: var(--radius-m);
    padding: var(--r5);
}
.kortboks__tittel {
    font-family: var(--ui);
    font-size: .72rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-svak);
    margin: 0 0 var(--r4);
}
.kortboks__lenke {
    display: inline-block; margin-top: var(--r4);
    font-size: .86rem; font-weight: 600; color: var(--gronn-dyp);
    text-decoration: underline; text-underline-offset: 4px;
}
.kortboks__lenke:hover { color: var(--navy); }

.nokkelspek { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r4) var(--r5); margin: 0; }
.nokkelspek dt { font-size: .78rem; color: var(--tekst-svak); margin-bottom: 2px; }
.nokkelspek dd { margin: 0; font-size: .95rem; font-weight: 600; color: var(--navy); }

.lofter { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r3); }
.lofter li { display: flex; align-items: flex-start; gap: var(--r3); font-size: .88rem; color: var(--tekst-svak); }
.lofter svg {
    width: 20px; height: 20px; padding: 4px; flex: none; margin-top: 1px;
    border-radius: 50%; background: var(--gronn-lys); color: var(--gronn-dyp);
    stroke-width: 3;
}
.lofter b { color: var(--navy); font-weight: 600; }

/* 5. Hjelp */
.hjelpelinje { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r3); }
.hjelpelenke {
    display: flex; align-items: flex-start; gap: var(--r3);
    border: 1px dashed var(--kant-sterk);
    border-radius: var(--radius-m);
    padding: var(--r4);
    font-size: .8rem; color: var(--tekst-svak);
    transition: border-color var(--fart), background var(--fart);
}
.hjelpelenke:hover { border-color: var(--gronn); background: var(--gronn-lys); }
.hjelpelenke svg { width: 20px; height: 20px; flex: none; color: var(--gronn-dyp); margin-top: 1px; }
.hjelpelenke b { display: block; color: var(--navy); font-size: .88rem; margin-bottom: 1px; }

/* --- Fast kjoepslinje som glir inn ved scroll --- */
.kjopslinje {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--kant);
    box-shadow: 0 -8px 32px rgba(20,20,52,.1);
    transform: translateY(110%);
    transition: transform var(--fart);
}
.kjopslinje.er-synlig { transform: none; }
.kjopslinje__inn {
    display: flex; align-items: center; gap: var(--r5);
    padding-block: var(--r3);
}
.kjopslinje img {
    width: 52px; height: 52px; object-fit: contain;
    background: var(--sand); border-radius: var(--radius-s); padding: 4px;
}
.kjopslinje__tekst { flex: 1; min-width: 0; }
.kjopslinje__tekst strong { display: block; font-size: .95rem; color: var(--navy); }
.kjopslinje__tekst span { font-size: .8rem; color: var(--gronn-dyp); }
.kjopslinje__pris { font-family: var(--display); font-size: 1.4rem; font-weight: 900; color: var(--navy); }
.kjopslinje .knapp { flex: none; }

/* --- Ankermeny --- */
.ankere {
    position: sticky;
    /* --topp-fast er hoyden paa den sticky headeren akkurat naa (app.js). */
    top: calc(var(--topp-fast, 114px) - 1px);
    z-index: 80;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    border-block: 1px solid var(--kant);
}
.ankere ul {
    display: flex; gap: var(--r6);
    list-style: none; margin: 0; padding: 0;
    overflow-x: auto; scrollbar-width: none;
}
.ankere ul::-webkit-scrollbar { display: none; }
.ankere a {
    display: block; padding: var(--r4) 0;
    font-size: .93rem; font-weight: 500; color: var(--tekst-svak);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--fart), border-color var(--fart);
}
.ankere a:hover { color: var(--navy); }
.ankere a.er-aktiv { color: var(--navy); font-weight: 600; border-bottom-color: var(--gronn); }

/* --- Innholdsseksjoner --- */
.pdp-del { padding-block: var(--r8); border-bottom: 1px solid var(--kant); scroll-margin-top: calc(var(--topp-fast, 114px) + 70px); }
.pdp-del:last-of-type { border-bottom: 0; }
.pdp-del__inn { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--r8); align-items: start; }
.pdp-del h2 { font-size: 1.5rem; margin: 0; }
.pdp-del__bi { font-size: .88rem; color: var(--tekst-svak); margin-top: var(--r3); }

.brodtekst { max-width: 72ch; color: var(--tekst-svak); }
.brodtekst h3 { color: var(--navy); font-size: 1.12rem; margin-top: var(--r6); }
.brodtekst h3:first-child { margin-top: 0; }
.brodtekst p { margin-bottom: var(--r4); }
.brodtekst ul { padding-left: 1.1rem; margin-bottom: var(--r4); }
.brodtekst li { margin-bottom: 6px; }

.spek { width: 100%; border-collapse: collapse; }
.spek th, .spek td { text-align: left; padding: var(--r3) 0; border-bottom: 1px solid var(--kant); font-size: .93rem; }
.spek th { width: 42%; font-weight: 500; color: var(--tekst-svak); }
.spek td { color: var(--navy); font-weight: 500; }
.spek tr:last-child th, .spek tr:last-child td { border-bottom: 0; }

.medfolger { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r6); }
.medfolger h3 { font-size: 1rem; margin-bottom: var(--r3); }
.medfolger ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.medfolger li { display: flex; align-items: flex-start; gap: var(--r2); font-size: .9rem; color: var(--tekst-svak); }
.medfolger li::before {
    content: ''; flex: none; width: 13px; height: 7px; margin-top: 6px;
    border-left: 2px solid var(--gronn-dyp); border-bottom: 2px solid var(--gronn-dyp);
    transform: rotate(-45deg);
}

/* --- Sammenligning --- */
.sammenlign { width: 100%; border-collapse: collapse; }
.sammenlign th, .sammenlign td {
    padding: var(--r4) var(--r3); text-align: left;
    border-bottom: 1px solid var(--kant); font-size: .92rem;
    vertical-align: top;
}
.sammenlign thead th { border-bottom: 2px solid var(--kant-sterk); }
.sammenlign .denne { background: var(--gronn-lys); }
.sammenlign__topp { display: grid; gap: var(--r2); justify-items: start; }
.sammenlign__topp img { width: 72px; height: 72px; object-fit: contain; }
.sammenlign__topp strong { font-family: var(--display); font-size: 1rem; color: var(--navy); }
.sammenlign__topp em { font-style: normal; font-size: .95rem; font-weight: 700; color: var(--navy); }
.merkepille {
    background: var(--gronn); color: var(--navy);
    font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 100px;
}

/* --- Anmeldelser --- */
.vurdering { display: grid; gap: var(--r4); }
.vurdering__snitt { display: flex; align-items: center; gap: var(--r4); }
.vurdering__tall { font-family: var(--display); font-size: 3rem; font-weight: 900; color: var(--navy); line-height: 1; }
.fordeling { display: grid; gap: 6px; }
.fordeling__rad { display: flex; align-items: center; gap: var(--r3); font-size: .82rem; color: var(--tekst-svak); }
.fordeling__stolpe { width: 150px; height: 6px; background: var(--kant); border-radius: 100px; overflow: hidden; }
.fordeling__stolpe i { display: block; height: 100%; background: var(--gull); }

.anmeldelse { border-top: 1px solid var(--kant); padding-top: var(--r5); margin-top: var(--r5); }
.anmeldelse:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.anmeldelse__topp { display: flex; align-items: center; gap: var(--r3); margin-bottom: var(--r3); }
.anmeldelse__navn { font-weight: 600; color: var(--navy); font-size: .93rem; }
.anmeldelse__dato { font-size: .8rem; color: var(--tekst-svak); }
.bekreftet {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .72rem; font-weight: 600; color: var(--gronn-dyp);
    background: var(--gronn-lys); padding: 3px 9px; border-radius: 100px;
}
.anmeldelse p { font-size: .93rem; color: var(--tekst-svak); margin: 0; }

/* ==========================================================================
   5. Responsivt
   ========================================================================== */

@media (max-width: 1200px) {
    .plp { grid-template-columns: 240px minmax(0, 1fr); gap: var(--r6); }
    .plp-rutenett { grid-template-columns: repeat(2, 1fr); }
    .pdp { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--r6); }
    .pdp-del__inn { grid-template-columns: 240px minmax(0, 1fr); gap: var(--r6); }
}

@media (max-width: 1024px) {
    /* --- PLP: filtrene legges i en skuff --- */
    .plp { grid-template-columns: 1fr; gap: 0; }
    .filter {
        position: fixed; inset: 0; z-index: 120;
        background: var(--krem);
        padding: var(--r5) var(--gutter) var(--r8);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--fart);
        top: 0;
    }
    .filter.er-apen { transform: none; }
    .filter__topp { position: sticky; top: 0; background: var(--krem); padding-top: var(--r4); z-index: 2; }
    .filter__lukk {
        display: grid; place-items: center;
        width: 40px; height: 40px; border-radius: 50%;
        background: var(--sand); border: 0; color: var(--navy);
    }
    /* Fast "vis treff"-knapp nederst i skuffen */
    .filter__bunn {
        display: block;
        position: sticky; bottom: 0;
        margin: var(--r5) calc(var(--gutter) * -1) 0;
        padding: var(--r4) var(--gutter);
        background: rgba(251,249,244,.96);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--kant);
    }
    .filter__bunn .knapp { width: 100%; }
    .filter { padding-bottom: 0; }

    .filterknapp {
        display: inline-flex; align-items: center; gap: var(--r2);
        border: 1.5px solid var(--navy); border-radius: 100px;
        background: var(--hvit); color: var(--navy);
        padding: 9px 18px; font-size: .9rem; font-weight: 600;
    }
    .filterknapp em {
        font-style: normal; display: grid; place-items: center;
        min-width: 20px; height: 20px; padding: 0 6px;
        background: var(--gronn); border-radius: 100px;
        font-size: .72rem; font-weight: 700;
    }

    /* --- PDP: galleri over kjoepsboks --- */
    .pdp { grid-template-columns: 1fr; gap: var(--r6); }
    .kjopsboks { position: static; }
    .galleri { position: static; top: auto; }
    .galleri { grid-template-columns: 1fr; }
    .galleri__mini {
        grid-auto-flow: column; grid-auto-columns: 72px;
        overflow-x: auto; order: 2; gap: var(--r2);
        padding-bottom: var(--r2);
    }
    .galleri__scene:hover img { transform: none; }
    .galleri__hint { display: none; }

    .pdp-del__inn { grid-template-columns: 1fr; gap: var(--r5); }
    .plp-seo__inn { grid-template-columns: 1fr; gap: var(--r6); }
}

@media (max-width: 760px) {
    .sidetopp__rad { flex-direction: column; align-items: flex-start; gap: var(--r4); }
    .plp-rutenett { grid-template-columns: 1fr 1fr; gap: var(--r3); }
    .promo-flis { grid-column: 1 / -1; padding: var(--r5); }
    .verktoylinje { gap: var(--r3); }
    .sorter span { display: none; }

    .medfolger { grid-template-columns: 1fr; gap: var(--r5); }

    /* Kjoepsknappen faar hele bredden paa mobil – antallet over */
    .kjoprad { flex-direction: column; align-items: stretch; gap: var(--r3); }
    .antall { align-self: start; }
    .kjopskort { padding: var(--r4); }
    .nokkelspek { gap: var(--r3) var(--r4); }
    .hjelpelinje { grid-template-columns: 1fr; }
    .kjopslinje__inn { gap: var(--r3); }
    .kjopslinje img, .kjopslinje__tekst span { display: none; }
    .kjopslinje__tekst strong { font-size: .85rem; }
    .kjopslinje__pris { font-size: 1.1rem; }

    .vurdering__snitt { flex-direction: column; align-items: flex-start; }
    .fordeling__stolpe { width: 110px; }

    /* Sammenligningstabellen ruller sidelengs framfor aa klemmes sammen */
    .sammenlign-rull { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
    .sammenlign { min-width: 560px; }
}