/**
 * Shop-Filter Sidebar Styles (JetSmartFilters)
 * Natur-Luftballons.de
 *
 * Erstellt: 14.02.2026
 *
 * Suchergebnis-Seiten: Filter-Sidebar ausblenden (24.03.2026)
 * Synonym-Suche operiert auf SQL-Ebene, JSF-Filter auf Taxonomie-Ebene.
 * Kombination fuehrt zu unvorhersehbarem Verhalten. Kunde filtert ueber Suchbegriff.
 */
body.search-results #secondary {
    display: none !important;
}
body.search-results #primary {
    width: 100% !important;
    padding-left: 0 !important;
}

/**
 * Erstellt: 14.02.2026
 * Aktualisiert: 21.02.2026 — PDCA-UX-Review: Subtitle-Kontrast, Swatch-States, Checkbox-Accessibility
 * Provider: woocommerce-archive-default (kein Elementor)
 * Doku: docs/website/jetsmartfilters-guide.md
 *
 * JSF Block-Klassen (NICHT Widget-Klassen!):
 *   .jet-smart-filters-radio / .jet-smart-filters-checkboxes-list
 *   .jet-radio-list / .jet-checkboxes-list
 *   .jet-radio-list__row / .jet-checkboxes-list__row
 *   .jet-radio-list__label / .jet-checkboxes-list__label
 *   .jet-filters-counter
 *   fieldset > legend — Filter-Label (von JSF mit display:none gerendert)
 */

/* ===================================================================
   SIDEBAR + CONTENT GRID LAYOUT
   Astra plain-container hat keine Sidebar-Breiten-CSS.
   Wir setzen Flexbox fuer Shop/Kategorie-Seiten.
   =================================================================== */

.ast-woo-shop-archive.ast-left-sidebar .ast-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
}

/* Container-Breite: Astra-Default 1240px auf 1400px erhoehen.
   Spezifitaet (0,4,1) schlaegt Astras inline-CSS (0,3,0) bei
   .ast-woo-shop-archive .site-content > .ast-container { max-width: 1240px }
   Scope: nur Shop/Kategorie mit Left-Sidebar. */
body.ast-woo-shop-archive.ast-left-sidebar .site-content > .ast-container {
    max-width: 1400px;
}

.ast-woo-shop-archive.ast-left-sidebar #secondary {
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
    order: -1;
    padding-right: 0;
}

.ast-woo-shop-archive.ast-left-sidebar #primary {
    flex: 1;
    min-width: 0;
    width: auto;
}

/* Abstand zwischen Filter-Bloecken (kompakt: 16px statt 24px) */
#secondary .widget_block {
    margin-bottom: 16px;
}

/* ===================================================================
   REMOVE FILTERS BUTTON ("Filter zuruecksetzen")
   =================================================================== */

#secondary .jet-smart-filters-remove-filters {
    margin-top: 16px;
    margin-bottom: 8px;
}

/* JSF setzt .hide auf den Wrapper wenn keine Filter aktiv — Layout-Sprung verhindern */
#secondary .jet-remove-all-filters.hide {
    display: block !important;
    visibility: visible !important;
}

#secondary .jet-remove-all-filters__button {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #2E7D32;
    background: #E8F5E9;
    border: 1px solid #C8E6C9;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#secondary .jet-remove-all-filters__button:hover {
    background: #C8E6C9;
    color: #1B5E20;
}

/* ===================================================================
   FILTER-LABELS (legend sichtbar machen)
   JSF Block-Modus rendert Labels als <legend style="display:none;">
   =================================================================== */

#secondary .jet-filter fieldset legend {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #2E7D32;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #E8F5E9;
}

/* Filter-Untertitel (PHP render_block Hook injiziert <span> in <legend>) */
#secondary .jsf-filter-subtitle {
    display: block;
    color: #666;
    font-weight: 400;
    font-size: 0.8em;
    line-height: 1.3;
    margin-top: 2px;
}
/* Subtitle verstecken wenn Filter offen — Optionen erklären sich selbst */
#secondary .jet-filter.jsf-accordion-open .jsf-filter-subtitle {
    display: none;
}
/* Ausnahmen: Farbe + Oberfläche — Subtitle immer sichtbar (Erklärung/Bedienhinweis) */
#secondary .jet-filter.jsf-accordion-open [data-query-var="pa_basisfarbe"] .jsf-filter-subtitle,
#secondary .jet-filter.jsf-accordion-open [data-query-var="pa_farbfamilie"] .jsf-filter-subtitle {
    display: block;
}
/* Groessen-Filter: Subtitle bleibt als Legende fuer Ø sichtbar */
#secondary .jet-filter.jsf-accordion-open .jsf-filter-subtitle.jsf-subtitle-persistent {
    display: block;
}

/* ===================================================================
   RADIO BUTTONS & CHECKBOXES
   =================================================================== */

/* Einzelne Filter-Zeilen: IMMER untereinander (block), nie inline.
   #secondary noetig um Gutenberg-Block-Inline-Styles zu ueberschreiben.
   margin-bottom: 0 ueberschreibt inkonsistente JSF-Defaults (0/3/10px). */
#secondary .jet-radio-list__row,
#secondary .jet-checkboxes-list__row {
    display: block !important;
    padding: 4px 0;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #f5f5f5;
}

.jet-radio-list__row:last-child,
.jet-checkboxes-list__row:last-child {
    border-bottom: none;
}

/* Klickbare Labels */
.jet-radio-list__item,
.jet-checkboxes-list__item {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: color 0.2s ease;
}

.jet-radio-list__item:hover,
.jet-checkboxes-list__item:hover {
    color: #2E7D32;
}

/* Text-Labels */
.jet-radio-list__label,
.jet-checkboxes-list__label {
    font-family: 'Nunito', sans-serif;
}

/* Counter (Anzahl Produkte pro Option) */
.jet-filters-counter {
    font-size: 12px;
    color: #999;
}

/* Decorator (Checkbox/Radio-Kreis) */
.jet-radio-list__decorator,
.jet-checkboxes-list__decorator {
    border-color: #6b7280;
}

/* Checked-State: Grau gefüllt + weißes Häkchen (Accessibility: kein Grün als einziges Signal) */
.jet-radio-list__input:checked ~ .jet-radio-list__button .jet-radio-list__decorator,
.jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button .jet-checkboxes-list__decorator {
    background-color: #555 !important;
    border-color: #555 !important;
    position: relative;
}

.jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button .jet-checkboxes-list__decorator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

/* ===================================================================
   VISUAL SWATCHES (Farb-Filter mit Ballonbildern)
   JSF Color-Image Filter: .jet-smart-filters-color-image
   Tatsaechliche Klassen: jet-color-image-list, jet-color-image-list__item
   =================================================================== */

/* Swatch-Liste: vertikal, Kreis links + Label rechts */
#secondary .jet-color-image-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Einzelne Swatch-Zeile: horizontal (Kreis + Label) */
#secondary .jet-color-image-list__row {
    padding: 2px 0;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #f5f5f5;
}

#secondary .jet-color-image-list__row:last-child {
    border-bottom: none;
}

/* Button-Container: Kreis links, Label rechts */
#secondary .jet-color-image-list__button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Swatch-Kreis: 24px, inaktiv ausgegraut */
#secondary .jet-color-image-list__decorator {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    overflow: hidden;
    border: none;
    transition: opacity 0.2s ease, transform 0.15s ease;
    box-sizing: border-box;
    display: block;
    opacity: 0.5;
    background: transparent;
}

/* Hover: deutlicher sichtbar */
#secondary .jet-color-image-list__row:hover .jet-color-image-list__decorator {
    opacity: 0.7;
}

/* Aktiver Swatch: volle Farbe + grauer Hintergrund-Kreis */
#secondary .jet-color-image-list__input:checked ~ .jet-color-image-list__button .jet-color-image-list__decorator {
    opacity: 1;
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

/* JSF Checked-Indicator entfernen (gruener Border auf .image Span) */
#secondary .jet-color-image-list__image {
    border: none !important;
}

/* Swatch-Bild: Kreis fuellen */
#secondary .jet-color-image-list__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Swatch-Label: neben dem Kreis (inaktiv: grau) */
#secondary .jet-color-image-list__label {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.3;
}

/* Aktiver Label: fett + dunkel */
#secondary .jet-color-image-list__input:checked ~ .jet-color-image-list__button .jet-color-image-list__label {
    color: #333;
    font-weight: 700;
}

/* Hover Label: dunkler */
#secondary .jet-color-image-list__row:hover .jet-color-image-list__label {
    color: #374151;
}

/* Counter im Visual-Modus */
#secondary .jet-color-image-list .jet-filters-counter {
    font-size: 12px;
    color: #999;
}

/* Groessen-Filter: Hoehenangabe dezent hinter Durchmesser */
.jsf-groesse-hoehe {
    color: #999;
    font-size: 0.8em;
    font-weight: 400;
    white-space: nowrap;
}

/* Helium-Filter: Immer offen, kein Accordion, "nein"-Option versteckt */
.jsf-no-accordion legend {
    cursor: default !important;
}
.jsf-no-accordion legend::before {
    display: none !important;
}
/* Zweite Row ("nein") ausblenden — (1,4,0) schlaegt Accordion-Open (1,3,0) */
#secondary .jet-filter.jsf-no-accordion .jet-filter-row + .jet-filter-row {
    display: none !important;
}

/* ===================================================================
   HIERARCHISCHE CHECKBOXES (Groesse: Parent-Child + Collapsible)
   JSF "Group terms by parents" + "Collapsible"
   =================================================================== */

/* Parent-Zeile: fett, leicht groesser */
#secondary .jet-list-tree__parent > .jet-checkboxes-list__item .jet-checkboxes-list__label {
    font-weight: 700;
    font-size: 14px;
    color: #333;
}

/* Children-Container: eingerueckt */
#secondary .jet-list-tree__children {
    padding-left: 20px;
    margin-top: 0;
}

/* Leerer Collapse-Platzhalter ausblenden (nimmt sonst 20px Hoehe ein) */
#secondary .jet-collapse-none {
    display: none;
}

/* Toggle-Icon (Auf-/Zuklappen) — SVG-basiert */
#secondary .jet-collapse-icon {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

#secondary .jet-collapse-icon svg {
    width: 16px;
    height: 16px;
    stroke: #2E7D32;
}

/* Parent-Zeile: Bottom-Border als Trenner */
#secondary .jet-list-tree__parent {
    border-bottom: 1px solid #E8F5E9;
    padding-bottom: 2px;
    margin-bottom: 2px;
}

/* ===================================================================
   OBERFLAECHE-FILTER: Chevron rechts (Branchenstandard Otto/IKEA/Conrad).
   Scoped auf pa_farbfamilie um pa_groesse nicht zu beeinflussen.
   =================================================================== */

/* Parent-Labels: NICHT fett (sind Filteroptionen, keine Ueberschriften) */
#secondary [data-query-var="pa_farbfamilie"] .jet-list-tree__parent > .jet-checkboxes-list__item .jet-checkboxes-list__label {
    font-weight: 400;
}

/* Parent-Zeile: Flex-Row, Checkbox links, Chevron ganz rechts.
   Spezifitaet MUSS hoeher als Accordion-Open-Regel (1,3,0) sein. */
#secondary .jet-filter.jsf-accordion-open [data-query-var="pa_farbfamilie"] .jet-list-tree__parent,
#secondary [data-query-var="pa_farbfamilie"] .jet-list-tree__parent {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

#secondary [data-query-var="pa_farbfamilie"] .jet-list-tree__parent > .jet-checkboxes-list__item {
    flex: 1;
    min-width: 0;
}

/* Chevron rechts: JSF rendert .jet-collapse-icon VOR .jet-checkboxes-list__item
   im DOM. CSS order verschiebt das Icon ans Ende der Flex-Row. */
#secondary [data-query-var="pa_farbfamilie"] .jet-list-tree__parent > .jet-collapse-icon {
    order: 99;
    margin-left: auto;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#secondary [data-query-var="pa_farbfamilie"] .jet-collapse-icon svg {
    display: none;
}

#secondary [data-query-var="pa_farbfamilie"] .jet-collapse-icon::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #2E7D32;
    border-bottom: 2px solid #2E7D32;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

/* Offen: Chevron zeigt nach unten. JSF hat keine open-Klasse auf Parent,
   daher JS setzt .jsf-chevron-open auf das .jet-collapse-icon Element */
#secondary [data-query-var="pa_farbfamilie"] .jet-collapse-icon.jsf-chevron-open::after {
    transform: rotate(45deg);
}

/* ===================================================================
   ART-FILTER HIERARCHIE (pa_bedruckt-unbedruckt)
   Zubehör = Chevron-Toggle (keine Checkbox, nur Kinder filtern).
   Unbedruckt/Bedruckt = flat Checkboxen (keine Kinder).
   =================================================================== */

/* Kein Collapse-Icon im Art-Filter (Collapsible=OFF, aber sicherheitshalber) */
#secondary [data-query-var="pa_bedruckt-unbedruckt"] .jet-collapse-icon {
    display: none !important;
}

/* Zubehör-Parent: nur Checkbox verstecken, Decorator bleibt (wird zum +/-) */
#secondary .jsf-zubehoer-parent input[type="checkbox"] {
    display: none !important;
}

/* Zubehör-Parent: klickbar */
#secondary .jsf-zubehoer-parent {
    cursor: pointer;
}

/* Zubehör-Label: gleiche Formatierung wie Unbedruckt/Bedruckt */
#secondary .jsf-zubehoer-parent .jet-checkboxes-list__label {
    font-weight: 400 !important;
}

/* Button-Container: Flex für vertikale Zentrierung von Decorator + Label */
#secondary .jsf-zubehoer-parent .jet-checkboxes-list__button {
    display: flex !important;
    align-items: center !important;
}

/* SVG-Häkchen im Decorator verstecken (28x28 SVG stört Höhe) */
#secondary .jsf-zubehoer-parent .jet-checkboxes-list__checked-icon {
    display: none !important;
}

/* Decorator: Checkbox-Quadrat → Plus-Zeichen */
#secondary .jsf-zubehoer-parent .jet-checkboxes-list__decorator {
    border: none !important;
    background: none !important;
    margin: 0 5px 0 0 !important;
    width: 14px !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#secondary .jsf-zubehoer-parent .jet-checkboxes-list__decorator::after {
    content: "+" !important;
    border: none !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    color: #2E7D32;
    font-size: 15px;
    font-weight: 300;
    line-height: 1;
}

/* Offen: Minus statt Plus */
#secondary .jsf-zubehoer-open .jet-checkboxes-list__decorator::after {
    content: "\2212" !important;
}

/* Zubehör-Kinder: etwas kleiner, visuell als Unterkategorie erkennbar */
#secondary [data-query-var="pa_bedruckt-unbedruckt"] .jet-list-tree__children .jet-checkboxes-list__label {
    font-size: 13px;
    font-weight: 400;
}

/* ===================================================================
   CONDITIONAL FILTER VISIBILITY
   JS togglet .jsf-hidden auf .widget_block:
   - wenn nur Zubehoer gewaehlt (Form/Groesse/Packungsinhalt/Oberflaeche)
   - wenn Bedruckt nicht gewaehlt (Anlass, Motiv)
   =================================================================== */

#secondary .widget_block.jsf-hidden {
    display: none;
}

/* CLS-Fix A/Teil 1: Bedruckt-only Filter server-seitig versteckt.
   PHP render_block setzt data-jsf-initial-hidden auf das INNERE Element
   (nicht auf .widget_block — der Wrapper wird von WP nach dem Filter hinzugefuegt).
   JS entfernt es wenn Bedruckt aktiv wird.
   Nur Desktop — Mobile Sidebar ist ohnehin display:none. */
@media (min-width: 921px) {
    #secondary [data-jsf-initial-hidden] {
        display: none;
    }
}

/* CLS-Fix: Basisfarbe als eingefrorene Box bis JS fertig.
   visibility:hidden allein reicht NICHT -- Box beeinflusst weiterhin Layout.
   Nachbarn springen wenn JS die Internals aendert.
   Loesung: height + max-height + overflow:hidden = Box ist im Layout eingefroren.
   KRITISCH: Die primaeren Regeln stehen INLINE im <head> (functions.php wp_head Prio 5).
   Diese Regeln hier sind das externe Duplikat fuer den Fall dass Inline-CSS fehlt.
   WARTUNG: Bei Aenderung der Basisfarben-Anzahl (aktuell 14) Hoehe neu messen! */
@media (min-width: 921px) {
    body:not(.jsf-basisfarbe-ready) [data-query-var="pa_basisfarbe"] {
        height: 660px;
        max-height: 660px;
        min-height: 660px;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
    }
}

/* Reveal-Transition (sanftes Einblenden nach JS-Init) */
[data-query-var="pa_basisfarbe"] {
    transition: opacity 0.3s ease;
}

/* 4s Fallback falls Basisfarbe-JS nicht laedt */
@keyframes jsf-basisfarbe-fallback {
    to { visibility: visible; opacity: 1; height: auto; max-height: none; min-height: 0; overflow: visible; }
}
@media (min-width: 921px) {
    body:not(.jsf-basisfarbe-ready) [data-query-var="pa_basisfarbe"] {
        animation: jsf-basisfarbe-fallback 0s 4s forwards;
    }
}

/* CLS-Fix: Grid margin-left stabilisieren (springt von 45px auf 0 beim Sidebar-Settling) */
@media (min-width: 921px) {
    .ast-woo-shop-archive ul.products {
        margin-left: 0 !important;
    }
}

/* CLS-Fix: Control-Row ueber dem Grid stabilisieren (Hoehe variiert beim Laden) */
.woocommerce-result-count,
.woocommerce-ordering {
    min-height: 33px;
}

/* CLS-Fix: YITH Wishlist SVG constrainen.
   Ohne width/height fuellt SVG den Container (225x225px aus viewBox 1:1).
   Verursacht 266px Shift auf astra-shop-summary-wrap in jeder Produktkarte.
   Primaere Regel steht INLINE im <head>, dies ist das externe Duplikat. */
.yith-wcwl-add-to-wishlist svg {
    display: inline-block;
    width: 24px;
    height: 24px;
}

/* ===================================================================
   ZUBEHOER-KINDER: default versteckt, via Chevron-Toggle eingeblendet.
   =================================================================== */

#secondary [data-query-var="pa_bedruckt-unbedruckt"] .jet-list-tree__children.jsf-zubehoer-hidden {
    display: none;
}

/* ===================================================================
   MOTIV-FILTER: "Mehr anzeigen"-Collapse (Top 8 sichtbar, Rest versteckt)
   JS setzt .jsf-motiv-hidden auf Rows ab Index 8.
   =================================================================== */

#secondary [data-query-var="pa_motiv"] .jet-checkboxes-list__row.jsf-motiv-hidden {
    display: none !important;
}

/* Toggle-Button — Astra setzt global padding: 8px 40px auf <button>! */
#secondary .jsf-motiv-toggle {
    background: none;
    border: none;
    padding: 6px 0 4px 24px !important; /* !important gegen Astra-Global */
    color: #2E7D32;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left;
}

#secondary .jsf-motiv-toggle:hover {
    color: #1B5E20;
}

#secondary .jsf-motiv-toggle[data-expanded="false"]::after {
    content: ' \25BE'; /* ▾ */
}

#secondary .jsf-motiv-toggle[data-expanded="true"]::after {
    content: ' \25B4'; /* ▴ */
}

/* ===================================================================
   PRODUCT GRID: Responsive 3/4 Spalten
   Astra nutzt display:flex auf ul.products — wir erzwingen display:grid,
   damit grid-template-columns greift. Default 3 Spalten, ab 1280px
   Viewport 4 Spalten, Mobile 2 Spalten.
   =================================================================== */

.ast-woo-shop-archive ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* Astras Flexbox-Width auf li.product zuruecksetzen — Grid kontrolliert Spaltenbreite */
.ast-woo-shop-archive ul.products li.product {
    width: auto !important;
    margin-right: 0 !important;
}

/* Astras Clearfix-Pseudos (display:table) blockieren Grid-Zelle 1 — entfernen */
.ast-woo-shop-archive ul.products::before,
.ast-woo-shop-archive ul.products::after {
    display: none !important;
}

@media (min-width: 1366px) {
    .ast-woo-shop-archive ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 921px) {
    /* Astra Left-Sidebar padding entfernen (Sidebar ist auf Mobile hidden) */
    #primary {
        padding-left: 0 !important;
    }
    .ast-woo-shop-archive ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===================================================================
   "MEHR LADEN"-BUTTON (Astra Load More)
   Ersetzt Infinite Scroll. Astra rendert .ast-shop-load-more Button.
   Styling konsistent mit Shop-Design (Nunito, Gruen-Palette).
   =================================================================== */

.ast-shop-pagination-infinite {
    text-align: center;
    padding: 24px 0 16px;
}

/* Astra-Override: Astra setzt global padding:8px 40px auf <button>/<span>
   Kein display setzen — Astra toggled Sichtbarkeit via .active Klasse */
.ast-shop-load-more.active {
    display: inline-block;
    background: #fff !important;
    color: #2E7D32 !important;
    border: 2px solid #2E7D32 !important;
    border-radius: 8px !important;
    padding: 12px 32px !important;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
}

.ast-shop-load-more.active:hover {
    background: #2E7D32 !important;
    color: #fff !important;
}

/* "Keine weiteren Produkte"-Text */
.ast-shop-load-more.no-more {
    background: transparent !important;
    color: #999 !important;
    border: none !important;
    cursor: default;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 16px !important;
}

/* Loader-Animation: zentriert unter dem Button */
.ast-shop-pagination-infinite .ast-loader {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
}

/* ===================================================================
   LOADING / AJAX INDICATOR
   JSF setzt .jet-filters-loading auf ul.products waehrend AJAX.
   Opacity-Transition sorgt fuer sanften Content-Swap statt hartem Flash.
   =================================================================== */

ul.products {
    transition: opacity 0.15s ease-out;
}

ul.products.jet-filters-loading {
    opacity: 0.15;
    pointer-events: none;
}

/* ===================================================================
   MOBILE RESPONSIVE
   =================================================================== */

/* Default: Mobile-Overlay-Elemente auf Desktop versteckt */
.jsf-mobile-trigger,
.jsf-mobile-overlay-header,
.jsf-mobile-overlay-footer,
.jsf-mobile-tags {
    display: none !important;
}

/* ===================================================================
   MOBILE FILTER OVERLAY (<921px)
   #secondary wird zum Fullscreen-Overlay.
   Trigger: Sticky "Filter"-Button unten zentriert.
   JS: deploy/jsf-mobile-filter.js
   =================================================================== */

@media (max-width: 921px) {

    /* --- Sidebar: auf Mobile versteckt (Overlay per JS) --- */
    .ast-woo-shop-archive.ast-left-sidebar .ast-container {
        flex-wrap: wrap;
    }

    body:not(.jsf-mobile-filter-open) #secondary {
        display: none !important;
    }

    /* --- Header + ShiftNav-Toggle bei offenem Overlay verstecken --- */
    body.jsf-mobile-filter-open .ast-custom-header,
    body.jsf-mobile-filter-open #shiftnav-toggle-main {
        display: none !important;
    }

    /* --- Overlay: Fullscreen fixed --- */
    body.jsf-mobile-filter-open #secondary {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 100000;
        background: #fff;
        width: 100% !important;
        min-width: 100% !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Content-Bereich im Overlay: scrollbar zwischen Header und Footer */
    body.jsf-mobile-filter-open #secondary .widget_block {
        margin-bottom: 16px;
        padding: 0 16px;
    }

    /* --- Overlay-Header: sticky top --- */
    .jsf-mobile-overlay-header {
        display: none;
    }

    body.jsf-mobile-filter-open .jsf-mobile-overlay-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
        padding: 12px 16px;
        border-bottom: 1px solid #e5e5e5;
        flex-shrink: 0;
    }

    .jsf-mobile-overlay-header__title {
        font-family: 'Nunito', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #333;
    }

    /* Close-Button — Astra-Override: explizites padding:0 */
    .jsf-mobile-overlay-close {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }

    .jsf-mobile-overlay-close:hover,
    .jsf-mobile-overlay-close:active {
        color: #333;
        background: none !important;
    }

    .jsf-mobile-overlay-close svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* --- Active-Filter-Tags (Chip-Leiste) --- */
    .jsf-mobile-tags {
        display: none;
    }

    body.jsf-mobile-filter-open .jsf-mobile-tags {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 16px;
        border-bottom: 1px solid #e5e5e5;
        flex-shrink: 0;
        scrollbar-width: none;
    }

    body.jsf-mobile-filter-open .jsf-mobile-tags::-webkit-scrollbar {
        display: none;
    }

    .jsf-mobile-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #E8F5E9 !important;
        border: 1px solid #C8E6C9 !important;
        border-radius: 16px !important;
        padding: 4px 10px !important;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: #2E7D32;
        white-space: nowrap;
        cursor: pointer;
        min-height: 32px;
        -webkit-tap-highlight-color: transparent;
    }

    .jsf-mobile-tag:hover,
    .jsf-mobile-tag:active {
        background: #C8E6C9 !important;
    }

    .jsf-mobile-tag__x {
        font-size: 16px;
        line-height: 1;
        color: #2E7D32;
    }

    .jsf-mobile-tag--clear {
        background: transparent !important;
        border-color: #999 !important;
        color: #666;
    }

    .jsf-mobile-tag--clear:hover,
    .jsf-mobile-tag--clear:active {
        background: #f5f5f5 !important;
    }

    /* --- Overlay-Footer: sticky bottom --- */
    .jsf-mobile-overlay-footer {
        display: none;
    }

    body.jsf-mobile-filter-open .jsf-mobile-overlay-footer {
        display: block !important;
        position: sticky;
        bottom: 0;
        z-index: 10;
        background: #fff;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #e5e5e5;
        flex-shrink: 0;
    }

    /* Apply-Button — Astra-Override: explizites padding */
    .jsf-mobile-apply {
        display: block;
        width: 100%;
        background: #2E7D32 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 14px 24px !important;
        font-family: 'Nunito', sans-serif;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.2s ease;
    }

    .jsf-mobile-apply:hover,
    .jsf-mobile-apply:active {
        background: #1B5E20 !important;
    }

    .jsf-mobile-apply:disabled {
        background: #ccc !important;
        color: #999 !important;
        cursor: not-allowed;
    }

    /* --- Trigger-Button: sticky unten zentriert --- */
    .jsf-mobile-trigger {
        position: fixed;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99999;
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        background: #2E7D32 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 24px !important;
        padding: 10px 20px !important;
        font-family: 'Nunito', sans-serif;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        min-height: 44px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .jsf-mobile-trigger:hover,
    .jsf-mobile-trigger:active {
        background: #1B5E20 !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }

    .jsf-mobile-trigger svg {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0;
    }

    .jsf-mobile-trigger__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        color: #2E7D32;
        font-size: 12px;
        font-weight: 700;
        min-width: 20px;
        height: 20px;
        border-radius: 10px;
        padding: 0 4px;
        margin-left: 2px;
    }

    /* Trigger im Overlay verstecken */
    body.jsf-mobile-filter-open .jsf-mobile-trigger {
        display: none !important;
    }

    /* --- Touch-Targets: min-height 44px im Overlay --- */
    /* KEIN display:flex — wuerde Accordion display:none ueberschreiben! */
    /* Stattdessen: padding vergroessert Touch-Target ohne Display-Aenderung. */
    body.jsf-mobile-filter-open #secondary .jet-checkboxes-list__row,
    body.jsf-mobile-filter-open #secondary .jet-radio-list__row,
    body.jsf-mobile-filter-open #secondary .jet-color-image-list__row {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Basisfarbe-Gruppen: ebenfalls Touch-Target */
    body.jsf-mobile-filter-open #secondary .jsf-basisfarbe-group {
        min-height: 44px;
    }

    /* Swatches: etwas kleiner auf Tablet/Mobile */
    #secondary .jet-color-image-list__decorator {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }
}

@media (max-width: 544px) {
    #secondary .jet-filter fieldset legend {
        font-size: 15px;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .jet-radio-list__item,
    .jet-checkboxes-list__item {
        font-size: 13px;
    }

    .jet-radio-list__row,
    .jet-checkboxes-list__row {
        padding: 4px 0;
    }

    /* Swatches: kompakt auf Mobile */
    #secondary .jet-color-image-list__decorator {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    #secondary .jet-color-image-list__label {
        font-size: 12px;
    }

    /* Hierarchie: weniger Einrueckung auf Mobile */
    #secondary .jet-list-tree__children {
        padding-left: 14px;
    }

    /* Basisfarbe: Swatch auf Mobile kleiner */
    #secondary [data-query-var="pa_basisfarbe"] .jsf-basisfarbe-swatch {
        width: 20px;
        height: 20px;
    }

    /* Basisfarbe: Children Label kleiner */
    #secondary .jsf-basisfarbe-children .jet-checkboxes-list__label {
        font-size: 12px;
    }
}

/* ===================================================================
   BASISFARBE HIERARCHY (pa_basisfarbe)
   Flache Taxonomie + JS-basierte visuelle Hierarchie.
   Parents = Basisfarben (mit Swatch), Children = Farbnummern.
   Implementiert: 23.02.2026
   =================================================================== */

/* --- FOUC-Prevention: Flat-Liste verstecken bis JS gruppiert hat --- */
/* SPEZIFITAET: #secondary noetig! FlyingPress inlinet
   "#secondary .jet-checkboxes-list__row { display:block!important }" = (1,1,0).
   Ohne #secondary hat unsere Regel (0,3,1) — IDs schlagen Klassen → FOUC-Regel verliert.
   Mit #secondary: (1,3,1) > (1,1,0) → FOUC-Regel gewinnt.
   Primaere Regel steht INLINE im <head> (functions.php wp_head Prio 5). */
/* Double-ID (#secondary#secondary) gibt Spezifitaet (2,x,x) — schlaegt JEDE Regel mit nur 1 ID.
   Noetig weil Accordion-Regel "#secondary .jet-filter.jsf-accordion-open .jet-filter-row" (1,3,0)
   sonst alle Rows auf display:block setzt. Verifiziert per Browser-Test (14 von 157 Rows sichtbar). */
#secondary#secondary [data-query-var="pa_basisfarbe"] .jet-checkboxes-list__row {
    display: none !important;
}
/* Parent-Zeilen sofort zeigen (Farbe ist default-offen im Accordion) */
#secondary#secondary [data-query-var="pa_basisfarbe"] .jet-checkboxes-list__row[data-basisfarbe-role="parent"] {
    display: block !important;
}

/* Verwaiste Rows (z.B. Mix-Kinder ohne Parent-Gruppe) */
.jsf-basisfarbe-orphan {
    display: none !important;
}

/* --- Gruppen-Container --- */
.jsf-basisfarbe-group {
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 2px;
    margin-bottom: 2px;
}

.jsf-basisfarbe-group:last-child {
    border-bottom: none;
}

/* Parent-Wrapper: Flex-Row, Checkbox links, Chevron rechts (Branchenstandard) */
.jsf-basisfarbe-parent-wrapper {
    display: flex;
    flex-direction: row;
    cursor: pointer;
    align-items: center;
}

.jsf-basisfarbe-parent-wrapper > .jet-checkboxes-list__row {
    border-bottom: none !important;
}

/* Parent-Label: Klick auf Text/Swatch klappt Kinder auf (nicht Checkbox) */
.jsf-basisfarbe-parent-wrapper .jet-checkboxes-list__label {
    cursor: pointer;
}

/* --- Swatch-Bilder auf Parents --- */
#secondary [data-query-var="pa_basisfarbe"] .jsf-basisfarbe-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 6px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

/* Hover: Swatch deutlicher */
#secondary [data-query-var="pa_basisfarbe"] .jet-checkboxes-list__row:hover .jsf-basisfarbe-swatch {
    opacity: 0.8;
}

/* Gecheckt: volle Opacity */
#secondary [data-query-var="pa_basisfarbe"] .jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button .jsf-basisfarbe-swatch {
    opacity: 1;
}

/* --- Toggle-Button: Chevron rechts (Branchenstandard Otto/IKEA/Conrad) --- */
/* Astra setzt global padding:8px 40px + diverse Styles auf <button> → alles explizit resetten */
.jsf-basisfarbe-toggle {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    padding: 0 !important;
    margin: 0 0 0 auto !important;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Chevron via CSS ::after (kein SVG noetig) */
.jsf-basisfarbe-toggle::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #2E7D32;
    border-bottom: 2px solid #2E7D32;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

/* Offen: Chevron zeigt nach unten */
.jsf-basisfarbe-group--open .jsf-basisfarbe-toggle::after {
    transform: rotate(45deg);
}

.jsf-basisfarbe-toggle:hover,
.jsf-basisfarbe-toggle:focus,
.jsf-basisfarbe-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.jsf-basisfarbe-toggle:hover::after {
    border-color: #1B5E20;
}

/* --- Children-Container: eingerueckt unter dem Parent --- */
.jsf-basisfarbe-children {
    padding-left: 14px;
}

/* #secondary noetig wegen Spezifitaet: #secondary .jet-checkboxes-list__row (1,1,0) */
#secondary .jsf-basisfarbe-children .jet-checkboxes-list__row {
    border-bottom: 1px solid #fafafa;
    padding-left: 0;
}

.jsf-basisfarbe-children .jet-checkboxes-list__row:last-child {
    border-bottom: none;
}

.jsf-basisfarbe-children .jet-checkboxes-list__label {
    font-size: 13px;
}

/* Label-Alignment: Crocoblock generiert widget-spezifische CSS-Klassen (cb-*)
   die margin-left auf Labels setzen. Da diese Klassen zwischen Staging/Live
   differieren, hier explizit setzen. Nur fuer echte Filter-Rows (nicht Referenzen). */
.jsf-basisfarbe-children .jet-filter-row .jet-checkboxes-list__label {
    margin-left: 9px;
}

/* --- Referenz-Styling (Dual-Basisfarbe) --- */
/* Referenzen (Dual-Basisfarbe) — Extra-Padding links, weil Referenzen nicht JSFs
   interne Checkbox-Struktur haben (Decorator+Label). 62px kompensiert den Unterschied,
   sodass Ref-Indicator visuell auf Hoehe der Child-Checkboxen landet.
   WICHTIG: #secondary noetig wegen Spezifitaet — .jsf-basisfarbe-ref hat auch
   Klasse .jet-checkboxes-list__row, und #secondary .jet-checkboxes-list__row (1,1,0)
   ueberschreibt sonst unser padding. */
#secondary .jsf-basisfarbe-ref {
    display: block;
    padding: 6px 0 6px 0;
    border-bottom: 1px solid #fafafa;
    cursor: pointer;
    transition: color 0.2s ease;
}

#secondary .jsf-basisfarbe-ref:last-child {
    border-bottom: none;
}

#secondary .jsf-basisfarbe-ref:hover {
    color: #2E7D32;
}

/* Referenz-Indikator (imitiert JSF-Decorator: 14x14, 1px border, 14px gap zum Label) */
.jsf-basisfarbe-ref-indicator {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 14px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
}

/* Referenz gecheckt */
.jsf-basisfarbe-ref--checked .jsf-basisfarbe-ref-indicator {
    background-color: #555;
    border-color: #555;
}

.jsf-basisfarbe-ref--checked .jsf-basisfarbe-ref-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

#secondary .jsf-basisfarbe-ref .jsf-basisfarbe-ref-label {
    font-size: 13px;
    vertical-align: middle;
}

/* --- Responsive: Tablet --- */
@media (max-width: 768px) {
    #secondary [data-query-var="pa_basisfarbe"] .jsf-basisfarbe-swatch {
        width: 22px;
        height: 22px;
    }
}

/* ===================================================================
   APPLIED FILTERS BAR (Desktop, Logik 6)
   Chip-Leiste über dem Produkt-Grid. Zeigt aktive Filter mit × zum
   Entfernen. Auf Mobile hidden (Mobile hat eigenes Overlay-System).
   =================================================================== */

.jsf-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0 12px;
    align-items: center;
}

/* Chip/Pill — Astra setzt global padding: 8px 40px auf <button>! */
.jsf-active-chip {
    background: #E8F5E9;
    border: 1px solid #C8E6C9;
    border-radius: 16px;
    color: #1B5E20;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px !important;
    cursor: pointer;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    line-height: 1.3;
}

.jsf-active-chip:hover {
    background: #C8E6C9;
}

.jsf-active-chip:focus-visible {
    outline: 2px solid #1B5E20;
    outline-offset: 2px;
}

.jsf-active-chip__x {
    font-size: 16px;
    margin-left: 4px;
    line-height: 1;
}

/* "Alle entfernen" Button */
.jsf-active-chip--clear {
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 16px;
    color: #555;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 400;
    padding: 4px 10px !important;
    cursor: pointer;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    line-height: 1.3;
}

.jsf-active-chip--clear:hover {
    background: #f5f5f5;
    border-color: #999;
}

.jsf-active-chip--clear:focus-visible {
    outline: 2px solid #1B5E20;
    outline-offset: 2px;
}

/* Mobile: Kompaktere Darstellung + Breitenbegrenzung fuer Zeilenumbruch */
@media (max-width: 920px) {
    .jsf-active-filters {
        padding: 6px 0 10px;
        width: 100%;
        box-sizing: border-box;
    }
}