/**
 * Eigenes Kategorie-Archiv – Styles (nur auf freigeschalteten Kategorien).
 * Nach filter.css geladen.
 */

.wcbr-cat-wrap {
    --wcbr-bordeaux: rgb(142, 21, 60);
    --wcbr-ink: #2b2b2b;
    --wcbr-muted: #6b6b6b;
    --wcbr-line: #e7e2dc;
    --wcbr-cream: #faf7f2;
    --wcbr-radius: 14px;

    --wcbr-gap: 1.2rem;
    --wcbr-cols: 2;

    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(12px, 3vw, 24px);
    box-sizing: border-box;
}
.wcbr-cat-wrap * { box-sizing: border-box; }

/* -------- Blatt-Kategorie an Elternseiten-Look angleichen: keine Sidebar-Spalte, kein beiger Boxed-BG -------- */
.wcbr-cat-active #secondary { display: none !important; }
.wcbr-cat-active #primary { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.wcbr-cat-active .ast-woocommerce-container { background: transparent !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* -------- Theme-Breadcrumb (auch Astra/Yoast) ausblenden, nur den eigenen zeigen -------- */
.wcbr-cat-active .woocommerce-breadcrumb,
.wcbr-cat-active .ast-breadcrumbs,
.wcbr-cat-active .ast-breadcrumbs-wrapper,
.wcbr-cat-active .yoast-breadcrumb,
.wcbr-cat-active nav.rank-math-breadcrumb,
.wcbr-cat-active #breadcrumbs,
.wcbr-cat-active .breadcrumbs:not(.wcbr-cat-crumbs) { display: none !important; }
.wcbr-cat-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem;
    margin: .2rem 0 1.1rem; font-size: .85rem; color: var(--wcbr-muted);
}
.wcbr-cat-crumbs a { color: var(--wcbr-muted); text-decoration: none; }
.wcbr-cat-crumbs a:hover { color: var(--wcbr-bordeaux); text-decoration: underline; }
.wcbr-cat-crumbs__sep { color: #c9c1b6; }
.wcbr-cat-crumbs__cur { color: var(--wcbr-ink); font-weight: 600; }

/* -------- Display-Überschriften in CI-Font (Amatic SC Bold) -------- */
.wcbr-cat-wrap .wcbr-cat-hero__title,
.wcbr-cat-wrap .wcbr-cat-h2 {
    font-family: 'Amatic SC', cursive !important;
    font-weight: 700; letter-spacing: .5px;
}
/* SEO-Fließtext-Überschriften bleiben clean (Lesbarkeit im Textblock) */
.wcbr-cat-seo h2,
.wcbr-cat-seo h3 {
    font-family: inherit !important;
    font-weight: 700; text-transform: none; letter-spacing: normal;
}
.wcbr-cat-h2 { margin: 0; font-size: 2rem; line-height: 1.05; color: var(--wcbr-ink); }
.wcbr-cat-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .9rem; }
.wcbr-cat-swipehint { display: none; font-size: .82rem; color: var(--wcbr-muted); white-space: nowrap; }

/* -------------------------------------------------- Hero */
.wcbr-cat-hero {
    margin: 0 0 1.6rem; border-radius: var(--wcbr-radius);
    background: var(--wcbr-cream); border: 1px solid var(--wcbr-line); overflow: hidden;
}
.wcbr-cat-hero__media { margin: 0; line-height: 0; max-height: 340px; overflow: hidden; }
.wcbr-cat-hero__img { width: 100%; height: auto; object-fit: cover; display: block; }
.wcbr-cat-hero__body { padding: 1.4rem 1.6rem 1.5rem; }
.wcbr-cat-hero__title { margin: 0 0 .4rem; font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.02; color: var(--wcbr-bordeaux); }
.wcbr-cat-hero__intro { color: #4a4a4a; max-width: 70ch; font-size: 1.02rem; line-height: 1.6; }
.wcbr-cat-hero__intro p { margin: 0 0 .5rem; }
.wcbr-cat-hero__intro p:last-child { margin-bottom: 0; }

/* -------------------------------------------------- Karten-Grundoptik (Raster + Rail) */
.wcbr-pcard,
.wcbr-cat-wrap ul.products li.product {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--wcbr-line) !important; border-radius: var(--wcbr-radius);
    overflow: hidden; transition: box-shadow .15s ease, transform .15s ease;
}
.wcbr-pcard:hover,
.wcbr-cat-wrap ul.products li.product:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }

.wcbr-pcard__media { display: block; position: relative; aspect-ratio: 1 / 1; background: #fff; }
.wcbr-pcard__media img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; display: block; }
/* Rabatt-Badge (aus dem Theme-Snippet) sichtbar oben links positionieren */
.wcbr-pcard__media .onsale { position: absolute; top: .55rem; left: .55rem; right: auto; margin: 0; z-index: 3; }

.wcbr-pcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: .8rem .95rem 1rem; }
.wcbr-pcard__titlelink { text-decoration: none; color: var(--wcbr-ink); }
/* Feste Zeilen-Höhen → Titel/Beschreibung/Preis/CTA fluchten über alle Karten */
.wcbr-pcard__title {
    font-size: .9rem; line-height: 1.25; margin: 0 0 .3rem; font-weight: 600;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(2 * 1.25em);
}
/* Kurzbeschreibung VOLLSTÄNDIG (nicht clampen) – MHD-Datum muss immer sichtbar bleiben */
.wcbr-pcard__desc {
    font-size: .76rem; line-height: 1.4; color: var(--wcbr-muted); margin: 0 0 .5rem; text-align: center;
}
.wcbr-pcard__desc p { margin: 0 0 .3rem; }
.wcbr-pcard__desc p:last-child { margin-bottom: 0; }
.wcbr-pcard__desc strong, .wcbr-pcard__desc b { color: var(--wcbr-ink); font-weight: 600; }
.wcbr-pcard__price { font-size: 1.4rem; font-weight: 700; color: #1b1b1b; line-height: 1.2; text-align: center; }
.wcbr-pcard__price .woocommerce-Price-amount,
.wcbr-pcard__price ins .woocommerce-Price-amount { color: #1b1b1b; }
.wcbr-pcard__price del { color: var(--wcbr-muted); font-weight: 400; font-size: .85rem; margin-right: .35rem; }
.wcbr-pcard__price del .woocommerce-Price-amount { color: var(--wcbr-muted); }
.wcbr-pcard__price ins { text-decoration: none; }
.wcbr-pcard__cart { margin-top: .6rem; }
.wcbr-pcard__cart .button,
.wcbr-pcard__cart .added_to_cart { width: 100%; text-align: center; }
/* Pflichtangaben: MwSt · Versand · GP garantiert in EINER Zeile */
.wcbr-pcard__fine {
    margin-top: .4rem; color: var(--wcbr-muted); text-align: center; line-height: 1.3;
    white-space: nowrap; font-size: clamp(.55rem, 2.3vw, .66rem);
    overflow: hidden; text-overflow: ellipsis;
}
/* Button-Farbe bewusst NICHT überschrieben – bleibt grün wie live. */

/* -------------------------------------------------- Unterkategorie-Rail */
.wcbr-cat-subcats, .wcbr-cat-rail-section { margin: 0 0 1.8rem; }
/* Unterkategorie-Kacheln: EINE Reihe, horizontal scrollen mit Scroll-Snap */
.wcbr-cat-subcats__rail {
    --tiles: 6;
    display: flex; gap: var(--wcbr-gap); align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 2px 0 .5rem;
}
.wcbr-cat-subcats__rail::-webkit-scrollbar { display: none; height: 0; }
/* volle Kacheln (keine angeschnittenen): ganze Anzahl je Ansicht */
.wcbr-cat-subcats__rail .wcbr-cat-subtile {
    flex: 0 0 calc((100% - (var(--tiles) - 1) * var(--wcbr-gap)) / var(--tiles));
    scroll-snap-align: start;
}
@media (max-width: 1099px) { .wcbr-cat-subcats__rail { --tiles: 4; } }
@media (max-width: 640px)  { .wcbr-cat-subcats__rail { --tiles: 2; } }
.wcbr-cat-subtile {
    display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--wcbr-ink);
    background: #fff; border: 1px solid var(--wcbr-line); border-radius: var(--wcbr-radius);
    overflow: hidden; transition: box-shadow .15s ease, transform .15s ease;
}
.wcbr-cat-subtile:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.wcbr-cat-subtile__img { display: block; aspect-ratio: 4 / 3; background: var(--wcbr-cream); overflow: hidden; }
.wcbr-cat-subtile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcbr-cat-subtile__name { padding: .6rem .7rem .1rem; font-weight: 600; line-height: 1.25; }
.wcbr-cat-subtile__count { padding: 0 .7rem .7rem; font-size: .82rem; color: var(--wcbr-muted); }

/* -------------------------------------------------- „Beliebt"-Rail: Scroll-Snap, Karten = Rasterbreite */
.wcbr-cat-rail--products {
    display: flex; gap: var(--wcbr-gap); align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 2px 0 .4rem;
}
.wcbr-cat-rail--products::-webkit-scrollbar { display: none; height: 0; }
/* Nur VOLLE Karten zeigen (kein Anschnitt) → --wcbr-peek: 0; Scroll-Hinweis liefern die Pfeile */
.wcbr-cat-rail--products {
    --wcbr-peek: 0rem;
}
.wcbr-cat-rail--products .wcbr-pcard {
    flex: 0 0 calc((100% - var(--wcbr-peek) - (var(--wcbr-cols) - 1) * var(--wcbr-gap)) / var(--wcbr-cols));
    scroll-snap-align: start;
}
/* Mobil: nur ~1,4 Produktkarten je Ansicht (1 ganze + Anschnitt) → Swipe wird verständlich */
@media (max-width: 640px) {
    .wcbr-cat-rail--products .wcbr-pcard { flex-basis: 72%; }
}

/* -------------------------------------------------- Filterleiste (einspaltig, oben) */
.wcbr-cat-wrap .wcbr-hf-bar,
.wcbr-cat-wrap .wcbr-hf-bar--combined { margin: 0 0 1.5rem; }

/* -------------------------------------------------- Produktraster (gleiche Höhe) */
.wcbr-cat-wrap ul.products {
    display: grid !important;
    grid-template-columns: repeat(var(--wcbr-cols), minmax(0, 1fr));
    gap: var(--wcbr-gap);
    align-items: stretch;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.wcbr-cat-wrap ul.products::before,
.wcbr-cat-wrap ul.products::after { content: none !important; display: none !important; }
.wcbr-cat-wrap ul.products li.product {
    width: auto !important; margin: 0 !important; float: none !important; clear: none !important; padding: 0 !important;
}

/* -------------------------------------------------- Sortierung / Ergebnisanzahl / Pagination */
.wcbr-cat-wrap .woocommerce-result-count { margin: 0 0 .6rem; color: var(--wcbr-muted); font-size: .9rem; }
.wcbr-cat-wrap .woocommerce-ordering { margin: 0 0 1rem; }
.wcbr-cat-wrap .woocommerce-pagination { margin: 1.8rem 0 .4rem; text-align: center; }
.wcbr-cat-wrap .woocommerce-pagination ul { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 0; border: 0; }
.wcbr-cat-wrap .woocommerce-pagination ul li { margin: 0; border: 0; }

/* -------------------------------------------------- SEO-Text */
.wcbr-cat-seo { margin: 2.4rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--wcbr-line); max-width: 82ch; line-height: 1.7; color: #3f3f3f; }
.wcbr-cat-seo h2 { color: var(--wcbr-bordeaux); font-size: 1.4rem; margin: 1.6rem 0 .5rem; }
.wcbr-cat-seo h2:first-child { margin-top: 0; }
.wcbr-cat-seo h3 { color: var(--wcbr-bordeaux); font-size: 1.12rem; margin: 1.3rem 0 .35rem; }
.wcbr-cat-seo p { margin: 0 0 .9rem; }
.wcbr-cat-seo ul { margin: 0 0 1rem 1.2rem; }

/* -------------------------------------------------- FAQ */
.wcbr-cat-faq { margin: 2.2rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--wcbr-line); max-width: 82ch; }
.wcbr-cat-faq .wcbr-cat-h2 { margin-bottom: .9rem; }
.wcbr-cat-faq__item { border: 1px solid var(--wcbr-line); border-radius: 10px; padding: .2rem .95rem; margin: 0 0 .6rem; background: #fff; }
.wcbr-cat-faq__q { cursor: pointer; font-weight: 600; padding: .8rem 0; color: var(--wcbr-ink); list-style: none; font-size: 1rem; }
.wcbr-cat-faq__q::-webkit-details-marker { display: none; }
.wcbr-cat-faq__q::before { content: "+"; display: inline-block; width: 1.2em; color: var(--wcbr-bordeaux); font-weight: 700; }
.wcbr-cat-faq__item[open] .wcbr-cat-faq__q::before { content: "\2013"; }
.wcbr-cat-faq__a { padding: 0 0 .9rem 1.2em; color: #3f3f3f; line-height: 1.6; }
.wcbr-cat-faq__a p { margin: 0 0 .5rem; }

/* -------------------------------------------------- Spaltenanzahl je Breite */
@media (min-width: 560px)  { .wcbr-cat-wrap { --wcbr-cols: 3; } }
@media (min-width: 992px)  { .wcbr-cat-wrap { --wcbr-cols: 4; } }

/* Mobil: Swipe-Hinweis, Unterkategorien als Snap-Reihe, Hero flacher */
@media (max-width: 767px) {
    .wcbr-cat-swipehint { display: inline; }
    .wcbr-cat-hero__media { max-height: 210px; }
    .wcbr-cat-hero__body { padding: 1.1rem 1.1rem 1.2rem; }
    .wcbr-pcard__price { font-size: 1.2rem; }
}

/* -------------------------------------------------- Kompakt-Optik + rundes Rabatt-Badge */
/* Produktbilder sind 500 × 631 (Hochformat) → Bildfläche stringent im selben Verhältnis */
.wcbr-pcard__media { aspect-ratio: 500 / 631; }
/* cover statt contain → Bild füllt die Fläche gleichmäßig (kein Leerraum oben) */
.wcbr-pcard__media img { padding: .3rem; object-fit: cover; }
.wcbr-pcard__body { padding: .6rem .7rem .7rem; }
.wcbr-pcard__price { font-size: 1.2rem; margin-top: .1rem; }

/* Mengen-Stepper (− [1] +) + „In den Warenkorb" – gleiche Höhe */
.wcbr-pcard__cart { margin-top: .55rem; }
/* Umbrechen statt quetschen. In einer schmalen Karte (dreispaltig ab 560px
   sind das rund 180 Pixel) blieben neben dem Mengenfeld noch 58 Pixel fuer
   „In den Warenkorb" - der Text stand dann bis an die Kante. Mit
   flex-basis 7.5rem rutscht die Schaltflaeche in die naechste Zeile, sobald
   sie sonst zu schmal wuerde, und nimmt dort die volle Breite. */
.wcbr-pcard__form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; margin: 0; }
.wcbr-pcard__form .wcbr-pcard__addbtn { flex: 1 1 11rem; }

.wcbr-qty {
    display: inline-flex; align-items: stretch; flex: 0 0 auto; min-height: 2.5rem;
    border: 1px solid #d9d9d9; border-radius: 8px; overflow: hidden; background: #fff;
}
.wcbr-qty__btn {
    border: 0; background: #f4f4f4; width: 2rem; color: #555; cursor: pointer; padding: 0;
    font-size: 1.15rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.wcbr-qty__btn:hover { background: #ececec; }
/* Die Schalter tragen ein SVG statt der Zeichen - und + (siehe
   category-archive.php). Groesse hier festlegen, damit Theme-Regeln fuer
   svg sie nicht stauchen. */
.wcbr-qty__btn svg { display: block; width: 14px; height: 14px; flex: 0 0 auto; }
/* Zahl-Feld: keine eigene Umrandung/Fokusring (die kam vom Theme = „pinke Box") */
.wcbr-pcard__qty {
    width: 2.4rem; box-sizing: border-box; border: 0 !important; outline: none !important; box-shadow: none !important;
    text-align: center; font-size: 1rem; font-weight: 500; background: #fff; padding: 0; color: var(--wcbr-ink);
    -moz-appearance: textfield; appearance: textfield;
}
.wcbr-pcard__qty:focus, .wcbr-pcard__qty:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }
.wcbr-pcard__qty::-webkit-outer-spin-button,
.wcbr-pcard__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wcbr-pcard__addbtn {
    flex: 1 1 auto; min-height: 2.5rem; box-sizing: border-box; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .35rem .6rem; font-size: .9rem; font-weight: 600; line-height: 1.15; white-space: normal; text-align: center;
}
/* Warenkorb-Plus-Icon: Desktop nur Text, mobil nur Icon */
.wcbr-pcard__addbtn .wcbr-cart-ic { display: none; align-items: center; }
.wcbr-pcard__addbtn .wcbr-cart-ic svg { display: block; }
@media (max-width: 640px) {
    .wcbr-pcard__addbtn .wcbr-cart-ic { display: inline-flex; }
    .wcbr-pcard__addbtn .wcbr-pcard__addlabel { display: none; }
}
/* Fallback (variabel/ausverkauft): Standard-Button volle Breite */
.wcbr-pcard__cart > .button,
.wcbr-pcard__cart > .added_to_cart { display: block; width: 100%; text-align: center; }

/* Produktanzahl in der Reihen-Überschrift – in Bordeaux, gut lesbar */
.wcbr-cat-count { color: var(--wcbr-bordeaux, rgb(142, 21, 60)); font-weight: 400; font-size: .82em; }

/* Rundes Rabatt-Badge (ersetzt das Standard-„Sale!"-Fähnchen) */
.wcbr-pcard__media .onsale { display: none !important; }
.wcbr-pcard__badge {
    position: absolute; top: .5rem; left: .5rem; z-index: 4;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--wcbr-bordeaux, rgb(142, 21, 60)); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.18); pointer-events: none;
}
.wcbr-pcard__badge b { font-size: .82rem; font-weight: 700; }
.wcbr-pcard__badge span { font-size: .5rem; letter-spacing: .3px; text-transform: uppercase; margin-top: 1px; }
.wcbr-pcard__badge--plain b { font-size: .62rem; }

/* „Beliebt"-Badge oben RECHTS (Beliebt-Reihe) – kollidiert nicht mit dem Rabatt-Badge oben links */
.wcbr-pcard__pop {
    position: absolute; top: 1rem; right: 1rem; z-index: 4;
    background: var(--wcbr-bordeaux, rgb(142, 21, 60)); color: #fff;
    font-size: .72rem; font-weight: 600; letter-spacing: .3px;
    padding: .28rem .62rem; border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.18); pointer-events: none;
}

/* „Sie sparen" bei Angeboten */
.wcbr-pcard__save { text-align: center; font-size: .72rem; font-weight: 600; color: var(--wcbr-bordeaux, rgb(142, 21, 60)); margin-top: .15rem; }

/* Titel: deutlich größer, in Bordeaux, dicht am Bild */
.wcbr-pcard__body { padding-top: .2rem; }
.wcbr-pcard__titlelink, .wcbr-pcard__title { color: var(--wcbr-bordeaux); }
/* Produkttitel: zentriert, exakt 2 Zeilen (wie Mockup) */
.wcbr-pcard__title {
    font-size: 1.02rem; line-height: 1.25; margin: .1rem 0 .35rem; font-weight: 600; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(2 * 1.25em);
}

/* Preis + Kaufzeile ans Karten-ENDE schieben → über alle Karten gleiche Höhe/Ausrichtung */
.wcbr-pcard__price { text-align: center; font-size: 1.3rem; margin-top: auto; padding-top: .5rem; }
@media (min-width: 768px) { .wcbr-pcard__price { font-size: 1.5rem; } }

/* Kategorie-Kacheln gleiche Höhe: KEIN height:100% (bricht align-items:stretch), Name zweizeilig reservieren */
.wcbr-cat-subtile { height: auto; }
.wcbr-cat-subtile__name { min-height: 2.6rem; }

/* Scroll-Pfeile für die Snap-Reihen (Desktop) */
.wcbr-rail-wrap { position: relative; }
.wcbr-rail-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
    width: 2.6rem; height: 2.6rem; min-width: 0; padding: 0; box-sizing: border-box;
    border-radius: 50%; border: 0;
    cursor: pointer; background: var(--wcbr-bordeaux, #8e153c); color: #fff;
    /* weisser Halo: bleibt auch ueber einem Produktbild klar lesbar */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 5px 14px rgba(60, 20, 30, .30);
    font-size: 1.7rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.wcbr-rail-arrow:hover, .wcbr-rail-arrow:focus-visible {
    background: #6d0f2e; color: #fff; transform: translateY(-50%) scale(1.04);
}
.wcbr-rail-arrow:focus-visible { outline: 2px solid #6d0f2e; outline-offset: 5px; }
.wcbr-rail-arrow svg { width: 46%; height: 46%; }
.wcbr-rail-arrow--prev { left: .25rem; }
.wcbr-rail-arrow--next { right: .25rem; }
.wcbr-rail-arrow[hidden] { display: none; }
/* Pfeile auch mobil zeigen (Swipe-Hinweis) – etwas kleiner */
/* Thommy 19.10.2026: „ein paar Pixel größer“ – mobil 35 → 42 px */
@media (max-width: 767px) { .wcbr-rail-arrow { width: 2.6rem; height: 2.6rem; } }

/* Verlauf an der Reihenkante: solange es in eine Richtung weitergeht, laeuft
   die Karte dort sanft aus – der staerkste "hier gibt es mehr"-Hinweis. */
.wcbr-rail-wrap { --wcbr-fade-l: 1; --wcbr-fade-r: 1; }
.wcbr-rail-wrap--more-l { --wcbr-fade-l: .12; }
.wcbr-rail-wrap--more-r { --wcbr-fade-r: .12; }
.wcbr-rail-wrap--more-l .wcbr-cat-rail,
.wcbr-rail-wrap--more-r .wcbr-cat-rail {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,var(--wcbr-fade-l)) 0, #000 56px, #000 calc(100% - 72px), rgba(0,0,0,var(--wcbr-fade-r)) 100%);
            mask-image: linear-gradient(to right, rgba(0,0,0,var(--wcbr-fade-l)) 0, #000 56px, #000 calc(100% - 72px), rgba(0,0,0,var(--wcbr-fade-r)) 100%);
}

/* Reihen je Unterkategorie: verlinkter Titel, kurzer Text, „alle ansehen" */
.wcbr-cat-h2 a { color: inherit; text-decoration: none; }
.wcbr-cat-h2 a:hover { color: var(--wcbr-bordeaux); }
.wcbr-cat-morelink { font-size: .85rem; color: var(--wcbr-bordeaux, rgb(142, 21, 60)); text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.wcbr-cat-morelink:hover { text-decoration: underline; }
.wcbr-cat-subrow__text { margin: -.4rem 0 .8rem; color: var(--wcbr-muted); font-size: .9rem; line-height: 1.5; max-width: 72ch; }

/* SEO-Text (mehr Links) sichtbar auszeichnen */
.wcbr-cat-seo a { color: var(--wcbr-bordeaux, rgb(142, 21, 60)); text-decoration: underline; text-underline-offset: 2px; }
.wcbr-cat-seo a:hover { text-decoration: none; }

/* Desktop: SEO-Text + FAQ zweispaltig */
/* SEO + FAQ nutzen die VOLLE Breite (Theme-Textbreiten-Deckel aufheben) */
.wcbr-cat-seo, .wcbr-cat-seo__head, .wcbr-cat-seo__cols, .wcbr-cat-faq, .wcbr-cat-faq__list { max-width: none !important; width: 100%; }
/* Jeder H3-Abschnitt bleibt als Block zusammen → Spalten brechen nie mitten in Überschriften */
.wcbr-seo-block { break-inside: avoid; margin: 0; padding-bottom: 1.15rem; }
.wcbr-seo-block > :first-child { margin-top: 0; }

@media (min-width: 768px) {
    .wcbr-cat-seo__cols { column-width: 17rem; column-gap: 2.4rem; }
    /* stretch statt start: Zwei Kacheln nebeneinander, eine Frage einzeilig,
       die andere zweizeilig - dann standen die Kaesten unterschiedlich hoch
       und die Reihe sah aus wie verrutscht. Mit stretch ist jede Reihe so
       hoch wie ihre hoechste Kachel. Der Preis: Oeffnet man eine Frage,
       wachsen ihre Reihennachbarn mit. Das ist die ruhigere von zwei
       Unruhen. */
    .wcbr-cat-faq__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .7rem 1.6rem; align-items: stretch; }
}


/* ==================================================================
   HARTE OVERRIDES (v2.6.2): Autoptimize bündelt unser CSS je nach Seite
   VOR den Theme-/Woo-Styles → Kern-Optik der Karte hier mit hoher
   Spezifität + !important unumstößlich festnageln.
   ================================================================== */
.wcbr-cat-wrap .wcbr-pcard {
    background: #fff !important;
    border: 1px solid var(--wcbr-line, #e7e2dc) !important;
    border-radius: var(--wcbr-radius, 14px) !important;
    overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
    padding: 0 !important; margin: 0 !important;
}
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__media {
    display: block !important; position: relative !important;
    aspect-ratio: 500 / 631; background: #fff !important; overflow: hidden !important;
}
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__media img {
    width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important;
    object-fit: cover !important; padding: .3rem !important; margin: 0 !important; display: block !important;
}
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__body {
    display: flex !important; flex-direction: column !important; flex: 1 1 auto !important;
    padding: .55rem .95rem 1rem !important;
}
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__title {
    font-size: 1.05rem !important; line-height: 1.3 !important; margin: .15rem 0 .4rem !important;
    font-weight: 600 !important; text-align: left !important; color: var(--wcbr-bordeaux, rgb(142,21,60)) !important;
    display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; min-height: 0 !important;
}
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__desc { text-align: left !important; font-size: .8rem !important; line-height: 1.45 !important; margin: 0 0 .5rem !important; }
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__price { text-align: center !important; margin-top: auto !important; padding-top: .5rem !important; }

/* Kaufzeile: feste Kontrollhöhe – Theme-Button-Regeln neutralisieren.

   Umbruch nur, solange die Karte zu schmal ist. In einer schmalen Karte
   blieben neben dem Mengenfeld keine 60 Pixel fuer „In den Warenkorb", der
   Text stand bis an die Kante. Ab 1200px ist die Karte breit genug (rund
   274 Pixel, davon 154 fuer die Schaltflaeche bei rund 106 Pixel Text) -
   dort bleibt die Zeile einzeilig, so wie sie es immer war. Den Umschalter
   macht die Medienabfrage weiter unten. */
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__form {
    display: flex !important; flex-wrap: wrap !important; gap: .5rem !important;
    align-items: stretch !important; margin: 0 !important; padding: 0 !important;
}
.wcbr-cat-wrap .wcbr-pcard .wcbr-qty {
    display: inline-flex !important; flex: 0 0 auto !important;
    height: auto !important; min-height: 2.5rem !important; align-self: stretch !important; align-items: stretch !important;
    border: 1px solid #d9d9d9 !important; border-radius: 8px !important; overflow: hidden !important; background: #fff !important;
}
.wcbr-cat-wrap .wcbr-pcard .wcbr-qty__btn {
    padding: 0 !important; margin: 0 !important; width: 1.6rem !important; height: 100% !important;
    min-height: 0 !important; min-width: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: #f4f4f4 !important; color: #555 !important; font-size: 1.1rem !important; line-height: 1 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important;
}
.wcbr-cat-wrap .wcbr-pcard .wcbr-qty__btn:hover { background: #ececec !important; }
.wcbr-cat-wrap .wcbr-pcard .wcbr-qty__btn svg { display: block !important; width: 12px !important; height: 12px !important; }
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__qty {
    width: 2rem !important; height: 100% !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    outline: none !important; box-shadow: none !important; background: #fff !important;
    text-align: center !important; font-size: .92rem !important; font-weight: 500 !important; line-height: 1 !important;
}
/* Extra Spezifität: schlägt .woocommerce ul.products li.product .button */
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__cart .wcbr-pcard__form .wcbr-pcard__addbtn {
    flex: 1 1 10rem !important; min-width: 0 !important; width: auto !important; max-width: none !important;
    min-height: 2.5rem !important; height: auto !important; max-height: none !important;
    padding: .55rem 1.1rem !important; margin: 0 !important;
    border-radius: 8px !important; border: 0 !important;
    font-size: .8rem !important; font-weight: 600 !important; line-height: 1.15 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .4rem !important;
    white-space: normal !important; text-align: center !important; box-shadow: none !important;
}

/* Button-Text: auf Desktop (breite Karten) einzeilig, auf schmalen Karten Umbruch erlaubt */
@media (min-width: 992px) {
    .wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__cart .wcbr-pcard__form .wcbr-pcard__addbtn,
    .wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__addlabel { white-space: nowrap !important; }
}

/* AJAX-Erfolg: Theme-/Woo-Häkchen (::after bei .added) + „View cart"-Link unterdrücken
   → es bleibt NUR unser kurzer SVG-Haken im Button */
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__addbtn.added::after { content: none !important; display: none !important; margin: 0 !important; }
/* Ab hier ist Platz genug: eine Zeile, Mengenfeld und Schaltflaeche
   nebeneinander. flex: 1 1 0 gibt der Schaltflaeche den gesamten Rest der
   Zeile, der Innenabstand bleibt dabei erhalten. */
@media (min-width: 1200px) {
    .wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__form { flex-wrap: nowrap !important; }
    .wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__cart .wcbr-pcard__form .wcbr-pcard__addbtn {
        flex: 1 1 0 !important;
        padding: .55rem .8rem !important;
    }
}

.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__form a.added_to_cart,
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__cart a.added_to_cart { display: none !important; }

/* Ausverkauft: „Benachrichtigen"-Button (CWG Instock Notifier) bzw. Fallback-Link
   → volle Breite, Bordeaux, gleiche Höhe wie die Kaufzeile */
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__notify { display: block; }
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__notify form { margin: 0 !important; }
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__notify .cwg_popup_submit,
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__notify button,
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__notify input[type="submit"],
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__notifylink {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; min-height: 2.5rem !important; height: auto !important; box-sizing: border-box !important;
    padding: .3rem .6rem !important; margin: 0 !important;
    background: var(--wcbr-bordeaux, rgb(142, 21, 60)) !important; color: #fff !important;
    border: 0 !important; border-radius: 8px !important; box-shadow: none !important;
    font-size: .8rem !important; font-weight: 600 !important; line-height: 1.15 !important;
    text-align: center !important; text-decoration: none !important; white-space: normal !important; cursor: pointer;
}
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__notify .cwg_popup_submit:hover,
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__notifylink:hover { background: #7a1234 !important; color: #fff !important; }
/* Falls der Shortcode ein Inline-Formular (E-Mail-Feld) rendert: kompakt stapeln */
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__notify input[type="email"],
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__notify input[type="text"] {
    width: 100% !important; min-height: 2.3rem !important; margin: 0 0 .4rem !important;
    padding: .2rem .5rem !important; font-size: .8rem !important;
    border: 1px solid #d9d9d9 !important; border-radius: 8px !important; box-shadow: none !important;
}

/* Produktraster (Blatt-/Unterkategorien): IMMER unsere Spaltenzahl (Desktop 4) –
   Theme-Klassen wie ul.products.columns-3 dürfen das Grid nicht überschreiben */
.wcbr-cat-wrap ul.products,
.wcbr-cat-wrap ul.products[class*="columns-"] {
    display: grid !important;
    grid-template-columns: repeat(var(--wcbr-cols), minmax(0, 1fr)) !important;
    gap: var(--wcbr-gap) !important;
}

/* SEO-Text ruhiger setzen: statt vieler schmaler Spalten feste 2 Spalten
   (ab 1200px drei), mehr Weissraum und klare Abschnitts-Abstaende */
@media (min-width: 768px) {
    .wcbr-cat-seo__cols { column-width: auto; column-count: 2; column-gap: 3.2rem; }
}
@media (min-width: 1200px) {
    .wcbr-cat-seo__cols { column-count: 3; }
}
.wcbr-cat-seo__head { margin-bottom: 1.1rem; }
.wcbr-seo-block { margin: 0; padding-bottom: 1.7rem; } /* padding statt margin: Abstand wandert MIT dem Block, statt als Leerzeile oben in der naechsten Spalte zu landen */
.wcbr-cat-seo p { line-height: 1.75; }
.wcbr-cat-seo h3 { margin-top: 0; }
.wcbr-seo-block > h3 { margin-bottom: .45rem; }

/* Scroll-Pfeile an der Reihenkante (halb ueberlappend), ab Tablet groesser.
   Vorher sassen sie ab 1260px komplett im weissen Seitenrand (-3rem) und
   wirkten wie Dekoration statt wie ein Bedienelement. */
@media (min-width: 768px) {
.wcbr-rail-arrow { width: 3.6rem; height: 3.6rem; }   /* 52 → 58 px */
.wcbr-rail-arrow--prev { left: -1.8rem; }
.wcbr-rail-arrow--next { right: -1.8rem; }
}

/* Mobil: Swipe stoppt IMMER an der naechsten Karte (kein Ueberspringen bei schnellem Flick) */
@media (max-width: 640px) {
    .wcbr-cat-rail--products .wcbr-pcard,
    .wcbr-cat-subcats__rail .wcbr-cat-subtile { scroll-snap-stop: always; }
}

/* Hero-Bild: gezielter Cover-Zuschnitt statt hartem Abschneiden unten -
   Bild fuellt die feste Hoehe, Motiv (Tisch-Ebene) bleibt im Bild */
.wcbr-cat-hero__media { height: 340px; max-height: none; }
.wcbr-cat-hero__img { height: 100% !important; object-fit: cover !important; object-position: center 88% !important; }
@media (max-width: 767px) {
    .wcbr-cat-hero__media { height: 210px; }
}

/* Doppeltes "Sie sparen" in Produktkarten: Der Theme-/Snippet-Hinweis (.discount-hint)
   steckt bereits im Preis-HTML - in unseren Karten zeigen wir nur die eigene
   Bordeaux-Zeile (.wcbr-pcard__save) im Mockup-Stil */
.wcbr-cat-wrap .wcbr-pcard .wcbr-pcard__price .discount-hint { display: none !important; }

/* -------- Feedback Thommy 09/26: ruhigere Leisten-Optik -------- */
/* Display-Überschriften der Leisten in Amatic SC Regular statt Bold */
.wcbr-cat-wrap .wcbr-cat-h2 {
    font-weight: 400 !important;
    letter-spacing: .8px;
    font-size: 2.1rem;
}
/* Klare Trennung zwischen den Produkt-Leisten: "Alle ansehen" gehört
   eindeutig zur darunterliegenden Leiste */
.wcbr-cat-wrap .wcbr-cat-rail-section {
    border-top: 1px solid #e8ded2;
    padding-top: 1.15rem;
    margin-top: 1.9rem;
}

/* -------- Feedback: FAQs optisch einheitlich (einspaltig statt Kachel-Raster) -------- */
.wcbr-cat-wrap .wcbr-cat-faq__list {
    display: block !important;
    max-width: 82ch !important;
}
.wcbr-cat-wrap .wcbr-cat-faq__item { margin: 0 0 .65rem; }

/* Das Plus gehoert neben die ERSTE Zeile der Frage, nicht irgendwo in die
   Mitte. Ohne Flexbox rutscht der Text bei zweizeiligen Fragen unter das
   Zeichen; mit baseline stehen beide auf derselben Schriftlinie. Die Regel
   stand vorher nur unter .wcbr-cat-wrap, galt also auf den Kategorieseiten
   und nicht auf den Rezeptseiten - dabei ist es dieselbe Kachel. */
.wcbr-cat-faq__q { display: flex; align-items: baseline; gap: .1rem; }
.wcbr-cat-faq__q::before { flex: 0 0 1.2em; }

/* -------------------------------------------------- Ende einer Produkt-Reihe: „Alle N Produkte ansehen“ */
.wcbr-cat-rail--products .wcbr-cat-moretile {
    flex: 0 0 calc((100% - var(--wcbr-peek) - (var(--wcbr-cols) - 1) * var(--wcbr-gap)) / var(--wcbr-cols));
    scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    min-height: 12rem; padding: 1rem; border-radius: var(--wcbr-radius, 14px); text-align: center; text-decoration: none;
    background: var(--wcbr-cream, #f9f3ed); border: 1px dashed rgba(142, 21, 60, .35);
    color: var(--wcbr-bordeaux, rgb(142, 21, 60)); font-weight: 600;
}
.wcbr-cat-moretile__count { font-size: 1.6rem; line-height: 1; }
.wcbr-cat-moretile:hover, .wcbr-cat-moretile:focus-visible { background: #f3e8e0; }
@media (max-width: 640px) {
    .wcbr-cat-rail--products .wcbr-cat-moretile { flex-basis: 72%; }
}

/* Tabellen im Kategorie-Text (z. B. Grappa „Bezeichnung / Woraus / Wie / Bei uns“) waren am Handy breiter als die Seite
   → ganze Seite ließ sich seitlich verschieben (21.10.2026). Jetzt scrollt nur die Tabelle. */
.wcbr-seo-block table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Hauptkategorien (inc/hauptkategorien.php, body.wcbr-hk) – Mockup 21.10.2026 ---------- */
.wcbr-hk-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .9rem; }
.wcbr-hk-fact {
    background: #fff; border: 1px solid #ece1d8; border-radius: 999px; padding: 6px 14px;
    font-size: 13px; font-weight: 600; color: #3a2b2b; white-space: nowrap; font-variant-numeric: lining-nums;
}
/* Kacheln am Desktop als Raster (alle Unterkategorien auf einen Blick), am Handy/Tablet weiter als Wisch-Reihe */
@media (min-width: 1100px) {
    body.wcbr-hk .wcbr-cat-subcats__rail {
        display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none;
    }
    body.wcbr-hk .wcbr-cat-subcats__rail .wcbr-cat-subtile { flex: none; }
    body.wcbr-hk .wcbr-cat-subcats .wcbr-cat-swipehint { display: none; }
}

/* ---------- Alle Produkte nach Bereichen (inc/alle-produkte.php, body.wcbr-alle) – Mockup 21.10.2026 ---------- */
.wcbr-alle-jump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 1.4rem 0 .4rem; }
.wcbr-alle-jump__a {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid #ece1d8; border-radius: 14px; color: #3a2b2b !important; text-decoration: none !important;
}
.wcbr-alle-jump__img { display: block; aspect-ratio: 16 / 10; background: #faf7f2; overflow: hidden; }
.wcbr-alle-jump__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcbr-alle-jump__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; flex: 1; min-width: 0; }
.wcbr-alle-jump__txt b { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
/* „(614 lieferbar)“ klein in der Grundschrift statt in Amatic (brach am Handy über zwei Zeilen) */
.wcbr-alle-sec .wcbr-cat-h2 .wcbr-cat-count { font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 600; color: #6b5e58; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.wcbr-alle-jump__a b { font-size: 15px; line-height: 1.3; font-weight: 700; }
.wcbr-alle-jump__txt > span { font-size: 13px; color: #6b5e58; white-space: nowrap; font-variant-numeric: lining-nums; }
.wcbr-alle-jump__a:hover { border-color: #8e153c; }
.wcbr-alle-sec { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid #e6dbd2; scroll-margin-top: 90px; }
.wcbr-alle-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: .2rem 0 1rem; padding-bottom: 2px; }
.wcbr-alle-chips::-webkit-scrollbar { display: none; }
.wcbr-alle-chip {
    flex: none; border: 1px solid #e3d7cc; background: #fff; border-radius: 999px; padding: 8px 14px;
    font-size: 13px; font-weight: 600; color: #3a2b2b !important; text-decoration: none !important; white-space: nowrap;
}
.wcbr-alle-chip i { font-style: normal; color: #6b5e58; font-weight: 500; margin-left: 6px; font-variant-numeric: lining-nums; }
.wcbr-alle-chip:hover { border-color: #8e153c; color: #8e153c !important; }
.wcbr-alle-lbl { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #6b5e58; font-weight: 700; margin: 0 0 .6rem; }
@media (max-width: 640px) {
    /* Handy: Bereiche als Wisch-Reihe mit Scroll-Snap (Marcel 21.10.2026) – 2,3 Kacheln sichtbar */
    .wcbr-alle-jump {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px;
        overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
    }
    .wcbr-alle-jump::-webkit-scrollbar { display: none; }
    .wcbr-alle-jump__a { scroll-snap-align: start; }
    .wcbr-alle-jump__a b { font-size: 14px; line-height: 1.25; }
    .wcbr-alle-jump__txt { padding: 10px 12px; }
}

/* ---------- Sonderangebote-Seite (inc/angebote-seite.php, body.wcbr-ang) – Mockup 21.10.2026 ---------- */
.wcbr-ang-info { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #ece1d8; border-radius: 14px; padding: 16px 18px; margin: 1.2rem 0 .4rem; }
.wcbr-ang-info svg { flex: none; margin-top: 2px; }
.wcbr-ang-info b { display: block; font-size: 15px; margin-bottom: 3px; color: #3a2b2b; }
.wcbr-ang-info p { margin: 0; font-size: 14px; line-height: 1.55; color: #3a2b2b; }
.wcbr-ang-grp { margin-top: 2rem; }
.wcbr-ang-grp__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 1rem; }
.wcbr-ang-grp__kopf .wcbr-cat-h2 { margin: 0 !important; } /* sonst zählt der H2-Abstand beim Zentrieren mit, der Tag saß 8 px zu tief */
.wcbr-ang-rest:empty { display: none; }
.wcbr-ang-rest { background: #fdf1f4; color: #8e153c; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.wcbr-ang-rest--bald { background: #8e153c; color: #fff; }
.wcbr-ang-leer { margin: 1.6rem 0; font-size: 15px; }
@media (max-width: 640px) {
    .wcbr-ang-info { padding: 14px; gap: 10px; }
    .wcbr-ang-grp .wcbr-cat-h2 { font-size: 1.7rem; }
}
/* Neu im Shop (inc/neu-seite.php): Anzahl je Monat neben der Überschrift */
.wcbr-neu-zahl { background: #fff; border: 1px solid #e3d7cc; color: #3a2b2b; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: lining-nums; }
/* Sonderangebote, Neu im Shop und Bestseller Top 12 am Handy: Gruppen als Wisch-Reihe mit Scroll-Snap wie die Hauptkategorien (Marcel 21.10.2026),
   Desktop bleibt Raster. position: relative hält die absolut positionierten Rabatt-Abzeichen in der Reihe
   (ohne lief die Seite auf 1749 px Breite auf). */
@media (max-width: 640px) {
    .wcbr-cat-wrap .wcbr-ang-grp ul.products,
    .wcbr-best__raster ul.products {
        position: relative; display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0 .4rem !important;
    }
    .wcbr-cat-wrap .wcbr-ang-grp ul.products::-webkit-scrollbar,
    .wcbr-best__raster ul.products::-webkit-scrollbar { display: none; }
    .wcbr-cat-wrap .wcbr-ang-grp ul.products > li.product,
    .wcbr-best__raster ul.products > li.product { flex: 0 0 72% !important; scroll-snap-align: start; }
}

/* F24 Herstellerseiten: assets/css/hersteller.css */