/* ==========================================================================
   SCHNELLE Shop – Warenkorb, Kasse, Bestellbestätigung, Bestellungen im Konto
   Ergänzungsschicht zu app.css (Tokens und Basiskomponenten liegen dort).
   Eingebunden über den stylesheets-Block der Checkout- und Order-Vorlagen.
   ========================================================================== */

/* 1. Flächen und Überschriften */
.checkout-area { min-height: 60vh; padding: clamp(2rem, 5vw, 4rem) 0; background: var(--shop-surface); }
.checkout-area__inner { min-width: 0; max-width: 72rem; }
.checkout-area__inner--narrow { max-width: 56rem; }
.checkout-heading { max-width: 46rem; margin-bottom: 2rem; }
.checkout-heading h1 { max-width: 20ch; margin: 0 0 .75rem; font-size: var(--shop-text-3xl); overflow-wrap: anywhere; }
.checkout-heading > p:last-child { max-width: 38rem; margin: 0; color: var(--shop-text); line-height: 1.6; }
.checkout-heading--success .shop-eyebrow { color: var(--shop-success); }
.cart-panel__title, .checkout-panel__title { margin: 0 0 1rem; font-size: var(--shop-text-xl); overflow-wrap: anywhere; }
.checkout-panel { margin-bottom: 1.25rem; }
.checkout-panel .shop-form { margin: 0; }

/* 2. Warenkorb */
.cart-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.cart-items { min-width: 0; }
.cart-table th, .cart-table td { vertical-align: middle; }
.cart-table thead th { white-space: normal; overflow-wrap: normal; letter-spacing: .03em; } /* keine Trennung mitten im Wort („EINZELPRE/IS“, a62) */
.cart-table th.is-numeric { text-align: right; }
@media (min-width: 640px) {
    .cart-table { table-layout: fixed; }
    .cart-table th:nth-child(1) { width: 34%; }
    .cart-table th:nth-child(2) { width: 17%; }
    .cart-table th:nth-child(3) { width: 19%; }
    .cart-table th:nth-child(4) { width: 17%; }
    .cart-table th:nth-child(5) { width: 13%; }
    /* Entfernen ab Tablet nur als Symbol; der Text bleibt für Screenreader (aria-label und versteckter Text). */
    .cart-line__remove span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .cart-line__remove { min-width: 2.5rem; justify-content: flex-end; }
}
.cart-line--issue td { background: var(--shop-danger-soft); }
.cart-line__product { min-width: 0; overflow-wrap: anywhere; }
.cart-line__product a { color: var(--shop-ink); }
.cart-line__sku { display: block; margin-top: .15rem; color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 600; letter-spacing: .04em; }
.cart-line__badge { margin-top: .4rem; white-space: normal; }
.cart-line__unit, .cart-line__total { white-space: nowrap; }
.cart-quantity-form { display: inline-grid; justify-items: end; gap: .35rem; }
.cart-quantity-form .shop-button--small { min-height: 2rem; padding: .3rem .6rem; }
.cart-quantity-form__input { width: 4.5rem; min-height: 2.5rem; padding: .4rem .5rem; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius); background: var(--shop-canvas); color: var(--shop-ink); font: inherit; font-size: var(--shop-text-sm); text-align: right; }
.cart-quantity-form__input:focus { border-color: var(--shop-navy); outline: 3px solid var(--shop-navy-focus); outline-offset: 0; }
.cart-line__action { text-align: right; }
.cart-line__remove { min-height: 2.5rem; padding: .35rem 0; text-align: right; }
.cart-line__remove span { overflow-wrap: anywhere; }
.cart-items__footer { margin: 1rem 0 0; }
.cart-summary { position: sticky; top: 1rem; }
.cart-summary__shipping-note { margin: .5rem 0 0; }
.cart-summary__blocked { margin-top: .75rem; }
.cart-summary__checkout { margin: 1rem 0 .5rem; }
.cart-offline__count { margin: .5rem 0 1rem; }
.cart-empty, .order-empty { background: var(--shop-canvas); border: 1px solid var(--shop-line); border-radius: var(--shop-radius); }

/* 3. Summen */
.checkout-totals { display: grid; gap: .35rem; margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--shop-line); font-size: var(--shop-text-sm); }
.checkout-totals__row { display: flex; justify-content: space-between; gap: 1rem; }
.checkout-totals__row dt { margin: 0; color: var(--shop-text); font-weight: 600; }
.checkout-totals__row dd { margin: 0; color: var(--shop-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-totals__row--muted dt, .checkout-totals__row--muted dd { color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 500; }
.checkout-totals__row--total { margin-top: .5rem; padding-top: .75rem; border-top: 2px solid var(--shop-ink); }
.checkout-totals__row--total dt, .checkout-totals__row--total dd { font-size: var(--shop-text-lg); font-weight: 800; }

/* 4. Kasse */
.checkout-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.checkout-main, .checkout-sidebar { min-width: 0; }
.checkout-form__row { grid-template-columns: 1fr; }
.checkout-shipping-address { margin-top: 1.25rem; padding: 1rem; border: 1px dashed var(--shop-line-strong); border-radius: var(--shop-radius); background: var(--shop-surface); }
.checkout-shipping-address legend { float: none; width: auto; margin-bottom: .35rem; overflow-wrap: anywhere; font-size: var(--shop-text-sm); font-weight: 700; color: var(--shop-ink); }
.checkout-shipping-address .shop-field__help { margin: 0 0 1rem; }
.checkout-shipping-address.is-active { border-style: solid; border-color: var(--shop-navy); background: var(--shop-canvas); }
.checkout-choices { display: grid; gap: .6rem; margin: 0 0 .75rem; }
.checkout-choice { display: flex; align-items: flex-start; gap: .75rem; min-height: 3.25rem; margin: 0; padding: .85rem 1rem; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius); background: var(--shop-canvas); cursor: pointer; }
.checkout-choice:hover { border-color: var(--shop-navy); }
.checkout-choice.is-selected, .checkout-choice:has(input:checked) { border-color: var(--shop-navy); background: var(--shop-navy-soft); box-shadow: inset 0 0 0 1px var(--shop-navy); }
.checkout-choice[hidden] { display: none; }
.checkout-choice:focus-within { outline: 3px solid var(--shop-navy-focus); outline-offset: 0; }
.checkout-choice__input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--shop-navy); }
.checkout-choice__body { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; min-width: 0; }
.checkout-choice__title { color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 700; overflow-wrap: anywhere; }
.checkout-choice__meta { color: var(--shop-text-muted); font-size: var(--shop-text-sm); font-variant-numeric: tabular-nums; }
.checkout-summary { position: sticky; top: 1rem; }
.checkout-summary__lines { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; color: var(--shop-text); font-size: var(--shop-text-sm); }
.checkout-summary__line { display: flex; justify-content: space-between; gap: 1rem; }
.checkout-summary__name { min-width: 0; overflow-wrap: anywhere; }
.checkout-summary__amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.checkout-summary .shop-field--check { margin-top: 1rem; }
.checkout-summary__legal { margin: .5rem 0 0; }
.checkout-submit { margin: 1rem 0 .5rem; }
.checkout-summary__back { margin: 0; text-align: center; }
.checkout-error-summary, .checkout-shipping-blocked { margin-bottom: 1.25rem; }

/* 5. Bestätigung und Bestelldetails */
.order-number { color: var(--shop-navy); font-variant-numeric: tabular-nums; }
.order-meta { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 0 0 1.25rem; padding: 0 0 1rem; border-bottom: 1px solid var(--shop-line); }
.order-meta > div { display: grid; gap: .15rem; }
.order-meta dt { margin: 0; color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.order-meta dd { margin: 0; color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 600; }
.checkout-bank { padding: 1.25rem; border-left: .3rem solid var(--shop-navy); border-radius: 0 var(--shop-radius) var(--shop-radius) 0; background: var(--shop-surface); } /* Navy statt Rot: Hinweis, keine Handlungsaufforderung (a62) */
.checkout-bank__title { margin: 0 0 .5rem; font-size: var(--shop-text-lg); }
.checkout-bank__placeholder { margin: .75rem 0; }
.checkout-bank__data { margin-top: .75rem; background: var(--shop-canvas); }
.checkout-bank__reference { font-size: var(--shop-text-lg); font-weight: 800; color: var(--shop-navy); }
.order-lines td, .order-lines th { vertical-align: middle; }
.order-addresses__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.order-addresses__title { margin: 0 0 .5rem; font-size: var(--shop-text-sm); font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--shop-text-muted); }
.order-address { margin: 0; font-style: normal; line-height: 1.6; color: var(--shop-ink); }
.checkout-confirmation__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1.5rem 0 0; }
.shop-badge--status-open { color: var(--shop-warning); background: var(--shop-warning-soft); }
.shop-badge--status-paid { color: var(--shop-success); background: var(--shop-success-soft); }
.order-detail-payment { margin-bottom: 1.25rem; }
.order-table td { vertical-align: middle; }

/* 6. Breakpoints */
@media (min-width: 640px) {
    .checkout-form__row { grid-template-columns: 1fr 1fr; }
    .checkout-form__row--city { grid-template-columns: minmax(7rem, 1fr) 2fr; }
    .order-addresses__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
    .cart-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
    .checkout-layout { grid-template-columns: minmax(0, 1fr) 22rem; }
}
@media (max-width: 639.98px) {
    .cart-table thead { display: none; }
    .cart-table tr { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; padding: .85rem 0; border-bottom: 1px solid var(--shop-line); }
    .cart-table td { padding: 0; border: 0; }
    .cart-line__product { grid-column: 1 / -1; }
    .cart-line__unit { grid-column: 1; text-align: left; color: var(--shop-text-muted); font-size: var(--shop-text-xs); }
    .cart-line__unit::before { content: attr(data-label) " "; font-weight: 600; }
    /* Pfandzeile: Bezeichnung links, Betrag rechts; Stückpreis und Menge stehen in der Artikelzeile (a62) */
    .cart-table tr.cart-line--deposit { padding-top: 0; }
    .cart-line--deposit td:nth-child(2), .cart-line--deposit td:nth-child(3), .cart-line--deposit td:nth-child(5) { display: none; }
    .cart-line--deposit .cart-line__deposit-total { align-self: center; text-align: right; }
    .cart-line__quantity { grid-column: 1; grid-row: 3; text-align: left; }
    .cart-quantity-form { justify-content: flex-start; }
    .cart-line__total { grid-column: 2; grid-row: 2 / 4; align-self: center; font-weight: 800; }
    .cart-line__action { grid-column: 1 / -1; text-align: left; }
    .cart-summary, .checkout-summary { position: static; }
}

/* Fehlerübersicht der Kasse: fokussierbar (tabindex -1) mit Sprungmarken zu den Feldern */
.checkout-error-summary:focus { outline: 3px solid var(--shop-navy-focus); outline-offset: 2px; }
.checkout-error-summary strong { display: block; margin-bottom: .15rem; }
.checkout-error-summary__list { padding-left: 1.1rem; margin: .35rem 0 0; color: inherit; font-size: var(--shop-text-sm); }
.checkout-error-summary__list li + li { margin-top: .25rem; }
.checkout-error-summary__list a { color: inherit; font-weight: 600; }

/* --------------------------------------------------------------------------
   Gespeicherte Adressen in der Kasse (E-37, nur angemeldete Kunden)
   -------------------------------------------------------------------------- */
.checkout-saved-address { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--shop-line); }
.checkout-saved-address .shop-field__help { margin-top: .35rem; }
.checkout-save-address { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--shop-line); }
.checkout-save-address__link { margin: .35rem 0 0; }
/* Ende gespeicherte Adressen (E-37) */

/* Pfand (E-49): eigene Unterzeile je Position und eigene Summenzeile */
.cart-line--deposit td { padding-top: .35rem; border-top: 0; color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 600; }
.cart-line--deposit .cart-line__deposit-label { padding-left: .75rem; border-left: 2px solid var(--shop-line-strong); }
.checkout-summary__line--deposit { color: var(--shop-text-muted); font-size: var(--shop-text-xs); }

/* Slots cart.after_summary und checkout.after_payment (Design-Review a62): Rahmen nur mit Inhalt.
   Im Warenkorb stehen Zusammenfassung und Slot dann gemeinsam in der Seitenspalte (mitlaufend ab 992 px). */
.cart-sidebar { display: grid; gap: 1.25rem; min-width: 0; }
.cart-sidebar .cart-summary { position: static; }
.cart-slot > :first-child, .checkout-slot > :first-child { margin-top: 0; }
.cart-slot > :last-child, .checkout-slot > :last-child { margin-bottom: 0; }
.checkout-slot { margin-bottom: 1.25rem; }
@media (min-width: 992px) {
    .cart-sidebar { position: sticky; top: 1rem; }
}

/* --------------------------------------------------------------------------
   Design-Review (a62): Kassenformular, Auswahlkarten, Bestellübersicht, Bestellpositionen
   -------------------------------------------------------------------------- */
/* Gleichmäßiger Feldabstand in den Kassenkarten (vorher klebten Beschriftungen am vorigen Feld). */
.checkout-main .checkout-panel, .checkout-form .checkout-shipping-address { display: grid; gap: 1.15rem; }
.checkout-main .checkout-panel > .checkout-panel__title { margin: 0; }
.checkout-main .checkout-panel > .shop-text-small, .checkout-main .checkout-panel > p { margin: 0; }
.checkout-form .checkout-shipping-address { margin-top: 0; padding: 1rem 1.1rem 1.15rem; border: 1px dashed var(--shop-line-strong); }
.checkout-form .checkout-shipping-address.is-active { border-style: solid; }
.checkout-form .checkout-shipping-address legend { margin: 0; padding: 0 .35rem; }
.checkout-form .checkout-shipping-address .shop-field__help { margin: 0; }
.checkout-main .checkout-choices { margin: 0; }
/* Auswahlkarten: `.shop-form label` (Block, fett) überdeckte die Flex-Zeile; Optionsfeld steht wieder neben dem Titel. */
.checkout-form .checkout-choice { display: flex; margin: 0; color: var(--shop-text); font-size: var(--shop-text-sm); font-weight: 500; }
.checkout-form .checkout-choice__meta { font-weight: 500; }
/* Bestellübersicht: `.shop-form ul` (Fehlerlisten, rot) galt auch für die Positionsliste. */
.checkout-form .checkout-summary__lines { padding: 0; margin: 0; color: var(--shop-text); font-size: var(--shop-text-sm); }
.checkout-form .checkout-summary__line--deposit { color: var(--shop-text-muted); font-size: var(--shop-text-xs); }
.checkout-sidebar .checkout-summary .shop-field--check { margin-top: 1.25rem; }
.checkout-sidebar .checkout-summary .shop-field--check label { font-size: var(--shop-text-sm); }
.checkout-submit { text-wrap: balance; }
/* Bestätigung und Bestelldetail: Unterüberschriften der Adressen kleiner als die Kartenüberschrift (`.shop-card h3`
   war spezifischer); Spalten dürfen schrumpfen (vorher Überlauf bei 820 px). */
.shop-card .order-addresses__title { margin: 0 0 .5rem; font-size: var(--shop-text-xs); letter-spacing: .08em; overflow-wrap: anywhere; }
.order-addresses__grid > * { min-width: 0; }
.order-lines td:first-child { color: var(--shop-ink); font-weight: 600; }
.order-lines .cart-line__sku { font-weight: 500; }
@media (min-width: 640px) {
    .order-addresses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .shop-table-wrap + .checkout-totals { max-width: 26rem; margin-left: auto; } /* Summen der Bestellpositionen rechtsbündig statt über die volle Kartenbreite */
}
@media (max-width: 767.98px) {
    /* Bestellpositionen gestapelt (shop-table--responsive): Artikel und Pfandbezeichnung als Kopfzeile der Position. */
    .order-lines td:first-child { display: block; text-align: left; }
    .order-lines td:first-child::before { content: none; }
    .order-lines tr.cart-line--deposit { padding-top: 0; }
}

/* Bestellablauf (E-78 bis E-81): weitere Bestellstatus, Sendung, Teilstorno/Retouren */
.shop-badge--status-in-progress { color: var(--shop-warning); background: var(--shop-warning-soft); }
.shop-badge--status-shipped, .shop-badge--status-ready-for-pickup { color: var(--shop-navy); background: var(--shop-navy-soft); }
.shop-badge--status-completed { color: var(--shop-success); background: var(--shop-success-soft); }
.shop-badge--status-requested, .shop-badge--status-accepted, .shop-badge--status-recorded, .shop-badge--status-received { color: var(--shop-accent); background: var(--shop-accent-soft); }
.shop-badge--status-refunded { color: var(--shop-success); background: var(--shop-success-soft); }
.order-adjustment-list { display: grid; gap: 1rem; padding: 0; margin: 0; list-style: none; }
.order-adjustment-list__item { display: grid; gap: .35rem; padding-top: 1rem; border-top: 1px solid var(--shop-line); }
.order-adjustment-list__item:first-child { padding-top: 0; border-top: 0; }
.order-adjustment-list__lines { margin: 0; padding-left: 1.1rem; font-size: var(--shop-text-sm); }
.order-return__qty { max-width: 6rem; }