/* ========================================
   OwnMag2Ext_Merkzettel - Markenoptik (Porto-Child)
   Das Modul (OwnMag2Ext_Merkzettel::css/merkzettel.css) liefert nur Struktur und Zustaende;
   Farben, Karten- und Kopfzeilen-Look kommen von hier. Alles ist an die Merkzettel-Klassen
   (.o2e-merkzettel*, .o2e-merkzettel-heart*, .o2e-merkzettel-header*, .o2e-merkzettel-hint*)
   gebunden - keine globalen Porto-Overrides. !important: Porto stylt <button>/<a> global
   und laedt spaeter.
   ======================================== */

/* ---------- Herz (alle Orte) ----------
   Das Modul-CSS laedt NACH diesem Theme-Stylesheet; gleiche Spezifitaet = Modul gewinnt. Daher
   Element-Praefix (button.) bzw. Wurzelklasse (.o2e-merkzettel) vor den Regeln. */
button.o2e-merkzettel-heart {
    color: #6b6b6b !important;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
button.o2e-merkzettel-heart:hover,
button.o2e-merkzettel-heart:focus-visible,
button.o2e-merkzettel-heart.is-active {
    color: #b3263e !important;
}
button.o2e-merkzettel-heart:focus-visible {
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 16%, transparent) !important;
    outline: 0;
}

/* ---------- Kachel-Herz: immer sichtbar, oben rechts am Bild (Kategorie, Karussells, Hover-Huelle) ----------
   Porto blendet das Overlay (.product-item-inner.tb-hover-content) nur beim Hover ein (opacity 0). Das Overlay
   bleibt deshalb dauerhaft sichtbar; alles ausser dem Herz (Warenkorb-Knopf usw.) wird weiter nur beim Hover
   bzw. Tastaturfokus eingeblendet - Portos Kachelverhalten bleibt unveraendert. */
.product-item-inner.tb-hover-content:has([data-o2e-merkzettel-heart]) {
    opacity: 1 !important;
}
.product-item-inner.tb-hover-content:has([data-o2e-merkzettel-heart]) .product-item-actions > :not([data-o2e-merkzettel-heart]) {
    opacity: 0;
    transition: opacity 0.3s;
}
.product-item-info:hover .product-item-inner.tb-hover-content:has([data-o2e-merkzettel-heart]) .product-item-actions > :not([data-o2e-merkzettel-heart]),
.product-item-inner.tb-hover-content:has([data-o2e-merkzettel-heart]):focus-within .product-item-actions > :not([data-o2e-merkzettel-heart]) {
    opacity: 1;
}
.product-item-inner.tb-hover-content .product-item-actions .o2e-merkzettel-heart,
:is(.block.related, .block.upsell, .block.crosssell) .product-item-details .product-item-actions .o2e-merkzettel-heart {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 3;
}
/* Related/Upsell/Cross-Sell: Das Herz steht dort OHNE .tb-hover-content-Huelle in .product-item-details (items.phtml).
   .product-item-info ist Positionierungsanker (position: relative, details static - category-listing.css 2a), das Herz
   liegt absolut oben rechts am Bild. z-index 3 schlaegt das Link-Overlay (.product-item-link::after, z 1).
   Das Bild (170px, mittig in der Kachel) ist schmaler als die Kachel: right richtet das Herz an der Bildkante aus
   (Kachelmitte minus halbe Bildbreite), nie naeher als den 10px-Innenabstand am Kachelrand.

   Abstandsregel fuer alle Herzen im Bild: Kreis (34px) sitzt ~4% der Bildbreite, mindestens 6px, in der Bildecke oben
   rechts - 153-200px-Bilder ~6px, 240-264px-Bilder ~10px. Der Button ist 46px, der Kreis liegt 6px darin: Button-Versatz
   zur Bildkante = Abstand - 6px. */
/* Related/Upsell: .product-item-info hat 10px Innenabstand (Porto), das 170px-Bild beginnt dort -> Abstand 6px. */
:is(.block.related, .block.upsell) .product-item-details .product-item-actions .o2e-merkzettel-heart {
    right: max(10px, calc(50% - 85px));
    top: 10px;
}
/* Kategorie-/Suchraster (list.phtml, ol.product-items): Das Bild ist hoechstens --o2e-tile-img breit (Porto-Admin
   "Kategorie > Bildbreite" ratio_width = img width-Attribut, max-width 100%) und steht mittig in der Huelle. Das Herz sitzt
   an der Bildecke statt an der Huellenecke (halbe Restbreite; schmale Kachel: Bild fuellt die Huelle) -> Abstand 6px. */
.products-grid > ol.product-items {
    --o2e-tile-img: 170px;
}
.products-grid > ol.product-items .product-item-inner.tb-hover-content .product-item-actions .o2e-merkzettel-heart {
    right: max(0px, calc(50% - var(--o2e-tile-img) / 2));
    top: 0;
}
/* Karussells (div.products-slider): Bild fuellt die Huelle, Prozent beziehen sich auf deren Breite = Bildbreite ->
   4% minus 6px (264px: ~10.5px, 165px mobil: ~6.6px). */
.products-slider .product-item-inner.tb-hover-content .product-item-actions .o2e-merkzettel-heart {
    right: max(0px, calc(4% - 6px));
    top: max(0px, calc(4% - 6px));
}
/* Cross-Sell (Warenkorb): Bild fuellt die Kachel (200px) und hat keinen Link-Overlay - nur Anker setzen */
.block.crosssell .product-item-info { position: relative; }
.block.crosssell .product-item-info .product-item-details { position: static; }
/* Sichtbarer Kreis 34px, Trefferflaeche 44px (der Button selbst). Ruhig: kein Schatten, leicht durchscheinender Kreis -
   auf weissen Fotos bleibt nur das Herz, auf Blatt-Fotos traegt der Kreis (#6b6b6b auf >= 82% Weiss: >= 3:1). */
.product-item-inner.tb-hover-content .product-item-actions .o2e-merkzettel-heart .o2e-merkzettel-heart__icon,
:is(.block.related, .block.upsell, .block.crosssell) .product-item-details .product-item-actions .o2e-merkzettel-heart .o2e-merkzettel-heart__icon {
    background: rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    box-shadow: none;
    box-sizing: content-box;
    height: 20px;
    padding: 7px;
    width: 20px;
}

/* ---------- Produktseite: Herz neben "In den Warenkorb"; Rueckfall unter dem Titel ---------- */
/* Normalfall (lieferbar): Herz ist Kindblock des Warenkorb-Blocks und steht im Aktionsbereich direkt hinter dem
   Knopf. Der Bereich wird nur zur Flex-Zeile, wenn ein Herz darin steht (:has) - bei ausgeschaltetem Merkzettel
   bleibt alles wie in Porto. Knopf fuellt die Restbreite, Herz 48x48 mit Eckrundung des Knopfs (8px), Abstand 8px.
   Weitere Kinder (Shortcut-Buttons, z. B. PayPal-Express) brechen in eine eigene volle Zeile um;
   leere Huellen (nur Leerraum, kein Element) werden ausgeblendet. Knopfhoehe fest
   48px, damit Herz und Knopf auch mobil (Porto: 44.6px) gleich hoch sind. */
.box-tocart .actions:has(> .o2e-merkzettel-heart) {
    align-items: stretch !important;
    column-gap: 8px;
    display: flex !important;
    flex-wrap: wrap !important;
}
.box-tocart .actions:has(> .o2e-merkzettel-heart) > .tocart {
    flex: 1 1 0 !important;
    height: 48px !important;
    min-width: 0 !important;
    width: auto !important;
}
.box-tocart .actions > button.o2e-merkzettel-heart {
    background: #fff !important;
    border: 1.5px solid color-mix(in srgb, var(--theme-color) 30%, #dadada) !important;
    border-radius: 8px !important;
    flex: 0 0 48px;
    height: 48px !important;
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    width: 48px !important;
}
.box-tocart .actions > button.o2e-merkzettel-heart .o2e-merkzettel-heart__icon {
    height: 24px;
    width: 24px;
}
.box-tocart .actions > button.o2e-merkzettel-heart:hover,
.box-tocart .actions > button.o2e-merkzettel-heart.is-active {
    background: #fff !important;
    border-color: color-mix(in srgb, #b3263e 55%, #fff) !important;
}
.box-tocart .actions:has(> .o2e-merkzettel-heart) > :not(.tocart):not(.o2e-merkzettel-heart) {
    flex: 0 0 100%;
}
.box-tocart .actions:has(> .o2e-merkzettel-heart) > :not(.tocart):not(.o2e-merkzettel-heart):not(:has(*)) {
    display: none;
}
/* Abstand nur fuer Huellen mit echten Knoepfen (PayPal-iframe, Instant-Purchase-Button). Die PPCP-Meldungshuelle
   enthaelt ein per Knockout ausgeblendetes div.messages - :has(*) wuerde dort 8px Leerraum unter der Zeile erzeugen. */
.box-tocart .actions:has(> .o2e-merkzettel-heart) > :not(.tocart):not(.o2e-merkzettel-heart):has(button, iframe) {
    margin-top: 8px;
}

/* Rueckfall (nicht lieferbar, kein Warenkorb-Knopf): Kreis-Knopf unter dem Titel */
.o2e-merkzettel-heart-wrap {
    margin: 0 0 0.6rem;
}
.o2e-merkzettel-heart-wrap .o2e-merkzettel-heart {
    background: #fff !important;
    border: 1.5px solid color-mix(in srgb, var(--theme-color) 30%, #dadada) !important;
    border-radius: 50% !important;
    height: 44px !important;
    padding: 0 !important;
    width: 44px !important;
}
.o2e-merkzettel-heart-wrap .o2e-merkzettel-heart .o2e-merkzettel-heart__icon {
    height: 22px;
    width: 22px;
}
.o2e-merkzettel-heart-wrap .o2e-merkzettel-heart:hover,
.o2e-merkzettel-heart-wrap .o2e-merkzettel-heart.is-active {
    background: #fff !important;
    border-color: color-mix(in srgb, #b3263e 55%, #fff) !important;
}

/* ---------- Kopfzeile: Herz wie Konto/Warenkorb ----------
   Im Desktop-Sticky verschiebt head.phtml (Child) das Herz mit dem Warenkorb in .navigation - daher beide Orte. */
:is(.header-right, .page-header .navigation) a.o2e-merkzettel-header,
:is(.header-right, .page-header .navigation) a.o2e-merkzettel-header:is(:visited, :hover, :focus) {
    color: var(--theme-color, #179c80) !important;
}
:is(.header-right, .page-header .navigation) a.o2e-merkzettel-header .o2e-merkzettel-heart__icon {
    height: 25px;
    width: 25px;
}
:is(.header-right, .page-header .navigation) a.o2e-merkzettel-header .o2e-merkzettel-header__count {
    background: #222529;
    border-radius: 8px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    left: calc(50% + 3px);
    line-height: 16px;
    min-width: 16px;
    padding: 0 3px;
    right: auto;
    top: 2px;
}
@media (min-width: 992px) {
    .header-right a.o2e-merkzettel-header {
        gap: 2px;
    }
    .page-header:not(.sticky-header) .o2e-merkzettel-header__label {
        clip: auto;
        color: #2f2f2f;
        font-size: 11px;
        font-weight: 500;
        height: auto;
        line-height: 1.3;
        overflow: visible;
        position: static;
        width: auto;
    }
    .page-header:not(.sticky-header) .o2e-merkzettel-header:hover .o2e-merkzettel-header__label {
        color: var(--theme-color, #179c80);
    }

    /* Desktop-Sticky: Herz links neben dem Warenkorb. Porto setzt den Warenkorb dort absolut auf
       right:10px / top:20% (32x26); das Herz (44x44 Trefferflaeche) steht 6px links daneben, auf derselben
       Mittellinie (20% + 13px - 22px). Konto bleibt bewusst nur im vollen Header. */
    .page-header.sticky-header .navigation > a.o2e-merkzettel-header {
        height: 44px;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute;
        right: 48px;
        top: calc(20% - 9px);
        width: 44px;
    }
    /* Platz fuer Herz + Warenkorb reservieren (10 + 32 + 6 + 44 + 12), sonst laufen die Menuepunkte darunter.
       Damit das Menue trotzdem einzeilig bleibt, im Sticky die Menue-Abstaende 22/26px -> 14px je Seite
       (gemessen: einzeilig ab 1200px; vorher brach das Sticky-Menue bis ~1400px zweizeilig um). */
    .page-header.sticky-header .navigation:has(> .o2e-merkzettel-header) {
        padding-right: 104px !important;
    }
    .page-header.sticky-header .navigation:has(> .o2e-merkzettel-header) li.level0 > a.level-top {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ---------- Merkzettel-Seite ---------- */
.o2e-merkzettel {
    color: #2f2f2f;
}
.o2e-merkzettel .action {
    align-items: center;
    border-radius: 8px !important;
    /* Porto setzt a.action.primary mobil auf display:block - Text saesse sonst oben im 44px-Knopf */
    display: inline-flex !important;
    font-size: 14px;
    justify-content: center;
    font-weight: 600;
    padding: 0 18px;
}
.o2e-merkzettel .action:not(.primary) {
    background: #fff !important;
    border: 1.5px solid color-mix(in srgb, var(--theme-color) 45%, #dadada) !important;
    color: var(--theme-color) !important;
}
.o2e-merkzettel .action:not(.primary):hover,
.o2e-merkzettel .action:not(.primary):focus-visible {
    background: color-mix(in srgb, var(--theme-color) 8%, #fff) !important;
}
.o2e-merkzettel .action > span {
    line-height: 1.2;
}
.o2e-merkzettel .action:focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 16%, transparent) !important;
    outline: 0;
}

/* Leerzustand */
.o2e-merkzettel .o2e-merkzettel__empty {
    background: color-mix(in srgb, var(--theme-color) 4%, #fff);
    border: 1.5px dashed color-mix(in srgb, var(--theme-color) 30%, #dadada);
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 2.2rem 1.2rem;
    text-align: center;
}
.o2e-merkzettel .o2e-merkzettel__empty::before {
    background: var(--theme-color);
    content: "";
    display: block;
    height: 40px;
    margin: 0 auto 0.8rem;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.8 8.3 2.7 4.5 6.4 4.5c2.1 0 3.8 1.2 5.6 3.4 1.8-2.2 3.5-3.4 5.6-3.4 3.7 0 5.6 3.8 4 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.8 8.3 2.7 4.5 6.4 4.5c2.1 0 3.8 1.2 5.6 3.4 1.8-2.2 3.5-3.4 5.6-3.4 3.7 0 5.6 3.8 4 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.55;
    width: 40px;
}
.o2e-merkzettel .o2e-merkzettel__empty p {
    margin: 0 0 0.8rem;
}
.o2e-merkzettel .o2e-merkzettel__empty p:last-child {
    margin-bottom: 0;
}

/* Karten wie die Kategorie-Kacheln */
.o2e-merkzettel .o2e-merkzettel__grid {
    gap: 1.2rem;
}
/* Kurzbeschreibung wie im Kategorie-Grid (category-listing.css), aber hoechstens 3 Zeilen: mobil waeren lange
   Texte sonst ~9 Zeilen hoch. Voller Text auf der Produktseite. */
.o2e-merkzettel .o2e-merkzettel__desc {
    -webkit-box-orient: vertical;
    color: #2f2f2f;
    display: -webkit-box;
    font-size: 13px;
    hyphenate-limit-chars: 6 3 3;
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    overflow-wrap: break-word;
}
.o2e-merkzettel .o2e-merkzettel__card {
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--theme-color) 18%, #e6e6e6);
    border-radius: 8px;
    gap: 8px;
    padding: 0.7rem 0.7rem 0.8rem;
    text-align: center;
}

/* Entfernen-Herz: gefuellt, sichtbarer Kreis 34px wie das Kachel-Herz, Trefferflaeche 44px (der Button), Fokusring */
.o2e-merkzettel button.o2e-merkzettel__remove {
    color: #b3263e !important;
    transition: color 0.2s;
}
.o2e-merkzettel button.o2e-merkzettel__remove .o2e-merkzettel-heart__icon {
    background: rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    box-shadow: none;
    box-sizing: content-box;
    height: 20px;
    padding: 7px;
    width: 20px;
    transition: background-color 0.2s;
}
/* Lage nach der Abstandsregel der Kachel-Herzen (240px-Bild: 10px, mobil 153px: 6px). Das Modul setzt top/right 4px ab Kartenkante; die Karte hat
   aber Innenabstand (0.7rem, mobil 0.5rem), das Bild beginnt erst dort -> Innenabstand + Abstand - 5px (Button 44px, Kreis 34px).
   Nicht bei Badge oben rechts: dann liegt das Herz unten rechts in der Aktionszeile (Modul-Regel bleibt). */
.o2e-merkzettel .o2e-merkzettel__card:not(:has(.o2e-badges--top-right)) button.o2e-merkzettel__remove {
    right: calc(0.7rem + 5px);
    top: calc(0.7rem + 5px);
}
.o2e-merkzettel button.o2e-merkzettel__remove:hover .o2e-merkzettel-heart__icon {
    background: #fff;
}
.o2e-merkzettel button.o2e-merkzettel__remove:focus-visible {
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 35%, transparent) !important;
    outline: 0;
}
.o2e-merkzettel .o2e-merkzettel__photo {
    display: block;
}
/* Nur das Produktbild: die Badge-<img> (.o2e-badges__image) behalten Ecke (margin) und Deckkraft aus product-badges.css. */
.o2e-merkzettel .o2e-merkzettel__photo .product-image-photo {
    border-radius: 8px;
    margin: 0 auto;
}
/* Bildlink als Badge-Anker (.o2e-badges-host): inline-block-Container erzeugt sonst eine ~8px-Zeilenhoehenluecke unter dem Bild. */
.o2e-merkzettel .o2e-badges-host .product-image-container {
    display: block;
}
/* Bild fuellt die Bildbox (statt oben angeheftet bei Hoch-/Querformat): Badge-Ecke = Bildecke auch bei nicht quadratischen Bildern. */
.o2e-merkzettel .o2e-badges-host .product-image-photo {
    height: 100%;
    object-fit: contain;
    width: 100%;
}
.o2e-merkzettel .o2e-merkzettel__name,
.o2e-merkzettel .o2e-merkzettel__name a {
    color: #222529;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}
.o2e-merkzettel .o2e-merkzettel__name a:hover {
    color: var(--theme-color);
}
/* Preis und Grundpreis zusammenhalten (PAngV: Grundpreis in unmittelbarer Naehe) */
.o2e-merkzettel .o2e-merkzettel__price {
    break-inside: avoid;
    font-size: 14px;
    text-align: center;
}
.o2e-merkzettel .o2e-merkzettel__price .price-box,
.o2e-merkzettel .o2e-merkzettel__price .price-box p {
    margin: 0;
}
/* Preis wie im Kategorie-Grid (category-listing.css: 14px/400 statt Portos 18px/600). "Ab" gedaempft wie dort,
   aber #6b6b6b statt #c1c1c1 (1,8:1 waere unter AA). */
.o2e-merkzettel .o2e-merkzettel__price .price {
    font-size: 14px !important;
    font-weight: 400 !important;
}
.o2e-merkzettel .o2e-merkzettel__price .price-label {
    color: #6b6b6b;
    font-size: 14px;
}
/* Porto: .minimal-price ist flex - text-align zentriert "Ab x,xx €" dort nicht. */
.o2e-merkzettel .o2e-merkzettel__price .minimal-price {
    justify-content: center;
}
.o2e-merkzettel .o2e-merkzettel__actions {
    justify-content: center;
}

/* Status: nicht lieferbar = Hinweis-Plakette, Bild gedaempft; nicht mehr erhaeltlich = gestrichelte, graue Karte */
.o2e-merkzettel .o2e-merkzettel__card--not_saleable .o2e-merkzettel__photo .product-image-photo {
    opacity: 0.55;
}
.o2e-merkzettel .o2e-merkzettel__card--not_saleable .o2e-merkzettel__note {
    align-self: center;
    background: #fff3d6;
    border-radius: 6px;
    color: #6b4a00;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
}
/* Nicht mehr im Sortiment: normale Karte, Bild grau und blass, graue Plakette (Gegenstueck zur gelben),
   Entfernen als einzige Aktion an der Stelle von "Ansehen". */
.o2e-merkzettel .o2e-merkzettel__card--unavailable .o2e-merkzettel__photo .product-image-photo {
    filter: grayscale(1);
    opacity: 0.45;
}
.o2e-merkzettel .o2e-merkzettel__card--unavailable .o2e-merkzettel__name {
    color: #4a4a4a;
}
.o2e-merkzettel .o2e-merkzettel__card--unavailable .o2e-merkzettel__note {
    color: #4a4a4a;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
/* Plakette nur als kurzes Etikett unter dem Namen (Konto); ohne Namen (Gast, geloescht) bleibt es ruhiger Text. */
.o2e-merkzettel .o2e-merkzettel__card--unavailable .o2e-merkzettel__name + .o2e-merkzettel__note {
    align-self: center;
    background: #eef0f1;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    padding: 4px 10px;
}
.o2e-merkzettel .o2e-merkzettel__card--unavailable .o2e-merkzettel__actions {
    justify-content: center;
}
.o2e-merkzettel button.o2e-merkzettel__remove-text {
    min-height: 44px;
}

/* Vermerke "im Warenkorb" (unter dem Preis) und "Schon einmal bestellt": kompakte Textzeilen (20px),
   Link-Trefferflaeche >= 24px (WCAG 2.5.8). Der versteckte Vermerk darf keine Zeile belegen. */
.o2e-merkzettel .o2e-merkzettel__incart,
.o2e-merkzettel .o2e-merkzettel__ordered {
    color: #6b6b6b;
    font-size: 13px;
    line-height: 20px;
    margin: 0;
    padding: 0;
}
.o2e-merkzettel .o2e-merkzettel__incart a,
.o2e-merkzettel .o2e-merkzettel__ordered a {
    align-items: center;
    color: var(--theme-color);
    display: inline-flex;
    min-height: 24px;
    text-decoration: underline;
}
.o2e-merkzettel .o2e-merkzettel__incart a {
    font-weight: 600;
    justify-content: center;
    overflow-wrap: anywhere;
}

@media (max-width: 575px) {
    .o2e-merkzettel .o2e-merkzettel__grid {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .o2e-merkzettel .o2e-merkzettel__card {
        padding: 0.5rem 0.5rem 0.6rem;
    }
    .o2e-merkzettel .o2e-merkzettel__card:not(:has(.o2e-badges--top-right)) button.o2e-merkzettel__remove {
        right: calc(0.5rem + 1px);
        top: calc(0.5rem + 1px);
    }
    .o2e-merkzettel .o2e-merkzettel__name,
    .o2e-merkzettel .o2e-merkzettel__name a {
        font-size: 14px;
        overflow-wrap: anywhere;
    }
    .o2e-merkzettel .o2e-merkzettel__actions {
        flex-direction: column;
        gap: 8px;
    }
    /* Herz sitzt bei Badge oben rechts unten rechts (module merkzettel.css): Platz in der Aktionszeile, damit es "Ansehen" nicht ueberdeckt. */
    .o2e-merkzettel .o2e-merkzettel__card:has(.o2e-badges--top-right) .o2e-merkzettel__actions {
        padding-right: 48px;
    }
    .o2e-merkzettel .o2e-merkzettel__actions .action {
        padding: 0 10px;
        white-space: nowrap;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .o2e-merkzettel-heart,
    .product-item-inner.tb-hover-content:has([data-o2e-merkzettel-heart]) .product-item-actions > * {
        transition: none !important;
    }
}