/* ========================================
   OwnMag2Ext_ProductBadges: Bild-Overlay-Badges im Kategorie-Grid/-Liste
   und auf der Suchergebnisseite (ersetzen die Porto-Textlabels "Sale"/"New").
   Positionierungs-Anker ist der Foto-Wrapper .product-item-photo (siehe
   list.phtml), NICHT .product-item-info - Badges sollen relativ zum Bild
   sitzen, nicht zur ganzen Karte.
   z-index: ueber Bild/Hover-Bild (position static/absolute ohne eigenen
   z-index, siehe category-listing.css Z. 66-79) und ueber dem Hover-Actions-
   Overlay (z-index 1, Z. 156-161 category-listing.css), aber pointer-events:
   none, damit Kachel-Klick und Add-to-Cart-Hover ungestoert durchgreifen.
   FALLE: category-listing.css scoped Positionierungs-Regeln zusaetzlich auf
   .products-grid (Grid-Ansicht) - .product-item-photo existiert aber auch
   in .products-list (Listenansicht). Deshalb hier NICHT auf .products-grid
   einschraenken, sonst kein Positionierungs-Anker in der Listenansicht.
   Issue 04: .catalog-product-view (PDP Related/Upsell, items.phtml) und
   .cms-home (Startseiten-Carousel, owl_list.phtml) ergaenzt - beide rendern
   dasselbe Badges-Partial, brauchen also denselben relativen Anker. In
   owl_list.phtml ist der Foto-Wrapper ein <div class="... product-item-photo
   ...">, kein <a> - der Selektor matcht klassenbasiert, das ist unerheblich.
   WICHTIG: .o2e-badges wird links UND rechts (bzw. bottom-Varianten) auf 6px
   gesetzt, spannt also volle Kachelbreite (- 12px) auf. Grund: badges.phtml
   gibt dem <img> inline width:{width_percent}% mit - das ist relativ zur
   Breite DIESES Containers, nicht zur Kachel. Ohne definierte Containerbreite
   waere der Container (position:absolute, keine width) shrink-to-fit auf die
   native Bildbreite, und die %-Angabe des Admins liefe ins Leere (AC "%-Breite
   wirkt sichtbar" verfehlt). NICHT auf auto-width "wegoptimieren" - akzeptierte
   Nebenwirkung: zwei gleichzeitig belegte Ecken derselben Hoehe ueberlappen sich
   als transparente, pointer-events:none Container (erst visuell relevant bei
   >50% Breite je Badge).
   Konto-Seiten (Gekaufte Artikel, Merkzettel): kein Body-Klassen-Selektor, weil
   der Merkzettel (Gast-Endpunkt) per AJAX rendert. Stattdessen setzt das Template
   die Host-Klasse .o2e-badges-host auf genau das Element mit Bildbreite (der
   Journal-Bildlink ist per fit-content so breit wie das Bild). Der Merkzettel
   (Issue 02) setzt nur diese Klasse und erbt Anker UND Mindestbreite.
   min-width 30px: das Inline-Style von badges.phtml (width:N%;max-width:Mpx)
   setzt kein min-width; min-width schlaegt max-width laut CSS - ein kleines Bild
   (Liste) macht das Badge also nie unlesbar klein, der Admin-Max-px bleibt
   Obergrenze, solange er ueber 30px liegt.
   ======================================== */
:is(.catalog-category-view, .catalogsearch-result-index) .product-item-photo {
    position: relative;
}

.o2e-badges-host {
    position: relative;
}

.o2e-badges-host .o2e-badges__image {
    min-width: 30px;
}

.o2e-badges {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    z-index: 4;
}

.o2e-badges img {
    display: block;
    height: auto;
}

.o2e-badges--top-left {
    top: 6px;
    left: 6px;
    right: 6px;
    align-items: flex-start;
}

.o2e-badges--top-right {
    top: 6px;
    left: 6px;
    right: 6px;
    align-items: flex-end;
}

.o2e-badges--bottom-left {
    bottom: 6px;
    left: 6px;
    right: 6px;
    flex-direction: column-reverse;
    align-items: flex-start;
}

.o2e-badges--bottom-right {
    bottom: 6px;
    left: 6px;
    right: 6px;
    flex-direction: column-reverse;
    align-items: flex-end;
}