/* =============================================================================
   FOKUS MENSCH SHOP — WooCommerce-Overrides
   -----------------------------------------------------------------------------
   Token kommen aus shop-custom.css (--fm-*).
   Hier nur Selektoren, die Woo-spezifisch sind.
   ============================================================================= */

/* -------------------------------------------------------------------------- *
 * 1. Shop-Loop / Produktkarten
 * -------------------------------------------------------------------------- */
.woocommerce ul.products li.product {
	background: var(--fm-white);
	border: 1px solid var(--fm-grey-300);
	border-radius: var(--fm-radius-1);
	padding: var(--fm-space-4);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
	border-color: var(--fm-color-link);
	box-shadow: 0 0 0 2px var(--fm-color-link) inset;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-weight: var(--fm-font-weight-bold);
	font-size: 1.1rem;
	color: var(--fm-color-text);
}

.woocommerce ul.products li.product .price {
	color: var(--fm-color-text);
	font-weight: var(--fm-font-weight-bold);
}

.woocommerce ul.products li.product .price del {
	color: var(--fm-grey-600);
}
.woocommerce ul.products li.product .price ins {
	background: transparent;
	color: var(--fm-color-accent);
	text-decoration: none;
}

/* -------------------------------------------------------------------------- *
 * 2. Add-to-cart-Button & generische Woo-Buttons
 * -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--fm-color-accent);
	color: var(--fm-color-text-invert);
	border: 2px solid var(--fm-color-accent);
	border-radius: var(--fm-radius-pill);
	padding: 0.7rem 1.4rem;
	font-weight: var(--fm-font-weight-bold);
	text-transform: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--fm-color-accent-hover);
	border-color: var(--fm-color-accent-hover);
	color: var(--fm-color-text-invert);
}
.woocommerce .button:focus-visible {
	outline: 3px solid var(--fm-color-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--fm-black);
}

/* "added_to_cart" Mini-Link soll als sekundärer Button erscheinen */
.woocommerce a.added_to_cart {
	background: transparent;
	color: var(--fm-color-accent);
	border: 2px solid var(--fm-color-accent);
	border-radius: var(--fm-radius-pill);
	padding: 0.6rem 1.2rem;
	margin-left: var(--fm-space-2);
}

/* -------------------------------------------------------------------------- *
 * 3. Sale-Badge
 * -------------------------------------------------------------------------- */
.woocommerce span.onsale {
	background: var(--fm-yellow);
	color: var(--fm-black);
	font-weight: var(--fm-font-weight-bold);
	border-radius: var(--fm-radius-pill);
	min-height: 2.5em;
	min-width: 2.5em;
	line-height: 2.5em;
	padding: 0 0.6em;
}

/* -------------------------------------------------------------------------- *
 * 4. Einzelprodukt
 * -------------------------------------------------------------------------- */
.woocommerce div.product .product_title {
	font-weight: var(--fm-font-weight-black);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--fm-color-text);
	font-weight: var(--fm-font-weight-bold);
	font-size: 1.5rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--fm-grey-100);
	border-radius: var(--fm-radius-1) var(--fm-radius-1) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--fm-white);
	border-bottom-color: var(--fm-white);
}

/* -------------------------------------------------------------------------- *
 * 5. Warenkorb / Checkout — A11y-orientiert
 * -------------------------------------------------------------------------- */
.woocommerce form .form-row label,
.woocommerce-checkout .form-row label,
.woocommerce-page form .form-row label {
	display: block;
	font-weight: var(--fm-font-weight-bold);
	margin-bottom: var(--fm-space-1);
}
/* Pflichtfeld-Sternchen sichtbar und vom Screenreader vorgelesen */
.woocommerce form .form-row .required {
	color: var(--fm-red-dark);
	font-weight: var(--fm-font-weight-bold);
	text-decoration: none;
}
/* Fehler-Meldungen kontraststark */
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background: #ffe9e6;
	color: #8a1f17;
	border-left: 6px solid var(--fm-red-dark);
	padding: var(--fm-space-4);
	border-radius: var(--fm-radius-1);
	list-style: none;
}
.woocommerce-message {
	background: #eaf6e8;
	color: #1f5a14;
	border-left: 6px solid #2f8a1f;
	padding: var(--fm-space-4);
	border-radius: var(--fm-radius-1);
}
.woocommerce-info {
	background: #e6f3fa;
	color: #0f4a66;
	border-left: 6px solid var(--fm-blue-dark);
	padding: var(--fm-space-4);
	border-radius: var(--fm-radius-1);
}

/* Checkout-Tabelle */
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	border-color: var(--fm-grey-300);
}
.woocommerce-checkout #payment {
	background: var(--fm-grey-100);
	border-radius: var(--fm-radius-1);
}
.woocommerce-checkout #payment ul.payment_methods li label {
	font-weight: var(--fm-font-weight-bold);
}

/* -------------------------------------------------------------------------- *
 * 6. Mein-Konto
 * -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--fm-color-link);
	color: var(--fm-color-text-invert);
	border-radius: var(--fm-radius-1);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	padding: var(--fm-space-2) var(--fm-space-3);
	display: block;
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:focus-visible {
	background: var(--fm-grey-100);
}

/* -------------------------------------------------------------------------- *
 * 7. Cart-Icon im Header
 * -------------------------------------------------------------------------- */
.header-cart-button .header-cart-total,
.header-account-button {
	background: var(--fm-color-accent);
	color: var(--fm-color-text-invert);
	border-radius: var(--fm-radius-pill);
}