:root {
    --sand-lys: #F4E1BA;
    --sand: #EABF8C;
    --terrakotta: #E49061;
    --okergul: #AF8451;
    --oliven: #777055;
    --morkbrun: #583533;
    --hvit: #FFFDF9;
    --tekst: #3B2523;
    --radius: 2px;
    --maks: 1180px;
}

/* Avenir der den finnes lokalt, ellers naermeste humanistiske grotesk */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--tekst);
    background: var(--hvit);
}

h1, h2, h3, h4 {
    font-family: "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    color: var(--morkbrun);
    line-height: 1.2;
    margin: 0 0 .6em;
    letter-spacing: .01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; }

p { margin: 0 0 1.1em; }

a { color: var(--morkbrun); text-decoration-color: var(--sand); text-underline-offset: 3px; }
a:hover { color: var(--terrakotta); }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--maks); margin: 0 auto; padding: 0 24px; }

.hopp-til {
    position: absolute; left: -9999px; top: 0; background: var(--morkbrun); color: #fff; padding: 10px 16px; z-index: 100;
}
.hopp-til:focus { left: 0; }

/* ---------- Header ---------- */
#site-header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255, 253, 249, .93);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(88, 53, 51, .12);
}

.topplinje {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding-top: 10px; padding-bottom: 10px;
}

/* Logoen har litt luft i selve bildefilen, så den flyttes 12 px til venstre
   for at symbolet skal stå optisk på linje med teksten under. */
.logo { margin-left: -12px; }
.logo img { width: 84px; height: auto; }

#hovedmeny ul {
    list-style: none; display: flex; gap: 26px; margin: 0; padding: 0;
}

#hovedmeny a {
    text-decoration: none;
    font-size: .82rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--oliven);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}

#hovedmeny a:hover, #hovedmeny a.aktiv { color: var(--morkbrun); border-bottom-color: var(--terrakotta); }

.meny-knapp {
    display: none; background: none; border: 0; cursor: pointer; padding: 10px; width: 46px;
}
.meny-knapp span { display: block; height: 2px; background: var(--morkbrun); margin: 5px 0; transition: .2s; }

/* ---------- Hero ---------- */
/* Todelt hero: sandfarget tekstflate til venstre, rent bilde til høyre.
   Bildet vises uten slør eller filter, så fargene får komme til sin rett.
   Bildet er lagt som et absolutt plassert element i høyre halvdel, slik at det
   fyller hele høyden - helt opp mot menyen og helt ned til neste seksjon. */
.hero {
    position: relative;
    min-height: 58vh;
    display: flex; align-items: center;
    background: var(--sand-lys);
    overflow: hidden;
}

.hero-bilde {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 50%;
}
.hero-bilde img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Teksten holder seg innenfor venstre halvdel, med samme venstremarg
   som logoen i headeren og innholdet i seksjonene under. */
.hero-rad {
    position: relative; z-index: 2;
    width: 100%;
    padding-top: 70px; padding-bottom: 70px;
}

.hero-tekst { width: 50%; padding-right: 40px; }

.hero h1 { margin-bottom: .5em; }
.hero p.ingress { max-width: 32em; font-size: 1.12rem; color: #4a2f2d; }

.stikkord {
    display: inline-block; letter-spacing: .22em; text-transform: uppercase;
    font-size: .74rem; color: var(--oliven); margin-bottom: 18px;
}

/* ---------- Knapper ---------- */
.knapp, button.knapp {
    display: inline-block;
    background: var(--morkbrun);
    color: var(--hvit);
    border: 1px solid var(--morkbrun);
    padding: 13px 30px;
    font: inherit;
    font-size: .84rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background .18s, color .18s, transform .18s;
}
.knapp:hover { background: var(--terrakotta); border-color: var(--terrakotta); color: #fff; transform: translateY(-1px); }

.knapp.lys { background: transparent; color: var(--morkbrun); }
.knapp.lys:hover { background: var(--morkbrun); color: var(--hvit); }

.knapperad { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* ---------- Seksjoner ---------- */
section { padding: 78px 0; }
section.tett { padding: 52px 0; }
section.sand { background: var(--sand-lys); }
section.mork { background: var(--morkbrun); color: var(--sand-lys); }
section.mork h1, section.mork h2, section.mork h3 { color: var(--sand-lys); }
section.mork a { color: var(--sand); }

.seksjonstopp { max-width: 44em; margin-bottom: 44px; }

.to-kolonner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}

.kort-rad {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}

.kort {
    background: var(--hvit);
    border: 1px solid rgba(88, 53, 51, .12);
    padding: 30px 26px;
    display: flex; flex-direction: column;
}
.kort h3 { color: var(--morkbrun); }
.kort p { color: #55403d; }
.kort .knapp { align-self: flex-start; margin-top: auto; }

/* ---------- Galleri / produkter ---------- */
.kategori-meny {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px;
}
.kategori-meny a {
    text-decoration: none; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid rgba(88, 53, 51, .25); padding: 9px 18px; color: var(--oliven);
}
.kategori-meny a.aktiv, .kategori-meny a:hover { background: var(--morkbrun); border-color: var(--morkbrun); color: var(--hvit); }

.galleri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.galleri figure { margin: 0; position: relative; overflow: hidden; background: var(--sand-lys); }
.galleri figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s ease; }
.galleri figure:hover img { transform: scale(1.04); }

/* Felles mal for alle produktkategorier.
   Litt ekstra luft til venstre for og under teksten under hvert bilde. */
.galleri figcaption {
    padding: 14px 18px 16px;
    font-size: .95rem;
    color: var(--morkbrun);
}

/* Undertekst under produkttittelen i oversikten */
.galleri figcaption .undertekst {
    display: block;
    margin-top: 3px;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--oliven);
}

/* Klikkbart produktbilde - knappen skal se ut som et rent bilde */
.produkt-bilde {
    display: block; width: 100%;
    padding: 0; margin: 0; border: 0;
    background: none; cursor: pointer;
    position: relative; overflow: hidden;
}
.produkt-bilde:focus-visible { outline: 2px solid var(--terrakotta); outline-offset: -2px; }

.produkt-hint {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px;
    background: linear-gradient(to top, rgba(59, 37, 35, .62), rgba(59, 37, 35, 0));
    color: var(--hvit);
    font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
    opacity: 0; transition: opacity .25s ease;
}
.produkt-bilde:hover .produkt-hint,
.produkt-bilde:focus-visible .produkt-hint { opacity: 1; }

/* Skjult datablokk som mater produktvinduet */
.produkt-data { display: none; }

.tom-melding {
    border: 1px dashed rgba(88, 53, 51, .3);
    padding: 34px; text-align: center; color: var(--oliven); background: var(--sand-lys);
}

/* ---------- Skjema ---------- */
.skjema { max-width: 620px; }
.skjema .felt { margin-bottom: 18px; }
.skjema label { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oliven); margin-bottom: 6px; }
.skjema input, .skjema textarea, .skjema select {
    width: 100%; padding: 12px 14px; font: inherit;
    border: 1px solid rgba(88, 53, 51, .25); background: var(--hvit); color: var(--tekst);
    border-radius: var(--radius);
}
.skjema input:focus, .skjema textarea:focus, .skjema select:focus { outline: 2px solid var(--terrakotta); outline-offset: 1px; }
.skjema textarea { min-height: 150px; resize: vertical; }
.skjema .cf-turnstile { margin: 18px 0; }
.skjema .personvern { font-size: .82rem; color: var(--oliven); }

/* honeypot */
.hp { position: absolute !important; left: -9999px !important; }

/* ---------- Modal / bestilling ---------- */
.modal-bakgrunn {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(59, 37, 35, .55);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
}
.modal-bakgrunn.apen { display: flex; }

.modal-boks {
    position: relative;
    background: var(--hvit);
    max-width: 620px; width: 100%;
    max-height: 88vh; overflow-y: auto;
    padding: 40px 38px 34px;
    box-shadow: 0 24px 60px rgba(59, 37, 35, .3);
    animation: modal-inn .22s ease-out;
}

@keyframes modal-inn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.modal-lukk {
    position: absolute; top: 12px; right: 12px;
    width: 40px; height: 40px;
    background: none; border: 0; cursor: pointer;
    font-size: 1.5rem; line-height: 1; color: var(--morkbrun);
}
.modal-lukk:hover { color: var(--terrakotta); }

.modal-produkt {
    display: flex; gap: 16px; align-items: center;
    background: var(--sand-lys); padding: 14px; margin-bottom: 22px;
}
.modal-produkt img { width: 78px; height: 78px; object-fit: cover; }
.modal-produkt strong { display: block; color: var(--morkbrun); }
.modal-produkt span { font-size: .9rem; color: var(--oliven); }

/* ---------- Produktvindu (lightbox) ---------- */
.produkt-modal { z-index: 80; }
.produkt-boks { max-width: 1020px; padding: 34px; }

.produkt-visning {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 34px;
    align-items: start;
}

.produkt-hovedbilde { position: relative; background: var(--sand-lys); }
.produkt-hovedbilde img {
    width: 100%; max-height: 62vh; object-fit: contain;
    background: var(--sand-lys);
}

.galleri-pil {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px;
    background: rgba(255, 253, 249, .88);
    border: 1px solid rgba(88, 53, 51, .16);
    color: var(--morkbrun);
    font-size: 1.5rem; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, color .18s;
}
.galleri-pil:hover { background: var(--morkbrun); color: var(--hvit); }
.galleri-pil.forrige { left: 10px; }
.galleri-pil.neste { right: 10px; }

.produkt-bildetekst {
    margin: 10px 0 0;
    font-size: .88rem; color: var(--oliven); font-style: italic;
}

.produkt-miniatyrer {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px;
}
.produkt-miniatyrer button {
    padding: 0; border: 2px solid transparent; background: none; cursor: pointer;
    width: 68px; height: 68px; overflow: hidden;
    opacity: .72; transition: opacity .18s, border-color .18s;
}
.produkt-miniatyrer button img { width: 100%; height: 100%; object-fit: cover; }
.produkt-miniatyrer button:hover { opacity: 1; }
.produkt-miniatyrer button.aktiv { opacity: 1; border-color: var(--terrakotta); }

.produkt-info h2 { margin-bottom: .3em; }

.produkt-undertekst {
    margin: 0 0 1.2em;
    color: var(--oliven);
    font-size: 1.02rem;
}

.produkt-beskrivelse { color: var(--tekst); }
.produkt-beskrivelse :first-child { margin-top: 0; }
.produkt-beskrivelse :last-child { margin-bottom: 0; }

.produkt-fakta { margin: 22px 0 26px; }
.produkt-fakta .fakta-rad {
    display: flex; gap: 14px;
    padding: 9px 0;
    border-top: 1px solid rgba(88, 53, 51, .12);
}
.produkt-fakta .fakta-rad:last-child { border-bottom: 1px solid rgba(88, 53, 51, .12); }
.produkt-fakta dt {
    flex: 0 0 96px;
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--oliven);
    padding-top: 2px;
}
.produkt-fakta dd { margin: 0; color: var(--morkbrun); }

/* ---------- Footer ---------- */
#site-footer { background: var(--morkbrun); color: var(--sand-lys); padding: 62px 0 26px; margin-top: 0; }
#site-footer h3 { color: var(--sand); font-size: .82rem; letter-spacing: .14em; }
#site-footer a { color: var(--sand-lys); text-decoration: none; }
#site-footer a:hover { color: var(--terrakotta); }
#site-footer ul { list-style: none; margin: 0; padding: 0; }
#site-footer li { margin-bottom: 7px; }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-merke img { width: 120px; }
.footer-merke p { color: var(--sand); font-size: .95rem; margin-top: 14px; }

.footer-bunn {
    border-top: 1px solid rgba(244, 225, 186, .18);
    margin-top: 46px; padding-top: 18px;
    font-size: .82rem; color: rgba(244, 225, 186, .7);
    display: flex; flex-wrap: wrap; gap: 8px 24px;
    justify-content: space-between; align-items: center;
}
.footer-bunn p { margin: 0; }
.footer-bunn a { color: rgba(244, 225, 186, .85); text-decoration: underline; text-underline-offset: 3px; }
.footer-bunn a:hover { color: var(--terrakotta); }

@media (max-width: 720px) {
    .footer-bunn { flex-direction: column; align-items: flex-start; }
}

/* Samtykke-avkrysning i skjemaer */
.skjema .samtykke {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 20px 0 18px;
}
.skjema .samtykke input[type="checkbox"] {
    width: auto; margin: 4px 0 0; flex: 0 0 auto;
}
.skjema .samtykke label {
    text-transform: none; letter-spacing: 0; font-size: .9rem;
    color: var(--tekst); margin: 0; line-height: 1.5;
}

/* ---------- Responsivt ---------- */
@media (max-width: 900px) {
    .to-kolonner { grid-template-columns: 1fr; gap: 32px; }
    .kort-rad { grid-template-columns: 1fr 1fr; }
    .galleri { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }

    /* Hero stables: bildet øverst, teksten under */
    .hero {
        display: block;
        min-height: 0;
    }
    .hero-bilde {
        position: static;
        width: 100%; height: 46vh;
    }
    .hero-rad { padding-top: 48px; padding-bottom: 54px; }
    .hero-tekst { width: 100%; padding-right: 0; }

    /* Produktvinduet stables i en kolonne: bilde over, tekst under */
    .produkt-boks { padding: 30px 24px 26px; }
    .produkt-visning { grid-template-columns: 1fr; gap: 26px; }
    .produkt-hovedbilde img { max-height: 46vh; }
}

@media (max-width: 720px) {
    .meny-knapp { display: block; }

    #hovedmeny {
        display: none;
        position: absolute; left: 0; right: 0; top: 100%;
        background: var(--hvit);
        border-bottom: 1px solid rgba(88, 53, 51, .12);
        padding: 12px 24px 22px;
    }
    #hovedmeny.apen { display: block; }
    #hovedmeny ul { flex-direction: column; gap: 0; }
    #hovedmeny li { border-bottom: 1px solid rgba(88, 53, 51, .08); }
    #hovedmeny a { display: block; padding: 14px 0; border-bottom: 0; }

    section { padding: 54px 0; }
    .kort-rad, .galleri { grid-template-columns: 1fr; }
    .modal-boks { padding: 34px 22px 26px; }

    /* Litt lavere bilde på mobil, så teksten kommer raskere til syne */
    .hero-bilde { height: 38vh; }
    .hero-rad { padding-top: 40px; padding-bottom: 46px; }

    /* Produktvinduet fyller nesten hele skjermen på mobil */
    .produkt-modal { padding: 12px; }
    .produkt-boks { padding: 30px 18px 24px; max-height: 92vh; }
    .produkt-hovedbilde img { max-height: 42vh; }

    /* Piler er unødvendige når man kan sveipe, men beholdes litt mindre */
    .galleri-pil { width: 36px; height: 36px; font-size: 1.25rem; }
    .galleri-pil.forrige { left: 6px; }
    .galleri-pil.neste { right: 6px; }

    .produkt-miniatyrer { gap: 6px; margin-top: 12px; }
    .produkt-miniatyrer button { width: 56px; height: 56px; }

    .produkt-fakta dt { flex: 0 0 78px; font-size: .74rem; }

    /* "Se mer"-hintet vises alltid på touch, siden hover ikke finnes */
    .produkt-hint { opacity: 1; }
}