/* ==========================================================================
   Alkalærs header — ny udgave
   ==========================================================================

   HELE POINTEN MED DEN HER FIL

   Headerens tre dele — logo, søgefelt og handlingsknapper — ligger allerede
   som søskende inde i .header.content, men i en anden rækkefølge end
   designet: logoet og knapperne kommer fra logo.phtml, derefter minikurven,
   og til sidst søgeblokken.

   Før blev søgefeltet flyttet på plads med jQuery efter sideindlæsning. Det
   ødelagde autocomplete, fordi Magentos quickSearch-widget placerer
   forslagslisten i forhold til det element, feltet sad i, da widgeten blev
   koblet på.

   Her stilles de op med flexbox order i stedet. Markup'en røres ikke, intet
   flyttes, og widgeten virker som Magento har tænkt den.

   Farverne er designets egne tokens, oversat fra oklch til hex.
   ========================================================================== */

:root {
    --alk-primary: #8b3fd4;          /* lilla — logo, knapper, links */
    --alk-primary-moerk: #7a34bd;
    --alk-accent: #e0459b;           /* pink — Universe, antalsmærke */
    --alk-flade: #f4eefc;            /* søgefeltets baggrund */
    --alk-kant: #e4dced;
    --alk-tekst: #2a2135;
    --alk-tekst-svag: #6f6580;
}

/* --------------------------------------------------------------- øverste række */

.page-header .header.content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: nowrap;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Magento har en clearfix paa .header.content — ::before og ::after med
   display: table. I en FLEX-container bliver pseudo-elementer til rigtige
   flex-elementer og optager plads: de skubbede logoet 32px til hoejre, saa det
   ikke flugtede med menuen nedenunder. Clearfix er overfloedig i flexbox. */
.page-header .header.content::before,
.page-header .header.content::after { display: none; }

/* Rækkefølgen: logo, søgefelt, Universe + konto, kurv. */
.page-header .header.content > .logo              { order: 1; flex: 0 0 auto; margin: 0; }
/* flex-basis 0 og ikke auto: ellers bliver soegefeltet kun saa bredt som sit
   indhold, og den frie plads samler sig FORAN logoet, saa logoet ikke flugter
   med menuen nedenunder. */
.page-header .header.content > .block-search      { order: 2; flex: 1 1 0%; min-width: 0; width: auto; }
.page-header .header.content > .alk-header-actions{ order: 3; flex: 0 0 auto; }
.page-header .header.content > .minicart-wrapper  { order: 4; flex: 0 0 auto; margin: 0; }

/* Magentos egen styles-m.css giver .logo "float: left" og "max-width: 50%".
   I en flex-container ignoreres float, men kombinationen fik logoet til at
   kollapse til 0x0 selv om billedet var indlaest. Hoejden bindes derfor fast
   og bredden foelger med — det er den robuste maade at saette et logo op paa. */
.page-header .header.content > .logo {
    float: none;
    width: auto;
    max-width: none;
    z-index: auto;
}

.page-header .header.content > .logo img {
    display: block;
    height: 46px;
    width: auto;
    max-height: none;
    max-width: none;
}

/* --------------------------------------------------------------- søgefeltet */

.page-header .block-search {
    float: none;
    width: auto;
    padding-left: 0;
}

.page-header .block-search .block-title { display: none; }

.page-header .block-search .control {
    border: 0;
    margin: 0;
    padding: 0;
}

.page-header .block-search input {
    position: static;
    margin: 0;
    left: auto;
    width: 100%;
    height: 46px;
    padding: 0 96px 0 44px;
    border: 1px solid var(--alk-kant);
    border-radius: 999px;
    background: var(--alk-flade);
    font-size: 15px;
    color: var(--alk-tekst);
}

.page-header .block-search input::placeholder { color: var(--alk-tekst-svag); }

.page-header .block-search input:focus {
    outline: none;
    border-color: var(--alk-primary);
    box-shadow: 0 0 0 3px rgba(139, 63, 212, .18);
}

/* Forstørrelsesglasset til venstre — tegnet, ikke et ikonfont-tegn. */
.page-header .block-search .field.search { position: relative; }

.page-header .block-search .field.search::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 17px;
    height: 17px;
    margin-top: -8px;
    pointer-events: none;
    z-index: 2;
    background: no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6580' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
}

/* Søg-knappen inde i feltet */
/* .actions bliver 99px bred om en knap paa 59, og hverken width:auto eller
   absolut placering af knappen selv flyttede den helt ud til kanten. I stedet
   bliver kassen et flex-felt, der skubber knappen mod hoejre — saa er det
   ligegyldigt, hvor bred kassen er. */
.page-header .block-search .actions {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    margin: 0;
}

.page-header .block-search .action.search {
    /* Magento placerer knappen absolut OG giver den margin-right: 40px. Det var
       de 40px, der skubbede den ind fra feltets kant — uanset hvad kassen
       omkring den gjorde. Knappen skal bare flyde inde i .actions, som selv
       sidder 6px fra kanten. */
    position: static;
    right: auto;
    transform: none;

    /* !important her, fordi Magentos egen margin-right: 40px vinder paa
       specificitet uanset hvor praecist vi skriver selektoren. Det er de 40px,
       der skubbede knappen ind fra feltets kant. */
    margin: 0 !important;

    display: inline-block;
    height: 34px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--alk-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    opacity: 1;
    cursor: pointer;
}

.page-header .block-search .action.search:hover { background: var(--alk-primary-moerk); }

/* Magento deaktiverer soegeknappen, indtil der staar noget i feltet, og
   styles-l.css giver den saa opacity 0.5. Knappen ser derved i stykker ud paa
   en tom forside. Spaerringen beholdes — den forhindrer en tom soegning — men
   den skal ikke se falmet ud. */
.page-header .block-search .action.search[disabled],
.page-header .block-search .action.search.disabled {
    opacity: 1;
    background: var(--alk-primary);
    cursor: default;
}

/* Magento saetter et forstoerrelsesglas paa knappen med ::before. Vi har
   allerede et ikon i venstre side af feltet, saa det skal vaek — ellers staar
   der et glas oven i ordet "Soeg". */
.page-header .block-search .action.search::before { content: none; display: none; }
.page-header .block-search .action.search > span {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
}

/* Forslagslisten. Den bliver nu liggende under feltet, fordi feltet ikke
   flyttes efter at widgeten er koblet paa. */
.page-header .block-search .search-autocomplete {
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    border: 1px solid var(--alk-kant);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(42, 33, 53, .12);
    overflow: hidden;
    z-index: 60;
}

.page-header .block-search .search-autocomplete ul { border: 0; margin: 0; }

.page-header .block-search .search-autocomplete li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    border-top: 1px solid #f1ecf6;
    font-size: 14px;
    cursor: pointer;
}

.page-header .block-search .search-autocomplete li:first-child { border-top: 0; }
.page-header .block-search .search-autocomplete li:hover,
.page-header .block-search .search-autocomplete li.selected { background: var(--alk-flade); }
.page-header .block-search .search-autocomplete li .amount { color: var(--alk-tekst-svag); }

/* --------------------------------------------------------------- menuen */

/* Menulinjen og logoet skal flugte. .header.content har 20px indvendig
   afstand; Magentos egen menuliste har kun 8px. */
.nav-sections .navigation > ul { padding-left: 20px; }

/* --------------------------------------------------------------- handlinger */

.alk-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alk-universe {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 8px;
    line-height: 0;
}

.alk-universe:hover { filter: brightness(1.06); }

/* Kun selve logoet — ingen boks bag. Logofilen har sin egen lyseroede flade. */
.alk-universe img { height: 40px; width: auto; display: block; }

.alk-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--alk-tekst);
    cursor: pointer;
}

.alk-account:hover      { background: var(--alk-flade); }
.alk-account:focus-visible {
    outline: 2px solid var(--alk-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- kurven */

.page-header .minicart-wrapper .action.showcart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    background: var(--alk-primary);
    background-image: none;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.page-header .minicart-wrapper .action.showcart:hover { background: var(--alk-primary-moerk); }
/* Kurven. Skabelonen er skrevet om, saa knappen indeholder praecis tre ting i
   rigtig raekkefoelge: ikon, tekst, antal. Det var enklere end at flytte rundt
   paa Magentos egne elementer med CSS — ikonet og tallet laa i samme kasse. */
.page-header .minicart-wrapper .action.showcart::before,
.page-header .minicart-wrapper .action.showcart::after { display: none !important; }

.page-header .minicart-wrapper .alk-kurv-ikon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    background: no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

.page-header .minicart-wrapper .alk-kurv-tekst {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

.page-header .minicart-wrapper .showcart-icon-wrap { display: contents; }

/* Magento klipper teksten vaek med clip: rect(0,0,0,0). Designet viser den. */
.page-header .minicart-wrapper .action.showcart .text {
    /* Magento gemmer teksten med en samleregel (.abs-visually-hidden i
       styles-m.css), der baade klipper, flytter og indrykker den. Alle dele
       nulstilles her — ellers lander ordet uden for knappen. */
    position: static;
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    float: none;
    clip: auto;
    overflow: visible;
    text-indent: 0;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}


.page-header .minicart-wrapper .action.showcart .counter.qty {
    position: static;
    display: inline-block;
    min-width: 22px;
    height: 20px;
    margin: 0;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--alk-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
}

/* Magento skjuler antallet, naar kurven er tom, og lader tallet staa tomt.
   Designet viser 0, saa maerket ikke bare er en tom prik. */
.page-header .minicart-wrapper .action.showcart .counter.qty.empty {
    display: inline-block;
    overflow: visible;
}

.page-header .minicart-wrapper .action.showcart .counter.qty.empty .counter-number { display: none; }
.page-header .minicart-wrapper .action.showcart .counter.qty.empty::after { content: "0"; }

/* --------------------------------------------------------------- mobil */

@media (max-width: 991px) {
    .page-header .header.content {
        flex-wrap: wrap;
        gap: 10px;
    }

    .page-header .header.content > .block-search {
        order: 5;
        flex: 1 0 100%;
    }

    .page-header .header.content > .alk-header-actions { margin-left: auto; }
    .alk-universe { padding: 0 12px; }
    .alk-universe img { height: 22px; }
    .page-header .minicart-wrapper .action.showcart { padding: 0 12px; }
    .page-header .header.content > .logo img { max-height: 38px; }
}


/* --- telefon ---
   Headeren fyldte 215 px paa en 390 px skaerm og laa i tre raekker: logo,
   kurv, soegefelt. Hamburgeren ligger absolut i Luma og lagde sig oven i
   logoet. Her bliver det to raekker: logo + knapper oeverst, soegefelt under. */

@media (max-width: 767px) {
    .page-header .header.content {
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
    }

    /* Ud af den absolutte placering og ind i raekken, saa logoet faar sin
       egen plads i stedet for at ligge under ikonet. */
    .page-header .nav-toggle {
        position: static;
        order: 0;
        flex: 0 0 auto;
        margin: 0;
    }

    .page-header .header.content > .logo {
        order: 1;
        margin: 0;
    }

    .page-header .header.content > .logo img { max-height: 30px; }

    /* Universe-logoet maa vige. Der er ikke plads til baade butikkens logo,
       konto, kurv OG et link til en anden side paa en telefonbredde — og det
       er det sidste, man handler i. Det staar stadig i footeren. */
    .page-header .alk-universe { display: none; }

    .page-header .header.content > .alk-header-actions {
        order: 2;
        margin-left: auto;
        gap: 4px;
    }

    .page-header .minicart-wrapper { order: 3; }

    /* Kurven som ikon alene. Ordet "Kurv" tog bredden fra de oevrige. */
    .page-header .minicart-wrapper .action.showcart .alk-kurv-tekst { display: none; }
    .page-header .minicart-wrapper .action.showcart { padding: 0 14px; }

    .page-header .header.content > .block-search { order: 4; margin: 0; }

    /* Luma har en lup, der folder soegefeltet ud paa mobil. Feltet staar
       altid aabent her, saa knappen var kun et loest ikon oven i raekken.
       Ikonet er et ::before paa etiketten, saa hele etiketten skal skjules. */
    .page-header .block-search .label { display: none !important; }
    .page-header .block-search .field.search { padding-top: 0; }

    /* Fingerstoerrelse: 44 px er det mindste, man rammer sikkert.
       Peger paa kontoknappen og ikke paa "> a" — det ramte ogsaa
       Universe-linket ovenfor og gav det display tilbage. */
    .page-header .nav-toggle,
    .page-header .alk-header-actions > .alk-account,
    .page-header .minicart-wrapper .action.showcart {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

}


/* ==========================================================================
   Login-popuppen
   ==========================================================================
   Magentos egen popup fra kassen, som kontoknappen aabner. Den er ustylet ud
   af kassen: bare kanter og systemknapper. Her faar den samme sprog som
   resten af headeren.
   ========================================================================== */

/* Magentos popup afsaetter 48 px til en overskrift, den her dialog ikke har —
   der stod kun et kryds og et tomt baelte over stregen. Scopet er
   .popup-authentication (klassen kommer fra authentication-popup.js), saa de
   oevrige dialoger paa siden beholder deres egne maal. */
.popup-authentication .modal-inner-wrap .modal-header {
    padding: 0;
    min-height: 44px;
}

/* Krydset ligger absolut og bestemmer derfor ikke selv hoejden. Uden
   min-height ovenfor faldt hovedet sammen til 14 px, og krydset forsvandt bag
   indholdet. */
.popup-authentication .modal-inner-wrap .action-close {
    padding: 14px 16px;
}

.popup-authentication .modal-inner-wrap .modal-content {
    padding-bottom: 18px;
}

.modal-popup .block-authentication {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 24px 4px 20px;
}

/* Hoejre spalte har en skjult .messages-blok over overskriften, saa de to
   halvdele ikke startede samme sted. Nu holder begge spalter samme afstand
   til toppen, og indholdet fylder hoejden ud. */
.modal-popup .block-authentication .messages:empty { display: none; }

.modal-popup .block-authentication .block {
    flex: 1 1 50%;
    padding: 8px 28px 4px;
    float: none;
    width: auto;
}

/* De to spalter skal slutte samme sted. Venstre side har kortere indhold — tre
   punkter mod to felter — saa "Opret konto" hang 50 px hoejere end "Log ind" og
   fik boksen til at se skaev ud. Knappen skubbes ned med margin-top:auto, og
   det virker kun, hvis hele kaeden ned til den er flex-spalter: paa hoejre side
   ligger knappen inde i en form inde i et fieldset. */
.modal-popup .block-authentication > .block,
.modal-popup .block-authentication .block-content,
.modal-popup .block-authentication .form-login,
.modal-popup .block-authentication .fieldset.login {
    display: flex;
    flex-direction: column;
}

.modal-popup .block-authentication .block-content,
.modal-popup .block-authentication .form-login,
.modal-popup .block-authentication .fieldset.login {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.modal-popup .block-authentication .block-customer-login {
    border-left: 1px solid var(--alk-kant);
}

.modal-popup .block-authentication .block-title {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.modal-popup .block-authentication .block-title strong {
    font-size: 21px;
    font-weight: 700;
    color: var(--alk-tekst);
}

.modal-popup .block-authentication .field {
    margin-bottom: 16px;
}

.modal-popup .block-authentication .field .label {
    /* Magento hoejrestiller etiketterne i kassens to-kolonne-opsaetning.
       Her staar de over feltet og skal derfor til venstre. */
    display: block;
    float: none;
    width: auto;
    margin-bottom: 6px;
    padding: 0;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--alk-tekst);
}

.modal-popup .block-authentication .field .control {
    float: none;
    width: auto;
}

/* Skriftstoerrelsen paa knapperne arves fra temaet som 28,8px, saa teksten
   floed ud af knappen. Etiketterne hoejrestilles af Magentos to-kolonne-
   opsaetning. Begge dele vinder paa specificitet uanset hvor praecist vi
   skriver selektoren — derfor !important her, og kun her. */
.modal-popup .block-authentication button,
.modal-popup .block-authentication .action.primary {
    width: auto;
    min-width: 0;
    white-space: nowrap;
    font-size: 15px !important;
    line-height: 1 !important;
    padding: 0 24px !important;
}

.modal-popup .block-authentication .field > .label,
.modal-popup .block-authentication label.label {
    text-align: left !important;
}

/* Knap og "glemt kode" paa samme linje, uden ombrydning. */
.modal-popup .block-authentication .actions-toolbar .secondary {
    display: flex;
    align-items: center;
}

.modal-popup .block-authentication .action.remind {
    white-space: nowrap;
    font-size: 14px;
}

/* "Opret konto" skal staa til venstre som resten af sin spalte. */
.modal-popup .block-new-customer .actions-toolbar { justify-content: flex-start; }

/* Skillemaerket mellem de to halvdele staar paa engelsk ("OR") og kommer fra
   et pseudo-element, som ikke kan oversaettes. Det fjernes; stregen mellem
   kolonnerne siger det samme. */
.modal-popup .block-authentication .block-customer-login::before,
.modal-popup .block-authentication .block-new-customer::after { display: none !important; }

.modal-popup .block-authentication input[type="email"],
.modal-popup .block-authentication input[type="password"],
.modal-popup .block-authentication input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--alk-kant);
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    box-shadow: none;
}

.modal-popup .block-authentication input:focus {
    border-color: var(--alk-primary);
    box-shadow: 0 0 0 3px rgba(139, 63, 212, .18);
    outline: none;
}

.modal-popup .block-authentication .actions-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* auto skubber knappen helt ned, saa "Opret konto" og "Log ind" ender paa
       samme linje uanset hvor meget der staar over dem. Se flex-kaeden oeverst
       i afsnittet — uden den ville auto ikke have noget at give af. */
    margin-top: auto;
}

.modal-popup .block-authentication .actions-toolbar .primary,
.modal-popup .block-authentication .actions-toolbar .secondary { margin: 0; float: none; }

.modal-popup .block-authentication button,
.modal-popup .block-authentication .action.primary {
    height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    background: var(--alk-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.modal-popup .block-authentication button:hover,
.modal-popup .block-authentication .action.primary:hover { background: var(--alk-primary-moerk); }

/* "Opret konto" er den sekundaere handling — samme form, men uden fyld. */
.modal-popup .block-new-customer .action.primary,
.modal-popup .block-new-customer button {
    background: #fff;
    color: var(--alk-primary);
    border: 2px solid var(--alk-primary);
}

.modal-popup .block-new-customer .action.primary:hover,
.modal-popup .block-new-customer button:hover {
    background: var(--alk-flade);
    color: var(--alk-primary);
}

.modal-popup .block-authentication .action.remind,
.modal-popup .block-authentication a {
    color: var(--alk-primary);
    font-size: 14px;
}

/* Fordelslisten i venstre side */
.modal-popup .block-new-customer ul { margin: 12px 0 0; padding: 0; list-style: none; }

.modal-popup .block-new-customer li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 20px;
    font-size: 14px;
    color: var(--alk-tekst-svag);
}

.modal-popup .block-new-customer li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--alk-accent);
}

/* Skillelinjen med "ELLER" imellem de to halvdele */
.modal-popup .block-authentication .block-content::before { display: none; }

@media (max-width: 767px) {
    .modal-popup .block-authentication { flex-direction: column; }
    .modal-popup .block-authentication .block-customer-login {
        border-left: 0;
        border-top: 1px solid var(--alk-kant);
        margin-top: 12px;
        padding-top: 20px;
    }
}


/* ==========================================================================
   Hovedmenuen
   ==========================================================================
   Syv faste punkter, hvor kun Shop folder ud. Udfoldningen er tre spalter,
   der bygges af kategorierne i Magento — se topmenu.phtml.
   ========================================================================== */

/* .nav-sections-items er en flex-container med justify-content: center, som
   klemte hele menuen sammen om midten — den startede paa 379 mod logoets 100.
   Indholdet skal fylde hele bredden, saa menulisten selv kan styre sin
   indrykning og flugte med headeren. */
/* KUN desktop. Paa mobil bygger Luma de to faneblade (Menu / Konto) med float
   og negativ margen, og de her to regler slog begge dele ihjel: panelet endte
   448 px bredt med margin-left -336, saa menuen laa halvt uden for skaermen,
   naar den var aabnet. */
@media (min-width: 768px) {
    .nav-sections .nav-sections-items { justify-content: flex-start; }

    .nav-sections .nav-sections-item-content {
        flex: 1 1 100%;
        width: 100%;
        float: none;
    }
}

/* Magento lægger to indholdspaneler i rækken — menuen og kontopanelet — og
   skjuler kontopanelet med sit faneblads-JS. Det sker først halvandet sekund
   EFTER at siden er færdigindlæst, og indtil da deler de to paneler bredden:
   menuen får 798 af 1440 px, står i venstre side og springer så på plads, når
   scriptet endelig kører. Det var det synlige hop ved hver sideindlæsning.

   Her gøres det samme med CSS, som virker fra første maling, så der ikke er
   noget at se på. Kun fra 768px: under den grænse er fanebladene rigtige
   faneblade, som brugeren selv skifter imellem, og de skal blive. */
@media (min-width: 768px) {
    .nav-sections .nav-sections-item-content ~ .nav-sections-item-content {
        display: none;
    }
}

.page-header .alk-menu,
.nav-sections .alk-menu {
    border-top: 1px solid var(--alk-kant);
    background: #fff;
}

.alk-menu .alk-menu-liste {
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    list-style: none;
}

.alk-menu .alk-menu-punkt { position: static; margin: 0; }
.alk-menu .alk-menu-shop,
.alk-menu .alk-menu-har-under { position: relative; }

/* Menuens skrift.
   Designet saetter hele menuen i Nunito — punkterne i 600, overskrifterne i
   700. Butikkens oevrige tekst bliver staaende i Open Sans; det er kun menuen,
   der skifter. Reglen ligger paa .alk-menu, saa udfoldningerne arver den. */
.alk-menu,
.alk-menu .alk-mega,
.alk-menu .alk-under {
    font-family: "Nunito", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.alk-menu .alk-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--alk-tekst);
    text-decoration: none;
    white-space: nowrap;
}

.alk-menu .alk-menu-link:hover { color: var(--alk-primary); }

.alk-menu .alk-menu-pil {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
}

/* --- udfoldningen --- */

.alk-menu .alk-mega {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 70;
    display: none;
    width: max-content;
    max-width: 880px;
    padding: 26px 30px 20px;
    border: 1px solid var(--alk-kant);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(42, 33, 53, .14);
}

.alk-menu .alk-menu-shop:hover .alk-mega,
.alk-menu .alk-menu-shop:focus-within .alk-mega { display: block; }

.alk-menu .alk-mega-spalter {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 30px;
}

.alk-menu .alk-mega-overskrift {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--alk-primary);
}

.alk-menu .alk-mega-spalte ul { margin: 0; padding: 0; list-style: none; }
.alk-menu .alk-mega-spalte li { margin: 0 0 9px; }

.alk-menu .alk-mega-spalte a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--alk-tekst);
    text-decoration: none;
}

.alk-menu .alk-mega-spalte a::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--alk-accent);
}

.alk-menu .alk-mega-spalte a:hover { color: var(--alk-primary); }

.alk-menu .alk-mega-bund {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--alk-kant);
}

.alk-menu .alk-mega-bund a {
    font-size: 14px;
    font-weight: 600;
    color: var(--alk-primary);
    text-decoration: none;
}

.alk-menu .alk-mega-bund a:hover { text-decoration: underline; }

/* --- undermenuer paa de oevrige punkter ---
   Siderne har hver deres afsnit liggende i menutraeet (Magento\VersionsCms),
   og de stod i den gamle menu. Panelet er det samme som Shops udfoldning, bare
   smallere; Uddannelse har tolv afsnit og faar to spalter, saa listen ikke
   naar ned under skaermen. */

.alk-menu .alk-under {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 70;
    display: none;
    min-width: 240px;
    width: max-content;
    max-width: 520px;
    padding: 18px 22px;
    border: 1px solid var(--alk-kant);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(42, 33, 53, .14);
}

.alk-menu .alk-menu-har-under:hover .alk-under,
.alk-menu .alk-menu-har-under:focus-within .alk-under { display: block; }

.alk-menu .alk-under ul { margin: 0; padding: 0; list-style: none; }

.alk-menu .alk-under--to ul {
    column-count: 2;
    column-gap: 30px;
}

.alk-menu .alk-under li {
    margin: 0 0 9px;
    break-inside: avoid;
}

.alk-menu .alk-under a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--alk-tekst);
    text-decoration: none;
}

.alk-menu .alk-under a::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--alk-accent);
}

.alk-menu .alk-under a:hover { color: var(--alk-primary); }

/* Paa en smal skaerm ville de sidste punkters panel gaa ud over hoejre kant,
   saa der aabner de indad. Paa en bred skaerm er der plads, og alle paneler
   aabner ens fra venstre. */
@media (min-width: 992px) and (max-width: 1199px) {
    .alk-menu .alk-menu-punkt:nth-last-child(-n+3) .alk-under {
        left: auto;
        right: 0;
    }
}

/* --- mobil --- */

@media (max-width: 991px) {
    .alk-menu .alk-menu-liste {
        flex-wrap: wrap;
        gap: 0;
        padding: 0 16px;
    }

    .alk-menu .alk-menu-punkt { flex: 1 0 auto; }
    .alk-menu .alk-menu-link { padding: 12px 10px; font-size: 14px; }

    .alk-menu .alk-mega {
        position: static;
        display: block;
        width: auto;
        max-width: none;
        padding: 12px 10px 4px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .alk-menu .alk-mega-spalter { grid-template-columns: 1fr; gap: 16px; }

    /* Undermenuerne er spring ned i den side, punktet aabner. Paa en telefon
       ville seks altid-aabne lister — 36 links — gøre menuen ubrugelig, og en
       udfoldning kraever en berøring, som i stedet aabner linket. De vises
       derfor kun paa stoerre skaerme. */
    .alk-menu .alk-under { display: none !important; }
    .alk-menu .alk-menu-har-under .alk-menu-pil { display: none; }
}


/* --- udtraeksmenuen paa telefon ---
   Panelet er ~336 px bredt og glider ind fra venstre; menuens vandrette raekke
   paa 448 px stak ud over begge kanter. Her staar punkterne under hinanden.

   Blokken ligger med vilje NEDERST i filen: desktop-reglen for .alk-menu-liste
   vejer praecis lige saa meget, saa det er raekkefoelgen der afgoer det.

   Det kunne foerst lade sig goere, da .nav-sections kom tilbage i Lumas faste
   placering ude til siden — se kommentaren i custom_styling.css. Saa laenge den
   laa i sidens flow, gjorde en lodret liste den 1149 px hoej og skubbede alt
   indhold ned under headeren. */

@media (max-width: 767px) {
    .nav-sections .alk-menu,
    .nav-sections .alk-menu-liste {
        max-width: 100%;
    }

    .nav-sections .alk-menu-liste {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
    }

    .nav-sections .alk-menu-punkt {
        flex: 0 0 auto;
        border-bottom: 1px solid var(--alk-kant);
    }

    .nav-sections .alk-menu-link {
        display: flex;
        justify-content: space-between;
        padding: 14px 18px;
        font-size: 16px;
    }

    /* Shop er foldet sammen, indtil man trykker. js/alk-mobilmenu saetter
       klassen. Uden JS staar den aaben som foer — ingen mister adgang til
       kategorierne, fordi et script ikke naaede frem. */
    .nav-sections .alk-menu-shop .alk-mega { display: none; }
    .nav-sections .alk-menu-shop.alk-foldet-ud .alk-mega { display: block; }

    .nav-sections .alk-menu-shop .alk-menu-pil {
        transition: transform .18s ease;
    }

    .nav-sections .alk-menu-shop.alk-foldet-ud .alk-menu-pil {
        transform: rotate(225deg) translate(-2px, -2px);
    }
}