.is-hidden {
	display: none !important;
}

/* Category tiles (home teaser + catalog landing grid) */
.catalog-categories {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin-bottom: 40px;
}

.cat-card {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	color: #0d212a;
	border: 1px solid #fff;
	transition: transform .25s ease, box-shadow .25s ease;
	/* reset for <button>-based tiles */
	width: 100%;
	padding: 0;
	text-align: left;
	font: inherit;
}

.cat-card:hover,
.cat-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

.cat-card__img {
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cat-card__img img {
	max-width: 78%;
	max-height: 78%;
	object-fit: contain;
}

.cat-card__body {
	padding: 22px 24px 26px;
}

.cat-card__body h3 {
	font-size: 20px;
	line-height: 1.3;
	margin-bottom: 12px;
}

.cat-card__count {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	color: #0d212a;
	background: #f0efeb;
	padding: 5px 14px;
	border-radius: 20px;
}

/* Home teaser CTA under category tiles (always sits on the dark services panel) */
.catalog-teaser-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .15);
	padding-top: 34px;
}

.catalog-teaser-cta p {
	color: #93a4b3;
	font-size: 18px;
	max-width: 560px;
	margin: 0;
}

/* Header bar: always visible, always a dark navy bar regardless of the
   light/dark content toggle below it — same "dark accent" language as the
   services/contacts panels. position:fixed (not sticky) because on the
   home page header-nav's own parent (.header, the hero block) scrolls out
   of view fairly quickly — sticky can only hold within its parent's box,
   so it would disappear with it. Fixed pins it for the whole page; body's
   padding-top (below) reserves the space it no longer takes in flow. */
.header-nav,
.header-nav.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background: #0d212a;
	border-bottom-color: rgba(255, 255, 255, .16);
}

body {
	padding-top: var(--header-h, 72px);
}

.header-nav:after {
	background: rgba(255, 255, 255, .16);
}

.header .menu li a,
.header-nav.fixed .header-menu li a {
	color: #e7ecf0;
}

.header .menu li a:after {
	background: #e58a4c;
}

.header .menu li a.active:after {
	width: 98%;
}

.header-info__link,
.theme-toggle {
	color: #e7ecf0;
}

.hamburger .bar {
	background-color: #e7ecf0;
}

.menu-wrap {
	background: #0d1b24;
	/* Header is now permanently fixed (not just while scrolled), so the
	   dropdown must always sit right below it, not at main.css's various
	   scroll-state-specific offsets which no longer get toggled. */
	top: var(--header-h, 72px) !important;
}

.menu-wrap.active {
	height: calc(100vh - var(--header-h, 72px)) !important;
}

.menu-nav__menu li a {
	color: #e7ecf0;
}

.menu-nav__menu li a.active {
	color: #e58a4c;
}

.menu-wrap .header-info__link,
.menu-wrap .theme-toggle {
	color: #e7ecf0;
}

/* Catalog page: category switcher, fixed right below the fixed header bar
   so it travels with it instead of relying on sticky — sticky only holds
   within its parent's box, and on this page that parent (<header>) is
   barely taller than the switcher itself (the header bar is fixed/out of
   flow), so it would scroll away almost immediately. Always a dark bar,
   like the site's other dark panels, regardless of light/dark toggle. */
.catalog-switcher {
	position: fixed;
	top: var(--header-h, 72px);
	left: 0;
	width: 100%;
	z-index: 90;
	background: #0d212a;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/* Compensate for the switcher no longer taking up flow space (body already
   reserves --header-h for the fixed header itself). */
.catalog-page {
	margin-top: var(--switcher-h, 60px);
}

.catalog-switcher__inner {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 16px 0;
	scrollbar-width: thin;
}

.catalog-switcher__inner::-webkit-scrollbar {
	height: 4px;
}

.catalog-switcher__inner::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .25);
	border-radius: 4px;
}

/* Category pill buttons reuse .btn's fill/shape (same format as "Подробнее о нас") */
.cat-pill.btn {
	max-width: none;
	width: auto;
	height: 46px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	padding: 0 18px;
	white-space: nowrap;
	opacity: .55;
}

.cat-pill.btn:hover,
.cat-pill.btn.is-active {
	opacity: 1;
}

.cat-pill span {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	color: #0d212a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}

/* Catalog page: full grid section spacing */
.catalog-page .catalog-wrap {
	padding-top: 6px;
}

/* About cards ("Опыт"/"Надежность"/"Качество"/"Принцип") are always white,
   so their body text must always be dark — it previously inherited the
   page's text color, which turns light in dark mode and disappears on the
   white card. Pin it explicitly instead of depending on inheritance. */
.advant-item,
.advant-item__text,
.advant-item__text p {
	color: #0d212a;
}

/* Sticky header offset: keep anchor-scrolled sections from hiding behind it */
#about,
#services,
#contacts {
	scroll-margin-top: var(--header-h, 72px);
}

/* Light/dark theme switcher */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	/* color intentionally not set here — the header is permanently dark,
	   so .theme-toggle's color comes from the earlier permanent-light-text
	   rule, not from inherited (theme-toggled) body color. */
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.theme-toggle__track {
	position: relative;
	width: 44px;
	height: 24px;
	border-radius: 100px;
	background: rgba(120, 120, 120, .35);
	border: 1px solid rgba(120, 120, 120, .5);
	transition: background .25s ease;
	flex-shrink: 0;
}

.theme-toggle__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	transition: transform .25s ease;
}

.theme-toggle.is-dark .theme-toggle__track {
	background: #e58a4c;
	border-color: #e58a4c;
}

.theme-toggle.is-dark .theme-toggle__thumb {
	transform: translateX(20px);
	background: #16222b;
}

.menu-wrap .theme-toggle {
	margin-top: 24px;
	justify-content: center;
}

@media screen and (max-width: 767px) {
	.catalog-categories {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 16px;
	}
	.cat-card__img {
		height: 140px;
	}
	.cat-card__body {
		padding: 16px 18px 20px;
	}
	.cat-card__body h3 {
		font-size: 17px;
	}
	.catalog-teaser-cta {
		padding-top: 24px;
	}
	.catalog-teaser-cta p {
		font-size: 16px;
	}
	.catalog-switcher__inner {
		padding: 12px 0;
	}
	.cat-pill.btn {
		font-size: 13px;
		height: 40px;
		padding: 0 14px;
	}
	.header-info__links .theme-toggle {
		margin-right: 18px;
	}
}

/* More breathing room between the phone number and the theme toggle */
.header-info__links {
	gap: 28px;
}

/* Footer: company email under the logo */
.footer-info__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.footer-info__email {
	display: block;
	color: inherit;
	font-size: 13px;
}

/* Uniform product cards: clamp the title to a fixed number of lines so the
   "Технические характеристики" block always starts at the same height,
   and stretch every card in a row to match the tallest one. */
.catalog-card {
	align-self: stretch;
}

.catalog-card__content h3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.9em;
}

.catalog-card__price {
	margin-top: auto;
}

/* Filter panel */
.catalog-filters {
	background: #fff;
	border-radius: 20px;
	padding: 24px 24px 20px;
	margin-bottom: 30px;
	color: #0d212a;
}

.filter-search input {
	width: 100%;
	height: 48px;
	border-radius: 10px;
	border: 1px solid #c9cdd3;
	padding: 0 16px;
	font-size: 15px;
	font-family: inherit;
	margin-bottom: 20px;
}

.filter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px 20px;
}

.filter-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #55606b;
}

.filter-field input,
.filter-field select {
	height: 42px;
	border-radius: 8px;
	border: 1px solid #c9cdd3;
	padding: 0 10px;
	font-size: 14px;
	font-family: inherit;
	font-weight: 500;
	color: #0d212a;
	background: #fff;
	width: 100%;
}

.filter-range {
	display: flex;
	gap: 8px;
}

.filter-range input,
.filter-range select {
	min-width: 0;
	flex: 1;
}

.filter-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 22px;
	flex-wrap: wrap;
}

.filter-apply-group {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

.filter-reset.btn,
.filter-apply.btn {
	max-width: none;
	width: auto;
	height: 44px;
	padding: 0 22px;
	font-size: 14px;
}

.filter-count {
	font-size: 14px;
	font-weight: 600;
	color: #55606b;
	white-space: nowrap;
}

@media screen and (max-width: 480px) {
	.filter-apply-group {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
	}
}

@media screen and (max-width: 767px) {
	.catalog-filters {
		padding: 18px 16px 16px;
	}
	.filter-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 12px 14px;
	}
}