/*
	Theme Name: Metallobaza
	Version: 1.1.1
*/
*,
:after,
:before {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

:root {
	/** Общая шкала текста: основной размер, служебный и акцентный. */
	--font-base: 17px;
	--font-small: calc(var(--font-base) * .85);
	--font-large: calc(var(--font-base) * 1.25);
	--icon: url(images/icons/black.png);
	--icon2x: url(images/icons/black@2x.png);
	--white-color: #fff;
	--black-color: #000;
	--primary-color-accent: #f03b36;
	--primary-color-hover: #f46c67;
	--blue-color-accent: #0676ed;
	--blue-color-ghost: #dcedfe;
	--orange-color-accent: #fa8f38;
	--orange-color-ghost: #feebdc;
	--red-color-accent: #fa3838;
	--red-color-ghost: #fedcdc;
	--green-color-accent: #24AC5C;
	--green-color-ghost: #e2f9eb;
	/* Gray Color: */
	--gray-color-120: #262626;
	--gray-color-115: #333333;
	--gray-color-110: #404040;
	--gray-color-105: #4d4d4d;
	--gray-color-100: #595959;
	--gray-color-95: #666666;
	--gray-color-90: #737373;
	--gray-color-85: #808080;
	--gray-color-80: #8c8c8c;
	--gray-color-75: #999999;
	--gray-color-70: #a6a6a6;
	--gray-color-65: #b3b3b3;
	--gray-color-60: #bfbfbf;
	--gray-color-55: #cccccc;
	--gray-color-50: #d9d9d9;
	--gray-color-45: #e6e6e6;
	--gray-color-40: #ededed;
	--gray-color-35: #f2f2f2;
	--gray-color-30: #f5f5f5;
	--gray-color-25: #f7f7f7;
	--gray-color-20: #fafafa;
	/* Transparent Color: */
	--transparent-color-20: rgb(0 0 0 / 20%);
	--transparent-color-15: rgb(0 0 0 / 15%);
	--transparent-color-10: rgb(0 0 0 / 10%);
	--transparent-color-5: rgb(0 0 0 / 5%);
	--transparent-color-3: rgb(0 0 0 / 3%);
	--heading-color: #000;
	--text-color: #0c0c0c;
	--link-visited: #551a8b;
	--radius: 4px;
}

body,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
input,
textarea,
p {
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

fieldset,
img {
	border: 0;
}

img {
	vertical-align: middle;
}

ol,
ul {
	list-style: none;
}

button,
select {
	text-transform: none;
}

@font-face {
	font-family: 'Noto Sans';
	src: local('Noto Sans'),
		local('NotoSans'),
		url('fonts/notosans/400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans';
	src: local('Noto Sans SemiBold'),
		local('NotoSans-SemiBold'),
		url('fonts/notosans/500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans';
	src: local('Noto Sans SemiBold'),
		local('NotoSans-SemiBold'),
		url('fonts/notosans/600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans';
	src: local('Noto Sans Bold'),
		local('NotoSans-Bold'),
		url('fonts/notosans/700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/**
 * Сохраняет ширину страницы при открытии панелей шапки.
 */
html {
	scrollbar-gutter: stable;
}

body {
	position: relative;
	background-color: var(--white-color);
	height: auto;
	min-height: 100%;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	font-family: 'Noto Sans', sans-serif;
	color: var(--text-color);
	font-size: var(--font-base);
	font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	position: relative;
	color: var(--heading-color);
	font-size: 100%;
	font-weight: 700;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
	hyphens: auto;
	margin-bottom: 35px;
}

mark {
	background-color: #ffeea4;
	border-radius: var(--radius);
	padding: 4px 2px;
}

strong {
	font-weight: 700;
}

a {
	background-color: transparent;
	color: var(--primary-color-accent);
	text-decoration: none;
	transition: color .5s;
}

a:hover {
	color: var(--primary-color-hover);
}

a:visited {
	color: var(--link-visited);
}

button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.icon:before {
	content: "";
	background-image: var(--icon);
	background-repeat: no-repeat;
	background-size: 240px;
	width: 24px;
	height: 24px;
	display: block;
}

.row {
	font-size: 0;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	padding: 0;
	margin: -1px;
}

.ellipsis {
	max-width: 100%;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hidden {
	display: none;
}

/* BUTTONS */
.button {
	background-color: transparent;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-family: inherit;
	color: var(--text-color);
	font-size: inherit;
	overflow: visible;
	border: none;
	-webkit-user-select: none;
	user-select: none;
	transition: all .5s;
	padding: 0;
}

.button.center {
	margin-left: auto;
	margin-right: auto;
}

.button.fill,
.button.border {
	height: 44px;
	white-space: nowrap;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 500;
	text-align: center;
	border: 1px solid;
	border-radius: var(--radius);
	padding-left: 12px;
	padding-right: 12px;
}

.button.fill.accent {
	background-color: var(--primary-color-accent);
	color: #fff;
	border-color: var(--primary-color-accent);
}

.button.fill.accent:hover {
	background-color: var(--primary-color-hover);
	color: var(--white-color);
	border-color: var(--primary-color-hover);
}

.button.fill.gray {
	background-color: var(--gray-color-100);
	color: var(--white-color);
	border-color: var(--gray-color-100);
}

.button.fill.gray:hover {
	background-color: var(--gray-color-120);
	color: var(--white-color);
	border-color: var(--gray-color-120);
}

.button.fill.neutral {
	background-color: var(--gray-color-35);
	color: var(--text-color);
	border-color: var(--gray-color-35);
}

.button.fill.neutral:hover {
	background-color: var(--gray-color-45);
	color: var(--text-color);
	border-color: var(--gray-color-45);
}

.button.fill.transparent {
	background-color: var(--transparent-color-5);
	color: var(--text-color);
	border-color: transparent;
}

.button.fill.transparent:hover {
	background-color: var(--transparent-color-10);
	color: var(--text-color);
	border-color: transparent;
}

.button.border {
	color: var(--text-color);
	border-color: var(--gray-color-70);
}

.button.border:hover {
	border-color: var(--gray-color-110);
}

.button.icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius);
}

.button.icon.txt {
	width: auto;
	padding-right: 16px;
}

.button.icon:before {
	flex-shrink: 0;
}

.button.icon.fill:not(.neutral):not(.transparent):before {
	filter: brightness(0) invert(1);
}

.button.icon.txt:before {
	margin-right: 8px;
}

.button .spinner {
	width: 20px;
	height: 20px;
	display: inline-block;
	flex-shrink: 0;
	border-radius: 50%;
	animation: spin 1s ease-in-out infinite;
	margin-right: 10px;
}

.button.icon:has(.spinner)::before {
	content: none;
}

.button.icon:not(.txt) .spinner {
	margin-right: 0;
}

.button.border .spinner,
.button.fill.neutral .spinner {
	border: 2px solid rgb(0 0 0 / 30%);
}

.button.border .spinner,
.button.fill.neutral .spinner {
	border-top-color: var(--gray-color-100);
}

.button.fill.accent .spinner {
	border: 2px solid rgb(255 255 255 / 30%);
	border-top-color: var(--white-color);
}

.button.fill .spinner,
.button.border .spinner {
	margin-right: 8px;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.learn-more {
	background-color: transparent;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	cursor: pointer;
	color: var(--text-color);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.02em;
	border: none;
	padding: 0;
}

.learn-more:hover {
	color: var(--text-color);
}

.learn-more:after {
	content: "";
	background-image: var(--icon);
	background-repeat: no-repeat;
	background-size: 240px;
	background-position: -96px -48px;
	width: 24px;
	height: 24px;
	display: inline-block;
	opacity: .9;
	flex-shrink: 0;
	transition: transform 0.3s ease;
	transform: translateY(1px);
	margin-left: 6px;
}

.learn-more:hover:after {
	transform: translate(5px, 1px);
}

/* SCROLLBAR */
.scrollable {
	overflow-x: scroll;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.scrollable::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.scrollbar {
	position: relative;
	background-color: var(--gray-color-35);
	height: 2px;
	border-radius: 2px;
}

.scrollbar .scrollbar-thumb {
	position: absolute;
	background-color: var(--gray-color-80);
	height: 100%;
	border-radius: 2px;
}

/* MAIN */
.main {
	flex: 1 0 auto;
	padding-bottom: 40px;
}

/* Отступы между секциями главной */
.main.home-main {
	padding-top: 0;
	padding-bottom: 80px;
	margin-top: 0;
}

.home-main>section+section {
	margin-top: 80px;
}

.home-main>.qa {
	margin-bottom: 0;
}

.section-description {
	color: #626262;
	line-height: 1.65;
	margin: 16px 0 0;
}

/* Категории на главной */
.home-catalog h2 {
	margin: 0;
}

.home-catalog .catalog-intro {
	color: #686868;
	margin: 12px 0 32px;
}

.home-catalog .catalog-groups {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px;
}

.home-category {
	position: relative;
	background: #f5f5f5;
	min-width: 0;
	grid-column: span 3;
	overflow: hidden;
	border-radius: 3px;
	padding: 24px 24px 208px;
}

.home-category.wide {
	grid-column: span 6;
}

.home-category h3 {
	font-size: var(--font-large);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.02em;
	margin: 0 0 18px;
}

.home-category h3 a {
	min-height: 32px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.home-category h3 span {
	width: 28px;
	height: 28px;
	display: inline-flex;
	flex: 0 0 28px;
	align-items: center;
	justify-content: center;
	color: #454545;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	border: 1px solid #666;
	border-radius: 7px;
}

.home-category a {
	color: inherit;
	text-decoration: none;
}

.home-category a:hover {
	color: #BD261D;
}

.home-category a:focus-visible {
	outline: 2px solid #BD261D;
	outline-offset: 4px;
	border-radius: 2px;
}

.home-category h3 .icon:before {
	opacity: .72;
	transform: scale(.67);
}

.home-category h3 a:hover span {
	color: #BD261D;
	border-color: #BD261D;
}

.home-category ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.home-category li {
	padding: 0;
	margin: 0;
}

.home-category li a {
	min-height: 32px;
	display: flex;
	align-items: center;
	color: #454545;
	line-height: 1.45;
	padding: 5px 0;
}

.home-category li a:hover {
	color: #BD261D;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.home-category.wide ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
}

.home-category .category-decoration {
	position: absolute;
	right: -52px;
	bottom: -70px;
	width: 340px;
	max-width: none;
	height: auto;
	display: block;
	pointer-events: none;
}

/* Расчёт по спецификации */
.main.container>.quote-section {
	margin: 80px 0;
}

.main.container>.quote-section:last-child {
	margin-bottom: 40px;
}

.quote-layout {
	background: #f3f3f3;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	align-items: start;
	gap: 56px;
	border-radius: 4px;
	padding: 44px;
}

.quote-copy,
.quote-form {
	min-width: 0;
}

.quote-copy h2 {
	position: static;
	max-width: 560px;
	color: #252525;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.025em;
	hyphens: none;
	text-wrap: balance;
	margin: 0 0 20px;
}

.quote-copy>p {
	max-width: 470px;
	color: #626262;
	line-height: 1.65;
	margin: 0;
}

.quote-phone {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
	color: #626262;
	margin-top: 20px;
}

.quote-phone a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: #303030;
	font-weight: 500;
	text-decoration: none;
}

.quote-phone a:hover {
	color: #BD261D;
}

.quote-channels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	font-size: var(--font-small);
	margin-top: 30px;
}

.quote-phone+.quote-channels {
	margin-top: 12px;
}

.quote-channels>span {
	flex-basis: 100%;
	color: #666;
}

.quote-channels .messenger {
	background: transparent;
	width: auto;
	min-height: 36px;
	display: inline-flex;
	gap: 8px;
	color: #303030;
	font-size: inherit;
	font-weight: 500;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

.quote-channels .messenger:before {
	background-size: 20px 20px;
	width: 20px;
	height: 20px;
}

.quote-channels .messenger:hover {
	color: #BD261D;
}

.quote-form [hidden] {
	display: none !important;
}

.quote-file {
	position: relative;
	background: #f3f3f3;
	border: 1px solid #e3e3e3;
	border-radius: 3px;
}

.quote-attach {
	position: relative;
	min-height: 90px;
	display: flex;
	align-items: center;
	gap: 16px;
	cursor: pointer;
	padding: 18px 20px;
}

.quote-attach>.icon {
	background: #292929;
	width: 40px;
	height: 40px;
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
}

.quote-attach>.icon:before {
	filter: brightness(0) invert(1);
}

.quote-attach input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.quote-file:focus-within {
	outline: 2px solid #BD261D;
	outline-offset: 3px;
}

.quote-file:hover {
	border-color: #aaa;
}

.quote-file-text {
	min-width: 0;
	display: block;
}

.quote-file-text strong {
	display: block;
	overflow-wrap: anywhere;
	font-size: var(--font-base);
	font-weight: 500;
	line-height: 1.4;
}

.quote-file-text small {
	display: block;
	color: #626262;
	font-size: var(--font-small);
	margin-top: 4px;
}

.quote-remove {
	background: transparent;
	min-height: 36px;
	display: block;
	cursor: pointer;
	color: #626262;
	font: inherit;
	font-size: var(--font-small);
	text-decoration: underline;
	border: 0;
	padding: 0;
	margin: 0 20px 10px 76px;
}

.quote-list {
	margin: 8px 0 20px;
}

.quote-list summary {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	color: #555;
	font-size: var(--font-small);
	text-decoration: underline;
	text-decoration-color: #aaa;
	text-underline-offset: 4px;
	list-style: none;
	padding: 4px 0;
}

.quote-list summary::-webkit-details-marker {
	display: none;
}

.quote-list summary:hover {
	color: #BD261D;
}

.quote-form textarea {
	background: #fff;
	width: 100%;
	min-height: 112px;
	display: block;
	resize: vertical;
	color: #252525;
	font: inherit;
	border: 1px solid #d6d6d6;
	border-radius: 3px;
	padding: 14px 16px;
	margin: 8px 0 0;
}

.quote-label {
	display: block;
	color: #444;
	font-size: var(--font-small);
	margin-bottom: 9px;
}

.quote-send {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
}

.quote-send input {
	background: #fff;
	width: 100%;
	min-width: 0;
	height: 56px;
	color: #252525;
	font: inherit;
	border: 1px solid #d6d6d6;
	border-radius: 3px;
	padding: 0 16px;
}

.quote-send input::placeholder {
	color: #757575;
	font-size: var(--font-small);
}

.quote-send button {
	background: #BD261D;
	min-height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	cursor: pointer;
	color: #fff;
	font: inherit;
	font-size: var(--font-small);
	font-weight: 600;
	white-space: nowrap;
	border: 0;
	border-radius: 3px;
	padding: 12px 20px;
}

.quote-send button:hover {
	background: #a71f17;
}

.quote-send button .icon {
	width: 20px;
	height: 24px;
}

.quote-send button .icon:before {
	filter: brightness(0) invert(1);
	transform: scale(.8);
}

.quote-legal {
	color: #626262;
	font-size: var(--font-small);
	line-height: 1.5;
	margin-top: 18px;
}

.quote-legal label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.quote-legal input {
	background: #fff;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	appearance: auto;
	accent-color: #BD261D;
	margin-top: 3px;
}

.quote-legal a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: #aaa;
	text-underline-offset: 3px;
}

.quote-legal .cart-privacy {
	display: inline-block;
	margin: 6px 0 0 28px;
}

.quote-message {
	color: #626262;
	font-size: var(--font-small);
	margin: 16px 0 0;
}

.quote-form fieldset {
	min-width: 0;
	border: 0;
	padding: 0;
	margin: 0;
}

.quote-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.quote-message.is-error {
	color: #BD261D;
}

.quote-check,
.quote-new {
	background: transparent;
	min-height: 44px;
	cursor: pointer;
	color: #626262;
	font: inherit;
	font-size: var(--font-small);
	text-decoration: underline;
	text-underline-offset: 4px;
	border: 0;
	padding: 0;
	margin-top: 12px;
}

/* Доставка и условия поставки */
.main.container>.delivery {
	margin-top: 80px;
}

.delivery-intro {
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 16px 48px;
	margin-bottom: 36px;
}

.delivery-intro h2 {
	grid-column: 1 / -1;
	margin: 0;
}

.delivery-intro>p {
	max-width: 740px;
	color: #626262;
	line-height: 1.65;
	margin: 0;
}

.delivery-link,
.delivery-link:visited {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #252525;
	font-size: var(--font-base);
	text-decoration: none;
}

.delivery-link:hover {
	color: #BD261D;
}

.delivery-link .icon {
	width: 24px;
	height: 24px;
}

.delivery-terms {
	min-width: 0;
	border-top: 1px solid #dedede;
}

.delivery-terms details {
	border-bottom: 1px solid #dedede;
}

.delivery-terms summary {
	min-height: 90px;
	display: flex;
	align-items: center;
	cursor: pointer;
	list-style: none;
	padding: 24px 0;
}

.delivery-terms summary::-webkit-details-marker {
	display: none;
}

.delivery-heading {
	width: 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	font-size: var(--font-large);
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.delivery-label {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 24px;
}

.delivery-condition {
	color: #707070;
	font-size: var(--font-base);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
}

.delivery-toggle {
	background: #f3f3f3;
	width: 32px;
	height: 32px;
	display: flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	border: 1px solid #f3f3f3;
	border-radius: 4px;
}

.delivery-toggle .icon {
	width: 24px;
	height: 24px;
}

.delivery-toggle .icon-minus {
	display: none;
}

.delivery-terms summary:hover .delivery-toggle {
	background: #e8e8e8;
	border-color: #e8e8e8;
}

.delivery-terms details[open] .icon-plus {
	display: none;
}

.delivery-terms details[open] .icon-minus {
	display: inline-flex;
}

.delivery-answer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 64px;
	padding: 0 56px 32px 0;
}

.delivery-copy {
	max-width: 660px;
	min-width: 0;
}

.delivery-photos {
	min-width: 0;
	display: flex;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.delivery-photos li {
	min-width: 0;
	flex: 0 1 200px;
	padding: 0;
	margin: 0;
}

.delivery-photos a {
	background: #f3f3f3;
	width: 100%;
	aspect-ratio: 4 / 3;
	display: block;
	overflow: hidden;
	cursor: zoom-in;
	border-radius: 6px;
}

.delivery-photos img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.delivery-answer p {
	color: #515151;
	line-height: 1.65;
	margin: 0;
}

.delivery-answer p+p {
	margin-top: 12px;
}

.delivery :focus-visible {
	outline: 2px solid #BD261D;
	outline-offset: 5px;
	border-radius: 3px;
}

/* О компании на главной */
.company {
	scroll-margin-top: calc(var(--header-bottom, 130px) + 24px);
}

.company h2 {
	max-width: 1100px;
	hyphens: none;
	margin: 0;
}

.company>.section-description {
	max-width: 900px;
}

.company-photos {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	aspect-ratio: 3;
	gap: 16px;
	margin-top: 32px;
}

.company-photos a {
	background: #f3f3f3;
	min-width: 0;
	min-height: 0;
	display: block;
	overflow: hidden;
	cursor: zoom-in;
	border-radius: 8px;
}

.company-photos img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: inherit;
}

.company-photos .yard {
	grid-column: 2;
	grid-row: 1 / 3;
}

.company-photos .yard img {
	object-position: 50% 50%;
}

.company-photos .stock {
	grid-column: 1;
	grid-row: 1;
}

.company-photos .stock img {
	object-position: 50% 56%;
}

.company-photos .loading {
	grid-column: 3;
	grid-row: 1;
}

.company-photos .loading img {
	object-position: 48% 74%;
}

.company-photos .pipes {
	grid-column: 1;
	grid-row: 2;
}

.company-photos .pipes img {
	object-position: 50% 100%;
}

.company-photos .sheets {
	grid-column: 3;
	grid-row: 2;
}

.company-photos a:focus-visible {
	outline: 2px solid #bd261d;
	outline-offset: 4px;
}

.company-photos.incomplete {
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-template-rows: auto;
	aspect-ratio: auto;
}

.company-photos.incomplete a {
	grid-column: auto;
	grid-row: auto;
	aspect-ratio: 4 / 3;
}

/* Отзывы покупателей на главной */
.reviews-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 32px;
	margin-bottom: 28px;
}

.reviews-copy {
	grid-row: 1 / span 2;
}

.reviews-intro h2 {
	margin: 0;
}

.reviews-rating {
	justify-self: end;
	margin: 0;
}

.reviews-rating strong {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #252525;
	font-size: calc(var(--font-large) * 2);
	font-weight: 600;
	line-height: 1.1;
}

.reviews-rating strong:after {
	content: "";
	background-image: url(images/review-star.png);
	background-image: image-set(url(images/review-star.png) 1x, url(images/review-star@2x.png) 2x);
	background-repeat: no-repeat;
	background-size: 24px 24px;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	filter: brightness(0) saturate(100%) invert(73%) sepia(86%) saturate(908%) hue-rotate(350deg) brightness(103%) contrast(98%);
}

.reviews-all,
.reviews-all:visited {
	min-height: 44px;
	display: inline-flex;
	grid-column: 2;
	justify-self: end;
	align-items: center;
	color: #626262;
	font-size: var(--font-small);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.review-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.review {
	background: #f3f3f3;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
	border-radius: 3px;
	padding: 28px;
	margin: 0;
}

.review blockquote,
.review blockquote p {
	color: #303030;
	line-height: 1.65;
	margin: 0;
}

.review figcaption {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: auto;
}

.review figcaption strong {
	font-size: var(--font-base);
	font-weight: 600;
	line-height: 1.45;
}

.review time {
	color: #626262;
	font-size: var(--font-small);
	margin-top: 4px;
}

.review figcaption a,
.review figcaption a:visited {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: #626262;
	font-size: var(--font-small);
	text-decoration: underline;
	text-underline-offset: 4px;
	margin-top: 8px;
}

.reviews a:hover {
	color: #BD261D;
}

.reviews a:focus-visible {
	outline: 2px solid #BD261D;
	outline-offset: 4px;
	border-radius: 2px;
}

.home-hero {
	background-color: #d4dfe9;
	background-image: url(images/hero/desktop.webp?v=6596f3233a6e);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.home-hero>.container {
	position: relative;
	min-height: clamp(375px, 32vw, 620px);
	display: flex;
	align-items: flex-start;
	padding-top: clamp(8px, calc(12vw - 144px), 72px);
	padding-bottom: 40px;
}

.hero-copy {
	z-index: 1;
	position: relative;
	width: 46%;
	max-width: 570px;
	min-width: 0;
}

.home-hero h1 {
	position: static;
	line-height: 1.12;
	letter-spacing: -.025em;
	text-wrap: balance;
	margin: 0 0 16px;
}

.hero-copy>p {
	max-width: 510px;
	color: #34373b;
	line-height: 1.55;
	margin: 0;
}

.hero-copy>.hero-note {
	max-width: 500px;
	color: #666;
	font-size: 14px;
	line-height: 1.5;
	margin-top: 16px;
}

.hero-note strong {
	color: #303030;
}

.content {
	flex: 1 0 auto;
}

/**
 * Шапка: контакты, навигация и поиск.
 */
.site-header {
	z-index: 10001;
	position: sticky;
	top: 0;
	background: #fff;
	width: 100%;
	flex-shrink: 0;
	color: #191919;
	font-size: 14px;
	line-height: 1.45;
	border-bottom: 1px solid #e8e8e8;
}

.site-header a,
.panel a {
	color: #191919;
	text-decoration: none;
}

.site-header a:hover,
.panel a:hover {
	color: #bd261d;
}

.site-header button,
.panel button {
	font-family: inherit;
}

.site-header :focus-visible,
.panel :focus-visible {
	outline: 2px solid #bd261d;
	outline-offset: 4px;
}

.skip-link {
	z-index: 2;
	position: absolute;
	top: 0;
	left: 20px;
	background: #fff;
	transform: translateY(-150%);
	padding: 12px;
}

.skip-link:focus {
	transform: translateY(0);
}

.header-top {
	background: #f5f5f5;
}

.header-top>.container {
	min-height: 42px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.phone-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	font-weight: 600;
}

.header-links {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-left: auto;
}

.header-links>a {
	min-height: 42px;
	display: inline-flex;
	align-items: center;
}

.contact-button,
.more>summary {
	background: transparent;
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	color: #191919;
	font-size: inherit;
	border: 0;
	padding: 0;
}

.contact-button:hover,
.more>summary:hover,
.more[open]>summary,
.header-links [aria-current="page"] {
	color: #bd261d;
}

/**
 * Второстепенные ссылки в нативном раскрывающемся списке верхней строки.
 */
.more {
	position: relative;
}

.more>summary::-webkit-details-marker {
	display: none;
}

.more[open]>summary .symbol {
	transform: rotate(180deg);
}

.more-links {
	z-index: 4;
	position: absolute;
	top: 100%;
	right: 0;
	background: #fff;
	width: 300px;
	max-height: calc(100dvh - 42px);
	overflow-y: auto;
	overscroll-behavior: contain;
	font-size: var(--font-small);
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	box-shadow: 0 12px 30px rgb(0 0 0 / 12%);
	padding: 8px 0;
}

.more-links a {
	min-height: 44px;
	display: flex;
	align-items: center;
	color: #191919;
	line-height: 1.45;
	padding: 10px 18px;
}

.more-links a:hover,
.more-links a:focus-visible {
	background: #f5f5f5;
	color: #bd261d;
}

.header-main {
	min-height: 88px;
	display: grid;
	grid-template-columns: 187px 142px minmax(180px, 1fr) auto;
	align-items: center;
	gap: 32px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.header-logo {
	display: block;
}

.header-logo img {
	width: 100%;
	height: auto;
	display: block;
}

.action-button,
.panel .action-button {
	background: #bd261d;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	border: 0;
	border-radius: 3px;
	padding: 12px 18px;
}

.action-button:hover,
.panel .action-button:hover {
	background: #a32018;
	color: #fff;
}

.catalog-button .symbol {
	filter: invert(1);
}

.search-form {
	position: relative;
	background: #fff;
	min-width: 0;
	height: 48px;
	display: flex;
	align-items: center;
	border: 1px solid #c8c8c8;
	border-radius: 3px;
}

.search-form:focus-within {
	border-color: #bd261d;
	box-shadow: 0 0 0 1px #bd261d;
}

.search-form input[type="search"] {
	background: transparent;
	width: 100%;
	min-width: 0;
	height: 100%;
	flex: 1;
	font-family: inherit;
	color: #191919;
	font-size: 16px;
	line-height: normal;
	border: 0;
	outline: 0;
	box-shadow: none;
	padding: 0 0 0 16px;
	margin: 0;
}

.search-form input::placeholder {
	color: #757575;
}

.search-form button,
.icon-button {
	position: relative;
	background: transparent;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	color: #191919;
	font-size: 14px;
	font-weight: 500;
	border: 0;
	border-radius: 3px;
	padding: 10px;
}

.search-form button:hover,
.icon-button:hover {
	background: #f3f3f3;
}

/**
 * Подсказки каталога: общая типографика, категории и товары в одном списке.
 */
.suggestions {
	z-index: 3;
	position: absolute;
	top: calc(100% + 6px);
	left: -1px;
	right: -1px;
	background: #fff;
	max-height: min(720px, var(--suggest-height, 65vh));
	overflow-y: auto;
	overscroll-behavior: contain;
	scroll-padding-top: 8px;
	scroll-padding-bottom: 60px;
	color: #191919;
	font-size: var(--font-base);
	line-height: 1.4;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
	padding: 8px 0;
}

.suggestions[hidden],
.search-message[hidden] {
	display: none;
}

.search-label,
.search-message {
	color: #666;
	font-size: var(--font-small);
	padding: 10px 16px;
	margin: 0;
}

.suggestions .suggestion {
	min-height: 44px;
	display: block;
	overflow-wrap: anywhere;
	color: #191919;
	text-decoration: none;
	padding: 10px 16px;
}

.suggestions .suggestion:hover,
.suggestions .suggestion[aria-selected="true"] {
	background: #f5f5f5;
	color: #bd261d;
}

.suggestion small {
	display: block;
	color: #666;
	font-size: var(--font-small);
	margin-top: 3px;
}

.suggestions .search-all {
	z-index: 1;
	position: sticky;
	bottom: -8px;
	background: #fff;
	color: #bd261d;
	font-size: 14px;
	font-weight: 600;
	border-top: 1px solid #e8e8e8;
	margin-top: 8px;
}

.mobile-call,
.menu-toggle {
	display: none;
}

.cart-count {
	position: absolute;
	top: 3px;
	left: 25px;
	background: #bd261d;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	line-height: 18px;
	border-radius: 6px;
	padding: 0 2px;
}

/**
 * Иконки существующего спрайта и исходные PNG из набора пользователя.
 */
.symbol {
	background-image: url(images/icons/black.png);
	background-image: image-set(url(images/icons/black.png) 1x, url(images/icons/black@2x.png) 2x);
	background-repeat: no-repeat;
	background-size: 240px 240px;
	width: 24px;
	height: 24px;
	display: block;
	flex-shrink: 0;
}

.search-icon {
	background-position: 0 0;
}

.close-icon {
	background-position: -24px 0;
}

.menu-icon {
	background-position: -48px 0;
}

.down-icon {
	background-position: -120px -48px;
}

.right-icon {
	background-position: -96px -48px;
}

.check-icon {
	background-position: -168px -96px;
}

.phone-icon {
	transform: scaleX(-1);
	background-image: url(images/header/phone.png);
	background-image: image-set(url(images/header/phone.png) 1x, url(images/header/phone@2x.png) 2x);
	background-size: 24px 24px;
}

.cart-symbol {
	background-image: url(images/header/cart.png);
	background-image: image-set(url(images/header/cart.png) 1x, url(images/header/cart@2x.png) 2x);
	background-size: 24px 24px;
}

.cart-button .cart-symbol {
	background-image: url(images/header/cart-outline.png);
	background-image: image-set(url(images/header/cart-outline.png) 1x, url(images/header/cart-outline@2x.png) 2x);
}

/**
 * Раскрываемые панели шапки: каталог, контакты, меню и корзина.
 */
body.panel-open {
	overflow: hidden;
}

.panel {
	position: fixed;
	top: var(--header-bottom, 130px);
	left: 0;
	right: 0;
	background: #fff;
	width: calc(100% - 40px);
	max-width: none;
	max-height: calc(100dvh - var(--header-bottom, 130px) - 24px);
	overflow: auto;
	overscroll-behavior: contain;
	color: #191919;
	font-size: 15px;
	line-height: 1.5;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	box-shadow: 0 12px 30px rgb(0 0 0 / 12%);
	padding: 28px 32px 28px;
	margin: 0 auto;
}

.panel.container {
	position: fixed;
}

.panel::backdrop {
	background: rgb(0 0 0 / 24%);
}

.panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid #e8e8e8;
	padding-bottom: 16px;
	margin-bottom: 24px;
}

.panel-title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}

.catalog-panel > .icon-button {
	position: absolute;
	top: 14px;
	right: 20px;
}

.catalog-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	padding: 14px 56px 0 0;
}

.category-link {
	display: block;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 12px;
}

.catalog-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	align-items: center;
	column-gap: 12px;
}

.catalog-group ul {
	grid-column: 1 / -1;
}

.category-toggle {
	display: none;
}

.category-toggle[aria-expanded="true"] .symbol {
	transform: rotate(180deg);
}

.catalog-group li+li {
	margin-top: 10px;
}

.catalog-group li a {
	display: block;
	color: #555;
	font-size: 14px;
}

.catalog-link {
	background: transparent;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	color: inherit;
	font: inherit;
	font-weight: 600;
	border: 0;
	padding: 0;
	margin-top: 28px;
}

.contact-panel {
	width: min(480px, calc(100% - 40px));
	margin-left: var(--header-left, 20px);
}

.contact-phone {
	display: block;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
}

.muted {
	color: #666;
	font-size: 14px;
}

.contact-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-style: normal;
	margin-top: 16px;
}

.drawer {
	top: 0;
	left: auto;
	width: min(440px, 100%);
	height: 100dvh;
	max-height: none;
	border: 0;
	border-radius: 0;
	margin: 0 0 0 auto;
}

.cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
	padding: 56px 0;
}

.empty-title {
	font-size: 20px;
	font-weight: 600;
}

.cart-empty .action-button {
	margin-top: 8px;
}

.mobile-nav {
	margin-bottom: 28px;
}

.mobile-nav>a,
.mobile-nav>button {
	background: transparent;
	width: 100%;
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	color: #191919;
	font-size: 16px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid #ededed;
	padding: 12px 0;
}

.menu-contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 20px;
	font-weight: 600;
	margin-top: 32px;
}

/**
 * Результаты поиска из шапки.
 */
.search-results {
	padding-bottom: 40px;
}

.search-summary {
	color: #666;
	margin: 16px 0 24px;
}

.search-list li {
	border-bottom: 1px solid #e8e8e8;
}

.search-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	color: #191919;
	font-size: 17px;
	text-decoration: none;
	padding: 18px 0;
}

.search-list a:hover {
	color: #bd261d;
}

.search-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.search-pages .page-numbers {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #191919;
	text-decoration: none;
	padding: 8px;
}

.search-pages .current {
	background: #bd261d;
	color: #fff;
}

/* HEADER */
.header {
	z-index: 1000;
	position: relative;
	background-color: var(--white-color);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}

.logo {
	flex-shrink: 0;
	color: var(--text-color);
	font-size: 24px;
	font-weight: 700;
}

.logo:visited,
.mobile-phone:visited,
.nav a:visited,
.phone a:visited {
	color: var(--text-color);
}

.mobile-phone,
.menu-button {
	display: none;
}

.menu {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	text-align: left;
	line-height: 1.3;
}

.nav {
	min-width: 0;
	flex: 1 1 auto;
}

.nav>ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}

.nav li {
	position: relative;
	color: var(--text-color);
	font-weight: 500;
}

.nav a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	white-space: nowrap;
	color: var(--text-color);
	border-radius: var(--radius);
	transition: background-color .3s;
	padding: 9px 13px 10px;
}

.nav a:hover {
	background-color: var(--gray-color-35);
	color: var(--text-color);
}

.contacts {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: auto;
}

.address {
	max-width: 190px;
	color: var(--gray-color-100);
	font-size: 15px;
	font-style: normal;
	line-height: 1.55;
}

.address span:not(:last-child):after {
	content: ", ";
}

.phone {
	flex-shrink: 0;
}

.phone a {
	display: block;
	white-space: nowrap;
	color: var(--text-color);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.1;
}

.hours {
	display: block;
	white-space: nowrap;
	color: var(--gray-color-90);
	font-size: 15px;
	line-height: 1.3;
	margin-top: 2px;
}

.messengers {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	column-gap: 6px;
}

.messenger {
	background-color: var(--gray-color-30);
	width: 44px;
	height: 44px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--radius);
	transition: background-color .3s;
}

.messenger:hover {
	background-color: var(--gray-color-45);
}

.messenger:before {
	content: "";
	background-repeat: no-repeat;
	background-size: 22px 22px;
	width: 22px;
	height: 22px;
	display: block;
}

.messenger.whatsapp:before {
	background-image: url(images/messengers/whatsapp-mono.png);
	background-image: image-set(url(images/messengers/whatsapp-mono.png) 1x,
			url(images/messengers/whatsapp-mono@2x.png) 2x);
}

.messenger.telegram:before {
	background-image: url(images/messengers/telegram-mono.png);
	background-image: image-set(url(images/messengers/telegram-mono.png) 1x,
			url(images/messengers/telegram-mono@2x.png) 2x);
}

.messenger.max:before {
	background-image: url(images/messengers/max-mono.png);
	background-image: image-set(url(images/messengers/max-mono.png) 1x,
			url(images/messengers/max-mono@2x.png) 2x);
}

/* BREADCRUMBS */
.breadcrumbs {
	opacity: .5;
	font-size: 15px;
	margin-bottom: 15px;
}

.breadcrumbs li {
	position: relative;
	display: inline-block;
	color: var(--text-color);
}

.breadcrumbs li:after {
	content: "›";
	display: inline-block;
	margin: 0 5px;
}

.breadcrumbs li:last-child:after {
	content: none;
}

.breadcrumbs li a {
	color: var(--text-color);
}

.breadcrumbs li a:hover {
	color: var(--primary-color-accent);
}

/* TITLE */
.title {
	display: block;
	opacity: .3;
	color: var(--text-color);
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	margin-bottom: 30px;
}

/* COLUMNS */
.columns {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}

.columns .column {
	flex-shrink: 0;
}

/* THUMBNAIL */
.thumbnail {
	width: 100%;
	display: block;
	margin-bottom: 16px;
}

.thumbnail img,
.thumbnail.no {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
}

.thumbnail.no {
	position: relative;
	background-color: var(--gray-color-45);
	padding-top: 66.71%;
}

.thumbnail.no:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-image: var(--icon);
	background-repeat: no-repeat;
	background-size: 240px;
	background-position: 0 -72px;
	width: 24px;
	height: 24px;
	display: block;
	opacity: .8;
	margin-top: -12px;
	margin-left: -12px;
}

/* ARTICLES */
.articles .card {
	position: relative;
	margin-bottom: 50px;
}

.articles .card .name {
	display: block;
	color: var(--text-color);
	font-weight: 700;
}

.articles .card .name:hover {
	color: var(--primary-color-accent);
}

/* ARTICLE */
.article {
	position: relative;
	width: 100%;
	margin-bottom: 50px;
}

.article .introduction {
	line-height: 1.5;
	margin-bottom: 35px;
}

/**
 * Типографика текстовых страниц.
 */
.page-text {
	min-width: 0;
	overflow-wrap: anywhere;
	line-height: 1.75;
}

.page-text> :first-child {
	margin-top: 0;
}

.page-text> :last-child {
	margin-bottom: 0;
}

.page-text p {
	margin: 0 0 24px;
}

.page-text h2 {
	left: 0;
	scroll-margin-top: 180px;
	font-size: var(--font-large);
	line-height: 1.45;
	margin: 48px 0 20px;
}

.page-text h3 {
	left: 0;
	scroll-margin-top: 180px;
	font-size: var(--font-base);
	line-height: 1.5;
	margin: 32px 0 16px;
}

.page-text ul,
.page-text ol {
	margin: 20px 0 24px;
}

.page-text li {
	margin-top: 12px;
	margin-bottom: 12px;
}

.page-text a {
	color: #bd261d;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.page-date {
	color: #666;
	font-size: var(--font-small);
}

/** Контакты: общая сетка, единая типографика и карта по запросу. */
.contact-page {
	line-height: 1.5;
}

.contact-page [hidden] {
	display: none;
}

.contact-grid {
	display: grid;
	gap: 52px clamp(32px, 4vw, 72px);
}

.contact-grid>section {
	min-width: 0;
}

.contact-page h2 {
	left: 0;
	font-size: var(--font-large);
	line-height: 1.4;
	margin: 0 0 24px;
}

.contact-hours,
.contact-note {
	color: #666;
	font-size: var(--font-small);
}

.contact-hours {
	margin: 4px 0 18px;
}

.contact-hours span {
	display: block;
}

.contact-note {
	display: block;
	margin: 4px 0 0;
}

.contact-phones {
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
}

.contact-phones a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.contact-phones .primary {
	font-size: var(--font-large);
	font-weight: 600;
}

.contact-details a,
.contact-details a:visited {
	color: #262626;
}

.contact-details a:hover {
	color: #bd261d;
}

.contact-email {
	max-width: 100%;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	overflow-wrap: anywhere;
	text-decoration: underline;
	text-decoration-color: #ccc;
	text-underline-offset: 4px;
}

.contact-page .messengers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
}

.contact-page .messenger {
	background: #f3f3f3;
	width: auto;
	gap: 10px;
	font-size: var(--font-small);
	border-radius: 6px;
	padding: 8px 14px;
}

.contact-page .messenger:hover {
	background: #e9e9e9;
}

.contact-details .contact-requisites {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: #666;
	font-size: var(--font-small);
	margin-top: 22px;
}

.contact-location address {
	font-style: normal;
}

.contact-page .map {
	background: #f5f5f5;
	width: 100%;
	height: 380px;
	display: block;
	border: 0;
	border-radius: 3px;
	margin: 24px 0 0;
}

.map-actions a:not(.action-button) {
	color: #666;
	text-decoration: underline;
	text-decoration-color: #ccc;
	text-underline-offset: 4px;
}

.map-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	font-size: var(--font-small);
	margin: 20px 0 0;
}

.map-actions a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.map-actions .action-button {
	min-height: 48px;
	color: #fff;
	font-size: var(--font-small);
}

.contact-photos {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
}

.contact-photos h2 {
	grid-column: 1 / -1;
	margin-bottom: 8px;
}

.contact-photos figure {
	min-width: 0;
	margin: 0;
}

.contact-photos a {
	background: #f3f3f3;
	display: block;
	overflow: hidden;
	cursor: zoom-in;
	border-radius: 2px;
}

.contact-photos img {
	width: 100%;
	height: clamp(250px, 25vw, 380px);
	display: block;
	object-fit: cover;
}

.contact-photos figcaption {
	color: #666;
	font-size: var(--font-small);
	line-height: 1.5;
	margin-top: 10px;
}

.contact-page a:focus-visible,
.contact-page button:focus-visible {
	outline: 2px solid #bd261d;
	outline-offset: 4px;
}

/** Реквизиты компании и копирование отдельных значений. */
.requisites-group {
	margin-bottom: 50px;
}

.requisites-group:last-child {
	margin-bottom: 0;
}

.requisites-group h2 {
	left: 0;
	font-size: var(--font-large);
	line-height: 1.4;
	margin-bottom: 16px;
}

.requisites-list {
	border-top: 1px solid var(--gray-color-45);
	margin: 0;
}

.requisites-item {
	display: grid;
	grid-template-columns: minmax(180px, 28%) minmax(0, 1fr);
	align-items: start;
	column-gap: 40px;
	border-bottom: 1px solid var(--gray-color-45);
	padding-top: 18px;
	padding-bottom: 18px;
}

.requisites-item dt {
	color: var(--gray-color-95);
	font-size: var(--font-small);
	line-height: 1.5;
}

.requisites-value {
	min-width: 0;
	display: flex;
	align-items: flex-start;
	column-gap: 16px;
	font-size: var(--font-base);
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.requisites-text {
	min-width: 0;
	display: block;
	flex: 1;
	overflow-wrap: anywhere;
}

.requisites .copy {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	margin-top: -9px;
	margin-bottom: -9px;
}

.requisites .copy:focus-visible {
	outline: 2px solid #bd261d;
	outline-offset: 2px;
}

/* TOC */
.toc .toc-title {
	background-color: transparent;
	display: block;
	cursor: default;
	font-family: inherit;
	color: var(--text-color);
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	border: none;
	padding: 0 2px;
}

.toc .toc-list {
	text-align: left;
	-ms-overflow-style: none;
	scrollbar-width: none;
	margin: 0;
}

.toc .toc-list::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.toc .toc-list li {
	display: block;
	padding: 2px;
	margin: 0;
}

.toc .toc-list li:before {
	content: none;
}

.toc .toc-list li a {
	display: block;
	color: var(--text-color);
	line-height: 1.5;
	padding-left: 2px;
	padding-right: 2px;
}

.toc .toc-list li a.current {
	color: var(--primary-color-accent);
}

.toc .toc-list li a.h3 {
	padding-left: 16px;
}

/* SITEMAP */
.sitemap .item {
	position: relative;
	border: 1px solid var(--gray-color-55);
	border-radius: var(--radius);
	margin-top: 22px;
	margin-bottom: 22px;
}

.sitemap .item a {
	color: var(--text-color);
}

.sitemap .item a:hover {
	color: var(--primary-color-accent);
}

/* TEXT */
.text {
	text-align: left;
}

.text img {
	max-width: 100%;
	height: auto;
}

.text p {
	margin-bottom: 35px;
}

.text ul,
.text ol {
	margin: 35px 0;
}

.text ol {
	counter-reset: list;
}

.text ul li,
.text ol li {
	position: relative;
	display: block;
	margin: 15px 0;
}

.text ul li:before {
	content: "—";
	margin-right: 10px;
}

.text ol li:before {
	content: counter(list) ". ";
	counter-increment: list;
}

.text blockquote {
	font-size: 120%;
	line-height: 1.4;
	border-left: 2px solid var(--primary-color-accent);
	padding-left: 30px;
	margin-left: 0;
}

.text .gallery {
	margin-bottom: 35px;
}

.text .youtube-video {
	position: relative;
	height: 0;
	overflow: hidden;
	border-radius: var(--radius);
	padding-bottom: 56.25%;
	margin-bottom: 35px;
}

.text .youtube-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.text .options {
	margin-bottom: 35px;
}

.text .table {
	margin-bottom: 35px;
}

.text .positive-text,
.text .negative-text,
.text .warning-text,
.text .info-text {
	margin-bottom: 35px;
}

/* TABLE */
.text table {
	max-width: 100%;
	display: inline-block;
	overflow-x: auto;
	margin-bottom: 35px;
}

.text table caption {
	font-weight: 500;
	text-align: left;
	margin-bottom: 15px;
}

.text table th {
	font-size: 84%;
	font-weight: 500;
	vertical-align: bottom;
}

.text table th,
.text table td {
	vertical-align: top;
	border: 1px solid var(--gray-color-60);
}

/* COLOR TEXT */
.positive-text,
.negative-text,
.warning-text,
.info-text {
	color: #fff;
	text-align: left;
	line-height: 1.5;
}

.positive-text {
	background-color: var(--green-color-accent);
}

.negative-text {
	background-color: var(--red-color-accent);
}

.warning-text {
	background-color: var(--orange-color-accent);
}

.info-text {
	background-color: var(--blue-color-accent);
}

/* IMAGE */
.article-image {
	position: relative;
	display: block;
	margin-top: 35px;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 35px;
}

.article-image .image-wrapper {
	position: relative;
	display: inline-block;
}

.article-image.width-tiny .image-wrapper {
	max-width: 230px;
}

.article-image.width-small .image-wrapper {
	max-width: 340px;
}

.article-image.width-medium .image-wrapper {
	max-width: 440px;
}

.article-image.width-large .image-wrapper {
	max-width: 540px;
}

.article-image .image-wrapper img {
	z-index: 1;
	position: relative;
	max-width: 100%;
	height: auto;
	display: inline-block;
	vertical-align: bottom;
}

.article-image .caption {
	display: block;
	color: var(--text-color);
	font-size: 82%;
	margin-top: 10px;
}

/* MEDIA INFO */
.media-info {
	z-index: 2;
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: var(--white-color);
	max-width: 310px;
	min-height: 54px;
	display: none;
	color: var(--text-color);
	border-radius: var(--radius);
	padding: 16px 64px 16px 18px;
}

.media-info.show {
	display: block;
}

.media-info .media-author,
.media-info .media-source {
	font-size: 14px;
	line-height: 1.5;
}

.media-info .media-author:before,
.media-info .media-source:before {
	color: var(--gray-color-90);
}

.media-info .media-author:before {
	content: attr(data-author);
}

.media-info .media-source:before {
	content: attr(data-source);
}

.media-info .link {
	background-color: transparent;
	display: inline;
	cursor: pointer;
	font-style: inherit;
	color: var(--primary-color-accent);
	font-size: 15px;
	border: none;
	padding: 0;
}

.media-info .link:hover {
	color: var(--primary-color-hover);
}

.media-info-button {
	z-index: 3;
	position: absolute;
	top: 10px;
	right: 10px;
}

.media-info-button {
	background-color: rgb(255 255 255 / 20%);
}

.media-info-button:before {
	opacity: .8;
}

/* GALLERY */
.gallery {
	margin-left: -10px;
	margin-right: -10px;
}

.gallery .gallery-item {
	width: calc(50% - 20px);
	display: inline-block;
	vertical-align: top;
	margin: 10px;
}

.gallery .gallery-item .image-wrapper {
	position: relative;
	width: 100%;
	cursor: pointer;
	overflow: hidden;
	border-radius: var(--radius);
	padding-top: 75%;
}

.gallery .gallery-item .image-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 100%;
	display: block;
}

/* OPTIONS */
.options {
	width: 100%;
}

.options dl {
	position: relative;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: flex-end;
	text-align: left;
	margin-top: 12px;
	margin-bottom: 12px;
}

.options dl:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 7px;
	background: repeat-x radial-gradient(2px circle at 1px 1px, var(--gray-color-90) 50%, transparent 50.2%) 0 0 /6px 2px;
	height: 2px;
}

.options dl dt span,
.options dl dd {
	z-index: 1;
	position: relative;
	background-color: var(--white-color);
}

.options dl dt {
	margin-right: auto;
}

.options dl dt span {
	padding-right: 6px;
}

.options dl dd {
	font-weight: 500;
	padding-left: 6px;
	margin-left: 0;
}

.options dl dd.negative {
	color: var(--red-color-accent);
}

.options dl dd.positive {
	color: var(--green-color-accent);
}

/* RELATED ARTICLE */
.related-article {
	position: relative;
	background-color: var(--gray-color-35);
	width: 100%;
	display: flex;
	overflow: hidden;
	border-radius: var(--radius);
	margin-bottom: 35px;
}

.related-article .related-article-image {
	flex-shrink: 1;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.related-article .related-article-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.related-article .related-article-content {
	flex-basis: 0;
	flex-shrink: 0;
	flex-grow: 1;
}

.related-article .related-article-content .headline {
	display: block;
	color: var(--heading-color);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
	margin-bottom: 18px;
}

.related-article .related-article-content .paragraph {
	display: block;
	color: var(--text-color);
	font-size: 17px;
}

.related-article .related-article-content .learn-more {
	margin-top: 22px;
}

/* HELPFUL */
.helpful {
	margin-top: 50px;
	padding-bottom: 80px;
}

.helpful .helpful-title {
	color: var(--text-color);
	display: block;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	margin-bottom: 30px;
}

.helpful .helpful-group {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
}

.helpful .helpful-group .button {
	margin-left: 10px;
	margin-right: 10px;
}

.helpful .helpful-group .button.voted {
	cursor: default;
	color: #fff;
}

.helpful .helpful-group .button.yes.voted {
	background-color: var(--green-color-accent);
	border-color: var(--green-color-accent);
}

.helpful .helpful-group .button.no.voted {
	background-color: var(--red-color-accent);
	border-color: var(--red-color-accent);
}

.helpful .helpful-group .button.voted:before {
	filter: brightness(0) invert(1);
}

/* FAQ */
.qa {
	text-align: left;
	margin-bottom: 50px;
}

.qa h2 {
	margin: 0 0 8px;
}

.qa>.section-description {
	margin-bottom: 6px;
}

.qa details {
	border-bottom: 1px solid var(--gray-color-45);
}

.qa details:last-child {
	border-bottom: none;
}

.qa summary {
	position: relative;
	background-color: transparent;
	width: 100%;
	min-height: 44px;
	display: block;
	cursor: pointer;
	color: var(--text-color);
	font-size: var(--font-large);
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	list-style: none;
	padding: 26px 40px 26px 0;
}

.qa summary::-webkit-details-marker {
	display: none;
}

.qa summary:focus-visible {
	outline: 2px solid #BD261D;
	outline-offset: 4px;
	border-radius: 2px;
}

.qa summary:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	background-image: var(--icon);
	background-repeat: no-repeat;
	background-size: 240px;
	background-position: -192px -96px;
	width: 24px;
	height: 24px;
	display: block;
	opacity: .8;
	transform: translateY(-50%);
}

.qa details[open] summary:after {
	background-position: -216px -96px;
}

.qa summary:hover:after {
	opacity: 1;
}

.qa .text {
	max-width: 72ch;
	color: #626262;
	line-height: 1.65;
	padding-bottom: 26px;
}

.qa .text p:last-child {
	margin-bottom: 0;
}

/* CITATIONS */
.citations {
	margin-top: 60px;
}

.citations .citations-list {
	counter-reset: citations-counter;
	list-style: none;
	padding: 0;
	margin: 0;
}

.citations .citations-list li {
	margin-bottom: 10px;
}

.citations .citations-list li:before {
	content: counter(citations-counter) ". ";
	counter-increment: citations-counter;
}

.citations .citations-list li a:after {
	content: "\00A0\2197";
	display: inline-block;
}

/* TABS */
.tabs {
	overflow: visible;
}

.tabs.article-tabs {
	margin-bottom: 35px;
}

.tabs .tablist {
	margin-bottom: 35px;
}

.tabs.article-tabs .tablist {
	z-index: 1000;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: var(--white-color);
}

.tabs .tablist:after {
	z-index: 1;
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	border-bottom: 1px solid var(--gray-color-50);
}

.tabs .tablist .tablist-inner .tab {
	z-index: 2;
	position: relative;
	background-color: transparent;
	display: inline-block;
	opacity: .8;
	cursor: pointer;
	font-family: inherit;
	color: var(--text-color);
	font-weight: 500;
	line-height: 1.3;
	border: none;
	border-bottom: 1px solid transparent;
	-webkit-user-select: none;
	user-select: none;
	padding-left: 0;
	padding-right: 0;
	padding-top: 15px;
	padding-bottom: 15px;
}

.tabs .tablist .tablist-inner .tab:last-child {
	margin-right: 0;
}

.tabs .tablist .tablist-inner .tab:hover {
	opacity: 1;
}

.tabs .tablist .tablist-inner .tab.active {
	opacity: 1;
	cursor: default;
	color: var(--primary-color-accent);
	border-color: var(--primary-color-accent);
}

.tabs .tabpanel {
	position: relative;
	opacity: 0;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	transform: translateY(20px);
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease,
		transform 0.6s ease,
		height 0.3s ease;
}

.tabs .tabpanel.active {
	opacity: 1;
	visibility: visible;
	height: auto;
	overflow: visible;
	transform: translateY(0);
}

.tabs.article-tabs .tabpanel.active {
	border-bottom: 1px solid var(--gray-color-50);
}

.tabs.article-tabs .tabpanel.active:after {
	content: attr(data-name);
	position: absolute;
	left: 50%;
	bottom: -7px;
	background-color: var(--white-color);
	white-space: nowrap;
	color: var(--gray-color-100);
	font-size: 13px;
	line-height: 15px;
	transform: translateX(-50%);
	padding: 0 10px;
}

/* PAGINATION */
.pagination {
	text-align: center;
	margin-top: 60px;
}

.pagination a,
.pagination span {
	width: 44px;
	height: 44px;
	display: inline-block;
	color: var(--text-color);
	font-size: 15px;
	font-weight: 700;
	line-height: 44px;
	border: none;
	outline: none;
	border-radius: var(--radius);
}

.pagination a:hover {
	background-color: var(--gray-color-45);
	color: var(--text-color);
}

.pagination .current {
	background-color: var(--primary-color-accent);
	color: #fff;
}

/* MODAL */
.modal {
	z-index: 10002;
	position: fixed;
	top: 0;
	right: -100%;
	bottom: 0;
	background-color: rgb(0 0 0 / 80%);
	width: 100%;
	height: 100%;
	visibility: hidden;
	overflow: hidden;
	opacity: 0;
	outline: none;
	transition: opacity 0.2s;
}

.modal.show {
	right: 0;
	visibility: visible;
	opacity: 1;
}

.modal .modal-close {
	z-index: 2;
	position: absolute;
	background-color: var(--gray-color-35);
}

.modal.show .modal-close {
	position: fixed;
}

.modal .side {
	z-index: 1;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: var(--white-color);
	height: 100%;
	min-height: 100%;
	overflow: scroll;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	text-align: left;
	padding-top: 70px;
	padding-bottom: 40px;
}

.modal .side::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.modal .side .tabs .tablist {
	position: relative;
}

.modal .side ul li {
	display: block;
	font-size: 17px;
	font-weight: 400;
	margin-top: 25px;
}

.modal .side ul li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	color: var(--text-color);
	transition: color .5s;
}

.modal .side ul li a:hover {
	color: var(--primary-color-accent);
}

.modal .side ul li a.icon:before {
	flex-shrink: 0;
	margin-right: 13px;
}

/* FORM */
.form {
	text-align: left;
}

.form .fieldset {
	margin-bottom: 35px;
}

.form .legend {
	display: block;
	font-size: 22px;
	font-weight: 500;
	border: 0;
	padding: 0;
	margin-bottom: 35px;
}

.form .label {
	display: block;
	opacity: .9;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 12px;
}

.form .radio,
.form .checkbox {
	display: block;
	cursor: pointer;
	font-family: inherit;
	margin-bottom: 20px;
}

.form .radio input,
.form .checkbox input {
	z-index: 1;
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.form .radio .name,
.form .checkbox .name {
	position: relative;
	display: block;
	-webkit-user-select: none;
	user-select: none;
	font-size: 17px;
	color: var(--text-color);
	line-height: 1.4;
	padding-left: 30px;
}

.form .radio .name:before,
.form .checkbox .name:before {
	z-index: 2;
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 21px;
	height: 21px;
	display: block;
	border: 6px solid var(--gray-color-60);
	transition: border-color 0.3s, opacity 0.3s, box-shadow 0.2s;
}

.form .radio .name:before {
	border-radius: 50%;
}

.form .checkbox .name:before {
	border-width: 1px;
	border-radius: var(--radius);
}

.form .radio:hover input:not(:checked):not(:disabled)+.name:before,
.form .checkbox:hover input:not(:checked):not(:disabled)+.name:before {
	border-color: var(--black-color);
	opacity: .5;
}

.form .radio input:focus+.name:before,
.form .checkbox input:focus+.name:before {
	box-shadow: 0 0 2px 0 var(--primary-color-accent);
}

.form .radio input:checked+.name:before {
	opacity: 1;
	border-color: var(--primary-color-accent);
}

.form .checkbox input:checked+.name:before {
	background-color: var(--primary-color-accent);
	opacity: 1;
	border-color: var(--primary-color-accent);
}

.form .checkbox input:checked+.name:after {
	z-index: 3;
	content: "";
	position: absolute;
	left: 8px;
	top: 7px;
	width: 5px;
	height: 9px;
	border: 2px solid #fff;
	border-top: 0;
	border-left: 0;
	transform: rotate(40deg);
}

.form .radio input:disabled+.name,
.form .checkbox input:disabled+.name {
	cursor: not-allowed;
	opacity: 0.5;
}

.form .input,
.form .select,
.form .textarea {
	background-color: var(--white-color);
	width: 100%;
	display: block;
	font-family: inherit;
	color: var(--text-color);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
	border: 1px solid var(--gray-color-90);
	outline: 1px solid transparent;
	border-radius: var(--radius);
	padding: 12px 16px;
}

.form .input.error,
.form .select.error,
.form .textarea.error {
	border-color: #ff0000;
}

.form .textarea {
	overflow: hidden;
	resize: vertical;
}

.form .input:focus,
.form .textarea:focus {
	border-color: var(--gray-color-125);
}

.form .input::-webkit-input-placeholder,
.form .textarea::-webkit-input-placeholder {
	opacity: 1;
	transition: opacity 0.3s ease;
}

.form .input::-moz-placeholder,
.form .textarea::-moz-placeholder {
	opacity: 1;
	transition: opacity 0.3s ease;
}

.form .input:-ms-input-placeholder,
.form .textarea:-ms-input-placeholder {
	opacity: 1;
	transition: opacity 0.3s ease;
}

.form .input:focus::-webkit-input-placeholder,
.form .textarea:focus::-webkit-input-placeholder {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.form .input:focus::-moz-placeholder,
.form .textarea:focus::-moz-placeholder {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.form .input:focus:-ms-input-placeholder,
.form .textarea:focus:-ms-input-placeholder {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.form .count {
	display: block;
	opacity: .6;
	color: var(--text-color);
	font-size: 14px;
	text-align: right;
	margin-top: 5px;
}

/* NOTICE */
.notice-container {
	z-index: 10003;
	position: fixed;
	right: 15px;
	bottom: 15px;
}

.notice-container .notice {
	position: relative;
	overflow: hidden;
	color: #fff;
	font-size: 16px;
	line-height: 1.3;
	text-align: left;
	border-radius: var(--radius);
	padding: 15px 20px;
	margin-bottom: 10px;
}

.notice-container .notice:last-child {
	margin-bottom: 0;
}

.notice-container .notice.info {
	background-color: var(--blue-color-accent);
}

.notice-container .notice.warning {
	background-color: var(--orange-color-accent);
}

.notice-container .notice.success {
	background-color: var(--green-color-accent);
}

.notice-container .notice.error {
	background-color: var(--red-color-accent);
}

.notice-container .notice output {
	z-index: 2;
	position: relative;
	display: block;
}

.notice-container .notice .notice-progress {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: rgb(0 0 0 / 10%);
	width: 100%;
	transition: width 0.1s linear;
}

/** Футер: контакты слева, каталог и адрес в центре, полезные ссылки справа. */
.footer {
	background: #191919;
	width: 100%;
	flex: 0 0 auto;
	color: #f2f2f2;
	font-size: inherit;
	line-height: 1.6;
	padding: 8px 0 28px;
}

.footer a,
.footer a:visited {
	color: inherit;
}

.footer a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.footer a:focus-visible,
.footer summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 5px;
}

.footer-main {
	display: grid;
	grid-template-columns: minmax(260px, 1.05fr) minmax(0, 1.9fr) minmax(0, .8fr);
	align-items: start;
	gap: 28px clamp(28px, 3.75vw, 72px);
	padding: 48px 0 36px;
}

.footer-contact {
	min-width: 0;
	grid-column: 1;
	grid-row: span 2;
}

.footer .footer-label,
.footer summary {
	color: #aaa;
	font-size: var(--font-small);
	font-weight: 400;
	margin: 0 0 18px;
}

.footer-contact .footer-label {
	margin-bottom: 12px;
}

.footer-phone {
	width: fit-content;
	display: block;
	line-height: 1.5;
	padding: 5px 0;
}

.footer-phone.primary {
	font-size: var(--font-large);
	font-weight: 500;
	letter-spacing: -.025em;
	padding: 0;
}

.footer-phone-label {
	color: #aaa;
	font-size: var(--font-small);
	margin-top: 10px;
}

.footer-hours {
	color: #aaa;
	font-size: var(--font-small);
	margin: 5px 0 14px;
}

.footer-email {
	display: inline-block;
	overflow-wrap: anywhere;
	padding: 8px 0;
	margin-top: 7px;
}

.footer-messengers {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 16px;
}

.footer .messenger {
	border-radius: 12px;
}

.footer-catalog {
	min-width: 0;
	grid-column: 2;
	grid-row: 1;
}

.footer summary {
	list-style: none;
}

.footer summary::-webkit-details-marker {
	display: none;
}

.footer-catalog ul {
	columns: 2;
	column-gap: 40px;
}

.footer-catalog li {
	break-inside: avoid;
}

.footer-catalog a,
.footer-buyers a {
	min-height: 42px;
	display: flex;
	align-items: center;
	overflow-wrap: anywhere;
	line-height: 1.45;
	padding: 8px 0;
}

.footer-buyers {
	min-width: 0;
	grid-column: 3;
	grid-row: span 2;
}

.footer-address {
	min-width: 0;
	grid-column: 2;
	grid-row: 2;
	scroll-margin-top: 180px;
	color: #d5d5d5;
	font-style: normal;
	line-height: 1.7;
}

.footer-address .footer-label {
	margin-bottom: 10px;
}

.footer-map-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
}

.footer-map-links a {
	display: inline-block;
	font-size: var(--font-small);
	text-decoration: underline;
	text-decoration-color: #777;
	text-underline-offset: 4px;
	padding: 8px 0;
	margin-top: 4px;
}

.footer-ending {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 24px 48px;
	margin-bottom: 28px;
}

.footer-note {
	grid-column: 1;
	grid-row: 1;
	color: #aaa;
	font-size: var(--font-small);
	margin: 0;
}

.footer .developer-credit {
	min-height: 44px;
	display: block;
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	color: #aaa;
	font-size: 14px;
	line-height: 1.55;
	text-decoration: none;
	transition: color .18s;
}

.developer-credit .credit-services {
	display: block;
}

.developer-credit .credit-domain {
	white-space: nowrap;
}

.footer .developer-credit:hover {
	color: #fff;
	text-decoration: none;
}

.developer-credit:hover .credit-domain {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 32px;
	color: #aaa;
	font-size: var(--font-small);
	border-top: 1px solid #363636;
	padding-top: 24px;
}

.footer .copyright {
	font-size: inherit;
}

.footer-requisites {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	scroll-margin-top: 180px;
}

.footer-legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
}

.footer-legal a {
	display: inline-block;
	padding: 5px 0;
}

/* COOKIES */
.cookies {
	z-index: 10000;
	position: fixed;
	left: auto;
	right: 10px;
	bottom: 10px;
	background-color: var(--gray-color-45);
	width: 300px;
	display: block;
	line-height: 1.4;
	border: none;
	border-radius: var(--radius);
	padding: 25px;
}

.cookies small {
	display: block;
	color: var(--text-color);
	font-size: 15px;
	margin-bottom: 15px;
}

.cookies .button {
	font-size: 12px;
}

/* OVERLAY */
.overlay {
	z-index: 10001;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(0 0 0 / 80%);
	width: 100%;
	height: 100%;
}

/* POPUP */
.popup {
	z-index: 10004;
}

body.popup-open {
	overflow: hidden;
}

.popup .popup-image {
	z-index: 1;
	position: fixed;
	top: 50%;
	left: 50%;
	width: auto;
	max-width: 95vw;
	max-height: 95vh;
	display: block;
	transform: translate(-50%, -50%);
}

.popup .popup-close {
	z-index: 2;
	position: absolute;
	top: 0;
	right: 0;
	background-color: rgb(0 0 0 / 20%);
	cursor: pointer;
}

.popup .popup-close:before {
	filter: invert(1);
}

.popup .popup-prev,
.popup .popup-next {
	z-index: 2;
	position: absolute;
	top: calc(50% - 22px);
	background-color: rgb(0 0 0 / 20%);
	cursor: pointer;
}

.popup .popup-prev {
	left: 0;
}

.popup .popup-next {
	right: 0;
}

.popup .popup-prev:before,
.popup .popup-next:before {
	filter: invert(1);
}

.popup .popup-loader {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
	border: 2px solid rgb(255 255 255 / 30%);
	border-top: 2px solid #fff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* UP */
.up {
	z-index: 9999;
	position: fixed;
	background-color: var(--transparent-color-5);
	right: 5px;
	bottom: 100px;
	opacity: 0;
	transition: opacity 0.4s;
}

.up.show {
	opacity: 1;
}

.up:hover {
	background-color: var(--transparent-color-10);
}

.up:active {
	-webkit-transform: scale(.85);
	-ms-transform: scale(.85);
	transform: scale(.85);
}

/* ICONS */
.icon.icon-search:before {
	background-position: 0 0;
}

.icon.icon-close:before {
	background-position: -24px 0;
}

.icon.icon-navigation:before {
	background-position: -48px 0;
}

.icon.icon-lightning:before {
	background-position: -72px 0;
}

.icon.icon-notification:before {
	background-position: -96px 0;
}

.icon.icon-notification-off:before {
	background-position: -120px 0;
}

.icon.icon-lock:before {
	background-position: -144px 0;
}

.icon.icon-menu:before {
	background-position: -168px 0;
}

.icon.icon-location-pin:before {
	background-position: -192px 0;
}

.icon.icon-printer:before {
	background-position: -216px 0;
}

.icon.icon-sun:before {
	background-position: 0 -24px;
}

.icon.icon-moon:before {
	background-position: -24px -24px;
}

.icon.icon-like:before {
	background-position: -48px -24px;
}

.icon.icon-dislike:before {
	background-position: -72px -24px;
}

.icon.icon-options:before {
	background-position: -96px -24px;
}

.icon.icon-settings:before {
	background-position: -120px -24px;
}

.icon.icon-location:before {
	background-position: -144px -24px;
}

.icon.icon-send:before {
	background-position: -168px -24px;
}

.icon.icon-star:before {
	background-position: -216px -24px;
}

.icon.icon-apps:before {
	background-position: -24px -48px;
}

.icon.icon-arrow-left:before {
	background-position: -48px -48px;
}

.icon.icon-arrow-up:before {
	background-position: -72px -48px;
}

.icon.icon-arrow-right:before {
	background-position: -96px -48px;
}

.icon.icon-arrow-down:before {
	background-position: -120px -48px;
}

.icon.icon-upload:before {
	background-position: -144px -48px;
}

.icon.icon-restart:before {
	background-position: -168px -48px;
}

.icon.icon-sorting:before {
	background-position: -192px -48px;
}

.icon.icon-share:before {
	background-position: -216px -48px;
}

.icon.icon-unavailable:before {
	background-position: 0 -72px;
}

.icon.icon-attention:before {
	background-position: -24px -72px;
}

.icon.icon-check-circle:before {
	background-position: -48px -72px;
}

.icon.icon-close-circle:before {
	background-position: -72px -72px;
}

.icon.icon-clock:before {
	background-position: -96px -72px;
}

.icon.icon-discover:before {
	background-position: -120px -72px;
}

.icon.icon-comment:before {
	background-position: -144px -72px;
}

.icon.icon-heart:before {
	background-position: -192px -72px;
}

.icon.icon-eye:before {
	background-position: -216px -72px;
}

.icon.icon-calendar:before {
	background-position: 0 -96px;
}

.icon.icon-copy:before {
	background-position: -24px -96px;
}

.icon.icon-funnel:before {
	background-position: -72px -96px;
}

.icon.icon-gift:before {
	background-position: -96px -96px;
}

.icon.icon-home:before {
	background-position: -120px -96px;
}

.icon.icon-news:before {
	background-position: -144px -96px;
}

.icon.icon-check:before {
	background-position: -168px -96px;
}

.icon.icon-down:before {
	background-position: -192px -96px;
}

.icon.icon-up:before {
	background-position: -216px -96px;
}

.icon.icon-play-circle:before {
	background-position: 0 -120px;
}

.icon.icon-player-play:before {
	background-position: -24px -120px;
}

.icon.icon-player-previous:before {
	background-position: -48px -120px;
}

.icon.icon-player-next:before {
	background-position: -72px -120px;
}

.icon.icon-player-pause:before {
	background-position: -96px -120px;
}

.icon.icon-player-unmute:before {
	background-position: -120px -120px;
}

.icon.icon-player-mute:before {
	background-position: -144px -120px;
}

.icon.icon-playlist:before {
	background-position: -168px -120px;
}

.icon.icon-music-album:before {
	background-position: -192px -120px;
}

.icon.icon-music-artist:before {
	background-position: -216px -120px;
}

.icon.icon-synchronize:before {
	background-position: 0 -144px;
}

.icon.icon-compare:before {
	background-position: -24px -144px;
}

.icon.icon-calculator:before {
	background-position: -48px -144px;
}

.icon.icon-plus:before {
	background-position: -72px -144px;
}

.icon.icon-minus:before {
	background-position: -96px -144px;
}

.icon.icon-percent:before {
	background-position: -120px -144px;
}

.icon.icon-trend-down:before {
	background-position: -144px -144px;
}

.icon.icon-trend-up:before {
	background-position: -168px -144px;
}

.icon.icon-mouse:before {
	background-position: -192px -144px;
}

.icon.icon-infinity:before {
	background-position: -216px -144px;
}

.icon.icon-arrow-top-right:before {
	background-position: 0 -168px;
}

/** Категории: общий контейнер, точный подбор и сравнение товаров. */
.catalog-title {
	font-size: calc(var(--font-base) * 2.2);
	line-height: 1.25;
	margin-bottom: 40px;
}

.subcategories {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.subcategories a {
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: #242424;
	font-size: var(--font-small);
	text-decoration: none;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 10px 14px;
}

.subcategories a:hover {
	color: #bd261d;
	border-color: #aaa;
}

.subcategories small {
	color: #666;
	font-size: var(--font-small);
}

.catalog-notice {
	background: #d8f0e2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 24px;
	font-size: var(--font-small);
	line-height: 1.5;
	padding: 8px 20px;
	margin: 0 0 24px;
}

.catalog-notice>span {
	min-width: 0;
	display: flex;
	flex: 1 1 560px;
	align-items: center;
	gap: 12px;
}

.catalog-notice>span::before {
	content: '';
	background-image: url(images/catalog/package.png);
	background-image: image-set(url(images/catalog/package.png) 1x, url(images/catalog/package@2x.png) 2x);
	background-repeat: no-repeat;
	background-size: 24px 24px;
	width: 24px;
	height: 24px;
	flex: none;
}

.catalog-notice a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.catalog-notice a:hover {
	color: #bd261d;
}

.catalog-notice.order-note {
	background: #fff4dc;
	min-height: 60px;
	color: #252525;
}

.catalog-notice.order-note > span {
	align-items: flex-start;
}

.catalog-notice.order-note > span::before {
	background-image: url(images/catalog/info.png);
	background-image: image-set(url(images/catalog/info.png) 1x, url(images/catalog/info@2x.png) 2x);
}

.listing {
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	align-items: start;
	gap: 48px;
	line-height: 1.5;
	scroll-margin-top: 150px;
	margin-bottom: 48px;
}

.listing[aria-busy="true"] .results {
	opacity: .65;
}

.listing button,
.listing select,
.listing input,
.cart-items input {
	font-family: inherit;
}

.listing button,
.listing select {
	background: #fff;
	min-height: 44px;
	cursor: pointer;
	color: #242424;
	font-size: var(--font-small);
	line-height: 1.5;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 8px 12px;
}

.listing button:hover,
.listing select:hover {
	border-color: #888;
}

.listing :focus-visible,
.cart-items :focus-visible {
	outline: 2px solid #bd261d;
	outline-offset: 3px;
}

.filters {
	min-width: 0;
}

.category-nav {
	min-width: 0;
}

.category-nav summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	font-size: var(--font-base);
	font-weight: 600;
	list-style: none;
	padding-bottom: 12px;
	margin-bottom: 8px;
}

.category-nav summary::-webkit-details-marker {
	display: none;
}

.category-nav[open]>summary .symbol {
	transform: rotate(180deg);
}

.category-nav a {
	min-height: 44px;
	display: flex;
	align-items: center;
	color: #333;
	font-size: var(--font-small);
	line-height: 1.5;
	text-decoration: none;
	border-radius: 3px;
	padding: 10px 12px;
	margin-top: 4px;
}

.category-nav a:hover,
.category-nav a[aria-current] {
	background: #f5f5f5;
	color: #bd261d;
}

.filter-heading {
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.filter-heading strong {
	font-size: var(--font-base);
	font-weight: 600;
}

.listing .close-filter,
.listing .filter-toggle {
	display: none;
}

.filters details {
	border-top: 1px solid #e5e5e5;
	padding: 14px 0;
}

.filters summary {
	min-height: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	font-size: var(--font-small);
	font-weight: 600;
	list-style: none;
}

.filters summary::-webkit-details-marker {
	display: none;
}

.filters summary::after {
	content: '+';
	font-weight: 400;
}

.filters details[open]>summary::after {
	content: '−';
}

.choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 14px;
	margin-top: 10px;
}

.choices.wide {
	grid-template-columns: 1fr;
}

.choices label {
	min-height: 36px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	overflow-wrap: anywhere;
	cursor: pointer;
	font-size: var(--font-small);
}

.choices input {
	width: 17px;
	height: 17px;
	flex: none;
	accent-color: #bd261d;
	border: 0;
	padding: 0;
	margin: 3px 0 0;
}

.choices small {
	flex-shrink: 0;
	white-space: nowrap;
	color: #666;
	font-size: inherit;
}

.choices input:disabled~span,
.choices input:disabled~small {
	color: #888;
}

.listing .more-values {
	min-height: 40px;
	color: #666;
	border: 0;
	padding: 8px 0 0;
}

html:not(.no-js) .filters details:not(.expanded) .extra-choice,
.filters .expanded .more-values,
.no-js .more-values {
	display: none;
}

.listing .reset {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: #666;
	font-size: var(--font-small);
	text-decoration: none;
	margin-top: 10px;
}

.filter-apply {
	display: block;
}

html:not(.no-js) .filter-apply,
html:not(.no-js) .tools-apply {
	display: none;
}

.results {
	min-width: 0;
}

.listing-toolbar {
	min-height: 44px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: var(--font-small);
	margin-bottom: 16px;
}

.listing-export {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.listing-export::before {
	content: '';
	background-image: url(images/catalog/excel.png);
	background-image: image-set(url(images/catalog/excel.png) 1x, url(images/catalog/excel@2x.png) 2x);
	background-repeat: no-repeat;
	background-size: 24px 24px;
	width: 24px;
	height: 24px;
	flex: none;
}

.listing[aria-busy="true"] .listing-export {
	pointer-events: none;
	opacity: .5;
}

.sort-label {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #666;
}

.sort-label select {
	max-width: 100%;
}

.selected {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.selected a {
	background: #f5f5f5;
	min-height: 44px;
	display: flex;
	align-items: center;
	color: #555;
	font-size: var(--font-small);
	text-decoration: none;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	padding: 8px 12px;
}

.price-tools {
	min-height: 52px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 8px;
}

.updated {
	color: #666;
	font-size: var(--font-small);
	margin: 0;
}

.price-unit {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	border: 0;
	padding: 0;
	margin: 0 0 0 auto;
}

.price-unit legend {
	float: left;
	color: #666;
	font-size: var(--font-small);
	margin-right: 12px;
}

.price-unit label {
	position: relative;
	display: block;
	cursor: pointer;
	font-size: var(--font-small);
}

.price-unit input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.price-unit span {
	min-width: 70px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 2px solid transparent;
	padding: 8px 10px;
}

.price-unit input:checked+span {
	font-weight: 600;
	border-bottom-color: #242424;
}

.price-unit input:focus-visible+span {
	outline: 2px solid #bd261d;
	outline-offset: 1px;
}

.products {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.products th,
.products td {
	vertical-align: middle;
	text-align: left;
	border: 0;
	padding: 20px 14px;
}

.products th:first-child {
	padding-left: 0;
}

.products td:last-child,
.products th:last-child {
	padding-right: 0;
}

.products thead {
	color: #666;
	font-size: var(--font-small);
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.products thead th {
	font-weight: 400;
	padding-top: 14px;
	padding-bottom: 14px;
}

.products thead th:first-child {
	width: 37%;
}

.products.without-properties thead th:first-child,
.products.property-single thead th:first-child {
	width: auto;
}

.products.property-single .property-heading {
	width: 200px;
}

.products .price-heading {
	width: 160px;
	text-align: right;
}

.products .quantity-heading {
	width: 228px;
	text-align: center;
}

.products .add-heading {
	width: 65px;
}

.products tbody tr {
	border-bottom: 1px solid #e5e5e5;
}

.products tbody tr:hover {
	background: #fcfcfc;
}

.products tbody th {
	font-weight: 400;
}

.product-name {
	display: inline-block;
	overflow-wrap: anywhere;
	color: #242424;
	font-size: var(--font-base);
	text-decoration: none;
}

.product-name strong {
	font-weight: 600;
}

.product-name:visited {
	color: #242424;
}

.product-name:hover {
	color: #bd261d;
}

.product-name.has-image {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
}

.product-thumb {
	background: #fff;
	width: 64px;
	height: 64px;
	display: block;
	object-fit: contain;
}

.standard {
	display: block;
	overflow-wrap: anywhere;
	color: #666;
	font-size: var(--font-small);
	margin-top: 6px;
}

.property {
	overflow-wrap: anywhere;
	font-size: var(--font-small);
}

.property>span {
	display: block;
}

.property-label {
	color: #666;
}

.property-single .property-label {
	display: none;
}

.products .price {
	vertical-align: top;
	font-size: var(--font-base);
	font-variant-numeric: tabular-nums;
	line-height: 44px;
	text-align: right;
}

.price-unit-label {
	display: block;
	color: #666;
	font-size: var(--font-small);
	line-height: 1.5;
}

.products.units-single .price-unit-label {
	display: none;
}

.price small {
	display: block;
	color: #666;
	font-size: var(--font-small);
	line-height: 1.5;
}

.products .quantity-cell,
.products .ask-cell {
	vertical-align: top;
}

.buy-controls {
	display: grid;
	grid-template-columns: minmax(0, 200px) 44px;
	align-items: start;
	justify-content: space-between;
	column-gap: 16px;
}

.buy-controls .amount {
	grid-column: 1;
	grid-row: 1;
}

.buy-controls .quantity-note {
	grid-column: 1 / -1;
	grid-row: 2;
}

.buy-controls .cart-presence {
	grid-column: 1 / -1;
	grid-row: 3;
}

.buy-controls>.add {
	grid-column: 2;
	grid-row: 1;
}

.amount {
	background: #fff;
	width: 200px;
	max-width: 100%;
	min-height: 44px;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	align-items: center;
	font-size: var(--font-small);
	border: 1px solid #ccc;
	border-radius: 3px;
}

.amount:focus-within {
	border-color: #bd261d;
}

.quantity-value {
	min-width: 0;
	display: flex;
	align-items: center;
}

.amount .quantity {
	background: transparent;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	color: #333;
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: center;
	border: 0;
	outline: 0;
	padding: 8px 2px;
}

.amount span {
	flex: none;
	color: #666;
	padding-right: 4px;
}

.amount button {
	background: transparent;
	width: 44px;
	min-height: 44px;
	cursor: pointer;
	color: #555;
	font: inherit;
	font-size: var(--font-base);
	border: 0;
	padding: 0;
}

.amount button:hover {
	background: #f5f5f5;
}

.amount button:disabled {
	cursor: default;
	opacity: .35;
}

.amount.invalid {
	border-color: #bd261d;
}

.quantity-note {
	width: 200px;
	max-width: 100%;
	display: block;
	color: #666;
	font-size: var(--font-small);
	line-height: 1.4;
	text-align: center;
	margin-top: 6px;
}

.quantity-note:empty {
	display: none;
}

.cart-presence {
	display: block;
	color: #36734d;
	font-size: var(--font-small);
	line-height: 1.4;
	margin-top: 6px;
}

.cart-presence:empty {
	display: none;
}

.quantity-note.invalid {
	color: #bd261d;
}

.quantity-apply {
	background: transparent;
	min-height: 44px;
	display: block;
	cursor: pointer;
	color: #bd261d;
	font: inherit;
	text-decoration: underline;
	border: 0;
	padding: 6px 0;
	margin: 6px auto 0;
}

.no-js .amount button {
	visibility: hidden;
}

.listing .add,
.product-order .add {
	background: #f4f4f4;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 3px;
	padding: 0;
	margin-left: auto;
}

.listing .add:hover,
.product-order .add:hover {
	background: #ededed;
	border-color: #bbb;
}

.listing .add[aria-busy="true"],
.product-order .add[aria-busy="true"] {
	opacity: .5;
	cursor: progress;
}

.no-js .listing .add,
.no-js .product-order .add {
	display: none;
}

.add .cart-symbol {
	background-size: 22px 22px;
	width: 22px;
	height: 22px;
	opacity: .8;
}

.add.has-cart-item .cart-symbol {
	background-image: url(images/header/cart-add.png);
	background-image: image-set(url(images/header/cart-add.png) 1x, url(images/header/cart-add@2x.png) 2x);
}

.ask-unit,
.ask-unit:visited {
	color: #333;
	font-size: var(--font-small);
}

.ask-unit:hover {
	color: #bd261d;
}

.products .ask-cell {
	text-align: center;
}

.price-note,
.conversion-note {
	color: #666;
	font-size: var(--font-small);
	margin: 18px 0 0;
}

.conversion-note {
	margin-top: 6px;
}

.results>.conversion-note {
	margin-bottom: 18px;
}

/** Карточка товара: компактное фото, параметры и расчёт. */
.product-card {
	--primary-color-accent: #bd261d;
}

.product-top {
	--product-side: 360px;
	display: grid;
	grid-template-columns: var(--product-side) minmax(0, 1fr) var(--product-side);
	grid-template-rows: min-content 1fr;
	align-items: start;
	gap: 48px;
	margin-top: 36px;
}

.product-photo {
	min-width: 0;
	margin: 0;
}

.product-photo img {
	width: 100%;
	height: var(--product-side);
	display: block;
	object-fit: contain;
}

.product-specs {
	min-width: 0;
	grid-column: 2;
	grid-row: 1;
}

.product-specs h2 {
	font-size: var(--font-large);
	margin: 0 0 22px;
}

.product-parameter {
	margin-bottom: 24px;
}

.product-parameter>p {
	font-size: var(--font-small);
	font-weight: 600;
	margin: 0 0 10px;
}

.parameter-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.parameter-links>a,
.parameter-links>span {
	background: var(--white-color);
	min-width: 64px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-color);
	font-size: var(--font-small);
	text-decoration: none;
	border: 1px solid var(--gray-color-50);
	padding: 7px 13px;
}

.parameter-links>a:hover {
	border-color: var(--text-color);
}

.parameter-links>[aria-current] {
	font-weight: 600;
	border: 2px solid var(--primary-color-accent);
	padding: 6px 12px;
}

.parameter-more {
	margin-top: 10px;
}

.parameter-more summary {
	cursor: pointer;
	color: var(--gray-color-95);
	font-size: var(--font-small);
}

.parameter-more .parameter-links {
	margin-top: 12px;
}

.product-properties {
	margin: 0;
}

.product-properties>div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(100px, .8fr);
	gap: 16px;
	border-bottom: 1px solid var(--gray-color-50);
	padding: 11px 0;
}

.product-properties dt {
	color: var(--gray-color-95);
}

.product-properties dd {
	overflow-wrap: anywhere;
	margin: 0;
}

.product-category-link {
	display: inline-block;
	color: var(--text-color);
	font-size: var(--font-small);
	margin-top: 20px;
}

.product-purchase {
	min-width: 0;
	grid-column: 3;
	grid-row: 1 / span 2;
}

.product-order,
.product-conditions {
	background: var(--gray-color-30);
	min-width: 0;
	border-radius: var(--radius);
	padding: 24px;
}

.product-order p {
	margin: 0;
}

.product-order .price-unit {
	justify-content: flex-end;
	margin: 0 0 20px;
}

.product-order .price-unit legend {
	margin-right: auto;
}

.product-price {
	font-size: var(--font-large);
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
}

.product-price>span {
	font-size: var(--font-small);
}

.product-order .product-price-note {
	color: var(--gray-color-95);
	font-size: var(--font-small);
	line-height: 1.5;
	margin-top: 8px;
}

.quantity-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	font-size: var(--font-small);
	margin: 24px 0 8px;
}

.quantity-heading>span {
	color: var(--gray-color-95);
}

.product-order .amount,
.product-order .quantity-note {
	width: 100%;
}

.product-total {
	display: grid;
	gap: 8px;
	border-top: 1px solid var(--gray-color-50);
	padding-top: 18px;
	margin-top: 22px;
}

.product-total>span {
	color: var(--gray-color-95);
	font-size: var(--font-small);
}

.product-estimate {
	overflow-wrap: anywhere;
	font-size: var(--font-large);
	font-variant-numeric: tabular-nums;
}

.product-summary {
	color: var(--gray-color-95);
	font-size: var(--font-small);
	line-height: 1.5;
}

.product-summary:empty {
	display: none;
}

.product-order .product-supply {
	color: var(--gray-color-95);
	font-size: var(--font-small);
	line-height: 1.5;
	margin-top: 12px;
}

.product-order .add {
	background: var(--primary-color-accent);
	width: 100%;
	height: auto;
	min-height: 50px;
	gap: 12px;
	color: var(--white-color);
	font: inherit;
	font-weight: 600;
	border-radius: var(--radius);
	padding: 12px 18px;
	margin-top: 20px;
}

.product-order .add:hover {
	background: var(--primary-color-accent);
	border-color: var(--primary-color-accent);
}

.product-order .add:disabled {
	opacity: .5;
	cursor: default;
}

.product-order .add .symbol {
	filter: brightness(0) invert(1);
}

.product-conditions {
	font-size: var(--font-small);
	line-height: 1.5;
	margin-top: 24px;
}

.product-conditions p {
	margin: 0;
}

.product-conditions p+p {
	margin-top: 16px;
}

.product-conditions .product-order-note {
	color: var(--gray-color-95);
}

.product-order :focus-visible {
	outline: 2px solid var(--primary-color-accent);
	outline-offset: 3px;
}

.product-tabs {
	min-width: 0;
	grid-column: 1 / span 2;
	grid-row: 2;
}

.product-tabs .tablist {
	position: relative;
}

.catalog-documents {
	scroll-margin-top: calc(var(--header-bottom, 130px) + 24px);
	margin-bottom: 80px;
}

.catalog-documents h2 {
	margin-bottom: 28px;
}

.document-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 480px));
	gap: 20px;
}

.document-card {
	background: #f5f5f5;
	min-width: 0;
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	border-radius: 3px;
	padding: 24px;
}

.document-preview {
	background: #fff;
	width: 100%;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e1e1e1;
	border-radius: 2px;
	padding: 5px;
}

.document-preview img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.document-format {
	color: #626262;
	font-size: var(--font-large);
	font-weight: 500;
}

.document-info {
	min-width: 0;
}

.document-name {
	display: block;
	color: #252525;
	font-size: var(--font-base);
	font-weight: 500;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.document-meta {
	display: block;
	color: #707070;
	font-size: var(--font-small);
	margin-top: 6px;
}

.document-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin-top: 12px;
}

.document-actions a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #454545;
	font-size: var(--font-small);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.document-actions a:hover {
	color: var(--primary-color-accent);
}

.document-card a:focus-visible {
	outline: 2px solid var(--primary-color-accent);
	outline-offset: 4px;
}

.no-js .tabs .tabpanel {
	height: auto;
	overflow: visible;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.listing-pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid #ddd;
	padding-top: 24px;
	margin-top: 24px;
}

.load-more {
	min-width: 200px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #333;
	font-size: var(--font-small);
	text-decoration: none;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 8px 14px;
}

.listing .pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 0;
	margin: 0;
}

.listing .pagination a,
.listing .pagination span {
	min-width: 42px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-small);
	text-decoration: none;
	padding: 8px;
}

.listing .pagination [aria-current] {
	background: #f2f2f2;
	font-weight: 600;
	border-radius: 3px;
}

.listing-empty {
	background: #f6f6f6;
	padding: 28px;
}

.listing-empty p {
	margin: 0 0 16px;
}

.category-description {
	margin-bottom: 48px;
}

/** Страницы по спецификации используют общую сетку статьи и оглавление. */
.supply-lead {
	margin-bottom: 48px;
}

.supply-lead h1 {
	margin-bottom: 20px;
}

.supply-lead p {
	max-width: 850px;
	line-height: 1.6;
	margin: 0;
}

.supply-page :focus-visible {
	outline: 2px solid #bd261d;
	outline-offset: 4px;
}

.supply-types {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: 24px;
}

.supply-types>a {
	background: var(--gray-color-30);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: center;
	column-gap: 24px;
	color: var(--text-color);
	text-decoration: none;
	border-radius: var(--radius);
	padding: 24px;
}

.supply-types>a:hover {
	background: var(--gray-color-40);
	color: var(--text-color);
}

.supply-types img {
	width: 140px;
	height: 140px;
	grid-column: 2;
	grid-row: 1 / 4;
	align-self: center;
	object-fit: contain;
}

.supply-types h3 {
	grid-column: 1;
	font-size: var(--font-large);
	line-height: 1.35;
	margin: 0 0 12px;
}

.supply-types p {
	grid-column: 1;
	color: #555;
	font-size: var(--font-small);
	margin: 0;
}

.supply-types>a>span {
	min-height: 44px;
	display: flex;
	grid-column: 1;
	align-items: center;
	gap: 8px;
	font-size: var(--font-small);
	margin-top: 12px;
}

.supply-range {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 24px;
	margin: 32px 0;
}

.supply-range figure {
	min-width: 0;
	text-align: center;
	margin: 0;
}

.supply-range img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 16px;
}

.supply-range figcaption {
	font-size: var(--font-small);
	line-height: 1.5;
}

.supply-page dl {
	display: grid;
	grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr);
	column-gap: 32px;
	margin: 24px 0;
}

.supply-page dt,
.supply-page dd {
	border-bottom: 1px solid #ddd;
	padding: 16px 0;
}

.supply-page dt {
	font-weight: 500;
}

.supply-page dd {
	margin: 0;
}

.supply-note {
	color: #666;
	font-size: var(--font-small);
}

/** Просторная корзина: состав заказа и отдельный шаг контактных данных. */
.cart-panel {
	position: fixed;
	inset: 0;
	background: #fff;
	width: 100vw;
	max-width: none;
	height: 100%;
	height: 100dvh;
	max-height: none;
	overflow-y: auto;
	color: var(--text-color);
	font-size: var(--font-base);
	line-height: 1.5;
	border: 0;
	border-radius: 0;
	padding: 32px 0 48px;
	margin: 0;
}

#cart-dialog [hidden] {
	display: none;
}

.cart-panel .panel-head {
	align-items: center;
	border: 0;
	padding: 0;
	margin-bottom: 24px;
}

.cart-heading {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.25;
}

.cart-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	color: var(--gray-color-95);
	font-size: var(--font-small);
	border-bottom: 1px solid var(--gray-color-50);
	margin-bottom: 32px;
}

.cart-steps>span {
	border-bottom: 2px solid transparent;
	padding-bottom: 16px;
}

.cart-steps [aria-current] {
	color: var(--text-color);
	border-color: var(--primary-color-accent);
}

.cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: start;
	gap: 40px;
}

.cart-composition,
.cart-form {
	min-width: 0;
}

.cart-list-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 216px 140px 44px;
	gap: 20px;
	color: var(--gray-color-95);
	font-size: var(--font-small);
	border-bottom: 1px solid var(--gray-color-50);
	padding: 0 0 16px;
}

.cart-list-head> :nth-child(3) {
	text-align: right;
}

.cart-items {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cart-items>li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 216px 140px 44px;
	align-items: start;
	gap: 20px;
	border-bottom: 1px solid var(--gray-color-50);
	padding: 24px 0;
	margin: 0;
}

.cart-product {
	min-width: 0;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.cart-product img {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	object-fit: contain;
}

.cart-product a {
	color: var(--text-color);
	font-weight: 600;
	text-decoration: none;
}

.cart-product a:hover {
	text-decoration: underline;
}

.cart-product p {
	overflow-wrap: anywhere;
	color: var(--gray-color-95);
	font-size: var(--font-small);
	margin: 6px 0;
}

.cart-unit-price,
.cart-volume {
	display: block;
	color: var(--gray-color-95);
	font-size: var(--font-small);
}

.cart-volume {
	margin-top: 10px;
}

.cart-quantity .amount {
	width: 216px;
	max-width: 100%;
}

.cart-quantity .quantity-value {
	gap: 2px;
	padding: 0;
}

.cart-quantity .quantity {
	min-width: 0;
}

.cart-quantity .quantity-unit {
	background: transparent;
	width: 46px;
	height: 44px;
	flex: 0 0 46px;
	appearance: auto;
	color: var(--text-color);
	font: inherit;
	font-size: var(--font-small);
	border: 0;
	border-radius: 0;
	padding: 0 2px;
	margin: 0;
}

.cart-quantity .quantity-note {
	width: 216px;
	max-width: 100%;
}

.cart-estimate {
	overflow-wrap: anywhere;
	text-align: right;
	padding-top: 10px;
}

.cart-items .remove-item {
	color: var(--gray-color-95);
}

.cart-minimum {
	color: var(--gray-color-95);
	font-size: var(--font-small);
	margin: 20px 0;
}

.cart-panel .cart-continue,
.cart-back {
	background: transparent;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	color: var(--text-color);
	font-size: var(--font-small);
	border: 0;
	padding: 0;
}

.cart-summary {
	position: sticky;
	top: 24px;
	background: #fff;
	border: 12px solid var(--gray-color-30);
	border-radius: var(--radius);
	padding: 20px;
}

.cart-panel h2 {
	position: static;
	font-size: var(--font-large);
	line-height: 1.4;
	margin: 0 0 12px;
}

.cart-summary h2 {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin-bottom: 20px;
}

.cart-summary-count {
	color: var(--gray-color-95);
	font-size: var(--font-small);
	font-weight: 400;
}

.cart-total {
	border-top: 1px solid var(--gray-color-50);
	padding-top: 16px;
	margin-bottom: 20px;
}

.cart-total>* {
	display: block;
}

.cart-total>span,
.cart-total small {
	color: var(--gray-color-95);
	font-size: var(--font-small);
}

.cart-total strong {
	overflow-wrap: anywhere;
	font-size: 28px;
	line-height: 1.4;
	text-align: right;
	margin: 8px 0 4px;
}

.cart-total small {
	text-align: right;
}

.cart-weight {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	color: var(--gray-color-95);
	font-size: var(--font-small);
	border-top: 1px solid var(--gray-color-50);
	padding-top: 16px;
	margin: 0 0 20px;
}

.cart-weight>span+span {
	color: var(--text-color);
}

.cart-weight small {
	flex-basis: 100%;
	font-size: inherit;
}

.cart-panel .action-button {
	min-height: 48px;
	justify-content: center;
	font-size: var(--font-small);
	font-weight: 600;
}

.cart-next {
	width: 100%;
	display: flex;
	gap: 16px;
}

.cart-panel button:disabled {
	cursor: default;
	opacity: .5;
}

.cart-next:disabled {
	background: var(--gray-color-30);
	color: var(--gray-color-95);
	opacity: 1;
}

.cart-disclaimer {
	color: var(--gray-color-95);
	font-size: var(--font-small);
	margin: 16px 0 0;
}

.cart-blocked {
	color: var(--gray-color-95);
	font-size: var(--font-small);
	margin: 0 0 16px;
}

.cart-form>.muted {
	font-size: var(--font-small);
	margin-bottom: 24px;
}

.cart-back {
	margin: 0 0 20px;
}

.cart-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.cart-fields label {
	min-width: 0;
	display: block;
	font-size: var(--font-small);
}

.cart-fields small {
	color: var(--gray-color-95);
	font-size: inherit;
}

.cart-field-wide {
	grid-column: 1 / -1;
}

.cart-fields input:not([type="file"]),
.cart-fields textarea {
	background: #fff;
	width: 100%;
	min-height: 48px;
	display: block;
	color: var(--text-color);
	font: inherit;
	font-size: var(--font-base);
	border: 1px solid var(--gray-color-50);
	border-radius: var(--radius);
	padding: 12px;
	margin-top: 8px;
}

.cart-fields textarea {
	resize: vertical;
}

.cart-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	font-size: var(--font-small);
}

.cart-fields .cart-attach {
	position: relative;
	background: var(--gray-color-30);
	max-width: 100%;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: var(--text-color);
	border: 1px solid var(--gray-color-50);
	border-radius: var(--radius);
	padding: 10px 14px;
}

.cart-attach:focus-within {
	outline: 2px solid var(--primary-color-accent);
	outline-offset: 3px;
}

.cart-file input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.cart-file-selection {
	min-width: 0;
	display: flex;
	flex-basis: 100%;
	align-items: center;
	gap: 12px;
}

.cart-file-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.cart-remove-file {
	background: transparent;
	min-height: 44px;
	flex-shrink: 0;
	color: var(--text-color);
	font-size: inherit;
	text-decoration: underline;
	border: 0;
	padding: 8px 0;
}

.cart-fields .cart-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cart-legal {
	color: var(--gray-color-95);
	font-size: var(--font-small);
	margin: 24px 0;
}

.cart-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

.cart-consent input {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	appearance: auto;
	accent-color: var(--primary-color-accent);
	margin-top: 2px;
}

.cart-consent a {
	color: inherit;
	text-decoration: underline;
}

.cart-privacy {
	display: inline-block;
	color: inherit;
	text-decoration: underline;
	margin: 6px 0 0 32px;
}

.cart-form-error,
.cart-message {
	color: var(--primary-color-accent);
	font-size: var(--font-small);
	margin: 0 0 20px;
}

.cart-check {
	background: var(--gray-color-30);
	min-height: 48px;
	color: var(--text-color);
	border: 1px solid var(--gray-color-50);
	border-radius: var(--radius);
	padding: 10px 20px;
	margin-top: 12px;
}

.cart-review {
	border-top: 1px solid var(--gray-color-50);
	padding-top: 16px;
	margin-top: 20px;
}

.cart-review summary {
	cursor: pointer;
	font-size: var(--font-small);
}

.cart-review ul {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
}

.cart-review li {
	font-size: var(--font-small);
	border-top: 1px solid var(--gray-color-50);
	padding: 12px 0;
}

.cart-review li>* {
	display: block;
}

.cart-review li span {
	color: var(--gray-color-95);
	margin-top: 4px;
}

.cart-contact {
	color: var(--gray-color-95);
	font-size: var(--font-small);
	margin: 40px 0 0;
}

.cart-contact a {
	color: inherit;
	white-space: nowrap;
}

.cart-success {
	padding: 24px 0 0;
}

.cart-success-icon {
	background-image: url(images/icons/success.png);
	background-image: image-set(url(images/icons/success.png) 1x, url(images/icons/success@2x.png) 2x);
	background-repeat: no-repeat;
	background-size: 64px 64px;
	width: 64px;
	height: 64px;
	display: block;
	margin-bottom: 24px;
}

.cart-success p {
	margin: 0;
}

.cart-success .cart-number {
	color: var(--gray-color-95);
	font-size: var(--font-small);
	margin-bottom: 8px;
}

.cart-success .action-button {
	margin-top: 24px;
}

/* Немодальное окно связи: личный контакт, каналы и рабочие часы. */
.contact-widget {
	z-index: 9998;
	position: fixed;
	right: 24px;
	bottom: max(24px, env(safe-area-inset-bottom));
	width: min(392px, calc(100% - 32px));
	color: var(--text-color);
	line-height: 1.5;
}

.contact-widget[hidden],
body.panel-open .contact-widget,
body.contact-open .up {
	display: none;
}

.contact-widget details {
	display: flex;
	justify-content: flex-end;
}

.contact-launcher {
	background: #fff;
	width: fit-content;
	max-width: 100%;
	min-height: 66px;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	list-style: none;
	border: 1px solid #e2e2df;
	border-radius: 4px;
	box-shadow: 0 3px 15px rgb(28 28 25 / 6%);
	padding: 10px 14px 10px 10px;
	margin-left: auto;
}

.contact-launcher::-webkit-details-marker {
	display: none;
}

.contact-launcher strong {
	display: block;
	font-size: var(--font-small);
	font-weight: 600;
}

.contact-launcher span span {
	display: block;
	color: #757575;
	font-size: 14px;
}

.contact-launcher:hover {
	border-color: #b9b9b5;
}

.contact-avatar {
	width: 84px;
	height: 92px;
	display: block;
	flex-shrink: 0;
	object-fit: cover;
	object-position: 50% 32%;
	border-radius: 10px;
}

.contact-launcher .contact-avatar {
	width: 44px;
	height: 44px;
	border-radius: 4px;
}

.contact-card {
	--contact-space: 26px;
	position: absolute;
	right: 0;
	bottom: calc(100% + 12px);
	background: #fff;
	width: 100%;
	max-height: calc(100vh - 130px);
	max-height: calc(100dvh - 130px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid #e2e2df;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgb(28 28 25 / 7%), 0 2px 6px rgb(28 28 25 / 3%);
	padding-top: 30px;
}

.contact-close {
	position: absolute;
	top: 5px;
	right: 5px;
	border-radius: 8px;
}

.contact-close .symbol {
	width: 24px;
	height: 24px;
	opacity: .65;
}

.contact-person {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 var(--contact-space);
}

.contact-person>div {
	min-width: 0;
}

.contact-name {
	max-width: 12ch;
	font-size: var(--font-large);
	font-weight: 600;
	line-height: 1.27;
	letter-spacing: -.4px;
	overflow-wrap: anywhere;
	margin: 0;
}

.contact-role {
	color: #707070;
	font-size: var(--font-small);
	overflow-wrap: anywhere;
	margin: 7px 0 0;
}

.contact-request {
	color: #555;
	font-size: var(--font-small);
	line-height: 1.6;
	margin: 24px var(--contact-space);
}

.contact-channels {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-style: normal;
	margin: 0 var(--contact-space) 20px;
}

.contact-channels .contact-email {
	background: #bd261d;
	width: 100%;
	min-height: 72px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 3px;
	color: #fff;
	font-size: var(--font-small);
	line-height: 1.5;
	text-decoration: none;
	border: 1px solid #bd261d;
	border-radius: 8px;
	padding: 12px 16px;
}

.contact-channels .contact-email strong {
	font-weight: 600;
}

.contact-channels .contact-email span {
	color: rgb(255 255 255 / 82%);
	font-size: 14px;
	font-weight: 400;
}

.contact-channels .contact-email:hover {
	background: #a32018;
	color: #fff;
	border-color: #a32018;
}

.contact-channels .messenger {
	background: #fff;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 48px;
	flex: 1 1 110px;
	gap: 9px;
	color: var(--text-color);
	font-size: var(--font-small);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid #e2e2df;
	border-radius: 8px;
	padding: 10px 5px;
}

.contact-channels .messenger:before {
	flex-shrink: 0;
}

.contact-channels .messenger:hover {
	background: #f4f4f2;
	border-color: #b9b9b5;
}

.contact-channels .contact-call {
	width: 100%;
	min-height: 48px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 10px;
	color: var(--text-color);
	font-size: var(--font-base);
	font-weight: 600;
	text-decoration: none;
	margin-top: 4px;
}

.contact-call span {
	color: #777;
	font-size: var(--font-small);
	font-weight: 400;
}

.contact-channels .contact-call:hover,
.contact-channels .contact-call:hover span {
	color: #bd261d;
}

.contact-schedule {
	background: #f8f8f6;
	color: #6b6b67;
	font-size: var(--font-small);
	border-top: 1px solid #ededea;
	padding: 16px var(--contact-space) 18px;
}

.contact-widget .contact-hours {
	color: #41413e;
	font-size: var(--font-small);
	margin: 0;
}

.contact-status {
	font-size: var(--font-small);
	margin: 2px 0 0;
}

.contact-status.working {
	color: #326147;
}

.contact-widget a:focus-visible,
.contact-widget button:focus-visible,
.contact-launcher:focus-visible {
	outline: 2px solid #bd261d;
	outline-offset: 3px;
}

.no-js .contact-close {
	display: none;
}

/* MEDIA */
@media screen and (min-width: 980px) {
	:root {
		--font-base: 18px;
	}

	body {
		font-size: var(--font-base);
		line-height: 1.75;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1.5;
	}

	h1 {
		left: -3px;
		font-size: 50px;
	}

	h2 {
		left: -2px;
		font-size: 38px;
	}

	h3 {
		left: -1px;
		font-size: 26px;
	}

	.container {
		position: relative;
		width: 100%;
		max-width: 1322px;
		min-width: 0;
		padding-right: 20px;
		padding-left: 20px;
		margin-right: auto;
		margin-left: auto;
	}

	.main {
		margin-top: 40px;
	}

	.home-hero h1 {
		font-size: clamp(40px, 3.125vw, 60px);
	}

	.cart-button {
		background: #f3f3f3;
		min-height: 48px;
		padding: 10px 20px;
	}

	.cart-button:hover {
		background: #e9e9e9;
	}

	.cart-count {
		top: -5px;
		left: auto;
		right: -5px;
	}

	.header {
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.logo {
		margin-right: 100px;
	}

	.nav li {
		display: inline-block;
		font-size: 14px;
	}

	.contacts {
		column-gap: 50px;
	}

	.address {
		max-width: 145px;
	}

	.nav .dropdown>a:after {
		content: "";
		background-image: var(--icon);
		background-repeat: no-repeat;
		background-size: 240px;
		background-position: -120px -48px;
		width: 24px;
		height: 24px;
		display: block;
		flex-shrink: 0;
		margin-right: -8px;
	}

	.nav .dropdown:hover {
		z-index: 10002;
	}

	.nav .dropdown .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		background-color: var(--white-color);
		max-width: 300px;
		min-width: 240px;
		max-height: 70vh;
		display: none;
		overflow: scroll;
		overflow-x: hidden;
		overflow-y: auto;
		border-radius: var(--radius);
		border: 1px solid var(--gray-color-40);
		padding: 5px;
	}

	.nav .dropdown .sub-menu::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	.no-js .nav .dropdown:hover .sub-menu,
	.nav .dropdown .sub-menu.show {
		display: block;
	}

	.nav .dropdown .sub-menu li {
		display: block;
	}

	.articles {
		margin-left: -20px;
		margin-right: -20px;
	}

	.articles .card {
		width: calc(33.3333% - 40px);
		display: inline-block;
		vertical-align: top;
		margin-left: 20px;
		margin-right: 20px;
	}

	.articles .card .thumbnail {
		max-width: 393px;
	}

	.articles .card .name {
		font-size: 18px;
	}

	.article .layout {
		position: relative;
		padding-right: 200px;
	}

	.article .introduction {
		font-size: 127%;
	}

	.contact-grid {
		grid-template-columns: minmax(290px, .9fr) minmax(0, 1.6fr);
	}

	.toc {
		z-index: 1001;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 174px;
	}

	.toc .toc-title {
		opacity: .3;
		margin-bottom: 28px;
	}

	.toc .toc-list {
		position: -webkit-sticky;
		position: sticky;
		top: calc(var(--header-bottom, 130px) + 15px);
		width: 174px;
		max-height: calc(100dvh - var(--header-bottom, 130px) - 30px);
		overflow: scroll;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.toc .toc-list li a {
		font-size: 16px;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.sitemap .item {
		padding: 28px 36px;
	}

	.positive-text,
	.negative-text,
	.warning-text,
	.info-text {
		border-radius: var(--radius);
		padding: 36px 48px;
	}

	.text table th,
	.text table td {
		padding: 15px 20px;
	}

	.article-image .image-wrapper img {
		border-radius: var(--radius);
	}

	.related-article {
		flex-direction: row;
	}

	.related-article .related-article-image {
		flex-basis: 44.587%;
	}

	.related-article .related-article-content {
		padding: 36px 48px;
	}

	.related-article .related-article-content .headline {
		font-size: 32px;
	}

	.tabs.article-tabs .tablist {
		margin-left: -48px;
		margin-right: -48px;
		padding-left: 48px;
		padding-right: 48px;
	}

	.tabs.article-tabs .tablist:after {
		left: 48px;
		right: 48px;
	}

	.tabs .tablist .tablist-inner .tab {
		font-size: 18px;
		margin-right: 26px;
	}

	.modal .modal-close {
		top: 15px;
		right: 35px;
	}

	.modal .side {
		width: 600px;
		padding-left: 70px;
		padding-right: 70px;
	}

	.notice-container {
		max-width: 320px;
	}

	.product-purchase.is-sticky {
		position: sticky;
		top: var(--product-sticky-top);
	}

	.contact-widget {
		width: min(360px, calc(100% - 32px));
	}

	.contact-card {
		--contact-space: 20px;
		padding-top: 20px;
	}

	.contact-person {
		gap: 12px;
		margin-right: 56px;
	}

	.contact-person .contact-avatar {
		width: 56px;
		height: 64px;
	}

	.contact-name {
		max-width: none;
		font-size: var(--font-base);
		letter-spacing: normal;
	}

	.contact-role {
		margin-top: 4px;
	}

	.contact-request {
		margin: 16px var(--contact-space);
	}

	.contact-channels {
		gap: 8px;
		margin-bottom: 12px;
	}

	.contact-channels .contact-email {
		min-height: 64px;
		gap: 2px;
		line-height: 1.4;
		padding: 8px 12px;
	}

	.contact-channels .messenger {
		min-height: 44px;
		padding: 8px 5px;
	}

	.contact-channels .contact-call {
		min-height: 44px;
		margin-top: 0;
	}

	.contact-schedule {
		padding: 12px var(--contact-space);
	}
}

@media screen and (min-width: 1360px) {
	h1 {
		left: -4px;
		font-size: 60px;
	}

	.container {
		padding-right: 20px;
		padding-left: 20px;
	}

	.nav li {
		font-size: 16px;
		margin-right: 4px;
	}

	.address {
		max-width: 190px;
		font-size: 14px;
	}

	.articles {
		margin-left: -25px;
		margin-right: -25px;
	}

	.articles .card {
		width: calc(33.3333% - 50px);
		margin-left: 25px;
		margin-right: 25px;
	}

	.article .layout {
		padding-right: 340px;
	}

	.toc,
	.toc .toc-list {
		width: 260px;
	}

	.toc .toc-list li a {
		font-size: 17px;
	}
}

@media screen and (min-width: 1440px) {
	body {
		font-size: var(--font-base);
	}

	.container {
		max-width: 1600px;
	}

	.articles .card .thumbnail {
		max-width: 486px;
	}

	.related-article .related-article-image {
		flex-basis: 38.607%;
	}
}

@media screen and (max-width: 1359px) {
	.home-catalog .catalog-groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.home-category {
		grid-column: auto;
		padding: 20px 20px 208px;
	}

	.home-category.wide {
		grid-column: span 2;
	}

	.quote-layout {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		gap: 32px;
		padding: 32px;
	}

	.quote-send {
		grid-template-columns: minmax(0, 1fr);
	}

	.delivery-answer {
		gap: 40px;
		padding-right: 0;
	}

	.logo {
		margin-right: 40px;
	}

	.listing {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 28px;
	}

	.products th,
	.products td {
		padding-right: 8px;
		padding-left: 8px;
	}

	.products thead th:first-child {
		width: 32%;
	}

	.products.property-single .property-heading {
		width: 160px;
	}

	.products .price-heading {
		width: 118px;
	}

	.products .quantity-heading {
		width: 216px;
	}

	.products .add-heading {
		width: 52px;
	}

	.products,
	.products thead,
	.products tbody {
		display: block;
	}

	.products thead tr,
	.products tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 118px 216px 52px;
	}

	.products thead th:first-child {
		width: auto;
	}

	.products .property-heading {
		display: none;
	}

	.products tbody .property {
		grid-column: 1 / -1;
		grid-row: 2;
		padding-top: 0;
	}

	.products .price {
		grid-column: 2;
		grid-row: 1;
	}

	.products .quantity-cell,
	.products .ask-cell {
		grid-column: 3 / -1;
		grid-row: 1;
	}

	.supply-range {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.product-top {
		--product-side: 320px;
		gap: 24px;
	}

	.product-order,
	.product-conditions {
		padding: 22px;
	}

	.cart-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 24px;
	}

	.cart-list-head {
		display: none;
	}

	.cart-items>li {
		grid-template-columns: minmax(0, 1fr) 44px;
		gap: 16px;
	}

	.cart-product {
		grid-column: 1;
	}

	.cart-quantity {
		grid-column: 1;
		grid-row: 2;
	}

	.cart-estimate {
		grid-column: 1;
		grid-row: 3;
		text-align: left;
		padding: 0;
	}

	.cart-items .remove-item {
		grid-column: 2;
		grid-row: 1;
	}
}

@media screen and (max-width: 979px) {
	.home-category h3 a {
		min-height: 44px;
	}

	.home-category li a {
		min-height: 40px;
	}

	.quote-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.quote-copy h2 {
		max-width: 660px;
	}

	.quote-copy>p {
		max-width: 590px;
	}

	.quote-channels {
		margin-top: 20px;
	}

	.quote-send {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.delivery-intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		margin-bottom: 28px;
	}

	.delivery-intro h2 {
		grid-column: auto;
	}

	.delivery-intro>p {
		max-width: 680px;
	}

	.delivery-link {
		justify-self: start;
	}

	.delivery-answer {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.company-photos {
		gap: 10px;
		margin-top: 24px;
	}

	.reviews-intro {
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: 24px;
	}

	.reviews-copy {
		grid-row: auto;
		margin-bottom: 20px;
	}

	.reviews-rating {
		justify-self: start;
	}

	.reviews-all {
		grid-column: auto;
		justify-self: start;
	}

	.review-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.home-hero {
		background-image: url(images/hero/mobile.webp);
		background-image: image-set(
			url(images/hero/mobile.webp) 1x,
			url(images/hero/mobile@2x.webp) 2x
		);
		background-position: center bottom;
	}

	.home-hero>.container {
		min-height: clamp(520px, 160vw, 820px);
		display: block;
		padding: 32px 20px clamp(200px, 55vw, 480px);
	}

	.hero-copy {
		width: 100%;
		max-width: 610px;
	}

	body {
		font-size: var(--font-base);
		line-height: 1.6;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1.45;
	}

	h1 {
		left: -3px;
		font-size: 44px;
	}

	h2 {
		left: -2px;
		font-size: 36px;
	}

	h3 {
		font-size: 28px;
	}

	.container {
		width: 100%;
		max-width: 768px;
		padding-right: 40px;
		padding-left: 40px;
		margin-left: auto;
		margin-right: auto;
	}

	.main {
		margin-top: 30px;
	}

	.main:has(.listing) {
		margin-top: 20px;
	}

	/**
	 * Мобильная шапка и полноэкранные панели.
	 */
	.header-top {
		display: none;
	}

	.header-main {
		min-height: 116px;
		grid-template-columns: 112px minmax(0, 1fr) repeat(3, 44px);
		column-gap: 0;
		row-gap: 12px;
		padding-top: 10px;
		padding-bottom: 12px;
	}

	.header-logo {
		width: 100%;
		max-width: 187px;
		grid-column: 1 / 3;
		grid-row: 1;
		padding-right: 8px;
	}

	.catalog-button {
		min-height: 44px;
		grid-column: 1;
		grid-row: 2;
		gap: 6px;
		font-size: 14px;
		padding: 10px;
		margin-right: 8px;
	}

	.search-form {
		height: 44px;
		grid-column: 2 / 6;
		grid-row: 2;
	}

	.search-form input[type="search"] {
		padding-left: 12px;
	}

	.suggestions {
		position: fixed;
		top: var(--suggest-top);
		left: 12px;
		right: 12px;
	}

	.mobile-call {
		grid-column: 3;
		grid-row: 1;
	}

	.cart-button {
		grid-column: 4;
		grid-row: 1;
	}

	.menu-toggle {
		grid-column: 5;
		grid-row: 1;
	}

	.mobile-call,
	.menu-toggle {
		display: inline-flex;
	}

	.cart-label {
		display: none;
	}

	.panel,
	.contact-panel,
	.drawer {
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		height: 100dvh;
		max-height: none;
		border: 0;
		border-radius: 0;
		padding: 12px 20px 32px;
		margin: 0;
	}

	.panel-head {
		z-index: 1;
		position: sticky;
		top: -12px;
		background: #fff;
		padding-top: 4px;
		padding-bottom: 12px;
		margin-bottom: 20px;
	}

	.panel-title {
		font-size: 20px;
	}

	.catalog-panel > .icon-button {
		z-index: 1;
		position: sticky;
		top: 0;
		right: auto;
		background: #fff;
		display: flex;
		margin-bottom: 8px;
		margin-left: auto;
	}

	.catalog-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 0;
	}

	.catalog-group {
		border-bottom: 1px solid #e8e8e8;
		padding: 8px 0;
	}

	.category-link {
		min-height: 44px;
		display: flex;
		align-items: center;
		font-size: 19px;
		font-weight: 500;
		margin: 0;
	}

	.category-toggle {
		display: inline-flex;
	}

	.catalog-group li+li {
		margin-top: 0;
	}

	.catalog-group li a {
		min-height: 44px;
		display: flex;
		align-items: center;
		font-size: 17px;
		padding: 10px 0;
	}

	.contact-phone {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.header {
		z-index: 10003;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto 44px;
		column-gap: 8px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.logo {
		max-width: 44%;
		grid-column: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 19px;
	}

	.mobile-phone {
		display: block;
		grid-column: 2;
		flex-shrink: 0;
		white-space: nowrap;
		color: var(--text-color);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
	}

	.menu-button {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		grid-column: 3;
		flex-shrink: 0;
	}

	body.menu-open {
		overflow: hidden;
	}

	.menu {
		z-index: 10002;
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--white-color);
		width: 100%;
		height: calc(100vh - 64px);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		visibility: hidden;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-8px);
		transition: opacity .2s, transform .2s, visibility .2s;
		padding: 20px 40px;
	}

	.menu.show {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	.nav {
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.nav::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	.nav>ul {
		display: block;
	}

	.nav li {
		display: block;
		margin-bottom: 4px;
	}

	.nav a {
		min-height: 44px;
		font-size: 19px;
		padding: 9px 0 10px;
	}

	.nav .sub-menu {
		margin-left: 18px;
	}

	.contacts {
		background-color: var(--gray-color-45);
		flex-direction: column;
		align-items: flex-start;
		border-radius: var(--radius);
		padding: 30px 20px 20px;
		margin-top: 40px;
		margin-left: 0;
	}

	.menu>.contacts:first-child {
		margin-top: auto;
	}

	.phone {
		order: 1;
		margin-left: 0;
	}

	.phone a {
		font-size: 20px;
	}

	.hours {
		font-size: 14px;
		margin-top: 5px;
	}

	.address {
		max-width: none;
		order: 2;
		font-size: 14px;
		margin-top: 20px;
	}

	.messengers {
		order: 3;
		margin-top: 18px;
		margin-left: 0;
	}

	.articles {
		margin-left: -20px;
		margin-right: -20px;
	}

	.articles .card {
		width: calc(50% - 40px);
		display: inline-block;
		vertical-align: top;
		margin-left: 20px;
		margin-right: 20px;
	}

	.articles .card .name {
		font-size: 17px;
	}

	.article .introduction {
		font-size: 113%;
	}

	.contact-grid {
		gap: 36px;
	}

	.contact-page .map {
		height: 340px;
	}

	.requisites-group {
		margin-bottom: 40px;
	}

	.requisites-item {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.requisites-value {
		column-gap: 12px;
	}

	.toc {
		z-index: 999;
		position: -webkit-sticky;
		position: sticky;
		top: var(--header-bottom, 123px);
		background-color: var(--white-color);
		padding: 12px 38px;
		margin-left: -40px;
		margin-right: -40px;
		margin-bottom: 35px;
	}

	.toc.show {
		z-index: 10002;
		padding-bottom: 20px;
	}

	.toc .toc-title {
		position: relative;
		width: 100%;
		cursor: pointer;
		padding-right: 34px;
	}

	.toc.fixed,
	.toc.show {
		box-shadow: 0 9px 6px -4px rgb(0 0 0 / 10%);
	}

	.toc .toc-title:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		background-image: var(--icon);
		background-repeat: no-repeat;
		background-size: 240px;
		background-position: -120px -48px;
		width: 24px;
		height: 24px;
		display: block;
		opacity: .8;
	}

	.toc.show .toc-title:after {
		background-position: -72px -48px;
	}

	.toc .toc-list {
		display: none;
	}

	.toc.show .toc-list {
		max-height: calc(100dvh - var(--header-bottom, 123px) - 85px);
		display: block;
		overflow-y: auto;
		margin-top: 30px;
	}

	.toc .toc-list li a {
		font-size: 17px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.sitemap .item {
		padding: 28px 24px 32px;
	}

	.positive-text,
	.negative-text,
	.warning-text,
	.info-text {
		padding: 36px 40px;
		margin-left: -40px;
		margin-right: -40px;
	}

	.text table th,
	.text table td {
		padding: 15px 20px;
	}

	.article-image.full-width .image-wrapper {
		margin-left: -40px;
		margin-right: -40px;
	}

	.related-article {
		flex-direction: row;
	}

	.related-article .related-article-image {
		flex-basis: 50%;
	}

	.related-article .related-article-content {
		padding: 32px 42px;
	}

	.related-article .related-article-content .headline {
		font-size: 24px;
	}

	.tabs.article-tabs .tablist {
		margin-left: -40px;
		margin-right: -40px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.tabs.article-tabs .tablist:after {
		left: 40px;
		right: 40px;
	}

	.tabs .tablist .tablist-inner .tab {
		font-size: 17px;
		margin-right: 22px;
	}

	.modal .modal-close {
		top: 10px;
		right: 5px;
	}

	.modal .side {
		width: 480px;
		padding-left: 35px;
		padding-right: 35px;
	}

	.notice-container {
		max-width: 320px;
	}

	.footer {
		padding-top: 0;
		padding-bottom: 24px;
	}

	.product-top {
		grid-template-columns: minmax(0, 1fr) 280px;
		grid-template-rows: min-content min-content 1fr;
		gap: 20px;
	}

	.product-photo img {
		height: 112px;
	}

	.product-photo {
		width: 112px;
	}

	.product-specs {
		grid-column: 1;
		grid-row: 2;
	}

	.product-properties>div {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.product-purchase {
		grid-column: 2;
		grid-row: 1 / span 3;
	}

	.product-order,
	.product-conditions {
		padding: 18px;
	}

	.product-tabs {
		grid-column: 1;
		grid-row: 3;
	}

	.product-tabs:has(.document-list) {
		grid-column: 1 / -1;
		grid-row: 4;
	}

	.document-card {
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 16px;
		padding: 20px;
	}

	.document-preview {
		height: 108px;
	}

	.footer-main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 28px;
		padding: 28px 0;
	}

	.footer-contact {
		grid-column: 1;
		grid-row: 1;
	}

	.footer-phone {
		min-height: 40px;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.footer-phone.primary {
		padding-top: 0;
		padding-bottom: 0;
	}

	.footer-hours {
		margin-top: 0;
	}

	.footer-catalog {
		grid-column: 1 / -1;
		grid-row: 2;
		border-top: 1px solid #363636;
		padding-top: 8px;
	}

	.footer summary {
		min-height: 48px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		cursor: pointer;
		color: #f2f2f2;
		font-size: inherit;
		margin: 0;
	}

	.footer summary::after {
		content: '+';
		color: #aaa;
		font-size: var(--font-large);
	}

	.footer details[open]>summary::after {
		content: '−';
	}

	.footer-catalog ul {
		column-gap: 24px;
		padding: 8px 0 16px;
	}

	.footer-catalog a,
	.footer-buyers a {
		min-height: 44px;
	}

	.footer-buyers {
		grid-column: 1 / -1;
		grid-row: 3;
		border-top: 1px solid #363636;
		padding-top: 8px;
		margin-top: -28px;
	}

	.footer-buyers ul {
		padding-bottom: 16px;
	}

	.footer-address {
		grid-column: 2;
		grid-row: 1;
	}

	.footer-map-links a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.footer-ending {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		margin-bottom: 24px;
	}

	.footer-note {
		grid-row: 2;
	}

	.footer .developer-credit {
		grid-column: 1;
		justify-self: start;
	}

	.footer-bottom {
		align-items: start;
		flex-direction: column;
		gap: 12px;
		padding-top: 20px;
	}

	.footer-legal a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.main:has(.listing) .breadcrumbs {
		margin-bottom: 12px;
	}

	.catalog-title {
		font-size: calc(var(--font-base) * 1.8);
		margin-bottom: 28px;
	}

	.subcategories {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding-bottom: 8px;
		margin-bottom: 24px;
	}

	.main:has(.listing) .catalog-title {
		margin-bottom: 20px;
	}

	.main:has(.listing) .subcategories {
		gap: 8px;
		padding-bottom: 0;
		margin-bottom: 12px;
	}

	.main:has(.listing) .subcategories:last-of-type {
		margin-bottom: 20px;
	}

	.subcategories a {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.catalog-notice.order-note {
		min-height: 0;
		padding: 12px 16px;
		margin-bottom: 12px;
	}

	.listing {
		display: block;
		scroll-margin-top: 140px;
	}

	.category-nav {
		margin-bottom: 24px;
	}

	body.filter-open {
		overflow: hidden;
	}

	html:not(.no-js) .filters {
		z-index: 10002;
		position: fixed;
		inset: 0;
		background: #fff;
		display: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 18px 24px 92px;
	}

	html:not(.no-js) .filters.open {
		display: block;
	}

	.listing .close-filter {
		display: block;
		font-size: var(--font-large);
		border: 0;
	}

	.filters summary {
		min-height: 40px;
	}

	.choices {
		grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
		gap: 4px 18px;
	}

	.choices.wide {
		grid-template-columns: 1fr;
	}

	.choices label {
		min-height: 44px;
	}

	html:not(.no-js) .filters.open .filter-apply {
		z-index: 10003;
		position: fixed;
		left: 24px;
		right: 24px;
		bottom: 20px;
		background: #bd261d;
		width: calc(100% - 48px);
		min-height: 48px;
		display: block;
		color: #fff;
		border-color: #bd261d;
	}

	html:not(.no-js) .filter-toggle {
		display: block;
	}

	.listing-toolbar {
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 0 12px;
		margin-bottom: 4px;
	}

	.listing .filter-toggle {
		width: 100%;
		min-height: 44px;
		grid-column: 1;
		grid-row: 1;
	}

	.listing-export {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
	}

	.listing-toolbar .result-count {
		grid-column: 1;
		grid-row: 2;
		margin: 0;
	}

	.listing-toolbar:has(.listing-export) .result-count {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.listing-toolbar:not(:has(.listing-export)) .result-count {
		grid-column: 1 / -1;
		padding-top: 8px;
	}

	.sort-label {
		width: 100%;
		min-width: 0;
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}

	.no-js .sort-label,
	.listing-toolbar:not(:has(.filter-toggle)) .sort-label {
		grid-column: 1 / -1;
	}

	.sort-label select {
		width: 100%;
		min-width: 0;
		min-height: 44px;
		font-size: var(--font-small);
	}

	.sort-label > span,
	.listing .price-unit legend {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		padding: 0;
		margin: -1px;
	}

	.price-tools {
		min-height: 44px;
		flex-wrap: nowrap;
		gap: 12px;
		margin-bottom: 12px;
	}

	.updated {
		width: auto;
		min-width: 0;
		flex: 1;
	}

	.listing .price-unit {
		flex: none;
	}

	.products,
	.products tbody {
		display: block;
	}

	.products thead {
		display: none;
	}

	.products tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px 8px;
		padding: 16px 0 20px;
	}

	.products th,
	.products td {
		min-width: 0;
		display: block;
		padding: 0;
	}

	.products tbody th {
		flex: 0 0 100%;
	}

	.product-name {
		font-size: var(--font-large);
	}

	.standard {
		margin-top: 4px;
	}

	.property {
		flex: 0 0 100%;
	}

	.property-single .property-label {
		display: inline;
	}

	.products .price {
		max-width: 100%;
		flex: 0 0 auto;
		align-self: start;
		white-space: nowrap;
		line-height: 44px;
		text-align: left;
		margin-top: 6px;
	}

	.products .price-unit-label,
	.products.units-single .price-unit-label {
		display: inline;
	}

	.products .quantity-cell {
		max-width: 256px;
		flex: 1 1 172px;
		align-self: start;
		margin-top: 6px;
		margin-left: auto;
	}

	.products .ask-cell {
		flex: 1 0 auto;
		text-align: right;
		margin-top: 6px;
	}

	.buy-controls {
		grid-template-columns: minmax(0, 1fr) 44px;
		column-gap: 8px;
	}

	.listing .amount {
		width: 100%;
		grid-template-columns: minmax(30px, 44px) minmax(7ch, 1fr) minmax(30px, 44px);
	}

	.listing .amount button {
		width: 100%;
	}

	.supply-types img {
		width: 120px;
		height: 120px;
	}

	.cart-panel {
		padding: 20px 0 32px;
	}

	.cart-heading {
		font-size: 30px;
	}

	.cart-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.cart-summary {
		position: static;
	}

	.cart-items>li {
		grid-template-columns: minmax(0, 1fr) 216px 44px;
	}

	.cart-quantity {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.cart-estimate {
		grid-column: 1;
		grid-row: 2;
	}

	.cart-items .remove-item {
		grid-column: 3;
	}

	.cart-contact {
		margin-top: 28px;
	}

	.contact-widget {
		right: 16px;
		bottom: max(16px, env(safe-area-inset-bottom));
	}

	.contact-card {
		max-height: calc(100vh - 122px);
		max-height: calc(100dvh - 122px);
	}
}

@media screen and (max-width: 640px) {
	.home-catalog .catalog-intro {
		margin-bottom: 24px;
	}

	.home-catalog .catalog-groups {
		grid-template-columns: 1fr;
	}

	.home-category {
		padding: 22px 20px 208px;
	}

	.home-category.wide {
		grid-column: auto;
	}

	.home-category h3 {
		margin-bottom: 12px;
	}

	.home-category.wide ul {
		grid-template-columns: 1fr;
	}

	.home-category .category-decoration {
		right: -48px;
	}

	.quote-layout {
		gap: 26px;
		padding: 24px;
	}

	.quote-copy h2 {
		margin-bottom: 16px;
	}

	.quote-attach {
		gap: 12px;
		padding: 16px;
	}

	.quote-attach>.icon {
		width: 32px;
		height: 32px;
		flex-basis: 32px;
	}

	.quote-remove {
		margin-left: 60px;
	}

	.quote-send {
		grid-template-columns: minmax(0, 1fr);
	}

	.delivery-terms summary {
		min-height: 96px;
		padding: 22px 0;
	}

	.delivery-heading {
		gap: 16px;
	}

	.delivery-label {
		display: block;
	}

	.delivery-condition {
		display: block;
		margin-top: 5px;
	}

	.delivery-answer {
		padding-bottom: 28px;
	}

	.review {
		gap: 24px;
		padding: 24px;
	}

	.container {
		padding-right: 30px;
		padding-left: 30px;
	}

	.menu {
		padding-right: 30px;
		padding-left: 30px;
	}

	.contact-photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.contact-photos .building {
		grid-column: 1 / -1;
	}

	.contact-photos img {
		height: auto;
		aspect-ratio: 9 / 16;
	}

	.contact-photos .building img {
		aspect-ratio: 16 / 10;
	}

	.articles {
		margin-left: -15px;
		margin-right: -15px;
	}

	.articles .card {
		width: calc(50% - 30px);
		margin-left: 15px;
		margin-right: 15px;
	}

	.toc {
		padding-left: 28px;
		padding-right: 28px;
		margin-left: -30px;
		margin-right: -30px;
	}

	.related-article {
		flex-direction: column;
	}

	.related-article .related-article-image {
		flex-basis: 100%;
	}

	.related-article .related-article-content {
		padding: 30px 30px 34px;
	}

	.positive-text,
	.negative-text,
	.warning-text,
	.info-text {
		padding: 36px 30px;
		margin-left: -30px;
		margin-right: -30px;
	}

	.text table th,
	.text table td {
		padding: 10px;
	}

	.article-image.full-width .image-wrapper,
	.article-image.width-768 .image-wrapper,
	.article-image.width-640 .image-wrapper {
		margin-left: -30px;
		margin-right: -30px;
	}

	.tabs.article-tabs .tablist {
		margin-left: -30px;
		margin-right: -30px;
		padding-left: 30px;
		padding-right: 30px;
	}

	.tabs.article-tabs .tablist:after {
		left: 30px;
		right: 30px;
	}

	.supply-lead {
		margin-bottom: 36px;
	}

	.supply-page .subcategories {
		flex-wrap: wrap;
		overflow: visible;
	}

	.supply-page .subcategories a {
		flex: 0 1 auto;
		white-space: normal;
	}

	.supply-types>a {
		column-gap: 12px;
		padding: 20px 16px;
	}

	.supply-types img {
		width: 88px;
		height: 88px;
		grid-row: 1;
	}

	.supply-types h3 {
		align-self: center;
	}

	.supply-types p {
		grid-column: 1 / -1;
		margin-top: 12px;
	}

	.supply-range {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 16px;
	}

	.supply-page dl {
		grid-template-columns: minmax(0, 1fr);
	}

	.supply-page dt {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.supply-page dd {
		padding-top: 4px;
	}

	.product-card h1 {
		margin-bottom: 12px;
	}

	.product-top {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		gap: 16px;
		margin-top: 12px;
	}

	.product-photo {
		width: 180px;
		margin: 0 auto;
	}

	.product-photo img {
		height: 180px;
	}

	.product-specs {
		grid-column: auto;
		grid-row: 3;
	}

	.product-properties>div {
		grid-template-columns: minmax(0, 1fr) minmax(100px, .8fr);
		gap: 12px;
	}

	.product-purchase {
		grid-column: auto;
		grid-row: 2;
	}

	.product-tabs {
		grid-column: auto;
		grid-row: 4;
		margin-top: 16px;
	}

	.cart-steps {
		gap: 8px 20px;
		margin-bottom: 16px;
	}

	.cart-items>li {
		grid-template-columns: minmax(0, 1fr) 44px;
	}

	.cart-product {
		gap: 12px;
	}

	.cart-product img {
		width: 44px;
		height: 44px;
		flex-basis: 44px;
	}

	.cart-quantity {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.cart-quantity .amount,
	.cart-quantity .quantity-note {
		width: 240px;
	}

	.cart-estimate {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.cart-items .remove-item {
		grid-column: 2;
	}

	.cart-fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.cart-submit,
	.cart-check {
		width: 100%;
	}

	.cart-summary {
		border-width: 8px;
		padding: 20px;
	}

	.contact-card {
		--contact-space: 22px;
		padding-top: 28px;
	}

	.contact-person {
		gap: 16px;
	}

	.contact-person .contact-avatar {
		width: 76px;
		height: 86px;
	}
}

@media screen and (max-width: 540px) {
	h1 {
		font-size: 38px;
	}

	h2 {
		font-size: 32px;
	}

	h3 {
		font-size: 26px;
	}

	.company-photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		aspect-ratio: auto;
		gap: 8px;
	}

	.company-photos:not(.incomplete) .yard {
		grid-column: 1 / -1;
		grid-row: 1;
		aspect-ratio: 16 / 9;
	}

	.company-photos .stock,
	.company-photos .loading,
	.company-photos .pipes,
	.company-photos .sheets {
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}

	.company-photos.incomplete {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.company-photos.incomplete a:only-child {
		grid-column: 1 / -1;
	}

	.article-image.width-585 .image-wrapper,
	.article-image.width-540 .image-wrapper {
		margin-left: -30px;
		margin-right: -30px;
	}

	.footer-main {
		grid-template-columns: minmax(0, 1fr);
	}

	.footer-catalog {
		grid-row: 3;
	}

	.footer-catalog ul {
		columns: 1;
	}

	.footer-buyers {
		grid-row: 4;
	}

	.footer-address {
		grid-column: 1;
		grid-row: 2;
	}

	.catalog-title {
		font-size: calc(var(--font-base) * 1.5);
	}

	.listing-pages {
		justify-content: center;
	}

	.load-more {
		width: 100%;
	}
}

@media screen and (max-width: 480px) {
	.article-image.width-480 .image-wrapper {
		margin-left: -30px;
		margin-right: -30px;
	}

	.modal .side {
		width: 100%;
	}
}

@media screen and (max-width: 420px) {
	h2 {
		font-size: 28px;
	}

	h3 {
		font-size: 24px;
	}

	.container {
		padding-right: 20px;
		padding-left: 20px;
	}

	.menu {
		padding-right: 20px;
		padding-left: 20px;
	}

	.articles {
		margin-left: 0;
		margin-right: 0;
	}

	.articles .card {
		width: 100%;
		display: block;
		margin-left: 0;
		margin-right: 0;
	}

	.toc {
		padding-left: 18px;
		padding-right: 18px;
		margin-left: -20px;
		margin-right: -20px;
	}

	.positive-text,
	.negative-text,
	.warning-text,
	.info-text {
		padding: 36px 20px;
		margin-left: -20px;
		margin-right: -20px;
	}

	.article-image.full-width .image-wrapper,
	.article-image.width-768 .image-wrapper,
	.article-image.width-640 .image-wrapper,
	.article-image.width-585 .image-wrapper,
	.article-image.width-540 .image-wrapper,
	.article-image.width-480 .image-wrapper {
		margin-left: -20px;
		margin-right: -20px;
	}

	.tabs.article-tabs .tablist {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.tabs.article-tabs .tablist:after {
		left: 20px;
		right: 20px;
	}
}

@media screen and (max-width: 360px) {
	.price-tools {
		flex-wrap: wrap;
		gap: 4px;
	}

	.updated {
		width: 100%;
		flex: none;
	}

	.article-image.width-480 .image-wrapper,
	.article-image.width-375 .image-wrapper {
		margin-left: -20px;
		margin-right: -20px;
	}

	.contact-card {
		--contact-space: 18px;
	}

	.contact-person {
		gap: 12px;
	}

	.contact-person .contact-avatar {
		width: 60px;
		height: 76px;
	}

	.contact-name {
		font-size: var(--font-base);
	}

	.contact-channels .messenger {
		flex-basis: 0;
		gap: 6px;
	}

	.contact-channels .messenger:before {
		display: none;
	}

	.contact-channels .contact-call {
		padding: 6px 0;
	}

	.contact-call span {
		width: 100%;
	}
}

@media screen and (max-width: 320px) {
	.container {
		padding-right: 15px;
		padding-left: 15px;
	}

	.menu {
		padding-right: 15px;
		padding-left: 15px;
	}

	.toc {
		padding-left: 13px;
		padding-right: 13px;
		margin-left: -15px;
		margin-right: -15px;
	}

	.positive-text,
	.negative-text,
	.warning-text,
	.info-text {
		padding: 36px 15px;
		margin-left: -15px;
		margin-right: -15px;
	}

	.article-image.full-width .image-wrapper,
	.article-image.width-768 .image-wrapper,
	.article-image.width-640 .image-wrapper,
	.article-image.width-585 .image-wrapper,
	.article-image.width-540 .image-wrapper,
	.article-image.width-480 .image-wrapper,
	.article-image.width-414 .image-wrapper,
	.article-image.width-375 .image-wrapper {
		margin-left: -15px;
		margin-right: -15px;
	}

	.article-image.full-width .image-wrapper {
		margin-left: -15px;
		margin-right: -15px;
	}

	.tabs.article-tabs .tablist {
		margin-left: -15px;
		margin-right: -15px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.tabs.article-tabs .tablist:after {
		left: 15px;
		right: 15px;
	}

	.notice-container {
		max-width: 290px;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-resolution: 1.5dppx),
only screen and (min-resolution: 144dpi) {
	.icon:before {
		background-image: var(--icon2x);
	}

	.learn-more:after {
		background-image: var(--icon2x);
	}

	.toc .toc-title:after {
		background-image: var(--icon2x);
	}

	.thumbnail.no:after {
		background-image: var(--icon2x);
	}

	.qa summary:after {
		background-image: var(--icon2x);
	}
}