/* ==========================================================================
   Product detail layout

   Two columns above the fold: gallery left, content right. The content column
   is sticky, and because it is a grid item it stops of its own accord at the
   end of the row — which is exactly the fold. No script, no measured offsets.

   The design reference has no product detail page, so the split, the rhythm,
   and the sticky behaviour are built from theme.json's own scale rather than
   converted from an export.
   ========================================================================== */

/* WordPress gives every flow container's children a blockGap top margin. These
   containers are laid out here instead, so that second rhythm has to come off
   or it stacks on top of the spacing declared below. */
.tfs-product > *,
.tfs-product__layout > *,
.tfs-product__gallery > *,
.tfs-product__content > * {
	margin-block-start: 0;
}

.tfs-product {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
}

.tfs-product__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	margin-top: var(--wp--preset--spacing--30);
}

@media (min-width: 1024px) {
	.tfs-product__layout {
		/* Roughly 58/42. Fractional units rather than percentages so the column
		   gap comes out of the track sizes instead of overflowing them. */
		grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
		gap: var(--wp--preset--spacing--60);
	}

	.tfs-product__content {
		position: sticky;
		/* Clears the sticky header — the same offset the filter rail uses. */
		top: var(--wp--custom--rail--sticky-top);
	}
}

.tfs-product__content {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

.tfs-product__gallery {
	min-width: 0;
}

/* The size comes from the block's own display-large preset — this is an
   interior page, and the 60px hero size is the homepage's alone. */
.tfs-product__title {
	margin: 0;
	line-height: var(--wp--custom--line-height--display);
}

.tfs-product__summary {
	margin: 0;
	max-width: 62ch;
	color: var(--wp--preset--color--muted);
}

.tfs-product__summary p {
	margin: 0;
}

/* Collection eyebrow. Saddle is allowed on a collection tag and nowhere else
   on this template. */
.tfs-product-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
}

/* `saddle-text`, not `saddle` — 12px type on `ground`, where the decorative
   value is 3.53:1 and fails AA. The darkened one is 4.61:1. */
.tfs-product-eyebrow__link {
	color: var(--wp--preset--color--saddle-text);
	text-decoration: none;
}

.tfs-product-eyebrow__link:hover {
	color: var(--wp--preset--color--saddle-text);
	text-decoration: underline;
}

.tfs-product-eyebrow__link:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.tfs-product-price {
	margin: 0;
	font-size: var(--wp--preset--font-size--sub);
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

/* Actions — stacked, full width, primary first. */
.tfs-product-actions {
	display: grid;
	gap: var(--wp--custom--step--12);
}

/* Showroom availability, beneath the actions. */
.tfs-showroom-availability {
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--hairline);
}

.tfs-showroom-availability__title {
	margin: 0 0 var(--wp--custom--step--16);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.tfs-showroom-availability__list {
	display: grid;
	gap: var(--wp--custom--step--12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tfs-showroom-availability__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--custom--step--12);
	margin: 0;
}

.tfs-showroom-availability__phone {
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--accent);
	/* A phone number is a small target; on a touch device it needs to be a real
	   one without turning the row into a button. */
	padding-block: var(--wp--custom--step--8);
}

.tfs-showroom-availability__phone:hover {
	color: var(--wp--preset--color--accent-hover);
	border-bottom-color: var(--wp--preset--color--accent-hover);
	text-decoration: none;
}

.tfs-showroom-availability__phone:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Below the fold. */
.tfs-product__fold {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.tfs-product__fold > * {
	margin-block-start: 0;
}

.tfs-product__description {
	max-width: 62ch;
}

.tfs-product__description > :first-child {
	margin-top: 0;
}

.tfs-product__description > :last-child {
	margin-bottom: 0;
}