/* B1 — Figma Frame 13 (8349:11552): крошки */



.br-page--list {

	font-family: Montserrat, sans-serif;

	--br-list-page-pb: clamp(2rem, 4vw, 4rem);

	padding-bottom: var(--br-list-page-pb);

	--br-list-lead-gap: clamp(0.875rem, 1.25vw, 1.25rem);

	--br-list-title-size: clamp(1.5rem, 1.5vw + 1rem, 2.1875rem);

	--br-list-title-lh: clamp(1.25rem, 0.35vw + 1.1rem, 1.5625rem);

	--br-list-intro-size: clamp(0.8125rem, 0.25vw + 0.75rem, 0.875rem);

	--br-list-intro-lh: clamp(1.375rem, 0.5vw + 1.1rem, 1.5625rem);

	--br-list-lead-mt: clamp(1.125rem, 2vw, 1.875rem);

	--br-list-block-pad: clamp(0.5rem, 0.75vw, 0.625rem);

}



.br-list-head {

	margin: 0;

}



.br-list-head__lead {

	display: flex;

	flex-direction: column;

	gap: var(--br-list-lead-gap);

	margin-top: var(--br-list-lead-mt);

	width: 100%;

	max-width: 100%;

}



.br-list-head__title {

	margin: 0;

	padding: var(--br-list-block-pad);

	font-size: var(--br-list-title-size);

	font-weight: 500;

	line-height: var(--br-list-title-lh);

	color: #000000;

}



.br-list-head__intro {

	padding: var(--br-list-block-pad);

	max-width: 100%;

	font-size: var(--br-list-intro-size);

	font-weight: 500;

	line-height: var(--br-list-intro-lh);

	color: #000000;

}



.br-list-head__intro p {

	margin: 0;

}



.br-list-head__intro p + p {

	margin-top: 1em;

}




/* B4 — Figma Frame 633 (8374:13705): «Популярные бренды», сетка карточек */

.br-list-popular {
	--br-list-popular-head-gap: clamp(1rem, 1.3vw, 1.5625rem);
	--br-list-popular-title-size: clamp(1.375rem, 1.35vw, 1.625rem);
	--br-list-popular-title-lh: clamp(1.25rem, 1.3vw, 1.5625rem);
	--br-list-popular-head-pad: clamp(0.5rem, 0.52vw, 0.625rem);
	--br-list-popular-grid-gap: clamp(0.875rem, 1.2vw, 1.4375rem);
	--br-list-popular-card-pad-y: clamp(1rem, 1.04vw, 1.25rem);
	--br-list-popular-card-pad-x: clamp(1.125rem, 1.3vw, 1.5625rem);
	--br-list-popular-card-gap: clamp(1rem, 1.3vw, 1.5625rem);
	--br-list-popular-card-radius: clamp(0.875rem, 1.04vw, 1.25rem);
	--br-list-popular-card-min: clamp(9.5rem, 14.3vw, 17.1875rem);
	--br-list-popular-logo-w: clamp(5.5rem, 6.46vw, 7.75rem);
	--br-list-popular-logo-h: clamp(3.25rem, 4.17vw, 5rem);
	--br-list-popular-name-size: clamp(1rem, 1.04vw, 1.25rem);
	--br-list-popular-name-lh: clamp(1.25rem, 1.3vw, 1.5625rem);
	--br-list-popular-mt: clamp(1.5rem, 2.5vw, 2.1875rem);

	display: flex;
	flex-direction: column;
	gap: var(--br-list-popular-head-gap);
	margin-top: var(--br-list-popular-mt);
	width: 100%;
}

.br-list-popular__head {
	margin: 0;
	padding: 0;
}

.br-list-popular__title {
	margin: 0;
	padding: var(--br-list-popular-head-pad);
	font-size: var(--br-list-popular-title-size);
	font-weight: 500;
	line-height: var(--br-list-popular-title-lh);
	color: #000000;
}

.br-list-popular__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--br-list-popular-card-min), 1fr));
	gap: var(--br-list-popular-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.br-list-popular__item {
	margin: 0;
	padding: 0;
}

.br-list-popular__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--br-list-popular-card-gap);
	width: 100%;
	min-height: clamp(11rem, 11.46vw, 13.75rem);
	padding: var(--br-list-popular-card-pad-y) var(--br-list-popular-card-pad-x);
	border: 1px solid rgba(151, 151, 151, 0.25);
	border-radius: var(--br-list-popular-card-radius);
	background: #ffffff;
	color: #000000;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

/* Figma Frame 615 (hover) */
a.br-list-popular__card:hover,
a.br-list-popular__card:focus-visible {
	border-color: #5479b8;
	box-shadow: 0 5px 15px rgba(140, 134, 134, 0.35);
}

a.br-list-popular__card:hover .br-list-popular__name,
a.br-list-popular__card:focus-visible .br-list-popular__name {
	color: #5479b8;
}

.br-list-popular__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--br-list-popular-logo-w);
	height: var(--br-list-popular-logo-h);
	flex: 0 0 auto;
}

.br-list-popular__logo-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.br-list-popular__logo-placeholder {
	display: block;
	max-width: 100%;
	font-size: clamp(0.75rem, 0.9vw, 0.875rem);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: rgba(0, 0, 0, 0.45);
	overflow: hidden;
	text-overflow: ellipsis;
}

.br-list-popular__name {
	display: block;
	width: 100%;
	padding: var(--br-list-popular-head-pad);
	font-size: var(--br-list-popular-name-size);
	font-weight: 600;
	line-height: var(--br-list-popular-name-lh);
	text-align: center;
	color: #000000;
}

/* B2/B3 — Figma Frame 435 (8412:13190), Frame 706 (8412:13273), Frame 703 (8412:13197) */

.br-page--list {
	--br-list-all-mt: clamp(1.5rem, 2.5vw, 2.1875rem);
	--br-list-all-tools-gap: clamp(1.75rem, 2.24vw, 2.6875rem);
	--br-list-search-h: clamp(2.25rem, 2.08vw, 2.5rem);
	--br-list-search-max-w: clamp(16rem, 22.24vw, 26.6875rem);
	--br-list-search-radius: clamp(0.375rem, 0.42vw, 0.5rem);
	--br-list-search-pad-x: clamp(0.625rem, 0.52vw, 0.75rem);
	--br-list-alpha-row-gap: clamp(1.75rem, 2.24vw, 2.6875rem);
	--br-list-alpha-link-gap: clamp(1.25rem, 1.56vw, 1.875rem);
	--br-list-alpha-link-size: clamp(0.875rem, 0.83vw, 1rem);
	--br-list-alpha-link-lh: clamp(1.125rem, 1.25vw, 1.5rem);
	--br-list-body-gap: clamp(1.75rem, 2.34vw, 2.8125rem);
	--br-list-section-gap: clamp(1.5rem, 2.08vw, 2.5rem);
	--br-list-section-title-size: clamp(1.25rem, 1.35vw, 1.625rem);
	--br-list-section-title-lh: clamp(1.25rem, 1.3vw, 1.5625rem);
	--br-list-section-title-pad: clamp(0.5rem, 0.52vw, 0.625rem);
	--br-list-letter-divider: clamp(1.5rem, 2.08vw, 2.5rem);
	--br-list-letter-row-gap: clamp(2rem, 5.26vw, 6.3125rem);
	--br-list-letter-char-w: clamp(3.5rem, 6.25vw, 7.5rem);
	--br-list-letter-char-size: clamp(2.5rem, 3.65vw, 4.375rem);
	--br-list-letter-cols-gap: clamp(2rem, 4.9vw, 5.875rem);
	--br-list-letter-col-gap: clamp(1rem, 1.3vw, 1.5625rem);
	--br-list-brand-gap-logo: clamp(0.375rem, 0.42vw, 0.5rem);
	--br-list-brand-name-size: clamp(0.875rem, 0.83vw, 1rem);
	--br-list-brand-name-lh: clamp(1.125rem, 1.04vw, 1.25rem);
}

.br-list-all {
	display: flex;
	flex-direction: column;
	gap: var(--br-list-all-tools-gap);
	margin-top: var(--br-list-all-mt);
	width: 100%;
}

.br-list-all__tools {
	display: flex;
	flex-direction: column;
	gap: var(--br-list-all-tools-gap);
	width: 100%;
}

.br-list-search {
	display: flex;
	align-items: center;
	gap: clamp(0.375rem, 0.52vw, 0.625rem);
	width: 100%;
	max-width: var(--br-list-search-max-w);
	min-height: var(--br-list-search-h);
	padding: 0 var(--br-list-search-pad-x);
	border: 1px solid rgba(84, 121, 184, 0.2);
	border-radius: var(--br-list-search-radius);
	background: #e4e9f0;
	color: #000000;
}

.br-list-search__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: clamp(1.375rem, 1.46vw, 1.75rem);
	height: clamp(1.375rem, 1.46vw, 1.75rem);
	color: #000000;
}

.br-list-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: clamp(0.375rem, 0.42vw, 0.5rem) 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: var(--br-list-brand-name-size);
	font-weight: 500;
	line-height: var(--br-list-brand-name-lh);
	color: #000000;
}

.br-list-search__input::placeholder {
	color: rgba(0, 0, 0, 0.4);
}

.br-list-search__input:focus {
	outline: none;
}

.br-list-search__input:focus-visible {
	outline: 2px solid #5479b8;
	outline-offset: 2px;
}

.br-list-alpha {
	display: flex;
	flex-direction: column;
	gap: var(--br-list-alpha-row-gap);
	width: 100%;
}

.br-list-alpha__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--br-list-alpha-link-gap);
}

.br-list-alpha__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: clamp(1.75rem, 1.875vw, 2.25rem);
	min-height: clamp(2.25rem, 2.29vw, 2.75rem);
	padding: clamp(0.375rem, 0.52vw, 0.625rem);
	font-size: var(--br-list-alpha-link-size);
	font-weight: 700;
	line-height: var(--br-list-alpha-link-lh);
	color: rgba(0, 0, 0, 0.7);
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

a.br-list-alpha__link:hover,
a.br-list-alpha__link:focus-visible {
	color: #5479b8;
}

.br-list-alpha__link.is-active {
	color: #000000;
}

.br-list-body {
	display: flex;
	flex-direction: column;
	gap: var(--br-list-body-gap);
	width: 100%;
}

.br-list-section {
	display: flex;
	flex-direction: column;
	gap: var(--br-list-section-gap);
}

.br-list-section__title {
	margin: 0;
	padding: var(--br-list-section-title-pad);
	font-size: var(--br-list-section-title-size);
	font-weight: 500;
	line-height: var(--br-list-section-title-lh);
	color: #000000;
}

.br-list-section__letters {
	display: flex;
	flex-direction: column;
}

.br-list-letter {
	scroll-margin-top: var(--br-list-scroll-offset, 7.5rem);
}

.br-list-letter + .br-list-letter {
	margin-top: var(--br-list-letter-divider);
	padding-top: var(--br-list-letter-divider);
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.br-list-letter__row {
	display: flex;
	align-items: flex-start;
	gap: var(--br-list-letter-row-gap);
}

.br-list-letter__char {
	flex: 0 0 var(--br-list-letter-char-w);
	margin: 0;
	font-size: var(--br-list-letter-char-size);
	font-weight: 600;
	line-height: 1;
	color: rgba(0, 0, 0, 0.2);
	text-align: center;
	align-self: center;
}

.br-list-letter__cols {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--br-list-letter-cols-gap);
	min-width: 0;
}

.br-list-letter__col {
	display: flex;
	flex-direction: column;
	gap: var(--br-list-letter-col-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.br-list-letter__item {
	margin: 0;
	padding: 0;
}

.br-list-letter__item.is-hidden {
	display: none;
}

.br-list-letter.is-hidden,
.br-list-section.is-empty {
	display: none;
}

.br-list-brand {
	display: inline-flex;
	align-items: center;
	gap: 0;
	max-width: 100%;
	color: #000000;
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.br-list-brand--logo,
.br-list-brand--bearing {
	gap: var(--br-list-brand-gap-logo);
}

.br-list-brand__bearing-icon {
	display: inline-flex;
	flex: 0 0 clamp(0.875rem, 0.83vw, 1rem);
	width: clamp(0.875rem, 0.83vw, 1rem);
	height: clamp(0.875rem, 0.83vw, 1rem);
	opacity: 0.7;
}

.br-list-brand__bearing-icon-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.br-list-brand--zlk .br-list-brand__name {
	color: #d82d28;
}

.br-list-brand--zlk .br-list-brand__bearing-icon {
	opacity: 1;
	background-color: #d82d28;
	-webkit-mask-image: url("../img/bearing-brand-icon.png");
	mask-image: url("../img/bearing-brand-icon.png");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.br-list-brand--zlk .br-list-brand__bearing-icon-img {
	opacity: 0;
	filter: none;
}

/* Figma Frame 627 — hover пункта списка */
.br-list-letter__item a.br-list-brand:hover,
.br-list-letter__item a.br-list-brand:focus-visible {
	opacity: 1;
}

.br-list-letter__item a.br-list-brand:hover .br-list-brand__name,
.br-list-letter__item a.br-list-brand:focus-visible .br-list-brand__name {
	color: rgba(0, 109, 160, 0.9);
}

.br-list-letter__item a.br-list-brand:hover .br-list-brand__bearing-icon,
.br-list-letter__item a.br-list-brand:focus-visible .br-list-brand__bearing-icon {
	opacity: 0.9;
}

.br-list-letter__item a.br-list-brand:hover .br-list-brand__bearing-icon-img,
.br-list-letter__item a.br-list-brand:focus-visible .br-list-brand__bearing-icon-img {
	opacity: 0.9;
	filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(1752%) hue-rotate(176deg) brightness(95%) contrast(101%);
}

.br-list-letter__item a.br-list-brand--zlk:hover .br-list-brand__bearing-icon,
.br-list-letter__item a.br-list-brand--zlk:focus-visible .br-list-brand__bearing-icon {
	background-color: rgba(0, 109, 160, 0.9);
}

.br-list-letter__item a.br-list-brand--zlk:hover .br-list-brand__bearing-icon-img,
.br-list-letter__item a.br-list-brand--zlk:focus-visible .br-list-brand__bearing-icon-img {
	opacity: 0;
	filter: none;
}

.br-list-brand__logo {
	display: block;
	flex: 0 0 clamp(0.875rem, 0.83vw, 1rem);
	width: clamp(0.875rem, 0.83vw, 1rem);
	height: clamp(0.875rem, 0.83vw, 1rem);
	object-fit: contain;
}

.br-list-brand__name {
	font-size: var(--br-list-brand-name-size);
	font-weight: 500;
	line-height: var(--br-list-brand-name-lh);
	color: rgba(0, 0, 0, 0.9);
}

.br-list-empty {
	margin: var(--br-list-all-mt) 0 0;
	font-size: var(--br-list-brand-name-size);
	font-weight: 500;
	line-height: 1.5;
	color: #333333;
}



/* B5 — адаптив (Figma 390 / Frame 724, 730, 752; desktop → 1000px) */

@media (max-width: 1199px) {
	.br-page--list {
		--br-list-lead-mt: clamp(1rem, 1.75vw, 1.5rem);
		--br-list-letter-row-gap: clamp(1.75rem, 4vw, 4rem);
		--br-list-letter-cols-gap: clamp(1.75rem, 3.5vw, 3.5rem);
	}
}

@media (max-width: 1000px) {
	.br-page--list {
		--br-list-search-max-w: 100%;
		--br-list-letter-row-gap: clamp(1.3125rem, 2.5vw, 1.75rem);
		--br-list-letter-cols-gap: clamp(1.5rem, 2.5vw, 2.5rem);
	}
}

@media (max-width: 768px) {
	.br-page--list {
		--br-list-lead-gap: 0.9375rem;
		--br-list-lead-mt: 1.125rem;
		--br-list-block-pad: 0.625rem 0;
		--br-list-title-size: 1.375rem;
		--br-list-title-lh: 1.5625rem;
		--br-list-intro-size: 0.875rem;
		--br-list-intro-lh: 1.5625rem;
		--br-list-all-mt: 1.25rem;
		--br-list-all-tools-gap: 1.25rem;
		--br-list-body-gap: 2rem;
		--br-list-section-gap: 1.875rem;
		--br-list-section-title-size: 1.125rem;
		--br-list-section-title-lh: 1.375rem;
		--br-list-letter-divider: 1.875rem;
		--br-list-letter-row-gap: 1.3125rem;
		--br-list-letter-char-w: 4.25rem;
		--br-list-letter-char-size: 3.125rem;
		--br-list-letter-cols-gap: 1.5625rem;
		--br-list-letter-col-gap: 1.5625rem;
		--br-list-search-h: 2.5rem;
		--br-list-search-radius: 0.5rem;
		--br-list-popular-mt: 1.25rem;
		--br-list-popular-grid-gap: 0.625rem;
		--br-list-popular-card-radius: 0.625rem;
		--br-list-popular-card-pad-y: 0.9375rem;
		--br-list-popular-card-pad-x: 0;
		--br-list-popular-card-gap: 0.9375rem;
		--br-list-popular-logo-w: 4.75rem;
		--br-list-popular-logo-h: 3.0625rem;
		--br-list-popular-name-size: 0.75rem;
		--br-list-popular-name-lh: 1.25;
	}

	.br-list-head__intro {
		padding: 10px 0;
		font-family: Montserrat, sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 25px;
		letter-spacing: 0;
		color: #000000;
		text-align: left;
	}

	.br-list-popular__head {
		display: none;
	}

	.br-list-popular__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.br-list-popular__card {
		min-height: 7.5rem;
	}

	.br-list-popular__name {
		font-weight: 500;
	}

	.br-list-search {
		max-width: 100%;
	}

	.br-list-letter__row {
		flex-direction: row;
		align-items: flex-start;
	}

	.br-list-letter__char {
		flex-basis: var(--br-list-letter-char-w);
	}

	.br-list-letter__cols {
		width: auto;
		flex-direction: column;
	}

	.br-list-alpha {
		display: none;
	}
}

@media (max-width: 390px) {
	.br-page--list {
		--br-list-alpha-link-gap: 0.75rem;
	}
}

@media (max-width: 320px) {
	.br-page--list {
		--br-list-alpha-link-size: 0.8125rem;
		--br-list-alpha-link-gap: 0.5rem;
		--br-list-letter-char-size: 2.75rem;
		--br-list-letter-char-w: 3.5rem;
	}

	.br-list-alpha__link {
		min-width: 1.5rem;
		min-height: 2rem;
		padding: 0.375rem;
	}
}