/* ==========================================================================
   HCT product page  —  .hct-product
   ==========================================================================

   Presentation for the product template in template-parts/product/. Loaded on
   single product requests only (see includes/assets.php), so nothing here can
   reach a legacy Elementor page.

   The page wrapper carries `.hct-product.hct-foundation`:
     .hct-foundation  supplies the container width and padding (layout.css) and
                      re-maps the runtime colour aliases to the brand palette
                      (variables.css). Neither is repeated here.
     .hct-product     scopes everything in this file.

   Rule for humans and agents: no colours, radii or control heights are typed
   inline. Everything is read from assets/css/variables.css. CSS custom
   properties cannot be used in @media conditions, so the breakpoints below
   repeat the literals documented in variables.css:
     1180px  1024px-class tablet: container gutter 24px
     1000px  two column blocks collapse
      767px  mobile type scale, container gutter 16px
      560px  single column grids
      390px  smallest supported viewport

   Selling model: HCT is a B2B RFQ site. There is no price block, no add to
   cart and no stock badge anywhere in this template, by design.

   Reading order of this file follows the reading order of the page:
     host column · breadcrumb · hero (gallery + identity) · section index ·
     section shell · specification table · product information · technical
     drawing · designation breakdown · interchange · applications · related ·
     RFQ · responsive.
   ========================================================================== */

.hct-product {
	color: var(--hct-text);
}

/* --------------------------------------------------------------------------
   Host column — the WooCommerce summary Astra still floats
   --------------------------------------------------------------------------
   The template renders the whole page through the single product summary, so
   `.hct-product` lives inside `div.summary.entry-summary`. From 921px up Astra
   gives that summary a right float and roughly 46% of the row for the stock
   gallery-beside-summary layout. The template has no gallery column, so that
   width would leave two thirds of the desktop canvas empty.

   The column is neutralised only while it actually contains the HCT page, so a
   WooCommerce summary rendered any other way keeps the stock Astra behaviour.
   `:has()` is used instead of an ancestor class because the summary wrapper
   comes from the WooCommerce template and carries no HCT hook.

   Astra and WooCommerce both win that column with selectors that carry the
   `#content` ID (`.woocommerce #content div.product div.summary` in
   `woocommerce-layout-grid.min.css`, and the same ancestry inside Astra's inline
   `@media (min-width: 922px)` block). A class-only selector is outranked by
   those IDs no matter how far right the cascade rule sits, so the same `#content`
   ancestry is mirrored here. The bare class selector is kept last as a fallback
   for any other single-product wrapper that does not use `#content`. */
.woocommerce #content div.product div.summary.entry-summary:has(> .hct-product),
.woocommerce #content .ast-woocommerce-container div.product div.summary.entry-summary:has(> .hct-product),
.woocommerce-page #content div.product div.summary.entry-summary:has(> .hct-product),
.woocommerce-page #content .ast-woocommerce-container div.product div.summary.entry-summary:has(> .hct-product),
.woocommerce div.product div.summary.entry-summary:has(> .hct-product) {
	float: none;
	width: 100%;
	max-width: none;
}

/* --------------------------------------------------------------------------
   Breadcrumb — first item of the page structure (see includes/product-page.php)
   -------------------------------------------------------------------------- */
.hct-breadcrumb {
	margin: 0 0 var(--hct-space-lg);
	font-size: var(--hct-fs-2xs);
	line-height: var(--hct-lh-snug);
	color: var(--hct-muted);
}

.hct-breadcrumb a {
	color: var(--hct-muted);
	text-decoration: none;
}

.hct-breadcrumb a:hover,
.hct-breadcrumb a:focus-visible {
	color: var(--hct-primary);
	text-decoration: underline;
}

.hct-breadcrumb__sep {
	margin-inline: var(--hct-space-3xs);
	color: var(--hct-subtle);
}

/* --------------------------------------------------------------------------
   Hero — the bearing on the left, its identity and its envelope on the right
   --------------------------------------------------------------------------
   A catalogue spread, not a shop card: the picture takes a little under half
   the row, the identity column a little over half, and the two actions close
   the identity column. The proportions are expressed as fr weights so the row
   divides the space it actually has rather than a percentage of the viewport. */
.hct-product__hero {
	display: grid;
	grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	gap: var(--hct-space-xl);
	align-items: start;
}

.hct-product__gallery-column {
	min-width: 0;
}

.hct-product__intro {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hct-product__eyebrow {
	margin: 0 0 var(--hct-space-2xs);
}

.hct-product .hct-product__title {
	margin: 0;
	font-size: var(--hct-fs-3xl);
	font-weight: var(--hct-fw-heavy);
	line-height: var(--hct-lh-tight);
	letter-spacing: var(--hct-ls-tight);
	color: var(--hct-primary);
	overflow-wrap: break-word;
}

.hct-product__subtitle {
	margin: var(--hct-space-3xs) 0 0;
	font-size: var(--hct-fs-body);
	font-weight: var(--hct-fw-medium);
	line-height: var(--hct-lh-snug);
	color: var(--hct-muted);
}

.hct-product__summary {
	margin-top: var(--hct-space-sm);
	font-size: var(--hct-fs-lead);
	line-height: var(--hct-lh-body);
	color: var(--hct-muted);
}

.hct-product__summary > *:first-child {
	margin-top: 0;
}

.hct-product__summary > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Gallery — product view, further views, and the drawing as one view among them
   --------------------------------------------------------------------------
   The technical drawing is a document, not a photograph of the part, so the
   gallery never borrows it for the product view (see gallery.php). Only a
   recorded picture fills the stage; an unrecorded one shows the neutral outline
   and says so in the caption. */
.hct-product__gallery {
	display: flex;
	flex-direction: column;
	gap: var(--hct-space-2xs);
	min-width: 0;
}

.hct-product__stage {
	position: relative;
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
	overflow: hidden;
}

.hct-product__slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--hct-space-2xs);
	margin: 0;
	padding: var(--hct-space-md);
	aspect-ratio: 4 / 3;
}

/* The `hidden` attribute is set by the template on every slide but the first.
   The UA rule for it is outranked by the display above, so it is restated here
   rather than left to chance. */
.hct-product__slide[hidden] {
	display: none;
}

.hct-product__zoom {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.hct-product__image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Drawn, not photographed: the neutral outline stands in for a picture nobody
   has recorded yet, so it is deliberately schematic and quiet. */
.hct-product__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--hct-border);
}

.hct-product__placeholder-art {
	width: 62%;
	max-width: 240px;
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
}

.hct-product__caption {
	flex: none;
	font-size: var(--hct-fs-2xs);
	line-height: var(--hct-lh-snug);
	letter-spacing: var(--hct-ls-index);
	text-transform: uppercase;
	color: var(--hct-muted);
}

.hct-product__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hct-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-product__thumb {
	margin: 0;
	min-width: 0;
}

.hct-product__thumb-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hct-space-3xs);
	width: 88px;
	padding: var(--hct-space-3xs);
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius-sm);
	background: var(--hct-background);
	color: var(--hct-muted);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.hct-product__thumb-button img,
.hct-product__thumb-art {
	display: block;
	width: 100%;
	height: 56px;
	object-fit: contain;
}

.hct-product__thumb-art {
	fill: none;
	stroke: var(--hct-border);
	stroke-width: 6;
}

.hct-product__thumb-label {
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-eyebrow);
	text-transform: uppercase;
}

.hct-product__thumb-button:hover,
.hct-product__thumb-button:focus-visible {
	border-color: var(--hct-subtle);
	color: var(--hct-text);
}

.hct-product__thumb-button.is-active {
	border-color: var(--hct-primary);
	color: var(--hct-primary);
}

/* --------------------------------------------------------------------------
   Identity facts — designation, SKU, brand, series, type, configuration
   -------------------------------------------------------------------------- */
.hct-product__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hct-space-sm) var(--hct-space-md);
	margin: var(--hct-space-md) 0 0;
	padding: var(--hct-space-sm) 0 0;
	border-top: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-product__fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hct-product__fact dt {
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-index);
	text-transform: uppercase;
	color: var(--hct-muted);
}

.hct-product__fact dd {
	margin: 0;
	font-size: var(--hct-fs-sm);
	font-weight: var(--hct-fw-semibold);
	line-height: var(--hct-lh-snug);
	color: var(--hct-text);
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Quick specifications — four figures, and only four
   --------------------------------------------------------------------------
   The envelope and the one rating a bearing is chosen on. Every other figure
   keeps its single home in the Product information section below, so the hero
   states a summary and never becomes a second copy of the record. */
.hct-product__quick {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--hct-space-sm);
	margin: var(--hct-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.hct-product__quick-item {
	display: flex;
	flex-direction: column;
	gap: var(--hct-space-3xs);
	padding-top: var(--hct-space-xs);
	border-top: 2px solid var(--hct-primary);
	min-width: 0;
}

.hct-product__quick-label {
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: normal;
	text-transform: none;
	color: var(--hct-muted);
}

.hct-product__quick-value {
	font-size: var(--hct-fs-md);
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-heading);
	font-variant-numeric: tabular-nums;
	color: var(--hct-text);
	overflow-wrap: break-word;
}

.hct-product__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hct-space-2xs);
	margin-top: var(--hct-space-md);
	padding-top: var(--hct-space-md);
	border-top: var(--hct-border-width) solid var(--hct-border-hairline);
}

/* --------------------------------------------------------------------------
   Section index — the page is long, so it carries its own table of contents
   --------------------------------------------------------------------------
   Sticky from the collapsed two-column width up; below that the row scrolls
   horizontally instead, because a wrapped index on a phone costs more height
   than it saves in scrolling. Sections carry a scroll margin so a jump does not
   park the heading underneath the sticky bar. */
.hct-anchornav {
	position: sticky;
	top: 0;
	z-index: 30;
	margin-top: var(--hct-space-lg);
	border-top: var(--hct-border-width) solid var(--hct-border);
	border-bottom: var(--hct-border-width) solid var(--hct-border);
	background: var(--hct-background);
}

.hct-anchornav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hct-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-anchornav__item {
	margin: 0;
}

.hct-anchornav__link {
	display: inline-block;
	padding: var(--hct-space-xs) 0;
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-eyebrow);
	text-transform: uppercase;
	color: var(--hct-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

/* The entry for the band the reader is in. The script marks it while scrolling; a
   page without the script simply has no current entry. */
.hct-anchornav__link.is-active {
	color: var(--hct-primary);
	border-bottom-color: var(--hct-primary);
}

.hct-anchornav__link:hover,
.hct-anchornav__link:focus-visible {
	color: var(--hct-primary);
	border-bottom-color: var(--hct-primary);
}

/* --------------------------------------------------------------------------
   Section shell
   Every module after the hero is a band separated by a hairline, so the page
   reads like a datasheet rather than a stack of marketing boxes. The RFQ band
   draws its own panel, so it is excluded from the rule.
   -------------------------------------------------------------------------- */
.hct-product__section:not(.hct-rfq) {
	margin-top: var(--hct-space-xl);
	padding-top: var(--hct-space-md);
	border-top: var(--hct-border-width) solid var(--hct-border);
}

.hct-anchornav ~ .hct-product__section {
	margin-top: var(--hct-space-lg);
	padding-top: var(--hct-space-lg);
	border-top: 0;
}

/* Jump targets stop below the sticky index rather than under it. */
.hct-product__section,
.hct-product__hero {
	scroll-margin-top: 84px;
}

.hct-product .hct-product__section-title {
	margin: 0 0 var(--hct-space-md);
	font-size: var(--hct-fs-xl);
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-heading);
	letter-spacing: var(--hct-ls-tight);
	color: var(--hct-text);
}

.hct-product .hct-product__subheading {
	margin: var(--hct-space-md) 0 var(--hct-space-2xs);
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-eyebrow);
	text-transform: uppercase;
	color: var(--hct-muted);
}

.hct-product__lede {
	margin: 0 0 var(--hct-space-md);
	max-width: 78ch;
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-body);
	color: var(--hct-muted);
}

/* Standing caveat: used where a figure needs a qualification, not decoration. */
.hct-product__note {
	margin: var(--hct-space-md) 0 0;
	padding: var(--hct-space-xs) var(--hct-space-sm);
	border-left: 3px solid var(--hct-accent);
	border-radius: var(--hct-radius-sm);
	background: var(--hct-surface);
	font-size: var(--hct-fs-xs);
	line-height: var(--hct-lh-snug);
	color: var(--hct-muted);
}

/* --------------------------------------------------------------------------
   Specification table
   Shared by the technical record, the interchange list and the mass row.
   -------------------------------------------------------------------------- */
.hct-table-wrap {
	overflow-x: auto;
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
}

.hct-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-snug);
}

.hct-spec-table__row th,
.hct-spec-table__row td {
	padding: var(--hct-space-xs) var(--hct-space-md);
	border-bottom: var(--hct-border-width) solid var(--hct-border-hairline);
	vertical-align: top;
	text-align: left;
}

.hct-spec-table__label {
	width: 56%;
	font-weight: var(--hct-fw-medium);
	color: var(--hct-muted);
}

.hct-spec-table__value {
	font-weight: var(--hct-fw-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--hct-text);
	overflow-wrap: break-word;
	/* Some values are single unbreakable tokens — the source URL recorded
	   against the figures is one. `break-word` only wraps once a box is already
	   overflowing; it does not shrink the intrinsic min-content width an
	   auto-layout table uses to size a column, so a long URL would widen the
	   whole table past the phone viewport. `anywhere` does count towards
	   min-content, which lets the column fall back to the widest real word and
	   keeps the table inside `.hct-table-wrap` instead of making it scroll. */
	overflow-wrap: anywhere;
}

.hct-spec-table__row:last-child th,
.hct-spec-table__row:last-child td {
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Product information — boundary envelope, ratings, speeds, properties, mass
   --------------------------------------------------------------------------
   One table per group instead of a single 26-row grid, so each figure is read
   inside the question it answers. The groups sit in a two column grid where the
   width allows it; a group table is a list of label/value pairs, not a box, so
   the heavy border of the standalone table is dropped inside a group. */
.hct-info__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hct-space-sm);
	margin-bottom: var(--hct-space-md);
}

.hct-info__head .hct-product__section-title {
	margin-bottom: 0;
}

.hct-info__groups {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hct-space-lg) var(--hct-space-xl);
	align-items: start;
}

.hct-product .hct-info__group-title {
	margin: 0 0 var(--hct-space-2xs);
	padding-bottom: var(--hct-space-3xs);
	border-bottom: var(--hct-border-width) solid var(--hct-border);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-eyebrow);
	text-transform: uppercase;
	color: var(--hct-primary);
}

.hct-info__group .hct-table-wrap {
	border: 0;
	border-radius: 0;
	background: transparent;
}

.hct-info__group .hct-spec-table__row th,
.hct-info__group .hct-spec-table__row td {
	padding-inline: 0;
}

.hct-info__group .hct-spec-table__row:last-child th,
.hct-info__group .hct-spec-table__row:last-child td {
	border-bottom: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-info__basis {
	margin: var(--hct-space-2xs) 0 0;
	font-size: var(--hct-fs-2xs);
	line-height: var(--hct-lh-snug);
	color: var(--hct-muted);
}

/* Design properties read as a definition list: the recorded code is the fact,
   the wording after it is the explanation the registry already carries. */
.hct-props {
	display: grid;
	gap: var(--hct-space-2xs);
	margin: 0;
}

.hct-props__item {
	display: grid;
	grid-template-columns: 56% minmax(0, 1fr);
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hct-space-2xs);
	padding-bottom: var(--hct-space-3xs);
	border-bottom: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-props__label {
	font-size: var(--hct-fs-sm);
	color: var(--hct-muted);
}

.hct-props__value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--hct-space-2xs);
	margin: 0;
	text-align: left;
}

.hct-props__code {
	font-size: var(--hct-fs-sm);
	font-weight: var(--hct-fw-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--hct-text);
}

.hct-props__note {
	font-size: var(--hct-fs-2xs);
	color: var(--hct-muted);
}

.hct-info__units-note {
	margin: var(--hct-space-md) 0 0;
	font-size: var(--hct-fs-2xs);
	line-height: var(--hct-lh-snug);
	color: var(--hct-muted);
}

/* One quiet line of provenance where the big source card used to stand. The
   admin fields behind it are untouched; only the presentation changed. */
.hct-info__reference {
	margin: var(--hct-space-2xs) 0 0;
	font-size: var(--hct-fs-2xs);
	line-height: var(--hct-lh-snug);
	color: var(--hct-muted);
}

.hct-info__reference .hct-link {
	overflow-wrap: anywhere;
}

/* Unit switch — Metric / Imperial. Presentation only: the database keeps the
   metric figure and the script rewrites the rendered text from the data
   attributes next to it, so no second data set is ever created. */
.hct-units {
	display: inline-flex;
	align-items: center;
	gap: var(--hct-space-2xs);
	flex: none;
}

.hct-units__legend {
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-eyebrow);
	text-transform: uppercase;
	color: var(--hct-muted);
}

.hct-units__button {
	padding: var(--hct-space-3xs) var(--hct-space-xs);
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius-sm);
	background: var(--hct-background);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-index);
	text-transform: uppercase;
	color: var(--hct-muted);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.hct-units__button:hover,
.hct-units__button:focus-visible {
	border-color: var(--hct-subtle);
	color: var(--hct-text);
}

.hct-units__button.is-active {
	border-color: var(--hct-primary);
	background: var(--hct-primary);
	color: var(--hct-white);
}

/* --------------------------------------------------------------------------
   Technical drawing
   The drawing is read at the size its dimensions need, so it takes the wider
   column and the actions take the narrower one.
   -------------------------------------------------------------------------- */
.hct-drawing__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: var(--hct-space-xl);
	align-items: start;
}

.hct-drawing__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: var(--hct-space-md);
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
	aspect-ratio: 16 / 10;
}

.hct-drawing__image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* A drawing that is a PDF is not an image, so the figure states the file rather
   than pretending to preview it. */
.hct-drawing__file {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: var(--hct-radius);
	background: var(--hct-surface);
	color: var(--hct-primary);
}

.hct-drawing__file-glyph {
	width: 40px;
	height: 40px;
}

.hct-drawing__caption {
	display: none;
}

.hct-drawing__side {
	display: flex;
	flex-direction: column;
	gap: var(--hct-space-sm);
	min-width: 0;
}

.hct-drawing__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hct-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-drawing__downloads {
	margin-top: var(--hct-space-xs);
	padding-top: var(--hct-space-sm);
	border-top: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-product .hct-drawing__subheading {
	margin: 0 0 var(--hct-space-2xs);
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-eyebrow);
	text-transform: uppercase;
	color: var(--hct-muted);
}

.hct-drawing__cad {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--hct-space-2xs);
	margin: var(--hct-space-sm) 0 0;
	padding-top: var(--hct-space-xs);
	border-top: var(--hct-border-width) solid var(--hct-border-hairline);
	font-size: var(--hct-fs-2xs);
	color: var(--hct-muted);
}

.hct-drawing__cad-label {
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-index);
	text-transform: uppercase;
}

.hct-drawing__cad-state {
	color: var(--hct-muted);
}

.hct-drawing__revision {
	margin: 0;
	font-size: var(--hct-fs-2xs);
	color: var(--hct-muted);
}

/* Technical downloads — a plain inventory of the files that exist. There is no
   button for a document that was never published. */
.hct-downloads {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-downloads__item + .hct-downloads__item {
	border-top: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-downloads__link {
	display: flex;
	align-items: center;
	gap: var(--hct-space-sm);
	padding: var(--hct-space-xs) 0;
	color: var(--hct-text);
	text-decoration: none;
}

.hct-downloads__link:hover,
.hct-downloads__link:focus-visible {
	color: var(--hct-primary);
}

.hct-downloads__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--hct-radius-sm);
	background: var(--hct-surface);
	color: var(--hct-primary);
}

.hct-downloads__glyph {
	width: 18px;
	height: 18px;
}

.hct-downloads__link:hover .hct-downloads__icon,
.hct-downloads__link:focus-visible .hct-downloads__icon {
	background: var(--hct-primary);
	color: var(--hct-white);
}

.hct-downloads__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hct-downloads__label {
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-semibold);
	color: var(--hct-text);
}

.hct-downloads__name {
	font-size: var(--hct-fs-2xs);
	color: var(--hct-muted);
	overflow-wrap: anywhere;
}

.hct-downloads__meta {
	flex: none;
	font-size: var(--hct-fs-3xs);
	font-variant-numeric: tabular-nums;
	color: var(--hct-muted);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Overview prose and the designation breakdown
   -------------------------------------------------------------------------- */
.hct-product__prose {
	max-width: 78ch;
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-body);
	color: var(--hct-text);
}

.hct-product__prose > * + * {
	margin-top: var(--hct-space-sm);
}

.hct-product__prose h2,
.hct-product__prose h3,
.hct-product__prose h4 {
	margin-bottom: 0;
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-heading);
	color: var(--hct-primary);
}

.hct-product__prose h2 {
	font-size: var(--hct-fs-lg);
}

.hct-product__prose h3 {
	font-size: var(--hct-fs-md);
}

.hct-product__prose h4 {
	font-size: var(--hct-fs-body);
}

.hct-product__prose ul,
.hct-product__prose ol {
	padding-left: var(--hct-space-md);
}

.hct-product__prose li + li {
	margin-top: var(--hct-space-3xs);
}

.hct-product__prose a {
	color: var(--hct-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.hct-product__prose a:hover,
.hct-product__prose a:focus-visible {
	color: var(--hct-primary-hover);
}

.hct-product__prose blockquote {
	margin: 0;
	padding: var(--hct-space-sm) var(--hct-space-md);
	border-left: 3px solid var(--hct-primary);
	background: var(--hct-surface);
}

.hct-product__prose img {
	max-width: 100%;
	height: auto;
}

.hct-product__prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hct-fs-xs);
}

.hct-product__prose th,
.hct-product__prose td {
	padding: var(--hct-space-2xs) var(--hct-space-xs);
	border-bottom: var(--hct-border-width) solid var(--hct-border-hairline);
	text-align: left;
}

/* Alias kept because older content and the legacy shell still carry it. */
.hct-prose {
	max-width: 78ch;
	font-size: var(--hct-fs-sm);
	line-height: var(--hct-lh-body);
	color: var(--hct-text);
}

/* The designation read part by part. Each part is a token in the catalogue's
   own type, with the role the recorded fields support printed underneath; a part
   nothing explains keeps a dash rather than an invented meaning. */
.hct-designation-breakdown {
	margin-top: var(--hct-space-lg);
	padding-top: var(--hct-space-md);
	border-top: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-product .hct-designation-breakdown__title {
	margin: 0 0 var(--hct-space-3xs);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-eyebrow);
	text-transform: uppercase;
	color: var(--hct-primary);
}

.hct-designation-breakdown__lede {
	margin: 0 0 var(--hct-space-md);
	max-width: 78ch;
	font-size: var(--hct-fs-2xs);
	line-height: var(--hct-lh-snug);
	color: var(--hct-muted);
}

.hct-designation-breakdown__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-designation-breakdown__part {
	display: flex;
	flex-direction: column;
	gap: var(--hct-space-3xs);
	min-width: 96px;
	padding: 0 var(--hct-space-md) 0 0;
	margin-right: var(--hct-space-md);
	border-right: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-designation-breakdown__part:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: 0;
}

.hct-designation-breakdown__token {
	font-size: var(--hct-fs-xl);
	font-weight: var(--hct-fw-heavy);
	line-height: var(--hct-lh-heading);
	letter-spacing: var(--hct-ls-tight);
	font-variant-numeric: tabular-nums;
	color: var(--hct-primary);
	overflow-wrap: break-word;
}

.hct-designation-breakdown__delimiter {
	color: var(--hct-subtle);
}

.hct-designation-breakdown__role {
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-eyebrow);
	text-transform: uppercase;
	color: var(--hct-muted);
}

.hct-designation-breakdown__role--unknown {
	color: var(--hct-subtle);
}

.hct-designation-breakdown__note {
	font-size: var(--hct-fs-2xs);
	line-height: var(--hct-lh-snug);
	color: var(--hct-muted);
}

.hct-designation-breakdown__variant {
	margin: var(--hct-space-sm) 0 0;
	font-size: var(--hct-fs-2xs);
	color: var(--hct-muted);
}

/* --------------------------------------------------------------------------
   Interchange and cross-reference
   -------------------------------------------------------------------------- */
.hct-interchange__table {
	min-width: 640px;
}

.hct-interchange__table thead th {
	padding: var(--hct-space-xs) var(--hct-space-md);
	border-bottom: var(--hct-border-width) solid var(--hct-border);
	background: var(--hct-surface);
	color: var(--hct-muted);
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-heavy);
	letter-spacing: var(--hct-ls-eyebrow);
	text-transform: uppercase;
	text-align: left;
}

.hct-interchange__table .hct-spec-table__value {
	width: auto;
	font-weight: var(--hct-fw-medium);
}

.hct-interchange__brand {
	font-weight: var(--hct-fw-semibold);
}

.hct-interchange__empty {
	color: var(--hct-subtle);
}

.hct-interchange__qualifier {
	display: block;
	margin-top: 2px;
	font-size: var(--hct-fs-3xs);
	color: var(--hct-muted);
}

.hct-relation {
	display: inline-block;
	padding: 2px var(--hct-space-2xs);
	border: var(--hct-border-width) solid var(--hct-primary);
	border-radius: var(--hct-radius-sm);
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-semibold);
	color: var(--hct-primary);
	white-space: nowrap;
}

/* A row that carries no relation word is shown as an unqualified cross-reference
   rather than being promoted to an equivalence. */
.hct-relation--unqualified {
	border-style: dashed;
	border-color: var(--hct-subtle);
	color: var(--hct-muted);
	white-space: normal;
}

.hct-designation {
	display: block;
	font-weight: var(--hct-fw-semibold);
}

.hct-designation__note {
	display: block;
	margin-top: 2px;
	font-size: var(--hct-fs-2xs);
	font-weight: var(--hct-fw-medium);
	color: var(--hct-muted);
}

/* --------------------------------------------------------------------------
   Applications and industries
   -------------------------------------------------------------------------- */
.hct-terms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--hct-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-terms__item {
	display: flex;
	flex-direction: column;
	gap: var(--hct-space-3xs);
	padding: 0 0 var(--hct-space-xs);
	border-bottom: var(--hct-border-width) solid var(--hct-border-hairline);
}

.hct-terms__group {
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-eyebrow);
	text-transform: uppercase;
	color: var(--hct-muted);
}

.hct-terms__link {
	font-size: var(--hct-fs-body);
	font-weight: var(--hct-fw-bold);
	line-height: var(--hct-lh-snug);
	color: var(--hct-primary);
}

a.hct-terms__link {
	text-decoration: none;
}

a.hct-terms__link:hover,
a.hct-terms__link:focus-visible {
	color: var(--hct-primary-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.hct-terms__description {
	font-size: var(--hct-fs-xs);
	line-height: var(--hct-lh-snug);
	color: var(--hct-muted);
}

/* --------------------------------------------------------------------------
   Related bearings
   -------------------------------------------------------------------------- */
.hct-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: var(--hct-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-cards__item {
	display: flex;
}

.hct-cards__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
	color: var(--hct-text);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hct-cards__link:hover,
.hct-cards__link:focus-visible {
	border-color: var(--hct-primary);
	box-shadow: var(--hct-shadow);
	color: var(--hct-text);
}

.hct-cards__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: var(--hct-space-sm);
	background: var(--hct-surface);
}

.hct-cards__image {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.hct-cards__body {
	display: flex;
	flex-direction: column;
	gap: var(--hct-space-3xs);
	padding: var(--hct-space-sm);
}

.hct-cards__title {
	font-size: var(--hct-fs-sm);
	font-weight: var(--hct-fw-heavy);
	color: var(--hct-primary);
}

.hct-cards__type {
	font-size: var(--hct-fs-2xs);
	color: var(--hct-muted);
}

.hct-cards__dims {
	font-size: var(--hct-fs-2xs);
	font-variant-numeric: tabular-nums;
	color: var(--hct-text);
}

/* --------------------------------------------------------------------------
   Request a Quote — the only prominent panel on the page
   -------------------------------------------------------------------------- */
.hct-product__section.hct-rfq {
	margin-top: var(--hct-space-lg);
	padding: var(--hct-space-lg);
	border: var(--hct-border-width) solid var(--hct-border);
	border-top: 3px solid var(--hct-accent);
	border-radius: var(--hct-radius);
	background: var(--hct-surface);
	scroll-margin-top: 84px;
}

.hct-rfq__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--hct-space-lg);
	align-items: start;
}

.hct-rfq__quantity {
	margin: 0 0 var(--hct-space-sm);
}

.hct-rfq__quantity-label {
	display: block;
	margin-bottom: var(--hct-space-3xs);
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-eyebrow);
	text-transform: uppercase;
	color: var(--hct-muted);
}

.hct-rfq__quantity-field {
	display: inline-flex;
	align-items: center;
	gap: var(--hct-space-2xs);
}

.hct-rfq__quantity-input {
	width: 8em;
	padding: var(--hct-space-3xs) var(--hct-space-2xs);
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius-input);
	background: var(--hct-background);
	font-family: inherit;
	font-size: var(--hct-fs-sm);
	font-weight: var(--hct-fw-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--hct-text);
}

.hct-rfq__quantity-input:focus-visible {
	border-color: var(--hct-primary);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.hct-rfq__quantity-unit {
	font-size: var(--hct-fs-xs);
	color: var(--hct-muted);
}

.hct-rfq__quantity-hint {
	margin: var(--hct-space-3xs) 0 0;
	font-size: var(--hct-fs-2xs);
	color: var(--hct-muted);
}

.hct-rfq__context {
	display: grid;
	gap: var(--hct-space-2xs);
	margin: 0 0 var(--hct-space-sm);
}

.hct-rfq__context-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--hct-space-2xs);
}

.hct-rfq__context-item dt {
	flex: none;
	min-width: 8.5em;
	font-size: var(--hct-fs-3xs);
	font-weight: var(--hct-fw-semibold);
	letter-spacing: var(--hct-ls-eyebrow);
	text-transform: uppercase;
	color: var(--hct-muted);
}

.hct-rfq__context-item dd {
	min-width: 0;
	margin: 0;
	font-size: var(--hct-fs-sm);
	font-weight: var(--hct-fw-semibold);
	overflow-wrap: anywhere;
}

.hct-rfq__carry {
	margin: 0;
	font-size: var(--hct-fs-2xs);
	color: var(--hct-muted);
}

.hct-rfq__action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hct-space-xs);
	padding: var(--hct-space-md);
	border: var(--hct-border-width) solid var(--hct-border);
	border-radius: var(--hct-radius);
	background: var(--hct-background);
}

.hct-rfq__form {
	width: 100%;
}

.hct-rfq__fallback {
	margin: 0;
	font-size: var(--hct-fs-2xs);
	color: var(--hct-muted);
}

.hct-rfq__contact {
	display: grid;
	gap: var(--hct-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hct-rfq__contact li {
	display: flex;
	align-items: center;
	gap: var(--hct-space-2xs);
	font-size: var(--hct-fs-sm);
}

.hct-rfq__contact-icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--hct-primary);
}

/* --------------------------------------------------------------------------
   Responsive
   The round is checked at 1440 / 1024 / 768 / 390. Two interior steps (1180 and
   560) keep the grid from staying stranded between those widths. Media queries
   cannot read custom properties, so the widths stay literal here and match the
   set documented in variables.css.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.hct-product__hero {
		gap: var(--hct-space-lg);
	}

	.hct-drawing__layout {
		gap: var(--hct-space-lg);
	}

	.hct-cards {
		grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
	}
}

/* The two-column compositions fold before the tablet width, so 1024 already reads
   as a single stacked page rather than a squeezed pair. The hero stacks in DOM
   order — gallery, then identity, then the actions — which is the order the round
   asks for on a phone. */
@media (max-width: 1000px) {
	.hct-product__hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.hct-product__gallery-column {
		max-width: 520px;
	}

	.hct-drawing__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.hct-drawing__figure {
		max-width: 640px;
	}

	.hct-rfq__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The index scrolls sideways rather than following the reader here. */
	.hct-anchornav {
		position: static;
	}

	.hct-anchornav__list {
		flex-wrap: nowrap;
		gap: var(--hct-space-md);
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.hct-anchornav__item {
		flex: none;
	}
}

/* Tablet portrait and phone landscape. */
@media (max-width: 767px) {
	.hct-product .hct-product__title {
		font-size: var(--hct-fs-2xl-mobile);
	}

	.hct-product .hct-product__section-title {
		font-size: var(--hct-fs-xl-mobile);
	}

	.hct-product__section:not(.hct-rfq),
	.hct-anchornav ~ .hct-product__section {
		margin-top: var(--hct-space-lg);
		padding-top: var(--hct-space-sm);
	}

	.hct-product__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hct-product__quick {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hct-product__gallery-column {
		max-width: none;
	}

	.hct-product__quick-value {
		font-size: var(--hct-fs-body);
	}

	.hct-info__groups {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hct-space-lg);
	}

	.hct-drawing__figure {
		max-width: none;
		aspect-ratio: 4 / 3;
	}

	.hct-terms {
		grid-template-columns: minmax(0, 1fr);
	}

	.hct-cards {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}

	.hct-product__section.hct-rfq {
		margin-top: var(--hct-space-lg);
		padding: var(--hct-space-md);
	}

	.hct-rfq__action .hct-button {
		width: 100%;
	}
}

/* Phone portrait. */
@media (max-width: 560px) {
	.hct-product__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.hct-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hct-downloads__link {
		flex-wrap: wrap;
	}

	.hct-downloads__meta {
		width: 100%;
		white-space: normal;
	}

	.hct-designation-breakdown__part {
		min-width: 72px;
		padding-right: var(--hct-space-sm);
		margin-right: var(--hct-space-sm);
	}

	.hct-drawing__actions .hct-button {
		width: 100%;
	}

	.hct-rfq__context-item {
		display: block;
	}

	.hct-rfq__context-item dt {
		display: block;
		min-width: 0;
	}
}

/* Narrowest width the round is checked at. */
@media (max-width: 390px) {
	.hct-product .hct-product__title {
		font-size: var(--hct-fs-xl-mobile);
	}

	.hct-product__quick {
		grid-template-columns: minmax(0, 1fr);
	}

	.hct-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.hct-spec-table {
		font-size: var(--hct-fs-xs);
	}

	.hct-product__section.hct-rfq {
		padding: var(--hct-space-sm);
	}

	.hct-product__actions .hct-button,
	.hct-rfq__action .hct-button {
		width: 100%;
	}
}

/* Compact enquiry when the action opens a separate form or email. */
.hct-rfq--compact .hct-rfq__inner { align-items: center; }
.hct-rfq--compact .hct-rfq__action { padding: 0; border: 0; background: transparent; }
.hct-product .hct-info__group-title { font-size: 16px; line-height: 1.5; text-transform: none; letter-spacing: normal; }
.hct-product .hct-spec-table { margin: 0; border: 0; }
.hct-product .hct-info__table th, .hct-product .hct-info__table td { border-left: 0; border-right: 0; border-top: 0; }
.hct-product__quick-label { min-height: 2.8em; line-height: 1.4; }

.hct-product__enquiry {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-top: var(--hct-space-md);
	scroll-margin-top: 100px;
}
.hct-product__enquiry .hct-rfq__quantity { margin: 0; }
.hct-product__enquiry .hct-rfq__quantity-input { width: 104px; min-height: 50px; }
.hct-product__enquiry .hct-product__actions {
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}
.hct-product__enquiry .hct-button { width: 188px; justify-content: center; min-height: 50px; padding: 12px 16px; font-size: 13px; }
@media (max-width: 560px) {
	.hct-product__enquiry .hct-product__actions { flex: 1 1 100%; flex-wrap: wrap; }
}