/* ==========================================================================
   Kakle – nytt tema, forside
   Wonderwave 2026. Bygget som frittstående HTML/CSS-prototype før
   portering til WordPress-tema.
   ========================================================================== */

/* ---------- 1. Designtokens --------------------------------------------- */
:root {
    /* Farger – bygget videre på Kakles eksisterende grønn og mørkeblå */
    --gronn:        #97AE32;
    --gronn-dyp:    #6E8321;
    --gronn-hover:  #7F9429;
    --gronn-lys:    #F2F5E4;

    --navy:         #141434;
    --navy-myk:     #26264A;

    --krem:         #FBF9F4;
    --sand:         #F1ECE1;
    --sand-mork:    #E2DACA;

    --tekst:        #1B1B2A;
    --tekst-svak:   #5C5C70;
    --tekst-hvit:   #FFFFFF;

    --rod:          #BE3C2A;
    --rod-lys:      #FBEDEA;
    --gull:         #C8922F;

    --hvit:         #FFFFFF;
    --kant:         #E6E1D6;
    --kant-sterk:   #CFC7B6;

    /* Typografi */
    --ui:      'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display: 'Merriweather', Georgia, 'Times New Roman', serif;

    /* Rom – 4px-basert skala */
    --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px; --r5: 24px;
    --r6: 32px; --r7: 48px; --r8: 64px; --r9: 96px; --r10: 128px;

    /* Form */
    --radius-s: 6px;
    --radius-m: 12px;
    --radius-l: 20px;
    --radius-xl: 32px;

    --skygge-s: 0 1px 2px rgba(20,20,52,.06), 0 2px 8px rgba(20,20,52,.04);
    --skygge-m: 0 2px 4px rgba(20,20,52,.05), 0 12px 28px rgba(20,20,52,.08);
    --skygge-l: 0 8px 16px rgba(20,20,52,.06), 0 32px 64px rgba(20,20,52,.12);

    --fart: 220ms cubic-bezier(.2,.7,.3,1);

    --bredde: 1320px;
    --gutter: 24px;

    /* Hoyden paa den sticky headeren. Settes presist av app.js. */
    --topp-h: 172px;
}

/* ---------- 2. Grunnmur -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--krem);
    color: var(--tekst);
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--navy);
    margin: 0 0 var(--r4);
    text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); }
h3 { font-size: 1.125rem; letter-spacing: -.005em; }
p  { margin: 0 0 var(--r4); }
p:last-child { margin-bottom: 0; }

/* SVG-ikoner tegnes som strek */
svg {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    flex: none;
}

:focus-visible {
    outline: 3px solid var(--gronn-dyp);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}

.wrap {
    width: 100%;
    max-width: var(--bredde);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skjult {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.hopp-til {
    position: absolute; left: var(--r4); top: -60px; z-index: 999;
    background: var(--navy); color: var(--tekst-hvit);
    padding: var(--r3) var(--r5); border-radius: 0 0 var(--radius-m) var(--radius-m);
    transition: top var(--fart);
}
.hopp-til:focus { top: 0; }

.eyebrow {
    display: inline-block;
    font-size: .72rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--gronn-dyp);
    margin-bottom: var(--r3);
}
.eyebrow--rod { color: var(--rod); }
.eyebrow--lys { color: rgba(255,255,255,.72); }

/* ---------- 3. Knapper --------------------------------------------------- */
.knapp {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--r2);
    padding: 14px 28px;
    border: 1.5px solid transparent;
    border-radius: 100px;
    font-size: .95rem; font-weight: 600; letter-spacing: .01em;
    text-align: center;
    transition: background var(--fart), color var(--fart),
                border-color var(--fart), transform var(--fart),
                box-shadow var(--fart);
}
.knapp:active { transform: translateY(1px); }

.knapp--primar {
    background: var(--gronn); color: var(--navy);
    box-shadow: 0 4px 14px rgba(151,174,50,.3);
}
.knapp--primar:hover { background: var(--gronn-hover); box-shadow: 0 6px 20px rgba(151,174,50,.4); }

.knapp--sekundar { background: transparent; color: var(--navy); border-color: var(--kant-sterk); }
.knapp--sekundar:hover { border-color: var(--navy); background: var(--hvit); }

.knapp--kontur { background: transparent; color: var(--navy); border-color: var(--navy); }
.knapp--kontur:hover { background: var(--navy); color: var(--tekst-hvit); }

.knapp--lys { background: var(--hvit); color: var(--navy); }
.knapp--lys:hover { background: var(--gronn); }

.knapp--kontur-lys { background: transparent; color: var(--tekst-hvit); border-color: rgba(255,255,255,.4); }
.knapp--kontur-lys:hover { border-color: var(--hvit); background: rgba(255,255,255,.1); }

.knapp--liten { padding: 10px 20px; font-size: .875rem; }

.knapperad { display: flex; flex-wrap: wrap; gap: var(--r3); }

.lenkepil {
    display: inline-flex; align-items: center; gap: var(--r2);
    font-weight: 600; font-size: .95rem; color: var(--navy);
    border-bottom: 2px solid var(--gronn);
    padding-bottom: 2px;
    transition: gap var(--fart), color var(--fart);
    white-space: nowrap;
}
.lenkepil svg { width: 18px; height: 18px; }
.lenkepil:hover { gap: var(--r4); color: var(--gronn-dyp); }

/* ---------- 4. Toppbånd -------------------------------------------------- */
.toppband {
    background: var(--navy);
    color: rgba(255,255,255,.82);
    font-size: .8rem;
}
.toppband__inn {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--r5); min-height: 40px;
}
.toppband__lofter {
    display: flex; gap: var(--r6);
    list-style: none; margin: 0; padding: 0;
}
.toppband__lofter li { display: flex; align-items: center; gap: var(--r2); }
.toppband__lofter svg { width: 15px; height: 15px; color: var(--gronn); stroke-width: 2.6; }
.toppband__hoyre { display: flex; align-items: center; gap: var(--r4); }
.toppband__hoyre a:hover { color: var(--hvit); }
.sep { width: 1px; height: 14px; background: rgba(255,255,255,.22); }

@media (max-width: 1000px) {
    .toppband__lofter li:nth-child(n+2) { display: none; }
    .sep { display: none; }
}

/* ---------- 5. Header ---------------------------------------------------- */
.topp {
    position: sticky; top: 0; z-index: 100;
    background: rgba(251,249,244,.92);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--kant);
}
.topp__inn {
    display: flex; align-items: center; gap: var(--r5);
    min-height: 84px;
}

/* Kompakt header naar brukeren har scrollet. Frigjoer ca. 40px hoyde. */
.topp__inn,
.hovedmeny__liste > li > a,
.logo img { transition: min-height var(--fart), padding var(--fart), height var(--fart); }
.topp.er-kompakt .topp__inn { min-height: 64px; }
.topp.er-kompakt .logo img { height: 42px; }
.topp.er-kompakt .hovedmeny__liste > li > a { padding-block: 11px; }
.topp.er-kompakt .sok input { padding-block: 8px; }
.topp.er-kompakt .sok button { padding-block: 9px; }
.topp.er-kompakt .ikonlenke span { display: none; }
.logo { display: flex; align-items: center; }
.logo img { width: auto; height: 54px; }

.burger {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: -10px;
    background: none; border: 0;
}
.burger span {
    display: block; height: 2px; width: 22px;
    background: var(--navy); border-radius: 2px;
    transition: transform var(--fart), opacity var(--fart);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Søk – bevisst stort. 2 000+ varer betyr at søk er hovednavigasjonen. */
.sok {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: var(--r2);
    background: var(--hvit);
    border: 1.5px solid var(--kant);
    border-radius: 100px;
    padding: 4px 4px 4px var(--r4);
    transition: border-color var(--fart), box-shadow var(--fart);
}
.sok:focus-within { border-color: var(--gronn); box-shadow: 0 0 0 4px rgba(151,174,50,.16); }
.sok__ikon { color: var(--tekst-svak); }
.sok input {
    flex: 1; min-width: 0;
    border: 0; background: none; outline: none;
    font: inherit; font-size: .925rem; color: var(--tekst);
    padding: 10px 0;
}
.sok input::placeholder { color: var(--tekst-svak); }
.sok button {
    border: 0; border-radius: 100px;
    background: var(--navy); color: var(--tekst-hvit);
    padding: 11px 24px; font-size: .875rem; font-weight: 600;
    transition: background var(--fart);
}
.sok button:hover { background: var(--gronn-dyp); }

.topp__handlinger { display: flex; align-items: center; gap: var(--r2); margin-left: auto; }
.ikonlenke {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--r2) var(--r3);
    border-radius: var(--radius-m);
    font-size: .7rem; font-weight: 500; color: var(--navy);
    transition: background var(--fart);
}
.ikonlenke:hover { background: var(--sand); }
.ikonlenke svg { width: 23px; height: 23px; }
.teller {
    position: absolute; top: 2px; right: 4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center;
    background: var(--rod); color: var(--tekst-hvit);
    border-radius: 100px;
    font-size: .65rem; font-weight: 700; font-style: normal;
}

/* ---------- 6. Hovedmeny + megameny ------------------------------------- */
.hovedmeny { border-top: 1px solid var(--kant); background: rgba(251,249,244,.7); }
.hovedmeny__liste {
    display: flex; align-items: center; gap: var(--r2);
    list-style: none; margin: 0; padding: 0;
}
.hovedmeny__liste > li > a {
    display: flex; align-items: center; gap: 5px;
    padding: 15px var(--r4);
    font-size: .925rem; font-weight: 500; color: var(--navy);
    border-bottom: 2px solid transparent;
    transition: color var(--fart), border-color var(--fart);
    white-space: nowrap;
}
.hovedmeny__liste > li > a:hover { color: var(--gronn-dyp); border-bottom-color: var(--gronn); }
.hovedmeny .pil { width: 15px; height: 15px; transition: transform var(--fart); }
.har-mega:hover > a { color: var(--gronn-dyp); border-bottom-color: var(--gronn); }
.har-mega:hover .pil { transform: rotate(180deg); }
.er-salg > a { color: var(--rod) !important; font-weight: 600; }

/* Utvid-knapp og ekstra menypunkter vises bare i mobilmenyen */
.utvid { display: none; }
.kun-mobil { display: none; }

/* --- Panelet --- */
.mega {
    position: absolute; left: 0; right: 0;
    background: var(--hvit);
    border-top: 1px solid var(--kant);
    box-shadow: 0 24px 48px -16px rgba(20,20,52,.22);
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--fart), transform var(--fart), visibility var(--fart);
    transition-delay: 0ms;
    z-index: 90;
}
/* Liten forsinkelse ved aapning saa panelet ikke blafrer naar musa bare passerer */
.har-mega:hover .mega { transition-delay: 130ms; }
.har-mega:hover .mega,
.har-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }

/* Dempet skygge over resten av siden mens menyen er aapen */
.mega::after {
    content: ''; position: absolute; top: 100%; left: 0; right: 0;
    height: 100vh; pointer-events: none;
    background: linear-gradient(to bottom, rgba(20,20,52,.28), rgba(20,20,52,.14) 40%, transparent);
}

.mega__inn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--r8);
    padding-block: var(--r6) var(--r7);
}
.mega__kolonner {
    display: grid;
    grid-template-columns: 1.9fr 1fr 1fr;
    gap: var(--r6);
}
/* Menyer med faerre kolonner */
.mega__kolonner:has(> .mega__kol:nth-child(2):last-child) { grid-template-columns: 1.7fr 1fr; }

.mega__kol h3 {
    font-family: var(--ui);
    font-size: .7rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--tekst-svak);
    margin-bottom: var(--r4);
    padding-bottom: var(--r3);
    border-bottom: 1px solid var(--kant);
}
.mega__h3--avstand { margin-top: var(--r6); }

.mega__kol > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega__kol > ul a {
    display: flex; align-items: center; gap: var(--r2);
    padding: 7px 10px; margin-left: -10px;
    border-radius: var(--radius-s);
    font-size: .92rem; color: var(--tekst);
    transition: color var(--fart), background var(--fart);
}
.mega__kol > ul a:hover { color: var(--gronn-dyp); background: var(--gronn-lys); }

.mega__flagg {
    font-size: .62rem; font-weight: 700; font-style: normal;
    letter-spacing: .08em; text-transform: uppercase;
    background: var(--sand); color: var(--tekst-svak);
    padding: 2px 7px; border-radius: 100px;
}
.mega__flagg--rod { background: var(--rod-lys); color: var(--rod); }

/* --- Rader med miniatyrbilde --- */
.mega__rader { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--r3); }
.mega__rad {
    display: flex; align-items: center; gap: var(--r3);
    padding: var(--r2); margin-left: calc(var(--r2) * -1);
    border-radius: var(--radius-m);
    transition: background var(--fart);
}
.mega__rad img {
    width: 46px; height: 46px; flex: none;
    object-fit: contain;
    background: var(--sand);
    border-radius: var(--radius-s);
    padding: 3px;
    transition: transform var(--fart);
}
.mega__rad span { display: grid; min-width: 0; }
.mega__rad strong {
    font-size: .92rem; font-weight: 600; color: var(--navy);
    transition: color var(--fart);
}
.mega__rad em {
    font-style: normal; font-size: .75rem; line-height: 1.35; color: var(--tekst-svak);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.mega__rad:hover { background: var(--gronn-lys); }
.mega__rad:hover strong { color: var(--gronn-dyp); }
.mega__rad:hover img { transform: scale(1.06); }

/* --- Sidepanel --- */
.mega__panel { display: grid; gap: var(--r3); align-content: start; }

.mega__utvalgt {
    position: relative;
    display: grid; justify-items: start;
    background: var(--sand);
    border-radius: var(--radius-l);
    padding: var(--r5);
    transition: transform var(--fart), box-shadow var(--fart);
}
.mega__utvalgt:hover { transform: translateY(-3px); box-shadow: var(--skygge-m); }
.mega__utvalgt-flagg {
    background: var(--rod); color: var(--tekst-hvit);
    font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 100px;
}
.mega__utvalgt img {
    width: 100%; max-width: 180px; aspect-ratio: 1; object-fit: contain;
    justify-self: center;
    margin-block: var(--r3);
}
.mega__utvalgt strong {
    font-family: var(--display); font-size: 1rem; line-height: 1.3; color: var(--navy);
    margin-bottom: 4px;
}
.mega__utvalgt-pris { font-size: .95rem; font-weight: 700; color: var(--navy); }
.mega__utvalgt-pris s { color: var(--tekst-svak); font-weight: 400; margin-right: 6px; }

.mega__kort {
    display: block;
    background: linear-gradient(145deg, var(--gronn-lys), var(--sand));
    border-radius: var(--radius-l);
    padding: var(--r5);
    transition: transform var(--fart), box-shadow var(--fart);
}
.mega__kort--hoy { background: linear-gradient(160deg, var(--navy), var(--navy-myk)); }
.mega__kort--hoy strong { color: var(--tekst-hvit) !important; }
.mega__kort--hoy p { color: rgba(255,255,255,.7) !important; }
.mega__kort--hoy .mega__kort-merkelapp { background: var(--gronn); color: var(--navy); }
.mega__kort--hoy .mega__kort-cta { color: var(--gronn); }
.mega__kort:hover { transform: translateY(-3px); box-shadow: var(--skygge-m); }
.mega__kort-merkelapp {
    display: inline-block;
    background: var(--navy); color: var(--tekst-hvit);
    font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 100px; margin-bottom: var(--r3);
}
.mega__kort strong { display: block; font-family: var(--display); font-size: 1.05rem; line-height: 1.3; color: var(--navy); margin-bottom: var(--r2); }
.mega__kort p { font-size: .85rem; color: var(--tekst-svak); margin-bottom: var(--r3); }
.mega__kort-cta { font-size: .875rem; font-weight: 600; color: var(--gronn-dyp); }

/* --- Stripe nederst i panelet --- */
.mega__fot { background: var(--krem); border-top: 1px solid var(--kant); }
.mega__fot-inn {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--r3) var(--r6);
    padding-block: var(--r4);
}
.mega__fot-inn a {
    display: flex; align-items: center; gap: var(--r2);
    font-size: .85rem; font-weight: 500; color: var(--tekst-svak);
    transition: color var(--fart);
}
.mega__fot-inn a::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--gronn);
}
.mega__fot-inn a:hover { color: var(--gronn-dyp); }

/* ---------- 7. Hero ------------------------------------------------------ */
.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    /* Above the fold: heroen fyller noeyaktig resten av foerste skjermbilde.
       svh brukes saa mobilnettlesernes adressefelt ikke dytter innhold ned. */
    min-height: calc(100vh - var(--topp-h));
    min-height: calc(100svh - var(--topp-h));
    overflow: hidden;
    background: var(--sand);
}

/* --- Bakgrunnsfoto + slør --- */
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__foto {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 55% center;
    /* Langsom innzooming gir liv uten aa flytte paa noe */
    animation: heropust 24s ease-in-out infinite alternate;
}
@keyframes heropust { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .hero__foto { animation: none; } }

/* Varmt slør som sikrer lesbar tekst over fotoet */
.hero__slor {
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg,
            rgba(251,249,244,.985) 0%,
            rgba(251,249,244,.96) 30%,
            rgba(251,249,244,.86) 42%,
            rgba(251,249,244,.4) 56%,
            rgba(251,249,244,.06) 70%,
            rgba(251,249,244,0) 80%),
        linear-gradient(to top, rgba(242,236,224,.85), transparent 28%);
}
/* Grønt lysskjær bak tilbudskortet */
.hero__glod {
    position: absolute; top: -10%; right: -6%;
    width: 46vw; height: 46vw; max-width: 680px; max-height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(151,174,50,.3), transparent 66%);
    filter: blur(10px);
}

.hero__inn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: center;
    gap: var(--r7);
    padding-block: var(--r7);
}

/* --- Venstre: budskap --- */
.hero__tekst { max-width: 620px; }

.puls {
    display: inline-flex; align-items: center; gap: var(--r2);
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(190,60,42,.22);
    backdrop-filter: blur(8px);
    color: var(--rod);
    font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    padding: 7px 16px; border-radius: 100px;
    margin-bottom: var(--r4);
}
.puls i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--rod);
    animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

.hero h1 {
    font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -.028em;
    margin-bottom: var(--r4);
}

.hero__ingress {
    font-size: clamp(1rem, .95rem + .3vw, 1.18rem);
    line-height: 1.6;
    color: var(--tekst-svak);
    max-width: 44ch;
    margin-bottom: var(--r5);
}

.knapp--stor { padding: 17px 34px; font-size: 1rem; }
.knapp--primar.knapp--stor svg { width: 19px; height: 19px; transition: transform var(--fart); }
.knapp--primar.knapp--stor:hover svg { transform: translateX(4px); }
.knapp--glass {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(10px);
    color: var(--navy);
    border-color: rgba(20,20,52,.14);
}
.knapp--glass:hover { background: var(--hvit); border-color: var(--navy); }

.hero__bevis {
    display: flex; flex-wrap: wrap; gap: var(--r6);
    list-style: none; margin: var(--r6) 0 0; padding: var(--r5) 0 0;
    border-top: 1px solid rgba(20,20,52,.1);
}
.hero__bevis li { display: grid; gap: 1px; }
.hero__bevis strong {
    font-family: var(--display); font-size: 1.25rem; font-weight: 900;
    color: var(--navy); letter-spacing: -.02em;
}
.hero__bevis span { font-size: .8rem; color: var(--tekst-svak); }

/* --- Høyre: roterende tilbudskort --- */
.tilbud { position: relative; justify-self: end; width: 100%; max-width: 380px; }

.tilbudskort {
    position: relative;
    display: grid; justify-items: start;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: var(--radius-xl);
    padding: var(--r6) var(--r5) var(--r5);
    box-shadow: 0 32px 64px -20px rgba(20,20,52,.3), 0 2px 6px rgba(20,20,52,.06);
    animation: kortinn .45s cubic-bezier(.2,.7,.3,1);
}
@keyframes kortinn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.tilbudskort__flagg {
    position: absolute; top: calc(var(--r4) * -1); left: var(--r5);
    background: var(--rod); color: var(--tekst-hvit);
    font-size: .76rem; font-weight: 700; letter-spacing: .02em;
    padding: 8px 16px; border-radius: 100px;
    box-shadow: 0 8px 20px rgba(190,60,42,.35);
}
.tilbudskort__flagg--gave { background: var(--navy); box-shadow: 0 8px 20px rgba(20,20,52,.3); }

.tilbudskort__bilde {
    width: 100%; aspect-ratio: 4 / 3;
    border-radius: var(--radius-l);
    overflow: hidden;
    background: var(--sand);
    margin-bottom: var(--r4);
}
.tilbudskort__bilde img {
    width: 100%; height: 100%; object-fit: contain;
    padding: 10px;
    transition: transform 500ms cubic-bezier(.2,.7,.3,1);
}
.tilbudskort:hover .tilbudskort__bilde img { transform: scale(1.04); }

.tilbudskort__merke {
    font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gronn-dyp);
    margin-bottom: 4px;
}
.tilbudskort__navn {
    font-family: var(--display); font-size: 1.22rem; font-weight: 700;
    line-height: 1.25; color: var(--navy);
    margin: 0 0 6px;
}
.tilbudskort__usp { font-size: .82rem; color: var(--tekst-svak); margin-bottom: var(--r4); }

.tilbudskort__pris { display: flex; align-items: baseline; gap: var(--r3); margin-bottom: var(--r4); }
.tilbudskort__pris s { font-size: .95rem; color: var(--tekst-svak); }
.tilbudskort__pris strong {
    font-family: var(--display); font-size: 2rem; font-weight: 900;
    color: var(--navy); letter-spacing: -.02em;
}

.tilbudskort .knapp--kjop { width: 100%; }

.tilbudskort__fot {
    display: flex; align-items: center; gap: 7px;
    font-size: .76rem; color: var(--tekst-svak);
    margin: var(--r3) 0 0;
}
.lagerprikk { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lagerprikk.er-paa { background: var(--gronn); }
.lagerprikk.er-faa { background: var(--gull); }

/* Karusellstyring */
.karusell__styring {
    display: flex; align-items: center; justify-content: center; gap: var(--r3);
    margin-top: var(--r5);
}
.kpil {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.8); backdrop-filter: blur(8px);
    border: 1px solid rgba(20,20,52,.1); color: var(--navy);
    transition: border-color var(--fart), background var(--fart), transform var(--fart);
}
.kpil:hover { border-color: var(--navy); background: var(--hvit); transform: scale(1.06); }
.prikker { display: flex; gap: var(--r2); }
.prikk {
    width: 9px; height: 9px; padding: 0;
    border: 0; border-radius: 100px;
    background: rgba(20,20,52,.22);
    transition: width var(--fart), background var(--fart);
}
.prikk.er-aktiv { width: 30px; background: var(--gronn-dyp); }

/* --- Tillitsbånd --- */
.tillit { background: var(--navy); color: rgba(255,255,255,.78); }
.tillit__inn {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--r5);
    padding-block: var(--r6);
}
.tillit__punkt { display: flex; gap: var(--r3); align-items: flex-start; }
.tillit__punkt svg { width: 26px; height: 26px; color: var(--gronn); margin-top: 2px; }
.tillit__punkt strong { display: block; color: var(--tekst-hvit); font-size: .95rem; font-weight: 600; }
.tillit__punkt span { font-size: .82rem; line-height: 1.5; display: block; }

/* Lave laptopskjermer: strammer heroen saa alt fortsatt ligger over fold */
@media (min-width: 1025px) and (max-height: 920px) {
    .hero__inn { padding-block: var(--r6); gap: var(--r6); }
    .hero h1 { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.4rem); }
    .hero__bevis { margin-top: var(--r5); padding-top: var(--r4); }
}
@media (min-width: 1025px) and (max-height: 800px) {
    .hero__inn { padding-block: var(--r5); }
    .hero__ingress { margin-bottom: var(--r4); }
    .hero__bevis { margin-top: var(--r4); padding-top: var(--r3); gap: var(--r5); }

    /* Tilbudskortet er det hoyeste elementet. Her komprimeres det slik at
       bilde, pris og kjoepsknapp fortsatt ligger over fold. */
    .tilbudskort { padding: var(--r5) var(--r4) var(--r4); }
    .tilbudskort__bilde { aspect-ratio: 2 / 1; margin-bottom: var(--r3); }
    .tilbudskort__usp { display: none; }
    .tilbudskort__pris { margin-bottom: var(--r3); }
    .tilbudskort__pris strong { font-size: 1.6rem; }
    .tilbudskort__navn { font-size: 1.1rem; }
    .karusell__styring { margin-top: var(--r3); }
    .kpil { width: 34px; height: 34px; }
}

/* ---------- 8. Seksjonsrytme -------------------------------------------- */
.seksjon { padding-block: var(--r9); }
.seksjon--kat { padding-bottom: var(--r8); }
.seksjon--salg { background: var(--hvit); border-block: 1px solid var(--kant); }

.seksjon__topp {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--r6); margin-bottom: var(--r7);
}
.seksjon__topp h2 { margin-bottom: 0; }
.seksjon__ingress { color: var(--tekst-svak); max-width: 52ch; margin-top: var(--r3); margin-bottom: 0; }

/* ---------- 9. Kategorier ------------------------------------------------ */
.kat-rutenett {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--r5);
}
.kat {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: var(--radius-l);
    padding: var(--r5);
    overflow: hidden;
    transition: transform var(--fart), box-shadow var(--fart), border-color var(--fart);
}
.kat::after {
    content: ''; position: absolute; inset: auto -40% -45% auto;
    width: 220px; height: 220px; border-radius: 50%;
    background: var(--gronn-lys);
    opacity: 0; transition: opacity var(--fart);
}
.kat:hover { transform: translateY(-5px); box-shadow: var(--skygge-m); border-color: transparent; }
.kat:hover::after { opacity: 1; }
.kat > * { position: relative; z-index: 1; }
.kat img {
    width: 104px; height: 104px; object-fit: cover;
    background: var(--sand);
    border-radius: var(--radius-m);
    margin-bottom: var(--r4);
    transition: transform var(--fart);
}
.kat:hover img { transform: scale(1.07) rotate(-2deg); }
.kat h3 { margin-bottom: 4px; }
.kat p { font-size: .875rem; color: var(--tekst-svak); margin-bottom: var(--r4); }
.kat__fra {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .8rem; font-weight: 600; color: var(--gronn-dyp);
}
.kat__fra svg { width: 16px; height: 16px; }

.kat--alle {
    background: var(--navy);
    border-color: var(--navy);
    justify-content: center;
}
.kat--alle::after { background: rgba(151,174,50,.3); }
.kat--alle h3 { color: var(--tekst-hvit); }
.kat--alle p { color: rgba(255,255,255,.7); }
.kat--alle .kat__fra { color: var(--gronn); margin-top: 0; }

/* ---------- 10. Produktkort ---------------------------------------------- */
.prod-rutenett {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--r5);
}
.prod {
    display: flex; flex-direction: column;
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: var(--radius-l);
    overflow: hidden;
    transition: transform var(--fart), box-shadow var(--fart), border-color var(--fart);
}
.prod:hover { transform: translateY(-5px); box-shadow: var(--skygge-m); border-color: transparent; }

.prod__bilde {
    position: relative;
    aspect-ratio: 1;
    background: var(--sand);
    display: grid; place-items: center;
    overflow: hidden;
}
.prod__bilde img {
    width: 84%; height: 84%; object-fit: contain;
    transition: transform 420ms cubic-bezier(.2,.7,.3,1);
}
.prod:hover .prod__bilde img { transform: scale(1.06); }

.flagg {
    position: absolute; top: var(--r3); left: var(--r3); z-index: 2;
    padding: 5px 12px; border-radius: 100px;
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
}
.flagg--tilbud   { background: var(--rod);   color: var(--tekst-hvit); }
.flagg--gave     { background: var(--navy);  color: var(--tekst-hvit); }
.flagg--populaer { background: var(--gull);  color: var(--tekst-hvit); position: static; display: inline-block; margin-bottom: var(--r2); }

.hjerte {
    position: absolute; top: var(--r3); right: var(--r3); z-index: 2;
    display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.92); border: 0; color: var(--navy);
    opacity: 0; transform: translateY(-6px);
    transition: opacity var(--fart), transform var(--fart), color var(--fart);
}
.prod:hover .hjerte, .hjerte:focus-visible { opacity: 1; transform: none; }
.hjerte:hover { color: var(--rod); }

.prod__kropp { display: flex; flex-direction: column; flex: 1; padding: var(--r5); }
.prod__merke {
    font-size: .72rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--tekst-svak);
    margin-bottom: 6px;
}
.prod__kropp h2,
.prod__kropp h3 { font-size: 1.05rem; line-height: 1.35; margin-bottom: var(--r2); font-family: var(--display); font-weight: 700; color: var(--navy); margin-top: 0; }
.prod__kropp h2 a:hover,
.prod__kropp h3 a:hover { color: var(--gronn-dyp); }
.prod__usp { font-size: .82rem; color: var(--tekst-svak); margin-bottom: var(--r4); }

.prod__pris { display: flex; align-items: baseline; gap: var(--r2); margin: auto 0 var(--r2); }
.prod__pris .gammel { font-size: .9rem; color: var(--tekst-svak); text-decoration: line-through; }
.prod__pris .ny { font-family: var(--display); font-size: 1.4rem; font-weight: 900; color: var(--navy); }

.prod__lager { display: flex; align-items: center; gap: 7px; font-size: .8rem; margin-bottom: var(--r4); }
.prod__lager::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.prod__lager.er-paa  { color: var(--gronn-dyp); }
.prod__lager.er-paa::before  { background: var(--gronn); }
.prod__lager.er-faa  { color: var(--gull); }
.prod__lager.er-faa::before  { background: var(--gull); }

.prod__varianter { display: flex; align-items: center; gap: var(--r2); font-size: .8rem; color: var(--tekst-svak); margin-bottom: var(--r4); }
.swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--f); border: 1px solid rgba(0,0,0,.12); }

.knapp--kjop { width: 100%; background: var(--navy); color: var(--tekst-hvit); border-radius: 100px; padding: 13px 20px; }
.knapp--kjop:hover { background: var(--gronn); color: var(--navy); }

/* ---------- 11. Veiviser (AEO-inngang) ----------------------------------- */
.veiviser {
    background:
        radial-gradient(circle at 12% 20%, rgba(151,174,50,.28), transparent 52%),
        var(--navy);
    color: rgba(255,255,255,.8);
}
.veiviser__inn {
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: var(--r8); align-items: center;
    padding-block: var(--r9);
}
.veiviser h2 { color: var(--tekst-hvit); }
.veiviser p { max-width: 52ch; }
.veiviser .knapperad { margin-top: var(--r6); }
.veiviser__fot { margin-top: var(--r4) !important; font-size: .82rem; color: rgba(255,255,255,.55); }

.veiviser__steg { display: grid; gap: var(--r3); }
.steg {
    display: flex; align-items: center; gap: var(--r4);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-m);
    padding: var(--r4) var(--r5);
    font-size: .95rem; color: rgba(255,255,255,.75);
}
.steg span {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.12);
    font-size: .82rem; font-weight: 600; color: var(--tekst-hvit);
}
.steg.er-aktiv { background: var(--gronn); border-color: var(--gronn); color: var(--navy); font-weight: 600; }
.steg.er-aktiv span { background: rgba(20,20,52,.18); color: var(--navy); }
.steg--svar { background: transparent; border-style: dashed; color: rgba(255,255,255,.6); }
.steg--svar strong { color: var(--tekst-hvit); margin-right: 6px; }

/* ---------- 12. Merker --------------------------------------------------- */
/* Ligger rett under heroen: sosialt bevis foer garantiene. */
.merker {
    background: var(--krem);
    border-bottom: 1px solid var(--kant);
    padding-block: var(--r6) var(--r7);
}
.merker__tittel {
    text-align: center; font-size: .72rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--tekst-svak);
    margin-bottom: var(--r5);
}
.merker__liste {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--r4) var(--r7);
    list-style: none; margin: 0; padding: 0;
}
.merker__liste a {
    display: flex; align-items: center;
    height: 56px;
    transition: opacity var(--fart), filter var(--fart);
}

/* Logofilene har hvit bakgrunn, ikke gjennomsiktig. multiply fjerner den
   mot den lyse flaten uten at vi maa redigere bildene. */
.merker__liste img {
    max-height: 56px; width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: grayscale(1);
    opacity: .5;
    transition: filter var(--fart), opacity var(--fart);
}
.merker__liste a:hover img { filter: none; opacity: 1; }

/* Merker uten logofil vises som ordmerke i samme optiske stoerrelse */
.merker__ord a {
    font-family: var(--display); font-size: 1.3rem; font-weight: 700;
    letter-spacing: -.01em;
    color: var(--navy); opacity: .42;
}
.merker__ord a:hover { opacity: 1; color: var(--gronn-dyp); }

/* ---------- 13. Hvorfor Kakle -------------------------------------------- */
.hvorfor { padding-block: var(--r9); }
.hvorfor__inn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r9); align-items: center; }

.hvorfor__bilde { position: relative; }
.hvorfor__bilde img {
    width: 100%; aspect-ratio: 4/5; object-fit: cover;
    border-radius: var(--radius-xl) 180px var(--radius-xl) var(--radius-xl);
}
.sitat {
    position: absolute; right: -24px; bottom: 40px;
    max-width: 320px;
    background: var(--hvit);
    border-radius: var(--radius-l);
    padding: var(--r5);
    box-shadow: var(--skygge-l);
}
.sitat p {
    font-family: var(--display); font-size: 1.02rem; font-style: italic;
    line-height: 1.5; color: var(--navy); margin-bottom: var(--r3);
}
.sitat span { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gronn-dyp); }

.fordeler { list-style: none; margin: var(--r6) 0; padding: 0; display: grid; gap: var(--r5); }
.fordeler li { display: flex; gap: var(--r4); }
.fordeler svg {
    width: 26px; height: 26px; padding: 5px;
    border-radius: 50%; background: var(--gronn-lys); color: var(--gronn-dyp);
    stroke-width: 3; margin-top: 2px;
}
.fordeler strong { display: block; color: var(--navy); font-size: 1rem; }
.fordeler span { font-size: .9rem; color: var(--tekst-svak); line-height: 1.55; }

/* ---------- 14. Sykurs ---------------------------------------------------- */
.seksjon--kurs { background: var(--hvit); border-block: 1px solid var(--kant); }
.kurs-rutenett { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--r5); }

.kurs {
    display: flex; flex-direction: column;
    background: var(--krem);
    border: 1px solid var(--kant);
    border-radius: var(--radius-l);
    padding: var(--r5);
    transition: transform var(--fart), box-shadow var(--fart);
}
.kurs:hover { transform: translateY(-4px); box-shadow: var(--skygge-m); }
.kurs--fremhevet { background: var(--gronn-lys); border-color: var(--gronn); }

.kurs__dato {
    display: inline-grid; place-items: center;
    width: 62px; padding: var(--r2) 0;
    background: var(--navy); color: var(--tekst-hvit);
    border-radius: var(--radius-m);
    margin-bottom: var(--r4); line-height: 1.1;
}
.kurs__dato .dag { font-family: var(--display); font-size: 1.5rem; font-weight: 900; }
.kurs__dato .mnd { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }

.kurs__kropp { flex: 1; }
.kurs__kropp h3 { font-size: 1.1rem; margin-bottom: var(--r3); }
.kurs__fakta { list-style: none; margin: 0 0 var(--r3); padding: 0; display: grid; gap: 6px; }
.kurs__fakta li { display: flex; align-items: center; gap: var(--r2); font-size: .85rem; color: var(--tekst-svak); }
.kurs__fakta svg { width: 16px; height: 16px; }

.kurs__plasser { font-size: .8rem; font-weight: 600; margin-bottom: var(--r5); }
.kurs__plasser.er-paa  { color: var(--gronn-dyp); }
.kurs__plasser.er-faa  { color: var(--gull); }
.kurs__plasser.er-fullt{ color: var(--rod); }

.kurs__fot { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); padding-top: var(--r4); border-top: 1px solid var(--kant); }
.kurs__pris { font-family: var(--display); font-size: 1.2rem; font-weight: 900; color: var(--navy); }

/* ---------- 15. Gavekort -------------------------------------------------- */
.gavekort { padding-block: var(--r9); }
.gavekort__inn {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--r8); align-items: center;
    background: linear-gradient(135deg, var(--sand), var(--gronn-lys));
    border-radius: var(--radius-xl);
    padding: var(--r8);
}
.gavekort__belop { display: flex; flex-wrap: wrap; gap: var(--r2); list-style: none; margin: var(--r6) 0 0; padding: 0; }
.gavekort__belop li {
    background: rgba(255,255,255,.75);
    border: 1px solid var(--kant);
    border-radius: 100px;
    padding: 7px 16px;
    font-size: .85rem; font-weight: 600; color: var(--navy);
}

.gavekort__kort { display: grid; place-items: center; }
.gkort {
    position: relative;
    width: 100%; max-width: 380px; aspect-ratio: 1.6;
    background: linear-gradient(145deg, var(--navy), var(--navy-myk));
    border-radius: var(--radius-l);
    box-shadow: var(--skygge-l);
    padding: var(--r6);
    display: flex; flex-direction: column; justify-content: space-between;
    color: var(--tekst-hvit);
    transform: rotate(-4deg);
    transition: transform var(--fart);
    overflow: hidden;
}
.gkort::after {
    content: ''; position: absolute; inset: auto -30% -60% auto;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(151,174,50,.45), transparent 70%);
}
.gkort:hover { transform: rotate(-1deg) scale(1.02); }
.gkort__logo { font-family: var(--display); font-size: 1.6rem; font-weight: 900; color: var(--gronn); }
.gkort__tekst { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.gkort__sum { font-family: var(--display); font-size: 2.1rem; font-weight: 900; position: relative; }

/* ---------- 16. FAQ (AEO) ------------------------------------------------- */
.seksjon--faq { background: var(--hvit); border-block: 1px solid var(--kant); }
.faq__wrap { display: grid; grid-template-columns: 360px 1fr; gap: var(--r9); align-items: start; }
.faq__topp { position: sticky; top: 160px; }
.faq__topp .lenkepil { margin-top: var(--r5); }

.faq { display: grid; gap: var(--r3); }
.faq details {
    background: var(--krem);
    border: 1px solid var(--kant);
    border-radius: var(--radius-m);
    transition: border-color var(--fart), box-shadow var(--fart);
}
.faq details[open] { border-color: var(--gronn); box-shadow: var(--skygge-s); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--r4);
    list-style: none; cursor: pointer;
    padding: var(--r5);
    font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; flex: none;
    width: 13px; height: 13px;
    border-right: 2px solid var(--gronn-dyp);
    border-bottom: 2px solid var(--gronn-dyp);
    transform: rotate(45deg) translate(-3px,-3px);
    transition: transform var(--fart);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px,-3px); }
.faq__svar { padding: 0 var(--r5) var(--r5); color: var(--tekst-svak); font-size: .95rem; }
.faq__svar a { color: var(--gronn-dyp); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 17. Inspirasjon ----------------------------------------------- */
.innhold-rutenett { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--r5); }
.innlegg {
    position: relative;
    display: block;
    border-radius: var(--radius-l);
    overflow: hidden;
    min-height: 340px;
    background: var(--navy);
}
.innlegg img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: .72;
    transition: transform 500ms cubic-bezier(.2,.7,.3,1), opacity var(--fart);
}
.innlegg:hover img { transform: scale(1.06); opacity: .55; }
.innlegg__tekst {
    position: relative; z-index: 1;
    height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--r6);
    background: linear-gradient(to top, rgba(20,20,52,.92) 10%, rgba(20,20,52,.1) 70%);
    color: var(--tekst-hvit);
}
.innlegg__kat {
    align-self: flex-start;
    background: var(--gronn); color: var(--navy);
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: 4px 11px; border-radius: 100px; margin-bottom: var(--r3);
}
.innlegg h3 { color: var(--tekst-hvit); font-size: 1.3rem; margin-bottom: var(--r2); }
.innlegg p { font-size: .9rem; color: rgba(255,255,255,.78); }

.spill {
    position: absolute; top: 50%; left: 50%; z-index: 1;
    transform: translate(-50%,-50%);
    display: grid; place-items: center;
    width: 70px; height: 70px; border-radius: 50%;
    background: rgba(255,255,255,.92); color: var(--navy);
    transition: transform var(--fart), background var(--fart);
}
.spill svg { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.innlegg--video:hover .spill { transform: translate(-50%,-50%) scale(1.1); background: var(--gronn); }

/* ---------- 18. Nyhetsbrev ------------------------------------------------ */
.nyhetsbrev {
    background: var(--navy);
    color: rgba(255,255,255,.78);
}
.nyhetsbrev__inn {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--r8); align-items: center;
    padding-block: var(--r8);
}
.nyhetsbrev h2 { color: var(--tekst-hvit); }
.nyhetsbrev p { max-width: 46ch; margin-bottom: 0; }

.nyhetsbrev__skjema { display: flex; flex-wrap: wrap; gap: var(--r3); }
.nyhetsbrev__skjema input {
    flex: 1; min-width: 240px;
    border: 1.5px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    border-radius: 100px;
    padding: 15px var(--r5);
    font: inherit; font-size: .95rem; color: var(--tekst-hvit);
    transition: border-color var(--fart), background var(--fart);
}
.nyhetsbrev__skjema input::placeholder { color: rgba(255,255,255,.45); }
.nyhetsbrev__skjema input:focus { outline: none; border-color: var(--gronn); background: rgba(255,255,255,.12); }
.nyhetsbrev__vilkar { flex-basis: 100%; font-size: .78rem; color: rgba(255,255,255,.5); margin: 0; }
.nyhetsbrev__vilkar a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 19. Footer ---------------------------------------------------- */
.bunn { background: var(--sand); color: var(--tekst); }

.bunn__lofter {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--r5);
    padding-block: var(--r7);
    border-bottom: 1px solid var(--sand-mork);
}
.bl strong {
    display: block; font-size: .72rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gronn-dyp); margin-bottom: var(--r2);
}
.bl p { font-size: .85rem; color: var(--tekst-svak); line-height: 1.55; }

.bunn__inn {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--r7);
    padding-block: var(--r8);
}
.bunn__merke img { margin-bottom: var(--r4); }
.bunn__merke p { font-size: .88rem; color: var(--tekst-svak); max-width: 34ch; }
.bunn__kontakt a { font-weight: 600; color: var(--navy); }
.bunn__kontakt a:hover { color: var(--gronn-dyp); }

.sosiale { display: flex; gap: var(--r2); margin-top: var(--r5); }
.sosiale a {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--hvit); color: var(--navy);
    transition: background var(--fart), color var(--fart), transform var(--fart);
}
.sosiale a:hover { background: var(--navy); color: var(--tekst-hvit); transform: translateY(-2px); }

.bunn__meny h2,
.bunn__meny h3 {
    font-family: var(--ui);
    font-size: .72rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--tekst-svak); margin-bottom: var(--r4);
}
.bunn__meny ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2); }
.bunn__meny a { font-size: .9rem; color: var(--tekst); transition: color var(--fart), padding-left var(--fart); }
.bunn__meny a:hover { color: var(--gronn-dyp); padding-left: 4px; }

.bunn__fot {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--r4);
    padding-block: var(--r5);
    border-top: 1px solid var(--sand-mork);
    font-size: .82rem; color: var(--tekst-svak);
}
.bunn__fot p { margin: 0; }
.betaling { display: flex; align-items: center; gap: var(--r3); }
.betaling img { height: 22px; width: auto; }

/* ==========================================================================
   20. Responsivt
   ========================================================================== */

@media (max-width: 1200px) {
    .kat-rutenett,
    .prod-rutenett,
    .kurs-rutenett { grid-template-columns: repeat(3, 1fr); }
    .mega__inn { grid-template-columns: minmax(0,1fr) 260px; gap: var(--r6); }
    .mega__kolonner { gap: var(--r5); }
    .mega__rader { grid-template-columns: 1fr; }
    .hero__inn { grid-template-columns: minmax(0,1fr) 340px; gap: var(--r6); }
    .bunn__lofter { grid-template-columns: repeat(3, 1fr); }
    .innhold-rutenett { grid-template-columns: 1fr 1fr; }
    .innlegg--video { grid-column: 1 / -1; min-height: 300px; }
}

@media (max-width: 1024px) {
    /* Toppband 40 + header 132. JS maaler og overstyrer med faktisk verdi. */
    :root { --gutter: 20px; --topp-h: 172px; }

    .topp__inn { flex-wrap: wrap; min-height: 72px; gap: var(--r4); }
    .burger { display: flex; }
    .logo { margin-right: auto; }
    .logo img { height: 44px; }
    .topp.er-kompakt .logo img { height: 38px; }

    /* Headeren holdes lav: bare konto og kurv. Resten ligger i menyen. */
    .ikonlenke--sekundar { display: none; }
    .kun-mobil { display: block; }
    .toppband__hoyre a:first-child { display: none; }
    .sok { order: 10; flex-basis: 100%; max-width: none; margin-bottom: var(--r4); }
    .ikonlenke span { display: none; }

    /* Mobilmeny: skjult panel som folder ut */
    .hovedmeny { display: none; border-top: 1px solid var(--kant); background: var(--hvit); }
    .hovedmeny.er-apen { display: block; max-height: 70vh; overflow-y: auto; }
    .hovedmeny__liste { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--r3); }
    .hovedmeny__liste > li > a { padding: 14px 0; border-bottom: 1px solid var(--kant); }
    .hovedmeny__liste > li:last-child > a { border-bottom: 0; }

    /* Undermenyer er lukket til brukeren apner dem */
    .har-mega { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--kant); }
    .har-mega > a { flex: 1; border-bottom: 0 !important; }
    .har-mega .pil { display: none; }
    .utvid {
        display: grid; place-items: center;
        width: 44px; height: 44px; flex: none;
        background: none; border: 0; color: var(--navy);
    }
    .utvid svg { transition: transform var(--fart); }
    .utvid[aria-expanded="true"] svg { transform: rotate(180deg); }

    .mega {
        position: static; flex-basis: 100%;
        opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; background: var(--krem);
        display: none;
    }
    .har-mega.er-apen .mega { display: block; }
    .har-mega:hover .mega, .har-mega:focus-within .mega { display: none; }
    .har-mega.er-apen:hover .mega, .har-mega.er-apen:focus-within .mega { display: block; }
    .mega__inn { grid-template-columns: 1fr; gap: var(--r5); padding-block: var(--r5); }
    .mega__kolonner { grid-template-columns: 1fr 1fr !important; gap: var(--r5); }
    .mega__rader { grid-template-columns: 1fr; }
    .mega__panel, .mega__fot { display: none; }
    .mega::after { display: none; }

    /* Hero paa mobil: fotoet dekker foerste skjerm som bakgrunn, budskap og
       CTA ligger nederst paa samme skjerm. Tilbudskortet kommer rett under. */
    .hero { min-height: 0; display: block; position: relative; }
    .hero__media {
        position: absolute; inset: 0 0 auto;
        height: calc(100vh - var(--topp-h));
        height: calc(100svh - var(--topp-h));
    }
    .hero__foto { object-position: 72% center; }
    .hero__slor {
        background: linear-gradient(to bottom,
            rgba(251,249,244,.18) 0%,
            rgba(251,249,244,.34) 20%,
            rgba(251,249,244,.9) 36%,
            var(--krem) 46%);
    }
    .hero__glod { display: none; }
    .hero__inn {
        display: block;
        padding-block: 0 var(--r7);
    }
    .hero__tekst {
        max-width: none;
        min-height: calc(100vh - var(--topp-h));
        min-height: calc(100svh - var(--topp-h));
        display: flex; flex-direction: column; justify-content: flex-end;
        padding-bottom: var(--r5);
    }
    .hero__bevis { margin-top: var(--r5); }
    .tilbud { justify-self: stretch; max-width: 420px; margin: var(--r7) auto 0; }

    .tillit__inn { grid-template-columns: 1fr 1fr; }

    .veiviser__inn,
    .hvorfor__inn,
    .gavekort__inn,
    .nyhetsbrev__inn,
    .faq__wrap { grid-template-columns: 1fr; gap: var(--r7); }
    .faq__topp { position: static; }
    .hvorfor__bilde img { aspect-ratio: 16/10; }
    .sitat { position: static; max-width: none; margin-top: calc(var(--r5) * -1); margin-inline: var(--r5); }
    .gavekort__inn { padding: var(--r6); }
    .gkort { transform: none; }

    .bunn__inn { grid-template-columns: 1fr 1fr; gap: var(--r6); }
}

@media (max-width: 760px) {
    :root { --r9: 64px; --r8: 48px; }

    .seksjon { padding-block: var(--r9); }
    .seksjon__topp { flex-direction: column; align-items: flex-start; gap: var(--r4); margin-bottom: var(--r6); }

    .kat-rutenett { grid-template-columns: 1fr 1fr; gap: var(--r3); }
    .kat { padding: var(--r4); }
    .kat img { width: 70px; height: 70px; }

    /* Produkter og kurs ruller horisontalt – unngår uendelig scroll */
    .prod-rutenett,
    .kurs-rutenett {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(250px, 72vw);
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--r3);
        padding-bottom: var(--r4);
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        scrollbar-width: thin;
    }
    .prod, .kurs { scroll-snap-align: start; }
    .hjerte { opacity: 1; transform: none; }

    .tillit__inn { grid-template-columns: 1fr; gap: var(--r4); }
    .innhold-rutenett { grid-template-columns: 1fr; }
    .innlegg { min-height: 260px; }

    .bunn__lofter { grid-template-columns: 1fr 1fr; }
    .bunn__inn { grid-template-columns: 1fr; }
    .bunn__fot { justify-content: center; text-align: center; }

    .hero h1 { font-size: clamp(2.1rem, 1.1rem + 3.6vw, 2.8rem); }
    .hero__ingress { font-size: .98rem; margin-bottom: var(--r4); }
    .hero__bevis { gap: var(--r3) var(--r5); margin-top: var(--r4); padding-top: var(--r4); }
    .hero__bevis li { flex: 1 1 40%; }
    .hero__bevis strong { font-size: 1.1rem; }

    /* Én tydelig hovedknapp paa mobil. Den sekundaere blir en lenke, slik at
       hele heroen faar plass over fold. */
    .hero .knapperad { flex-direction: column; align-items: flex-start; gap: var(--r3); }
    .hero .knapp--primar.knapp--stor { width: 100%; }
    .hero .knapp--glass {
        background: none; border: 0; padding: 0;
        color: var(--navy); font-size: .95rem;
        text-decoration: underline; text-underline-offset: 4px;
        text-decoration-color: var(--gronn);
        text-decoration-thickness: 2px;
    }
    .hero .knapp--glass:hover { background: none; color: var(--gronn-dyp); }
    .tilbudskort__bilde { aspect-ratio: 16 / 10; }
    .merker__liste { gap: var(--r4) var(--r5); }
    .merker__liste li { font-size: 1.1rem; }
}

@media (max-width: 420px) {
    .bunn__lofter { grid-template-columns: 1fr; }
    .knapperad .knapp { flex: 1 1 100%; }
    .sok button { padding: 11px 16px; }
}

/* ---------- 21. Utskrift -------------------------------------------------- */
@media print {
    .topp, .toppband, .veiviser, .nyhetsbrev, .karusell__styring { display: none; }
    body { background: #fff; }
}

/* ==========================================================================
   22. WooCommerce-priser
   Vi skriver ikke prismarkupen selv lenger, men bruker get_price_html() slik
   at Kakles egen prisoverstyring og alt plugins hekter seg paa blir med.
   Da maa WooCommerces <del>/<ins> styles som vaart eget design.
   ========================================================================== */
.prod__pris { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--r2); margin: auto 0 var(--r2); }
.prod__pris del,
.tilbudskort__pris del,
.prisblokk__na del {
    font-size: .9rem; font-weight: 400; color: var(--tekst-svak);
    text-decoration: line-through;
    order: 1;
}
.prod__pris ins,
.tilbudskort__pris ins,
.prisblokk__na ins { text-decoration: none; order: 2; }

.prod__pris,
.prod__pris ins,
.prod__pris > .woocommerce-Price-amount {
    font-family: var(--display); font-size: 1.4rem; font-weight: 900; color: var(--navy);
}
.prod__pris del { font-family: var(--ui); }

.tilbudskort__pris { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--r3); margin-bottom: var(--r4); }
.tilbudskort__pris,
.tilbudskort__pris ins,
.tilbudskort__pris > .woocommerce-Price-amount {
    font-family: var(--display); font-size: 2rem; font-weight: 900;
    color: var(--navy); letter-spacing: -.02em;
}
.tilbudskort__pris del { font-family: var(--ui); font-size: .95rem; }

.prisblokk__na,
.prisblokk__na ins,
.prisblokk__na > .woocommerce-Price-amount {
    font-family: var(--display); font-size: 2.3rem; font-weight: 900;
    color: var(--navy); letter-spacing: -.025em; line-height: 1;
}
.prisblokk__na { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--r3); }
.prisblokk__na del { font-family: var(--ui); font-size: 1rem; }

.kjopslinje__pris del { display: none; }
.kjopslinje__pris ins { text-decoration: none; }

/* Woo legger "inkl. mva."-suffiks i egen span – vi har det allerede */
.prisblokk__na .woocommerce-Price-currencySymbol { font-size: .7em; }

/* Menylinja skal starte paa samme loddrette linje som logoen over.
   Lenkene har 16px sidepolstring for klikkflatens skyld, saa lista
   trekkes tilsvarende ut mot venstre. */
.hovedmeny__liste { margin-left: calc(var(--r4) * -1); }
@media (max-width: 1024px) {
    .hovedmeny__liste { margin-left: 0; }
}

/* Kurskort: tittelen er en lenke naar kurset er et produkt */
.kurs__kropp h3 a { color: inherit; }
.kurs__kropp h3 a:hover { color: var(--gronn-dyp); }
.kurs__pris del { display: none; }
.kurs__pris ins { text-decoration: none; }

/* Menylinja skal aldri stikke utenfor containeren. Faar den ikke plass,
   brytes den til linje to i stedet for aa flyte ut til hoyre. */
.hovedmeny__liste { flex-wrap: wrap; }
.hovedmeny__liste > li > a { padding-inline: var(--r3); }
.hovedmeny__liste { margin-left: calc(var(--r3) * -1); }
@media (max-width: 1024px) { .hovedmeny__liste { margin-left: 0; } }

/* Megameny: nivaa-1-punkter uten egne barn er selve lenkene.
   Kakles meny er to nivaaer dyp, saa dette er normaltilfellet. */
.mega__kolonner { grid-auto-rows: min-content; }
.mega__lenke {
    display: flex; align-items: center;
    padding: 11px var(--r4);
    border-radius: var(--radius-m);
    font-size: .95rem; font-weight: 500; color: var(--tekst);
    transition: background var(--fart), color var(--fart);
}
.mega__lenke:hover { background: var(--gronn-lys); color: var(--gronn-dyp); }
.mega__lenke + .mega__lenke { margin-top: 2px; }