/*
 * Reusable UI components.
 *
 * Badges, breadcrumb, section heading/eyebrow, product gallery, spec
 * table, download list, related-product cards, catalog header,
 * category nav, product card, pagination (all from earlier stages —
 * preserved untouched so the product/catalog pages keep working),
 * plus this stage's site header/nav/dropdowns, buttons, home-page
 * section components, footer, and dashboard visual.
 * .screen-reader-text/.igloorack-skip-link/:focus-visible live in
 * base.css. More components (tabs, accordion, modal, CF7 overrides)
 * are added in later stages per docs/architecture.md §6.
 *
 * @package IglooRack
 */

/* Badges */

.igloorack-badge {
	display: inline-block;
	padding: var( --space-1 ) var( --space-3 );
	border-radius: var( --radius-sm );
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.igloorack-badge--featured {
	background: var( --color-cyan-400 );
	color: var( --color-ink );
}

/* Breadcrumb */

.igloorack-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-2 );
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.85rem;
	color: var( --color-steel-600 );
}

.igloorack-breadcrumb__list li {
	display: flex;
	align-items: center;
	gap: var( --space-2 );
}

.igloorack-breadcrumb__list li:not( :last-child )::after {
	content: '/';
	color: var( --color-steel-300 );
}

.igloorack-breadcrumb__list a {
	color: var( --color-steel-600 );
	text-decoration: none;
}

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

.igloorack-breadcrumb__list [aria-current='page'] {
	color: var( --color-ink );
	font-weight: 600;
}

/* Section heading / eyebrow / intro */

.igloorack-eyebrow {
	display: inline-block;
	color: var( --color-ice-600 );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var( --font-size-eyebrow );
	font-weight: 700;
	margin: 0 0 var( --space-3 );
}

.igloorack-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.igloorack-eyebrow a:hover,
.igloorack-eyebrow a:focus-visible {
	text-decoration: underline;
}

.igloorack-section-heading {
	font-size: var( --font-size-h2 );
	color: var( --color-ink );
	margin: 0 0 var( --space-4 );
	padding-bottom: var( --space-2 );
	border-bottom: 1px solid var( --color-steel-200 );
}

.igloorack-section__intro {
	color: var( --color-graphite );
	line-height: 1.65;
	max-width: var( --measure );
	margin: var( --space-2 ) 0 0;
	font-size: 1.05rem;
}

.igloorack-section--muted {
	background: var( --color-steel-50 );
}

.igloorack-section--steel {
	background: var( --color-steel-blue-50 );
}

.igloorack-section--dark {
	background: var( --color-ink );
	color: var( --color-steel-200 );
}

.igloorack-section--dark .igloorack-eyebrow,
.igloorack-hero-slider .igloorack-eyebrow,
.igloorack-feature-spotlight .igloorack-eyebrow,
.igloorack-cta-banner .igloorack-eyebrow,
.igloorack-catalog-hero .igloorack-eyebrow {
	color: var( --color-ice-500 );
}

/* Catalog hero's breadcrumb sits on the same dark background — the
   base .igloorack-breadcrumb is built for a light one. */
.igloorack-catalog-hero .igloorack-breadcrumb__list,
.igloorack-catalog-hero .igloorack-breadcrumb__list a {
	color: var( --color-steel-300 );
}

.igloorack-catalog-hero .igloorack-breadcrumb__list li:not( :last-child )::after {
	color: var( --color-steel-500 );
}

.igloorack-catalog-hero .igloorack-breadcrumb__list [aria-current='page'] {
	color: var( --color-white );
}

/* Status badges — Products archive/table/card catalog status. Colors
   are intentionally restrained (no green/red alarm styling) except
   Discontinued, which reads clearly as unavailable. */
.igloorack-status-badge {
	display: inline-block;
	padding: 2px var( --space-2 );
	border-radius: var( --radius-sm );
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var( --color-steel-100 );
	color: var( --color-steel-600 );
}

.igloorack-status-badge--available {
	background: #e4f5ea;
	color: #0a7a3c;
}

.igloorack-status-badge--made-to-order,
.igloorack-status-badge--rd-program {
	background: #fbeed6;
	color: #8a5b00;
}

.igloorack-status-badge--discontinued {
	background: var( --color-steel-200 );
	color: var( --color-steel-600 );
	text-decoration: line-through;
}

.igloorack-section--dark .igloorack-section-heading {
	color: var( --color-white );
	border-bottom-color: var( --color-graphite );
}

.igloorack-section--dark .igloorack-section__intro {
	color: var( --color-steel-300 );
}

/* Product gallery (product-detail page) */

.igloorack-product-gallery__main {
	position: relative;
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-lg );
	overflow: hidden;
	/* Product image standard: 4:3 black canvas (renders are prepared for black). */
	background: var( --color-product-canvas );
}

.igloorack-product-gallery__zoom-trigger {
	display: block;
	position: relative;
	aspect-ratio: var( --aspect-card );
}

.igloorack-product-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	/* Product photography may have transparent, white, black or
	   neutral backgrounds and varying native ratios — contain (never
	   cover) so nothing is ever cropped or stretched. */
	object-fit: contain;
}

.igloorack-product-gallery__zoom-icon {
	position: absolute;
	inset-inline-end: var( --space-3 );
	bottom: var( --space-3 );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var( --radius-sm );
	background: var( --color-white );
	border: 1px solid var( --color-steel-200 );
	color: var( --color-ink );
	opacity: 0;
	transition: opacity 0.15s ease;
}

.igloorack-product-gallery__zoom-icon svg {
	width: 18px;
	height: 18px;
}

.igloorack-product-gallery__zoom-trigger:hover .igloorack-product-gallery__zoom-icon,
.igloorack-product-gallery__zoom-trigger:focus-visible .igloorack-product-gallery__zoom-icon {
	opacity: 1;
}

.igloorack-product-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --color-white );
	border: 1px solid var( --color-steel-200 );
	color: var( --color-ink );
}

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

.igloorack-product-gallery__nav svg {
	width: 18px;
	height: 18px;
}

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

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

.igloorack-product-gallery__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --space-2 );
	aspect-ratio: var( --aspect-square );
	color: var( --color-steel-400 );
}

.igloorack-product-gallery__placeholder svg {
	width: 48px;
	height: 48px;
}

.igloorack-product-gallery__placeholder-text {
	font-size: 0.85rem;
}

.igloorack-product-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-2 );
	list-style: none;
	margin: var( --space-4 ) 0 0;
	padding: 0;
}

.igloorack-product-gallery__thumb-link {
	display: block;
	border: 2px solid transparent;
	border-radius: var( --radius-sm );
	overflow: hidden;
	line-height: 0;
}

.igloorack-product-gallery__thumb-link:hover,
.igloorack-product-gallery__thumb-link:focus-visible {
	border-color: var( --color-ice-500 );
}

.igloorack-product-gallery__thumb-link.is-active {
	border-color: var( --color-ice-600 );
}

.igloorack-product-gallery__thumb-image {
	display: block;
	width: 64px;
	height: 48px;
	object-fit: contain;
	background: var( --color-product-canvas );
}

/* Touch devices have no hover state, so the zoom-icon's hover-only
   reveal above would otherwise never show — keep it visible whenever
   the primary pointer can't hover, so tapping the main image to open
   the lightbox stays discoverable on mobile. */
@media ( hover: none ) {
	.igloorack-product-gallery__zoom-icon {
		opacity: 1;
	}
}

@media ( max-width: 640px ) {
	/* Many gallery images wrapping onto several rows eats vertical
	   space and reads as cramped on a narrow screen — a single
	   horizontally-scrollable strip (the common, tap-friendly mobile
	   product-gallery pattern) stays compact and predictable instead. */
	.igloorack-product-gallery__thumbs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-bottom: var( --space-1 );
		-webkit-overflow-scrolling: touch;
	}

	.igloorack-product-gallery__thumb-item {
		flex-shrink: 0;
		scroll-snap-align: start;
	}

	/* Slightly larger tap targets than the desktop 40px, closer to the
	   ~44px accessible touch-target guideline. */
	.igloorack-product-gallery__nav {
		width: 44px;
		height: 44px;
	}
}

/* Product gallery lightbox — reuses .igloorack-modal's fixed-overlay/
   backdrop/z-index/open-state mechanics (assets/css/components.css,
   "Shared modal" block) but its own dialog: full-bleed and dark,
   built for a large contained image rather than a white content card. */

.igloorack-gallery-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	max-width: 1100px;
	max-height: calc( 100vh - var( --space-8 ) );
}

.igloorack-gallery-lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.igloorack-gallery-lightbox__close {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var( --radius-sm );
	color: var( --color-white );
	font-size: 1.6rem;
	line-height: 1;
}

.igloorack-gallery-lightbox__close:hover,
.igloorack-gallery-lightbox__close:focus-visible {
	background: rgba( 255, 255, 255, 0.12 );
}

.igloorack-gallery-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.08 );
	color: var( --color-white );
}

.igloorack-gallery-lightbox__nav:hover,
.igloorack-gallery-lightbox__nav:focus-visible {
	background: rgba( 255, 255, 255, 0.18 );
}

.igloorack-gallery-lightbox__nav svg {
	width: 22px;
	height: 22px;
}

.igloorack-gallery-lightbox__nav--prev {
	inset-inline-start: 0;
}

.igloorack-gallery-lightbox__nav--next {
	inset-inline-end: 0;
}

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

/* Product detail accordion (Product Description / Also Required /
   Approvals & Compliance / CAD & 3D / Downloads & Documentation /
   Accessories) — restrained industrial styling: crisp borders, no
   drop shadows, a cyan-accented +/- indicator. Toggled by the existing
   generic assets/js/modules/accordion.js via the shared
   .igloorack-accordion__trigger class; the [hidden] attribute in the
   PHP-rendered markup is the safe no-JS default (every section simply
   stays visible if the script fails to load — see accordion.js's own
   docblock). */

.igloorack-product__accordion {
	border-top: 1px solid var( --color-steel-200 );
}

.igloorack-accordion-item {
	border-bottom: 1px solid var( --color-steel-200 );
}

.igloorack-accordion-item__heading {
	margin: 0;
}

.igloorack-accordion-item__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-4 );
	width: 100%;
	padding: var( --space-5 ) 0;
	text-align: start;
	font-size: 1.1rem;
	font-weight: 700;
	color: var( --color-ink );
}

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

.igloorack-accordion-item__indicator {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.igloorack-accordion-item__indicator::before,
.igloorack-accordion-item__indicator::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate( -50%, -50% );
}

.igloorack-accordion-item__indicator::before {
	width: 14px;
	height: 2px;
}

.igloorack-accordion-item__indicator::after {
	width: 2px;
	height: 14px;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.igloorack-accordion-item__trigger[ aria-expanded='true' ] .igloorack-accordion-item__indicator::after {
	opacity: 0;
	transform: translate( -50%, -50% ) rotate( 90deg );
}

.igloorack-accordion-item__panel {
	padding: 0 0 var( --space-8 );
}

/* Product Description accordion panel: canonical table (reuses
   .igloorack-specs-table via product-specs-table.php) + Supply
   Includes + additional Technical Specifications, each its own
   readable subsection. */

.igloorack-product-description__supply,
.igloorack-product-description__specs {
	margin-top: var( --space-8 );
}

.igloorack-product-description__supply-heading,
.igloorack-product-description__specs-heading {
	font-size: 1rem;
	color: var( --color-ink );
	margin: 0 0 var( --space-3 );
}

.igloorack-product-description__supply-text {
	color: var( --color-graphite );
	line-height: 1.6;
}

.igloorack-product-description__supply-text > * + * {
	margin-top: var( --space-3 );
}

/* Also Required — deliberately distinct from Related Accessories
   below (quantity + note carried per row) though visually related. */

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

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

.igloorack-also-required__item {
	display: flex;
	gap: var( --space-4 );
	padding: var( --space-4 );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
}

.igloorack-also-required__media {
	flex-shrink: 0;
	display: block;
	width: 72px;
	height: 72px;
	border-radius: var( --radius-sm );
	overflow: hidden;
	background: var( --color-steel-50 );
}

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

.igloorack-also-required__placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.igloorack-also-required__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-1 );
	min-width: 0;
}

.igloorack-also-required__title {
	font-weight: 700;
	color: var( --color-ink );
	text-decoration: none;
}

.igloorack-also-required__title:hover,
.igloorack-also-required__title:focus-visible {
	color: var( --color-ice-600 );
	text-decoration: underline;
}

.igloorack-also-required__sku {
	font-family: var( --font-mono );
	font-size: 0.8rem;
	color: var( --color-steel-500 );
}

.igloorack-also-required__quantity {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --color-ice-600 );
}

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

.igloorack-also-required__cta {
	margin-top: var( --space-1 );
	font-size: 0.85rem;
	font-weight: 700;
	color: var( --color-ice-600 );
	text-decoration: none;
}

.igloorack-also-required__cta:hover,
.igloorack-also-required__cta:focus-visible {
	text-decoration: underline;
}

/* Approvals & Compliance — clean document rows, same shared-border
   convention as .igloorack-downloads-list. */

.igloorack-approvals {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-sm );
	overflow: hidden;
}

.igloorack-approval + .igloorack-approval {
	border-top: 1px solid var( --color-steel-200 );
}

.igloorack-approval {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-3 );
	padding: var( --space-4 );
}

.igloorack-approval__body {
	display: flex;
	flex-direction: column;
	gap: var( --space-1 );
}

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

.igloorack-approval__type {
	margin-inline-start: var( --space-2 );
	padding: 2px var( --space-2 );
	border-radius: var( --radius-sm );
	background: var( --color-steel-100 );
	color: var( --color-steel-600 );
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.igloorack-approval__meta,
.igloorack-approval__note {
	font-size: 0.85rem;
	color: var( --color-steel-600 );
}

.igloorack-approval__action {
	flex-shrink: 0;
	padding: var( --space-2 ) var( --space-4 );
	border: 1px solid var( --color-steel-300 );
	border-radius: var( --radius-sm );
	color: var( --color-ink );
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

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

/* CAD & 3D — engineering download rows (same convention as Downloads)
   plus a restrained, inert placeholder for a future GLB preview; no
   viewer loads here. */

.igloorack-cad-assets {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-sm );
	overflow: hidden;
}

.igloorack-cad-asset + .igloorack-cad-asset {
	border-top: 1px solid var( --color-steel-200 );
}

.igloorack-cad-asset__link {
	display: flex;
	align-items: center;
	gap: var( --space-3 );
	padding: var( --space-4 );
	text-decoration: none;
	color: var( --color-ink );
}

.igloorack-cad-asset__link:hover,
.igloorack-cad-asset__link:focus-visible {
	background: var( --color-steel-50 );
}

.igloorack-cad-asset__format {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	padding: var( --space-1 ) var( --space-2 );
	border-radius: var( --radius-sm );
	background: var( --color-ink );
	color: var( --color-white );
	font-family: var( --font-mono );
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.igloorack-cad-asset__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --space-2 ) var( --space-4 );
}

.igloorack-cad-asset__title {
	font-weight: 600;
}

.igloorack-cad-asset__meta,
.igloorack-cad-asset__note {
	font-size: 0.85rem;
	color: var( --color-steel-600 );
}

/* One column, full width — this card is a technical workspace (GLB
   viewer + measurement + section-cut tools), not a small decorative
   thumbnail, so it needs real room rather than sharing a narrow grid
   cell with siblings. Multiple preview entries (a real, if uncommon,
   repeater possibility) simply stack. */
.igloorack-cad-preview-list {
	list-style: none;
	margin: var( --space-4 ) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --space-6 );
}

/* .igloorack-cad-preview: assets/js/modules/product-glb-viewer.js
   progressively enhances __viewport with a live Three.js canvas —
   see that module and cad-assets.php's docblock for exactly how. The
   'idle' .igloorack-cad-preview__state (icon + badge) is the real,
   fully styled no-JS fallback, not a loading placeholder — it is what
   permanently renders if the viewer script never runs. */

.igloorack-cad-preview {
	display: flex;
	flex-direction: column;
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
	overflow: hidden;
	background: var( --color-white );
}

/* Fullscreen targets the whole CARD, not just the viewport — the
   toolbar, Section Cut panel, and measurement-result/scale-warning
   text all live as viewport SIBLINGS (not descendants), and only an
   element's own descendants stay rendered while it's the fullscreen
   element. Requesting fullscreen on anything narrower than the card
   would make every one of those controls disappear the moment
   fullscreen starts — see product-glb-viewer.js's toggleFullscreen(). */
.igloorack-cad-preview:fullscreen,
.igloorack-cad-preview:-webkit-full-screen {
	width: 100vw;
	height: 100vh;
	background: var( --color-ink );
}

.igloorack-cad-preview:fullscreen .igloorack-cad-preview__viewport,
.igloorack-cad-preview:-webkit-full-screen .igloorack-cad-preview__viewport {
	flex: 1 1 auto;
	height: auto;
}

/* A fixed height (not aspect-ratio) — this is a real technical
   workspace: comfortable enough for measurement and section-cut work,
   not a small decorative thumbnail that happens to scale with card
   width. 480px sits in the middle of the ~420-600px desktop target;
   reduced on narrow/mobile viewports below. */
.igloorack-cad-preview__viewport {
	position: relative;
	height: 480px;
	background: var( --color-steel-50 );
	border-bottom: 1px solid var( --color-steel-200 );
	color: var( --color-ice-600 );
}

@media ( max-width: 640px ) {
	.igloorack-cad-preview__viewport {
		height: 320px;
	}
}

/* Measurement mode's own cursor affordance — toggled by
   product-glb-viewer.js via a data attribute, never inline style. */
.igloorack-cad-preview__viewport[ data-igloorack-glb-measuring ] canvas {
	cursor: crosshair;
}

/* :not([hidden]) rather than an unconditional `display`, on both the
   canvas and each state below: the native `hidden` attribute already
   applies `display: none` via the UA stylesheet, but that's a single
   attribute selector — an unconditional class-selector `display`
   declaration later in the cascade has EQUAL specificity and wins,
   silently defeating `hidden` and leaving every state visibly stacked
   at once. Gating each `display` behind `:not([hidden])` makes the
   `hidden` attribute (set via product-glb-viewer.js's setState() /
   canvas.hidden) the single authority for which one of {idle, loading,
   error, canvas} is ever actually visible — never opacity, never more
   than one at a time. */

.igloorack-cad-preview__viewport canvas:not( [hidden] ) {
	display: block;
	width: 100%;
	height: 100%;
}

.igloorack-cad-preview__state {
	position: absolute;
	inset: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --space-2 );
	padding: var( --space-4 );
	text-align: center;
}

.igloorack-cad-preview__state:not( [hidden] ) {
	display: flex;
}

.igloorack-cad-preview__state--error {
	color: var( --color-steel-600 );
}

.igloorack-cad-preview__icon svg {
	width: 32px;
	height: 32px;
}

.igloorack-cad-preview__icon--error {
	color: var( --color-steel-400 );
}

.igloorack-cad-preview__badge {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --color-steel-500 );
}

.igloorack-cad-preview__state--error .igloorack-cad-preview__badge {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
	max-width: 32ch;
}

/* A restrained spin-only loading indicator — no extra icon set, no
   dependency, just a bordered circle animated with the design tokens'
   own accent color. */
.igloorack-cad-preview__spinner {
	width: 28px;
	height: 28px;
	border: 2px solid var( --color-steel-200 );
	border-top-color: var( --color-ice-600 );
	border-radius: 50%;
	animation: igloorack-cad-preview-spin 0.8s linear infinite;
}

@media ( prefers-reduced-motion: reduce ) {
	.igloorack-cad-preview__spinner {
		animation-duration: 2s;
	}
}

@keyframes igloorack-cad-preview-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Measurement DOM label — created and positioned entirely by
   product-glb-viewer.js (left/top set inline, in pixels, per frame the
   camera moves); this class only carries its restrained visual design.
   Compact, dark/graphite background with white text, tracking the 3D
   measurement line's midpoint — never a large tooltip. */
.igloorack-cad-preview__measurement-label {
	position: absolute;
	transform: translate( -50%, -50% );
	padding: 2px var( --space-2 );
	border-radius: var( --radius-sm );
	background: var( --color-graphite );
	color: var( --color-white );
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
	z-index: 2;
}

.igloorack-cad-preview__scale-warning {
	margin: 0;
	padding: var( --space-3 ) var( --space-4 );
	background: var( --color-steel-50 );
	border-bottom: 1px solid var( --color-steel-200 );
	font-size: 0.8rem;
	color: var( --color-graphite );
}

.igloorack-cad-preview__measurement-result {
	margin: 0;
	padding: var( --space-3 ) var( --space-4 );
	background: var( --color-steel-50 );
	border-bottom: 1px solid var( --color-steel-200 );
	font-size: 0.85rem;
	font-weight: 700;
	color: var( --color-ink );
}

.igloorack-cad-preview__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-1 );
	padding: var( --space-3 ) var( --space-4 ) var( --space-4 );
}

.igloorack-cad-preview__title {
	font-weight: 600;
	color: var( --color-ink );
}

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

/* Toolbar — three role="group" clusters (View / Tools / File), each a
   row of small bordered technical buttons rather than the site's large
   CTA .igloorack-button (too heavy for a dense row of six-plus
   controls) or the earlier plain-text-link row (not enough presence
   for a real toggle-state toolbar). Wraps on narrow/mobile widths
   rather than overflowing. */
.igloorack-cad-preview__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-2 ) var( --space-5 );
	padding: var( --space-3 ) var( --space-4 );
	border-bottom: 1px solid var( --color-steel-200 );
	background: var( --color-steel-50 );
}

.igloorack-cad-preview__toolbar-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-2 );
}

.igloorack-cad-preview__action {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 var( --space-3 );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-sm );
	background: var( --color-white );
	color: var( --color-steel-600 );
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}

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

.igloorack-cad-preview__action--download {
	color: var( --color-ice-600 );
	border-color: var( --color-ice-600 );
}

/* Active/pressed toggle state — a filled background, not merely a
   color change, so it reads as "on" through shape/fill as well as
   hue (never color alone). Covers Measure, Section Cut, Fullscreen and
   Reverse — every toggle button in this toolbar uses aria-pressed. */
.igloorack-cad-preview__action[ aria-pressed='true' ] {
	background: var( --color-ice-600 );
	border-color: var( --color-ice-600 );
	color: var( --color-white );
}

.igloorack-cad-preview__action[ aria-pressed='true' ]:hover,
.igloorack-cad-preview__action[ aria-pressed='true' ]:focus-visible {
	background: var( --color-ice-500 );
	border-color: var( --color-ice-500 );
	color: var( --color-white );
}

/* Section Cut control panel — shown only while Section Cut is enabled
   (product-glb-viewer.js toggles [hidden]; :not([hidden]) is what
   actually authorizes `display`, matching this file's own established
   pattern for .igloorack-cad-preview__state above, so this panel can
   never fall into the same overlapping-content bug). */
.igloorack-cad-preview__section-panel {
	flex-direction: column;
	gap: var( --space-3 );
	padding: var( --space-4 );
	border-bottom: 1px solid var( --color-steel-200 );
	background: var( --color-steel-50 );
}

.igloorack-cad-preview__section-panel:not( [hidden] ) {
	display: flex;
}

.igloorack-cad-preview__section-row {
	display: flex;
	align-items: center;
	gap: var( --space-3 );
	flex-wrap: wrap;
}

.igloorack-cad-preview__section-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --color-steel-600 );
}

.igloorack-cad-preview__section-axes {
	display: flex;
	gap: var( --space-3 );
}

.igloorack-cad-preview__section-axis-label {
	display: inline-flex;
	align-items: center;
	gap: var( --space-1 );
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --color-ink );
	cursor: pointer;
}

.igloorack-cad-preview__section-axis-label input {
	accent-color: var( --color-ice-600 );
}

.igloorack-cad-preview__section-slider {
	flex: 1 1 auto;
	min-width: 160px;
	accent-color: var( --color-ice-600 );
}

/* Downloads & Documentation grouped by Category — each group reuses
   .igloorack-downloads-list/.igloorack-download unchanged. */

.igloorack-downloads-group + .igloorack-downloads-group {
	margin-top: var( --space-6 );
}

.igloorack-downloads-group__heading {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --color-steel-600 );
	margin: 0 0 var( --space-3 );
}

/* Product meta list */

.igloorack-product__meta-list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-6 );
	margin: 0;
}

.igloorack-product__meta-item dt {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --color-steel-500 );
	margin: 0 0 var( --space-1 );
}

.igloorack-product__meta-item dd {
	font-family: var( --font-mono );
	font-size: 0.95rem;
	color: var( --color-ink );
	margin: 0;
}

/* Specifications table */

.igloorack-specs-group + .igloorack-specs-group {
	margin-top: var( --space-6 );
}

.igloorack-specs-group__heading {
	font-size: 1rem;
	color: var( --color-ink );
	margin: 0 0 var( --space-2 );
}

.igloorack-specs-table-wrap {
	overflow-x: auto;
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
}

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

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

.igloorack-specs-table tr:last-child th,
.igloorack-specs-table tr:last-child td {
	border-bottom: none;
}

.igloorack-specs-table thead th {
	background: var( --color-steel-50 );
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --color-steel-600 );
	white-space: nowrap;
}

.igloorack-specs-table td {
	font-family: var( --font-mono );
}

/* Downloads — one shared-border technical document list, not a stack of
   individually-rounded chips: restrained radius on the container only,
   rows separated by a hairline divider. */

.igloorack-downloads-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-sm );
	overflow: hidden;
}

.igloorack-download + .igloorack-download {
	border-top: 1px solid var( --color-steel-200 );
}

.igloorack-download__link {
	display: flex;
	align-items: center;
	gap: var( --space-3 );
	padding: var( --space-4 );
	text-decoration: none;
	color: var( --color-ink );
}

.igloorack-download__link:hover,
.igloorack-download__link:focus-visible {
	background: var( --color-steel-50 );
}

.igloorack-download__icon {
	flex-shrink: 0;
	width: 20px;
	height: 24px;
	color: var( --color-steel-500 );
}

.igloorack-download__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --space-2 ) var( --space-4 );
}

.igloorack-download__title {
	font-weight: 600;
}

.igloorack-download__meta,
.igloorack-download__size {
	font-size: 0.85rem;
	color: var( --color-steel-600 );
}

/* Product image canvas — the presentation standard for product and
   accessory imagery: a 4:3 frame on a solid black canvas (IglooRack
   renders are prepared for black), the image CONTAINED — never cropped,
   never stretched; any unused area is letter/pillar-boxed in black.
   Used by product cards, the accessories rail, the catalog table thumbs,
   the featured rail and the product gallery. */

.igloorack-media-canvas {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var( --aspect-card );
	background: var( --color-product-canvas );
	overflow: hidden;
}

.igloorack-media-canvas__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.igloorack-media-canvas__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var( --color-steel-600 );
}

.igloorack-media-canvas__placeholder svg {
	width: 40px;
	height: 40px;
}

/* Accessories (product-detail page, related-products.php) — a full-width
   section below the accordion: heading + arrows, type filter chips, and
   a horizontal rail of large cards (native scroll + snap; arrows and
   filter via assets/js/modules/accessories-rail.js). */

.igloorack-accessories {
	margin-top: var( --space-12 );
	padding-top: var( --space-8 );
	border-top: 1px solid var( --color-steel-200 );
	scroll-margin-top: calc( var( --header-fixed-height ) + var( --space-6 ) );
}

.igloorack-accessories__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-4 );
}

.igloorack-accessories__title {
	margin: 0;
	font-size: var( --font-size-h2 );
}

.igloorack-accessories__nav {
	display: flex;
	gap: var( --space-2 );
}

.igloorack-accessories__nav[hidden] {
	display: none;
}

.igloorack-accessories__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var( --color-steel-300 );
	border-radius: 999px;
	background: var( --color-white );
	color: var( --color-ink );
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.igloorack-accessories__arrow:hover:not( :disabled ),
.igloorack-accessories__arrow:focus-visible {
	border-color: var( --color-brand-600 );
	color: var( --color-brand-600 );
}

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

.igloorack-accessories__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-2 );
	margin-top: var( --space-4 );
}

.igloorack-accessories__filters[hidden] {
	display: none;
}

.igloorack-accessories__chip {
	padding: var( --space-2 ) var( --space-4 );
	border: 1px solid var( --color-steel-300 );
	border-radius: 999px;
	background: var( --color-white );
	color: var( --color-ink );
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.igloorack-accessories__chip:hover {
	border-color: var( --color-brand-600 );
}

.igloorack-accessories__chip[aria-pressed="true"] {
	border-color: var( --color-ink );
	background: var( --color-ink );
	color: var( --color-white );
}

.igloorack-accessories__chip-count {
	font-weight: 400;
	opacity: 0.75;
}

.igloorack-accessories__track {
	display: grid;
	grid-auto-flow: column;
	/* ~4 cards per view on desktop, a peek of the next card on smaller
	   screens so the rail reads as scrollable. */
	grid-auto-columns: calc( ( 100% - 3 * var( --space-6 ) ) / 4 );
	gap: var( --space-6 );
	margin: var( --space-6 ) 0 0;
	padding: 0 0 var( --space-2 );
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

@media ( max-width: 1023px ) {
	.igloorack-accessories__track {
		grid-auto-columns: calc( ( 100% - var( --space-6 ) ) / 2.3 );
	}
}

@media ( max-width: 640px ) {
	.igloorack-accessories__track {
		grid-auto-columns: 78%;
		gap: var( --space-4 );
	}
}

.igloorack-accessory-card {
	min-width: 0;
	scroll-snap-align: start;
}

.igloorack-accessory-card[hidden] {
	display: none;
}

.igloorack-accessory-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
	overflow: hidden;
	background: var( --color-white );
	color: var( --color-ink );
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.igloorack-accessory-card__link:hover,
.igloorack-accessory-card__link:focus-visible {
	border-color: var( --color-brand-600 );
	box-shadow: var( --shadow-md );
}

.igloorack-accessory-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var( --space-2 );
	padding: var( --space-4 );
}

.igloorack-accessory-card__sku {
	font-family: var( --font-mono );
	font-size: 0.8rem;
	color: var( --color-steel-600 );
}

.igloorack-accessory-card__title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.igloorack-accessory-card__cta {
	margin-top: auto;
	padding-top: var( --space-2 );
	color: var( --color-brand-600 );
	font-size: 0.9rem;
	font-weight: 700;
}

/* Catalog header (catalog/category archive pages) */

.igloorack-catalog__header {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
	padding-bottom: var( --space-6 );
	border-bottom: 1px solid var( --color-steel-200 );
}

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

.igloorack-catalog__description {
	color: var( --color-graphite );
	line-height: 1.6;
	max-width: var( --measure );
}

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

.igloorack-catalog__count {
	font-size: 0.85rem;
	color: var( --color-steel-600 );
	margin: 0;
}

.igloorack-catalog__empty {
	color: var( --color-steel-600 );
	padding: var( --space-8 ) 0;
}

/* Catalog category navigation (catalog/category archive pages) */

.igloorack-category-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-2 );
	list-style: none;
	margin: 0;
	padding: 0;
}

.igloorack-category-nav__link {
	display: inline-block;
	padding: var( --space-2 ) var( --space-4 );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-sm );
	color: var( --color-ink );
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
}

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

.igloorack-category-nav__link.is-active {
	background: var( --color-ink );
	border-color: var( --color-ink );
	color: var( --color-white );
}

/* Product card (catalog/category archive pages) */

.igloorack-product-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
	overflow: hidden;
	background: var( --color-white );
}

.igloorack-product-card__media {
	/* Product image standard: 4:3 black canvas, contained (see .igloorack-media-canvas). */
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var( --aspect-card );
	background: var( --color-product-canvas );
}

.igloorack-product-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.igloorack-product-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var( --color-steel-600 );
}

.igloorack-product-card__placeholder svg {
	width: 40px;
	height: 40px;
}

.igloorack-product-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-2 );
	padding: var( --space-4 );
	flex-grow: 1;
}

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

.igloorack-product-card__title {
	font-size: 1.05rem;
	margin: 0;
}

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

.igloorack-product-card__title a:hover,
.igloorack-product-card__title a:focus-visible {
	color: var( --color-ice-600 );
	text-decoration: underline;
}

.igloorack-product-card__tagline {
	color: var( --color-graphite );
	font-size: 0.9rem;
	margin: 0;
}

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

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

.igloorack-product-card__meta-item dd {
	font-family: var( --font-mono );
	font-size: 0.85rem;
	color: var( --color-ink );
	margin: 0;
}

.igloorack-product-card__excerpt {
	color: var( --color-steel-600 );
	font-size: 0.85rem;
	line-height: 1.5;
	margin: 0;
}

/* Card CTA: a full-width outlined button pinned to the card bottom;
   the label wraps (never clips) in long translations. */
.igloorack-product-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --space-2 );
	align-self: stretch;
	margin-top: auto;
	padding: var( --space-2 ) var( --space-4 );
	border: 1px solid var( --color-brand-600 );
	border-radius: var( --radius-sm );
	color: var( --color-brand-600 );
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	overflow-wrap: anywhere;
}

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

/* WordPress default pagination markup (the_posts_pagination()) */

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-2 );
	margin-top: var( --space-4 );
}

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

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
	border-color: var( --color-ice-500 );
}

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

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* Buttons */

.igloorack-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var( --space-3 ) var( --space-6 );
	border-radius: var( --radius-sm );
	font-size: var( --font-size-button );
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 1px solid transparent;
}

.igloorack-button--compact {
	min-height: 40px;
	padding: var( --space-2 ) var( --space-4 );
}

/* Primary CTA = the logo blue (tokens.css --color-brand-*). Hover/active
   go DARKER (never lighter) so white text contrast only improves. */
.igloorack-button--primary {
	background: var( --color-brand-600 );
	color: var( --color-white );
}

.igloorack-button--primary:hover {
	background: var( --color-brand-700 );
}

.igloorack-button--primary:active {
	background: var( --color-brand-800 );
	box-shadow: inset 0 1px 3px rgba( 10, 12, 14, 0.35 );
}

.igloorack-button--primary:focus-visible {
	outline: 2px solid var( --color-brand-600 );
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var( --color-brand-focus );
}

.igloorack-button--secondary {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.igloorack-button--secondary:hover {
	border-color: var( --color-ice-500 );
	color: var( --color-ice-500 );
}

.igloorack-button--secondary:active {
	background: rgba( 46, 143, 255, 0.08 );
}

/* Left-aligned button row — for anywhere multiple .igloorack-button
   elements sit side by side without the centered layout
   .igloorack-cta-banner__actions is specifically built for. */
.igloorack-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-4 );
}

.igloorack-text-link {
	display: inline-flex;
	align-items: center;
	gap: var( --space-1 );
	color: var( --color-ice-600 );
	font-weight: 600;
	text-decoration: none;
}

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

.igloorack-section--dark .igloorack-text-link,
.igloorack-strategic__panel--rd .igloorack-text-link {
	color: var( --color-ice-500 );
}

/* Site branding */

.igloorack-site-branding__text {
	color: var( --color-white );
	text-decoration: none;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: 0.01em;
}

.igloorack-site-branding img {
	max-height: 52px;
	width: auto;
}

/* Technical brand strip */

.igloorack-tech-strip__text {
	margin: 0;
	/* Asymmetric on purpose: keeps the strip's own top padding (and so
	   its height from the very top edge of the page) unchanged, and
	   leaves .igloorack-site-header__inner's own padding-block --
	   which the logo/nav/Contact button all share -- completely
	   untouched; only the gap between this row and the main nav row
	   below it is reduced. */
	padding-block: var( --space-2 ) var( --space-1 );
	color: var( --color-steel-300 );
	font-family: var( --font-mono );
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-align: center;
}

.igloorack-tech-strip__divider {
	color: var( --color-ice-500 );
	margin-inline: var( --space-2 );
}

@media ( max-width: 640px ) {
	.igloorack-tech-strip__text {
		font-size: 0.6rem;
		/* Tight enough that the longest translation (Spanish) still fits a
		   390px screen on one line; the scroll stays as a last resort. */
		letter-spacing: 0.02em;
		white-space: nowrap;
		overflow-x: auto;
		text-align: start;
	}

	.igloorack-tech-strip__divider {
		margin-inline: var( --space-1 );
	}
}

/* Primary / mobile navigation items */

.igloorack-nav-item__link,
.igloorack-nav-item__toggle {
	color: var( --color-white );
	text-decoration: none;
	font-size: var( --font-size-nav );
	font-weight: 600;
	border-radius: var( --radius-sm );
}

.igloorack-nav-item__link:hover,
.igloorack-nav-item__link:focus-visible,
.igloorack-nav-item__toggle:hover,
.igloorack-nav-item__toggle:focus-visible {
	color: var( --color-ice-500 );
}

.igloorack-nav-item__chevron {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
	margin-top: -3px;
}

.igloorack-nav-item__toggle[ aria-expanded='true' ] .igloorack-nav-item__chevron {
	transform: rotate( -135deg );
	margin-top: 3px;
}

.igloorack-dropdown-panel {
	background: var( --color-jet );
	border: 1px solid var( --color-graphite );
	border-radius: var( --radius-md );
	padding: var( --space-2 );
	box-shadow: var( --shadow-md );
}

.igloorack-nav-mobile__list .igloorack-dropdown-panel {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0 0 0 var( --space-4 );
}

.igloorack-dropdown-panel__item + .igloorack-dropdown-panel__item {
	border-top: 1px solid var( --color-graphite );
}

/* Shared mega menu — Products/Software/Company/Career/Contact, desktop
   only (nav-mobile.php never renders this markup, so no mobile override
   is needed here). Reuses .igloorack-dropdown-panel's
   background/border/shadow/hidden mechanics; only padding/size differ. */

.igloorack-mega-menu {
	padding: var( --space-6 );
}

.igloorack-mega-menu__close {
	position: absolute;
	top: var( --space-4 );
	inset-inline-end: var( --space-4 );
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --color-graphite );
	border-radius: var( --radius-sm );
	color: var( --color-steel-300 );
	font-size: 1.1rem;
	line-height: 1;
}

.igloorack-mega-menu__close:hover,
.igloorack-mega-menu__close:focus-visible {
	color: var( --color-white );
	border-color: var( --color-ice-500 );
}

.igloorack-mega-menu__intro {
	margin: 0 0 var( --space-3 );
	color: var( --color-steel-300 );
	font-size: 0.85rem;
	line-height: 1.5;
}

.igloorack-mega-menu__rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.igloorack-mega-menu__rail-link {
	display: block;
	/* Kept deliberately tight so most groups fit the panel height without
	   scrolling; longer rails (Company, or many Products categories)
	   scroll inside the rail itself — see layout.css. */
	padding: var( --space-2 ) 0 var( --space-2 ) var( --space-3 );
	border-top: 1px solid var( --color-graphite );
	border-inline-start: 2px solid transparent;
	color: var( --color-steel-200 );
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
}

.igloorack-mega-menu__rail-list li:first-child .igloorack-mega-menu__rail-link {
	border-top: none;
}

.igloorack-mega-menu__rail-link:hover,
.igloorack-mega-menu__rail-link:focus-visible {
	color: var( --color-ice-500 );
}

/* The rail is a scroll container (layout.css), which clips anything drawn
   outside it: keep the keyboard focus ring inside the link. */
.igloorack-mega-menu__rail-link:focus-visible {
	outline-offset: -2px;
}

.igloorack-mega-menu__rail-link.is-current {
	color: var( --color-white );
	border-inline-start-color: var( --color-ice-500 );
}

/* The mega menu's content column: exactly one featured panel — never a
   grid of every destination (all destinations already live in the rail).
   Reuses the site's existing image+text-split .igloorack-category-lead
   component (home page category grid) rather than inventing a new one;
   scoped overrides below adapt it for the mega menu's dark surface, its
   fixed shared height, and a horizontal layout at every width this panel
   ever renders at (≥1024px, so the component's own ≥768px two-column
   breakpoint is always already active here). */
.igloorack-mega-menu .igloorack-category-lead {
	height: 100%;
	margin-top: 0;
	background: var( --color-graphite );
	border-color: var( --color-graphite );
	color: var( --color-white );
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	/* Same fix as .igloorack-mega-menu__inner's own grid-template-rows
	   (layout.css) one level up: without an explicit row track, .media
	   and .body's shared implicit row sizes to fit the taller of the
	   two — an oversized preview image would still grow this row (and
	   therefore the whole panel) even though the ancestor chain above
	   is already a fixed height. */
	grid-template-rows: minmax( 0, 1fr );
}

.igloorack-mega-menu .igloorack-category-lead:hover,
.igloorack-mega-menu .igloorack-category-lead:focus-visible {
	border-color: var( --color-ice-500 );
}

/* min-width: 0 here is part of the same overflow fix as the rail/content
   columns in layout.css — without it, an un-clamped title/description
   can force this media/body pair wider than the grid track allows.
   min-height: 0 is the same fix on the other axis: a grid item's
   default min-height is `auto` (effectively its content's intrinsic
   size), which can still win over the minmax(0, 1fr) row track above
   and grow the row to fit an oversized image regardless. */
.igloorack-mega-menu .igloorack-category-lead__media,
.igloorack-mega-menu .igloorack-category-lead__body {
	min-width: 0;
	min-height: 0;
}

/* The base .igloorack-category-lead__media (below, in this same file)
   resets aspect-ratio to `auto` at >=768px — correct for its original
   home-page usage (media/body share whatever height the row naturally
   needs), wrong here: the mega menu needs a genuinely FIXED preview
   size regardless of which candidate image is showing (see
   inc/navigation.php's igloorack_render_mega_menu_feature_media() —
   different candidates can have very differently-proportioned source
   images). height: 100% now resolves to a real, stable pixel value —
   every ancestor up to --mega-menu-panel-height (layout.css) is
   explicitly fixed-height, including the grid-template-rows fixes
   directly above and in layout.css's .igloorack-mega-menu__inner —
   and overflow: hidden is the last-resort clip if anything still,
   somehow, doesn't fit. */
.igloorack-mega-menu .igloorack-category-lead__media {
	height: 100%;
	overflow: hidden;
}

.igloorack-mega-menu .igloorack-category-lead__body {
	justify-content: center;
	padding: var( --space-6 );
}

.igloorack-mega-menu .igloorack-category-lead__title {
	font-size: 1.25rem;
	line-height: 1.3;
	/* Overrides the base .igloorack-category-lead__title's --color-ink
	   (correct for that class's other, light-background usages —
	   featured-rail.php, category-grid.php — left untouched), which is
	   too dark to read against this dark mega-menu panel. */
	color: var( --color-white );
	font-weight: 700;
}

/* Administrator-controlled mega-menu-only image framing (Mega Menu
   Image Position — see inc/navigation.php
   igloorack_render_mega_menu_feature_media()). The custom property is
   only ever one of nine whitelisted keyword pairs, written inline only
   on the mega-menu's own <img>; the var() fallback keeps every other
   use of .igloorack-category-lead__image (hub-children cards, the home
   category grid) exactly as it already was. Never applies to the SVG
   fallback motif, which has no such property and stays centered. */
.igloorack-mega-menu .igloorack-category-lead__image {
	object-position: var( --igloorack-mega-menu-image-position, center center );
}

.igloorack-mega-menu .igloorack-category-lead__description {
	display: -webkit-box;
	overflow: hidden;
	color: var( --color-steel-300 );
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.igloorack-mega-menu__feature-action {
	color: var( --color-steel-300 );
	font-size: 0.85rem;
}

.igloorack-mega-menu .igloorack-category-lead__cta {
	color: var( --color-ice-500 );
}

/* Accordion (Partner & Supplier Network's collaboration areas) */

.igloorack-accordion__item {
	border-bottom: 1px solid var( --color-steel-200 );
}

.igloorack-accordion__item:first-child {
	border-top: 1px solid var( --color-steel-200 );
}

.igloorack-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-4 );
	width: 100%;
	padding: var( --space-4 ) 0;
	text-align: start;
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --color-ink );
}

.igloorack-accordion__icon {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	color: var( --color-ice-600 );
}

.igloorack-accordion__trigger[ aria-expanded='true' ] .igloorack-accordion__icon {
	transform: rotate( -135deg );
}

.igloorack-accordion__panel {
	padding: 0 0 var( --space-6 );
	color: var( --color-graphite );
	line-height: 1.6;
}

.igloorack-dropdown-panel__link {
	display: block;
	padding: var( --space-2 ) var( --space-3 );
	color: var( --color-steel-200 );
	text-decoration: none;
	font-size: 0.9rem;
	white-space: nowrap;
}

.igloorack-nav-mobile__list .igloorack-dropdown-panel__link {
	white-space: normal;
	padding-inline: 0;
}

.igloorack-dropdown-panel__link:hover,
.igloorack-dropdown-panel__link:focus-visible {
	color: var( --color-ice-500 );
}

.igloorack-nav-mobile__icon,
.igloorack-nav-mobile__icon::before,
.igloorack-nav-mobile__icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.igloorack-nav-mobile__toggle {
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var( --color-steel-600 );
	border-radius: var( --radius-sm );
	color: var( --color-white );
}

.igloorack-nav-mobile__icon {
	position: relative;
}

.igloorack-nav-mobile__icon::before,
.igloorack-nav-mobile__icon::after {
	content: '';
	position: absolute;
	left: 0;
}

.igloorack-nav-mobile__icon::before {
	top: -6px;
}

.igloorack-nav-mobile__icon::after {
	top: 6px;
}

.igloorack-nav-mobile {
	background: var( --color-ink );
	border-top: 1px solid var( --color-graphite );
}

.igloorack-nav-mobile__list {
	padding: var( --space-4 ) var( --space-6 );
}

.igloorack-nav-mobile__list > .igloorack-nav-item {
	border-bottom: 1px solid var( --color-graphite );
}

.igloorack-nav-mobile__list > .igloorack-nav-item:last-child {
	border-bottom: none;
}

.igloorack-nav-mobile__list .igloorack-nav-item__link,
.igloorack-nav-mobile__list .igloorack-nav-item__toggle {
	padding-block: var( --space-3 );
	font-size: 1rem;
}

.igloorack-nav-mobile__list .igloorack-nav-item--has-children {
	flex-wrap: wrap;
}

/* Home: strategic directions */

.igloorack-strategic__panel {
	padding: var( --space-8 );
	border-radius: var( --radius-lg );
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
	align-items: flex-start;
}

.igloorack-strategic__panel--commercial {
	background: var( --color-steel-50 );
	border: 1px solid var( --color-steel-200 );
}

.igloorack-strategic__panel--rd {
	background: var( --color-ink );
	color: var( --color-steel-200 );
}

.igloorack-strategic__panel--rd .igloorack-strategic__title {
	color: var( --color-white );
}

.igloorack-strategic__tag {
	font-family: var( --font-mono );
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --color-ice-600 );
}

.igloorack-strategic__panel--rd .igloorack-strategic__tag {
	color: var( --color-ice-500 );
}

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

.igloorack-strategic__text {
	line-height: 1.6;
	margin: 0;
}

/* Home: category lead + supporting cards */

.igloorack-category-lead {
	display: grid;
	/* minmax( 0, … ), not a bare 1fr (= minmax( auto, 1fr )): the single
	   mobile track must not grow to its media's min-content width. */
	grid-template-columns: minmax( 0, 1fr );
	margin-top: var( --space-10 );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-lg );
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

@media ( min-width: 768px ) {
	.igloorack-category-lead {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
}

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

.igloorack-category-lead__media {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var( --aspect-wide );
	background: var( --color-steel-50 );
	color: var( --color-ice-600 );
}

@media ( min-width: 768px ) {
	.igloorack-category-lead__media {
		aspect-ratio: auto;
	}
}

.igloorack-category-lead__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Home lead panel with a real image: the image is served at its own
   proportions (not a hard-cropped size), so the box — not the source —
   sets the shape: 16:9 on mobile, 4:3 beside the text on desktop
   (stretching with the row if the text is taller). The image fills it
   absolutely, so its load never moves the layout. */
.igloorack-category-lead__media--image {
	position: relative;
	overflow: hidden;
}

@media ( min-width: 768px ) {
	.igloorack-category-lead__media--image {
		aspect-ratio: 4 / 3;
	}
}

.igloorack-category-lead__media--image .igloorack-category-lead__image {
	position: absolute;
	inset: 0;
}

.igloorack-category-lead__media svg {
	width: 40%;
	max-width: 160px;
	height: auto;
}

.igloorack-category-lead__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-2 );
	padding: var( --space-8 );
}

.igloorack-category-lead__tag {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --color-ice-600 );
	font-weight: 700;
}

.igloorack-category-lead__title {
	font-size: var( --font-size-h2 );
	color: var( --color-ink );
	margin: 0;
}

.igloorack-category-lead__description {
	color: var( --color-steel-600 );
	line-height: 1.6;
	margin: 0;
}

.igloorack-category-lead__cta {
	margin-top: var( --space-2 );
	color: var( --color-ice-600 );
	font-weight: 700;
}

.igloorack-category-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-2 );
	height: 100%;
	padding: var( --space-6 );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
	color: var( --color-ink );
	text-decoration: none;
}

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

.igloorack-category-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: var( --aspect-wide );
	background: var( --color-steel-50 );
	border-radius: var( --radius-sm );
	color: var( --color-ice-600 );
	overflow: hidden;
}

.igloorack-category-card__media svg {
	width: 36%;
	height: auto;
}

.igloorack-category-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igloorack-category-card__title {
	font-size: 1.1rem;
	margin: var( --space-2 ) 0 0;
}

.igloorack-category-card__description {
	color: var( --color-steel-600 );
	font-size: 0.9rem;
	margin: 0;
	flex-grow: 1;
}

.igloorack-category-card__cta {
	color: var( --color-ice-600 );
	font-size: 0.85rem;
	font-weight: 700;
}

/* Home: full-width media section (manufacturing foundation) */

.igloorack-media-section__media {
	background: var( --color-steel-50 );
}

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

.igloorack-media-section__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( to right, var( --overlay-dark-strong ), transparent 65% );
}

.igloorack-media-section__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --color-ice-600 );
}

.igloorack-media-section__fallback svg {
	width: 60%;
	max-width: 320px;
	height: auto;
}

/* Compact variant: a deliberately shorter media stage for a page whose
   motif is a small icon/checkmark rather than full-bleed photography —
   opt in per page via an extra class on the <section> in that page's
   own post_content (e.g. Quality Assurance). igloorack_visual_shortcode()
   (inc/content-sections.php) returns its SVG fallback unwrapped, so
   without this modifier the motif has no width constraint from its own
   markup beyond base.css's generic `svg { max-width: 100% }` — it
   inherits the full, wide default .igloorack-media-section__media box
   instead. Scoped entirely to this modifier class so every other page
   using the plain .igloorack-media-section is completely unaffected;
   never applied automatically. Height and motif size both derive from
   one custom property so they always stay proportional at any
   viewport, rather than jumping between fixed per-breakpoint values. */
.igloorack-media-section--compact .igloorack-media-section__media {
	--igloorack-compact-media-height: clamp( 300px, 20vw + 220px, 480px );
	min-height: var( --igloorack-compact-media-height );
	display: flex;
	align-items: center;
	justify-content: center;
}

.igloorack-media-section--compact .igloorack-media-section__media svg {
	width: calc( var( --igloorack-compact-media-height ) * 0.62 );
	height: calc( var( --igloorack-compact-media-height ) * 0.62 );
	max-width: 85%;
}

.igloorack-media-section__panel {
	background: var( --color-white );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-lg );
	box-shadow: var( --shadow-md );
	padding: var( --space-8 );
}

.igloorack-media-section__text {
	color: var( --color-graphite );
	line-height: 1.6;
	margin: 0 0 var( --space-6 );
}

/* Home: Monitoring Software feature spotlight (large promotional block) */

.igloorack-feature-spotlight {
	position: relative;
	overflow: hidden;
	min-height: clamp( 440px, 62vw, 640px );
	display: flex;
	align-items: center;
	color: var( --color-steel-200 );
}

.igloorack-feature-spotlight__media {
	position: absolute;
	inset: 0;
	background: var( --color-jet );
}

.igloorack-feature-spotlight__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: rgba( 255, 255, 255, 0.18 );
}

.igloorack-feature-spotlight__scrim {
	position: absolute;
	inset: 0;
	background: var( --overlay-jet-strong );
}

.igloorack-feature-spotlight__inner {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
}

.igloorack-feature-spotlight__panel {
	max-width: 640px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

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

.igloorack-feature-spotlight__text {
	line-height: 1.6;
	margin: 0 0 var( --space-6 );
}

/* Home: Built for Execution (dark editorial) */

.igloorack-execution {
	position: relative;
	overflow: hidden;
	background: var( --color-black );
	color: var( --color-steel-200 );
	padding-block: var( --space-16 );
}

.igloorack-execution__grid-texture {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient( to right, rgba( 255, 255, 255, 0.05 ) 1px, transparent 1px );
	background-size: 64px 100%;
	opacity: 0.6;
}

.igloorack-execution__header {
	position: relative;
	max-width: 760px;
}

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

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

.igloorack-execution__panel {
	position: relative;
	padding-top: var( --space-6 );
	border-top: 2px solid var( --color-ice-500 );
}

.igloorack-execution__index {
	display: block;
	font-family: var( --font-mono );
	color: var( --color-ice-500 );
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	margin-bottom: var( --space-3 );
}

.igloorack-execution__title {
	color: var( --color-white );
	font-size: var( --font-size-h3 );
	margin: 0 0 var( --space-3 );
}

.igloorack-execution__text {
	color: var( --color-steel-300 );
	line-height: 1.6;
	margin: 0;
}

/* Home: quality principles (technical divider list) */

.igloorack-principles-list {
	margin: var( --space-8 ) 0 0;
}

.igloorack-principles-list__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-2 );
	padding-block: var( --space-6 );
	border-top: 1px solid var( --color-steel-200 );
}

.igloorack-principles-list__row:last-child {
	border-bottom: 1px solid var( --color-steel-200 );
}

@media ( min-width: 768px ) {
	.igloorack-principles-list__row {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 2fr );
		gap: var( --space-8 );
		align-items: baseline;
	}
}

.igloorack-principles-list__label {
	font-family: var( --font-mono );
	font-size: 1.15rem;
	font-weight: 700;
	color: var( --color-ink );
	margin: 0;
}

.igloorack-principles-list__text {
	color: var( --color-graphite );
	line-height: 1.6;
	margin: 0;
	max-width: var( --measure );
}

/* Company: Quality Assurance certifications. Plain text only —
   deliberately no icon/logo per card (see the page's own content for
   why); the accent bar is the only decorative element, standing in for
   a "verification" motif without repeating one five times. A future
   .igloorack-certification-card__action button (e.g. "View Certificate")
   is intentionally not styled here yet — it doesn't exist in content
   until a real certificate file is attached to a standard. */
.igloorack-certifications-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-4 );
	margin: var( --space-8 ) 0 0;
}

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

@media ( min-width: 900px ) {
	.igloorack-certifications-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.igloorack-certification-card {
	position: relative;
	padding: var( --space-6 );
	background: var( --color-white );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-sm );
	overflow: hidden;
}

.igloorack-certification-card::before {
	content: '';
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 40px;
	height: 3px;
	background: var( --color-ice-600 );
}

.igloorack-certification-card__standard {
	font-family: var( --font-mono );
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var( --color-ink );
	margin: var( --space-4 ) 0 var( --space-1 );
}

.igloorack-certification-card__label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --color-ice-600 );
	margin: 0 0 var( --space-3 );
}

.igloorack-certification-card__text {
	color: var( --color-steel-600 );
	line-height: 1.6;
	font-size: 0.92rem;
	margin: 0;
}

.igloorack-certifications-note {
	color: var( --color-steel-500 );
	font-size: 0.85rem;
	margin: var( --space-6 ) 0 0;
}

/* Home: immersion roadmap */

.igloorack-immersion__roadmap-heading {
	color: var( --color-white );
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: var( --space-8 ) 0 var( --space-4 );
}

.igloorack-roadmap {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-4 ) var( --space-6 );
	list-style: none;
	margin: 0 0 var( --space-6 );
	padding: 0;
}

.igloorack-roadmap__step {
	display: flex;
	flex-direction: column;
	gap: var( --space-1 );
	font-size: 0.85rem;
	min-width: 130px;
}

.igloorack-roadmap__marker {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px solid var( --color-ice-500 );
	background: transparent;
}

.igloorack-roadmap__step--current .igloorack-roadmap__marker {
	background: var( --color-ice-500 );
}

.igloorack-roadmap__label {
	color: var( --color-white );
	font-weight: 600;
}

.igloorack-roadmap__status {
	font-family: var( --font-mono );
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --color-steel-400 );
}

.igloorack-roadmap__step--current .igloorack-roadmap__status {
	color: var( --color-ice-500 );
}

.igloorack-immersion__visual {
	color: var( --color-ice-500 );
	justify-self: center;
	max-width: 380px;
}

/* Home: Technopark */

.igloorack-technopark {
	background: var( --color-steel-blue-50 );
}

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

@media ( min-width: 560px ) {
	.igloorack-capability-list {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.igloorack-capability-list__item {
	position: relative;
	padding-inline-start: var( --space-4 );
	font-weight: 600;
	color: var( --color-ink );
}

.igloorack-capability-list__item::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	background: var( --color-ice-600 );
}

/* Software: data-flow step (see .igloorack-flow-steps, layout.css) */

.igloorack-flow-step__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var( --space-3 );
	border: 2px solid var( --color-ice-500 );
	border-radius: 50%;
	background: var( --color-white );
	color: var( --color-ice-600 );
	font-family: var( --font-mono );
	font-weight: 700;
	position: relative;
	z-index: 1;
}

.igloorack-flow-step__title {
	font-size: 1.05rem;
	margin: 0 0 var( --space-2 );
}

.igloorack-flow-step__text {
	color: var( --color-steel-600 );
	line-height: 1.5;
	margin: 0;
}

/* Software: solution-area panel (see .igloorack-solution-grid, layout.css) */

.igloorack-solution-grid__item {
	padding: var( --space-6 );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
}

.igloorack-solution-grid__title {
	font-size: var( --font-size-h3 );
	margin: 0 0 var( --space-2 );
}

.igloorack-solution-grid__text {
	color: var( --color-steel-600 );
	line-height: 1.6;
	margin: 0;
}

.igloorack-technopark__media {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --color-steel-blue-600 );
}

.igloorack-technopark__image {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var( --radius-lg );
}

.igloorack-technopark__media svg {
	width: 100%;
	max-width: 360px;
	height: auto;
}

/* Home: Digital Infrastructure dashboard visual */

.igloorack-digital__visual {
	color: var( --color-ink );
}

.igloorack-dashboard {
	background: var( --color-white );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-lg );
	box-shadow: var( --shadow-md );
	padding: var( --space-6 );
	display: flex;
	flex-direction: column;
	gap: var( --space-4 );
}

.igloorack-dashboard__panel {
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
	padding: var( --space-4 );
}

.igloorack-dashboard__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var( --space-3 );
}

.igloorack-dashboard__panel-label {
	font-family: var( --font-mono );
	font-size: 0.8rem;
	color: var( --color-steel-600 );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.igloorack-dashboard__status {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px var( --space-2 );
	border-radius: var( --radius-sm );
}

.igloorack-dashboard__status--ok {
	color: #0a7a3c;
	background: #e4f5ea;
}

.igloorack-dashboard__status--warn {
	color: #8a5b00;
	background: #fbeed6;
}

.igloorack-dashboard__bars {
	display: flex;
	align-items: flex-end;
	gap: var( --space-1 );
	height: 56px;
}

.igloorack-dashboard__bars span {
	flex: 1 1 auto;
	background: var( --color-ice-500 );
	border-radius: 2px 2px 0 0;
	opacity: 0.85;
}

.igloorack-dashboard__row {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-4 );
	padding-top: var( --space-2 );
	border-top: 1px solid var( --color-steel-200 );
}

.igloorack-dashboard__metric {
	font-size: 0.8rem;
	color: var( --color-steel-600 );
}

.igloorack-dashboard__metric strong {
	display: block;
	color: var( --color-ink );
	font-size: 0.95rem;
}

/* Home: News section */

.igloorack-news__empty {
	margin-top: var( --space-8 );
	padding: var( --space-10 );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
	background: var( --color-steel-50 );
	color: var( --color-steel-600 );
	text-align: center;
}

.igloorack-news-grid {
	margin-top: var( --space-10 );
}

.igloorack-news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-md );
	overflow: hidden;
	background: var( --color-white );
}

.igloorack-news-card__media {
	position: relative;
	aspect-ratio: var( --aspect-wide );
	background: var( --color-jet );
	color: var( --color-steel-400 );
}

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

.igloorack-news-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.igloorack-news-card__placeholder svg {
	width: 40px;
	height: 40px;
}

.igloorack-news-card__category {
	position: absolute;
	inset-inline-start: var( --space-3 );
	bottom: var( --space-3 );
	padding: var( --space-1 ) var( --space-3 );
	background: var( --color-jet );
	color: var( --color-white );
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var( --radius-sm );
	text-decoration: none;
}

a.igloorack-news-card__category:hover,
a.igloorack-news-card__category:focus-visible {
	background: var( --color-ice-600 );
}

.igloorack-news-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-2 );
	padding: var( --space-6 );
	flex-grow: 1;
	background: var( --color-ink );
}

.igloorack-news-card__date {
	font-family: var( --font-mono );
	font-size: 0.75rem;
	color: var( --color-steel-400 );
}

.igloorack-news-card__title {
	font-size: 1.1rem;
	margin: 0;
}

.igloorack-news-card__title a {
	color: var( --color-white );
	text-decoration: none;
}

.igloorack-news-card__title a:hover,
.igloorack-news-card__title a:focus-visible {
	color: var( --color-ice-500 );
	text-decoration: underline;
}

.igloorack-news-card__excerpt {
	color: var( --color-steel-300 );
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0;
}

.igloorack-news-card__cta {
	margin-top: auto;
	padding-top: var( --space-2 );
	color: var( --color-ice-500 );
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
}

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

.igloorack-news__archive-link {
	display: inline-flex;
	margin-top: var( --space-8 );
}

/* News card — "featured" modifier for the News landing page's single
   "Latest Update" article. Same dark card system as the standard
   .igloorack-news-card, just larger and laid out side by side on
   desktop, so the News landing page never mixes two different card
   visual languages. */

.igloorack-news-card--featured {
	margin-bottom: var( --space-10 );
}

@media ( min-width: 768px ) {
	.igloorack-news-card--featured {
		flex-direction: row;
	}

	.igloorack-news-card--featured .igloorack-news-card__media {
		width: 50%;
		aspect-ratio: auto;
	}

	.igloorack-news-card--featured .igloorack-news-card__body {
		width: 50%;
		justify-content: center;
		gap: var( --space-3 );
	}
}

.igloorack-news-card--featured .igloorack-news-card__title {
	font-size: var( --font-size-h3 );
}

.igloorack-news-card--featured .igloorack-news-card__excerpt {
	font-size: 1rem;
}

/* Footer widgets / contact band / bottom */

.igloorack-footer-widgets {
	color: var( --color-steel-300 );
}

.igloorack-footer-widgets__logo {
	flex-shrink: 0;
	line-height: 0;
}

.igloorack-footer-widgets__logo img {
	display: block;
	max-height: 44px;
	width: auto;
}

.igloorack-footer-widgets__brand-name {
	color: var( --color-white );
	font-size: 1.2rem;
	font-weight: 800;
	margin: 0 0 var( --space-2 );
}

.igloorack-footer-widgets__tagline {
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
	max-width: 80ch;
}

.igloorack-footer-widgets__heading {
	color: var( --color-white );
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 var( --space-3 );
}

.igloorack-footer-widgets__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --space-2 );
}

.igloorack-footer-widgets__list a {
	color: var( --color-steel-300 );
	text-decoration: none;
	font-size: 0.9rem;
	overflow-wrap: break-word;
	hyphens: auto;
}

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

.igloorack-footer-contact-band__label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --color-steel-500 );
	margin-bottom: var( --space-1 );
}

.igloorack-footer-contact-band__item a {
	color: var( --color-steel-200 );
	text-decoration: none;
	font-size: 0.95rem;
}

.igloorack-footer-contact-band__item a:hover,
.igloorack-footer-contact-band__item a:focus-visible {
	color: var( --color-ice-500 );
}

.igloorack-footer-contact-band__item address {
	font-style: normal;
	color: var( --color-steel-200 );
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Footer social row — same section-separator rhythm as the contact
   band above it (top border + block padding), industrial/technical
   treatment (muted icon, subtle border, no platform-brand colors). */

.igloorack-footer-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-4 );
	padding-block: var( --space-8 ) var( --space-2 );
	border-top: 1px solid var( --color-graphite );
}

.igloorack-footer-social__label {
	color: var( --color-steel-500 );
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.igloorack-footer-social__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-2 );
	list-style: none;
	margin: 0;
	padding: 0;
}

.igloorack-footer-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var( --color-graphite );
	border-radius: var( --radius-md );
	color: var( --color-steel-300 );
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.igloorack-footer-social__link:hover,
.igloorack-footer-social__link:focus-visible {
	color: var( --color-ice-500 );
	border-color: var( --color-ice-600 );
	background: rgba( 46, 143, 255, 0.08 );
}

.igloorack-footer-social__icon {
	width: 22px;
	height: 22px;
}

.igloorack-footer-bottom {
	border-top: 1px solid var( --color-graphite );
}

.igloorack-footer-bottom__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --space-2 );
	padding-block: var( --space-4 );
	font-size: 0.8rem;
	color: var( --color-steel-400 );
}

.igloorack-footer-bottom__copyright {
	margin: 0;
}

.igloorack-footer-bottom a {
	color: var( --color-steel-400 );
}

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

/* Application section (Open Positions page) — explanation panel */

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

.igloorack-application__intro-visual {
	margin-top: var( --space-6 );
	color: var( --color-steel-blue-600 );
}

.igloorack-application__intro-visual svg {
	width: 100%;
	max-width: 240px;
	height: auto;
}

.igloorack-application__form-panel {
	background: var( --color-white );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-lg );
	box-shadow: var( --shadow-md );
	padding: var( --space-8 );
}

/* Contact Form 7 — visual system shared by every CF7 form on the site */

.wpcf7-form h3 {
	font-size: 1.05rem;
	color: var( --color-ink );
	margin: var( --space-8 ) 0 var( --space-4 );
	padding-bottom: var( --space-2 );
	border-bottom: 1px solid var( --color-steel-200 );
}

.wpcf7-form h3:first-child {
	margin-top: 0;
}

.wpcf7-form label {
	display: flex;
	flex-direction: column;
	gap: var( --space-1 );
	font-weight: 600;
	font-size: 0.9rem;
	color: var( --color-ink );
	margin-bottom: var( --space-4 );
}

.wpcf7-form input[type='text'],
.wpcf7-form input[type='email'],
.wpcf7-form input[type='tel'],
.wpcf7-form input[type='url'],
.wpcf7-form input[type='date'],
.wpcf7-form select,
.wpcf7-form textarea {
	font-family: var( --font-sans );
	font-weight: 400;
	font-size: 1rem;
	color: var( --color-ink );
	background: var( --color-white );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-sm );
	padding: var( --space-3 ) var( --space-4 );
	min-height: 48px;
	/* CF7 renders size="40": never wider than the form, unchanged otherwise. */
	max-width: 100%;
}

/* The control's wrapper is a flex item of the (column) label; min-width: 0
   lets it shrink below the control's intrinsic size on narrow screens. */
.wpcf7-form .wpcf7-form-control-wrap {
	min-width: 0;
}

.wpcf7-form textarea {
	min-height: 120px;
	resize: vertical;
}

.wpcf7-form input[type='file'] {
	display: block;
	width: 100%;
	padding: var( --space-3 );
	border: 1px dashed var( --color-steel-300 );
	border-radius: var( --radius-sm );
	background: var( --color-steel-50 );
	font-size: 0.9rem;
	color: var( --color-graphite );
}

.wpcf7-form input:focus-visible,
.wpcf7-form select:focus-visible,
.wpcf7-form textarea:focus-visible {
	outline: 2px solid var( --color-ice-600 );
	outline-offset: 2px;
	border-color: var( --color-ice-500 );
}

.wpcf7-form .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-list-item label {
	flex-direction: row;
	align-items: flex-start;
	gap: var( --space-2 );
	font-weight: 400;
	font-size: 0.9rem;
	color: var( --color-graphite );
}

.wpcf7-form .wpcf7-acceptance {
	display: block;
	margin: var( --space-6 ) 0;
}

.wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	color: #b3261e;
	font-size: 0.85rem;
	font-weight: 400;
	margin-top: var( --space-1 );
}

.wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: #b3261e;
}

.wpcf7-form .igloorack-button {
	margin-top: var( --space-2 );
	width: 100%;
}

@media ( min-width: 480px ) {
	.wpcf7-form .igloorack-button {
		width: auto;
	}
}

.wpcf7-form .wpcf7-spinner {
	background-color: var( --color-ice-600 );
}

.wpcf7-form.submitting .igloorack-button {
	opacity: 0.7;
	cursor: progress;
}

.wpcf7-response-output {
	margin-top: var( --space-6 );
	padding: var( --space-4 );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-sm );
	font-size: 0.95rem;
}

.wpcf7-form.sent .wpcf7-response-output {
	border-color: #2e7d46;
	background: #e6f4ea;
	color: #1e4d2b;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
	border-color: #b3261e;
	background: #fdecea;
	color: #7a1f17;
}

/* Location section (Contact page) — map fallback panel + embed wrapper */

.igloorack-map-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-4 );
	padding: var( --space-8 );
	border: 1px solid var( --color-steel-200 );
	border-radius: var( --radius-lg );
	background: var( --color-steel-50 );
}

.igloorack-map-panel__icon {
	width: 40px;
	height: 40px;
	color: var( --color-ice-600 );
}

.igloorack-map-panel address {
	font-style: normal;
	color: var( --color-graphite );
	line-height: 1.6;
}

.igloorack-map-embed {
	position: relative;
	width: 100%;
	aspect-ratio: var( --aspect-wide );
	overflow: hidden;
	border-radius: var( --radius-lg );
	border: 1px solid var( --color-steel-200 );
}

.igloorack-map-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Reusable modal/dialog — first instance is the Contact Form Privacy
   Notice modal (template-parts/global/privacy-notice-modal.php +
   assets/js/modules/privacy-notice-modal.js), built generically enough
   to be reused by any future modal. Visibility is driven entirely by
   the native `hidden` attribute (matching every other toggle in this
   theme) — :not([hidden]) carries the only `display` declaration so
   author CSS never fights the UA's own [hidden] rule. */

.igloorack-modal {
	position: fixed;
	inset: 0;
	z-index: var( --z-modal );
}

.igloorack-modal:not( [hidden] ) {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --space-4 );
}

.igloorack-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var( --overlay-jet-strong );
}

.igloorack-modal__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 860px;
	max-height: calc( 100vh - var( --space-8 ) );
	background: var( --color-white );
	color: var( --color-graphite );
	border-radius: var( --radius-lg );
	overflow: hidden;
	box-shadow: var( --shadow-md );
}

.igloorack-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-4 );
	padding: var( --space-5 ) var( --space-6 );
	background: var( --color-ink );
}

.igloorack-modal__title {
	margin: 0;
	font-size: 1.2rem;
	color: var( --color-white );
}

.igloorack-modal__close {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var( --radius-sm );
	color: var( --color-steel-300 );
	font-size: 1.4rem;
	line-height: 1;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.igloorack-modal__close:hover,
.igloorack-modal__close:focus-visible {
	color: var( --color-ice-500 );
	background: rgba( 255, 255, 255, 0.08 );
}

.igloorack-modal__body {
	flex: 1 1 auto;
	padding: var( --space-6 );
	overflow-y: auto;
}

.igloorack-modal__version {
	margin-top: var( --space-6 );
	padding-top: var( --space-4 );
	border-top: 1px solid var( --color-steel-200 );
	color: var( --color-steel-500 );
	font-family: var( --font-mono );
	font-size: 0.75rem;
}

.igloorack-modal__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var( --space-3 );
	padding: var( --space-4 ) var( --space-6 );
	border-top: 1px solid var( --color-steel-200 );
	background: var( --color-steel-50 );
}

@media ( max-width: 640px ) {
	.igloorack-modal__footer {
		flex-direction: column-reverse;
	}

	.igloorack-modal__footer .igloorack-button {
		width: 100%;
		text-align: center;
	}
}

body.igloorack-modal-open {
	overflow: hidden;
}

/* Contact Form Privacy Notice content — shared by the modal body above
   and the Privacy page (via [igloorack_contact_privacy_notice]), so its
   typography only has to be right in one place. */

.igloorack-privacy-notice {
	max-width: var( --measure );
}

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

.igloorack-privacy-notice h3 {
	margin: var( --space-6 ) 0 0;
	font-size: 1.05rem;
	color: var( --color-ink );
}

.igloorack-privacy-notice h3:first-child {
	margin-top: 0;
}

.igloorack-privacy-notice p {
	margin: var( --space-2 ) 0 0;
	line-height: 1.65;
	font-size: 0.95rem;
	color: var( --color-graphite );
}

/* CF7 enquiry form: the clickable "Contact Form Privacy Notice" link
   inside the acceptance label, and the attachment sensitivity note. */

.igloorack-privacy-notice-trigger {
	color: var( --color-ice-600 );
	text-decoration: underline;
}

.igloorack-privacy-notice-trigger:hover,
.igloorack-privacy-notice-trigger:focus-visible {
	color: var( --color-ice-500 );
}

.igloorack-form-note {
	margin: var( --space-2 ) 0 0;
	color: var( --color-steel-600 );
	font-size: 0.85rem;
	line-height: 1.5;
}

/* Language switcher (template-parts/header/language-switcher.php).
   Header variant: a compact technical code ("EN") in the header actions,
   opening a small panel styled like the nav dropdown panels — desktop
   only; below 1024px the mobile navigation carries its own inline list
   (the --mobile variant). Logical properties throughout, so the panel
   anchors to the reading-end edge in RTL. */

.igloorack-language-switcher--header {
	position: relative;
	display: none;
}

@media ( min-width: 1024px ) {
	.igloorack-language-switcher--header {
		display: block;
	}
}

.igloorack-language-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: var( --space-2 );
	min-height: 40px;
	padding-inline: var( --space-2 );
	border-radius: var( --radius-sm );
	color: var( --color-white );
	font-family: var( --font-mono );
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.igloorack-language-switcher__toggle::-webkit-details-marker {
	display: none;
}

.igloorack-language-switcher__toggle::marker {
	content: '';
}

.igloorack-language-switcher__toggle:hover,
.igloorack-language-switcher__toggle:focus-visible,
.igloorack-language-switcher--header[ open ] > .igloorack-language-switcher__toggle {
	color: var( --color-ice-500 );
}

.igloorack-language-switcher__toggle:focus-visible {
	outline: 2px solid var( --color-ice-500 );
	outline-offset: 2px;
}

.igloorack-language-switcher__chevron {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
	margin-top: -3px;
}

.igloorack-language-switcher--header[ open ] .igloorack-language-switcher__chevron {
	transform: rotate( -135deg );
	margin-top: 3px;
}

.igloorack-language-switcher__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.igloorack-language-switcher--header .igloorack-language-switcher__list {
	position: absolute;
	top: calc( 100% + var( --space-2 ) );
	inset-inline-end: 0;
	z-index: calc( var( --z-dropdown ) + 1 );
	min-width: 180px;
	padding: var( --space-2 );
	background: var( --color-jet );
	border: 1px solid var( --color-graphite );
	border-radius: var( --radius-md );
	box-shadow: var( --shadow-md );
}

.igloorack-language-switcher__link {
	display: block;
	padding: var( --space-2 ) var( --space-3 );
	border-radius: var( --radius-sm );
	color: var( --color-steel-200 );
	font-size: 0.9rem;
	line-height: 1.4;
	text-decoration: none;
	/* Each name sits in its own lang/dir span (e.g. العربية is dir="rtl"),
	   which isolates its text direction while the option itself keeps the
	   list's alignment. */
}

a.igloorack-language-switcher__link:hover,
a.igloorack-language-switcher__link:focus-visible {
	background: var( --color-graphite );
	color: var( --color-white );
}

.igloorack-language-switcher__link.is-current {
	color: var( --color-ice-500 );
	font-weight: 600;
}

/* Mobile variant: every language listed inline at the foot of the mobile
   navigation panel. */
.igloorack-language-switcher--mobile {
	padding: var( --space-4 ) var( --space-6 ) var( --space-6 );
	border-top: 1px solid var( --color-graphite );
}

.igloorack-language-switcher__label {
	margin: 0 0 var( --space-3 );
	color: var( --color-steel-400 );
	font-family: var( --font-mono );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.igloorack-language-switcher--mobile .igloorack-language-switcher__list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-2 );
}

.igloorack-language-switcher--mobile .igloorack-language-switcher__link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	border: 1px solid var( --color-graphite );
}

.igloorack-language-switcher--mobile .igloorack-language-switcher__link.is-current {
	border-color: var( --color-ice-500 );
}


/* -----------------------------------------------------------------------
   Right-to-left (Arabic) adjustments.

   Positioning/spacing throughout this file uses logical properties
   (inset-inline-*, margin/padding-inline-*, border-inline-*, text-align:
   start) wherever a direction matters, so layout mirrors automatically
   under dir="rtl" (set on <html> by WordPress for an RTL locale) and is
   identical in LTR. This section holds only what logical properties
   cannot express. Every selector here is scoped to [dir="rtl"] or
   :lang(ar), so none of it can apply to a left-to-right language.
   ----------------------------------------------------------------------- */

/* Directional arrow glyphs (→ / ←) and chevron icons point the reading
   direction's way. */
[dir="rtl"] :is(
	.igloorack-category-lead__cta,
	.igloorack-category-card__cta,
	.igloorack-text-link,
	.igloorack-news-card__cta,
	.igloorack-news-article__back,
	.igloorack-featured-rail__control,
	.igloorack-accessory-card__cta,
	.igloorack-product-card__cta,
	.igloorack-catalog-table__view
) > span[aria-hidden="true"],
[dir="rtl"] .igloorack-accessories__arrow svg,
[dir="rtl"] .igloorack-product-gallery__nav svg,
[dir="rtl"] .igloorack-gallery-lightbox__nav svg {
	display: inline-block;
	transform: scaleX( -1 );
}

/* Arabic script is cursive: added tracking breaks letter joining, and the
   monospace stack (Consolas/Menlo/SFMono) has no Arabic glyphs, which would
   fall back glyph-by-glyph to a mismatched font. */
:lang( ar ) {
	--font-mono: var( --font-sans );
}

:lang( ar ) * {
	letter-spacing: normal !important;
}