/**
 * Produktkacheln auf Shop-, Kategorie- und Suchergebnisseiten.
 *
 * Ergänzt Blocksys Standardkacheln um ruhigere Abstände, abgerundete
 * Bildflächen und eine klarere Hierarchie: Bild -> Titel -> Preis ->
 * Rechtstexte -> Button.
 *
 * Farben stammen aus Blocksys Palette (--theme-palette-color-*), damit
 * Änderungen im Customizer automatisch greifen.
 */

.woocommerce ul.products li.product,
ul.products li.product {
	--hp-surface: var(--theme-palette-color-6, #f4f5f6);
	--hp-border: var(--theme-palette-color-5, #e9ebec);
	--hp-text: var(--theme-palette-color-4, #111518);
	--hp-muted: var(--theme-palette-color-3, #687279);
	--hp-accent: var(--theme-palette-color-1, #ff6310);
	--hp-on-accent: var(--theme-palette-color-8, #ffffff);
}

/*
 * Ausrichtung und Grundabstände kommen von Blocksy aus dem Customizer:
 *
 *   [data-products] .product   { align-items: var(--horizontal-alignment);
 *                                text-align: var(--text-horizontal-alignment) }
 *   [data-products] .product>* { margin-bottom: var(--product-element-spacing) }
 *
 * Beides bleibt hier bewusst unangetastet - sonst stünde der Text links,
 * während die Elemente weiter zentriert sind. Die Ausrichtung stellst du
 * unter Customizer -> WooCommerce -> Produktarchiv ein.
 */

/* --- Bildfläche --------------------------------------------------------- */

ul.products li.product figure {
	position: relative;
	margin: 0 0 16px;
	overflow: hidden;
	border-radius: 14px;
	background: var(--hp-surface);
}

ul.products li.product figure img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 400ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

ul.products li.product:hover figure img {
	transform: scale(1.04);
}

/* --- Titel -------------------------------------------------------------- */

ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;

	/* Zwei Zeilen, dann abschneiden - hält die Kachelhöhen gleichmäßig. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

ul.products li.product .woocommerce-loop-product__title a {
	color: var(--hp-text);
	text-decoration: none;
	transition: color 150ms ease;
}

ul.products li.product .woocommerce-loop-product__title a:hover {
	color: var(--hp-accent);
}

/* --- Preis -------------------------------------------------------------- */

ul.products li.product .price {
	display: block;
	margin: 0 0 2px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hp-accent);
}

/*
 * Unterstrichen wird der Betrag selbst, nicht der .price-Container:
 * eine Dekoration am Container würde auch auf den durchgestrichenen
 * Altpreis gemalt - der wäre dann gleichzeitig durch- und unterstrichen.
 *
 * Deshalb nur der direkte Betrag (Normalpreis) und der in <ins>
 * (Angebotspreis). Der Betrag in <del> bleibt außen vor.
 */
ul.products li.product .price > .woocommerce-Price-amount,
ul.products li.product .price ins .woocommerce-Price-amount {
	color: var(--hp-accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Durchgestrichener Altpreis bei Angeboten. */
ul.products li.product .price del {
	display: inline-block;
	margin-right: 8px;
	font-size: 15px;
	font-weight: 400;
	color: var(--hp-muted);
	opacity: 1;
	text-decoration-line: line-through;
}

ul.products li.product .price del .woocommerce-Price-amount {
	color: var(--hp-muted);
	text-decoration: none;
}

ul.products li.product .price ins {
	background: none;
	color: var(--hp-accent);
	text-decoration: none;
}

/* --- Kategorie-Zeile ---------------------------------------------------- */

ul.products li.product .entry-meta {
	margin: 0 0 8px;
	font-size: 13px;
}

ul.products li.product .entry-meta a {
	color: var(--hp-muted);
	text-decoration: none;
}

ul.products li.product .entry-meta a:hover {
	color: var(--hp-accent);
}

/* --- Pflichtangaben (WooCommerce Germanized) ---------------------------- */

/*
 * MwSt.- und Versandhinweise sind rechtlich nötig, sollen aber nicht mit
 * dem Preis konkurrieren: klein, gedämpft, eng gesetzt.
 */
ul.products li.product .wc-gzd-additional-info {
	margin: 0 0 2px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--hp-muted);
}

ul.products li.product .wc-gzd-additional-info a {
	color: var(--hp-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

ul.products li.product .wc-gzd-additional-info a:hover {
	color: var(--hp-accent);
}

/* Letzter Rechtstext vor dem Button bekommt Luft. */
ul.products li.product .wc-gzd-additional-info:last-of-type {
	margin-bottom: 14px;
}

/* --- Button ------------------------------------------------------------- */

/*
 * Im Markup steht der Button vor den MwSt.- und Versandhinweisen. Per
 * order rutscht er ans Ende der Kachel, margin-top:auto drückt ihn nach
 * unten - so fluchten die Buttons einer Reihe trotz unterschiedlich
 * langer Produktnamen.
 *
 * align-self: stretch ist nötig, weil Blocksy die Kachelkinder je nach
 * Ausrichtung nur inhaltsbreit macht; ohne das bliebe width:100% wirkungslos.
 */
ul.products li.product .ct-woo-card-actions {
	order: 10;
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 4px;
	align-self: stretch;
}

ul.products li.product .button,
ul.products li.product .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

ul.products li.product .added_to_cart {
	margin-top: 8px;
	background: transparent;
	border: 1px solid var(--hp-border);
	color: var(--hp-text);
}

ul.products li.product .added_to_cart:hover {
	border-color: var(--hp-accent);
	color: var(--hp-accent);
}

/* --- Abstände im Raster ------------------------------------------------- */

ul.products {
	--hp-gap: 32px;

	row-gap: var(--hp-gap);
}

@media (max-width: 999px) {
	ul.products {
		--hp-gap: 26px;
	}

	ul.products li.product .woocommerce-loop-product__title {
		font-size: 15px;
	}

	ul.products li.product .price {
		font-size: 17px;
	}
}

@media (max-width: 689px) {
	ul.products {
		--hp-gap: 22px;
	}

	ul.products li.product figure {
		border-radius: 12px;
		margin-bottom: 12px;
	}

	ul.products li.product .button,
	ul.products li.product .added_to_cart {
		padding: 11px 14px;
		font-size: 13px;
	}
}