/* =============================================================================
   PRODUCTS HUB
   Rule order matches section order in page-products.php.
   ============================================================================= */

/* Sticky offsets.
   The whole header sticks (global.css --header-h: 122px, 76px below 1024px)
   and page-products.js re-measures it at runtime. The jump bar (58px incl.
   border) sits directly beneath, and anchored sections clear both. */
/* Declared on body, not :root: WordPress sets .admin-bar on <body>, so a
   :root declaration would resolve --admin-bar-h in a scope that never sees
   the class. --header-h and --admin-bar-h are in global.css. */
body {
	--products-nav-h:    58px; /* jump bar incl. bottom border */
	--products-header-h: calc(var(--header-h) + var(--admin-bar-h));
	--products-anchor:   calc(var(--products-header-h) + var(--products-nav-h));
}

/* =============================================================================
   HERO -- modifier on the shared .split-contact-hero component
   ============================================================================= */

.products-hero {
	padding-top: var(--section-y-sm);
	padding-bottom: var(--section-y-sm);
	background-color: var(--color-bg-subtle);
}

.products-hero .split-contact-hero__content {
	border: 1px solid var(--color-border-subtle);
}

/* =============================================================================
   SECTION NAV -- sticky jump bar
   ============================================================================= */

.products-nav {
	position:         sticky;
	top:              var(--products-header-h);
	z-index:          90;
	background-color: var(--color-bg-primary);
	border-bottom:    1px solid var(--color-border-subtle);
}

.products-nav__list {
	display:         flex;
	flex-direction:  row;
	align-items:     stretch;
	gap:             var(--space-xl);
	overflow-x:      auto;
	scrollbar-width: none;
}

.products-nav__list::-webkit-scrollbar {
	display: none;
}

.products-nav__link {
	display:        block;
	padding:        var(--space-m) 0 var(--space-m);
	font-size:      var(--text-body-small);
	font-weight:    var(--weight-bold);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space:    nowrap;
	color:          var(--color-text-secondary);
	border-bottom:  2px solid transparent;
	transition:     color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.products-nav__link:hover {
	color:           var(--color-text-primary);
	text-decoration: none;
}

/* Set by the scrollspy in page-products.js. */
.products-nav__link[aria-current="true"] {
	color:        var(--color-accent);
	border-color: var(--color-accent);
}

/* =============================================================================
   GROUP SECTION -- shared shell for filter types, cleanroom, specialty,
   efficiency, and brands
   ============================================================================= */

.products-group {
	padding-top: var(--section-y-md);
	padding-bottom: var(--section-y-md);
	scroll-margin-top: var(--products-anchor);
}

/* Alternating band so adjacent sections read as separate shelves. */
.products-group--band {
	background-color: var(--color-bg-subtle);
	border-top:       1px solid var(--color-border-subtle);
	border-bottom:    1px solid var(--color-border-subtle);
}

.products-group__header {
	max-width:     760px;
	margin-bottom: var(--space-2xl);
}

.products-group__heading {
	margin-bottom: 10px;
}

p.products-group__copy {
	margin-bottom: 0;
	line-height:   var(--leading-relaxed);
	color:         var(--color-text-secondary);
}

p.products-group__aside {
	margin-top:    var(--space-xl);
	margin-bottom: 0;
	font-size:     var(--text-body-small);
	font-weight:   var(--weight-bold);
	color:         var(--color-text-secondary);
}

/* =============================================================================
   CATEGORY TILES
   ============================================================================= */

.products-tiles {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--space-l);
}

.products-tile {
	position:         relative;
	display:          flex;
	flex-direction:   column;
	height:           100%;
	padding:          var(--space-l);
	overflow:         hidden;
	color:            var(--color-text-primary);
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    var(--radius-m);
	transition:       border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.products-tile:hover,
.products-tile:focus-visible {
	transform:       translateY(-2px);
	border-color:    var(--color-border-hover);
	box-shadow:      var(--shadow-raised);
	text-decoration: none;
}

/* Accent rule that wipes across the top edge on hover. */
.products-tile__rule {
	position:         absolute;
	top:              0;
	left:             0;
	width:            0;
	height:           3px;
	background-color: var(--color-accent);
	transition:       width var(--duration-slow) ease;
}

.products-tile:hover .products-tile__rule,
.products-tile:focus-visible .products-tile__rule {
	width: 100%;
}

.products-tile__title {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             10px;
	margin-bottom:   var(--space-xs);
	font-size:       var(--text-h5);
	line-height:     var(--leading-slim);
}

.products-tile__arrow {
	flex-shrink: 0;
	color:       var(--color-border-hover);
	transition:  transform var(--duration-fast) ease, color var(--duration-fast) ease;
}

.products-tile:hover .products-tile__arrow,
.products-tile:focus-visible .products-tile__arrow {
	transform: translateX(3px);
	color:     var(--color-accent);
}

p.products-tile__desc {
	margin-bottom: var(--space-m);
	font-size:     var(--text-body-small);
	line-height:   var(--leading-slim);
	color:         var(--color-text-secondary);
}

/* Pins the count to the bottom edge so tiles in a row line up. */
.products-tile__meta {
	margin-top:     auto;
	padding-top:    var(--space-s);
	font-size: var(--text-xs);
	font-weight:    var(--weight-bold);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color:          var(--color-text-secondary);
	border-top:     1px solid var(--color-border-subtle);
	font-variant-numeric: tabular-nums;
}

/* =============================================================================
   EFFICIENCY TILES -- compact rating chips with a MERV scale indicator
   ============================================================================= */

.merv-tiles {
	display:               grid;
	grid-template-columns: repeat(6, 1fr);
	gap:                   20px;
}

.merv-tile {
	display:          flex;
	flex-direction:   column;
	height:           100%;
	padding:          20px;
	color:            var(--color-text-primary);
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    var(--radius-m);
	transition:       border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.merv-tile:hover,
.merv-tile:focus-visible {
	transform:       translateY(-2px);
	border-color:    var(--color-border-hover);
	box-shadow:      var(--shadow-raised);
	text-decoration: none;
}

.merv-tile__label {
	font-size: var(--text-body-large);
	font-weight:          var(--weight-black);
	line-height:          1;
	white-space:          nowrap;
	font-variant-numeric: tabular-nums;
}

.merv-tile__scale {
	display:          block;
	height:           4px;
	margin:           var(--space-s) 0 10px;
	overflow:         hidden;
	background-color: var(--color-border-subtle);
	border-radius:    var(--radius-max);
}

.merv-tile__scale-fill {
	display:          block;
	height:           100%;
	background-color: var(--color-accent);
	border-radius:    var(--radius-max);
}

.merv-tile__particles {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: var(--leading-slim);
	color:       var(--color-text-secondary);
}

.merv-tile__count {
	margin-top:     auto;
	padding-top:    10px;
	font-size: var(--text-2xs);
	font-weight:    var(--weight-bold);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color:          var(--color-text-secondary);
	font-variant-numeric: tabular-nums;
}

/* =============================================================================
   BRAND LIST
   ============================================================================= */

/* Multi-column rather than grid so the alphabetical run reads down each
   column, the way a printed brand index does. */
.brand-list {
	columns:     3;
	column-gap:  var(--space-2xl);
}

.brand-list li {
	break-inside: avoid;
}

.brand-list__link {
	display:         flex;
	flex-direction:  row;
	align-items:     baseline;
	justify-content: space-between;
	gap:             var(--space-s);
	padding:         14px 0;
	font-weight:     var(--weight-bold);
	color:           var(--color-text-primary);
	border-bottom:   1px solid var(--color-border-subtle);
	transition:      color var(--duration-fast) ease, padding-left var(--duration-fast) ease;
}

.brand-list__link:hover,
.brand-list__link:focus-visible {
	color:           var(--color-accent);
	padding-left:    6px;
	text-decoration: none;
}

.brand-list__count {
	flex-shrink:          0;
	font-size: var(--text-xs);
	font-weight:          var(--weight-bold);
	color:                var(--color-text-secondary);
	font-variant-numeric: tabular-nums;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media ( max-width: 1024px ) {

	.merv-tiles {
		grid-template-columns: repeat(4, 1fr);
	}

	.products-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.brand-list {
		columns:    2;
		column-gap: var(--space-l);
	}

}

@media ( max-width: 768px ) {

	.products-hero {
		padding-top: var(--section-y-md);
		padding-bottom: var(--section-y-md);
	}

	.products-group {
		padding-top: var(--section-y-sm);
		padding-bottom: var(--section-y-sm);
	}

	.products-group__header {
		margin-bottom: var(--space-l);
	}

	.merv-tiles {
		grid-template-columns: repeat(3, 1fr);
	}

}

@media ( max-width: 600px ) {

	.products-tiles {
		grid-template-columns: 1fr;
	}

	.brand-list {
		columns: 1;
	}

	.merv-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

}

/* Honour reduced-motion for the hover lift and the accent wipe. */
@media ( prefers-reduced-motion: reduce ) {

	.products-tile,
	.merv-tile,
	.products-tile__rule,
	.products-tile__arrow,
	.brand-list__link {
		transition: none;
	}

	.products-tile:hover,
	.products-tile:focus-visible,
	.merv-tile:hover,
	.merv-tile:focus-visible {
		transform: none;
	}

}