/*
 * Shop-Darstellung — Produktkarten und Produktseite.
 * Lädt nur im Shop, in Produktkategorien, auf Produktseiten und auf der
 * Startseite (Sektion „Aktuelle Angebote" nutzt dasselbe Kartenmarkup).
 *
 * Schriftgrössen in px: Hestia setzt html { font-size: 10px }, ein rem ist
 * hier also 10 und nicht 16 Pixel.
 *
 * Hestia setzt auf Absätzen font-weight: 300. Hervorhebungen brauchen
 * deshalb ein explizites font-weight: 400.
 */

/* ==========================================================================
   Produktkarte — gleiche Höhe
   ==========================================================================
   Die Karten einer Reihe waren 541 bis 614 px hoch, Preis und Kaufbutton
   lagen auf unterschiedlicher Höhe. Karte als Flex-Spalte, Footer per
   margin-top: auto nach unten verankert.
   ========================================================================== */

/*
 * WooCommerce legt li.product als Float mit fester Prozentbreite an
 * (width: 22.05%, margin-right: 3.8%) — Hestia macht aus ul.products aber ein
 * Grid. Beides zusammen ergibt Karten, die nur die halbe Spalte füllen.
 * Breite und Abstände übernimmt das Grid.
 */
.woocommerce ul.products,
.woocommerce-page ul.products {
	gap: 30px 24px;
}

.woocommerce ul.products > li.product,
.woocommerce-page ul.products > li.product,
.woocommerce ul.products[class*="columns-"] > li.product,
.woocommerce-page ul.products[class*="columns-"] > li.product,
.woocommerce[class*="columns-"] ul.products > li.product,
.woocommerce-page[class*="columns-"] ul.products > li.product {
	display: flex;
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	justify-self: stretch;
}

.card.card-product {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

/*
 * Hestia zentriert den Kartentext — einmal auf der Karte
 * (.woocommerce .product .card-product) und einmal direkt auf Titel,
 * Beschreibung und Kategorie (.card-product .card-title, …). Linksbündig ist
 * im Raster ruhiger und besser scannbar, dafür müssen beide Regeln fallen.
 */
.woocommerce .product .card.card-product,
.woocommerce .product .card.card-product .content,
.hestia-shop-content .shop-item .card.card-product,
.hestia-shop-content .shop-item .card.card-product .content,
.card.card-product .card-title,
.card.card-product .card-description,
.card.card-product .category,
.card.card-product .footer {
	text-align: left;
}

.card.card-product > .content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	max-width: none;
	padding: 16px 18px 18px;
	text-align: left;
}

.card.card-product .footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	margin-top: auto;
	padding-top: 14px;
	text-align: left;
}

/*
 * Eingebettete Produkte auf Inhaltsseiten ([products ids="…"]): bei einer oder
 * zwei Spalten setzt Hestia die Karte auf width: auto, sie schrumpft dann auf
 * die Bildbreite. Stattdessen eine definierte Spurbreite, damit eine einzelne
 * Karte nicht über die halbe Seite läuft.
 */
.woocommerce ul.products.columns-1 {
	grid-template-columns: minmax(0, 320px);
}

/*
 * Ein einzelnes eingebettetes Produkt ohne columns-Angabe landet in einem
 * Vierer-Raster und wäre 170 px breit. Es bekommt die volle Rasterbreite,
 * gedeckelt auf Kartenformat (z.B. /bienenwachstuch/).
 */
.woocommerce ul.products > li.product:only-child {
	grid-column: 1 / -1;
	max-width: 320px;
}

.woocommerce ul.products.columns-2 {
	grid-template-columns: repeat(2, minmax(0, 320px));
}

.woocommerce .products.columns-1 li.product .card.card-product,
.woocommerce .products.columns-2 li.product .card.card-product,
.woocommerce .products.columns-3 li.product .card.card-product,
.woocommerce .products.columns-4 li.product .card.card-product,
.woocommerce .products.columns-5 li.product .card.card-product,
.woocommerce .products.columns-6 li.product .card.card-product {
	width: 100%;
}

.woocommerce .products.columns-1 li.product .card.card-product .card-image > a > img,
.woocommerce .products.columns-2 li.product .card.card-product .card-image > a > img,
.woocommerce .products.columns-3 li.product .card.card-product .card-image > a > img,
.woocommerce .products.columns-4 li.product .card.card-product .card-image > a > img,
.woocommerce .products.columns-5 li.product .card.card-product .card-image > a > img,
.woocommerce .products.columns-6 li.product .card.card-product .card-image > a > img {
	max-width: none;
}

/* ==========================================================================
   Kartenbild
   ==========================================================================
   Hestia zeigt das 230-px-Thumbnail mittig in einer 292 px breiten Karte und
   legt einen Schlagschatten darunter. Das Bild füllt jetzt die Kartenbreite;
   aspect-ratio hält alle Bilder auf gleicher Höhe, auch wenn ein Produktbild
   einmal nicht quadratisch zugeschnitten ist.
   ========================================================================== */

/*
 * Die Rundung sitzt am Bild, nicht an der Karte: overflow: hidden auf der
 * Karte würde das Popover der Preisangaben abschneiden.
 */
.card.card-product > .card-image,
.woocommerce .products[class*="columns-"] li.product .card-product > .card-image {
	display: block;
	margin: 0;
	border-radius: 12px 12px 0 0;
	box-shadow: none;
	overflow: hidden;
	line-height: 0;
	font-size: 0;
}

.card.card-product .card-image a {
	display: block;
	line-height: 0;
}

.card.card-product .card-image img,
.woocommerce .products[class*="columns-"] li.product .card-product .card-image > a > img,
.hestia-shop-content .shop-item .card-product .card-image > a > img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

/*
 * Startseite, Sektion „Aktuelle Angebote": Hestia deckelt dort Bild und
 * Inhalt auf 230 px und lässt die Karte schmaler als ihre Spalte. Die
 * Theme-Regeln hängen an .shop-item.col-ms-6.col-sm-6, deshalb hier dieselbe
 * Kette.
 */
.hestia-shop-content .shop-item .card.card-product,
.hestia-shop-content .shop-item.col-ms-6.col-sm-6 .card.card-product {
	width: 100%;
}

.hestia-shop-content .shop-item .card.card-product .content,
.hestia-shop-content .shop-item.col-ms-6.col-sm-6 .card.card-product .content {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.hestia-shop-content .shop-item .card.card-product .card-image > a > img,
.hestia-shop-content .shop-item.col-ms-6.col-sm-6 .card.card-product .card-image > a > img {
	width: 100%;
	max-width: none;
}

/* Angebots-Kennzeichnung als Pill über dem Bild statt überstehend am Rand. */
.woocommerce .card.card-product span.onsale,
.woocommerce ul.products li.product .card.card-product .onsale {
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: .04em;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* ==========================================================================
   Kartentypografie
   ========================================================================== */

.card.card-product .category {
	display: block;
	overflow: hidden;
	margin: 0 0 4px;
	font-size: 11px;
	letter-spacing: .06em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*
 * Hestia färbt die Kategorie nach Position im Raster durch sechs Farben
 * (Violett, Türkis, Rot, Orange, Pink, Grün — :nth-of-type(6n+x)). Im Raster
 * wirkt das zufällig; eine ruhige Farbe für alle. Die Theme-Regel steht auf
 * .woocommerce .products li:nth-of-type(6n+1) .category a, deshalb hier der
 * längere Selektor.
 */
.card.card-product .category,
.woocommerce .products li.product .card.card-product .content .category a,
.woocommerce .related.products ul li.product .card.card-product .content .category a,
.hestia-shop-content .shop-item .card.card-product .content .category a {
	color: #9a9a9a;
}

.woocommerce .products li.product .card.card-product .content .category a:hover,
.hestia-shop-content .shop-item .card.card-product .content .category a:hover {
	color: #6a6a6a;
}

.card.card-product .card-title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.3;
}

.card.card-product .card-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 49px;
	color: #2f2f2f;
}

/*
 * Kurzbeschreibung auf zwei Zeilen. Der volle Text steht auf der
 * Produktseite. Browser ohne line-clamp zeigen den ganzen Absatz — die
 * Flex-Verankerung des Footers hält die Karten trotzdem bündig.
 */
.woocommerce .product .card.card-product .card-description {
	margin: 0;
}

.woocommerce .product .card.card-product .card-description p,
.card.card-product .card-description p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0;
	min-height: 45px;
	color: #7a7a7a;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
}

.card.card-product .footer .price {
	margin: 0;
}

.card.card-product .footer .price h4 {
	margin: 0;
	color: #2f2f2f;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
}

.card.card-product .footer .price .ghm-price-on-request {
	color: #7a7a7a;
	font-size: 16px;
}

.card.card-product .footer .price del {
	margin-right: 6px;
	color: #a5a5a5;
	font-size: 15px;
}

.card.card-product .footer .stats {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	white-space: nowrap;
}

/*
 * Grundpreis und Füllmenge hängt Germanized ausserhalb von .content an die
 * Karte. Sie müssen nach § 4 PAngV sichtbar bleiben — nur dezenter.
 */
.card.card-product > .wc-gzd-additional-info-loop {
	margin: -6px 0 0;
	padding: 0 18px 14px;
	color: #9a9a9a;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.5;
	text-align: left;
}

/* ==========================================================================
   Hover
   ==========================================================================
   Hestias pop-and-glow hebt nur das Bild an und wirft einen kräftigen
   Schatten — bei einem randlosen Bild sieht das aus, als löse es sich von
   der Karte. Stattdessen hebt sich die ganze Karte leicht.
   ========================================================================== */

.card.card-product.pop-and-glow:hover .card-image,
.card.card-product.pop-and-glow:hover .card-image img {
	transform: none;
	box-shadow: none;
}

.card.card-product:hover {
	transform: translateY(-4px);
	border-color: #e0e0e0;
	box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .28);
}

/* ==========================================================================
   Preisangaben (Umsatzsteuer, Versandkosten, Lieferzeit)
   ==========================================================================
   Germanized hängt die drei Hinweise sonst als eigene Absätze unter die
   Karte. Sie stehen jetzt in einem Popover direkt neben dem Preis.
   Geschlossen wird per clip-path und nicht per display: none — der Text
   bleibt im Accessibility-Tree und im Quelltext.
   ========================================================================== */

.ghm-legal {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.ghm-legal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid #c9c9c9;
	border-radius: 50%;
	background: transparent;
	color: #8a8a8a;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	cursor: help;
	transition: border-color .2s ease, color .2s ease;
}

.ghm-legal-btn:hover,
.ghm-legal-btn:focus {
	border-color: #8a8a8a;
	color: #4a4a4a;
	outline: none;
}

.ghm-legal-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ghm-legal-pop {
	position: absolute;
	right: -8px;
	bottom: calc(100% + 10px);
	z-index: 30;
	width: 230px;
	padding: 12px 14px;
	border-radius: 8px;
	background: #333;
	color: #fff;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
	box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .45);
	opacity: 0;
	pointer-events: none;
	clip-path: inset(50%);
	transition: opacity .18s ease;
}

.ghm-legal-pop::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 100%;
	border: 6px solid transparent;
	border-top-color: #333;
}

.ghm-legal:hover .ghm-legal-pop,
.ghm-legal:focus-within .ghm-legal-pop {
	opacity: 1;
	pointer-events: auto;
	clip-path: none;
}

.ghm-legal-pop p {
	margin: 0 0 4px;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.ghm-legal-pop p:last-child {
	margin-bottom: 0;
}

.ghm-legal-pop a {
	color: #fff;
	text-decoration: underline;
}

/* ==========================================================================
   Raster und Breakpoints
   ==========================================================================
   Hestia: ab 992 px vier Spalten, darunter zwei, ab 767 px abwärts eine.
   Eine Spalte auf dem Handy bedeutet endloses Scrollen — dort bleiben es
   zwei. Ausserdem hebt Hestia unter 992 px die Karteninhalte auf 230 px
   Breite und zentriert sie, das passt zur randlosen Karte nicht mehr.
   ========================================================================== */

@media (max-width: 991px) {
	.woocommerce .products[class*="columns-"] li.product,
	.woocommerce .products[class*="columns-"] li.product .card-product .content {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		text-align: left;
	}

	.woocommerce .products[class*="columns-"] li.product .card-product {
		width: 100%;
	}
}

@media (max-width: 767px) {
	/* Zwei Spalten nur, wo auch mehrere Produkte stehen. */
	.woocommerce .products.columns-3,
	.woocommerce .products.columns-4,
	.woocommerce .products.columns-5,
	.woocommerce .products.columns-6 {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 16px;
	}

	.woocommerce ul.products.columns-1,
	.woocommerce ul.products.columns-2 {
		gap: 20px 16px;
	}

	.card.card-product > .content {
		padding: 12px 14px 14px;
	}

	.card.card-product .card-title {
		font-size: 16px;
	}

	.woocommerce .product .card.card-product .card-description p,
	.card.card-product .card-description p {
		font-size: 14px;
	}

	.card.card-product .footer {
		padding-top: 10px;
	}

	.card.card-product .footer .price h4 {
		font-size: 17px;
	}

	.ghm-legal-pop {
		width: 180px;
	}
}

@media (max-width: 480px) {
	.card.card-product .footer {
		flex-wrap: wrap;
		gap: 6px;
	}
}

/* ==========================================================================
   Produktseite — Kopfbereich
   ==========================================================================
   Vorher: Preis, Rechtshinweise, Kurzbeschreibung und Lieferzeit ohne
   erkennbare Hierarchie, danach 60 px Leerraum bis zur Variantenauswahl.
   ========================================================================== */

.single-product div.product .summary .product_title {
	margin-bottom: 12px;
}

.single-product div.product .summary p.price {
	margin: 0 0 6px;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
}

.single-product div.product .summary p.price del {
	margin-right: 8px;
	color: #a5a5a5;
	font-size: 20px;
}

.single-product div.product .summary .legal-price-info,
.single-product div.product .summary .legal-price-info p,
.single-product div.product .summary .wc-gzd-additional-info {
	margin: 0 0 4px;
	color: #8a8a8a;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.5;
}

.single-product div.product .summary .woocommerce-product-details__short-description {
	margin: 16px 0;
	font-size: 17px;
	line-height: 1.6;
}

.single-product div.product .summary .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* Kaufbox absetzen statt sie im Leerraum schwimmen zu lassen. */
.single-product div.product .summary form.cart {
	margin: 20px 0 0;
	padding: 20px;
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fafafa;
}

.single-product div.product .summary form.cart .variations {
	margin-bottom: 12px;
}

.single-product div.product .summary form.cart .variations th.label,
.single-product div.product .summary form.cart .variations label {
	color: #6a6a6a;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.single-product div.product .summary form.cart .variations select {
	width: 100%;
	height: auto;
	padding: 10px 12px;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	background-color: #fff;
	font-size: 16px;
	/* Hestia zeichnet einen eigenen Pfeil — sonst stehen zwei nebeneinander. */
	-webkit-appearance: none;
	appearance: none;
	background-image: none;
}

/* Label über dem Auswahlfeld, linksbündig wie der übrige Text. */
.single-product div.product .summary form.cart .variations th.label,
.single-product div.product .summary form.cart .variations td.value {
	text-align: left;
}

/* „Zurücksetzen" ist ein Hilfslink, kein Blickfang. */
.single-product div.product .summary form.cart .reset_variations {
	display: inline-block;
	float: none;
	margin: 6px 0 0;
	color: #8a8a8a;
	font-size: 13px;
}

.single-product div.product .summary form.cart .quantity {
	margin-right: 12px;
}

.single-product div.product .summary .stock {
	margin: 0 0 12px;
	font-size: 14px;
}

.single-product div.product .summary .product_meta {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #ececec;
	color: #8a8a8a;
	font-size: 13px;
	line-height: 1.8;
}

.single-product div.product .summary .product_meta .sku_wrapper,
.single-product div.product .summary .product_meta .posted_in,
.single-product div.product .summary .product_meta .tagged_as {
	display: block;
}

/*
 * Keine Sticky-Kaufbox: Hestia lässt .summary rechts floaten, und das
 * umschliessende div.product reicht bis unter die Abschnitte. Ein sticky
 * .summary wandert deshalb über „Beschreibung" und „Zusätzliche
 * Informationen" hinweg. Ohne Template-Override ist das nicht sauber zu
 * begrenzen, also bleibt die Box, wo sie ist.
 */

/* ==========================================================================
   Produktseite — Abschnitte statt Tabs
   ========================================================================== */

.ghm-product-sections {
	clear: both;
	margin-top: 40px;
}

.ghm-product-section + .ghm-product-section {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid #ececec;
}

.ghm-product-section-title {
	margin: 0 0 16px;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
}

.ghm-product-section p {
	font-size: 17px;
	line-height: 1.6;
}

.ghm-product-section p:last-child {
	margin-bottom: 0;
}

.ghm-product-section table.shop_attributes {
	width: 100%;
	margin: 0;
	border: 0;
	font-size: 16px;
}

.ghm-product-section table.shop_attributes th,
.ghm-product-section table.shop_attributes td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	font-style: normal;
	text-align: left;
}

.ghm-product-section table.shop_attributes th {
	width: 30%;
	color: #6a6a6a;
	font-weight: 400;
}

/* ==========================================================================
   Ähnliche Produkte
   ========================================================================== */

.single-product .related.products {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid #ececec;
}

.woocommerce div.product .related.products > h2,
.woocommerce div.product .related.products > h4 {
	margin: 0 0 24px;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
}