/**
 * Produktdetailseite. Die Zweispaltigkeit (Galerie/Info) ist bereits
 * natives Storefront-Verhalten (`.single-product div.product` ist dort
 * Flexbox) - hier folgt nur die Verfeinerung zum editorialen Look.
 */

.single-product div.product {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xl);
	align-items: flex-start;
}

.single-product div.product > .images {
	flex: 1 1 52%;
	position: sticky;
	top: calc(var(--space-lg) + 72px);
}

.single-product div.product > .summary {
	flex: 1 1 40%;
}

.woocommerce-product-gallery__image {
	border-radius: var(--radius-medium);
	overflow: hidden;
	background: var(--color-background-alt-cool);
}

.flex-control-thumbs {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
	padding: 0;
	list-style: none;
}

.flex-control-thumbs li img {
	border-radius: var(--radius-small);
	border: 1.5px solid transparent;
	cursor: pointer;
}

.flex-control-thumbs li img.flex-active {
	border-color: var(--color-primary);
}

.summary .product_title {
	font-size: var(--font-size-2xl);
}

.summary .price {
	font-size: var(--font-size-lg);
	font-weight: 600;
	color: var(--color-text);
}

.summary .woocommerce-product-rating {
	margin-bottom: var(--space-md);
}

.summary .star-rating {
	color: var(--color-accent);
}

.summary .woocommerce-product-details__short-description {
	color: var(--color-text-muted);
	font-size: var(--font-size-md);
}

/* Varianten als grosse Klick-Chips statt Standard-Dropdown, wo es die
   Attributanzahl zulaesst (Dropdown bleibt technisch bestehen, wird aber
   visuell in ein Chip-Grid uebersetzt via CSS auf dem umschliessenden
   select - siehe README fuer den Hinweis auf ein Swatches-Plugin fuer
   echte Klick-Chips/Farbkreise ohne <select>). */
.variations select {
	max-width: 320px;
}

.variations td.label {
	font-weight: 500;
	padding-right: var(--space-md);
}

.single_variation_wrap .price {
	font-size: var(--font-size-lg);
}

.woocommerce-variation-availability .stock {
	font-size: var(--font-size-sm);
}

/* Verfuegbarkeit: kein reiner Farbcode - immer zusaetzlich Text (WCAG:
   Information nicht ausschliesslich ueber Farbe). Der farbige Punkt ist
   rein dekorativ (aria-hidden im Markup nicht noetig, .stock enthaelt
   bereits den Text von WooCommerce). */
.stock {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--font-size-sm);
	font-weight: 500;
}

.stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-secondary);
}

.stock.out-of-stock::before {
	background: var(--color-error);
}

/* Add-to-Cart deutlich hervorheben. */
.single_add_to_cart_button,
.woocommerce div.product form.cart .button {
	min-height: 56px;
	font-size: var(--font-size-md);
	width: 100%;
}

@media (min-width: 600px) {
	.single_add_to_cart_button,
	.woocommerce div.product form.cart .button {
		width: auto;
		min-width: 260px;
	}
}

/* Trust-Bar (siehe class-musterlaune-single-product.php). */
.musterlaune-trust-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md) var(--space-lg);
	list-style: none;
	margin: var(--space-lg) 0;
	padding: var(--space-md) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

/* Produkt-Tabs. */
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	list-style: none;
	padding: 0;
	margin-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	font-weight: 500;
	color: var(--color-text-muted);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
}

/* Akkordeon im "Masse, Material & Versand"-Tab. */
.musterlaune-accordion__item {
	border-bottom: 1px solid var(--color-border);
}

.musterlaune-accordion__trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: none;
	border: none;
	text-align: left;
	padding: var(--space-md) 0;
	font-size: var(--font-size-md);
	font-weight: 500;
	cursor: pointer;
	color: var(--color-text);
}

.musterlaune-accordion__icon {
	font-size: var(--font-size-lg);
	color: var(--color-text-faint);
	transition: transform var(--transition-fast);
}

.musterlaune-accordion__trigger[aria-expanded="true"] .musterlaune-accordion__icon {
	transform: rotate(45deg);
}

.musterlaune-accordion__panel {
	padding-bottom: var(--space-md);
	color: var(--color-text-muted);
}

/* Upsells / Related Products nutzen dieselbe Produktkarte + ul.products-
   Grid wie ueberall im Theme (siehe components.css). Nur der Abstand zur
   vorherigen Section wird hier ergaenzt. */
.up-sells,
.related.products {
	margin-top: var(--space-4xl);
}

.up-sells > h2,
.related.products > h2 {
	font-size: var(--font-size-2xl);
	text-align: center;
	margin-bottom: var(--space-xl);
}

/* Sticky Add-to-Cart (mobil). */
.musterlaune-sticky-cart {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	box-shadow: var(--shadow-soft);
	z-index: 150;
	padding-block: var(--space-sm);
}

.musterlaune-sticky-cart[hidden] {
	display: none;
}

.musterlaune-sticky-cart__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
}

.musterlaune-sticky-cart__info {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-width: 0;
}

.musterlaune-sticky-cart__image {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-small);
	object-fit: cover;
	flex-shrink: 0;
}

.musterlaune-sticky-cart__title {
	font-size: var(--font-size-sm);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 160px;
}

.musterlaune-sticky-cart__price {
	font-size: var(--font-size-sm);
	font-weight: 600;
	margin: 0;
}

.musterlaune-sticky-cart__cta {
	flex-shrink: 0;
	padding: 0.7rem 1.25rem;
	white-space: nowrap;
}

/* Auf Desktop nicht noetig - der echte Button ist ohnehin permanent sichtbar
   im sticky-positionierten Gallerie-/Summary-Bereich. */
@media (min-width: 900px) {
	.musterlaune-sticky-cart {
		display: none;
	}
}

@media (max-width: 899px) {
	.single-product div.product > .images {
		position: static;
	}
	body.single-product {
		padding-bottom: 76px; /* Platz fuer die Sticky-Leiste, verhindert ueberdeckten Content. */
	}
}