/* Meterex Core: single product page styling (enqueued on product pages only) */

/*
 * Woo's product-image.php template inline-styles the gallery to `opacity: 0`
 * and fades it in via JS once flexslider/zoom (deferred scripts) finish
 * initializing. Lighthouse traced ~1.4s of LCP "element render delay" to this:
 * the LCP <img> is downloaded and ready, but invisible until that JS runs.
 * Woo's own noscript fallback already unhides it unconditionally for no-JS
 * visitors (`.woocommerce-product-gallery{opacity:1 !important}`) — applying
 * the same override for everyone just trades the 0.25s fade-in for a much
 * earlier paint. Gallery/zoom/slider behavior is unaffected.
 */
.woocommerce-product-gallery {
	opacity: 1 !important;
}

.meterex-inquiry-button {
	display: inline-block;
	margin: 1em 0;
	padding: 0.9em 1.75em;
	background: #0E7A3C;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.15s ease-in-out;
}

.meterex-inquiry-button:hover,
.meterex-inquiry-button:focus {
	background: #0a5c2c;
	color: #fff;
}

.meterex-veredelung {
	margin: 2em 0;
}

.meterex-veredelung h2,
.meterex-inquiry-section h2 {
	border-bottom: 2px solid #0E7A3C;
	padding-bottom: 0.3em;
	margin-bottom: 0.75em;
}

.meterex-veredelung-option {
	margin-bottom: 1.5em;
}

.meterex-staffelpreise {
	border-collapse: collapse;
}

.meterex-staffelpreise th,
.meterex-staffelpreise td {
	padding: 0.4em 0.9em;
	text-align: left;
}

.meterex-staffelpreise tr:nth-child(odd) {
	background: #f4f6f5;
}

.meterex-inquiry-section {
	margin: 2.5em 0;
	padding-top: 1.5em;
	border-top: 1px solid #e0e0e0;
	scroll-margin-top: 2em;
}

/* --------------------------------------------------------------------------
 * Artikelblöcke: "Details zu <Name> <Nr>" — je Familienmitglied einer.
 * ----------------------------------------------------------------------- */

.product_title .meterex-artikelnummer,
.woocommerce-loop-product__title .meterex-artikelnummer {
	color: #6b7280;
	font-weight: 400;
	white-space: nowrap;
}

.meterex-artikel-blocks {
	clear: both;
	margin: 2em 0;
}

.meterex-artikel + .meterex-artikel {
	margin-top: 2.5em;
	padding-top: 2em;
	border-top: 1px solid #e0e0e0;
}

.meterex-artikel > h2 {
	border-bottom: 2px solid #0E7A3C;
	padding-bottom: 0.3em;
	margin-bottom: 0.9em;
}

.meterex-artikel-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.5em 2em;
	align-items: start;
}

@media (max-width: 768px) {
	.meterex-artikel-grid {
		grid-template-columns: 1fr;
		gap: 1.25em;
	}
}

.meterex-specs {
	width: 100%;
	border-collapse: collapse;
}

.meterex-specs td {
	padding: 0.55em 1em;
	text-align: left;
	vertical-align: top;
	border: none;
}

.meterex-specs tr:nth-child(odd) {
	background: #f4f6f5;
}

.meterex-specs td.dt {
	font-weight: 600;
	width: 42%;
}

.meterex-beschreibung {
	margin-bottom: 1.5em;
}

.meterex-beschreibung .dt,
.meterex-veredelung-fuer {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3em;
}

.meterex-beschreibung p:last-child {
	margin-bottom: 0;
}

/* Variantenliste: serverseitig gerendert, Klick wählt die Variante. */
.meterex-varianten h3 {
	font-size: 1.05em;
	margin-bottom: 0.4em;
}

.meterex-varianten .meterex-count::before {
	content: "(";
}

.meterex-varianten .meterex-count::after {
	content: ")";
}

.meterex-varianten .meterex-count {
	color: #6b7280;
	font-weight: 400;
}

.meterex-varianten table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94em;
}

.meterex-variante td {
	padding: 0.3em 0.7em;
	border: none;
	vertical-align: top;
}

.meterex-variante:nth-child(odd) {
	background: #f4f6f5;
}

.meterex-variante {
	cursor: pointer;
}

.meterex-variante:hover,
.meterex-variante:focus-visible {
	background: #e6f0ea;
	outline: none;
}

.meterex-variante.is-selected {
	background: #0E7A3C;
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Variantenliste einklappen (ohne JavaScript).
 *
 * 39 Zeilen je Artikel machten die Familienseite auf dem Handy dreimal so lang
 * wie die Live-Seite. Unter 1024 px stehen sechs Zeilen offen, der Rest hängt
 * an einer versteckten Checkbox; ab 1024 px zeigt die Seite — wie live — alles.
 * ----------------------------------------------------------------------- */

.meterex-varianten-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.meterex-varianten-mehr {
	display: inline-block;
	margin-top: 0.5em;
	color: #0E7A3C;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
}

.meterex-varianten-toggle:focus-visible + table + .meterex-varianten-mehr,
.meterex-varianten-mehr:hover {
	outline: 2px solid #0E7A3C;
	outline-offset: 2px;
}

@media (max-width: 1023px) {
	.meterex-varianten-toggle:not(:checked) ~ table .meterex-variante:nth-child(n+7) {
		display: none;
	}

	.meterex-varianten-toggle:checked ~ .meterex-varianten-mehr .meterex-mehr,
	.meterex-varianten-toggle:not(:checked) ~ .meterex-varianten-mehr .meterex-weniger {
		display: none;
	}
}

@media (min-width: 1024px) {
	.meterex-varianten-mehr {
		display: none;
	}
}

.meterex-variante-id {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.meterex-variante-id span {
	font-weight: 600;
}

.meterex-artikel .meterex-inquiry-button {
	margin-top: 1.25em;
}

.meterex-artikel .meterex-base-staffelpreise {
	margin-top: 1.5em;
}

/*
 * Preisfarbe des Themes (#958e09) erreicht auf Weiß nur 3,41:1 — unter der
 * WCAG-AA-Schwelle von 4,5:1 (Lighthouse-A11y-Befund) und ausgerechnet an der
 * wichtigsten Zahl der Seite. Gleicher Farbton, dunkler: 5,1:1.
 */
.woocommerce div.product div.summary p.price,
.woocommerce div.product div.summary p.price *,
.woocommerce div.product div.summary span.price,
.woocommerce div.product div.summary span.price * {
	color: #6f6a07;
}

/* --------------------------------------------------------------------------
 * Galerie wie auf meterex.com: großes Bild links, Vorschaubilder rechts
 * gestapelt. Ohne Flexslider (s. frontend.php) rendert WooCommerce alle
 * Galeriebilder direkt in den Wrapper — das Raster steht damit schon beim
 * ersten Bildaufbau und verspringt später nicht mehr.
 * ----------------------------------------------------------------------- */

.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper:has(.woocommerce-product-gallery__image + .woocommerce-product-gallery__image) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 84px;
	gap: 10px;
	align-items: start;
}

.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
	grid-column: 1;
	grid-row: 1 / -1;
}

/* woocommerce.css setzt Folgebilder auf width:25%;display:inline-block — hier sind sie die gestapelte Vorschauspalte. */
.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image + .woocommerce-product-gallery__image {
	grid-column: 2;
	width: 100%;
	display: block;
	float: none;
	margin: 0;
	padding: 0;
}

.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Die Lupe sitzt sonst über dem ersten Vorschaubild — über das große Bild schieben. */
.woocommerce div.product div.images.woocommerce-product-gallery:has(.woocommerce-product-gallery__image + .woocommerce-product-gallery__image) .woocommerce-product-gallery__trigger {
	right: 104px;
}

@media (max-width: 480px) {
	.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper:has(.woocommerce-product-gallery__image + .woocommerce-product-gallery__image) {
		grid-template-columns: minmax(0, 1fr) 64px;
	}

	.woocommerce div.product div.images.woocommerce-product-gallery:has(.woocommerce-product-gallery__image + .woocommerce-product-gallery__image) .woocommerce-product-gallery__trigger {
		right: 84px;
	}
}

/*
 * Geschwister-Artikel auf schmalen Schirmen einklappen. Der Besucher kommt für
 * einen Artikel; die übrigen Familienmitglieder stehen mit Überschrift da und
 * klappen auf Wunsch auf. Ab 1024 px ist alles offen — wie auf der Live-Seite.
 */
.meterex-artikel-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.meterex-artikel-mehr {
	display: inline-block;
	margin-bottom: 0.5em;
	color: #0E7A3C;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
}

@media (max-width: 1023px) {
	.meterex-artikel-toggle:not(:checked) ~ .meterex-artikel-inhalt {
		display: none;
	}

	.meterex-artikel-toggle:checked ~ .meterex-artikel-mehr .meterex-mehr,
	.meterex-artikel-toggle:not(:checked) ~ .meterex-artikel-mehr .meterex-weniger {
		display: none;
	}
}

@media (min-width: 1024px) {
	.meterex-artikel-mehr {
		display: none;
	}
}

/*
 * Anfrageformular auf schmalen Schirmen erst auf Anforderung. Die Buttons
 * zeigen ohnehin auf #anfrage, also öffnet :target das Formular und der
 * Browser springt hin — ohne JavaScript, ohne Umweg.
 */
.meterex-anfrage-oeffnen {
	display: none;
}

@media (max-width: 1023px) {
	.meterex-inquiry-section:not(:target) .meterex-anfrage-formular {
		display: none;
	}

	.meterex-inquiry-section:not(:target) .meterex-anfrage-oeffnen {
		display: inline-block;
		margin: 0.5em 0;
		color: #0E7A3C;
		font-weight: 600;
		text-decoration: underline;
	}
}

/* Auf schmalen Schirmen etwas dichter zwischen den Abschnitten. */
@media (max-width: 1023px) {
	.meterex-artikel-blocks,
	.meterex-veredelung {
		margin: 1.2em 0;
	}

	.meterex-inquiry-section {
		margin: 1.5em 0;
		padding-top: 1em;
	}

	.meterex-artikel + .meterex-artikel {
		margin-top: 1.5em;
		padding-top: 1.2em;
	}
}