/**
 * Facet-panelet (BCAT_Facets): inline Filtrér-knap under chips-rækkerne + venstre-skuffe.
 * Farver arves fra temaets linkfarve via currentColor (samme princip som subcats-chips) —
 * vi sætter struktur, ikke brand-farver.
 */

/* Beskrivelses-wrapper der KUN bærer vores egne rækker (arkiv uden beskrivelses-tekst):
   ingen tema-typografi at beskytte, så den gøres fuldbred og båndet flugter med grid'et.
   !important fordi temaets egen `.hero-section[data-type] .page-description` er mere
   specifik; klassen sættes kun af JS, og kun når wrapperen reelt er en skal om os. */
.bcat-fb-shell { display: block !important; width: 100% !important; max-width: 100% !important; }

/* ===== Filter-båndet (2.51.0): ÉN venstrestillet linje lige over opskrifterne =====
   [Filtrér opskrifter] · [Ryd alle filtre — ved 3+ valg] · aktive filtre som små chips.
   ANTI-MØNSTER af underkategori-chipsene: kant-chips ovenover → UDFYLDT facet-UI i
   temaets linkfarve; er temaets subcats-chips udfyldte, bliver BÅNDET kant (.is-outline).
   Skuffen kører altid samme udtryk — den står aldrig ved siden af temaets chips.
   Alt er <a>-elementer, så currentColor ER linkfarven — aldrig sort/mørk. Tekst/ikon
   bor i child-elementer: en rå tekstnode ville arve linkfarven og forsvinde i sin
   egen baggrund. */
/* Båndet udskrives inde i temaets grid-container (2.84.0), så det ER et grid- eller
   flex-barn. Uden dette ville det lægge sig som en kolonne ved siden af første kort. */
.bcat-facets-bar { grid-column: 1 / -1; flex: 0 0 100%; width: 100%; }
/* I grid'et er båndet en RÆKKE, og så skal det spaces som en række: containerens egen
   `gap` er præcis den afstand, kortene har til hinanden i netop det tema. Båndets margin
   nedenfor hører til FALLBACK-placeringen i beskrivelsen, hvor der ingen gap er, og skal
   derfor nulstilles her — ellers lægges de to oveni hinanden.
   Ingen negativ værdi: `gap` varierer pr. tema (Mutti ~10px, Emma Olsen mere), så en fast
   em-værdi æder hele afstanden ét sted og ingenting et andet. Det var samme fejltype som
   de −138px, vi fjernede i 2.84.0 — bare mindre, og derfor sværere at få øje på. */
.bcat-facets-bar.is-in-grid { margin: 0; }
.bcat-facets-bar {
    display: flex;
    /* BUNDEN, ikke midten (3.17.2): knappen er det højeste element i båndet, og med
       centrering fik chipsene og sorteringen hver sin afstand ned til første række kort.
       Flugter underkanterne, er der én linje under båndet — og afstanden til grid'et er
       den samme, uanset hvor høje de enkelte elementer er. */
    align-items: flex-end;
    justify-content: flex-start;
    gap: 7px;
    flex-wrap: wrap;
    margin: 1.1em 0 0.7em;
}
.bcat-facets-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: currentColor;
    border: 1.5px solid transparent;
    border-radius: 999px;
    padding: 0.42em 1.1em;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease;
}
.bcat-facets-btn:hover { filter: brightness(0.92); }
.bcat-facets-btn .bcat-facets-lbl { color: #fff; }
.bcat-facets-btn .bcat-facets-ic path { stroke: #fff; }
.bcat-facets-ic { flex-shrink: 0; }
/* "Ryd alle filtre": nedtonet tekst-link — handlingen skal findes, ikke råbe */
.bcat-facets-clear {
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 0.85;
}
.bcat-facets-clear:hover { opacity: 1; }
/* Aktive filtre: SMÅ chips på samme linje */
.bcat-fapplied-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: currentColor;
    border: 1px solid transparent;
    border-radius: 999px;
    /* Mindre end knappen: chipsene er en liste, man skimmer, ikke en handling man skal
       ramme — og jo flere der er plads til, jo færre af dem ryger ned på en ekstra linje. */
    padding: 0.2em 0.6em;
    font-size: 0.66rem;
    text-decoration: none;
}
.bcat-fapplied-chip:hover { filter: brightness(0.92); }
.bcat-fapplied-lbl, .bcat-fapplied-x { color: #fff; }
.bcat-fapplied-x { opacity: 0.7; font-size: 0.72em; }
/* Kant-variant (udfyldte subcats-chips ovenover) */
.is-outline .bcat-facets-btn { background: transparent; border-color: currentColor; }
.is-outline .bcat-facets-btn:hover { filter: none; opacity: 0.85; }
.is-outline .bcat-facets-btn .bcat-facets-lbl { color: inherit; }
.is-outline .bcat-facets-btn .bcat-facets-ic path { stroke: currentColor; }
.is-outline .bcat-fapplied-chip { background: transparent; border-color: currentColor; }
.is-outline .bcat-fapplied-lbl, .is-outline .bcat-fapplied-x { color: inherit; }

/* Ajax-navigation: dæmp indholdet let mens den nye side hentes */
.bcat-facets-loading main, .bcat-facets-loading #main, .bcat-facets-loading .site-main {
    opacity: 0.55;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

/* Overlay + skuffe: klasse-styret (is-open) med glide-animation */
.bcat-facets-overlay {
    position: fixed;
    inset: 0;
    background: rgba(24, 18, 14, 0.4);
    z-index: 2147483000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.bcat-facets-overlay.is-open { opacity: 1; pointer-events: auto; }

.bcat-facets-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(380px, 92vw);
    background: #fcfbf9;
    z-index: 2147483001;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 10px 0 30px -10px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    padding: 0;
    font-size: 14px;
    color: #33302e;
    transform: translateX(-105%);
    transition: transform 0.24s ease;
}
.bcat-facets-drawer.is-open { transform: translateX(0); }

.bcat-fd-head {
    position: sticky;
    top: 0;
    background: #fcfbf9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px 14px;
    border-bottom: 1px solid #ece6de;
    z-index: 1;
}
.bcat-fd-head strong { font-size: 16px; letter-spacing: -0.01em; }

/* «Dine filtre» klistrer LIGE UNDER overskriften, så valgene altid er på skærmen — også
   når man er langt nede i en lang skuffe. `top` matcher headerens højde; begge er sticky,
   så de stabler sig og efterlader ingen sprække, indholdet kan glide op i. */
.bcat-fd-chosen {
    position: sticky;
    top: 65px;
    z-index: 1;
    background: #fcfbf9;
    border-bottom: 1px solid #ece6de;
    padding: 9px 22px 11px;
}
.bcat-fd-chosen-lbl {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8a7f74;
    margin-bottom: 6px;
}
.bcat-fd-chosen-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.bcat-fd-clearall {
    font-size: 11.5px; color: #6f645a; text-decoration: underline;
    text-underline-offset: 2px; margin-left: 3px; white-space: nowrap;
}
.bcat-fd-clearall:hover { color: #1a1a1a; }
/* Mindre end mulighederne nedenfor: de er en KVITTERING, ikke et valg man skal ramme
   præcist — og jo mindre plads de tager, jo mere af skuffen kan man se. */
.bcat-fd-chosen .bcat-fg-chip { font-size: 11.5px; padding: 4px 9px; gap: 5px; }
.bcat-fd-chosen .bcat-fg-chip svg { width: 12px; height: 12px; }
.bcat-fd-close {
    background: #f1ece5;
    border: 0;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    color: #6f645a;
    font-family: inherit;
}
.bcat-fd-close:hover { background: #e6dfd6; }

/* Grupper: dæmpet versal-overskrift, luft imellem */
.bcat-fd-grp { padding: 14px 22px 4px; }
.bcat-fd-grp + .bcat-fd-grp { border-top: 1px solid #f1ece5; }
.bcat-fd-gh {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8a7f74;
    background: none;
    border: 0;
    padding: 2px 0 8px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
div.bcat-fd-gh { cursor: default; }
.bcat-fd-pm { width: 18px; height: 18px; border-radius: 50%; background: #f1ece5; display: inline-flex; align-items: center; justify-content: center; }
.bcat-fd-pm::after { content: "+"; color: #8a7f74; font-size: 13px; line-height: 1; }
.bcat-fd-grp.is-open .bcat-fd-pm::after { content: "\2212"; }
.bcat-fd-opts { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; }

/* Valgmuligheder: rene hvide kort. Lag 1 (kuraterede sider) i temaets linkfarve med →;
   frie filtre i neutral tekst med dæmpet antal. */
.bcat-fd-opt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.3;
    text-decoration: none;
    background: #fff;
    border: 1px solid #eae4db;
    border-radius: 9px;
    padding: 9px 13px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.bcat-fd-opt:hover { border-color: #d5ccc1; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); }
.bcat-fd-opt.is-page { color: inherit; font-weight: 600; }
.bcat-fd-opt.is-free { color: #4a4038; }
.bcat-fd-m { font-size: 11.5px; color: #a99e93; flex-shrink: 0; font-weight: 400; }
.bcat-fd-opt.is-page .bcat-fd-m { color: inherit; opacity: 0.75; }

/* Kontekst ("Valgt"): fjernbare valg som udfyldte chips i temaets LINKFARVE (a-elementer
   → currentColor er linkfarven; label i span). Selve arkiv-termet (is-ctx, intet link)
   vises som dæmpet kant-chip — det er siden, man står på, ikke et valg. */
.bcat-fd-opt.is-sel { background: currentColor; border-color: transparent; font-weight: 500; }
.bcat-fd-opt.is-sel:hover { filter: brightness(0.92); box-shadow: none; }
.bcat-fd-opt.is-sel .bcat-fd-lbl, .bcat-fd-opt.is-sel .bcat-fd-m { color: #fff; }
.bcat-fd-opt.is-sel .bcat-fd-m { opacity: 0.7; }
.bcat-fd-opt.is-ctx { border-style: dashed; color: #8a7f74; font-weight: 500; }

/* Tom tilstand: beskæringen har fjernet alle grupper */
.bcat-fd-empty { padding: 18px 22px; font-size: 12.5px; line-height: 1.55; color: #8a7f74; }

/* Kontekst-navnet i skuffens titel (arkivet man filtrerer i) */
.bcat-fd-ctx { display: block; font-size: 11.5px; color: #a99e93; margin-top: 2px; }

/* ===== Chips-layoutet (Frederiks valg): grupperne er chip-skyer ===== */
.bcat-fd-opts { flex-direction: row; flex-wrap: wrap; gap: 6px; }
/* [hidden] SKAL vinde: vores display:inline-flex på chippen overtrumfer ellers
   browserens [hidden]-regel (author-styles slår UA-stylesheetet uanset specificitet) —
   derfor "skete der ikke noget", når søgningen satte hidden på chips. */
.bcat-fg-chip[hidden] { display: none !important; }
/* Samme faelde, samme sted: `.bcat-fd-opts { display: flex }` slog UA'ens [hidden]-regel,
   saa det foldede panel stod permanent aabent — knappen skiftede kun sin chevron. */
.bcat-fd-opts[hidden] { display: none !important; }
.bcat-fg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 12px;
    text-decoration: none;
    background: currentColor;
    border: 1px solid transparent;
}
.bcat-fg-chip .bcat-fg-lbl, .bcat-fg-chip small { color: #fff; }
.bcat-fg-chip small { opacity: 0.75; font-size: 10px; }
.bcat-fg-chip:hover { filter: brightness(0.92); }
/* Frit filter: stiplet, neutral — det man KAN vælge */
.bcat-fg-chip.is-free { background: transparent; border: 1px dashed #c9beb2; }
.bcat-fg-chip.is-free .bcat-fg-lbl { color: #6f645a; }
.bcat-fg-chip.is-free small { color: #a99e93; opacity: 1; }
.bcat-fg-chip.is-free:hover { filter: none; border-style: solid; }
/* Aktivt valg: UDFYLDT i linkfarven + fjern-kryds. Udfyldt er den stærkeste markør, vi har,
   og siden side-linkene forlod skuffen (2.71.0) er den ledig — en stiplet chip og en chip med
   hel kant lignede for meget hinanden til at bære forskellen mellem "kan vælges" og "valgt". */
.bcat-fg-chip.is-on { background: var(--bcat-accent, currentColor); border: 1px solid transparent; font-weight: 600; }
.bcat-fg-chip.is-on .bcat-fg-lbl, .bcat-fg-chip.is-on .bcat-fg-x, .bcat-fg-chip.is-on small { color: #fff; }
.bcat-fg-chip.is-on .bcat-fg-x { opacity: 0.9; }
.bcat-fg-chip.is-on .bcat-fg-ic { color: #fff; }
.bcat-fg-x { font-size: 10px; opacity: 0.7; }

/* ===== Tid-slideren: to greb på én skinne ===== */
/* De to <input type=range> ligger OVEN PÅ hinanden i .bcat-fd-rail. Deres egne spor
   gøres usynlige (vi tegner skinnen selv), og selve inputtet er pointer-transparent —
   kun thumbene tager klik, ellers ville det øverste input dække det nederstes greb. */
.bcat-fd-slider { padding: 4px 2px 2px; width: 100%; }
.bcat-fd-rail { position: relative; height: 26px; }
.bcat-fd-rail::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 4px;
    margin-top: -2px;
    background: #e6dfd6;
    border-radius: 999px;
}
.bcat-fd-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    background: var(--bcat-accent, currentColor);
    border-radius: 999px;
    opacity: 0.85;
}
.bcat-fd-range {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 26px;
    margin: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}
.bcat-fd-range:focus { outline: none; }
.bcat-fd-range::-webkit-slider-runnable-track { background: transparent; height: 26px; }
.bcat-fd-range::-moz-range-track { background: transparent; height: 26px; }
.bcat-fd-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 20px; height: 20px;
    margin-top: 3px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--bcat-accent, currentColor);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    cursor: grab;
}
.bcat-fd-range::-moz-range-thumb {
    pointer-events: auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--bcat-accent, currentColor);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    cursor: grab;
}
.bcat-fd-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15); }
.bcat-fd-ticks { display: flex; justify-content: space-between; font-size: 10px; color: #a99e93; margin-top: 2px; }
.bcat-fd-ticks i { font-style: normal; font-size: 8.5px; margin-left: 1px; opacity: .75; }
.bcat-fd-slval { text-align: center; font-size: 12.5px; font-weight: 600; margin-top: 6px; color: var(--bcat-accent, inherit); }

/* Hurtigvalg under slideren: de spænd folk reelt vælger */
.bcat-fd-quickwrap { margin-top: 10px; }
.bcat-fd-quicklbl {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a99e93;
    margin-bottom: 5px;
}
.bcat-fd-quicks { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.bcat-fd-quicks::-webkit-scrollbar { display: none; }
.bcat-fd-quick { white-space: nowrap; }
.bcat-fd-quick {
    font-size: 11.5px;
    text-decoration: none;
    color: #6f645a;
    background: #fff;
    border: 1px solid #e2dacf;
    border-radius: 999px;
    padding: 4px 11px;
}
.bcat-fd-quick:hover { border-color: var(--bcat-accent, currentColor); color: var(--bcat-accent, inherit); }
.bcat-fd-quick.is-on { background: var(--bcat-accent, currentColor); border-color: transparent; color: #fff; font-weight: 600; }
/* Samme grund: et VALGT hurtigvalg er en tilstand, ikke et link — udfyldt i begge varianter. */

/* ===== Ingrediens-søgningen ===== */
/* [hidden] SKAL vinde i hele skuffen. Vi har nu tre gange sat en `display` på et element,
   der også skjules med attributten — chippen (2.55.0), det foldede panel (3.11.1) og
   «Vis N flere»-knappen (3.25.1, hvor den blev hængende under en søgning og så ud til at
   være i stykker). Author-styles slår UA-stylesheetet uanset specificitet, så reglen hører
   hjemme ét sted for hele skuffen frem for at blive jagtet element for element. */
#bcat-facets-drawer [hidden] { display: none !important; }

.bcat-fd-searchwrap { position: relative; margin-bottom: 4px; }
.bcat-fd-clear {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 26px; height: 26px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .06); color: #6f645a;
    font-size: 12px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.bcat-fd-clear:hover { background: rgba(0, 0, 0, .12); }
.bcat-fd-search {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e2dacf;
    border-radius: 9px;
    padding: 9px 34px 9px 12px;   /* plads til ryd-krydset */
    /* 13px på desktop, hvor feltet ellers står klodset stort ved siden af 11-12px chipsene.
       De 16px nedenfor er en mobil-NØDVENDIGHED, ikke et designvalg. */
    font-size: 13px;
    font-family: inherit;
    color: #33302e;
    margin: 0;
}
.bcat-fd-search:focus { outline: none; border-color: #c9beb2; }

/* Hjælpetekst pr. gruppe: hvad spørger filteret om? Sidder under overskriften,
   over valgene — så man læser spørgsmålet før svarene. */
.bcat-fd-hint {
    margin: -4px 0 9px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #8a7f74;
}
.bcat-fd-gh { padding-bottom: 5px; }
.bcat-fd-gt { flex: 1; min-width: 0; }
/* Grupperne står tættere når de alle er foldet ud fra start */
.bcat-fd-grp { padding: 13px 22px 6px; }

/* Ghost-chips: muligheder som de aktive filtre har udtømt — klikdøde og dæmpede,
   så skuffen beholder sin form og konsekvensen af filtreringen kan SES. */
.bcat-fg-chip.is-ghost {
    background: transparent;
    border: 1px dashed #ddd5ca;
    cursor: default;
}
.bcat-fg-chip.is-ghost .bcat-fg-lbl { color: #b8afa4; }
.bcat-fg-chip.is-ghost small { color: #cfc6bb; opacity: 1; }

/* Sticky bund-bjælke: [Vis X opskrifter] + Nulstil alle filtre. margin-top:auto skubber
   den i bunden når indholdet er kort; sticky holder den synlig når der rulles. */
.bcat-fd-foot {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    background: #fcfbf9;
    border-top: 1px solid #ece6de;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 1;
}
.bcat-fd-show {
    flex: 1;
    text-align: center;
    background: var(--bcat-accent, currentColor);
    border: 1.5px solid transparent;
    border-radius: 999px;
    padding: 0.55em 1.2em;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none;
    cursor: pointer;
}
.bcat-fd-show:hover { filter: brightness(0.92); }
/* "Vis X opskrifter" er skuffens PRIMÆRE handling, ikke en chip. Kant-varianten findes for
   at vores chips ikke skal ligne temaets udfyldte subcats-chips — den knap har ingen modpart
   i temaet, så den skal være udfyldt i begge varianter. Hul var den svageste knap på siden. */
.bcat-fd-reset {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: #8a7f74;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bcat-fd-reset:hover { color: #6f645a; }

/* Ikoner/flag i chips: Sæsons stroke-ikoner følger chip-tekstens farve (currentColor),
   flag-emoji har deres egne farver. Ur-ikonet i hurtigvalgene ligger på tekstlinjen. */
.bcat-fg-ic { display: inline-flex; }
.bcat-fg-ic svg { display: block; width: 17px; height: 17px; }
.bcat-fg-chip.is-free .bcat-fg-ic { color: #6f645a; }
.bcat-fg-chip.is-ghost .bcat-fg-ic { color: #b8afa4; }
/* SIDE-LINKS er den vigtigste chip i skuffen: de fører til en rigtig kategoriside frem for
   at lægge et filter på. De er derfor UDFYLDTE i begge varianter, så de skiller sig ud fra
   de frie filtre (stiplede). Aktive valg (is-on) bærer et ✕ og forveksles ikke. */
    background: var(--bcat-accent, currentColor);
    border-color: transparent;
}
.bcat-fg-flag { font-size: 14px; line-height: 1; }
.bcat-fd-quick { display: inline-flex; align-items: center; gap: 5px; }
.bcat-fd-qic { flex-shrink: 0; }

/* "Vis flere…": henter de overskydende valg frem i gruppen. Ser ud som en chip, men er
   en handling — derfor stiplet og uden farve-fyld, så den ikke ligner et filter. */
.bcat-fd-more {
    display: inline-flex;
    align-items: center;
    border: 1px dashed #c9beb2;
    background: transparent;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    color: #6f645a;
    cursor: pointer;
}
.bcat-fd-more:hover { border-style: solid; color: var(--bcat-accent, inherit); }

/* ── «Sortér efter» i filter-båndet ───────────────────────────────────────────
   En DROPDOWN, ikke fire links: som links lagde de en hel linje beslag på over grid'et.
   En <select> er desuden mobilens egen vælger, så den koster ingen egen UI — og til
   forskel fra et custom panel kan den ikke lave layoutskift, når den åbner. */
.bcat-sortbar { margin-left: auto; display: flex; align-items: center; gap: 0.5em; }
.bcat-sort-lbl { font-size: 0.76em; opacity: 0.55; white-space: nowrap; letter-spacing: 0.01em; }

.bcat-sort-sel {
    font: inherit;
    font-size: 0.82em;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.42em 1.9em 0.42em 0.85em;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55em center;
    background-size: 0.85em;
}
.bcat-sort-sel:hover { border-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.02); }
.bcat-sort-sel:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Knappen er no-JS-faldskærmen; den vises kun af <noscript> og fylder derfor intet. */
.bcat-sort-go { font: inherit; font-size: 0.8em; cursor: pointer; }

@media (max-width: 600px) { .bcat-sort-lbl { display: none; } }

/* Link-varianten: alle muligheder synlige på én gang. Vælges på Indstillinger. */
.bcat-sortbar.is-links { gap: 0.55em; flex-wrap: wrap; }
.bcat-sort {
    font-size: 0.82em; text-decoration: none; color: inherit; opacity: 0.7;
    padding: 0.15em 0; border-bottom: 1.5px solid transparent;
}
.bcat-sort:hover { opacity: 1; }
.bcat-sort.is-on { opacity: 1; font-weight: 600; border-bottom-color: currentColor; }


/* ---------------------------------------------------------------- foldede grupper
   Ingredienser (193 muligheder) og Anledning (22, hvoraf de fleste er irrelevante ni
   måneder om året) ligger bag en knap i stedet for i en chip-sky. Panelet er `hidden`
   fra første byte og folder ud INDE i skuffen — skuffen ruller i forvejen, så et
   overlejret panel ville bare give to rullende flader oven i hinanden. */
.bcat-fd-dd { padding-bottom: 10px; }
.bcat-fd-ddbtn {
    display: flex; align-items: center; gap: 8px; width: 100%;
    font: inherit; font-size: 0.82em; text-align: left; cursor: pointer;
    padding: 8px 12px; border-radius: 8px; background: #fff;
    border: 1px solid rgba(0, 0, 0, .14); color: inherit;
}
.bcat-fd-ddbtn:hover { border-color: rgba(0, 0, 0, .28); }
.bcat-fd-ddlbl { flex: 1; min-width: 0; }
/* Tallet er en CIRKEL, ikke en pille: `padding` gjorde bredden afhængig af ciffret, så
   ét tal blev en let oval. Med en fast højde og en min-bredde, der matcher den, er ét
   ciffer altid rundt — og to cifre vokser til en pille frem for at blive klippet. */
.bcat-fd-ddn {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box;
    font-size: 0.78em; font-weight: 600; line-height: 1; border-radius: 999px;
    background: var(--bcat-accent, currentColor); color: #fff;
}
.bcat-fd-ddchev { flex: none; opacity: .5; transition: transform .15s ease; }
.bcat-fd-ddbtn[aria-expanded="true"] .bcat-fd-ddchev { transform: rotate(180deg); }
.bcat-fd-opts.is-fold {
    margin-top: 8px; padding: 6px; max-height: 46vh; overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, .14); border-radius: 8px;
    /* Samme flade som knappen ovenover — panelet er knappens indhold, ikke en ny slags boks. */
    background: #fff;
}
.bcat-fd-opts.is-fold .bcat-fd-search { margin-bottom: 8px; }
/* KUN på touch: under 16px zoomer iOS Safari ind på feltet ved fokus, og så hopper hele
   skuffen. På desktop findes problemet ikke, og 16px ville bare være for stort. */
@media (max-width: 767px) { .bcat-fd-search { font-size: 16px; } }
/* Aktive valg står UDEN FOR panelet, så man kan se og fjerne dem uden at folde ud. */
.bcat-fd-applied { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }


/* ------------------------------------------------------- sortering: auto-udtrykket
   Links når der er plads, dropdown når der ikke er. Begge skrives ud, og CSS vælger —
   `display:none` tager også det skjulte ud af tilgængeligheds-træet, så der er kun ét
   sæt kontroller for en skærmlæser. Breakpointet følger grid'et: under ~768px står
   kortene i én-to kolonner, og dér koster fire links en hel linje. */
.bcat-sort-desk { display: contents; }
.bcat-sort-mob { display: none; }
@media (max-width: 767px) {
    .bcat-sort-desk { display: none; }
    .bcat-sort-mob { display: contents; }
}


/* -------------------------------------------------------------- båndet på mobil
   To rækker i stedet for én vilkårligt ombrudt: [Filtrér opskrifter] og sorteringen
   øverst, de aktive filtre nedenunder — så chipsene står lige over opskrifterne, de
   beskriver. Rækkefølgen styres med `order`, ikke med ny DOM: markup'et er det samme
   på begge skærme, så der er kun ét sæt kontroller for en skærmlæser, og desktop
   beholder sin ene linje (knap · chips · ryd · sortering til højre). */
.bcat-fb-break { display: none; }
@media (max-width: 767px) {
    .bcat-facets-bar { row-gap: 9px; }
    .bcat-facets-bar > .bcat-facets-btn { order: 1; }
    .bcat-facets-bar .bcat-sortbar { order: 2; }
    .bcat-facets-bar .bcat-fb-count { order: 6; margin-left: 0; }
    .bcat-fb-break { display: block; flex: 0 0 100%; height: 0; order: 3; }
    .bcat-facets-bar > .bcat-fapplied-chip { order: 4; }
    .bcat-facets-bar > .bcat-facets-clear { order: 5; }
}


/* Inde i et foldet panel er mulighederne en LISTE, ikke en sky. Chips fungerer, når selve
   ordene er informationen og man skimmer dem på tværs; når man leder efter ét bestemt navn
   i en lang liste, læser man nedad, og så skal linjerne stå under hinanden med antallet i
   samme kolonne. Det er ren CSS — markup'et er det samme som i chip-grupperne. */
/* `flex-wrap: nowrap` er ikke pynt: `.bcat-fd-opts` arver `wrap` fra chip-skyerne, og en
   KOLONNE med wrap og en max-height brækker om i FLERE kolonner — panelet blev to rækker
   med sidelæns scroll i stedet for én liste. */
.bcat-fd-opts.is-fold { flex-direction: column; flex-wrap: nowrap; gap: 1px; }
.bcat-fd-opts.is-fold .bcat-fg-chip {
    display: flex; width: 100%; justify-content: flex-start; gap: 8px;
    border: 0; border-radius: 6px; padding: 0.42em 0.5em; background: none;
}
.bcat-fd-opts.is-fold .bcat-fg-chip:hover { background: rgba(0, 0, 0, .04); }
.bcat-fd-opts.is-fold .bcat-fg-lbl { flex: 1; min-width: 0; }
.bcat-fd-opts.is-fold .bcat-fg-chip small { flex: none; opacity: .5; }
.bcat-fd-opts.is-fold .bcat-fg-chip.is-on { border-radius: 6px; }

/* LISTE-GRUPPER (3.79.0): samme rækker som det foldede panel, men altid åbne, og med en
   afkrydsnings-boks foran som i en butiks filter — rækken læses som «vælg til/fra», ikke
   som et link. Boksen er et pseudo-element, så markup'et er det samme som i chip-grupperne. */
.bcat-fd-opts.is-list { flex-direction: column; flex-wrap: nowrap; gap: 1px; }
.bcat-fd-opts.is-list .bcat-fg-chip {
    display: flex; width: 100%; justify-content: flex-start; gap: 9px; align-items: center;
    border: 0; border-radius: 6px; padding: 0.38em 0.4em; background: none; font-size: 0.86em;
}
.bcat-fd-opts.is-list .bcat-fg-chip::before {
    content: ""; flex: none; width: 15px; height: 15px; box-sizing: border-box; border-radius: 4px;
    border: 1.5px solid rgba(0, 0, 0, .35); background: #fff;
}
.bcat-fd-opts.is-list .bcat-fg-chip.is-ghost::before { border-style: dashed; opacity: .5; }
.bcat-fd-opts.is-list .bcat-fg-chip:hover { background: rgba(0, 0, 0, .04); }
.bcat-fd-opts.is-list .bcat-fg-lbl { flex: 1; min-width: 0; }
.bcat-fd-opts.is-list .bcat-fg-chip small { flex: none; opacity: .55; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.bcat-fd-opts.is-list .bcat-fg-chip.is-on {
    background: none; color: inherit; border-radius: 6px;
}
.bcat-fd-opts.is-list .bcat-fg-chip.is-on::before {
    border-color: var(--bcat-accent, currentColor); background: var(--bcat-accent, currentColor);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.bcat-fd-opts.is-list .bcat-fg-chip.is-on .bcat-fg-lbl { font-weight: 600; color: inherit; }
.bcat-fd-opts.is-list .bcat-fg-chip.is-on .bcat-fg-x { opacity: .5; font-size: 10px; color: inherit; }
.bcat-fd-opts.is-list .bcat-fg-chip.is-on svg { color: inherit; }
.bcat-fd-opts.is-list .bcat-fd-more { align-self: flex-start; margin-top: 4px; }

/* ANTAL I BÅNDET + FLYDENDE PIL (3.79.0) */
/* Antallet står VED filtrene (efter chips/ryd), ikke ovre ved sorteringen (3.80.1) */
.bcat-fb-count { font-size: 0.78rem; opacity: .6; margin-left: 6px; white-space: nowrap; }
.bcat-facets-fab {
    position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 24px);
    display: inline-flex; align-items: center; gap: 8px;
    background: currentColor; border-radius: 999px; padding: 0.6em 1.2em;
    font-size: 0.84rem; font-weight: 600; text-decoration: none; font-family: inherit;
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .45); z-index: 2147482990;
    opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.bcat-facets-fab[hidden] { display: none; }
.bcat-facets-fab.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.bcat-facets-fab svg, .bcat-facets-fab .bcat-fab-lbl { color: #fff; }
.bcat-facets-fab .bcat-fab-n {
    background: #fff; color: inherit; border-radius: 999px; min-width: 18px; height: 18px;
    padding: 0 6px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; line-height: 1;
}
.bcat-facets-overlay.is-open ~ .bcat-facets-fab, .bcat-facets-drawer.is-open ~ .bcat-facets-fab { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .bcat-facets-fab { transition: none; } }



/* ---------------------------------------------------------------- kort-badge
   Tallet der er sorteret på, øverst til venstre på kortets billede. Kortet er
   positioneringsrammen (temaets <article> får `bcat-badge-host`), fordi billedet
   er kortets første element — så badgen lander på billedet uden at vi behøver
   kende temaets billed-wrapper. */
.bcat-badge-host { position: relative; }
/* Badgen er nu kortets SIDSTE barn, og temaets `.entry-card > *:not(:last-child)` giver
   derfor det element, der VISUELT er sidst, en bundmargin, det ikke havde før. Badgen
   fylder intet, så den margin skal væk igen. */
.bcat-badge-host > *:nth-last-child(2) { margin-bottom: 0 !important; }
/* Temaet saetter `position: relative` paa kortets direkte boern (`.entry-card > *`), og den
   selektor slaar vores enkle klasse. Badgen blev derfor liggende I FLOW og skubbede billedet
   ned. Vi matcher specificiteten med kortet foran og laaser de fire egenskaber, placeringen
   staar og falder med. */
.bcat-badge-host > .bcat-card-badges {
    position: absolute !important;
    top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important;
}
/* To badges kan stå side om side («nem» = tid + antal ingredienser), så wrapperen bærer
   placeringen og chipsene ligger på række i den. */
.bcat-card-badges {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    /* STABLET, ikke på række: temaets egne knapper (kurv, hjerte) sidder i øverste HØJRE
       hjørne, og to brede chips på én linje løb ind under dem. Stablet holder de sig i
       venstre spalte uanset hvor lange teksterne bliver. Vi kan ikke lægge dem NEDERST på
       billedet: chippen er et barn af KORTET, ikke af billedet — kortet er den eneste
       positioneringsramme, vi ejer, og dets bund er under titel og metalinje. */
    display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
    max-width: calc(100% - 96px);   /* plads til temaets to knapper til højre */
    pointer-events: none;
}
.bcat-card-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0.26em 0.6em; border-radius: 999px;
    font-size: 0.72rem; line-height: 1.35; font-weight: 500;
    background: rgba(255, 255, 255, .94); color: #1a1a1a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.bcat-card-badge svg { flex: none; opacity: .75; }


/* Gruppe-overskrifterne skal kunne skimmes: skuffen er en lang liste, og ved man ikke
   lynhurtigt hvor «Retter» slutter og «Ingredienser» begynder, læser man den som ét rod.
   Mørkere, tungere og med tydeligere spærring end hjælpeteksten under. */
.bcat-fd-gt {
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    color: #1a1a1a;
    opacity: 1;
}
.bcat-fd-hint { opacity: .62; }
/* 3.79.0: hjælpeteksten er en EGEN tooltip — straks ved hover, og ved fokus/tap på ⓘ.
   Native `title` kommer først efter et sekund og aldrig på touch. */
.bcat-fd-gh { position: relative; }
.bcat-fd-gt { display: inline-flex; align-items: center; gap: 6px; }
.bcat-fd-gi {
    width: 13px; height: 13px; border-radius: 50%; border: 1px solid currentColor; opacity: .38;
    font-size: 9px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-style: italic;
    cursor: help; outline: none;
}
.bcat-fd-gh:hover .bcat-fd-gi, .bcat-fd-gi:focus-visible { opacity: .85; }
.bcat-fd-gi:focus-visible { box-shadow: 0 0 0 2px var(--bcat-accent, currentColor); }
.bcat-fd-tip {
    /* Pilen sidder under ⓘ: JS måler ikonets midte i overskriften og sætter --bcat-tip-x;
       tippen begynder 18px til venstre for midten (pil på 14px + 4px halv bredde). */
    position: absolute; left: calc(var(--bcat-tip-x, 24px) - 18px); top: calc(100% - 2px); z-index: 3;
    max-width: min(260px, calc(100% - var(--bcat-tip-x, 24px) + 18px)); padding: 6px 10px; border-radius: 7px;
    background: #2a2622; color: #fff; font-size: 11.5px; font-weight: 400; line-height: 1.4;
    letter-spacing: 0; text-transform: none; white-space: normal;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35);
    opacity: 0; pointer-events: none; transform: translateY(-3px);
    transition: opacity .08s ease, transform .08s ease;
}
.bcat-fd-tip::before { content: ""; position: absolute; left: 14px; top: -4px; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
.bcat-fd-gh:hover .bcat-fd-tip, .bcat-fd-gh:focus-within .bcat-fd-tip { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .bcat-fd-tip { transition: none; } }
.bcat-fd-gn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 5px; box-sizing: border-box;
    font-size: 10px; font-weight: 600; letter-spacing: 0; line-height: 1; border-radius: 999px;
    background: var(--bcat-accent, currentColor); color: #fff;
}
/* En tynd streg over hver gruppe (undtagen den første) adskiller stærkere end luft alene. */
.bcat-fd-grp + .bcat-fd-grp { border-top-color: #e6ded3; }


/* Status-maerker er IKKE neutrale tal — de peger. Derfor farve frem for hvid:
   «Populaer» i temaets linkfarve, «I saeson» i groent. De staar aldrig mere end ét
   pr. kort, saa der er ingen risiko for et farvebatteri. */
.bcat-card-badge.is-status { color: #fff; }
.bcat-card-badge.is-status svg { opacity: .95; }
.bcat-card-badge.is-popular { background: var(--bcat-accent, #b4451f); }
.bcat-card-badge.is-season { background: #2f6b46; }


/* ------------------------------------------------------------------ saeson-gitteret
   Fire felter paa én raekke: ikon over navn over antal. Ikonet staar i en HVID skive,
   fordi skuffens egen flade er cremet — et farvet ikon direkte paa baggrunden ville
   drukne, og paa et site med en moerkere skuffe ville det forsvinde helt.
   FARVEN bor i ikonet, ikke i feltet: saa er «valgt» stadig en udfyldning, som alle
   andre valg i skuffen, i stedet for en svagere ramme om et i forvejen farvet felt. */
.bcat-fd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding-bottom: 10px; }
.bcat-fg-tile {
    display: block; text-align: center; text-decoration: none; color: inherit;
    padding: 2px 0 4px; border-radius: 10px;
}
.bcat-fg-disc {
    width: 46px; height: 46px; margin: 0 auto 7px;
    border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, .07);
    display: flex; align-items: center; justify-content: center;
    color: var(--bcat-season, #6f645a);
}
.bcat-fg-disc svg { width: 24px; height: 24px; }
.bcat-fg-tile .bcat-fg-lbl { display: block; font-size: 11.5px; font-weight: 500; }
.bcat-fg-tile small { display: block; font-size: 10.5px; opacity: .5; margin-top: 1px; }

/* Aarstidens egen farve — den ene gruppe i skuffen, hvor farve BETYDER noget. */
.bcat-fg-tile[data-season*="foraar"]  { --bcat-season: #2f6b46; }
.bcat-fg-tile[data-season*="sommer"]  { --bcat-season: #9a6b1e; }
.bcat-fg-tile[data-season*="efteraar"]{ --bcat-season: #9c5326; }
.bcat-fg-tile[data-season*="vinter"]  { --bcat-season: #3a5c80; }

.bcat-fg-tile.is-on .bcat-fg-disc { background: var(--bcat-season, #6f645a); border-color: transparent; color: #fff; }
.bcat-fg-tile.is-on .bcat-fg-lbl { color: var(--bcat-season, inherit); font-weight: 700; }
.bcat-fg-tile.is-on small { opacity: .8; }
.bcat-fg-tile.is-ghost { opacity: .38; }
.bcat-fg-tile.is-ghost .bcat-fg-disc { background: transparent; border-style: dashed; }


/* ------------------------------------------------- ingrediens-panelet som et TRAE
   Hylden staar yderst, dens stoerste varer rykket ind under den. Uden indrykningen
   ville panelet vaere en flad liste, hvor «Koed» og «Kylling» ser ud som soeskende. */
.bcat-fd-opts.is-fold .bcat-fg-chip.is-sub { padding-left: 26px; }
.bcat-fd-opts.is-fold .bcat-fg-chip.is-sub .bcat-fg-lbl { opacity: .88; }

/* Et VALGT punkt i panelet: udfyldt i temaets farve med et fjern-kryds, saa man kan
   traekke valget tilbage dér, hvor man traf det — ikke kun oppe i «Dine filtre». */
.bcat-fd-opts.is-fold .bcat-fg-chip.is-on {
    background: var(--bcat-accent, currentColor);
    border-radius: 6px;
}
.bcat-fd-opts.is-fold .bcat-fg-chip.is-on .bcat-fg-lbl,
.bcat-fd-opts.is-fold .bcat-fg-chip.is-on .bcat-fg-x,
.bcat-fd-opts.is-fold .bcat-fg-chip.is-on svg { color: #fff; }
.bcat-fd-opts.is-fold .bcat-fg-chip.is-on .bcat-fg-x { margin-left: auto; opacity: .85; }

/* Knapper uden href (3.84.0): crawlere kan ikke foelge dem, men de skal stadig se ud som links */
#bcat-facets-drawer [data-href], .bcat-facets-bar [data-href] { cursor: pointer; }
#bcat-facets-drawer [data-href]:focus-visible, .bcat-facets-bar [data-href]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }