/* ============================================================================
   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;
    }
}

/* 10. Wunschliste/Vergleichen ausserhalb der Shopseiten (Fix 10.10.2026): Die Pillen-Regeln in badges.css
   haengen an body.woocommerce. Auf Seiten ohne diese Klasse (Kontakt, Magazin, Wunschliste) stand deshalb
   der Text "Zur Wunschliste hinzufuegen" ueber dem Bild. Dieselben Regeln fuer .mt-footer-rv. */
.mt-footer-rv .product .hover-area .action-buttons {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    width: auto !important;
    justify-content: flex-start !important;
}
/* Pill = 32px Kreis, Text unsichtbar */
.mt-footer-rv .product .hover-area .action-buttons > * {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.96) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
    border: none !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    color: #555 !important;
    font-size: 0 !important;
    line-height: 32px !important;
    overflow: hidden !important;
    text-indent: 0 !important;
    white-space: nowrap;
}
.mt-footer-rv .product .hover-area .action-buttons > * a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    color: inherit !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    font-size: 0 !important;
    text-indent: 0 !important;
}
.mt-footer-rv .product .hover-area .action-buttons i,
.mt-footer-rv .product .hover-area .action-buttons svg {
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
.mt-footer-rv .product .hover-area .action-buttons span,
.mt-footer-rv .product .hover-area .action-buttons .label,
.mt-footer-rv .product .hover-area .action-buttons .compare-text {
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    width: 0 !important;
    display: inline-block !important;
}
/* Wishlist: Unicode-Herz als Icon (font-unabhaengig) */
.mt-footer-rv .product .hover-area .yith-wcwl-add-to-wishlist::before {
    content: "\2665" !important;
    font-family: -apple-system, "Segoe UI Symbol", "Apple Color Emoji", sans-serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: inherit !important;
    display: inline-block;
}
.mt-footer-rv .product .hover-area .yith-wcwl-add-to-wishlist img,
.mt-footer-rv .product .hover-area .yith-wcwl-add-to-wishlist svg {
    display: none !important;
}
/* Compare: Unicode Swap-Pfeile */
.mt-footer-rv .product .hover-area a.compare::before {
    content: "\21C4" !important;
    font-family: -apple-system, "Segoe UI Symbol", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1 !important;
    color: inherit !important;
}
.mt-footer-rv .product .hover-area .action-buttons > *:hover {
    background: #823a2d !important;
    color: #fff !important;
}