/* ============================================================
   CANISANUM · WooCommerce / Germanized Restyling
   Bringt die klassischen Shop-Seiten (Warenkorb, Kasse, Konto)
   ins canisanum-Design. Token-basiert; überschreibt WC-Defaults.
   Zielbild: Design-Prototypen cart.html (S1) + checkout.html (S2).
   ============================================================ */

/* ---- Grund-Container & Überschriften ------------------------- */
.woocommerce, .woocommerce-page {
	font-family: var(--font-sans);
	color: var(--color-text);
}
.woocommerce-cart main.wrap,
.woocommerce-checkout main.wrap,
.woocommerce-account main.wrap {
	padding-block: var(--space-xl);
}
/* base.css beschraenkt .entry-content auf Rechtstext-Lesebreite (68ch). Auf Shop-Seiten
   aufheben — sonst werden Warenkorb/Kasse auf ~halbe Breite gequetscht (Spalten laufen ueber). */
.woocommerce-page .entry-content { max-width: none; }
.woocommerce h1, .woocommerce h2, .woocommerce h3 {
	font-family: var(--font-heading);
	color: var(--color-text);
}

/* ---- Buttons einheitlich auf Design-Buttons ------------------ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
	background: var(--color-sage);
	color: var(--color-on-primary);
	font-family: var(--font-sans);
	font-weight: 600;
	border: 0;
	border-radius: var(--radius-sm, 8px);
	padding: 12px 22px;
	line-height: 1.2;
	transition: background .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover {
	background: var(--color-sage-deep);
	color: var(--color-on-primary);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--color-gold);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--color-gold-deep);
}
/* „Weiter zur Kasse" trotz WC-.alt gruen (Design-Prototyp: btn-primary) */
.woocommerce .wc-proceed-to-checkout a.checkout-button.alt {
	background: var(--color-sage);
}
.woocommerce .wc-proceed-to-checkout a.checkout-button.alt:hover {
	background: var(--color-sage-deep);
}
/* Ghost-Variante (z. B. „Gutschein anwenden", Warenkorb aktualisieren) */
.woocommerce button[name="apply_coupon"],
.woocommerce button[name="update_cart"] {
	background: transparent;
	color: var(--color-sage-deep);
	box-shadow: inset 0 0 0 1.5px var(--color-line);
}
.woocommerce button[name="apply_coupon"]:hover,
.woocommerce button[name="update_cart"]:hover {
	background: var(--color-surface-2);
	color: var(--color-sage-deep);
}
/* Coupon-Feld: Input fuellt die Breite, Design-Input-Optik (Prototyp .coupon) */
.woocommerce .coupon {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.woocommerce .coupon input#coupon_code {
	flex: 1;
	min-width: 150px;
	border: 1.5px solid var(--color-line);
	border-radius: var(--radius-sm, 8px);
	background: var(--color-surface);
	color: var(--color-text);
	padding: 11px 12px;
	min-height: 44px;
	font-family: var(--font-sans);
}

/* ---- Hinweise / Notices -------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border-radius: var(--radius-sm, 8px);
	border: 1px solid var(--color-line);
	background: var(--color-surface-2);
	color: var(--color-text);
	padding: var(--space-s) var(--space-m);
	border-left-width: 4px;
}
.woocommerce-message { border-left-color: var(--color-success, #3D7A3A); }
.woocommerce-info    { border-left-color: var(--color-sage); }
.woocommerce-error   { border-left-color: var(--color-error, #B23B2E); background: var(--color-error-bg, #F7E4E1); }
.woocommerce .woocommerce-message a.button { padding: 6px 14px; }
/* WC-Default-Icon (::before) entfernen — kollidiert mit erstem Buchstaben */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; display: none; }

/* ---- Warenkorb: 2-Spalten-Layout ----------------------------- */
@media (min-width: 861px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: 1fr 340px;
		gap: var(--space-xl);
		align-items: start;
	}
	.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-cart .cart-collaterals { width: auto; }
	.woocommerce-cart .cart_totals { position: sticky; top: 96px; }
}

/* Warenkorb-Tabelle als Karten-/Zeilenoptik */
.woocommerce table.shop_table {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md, 12px);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--color-surface);
	overflow: hidden;
}
.woocommerce table.shop_table th {
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--color-muted);
	background: var(--color-surface-2);
	padding: var(--space-s) var(--space-m);
}
.woocommerce table.shop_table td {
	padding: var(--space-m);
	border-top: 1px solid var(--color-line);
	vertical-align: middle;
}
/* Produktbild groesser. WooCommerce-Core setzt fuer `.woocommerce table.cart img`
   width:32px (gleiche Spezifitaet, laedt aber SPAETER -> gewann bisher, Bild war winzig).
   Die Zusatzklasse td.product-thumbnail erhoeht die Spezifitaet und schlaegt Core zuverlaessig. */
.woocommerce table.cart td.product-thumbnail img {
	width: 80px;
	height: auto;
	border-radius: var(--radius-sm, 8px);
}
/* Produktfotos auf weissem Studiogrund: multiply laesst das Weiss in der Kartenflaeche
   aufgehen, statt als hellerer Kasten zu stehen (Warenkorb + Kasse). */
.woocommerce table.cart td.product-thumbnail img,
.woocommerce-checkout .wc-gzd-cart-item-thumbnail img {
	mix-blend-mode: multiply;
}
.woocommerce table.cart td.product-name a { color: var(--color-text); font-weight: 700; text-decoration: none; }
.woocommerce table.cart td.product-name a:hover { color: var(--color-sage-deep); }
/* Loeschen-X-Spalte so schmal wie moeglich: sie braucht nur Platz fuers "x". Sonst quetscht
   ihre Default-Breite (volles Zell-Padding) die Produkt-/Preis-/Anzahl-Spalten. width:1% laesst
   die Zelle im auto-Layout auf Mindestbreite schrumpfen. */
.woocommerce table.cart th.product-remove,
.woocommerce table.cart td.product-remove {
	width: 1%;
	white-space: nowrap;
	padding-left: 10px;
	padding-right: 4px;
	text-align: center;
}
.woocommerce table.cart td.product-remove a.remove {
	font-size: 20px;
	line-height: 1;
}
/* Spalten-Padding im Warenkorb enger: Default var(--space-m)=24px links/rechts zog die
   Spalten weit auseinander. Horizontal auf var(--space-s)=16px; vertikales Padding (aus dem
   shop_table-td-Shorthand) bleibt fuer eine komfortable Zeilenhoehe. Nur Cart-Tabelle
   (Totals/Checkout bleiben unberuehrt). Die Loeschen-Spalte behaelt ihr eigenes Padding
   (hoehere Spezifitaet). */
.woocommerce table.cart th,
.woocommerce table.cart td {
	padding-left: var(--space-s);
	padding-right: var(--space-s);
}
/* Grundpreis / Germanized-Zusatzinfos dezent */
.woocommerce .wc-gzd-additional-info,
.woocommerce .price .woocommerce-price-suffix {
	font-size: var(--fs-xs);
	color: var(--color-muted);
	font-weight: 400;
}

/* Mengen-Feld */
.woocommerce .quantity input.qty {
	border: 1.5px solid var(--color-line);
	border-radius: var(--radius-sm, 8px);
	background: var(--color-surface);
	color: var(--color-text);
	padding: 8px;
	width: 64px;
}

/* Cart-Totals-Karte */
.woocommerce .cart_totals {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md, 12px);
	padding: var(--space-l);
}
/* WC-Default (woocommerce-layout.css) gibt .cart_totals float:right; width:48% mit hoher
   Spezifitaet -> Karte zu schmal, Werte laufen ueber. Hier volle Spaltenbreite erzwingen. */
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
}
/* Versandrechner: liegt per Theme-Override (woocommerce/cart/cart-shipping.php) in einer
   eigenen Zeile ".shipping-calculator-row" mit colspan=2 UNTER der Versandzeile -> volle
   Kartenbreite ueber beide Spalten. Zelle linksbuendig, ohne das von den Totals-td geerbte
   white-space:nowrap, ohne Doppel-Rahmen zur Versandzeile. (Spezifitaet mit table.shop_table
   und der Zeilenklasse, um .cart_totals ... td {text-align:right;white-space:nowrap} zu schlagen.) */
.woocommerce-cart .cart_totals table.shop_table .shipping-calculator-row > td {
	text-align: left;
	white-space: normal;
	border-top: 0;
	padding: 0 0 6px;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator,
.woocommerce-cart .cart_totals .shipping-calculator-form {
	width: 100%;
	float: none;
	clear: both;
	margin: 0;
	text-align: left;
}
/* Toggle-Link "Versandkosten berechnen" dezent als Aktion */
.woocommerce-cart .cart_totals .shipping-calculator-button {
	display: inline-block;
	color: var(--color-sage-deep);
	font-size: var(--fs-sm);
	text-decoration: underline;
}
.woocommerce-cart .cart_totals .shipping-calculator-button:hover { color: var(--color-text); }
/* Felder voll ausnutzen und NIE ueber die Karte laufen lassen */
.woocommerce-cart .cart_totals .shipping-calculator-form .form-row {
	width: 100%;
	float: none;
	margin: 0 0 var(--space-s);
	padding: 0;
}
.woocommerce-cart .cart_totals .shipping-calculator-form label {
	display: block;
	text-align: left;
	font-size: var(--fs-xs);
	color: var(--color-muted);
	margin-bottom: 4px;
}
.woocommerce-cart .cart_totals .shipping-calculator-form :is(input, select),
.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}
.woocommerce-cart .cart_totals .shipping-calculator-form input,
.woocommerce-cart .cart_totals .shipping-calculator-form select {
	min-height: 44px;
	border: 1.5px solid var(--color-line);
	border-radius: var(--radius-sm, 8px);
	background: var(--color-surface);
	color: var(--color-text);
	padding: 8px 10px;
}
.woocommerce-cart .cart_totals .shipping-calculator-form .button {
	width: 100%;
	margin-top: 4px;
}
/* select2-Dropdowns (Land/Bundesland): im echten Browser rendert WC das Laenderfeld als
   selectWoo/select2. Vertikal per Flexbox zentrieren (line-height allein zentriert den
   __rendered-Text nicht zuverlaessig -> Text saesse unten). Optik an unsere Felder angleichen. */
.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--color-line);
	border-radius: var(--radius-sm, 8px);
	background: var(--color-surface);
}
.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	flex: 1;
	line-height: 1.3;
	padding: 0 28px 0 12px;
	color: var(--color-text);
}
.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 8px;
	height: 100%;
}
/* margin-top:0 — .entry-content h2 (base.css) gibt sonst var(--space-xl) oben -> zu viel
   Luft ueber "Warenkorb-Summe" in der Karte. */
.woocommerce .cart_totals h2 { font-size: var(--fs-h3); margin-top: 0; margin-bottom: var(--space-s); }
.woocommerce .cart_totals table.shop_table { border: 0; background: transparent; width: 100%; }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	background: transparent;
	border-top: 1px solid var(--color-line);
	padding: 10px 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-soft);
}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	font-size: var(--fs-lead);
	color: var(--color-text);
}
.woocommerce .cart_totals table.shop_table th { text-align: left; font-weight: 600; }
.woocommerce .cart_totals table.shop_table td { text-align: right; white-space: nowrap; }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	margin-top: var(--space-s);
}

/* ---- Checkout: 2-Spalten-Layout ------------------------------ */
@media (min-width: 901px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xl);
		align-items: start;
	}
	.woocommerce-checkout #customer_details { grid-column: 1; }
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		grid-column: 2;
	}
	.woocommerce-checkout #order_review { position: sticky; top: 96px; }
}
/* Adress-Spalten untereinander: WooCommerce-Core stellt in #customer_details die
   Rechnungsdaten (.col-1) und "Lieferung an eine andere Adresse" + Anmerkungen (.col-2)
   ab 768px per float nebeneinander -> drei optische Spalten mit viel Leerraum in der Mitte.
   Hier gestapelt (Lieferung/Anmerkungen unter die Rechnungsdaten) -> nur zwei Spalten:
   links alle Adressdaten, rechts die Bestellung. ID-Spezifitaet schlaegt den Core-Float.
   Gilt an allen Breiten (mobil sind die Spalten ohnehin schon 100 %). */
.woocommerce-checkout #customer_details.col2-set { display: block; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
	max-width: 100%;
}
.woocommerce-checkout #customer_details .col-2 { margin-top: var(--space-l); }
.woocommerce-checkout h3 {
	font-family: var(--font-sans);
	font-size: var(--fs-h3);
	margin-bottom: var(--space-m);
}

/* Formularfelder auf .input-Optik */
.woocommerce form .form-row label { font-size: var(--fs-sm); color: var(--color-text-soft); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection {
	border: 1.5px solid var(--color-line);
	border-radius: var(--radius-sm, 8px);
	background: var(--color-surface);
	color: var(--color-text);
	padding: 11px 12px;
	min-height: 44px;
	font-family: var(--font-sans);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 2px solid var(--color-focus, var(--color-sage));
	outline-offset: 1px;
	border-color: var(--color-sage);
}

/* Order-Review-Karte */
.woocommerce-checkout #order_review {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md, 12px);
	padding: var(--space-l);
}
.woocommerce-checkout #order_review table.shop_table { border: 0; background: transparent; width: 100%; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	background: transparent;
	border-top: 1px solid var(--color-line);
	padding: 10px 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--fs-sm);
}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
	font-size: var(--fs-lead);
	color: var(--color-text);
}
.woocommerce-checkout #order_review table.shop_table td { text-align: right; }
.woocommerce-checkout #order_review table.shop_table td.product-name { text-align: left; }

/* Zahlungsmethoden im .pay-Stil */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: var(--radius-md, 12px);
}
.woocommerce-checkout #payment ul.payment_methods {
	border: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.woocommerce-checkout #payment ul.payment_methods li {
	border: 1.5px solid var(--color-line);
	border-radius: var(--radius-sm, 8px);
	padding: var(--space-s) var(--space-m);
	background: var(--color-surface);
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--color-sage); }
.woocommerce-checkout #payment div.payment_box {
	background: var(--color-surface-2);
	border-radius: var(--radius-sm, 8px);
	font-size: var(--fs-sm);
	color: var(--color-text-soft);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #place_order { width: 100%; margin-top: var(--space-s); font-size: var(--fs-body); padding: 15px; }
/* „Jetzt kaufen" bleibt auch bei PayPal sichtbar: PayPal Payments blendet ihn sonst per
   .ppcp-hidden aus (seine Buttons stehen im Express-Block). So geht PayPal auch ohne
   Cookie-Einwilligung, per Weiterleitung zu PayPal (canisanum-shop, Abschnitt 8). */
.woocommerce-checkout form.checkout #place_order.ppcp-hidden { display: block !important; }

/* Express-Kauf (PayPal, Apple Pay, Google Pay, Amazon Pay) direkt unter den Zahlarten.
   Markup + Sperre bis zur AGB-Bestaetigung: Plugin canisanum-shop (Abschnitt 8, express.js). */
.woocommerce-checkout .canisanum-express { margin-top: var(--space-s); }
.woocommerce-checkout .canisanum-express[hidden] { display: none; }
.woocommerce-checkout .canisanum-express__titel {
	margin: 0 0 var(--space-2xs);
	font-size: var(--fs-sm);
	color: var(--color-text-soft);
}
.woocommerce-checkout .canisanum-express__buttons { position: relative; }
.woocommerce-checkout .canisanum-express #wc-stripe-express-checkout-element { margin-top: 0 !important; }
/* PayPal erst zeigen, wenn seine Buttons gezeichnet sind (ohne Cookie-Einwilligung nie). */
.woocommerce-checkout .canisanum-express__paypal:not(.is-bereit) { display: none; }
.woocommerce-checkout .canisanum-express__paypal .ppc-button-wrapper { margin: 0 0 10px; }
/* Stripes „— ODER —" gehoert zur alten Position oben in der Kasse. */
.woocommerce-checkout .canisanum-express #wc-stripe-express-checkout-button-separator { display: none !important; }
.woocommerce-checkout .canisanum-express__sperre {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: not-allowed;
}
.woocommerce-checkout .canisanum-express__hinweis {
	display: none;
	margin: var(--space-2xs) 0 0;
	font-size: var(--fs-xs);
	color: var(--color-text-soft);
}
.woocommerce-checkout .canisanum-express.is-gesperrt .canisanum-express__inhalt { opacity: .45; filter: grayscale(1); }
.woocommerce-checkout .canisanum-express.is-gesperrt .canisanum-express__sperre,
.woocommerce-checkout .canisanum-express.is-gesperrt .canisanum-express__hinweis { display: block; }
/* Klick auf die gesperrten Buttons fuehrt zur AGB-Checkbox und hebt sie kurz hervor. */
.woocommerce-checkout .canisanum-express-markiert { animation: canisanum-express-markiert 1.6s ease-out; border-radius: var(--radius-sm, 8px); }
@keyframes canisanum-express-markiert {
	0%, 40% { box-shadow: 0 0 0 3px var(--color-gold); background: var(--color-surface); }
	100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce-checkout .canisanum-express-markiert { animation: none; box-shadow: 0 0 0 3px var(--color-gold); }
}

/* Germanized-Pflicht-Checkboxen */
.woocommerce-checkout .wc-gzd-checkbox-placeholder,
.woocommerce form .woocommerce-terms-and-conditions-wrapper { margin: var(--space-s) 0; }
.woocommerce-checkout .gzd-legal-checkbox label,
.woocommerce-checkout .wc-gzd-checkbox label { font-size: var(--fs-sm); color: var(--color-text); }

/* EU-Gewaehrleistungslabel (Germanized, unter den Bestellanmerkungen).
   Pflichtdarstellung: vollstaendig, ohne Klick, lesbar — IT-Recht Kanzlei: keine kleine
   Grafik/Popover (Entscheidung Christoph 2026-09-16). Seit 2026-09-22 (Christoph: „zu
   dominant") hoechstens 400 px breit und mit Ueberschrift „Rechtlicher Hinweis:" (Template-
   Override woocommerce-germanized/global/legal-guarantee.php). Germanized selbst deckelt auf
   300 px, das war zu klein. Bewusst in der linken Spalte: Die rechte (#order_review) ist
   sticky; ein grosses Label dort schoebe den Bestellbutton aus dem Viewport. */
.woocommerce-checkout .wc-gzd-legal-guarantee-checkout { margin-top: var(--space-m, 24px); }
.woocommerce-checkout .wc-gzd-legal-guarantee-heading {
	font-family: var(--font-sans);
	font-size: var(--fs-sm, .875rem);
	font-weight: 600;
	color: var(--color-text);
	margin: 0 0 var(--space-2xs, 8px);
}
.woocommerce-checkout .wc-gzd-legal-guarantee-checkout img.wc-gzd-legal-guarantee-label-image {
	width: 100%;
	max-width: 400px;
	min-width: 0;
	height: auto;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm, 10px);
}

/* ---- Mein-Konto ---------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px var(--space-m);
	color: var(--color-text-soft);
	border-bottom: 1px solid var(--color-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--color-surface-2);
	color: var(--color-sage-deep);
	font-weight: 600;
}



/* ---- Danke-Seite: waagerechte Listen (Bestellübersicht, Bankverbindung) ----
   base.css gibt Textlisten in .entry-content einen Abstand zwischen den Punkten
   (li + li). Bei WooCommerces waagerechten order_details-Listen rutschten dadurch alle
   Spalten außer der ersten 8 px tiefer (Christoph, LIVE-Abnahme 2026-09-22). */
.woocommerce ul.order_details li,
.woocommerce-order ul.order_details li { margin-top: 0; }