/* Product templates — the /products/ list and one product's detail page.
   Colour, type and space come from assets/css/tokens.css. Shared classes (wrap, card, spec-list,
   button…) are defined in style.css and are only given context here, never redefined. */

/* List: the card grid reads better with a wider gap between rows than within one. */
.product-grid { row-gap: var(--space-7); }

/* Detail: one column on a phone, image beside the intro from 860px up. */
.product-single__grid {
	display: grid;
	gap: var(--space-7);
	padding-block-start: var(--space-7);
}

.product-single__media { display: grid; gap: var(--space-3); }

/* The featured image sits in a fixed frame so records with very different photographs still line up;
   the placeholder tile fills the same box. */
.product-single__frame {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-card);
}
.product-single__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The extra angles, as a small row under the featured image. */
.product-gallery { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.product-gallery li { width: 4.75rem; }
.product-gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-control);
}

/* Intro column: measure, the spec rows, the two actions. */
.product-single__intro { max-width: 62ch; }
.product-single__specs { margin-block: var(--space-6); }
.product-single__actions { margin-top: var(--space-6); }

/* The record's own body, below both columns. */
.product-single__body { max-width: 72ch; margin-top: var(--space-8); }

/* What a password-protected record shows: WordPress's form and nothing else. */
.product-single__locked {
	margin-block-start: var(--space-7);
	max-width: 44ch;
	padding: var(--space-6);
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-card);
}

@media (min-width: 860px) {
	.product-single__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--space-8);
	}
}

/* The quote form at the foot of a product page: the pitch on the left, the form on the right. */
.product-inquiry { display: grid; gap: var(--space-6); margin-top: var(--space-8); padding-top: var(--space-7); border-top: var(--border-hairline); }
.product-inquiry__intro { max-width: 52ch; }
@media (min-width: 860px) {
	.product-inquiry { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; }
}