/*
 * RealLeaf — Shop-/Kategorie-Archiv (S1-08, archive.css)
 *
 * Zweck: Tokenbasiertes Stylesheet fuer das Custom-Archiv-Template
 * woocommerce/archive-product.php (Live-Container, KEINE Prototyp-
 * Grid-Klassen). Stylt Archiv-Grundflaeche, Banner-Kopf, Titel +
 * Breadcrumbs, Kategorie-Chips-Navigation, Grid-KONTEXT, Load-More-
 * Bereich und Leerzustand.
 *
 * Quellen:
 *   - Look: design/prototype/Shop.html (cat-hero) +
 *     design/prototype/assets/shop-ui.css (SHOP ARCHIVE Z. 208-225,
 *     Leerzustand .shop-empty Z. 222-225, Load-More Z. 221) +
 *     design/prototype/assets/styles.css (.fchip Z. 340-341, nur OPTIK)
 *   - Markup: server-snapshot/.../woocommerce/archive-product.php
 *   - Tokens: assets/css/tokens.css (Source of Truth, beide Themes)
 *   - Mapping: plans/s1-design/uebertragbarkeit.md Abschnitt 3 (#8) + 4
 *
 * Markup-Vertrag mit der Template-Zelle (archive-product.php):
 *   .custom-archive-wrapper
 *     .archive-top-area
 *       .archive-image-banner > img.archive-banner-image
 *       .archive-title-wrap > h1.archive-title (vorher "sr-only";
 *         die Template-Zelle stellt die Klasse um)
 *         + p.rl-archive-subline (nur is_shop, Template Z. 87)
 *         + .cat-breadcrumbs (mit a)
 *       nav.rl-archive-chips > a.rl-archive-chip
 *         (aktiv: a.rl-archive-chip.rl-archive-chip--active[aria-current="page"])
 *     #custom-products-container > ul.products-grid (Spaltenregeln gehoeren
 *       product-cards.css — hier NUR Aussenabstand/Ausrichtungs-Kontext)
 *     .archive-load-more-wrap > button#load-more-products
 *       (ID, data-current-page, data-max-pages, AJAX load_more_products:
 *       NICHT anfassen — infinite-scroll-products.js:8 versteckt den
 *       Button per JS, sichtbar bleibt er nur ohne/vor JS)
 *     li.no-products-found (Leerzustand im Grid, relevant fuers EN-Archiv)
 *
 * Regeln dieser Datei:
 *   - ausschliesslich semantische Tokens aus tokens.css; KEINE Hex-Werte.
 *     Banner-Overlay + Banner-Textfarben nutzen die theme-festen Anker
 *     --rl-green-deep / --on-dark / --on-dark-muted (in beiden Themes
 *     identisch lesbar, Muster wie home.css-Hero); transparente Overlays
 *     nur via color-mix auf Token-Basis.
 *   - 0 important-Overrides, 0 Elementor-ID-Selektoren, keine Prototyp-
 *     Klassen (kein cat-hero, kein fchip, kein shopGrid — nur deren Optik
 *     auf die Live-Selektoren gemappt).
 *   - Breakpoints exakt wie header.css/home.css: (max-width: 767px) und
 *     (min-width: 1200px); Basisbereich = 768-1199px.
 *   - Ladereihenfolge (functions.php): realleaf-archive haengt an
 *     realleaf-tokens und wird mit Prioritaet 8 VOR product-cards.css
 *     (Prio 10) gedruckt. product-cards.css ENTHIELT urspruenglich
 *     Altregeln fuer .archive-title-wrap und .custom-archive-wrapper
 *     mit Spezifitaet (0,1,0); sie wurden in S1-08 entfernt (siehe
 *     Aenderungsnotiz "Zelle cleanup-product-cards-archive-altregeln"
 *     im Kopf von product-cards.css). Die Nachfahren-Selektoren mit
 *     (0,2,0) hier bleiben als robuste Schreibweise bestehen — sie
 *     gewinnen unabhaengig von der Druckreihenfolge, ganz ohne
 *     important-Flag.
 *   - KEINE Regeln fuer Karten-Innereien (.product-card usw. bleibt
 *     product-cards.css); KEINE grid-template-columns fuer
 *     ul.products-grid (gehoert der Grid-Normalisierung 4/2/1 in
 *     product-cards.css). Nachgeladene AJAX-Karten (content-product-
 *     custom.php) landen in derselben ul.products-grid und sind damit
 *     automatisch abgedeckt.
 *   - Motion nur ueber --dur-fast und --ease; der globale
 *     prefers-reduced-motion-Block lebt in tokens.css und deckt die
 *     Transitions hier ab (keine Keyframes in dieser Datei).
 */

/* ============================================================
   0. GRUNDFLAECHE
   ============================================================ */

.custom-archive-wrapper {
    background: var(--surface);
    color: var(--text);
    font-family: var(--body);
    margin: 0;
}

/* ============================================================
   1. ARCHIV-KOPF / BANNER
   Optik = .cat-hero aus shop-ui.css:209-217, gemappt auf die
   Live-Container. Banner-Hoehe als lokale Custom-Property, damit
   Bild-Box und absolut darueber gelegter Titel-Wrap synchron
   bleiben (eine Stellschraube je Breakpoint).
   ============================================================ */

.archive-top-area {
    --rl-archive-banner-h: 220px;
    position: relative;
}

.archive-image-banner {
    position: relative;
    height: var(--rl-archive-banner-h);
    overflow: hidden;
    /* Bold-Outline-Abschluss wie .cat-hero (border-bottom 1.5px),
       trennt Banner von der Chips-Zeile darunter */
    border-bottom: 1.5px solid var(--outline);
    background: var(--surface-2);
}

.archive-image-banner .archive-default-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.archive-image-banner img.archive-banner-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}

/* Dunkles Gradient-Overlay fuer Textkontrast, analog
   .cat-hero__shade (shop-ui.css:212): links dichter, rechts offen.
   color-mix auf dem theme-festen Anker --rl-green-deep statt Hex —
   in beiden Themes identisch, Titel in --on-dark bleibt lesbar
   (gleiches Muster wie der Hero in home.css). */
.archive-image-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--rl-green-deep) 80%, transparent) 35%,
        color-mix(in srgb, var(--rl-green-deep) 30%, transparent)
    );
}

/* ============================================================
   2. TITEL + BREADCRUMBS AUF DEM BANNER
   .archive-title-wrap folgt im Markup direkt auf
   .archive-image-banner. Der Nachbar-Selektor legt den Wrap nur
   dann absolut ueber den Banner, wenn der Banner wirklich
   gerendert wurde (defensiv: ohne Banner bleibt der Wrap im
   normalen Fluss). Die Spezifitaet (0,2,0) schlug zugleich die
   inzwischen entfernten Altregeln in product-cards.css (siehe dortige
   Aenderungsnotiz "Zelle cleanup-product-cards-archive-altregeln")
   und bleibt als robuste Schreibweise bestehen.
   ============================================================ */

.archive-top-area .archive-title-wrap {
    box-sizing: border-box;
    width: min(100%, var(--maxw));
    max-width: var(--maxw);
    margin-inline: auto;
    padding: var(--sp-5) var(--sp-6);
    font-family: var(--display);
    color: var(--text);
}

.archive-image-banner + .archive-title-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: var(--rl-archive-banner-h);
    display: flex;
    /* column-reverse: DOM-Reihenfolge bleibt h1 vor Breadcrumbs
       (Screenreader lesen die Ueberschrift zuerst), visuell stehen
       die Crumbs wie im Prototyp-cat-hero ueber dem Titel */
    flex-direction: column-reverse;
    justify-content: center;
    gap: var(--sp-2);
}

/* Titel: neue Klasse lt. Markup-Vertrag (Template-Zelle stellt
   h1 von "sr-only" auf "archive-title" um). Groesse wie
   .cat-hero__inner h1 (shop-ui.css:216). */
h1.archive-title {
    margin: 0;
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(32px, 4.6vw, 54px);
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--text);
}

.archive-image-banner + .archive-title-wrap h1.archive-title {
    /* auf dem dunkelgruenen Overlay: theme-fester heller Anker */
    color: var(--on-dark);
}

/* Subline (p.rl-archive-subline, nur Shop-Seite lt. Markup-Vertrag):
   Optik wie .cat-hero__inner p (shop-ui.css:217). margin 0 neutralisiert
   die Browser-Default-p-Margins — den Abstand im Flex-Stack regelt das
   gap des Wraps. Basisfarbe --text-muted fuer den defensiven Fall ohne
   Banner (normaler Fluss auf --surface). */
.archive-top-area .rl-archive-subline {
    margin: 0;
    font-family: var(--body);
    font-size: 16px;
    font-weight: 500;
    max-width: 56ch;
    color: var(--text-muted);
}

.archive-image-banner + .archive-title-wrap .rl-archive-subline {
    /* auf dem dunkelgruenen Overlay: heller Anker statt var(--text) */
    color: var(--on-dark-muted);
    /* column-reverse zeigt die Kinder in umgekehrter Layout-Reihenfolge.
       order -1 zieht die Subline in der Layout-Reihenfolge VOR den h1
       (DOM bleibt h1 -> Subline -> Crumbs, Screenreader unveraendert);
       sichtbar wird Crumbs / h1 / Subline — die Subline steht damit wie
       im Prototyp UNTER dem Titel. */
    order: -1;
}

/* Breadcrumbs: Optik wie .crumbs im cat-hero (shop-ui.css:214-215) */
.archive-top-area .cat-breadcrumbs {
    font-family: var(--body);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.archive-top-area .cat-breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

.archive-image-banner + .archive-title-wrap .cat-breadcrumbs {
    color: var(--on-dark-muted);
}

.archive-image-banner + .archive-title-wrap .cat-breadcrumbs a:hover {
    color: var(--on-dark);
}

.archive-top-area .cat-breadcrumbs a:hover {
    color: var(--accent-hover);
}

/* ============================================================
   3. KATEGORIE-CHIPS (reine Navigation, Markup-Vertrag)
   nav.rl-archive-chips direkt unter dem Banner im .archive-top-area;
   Chips sind Links (a.rl-archive-chip) auf die Katalog-Kategorien,
   aktive Kategorie als .rl-archive-chip--active[aria-current="page"].
   Optik = .fchip (styles.css:340-341), Hover lt. S1-08-Vorgabe auf
   --accent-soft abgemildert (Voll-Akzent bleibt dem aktiven Chip
   vorbehalten — klarere Unterscheidung aktiv vs. Hover).
   ============================================================ */

nav.rl-archive-chips {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    width: min(100%, var(--maxw));
    margin-inline: auto;
    padding: var(--sp-4) var(--sp-6) 0;
}

a.rl-archive-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border: 1.5px solid var(--outline);
    background: var(--surface-3);
    color: var(--text);
    border-radius: var(--r-pill);
    padding: 8px 16px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

a.rl-archive-chip:hover {
    background: var(--accent-soft);
    color: var(--text);
}

a.rl-archive-chip:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

a.rl-archive-chip.rl-archive-chip--active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

a.rl-archive-chip.rl-archive-chip--active:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

/* ============================================================
   4. GRID-KONTEXT
   NUR Aussenabstaende + Ausrichtung am .rl-wrap-Raster (home.css:
   max-width --maxw, padding-inline --sp-6 bzw. --sp-4 mobil).
   ul.products-grid zentriert sich innerhalb der Content-Box;
   saemtliche Spalten-/gap-Regeln (4/2/1) bleiben product-cards.css.
   ============================================================ */

#custom-products-container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    margin-top: var(--sp-5);
    padding-inline: var(--sp-6);
}

/* ============================================================
   5. LOAD-MORE-BEREICH
   Nur Optik: zentriert mit Abstand nach shop-ui.css:221
   ("display:block; margin: 40px auto 0"). Button als Ghost-/
   Outline-Button in Token-Optik. ID-Hook, data-Attribute und
   Infinite-Scroll-Verhalten (Button wird von
   infinite-scroll-products.js:8 versteckt) bleiben unangetastet.
   padding-bottom schafft Luft vor dem Elementor-Template 27729
   am Seitenende.
   ============================================================ */

.archive-load-more-wrap {
    display: flex;
    justify-content: center;
    margin: var(--sp-7) auto 0;
    padding-bottom: var(--sp-8);
}

button#load-more-products {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid var(--outline);
    color: var(--text);
    border-radius: var(--r-pill);
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    padding: 0 28px;
    min-height: 46px;
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

button#load-more-products:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

button#load-more-products:active {
    transform: scale(.97);
}

button#load-more-products:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ============================================================
   6. LEERZUSTAND
   li.no-products-found liegt als Grid-Item in ul.products-grid —
   grid-column 1/-1 spannt es ueber alle Spalten. Optik angelehnt
   an .shop-empty (shop-ui.css:222-225). Relevant fuer das
   EN-Archiv (bekannter Vorzustand S2-14: 0-1 Produkte).
   ============================================================ */

ul.products-grid li.no-products-found {
    grid-column: 1 / -1;
    list-style: none;
    text-align: center;
    padding: var(--sp-8) var(--sp-5);
    margin: 0;
    background: none;
    border: none;
    font-family: var(--body);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ============================================================
   7. RESPONSIVE
   Basisbereich 768-1199px ist oben definiert (Banner 220px).
   ============================================================ */

@media (min-width: 1200px) {
    .archive-top-area {
        --rl-archive-banner-h: 240px;
    }
}

@media (max-width: 767px) {
    .archive-top-area {
        --rl-archive-banner-h: 180px;
    }

    .archive-top-area .archive-title-wrap {
        padding: var(--sp-4);
    }

    /* Chips mobil: EINE horizontal scrollbare Reihe statt Umbruch.
       Entscheidung: bei 5+ Kategorien haelt die Scroll-Reihe den
       Abstand Banner-zu-Grid konstant kompakt und entspricht dem
       gewohnten Shop-Pattern; Wrap wuerde das Grid bei wachsendem
       Katalog immer weiter nach unten schieben. Scrollbar wird
       ausgeblendet (rein kosmetisch, Touch-/Wheel-Scroll bleibt). */
    nav.rl-archive-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: var(--sp-3) var(--sp-4) 0;
    }

    nav.rl-archive-chips::-webkit-scrollbar {
        display: none;
    }

    a.rl-archive-chip {
        flex: none;
    }

    #custom-products-container {
        padding-inline: var(--sp-4);
        margin-top: var(--sp-4);
    }

    .archive-load-more-wrap {
        margin-top: var(--sp-6);
        padding-bottom: var(--sp-7);
    }
}

/* ============================================================
   WP5 EINKAUFSWELTEN (2026-07-20, Audit final/04-06 + Mapping final/10)
   Neue, rein additive Bausteine: Editorial-Intro, Cross-Sell-Fuss,
   redaktioneller Leerzustand, Welt-Modifier am Wrapper
   (.rl-world--herbal/-jointip/-tube/-cones/-filter/-papers/-acc)
   und Scroll-Affordanz fuer die Chip-Leiste. Whitelist-Selektoren
   (products-grid, product-card*, load-more) bleiben unberuehrt.
   ============================================================ */

/* Welt-Akzent: eine Variable je Welt, die Editorial/Cross-Sell einfaerbt.
   Werte kommen als semantische Tokens aus tokens.css (Light/Dark dort),
   keine rohen Hexwerte in der Komponente (Codex-Review 2026-07-20 W4). */
.custom-archive-wrapper { --rl-world-accent: var(--accent); }
.rl-world--jointip { --rl-world-accent: var(--accent-bright); }
.rl-world--tube    { --rl-world-accent: var(--world-tube); }
.rl-world--papers  { --rl-world-accent: var(--world-papers); }
.rl-world--filter  { --rl-world-accent: var(--world-filter); }

/* ---- Editorial-Intro (zwischen Kopf und Grid) ---- */
.rl-cat-editorial { max-width: 1280px; margin: 6px auto 26px; padding: 0 20px; }
.rl-cat-editorial__inner {
    background: var(--surface-2);
    border: 1.5px solid var(--outline);
    border-left: 5px solid var(--rl-world-accent);
    border-radius: 14px;
    padding: 26px 30px;
}
.rl-cat-editorial__inner--split {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 28px;
    align-items: center;
}
.rl-cat-editorial__copy h2 {
    font-family: var(--display);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    color: var(--text);
}
.rl-cat-editorial__copy p { margin: 0; color: var(--text-muted); font-size: 15.5px; line-height: 1.6; max-width: 72ch; }
.rl-cat-editorial__steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: rl-ce; }
.rl-cat-editorial__steps li { counter-increment: rl-ce; display: flex; gap: 12px; align-items: baseline; }
.rl-cat-editorial__steps li::before {
    content: counter(rl-ce);
    font-family: var(--display);
    font-weight: 900;
    color: var(--rl-world-accent);
    font-size: 20px;
    flex: none;
    width: 22px;
}
.rl-cat-editorial__steps b { font-size: 15px; color: var(--text); margin-right: 6px; }
.rl-cat-editorial__steps span { font-size: 14px; color: var(--text-muted); }
.rl-cat-editorial__fig img { width: 100%; height: auto; max-height: 300px; object-fit: contain; display: block; }

/* JOINTIP-Welt (Welt C, Kraft/Schwarz): dunkles Editorial als bewusster
   Sub-Brand-Bruch zum Naturton der uebrigen Kategorien. */
.rl-world--jointip .rl-cat-editorial__inner { background: var(--rl-black); border-color: var(--rl-black); }
.rl-world--jointip .rl-cat-editorial__copy h2 { color: var(--on-dark); }
.rl-world--jointip .rl-cat-editorial__copy p { color: var(--on-dark-muted); }
.rl-world--jointip .rl-cat-editorial__steps b { color: var(--on-dark); }
.rl-world--jointip .rl-cat-editorial__steps span { color: var(--on-dark-muted); }
.rl-world--jointip .rl-cat-editorial__fig img { background: var(--rl-black); }

/* ---- Cross-Sell-Fuss ---- */
.rl-cat-cross { max-width: 1280px; margin: 44px auto 30px; padding: 0 20px; }
.rl-cat-cross__head {
    font-family: var(--display);
    font-size: clamp(21px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 16px;
    color: var(--text);
}
.rl-cat-cross__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rl-cat-cross__tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 170px;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid var(--outline);
    background: var(--rl-green-deep);
    padding: 18px 20px;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
}
.rl-cat-cross__tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .16); }
.rl-cat-cross__bg { position: absolute; inset: 0; z-index: 0; }
.rl-cat-cross__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-cat-cross__tint {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, color-mix(in srgb, var(--rl-green-deep) 85%, transparent), color-mix(in srgb, var(--rl-green-deep) 6%, transparent) 60%);
}
.rl-cat-cross__body { position: relative; z-index: 2; color: var(--rl-white); display: block; }
.rl-cat-cross__body b { display: block; font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.rl-cat-cross__body span { font-size: 13px; color: color-mix(in srgb, var(--rl-white) 82%, transparent); }

/* ---- Redaktioneller Leerzustand (z. B. /sale/ ohne Deals) ---- */
ul.products-grid li.no-products-found.rl-archive-empty { padding: 56px 24px; text-align: center; }
.rl-archive-empty__lead { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.4vw, 28px); margin: 0 0 8px; color: var(--text); }
li.rl-archive-empty p { color: var(--text-muted); margin: 0 0 6px; }
/* CTA tokenbasiert (Review NICE 5): nicht auf Woo-/Elementor-.button-Defaults
   verlassen; Idiom wie .rl-story-btn--leaf (Pill, Akzent, Hover-Lift).
   Spezifitaet bewusst ueber (0,2,1): der Live-Check 2026-07-20 zeigte, dass
   li.rl-archive-empty .rl-archive-empty__btn den Tie gegen die spaeter
   geladene Woo-a.button-Regel verliert (Gegenreview-NICE b). */
ul.products-grid li.rl-archive-empty .rl-archive-empty__btn {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: 16px;
    padding: 14px 26px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
ul.products-grid li.rl-archive-empty .rl-archive-empty__btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
ul.products-grid li.rl-archive-empty .rl-archive-empty__btn:active { transform: translateY(0); }
ul.products-grid li.rl-archive-empty .rl-archive-empty__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- Chip-Leiste: Scroll-Affordanz auf Mobile (Audit final/06) ---- */
@media (max-width: 767px) {
    nav.rl-archive-chips {
        /* Maske nutzt nur den Alphakanal - 'black' statt Roh-Hex (W4). */
        -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 34px), transparent 100%);
        mask-image: linear-gradient(to right, black 0, black calc(100% - 34px), transparent 100%);
    }
    .rl-cat-editorial__inner--split { grid-template-columns: 1fr; }
    .rl-cat-cross__grid { grid-template-columns: 1fr; }
    .rl-cat-editorial { padding: 0 14px; }
    .rl-cat-cross { padding: 0 14px; }
}

/* ---- Finalisierung 2026-07-20 (Design-Audit agents/03+05) ---- */

/* Editorial-Break im Shop-Grid (archive-product.php, nach Karte 8):
   vollbreite Bild-Kachel als Zaesur in der Listing-Strecke. Als li im
   products-grid (Whitelist: nur zusaetzliches Item, Kartenstruktur/JS
   unveraendert - Load-More haengt hinter dem Break an). */
ul.products-grid li.rl-grid-break { grid-column: 1 / -1; list-style: none; }
.rl-grid-break__tile {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: 240px; border-radius: var(--r-lg); border: 1.5px solid var(--outline);
  box-shadow: var(--shadow-md); text-decoration: none;
}
.rl-grid-break__bg { position: absolute; inset: 0; }
.rl-grid-break__bg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
.rl-grid-break__tile:hover .rl-grid-break__bg img { transform: scale(1.04); }
.rl-grid-break__tint { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--rl-green-deep) 78%, transparent), color-mix(in srgb, var(--rl-green-deep) 12%, transparent) 55%); }
.rl-grid-break__body { position: relative; padding: 26px 28px; display: grid; gap: 6px; }
.rl-grid-break__body b { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.02em; color: var(--rl-white); }
/* br der Headline-msgid bleibt sichtbar: display:none klebte die Woerter
   zu "Kräuter.Kein" zusammen (Live-Check 2026-07-20). Zweizeilig ist ok. */
.rl-grid-break__body > span { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--accent-bright); }
@media (max-width: 720px) { .rl-grid-break__tile { min-height: 200px; } }

/* Leerzustand (Sale): Marken-Motiv ueber der Copy statt reiner Textflaeche. */
ul.products-grid li.rl-archive-empty .rl-archive-empty__img { display: block; max-width: 560px; margin: 0 auto 24px; border-radius: var(--r-lg); overflow: hidden; border: 1.5px solid var(--outline); box-shadow: var(--shadow-md); }
ul.products-grid li.rl-archive-empty .rl-archive-empty__img img { width: 100%; height: auto; display: block; }

/* JOINTIP (2 SKUs): 4-Spalten-Track liess die halbe Zeile leer (Audit
   agents/05 §1.3) - kompakter, zentrierter 2er-Track nur fuer diese Welt. */
@media (min-width: 768px) {
  .rl-world--jointip ul.products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
}

/* Editorial-Textur (Finalisierung 2026-07-20, Audit agents/04 §2):
   Blattschatten 30183 dezent hinter der Copy statt Flat-Beige. In der
   dunklen JOINTIP-Welt ausgeblendet (Beige-Textur wuerde den Welt-C-Bruch
   verwaessern). Copy/Fig liegen per z-index ueber der Textur. */
.rl-cat-editorial__inner { position: relative; overflow: hidden; }
.rl-cat-editorial__tex { position: absolute; inset: 0; z-index: 0; opacity: .3; pointer-events: none; }
.rl-cat-editorial__tex img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-cat-editorial__copy, .rl-cat-editorial__fig { position: relative; z-index: 1; }
.rl-world--jointip .rl-cat-editorial__tex { display: none; }
[data-theme="dark"] .rl-cat-editorial__tex { opacity: .12; }