/*
 * WooCommerce – gemeinsame Bausteine (SIRUPE_REDESIGN_SPEC.md 6.3, 6.4):
 * Seitenrahmen, Meldungen, Buttons, Formularfelder, Tabellen.
 *
 * Auf allen WooCommerce-Seiten mit neuem Design (Body-Klasse sirupe-woo,
 * inc/site/woocommerce.php). Dazu je nach Seite shop.css (Shop, Kategorien,
 * Produkt) oder checkout.css (Warenkorb, Kasse, Mein Konto). Ersetzt dort
 * legacy-woo.css. Nur Darstellung – keine Logik. Jeder Selektor beginnt mit .sirupe-site.
 */

/* ---------- Seitenrahmen ---------- */

.sirupe-site.sirupe-woo .site-content > .ast-container {
	box-sizing: border-box;
	max-width: var(--s-max);
	padding-left: var(--s-gutter);
	padding-right: var(--s-gutter);
}

.sirupe-site.woocommerce-cart .site-main,
.sirupe-site.woocommerce-checkout .site-main,
.sirupe-site.woocommerce-account .site-main {
	padding-bottom: 64px;
}

/* ---------- Meldungen (Erfolg, Info, Fehler) ---------- */

.sirupe-site .woocommerce-message,
.sirupe-site .woocommerce-info,
.sirupe-site .woocommerce-error,
.sirupe-site.sirupe-woo .woocommerce-message,
.sirupe-site.sirupe-woo .woocommerce-info,
.sirupe-site.sirupe-woo .woocommerce-error {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 24px;
	padding: 16px 20px 16px 52px;
	border: 1px solid var(--s-line);
	border-left: 4px solid var(--s-ink);
	border-radius: 16px;
	background: var(--s-surface);
	box-shadow: none;
	color: var(--s-ink);
	font-size: 15px;
	line-height: 1.5;
	list-style: none;
}

.sirupe-site .woocommerce-message,
.sirupe-site.sirupe-woo .woocommerce-message {
	border-left-color: #2f5d2a;
}

.sirupe-site .woocommerce-error,
.sirupe-site.sirupe-woo .woocommerce-error {
	border-left-color: #b3123a;
}

.sirupe-site .woocommerce-message::before,
.sirupe-site .woocommerce-info::before,
.sirupe-site .woocommerce-error::before {
	position: absolute;
	top: 50%;
	left: 18px;
	transform: translateY(-50%);
	color: var(--s-ink);
}

.sirupe-site .woocommerce-message::before {
	color: #2f5d2a;
}

.sirupe-site .woocommerce-error::before {
	color: #b3123a;
}

.sirupe-site .woocommerce-error li {
	margin: 0;
}

.sirupe-site .woocommerce-message a:not(.button),
.sirupe-site .woocommerce-info a:not(.button),
.sirupe-site .woocommerce-error a:not(.button) {
	color: var(--s-ink);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Button in Meldungen rechtsbündig (wie bisher), kompakt */
.sirupe-site .woocommerce-message .button,
.sirupe-site .woocommerce-info .button {
	order: 2;
	margin-left: auto;
}

/* ---------- Buttons (Pill) ---------- */

.sirupe-site.sirupe-woo a.button,
.sirupe-site.sirupe-woo button.button,
.sirupe-site.sirupe-woo input.button,
.sirupe-site.sirupe-woo #respond input#submit,
.sirupe-site.sirupe-woo a.button.alt,
.sirupe-site.sirupe-woo button.button.alt,
.sirupe-site.sirupe-woo .wc-block-components-button,
.sirupe-site.woocommerce-checkout #place_order,
.sirupe-site.sirupe-woo .wc-proceed-to-checkout a.checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 24px;
	border: 2px solid var(--s-ink);
	border-radius: var(--s-radius-pill);
	background: var(--s-ink);
	color: var(--s-bg);
	font-family: var(--s-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	filter: none;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.sirupe-site.sirupe-woo a.button:hover,
.sirupe-site.sirupe-woo button.button:hover,
.sirupe-site.sirupe-woo input.button:hover,
.sirupe-site.sirupe-woo a.button.alt:hover,
.sirupe-site.sirupe-woo button.button.alt:hover,
.sirupe-site.woocommerce-checkout #place_order:hover,
.sirupe-site.sirupe-woo .wc-proceed-to-checkout a.checkout-button:hover {
	border-color: #000000;
	background: #000000;
	color: var(--s-bg);
	filter: none;
}

/* Sekundär: Kontur (Gutschein anwenden, Warenkorb aktualisieren, Meldungs-Buttons) */
.sirupe-site.sirupe-woo button.button[name="update_cart"],
.sirupe-site.sirupe-woo button.button[name="apply_coupon"],
.sirupe-site.sirupe-woo button[name="calc_shipping"],
.sirupe-site .woocommerce-message .button,
.sirupe-site .woocommerce-info .button,
.sirupe-site.sirupe-woo .woocommerce-message a.button,
.sirupe-site.sirupe-woo .woocommerce-info a.button {
	min-height: 44px;
	padding: 9px 18px;
	background: transparent;
	color: var(--s-ink);
}

.sirupe-site.sirupe-woo button.button[name="update_cart"]:hover,
.sirupe-site.sirupe-woo button.button[name="apply_coupon"]:hover,
.sirupe-site.sirupe-woo button[name="calc_shipping"]:hover,
.sirupe-site .woocommerce-message .button:hover,
.sirupe-site .woocommerce-info .button:hover,
.sirupe-site.sirupe-woo .woocommerce-message a.button:hover,
.sirupe-site.sirupe-woo .woocommerce-info a.button:hover {
	background: var(--s-ink);
	color: var(--s-bg);
}

.sirupe-site.sirupe-woo button.button:disabled,
.sirupe-site.sirupe-woo button.button:disabled[disabled],
.sirupe-site.sirupe-woo button.button.disabled {
	border-color: var(--s-line);
	background: transparent;
	color: var(--s-ink-soft);
	opacity: 1;
	cursor: not-allowed;
}

.sirupe-site.sirupe-woo .button:focus-visible,
.sirupe-site.woocommerce-checkout #place_order:focus-visible {
	outline: 2px solid var(--s-accent);
	outline-offset: 3px;
}

/* ---------- Formularfelder ---------- */

.sirupe-site.sirupe-woo form .form-row label,
.sirupe-site.sirupe-woo form label {
	color: var(--s-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.sirupe-site.sirupe-woo form .form-row .required {
	color: #b3123a;
	text-decoration: none;
}

.sirupe-site.sirupe-woo input[type="text"],
.sirupe-site.sirupe-woo input[type="email"],
.sirupe-site.sirupe-woo input[type="tel"],
.sirupe-site.sirupe-woo input[type="number"],
.sirupe-site.sirupe-woo input[type="password"],
.sirupe-site.sirupe-woo input[type="search"],
.sirupe-site.sirupe-woo textarea,
.sirupe-site.sirupe-woo select,
.sirupe-site.sirupe-woo form .form-row .input-text,
.sirupe-site.sirupe-woo form .form-row select,
.sirupe-site.sirupe-woo .select2-container .select2-selection--single,
.sirupe-site .woocommerce-ordering select {
	box-sizing: border-box;
	min-height: 48px;
	padding: 10px 14px;
	border: 1.5px solid #d8cab4;
	border-radius: 12px;
	background-color: var(--s-surface);
	box-shadow: none;
	color: var(--s-ink);
	font-family: var(--s-font-body);
	font-size: 16px;
	line-height: 1.4;
}

.sirupe-site.sirupe-woo textarea {
	min-height: 110px;
}

.sirupe-site.sirupe-woo .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: auto;
}

.sirupe-site.sirupe-woo .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--s-ink);
	line-height: 1.4;
}

.sirupe-site.sirupe-woo .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.sirupe-site.sirupe-woo input:focus,
.sirupe-site.sirupe-woo textarea:focus,
.sirupe-site.sirupe-woo select:focus,
.sirupe-site.sirupe-woo .select2-container--focus .select2-selection--single,
.sirupe-site.sirupe-woo .select2-container--open .select2-selection--single {
	border-color: var(--s-ink);
	box-shadow: 0 0 0 3px rgba(184, 74, 6, 0.25);
	outline: none;
}

.sirupe-site.sirupe-woo form .form-row.woocommerce-invalid .input-text,
.sirupe-site.sirupe-woo form .form-row.woocommerce-invalid select,
.sirupe-site.sirupe-woo form .form-row.woocommerce-invalid .select2-selection {
	border-color: #b3123a;
}

.sirupe-site.sirupe-woo input[type="checkbox"],
.sirupe-site.sirupe-woo input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--s-ink);
	vertical-align: middle;
}

/* Mengenfeld */
.sirupe-site.sirupe-woo .quantity .qty {
	width: 76px;
	max-width: none;
	min-height: 48px;
	padding: 8px;
	text-align: center;
}

/* ---------- Tabellen ---------- */

.sirupe-site.sirupe-woo table.shop_table {
	overflow: hidden;
	border: 1px solid var(--s-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 20px;
	background: var(--s-surface);
	box-shadow: none;
}

.sirupe-site.sirupe-woo table.shop_table th {
	color: var(--s-ink);
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
}

.sirupe-site.sirupe-woo table.shop_table thead th {
	border-bottom: 1px solid var(--s-line);
	background: var(--s-bg-alt);
}

.sirupe-site.sirupe-woo table.shop_table td,
.sirupe-site.sirupe-woo table.shop_table tbody th,
.sirupe-site.sirupe-woo table.shop_table tfoot th,
.sirupe-site.sirupe-woo table.shop_table tfoot td {
	padding: 14px 16px;
	border-top: 1px solid var(--s-line);
	background: transparent;
	color: var(--s-ink);
}

.sirupe-site.sirupe-woo table.shop_table thead + tbody tr:first-child td,
.sirupe-site.sirupe-woo table.shop_table thead + tbody tr:first-child th {
	border-top: 0;
}

.sirupe-site.sirupe-woo table.shop_table .amount {
	color: var(--s-ink);
}

.sirupe-site.sirupe-woo table.shop_table a {
	color: var(--s-ink);
	font-weight: 600;
	text-decoration: none;
}

.sirupe-site.sirupe-woo table.shop_table a:hover {
	text-decoration: underline;
}

.sirupe-site.sirupe-woo table.shop_table .order-total .amount,
.sirupe-site.sirupe-woo table.shop_table .order-total th {
	font-size: 18px;
	font-weight: 800;
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 768px) {
	.sirupe-site .woocommerce-message .button,
	.sirupe-site .woocommerce-info .button {
		margin-left: 0;
	}

	.sirupe-site.sirupe-woo table.shop_table_responsive tr td {
		padding: 10px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sirupe-site.sirupe-woo .button,
	.sirupe-site.woocommerce-checkout #place_order {
		transition: none;
	}
}