/* ============================================================
   Cart Draft 2 – 18.09.2026
   Vorlage: Betreiber-Mockup (Screenshot 2026-09-18 173215).
   Ziele: klarere Linien (Akzentblau statt Haarlinie), Abschnitte durch
   Bänder getrennt, größere Überschriften, kompakter Footer ohne
   Zahlungsicons, schlanke AGB-Zeile, volle blaue Buttons, Warenkorb-
   Bilder größer als Upsell-Bilder, weniger Padding in den Karten.
   Wird NACH concept-c4c.css und den Inline-Styles des Templates geladen.
   ============================================================ */
.cart-modal{
  --d2-line:#1F4193;          /* Akzentblau für Rahmen */
  --d2-line-soft:#C7D2EE;     /* zarter Rand um Produktkacheln */
  --d2-band:#E9EDF8;          /* Trennband zwischen Abschnitten (= Infobar-Ton, wie Mockup) */
  --d2-thumb-bg:#DCE6FA;      /* Kachelhintergrund hinter Produktbild */
  --d2-hairline:rgba(0,0,0,.12);
}

/* ---------- Kopf ---------- */
.cart-head{padding:16px 24px;border-bottom:1px solid var(--d2-hairline)}
.cart-title{font-size:20px}
.cart-infobar{padding:11px 24px;font-size:13px}

/* ---------- Abschnitte ---------- */
.cart-section{padding:22px 24px 18px}
.cart-modal h4{
  font-size:19px;font-weight:700;letter-spacing:-0.01em;line-height:1.25;
  margin:0 0 14px 0 !important;
}
/* Trennband statt Haarlinie */
.cart-modal .hr{border:0;height:6px;background:var(--d2-band);margin:24px -24px}
body.sb-single-product #cartBundleOptionsWrap + .hr{display:none !important}

/* ---------- Bereits im Einkaufswagen ---------- */
.cart-items{gap:12px}
.ci{
  grid-template-columns:56px minmax(0,1fr) auto;gap:12px;
  border:1px solid var(--d2-line);border-radius:14px;
  padding:12px 12px 12px 12px;background:#fff;
}
.ci-thumb{
  width:56px;height:56px;border-radius:12px;padding:0;
  background:var(--d2-thumb-bg);border:1px solid var(--d2-line);object-fit:cover;
}
.ci-title{font-size:15px;font-weight:700;line-height:1.3}
.ci-meta{font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-price-wrap{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.ci-price{font-size:16px}
.ci-compare{font-size:12px;color:var(--ink-2);text-decoration:line-through;white-space:nowrap}
.ci-actions{gap:6px}
.ci-remove{width:28px;height:28px;color:var(--ink)}
.qtybox{height:38px;border:1px solid var(--d2-line);border-radius:999px;padding:2px 3px}
.qtybox input{width:30px;font-size:15px}
.ci-decrease,.ci-increase{width:28px;height:28px;font-size:17px}

/* ---------- Upsells ---------- */
.cart-upsells{gap:10px}
.ups-card{
  grid-template-columns:50px minmax(0,1fr) auto;gap:12px;
  border:1px dashed var(--d2-line);border-radius:14px;
  padding:10px 12px;background:#fff;
}
.ups-card.is-selected{border-style:solid;border-color:var(--d2-line);background:#fff}
.ups-thumb{
  width:50px;height:50px;border-radius:10px;padding:0;
  background:var(--d2-thumb-bg);border:1px solid var(--d2-line);object-fit:cover;
}
.ups-card.is-selected .ups-thumb{background:var(--d2-thumb-bg)}
.ups-title{font-size:15px}
.ups-sub{font-size:13px}
.ups-add{
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  min-height:36px;padding:0 14px;font-size:14px;border-radius:var(--r-btn);
}
.ups-add:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.ups-add.is-selected,.ups-add.is-selected:hover{background:#fff;border-color:var(--accent);color:var(--accent)}
.selected-remove--icon{border-color:var(--d2-line-soft)}

/* ---------- Vorteile ---------- */
.benefit-row{gap:6px}
.benefit-row .badge{font-size:12px;padding:4px 10px}

/* ---------- Footer ---------- */
.cart-sticky{
  gap:8px;
  padding:10px 24px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--d2-line);
}
.cart-terms,.cart-terms--sticky{
  background:transparent !important;border:0 !important;border-radius:0;
  padding:2px 0 !important;gap:10px;
  font-size:13px;font-weight:400;
}
/* einzeilig ab 375 px (13 px), ab 360 px mit 12.5 px */
.cart-terms--sticky label{font-size:13px !important;line-height:1.35 !important}
@media (max-width:374px){ .cart-terms--sticky label{font-size:12.5px !important} }
.cart-terms input{width:22px;height:22px;border-radius:6px;border:1px solid var(--d2-line)}
.cart-terms input:checked::before{width:10px;height:6px;border-left-width:2px;border-bottom-width:2px}
.cart-terms.is-error{background:transparent !important;border:0 !important}
.cart-terms.is-error label,.cart-terms.is-error a{color:var(--error)}
.cart-terms.is-error input{border-color:var(--error)}
.c4-cart-paylist{display:none !important}
.cart-summary{display:none !important}
.cart-checkout,#cartCheckout{min-height:56px;font-size:17px;border-radius:12px}
/* Kasse-Button immer vollblau (Betreiber 18.09.); AGB-Gate bleibt: Klick ohne AGB fällt auf den Container → rote AGB-Zeile + Shake */
#cartCheckout:disabled{
  background:var(--accent) !important;border-color:var(--accent) !important;color:#fff !important;
  opacity:1 !important;cursor:pointer;
}

/* ---------- Desktop ---------- */
@media (min-width:768px){
  .ci{grid-template-columns:72px minmax(0,1fr) auto}
  .ci-thumb{width:72px;height:72px}
  .ups-card{grid-template-columns:54px minmax(0,1fr) auto}
  .ups-thumb{width:54px;height:54px}
}

/* Upsell-Karten ohne Streichpreis (Streichpreis erst in der Artikelzeile nach dem Hinzufügen) */
.ups-card .c4-ups-compare,.ups-card .ups-compare{display:none !important}

/* ---------- Kaufpanel: Set-Karten (Auto-Added/Soft/Premium) – Bildkacheln wie im Cart ---------- */
.kit-card__product-img,
.kit-card.is-selected .kit-card__product-img{
  border:1px solid var(--d2-line, #1F4193);border-radius:10px;padding:0;
  background:var(--d2-thumb-bg, #DCE6FA);object-fit:cover;
}

/* ---------- Single: „Bereit für dein hellstes Lächeln?“ – Empfohlene Ergänzungen im Cart-Stil ---------- */
body.sb-single-product .cta-final .kit-hidden .b-item{
  gap:12px;padding:10px 12px;margin-bottom:10px;
  background:#fff;border:1px dashed var(--d2-line, #1F4193);border-radius:14px;box-shadow:none;
}
body.sb-single-product .cta-final .kit-hidden .b-item:hover{border-color:var(--d2-line, #1F4193)}
body.sb-single-product .cta-final .kit-hidden .b-item:has(.b-check:checked){
  border-style:solid;border-color:var(--d2-line, #1F4193);background:#fff;box-shadow:none;
}
body.sb-single-product .cta-final .kit-hidden .b-thumb,
body.sb-single-product .cta-final .kit-hidden .b-item:has(.b-check:checked) .b-thumb{
  width:50px;height:50px;border-radius:10px;padding:0;
  background:var(--d2-thumb-bg, #DCE6FA);border:1px solid var(--d2-line, #1F4193);object-fit:cover;
}
body.sb-single-product .cta-final .kit-hidden .b-name{font-size:15px}
body.sb-single-product .cta-final .kit-hidden .b-sub{font-size:13px}
body.sb-single-product .cta-final .kit-hidden .b-check{
  appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:6px;
  border:1px solid var(--d2-line, #1F4193);background:#fff;display:grid;place-items:center;
}
body.sb-single-product .cta-final .kit-hidden .b-check:checked{background:var(--accent);border-color:var(--accent)}
body.sb-single-product .cta-final .kit-hidden .b-check:checked::before{
  content:"";width:10px;height:6px;margin-top:-2px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}
body.sb-single-product .cta-final .kit-hidden .b-check:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

/* ============================================================
   Bundle-Varianten (Soft/Premium): gebündelter Artikel + „Alle Whitening-Optionen“
   Vorzüge des alten Designs bleiben: Inhalt des Bundles als Zeilen mit „+“,
   Streichpreis/Bundlepreis, Wechsel zwischen den Optionen direkt im Cart.
   ============================================================ */
.ci--bundle{
  padding:12px 12px 12px 12px;
  background:linear-gradient(180deg,#fff 0%,var(--alt) 100%); /* Farbverlauf bleibt (Betreiber 18.09.) */
  border:1px solid var(--d2-line);border-radius:14px;box-shadow:none;
}
.ci-bundle-head{padding-bottom:10px;border-bottom:1px solid var(--d2-line)}
.ci-bundle-title{font-size:18px}
.ci-bundle-items{gap:11px;margin-top:12px}
.ci-bundle-row--main{grid-template-columns:56px minmax(0,1fr)}
.ci-bundle-row--child{grid-template-columns:16px 46px minmax(0,1fr)}
.ci-bundle-thumb,.ci-bundle-row--child .ci-bundle-thumb{
  width:46px;height:46px;border-radius:10px;padding:0;
  background:var(--d2-thumb-bg);border:1px solid var(--d2-line);object-fit:cover;
}
.ci-bundle-row--main .ci-bundle-thumb{width:56px;height:56px;border-radius:12px} /* Kit wie vorher, nur das Zusatzprodukt kleiner */
.ci-bundle-plus{color:var(--d2-line);font-weight:700}
.ci-bundle-name{font-size:15px}
.ci-bundle-meta{font-size:12.5px}
.ci-bundle-footer{margin-top:12px;padding-top:0;border-top:0}
.ci--bundle .qtybox{background:#fff}
.ci-bundle-compare{font-size:12px}
.ci-bundle-price{font-size:18px}
/* Zusatzartikel (Pulver/Strips) im Bundle-Modus */
.ci--addon{padding:12px}
.ci-addon-main{grid-template-columns:56px minmax(0,1fr)}
.ci-addon-thumb,.ci-thumb.ci-addon-thumb{width:56px;height:56px}
/* Alle Whitening-Optionen: wie Upsell-Karten, gewählt = durchgezogen */
.bundle-options{gap:10px}
.bundle-option-card{
  gap:4px 12px;padding:10px 12px;background:#fff;
  border:1px dashed var(--d2-line);border-radius:14px;
}
.bundle-option-card.is-selected{border:1px solid var(--d2-line);background:#fff;box-shadow:none}
.bundle-option-title{font-size:15px}
.bundle-option-products{font-size:12.5px}
.bundle-option-media{gap:6px;margin-top:8px}
.bundle-option-thumb,.bundle-option-card.is-selected .bundle-option-thumb{
  width:40px;height:40px;border-radius:9px;padding:0;
  background:var(--d2-thumb-bg);border:1px solid var(--d2-line);object-fit:cover;
}
.bundle-option-plus{color:var(--d2-line);font-weight:700}
.bundle-option-add{
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  min-height:36px;padding:0 14px;font-size:14px;border-radius:var(--r-btn);
}
.bundle-option-add:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.bundle-option-add.is-selected,.bundle-option-add.is-selected:hover{background:#fff;border-color:var(--accent);color:var(--accent)}
@media (min-width:768px){
  .ci{padding:16px 16px 16px 16px;gap:16px}
  .ci--bundle{padding:16px 18px}
  .ci-bundle-items{gap:14px;margin-top:14px}
  .ci-bundle-row{gap:12px}
  .ci--addon{padding:16px}
  .ups-card{padding:14px 16px;gap:14px}
  .bundle-option-card{padding:14px 16px;gap:6px 14px}
  .ci-bundle-row--main{grid-template-columns:64px minmax(0,1fr)}
  .ci-bundle-row--main .ci-bundle-thumb{width:64px;height:64px}
  .ci-bundle-row--child{grid-template-columns:16px 50px minmax(0,1fr)}
  .ci-bundle-row--child .ci-bundle-thumb{width:50px;height:50px}
  .bundle-option-thumb,.bundle-option-card.is-selected .bundle-option-thumb{width:44px;height:44px}
}

/* Lange Produktnamen: Umbruch am weichen Trennstrich, nie in den Button ragen */
.ci-title,.ups-title,.ci-bundle-name,.bundle-option-title,.bundle-option-products{overflow-wrap:break-word;hyphens:manual;-webkit-hyphens:manual;min-width:0}

/* Variante ?sel=2: kein Papierkorb, „✓ Gewählt“ hebt die Auswahl per Klick auf */
body.sb-sel-2 .selected-remove--icon,body.sb-sel-2 .selected-remove--text,
body.sb-fixed-bundle-static #cartBundleOptions .selected-remove--icon,body.sb-fixed-bundle-static #cartBundleOptions .selected-remove--text,
body.sb-fixed-bundle-static #cartUpsells .selected-remove--icon,body.sb-fixed-bundle-static #cartUpsells .selected-remove--text{display:none !important}
body.sb-sel-2 .ups-add.is-selected,body.sb-sel-2 .bundle-option-add.is-selected,
body.sb-fixed-bundle-static .ups-add.is-selected,body.sb-fixed-bundle-static .bundle-option-add.is-selected{cursor:pointer}
body.sb-sel-2 .ups-add.is-selected:hover,body.sb-sel-2 .bundle-option-add.is-selected:hover,
body.sb-fixed-bundle-static .ups-add.is-selected:hover,body.sb-fixed-bundle-static .bundle-option-add.is-selected:hover{background:var(--accent-tint)}

/* ---------- Rückmeldung nach Upsell-Klick (Draft) ---------- */
.ups-add.is-flash{background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important}
.cart-toast{
  position:sticky;top:8px;z-index:3;
  display:flex;align-items:center;gap:8px;
  margin:0 24px;max-height:0;overflow:hidden;opacity:0;
  padding:0 12px;border-radius:10px;
  background:#E9F6EC;color:#1A7F37;font-size:13px;font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:max-height .25s ease,opacity .25s ease,padding .25s ease,margin .25s ease;
}
.cart-toast.is-visible{max-height:48px;opacity:1;padding:9px 12px;margin:10px 24px -4px}
.cart-toast__check{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#1A7F37;color:#fff;font-size:11px;flex:0 0 auto}