/* ============================================================================
   Startseite, Abschnitt "Beliebte Produkte" / "Zuletzt angesehen"
   (section.mt-recently-viewed, Vorlage template-homepage-v3.php Zeile 530 ff.)
   Agent S, 28.09.2026

   Ursache: mt_render_product_carousel() (functions.php Zeile 2583 ff.) wickelt
   jede Karte in <div class="product-item">, ohne ul.products. Electro versteckt
   den Kartenrumpf nur ueber ".products > .product .product-loop-body" und
   ".owl-item > .product .product-loop-body" (electro/style.css). Hier steht
   aber .owl-item > .product-item > li.product, keine der beiden Regeln greift:
   Sterne, Kurzbeschreibung und zweite Kategoriezeile werden sichtbar, die
   Karten werden ungleich hoch, Preis und Knopf wandern.

   Dieselbe Huellenfalle steckt im Fuss-Carousel "Beliebte Produkte" /
   "Zuletzt gesehen" auf allen anderen Seiten (functions.php Zeile 1863,
   section.mt-footer-rv, Hook electro_before_footer_v2). Darum gilt die Datei
   fuer genau diese zwei Abschnitte: :is(.mt-homepage-v3 .mt-recently-viewed,
   .mt-footer-rv). Alle echten Raster (ul.products auf Startseite, Kategorie,
   Suche) bleiben unberuehrt. Spezifitaet bewusst hoeher als badges.css (dort 5 Klassen + li),
   hier 7 Klassen + li, damit auch dessen !important-Regeln ueberstimmt werden.
   Abstaende in Fibonacci: 8, 13, 21, 34.
   ============================================================================ */

/* 1. Buehne als Flex-Zeile: alle Karten einer Reihe gleich hoch */
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .owl-stage {
    display: flex;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .owl-item {
    display: flex;
    float: none;
    flex: 0 0 auto;
    height: auto;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item {
    display: flex;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
}

/* 2. Karte: Rahmen = 1px Flaeche in Linienfarbe, innen weiss, beide abgeschraegt (clip-path 8px, Hausregel
   wie empfehlungen.css, kein border-radius). Rumpf (Sterne, Kurztext, SKU, zweiter Titel) weg. */
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 !important;
    padding: 1px !important;
    box-sizing: border-box;
    background: #e6e6e6;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
    overflow: hidden;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product:hover {
    background: #b9b9b9;
    box-shadow: none !important;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product > .product-outer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 13px !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: #fff;
    position: relative !important;
    overflow: hidden;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product > .product-outer > .product-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .product-loop-body {
    display: none !important;
}

/* 3. Kopf: Bild zuerst (1:1), darunter Titel auf genau 2 Zeilen, darunter EINE Kategoriezeile.
   Markup: span.loop-product-categories, dann a.woocommerce-loop-product__link (h2 + div.product-thumbnail).
   Der Link wird zur umgedrehten Spalte (Bild oben, Titel unten) und vor die Kategoriezeile sortiert. */
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .product-loop-header {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .product-loop-header > .woocommerce-loop-product__link {
    display: flex;
    flex-direction: column-reverse;
    order: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .product-loop-header > .loop-product-categories {
    order: 2;
    display: block !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 21px !important;
    line-height: 21px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .product-loop-header > .loop-product-categories a {
    color: inherit;
    display: block !important; /* ein Link je Zeile, Block bleibt in der Karte; das Skript laesst nur die tiefste Kategorie stehen */
    float: none !important;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .product-loop-header .product-thumbnail {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    position: relative;
    margin: 0 !important;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .product-loop-header .product-thumbnail img.wp-post-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .product-loop-header .woocommerce-loop-product__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3.9em !important; /* 3 Zeilen bei line-height 1.3; der volle Name steht im title des Karten-Links */
    line-height: 1.3 !important;
    font-size: 14px !important;
    font-weight: 600;
    color: #1a1a1a !important;
    margin: 13px 0 8px !important;
    padding: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
}

/* 4. Rabatt-Badge oben links am Bild, verankert an der Innenflaeche (product-outer, 13px Innenabstand), abgeschraegt */
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .onsale {
    position: absolute !important;
    top: 13px !important;
    left: 13px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 4;
    opacity: 1 !important;
    border-radius: 0 !important;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .onsale ~ .onsale {
    top: 47px !important; /* 13 + 34 */
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product:hover .onsale {
    opacity: 1 !important;
}

/* 5. Wunschliste/Vergleichen (Electro hover-area): unter 1200px weg (Touch, sonst liegen die Pillen
   dauerhaft ueber dem Bild), ab 1200px oben rechts im Bild und nur beim Ueberfahren sichtbar */
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .hover-area {
    display: none !important;
    position: absolute !important;
    top: 13px !important;
    right: 13px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 4;
}

/* 6. Fuss: nach unten geschoben, Preis, Lagerhinweis, Knopf in voller Breite */
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .product-loop-footer {
    margin-top: auto !important;
    padding-top: 13px !important;
    position: static !important;
}
/* Drei feste Zeilen in JEDER Karte: 1 Lagerhinweis (21px, auch wenn leer), 2 Preis, 3 Knopf.
   So stehen Preis und Knopf in allen Karten auf derselben Hoehe, mit und ohne Lagerhinweis. */
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .price-add-to-cart {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 21px 44px auto; /* Lagerhinweis 21, Preis 27 + Streichpreis 17 = 44, Knopf */
    row-gap: 8px;
    align-items: start;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .price-add-to-cart .price {
    grid-row: 2;
    grid-column: 1;
    display: block;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start;
    overflow: hidden;
    min-width: 0;
    font-size: 21px !important; /* Electro: .single-product .price 2.5em (35px) auf Produktseiten, hier fest */
    line-height: 27px !important;
    font-weight: 700;
    color: #1a1a1a !important;
    white-space: nowrap;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .price-add-to-cart .price .electro-price, :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .price-add-to-cart .price > .amount {
    display: block;
    font-size: 21px !important;
    line-height: 27px !important;
    white-space: nowrap;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .price-add-to-cart .price ins, :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .price-add-to-cart .price ins .amount {
    display: block;
    font-size: 21px !important;
    line-height: 27px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: #1a1a1a !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .price-add-to-cart .price del, :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .price-add-to-cart .price del .amount {
    display: block;
    font-size: 13px !important;
    line-height: 17px !important;
    font-weight: 400 !important;
    color: #6c757d !important;
    text-decoration: line-through;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .price-add-to-cart .price .woocommerce-price-suffix {
    display: none !important;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .price-add-to-cart .add-to-cart-wrap {
    grid-row: 3;
    grid-column: 1;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .price-add-to-cart .mt-stock-info {
    grid-row: 1;
    grid-column: 1;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .price-add-to-cart .screen-reader-text {
    position: absolute !important;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .mt-stock-info {
    position: static !important;
    display: block !important;
    order: 0 !important;
    margin: 0 !important;
    font-size: 12px;
    line-height: 21px;
    color: #b3261e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .add-to-cart-wrap {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}
/* Knopf in Hausfarbe (#823a2d, Hover #6e3125), Hoehe 34px unter 1024px und 55px ab 1024px, abgeschraegt 8px */
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .add-to-cart-wrap .button {
    display: block !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px;
    max-height: none !important;
    box-sizing: border-box;
    text-align: center;
    text-indent: 0 !important;
    float: none !important;
    padding: 0 13px !important;
    line-height: 34px !important;
    font-size: 13px !important;
    font-weight: 700;
    color: #fff !important;
    background: #823a2d !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
    transition: background 0.2s;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .add-to-cart-wrap .button:hover,
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .add-to-cart-wrap .button:focus {
    background: #6e3125 !important;
    border-color: #6e3125 !important;
    color: #fff !important;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .add-to-cart-wrap .button::before {
    display: none !important;
    content: none !important;
}
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .add-to-cart-wrap .button.added,
:is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .add-to-cart-wrap .added_to_cart {
    display: block !important;
    width: 100%;
    text-align: center;
}

/* 7. Ab 1024px: Knopf 55px (Hausregel empfehlungen.css) */
@media (min-width: 1024px) {
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .add-to-cart-wrap .button {
        height: 55px !important;
        min-height: 55px;
        line-height: 55px !important;
    }
}
/* 8. Beim Ueberfahren: keine Ausdehnung (wie in badges.css entkoppelt), nur dunklerer Rahmen; Pillen erscheinen */
@media (min-width: 1200px) {
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product:hover .hover-area,
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product.hover .hover-area,
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product:focus-within .hover-area {
        display: block !important;
    }
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product:hover .product-inner,
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product.hover .product-inner {
        position: static !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        box-shadow: none !important;
    }
}

/* 9. Schmale Breiten: engerer Innenabstand, kleinere Schrift */
@media (max-width: 767px) {
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item {
        padding: 0 5px;
    }
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product > .product-outer {
        padding: 8px !important;
    }
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .onsale,
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .hover-area {
        top: 8px !important;
    }
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .onsale {
        left: 8px !important;
    }
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .hover-area {
        right: 8px !important;
    }
    :is(.mt-homepage-v3 .mt-recently-viewed, .mt-footer-rv) .owl-carousel .product-item > li.product .product-loop-header .woocommerce-loop-product__title {
        font-size: 13px !important;
    }
}