/**
 * Product page: the enquiry card and the related-products rail.
 *
 * The enquiry card sits at the foot of the copy column, beside the sidebar,
 * where a buyer arrives having just read the specification - not as a separate
 * full-width band. Its composition follows the reference the client supplied:
 * centred heading, a subject bar naming the style, paired short fields, a
 * centred submit. The dress is TENSUNG's own - IBM Plex Sans rather than the
 * reference's serif, jade and amber rather than its tan.
 *
 * Deliberately thin on form styling. source-fidelity.css already defines one
 * WPForms appearance for the whole site: mist inputs at 12px, an amber pill
 * submit, and a two-column grid in which a field spans the row unless it
 * carries `wpforms-one-half`. This file adds the furniture around that and
 * overrides only what the placement actually changes.
 */

/* ---- Enquiry card ------------------------------------------------------- */

body .tensung-products-page .tensung-pinq-card {
	margin-top: 40px;
	/* The page's "Request a quote" button jumps here. The header is sticky and
	   133px tall once the page has scrolled, so without this the card would
	   arrive under it and the visitor would land part-way down the form. 150px
	   is the offset the home page's #inquiry and the contact page's #sample
	   already use, and it leaves the accent edge clear of the header. */
	scroll-margin-top: 150px;
	background: #fff;
	border: 1px solid var( --ts-line-soft );
	/* The one flourish carried over from the reference: a thin accent edge
	   along the top. Amber is the site's single conversion colour, and this
	   block is the conversion point of the page. */
	border-top: 3px solid var( --ts-amber );
	border-radius: 6px;
	padding: 40px 40px 44px;
}

body .tensung-products-page .tensung-pinq-title {
	margin: 0;
	text-align: center;
	font-size: 30px;
	line-height: 1.25;
	font-weight: 600;
	color: var( --ts-ink );
}

body .tensung-products-page .tensung-pinq-lede {
	margin: 12px auto 0;
	max-width: 560px;
	text-align: center;
	font-size: 15px;
	line-height: 1.72;
	color: var( --ts-muted );
}

/* The subject bar states which style the buyer is on. The field behind it is
   locked to the same value, so the notification email agrees with the page. */
body .tensung-products-page .tensung-pinq-subject {
	margin: 28px 0 22px;
	padding: 14px 18px;
	background: var( --ts-mist );
	border: 1px solid var( --ts-line-soft );
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

body .tensung-products-page .tensung-pinq-subject-label {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --ts-muted );
}

body .tensung-products-page .tensung-pinq-subject-value {
	font-size: 15px;
	font-weight: 600;
	color: var( --ts-jade );
}

/* ---- What the placement changes about the form -------------------------- */

/* Subject reaches the notification email but is already stated above, so it is
   taken out of view rather than out of the DOM. Labels go the same way: the
   placeholders carry them in this layout, as the reference does, and the label
   stays readable to a screen reader. */
body .tensung-products-page .tensung-pinq-form .wpforms-field.ts-subject,
body .tensung-products-page .tensung-pinq-form .wpforms-field > .wpforms-field-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px;
	padding: 0 !important;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Required markers would be orphaned by hiding the labels; the placeholders
   carry the asterisk instead. */
body .tensung-products-page .tensung-pinq-form .wpforms-required-label {
	display: none;
}

body .tensung-products-page .tensung-pinq-form textarea {
	min-height: 150px !important;
}

/* The site's submit is a full-width amber pill. Across this card it reads as a
   banner, so it keeps the pill and centres at a set width. */
body .tensung-products-page .tensung-pinq-form .wpforms-submit-container {
	grid-column: 1 / -1;
	text-align: center;
	padding-top: 6px;
}

body .tensung-products-page .tensung-pinq-form button[type="submit"] {
	width: auto;
	min-width: 230px;
}

/* ---- Related products --------------------------------------------------- */

body .tensung-products-page .tensung-prelated {
	background: var( --ts-mist );
	padding: 64px 0 72px;
}

body .tensung-products-page .tensung-prel-title {
	margin: 0;
	text-align: center;
	font-size: 32px;
	line-height: 1.25;
	font-weight: 600;
	color: var( --ts-ink );
}

body .tensung-products-page .tensung-prel-rule {
	width: 48px;
	height: 3px;
	margin: 18px auto 34px;
	background: var( --ts-amber );
}

body .tensung-products-page .tensung-prel-frame {
	position: relative;
}

body .tensung-products-page .tensung-prel-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc( ( 100% - 4 * 20px ) / 5 );
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}

body .tensung-products-page .tensung-prel-rail::-webkit-scrollbar {
	display: none;
}

body .tensung-products-page .tensung-prel-rail:focus-visible {
	outline: 2px solid var( --ts-jade );
	outline-offset: 4px;
}

body .tensung-products-page .tensung-prel-card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	border: 1px solid var( --ts-line-soft );
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	transition: border-color .18s ease, transform .18s cubic-bezier( .4, 0, .2, 1 );
}

body .tensung-products-page .tensung-prel-card:hover {
	border-color: var( --ts-jade );
	transform: translateY( -3px );
}

/* Square, and nothing is cropped.

   Most of this catalogue leads with a landscape or near-square catalogue sheet -
   spec text and swatches laid out on a page - and any crop of one of those cuts
   the text off an edge. A 3:4 card sliced the sides off a 1800x1774 sheet and
   read as a mistake. Fitting whole in a square costs a little white above and
   below a portrait photograph, which is the cheaper of the two prices. */
body .tensung-products-page .tensung-prel-shot {
	/* Centred by the grid rather than by object-fit. `height: 100%` on the image
	   resolves against an auto-height parent, so the image kept its own
	   proportions and pushed the box past its aspect-ratio - a portrait sheet
	   made one card's picture 249px tall in a row of 204s. Capping the image
	   instead means the square always holds. */
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #fff;
	border-bottom: 1px solid var( --ts-line-soft );
	padding: 10px;
}

body .tensung-products-page .tensung-prel-shot img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

body .tensung-products-page .tensung-prel-body {
	display: block;
	padding: 16px 16px 20px;
}

body .tensung-products-page .tensung-prel-name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --ts-jade );
}

body .tensung-products-page .tensung-prel-blurb {
	display: block;
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.66;
	color: var( --ts-muted );
}

body .tensung-products-page .tensung-prel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --ts-line-soft );
	border-radius: 999px;
	background: #fff;
	color: var( --ts-jade );
	cursor: pointer;
	z-index: 2;
	transition: border-color .18s ease, color .18s ease, opacity .18s ease;
}

body .tensung-products-page .tensung-prel-arrow svg {
	width: 18px;
	height: 18px;
}

body .tensung-products-page .tensung-prel-arrow:hover {
	border-color: var( --ts-jade );
	color: var( --ts-amber );
}

body .tensung-products-page .tensung-prel-arrow--prev { left: -20px; }
body .tensung-products-page .tensung-prel-arrow--next { right: -20px; }

/* An arrow with nowhere to go says so rather than disappearing, so the rail
   does not change width under the cursor at either end. */
body .tensung-products-page .tensung-prel-arrow[disabled] {
	opacity: .3;
	cursor: default;
}

@media ( max-width: 1240px ) {
	body .tensung-products-page .tensung-prel-arrow--prev { left: 4px; }
	body .tensung-products-page .tensung-prel-arrow--next { right: 4px; }
}

@media ( max-width: 1024px ) {
	body .tensung-products-page .tensung-prel-rail {
		grid-auto-columns: calc( ( 100% - 2 * 18px ) / 3 );
		gap: 18px;
	}
	body .tensung-products-page .tensung-pinq-card { padding: 32px 24px 36px; }
}

@media ( max-width: 767px ) {
	body .tensung-products-page .tensung-pinq-card {
		margin-top: 28px;
		padding: 26px 18px 30px;
	}
	body .tensung-products-page .tensung-pinq-title { font-size: 25px; }
	body .tensung-products-page .tensung-prel-title { font-size: 25px; }

	body .tensung-products-page .tensung-prelated { padding: 40px 0 48px; }

	body .tensung-products-page .tensung-prel-rail {
		grid-auto-columns: 62%;
		gap: 14px;

		/* No snapping on a phone. A card plus its gap is one 246px snap step, and
		   under mandatory snapping any swipe shorter than half of that is thrown
		   back to where it started - which reads as a rail that will not move at
		   all. On the desktop the arrows drive it in exact card steps, so snapping
		   helps there and never fights a finger. Here it only fights. */
		scroll-snap-type: none;
		-webkit-overflow-scrolling: touch;

		/* The rail drifts by writing scrollLeft every frame (pdp-related.js).
		   Smooth behaviour would animate towards each of those writes and the
		   drift would stutter, so it is off wherever the drift runs. */
		scroll-behavior: auto;
	}

	/* Arrows are a pointer affordance; a thumb swipes the rail instead. */
	body .tensung-products-page .tensung-prel-arrow { display: none; }
}

/* The site collapses its forms to one column at 620px, not 767 - matched here
   so the submit does not run full width while the fields are still paired. */
@media ( max-width: 620px ) {
	body .tensung-products-page .tensung-pinq-form button[type="submit"] {
		width: 100%;
		min-width: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	body .tensung-products-page .tensung-prel-rail { scroll-behavior: auto; }
	body .tensung-products-page .tensung-prel-card { transition-duration: .01ms; }
	body .tensung-products-page .tensung-prel-card:hover { transform: none; }
}