/* ============================================================
   MENUKORTET — SIDENS EGNE DELE

   Bygger OVENPÅ havnegrillen.css og opfinder ikke et tema. Alt
   det, der kan tages derfra, er taget derfra: .thead, .panel,
   .item, .tag, .eyebrow, .dots, .sub, .hint, .fine og .g. Her
   står kun de tre former, siden har og de andre ikke har:

     1) kortet "I dag" med en overskrift og en tid i samme linje
     2) ugelisten, hvor hver dag er en række
     3) kategorierne som kort ved siden af hinanden

   MAN KAN IKKE BESTILLE HERINDE. Kortet er til at LÆSE. Der er
   ingen plusknapper, ingen kurv og ingen sum — det var der før,
   og kurven kunne ikke engang følge med over på
   bestillingsformularen, så gæsten begyndte forfra. Én knap i
   bunden fører derhen i stedet.
   ============================================================ */

/* ---- Prisen ----
   Samme skrift og farve som priserne alle andre steder på siden.
   Tabulartal, så kolonnen med kroner står lige, uanset om der
   står 35 eller 149. */
.mk-pris {
  flex: none;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--red);
  white-space: nowrap;
}
/* Uden pris står der "spørg" — aldrig et nul. 79 af forretningens
   varer har ikke fået en pris endnu, og et 0 ville stå som
   gratis. */
.mk-pris.mk-spoerg { font-size: 12.5px; font-weight: 500; color: var(--muted); }

/* ---- Allergi-pillen under manchetten ----
   Glasset er .glaspille i havnegrillen.css (27/9) — den stiplede,
   lyserøde kasse er væk. Her står kun pladsen. */
.mk-allergi { margin-top: 16px; }

/* ---- Kortet "I dag" ----
   Den ternede strimmel i venstre kant er den samme, som dagens
   ret har på forsiden. Kortet er sidens vigtigste, og strimlen
   er det, der siger det uden en overskrift mere. */
.mk-idag { position: relative; overflow: hidden; }
.mk-idag::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background-color: #fff;
  background-image:
    repeating-linear-gradient(90deg, rgba(214, 42, 58, .6) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(0deg, rgba(214, 42, 58, .6) 0 5px, transparent 5px 10px);
}
.mk-idag > * { padding-left: 14px; }
.mk-idag .mk-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(36, 26, 23, .18);
}
.mk-idag .mk-top h3 { font-size: 26px; }
.mk-idag .mk-naar { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.mk-ret { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; }
.mk-ret .mk-txt { flex: 1; min-width: 0; }
.mk-ret h4 {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  display: inline;
}
/* .tag er skrevet som ".item .tag" i havnegrillen.css, og der er
   ingen .item her. Formen er den samme — ellers ville mærkatet
   se anderledes ud på to sider af samme forretning. */
.mk-ret .tag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(214, 42, 58, .12);
  vertical-align: 2px;
}
.mk-ret p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink2); }

/* ---- Ugelisten ----
   Én række pr. dag. Dagen i dag får sandfarven, så øjet finder
   den uden at skulle læse datoen. */
.mk-uge .mk-dag {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  padding: 16px 12px;
  border-radius: 16px;
  border-bottom: 1px solid rgba(36, 26, 23, .08);
}
.mk-uge .mk-dag:last-child { border-bottom: 0; }
/* Ugens tomme dage samlet i én linje (26/9) — forsidens .day-mere. */
.mk-uge .mk-uge-mere { margin: 0; padding: 14px 4px 4px; font-size: 13px; color: var(--muted); }
/* I dag skiller sig ud med sandfarven OG en rød kant. Farven
   alene forsvinder på en telefon i solen ved vandet. */
.mk-uge .mk-dag.mk-nu {
  background: var(--cream2);
  border-bottom-color: transparent;
  box-shadow: inset 3px 0 0 var(--red);
}
.mk-uge .mk-dag.mk-nu .mk-navn { color: var(--red); }
.mk-uge .mk-navn {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
}
.mk-uge .mk-dato { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.mk-uge h4 {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.mk-uge p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink2); }
.mk-uge .mk-pris { display: block; margin-top: 8px; }
/* En dag uden en ret er ikke tom — den siger, at den kommer. Et
   hul uden forklaring ligner en fejl på hjemmesiden. */
.mk-uge .mk-tom { font-size: 14px; color: var(--muted); }

/* ---- Hop til ----
   Tyve kategorier er en lang side. Båndet klæber under
   topbjælken og ruller sidelæns, så gæsten kan springe direkte
   til ølkortet uden at scrolle forbi nitten andre. Den chip, der
   er i syne, markerer sig selv. */
.mk-hop {
  position: sticky;
  /* MÅLT i Chromium: topbjælken er 115 px før første rul og 109
     efter, når den fryser til. 109 er tallet, der gælder, mens
     båndet klæber — et gæt på 64 lagde det bag kronen. */
  /* ⚠️ OG TALLET FOELGER BJAELKEN (5/9). Bjaelkens luft foroven
     er --top-luft, som vokser med telefonens sikkerhedsomraade;
     et fast 109 ville laegge baandet bag kronen paa en telefon
     med dynamisk oe. 58 + 51 = 109, altsaa praecis det maalte. */
  top: calc(var(--top-luft, 58px) + 51px);
  /* Under topbjælkens 50: den skal glide hen OVER båndet, ikke
     omvendt. */
  z-index: 40;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px var(--pad);
  margin: 0 calc(var(--pad) * -1);
  background: rgba(253, 247, 239, .88);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 .5px 0 rgba(36, 26, 23, .1);
}
.mk-hop::-webkit-scrollbar { height: 0; }
.mk-hop button {
  flex: none;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--cream2);
  box-shadow: inset 0 0 0 1px rgba(36, 26, 23, .07);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .25s, color .25s, transform .3s var(--spring);
}
.mk-hop button:active { transform: scale(.95); }
.mk-hop button.on {
  background: linear-gradient(180deg, #e2394a, #c11f2f);
  color: #fff;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .35), 0 8px 18px rgba(214, 42, 58, .28);
}

/* ---- Kategorierne ---- */
.mk-kat { display: grid; gap: 14px; margin-top: 20px; }

/* ============================================================
   AFSNITTENE  (9/9)
   ------------------------------------------------------------
   Kundens ord: *"de mest attraktive og velkendte ting i toppen …
   og du ved blive mindre attraktiv jo længere ned man ryger."*

   MÅLT på hans eget kort på en iPhone 13: siden er 19.760 px =
   29,8 skærme, og maden stod i TO blokke med isen og de fem
   drikke-kort imellem — tapasfadet lå 15.355 px nede, UNDER
   "Snacks og slik". Overskrifterne her er dét, der gør de tre
   afdelinger til afsnit i stedet for en stribe på 21 kort.

   ⚠️ 21 PX OG IKKE h2'ENS 35. Overskriften skal dele en liste
   op, ikke åbne en side — og en 35 px serif over hvert af tre
   afsnit på en telefon er en skærm i sig selv. Størrelsen står i
   havnegrillen.css i forvejen.

   ⚠️ OG DEN KLÆBER IKKE. Hop-båndet klæber allerede under
   topbjælken (109 px, målt 24/8), og to klæbende lag oven i
   hinanden er dét, kalenderens overskrifter kostede en måling
   7/9. Afsnittet er en streg i teksten, ikke en tredje bjælke.
   ============================================================ */
.mk-afsnit {
  margin: 14px 0 0;
  padding-top: 16px;
  border-top: 1.5px solid rgba(36, 26, 23, .14);
  font-size: 21px;
  line-height: 1.15;
}
/* Det første afsnit står lige under hop-båndet og skal ikke have
   en streg oven i båndets egen kant. */
.mk-afsnit:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* ⚠️ HELE RÆKKEN (13/9). På computeren er .mk-kat et gitter med
   kolonner, og overskriften tog sin egen celle — "Mad" stod alene til
   venstre med kortene skubbet ud til højre (set på et skud). */
.mk-kat > .mk-afsnit { grid-column: 1 / -1; }
/* Kortene bærer selv deres luft; overskriften skal bare ikke
   klistre til kortet under sig. */
.mk-afsnit + .panel { margin-top: 0; }
.mk-kat .panel { margin-top: 0; scroll-margin-top: 172px; }
/* ⚠️ BÅNDET KLÆBER UNDER DEN KOMPAKTE BJÆLKE PÅ TELEFONEN  (13/9).
   Kundens ord: "den der bar ... svæver sådan i øvre midten af
   skærmen på telefon, det er elendigt". Tallet 109 var bjælkens
   højde FØR den blev kompakt (11/9: 60 px fast mod 120). Når den står
   fast under 820 px, er den sin egen formel — kompakt luft + 40 px
   indhold + 8 px bund — og stod båndet på 109, lå der en stribe af
   menuen mellem bjælken og båndet. Formlen er bjælkens egen
   (havnegrillen.css, .topbar.stuck), og kortenes landingssted følger
   med: bjælken + båndets 63 px. */
@media (max-width: 820px) {
  .mk-hop { top: calc(max(calc(env(safe-area-inset-top) + 6px), 12px) + 48px); }
  .mk-kat .panel { scroll-margin-top: calc(max(calc(env(safe-area-inset-top) + 6px), 12px) + 48px + 63px); }
}
.mk-kat .mk-hoved { display: flex; align-items: center; gap: 12px; }
/* Tegnet er et EMOJI, ikke en tegning. Kunden bad om det (24/8),
   og det er samtidig den eneste måde at give tyve kategorier hver
   sit ansigt uden at tegne tyve ikoner. */
.mk-kat .mk-tegn {
  width: 42px; height: 42px; flex: none;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 21px;
  line-height: 1;
  background: rgba(214, 42, 58, .1);
}
/* Farven kommer fra AFDELINGEN — mad, is, drikke — som ejeren
   sætter i admin. Tre sande farver: maden er husets røde, isen
   den varme koral fra "om os", og drikkevarerne den gule fra
   statusprikken. Alle tre står i havnegrillen.css i forvejen. */
.mk-kat .mk-tegn.mk-is { background: rgba(255, 139, 118, .2); }
.mk-kat .mk-tegn.mk-drikke { background: rgba(240, 160, 60, .2); }
.mk-kat .mk-hoved h3 { flex: 1; min-width: 0; font-size: 23px; }
/* Antallet ude til højre — det gør en lang side til en liste,
   man kan overskue. */
.mk-kat .mk-antal {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Kategoriens note, fx "På toastbrød eller rugbrød". Den står
   ét sted og gælder alle varerne under den. */
.mk-kat .mk-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.mk-kat .mk-liste { margin-top: 6px; }
.mk-kat .mk-linje {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px dashed rgba(36, 26, 23, .16);
}
.mk-kat .mk-linje:last-child { border-bottom: 0; }
.mk-kat .mk-linje .mk-txt { flex: 1; min-width: 0; }
.mk-kat .mk-linje h4 {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
.mk-kat .mk-linje p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* ---- Knapperne i bunden ---- */
.mk-slut { display: grid; gap: 10px; margin-top: 24px; }

/* ---- Bred skærm ----
   Kortene står ved siden af hinanden, som på skærmbillederne.
   Grænsen er den samme som resten af sidens desktop-lag.

   OG BÅNDET FLYTTER UD I SIDEN. På telefonen er en klæbende
   stribe i toppen det rigtige — der er ikke plads til andet. På
   en bred skærm bryder kortene ud i fuld bredde, mens båndet lå
   i den smalle spalte: så klæbede det MIDT hen over kortene og
   dækkede dem. Kunden så det med det samme (24/8).

   Ude i siden har den også en fordel til: hele listen er synlig
   på én gang i stedet for at skulle rulles sidelæns. */
@media (min-width: 821px) {
  .mk-sortiment {
    width: min(100vw - 64px, 1160px);
    margin-left: 50%;
    translate: -50% 0;
    display: grid;
    grid-template-columns: 224px 1fr;
    gap: 26px;
    align-items: start;
  }

  /* ⚠️ SPROGKNAPPEN TAGER IKKE BÅNDETS PLADS  (2/10).
     .mk-sortiment er et gitter på 224px + 1fr. Da sprogknappen kom
     ind som FØRSTE barn, lagde den sig i den smalle spalte, skubbede
     båndet over i den brede og kortene ned på næste række — og så lå
     båndet præcis dér, hvor det aldrig må ligge: hen over kortene.
     MÅLT af tests/skal-menukort.spec.js ("båndet ligger aldrig oven
     på kortene"): båndet sluttede ved 1240 px i stedet for 41.
     Det er den samme fejl, kunden selv fandt 24/8 — og prøven, der
     blev skrevet dengang, fangede den igen nu.
     Derfor eksplicitte pladser i stedet for rækkefølgen i HTML'en. */
  .mk-sortiment .mk-sprog { grid-column: 1; grid-row: 1; margin-bottom: 14px; }
  .mk-sortiment .mk-hop   { grid-column: 1; grid-row: 2; }
  .mk-sortiment .mk-kat   { grid-column: 2; grid-row: 1 / span 2; }

  .mk-hop {
    position: sticky;
    /* Kun topbjælken skal der være plads til her — båndet klæber
       ikke længere oven på noget. */
    top: calc(var(--top-luft, 58px) + 66px);
    flex-direction: column;
    gap: 4px;
    overflow: visible;
    padding: 0;
    margin: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .mk-hop button {
    width: 100%;
    height: auto;
    min-height: 40px;
    padding: 9px 14px;
    justify-content: flex-start;
    text-align: left;
    line-height: 1.3;
    background: transparent;
    box-shadow: none;
  }
  .mk-hop button:hover { background: var(--cream2); }
  .mk-hop button.on { box-shadow: 0 8px 18px rgba(214, 42, 58, .24); }

  /* Kortene fylder resten af spalten. Breakout-reglen i
     havnegrillen-desktop.css gælder ikke her — wrapperen har
     allerede brudt ud. */
  .mk-sortiment .mk-kat {
    width: auto;
    margin-left: 0;
    translate: none;
    margin-top: 0;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    align-items: start;
  }
  /* Ingen klæbende stribe over kortene længere, så de skal kun
     stoppe under topbjælken. */
  .mk-kat .panel { scroll-margin-top: 124px; }

  .mk-slut { grid-auto-flow: column; justify-content: center; }
  .mk-slut .g { min-width: 240px; }
}

/* ---- "Kun 3 tilbage" og udsolgt ----
   Tallet kommer fra DATABASEN, som tæller selv ved hver
   bestilling — se supabase/dagens-retter.sql. Et tal, personalet
   tæller ned i hånden, bliver forkert i løbet af en frokost.

   Farven er --red-d og ikke --red: den lille skrift falder under
   4,5:1 med mærkefarven selv på en telefon. Samme regel som
   priserne. */
.mk-faa {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--red-d);
}

/* Udsolgt er ikke en fejl — det er en dag, der gik godt. Retten
   bliver stående, så gæsten kan se, hvad der VAR, men den er
   dæmpet, og der er ingen vej til kurven herfra. */
.mk-ret.mk-udsolgt { opacity: .55; }

/* ============================================================
   EN UDSOLGT VARE PÅ KORTET  (2/9, kundens ja)
   ------------------------------------------------------------
   Kortet sorterede dem helt fra, mens bestillingssiderne viste
   dem gennemstreget — to lister over det samme sortiment, hvor
   den ene sagde, at retten ikke fandtes.

   ⚠️ FORMEN ER BESTILLINGSSIDERNES, IKKE DAGENS RETS. Dagens ret
   ovenfor dæmpes; en dæmpet linje midt i en liste på 24 læses som
   "her mangler der noget", ikke som "den er væk i dag". Stregen
   siger det utvetydigt, og mærkatet bærer ordet — en farve eller
   en opacitet alene er ubrugelig for den, der ikke ser forskel
   på dem.
   ============================================================ */
.mk-linje.mk-udsolgt .mk-txt h4 {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--ink2, #5c4a45);
}
.mk-linje.mk-udsolgt .mk-txt p,
.mk-linje.mk-udsolgt .mk-vare-tegn { opacity: .5; }
/* Mindre og lettere end en pris — samme greb som .mk-spoerg.
   Et "Udsolgt i dag" i prisens 16 px fede ville råbe højere end
   de tyve rigtige priser omkring det. */
.mk-pris.mk-udsolgt-maerke {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2, #5c4a45);
  white-space: nowrap;
}

/* ---- ET ANSIGT PR. RET  (1/9) -------------------------------
   Kortet og bestillingssiden er det SAMME sortiment set fra to
   skærme. Tegnet er derfor det samme (js/menu-emoji.js), men
   MINDRE her end i bestillingen: kortet har i forvejen
   kategoriens store flise (.mk-tegn) øverst, og to lige store
   tegn på den samme skærm ville slås om blikket. */
.mk-kat .mk-linje .mk-vare-tegn {
  flex: none;
  width: 26px;
  font-size: 17px;
  line-height: 1.4;
  text-align: center;
  opacity: .85;
  user-select: none;
}

/* ============================================================
   ET FOTO BAG KATEGORIEN  (13/9)
   ------------------------------------------------------------
   Kundens ord: "stegt flæsk med persillesovs som baggrundsbillede
   ... også sortimentet uden på, som vi har på forsiden". Samme lag
   som forsidens bestilling: fotoet, et slør og teksten ovenpå.

   ⚠️ KORTET HAR EN OPAK BUND (#1a1210). Gennemgangens kontrastmåler
   springer en flade under 90 % over og går op til sidens creme —
   uden bunden målte den hvid tekst mod creme.

   ⚠️ FOTOET ER STICKY OG HØJST SKÆRMHØJT. I et langt kort (28
   smørrebrød) bliver retten i billedet, mens man ruller gennem
   listen; i et kort med to varer fylder det kortets højde — med
   100lvh alene viste et kort på 250 px kun himlen over maden.

   ⚠️ SLØRET ER .72 OG IKKE HUSETS .66. Teksten står direkte på
   fotoet, uden forsidens glaskort imellem. Regnet mod en hvid sky
   gav .66 kun 4,3:1 på beskrivelsen; .72 giver 5,1 og prisens
   rosa 4,9. menukort-foto.spec.js regner efter.
   ============================================================ */
.mk-kat .panel.mk-foto-kort { position: relative; isolation: isolate; overflow: clip; background: #1a1210; color: #fff; }
.mk-foto-kort .mk-bg, .mk-foto-kort .mk-slor { position: absolute; inset: 0; z-index: -1; }
.mk-foto-kort .mk-bg img {
  position: sticky; top: 0; display: block; width: 100%;
  height: min(100%, 100vh); height: min(100%, 100lvh);
  object-fit: cover; object-position: 50% 58%;
}
.mk-foto-kort .mk-slor {
  background-color: rgba(26, 18, 16, .72);
  background-image: linear-gradient(180deg, rgba(26, 18, 16, .35), transparent 30%, transparent 70%, rgba(26, 18, 16, .45));
}
.mk-foto-kort .mk-hoved h3, .mk-foto-kort .mk-linje h4 { color: #fff; }
.mk-foto-kort .mk-tegn, .mk-foto-kort .mk-tegn.mk-is, .mk-foto-kort .mk-tegn.mk-drikke { background: rgba(255, 255, 255, .16); }
.mk-foto-kort .mk-antal, .mk-foto-kort .mk-note, .mk-foto-kort .mk-linje p { color: rgba(255, 255, 255, .82); }
.mk-foto-kort .mk-linje { border-bottom-color: rgba(255, 255, 255, .22); }
.mk-foto-kort .mk-pris { color: #ffccd1; }
.mk-foto-kort .mk-pris.mk-spoerg, .mk-foto-kort .mk-pris.mk-udsolgt-maerke,
.mk-foto-kort .mk-linje.mk-udsolgt .mk-txt h4 { color: rgba(255, 255, 255, .82); }
.mk-foto-kort .mk-vare-tegn { opacity: 1; }

/* ============================================================
   VARENS LAG  (13/9) — tryk på en vare og læs, hvad den er
   ------------------------------------------------------------
   Kun varer MED en beskrivelse kan trykkes (se m-menukort.html).
   Pilen ude til højre er det, der siger det; en række uden pil er
   bare en række. Skriftstørrelserne er arkets egne.
   ============================================================ */
.mk-linje.mk-kan-aabnes { cursor: pointer; }
.mk-linje.mk-kan-aabnes:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 12px; }
.mk-linje .mk-mere { flex: none; align-self: center; margin-left: -4px; font-size: 21px; line-height: 1; color: var(--muted); }
.mk-foto-kort .mk-linje .mk-mere { color: rgba(255, 255, 255, .82); }
#vare-lag .sheet-in { max-height: 88vh; overflow-y: auto; }
.vare-lag-hoved { position: relative; overflow: hidden; height: 108px; border-radius: 22px; margin-bottom: 12px; background: var(--cream2, #f7ede1); display: grid; place-items: center; }
/* Sløret, så det er stemning og ikke et billede af retten (13/9). Større end
   båndet, så sløret ikke blotter en kant. */
.vare-lag-hoved img { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); max-width: none; object-fit: cover; filter: blur(22px) saturate(130%); }
.vare-lag-hoved img:not([src]) { display: none; }
.vare-lag-hoved::after { content: ""; position: absolute; inset: 0; background: rgba(26, 18, 16, .16); }
.vare-lag-tegn { position: relative; z-index: 1; font-size: 44px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
#vare-lag h3 { font-size: 23px; line-height: 1.15; }
#vare-lag .vare-lag-pris { margin: 6px 0 0; font-family: "Host Grotesk", system-ui, sans-serif; font-size: 16px; font-weight: 600; color: var(--red-tekst, #b41f2e); }
#vare-lag #vare-tekst { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink2, #5c4a45); }
#vare-lag .sheet-cta { margin-top: 16px; }
#vare-lag .sheet-cta:empty { display: none; }
/* TAPASFADET (14/9). Laget slører fotoet, fordi det sjældent er den ret,
   man læser om — men for fadet ER kategoriens foto fadet, det samme som
   tapassiden og forsidens tapasafsnit. Derfor skarpt og større, uden
   tegnet ovenpå. Og indholdet står som små brikker, som på forsiden,
   i stedet for én lang linje med prikker. */
.vare-lag-hoved.skarp { height: 190px; }
.vare-lag-hoved.skarp img { inset: 0; width: 100%; height: 100%; filter: none; }
.vare-lag-hoved.skarp::after, .vare-lag-hoved.skarp .vare-lag-tegn { display: none; }
.vare-lag-bits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vare-lag-bits:empty { display: none; }
.vare-lag-bits span { padding: 6px 11px; border-radius: 999px; background: var(--cream2, #f7ede1); font-size: 13px; line-height: 1.3; color: var(--ink2, #5c4a45); }

/* ============================================================
   ISAFSNITTET FÅR SIT EGET FELT  (21/9)
   ------------------------------------------------------------
   Ejerens ord: isen er det, de er stolte af — logoet er en
   vaffel, og forsidens afsnit hedder "Havnens stolthed". På
   menukortet stod "Is og dessert" som en streg i teksten
   nøjagtig som "Mad" og "Drikke".

   ⚠️ RÆKKEFØLGEN ER IKKE RØRT. Mikkels valg 21/9: isen bliver,
   hvor den er (Mad → Is → Drikke), og får i stedet en genvej fra
   forsiden og sit eget felt. Et afsnit, der springer køen, ville
   sende en frokostgæst forbi isen først.

   ⚠️ OG DET ER STADIG IKKE EN BJÆLKE. Hop-båndet klæber allerede
   under topbjælken; se noten ovenfor om de to klæbende lag. Det
   her er en flade omkring overskriften, ikke et tredje lag.

   ⚠️ scroll-margin-top ER IKKE PYNT. Genvejen fra forsiden
   (#afsnit-is) ruller hertil, og uden den lander overskriften
   under den faste bjælke og hop-båndet — altså usynlig, selv om
   hoppet teknisk virkede. Samme tal som .mk-kat .panel bruger.
   ============================================================ */
#afsnit-is {
  margin-top: 22px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(214, 42, 58, .10), rgba(214, 42, 58, .03));
  box-shadow: inset 0 0 0 1px rgba(214, 42, 58, .22);
  scroll-margin-top: 172px;
}
/* Tegnet siger, hvad afsnittet er — og det er husets eget fra
   logoet, ikke et tilfældigt emoji. */
#afsnit-is::before {
  content: "🍦";
  margin-right: 9px;
  font-size: .86em;
}

/* ============================================================
   MENUKORTET PÅ EN COMPUTER ER ET TRYKT KORT  (26/9)
   ------------------------------------------------------------
   Mikkels ord med et skærmbillede af det: *"du kan se det ikke er
   desktop egnet, cinematisk og bare generelt rodet"*.

   MÅLT på 1440 px med produktionens kort (271 varer): siden var
   12.807 px høj, sortimentet stod som tre spalter kort på ~290 px
   i vidt forskellig højde (Smørrebrød 23 varer ved siden af
   Sandwich med én), så der stod huller på flere hundrede pixels,
   mørke fotokort og lyse kort skiftede tilfældigt, og en emoji stod
   foran hver af de 271 linjer. Det var telefonens kort, lagt ved
   siden af hinanden.

   Nu er det ét langt, roligt kort, som et trykt menukort:
   · afsnittene (Mad, Is og dessert, Drikke) er store overskrifter
     med en hårstreg ud til kanten
   · hver kategori er navnet over en streg og varerne i TO SPALTER
     — navn, beskrivelse og pris — uden kasser om
   · kategorierne med et foto åbner med fotoet som et bredt,
     filmisk bånd med navnet ovenpå
   · listen ude til venstre passer til skærmen, ruller for sig selv
     og viser afsnittene

   ⚠️ KUN OVER 820 PX. Telefonens kort er urørt — det er stadig
   kortene, båndet i toppen og tegnene ved hver vare.

   ⚠️ EMOJIEN VED HVER VARE ER VÆK HERUDE — MEN KUN HERUDE. Kundens
   beslutning 5/9 var emoji FREM FOR tegnede ikoner, og den står
   på telefonen. På et trykt kort med to spalter er 271 små billeder
   det, der gjorde siden rodet; kategoriens foto og navnet siger
   det. Vil Mikkel have dem tilbage, er det én linje:
   `.mk-kat .mk-linje .mk-vare-tegn{display:none}` nedenfor.
   ============================================================ */
@media (min-width: 821px) {
  .mk-sortiment {
    width: min(100vw - 80px, 1200px);
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 64px;
  }

  /* ---- listen ude til venstre ---- */
  .mk-hop {
    top: 92px;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    gap: 1px;
    padding: 2px 6px 28px 0;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent);
  }
  .mk-hop::-webkit-scrollbar { display: none; }
  .mk-hop button {
    min-height: 0;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink2, #5c4a45);
  }
  .mk-hop button:hover { background: rgba(36, 26, 23, .05); color: var(--ink); }
  .mk-hop button.on { color: #fff; background: var(--red); box-shadow: none; }
  .mk-hop .mk-hop-afsnit {
    display: block;
    margin: 18px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .mk-hop .mk-hop-afsnit:first-child { margin-top: 4px; }

  /* ---- selve kortet ---- */
  .mk-sortiment .mk-kat { display: block; }

  .mk-kat > .mk-afsnit {
    display: flex;
    align-items: baseline;
    gap: 22px;
    margin: 96px 0 34px;
    padding: 0;
    border: 0;
    font-size: 46px;
    line-height: 1.05;
    letter-spacing: -.01em;
  }
  .mk-kat > .mk-afsnit::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(36, 26, 23, .18);
  }
  .mk-kat > .mk-afsnit:first-child { margin-top: 0; }
  /* Isens afsnit er et afsnit som de andre herude — flade og tegn
     er telefonens måde at gøre det synligt i en smal stribe. */
  #afsnit-is { margin-top: 96px; padding: 0; border-radius: 0; background: none; box-shadow: none; scroll-margin-top: 104px; }
  #afsnit-is::before { content: none; }

  /* ⚠️ max-width:none — havnegrillen-desktop.css holder hvert .panel
     på 640 px midt på siden (resten af huset er én smal spalte). Her
     ER spalten kortet, og de 640 efterlod 400 px tomt til højre. */
  .mk-sortiment .mk-kat .panel {
    max-width: none;
    margin: 0 0 64px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    scroll-margin-top: 104px;
  }

  .mk-kat .mk-hoved {
    align-items: baseline;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid var(--ink);
  }
  .mk-kat .mk-tegn { display: none; }
  .mk-kat .mk-hoved h3 { font-size: 30px; line-height: 1.1; }
  .mk-kat .mk-antal { font-size: 12px; letter-spacing: .02em; }
  .mk-kat .mk-note { max-width: 64ch; margin-top: 14px; font-size: 14px; }

  .mk-kat .mk-liste { columns: 2; column-gap: 56px; margin-top: 2px; }
  .mk-kat .mk-linje {
    break-inside: avoid;
    align-items: baseline;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(36, 26, 23, .1);
  }
  .mk-kat .mk-linje:last-child { border-bottom: 1px solid rgba(36, 26, 23, .1); }
  .mk-kat .mk-linje .mk-vare-tegn { display: none; }
  .mk-kat .mk-linje h4 { font-size: 16px; }
  .mk-kat .mk-linje p { font-size: 13.5px; }
  .mk-kat .mk-linje .mk-pris { font-size: 16px; }
  /* ⚠️ PILEN ER VÆK HERUDE. Den stod efter prisen på de varer, der
     har en beskrivelse, og skubbede netop de priser ind fra kanten —
     to priser i samme spalte, der ikke flugtede. Herude viser musen
     det: hele linjen kan trykkes, og navnet bliver rødt. */
  .mk-linje .mk-mere { display: none; }
  .mk-linje.mk-kan-aabnes:hover h4 { color: var(--red-tekst, #b41f2e); }
  .mk-linje.mk-kan-aabnes:hover .mk-pris { color: var(--red-tekst, #b41f2e); }
  .mk-hop .mk-hop-tegn { display: none; }

  /* ---- kategorierne med et foto: et bredt, filmisk bånd ----
     Fotoet og sløret deler én celle med navnet; varerne står
     nedenunder på kortets lyse bund som alle andre. Sløret er en
     gradient mod bunden, hvor navnet står — ikke det tunge slør,
     telefonen har, fordi varerne ikke længere står på fotoet. */
  .mk-sortiment .mk-kat .panel.mk-foto-kort {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    isolation: auto;
    overflow: visible;
    background: none;
    color: var(--ink);
  }
  .mk-foto-kort .mk-bg,
  .mk-foto-kort .mk-slor,
  .mk-foto-kort .mk-hoved { grid-area: 1 / 1; }
  .mk-foto-kort .mk-bg {
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(240px, 26vw, 340px);
    border-radius: 20px;
    overflow: hidden;
    background: var(--cream2, #f5e9d9);
  }
  .mk-foto-kort .mk-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 55%;
  }
  .mk-foto-kort .mk-slor {
    position: relative;
    inset: auto;
    z-index: 1;
    border-radius: 20px;
    background-color: transparent;
    background-image: linear-gradient(0deg, rgba(20, 14, 12, .8) 0%, rgba(20, 14, 12, .38) 36%, rgba(20, 14, 12, 0) 68%);
  }
  .mk-foto-kort .mk-hoved {
    position: relative;
    z-index: 2;
    align-self: end;
    padding: 0 30px 24px;
    border-bottom: 0;
  }
  .mk-foto-kort .mk-hoved h3 { color: #fff; font-size: 44px; }
  .mk-foto-kort .mk-antal { color: rgba(255, 255, 255, .86); }
  .mk-foto-kort .mk-note,
  .mk-foto-kort .mk-linje p { color: var(--muted); }
  .mk-foto-kort .mk-note { margin-top: 18px; }
  .mk-foto-kort .mk-liste { margin-top: 8px; }
  .mk-foto-kort .mk-linje h4 { color: var(--ink); }
  .mk-foto-kort .mk-linje { border-bottom-color: rgba(36, 26, 23, .1); }
  .mk-foto-kort .mk-pris { color: var(--red-tekst, #b41f2e); }
  .mk-foto-kort .mk-pris.mk-spoerg,
  .mk-foto-kort .mk-pris.mk-udsolgt-maerke,
  .mk-foto-kort .mk-linje.mk-udsolgt .mk-txt h4 { color: var(--ink2, #5c4a45); }
  .mk-foto-kort .mk-linje .mk-mere { color: var(--muted); }
}
/* En smal computerskærm: én spalte varer, så navnene ikke knækker. */
@media (min-width: 821px) and (max-width: 1120px) {
  .mk-kat .mk-liste { columns: 1; }
}
/* Afsnittenes etiketter i listen findes kun herude. */
@media (max-width: 820px) {
  .mk-hop .mk-hop-afsnit { display: none; }
}