/* ==========================================================================
 * Warenkorb und Kasse (Eugen, 02.10.2026). Geladen ueber inc/stile.php.
 *
 * Beide Seiten sind KLASSISCHE WooCommerce-Vorlagen in Flatsomes Fassung (kein
 * Block wie bei Kurschat24), German Market stellt die Kasse um (Zahlungsweise
 * vor der Bestelluebersicht). Werte nur aus tokens.css.
 *
 * REICHWEITE: body.woocommerce-cart ist nur der Warenkorb (auch der leere);
 * body.woocommerce-checkout traegt neben der Kasse auch "Bestellung erhalten"
 * und "Bestellung bezahlen". Alles haengt an #main -- Kopf, Mini-Warenkorb und
 * Cookie-Banner bleiben unberuehrt. Die ID im Selektor schlaegt ausserdem
 * Flatsomes Customizer-Farben (.button.alt = Sekundaerfarbe) ohne !important.
 *
 *   Warenkorb  .woocommerce.row > .col.large-7 (form.woocommerce-cart-form)
 *                               + .cart-collaterals.col.large-5 > .cart-sidebar
 *   Kasse      form.checkout > .row > .col.large-7 (#customer_details)
 *                               + .col.large-5 > .col-inner.has-border
 * ======================================================================= */

:root {
	--ams-icon-hinweis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.300 0-24-10.700-24-24s10.700-24 24-24l48 0c13.300 0 24 10.700 24 24l0 88 8 0c13.300 0 24 10.700 24 24s-10.700 24-24 24l-80 0c-13.300 0-24-10.700-24-24s10.700-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
}

/* -- Hinweiskarte des Angebots-Zweigs (Plugin ams-shop, includes/angebot.php:
 *    div.ams-hinweiskarte > strong + span) ------------------------------------ */

.ams-hinweiskarte {
	display: grid;
	grid-template-columns: 24px 1fr;
	column-gap: var(--ams-s-3);
	row-gap: 2px;
	margin: 0 0 var(--ams-s-5);
	padding: var(--ams-s-4) var(--ams-s-5);
	border: 1px solid var(--ams-line);
	border-left: 4px solid var(--ams-primary);
	border-radius: var(--ams-r-card);
	background: var(--ams-surface);
	color: var(--ams-ink);
}

.ams-hinweiskarte::before {
	content: "";
	grid-row: 1 / span 2;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	background-color: var(--ams-primary);
	-webkit-mask: var(--ams-icon-hinweis) center / contain no-repeat;
	        mask: var(--ams-icon-hinweis) center / contain no-repeat;
}

.ams-hinweiskarte strong { font: 600 16px/1.4 var(--ams-font); }
.ams-hinweiskarte span { grid-column: 2; font-size: 15px; line-height: 1.5; color: var(--ams-ink-2); }

/* -- Schaltflaechen: alle gefuellt in Rot, beim Ueberfahren Dunkelrot (Eugen,
 *    02.10.2026). Flatsome mischte vier Arten: Umriss (Einkauf fortsetzen),
 *    Primaer, Sekundaer = Dunkelrot (Weiter zur Kasse, Bestellen) und Grau
 *    (.is-form, Gutschein). Die Mengenknoepfe +/- bleiben, wie sie sind.
 *    Ausgegraut (Warenkorb aktualisieren ohne Aenderung) regelt Flatsome ueber
 *    opacity -- bleibt. */

:is(.woocommerce-cart, .woocommerce-checkout) #main .button:not(.ux-quantity__button) {
	border: 1px solid var(--ams-primary);
	background-color: var(--ams-primary);
	color: var(--ams-white);
	font-weight: 700;
	text-shadow: none;
	text-transform: uppercase;
	box-shadow: var(--ams-shadow-cta);
	transition: background-color var(--ams-t-base) var(--ams-ease-out),
	            border-color var(--ams-t-base) var(--ams-ease-out),
	            box-shadow var(--ams-t-base) var(--ams-ease-out);
}

:is(.woocommerce-cart, .woocommerce-checkout) #main .button:not(.ux-quantity__button):not(:disabled):hover,
:is(.woocommerce-cart, .woocommerce-checkout) #main .button:not(.ux-quantity__button):focus-visible {
	border-color: var(--ams-primary-dark);
	background-color: var(--ams-primary-dark);
	color: var(--ams-white);
	box-shadow: var(--ams-shadow-cta-hover);   /* ersetzt Flatsomes Abdunkelung per Innenschatten */
}

/* Umriss-Knoepfen (Einkauf fortsetzen) nimmt Flatsome den Schatten beim
   Ueberfahren mit !important -- gemessen 02.10.2026: "none" trotz ID im Selektor. */
:is(.woocommerce-cart, .woocommerce-checkout) #main .button.is-outline:hover {
	box-shadow: var(--ams-shadow-cta-hover) !important;
}

/* Ausnahme "Gutschein anwenden": bleibt leicht grau (Eugen, 02.10.2026) -- eine
   Nebenaktion neben "Weiter zur Kasse". In der Kasse traegt der Knopf kein
   .is-form (Flatsome faerbt ihn dort rot), deshalb am Namen festgemacht. */
:is(.woocommerce-cart, .woocommerce-checkout) #main .button[name="apply_coupon"] {
	border-color: var(--ams-line-2);
	background-color: var(--ams-surface-2);
	color: var(--ams-ink-2);
	font-weight: 400;
	text-transform: none;
	box-shadow: none;
}

:is(.woocommerce-cart, .woocommerce-checkout) #main .button[name="apply_coupon"]:not(:disabled):hover,
:is(.woocommerce-cart, .woocommerce-checkout) #main .button[name="apply_coupon"]:not(:disabled):focus-visible {
	border-color: var(--ams-line-2);
	background-color: var(--ams-line);
	color: var(--ams-ink);
	box-shadow: none;
}

/* "Zahlungspflichtig bestellen" so breit und hoch wie der PayPal-Knopf, der an
   seiner Stelle erscheint. */
.woocommerce-checkout #main #place_order {
	width: 100%;
	min-height: 48px;
	margin: 0;
	font-size: 1rem;
}

/* -- Schritte Warenkorb > Bestelluebersicht > Abgeschlossen: wie die
 *    Brotkrumen des Katalogs (layout.css) statt Flatsomes Ueberschriftgroesse. */

:is(.woocommerce-cart, .woocommerce-checkout) #main .checkout-breadcrumbs {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
}

:is(.woocommerce-cart, .woocommerce-checkout) #main .checkout-breadcrumbs a {
	color: var(--ams-ink-3);
	font-weight: 500;
}

:is(.woocommerce-cart, .woocommerce-checkout) #main .checkout-breadcrumbs a.current {
	color: var(--ams-ink);
	font-weight: 600;
}

:is(.woocommerce-cart, .woocommerce-checkout) #main .checkout-breadcrumbs a:hover {
	color: var(--ams-primary);
}

/* -- Felder: Rundung und Linienfarbe wie Kontaktformular und Produktseite.
 *    Kein background-Kurzwert: Flatsome haengt den Pfeil der Auswahllisten als
 *    Hintergrundbild an. Das Mengenfeld (.qty) gehoert zur Gruppe mit +/-. */

:is(.woocommerce-cart, .woocommerce-checkout) #main :is(input.input-text:not(.qty), textarea, select, .select2-selection) {
	border: 1px solid var(--ams-line);
	border-radius: var(--ams-r-image);
	box-shadow: none;
	color: var(--ams-ink);
	transition: border-color var(--ams-t-fast) var(--ams-ease-out),
	            box-shadow var(--ams-t-fast) var(--ams-ease-out);
}

:is(.woocommerce-cart, .woocommerce-checkout) #main :is(input.input-text:not(.qty), textarea, select):focus,
:is(.woocommerce-cart, .woocommerce-checkout) #main :is(.select2-container--focus, .select2-container--open) .select2-selection {
	border-color: var(--ams-primary);
	box-shadow: var(--ams-focus-ring);
}

:is(.woocommerce-cart, .woocommerce-checkout) #main .form-row > label:not(.checkbox) {
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ams-ink);
}

:is(.woocommerce-cart, .woocommerce-checkout) #main .form-row .required {
	color: var(--ams-primary);
	text-decoration: none;
}

/* -- Ueberschriften der Abschnitte: CI-Stufe h4 statt Versalien in Grau.
 *    "Warenkorb-Summe" ist bei Flatsome ein Tabellenkopf, gemeint ist dasselbe.
 *    #ship-to-different-address ist ein h3 um eine Checkbox -- bleibt. */

.woocommerce-checkout #main form.checkout h3:not(#ship-to-different-address),
.woocommerce-cart #main .cart_totals thead th,
.woocommerce-cart #main .coupon .widget-title {
	font: var(--ams-t-h4);
	letter-spacing: normal;
	text-transform: none;
	color: var(--ams-ink);
}

/* -- Tabellen (Positionen, Summen): Kopf als Bildunterschrift, feine Linien
 *    statt Flatsomes 3 px. */

:is(.woocommerce-cart, .woocommerce-checkout) #main .shop_table :is(th, td) {
	border-bottom-width: 1px;
	border-color: var(--ams-line-2);
}

:is(.woocommerce-cart, .woocommerce-checkout) #main .shop_table:not(.cart_totals table) thead th {
	font: var(--ams-t-caption);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ams-ink-3);
}

.woocommerce-cart #main .product-thumbnail img {
	border-radius: var(--ams-r-image);
}

/* -- Karten: Summe im Warenkorb, Zahlung und Bestellung in der Kasse.
 *    Flatsome zieht in der Kasse einen 2-px-Rahmen in Primaerfarbe, im
 *    Warenkorb nur eine Trennlinie zwischen den Spalten (.row-divided). */

.woocommerce-checkout #main .col-inner.has-border,
.woocommerce-cart #main .cart-sidebar {
	padding: var(--ams-s-6);
	border: 1px solid var(--ams-line);
	border-radius: var(--ams-r-card);
	background: var(--ams-surface);
}

.woocommerce-cart #main .cart-collaterals {
	border-left: 0;
}

.woocommerce-checkout #main form.checkout_coupon {
	padding: var(--ams-s-5);
	border: 1px dashed var(--ams-line-2);
	border-radius: var(--ams-r-card);
}

/* -- Zahlungsarten ---------------------------------------------------------- */

.woocommerce-checkout #main #payment li.wc_payment_method {
	border-color: var(--ams-line-2);
}

.woocommerce-checkout #main #payment li.wc_payment_method > label {
	font-weight: 600;
	color: var(--ams-ink);
}

.woocommerce-checkout #main #payment .payment_box {
	font: var(--ams-t-small);
	color: var(--ams-ink-2);
}

/* PayPals Hinweiszeile klebte an der ersten Zahlungsart. */
.woocommerce-checkout #main .ppcp-messages {
	margin-bottom: var(--ams-s-2);
}

/* Pflicht-Haken von German Market: Fliesstext statt fett, Luft zum Knopf. */
.woocommerce-checkout #main #order_review p.form-row label {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
}

.woocommerce-checkout #main #order_review :is(#place_order, .ppc-button-wrapper) {
	margin-top: var(--ams-s-3);
}

.woocommerce-checkout #main .woocommerce-privacy-policy-text {
	margin-top: var(--ams-s-4);
	font: var(--ams-t-small);
	color: var(--ams-ink-3);
}

.woocommerce-checkout #main .woocommerce-privacy-policy-text p {
	margin: 0;
}

@media (max-width: 549px) {
	.woocommerce-checkout #main .col-inner.has-border,
	.woocommerce-cart #main .cart-sidebar {
		padding: var(--ams-s-5) var(--ams-s-4);
	}
}