/**
 * 16.10.2026: Warenkorb im neuen Look (Vorbild mydays) - Feinschliff v2 (Vorschlag).
 * Nur Optik - alle Regeln haengen an .cart-v2 (Klasse am <body> und am Wrapper-DIV),
 * Logik (Formulare, Versandarten, Namen, Actions) bleibt unveraendert.
 * Gegner bei der Spezifitaet: cart.css (IDs wie #checkout-summary, #rabat-wrapper),
 * global.css (.GWA .btn-primary mit !important) und der Inline-<style> aus lieferformat.phtml.
 * Passt zu cart-v2.proposed.js (verschiebt Lieferformat + Rabattcode) - funktioniert aber auch ohne.
 */
.cart-v2 {
  --mio:#A4006A; --mio-dark:#8a0059; --mio-soft:#F7E8F1;
  --page:#F5F4F4; --card:#fff; --line:#E3DFE1; --line-soft:#EEEBEC;
  --txt:#595959; --muted:#838383; --radius:12px;
}

/* ---------- Seite: hellgrauer Hintergrund, weisse Karten ---------- */
.cart-v2 .main-container { background:var(--page); }
.cart-v2 .main-container .main { background:transparent; }
.cart-v2 .checkout-step-1 { color:var(--txt); font-size:16px; line-height:1.5; padding-bottom:64px; }
.cart-v2 .checkout-navigation-wrapper { background:none; margin-bottom:28px; }

/* Breite begrenzen: Inhalt ~1240px, Spalten 1fr / 400px, Abstand 40px */
.cart-v2 .checkout-step-1 .container { max-width:1240px; padding:0 20px; box-sizing:border-box; }
.cart-v2 .checkout-step-1 .cs1-main-row { display:flex; flex-wrap:nowrap; align-items:flex-start; gap:40px; margin:0; }
.cart-v2 .checkout-step-1 .cs1-main-row > .cs1-left { flex:1 1 0%; width:auto; min-width:0; max-width:none; padding:0; }
.cart-v2 .checkout-step-1 .cs1-main-row > .cs1-right { flex:0 0 400px; width:400px; min-width:400px; max-width:400px; padding:0; padding-top:0 !important; /* cart.css 992-1279px: padding-top:40px!important */ }

/* ---------- Schritte 1-2-3 ---------- */
.cart-v2 .mio-steps { display:flex; align-items:flex-start; max-width:720px; margin:28px auto 0; padding:0 16px; }
.cart-v2 .mio-step { flex:0 0 120px; text-align:center; }
.cart-v2 .mio-step .dot { width:40px; height:40px; border-radius:50%; border:2px solid #C4C0C2; background:#fff; color:#999; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-weight:700; }
.cart-v2 .mio-step span { font-size:15px; color:#8A8A8A; }
.cart-v2 .mio-step.on .dot { background:var(--mio); border-color:var(--mio); color:#fff; }
.cart-v2 .mio-step.on span { color:var(--txt); font-weight:700; }
.cart-v2 .mio-bar { flex:1; height:2px; background:#DDD9DB; margin-top:20px; position:relative; }
.cart-v2 .mio-bar.half:after { content:""; position:absolute; left:0; top:0; width:50%; height:2px; background:var(--mio); }

/* ---------- Ueberschrift ---------- */
.cart-v2 h3.mio-cart-title { font-size:28px; font-weight:700; color:var(--txt); text-transform:none; margin:0 0 20px; }

/* ---------- EINE Karte: Produkte + Lieferformat ----------
   Die Produkt-DIVs stehen im Browser ausserhalb der Tabelle (direkt in .cs1-left).
   Jedes Produkt ist ein "Segment" (Rand oben/links/rechts), das Lieferformat schliesst die Karte unten ab. */
.cart-v2 .cs1-left > table { display:none; }
.cart-v2 .cs1-left > .checkout-1-hr,
.cart-v2 .cs1-left table .checkout-1-hr,
.cart-v2 #cs1-lieferformat > .checkout-1-hr { display:none; }

.cart-v2 .cs1-left > .cs1-one-product { position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; text-align:left; background:var(--card); border:1px solid var(--line); border-bottom:0; border-radius:0; padding:28px; margin:0; }
.cart-v2 .cs1-left > .cs1-one-product:first-child, .cart-v2 .cs1-left > h3.mio-cart-title + .cs1-one-product { border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }
/* Trennlinie zwischen zwei Produkten heller */
.cart-v2 .cs1-left > .checkout-1-hr + .cs1-one-product { border-top-color:var(--line-soft); }
/* Kein Lieferformat (z.B. Box-Bundle, Flasche): letztes Produkt schliesst die Karte (moderne Browser, :has) */
.cart-v2 .cs1-left:not(:has(> #cs1-lieferformat)) > .cs1-one-product:not(:has(~ .cs1-one-product)) { border-bottom:1px solid var(--line); border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius); margin-bottom:24px; }

/* Bild */
.cart-v2 .cs1-one-product .cs1op-picture { width:268px; flex:0 0 268px; min-width:268px; max-width:268px; padding-right:28px; }
.cart-v2 .cs1-one-product .cs1op-picture img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:6px; }

/* Text rechts */
.cart-v2 .cs1-one-product .cs1op-right-column { flex:1 1 0%; width:auto; min-width:0; max-width:none; display:flex; flex-direction:column; justify-content:space-between; align-self:stretch; }
.cart-v2 .cs1-one-product .cs1op-split { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.cart-v2 .cs1-one-product .cs1op-split + .cs1op-split { align-items:center; margin-top:20px; }
.cart-v2 .cs1-one-product .cs1op-right-column h4 { font-size:20px; font-weight:500; line-height:1.3; color:var(--txt); margin:0 0 6px; }
/* Titel-Link hat inline style="color:#7C7C7C" -> nur mit !important */
.cart-v2 .cs1-one-product .cs1op-right-column h4 a { color:var(--txt) !important; font-size:20px; font-weight:500; text-decoration:none; }
.cart-v2 .cs1-one-product .cs1op-right-column h4 a:hover { color:var(--mio) !important; }
.cart-v2 .cs1-one-product .cs1op-right-column p { font-size:15px; line-height:1.45; color:var(--muted); margin:0; }
.cart-v2 .cs1-one-product .cs1op-right-column .cs1op-price h4 { font-size:20px; font-weight:700; color:var(--txt); white-space:nowrap; margin:0; font-variant-numeric:tabular-nums; }
.cart-v2 .cs1-one-product .cs1op-price { text-align:right; color:var(--txt); }

/* Menge - / + (Pille) */
.cart-v2 .mio-qty { display:inline-flex; align-items:center; border:1.5px solid var(--txt); border-radius:99px; overflow:hidden; background:#fff; }
.cart-v2 .mio-qty button { border:0; background:none; width:44px; height:42px; font-size:20px; line-height:1; cursor:pointer; color:var(--txt); padding:0; }
.cart-v2 .mio-qty button:hover:not(:disabled) { background:#F4F2F3; }
.cart-v2 .mio-qty button:disabled { color:#C8C8C8; cursor:default; }
.cart-v2 .mio-qty b { min-width:34px; text-align:center; font-size:17px; font-weight:500; }
.cart-v2 .mio-qty + select.qty { display:none !important; }

/* Entfernen = runder X-Button oben rechts an der Karte, halb ueberlappend (Text versteckt, Bild bleibt) */
.cart-v2 .cs1-one-product .cs1op-split .delete-link { position:absolute; top:-15px; right:-15px; z-index:2; display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin:0; padding:0; border-radius:50%; background:#fff; border:1px solid #CFCACC; font-size:0; line-height:0; color:transparent; box-shadow:0 1px 3px rgba(0,0,0,.06); transition:border-color .2s, box-shadow .2s; }
.cart-v2 .cs1-one-product .cs1op-split .delete-link:hover { border-color:var(--txt); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.cart-v2 .cs1-one-product .cs1op-split .delete-link img.delete-close { width:12px; height:12px; margin:0; position:static; }
.cart-v2 .cs1-one-product .cs1op-split p { margin:0; }

/* Details-Link + Fenster */
.cart-v2 .mio-details-link { display:inline-block; margin-top:10px; color:var(--txt); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-size:15px; }
.cart-v2 .mio-details-link:hover { color:var(--mio); }
.mio-modal { position:fixed; inset:0; background:rgba(30,10,25,.45); display:none; align-items:center; justify-content:center; padding:16px; z-index:10000; }
.mio-modal.open { display:flex; }
.mio-modal .mio-box { background:#fff; border-radius:14px; max-width:720px; width:100%; padding:28px; max-height:90vh; overflow:auto; position:relative; text-align:left; color:#595959; }
.mio-modal .mio-box h3 { font-size:22px; margin:0 30px 14px 0; color:#595959; text-transform:none; }
.mio-modal .mio-box p { font-size:16px; line-height:1.55; color:#595959; }
.mio-modal .mio-x { position:absolute; top:14px; right:16px; border:0; background:none; font-size:26px; cursor:pointer; color:#595959; }
.mio-modal .mio-terms { border-top:1px solid #E6E1E4; margin-top:16px; padding-top:16px; font-size:15px; color:#444; }
.mio-modal img.mio-big { width:100%; border-radius:10px; display:block; }

/* ---------- Lieferformat: ruhige Zeilen statt Boxen (unterer Teil der Produktkarte) ---------- */
/* Gegner: Inline-<style> aus lieferformat.phtml (#cs1-lieferformat ... = 1 ID + 1-2 Klassen) */
.cart-v2 #cs1-lieferformat { background:var(--card); border:1px solid var(--line); border-top-color:var(--line-soft); border-radius:0 0 var(--radius) var(--radius); padding:26px 28px 22px; margin:0 0 24px; text-align:left; }
.cart-v2 #cs1-lieferformat h3 { font-size:20px; font-weight:500; color:var(--txt); text-transform:none; margin:0 0 6px; }
.cart-v2 #cs1-lieferformat .lieferformat-option { display:flex; flex-wrap:wrap; align-items:center; gap:0 16px; min-height:68px; padding:16px 2px; margin:0; border:0; border-bottom:1px solid var(--line-soft); border-radius:0; background:none; font-size:18px; color:var(--txt); cursor:pointer; }
.cart-v2 #cs1-lieferformat label.lieferformat-option:last-of-type { border-bottom:0; }
/* grosse Radio (24px), eigene Optik, Fokus sichtbar */
.cart-v2 #cs1-lieferformat .lieferformat-option input[type=radio] { -webkit-appearance:none; appearance:none; flex:0 0 24px; width:24px; height:24px; margin:0; border:2px solid #8F8A8D; border-radius:50%; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.cart-v2 #cs1-lieferformat .lieferformat-option input[type=radio]:checked { border-color:var(--mio); background:var(--mio); box-shadow:inset 0 0 0 4px #fff; }
.cart-v2 #cs1-lieferformat .lieferformat-option input[type=radio]:focus-visible { outline:2px solid var(--mio); outline-offset:2px; }
.cart-v2 #cs1-lieferformat .lieferformat-option:hover input[type=radio]:not(:checked) { border-color:var(--txt); }
.cart-v2 #cs1-lieferformat .lieferformat-name { flex:1 1 auto; font-weight:400; line-height:1.35; }
.cart-v2 #cs1-lieferformat .lieferformat-option.active .lieferformat-name { font-weight:500; }
/* Preise rechtsbuendig in einer Spalte */
.cart-v2 #cs1-lieferformat .lieferformat-price { flex:0 0 auto; min-width:96px; text-align:right; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cart-v2 #cs1-lieferformat .lieferformat-note { margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--muted); }

/* Vorschau unter der gewaehlten Option (Bild + Text) */
.cart-v2 .mio-prev { display:none; flex:0 0 100%; align-items:center; gap:16px; padding:14px 0 4px 40px; }
.cart-v2 .lieferformat-option.active .mio-prev { display:flex; }
.cart-v2 .mio-prev img { width:140px; aspect-ratio:3/2; object-fit:cover; border-radius:6px; border:1px solid var(--line-soft); cursor:zoom-in; }
.cart-v2 .mio-prev p { margin:0; font-size:15px; font-weight:400; line-height:1.45; color:var(--muted); }
.cart-v2 .mio-prev a { display:inline-block; margin-top:4px; color:var(--mio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-size:14px; }

/* Alte Amasty-Ueberschrift (nur bei Box-Bundle / Flasche sichtbar) ruhiger */
.cart-v2 #cs1-packagins { padding-top:0; }
.cart-v2 #cs1-packagins h3 { font-size:18px; font-weight:500; color:var(--txt); text-transform:none; margin:0 0 24px; }

/* ---------- Rabattcode ----------
   Ohne JS: kleine weisse Karte links unten. Mit JS: steckt in der Summenkarte, aufklappbar. */
.cart-v2 .cs1-left > #rabat-wrapper { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 28px; margin:0 0 24px; }
.cart-v2 #rabat-wrapper h3 { font-size:17px; font-weight:500; color:var(--txt); text-transform:none; margin:0 0 12px; }
.cart-v2 #rabat-wrapper .the-tooltip { width:20px; height:20px; font-size:13px; top:-2px; margin-left:4px; background:#F1EEF0; }
.cart-v2 #rabat-wrapper #discount-coupon-form { display:flex; gap:10px; align-items:stretch; }
.cart-v2 #rabat-wrapper #coupon_code { flex:1 1 auto; width:auto; max-width:none; min-width:0; height:48px; margin:0; padding:0 14px; border:1px solid #C9C4C6; border-radius:8px; font-size:16px; color:var(--txt); background:#fff; box-shadow:none; }
.cart-v2 #rabat-wrapper #coupon_code:focus { border-color:var(--mio); outline:0; box-shadow:0 0 0 3px rgba(164,0,106,.12); }
/* Button: .GWA .btn-primary setzt background mit !important */
.cart-v2 #rabat-wrapper #coupon_button { flex:0 0 auto; width:auto; max-width:none; height:48px; padding:0 20px; border:1.5px solid var(--mio) !important; border-radius:99px; background:#fff !important; color:var(--mio) !important; font-size:16px; font-weight:500; text-transform:none; }
.cart-v2 #rabat-wrapper #coupon_button:hover { background:var(--mio) !important; color:#fff !important; }
.cart-v2 #rabat-wrapper .couponnotice-wrapper:not(:empty) { margin-bottom:10px; font-size:14px; color:var(--muted); }

/* In der Summenkarte (nach JS-Umzug) */
.cart-v2 #checkout-summary #rabat-wrapper { background:none; border:0; border-radius:0; padding:0; margin:14px 0 4px; }
.cart-v2 #checkout-summary #rabat-wrapper > h3 { display:none; }
.cart-v2 #checkout-summary #rabat-wrapper:not(.mio-open) #discount-coupon-form,
.cart-v2 #checkout-summary #rabat-wrapper:not(.mio-open) .couponnotice-wrapper { display:none; }
.cart-v2 #checkout-summary #rabat-wrapper.mio-open #discount-coupon-form { margin-top:12px; }
.cart-v2 .mio-coupon-toggle { display:inline-block; font-size:16px; color:var(--mio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.cart-v2 .mio-coupon-toggle:hover { color:var(--mio-dark); }

/* ---------- Rechte Spalte: Summenkarte ---------- */
.cart-v2 #checkout-summary { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:none; padding:28px; text-align:left; }
/* "Gesamtsumme" steht unten nochmal als Summenzeile -> oben ruhiger Titel "Übersicht" */
.cart-v2 #checkout-summary > h3 { font-size:0; line-height:0; color:var(--txt); text-transform:none; margin:0 0 18px; }
.cart-v2 #checkout-summary > h3:before { content:"Übersicht"; display:block; font-size:22px; line-height:1.25; font-weight:700; }

.cart-v2 #checkout-summary #shopping-cart-totals-table { width:100%; border-collapse:collapse; font-size:17px; color:var(--txt); }
.cart-v2 #checkout-summary #shopping-cart-totals-table td { padding:7px 0; vertical-align:top; border:0; background:none; line-height:1.4; }
.cart-v2 #checkout-summary #shopping-cart-totals-table td + td { padding-left:16px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Produktname: bis zu 2 Zeilen statt fester 200px mit "..." */
.cart-v2 #checkout-summary #shopping-cart-totals-table td.cartlistname div { width:auto; max-width:none; padding-right:0; white-space:normal; overflow:visible; display:block; }
/* 20.10.2026: nur der Name max. 2 Zeilen, "(2 × …)" darunter bleibt immer sichtbar */
.cart-v2 #checkout-summary #shopping-cart-totals-table td.cartlistname .mio-li-name { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cart-v2 #checkout-summary #shopping-cart-totals-table .totals-separator td { padding:0; }
.cart-v2 #checkout-summary #shopping-cart-totals-table .totals-separator hr { margin:12px 0 10px; border:0; border-bottom:1px solid var(--line); }
/* Fuss: Nebenzeilen klein, letzte Zeile = Gesamtpreis gross */
.cart-v2 #checkout-summary #shopping-cart-totals-table > tfoot > tr > td { font-size:15px; color:var(--muted); }
.cart-v2 #checkout-summary #shopping-cart-totals-table > tfoot > tr:last-child > td { font-size:22px; font-weight:700; color:var(--txt); padding-top:4px; }
.cart-v2 #checkout-summary #shopping-cart-totals-table > tfoot > tr:last-child strong { font-weight:700; }
.cart-v2 #checkout-summary .ugiftcertinfo { color:var(--mio); }
.cart-v2 #checkout-summary .spacediv { display:none; }

.cart-v2 #checkout-summary #free-delivery { display:flex; justify-content:flex-start; align-items:center; gap:6px; margin:14px 0 0; font-size:15px; font-weight:500; color:var(--mio); text-align:left; }
.cart-v2 #checkout-summary #free-delivery img { position:static; margin:0; width:16px; height:auto; }

.cart-v2 #checkout-summary ul.checkout-types { list-style:none; margin:22px 0 0; padding:0; text-align:left; }
.cart-v2 #checkout-summary ul.checkout-types li { float:none; clear:none; margin:0; padding:0; }
.cart-v2 #checkout-summary ul.checkout-types li p { margin:0; }
/* "Zur Kasse": grosse Pille, normale Schreibweise.
   Text im Template ist "ZUR KASSE GEHEN" (Versalien im HTML) -> Text ausblenden, eigener Text per ::after. */
.cart-v2 #checkout-summary .checkout-types .btn-proceed-checkout { display:flex !important; align-items:center; justify-content:center; float:none; width:100%; max-width:none !important; height:60px !important; padding:0 24px !important; border:0 !important; border-radius:999px !important; background:var(--mio) !important; color:#fff !important; font-size:0 !important; line-height:1 !important; text-transform:none !important; letter-spacing:0; text-decoration:none; box-shadow:none; }
.cart-v2 #checkout-summary .checkout-types .btn-proceed-checkout:after { content:"Zur Kasse"; font-size:19px; font-weight:500; color:#fff; }
.cart-v2 #checkout-summary .checkout-types .btn-proceed-checkout:hover,
.cart-v2 #checkout-summary .checkout-types .btn-proceed-checkout:focus { background:var(--mio-dark) !important; color:#fff !important; }
.cart-v2 #checkout-summary .checkout-types .btn-proceed-checkout:focus-visible { outline:3px solid rgba(164,0,106,.35); outline-offset:3px; }
.cart-v2 #checkout-summary .checkout-types .btn-proceed-checkout.no-checkout { background:#D9D6D8 !important; pointer-events:none; }

/* Zahlungsarten: klein und leise */
.cart-v2 #checkout-summary .or-text { margin:20px 0 8px; font-size:13px; font-weight:400; color:var(--muted); text-align:center; }
.cart-v2 #checkout-summary > img.img-fluid { display:block; max-width:100%; height:auto; margin:0 auto; }

/* Vertrauensblock: keine eigene Karte, ruhig auf grauem Grund */
.cart-v2 .mio-trust { background:none; border:0; border-radius:0; padding:20px 4px 0; margin:0; text-align:left; }
.cart-v2 .mio-trust h4 { margin:0 0 10px; font-size:16px; font-weight:500; color:var(--txt); }
.cart-v2 .mio-trust ul { list-style:none; padding:0; margin:0; }
.cart-v2 .mio-trust li { padding:4px 0; font-size:15px; line-height:1.45; color:var(--txt); }
.cart-v2 .mio-trust li:before { content:"✓"; color:var(--mio); font-weight:700; margin-right:10px; }
.cart-v2 #be-save { display:none; }

/* ---------- Tablet / kleiner Desktop ---------- */
@media (min-width:1025px) and (max-width:1199px) {
  .cart-v2 .checkout-step-1 .cs1-main-row { gap:28px; }
  .cart-v2 .checkout-step-1 .cs1-main-row > .cs1-right { flex-basis:340px; width:340px; min-width:340px; max-width:340px; }
  .cart-v2 .cs1-one-product .cs1op-picture { width:220px; flex-basis:220px; min-width:220px; max-width:220px; padding-right:24px; }
}
/* X-Button nach innen, wenn neben der Karte kein Platz ist */
@media (max-width:1199px) {
  .cart-v2 .cs1-one-product .cs1op-split .delete-link { top:12px; right:12px; }
  .cart-v2 .cs1-one-product .cs1op-split:first-child { padding-right:34px; }
}
/* Spalten untereinander */
@media (max-width:1024px) {
  .cart-v2 .checkout-step-1 .cs1-main-row { flex-wrap:wrap; gap:0; }
  .cart-v2 .checkout-step-1 .cs1-main-row > .cs1-left,
  .cart-v2 .checkout-step-1 .cs1-main-row > .cs1-right { flex:0 0 100%; width:100%; min-width:100%; max-width:100%; }
  .cart-v2 .checkout-step-1 .cs1-main-row > .cs1-right { margin-top:28px; } /* 19.10.2026: mehr Luft nach 'Gutschein einloesen' */
}

/* ---------- Mobil ---------- */
@media (max-width:767px) {
  .cart-v2 .checkout-step-1 .container { padding:0 1px; } /* 19.10.2026: Karten gleich breit wie in der Kasse (Rand ~11px) */
  .cart-v2 .mio-steps { margin-top:18px; }
  .cart-v2 .mio-step { flex-basis:90px; }
  .cart-v2 .mio-step span { font-size:13px; }
  .cart-v2 .checkout-navigation-wrapper { margin-bottom:18px; }
  .cart-v2 h3.mio-cart-title { font-size:24px; margin-bottom:14px; }
  .cart-v2 .cs1-left > .cs1-one-product { padding:18px; }
  .cart-v2 .cs1-one-product .cs1op-picture { width:122px; flex-basis:122px; min-width:122px; max-width:122px; padding-right:14px; }
  .cart-v2 .cs1-one-product .cs1op-right-column h4 a,
  .cart-v2 .cs1-one-product .cs1op-right-column .cs1op-price h4 { font-size:17px; overflow-wrap:anywhere; hyphens:auto; }
  .cart-v2 .cs1-one-product .cs1op-right-column p { font-size:14px; }
  .cart-v2 .cs1-one-product .cs1op-split { gap:12px; }
  .cart-v2 #cs1-lieferformat { padding:20px 18px 16px; }
  .cart-v2 #cs1-lieferformat h3 { font-size:18px; }
  .cart-v2 #cs1-lieferformat .lieferformat-option { min-height:58px; padding:14px 0; gap:0 12px; font-size:16px; }
  .cart-v2 #cs1-lieferformat .lieferformat-price { min-width:76px; }
  .cart-v2 .mio-prev { padding-left:36px; }
  .cart-v2 .mio-prev img { width:110px; }
  .cart-v2 .cs1-left > #rabat-wrapper { padding:18px; }
  .cart-v2 #checkout-summary { padding:22px 18px; }
  .cart-v2 #checkout-summary #shopping-cart-totals-table { font-size:16px; }
}
@media (max-width:575px) {
  /* cart.css: #checkout-summary { padding:20px 0 } -> Karte behalten */
  .cart-v2 #checkout-summary { padding:20px 16px; box-shadow:none; }
  .cart-v2 .cs1-one-product .cs1op-picture { width:110px; flex-basis:110px; min-width:110px; max-width:110px; padding-right:12px; }
  /* Platz fuer die Sticky-Box unten */
  /* 19.10.2026: Platz fuer die Sticky-Box ans Seitenende (unter den Footer) statt grauer Luecke unter dem Vertrauensblock */
  .cart-v2 .checkout-step-1 { padding-bottom:8px; }
  body.cart-v2 { padding-bottom:calc(120px + env(safe-area-inset-bottom)); }
  /* Mobile Zeile unter dem Produkt: Menge-Select + "Entfernen" als Textlink */
  .cart-v2 .cs1-one-product .product-mobile-bottom { margin-top:14px; }
  .cart-v2 .cs1-one-product .product-mobile-bottom select { height:40px; padding:0 34px 0 14px; border:1.5px solid var(--txt); border-radius:99px; background-color:#fff; font-size:15px; color:var(--txt); margin-right:12px; }
  .cart-v2 .cs1-one-product .product-mobile-bottom .delete-link { margin-left:0; font-size:15px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
  .cart-v2 .cs1-one-product .product-mobile-bottom .delete-link img.delete-close { display:none; }
  /* Sticky-Box: gleiche Pille, normale Schreibweise */
  .cart-v2 #checkout-mobile-only-sticky { padding:12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -2px 12px rgba(0,0,0,.08); }
  .cart-v2 #checkout-mobile-only-sticky p:nth-child(1) { font-size:17px; color:var(--txt); margin-bottom:10px; }
  .cart-v2 #checkout-mobile-only-sticky .btn-proceed-checkout { height:52px !important; padding:0 !important; border:0 !important; border-radius:999px !important; background:var(--mio) !important; color:#fff !important; font-size:0 !important; text-transform:none !important; }
  .cart-v2 #checkout-mobile-only-sticky .btn-proceed-checkout:after { content:"Zur Kasse"; display:block; font-size:17px; line-height:52px; font-weight:500; color:#fff; }
  .cart-v2 #checkout-mobile-only-sticky .btn-proceed-checkout:hover { background:var(--mio-dark) !important; color:#fff !important; }
}

/* 16.10.2026: Schritt 2 im Warenkorb klickbar (wie mydays) */
.cart-v2 a.mio-step-link { text-decoration:none; cursor:pointer; }
.cart-v2 a.mio-step-link:hover .dot { border-color:#A4006A; color:#A4006A; }
.cart-v2 a.mio-step-link:hover span { color:#595959; }

/* 17.10.2026: Ueberschrift ueber beiden Spalten - linke Karte und rechte Uebersicht beginnen auf einer Hoehe */
.cart-v2 .checkout-step-1 > .container > h3.mio-cart-title { margin:0 0 20px; }

/* 17.10.2026: Leerer Warenkorb - kompakt, Kurse schon auf dem ersten Bildschirm (wie mydays) */
.cart-v2-empty .col-main > .page-title, .cart-v2-empty .cart-empty { display:none; }
.mio-empty { text-align:center; max-width:640px; margin:28px auto 36px; padding:0 16px; }
.mio-empty-icon { width:64px; height:64px; border-radius:50%; background:#F7E8F1; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.mio-empty-icon svg { width:34px; height:34px; }
.mio-empty h1 { font-size:26px; font-weight:bold; color:#595959; text-transform:none; margin:0 0 8px; }
.mio-empty p { font-size:16px; color:#6B6B6B; margin:0 0 20px; }
.mio-empty-btn { display:inline-block; background:#A4006A; color:#fff !important; border-radius:99px; padding:14px 34px; font-size:17px; font-weight:bold; text-decoration:none !important; }
.mio-empty-btn:hover { background:#8a0059; }
.mio-empty-inspiration { max-width:1240px; margin:0 auto 48px; padding:0 16px; }
.mio-insp-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px; }
.mio-insp-head h2 { font-size:24px; font-weight:bold; color:#595959; text-transform:none; margin:0; }
.mio-insp-head a { color:#A4006A; text-decoration:underline; font-size:16px; white-space:nowrap; }
.mio-insp-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.mio-insp-card { display:flex; flex-direction:column; background:#fff; border:1px solid #E6E1E4; border-radius:12px; overflow:hidden; text-decoration:none !important; color:#595959; transition:box-shadow .15s; }
.mio-insp-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.08); }
.mio-insp-img { display:block; aspect-ratio:16/10; overflow:hidden; background:#F1EAEE; }
.mio-insp-img img { width:100%; height:100%; object-fit:cover; display:block; }
.mio-insp-body { display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; flex:1; }
.mio-insp-body strong { font-size:16px; line-height:1.3; color:#595959; }
.mio-insp-body em { font-style:normal; font-size:14px; color:#6B6B6B; }
.mio-insp-body b { margin-top:auto; padding-top:6px; font-size:17px; color:#595959; text-align:right; }
@media (max-width:991px) { .mio-insp-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:767px) { .mio-empty h1 { font-size:22px; } .mio-empty { margin-top:20px; } .mio-insp-grid { gap:12px; } .mio-insp-head h2 { font-size:20px; } }

/* 17.10.2026: waehrend Menge/Lieferformat gespeichert werden - Zahlen leicht ausgegraut statt Seite neu laden */
.cart-v2.mio-busy #checkout-summary, .cart-v2.mio-busy .cs1op-price, .cart-v2.mio-busy .lieferformat-price { opacity:.45; transition:opacity .15s; }
.cart-v2.mio-busy #amgiftwrap-loading { visibility:hidden !important; }

/* 17.10.2026: Zahlungs-Logos (cards_voucher.png) haben unten ~57% transparente Flaeche - abschneiden, sonst leerer weisser Block in der Uebersicht */
.cart-v2 #checkout-summary img.img-fluid[src*="cards_voucher"] { width:100%; height:auto; aspect-ratio:399 / 78; object-fit:cover; object-position:top center; }

/* 17.10.2026: Block "Gutschein einloesen" unter dem Lieferformat (wie mydays) - nur Hinweis + Link zur Einloese-Seite */
.cart-v2 details.mio-redeem { margin:20px 0 0; border-top:1px solid #E6E1E4; border-bottom:1px solid #E6E1E4; }
.cart-v2 details.mio-redeem summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:16px 2px; font-size:19px; font-weight:bold; color:#595959; }
.cart-v2 details.mio-redeem summary::-webkit-details-marker { display:none; }
.cart-v2 details.mio-redeem summary:after { content:"\2304"; margin-left:auto; font-size:22px; line-height:1; color:#595959; transition:transform .15s; }
.cart-v2 details.mio-redeem[open] summary:after { transform:rotate(180deg); }
.cart-v2 .mio-redeem-ic { width:44px; height:44px; border-radius:50%; background:#F7E8F1; display:flex; align-items:center; justify-content:center; font-size:20px; }
.cart-v2 .mio-redeem-body { padding:0 2px 18px 58px; font-size:16px; color:#595959; }
.cart-v2 .mio-redeem-body p { margin:0 0 10px; }
.cart-v2 .mio-redeem-body ol { margin:0 0 14px; padding-left:20px; }
.cart-v2 .mio-redeem-body li { margin:4px 0; }
.cart-v2 .mio-redeem-link { color:#A4006A; text-decoration:underline; font-weight:bold; }
@media (max-width:767px) { .cart-v2 .mio-redeem-body { padding-left:2px; } }
.cart-v2 .mio-redeem-body ol { list-style:decimal !important; }
.cart-v2 .mio-redeem-body ol li { list-style:decimal !important; display:list-item !important; }
.cart-v2 details.mio-redeem summary:after { content:""; width:10px; height:10px; border-right:2px solid #595959; border-bottom:2px solid #595959; transform:rotate(45deg); margin-right:6px; font-size:0; }
.cart-v2 details.mio-redeem[open] summary:after { transform:rotate(-135deg); }

/* 17.10.2026: ganze rechte Spalte sticky (Uebersicht + Vertrauensblock zusammen) - nur Desktop */
@media (min-width:1025px) {
  .cart-v2.mio-right-sticky .checkout-step-1 .cs1-main-row { align-items:flex-start; }
  .cart-v2.mio-right-sticky .checkout-step-1 .cs1-main-row > .cs1-right { position:sticky; top:24px; align-self:flex-start; }
  .cart-v2.mio-right-sticky #checkout-summary { position:static !important; top:auto !important; width:auto !important; }
  .cart-v2.mio-right-sticky .cs1-right > div[style*="height"]:empty { display:none !important; }
}
/* overflow:hidden am Seiten-Container verhindert position:sticky - stattdessen flow-root (haelt Floats trotzdem zusammen) */
@media (min-width:1025px) {
  .cart-v2.mio-right-sticky .main-container { overflow:visible !important; display:flow-root; }
}

/* 19.10.2026 Mobil wie mydays: Foto + Titel oben, darunter Menge links und Preis rechts;
   alte Mobil-Zeile (Menge-Select + "Entfernen") weg, das X oben bleibt; Lieferformat in einer Zeile */
@media (max-width:767px) {
  .cart-v2 .cs1-one-product .product-mobile-bottom { display:none !important; }
  .cart-v2 .cs1-left > .cs1-one-product { display:grid !important; grid-template-columns:110px minmax(0,1fr); column-gap:14px; row-gap:14px; align-items:start; }
  .cart-v2 .cs1-one-product .cs1op-picture { grid-column:1; grid-row:1; width:110px !important; min-width:0 !important; max-width:none !important; padding:0 !important; }
  .cart-v2 .cs1-one-product .cs1op-right-column,
  .cart-v2 .cs1-one-product .cs1op-right-column > .cs1op-split { display:contents !important; }
  .cart-v2 .cs1-one-product .cs1op-right-column > .cs1op-split:first-child > div:first-child { grid-column:2; grid-row:1; padding-right:30px; }
  .cart-v2 .cs1-one-product .cs1op-right-column > .cs1op-split:last-child > div:first-child { grid-column:1 / 2; grid-row:2; align-self:center; }
  .cart-v2 .cs1-one-product .cs1op-right-column .cs1op-price { display:block !important; grid-column:2; grid-row:2; align-self:center; text-align:right; }
  .cart-v2 .cs1-one-product .cs1op-right-column > .cs1op-split:last-child > div:last-child { grid-column:2; grid-row:1; width:0; height:0; overflow:visible; }
  .cart-v2 .cs1-one-product .cs1op-right-column h4 a { font-size:16px; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; word-break:normal; } /* langes Wort: Silbentrennung mit Strich statt Bruch mitten im Wort */
  .cart-v2 #cs1-lieferformat .lieferformat-name { flex:1 1 0; min-width:0; }
}

/* 19.10.2026: waehrend Menge/Lieferformat gespeichert werden, nicht schon zur Kasse springen */
.cart-v2.mio-busy .checkout-types a, .cart-v2.mio-busy .checkout-types button, .cart-v2.mio-busy #checkout-mobile-only-sticky a, .cart-v2.mio-busy #checkout-mobile-only-sticky button, .cart-v2.mio-busy .mio-steps a { pointer-events:none; opacity:.6; }
/* 20.10.2026: MwSt-Zeile klein und grau (ist im Betrag enthalten, kein weiterer Posten) */
body.cart-v2 #shopping-cart-totals-table tr.summary-total td { font-size:13px !important; font-weight:400 !important; color:#838383 !important; }
/* 20.10.2026: Einheitliche Schriften Warenkorb = Kasse (Olha) */
.cart-v2 .cs1op-split h4 a { color:var(--txt) !important; } /* Name war per Inline-Style heller (#7C7C7C) */
.cart-v2 #shopping-cart-totals-table tbody td, .cart-v2 #shopping-cart-totals-table .cartlistname div { font-size:16px !important; }
.cart-v2 #cs1-lieferformat h3 { font-weight:700 !important; }
/* 20.10.2026: Handy - nur ein "Zur Kasse" im Bild (wie mydays): Leiste faehrt weg, solange der Knopf in der Uebersicht sichtbar ist */
@media (max-width:575px) {
  .cart-v2 #checkout-mobile-only-sticky { transition:transform .25s ease, visibility .25s; }
  body.cart-v2.mio-sticky-off #checkout-mobile-only-sticky { transform:translateY(110%); visibility:hidden; }
}