/**
 * 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 (default); udfyldte chips ovenover → kant-facetter (.is-outline).
   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. */
.bcat-facets-bar {
    display: flex;
    align-items: center;
    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, .bcat-facets-btn .bcat-facets-n { color: #fff; }
.bcat-facets-btn .bcat-facets-ic path { stroke: #fff; }
.bcat-facets-ic { flex-shrink: 0; }
.bcat-facets-n {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    min-width: 1.5em;
    padding: 0.05em 0.35em;
    font-size: 0.75em;
    text-align: center;
}
/* "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: 6px;
    background: currentColor;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.26em 0.75em;
    font-size: 0.72rem;
    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; }
/* Badge i kant-variant: kant frem for fyld — background:currentColor ville æde tallet */
.is-outline .bcat-facets-btn .bcat-facets-n { background: transparent; border: 1px solid currentColor; color: inherit; }
.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; }
.is-outline .bcat-fd-opt.is-sel { background: transparent; border-color: currentColor; }
.is-outline .bcat-fd-opt.is-sel .bcat-fd-lbl, .is-outline .bcat-fd-opt.is-sel .bcat-fd-m { color: inherit; }

/* 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; }
.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 — tydeligt at man ikke navigerer til en side */
.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: anti-mønster af side-chippen — kant i linkfarven + fjern-kryds */
.bcat-fg-chip.is-on { background: #fff; border: 1.5px solid currentColor; font-weight: 600; }
.bcat-fg-chip.is-on .bcat-fg-lbl, .bcat-fg-chip.is-on .bcat-fg-x { color: inherit; }
.bcat-fg-x { font-size: 10px; opacity: 0.7; }
/* Kant-variant (udfyldte subcats): side-chips faar kant, aktive udfyldes */
.is-outline .bcat-fg-chip { background: transparent; border-color: currentColor; border-style: solid; }
.is-outline .bcat-fg-chip .bcat-fg-lbl { color: inherit; }
.is-outline .bcat-fg-chip small { color: inherit; opacity: 0.6; }
.is-outline .bcat-fg-chip.is-on { background: currentColor; }
.is-outline .bcat-fg-chip.is-on .bcat-fg-lbl, .is-outline .bcat-fg-chip.is-on .bcat-fg-x { color: #fff; }

/* ===== 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; }
.is-outline .bcat-fd-quick.is-on { background: transparent; border-color: var(--bcat-accent, currentColor); color: var(--bcat-accent, inherit); }

/* ===== 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, .is-outline .bcat-fg-chip.is-ghost .bcat-fg-lbl { color: #b8afa4; }
.bcat-fg-chip.is-ghost small { color: #cfc6bb; opacity: 1; }
.is-outline .bcat-fg-chip.is-ghost { background: transparent; border-style: dashed; border-color: #ddd5ca; }
.is-outline .bcat-fg-chip.is-ghost small { color: #cfc6bb; }

/* 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); }
.is-outline .bcat-fd-show { background: transparent; border-color: var(--bcat-accent, currentColor); color: var(--bcat-accent, inherit) !important; }
.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; }
.bcat-fg-chip.is-page .bcat-fg-ic, .is-outline .bcat-fg-chip.is-on .bcat-fg-ic { color: #fff; }
.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); }