/*
 * Single Product — `/products/{slug}/`, one reusable template's CSS.
 *
 * Every value traces to Swiftheat Product Detail.dc.html, measured with
 * Chrome DevTools. Reuses tokens.css wherever a matching token exists;
 * one-off values are commented with their measured source,
 * never force-fit into a token whose own current value would render
 * incorrectly (e.g. --gap-split-2col resolves to 72px, NOT the 96px this
 * page's own Features/Specs grid gap measures — using that token here
 * would silently render the wrong value, so 96px stays a literal).
 *
 * This file only loads on `is_singular('product')` (see inc/enqueue.php)
 * — it never loads alongside home.css or archive-product.css, so its own
 * `.product-card` image/padding overrides for Related Products need no
 * extra specificity to avoid a cross-file collision, matching the same
 * page-scoped-stylesheet architecture already used for the Product
 * Archive's own card variant.
 *
 * Heading/link/button selectors are written as 2-class compounds with
 * explicit colors from the start (not discovered as a bug afterward) —
 * the established Elementor Kit collision defense used in every section
 * this project has built.
 */

/* ---- Hero ---- */

.product-hero {
	background: var(--color-bg-white);
	border-bottom: 1px solid var(--border-light);
}

.product-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* 80px is this element's own exact measured gap — distinct from
	   --gap-split-2col (72px), not a substitute for it. */
	gap: 80px;
	align-items: center;
	padding: var(--space-section-compact-top) var(--gutter-desktop) var(--space-section-compact-bottom);
	box-sizing: border-box;
}

.product-hero__breadcrumb {
	font-family: var(--font-mono);
	font-size: var(--fs-utility);
	/* 0.1em is this element's own exact letter-spacing — distinct from
	   --ls-meta (0.08em) and --ls-eyebrow (0.22em), not a substitute for
	   either. Reused as the same literal by Related Products' own
	   "VIEW ALL PRODUCTS" link below, which measures identically. */
	letter-spacing: 0.1em;
	color: var(--text-faint-label);
	margin-bottom: 28px;
}

.product-hero__breadcrumb a {
	color: var(--text-faint-label);
}

.product-hero__breadcrumb a:hover {
	color: var(--color-red);
}

.product-hero__breadcrumb span {
	color: var(--color-navy);
}

.product-hero .product-hero__title {
	font-family: var(--font-primary);
	font-size: var(--fs-h1-detail);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-navy);
	margin: 0 0 24px;
}

.product-hero__desc {
	font-family: var(--font-primary);
	/* 18px is this element's own exact measured size — distinct from
	   --fs-body-large (19px), not a substitute for it. */
	font-size: 18px;
	line-height: var(--lh-body);
	color: var(--text-body-muted);
	max-width: 540px;
	margin: 0 0 40px;
}

.product-hero__actions {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

.product-hero .product-hero__button {
	display: inline-block;
	padding: var(--pad-button-primary);
	/* 15.5px is this element's own exact measured size — the same literal
	   already used by Product Archive's own CTA buttons, not a token. */
	font-family: var(--font-primary);
	font-size: 15.5px;
	font-weight: var(--fw-extrabold);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.product-hero .product-hero__button--primary {
	background: var(--color-red);
	color: var(--text-on-dark);
	border: 1px solid var(--color-red);
}

.product-hero .product-hero__button--primary:hover,
.product-hero .product-hero__button--primary:focus-visible {
	background: var(--color-navy);
	color: var(--text-on-dark);
	border-color: var(--color-navy);
}

.product-hero .product-hero__button--secondary {
	border: 1px solid var(--color-navy);
	color: var(--color-navy);
}

.product-hero .product-hero__button--secondary:hover,
.product-hero .product-hero__button--secondary:focus-visible {
	background: var(--color-navy);
	color: var(--text-on-dark);
}

.product-hero__image {
	background: var(--color-bg-tray);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-frame);
	/* This element's own exact measured shadow — distinct from
	   --shadow-frame-hero (0 50px 100px rgba(2,8,20,.55)), not a
	   substitute for it. */
	box-shadow: 0 30px 60px rgba(20, 40, 70, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px;
	min-height: 480px;
	box-sizing: border-box;
}

.product-hero__img {
	width: 100%;
	height: 380px;
	object-fit: contain;
	display: block;
	mix-blend-mode: multiply;
}

/* ---- Quick Overview ---- */

.product-overview {
	background: var(--color-bg-neutral);
}

.product-overview__inner {
	padding: var(--gutter-desktop);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 36px is this element's own exact measured gap. --gap-grid-3col's own
	   documentation cites "overview strip" as one of its usages with a
	   "varies 28-36px" note, but the token's actual defined value is
	   28px — using it here would render 28px, not the measured 36px, so
	   this stays its own literal rather than a token that would be wrong
	   in practice. */
	gap: 36px;
}

.product-overview__card {
	background: var(--color-bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	padding: 32px 34px;
	box-shadow: var(--shadow-card-rest);
}

.product-overview__label {
	font-family: var(--font-mono);
	font-size: 11.5px;
	/* 0.16em — the same repeated literal already used by the Footer's own
	   column headings and Archive's card headings; not promoted to a
	   token, per this project's established citation convention. */
	letter-spacing: 0.16em;
	color: var(--text-faint-label);
	margin-bottom: 12px;
}

.product-overview .product-overview__value {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	color: var(--color-navy);
	line-height: 1.5;
}

/* ---- Applications ---- */

.product-applications {
	background: var(--color-bg-white);
}

.product-applications__inner {
	padding: var(--space-section-standard) var(--gutter-desktop);
	box-sizing: border-box;
}

.product-applications__eyebrow,
.product-features__eyebrow,
.product-specs__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-red);
	margin-bottom: 20px;
}

.product-applications .product-applications__heading,
.product-features .product-features__heading,
.product-specs .product-specs__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-h2-sub);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-heading);
	color: var(--color-navy);
	margin: 0 0 24px;
}

.product-applications .product-applications__heading {
	/* 52px margin-bottom on this specific heading (measured) — distinct
	   from the 24px shared with Features/Specs above, so overridden here
	   rather than folded into the shared rule. */
	margin-bottom: 52px;
}

.product-applications__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--gap-grid-6col);
}

.product-applications__tile {
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	padding: 28px 24px;
	text-align: center;
	transition: border-color var(--transition-standard), box-shadow var(--transition-standard);
}

.product-applications__tile:hover {
	border-color: var(--color-blue-link);
	/* This element's own exact measured hover shadow — a one-off, not an
	   existing token. */
	box-shadow: 0 12px 28px rgba(20, 40, 70, 0.08);
}

.product-applications__dot {
	display: block;
	width: 10px;
	height: 10px;
	background: var(--color-red);
	border-radius: 50%;
	margin: 0 auto 16px;
}

.product-applications .product-applications__name {
	font-family: var(--font-primary);
	/* 15px is this element's own exact measured size — distinct from
	   --fs-body-small (14px), not a substitute for it. */
	font-size: 15px;
	font-weight: var(--fw-bold);
	color: var(--color-navy);
}

/* ---- Features ---- */

.product-features {
	background: var(--color-bg-neutral);
	border-top: 1px solid var(--border-light);
	border-bottom: 1px solid var(--border-light);
}

.product-features__inner,
.product-specs__inner {
	padding: var(--space-section-standard) var(--gutter-desktop);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	/* 96px is this element's own exact measured gap. --gap-split-2col
	   resolves to 72px — using it here would render the wrong gap, so
	   this stays its own literal (same reasoning as .product-overview__inner
	   above). */
	gap: 96px;
	align-items: start;
}

.product-features__desc,
.product-specs__desc {
	font-family: var(--font-primary);
	/* 16.5px is this element's own exact measured size — distinct from
	   --fs-body-small (14px) and --fs-body (17px), not a substitute for
	   either. */
	font-size: 16.5px;
	line-height: var(--lh-body);
	color: var(--text-body-muted);
	max-width: 440px;
	margin: 0;
}

.product-specs__desc {
	margin: 0 0 20px;
}

.product-specs__note {
	font-family: var(--font-primary);
	font-size: var(--fs-body-small);
	line-height: 1.6;
	color: var(--text-secondary);
	max-width: 440px;
	margin: 0 0 32px;
	/* Left accent for the bespoke-engineering disclaimer, reusing the
	   site's own established red accent (same token as every other
	   section's eyebrow/CTA color) rather than a new color. */
	padding-left: 16px;
	border-left: 3px solid var(--color-red);
}

.product-features__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.product-features__item {
	border-top: 1px solid var(--border-warm);
	padding: 24px 28px 24px 0;
	display: flex;
	/* 14px is this element's own exact measured gap — a one-off. */
	gap: 14px;
	align-items: baseline;
}

.product-features__dash {
	color: var(--color-blue-link);
	font-weight: var(--fw-extrabold);
	flex: none;
}

.product-features .product-features__item-title {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: var(--fw-extrabold);
	color: var(--color-navy);
	margin-bottom: 6px;
}

.product-features__item-text {
	font-family: var(--font-primary);
	font-size: var(--fs-body-small);
	/* 1.6 is this element's own exact line-height — distinct from
	   --lh-body (1.7), not a substitute for it. */
	line-height: 1.6;
	color: var(--text-secondary);
}

/* ---- Technical Specifications ---- */

.product-specs {
	background: var(--color-bg-white);
}

.product-specs .product-specs__download {
	display: inline-block;
	/* 15px 32px is this element's own exact measured padding — distinct
	   from --pad-button-primary (17px 36px) and --pad-button-compact
	   (13px 28px), not a substitute for either. */
	padding: 15px 32px;
	border: 1px solid var(--color-navy);
	color: var(--color-navy);
	font-family: var(--font-primary);
	font-size: var(--fs-nav);
	font-weight: var(--fw-extrabold);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.product-specs .product-specs__download:hover,
.product-specs .product-specs__download:focus-visible {
	background: var(--color-navy);
	color: var(--text-on-dark);
}

.product-specs__table {
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card-rest);
}

.product-specs__row {
	display: grid;
	/* 220px is this element's own exact measured fixed key-column width. */
	grid-template-columns: 220px 1fr;
	border-bottom: 1px solid var(--border-subtle);
	background: var(--color-bg-white);
}

.product-specs__row:last-child {
	border-bottom: 0;
}

.product-specs__key {
	padding: 18px 28px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	/* 0.12em is this element's own exact letter-spacing — distinct from
	   --ls-meta (0.08em) and the 0.16em literal used elsewhere on this
	   page, not a substitute for either. */
	letter-spacing: 0.12em;
	color: var(--text-faint-label);
	background: var(--color-bg-neutral);
	border-right: 1px solid var(--border-subtle);
	display: flex;
	align-items: center;
}

.product-specs__value {
	padding: 18px 28px;
	font-family: var(--font-primary);
	/* 15px is this element's own exact measured size — distinct from
	   --fs-body-small (14px), not a substitute for it. */
	font-size: 15px;
	font-weight: var(--fw-semibold);
	color: var(--color-navy);
	display: flex;
	align-items: center;
}

/* ---- Ceramic IR Advantage + Comparison ----
 * Ceramic IR Heaters only (see ceramic-ir-tech.php's own slug check) —
 * scoped entirely under .ceramic-ir-advantage / .ceramic-ir-comparison,
 * no bare/shared selectors, so nothing here can leak onto another
 * product's page even though this stylesheet loads for every product.
 *
 * Centered heading/intro treatment reuses this exact page's own existing
 * pattern from .product-customization__inner / .product-final-cta__inner
 * (max-width: var(--site-container); margin:0 auto; text-align:center) —
 * not a new layout convention. The 4-column advantage row reuses the
 * "simple icon + bold title + muted description" pattern already
 * established by About's own .about-capabilities, but without that
 * section's card treatment (no background/border/shadow) — a top border
 * per item instead, the same "shared row, not separate cards" language
 * already used by Process's steps and this page's own Features grid. */

.ceramic-ir-advantage {
	background: var(--color-bg-white);
	border-top: 1px solid var(--border-light);
}

.ceramic-ir-advantage__inner {
	max-width: var(--site-container);
	margin: 0 auto;
	padding: var(--space-section-standard) var(--gutter-desktop);
	box-sizing: border-box;
	text-align: center;
}

.ceramic-ir-advantage .ceramic-ir-advantage__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-h2-sub);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-heading);
	color: var(--color-navy);
	margin: 0 auto 20px;
}

.ceramic-ir-advantage__intro {
	font-family: var(--font-primary);
	font-size: 18px;
	line-height: var(--lh-body);
	color: var(--text-body-muted);
	max-width: 620px;
	margin: 0 auto 56px;
}

.ceramic-ir-advantage__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap-grid-4col);
	text-align: left;
}

.ceramic-ir-advantage__item {
	border-top: 1px solid var(--border-warm);
	padding-top: 24px;
}

.ceramic-ir-advantage__icon {
	display: block;
	color: var(--color-red);
	margin-bottom: 18px;
}

.ceramic-ir-advantage .ceramic-ir-advantage__item-title {
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	font-weight: var(--fw-extrabold);
	color: var(--color-red);
	margin-bottom: 8px;
}

.ceramic-ir-advantage__item-desc {
	font-family: var(--font-primary);
	font-size: var(--fs-body-small);
	line-height: 1.6;
	color: var(--text-secondary);
}

.ceramic-ir-comparison {
	background: var(--color-bg-neutral);
	border-top: 1px solid var(--border-light);
}

.ceramic-ir-comparison__inner {
	max-width: var(--site-container);
	margin: 0 auto;
	padding: var(--space-section-standard) var(--gutter-desktop);
	box-sizing: border-box;
	text-align: center;
}

.ceramic-ir-comparison .ceramic-ir-comparison__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-h2-sub);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-heading);
	color: var(--color-navy);
	margin: 0 auto 20px;
}

.ceramic-ir-comparison__intro {
	font-family: var(--font-primary);
	font-size: 18px;
	line-height: var(--lh-body);
	color: var(--text-body-muted);
	max-width: 620px;
	margin: 0 auto 48px;
}

.ceramic-ir-comparison__table-wrap {
	/* The brief's own explicit fallback for narrow screens — the table
	   scrolls within this wrapper, never the page itself. */
	overflow-x: auto;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	background: var(--color-bg-white);
	box-shadow: var(--shadow-card-rest);
}

.ceramic-ir-comparison__table {
	width: 100%;
	border-collapse: collapse;
	/* 480px keeps every column readable rather than letting them
	   compress to nothing above the mobile breakpoint below, where the
	   wrapper's own overflow-x:auto takes over instead. */
	min-width: 480px;
	text-align: left;
}

.ceramic-ir-comparison__table th,
.ceramic-ir-comparison__table td {
	padding: 16px 24px;
	border-bottom: 1px solid var(--border-subtle);
	font-family: var(--font-primary);
	font-size: var(--fs-body-small);
	line-height: 1.5;
}

.ceramic-ir-comparison__table tbody tr:last-child th,
.ceramic-ir-comparison__table tbody tr:last-child td {
	border-bottom: 0;
}

.ceramic-ir-comparison__table thead th {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-meta);
	color: var(--color-red);
	background: var(--color-bg-neutral);
	border-bottom: 1px solid var(--border-light);
}

.ceramic-ir-comparison__table tbody th {
	font-weight: var(--fw-extrabold);
	color: var(--color-navy);
	white-space: nowrap;
}

.ceramic-ir-comparison__table tbody td {
	color: var(--text-body-muted);
}

/* ---- Customization CTA ---- */

.product-customization {
	background: var(--color-navy);
	color: var(--text-on-dark);
	position: relative;
	overflow: hidden;
}

.product-customization::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Same grid-line texture already used identically by Contact and the
	   Product Archive's own CTA section (rgba(143,166,201,.06), 56px) —
	   kept as its own per-file literal, consistent with how the Archive
	   CTA also re-declared it rather than sharing a cross-file rule. */
	background-image: linear-gradient(rgba(143, 166, 201, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143, 166, 201, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

.product-customization__inner {
	max-width: var(--site-container);
	margin: 0 auto;
	padding: var(--space-section-standard) var(--gutter-desktop);
	box-sizing: border-box;
	text-align: center;
	position: relative;
}

.product-customization__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-pink-accent);
	margin-bottom: 24px;
}

.product-customization .product-customization__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-h2-feature);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-heading);
	color: var(--text-on-dark);
	max-width: 720px;
	margin: 0 auto 24px;
}

.product-customization__desc {
	font-family: var(--font-primary);
	font-size: 18px;
	line-height: var(--lh-body);
	color: var(--text-on-dark-body);
	/* 620px is this element's own exact measured max-width — distinct
	   from Product Archive's own CTA paragraph (600px), not a substitute
	   for it. */
	max-width: 620px;
	margin: 0 auto 44px;
}

.product-customization__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.product-customization .product-customization__button {
	display: inline-block;
	padding: var(--pad-button-primary);
	font-family: var(--font-primary);
	font-size: 15.5px;
	font-weight: var(--fw-extrabold);
	text-decoration: none;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.product-customization .product-customization__button--primary {
	background: var(--color-red);
	color: var(--text-on-dark);
	border: 1px solid var(--color-red);
}

.product-customization .product-customization__button--primary:hover,
.product-customization .product-customization__button--primary:focus-visible {
	background: var(--text-on-dark);
	color: var(--color-navy);
	border-color: var(--text-on-dark);
}

.product-customization .product-customization__button--secondary {
	color: var(--text-on-dark);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.product-customization .product-customization__button--secondary:hover,
.product-customization .product-customization__button--secondary:focus-visible {
	border-color: var(--text-on-dark);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-on-dark);
}

/* ---- Related Products ---- */

.related-products {
	background: var(--color-bg-neutral);
	background-image: radial-gradient(rgba(20, 40, 90, 0.05) 1px, transparent 1px);
	background-size: 28px 28px;
}

.related-products__inner {
	/* 120px bottom is this element's own exact measured value — distinct
	   from Product Archive's own grid section (130px), not a substitute
	   for it. */
	padding: var(--space-section-standard) var(--gutter-desktop) 120px;
	box-sizing: border-box;
}

.related-products__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 56px;
	flex-wrap: wrap;
}

.related-products__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-red);
	margin-bottom: 20px;
}

.related-products .related-products__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-h2-sub);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-heading);
	color: var(--color-navy);
	margin: 0;
}

.related-products .related-products__view-all {
	flex: none;
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.1em;
	color: var(--color-blue-link-dark);
	border-bottom: 2px solid var(--color-red);
	padding-bottom: 6px;
}

.related-products .related-products__view-all:hover {
	color: var(--color-red);
}

.related-products__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap-grid-4col);
}

/* Card variant for this page only — image tray/body geometry measured
   from this design's own related-card markup, distinct from Home's
   (290px/28px 30px 30px/10px) and Archive's (270px/26px 28px 28px/12px).
   Base look (border/radius/shadow/hover) matches both exactly, reproduced
   here since this file never loads alongside home.css or
   archive-product.css. */

.related-products__grid .product-card {
	background: var(--color-bg-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-card-rest);
	transition: box-shadow var(--transition-standard), transform var(--transition-standard);
	color: inherit;
	text-decoration: none;
}

.related-products__grid .product-card:hover,
.related-products__grid .product-card:focus-visible {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(var(--translate-card-hover));
	color: inherit;
}

.related-products__grid .product-card:hover .product-card__title,
.related-products__grid .product-card:focus-visible .product-card__title {
	color: var(--color-blue-link);
}

.related-products__grid .product-card:hover .product-card__img,
.related-products__grid .product-card:focus-visible .product-card__img {
	transform: scale(1.03);
}

.related-products__grid .product-card__image {
	background: var(--color-bg-tray);
	height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	box-sizing: border-box;
}

.related-products__grid .product-card__img {
	max-width: 100%;
	max-height: 100%;
	display: block;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--transition-standard);
}

.related-products__grid .product-card__body {
	padding: 26px 28px 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.related-products__grid .product-card .product-card__title {
	font-family: var(--font-primary);
	/* 19px is this element's own exact measured size — distinct from
	   --fs-card-title (20px), not a substitute for it. */
	font-size: 19px;
	font-weight: var(--fw-extrabold);
	color: var(--color-navy);
	margin: 0;
	transition: color var(--transition-standard);
}

.related-products__grid .product-card__desc {
	font-family: var(--font-primary);
	font-size: var(--fs-body-small);
	line-height: 1.6;
	color: var(--text-secondary);
	flex: 1;
	margin: 0;
}

.related-products__grid .product-card__link {
	font-family: var(--font-primary);
	font-size: var(--fs-body-small);
	font-weight: var(--fw-bold);
	color: var(--color-blue-link);
	margin-top: 6px;
}

/* ---- Final CTA ---- */

.product-final-cta {
	background: var(--color-bg-white);
	border-top: 1px solid var(--border-light);
}

.product-final-cta__inner {
	max-width: var(--site-container);
	margin: 0 auto;
	/* 120px is this element's own exact measured padding — distinct from
	   --space-section-standard (110px), not a substitute for it. */
	padding: 120px var(--gutter-desktop);
	box-sizing: border-box;
	text-align: center;
}

.product-final-cta .product-final-cta__heading {
	font-family: var(--font-primary);
	font-size: var(--fs-h2-feature);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-heading);
	color: var(--color-navy);
	max-width: 800px;
	margin: 0 auto 20px;
}

.product-final-cta__desc {
	font-family: var(--font-primary);
	font-size: 18px;
	line-height: var(--lh-body);
	color: var(--text-body-muted);
	max-width: 520px;
	margin: 0 auto 40px;
}

.product-final-cta .product-final-cta__button {
	display: inline-block;
	/* 18px 44px is this element's own exact measured padding — distinct
	   from --pad-button-primary (17px 36px), not a substitute for it. */
	padding: 18px 44px;
	background: var(--color-red);
	color: var(--text-on-dark);
	font-family: var(--font-primary);
	/* 16px is this element's own exact measured size — a one-off. */
	font-size: 16px;
	font-weight: var(--fw-extrabold);
	text-decoration: none;
	transition: background var(--transition-fast);
}

.product-final-cta .product-final-cta__button:hover,
.product-final-cta .product-final-cta__button:focus-visible {
	background: var(--color-navy);
	color: var(--text-on-dark);
}

/* ---- Responsive ----
 * The approved design has zero @media queries anywhere in the design
 * folder (confirmed by grep, same check repeated every section this
 * project has built). The collapses below reuse the same patterns already
 * established for every other section on this site. */

@media (max-width: 1024px) {
	.product-hero__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.product-hero__image {
		order: -1;
	}

	.product-overview__inner {
		grid-template-columns: 1fr 1fr;
		row-gap: 24px;
	}

	.product-applications__grid {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 24px;
	}

	.product-features__inner,
	.product-specs__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.related-products__grid {
		grid-template-columns: 1fr 1fr;
	}

	.ceramic-ir-advantage__grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 32px;
	}
}

@media (max-width: 768px) {
	.product-hero__inner {
		padding: 64px var(--gutter-mobile) 48px;
	}

	.product-hero .product-hero__title {
		font-size: 44px;
	}

	.product-hero__image {
		padding: 32px;
		min-height: 320px;
	}

	.product-hero__img {
		height: 260px;
	}

	.product-overview__inner {
		grid-template-columns: 1fr;
		padding: var(--gutter-mobile);
	}

	.product-applications__inner,
	.product-features__inner,
	.product-specs__inner,
	.product-customization__inner,
	.related-products__inner,
	.product-final-cta__inner,
	.ceramic-ir-advantage__inner,
	.ceramic-ir-comparison__inner {
		padding-left: var(--gutter-mobile);
		padding-right: var(--gutter-mobile);
	}

	.product-applications__grid {
		grid-template-columns: 1fr 1fr;
	}

	.ceramic-ir-advantage__grid {
		grid-template-columns: 1fr;
		row-gap: 28px;
		text-align: center;
	}

	.ceramic-ir-advantage__icon {
		margin-left: auto;
		margin-right: auto;
	}

	.product-features__grid {
		grid-template-columns: 1fr;
	}

	.product-specs__row {
		grid-template-columns: 1fr;
	}

	.product-specs__key {
		border-right: 0;
		border-bottom: 1px solid var(--border-subtle);
	}

	.related-products__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.related-products__grid {
		grid-template-columns: 1fr;
	}

	.product-customization .product-customization__heading,
	.related-products .related-products__heading,
	.product-final-cta .product-final-cta__heading {
		font-size: 36px;
	}

	.product-customization__actions {
		flex-direction: column;
	}
}