/**
 * miniSchoggi – Kompakte mobile Listenkarten (Final, 2026-08-13 Abend)
 *
 * Kategorien- & Kurslisten <576px im Galaxus/Brack-Muster:
 * Bild links 122px, rechts Titel (max 2 Zeilen) + Verfuegbarkeit/Termin
 * (1 Zeile) + Preis fett linksbuendig + kompakter Warenkorb-Button.
 * Karte ~220px statt 637px. 576-767px: 2 Spalten, Tablet/Desktop: unveraendert.
 * Betrifft nur das Listing-Widget (elementor-widget-listing-products),
 * nicht die Produkt-Slider.
 *
 * WICHTIG (Cache-Busting): Der CCC-Bundle-Name ist sha1 der DATEILISTE
 * (classes/assets/CccReducer.php) – Inhalts-Aenderungen busten Cloudflare
 * NICHT. Fuer jede Aenderung an dieser Datei: neue Datei anlegen und in
 * minischoggici.php umregistrieren (Hausmuster, siehe ms-menu.css).
 *
 * Rollback: Registration in minischoggici.php auf ms-mobile.css
 * (1-Spalten-Stand Vormittag) zuruecksetzen + var/cache/prod leeren.
 */

@media (max-width: 575px) {
  /* Liste: 1 Spalte, Trennlinien statt Abstaende */
  .elementor-widget-listing-products .products.ce-product-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .elementor-widget-listing-products .ce-product-grid > * {
    border-bottom: 1px solid #eee3d2;
    padding: 10px 0;
  }

  /* Karte: Bild links, Infos rechts, vertikal zentriert */
  .elementor-widget-listing-products .ce-product-grid article.elementor-section-wrap {
    display: grid !important;
    grid-template-columns: 122px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    position: relative;
  }
  .elementor-widget-listing-products .ce-product-grid article > section:nth-of-type(1) { grid-column: 1; }
  .elementor-widget-listing-products .ce-product-grid article > section:nth-of-type(2) { grid-column: 2; align-self: center; }

  /* Bildspalte: Hoehenzwaenge loesen */
  .elementor-widget-listing-products .ce-product-grid article > section:nth-of-type(1) :is(div, figure, a, picture) {
    height: auto !important;
    min-height: 0 !important;
  }
  .elementor-widget-listing-products .ce-product-grid article > section:nth-of-type(1) img {
    height: auto !important;
    width: 100% !important;
  }
  .elementor-widget-listing-products .ce-product-grid article .elementor-widget-wrap {
    padding: 0 !important;
    gap: 4px !important;
  }
  .elementor-widget-listing-products .ce-product-grid article .elementor-column-wrap { padding: 0 !important; }

  /* Titel: max 2 Zeilen, linksbuendig */
  .elementor-widget-listing-products .ce-product-grid h3.ce-product-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 2.75em;
    margin: 0 !important;
  }
  .elementor-widget-listing-products .ce-product-grid h3.ce-product-name,
  .elementor-widget-listing-products .ce-product-grid h3.ce-product-name a {
    font-size: 14px !important;
    line-height: 1.32 !important;
    font-weight: 600 !important;
    text-align: left !important;
    display: -webkit-box;
  }
  .elementor-widget-listing-products .ce-product-grid h3.ce-product-name a { display: inline !important; }

  /* Verfuegbarkeit + Kurstermin: klein, linksbuendig */
  .elementor-widget-listing-products .ce-product-grid :is(.elementor-widget-miniodoostock_extra, .elementor-widget-course_availability, .elementor-widget-course_event),
  .elementor-widget-listing-products .ce-product-grid :is(.elementor-widget-miniodoostock_extra, .elementor-widget-course_availability, .elementor-widget-course_event) * {
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }
  .elementor-widget-listing-products .ce-product-grid .stockcontainer {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .elementor-widget-listing-products .ce-product-grid .stockcontainer .lager { display: inline !important; }
  .elementor-widget-listing-products .ce-product-grid .elementor-widget-course_event .elementor-widget-container {
    font-weight: 600 !important;
    color: #5d3d1e;
  }
  .elementor-widget-listing-products .ce-product-grid .elementor-widget-course_event .elementor-widget-container,
  .elementor-widget-listing-products .ce-product-grid .elementor-widget-course_event .elementor-widget-container * {
    justify-content: flex-start !important;
  }

  /* Preis-/Mengen-Innensektion: Spalten kollabieren, linksbuendig */
  .elementor-widget-listing-products .ce-product-grid article section section .elementor-row {
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }
  .elementor-widget-listing-products .ce-product-grid article section section .elementor-row > .elementor-column {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
  .elementor-widget-listing-products .ce-product-grid .ce-product-prices {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .elementor-widget-listing-products .ce-product-grid .ce-product-price {
    font-size: 18px !important;
    font-weight: 700 !important;
  }
  .elementor-widget-listing-products .ce-product-grid .elementor-widget-product-miniature-price .elementor-widget-container {
    text-align: left !important;
  }

  /* Warenkorb-Button: kompakt, linksbuendig */
  .elementor-widget-listing-products .ce-product-grid .elementor-widget-product-miniature-add-to-cart .elementor-widget-container {
    text-align: left !important;
  }
  .elementor-widget-listing-products .ce-product-grid .elementor-widget-product-miniature-add-to-cart .elementor-button {
    width: auto !important;
    display: inline-flex !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    min-height: 0 !important;
  }
  .elementor-widget-listing-products .ce-product-grid .elementor-widget-product-miniature-add-to-cart { margin-top: 2px; }

  /* Wunschlisten-Herz als Overlay oben links auf dem Bild */
  .elementor-widget-listing-products .ce-product-grid article > .ms-ce-wish {
    position: absolute !important;
    top: 4px;
    left: 4px;
    z-index: 5;
    transform: scale(.85);
    transform-origin: top left;
  }

  /* Kopfbereich straffen */
  h1.elementor-heading-title.ce-display-small {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  .ce-breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 12px !important;
    scrollbar-width: none;
  }
  .ce-breadcrumb::-webkit-scrollbar { display: none; }
  .ce-breadcrumb__item { flex: 0 0 auto; }
}

/* ===== v3-Korrekturen (2026-08-13 Nacht): Angleichung ans freigegebene
   Mockup (https://claude.ai/code/artifact/1a12fae2-...). Problem war das
   Panel-Design der Textsektion (padding 24px, bg weiss, radius 12px) und
   der Button unter statt neben dem Preis. ===== */
@media (max-width: 575px) {
  /* Karte = eine durchgehende weisse Zeile */
  .elementor-widget-listing-products .products.ce-product-grid { background: #fff; }
  .elementor-widget-listing-products .ce-product-grid > * {
    background: #fff;
    padding: 10px 12px;
    margin: 0;
  }
  /* Panel-Look der Textsektion entfernen */
  .elementor-widget-listing-products .ce-product-grid article > section {
    margin: 0 !important;
  }
  .elementor-widget-listing-products .ce-product-grid article > section:nth-of-type(2),
  .elementor-widget-listing-products .ce-product-grid article > section:nth-of-type(2) .elementor-container {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  /* Bildsektion (Swipe) oben ausrichten, Herz liegt dann auf dem Bild */
  .elementor-widget-listing-products .ce-product-grid article > section:nth-of-type(1) {
    align-self: start;
    background: transparent !important;
    padding: 0 !important;
  }
  .elementor-widget-listing-products .ce-product-grid article > .ms-ce-wish {
    top: 14px;
    left: 14px;
  }
  /* Widget-Eigenabstaende neutralisieren (Abstand kommt nur vom 4px-Gap) */
  .elementor-widget-listing-products .ce-product-grid article .elementor-widget { margin-bottom: 0 !important; }
  /* Preis + Warenkorb-Button in EINER Zeile (Preis links, Button rechts) */
  .elementor-widget-listing-products .ce-product-grid article section section .elementor-row {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
  }
  .elementor-widget-listing-products .ce-product-grid article section section .elementor-row > .elementor-column:first-child {
    flex: 1 1 auto !important;
    min-width: 0;
  }
  .elementor-widget-listing-products .ce-product-grid .ce-product-price { white-space: nowrap; }
}

/* ===== v4 (2026-08-14): Herz nach oben rechts aufs Bild (kollidierte mit
   Sale-Badge), Preise strikt links, Warenkorb-Button fix unten rechts
   in der Karte (mockup-konform), Altpreis klein. ===== */
@media (max-width: 575px) {
  .elementor-widget-listing-products .ce-product-grid article > .ms-ce-wish {
    top: 14px !important;
    left: 96px !important;
  }
  .elementor-widget-listing-products .ce-product-grid .ce-product-prices,
  .elementor-widget-listing-products .ce-product-grid .ce-product-prices * {
    text-align: left !important;
    justify-content: flex-start !important;
  }
  .elementor-widget-listing-products .ce-product-grid .ce-product-price-regular {
    font-size: 12px !important;
    display: block;
  }
  .elementor-widget-listing-products .ce-product-grid .elementor-widget-product-miniature-add-to-cart {
    position: absolute !important;
    right: 12px;
    bottom: 10px;
    margin: 0 !important;
    z-index: 4;
  }
}

/* ===== v5 (2026-08-14): Feinabgleich gegen das freigegebene Mockup.
   Gemessen mit Playwright/WebKit auf Galaxy 384x832 DPR2.8125.
   Behobene Abweichungen:
   1. Preis + Altpreis waren horizontal ZENTRIERT: das Theme setzt
      .ce-product-prices { justify-content:center } mit hoeherer
      Spezifitaet als die flex-start-Regeln aus v1/v4. Folge: Preis 50px
      eingerueckt, auf der Kursseite Kollision mit dem Warenkorb-Button.
   2. Warenkorb-Button: die v4-Regel (position:absolute) loeste gegen
      einen inneren .elementor-widget-wrap (position:relative) als
      offsetParent auf, nicht gegen die Karte. Button landete links
      NEBEN dem Preis statt unten rechts. Innere Wrapper der Textspalte
      werden jetzt static, damit <article> (position:relative) greift.
   3. Titel-h3 hatte min-height:58.8px (3 Zeilen) trotz -webkit-line-clamp:2
      (min-height schlaegt max-height) -> grosse Leerluecke unter dem Titel.
   4. Wunschlisten-Herz war 210px breit; die Box lag ueber dem Titel und
      fing dessen Klicks ab. Jetzt feste 34px-Kachel oben rechts auf dem Bild.
   5. Sale-Badge sass mittig auf dem Bild, weiss mit rotem Rand, 15.2px.
      Mockup: kompakt, rot gefuellt, weisse Schrift, oben links auf dem Bild.
   6. Breadcrumb: das innere <ol class="elementor-row"> hatte flex-wrap:wrap
      -> 3 Zeilen / 81px hoch. Jetzt einzeilig, horizontal scrollbar im <nav>.
   ===== */
@media (max-width: 575px) {

  /* --- 1) Preise strikt linksbuendig (Spezifitaet schlaegt das Theme) --- */
  body .elementor-widget-listing-products .ce-product-grid
    .elementor-widget-product-miniature-price .elementor-widget-container .ce-product-prices {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  body .elementor-widget-listing-products .ce-product-grid .ce-product-prices > * {
    margin-left: 0 !important;
    align-self: flex-start !important;
  }

  /* --- 2) Warenkorb-Button unten rechts IN der Karte --- */
  .elementor-widget-listing-products .ce-product-grid article > section:nth-of-type(2),
  .elementor-widget-listing-products .ce-product-grid article > section:nth-of-type(2)
    *:not(.elementor-widget-product-miniature-add-to-cart) {
    position: static !important;
  }
  .elementor-widget-listing-products .ce-product-grid
    .elementor-widget-product-miniature-add-to-cart {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 4 !important;
  }
  .elementor-widget-listing-products .ce-product-grid
    .elementor-widget-product-miniature-add-to-cart .elementor-widget-container {
    text-align: right !important;
  }

  /* --- 3) Titel: exakt 2 Zeilen, keine Leerluecke darunter --- */
  .elementor-widget-listing-products .ce-product-grid h3.ce-product-name {
    min-height: 0 !important;
    height: auto !important;
    max-height: 2.65em !important;
  }

  /* --- 4) Herz: 34px-Kachel oben rechts AUF dem Bild (Bildspalte = 122px,
         <article> ist der Bezugsrahmen -> left:84px = 4px Innenabstand) --- */
  .elementor-widget-listing-products .ce-product-grid article > .ms-ce-wish {
    top: 6px !important;
    left: 84px !important;
    right: auto !important;
    bottom: auto !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    max-width: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: #fff !important;
    z-index: 5 !important;
  }

  /* --- 5) Sale-Badge kompakt oben links auf dem Bild --- */
  .elementor-widget-listing-products .ce-product-grid .ce-product-badges {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 6 !important;
  }
  .elementor-widget-listing-products .ce-product-grid .ce-product-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    padding: 2px 6px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #e2001a !important;
    color: #fff !important;
    white-space: nowrap !important;
  }

  /* --- 6) Breadcrumb einzeilig (nav hat bereits overflow-x:auto) --- */
  .ce-breadcrumb ol,
  .ce-breadcrumb > ol.elementor-row {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  .ce-breadcrumb li,
  .ce-breadcrumb .ce-breadcrumb__item {
    flex: 0 0 auto !important;
  }
  .ce-breadcrumb a,
  .ce-breadcrumb li,
  .ce-breadcrumb span {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}

/* ===== v6 (2026-08-14): Korrektur einer v5-Nebenwirkung + Restabgleich.
   1. REGRESSION aus v5: die Blanko-Regel
        article > section:nth-of-type(2) *:not(...) { position: static }
      hat auch die Screen-Reader-Labels entpositioniert. Auf der Kursseite
      wurde dadurch "Verkaufspreis:" sichtbar und durchgestrichen neben
      dem Altpreis dargestellt. Hier wird das sr-only-Muster explizit
      wiederhergestellt (unabhaengig von der Theme-Definition).
   2. Kurstermin laut Mockup fett und braun.
   3. Herz mit feiner Kontur wie im Mockup (weisser Kreis, Hairline).
   ===== */
@media (max-width: 575px) {

  /* --- 1) Screen-Reader-Labels wieder unsichtbar --- */
  .elementor-widget-listing-products .ce-product-grid .screen-reader-text,
  .elementor-widget-listing-products .ce-product-grid .sr-only,
  .elementor-widget-listing-products .ce-product-grid .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }

  /* --- 2) Kurstermin: fett & braun --- */
  .elementor-widget-listing-products .ce-product-grid .elementor-widget-course_event,
  .elementor-widget-listing-products .ce-product-grid .elementor-widget-course_event * {
    font-weight: 600 !important;
    color: #5d3d1e !important;
  }

  /* --- 3) Herz: Hairline-Kontur --- */
  .elementor-widget-listing-products .ce-product-grid article > .ms-ce-wish {
    border: 1px solid #e3d5c0 !important;
  }
}

/* ===== v7 (2026-08-14): Nachtrag zu v6 – Spezifitaets-Korrektur.
   v6 hat die Screen-Reader-Labels zwar auf 1x1px/clip gesetzt, aber
   position:absolute nicht durchgesetzt: die v5-Blankoregel
     .elementor-widget-listing-products .ce-product-grid article
     > section:nth-of-type(2) *:not(...)   -> (0,4,2)
   schlaegt die v6-Regel (0,3,0). Ohne position:absolute ist das Label
   display:inline, damit greifen width/height/clip nicht und
   "Verkaufspreis:" stand sichtbar durchgestrichen neben dem Altpreis.
   Diese Regel liegt mit (0,4,3) darueber. ===== */
@media (max-width: 575px) {
  body .elementor-widget-listing-products .ce-product-grid
    article > section:nth-of-type(2) .screen-reader-text,
  body .elementor-widget-listing-products .ce-product-grid
    article > section:nth-of-type(2) .sr-only,
  body .elementor-widget-listing-products .ce-product-grid
    article > section:nth-of-type(2) .visually-hidden {
    position: absolute !important;
    display: block !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }
}

/* ===== v8 / Datei "i" (2026-08-14): Phase-2-Kompakttexte + Mockup-Kosmetik.
   Begleitet die ms_ce_widgets-Aenderungen vom 14.08.2026:
   - Stock-Widget rendert zusaetzlich <span class="mds-stock-short">
     («20+ an Lager»), Kurs-Termin zusaetzlich .mds-event-compact
     («Do. 27. Aug · 13:30–18:00» + Kalender-SVG als letztes Kind von
     .mds-event). Beide sind inline mit style="display:none" versteckt;
     NUR die folgenden <576px-Regeln machen sie sichtbar und verstecken
     dafuer die Langform. Desktop/Tablet bleiben dadurch unveraendert,
     egal in welcher Reihenfolge PHP/CSS deployt werden.
   - Kosmetik laut Handoff 7.3: Titel in CI-Braun statt Fast-Schwarz,
     Karte kompakter (vertikales Padding 10 -> 8px, Ziel ~145px).
   ===== */
@media (max-width: 575px) {

  /* --- Bestandszeile: «20+ an Lager» statt Langform --- */
  .elementor-widget-listing-products .ce-product-grid .mds-extra .mds-stock-long {
    display: none !important;
  }
  .elementor-widget-listing-products .ce-product-grid .mds-extra .mds-stock-short {
    display: inline !important;
  }

  /* --- Kurs-Termin einzeilig kompakt mit Kalender-Icon --- */
  .elementor-widget-listing-products .ce-product-grid
    .elementor-widget-course_event .mds-event > :not(.mds-event-compact) {
    display: none !important;
  }
  .elementor-widget-listing-products .ce-product-grid
    .elementor-widget-course_event .mds-event-compact {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    white-space: nowrap;
  }
  .elementor-widget-listing-products .ce-product-grid .mds-event-compact-ico {
    flex: 0 0 auto;
  }
  .elementor-widget-listing-products .ce-product-grid .mds-event-compact-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- Titel in CI-Braun (Mockup) statt Fast-Schwarz --- */
  .elementor-widget-listing-products .ce-product-grid h3.ce-product-name,
  .elementor-widget-listing-products .ce-product-grid h3.ce-product-name a {
    color: #754c2e !important;
  }

  /* --- Karte ~145px statt 153px: vertikales Padding 10 -> 8px --- */
  .elementor-widget-listing-products .ce-product-grid > * {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* ===== v11 / Datei "n" (2026-08-14 nachmittags): Herz auf Mobile ganz
   entfernt (Entscheid Thomas — es machte den Warenkorb-Button zu klein).
   Ersetzt die Herz-neben-Button-Varianten v9/v10 (Dateien j–m): der
   Warenkorb-Button steht wieder unten rechts in der Ecke mit normalem
   Padding (v1/v5-Stand, Icon-only ~45px). Die Wunschliste bleibt auf
   Produktseite & Co. verfuegbar — nur die Listenkarten <576px zeigen
   kein Herz mehr. ===== */
@media (max-width: 575px) {
  .elementor-widget-listing-products .ce-product-grid article > .ms-ce-wish {
    display: none !important;
  }
}

/* ===== v12 (2026-08-14, gleicher Deploy wie v11): Preis etwas kleiner
   (18 -> 16px, bleibt fett), damit der Warenkorb-Button rechts Luft hat
   und nie in den Preis laeuft. Dazu Backstop: Preis-Container endet vor
   dem Button (45px + Abstand), Extrempreise duerfen umbrechen statt zu
   ueberlappen (v3-nowrap wird hier bewusst aufgehoben). ===== */
@media (max-width: 575px) {
  .elementor-widget-listing-products .ce-product-grid .ce-product-price {
    font-size: 16px !important;
    white-space: normal !important;
  }
  .elementor-widget-listing-products .ce-product-grid
    .elementor-widget-product-miniature-price .elementor-widget-container {
    max-width: calc(100% - 53px);
  }
}

/* =========================================================================
   Hinweis 2026-08-17: Die hier zwischenzeitlich stehende Regel, die das
   "Ausgebucht"-Badge auf Kurskarten unter 576px ausgeblendet hat, ist
   entfallen. Entscheid Rebecca: das Badge soll auf ALLEN Breiten weg -
   deshalb steht die Regel jetzt breakpoint-frei in ms-produktkarten.css.
   Die Verfuegbarkeitszeile ("Kurs findet statt: ausgebucht") bleibt.
   ========================================================================= */