/* =================================================================
   SD24 SIDEBASKET  (Cart slide-out, global / PageType="all")
   Modernised look for the cart_dropdown sidebar.
   Uses --sd-* tokens from variables.css.
   ================================================================= */

/* ─── Off-Canvas Panel ──────────────────────────────────────────── */

.c-dp > .inside {
  background: #ffffff;
  padding: 1.5rem 0 1rem;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08);
  max-width: var(--sd-oc-width);
}

/* Snackys-Parent setzt 2rem mit gleicher Spezifität – !important schlägt das */
.c-dp .items-list {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.c-dp .close-sidebar {
  top: 0.875rem;
  right: 0.875rem;
}

.c-dp .close-sidebar .btn,
.c-dp .close-sidebar button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-bg-light);
  border: 1px solid var(--sd-border-faint);
  transition: var(--sd-transition-base);
}

.c-dp .close-sidebar .btn:hover,
.c-dp .close-sidebar button:hover {
  background: var(--sd-bg-subtle);
  border-color: var(--sd-border-light);
}

/* ─── Headline „Warenkorb" ──────────────────────────────────────── */

.c-dp .text-center.h3.mb-sm {
  font-family: var(--sd-font-heading);
  font-size: var(--sd-h4);
  font-weight: var(--sd-heading-font-weight);
  letter-spacing: var(--sd-tracking-tight);
  color: var(--sd-text);
  margin: 0 0 1rem;
  padding: 0 1.25rem;
  text-align: center;
}

.c-dp .sd24-cart-count {
  color: var(--sd-muted);
  font-weight: 400;
  font-size: .8em;
  margin-left: .25em;
}

/* ─── „Soeben hinzugefügt"-Chip ──────────────────────────────────
   Schlanke, sprechblasen-artige Bestätigung ersetzt den klobigen
   alert-success – grüner Check links, Produktname fett, schmaler
   Meta-Text drunter. Slide-in beim Öffnen des Sidebaskets. */

.c-dp .sd-added {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1.25rem 0.875rem;
  padding: 0.35rem 0.75rem 0.35rem 0.4rem;
  max-width: calc(100% - 2.5rem);
  background: #ffffff;
  border: 1px solid var(--sd-border-faint);
  border-radius: var(--sd-radius-base);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  /* 1) Slide-in beim Öffnen, 2) 5 s halten, 3) Fade-out + Collapse */
  animation:
    sd-added-in  .35s cubic-bezier(.2, .8, .2, 1) both,
    sd-added-out .6s  cubic-bezier(.4, 0, .2, 1) 5s forwards;
}

.c-dp .sd-added__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--sd-success);
  color: #ffffff;
  border-radius: 50%;
}

.c-dp .sd-added__icon svg {
  display: block;
}

.c-dp .sd-added__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.c-dp .sd-added__name {
  font-family: var(--sd-font-body);
  font-size: var(--sd-text-xs);
  font-weight: 600;
  color: var(--sd-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.c-dp .sd-added__meta {
  font-size: 10px;
  color: var(--sd-muted);
  line-height: 1.2;
  letter-spacing: 0;
}

@keyframes sd-added-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Zwei-Phasen-Ausblendung: erst Opacity (0–35 %), dann Höhe/Spacing
   (35–100 %) – so „klappt" der Hinweis sauber zusammen, ohne dass
   plötzlich eine Lücke entsteht. */
@keyframes sd-added-out {
  0% {
    opacity: 1;
    transform: translateY(0);
    max-height: 120px;
    margin-top: 0;
    margin-bottom: 0.875rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    border-top-width: 1px;
    border-bottom-width: 1px;
  }
  35% {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 120px;
    margin-bottom: 0.875rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    border-top-width: 1px;
    border-bottom-width: 1px;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-dp .sd-added {
    /* Slide-in entfällt, aber das Zusammenklappen nach 5 s bleibt –
       sonst hängt der Hinweis ewig im Sidebasket. */
    animation: sd-added-out .01s linear 5s forwards;
  }
}

/* Mobile: Inset an das schmalere items-list-Padding (1rem) anpassen */
@media (max-width: 767px) {
  .c-dp .sd-added {
    margin: 0 1rem 0.75rem;
    max-width: calc(100% - 2rem);
  }
}

/* ─── Football Progress (Sidebasket) ────────────────────────────── */

.c-dp .sdl-football-shipping {
  margin: 0;
}

/* ─── Artikel-Reihen ────────────────────────────────────────────── */

.c-dp .sc-item {
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--sd-border-faint);
}

.c-dp .sc-item:last-child {
  border-bottom: 0;
}

.c-dp .sc-item .flx-ac {
  align-items: flex-start;
  gap: 0.6rem;
}

/* Während AJAX-Update läuft, Sidebasket-Inhalt leicht ausgrauen + Spinner zentriert */
.cart-menu.sc-busy .items-list { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
.cart-menu .sc-item--removing { opacity: .4; transition: opacity .2s ease; }

/* .c-dp > .inside ist das fixed-positionierte Side-Panel
   (width: --sd-oc-width, height: 100vh). Spinner via top/left:50%
   + negativem margin zentriert – die transform-Property bleibt
   der Rotation-Animation vorbehalten. */
.cart-menu.sc-busy .c-dp > .inside::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 3px solid var(--sd-border-faint);
  border-top-color: var(--sd-primary);
  border-radius: 50%;
  animation: sc-spin .8s linear infinite;
  pointer-events: none;
  z-index: 100;
}
@keyframes sc-spin {
  to { transform: rotate(360deg); }
}

.c-dp .sc-item .cols-img {
  width: 60px;
  min-width: 60px;
}

.c-dp .sc-item .cols-img .img-ct,
.c-dp .sc-item .cols-img img {
  width: 100%;
  border-radius: var(--sd-radius-base);
  background: var(--sd-bg-light);
}

/* Action-Cluster oben rechts (Pen + ×) */
.c-dp .sc-item .sc-actions {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-left: auto;
  gap: .25rem;
  flex-shrink: 0;
}

/* Bottom-Row: Stepper links, Preis rechts, vertikal mittig zueinander */
.c-dp .sc-item .sc-item__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .625rem;
}

.c-dp .sc-item .editpos,
.c-dp .sc-item .sc-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--sd-border-faint);
  border-radius: var(--sd-radius-base);
  background: #ffffff;
  color: var(--sd-muted);
  text-decoration: none;
  cursor: pointer;
  transition: var(--sd-transition-base);
  flex-shrink: 0;
}

.c-dp .sc-item .editpos:hover,
.c-dp .sc-item .sc-remove:hover {
  background: var(--sd-bg-light);
  border-color: var(--sd-border-light);
  color: var(--sd-text);
}

.c-dp .sc-item .editpos .icon {
  width: 12px;
  height: 12px;
}

.c-dp .sc-item .editpos .icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.c-dp .sc-item .sc-remove svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* Stepper-Wrap sitzt in der Bottom-Row links; Stock-Hint floatet absolut
   drunter, damit das Erscheinen der Meldung den Stepper NICHT verschiebt. */
.c-dp .sc-item .sc-qty-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  position: relative;
}

.c-dp .sc-item .sc-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--sd-border-faint);
  border-radius: var(--sd-radius-pill);
  background: #ffffff;
  overflow: hidden;
  flex-shrink: 0;
}

.c-dp .sc-item .sc-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sd-text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.c-dp .sc-item .sc-qty__btn:hover {
  background: var(--sd-bg-light);
  color: var(--sd-primary);
}

/* Bootstrap-/Browser-Default-Outline beim Drücken / Fokussieren entfernen */
.c-dp .sc-item .sc-qty__btn:focus,
.c-dp .sc-item .sc-qty__btn:focus-visible,
.c-dp .sc-item .sc-qty__btn:active,
.c-dp .sc-item .sc-qty__btn:active:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: var(--sd-bg-light);
  color: var(--sd-primary);
}

.c-dp .sc-item .sc-qty__btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.c-dp .sc-item .sc-qty__input {
  width: 34px;
  height: 30px;
  border: 0;
  border-left: 1px solid var(--sd-border-faint);
  border-right: 1px solid var(--sd-border-faint);
  background: transparent;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--sd-text);
  padding: 0;
  -moz-appearance: textfield;
}

/* Stock-Hint: kleine rote Meldung absolut unter dem Stepper – verschiebt
   den Stepper nicht. */
.c-dp .sc-item .sc-stock-hint {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
  font-size: 11px;
  line-height: 1.25;
  color: var(--sd-primary);
  font-weight: 500;
}
.c-dp .sc-item .sc-stock-hint[hidden] {
  display: none !important;
}

/* Defensive Fallback: alte .sc-bottom-row-Struktur trotzdem mit
   Stepper links / Preis rechts darstellen (für den Fall, dass JTL
   den Smarty-Cache noch nicht neu kompiliert hat) */
.c-dp .sc-item .sc-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .5rem;
  width: 100%;
}

.c-dp .sc-item .sc-qty__input:focus {
  outline: none;
  background: var(--sd-bg-light);
}

.c-dp .sc-item .sc-qty__input::-webkit-outer-spin-button,
.c-dp .sc-item .sc-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Preis sitzt in der Bottom-Row rechts neben dem Stepper, vertikal zentriert */
.c-dp .sc-item .sc-item__bottom .cols-price {
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
  padding: 0;
  margin: 0;
  margin-left: auto;
}

.c-dp .sc-item .cols-name {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--sd-text-sm);
  line-height: var(--sd-leading-normal);
  color: var(--sd-muted);
}

/* Produktnamen-Zeile mit Toggle-Pfeil – Toggle bleibt oben verankert */
.c-dp .sc-item .cols-name .wkmw-row {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0.25rem 0 0.375rem;
  min-width: 0;
}

.c-dp .sc-item .cols-name .wkmw {
  flex: 1;
  min-width: 0;
  display: block;
  color: var(--sd-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.35;
  /* Standardmäßig 1 Zeile + Ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-dp .sc-item .cols-name .wkmw:hover {
  color: var(--sd-primary);
}

/* Aufgeklappter Zustand – kompletter Name sichtbar */
.c-dp .sc-item .cols-name.expanded .wkmw {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.c-dp .sc-item .cols-name .wkmw-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-bg-light);
  color: var(--sd-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .2s ease, background-color .15s ease, color .15s ease;
}

.c-dp .sc-item .cols-name .wkmw-toggle:hover {
  background: var(--sd-bg-subtle);
  color: var(--sd-text);
}

.c-dp .sc-item .cols-name .wkmw-toggle:focus-visible {
  outline: none;
  box-shadow: var(--sd-focus);
}

.c-dp .sc-item .cols-name.expanded .wkmw-toggle {
  transform: rotate(180deg);
}

.c-dp .sc-item .cols-name b {
  font-weight: 600;
  color: var(--sd-muted);
  font-size: var(--sd-text-xs);
}

.c-dp .sc-item .cols-name .wkmw-meta {
  margin-top: 0.375rem;
  font-size: var(--sd-text-xs);
  line-height: var(--sd-leading-snug);
  color: var(--sd-muted);
}

.c-dp .sc-item .cols-price {
  font-weight: 700;
  color: var(--sd-text);
  font-size: var(--sd-text-sm);
  margin-left: auto;
  white-space: nowrap;
  padding-left: 0.5rem;
}

/* ─── Summen-Block ──────────────────────────────────────────────── */

.c-dp .sc-sum {
  padding: 0.875rem 0 0.5rem;
  border-top: 1px solid var(--sd-border-faint);
  margin-top: 0.25rem;
}

.c-dp .sc-sum .cols-sums {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.125rem 0;
  font-size: var(--sd-text-sm);
}

.c-dp .sc-sum .sum-tt {
  font-family: var(--sd-font-heading);
  font-weight: var(--sd-heading-font-weight);
  font-size: var(--sd-text-md);
  color: var(--sd-text);
  margin-top: 0.25rem;
}

.c-dp .sc-sum .sum-tt .total strong,
.c-dp .sc-sum .sum-tt strong {
  font-size: var(--sd-text-md);
  color: var(--sd-text);
}

/* MwSt-Toggle: „(inkl. MwSt)" als klickbarer Link */
.c-dp .sc-sum .mwsttoggle-head {
  font-family: var(--sd-font-body);
  font-size: var(--sd-text-xs);
  font-weight: 400;
  color: var(--sd-muted);
  letter-spacing: 0;
  white-space: nowrap;
}

.c-dp .sc-sum .mwst-toggle {
  cursor: pointer;
  display: inline;
  padding: 6px 0;            /* vertikaler Tap-Hit ohne den horizontalen Text-Flow zu verbreitern */
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--sd-muted);
  transition: color .15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.c-dp .sc-sum .mwst-toggle:hover,
.c-dp .sc-sum .mwst-toggle:active,
.c-dp .sc-sum .mwst-toggle:focus-visible {
  color: var(--sd-text);
  outline: none;
}

/* Ausklappbarer Steuerpositionen-Block – standardmäßig versteckt */
.c-dp .sc-sum .mwst-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.c-dp .sc-sum .mwst-details > div {
  padding: 0.25rem 0 0;
  font-size: var(--sd-text-xs) !important;
  color: var(--sd-muted);
}

.c-dp .sc-sum .total-net {
  color: var(--sd-muted);
}


/* ─── Button-Group (Zum Warenkorb / Sicher zur Kasse) ───────────── */

/* Buttons erben das horizontale Padding von .items-list (1.25rem / mobil 1rem) */
.c-dp .fixed-btn-group {
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Snackys-Parent setzt .5rem margin-bottom auf den ersten Link – hier neutralisiert,
   damit nur das flex-gap (.375rem) zwischen den Buttons zählt.
   !important, weil der Parent-Bundle (snackys.css) je nach Cache-Reihenfolge zuerst greift. */
.c-dp .fixed-btn-group a:first-child {
  margin-bottom: 0 !important;
}

/* Beide Sidebar-Buttons: volle Breite + Pille + identische Höhe */
.c-dp .fixed-btn-group #toWarenkorb,
.c-dp .fixed-btn-group #toKasse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--sd-btn-height);
  padding: 0 var(--sd-btn-pad-x);
  border-radius: var(--sd-radius-pill);
  font-family: var(--sd-font-body);
  font-weight: var(--sd-btn-font-weight);
  font-size: var(--sd-text-sm);
  line-height: 1;
  text-decoration: none !important;
  transition: var(--sd-transition-base);
}

/* „Zum Warenkorb" – Sekundär */
.c-dp .fixed-btn-group #toWarenkorb {
  background: var(--sd-bg-light);
  color: var(--sd-text) !important;
  border: 1px solid var(--sd-border-faint);
  box-shadow: none;
}

.c-dp .fixed-btn-group #toWarenkorb:hover {
  background: var(--sd-bg-subtle);
  border-color: var(--sd-border-light);
}

/* Bootstrap-Default-Focus killen + sauberen aktiv-Zustand */
.c-dp .fixed-btn-group #toWarenkorb:focus,
.c-dp .fixed-btn-group #toWarenkorb:focus-visible,
.c-dp .fixed-btn-group #toWarenkorb.focus,
.c-dp .fixed-btn-group #toWarenkorb:active,
.c-dp .fixed-btn-group #toWarenkorb.active,
.c-dp .fixed-btn-group #toWarenkorb:active:focus {
  background: var(--sd-bg-subtle);
  color: var(--sd-text) !important;
  border-color: var(--sd-border-light);
  outline: 0 !important;
  box-shadow: var(--sd-focus) !important;
}

.c-dp .fixed-btn-group #toWarenkorb:active {
  transform: scale(.98);
}

/* „Sicher zur Kasse" – Primär */
.c-dp .fixed-btn-group #toKasse {
  background: var(--sd-primary);
  color: var(--sd-text-inverse) !important;
  border: 1px solid transparent;
  font-size: var(--sd-text-base);
  box-shadow: var(--sd-shadow);
}

.c-dp .fixed-btn-group #toKasse:hover {
  filter: brightness(.95);
}

.c-dp .fixed-btn-group #toKasse:focus,
.c-dp .fixed-btn-group #toKasse:focus-visible,
.c-dp .fixed-btn-group #toKasse.focus,
.c-dp .fixed-btn-group #toKasse:active,
.c-dp .fixed-btn-group #toKasse.active,
.c-dp .fixed-btn-group #toKasse:active:focus {
  background: var(--sd-primary);
  color: var(--sd-text-inverse) !important;
  border-color: transparent;
  outline: 0 !important;
  box-shadow: var(--sd-shadow), var(--sd-focus) !important;
  filter: brightness(.92);
}

.c-dp .fixed-btn-group #toKasse:active {
  transform: scale(.98);
}

/* ─── Legal Links (Datenschutz • Impressum) ─────────────────────── */

.c-dp .text-center.small.mt-xs {
  padding: 0 1.25rem;
  margin-top: 0.875rem !important;
  font-size: var(--sd-text-xs);
  color: var(--sd-muted);
}

.c-dp .text-center.small.mt-xs a {
  color: var(--sd-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-dp .text-center.small.mt-xs a:hover {
  color: var(--sd-text);
}

/* ─── Leerer Warenkorb ──────────────────────────────────────────── */

.c-dp .c-empt {
  margin: 1rem 1.25rem;
  padding: 2rem 1.25rem;
  border-radius: var(--sd-radius-base);
  border: 2px dashed var(--sd-border-faint);
  background: var(--sd-bg-light);
}

.c-dp .c-empt + p.text-center.text-muted {
  padding: 0 1.25rem;
  color: var(--sd-muted);
}

/* ─── Versand-Hinweis mit DHL-Logo ─────────────────────────────── */
/* Reine Info-Zeile – kleiner als die Zwischensumme */
.c-dp .sd24-shipping-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: .5rem;
  text-align: center;
  font-size: var(--sd-text-sm);
  color: var(--sd-muted);
}
.c-dp .sd24-shipping-info__text {
  text-decoration: underline;
}
.c-dp .sd24-shipping-info__dhl {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
.c-dp .sd24-shipping-info__dhl svg {
  display: block;
}

/* ─── Sum-Row Label: natürlicher Text-Flow (kein flex-gap) ──────── */
.c-dp .sc-sum .cols-sums .sum-label {
  min-width: 0;
  flex: 1 1 auto;
}

/* ─── Mobile ────────────────────────────────────────────────────── */

@media screen and (max-width: 767px) {
  .c-dp > .inside {
    max-width: 100vw;
    padding: 1.125rem 0 0.875rem;
  }
  .c-dp .items-list {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ─── Kleine Smartphones (≤ 480px) ──────────────────────────────────
   Klare Font-Hierarchie:
     Tier 1 — 14px  →  Zwischensumme/Total + „Verpackung und Versand"
     Tier 2 — 12px  →  Produktname, Item-Preis, Menge, Alert, Football-Heading
     Tier 3 — 11px  →  Art.Nr., „(inkl. MwSt)"-Parens, Steuerpositionen
   ─────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 480px) {

  /* ── Tier 1: Summary-Zeilen (Zwischensumme + Versand-Hinweis) ── */
  .c-dp .sc-sum .sum-tt,
  .c-dp .sc-sum .sum-tt .total strong,
  .c-dp .sc-sum .sum-tt strong,
  .c-dp .sd24-shipping-info {
    font-size: var(--sd-text-sm);   /* 14px */
  }

  /* ── Tier 2: Body (Cart-Items + globale Hinweise) ── */
  .c-dp .alert.alert-success,
  .c-dp .sc-item .cols-name,
  .c-dp .sc-item .cols-name .wkmw,
  .c-dp .sc-item .cols-price {
    font-size: var(--sd-text-xs);   /* 12px */
  }
  /* Zwischensumme-Zeile bleibt auf sm (14px) – mit Sum-Tier gleichauf */
  .c-dp .sc-sum .cols-sums {
    font-size: var(--sd-text-sm);   /* 14px */
  }
  .c-dp .sc-item .cols-name .wkmw {
    line-height: 1.3;
  }

  /* ── Tier 3: Meta (Art.Nr., MwSt-Parens, Steuerpositionen) ── */
  .c-dp .sc-item .cols-name .wkmw-meta,
  .c-dp .sc-item .cols-name b,
  .c-dp .sc-sum .mwsttoggle-head,
  .c-dp .sc-sum .mwst-details > div {
    font-size: 11px;
    line-height: 1.3;
  }

  /* ── Spacing/Layout (nicht-typographische Mobile-Anpassungen) ── */
  .c-dp .alert.alert-success {
    line-height: var(--sd-leading-snug);
    margin: 0 0 .5rem;
    padding: .35rem 0;
  }
  .c-dp .sc-item {
    padding: .75rem 0;
  }
  .c-dp .sc-item .cols-img {
    width: 48px;
    min-width: 48px;
  }
  .c-dp .sc-item .cols-price {
    padding-left: .35rem;
  }
  .c-dp .sc-item .editpos,
  .c-dp .sc-item .sc-remove {
    width: 20px;
    height: 20px;
  }
  .c-dp .sc-item .editpos .icon,
  .c-dp .sc-item .sc-remove svg {
    width: 11px;
    height: 11px;
  }
  /* Stepper auf Mobile leicht kompakter */
  .c-dp .sc-item .sc-qty__btn {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
  .c-dp .sc-item .sc-qty__input {
    width: 30px;
    height: 28px;
    font-size: 12px;
  }
  .c-dp .sc-item .sc-item__bottom {
    margin-top: .5rem;
  }
  .c-dp .sc-item .sc-stock-hint {
    font-size: 10.5px;
  }
  .c-dp .sc-sum {
    padding: .625rem 0 .375rem;
  }
}