/* ---------------------------------------------------------------------------
 * Product detail page (T-627, docs/TGITION-product-detail-spec.md).
 *
 * Loaded only on is_singular('product'). Everything here reads design tokens; the
 * page's own type scale is in §3 of that spec — a product page is a long document,
 * so its H1 is one step down from Home's hero and every module title is capped at
 * the h3 step.
 * ------------------------------------------------------------------------ */

/* §3 Typography. The template's headings carry the heading LEVEL, not a size:
 * the scale lives in `styles/document.json` (the `is-style-document` block-style
 * variation, which the template's <main> carries), so a product page and every
 * other secondary page read at the same steps and there is no second copy of the
 * rules here. What stays is this page's own leading and measure. */
.tg-pdp h1,
.tg-pdp .tg-pdp-summary__title {
	max-width: 20em;
	margin: 0;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.tg-pdp .tg-pdp__title,
.tg-pdp h2.wp-block-heading {
	max-width: none;
	margin: 0 0 var(--wp--preset--spacing--50);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Sub-group label: the only place an eyebrow is used on this page. */
.tg-pdp .tg-pdp__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* T-629: the modules are tabs. One panel is on screen at a time, so the old alternating
 * paper / surface bands are gone — they described a rhythm between stacked sections that no
 * longer exists. Panels sit on the page background; the tab bar's hairline is the divider. */
.tg-pdp .tg-pdp-module {
	max-width: none;
	margin: 0;
	/* Closer to the tab bar than the old stacked rhythm: the bar is the divider, so the panel
	 * does not need a second block of air above it. */
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

/* `[hidden]` loses to the display rules some panels carry (`.tg-pdp-overview` is a grid), so
 * the state is stated explicitly and with enough weight to win. */
.tg-pdp .tg-pdp-module[hidden] {
	display: none;
}

/* Full-bleed bands use `50% - 50vw`, which overshoots by half a scrollbar on desktop and
 * produces an 8px horizontal scroll. `overflow-x: clip` removes the overshoot without
 * creating a scroll container, so the sticky nav keeps working (unlike `overflow: hidden`). */
/* NOTE: no `overflow-x: clip` here — a clip on html/body breaks the sticky header and the
 * sticky in-page nav. The full-bleed bands are sized so they cannot overshoot instead. */

/* §4.1 Breadcrumb: phones show only the parent level, as "← Power adapters". */
@media (max-width: 767px) {
	.tg-pdp .tg-breadcrumbs li:not(:last-child):not(:nth-last-child(2)) {
		display: none;
	}

	.tg-pdp .tg-breadcrumbs li:nth-last-child(2)::after {
		content: none;
	}

	.tg-pdp .tg-breadcrumbs li:nth-last-child(2) {
		gap: var(--wp--preset--spacing--20);
	}

	.tg-pdp .tg-breadcrumbs li:nth-last-child(2)::before {
		content: "←";
	}

	.tg-pdp .tg-breadcrumbs li:last-child {
		display: none;
	}
}

/* §4.2 Hero: gallery 7 columns, summary 5, 64px gutter. */
.tg-pdp .tg-pdp-hero {
	gap: var(--wp--preset--spacing--80);
	margin: 0 0 var(--wp--preset--spacing--70);
	align-items: start;
}

/* The two columns were 58.33 / 41.67, with the media column capped by the 1:1 stage. That left the
 * summary looking narrow against a wide picture, so the split is now 54 / 46 and the gutter tighter.
 *
 * Measured before: media 552px, summary 552px, 56px of air on both sides of the container. The
 * gap is equal in numbers; it *reads* uneven because the summary's text stops well short of its
 * column. Widening the column closes that. */
/* Core writes `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 0;
 * flex-grow: 1 }` — three classes, and it sets *both* properties. A two-class rule here therefore
 * changed nothing: measured, the columns stayed at `grow: 1` and rendered 552px each however the
 * split was written. Matching the core selector's weight and naming the columns directly is what
 * actually divides the row. */
.tg-pdp .wp-block-columns.tg-pdp-hero > .wp-block-column.tg-pdp-hero__media {
	flex-grow: 54;
}

.tg-pdp .wp-block-columns.tg-pdp-hero > .wp-block-column.tg-pdp-hero__summary {
	flex-grow: 46;
}

.tg-pdp .tg-pdp-hero > .wp-block-column {
	min-width: 0;
	margin: 0;
}

/* Summary column ------------------------------------------------------- */
.tg-pdp-summary__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The category link above the title is the way back to the family, and it measured 16px tall at
 * 375px. It grows to the touch minimum; the negative margin keeps the line box where it was. */
.tg-pdp-summary__eyebrow a {
	display: inline-block;
	min-height: 44px;
	padding-block: 4px;
	margin-block: -4px;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.tg-pdp-summary__eyebrow a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The model is a quiet mono label, not a second heading. */
.tg-pdp-summary__model {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
}

.tg-pdp-summary__model-value {
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-muted);
}

.tg-pdp-summary__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* 44px: copying the model number is the one thing a buyer does on this page more than once, and
	 * a 32px target missed the touch minimum (measured 2026-10-18). */
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--s);
	color: var(--wp--preset--color--ink-muted);
	cursor: pointer;
}

.tg-pdp-summary__copy .tg-icon {
	width: 18px;
	height: 18px;
}

.tg-pdp-summary__copy:hover {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--photo-ground);
}

.tg-pdp-summary__copy.is-copied {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.tg-pdp-summary__lead {
	max-width: 42ch;
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.tg-pdp-summary__chips,
.tg-pdp-summary__certs,
.tg-pdp-customization__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.tg-pdp .tg-chip {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 34px;
	margin: 0;
	padding: 6px 14px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
}

.tg-pdp-summary__certs {
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.tg-pdp-summary__cert a,
.tg-pdp-summary__cert > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.tg-pdp-summary__cert .tg-icon {
	width: 15px;
	height: 15px;
	color: var(--wp--preset--color--accent);
}

.tg-pdp-summary__cert a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Variants (hero switcher and the Other versions module share the pill look). */
.tg-pdp-summary__variants {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}

.tg-pdp-summary__variants-label {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Two even columns, always.
 *
 * Three columns inside a 508px summary gave each pill 164px, which is narrower than
 * "UK Plug, Single Colour" — that label wrapped to two lines while "UK Plug, Two-Tone" did not,
 * so the row held pills 59px and 36px tall and their tops could not line up (measured: y=772 for
 * one, y=780 for the rest). Two columns give each pill ~246px, every label fits on one line, and
 * `align-items: stretch` keeps the boxes identical even if a longer label is added later.
 *
 * `1fr` tracks share the width evenly, so no pill is wider than its neighbour. */
.tg-pdp-variants__pills {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

/* Every box in the row must be the same height, and the same distance from the top.
 *
 * Two things fought this. First, a `list-item` keeps its content height here — `align-self:
 * stretch` measured no change (36px against a 44px row) — so the height is pinned to the grid
 * area. Second, `components.css` sets `.tg-main li + li { margin-top: 8px }` for body lists, which
 * landed on every pill but the first: measured `margin-top: 8px` on items 2, 3 and 4 against 0 on
 * item 1, and that is what pushed the unselected pills 8px below the selected one. The reset needs
 * more weight than that rule carries, hence `.tg-pdp` in front of it. */
.tg-pdp .tg-pdp-variants__pills > li {
	display: flex;
	height: 100%;
	margin: 0;
}

.tg-pdp-variants__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* The grid item is the <li>, not this span. `flex: 1` makes the pill fill the li on both axes,
	 * so every box in the row measures the same however its label wraps. Measured before this:
	 * 176 × 44 against 154 × 36 — neither the width nor the top edge lined up. */
	flex: 1 1 auto;
	height: auto;
	box-sizing: border-box;
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

a.tg-pdp-variants__pill:hover {
	border-color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tg-pdp-variants__pill.is-current {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Commercial points sit between two hairlines, and only render when they exist. */
.tg-pdp-summary__commercial {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding-block: var(--wp--preset--spacing--30);
	border-block: 1px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--small);
}

.tg-pdp-summary__commercial span + span {
	position: relative;
}

.tg-pdp-summary__commercial span + span::before {
	content: "·";
	position: absolute;
	left: calc(var(--wp--preset--spacing--50) / -2 - 2px);
	color: var(--wp--preset--color--ink-muted);
}

.tg-pdp-summary__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}

.tg-pdp-summary__quote,
.tg-pdp-summary__datasheet,
.tg-pdp-datasheet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	box-sizing: border-box;
	min-height: 48px;
	margin: 0;
	padding: 12px var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--button);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
}

.tg-pdp-summary__quote {
	background: var(--wp--preset--color--accent);
	border: 1px solid transparent;
	color: var(--wp--preset--color--surface);
}

.tg-pdp-summary__quote:hover {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--surface);
}

.tg-pdp-summary__datasheet,
.tg-pdp-datasheet {
	background: transparent;
	border: 1px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.tg-pdp-summary__datasheet:hover,
.tg-pdp-datasheet:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.tg-pdp-summary__datasheet .tg-icon,
.tg-pdp-datasheet .tg-icon {
	width: 16px;
	height: 16px;
}

/* "Questions? Chat on WhatsApp" measured 18px tall at 375px — the only WhatsApp affordance on this
 * page besides the band, so it reaches the touch minimum with the same negative-margin trick. */
.tg-pdp-summary__whatsapp a {
	display: inline-block;
	min-height: 44px;
	padding-block: 4px;
	margin-block: -4px;
}

.tg-pdp-summary__whatsapp {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
}

/* §4.3 In-page nav: a full-bleed sticky toolbar, one row, scrolls sideways on phones.
 *
 * It sticks at 0, not under the header: the sticky header lives in home-ui-v2.css, which is
 * only enqueued on the front page, so on a product page the header scrolls away. Reserving
 * its height here left the bar floating 126px down over the Overview copy.
 * The bar spans the viewport (the page's other bands do too) while its content stays on the
 * container gutter, so it reads as a toolbar and not as a slab inside the text column. */
.tg-pdp-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	margin: 0 calc(-1 * clamp(24px, 5vw, 56px)) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--paper);
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	box-shadow: 0 1px 0 rgb(29 39 48 / 4%);
}

.tg-pdp-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	box-sizing: border-box;
	width: min(var(--wp--custom--container--default), 100%);
	margin-inline: auto;
	padding-inline: clamp(24px, 5vw, 56px);
}

.tg-pdp-nav__list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	list-style: none;
}

.tg-pdp-nav__list::-webkit-scrollbar {
	display: none;
}

.tg-pdp .tg-pdp-nav__list li {
	flex: 0 0 auto;
	margin: 0;
}

.tg-pdp-nav__link {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 54px;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.tg-pdp-nav__link:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tg-pdp-nav__link.is-current,
.tg-pdp-nav__link[aria-selected="true"] {
	border-bottom-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* A tab is a button, not a jump link: keep the hit area and drop the anchor affordances. */
.tg-pdp-nav__link[role="tab"] {
	cursor: pointer;
}

.tg-pdp-nav__link[role="tab"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -4px;
}

.tg-pdp-nav__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 40px;
	margin: 0;
	padding: 8px var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--surface);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--wp--custom--motion--fast);
}

.tg-pdp-nav.is-stuck .tg-pdp-nav__cta {
	opacity: 1;
	pointer-events: auto;
}

.tg-pdp-nav__cta:hover {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--surface);
}

/* The nav's WhatsApp link exists for the phone bar only; keep it out of the desktop row. */
.tg-pdp-nav .tg-pdp-nav__wa {
	display: none;
}

/* Jump targets clear the sticky nav (54px + its rules) and 16px of air. */
.tg-pdp [id="overview"],
.tg-pdp [id="specifications"],
.tg-pdp [id="compliance"],
.tg-pdp [id="customization"],
.tg-pdp [id="ordering"],
.tg-pdp [id="variants"],
.tg-pdp [id="related"],
.tg-pdp .tg-pdp-spec__group {
	scroll-margin-top: calc(var(--tg-pdp-nav-height, 56px) + 16px);
}

/* §4.4 Overview: copy left, four feature cards right. */
.tg-pdp-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
}

.tg-pdp-overview__intro > * {
	max-width: 60ch;
}

.tg-pdp-overview__intro > .tg-pdp__title {
	max-width: none;
}

/* Both columns start on the same line.
 *
 * Measured before: the intro paragraph's first line sat at y=1246 while the feature cards began
 * at y=1229 — the 17px difference is the paragraph's own top margin, which a grid item keeps
 * inside its track. The row is aligned to `start` and the copy's leading margin is pulled out, so
 * the paragraph's first baseline lines up with the cards' top edge. */
.tg-pdp-overview {
	align-items: start;
}

.tg-pdp-overview__intro > .wp-block-post-content > :first-child,
.tg-pdp-overview__intro > .wp-block-paragraph:first-child {
	margin-top: 0;
}

/* The section's own heading spans both columns; the copy and the cards share the row below. */
.tg-pdp-overview > .tg-pdp__title {
	grid-column: 1 / -1;
	/* A grid item shrinks to its content unless told otherwise, which left the heading
	 * sitting in the middle of the container. */
	justify-self: start;
	width: 100%;
	margin-bottom: 0;
}

@media (min-width: 1024px) {
	.tg-pdp-overview__intro {
		max-width: none;
	}
}

.tg-pdp-overview .wp-block-post-content :where(p, li) {
	max-width: 60ch;
}

.tg-pdp-overview .wp-block-post-content > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.tg-pdp-overview .wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--h4);
}

.tg-pdp-features {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--rule);
	list-style: none;
	border-block: 1px solid var(--wp--preset--color--rule);
}

.tg-pdp .tg-pdp-features li {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.tg-pdp-features__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent);
}

.tg-pdp-features__icon .tg-icon {
	width: 14px;
	height: 14px;
}

/* §4.5 Specifications: 2-column group grid, whole container width. */
.tg-pdp-module__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

.tg-pdp-module__head .tg-pdp__title {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* P1-4: the groups flow into two columns by height, not by grid order. A two-column grid gave
 * the left column General/Output/Environmental and the right Input/Protection/Physical, so the
 * right column ended ~200px higher and the page carried a hole under it. Multi-column balances
 * the two sides and keeps the data order intact (General → Input → Output → Protection →
 * Environmental → Physical). */
.tg-pdp-spec__groups {
	columns: 2;
	column-gap: var(--wp--preset--spacing--90);
}

.tg-pdp-spec__group {
	break-inside: avoid;
	margin: 0 0 var(--wp--preset--spacing--70);
}

@media (max-width: 1023px) {
	.tg-pdp-spec__groups {
		columns: 1;
	}
}

/* Real tables with row headers (§4.5): scannable, and a parser can pair label with value. */
.tg-pdp .tg-spec {
	width: 100%;
	max-width: none;
	margin: 0;
	border-collapse: collapse;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.tg-pdp .tg-spec th,
.tg-pdp .tg-spec td {
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	vertical-align: top;
	text-align: left;
}

.tg-pdp .tg-spec tbody th {
	width: 42%;
	padding-right: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.45;
}

.tg-pdp .tg-spec td {
	font-size: 0.9375rem;
	/* No `tabular-nums` here (P0-1 follow-up): Schibsted Grotesk's tabular figures also widen
	 * `.` `,` `;`, so `>86.204%` rendered as `>86 . 204%` — the exact "number broken by spaces"
	 * symptom the prompt lists, coming from this declaration rather than from the data. DESIGN §3
	 * forbids tabular figures on any text that contains punctuation; the step counter, which is
	 * digits only, keeps them. */
	line-height: 1.5;
}

/* §4.6 Compliance: cards + the test table. */
.tg-pdp-compliance__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--60);
}

.tg-pdp-cert {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--s);
}

.tg-pdp-cert__mark {
	margin: 0;
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 600;
	line-height: 1.2;
}

.tg-pdp-cert__standard,
.tg-pdp-cert__number {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

.tg-pdp-cert__pdf {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.tg-pdp-compliance__tests {
	margin-bottom: var(--wp--preset--spacing--50);
}

.tg-pdp-compliance__tests + .tg-pdp-compliance__references {
	margin-top: var(--wp--preset--spacing--60);
}

.tg-pdp .tg-pdp-compliance__tests thead th {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tg-pdp .tg-pdp-compliance__tests tbody th {
	width: 26%;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.tg-pdp-compliance__references {
	max-width: 76ch;
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.tg-pdp-compliance__link {
	margin: 0;
	font-weight: 600;
}

.tg-pdp-compliance__link a,
.tg-pdp-customization__link a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 44px;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.tg-pdp-compliance__link a:hover,
.tg-pdp-customization__link a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tg-pdp-compliance__link .tg-icon,
.tg-pdp-customization__link .tg-icon {
	width: 15px;
	height: 15px;
}

/* §4.7 Customization. */
.tg-pdp-customization__lead {
	max-width: 62ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
}

.tg-pdp-customization__chips {
	margin-top: var(--wp--preset--spacing--40);
}

.tg-pdp-customization__link {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-weight: 600;
}

/* §4.8 Ordering & packaging: two tables side by side. */
.tg-pdp-ordering__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
}

/* §4.10 / §4.11 Cards reuse the product tile; the grid is the page's only card row. */
.tg-pdp .tg-product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tg-pdp .tg-product-grid > li {
	margin: 0;
}

/* Related products (T-628): the shared carousel component, sized for this page.
 * The section keeps its own heading; the row is cards only. */
.tg-pdp .tg-pdp-related__carousel {
	--tg-carousel-gap: var(--wp--preset--spacing--40);
	/* The section carries the heading; the row starts right under it. */
	margin-top: 0;
}

/* Four across from 1200px: this is a reference row, not the Home showcase, and the cards are
 * smaller here so more of the catalogue is visible without scrolling. The selector is scoped to
 * `.tg-pdp` so it outranks carousel.css's generic 3-up step without reordering the stylesheets. */
@media (min-width: 1200px) {
	.tg-pdp .tg-pdp-related__carousel {
		--tg-carousel-slide: calc((100% - 3 * var(--tg-carousel-gap)) / 4);
	}
}

.tg-pdp-related__track {
	align-items: stretch;
}

/* `.tg-main li + li { margin-top: 8px }` (components.css) pushed every slide but the first
 * 8px down; the track's own gap is the only spacing it should have. */
/* T-716: the detail images. They are long, stacked, and read top to bottom in the order the seed
 * declares — no grid, no crop, no aspect override, because cropping a specification sheet cuts the
 * numbers off it. */
.tg-pdp-detail-module {
	border-top: 1px solid var(--wp--preset--color--rule);
	/* The in-page nav is sticky; without this, `#detail` parks the heading underneath it. Uses the
	 * same offset the other anchored modules already use. */
	scroll-margin-top: calc(var(--tg-pdp-nav-height, 56px) + 16px);
}

.tg-pdp-detail__image {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
}

.tg-pdp-detail__image:last-child {
	margin-bottom: 0;
}

.tg-pdp .tg-pdp-related__track > li {
	margin-top: 0;
}

.tg-pdp-related__carousel .tg-carousel__viewport {
	padding-block: var(--wp--preset--spacing--10);
}

/* No autoplay on this row, so no pause control (carousel.js removes it as well). */
.tg-pdp-related__carousel .tg-carousel__pause {
	display: none;
}

.tg-pdp-related__carousel .tg-product-tile {
	height: 100%;
}

.tg-pdp-variants__list {
	margin-top: var(--wp--preset--spacing--50);
}

@media (min-width: 1024px) {
	.tg-pdp .tg-pdp-variants__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* P0-3: the related row is the shared product card — white surface, 8px radius, the
 * "View specs & get quote" line — the same component Home and the archives render (T-631).
 * It used to strip the surface, the padding and the link row here, which is why the row read
 * as a different card. Only the density changes: four cards share one row, so the name keeps a
 * two-line slot and the spec line keeps one baseline. */
.tg-pdp .tg-pdp-related .tg-product-tile {
	height: 100%;
	padding: var(--wp--preset--spacing--30);
}

.tg-pdp .tg-pdp-related .tg-product-tile__media {
	border-radius: var(--wp--custom--radius--s);
}

.tg-pdp .tg-pdp-related .tg-product-tile__name {
	/* Two-line slot so a short name and a long one still put the spec line on one baseline. */
	min-height: calc(2 * 1.3em);
}

/* §4.12 Closing band. The band is one component with one look (owner 2026-10-18), so its skin and
 * its full-bleed gutter live in `components.css`; nothing product-page-specific is left here. */

/* Gallery: 1:1 stage, a single row of thumbnails, the current one marked with an
 * outline (never a border — a border repaints the box and the row jumps, §4.2). */
/* The stage was a 1:1 square, 596px tall at this width, which pushed the whole hero down and left
 * a lot of empty space under the shorter summary column. Five-fourths is exactly a fifth less
 * height for the same width, and `object-fit: contain` on the image (components.css) keeps the
 * whole product visible rather than cropping it — the square photo sits centred with white either
 * side, which is why the stage background matches the photographs. */
.tg-pdp .tg-gallery__stage {
	aspect-ratio: 5 / 4;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--m);
}

.tg-pdp .tg-gallery__thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(64px, 1fr);
	grid-template-columns: none;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scrollbar-width: none;
}

.tg-pdp .tg-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.tg-pdp .tg-gallery__thumb {
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	border: 0;
	border-radius: var(--wp--custom--radius--s);
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color var(--wp--custom--motion--fast);
}

/* The current shot is marked by a slight scale, not by an outline.
 *
 * `outline-offset` draws outside the box, and the thumbnail strip is a fixed-height grid, so the
 * top and bottom of the ring were being clipped — the mark read as two stray vertical lines. A
 * transform stays inside the box and needs no extra space.
 *
 * `transform-origin: center` keeps the row from jumping when the mark moves: the scaled tile
 * grows symmetrically and the grid track does not change width. */
.tg-pdp .tg-gallery__thumb {
	transform: scale(1);
	transition: transform var(--wp--custom--motion--fast), border-color var(--wp--custom--motion--fast);
}

.tg-pdp .tg-gallery__thumb.is-current,
.tg-pdp .tg-gallery__thumb[aria-current="true"] {
	border-color: var(--wp--preset--color--accent);
	box-shadow: none;
	/* `outline-width` rather than `outline`, so the colour set below cannot re-add a ring. */
	outline-width: 0;
	outline-color: transparent;
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.tg-pdp .tg-gallery__thumb {
		transition: none;
	}
}

/* §5 Responsive. */
@media (min-width: 768px) {
	.tg-pdp .tg-pdp-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tg-pdp-compliance__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tg-pdp .tg-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.tg-pdp-overview {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--wp--preset--spacing--90);
	}

	.tg-pdp-ordering__cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.tg-pdp-compliance__cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tg-pdp-cta__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--wp--preset--spacing--80);
	}
}

@media (max-width: 1023px) {
	.tg-pdp .tg-pdp-hero {
		flex-wrap: wrap;
	}

	.tg-pdp .tg-pdp-hero__media,
	.tg-pdp .tg-pdp-hero__summary {
		flex-basis: 100%;
	}
}

@media (max-width: 767px) {
	/* Phones: the nav becomes a scrolling tab strip, and the CTA moves to a fixed bar
	 * (§4.3) so the quote action is always one tap away. The sitewide floating WhatsApp
	 * is hidden on this page — the bar already carries it. */
	/* Phones: the bar is not sticky (the fixed quote bar at the bottom carries the CTA),
	 * and the tab strip scrolls sideways. */
	.tg-pdp-nav {
		position: static;
		margin-bottom: var(--wp--preset--spacing--50);
	}

	/* The tab strip fades at the right edge when it can scroll, so the cut-off reads as
	 * "more to the right" rather than as a clipped word. A mask needs opaque-to-transparent,
	 * so this black is a technical stop, not a design colour. */
	.tg-pdp-nav.is-scrollable .tg-pdp-nav__list {
		mask-image: linear-gradient(to right, rgb(0 0 0) calc(100% - 40px), transparent);
		-webkit-mask-image: linear-gradient(to right, rgb(0 0 0) calc(100% - 40px), transparent);
	}


	.tg-pdp-nav__cta {
		display: none;
	}

	.tg-pdp .tg-pdp-module {
		padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	}

	.tg-pdp-summary__actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.tg-pdp-summary__quote,
	.tg-pdp-summary__datasheet {
		width: 100%;
	}

	/* Thumbnails give way to a horizontal stage with dots (§4.2, §5). */
	.tg-pdp .tg-gallery__thumbs {
		display: none;
	}

	.tg-pdp .tg-gallery__stage {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	/* Tables: label above value, no row borders on the label line (§4.5). */
	.tg-pdp .tg-spec,
	.tg-pdp .tg-spec tbody,
	.tg-pdp .tg-spec tr,
	.tg-pdp .tg-spec th,
	.tg-pdp .tg-spec td,
	.tg-pdp .tg-spec thead,
	.tg-pdp .tg-spec thead tr {
		display: block;
		width: auto;
	}

	.tg-pdp .tg-spec thead {
		display: none;
	}

	.tg-pdp .tg-spec tr {
		padding-block: var(--wp--preset--spacing--30);
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}

	.tg-pdp .tg-spec th,
	.tg-pdp .tg-spec td {
		padding: 0;
		border: 0;
	}

	.tg-pdp .tg-spec tbody th {
		width: auto;
		padding-bottom: 2px;
	}

	/* The test table becomes a stack of small cards. */
	.tg-pdp .tg-pdp-compliance__tests tr {
		padding: var(--wp--preset--spacing--40) 0;
	}

	.tg-pdp .tg-pdp-compliance__tests tbody th {
		font-size: 0.9375rem;
	}
}

/* Phone gallery strip + dots, built by pdp.js from the thumbnails. */
/* `[hidden]` loses to our `display: block` on the stage, so state it explicitly. */
.tg-pdp .tg-gallery__stage[hidden] {
	display: none;
}

.tg-gallery__strip {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	background: var(--wp-preset--color--photo-ground, var(--wp--preset--color--photo-ground));
	border-radius: var(--wp--custom--radius--m);
	scrollbar-width: none;
}

.tg-gallery__strip::-webkit-scrollbar {
	display: none;
}

.tg-gallery__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: zoom-in;
}

.tg-gallery__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.tg-gallery__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--30);
}

.tg-gallery__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--rule);
	transition: background-color var(--wp--custom--motion--fast);
}

.tg-gallery__dot.is-current {
	background: var(--wp--preset--color--accent);
}

/* Lightbox: one dialog for the whole gallery, built on first use. */
.tg-lb {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 56px);
	background: rgb(29 39 48 / 92%);
}

.tg-lb.is-open {
	display: flex;
}

.tg-lb__img {
	max-width: min(92vw, 1400px);
	max-height: 84vh;
	object-fit: contain;
	border-radius: var(--wp--custom--radius--s);
}

/* A detail image is a tall specification sheet, not a product shot. Containing it in 84vh on a
 * phone leaves the text at the size it was in the page — the whole point of opening it. Letting it
 * use the full width and scroll vertically is what makes those numbers legible. */
.tg-lb.is-single .tg-lb__img {
	width: 100%;
	max-width: min(100%, 1600px);
	max-height: none;
	border-radius: 0;
}

.tg-lb.is-single {
	align-items: flex-start;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tg-lb__close,
.tg-lb__prev,
.tg-lb__next {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	background: rgb(255 255 255 / 12%);
	border: 1px solid rgb(255 255 255 / 28%);
	border-radius: 50%;
	color: var(--wp--preset--color--surface);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.tg-lb__close {
	top: clamp(12px, 3vw, 28px);
	right: clamp(12px, 3vw, 28px);
}

.tg-lb__prev {
	left: clamp(8px, 2vw, 24px);
}

.tg-lb__next {
	right: clamp(8px, 2vw, 24px);
}

/* One frame: a lone detail image, so the arrows and the counter are hidden rather than left as
 * controls that do nothing. `show()` is the only writer of this class. */
.tg-lb.is-single .tg-lb__prev,
.tg-lb.is-single .tg-lb__next,
.tg-lb.is-single .tg-lb__count {
	display: none;
}

.tg-lb__count {
	position: absolute;
	bottom: clamp(12px, 3vw, 28px);
	margin: 0;
	color: rgb(255 255 255 / 78%);
	font-size: var(--wp--preset--font-size--small);
}

/* The mobile inquiry bar. Rendered once, by pdp.js, only below 768px. */
.tg-pdp-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--20) clamp(16px, 5vw, 32px);
	padding-bottom: calc(var(--wp--preset--spacing--20) + env(safe-area-inset-bottom, 0px));
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.tg-pdp-bar__quote {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 10px var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	text-decoration: none;
}

.tg-pdp-bar__wa {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	background: var(--wp--preset--color--accent-tint);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--accent);
}

.tg-pdp-bar__wa .tg-icon {
	width: 22px;
	height: 22px;
}

.tg-pdp-bar__quote:hover {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--surface);
}

/* §4.3: the sitewide float would sit under the bar, so it is removed on this page only.
 * `.tg-whatsapp` is fixed and 40 z-index, same as the bar — hence the explicit hide. */
@media (max-width: 767px) {
	body.single-product .tg-whatsapp,
	body.single-product .tg-whatsapp:hover {
		display: none;
	}

	/* Keep the end of the page clear of the fixed bar: the footer carries the padding, so
	 * the legal line can still scroll above it. */
	.single-product .tg-footer__inner {
		padding-bottom: calc(var(--wp--preset--spacing--80) + 72px + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.tg-pdp .tg-gallery__thumb {
		transition: none;
	}
}

/* Stage arrows (T-719). Inside the stage, so the phone's swipe strip — which replaces the stage —
 * never renders them. */
.tg-gallery__nav {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 clamp(4px, 1vw, 10px);
	pointer-events: none;
}

.tg-gallery__nav-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	touch-action: manipulation;
	opacity: 0;
	transition: opacity 0.15s ease;
}

/* Shown on hover and whenever the button has keyboard focus: a control that appears only under a
 * mouse is unreachable by keyboard. */
.tg-gallery__stage:hover .tg-gallery__nav-btn,
.tg-gallery__nav-btn:focus-visible {
	opacity: 1;
}

.tg-gallery__nav-btn:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

@media (prefers-reduced-motion: reduce) {
	.tg-gallery__nav-btn {
		transition: none;
	}
}

/* T-717: the zoom triggers. The detail images became buttons so they take focus and Enter; the
 * stage was already an anchor. Neither should look like a control until pointed at, hence the
 * bare reset plus the zoom cursor. */
.tg-gallery__stage,
.tg-pdp-detail__zoom {
	display: block;
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.tg-pdp-detail__zoom {
	/* Three quarters of the old 60rem, and on the left edge rather than centred: the module's
	 * heading is left-aligned, so a centred block under it reads as a mistake. */
	width: min(100%, 45rem);
	max-width: 45rem;
	margin: 0 auto var(--wp--preset--spacing--40) 0;
}

.tg-gallery__stage:focus-visible,
.tg-pdp-detail__zoom:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}