/* cart-checkout.css — WooCommerce Cart + Checkout Layout. */

/* Hinweis: Der frühere pauschale SVG-Fix hier ("max-width:none; width/height:auto"
   für .tbb-wc-page/.woocommerce-cart/.woocommerce-checkout svg) ist entfernt.
   Er ging davon aus, dass base.css (mit seinem globalen svg{max-width:100%}-Reset)
   auf Cart/Checkout mitlädt — tut es aber nicht (siehe inc/asset-registry.php,
   tbb_child_owns_current_view() schließt Cart/Checkout aus). Tatsächlich aktiv
   ist stattdessen der globale Reset aus dem Parent (jenva-core/assets/css/core.css:
   "img, svg { display:block; max-width:100% }"), der auf jeder Seite lädt.
   Der pauschale Fix hat diesen Schutz für jedes nicht explizit größenfixierte
   Icon aufgehoben, sobald diese Datei zum ersten Mal wirklich geladen wurde —
   Ergebnis: überdimensionierte Icons auf Warenkorb/Kasse. Feste Icon-Größen für
   Cart/Checkout sind bereits bewusst und granular in chrome.css geregelt
   (Abschnitt "Warenkorb/Kasse: SVGs in Flex-Zeilen"). Hier nicht erneut pauschal
   überschreiben. */

/* Eigene Überschrift-SVGs in Buttons beibehalten */
.tbb-wc-page .btn svg,
.tbb-wc-page button svg {
  display: inline-block;
  width: 18px;
  height: 18px;
  max-width: none;
  vertical-align: middle;
}

.tbb-page .woocommerce-cart,
.tbb-page .woocommerce-checkout {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

.tbb-page .woocommerce form .form-row label { font-weight: 600; }
.tbb-page .woocommerce-checkout .button.alt,
.tbb-page .woocommerce #place_order {
  background: var(--color-btn-bg);
  color: #fff;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius);
}
.tbb-page .woocommerce table.shop_table {
  border-radius: var(--radius);
  overflow: hidden;
}
.tbb-page .woocommerce-info,
.tbb-page .woocommerce-message {
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-accent);
  padding: var(--space-4);
}

/* Gesamtsumme-Zeile: expliziter Mindestabstand zwischen Label und Preis.
   justify-content:space-between allein rutscht auf schmalen Containern
   (Sidebar/Mobile) zusammen, weil dann kaum Restraum zum Verteilen bleibt.
   .order-row = Warenkorb-Template, .checkout-summary-row = Checkout-Template
   (zwei unterschiedliche Klassennamen im Parent für dieselbe Art Zeile). */
.order-row,
.checkout-summary-row {
  gap: var(--space-3, 12px);
}

/* PayPal-Buttons im Checkout: der 750px-Max-Width-Deckel ist eine feste
   SDK-interne Grenze (ppcp-width-500 = höchste Stufe, "500 oder mehr" —
   Container größer machen bringt nichts, siehe Commit-History). "width:
   fit-content" war ein Fehlversuch: dabei misst PayPals eigenes JS die
   Wrapper-Breite BEVOR der Button-Inhalt gerendert ist (Henne-Ei-Problem),
   der Wrapper wirkt dann winzig → SDK wählt die "min"-Stufe → nur noch 1
   kleiner Button statt 2. Deshalb zurück auf normale Block-Breite (100% des
   Elternelements), der eigentliche Fix läuft jetzt über den PayPal-eigenen
   SDK-Parameter disableMaxWidth (siehe inc/paypal-button-width.php). */
.ppc-button-wrapper {
  margin-top: 10px;
}

/* „Sie haben gespart"-Zeile (nativ, ersetzt you-save-x). Rot wie Sale-Preise. */
.tbb-cart-you-save th,
.tbb-cart-you-save td{
  color: var(--color-sale);
  font-weight: 600;
}

/* „Sie haben gespart" als Summen-Zeile im Warenkorb (Override-cart.php, .order-row). */
.order-row.tbb-cart-you-save span,
.order-row.tbb-cart-you-save strong{
  color: var(--color-sale);
  font-weight: 600;
}

/* ============================================================
   Warenkorb mobil: „Zur Kasse" läuft unten mit (1.0.8)
   Über der Tab-Leiste (≤ 720px), sonst am unteren Rand. JS: cart-sticky-cta.js
   ============================================================ */
.tbb-cart-sticky-cta{ display: none }
@media (max-width: 959px){
  .tbb-cart-sticky-cta{
    position: fixed; left: 0; right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    z-index: 85;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface, #fff);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 18px rgb(11 13 18 / .08);
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform .28s var(--ease, cubic-bezier(.16,1,.3,1)), opacity .2s ease, visibility 0s linear .28s;
  }
  .tbb-cart-sticky-cta[hidden]{ display: none }
  .tbb-cart-sticky-cta.is-visible{
    transform: none; opacity: 1; visibility: visible;
    transition: transform .28s var(--ease, cubic-bezier(.16,1,.3,1)), opacity .2s ease, visibility 0s;
  }
  .tbb-cart-sticky-cta__total{ display: flex; flex-direction: column; min-width: 0; line-height: 1.2 }
  .tbb-cart-sticky-cta__label{ font-size: var(--text-xs); color: var(--color-text-muted) }
  .tbb-cart-sticky-cta__amount{ font-size: var(--text-lg); font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap }
  .tbb-cart-sticky-cta__meta{ font-size: 11px; color: var(--color-text-muted) }
  .tbb-cart-sticky-cta__btn{
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 48px; padding-inline: var(--space-5); white-space: nowrap;
  }
  .tbb-cart-sticky-cta__btn svg{ width: 18px; height: 18px }
  /* Platz unten frei halten, damit nichts unter der Leiste verschwindet */
  html.tbb-cart-sticky-on .cart-page{ padding-bottom: 88px }
}
@media (max-width: 720px){
  .tbb-cart-sticky-cta{ bottom: var(--tbb-tab-bar-real, calc(var(--tbb-tab-bar-h, 4rem) + env(safe-area-inset-bottom, 0px))) }
}
@media (prefers-reduced-motion: reduce){
  .tbb-cart-sticky-cta, .tbb-cart-sticky-cta.is-visible{ transition: none }
}