/* ============================================================
   Lagertechnik Direkt — Warenkorb (Paket P9)
   Komponenten-CSS. Basis-Tokens/Buttons/Header stehen in site.css
   und werden nur wiederverwendet (site.css wird NICHT verändert).
   ============================================================ */

.cart-page { padding: clamp(26px,4vw,44px) 0 80px; }
.cart-page .crumbs { color: var(--muted); font-size: var(--fs-ms); margin-bottom: .6rem; }
.cart-page .crumbs a:hover { color: var(--text); }

.cart-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.cart-head h1 { font-size: var(--fs-h2); }
.cart-head .muted { color: var(--muted); font-weight: var(--fw-medium); font-size: var(--fs-md); font-family: 'Inter',sans-serif; }
.cart-head .muted b { color: var(--red); }

/* ---------- Layout: Artikel + Zusammenfassung ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; }
.cart-items { min-width: 0; }
.cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.cart-row {
  display: grid;
  grid-template-columns: 84px 1fr auto auto 40px;
  grid-template-areas: "art info qty prices remove";
  gap: 18px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
  padding: 14px;
}
.cart-art {
  grid-area: art; width: 84px; aspect-ratio: 4/3; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--steel-2);
  background: var(--panel-2); /* Design-Refresh 2026-07-16 P6: Medienfläche flach (Radial raus) */
  border: 1px solid var(--line);
}
.cart-art svg { width: 62%; }
.cart-art.has-photo { background: #fff; overflow: hidden; }
.cart-art.has-photo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

.cart-info { grid-area: info; min-width: 0; }
.cart-sys { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--steel-2); font-weight: var(--fw-semibold); }
.cart-name { display: block; font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--text); margin: .25rem 0 .3rem; line-height: 1.3; overflow-wrap: anywhere; }
.cart-meta { color: var(--muted); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: .15rem .7rem; }
.cart-meta span { white-space: nowrap; }
.cart-flag {
  display: inline-block; margin-top: .45rem; font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  color: var(--red); background: rgba(226,0,26,.1); border: 1px solid rgba(226,0,26,.25);
  padding: .14rem .55rem; border-radius: 999px;
}

/* Mengen-Stepper */
.cart-qty {
  grid-area: qty; display: inline-flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--ink); overflow: hidden;
}
.qty-btn {
  width: 34px; height: 36px; display: grid; place-items: center; background: transparent;
  border: none; color: var(--muted-2); font-size: var(--fs-xl); line-height: 1; cursor: pointer; transition: .15s var(--ease);
}
.qty-btn:hover { color: var(--text); background: rgba(0,0,0,.04); }
.qty-input {
  width: 48px; height: 36px; text-align: center; border: none; background: transparent;
  color: var(--text); font-weight: var(--fw-semibold); font-size: var(--fs-base); -moz-appearance: textfield; appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-prices { grid-area: prices; text-align: right; display: flex; flex-direction: column; line-height: 1.3; min-width: 92px; }
.cart-line { font-family: 'Sora',sans-serif; font-weight: var(--fw-bold); font-size: var(--fs-xl); color: var(--text); font-variant-numeric: tabular-nums; }
.cart-unit { font-size: var(--fs-xs); color: var(--muted); }

.cart-remove {
  grid-area: remove; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); cursor: pointer; transition: .18s var(--ease);
}
.cart-remove:hover { color: var(--red-text); border-color: var(--red); background: rgba(226,0,26,.12); }
.cart-remove svg { width: 18px; height: 18px; }

.cart-clear {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 16px;
  background: none; border: none; color: var(--muted); font-size: var(--fs-ms); cursor: pointer;
  padding: .4rem .2rem; transition: .15s var(--ease);
}
.cart-clear:hover { color: var(--red); }

/* ---------- Zusammenfassung ---------- */
.cart-summary {
  position: sticky; top: 88px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); padding: 22px;
}
.cart-summary h2 { font-size: var(--fs-xl); margin-bottom: 14px; }
.sum { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.sum > div { display: flex; justify-content: space-between; gap: 14px; font-size: var(--fs-base); color: var(--muted-2); }
.sum > div[hidden] { display: none; }   /* QA-Fix: [hidden] schlägt sonst gegen display:flex fehl (Mindermengenzuschlag +0,00 €) */
.sum dt { margin: 0; }
.sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.sum .save dt, .sum .save dd { color: var(--good-text); }
.sum .save dd { font-weight: var(--fw-semibold); }
.sum-ship dd { color: var(--muted); }
.sum-total {
  border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .85rem;
  align-items: baseline; color: var(--text) !important;
}
.sum-total dt { font-family: 'Sora',sans-serif; font-weight: var(--fw-bold); font-size: var(--fs-md); }
.sum-total dd { font-family: 'Sora',sans-serif; font-weight: var(--fw-bold); font-size: var(--fs-2xl); color: var(--text); }

.ship-note { color: var(--muted); font-size: var(--fs-sm); margin-top: .8rem; line-height: 1.5; }
/* P2 (Audit 2026-07-05): Skonto als Hinweis (kein Schein-Abzug) + „+ Fracht"-Zusatz an der Endsumme. */
.skonto-hint { color: var(--muted); font-size: var(--fs-sm); margin-top: .4rem; line-height: 1.5; }
.sum-total dd small { font-family: 'Inter',sans-serif; font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--muted); }
.quote-note {
  font-size: var(--fs-sm); color: var(--muted-2); margin-top: .8rem; line-height: 1.45;
  background: rgba(226,0,26,.07); border: 1px solid rgba(226,0,26,.2); padding: .6rem .7rem; border-radius: 10px;
}
.quote-note b { color: var(--text); }
.cart-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 18px; }
.cart-actions .btn { width: 100%; }
.trust-mini { color: var(--muted); font-size: var(--fs-xs); margin-top: .9rem; text-align: center; }

/* ---------- Leerer Zustand ---------- */
.cart-empty {
  text-align: center; padding: 70px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  background: var(--panel);
}
.cart-empty-ico { color: var(--steel); }
.cart-empty h2 { font-size: var(--fs-3xl); }
.cart-empty p { color: var(--muted-2); max-width: 46ch; }

/* ---------- A11y: sichtbarer Tastatur-Fokus ---------- */
.cart-page a:focus-visible,
.cart-page button:focus-visible,
.cart-page input:focus-visible,
.site-header .icon-btn:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
@media (max-width: 560px) {
  .cart-row {
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "art info remove"
      ". qty qty"
      ". prices prices";
    gap: 10px 14px; align-items: center;
  }
  .cart-art { width: 64px; align-self: start; }
  .cart-prices { min-width: 0; align-items: flex-start; }
  .cart-remove { align-self: start; }
  /* P35 — Tap-Ziele >=44px auf Touch/Mobil (Stepper + Entfernen). */
  .qty-btn { width: 44px; height: 44px; }
  .qty-input { height: 44px; }
  .cart-remove { width: 44px; height: 44px; }
}
/* Mobile-Audit 2026-07-11 (P2-1 / P3-7): iOS-Auto-Zoom bei Fokus auf Felder <16px.
   Mengen-Input + Gutschein-Code-Feld auf ≥16px (nur mobil — Desktop bleibt .95rem). */
@media (max-width: 760px) {
  .qty-input,
  .promo-coupon-row input { font-size: 16px; }
  /* VERIFY_cart-quote-en F6: .cart-meta span{white-space:nowrap} lässt lange facts_line-
     Segmente (bis ~78 Zeichen à .8rem) auf schmalen Screens aus der Karte laufen.
     Mobil den harten nowrap lösen, damit einzelne Segmente umbrechen dürfen. */
  .cart-meta span { white-space: normal; overflow-wrap: anywhere; }
}

/* ---------- Teilen & senden (B2B Stufe 1) ---------- */
.cart-share {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.cart-share-title { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--text); }
.cart-share-sub { color: var(--muted); font-size: var(--fs-sm); margin-top: .15rem; line-height: 1.45; }
.cart-share-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .7rem; }
.cart-share-actions .btn {
  width: 100%; justify-content: flex-start; gap: .55rem; font-size: var(--fs-ms); padding-block: .55rem;
}
.cart-share-actions .btn svg { flex: 0 0 auto; }
.cart-share-status { color: var(--good-text); font-size: var(--fs-sm); margin-top: .5rem; line-height: 1.45; min-height: 0; }
.cart-share-status:empty { display: none; }

/* ---------- Merge-Dialog beim Öffnen eines geteilten Links ---------- */
.cart-modal-back {
  position: fixed; inset: 0; z-index: 9200; display: grid; place-items: center;
  padding: 20px; background: rgba(12,14,18,.55); backdrop-filter: blur(3px);
  animation: cart-modal-fade .16s var(--ease, ease);
}
@keyframes cart-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.cart-modal {
  position: relative; width: min(460px, 100%); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-pop);
  padding: 26px 24px 22px;
}
.cart-modal h2 { font-size: var(--fs-2xl); margin: 0 2rem .4rem 0; color: var(--text); }
.cart-modal-lead { color: var(--muted-2); font-size: var(--fs-base); line-height: 1.5; }
.cart-modal-note { color: var(--muted); font-size: var(--fs-sm); margin-top: .5rem; line-height: 1.45; }
.cart-modal-actions { display: flex; flex-direction: column; gap: .55rem; margin-top: 18px; }
.cart-modal-actions .btn {
  width: 100%; flex-direction: column; align-items: stretch; gap: .1rem; text-align: center; padding: .7rem 1rem;
}
.cart-modal-actions .btn small { font-weight: var(--fw-body); font-size: var(--fs-xs); opacity: .8; }
.cart-modal-actions .btn-quiet {
  background: none; border: none; color: var(--muted); font-weight: var(--fw-medium); padding: .5rem;
}
.cart-modal-actions .btn-quiet:hover { color: var(--text); }
.cart-modal-x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer;
  transition: .15s var(--ease, ease);
}
.cart-modal-x:hover { color: var(--text); background: var(--panel-2); }
.cart-modal :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }