/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   Edelstahl Variantenschnellkauf – nur Struktur/Layout.
   Typografie/Farben/Buttons kommen aus dem Bricks Theme Style.
   ========================================================================== */

.ek-vt {
	width: 100%;
}

/* Tabelle wird per JS in die Produktkarte verschoben und spannt dort volle
   Breite (eigene Zeile unter dem Produkt) – Grid, Flex(-wrap) oder Block. */
.ek-card {
	flex-wrap: wrap;
}

.ek-card > .ek-vt-table-wrap {
	grid-column: 1 / -1;
	flex-basis: 100%;
	width: 100%;
	order: 99;
	margin-top: var(--space-s);
}

/* Weißes Panel mit oben abgerundeten Ecken */
.ek-vt-scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	background: var(--color-bg);
	border-radius: var(--radius-s);
}

.ek-vt-table {
	width: 100%;
	border-collapse: collapse;
}

.ek-vt-table th,
.ek-vt-table td {
	padding: var(--space-xs) var(--space-s);
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

.ek-vt-table thead th {
	background: var(--color-bg);
	font-weight: 500;
	text-transform: none;
}

.ek-vt-table tbody tr {
	border-top: 1px solid var(--color-bg-muted);
}

.ek-vt-unit {
	color: var(--color-text-muted);
}

/* Toggle-Button wie Produkt-Warenkorbbutton, Icon-Drehung bleibt eigen */
.ek-vt .bricks-button.outline.ek-vt-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 200px;
	padding: 13px 20px;
	border-color: var(--color-accent) !important;
	border-radius: var(--radius-s);
	background-color: var(--color-accent) !important;
	color: var(--color-primary) !important;
	font-weight: 600;
	line-height: 1;
	box-shadow: none;
}

.ek-vt .bricks-button.outline.ek-vt-toggle:hover,
.ek-vt .bricks-button.outline.ek-vt-toggle:focus-visible {
	border-color: var(--color-accent-hover) !important;
	background-color: var(--color-accent-hover) !important;
	color: var(--color-primary) !important;
}

.ek-vt--loading .ek-vt-toggle {
	opacity: 0.6;
	pointer-events: none;
}

/* Mengen-Stepper: Varianten an normale Loop-Quantity angeglichen */
.ek-vt-qty {
	display: inline-grid;
	grid-template-columns: 2.4em minmax(2.5em, 3em) 2.4em;
	align-items: stretch;
	height: calc(var(--input-height, 46px) - 8px);
	border: 1px solid var(--color-primary-light);
	border-radius: calc(var(--radius-s) - 2px);
	overflow: hidden;
	background: var(--color-bg-soft);
}

.ek-vt-qty-btn {
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--color-bg-muted);
	color: var(--color-primary);
	font-size: 1.15em;
	line-height: 1;
	cursor: pointer;
}

.ek-vt-qty-btn:hover {
	background: var(--color-primary-light);
}

.ek-vt-qty-input {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 0;
	height: 100%;
	line-height: 1;
	border-top: 0;
	border-bottom: 0;
	border-left: 1px solid var(--color-primary-light);
	border-right: 1px solid var(--color-primary-light);
	text-align: center;
	background: var(--color-bg);
	color: var(--color-primary);
	font-weight: 400;
	-moz-appearance: textfield;
}

.ek-vt-qty-input::-webkit-outer-spin-button,
.ek-vt-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Normale Loop-Produkte: Quantity mit Border und Abstand zum Button */
.ek-vt-simple .brx-loop-product-form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
}

.ek-vt-simple .brx-loop-product-form .quantity {
	border: 1px solid var(--color-primary-light);
	border-radius: var(--radius-s);
	overflow: hidden;
	background: var(--color-bg-soft);
}

.ek-vt-simple .brx-loop-product-form .quantity .qty {
	border-left: 1px solid var(--color-primary-light) !important;
	border-right: 1px solid var(--color-primary-light) !important;
	background: var(--color-bg);
}

.ek-vt-simple .brx-loop-product-form .quantity .action {
	border: 0;
	background: var(--color-bg-muted);
}

.ek-vt-simple .added_to_cart {
	margin-top: 0;
	padding: 0;
	font-size: var(--font-s);
	line-height: var(--line-body);
}

/* Warenkorb-Button: identisch zum normalen Produkt-Button (Theme .button) */
.ek-vt-action {
	white-space: nowrap;
}

.ek-vt-add {
	width: 100%;
	min-width: 147px;
	max-width: 240px;
}

.ek-vt-table td.ek-vt-action {
	text-align: right;
	padding-right: 7px;
}

.ek-vt-table td.ek-vt-action .ek-vt-add {
	width: 100%;
	max-width: 193px;
	margin-left: auto;
}

.ek-vt-add--busy {
	opacity: 0.85;
	cursor: wait;
	position: relative;
	color: transparent !important;
}

.ek-vt-add--busy::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 17px;
	height: 17px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ekvt-dreh 0.6s linear infinite;
}

@keyframes ekvt-dreh {
	to { transform: rotate(360deg); }
}

.ek-vt-stock--ok {
	color: var(--color-success);
}

.ek-vt-stock--low {
	color: var(--color-warning);
}

.ek-vt-empty,
.ek-vt-unavailable {
	color: var(--color-text-muted);
}

/* Mobil: Zeilen gestapelt */
@media (max-width: 767px) {
	.ek-vt-simple .brx-loop-product-form .quantity {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr) 48px;
		width: 100%;
	}

	.ek-vt-simple .brx-loop-product-form .quantity .qty {
		width: 100%;
		min-width: 0;
		margin: 0;
	}

	.ek-vt-simple .brx-loop-product-form .quantity .action {
		display: grid;
		place-items: center;
		width: 100%;
		min-width: 0;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.ek-vt-scroll {
		overflow-x: visible;
		background: transparent;
		border-radius: 0;
	}

	.ek-vt-table,
	.ek-vt-table tbody,
	.ek-vt-table tr,
	.ek-vt-table td {
		display: block;
		width: 100%;
	}

	.ek-vt-table thead {
		display: none;
	}

	.ek-vt-table tbody tr {
		border: 1px solid var(--color-bg-muted);
		border-radius: var(--radius-m);
		margin-bottom: var(--space-s);
		background: var(--color-bg);
	}

	.ek-vt-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-m);
		white-space: normal;
	}

	.ek-vt-table td[data-label]::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--color-text-muted);
	}

	.ek-vt-table td.ek-vt-action .ek-vt-add {
		width: 100%;
		max-width: none;
	}

	.ek-vt-table td.ek-vt-action {
		padding-right: var(--space-s);
	}
}

/* Varianten-Tabelle: Quantity-Stepper ruhiger und Warenkorb-Link einruecken */

.ek-vt .added_to_cart {
	display: inline-block;
	margin-left: var(--space-s);
}

@media (max-width: 767px) {
	.ek-vt .added_to_cart {
		margin-left: var(--space-s);
	}
}
/* Shortcode [ek_variations_toggle]: Simple-Product Quantity anpassen */
.ek-vt-simple .brx-loop-product-form .quantity {
	border-color: var(--muted, var(--color-bg-muted));
	background: var(--color-bg-muted);
}

.ek-vt-simple .brx-loop-product-form .quantity .qty,
.ek-vt-simple .brx-loop-product-form .quantity .action {
	background: var(--color-bg-muted) !important;
}

.ek-vt-simple .brx-loop-product-form .quantity .qty {
	border-left-color: var(--muted, var(--color-bg-muted)) !important;
	border-right-color: var(--muted, var(--color-bg-muted)) !important;
}

.ek-vt-simple .added_to_cart {
	display: inline-block;
	margin-left: var(--space-s);
}
/* Shortcode [ek_variations_toggle]: Simple-Product Quantity 5px flacher */
.ek-vt-simple .brx-loop-product-form .quantity {
	height: calc(var(--input-height, 46px) - 7px);
}

.ek-vt-simple .brx-loop-product-form .quantity .qty,
.ek-vt-simple .brx-loop-product-form .quantity .action {
	height: 100%;
}
/* Shortcode [ek_variations_toggle]: Simple-Product Quantity ohne Border mit hellem Akzent */
.ek-vt-simple .brx-loop-product-form .quantity {
	border-color: transparent;
	background: #fff;
}

.ek-vt-simple .brx-loop-product-form .quantity .qty,
.ek-vt-simple .brx-loop-product-form .quantity .action {
	background: #fff !important;
}

.ek-vt-simple .brx-loop-product-form .quantity .qty {
	border-left-color: transparent !important;
	border-right-color: transparent !important;
}
/* Shortcode [ek_variations_toggle]: Minus/Plus dunkelblau */
.ek-vt-simple .brx-loop-product-form .quantity .action {
	color: var(--color-primary) !important;
}
/* Shop Loop: Varianten- und Warenkorb-Button gleich breit */
.ek-vt,
.ek-vt-simple,
.ek-vt-simple .brx-loop-product-form {
	width: 100%;
}

.ek-vt .bricks-button.outline.ek-vt-toggle,
.ek-vt-simple .brx-loop-product-form .button,
.ek-vt-simple .brx-loop-product-form button[type="submit"] {
	width: 100%;
	min-width: 0;
}
/* Shop Loop: Varianten-Button volle Wrapper-Breite */
.ek-vt .bricks-button.outline.ek-vt-toggle {
	display: flex;
	width: 100%;
	margin-left: 0;
}
/* Shortcode [ek_variations_toggle]: Quantity feine Input-Kanten entfernen */
.ek-vt-simple .brx-loop-product-form .quantity,
.ek-vt-simple .brx-loop-product-form .quantity .qty,
.ek-vt-simple .brx-loop-product-form .quantity .action {
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

.ek-vt-simple .brx-loop-product-form .quantity .qty:focus,
.ek-vt-simple .brx-loop-product-form .quantity .action:focus,
.ek-vt-simple .brx-loop-product-form .quantity .action:focus-visible {
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

/* Variantentabelle: sortierbare Spalten (Größe / VPE / Preis) – zwei gestapelte Pfeile wie WP-Backend */
.ek-vt-table thead th.ek-vt-sortable{cursor:pointer;user-select:none;}
.ek-vt-table thead th.ek-vt-sortable .ek-vt-th-label{margin-right:.35em;}
.ek-vt-table thead th.ek-vt-sortable:hover{color:var(--color-primary);}
.ek-vt-sort-ind{display:inline-flex;flex-direction:column;justify-content:center;line-height:0;vertical-align:middle;}
.ek-vt-sort-ind::before,.ek-vt-sort-ind::after{content:"";display:block;width:0;height:0;border-left:.32em solid transparent;border-right:.32em solid transparent;opacity:.3;}
.ek-vt-sort-ind::before{border-bottom:.34em solid currentColor;margin-bottom:2px;}
.ek-vt-sort-ind::after{border-top:.34em solid currentColor;}
.ek-vt-sortable.is-asc .ek-vt-sort-ind::before, .ek-vt-chip.is-asc .ek-vt-sort-ind::before{opacity:1;border-bottom-color:var(--color-accent);}
.ek-vt-sortable.is-desc .ek-vt-sort-ind::after, .ek-vt-chip.is-desc .ek-vt-sort-ind::after{opacity:1;border-top-color:var(--color-accent);}
.ek-vt-sortable:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}

/* Mobile: Quantity im Produkt-Loop 5px hoeher */
@media (max-width: 767px) {
	.ek-vt-simple .brx-loop-product-form .quantity {
		height: calc(var(--input-height, 46px) - 2px);
	}
}

/* Mobile Sortier-Chips (Variantentabelle) */
.ek-vt-sortbar{display:none;}
@media (max-width:767px){
	.ek-vt-sortbar{display:flex;flex-wrap:wrap;gap:var(--space-xs,.4rem);margin-bottom:var(--space-s);}
	.ek-vt-chip{display:inline-flex;align-items:center;gap:.4em;padding:.45em .85em;border:1px solid var(--color-bg-muted);border-radius:var(--radius-s);background:var(--color-bg-soft);color:var(--color-text);font-weight:500;font-size:.85em;line-height:1;cursor:pointer;}
	.ek-vt-chip.is-asc,.ek-vt-chip.is-desc{background:var(--color-primary-soft);border-color:var(--color-primary-soft);color:var(--color-text-light);}
}

/* Single-Produkt Variations-Form: Select-Felder flacher (wie Mengenfeld) + Labels vertikal mittig */
.variations_form table.variations td.value select {
	min-height: 40px !important;
	height: 40px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border: none !important;
	border-radius: var(--radius-s) !important;
}
.variations_form table.variations th.label,
.variations_form table.variations td.value {
	vertical-align: top !important;
}
.variations_form table.variations th.label label {
	margin: 0;
	height: 40px;
	display: flex;
	align-items: center;
}

/* selectWoo/select2 fuer Single-Produkt Variations-Selects (an Theme angepasst) */
.ek-vt-select2.select2-selection--single {
	height: 40px !important;
	background: var(--color-bg-muted) !important;
	border: none !important;
	border-radius: var(--radius-s) !important;
	display: flex !important;
	align-items: center;
}
.ek-vt-select2 .select2-selection__rendered {
	line-height: 40px !important;
	color: var(--color-primary) !important;
	padding-left: 14px !important;
	padding-right: 34px !important;
	font-size: 14px !important;
}
.ek-vt-select2 .select2-selection__arrow {
	height: 100% !important;
	top: 0 !important;
	right: 12px !important;
	display: flex !important;
	align-items: center;
}
.ek-vt-select2 .select2-selection__arrow b {
	position: static !important;
	margin: 0 !important;
	left: auto !important;
	border-color: var(--color-primary) transparent transparent transparent !important;
	border-width: 6px 5px 0 5px !important;
}
.ek-vt-select2.select2-selection--single[aria-expanded="true"] .select2-selection__arrow b {
	border-color: transparent transparent var(--color-primary) transparent !important;
	border-width: 0 5px 6px 5px !important;
}
.ek-vt-select2-drop.select2-dropdown {
	border: none !important;
	border-radius: var(--radius-s) !important;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(35, 53, 80, 0.14);
	background: var(--color-bg);
	margin-top: 4px;
}
.ek-vt-select2-drop .select2-results__option {
	font-size: 14px;
	padding: 9px 14px;
	color: var(--color-text);
}
.ek-vt-select2-drop .select2-results__option--highlighted[aria-selected],
.ek-vt-select2-drop .select2-results__option:hover {
	background: var(--color-bg-muted) !important;
	color: var(--color-primary) !important;
}
.ek-vt-select2-drop .select2-results__option[aria-selected="true"] {
	background: var(--color-bg-muted) !important;
	color: var(--color-primary) !important;
}
.ek-vt-select2-drop .select2-results__option[aria-disabled="true"] {
	color: var(--color-text-muted);
	opacity: 0.5;
}

/* Add-to-Cart-Button eigenstaendig stylen (auch ohne .woocommerce-Kontext, z.B. Suchergebnisseite) */
.ek-vt-table .ek-vt-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 7px 15px;
	border: 0;
	border-radius: var(--radius-s);
	background-color: var(--color-accent);
	color: var(--color-primary);
	font-size: var(--font-s);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.ek-vt-table .ek-vt-add:hover,
.ek-vt-table .ek-vt-add:focus-visible {
	background-color: var(--color-accent-hover);
	color: var(--color-primary);
}

/* === Einzelproduktseite: Varianten-Tabelle als Kauffläche (Baustelle A) === */
/* Variable Produkte: native Dropdown-Kaufbox ausblenden (reversibel: diese Regel + Body-Klasse entfernen). */
.ek-single-variable #brxe-spcart { display: none !important; }
.ek-vt--inline { width: 100%; }
.ek-vt--inline .ek-vt-table-wrap { margin-top: var(--space-xs); }

/* Sticky Tabellenkopf ab Tablet */
@media (min-width: 768px) {
	.ek-vt-table thead th { position: sticky; top: 0; z-index: 2; background: var(--color-bg); }
}

/* Kopfzeile nur in der Inline-Tabelle der Einzelproduktseite (nicht im Loop) */
.ek-vt--inline .ek-vt-table {
	border-collapse: separate;
	border-spacing: 0;
}

.ek-vt--inline .ek-vt-table thead th {
	background: var(--color-bg-muted);
}

.ek-vt--inline .ek-vt-table thead th:first-child {
	border-top-left-radius: var(--radius-s);
	border-bottom-left-radius: var(--radius-s);
}

.ek-vt--inline .ek-vt-table thead th:last-child {
	border-top-right-radius: var(--radius-s);
	border-bottom-right-radius: var(--radius-s);
}

/* Zeilentrenner bei border-collapse: separate auf die Zellen legen */
.ek-vt--inline .ek-vt-table tbody tr {
	border-top: 0;
}

.ek-vt--inline .ek-vt-table tbody td {
	border-top: 1px solid var(--color-bg-muted);
}

/* Kopfzeile: mehr Luft oben/unten */
.ek-vt--inline .ek-vt-table thead th {
	padding-top: var(--space-s);
	padding-bottom: var(--space-s);
}

/* Keine Trennlinie direkt unter der Kopfzeile + 1rem Abstand zur ersten Zeile */
.ek-vt--inline .ek-vt-table tbody tr:first-child td {
	border-top: 0;
	padding-top: 1rem;
}


/* ekv-warenkorb-menge: kompaktere Mengen-Steuerung (+/-) im Warenkorb.
   Liegt hier (nicht in Bricks-Custom-CSS), weil die Warenkorb-Seite kein Bricks-Template ist.
   Muss im selben @layer wie Bricks' Woo-Styles stehen: deren !important-Regeln im Layer
   schlagen sonst jedes !important ausserhalb des Layers (CSS-Cascade-Layer-Regel). */
@layer bricks {
	body .woocommerce-cart-form .quantity {
		width: auto !important;
		height: 30px !important;
		align-items: center !important;
	}

	body .woocommerce-cart-form .quantity .action.minus,
	body .woocommerce-cart-form .quantity .action.plus {
		width: 28px !important;
		height: 28px !important;
		min-height: 0 !important;
		min-width: 28px !important;
		line-height: 28px !important;
		padding: 0 !important;
	}

	body .woocommerce-cart-form .quantity input.qty {
		flex: 0 0 38px !important;
		width: 38px !important;
		min-width: 38px !important;
		height: 28px !important;
		min-height: 28px !important;
		font-size: 13px;
	}
}


/* ekv-konto-meldungen: WooCommerce rendert Meldungen im Mein-Konto-Inhalt (z.B.
   E-Mail-Bestaetigungshinweis) ausserhalb des .woocommerce-notices-wrapper -
   dort greift Bricks' Notice-Padding nicht (Innenabstand 0). Gleiche Abstaende
   wie die regulaeren Meldungen (10px / 16px). */
@layer bricks {
	.woocommerce-MyAccount-content .woocommerce-message,
	.woocommerce-MyAccount-content .woocommerce-info,
	.woocommerce-MyAccount-content .woocommerce-error {
		padding: 10px 16px;
	}
}