/* ==========================================================================
   Evoparts24 - Mobile UX v1.0 (2026-09-08)
   Verbesserte Smartphone-Darstellung (< 768px). Desktop bleibt unveraendert.
   Wird als letztes Stylesheet in base.html geladen, damit die Regeln greifen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sticky-Kaufleiste (Produktdetailseite) - Basis-Styling.
   Auf >= 768px per Bootstrap-Klasse d-md-none ausgeblendet.
   -------------------------------------------------------------------------- */
.mobile-buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1039;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
}

.mobile-buybar-price {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
}

.mobile-buybar-total {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: #212529;
    white-space: nowrap;
}

.mobile-buybar-vat {
    font-size: 10.5px;
    font-weight: 400;
    color: #8a8f98;
}

.mobile-buybar-delivery {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    line-height: 1.2;
    color: #1e7e34;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-buybar-delivery.badge-lead-time {
    color: #8a8f98;
}

.mobile-buybar-delivery i {
    font-size: 13px;
    flex-shrink: 0;
}

.mobile-buybar-btn {
    flex-shrink: 0;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    white-space: nowrap;
}

/* Lieferzeit-Zeile in den Produktkarten: nur mobil sichtbar (Sektion 15) */
.tile-lieferzeit {
    display: none;
}

@media (max-width: 767.98px) {

    /* ----------------------------------------------------------------------
       1) Einblend-Animationen deaktivieren.
          Auf dem Handy fuehrten sie zu leeren/weissen Bereichen beim Laden,
          der Kaufbereich blieb teils unsichtbar (opacity 0) bis zum Scrollen.
       ---------------------------------------------------------------------- */
    .fade-in-up,
    .fade-in-down,
    .fade-in-left,
    .fade-in-right,
    .fade-in-slow {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    /* ----------------------------------------------------------------------
       2) Produktdetailseite: Reihenfolge Bild -> Kaufbox -> Details.
          Vorher stand der Kaufbereich erst nach der kompletten Detail-
          Tabelle (~4 Bildschirme Scrollen bis zum Kaufen-Button).
       ---------------------------------------------------------------------- */
    #product_img_section {
        order: 1;
        text-align: center;
    }

    #product_add_to_cart_section {
        order: 2;
        margin-top: 14px;
    }

    #product_dimensions_section {
        order: 3;
        margin-top: 18px;
    }

    #product_img_section img#mainProductImg {
        max-height: 240px !important;
    }

    /* Platz fuer die Sticky-Kaufleiste am Seitenende */
    #productsPage .products-detailed {
        padding-bottom: 92px;
    }

    /* ----------------------------------------------------------------------
       3) Kaufbox als Karte
       ---------------------------------------------------------------------- */
    #product_add_to_cart_section > .border.rounded {
        border: 1px solid #ececec !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    #product_add_to_cart_section .add-to-cart-buttons {
        padding: 4px 12px 14px;
    }

    #product_add_to_cart_section .adc_grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #product_add_to_cart_section .adc_grid .btn {
        width: 100%;
        padding: 12px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 10px;
    }

    /* ----------------------------------------------------------------------
       4) Breadcrumb: eine Zeile, seitlich wischbar statt 3-5 Zeilen hoch.
          Die ID-Selektoren schlagen die wrap-Regel aus products_filter_grid.css.
       ---------------------------------------------------------------------- */
    .prod-breadcrumb-ul,
    #productsPage .prod-breadcrumb-ul,
    #productsFilterGridPage .prod-breadcrumb-ul,
    #productsFilterGridPage .prod-breadcrumb {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        white-space: nowrap;
        gap: 2px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .prod-breadcrumb-ul::-webkit-scrollbar {
        display: none;
    }

    .prod-breadcrumb-ul li,
    #productsFilterGridPage .prod-breadcrumb-ul li {
        flex-shrink: 0 !important;
        font-size: 12px;
    }

    /* ----------------------------------------------------------------------
       5) Kopfbereich Produktseite: kompakter Titel + Navigation
       ---------------------------------------------------------------------- */
    .products-detailed .product-navigation-controls {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .products-detailed .product-navigation-controls h1.product_title {
        font-size: 18px;
        margin: 0;
        line-height: 1.3;
    }

    .products-detailed .nav-links {
        justify-content: flex-start !important;
    }

    .products-detailed .nav-links .nav-link {
        font-size: 13px;
    }

    /* ----------------------------------------------------------------------
       6) Detail-Tabelle: ruhiger und lesbarer
       ---------------------------------------------------------------------- */
    #product_dimensions_section .product-title {
        font-size: 15px;
        font-weight: 700;
    }

    .product-specification-table th.group-title {
        width: 38%;
        font-size: 12.5px;
        color: #6c757d;
        font-weight: 600;
    }

    .product-specification-table td.options-row {
        font-size: 13px;
    }

    /* Technische-Daten-Tabelle: horizontal wischbar statt gequetscht */
    .specs-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ----------------------------------------------------------------------
       7) Kategorie-/Suchliste: kompakte Karten (Bild links, Infos rechts)
          Vorher: 1 Produkt pro Bildschirm. Jetzt: ca. 4-5 pro Bildschirm.
       ---------------------------------------------------------------------- */
    .product-item.row {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 12px;
        margin: 0 0 10px;
        padding: 12px;
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 12px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    }

    .product-item .product-img {
        flex: 0 0 76px !important;
        width: 76px !important;
        max-width: 76px;
        padding: 0;
    }

    .product-item .products-list-img {
        width: 76px;
        height: 76px;
        object-fit: contain;
        background: #fff;
    }

    .product-item .prod-details {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0;
        padding: 0;
    }

    .product-item .grid-product-title-row a {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-item .grid-supplier-brand .supplier-brand-logo {
        max-height: 16px;
    }

    .product-item .grid-product-meta .prod-item-number {
        font-size: 11px;
        color: #8a8f98;
        margin: 2px 0 0;
    }

    /* Lange Kurzbeschreibung und Attribut-Listen mobil ausblenden */
    .product-item .grid-product-meta .prod-category {
        display: none;
    }

    .product-item .product-details .product-attr {
        display: none;
    }

    .product-item .product-price {
        padding: 0 !important;
    }

    .product-item .product-sale_price {
        font-size: 14px;
        margin-top: 4px;
    }

    .product-item .product-stock {
        font-size: 11.5px;
        color: #6c757d;
    }

    /* Buttons ans Karten-Ende, nebeneinander, gut antippbar */
    .product-item .product-button {
        order: 9;
        float: none;
        width: 100%;
        margin-top: 10px;
    }

    .product-item .product-button > div {
        display: flex;
        gap: 8px;
    }

    .product-item .products-list-btn {
        flex: 1 1 50%;
        margin: 0 !important;
        padding: 8px 10px;
        font-size: 12.5px;
        font-weight: 600;
        border-radius: 8px;
        white-space: nowrap;
    }

    /* ----------------------------------------------------------------------
       8) Kategorie-Kachelansicht (tile view): kompakte Zeilenkarten.
          Vorher: riesige Kacheln, 1 Produkt pro Bildschirm.
       ---------------------------------------------------------------------- */
    .tile-view-box {
        display: grid;
        grid-template-columns: 84px 1fr;
        grid-template-areas:
            "img content"
            "actions actions";
        gap: 4px 12px;
        padding: 12px;
        margin-bottom: 10px;
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 12px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    }

    .tile-view-box > a {
        grid-area: img;
        align-self: start;
    }

    .tile-view-box .tile-img {
        width: 84px;
        height: 84px;
        object-fit: contain;
    }

    .tile-view-box .tile-divider {
        display: none;
    }

    .tile-view-box .tile-content {
        grid-area: content;
        min-width: 0;
        padding: 0;
    }

    .tile-view-box .tile-supplier-brand .supplier-brand-logo {
        max-height: 16px;
    }

    .tile-view-box h5.tile-title {
        margin: 2px 0 4px;
    }

    .tile-view-box h5.tile-title a {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .tile-view-box .prod-item-number {
        font-size: 11px;
        color: #8a8f98;
        margin: 0 0 2px;
    }

    .tile-view-box .tile-actions {
        grid-area: actions;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 6px;
        padding: 0;
    }

    .tile-view-box .tile-price-row {
        font-size: 14px;
        margin: 0;
    }

    .tile-view-box .tile-actions-button-two {
        display: flex;
        gap: 8px;
        width: 100%;
    }

    /* Theme gibt .rfq-btn flex:1 (= Basis 0) -> ANFRAGE 89px, KAUFEN 230px.
       Beide gleich breit. */
    .tile-view-box .tile-actions-button-two .products-list-btn {
        flex: 1 1 0 !important;
        min-width: 0;
        margin: 0 !important;
        padding: 9px 10px;
        font-size: 12.5px;
        font-weight: 600;
        border-radius: 8px;
        white-space: nowrap;
    }

    /* ----------------------------------------------------------------------
       9) Startseite: Hero-Slider.
          home_premium.css begrenzt den Textbereich auf calc(50% - 28px)
          !important - dadurch war er mobil nur ~120px breit und die
          Ueberschrift brach mitten in Woertern um ("Indu strie").
          Gleiche Spezifitaet + spaeteres Laden gewinnt.
       ---------------------------------------------------------------------- */
    .hero-slide .hero-text-area,
    .product-showcase .hero-text-area {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .hero-text-area h1,
    .hero-slide .hero-text-area h1 {
        overflow-wrap: break-word !important;
        word-break: normal !important;
        hyphens: auto !important;
        font-size: 23px !important;
        line-height: 1.3 !important;
    }

    .hero-text-area p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    /* ----------------------------------------------------------------------
       10) App-Layout (Startseite + globale Tab-Leiste).
           Farben: --primary-color #DB4E39, --secondary-color #1E1F22,
           helles Rot #FBEDEB, Raender #e7e7e7 (aus main.css).
       ---------------------------------------------------------------------- */

    /* Untere Tab-Leiste (base.html) */
    .mobile-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        background: #ffffff;
        border-top: 1px solid #e7e7e7;
        box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mobile-tab {
        position: relative;
        flex: 1 1 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 8px 2px 7px;
        color: #5f646e;
        text-decoration: none;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.1;
        min-width: 0;
    }

    .mobile-tab i {
        font-size: 21px;
        line-height: 1;
    }

    .mobile-tab:first-child {
        color: var(--primary-color, #DB4E39);
    }

    .mobile-tab:hover,
    .mobile-tab:focus {
        color: var(--primary-color, #DB4E39);
        text-decoration: none;
    }

    .mobile-tab-badge {
        position: absolute;
        top: 3px;
        right: calc(50% - 20px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: var(--primary-color, #DB4E39);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

    .mobile-tab-badge:empty {
        display: none;
    }

    /* Platz fuer die Tab-Leiste auf allen Seiten */
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* Produktseite: Sticky-Kaufleiste oberhalb der Tab-Leiste stapeln */
    .mobile-buybar {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    #productsPage .products-detailed {
        padding-bottom: 150px;
    }

    /* Schnellzugriff-Kacheln (home.html) */
    .mobile-quick-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 4px 15px 14px;
    }

    .mqa-tile {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 12px;
        background: #ffffff;
        border: 1px solid #e7e7e7;
        border-radius: 12px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
        color: var(--secondary-color, #1E1F22);
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.25;
        text-decoration: none;
        min-width: 0;
    }

    .mqa-tile:hover,
    .mqa-tile:focus {
        color: var(--secondary-color, #1E1F22);
        border-color: var(--primary-color, #DB4E39);
        text-decoration: none;
    }

    .mqa-tile i {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #FBEDEB;
        color: var(--primary-color, #DB4E39);
        font-size: 19px;
    }

    /* Kategorie-Liste im App-Stil (home.html) */
    .mobile-cat-list {
        list-style: none;
        margin: 0 0 6px;
        padding: 0;
        background: #ffffff;
        border: 1px solid #e7e7e7;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    }

    .mobile-cat-list li + li {
        border-top: 1px solid #f0f0f0;
    }

    .mobile-cat-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        color: var(--secondary-color, #1E1F22);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        min-width: 0;
    }

    .mobile-cat-row:hover,
    .mobile-cat-row:focus {
        color: var(--secondary-color, #1E1F22);
        background: #fbfbfb;
        text-decoration: none;
    }

    .mobile-cat-row img,
    .mobile-cat-imgph {
        flex-shrink: 0;
        width: 96px;
        height: 64px;
        padding: 3px;
        object-fit: contain;
        border-radius: 8px;
        background: #ffffff;
        border: 1px solid #efefef;
    }

    .mobile-cat-imgph {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8a8f98;
        font-size: 20px;
    }

    .mobile-cat-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-cat-chevron {
        flex-shrink: 0;
        color: #b6bac2;
        font-size: 17px;
    }

    /* Startseite entschlacken: Desktop-Grids und Textwaende ausblenden.
       Bewusst auf #evo_home begrenzt, damit andere Seiten unberuehrt bleiben.
       :not(...) nimmt die Kategorie-Uebersicht /browser_category/ aus,
       die denselben Seitenrahmen nutzt (siehe Sektion 14). */
    #evo_home .evo_material-main:not(.browser_category-evo_material) .evo_featuredPropBox,
    #evo_home .evo_material-main.double_padding:not(.browser_category-evo_material),
    #evo_home .hero-partners-layout,
    #evo_home .partners-section,
    #evo_home .benefits-section,
    #evo_home .evo-analysis,
    #evo_home .how-it-works,
    #evo_home .bestsellers-section,
    #evo_home .featured-products-section,
    #evo_home .evobrain-standalone-section {
        display: none !important;
    }

    #evo_home .evo_material-main .section-header h2 {
        font-size: 18px;
    }

    /* ---------- 11) Prominente Suchleiste unter dem Header ---------- */
    .mobile-search-entry {
        background: #fff;
        padding: 8px 12px 10px;
        border-bottom: 1px solid #e7e7e7;
    }

    .mobile-search-entry-btn {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 11px 15px;
        background: #f4f5f7;
        border: 1px solid #e7e7e7;
        border-radius: 999px;
        color: #5f646e;
        font-size: 14px;
        line-height: 1.2;
        text-align: left;
        cursor: pointer;
    }

    .mobile-search-entry-btn i {
        flex-shrink: 0;
        color: var(--primary-color, #DB4E39);
        font-size: 17px;
    }

    .mobile-search-entry-btn span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---------- 12) EVOBRAIN-Karte unter der Kategorie-Liste ---------- */
    .mobile-evobrain-card {
        display: flex;
        align-items: center;
        gap: 11px;
        margin-top: 12px;
        padding: 13px 14px;
        background: #fff;
        border: 1px solid #e7e7e7;
        border-radius: 14px;
        box-shadow: 0 1px 4px rgba(30, 31, 34, 0.06);
        text-decoration: none;
    }

    .mobile-evobrain-card:hover,
    .mobile-evobrain-card:focus {
        text-decoration: none;
    }

    .mobile-evobrain-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: #FBEDEB;
        color: var(--primary-color, #DB4E39);
        font-size: 20px;
    }

    .mobile-evobrain-text {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-evobrain-text strong {
        font-size: 13.5px;
        color: var(--secondary-color, #1E1F22);
        line-height: 1.25;
    }

    .mobile-evobrain-text span {
        font-size: 12px;
        color: #5f646e;
        line-height: 1.35;
    }

    .mobile-evobrain-btn {
        flex-shrink: 0;
        padding: 8px 15px;
        background: var(--primary-color, #DB4E39);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        border-radius: 999px;
        line-height: 1;
    }

    /* ============================================================
       13) Aufgeraeumter mobiler Header: Logo links, Konto rechts.
           Hamburger, Sparkles, Lupe und beide Warenkoerbe ausblenden -
           Kategorien/Warenkorb/Anfrage-Korb sind in der Tab-Leiste,
           die Suchleiste ist direkt darunter sichtbar.
           #mobileSearchToggle bleibt im DOM: die sichtbare Suchleiste
           oeffnet darueber weiterhin das Such-Overlay per .click().
       ============================================================ */

    .mobile-header-left .hamburger-btn,
    .mobile-header-right .gradient-text,
    .mobile-header-right #mobileSearchToggle,
    .mobile-header-right a[href*="view_rfq_cart"],
    .mobile-header-right a[href*="view_shopping_cart"] {
        display: none !important;
    }

    /* ============================================================
       14) Kategorie-Uebersicht (/browser_category/): aus den grossen
           Kacheln (1 pro Bildschirm) wird die gleiche kompakte
           Zeilen-Liste wie auf der Startseite. Nur CSS, das Template
           browser_category.html bleibt unveraendert.
       ============================================================ */

    .browser_category-evo_material .scale-in {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .browser_category-evo_material .evo_featuredPropBox ul {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .browser_category-evo_material .category-card {
        position: relative;
        margin: 0;
        height: auto !important;
        min-height: 0 !important;
        max-width: none !important;
        background: #fff;
        border: 1px solid #e7e7e7;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(30, 31, 34, 0.05);
        overflow: hidden;
    }

    .browser_category-evo_material .category-card-link {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 12px;
        text-decoration: none;
    }

    /* Kategoriebilder 1024x1024 und Lieferanten-Logos (Querformat, z. B.
       154x36) waren in 46px unsichtbar; Logos haben zudem Inline-Style
       width/height:auto + Theme-Padding 0 15px -> rendern mit Hoehe 0. */
    .browser_category-evo_material .category-image-wrapper {
        flex-shrink: 0;
        width: 96px !important;
        height: 64px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border: 1px solid #efefef;
        border-radius: 8px;
        overflow: hidden;
        padding: 4px !important;
    }

    .browser_category-evo_material .category-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    .browser_category-evo_material .category-content {
        flex: 1 1 auto;
        min-width: 0;
        height: auto !important;
        padding: 0 !important;
    }

    .browser_category-evo_material .category-content-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin: 0;
    }

    .browser_category-evo_material .category-title {
        margin: 0;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--secondary-color, #1E1F22);
    }

    .browser_category-evo_material .product-count-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        font-size: 11.5px;
        color: #5f646e;
        opacity: 1 !important;
        visibility: visible !important;
        position: static;
    }

    .browser_category-evo_material .product-count-badge i {
        font-size: 13px;
        color: var(--primary-color, #DB4E39);
    }

    /* Beschreibungstext mobil ausblenden - spart pro Kategorie 2-3 Zeilen */
    .browser_category-evo_material .category-description {
        display: none !important;
    }

    /* Pfeil-Button oben rechts -> dezenter Chevron in der Zeile rechts */
    .browser_category-evo_material .category-open-icon {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        background: none;
        border: none;
        box-shadow: none;
        color: #b7bcc4;
        font-size: 16px;
    }

    /* Platz fuer den Chevron rechts freihalten */
    .browser_category-evo_material .category-card-link {
        padding-right: 34px;
    }

    #evo_home .browser_category-evo_material h3.fw-bold {
        font-size: 18px;
    }

    /* ============================================================
       15) Produktliste (products_filter_grid): Produkte zuerst.
       Live stehen mobil ~2100px Filter VOR den Produkten. Die
       Filter-Spalte rutscht per Flex-Order unter die Produktliste,
       ein Sprungknopf ("Filtern & Sortieren") fuehrt per Anker hin.
       Dazu: Lieferzeit-Zeile in den Produktkarten.
       ============================================================ */

    /* Das Theme setzt .row.filter-grid-layout mobil auf display:block -
       ohne Flex greift order nicht (Filter blieben OBEN, 770px). */
    #productsFilterGridPage .filter-grid-layout {
        display: flex !important;
        flex-direction: column;
    }

    #productsFilterGridPage .filter-grid-layout .filter-br-pd {
        order: 2;
        width: 100%;
    }

    #productsFilterGridPage .filter-grid-layout .prod-wrapper-col {
        order: 1;
        width: 100%;
    }

    .filter-sprung {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 2px 15px 12px;
        padding: 9px 16px;
        background: #fff;
        border: 1px solid #e7e7e7;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        color: var(--secondary-color, #1E1F22);
        text-decoration: none;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    }

    .filter-sprung i {
        color: var(--primary-color, #DB4E39);
        font-size: 16px;
    }

    .tile-lieferzeit {
        display: block;
        margin: 2px 0 0;
        font-size: 11.5px;
        color: #2e7d32;
    }

    .tile-lieferzeit i {
        font-size: 13px;
    }

    /* ============================================================
       16) Unterkategorie-Seiten (/categories/<slug>/, categories_v2):
           grosse Kacheln (~310px, 1 pro Bildschirm) werden zur
           gleichen App-Zeilen-Liste wie auf der Startseite
           (eine Karte, Trennlinien, Bild links, Name mittig,
           Chevron rechts). Nur CSS, Template bleibt unveraendert.
       ============================================================ */

    /* "Nach oben"-Schwebeknopf mobil unnoetig (kurze Scrollwege) und
       kollidiert optisch mit der Tab-Leiste. */
    #scrollToTopBtn {
        display: none !important;
    }

    /* Newsletter-Block (base.html, auf jeder Seite vor dem Footer, ~410px)
       mobil ausblenden - Anmeldung bleibt ueber Desktop/Footer moeglich. */
    section.evo_newsletter,
    #evo_newsletter {
        display: none !important;
    }

    /* Footer "Sicher bezahlen": Theme zentriert Footer-<p> mobil, die
       Ueberschrift daneben bleibt linksbuendig -> wirkt verrutscht. */
    .footer-payment-head {
        align-items: flex-start !important;
    }

    .footer-payment-head > div,
    .footer-payment-head h4,
    .footer-payment-head p {
        text-align: left !important;
    }

    .footer-payment-head h4 {
        margin: 0 0 4px !important;
    }

    .footer-payment-head p {
        margin: 0 !important;
        line-height: 1.4;
    }

    /* Desktop-Seitenleiste (Kategorie-Baum) mobil komplett ausblenden -
       Kategorien erreicht man ueber die Zeilen-Liste + Tab-Leiste.
       .cate-aside-col existiert nur in categories.html/categories_v2.html;
       der mobile Drawer in base.html (.category-sidebar-drawer) bleibt. */
    .cate-aside-col {
        display: none !important;
    }

    /* Das Template nutzt Bootstrap .p-5 (48px Rand je Seite) - auf 390px
       blieben der Liste nur 288px. */
    .row.p-5:has(> .cate-content-col) {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .cate-content-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .category-content-v2 {
        height: auto !important;
    }

    /* Partner-Kategorieseiten: feste 420px-Suchbox erzeugt seitliches
       Scrollen auf 390px-Geraeten. */
    .partner-hero-search {
        width: 100% !important;
        max-width: 100% !important;
    }

    .partner-hero-search .search-bar-main.partner-search-bar {
        width: 100% !important;
    }

    /* Brotkrumen: auf tiefen Ebenen 4-5 Zeilen lang. Mobil wie in Apps nur
       "< Elternkategorie" als Zurueck-Link (aktuelle Kategorie steht
       ohnehin als Ueberschrift darunter). */
    body:has(.category-content-v2) .breadcrumb {
        display: flex !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
    }

    body:has(.category-content-v2) .breadcrumb .breadcrumb-item {
        display: none !important;
    }

    body:has(.category-content-v2) .breadcrumb .breadcrumb-item:nth-last-child(2) {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        padding: 0 !important;
    }

    body:has(.category-content-v2) .breadcrumb .breadcrumb-item:nth-last-child(2)::before {
        content: "" !important;
        display: inline-block;
        float: none !important;
        width: 8px;
        height: 8px;
        padding: 0 !important;
        margin: 0 2px;
        border-left: 2px solid var(--primary-color, #DB4E39);
        border-bottom: 2px solid var(--primary-color, #DB4E39);
        transform: rotate(45deg);
    }

    body:has(.category-content-v2) .breadcrumb .breadcrumb-item:nth-last-child(2) a {
        display: inline-block;
        max-width: calc(100vw - 80px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 500;
        color: var(--primary-color, #DB4E39);
        text-decoration: none;
    }

    body:has(.category-content-v2) .breadcrumb .breadcrumb-item:nth-last-child(2) a i {
        display: none;
    }

    .category-content-v2 .category-grid {
        display: flex !important;
        flex-direction: column;
        /* Theme: .category-content-v2 ist flex-column mit height:calc(100%-180px);
           mit overflow:hidden wuerde die Liste sonst auf 2px zusammenfallen. */
        flex-shrink: 0;
        gap: 0;
        padding: 0;
        background: #ffffff;
        border: 1px solid #e7e7e7;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    }

    .category-content-v2 .category-item-link {
        display: block;
        height: auto !important;
    }

    .category-content-v2 .category-item-link + .category-item-link {
        border-top: 1px solid #f0f0f0;
    }

    .category-content-v2 .category-item {
        flex-direction: row !important;
        align-items: center;
        gap: 12px;
        margin: 0 !important;
        padding: 8px 14px;
        height: auto !important;
        min-height: 0 !important;
        background: #fff;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .category-content-v2 .category-item:hover {
        transform: none;
        background: #fbfbfb;
    }

    /* Chevron rechts wie auf der Startseite. Das Theme nutzt ::before/::after
       der Karte fuer einen roten Deko-Punkt (absolut positioniert) - daher
       alles hart ueberschreiben. */
    .category-content-v2 .category-item::before {
        display: none !important;
    }

    .category-content-v2 .category-item::after {
        content: "" !important;
        position: static !important;
        display: block !important;
        flex-shrink: 0;
        width: 8px !important;
        height: 8px !important;
        background: none !important;
        border: none !important;
        border-right: 2px solid #b6bac2 !important;
        border-bottom: 2px solid #b6bac2 !important;
        border-radius: 0 !important;
        transform: rotate(-45deg) !important;
        margin: 0 2px 0 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        animation: none !important;
        transition: none !important;
    }

    /* Kategoriebilder sind Querformat (515x321) mit viel Weissraum - im
       60px-Quadrat blieb nur ein 58x36-Streifen. Daher Kachel 112x74 quer. */
    .category-content-v2 .category-image-wrapper {
        flex: 0 0 112px;
        width: 112px !important;
        height: 74px !important;
        min-height: 0 !important;
        max-height: none;
        background: #ffffff;
        border: 1px solid #ececec;
        border-radius: 8px;
        overflow: hidden;
        padding: 0;
    }

    .category-content-v2 .category-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    /* Oberste Partner-Ebene (/web/partner/<name>/<slug>/) rendert das Bild
       ohne Wrapper mit Inline-Style height:211px;width:100%. */
    .category-content-v2 .category-item > img {
        flex: 0 0 112px;
        width: 112px !important;
        height: 74px !important;
        margin: 0 !important;
        padding: 2px;
        object-fit: contain;
        background: #ffffff;
        border: 1px solid #ececec;
        border-radius: 8px;
    }

    .category-content-v2 .category-item-body {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0 !important;
        height: auto !important;
        display: block !important;
        padding: 0 !important;
    }

    .category-content-v2 .category-item-title {
        margin: 0;
        height: auto !important;
        min-height: 0 !important;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.3 !important;
        color: var(--secondary-color, #1E1F22);
        text-align: center !important;
        overflow: hidden;
        text-overflow: ellipsis;
        /* letzte Ebene listet Produkte mit langen Namen -> max. 3 Zeilen */
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
}