/*
 * product.css — catalogue templates: single Product, the archive grid, and the
 * faceted finder. References tokens.css custom properties only (no raw hex /
 * literal sizes), same contract as main.css. Loaded only on Product views.
 */

/* ====================================================================== */
/*  Badges (RC class / Termik) — shared by card + single                  */
/* ====================================================================== */

.badge {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	padding: var(--space-3xs) var(--space-2xs);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border-strong);
	background: var(--color-surface);
	color: var(--color-text);
}
.badge--rc { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* ====================================================================== */
/*  Single Product                                                        */
/* ====================================================================== */

.product__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: var(--space-xl);
	align-items: start;
}
@media (max-width: 860px) {
	.product__layout { grid-template-columns: 1fr; gap: var(--space-l); }
}

/* Cover image tracks the reader down the (taller) detail column. */
.product__media { position: sticky; top: calc(var(--header-height) + var(--space-m)); }
@media (max-width: 860px) {
	.product__media { position: static; top: auto; }
}

.product__image {
	width: 100%;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}
.product__image--placeholder { aspect-ratio: 4 / 3; }

.product__detail { min-width: 0; } /* let wide tables/content shrink in the grid */

.product__title { font-size: var(--text-3xl); margin-bottom: var(--space-s); }

.product__badges { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-m); }

.product__excerpt { margin-bottom: var(--space-l); }

.product__cta { display: flex; flex-wrap: wrap; gap: var(--space-s); }

.product__intro { margin-bottom: var(--space-xl); }

.product__description { max-width: 70ch; }

/* ---- Tabs (CSS-only, radio-driven — JS-optional like the nav toggle) ---- */

/* Pin the (hidden but focusable) radios to the top of the tab block via a
   relative parent. Without a positioned ancestor they resolve to page-top, so
   focusing one on click scrolls the whole page up; here they're already in view
   beside the tab list, so clicking a tab doesn't scroll. scroll-margin-top keeps
   any residual scroll clear of the sticky header. */
.tabs { position: relative; }
.tabs__radio {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	scroll-margin-top: calc(var(--header-height) + var(--space-m));
}

.tabs__list {
	display: flex; flex-wrap: wrap;
	gap: var(--space-m);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-l);
}
.tabs__tab {
	display: inline-block;
	padding: var(--space-s) 0;
	margin-bottom: -1px;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-muted);
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition);
	white-space: nowrap;
}
.tabs__tab:hover { color: var(--color-text); }

.tabs__panel { display: none; }

/* Closed set of panel keys (defined in single-product.php). */
#tab-descrizione:checked ~ .tabs__list label[for="tab-descrizione"],
#tab-specifiche:checked  ~ .tabs__list label[for="tab-specifiche"],
#tab-finiture:checked    ~ .tabs__list label[for="tab-finiture"],
#tab-documenti:checked   ~ .tabs__list label[for="tab-documenti"] {
	color: var(--color-heading);
	border-bottom-color: var(--color-accent);
}
#tab-descrizione:checked ~ .tabs__panels #panel-descrizione,
#tab-specifiche:checked  ~ .tabs__panels #panel-specifiche,
#tab-finiture:checked    ~ .tabs__panels #panel-finiture,
#tab-documenti:checked   ~ .tabs__panels #panel-documenti {
	display: block;
}

/* Keyboard focus: arrowing the radio group also selects, so show a ring on the
   focused tab's label for clarity. */
#tab-descrizione:focus-visible ~ .tabs__list label[for="tab-descrizione"],
#tab-specifiche:focus-visible  ~ .tabs__list label[for="tab-specifiche"],
#tab-finiture:focus-visible    ~ .tabs__list label[for="tab-finiture"],
#tab-documenti:focus-visible   ~ .tabs__list label[for="tab-documenti"] {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

/* ---- Spec table ------------------------------------------------------- */

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--color-border); }
.spec-table th,
.spec-table td { text-align: left; padding: var(--space-s) var(--space-m) var(--space-s) 0; vertical-align: top; }
.spec-table th {
	width: 40%;
	font-weight: var(--font-weight-medium);
	color: var(--color-text-muted);
}
.spec-table td { color: var(--color-text); }

/* ---- Finishes --------------------------------------------------------- */

.finish-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.finish {
	font-size: var(--text-sm);
	padding: var(--space-2xs) var(--space-s);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
}

/* ---- Documents -------------------------------------------------------- */

/* One box per document type (tipo); documents are hairline-separated rows. */
.document-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-m);
	align-items: start;
}
.document-group {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	padding: var(--space-m) var(--space-l);
}
.document-group__title {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-2xs);
}

.document-list { list-style: none; margin: 0; padding: 0; }
.document { border-top: 1px solid var(--color-border); }
.document:first-child { border-top: 0; }
.document__link {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
	padding: var(--space-s) 0;
	transition: color var(--transition);
}
.document__link:hover { opacity: 1; color: var(--color-heading); }
.document__title { font-weight: var(--font-weight-medium); }
.document__action {
	font-size: var(--text-xs); text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-muted);
	white-space: nowrap;
}
.document__link:hover .document__action { color: var(--color-accent); }

/* ---- Quote section ---------------------------------------------------- */

.product__quote .lead { margin-bottom: var(--space-l); }
.quote__fallback { margin: 0; }

/* ====================================================================== */
/*  Archive: finder + grid                                                */
/* ====================================================================== */

.product-archive__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--space-xl);
	align-items: start;
}
@media (max-width: 860px) {
	.product-archive__layout { grid-template-columns: 1fr; gap: var(--space-l); }
}

/* ---- Finder form ------------------------------------------------------ */

.finder {
	position: sticky; top: calc(var(--header-height) + var(--space-s));
	display: grid; gap: var(--space-m);
	padding: var(--space-l);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}
@media (max-width: 860px) {
	.finder { position: static; }
}

.finder__field { margin: 0; display: grid; gap: var(--space-3xs); }
.finder__field label {
	font-size: var(--text-xs); text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-muted);
}
.finder__field select {
	width: 100%;
	font: inherit; font-size: var(--text-sm);
	padding: var(--space-2xs) var(--space-s);
	min-height: 44px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	background: var(--color-bg);
	color: var(--color-text);
}
.finder__field--check label {
	display: flex; align-items: center; gap: var(--space-2xs);
	text-transform: none; letter-spacing: normal;
	font-size: var(--text-sm); color: var(--color-text);
}
.finder__field--check input { width: 1.05em; height: 1.05em; }

.finder__actions { margin: 0; display: flex; align-items: center; gap: var(--space-m); }
.finder__submit { width: 100%; justify-content: center; }
.finder__reset { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }

/* When finder.js is active it auto-submits, so the button is redundant. */
.js-finder .finder__submit { display: none; }
.js-finder .finder__actions { justify-content: flex-end; }

/* ---- Product grid ----------------------------------------------------- */

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-l);
}

.product-card { position: relative; }
.product-card__link { display: block; }
.product-card__link:hover { opacity: 1; }

.product-card__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); }
.product-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transition); }
.product-card__image--placeholder { aspect-ratio: 4 / 3; }
.product-card__link:hover .product-card__image { transform: scale(1.03); }

.product-card__badges { position: absolute; top: var(--space-2xs); left: var(--space-2xs); display: flex; gap: var(--space-3xs); }

.product-card__body { padding-block: var(--space-s) var(--space-2xs); }
.product-card__foro { margin-bottom: var(--space-3xs); }
.product-card__title { font-size: var(--text-lg); margin: 0; color: var(--color-heading); }