/**
 * Colorus Mobile UX — wirkt ausschließlich unter 768 px.
 * Farben, Schrift und Buttons kommen vollständig vom Theme;
 * hier stehen nur Platzierung und Maße.
 */

@media (max-width: 767.98px) {

    /* ---- 4 · Produktbild kompakt (body.cmux-gallery) ------------------- */
    body.cmux-gallery.is-ctl-product .product-detail-media img,
    body.cmux-gallery.is-ctl-product .gallery-slider-item img,
    body.cmux-gallery.is-ctl-product .gallery-slider-single-image img {
        max-height: var(--cmux-gallery-h, 240px);
        width: auto;
        max-width: 100%;
        object-fit: contain;
        margin-left: auto;
        margin-right: auto;
    }
    body.cmux-gallery.is-ctl-product .gallery-slider-item,
    body.cmux-gallery.is-ctl-product .gallery-slider-single-image {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Live verifiziert: Die Items tragen style="min-height: 430px" INLINE
           als Platzhalter-Höhe für die Lazyload-Bilder (1×1-px-GIF bis zum
           Laden). Deshalb min-height = max-height = Zielhöhe: `0` (v1.0.1)
           kollabierte die Items vor dem Bild-Laden auf ~1 px, der Slider
           fror diese Höhe ein → „Bilder laden nicht". !important ist nötig,
           um das Inline-Style zu schlagen. */
        min-height: var(--cmux-gallery-h, 240px) !important;
        max-height: var(--cmux-gallery-h, 240px);
    }
    /* Vollbild-Zoom ausnehmen: Das Zoom-Modal nutzt dieselben Slider-Klassen
       (verschachtelt innerhalb der Galerie) — ohne diesen Reset würde das
       gezoomte Bild auf die Galerie-Höhe gedeckelt. Die Modal-Items haben
       kein eigenes min-height (live geprüft), das !important oben ist dort
       also folgenlos. */
    body.cmux-gallery.is-ctl-product .zoom-modal .gallery-slider-item img,
    body.cmux-gallery.is-ctl-product .image-zoom-container img {
        max-height: none;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
    body.cmux-gallery.is-ctl-product .zoom-modal .gallery-slider-item {
        display: revert;
        max-height: none;
        min-height: 0 !important;
    }

    /* ---- 1b · Produkttitel kompakt (body.cmux-title) ---------------------
       Das Theme setzt den Titel auch mobil auf 35 px !important — lange
       Titel belegen damit 4–6 Zeilen (~250 px des 723-px-Falzbudgets). */
    body.cmux-title.is-ctl-product .product-detail-headline .product-detail-name,
    body.cmux-title.is-ctl-product h1.product-detail-name {
        font-size: var(--cmux-title-fs, 20px) !important;
        line-height: 1.35;
        font-weight: 600;
        letter-spacing: 0;
    }

    /* ---- 1c · Kaufbox aufräumen (body.cmux-buybox) ------------------------
       Alle Regeln zielen auf konkrete, live ausgelesene Theme-Werte:
       .buy-design{padding-top:46px;padding-left:20px} · .price-discount als
       weiße Schatten-Karte · .base-price/.product-detail-price/.new-price mit
       fester width:163px + 36px !important · .number-input{flex-direction:
       column} (gestapelter Mengen-Stepper) · .product-wishlist{top:27px}. */

    /* Box-Innenabstand: 46 px oben → kompakt, vertikaler Rhythmus per gap;
       unten Luft nach dem Kaufbutton */
    body.cmux-buybox.is-ctl-product .buy-design {
        padding: 12px 14px 14px !important;
        row-gap: 8px;
    }
    /* Abstand der grauen Kaufbox zum nachfolgenden Block */
    body.cmux-buybox.is-ctl-product .js-magnifier-zoom-image-container {
        margin-bottom: 16px;
    }

    /* Rabatt-Zeile: schlanke Zeile statt schwebender weißer Karte */
    body.cmux-buybox.is-ctl-product .price-discount {
        box-shadow: none;
        background: transparent;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 10px;
        padding: 12px 14px 0;
    }
    body.cmux-buybox.is-ctl-product .price-discount .old-price {
        display: inline-block;
        padding: 0;
    }

    /* Merken-Button: nicht mehr 27 px nach unten versetzt */
    body.cmux-buybox.is-ctl-product .product-detail-buy .product-wishlist,
    body.cmux-buybox.is-ctl-product .js-magnifier-zoom-image-container .product-wishlist {
        top: 10px;
        margin-right: 14px;
    }
    /* „Merken" ausblenden (eigener Schalter, body.cmux-nowish) — nur die
       Kaufbox der Produktseite; Header-Herz und Listing-Kacheln unberührt */
    body.cmux-nowish.is-ctl-product .product-detail-buy .product-wishlist,
    body.cmux-nowish.is-ctl-product .js-magnifier-zoom-image-container .product-wishlist,
    body.cmux-nowish.is-ctl-product .buy-design .product-wishlist {
        display: none;
    }

    /* Preis: bold, in der CTA-Grünfarbe, konfigurierbare Größe (Standard 30 px);
       feste 163-px-Spalten des Themes lösen. Gilt auch für Sale-Preise
       (überschreibt das Theme-Rot von .with-list-price). */
    body.cmux-buybox.is-ctl-product .buy-design .product-detail-price,
    body.cmux-buybox.is-ctl-product .buy-design .new-price {
        font-size: var(--cmux-price-fs, 30px) !important;
        font-weight: 700 !important;
        color: var(--bs-primary, #7abb11) !important;
        width: auto;
        line-height: 1.15;
    }
    body.cmux-buybox.is-ctl-product .buy-design .base-price {
        width: auto;
    }
    /* Grundpreis + „zzgl. Versand" klein unter dem Preis in derselben Zelle */
    body.cmux-buybox.is-ctl-product .cmux-price-cell .product-detail-price-unit,
    body.cmux-buybox.is-ctl-product .cmux-price-cell .product-detail-tax {
        font-size: .72rem;
        margin-bottom: 0;
    }

    /* Grundpreis (Inhalt / € je Einheit) und Bewertungszeile dichter */
    body.cmux-buybox.is-ctl-product .buy-design .product-detail-price-unit {
        font-size: .75rem;
    }
    body.cmux-buybox.is-ctl-product .buy-design .product-detail-reviews {
        margin-bottom: .5rem;
    }

    /* Kaufzeile: Stepper links (fix), Button füllt den Rest.
       Struktur live: .number-input > input.select-number + p.button-quantity
       (−/+) + div.info (ⓘ VE = n). v1.0.3 quetschte .info mit in die Zeile —
       der Hinweis überlagerte den Kaufbutton. Jetzt: .info bricht als eigene
       kleine Zeile unter den Stepper um; bei „VE = 1" blendet das Script
       den Hinweis komplett aus (informationsfrei, Tooltip greift nie). */
    /* Layout nach Betreiber-Skizze:
       Zeile 1 = Preis (links, grün/bold) + Mengen-Stepper (rechts),
       Zeile 2 = Kaufbutton in voller Breite. Der Preis-Container wird
       per Script als erste Zelle in die Kaufzeile gezogen. */
    body.cmux-buybox.is-ctl-product .form-row.buy-widget-container {
        margin-left: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        /* Zeilenabstand: Preis-/Mengen-Zeile ↔ Kaufbutton */
        gap: 14px 8px;
    }
    body.cmux-buybox.is-ctl-product .buy-widget-container .cmux-price-cell {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        order: 1;
    }
    body.cmux-buybox.is-ctl-product .buy-widget-container fieldset.col-4 {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding: 0;
        margin: 0 0 0 auto;
        order: 2;
    }
    body.cmux-buybox.is-ctl-product .buy-widget-container .col-8 {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        padding: 0;
        order: 3;
    }
    body.cmux-buybox.is-ctl-product .buy-widget-container .btn-buy {
        width: 100%;
    }
    body.cmux-buybox.is-ctl-product .buy-widget .number-input {
        flex-direction: row !important;
        flex-wrap: wrap;
        width: auto;
        max-width: 136px;
        height: auto;
        align-items: stretch;
    }
    /* Stepper-Reihenfolge [−][Anzahl][+]: Die −/+-Buttons stecken gemeinsam
       in p.button-quantity — display:contents hebt dessen Box auf, sodass
       die Buttons direkt am Flex-Layout von .number-input teilnehmen und
       per order um das Eingabefeld herum sortiert werden können. */
    body.cmux-buybox.is-ctl-product .buy-widget .number-input .button-quantity {
        display: contents;
    }
    body.cmux-buybox.is-ctl-product .buy-widget .number-input .select-button {
        width: 40px;
        height: 46px;
        font-size: 18px;
        order: 1;              /* − links */
    }
    body.cmux-buybox.is-ctl-product .buy-widget .number-input input.select-number {
        height: 46px !important;
        flex: 0 0 52px;
        width: 52px;
        text-align: center;
        padding: 1px 4px;
        order: 2;              /* Anzahl mittig */
    }
    body.cmux-buybox.is-ctl-product .buy-widget .number-input .select-button.plus-button {
        order: 3;              /* + rechts */
    }
    body.cmux-buybox.is-ctl-product .buy-widget .number-input .info {
        flex-basis: 100%;
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 4px;
        font-size: 11px;
        white-space: nowrap;
        order: 4;              /* VE-Hinweis (falls VE > 1) unter dem Stepper */
    }
    body.cmux-buybox.is-ctl-product .buy-widget .number-input .info img {
        width: 13px;
        height: 13px;
    }
    body.cmux-buybox.is-ctl-product .buy-widget-container .btn-buy {
        min-height: 46px;
    }
    body.cmux-buybox.is-ctl-product .buy-design .product-detail-form-container {
        margin-bottom: .25rem;
    }

    /* ---- 1d · Typo-Skala mobil (body.cmux-typo) ---------------------------
       Ziel-Hierarchie nach Apple HIG (Body ~17 pt), Material 3 (Body 14–16 sp),
       web.dev/Lighthouse (Basis ≥ 16 px, < 12 px = unlesbar) und WCAG 1.4.12
       (Zeilenhöhe ≥ 1,5):
         H1 20/600 (Schalter 1b) > Sektion 18/700 > Fließtext 16/400/1,5
         > Sekundär 13 > Breadcrumb 12.
       Live-Ist dagegen: Tabköpfe „Beschreibung/Bewertungen" 23 px (größer
       als der Titel!), Breadcrumb 16 px, „Größe"-Label 20 px (.fs-5). */
    body.cmux-typo.is-ctl-product .product-detail-tabs .card-tabs .nav-link,
    body.cmux-typo.is-ctl-product .card-tabs .nav-item {
        font-size: 18px;
    }
    body.cmux-typo.is-ctl-product .product-detail-tabs h3 {
        font-size: 17px;
        line-height: 1.4;
    }
    body.cmux-typo.is-ctl-product .short-description-product,
    body.cmux-typo.is-ctl-product .product-detail-tab-preview,
    body.cmux-typo.is-ctl-product .product-detail-tabs-content p {
        font-size: 16px;
        line-height: 1.5;
    }
    body.cmux-typo.is-ctl-product .product-detail-content .product-breadcrumb {
        margin: .375rem 0;
    }
    body.cmux-typo.is-ctl-product .breadcrumb a,
    body.cmux-typo.is-ctl-product .breadcrumb-item {
        font-size: 12px;
        line-height: 1.6;
    }
    /* „Größe"-Label: Theme nutzt die Utility .fs-5 (1.25rem !important) */
    body.cmux-typo.is-ctl-product .product-detail-configurator-group-title {
        font-size: 14px !important;
        margin-bottom: .25rem;
    }
    /* Sekundärzeilen: Verfügbarkeit/Artikelnummer, Bewertungs-Link */
    body.cmux-typo.is-ctl-product .product-detail-delivery-information,
    body.cmux-typo.is-ctl-product .delivery-information {
        font-size: 13px;
    }
    body.cmux-typo.is-ctl-product .buy-design .product-detail-reviews a {
        font-size: 13px;
    }
    /* Attribut-Balken (Farbaufnahme usw.): Labels auf Sekundärebene,
       Zeilen dichter — der Block wandert per Script hinter die Kaufbox */
    body.cmux-typo.is-ctl-product .property-custom-infobox .infobox-label {
        font-size: 13px;
    }
    body.cmux-typo.is-ctl-product .property-custom-infobox .property-custom-infobox-item {
        margin-bottom: .375rem;
    }

    /* ---- 6 · Versandhinweis neben dem Preis ----------------------------- */
    body.cmux-on .cmux-ship {
        font-size: .8125rem;
        line-height: 1.4;
        opacity: .85;
        margin: .25rem 0 .5rem;
    }

    /* ---- 2/1e · Aufklapper (Staffelpreise „collapsed" + Eignungsleisten) -- */
    body.cmux-on details.cmux-tiered,
    body.cmux-on details.cmux-attrs {
        border: 1px solid rgba(0, 0, 0, .125);
        border-radius: .375rem;
        padding: 0 .75rem;
        margin: .5rem 0;
        background: #fff;
    }
    body.cmux-on details.cmux-tiered > summary,
    body.cmux-on details.cmux-attrs > summary {
        cursor: pointer;
        font-size: .875rem;
        font-weight: 600;
        padding: .5rem 0;
    }
    body.cmux-on details.cmux-tiered[open],
    body.cmux-on details.cmux-attrs[open] {
        padding-bottom: .5rem;
    }
    /* Modus „inline": Tabelle sitzt in der Kaufbox direkt über der
       Mengen-/Kaufzeile (die Kaufbox ist ein flex-wrap-Container →
       flex-basis 100 % erzwingt die eigene Zeile). Die vom Script
       markierte, aktuell erreichte Staffel wird im Theme-Grün hinterlegt. */
    body.cmux-on .product-block-prices.cmux-tiered-inline {
        flex: 0 0 100%;
        width: 100%;
        /* Luft zwischen Staffeltabelle und der Preis-/Mengen-Zeile */
        margin: 2px 0 12px;
    }
    body.cmux-on .cmux-tiered-inline .product-block-prices-grid,
    body.cmux-on .cmux-tiered-inline table {
        margin-bottom: 0;
        font-size: 12.5px;
    }
    body.cmux-on .cmux-tiered-inline .product-block-prices-cell {
        padding: .3rem .375rem;
    }
    body.cmux-on .cmux-tiered-inline .product-block-prices-row.cmux-tier-active > th,
    body.cmux-on .cmux-tiered-inline .product-block-prices-row.cmux-tier-active > td {
        background: rgba(122, 187, 17, .16);
        font-weight: 700;
    }
    /* Staffel-Zeilen sind antippbar (setzen die Menge auf die Staffel) */
    body.cmux-on .cmux-tiered-inline .product-block-prices-row {
        cursor: pointer;
    }
    body.cmux-on .cmux-tiered-inline .product-block-prices-row:active > th,
    body.cmux-on .cmux-tiered-inline .product-block-prices-row:active > td {
        background: rgba(122, 187, 17, .10);
    }
    body.cmux-on .cmux-tiered-inline .product-block-prices-row:focus-visible > th,
    body.cmux-on .cmux-tiered-inline .product-block-prices-row:focus-visible > td {
        outline: 2px solid rgba(122, 187, 17, .6);
        outline-offset: -2px;
    }

    /* ---- 5 · Kompakter Header (body.cmux-header; Standard: AUS) ----------
       Live am Shop verifiziert (16.07.2026): Die Logo-Zeile ist
       .header-logo-col (col-12 mit my-3 = 2×1rem Margin), darunter
       .header-search-col mit Burger/Suche/Konto/Warenkorb. Die !important
       sind nötig, weil Bootstrap-5-Utilities (.my-3) selbst !important sind. */
    body.cmux-header .header-main .header-logo-col {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important;
        padding-bottom: 0 !important;
    }
    body.cmux-header .header-logo-picture img,
    body.cmux-header .header-logo-main img,
    body.cmux-header .header-main .header-logo-main-img,
    body.cmux-header .header-main .navbar-brand img {
        max-height: 40px;
        width: auto;
    }
    body.cmux-header .header-logo-main {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* ---- 8 · Sticky-Kaufleiste -------------------------------------------- */
    body.cmux-on .cmux-sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* über der Navbar (Bootstrap 1030), unter Offcanvas-Backdrop (1040+),
           damit der Warenkorb-Offcanvas die Leiste sauber überdeckt */
        z-index: 1035;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .5rem .875rem calc(.5rem + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid rgba(0, 0, 0, .125);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
        transform: translateY(110%);
        transition: transform .2s ease;
    }
    body.cmux-on .cmux-sticky.cmux-open {
        transform: translateY(0);
    }
    body.cmux-on .cmux-sticky .cmux-sticky-price {
        font-weight: 700;
        font-size: 1.0625rem;
        color: var(--bs-primary, #7abb11);
        white-space: nowrap;
        /* Lange Preis-Strings (UVP-Zusätze etc.) kürzen statt den Button
           auf schmalen Geräten (320 px) aus dem Bild zu schieben */
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.cmux-on .cmux-sticky .cmux-sticky-btn {
        margin-left: auto;
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* Platz freihalten, solange die Leiste sichtbar ist */
    body.cmux-has-sticky {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }

    @media (prefers-reduced-motion: reduce) {
        body.cmux-on .cmux-sticky {
            transition: none;
        }
    }
}