/**
 * WooCommerce – Produktsammlungen (Produktkarten, Grid, Karussell)
 *
 * Wird über wp_enqueue_block_style() nur geladen, wenn ein woocommerce/product-collection-Block
 * gerendert wird (Startseite, Shop, Kategorien, Suche, Produktseite, Warenkorb).
 *
 * @package weingut-heidegg
 */

.wp-block-woocommerce-product-collection {
	container: heidegg-products / inline-size;
}

/* =========================================================================
   GRID: 2 Spalten auf kleinen Breiten, 3 (bzw. 4) ab genügend Platz
   ========================================================================= */

.wc-block-product-template__responsive {
	row-gap: var(--wp--preset--spacing--60);
}

.wc-block-product-template__responsive.columns-2,
.wc-block-product-template__responsive.columns-3,
.wc-block-product-template__responsive.columns-4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container heidegg-products (min-width: 700px) {
	.wc-block-product-template__responsive.columns-3,
	.wc-block-product-template__responsive.columns-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container heidegg-products (min-width: 1000px) {
	.wc-block-product-template__responsive.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Kompakte Karten im 2-Spalten-Raster (Mobile) */
@container heidegg-products (max-width: 699px) {
	.wc-block-product-template__responsive {
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
	}

	.wc-block-product-template__responsive .wp-block-post-title {
		font-size: var(--wp--preset--font-size--xl);
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	.wc-block-product-template__responsive .wc-block-components-product-price {
		font-size: var(--wp--preset--font-size--md);
	}

	.wc-block-product-template__responsive .wc-block-components-product-button .wp-block-button__link {
		padding-inline: var(--wp--preset--spacing--10);
		font-size: var(--wp--preset--font-size--sm);
		white-space: normal;
		max-width: 100%;
	}

	ul.wc-block-product-template li.wc-block-product.outofstock::before {
		font-size: var(--wp--preset--font-size--sm);
	}
}

/* =========================================================================
   KARUSSELL (verwandte Produkte, Startseite)
   ========================================================================= */

.wc-block-product-template.wc-block-product-template.is-product-collection-layout-carousel {
	gap: var(--wp--preset--spacing--10);
}

.is-product-collection-layout-carousel .wc-block-product {
	max-width: inherit;
	min-width: 100%;
}

@container carousel (min-width: 600px) {
	.is-product-collection-layout-carousel .wc-block-product {
		min-width: calc(50% - var(--wp--preset--spacing--10) + 2px);
	}
}

@container carousel (min-width: 960px) {
	.is-product-collection-layout-carousel .wc-block-product {
		min-width: calc(33.333% - var(--wp--preset--spacing--10) + 2px);
	}
}

@container carousel (min-width: 1280px) {
	.is-product-collection-layout-carousel .wc-block-product {
		min-width: calc(25% - var(--wp--preset--spacing--10) + 2px);
	}
}

/* Startseite: 1 / 2 / höchstens 3 Produkte gleichzeitig */
@container carousel (min-width: 600px) {
	body.home .is-product-collection-layout-carousel .wc-block-product {
		min-width: calc(50% - var(--wp--preset--spacing--10) + 2px);
	}
}

@container carousel (min-width: 1024px) {
	body.home .is-product-collection-layout-carousel .wc-block-product {
		min-width: calc(33.333% - var(--wp--preset--spacing--10) + 2px);
	}
}

/* Vor/Zurück-Buttons (auch gegen den Flex-Layout-Gap des Blocks) */
.wc-block-next-previous-buttons,
.wc-block-next-previous-buttons.is-layout-flex {
	gap: var(--wp--preset--spacing--10);
}

/* Produktseite, «Ähnliche Produkte»: WooCommerce setzt einen leeren Hinweis-Container als
   erstes Kind ein; die Überschrift soll trotzdem keinen Blockgap-Abstand bekommen (wie bisher). */
.single-product .wp-block-woocommerce-product-collection > .wc-block-components-notices:first-child:not(:has(*)) + * {
	margin-block-start: 0;
}

button.wc-block-next-previous-buttons__button {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	border-radius: 0;
}

/* Überschrift einer Sammlung */
.wp-block-woocommerce-product-collection h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--5-xl);
	line-height: 1.3;
}

/* =========================================================================
   PRODUKTKARTE
   ========================================================================= */

.wc-block-components-product-image a {
	position: relative;
	display: block;
	border: var(--category-border-width) solid transparent;
	border-radius: 0;
	transition: var(--category-transition);
}

/* Eckige Produktbilder auch dort, wo WooCommerce (z. B. blocks/cart.css) den Radius erbt. */
.wp-block-woocommerce-product-collection .wc-block-components-product-image,
.wp-block-woocommerce-product-collection .wc-block-components-product-image a,
.wp-block-woocommerce-product-collection .wc-block-components-product-image img {
	border-radius: 0;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image img {
	transition: transform var(--transition-slow);
}

@media (hover: hover) and (pointer: fine) {
	.wc-block-components-product-image a:hover {
		border-color: var(--heidegg-grey-300);
	}

	.wp-block-woocommerce-product-collection .wc-block-components-product-image a:hover img {
		transform: scale(1.025);
	}
}

/* Ausverkauft-Badge */
ul.wc-block-product-template li.wc-block-product.outofstock {
	position: relative;
}

ul.wc-block-product-template li.wc-block-product.outofstock::before {
	content: "Ausverkauft";
	position: absolute;
	z-index: 10;
	top: 2px;
	right: 2px;
	padding: 2px 10px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--interstate);
	font-size: var(--wp--preset--font-size--md);
	line-height: inherit;
	transition: background-color var(--transition-base);
}

/* =========================================================================
   KATEGORIEFARBEN AUF KARTEN
   ========================================================================= */

/* Bild: Kategoriefarbe als Hover-Fläche */
body[class*="product_cat-"] .wc-block-components-product-image a::before,
li[class*="product_cat-"] .wc-block-components-product-image a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--category-accent, transparent);
	border-radius: inherit;
	opacity: 0;
	transition: var(--category-transition);
}

body[class*="product_cat-"] .wc-block-components-product-image a:hover::before,
li[class*="product_cat-"] .wc-block-components-product-image a:hover::before {
	opacity: var(--category-hover-opacity);
}

body[class*="product_cat-"] .wc-block-components-product-image a:hover,
li[class*="product_cat-"] .wc-block-components-product-image a:hover {
	border-color: var(--category-accent);
}

/* Produktseite (verwandte Produkte): Titel, Preis und Button in Kategoriefarbe */
body[class*="product_cat-"] .wc-block-product .wp-block-post-title a:hover {
	color: var(--category-accent-dark);
}

/* Der Preis-Badge ist inline-block: die Ausrichtung des Blocks muss auf dem Wrapper wirken. */
.wp-block-woocommerce-product-price[data-text-align="center"] {
	text-align: center;
}

body[class*="product_cat-"] .wc-block-product .wc-block-components-product-price {
	display: inline-block;
	padding: var(--category-padding-sm) var(--category-padding-md);
	background: var(--category-accent-light);
}

body[class*="product_cat-"] .wc-block-components-product-button .wp-block-button__link {
	background-color: var(--category-accent-dark);
	border-color: var(--category-accent-dark);
	color: var(--wp--preset--color--black);
	transition: var(--category-transition);
}

body[class*="product_cat-"] .wc-block-components-product-button .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* Überschrift mit Kategorie-Balken */
body[class*="product_cat-"] .wp-block-woocommerce-product-collection h2::before {
	content: "";
	display: inline-block;
	width: var(--category-accent-bar-width);
	height: var(--category-accent-bar-height);
	/* + Wortabstand: im alten Template stand vor dem Text ein Leerzeichen */
	margin-right: calc(var(--category-spacing-md) + 0.25em);
	vertical-align: middle;
	background-color: var(--category-accent-dark);
	border-radius: var(--category-border-width-thin);
}

@media (max-width: 768px) {
	body[class*="product_cat-"] .wp-block-woocommerce-product-collection h2::before {
		display: none;
	}
}

/* Vor/Zurück-Buttons in Kategoriefarbe */
body[class*="product_cat-"] .wc-block-next-previous-buttons__button {
	border: var(--category-border-width-thin) solid transparent;
	transition: var(--category-transition);
}

body[class*="product_cat-"] .wc-block-next-previous-buttons__button:hover {
	background-color: var(--category-accent);
	border-color: var(--category-accent-dark);
	color: var(--wp--preset--color--black);
}

body[class*="product_cat-"] .wc-block-next-previous-buttons__button[aria-disabled="true"] {
	opacity: var(--category-disabled-opacity);
	cursor: not-allowed;
}

body[class*="product_cat-"] .wc-block-next-previous-buttons__button[aria-disabled="true"]:hover {
	background-color: transparent;
	border-color: transparent;
}