/* ============================================================
   TOP-BAR: Versandkostenfrei-Hinweis (linke Seite der Willkommens-
   Leiste). Die Leiste hat einen GRUENEN Hintergrund (Marke, via
   Pseudo/Gradient) -> Text muss hell sein. Utility-Links sind #e7e7e7;
   der Benefit bekommt reines Weiss + 500 -> dezent heller, sticht
   minimal hervor, bleibt voll lesbar. 12px wie rechts, vertikal
   zentriert. Bewusst NICHT sticky (spaeter). */
.main-panel-top .header-left .om-topbar-shipping {
    display: inline-block;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 26px;
    color: #fff !important; /* Porto setzt sonst #999 -> Override gewinnt nur mit !important */
    white-space: nowrap;
}


/* ============================================================
   WARENKORB-SEITE (checkout/cart) — Redesign
   ------------------------------------------------------------
   Produkt-Register: die Flaeche DIENT dem Kauf. Ziel = ruhige,
   scanbare Positionsliste, klare Mengen-/Loesch-Affordanzen,
   Konsistenz mit der Produktseite (Marken-Gruen-CTA, Pille-
   Stepper, 8px-Radius, Fokus-Glow). Reine CSS-Loesung auf dem
   Magento/Porto-Default-Markup; qty-Untergrenze 1 wird in
   qty-clamp.js erzwungen, daher ist "Warenkorb aktualisieren"
   redundant (Auto-Update via cart-auto-update.js) und wird
   ausgeblendet. my_custom.css laedt nach Porto -> !important
   nur dort, wo Porto/Magento sonst gewinnt. */

/* --- Seitentitel: etwas Luft nach unten --- */
.checkout-cart-index .page-title-wrapper .page-title { margin-bottom: 1.25rem; }

/* --- Spalten-Kopf der Positionsliste: leise Mikro-Labels --- */
#shopping-cart-table thead .col {
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    color: #6a6a6a !important; /* >=4.5:1 auf Weiss (kleine Labels brauchen vollen Kontrast) */
    border-bottom: 1px solid #ececec !important;
    padding-bottom: .75rem;
}

/* --- Positionszeile als ruhiger Block (kein Tabellengitter) ---
   Jede Position ist ein <tbody class="cart item"> mit item-info +
   item-actions. Trennlinie nur unter der Aktionszeile -> EIN
   Separator pro Position; sanfter Hover ueber den ganzen Block. */
#shopping-cart-table > tbody.cart.item { transition: background-color .15s ease; }
#shopping-cart-table > tbody.cart.item:hover {
    background: color-mix(in srgb, var(--theme-color) 4%, transparent);
}
#shopping-cart-table .cart.item .item-info > .col {
    border-bottom: none !important;
    padding-top: 1.25rem;
    padding-bottom: .4rem;
    vertical-align: middle;
}
#shopping-cart-table .cart.item .item-actions > td {
    border-bottom: 1px solid #ececec !important;
    padding-top: 0;
    padding-bottom: .6rem;
}

/* --- Artikel-Zelle: Bild + Details in einer Reihe --- */
#shopping-cart-table .cart.item .col.item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
#shopping-cart-table .cart.item .product-item-photo,
#shopping-cart-table .cart.item .product-image-container {
    width: 88px !important;
    max-width: 88px;
    flex: 0 0 88px;
    position: static;
    padding: 0;
}
#shopping-cart-table .cart.item .product-image-photo {
    width: 88px !important;
    height: 88px !important;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ececec;
}
#shopping-cart-table .cart.item .product-item-details { margin: 0; }
#shopping-cart-table .cart.item .product-item-name { margin: 0; }
#shopping-cart-table .cart.item .product-item-name a {
    color: #1a1d20 !important;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    transition: color .15s ease;
}
#shopping-cart-table .cart.item .product-item-name a:hover { color: var(--theme-color) !important; }

/* --- Preis-Spalten: Einzelpreis leise (>=4.5:1), Zwischensumme als Anker --- */
#shopping-cart-table .cart.item .col.price .price {
    color: #5a5a5a !important;
    font-weight: 500;
}
#shopping-cart-table .cart.item .col.subtotal .price {
    color: #1a1d20 !important;
    font-weight: 700;
    font-size: 1.05rem;
}

/* --- Mengen-Pille (− [n] +) horizontal, identisch zur Produktseite ---
   Porto rendert .field.qty > .control.qty(input) + .qty-changer(2 Links
   mit Pfeil-Icons, vertikal). Hier: EIN Pillen-Container, dec links,
   Zahl mittig, inc rechts (flex order); Pfeil-Glyphen -> klares −/+. */
#shopping-cart-table .field.qty {
    position: relative;
    display: inline-block !important;
    width: 120px;
    height: 42px;
    margin: 0;
    border: 1.5px solid color-mix(in srgb, var(--theme-color) 30%, #dadada);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#shopping-cart-table .field.qty:focus-within {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 16%, transparent);
}
#shopping-cart-table .field.qty > .label { display: none; }
#shopping-cart-table .field.qty .control.qty {
    /* fuellt die ganze Pille (Porto gab dem Container sonst nur ~104px ->
       Zahl zentrierte ueber zu schmale Flaeche und wirkte nach links versetzt).
       Absolut inset:0; die Buttons liegen per z-index darueber -> Klicks ok. */
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100%;
    border: none !important;
}
#shopping-cart-table .field.qty .input-text.qty {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
    font-weight: 700;
    color: #1a1d20 !important;
    padding: 0 38px !important;   /* symmetrischer Platz fuer beide Buttons -> Zahl exakt mittig */
    -moz-appearance: textfield;
    appearance: textfield;
}
#shopping-cart-table .field.qty .input-text.qty::-webkit-outer-spin-button,
#shopping-cart-table .field.qty .input-text.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;   /* nur -webkit- reicht in aktuellem Chromium nicht -> sonst lugt der native Spinner als zweites "+" hervor */
    display: none;
    margin: 0;
}
/* Buttons absolut links/rechts, per z-index UEBER dem Input -> Klicks treffen
   zuverlaessig (display:contents+flex erzeugte sonst Overlap mit .control.qty,
   und der Input fing die Klicks ab). */
#shopping-cart-table .field.qty .qty-changer > a {
    position: absolute !important;
    top: 0;
    bottom: 0;
    height: auto !important;
    width: 38px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: none !important;
    background: transparent;
    color: #888 !important;
    transition: background-color .15s ease, color .15s ease;
}
#shopping-cart-table .field.qty .qty-changer .qty-dec { left: 0; right: auto; }
#shopping-cart-table .field.qty .qty-changer .qty-inc { right: 0; left: auto; }
#shopping-cart-table .field.qty .qty-changer > a:hover {
    background: color-mix(in srgb, var(--theme-color) 12%, transparent);
    color: var(--theme-color) !important;
}
/* Glyphen −/+ DIREKT ueber das vorhandene Porto-<i> rendern (dessen porto-icons-
   Pfeilglyph wir ersetzen) statt ueber ::after. Grund: ::after erzeugte zusammen
   mit einem zweiten Porto-Glyph-Element ein doppeltes Zeichen ("Strich vor dem +").
   EIN Glyph-Element pro Button. font-size:0 am <a>/<i> schaltet den Originalpfeil
   aus; <i>::before bringt unser Zeichen mit eigener Schrift/Groesse. <a>-Pseudos aus. */
#shopping-cart-table .field.qty .qty-changer > a { font-size: 0 !important; }
#shopping-cart-table .field.qty .qty-changer > a::before,
#shopping-cart-table .field.qty .qty-changer > a::after { content: none !important; display: none !important; }
#shopping-cart-table .field.qty .qty-changer > a > i {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0 !important;
    font-style: normal;
}
#shopping-cart-table .field.qty .qty-changer .qty-inc > i::before {
    content: "+" !important;
    font-family: Poppins, Arial, sans-serif !important;
    font-size: 1.25rem !important;
    line-height: 1;
    color: inherit;
}
#shopping-cart-table .field.qty .qty-changer .qty-dec > i::before {
    content: "−" !important;
    font-family: Poppins, Arial, sans-serif !important;
    font-size: 1.25rem !important;
    line-height: 1;
    color: inherit;
}

/* --- Entfernen / Bearbeiten: beschriftete, klare Controls statt kryptischem × ---
   Magento versteckt das Label per clip-Visually-Hidden; wieder einblenden
   fuer eine echte Affordanz. Icon (porto-icons) bleibt als ::before.
   Rechtsbuendig; funktioniert mit 1 Aktion (nur Loeschen) und 2 (Bearbeiten+Loeschen). */
#shopping-cart-table .cart.item .actions-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .4rem;
    /* Magento (_actions-toolbar) gibt der Toolbar global padding-bottom:30px ->
       der einzelne "Artikel entfernen"-Button (33px) sass in einer 63px-Toolbar
       und das Aktions-Band frass ~38% der Positionshoehe. Hier nicht gebraucht
       (es gibt nie eine zweite Aktionszeile) -> Geister-Padding entfernen, Band
       schmiegt sich an den Button. min-height ebenfalls neutralisieren. */
    padding-bottom: 0 !important;
    min-height: 0 !important;
}
#shopping-cart-table .action-delete,
#shopping-cart-table .action-edit {
    position: static !important; /* Porto setzt diese im Cart absolut -> wuerden sich
                                    sonst am selben Punkt stapeln; zurueck in den Fluss,
                                    damit die Flex-Toolbar sie nebeneinander anordnet. */
    display: inline-flex !important;
    align-items: center;
    gap: .45em;
    padding: .4rem .7rem;
    margin: 0;
    border-radius: 8px;
    font-size: .85rem;
    line-height: 1;
    color: #6a6a6a !important;
    transition: background-color .15s ease, color .15s ease;
}
#shopping-cart-table .action-delete > span,
#shopping-cart-table .action-edit > span {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    font-size: .85rem;
}
#shopping-cart-table .action-delete:hover {
    background: #fdecea;
    color: #c0392b !important;
}
#shopping-cart-table .action-delete:hover::before { color: #c0392b !important; }
#shopping-cart-table .action-edit:hover {
    background: color-mix(in srgb, var(--theme-color) 10%, transparent);
    color: var(--theme-color) !important;
}
#shopping-cart-table .action-edit:hover::before { color: var(--theme-color) !important; }
#shopping-cart-table .action-delete:focus-visible,
#shopping-cart-table .action-edit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color) 22%, transparent);
}

/* --- Aktionen unter der Liste: Update raus (Auto-Update aktiv), Weiter-Einkaufen als Link --- */
.cart.main.actions {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}
.cart.main.actions .action.update { display: none !important; }
.cart.main.actions .action.continue {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--theme-color) !important;
    font-weight: 600;
    box-shadow: none !important;
}
.cart.main.actions .action.continue:hover { text-decoration: underline; }

/* --- Gutschein-Block: kompakte, integrierte Eingabe + Outline-Button --- */
.cart-container .block.discount {
    margin-top: 1.5rem;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fafafa;
    padding: 1rem 1.25rem;
}
.cart-container .block.discount .title strong {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1d20;
    text-transform: none;
}
.cart-container .block.discount .fieldset.coupon {
    display: flex;
    flex-direction: column;      /* Input oben, Button darunter -> bleibt in der schmalen Cart-Box */
    gap: .6rem;
    align-items: stretch;
    margin-top: .75rem;
}
.cart-container .block.discount .fieldset.coupon .field { margin: 0; }
/* Toolbar + Button volle Breite: die Gutschein-Box ist in der Cart-Spalte nur
   ~355px breit; inline (Input neben Button) quoll der Button rechts heraus.
   Gilt fuer beide Buttons (apply "Rabatt anwenden" + cancel "Gutschein loeschen"). */
.cart-container .block.discount .fieldset.coupon > .actions-toolbar,
.cart-container .block.discount .fieldset.coupon .actions-toolbar > .primary {
    width: 100% !important;   /* Porto setzt eine konkurrierende Breite -> !important noetig */
    display: block;
    margin: 0;
}
.cart-container .block.discount .fieldset.coupon .actions-toolbar .action { width: 100% !important; display: block; }
.cart-container .block.discount #coupon_code {
    width: 100%;
    height: 44px !important;
    border: 1.5px solid #dcdcdc !important;
    border-radius: 8px !important;
    padding: 0 .9rem !important;
    background: #fff;
}
.cart-container .block.discount #coupon_code:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 16%, transparent) !important;
    outline: none;
}
.cart-container .block.discount .actions-toolbar .action.apply {
    height: 44px;
    border-radius: 8px !important;
    background: #fff !important;
    border: 1.5px solid var(--theme-color) !important;
    color: var(--theme-color) !important;
    font-weight: 600 !important;
    padding: 0 1.2rem !important;
    transition: background-color .2s ease, color .2s ease;
}
.cart-container .block.discount .actions-toolbar .action.apply:hover {
    background: var(--theme-color) !important;
    color: #fff !important;
}

/* --- Gutschein-Block: standardmaessig ZUGEKLAPPT (Desktop + Mobile) ---
   Das native mage/collapsible liefert genau die gewuenschte UX: kleine
   Ueberschrift "Gutschein anwenden" -> Klick klappt Feld + "Rabatt anwenden"
   auf; bei bereits eingeloestem Gutschein rendert der Block server-seitig
   offen (data-mage-init active:true). Luma/Porto entschaerft das aber:
   auf Desktop (>=@screen__m) wird der Titel-Toggle versteckt (.title
   display:none) und der Inhalt per !important offen gezwungen. Wir holen
   den Titel als klickbare Ueberschrift zurueck und lassen die Klasse
   .active (setzt das Widget am Block) die Anzeige steuern.
   Scope ueber die ID #block-discount: (1,x,0) schlaegt Lumas
   .cart-discount .block .content (0,3,0)+important sicher — bei gleicher
   Spezifitaet wuerde Porto als spaeter geladenes Bundle gewinnen. */
#block-discount .content { display: none !important; }
#block-discount.active .content { display: block !important; }
#block-discount .title {
    display: block !important;          /* Desktop-Hide (display:none) zuruecknehmen */
    cursor: pointer !important;         /* Luma-Desktop setzt cursor:default */
    pointer-events: auto !important;
    position: relative;
    margin: 0;
    padding: .15rem 2rem .15rem 0 !important;   /* Platz fuer Chevron rechts */
    border: 0 !important;
    -webkit-user-select: none;
    user-select: none;
}
.cart-container .block.discount .title:hover strong { color: var(--theme-color); }
/* Eigener Border-Caret statt Porto-Icon-Glyph — deterministisch steuerbar
   und markenfarben; rotiert im .active-Zustand nach oben. */
#block-discount .title::after {
    content: '' !important;
    display: block !important;          /* Luma-Desktop versteckt ::after */
    position: absolute;
    right: .35rem;
    top: 50%;
    width: .5rem;
    height: .5rem;
    margin-top: -.4rem;
    border-right: 2px solid var(--theme-color);
    border-bottom: 2px solid var(--theme-color);
    transform: rotate(45deg);           /* Pfeil nach unten = zugeklappt */
    transition: transform .2s ease;
}
#block-discount.active .title::after { transform: rotate(-135deg); }

/* --- Zusammenfassung: Karte, klebt auf Desktop --- */
.cart-summary {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.75rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
@media (min-width: 992px) {
    .cart-summary {
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
}
.cart-summary > .summary.title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1a1d20 !important;
    text-transform: none !important;
    margin-bottom: 1rem;
}
/* Totals-Zeilen: Label leise, Wert ink; Bestellsumme als Anker */
.cart-summary .data.table.totals .mark {
    color: #6a6a6a !important;
    font-weight: 400 !important;
}
.cart-summary .data.table.totals .amount {
    color: #1a1d20 !important;
    font-weight: 600 !important;
    text-align: right;
}
.cart-summary .data.table.totals .grand .mark,
.cart-summary .data.table.totals .grand .amount {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1a1d20 !important;
    padding-top: .75rem;
    border-top: 1px solid #ececec;
}
/* Versand-Schaetzer-Titel: ruhig */
.cart-summary .block.shipping > .title {
    text-transform: none !important;
    font-weight: 600;
    color: #1a1d20;
}

/* --- Haupt-CTA "Zur Kasse gehen" -> Marken-Gruen (Konsistenz mit Produktseite) --- */
.cart-summary .checkout-methods-items .action.primary.checkout {
    width: 100%;
    background: var(--cta-surface) !important;
    border-color: var(--cta-surface) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.cart-summary .checkout-methods-items .action.primary.checkout:hover {
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-color) 30%, transparent) !important;
}
.cart-summary .checkout-methods-items .action.primary.checkout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 28%, transparent) !important;
}

/* --- Responsive: Mobile (Magento klappt die Tabelle in gestapelte Zeilen) --- */
@media (max-width: 767px) {
    #shopping-cart-table .cart.item .col.item { gap: .75rem; }
    #shopping-cart-table .cart.item .product-item-photo,
    #shopping-cart-table .cart.item .product-image-container,
    #shopping-cart-table .cart.item .product-image-photo {
        width: 72px !important;
        height: 72px !important;
        flex-basis: 72px;
    }
    .cart-summary { margin-top: 1.5rem; }
    .cart.main.actions { flex-direction: column-reverse; align-items: stretch; gap: .75rem; }
    /* Gutschein-Feld stapelt jetzt auf ALLEN Breiten (Basis-Regel oben,
       .fieldset.coupon flex-direction:column) -> hier keine Mobile-Sonderregel mehr. */
}

/* --- Reduced Motion: Hover-/Fokus-Uebergaenge abschalten --- */
@media (prefers-reduced-motion: reduce) {
    #shopping-cart-table > tbody.cart.item,
    #shopping-cart-table .field.qty,
    #shopping-cart-table .field.qty .qty-changer > a,
    #shopping-cart-table .cart.item .product-item-name a,
    #shopping-cart-table .action-delete,
    #shopping-cart-table .action-edit,
    .cart-container .block.discount .actions-toolbar .action.apply,
    .cart-summary .checkout-methods-items .action.primary.checkout {
        transition: none !important;
    }
}


/* ============================================================
   Warenkorb-Positionen — Mobile-Karte (<=991px)
   ------------------------------------------------------------
   Porto/Magento laesst die Positionstabelle bis zum Theme-
   Mobile-Breakpoint (<=991px) HORIZONTAL laufen: 4 Spalten
   (Artikel | Preis | Anzahl | Zwischensumme) mit totem Raum
   zwischen Name und Zahlenspalten -> "sehr weit, alles in einer
   Zeile" (Tablet / Handy-Querformat). Erst unter 767px kippt
   Porto in einen luftigen, zentrierten Vollbreiten-Stapel
   (Label ueber Wert) -> hohe, unstrukturierte Position.
   Beide Zustaende ersetzt EINE kompakte Karte nach dem
   etablierten Mobile-Warenkorb-Muster (Shopify/Amazon):
   Thumbnail + Name oben, Einzelpreis leise darunter, dann
   Mengen-Stepper links / fette Zeilensumme rechts in EINER
   Reihe, Entfernen klein darunter. Stepper- und Entfernen-
   Interna (oben definiert) bleiben unangetastet -> hier nur
   Umpositionierung ueber die Container. */
@media (max-width: 991px) {
    /* Reihenfolge-Fix (D1): .cart-container rendert mobil als display:block mit
       DOM-Reihenfolge Summary -> Artikel -> Coupon. Flex-Column + order kippt
       die visuelle Reihenfolge auf das erwartete Mobile-Muster:
       Artikel (form-cart) -> Bestellsumme inkl. Original-CTA (cart-summary)
       -> Gutschein (cart-discount). Alle drei sind direkte Kinder von
       .cart-container; order greift nur bei flex. */
    .cart-container {
        display: flex !important;
        flex-direction: column;
    }
    .cart-container .form-cart { order: 1; }
    .cart-container .cart-summary { order: 2; }
    .cart-container .cart-discount { order: 3; }

    /* Tabellengeruest aufloesen: Kopf weg, Bloecke statt Zellen */
    #shopping-cart-table { display: block !important; }
    #shopping-cart-table > thead { display: none !important; }
    #shopping-cart-table > tbody.cart.item {
        display: block !important;
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 12px;
        padding: 1rem 1.1rem;
        margin-bottom: .875rem;
    }
    /* Hover-Tint ist eine Desktop-Geste -> auf Touch neutral */
    #shopping-cart-table > tbody.cart.item:hover { background: #fff; }

    /* Positionszeile -> Raster: Einzelpreis (links) · Mengen-Stepper (mittig,
       gut mit dem Daumen erreichbar) · Zeilensumme (rechts, Anker) in EINER
       Reihe unter Bild+Name. minmax(0,1fr) statt 1fr: die Flanken duerfen bis
       0 schrumpfen -> kein Karten-Overflow am kleinen Ende (<=360px) und der
       auto-Stepper bleibt geometrisch mittig (beide fr-Tracks gleich breit). */
    #shopping-cart-table .cart.item .item-info {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        column-gap: clamp(.5rem, 2.5vw, 1.5rem);
        row-gap: .6rem;
        align-items: center;
    }
    /* Zellen aus dem Tabellenfluss loesen (Porto: block/table-cell + center) */
    #shopping-cart-table .cart.item .item-info > .col {
        width: auto !important;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
        white-space: normal !important;
    }
    /* Reihe 1: Artikel (Bild + Name) ueber die volle Breite */
    #shopping-cart-table .cart.item .col.item {
        grid-column: 1 / -1;
        grid-row: 1;
        display: flex !important;
        align-items: center;
        gap: .85rem;
    }
    #shopping-cart-table .cart.item .product-item-photo,
    #shopping-cart-table .cart.item .product-image-container,
    #shopping-cart-table .cart.item .product-image-photo {
        width: 72px !important;
        height: 72px !important;
        flex-basis: 72px;
    }
    /* Reihe 2 links: Einzelpreis leise, mit klarem Label statt nacktem Wert.
       flex-wrap: bei genug Platz steht der Wert neben dem Label, sonst bricht
       er darunter. Soft-Hyphen im Label + overflow-wrap: "Einzelpreis" darf als
       "Einzel-/preis" brechen -> Min-Content faellt auf ~45px, kein Text-Overflow
       unter den Stepper, wenn die Spalte am kleinen Ende schmal wird. */
    #shopping-cart-table .cart.item .col.price {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        display: flex !important;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: .4rem;
        row-gap: .1rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    #shopping-cart-table .cart.item .col.price::before {
        content: "Einzel\00ADpreis";
        color: #6a6a6a;
        font-size: .8rem;
        font-weight: 500;
    }
    #shopping-cart-table .cart.item .col.price .price { font-size: .9rem !important; }
    /* Reihe 2 Mitte: Mengen-Stepper zentriert (Daumen-Reichweite) */
    #shopping-cart-table .cart.item .col.qty {
        grid-column: 2;
        grid-row: 2;
        justify-self: center;
    }
    /* Reihe 2 rechts: fette Zeilensumme als Anker */
    #shopping-cart-table .cart.item .col.subtotal {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        text-align: right !important;
    }
    /* Stepper + fette Summe sind selbsterklaerend -> Rest-Labels weg */
    #shopping-cart-table .cart.item .col.qty::before,
    #shopping-cart-table .cart.item .col.subtotal::before {
        display: none !important;
    }

    /* Aktionszeile (Entfernen) als schmales Band unter der Karte */
    #shopping-cart-table .cart.item .item-actions { display: block !important; }
    #shopping-cart-table .cart.item .item-actions > td {
        width: auto !important;
        padding: .5rem 0 0 !important;
        border: none !important;
    }

    /* --- Gutschein-Block: Karten-Kohaerenz (Mobile) ---
       Das Collapsible bleibt hier AKTIV (Titel klickbar, Inhalt zugeklappt) —
       die Aufklapp-Mechanik steht global oben unter #block-discount und gilt
       fuer alle Breiten. Der frueher noetige "leerer Kasten"-Fix (Inhalt per
       !important offen zwingen, Titel entklicken) entfaellt: der Titel ist
       jetzt eine sichtbare, klickbare Ueberschrift, kein leerer Kasten mehr.
       Hier bleibt nur die optische Angleichung an die Positions-Karten. */
    .cart-container .block.discount {
        border-radius: 12px;                 /* Kohaerenz mit den Positions-Karten */
        background: #fff;
    }
}


/* ============================================================
   MINICART-POPUP (.block-minicart, Dropdown-Design) — Redesign
   Schlanke Schnell-Uebersicht statt gequetschtem Mini-Formular:
   - klare Hierarchie (Anzahl = ruhiges Daten-Label, "Zum Warenkorb"
     = erkennbarer Aktions-Link; vorher optisch identisch)
   - keine Versalien (Markenregel), mehr Luft, Marken-Gruen-CTA
   - Menge nur-lesend (Eingabe/"Aktualisieren" im Item-Template entfernt),
     Mengenaenderung laeuft ueber die Warenkorbseite
   Scope bewusst nur Dropdown — Offcanvas (.minicart-offcanvas) unberuehrt.
   Porto laedt spaeter -> gezielt !important (vgl. Projektregel).
   ============================================================ */

/* --- Mehr Atem: breiter + grosszuegigeres Padding (war 300px / 10-15px) --- */
.minicart-wrapper:not(.minicart-offcanvas) .block-minicart {
    width: 360px !important;
    padding: 1.25rem 1.25rem 1.1rem !important;
    color: #2f2f2f !important;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14) !important;
}
@media (max-width: 400px) {
    .minicart-wrapper:not(.minicart-offcanvas) .block-minicart {
        width: calc(100vw - 24px) !important;
    }
}

/* --- Kopfzeile: Anzahl (Daten) vs. "Zum Warenkorb" (Aktion) klar trennen --- */
.block-minicart .total-count {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 .9rem !important;
    padding-bottom: .9rem;
    border-bottom: 1px solid #ececec;
}
.block-minicart .total-count .items-total {
    float: none !important;          /* Porto floatet sonst rechts */
    margin: 0 !important;
    font-size: .95rem !important;
    font-weight: 400 !important;
    text-transform: none !important; /* Versalien raus */
    color: #5a5a5a !important;       /* ruhiges Label */
}
.block-minicart .total-count .items-total .count {
    font-weight: 700 !important;
    color: #1a1d20 !important;       /* nur die Zahl betont */
}
.block-minicart .total-count .actions,
.block-minicart .total-count .actions .secondary {
    margin: 0 !important;
    text-align: right;
}
/* Zweitpfad "Zum Warenkorb": dezenter Ghost-Pill statt reinem Text-Link.
   Grund NICHT Lautstaerke, sondern Ergonomie + Affordanz:
   - reiner Text-Link war nur ~20px hoch -> unter der 44px-Touch-Regel;
     Padding hebt die Trefferflaeche auf ~44px (mobil = dasselbe Dropdown).
   - leichte Tint-Flaeche + Radius liest sich eindeutig als Bedienelement,
     bleibt aber dem gefuellten Checkout-CTA klar untergeordnet (kein Fuellkoerper).
   Konsistent mit dem Outline-viewcart des Leer-Zustands weiter unten. */
.block-minicart .total-count .action.viewcart {
    display: inline-flex !important;
    align-items: center;
    gap: .3rem;
    width: auto !important;
    padding: .4rem .7rem !important;  /* ~44px Trefferflaeche */
    border: 1px solid color-mix(in srgb, var(--theme-color) 24%, #fff) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--theme-color) 8%, #fff) !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    /* Gruen, aber dunkel genug fuer AA-Kontrast auf der hellen Tint-Flaeche (~5:1) */
    color: color-mix(in srgb, var(--theme-color) 76%, #000) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.block-minicart .total-count .action.viewcart::after {
    content: "\2192";                /* Pfeil -> signalisiert Navigation */
    font-weight: 400;
    transition: transform .2s ease;
}
.block-minicart .total-count .action.viewcart:hover {
    /* Feedback ueber staerkere Tint-Flaeche (nicht Text aufhellen) -> AA bleibt */
    background: color-mix(in srgb, var(--theme-color) 15%, #fff) !important;
    border-color: color-mix(in srgb, var(--theme-color) 40%, #fff) !important;
    text-decoration: none !important;
}
.block-minicart .total-count .action.viewcart:focus-visible {
    outline: none;
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 16%, transparent) !important;
}
.block-minicart .total-count .action.viewcart:hover::after {
    transform: translateX(3px);
}

/* --- Artikelliste: mehr Luft, leise Trennlinien, lesbarer Name --- */
.block-minicart .minicart-items-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    /* Porto setzt hier overflow-x:auto -> erzeugte einen 2px-Scrollbalken */
    overflow-x: hidden !important;
}
.block-minicart .minicart-items .product-item {
    position: relative;              /* Anker fuer Entfernen-Button */
    padding: .9rem 0 !important;
    border-bottom: 1px solid #f1f1f1;
}
.block-minicart .minicart-items .product-item:last-child {
    border-bottom: 0;
}
.block-minicart .minicart-items .product-item > .product {
    padding-right: 1.5rem;           /* Platz fuer das x oben rechts */
}
.block-minicart .minicart-items .product-item-photo {
    width: 64px !important;
    margin-right: .9rem;
}
.block-minicart .minicart-items .product-item-photo .product-image-container {
    width: 64px !important;
}
.block-minicart .minicart-items .product-item-name {
    margin: 0 0 .35rem !important;
    line-height: 1.35 !important;
    font-size: .92rem !important;
    font-weight: 500 !important;
}
.block-minicart .minicart-items .product-item-name a {
    color: #2f2f2f !important;
    transition: color .2s ease;
}
.block-minicart .minicart-items .product-item-name a:hover {
    color: var(--theme-color) !important;
}
.block-minicart .minicart-items .price-minicart .price {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--theme-color) !important;
}

/* Menge nur-lesend: ruhiges Label + Wert (kein Eingabefeld mehr) */
.block-minicart .minicart-items .details-qty {
    margin-top: .35rem !important;
    font-size: .85rem;
    color: #5a5a5a;
}
.block-minicart .minicart-items .details-qty .label {
    font-weight: 400;
    color: #6b6b6b;
}
.block-minicart .minicart-items .details-qty .minicart-qty-value {
    font-weight: 700;
    color: #2f2f2f;
}

/* Entfernen (x): dezent oben rechts, in-place (kein Reload) */
.block-minicart .minicart-items .product.actions {
    margin: 0 !important;
}
.block-minicart .minicart-items .product.actions .secondary {
    position: absolute;
    top: .75rem;
    /* 6px vom rechten Rand eingerueckt: der Wrapper hat overflow-y:auto (Scroll
       bei vielen Artikeln) -> CSS erzwingt dann auch overflow-x-Clipping, das
       laesst sich nicht abschalten. Buendig am Rand wuerde der Hover-Kreis/Schatten
       abgeschnitten. Einruecken = saubere Loesung (statt Schatten ueberlaufen lassen). */
    right: 6px;
    margin: 0 !important;
    /* Feste 26x26-Box begrenzt das x exakt (statt inline=20px, wodurch das
       breitere x sonst 6px ueber den rechten Rand ragte) und haelt es rund.
       Bewusst KEIN display:flex hier -> sonst schrumpft das x als Flex-Item
       auf 20x26 (Ellipse statt Kreis). */
    width: 26px;
    height: 26px;
}
.block-minicart .minicart-items .product.actions .action.delete {
    display: flex !important;        /* zentriert das Icon-Glyph zuverlaessig */
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0 !important;
    border-radius: 50%;
    color: #9a9a9a !important;
    transition: background-color .2s ease, color .2s ease;
}
.block-minicart .minicart-items .product.actions .action.delete::before {
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
.block-minicart .minicart-items .product.actions .action.delete:hover {
    background: #fbecec;
    color: #c0392b !important;
}
/* "Bearbeiten" (nur bei Variantenprodukten): klein + ruhig, nicht aufdraengen */
.block-minicart .minicart-items .product.actions .primary .action.edit {
    color: #8a8a8a !important;
}
.block-minicart .minicart-items .product.actions .primary .action.edit:hover {
    color: var(--theme-color) !important;
}

/* --- Zwischensumme: ruhige Zeile, betonter Betrag, ohne Doppelpunkt-Artefakt --- */
.minicart-wrapper .block-minicart .subtotal {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin: .9rem 0 1rem !important;
    padding-top: .9rem;
    border-top: 1px solid #ececec;
    text-transform: none !important;
    line-height: 1.3 !important;
}
.block-minicart .subtotal .label {
    font-weight: 500 !important;
    color: #5a5a5a !important;
}
.block-minicart .subtotal .label:after {
    content: none !important;        /* haengender Doppelpunkt im Flex-Row raus */
}
.block-minicart .subtotal .amount,
.block-minicart .subtotal .price {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #1a1d20 !important;
    white-space: nowrap;
}

/* --- Haupt-CTA "Zur Kasse gehen": Marken-Gruen (Konsistenz mit Warenkorbseite/Produktseite) --- */
.block-minicart .block-content > .actions {
    margin: 0 !important;
}
.block-minicart .block-content > .actions .primary {
    margin: 0 !important;
}
.block-minicart .action.primary.checkout {
    display: block;
    width: 100% !important;
    padding: .85rem 1rem !important;
    background: var(--cta-surface) !important;
    border-color: var(--cta-surface) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: none !important; /* Versalien raus */
    letter-spacing: 0 !important;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.block-minicart .action.primary.checkout:hover {
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-color) 30%, transparent) !important;
}
.block-minicart .action.primary.checkout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 28%, transparent) !important;
}

/* --- Leerer Zustand: ruhig zentriert, sentence-case Sekundaer-Link --- */
.block-minicart .subtitle.empty {
    padding: 1.5rem 0 1rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #4a4a4a !important;
    text-transform: none !important;
}
.block-minicart .block-content > .actions > .secondary {
    margin: 0 !important;
}
.block-minicart .block-content > .actions > .secondary .action.viewcart {
    display: inline-block !important;
    width: auto !important;
    padding: .6rem 1.25rem !important;
    border: 1px solid var(--theme-color) !important;
    border-radius: 8px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    color: color-mix(in srgb, var(--theme-color) 80%, #000) !important;
    transition: background-color .2s ease, color .2s ease;
}
.block-minicart .block-content > .actions > .secondary .action.viewcart:hover {
    background: var(--theme-color) !important;
    color: #fff !important;
}

/* --- Reduced Motion: Uebergaenge im Popup abschalten --- */
@media (prefers-reduced-motion: reduce) {
    .block-minicart .total-count .action.viewcart,
    .block-minicart .total-count .action.viewcart::after,
    .block-minicart .minicart-items .product-item-name a,
    .block-minicart .minicart-items .product.actions .action.delete,
    .block-minicart .action.primary.checkout,
    .block-minicart .block-content > .actions > .secondary .action.viewcart {
        transition: none !important;
    }
}


/* ==============================================
   Modal-Dialoge (uiAlert/uiConfirm): Primaerbutton ans Theme
   angleichen (OK im Bestands-Alert der Cart-Seite, Bestaetigen im
   Minicart-Entfernen-Confirm). Marken-Gruen + 8px-Radius statt
   Portos Werks-Orange; !important, da Portos kompiliertes CSS
   spaeter laedt.
   ============================================== */
.modal-popup .modal-footer .action-primary {
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    border-radius: 8px !important;
    color: #fff !important;
}

.modal-popup .modal-footer .action-primary:hover,
.modal-popup .modal-footer .action-primary:focus,
.modal-popup .modal-footer .action-primary:active {
    background: color-mix(in srgb, var(--theme-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--theme-color) 85%, black) !important;
}

/* Sekundaerbutton (Nein/Abbrechen) war NIE gestylt -> fiel auf Portos
   Werks-Default zurueck: eckig (border-radius 0) und Text #777 (~4.48:1,
   unter AA). Neben dem runden gruenen Primaerbutton wirkte er wie ein
   Fremdkoerper. Als sauberes Paar angleichen: gleiche 8px-Geometrie,
   lesbares Ink, neutraler Rahmen (kein Gruen -> "Nein" soll die ruhige,
   nicht die betonte Option sein). Reihenfolge Nein links / Ja rechts
   bleibt (dismiss-links / commit-rechts, konsistent mit dem Minicart). */
.modal-popup .modal-footer .action-secondary {
    background: #fff !important;
    border: 1.5px solid #d5d5d5 !important;
    border-radius: 8px !important;
    color: #2f2f2f !important;
    font-weight: 600 !important;
}
.modal-popup .modal-footer .action-secondary:hover,
.modal-popup .modal-footer .action-secondary:focus,
.modal-popup .modal-footer .action-secondary:active {
    background: #f4f4f4 !important;
    border-color: #bdbdbd !important;
    color: #1a1d20 !important;
}
/* Symmetrischer Fokus-Ring fuer beide Buttons (Tastatur-Bedienung) */
.modal-popup .modal-footer .action-primary:focus-visible,
.modal-popup .modal-footer .action-secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 16%, transparent) !important;
}


/* ==============================================
   Checkout-Critique Issue 02
   ============================================== */

/* #cart-totals: Kinder standen buendig an der border-top-Trennlinie (Detector-Befund) */
#cart-totals {
    padding-top: 12px;
}


/* ============================================================
   D1 — Sticky "Zur Kasse"-Bar (Warenkorb, mobil <=991px)
   Der Original-CTA in der .cart-summary scrollt auf langen
   Warenkoerben aus dem Blick. Diese fixe Bar haelt Gesamtbetrag
   + Checkout-Einstieg dauerhaft am unteren Rand erreichbar
   (Baymard: Mobile Sticky "Proceed to Checkout"). Erzeugt und
   an <body> gehaengt von js/o2e-cart-checkout-bar.js; loest den
   bestehenden Summary-Checkout-Button per .click() aus (KEIN
   eigener Checkout-Pfad). z-index 999 (Bar-Ebene der z-Skala:
   Bar 999 < Toast 1000 < Menue 1001 < Sheet 1002). Desktop
   >=992px komplett ausgeblendet; Original-CTA bleibt erhalten.
   ============================================================ */
.o2e-cart-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e7e7e7;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .08);
}
.o2e-cart-bar__total {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.o2e-cart-bar__total-label {
    font-size: .72rem;
    font-weight: 500;
    color: #6b6b6b;
}
.o2e-cart-bar__total-amount {
    font-size: 1.05rem;
    font-weight: 700;
    color: #222529;
    white-space: nowrap;
}
/* Scope .o2e-cart-bar .o2e-cart-bar__btn (0,2,0) statt der blossen Klasse
   (0,1,0): Portos button:not(.primary) liegt bei (0,1,1) und gewann bislang
   gegen die Bare-Klasse, plus das admin-generierte custom.css laedt noch
   spaeter -> Markenwerte zusaetzlich mit !important abgesichert. Optik 1:1
   zum Original-CTA .cart-summary .action.primary.checkout; Poppins-Fix
   analog zu checkout.css (CTA-Font-Bruch: Open Sans -> Poppins). */
.o2e-cart-bar .o2e-cart-bar__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 48px !important;
    padding: 12px 1.4rem !important;
    border: 1px solid var(--cta-surface, #127d66) !important;
    border-radius: 8px !important;
    background: var(--cta-surface, #127d66) !important;
    color: #fff !important;
    font-family: 'Poppins', 'Open Sans', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: .95rem;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.o2e-cart-bar .o2e-cart-bar__btn:hover {
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-color) 30%, transparent);
}
.o2e-cart-bar .o2e-cart-bar__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color) 28%, transparent);
}
/* Platz freihalten, damit die fixe Bar keinen Warenkorb-Inhalt (Coupon,
   Weiter-einkaufen) dauerhaft verdeckt. 64px Bar-Hoehe + Safe-Area. */
body.o2e-has-cart-bar {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 992px) {
    .o2e-cart-bar { display: none !important; }
    body.o2e-has-cart-bar { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .o2e-cart-bar .o2e-cart-bar__btn { transition: none; }
}

/* Portos #totop-Pfeil (footer.phtml, Style aus dem admin-generierten
   media/porto/web/css/custom.css: fixed, bottom:0, right:15px, z-index:9999)
   ueberlappt auf der Cart-Seite mobil den Leisten-Button (39x30px Overlap,
   gemessen) -> nur hier ausblenden. Kategorie-/Suchseiten behalten den
   Pfeil bewusst. !important gegen das spaeter geladene admin-CSS. */
@media (max-width: 991px) {
    body.checkout-cart-index #totop { display: none !important; }
}


/* ==================================================================
   Minicart auf der Warenkorbseite: "Warenkorb ansehen und bearbeiten"
   ist dort ein Self-Link (laedt dieselbe Seite neu) -> ausblenden.
   Dropdown selbst bleibt funktional (Artikel + "Zur Kasse"-CTA),
   damit das Icon konsistent zum Rest des Shops reagiert.
   !important gegen spaeter ladendes Porto-CSS.
   ================================================================== */
body.checkout-cart-index .minicart-wrapper a.action.viewcart {
    display: none !important;
}