/*
 * Lagerboks – felles topp og bunn på alle sider (Lagerboks_Ramme, 2.14.0).
 * Temaets topp og bunn skjules, og skriften settes til Inter på hele nettstedet.
 * Samme farger som landingssidene og veiviseren: mørkeblå #0b2239, handlingsblå #0077b6 (4,9:1 mot hvit).
 */

/* ── Skrift: «Use Any Font» setter Open Sans med !important på akkurat disse elementene ───────── */

html body,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body p,
html body blockquote,
html body li,
html body a {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

html {
    scroll-padding-top: 92px;
}

/* ── Temaets topp og bunn, og den flytende kurven på mobil, vises ikke lenger ─────────────────── */

body.lgbx-ramme .mk-header,
body.lgbx-ramme .mk-header-padding-wrapper,
body.lgbx-ramme #mk-footer,
body.lgbx-ramme #mk-footer-unfold-spacer,
body.lgbx-ramme .add-cart-responsive-state {
    display: none !important;
}

.lgbx-topp,
.lgbx-bunn {
    --lb-navy: #0b2239;
    --lb-ink: #111827;
    --lb-muted: #4b5563;
    --lb-line: #e3e8ef;
    --lb-bg: #f4f7fb;
    --lb-blue: #0077b6;
    --lb-blue-dark: #005f93;
    --lb-cyan: #00b0f0;
    -webkit-font-smoothing: antialiased;
    letter-spacing: normal;
    text-align: left;
}

.lgbx-topp *,
.lgbx-topp *::before,
.lgbx-topp *::after,
.lgbx-bunn *,
.lgbx-bunn *::before,
.lgbx-bunn *::after {
    box-sizing: border-box;
}

.lgbx-topp svg,
.lgbx-bunn svg {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lgbx-topp ul,
.lgbx-bunn ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lgbx-topp li,
.lgbx-bunn li {
    margin: 0;
    padding: 0;
    list-style: none;
}

a.lgbx-hopp {
    position: absolute;
    top: 8px;
    left: -9999px;
    z-index: 1001;
    padding: 12px 18px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(11, 34, 57, 0.2);
    color: #0b2239;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

a.lgbx-hopp:focus {
    left: 8px;
}

/* ── Toppen ──────────────────────────────────────────────────────────────────────────────────── */

/*
 * Toppen står fast øverst (position: fixed) med et tomt felt i samme høyde under seg. «sticky» virker
 * ikke her: temaet setter height: 100 % på body, så en sticky topp slipper taket etter én skjermhøyde.
 */
.lgbx-topp {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 400;
    border-bottom: 1px solid var(--lb-line);
    background: #fff;
    font-size: 15.5px;
    line-height: 1.3;
}

body.admin-bar .lgbx-topp {
    top: 32px;
}

.lgbx-topp-plass {
    height: 77px;
}

/* I veiviseren, kurven og kassen følger ikke toppen med nedover siden. */
.lgbx-topp.lgbx-topp--rolig,
body.admin-bar .lgbx-topp.lgbx-topp--rolig {
    position: relative;
    top: 0;
}

.lgbx-topp .lgbx-topp__rad {
    display: flex;
    align-items: center;
    gap: 24px;
    width: min(1280px, 100% - 40px);
    height: 76px;
    margin: 0 auto;
}

.lgbx-topp a.lgbx-topp__logo {
    display: flex;
    flex: none;
    align-items: center;
    height: 100%;
    margin: 0;
    color: var(--lb-navy);
    text-decoration: none;
}

.lgbx-topp .lgbx-topp__logo-bilde {
    display: block;
    width: auto;
    max-width: none;
    height: 52px;
}

.lgbx-topp .lgbx-topp__logo-tekst {
    font-size: 22px;
    font-weight: 800;
}

.lgbx-topp .lgbx-topp__meny {
    flex: 1 1 auto;
    min-width: 0;
}

.lgbx-topp ul.lgbx-topp__liste {
    display: flex;
    align-items: center;
    gap: 2px;
}

.lgbx-topp li.lgbx-topp__punkt {
    position: relative;
}

.lgbx-topp a.lgbx-topp__lenke {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border-radius: 8px;
    color: var(--lb-navy);
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lgbx-topp a.lgbx-topp__lenke svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.lgbx-topp li.lgbx-topp__punkt:hover > a.lgbx-topp__lenke,
.lgbx-topp li.lgbx-topp__punkt:focus-within > a.lgbx-topp__lenke {
    background: var(--lb-bg);
    color: var(--lb-blue);
}

.lgbx-topp li.lgbx-topp__punkt:hover > a.lgbx-topp__lenke svg,
.lgbx-topp li.lgbx-topp__punkt:focus-within > a.lgbx-topp__lenke svg {
    transform: rotate(180deg);
}

.lgbx-topp li.lgbx-topp__punkt--aktiv > a.lgbx-topp__lenke {
    color: var(--lb-blue);
    box-shadow: inset 0 -2px 0 var(--lb-blue);
    border-radius: 8px 8px 0 0;
}

.lgbx-topp ul.lgbx-topp__under {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 2;
    min-width: 250px;
    padding: 8px;
    border: 1px solid var(--lb-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(11, 34, 57, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Bro mellom menypunktet og undermenyen, så den ikke lukkes når pekeren flyttes ned. */
.lgbx-topp ul.lgbx-topp__under::before {
    position: absolute;
    top: -10px;
    right: 0;
    left: 0;
    height: 10px;
    content: "";
}

.lgbx-topp li.lgbx-topp__punkt:hover > ul.lgbx-topp__under,
.lgbx-topp li.lgbx-topp__punkt:focus-within > ul.lgbx-topp__under {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.lgbx-topp ul.lgbx-topp__under a {
    display: block;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--lb-ink);
    font-size: 15.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.lgbx-topp ul.lgbx-topp__under a:hover,
.lgbx-topp ul.lgbx-topp__under a:focus-visible {
    background: var(--lb-bg);
    color: var(--lb-blue);
}

.lgbx-topp ul.lgbx-topp__under a[aria-current="page"] {
    color: var(--lb-blue);
    font-weight: 600;
}

.lgbx-topp .lgbx-topp__hoyre {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.lgbx-topp a.lgbx-topp__telefon {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin: 0;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--lb-navy);
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.lgbx-topp a.lgbx-topp__telefon svg {
    width: 18px;
    height: 18px;
    color: var(--lb-blue);
}

.lgbx-topp a.lgbx-topp__telefon:hover {
    color: var(--lb-blue);
}

.lgbx-topp a.lgbx-topp__kurv {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 10px;
    color: var(--lb-navy);
    text-decoration: none;
}

.lgbx-topp a.lgbx-topp__kurv:hover {
    background: var(--lb-bg);
    color: var(--lb-blue);
}

.lgbx-topp a.lgbx-topp__kurv svg {
    width: 24px;
    height: 24px;
}

.lgbx-topp span.lgbx-topp__antall {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--lb-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.lgbx-topp span.lgbx-topp__antall--tom {
    display: none;
}

.lgbx-topp a.lgbx-topp__knapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0 0 0 6px;
    padding: 0 20px;
    border: 2px solid var(--lb-blue);
    border-radius: 10px;
    background: var(--lb-blue);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lgbx-topp a.lgbx-topp__knapp:hover {
    border-color: var(--lb-blue-dark);
    background: var(--lb-blue-dark);
    color: #fff;
}

.lgbx-topp a.lgbx-topp__knapp--lys {
    background: #fff;
    color: var(--lb-blue);
}

.lgbx-topp a.lgbx-topp__knapp--lys:hover {
    background: var(--lb-bg);
    color: var(--lb-blue-dark);
}

.lgbx-topp .lgbx-topp__knapp-kort {
    display: none;
}

.lgbx-topp a:focus-visible,
.lgbx-topp summary:focus-visible,
.lgbx-bunn a:focus-visible,
.lgbx-bunn button:focus-visible {
    outline: 3px solid var(--lb-cyan);
    outline-offset: 2px;
}

/* Menyen på mobil og nettbrett */

.lgbx-topp details.lgbx-topp__mobil {
    display: none;
}

.lgbx-topp summary.lgbx-topp__bryter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: var(--lb-navy);
    cursor: pointer;
    list-style: none;
}

.lgbx-topp summary.lgbx-topp__bryter::-webkit-details-marker,
.lgbx-topp .lgbx-topp__gruppe > summary::-webkit-details-marker {
    display: none;
}

.lgbx-topp summary.lgbx-topp__bryter span {
    display: flex;
}

.lgbx-topp summary.lgbx-topp__bryter svg {
    width: 26px;
    height: 26px;
}

.lgbx-topp summary.lgbx-topp__bryter span.lgbx-topp__bryter-lukk,
.lgbx-topp details[open] > summary.lgbx-topp__bryter span.lgbx-topp__bryter-apne {
    display: none;
}

.lgbx-topp details[open] > summary.lgbx-topp__bryter span.lgbx-topp__bryter-lukk {
    display: flex;
}

.lgbx-topp details[open] > summary.lgbx-topp__bryter {
    background: var(--lb-bg);
}

.lgbx-topp nav.lgbx-topp__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    padding: 16px 20px 96px; /* plass til cookie-knappen nederst til venstre */
    overflow-y: auto;
    border-top: 1px solid var(--lb-line);
    background: #fff;
    box-shadow: 0 24px 40px rgba(11, 34, 57, 0.18);
}

.lgbx-topp .lgbx-topp__panel-knapper {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.lgbx-topp .lgbx-topp__panel-knapper a.lgbx-topp__knapp {
    min-height: 52px;
    margin: 0;
    font-size: 16.5px;
    white-space: normal;
}

.lgbx-topp details.lgbx-topp__gruppe,
.lgbx-topp a.lgbx-topp__gruppe-lenke {
    border-bottom: 1px solid var(--lb-line);
}

.lgbx-topp details.lgbx-topp__gruppe > summary,
.lgbx-topp a.lgbx-topp__gruppe-lenke {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    margin: 0;
    color: var(--lb-navy);
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}

.lgbx-topp details.lgbx-topp__gruppe > summary svg {
    width: 20px;
    height: 20px;
    color: var(--lb-muted);
    transition: transform 0.15s ease;
}

.lgbx-topp details.lgbx-topp__gruppe[open] > summary svg {
    transform: rotate(180deg);
}

.lgbx-topp details.lgbx-topp__gruppe ul {
    padding-bottom: 10px;
}

.lgbx-topp details.lgbx-topp__gruppe li a {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin: 0;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--lb-ink);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.lgbx-topp details.lgbx-topp__gruppe li a[aria-current="page"],
.lgbx-topp a.lgbx-topp__gruppe-lenke[aria-current="page"] {
    color: var(--lb-blue);
}

.lgbx-topp details.lgbx-topp__gruppe li a[aria-current="page"] {
    background: var(--lb-bg);
    font-weight: 600;
}

.lgbx-topp a.lgbx-topp__panel-telefon {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    margin: 6px 0 0;
    color: var(--lb-navy);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

.lgbx-topp a.lgbx-topp__panel-telefon svg {
    width: 20px;
    height: 20px;
    color: var(--lb-blue);
}

@media (max-width: 1279px) {
    .lgbx-topp a.lgbx-topp__telefon span {
        display: none;
    }

    .lgbx-topp a.lgbx-topp__telefon {
        justify-content: center;
        width: 44px;
        padding: 0;
        color: var(--lb-navy);
    }

    .lgbx-topp a.lgbx-topp__telefon svg {
        width: 22px;
        height: 22px;
        color: currentColor;
    }

    .lgbx-topp a.lgbx-topp__lenke {
        padding: 0 11px;
    }
}

/* Under 1100 px, og på skjermer uten peker (nettbrett), brukes menyknappen. */
@media (max-width: 1099px), (hover: none) {
    .lgbx-topp .lgbx-topp__meny {
        display: none;
    }

    .lgbx-topp details.lgbx-topp__mobil {
        display: block;
    }

    .lgbx-topp .lgbx-topp__hoyre {
        gap: 4px;
    }

    .lgbx-topp a.lgbx-topp__telefon span {
        display: none;
    }

    .lgbx-topp a.lgbx-topp__telefon {
        justify-content: center;
        width: 44px;
        padding: 0;
    }

    .lgbx-topp a.lgbx-topp__telefon svg {
        width: 22px;
        height: 22px;
        color: currentColor;
    }
}

@media (max-width: 782px) {
    body.admin-bar .lgbx-topp {
        top: 46px;
    }

    html {
        scroll-padding-top: 76px;
    }
}

@media (max-width: 600px) {
    body.admin-bar .lgbx-topp {
        top: 0;
    }

    .lgbx-topp .lgbx-topp__rad {
        gap: 8px;
        width: calc(100% - 28px);
        height: 64px;
    }

    .lgbx-topp-plass {
        height: 65px;
    }

    .lgbx-topp .lgbx-topp__logo-bilde {
        height: 44px;
    }

    .lgbx-topp .lgbx-topp__hoyre {
        gap: 0;
    }

    .lgbx-topp .lgbx-topp__hoyre > a.lgbx-topp__knapp {
        order: -1;
        min-height: 42px;
        margin: 0 4px 0 0;
        padding: 0 14px;
        font-size: 15px;
    }

    .lgbx-topp .lgbx-topp__knapp-lang {
        display: none;
    }

    .lgbx-topp .lgbx-topp__knapp-kort {
        display: inline;
    }
}

/* ── Bunnen ──────────────────────────────────────────────────────────────────────────────────── */

.lgbx-bunn {
    position: relative;
    background: var(--lb-navy);
    color: #c8d3e0;
    font-size: 15.5px;
    line-height: 1.55;
}

.lgbx-bunn .lgbx-bunn__rad {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 48px;
    width: min(1200px, 100% - 40px);
    margin: 0 auto;
    padding: 64px 0 52px;
}

body .lgbx-bunn p {
    margin: 0;
    color: #c8d3e0;
    font-size: inherit;
    line-height: inherit;
}

body .lgbx-bunn p.lgbx-bunn__navn {
    margin-bottom: 10px;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

body .lgbx-bunn p.lgbx-bunn__tekst {
    max-width: 36ch;
    margin-bottom: 20px;
}

.lgbx-bunn ul.lgbx-bunn__kontakt li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    color: #c8d3e0;
}

.lgbx-bunn ul.lgbx-bunn__kontakt svg {
    width: 18px;
    height: 18px;
    color: var(--lb-cyan);
}

.lgbx-bunn a {
    display: inline;
    margin: 0;
    color: #c8d3e0;
    font-size: inherit;
    text-decoration: none;
}

.lgbx-bunn a:hover {
    color: #fff;
    text-decoration: underline;
}

.lgbx-bunn .lgbx-bunn__sosial {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.lgbx-bunn .lgbx-bunn__sosial a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.lgbx-bunn .lgbx-bunn__sosial a:hover {
    background: var(--lb-blue);
}

.lgbx-bunn .lgbx-bunn__sosial svg {
    width: 20px;
    height: 20px;
}

.lgbx-bunn h2.lgbx-bunn__overskrift {
    margin: 4px 0 14px;
    padding: 0;
    color: #fff;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lgbx-bunn .lgbx-bunn__spalte li a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
}

.lgbx-bunn .lgbx-bunn__fot {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.lgbx-bunn .lgbx-bunn__fot-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    width: min(1200px, 100% - 40px);
    margin: 0 auto;
    padding: 22px 0 26px;
    color: #9fb0c3;
    font-size: 14px;
}

body .lgbx-bunn p.lgbx-bunn__firma {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 28px;
    color: #9fb0c3;
    font-size: 14px;
}

.lgbx-bunn ul.lgbx-bunn__juss {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
}

.lgbx-bunn ul.lgbx-bunn__juss a,
.lgbx-bunn ul.lgbx-bunn__juss button {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #c8d3e0;
    font: inherit;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.lgbx-bunn ul.lgbx-bunn__juss button:hover {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .lgbx-bunn .lgbx-bunn__rad {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 36px 28px;
        padding: 48px 0 40px;
    }

    .lgbx-bunn .lgbx-bunn__om {
        grid-column: 1 / -1;
    }

    body .lgbx-bunn p.lgbx-bunn__tekst {
        max-width: 60ch;
    }
}

@media (max-width: 600px) {
    .lgbx-bunn .lgbx-bunn__rad {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: calc(100% - 40px);
    }

    .lgbx-bunn .lgbx-bunn__spalte li a,
    .lgbx-bunn ul.lgbx-bunn__kontakt li,
    .lgbx-bunn ul.lgbx-bunn__juss a,
    .lgbx-bunn ul.lgbx-bunn__juss button {
        min-height: 44px;
    }

    .lgbx-bunn .lgbx-bunn__fot-rad {
        width: calc(100% - 40px);
        padding-bottom: 88px; /* plass til knappene nederst i hjørnene */
    }
}

@media (prefers-reduced-motion: reduce) {
    .lgbx-topp *,
    .lgbx-bunn * {
        transition: none !important;
    }
}