/*
 * Produkt-Oberflächen — Archiv (/produkte/) und Einzelansicht.
 *
 * Loaded only on sm_product surfaces (see functions.php). Kept out of main.css
 * deliberately: main.css is a 3600-line shared stylesheet that several lanes
 * touch, and a product-scoped file is reversible on its own.
 *
 * Everything here is either (a) a defect fix found by the pre-build audit, or
 * (b) the premium lift that brings the product single up to the level of
 * single-leistung.php. Each block says which.
 */

/* =========================================================================
 * FIX 1 — Spec table could truncate values invisibly on small screens.
 *
 * .sm-spectable th/td carried no overflow-wrap, while the wrapper carries
 * overflow:hidden. At 320px the value column is ~130px, so an unbroken
 * technical string ("Kupfer-Indium-Selenid (CIS)", "Temperaturkoeffizient
 * (Verlust je °C über 25 °C)") overflowed and was CLIPPED — silently showing
 * the reader a shortened value with no scrollbar and no ellipsis. That is a
 * correctness bug, not a cosmetic one: imported Reonic labels are long German
 * compounds and hit it immediately.
 * ===================================================================== */
.sm-spectable th,
.sm-spectable td {
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

@media (max-width: 560px) {
	/* Give the label column room to breathe once values can wrap. */
	.sm-spectable th { width: 52%; padding-right: 10px; }
	.sm-spectable th,
	.sm-spectable td { padding-block: 11px; font-size: 13.5px; }
}

@media (max-width: 360px) {
	.sm-spectable th,
	.sm-spectable td { padding-inline: 11px; }
}

/* =========================================================================
 * FIX 2 — CTA buttons could not wrap between 361px and 560px.
 *
 * main.css sets .sm-actions .sm-btn { white-space: nowrap } at ≤560px and only
 * releases it at ≤360px, so at 390px (iPhone 15/16 logical width — the single
 * most common mobile viewport) a long editor-set CTA label overflowed its row.
 * Wrapping is the correct behaviour at every width; the button keeps its
 * centred alignment.
 * ===================================================================== */
@media (max-width: 560px) {
	.sm-actions .sm-btn {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* =========================================================================
 * FIX 3 — Product cards did not show the manufacturer.
 *
 * The brief requires brand on the card, and Reonic supplies it for every
 * component. Rendered as a quiet eyebrow above the title so it informs without
 * competing with the product name.
 * ===================================================================== */
.sm-prodcard-brand {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sm-ink-faint);
	margin-bottom: 2px;
}

/* Key specs preview on the card — max three, single line each. */
.sm-prodcard-specs {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.sm-prodcard-specs li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--sm-ink-soft);
	border-top: 1px solid var(--sm-line-soft);
	padding-top: 4px;
}

.sm-prodcard-specs li span:first-child {
	color: var(--sm-ink-faint);
	overflow-wrap: anywhere;
}

.sm-prodcard-specs li span:last-child {
	font-weight: 650;
	white-space: nowrap;
	flex: none;
}

/* =========================================================================
 * PREMIUM 1 — Section rhythm.
 *
 * The audit found the single used .sm-section--tight for 7 of 9 bands with
 * inline padding-top:0, producing a flat, compressed scroll that read a tier
 * below every other template on the site. Restoring a real rhythm and letting
 * alternating surfaces do the separating.
 * ===================================================================== */
.sm-product-single .sm-section--tight {
	padding-block: clamp(44px, 6vw, 78px);
}

.sm-product-single .sm-section + .sm-section {
	padding-top: clamp(44px, 6vw, 78px);
}

/* =========================================================================
 * PREMIUM 2 — Typography.
 *
 * Every H2 on the single was inline-downscaled to clamp(20px,2.4vw,26px)
 * against the site scale of clamp(25px,3.2vw,37px). The product page is not a
 * lesser page than a Lösung page; it gets the same voice.
 * ===================================================================== */
.sm-product-single .sm-shead h2,
.sm-product-single h2.sm-h2 {
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.16;
	letter-spacing: -.015em;
}

/* Section sub-line, matching sm_section_head()'s .sm-shead-lead. */
.sm-product-single .sm-shead-lead {
	max-width: 62ch;
	margin-top: 8px;
	color: var(--sm-ink-soft);
	font-size: clamp(15px, 1.4vw, 16.5px);
	line-height: 1.6;
}

/* =========================================================================
 * PREMIUM 3 — Spec table presentation.
 *
 * Zebra striping and a lifted header make a 14-row imported spec sheet
 * scannable instead of a wall of rules.
 * ===================================================================== */
.sm-spectable tbody tr:nth-child(odd) {
	background: color-mix(in srgb, var(--sm-surface) 92%, var(--sm-ink) 8%);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.sm-spectable tbody tr:nth-child(odd) { background: rgba(0, 0, 0, .025); }
}

.sm-spectable tbody tr:last-child th,
.sm-spectable tbody tr:last-child td { border-bottom: 0; }

/* =========================================================================
 * PREMIUM 4 — Provenance / honesty note.
 *
 * When a product's technical values come from a supplier catalogue rather than
 * an editor, the page says so. Quiet, factual, and it is the difference
 * between "specs" and "specs we can stand behind".
 * ===================================================================== */
.sm-specsource {
	margin-top: 12px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--sm-ink-faint);
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.sm-specsource svg { flex: none; margin-top: 2px; }

/* =========================================================================
 * A11Y — visible focus on every interactive product surface.
 *
 * The filter chips are keyboard-navigable links inside a horizontal scroller;
 * without a strong focus ring a keyboard user cannot tell where they are.
 * ===================================================================== */
.sm-filter-chips .sm-chip:focus-visible,
.sm-prodcard a:focus-visible,
.sm-product-single .sm-btn:focus-visible {
	outline: 3px solid var(--sm-accent, #1a7f37);
	outline-offset: 2px;
	border-radius: 8px;
}

/* Scrolled-into-view chips must not be hidden behind the scroller edge. */
.sm-filter-chips .sm-chip:focus-visible { scroll-margin-inline: 24px; }

@media (prefers-reduced-motion: reduce) {
	.sm-filter-chips { scroll-behavior: auto; }
}

/* Product-card title.
   Was an <h3> with an inline `font-size:16.5px`, which skipped a heading level
   under the archive <h1> (axe: heading-order, moderate). It is an <h2> now — the
   correct level directly under the page heading — and the size moved out of an
   inline style onto this class so the visual is unchanged and the value is
   overridable rather than baked into the markup. */
.sm-prodcard-title {
  font-size: 16.5px;
  line-height: 1.3;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}

/* Catalogue controls: 44px touch targets on a phone.
   Measured at 320/390 the category chips came out 37px and the pagination links
   38px — both below the 44px minimum, and both are now primary navigation for a
   240-product catalogue rather than decoration.

   Scoped to `.sm-product-archive` on purpose: `.sm-chip` and `.sm-pagination`
   are shared components used by other templates, and silently re-sizing them
   everywhere would be a theme-wide visual change this lane has not measured.

   inline-flex rather than min-height alone, because growing an inline-block box
   past its text height leaves the label sitting optically high. */
.sm-product-archive .sm-filter-chips .sm-chip,
.sm-product-archive .sm-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: auto;
}

.sm-product-archive .sm-pagination .page-numbers { min-width: 44px; }

/* Pagination must wrap on a phone.
   The shared `.sm-pagination ul` is a nowrap flex row. At 44px targets a
   10-page catalogue needs ~408px, so at 320/390 the last links ("10", "›")
   were pushed outside the viewport entirely — hit-tested as unreachable, not
   merely clipped. Wrapping keeps every page reachable without introducing a
   horizontal scroller, and centring keeps the rows clear of the fixed
   right-edge side-CTA that was covering the ellipsis at 320. */
.sm-product-archive .sm-pagination ul {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 8px;
}