/* mabetec-shop — Theme-Custom-CSS
 *
 * Gepflegt nach docs/style-guide.md (Stand 26.05.2026).
 *
 * Die meisten Brand-Tokens (Rot, Dunkel-Skala, Body-BG, Schriften)
 * kommen aus dem Elementor-Kit (Post-ID 7) — siehe
 * .migration/migrate-kit-to-mabetec.php. Dieses File ergänzt nur,
 * was das Kit nicht abdeckt: semantische Aliase, Status-Farben,
 * und gezielte Overrides für WooCommerce-Validation.
 */

:root {
	/* Brand-Aliase (für SCSS-/JS-Konsumenten, die nicht auf Elementor-Globals zugreifen). */
	--mabetec-red: #FF0434;
	--mabetec-red-hover: #D60028;

	--mabetec-ink-900: #020A0A;
	--mabetec-ink-800: #282C37;
	--mabetec-ink-700: #394553;
	--mabetec-ink-600: #5D6374;
	--mabetec-ink-500: #818181;

	--mabetec-neutral-400: #C8C8C7;
	--mabetec-neutral-200: #DEDEDE;
	--mabetec-neutral-100: #FEFEFE;
	--mabetec-neutral-000: #FFFFFF;

	--mabetec-sand: #FFBC7D;

	/* Status-Farben — Brand-Rot bewusst nicht für Fehler (siehe Style-Guide). */
	--status-success: #2F7D32;
	--status-warning: #C77700;
	--status-error: #B00020;
}

/* WooCommerce-Validation: Fehler-Status klar vom Brand-Rot trennen. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	border-color: var(--status-error);
	color: var(--status-error);
}

.woocommerce-message {
	border-top-color: var(--status-success);
}

.woocommerce-info {
	border-top-color: var(--status-warning);
}

/* mwd-aw-dielen-konfigurator (gemeinsames Plugin-Repo) Overrides.
 * Plugin-CSS nutzt #28a745 (Bootstrap-Grün) für Primary-Buttons und
 * #52AE32FF für Close-Hover. Beides hier auf mabetec-Brand-Rot mappen,
 * damit Plugin-Updates ungehindert weiterlaufen können. */
#mwd-aw-cart,
#mwd-aw-cart-mobile,
.mwd-aw-body .actions .primary,
.mwd-aw-mobile-footer .actions .primary,
.mwd-aw-body .right .right-footer .actions .primary {
	background: var(--mabetec-red);
}

#mwd-aw-cart:hover,
#mwd-aw-cart-mobile:hover,
.mwd-aw-body .actions .primary:hover,
.mwd-aw-mobile-footer .actions .primary:hover,
.mwd-aw-body .right .right-footer .actions .primary:hover {
	background: var(--mabetec-red-hover);
}

.mwd-aw-close-btn:hover,
.mwd-aw-close-btn:hover svg {
	color: var(--mabetec-red);
}