/**
 * Produktkacheln in den Loop-Karussells der Produktseite
 * ("Passendes Zubehoer" = Upsells, "Aehnliche Produkte" = Related).
 *
 * Ziel: ruhige, gleich hohe Kacheln. Bild, Titel, Preis und der Button "Zum
 * Produkt" liegen in allen Kacheln auf derselben Hoehe - unabhaengig davon, wie
 * lang der Produktname ist und wie viele Stichpunkte aus [sharp_extra_desc]
 * kommen. Vorher richtete sich alles nach der Textlaenge, dadurch sprangen die
 * Kacheln beim Durchblaettern.
 *
 * Wichtig zur Spezifitaet: Elementor schreibt die CSS der Loop-Item-Vorlage
 * (Selektoren wie ".elementor-5337 .elementor-element.elementor-element-XXXX")
 * INLINE in den Body, also NACH dieser Datei. Gleiche Spezifitaet verliert
 * deshalb. Die Selektoren hier sind bewusst eine Klasse hoeher gebaut
 * (body.single-product + Karussell + .e-loop-item + Zielklasse).
 *
 * Farben bleiben absichtlich unberuehrt: Titel orange (globals/primary),
 * Button mintgruen (globals/accent), Preis grau (globals/text).
 */

body.single-product .elementor-widget-loop-carousel {

    --sh-tile-bg: #fff;
    --sh-tile-border-color: #e6e6e6;
    --sh-tile-radius: 12px;
    --sh-tile-padding: 14px;
    --sh-tile-gap: 12px;
    --sh-tile-shadow: 0 2px 8px rgba(0, 0, 0, .06);

    --sh-tile-image-ratio: 4 / 3;
    --sh-tile-image-radius: 10px;

    /* Titel bekommt eine feste Hoehe von X Zeilen. Laengere Namen werden
       abgeschnitten, dafuer starten Preis und Stichpunkte ueberall gleich.
       Auf 3 stellen, wenn lieber mehr Text als eine exakte Kante gewuenscht ist. */
    --sh-tile-title-lines: 2;
    --sh-tile-title-size: 19px;
    --sh-tile-title-line-height: 1.25;

    --sh-tile-price-size: 24px;
    --sh-tile-price-prefix-size: 15px;
    /* Abstand zwischen "ab" und dem Betrag */
    --sh-tile-price-gap: 5px;

    --sh-tile-desc-size: 14px;
    --sh-tile-desc-line-height: 1.5;

    /* Wie weit die Pfeile unter die Kacheln rutschen (zusaetzlich zu den 15px
       aus der Elementor-Vorlage) */
    --sh-carousel-arrow-drop: 12px;
}

/* ---------------------------------------------------------------------------
   0. Pfeile etwas tiefer setzen, auf die Hoehe der Punkte.
   Elementor rechnet: top = align + position - caption-spacing, danach
   translateY(-100%). Die Vorlage liefert position:15px, hier kommt der Versatz
   oben drauf. Ohne die zusaetzliche .elementor-element-Klasse waere die
   Spezifitaet zu knapp gegen ".elementor-13038 .elementor-element-e1d0a02".
   --------------------------------------------------------------------------- */

body.single-product .elementor-widget-loop-carousel.elementor-element {
    --arrow-prev-top-position: calc(15px + var(--sh-carousel-arrow-drop));
    --arrow-next-top-position: calc(15px + var(--sh-carousel-arrow-drop));
}

/* ---------------------------------------------------------------------------
   1. Alle Slides gleich hoch, die Kachel fuellt ihren Slide vollstaendig aus
   --------------------------------------------------------------------------- */

body.single-product .elementor-widget-loop-carousel .swiper-wrapper {
    align-items: stretch;
}

body.single-product .elementor-widget-loop-carousel .e-loop-item {
    height: auto;
    display: flex;
}

/* ---------------------------------------------------------------------------
   2. Die Kachel selbst: Rahmen, Radius, Innenabstand, Spaltenlayout.
   Gesteuert ueber Elementors eigene Container-Variablen, damit kein !important
   noetig ist (--border-* wird von .e-con:before gezeichnet).
   --------------------------------------------------------------------------- */

body.single-product .elementor-widget-loop-carousel .e-loop-item > .e-con.e-flex {
    --height: 100%;
    --width: 100%;

    --padding-top: var(--sh-tile-padding);
    --padding-right: var(--sh-tile-padding);
    --padding-bottom: var(--sh-tile-padding);
    --padding-left: var(--sh-tile-padding);

    --row-gap: var(--sh-tile-gap);
    --column-gap: var(--sh-tile-gap);

    --border-style: solid;
    --border-color: var(--sh-tile-border-color);
    --border-top-width: 1px;
    --border-right-width: 1px;
    --border-bottom-width: 1px;
    --border-left-width: 1px;
    --border-radius: var(--sh-tile-radius);

    background-color: var(--sh-tile-bg);
    box-shadow: var(--sh-tile-shadow);
}

/* ---------------------------------------------------------------------------
   3. Bild: immer dasselbe Format.
   Vorher stand nur height:240px ohne Breite und ohne object-fit - jedes Foto
   kam mit seinem eigenen Seitenverhaeltnis heraus und war unterschiedlich
   breit. Das war die Hauptquelle fuer das Springen.
   --------------------------------------------------------------------------- */

body.single-product .elementor-widget-loop-carousel .e-loop-item .elementor-widget-theme-post-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--sh-tile-image-ratio);
    object-fit: cover;
    border-radius: var(--sh-tile-image-radius);
}

/* ---------------------------------------------------------------------------
   4. Titel: feste Zeilenzahl, damit der Preis darunter ueberall gleich sitzt.
   Der Titel darf sich NICHT mehr dehnen (--flex-grow der Vorlage), sonst
   verteilt er die freie Hoehe und schiebt den Rest nach unten.
   --------------------------------------------------------------------------- */

body.single-product .elementor-widget-loop-carousel .e-loop-item .elementor-widget.elementor-widget-theme-post-title {
    --flex-grow: 0;
    --flex-shrink: 0;
}

body.single-product .elementor-widget-loop-carousel .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title {
    display: -webkit-box;
    -webkit-line-clamp: var(--sh-tile-title-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--sh-tile-title-size);
    line-height: var(--sh-tile-title-line-height);
    /* feste Hoehe = Zeilenzahl x Zeilenhoehe: auch einzeilige Titel belegen
       zwei Zeilen, dadurch fluchten die Preise */
    height: calc(var(--sh-tile-title-lines) * var(--sh-tile-title-line-height) * 1em);
}

/* ---------------------------------------------------------------------------
   5. Preis: eine Groesse fuer alle Faelle.
   style.css setzt fuer .single-product global 30px !important, Angebotspreise
   sogar 38px - in der Kachel sah damit jede zweite Karte anders aus. Hier
   deshalb bewusst mit !important gegengesteuert. Farben bleiben unangetastet.
   --------------------------------------------------------------------------- */

/* style.css:389 macht aus .single-product .price einen Flex-Container. Damit
   verschwindet das Leerzeichen zwischen dem Textknoten "ab" und dem Betrag -
   deshalb hier ein gap statt der frueheren margin-left-Kruecke. baseline, damit
   das kleine "ab" auf der Grundlinie des grossen Betrags sitzt. */
body.single-product .elementor-widget-loop-carousel .e-loop-item p.price {
    margin: 0;
    font-size: var(--sh-tile-price-prefix-size) !important;
    line-height: 1.3;
    align-items: baseline;
    column-gap: var(--sh-tile-price-gap);
    row-gap: 2px;
}

body.single-product .elementor-widget-loop-carousel .e-loop-item p.price .woocommerce-Price-amount,
body.single-product .elementor-widget-loop-carousel .e-loop-item p.price .woocommerce-Price-amount bdi,
body.single-product .elementor-widget-loop-carousel .e-loop-item p.price .woocommerce-Price-amount span,
body.single-product .elementor-widget-loop-carousel .e-loop-item p.price ins bdi,
body.single-product .elementor-widget-loop-carousel .e-loop-item p.price ins bdi span {
    font-size: var(--sh-tile-price-size) !important;
}

/* Nur die inneren Spannen entkleben (das Waehrungszeichen bringt sein eigenes
     mit); der Abstand nach "ab" kommt jetzt aus dem gap. */
body.single-product .elementor-widget-loop-carousel .e-loop-item p.price .woocommerce-Price-amount bdi,
body.single-product .elementor-widget-loop-carousel .e-loop-item p.price .woocommerce-Price-amount span {
    margin-left: 0 !important;
}

body.single-product .elementor-widget-loop-carousel .e-loop-item p.price ins {
    width: auto;
}

body.single-product .elementor-widget-loop-carousel .e-loop-item p.price del,
body.single-product .elementor-widget-loop-carousel .e-loop-item p.price del * {
    font-size: 14px !important;
}

/* ---------------------------------------------------------------------------
   6. Stichpunkte aus [sharp_extra_desc]: dieser Block dehnt sich und schiebt
   den Button nach unten. Kacheln ohne Stichpunkte behalten den Button so
   trotzdem auf derselben Hoehe.
   --------------------------------------------------------------------------- */

body.single-product .elementor-widget-loop-carousel .e-loop-item .elementor-widget.elementor-widget-shortcode {
    --flex-grow: 1;
    --flex-shrink: 1;
}

body.single-product .elementor-widget-loop-carousel .e-loop-item .sharp-extra-desc {
    font-size: var(--sh-tile-desc-size);
    line-height: var(--sh-tile-desc-line-height);
}

body.single-product .elementor-widget-loop-carousel .e-loop-item .sharp-extra-desc ul {
    margin: 0;
    padding-left: 1.1em;
    list-style: disc;
}

body.single-product .elementor-widget-loop-carousel .e-loop-item .sharp-extra-desc li {
    margin-bottom: 2px;
}

body.single-product .elementor-widget-loop-carousel .e-loop-item .sharp-extra-desc p {
    margin: 0 0 6px;
}

body.single-product .elementor-widget-loop-carousel .e-loop-item .sharp-extra-desc > *:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   7. Button "Zum Produkt": immer unten, immer volle Breite.
   Farben (mintgruen) kommen weiter aus der Elementor-Vorlage.
   --------------------------------------------------------------------------- */

body.single-product .elementor-widget-loop-carousel .e-loop-item .elementor-widget.elementor-widget-button {
    --flex-grow: 0;
    --flex-shrink: 0;
    margin-block-start: auto;
}

body.single-product .elementor-widget-loop-carousel .e-loop-item .elementor-widget-button .elementor-button {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   8. Kleinere Viewports: weniger Kacheln, etwas knapperes Innenleben
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    body.single-product .elementor-widget-loop-carousel {
        --sh-tile-title-size: 18px;
        --sh-tile-padding: 12px;
    }
}

@media (max-width: 767px) {
    body.single-product .elementor-widget-loop-carousel {
        --sh-tile-title-size: 17px;
        --sh-tile-padding: 10px;
        --sh-tile-gap: 10px;
        --sh-tile-price-size: 22px;
        --sh-tile-desc-size: 13px;
    }
}