/* BIO ZAHN WooCommerce styling: shop grid, single product, cart, checkout, account. */

/*
 * Shop cards. WooCommerce puts .woocommerce on <body> on shop pages and on a wrapper elsewhere,
 * so every rule targets both. Kadence's "action on hover" slide is switched off: the button sits
 * at the bottom of every card, aligned across the row.
 */
:is(body.woocommerce, body .woocommerce) ul.products li.product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--bz-card-border);
	border-radius: var(--bz-radius-small);
	background: var(--bz-card-background);
	box-shadow: var(--bz-shadow-card);
	transition: transform var(--bz-speed) var(--bz-ease), box-shadow var(--bz-speed) var(--bz-ease);
}

:is(body.woocommerce, body .woocommerce) ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--bz-shadow-lift);
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .woocommerce-loop-image-link {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .woocommerce-loop-image-link img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform .6s var(--bz-ease);
}

:is(body.woocommerce, body .woocommerce) ul.products li.product:hover .woocommerce-loop-image-link img {
	transform: scale(1.04);
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .product-details {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
	padding: 24px 24px 26px;
	border-radius: 0;
	background: transparent;
	transform: none !important;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 10px;
	padding: 0;
	font: 500 23px/1.2 var(--bz-font-editorial);
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .woocommerce-loop-product__title a {
	color: var(--bz-forest);
	text-decoration: none;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .product-excerpt {
	color: var(--bz-muted-ink);
	font-size: 14px;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
	font-size: 17px;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .price del {
	font-size: 14px;
}

/* Button area: always visible (Kadence hides it until hover), pushed to the bottom of the card. */
:is(body.woocommerce, body .woocommerce) ul.products li.product .product-action-wrap {
	position: static !important;
	display: grid;
	gap: 12px;
	margin-top: auto !important;
	padding: 22px 0 0 !important;
	opacity: 1 !important;
	visibility: visible;
	transform: none;
}

/* Three larger cards per row on desktop instead of Kadence's four. */
@media (min-width: 1025px) {
	:is(body.woocommerce, body .woocommerce) ul.products.grid-lg-col-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
	}
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .product-action-wrap .button {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--bz-forest) !important;
	border-radius: var(--bz-radius-small);
	background: var(--bz-forest) !important;
	color: var(--bz-ivory) !important;
	font: 600 12px/1.2 var(--bz-font-ui);
	letter-spacing: .1em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color var(--bz-speed) var(--bz-ease), color var(--bz-speed) var(--bz-ease), border-color var(--bz-speed) var(--bz-ease);
	transform: none !important;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .product-action-wrap .button:hover,
:is(body.woocommerce, body .woocommerce) ul.products li.product .product-action-wrap .button:focus-visible {
	border-color: var(--bz-deep) !important;
	background: var(--bz-deep) !important;
	color: var(--bz-gold-light) !important;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .product-action-wrap .button .kadence-svg-iconset {
	flex: none;
	margin: 0;
	color: var(--bz-gold-light);
	transition: transform var(--bz-speed) var(--bz-ease);
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .product-action-wrap .button .kadence-svg-iconset:first-of-type {
	margin-left: auto;
	padding-left: 14px;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .product-action-wrap .button .kadence-svg-icon {
	width: 16px;
	height: 16px;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .product-action-wrap .button:hover .kadence-arrow-right-alt-svg {
	transform: translateX(4px);
}

/* After adding: "Auswahl ansehen" as a text link under the button, not a second box. */
:is(body.woocommerce, body .woocommerce) ul.products li.product .product-action-wrap .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 0;
	padding: 2px 0;
	border: 0 !important;
	background: none !important;
	color: var(--bz-forest) !important;
	font: 600 12px/1.4 var(--bz-font-ui);
	letter-spacing: .14em;
	text-decoration: underline;
	text-decoration-color: var(--bz-gold);
	text-transform: uppercase;
	text-underline-offset: 5px;
	box-shadow: none;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .product-action-wrap .added_to_cart svg {
	display: none;
}

:is(body.woocommerce, body .woocommerce) ul.products li.product .bz-restricted-badge {
	position: absolute;
	bottom: 12px;
	left: 12px;
	margin: 0;
}

body .woocommerce .price,
body.woocommerce .price {
	color: var(--bz-forest) !important;
	font-weight: 600;
}

body .woocommerce .price del {
	color: var(--bz-muted-ink);
	font-weight: 400;
	opacity: .8;
}

body .woocommerce .price ins {
	text-decoration: none;
}

body .woocommerce span.onsale,
body.woocommerce span.onsale {
	padding: 6px 12px;
	border-radius: var(--bz-radius-small);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

body .woocommerce-result-count {
	color: var(--bz-muted-ink);
}

/* Single product */
body.single-product div.product .product_title {
	color: var(--bz-forest);
	font: 500 var(--bz-text-h1)/1.05 var(--bz-font-editorial);
}

body.single-product div.product p.price {
	font-size: 28px;
}

body.single-product div.product .woocommerce-product-gallery {
	overflow: hidden;
	box-shadow: var(--bz-shadow-card);
}

body .woocommerce button.button.alt,
body .woocommerce a.button.alt,
body .woocommerce #respond input#submit.alt,
body .woocommerce input.button.alt {
	min-height: 50px;
	padding-inline: 28px;
	border-color: var(--bz-forest);
	background: var(--bz-forest);
	color: var(--bz-ivory);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background-color var(--bz-speed) var(--bz-ease), transform var(--bz-speed) var(--bz-ease);
}

body .woocommerce button.button.alt:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce input.button.alt:hover {
	background: var(--bz-deep);
	color: var(--bz-ivory);
	transform: translateY(-2px);
}

/* Notices */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
	border-top-color: var(--bz-forest);
	background: var(--bz-card-background);
	color: var(--bz-ink);
}

body .woocommerce-message::before,
body .woocommerce-info::before {
	color: var(--bz-forest);
}

body .woocommerce-error {
	border-top-color: var(--bz-accent-dark);
}

/* Cart, checkout, and order tables */
body .woocommerce table.shop_table {
	overflow: hidden;
	border: 1px solid var(--bz-card-border);
	border-radius: var(--bz-radius-small);
	background: var(--bz-card-background);
}

body .woocommerce table.shop_table th {
	color: var(--bz-forest);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

body .woocommerce table.shop_table td,
body .woocommerce table.shop_table th {
	border-color: var(--bz-card-border);
}

body .woocommerce-cart .cart-collaterals .cart_totals,
body .woocommerce-checkout #order_review,
body .woocommerce-checkout .woocommerce-checkout-review-order {
	padding: clamp(20px, 3vw, 32px);
	border-top: 3px solid var(--bz-gold);
	background: var(--bz-card-background);
	box-shadow: var(--bz-shadow-card);
}

body .woocommerce-checkout h3,
body .woocommerce-cart h2 {
	color: var(--bz-forest);
	font-family: var(--bz-font-editorial);
	font-weight: 500;
}

body .woocommerce-checkout #payment {
	border-radius: var(--bz-radius-small);
	background: var(--bz-sand);
}

body .woocommerce-checkout #payment div.payment_box {
	background: var(--bz-card-background);
	color: var(--bz-ink);
}

body .woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--bz-card-background);
}

/* Block-based cart/checkout */
body .wc-block-components-button:not(.is-link) {
	border-radius: var(--bz-radius-small);
	background: var(--bz-forest);
	color: var(--bz-ivory);
}

body .wc-block-components-button:not(.is-link):hover {
	background: var(--bz-deep);
}

body .wc-block-components-sidebar,
body .wp-block-woocommerce-checkout-order-summary-block {
	border-top: 3px solid var(--bz-gold);
	background: var(--bz-card-background);
}

/* My account navigation */
body .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--bz-card-border);
	background: var(--bz-card-background);
}

body .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 14px 18px;
	border-bottom: 1px solid var(--bz-card-border);
	color: var(--bz-forest);
	font-weight: 600;
	text-decoration: none;
}

body .woocommerce-MyAccount-navigation li.is-active a,
body .woocommerce-MyAccount-navigation li a:hover {
	background: var(--bz-forest);
	color: var(--bz-ivory);
}

/*
 * On WooCommerce pages the .woocommerce class sits on <body>, not on a wrapper, and Kadence
 * hard-codes its blue (#2b6cb0) on these buttons. Cover both placements.
 */
body .single_add_to_cart_button,
body.woocommerce button.button.alt,
body.woocommerce a.button.alt,
body.woocommerce input.button.alt,
body.woocommerce-page button.button.alt,
body.woocommerce-page a.button.alt,
body.woocommerce button.button,
body.woocommerce a.button,
body.woocommerce-page button.button,
body.woocommerce-page a.button {
	border-color: var(--bz-forest) !important;
	border-radius: var(--bz-radius-small);
	background-color: var(--bz-forest) !important;
	color: var(--bz-ivory) !important;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background-color var(--bz-speed) var(--bz-ease), transform var(--bz-speed) var(--bz-ease);
}

body .single_add_to_cart_button:hover,
body.woocommerce button.button:hover,
body.woocommerce a.button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page a.button:hover {
	border-color: var(--bz-deep) !important;
	background-color: var(--bz-deep) !important;
	color: var(--bz-ivory) !important;
	transform: translateY(-2px);
}

/* Restricted products: visible to everyone, with a note instead of the buy button (inc/lms-access.php). */
.bz-restricted-notice {
	display: grid;
	gap: 10px;
	justify-items: start;
	margin: 22px 0;
	padding: 20px 22px;
	border: 1px solid var(--bz-card-border);
	border-left: 3px solid var(--bz-gold);
	background: linear-gradient(135deg, rgba(var(--bz-gold-rgb), .12), transparent 60%), var(--bz-card-background);
	color: var(--bz-forest);
}

.bz-restricted-notice p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

.bz-restricted-notice__label,
.bz-restricted-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bz-accent-dark);
	font: 600 11px/1.2 var(--bz-font-ui);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.bz-restricted-notice__label::before,
.bz-restricted-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bz-gold);
}

.bz-restricted-notice__login {
	color: var(--bz-forest);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--bz-gold);
	text-underline-offset: 4px;
}

.bz-restricted-badge {
	margin: 14px 0 0;
	padding: 6px 12px;
	border: 1px solid rgba(var(--bz-gold-rgb), .55);
	border-radius: 999px;
	background: var(--bz-ivory);
}

/* ---- E2E test fixes (2026-10-08) ---- */

/* Block checkout selects draw their own chevron; drop the theme's to avoid a double arrow. */
body .wc-blocks-components-select__select {
	padding-right: 36px;
	background-image: none !important;
}

/* Order summary: hide the long product excerpt and give the summary more room. */
body .wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
	display: none;
}

body .wc-block-components-order-summary-item__description {
	min-width: 0;
	overflow-wrap: normal;
	word-break: normal;
}

@media (min-width: 700px) {
	body .wc-block-checkout.is-large .wc-block-components-main {
		width: 58%;
	}

	body .wc-block-checkout.is-large .wc-block-components-sidebar {
		width: 42%;
	}
}

/* Phones: keep the sort box and the grid/list switch inside the page gutter. */
@media (max-width: 600px) {
	body .kadence-shop-top-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
	}

	body .kadence-shop-top-row .kadence-woo-ordering {
		flex: 1 1 100%;
		min-width: 0;
	}

	body .woocommerce-ordering,
	body .woocommerce-ordering select {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}
}

/* Reseller price label (inc/reseller.php). */
.bz-reseller-label {
	display: inline-block;
	margin-left: 6px;
	color: var(--bz-accent-dark);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/*
 * Mein Konto (client feedback 2026-10-19): Kadence colours the active menu item's link and adds a
 * blue bar, which made the text invisible on the forest background. Same for every menu state here.
 */
body .woocommerce-account .woocommerce-MyAccount-navigation ul li a,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	border-left: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

body .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:focus-visible {
	background: var(--bz-forest) !important;
	color: var(--bz-ivory) !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	box-shadow: inset 3px 0 0 var(--bz-gold) !important;
}

/* Anforderungen table: compact ANZEIGEN / RECHNUNG buttons side by side. */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	white-space: nowrap;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button {
	display: inline-flex !important;
	align-items: center;
	min-height: 32px !important;
	margin: 0 6px 6px 0 !important;
	padding: 0 12px !important;
	font-size: 10px !important;
	letter-spacing: .12em !important;
	line-height: 1 !important;
	transform: none !important;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:not(.view) {
	border: 1px solid var(--bz-forest) !important;
	background: transparent !important;
	color: var(--bz-forest) !important;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:not(.view):hover {
	background: var(--bz-forest) !important;
	color: var(--bz-ivory) !important;
}

/* Meine Auswahl: "Teilnahme abschließen" (block cart) – light text, no link underline. */
.wc-block-cart__submit-button,
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus,
.wc-block-cart__submit-button .wc-block-components-button__text {
	color: var(--bz-ivory) !important;
	text-decoration: none !important;
}

.wc-block-cart__submit-button:hover {
	background-color: var(--bz-ink, #12211b) !important;
}

/*
 * Mein Konto (client feedback 2026-11-01): Kadence draws a thin line left of the whole navigation,
 * which next to the profile picture looked unrelated. Removed; picture and name sit flush above the menu.
 */
body.woocommerce-account .account-navigation-wrap {
	border-left: 0 !important;
}

body.woocommerce-account .kadence-account-avatar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 0 12px !important;
}

body.woocommerce-account .kadence-customer-image {
	position: static !important;
	flex: none;
}

/* Rechnungsdaten: "… bearbeiten" links left-aligned under the heading instead of floating right. */
body.woocommerce-account .woocommerce-Address-title .edit {
	display: inline-block;
	float: none !important;
	width: auto;
	margin: 0 0 14px;
}