/*
 * Page-specific rules.
 *
 * .igloorack-product* is the product-detail page, .igloorack-catalog*
 * is the catalog/category archive pages, .igloorack-home/.igloorack-
 * hero*/.igloorack-cta-banner* are the home page. font-family/color
 * are not repeated per page class — base.css sets them globally on
 * body.
 *
 * @package IglooRack
 */

/* Product page */

.igloorack-product {
	padding-top: var( --space-8 );
}

/* Footer gap: the hardened, final word on .igloorack-product's bottom
   spacing lives at the very end of this file — see that rule for why. */

.igloorack-product__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-3 );
}

.igloorack-product__title {
	font-size: var( --font-size-h1 );
	color: var( --color-ink );
	margin: 0;
}

.igloorack-product__tagline {
	font-size: 1.1rem;
	color: var( --color-graphite );
	margin: 0;
}

.igloorack-product__content {
	color: var( --color-graphite );
	line-height: 1.7;
	max-width: 70ch;
}

.igloorack-product__content > * + * {
	margin-top: var( --space-4 );
}

.igloorack-product__content a {
	color: var( --color-ice-600 );
}

/* Content pages (Content Hub / Content Page / About / Contact / Immersion
   Cooling templates) — shared wrapper for the editable the_content() output.

   .igloorack-page-content is combined with .igloorack-container on the
   same element, so editable content gets the exact same outer alignment
   (max-width + inline padding) as the page's H1 and any theme-rendered
   sections — reusing the container rather than duplicating its box model.

   Genuine prose children (paragraphs, headings, lists, blockquotes) are
   additionally capped at the readable --measure width so long lines of
   body copy don't stretch the full container — but they stay left-aligned
   (no centering), matching the H1's edge.

   Editors occasionally paste pre-structured full-bleed section HTML
   (matching the site's own .igloorack-section/.igloorack-cta-banner
   pattern, always a top-level <section>, each with its own inner
   .igloorack-container for its content's alignment). Those must not be
   additionally narrowed, and must not gain a second layer of padding from
   this wrapper — so a top-level <section> "breaks out" of this wrapper's
   padding via a matching negative inline margin, restoring the exact
   edge-to-edge rendering it already had before this wrapper existed. */

.igloorack-page-content > * + * {
	margin-top: var( --space-4 );
}

.igloorack-page-content > p,
.igloorack-page-content > ul,
.igloorack-page-content > ol,
.igloorack-page-content > blockquote,
.igloorack-page-content > h2,
.igloorack-page-content > h3,
.igloorack-page-content > h4,
.igloorack-page-content > h5,
.igloorack-page-content > h6 {
	max-width: var( --measure );
}

.igloorack-page-content > section {
	margin-inline: calc( -1 * var( --space-6 ) );
}

@media ( max-width: 768px ) {
	.igloorack-page-content > section {
		margin-inline: calc( -1 * var( --space-4 ) );
	}
}

/* Catalog / category archive page */

.igloorack-catalog {
	padding-block: 0 var( --space-16 );
}

/* Catalog hero — full-width dark editorial hero shared by the main
   Products archive and every Product Category archive. */
.igloorack-catalog-hero {
	position: relative;
	overflow: hidden;
	background: var( --color-jet );
	color: var( --color-steel-200 );
}

.igloorack-catalog-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.igloorack-catalog-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.32;
}

.igloorack-catalog-hero__media svg {
	width: 60%;
	max-width: 480px;
	height: auto;
	opacity: 0.2;
	color: var( --color-ice-500 );
}

.igloorack-catalog-hero__content {
	position: relative;
	z-index: 1;
	padding-block: var( --space-12 ) var( --space-16 );
}

.igloorack-catalog-hero__title {
	font-size: var( --font-size-h1 );
	color: var( --color-white );
	margin: var( --space-3 ) 0 var( --space-4 );
}

.igloorack-catalog-hero__intro {
	max-width: var( --measure );
	font-size: 1.1rem;
	line-height: 1.6;
	color: var( --color-steel-300 );
	margin: 0 0 var( --space-4 );
}

.igloorack-catalog-hero__count {
	font-family: var( --font-mono );
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --color-ice-500 );
	margin: 0 0 var( --space-6 );
}

/* Category anchor navigation */

.igloorack-catalog-anchor-nav {
	background: var( --color-steel-50 );
	border-bottom: 1px solid var( --color-steel-200 );
}

.igloorack-catalog-anchor-nav__list {
	display: flex;
	gap: var( --space-6 );
	list-style: none;
	max-width: var( --container-max );
	margin: 0 auto;
	padding: var( --space-3 ) var( --space-6 );
}

.igloorack-catalog-anchor-nav__link {
	color: var( --color-steel-600 );
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

.igloorack-catalog-anchor-nav__link:hover,
.igloorack-catalog-anchor-nav__link:focus-visible {
	color: var( --color-ice-600 );
}

/* Featured Products rail */

.igloorack-featured-rail {
	position: relative;
	display: flex;
	align-items: center;
	gap: var( --space-4 );
	margin-top: var( --space-10 );
}

.igloorack-featured-rail__track {
	display: flex;
	gap: var( --space-4 );
	overflow-x: auto;
	scroll-snap-type: x proximity;
	list-style: none;
	margin: 0;
	padding: var( --space-2 ) 0 var( --space-4 );
	scrollbar-width: thin;
}

.igloorack-featured-rail__item {
	flex: 0 0 260px;
	scroll-snap-align: start;
}

.igloorack-featured-rail__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: var( --color-white );
}

.igloorack-featured-rail__link:hover,
.igloorack-featured-rail__link:focus-visible {
	border-color: var( --color-ice-500 );
}

.igloorack-featured-rail__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var( --aspect-card );
	background: var( --color-product-canvas );
	color: var( --color-steel-600 );
}

.igloorack-featured-rail__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.igloorack-featured-rail__media svg {
	width: 40%;
	height: auto;
}

.igloorack-featured-rail__body {
	display: flex;
	flex-direction: column;
	gap: var( --space-1 );
	padding: var( --space-4 );
}

.igloorack-featured-rail__sku {
	font-family: var( --font-mono );
	font-size: 0.75rem;
	color: var( --color-steel-500 );
}

.igloorack-featured-rail__title {
	font-weight: 700;
	color: var( --color-ink );
}

.igloorack-featured-rail__tagline {
	font-size: 0.85rem;
	color: var( --color-steel-600 );
}

.igloorack-featured-rail__control {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var( --color-steel-200 );
	border-radius: 50%;
	color: var( --color-ink );
	background: var( --color-white );
}

.igloorack-featured-rail__control:hover,
.igloorack-featured-rail__control:focus-visible {
	border-color: var( --color-ice-500 );
	color: var( --color-ice-600 );
}

.igloorack-featured-rail__control:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Catalog explorer: filters + results */

/* Sortable table headers and the sort dropdown (catalog-table.php /
   catalog-explorer.php) both navigate back to this section's own
   #igloorack-catalog-explorer anchor after a sort change, rather than
   the page reloading at the very top — scroll-margin-top keeps that
   landing spot from ending up hidden under the sticky site header.
   --header-fixed-height (tokens.css) is the real, already-measured
   header footprint used elsewhere for this exact purpose; the added
   --space-6 is just a little breathing room below it. */
.igloorack-catalog-explorer {
	scroll-margin-top: calc( var( --header-fixed-height ) + var( --space-6 ) );
}

.igloorack-catalog-explorer__inner {
	padding-top: var( --space-12 );
}

.igloorack-catalog-explorer__filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: var( --space-2 );
	margin-top: var( --space-4 );
	padding: var( --space-3 ) var( --space-4 );
	border: 1px solid var( --color-steel-300 );
	border-radius: var( --radius-md );
	background: var( --color-white );
	font-weight: 600;
}

.igloorack-catalog-explorer__filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var( --color-ice-500 );
	color: var( --color-white );
	font-size: 0.7rem;
}

@media ( min-width: 1024px ) {
	.igloorack-catalog-explorer__filter-toggle {
		display: none;
	}
}

.igloorack-catalog-explorer__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-8 );
	margin-top: var( --space-6 );
	align-items: start;
}

/* Desktop: filters sit ABOVE the results as a compact bar (search,
   one dropdown per filter group, featured toggle, Apply/Clear), so the
   catalog table gets the full content width. Mobile keeps the drawer. */
@media ( min-width: 1024px ) {
	.igloorack-catalog-explorer__layout {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --space-6 );
	}

	/* Ancestor-qualified: the base sidebar/actions rules below this media
	   query would otherwise win on source order. */
	.igloorack-catalog-explorer__layout .igloorack-catalog-explorer__sidebar {
		padding: var( --space-3 ) var( --space-4 );
	}

	.igloorack-catalog-filters {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var( --space-2 );
	}

	.igloorack-catalog-filters .igloorack-filter-group {
		position: relative;
		padding: 0;
		border: 0;
	}

	.igloorack-catalog-filters .igloorack-filter-group__heading {
		margin: 0;
	}

	.igloorack-filter-group--search {
		flex: 1 1 220px;
		max-width: 300px;
	}

	.igloorack-filter-group--search .igloorack-filter-group__heading {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
	}

	.igloorack-catalog-filters .igloorack-filter-group__trigger {
		gap: var( --space-2 );
		width: auto;
		min-height: 36px;
		padding: var( --space-1 ) var( --space-3 );
		border: 1px solid var( --color-steel-300 );
		border-radius: 999px;
		background: var( --color-white );
		font-size: 0.8rem;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.igloorack-catalog-filters .igloorack-filter-group__trigger[ aria-expanded='true' ],
	.igloorack-catalog-filters .igloorack-filter-group__trigger:hover {
		border-color: var( --color-ink );
	}

	.igloorack-catalog-filters .igloorack-filter-group.is-active .igloorack-filter-group__trigger {
		border-color: var( --color-brand-600 );
		box-shadow: inset 0 0 0 1px var( --color-brand-600 );
	}

	.igloorack-catalog-filters .igloorack-accordion__icon {
		width: 8px;
		height: 8px;
	}

	/* The open group's options as an anchored dropdown panel. */
	.igloorack-catalog-filters .igloorack-filter-group__panel:not( [hidden] ) {
		position: absolute;
		top: calc( 100% + var( --space-2 ) );
		inset-inline-start: 0;
		z-index: var( --z-dropdown );
		min-width: 240px;
		max-height: 340px;
		overflow-y: auto;
		margin-top: 0;
		padding: var( --space-3 ) var( --space-4 );
		background: var( --color-white );
		border: 1px solid var( --color-steel-200 );
		border-radius: var( --radius-md );
		box-shadow: var( --shadow-md );
	}

	.igloorack-filter-group--featured .igloorack-filter-option {
		font-size: 0.85rem;
		white-space: nowrap;
	}

	.igloorack-catalog-filters .igloorack-catalog-filters__actions {
		flex-direction: row;
		margin: 0;
		margin-inline-start: auto;
		gap: var( --space-2 );
	}

	.igloorack-catalog-filters__actions .igloorack-button {
		min-height: 36px;
		padding: var( --space-1 ) var( --space-4 );
		font-size: 0.85rem;
	}

	.igloorack-catalog-results__cards {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* Selected value shown in a collapsed group's trigger (all widths; in
   the mobile drawer's full-width trigger it sits at the end, by the icon). */
.igloorack-filter-group__trigger {
	gap: var( --space-2 );
}

.igloorack-filter-group__value {
	margin-inline-start: auto;
	max-width: 14ch;
	overflow: hidden;
	color: var( --color-brand-700 );
	font-weight: 700;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}

.igloorack-filter-group__name {
	flex: 0 1 auto;
}

.igloorack-catalog-explorer__sidebar-head {
	display: none;
}

.igloorack-catalog-explorer__sidebar {
	background: var( --color-steel-50 );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
	padding: var( --space-6 );
}

/* Mobile drawer — data-catalog-filter-panel gets .is-open toggled by
   assets/js/modules/catalog-filters.js; without JS the sidebar simply
   renders in normal document flow above the results, always visible
   and always usable. */
@media ( max-width: 1023px ) {
	.igloorack-catalog-explorer__sidebar-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var( --space-4 );
	}

	.igloorack-catalog-explorer__sidebar-title {
		margin: 0;
	}

	.igloorack-catalog-explorer__filter-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 1px solid var( --color-steel-300 );
		border-radius: var( --radius-sm );
		background: var( --color-white );
	}

	[data-catalog-filter-panel].js-drawer {
		position: fixed;
		inset: 0;
		z-index: var( --z-dropdown );
		overflow-y: auto;
		border-radius: 0;
		background: var( --color-white );
		transform: translateX( -100% );
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	[data-catalog-filter-panel].js-drawer.is-open {
		transform: translateX( 0 );
		visibility: visible;
		transition: transform 0.25s ease, visibility 0s linear 0s;
	}
}

@media ( min-width: 1024px ) {
	.igloorack-catalog-explorer__filter-close {
		display: none;
	}
}

.igloorack-filter-group {
	border-bottom: 1px solid var( --color-steel-200 );
	padding-block: var( --space-4 );
}

.igloorack-filter-group:first-child {
	padding-top: 0;
}

.igloorack-filter-group__heading {
	margin: 0 0 var( --space-2 );
}

.igloorack-filter-group__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --color-ink );
}

.igloorack-filter-group__label {
	display: block;
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --color-ink );
}

/* `display` only while open: an unconditional `display: flex` overrides
   the UA's [hidden] rule, so accordion.js's `panel.hidden = true` would
   flip aria-expanded and the arrow without ever collapsing the group. */
.igloorack-filter-group__panel:not( [hidden] ) {
	display: flex;
}

.igloorack-filter-group__panel {
	flex-direction: column;
	gap: var( --space-2 );
	margin-top: var( --space-3 );
}

.igloorack-filter-option {
	display: flex;
	align-items: center;
	gap: var( --space-2 );
	font-size: 0.9rem;
	color: var( --color-graphite );
}

.igloorack-filter-option--standalone {
	font-weight: 600;
}

/* "All" (no specific value selected) sits apart from the value list. */
.igloorack-filter-option--all {
	padding-bottom: var( --space-2 );
	border-bottom: 1px solid var( --color-steel-200 );
	font-weight: 600;
}

.igloorack-filter-option__count {
	color: var( --color-steel-500 );
	font-size: 0.8rem;
}

.igloorack-catalog-filters__search {
	width: 100%;
	padding: var( --space-2 ) var( --space-3 );
	border: 1px solid var( --color-steel-300 );
	border-radius: var( --radius-sm );
	background: var( --color-white );
}

.igloorack-catalog-filters__actions {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
	margin-top: var( --space-6 );
}

/* Results toolbar */

.igloorack-catalog-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-4 );
	padding-bottom: var( --space-4 );
	border-bottom: 1px solid var( --color-steel-200 );
}

.igloorack-catalog-toolbar__count {
	font-weight: 600;
	color: var( --color-ink );
	margin: 0;
}

.igloorack-catalog-toolbar__sort {
	display: flex;
	align-items: center;
	gap: var( --space-2 );
	margin: 0;
}

.igloorack-catalog-toolbar__sort-select {
	padding: var( --space-2 ) var( --space-3 );
	border: 1px solid var( --color-steel-300 );
	border-radius: var( --radius-sm );
	background: var( --color-white );
}

.igloorack-catalog-toolbar__view {
	display: inline-flex;
	border: 1px solid var( --color-steel-300 );
	border-radius: var( --radius-sm );
	overflow: hidden;
}

.igloorack-catalog-toolbar__view-button {
	padding: var( --space-2 ) var( --space-4 );
	color: var( --color-steel-600 );
	font-weight: 600;
	font-size: 0.85rem;
}

.igloorack-catalog-toolbar__view-button.is-active {
	background: var( --color-ink );
	color: var( --color-white );
}

.igloorack-catalog-toolbar__active {
	margin: var( --space-3 ) 0 0;
	font-size: 0.9rem;
	color: var( --color-steel-600 );
}

.igloorack-catalog-toolbar__active a {
	color: var( --color-ice-600 );
	font-weight: 600;
	margin-inline-start: var( --space-2 );
}

/* Results: table (desktop default) / cards (mobile default) — both
   always render; CSS/JS decide which is visible, so there is never a
   layout jump or missing content while JS loads. */

.igloorack-catalog-results__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-6 );
	list-style: none;
	margin: var( --space-6 ) 0 0;
	padding: 0;
}

@media ( min-width: 640px ) {
	.igloorack-catalog-results__cards {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Catalog data table — a framed, ruled "catalog table": strong header
   band, vertical column rules, firm row separators, tight rhythm. Article
   No. is the first (monospaced) column. Cells don't wrap EXCEPT the name
   and the action CTA, so a long translation never gets clipped. */
.igloorack-catalog-table-wrap {
	overflow-x: auto;
	margin-top: var( --space-6 );
	border: 1px solid var( --color-steel-300 );
	border-radius: var( --radius-sm );
}

.igloorack-catalog-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.igloorack-catalog-table th,
.igloorack-catalog-table td {
	padding: var( --space-2 ) var( --space-3 );
	text-align: start;
	vertical-align: middle;
	border-bottom: 1px solid var( --color-steel-200 );
	border-inline-end: 1px solid var( --color-steel-200 );
	white-space: nowrap;
}

.igloorack-catalog-table th:last-child,
.igloorack-catalog-table td:last-child {
	border-inline-end: 0;
}

.igloorack-catalog-table thead th {
	padding-block: var( --space-3 );
	background: var( --color-steel-50 );
	border-bottom: 2px solid var( --color-ink );
	font-family: var( --font-mono );
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --color-ink );
}

.igloorack-catalog-table tbody tr:nth-child( even ) {
	background: rgba( 15, 23, 42, 0.02 );
}

.igloorack-catalog-table tbody tr:last-child td {
	border-bottom: 0;
}

.igloorack-catalog-table__sku {
	font-family: var( --font-mono );
	font-weight: 700;
}

.igloorack-catalog-table__sku a {
	color: var( --color-ink );
	text-decoration: none;
}

.igloorack-catalog-table__sku a:hover,
.igloorack-catalog-table__sku a:focus-visible {
	color: var( --color-brand-600 );
	text-decoration: underline;
}

.igloorack-catalog-table td.igloorack-catalog-table__name-cell {
	min-width: 220px;
	white-space: normal;
}

.igloorack-catalog-table td.igloorack-catalog-table__action {
	min-width: 7.5rem;
	white-space: normal;
}

/* Sortable column headers (catalog-table.php's $render_sortable_th())
   — a real link, styled to read as interactive without becoming
   visually noisy: same compact mono/uppercase treatment as a plain
   <th>, a restrained cyan accent only once a column is the active
   sort, and a neutral (never colored) glyph on every other sortable
   column so the whole row doesn't look like a wall of link-blue. */
.igloorack-catalog-table__sort {
	display: inline-flex;
	align-items: center;
	gap: var( --space-1 );
	color: inherit;
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	text-decoration: none;
}

.igloorack-catalog-table__sort:hover {
	color: var( --color-ice-600 );
}

.igloorack-catalog-table__sort.is-active {
	color: var( --color-ice-600 );
}

.igloorack-catalog-table__sort-icon {
	font-size: 0.8em;
	line-height: 1;
	color: var( --color-steel-400 );
}

.igloorack-catalog-table__sort.is-active .igloorack-catalog-table__sort-icon {
	color: currentColor;
}

.igloorack-catalog-table tbody tr:hover {
	background: var( --color-steel-50 );
}

.igloorack-catalog-table__name {
	display: flex;
	align-items: center;
	gap: var( --space-3 );
	color: var( --color-ink );
	text-decoration: none;
	white-space: normal;
}

.igloorack-catalog-table__name:hover,
.igloorack-catalog-table__name:focus-visible {
	color: var( --color-ice-600 );
}

.igloorack-catalog-table__thumb {
	flex-shrink: 0;
	width: 48px;
	height: 36px;
	object-fit: contain;
	background: var( --color-product-canvas );
	border-radius: var( --radius-sm );
}

.igloorack-catalog-table__name-text {
	display: flex;
	flex-direction: column;
	font-weight: 600;
}

/* Row CTA: a compact outlined button that wraps (never clips) in long
   translations, e.g. "Ürünü Görüntüleyin". */
.igloorack-catalog-table__view {
	display: inline-flex;
	align-items: center;
	gap: var( --space-1 );
	padding: var( --space-1 ) var( --space-3 );
	border: 1px solid var( --color-brand-600 );
	border-radius: var( --radius-sm );
	color: var( --color-brand-600 );
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.igloorack-catalog-table__view:hover,
.igloorack-catalog-table__view:focus-visible {
	background: var( --color-brand-600 );
	color: var( --color-white );
}

/* Customize Columns: JS (catalog-filters.js) sets a space-separated
   data-hidden-columns attribute on the <table> itself; each rule below
   hides the matching data-column cells (both the <th> and every <td>
   share the same data-column value). Without JS this attribute is
   never set, so every column stays visible — the table-wrap's own
   overflow-x: auto is the contained fallback for that case, never a
   page-level scrollbar. */
.igloorack-catalog-table[data-hidden-columns~='status'] [data-column='status'],
.igloorack-catalog-table[data-hidden-columns~='model'] [data-column='model'],
.igloorack-catalog-table[data-hidden-columns~='units'] [data-column='units'],
.igloorack-catalog-table[data-hidden-columns~='width'] [data-column='width'],
.igloorack-catalog-table[data-hidden-columns~='height'] [data-column='height'],
.igloorack-catalog-table[data-hidden-columns~='depth'] [data-column='depth'],
.igloorack-catalog-table[data-hidden-columns~='ral'] [data-column='ral'],
.igloorack-catalog-table[data-hidden-columns~='usage-environment'] [data-column='usage-environment'],
.igloorack-catalog-table[data-hidden-columns~='door-type'] [data-column='door-type'],
.igloorack-catalog-table[data-hidden-columns~='design'] [data-column='design'],
.igloorack-catalog-table[data-hidden-columns~='accessory'] [data-column='accessory'] {
	display: none;
}

/* Customize Columns control: a small anchored popover next to the
   Table/Cards toggle, not a full modal. Desktop only (matches the
   table's own >=1024px breakpoint below) — the picker controls a table
   that doesn't exist below that width. */
.igloorack-column-picker {
	position: relative;
	display: none;
}

@media ( min-width: 1024px ) {
	.igloorack-column-picker {
		display: block;
	}
}

.igloorack-column-picker__panel {
	display: none;
	position: absolute;
	top: calc( 100% + var( --space-2 ) );
	inset-inline-end: 0;
	z-index: 10;
	width: 220px;
	padding: var( --space-3 );
	background: var( --color-white );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
	box-shadow: var( --shadow-md );
}

.igloorack-column-picker__panel.is-open {
	display: block;
}

.igloorack-column-picker__heading {
	margin: 0 0 var( --space-2 );
	font-family: var( --font-mono );
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --color-steel-600 );
}

.igloorack-column-picker__option {
	display: flex;
	align-items: center;
	gap: var( --space-2 );
	padding: var( --space-1 ) 0;
	font-size: 0.9rem;
	color: var( --color-ink );
}

.igloorack-column-picker__reset {
	display: block;
	width: 100%;
	margin-top: var( --space-2 );
	padding: var( --space-2 ) 0 0;
	border: 0;
	border-top: 1px solid var( --color-steel-200 );
	background: none;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: start;
	color: var( --color-ice-600 );
	cursor: pointer;
}

.igloorack-column-picker__reset:hover,
.igloorack-column-picker__reset:focus-visible {
	text-decoration: underline;
}

/* Desktop default: table visible, cards hidden. JS may toggle
   .is-cards-view on the results wrapper to swap them; without JS this
   media query alone decides. */
@media ( min-width: 1024px ) {
	.igloorack-catalog-results__cards {
		display: none;
	}

	.igloorack-catalog-results.is-cards-view .igloorack-catalog-table-wrap {
		display: none;
	}

	.igloorack-catalog-results.is-cards-view .igloorack-catalog-results__cards {
		display: grid;
	}
}

/* Below 1024px: cards only, table never creates horizontal scroll. */
@media ( max-width: 1023px ) {
	.igloorack-catalog-table-wrap {
		display: none;
	}
}

.igloorack-catalog-empty {
	max-width: 480px;
	margin: var( --space-10 ) auto;
	text-align: center;
}

.igloorack-catalog-empty__heading {
	font-size: var( --font-size-h3 );
	margin: 0 0 var( --space-3 );
}

.igloorack-catalog-empty__text {
	color: var( --color-steel-600 );
	margin: 0 0 var( --space-6 );
}

.igloorack-pagination {
	margin-top: var( --space-8 );
	display: flex;
	justify-content: center;
}

.igloorack-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	margin: 0 4px;
	padding-inline: var( --space-2 );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-sm );
	color: var( --color-ink );
	text-decoration: none;
}

.igloorack-pagination .page-numbers.current {
	background: var( --color-ink );
	border-color: var( --color-ink );
	color: var( --color-white );
}

.igloorack-pagination .page-numbers:hover:not( .current ) {
	border-color: var( --color-ice-500 );
}

/* Product card: normalized catalog fields row */

.igloorack-product-card__catalog {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-2 ) var( --space-4 );
	margin: 0;
}

.igloorack-product-card__catalog-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.igloorack-product-card__catalog-item dt {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --color-steel-500 );
}

.igloorack-product-card__catalog-item dd {
	margin: 0;
	font-weight: 600;
	color: var( --color-ink );
	font-size: 0.9rem;
}

/* Home page */

.igloorack-home {
	overflow-x: hidden;
}

/* Home: hero slider */

.igloorack-hero-slider {
	position: relative;
	overflow: hidden;
	background: var( --color-jet );
	color: var( --color-steel-200 );
	min-height: clamp( 560px, 92vh, 880px );
	isolation: isolate;
}

/* Only the front page's <main> reserves --header-fixed-height of top
   padding for the fixed overlay header (see layout.css); this section
   cancels that same amount so it renders full-bleed behind it. Both
   sides reference the one shared token, so they can't drift apart. */
.igloorack-home .igloorack-hero-slider {
	margin-top: calc( -1 * var( --header-fixed-height ) );
}

.igloorack-hero-slider__viewport {
	position: relative;
	height: clamp( 560px, 92vh, 880px );
}

.igloorack-hero-slider__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.6s ease;
	z-index: 1;
}

.igloorack-hero-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

.igloorack-hero-slider__media {
	position: absolute;
	inset: 0;
	background: var( --color-jet );
	overflow: hidden;
}

.igloorack-hero-slider__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igloorack-hero-slider__fallback-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: rgba( 255, 255, 255, 0.16 );
}

.igloorack-hero-slider__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( 100deg, var( --overlay-jet-strong ) 15%, var( --overlay-jet ) 45%, transparent 82% );
}

.igloorack-hero-slider__slide--right .igloorack-hero-slider__scrim {
	background: linear-gradient( 260deg, var( --overlay-jet-strong ) 15%, var( --overlay-jet ) 45%, transparent 82% );
}

.igloorack-hero-slider__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
}

.igloorack-hero-slider__slide--left .igloorack-hero-slider__inner,
.igloorack-hero-slider__slide--floating .igloorack-hero-slider__inner {
	justify-content: flex-start;
}

.igloorack-hero-slider__slide--right .igloorack-hero-slider__inner {
	justify-content: flex-end;
}

.igloorack-hero-slider__panel {
	max-width: 560px;
}

.igloorack-hero-slider__slide--floating .igloorack-hero-slider__panel {
	background: var( --overlay-jet-strong );
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-radius: var( --radius-md );
	padding: var( --space-8 );
	margin-block-start: var( --space-20 );
}

.igloorack-hero-slider__heading {
	color: var( --color-white );
	font-size: var( --font-size-h1 );
	margin: 0 0 var( --space-4 );
}

.igloorack-hero-slider__text {
	font-size: 1.15rem;
	line-height: 1.7;
	margin: 0 0 var( --space-6 );
	max-width: 56ch;
	color: var( --color-steel-200 );
}

.igloorack-hero-slider__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-4 );
}

.igloorack-hero-slider__control {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 3;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	border-radius: var( --radius-sm );
	background: rgba( 0, 0, 0, 0.35 );
	color: var( --color-white );
}

.igloorack-hero-slider__control:hover,
.igloorack-hero-slider__control:focus-visible {
	border-color: var( --color-ice-500 );
	color: var( --color-ice-500 );
}

.igloorack-hero-slider__control--prev {
	inset-inline-start: var( --space-6 );
}

.igloorack-hero-slider__control--next {
	inset-inline-end: var( --space-6 );
}

.igloorack-hero-slider__arrow {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

.igloorack-hero-slider__control--prev .igloorack-hero-slider__arrow {
	transform: rotate( 135deg );
	margin-inline-start: 4px;
}

.igloorack-hero-slider__control--next .igloorack-hero-slider__arrow {
	transform: rotate( -45deg );
	margin-inline-end: 4px;
}

.igloorack-hero-slider__dots {
	position: absolute;
	bottom: var( --space-6 );
	left: 50%;
	transform: translateX( -50% );
	z-index: 3;
	display: flex;
	gap: var( --space-2 );
}

.igloorack-hero-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid rgba( 255, 255, 255, 0.6 );
	background: transparent;
}

.igloorack-hero-slider__dot.is-active {
	background: var( --color-ice-500 );
	border-color: var( --color-ice-500 );
}

@media ( max-width: 640px ) {
	.igloorack-hero-slider__control {
		width: 40px;
		height: 40px;
	}

	.igloorack-hero-slider__control--prev {
		inset-inline-start: var( --space-3 );
	}

	.igloorack-hero-slider__control--next {
		inset-inline-end: var( --space-3 );
	}

	.igloorack-hero-slider__slide--floating .igloorack-hero-slider__panel {
		margin-block-start: 0;
	}
}

/* Home: CTA banner */

.igloorack-cta-banner {
	background: var( --color-jet );
	color: var( --color-steel-200 );
	padding-block: var( --space-16 );
}

.igloorack-cta-banner__inner {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --space-4 );
}

.igloorack-cta-banner .igloorack-eyebrow {
	color: var( --color-ice-500 );
	margin: 0;
}

.igloorack-cta-banner__heading {
	color: var( --color-white );
	font-size: var( --font-size-h1 );
	margin: 0;
}

.igloorack-cta-banner__text {
	margin: 0;
	font-size: 1.05rem;
}

/* Closing CTA banners' secondary contact row (phone + email) — kept
   deliberately quiet relative to the primary button: small mono type,
   muted color, a subtle separator between the two. Wraps to its own
   stacked lines on narrow viewports rather than a fixed breakpoint. */
.igloorack-cta-banner__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var( --space-2 );
	margin: var( --space-2 ) 0 0;
	font-family: var( --font-mono );
	font-size: 0.85rem;
}

.igloorack-cta-banner__contact a {
	color: var( --color-steel-300 );
	text-decoration: none;
}

.igloorack-cta-banner__contact a:hover,
.igloorack-cta-banner__contact a:focus-visible {
	color: var( --color-ice-500 );
}

.igloorack-cta-banner__contact-sep {
	color: var( --color-steel-600 );
}

/* Product page → footer gap (hardened, final declaration in this file).
   <main id="primary" class="igloorack-product igloorack-container"> is the
   element that directly precedes <footer id="colophon"> in
   single-product.php — .igloorack-stack (the <article> inside it) only
   contributes flex `gap` between its own sections, never bottom spacing of
   its own, so this single padding-bottom is the one and only thing that
   has to create the gap, regardless of whether Downloads and/or Related
   Accessories are the last section present.

   Given twice already, this still wasn't visibly showing — background-color
   is now set explicitly (previously relied on inheriting body's white
   background through a transparent .igloorack-product, which works but
   isn't visually self-evident from this rule alone), and the selector is
   scoped to WordPress's own `.single-product` body class for extra
   specificity, placed last in the cascade, so nothing earlier in
   pages.css/components.css/layout.css can win over it. If this still
   doesn't render after a hard refresh, the cause is outside this
   stylesheet (page/browser cache serving a stale copy) rather than a CSS
   specificity problem — see IGLOORACK_THEME_VERSION in functions.php. */
.single-product .igloorack-product {
	background-color: var( --color-white );
	padding-bottom: var( --space-12 );
}

@media ( max-width: 640px ) {
	.single-product .igloorack-product {
		padding-bottom: var( --space-8 );
	}
}

/* News landing page (page-templates/template-news.php) */

.igloorack-news-landing__more-heading {
	margin-top: var( --space-12 );
}

/* Single News article (single.php) — corporate newsroom presentation:
   no author/date in the hero, generous editorial rhythm, a
   comfortable ~800px reading column, and deliberate closing spacing
   before the global footer regardless of which optional sections
   (closing CTA / More News) end up rendering last. */

.igloorack-news-article-page {
	padding-bottom: calc( var( --space-20 ) + var( --space-12 ) );
}

@media ( max-width: 640px ) {
	.igloorack-news-article-page {
		padding-bottom: var( --space-16 );
	}
}

.igloorack-news-article__header {
	padding-block: var( --space-16 ) var( --space-10 );
	background: var( --color-white );
}

.igloorack-news-article__header-inner {
	max-width: 800px;
}

.igloorack-news-article__header .igloorack-breadcrumb {
	margin-bottom: var( --space-6 );
}

.igloorack-news-article__header .igloorack-eyebrow {
	margin-bottom: var( --space-4 );
}

.igloorack-news-article__title {
	font-size: var( --font-size-h1 );
	color: var( --color-ink );
	margin: 0 0 var( --space-5 );
}

.igloorack-news-article__lead {
	font-size: 1.3rem;
	line-height: 1.55;
	color: var( --color-steel-600 );
	margin: 0;
}

.igloorack-news-article__media {
	aspect-ratio: var( --aspect-wide );
	background: var( --color-jet );
}

.igloorack-news-article__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igloorack-news-article__media-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var( --color-steel-400 );
}

.igloorack-news-article__media-fallback svg {
	width: 22%;
	max-width: 220px;
	height: auto;
}

.igloorack-news-article__content {
	max-width: 800px;
	margin-inline: auto;
	padding-top: var( --space-12 );
	color: var( --color-graphite );
	font-size: 1.125rem;
	line-height: 1.8;
}

.igloorack-news-article__content > * + * {
	margin-top: var( --space-6 );
}

.igloorack-news-article__content h2,
.igloorack-news-article__content h3,
.igloorack-news-article__content h4 {
	color: var( --color-ink );
	line-height: 1.3;
}

.igloorack-news-article__content h2 {
	font-size: var( --font-size-h3 );
	margin-top: var( --space-10 );
}

.igloorack-news-article__content h3 {
	font-size: 1.2rem;
	margin-top: var( --space-8 );
}

.igloorack-news-article__content a {
	color: var( --color-ice-600 );
}

.igloorack-news-article__content img {
	max-width: 100%;
	height: auto;
	border-radius: var( --radius-md );
}

.igloorack-news-article__content figure {
	margin: 0;
}

.igloorack-news-article__content figcaption {
	margin-top: var( --space-2 );
	color: var( --color-steel-600 );
	font-size: 0.85rem;
	text-align: center;
}

.igloorack-news-article__content ul,
.igloorack-news-article__content ol {
	padding-inline-start: var( --space-6 );
}

.igloorack-news-article__content li + li {
	margin-top: var( --space-2 );
}

.igloorack-news-article__content blockquote {
	margin: 0;
	padding-block: var( --space-2 );
	padding-inline: var( --space-6 ) 0;
	border-inline-start: 3px solid var( --color-ice-500 );
	color: var( --color-ink );
	font-size: 1.25rem;
	line-height: 1.5;
	font-style: italic;
}

.igloorack-news-article__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.igloorack-news-article__content th,
.igloorack-news-article__content td {
	padding: var( --space-2 ) var( --space-3 );
	border-bottom: 1px solid var( --color-steel-200 );
	text-align: start;
}

.igloorack-news-article__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-3 );
	max-width: 800px;
	margin: var( --space-12 ) auto 0;
	padding-top: var( --space-6 );
	border-top: 1px solid var( --color-steel-200 );
}

.igloorack-news-article__published {
	margin: 0;
	color: var( --color-steel-500 );
	font-family: var( --font-mono );
	font-size: 0.8rem;
}

.igloorack-news-article__back {
	color: var( --color-ice-600 );
	font-weight: 600;
	text-decoration: none;
}

.igloorack-news-article__back:hover,
.igloorack-news-article__back:focus-visible {
	text-decoration: underline;
}

.igloorack-news-article__cta {
	margin-top: var( --space-16 );
}

.igloorack-news-article__related {
	margin-top: var( --space-4 );
}

/* -----------------------------------------------------------------------
   Right-to-left (Arabic) adjustments — see the matching section at the end
   of components.css. Scoped to [dir="rtl"]; never applies to LTR.
   ----------------------------------------------------------------------- */

/* The mobile filter drawer slides in from the reading-start (right) edge.
   :not(.is-open) keeps the open state's translateX( 0 ) authoritative. */
@media ( max-width: 1023px ) {
	[dir="rtl"] [data-catalog-filter-panel].js-drawer:not( .is-open ) {
		transform: translateX( 100% );
	}
}

/* Hero slider arrows: "previous" points right, "next" points left. */
[dir="rtl"] .igloorack-hero-slider__control--prev .igloorack-hero-slider__arrow {
	transform: rotate( -45deg );
}

[dir="rtl"] .igloorack-hero-slider__control--next .igloorack-hero-slider__arrow {
	transform: rotate( 135deg );
}