/**
 * 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; }
.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-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 ===== */
.bcat-fd-search {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e2dacf;
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    color: #33302e;
    margin-bottom: 4px;
}
.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; }
.bcat-fd-ddn {
    flex: none; font-size: 0.82em; line-height: 1; padding: 3px 6px; border-radius: 20px;
    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; }
/* 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-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; }


/* ---------------------------------------------------------------- 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; }
/* 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; }