/**
 * Bestillingssiden: layout og udseende.
 *
 * EET SYSTEM, EET OMSLAG (redesign 12-09-2026, anden retning samme nat).
 *
 * Ejerens maal: en side, der ligner et professionelt art-directed
 * restaurantbrand, med Jagger.dk's disciplin som maalestok (ro, luft, store
 * fotos, faa kasser, orange kun som accent) og Wok This Ways eget brand,
 * indhold, fotos og kode. Lys flade, moerk tekst, plakatskriften kun til de
 * store oejeblikke (overskriften, restauranternes navne, kategoriernes navne),
 * almindelig laesbar skrift til alt andet.
 *
 * Alt, der handler om selve siden, staar i den foerste halvdel af filen og er
 * skrevet under omslaget `.wtw-order-page`. Maalene er variabler oeverst og
 * bruges overalt. Tre skaermstoerrelser: telefon (standard), tablet (768) og
 * skrivebord (1024), plus en bredere kolonneopdeling fra 1280. Ingen
 * `!important`, og temaets egne klasser bruges kun eet sted (sidens header,
 * nederst, med begrundelse).
 *
 * Den anden halvdel (tilvalgsvinduet, laget bag det, kurven, afhentningsfeltet
 * og kvitteringen) er uaendret i opbygning og faar sine farver herfra, saa
 * vinduet er lyst som resten.
 *
 * Alt kan bruges med en finger paa en telefon: intet felt er under 44 px.
 */

/* ------------------------------------------------------------------- farver
 * Wok This Ways orange (#ff6700, laest i sitets eget stilark) er ACCENTEN og
 * bruges til primaer handling, valgt tilstand og kurvens tal. Alt andet baeres
 * af lys flade, moerk tekst og fotos. Blokken staar paa alle pluginnets
 * rodelementer, ogsaa dem, browseren bygger uden for omslaget (vinduet), og
 * paa :root som fallback til linjerne inde i WooCommerces egne sider.
 */
:root,
.wtw-order-page,
.wtw-menu,
.wtw-menu-advarsel,
.wtw-lag,
.wtw-afhentning,
.wtw-kvittering,
.wtw-ordre-afhentning {
    --wtw-bund:    #f6f4f0;   /* sidens flade, varm off-white */
    --wtw-flade:   #ffffff;   /* et ark ovenpaa: vinduet, felter */
    --wtw-flade-2: #ecebe6;   /* stille fyld: fotoets plads, en stille knap */
    --wtw-tekst:   #141414;
    --wtw-daempet: #6e6b66;

    --wtw-kant:       #dcd9d2;
    --wtw-kant-haard: #b9b5ad;
    --wtw-kant-svag:  rgba(20, 20, 20, .08);

    --wtw-accent:      #ff6700;
    --wtw-accent-dyb:  #e25a00;
    --wtw-accent-svag: #fff0e6;

    /* Den gule bruges kun til personalets advarsler og maerkater i vinduet. */
    --wtw-gul:      #e39a12;
    --wtw-gul-svag: #fff6e0;

    --wtw-roed:      #c0392b;
    --wtw-roed-kant: #e2452c;
    --wtw-roed-svag: #fdecea;

    /* Teksten OVENPAA en fyldt orange knap: moerk giver kontrastforholdet 5,5. */
    --wtw-paa-accent: #141414;

    --wtw-skygge-loeft:  0 8px 24px rgba(0, 0, 0, .10);
    --wtw-skygge-vindue: 0 24px 64px rgba(0, 0, 0, .28);

    /* Hjoerner: 12 paa fotos og felter, 8 paa smaa knapper, 16 paa vinduet. */
    --wtw-r: 12px;
    --wtw-r-lille: 8px;
    --wtw-r-vindue: 16px;

    /* Luft inde i tilvalgsvinduet (bygges af browseren uden for omslaget). */
    --wtw-luft: 16px;

    --wtw-display: 'Staatliches', 'Oswald', 'Arial Narrow', sans-serif;
    --wtw-skrift: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
}

/* -------------------------------------------------------------------- maal
 * Kun paa omslaget, saa de kan skifte med skaermbredden eet sted (nederst).
 * Skalaen er 8-16-24-32-48-64-96.
 */
.wtw-order-page {
    --wtw-max: 1600px;      /* indholdets bredde paa de stoerste skaerme */
    --wtw-pad: 20px;        /* luft ud til kanten paa telefon */
    --wtw-gap: 12px;        /* mellem retter */
    --wtw-gap-stor: 16px;   /* mellem restauranter */

    /* Sidens egen menubjaelke er fastlaast og 80 px hoej (70 paa telefon).
       Kategorilinjen klaeber lige under den. Ejerens menu-plugin saetter den
       samme variabel paa /menu, men ikke paa bestillingssiden. */
    --wtw-site-header-offset: 80px;
    --wtw-top: calc(var(--wtw-site-header-offset) + 32px);

    --wtw-s2: 16px;
    --wtw-s3: 24px;
    --wtw-s4: 32px;
    --wtw-s5: 48px;
    --wtw-s6: 64px;
    --wtw-s7: 96px;

    --wtw-knap-h-lille: 44px;   /* knapperne: den mindste flade, en finger rammer */

    --wtw-h1: clamp(3rem, 6.5vw, 6rem);
    --wtw-h2: clamp(1.75rem, 2.6vw, 2.5rem);
    --wtw-h3: clamp(2rem, 3.2vw, 3.25rem);
    --wtw-brod: 1rem;
    --wtw-lille: .875rem;
}

/* ------------------------------------------------- ⛔ KASSEN MAALES UDVENDIGT
 * `box-sizing: border-box`: naar der staar 44 px, ER kassen 44 px. Divi
 * saetter det selv paa alting, proevekopiens tema goer ikke, og uden reglen
 * viser de to sider ikke det samme.
 */
.wtw-order-page, .wtw-order-page *,
.wtw-menu, .wtw-menu *,
.wtw-menu-advarsel, .wtw-menu-advarsel *,
.wtw-lag, .wtw-lag *,
.wtw-afhentning, .wtw-afhentning *,
.wtw-kvittering, .wtw-kvittering *,
.wtw-ordre-afhentning, .wtw-ordre-afhentning * {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------- siden
 * Omslaget er en lys flade i hele skaermens bredde. Sidens egen beholder er
 * smallere og staar midt paa skaermen, saa `calc(50% - 50vw)` traekker
 * omslaget ud til begge kanter. Sidens krop har `overflow-x: hidden` (Divi),
 * saa rullebjaelkens bredde giver ikke vandret rul.
 * Omslaget baerer ogsaa WordPress' egen klasse `alignfull`: paa et bloktema
 * (proevekopien) goer WordPress' egne layoutregler den fuldbred og overtrumfer
 * margenerne her med !important. Det er meningen.
 */
.wtw-order-page {
    width: auto;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: var(--wtw-top) 0 var(--wtw-s6);
    background: var(--wtw-bund);
    color: var(--wtw-tekst);
    font-family: var(--wtw-skrift);
    font-size: var(--wtw-brod);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Temaets egen sidetitel ("Bestil") ville staa lige over vores overskrift og
   give to overskrifter. Kun paa den side, hvor bestillingsdelen findes. */
article:has(.wtw-order-page) > .entry-title { display: none; }

.wtw-menu,
.wtw-menu-advarsel {
    max-width: var(--wtw-max);
    margin: 0 auto;
    padding: 0 var(--wtw-pad);
}

/* ------------------------------------------------- vaern mod temaets regler
 * Divi styrer lister i indholdet med `#left-area ul` og `#left-area ol`, altsaa
 * med et id og dermed staerkere end nogen klasse: prikker eller tal, 1em
 * indrykning, 23 px luft i bunden og 26 px linjehoejde. Set paa den rigtige
 * side 12-09-2026 som "1." "2." "3." over restaurantkortene. Den eneste maade
 * at vinde uden !important er et id paa vores eget omslag, og det er de
 * eneste to steder, id'et bruges. (Divi selv bruger !important til praecis
 * det samme paa WooCommerces `ul.products`.)
 * Divi giver ogsaa hvert afsnit `padding-bottom: 1em`. Afsnittene her har
 * deres egne margener, saa polstringen nulstilles under omslaget.
 */
#wtw-order-page .wtw-location-list,
#wtw-order-page .wtw-retter {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: inherit;
}

.wtw-order-page p { padding: 0; }

/* Kun for skaermlaesere. */
.wtw-skjult {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------------- hero
 * Eet stort ord og een linje. Restaurantvalget begynder lige under.
 */
.wtw-hero {
    padding: 0 0 var(--wtw-s3);
}

.wtw-hero-title {
    margin: 0 0 10px;
    font-family: var(--wtw-display);
    font-weight: 400;
    font-size: var(--wtw-h1);
    line-height: .88;
    letter-spacing: .005em;
    text-transform: uppercase;
    color: var(--wtw-tekst);
}

.wtw-hero-text {
    margin: 0;
    max-width: 38rem;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--wtw-daempet);
}

/* ----------------------------------------------------------- restauranterne
 * Sidens vigtigste element, og det skal ligne et brand og ikke et
 * kontrolpanel: et stort foto, navnet skrevet paa fotoet, en lille adresse og
 * een tydelig knap. Ingen kant, ingen kasse; fotoet ER blokken.
 */
.wtw-skift-butik {
    margin: 0 0 var(--wtw-s5);
}

.wtw-location-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--wtw-gap-stor);
    grid-template-columns: 1fr;
}

.wtw-location-card {
    position: relative;
    border-radius: var(--wtw-r);
    overflow: hidden;
    background: var(--wtw-flade-2);
}

/* Hele blokken er linket (eller en flade uden link, hvis menuen er tom). */
.wtw-location-link {
    position: relative;
    display: block;
    color: var(--wtw-flade);
    text-decoration: none;
}

.wtw-location-link:focus-visible {
    outline: 3px solid var(--wtw-tekst);
    outline-offset: -3px;
}

/* Linket fra hovedet til de andre butikker: samme blok, ingen ekstra stil. */
.wtw-skift-link {
    color: var(--wtw-flade);
}

/* Fotoet baerer blokken. 4:3 paa telefon, hvor det staar alene; lidt lavere
   paa skrivebord, hvor tre staar side om side. */
.wtw-location-media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wtw-flade-2);
}

.wtw-location-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
}

/* Et moerkt slaer i bunden af fotoet, saa den hvide tekst kan laeses. Det er
   det ene sted, der er en overgang: den er en del af fotoet, ikke pynt. */
.wtw-location-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .42) 34%,
        rgba(0, 0, 0, .10) 60%, rgba(0, 0, 0, 0) 78%);
}

/* Beskaeringen er sat pr. foto, saa skiltet bliver i billedet og teksten i
   bunden ikke slaas med det. Tallene er procent af fotoets bredde og hoejde. */
.wtw-butik-norregade .wtw-location-photo     { object-position: 50% 45%; }
.wtw-butik-frederiksalle .wtw-location-photo { object-position: 60% 22%; }
.wtw-butik-aalborg .wtw-location-photo       { object-position: 50% 30%; }

.wtw-location-link:focus-visible .wtw-location-photo {
    transform: scale(1.03);
}
@media (hover: hover) {
    .wtw-location-link:hover .wtw-location-photo { transform: scale(1.03); }
}

/* Teksten daekker hele fotoet og samler sig i bunden; etiketten "Du bestiller
   her" ligger oeverst i samme flade, saa den aldrig rammer navnet. */
.wtw-location-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0;
    padding: var(--wtw-s3);
}

/* Knappen staar altid nederst med fast luft over sig (24 px). */
.wtw-location-body::after {
    content: '';
    order: 1;
    flex: 0 0 var(--wtw-s3);
}

/* Nummeret staar i HTML'en (skaermlaesere kan bruge det), men tegnes ikke:
   paa fotoet var det stoej oven i skiltet. */
.wtw-location-index { display: none; }

.wtw-location-title {
    display: grid;
    font-family: var(--wtw-display);
    text-transform: uppercase;
    line-height: .92;
}

.wtw-location-city {
    margin-bottom: 6px;
    font-family: var(--wtw-skrift);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.wtw-location-name {
    font-size: var(--wtw-h3);
    color: var(--wtw-flade);
}

.wtw-location-address {
    margin-top: 8px;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .86);
}

/* "Du bestiller her": en linje med en orange prik OVER navnet, dér hvor de
   andre blokke har byen. Saa flugter de tre navne, og etiketten svaever ikke. */
.wtw-location-badge {
    order: -1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wtw-flade);
}

.wtw-location-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wtw-accent);
}

/* Den ene tydelige knap: orange for "Bestil nu", lys for "Se menuen" (den
   butik, gaesten allerede staar hos). */
.wtw-order-button {
    order: 2;
    display: inline-flex;
    align-items: center;
    min-height: var(--wtw-knap-h-lille);
    padding: 0 22px;
    border-radius: 999px;
    background: var(--wtw-accent);
    color: var(--wtw-paa-accent);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
}

.wtw-location-link:focus-visible .wtw-order-button {
    background: var(--wtw-accent-dyb);
}
@media (hover: hover) {
    .wtw-location-link:hover .wtw-order-button { background: var(--wtw-accent-dyb); }
}

.wtw-her .wtw-order-button {
    background: var(--wtw-flade);
    color: var(--wtw-tekst);
}

.wtw-her .wtw-location-link:focus-visible .wtw-order-button {
    background: var(--wtw-flade-2);
}
@media (hover: hover) {
    .wtw-her .wtw-location-link:hover .wtw-order-button { background: var(--wtw-flade-2); }
}

/* ------------------------------------------------------------------ hovedet
 * Menuens hoved: hvor bestiller jeg fra, og hvor er min kurv. Roligt.
 */
/* Kurven staar lige efter navnet, midt for det, ikke alene ude i hoejre side. */
.wtw-hoved {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--wtw-s4);
    padding: var(--wtw-s5) 0 var(--wtw-s3);
    border-top: 1px solid var(--wtw-kant-svag);
}

/* Staar hovedet foerst (restaurantvalget er slaaet fra, som det er som
   standard), er det sidens begyndelse: ingen streg over, og navnet i samme
   stoerrelse som en sideoverskrift. */
.wtw-menu > .wtw-hoved:first-child {
    padding-top: 0;
    border-top: 0;
}

.wtw-menu > .wtw-hoved:first-child .wtw-hoved-navn {
    font-size: clamp(2.5rem, 4.4vw, 4rem);
    line-height: .92;
}

.wtw-hoved-tekst { min-width: 0; }

.wtw-hoved-kicker {
    margin: 0 0 8px;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--wtw-daempet);
}

.wtw-hoved-navn {
    margin: 0;
    font-family: var(--wtw-display);
    font-weight: 400;
    font-size: var(--wtw-h2);
    line-height: 1;
    text-transform: uppercase;
    color: var(--wtw-tekst);
}

.wtw-hoved-adresse {
    margin: 8px 0 0;
    font-size: var(--wtw-lille);
    color: var(--wtw-daempet);
}

/* Kurven: moerk, tydelig, ikke skrigende. Tallet er den orange accent.
   Paa computer foelger den med nederst til hoejre (ejeren 14-09-2026: den
   sad lille i toppen, og man skulle rulle op). Paa telefon ligger den som en
   bjaelke i bunden (nederst i filen). Under vinduets 9999. */
.wtw-kurv-knap {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 0 22px 0 28px;
    border-radius: 999px;
    background: var(--wtw-tekst);
    color: var(--wtw-flade);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}

@media (min-width: 768px) {
    .wtw-order-page { padding-bottom: 104px; }
}

@media (hover: hover) {
    .wtw-kurv-knap:hover { background: #2a2a2a; }
}
.wtw-kurv-knap > * { color: inherit; }
.wtw-kurv-ord { letter-spacing: .01em; }

.wtw-kurv-tal {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--wtw-accent);
    color: var(--wtw-paa-accent);
    font-size: .8125rem;
    font-weight: 700;
}

.wtw-kurv-knap:focus-visible {
    outline: 3px solid var(--wtw-tekst);
    outline-offset: 2px;
}

/* ------------------------------------------------------------- kategorierne
 * En stille linje af ord, ikke en raekke piller. Den valgte kategori er
 * moerk med en orange streg under; de andre er daempede. Linjen klaeber i
 * toppen under sidens egen menubjaelke. Ankre, ikke faner: hele menuen staar
 * paa siden. `--wtw-rail-hoejde` maaler browseren selv (assets/bestilling.js).
 */
.wtw-faner {
    position: sticky;
    top: var(--wtw-site-header-offset, 0px);
    z-index: 30;
    display: flex;
    gap: var(--wtw-s3);
    margin: 0 0 var(--wtw-s5);
    padding: 4px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: var(--wtw-bund);
    border-bottom: 1px solid var(--wtw-kant-svag);
}

.wtw-faner::-webkit-scrollbar { display: none; }

/**
 * ⛔ "SIDERS" VAR SKJULT PAA EN 360 PX TELEFON (kundetesten og ChatGPT, 14-09-2026).
 *
 * Raekken kunne rulles sidelaens, men intet viste det, saa en hel kategori
 * var usynlig. Paa telefon og tablet bryder raekken nu om i stedet. Hoejden
 * maales af javascriptet (--wtw-rail-hoejde), saa et klik stadig lander
 * under raekken.
 */
@media (max-width: 767px) {
    .wtw-faner { flex-wrap: wrap; column-gap: var(--wtw-s3); row-gap: 0; overflow-x: visible; }
}

/* Omslagene om linjen og kategorierne. Paa telefon og tablet er de bare
   blokke; paa skrivebord bliver det foerste et gitter med sidebjaelken. */
.wtw-menu-krop { display: block; }
.wtw-kategorier { min-width: 0; }

.wtw-fane {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: var(--wtw-knap-h-lille);
    padding: 0 2px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--wtw-daempet);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

@media (hover: hover) {
    .wtw-fane:hover { color: var(--wtw-tekst); }
}

/* Det lille foto ud for kategorien tegnes kun i sidebjaelken (skrivebord). */
.wtw-fane-ikon { display: none; }

/* Den valgte kategori: moerk tekst og den orange streg. */
.wtw-fane.valgt {
    color: var(--wtw-tekst);
    border-bottom-color: var(--wtw-accent);
}

.wtw-fane.valgt > * { color: inherit; }

.wtw-fane:focus-visible {
    outline: 3px solid var(--wtw-tekst);
    outline-offset: 2px;
}

.wtw-kategori {
    margin-bottom: var(--wtw-s5);
    scroll-margin-top: calc(var(--wtw-site-header-offset, 0px)
                          + var(--wtw-rail-hoejde, 90px) + 12px);
}

.wtw-kategori:last-child { margin-bottom: 0; }

.wtw-kategori-navn {
    margin: 0 0 var(--wtw-s3);
    font-family: var(--wtw-display);
    font-weight: 400;
    font-size: var(--wtw-h2);
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--wtw-tekst);
}

/* ------------------------------------------------------------------- retter
 * Maden baerer, ikke fladen. Hver ret er et foto med navn, en linje og prisen
 * under, uden kasse og uden kant. "Vaelg" er en lille stille knap ved prisen,
 * som foerst bliver orange, naar man er over den.
 * Tekstens tre linjer er gitterceller (display: contents), saa prisen og
 * knappen kan staa paa samme linje. Kortet baerer kun varenummeret.
 */
.wtw-retter {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--wtw-s5) var(--wtw-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wtw-ret {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
}

.wtw-ret-tekst { display: contents; }

/**
 * ⛔ HELE KORTET BLEV DAEMPET, OGSAA DEN BESKED, DER SKULLE LAESES.
 *
 * `opacity: .55` paa hele kortet gjorde "Udsolgt i dag" til 2,14:1 og rettens
 * navn til 3,96:1 (gennemgang 7, 12-09-2026). Netop "Udsolgt i dag" er det,
 * gaesten SKAL kunne se. Nu daempes kun fotoet, og teksten staar i fuld farve.
 */
.wtw-ret.udsolgt .wtw-ret-foto { opacity: .5; }
.wtw-ret.udsolgt .wtw-ret-navn,
.wtw-ret.udsolgt .wtw-ret-beskrivelse,
.wtw-ret.udsolgt .wtw-ret-pris { color: var(--wtw-daempet); }

/* Rammen om fotoet baerer form, hjoerner og luft. Selve fotoet zoomes 16 %
   ind, saa maden fylder mere, og der er mindre tom flade om skaalen. */
.wtw-ret-foto {
    grid-column: 1 / -1;
    grid-row: 1;
    display: block;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--wtw-s2);
    border-radius: var(--wtw-r);
    overflow: hidden;
    background: var(--wtw-flade-2);
}

.wtw-ret-billede {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.16);
    transform-origin: center;
}

/* En ret uden foto faar en stille flade paa fotoets plads, saa gitteret
   holder rytmen, og oejet ikke falder i et hul. */
.wtw-ret:not(:has(.wtw-ret-billede))::before {
    content: '';
    grid-column: 1 / -1;
    grid-row: 1;
    display: block;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--wtw-s2);
    border-radius: var(--wtw-r);
    background: var(--wtw-flade-2);
}

/* Rettens navn er almindelig skrift i halvfed, ikke plakatskrift: naar alt er
   plakat, er intet plakat. */
.wtw-ret-navn {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 0 4px;
    font-family: var(--wtw-skrift);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--wtw-tekst);
}

.wtw-ret-beskrivelse {
    grid-column: 1 / -1;
    grid-row: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin: 0;
    font-size: var(--wtw-lille);
    line-height: 1.45;
    color: var(--wtw-daempet);
}

.wtw-ret-pris {
    grid-column: 1;
    grid-row: 4;
    align-self: center;
    margin: 12px 0 0;
    font-weight: 500;
    font-size: .9375rem;
    color: var(--wtw-tekst);
}

/* "Vaelg": en rund, stille "+"-knap ved prisen, tegnet med en tynd ring.
   Knappens egen tekst ("Vaelg" plus rettens navn for skaermlaesere) er
   stadig knappens navn; den er bare skrumpet til nul, og plusset tegnes.
   Moerk ved beroering, aldrig orange: orange er de store handlinger. */
.wtw-vaelg-ret {
    grid-column: 2;
    grid-row: 4;
    align-self: center;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /**
     * ⛔ 40 PX, MENS FILEN LOVEDE 44 (gennemgang 7, maalt).
     *
     * 44 x 44 px er det mindste, en finger rammer sikkert, og det er den
     * knap, gaesten trykker paa for hver eneste ret. Den 70-aarige
     * proevegaest ramte ved siden af.
     */
    width: 44px;
    height: 44px;
    margin: 12px 0 0;
    padding: 0;
    border: 1.5px solid rgba(20, 20, 20, .42);
    border-radius: 50%;
    background: transparent;
    color: var(--wtw-tekst);
    font-family: var(--wtw-skrift);
    font-size: 0;
    line-height: 1;
    cursor: pointer;
}

.wtw-vaelg-ret::before {
    content: '+';
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1;
}

/**
 * ⛔ HOVER HAENGER FAST PAA EN TELEFON (fejljagten 13-09-2026).
 *
 * De syv andre hover-regler blev pakket ind 12-09, men de to her blev glemt.
 * En finger giver hover-tilstanden og fjerner den ikke igen. Plusset ved
 * Bangkok blev derfor staaende som en fyldt sort cirkel, mens alle andre var
 * tomme ringe, og gaesten laeser det som "den her har jeg valgt".
 */
@media (hover: hover) {
    .wtw-vaelg-ret:hover {
        border-color: var(--wtw-tekst);
        background: var(--wtw-tekst);
        color: var(--wtw-flade);
    }
}

.wtw-vaelg-ret > * { color: inherit; }

.wtw-vaelg-ret:focus-visible {
    outline: 3px solid var(--wtw-tekst);
    outline-offset: 2px;
}

/* Vinduets "Laeg i kurv": den primaere handling, fyldt orange. Maalene
   (hoejde, flex, summen) staar i vinduets eget afsnit laengere nede. Den her
   grundstil stod foer sammen med retkortets knap og faldt ud, da kortet blev
   skrevet om; set paa den rigtige side som en hvid knap. */
.wtw-laeg-i-kurv {
    border: 0;
    padding: 10px 18px;
    background: var(--wtw-accent);
    color: var(--wtw-paa-accent);
    font-family: var(--wtw-display);
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

@media (hover: hover) {
    .wtw-laeg-i-kurv:hover { background: var(--wtw-accent-dyb); }
}
.wtw-laeg-i-kurv > * { color: inherit; }

.wtw-laeg-i-kurv:focus-visible {
    outline: 3px solid var(--wtw-tekst);
    outline-offset: 2px;
}

.wtw-udsolgt {
    grid-column: 2;
    grid-row: 4;
    align-self: center;
    margin: 12px 0 0;
    font-size: var(--wtw-lille);
    font-weight: 600;
    /* Den her linje er hele beskeden. Den skal staa i fuld farve (16,8:1). */
    color: var(--wtw-tekst);
}

/**
 * "Åbent nu. Første afhentning kl. 17.30."
 *
 * Linjen staar under adressen og skal LAESES, ikke raabe: samme lille
 * stoerrelse som adressen, men i den moerke tekstfarve, saa den ikke drukner.
 * Prikken foran er det eneste farvede: groen for aabent, roed for lukket.
 */
.wtw-hoved-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font-size: var(--wtw-lille);
    font-weight: 500;
    color: var(--wtw-tekst);
}

.wtw-hoved-status::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2e7d32;
}

.wtw-hoved-status.lukket::before { background: var(--wtw-roed-kant); }

/**
 * Kvitteringen, naar en ret er lagt i kurven.
 *
 * ⛔ Foer stod der ingenting, og gaesten trykkede igen (gennemgang 7 og 10).
 *
 * Den ligger fast i bunden paa telefon, hvor kurvbjaelken ogsaa er, og
 * oeverst paa skrivebord, hvor kurvknappen staar. Moerk flade, hvid tekst:
 * den skal ses i eet blik og saa forsvinde igen. Orange er forbeholdt
 * handlinger, og det her er ikke en handling.
 */
.wtw-kvit {
    position: fixed;
    left: 50%;
    bottom: 88px;
    z-index: 10000;
    /* Bliv paa een linje, saa laenge der er plads: en smal, hoej boks
       midt paa skaermen ser ud som en fejl. */
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 12px 18px;
    border-radius: var(--wtw-r-pille, 999px);
    background: var(--wtw-tekst);
    color: #ffffff;
    font-size: var(--wtw-lille);
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 6, .28);
    transform: translateX(-50%);
}

@media (prefers-reduced-motion: no-preference) {
    .wtw-kvit { animation: wtw-kvit-ind 180ms ease-out; }
}

@keyframes wtw-kvit-ind {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Paa skrivebord er der ingen kurvbjaelke i bunden, saa den staar oeverst. */
@media (min-width: 768px) {
    .wtw-kvit {
        top: calc(var(--wtw-site-header-offset, 80px) + 16px);
        bottom: auto;
    }
}

/* ------------------------------------------------------------------- bunden */
.wtw-menu-fod {
    margin-top: var(--wtw-s7);
    padding-top: var(--wtw-s3);
    border-top: 1px solid var(--wtw-kant-svag);
    font-size: .8125rem;
    color: var(--wtw-daempet);
}

.wtw-fod-navn {
    margin: 0 0 2px;
    font-weight: 600;
    color: var(--wtw-tekst);
}

/* Linket til handelsbetingelserne staar i samme rolige tone som foden. */
.wtw-fod-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (hover: hover) {
    .wtw-fod-link:hover { color: var(--wtw-tekst); }
}

.wtw-fod-linje { margin: 0; }

/* Uden ramme (proever, andre kald) staar adressen i sin egen linje. */
.wtw-menu-butik {
    margin: 0 0 var(--wtw-s3);
    color: var(--wtw-daempet);
}

.wtw-menu-tom {
    margin: var(--wtw-s4) 0;
    padding: var(--wtw-s3);
    border-radius: var(--wtw-r);
    background: var(--wtw-flade);
}

/* ------------------------------------------------ kun for personalet
 * Menuens problemer (manglende varenummer, valg uden ret). Vises kun for den,
 * der kan rette dem; en gaest ser den aldrig.
 */
.wtw-menu-advarsel {
    margin-top: 0;
    margin-bottom: var(--wtw-s3);
    border: 1px dashed var(--wtw-gul);
    border-radius: var(--wtw-r);
    background: var(--wtw-gul-svag);
    color: var(--wtw-tekst);
    padding: 14px 18px;
    font-size: .9em;
}

.wtw-menu-advarsel strong { color: var(--wtw-gul); }
.wtw-advarsel-haster { color: var(--wtw-roed); }
.wtw-advarsel-vigtigt { color: var(--wtw-gul); }

.wtw-advarsel-flere {
    color: var(--wtw-daempet);
    font-size: 0.9em;
    margin: 4px 0 0;
}

.wtw-order-page > .wtw-menu-advarsel { margin-top: 0; }

/* ------------------------------------------------------------- bevaegelse
 * Kun for dem, der ikke har bedt om ro.
 */
@media (prefers-reduced-motion: no-preference) {
    .wtw-location-photo { transition: transform .4s ease; }
    .wtw-order-button, .wtw-kurv-knap, .wtw-vaelg-ret, .wtw-fane {
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }
}

/* ----------------------------------------------------------------- vinduet */

/**
 * 520 px og ikke 560. Det er forbilledets eget tal:
 *
 *     <div class="cb_ModalBase_Root_954"
 *          style="--desktop-maxWidth:32.5rem; --borderRadius:1rem">
 *
 * 32,5 rem er 520 px, og 1 rem er 16 px hjoerner. Et smallere vindue er ikke
 * en tilfaeldighed: alle tilvalg staar under hinanden, og en linje, oejet kan
 * naa fra den ene ende til den anden, er nemmere at scanne.
 */
.wtw-vindue {
    max-width: 520px;
    margin: 0 auto;
    padding: var(--wtw-luft);
}

/**
 * Rettens foto oeverst i vinduet.
 *
 * ⛔ VINDUET HAVDE INTET BILLEDE (hold O's punkt 2, hold P byggede det).
 * Gaesten trykkede paa et kort MED et foto og landede i et vindue helt uden.
 *
 * 16:9 er forbilledets eget maal:
 *
 *     foto: <div style="aspect-ratio: 1.7777777777777777">
 *
 * ⚠️ `object-fit: cover` OG IKKE `fill`. Butikkens fotos er 3:2 og 4:3, og et
 * 4:3 billede strukket ud i 16:9 goer maden bred og flad. Beskaering tager
 * noget af toppen og bunden, og det er altid det rigtige valg paa et
 * madbillede, hvor motivet ligger i midten.
 *
 * ⚠️ Negative sidemargener, saa fotoet naar HELT ud til vinduets kant, som hos
 * forbilledet. Vinduet har 16 px polstring; uden dem ville billedet ligge som
 * et frimaerke midt paa en flade. Hjoernerne i toppen foelger vinduets egne, og
 * `overflow: hidden` er det, der klipper billedet efter dem.
 */
.wtw-vindue-foto {
    margin: calc(-1 * var(--wtw-luft)) calc(-1 * var(--wtw-luft)) var(--wtw-luft);
    /**
     * ⛔ FOTOET BLEV KLEMT VAEK PAA EN TELEFON (gennemgang 4, maalt 0 px hoejt
     * paa 390 x 844). Vinduet er en lodret flexkasse, og uden det her giver
     * rammen efter, saa snart indholdet er hoejere end skaermen. Billedet blev
     * altsaa hentet (103 KB) og aldrig vist.
     */
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--wtw-r) var(--wtw-r) 0 0;
    background: var(--wtw-flade-2);
}

.wtw-vindue-billede {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
}

.wtw-vindue-navn {
    margin: 0;
    font-family: var(--wtw-display);
    font-weight: 400;
    font-size: 1.75rem;
    letter-spacing: .03em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--wtw-tekst);
}

/**
 * Grundprisen under navnet.
 *
 * Den var daempet graa og forsvandt. Forbilledet saetter den i BRANDFARVEN og
 * i samme vaegt som en overskrift:
 *
 *     .o1t9wq6l { font: var(--cb-font-body-label);      altsaa 600 1rem
 *                 color: var(--cb-color-text-brand) }   altsaa #f08205
 *
 * Det er det foerste, gaesten skal kunne se: hvad koster den her ret,
 * foer jeg begynder at vaelge til.
 */
.wtw-vindue-grundpris {
    margin: 6px 0 0;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--wtw-tekst);   /* prisen er moerk; orange er kun til handling og valg */
    font-variant-numeric: tabular-nums;
}

/* Beskrivelse og allergener under navnet (ejeren, 12-09-2026). Rolig,
   daempet broedtekst; allergenernes ord staar moerkt, saa de findes hurtigt. */
.wtw-vindue-beskrivelse {
    margin: 0 0 12px;
    font-size: var(--wtw-lille);
    line-height: 1.5;
    color: var(--wtw-daempet);
}

.wtw-vindue-allergener {
    margin: 0 0 20px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--wtw-daempet);
}

.wtw-vindue-allergener-ord {
    font-weight: 600;
    color: var(--wtw-tekst);
}

.wtw-gruppe {
    border: 0;
    border-top: 1px solid var(--wtw-kant);
    padding: 20px 0 0;
    margin: 0 0 20px;
}

/**
 * Gruppens overskrift.
 *
 * Broedskrift i vaegt 800, ikke plakatskrift med spaerret versaler. Se
 * ⛔ SKRIFTREGLEN oeverst. Forbilledet bruger `600 1rem` og almindelige
 * bogstaver (`.l1n5x9c6 { font: var(--cb-font-body-label) }`): en
 * gruppeoverskrift er en etiket over en liste, ikke et plakathoved.
 */
.wtw-gruppe-navn {
    font-family: inherit;
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: 0;
    text-transform: none;
    padding: 0;
    color: var(--wtw-tekst);
}

/* "skal vælges" er et maerkat, ikke en saetning. Orange paa den dybe tone. */
/**
 * ⛔ MAALT TIL 2,62:1 (gennemgang 7, 12-09-2026). Kravet er 4,5:1.
 *
 * Orange #ff6700 paa lys orange #fff0e6 er smukt og naesten ulaeseligt, og
 * det er netop det maerkat, der fortaeller gaesten, hvad der skal til, foer
 * knappen virker. Moerk tekst paa den samme flade giver 16,5:1. Maerkatet er
 * stadig orange, bare som baggrund. Stoerrelsen op fra 10,9 px til 12 px.
 */
.wtw-paakraevet {
    font-family: inherit;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--wtw-accent-svag);
    color: var(--wtw-tekst);
    white-space: nowrap;
}

.wtw-gruppe-hjaelp {
    margin: 4px 0 12px;
    font-size: 0.875rem;
    color: var(--wtw-daempet);
}

/**
 * ⛔ ET TILVALG ER EN LINJE, IKKE EN KASSE.
 *
 * Her havde hver eneste tilvalgslinje sin egen kant, sin egen flade og sine
 * egne runde hjoerner. Med tolv groentsager under hinanden blev vinduet til
 * tolv graa kasser, og saa kan oejet ikke se, hvad der er vigtigt. Det er den
 * anden af de ting, der faar en side til at se ufaerdig ud: naar der er tegnet
 * en streg om alting, betyder en streg ingenting.
 *
 * Forbilledet har SLET INGEN kasser om tilvalgene. Maalt paa deres eget
 * vindue (adressen med `/itemid-...`):
 *
 *     <label class="c1i1jhc">          width: 100%; display: flex
 *       [afkrydsningsfelt]
 *       <div class="l1rxv2u5">         justify-content: space-between;
 *                                      margin-inline-start: 16px
 *         <span>Ekstra cashewnoedder</span>
 *         <span class="pxx7ugv">+9,00 kr.</span>
 *       </div>
 *     </label>
 *     .c1i1jhc + .c1i1jhc { margin-top: 16px }
 *
 * Altsaa: navn til venstre, pris til hoejre, 16 px ned til den naeste, og
 * ingenting andet.
 *
 * Her er kanten beholdt som GENNEMSIGTIG. Det er ikke pynt: naar linjen
 * vaelges, skifter kanten farve, og hvis den ikke fandtes i forvejen, ville
 * hele linjen hoppe 2 px, hver gang gaesten trykker.
 *
 * De 44 px bliver staaende. Det er fingerens maal, og det aendrer sig ikke af,
 * at kassen om linjen er vaek.
 *
 * ⛔ RAEKKEN ER EN FLEXKASSE OG IKKE ET GITTER. DET ER EN RIGTIG FEJL, HOLD N
 *    HAR SET PAA ET SKAERMBILLEDE.
 *
 * Her stod `grid-template-columns: 1fr auto auto auto auto`. Det passer paa en
 * TAELLERRAEKKE, hvor navnet er det foerste barn og derfor faar den brede
 * `1fr`-spalte. Men en ENTEN-ELLER-raekke ser saadan ud:
 *
 *     <label class="wtw-tilvalg">
 *       <input class="wtw-vaelg">            <- foerste barn er PRIKKEN
 *       <span class="wtw-tilvalg-navn">Aeggenudler</span>
 *       <span class="wtw-tilvalg-pris"></span>
 *
 * Prikken er 20 px bred og fik hele den brede spalte. Navnet blev skubbet ud i
 * en `auto`-spalte yderst til hoejre. Paa skaermbilledet stod prikken helt ude
 * i venstre kant, navnet helt ude i hoejre kant, og der var cirka 300 px tomt
 * imellem. Og fordi hver `auto`-spalte er saa bred som sit eget indhold, stod
 * "Aeggenudler", "Udonnudler", "Risnudler", "Gule nudler" og "Jasminris"
 * takkede i venstre side, som en hoejrestillet liste. Gruppen "Groentsager"
 * lige under saa helt anderledes ud, fordi dens foerste barn ER navnet.
 *
 * En flexkasse kan ikke lave den fejl. Der er ingen spalter at havne i den
 * forkerte af: hvert barn staar efter det forrige, og det ene barn, der skal
 * fylde resten, siger det selv (`.wtw-tilvalg-navn { flex: 1 }`). Det er ogsaa
 * det, forbilledet goer: `.c1i1jhc { width: 100%; display: flex }`.
 */
.wtw-tilvalg {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 10px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    border-radius: var(--wtw-r-lille);
    background: transparent;
    color: var(--wtw-tekst);
}

/* Kun etiketten er trykbar. En taellerraekke er en <div>, og der sker ingenting
   ved at klikke midt i den, saa den skal heller ikke se trykbar ud. */
label.wtw-tilvalg { cursor: pointer; }

@media (hover: hover) {
    .wtw-tilvalg:hover { background: var(--wtw-flade-2); }
}

/**
 * Et valgt tilvalg faar den orange kant.
 *
 * ⚠️ DE TO REGLER MAA IKKE SKRIVES SOM EEN LISTE. Kender browseren ikke
 * `:has()`, smider den HELE listen vaek, ogsaa den foerste halvdel, og saa
 * mister taellerraekkerne ogsaa deres markering. Hver for sig taber man kun
 * den, browseren ikke forstaar.
 */
.wtw-tilvalg.valgt {
    border-color: var(--wtw-accent);
    background: var(--wtw-accent-svag);
}

.wtw-tilvalg:has(.wtw-vaelg:checked) {
    border-color: var(--wtw-accent);
    background: var(--wtw-accent-svag);
}

.wtw-tilvalg-antal.valgt { font-weight: 600; }

.wtw-tilvalg-pris {
    color: var(--wtw-daempet);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    /* Laesbar skrift er bredere end plakatskriften: paa en telefon brød
       "+ 9,00 kr." i to linjer ved "Shiittake svampe" (14-09-2026). */
    white-space: nowrap;
}

/* "højst 3": et lille gult maerkat, samme slags som "skal vælges". */
/* ⛔ MAALT TIL 2,19:1 (gennemgang 7). #8a5a00 paa den samme lyse gule er 5,5:1. */
.wtw-tilvalg-hoejst {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--wtw-gul-svag);
    color: #8a5a00;
    white-space: nowrap;
}

/* Et tilvalg, der ikke kan vaelges lige nu. Det skal kunne LAESES, saa det
   daempes med farve og ikke med gennemsigtighed.
   ⚠️ `border-color` SKAL staa her. De almindelige linjer har nu en
   gennemsigtig kant, og en stiplet kant i gennemsigtig er ingen kant. */
.wtw-tilvalg-lukket {
    cursor: not-allowed;
    border-style: dashed;
    border-color: var(--wtw-kant);
    background: transparent;
    color: var(--wtw-daempet);
}

.wtw-tilvalg-lukket-tekst {
    font-size: 0.8rem;
    color: var(--wtw-daempet);
    font-style: italic;
}

.wtw-op, .wtw-ned, .wtw-antal-op, .wtw-antal-ned {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--wtw-kant);
    border-radius: 6px;
    background: var(--wtw-flade-2);
    color: var(--wtw-tekst);
    cursor: pointer;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
}

@media (hover: hover) {
    .wtw-op:hover, .wtw-ned:hover,
    .wtw-antal-op:hover, .wtw-antal-ned:hover {
        border-color: var(--wtw-accent);
        color: var(--wtw-accent);
    }
}

.wtw-stk, .wtw-antal-tal {
    min-width: 2ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--wtw-tekst);
    font-weight: 700;
}

/**
 * ⛔ FODEN KLAEBER I BUNDEN AF VINDUET.
 *
 * Foer laa den nederst i det, der ruller. Har en ret ti tilvalg, ruller baade
 * summen og "Laeg i kurv" op over kanten, og gaesten sidder og vaelger uden at
 * kunne se, hvad det koster, eller hvor hun skal trykke. Det er sandsynligvis
 * den enkeltting i vinduet, der koster flest bestillinger.
 *
 * Forbilledet klaeber:
 *
 *     <footer class="fk6yocz f5q8zk5 seiwsu1">
 *         position: absolute; bottom: 0; left: 0; right: 0; z-index: 100
 *     .c1fif10w { padding-top: 1rem; padding-bottom: 1rem }
 *     .f1adhmzp { display: grid;
 *                 grid-template-columns: minmax(136px, 1fr) 2fr }
 *
 * ⛔ OG DEN KLAEBEDE STADIG IKKE HELT NEDE. HOLD N HAR SET DET.
 *
 * Paa skaermbilledet laa "Laeg i kurv" cirka 25 px OVER vinduets underkant, og
 * raekken "Ekstra aeg" stak frem nedenunder den. Det ser ud, som om knappen
 * svaever midt i listen og daekker for en vare.
 *
 * Aarsagen er en regel, man ikke opdager ved at laese: en klaebende kasse maa
 * ikke forlade sin FORAELDERS INDHOLDSKASSE. Vinduet ruller, og det har 16 px
 * polstring hele vejen rundt, saa dets indholdskasse slutter 16 px over den
 * synlige kant. `bottom: 0` bad foden om at staa ved den synlige kant, men
 * spaerringen vandt, og foden blev staaende de 16 px oppe. En negativ
 * bundmargen kunne ikke redde den: spaerringen gaelder ogsaa den.
 *
 * Loesningen er at fjerne polstringen NEDE i vinduet, saa indholdskassen naar
 * helt ud til kanten. Se `.wtw-lag .wtw-vindue` nedenfor. Foden laegger selv
 * sine 16 px, saa der er lige saa meget luft som foer, den er bare inde i
 * foden i stedet for under den.
 *
 * ⚠️ DE NEGATIVE SIDEMARGENER ER IKKE PYNT. Uden dem ville foden klaebe INDE i
 * polstringen, og man ville kunne se indholdet rulle forbi i de 16 px paa hver
 * side af den. Med dem daekker foden hele bredden.
 *
 * ⛔ TAELLER, SUM OG KNAP STAAR PAA EEN LINJE.
 *
 * Her stod `flex: 1 0 100%` paa knappen, altsaa "tag hele naeste linje". Paa
 * skaermbilledet fyldte foden 125 px af et vindue, der i forvejen ikke kunne
 * vise alle groentsagerne. Forbilledet bruger EEN linje:
 *
 *     .f1adhmzp { display: grid; grid-template-columns: minmax(136px, 1fr) 2fr }
 *
 * altsaa taelleren cirka en tredjedel og knappen to tredjedele. Det er den
 * fordeling, der er skrevet af her: taelleren fylder sit eget (cirka 130 px),
 * summen staar lige efter, og knappen tager resten. Foden er nu 88 px i stedet
 * for 125, og gaesten kan se to varer mere ad gangen.
 *
 * `flex-wrap` bliver staaende: bliver vinduet smallere end de tre ting til
 * sammen, falder knappen ned paa sin egen linje af sig selv i stedet for at
 * blive maste. Prisen kan foerst komme IND i knappen, naar HTML'en laves om,
 * og det staar som forslag i FORBILLEDE-BESTILLINGSSIDE.md, punkt 6.
 */
.wtw-vindue-fod {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--wtw-kant);
    padding: var(--wtw-luft);
    margin: var(--wtw-luft) calc(-1 * var(--wtw-luft)) 0;
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--wtw-flade);
}

.wtw-antal { display: flex; align-items: center; gap: 8px; }

/**
 * Summen.
 *
 * Broedskrift i vaegt 800 og ikke plakatskrift, se ⛔ SKRIFTREGLEN oeverst.
 * Tal i en spaerret plakatskrift er svaere at laese, og det her er det ene
 * tal paa siden, gaesten SKAL kunne laese rigtigt.
 *
 * ⚠️ HER STOD `margin-left: auto`, OG DEN SPISTE HELE FODEN.
 *
 * En automatisk margen i en flexkasse tager AL den ledige plads, foer nogen
 * anden faar lov at vokse. Saa laenge knappen laa paa sin egen linje, gjorde
 * det ingen skade. Skal de tre ting staa paa een linje, betyder den, at
 * knappen aldrig kan blive bredere end sin egen tekst. Nu staar summen taet
 * paa knappen, saa prisen og det, man trykker paa, hoerer sammen. Det er saa
 * taet paa forbilledets "prisen inde i knappen", som vi kan komme uden at
 * roere HTML'en.
 */
.wtw-sum {
    flex: 0 0 auto;
    font-family: inherit;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0;
    color: var(--wtw-accent);
    font-variant-numeric: tabular-nums;
}

/**
 * "Laeg i kurv" er sidens vigtigste knap og skal se saadan ud.
 *
 * 56 px hoej er forbilledets eget maal
 * (`--al-c-shared-control-large-height: 56px`), hjoernerne 12 px
 * (`--al-corner-radius-large: 12px`), og den fylder hele bredden
 * (`data-stretch="true"`).
 *
 * ⭐ OG PRISEN STAAR NU INDE I DEN (hold P, 04-09-2026). Forbilledet har
 * teksten til venstre og totalen til hoejre inde i selve knappen:
 *
 *     <div style="justify-content: space-between; width: 100%">
 *         <span>Tilfoej til bestilling</span>
 *         <span style="font-weight:500">109,00 kr.</span>
 *
 * Hold O kunne kun flytte summen taet PAA knappen, fordi de ikke maatte roere
 * HTML'en. Nu er `<output class="wtw-sum">` flyttet ind, og `space-between` er
 * det, der skubber de to fra hinanden.
 *
 * ⛔ OG FARVEN VAR USYNLIG I FOERSTE UDGAVE. HOLD P HAR SET DET PAA ET
 *    SKAERMBILLEDE.
 *
 * `.wtw-laeg-i-kurv > * { color: inherit }` staar laengere oppe i filen og saa
 * ud til at klare det. Men `.wtw-sum` har sin egen `color: var(--wtw-accent)`,
 * de to regler er lige staerke (een klasse hver, `*` taeller ikke), og saa
 * vinder den, der staar SIDST. `.wtw-sum` staar under. Prisen blev altsaa
 * orange paa en orange knap, og paa billedet saa knappen ud til kun at sige
 * "Laeg i kurv".
 *
 * Reglen nedenfor har TO klasser og staar samtidig sidst, saa den vinder begge
 * veje. Det er den samme faelde, hold N brugte en hel runde paa i telefonens
 * vindue: en @media-regel taeller ikke mere end en almindelig.
 */
.wtw-laeg-i-kurv {
    flex: 1 1 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    border-radius: var(--wtw-r);
    /* Laesbar skrift som kassens knap (14-09-2026): prisen staar inde i
       knappen, og Staatliches har kun store bogstaver. Reglen oeverst i filen
       har plakatskriften; den her staar senere og vinder. */
    font-family: var(--wtw-skrift);
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    font-size: 1.05rem;
    text-align: left;
}

/* Prisen inde i knappen er stadig et tal, gaesten skal kunne laese praecist,
   men den maa ikke raabe hoejere end det, knappen GOER. 1,05 rem er knappens
   egen stoerrelse; den frittstaaende sum var 1,35, og saa stod prisen stoerre
   end handlingen. */
.wtw-laeg-i-kurv .wtw-sum {
    color: inherit;
    font-size: 1.05rem;
    white-space: nowrap;
}

.wtw-laeg-ord {
    white-space: nowrap;
}

/**
 * En rigtig fejl. Roed, men brandets roed og ikke WordPress'.
 *
 * Kassen maler sin egen baggrund, saa teksten staar paa noget, vi kender:
 * #ff8a7a paa #3a1512 er kontrastforholdet 7,1.
 */
/**
 * ⛔ BESKEDEN LAA BAG DEN KLAEBENDE FOD (fejljagten 13-09-2026).
 *
 * `vis()` ruller beskeden frem med `scrollIntoView({ block: 'nearest' })`,
 * som stiller beskedens underkant lige ved vinduets underkant. Men foden
 * (`.wtw-vindue-fod`) klaeber dernede med fyldt baggrund og er 89 px hoej,
 * saa beskeden landede praecis bagved den. Gaesten fik ingen forklaring paa,
 * hvorfor der ikke skete noget.
 *
 * `scroll-margin-bottom` er den plads, rulningen skal holde fri. 104 px er
 * fodens hoejde plus luft.
 */
.wtw-vindue-fejl {
    /* 104 px holdt paa computer. Paa en 360 px telefon er foden to raekker og
       145 px hoej, og saa laa beskeden bag den igen (kundetesten 14-09-2026). */
    scroll-margin-bottom: 180px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--wtw-roed-kant);
    border-radius: 0 var(--wtw-r-lille) var(--wtw-r-lille) 0;
    background: var(--wtw-roed-svag);
    color: var(--wtw-roed);
}

@media (prefers-reduced-motion: no-preference) {
    .wtw-fane, .wtw-vaelg-ret, .wtw-laeg-i-kurv, .wtw-ret, .wtw-tilvalg,
    .wtw-kurv-knap, .wtw-skift-link {
        transition: background-color 140ms ease, border-color 140ms ease,
                    color 140ms ease, transform 160ms ease, box-shadow 160ms ease;
    }

    /**
     * Kortet vokser en anelse, naar musen er paa det.
     *
     * Foer loeftede det sig 2 px OG skiftede til en meget kraftigere skygge.
     * Paa en sort side kan man ikke se en skygge blive kraftigere, saa det
     * eneste, der skete, var et lille hop. Forbilledet skalerer i stedet:
     *
     *     @media (width>=640px) { .d1sxhxe1:hover { transform: scale(1.03) } }
     *
     * 1,02 og ikke 1,03, fordi vores kort er bredere end deres og et helt
     * kort paa 900 px, der vokser 3 %, flytter sig 27 px.
     */
    @media (hover: hover) {
        .wtw-ret:hover {
            transform: scale(1.02);
            box-shadow: var(--wtw-skygge-loeft);
        }
    }
}

/**
 * Telefonen.
 *
 * ⚠️ GITTERET SKAL IKKE PILLES VED HER. `.wtw-retter` bruger
 * `minmax(min(100%, 340px), 1fr)`, og `min(100%, ...)` er praecis det, der
 * goer, at der af sig selv bliver een spalte, saa snart der ikke er plads til
 * to. Forbilledet skifter til een spalte ved 719 px, og vi rammer det samme
 * uden at skrive et eneste tal her.
 *
 * ⛔ FOER STOD DER `minmax(148px, 1fr)`, altsaa TO kort ved siden af hinanden
 * paa en telefon. Med et vandret kort er 148 px umuligt: fotoet alene er 148.
 * Linjen er vaek, og det er ikke en forglemmelse.
 *
 * Vinduet glider op fra bunden i stedet for at staa midt paa skaermen. Det er
 * forbilledets egen opfoersel (`data-size-mobile-type="bottomSheet"`), og det
 * er ogsaa den eneste maade, en 56 px knap kan naas med tommelfingeren.
 */
@media (max-width: 480px) {
    .wtw-menu { padding: 14px; border-radius: 0; }
    /* Fotosoejlen bliver smallere paa en telefon, og fordi bredden staar
       eet sted, foelger baade fotoet og brandfladen bagved med. */
    .wtw-ret { padding: 12px; --wtw-foto: 112px; }


    /* Der er ikke plads til 8 px mellem fem ting paa en telefon. Navnet
       flexer, saa det er det, der giver plads, og knapperne beholder deres. */
    .wtw-tilvalg { gap: 4px; padding: 6px 4px; }

    /**
     * ⛔ VINDUETS TELEFONREGLER STAAR IKKE HER. DE STAAR NEDERST I FILEN.
     *
     * Her stod `.wtw-lag { align-items: flex-end; padding: 0 }` og vinduets
     * runde hjoerner kun foroven, altsaa hele det, der skulle faa vinduet til
     * at glide op fra bunden paa en telefon. Det virkede ALDRIG.
     *
     * En `@media`-regel taeller ikke mere end en almindelig regel. Er de lige
     * staerke, vinder den, der staar SIDST i filen. `.wtw-lag { padding: 16px }`
     * og `.wtw-lag .wtw-vindue { max-height: 90vh }` staar laengere nede, saa de
     * vandt over telefonreglerne her, hver eneste gang.
     *
     * Hold N saa det paa et skaermbillede i 390 px bredde: vinduet svaevede med
     * 16 px luft hele vejen rundt og runde hjoerner i alle fire hjoerner, i
     * stedet for at ligge fast i bunden. Ingen maaling paa CSS'en havde fanget
     * det, for reglerne stod der jo. De blev bare aldrig brugt.
     *
     * Reglerne er flyttet ned under `.wtw-lag`, hvor de kan naa den.
     */
}

/* ------------------------------------------------------------------- laget */

/**
 * Skyggen bag vinduet er 52 % og ikke 66 %.
 *
 * Forbilledet: `<div style="background-color: rgba(0, 0, 6, 0.52)">`. De
 * seks blaa er ikke en fejl; en anelse blaat i sort ser mindre doedt ud end
 * ren sort. Ved 66 % forsvinder siden bagved helt, og saa mister gaesten
 * fornemmelsen af, hvor hun er.
 */
.wtw-lag {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 6, 0.52);
    overflow-y: auto;
}

/**
 * Selve vinduet.
 *
 * ⚠️ HER STOD `background: #fff; color: #1b1611`, altsaa et hvidt ark midt paa
 * en sort side. Nu er det pluginnets egen moerke flade, saa vinduet ligner
 * resten af siden i stedet for at springe ud af den.
 *
 * Hjoernerne er 16 px, som i forbilledet (`--borderRadius: 1rem`), og skyggen
 * er den ene kraftige, der er tilbage i stilarket: et vindue OVER hele siden
 * er det eneste sted, en rigtig skygge giver mening.
 */
.wtw-lag .wtw-vindue {
    /* Luk-knappen ligger absolut i forhold til vinduet. */
    position: relative;
    background: var(--wtw-flade);
    color: var(--wtw-tekst);
    border: 1px solid var(--wtw-kant);
    border-radius: var(--wtw-r-vindue);
    box-shadow: var(--wtw-skygge-vindue);
    max-height: 90vh;
    overflow-y: auto;
    width: 100%;
    /**
     * ⛔ HER STOD `font-family: inherit`, OG PAA DET RIGTIGE SITE ARVEDE VINDUET
     * DIVIS PLAKATSKRIFT (ejeren 14-09-2026: "svaer at laese").
     *
     * Vinduet bygges ind i `<body>`, uden for omslaget, saa det arver temaets
     * skrift. Paa proevekopien er den almindelig, paa wokthisway.dk er den
     * Staatliches, som kun har store bogstaver. Beskrivelse, allergener,
     * tilvalg og priser stod alle med plakatskrift. Nu siger vinduet selv, hvad
     * det bruger, og kun rettens navn (`.wtw-vindue-navn`) har plakatskriften.
     */
    font-family: var(--wtw-skrift);
    /**
     * ⚠️ 16 px ER IKKE TEMAETS 18. Vinduet bliver bygget ind i `<body>`, altsaa
     * uden for .wtw-menu, saa det arver sidens egen skriftstoerrelse. Paa
     * proevekopien er den 18 px, og saa stod tilvalgene stoerre end
     * overskrifterne over dem. 16 px er ejerens eget tal paa wokthisway.dk/menu
     * (`.wtw-menu-page { font-size: 16px }`), og saa ser vinduet ens ud, uanset
     * hvilken side det staar paa.
     */
    font-size: 16px;
    /* Se ⛔ FEJLBESKEDEN nedenfor: den er den eneste grund til, at vinduet er
       en lodret flexkasse. */
    display: flex;
    flex-direction: column;
    /**
     * ⛔ INGEN POLSTRING NEDE. DET ER DEN, DER LOD FODEN KLAEBE FOR HOEJT.
     *
     * En klaebende kasse maa ikke forlade sin foraelders indholdskasse, og med
     * 16 px polstring nede sluttede den 16 px over den synlige kant. Se den
     * lange forklaring ved `.wtw-vindue-fod`. Luften er ikke vaek, den er
     * flyttet ind i foden, som laegger sine egne 16 px.
     */
    padding-bottom: 0;
}

/**
 * ⛔ FEJLBESKEDEN SKAL LIGGE OVER DEN KLAEBENDE FOD, IKKE UNDER DEN.
 *
 * I HTML'en staar `<p class="wtw-vindue-fejl">` EFTER `.wtw-vindue-fod`, og
 * det maa den blive ved med: prøverne læser rækkefølgen. Men naar foden
 * klaeber i bunden, ville "Vaelg en sauce" lande under den og vaere usynlig,
 * lige praecis i det oejeblik gaesten trykker og ikke forstaar hvorfor der
 * ikke sker noget.
 *
 * `order: 1` paa foden bytter de to om paa skaermen uden at roere HTML'en.
 * Alt andet i vinduet har `order: 0` og bliver staaende i sin raekkefoelge,
 * saa foden ender sidst og fejlbeskeden lige over den.
 */
.wtw-vindue-fod { order: 1; }

/**
 * Luk-knappen (gennemgang 1 og 7: der var ingen).
 *
 * Den ligger oven paa fotoets hjoerne, derfor den lyse flade bagved: et kryds
 * alene forsvinder paa et moerkt madfoto. 44 x 44 px er det mindste, en finger
 * rammer sikkert.
 */
/**
 * ⛔ KRYDSET RULLEDE VAEK (fejljagten 13-09-2026).
 *
 * Her stod `position: absolute`. Vinduet ruller selv
 * (`.wtw-lag .wtw-vindue { overflow-y: auto }`), og et absolut placeret barn
 * i en rullende kasse ruller MED indholdet. `top: 8px` var altsaa 8 px fra
 * toppen af de 2.400 px indhold, ikke fra toppen af skaermen. Krydset var
 * vaek efter det foerste rul, og paa en telefon er der ingen Escape-tast.
 * Det var netop det problem, krydset blev lavet for at loese.
 *
 * `sticky` bliver haengende i toppen af det synlige vindue hele vejen ned.
 * Den negative bundmargen er til for, at knappen ikke skubber fotoet ned:
 * den fylder 44 px plus 8 px luft, og dem giver vi tilbage.
 */
.wtw-luk {
    position: sticky;
    top: 8px;
    align-self: flex-end;
    margin: 8px 8px -52px auto;
    z-index: 3;
    width: 44px;
    height: 44px;
    /**
     * ⚠️ FLEXKASSEN MASEDE KNAPPEN TIL 24 PX (maalt paa kopien efter at den
     * blev klaebende). Vinduet er en lodret flexkasse med en hoejdegraense,
     * og et flexbarn maa som udgangspunkt skrumpe. En trykflade under 44 px
     * er praecis det, knappen blev lavet for at undgaa.
     */
    flex: 0 0 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--wtw-r-pille, 999px);
    background: var(--wtw-flade);
    box-shadow: 0 1px 4px rgba(0, 0, 6, .28);
    color: var(--wtw-tekst);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

@media (hover: hover) {
    .wtw-luk:hover { background: var(--wtw-flade-2); }
}

/**
 * ⛔ KRYDSET LAA OVEN PAA +-KNAPPEN (10-kunders testen 14-09-2026).
 *
 * Naar vinduet er rullet (`.wtw-rullet`, sat af javascriptet), faar toppen en
 * hvid bjaelke paa hele bredden bag krydset. Det, der ruller ind under, er
 * skjult i stedet for at kunne trykkes paa gennem krydset. Oeverst, over
 * fotoet, er der ingen bjaelke, saa fotoet staar helt.
 *
 * ⚠️ `::before` ER VINDUETS FOERSTE BARN, foer krydset, og klaeber ogsaa. Den
 * negative bundmargen giver pladsen tilbage, saa intet skubbes ned.
 */
.wtw-lag .wtw-vindue.wtw-rullet::before {
    content: '';
    position: sticky;
    /* Vinduet har polstring (--wtw-luft); bjaelken skal helt ud til kanterne og op til toppen. */
    top: calc(-1 * var(--wtw-luft));
    z-index: 2;
    flex: 0 0 calc(60px + var(--wtw-luft));
    height: calc(60px + var(--wtw-luft));
    margin: calc(-1 * var(--wtw-luft)) calc(-1 * var(--wtw-luft)) -60px;
    background: var(--wtw-flade);
    box-shadow: 0 1px 0 var(--wtw-kant-svag);
}

.wtw-vindue-hoved {
    margin-bottom: 20px;
}

/**
 * ⛔ TELEFONEN: VINDUET GLIDER OP FRA BUNDEN.
 *
 * Blokken staar HER og ikke oppe hos de andre telefonregler, og det er ikke
 * rod. En `@media`-regel er lige saa staerk som en almindelig regel, saa den
 * skal staa EFTER det, den skal aendre. Stod den foer `.wtw-lag`, ville
 * `padding: 16px` og `max-height: 90vh` vinde, og telefonreglerne ville ligge
 * i filen og se rigtige ud uden nogensinde at blive brugt. Det var praecis det,
 * der skete indtil hold N tog et billede i 390 px bredde.
 *
 * Selve opfoerslen er forbilledets egen (`data-size-mobile-type="bottomSheet"`):
 * vinduet ligger fast i bunden, fylder hele bredden, runder kun foroven og
 * lader de oeverste 48 px af skaermen staa aabne, saa gaesten kan se, at der er
 * en side bagved. Det er ogsaa den eneste maade, "Laeg i kurv" kan naas med en
 * tommelfinger.
 */
@media (max-width: 480px) {
    .wtw-lag {
        align-items: flex-end;
        padding: 0;
    }

    .wtw-lag .wtw-vindue {
        /**
         * ⛔ 100vh KLIPPER TOPPEN AF VINDUET PAA EN IPHONE (gennemgang 7).
         *
         * Safari regner `vh` ud fra skaermen UDEN vaerktoejslinjen, saa naar
         * linjen er fremme, er 100vh hoejere end det, gaesten kan se, og
         * vinduets top forsvinder op under adresselinjen. `dvh` er den
         * hoejde, der faktisk er plads i lige nu.
         *
         * ⚠️ `vh`-linjen bliver staaende FOERST som reserve: en browser, der
         * ikke kender `dvh`, springer den naeste linje over og beholder den.
         * Rækkefølgen er derfor ikke til pynt.
         */
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
        border-radius: var(--wtw-r-vindue) var(--wtw-r-vindue) 0 0;
        border-bottom: 0;
    }
}

/* ------------------------------------------------------ kurven og resten
 *
 * De her manglede. HTML'en lovede et udseende, som CSS'en ikke leverede, og
 * det tydeligste var indrykningen af tilvalg i kurven, som er hele pointen
 * med at gruppere dem. En proeve holder oeje med det nu.
 *
 * ⚠️ ZONE 2: linjen staar i WooCommerces egen kurvtabel, som TEMAET tegner.
 * Der er ingen baggrund, vi kender, saa der bliver ikke sat en fast farve.
 * Teksten arver temaets egen og bliver daempet med gennemsigtighed. Det virker
 * begge veje: paa den moerke side bliver hvid til cirka #c1c1c1 (8,9), paa den
 * lyse bliver naesten-sort til cirka #5f5f5f (6,4). Begge er over 4,5.
 */

.wtw-kurv-tilvalg {
    display: inline-block;
    padding-left: 1.5em;
    color: inherit;
    opacity: .72;
    font-size: 0.9em;
}

/**
 * "(hovedretten er fjernet)" i kurven.
 *
 * ⚠️ Her stod #8a1f20, en moerkeroed, der forsvinder helt paa en sort side.
 * Og der findes IKKE een roed, der klarer 4,5 baade paa #212121 og paa hvid:
 * regner man efter, topper den bedst mulige enkeltfarve omkring 4,0. Derfor
 * en gennemsigtig roed TONING bag teksten i stedet, mens teksten selv arver
 * temaets farve. Toningen giver 13,4 paa moerk og 12,7 paa lys.
 */
.wtw-loes {
    background: rgba(226, 69, 44, .18);
    border-radius: 4px;
    padding: 1px 6px;
    color: inherit;
    font-style: normal;
    font-weight: 600;
    font-size: 0.85em;
}

/* ------------------------------------------------------- afhentningsfeltet
 *
 * Ogsaa zone 2: feltet staar midt i WooCommerces betalingsside.
 */

.wtw-afhentning {
    margin: 24px 0;
    color: inherit;
}

.wtw-afhentning h3 {
    margin: 0 0 8px;
    font-family: var(--wtw-display);
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: inherit;
}

.wtw-felt {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/**
 * ⚠️ Der bliver MED VILJE ikke sat farve paa selve rullelisten. En <select>
 * tegnes af browseren, og saetter man kun den ene halvdel, faar man sort tekst
 * paa sort liste paa nogle maskiner. Uden vores indblanding er den laesbar
 * begge steder.
 */
.wtw-felt select {
    min-height: 44px;
    padding: 8px 12px;
    font: inherit;
    border-radius: 6px;
}

.wtw-afhentning-lukket {
    padding: 12px 14px;
    border-left: 3px solid var(--wtw-roed-kant);
    border-radius: 0 var(--wtw-r-lille) var(--wtw-r-lille) 0;
    background: rgba(226, 69, 44, .14);
    color: inherit;
    margin: 0 0 12px;
}

/* "Der kan ikke bestilles til i dag" er en oplysning, ikke en fejl. Gul. */
.wtw-afhentning-ikke-i-dag {
    padding: 12px 14px;
    border-left: 3px solid var(--wtw-gul);
    border-radius: 0 var(--wtw-r-lille) var(--wtw-r-lille) 0;
    background: rgba(251, 173, 30, .14);
    color: inherit;
    margin: 0 0 12px;
}

/* ------------------------------------------------ kvitteringen og ordren
 *
 * Zone 2 igen: kvitteringen tegnes paa WooCommerces tak-side.
 */

.wtw-kvittering,
.wtw-ordre-afhentning {
    margin: 24px 0;
    padding: 16px 18px;
    border-left: 3px solid var(--wtw-accent);
    border-radius: 0 var(--wtw-r-lille) var(--wtw-r-lille) 0;
    background: rgba(255, 103, 0, .10);
    color: inherit;
}

.wtw-kvittering h2,
.wtw-ordre-afhentning h4 {
    margin: 0 0 10px;
    font-family: var(--wtw-display);
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: inherit;
}

.wtw-kvittering ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wtw-kvittering li {
    padding: 4px 0;
}

/* Ordren er betalt, men bonnen er ikke kvitteret endnu: gul, ikke orange. */
.wtw-kvittering-venter {
    border-left-color: var(--wtw-gul);
    background: rgba(251, 173, 30, .14);
}

/* Standset. Roed toning, samme slags som i kurven. */
.wtw-kvittering-standset {
    border-left-color: var(--wtw-roed-kant);
    background: rgba(226, 69, 44, .14);
}

/**
 * Butikkens allergenkoder under tilvalgets navn ("gluten og fisk · vegansk").
 *
 * Egen linje, mindre og daempet: den skal kunne findes af den, der leder
 * efter den, og ikke staa i vejen for den, der bare vaelger mad.
 */
.wtw-tilvalg-maerkat {
    display: block;
    margin-top: 2px;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--wtw-daempet);
}

/* Navnet paa et tilvalg i vinduet. */
.wtw-tilvalg-navn {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.35;
    /* break-word og ikke anywhere: "Bambuss/kud" og "Champig/non" blev delt midt
       i ordet paa 360 px (kundetesten 14-09-2026). Nu deles kun et ord, der
       slet ikke kan staa paa en linje. */
    overflow-wrap: break-word;
}

/**
 * ⛔ PAA DE SMALLESTE TELEFONER FIK NAVNET 64 PX (kundetesten 14-09-2026).
 *
 * Pris, "HØJST 3" og de to knapper tog resten af raekken. Under 420 px staar
 * navnet derfor paa sin egen linje, og pris, maerkat og knapper paa linjen
 * under, med knapperne ude til hoejre.
 */
@media (max-width: 420px) {
    .wtw-tilvalg-antal { flex-wrap: wrap; row-gap: 2px; }
    .wtw-tilvalg-antal .wtw-tilvalg-navn { flex: 1 0 100%; }
    .wtw-tilvalg-antal .wtw-ned { margin-left: auto; }
}

/* ------------------------------------------------- radio og afkrydsning
 *
 * ⛔ FELTERNE VAR BROWSERENS EGNE, OG DE ER STORE HVIDE CIRKLER PAA EN MOERK
 *    SIDE (hold O's punkt 4, ejeren godkendte rettelsen 04-09-2026).
 *
 * `accent-color` stod her og farvede prikken orange, men resten af feltet er
 * stadig systemets: en hvid skive med en graa kant, tegnet af Windows, og den
 * ser ud som et fremmedlegeme paa #212121.
 *
 * ⚠️ HOLD O'S ADVARSEL, ORDRET, OG DEN ER VIGTIG:
 *
 *     "En egentegnet prik kraever `appearance: none`, og den SAMME klasse
 *      (.wtw-vaelg) bruges til baade runde og firkantede felter. Goer man det
 *      forkert, forsvinder fluebenet i afkrydsningsfelterne, og det ser man
 *      ikke paa eet skaermbillede."
 *
 * `appearance: none` slaar tegningen fra for BEGGE slags paa een gang. Tegner
 * man saa kun den runde prik, bliver et afkrydset felt en TOM firkant: gaesten
 * saetter fluebenet og ser ingenting ske. Derfor er hver eneste regel om den
 * valgte tilstand herunder skrevet med `[type="radio"]` eller
 * `[type="checkbox"]` foran, og der er en proeve paa hver af dem.
 *
 * ⚠️ MAALT: der findes i dag INTET afkrydsningsfelt i pluginnet. Baade Vindue
 * og Kombivindue bruger radioknapper, og "flere af slagsen" klares af taellerne
 * med plus og minus. Reglerne staar her alligevel: den dag nogen skriver det
 * foerste afkrydsningsfelt, er det for sent at opdage, at kun den runde blev
 * tegnet.
 *
 * ⚠️ DET RIGTIGE FELT BLIVER LIGGENDE UNDER TEGNINGEN. Det fristende ville
 * vaere at skjule det og tegne en cirkel ved siden af. Saa holder tastaturet,
 * skaermlaeseren og selve formularen op med at virke, og det kan man ikke se
 * paa et billede. Her er det feltet SELV, der er malet.
 */
.wtw-vaelg {
    -webkit-appearance: none;
    appearance: none;
    /* 22 px og ikke 44: en cirkel paa 44 px ser ud som en knap. Trykfladen er
       hele etiketten (44 px, se `.wtw-tilvalg`) plus det usynlige lag
       nedenfor. Derfor width/height og ikke min-height. */
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    position: relative;
    margin: 0;
    /* ⛔ RINGEN VAR NAESTEN USYNLIG: 1,71:1 mod sit eget fyld (gennemgang 7).
       Den er det eneste, der viser, at "Æggenudler" er noget, man kan vaelge.
       --wtw-daempet giver 4,4:1. */
    border: 2px solid var(--wtw-daempet);
    background-color: var(--wtw-flade-2);
    cursor: pointer;
    /* Bliver `appearance` en dag ignoreret, farver den her stadig systemets
       egen prik rigtigt i stedet for systemets blaa. */
    accent-color: var(--wtw-accent);
}

/**
 * Feltets eget trykfelt.
 *
 * ⚠️ 22 px er under de 44, en finger rammer paalideligt. Etiketten omkring er
 * 44 px hoej og vaelger tilvalget, uanset hvor paa raekken man trykker, saa
 * fingeren har allerede sin flade. Det her lag er ekstra, og det ligger
 * usynligt ud over feltet, saa et tryk lige ved siden af prikken ogsaa rammer.
 * Det koster ingenting og kan ikke daekke noget: det ligger inde i etiketten,
 * som selv vaelger tilvalget.
 */
.wtw-vaelg::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.wtw-vaelg[type="radio"] { border-radius: 50%; }
.wtw-vaelg[type="checkbox"] { border-radius: 4px; }

/**
 * ⛔ FOKUSRINGEN PAA ET FELT SKAL VAERE HVID, IKKE ORANGE.
 *
 * Den faelles regel laengere oppe giver alle knapper en ORANGE ring. Paa de
 * egentegnede felter er orange nu ogsaa farven paa "valgt", og saa ligner et
 * felt, tastaturet bare STAAR paa, et felt, gaesten HAR valgt. Set paa
 * skaermbilledet af vinduet: vinduet aabner med fokus paa den foerste
 * sodavand, og den saa valgt ud, selv om ingen havde roert den.
 *
 * Hvid kan ikke forveksles med noget her, og den staar staerkt paa den moerke
 * raekke. Det er den samme rettelse, hold O lavede paa kurvknappen, og af
 * praecis den samme grund.
 */
.wtw-vaelg:focus-visible { outline-color: var(--wtw-tekst); }

@media (hover: hover) {
    .wtw-vaelg:hover { border-color: var(--wtw-accent); }
}

/**
 * Den valgte radioknap: en orange skive med en prik af fladens egen farve
 * midt i.
 *
 * ⚠️ PRIKKEN ER EN INDVENDIG SKYGGE OG IKKE ET `::before`. Et pseudoelement
 * paa et `<input>` er ikke noget, alle browsere tegner, og saa ville prikken
 * mangle netop dér, hvor vi ikke kigger. En `box-shadow` virker alle steder.
 */
.wtw-vaelg[type="radio"]:checked {
    border-color: var(--wtw-accent);
    background-color: var(--wtw-accent);
    box-shadow: inset 0 0 0 4px var(--wtw-flade);
}

/**
 * Det valgte afkrydsningsfelt: et flueben tegnet som en lille SVG i teksten.
 *
 * ⚠️ Fluebenets farve er skrevet ind i selve tegningen (%23212121, altsaa
 * `--wtw-paa-accent`), fordi en baggrundstegning ikke arver `color`. Skiftes
 * den ene, skal den anden med.
 */
.wtw-vaelg[type="checkbox"]:checked {
    border-color: var(--wtw-accent);
    background-color: var(--wtw-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23212121' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3 8.4l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-position: center;
    background-repeat: no-repeat;
}

/* ---------------------------------------------------------------- kombivinduet
 *
 * Kombitilbuddet stod paa menusiden, og klikkede gaesten paa det, aabnede der
 * et vindue med NUL valg i sig: det almindelige vindue bygges af rettens
 * tilvalgsgrupper, og et kombitilbud har ingen. Hun kunne kun trykke "Laeg i
 * kurv" og faa beskeden "Vaelg en ret. Vaelg en side.", som hun ikke havde
 * nogen maade at foelge.
 *
 * De to lister ligner tilvalgsgrupperne med vilje. Det ER det samme for
 * gaesten: vaelg en ting fra hver liste. Kun forklaringen om den samlede pris
 * er ny, for den er det, der goer et kombitilbud til et tilbud.
 */
/* Kombiprisen er ET TILBUD og maa gerne staa stoerre end en almindelig
   grundpris. Broedskrift i vaegt 800 som resten af tallene, se
   ⛔ SKRIFTREGLEN oeverst. */
.wtw-kombivindue .wtw-vindue-grundpris {
    font-family: inherit;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0;
    color: var(--wtw-accent);
}

.wtw-kombi-forklaring {
    margin: .25rem 0 0;
    color: var(--wtw-daempet);
    font-size: .9rem;
}

/* Begge lister er enten-eller, saa de faar samme luft som en almindelig
   gruppe. Den foerste faar lidt ekstra, saa forklaringen ovenover kan ses. */
.wtw-kombi-gruppe {
    margin-top: 1rem;
}

/* En tom liste er en fejl i menuen, ikke en tom liste. Den skal kunne ses. */
.wtw-kombi-tom {
    margin: .5rem 0;
    padding: 10px 12px;
    border-left: 3px solid var(--wtw-roed-kant);
    border-radius: 0 var(--wtw-r-lille) var(--wtw-r-lille) 0;
    background: var(--wtw-roed-svag);
    color: var(--wtw-roed);
}

/**
 * "Du mangler at vælge noget" er ikke en fejl, og skal ikke se ud som en.
 *
 * Prisen forsvinder, når valget ikke er færdigt, og så står der her hvad der
 * mangler. Gæsten har ikke gjort noget forkert, så det skal være roligt og
 * ikke rødt. En rigtig fejl bruger den samme plads, men uden den her klasse.
 */
.wtw-vindue-fejl.wtw-mangler {
    border-left-color: var(--wtw-kant-haard);
    background: var(--wtw-flade-2);
    color: var(--wtw-daempet);
}



/* ---------------------------------------------------------- skaermstoerrelser
 * Telefon er standarden (alt ovenfor). Tablet fra 768, skrivebord fra 1024,
 * en kolonne mere fra 1280. Kurvens bar i bunden gaelder til og med 767.
 */
@media (min-width: 768px) {
    .wtw-order-page {
        --wtw-pad: 40px;
        --wtw-gap: 24px;
        --wtw-gap-stor: 24px;
    }

    .wtw-hero { padding-bottom: var(--wtw-s4); }

    /* Een blok pr. raekke i bredt format, saa tre blokke ikke fylder tre skaerme. */
    .wtw-location-media { aspect-ratio: 16 / 9; }

    .wtw-retter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .wtw-order-page {
        --wtw-gap-stor: 24px;
        --wtw-top: calc(var(--wtw-site-header-offset) + 56px);
    }

    /* De tre restauranter side om side. */
    .wtw-location-list { grid-template-columns: repeat(3, 1fr); }

    /* Tre blokke side om side, lidt hoejere end 4:3, saa fotoet baerer mere. */
    .wtw-location-media { aspect-ratio: 6 / 5; }

    .wtw-location-body { padding: var(--wtw-s4); }

    .wtw-hero-text { font-size: 1.125rem; }

    /* Kategorierne som en stille sidebjaelke til venstre for retterne, som
       paa forbilledets bestillingsside. Den klaeber under sidens menubjaelke.
       Linjens hoejde (--wtw-rail-hoejde) er her bjaelkens hoejde og maa ikke
       skubbe overskriften ned: kun menubjaelken ligger over den. */
    .wtw-menu-krop {
        display: grid;
        grid-template-columns: 176px minmax(0, 1fr);
        column-gap: var(--wtw-s5);
        align-items: start;
    }

    .wtw-faner {
        top: calc(var(--wtw-site-header-offset, 0px) + 24px);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
        overflow: visible;
        border-bottom: 0;
        background: transparent;
    }

    /* En lille overskrift over listen, saa den laeses som en indholdsfortegnelse.
       Den staar i hoejde med kategoriens overskrift i kolonnen ved siden af. */
    .wtw-faner::before {
        content: attr(aria-label);
        margin: 4px 0 12px 16px;
        font-size: .75rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--wtw-daempet);
    }

    .wtw-fane {
        position: relative;
        gap: 12px;
        margin: 0;
        padding: 0 0 0 16px;
        border-bottom: 0;
        /* ⛔ #8a8680 var 3,29:1 (gennemgang 7). Det her er sidens navigation,
           og den skal kunne laeses. #5f5c57 giver 6,1:1. */
        color: #5f5c57;
        white-space: normal;
    }

    .wtw-fane-ikon {
        display: block;
        flex: none;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
        background: var(--wtw-flade-2);
    }

    @media (hover: hover) {
        .wtw-fane:hover { color: var(--wtw-tekst); }
    }

    /* Den valgte: en kort, afrundet orange markoer ud for teksten. Tegnet, ikke
       en kant. */
    .wtw-fane::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 18px;
        border-radius: 2px;
        background: var(--wtw-accent);
        transform: translateY(-50%);
        opacity: 0;
    }

    .wtw-fane.valgt {
        color: var(--wtw-tekst);
        font-weight: 600;
    }

    .wtw-fane.valgt::before { opacity: 1; }

    .wtw-kategori {
        scroll-margin-top: calc(var(--wtw-site-header-offset, 0px) + 24px);
    }

    .wtw-retter { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Retfotos lidt lavere paa skrivebord (3:2), saa der er mere mad paa skaermen
       uden at fotoet mister sin vaegt. */
    .wtw-ret-foto,
    .wtw-ret:not(:has(.wtw-ret-billede))::before { aspect-ratio: 3 / 2; }
}

@media (min-width: 1280px) {
    .wtw-order-page {
        --wtw-pad: 64px;
        --wtw-gap: 28px;
    }
}

@media (min-width: 1680px) {
    .wtw-retter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ kurven paa vej
 * Paa telefon ligger kurven fast i bunden af skaermen, moerk og slank, og
 * menuen har plads under sig, saa baren ikke daekker den sidste ret.
 */
@media (max-width: 767px) {
    .wtw-order-page { --wtw-site-header-offset: 70px; }

    .wtw-kurv-knap {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Under vinduets 9999, saa tilvalgsvinduet altid ligger oeverst. */
        z-index: 40;
        justify-content: center;
        min-height: 56px;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
    }

    .wtw-menu { padding-bottom: 78px; }

    .wtw-hoved { padding-top: var(--wtw-s4); }
}

/* >>> sidens header paa bestillingssiden
 * Ejerens oenske 12-09-2026: den orange overgang i sidens faste menubjaelke
 * hoerer ikke sammen med den nye side. Her bliver bjaelken moerk og rolig, KUN
 * paa sider med bestillingsdelen (`body:has(#wtw-order-page)`). Navigationen
 * roeres ikke: samme links, samme knapper, samme burger; kun farverne.
 * Det er det ENE sted i filen, temaets egne klasser bruges: overgangen ligger
 * paa Divis sektion uden om vores egen header, og der findes ingen anden vej
 * ind. Proeven i ramme-proever.php ser bort fra netop denne blok.
 */
/* Divi skriver selv overgangen paa sektionen med !important, saa den kan
   ikke slaas fra. I stedet faar VORES egen header (som ligger oven paa
   sektionen i samme hoejde) en moerk flade, der daekker den. Sektionen
   klippes til headerens hoejde, saa den ikke stikker ud forneden. */
body:has(#wtw-order-page) .wtw-header { background-color: #141414; }

body:has(#wtw-order-page) .et-l--header .et_pb_section:has(.wtw-header) {
    height: 80px;
    min-height: 0;
    padding: 0;
}

/* Sitets header-logo er tegnet til den orange bjaelke (moerk W og K, hvid
   tekst) og forsvinder paa sort. Her tegnes i stedet sitets eget logo i farver
   (orange + hvid, plugin'ets kopi af Logo_final.png, beskaaret til selve
   maerket, 204 x 116) oven paa det usynlige billede, i samme hoejde og i
   maerkets egne proportioner. */
body:has(#wtw-order-page) .wtw-header .wtw-logo {
    background: url(logo.png) left center / contain no-repeat;
}

body:has(#wtw-order-page) .wtw-header .wtw-logo img {
    opacity: 0;
    width: auto;
    aspect-ratio: 204 / 116;
}

body:has(#wtw-order-page) .wtw-header .wtw-desktop-menu a { color: #ffffff; }
@media (hover: hover) {
    body:has(#wtw-order-page) .wtw-header .wtw-desktop-menu a:hover { color: #ff6700; }
}

body:has(#wtw-order-page) .wtw-header .wtw-order-btn {
    background-color: #ffffff;
    color: #141414;
    border-radius: 999px;
}

body:has(#wtw-order-page) .wtw-header .wtw-lang--desktop {
    background-color: rgba(255, 255, 255, .12);
}

body:has(#wtw-order-page) .wtw-header .wtw-burger span { background-color: #ffffff; }

@media (max-width: 768px) {
    body:has(#wtw-order-page) .et-l--header .et_pb_section:has(.wtw-header) { height: 70px; }
}
/* <<< sidens header */

/* >>> den faste header daekkede kurvens oeverste linje */
/*
 * ⛔ MAN KUNNE IKKE FJERNE DEN FOERSTE RET I KURVEN (ejeren, 13-09-2026:
 * "der er en bug paa siden, naar siden ser saadan her ud, kan man ikke faa
 * lov til at slette tokyo?").
 *
 * Temaets header staar fast oeverst i vinduet (position: fixed, 110 px hoej,
 * z-index 2147483647), men den fylder ingenting i sidens egen hoejde. Derfor
 * begynder kurven bag den. Maalt paa Aalborg 13-09-2026: headerens underkant
 * laa 142 px nede, og det roede kryds ved den foerste ret laa 107 px nede.
 * Krydset var altsaa DAEKKET, og det kunne ikke rulles frem: siden er
 * allerede i toppen. Gaesten kunne fjerne alle andre linjer end den foerste.
 *
 * Tallet maales i browseren og saettes i --wtw-fast-top (assets/bestilling.js),
 * fordi headeren er lavere paa telefon end paa computer, og fordi en
 * administrators egen sorte WordPress-bjaelke flytter det hele 32 px ned.
 * Staar der ingen fast header, bliver tallet nul, og siden ser ud som foer.
 */
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce {
    padding-top: var(--wtw-fast-top, 0px);
}
/* <<< den faste header */
/**
 * ⛔ EN SLUKKET KNAP SAA PRAECIS UD SOM EN TAENDT (fejljagten 13-09-2026).
 *
 * `aabnVindue()` og `laegIKurv()` saetter `knap.disabled = true`, mens de
 * venter paa serveren. Browserens egen daempning af en slukket knap virker
 * kun paa det, vi ikke selv har sat, og her er baade farve, baggrund og kant
 * sat i haanden. Knappen saa derfor uaendret ud, og der var intet, der
 * snurrede. Gaesten trykkede igen og igen og troede, siden var i stykker.
 * Paa proevekopien svarer det samme kald paa over fire sekunder.
 */
.wtw-vaelg-ret:disabled,
.wtw-laeg-i-kurv:disabled,
.wtw-op:disabled,
.wtw-ned:disabled {
    opacity: .55;
    cursor: wait;
}

/* >>> kurv, kasse og kvittering
 * ⛔ SIDERNE VAR SVÆRE AT LÆSE (ejeren, 14-09-2026). Temaet skriver al brødtekst
 * med overskriftsskriften Staatliches, som kun har store bogstaver, i 14 px grå.
 * Felterne, beløbene og betalingsvalget stod i samme skrift. Her får brødtekst,
 * felter og tabeller sidens læseskrift; overskrifterne beholder husets skrift.
 * Kun på WooCommerces kurv, kasse og kvittering på bestillingsundersiden.
 */
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 64px;
    font-family: var(--wtw-skrift);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--wtw-tekst);
}

body.woocommerce-cart .woocommerce :is(p, label, input, select, textarea, td, th, li, span, strong, bdi, a, address, small, em, div, dt, dd, mark),
body.woocommerce-checkout .woocommerce :is(p, label, input, select, textarea, td, th, li, span, strong, bdi, a, address, small, em, div, dt, dd, mark) {
    font-family: var(--wtw-skrift);
    letter-spacing: normal;
    text-transform: none;
}

body.woocommerce-cart .woocommerce :is(h1, h2, h3),
body.woocommerce-checkout .woocommerce :is(h1, h2, h3) {
    margin: 32px 0 16px;
    padding: 0;
    font-family: var(--wtw-display);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--wtw-tekst);
}

/* Felter: hvide, tydelig kant, stor nok til en tommelfinger. */
body.woocommerce-checkout .woocommerce .form-row label {
    display: block;
    margin: 0 0 6px;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wtw-tekst);
}

body.woocommerce-checkout .woocommerce form .form-row :is(input.input-text, select, textarea),
body.woocommerce-cart .woocommerce input.input-text {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid var(--wtw-kant-haard);
    border-radius: var(--wtw-r);
    background: var(--wtw-flade);
    color: var(--wtw-tekst);
    font-size: 1rem;
    line-height: 1.4;
    box-shadow: none;
}

body.woocommerce-checkout .woocommerce form .form-row textarea { min-height: 96px; }

body.woocommerce-checkout .woocommerce form .form-row :is(input.input-text, select, textarea)::placeholder,
body.woocommerce-cart .woocommerce input.input-text::placeholder {
    color: var(--wtw-daempet);
    opacity: 1;
}

body.woocommerce-checkout .woocommerce form .form-row :is(input.input-text, select, textarea):focus,
body.woocommerce-cart .woocommerce input.input-text:focus {
    outline: 3px solid var(--wtw-accent);
    outline-offset: 1px;
    border-color: var(--wtw-tekst);
}

body.woocommerce-checkout .woocommerce .form-row { margin: 0 0 16px; padding: 0; }
body.woocommerce-checkout .woocommerce .required { color: var(--wtw-roed); text-decoration: none; }

/* Afhentningstiden er det vigtigste valg: den står i en lys orange kasse. */
body.woocommerce-checkout .wtw-afhentning {
    margin: 0 0 24px;
    padding: 20px;
    border-radius: var(--wtw-r);
    background: var(--wtw-accent-svag);
}
body.woocommerce-checkout .wtw-afhentning h3 { margin-top: 0; }

/* Ordren og kurven: rolige linjer, beløb til højre, total tydelig. */
body.woocommerce-cart .woocommerce table.shop_table,
body.woocommerce-checkout .woocommerce table.shop_table {
    width: 100%;
    margin: 0 0 24px;
    border: 1px solid var(--wtw-kant);
    border-radius: var(--wtw-r);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--wtw-flade);
    overflow: hidden;
}

body.woocommerce-cart .woocommerce table.shop_table :is(th, td),
body.woocommerce-checkout .woocommerce table.shop_table :is(th, td) {
    padding: 14px 16px;
    border: 0;
    border-top: 1px solid var(--wtw-kant-svag);
    font-size: 1rem;
    font-weight: 400;
    color: var(--wtw-tekst);
    vertical-align: top;
}

body.woocommerce-cart .woocommerce table.shop_table thead th,
body.woocommerce-checkout .woocommerce table.shop_table thead th {
    border-top: 0;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--wtw-daempet);
}

body.woocommerce-checkout .woocommerce table.shop_table :is(td:last-child, th:last-child):not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

body.woocommerce-cart .woocommerce table.shop_table tfoot :is(th, td),
body.woocommerce-checkout .woocommerce table.shop_table tfoot :is(th, td) {
    background: var(--wtw-bund);
}

body.woocommerce-cart .woocommerce table.shop_table .order-total :is(th, td, strong, bdi, span),
body.woocommerce-checkout .woocommerce table.shop_table .order-total :is(th, td, strong, bdi) {
    font-size: 1.125rem;
    font-weight: 700;
}

body.woocommerce-checkout .woocommerce table.shop_table small,
body.woocommerce-checkout .woocommerce table.shop_table .includes_tax {
    display: block;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--wtw-daempet);
}

/* Betalingen: hvert valg er et kort, man kan ramme. */
body.woocommerce-checkout #payment {
    padding: 0;
    border-radius: var(--wtw-r);
    background: transparent;
}

body.woocommerce-checkout #payment ul.payment_methods {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    list-style: none;
}

body.woocommerce-checkout #payment ul.payment_methods > li {
    margin: 0 0 8px;
    padding: 14px 16px;
    border: 1px solid var(--wtw-kant-haard);
    border-radius: var(--wtw-r);
    background: var(--wtw-flade);
    list-style: none;
}

body.woocommerce-checkout #payment ul.payment_methods > li:has(input:checked) {
    border: 2px solid var(--wtw-tekst);
    padding: 13px 15px;
}

body.woocommerce-checkout #payment ul.payment_methods > li > label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wtw-tekst);
    cursor: pointer;
}

body.woocommerce-checkout #payment ul.payment_methods > li > label img {
    max-height: 24px;
    width: auto;
    margin: 0;
}

body.woocommerce-checkout #payment ul.payment_methods > li input[type=radio] {
    width: 20px;
    height: 20px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--wtw-tekst);
}

body.woocommerce-checkout #payment div.payment_box {
    margin: 10px 0 0;
    padding: 0;
    background: transparent;
    color: var(--wtw-daempet);
    font-size: .9375rem;
}
body.woocommerce-checkout #payment div.payment_box::before { display: none; }

body.woocommerce-checkout #payment .place-order {
    margin: 0;
    padding: 16px 0 0;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout .wtw-markedsfoering {
    margin: 0 0 12px;
    font-size: .9375rem;
    color: var(--wtw-tekst);
}

body.woocommerce-checkout .woocommerce :is(.woocommerce-form__label-for-checkbox, .wtw-markedsfoering label) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    font-size: .9375rem;
}

body.woocommerce-checkout .woocommerce input[type=checkbox] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--wtw-tekst);
}

/* Den store knap: orange, fuld bredde, mørk tekst (kontrast 5,5). */
body.woocommerce-checkout #place_order,
body.woocommerce-cart .woocommerce a.checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    margin: 8px 0 0;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--wtw-accent);
    color: var(--wtw-paa-accent);
    font-family: var(--wtw-skrift);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1;
}

body.woocommerce-checkout #place_order::after,
body.woocommerce-cart .woocommerce a.checkout-button::after { display: none; }

@media (hover: hover) {
    body.woocommerce-checkout #place_order:hover,
    body.woocommerce-cart .woocommerce a.checkout-button:hover {
        background: var(--wtw-accent-dyb);
    }
}

/* Kvitteringen efter betaling. "Sådan henter du" står øverst: det er det,
   gæsten skal bruge, når hun går hjemmefra. */
body.woocommerce-order-received .woocommerce .woocommerce-order {
    display: flex;
    flex-direction: column;
}
body.woocommerce-order-received .woocommerce .woocommerce-order > .woocommerce-notice { order: -2; }
body.woocommerce-order-received .woocommerce .woocommerce-order > .wtw-kvittering { order: -1; margin-bottom: 24px; }

/* Stjernen ved vilkårene står ellers helt ude til højre. Feltet er stadig påkrævet. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required { display: none; }

body.woocommerce-order-received .woocommerce .woocommerce-thankyou-order-received {
    margin: 32px 0 16px;
    font-family: var(--wtw-display);
    font-size: 2.25rem;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--wtw-tekst);
}

body.woocommerce-order-received .woocommerce ul.order_details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

body.woocommerce-order-received .woocommerce ul.order_details li {
    flex: 1 1 160px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--wtw-kant);
    border-radius: var(--wtw-r);
    background: var(--wtw-flade);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--wtw-daempet);
}

body.woocommerce-order-received .woocommerce ul.order_details li strong {
    display: block;
    margin-top: 4px;
    font-size: 1.0625rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--wtw-tekst);
}

body.woocommerce-order-received .woocommerce address {
    padding: 16px;
    border: 1px solid var(--wtw-kant);
    border-radius: var(--wtw-r);
    font-style: normal;
}

/* To kolonner på computer: oplysninger til venstre, ordren til højre. */
@media (min-width: 900px) {
    body.woocommerce-checkout .woocommerce form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
        column-gap: 48px;
        align-items: start;
    }
    body.woocommerce-checkout .woocommerce form.checkout > :is(#customer_details, .woocommerce-NoticeGroup) {
        grid-column: 1;
    }
    body.woocommerce-checkout .woocommerce form.checkout > :is(#order_review_heading, #order_review) {
        grid-column: 2;
    }
    body.woocommerce-checkout .woocommerce form.checkout > #order_review_heading { grid-row: 1; }
    body.woocommerce-checkout .woocommerce form.checkout > #order_review {
        grid-row: 2 / span 20;
        position: sticky;
        top: calc(var(--wtw-fast-top, 0px) + 16px);
    }
    body.woocommerce-checkout .woocommerce #customer_details { grid-row: 1 / span 20; }
    body.woocommerce-checkout .woocommerce #customer_details :is(.col-1, .col-2) {
        float: none;
        width: 100%;
        max-width: none;
    }
}
/* <<< kurv, kasse og kvittering */

/* >>> ret og tilfoej
 * ⛔ "Hov, jeg glemte noget" (ejeren, 14-09-2026): i kassen kunne intet rettes, og
 * kurven havde ingen vej tilbage til menuen. To stille links, ikke nye knapper:
 * orange er forbeholdt betalingen.
 */
body.woocommerce-checkout .woocommerce .wtw-ret-bestilling {
    margin: 0 0 16px;
    text-align: right;
}

body.woocommerce-checkout .woocommerce .wtw-ret-bestilling a,
body.woocommerce-cart .woocommerce a.wtw-mere-fra-menuen {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wtw-tekst);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.woocommerce-cart .woocommerce a.wtw-mere-fra-menuen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin: 12px 0 0;
    border: 1px solid var(--wtw-kant-haard);
    border-radius: 999px;
    background: var(--wtw-flade);
    text-decoration: none;
}

@media (hover: hover) {
    body.woocommerce-checkout .woocommerce .wtw-ret-bestilling a:hover { color: var(--wtw-accent-dyb); }
    body.woocommerce-cart .woocommerce a.wtw-mere-fra-menuen:hover { border-color: var(--wtw-tekst); }
}
/* <<< ret og tilfoej */

/* Tilvalgslinjer i kurven har intet eget foto, og temaet tegnede en graa
   pladsholder paa hver af dem (ejeren 14-09-2026). Hovedretten beholder sit. */
body.woocommerce-cart .woocommerce tr.cart_item:has(.wtw-kurv-tilvalg) td.product-thumbnail > * {
    display: none;
}

/* >>> EN-knappen skjult
 * ⛔ Menukort-pluginnets DA/EN-knap peger paa /en/aalborg/..., som ikke findes,
 * fordi engelsk ikke er sat op paa undersiden (ejeren 14-09-2026: aabn paa dansk,
 * skjul knappen, lav engelsk bagefter). Stilarket her indlaeses kun paa
 * butikkens underside. FJERNES, naar engelsk virker.
 */
html body .wtw-lang {
    display: none;
}
/* <<< EN-knappen skjult */

/* >>> sodavanden foelger med (ejeren 14-09-2026)
 * Linjen under en aftensret i kurven, kassen og paa kvitteringen. Stille, men
 * paa sin egen linje, saa den ikke laeses som en del af rettens navn.
 */
.wtw-kurv-sodavand {
    display: block;
    margin-top: 2px;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--wtw-daempet, #6e6b66);
}
/* >>> kassens fejl i felterne (10-kunders testen 14-09-2026)
 * Et ugyldigt felt saa ud som et gyldigt. Nu: roed kant og en kort forklaring
 * under feltet (teksten saettes af bestilling.js, samme ord som serveren).
 */
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid :is(input.input-text, select, textarea) {
    border: 2px solid var(--wtw-roed-kant, #e2452c);
}
.wtw-felt-fejl {
    display: block;
    margin-top: 6px;
    font-size: .875rem;
    line-height: 1.35;
    color: var(--wtw-roed, #c0392b);
}
/* >>> kurvens tilvalg som korte linjer paa telefon (kundetesten 14-09-2026)
 *
 * ⛔ EN BYG SELV MED FEM TILVALG FYLDTE 1,6 METER SKAERM. WooCommerces
 * telefonvisning goer hver kurvlinje til sit eget kort med "Vare", "Pris",
 * "Antal" og "Subtotal", ogsaa et tilvalg til 8 kr. uden antalsfelt og uden
 * slet-knap. Fem af dagens seks retter var byg selv.
 *
 * Nu staar et tilvalg som een linje under sin ret: "↳ Broccoli ... 8,00 kr."
 * Retten selv er uroert. Beloebene er de samme; det er kun visningen.
 */
@media (max-width: 768px) {
    body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item:has(.wtw-kurv-tilvalg) {
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: 0 16px 0 32px;
        background: transparent;
    }
    body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item:has(.wtw-kurv-tilvalg) > td {
        display: none;
    }
    body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item:has(.wtw-kurv-tilvalg) > :is(td.product-name, td.product-subtotal) {
        display: block;
        padding: 2px 0;
        /* Temaets celler har .857em top og bund (med #id-vaegt eller !important); modregnes her. */
        margin-block: calc(-.857em + 2px);
        border: 0;
        background: transparent;
        line-height: 1.35;
        text-align: left;
    }
    body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item:has(.wtw-kurv-tilvalg) > td.product-subtotal {
        margin-left: auto;
        white-space: nowrap;
    }
    body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item:has(.wtw-kurv-tilvalg) > td::before {
        content: none;
        display: none;
    }
    body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item:has(.wtw-kurv-tilvalg) :is(.wtw-kurv-tilvalg, .amount, bdi) {
        font-size: .9375rem;
        color: var(--wtw-daempet, #6e6b66);
    }
}

/**
 * ⚠️ UNDER 480 PX TVINGER TEMAET (Divi, inline) "padding: .857em .287em !important" paa
 * kurvens raekker og celler. Stilarket bruger ikke !important (se tests/ramme-proever.php),
 * saa afstanden modregnes med negative margener i samme enhed i stedet.
 * Raekkens top og bund (2 x .857em) traekkes fra i bundmargenen; cellernes staar ovenfor.
 */
@media (max-width: 479px) {
    body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item:has(.wtw-kurv-tilvalg) {
        margin-bottom: calc(-2 * .857em);
    }
    body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item:has(.wtw-kurv-tilvalg) > td.product-name {
        margin-left: 24px;
    }
}

/* ---------------------------------------------------------------- tastaturet */

/**
 * ⛔ EN TASTATURGAEST SKAL KUNNE SE, HVOR HUN ER (kundetesten 14-09-2026, G13).
 *
 * Maalt paa den rigtige side: taellerknapperne i vinduet ("Faerre/Flere Pak
 * choi"), "Gaa til betaling" i kassen og linkene i kurven havde
 * `outline: none` og ingen skygge, ogsaa naar de var valgt med Tab. Samme
 * markering som resten af siden (3 px i tekstfarven). Kun `:focus-visible`,
 * saa et museklik ikke tegner en ramme. Kassens felter har deres egen orange
 * markering laengere oppe, og den vinder, fordi den er mere praecis.
 */
.wtw-lag .wtw-vindue :is(button, a, input, select, textarea):focus-visible,
.wtw-order-page :is(button, a, input, select):focus-visible,
body.woocommerce-cart .woocommerce :is(a, button, input, select):focus-visible,
body.woocommerce-checkout .woocommerce :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--wtw-tekst);
    outline-offset: 2px;
}

/**
 * ⛔ FOKUS GEMTE SIG BAG VINDUETS FOD OG KRYDS (kundetesten 14-09-2026, G35).
 *
 * Browseren ruller kun et valgt element lige netop ind i vinduet, og nederst
 * klaeber foden (`.wtw-vindue-fod`, 88 px paa computer, 145 px paa en 360 px
 * telefon), oeverst krydset (44 px plus luft). 8 af 40 Tab-tryk i Gulenudler
 * landede bag foden. `scroll-padding` er den plads, rulningen holder fri.
 */
.wtw-lag .wtw-vindue {
    scroll-padding-top: 60px;
    scroll-padding-bottom: 180px;
}

/* Kundetesten G15: hele retkortet aabner retten, saa det skal ogsaa se trykbart ud. */
.wtw-ret:has(.wtw-vaelg-ret) { cursor: pointer; }

/* Kundetesten G58: hvem gaesten handler med, lige over knappen i kassen. */
body.woocommerce-checkout .wtw-saelger {
    margin: 0 0 12px;
    font-size: .875rem;
    color: var(--wtw-daempet);
}

/* Den samme mad to gange: krydset over knappen skal ses (Wp\Dobbeltbetaling). */
body.woocommerce-checkout .wtw-bestil-igen {
    margin: 0 0 12px;
    padding: 12px;
    border: 2px solid var(--wtw-accent);
    border-radius: 8px;
    font-weight: 700;
}