/* ---- Красная полоса разделов каталога (по образцу as-pl.com) ---- */
.catbar { margin: -25px 0 25px; }
.catbar__nav {
	background: linear-gradient(to bottom, #f30000 0%, #c70101 100%);
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.catbar__list { display: flex; flex-wrap: wrap; margin: 0; padding: 0 6px; list-style: none; }
.catbar__item { position: relative; margin: 0; }
.catbar__item:before { content: none !important; }
.catbar__link {
	display: block; height: 46px; padding: 0 22px; line-height: 46px; white-space: nowrap;
	color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .15s;
}
.catbar__link:hover, .catbar__link:focus { color: #fff; background: rgba(0,0,0,.18); text-decoration: none; }
.catbar__item--active > .catbar__link { background: rgba(0,0,0,.28); }
.catbar__item--all > .catbar__link { padding-left: 46px; position: relative; }
.catbar__item--all > .catbar__link:before {
	content: ''; position: absolute; left: 20px; top: 16px; width: 16px; height: 14px;
	background: linear-gradient(#fff, #fff) 0 0/100% 2px no-repeat, linear-gradient(#fff, #fff) 0 6px/100% 2px no-repeat, linear-gradient(#fff, #fff) 0 12px/100% 2px no-repeat;
}
.catbar__caret { display: inline-block; width: 0; height: 0; margin-left: 8px; vertical-align: 3px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; }

.catbar__sub {
	display: none; position: absolute; left: 0; top: 100%; z-index: 1000; min-width: 520px;
	margin: 0; padding: 12px 10px; list-style: none; background: #fff; border: 2px solid #f30000; border-top: 0;
	border-radius: 0 0 4px 4px; box-shadow: 0 8px 20px rgba(0,0,0,.15);
	column-count: 2; column-gap: 20px;
}
.catbar__item:last-child .catbar__sub { left: auto; right: 0; }
.catbar__item--has-sub:hover .catbar__sub, .catbar__item--has-sub:focus-within .catbar__sub { display: block; }
.catbar__sub li { margin: 0; break-inside: avoid; }
.catbar__sub li:before { content: none !important; }
.catbar__sub a { display: block; padding: 6px 10px; color: #222; font-size: 14px; text-decoration: none; border-radius: 3px; }
.catbar__sub a:hover, .catbar__sub a.active { background: #fdeaea; color: #c70101; }

@media (max-width: 991px) {
	.catbar__link { padding: 0 14px; font-size: 14px; }
}
@media (max-width: 767px) {
	.catbar { margin: 0 0 15px; }
	.catbar__nav { border-radius: 0; }
	.catbar__list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.catbar__link { height: 42px; line-height: 42px; }
	.catbar__sub { display: none !important; }
}
