/*
 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: 600;
	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;
}

.ek-vt-add--busy {
	opacity: 0.6;
	cursor: wait;
}

.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%;
	}
}