/* pages/products.css
   Products archive: the system cards, the filtered catalogue, services and the download
   band. The card itself lives in components/product-card.css and the brand rail in
   components/brands.css.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.system-bar {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 56px;
	/* Height stays put; only the width runs. A bar that thickens on hover nudges the
	   photo under it, and the whole row appears to twitch. */
	height: 4px;
	transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.system-card:hover .system-bar,
.system-card:focus-visible .system-bar { width: 100%; }

.system-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }

.system-count { font-size: 11px; font-weight: 300; color: var(--mute); }

/* ---------- catalogue ----------
   Facets down the side, results in the main column. */
.cat-layout {
	display: grid;
	grid-template-columns: 238px minmax(0, 1fr);
	gap: 44px;
	align-items: start;
	padding-top: 34px;
}

.cat-facets {
	position: sticky;
	/* Clears the sticky header. */
	top: 118px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.cat-search {
	display: flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--line-2);
	padding: 11px 13px;
	color: var(--mute);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cat-search:focus-within {
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(25, 29, 126, 0.14);
	color: var(--navy);
}

.cat-search input {
	border: 0;
	outline: none;
	background: none;
	width: 100%;
	min-width: 0;
	font-size: 13px;
	color: var(--ink);
}

.cat-search svg { flex: none; }

.cat-facet { display: flex; flex-direction: column; gap: 10px; }

.cat-facet-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }

/* The brand list is long, so it scrolls rather than pushing the page down. */
.cat-facet-scroll {
	max-height: 320px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.cat-facet-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 0;
	border-bottom: 1px solid var(--soft);
	/* A 3px rail on the left marks the chosen facet without moving the label. */
	border-left: 3px solid transparent;
	background: none;
	padding: 10px 11px;
	font: inherit;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.cat-facet-item:hover { background: var(--soft); color: var(--navy); }

.cat-facet-item:focus-visible {
	outline: none;
	background: var(--soft);
	box-shadow: inset 0 0 0 2px rgba(25, 29, 126, 0.2);
}

.cat-facet-item:hover .cat-facet-n { color: var(--navy); }

.cat-facet-item.is-active {
	border-left-color: var(--red);
	background: var(--soft);
	font-weight: 600;
	color: var(--navy);
}

.cat-facet-n {
	font-size: 11px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--mute);
	flex: none;
	transition: color 0.15s ease;
}

.cat-facet-item.is-active .cat-facet-n { color: var(--navy); }

.cat-clear {
	border: 1px solid var(--line-2);
	background: #fff;
	color: var(--ink-2);
	padding: 11px 14px;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.07em;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.cat-clear:hover { border-color: var(--navy); color: var(--navy); }

.cat-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

.cat-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--line);
	padding-bottom: 18px;
}

.cat-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }

.cat-toolbar-right { display: flex; align-items: center; gap: 10px; }

.cat-toolbar-right select {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--line-2);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235A6070' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	height: 40px;
	padding: 0 34px 0 13px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cat-toolbar-right select:hover { border-color: var(--navy); }

.cat-toolbar-right select:focus-visible {
	outline: none;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(25, 29, 126, 0.14);
}

.cat-count { font-size: 13px; color: var(--ink-2); }

.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* Each active filter, clearable on its own. */
.cat-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--navy);
	background: var(--navy);
	color: #fff;
	padding: 6px 11px;
	font: inherit;
	font-size: 11.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s;
}

.cat-chip:hover { background: var(--blue); }

.cat-empty {
	border: 1px solid var(--line);
	padding: 64px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	font-size: 16px;
	font-weight: 500;
}

.cat-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	border-top: 1px solid var(--line);
	padding-top: 22px;
}

.cat-range { font-size: 12.5px; color: var(--mute); }

.cat-range b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* One control rather than six separate boxes. Each button shares its neighbour's rule,
   so the row reads as a single object instead of a fence of squares. */
.cat-pages {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	border: 1px solid var(--line-2);
	background: #fff;
	/* Never wraps - a joined control that breaks across two lines looks broken. Narrow
	   screens scroll it instead. */
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.cat-pages::-webkit-scrollbar { display: none; }

.cat-page {
	display: grid;
	place-items: center;
	flex: none;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 0;
	border-left: 1px solid var(--line-2);
	background: none;
	color: var(--ink-2);
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	/* Digits line up between pages instead of shifting as the number widens. */
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: color 0.18s ease, background 0.18s ease;
}

.cat-page:first-child { border-left: 0; }

.cat-page:hover:not(:disabled):not(.is-current) { background: var(--soft); color: var(--navy); }

/* Inset, because the control clips its overflow and a spread ring would be cut off. */
.cat-page:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--navy);
	color: var(--navy);
}

.cat-page.is-current {
	background: var(--navy);
	color: #fff;
	font-weight: 600;
	cursor: default;
}

.cat-page:disabled { color: #C2C7D2; cursor: default; }

.cat-page-gap {
	min-width: 30px;
	padding: 0;
	color: var(--mute);
	cursor: default;
	letter-spacing: 0.08em;
}

.cat-page-arrow { min-width: 44px; padding: 0; }

.cat-page-arrow svg { display: block; }

@media (prefers-reduced-motion: reduce) {
	.system-bar,
		.cat-facet-item,
		.cat-facet-n,
		.cat-search,
		.cat-toolbar-right select,
		.cat-chip,
		.cat-clear,
		.cat-page { transition: none; }
}

@media (max-width: 1180px) {
	.cat-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 30px; }

	/* Three columns next to even the narrowed 210px sidebar leaves each card too
	   narrow for its own Read More / Enquire Now pair - the buttons wrap to two lines
	   instead of sitting on one. The plain product-grid-3 elsewhere (no sidebar eating
	   the width) has room to stay at three, so this only touches the catalogue's own
	   grid. */
	.cat-main .product-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
	/* The sidebar stops being a sidebar, so it must stop being sticky too. */
	.cat-layout { grid-template-columns: 1fr; gap: 28px; }

	.cat-facets { position: static; }

	.cat-facet-scroll { max-height: 260px; }

}

@media (max-width: 680px) {
	.cat-toolbar { align-items: flex-start; }

	.cat-toolbar-right { width: 100%; }

	.cat-toolbar-right select { flex: 1; min-width: 0; }

	.cat-pager { justify-content: center; }
}