/**
 * Products page styles — matches products_catalog_rcc_industrial_pivot/code.html precisely.
 * Loaded only on the Products page (see functions.php).
 *
 * Note on block-gap: every custom group below that arranges multiple children
 * via flex/grid (not simple vertical stacking) gets an explicit `margin: 0`
 * reset, because WordPress's default "flow" layout injects
 * `margin-block-start` on every child after the first
 * (`.is-layout-flow > * + *`), which creates unintended vertical offsets in
 * a real flex/grid row. This was the root cause of alignment bugs found on
 * the Home and About pages; resetting it here from the start avoids repeating
 * that bug on this page.
 */

.rcc-products-container {
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: 40px var(--wp--preset--spacing--lg);
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.rcc-products-hero {
	margin-bottom: var(--wp--preset--spacing--xl);
}
.rcc-products-hero__row {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--md);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	padding-bottom: var(--wp--preset--spacing--md);
}
@media (min-width: 768px) {
	.rcc-products-hero__row {
		flex-direction: row;
		align-items: flex-end;
	}
}
.rcc-products-hero__label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	display: block;
	margin: 0 0 var(--wp--preset--spacing--xs);
}
.rcc-products-hero__row h1 {
	margin: 0;
}
.rcc-products-hero__actions {
	margin: 0;
	display: flex;
	gap: var(--wp--preset--spacing--sm);
}
.rcc-products-hero__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	/*
	 * font-family/font-size/font-weight/letter-spacing intentionally
	 * omitted: they duplicated the theme.json button default exactly, so
	 * this now inherits it instead of pinning its own stale copy.
	 */
	border: 1px solid var(--wp--preset--color--outline);
	background-color: transparent;
	color: var(--wp--preset--color--on-background);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
	border-radius: var(--wp--custom--radius--xl);
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.rcc-products-hero__actions .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--surface-container);
}
.rcc-products-hero__actions .material-symbols-outlined {
	font-size: 18px;
}

/* ---------------------------------------------------------------------- */
/* Category sections                                                       */
/* ---------------------------------------------------------------------- */
.rcc-products-categories {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xl);
}
.rcc-products-category {
	margin: 0;
}
.rcc-products-category__header {
	margin: 0 0 var(--wp--preset--spacing--lg);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
}
.rcc-products-category__header h2 {
	margin: 0;
	white-space: nowrap;
}
/*
 * At 32px/600, every category heading — not just "04. Specialty &
 * Equipment" — needs 339-408px on one line (measured), more than this
 * row has to give once the viewport gets this narrow. Forcing nowrap
 * here pushes the row (and the page) wider than the viewport. Letting it
 * wrap naturally avoids that without touching the nowrap treatment
 * anywhere it already fits comfortably (confirmed safe down to 440px).
 */
@media (max-width: 480px) {
	.rcc-products-category__header h2 {
		white-space: normal;
	}
}
.rcc-products-category__divider {
	margin: 0;
	flex-grow: 1;
	height: 1px;
	background-color: var(--wp--preset--color--outline-variant);
}
.rcc-products-category__cards {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--container--gutter);
}

/* ---------------------------------------------------------------------- */
/* Product card (image + content, categories 01-03)                        */
/* ---------------------------------------------------------------------- */
.rcc-product-card {
	margin: 0;
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.3s ease;
}
@media (min-width: 768px) {
	.rcc-product-card {
		flex-direction: row;
	}
}
.rcc-product-card:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.rcc-product-card__media {
	position: relative;
	overflow: hidden;
	background-color: transparent;
	height: 256px;
	margin: 0;
	/* Below 768px the card stacks (image above copy, not beside it), so the
	   image gets an equal inset on all four sides; from 768px up it sits
	   beside the copy column, so the right side stays flush to avoid an
	   excessive gap before the text. */
	padding: var(--wp--preset--spacing--md);
	box-sizing: border-box;
}
@media (min-width: 768px) {
	.rcc-product-card__media {
		width: 33.3333%;
		flex-shrink: 0;
		padding-right: 0;
		/* The card is a row here, and the body's content (title, description,
		   features, footer) can naturally need more vertical space than the
		   256px floor below. Switching the fixed height to a floor lets this
		   panel stretch (via the row's default align-items:stretch) to match
		   whichever side is taller, so the image's bottom edge and the
		   footer's bottom edge always land on the same line instead of the
		   image staying capped while the body grows past it. */
		height: auto;
		min-height: 256px;
		align-self: stretch;
	}
}
.rcc-product-card__media figure.wp-block-image {
	height: 100%;
	margin: 0;
}
.rcc-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rcc-product-card__badge {
	margin: 0;
	position: absolute;
	top: var(--wp--preset--spacing--md);
	left: var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--on-primary);
	background-color: var(--wp--preset--color--primary);
	padding: 4px var(--wp--preset--spacing--sm);
}
.rcc-product-card__badge--secondary {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--on-secondary);
}
.rcc-product-card__body {
	margin: 0;
	padding: var(--wp--preset--spacing--lg);
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.rcc-product-card__body h3 {
	margin: 0 0 var(--wp--preset--spacing--sm);
}
.rcc-product-card__desc {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0 0 var(--wp--preset--spacing--md);
}
.rcc-product-card__features {
	margin: 0 0 var(--wp--preset--spacing--md);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}
.rcc-product-card__features--grid {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--wp--preset--spacing--lg);
	row-gap: var(--wp--preset--spacing--sm);
}
@media (min-width: 768px) {
	.rcc-product-card__features--grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.rcc-product-card__feature {
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--sm);
}
.rcc-product-card__feature .material-symbols-outlined {
	color: var(--wp--preset--color--primary);
	font-size: 18px;
	flex-shrink: 0;
}
.rcc-product-card__feature span.rcc-product-card__feature-text {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	color: var(--wp--preset--color--on-background);
}
/*
 * Specificity note: WordPress's default "flow" layout CSS
 * (`.is-layout-flow > *`) resets margin-block-start to 0 at the same
 * specificity as a single class selector, so a plain `.rcc-product-card__footer
 * { margin-top: auto }` loses that tie and the footer sits wherever normal
 * flow puts it instead of being pushed to the bottom of the flex column.
 * Chaining the parent class here gives this rule higher specificity so
 * margin-top: auto actually applies.
 */
.rcc-product-card__body .rcc-product-card__footer {
	margin-top: auto;
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	padding-top: var(--wp--preset--spacing--md);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	gap: var(--wp--preset--spacing--md);
}
@media (min-width: 768px) {
	.rcc-product-card__body .rcc-product-card__footer {
		flex-direction: row;
		align-items: flex-end;
	}
}
.rcc-product-card__specs {
	margin: 0;
	flex-grow: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--sm);
}
@media (min-width: 768px) {
	/* Footer uses align-items:flex-end here, so specs and the Tech Sheet
	   button share a bottom baseline. A small bottom margin lifts just the
	   specs block off that baseline, closer to the divider, without moving
	   the button (which has no such margin). */
	.rcc-product-card__specs {
		margin-bottom: var(--wp--preset--spacing--sm);
	}
}
.rcc-product-card__spec {
	margin: 0;
}
.rcc-product-card__spec-label {
	margin: 0;
	display: block;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 10px;
	text-transform: uppercase;
	color: var(--wp--preset--color--outline);
}
.rcc-product-card__spec-value {
	margin: 0;
	display: block;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--data-mono);
	color: var(--wp--preset--color--on-surface);
}
.rcc-btn-tech-sheet {
	margin: 0;
	flex-shrink: 0;
	justify-content: flex-end;
}
.rcc-btn-tech-sheet .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 1px solid var(--wp--preset--color--primary);
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	/*
	 * font-family/font-size/font-weight/letter-spacing intentionally
	 * omitted: they duplicated the theme.json button default exactly, so
	 * this now inherits it instead of pinning its own stale copy.
	 */
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.rcc-btn-tech-sheet .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent);
}
/*
 * Solid variant — used only for the REVCON Accessories card, whose dark
 * background makes the outline treatment above too low-contrast to read.
 * Reuses the same base sizing/typography/radius; overrides only the color
 * treatment to match the established RCC primary (solid) button.
 */
.rcc-btn-tech-sheet--solid .wp-block-button__link {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}
.rcc-btn-tech-sheet--solid .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary-container);
	background-color: var(--wp--preset--color--primary-container);
}

/* ---------------------------------------------------------------------- */
/* Specialty treatment card (category 04, card a — table variant)          */
/* ---------------------------------------------------------------------- */
.rcc-product-card--specialty {
	margin: 0;
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
	padding: var(--wp--preset--spacing--lg);
	display: flex;
	flex-direction: column;
}
.rcc-product-card--specialty__header {
	margin: 0 0 var(--wp--preset--spacing--md);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
}
.rcc-product-card--specialty__header .material-symbols-outlined {
	color: var(--wp--preset--color--primary);
	font-size: 24px;
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.rcc-product-card--specialty__header h3 {
	margin: 0;
}
.rcc-product-card--specialty__desc {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0 0 var(--wp--preset--spacing--lg);
}
.rcc-application-table {
	margin: 0 0 var(--wp--preset--spacing--lg);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--md);
}
.rcc-application-table__heading {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--label-caps);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--outline);
	margin: 0 0 var(--wp--preset--spacing--sm);
}
.rcc-application-table .wp-block-table {
	margin: 0;
}
.rcc-application-table .wp-block-table table {
	width: 100%;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-sm);
	border-collapse: collapse;
}
/*
 * WordPress core (wp-includes/blocks/table/style.css) puts a 1px border on
 * every td/th by default (`.wp-block-table td, .wp-block-table th {
 * border: 1px solid; }`) plus a 3px thead border — that's what was producing
 * the boxed/spreadsheet look. Explicitly clearing borders here and adding
 * back only the single header rule beneath, so the table matches the
 * editorial, horizontal-rule-only treatment from the Stitch source.
 */
.rcc-application-table .wp-block-table th,
.rcc-application-table .wp-block-table td {
	border: none;
	text-align: left;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm) 0;
	/*
	 * Core's .has-fixed-layout td/th rule (wp-includes/blocks/table/style.css)
	 * sets word-break: break-word, which browsers treat as word-break: normal
	 * + overflow-wrap: anywhere -- it breaks mid-word eagerly, even when a
	 * normal space-based line break would fit ("Applicatio" / "n" at narrow
	 * widths). Restoring word-break: normal and using overflow-wrap: break-word
	 * instead keeps whole words together whenever possible, only breaking
	 * within a word as a last resort if it truly can't fit the column.
	 */
	word-break: normal;
	overflow-wrap: break-word;
}
.rcc-application-table .wp-block-table thead {
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.rcc-application-table .wp-block-table th {
	font-weight: 600;
	padding-bottom: var(--wp--preset--spacing--sm);
}
.rcc-application-table tbody tr:nth-child(even) {
	background-color: var(--wp--preset--color--surface);
}
/* Same specificity fix as .rcc-product-card__body .rcc-product-card__footer above. */
.rcc-product-card--specialty .rcc-product-card--specialty__footer {
	margin-top: auto;
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	padding-top: var(--wp--preset--spacing--md);
	display: flex;
	justify-content: flex-end;
}

/* ---------------------------------------------------------------------- */
/* Equipment card (category 04, card b — dark variant)                     */
/* ---------------------------------------------------------------------- */
.rcc-product-card--equipment {
	margin: 0;
	background-color: var(--wp--preset--color--on-background);
	color: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--lg);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--custom--container--gutter);
}
@media (min-width: 768px) {
	.rcc-product-card--equipment {
		flex-direction: row;
	}
}
.rcc-product-card--equipment__content {
	margin: 0;
}
@media (min-width: 768px) {
	.rcc-product-card--equipment__content {
		width: 66.6666%;
	}
}
.rcc-product-card--equipment__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--md);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.rcc-product-card--equipment__eyebrow .rcc-label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--label-caps);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-fixed);
}
.rcc-product-card--equipment__eyebrow .material-symbols-outlined {
	color: var(--wp--preset--color--primary-fixed);
}
.rcc-product-card--equipment__content h3 {
	color: var(--wp--preset--color--surface);
	margin: 0 0 var(--wp--preset--spacing--md);
}
.rcc-product-card--equipment__desc {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--outline-variant);
	margin: 0 0 var(--wp--preset--spacing--lg);
}
.rcc-product-card--equipment__list {
	margin: 0;
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
}
.rcc-product-card--equipment__list li {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 12px;
	color: var(--wp--preset--color--surface-variant);
}
.rcc-product-card--equipment__list .rcc-highlight {
	color: var(--wp--preset--color--primary-fixed);
}
.rcc-product-card--equipment__media {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--md);
}
@media (min-width: 768px) {
	.rcc-product-card--equipment__media {
		width: 33.3333%;
	}
}
.rcc-product-card--equipment__media figure.wp-block-image {
	width: 100%;
	margin: 0;
}
.rcc-product-card--equipment__media img {
	width: 100%;
	height: 128px;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--outline);
	display: block;
}