/*
 * Warenkorb, Kasse und Danke-Seite (nur solange der Shop aktiv ist, inc/shop.php). Ergänzt die Stile von WooCommerce
 * um Schrift, Farben, Felder und Knöpfe des Designsystems. Geladen nur auf diesen Seiten.
 */

/* .ft-shop nutzt die Breite von .ft-container, damit Titel und Inhalt an derselben Linie stehen */
.ft-shop .woocommerce { font-size: var(--ft-fs-text); }

/* Felder */
.ft-shop .woocommerce form .form-row label { font-weight: var(--ft-gewicht-fett); line-height: 1.4; }
.ft-shop .woocommerce form .form-row input.input-text,
.ft-shop .woocommerce form .form-row textarea,
.ft-shop .woocommerce form .form-row select,
.ft-shop .woocommerce .coupon .input-text,
.ft-shop .woocommerce form.checkout_coupon .input-text,
.ft-shop .select2-container .select2-selection--single {
  min-height: var(--ft-feld-hoehe);
  padding: var(--ft-a-3) var(--ft-a-4);
  border: 2px solid var(--ft-rahmen);
  border-radius: var(--ft-radius-klein);
  background: var(--ft-weiss);
  font-size: var(--ft-fs-text);
  line-height: 1.4;
}
.ft-shop .select2-container .select2-selection--single .select2-selection__rendered { line-height: 1.6; padding-left: 0; }
.ft-shop .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; }
.ft-shop .woocommerce textarea { min-height: 7rem; }
.ft-shop .woocommerce :is(input, select, textarea):focus-visible { outline: none; box-shadow: var(--ft-fokus-ring); }

/* Knöpfe wie .ft-knopf */
.ft-shop .woocommerce :is(a.button, button.button, input.button, #place_order, .checkout-button) {
  min-height: var(--ft-button-hoehe);
  padding: var(--ft-a-3) var(--ft-a-5);
  border: 2px solid var(--ft-gelb);
  border-radius: var(--ft-radius-pill);
  background: var(--ft-gelb);
  color: var(--ft-tinte);
  font-size: var(--ft-fs-text);
  font-weight: var(--ft-gewicht-fett);
  line-height: 1.2;
  /* kein Umbruch mitten im Wort (basis.css trennt Fliesstext automatisch) */
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal;
}
.ft-shop .woocommerce :is(a.button, button.button, input.button, #place_order, .checkout-button):hover { background: var(--ft-gelb-hover); border-color: var(--ft-gelb-hover); color: var(--ft-tinte); }
.ft-shop .woocommerce button.button:disabled, .ft-shop .woocommerce button.button:disabled[disabled] { opacity: 0.5; padding: var(--ft-a-3) var(--ft-a-5); }
.ft-shop .woocommerce #place_order { width: 100%; font-size: var(--ft-fs-gross); }

/* Gutscheinfeld (ohne Klick sichtbar) */
.ft-shop .woocommerce form.checkout_coupon { border: 2px solid var(--ft-linie); border-radius: var(--ft-radius); padding: var(--ft-a-4); margin-bottom: var(--ft-a-6); }
.ft-shop .woocommerce form.checkout_coupon p:first-child { margin-top: 0; }
.ft-shop .woocommerce .coupon .input-text { width: 12rem; margin-right: var(--ft-a-2); }

/* Tabellen */
.ft-shop .woocommerce table.shop_table { border: 2px solid var(--ft-linie); border-radius: var(--ft-radius); border-collapse: separate; }
.ft-shop .woocommerce table.shop_table :is(th, td) { padding: var(--ft-a-3) var(--ft-a-4); border-top-color: var(--ft-linie); line-height: 1.4; }
.ft-shop .woocommerce table.shop_table .product-thumbnail { display: none; }
.ft-shop .woocommerce .order-total :is(th, td) { font-size: var(--ft-fs-gross); }

/* Zahlarten und Hinweise */
.ft-shop .woocommerce-checkout #payment { background: var(--ft-flaeche); border-radius: var(--ft-radius); }
.ft-shop .woocommerce-checkout #payment div.payment_box { background: var(--ft-weiss); color: var(--ft-tinte); }
.ft-shop .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--ft-weiss); }
.ft-shop .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) { border-top-color: var(--ft-gelb); background: var(--ft-creme); color: var(--ft-tinte); }
.ft-shop .woocommerce .woocommerce-error { border-top-color: var(--ft-fehler); background: var(--ft-fehler-hell); }
.ft-shop .woocommerce :is(.woocommerce-info, .woocommerce-message)::before { color: var(--ft-tinte); }
.ft-shop .woocommerce a.remove { color: var(--ft-fehler) !important; font-size: 1.75rem; width: 2.75rem; height: 2.75rem; line-height: 2.5rem; }
.ft-shop .woocommerce a.remove:hover { background: var(--ft-fehler); color: var(--ft-weiss) !important; }
.ft-shop .woocommerce .quantity .qty { min-height: var(--ft-ziel-min); width: 4.5rem; border: 2px solid var(--ft-rahmen); border-radius: var(--ft-radius-klein); }

/* Kasse: zweispaltig ab Desktop (Angaben links, Bestellung rechts) */
@media (min-width: 64em) {
  .ft-shop form.checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--ft-a-7); align-items: start; }
  .ft-shop form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
  .ft-shop form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 3; }
  .ft-shop form.checkout #customer_details .col-1, .ft-shop form.checkout #customer_details .col-2 { float: none; width: 100%; }
  .ft-shop form.checkout #order_review_heading, .ft-shop form.checkout #order_review { grid-column: 2; }
  .ft-shop form.checkout #order_review_heading { margin-top: 0; }
}
.ft-shop h3 { font-size: var(--ft-fs-h3); }

/* ============ Handy: Warenkorb, Kasse, Danke-Seite (Korrekturen nach Durchgang A, 28.10.2026) ============ */

/* Warenkorb: ✕-Spalte und Bild aus, «Entfernen» beim Produkt (inc/shop.php), Titel linksbündig */
.ft-shop .woocommerce-cart-form :is(th, td).product-remove { display: none; }
.ft-shop .woocommerce table.shop_table_responsive tr td.product-name { text-align: left !important; } /* gegen woocommerce-smallscreen.css */
.ft-shop .woocommerce table.shop_table_responsive tr td.product-name::before { display: none; }
.ft-shop .ft-entfernen {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: var(--ft-a-2); padding: 0 var(--ft-a-4);
  border: 2px solid var(--ft-rahmen); border-radius: var(--ft-radius-pill); background: var(--ft-weiss);
  font-size: var(--ft-fs-klein); color: var(--ft-tinte); text-decoration: none; box-shadow: none;
}
.ft-shop .ft-entfernen:hover { border-color: var(--ft-tinte); background: var(--ft-creme); }
.ft-shop .ft-shop__hinweis { margin: var(--ft-a-5) 0; max-width: var(--ft-breite-text); }
/* Anzahl aktualisiert sich selbst (Skript in inc/shop.php); ohne JavaScript bleibt der Knopf */
.js .ft-shop .woocommerce-cart-form tr:has(> td.actions) { display: none; }
.ft-shop .woocommerce-shipping-calculator, .ft-shop .woocommerce-shipping-destination { display: none; }
.ft-shop .cart_totals h2 { font-size: var(--ft-fs-h3); }
/* Leerer Warenkorb: ohne Symbol, Knopf «Zum Buch» statt «Zurück zum Shop» */
.ft-shop .cart-empty.woocommerce-info { padding-left: var(--ft-a-5); text-wrap: pretty; }
.ft-shop .cart-empty.woocommerce-info::before { display: none; }
.ft-shop .return-to-shop { display: none; }
.ft-shop .ft-shop__zurueck { margin-top: var(--ft-a-5); }

/* Kasse: grosse Kästchen und Auswahlknöpfe, Texte in Grundschrift */
.ft-shop .woocommerce :is(input[type="checkbox"], input[type="radio"]) { width: 1.5rem; height: 1.5rem; margin: 0; flex-shrink: 0; accent-color: var(--ft-tinte); vertical-align: middle; }
.ft-shop #ship-to-different-address label { display: inline-flex; align-items: center; gap: var(--ft-a-3); cursor: pointer; }
.ft-shop .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: var(--ft-a-3); }
.ft-shop #payment ul.payment_methods li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ft-a-3); }
.ft-shop #payment ul.payment_methods li .payment_box { flex-basis: 100%; }
.ft-shop #payment :is(li, label, .payment_box, .payment_box p, .woocommerce-privacy-policy-text, .woocommerce-privacy-policy-text p, .woocommerce-terms-and-conditions-wrapper) { font-size: var(--ft-fs-text); line-height: var(--ft-lh-text); }

/* Tabellen «Ihre Bestellung» und «Bestelldetails»: auf dem Handy jede Zeile als Flex mit Umbruch (Text links, Betrag
   rechts und vollständig; passt beides nicht nebeneinander, steht der Betrag rechts darunter), keine Trennung im Wort */
@media (max-width: 47.99em) {
  .ft-shop :is(.woocommerce-checkout-review-order-table, .woocommerce-table--order-details) { display: block; width: 100%; }
  .ft-shop :is(.woocommerce-checkout-review-order-table, .woocommerce-table--order-details) :is(thead, tbody, tfoot) { display: block; }
  .ft-shop :is(.woocommerce-checkout-review-order-table, .woocommerce-table--order-details) tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ft-a-1) var(--ft-a-4);
    padding: var(--ft-a-3) var(--ft-a-4); border-top: 1px solid var(--ft-linie);
  }
  .ft-shop :is(.woocommerce-checkout-review-order-table, .woocommerce-table--order-details) thead tr { border-top: 0; }
  .ft-shop .woocommerce table:is(.woocommerce-checkout-review-order-table, .woocommerce-table--order-details) :is(th, td) {
    display: block; flex: 1 1 auto; padding: 0; border: 0; text-align: left; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal;
  }
  .ft-shop .woocommerce table:is(.woocommerce-checkout-review-order-table, .woocommerce-table--order-details) tr > :last-child:not(:first-child) { flex: 0 0 auto; margin-left: auto; text-align: right; }
  /* Produktzeile: Titel bricht neben dem Betrag um */
  .ft-shop .woocommerce table:is(.woocommerce-checkout-review-order-table, .woocommerce-table--order-details) :is(td.product-name, .order_item > td:first-child) { flex: 1 1 0; }
}

/* Danke-Seite: alles an derselben linken Linie (die bisherige thankyou-custom.css rückte ein) */
.ft-shop .ft-danke { padding: 0; }
.ft-shop .ft-danke__dank { background: var(--ft-gelb-hell); border-radius: var(--ft-radius); padding: var(--ft-a-4) var(--ft-a-5); margin: 0 0 var(--ft-a-6); max-width: var(--ft-breite-text); }
.ft-shop .ft-danke__dank p { margin: 0; font-size: var(--ft-fs-text); font-weight: var(--ft-gewicht-normal); }
.ft-shop .ft-danke__uebersicht { display: grid; gap: var(--ft-a-3); margin: 0 0 var(--ft-a-7); padding: 0; }
.ft-shop .ft-danke__uebersicht dt { color: var(--ft-tinte-2); }
.ft-shop .ft-danke__uebersicht dd { margin: 0; font-weight: var(--ft-gewicht-fett); hyphens: manual; -webkit-hyphens: manual; }
.ft-shop .woocommerce-order-details__title, .ft-shop .woocommerce-column__title { font-size: var(--ft-fs-h3); margin-top: 0; }
.ft-shop .woocommerce-order-details { margin-bottom: var(--ft-a-7); }
.ft-shop .woocommerce-columns--addresses { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ft-a-6); }
.ft-shop .woocommerce-columns--addresses::before, .ft-shop .woocommerce-columns--addresses::after { display: none; }
.ft-shop .woocommerce .woocommerce-columns--addresses .woocommerce-column { float: none; width: auto; display: flex; flex-direction: column; }
.ft-shop .woocommerce-customer-details address { flex: 1; margin: 0; padding: var(--ft-a-4); border: 2px solid var(--ft-linie); border-radius: var(--ft-radius); font-style: normal; line-height: var(--ft-lh-text); }
@media (min-width: 48em) {
  .ft-shop .ft-danke__uebersicht { grid-template-columns: max-content minmax(0, 1fr); gap: var(--ft-a-2) var(--ft-a-5); }
  .ft-shop .ft-danke__uebersicht > div { display: contents; }
  .ft-shop .woocommerce-columns--addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Runde 2 (28.10.2026): Summen im Warenkorb als Zeile (Bezeichnung links, Betrag rechts, nie aneinanderklebend),
   Gutscheinfeld der Kasse auf dem Handy untereinander in voller Breite */
@media (max-width: 47.99em) {
  .ft-shop .woocommerce .cart_totals table.shop_table_responsive tr td {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--ft-a-1) var(--ft-a-3);
  }
  .ft-shop .woocommerce .cart_totals table.shop_table_responsive tr td::before { float: none; }
  .ft-shop .woocommerce form.checkout_coupon :is(.form-row-first, .form-row-last) { float: none; width: 100%; margin: 0 0 var(--ft-a-3); padding: 0; }
  .ft-shop .woocommerce form.checkout_coupon .input-text, .ft-shop .woocommerce form.checkout_coupon .button { width: 100%; }
  .ft-shop .woocommerce form.checkout_coupon .form-row-last { margin-bottom: 0; }
}


/* «Zahlungspflichtig bestellen» auf dem Handy auf einer Zeile (vorher 22 px, zwei Zeilen; Runde 8, 2.11.2026) */
@media (max-width: 39.99em) { .ft-shop .woocommerce #place_order { font-size: var(--ft-fs-text); padding-inline: var(--ft-a-3); white-space: nowrap; } }