/**
 * Biohonig Staffelpreise – Schnellwahl-Buttons.
 *
 * Der Container ist bei variablen Produkten ein Flex-Item der bestehenden
 * .variations_button-Zeile, bei einfachen Produkten ein Block zwischen
 * Mengenfeld und Warenkorb-Button.
 */

.bhsp-tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
}

.woocommerce div.product form.cart .bhsp-tiers {
	margin-bottom: 0;
}

/*
 * Bei variablen Produkten ist .variations_button eine Flex-Zeile aus Mengenfeld
 * und Warenkorb-Button. Stehen unsere Buttons dazwischen, wird es in einer Zeile
 * zu eng – der Warenkorb-Button bekommt deshalb eine eigene Zeile darunter.
 */
.bhsp-tiers ~ .single_add_to_cart_button {
	flex: 1 0 100%;
}

.bhsp-tier {
	align-items: center;
	background: transparent;
	border: 2px solid #5d5454;
	border-radius: 5px;
	color: #5d5454;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 14px;
	font-weight: bold;
	height: 40px;
	justify-content: center;
	line-height: 1;
	padding: 0 14px;
	text-align: center;
	transition: all 0.2s;
	white-space: nowrap;
}

.bhsp-tier:hover,
.bhsp-tier:focus {
	background-color: #5d5454;
	color: #fff;
}

.bhsp-tier:focus-visible {
	outline: 2px solid #5d5454;
	outline-offset: 2px;
}

.bhsp-tier[disabled],
.bhsp-tier.is-unavailable {
	cursor: not-allowed;
	opacity: 0.4;
}

.bhsp-tier[disabled]:hover,
.bhsp-tier.is-unavailable:hover {
	background: transparent;
	color: #5d5454;
}

/*
 * Mini-Warenkorb: Die Position ist im Theme eine Flex-Zeile aus Bild+Name,
 * Artikel-Metadaten (dl.variation) und Menge. Ohne Umbruch stehen unser
 * Rabatthinweis und die Menge neben dem Namen und laufen aus dem Kasten.
 * Mit Umbruch und voller Breite für die Metadaten stapelt sich alles.
 */
.woocommerce-mini-cart-item {
	flex-wrap: wrap;
}

.woocommerce-mini-cart-item > dl.variation {
	flex: 1 0 100%;
}

/*
 * WooCommerce setzt auf `.woocommerce ul.cart_list li dl` (Spezifität 0,2,3) einen
 * linken Trennstrich mit Einrückung – sinnvoll, solange die Metadaten neben dem
 * Namen stehen, überflüssig, seit sie darunter liegen. Die Überschreibung braucht
 * denselben Selektor plus unsere Klassen, sonst gewinnt WooCommerce.
 */
.woocommerce ul.cart_list li.woocommerce-mini-cart-item > dl.variation {
	border-left: 0;
	margin: 6px 0 0;
	padding-left: 0;
}

/* Dito: WooCommerce gibt dt und dd ein margin-bottom von 1em (0,2,4). */
.woocommerce ul.cart_list li.woocommerce-mini-cart-item > dl.variation dt,
.woocommerce ul.cart_list li.woocommerce-mini-cart-item > dl.variation dd {
	margin-bottom: 0;
}

.woocommerce-mini-cart-item > dl.variation dd p {
	margin: 0;
}

/*
 * Menge und Preis immer rechtsbündig – auch bei Positionen ohne Rabatthinweis.
 * Dort steht die Menge weiterhin neben dem Namen und wird per auto-Margin an
 * den rechten Rand geschoben.
 */
.woocommerce-mini-cart-item > .quantity {
	margin-left: auto;
	text-align: right;
}

/* Mit Rabatthinweis darüber bekommt die Menge eine eigene Zeile über die volle Breite. */
.woocommerce-mini-cart-item > dl.variation ~ .quantity {
	flex: 1 0 100%;
}

/* Warenkorb: alter Preis durchgestrichen, neuer Preis hervorgehoben. */
.bhsp-price del {
	opacity: 0.6;
}

.bhsp-price ins {
	background: transparent;
	font-weight: bold;
	text-decoration: none;
}

@media (max-width: 480px) {
	.bhsp-tiers {
		width: 100%;
	}

	.bhsp-tier {
		flex: 1;
	}
}