/* Start:/local/templates/.default/css/m367_commerce_ui.css?179040334220111*/
/* MITINO367 commerce UI v3: split-flow cart, independent request and orderable-only checkout. */

.m367-commerce-route .m367-section-head__crumbs-row {
	margin-bottom: 12px;
}

.m367-commerce-route .bx-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
}

.m367-commerce-route .bx-breadcrumb-item {
	display: inline-flex;
	min-height: 32px;
	align-items: center;
	padding: 5px 12px;
	background: var(--m367-foundation-surface-raised, #151619);
	border: 1px solid var(--m367-card-border, rgba(255, 255, 255, .12));
	border-radius: 999px;
}

.m367-commerce-route .bx-breadcrumb-item-link,
.m367-commerce-route .bx-breadcrumb-item-text,
.m367-commerce-route .bx-breadcrumb-item-text span {
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	font-size: 13px;
	font-weight: var(--m367-font-weight-strong);
	line-height: 1.2;
	text-decoration: none;
}

.m367-commerce-route .bx-breadcrumb-item-link:hover .bx-breadcrumb-item-text,
.m367-commerce-route .bx-breadcrumb-item-link:focus-visible .bx-breadcrumb-item-text {
	color: var(--m367-accent-muted-hover, #ff7a33);
}

.m367-commerce-route .bx-breadcrumb-item-angle {
	margin: 0;
	color: var(--m367-text-tertiary, rgba(255, 255, 255, .62));
	font-size: 12px;
}

/* Bitrix catalog success/error popup: keep runtime hooks, replace only presentation. */
.popup-window[id^="CatalogElementBasket_"],
.popup-window[id^="CatalogSectionBasket_"] {
	width: min(440px, calc(100vw - 28px));
	padding: 0;
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	background: var(--m367-foundation-surface-raised, #151619) !important;
	border: 1px solid var(--m367-card-border, rgba(255, 255, 255, .14));
	border-radius: var(--m367-card-radius, 18px);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .48);
	overflow: hidden;
}

.popup-window[id^="CatalogElementBasket_"] .popup-window-titlebar,
.popup-window[id^="CatalogSectionBasket_"] .popup-window-titlebar {
	min-height: 58px;
	padding: 18px 56px 12px 22px;
	background: transparent;
}

.popup-window[id^="CatalogElementBasket_"] .popup-window-titlebar-text,
.popup-window[id^="CatalogSectionBasket_"] .popup-window-titlebar-text {
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	font-size: 20px;
	font-weight: var(--m367-font-weight-strong);
}

.popup-window[id^="CatalogElementBasket_"] .popup-window-content,
.popup-window[id^="CatalogSectionBasket_"] .popup-window-content {
	padding: 8px 22px 20px;
	color: var(--m367-foundation-muted, rgba(255, 255, 255, .68));
	background: transparent !important;
	font-size: 15px;
	line-height: 1.5;
}

.popup-window[id^="CatalogElementBasket_"] .popup-window-buttons,
.popup-window[id^="CatalogSectionBasket_"] .popup-window-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 0 22px 22px;
}

.popup-window[id^="CatalogElementBasket_"] .popup-window-button,
.popup-window[id^="CatalogSectionBasket_"] .popup-window-button {
	display: inline-flex;
	min-height: var(--m367-button-height, 46px);
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 var(--m367-button-pad-inline, 20px);
	color: var(--m367-button-primary-text, #fff);
	background: var(--m367-button-primary-bg, #ff5a00);
	border: 1px solid var(--m367-button-primary-border, #ff5a00);
	border-radius: var(--m367-button-radius, 12px);
	box-shadow: none;
	font-size: var(--m367-button-font-size, 15px);
	font-weight: var(--m367-font-weight-strong);
	text-transform: none;
}

.popup-window[id^="CatalogElementBasket_"] .popup-window-button:hover,
.popup-window[id^="CatalogSectionBasket_"] .popup-window-button:hover {
	color: var(--m367-button-primary-text, #fff);
	background: var(--m367-button-primary-bg-hover, #e95100);
	border-color: var(--m367-button-primary-border-hover, #e95100);
}

.popup-window[id^="CatalogElementBasket_"] .popup-window-close-icon,
.popup-window[id^="CatalogSectionBasket_"] .popup-window-close-icon {
	top: 16px;
	right: 16px;
	opacity: .78;
	filter: invert(1);
}

/* Checkout page: consume the shared shell and tokens without editing Bitrix core. */
.m367-order-page {
	width: 100%;
	margin: 0 0 76px;
	color: var(--m367-foundation-text, rgba(255, 255, 255, .92));
	background: transparent;
}

.m367-order-page > .m367-shell-frame,
.m367-order-page .bx-soa-wrapper {
	width: var(--m367-shell-width);
	max-width: 100%;
}

.m367-order-flow-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 var(--m367-grid-gap, 20px);
	padding: 16px 18px;
	color: var(--m367-foundation-muted, rgba(255, 255, 255, .7));
	background: var(--m367-action-bg-tonal, rgba(255, 90, 0, .12));
	border: 1px solid var(--m367-action-border-tonal, rgba(255, 90, 0, .34));
	border-radius: var(--m367-foundation-radius, 14px);
	font-size: 14px;
	line-height: 1.5;
}

.m367-order-flow-notice strong {
	flex: 0 0 auto;
	color: var(--m367-accent-muted-hover, #ff7a33);
	font-weight: var(--m367-font-weight-strong);
}

.m367-order-page .bx-soa {
	margin: 0 auto;
	color: var(--m367-foundation-text, rgba(255, 255, 255, .92));
}

.m367-order-page .bx-soa-section,
.m367-order-page .bx-soa-cart-total {
	margin-bottom: var(--m367-grid-gap, 20px);
	color: var(--m367-foundation-text, rgba(255, 255, 255, .92));
	background: var(--m367-foundation-surface-raised, #151619);
	border: 0;
	border-radius: var(--m367-card-radius, 18px);
	box-shadow: none;
	overflow: hidden;
}

.m367-order-page .bx-soa-cart-total {
	background: transparent;
	border-top: 1px solid var(--m367-action-border-divider, rgba(255, 255, 255, .12));
	border-radius: 0;
}

.m367-order-page .bx-soa-section-title-container,
.m367-order-page .bx-soa-cart-total-line,
.m367-order-page .bx-soa-cart-total-button-container {
	background: transparent;
	border-color: var(--m367-card-border, rgba(255, 255, 255, .12));
}

.m367-order-page .bx-soa-section-title,
.m367-order-page .bx-soa-cart-total-line-total .bx-soa-cart-d {
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	font-weight: var(--m367-font-weight-strong);
}

.m367-order-page .bx-soa-section-content,
.m367-order-page .bx-soa-cart-total {
	padding: var(--m367-card-pad, 22px);
}

.m367-order-page .bx-soa-cart-total {
	position: static;
}

.m367-order-page .bx-soa-customer-field,
.m367-order-page .bx-soa-pp-company,
.m367-order-page .bx-soa-pp-item-container,
.m367-order-page .bx-soa-more {
	color: var(--m367-foundation-muted, rgba(255, 255, 255, .7));
}

.m367-order-page .form-control,
.m367-order-page input[type="text"],
.m367-order-page input[type="email"],
.m367-order-page input[type="tel"],
.m367-order-page textarea,
.m367-order-page select {
	min-height: var(--m367-control-height, 46px);
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	background: var(--m367-foundation-surface, #101113);
	border: 1px solid var(--m367-control-border, rgba(255, 255, 255, .18));
	border-radius: var(--m367-control-radius, 12px);
	box-shadow: none;
}

.m367-order-page textarea.form-control {
	min-height: 112px;
	padding-top: 12px;
}

.m367-order-page .form-control:focus,
.m367-order-page input:focus,
.m367-order-page textarea:focus,
.m367-order-page select:focus {
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	background: var(--m367-foundation-surface, #101113);
	border-color: var(--m367-accent-muted-hover, #ff7a33);
	box-shadow: 0 0 0 3px rgba(255, 90, 0, .18);
}

.m367-order-page .btn,
.m367-order-page .bx-soa-editstep,
.m367-order-page .bx-soa-more-btn .pull-right {
	min-height: var(--m367-button-height, 46px);
	padding: 0 var(--m367-button-pad-inline, 20px);
	border-radius: var(--m367-button-radius, 12px);
	font-weight: var(--m367-font-weight-strong);
	box-shadow: none;
}

.m367-order-page .btn-primary,
.m367-order-page .btn-order-save {
	color: var(--m367-button-primary-text, #fff);
	background: var(--m367-button-primary-bg, #ff5a00);
	border-color: var(--m367-button-primary-border, #ff5a00);
}

.m367-order-page .btn-primary:hover,
.m367-order-page .btn-primary:focus,
.m367-order-page .btn-order-save:hover,
.m367-order-page .btn-order-save:focus {
	color: var(--m367-button-primary-text, #fff);
	background: var(--m367-button-primary-bg-hover, #e95100);
	border-color: var(--m367-button-primary-border-hover, #e95100);
}

.m367-order-page .bx-soa-item-table,
.m367-order-page .bx-soa-item-tr,
.m367-order-page .bx-soa-item-td {
	color: var(--m367-foundation-text, rgba(255, 255, 255, .92));
	background: transparent;
	border-color: var(--m367-card-border, rgba(255, 255, 255, .12));
}

.m367-order-page .bx-soa-item-title a,
.m367-order-page .bx-soa-item-title {
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
}

.m367-order-page .bx-soa-cart-total-line,
.m367-order-page .bx-soa-cart-total-line span,
.m367-order-page .bx-soa-cart-total-line strong {
	color: var(--m367-foundation-text, rgba(255, 255, 255, .92));
}

.m367-order-page .alert,
.m367-order-page .bx-soa-tooltip {
	color: var(--m367-foundation-muted, rgba(255, 255, 255, .7));
	background: var(--m367-action-bg-tonal, rgba(255, 90, 0, .12));
	border-color: var(--m367-action-border-tonal, rgba(255, 90, 0, .34));
	border-radius: var(--m367-foundation-radius, 14px);
}

/* Independent product-request route. */
.m367-product-request-page {
	margin: 0 0 76px;
	color: var(--m367-foundation-text, rgba(255, 255, 255, .92));
}

.m367-request-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: start;
	gap: var(--m367-grid-gap, 20px);
}

.m367-request-card,
.m367-request-result {
	padding: clamp(22px, 3vw, 38px);
	background: var(--m367-foundation-surface-raised, #151619);
	border: 0;
	border-radius: var(--m367-card-radius, 18px);
}

.m367-request-result {
	max-width: 760px;
}

.m367-request-result__eyebrow {
	display: block;
	margin-bottom: 10px;
	color: var(--m367-accent-muted-hover, #ff7a33);
	font-size: 12px;
	font-weight: var(--m367-font-weight-strong);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.m367-request-card h1,
.m367-request-result h1 {
	margin: 0 0 12px;
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	font-size: clamp(28px, 4vw, 44px);
	font-weight: var(--m367-font-weight-strong);
	line-height: 1.08;
}

.m367-request-card__lead,
.m367-request-result p {
	margin: 0;
	color: var(--m367-foundation-muted, rgba(255, 255, 255, .68));
	line-height: 1.55;
}

.m367-request-form {
	display: grid;
	gap: 16px;
	margin-top: 28px;
}

.m367-request-fields-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.m367-request-field {
	display: grid;
	gap: 8px;
	color: var(--m367-text-secondary, rgba(255, 255, 255, .78));
	font-size: 13px;
	font-weight: var(--m367-font-weight-strong);
}

.m367-request-field input {
	width: 100%;
	min-height: var(--m367-control-height, 46px);
	padding: 0 14px;
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	background: var(--m367-foundation-surface, #101113);
	border: 1px solid var(--m367-control-border, rgba(255, 255, 255, .18));
	border-radius: var(--m367-control-radius, 12px);
	outline: none;
}

.m367-request-field input:focus {
	border-color: var(--m367-accent-muted-hover, #ff7a33);
	box-shadow: 0 0 0 3px rgba(255, 90, 0, .18);
}

.m367-request-form__hint,
.m367-request-consent,
.m367-request-summary p {
	color: var(--m367-foundation-muted, rgba(255, 255, 255, .68));
	font-size: 12px;
	line-height: 1.5;
}

.m367-request-form__hint {
	margin: -8px 0 0;
}

.m367-request-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.m367-request-consent input {
	margin-top: 3px;
	accent-color: var(--m367-brand-orange, #ff5a00);
}

.m367-request-honeypot {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.m367-request-error {
	margin-top: 18px;
	padding: 14px 16px;
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	background: rgba(217, 72, 72, .14);
	border-left: 3px solid #d94848;
	border-radius: 8px;
}

.m367-request-summary {
	padding: 2px;
}

.m367-request-summary h2 {
	margin: 0 0 14px;
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	font-size: 22px;
	font-weight: var(--m367-font-weight-strong);
}

.m367-request-summary__row,
.m367-request-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid var(--m367-action-border-divider, rgba(255, 255, 255, .12));
}

.m367-request-summary__total strong {
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	font-size: 26px;
	font-weight: var(--m367-font-weight-strong);
	white-space: nowrap;
}

.m367-request-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* Native split-orders checkout, stage 1. */
.m367-split-checkout,
.m367-split-manager {
	margin-bottom: 76px;
	color: var(--m367-foundation-text, rgba(255, 255, 255, .92));
}

.m367-split-attention,
.m367-split-success,
.m367-split-checkout__form-card,
.m367-split-checkout__summary,
.m367-split-order-card {
	background: var(--m367-foundation-surface-raised, #151619);
	border: 1px solid var(--m367-action-border-divider, rgba(255, 255, 255, .12));
	border-radius: var(--m367-card-radius, 18px);
}

.m367-split-attention,
.m367-split-success,
.m367-split-checkout__form-card {
	padding: clamp(22px, 4vw, 42px);
}

.m367-split-attention {
	max-width: 820px;
	margin: 0 auto;
}

.m367-split-attention h1,
.m367-split-success h1,
.m367-split-checkout__form-card h1,
.m367-split-manager h1 {
	margin: 0 0 14px;
	color: var(--m367-text-strong, rgba(255, 255, 255, .96));
	font-size: clamp(28px, 4vw, 44px);
	font-weight: var(--m367-font-weight-strong);
	line-height: 1.08;
}

.m367-split-attention > p,
.m367-split-success > p,
.m367-split-checkout__form-card > p,
.m367-split-manager p,
.m367-split-order-card p {
	color: var(--m367-foundation-muted, rgba(255, 255, 255, .68));
	line-height: 1.55;
}

.m367-split-attention__facts,
.m367-split-order-grid,
.m367-split-choice-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.m367-split-attention__facts {
	margin-top: 26px;
}

.m367-split-attention__facts div {
	padding: 18px;
	background: var(--m367-foundation-surface, #101113);
	border-radius: var(--m367-control-radius, 12px);
}

.m367-split-attention__facts strong,
.m367-split-attention__facts span {
	display: block;
}

.m367-split-attention__facts strong {
	color: var(--m367-accent-muted-hover, #ff7a33);
	font-size: 30px;
}

.m367-split-checkout__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: var(--m367-grid-gap, 20px);
	align-items: start;
}

.m367-split-checkout__summary {
	position: sticky;
	top: 24px;
	padding: 24px;
}

.m367-split-checkout__summary h2,
.m367-split-order-card h2,
.m367-split-qr h3 {
	margin: 0 0 16px;
	color: var(--m367-text-strong, rgba(255, 255, 255, .96));
	font-weight: var(--m367-font-weight-strong);
}

.m367-split-checkout__summary > div {
	display: grid;
	gap: 6px;
	padding: 16px 0;
	border-top: 1px solid var(--m367-action-border-divider, rgba(255, 255, 255, .12));
}

.m367-split-checkout__summary strong {
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
}

.m367-split-form {
	display: grid;
	gap: 22px;
	margin-top: 30px;
}

.m367-split-form fieldset {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 20px;
	background: var(--m367-foundation-surface, #101113);
	border: 1px solid var(--m367-action-border-divider, rgba(255, 255, 255, .12));
	border-radius: var(--m367-control-radius, 12px);
}

.m367-split-form legend {
	padding: 0 8px;
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	font-size: 18px;
	font-weight: var(--m367-font-weight-strong);
}

.m367-split-choice-grid label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 50px;
	padding: 14px;
	color: var(--m367-text-secondary, rgba(255, 255, 255, .8));
	background: var(--m367-foundation-surface-raised, #151619);
	border: 1px solid var(--m367-control-border, rgba(255, 255, 255, .18));
	border-radius: var(--m367-control-radius, 12px);
	cursor: pointer;
}

.m367-split-choice-grid input {
	margin-top: 3px;
	accent-color: var(--m367-brand-orange, #ff5a00);
}

.m367-split-choice-grid--payment {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.m367-request-field select {
	width: 100%;
	min-height: var(--m367-control-height, 46px);
	padding: 0 14px;
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	background: var(--m367-foundation-surface, #101113);
	border: 1px solid var(--m367-control-border, rgba(255, 255, 255, .18));
	border-radius: var(--m367-control-radius, 12px);
}

.m367-split-checkout__notice,
.m367-split-qr-wait {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var(--m367-action-bg-tonal, rgba(255, 90, 0, .12));
	border-left: 3px solid var(--m367-brand-orange, #ff5a00);
	border-radius: 8px;
}

.m367-split-native-payment {
	display: grid;
	gap: 12px;
	margin-top: 18px;
	padding: 16px;
	background: rgba(255, 255, 255, .035);
	border: 1px solid var(--m367-action-border-divider, rgba(255, 255, 255, .12));
	border-radius: var(--m367-control-radius, 12px);
	overflow-wrap: anywhere;
}

.m367-split-native-payment h3 {
	margin: 0;
}

.m367-split-order-grid {
	margin-top: 28px;
}

.m367-split-order-card {
	padding: 24px;
}

.m367-split-order-card__role {
	display: inline-flex;
	margin-bottom: 10px;
	padding: 6px 10px;
	color: var(--m367-accent-muted-hover, #ff7a33);
	background: var(--m367-action-bg-tonal, rgba(255, 90, 0, .12));
	border-radius: 999px;
	font-size: 12px;
	font-weight: var(--m367-font-weight-strong);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.m367-split-order-card dl {
	margin: 0;
}

.m367-split-order-card dl div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--m367-action-border-divider, rgba(255, 255, 255, .12));
}

.m367-split-order-card dt {
	color: var(--m367-foundation-muted, rgba(255, 255, 255, .62));
}

.m367-split-order-card dd {
	margin: 0;
	color: var(--m367-text-strong, rgba(255, 255, 255, .94));
	font-weight: var(--m367-font-weight-strong);
	text-align: right;
}

.m367-split-qr {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--m367-action-border-divider, rgba(255, 255, 255, .12));
}

.m367-split-qr img {
	display: block;
	width: min(280px, 100%);
	height: auto;
	margin: 0 auto 18px;
	background: #fff;
	border-radius: 12px;
}

.m367-split-qr ol {
	padding-left: 22px;
	color: var(--m367-text-secondary, rgba(255, 255, 255, .78));
	line-height: 1.55;
}

.m367-split-payment-report {
	margin-top: 12px;
}

.m367-split-manager__table-wrap {
	overflow-x: auto;
	margin-top: 24px;
}

.m367-split-manager__table {
	width: 100%;
	border-collapse: collapse;
}

.m367-split-manager__table th,
.m367-split-manager__table td {
	padding: 12px;
	border-bottom: 1px solid var(--m367-action-border-divider, rgba(255, 255, 255, .12));
	text-align: left;
	white-space: nowrap;
}

.m367-split-manager__table code {
	color: var(--m367-accent-muted-hover, #ff7a33);
}

.m367-split-manager__form {
	margin-top: 32px;
}

@media (max-width: 767px) {
	.m367-commerce-route .bx-breadcrumb {
		gap: 6px;
	}

	.m367-commerce-route .bx-breadcrumb-item {
		min-height: 30px;
		padding: 4px 10px;
	}

	.popup-window[id^="CatalogElementBasket_"] .popup-window-buttons,
	.popup-window[id^="CatalogSectionBasket_"] .popup-window-buttons {
		flex-direction: column;
	}

	.popup-window[id^="CatalogElementBasket_"] .popup-window-button,
	.popup-window[id^="CatalogSectionBasket_"] .popup-window-button {
		width: 100%;
	}

	.m367-order-flow-notice {
		flex-direction: column;
	}

	.m367-order-page .bx-soa-section-content,
	.m367-order-page .bx-soa-cart-total {
		padding: 16px;
	}

	.m367-request-layout,
	.m367-request-fields-row,
	.m367-split-checkout__layout,
	.m367-split-order-grid,
	.m367-split-attention__facts,
	.m367-split-choice-grid,
	.m367-split-choice-grid--payment {
		grid-template-columns: 1fr;
	}

	.m367-split-checkout__summary {
		position: static;
	}

	.m367-request-actions,
	.m367-request-actions .m367-button,
	.m367-request-form .m367-button {
		width: 100%;
	}
}

/* End */


/* Start:/bitrix/templates/eshop_bootstrap_v4/components/bitrix/sale.basket.basket.line/bootstrap_v4/style.css?17904036557777*/
.bx-basket { }

/* =========================================================
   M367_BASKET_LINE_CLEAN_BASE_V4
   Чистая база для маленького блока корзины в шапке.
   Старые .basket-line-block / .basket-line-block-icon-* больше не используются.
   Иконки встроены inline SVG в top_template.php, чтобы не наслаивать старые images/profile.svg и images/cart.svg.
========================================================= */

.m367-basket-line {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.m367-basket-line__card {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	grid-template-rows: 22px 18px;
	align-items: center;
	column-gap: 12px;
	row-gap: 1px;
	width: 168px;
	min-width: 168px;
	max-width: 168px;
	height: 64px;
	min-height: 64px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid rgba(255, 122, 24, .38);
	border-radius: 14px;
	background: rgba(255,255,255,.030);
	box-shadow: 0 14px 32px rgba(0,0,0,.20);
	box-sizing: border-box;
	overflow: hidden;
	color: rgba(255,255,255,.96);
}

.m367-basket-line__card:hover {
	border-color: rgba(255, 122, 24, .56);
	background: rgba(255, 122, 24, .075);
}

.m367-basket-line__main {
	grid-column: 1 / span 2;
	grid-row: 1;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 0;
	color: rgba(255,255,255,.96);
	text-decoration: none;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.m367-basket-line__main:hover,
.m367-basket-line__sub:hover {
	color: #fff;
	text-decoration: none;
}

.m367-basket-line__icon {
	grid-column: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	color: #ff6a00;
	line-height: 1;
}

.m367-basket-line__svg {
	display: block;
	width: 28px;
	height: 28px;
	fill: currentColor;
	stroke: none;
}

.m367-basket-line__title {
	grid-column: 2;
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: rgba(255,255,255,.96);
	font-family: var(--ui-font-family-primary, "Open Sans", Arial, sans-serif);
	font-size: 17px;
	font-weight: var(--m367-font-weight-strong);
	line-height: 1.05;
	letter-spacing: -.02em;
	white-space: nowrap;
	overflow: visible;
	text-overflow: clip;
}

.m367-basket-line__sub {
	grid-column: 2;
	grid-row: 2;
	display: block;
	min-width: 0;
	max-width: 100%;
	margin: -1px 0 0 0;
	padding: 0;
	color: rgba(255,255,255,.66);
	font-family: var(--ui-font-family-primary, "Open Sans", Arial, sans-serif);
	font-size: 11px;
	font-weight: var(--m367-font-weight-strong);
	line-height: 1.15;
	text-decoration: none;
	white-space: nowrap;
	overflow: visible;
	text-overflow: clip;
	background: transparent;
	border: 0;
	box-shadow: none;
}

@media (min-width: 768px) and (max-width: 1199px) {
	.m367-basket-line {
		gap: 8px;
	}

	.m367-basket-line__card {
		width: 148px;
		min-width: 148px;
		max-width: 148px;
		height: 60px;
		min-height: 60px;
		padding: 9px 12px;
		column-gap: 10px;
		border-radius: 13px;
	}

	.m367-basket-line__main {
		grid-template-columns: 30px minmax(0, 1fr);
		column-gap: 10px;
	}

	.m367-basket-line__icon,
	.m367-basket-line__svg {
		width: 25px;
		height: 25px;
	}

	.m367-basket-line__title {
		font-size: 15px;
	}

	.m367-basket-line__sub {
		font-size: 10.5px;
	}
}

/* M367_BASKET_LINE_CLEAN_BASE_V4 END */


/*FIXED BASKET*/

@media (min-width: 768px) {
	.bx-basket-fixed {
		position: fixed;
		z-index: 998;
		overflow: hidden;
		padding-top: 10px;
		width: 200px;
		border: 1px solid #f0f0f0;
		border-radius: 1px;
		background: #fff;
		box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);
	}

	.bx-basket-fixed.top { top: 10px }

	.bx-basket-fixed.right { right: 10px }

	.bx-basket-fixed.bottom { bottom: 10px }

	.bx-basket-fixed.left { left: 10px }

	.bx-basket-fixed.bx-max-height { top: 10px; bottom: 10px; }
}

@media (max-width: 767px) {
	.bx-basket-fixed {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 998;
		overflow: hidden;
		padding-top: 10px;
		border: 1px solid #f0f0f0;
		border-radius: 1px;
		background: #fff;
		box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);
	}

	.bx-basket-fixed.vcenter {
		bottom: 10px;
		top: auto !important;
	}

	.bx-basket-item-list { display: none; }

	/*.bx-basket-fixed */
}

.bx-basket-fixed .basket-line-block { margin-left: 10px; }

.bx-basket-item-list {
	position: relative;
	overflow: hidden;
	padding-bottom: 20px;
	border-top: 1px solid #f7f7f7;
}

.bx-opener .bx-basket-item-list { padding-bottom: 75px; }

.bx-max-height .bx-basket-item-list {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
}

.bx-closed .bx-basket-item-list {
	overflow: hidden;
	height: 20px;
}

.bx-basket-item-list-action {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 120;
	padding: 3px 0;
	height: 20px;
	background: #f7f7f7;
	color: #4f4f4f;
	vertical-align: middle;
	text-align: center;
	font-size: 12px;
	line-height: 14px;
	cursor: pointer;
}

.bx-basket-item-list-button-container {
	position: absolute;
	right: 0;
	bottom: 20px;
	left: 0;
	padding: 10px 0;
	border-top: 1px solid #f7f7f7;
	background: #fff;
	text-align: center;
}

.bx-basket-item-list-container {
	overflow-y: auto;
	max-height: 100%
}

.bx-basket-item-list-item {
	position: relative;
	margin-bottom: 15px;
	padding-top: 15px;
	padding-right: 10px;
	padding-left: 10px;
	border-bottom: 1px solid #f7f7f7;
}

.bx-basket-item-list-container .bx-basket-item-list-item:last-child {
	margin-bottom: 0;
	border-bottom: none;
}

.bx-basket-item-list-item-status {
	margin: 0 10px 20px;
	padding: 3px;
	border-radius: 3px;
	background: #ebebeb;
	text-align: center;
	white-space: normal;
	font-weight: bold;
	font-size: 12px;
	line-height: 16px;
}

.bx-basket-item-list-item-img {
	position: relative;
	padding-bottom: 5px;
	text-align: center;
}

.bx-basket-item-list-item-img img {
	max-width: 90px;
	height: auto;
	border: 1px solid #e6e6e6;
}

.bx-basket-item-list-item-name { padding-bottom: 5px; }

.bx-basket-item-list-item-name a {
	font-size: 13px;
	line-height: 16px;
}

.bx-basket-item-list-item-remove {
	position: absolute;
	top: -7px;
	right: 10px;
	width: 20px;
	height: 20px;
	opacity: .5;
	cursor: pointer;
	transition: 250ms linear all;
}

.bx-basket-item-list-item-remove:after,
.bx-basket-item-list-item-remove:before {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 10px;
	height: 2px;
	border-radius: 1px;
	background-color: #333;
	content: '';
	transform: translate(-50%, -50%);
}

.bx-basket-item-list-item-remove:after {
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	-moz-transform: translate(-50%, -50%) rotate(45deg);
	-ms-transform: translate(-50%, -50%) rotate(45deg);
	-o-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
}

.bx-basket-item-list-item-remove:before {
	-webkit-transform: translate(-50%, -50%) rotate(135deg);
	-moz-transform: translate(-50%, -50%) rotate(135deg);
	-ms-transform: translate(-50%, -50%) rotate(135deg);
	-o-transform: translate(-50%, -50%) rotate(135deg);
	transform: translate(-50%, -50%) rotate(135deg);
}

.bx-basket-item-list-item-remove:hover { opacity: .7; }

.bx-basket-item-list-item-price-block {
	padding-bottom: 5px;
	font-size: 12px;
}

.bx-basket-item-list-item-price {
	display: inline-block;
	margin-right: 5px;
}

.bx-basket-item-list-item-price-old {
	display: inline-block;
	margin-right: 5px;
	color: #b0b0b0;
	text-decoration: line-through
}

.bx_cart_login_top .basket-line { line-height: 1.44em; }
/* End */


/* Start:/bitrix/components/bitrix/menu/templates/bootstrap_v4/style.css?177848006011899*/
.bx-top-nav-container {
	position: relative;
	padding: 0 10px;
	border-radius: 2px;
	background: var(--theme-color-primary);
	color: #fff;
}

/*region 1 lvl*/
.bx-nav-list-1-lvl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.bx-nav-1-lvl { position: relative; }

.bx-nav-1-lvl-link {
	display: block;
	padding-top: 6px;
	padding-bottom: 2px;
	border-bottom: none;
	border-radius: 1px;
	text-decoration: none;
	transition: 250ms linear all;
}

.bx-nav-1-lvl-link:hover { text-decoration: none; }

.bx-nav-1-lvl.bx-hover > .bx-nav-1-lvl-link,
.bx-nav-1-lvl.bx-active > .bx-nav-1-lvl-link,
.bx-nav-1-lvl:hover > .bx-nav-1-lvl-link {
	border-bottom: none;
	background: var(--theme-color-second);
}

.bx-nav-1-lvl-link-text {
	display: flex;
	padding: 10px 14px 14px;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font: 14px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
	transition: 250ms linear all;
	align-items: center;
}

.bx-nav-angle-bottom {
	position: relative;
	display: block;
	margin-left: 10px;
	width: 10px;
	height: 10px;
}

.bx-nav-angle-bottom:after,
.bx-nav-angle-bottom:before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 2px;
	background-color: #fff;
	content: '';
	transition: 250ms linear all;
}

.bx-nav-angle-bottom:after {
	margin-left: -2px;
	transform: translate(-50%, -50%) rotate(45deg);
}

.bx-nav-angle-bottom:before {
	margin-left: 2px;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.bx-nav-1-lvl.bx-nav-parent:hover .bx-nav-angle-bottom:after,
.bx-nav-1-lvl.bx-nav-parent:hover .bx-nav-angle-bottom:before {
	background-color: #c44932;
}

.bx-nav-1-lvl.bx-nav-parent.bx-hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text,
.bx-nav-1-lvl.bx-nav-parent:hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text {
	background-color: #161616;
	color: #ffffff;
}

.bx-nav-1-lvl.bx-nav-parent.hover > .bx-nav-1-lvl-link,
.bx-nav-1-lvl.bx-nav-parent.bx-hover > .bx-nav-1-lvl-link {
	z-index: 250;
	box-shadow: 0 6px 13px 0 rgba(0, 0, 0, .13)
}

.bx-nav-1-lvl.bx-nav-parent.bx-hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text,
.bx-nav-1-lvl.bx-nav-parent.hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text {
	background: #161616;
	color: #ffffff;
}

/**/


.bx-nav-angle-top {
	position: relative;
	display: block;
	margin-left: 10px;
	width: 10px;
	height: 10px;
}

.bx-nav-angle-top:after,
.bx-nav-angle-top:before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 2px;
	background-color: #fff;
	content: '';
	transition: 250ms linear all;
}

.bx-nav-angle-top:after {
	margin-left: -2px;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.bx-nav-angle-top:before {
	margin-left: 2px;
	transform: translate(-50%, -50%) rotate(45deg);
}


/**/
.bx-nav-parent-arrow { display: none; }

/*endregion*/

/*region 2 lvl*/
.bx-nav-2-lvl-container,
.bx-nav-2-lvl-container-advanced {
	z-index: 999;
	display: none;
	padding: 0;
	min-width: 100%;
	border-top: none;
	box-shadow: 0 6px 13px 0 rgba(0, 0, 0, .13);
	color: #000;
	opacity: 0;
}

.bx-nav-2-lvl-container > ul,
.bx-nav-2-lvl-container > div,
.bx-nav-2-lvl-container-advanced > ul,
.bx-nav-2-lvl-container-advanced > div { flex: 1 }

.bx-nav-1-lvl.bx-hover .bx-nav-2-lvl-container-advanced,
.bx-nav-1-lvl.hover .bx-nav-2-lvl-container-advanced,
.bx-nav-1-lvl.bx-hover .bx-nav-2-lvl-container,
.bx-nav-1-lvl.hover .bx-nav-2-lvl-container {
	position: absolute;
	top: calc(100% - 5px);
	z-index: 999;
	display: flex;
	background: #111111;
	opacity: 1;
	align-items: stretch;
}

.bx-nav-list-2-lvl {
	margin: 0;
	padding: 5px 0 12px;
}

.bx-nav-2-lvl {
	display: block;
	padding: 0;
	min-width: 180px;
}

.bx-nav-2-lvl-link {
	display: block;
	padding: 5px 15px 5px;
	border-bottom: none !important;
	text-decoration: none !important;
}

.bx-nav-2-lvl-link-text {
	color: #e8e0d2;
	text-decoration: none;
	font-weight: var(--ui-font-weight-bold);
	font-size: 13px;
	line-height: 16px;
}

/*.bx-nav-list-2-lvl .bx-nav-2-lvl:first-child a {
	margin-top: 0;
	border-top: none;
}*/

.bx-nav-2-lvl > .bx-nav-list-2-lvl.bx-active .bx-nav-list-2-lvl-text,
.bx-nav-2-lvl > .bx-nav-list-2-lvl:hover .bx-nav-list-2-lvl-text {
	background: #8e2a2a;
	color: #ffffff;
}

/*endregion*/

/*region 3 lvl*/

.bx-nav-3-lvl-container-advanced:before,
.bx-nav-3-lvl-container:before {
	position: absolute;
	top: -5px;
	right: 0;
	left: 0;
	display: block;
	height: 5px;
	background: #fff;
	content: " ";
}

.bx-nav-list-3-lvl {
	margin: 0;
	padding: 0 0 14px 0;
}

.bx-nav-3-lvl {
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	min-width: 180px;
}

.bx-nav-3-lvl-link {
	display: block;
	padding: 3px 15px 3px 20px;
	border-bottom: none;
	color: #555;
	text-decoration: none;
	font-size: 13px;
	line-height: 14px;
}

.bx-nav-3-lvl-link.bx-active,
.bx-nav-3-lvl-link:hover {
	background: #f0f0f0;
	color: var(--theme-color-primary);
	text-decoration: none;
}

/*endregion*/

/*region col 4 */
.bx-nav-list-4-col { position: static; }

.bx-nav-list-4-col .bx-nav-2-lvl-container-advanced {
	top: 100%;
	right: 0;
	left: 0;
}

.bx-nav-list-4-col .bx-nav-2-lvl-container,
.bx-nav-list-4-col .bx-nav-2-lvl-container-advanced {
	right: 0;
	left: 0;
}

/*endregion*/

/*region catinfo*/
.bx-nav-catinfo {
	position: relative;
	z-index: 120;
	padding: 15px 15px 5px;
	min-width: 200px;
	border-left: 1px solid #ecefef;
	background: #f7fafb;
}

.bx-nav-catinfo img {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border: 1px solid #e7e9ea;
}

.bx-nav-catinfo p {
	padding: 20px 5px 0;
	font-size: 13px;
}

/*endregion*/

/*region ASIDE */
.bx-menu-button-mobile {
	position: absolute;
	top: 8px;
	left: 5px;
	z-index: 10;
	width: 40px;
	height: 40px;
}

.bx-aside-nav-control {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1750;
	width: 40px;
	height: 40px;
	color: #fff;
	text-align: center;
	font-size: 28px;
	line-height: 40px;
	cursor: pointer;
	transition: left .15s linear;
}


.bx-nav-bars {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2100;
	display: block;
	box-sizing: border-box;
	width: 30px;
	height: 25px;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
	vertical-align: middle;
	transform: translate(-50%, -50%);
}

.bx-nav-bars:after {
	position: absolute;
	top: 50%;
	display: block;
	background: #fff;
	width: 100%;
	height: 5px;
	content: '';
	transform: translateY(-50%);
}

.bx-wrapper,
.bx-aside-nav { transition: transform .15s linear; }

/**/
.bx-opened .bx-footer,
.bx-opened .workarea { overflow: hidden; }

/**/
.bx-aside-nav {
	position: fixed;
	top: 50px;
	bottom: 0;
	left: 0;
	z-index: 1600;
	display: none;
	width: 100%;
	background: #4c5c65;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	transform: translateX(-100%);
}

.bx-aside-nav.bx-opened {
	overflow-y: scroll;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}

.bx-aside-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bx-aside-nav a {
	display: block;
	overflow: hidden;
	padding-left: 15px;
	max-width: 100%;
	height: 48px;
	border-bottom: 1px solid #3d4b53 !important;
	color: #fff;
	vertical-align: middle;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
	line-height: 48px;
}

.bx-aside-nav .bx-nav-list-1-lvl {
	z-index: 1700;
	flex-direction: column;
}

.bx-aside-nav .bx-nav-1-lvl-link {
	padding: 0;
	display: flex;
	align-items: center;
}

.bx-aside-nav .bx-nav-1-lvl-link-text {
	padding: 0 0 0 15px;
}

.bx-aside-nav .bx-nav-1-lvl.bx-nav-parent.hover > .bx-nav-1-lvl-link,
.bx-aside-nav .bx-nav-1-lvl.bx-nav-parent.bx-hover > .bx-nav-1-lvl-link { box-shadow: none !important; }

.bx-aside-nav .bx-nav-1-lvl.bx-nav-parent.bx-hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text,
.bx-aside-nav .bx-nav-1-lvl.bx-nav-parent:hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text {
	background: transparent;
	color: #fff;
}

.bx-aside-nav .bx-nav-1-lvl.bx-hover .bx-nav-2-lvl-container-advanced,
.bx-aside-nav .bx-nav-1-lvl.hover .bx-nav-2-lvl-container-advanced,
.bx-aside-nav .bx-nav-1-lvl.bx-hover .bx-nav-2-lvl-container,
.bx-aside-nav .bx-nav-1-lvl.hover .bx-nav-2-lvl-container {
	position: relative;
	box-shadow: none;
	top: auto;
}

.bx-aside-nav .bx-nav-1-lvl.bx-opened .bx-nav-2-lvl-container-advanced,
.bx-aside-nav .bx-nav-1-lvl.bx-opened .bx-nav-2-lvl-container {
	display: block;
	opacity: 1;
}

.bx-nav-1-lvl.bx-opened,
.bx-aside-nav .bx-nav-1-lvl:hover > a,
.bx-aside-nav .bx-nav-1-lvl.bx-hover > a { background: #44535c; }

.bx-aside-nav .bx-nav-2-lvl-link-text,
.bx-aside-nav .bx-nav-3-lvl-link-text,
.bx-aside-nav .bx-nav-4-lvl-link-text {
	color: #fff;
	font-weight: 500;
	font-size: 14px;
}

.bx-aside-nav .bx-nav-list-2-lvl { background: #44535c; }

.bx-aside-nav .bx-nav-2-lvl-link { padding: 0 0 0 30px; }

.bx-aside-nav .bx-nav-2-lvl-link:hover { background-color: #3b4851; }

.bx-aside-nav .bx-nav-3-lvl-link { padding: 0 0 0 45px; }

.bx-aside-nav .bx-nav-3-lvl-link:hover { background-color: #3b4851; }

.bx-aside-nav .bx-nav-4-lvl-link { padding: 0 0 0 60px; }

.bx-aside-nav .bx-nav-4-lvl-link:hover { background-color: #3b4851; }

.bx-aside-nav .bx-nav-parent { position: relative; }

.bx-aside-nav .bx-nav-parent-arrow {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 200;
	margin-top: 6px;
	width: 46px;
	height: 34px;
	border-left: 1px solid #5a6971;
	text-align: center;
}

.bx-aside-nav .bx-nav-parent.bx-opened .bx-nav-parent-arrow i { transition: all .15s linear; }

.bx-aside-nav .bx-nav-parent .bx-nav-2-lvl-container-advanced,
.bx-aside-nav .bx-nav-parent .bx-nav-2-lvl-container,
.bx-aside-nav .bx-nav-parent > ul {
	overflow: hidden;
	height: 0;
}

.bx-aside-nav .bx-nav-parent.bx-opened .bx-nav-2-lvl-container-advanced,
.bx-aside-nav .bx-nav-parent.bx-opened .bx-nav-2-lvl-container,
.bx-aside-nav .bx-nav-parent.bx-opened > ul { height: auto; }

.bx-aside-nav .bx-nav-catinfo { display: none; }


.bx-aside-nav .bx-nav-angle-top,
.bx-aside-nav .bx-nav-angle-bottom {
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	margin: 0;
}

@media (min-width: 1200px) {
	.bx-nav-1-lvl > a { font-size: 15px; }

	.bx-nav-1-lvl > a span { padding: 12px 14px 15px }
}

@media (min-width: 992px) and (max-width: 1199px) {
	.bx-nav-1-lvl > a { font-size: 13px; }

	.bx-nav-1-lvl > a span { padding: 9px 11px 12px }
}

@media (min-width: 768px) and (max-width: 991px) {
	.bx-nav-1-lvl > a { font-size: 11px; }

	.bx-nav-1-lvl > a span { padding: 5px 6px 9px }
}

@media (min-width: 768px) {
	.bx-aside-nav-control,
	.bx-aside-nav { display: none; }

	.bx-top-nav-container { display: block; }
}

@media (max-width: 767px) {
	.bx-aside-nav-control {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bx-aside-nav { display: block; }

	.bx-top-nav-container { display: none; }

	.bx-aside-nav .bx-nav-parent-arrow { display: block; }

	.bx-aside-nav .bx-nav-1-lvl-link-text .bx-nav-angle-bottom{ display: none; }
}

.bx-white {
	--theme-color-primary: #f5f5f5;
	--theme-color-second: #dfdfdf;
}

.bx-white .bx-nav-1-lvl-link-text,
.bx-white .bx-nav-2-lvl-link-text,
.bx-white .bx-nav-3-lvl-link.bx-active,
.bx-white .bx-nav-3-lvl-link:hover,
.bx-white .bx-nav-3-lvl-link.bx-active,
.bx-white .bx-nav-3-lvl-link:hover,
.bx-white .bx-nav-1-lvl.bx-nav-parent.bx-hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text,
.bx-white .bx-nav-1-lvl.bx-nav-parent:hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text { color: #333; }

/* End */


/* Start:/bitrix/templates/eshop_bootstrap_v4/template_styles.css?1790404863258449*/
/* =========================
   BITRIX BASE THEME
========================= */

.bx-yellow,
.bx-theme-yellow {
	--primary: #f9a91d;
	--theme-color-primary: #f9a91d;
	--theme-color-second: #faba4a;
	--theme-color-light: #fff;
	--theme-b-link: #f9a91d;
	--theme-b-link-hover: #faba4a;
	--theme-b-tx-primary: #fff;
	--theme-b-bg-primary: #f9a91d;
	--theme-b-bd-primary: #f9a91d;
	--theme-b-sd-primary: rgba(249, 169, 29, 0.5);
	--theme-b-tx-primary-hover: #fff;
	--theme-b-bg-primary-hover: #faba4a;
	--theme-b-bd-primary-hover: #daa53e;
	--theme-b-tx-primary-active: #fff;
	--theme-b-bg-primary-active: #faba4a;
	--theme-b-bd-primary-active: #daa53e;
	--theme-b-tx-primary-disabled: #fff;
	--theme-b-bg-primary-disabled: #daa53e;
	--theme-b-bd-primary-disabled: #b7853b;
}

.bx-blue,
.bx-theme-blue {
	--primary: #0083d1;
	--theme-color-primary: #0083d1;
	--theme-color-second: #5ca6e4;
	--theme-color-light: #f0f6f8;
	--theme-b-link: #44b1c9;
	--theme-b-link-hover: #5cc3d1;
	--theme-b-tx-primary: #fff;
	--theme-b-bg-primary: #0083d1;
	--theme-b-bd-primary: #0083d1;
	--theme-b-sd-primary: rgba(0, 131, 209, 0.5);
	--theme-b-tx-primary-hover: #fff;
	--theme-b-bg-primary-hover: #5ca6e4;
	--theme-b-bd-primary-hover: #5599d2;
	--theme-b-tx-primary-active: #fff;
	--theme-b-bg-primary-active: #5ca6e4;
	--theme-b-bd-primary-active: #5599d2;
	--theme-b-tx-primary-disabled: #fff;
	--theme-b-bg-primary-disabled: #5599d2;
	--theme-b-bd-primary-disabled: #4d8bbf;
}

.bx-red,
.bx-theme-red {
	--primary: #e22b2b;
	--theme-color-primary: #e22b2b;
	--theme-color-second: #e95c5c;
	--theme-color-light: #f0f0f0;
	--theme-b-link: #e22b2b;
	--theme-b-link-hover: #e95c5c;
	--theme-b-tx-primary: #fff;
	--theme-b-bg-primary: #e22b2b;
	--theme-b-bd-primary: #e22b2b;
	--theme-b-sd-primary: rgba(226, 43, 43, 0.5);
	--theme-b-tx-primary-hover: #fff;
	--theme-b-bg-primary-hover: #e95c5c;
	--theme-b-bd-primary-hover: #d05454;
	--theme-b-tx-primary-active: #fff;
	--theme-b-bg-primary-active: #e95c5c;
	--theme-b-bd-primary-active: #d05454;
	--theme-b-tx-primary-disabled: #fff;
	--theme-b-bg-primary-disabled: #d05454;
	--theme-b-bd-primary-disabled: #c04e4e;
}

.bx-green,
.bx-theme-green {
	--primary: #63aa28;
	--theme-color-primary: #63aa28;
	--theme-color-second: #5b9f0b;
	--theme-color-light: #a8d95b;
	--theme-b-link: #44b1c9;
	--theme-b-link-hover: #5cc3d1;
	--theme-b-tx-primary: #fff;
	--theme-b-bg-primary: #63aa28;
	--theme-b-bd-primary: #63aa28;
	--theme-b-sd-primary: rgba(99, 170, 40, 0.5);
	--theme-b-tx-primary-hover: #fff;
	--theme-b-bg-primary-hover: #5b9f0b;
	--theme-b-bd-primary-hover: #56940b;
	--theme-b-tx-primary-active: #fff;
	--theme-b-bg-primary-active: #5b9f0b;
	--theme-b-bd-primary-active: #56940b;
	--theme-b-tx-primary-disabled: #fff;
	--theme-b-bg-primary-disabled: #56940b;
	--theme-b-bd-primary-disabled: #497c09;
}

body {
	background-attachment: fixed;
	background-size: cover;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#pagetitle {
	margin-bottom: 35px;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
}

.bx-content-section,\
.bx-header-section {
	padding-bottom: 2px;
	background-color: rgba(255, 255, 255, .95);
}

.bx-logo-block {
	display: block;
	height: 50px;
	border-bottom: none;
}

.bx-logo-block img {
	max-height: 50px;
	width: auto;
}

.bx-header-phone-block {
	display: flex;
	align-items: center;
}

.bx-header-phone-number {
	color: #000;
	white-space: nowrap;
	font: 21px/28px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
	transition: 250ms linear all;
}

.bx-header-phone-icon {
	display: block;
	margin-right: 10px;
	width: 26px;
	height: 26px;
	background: no-repeat center url(/bitrix/templates/eshop_bootstrap_v4/images/phone.svg);
}

.bx-header-worktime {
	color: #000;
	font: 16px/22px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
	transition: 250ms linear all;
}

.bx-worktime-title {
	color: #adadad;
	font: 12px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
}

.bx-worktime-schedule {
	color: #000;
	font: 12px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
}

.sidebar-block-title,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar h5 {
	color: #343434;
	text-transform: uppercase;
	font-size: 14px;
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
}

.sidebar li {
	font-size: 12px;
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
}

.sidebar-icon {
	width: 27px;
	height: 27px;
	margin-right: 5px;
	border-radius: 50%;
	background-color: var(--theme-color-primary);
	background-repeat: no-repeat;
	background-position: center;
}

.sidebar-icon-label {
	background-image: url(/bitrix/templates/eshop_bootstrap_v4/images/label.svg);
	background-size: 19px auto;
}

.sidebar-icon-delivery {
	background-image: url(/bitrix/templates/eshop_bootstrap_v4/images/delivery.svg);
	background-size: 17px auto;
}

.sidebar-icon-sale {
	background-image: url(/bitrix/templates/eshop_bootstrap_v4/images/sale.svg);
	background-size: auto 17px;
}

.sidebar-icon-self {
	background-image: url(/bitrix/templates/eshop_bootstrap_v4/images/self.svg);
	background-size: auto 17px;
}

.sidebar-icon-phone {
	background-image: url(/bitrix/templates/eshop_bootstrap_v4/images/phone_white.svg);
	background-size: auto 21px;
}

.btn-primary,
.list-group-item.active {
	border-color: var(--theme-b-bd-primary);
	background-color: var(--theme-b-bg-primary);
	color: var(--theme-b-tx-primary);
}

.btn-primary:hover {
	border-color: var(--theme-b-bd-primary-hover);
	background-color: var(--theme-b-bg-primary-hover);
	color: var(--theme-b-tx-primary-hover);
}

.btn-primary:focus,
.btn-primary.focus {
	box-shadow: 0 0 0 0.2rem var(--theme-b-sd-primary);
}

.btn-primary.disabled,
.btn-primary:disabled {
	border-color: var(--theme-b-bg-primary);
	background-color: var(--theme-b-bg-primary);
	color: var(--theme-b-tx-primary);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
	border-color: var(--theme-b-bd-primary-active);
	background-color: var(--theme-b-bg-primary-active);
	color: var(--theme-b-tx-primary-active);
}

.form-control:focus {
	border-color: var(--theme-color-primary);
	box-shadow: 0 0 0 0.2rem var(--theme-b-sd-primary);
}

a,
.btn-link {
	color: var(--theme-b-link);
}

a:hover,
.btn-link:hover {
	color: var(--theme-b-link-hover);
}

.g-font-size-15 {
	font-size: 15px;
}

.g-font-size-17 {
	font-size: 17px;
}

.g-font-size-20 {
	font-size: 20px;
}

.text-primary {
	color: var(--primary) !important;
}

.bg-primary {
	background: var(--primary) !important;
}

.border-primary {
	border-color: var(--primary) !important;
}


/* =========================
   MITINO367 DESIGN SYSTEM
========================= */

:root {
	--bg-main: #050505;
	--bg-secondary: #101010;
	--bg-card: #171717;
	--bg-hover: #1f1f1f;

	--text-main: #f2eadf;
	--text-secondary: #b7afa4;
	--text-muted: #7d766d;

	--accent: var(--m367-accent-strong);
	--accent-hover: #dd5a42;
	--accent-rgb: 196, 73, 50;
	--icon-accent: var(--accent);

	--border-main: #2b2b2b;
	--border-soft: #1b1b1b;
	--glow-soft: rgba(var(--accent-rgb), .22);

	--menu-bg: rgba(10, 10, 10, .92);
	--card-bg: rgba(255, 255, 255, .045);
	--card-border: rgba(var(--accent-rgb), .52);
	--card-border-hover: rgba(var(--accent-rgb), .85);
	--card-shadow: 0 0 18px rgba(var(--accent-rgb), .14);
	--card-shadow-hover: 0 0 24px rgba(var(--accent-rgb), .22);
}

.bx-theme-green,
.bx-green {
	--primary: var(--accent);
	--theme-color-primary: var(--accent);
	--theme-color-second: var(--accent-hover);
	--theme-color-light: var(--bg-hover);

	--theme-b-link: var(--accent);
	--theme-b-link-hover: var(--accent-hover);

	--theme-b-tx-primary: #fff;
	--theme-b-bg-primary: var(--accent);
	--theme-b-bd-primary: var(--accent);
	--theme-b-sd-primary: var(--glow-soft);

	--theme-b-tx-primary-hover: #fff;
	--theme-b-bg-primary-hover: var(--accent-hover);
	--theme-b-bd-primary-hover: var(--accent-hover);

	--theme-b-tx-primary-active: #fff;
	--theme-b-bg-primary-active: var(--accent-hover);
	--theme-b-bd-primary-active: var(--accent-hover);
}

body {
	background: var(--bg-main) !important;
}

a {
	color: var(--accent);
}

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

.btn-primary,
.btn.btn-primary,
button.btn-primary {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover {
	background: var(--accent-hover) !important;
	border-color: var(--accent-hover) !important;
}

input[type="text"],
.form-control {
	background: #181818 !important;
	border: 1px solid rgba(255, 255, 255, .08) !important;
	color: #fff !important;
}

.bg-light {
	background: #171717 !important;
	color: #ddd !important;
}


/* =========================
   MITINO367 HEADER
========================= */

.bx-header {
	background: var(--bg-main) !important;
}

.bx-header-section {
	background: var(--bg-secondary) !important;
	padding-top: 22px !important;
	padding-bottom: 22px !important;
	border-bottom: 1px solid var(--border-soft) !important;
}

body .bx-header-section.container {
	width: 100% !important;
	max-width: 1400px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
}

.mitino-header-row {
	display: grid !important;
	grid-template-columns: 330px minmax(390px, 1fr) 370px !important;
	column-gap: 20px !important;
	align-items: center !important;
	position: relative !important;
}

.mitino-header-row .bx-header-logo,
.mitino-header-row .bx-header-contact,
.mitino-header-row .bx-header-personal {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.mitino-header-row .bx-header-logo {
	grid-column: 1 !important;
	order: 1 !important;
}

.mitino-header-row .bx-header-contact {
	grid-column: 2 !important;
	order: 2 !important;
}

.mitino-header-row .bx-header-personal {
	grid-column: 3 !important;
	order: 3 !important;
	width: 370px !important;
	min-width: 370px !important;
	max-width: 370px !important;
	justify-self: end !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	opacity: 1 !important;
}

.mitino-header-row .bx-header-contact > .d-flex {
	justify-content: center !important;
	gap: 28px !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
}

.mitino-logo {
	display: flex;
	align-items: center;
	line-height: 1;
	text-decoration: none !important;
}

.mitino-logo-title {
	font-family: Arial, sans-serif;
	font-size: 46px;
	font-weight: var(--m367-font-weight-strong);
	letter-spacing: .035em;
	color: var(--text-main);
	text-transform: uppercase;
	white-space: nowrap;
	position: relative;
	padding-bottom: 6px;
	text-shadow: 0 0 18px var(--glow-soft);
}

.mitino-logo-title span {
	color: var(--accent);
}

.mitino-logo-title:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: var(--accent);
}

.bx-header-phone-block {
	display: flex !important;
	align-items: center !important;
}

.mitino-phones {
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: 1.05;
}

.mitino-phones a {
	color: var(--text-main) !important;
	font-size: 22px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	letter-spacing: .02em;
	text-decoration: none !important;
	white-space: nowrap;
}

.bx-header-phone-icon {
	display: block !important;
	width: 30px !important;
	height: 30px !important;
	margin-right: 12px !important;
	background-color: var(--icon-accent) !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	opacity: 1 !important;
	filter: none !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2A19.8 19.8 0 0 1 3.11 5.18 2 2 0 0 1 5.1 3h3a2 2 0 0 1 2 1.72c.12.9.33 1.77.62 2.6a2 2 0 0 1-.45 2.11L9 10.7a16 16 0 0 0 4.3 4.3l1.27-1.27a2 2 0 0 1 2.11-.45c.83.29 1.7.5 2.6.62A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2A19.8 19.8 0 0 1 3.11 5.18 2 2 0 0 1 5.1 3h3a2 2 0 0 1 2 1.72c.12.9.33 1.77.62 2.6a2 2 0 0 1-.45 2.11L9 10.7a16 16 0 0 0 4.3 4.3l1.27-1.27a2 2 0 0 1 2.11-.45c.83.29 1.7.5 2.6.62A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

.bx-worktime-title {
	display: none !important;
}

.bx-header-worktime {
	position: relative !important;
	padding-left: 44px !important;
	color: var(--text-main) !important;
}

.bx-header-worktime:before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 32px !important;
	height: 32px !important;
	background-color: var(--icon-accent) !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

.mitino-worktime {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.mitino-worktime span:first-child {
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--text-secondary);
	font-weight: var(--m367-font-weight-strong);
	white-space: nowrap !important;
}

.mitino-worktime span:last-child {
	font-size: 19px !important;
	font-weight: var(--m367-font-weight-strong);
	color: var(--text-main);
	white-space: nowrap !important;
}

.basket-line {
	width: 370px !important;
	min-width: 370px !important;
	max-width: 370px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	flex-wrap: nowrap !important;
}

.basket-line-block {
	position: relative !important;
	width: 172px !important;
	min-width: 172px !important;
	max-width: 172px !important;
	height: 72px !important;
	box-sizing: border-box !important;
	display: grid !important;
	grid-template-columns: 38px 1fr !important;
	grid-template-rows: 26px 18px !important;
	align-content: center !important;
	align-items: center !important;
	column-gap: 12px !important;
	row-gap: 2px !important;
	padding: 10px 14px 10px 16px !important;
	border: 1px solid var(--card-border) !important;
	border-radius: 14px !important;
	background: var(--card-bg) !important;
	box-shadow: var(--card-shadow) !important;
	color: var(--text-secondary) !important;
	line-height: 1.15 !important;
}

.basket-line-block:hover {
	border-color: var(--card-border-hover) !important;
	box-shadow: var(--card-shadow-hover) !important;
}

.basket-line-block:before {
	content: "" !important;
	display: block !important;
	grid-column: 1 !important;
	grid-row: 1 / 3 !important;
	width: 30px !important;
	height: 30px !important;
	align-self: center !important;
	justify-self: center !important;
	background-color: var(--icon-accent) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
}

.basket-line-block:first-child:before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

.basket-line-block:last-child:before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h8.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h8.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

.basket-line-block-icon-profile,
.basket-line-block-icon-cart,
.basket-line-block-icon-profile:before,
.basket-line-block-icon-profile:after,
.basket-line-block-icon-cart:before,
.basket-line-block-icon-cart:after {
	background: none !important;
	background-image: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
	content: none !important;
}

.basket-line-block a {
	grid-column: 2 !important;
	grid-row: 1 !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	align-self: center !important;
	color: var(--text-main) !important;
	font-size: 18px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	line-height: 26px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	transform: none !important;
}

.basket-line-block a + a,
.basket-line-block span {
	grid-column: 2 !important;
	grid-row: 2 !important;
	display: block !important;
	margin-top: 0 !important;
	align-self: center !important;
	color: var(--text-secondary) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 18px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}


/* =========================
   MITINO367 MENU
========================= */

.bx-top-nav-container,
.bx-top-nav-container .bx-nav-list-1-lvl,
.bx-top-nav-container .bx-nav-1-lvl,
.bx-top-nav-container .bx-nav-1-lvl > a {
	background: var(--menu-bg) !important;
	color: var(--text-main) !important;
}

.bx-top-nav-container {
	border: 1px solid var(--border-main) !important;
	box-shadow: 0 12px 35px rgba(0, 0, 0, .35);
}

.bx-nav-1-lvl-link-text {
	color: var(--text-main) !important;
}

.bx-nav-1-lvl:hover,
.bx-nav-1-lvl.bx-hover {
	background: rgba(var(--accent-rgb), .12) !important;
}

.bx-nav-1-lvl:hover .bx-nav-1-lvl-link-text,
.bx-nav-1-lvl.bx-hover .bx-nav-1-lvl-link-text {
	color: var(--text-main) !important;
}


/* =========================
   MITINO367 COMMON UI
========================= */

.mitino-section-label {
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important;
	margin-bottom: 16px !important;
	padding: 7px 12px !important;
	border: 1px solid rgba(var(--accent-rgb), .45) !important;
	border-radius: 999px !important;
	background: rgba(var(--accent-rgb), .08) !important;
	color: var(--accent) !important;
	font-size: 12px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
}

.mitino-section-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 20px !important;
	margin-bottom: 14px !important;
}

.mitino-section-head h2,
.mitino-why h2 {
	margin: 0 !important;
	color: var(--text-main) !important;
	font-size: 24px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	letter-spacing: .03em !important;
}

.mitino-section-link {
	color: var(--accent) !important;
	font-weight: var(--m367-font-weight-strong) !important;
	text-decoration: none !important;
}

.mitino-section-link:after {
	content: " →";
}

.mitino-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 50px !important;
	padding: 0 24px !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	text-decoration: none !important;
	transition: .2s ease !important;
}

.mitino-btn--primary {
	background: var(--accent) !important;
	border: 1px solid var(--accent) !important;
	color: #fff !important;
	box-shadow: 0 0 26px var(--glow-soft) !important;
}

.mitino-btn--primary:hover {
	background: var(--accent-hover) !important;
	border-color: var(--accent-hover) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

.mitino-btn--secondary {
	border: 1px solid rgba(var(--accent-rgb), .45) !important;
	background: rgba(255, 255, 255, .03) !important;
	color: var(--text-main) !important;
}

.mitino-btn--secondary:hover {
	background: rgba(var(--accent-rgb), .12) !important;
	color: #fff !important;
}


/* =========================
   MITINO367 HOME PAGE
========================= */

.mitino-home-page {
	width: 100% !important;
	max-width: 100% !important;
	background: var(--bg-main) !important;
	padding: 0 0 56px !important;
}

.mitino-home-page h1,
.mitino-home-page h2,
.mitino-home-page h3,
.mitino-home-page h4,
.mitino-home-page strong {
	color: var(--text-main) !important;
}

.mitino-home-page p {
	color: var(--text-secondary) !important;
}

.mitino-home-page a {
	text-decoration: none;
}

body:has(.mitino-home-page) .sidebar,
body:has(.mitino-home-page) .bx-sidebar,
body:has(.mitino-home-page) .col-md-3.sidebar,
body:has(.mitino-home-page) .col-sm-4.sidebar,
body:has(.mitino-home-page) .col-md-3.col-sm-4.sidebar {
	display: none !important;
}

body:has(.mitino-home-page) .bx-content,
body:has(.mitino-home-page) .col-md-9.bx-content,
body:has(.mitino-home-page) .col-sm-8.bx-content {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body:has(.mitino-home-page) .bx-content-section,
body:has(.mitino-home-page) .bx-content-section.container {
	background: var(--bg-main) !important;
	width: 100% !important;
	max-width: 1400px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
}

body:has(.mitino-home-page) .bx-content-section > .row {
	display: block !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* Home search */

.mitino-home-search {
	margin-top: -18px !important;
	margin-bottom: 22px !important;
}

.mitino-home-search__form {
	display: grid !important;
	grid-template-columns: 1fr 120px !important;
	gap: 0 !important;
	width: 100% !important;
	height: 48px !important;
	border: 1px solid rgba(255, 255, 255, .11) !important;
	border-radius: 13px !important;
	background: rgba(255, 255, 255, .025) !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .22) !important;
	overflow: hidden !important;
}

.mitino-home-search__form input {
	width: 100% !important;
	height: 48px !important;
	min-height: 48px !important;
	padding: 0 22px 0 56px !important;
	border: 0 !important;
	outline: none !important;
	background-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23c44932' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: 22px 50% !important;
	background-size: 22px 22px !important;
	color: var(--text-main) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
}

.mitino-home-search__form input::placeholder {
	color: rgba(242, 234, 223, .52) !important;
}

.mitino-home-search__form button {
	height: 48px !important;
	min-width: 120px !important;
	padding: 0 22px !important;
	border: 0 !important;
	border-radius: 0 13px 13px 0 !important;
	background: var(--accent) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	cursor: pointer !important;
	transition: .2s ease !important;
}

.mitino-home-search__form button:hover {
	background: var(--accent-hover) !important;
}


/* Home hero v2 */

.mitino-hero-v2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 34px;
	min-height: 430px;
	margin-bottom: 24px !important;
	padding: 42px;
	border: 1px solid rgba(var(--accent-rgb), .32);
	border-radius: 24px;
	background:
		radial-gradient(circle at 72% 36%, rgba(var(--accent-rgb), .24), transparent 34%),
		linear-gradient(135deg, #111 0%, #050505 72%);
	box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
	overflow: hidden;
	position: relative;
}

.mitino-hero-v2:before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
	background-size: 34px 34px;
	opacity: .45;
	pointer-events: none;
}

.mitino-hero-v2__content,
.mitino-hero-v2__visual {
	position: relative;
	z-index: 2;
}

.mitino-hero-v2__title {
	margin: 0;
	color: var(--text-main);
	font-size: 46px !important;
	font-weight: var(--m367-font-weight-strong);
	line-height: 1.08 !important;
	letter-spacing: .01em !important;
}

.mitino-hero-v2__title span {
	color: var(--accent);
}

.mitino-hero-v2__text {
	max-width: 620px !important;
	margin: 22px 0 0;
	color: var(--text-secondary);
	font-size: 17px !important;
	line-height: 1.55 !important;
}

.mitino-hero-v2__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 30px;
}

.mitino-hero-v2__visual {
	display: flex !important;
	align-items: stretch !important;
	justify-content: stretch !important;
	width: 100% !important;
	min-width: 0 !important;
}

.mitino-hero-v2__image-panel--real {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 330px !important;
	border-radius: 22px !important;
	overflow: hidden !important;
	background: #101010 !important;
	border: 1px solid rgba(var(--accent-rgb), .30) !important;
	box-shadow:
		inset 0 0 24px rgba(0, 0, 0, .18),
		0 18px 60px rgba(0, 0, 0, .30) !important;
}

.mitino-hero-v2__image-panel--real img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 330px !important;
	object-fit: cover !important;
	object-position: center center !important;
	filter: brightness(1.12) contrast(1.04) saturate(1.06) !important;
}

.mitino-hero-v2__image-panel--real:before,
.mitino-hero-v2__image-panel--real:after {
	content: none !important;
	display: none !important;
}


/* Popular tasks */

.mitino-tasks,
.mitino-solutions,
.mitino-products,
.mitino-why,
.mitino-articles {
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 20px;
	background: rgba(255, 255, 255, .02);
	margin-bottom: 24px;
}

.mitino-tasks__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}

.mitino-task-card {
	min-height: 190px;
	padding: 16px 16px 18px !important;
	border: 1px solid rgba(var(--accent-rgb), .26);
	border-radius: 16px;
	background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
	color: var(--text-main) !important;
	text-decoration: none !important;
	transition: .2s ease;
}

.mitino-task-card:hover {
	border-color: rgba(var(--accent-rgb), .75);
	box-shadow: 0 0 26px rgba(var(--accent-rgb), .16);
	transform: translateY(-2px);
}

.mitino-task-card__visual {
	height: 118px !important;
	margin-bottom: 18px !important;
	border: 1px solid rgba(255, 255, 255, .06) !important;
	border-radius: 14px !important;
	background:
		radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), .32), transparent 38%),
		linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
	background-size: cover !important;
	background-position: center center !important;
	box-shadow: inset 0 -40px 60px rgba(0, 0, 0, .45);
}

.mitino-task-card__visual--router {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/router-home.webp") !important;
}

.mitino-task-card__visual--dacha {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/internet-dacha.webp") !important;
}

.mitino-task-card__visual--pc {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/pc-build.webp") !important;
}

.mitino-task-card__visual--camera {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/video-security.webp") !important;
}

.mitino-task-card__visual--smart {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/smart-home.webp") !important;
}

.mitino-task-card__visual--ups {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/ups-power.webp") !important;
}

.mitino-task-card strong {
	display: block;
	font-size: 18px !important;
	font-weight: var(--m367-font-weight-strong);
	line-height: 1.22 !important;
	margin-bottom: 10px !important;
}

.mitino-task-card p {
	margin: 8px 0 14px;
	color: rgba(242, 234, 223, .78) !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
}

.mitino-task-card span {
	display: inline-flex !important;
	margin-top: 4px !important;
	color: var(--accent);
	font-size: 14px !important;
	font-weight: var(--m367-font-weight-strong);
}

.mitino-task-card span:after {
	content: " →";
}


/* Promo */

.mitino-promo {
	display: grid;
	grid-template-columns: 1.45fr .75fr;
	gap: 16px;
	margin-bottom: 24px;
}

.mitino-promo__main {
	min-height: 250px;
	padding: 34px;
	border: 1px solid rgba(var(--accent-rgb), .38);
	border-radius: 20px;
	background:
		radial-gradient(circle at 70% 35%, rgba(var(--accent-rgb), .26), transparent 32%),
		linear-gradient(135deg, rgba(var(--accent-rgb), .12), rgba(255, 255, 255, .025));
}

.mitino-promo__main h2 {
	margin: 0;
	color: var(--text-main);
	font-size: 34px;
	font-weight: var(--m367-font-weight-strong);
}

.mitino-promo__main p {
	max-width: 560px;
	margin: 16px 0 24px;
	color: var(--text-secondary);
	font-size: 16px;
	line-height: 1.5;
}

.mitino-promo__side {
	display: grid;
	gap: 12px;
}

.mitino-promo-mini {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 75px;
	padding: 18px;
	border: 1px solid rgba(var(--accent-rgb), .26);
	border-radius: 16px;
	background: rgba(255, 255, 255, .035);
	text-decoration: none !important;
}

.mitino-promo-mini strong {
	color: var(--text-main);
	font-size: 17px;
	font-weight: var(--m367-font-weight-strong);
}

.mitino-promo-mini span {
	margin-top: 5px;
	color: var(--text-secondary);
	font-size: 13px;
}


/* Solutions */

.mitino-solutions__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.mitino-solution-card {
	min-height: 150px;
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 16px;
	background: rgba(255, 255, 255, .035);
	color: var(--text-main) !important;
	text-decoration: none !important;
	transition: .2s ease;
}

.mitino-solution-card:hover {
	border-color: rgba(var(--accent-rgb), .65);
	transform: translateY(-2px);
}

.mitino-solution-card__image {
	height: 58px;
	margin-bottom: 12px;
	border-radius: 12px;
	background:
		radial-gradient(circle at 60% 45%, rgba(var(--accent-rgb), .28), transparent 38%),
		rgba(255, 255, 255, .035);
}

.mitino-solution-card strong {
	display: block;
	font-size: 17px;
	font-weight: var(--m367-font-weight-strong);
}

.mitino-solution-card p {
	margin: 8px 0 12px;
	color: var(--text-secondary);
	font-size: 13px;
}

.mitino-solution-card span {
	color: var(--accent);
	font-weight: var(--m367-font-weight-strong);
	font-size: 13px;
}


/* Products */

.mitino-products__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}

.mitino-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 285px;
	padding: 16px;
	border: 1px solid rgba(var(--accent-rgb), .24);
	border-radius: 16px;
	background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
	color: var(--text-main) !important;
	text-decoration: none !important;
}

.mitino-product-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	font-weight: var(--m367-font-weight-strong);
}

.mitino-product-card__image {
	height: 105px;
	margin-bottom: 14px;
	border-radius: 12px;
	background:
		radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), .26), transparent 38%),
		rgba(255, 255, 255, .04);
}

.mitino-product-card strong {
	display: block;
	font-size: 15px;
	font-weight: var(--m367-font-weight-strong);
	line-height: 1.25;
}

.mitino-product-card p {
	margin: 8px 0 12px;
	color: var(--text-secondary);
	font-size: 12px;
	line-height: 1.35;
}

.mitino-product-card__bottom {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.mitino-product-card__bottom span {
	color: var(--text-main);
	font-size: 18px;
	font-weight: var(--m367-font-weight-strong);
}

.mitino-product-card__bottom b {
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font-size: 12px;
}


/* Why */

.mitino-why__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin-top: 16px;
}

.mitino-why-card {
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 16px;
	background: rgba(255, 255, 255, .035);
}

.mitino-why-card strong {
	display: block;
	color: var(--text-main);
	font-size: 15px;
	font-weight: var(--m367-font-weight-strong);
}

.mitino-why-card p {
	margin: 8px 0 0;
	color: var(--text-secondary);
	font-size: 12px;
	line-height: 1.35;
}


/* Articles */

.mitino-articles__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.mitino-article-card {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 14px;
	padding: 14px;
	border: 1px solid rgba(var(--accent-rgb), .20);
	border-radius: 16px;
	background: rgba(255, 255, 255, .035);
	color: var(--text-main) !important;
	text-decoration: none !important;
}

.mitino-article-card__image {
	min-height: 96px;
	border-radius: 12px;
	background:
		radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), .28), transparent 40%),
		rgba(255, 255, 255, .04);
}

.mitino-article-card span {
	color: var(--accent);
	font-size: 11px;
	font-weight: var(--m367-font-weight-strong);
	text-transform: uppercase;
}

.mitino-article-card strong {
	display: block;
	margin-top: 5px;
	font-size: 15px;
	font-weight: var(--m367-font-weight-strong);
}

.mitino-article-card p {
	margin: 7px 0;
	color: var(--text-secondary);
	font-size: 12px;
	line-height: 1.35;
}

.mitino-article-card b {
	color: var(--accent);
	font-size: 12px;
}


/* CTA */

.mitino-cta {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 24px;
	padding: 34px;
	border: 1px solid rgba(var(--accent-rgb), .36);
	border-radius: 22px;
	background:
		radial-gradient(circle at 70% 50%, rgba(var(--accent-rgb), .18), transparent 34%),
		linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
}

.mitino-cta h2 {
	margin: 0;
	color: var(--text-main);
	font-size: 32px;
	font-weight: var(--m367-font-weight-strong);
}

.mitino-cta p {
	max-width: 620px;
	margin: 12px 0 24px;
	color: var(--text-secondary);
	font-size: 16px;
	line-height: 1.5;
}

.mitino-cta__contacts {
	display: grid;
	gap: 16px;
}

.mitino-cta__contacts div {
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 16px;
	background: rgba(0, 0, 0, .24);
}

.mitino-cta__contacts strong {
	display: block;
	color: var(--text-main);
	font-size: 16px;
	font-weight: var(--m367-font-weight-strong);
}

.mitino-cta__contacts span {
	display: block;
	margin-top: 5px;
	color: var(--text-secondary);
	font-size: 14px;
}


/* =========================
   MITINO367 TASKS PAGE
========================= */

body:has(.mitino-tasks-page) .sidebar,
body:has(.mitino-tasks-page) .bx-sidebar,
body:has(.mitino-tasks-page) .col-md-3.sidebar,
body:has(.mitino-tasks-page) .col-sm-4.sidebar,
body:has(.mitino-tasks-page) .col-md-3.col-sm-4.sidebar,
body:has(.mitino-tasks-page) .breadcrumb,
body:has(.mitino-tasks-page) .bx-breadcrumb,
body:has(.mitino-tasks-page) .breadcrumb-wrapper,
body:has(.mitino-tasks-page) .bx-breadcrumb-item,
body:has(.mitino-tasks-page) nav[aria-label="breadcrumb"],
body:has(.mitino-tasks-page) #pagetitle,
body:has(.mitino-tasks-page) .mitino-home-search,
body:has(.mitino-tasks-page) .bx-searchtitle,
body:has(.mitino-tasks-page) .bx-searchtitle-form,
body:has(.mitino-tasks-page) .search-title {
	display: none !important;
}

body:has(.mitino-tasks-page) .bx-content,
body:has(.mitino-tasks-page) .col-md-9.bx-content,
body:has(.mitino-tasks-page) .col-sm-8.bx-content {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body:has(.mitino-tasks-page) .bx-header-section {
	background: var(--bg-main) !important;
	padding-bottom: 14px !important;
}

body:has(.mitino-tasks-page) .bx-content-section,
body:has(.mitino-tasks-page) .bx-content-section.container {
	background: var(--bg-main) !important;
	width: 100% !important;
	max-width: 1400px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	padding-top: 0 !important;
}

body:has(.mitino-tasks-page) .bx-content-section > .row {
	display: block !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.mitino-tasks-page {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: 0 0 56px !important;
	background: var(--bg-main) !important;
	color: var(--text-main) !important;
}

.mitino-tasks-hero {
	position: relative !important;
	margin: -24px 0 24px !important;
	padding: 52px 44px !important;
	border: 1px solid rgba(var(--accent-rgb), .32) !important;
	border-radius: 24px !important;
	background:
		radial-gradient(circle at 72% 34%, rgba(var(--accent-rgb), .22), transparent 34%),
		linear-gradient(135deg, #111 0%, #050505 72%) !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
	overflow: hidden !important;
}

.mitino-tasks-hero:before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background:
		linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) !important;
	background-size: 34px 34px !important;
	opacity: .45 !important;
	pointer-events: none !important;
}

.mitino-tasks-hero > * {
	position: relative !important;
	z-index: 2 !important;
}

.mitino-tasks-hero h1 {
	max-width: 860px !important;
	margin: 0 !important;
	color: var(--text-main) !important;
	font-size: 62px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	line-height: 1.02 !important;
	letter-spacing: .01em !important;
}

.mitino-tasks-hero h1 span {
	color: var(--accent) !important;
}

.mitino-tasks-hero p {
	max-width: 860px !important;
	margin: 22px 0 0 !important;
	color: var(--text-secondary) !important;
	font-size: 19px !important;
	line-height: 1.55 !important;
}

.mitino-tasks-title-one-line {
	white-space: nowrap !important;
	font-size: 58px !important;
	line-height: 1.05 !important;
}

.mitino-tasks-title-one-line span {
	color: var(--accent) !important;
}

.mitino-tasks-hero__actions {
	display: flex !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	margin-top: 30px !important;
}

.mitino-tasks-filter {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 0 0 22px !important;
	padding: 16px !important;
	border: 1px solid rgba(255, 255, 255, .08) !important;
	border-radius: 18px !important;
	background: rgba(255, 255, 255, .025) !important;
}

.mitino-tasks-filter button {
	height: 42px !important;
	padding: 0 16px !important;
	border: 1px solid rgba(var(--accent-rgb), .26) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .035) !important;
	color: var(--text-main) !important;
	font-size: 14px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	cursor: pointer !important;
	transition: .2s ease !important;
}

.mitino-tasks-filter button:hover,
.mitino-tasks-filter button.active {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
}

.mitino-tasks-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
	margin-bottom: 28px !important;
}

.mitino-task-big {
	display: flex !important;
	flex-direction: column !important;
	min-height: 318px !important;
	padding: 18px !important;
	border: 1px solid rgba(var(--accent-rgb), .28) !important;
	border-radius: 18px !important;
	background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)) !important;
	color: var(--text-main) !important;
	text-decoration: none !important;
	transition: .2s ease !important;
	overflow: hidden !important;
}

.mitino-task-big:hover {
	border-color: rgba(var(--accent-rgb), .78) !important;
	box-shadow: 0 0 28px rgba(var(--accent-rgb), .16) !important;
	transform: translateY(-2px) !important;
}

.mitino-task-big__media {
	height: 118px !important;
	margin-bottom: 18px !important;
	border: 1px solid rgba(255, 255, 255, .06) !important;
	border-radius: 14px !important;
	background:
		radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), .30), transparent 40%),
		linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)) !important;
	background-size: cover !important;
	background-position: center center !important;
	overflow: hidden !important;
	box-shadow: inset 0 -40px 60px rgba(0, 0, 0, .42) !important;
}

.mitino-task-big__body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
}

.mitino-task-big__body span {
	display: inline-flex !important;
	margin-bottom: 9px !important;
	color: var(--accent) !important;
	font-size: 11px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
}

.mitino-task-big__body strong {
	display: block !important;
	margin-bottom: 10px !important;
	color: var(--text-main) !important;
	font-size: 20px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	line-height: 1.18 !important;
}

.mitino-task-big__body p {
	margin: 0 0 16px !important;
	color: rgba(242, 234, 223, .78) !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
}

.mitino-task-big__body b {
	margin-top: auto !important;
	color: var(--accent) !important;
	font-size: 14px !important;
	font-weight: var(--m367-font-weight-strong) !important;
}

.mitino-task-big__media--router {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/router-home.webp") !important;
}

.mitino-task-big__media--dacha,
.mitino-task-big__media--bridge {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/internet-dacha.webp") !important;
}

.mitino-task-big__media--pc-build,
.mitino-task-big__media--office-pc,
.mitino-task-big__media--home-pc,
.mitino-task-big__media--gaming-pc,
.mitino-task-big__media--workstation,
.mitino-task-big__media--upgrade {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/pc-build.webp") !important;
}

.mitino-task-big__media--video,
.mitino-task-big__media--dacha-camera,
.mitino-task-big__media--secure-office,
.mitino-task-big__media--access {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/video-security.webp") !important;
}

.mitino-task-big__media--smart {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/smart-home.webp") !important;
}

.mitino-task-big__media--ups,
.mitino-task-big__media--internet-power {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/ups-power.webp") !important;
}

.mitino-task-big__media--wifi-boost,
.mitino-task-big__media--office-wifi,
.mitino-task-big__media--network,
.mitino-task-big__media--workplace,
.mitino-task-big__media--office-equipment,
.mitino-task-big__media--office-moving,
.mitino-task-big__media--selection,
.mitino-task-big__media--urgent {
	background-image:
		radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), .34), transparent 40%),
		linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)) !important;
}

.mitino-tasks-cta {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	padding: 34px !important;
	border: 1px solid rgba(var(--accent-rgb), .36) !important;
	border-radius: 22px !important;
	background:
		radial-gradient(circle at 70% 50%, rgba(var(--accent-rgb), .18), transparent 34%),
		linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important;
}

.mitino-tasks-cta h2 {
	margin: 0 !important;
	color: var(--text-main) !important;
	font-size: 32px !important;
	font-weight: var(--m367-font-weight-strong) !important;
}

.mitino-tasks-cta p {
	max-width: 780px !important;
	margin: 12px 0 0 !important;
	color: var(--text-secondary) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}


/* =========================
   MITINO367 TASK DETAIL PAGE
========================= */

body:has(.mitino-task-detail-page) .sidebar,
body:has(.mitino-task-detail-page) .bx-sidebar,
body:has(.mitino-task-detail-page) .col-md-3.sidebar,
body:has(.mitino-task-detail-page) .col-sm-4.sidebar,
body:has(.mitino-task-detail-page) .col-md-3.col-sm-4.sidebar,
body:has(.mitino-task-detail-page) .breadcrumb,
body:has(.mitino-task-detail-page) .bx-breadcrumb,
body:has(.mitino-task-detail-page) #pagetitle,
body:has(.mitino-task-detail-page) .bx-searchtitle,
body:has(.mitino-task-detail-page) .bx-searchtitle-form,
body:has(.mitino-task-detail-page) .search-title {
	display: none !important;
}

body:has(.mitino-task-detail-page) .bx-content,
body:has(.mitino-task-detail-page) .col-md-9.bx-content,
body:has(.mitino-task-detail-page) .col-sm-8.bx-content {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body:has(.mitino-task-detail-page) .bx-header-section {
	background: var(--bg-main) !important;
	padding-bottom: 10px !important;
}

body:has(.mitino-task-detail-page) .bx-content-section,
body:has(.mitino-task-detail-page) .bx-content-section.container {
	background: var(--bg-main) !important;
	width: 100% !important;
	max-width: 1400px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	padding-top: 0 !important;
}

body:has(.mitino-task-detail-page) .bx-content-section > .row {
	display: block !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.mitino-task-detail-page {
	width: 100% !important;
	background: var(--bg-main) !important;
	color: var(--text-main) !important;
	padding: 0 0 56px !important;
}

.mitino-task-detail-hero {
	display: grid !important;
	grid-template-columns: 1.05fr .95fr !important;
	gap: 34px !important;
	align-items: stretch !important;
	margin: -34px 0 24px !important;
	padding: 42px !important;
	border: 1px solid rgba(var(--accent-rgb), .32) !important;
	border-radius: 24px !important;
	background:
		radial-gradient(circle at 74% 35%, rgba(var(--accent-rgb), .22), transparent 34%),
		linear-gradient(135deg, #111 0%, #050505 72%) !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
	overflow: hidden !important;
	position: relative !important;
}

.mitino-task-detail-hero:before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background:
		linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) !important;
	background-size: 34px 34px !important;
	opacity: .45 !important;
	pointer-events: none !important;
}

.mitino-task-detail-hero > * {
	position: relative !important;
	z-index: 2 !important;
}

.mitino-task-detail-hero h1 {
	margin: 0 !important;
	color: var(--text-main) !important;
	font-size: 58px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	line-height: 1.04 !important;
	letter-spacing: .01em !important;
}

.mitino-task-detail-hero h1 span {
	color: var(--accent) !important;
}

.mitino-task-detail-hero p {
	max-width: 760px !important;
	margin: 22px 0 0 !important;
	color: var(--text-secondary) !important;
	font-size: 18px !important;
	line-height: 1.55 !important;
}

.mitino-task-detail-hero__actions {
	display: flex !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	margin-top: 30px !important;
}

.mitino-task-detail-hero__visual {
	display: flex !important;
	align-items: stretch !important;
	justify-content: stretch !important;
	min-width: 0 !important;
}

.mitino-task-detail-image {
	width: 100% !important;
	min-height: 330px !important;
	border: 1px solid rgba(var(--accent-rgb), .28) !important;
	border-radius: 22px !important;
	background:
		radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), .34), transparent 40%),
		linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)) !important;
	background-size: cover !important;
	background-position: center center !important;
	box-shadow: inset 0 -60px 80px rgba(0, 0, 0, .42) !important;
	overflow: hidden !important;
}

.mitino-task-detail-image--wifi-bridge {
	background-image: url("/bitrix/templates/eshop_bootstrap_v4/images/internet-dacha.webp") !important;
}

.mitino-task-detail-section {
	margin-bottom: 24px !important;
	padding: 26px !important;
	border: 1px solid rgba(255, 255, 255, .08) !important;
	border-radius: 20px !important;
	background: rgba(255, 255, 255, .02) !important;
}

.mitino-task-detail-grid {
	display: grid !important;
	gap: 16px !important;
}

.mitino-task-detail-grid--3 {
	grid-template-columns: repeat(3, 1fr) !important;
}

.mitino-task-detail-grid--4 {
	grid-template-columns: repeat(4, 1fr) !important;
}

.mitino-task-detail-card {
	min-height: 150px !important;
	padding: 20px !important;
	border: 1px solid rgba(var(--accent-rgb), .24) !important;
	border-radius: 16px !important;
	background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)) !important;
}

.mitino-task-detail-card strong {
	display: block !important;
	margin-bottom: 10px !important;
	color: var(--text-main) !important;
	font-size: 19px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	line-height: 1.2 !important;
}

.mitino-task-detail-card p {
	margin: 0 !important;
	color: rgba(242, 234, 223, .78) !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
}

.mitino-task-detail-card b {
	display: inline-flex !important;
	align-items: center !important;
	width: max-content !important;
	max-width: 100% !important;
	margin-top: 16px !important;
	padding: 7px 10px !important;
	border: 1px solid rgba(var(--accent-rgb), .38) !important;
	border-radius: 999px !important;
	background: rgba(var(--accent-rgb), .10) !important;
	color: var(--accent) !important;
	font-size: 12px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	line-height: 1 !important;
	letter-spacing: .02em !important;
}

.mitino-check-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 16px !important;
}

.mitino-check-item {
	padding: 20px !important;
	border: 1px solid rgba(var(--accent-rgb), .24) !important;
	border-radius: 16px !important;
	background: rgba(255, 255, 255, .03) !important;
}

.mitino-check-item span {
	display: inline-flex !important;
	margin-bottom: 12px !important;
	color: var(--accent) !important;
	font-size: 12px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	letter-spacing: .16em !important;
}

.mitino-check-item strong {
	display: block !important;
	margin-bottom: 8px !important;
	color: var(--text-main) !important;
	font-size: 18px !important;
	font-weight: var(--m367-font-weight-strong) !important;
}

.mitino-check-item p {
	margin: 0 !important;
	color: var(--text-secondary) !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
}

.mitino-task-kit {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
}

.mitino-task-kit div {
	padding: 20px !important;
	border: 1px solid rgba(255, 255, 255, .10) !important;
	border-radius: 16px !important;
	background: rgba(255, 255, 255, .035) !important;
}

.mitino-task-kit strong {
	display: block !important;
	margin-bottom: 8px !important;
	color: var(--text-main) !important;
	font-size: 17px !important;
	font-weight: var(--m367-font-weight-strong) !important;
}

.mitino-task-kit p {
	margin: 0 !important;
	color: var(--text-secondary) !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
}

.mitino-task-detail-cta {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	margin-top: 24px !important;
	padding: 34px !important;
	border: 1px solid rgba(var(--accent-rgb), .36) !important;
	border-radius: 22px !important;
	background:
		radial-gradient(circle at 70% 50%, rgba(var(--accent-rgb), .18), transparent 34%),
		linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important;
}

.mitino-task-detail-cta h2 {
	margin: 0 !important;
	color: var(--text-main) !important;
	font-size: 32px !important;
	font-weight: var(--m367-font-weight-strong) !important;
}

.mitino-task-detail-cta p {
	max-width: 760px !important;
	margin: 12px 0 0 !important;
	color: var(--text-secondary) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}

.mitino-task-detail-cta .mitino-btn {
	white-space: nowrap !important;
}


/* =========================
   MITINO367 REQUEST FORM
========================= */

body:has(.mitino-request-page) .sidebar,
body:has(.mitino-request-page) .bx-sidebar,
body:has(.mitino-request-page) .col-md-3.sidebar,
body:has(.mitino-request-page) .col-sm-4.sidebar,
body:has(.mitino-request-page) .col-md-3.col-sm-4.sidebar,
body:has(.mitino-request-page) .breadcrumb,
body:has(.mitino-request-page) .bx-breadcrumb,
body:has(.mitino-request-page) #pagetitle,
body:has(.mitino-request-page) .bx-searchtitle,
body:has(.mitino-request-page) .bx-searchtitle-form,
body:has(.mitino-request-page) .search-title {
	display: none !important;
}

body:has(.mitino-request-page) .bx-content,
body:has(.mitino-request-page) .col-md-9.bx-content,
body:has(.mitino-request-page) .col-sm-8.bx-content {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body:has(.mitino-request-page) .bx-content-section,
body:has(.mitino-request-page) .bx-content-section.container {
	background: var(--bg-main) !important;
	width: 100% !important;
	max-width: 1400px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	padding-top: 0 !important;
}

body:has(.mitino-request-page) .bx-content-section > .row {
	display: block !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.mitino-request-page {
	width: 100% !important;
	background: var(--bg-main) !important;
	color: var(--text-main) !important;
	padding: 0 0 56px !important;
}

.mitino-request-hero {
	margin: 0 0 24px !important;
	padding: 44px !important;
	border: 1px solid rgba(var(--accent-rgb), .32) !important;
	border-radius: 24px !important;
	background:
		radial-gradient(circle at 74% 35%, rgba(var(--accent-rgb), .22), transparent 34%),
		linear-gradient(135deg, #111 0%, #050505 72%) !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
}

.mitino-request-hero h1 {
	max-width: 920px !important;
	margin: 0 !important;
	color: var(--text-main) !important;
	font-size: 56px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	line-height: 1.05 !important;
}

.mitino-request-hero h1 span {
	color: var(--accent) !important;
}

.mitino-request-hero p {
	max-width: 820px !important;
	margin: 20px 0 0 !important;
	color: var(--text-secondary) !important;
	font-size: 18px !important;
	line-height: 1.55 !important;
}

.mitino-request-hero__actions {
	display: flex !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	margin-top: 30px !important;
}

.mitino-hp-field {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.mitino-request-form {
	display: block !important;
}

.mitino-request-section {
	margin-bottom: 18px !important;
	padding: 26px !important;
	border: 1px solid rgba(255, 255, 255, .08) !important;
	border-radius: 20px !important;
	background: rgba(255, 255, 255, .02) !important;
}

.mitino-request-section h2 {
	margin: 0 0 18px !important;
	color: var(--text-main) !important;
	font-size: 26px !important;
	font-weight: var(--m367-font-weight-strong) !important;
}

.mitino-request-options {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 12px !important;
}

.mitino-request-options label {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	min-height: 54px !important;
	padding: 14px 16px !important;
	border: 1px solid rgba(var(--accent-rgb), .24) !important;
	border-radius: 14px !important;
	background: linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)) !important;
	color: var(--text-main) !important;
	font-size: 15px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	cursor: pointer !important;
	transition: .2s ease !important;
}

.mitino-request-options label:hover {
	border-color: rgba(var(--accent-rgb), .72) !important;
	box-shadow: 0 0 24px rgba(var(--accent-rgb), .12) !important;
}

.mitino-request-options input {
	accent-color: var(--accent) !important;
}

.mitino-request-fields {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 14px !important;
}

.mitino-request-fields label {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.mitino-request-fields label.wide {
	grid-column: 1 / -1 !important;
}

.mitino-request-fields span {
	color: var(--text-main) !important;
	font-size: 14px !important;
	font-weight: var(--m367-font-weight-strong) !important;
}

.mitino-request-fields input,
.mitino-request-fields textarea {
	width: 100% !important;
	border: 1px solid rgba(255, 255, 255, .10) !important;
	border-radius: 14px !important;
	background: rgba(255, 255, 255, .035) !important;
	color: var(--text-main) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	outline: none !important;
}

.mitino-request-fields input {
	height: 52px !important;
	padding: 0 16px !important;
}

.mitino-request-fields textarea {
	padding: 14px 16px !important;
	resize: vertical !important;
}

.mitino-request-fields input::placeholder,
.mitino-request-fields textarea::placeholder {
	color: rgba(242, 234, 223, .45) !important;
}

.mitino-request-submit {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	margin-top: 24px !important;
	padding: 34px !important;
	border: 1px solid rgba(var(--accent-rgb), .36) !important;
	border-radius: 22px !important;
	background:
		radial-gradient(circle at 70% 50%, rgba(var(--accent-rgb), .18), transparent 34%),
		linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important;
}

.mitino-request-submit h2 {
	margin: 0 !important;
	color: var(--text-main) !important;
	font-size: 32px !important;
	font-weight: var(--m367-font-weight-strong) !important;
}

.mitino-request-submit p {
	max-width: 760px !important;
	margin: 10px 0 0 !important;
	color: var(--text-secondary) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}


/* =========================
   MITINO367 LEGAL PAGES
========================= */

body:has(.mitino-legal-page) .bx-breadcrumb,
body:has(.mitino-legal-page) .catalog-search,
body:has(.mitino-legal-page) .search-page,
body:has(.mitino-legal-page) .search-form,
body:has(.mitino-legal-page) .right-sidebar,
body:has(.mitino-legal-page) .sidebar,
body:has(.mitino-legal-page) aside,
body:has(.mitino-legal-page) .col-md-3,
body:has(.mitino-legal-page) .col-sm-3,
body:has(.mitino-legal-page) form[action*="/search/"],
body:has(.mitino-legal-page) form[action*="search"],
body:has(.mitino-legal-page) .search,
body:has(.mitino-legal-page) .bx-searchtitle,
body:has(.mitino-legal-page) .header-search,
body:has(.mitino-legal-page) .title-search-result,
body:has(.mitino-legal-page) .search-line,
body:has(.mitino-legal-page) .search-block,
body:has(.mitino-legal-page) .search-wrapper {
	display: none !important;
}

body:has(.mitino-legal-page) .bx-content,
body:has(.mitino-legal-page) .col-md-9,
body:has(.mitino-legal-page) .col-sm-9,
body:has(.mitino-legal-page) .content {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body:has(.mitino-legal-page) .bx-content-section {
	background: transparent !important;
	padding-top: 0 !important;
}

body:has(.mitino-legal-page) .bx-content-section.container {
	background: transparent !important;
	max-width: 1400px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
}

body:has(.mitino-legal-page) .workarea,
body:has(.mitino-legal-page) .bx-wrapper {
	background: #0b0d10 !important;
}

body:has(.mitino-legal-page) #pagetitle,
body:has(.mitino-legal-page) h1:not(.mitino-legal-page h1) {
	display: none !important;
}

.mitino-legal-page {
	padding: 36px 0 72px !important;
	background: linear-gradient(180deg, #0b0d10 0%, #15181d 100%) !important;
	color: #111827 !important;
}

.mitino-legal-page .container {
	max-width: 1040px !important;
	margin: 0 auto !important;
	padding: 40px 56px 48px !important;
	background: #f8fafc !important;
	border-radius: 24px !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .35) !important;
}

.mitino-legal-page h1 {
	margin: 0 0 24px !important;
	font-size: 38px !important;
	line-height: 1.15 !important;
	color: #111827 !important;
}

.mitino-legal-page h2 {
	margin: 38px 0 16px !important;
	font-size: 22px !important;
	line-height: 1.3 !important;
	color: #111827 !important;
}

.mitino-legal-page p {
	margin: 0 0 16px !important;
	font-size: 16px !important;
	line-height: 1.7 !important;
	color: #1f2937 !important;
}

.mitino-legal-page ul {
	margin: 0 0 22px !important;
	padding-left: 22px !important;
}

.mitino-legal-page li {
	margin-bottom: 8px !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: #1f2937 !important;
}

.mitino-legal-page a {
	color: #d94a36 !important;
	text-decoration: none !important;
}

.mitino-legal-page a:hover {
	text-decoration: underline !important;
}

.legal-badge {
	display: inline-flex !important;
	align-items: center !important;
	margin-bottom: 18px !important;
	padding: 8px 14px !important;
	border-radius: 999px !important;
	background: rgba(227, 30, 36, .1) !important;
	color: #d94a36 !important;
	font-size: 12px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
}

.legal-summary {
	margin: 24px 0 34px !important;
	padding: 22px 24px !important;
	border-radius: 18px !important;
	background: #ffffff !important;
	border: 1px solid rgba(227, 30, 36, .16) !important;
	box-shadow: 0 10px 30px rgba(17, 24, 39, .04) !important;
}

.legal-summary h2 {
	margin: 0 0 14px !important;
	font-size: 20px !important;
	line-height: 1.3 !important;
}

.legal-summary ul {
	margin: 0 !important;
	padding-left: 20px !important;
}

.legal-summary li {
	margin-bottom: 8px !important;
}


/* =========================
   MITINO367 FOOTER
========================= */

.mitino-footer {
	background:
		radial-gradient(circle at 20% 0%, rgba(var(--accent-rgb), .10), transparent 30%),
		linear-gradient(180deg, #080808 0%, #030303 100%);
	color: var(--text-main);
	border-top: 1px solid rgba(var(--accent-rgb), .28);
	margin-top: 0;
}

.mitino-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 46px 15px 34px;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr;
	gap: 34px;
}

.mitino-footer__logo {
	display: inline-block;
	color: var(--text-main) !important;
	font-size: 32px;
	font-weight: var(--m367-font-weight-strong);
	letter-spacing: .04em;
	text-decoration: none !important;
	line-height: 1;
}

.mitino-footer__logo span {
	color: var(--accent);
}

.mitino-footer__brand p {
	margin: 16px 0 20px;
	max-width: 330px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.5;
}

.mitino-footer__socials {
	display: flex;
	gap: 10px;
}

.mitino-footer__socials a {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	background: rgba(255, 255, 255, .035);
	color: var(--text-main) !important;
	font-size: 11px;
	font-weight: var(--m367-font-weight-strong);
	text-decoration: none !important;
}

.mitino-footer__socials a:hover {
	border-color: rgba(var(--accent-rgb), .75);
	color: var(--accent) !important;
}

.mitino-footer h4 {
	margin: 0 0 16px;
	color: var(--accent);
	font-size: 15px;
	font-weight: var(--m367-font-weight-strong);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.mitino-footer__subhead {
	margin-top: 22px !important;
}

.mitino-footer__col a,
.mitino-footer__contacts a {
	display: block;
	margin-bottom: 9px;
	color: var(--text-secondary) !important;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none !important;
}

.mitino-footer__col a:hover,
.mitino-footer__contacts a:hover {
	color: var(--accent) !important;
}

.mitino-footer__col a[href="/privacy/"],
.mitino-footer__col a[href="/personal-data-consent/"],
.mitino-footer__col a[href="/offer/"] {
	color: #ffffff !important;
}

.mitino-footer__col a[href="/privacy/"]:hover,
.mitino-footer__col a[href="/personal-data-consent/"]:hover,
.mitino-footer__col a[href="/offer/"]:hover {
	color: #e31e24 !important;
}

.mitino-footer__contacts p {
	margin: 14px 0 0;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.45;
}

.mitino-footer__bottom {
	max-width: 1280px;
	margin: 0 auto;
	padding: 18px 15px 22px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	color: rgba(242, 234, 223, .55);
	font-size: 13px;
}

.mitino-footer__legal {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.mitino-footer__legal a {
	color: rgba(242, 234, 223, .55) !important;
	text-decoration: none !important;
}

.mitino-footer__legal a:hover {
	color: var(--accent) !important;
}


/* =========================
   MITINO367 COOKIE NOTICE
========================= */

.mitino-cookie {
	position: fixed;
	left: 50%;
	right: auto;
	bottom: 32px;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: calc(100% - 48px);
	max-width: 1120px;
	margin: 0 auto;
	padding: 18px 20px;
	border-radius: 18px;
	background: #111827;
	color: #ffffff;
	box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
	font-size: 13px;
	line-height: 1.5;
	transform: translateX(-50%);
}

.mitino-cookie.is-visible {
	display: flex;
}

.mitino-cookie__text {
	max-width: 920px;
}

.mitino-cookie a {
	color: #ffffff !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.mitino-cookie__button {
	flex: 0 0 auto;
	border: 0;
	border-radius: 999px;
	padding: 10px 18px;
	background: #e31e24;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease;
}

.mitino-cookie__button:hover {
	background: #c9161d;
	transform: translateY(-1px);
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1199px) {
	.mitino-header-row {
		grid-template-columns: 1fr !important;
		row-gap: 16px !important;
	}

	.mitino-header-row .bx-header-logo,
	.mitino-header-row .bx-header-contact,
	.mitino-header-row .bx-header-personal {
		grid-column: 1 !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		justify-self: stretch !important;
	}

	.basket-line {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		justify-content: flex-start !important;
	}

	.mitino-tasks__grid,
	.mitino-products__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.mitino-why__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.mitino-articles__grid,
	.mitino-solutions__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mitino-tasks-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 991px) {
	.bx-header-phone-number {
		font: 15px/18px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
		font-weight: var(--ui-font-weight-semi-bold, 600);
	}

	.bx-header-worktime {
		font: 15px/18px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
		font-weight: var(--ui-font-weight-regular, 400);
	}

	.mitino-header-row .bx-header-contact > .d-flex {
		justify-content: flex-start !important;
		flex-wrap: wrap !important;
	}

	.mitino-hero-v2,
	.mitino-promo,
	.mitino-cta,
	.mitino-task-detail-hero {
		grid-template-columns: 1fr !important;
	}

	.mitino-hero-v2__title {
		font-size: 40px !important;
	}

	.mitino-tasks-hero {
		padding: 32px !important;
	}

	.mitino-tasks-hero h1,
	.mitino-tasks-title-one-line {
		white-space: normal !important;
		font-size: 42px !important;
	}

	.mitino-tasks-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.mitino-tasks-cta,
	.mitino-task-detail-cta,
	.mitino-request-submit {
		align-items: flex-start !important;
		flex-direction: column !important;
	}

	.mitino-task-detail-hero {
		padding: 32px !important;
	}

	.mitino-task-detail-hero h1 {
		font-size: 42px !important;
	}

	.mitino-task-detail-grid--3,
	.mitino-task-detail-grid--4,
	.mitino-check-grid,
	.mitino-task-kit {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.mitino-request-hero {
		padding: 32px !important;
	}

	.mitino-request-hero h1 {
		font-size: 42px !important;
	}

	.mitino-request-options {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.mitino-request-fields {
		grid-template-columns: 1fr !important;
	}

	.mitino-footer__inner {
		grid-template-columns: 1fr 1fr;
	}

	.mitino-footer__bottom {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 768px) {
	.mitino-legal-page {
		padding: 24px 0 48px !important;
	}

	.mitino-legal-page .container {
		padding: 28px 20px 34px !important;
		border-radius: 18px !important;
	}

	.mitino-legal-page h1 {
		font-size: 28px !important;
	}

	.mitino-legal-page h2 {
		font-size: 20px !important;
	}

	.mitino-cookie {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		flex-direction: column;
		align-items: flex-start;
		padding: 16px;
		transform: none;
	}

	.mitino-cookie__button {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.bx-logo-block img {
		max-width: 100%;
		max-height: 45px;
		width: auto;
		height: auto;
	}

	.bx-header-logo {
		padding: 5px 50px;
		height: 55px;
		background-color: var(--theme-color-primary);
	}

	.bx-logo-block {
		height: auto;
	}

	body.bx-theme-green .bx-store-logo {
		background: #33b111;
	}
}

@media (max-width: 575px) {
	.mitino-home-search__form {
		grid-template-columns: 1fr !important;
		height: auto !important;
	}

	.mitino-home-search__form input {
		height: 52px !important;
	}

	.mitino-home-search__form button {
		width: 100% !important;
		height: 52px !important;
		border-radius: 0 0 14px 14px !important;
	}

	.mitino-hero-v2 {
		padding: 26px;
	}

	.mitino-tasks__grid,
	.mitino-products__grid,
	.mitino-why__grid,
	.mitino-articles__grid,
	.mitino-solutions__grid {
		grid-template-columns: 1fr;
	}

	.mitino-tasks-hero {
		padding: 26px !important;
		border-radius: 20px !important;
	}

	.mitino-tasks-hero h1,
	.mitino-tasks-title-one-line {
		font-size: 34px !important;
	}

	.mitino-tasks-grid {
		grid-template-columns: 1fr !important;
	}

	.mitino-tasks-filter {
		gap: 8px !important;
	}

	.mitino-tasks-filter button {
		height: 38px !important;
		padding: 0 12px !important;
		font-size: 13px !important;
	}

	.mitino-tasks-cta {
		padding: 26px !important;
	}

	.mitino-task-detail-hero {
		padding: 26px !important;
		border-radius: 20px !important;
	}

	.mitino-task-detail-hero h1 {
		font-size: 34px !important;
	}

	.mitino-task-detail-grid--3,
	.mitino-task-detail-grid--4,
	.mitino-check-grid,
	.mitino-task-kit {
		grid-template-columns: 1fr !important;
	}

	.mitino-request-hero {
		padding: 26px !important;
		border-radius: 20px !important;
	}

	.mitino-request-hero h1 {
		font-size: 34px !important;
	}

	.mitino-request-options {
		grid-template-columns: 1fr !important;
	}

	.mitino-footer__inner {
		grid-template-columns: 1fr;
	}

	.mitino-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}
/* =========================
   MITINO367 — CONSENT CHECKBOXES FINAL
========================= */

.mitino-request-section--consent {
	padding: 24px !important;
}

.mitino-request-section--consent h2 {
	margin-bottom: 18px !important;
	font-size: 24px !important;
}

.mitino-consent-box {
	display: grid !important;
	gap: 12px !important;
	margin-top: 0 !important;
}

.mitino-consent-check {
	display: grid !important;
	grid-template-columns: 22px 1fr !important;
	gap: 12px !important;
	align-items: flex-start !important;
	padding: 15px 16px !important;
	border: 1px solid rgba(var(--accent-rgb), .24) !important;
	border-radius: 14px !important;
	background: rgba(255, 255, 255, .025) !important;
	color: var(--text-secondary) !important;
	cursor: pointer !important;
	transition: border-color .18s ease, background .18s ease !important;
}

.mitino-consent-check:hover {
	border-color: rgba(var(--accent-rgb), .45) !important;
	background: rgba(255, 255, 255, .04) !important;
}

.mitino-consent-check input {
	width: 18px !important;
	height: 18px !important;
	margin: 3px 0 0 !important;
	accent-color: var(--accent) !important;
	cursor: pointer !important;
}

.mitino-consent-check span {
	display: block !important;
	color: rgba(242, 234, 223, .82) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	font-weight: var(--m367-font-weight-regular) !important;
}

.mitino-consent-check a {
	color: #e46a55 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.mitino-consent-check a:hover {
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}

.mitino-consent-check--optional {
	border-color: rgba(255, 255, 255, .10) !important;
	background: rgba(255, 255, 255, .018) !important;
}

.mitino-consent-check--optional span {
	color: rgba(242, 234, 223, .66) !important;
	font-size: 13px !important;
	font-weight: var(--m367-font-weight-regular) !important;
}

.mitino-consent-check--optional a {
	color: var(--accent) !important;
}
/* =========================
   MITINO367 — REQUEST HERO LABEL POLISH
   Плашка "МИТИНО367 · Анкета подбора"
========================= */

.mitino-request-hero .mitino-section-label {
	font-size: 13px !important;
	font-weight: var(--m367-font-weight-strong) !important;
	letter-spacing: .12em !important;
	padding: 9px 15px !important;
	margin-bottom: 20px !important;
	border-radius: 999px !important;
	border-color: rgba(var(--accent-rgb), .52) !important;
	background: rgba(var(--accent-rgb), .12) !important;
	color: var(--accent) !important;
	box-shadow: 0 0 18px rgba(var(--accent-rgb), .10) !important;
}
/* =========================
   MITINO367 — REQUEST PAGE HERO TOP FIX
   Поднимаем hero формы ближе к меню
========================= */

body:has(.mitino-request-page) .bx-header-section {
	background: var(--bg-main) !important;
	padding-bottom: 10px !important;
}

body:has(.mitino-request-page) .bx-content-section {
	background: var(--bg-main) !important;
	padding-top: 0 !important;
}

body:has(.mitino-request-page) .bx-content-section.container {
	background: var(--bg-main) !important;
}

body:has(.mitino-request-page) .mitino-request-page {
	padding-top: 0 !important;
}

body:has(.mitino-request-page) .mitino-request-hero {
	margin-top: -34px !important;
}
/* =========================
   MITINO367 — MOBILE STABLE TOP
   Без бургера. Рабочий мобильный верх.
========================= */

@media (max-width: 767px) {

	body,
	body .bx-wrapper,
	body .workarea,
	body .bx-content-section,
	body .bx-header,
	body .bx-header-section {
		background: #050505 !important;
	}

	body .bx-header-section.container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 0 14px !important;
		border-bottom: 1px solid rgba(255,255,255,.08) !important;
	}

	body .mitino-desktop-header,
	body .mitino-desktop-menu,
	body .mitino-desktop-header.mitino-header-row,
	body .mitino-desktop-header .bx-header-logo,
	body .mitino-desktop-header .bx-header-contact,
	body .mitino-desktop-header .bx-header-personal,
	body .mitino-desktop-menu .bx-top-nav-container,
	body .basket-line {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
	}

	body .mitino-mobile-stable {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body .mitino-mobile-stable__logo {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: calc(100% - 28px) !important;
		max-width: calc(100% - 28px) !important;
		height: 62px !important;
		min-height: 62px !important;
		margin: 0 auto 14px !important;
		padding: 0 18px !important;
		border: 1px solid rgba(196,73,50,.42) !important;
		border-radius: 18px !important;
		background:
			radial-gradient(circle at 78% 50%, rgba(196,73,50,.28), transparent 38%),
			linear-gradient(135deg, #141414 0%, #080808 100%) !important;
		box-shadow: 0 14px 34px rgba(0,0,0,.32) !important;
		color: #f2eadf !important;
		font-size: 31px !important;
		font-weight: var(--m367-font-weight-strong) !important;
		line-height: 1 !important;
		letter-spacing: .035em !important;
		text-decoration: none !important;
		text-transform: uppercase !important;
		white-space: nowrap !important;
	}

	body .mitino-mobile-stable__logo span {
		color: var(--m367-accent-strong) !important;
	}

	body .mitino-mobile-stable__contacts {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
		width: calc(100% - 28px) !important;
		max-width: calc(100% - 28px) !important;
		margin: 0 auto 12px !important;
		padding: 0 !important;
	}

	body .mitino-mobile-stable__contact {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		min-height: 54px !important;
		padding: 10px 11px !important;
		border: 1px solid rgba(196,73,50,.32) !important;
		border-radius: 14px !important;
		background: rgba(255,255,255,.025) !important;
		color: #f2eadf !important;
		text-decoration: none !important;
		overflow: hidden !important;
	}

	body .mitino-mobile-stable__contact span {
		display: block !important;
		min-width: 0 !important;
	}

	body .mitino-mobile-stable__contact strong {
		display: block !important;
		color: #f2eadf !important;
		font-size: 14px !important;
		font-style: normal !important;
		font-weight: var(--m367-font-weight-strong) !important;
		line-height: 1.1 !important;
		white-space: nowrap !important;
	}

	body .mitino-mobile-stable__contact em {
		display: block !important;
		margin-bottom: 2px !important;
		color: rgba(242,234,223,.62) !important;
		font-size: 10px !important;
		font-style: normal !important;
		font-weight: var(--m367-font-weight-strong) !important;
		line-height: 1.1 !important;
		letter-spacing: .13em !important;
		white-space: nowrap !important;
	}

	body .mitino-mobile-stable__icon {
		flex: 0 0 auto !important;
		width: 26px !important;
		height: 26px !important;
		background: var(--m367-accent-strong) !important;
	}

	body .mitino-mobile-stable__icon--phone {
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2A19.8 19.8 0 0 1 3.11 5.18 2 2 0 0 1 5.1 3h3a2 2 0 0 1 2 1.72c.12.9.33 1.77.62 2.6a2 2 0 0 1-.45 2.11L9 10.7a16 16 0 0 0 4.3 4.3l1.27-1.27a2 2 0 0 1 2.11-.45c.83.29 1.7.5 2.6.62A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat !important;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2A19.8 19.8 0 0 1 3.11 5.18 2 2 0 0 1 5.1 3h3a2 2 0 0 1 2 1.72c.12.9.33 1.77.62 2.6a2 2 0 0 1-.45 2.11L9 10.7a16 16 0 0 0 4.3 4.3l1.27-1.27a2 2 0 0 1 2.11-.45c.83.29 1.7.5 2.6.62A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat !important;
	}

	body .mitino-mobile-stable__icon--time {
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat !important;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat !important;
	}

	body .mitino-mobile-stable__nav {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 8px !important;
		width: calc(100% - 28px) !important;
		max-width: calc(100% - 28px) !important;
		margin: 0 auto 14px !important;
		padding: 0 !important;
	}

	body .mitino-mobile-stable__nav a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 40px !important;
		padding: 0 8px !important;
		border: 1px solid rgba(196,73,50,.28) !important;
		border-radius: 12px !important;
		background: rgba(255,255,255,.025) !important;
		color: #f2eadf !important;
		font-size: 12px !important;
		font-weight: var(--m367-font-weight-strong) !important;
		line-height: 1.1 !important;
		text-align: center !important;
		text-decoration: none !important;
	}

	body .mitino-mobile-stable__nav a:hover {
		border-color: rgba(196,73,50,.72) !important;
		background: rgba(196,73,50,.12) !important;
		color: #fff !important;
	}
}

/* =========================
   MITINO367 — MOBILE SEARCH STABLE
========================= */

@media (max-width: 575px) {

	html body .mitino-home-search {
		width: calc(100% - 28px) !important;
		max-width: calc(100% - 28px) !important;
		margin: 0 auto 18px !important;
	}

	html body .mitino-home-search__form {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 92px !important;
		width: 100% !important;
		height: 46px !important;
		min-height: 46px !important;
		border-radius: 15px !important;
		overflow: hidden !important;
	}

	html body .mitino-home-search__form input {
		width: 100% !important;
		height: 46px !important;
		min-height: 46px !important;
		padding: 0 10px 0 44px !important;
		background-position: 16px 50% !important;
		background-size: 18px 18px !important;
		font-size: 13px !important;
	}

	html body .mitino-home-search__form button {
		width: 92px !important;
		min-width: 92px !important;
		height: 46px !important;
		min-height: 46px !important;
		padding: 0 10px !important;
		border-radius: 0 !important;
		font-size: 13px !important;
	}
}
/* =========================
   MITINO367 — MOBILE HERO COMPACT
   Уменьшаем hero на мобильной версии
========================= */

@media (max-width: 767px) {

	/* Hero на главной и на /tasks/ */
	.mitino-hero-v2,
	.mitino-tasks-hero,
	.mitino-task-detail-hero,
	.mitino-request-hero {
		margin: 16px 14px 18px !important;
		padding: 26px 22px !important;
		border-radius: 22px !important;
		min-height: auto !important;
	}

	/* Сетка hero на главной — только текст, без растягивания */
	.mitino-hero-v2 {
		display: block !important;
	}

	/* Убираем правую hero-картинку на мобильном, чтобы первый экран был короче */
	.mitino-hero-v2__visual {
		display: none !important;
	}

	/* Маленький бейдж */
	.mitino-section-label {
		margin-bottom: 18px !important;
		padding: 8px 14px !important;
		font-size: 12px !important;
		letter-spacing: .14em !important;
		line-height: 1.1 !important;
	}

	/* Главный заголовок */
	.mitino-hero-v2__title,
	.mitino-tasks-hero h1,
	.mitino-task-detail-hero h1,
	.mitino-request-hero h1 {
		font-size: 38px !important;
		line-height: 1.08 !important;
		letter-spacing: .005em !important;
		margin: 0 !important;
	}

	/* Текст под заголовком */
	.mitino-hero-v2__text,
	.mitino-tasks-hero p,
	.mitino-task-detail-hero p,
	.mitino-request-hero p {
		margin-top: 18px !important;
		font-size: 20px !important;
		line-height: 1.45 !important;
	}

	/* Кнопки */
	.mitino-hero-v2__actions,
	.mitino-tasks-hero__actions,
	.mitino-task-detail-hero__actions,
	.mitino-request-hero__actions {
		margin-top: 24px !important;
		gap: 12px !important;
	}

	.mitino-btn {
		width: 100% !important;
		min-height: 54px !important;
		padding: 0 18px !important;
		border-radius: 14px !important;
		font-size: 17px !important;
	}

	/* Фильтры под hero ближе к экрану */
	.mitino-tasks-filter {
		margin: 16px 14px 18px !important;
		padding: 18px !important;
		border-radius: 20px !important;
	}

	.mitino-tasks-filter button {
		height: 48px !important;
		padding: 0 18px !important;
		font-size: 16px !important;
	}
}

@media (max-width: 390px) {

	.mitino-hero-v2__title,
	.mitino-tasks-hero h1,
	.mitino-task-detail-hero h1,
	.mitino-request-hero h1 {
		font-size: 34px !important;
	}

	.mitino-hero-v2__text,
	.mitino-tasks-hero p,
	.mitino-task-detail-hero p,
	.mitino-request-hero p {
		font-size: 18px !important;
	}
}
/* =========================
   MITINO367 — MOBILE HERO FONT FIX
   Уменьшаем шрифты hero на мобильном
========================= */

@media (max-width: 767px) {

	.mitino-hero-v2,
	.mitino-tasks-hero,
	.mitino-task-detail-hero,
	.mitino-request-hero {
		margin: 14px 14px 18px !important;
		padding: 24px 20px !important;
		border-radius: 20px !important;
	}

	.mitino-hero-v2__title,
	.mitino-tasks-hero h1,
	.mitino-task-detail-hero h1,
	.mitino-request-hero h1 {
		font-size: 32px !important;
		line-height: 1.12 !important;
		letter-spacing: 0 !important;
	}

	.mitino-hero-v2__text,
	.mitino-tasks-hero p,
	.mitino-task-detail-hero p,
	.mitino-request-hero p {
		margin-top: 16px !important;
		font-size: 17px !important;
		line-height: 1.45 !important;
	}

	.mitino-section-label {
		margin-bottom: 16px !important;
		padding: 7px 12px !important;
		font-size: 11px !important;
		letter-spacing: .12em !important;
	}

	.mitino-hero-v2__actions,
	.mitino-tasks-hero__actions,
	.mitino-task-detail-hero__actions,
	.mitino-request-hero__actions {
		margin-top: 22px !important;
	}

	.mitino-btn {
		min-height: 50px !important;
		font-size: 16px !important;
		border-radius: 13px !important;
	}
}

@media (max-width: 390px) {

	.mitino-hero-v2__title,
	.mitino-tasks-hero h1,
	.mitino-task-detail-hero h1,
	.mitino-request-hero h1 {
		font-size: 29px !important;
	}

	.mitino-hero-v2__text,
	.mitino-tasks-hero p,
	.mitino-task-detail-hero p,
	.mitino-request-hero p {
		font-size: 16px !important;
	}
}
/* =========================
   МИТИНО367 — MOBILE HERO TOP POSITION FIX
   Поднимаем hero выше на мобильной версии
========================= */

@media (max-width: 767px) {

	.mitino-hero-v2,
	.mitino-tasks-hero,
	.mitino-task-detail-hero,
	.mitino-request-hero {
		margin-top: 6px !important;
	}

	.mitino-home-page .mitino-hero-v2 {
		margin-top: 8px !important;
	}

	/* уменьшаем нижний отступ блока быстрых кнопок/шапки перед hero */
	.mitino-mobile-quick,
	.mitino-mobile-actions,
	.mitino-mobile-nav,
	.mitino-header-mobile-actions {
		margin-bottom: 8px !important;
	}

	/* если между шапкой и hero есть служебный разделитель */
	.bx-content-section {
		padding-top: 0 !important;
	}
}
/* =========================
   MITINO367 — MOBILE HERO WIDTH ALIGN
   Выравниваем hero по ширине с мобильной шапкой
========================= */

@media (max-width: 767px) {

	.mitino-home-page {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.mitino-hero-v2,
	.mitino-tasks-hero,
	.mitino-task-detail-hero,
	.mitino-request-hero {
		width: calc(100% - 28px) !important;
		max-width: calc(100% - 28px) !important;
		margin-left: 14px !important;
		margin-right: 14px !important;
		box-sizing: border-box !important;
	}

	.mitino-tasks,
	.mitino-promo,
	.mitino-solutions,
	.mitino-products,
	.mitino-why,
	.mitino-articles,
	.mitino-cta {
		width: calc(100% - 20px) !important;
		max-width: calc(100% - 20px) !important;
		margin-left: 10px !important;
		margin-right: 10px !important;
	}
}
/* =========================
   MITINO367 — MOBILE HERO POSITION + WIDTH FINAL
   Поднимаем hero и выравниваем по ширине с мобильной шапкой
========================= */

@media (max-width: 767px) {

	/* Убираем лишний воздух перед hero */
	.mitino-home-page {
		padding-top: 0 !important;
	}

	/* Hero шире и выше */
	.mitino-hero-v2,
	.mitino-tasks-hero,
	.mitino-task-detail-hero,
	.mitino-request-hero {
		width: calc(100% - 8px) !important;
		max-width: calc(100% - 8px) !important;
		margin-left: 4px !important;
		margin-right: 4px !important;
		margin-top: 10px !important;
		margin-bottom: 18px !important;
		box-sizing: border-box !important;
	}

	/* На главной hero ближе к кнопкам Каталог / Все задачи / Заявка / Контакты */
	.mitino-home-page .mitino-hero-v2 {
		margin-top: 8px !important;
	}

	/* Внутренние отступы чуть компактнее */
	.mitino-hero-v2 {
		padding: 24px 20px !important;
		border-radius: 22px !important;
	}

	/* Чтобы hero визуально совпадал с верхними карточками */
	.mitino-hero-v2,
	.mitino-tasks-hero,
	.mitino-task-detail-hero,
	.mitino-request-hero {
		border-radius: 22px !important;
	}
}
/* =========================
   MITINO367 — MOBILE TASKS COMPACT
   Выравниваем и уменьшаем блок задач на мобильном
========================= */

@media (max-width: 767px) {

	/* Блок популярных задач по ширине как hero */
	.mitino-tasks {
		width: calc(100% - 16px) !important;
		max-width: calc(100% - 16px) !important;
		margin: 12px 8px 18px !important;
		padding: 18px 14px !important;
		border-radius: 22px !important;
		box-sizing: border-box !important;
	}

	/* Заголовок блока задач */
	.mitino-tasks .mitino-section-head {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		margin-bottom: 14px !important;
	}

	.mitino-tasks .mitino-section-head h2 {
		display: block !important;
		margin: 0 !important;
		color: var(--text-main) !important;
		font-size: 24px !important;
		line-height: 1.15 !important;
		font-weight: var(--m367-font-weight-strong) !important;
		letter-spacing: .01em !important;
		text-transform: none !important;
	}

	.mitino-tasks .mitino-section-link {
		display: inline-flex !important;
		align-items: center !important;
		color: var(--accent) !important;
		font-size: 14px !important;
		font-weight: var(--m367-font-weight-strong) !important;
		white-space: nowrap !important;
		text-decoration: none !important;
	}

	/* Сетка задач компактнее */
	.mitino-tasks__grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}

	/* Карточки задач меньше */
	.mitino-task-card {
		min-height: 0 !important;
		padding: 12px !important;
		border-radius: 16px !important;
	}

	/* Картинки в карточках ниже */
	.mitino-task-card__visual {
		height: 74px !important;
		margin-bottom: 10px !important;
		border-radius: 12px !important;
	}

	.mitino-task-card strong {
		font-size: 15px !important;
		line-height: 1.18 !important;
		margin-bottom: 6px !important;
	}

	.mitino-task-card p {
		margin: 0 0 8px !important;
		font-size: 12px !important;
		line-height: 1.3 !important;
		color: rgba(242,234,223,.72) !important;
	}

	.mitino-task-card span {
		margin-top: 0 !important;
		font-size: 12px !important;
		line-height: 1.1 !important;
	}

	/* Чтобы блоки ниже тоже не были уже hero */
	.mitino-promo,
	.mitino-solutions,
	.mitino-products,
	.mitino-why,
	.mitino-articles,
	.mitino-cta {
		width: calc(100% - 16px) !important;
		max-width: calc(100% - 16px) !important;
		margin-left: 8px !important;
		margin-right: 8px !important;
		box-sizing: border-box !important;
	}
}

@media (max-width: 390px) {

	.mitino-tasks__grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
	}

	.mitino-task-card {
		padding: 10px !important;
	}

	.mitino-task-card__visual {
		height: 64px !important;
	}

	.mitino-task-card strong {
		font-size: 14px !important;
	}

	.mitino-task-card p {
		font-size: 11px !important;
	}

	.mitino-task-card span {
		font-size: 11px !important;
	}
}
/* =========================
   MITINO367 — MOBILE TASK CARDS FINAL COMPACT
   Делаем задачи компактным навигатором, а не крупными карточками
========================= */

@media (max-width: 767px) {

	.mitino-tasks {
		margin-top: 14px !important;
		padding: 16px 12px !important;
	}

	.mitino-tasks .mitino-section-head {
		margin-bottom: 12px !important;
	}

	.mitino-tasks .mitino-section-head h2 {
		font-size: 30px !important;
		line-height: 1.05 !important;
	}

	.mitino-tasks .mitino-section-link {
		font-size: 15px !important;
	}

	.mitino-tasks__grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}

	.mitino-task-card {
		min-height: 0 !important;
		padding: 10px !important;
		border-radius: 15px !important;
	}

	.mitino-task-card__visual {
		height: 78px !important;
		margin-bottom: 10px !important;
		border-radius: 12px !important;
	}

	.mitino-task-card strong {
		font-size: 17px !important;
		line-height: 1.12 !important;
		margin: 0 0 6px !important;
	}

	.mitino-task-card p {
		font-size: 13px !important;
		line-height: 1.28 !important;
		margin: 0 0 8px !important;
	}

	.mitino-task-card span {
		font-size: 13px !important;
		line-height: 1 !important;
		margin: 0 !important;
	}
}

@media (max-width: 390px) {

	.mitino-tasks .mitino-section-head h2 {
		font-size: 28px !important;
	}

	.mitino-task-card__visual {
		height: 68px !important;
	}

	.mitino-task-card strong {
		font-size: 15px !important;
	}

	.mitino-task-card p {
		font-size: 12px !important;
	}
}
/* =========================
   MITINO367 — MOBILE TASKS BORDER COLOR
   Исправляем цвет границы блока популярных задач
========================= */

@media (max-width: 767px) {

	.mitino-tasks {
		border: 1px solid rgba(var(--accent-rgb), .34) !important;
		background:
			radial-gradient(circle at 72% 18%, rgba(var(--accent-rgb), .12), transparent 34%),
			linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
		box-shadow:
			0 18px 45px rgba(0,0,0,.28),
			0 0 0 1px rgba(var(--accent-rgb), .04) !important;
	}

	.mitino-task-card {
		border-color: rgba(var(--accent-rgb), .30) !important;
		background:
			linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
	}

	.mitino-task-card:hover {
		border-color: rgba(var(--accent-rgb), .70) !important;
		box-shadow: 0 0 20px rgba(var(--accent-rgb), .14) !important;
	}
}
/* =========================
   MITINO367 — MOBILE PROMO COMPACT
   Уменьшаем промо-блок на мобильной версии
========================= */

@media (max-width: 767px) {

	.mitino-promo {
		width: calc(100% - 16px) !important;
		max-width: calc(100% - 16px) !important;
		margin: 16px 8px 18px !important;
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 10px !important;
		box-sizing: border-box !important;
	}

	.mitino-promo__main {
		min-height: 0 !important;
		padding: 24px 20px !important;
		border-radius: 22px !important;
		border: 1px solid rgba(var(--accent-rgb), .34) !important;
		background:
			radial-gradient(circle at 72% 18%, rgba(var(--accent-rgb), .16), transparent 36%),
			linear-gradient(145deg, rgba(var(--accent-rgb), .08), rgba(255,255,255,.015)) !important;
		box-shadow: 0 18px 45px rgba(0,0,0,.24) !important;
	}

	.mitino-promo__main .mitino-section-label {
		margin-bottom: 14px !important;
		padding: 7px 12px !important;
		font-size: 11px !important;
		letter-spacing: .12em !important;
	}

	.mitino-promo__main h2 {
		font-size: 32px !important;
		line-height: 1.12 !important;
		margin: 0 !important;
		letter-spacing: 0 !important;
	}

	.mitino-promo__main p {
		margin: 14px 0 18px !important;
		font-size: 17px !important;
		line-height: 1.42 !important;
	}

	.mitino-promo__main .mitino-btn {
		width: 100% !important;
		min-height: 50px !important;
		font-size: 16px !important;
		border-radius: 14px !important;
	}

	.mitino-promo__side {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}

	.mitino-promo-mini {
		min-height: 0 !important;
		padding: 16px 18px !important;
		border-radius: 18px !important;
		border: 1px solid rgba(var(--accent-rgb), .24) !important;
		background:
			linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
	}

	.mitino-promo-mini strong {
		font-size: 20px !important;
		line-height: 1.15 !important;
	}

	.mitino-promo-mini span {
		margin-top: 6px !important;
		font-size: 15px !important;
		line-height: 1.3 !important;
	}
}

@media (max-width: 390px) {

	.mitino-promo__main h2 {
		font-size: 28px !important;
	}

	.mitino-promo__main p {
		font-size: 16px !important;
	}

	.mitino-promo-mini strong {
		font-size: 18px !important;
	}

	.mitino-promo-mini span {
		font-size: 14px !important;
	}
}
/* =========================
   MITINO367 — UNIFIED CARDS AND GRIDS
   Единые рамки, 3 варианта решений, топ сборки 3x2
========================= */

:root {
	--mitino-border: rgba(var(--accent-rgb), .28);
	--mitino-border-soft: rgba(var(--accent-rgb), .22);
	--mitino-border-hover: rgba(var(--accent-rgb), .56);
	--mitino-card-radius: 18px;
	--mitino-section-radius: 24px;
	--mitino-card-bg: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.014));
	--mitino-section-bg: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}

/* Внешние секции */
.mitino-tasks,
.mitino-promo,
.mitino-solutions,
.mitino-products,
.mitino-why,
.mitino-articles,
.mitino-cta {
	border: 1px solid var(--mitino-border-soft) !important;
	border-radius: var(--mitino-section-radius) !important;
	background: var(--mitino-section-bg) !important;
	box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
	box-sizing: border-box !important;
}

/* Внутренние карточки */
.mitino-task-card,
.mitino-solution-card,
.mitino-product-card,
.mitino-why-card,
.mitino-article-card,
.mitino-promo-mini {
	border: 1px solid var(--mitino-border) !important;
	border-radius: var(--mitino-card-radius) !important;
	background: var(--mitino-card-bg) !important;
	box-sizing: border-box !important;
	transition:
		border-color .2s ease,
		box-shadow .2s ease,
		transform .2s ease !important;
}

/* Hover карточек */
.mitino-task-card:hover,
.mitino-solution-card:hover,
.mitino-product-card:hover,
.mitino-why-card:hover,
.mitino-article-card:hover,
.mitino-promo-mini:hover {
	border-color: var(--mitino-border-hover) !important;
	box-shadow: 0 0 22px rgba(var(--accent-rgb), .12) !important;
	transform: translateY(-2px) !important;
}

/* Варианты решений — только 3 карточки */
.mitino-solutions__grid--three {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 18px !important;
}

/* Список внутри карточек Бюджет / Оптимум / Премиум */
.mitino-card-list {
	margin: 14px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: grid !important;
	gap: 8px !important;
	color: rgba(242,234,223,.78) !important;
	font-size: 14px !important;
	line-height: 1.35 !important;
}

.mitino-card-list li {
	position: relative !important;
	padding-left: 18px !important;
}

.mitino-card-list li:before {
	content: "✓" !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	color: var(--accent) !important;
	font-weight: var(--m367-font-weight-strong) !important;
}

/* Топ сборки — 2 ряда по 3 карточки на десктопе */
@media (min-width: 992px) {
	.mitino-products__grid {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 18px !important;
	}
}

/* Планшет */
@media (min-width: 768px) and (max-width: 991px) {
	.mitino-products__grid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}

	.mitino-solutions__grid--three {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 14px !important;
	}
}

/* Мобильная версия */
@media (max-width: 767px) {
	.mitino-solutions__grid--three,
	.mitino-products__grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	.mitino-card-list {
		font-size: 13px !important;
		gap: 6px !important;
	}
}
/* =========================================================
   MITINO367 — CLEAN FINAL OVERRIDES 16-05
   Единые рамки, меню 5+5, поиск, promo, footer, документы
========================================================= */

:root {
	--m367-page-width: 1280px;

	--m367-border: rgba(var(--accent-rgb), .28);
	--m367-border-soft: rgba(var(--accent-rgb), .18);
	--m367-border-hover: rgba(var(--accent-rgb), .48);

	--m367-radius-section: 24px;
	--m367-radius-card: 18px;

	--m367-section-bg:
		radial-gradient(circle at 72% 18%, rgba(var(--accent-rgb), .10), transparent 34%),
		linear-gradient(145deg, rgba(255,255,255,.032), rgba(255,255,255,.010));

	--m367-card-bg:
		linear-gradient(145deg, rgba(255,255,255,.040), rgba(255,255,255,.012));
}

/* =========================================================
   1. HEADER / WIDTH
========================================================= */

html body .bx-header,
html body .bx-header-section,
html body .bx-header-section.container {
	background: #050505 !important;
	background-color: #050505 !important;
	box-shadow: none !important;
}

html body .bx-header-section {
	border-bottom: 0 !important;
}

html body .mitino-header-row,
html body .mitino-desktop-menu,
html body .mitino-home-search,
html body .mitino-hero-v2,
html body .mitino-tasks,
html body .mitino-promo,
html body .mitino-solutions,
html body .mitino-products,
html body .mitino-why,
html body .mitino-articles,
html body .mitino-cta,
html body .mitino-footer {
	width: 100% !important;
	max-width: var(--m367-page-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

html body .mitino-desktop-menu {
	background: transparent !important;
}

/* =========================================================
   2. DESKTOP CATALOG MENU — 10 пунктов, сетка 5 + 5
========================================================= */

@media (min-width: 992px) {

	html body .mitino-desktop-menu .bx-top-nav-container,
	html body .bx-top-nav-container {
		width: 100% !important;
		max-width: var(--m367-page-width) !important;
		margin: 16px auto 0 !important;
		border: 1px solid var(--m367-border) !important;
		border-radius: 18px !important;
		background:
			linear-gradient(145deg, rgba(255,255,255,.026), rgba(255,255,255,.008)) !important;
		box-shadow: none !important;
		overflow: hidden !important;
	}

	html body .bx-top-nav-container .bx-nav-list-1-lvl {
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	html body .bx-top-nav-container .bx-nav-1-lvl {
		float: none !important;
		width: auto !important;
		min-width: 0 !important;
		display: flex !important;
		align-items: stretch !important;
		justify-content: center !important;
		border-right: 1px solid rgba(var(--accent-rgb), .10) !important;
		border-bottom: 1px solid rgba(var(--accent-rgb), .10) !important;
		background: transparent !important;
	}

	html body .bx-top-nav-container .bx-nav-1-lvl:nth-child(5),
	html body .bx-top-nav-container .bx-nav-1-lvl:nth-child(10) {
		border-right: 0 !important;
	}

	html body .bx-top-nav-container .bx-nav-1-lvl:nth-child(n+6) {
		border-bottom: 0 !important;
	}

	html body .bx-top-nav-container .bx-nav-1-lvl > a {
		width: 100% !important;
		min-width: 0 !important;
		height: 42px !important;
		line-height: 42px !important;
		padding: 0 10px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		font-size: 12px !important;
		font-weight: var(--m367-font-weight-strong) !important;
		letter-spacing: 0 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		background: transparent !important;
		color: var(--text-main) !important;
		text-decoration: none !important;
	}

	html body .bx-top-nav-container .bx-nav-1-lvl > a span,
	html body .bx-top-nav-container .bx-nav-1-lvl > a .bx-nav-1-lvl-link-text {
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		color: var(--text-main) !important;
	}

	html body .bx-top-nav-container .bx-nav-1-lvl:hover,
	html body .bx-top-nav-container .bx-nav-1-lvl.bx-hover,
	html body .bx-top-nav-container .bx-nav-1-lvl.bx-active {
		background: rgba(var(--accent-rgb), .09) !important;
	}

	html body .bx-top-nav-container .bx-nav-1-lvl:hover > a,
	html body .bx-top-nav-container .bx-nav-1-lvl.bx-hover > a,
	html body .bx-top-nav-container .bx-nav-1-lvl.bx-active > a {
		color: #fff !important;
	}
}

/* =========================================================
   3. SEARCH
========================================================= */

html body .mitino-home-search {
	margin-top: 14px !important;
	margin-bottom: 22px !important;
}

html body .mitino-home-search__form {
	width: 100% !important;
	max-width: 100% !important;
	border: 1px solid var(--m367-border) !important;
	border-radius: 18px !important;
	background:
		linear-gradient(145deg, rgba(255,255,255,.030), rgba(255,255,255,.010)) !important;
	box-shadow: 0 14px 34px rgba(0,0,0,.16) !important;
	overflow: hidden !important;
}

html body .mitino-home-search__form:focus-within {
	border-color: var(--m367-border-hover) !important;
	box-shadow:
		0 14px 34px rgba(0,0,0,.16),
		0 0 0 3px rgba(var(--accent-rgb), .08) !important;
}

html body .mitino-home-search__form input {
	background: transparent !important;
	border: 0 !important;
	color: var(--text-main) !important;
}

html body .mitino-home-search__form input::placeholder {
	color: rgba(242,234,223,.58) !important;
}

html body .mitino-home-search__form button {
	border: 0 !important;
	border-left: 1px solid rgba(var(--accent-rgb), .16) !important;
	background: var(--accent) !important;
	color: #fff !important;
	font-weight: var(--m367-font-weight-strong) !important;
}

/* =========================================================
   4. UNIFIED SECTIONS / CARDS
========================================================= */

html body .mitino-tasks,
html body .mitino-promo,
html body .mitino-solutions,
html body .mitino-products,
html body .mitino-why,
html body .mitino-articles,
html body .mitino-cta {
	border: 1px solid var(--m367-border-soft) !important;
	border-radius: var(--m367-radius-section) !important;
	background: var(--m367-section-bg) !important;
	box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
	box-sizing: border-box !important;
}

html body .mitino-task-card,
html body .mitino-solution-card,
html body .mitino-product-card,
html body .mitino-why-card,
html body .mitino-article-card,
html body .mitino-promo-mini,
html body .mitino-cta__contacts > div {
	border: 1px solid var(--m367-border) !important;
	border-radius: var(--m367-radius-card) !important;
	background: var(--m367-card-bg) !important;
	box-sizing: border-box !important;
	transition:
		border-color .2s ease,
		box-shadow .2s ease,
		transform .2s ease !important;
}

html body .mitino-task-card:hover,
html body .mitino-solution-card:hover,
html body .mitino-product-card:hover,
html body .mitino-why-card:hover,
html body .mitino-article-card:hover,
html body .mitino-promo-mini:hover {
	border-color: var(--m367-border-hover) !important;
	box-shadow: 0 0 22px rgba(var(--accent-rgb), .12) !important;
	transform: translateY(-2px) !important;
}

/* =========================================================
   5. PROMO / СЕТЕВОЕ РЕШЕНИЕ
========================================================= */

html body .mitino-promo {
	display: grid !important;
	grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr) !important;
	gap: 18px !important;
	padding: 18px !important;
	overflow: hidden !important;
}

html body .mitino-promo__main {
	min-height: 0 !important;
	padding: 34px !important;
	border: 1px solid var(--m367-border) !important;
	border-radius: 20px !important;
	background:
		radial-gradient(circle at 72% 42%, rgba(var(--accent-rgb), .18), transparent 38%),
		linear-gradient(145deg, rgba(var(--accent-rgb), .075), rgba(255,255,255,.012)) !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

html body .mitino-promo__side {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 12px !important;
	align-content: stretch !important;
	min-width: 0 !important;
}

html body .mitino-promo-mini {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	min-height: 0 !important;
	padding: 18px 20px !important;
	box-shadow: none !important;
}

/* =========================================================
   6. SOLUTIONS / PRODUCTS GRIDS
========================================================= */

html body .mitino-solutions__grid--three {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 18px !important;
}

html body .mitino-card-list {
	margin: 14px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: grid !important;
	gap: 8px !important;
	color: rgba(242,234,223,.78) !important;
	font-size: 14px !important;
	line-height: 1.35 !important;
}

html body .mitino-card-list li {
	position: relative !important;
	padding-left: 18px !important;
}

html body .mitino-card-list li:before {
	content: "✓" !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	color: var(--accent) !important;
	font-weight: var(--m367-font-weight-strong) !important;
}

@media (min-width: 992px) {
	html body .mitino-products__grid {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 18px !important;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	html body .mitino-products__grid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}

	html body .mitino-solutions__grid--three {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 14px !important;
	}
}

/* =========================================================
   7. FOOTER
========================================================= */

html body .mitino-footer {
	width: 100% !important;
	max-width: var(--m367-page-width) !important;
	margin: 24px auto 28px !important;
	padding: 0 !important;
	border: 1px solid var(--m367-border) !important;
	border-radius: var(--m367-radius-section) !important;
	background:
		radial-gradient(circle at 16% 0%, rgba(var(--accent-rgb), .08), transparent 34%),
		linear-gradient(145deg, rgba(255,255,255,.022), rgba(255,255,255,.008)) !important;
	box-shadow: 0 18px 45px rgba(0,0,0,.20) !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

html body .mitino-footer:before,
html body .mitino-footer:after {
	display: none !important;
}

html body .mitino-footer__inner {
	max-width: none !important;
	width: 100% !important;
	padding: 30px 34px 20px !important;
	grid-template-columns: 1.15fr .85fr .85fr .85fr 1fr !important;
	gap: 26px !important;
	box-sizing: border-box !important;
}

html body .mitino-footer__brand p {
	max-width: 250px !important;
	margin: 10px 0 14px !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: rgba(242,234,223,.68) !important;
}

/* Убираем только нижние дубли ссылок, но не копирайт */
html body .mitino-footer__legal {
	display: none !important;
}

/* Скрываем сырые пункты. Важно: НЕ трогаем /personal-data-consent/ */
html body .mitino-footer__col a[href="/partners/"],
html body .mitino-footer__col a[href="/partneram/"],
html body .mitino-footer__col a[href="/vakansii/"],
html body .mitino-footer__col a[href="/vacancies/"],
html body .mitino-footer__col a[href="/news/"],
html body .mitino-footer__col a[href="/articles/"],
html body .mitino-footer__col a[href="/personal/"],
html body .mitino-footer__col a[href="/cart/"],
html body .mitino-footer__col a[href="/personal/cart/"],
html body .mitino-footer__col a[href="/personal/order/"],
html body .mitino-footer__col a[href="/order/"] {
	display: none !important;
}

/* Документы должны быть всегда видны */
html body .mitino-footer__col a[href="/privacy/"],
html body .mitino-footer__col a[href="/personal-data-consent/"],
html body .mitino-footer__col a[href="/offer/"] {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	color: #fff !important;
	font-weight: var(--m367-font-weight-strong) !important;
}

html body .mitino-footer__col a[href="/privacy/"]:hover,
html body .mitino-footer__col a[href="/personal-data-consent/"]:hover,
html body .mitino-footer__col a[href="/offer/"]:hover {
	color: var(--accent-hover) !important;
}

/* Копирайт */
html body .mitino-footer__bottom {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 34px !important;
	padding: 14px 0 18px !important;
	border-top: 1px solid rgba(var(--accent-rgb), .10) !important;
	color: rgba(242,234,223,.58) !important;
	font-size: 13px !important;
	text-align: center !important;
}

html body .mitino-footer__bottom > *:not(.mitino-footer__legal) {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
}

/* =========================================================
   8. WIDTH ON MEDIUM SCREENS
========================================================= */

@media (max-width: 1399px) {
	html body .mitino-header-row,
	html body .mitino-desktop-menu,
	html body .mitino-home-search,
	html body .mitino-hero-v2,
	html body .mitino-tasks,
	html body .mitino-promo,
	html body .mitino-solutions,
	html body .mitino-products,
	html body .mitino-why,
	html body .mitino-articles,
	html body .mitino-cta,
	html body .mitino-footer {
		width: calc(100% - 30px) !important;
		max-width: calc(100% - 30px) !important;
	}
}

/* =========================================================
   9. MOBILE SAFE
========================================================= */

@media (max-width: 991px) {
	html body .mitino-promo {
		grid-template-columns: 1fr !important;
		padding: 14px !important;
	}

	html body .mitino-footer__inner {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 767px) {
	html body .mitino-header-row,
	html body .mitino-desktop-menu,
	html body .mitino-home-search,
	html body .mitino-hero-v2,
	html body .mitino-tasks,
	html body .mitino-promo,
	html body .mitino-solutions,
	html body .mitino-products,
	html body .mitino-why,
	html body .mitino-articles,
	html body .mitino-cta,
	html body .mitino-footer {
		width: calc(100% - 16px) !important;
		max-width: calc(100% - 16px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	html body .mitino-solutions__grid--three,
	html body .mitino-products__grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	html body .mitino-card-list {
		font-size: 13px !important;
		gap: 6px !important;
	}

	html body .mitino-footer {
		margin-top: 20px !important;
		border-radius: 22px !important;
	}

	html body .mitino-footer__inner {
		grid-template-columns: 1fr !important;
		padding: 24px 20px 16px !important;
		gap: 22px !important;
	}

	html body .mitino-footer__bottom {
		margin: 0 20px !important;
		padding: 12px 0 16px !important;
	}
}

/* =========================================================
   MITINO367 — REAL FLOATING MENU TOOLTIP
   Подсказка вне сетки меню, поверх всех блоков
========================================================= */

html body .mitino-menu-tooltip {
	position: fixed !important;
	z-index: 2147483000 !important;
	width: 320px !important;
	max-width: calc(100vw - 32px) !important;
	padding: 14px 16px !important;
	border: 1px solid rgba(var(--accent-rgb), .34) !important;
	border-radius: 16px !important;
	background:
		radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), .16), transparent 40%),
		linear-gradient(145deg, rgba(18,18,18,.98), rgba(5,5,5,.98)) !important;
	box-shadow: 0 22px 60px rgba(0,0,0,.55) !important;
	color: rgba(242,234,223,.75) !important;
	pointer-events: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(-4px) !important;
	transition:
		opacity .16s ease,
		visibility .16s ease,
		transform .16s ease !important;
	box-sizing: border-box !important;
}

html body .mitino-menu-tooltip.is-visible {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}

html body .mitino-menu-tooltip__title {
	margin-bottom: 6px !important;
	color: rgba(242,234,223,.70) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

html body .mitino-menu-tooltip__text {
	color: rgba(242,234,223,.70) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

@media (max-width: 991px) {
	html body .mitino-menu-tooltip {
		display: none !important;
	}
}

/* =========================================================
   MITINO367 — REMOVE OLD MENU GHOSTS
========================================================= */

@media (min-width: 992px) {

	html body .bx-top-nav-container .bx-nav-1-lvl:before,
	html body .bx-top-nav-container .bx-nav-1-lvl:after {
		content: none !important;
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		width: 0 !important;
		height: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		pointer-events: none !important;
	}

	html body .bx-top-nav-container .bx-nav-2-lvl-container,
	html body .bx-top-nav-container .bx-nav-list-2-lvl,
	html body .bx-top-nav-container .bx-nav-2-lvl,
	html body .bx-top-nav-container .bx-nav-2-lvl-box {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		height: 0 !important;
		max-height: 0 !important;
		overflow: hidden !important;
		pointer-events: none !important;
	}
}
/* MITINO367 — Home popular task cards with WebP asset icons / dark engineering version */

.mitino-tasks--asset-icons .mitino-task-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.mitino-tasks--asset-icons .mitino-task-card--with-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 245px;
    padding: 12px;
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,106,0,.10), transparent 42%),
        linear-gradient(180deg, rgba(25,25,25,.96), rgba(11,11,11,.98));
    border: 1px solid rgba(255,106,0,.24);
    box-shadow: 0 14px 34px rgba(0,0,0,.34);
    color: #fff;
    text-decoration: none;
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.mitino-tasks--asset-icons .mitino-task-card--with-icon:hover {
    transform: translateY(-3px);
    border-color: rgba(255,106,0,.58);
    box-shadow: 0 20px 46px rgba(0,0,0,.46);
}

.mitino-tasks--asset-icons .mitino-task-card__asset {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 126px;
    margin: 0 0 12px;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 44%, rgba(255,255,255,.98), rgba(244,246,248,.95) 58%, rgba(232,236,240,.88));
    border: 1px solid rgba(255,255,255,.16);
}

.mitino-tasks--asset-icons .mitino-task-card__asset::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255,106,0,.10);
    pointer-events: none;
}

.mitino-tasks--asset-icons .mitino-task-card__asset::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 86px;
    height: 14px;
    border-radius: 50%;
    background: rgba(17,22,28,.18);
    filter: blur(9px);
    transform: translateX(-50%);
    pointer-events: none;
}

.mitino-tasks--asset-icons .mitino-task-card__asset img {
    position: relative;
    z-index: 1;
    display: block;
    width: 142px;
    height: 142px;
    object-fit: contain;
    transform: scale(1.08);
    transition: transform .22s ease;
}

.mitino-tasks--asset-icons .mitino-task-card--with-icon:hover .mitino-task-card__asset img {
    transform: scale(1.16);
}

.mitino-tasks--asset-icons .mitino-task-card__content {
    position: relative;
    z-index: 2;
}

.mitino-tasks--asset-icons .mitino-task-card__content h3 {
    margin: 0 0 7px;
    font-size: 15px;
    line-height: 1.16;
    font-weight: var(--m367-font-weight-strong);
    color: #ffffff;
}

.mitino-tasks--asset-icons .mitino-task-card__content p {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.42;
    color: rgba(255,255,255,.72);
}

.mitino-tasks--asset-icons .mitino-task-card__arrow,
.mitino-tasks--asset-icons .mitino-task-card__action {
    margin-top: auto;
    font-size: 12px;
    font-weight: var(--m367-font-weight-strong);
    color: #ff6a00;
}

@media (max-width: 1280px) {
    .mitino-tasks--asset-icons .mitino-task-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mitino-tasks--asset-icons .mitino-task-card--with-icon {
        min-height: 245px;
    }
}

@media (max-width: 768px) {
    .mitino-tasks--asset-icons .mitino-task-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .mitino-tasks--asset-icons .mitino-task-card__asset {
        height: 116px;
    }

    .mitino-tasks--asset-icons .mitino-task-card__asset img {
        width: 124px;
        height: 124px;
    }
}

@media (max-width: 480px) {
    .mitino-tasks--asset-icons .mitino-task-grid {
        grid-template-columns: 1fr;
    }

    .mitino-tasks--asset-icons .mitino-task-card--with-icon {
        display: grid;
        grid-template-columns: 118px 1fr;
        min-height: 150px;
        column-gap: 14px;
        align-items: center;
    }

    .mitino-tasks--asset-icons .mitino-task-card__asset {
        height: 118px;
        margin: 0;
    }

    .mitino-tasks--asset-icons .mitino-task-card__asset img {
        width: 122px;
        height: 122px;
    }
}
/* MITINO367 — fix empty visuals in solution cards */

.mitino-solutions .mitino-solution-card {
    padding-top: 28px !important;
}

.mitino-solutions .mitino-solution-card::before {
    content: none !important;
}

.mitino-solutions .mitino-solution-card__visual,
.mitino-solutions .mitino-solution-card__image,
.mitino-solutions .mitino-card-visual {
    display: none !important;
}

.mitino-solutions .mitino-solution-card strong {
    font-size: 24px;
    margin-bottom: 12px;
}

.mitino-solutions .mitino-solution-card:nth-child(2) {
    background:
        radial-gradient(circle at 50% 0%, rgba(255,106,0,.22), transparent 42%),
        linear-gradient(180deg, rgba(30, 24, 20, .96), rgba(10, 10, 12, .98));
    border-color: rgba(255,106,0,.66);
}

.mitino-solutions .mitino-solution-card:nth-child(2)::after {
    content: "Рекомендуем";
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: var(--m367-font-weight-strong);
    background: linear-gradient(135deg, #ff6a00, #e24b35);
}
/* MITINO367 — fix empty visuals in solution cards */

.mitino-solutions .mitino-solution-card {
    padding-top: 28px !important;
}

.mitino-solutions .mitino-solution-card::before {
    content: none !important;
}

.mitino-solutions .mitino-solution-card__visual,
.mitino-solutions .mitino-solution-card__image,
.mitino-solutions .mitino-card-visual {
    display: none !important;
}

.mitino-solutions .mitino-solution-card strong {
    font-size: 24px;
    margin-bottom: 12px;
}

.mitino-solutions .mitino-solution-card:nth-child(2) {
    background:
        radial-gradient(circle at 50% 0%, rgba(255,106,0,.22), transparent 42%),
        linear-gradient(180deg, rgba(30, 24, 20, .96), rgba(10, 10, 12, .98));
    border-color: rgba(255,106,0,.66);
}

.mitino-solutions .mitino-solution-card:nth-child(2)::after {
    content: "Рекомендуем";
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: var(--m367-font-weight-strong);
    background: linear-gradient(135deg, #ff6a00, #e24b35);
}
/* MITINO367 — Full home assets integration v1
   Добавить в конец: /public_html/bitrix/templates/eshop_bootstrap_v4/template_styles.css
*/

/* Общие изображения в карточках */

.mitino-home-page img {
    max-width: 100%;
}

.mitino-task-card__visual,
.mitino-solution-card__image::before,
.mitino-solution-card__image::after,
.mitino-product-card__image::before,
.mitino-product-card__image::after,
.mitino-article-card__image::before,
.mitino-article-card__image::after,
.mitino-why-card::before {
    content: none !important;
    display: none !important;
}

/* Популярные задачи */

.mitino-tasks--asset-icons .mitino-task-card--with-icon {
    position: relative;
    overflow: hidden;
}

.mitino-tasks--asset-icons .mitino-task-card__asset {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 136px;
    margin: 0 0 13px;
    overflow: hidden;
    border-radius: 15px;
    background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.98), rgba(244,246,248,.96) 60%, rgba(232,236,240,.9));
    border: 1px solid rgba(255,255,255,.16);
}

.mitino-tasks--asset-icons .mitino-task-card__asset::after {
    content: "";
    display: block !important;
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 86px;
    height: 14px;
    border-radius: 50%;
    background: rgba(17,22,28,.18);
    filter: blur(9px);
    transform: translateX(-50%);
    pointer-events: none;
}

.mitino-tasks--asset-icons .mitino-task-card__asset img {
    position: relative;
    z-index: 1;
    display: block;
    width: 148px;
    height: 148px;
    object-fit: contain;
    transform: scale(1.08);
    transition: transform .22s ease;
}

.mitino-tasks--asset-icons .mitino-task-card--with-icon:hover .mitino-task-card__asset img {
    transform: scale(1.16);
}

/* Варианты решений */

.mitino-solution-card {
    display: flex;
    flex-direction: column;
}

.mitino-solution-card__image {
    position: relative;
    display: block;
    width: 100%;
    height: 142px;
    margin: 0 0 18px;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
}

.mitino-solution-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mitino-solution-card--highlight {
    border-color: rgba(255,106,0,.66) !important;
    box-shadow: inset 0 0 0 1px rgba(255,106,0,.18), 0 18px 44px rgba(255,106,0,.1);
}

.mitino-solution-card--highlight::after {
    content: "Рекомендуем";
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: var(--m367-font-weight-strong);
    background: linear-gradient(135deg, #ff6a00, #e24b35);
}

/* Топ сборки */

.mitino-product-card__image {
    position: relative;
    overflow: hidden;
    width: 150px;
    min-height: 156px;
    border-radius: 16px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.1);
}

.mitino-product-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 156px;
    object-fit: cover;
    transition: transform .22s ease;
}

.mitino-product-card:hover .mitino-product-card__image img {
    transform: scale(1.05);
}

/* Почему выбирают */

.mitino-why__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.mitino-why-card--with-icon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mitino-why-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 0 14px;
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.98), rgba(235,238,242,.92));
    border: 1px solid rgba(255,255,255,.12);
}

.mitino-why-card__icon img {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: cover;
}

/* Полезно знать */

.mitino-article-card__image {
    position: relative;
    min-height: 150px;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
}

.mitino-article-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 150px;
    object-fit: cover;
    transition: transform .22s ease;
}

.mitino-article-card:hover .mitino-article-card__image img {
    transform: scale(1.04);
}

/* Адаптив */

@media (max-width: 1280px) {
    .mitino-why__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .mitino-solution-card__image {
        height: 180px;
    }

    .mitino-product-card__image {
        width: 100%;
        min-height: 220px;
    }

    .mitino-product-card__image img {
        min-height: 220px;
    }
}

@media (max-width: 680px) {
    .mitino-task-card__asset {
        grid-row: 1 / 4;
        height: 120px;
        margin: 0;
    }

    .mitino-tasks--asset-icons .mitino-task-card__asset img {
        width: 126px;
        height: 126px;
    }

    .mitino-why__grid {
        grid-template-columns: 1fr;
    }

    .mitino-why-card--with-icon {
        display: grid;
        grid-template-columns: 76px 1fr;
        column-gap: 14px;
        align-items: center;
    }

    .mitino-why-card__icon {
        grid-row: 1 / 3;
        margin: 0;
    }

    .mitino-article-card__image,
    .mitino-article-card__image img {
        min-height: 190px;
    }
}
/* MITINO367 — Home assets recovery and proportion fix v2 */

/* 1. Возвращаем изображения в Варианты решений */
.mitino-solutions .mitino-solution-card__image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 160px !important;
    margin: 0 0 18px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
}

.mitino-solutions .mitino-solution-card__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 2. Делаем карточки сборок нормальными, не микроскопическими */
.mitino-products .mitino-products__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.mitino-products .mitino-product-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 360px !important;
    padding: 14px !important;
}

.mitino-products .mitino-product-card__badge {
    position: absolute !important;
    z-index: 3 !important;
    top: 12px !important;
    left: 12px !important;
}

.mitino-products .mitino-product-card__image {
    display: block !important;
    width: 100% !important;
    height: 178px !important;
    min-height: 178px !important;
    margin: 0 0 14px !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
}

.mitino-products .mitino-product-card__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
}

.mitino-products .mitino-product-card strong,
.mitino-products .mitino-product-card p,
.mitino-products .mitino-product-card__bottom {
    grid-column: auto !important;
}

.mitino-products .mitino-product-card strong {
    margin: 0 0 8px !important;
}

.mitino-products .mitino-product-card p {
    margin: 0 0 14px !important;
}

.mitino-products .mitino-product-card__bottom {
    margin-top: auto !important;
}

/* 3. Преимущества: иконки крупнее и чище */
.mitino-why .mitino-why__grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.mitino-why .mitino-why-card {
    min-height: 210px !important;
    padding: 14px !important;
}

.mitino-why .mitino-why-card__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 0 14px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.98), rgba(235,238,242,.92)) !important;
}

.mitino-why .mitino-why-card__icon img {
    display: block !important;
    width: 88px !important;
    height: 88px !important;
    object-fit: cover !important;
}

/* 4. Статьи: нормальная обложка, не узкая полоска */
.mitino-articles .mitino-articles__grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.mitino-articles .mitino-article-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 330px !important;
    padding: 14px !important;
}

.mitino-articles .mitino-article-card__image {
    display: block !important;
    width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
    margin: 0 0 14px !important;
    overflow: hidden !important;
    border-radius: 15px !important;
}

.mitino-articles .mitino-article-card__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
}

/* 5. Адаптив */
@media (max-width: 1280px) {
    .mitino-products .mitino-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mitino-why .mitino-why__grid,
    .mitino-articles .mitino-articles__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .mitino-products .mitino-products__grid,
    .mitino-articles .mitino-articles__grid {
        grid-template-columns: 1fr !important;
    }

    .mitino-why .mitino-why__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mitino-products .mitino-product-card__image {
        height: 210px !important;
    }

    .mitino-articles .mitino-article-card__image {
        height: 210px !important;
    }
}

@media (max-width: 480px) {
    .mitino-why .mitino-why__grid {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================================
   MITINO367 — HOME ASSETS DARK FINAL OVERRIDE v2
   Путь: /public_html/bitrix/templates/eshop_bootstrap_v4/template_styles.css
   Вставить в самый конец файла.
   Цель: убрать белые подложки, подключить тёмные WebP-ассеты,
   выровнять задачи / преимущества / статьи.
========================================================= */

/* Общий сброс псевдоэлементов, которые рисовали старые заглушки */
html body .mitino-home-page .mitino-task-card__visual::before,
html body .mitino-home-page .mitino-task-card__visual::after,
html body .mitino-home-page .mitino-task-card__asset::before,
html body .mitino-home-page .mitino-task-card__asset::after,
html body .mitino-home-page .mitino-why-card::before,
html body .mitino-home-page .mitino-why-card::after,
html body .mitino-home-page .mitino-why-card__icon::before,
html body .mitino-home-page .mitino-why-card__icon::after,
html body .mitino-home-page .mitino-article-card__image::before,
html body .mitino-home-page .mitino-article-card__image::after {
    content: none !important;
    display: none !important;
}

/* Популярные задачи: тёмные иконки вместо старых светлых подложек */
html body .mitino-tasks--asset-icons .mitino-task-card--with-icon {
    display: flex !important;
    flex-direction: column !important;
    min-height: 238px !important;
    padding: 12px !important;
    overflow: hidden !important;
}

html body .mitino-tasks--asset-icons .mitino-task-card__asset {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 132px !important;
    margin: 0 0 13px !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), .18), transparent 46%),
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.010)) !important;
    border: 1px solid rgba(var(--accent-rgb), .24) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 12px 28px rgba(0,0,0,.18) !important;
}

html body .mitino-tasks--asset-icons .mitino-task-card__asset img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
    filter: brightness(1.04) contrast(1.03) saturate(1.04) !important;
    transition: transform .22s ease, filter .22s ease !important;
}

html body .mitino-tasks--asset-icons .mitino-task-card--with-icon:hover .mitino-task-card__asset img {
    transform: scale(1.035) !important;
    filter: brightness(1.09) contrast(1.05) saturate(1.07) !important;
}

/* Преимущества: тёмный icon standard v3, без белой таблетки */
html body .mitino-why .mitino-why__grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

html body .mitino-why .mitino-why-card {
    min-height: 230px !important;
    padding: 14px !important;
}

html body .mitino-why .mitino-why-card__icon {
    display: block !important;
    width: 96px !important;
    height: 96px !important;
    margin: 0 0 14px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), .16), transparent 48%),
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.010)) !important;
    border: 1px solid rgba(var(--accent-rgb), .24) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 12px 28px rgba(0,0,0,.18) !important;
}

html body .mitino-why .mitino-why-card__icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Статьи: v4.2 без текста в картинке, заголовок HTML/CSS */
html body .mitino-articles .mitino-articles__grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

html body .mitino-articles .mitino-article-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 336px !important;
    padding: 14px !important;
}

html body .mitino-articles .mitino-article-card__image {
    display: block !important;
    width: 100% !important;
    height: 162px !important;
    min-height: 162px !important;
    margin: 0 0 14px !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), .14), transparent 48%),
        rgba(255,255,255,.035) !important;
    border: 1px solid rgba(var(--accent-rgb), .22) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 12px 28px rgba(0,0,0,.18) !important;
}

html body .mitino-articles .mitino-article-card__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    filter: brightness(1.05) contrast(1.03) saturate(1.04) !important;
    transition: transform .22s ease, filter .22s ease !important;
}

html body .mitino-articles .mitino-article-card:hover .mitino-article-card__image img {
    transform: scale(1.035) !important;
    filter: brightness(1.10) contrast(1.05) saturate(1.07) !important;
}

/* Адаптив */
@media (max-width: 1280px) {
    html body .mitino-why .mitino-why__grid,
    html body .mitino-articles .mitino-articles__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991px) {
    html body .mitino-why .mitino-why__grid,
    html body .mitino-articles .mitino-articles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    html body .mitino-tasks--asset-icons .mitino-task-card__asset {
        height: 78px !important;
        margin-bottom: 10px !important;
        border-radius: 12px !important;
    }

    html body .mitino-why .mitino-why-card {
        min-height: 0 !important;
    }

    html body .mitino-why .mitino-why-card__icon {
        width: 86px !important;
        height: 86px !important;
        margin-bottom: 12px !important;
    }

    html body .mitino-articles .mitino-articles__grid {
        grid-template-columns: 1fr !important;
    }

    html body .mitino-articles .mitino-article-card__image {
        height: 210px !important;
    }
}

@media (max-width: 480px) {
    html body .mitino-why .mitino-why__grid {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================================
   MITINO367 — HOME STEP 1 POLISH v3
   Путь: /public_html/bitrix/templates/eshop_bootstrap_v4/template_styles.css
   Вставить в самый конец файла.
   Что делает:
   1) убирает белые подложки популярных задач;
   2) центрирует и увеличивает иконки преимуществ;
   3) добавляет подзаголовок блока "Решения для дома, офиса и бизнеса";
   4) страхует статьи и преимущества от старых белых фонов.
========================================================= */

/* Заголовок + подзаголовок блока решений */
html body .mitino-tasks--asset-icons .mitino-section-head {
    align-items: flex-start !important;
}

html body .mitino-tasks--asset-icons .mitino-section-head > div {
    min-width: 0 !important;
}

html body .mitino-section-subtitle {
    max-width: 820px !important;
    margin: 8px 0 0 !important;
    color: rgba(242,234,223,.68) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
}

/* Сброс старых светлых псевдоэлементов */
html body .mitino-home-page .mitino-task-card__asset::before,
html body .mitino-home-page .mitino-task-card__asset::after,
html body .mitino-home-page .mitino-task-card__visual::before,
html body .mitino-home-page .mitino-task-card__visual::after,
html body .mitino-home-page .mitino-why-card__icon::before,
html body .mitino-home-page .mitino-why-card__icon::after,
html body .mitino-home-page .mitino-article-card__image::before,
html body .mitino-home-page .mitino-article-card__image::after {
    content: none !important;
    display: none !important;
}

/* Популярные задачи / решения: тёмные иконки без белой подложки */
html body .mitino-tasks--asset-icons .mitino-task-card--with-icon {
    display: flex !important;
    flex-direction: column !important;
    min-height: 238px !important;
    padding: 12px !important;
    overflow: hidden !important;
}

html body .mitino-tasks--asset-icons .mitino-task-card__asset {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 132px !important;
    margin: 0 0 13px !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), .18), transparent 46%),
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.010)) !important;
    border: 1px solid rgba(var(--accent-rgb), .24) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 12px 28px rgba(0,0,0,.18) !important;
}

html body .mitino-tasks--asset-icons .mitino-task-card__asset img {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
    filter: brightness(1.07) contrast(1.04) saturate(1.05) !important;
    transition: transform .22s ease, filter .22s ease !important;
}

html body .mitino-tasks--asset-icons .mitino-task-card--with-icon:hover .mitino-task-card__asset img {
    transform: scale(1.035) !important;
    filter: brightness(1.12) contrast(1.06) saturate(1.08) !important;
}

/* Преимущества: иконки крупнее и по центру */
html body .mitino-why .mitino-why__grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

html body .mitino-why .mitino-why-card,
html body .mitino-why .mitino-why-card--with-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 238px !important;
    padding: 16px 14px !important;
}

html body .mitino-why .mitino-why-card__icon {
    display: block !important;
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    min-height: 112px !important;
    margin: 0 auto 16px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), .16), transparent 48%),
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.010)) !important;
    border: 1px solid rgba(var(--accent-rgb), .24) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 12px 28px rgba(0,0,0,.18) !important;
}

html body .mitino-why .mitino-why-card__icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body .mitino-why .mitino-why-card strong,
html body .mitino-why .mitino-why-card p {
    text-align: center !important;
}

/* Статьи: оставляем тёмные обложки v4.2 */
html body .mitino-articles .mitino-article-card__image {
    background:
        radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), .14), transparent 48%),
        rgba(255,255,255,.035) !important;
    border: 1px solid rgba(var(--accent-rgb), .22) !important;
}

html body .mitino-articles .mitino-article-card__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    filter: brightness(1.06) contrast(1.03) saturate(1.04) !important;
}

/* Адаптив */
@media (max-width: 1280px) {
    html body .mitino-why .mitino-why__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991px) {
    html body .mitino-tasks--asset-icons .mitino-section-head {
        gap: 12px !important;
    }

    html body .mitino-why .mitino-why__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    html body .mitino-tasks--asset-icons .mitino-section-head {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    html body .mitino-section-subtitle {
        font-size: 13px !important;
        line-height: 1.38 !important;
    }

    html body .mitino-tasks--asset-icons .mitino-task-card__asset {
        height: 78px !important;
        margin-bottom: 10px !important;
        border-radius: 12px !important;
    }

    html body .mitino-why .mitino-why-card,
    html body .mitino-why .mitino-why-card--with-icon {
        min-height: 0 !important;
    }

    html body .mitino-why .mitino-why-card__icon {
        width: 104px !important;
        height: 104px !important;
        min-width: 104px !important;
        min-height: 104px !important;
    }
}

@media (max-width: 480px) {
    html body .mitino-why .mitino-why__grid {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================================
   MITINO367 — HOME STEP 2: SOLUTION APPROACH + PC BUILDS BASE
   Путь: /public_html/bitrix/templates/eshop_bootstrap_v4/template_styles.css
   Вставить в самый конец файла.
========================================================= */

/* Блок "Как подбираем решение" */
html body .mitino-solutions .mitino-section-head {
    align-items: flex-start !important;
    margin-bottom: 18px !important;
}

html body .mitino-solutions .mitino-section-head > div {
    min-width: 0 !important;
}

html body .mitino-solutions .mitino-section-link {
    display: none !important;
}

html body .mitino-solutions .mitino-solution-card {
    position: relative !important;
    min-height: 230px !important;
    padding: 22px !important;
}

html body .mitino-solutions .mitino-solution-card strong {
    display: block !important;
    margin-bottom: 10px !important;
    color: var(--text-main) !important;
    font-size: 22px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1.15 !important;
}

html body .mitino-solutions .mitino-solution-card p {
    color: rgba(242,234,223,.76) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

html body .mitino-solutions .mitino-solution-card:nth-child(2) {
    border-color: rgba(var(--accent-rgb), .58) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), .18), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.050), rgba(255,255,255,.014)) !important;
}

html body .mitino-solutions .mitino-solution-card:nth-child(2)::after {
    content: "Рекомендуем" !important;
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    display: inline-flex !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    background: linear-gradient(135deg, #ff6a00, #e24b35) !important;
}

/* База под будущие вкладки "Топовые сборки недели" */
html body .mitino-products .mitino-section-head h2 {
    letter-spacing: .01em !important;
}

html body .mitino-products .mitino-product-card {
    overflow: hidden !important;
}

html body .mitino-products .mitino-product-card__image {
    height: 190px !important;
    min-height: 190px !important;
    border-color: rgba(var(--accent-rgb), .22) !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), .13), transparent 48%),
        rgba(255,255,255,.035) !important;
}

html body .mitino-products .mitino-product-card__image img {
    filter: brightness(1.04) contrast(1.03) saturate(1.04) !important;
}

@media (max-width: 767px) {
    html body .mitino-solutions .mitino-solution-card {
        min-height: 0 !important;
    }

    html body .mitino-products .mitino-product-card__image {
        height: 210px !important;
        min-height: 210px !important;
    }
}
/* =========================================================
   MITINO367 — HOME STEP 3 FIX: APPROACH / BENEFITS / TRANSITIONS
   Путь: /public_html/bitrix/templates/eshop_bootstrap_v4/template_styles.css
   Вставить в самый конец файла.
========================================================= */

/* 1. Блок "Как подбираем решение": без серых картинок и без сопливых ссылок снизу */
html body .mitino-solutions--approach .mitino-section-head {
    align-items: flex-start !important;
    margin-bottom: 18px !important;
}

html body .mitino-solutions--approach .mitino-solution-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 220px !important;
    padding: 24px !important;
    overflow: hidden !important;
    cursor: default !important;
}

html body .mitino-solutions--approach .mitino-solution-card__image,
html body .mitino-solutions--approach .mitino-solution-card span,
html body .mitino-solutions--approach .mitino-solution-card::before {
    display: none !important;
    content: none !important;
}

html body .mitino-solutions--approach .mitino-solution-card strong {
    display: block !important;
    margin: 0 0 10px !important;
    color: var(--text-main) !important;
    font-size: 22px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1.15 !important;
}

html body .mitino-solutions--approach .mitino-solution-card p {
    margin: 0 0 14px !important;
    color: rgba(242,234,223,.74) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

html body .mitino-solutions--approach .mitino-solution-card:hover {
    transform: translateY(-2px) !important;
}

html body .mitino-solutions--approach .mitino-solution-card--highlight {
    border-color: rgba(var(--accent-rgb), .58) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), .16), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.050), rgba(255,255,255,.014)) !important;
}

html body .mitino-solutions--approach .mitino-solution-card--highlight::after {
    content: "Рекомендуем" !important;
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    display: inline-flex !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    background: linear-gradient(135deg, #ff6a00, #e24b35) !important;
}

/* 2. Преимущества: убираем дубли внутри картинок, центрируем, делаем иконку крупнее */
html body .mitino-why .mitino-why-card,
html body .mitino-why .mitino-why-card--with-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 238px !important;
    padding: 16px 14px !important;
}

html body .mitino-why .mitino-why-card__icon {
    display: block !important;
    width: 118px !important;
    height: 118px !important;
    min-width: 118px !important;
    min-height: 118px !important;
    margin: 0 auto 16px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), .16), transparent 48%),
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.010)) !important;
    border: 1px solid rgba(var(--accent-rgb), .24) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 12px 28px rgba(0,0,0,.18) !important;
}

html body .mitino-why .mitino-why-card__icon::before,
html body .mitino-why .mitino-why-card__icon::after,
html body .mitino-why .mitino-why-card::before,
html body .mitino-why .mitino-why-card::after {
    content: none !important;
    display: none !important;
}

html body .mitino-why .mitino-why-card__icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body .mitino-why .mitino-why-card strong,
html body .mitino-why .mitino-why-card p {
    text-align: center !important;
}

/* 3. Чуть ровнее нижние переходы между секциями */
html body .mitino-tasks,
html body .mitino-solutions,
html body .mitino-products,
html body .mitino-why,
html body .mitino-articles {
    margin-bottom: 24px !important;
}

/* 4. Мобильная страховка */
@media (max-width: 767px) {
    html body .mitino-solutions--approach .mitino-solution-card {
        min-height: 0 !important;
        padding: 20px !important;
    }

    html body .mitino-why .mitino-why-card__icon {
        width: 108px !important;
        height: 108px !important;
        min-width: 108px !important;
        min-height: 108px !important;
    }
}
/* =========================================================
   MITINO367 — HOME STEP 4: APPROACH CARDS VISUALS
   Путь: /public_html/bitrix/templates/eshop_bootstrap_v4/template_styles.css
   Вставить в самый конец файла.
   Цель: вернуть визуальный смысл в "Как подбираем решение",
   но без серых картинок, без внешних изображений и без лишнего шума.
========================================================= */

html body .mitino-solutions--approach .mitino-solutions__grid {
    align-items: stretch !important;
}

html body .mitino-solutions--approach .mitino-solution-card {
    position: relative !important;
    min-height: 285px !important;
    padding: 104px 24px 24px !important;
    overflow: hidden !important;
}

/* Верхний HUD-слой карточки */
html body .mitino-solutions--approach .mitino-solution-card::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 22px !important;
    top: 22px !important;
    width: 66px !important;
    height: 66px !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .28), transparent 58%),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012)) !important;
    border: 1px solid rgba(var(--accent-rgb), .30) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 0 26px rgba(var(--accent-rgb), .10) !important;
    z-index: 1 !important;
}

/* Символ внутри HUD-слоя */
html body .mitino-solutions--approach .mitino-solution-card .mitino-card-list::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 38px !important;
    top: 38px !important;
    width: 34px !important;
    height: 34px !important;
    background-color: var(--accent) !important;
    z-index: 2 !important;
}

/* Разумный минимум — кошелёк / разумная экономия */
html body .mitino-solutions--approach .mitino-solution-card:nth-child(1) .mitino-card-list::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M8 9h5'/%3E%3Cpath d='M8 13h3'/%3E%3Cpath d='M14.5 13.5l1.5 1.5 3-3'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M8 9h5'/%3E%3Cpath d='M8 13h3'/%3E%3Cpath d='M14.5 13.5l1.5 1.5 3-3'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* Оптимальный вариант — баланс / проверенный выбор */
html body .mitino-solutions--approach .mitino-solution-card:nth-child(2) .mitino-card-list::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='M6 7l-4 7h8L6 7Z'/%3E%3Cpath d='M18 7l-4 7h8l-4-7Z'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='M6 7l-4 7h8L6 7Z'/%3E%3Cpath d='M18 7l-4 7h8l-4-7Z'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* С запасом — алмаз / ресурс */
html body .mitino-solutions--approach .mitino-solution-card:nth-child(3) .mitino-card-list::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9l4-6Z'/%3E%3Cpath d='M2 9h20'/%3E%3Cpath d='M6 3l6 18 6-18'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9l4-6Z'/%3E%3Cpath d='M2 9h20'/%3E%3Cpath d='M6 3l6 18 6-18'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* Декоративная тонкая линия справа сверху, чтобы карточки не были голыми */
html body .mitino-solutions--approach .mitino-solution-card strong::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 22px !important;
    top: 54px !important;
    width: 42% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .30), transparent) !important;
    opacity: .75 !important;
}

/* Метка "Рекомендуем" чуть выше и не наезжает на заголовок */
html body .mitino-solutions--approach .mitino-solution-card--highlight::after {
    top: 24px !important;
    right: 22px !important;
}

/* Мобильная версия */
@media (max-width: 767px) {
    html body .mitino-solutions--approach .mitino-solution-card {
        min-height: 0 !important;
        padding: 92px 20px 20px !important;
    }

    html body .mitino-solutions--approach .mitino-solution-card::before {
        left: 20px !important;
        top: 20px !important;
        width: 58px !important;
        height: 58px !important;
        border-radius: 16px !important;
    }

    html body .mitino-solutions--approach .mitino-solution-card .mitino-card-list::before {
        left: 34px !important;
        top: 34px !important;
        width: 30px !important;
        height: 30px !important;
    }

    html body .mitino-solutions--approach .mitino-solution-card strong::before {
        display: none !important;
    }
}
/* =========================================================
   MITINO367 — HOME STEP 5: WEEKLY BUILDS TABS
   Путь: /public_html/bitrix/templates/eshop_bootstrap_v4/template_styles.css
   Вставить в самый конец файла.
========================================================= */

html body .mitino-products--weekly-builds .mitino-section-head {
    align-items: flex-start !important;
    margin-bottom: 18px !important;
}

html body .mitino-weekly-builds__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

html body .mitino-weekly-build-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 43% 57% !important;
    min-height: 330px !important;
    overflow: hidden !important;
    border: 1px solid rgba(var(--accent-rgb), .30) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 76% 18%, rgba(var(--accent-rgb), .13), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.042), rgba(255,255,255,.012)) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

html body .mitino-weekly-build-card:hover {
    border-color: rgba(var(--accent-rgb), .62) !important;
    box-shadow: 0 0 26px rgba(var(--accent-rgb), .14) !important;
    transform: translateY(-2px) !important;
}

html body .mitino-weekly-build-card__top {
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

html body .mitino-weekly-build-card__number,
html body .mitino-weekly-build-card__badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    background: rgba(5,5,5,.72) !important;
    border: 1px solid rgba(var(--accent-rgb), .42) !important;
    color: var(--accent) !important;
    font-size: 12px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1 !important;
}

html body .mitino-weekly-build-card__badge {
    color: #fff !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

html body .mitino-weekly-build-card__image {
    position: relative !important;
    min-height: 330px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), .14), transparent 48%),
        rgba(255,255,255,.030) !important;
}

html body .mitino-weekly-build-card__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 330px !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: brightness(1.05) contrast(1.04) saturate(1.05) !important;
    transition: transform .22s ease, filter .22s ease !important;
}

html body .mitino-weekly-build-card:hover .mitino-weekly-build-card__image img {
    transform: scale(1.035) !important;
    filter: brightness(1.10) contrast(1.05) saturate(1.08) !important;
}

html body .mitino-weekly-build-card__body {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 20px 20px 18px !important;
}

html body .mitino-weekly-build-card__head {
    display: grid !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

html body .mitino-weekly-build-card h3 {
    margin: 0 !important;
    color: var(--text-main) !important;
    font-size: 22px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1.12 !important;
}

html body .mitino-weekly-build-card__tabs {
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 11px !important;
    background: rgba(0,0,0,.22) !important;
}

html body .mitino-weekly-build-card__tabs button {
    height: 30px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
    color: rgba(242,234,223,.64) !important;
    font-size: 12px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    cursor: pointer !important;
}

html body .mitino-weekly-build-card__tabs button:last-child {
    border-right: 0 !important;
}

html body .mitino-weekly-build-card__tabs button.is-active {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
    color: #fff !important;
}

html body .mitino-weekly-build-card__text {
    margin: 0 0 12px !important;
    color: rgba(242,234,223,.72) !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
}

html body .mitino-weekly-build-card__specs {
    display: grid !important;
    gap: 7px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    list-style: none !important;
}

html body .mitino-weekly-build-card__specs li {
    position: relative !important;
    padding-left: 17px !important;
    color: rgba(242,234,223,.84) !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body .mitino-weekly-build-card__specs li::before {
    content: "▸" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: var(--accent) !important;
    font-weight: var(--m367-font-weight-strong) !important;
}

html body .mitino-weekly-build-card__meta {
    margin: auto 0 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(var(--accent-rgb), .14) !important;
}

html body .mitino-weekly-build-card__meta span {
    display: block !important;
    color: rgba(242,234,223,.58) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

html body .mitino-weekly-build-card__bottom {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html body .mitino-weekly-build-card__bottom small {
    display: block !important;
    margin-bottom: 3px !important;
    color: rgba(242,234,223,.48) !important;
    font-size: 10px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
}

html body .mitino-weekly-build-card__bottom strong {
    display: block !important;
    color: var(--text-main) !important;
    font-size: 22px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1 !important;
}

html body .mitino-weekly-build-card__bottom a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 11px !important;
    background: var(--accent) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

html body .mitino-weekly-build-card__bottom a::after {
    content: " →" !important;
}

/* 2 колонки на средних экранах */
@media (max-width: 1280px) {
    html body .mitino-weekly-builds__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Планшет / мобильная версия */
@media (max-width: 900px) {
    html body .mitino-weekly-builds__grid {
        grid-template-columns: 1fr !important;
    }

    html body .mitino-weekly-build-card {
        grid-template-columns: 1fr !important;
    }

    html body .mitino-weekly-build-card__image,
    html body .mitino-weekly-build-card__image img {
        min-height: 230px !important;
        height: 230px !important;
    }
}

@media (max-width: 480px) {
    html body .mitino-weekly-build-card__body {
        padding: 18px 16px 16px !important;
    }

    html body .mitino-weekly-build-card h3 {
        font-size: 20px !important;
    }

    html body .mitino-weekly-build-card__tabs {
        width: 100% !important;
    }

    html body .mitino-weekly-build-card__tabs button {
        flex: 1 1 auto !important;
        padding: 0 6px !important;
        font-size: 11px !important;
    }

    html body .mitino-weekly-build-card__bottom {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    html body .mitino-weekly-build-card__bottom a {
        width: 100% !important;
    }
}
/* =========================================================
   MITINO367 — HOME STEP 6: WEEKLY BUILDS LAYOUT FIX
   Путь: /public_html/bitrix/templates/eshop_bootstrap_v4/template_styles.css
   Вставить в самый конец файла.
   Цель: исправить сжатие карточек "Топовые сборки недели":
   - карточка вертикальная, а не 43/57 в узкой колонке;
   - картинка сверху нормального формата;
   - вкладки не режутся;
   - цена не разваливается на строки;
   - 3 карточки в ряд на desktop, 2 на medium, 1 на mobile.
========================================================= */

html body .mitino-products--weekly-builds {
    overflow: hidden !important;
}

html body .mitino-products--weekly-builds .mitino-section-head {
    align-items: flex-start !important;
    margin-bottom: 18px !important;
}

html body .mitino-weekly-builds__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

html body .mitino-weekly-build-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(var(--accent-rgb), .30) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 76% 18%, rgba(var(--accent-rgb), .12), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.042), rgba(255,255,255,.012)) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

html body .mitino-weekly-build-card:hover {
    border-color: rgba(var(--accent-rgb), .62) !important;
    box-shadow: 0 0 26px rgba(var(--accent-rgb), .14) !important;
    transform: translateY(-2px) !important;
}

html body .mitino-weekly-build-card__top {
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

html body .mitino-weekly-build-card__number,
html body .mitino-weekly-build-card__badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 27px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    background: rgba(5,5,5,.76) !important;
    border: 1px solid rgba(var(--accent-rgb), .42) !important;
    color: var(--accent) !important;
    font-size: 11px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1 !important;
}

html body .mitino-weekly-build-card__badge {
    color: #fff !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Главное исправление: картинка сверху, широкая, не узкая вертикальная щель */
html body .mitino-weekly-build-card__image {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(var(--accent-rgb), .16) !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb), .14), transparent 48%),
        rgba(255,255,255,.030) !important;
}

html body .mitino-weekly-build-card__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: brightness(1.05) contrast(1.04) saturate(1.05) !important;
    transition: transform .22s ease, filter .22s ease !important;
}

html body .mitino-weekly-build-card:hover .mitino-weekly-build-card__image img {
    transform: scale(1.035) !important;
    filter: brightness(1.10) contrast(1.05) saturate(1.08) !important;
}

html body .mitino-weekly-build-card__body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 16px 16px 15px !important;
}

html body .mitino-weekly-build-card__head {
    display: grid !important;
    gap: 10px !important;
    margin-bottom: 11px !important;
}

html body .mitino-weekly-build-card h3 {
    margin: 0 !important;
    color: var(--text-main) !important;
    font-size: 21px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1.12 !important;
}

/* Вкладки растягиваем по ширине карточки, чтобы "Премиум" не обрезался */
html body .mitino-weekly-build-card__tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 11px !important;
    background: rgba(0,0,0,.22) !important;
}

html body .mitino-weekly-build-card__tabs button {
    min-width: 0 !important;
    height: 31px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
    color: rgba(242,234,223,.64) !important;
    font-size: 11px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

html body .mitino-weekly-build-card__tabs button:last-child {
    border-right: 0 !important;
}

html body .mitino-weekly-build-card__tabs button.is-active {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
    color: #fff !important;
}

html body .mitino-weekly-build-card__text {
    margin: 0 0 11px !important;
    color: rgba(242,234,223,.72) !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
}

html body .mitino-weekly-build-card__specs {
    display: grid !important;
    gap: 6px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    list-style: none !important;
}

html body .mitino-weekly-build-card__specs li {
    position: relative !important;
    padding-left: 16px !important;
    color: rgba(242,234,223,.84) !important;
    font-size: 12.5px !important;
    line-height: 1.28 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body .mitino-weekly-build-card__specs li::before {
    content: "▸" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: var(--accent) !important;
    font-weight: var(--m367-font-weight-strong) !important;
}

html body .mitino-weekly-build-card__meta {
    margin: auto 0 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(var(--accent-rgb), .14) !important;
}

html body .mitino-weekly-build-card__meta span {
    display: block !important;
    color: rgba(242,234,223,.58) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body .mitino-weekly-build-card__bottom {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html body .mitino-weekly-build-card__bottom small {
    display: block !important;
    margin-bottom: 5px !important;
    color: rgba(242,234,223,.48) !important;
    font-size: 10px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
}

/* Цена одной строкой, без "от / 129 / 900 / ₽" лесенкой */
html body .mitino-weekly-build-card__bottom strong {
    display: block !important;
    color: var(--text-main) !important;
    font-size: 22px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html body .mitino-weekly-build-card__bottom a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 11px !important;
    background: var(--accent) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

html body .mitino-weekly-build-card__bottom a::after {
    content: " →" !important;
}

/* 2 колонки на средних экранах */
@media (max-width: 1280px) {
    html body .mitino-weekly-builds__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .mitino-weekly-build-card__image {
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
    }
}

/* 1 колонка на планшетах и мобильных */
@media (max-width: 767px) {
    html body .mitino-weekly-builds__grid {
        grid-template-columns: 1fr !important;
    }

    html body .mitino-weekly-build-card__image {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }

    html body .mitino-weekly-build-card__body {
        padding: 16px !important;
    }

    html body .mitino-weekly-build-card__bottom {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    html body .mitino-weekly-build-card__bottom a {
        width: 100% !important;
    }
}
/* =========================================================
   MITINO367 — HOME STEP 7: WEEKLY BUILDS SCENARIO CARDS
   Путь: /public_html/bitrix/templates/eshop_bootstrap_v4/template_styles.css
   Вставить в самый конец файла.
   Цель: привести "Топовые сборки недели" к утверждённой логике:
   6 карточек-сценариев 3×2, не товарная карточка;
   визуал сверху, крупный сценарий, заметные вкладки, характеристики 2×2,
   цена и CTA внизу без визуальной каши.
========================================================= */

/* Секция */
html body .mitino-products--weekly-builds {
    padding: 24px 22px 26px !important;
    border-color: rgba(var(--accent-rgb), .22) !important;
    background:
        radial-gradient(circle at 72% 0%, rgba(var(--accent-rgb), .10), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.030), rgba(255,255,255,.010)) !important;
}

html body .mitino-products--weekly-builds .mitino-section-head {
    align-items: flex-start !important;
    margin-bottom: 18px !important;
}

html body .mitino-products--weekly-builds .mitino-section-head h2 {
    font-size: 26px !important;
    line-height: 1.1 !important;
}

html body .mitino-products--weekly-builds .mitino-section-subtitle {
    max-width: 760px !important;
    margin-top: 8px !important;
    color: rgba(242,234,223,.66) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

/* Сетка 3×2 */
html body .mitino-weekly-builds__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

/* Карточка-сценарий */
html body .mitino-weekly-build-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(var(--accent-rgb), .34) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 78% 8%, rgba(var(--accent-rgb), .13), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
    box-shadow:
        0 18px 45px rgba(0,0,0,.24),
        inset 0 0 0 1px rgba(255,255,255,.018) !important;
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease !important;
}

html body .mitino-weekly-build-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(var(--accent-rgb), .62) !important;
    box-shadow:
        0 22px 52px rgba(0,0,0,.30),
        0 0 24px rgba(var(--accent-rgb), .12) !important;
}

/* Номер и сценарный бейдж */
html body .mitino-weekly-build-card__top {
    position: absolute !important;
    left: 13px !important;
    top: 13px !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

html body .mitino-weekly-build-card__number,
html body .mitino-weekly-build-card__badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    color: var(--accent) !important;
    background: rgba(5,5,5,.76) !important;
    border: 1px solid rgba(var(--accent-rgb), .44) !important;
    font-size: 11px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1 !important;
}

html body .mitino-weekly-build-card__badge {
    color: #fff !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
    border-color: transparent !important;
}

/* Визуал: меньше баннерности, больше карточка сценария */
html body .mitino-weekly-build-card__image {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 176px !important;
    min-height: 176px !important;
    max-height: 176px !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(var(--accent-rgb), .18) !important;
    background:
        radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), .12), transparent 48%),
        rgba(255,255,255,.030) !important;
}

html body .mitino-weekly-build-card__image::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 42% !important;
    background: linear-gradient(180deg, transparent, rgba(5,5,5,.56)) !important;
    pointer-events: none !important;
}

html body .mitino-weekly-build-card__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: brightness(1.06) contrast(1.04) saturate(1.04) !important;
    transition: transform .22s ease, filter .22s ease !important;
}

html body .mitino-weekly-build-card:hover .mitino-weekly-build-card__image img {
    transform: scale(1.03) !important;
    filter: brightness(1.10) contrast(1.05) saturate(1.07) !important;
}

/* Тело */
html body .mitino-weekly-build-card__body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 17px 16px 15px !important;
}

/* Название + вкладки */
html body .mitino-weekly-build-card__head {
    display: grid !important;
    gap: 12px !important;
    margin-bottom: 11px !important;
}

html body .mitino-weekly-build-card h3 {
    margin: 0 !important;
    color: var(--text-main) !important;
    font-size: 22px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1.12 !important;
    letter-spacing: .005em !important;
}

/* Вкладки как главный выбор уровня, а не микрофильтр */
html body .mitino-weekly-build-card__tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border: 1px solid rgba(var(--accent-rgb), .20) !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,.24) !important;
}

html body .mitino-weekly-build-card__tabs button {
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.075) !important;
    background: transparent !important;
    color: rgba(242,234,223,.62) !important;
    font-size: 12px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

html body .mitino-weekly-build-card__tabs button:last-child {
    border-right: 0 !important;
}

html body .mitino-weekly-build-card__tabs button.is-active {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
    color: #fff !important;
}

/* Описание сценария */
html body .mitino-weekly-build-card__text {
    min-height: 52px !important;
    margin: 0 0 12px !important;
    color: rgba(242,234,223,.72) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Характеристики 2×2, а не длинная мелкая простыня */
html body .mitino-weekly-build-card__specs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    list-style: none !important;
}

html body .mitino-weekly-build-card__specs li {
    position: relative !important;
    min-height: 36px !important;
    padding: 8px 9px 8px 20px !important;
    border: 1px solid rgba(var(--accent-rgb), .14) !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.18) !important;
    color: rgba(242,234,223,.84) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow: hidden !important;
}

html body .mitino-weekly-build-card__specs li::before {
    content: "▸" !important;
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    color: var(--accent) !important;
    font-weight: var(--m367-font-weight-strong) !important;
}

/* Корпус/шасси отдельным инженерным параметром */
html body .mitino-weekly-build-card__meta {
    margin: auto 0 13px !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid rgba(var(--accent-rgb), .16) !important;
}

html body .mitino-weekly-build-card__meta span {
    display: block !important;
    color: rgba(242,234,223,.62) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body .mitino-weekly-build-card__meta span::before {
    content: "Корпус: " !important;
    color: rgba(242,234,223,.42) !important;
    font-weight: var(--m367-font-weight-strong) !important;
}

/* Низ карточки: цена + Подробнее */
html body .mitino-weekly-build-card__bottom {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: auto !important;
}

html body .mitino-weekly-build-card__bottom small {
    display: block !important;
    margin-bottom: 5px !important;
    color: rgba(242,234,223,.46) !important;
    font-size: 10px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
}

html body .mitino-weekly-build-card__bottom small {
    font-size: 0 !important;
}

html body .mitino-weekly-build-card__bottom small::before {
    content: "витринная цена" !important;
    font-size: 10px !important;
}

html body .mitino-weekly-build-card__bottom strong {
    display: block !important;
    color: var(--text-main) !important;
    font-size: 23px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 0 16px rgba(var(--accent-rgb), .10) !important;
}

html body .mitino-weekly-build-card__bottom a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    background: var(--accent) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 10px 24px rgba(var(--accent-rgb), .16) !important;
}

html body .mitino-weekly-build-card__bottom a:hover {
    background: var(--accent-hover) !important;
    color: #fff !important;
}

html body .mitino-weekly-build-card__bottom a::after {
    content: " →" !important;
}

/* Адаптив */
@media (max-width: 1280px) {
    html body .mitino-weekly-builds__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .mitino-weekly-build-card__image {
        height: 210px !important;
        min-height: 210px !important;
        max-height: 210px !important;
    }
}

@media (max-width: 767px) {
    html body .mitino-products--weekly-builds {
        padding: 18px 12px !important;
    }

    html body .mitino-products--weekly-builds .mitino-section-head {
        flex-direction: column !important;
        gap: 10px !important;
    }

    html body .mitino-weekly-builds__grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    html body .mitino-weekly-build-card__image {
        height: 210px !important;
        min-height: 210px !important;
        max-height: 210px !important;
    }

    html body .mitino-weekly-build-card__body {
        padding: 16px !important;
    }

    html body .mitino-weekly-build-card__specs {
        grid-template-columns: 1fr !important;
    }

    html body .mitino-weekly-build-card__text {
        min-height: 0 !important;
    }

    html body .mitino-weekly-build-card__bottom {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    html body .mitino-weekly-build-card__bottom a {
        width: 100% !important;
    }
}
/* =========================================================
   MITINO367 — HOME STEP 8: WEEKLY BUILDS REFERENCE VISUAL
   Путь: /public_html/bitrix/templates/eshop_bootstrap_v4/template_styles.css
   Вставить в самый конец файла.
   Цель: привести "Топовые сборки недели" к утверждённому референсу:
   Engineering Control Panel / 6 карточек 3×2 / крупный системник слева /
   сценарий справа / вкладки / 5 характеристик / цена и Подробнее.
========================================================= */

/* Секция как инженерная панель */
html body .mitino-products--weekly-builds {
    position: relative !important;
    padding: 28px 26px 34px !important;
    overflow: hidden !important;
    border: 1px solid rgba(var(--accent-rgb), .30) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
        radial-gradient(circle at 72% 0%, rgba(var(--accent-rgb), .10), transparent 34%),
        linear-gradient(145deg, #0b1111 0%, #050606 72%) !important;
    background-size: 34px 34px, 34px 34px, auto, auto !important;
    box-shadow:
        0 24px 70px rgba(0,0,0,.34),
        inset 0 0 0 1px rgba(255,255,255,.018) !important;
}

html body .mitino-products--weekly-builds::before,
html body .mitino-products--weekly-builds::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    width: 74px !important;
    height: 74px !important;
    pointer-events: none !important;
    border-color: var(--accent) !important;
    opacity: .92 !important;
}

html body .mitino-products--weekly-builds::before {
    left: 0 !important;
    top: 0 !important;
    border-left: 4px solid var(--accent) !important;
    border-top: 4px solid var(--accent) !important;
    clip-path: polygon(0 0, 100% 0, 100% 12px, 18px 12px, 18px 100%, 0 100%) !important;
}

html body .mitino-products--weekly-builds::after {
    right: 0 !important;
    bottom: 0 !important;
    border-right: 4px solid var(--accent) !important;
    border-bottom: 4px solid var(--accent) !important;
    clip-path: polygon(0 calc(100% - 12px), calc(100% - 18px) calc(100% - 12px), calc(100% - 18px) 0, 100% 0, 100% 100%, 0 100%) !important;
}

/* Шапка секции */
html body .mitino-products--weekly-builds .mitino-section-head {
    position: relative !important;
    z-index: 2 !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important;
    padding: 0 2px !important;
}

html body .mitino-products--weekly-builds .mitino-section-head h2 {
    margin: 0 !important;
    color: var(--text-main) !important;
    font-size: 32px !important;
    line-height: 1.05 !important;
    font-weight: var(--m367-font-weight-strong) !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 18px rgba(var(--accent-rgb), .10) !important;
}

html body .mitino-products--weekly-builds .mitino-section-head h2::after {
    content: "." !important;
    color: var(--accent) !important;
}

html body .mitino-products--weekly-builds .mitino-section-subtitle {
    max-width: 660px !important;
    margin-top: 10px !important;
    color: rgba(242,234,223,.68) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
}

html body .mitino-products--weekly-builds .mitino-section-link {
    margin-top: 6px !important;
    color: var(--accent) !important;
    font-size: 13px !important;
    font-weight: var(--m367-font-weight-strong) !important;
}

/* 3×2 сетка */
html body .mitino-weekly-builds__grid {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px 22px !important;
    align-items: stretch !important;
}

/* Карточка как в референсе: горизонтальный engineering card */
html body .mitino-weekly-build-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    min-width: 0 !important;
    min-height: 292px !important;
    overflow: hidden !important;
    border: 1px solid rgba(var(--accent-rgb), .58) !important;
    border-radius: 0 18px 0 18px !important;
    background:
        radial-gradient(circle at 34% 42%, rgba(var(--accent-rgb), .10), transparent 44%),
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.010)) !important;
    box-shadow:
        0 18px 45px rgba(0,0,0,.26),
        inset 0 0 0 1px rgba(255,255,255,.018) !important;
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease !important;
}

/* Ломаные HUD-углы карточки */
html body .mitino-weekly-build-card::before,
html body .mitino-weekly-build-card::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    width: 36px !important;
    height: 36px !important;
    pointer-events: none !important;
    opacity: .95 !important;
}

html body .mitino-weekly-build-card::before {
    left: 0 !important;
    top: 0 !important;
    border-left: 2px solid var(--accent) !important;
    border-top: 2px solid var(--accent) !important;
}

html body .mitino-weekly-build-card::after {
    right: 0 !important;
    bottom: 0 !important;
    border-right: 2px solid var(--accent) !important;
    border-bottom: 2px solid var(--accent) !important;
}

html body .mitino-weekly-build-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(var(--accent-rgb), .84) !important;
    box-shadow:
        0 24px 58px rgba(0,0,0,.34),
        0 0 26px rgba(var(--accent-rgb), .14) !important;
}

/* Убираем текущие верхние бейджи "01 / Игры" из HTML.
   Номер рисуем нормально из CSS по карточке, без дублей типа Офис/Дом. */
html body .mitino-weekly-build-card__top {
    display: none !important;
}

/* Номер карточки в стиле референса */
html body .mitino-weekly-build-card .mitino-weekly-build-card__image::before {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 38px !important;
    border: 2px solid var(--accent) !important;
    border-radius: 7px !important;
    background: rgba(5,5,5,.70) !important;
    color: var(--accent) !important;
    font-size: 22px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1 !important;
    box-shadow: 0 0 18px rgba(var(--accent-rgb), .12) !important;
}

html body .mitino-weekly-build-card:nth-child(1) .mitino-weekly-build-card__image::before { content: "1" !important; }
html body .mitino-weekly-build-card:nth-child(2) .mitino-weekly-build-card__image::before { content: "2" !important; }
html body .mitino-weekly-build-card:nth-child(3) .mitino-weekly-build-card__image::before { content: "3" !important; }
html body .mitino-weekly-build-card:nth-child(4) .mitino-weekly-build-card__image::before { content: "4" !important; }
html body .mitino-weekly-build-card:nth-child(5) .mitino-weekly-build-card__image::before { content: "5" !important; }
html body .mitino-weekly-build-card:nth-child(6) .mitino-weekly-build-card__image::before { content: "6" !important; }

/* Хит недели только у игровой карточки */
html body .mitino-weekly-build-card:nth-child(1) .mitino-weekly-build-card__image::after {
    content: "ХИТ НЕДЕЛИ" !important;
    position: absolute !important;
    left: 52px !important;
    top: 14px !important;
    z-index: 5 !important;
    height: 26px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 0 9px 0 9px !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    letter-spacing: .03em !important;
}

/* Изображение слева */
html body .mitino-weekly-build-card__image {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 292px !important;
    max-height: none !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(var(--accent-rgb), .16) !important;
    border-bottom: 0 !important;
    background:
        radial-gradient(circle at 50% 48%, rgba(var(--accent-rgb), .10), transparent 48%),
        rgba(255,255,255,.020) !important;
}

html body .mitino-weekly-build-card__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 292px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    padding: 44px 10px 18px !important;
    filter: brightness(1.08) contrast(1.04) saturate(1.04) !important;
    transform: none !important;
}

html body .mitino-weekly-build-card:hover .mitino-weekly-build-card__image img {
    transform: scale(1.035) !important;
    filter: brightness(1.12) contrast(1.06) saturate(1.07) !important;
}

/* Градиент поверх картинки отключаем, кроме хит-плашки */
html body .mitino-weekly-build-card__image > img + * {
    display: none !important;
}

/* Правая часть */
html body .mitino-weekly-build-card__body {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 24px 22px 18px !important;
}

html body .mitino-weekly-build-card__head {
    display: grid !important;
    gap: 12px !important;
    margin: 0 0 18px !important;
}

html body .mitino-weekly-build-card h3 {
    margin: 0 !important;
    color: var(--text-main) !important;
    font-size: 20px !important;
    line-height: 1.12 !important;
    font-weight: var(--m367-font-weight-strong) !important;
    letter-spacing: .01em !important;
}

/* Вкладки как в референсе */
html body .mitino-weekly-build-card__tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 31px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 6px !important;
    background: rgba(0,0,0,.26) !important;
}

html body .mitino-weekly-build-card__tabs button {
    min-width: 0 !important;
    height: 31px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
    color: rgba(242,234,223,.58) !important;
    font-size: 11px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

html body .mitino-weekly-build-card__tabs button:last-child {
    border-right: 0 !important;
}

html body .mitino-weekly-build-card__tabs button.is-active {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(var(--accent-rgb), .20) !important;
}

/* Описание сценария на главной не должно раздувать карточку */
html body .mitino-weekly-build-card__text {
    display: none !important;
}

/* Характеристики как список в референсе */
html body .mitino-weekly-build-card__specs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    list-style: none !important;
}

html body .mitino-weekly-build-card__specs li {
    position: relative !important;
    min-height: 0 !important;
    padding: 0 0 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(242,234,223,.74) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
}

html body .mitino-weekly-build-card__specs li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: .52em !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    box-shadow: 0 0 9px rgba(var(--accent-rgb), .38) !important;
}

/* Корпус — снизу слева в теле, как подпись */
html body .mitino-weekly-build-card__meta {
    margin: auto 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
}

html body .mitino-weekly-build-card__meta span {
    display: block !important;
    color: rgba(242,234,223,.50) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

html body .mitino-weekly-build-card__meta span::before {
    content: "" !important;
}

/* Низ: цена + Подробнее */
html body .mitino-weekly-build-card__bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: end !important;
    margin-top: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(var(--accent-rgb), .16) !important;
}

html body .mitino-weekly-build-card__bottom small {
    display: inline-block !important;
    margin: 0 8px 0 0 !important;
    color: rgba(242,234,223,.48) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html body .mitino-weekly-build-card__bottom small {
    font-size: 0 !important;
}

html body .mitino-weekly-build-card__bottom small::before {
    content: "от" !important;
    font-size: 12px !important;
}

html body .mitino-weekly-build-card__bottom strong {
    display: inline-block !important;
    color: var(--text-main) !important;
    font-size: 24px !important;
    font-weight: var(--m367-font-weight-regular) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    letter-spacing: .02em !important;
}

html body .mitino-weekly-build-card__bottom a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--accent) !important;
    font-size: 13px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

html body .mitino-weekly-build-card__bottom a:hover {
    color: var(--accent-hover) !important;
    background: transparent !important;
}

html body .mitino-weekly-build-card__bottom a::after {
    content: " →" !important;
}

/* Desktop: не переключаем на 2 колонки, пока ширина позволяет 3×2 */
@media (max-width: 1280px) {
    html body .mitino-weekly-builds__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Планшет */
@media (max-width: 991px) {
    html body .mitino-weekly-build-card {
        grid-template-columns: 40% 60% !important;
        min-height: 300px !important;
    }

    html body .mitino-weekly-build-card__image,
    html body .mitino-weekly-build-card__image img {
        min-height: 300px !important;
    }
}

/* Мобильная версия — карточка вертикально */
@media (max-width: 767px) {
    html body .mitino-products--weekly-builds {
        padding: 22px 14px 24px !important;
    }

    html body .mitino-products--weekly-builds .mitino-section-head {
        flex-direction: column !important;
        gap: 10px !important;
    }

    html body .mitino-products--weekly-builds .mitino-section-head h2 {
        font-size: 27px !important;
    }

    html body .mitino-weekly-builds__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    html body .mitino-weekly-build-card {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    html body .mitino-weekly-build-card__image {
        grid-column: 1 !important;
        min-height: 230px !important;
        height: 230px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(var(--accent-rgb), .16) !important;
    }

    html body .mitino-weekly-build-card__image img {
        min-height: 230px !important;
        padding: 42px 16px 16px !important;
    }

    html body .mitino-weekly-build-card__body {
        grid-column: 1 !important;
        padding: 18px 16px 16px !important;
    }

    html body .mitino-weekly-build-card__bottom {
        grid-template-columns: 1fr !important;
    }

    html body .mitino-weekly-build-card__bottom a {
        justify-content: flex-start !important;
    }
}
/* =========================================================
   MITINO367 — HOME STEP 9: WEEKLY BUILDS CLEANUP
   Путь: /public_html/bitrix/templates/eshop_bootstrap_v4/template_styles.css
   Вставить в самый конец файла.
   Исправляет:
   - убирает цифры 1–6 и "ХИТ НЕДЕЛИ";
   - убирает двойное "от";
   - возвращает скругление общей рамке блока;
   - подтягивает изображение к смысловой зоне карточки;
   - делает вкладки уровня крупнее и спокойнее;
   - сохраняет HTML-характеристики, а не зашивает текст в картинку.
========================================================= */

/* Общая рамка блока — как остальные секции, не прямоугольный чертёжный ящик */
html body .mitino-products--weekly-builds {
    border-radius: 24px !important;
    border: 1px solid rgba(var(--accent-rgb), .24) !important;
    padding: 26px 24px 30px !important;
    background:
        radial-gradient(circle at 74% 0%, rgba(var(--accent-rgb), .11), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.030), rgba(255,255,255,.010)) !important;
}

/* Убираем декоративные углы секции, которые сделали блок слишком "прямоугольной схемой" */
html body .mitino-products--weekly-builds::before,
html body .mitino-products--weekly-builds::after {
    content: none !important;
    display: none !important;
}

/* Сетка чуть плотнее и спокойнее */
html body .mitino-weekly-builds__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

/* Карточка: скругления как у всего сайта, не острые инженерные зубы */
html body .mitino-weekly-build-card {
    grid-template-columns: 39% 61% !important;
    min-height: 282px !important;
    border-radius: 18px !important;
    border-color: rgba(var(--accent-rgb), .42) !important;
    background:
        radial-gradient(circle at 78% 8%, rgba(var(--accent-rgb), .12), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.040), rgba(255,255,255,.012)) !important;
}

/* Убираем внутренние HUD-углы карточек */
html body .mitino-weekly-build-card::before,
html body .mitino-weekly-build-card::after {
    content: none !important;
    display: none !important;
}

/* Полностью убираем номера и "ХИТ НЕДЕЛИ" */
html body .mitino-weekly-build-card__top,
html body .mitino-weekly-build-card .mitino-weekly-build-card__image::before,
html body .mitino-weekly-build-card .mitino-weekly-build-card__image::after,
html body .mitino-weekly-build-card:nth-child(1) .mitino-weekly-build-card__image::after {
    content: none !important;
    display: none !important;
}

/* Левая зона с изображением: меньше пустоты, объект ближе к смыслу карточки */
html body .mitino-weekly-build-card__image {
    min-height: 282px !important;
    height: 100% !important;
    border-right: 1px solid rgba(var(--accent-rgb), .16) !important;
    background:
        radial-gradient(circle at 48% 50%, rgba(var(--accent-rgb), .12), transparent 52%),
        rgba(255,255,255,.020) !important;
}

html body .mitino-weekly-build-card__image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 282px !important;
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
    filter: brightness(1.08) contrast(1.05) saturate(1.05) !important;
}

/* Правая зона: плотнее, чтобы карточка не выглядела пустой */
html body .mitino-weekly-build-card__body {
    padding: 20px 20px 16px !important;
}

/* Название */
html body .mitino-weekly-build-card h3 {
    font-size: 21px !important;
    line-height: 1.12 !important;
}

/* Вкладки уровня — на всю ширину правой смысловой зоны, крупнее и читаемее */
html body .mitino-weekly-build-card__tabs {
    height: 36px !important;
    border-radius: 10px !important;
    border-color: rgba(var(--accent-rgb), .22) !important;
    background: rgba(0,0,0,.28) !important;
}

html body .mitino-weekly-build-card__tabs button {
    height: 36px !important;
    font-size: 12px !important;
    font-weight: var(--m367-font-weight-strong) !important;
}

/* Список характеристик: ближе к референсу, без карточных чипов */
html body .mitino-weekly-build-card__specs {
    gap: 8px !important;
    margin-bottom: 14px !important;
}

html body .mitino-weekly-build-card__specs li {
    font-size: 13px !important;
    line-height: 1.24 !important;
    color: rgba(242,234,223,.78) !important;
}

/* Корпус аккуратной строкой */
html body .mitino-weekly-build-card__meta {
    margin: auto 0 10px !important;
}

html body .mitino-weekly-build-card__meta span {
    color: rgba(242,234,223,.54) !important;
    font-size: 12px !important;
}

/* Низ: убираем двойное "от".
   Цена уже приходит из PHP как "от 129 900 ₽", поэтому small вообще скрываем. */
html body .mitino-weekly-build-card__bottom small,
html body .mitino-weekly-build-card__bottom small::before {
    content: none !important;
    display: none !important;
}

/* Цена и Подробнее не должны налезать друг на друга */
html body .mitino-weekly-build-card__bottom {
    grid-template-columns: minmax(150px, 1fr) auto !important;
    gap: 14px !important;
    padding-top: 11px !important;
}

html body .mitino-weekly-build-card__bottom strong {
    font-size: 23px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* Подробнее — текстовая инженерная ссылка, не красная товарная кнопка */
html body .mitino-weekly-build-card__bottom a {
    min-height: 32px !important;
    padding: 0 !important;
    color: var(--accent) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: var(--m367-font-weight-strong) !important;
}

/* На средних экранах 2 колонки */
@media (max-width: 1280px) {
    html body .mitino-weekly-builds__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* На мобильном карточка становится вертикальной */
@media (max-width: 767px) {
    html body .mitino-products--weekly-builds {
        border-radius: 20px !important;
        padding: 20px 14px 22px !important;
    }

    html body .mitino-weekly-builds__grid {
        grid-template-columns: 1fr !important;
    }

    html body .mitino-weekly-build-card {
        grid-template-columns: 1fr !important;
    }

    html body .mitino-weekly-build-card__image {
        min-height: 220px !important;
        height: 220px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(var(--accent-rgb), .16) !important;
    }

    html body .mitino-weekly-build-card__image img {
        min-height: 220px !important;
    }

    html body .mitino-weekly-build-card__body {
        padding: 18px 16px 16px !important;
    }

    html body .mitino-weekly-build-card__bottom {
        grid-template-columns: 1fr !important;
    }
}
/* Карточка: меньше доля картинки */
html body .mitino-weekly-build-card {
    grid-template-columns: 34% 66% !important;
    min-height: 250px !important;
}

/* Левая колонка с картинкой */
html body .mitino-weekly-build-card__image {
    min-height: 250px !important;
    height: 250px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .10), transparent 55%),
        rgba(255,255,255,.018) !important;
}

/* Картинка компактнее */
html body .mitino-weekly-build-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    min-height: auto !important;
    max-height: 228px !important;
}

/* Правая часть посвободнее */
html body .mitino-weekly-build-card__body {
    padding: 18px 18px 14px !important;
}

/* Вкладки шире */
html body .mitino-weekly-build-card__tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    height: 38px !important;
}

html body .mitino-weekly-build-card__tabs button {
    width: 100% !important;
    height: 38px !important;
    font-size: 12px !important;
    font-weight: var(--m367-font-weight-strong) !important;
}

/* Метка корпуса чуть заметнее */
html body .mitino-weekly-build-card__meta {
    margin: 10px 0 8px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

/* Низ карточки */
html body .mitino-weekly-build-card__bottom {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: end !important;
    gap: 14px !important;
    padding-top: 10px !important;
}

/* Цена */
html body .mitino-weekly-build-card__bottom strong {
    font-size: 22px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Подробнее — не куцый обрубок */
html body .mitino-weekly-build-card__bottom a {
    min-width: 108px !important;
    justify-content: flex-end !important;
    text-align: right !important;
    font-size: 13px !important;
    font-weight: var(--m367-font-weight-strong) !important;
    color: var(--accent) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* MITINO367 section head v1 — scoped catalog header */
.m367-section-head--catalog {
	margin: 24px 0 34px;
	padding: 0;
}

.m367-section-head--catalog .m367-section-head__crumbs-row {
	margin-bottom: 18px !important;
}

.m367-section-head--catalog .m367-section-head__crumbs {
	min-height: 20px;
}

.m367-section-head--catalog .bx-breadcrumb {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	font-size: 14px;
	line-height: 1.45;
	color: rgba(244, 241, 236, 0.46);
}

.m367-section-head--catalog .bx-breadcrumb-item {
	display: inline-flex;
	align-items: center;
	margin: 0;
	color: rgba(244, 241, 236, 0.46);
}

.m367-section-head--catalog .bx-breadcrumb-item a,
.m367-section-head--catalog .bx-breadcrumb-item span {
	color: rgba(244, 241, 236, 0.58);
	text-decoration: none;
	transition: color 160ms ease, opacity 160ms ease;
}

.m367-section-head--catalog .bx-breadcrumb-item a:hover {
	color: #c84f3a;
	text-decoration: none;
}

.m367-section-head--catalog .bx-breadcrumb-item-text {
	color: rgba(244, 241, 236, 0.42);
}

.m367-section-head--catalog .bx-breadcrumb-item-angle,
.m367-section-head--catalog .bx-breadcrumb-item:after {
	color: rgba(244, 241, 236, 0.28);
	opacity: 0.6;
}

.m367-section-head--catalog #pagetitle.m367-section-head__title {
	margin: 0;
	max-width: 980px;
	color: #f3eee7;
	font-size: clamp(34px, 4vw, 54px);
	line-height: 1.05;
	font-weight: var(--m367-font-weight-strong);
	letter-spacing: -0.035em;
	text-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
}

.m367-section-head--catalog #pagetitle.m367-section-head__title:after {
	content: "";
	display: block;
	width: 112px;
	height: 3px;
	margin-top: 22px;
	border-radius: 999px;
	background: linear-gradient(90deg, #c84f3a 0%, rgba(200, 79, 58, 0.08) 100%);
}

@media (max-width: 767px) {
	.m367-section-head--catalog {
		margin: 18px 0 26px;
	}

	.m367-section-head--catalog .bx-breadcrumb {
		font-size: 12px;
	}

	.m367-section-head--catalog #pagetitle.m367-section-head__title {
		font-size: 32px;
		line-height: 1.1;
	}

	.m367-section-head--catalog #pagetitle.m367-section-head__title:after {
		width: 82px;
		margin-top: 16px;
	}
}
/* /MITINO367 section head v1 */

/* MITINO367 section head v2 — catalog hero details */
.m367-section-head--catalog {
	position: relative;
}

.m367-section-head--catalog .m367-section-head__crumbs-row {
	margin-bottom: 14px !important;
}

.m367-section-head--catalog .m367-section-head__intro {
	max-width: 760px;
	margin-top: 20px;
	color: rgba(244, 241, 236, 0.68);
	font-size: 17px;
	line-height: 1.65;
	font-weight: var(--m367-font-weight-regular);
}

.m367-section-head--catalog .m367-section-head__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
	max-width: 980px;
}

.m367-section-head--catalog .m367-section-head__chip {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 8px 14px;
	border: 1px solid rgba(200, 79, 58, 0.26);
	border-radius: 999px;
	background: rgba(17, 19, 22, 0.78);
	color: rgba(244, 241, 236, 0.72);
	font-size: 13px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.m367-section-head--catalog .m367-section-head__chip--active {
	border-color: rgba(200, 79, 58, 0.58);
	background: linear-gradient(180deg, rgba(200, 79, 58, 0.22), rgba(200, 79, 58, 0.08));
	color: #f4eee8;
}

.m367-section-head--catalog .m367-section-head__chip--muted {
	color: rgba(244, 241, 236, 0.52);
	border-style: dashed;
}

/* Compact status notice only when catalog head exists on page.
   Uses :has intentionally to avoid touching non-catalog pages without another PHP edit. */
body:has(.m367-section-head--catalog) .m367-site-status-notice-wrap {
	margin-top: 0;
	margin-bottom: 20px;
}

body:has(.m367-section-head--catalog) .m367-site-status-notice {
	min-height: 58px;
	padding: 16px 24px;
}

body:has(.m367-section-head--catalog) .m367-site-status-notice__badge {
	white-space: nowrap;
}

body:has(.m367-section-head--catalog) .m367-site-status-notice__text {
	font-size: 16px;
	line-height: 1.45;
}

@media (max-width: 767px) {
	.m367-section-head--catalog .m367-section-head__intro {
		margin-top: 16px;
		font-size: 14px;
		line-height: 1.55;
	}

	.m367-section-head--catalog .m367-section-head__chips {
		gap: 8px;
		margin-top: 18px;
	}

	.m367-section-head--catalog .m367-section-head__chip {
		min-height: 30px;
		padding: 7px 11px;
		font-size: 12px;
	}

	body:has(.m367-section-head--catalog) .m367-site-status-notice {
		padding: 14px 16px;
	}
}
/* /MITINO367 section head v2 */

/* MITINO367 catalog hero panel v3 — orange outline + floating role rail */
.m367-section-head--catalog {
	position: relative;
	max-width: 1180px;
	margin: 28px auto 50px;
	padding: 28px 34px 34px;
	border: 1px solid rgba(200, 79, 58, 0.42);
	border-radius: 24px;
	background:
		radial-gradient(circle at 18% 0%, rgba(200, 79, 58, 0.16), rgba(200, 79, 58, 0) 42%),
		linear-gradient(180deg, rgba(18, 20, 24, 0.94), rgba(7, 8, 10, 0.88));
	box-shadow:
		0 24px 80px rgba(0, 0, 0, 0.34),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
	overflow: visible;
}

.m367-section-head--catalog:before {
	content: "";
	position: absolute;
	left: 24px;
	right: 24px;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(200, 79, 58, 0), rgba(200, 79, 58, 0.72), rgba(200, 79, 58, 0));
	opacity: 0.75;
}

.m367-section-head--catalog .m367-section-head__crumbs-row {
	margin-bottom: 18px !important;
}

.m367-section-head--catalog .bx-breadcrumb {
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: rgba(244, 241, 236, 0.42);
}

.m367-section-head--catalog .bx-breadcrumb-item a,
.m367-section-head--catalog .bx-breadcrumb-item span {
	color: rgba(244, 241, 236, 0.54);
}

.m367-section-head--catalog .bx-breadcrumb-item a:hover {
	color: #d45a43;
}

.m367-section-head--catalog #pagetitle.m367-section-head__title {
	max-width: 900px;
	font-size: clamp(34px, 3.25vw, 46px);
	line-height: 1.04;
	font-weight: var(--m367-font-weight-strong);
	letter-spacing: -0.04em;
	color: #f4eee8;
	text-shadow: 0 16px 44px rgba(0, 0, 0, 0.46);
}

.m367-section-head--catalog #pagetitle.m367-section-head__title:after {
	width: 96px;
	height: 2px;
	margin-top: 20px;
	background: linear-gradient(90deg, #c84f3a 0%, rgba(200, 79, 58, 0.14) 100%);
}

.m367-section-head--catalog .m367-section-head__intro {
	max-width: 760px;
	margin-top: 18px;
	color: rgba(244, 241, 236, 0.70);
	font-size: 16px;
	line-height: 1.58;
	font-weight: var(--m367-font-weight-regular);
}

/* Role rail is below the legal/test notice, visually attached to product grid */
.m367-catalog-role-rail {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 1180px;
	margin: -2px auto 18px;
	padding: 0 2px;
	transform: translateY(10px);
}

.m367-catalog-role-rail__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 8px 14px;
	border: 1px solid rgba(200, 79, 58, 0.30);
	border-radius: 999px;
	background: rgba(17, 19, 22, 0.94);
	color: rgba(244, 241, 236, 0.72);
	font-size: 13px;
	line-height: 1;
	font-weight: var(--m367-font-weight-strong);
	letter-spacing: 0.01em;
	box-shadow:
		0 10px 26px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.m367-catalog-role-rail__chip--active {
	border-color: rgba(200, 79, 58, 0.66);
	background:
		linear-gradient(180deg, rgba(200, 79, 58, 0.28), rgba(200, 79, 58, 0.10)),
		rgba(17, 19, 22, 0.96);
	color: #f7f0e8;
}

.m367-catalog-role-rail__chip--muted {
	color: rgba(244, 241, 236, 0.56);
	border-style: dashed;
}

/* Old v2 chips inside hero are intentionally hidden if cache or markup leaves them behind */
.m367-section-head--catalog .m367-section-head__chips {
	display: none !important;
}

/* Catalog notice becomes a secondary strip between hero and working area */
body:has(.m367-section-head--catalog) .m367-site-status-notice-wrap {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2px;
}

body:has(.m367-section-head--catalog) .m367-site-status-notice {
	min-height: 54px;
	padding: 14px 22px;
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(18, 20, 24, 0.90), rgba(12, 13, 15, 0.86));
	border-color: rgba(200, 79, 58, 0.34);
}

body:has(.m367-section-head--catalog) .m367-site-status-notice__text {
	font-size: 15px;
	line-height: 1.38;
	font-weight: 700;
}

body:has(.m367-section-head--catalog) .m367-site-status-notice__badge {
	font-size: 13px;
	padding: 7px 14px;
}

@media (max-width: 767px) {
	.m367-section-head--catalog {
		margin: 18px auto 34px;
		padding: 22px 18px 26px;
		border-radius: 18px;
	}

	.m367-section-head--catalog #pagetitle.m367-section-head__title {
		font-size: 31px;
		line-height: 1.08;
	}

	.m367-section-head--catalog .m367-section-head__intro {
		font-size: 14px;
		line-height: 1.5;
	}

	.m367-catalog-role-rail {
		margin: 2px auto 16px;
		gap: 8px;
		transform: translateY(4px);
	}

	.m367-catalog-role-rail__chip {
		min-height: 30px;
		padding: 7px 11px;
		font-size: 12px;
	}

	body:has(.m367-section-head--catalog) .m367-site-status-notice {
		padding: 13px 14px;
		border-radius: 16px;
	}
}
/* /MITINO367 catalog hero panel v3 */


/* MITINO367 catalog shell v4 — weekly width alignment */
:root {
	--m367-shell-max-width: 1360px; /* если weekly у тебя на другом значении — заменим на него */
}

/* Общая рабочая ширина как у weekly */
body:has(.m367-section-head--catalog) .bx-content-section,
body:has(.m367-section-head--catalog) .m367-site-status-notice-wrap,
body:has(.m367-section-head--catalog) .m367-catalog-role-rail,
body:has(.m367-section-head--catalog) .m367-section-head--catalog {
	max-width: var(--m367-shell-max-width);
	margin-left: auto;
	margin-right: auto;
}

/* HERO / TITLE PANEL */
.m367-section-head--catalog {
	margin-top: 26px;
	margin-bottom: 42px;
	padding: 24px 30px 26px;
	border: 1px solid rgba(200, 79, 58, 0.42);
	border-radius: 24px;
	background:
		radial-gradient(circle at 18% 0%, rgba(200, 79, 58, 0.14), rgba(200, 79, 58, 0) 42%),
		linear-gradient(180deg, rgba(16, 18, 22, 0.96), rgba(8, 9, 11, 0.92));
	box-shadow:
		0 18px 56px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255,255,255,0.03);
}

/* BREADCRUMBS */
.m367-section-head--catalog .bx-breadcrumb {
	font-size: 13px;
	line-height: 1.45;
	color: rgba(244, 241, 236, 0.68);
}

.m367-section-head--catalog .bx-breadcrumb-item {
	color: rgba(244, 241, 236, 0.68);
}

.m367-section-head--catalog .bx-breadcrumb-item a {
	color: rgba(244, 241, 236, 0.72);
	text-decoration: none;
}

.m367-section-head--catalog .bx-breadcrumb-item a:hover {
	color: #d45a43;
}

.m367-section-head--catalog .bx-breadcrumb-item:last-child span,
.m367-section-head--catalog .bx-breadcrumb-item:last-child a {
	color: #f4eee8;
	font-weight: 600;
}

.m367-section-head--catalog .bx-breadcrumb-item + .bx-breadcrumb-item:before {
	opacity: 0.75;
}

/* TITLE */
.m367-section-head--catalog #pagetitle.m367-section-head__title {
	max-width: 920px;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: clamp(34px, 2.7vw, 42px);
	line-height: 1.08;
	font-weight: var(--m367-font-weight-strong);
	letter-spacing: -0.03em;
	color: #f4eee8;
	text-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}

.m367-section-head--catalog #pagetitle.m367-section-head__title:after {
	width: 82px;
	height: 2px;
	margin-top: 14px;
	background: linear-gradient(90deg, #c84f3a 0%, rgba(200, 79, 58, 0.12) 100%);
}

/* INTRO */
.m367-section-head--catalog .m367-section-head__intro {
	max-width: 760px;
	margin-top: 10px;
	color: rgba(244, 241, 236, 0.78);
	font-size: 15px;
	line-height: 1.55;
	font-weight: var(--m367-font-weight-regular);
}

/* STATUS NOTICE — same shell */
body:has(.m367-section-head--catalog) .m367-site-status-notice-wrap {
	margin-bottom: 4px;
}

body:has(.m367-section-head--catalog) .m367-site-status-notice {
	border-radius: 20px;
	border: 1px solid rgba(200, 79, 58, 0.34);
	background:
		linear-gradient(180deg, rgba(18,20,24,0.92), rgba(11,12,14,0.90));
}

/* ROLE RAIL */
.m367-catalog-role-rail {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 0;
	margin-bottom: 18px;
	padding: 0 4px;
	transform: translateY(8px);
}

.m367-catalog-role-rail__chip {
	min-height: 34px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(200, 79, 58, 0.34);
	background: rgba(16, 18, 22, 0.96);
	color: rgba(244, 241, 236, 0.76);
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

.m367-catalog-role-rail__chip--active {
	background:
		linear-gradient(180deg, rgba(200,79,58,0.24), rgba(200,79,58,0.08)),
		rgba(16,18,22,0.98);
	border-color: rgba(200,79,58,0.62);
	color: #f7f0e8;
}

/* PRODUCT/FILTER SHELL alignment */
body:has(.m367-section-head--catalog) .workarea .container.bx-content-section {
	max-width: var(--m367-shell-max-width);
	padding-left: 24px;
	padding-right: 24px;
}

/* mobile */
@media (max-width: 767px) {
	:root {
		--m367-shell-max-width: 100%;
	}

	.m367-section-head--catalog {
		padding: 20px 18px 22px;
		border-radius: 18px;
		margin-bottom: 28px;
	}

	.m367-section-head--catalog #pagetitle.m367-section-head__title {
		font-size: 30px;
		line-height: 1.08;
	}

	.m367-section-head--catalog .bx-breadcrumb {
		font-size: 12px;
	}

	.m367-catalog-role-rail {
		justify-content: flex-start;
		transform: translateY(4px);
	}
}
/* /MITINO367 catalog shell v4 */

/* MITINO367 catalog hero v4.1 hotfix — scope, breadcrumbs, title */

/* Do not show network role chips on root catalog page */
body:not(:has(.m367-section-head--catalog)) .m367-catalog-role-rail {
	display: none !important;
}

/* Stronger breadcrumb visibility through real container, not guessed Bitrix classes */
.m367-section-head--catalog #navigation,
.m367-section-head--catalog #navigation * {
	color: rgba(244, 241, 236, 0.72) !important;
}

.m367-section-head--catalog #navigation a {
	color: rgba(244, 241, 236, 0.78) !important;
	text-decoration: none !important;
}

.m367-section-head--catalog #navigation a:hover {
	color: #d45a43 !important;
	text-decoration: none !important;
}

.m367-section-head--catalog #navigation span,
.m367-section-head--catalog #navigation .bx-breadcrumb-item-text,
.m367-section-head--catalog #navigation .breadcrumb-item {
	color: rgba(244, 241, 236, 0.68) !important;
}

/* Title fallback: apply even if the extra class is missing */
.m367-section-head--catalog #pagetitle {
	max-width: 920px !important;
	margin-top: 10px !important;
	margin-bottom: 10px !important;
	font-size: clamp(34px, 2.7vw, 42px) !important;
	line-height: 1.08 !important;
	font-weight: var(--m367-font-weight-strong) !important;
	letter-spacing: -0.03em !important;
	color: #f4eee8 !important;
	text-shadow: 0 10px 30px rgba(0, 0, 0, 0.34) !important;
}

.m367-section-head--catalog #pagetitle:after {
	content: "" !important;
	display: block !important;
	width: 82px !important;
	height: 2px !important;
	margin-top: 14px !important;
	border-radius: 999px !important;
	background: linear-gradient(90deg, #c84f3a 0%, rgba(200, 79, 58, 0.12) 100%) !important;
}

/* Root catalog should not inherit network-role rail spacing */
body:has(.m367-section-head--catalog) .m367-catalog-role-rail:empty {
	display: none !important;
}

/* /MITINO367 catalog hero v4.1 hotfix */

/* MITINO367 catalog hero visual v4.2 — CSS only polish */

/* One visual shell for catalog pages */
:root {
	--m367-catalog-shell: 1320px;
}

/* Align catalog shell: hero / notice / role rail / workspace */
body:has(.m367-section-head--catalog) .m367-section-head--catalog,
body:has(.m367-section-head--catalog) .m367-site-status-notice-wrap,
body:has(.m367-section-head--catalog) .m367-catalog-role-rail,
body:has(.m367-section-head--catalog) .workarea .container.bx-content-section {
	max-width: var(--m367-catalog-shell) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Hero panel: less poster, more engineering control panel */
/* ЗАГОЛОВОК РАЗДЕЛА — БЕЗ КОРОБКИ (25.09, владелец: «заголовок можно
   уменьшить однозначно например убрав рамку и сжав отступы»).

   Плашка занимала 125 px: рамка цвета марки, градиент, тень в 54 px и отступы
   24/30/26. Это оформление для чего-то, что нужно разглядывать, а разглядывают
   тут товары — заголовок лишь говорит, где мы. Рамка, фон и тень сняты,
   отступы сжаты; значок и подчёркивание остались, они и держат ритм.

   Боковых отступов больше нет: заголовок встаёт по той же левой границе, что и
   всё содержимое колонки, — коробка их добавляла и сдвигала строку вправо. */
.m367-section-head--catalog {
	margin-top: 14px !important;
	margin-bottom: 18px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Breadcrumbs: visible, but still quiet */
.m367-section-head--catalog #navigation,
.m367-section-head--catalog #navigation * {
	color: rgba(244, 241, 236, 0.72) !important;
}

.m367-section-head--catalog #navigation {
	margin-bottom: 0 !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	letter-spacing: 0.01em !important;
}

.m367-section-head--catalog #navigation a {
	color: rgba(244, 241, 236, 0.72) !important;
	text-decoration: none !important;
	transition: color 160ms ease, opacity 160ms ease !important;
}

.m367-section-head--catalog #navigation a:hover {
	color: #d45a43 !important;
	text-decoration: none !important;
}

.m367-section-head--catalog #navigation span,
.m367-section-head--catalog #navigation .bx-breadcrumb-item-text {
	color: rgba(244, 241, 236, 0.84) !important;
	font-weight: 600 !important;
}

/* Title: smaller, tighter, closer to badge/banner language */
.m367-section-head--catalog #pagetitle {
	max-width: 880px !important;
	margin-top: 12px !important;
	margin-bottom: 8px !important;
	color: #f4eee8 !important;
	font-size: clamp(30px, 2.45vw, 40px) !important;
	line-height: 1.08 !important;
	font-weight: 760 !important;
	letter-spacing: -0.028em !important;
	text-shadow: 0 10px 30px rgba(0, 0, 0, 0.34) !important;
}

.m367-section-head--catalog #pagetitle:after {
	content: "" !important;
	display: block !important;
	width: 74px !important;
	height: 2px !important;
	margin-top: 13px !important;
	border-radius: 999px !important;
	background: linear-gradient(90deg, #c84f3a 0%, rgba(200, 79, 58, 0.12) 100%) !important;
}

/* Intro: more compact */
.m367-section-head--catalog .m367-section-head__intro {
	max-width: 760px !important;
	margin-top: 12px !important;
	color: rgba(244, 241, 236, 0.76) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	font-weight: var(--m367-font-weight-regular) !important;
}

/* Status notice: secondary, not the page hero */
body:has(.m367-section-head--catalog) .m367-site-status-notice-wrap {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

body:has(.m367-section-head--catalog) .m367-site-status-notice {
	min-height: 52px !important;
	padding: 13px 22px !important;
	border-radius: 18px !important;
	border-color: rgba(200, 79, 58, 0.34) !important;
	background:
		linear-gradient(180deg, rgba(18, 20, 24, 0.92), rgba(11, 12, 14, 0.90)) !important;
	box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22) !important;
}

body:has(.m367-section-head--catalog) .m367-site-status-notice__badge {
	padding: 7px 14px !important;
	font-size: 13px !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}

body:has(.m367-section-head--catalog) .m367-site-status-notice__text {
	font-size: 15px !important;
	line-height: 1.38 !important;
	font-weight: 700 !important;
}

/* Role rail: only visible where PHP outputs it; align above products */
.m367-catalog-role-rail {
	justify-content: flex-end !important;
	gap: 10px !important;
	margin-top: 10px !important;
	margin-bottom: 16px !important;
	padding: 0 4px !important;
	transform: none !important;
}

.m367-catalog-role-rail__chip {
	min-height: 32px !important;
	padding: 7px 13px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(200, 79, 58, 0.34) !important;
	background: rgba(16, 18, 22, 0.96) !important;
	color: rgba(244, 241, 236, 0.78) !important;
	font-size: 12px !important;
	line-height: 1 !important;
	font-weight: 760 !important;
	box-shadow:
		0 8px 22px rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.m367-catalog-role-rail__chip--active {
	background:
		linear-gradient(180deg, rgba(200, 79, 58, 0.26), rgba(200, 79, 58, 0.08)),
		rgba(16, 18, 22, 0.98) !important;
	border-color: rgba(200, 79, 58, 0.66) !important;
	color: #f7f0e8 !important;
}

/* Catalog workspace: keep aligned with shell.
   На телефоне поля меньше: 22 px по краям при экране 390 — это десятая часть
   ширины, и карточка товара сжималась до 310 px (владелец 21.09: «в мобиле
   зажимаемся в блоки, надо использовать всю ширину»). */
/* КАТАЛОГ СТОИТ НА ОБЩЕЙ ОСИ, А НЕ В 44 px ОТ НЕЁ (25.09, владелец: «мы не
   используем всю заданную ширину, у нас фильтр и товары уже»).

   Ширина 1200 — канон единой оси (решение владельца 06.07), и он соблюдался:
   заголовок шёл от края 170 до 1370. А сетка «фильтр + товары» лежит внутри
   контейнера, который эти 22 px по краям забирал себе, — 1156 от 192, то есть
   уже и правее заголовка. Полей каталогу не нужно: их держит сама оболочка,
   а внутри `.row` и колонка уже имеют свои отступы.

   Телефонное правило ниже оставлено: там поля отдаёт содержимое. */
body:has(.m367-section-head--catalog) .workarea .container.bx-content-section {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (max-width: 767px) {
	/* На телефоне поля отдаёт не контейнер, а само содержимое (см.
	   m367_catalog.css, блок «без блоков, во всю ширину»): карточки там
	   перестают быть карточками и держат свой отступ в 14 px. Оставить поля и
	   здесь значило бы платить за край дважды. */
	body:has(.m367-section-head--catalog) .workarea .container.bx-content-section {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Mobile */
@media (max-width: 767px) {
	:root {
		--m367-catalog-shell: 100%;
	}

	/* Плашка раздела на телефоне ужата вдвое (25.09, владелец: «можно ещё раза
	   в два уменьшить плюс отступы подрезать»). Было 134 px под один заголовок
	   при экране в 780 — шестая часть высоты уходила на подпись к списку. */
	.m367-section-head--catalog {
		margin-top: 10px !important;
		margin-bottom: 14px !important;
		padding: 10px 14px 12px !important;
		border-radius: 14px !important;
	}

	.m367-section-head--catalog #navigation {
		font-size: 12px !important;
	}

	/* КЕГЛЬ ЗАГОЛОВКА РАЗДЕЛА НА ТЕЛЕФОНЕ (25.09, владелец: «на телефоне меньше
	   кег шрифта»). Было 30 px: «Беспроводное оборудование Wi-Fi / Bluetooth»
	   занимало ТРИ строки и 112 px высоты — на экране 390 px это весь первый
	   экран под один заголовок.

	   Правлю ЗДЕСЬ, а не новым правилом в своём слое: кегль этого заголовка
	   задан в файле ШЕСТЬ раз (clamp(34,4vw,54), 32px, clamp(34,2.7vw,42),
	   clamp(30,2.45vw,40), 31px, 30px), и седьмой слой поверх — ровно то, из-за
	   чего разобраться в нём уже нельзя. Побеждает это правило, его и меняем. */
	.m367-section-head--catalog #pagetitle {
		font-size: 18px !important;
		line-height: 1.18 !important;
	}

	/* Декоративная полоска под заголовком на телефоне снята: она стоит 16 px
	   отступа плюс свою высоту, а отделять заголовок от чипов там и так есть
	   чем — плашка кончается краем. */
	.m367-section-head--catalog #pagetitle:after {
		display: none !important;
	}

	.m367-section-head--catalog .m367-section-head__intro {
		font-size: 14px !important;
		line-height: 1.5 !important;
	}

	.m367-catalog-role-rail {
		justify-content: flex-start !important;
		gap: 8px !important;
		margin-top: 8px !important;
		margin-bottom: 14px !important;
	}

	.m367-catalog-role-rail__chip {
		min-height: 30px !important;
		padding: 7px 11px !important;
		font-size: 12px !important;
	}

	body:has(.m367-section-head--catalog) .m367-site-status-notice {
		padding: 13px 14px !important;
		border-radius: 16px !important;
	}
}

/* /MITINO367 catalog hero visual v4.2 */

/* MITINO367 catalog breadcrumbs + search prep v1 */

/* Breadcrumbs: make them readable, not ghost text from the CMS basement */
.m367-section-head--catalog #navigation {
	font-size: 13px !important;
	line-height: 1.45 !important;
	margin-bottom: 2px !important;
	color: rgba(244, 241, 236, 0.82) !important;
}

.m367-section-head--catalog #navigation a {
	color: rgba(244, 241, 236, 0.82) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
}

.m367-section-head--catalog #navigation a:hover {
	color: #e2674d !important;
	text-decoration: none !important;
}

.m367-section-head--catalog #navigation span,
.m367-section-head--catalog #navigation .bx-breadcrumb-item-text {
	color: rgba(244, 241, 236, 0.92) !important;
	font-weight: 700 !important;
}

.m367-section-head--catalog #navigation .bx-breadcrumb-item-angle,
.m367-section-head--catalog #navigation .breadcrumb-separator,
.m367-section-head--catalog #navigation i {
	color: rgba(244, 241, 236, 0.42) !important;
	opacity: 0.8 !important;
}

/* Catalog search shell, safe even before markup exists */
.m367-catalog-section-search {
	max-width: var(--m367-catalog-shell, 1320px);
	margin: -22px auto 20px;
	padding: 0 2px;
}

.m367-catalog-section-search__form {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px;
	border: 1px solid rgba(200, 79, 58, 0.34);
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(18, 20, 24, 0.92), rgba(10, 11, 13, 0.90));
	box-shadow:
		0 14px 38px rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.m367-catalog-section-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0 14px;
	border: 1px solid rgba(244, 241, 236, 0.10);
	border-radius: 12px;
	background: rgba(5, 6, 8, 0.72);
	color: #f4eee8;
	font-size: 14px;
	font-weight: 600;
	outline: none;
}

.m367-catalog-section-search__input::placeholder {
	color: rgba(244, 241, 236, 0.42);
}

.m367-catalog-section-search__input:focus {
	border-color: rgba(200, 79, 58, 0.64);
	box-shadow: 0 0 0 3px rgba(200, 79, 58, 0.14);
}

.m367-catalog-section-search__button {
	flex: 0 0 auto;
	height: 40px;
	padding: 0 18px;
	border: 1px solid rgba(200, 79, 58, 0.70);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(200, 79, 58, 0.95), rgba(156, 55, 42, 0.95));
	color: #fff;
	font-size: 13px;
	font-weight: var(--m367-font-weight-strong);
	letter-spacing: 0.01em;
	cursor: pointer;
}

.m367-catalog-section-search__button:hover {
	filter: brightness(1.07);
}

.m367-catalog-section-search__hint {
	flex: 0 0 auto;
	color: rgba(244, 241, 236, 0.48);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.m367-catalog-section-search {
		margin: -14px auto 16px;
		padding: 0;
	}

	.m367-catalog-section-search__form {
		flex-wrap: wrap;
		border-radius: 16px;
	}

	.m367-catalog-section-search__button {
		width: 100%;
	}

	.m367-catalog-section-search__hint {
		width: 100%;
		white-space: normal;
	}
}

/* /MITINO367 catalog breadcrumbs + search prep v1 */


/* End */


/* Start:/local/templates/.default/css/m367_catalog.css?1791204182219575*/
/* =============================================================================
   МИТИНО367 — единый слой каталога (18.09.2026)

   Владелец слоя: этот файл. Каталог не заводит своих цветов, шрифтов и отступов:
   всё берётся из общих токенов (m367_tokens.css) и основания (m367_site_foundation.css).
   Порядок дресс-кода: общий каркас сайта → семейство страниц → контракт страницы.

   Заменяет собой прежние слои каталога:
     mitino367_catalog_toolbar_v1.css, mitino367_catalog_toolbar_shell_final_v1.css,
     mitino367_toolbar_shell_patch_v1.css, m367_section58_product_values.css
     и надстройки v1…v13 внутри style.css шаблонов catalog.item / catalog.element.

   Подключается из header.php на всех адресах /catalog/: тело получает класс
   .m367-catalog-page, страница товара — ещё и .m367-product-page.
   ========================================================================== */

/* --- 1. Каркас страницы каталога ---------------------------------------- */

.m367-catalog-page .m367-section-head {
	/* Крупная секция идёт без декоративной внешней рамки (канон главной 25.06) */
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-inline: 0;
}

.m367-catalog-page .m367-section-head__title {
	font-size: var(--m367-font-size-page-title);
	line-height: var(--m367-line-height-page-title);
	letter-spacing: var(--m367-letter-spacing-page-title);
	color: var(--m367-page-title-color);
	margin: 0;
}

.m367-catalog-page .m367-section-head__intro {
	max-inline-size: var(--m367-content-copy-max-inline);
	color: var(--m367-text-secondary);
	font-size: var(--m367-font-size-body);
	line-height: var(--m367-line-height-copy);
	margin-top: 12px;
}

/* Сетка «фильтр + товары»: одна строка, без bootstrap-колонок с отрицательными полями */
.m367-catalog-layout {
	display: grid;
	grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
	gap: var(--m367-grid-gap);
	align-items: start;
	margin-block: 0 var(--m367-section-gap-y);
}

.m367-catalog-layout--no-filter { grid-template-columns: minmax(0, 1fr); }

.m367-catalog-filter-col,
.m367-catalog-products-col { min-width: 0; }

/* Фильтр едет вместе со страницей: полка длинная, и без этого он уходит с экрана
   после первых карточек. Садится под липкую стопку навигации; своя прокрутка —
   у «Проводного» фильтр выше экрана, иначе его низ не достать. */
@media (min-width: 992px) {
	.m367-catalog-filter-col {
		position: sticky;
		top: calc(var(--m367-sticky-stack-bottom, 0px) + var(--m367-grid-gap) / 2);
		max-height: calc(100vh - var(--m367-sticky-stack-bottom, 0px) - var(--m367-grid-gap));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

@media (max-width: 991px) {
	.m367-catalog-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Заголовок блока подборки («Популярные в разделе», «Вы смотрели») */
.m367-catalog-page .catalog-block-header {
	font-size: var(--m367-font-size-component-title);
	line-height: var(--m367-line-height-heading);
	font-weight: var(--m367-font-weight-strong);
	color: var(--m367-foundation-text);
	margin-bottom: 16px;
}

/* --- 2. Фильтр раздела --------------------------------------------------- */

.m367-catalog-page .smart-filter {
	background: var(--m367-card-bg);
	border: 1px solid var(--m367-card-border);
	border-radius: var(--m367-card-radius);
	padding: 18px;
	color: var(--m367-foundation-text);
	margin-bottom: 0;
}

.m367-catalog-page .smart-filter-title {
	font-size: var(--m367-font-size-body);
	font-weight: var(--m367-font-weight-strong);
	line-height: var(--m367-line-height-heading);
	color: var(--m367-foundation-text);
	margin-bottom: 8px;
}

.m367-catalog-page .smart-filter-parameters-box {
	border-top: 1px solid var(--m367-action-border-divider);
	padding-top: 4px;
}

.m367-catalog-page .smart-filter-section > .row > .smart-filter-parameters-box:first-child { border-top: 0; padding-top: 0; }

.m367-catalog-page .smart-filter-parameters-box-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	cursor: pointer;
	color: var(--m367-foundation-text);
	font-size: var(--m367-font-size-small);
	font-weight: var(--m367-font-weight-medium);
	background: transparent;
	border: 0;
}

/* Подпись группы красил стоковый шаблон: синяя ссылка у свёрнутых групп и тёмно-серый
   у раскрытой — на тёмном фоне одно кричит, другое не читается. Цвет берём у текста. */
.m367-catalog-page .smart-filter-parameters-box-title-text {
	margin-inline-end: auto;
	color: var(--m367-foundation-text);
	font-size: var(--m367-font-size-small);
	font-weight: var(--m367-font-weight-medium);
}

.m367-catalog-page .smart-filter-parameters-box-title:hover .smart-filter-parameters-box-title-text { color: var(--m367-brand-orange); }
.m367-catalog-page .smart-filter-parameters-box.bx-active .smart-filter-parameters-box-title-text { color: var(--m367-foundation-text); }

.m367-catalog-page .smart-filter-angles {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid var(--m367-text-secondary);
	border-bottom: 1.5px solid var(--m367-text-secondary);
	transform: rotate(45deg);
	transition: transform var(--m367-motion-control);
}

.m367-catalog-page .smart-filter-angle-up .smart-filter-angles { transform: rotate(-135deg); }

.m367-catalog-page .smart-filter-parameters-box-container { padding-bottom: 12px; }

.m367-catalog-page .smart-filter input[type="text"],
.m367-catalog-page .smart-filter input[type="number"],
.m367-catalog-page .smart-filter .form-control {
	background: var(--m367-input-bg);
	color: var(--m367-input-text);
	border: 1px solid var(--m367-input-border);
	border-radius: var(--m367-input-radius);
	min-height: var(--m367-control-height);
	box-shadow: none;
}

.m367-catalog-page .smart-filter .form-control:focus {
	border-color: var(--m367-input-border-focus);
	box-shadow: var(--m367-input-focus-ring);
	background: var(--m367-input-bg);
	color: var(--m367-input-text);
}

/* Ползунок цены: оранжевый сигнал вместо стоковой синей темы Битрикса */
.m367-catalog-page .smart-filter-slider-track {
	background: var(--m367-action-bg-faint);
	border-radius: 999px;
}

.m367-catalog-page .smart-filter-slider-price-bar-vd,
.m367-catalog-page .smart-filter-slider-price-bar-vn { background: var(--m367-accent-muted); }
.m367-catalog-page .smart-filter-slider-price-bar-v { background: var(--m367-action-bg-faint); }

.m367-catalog-page .smart-filter-slider-handle {
	background: var(--m367-brand-orange);
	border: 0;
	box-shadow: none;
	border-radius: 50%;
}

/* Линейка цены: пять подписей в узкой колонке налезали друг на друга.
   Края дают границу диапазона, точные числа стоят в полях «От» и «До». */
.m367-catalog-page .smart-filter-slider-ruler { display: none; }
.m367-catalog-page .smart-filter-slider-ruler.p1,
.m367-catalog-page .smart-filter-slider-ruler.p5 { display: block; }
.m367-catalog-page .smart-filter-slider-ruler span {
	display: inline-block;
	white-space: nowrap;
	color: var(--m367-text-tertiary);
	font-size: var(--m367-font-size-caption);
}

/* Подписи линейки стоковый шаблон ставит на точки шкалы, и при длинном хвосте цен
   «360» и «148 400» слипались у левого края. Это границы диапазона — им место по
   краям дорожки, как подписям к полям «От» и «До». */
.m367-catalog-page .smart-filter-slider-track-container { position: relative; padding-bottom: 20px; }

.m367-catalog-page .smart-filter-slider-ruler.p1,
.m367-catalog-page .smart-filter-slider-ruler.p5 {
	position: absolute;
	top: auto;
	bottom: 0;
	left: auto;
	right: auto;
}

.m367-catalog-page .smart-filter-slider-ruler.p1 { left: 0; }
.m367-catalog-page .smart-filter-slider-ruler.p5 { right: 0; }

/* Стоковая подпись — блок в 100 px, центрированный на метке: у правого края она
   наполовину вылезала за карточку. Привязываем текст к своей стороне по ширине слова. */
.m367-catalog-page .smart-filter-slider-ruler.p1 span,
.m367-catalog-page .smart-filter-slider-ruler.p5 span {
	width: auto;
	margin-left: 0;
	transform: none;
}

.m367-catalog-page .smart-filter-slider-ruler.p1 span { left: 0; right: auto; text-align: left; }
.m367-catalog-page .smart-filter-slider-ruler.p5 span { left: auto; right: 0; text-align: right; }

/* Галочка фильтра — по дресс-коду: тёмная клетка, выбранная заливается сигналом */
.m367-catalog-page .smart-filter .form-check-input[type="checkbox"] {
	appearance: none;
	inline-size: var(--m367-checkbox-size);
	block-size: var(--m367-checkbox-size);
	margin-top: .15em;
	border: 1px solid var(--m367-action-border-control);
	border-radius: 5px;
	background: var(--m367-input-bg);
	cursor: pointer;
	transition: background var(--m367-motion-control), border-color var(--m367-motion-control);
}

.m367-catalog-page .smart-filter .form-check-input[type="checkbox"]:hover { border-color: var(--m367-action-border-hover); }

.m367-catalog-page .smart-filter .form-check-input[type="checkbox"]:checked {
	background: var(--m367-button-active-1-bg);
	border-color: var(--m367-button-active-1-bg);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
	background-size: 78%;
	background-position: center;
	background-repeat: no-repeat;
}

.m367-catalog-page .smart-filter .form-check-input[type="checkbox"]:focus-visible { outline: var(--m367-focus-ring); outline-offset: 2px; }

.m367-catalog-page .smart-filter .smart-filter-checkbox-text {
	color: var(--m367-foundation-text);
	font-size: var(--m367-font-size-small);
	line-height: var(--m367-line-height-meta);
	cursor: pointer;
}

.m367-catalog-page .smart-filter .smart-filter-checkbox-text:hover { color: var(--m367-brand-orange); }
.m367-catalog-page .smart-filter .form-check.disabled .smart-filter-checkbox-text { color: var(--m367-text-tertiary); cursor: default; }

/* Кнопки фильтра. «Показать» — главное действие (Active1), «Сбросить» — пассивная
   роль, а не синяя ссылка. Кольцо фокуса у бутстрапа синее (rgba(0,123,255,.25)) —
   меняем на своё: синего на сайте нет. */
.m367-catalog-page .smart-filter-button-box { padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.m367-catalog-page .smart-filter .smart-filter-parameters-box-container { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.m367-catalog-page .smart-filter .btn {
	min-height: var(--m367-button-min-h);
	padding-inline: var(--m367-button-pad-x);
	border-radius: var(--m367-button-radius);
	font-size: var(--m367-button-font-size);
	font-weight: var(--m367-button-weight);
	line-height: var(--m367-button-line-height);
	box-shadow: none;
	text-decoration: none;
	transition: background var(--m367-button-motion), color var(--m367-button-motion), border-color var(--m367-button-motion);
}

/* !important здесь не каприз: старый слой шаблона держит на всех .btn-primary
   `background: var(--accent) !important` со своим прежним акцентом #c44932.
   Пока этот слой жив, перебить его можно только тем же оружием. */
.m367-catalog-page .smart-filter .btn-primary {
	background: var(--m367-button-active-1-bg) !important;
	border: 1px solid var(--m367-button-active-1-border) !important;
	color: var(--m367-button-active-1-text) !important;
}

.m367-catalog-page .smart-filter .btn-primary:hover {
	background: var(--m367-button-active-1-bg-hover) !important;
	border-color: var(--m367-button-active-1-border-hover) !important;
	color: var(--m367-button-active-1-text-hover) !important;
}

.m367-catalog-page .smart-filter .btn-link {
	background: var(--m367-button-passive-bg);
	border: 1px solid var(--m367-button-passive-border);
	color: var(--m367-button-passive-text);
}

.m367-catalog-page .smart-filter .btn-link:hover {
	background: var(--m367-button-passive-bg-hover);
	border-color: var(--m367-button-passive-border-hover);
	color: var(--m367-button-passive-text-hover);
	text-decoration: none;
}

.m367-catalog-page .smart-filter .btn:focus,
.m367-catalog-page .smart-filter .btn:active,
.m367-catalog-page .smart-filter .btn.focus { box-shadow: none; outline: none; }

.m367-catalog-page .smart-filter .btn:focus-visible {
	outline: var(--m367-focus-ring);
	outline-offset: var(--m367-button-focus-offset);
}

.m367-catalog-page .smart-filter-popup-result {
	background: var(--m367-surface-card);
	border: 1px solid var(--m367-action-border-subtle);
	border-radius: var(--m367-input-radius);
	color: var(--m367-foundation-text);
	font-size: var(--m367-font-size-caption);
}

/* --- 3. Разделы внутри раздела ------------------------------------------- */

.m367-catalog-page .m367-subsections > .row { margin: 0; }
.m367-catalog-page .m367-subsections > .row > .col { padding: 0; }

.m367-catalog-page .m367-subsections ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin: 0 0 var(--m367-section-head-gap);
	padding: 0;
	list-style: none;
}

.m367-catalog-page .m367-subsections li {
	max-width: none;
	flex: none;
	width: auto;
	padding: 0;
	list-style: none;
}

.m367-catalog-page .m367-subsections li a {
	display: block;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--m367-action-bg-faint);
	border: 1px solid var(--m367-action-border-subtle);
	color: var(--m367-foundation-text);
	text-decoration: none;
	font-size: var(--m367-font-size-small);
}

.m367-catalog-page .m367-subsections li a:hover { border-color: var(--m367-action-border-hover); color: var(--m367-brand-orange); }

/* Пустой блок подразделов места не занимает */
.m367-catalog-page .m367-subsections:not(:has(a)) { display: none; }

/* Корень каталога — указатель разделов: корень строкой, его разделы плитками */
.m367-catalog-page .catalog-section-list-list {
	display: grid;
	gap: var(--m367-section-head-gap);
	margin: 0 0 var(--m367-section-gap-y);
	padding: 0;
	list-style: none;
}

.m367-catalog-page .catalog-section-list-list ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.m367-catalog-page .catalog-section-list-item { list-style: none; }

.m367-catalog-page .catalog-section-list-list > .catalog-section-list-item > .catalog-section-list-list-title {
	margin: 0;
	font-size: var(--m367-font-size-component-title);
	line-height: var(--m367-line-height-heading);
	font-weight: var(--m367-font-weight-strong);
}

.m367-catalog-page .catalog-section-list-list > .catalog-section-list-item > .catalog-section-list-list-title a { color: var(--m367-foundation-text); text-decoration: none; }
.m367-catalog-page .catalog-section-list-list > .catalog-section-list-item > .catalog-section-list-list-title a:hover { color: var(--m367-brand-orange); }

.m367-catalog-page .catalog-section-list-list ul .catalog-section-list-list-title {
	display: block;
	margin: 0;
	font-size: var(--m367-font-size-small);
	font-weight: var(--m367-font-weight-medium);
	line-height: var(--m367-line-height-meta);
}

/* Длинное имя раздела переносится, а не вылезает за плитку (стоковый nowrap) */
.m367-catalog-page .catalog-section-list-list-link { white-space: normal; }

.m367-catalog-page .catalog-section-list-list ul .catalog-section-list-list-link {
	display: block;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--m367-action-bg-faint);
	border: 1px solid var(--m367-action-border-subtle);
	color: var(--m367-foundation-text);
	text-decoration: none;
}

.m367-catalog-page .catalog-section-list-list ul .catalog-section-list-list-link:hover {
	border-color: var(--m367-action-border-hover);
	color: var(--m367-brand-orange);
}

/* Число товаров в разделе — счёт, а не часть названия */
.m367-catalog-page .catalog-section-list-list-link span { color: var(--m367-text-tertiary); }

/* Раздел-указатель («Сети и связь»): вводный текст и плитки подразделов.
   Ширину задаёт оболочка сайта, страница её не переопределяет. */
.m367-catalog-page .m367-catalog-parent-overview {
	margin-block: 0 var(--m367-section-gap-y);
	color: var(--m367-foundation-text);
}

/* M367_SECTION_UI_V1 (18.09): место под снимок направления. Картинок у разделов пока
   нет ни одной, поэтому слот стоит пустым и читается как «сюда встанет снимок»: сплошная
   заливка выглядела бы поломанной вёрсткой, а пунктир честно говорит, что места ждут. */
/* M367_SECTION_HERO_V2 (19.09): плашка раздела — ДВЕ КОЛОНКИ: слева снимок, справа
   заголовок с вводным текстом (решение владельца: «хиро из колонок»).

   Полосой во всю ширину это не работает. Иллюстрации пришли квадратными, а плашка
   тянется во всю страницу: любая полоса либо режет из квадрата ленту поперёк сюжета,
   либо растёт вместе с экраном и съедает первый экран целиком. В колонке квадрат
   остаётся квадратом и показывается ЦЕЛИКОМ, как и просил художник. */
.m367-section-head--withhero {
	display: grid;
	grid-template-columns: clamp(120px, 16vw, 200px) 1fr;
	align-items: center;
	column-gap: var(--m367-card-pad);
}

.m367-section-head--withhero .m367-section-head__title,
.m367-section-head--withhero .m367-section-head__intro { grid-column: 2; }

.m367-section-head__hero {
	grid-row: 1 / span 2;
	grid-column: 1;
	align-self: center;
	border-radius: var(--m367-card-radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--m367-surface-overlay-subtle);
}

/* Пустое место не занимает столько же, сколько снимок: пока картинки нет, слот — тонкая
   полоса. Иначе страница читается как поломанная вёрстка, а не как «здесь будет снимок». */
/* Пустого слота больше нет: если картинки у раздела нет, полоса просто не выводится. */

.m367-section-hero__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}



/* Иллюстрации разделов пришли от художника 19.09 квадратными, 1254 × 1254, и он
   прямо просил: «сохраняйте квадратные пропорции и весь кадр (object-fit: contain)».
   Прежние 16/9 с обрезкой съедали верх и низ кадра — у иллюстрации, где предмет
   нарисован по центру квадрата, это срезает половину сюжета. */
.m367-catalog-page .m367-catalog-section-tile__media {
	margin: calc(var(--m367-card-pad) * -1) calc(var(--m367-card-pad) * -1) var(--m367-card-pad);
	border-radius: var(--m367-card-radius) var(--m367-card-radius) 0 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--m367-surface-overlay-subtle);
	border-bottom: 1px dashed var(--m367-action-border-divider);
}

.m367-catalog-page .m367-catalog-section-tile__media--empty { aspect-ratio: 16 / 3; }

.m367-catalog-page .m367-catalog-section-tile__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

@media (max-width: 575.98px) {
	/* на узком экране колонки не помещаются: снимок становится первой строкой и
	   ужимается, иначе заголовку не остаётся места */
	.m367-section-head--withhero { grid-template-columns: 96px 1fr; column-gap: 12px; }
}

.m367-catalog-page .m367-catalog-parent-overview__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--m367-grid-gap);
}

.m367-catalog-page .m367-catalog-section-tile {
	display: flex;
	flex-direction: column;
	padding: var(--m367-card-pad);
	border-radius: var(--m367-card-radius);
	border: 1px solid var(--m367-card-border);
	background: var(--m367-card-bg);
	color: var(--m367-foundation-text);
	text-decoration: none;
	transition: transform var(--m367-motion-lift), border-color var(--m367-motion-lift), box-shadow var(--m367-motion-lift), background-color var(--m367-motion-lift);
}

/* Тот же отклик, что у карточки товара: подъём, светлеющая подложка, тёплый край. */
.m367-catalog-page .m367-catalog-section-tile:hover {
	transform: translateY(-6px);
	background: var(--m367-card-bg-hover);
	border-color: var(--m367-action-border-hover);
	box-shadow: var(--m367-shadow-card-hover);
}

.m367-catalog-page .m367-catalog-section-tile__title {
	font-size: var(--m367-font-size-component-title);
	font-weight: var(--m367-font-weight-strong);
	line-height: var(--m367-line-height-heading);
	margin-bottom: 10px;
}

.m367-catalog-page .m367-catalog-section-tile__text {
	font-size: var(--m367-font-size-small);
	line-height: var(--m367-line-height-copy);
	color: var(--m367-text-secondary);
	margin-bottom: 18px;
}

.m367-catalog-page .m367-catalog-section-tile__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	color: var(--m367-text-tertiary);
	font-size: var(--m367-font-size-caption);
}

.m367-catalog-page .m367-catalog-section-tile__cta { color: var(--m367-brand-orange); font-weight: var(--m367-font-weight-strong); }


/* Чипы типов над полкой: сузить раздел одним движением, не открывая фильтр.
   Невыбранный — пассивная роль, выбранный — Active2 (тональный), как велит дресс-код. */
.m367-catalog-page .m367-type-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--m367-section-head-gap);
}

.m367-catalog-page .m367-type-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--m367-button-passive-bg);
	border: 1px solid var(--m367-button-passive-border);
	color: var(--m367-button-passive-text);
	font-size: var(--m367-font-size-small);
	font-weight: var(--m367-font-weight-medium);
	line-height: var(--m367-line-height-label);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--m367-button-motion), border-color var(--m367-button-motion), color var(--m367-button-motion);
}

.m367-catalog-page .m367-type-chip:hover {
	background: var(--m367-button-passive-bg-hover);
	border-color: var(--m367-button-passive-border-hover);
	color: var(--m367-button-passive-text-hover);
	text-decoration: none;
}

.m367-catalog-page .m367-type-chip--on,
.m367-catalog-page .m367-type-chip--on:hover {
	background: var(--m367-button-active-2-bg);
	border-color: var(--m367-button-active-2-border);
	color: var(--m367-button-active-2-text);
}

.m367-catalog-page .m367-type-chip__n {
	color: var(--m367-text-tertiary);
	font-size: var(--m367-font-size-caption);
	font-weight: var(--m367-font-weight-regular);
}

.m367-catalog-page .m367-type-chip--on .m367-type-chip__n { color: inherit; opacity: .7; }

.m367-catalog-page .m367-type-chip:focus-visible { outline: var(--m367-focus-ring); outline-offset: 2px; }

/* --- 4. Сетка карточек --------------------------------------------------- */

.m367-catalog-page .catalog-section { margin-bottom: 0; }

.m367-catalog-page [data-entity="items-row"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--m367-grid-gap);
	margin: 0;
}

.m367-catalog-page [data-entity="items-row"] > [class*="col-"],
.m367-catalog-page [data-entity="items-row"] > .col {
	max-width: none;
	flex: none;
	width: auto;
	padding: 0;
}

/* Ячейка карточки — флекс-колонка, карточка тянется flex-ом, высота ячейки закреплена.
   `!important` здесь не каприз: стоковый скрипт карточки пишет высоту ВСТРОЕННЫМ стилем —
   при отрисовке ставит измеренное «height: 451.141px», а когда мышь уходит, заменяет на
   «height: auto» и обратно не возвращает. Карточка после наведения садилась на высоту
   содержимого и переставала совпадать с соседями: 451 → 418 (владелец 18.09: «когда на
   них наводишь, они поднимаются, а потом меняют высоту»). Перебить встроенный стиль можно
   только так; сетка растягивает ячейку сама, измеренные скриптом высоты нам не нужны. */
.m367-catalog-page .product-item-container { position: relative; display: flex; flex-direction: column; height: 100% !important; }

/* --- 5. Карточка товара в списке ----------------------------------------- */

.m367-catalog-page .product-item.m367-catalog-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
	padding: 16px;
	width: 100%;
	background: var(--m367-card-bg);
	/* Рамки в покое нет (решение владельца 21.09: «убрать в покое, оставить на
	   наведении»). На тёмном фоне карточку держит подложка, а контур у каждой
	   плитки превращал сетку в таблицу: глаз считал линии, а не товары.
	   Прозрачный край, а не отсутствие свойства, — чтобы на наведении ничего не
	   дёргалось: меняется цвет, а не толщина. */
	border: 1px solid transparent;
	border-radius: var(--m367-card-radius);
	box-shadow: none;
	transition: transform var(--m367-motion-lift), border-color var(--m367-motion-lift), box-shadow var(--m367-motion-lift), background-color var(--m367-motion-lift);
}

/* Подъём должен быть виден. Прежние 2 px на карточке в 450 px не читались вовсе:
   владелец видел только оранжевую рамку и решил, что подъёма нет. Высоту на тёмном
   фоне показывают три вещи разом — сдвиг, светлеющая подложка и ближняя тень. */
.m367-catalog-page .product-item.m367-catalog-card:hover {
	transform: translateY(-6px);
	background: var(--m367-card-bg-hover);
	border-color: var(--m367-action-border-hover);
	box-shadow: var(--m367-shadow-card-hover);
}

.m367-catalog-page .product-item.m367-catalog-card:focus-within {
	outline: var(--m367-focus-ring);
	outline-offset: 2px;
}

/* Всплывающая карточка стокового шаблона отменена: она рвала сетку */
.m367-catalog-page .bx-no-touch .product-item-container.hover .product-item,
.m367-catalog-page .product-item-container.hover .product-item {
	position: static;
	right: auto;
	left: auto;
	padding: 16px;
	width: 100%;
	/* Та же приподнятая подложка, что и у нашего :hover. Здесь именно она, а не
	   обычная: класс «hover» стоковый скрипт вешает только на время наведения, и
	   правило это идёт в файле ПОЗЖЕ нашего при равной силе — то есть побеждает. */
	background: var(--m367-card-bg-hover);
	box-shadow: var(--m367-shadow-card-hover);
	animation: none;
}

.m367-catalog-page .product-item-image-wrapper {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	padding-top: 0;
	margin-bottom: 14px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--m367-foundation-surface-raised);
}

.m367-catalog-page .product-item-image-original,
.m367-catalog-page .product-item-image-alternative {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform var(--m367-motion-control), opacity var(--m367-motion-control);
}

.m367-catalog-page .product-item.m367-catalog-card:hover .product-item-image-original { transform: scale(1.028); }

/* Товар без снимка: тихая марка вместо пустоты, без рекламы */
.m367-catalog-page .m367-no-real-picture .product-item-image-original,
.m367-catalog-page .m367-no-real-picture .product-item-image-alternative { opacity: .22; filter: grayscale(1); }

.m367-catalog-page .m367-catalog-placeholder {
	position: absolute;
	inset: 0;
	z-index: 12;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	padding: 12px;
	pointer-events: none;
}

/* ИКОНКА ФОТОАППАРАТА УБИРАЕТСЯ ВМЕСТЕ С ПОЯВЛЕНИЕМ ЗАГЛУШКИ (26.09).
   Заглушка лежит ПОВЕРХ картинки `no_photo.png`, и пока фон не снят, серый
   фотоаппарат просвечивает за буквами — на полке это читалось как брак печати.
   `!important` тут по делу: адрес картинки компонент пишет ВСТРОЕННЫМ стилем
   (`style="background-image: url(/local/templates/.default/css/...)"`), а встроенное перебивается только так. */
.m367-catalog-page .m367-no-real-picture .product-item-image-original,
.m367-catalog-page .m367-no-real-picture .product-item-image-alternative {
	background-image: none !important;
}

/* Бренд — то, чем покупатель различает соседей, поэтому он и есть главная
   надпись пустого поля. Кегль крупнее подписи под карточкой, но цвет тихий:
   на полке, где у части товаров есть настоящие снимки, текст не должен с ними
   конкурировать. */
.m367-catalog-page .m367-catalog-placeholder-brand {
	font-size: 20px;
	line-height: 1.2;
	font-weight: var(--m367-font-weight-strong);
	color: var(--m367-text-tertiary);
	overflow-wrap: break-word;
	max-width: 100%;
}

.m367-catalog-page .m367-catalog-placeholder-type {
	font-size: var(--m367-font-size-caption);
	line-height: var(--m367-line-height-meta);
	color: var(--m367-breadcrumb-separator);
}

@media (max-width: 767px) {
	.m367-catalog-page .m367-catalog-placeholder-brand { font-size: 16px; }
}

/* ЗАГЛУШКА С РИСУНКОМ ПРЕДМЕТА (26.09, первая партия подложек).
   Рисунок нарисован на фоне карточки (#151619 ставится при приёме партии
   инструментом `m367_podlozhki_v1.php`), поэтому никакой своей подложки,
   рамки и радиуса ему не нужно: он и должен читаться не картинкой в рамке, а
   самим предметом на поле карточки. */
.m367-catalog-page .m367-catalog-placeholder--art {
	gap: 0;
	padding: 0;
	justify-content: flex-start;
}

.m367-catalog-page .m367-catalog-placeholder--art img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

/* Бренд ПОВЕРХ рисунка, прижат к низу поля: рисунок отвечает «что это», бренд
   — «чей», и вместе они дают то же различение соседей, что давали две строки
   текста. Подложка под надписью — от самой карточки, чтобы буквы не легли на
   тёмную часть предмета и не пропали. */
.m367-catalog-page .m367-catalog-placeholder--art .m367-catalog-placeholder-brand {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 4px 8px 2px;
	font-size: 14px;
	background: linear-gradient(to top, var(--m367-card-bg) 55%, transparent);
}

@media (max-width: 767px) {
	.m367-catalog-page .m367-catalog-placeholder--art .m367-catalog-placeholder-brand { font-size: 12px; }
}

/* СНИМКИ ПРИЧЁСАНЫ ОДНОЙ ПЛОЩАДКОЙ (26.09, владелец: «может плюс минус
   причесать фото»).

   Площадка карточки и так у всех одна — 227×227. Разнобой давал САМ ФАЙЛ:
   вендор снимает товар на белом, и белое поле внутри снимка у каждого своей
   формы — у одного почти квадрат во всю ячейку, у соседа узкая вертикальная
   полоска. На тёмной полке это читается как ряд белых заплат разного размера.

   Обрезать 48 тысяч файлов нечем и незачем. Даём белую площадку САМИ: она
   одинакова у всех, а снимок вписывается внутрь с равным полем — то есть
   разной остаётся только картинка, а не её фон.

   Красим слайдер, а НЕ `.product-item-image-wrapper`: в этой же обёртке лежит
   наша заглушка (`.m367-catalog-placeholder`), нарисованная на фоне карточки,
   и белая подложка под ней была бы ровно тем разнобоем, который мы убираем. */
.m367-catalog-page .m367-catalog-card .product-item-image-slider-slide-container,
.m367-catalog-page .m367-catalog-card .product-item-image-original,
.m367-catalog-page .m367-catalog-card .product-item-image-alternative {
	background-color: #fff;
	border-radius: 12px;
}

/* Поле вокруг снимка — через `background-origin`: картинку кладёт компонент
   встроенным стилем (`style="background-image: url(/local/templates/.default/css/...)"`), и подступиться к
   ней можно только размером и началом отсчёта. Фон при этом остаётся во всю
   площадку: белое поле одинаковое, снимок не касается краёв. */
.m367-catalog-page .m367-catalog-card .product-item-image-slide,
.m367-catalog-page .m367-catalog-card .product-item-image-original,
.m367-catalog-page .m367-catalog-card .product-item-image-alternative {
	padding: 14px;
	background-origin: content-box;
	background-size: contain;
}

/* КАДР ВО ВСЮ ЯЧЕЙКУ — ГОТОВАЯ КАРТОЧКА, И ПЛОЩАДКА ПОД НЕЙ ЧИТАЕТСЯ РАМКОЙ
   (27.09, владелец: «на мобиле вижу белые рамки с которыми боролись»).
   Признак ставит шаблон по геометрии файла: квадратный кадр закрывает
   квадратную ячейку целиком. `contain` оставлен намеренно — если ячейка когда-
   нибудь перестанет быть квадратной, кадр не обрежется, а поле будет цвета
   карточки, а не белым. */
.m367-catalog-page .m367-catalog-card.m367-shot-full .product-item-image-slider-slide-container,
.m367-catalog-page .m367-catalog-card.m367-shot-full .product-item-image-original,
.m367-catalog-page .m367-catalog-card.m367-shot-full .product-item-image-alternative {
	background-color: transparent;
}

/* Вес селектора поднят классом карточки: правило поля у площадки повторяется в
   мобильном медиазапросе НИЖЕ по файлу, и при равной силе выигрывало бы оно. */
.m367-catalog-page .m367-catalog-card.m367-shot-full .product-item-image-slide,
.m367-catalog-page .m367-catalog-card.m367-shot-full .product-item-image-original,
.m367-catalog-page .m367-catalog-card.m367-shot-full .product-item-image-alternative {
	padding: 0;
	background-origin: padding-box;
}

/* У товара без настоящего снимка белить нечего: там наша заглушка на фоне
   карточки, и белый квадрат под ней вернул бы разнобой. */
.m367-catalog-page .m367-no-real-picture .product-item-image-slider-slide-container,
.m367-catalog-page .m367-no-real-picture .product-item-image-original,
.m367-catalog-page .m367-no-real-picture .product-item-image-alternative {
	background-color: transparent;
}

@media (max-width: 767px) {
	.m367-catalog-page .m367-catalog-card .product-item-image-slide,
	.m367-catalog-page .m367-catalog-card .product-item-image-original,
	.m367-catalog-page .m367-catalog-card .product-item-image-alternative {
		padding: 10px;
	}
}

/* ИМЯ В ТРИ СТРОКИ: ВИД · БРЕНД · МОДЕЛЬ (27.09, владелец: «может нужно три
   строки продукт бренд модель? и надо обязательно чтобы модель была видна»).

   Одной строкой имя рвалось в случайном месте, и на узкой карточке первой
   жертвой становилась модель — а по ней прибор и опознают. Разложенное на три
   части имя читается сразу, и у каждой части свой голос: вид тихий, бренд ещё
   тише, модель крупная.

   ПОРЯДОК УЖИМАНИЯ ОБРАТЕН ВАЖНОСТИ. Место кончается — сперва многоточие
   получает вид, потом бренд, и только в последнюю очередь модель (ей оставлены
   две строки). Увидеть «DSL‑…» вместо «DSL-224» значит не увидеть ничего. */
.m367-catalog-page .m367-card-title--split a {
	display: block;
	-webkit-line-clamp: none;
	overflow: visible;
}

/* ТРИ СТРОКИ ИМЕНИ СТОЯТ ПО ОДНОЙ ОСИ — НА ВСЕХ ШИРИНАХ (27.09).
   Первая редакция чинила это только на телефоне, потому что снимок пришёл
   оттуда; на десктопе вид остался по левому краю, а бренд с моделью — по
   центру, то есть ровно тот же разнобой. Выравнивание — свойство блока имени,
   а не экрана. */
.m367-catalog-page .m367-card-title-block {
	text-align: center;
}

/* БРЕНД И МОДЕЛЬ — ОДНИМ КЕГЛЕМ (27.09, выбор владельца из трёх вариантов).
   Это одно имя прибора, и делить его по размеру значит заставлять глаз прыгать
   посреди названия. Различает их только цвет: бренд тише, модель в полный
   голос. Довод против крупного бренда взят с полки: там идут три Netis подряд,
   и крупное имя марки сделало бы карточки визуально одинаковыми — а различает
   их как раз модель. */
.m367-catalog-page .m367-card-brand {
	display: block;
	overflow: hidden;
	color: var(--m367-text-tertiary);
	font-size: var(--m367-font-size-small);
	font-weight: var(--m367-font-weight-regular);
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.m367-catalog-page .m367-card-model {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--m367-foundation-text);
	font-size: var(--m367-font-size-small);
	font-weight: var(--m367-font-weight-strong);
	line-height: 1.3;
	/* Модель не переносим по дефису — он в ней часть кода, а не знак переноса.
	   Неразрывные дефисы ставит показ (`m367_catalog_name_nbhyphen`), здесь
	   страхуемся на случай кода без них. */
	overflow-wrap: break-word;
}

.m367-catalog-page .m367-card-title-block { margin-bottom: 8px; }

/* Тип товара — ориентир выбора, поэтому стоит над именем и читается первым */
.m367-catalog-page .m367-card-type {
	font-size: var(--m367-font-size-caption);
	line-height: var(--m367-line-height-meta);
	color: var(--m367-text-tertiary);
	margin-bottom: 4px;
}

.m367-catalog-page .product-item-title {
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	margin: 0;
	font-size: var(--m367-font-size-small);
	line-height: 1.35;
	font-weight: var(--m367-font-weight-medium);
}

.m367-catalog-page .product-item-title a {
	display: block;
	color: var(--m367-foundation-text);
	font-size: inherit;
	text-decoration: none;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.m367-catalog-page .product-item-title a:hover { color: var(--m367-brand-orange); }

/* СТОКОВАЯ ПАНЕЛЬ СРАВНЕНИЯ НА ПОЛКЕ НЕ ПОКАЗЫВАЕТСЯ (27.09).

   `catalog.compare.list` рисует посреди списка белую врезку «Количество
   элементов в списке сравнения: 1 · Перейти на страницу сравнения · Список
   сравниваемых элементов · Убрать» — тем же стоковым видом, что и страница 404
   до правки. Именно её строчка и была единственным входом, которого владелец не
   нашёл. Теперь вход стоит звеном в полосе управления, и врезка говорит то же
   самое вторым голосом, да ещё и разрывает полку.

   ПРЯЧЕМ ТОЛЬКО ПОКАЗ, А НЕ ВЫЗОВ: этот же компонент ОБРАБАТЫВАЕТ нажатие
   галочки (`ADD_TO_COMPARE_LIST` в его `component.php`). Убери его из шаблона —
   и сравнение перестанет работать вовсе. Управление списком живёт на странице
   сравнения, там ему и место. */
.m367-catalog-page .m367-catalog-products-col > .catalog-compare-list {
	display: none;
}

/* МОИ СПИСКИ В ПОЛОСЕ УПРАВЛЕНИЯ ВЫДАЧЕЙ (27.09, владелец: «проверь может
   имеет смысл вверху чипы сравнения и фаворитов»).

   Вид нарочно НЕ как у чипов отбора: тихая обводка без заливки, значок слева,
   подпись словом. Чип рядом фильтрует выдачу, а это переход на другую
   страницу — одинаковая одежда у разных действий сбивает. Своя строка, потому
   что ряд чипов на телефоне прокручивается вбок и звенья уехали бы за край. */
.m367-catalog-page .m367-bar-lists {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 6px;
}

.m367-catalog-page .m367-bar-list {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 30px;
	padding: 0 10px;
	border: 1px solid var(--m367-action-border-subtle);
	border-radius: 999px;
	background: transparent;
	color: var(--m367-text-secondary);
	font-size: var(--m367-font-size-caption);
	line-height: 1.2;
	text-decoration: none;
	transition: color var(--m367-motion-lift), border-color var(--m367-motion-lift);
}

.m367-catalog-page .m367-bar-list:hover {
	color: var(--m367-foundation-text);
	border-color: var(--m367-action-border-hover);
}

.m367-catalog-page .m367-bar-list svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex: 0 0 auto;
}

/* Число — не второй голос, а приписка к слову: тот же кегль, но плотнее и
   в цвете марки, чтобы читалось «сколько», а не «нажми сюда». */
.m367-catalog-page .m367-bar-list__n {
	color: var(--m367-brand-orange);
	font-weight: var(--m367-font-weight-strong);
	font-variant-numeric: tabular-nums;
}

.m367-catalog-page .m367-bar-list__n[hidden] { display: none; }

/* Ключевые свойства: четыре значения, по которым выбирают, а не описание */
.m367-catalog-page .m367-card-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.m367-catalog-page .m367-card-chip {
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--m367-action-bg-faint);
	border: 1px solid var(--m367-action-border-subtle);
	color: var(--m367-text-secondary);
	font-size: var(--m367-font-size-caption);
	line-height: var(--m367-line-height-label);
	white-space: nowrap;
}

.m367-catalog-page .product-item-info-container { margin: 0; padding: 0; }

/* Низ карточки прибит к низу: цена и действие у всех карточек на одной высоте */
.m367-catalog-page .m367-card-price-container {
	margin-top: auto;
	padding-top: 12px;
}

/* ЦЕНА — ГЛАВНАЯ ВЕЩЬ НА КАРТОЧКЕ (26.09, решение владельца «кнопки по твоему
   совету корректируем»). Было 18 px при кнопке, залитой оранжевым во всю
   ширину: самой громкой вещью полки оказывалось действие, повторённое двадцать
   четыре раза, а выбирают по цене. Теперь громкость у цены, кнопка тихая —
   правило «громкой на экране может быть ровно одна вещь» (24.09, приёмка). */
.m367-catalog-page .product-item-price-current {
	color: var(--m367-foundation-text);
	font-size: 22px;
	font-weight: var(--m367-font-weight-strong);
	line-height: 1.15;
	white-space: nowrap;
}

.m367-catalog-page .product-item-price-old {
	color: var(--m367-text-tertiary);
	font-size: var(--m367-font-size-caption);
	text-decoration: line-through;
}

/* Действие показывается всегда: спрятанная до наведения кнопка не работает на телефоне */
.m367-catalog-page .product-item-container .product-item-info-container.product-item-hidden,
.m367-catalog-page .bx-no-touch .product-item-container .product-item-info-container.product-item-hidden {
	display: block;
	opacity: 1;
}

.m367-catalog-page .product-item-button-container {
	margin: 10px 0 0;
	padding: 0;
	text-align: left;
}

.m367-catalog-page .product-item-button-container .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	min-height: var(--m367-button-min-h);
	padding-inline: var(--m367-button-pad-x);
	border-radius: var(--m367-button-radius);
	font-size: var(--m367-button-font-size);
	font-weight: var(--m367-button-weight);
	line-height: var(--m367-button-line-height);
	text-decoration: none;
	/* ТИХАЯ КНОПКА НА ПОЛКЕ: контур, а не заливка. Токены `passive` существовали
	   с самого начала и использовались на других страницах — второй набор цветов
	   не завожу. Заливка возвращается при наведении и остаётся на странице
	   товара, где кнопка одна и спорить ей не с кем.

	   `!important` ЗДЕСЬ ПО ДЕЛУ, и вот почему: слой бывшего подрядчика держит
	   `.btn-primary, .btn.btn-primary, button.btn-primary { background:
	   var(--accent) !important }` (`template_styles.css:369`) — это правило
	   красит КАЖДУЮ кнопку сайта и перебивает любую специфичность. Первая
	   редакция этой правки выглядела применившейся (цена стала 22 px), а кнопка
	   осталась залитой: важность перебивается только важностью. */
	border: 1px solid var(--m367-button-passive-border) !important;
	background: var(--m367-button-passive-bg) !important;
	color: var(--m367-button-passive-text) !important;
	transition: background var(--m367-button-motion), color var(--m367-button-motion), border-color var(--m367-button-motion);
}

.m367-catalog-page .product-item-button-container .btn:hover,
.m367-catalog-page .product-item-button-container .btn:focus-visible {
	background: var(--m367-button-active-1-bg) !important;
	border-color: var(--m367-button-active-1-border) !important;
	color: var(--m367-button-active-1-text) !important;
	text-decoration: none;
}

/* Недоступный товар — пассивная роль, а не выключенная главная кнопка */
.m367-catalog-page .product-item-button-container .btn-link,
.m367-catalog-page .product-item-button-container .btn.disabled,
.m367-catalog-page .product-item-button-container .btn[disabled] {
	background: var(--m367-button-passive-bg);
	color: var(--m367-button-passive-text);
	border-color: var(--m367-button-passive-border);
	cursor: default;
}

.m367-catalog-page .product-item-button-container .btn-link:hover {
	background: var(--m367-button-passive-bg-hover);
	color: var(--m367-button-passive-text-hover);
	border-color: var(--m367-button-passive-border-hover);
}

/* СРАВНЕНИЕ ВКЛЮЧЕНО С 26.09 — и правило «каталогу оно не нужно» снято.
   Раньше блок прятался здесь, потому что `USE_COMPARE` стоял в `N` и стоковая
   строка-чекбокс висела мёртвой. Теперь сравнение живёт в десяти разделах с
   матрицей (решает `m367_catalog_compare.php`), а в остальных компонент его и
   не рисует — прятать нечего.

   Вид: строка под ценой, тихая, с нашим чекбоксом. Не кнопка: сравнение это
   выбор «отметить для потом», а не действие, и спорить с «В корзину» ему
   незачем. */
/* ВИДНО ВСЕГДА, А НЕ ПО НАВЕДЕНИЮ. Стоковый стиль держит блок в `display: none`
   и показывает его только на `.product-item-container.hover`, а на `.bx-touch`
   прячет совсем — то есть на телефоне сравнения не существует. У нас это уже
   решённый вопрос: «действие показывается всегда, спрятанная до наведения
   кнопка не работает на телефоне» (правило полки). Стоковые border, фон и
   отрицательные поля тоже снимаем — они из светлой темы. */
.m367-catalog-page .product-item-compare-container,
.m367-catalog-page.bx-touch .product-item-compare-container {
	display: flex !important;
	align-items: center;
	min-height: 0;
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.m367-catalog-page .product-item-compare label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var(--m367-text-tertiary);
	font-size: var(--m367-font-size-caption);
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
}

.m367-catalog-page .product-item-compare label:hover { color: var(--m367-foundation-text); }

.m367-catalog-page .product-item-compare input[type="checkbox"] {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--m367-accent-strong);
	cursor: pointer;
}

/* --- 6. Страница товара -------------------------------------------------- */

.m367-product-page .bx-catalog-element { color: var(--m367-foundation-text); }

.m367-product-page .m367-card__media,
.m367-product-page .m367-card-commerce,
.m367-product-page .m367-product-values {
	background: var(--m367-card-bg);
	border: 1px solid var(--m367-card-border);
	border-radius: var(--m367-card-radius);
	padding: var(--m367-card-pad);
}

.m367-product-page .m367-card__media { position: relative; margin-bottom: var(--m367-grid-gap); }

.m367-product-page .product-item-detail-slider-images-container,
.m367-product-page .product-item-detail-slider-image {
	background-color: transparent;
	border: 0;
}

/* Снимок товара показывается целиком, но не во всю ширину колонки: квадрат по
   ширине давал белое поле 737×737 под небольшой коммутатор. Высоту задаём прямо —
   стоковые проценты считаются от ширины и на широком экране раздувают галерею. */
.m367-product-page .product-item-detail-slider-block {
	padding-top: 0;
	/* Пропорция, а не фиксированная высота (21.09, владелец: «подними главную
	   картинку вверх»). При жёстких 420 px кадр 1200×947 вписывался по ширине и
	   оставлял по 48 px пустоты сверху и снизу — снимок висел в середине пустого
	   прямоугольника. Меняем пропорцию блока, а не потолок картинки: центровка
	   стокового слайдера считается от неё (урок 18.09). */
	/* ПРОПОРЦИЮ БЕРЁМ У САМОГО КАДРА (27.09, владелец: «по шаблону неткрейзем
	   полосы сверх и снизу»). 4/3 было догадкой «в среднем»: слайд Netcraze
	   1200×947 это 1.27, и разница уходила в пустые поля. Переменную ставит
	   шаблон товара из размеров файла, запасное значение — прежние 4/3. */
	aspect-ratio: var(--m367-hero-ratio, 1.3333);
	height: auto;
	max-height: min(52vh, 460px);
	/* Ширину держим явно: `aspect-ratio` вместе с `max-height` считает её ОТ
	   высоты, и на телефоне блок вышел 480 px при экране 390 — страница поехала
	   вбок. Ширина ведущая, высота следует за ней. */
	width: 100%;
	max-width: 100%;
}

@media (max-width: 767px) {
	/* НА ТЕЛЕФОНЕ ВЫСОТУ НЕ ЗАДАЁМ — только потолок. Жёсткие `min(52vh, 360px)`
	   при ширине 358 давали блок почти квадратным, кадр 1.27 вписывался по ширине,
	   и 77 px пустоты делились ровно пополам: полоса сверху, полоса снизу. Это та
	   же ошибка, что на десктопе 21.09, просто пережившая правку в мобильной
	   ветке. Пропорция остаётся ведущей, высота идёт за ней. */
	.m367-product-page .product-item-detail-slider-block {
		height: auto;
		max-height: min(52vh, 360px);
	}
}

/* Первый экран: снимок и покупка делят ширину, а не «почти всё» и «остаток» */
@media (min-width: 992px) {
	/* Две колонки: снимок и покупка. Три (со «Краткими характеристиками») — своя доля.
	   Правило двух колонок исключает трёхколоночный ряд явно: иначе оно перебивало
	   его по силе селектора и колонка покупки съезжала вниз. */

}

.m367-product-page .m367-card-commerce {
	display: grid;
	gap: 16px;
	margin-bottom: var(--m367-grid-gap);
}

/* Состояние товара: наличие и срок — это ответ, а не украшение */
.m367-product-page .m367-p5-product { display: grid; gap: 6px; }

.m367-product-page .m367-p5-product h2 {
	margin: 0;
	font-size: var(--m367-font-size-body);
	line-height: var(--m367-line-height-heading);
	font-weight: var(--m367-font-weight-strong);
	color: var(--m367-foundation-text);
}

.m367-product-page .m367-p5-product__state,
.m367-product-page .m367-p5-product p {
	margin: 0;
	color: var(--m367-text-secondary);
	font-size: var(--m367-font-size-small);
	line-height: var(--m367-line-height-copy);
}

.m367-product-page .m367-p5-badge {
	align-self: start;
	justify-self: start;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--m367-action-bg-faint);
	border: 1px solid var(--m367-action-border-subtle);
	color: var(--m367-text-tertiary);
	font-size: var(--m367-font-size-caption);
	line-height: var(--m367-line-height-label);
}

/* Стоковая панель покупки приходит с белым фоном — на тёмной карточке цена пропадала */
.m367-product-page .product-item-detail-pay-block {
	display: grid;
	gap: 12px;
	background: transparent;
	border: 0;
	padding: 0;
}

.m367-product-page .product-item-detail-pay-block > .mb-3 { margin-bottom: 0 !important; }

.m367-product-page .product-item-detail-price-current {
	color: var(--m367-foundation-text);
	font-size: 28px;
	line-height: 1.15;
	font-weight: var(--m367-font-weight-strong);
	white-space: nowrap;
}

.m367-product-page .product-item-detail-buy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--m367-button-min-h);
	padding-inline: var(--m367-button-pad-x);
	border-radius: var(--m367-button-radius);
	font-size: var(--m367-button-font-size);
	font-weight: var(--m367-button-weight);
	line-height: var(--m367-button-line-height);
	text-decoration: none;
	border: 1px solid var(--m367-button-active-1-border);
	background: var(--m367-button-active-1-bg);
	color: var(--m367-button-active-1-text);
}

.m367-product-page .product-item-detail-buy-button:hover {
	background: var(--m367-button-active-1-bg-hover);
	border-color: var(--m367-button-active-1-border-hover);
	color: var(--m367-button-active-1-text-hover);
	text-decoration: none;
}

.m367-product-page .btn-link.product-item-detail-buy-button {
	background: var(--m367-button-passive-bg);
	color: var(--m367-button-passive-text);
	border-color: var(--m367-button-passive-border);
	cursor: default;
}

/* Галерея стоит на z-index 90 и всплывала поверх липкой шапки при прокрутке.
   Слой ей нужен только в режиме «во весь экран» — там своё правило. */
.m367-product-page .product-item-detail-slider-container:not(.popup) { z-index: auto; }

/* Слои внутри галереи спорили с шапкой: у шапки сайта контекст z-index 10, и снимок
   с тем же числом, но ниже по разметке, рисовался поверх неё. Внутри галереи порядок
   сохраняем, но числа делаем маленькими. */
.m367-product-page .product-item-detail-slider-image { z-index: 1; }
.m367-product-page .product-item-detail-slider-image.active { z-index: 2; }
.m367-product-page .product-item-detail-slider-controls-block,
.m367-product-page .product-item-detail-slider-left,
.m367-product-page .product-item-detail-slider-right { z-index: 3; }
.m367-catalog-page .product-item-image-original { z-index: 1; }
.m367-catalog-page .product-item-image-alternative { z-index: 2; }

/* Снимок во весь экран: тёмная подложка вместо стоковой белой */
.m367-product-page .product-item-detail-slider-container.popup,
.m367-product-page .product-item-detail-slider-container.popup .product-item-detail-slider-controls-block {
	background: var(--m367-foundation-bg);
	border-color: var(--m367-action-border-divider);
}

.m367-product-page .product-item-detail-slider-controls-image {
	background-color: var(--m367-foundation-surface-raised);
	outline-color: var(--m367-action-border-subtle);
}

/* CP17: desktop always reserves three columns: photo, purchase, description.
   Full description remains in HTML; only overflowing previews collapse after JS loads. */
.m367-product-page .m367-product-overview { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); gap: var(--m367-grid-gap); align-items: start; margin: 0 0 var(--m367-grid-gap); }
.m367-product-page .m367-product-overview > * { min-width: 0; width: auto; max-width: none; padding-inline: 0; }
.m367-product-page .m367-product-overview .m367-card__media { flex: none; }
.m367-product-page .m367-product-overview .m367-first-screen-specs { padding: 0 0 16px; margin-bottom: 16px; border: 0; border-radius: 0; border-bottom: 1px solid var(--m367-action-border-divider); background: transparent; }
.m367-product-page .m367-product-overview .m367-first-screen-specs__head { margin-bottom: 8px; }
.m367-product-page .m367-product-overview .m367-first-screen-specs__item { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); padding: 6px 0; }
.m367-product-page .m367-first-screen-specs__links { display: flex; flex-wrap: wrap; margin-top: 8px; }
.m367-product-page .m367-product-overview .m367-buybox { margin: 6px 0 12px; padding: 0; border: 0; text-align: center; }
.m367-product-page .m367-product-overview .m367-buybox__title { font-size: var(--m367-font-size-small); font-weight: var(--m367-font-weight-medium); }
.m367-product-page .m367-product-overview .m367-buybox__note { display: inline; font-size: var(--m367-font-size-small); margin-left: 4px; }
.m367-product-page .m367-product-overview .m367-buybox__ask { display: block; width: 100%; min-height: 44px; margin-top: 12px; text-align: center; }
.m367-product-page .m367-product-overview .product-item-detail-pay-block { gap: 0; }
.m367-product-page .m367-overview-story { padding: 8px 4px; color: var(--m367-foundation-text); }
.m367-product-page .m367-overview-story__text { --m367-story-preview-lines: 10; font-size: var(--m367-font-size-body); line-height: 1.65; overflow-wrap: anywhere; }
.m367-product-page .m367-overview-story__text p { margin: 0 0 14px; }
.m367-product-page .m367-overview-story__text img { max-width: 100%; height: auto; }
.m367-product-page .m367-overview-story__content { display: flow-root; }
.m367-product-page .m367-overview-story__content > :last-child { margin-bottom: 0; }
.m367-product-page .m367-overview-story__description.is-collapsible:not(.is-open) .m367-overview-story__text { max-height: var(--m367-story-preview-height); overflow: hidden; }
.m367-product-page .m367-overview-story__toggle { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 4px 0; border: 0; background: transparent; color: var(--m367-foundation-text); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.m367-product-page .m367-overview-story__toggle[hidden] { display: none; }
.m367-product-page .m367-overview-story__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media print {
 .m367-product-page .m367-overview-story__description.is-collapsible:not(.is-open) .m367-overview-story__text { max-height: none; overflow: visible; }
 .m367-product-page .m367-overview-story__toggle { display: none; }
}
.m367-product-page .m367-overview-usage { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--m367-action-border-divider); }
.m367-product-page .m367-overview-usage h2 { margin: 0 0 6px; font-size: var(--m367-font-size-small); }
.m367-product-page .m367-overview-usage p { margin: 0; color: var(--m367-text-secondary); }
@media (max-width: 991.98px) {
 .m367-product-page .m367-product-overview { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .m367-product-page .m367-overview-story { padding: 0; }
 .m367-product-page .m367-overview-story--empty { display: none; }
}

.m367-product-page .m367-detail-first-screen-row {
	align-items: stretch;
	margin-bottom: var(--m367-grid-gap);
}

.m367-product-page .m367-detail-first-screen-row > [class*="col-"] { display: flex; flex-direction: column; }
.m367-product-page .m367-card__quick-specs { margin-bottom: var(--m367-grid-gap); }

.m367-product-page .m367-first-screen-specs {
	height: auto;
	background: var(--m367-card-bg);
	border: 1px solid var(--m367-card-border);
	border-radius: var(--m367-card-radius);
	padding: var(--m367-card-pad);
	color: var(--m367-foundation-text);
	box-shadow: none;
}

.m367-product-page .m367-first-screen-specs__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-bottom: 16px;
}

/* Три ссылки на нижние блоки не влезают в узкую колонку рядом с заголовком и
   ломались лесенкой. Ставим их своей строкой под ним: заголовок остаётся
   заголовком, ссылки читаются как оглавление страницы (21.09, вечер). */
.m367-product-page .m367-first-screen-specs__head {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.m367-product-page .m367-first-screen-specs__links {
	justify-content: flex-start;
	gap: 4px 16px;
	font-size: 13px;
}

.m367-product-page .m367-first-screen-specs__links .m367-first-screen-specs__all {
	white-space: nowrap;
}

.m367-product-page .m367-first-screen-specs__title {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--m367-font-size-body);
	line-height: var(--m367-line-height-heading);
	font-weight: var(--m367-font-weight-strong);
	color: var(--m367-foundation-text);
}

.m367-product-page .m367-first-screen-specs__all,
.m367-product-page .m367-first-screen-specs__link {
	flex: 0 0 auto;
	margin-inline-start: auto;
	color: var(--m367-brand-orange);
	font-size: var(--m367-font-size-small);
	font-weight: var(--m367-font-weight-medium);
	text-decoration: none;
	text-underline-offset: var(--m367-link-underline-offset);
}

.m367-product-page .m367-first-screen-specs__all:hover,
.m367-product-page .m367-first-screen-specs__link:hover { color: var(--m367-brand-orange-hover); text-decoration: underline; }

.m367-product-page .m367-first-screen-specs__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.m367-product-page .m367-first-screen-specs__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--m367-action-border-divider);
	font-size: var(--m367-font-size-small);
	line-height: var(--m367-line-height-meta);
}

.m367-product-page .m367-first-screen-specs__item:first-child { border-top: 0; }
.m367-product-page .m367-first-screen-specs__label { color: var(--m367-text-secondary); }
.m367-product-page .m367-first-screen-specs__value { color: var(--m367-foundation-text); overflow-wrap: anywhere; }

/* Характеристики: одна сетка, одна карточка группы, один ряд «поле — значение» */
.m367-product-page .m367-product-values { margin-bottom: var(--m367-section-gap-y); }

.m367-product-page .m367-product-values__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
}

.m367-product-page .m367-product-values__title {
	margin: 0;
	font-size: var(--m367-font-size-component-title);
	line-height: var(--m367-line-height-heading);
	font-weight: var(--m367-font-weight-strong);
	color: var(--m367-foundation-text);
}

/* НА ТЕЛЕФОНЕ ЭТА ШАПКА ИДЁТ В ДВЕ СТРОКИ (27.09, владелец: «на мобиле найти
   характеристику и услуги затираются»).

   В одном ряду стоят трое: заголовок, поле поиска и ссылка на услуги. Правило
   было одно на все ширины, и при 390 им доставалось 173 + 114 + 47 — поле
   поиска сжималось со своих 260 до 114, и подпись «Найти характеристику» в нём
   обрезалась на «Найти хара…». Каждому мало, и строка читалась как свалка.

   Заголовок занимает свою строку целиком, поиск и услуги делят вторую: полю
   достаётся около 300 px, и подпись видна целиком. */
@media (max-width: 767px) {
	.m367-product-page .m367-product-values__head {
		flex-wrap: wrap;
		align-items: center;
		gap: 10px 12px;
	}

	.m367-product-page .m367-product-values__title { flex: 1 1 100%; }

	/* `min-width: 0` обязателен: флекс-элемент не становится уже своего
	   содержимого, и без этого поле снова распёрло бы строку (правило 14.09). */
	.m367-product-page .m367-spec-find {
		flex: 1 1 auto;
		min-width: 0;
	}

	.m367-product-page .m367-product-values__nav { flex: 0 0 auto; }
}

.m367-product-page .m367-product-values__link {
	color: var(--m367-brand-orange);
	font-size: var(--m367-font-size-small);
	font-weight: var(--m367-font-weight-medium);
	text-decoration: none;
	text-underline-offset: var(--m367-link-underline-offset);
}

/* «Услуги» — сопутствующая ссылка, а не действие страницы: тихий цвет, акцент на наведении */
.m367-product-page .m367-product-values__link { color: var(--m367-text-secondary); }
.m367-product-page .m367-product-values__link:hover { color: var(--m367-brand-orange-hover); text-decoration: underline; }

/* M367_SPEC_SHEET_V3 (18.09). Характеристики читают парами «подпись → значение»,
   поэтому лист один и в один столбец. Кладка в три колонки, стоявшая до этого,
   рвала строй: группы разной высоты оставляли дыры, одинокая группа висела внизу,
   а глаз при сравнении товаров прыгал между колонками. */

.m367-product-page .m367-product-values--full {
    --m367-spec-columns: minmax(0, .44fr) minmax(0, .20fr) minmax(0, .36fr);
    --m367-spec-column-gap: 20px;
}

.m367-product-page .m367-spec-layout {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: calc(var(--m367-grid-gap) * 1.5);
	align-items: start;
}

/* оглавление групп: своя колонка, липнет ниже всей липкой стопки и полосы товара */
.m367-product-page .m367-spec-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: sticky;
	top: calc(var(--m367-sticky-stack-bottom, 0px) + var(--m367-product-bar-height, 0px) + 16px);
}

.m367-product-page .m367-spec-nav__link {
	padding: 7px 10px;
	border-radius: var(--m367-button-radius);
	border-left: 2px solid transparent;
	font-size: var(--m367-font-size-small);
	line-height: var(--m367-line-height-meta);
	color: var(--m367-text-secondary);
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.m367-product-page .m367-spec-nav__link:hover {
	color: var(--m367-foundation-text);
	background: var(--m367-surface-overlay-subtle);
}

.m367-product-page .m367-spec-nav__link.is-current {
	color: var(--m367-foundation-text);
	border-left-color: var(--m367-brand-orange);
	background: var(--m367-surface-overlay-subtle);
}

.m367-product-page .m367-spec-sheet { min-width: 0; max-width: none; }

.m367-product-page .m367-spec-group + .m367-spec-group { margin-top: 26px; }

/* заголовок группы держится у верха листа, пока группа читается */
.m367-product-page .m367-spec-group__title {
	position: sticky;
	top: calc(var(--m367-sticky-stack-bottom, 0px) + var(--m367-product-bar-height, 0px));
	z-index: 1;
	margin: 0 0 6px;
	padding: 8px 0 6px;
	/* фон тот же, что у карточки характеристик: иначе липкая подпись читается тёмной полосой */
	background: var(--m367-card-bg);
	box-shadow: 0 6px 10px -10px rgba(0, 0, 0, .9);
	font-size: var(--m367-font-size-small);
	line-height: var(--m367-line-height-heading);
	font-weight: var(--m367-font-weight-strong);
	color: var(--m367-foundation-text);
}

.m367-product-page .m367-spec-row {
	display: grid;
	grid-template-columns: var(--m367-spec-columns);
	gap: var(--m367-spec-column-gap);
	padding: 12px 0;
	border-top: 1px solid var(--m367-action-border-divider);
	font-size: var(--m367-font-size-small);
	line-height: var(--m367-line-height-meta);
}

.m367-product-page .m367-spec-table > .m367-spec-row:first-child { border-top: 0; }

/* подпись ведёт к значению точечным выносом — так строка читается на всю ширину */
.m367-product-page .m367-spec-row__label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: var(--m367-text-secondary);
}

.m367-product-page .m367-spec-row__label > span { flex: 0 1 auto; min-width: 0; }

.m367-product-page .m367-spec-sheet--no-notes { --m367-spec-columns: minmax(0,.55fr) minmax(0,.45fr); }
.m367-product-page .m367-spec-sheet--no-notes .m367-spec-columns span:last-child { display: none; }
.m367-product-page .m367-spec-columns { display: grid; grid-template-columns: var(--m367-spec-columns); gap: var(--m367-spec-column-gap); padding-bottom: 10px; color: var(--m367-text-secondary); font-size: var(--m367-font-size-small); }
.m367-product-page .m367-spec-row__label { overflow-wrap: anywhere; }
.m367-product-page .m367-spec-row__value { color: var(--m367-foundation-text); overflow-wrap: anywhere; }
.m367-product-page .m367-spec-row__meaning { min-width: 0; color: var(--m367-text-secondary); }
.m367-product-page .m367-spec-row--no-note .m367-spec-row__value { grid-column: 2 / -1; }
.m367-product-page .m367-spec-row--no-note .m367-spec-row__meaning { display: none; }
.m367-product-page .m367-spec-help { display: block; }
.m367-product-page .m367-spec-note { display: none; cursor: pointer; color: var(--m367-brand-orange); }
.m367-product-page .m367-spec-note:focus-visible { outline: 2px solid var(--m367-brand-orange); outline-offset: 3px; }
.m367-product-page .m367-spec-explanation { line-height: var(--m367-line-height-meta); overflow-wrap: anywhere; }
.m367-product-page .m367-spec-source { margin-top: var(--m367-grid-gap); padding-top: 12px; border-top: 1px solid var(--m367-action-border-divider); }
@media (max-width: 1199.98px) {
    .m367-product-page .m367-product-values--full { --m367-spec-columns: minmax(0, .55fr) minmax(0, .45fr); }
    .m367-product-page .m367-spec-columns { display: none; }
    .m367-product-page .m367-spec-row__meaning { grid-column: 1 / -1; }
    .m367-product-page .m367-spec-note { display: list-item; width: fit-content; padding: 4px 0; font-size: var(--m367-font-size-small); }
    .m367-product-page .m367-spec-explanation { padding-top: 6px; }
}
@media (max-width: 575.98px) {
    .m367-product-page .m367-spec-row--no-note .m367-spec-row__value { grid-column: 1; }
}

/* поиск по характеристикам — только на длинных листах */
.m367-product-page .m367-spec-find { flex: 0 1 260px; }

.m367-product-page .m367-spec-find__input {
	width: 100%;
	padding: 7px 12px;
	border: 1px solid var(--m367-action-border-divider);
	border-radius: var(--m367-button-radius);
	background: var(--m367-input-bg);
	color: var(--m367-input-text);
	font-size: var(--m367-font-size-small);
	line-height: var(--m367-line-height-meta);
}

.m367-product-page .m367-spec-find__input::placeholder { color: var(--m367-text-secondary); opacity: .7; }
.m367-product-page .m367-spec-find__input:focus { outline: none; border-color: var(--m367-brand-border-strong); }
.m367-product-page .m367-spec-find__input:focus-visible { outline: 2px solid var(--m367-brand-orange); outline-offset: 1px; }

.m367-product-page .m367-spec-empty { margin: 12px 0 0; color: var(--m367-text-secondary); font-size: var(--m367-font-size-small); }

@media (max-width: 991.98px) {
	.m367-product-page .m367-spec-layout { grid-template-columns: minmax(0, 1fr); gap: var(--m367-grid-gap); }
	/* на узком экране оглавление становится строкой чипов над листом */
	.m367-product-page .m367-spec-nav {
		position: static;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}
	.m367-product-page .m367-spec-nav::-webkit-scrollbar { display: none; }
	.m367-product-page .m367-spec-nav__link {
		flex: 0 0 auto;
		border: 1px solid var(--m367-action-border-divider);
		border-left-width: 1px;
		white-space: nowrap;
	}
	.m367-product-page .m367-spec-nav__link.is-current { border-color: var(--m367-brand-border-strong); }
	.m367-product-page .m367-spec-sheet { max-width: none; }
}

@media (max-width: 575.98px) {
	.m367-product-page .m367-spec-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.m367-product-page .m367-spec-row__label::after { display: none; }
}

/* --- Липкая полоса товара ------------------------------------------------ */
/* 18.09, замечание владельца: «при промотке вниз к характеристикам мы теряем
   нейминг продукта». Полоса показывается, когда первый экран ушёл вверх. */

.m367-product-page .m367-product-bar {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--m367-sticky-stack-bottom, 0px);
	z-index: calc(var(--m367-z-sticky-breadcrumbs) - 10);
	background: var(--m367-foundation-bg);
	border-bottom: 1px solid var(--m367-action-border-divider);
	/* тем же приёмом закрываем стык с полосой крошек над ней */
	box-shadow: 0 -1px 0 0 var(--m367-foundation-bg);
	/* Полоса — это УМЕНЬШЕННЫЙ заголовок товара, а не отдельный элемент, который выехал
	   сверху (владелец 18.09: «при прокрутке название из хиро уменьшается и залипает»).
	   Поэтому она не съезжает вертикально, а оседает на место из чуть большего размера:
	   глаз читает это как «заголовок сжался», а не как «появилась вторая шапка». */
	transform: scale(1.04);
	transform-origin: left center;
	opacity: 0;
	visibility: hidden;
	transition: transform .2s ease, opacity .2s ease, visibility .2s;
}

.m367-product-page .m367-product-bar.is-on { transform: none; opacity: 1; visibility: visible; }

.m367-product-page .m367-product-bar__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	padding: 8px 0;
}

.m367-product-page .m367-product-bar__photo {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	/* Квадрат 40 px заполняется кадром, а не вписывает его в белый лист
	   (21.09, владелец: «в стики имедж белое сверху и снизу»). Широкий кадр
	   1200×947 при `contain` оставлял белые полосы, и на тёмной полосе они
	   читались как брак. В миниатюре важен узнаваемый образ, а не весь кадр —
	   `cover` показывает середину, где у снимка и стоит прибор. */
	object-fit: cover;
	object-position: center;
	background: var(--m367-card-bg);
	border-radius: 6px;
}

.m367-product-page .m367-product-bar__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--m367-font-size-small);
	line-height: var(--m367-line-height-meta);
	color: var(--m367-foundation-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m367-product-page .m367-product-bar__price {
	flex: 0 0 auto;
	font-weight: var(--m367-font-weight-strong);
	color: var(--m367-foundation-text);
	white-space: nowrap;
}

.m367-product-page .m367-product-bar__buy {
	flex: 0 0 auto;
	padding: 8px 18px;
	border-radius: var(--m367-button-radius);
	border: 1px solid var(--m367-button-active-1-border);
	background: var(--m367-button-active-1-bg);
	color: var(--m367-button-active-1-text);
	font-size: var(--m367-font-size-small);
	font-weight: var(--m367-font-weight-medium);
	line-height: var(--m367-line-height-meta);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.m367-product-page .m367-product-bar__buy:hover {
	background: var(--m367-button-active-1-bg-hover);
	border-color: var(--m367-button-active-1-border-hover);
	color: var(--m367-button-active-1-text-hover);
}

.m367-product-page .m367-product-bar__buy:focus { outline: none; }
.m367-product-page .m367-product-bar__buy:focus-visible { outline: 2px solid var(--m367-brand-orange); outline-offset: 2px; }

@media (max-width: 575.98px) {
	.m367-product-page .m367-product-bar__price { display: none; }
	.m367-product-page .m367-product-bar__inner { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.m367-product-page .m367-product-bar { transition: none; }
	/* Подъём — движение; тому, кто просил его убрать, остаются край, подложка и тень. */
	.m367-catalog-page .product-item.m367-catalog-card,
	.m367-catalog-page .m367-catalog-section-tile { transition: none; }
	.m367-catalog-page .product-item.m367-catalog-card:hover,
	.m367-catalog-page .m367-catalog-section-tile:hover { transform: none; }
	.m367-catalog-page .product-item.m367-catalog-card:hover .product-item-image-original { transform: none; }
}

/* --- 7. Остатки стокового шаблона --------------------------------------- */

/* Белая плашка стокового шаблона выезжала поверх страницы при прокрутке — у нас
   своя компактная шапка, вторая полоса поверх неё лишняя */
.m367-catalog-page .product-item-detail-short-card-fixed,
.m367-catalog-page .product-item-detail-tabs-container-fixed { display: none !important; }

/* Характеристики показываются сразу, а не по щелчку.
   Стоковые вкладки прятали единственную вкладку «Характеристики» до клика, и у
   проводного товара страница выглядела так, будто характеристик нет вовсе. */
.m367-product-page .product-item-detail-tabs-container,
.m367-product-page .product-item-detail-tabs-list:empty { display: none; }

.m367-product-page .product-item-detail-tab-content { display: block !important; }

/* Группы свойств — та же карточка, что и «Характеристики» у беспроводного профиля */
.m367-product-page .m367-product-card-prop-section {
	background: var(--m367-card-bg);
	border: 1px solid var(--m367-card-border);
	border-radius: var(--m367-card-radius);
	padding: var(--m367-card-pad);
	margin-bottom: var(--m367-grid-gap);
	break-inside: avoid;
}

.m367-product-page .m367-product-card-prop-section-title {
	margin: 0 0 10px;
	font-size: var(--m367-font-size-small);
	line-height: var(--m367-line-height-heading);
	font-weight: var(--m367-font-weight-strong);
	color: var(--m367-foundation-text);
}

.m367-product-page .m367-product-card-prop-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.m367-product-page .m367-product-card-prop-list > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--m367-action-border-divider);
	font-size: var(--m367-font-size-small);
	line-height: var(--m367-line-height-meta);
	color: var(--m367-foundation-text);
}

.m367-product-page .m367-product-card-prop-list > li:first-child { border-top: 0; }

/* Стоковая строка свойства рисуется выноской: имя — точки во всю ширину — значение.
   В узкой колонке точки растягивались и уносили значение за край. Берём два столбца. */
.m367-product-page .m367-product-card-prop-list .product-item-detail-properties-dots { display: none; }

.m367-product-page .m367-product-card-prop-list .product-item-detail-properties-name {
	color: var(--m367-text-secondary);
	float: none;
	width: auto;
	text-align: left;
}

.m367-product-page .m367-product-card-prop-list .product-item-detail-properties-value {
	color: var(--m367-foundation-text);
	float: none;
	width: auto;
	text-align: left;
	overflow-wrap: anywhere;
}

.m367-product-page .m367-product-card-prop-list a {
	color: var(--m367-brand-orange);
	text-decoration: none;
	text-underline-offset: var(--m367-link-underline-offset);
}

.m367-product-page .m367-product-card-prop-list a:hover { color: var(--m367-brand-orange-hover); text-decoration: underline; }

/* Группы идут в две колонки, как характеристики беспроводного профиля */
@media (min-width: 768px) {
	.m367-product-page .product-item-detail-tab-content > .m367-product-card-prop-section:first-child { margin-top: 0; }
	.m367-product-page .product-item-detail-tab-content {
		columns: 2;
		column-gap: var(--m367-grid-gap);
	}
}

/* Страницы списка: та же палитра, что у кнопок, без синего бутстрапа */
.m367-catalog-page .pagination-container { gap: 12px; flex-wrap: wrap; margin-top: var(--m367-section-head-gap); }
.m367-catalog-page .pagination { gap: 6px; margin: 0; }

.m367-catalog-page .pagination .page-item .page-link {
	background: var(--m367-action-bg-faint);
	border: 1px solid var(--m367-action-border-subtle);
	color: var(--m367-foundation-text);
	border-radius: var(--m367-button-radius);
	font-size: var(--m367-font-size-small);
	box-shadow: none;
}

.m367-catalog-page .pagination .page-item a.page-link:hover {
	background: var(--m367-action-bg-hover);
	border-color: var(--m367-action-border-hover);
	color: var(--m367-brand-orange);
	text-decoration: none;
}

.m367-catalog-page .pagination .page-item span.page-link { color: var(--m367-text-tertiary); }

.m367-catalog-page .pagination .page-item.active .page-link {
	background: var(--m367-button-active-2-bg);
	border-color: var(--m367-button-active-2-border);
	color: var(--m367-button-active-2-text);
}

.m367-catalog-page .errortext {
	color: var(--m367-text-secondary);
	font-size: var(--m367-font-size-body);
}

@media (prefers-reduced-motion: reduce) {
	.m367-catalog-page .product-item.m367-catalog-card,
	.m367-catalog-page .product-item-image-original { transition: none; }
	.m367-catalog-page .product-item.m367-catalog-card:hover { transform: none; }
	.m367-catalog-page .product-item.m367-catalog-card:hover .product-item-image-original { transform: none; }
}

/* --- 8. Увеличение снимка товара ---------------------------------------- */
/* Владелец 18.09: «можно в страницах карточек товаров дать возможность увеличивать
   картинку». Снимок на первом экране — 398 px, файл — до 1200 px. Просмотрщик даёт
   два шага: во весь экран и «как есть» с перетаскиванием.

   Фон почти чёрный и размытый, а не полупрозрачный серый: снимки товаров сняты на
   белом, и на светлой подложке белое поле кадра сливалось бы с ней. */

.m367-catalog-page .product-item-detail-slider-container.m367-zoomable .product-item-detail-slider-image { cursor: zoom-in; }
.m367-catalog-page .product-item-detail-slider-container.m367-zoomable:focus-visible {
	outline: var(--m367-button-focus-ring);
	outline-offset: 4px;
}

.m367-zoom {
	position: fixed;
	inset: 0;
	z-index: var(--m367-z-modal, 1000);
	display: none;
	background: rgba(var(--m367-neutral-black-rgb), .92);
	backdrop-filter: blur(6px);
}

.m367-zoom.is-on { display: block; }

/* Пока просмотрщик открыт, страница под ним не прокручивается: иначе колесо
   уводит товар, а вернуться к нему после закрытия неоткуда. */
body.m367-zoom-open { overflow: hidden; }

.m367-zoom__stage {
	position: absolute;
	inset: 0;
	/* Флекс с «margin: auto» на снимке, а не grid c place-items: увеличенный кадр
	   в grid обрезается по верхнему и левому краю и доскроллить до него нельзя. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 5vw, 64px);
	overflow: auto;
	scrollbar-width: none;
}

.m367-zoom__stage::-webkit-scrollbar { display: none; }

.m367-zoom__pic {
	display: block;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--m367-card-radius);
	background: rgb(var(--m367-neutral-white-rgb));
	box-shadow: var(--m367-shadow-card-hover);
	cursor: zoom-in;
	transition: opacity var(--m367-motion-control);
}

/* Второй шаг: снимок показывается как есть и таскается мышью. */
.m367-zoom__pic.is-full {
	max-width: none;
	max-height: none;
	cursor: grab;
}

.m367-zoom__pic.is-full:active { cursor: grabbing; }

.m367-zoom__close,
.m367-zoom__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--m367-button-passive-bg);
	border: 1px solid var(--m367-button-passive-border);
	border-radius: 999px;
	color: var(--m367-button-passive-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--m367-button-motion), border-color var(--m367-button-motion), color var(--m367-button-motion);
}

.m367-zoom__close:hover,
.m367-zoom__nav:hover {
	background: var(--m367-button-passive-bg-hover);
	border-color: var(--m367-button-passive-border-hover);
	color: var(--m367-button-passive-text-hover);
}

.m367-zoom__close:focus-visible,
.m367-zoom__nav:focus-visible {
	outline: var(--m367-button-focus-ring);
	outline-offset: 2px;
}

.m367-zoom__close { top: 20px; right: 20px; }
.m367-zoom__nav { top: 50%; transform: translateY(-50%); font-size: 26px; }
.m367-zoom__nav--prev { left: 20px; }
.m367-zoom__nav--next { right: 20px; }

/* Один снимок — листать нечего, стрелки и счётчик не рисуются. */
.m367-zoom--single .m367-zoom__nav,
.m367-zoom--single .m367-zoom__counter { display: none; }

.m367-zoom__counter {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	margin: 0;
	color: var(--m367-text-tertiary);
	font-size: var(--m367-font-size-caption);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.m367-zoom__nav { top: auto; bottom: 20px; transform: none; }
	.m367-zoom__nav--prev { left: 20px; }
	.m367-zoom__nav--next { right: 20px; }
	.m367-zoom__counter { bottom: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.m367-zoom__pic,
	.m367-zoom__close,
	.m367-zoom__nav { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ КАТАЛОГ (21.09, задача владельца «максимально удобный каталог для
   мобильной версии»)

   Было: на телефоне боковая колонка фильтра вставала ПЕРЕД товарами, и раздел
   открывался двумя экранами галочек. Покупатель приходит смотреть товары, а
   видит форму.

   Стало: та же колонка превращается в панель, выезжающую снизу по кнопке
   «Фильтр». Снизу, а не сбоку, потому что большой палец достаёт до низа
   экрана, а до верхнего угла — нет.

   Порогов было четыре (575.98, 640, 767, 991.98) — вёрстка ломалась между
   ними. Оставляем два: 992 (десктоп) и 576 (мелкий телефон); всё, что было на
   640 и 767, сведено к ним.
   ═══════════════════════════════════════════════════════════════════════════ */

.m367-filter-open { display: none; }

@media (max-width: 991.98px) {
    /* Кнопка «Фильтр» — первый элемент строки чипов. Это один орган управления
       выдачей, и разносить его по разным углам экрана значит заставлять глаз
       прыгать. */
    .m367-filter-open {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        padding: 7px 14px;
        border: 1px solid var(--m367-action-border-strong, var(--m367-card-border));
        border-radius: 999px;
        background: var(--m367-card-bg);
        color: var(--m367-foundation-text);
        font: inherit;
        font-weight: var(--m367-font-weight-strong);
        cursor: pointer;
    }

    .m367-filter-open__n {
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--m367-brand-bg-strong, var(--m367-action-fg));
        color: var(--m367-brand-fg-on-strong, #fff);
        font-size: 12px;
        line-height: 1;
    }

    /* Панель. Закрытая — за нижним краем: `translateY(100%)`, а не
       `display:none`, чтобы выезд был движением, а не мельканием. */
    .m367-catalog-page .m367-catalog-filter-col {
        position: fixed;
        inset: auto 0 0 0;
        z-index: var(--m367-z-modal, 1200);
        max-height: min(85vh, 640px);
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        background: var(--m367-foundation-bg);
        border-top-left-radius: var(--m367-card-radius);
        border-top-right-radius: var(--m367-card-radius);
        box-shadow: 0 -12px 32px rgba(0, 0, 0, .45);
        transform: translateY(100%);
        transition: transform var(--m367-motion-lift, 220ms) ease;
        /* Нижняя кромка телефона: панель должна кончаться выше системной полосы. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .m367-catalog-page .m367-catalog-filter-col.is-open { transform: translateY(0); }

    .m367-filter-panel__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--m367-card-border);
        font-weight: var(--m367-font-weight-strong);
        /* ЦВЕТ ОБЯЗАТЕЛЕН: без него заголовок «Фильтр» брал стоковый цвет текста
           Bootstrap `#212529` и лежал почти чёрным на фоне панели `#050505` —
           контраст 1,32 при норме 4,5, то есть подпись главного инструмента
           каталога на телефоне не читалась вовсе (замер 26.09). Кнопка
           закрытия рядом цвет имела, заголовок — нет. */
        color: var(--m367-foundation-text);
    }

    .m367-filter-panel__close {
        border: 0;
        background: none;
        color: var(--m367-foundation-text);
        font-size: 28px;
        line-height: 1;
        padding: 0 4px;
        cursor: pointer;
    }

    /* Сам фильтр прокручивается внутри панели, а шапка и кнопка «Показать»
       остаются на месте: иначе до кнопки надо доскроллить весь список. */
    .m367-catalog-page .m367-catalog-filter-col .bx-sidebar-block {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px;
        flex: 1 1 auto;
    }

    .m367-filter-panel__foot {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--m367-card-border);
        background: var(--m367-foundation-bg);
    }

    .m367-filter-panel__apply {
        width: 100%;
        min-height: 48px;   /* палец, а не курсор */
        border: 0;
        border-radius: var(--m367-card-radius);
        background: var(--m367-brand-bg-strong, var(--m367-action-fg));
        color: var(--m367-brand-fg-on-strong, #fff);
        font: inherit;
        font-weight: var(--m367-font-weight-strong);
        cursor: pointer;
    }

    .m367-filter-scrim {
        position: fixed;
        inset: 0;
        z-index: calc(var(--m367-z-modal, 1200) - 1);
        background: rgba(0, 0, 0, .5);
    }

    /* Чипы уезжают вбок прокруткой, а не переносятся: перенос на телефоне
       съедает три строки под то, что читается одним движением пальца. */
    .m367-catalog-page .m367-type-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .m367-catalog-page .m367-type-chips::-webkit-scrollbar { display: none; }
    .m367-catalog-page .m367-type-chip { flex: 0 0 auto; }
}

@media (max-width: 575.98px) {
    /* Плитка в две колонки: одна колонка растягивает раздел в бесконечную
       ленту, три — делает снимок нечитаемым. */
    .m367-catalog-page .product-item-list-col,
    .m367-catalog-page .catalog-section .col-6 { padding-inline: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .m367-catalog-page .m367-catalog-filter-col { transition: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Соседние товары под галереей (21.09)

   Владелец: «надо вправо влево на соседний товар», «полупрозрачные кнопки ниже
   фото». Полупрозрачность здесь по делу: это не главное действие карточки —
   главное «в корзину», — и кнопки соседей не должны спорить с ним за внимание.
   Проявляются по наведению, когда покупатель к ним тянется.
   ─────────────────────────────────────────────────────────────────────────── */

/* Соседи стоят в столбик, а не парой. Рядом они делят и без того узкую колонку
   галереи пополам, и «Точка доступа IP-COM W63AP» обрезается до «Точка доступа
   IP-...» — подсказка, которая ничего не подсказывает. В столбик каждой
   достаётся вся ширина, и товар назван целиком. */
.m367-neighbours {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 12px;
}

.m367-neighbours__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 40px;              /* палец, а не курсор */
    padding: 7px 12px;
    border: 1px solid var(--m367-card-border);
    border-radius: var(--m367-card-radius);
    background: color-mix(in srgb, var(--m367-card-bg) 55%, transparent);
    color: var(--m367-foundation-muted, rgba(255, 255, 255, .62));
    font-size: var(--m367-font-size-small, 13px);
    line-height: 1.3;
    text-decoration: none;
    opacity: .72;
    transition: opacity var(--m367-motion-lift), background-color var(--m367-motion-lift),
        border-color var(--m367-motion-lift), color var(--m367-motion-lift);
}

/* Обе кнопки читаются слева направо: в столбик «следующий» с прижатым вправо
   текстом выглядел бы обрывком, а не строкой. Стрелка направления остаётся
   различителем и стоит по краям. */
.m367-neighbours__btn--next { justify-content: space-between; }
.m367-neighbours__btn--prev { justify-content: flex-start; }

.m367-neighbours__btn:hover,
.m367-neighbours__btn:focus-visible {
    opacity: 1;
    background: var(--m367-card-bg-hover, var(--m367-card-bg));
    border-color: var(--m367-action-border-hover, var(--m367-card-border));
    color: var(--m367-foundation-text);
}

.m367-neighbours__arrow { flex: 0 0 auto; font-size: 15px; line-height: 1; }

/* Имя соседа — одна строка: два длинных названия рядом превращают подсказку в
   стену текста, а нужна она боковым зрением. */
.m367-neighbours__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    /* На узком экране от названия остаётся слишком мало, чтобы его прочесть;
       оставляем стрелку и слово — понятно и не занимает строку. */
    .m367-neighbours__name { display: none; }
    .m367-neighbours__btn { justify-content: center; }
    .m367-neighbours__btn--prev .m367-neighbours__arrow::after { content: " Предыдущий"; font-size: 13px; }
    .m367-neighbours__btn--next .m367-neighbours__arrow::before { content: "Следующий "; font-size: 13px; }
}

/* ------------------------------------------------------------------
   M367_BUYBOX_V1 (21.09) — наличие как первая строка блока покупки.

   До этого здесь стояла тестовая панель контура подрядчика: бейдж
   «Тестовый заказ», «В наличии у MITINO367», «Тестовый сценарий:
   фактический собственный склад ещё не настроен». Она бралась из фикстуры
   и потому говорила одно и то же про любой товар.

   Покупатель решает по двум строкам: могу ли взять (заголовок) и на каких
   условиях (подпись). Поэтому строк ровно две, и цветом отличается только
   заголовок: цвет тут признак, а не украшение.
------------------------------------------------------------------ */
.m367-buybox {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
    padding-left: 12px;
    border-left: 3px solid var(--m367-action-border-base);
}

.m367-buybox__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--m367-foundation-text);
}

.m367-buybox__note {
    font-size: 13px;
    line-height: 1.45;
    color: var(--m367-color-muted-500);
}

/* Есть сейчас — единственное состояние, которое подсвечивается: остальные
   покупателя не радуют, и красить их значило бы кричать о плохой новости. */
.m367-buybox--have { border-left-color: var(--m367-state-success-border); }
.m367-buybox--have .m367-buybox__title { color: #4fb37c; }

.m367-buybox--order { border-left-color: var(--m367-action-border-contact); }

.m367-buybox--pause,
.m367-buybox--none,
.m367-buybox--gone { border-left-color: var(--m367-action-border-divider); }
.m367-buybox--pause .m367-buybox__title,
.m367-buybox--none .m367-buybox__title,
.m367-buybox--gone .m367-buybox__title { color: var(--m367-color-muted-500); font-weight: 600; }

/* «Снят с производства» — единственное состояние без надежды: товара больше не
   будет, и покупателю нужна замена, а не ожидание. Приглушаем сильнее, чем
   «временно нет», чтобы эти два не читались одинаково. */
.m367-buybox--gone .m367-buybox__title { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Строка наличия в карточке списка (21.09). Приезжает от кокпита уже после
   отрисовки, поэтому до ответа спрятана: пустое место лучше, чем обещание,
   которое через миг сменится. */
.m367-avail {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.m367-avail--have { color: #4fb37c; }
.m367-avail--order { color: var(--m367-foundation-text); font-weight: var(--m367-font-weight-regular); }
.m367-avail--pause,
.m367-avail--none { color: var(--m367-color-muted-500); font-weight: var(--m367-font-weight-regular); }
.m367-avail--gone { color: var(--m367-color-muted-500); font-weight: var(--m367-font-weight-regular); text-decoration: line-through; }

/* Выход из состояния «купить нельзя»: без него покупатель упирается в стену.
   Кнопка неяркая — это не покупка, а просьба; спорить с «В корзину» соседних
   карточек ей незачем. */
.m367-buybox__ask {
    align-self: flex-start;
    margin-top: 8px;
    padding: 7px 14px;
    color: var(--m367-foundation-text);
    background: transparent;
    border: 1px solid var(--m367-action-border-base);
    border-radius: var(--m367-foundation-radius, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--m367-motion-control), border-color var(--m367-motion-control);
}

.m367-buybox__ask:hover,
.m367-buybox__ask:focus-visible {
    background: var(--m367-action-bg-hover);
    border-color: var(--m367-action-border-contact);
}

/* --- Текст на карточке: лид, рассказ, вопросы (21.09, вечер) -------------

   Три текста, и у каждого своя работа, поэтому и вид разный.

   ЛИД — одна фраза под заголовком, пока человек смотрит на снимок и цену.
   РАССКАЗ — после характеристик, читают его уже решая «почему именно этот».
   ВОПРОСЫ — в самом конце, к ним возвращаются с сомнением.

   Обе нижние секции устроены одинаково: слева заголовок, справа текст. Тот же
   приём, что у листа характеристик с его оглавлением, — страница говорит на
   одном языке, и глаз находит начало блока там же, где привык. */

.m367-product-page .m367-product-lead {
	max-width: 62ch;
	margin: -4px 0 18px;
	margin-inline-start: -12px;
	padding-inline-start: 24px;
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.55;
	color: var(--m367-foundation-text);
	opacity: .82;
}

.m367-product-page .m367-product-story,
.m367-product-page .m367-product-faq {
	background: var(--m367-card-bg);
	border: 1px solid var(--m367-card-border);
	border-radius: var(--m367-card-radius);
	padding: 26px var(--m367-card-pad, 24px);
	margin-bottom: 20px;
	color: var(--m367-foundation-text);
}

/* Заголовок секции — одна шкала на всю карточку: «Характеристики»,
   «О товаре», «Вопросы и ответы» звучат одинаково весомо. */
.m367-product-page .m367-product-section__title {
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: var(--m367-font-weight-strong, 600);
	line-height: 1.25;
	margin: 0;
	color: var(--m367-foundation-text);
	text-wrap: balance;
}

@media (min-width: 992px) {
	.m367-product-page .m367-product-story,
	.m367-product-page .m367-product-faq {
		display: grid;
		grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
		column-gap: 40px;
		/* Ячейки растягиваются на высоту секции — иначе липкому заголовку не в
		   чем липнуть: колонка была бы высотой ровно со строку текста, и он
		   уезжал бы вместе с ней. */
		align-items: stretch;
	}

	/* Заголовок держится у верха, пока читают секцию: с ним видно, к чему
	   относится текст, даже на четвёртом экране прокрутки.

	   Липнет САМ ЗАГОЛОВОК, а не его ячейка. Ячейке нужно быть растянутой на
	   всю высоту секции (`stretch`), иначе липнуть не в чем — с `align-self:
	   start` она схлопывается до строки, и заголовок уезжает вместе с текстом.
	   А растянутый блок сам липким быть не может: он и так во всю высоту. */
	.m367-product-page .m367-product-section__head { height: 100%; }

	.m367-product-page .m367-product-section__title {
		position: sticky;
		/* Под липкой стопкой целиком: шапка, крошки И полоса товара — на
		   странице товара стопка выше, чем на прочих страницах. */
		top: calc(var(--m367-sticky-stack-bottom, 0px) + var(--m367-product-bar-height, 0px) + 20px);
	}
}

@media (max-width: 991.98px) {
	.m367-product-page .m367-product-section__head { margin-bottom: 14px; }
}

/* Мера строки — около 68 знаков: дальше глаз теряет начало следующей. */
.m367-product-page .m367-product-story__text { max-width: 68ch; }



.m367-product-page .m367-product-story__text p {
	margin: 0 0 14px;
	line-height: 1.65;
	color: var(--m367-foundation-text);
}

.m367-product-page .m367-product-story__text p:last-child { margin-bottom: 0; }

/* Подзаголовок абзаца приходит из пакета тегом <b> — он и есть заголовок
   мысли: ставим его отдельной строкой, а не выделенным словом внутри. */
.m367-product-page .m367-product-story__text b {
	display: block;
	margin-bottom: 3px;
	font-weight: var(--m367-font-weight-strong, 600);
	color: var(--m367-foundation-text);
}

/* Вопрос и ответ — пара, а не список: между парами воздуха больше, чем внутри
   пары, и тогда их не надо разделять линиями. */
.m367-product-page .m367-product-faq__body { max-width: 68ch; }

.m367-product-page .m367-product-faq__item { margin-bottom: 18px; }
.m367-product-page .m367-product-faq__item:last-child { margin-bottom: 0; }

.m367-product-page .m367-product-faq__q {
	font-weight: var(--m367-font-weight-strong, 600);
	margin-bottom: 4px;
	color: var(--m367-foundation-text);
}

.m367-product-page .m367-product-faq__a {
	line-height: 1.65;
	color: var(--m367-foundation-text);
	opacity: .86;
}

.m367-product-page .m367-product-faq__raw p { margin: 0 0 14px; line-height: 1.65; }

@media (max-width: 767px) {
	.m367-product-page .m367-product-story,
	.m367-product-page .m367-product-faq { padding: 20px 16px; }

	.m367-product-page .m367-product-lead {
		margin-inline-start: 0;
		padding-inline-start: 0;
		font-size: 15px;
	}
}

/* --- Заголовок товара на первом экране (21.09) ---------------------------

   Плашка заголовка в шапке стоила 203 px и повторяла последнюю крошку над
   собой: товар начинался на 607 px при высоте окна 900. Заголовок переехал
   сюда, к самому товару; на странице товара `header.php` плашку не печатает.

   Размер на ступень меньше заголовка раздела: там заголовок — единственное
   содержимое плашки и держит страницу один, здесь под ним сразу снимок, цена
   и кнопка, и спорить с ними ему незачем. */

.m367-product-page .m367-product-title {
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.22;
	letter-spacing: var(--m367-letter-spacing-page-title, normal);
	font-weight: var(--m367-font-weight-strong, 600);
	color: var(--m367-page-title-color, var(--m367-foundation-text));
	text-wrap: balance;
	/* Левый край — ровно по снимку под ним. Ряд первого экрана — это .row,
	   и у него отрицательное поле bootstrap в половину жёлоба (−12 px), а
	   внутренние зоны карточки отступают на 24 px. Заголовок лежит вне ряда,
	   поэтому повторяет обе величины: иначе он стоял на 12 px правее снимка. */
	margin: 0 0 14px;
	margin-inline-start: -12px;
	padding-inline-start: 24px;
	/* Длинное имя товара не распирает страницу: 34em это около 60 знаков —
	   больше строки заголовка глаз всё равно не берёт. */
	max-inline-size: 34em;
}

@media (max-width: 767px) {
	.m367-product-page .m367-product-title {
		font-size: 20px;
		margin-bottom: 10px;
	}
}

/* --- Снимок в карточке списка без белых полей (21.09) -------------------

   Стоковый слайдер карточки красит плитку снимка в #fff и вписывает кадр
   `contain`: у широкого кадра оставались белые поля по бокам, у высокого —
   сверху и снизу. На тёмной витрине это читается как рамка вокруг товара,
   а у фирменных кадров Netcraze — как брак печати. Владелец: «по бокам белое
   лишнее».

   Прозрачный, а не тёмный: под плиткой фон самой карточки, и он уже меняется
   при наведении. Снимок производителя со своим белым фоном от этого не
   страдает — он и был белым. */

.m367-catalog-page .product-item-image-slide,
.m367-catalog-page .product-item-image-original {
	background-color: transparent;
}

/* --- Панель фильтра: служебные кнопки только на телефоне (21.09) --------

   Шапка «Фильтр ×» и кнопка «Показать товары» нужны выезжающей панели узкого
   экрана. На широком панель стоит колонкой и никуда не выезжает, а правила
   оформления этих кнопок лежат в медиа-запросе телефона — на десктопе они
   выходили голыми серыми кнопками браузера. */

@media (min-width: 992px) {
	.m367-catalog-page .m367-filter-panel__head,
	.m367-catalog-page .m367-filter-panel__foot {
		display: none;
	}

	/* «Показать» не нужна: отбор применяется по самой галочке. «Сбросить»
	   остаётся — это другое действие, и выполнить его галочками нельзя. */
	.m367-catalog-page .smart-filter #set_filter,
	.m367-catalog-page .smart-filter input[name="set_filter"] {
		display: none;
	}
}

/* Пока идёт перезагрузка выдачи после галочки — панель отзывается, а не
   висит мёртвой: клики в это время всё равно потерялись бы. */
.m367-catalog-page .smart-filter.is-applying {
	opacity: .6;
	pointer-events: none;
	transition: opacity 120ms ease;
}

/* --- Галерея товара: кадр выше, миниатюры одной лентой (21.09) ----------

   Владелец: «подними главную картинку вверх и сделай под ней одной линией все
   остальные слайды, с возможностью двигать право-влево, то есть каруселью».

   Было: стоковая лента переносила миниатюры по строкам — восемь кадров вставали
   в две строки и отжимали кнопки соседних товаров вниз, а между снимком и
   лентой зияли полсотни пустых пикселей. */

.m367-product-page .m367-card__media .product-item-detail-slider-container {
	padding-top: 0;
}

.m367-product-page .product-item-detail-slider-controls-block {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 8px;
	margin-top: 12px;
	padding: 2px 2px 8px;
	overflow-x: auto;
	/* Палец и трекпад тянут ленту, колесо мыши — тоже: это одна линия, а не
	   страница. Снап мягкий (proximity): точная остановка на кадре мешает,
	   когда человек просто смотрит ленту целиком. */
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--m367-action-border-base) transparent;
}

.m367-product-page .product-item-detail-slider-controls-block::-webkit-scrollbar {
	height: 6px;
}

.m367-product-page .product-item-detail-slider-controls-block::-webkit-scrollbar-thumb {
	background: var(--m367-action-border-base);
	border-radius: 3px;
}

.m367-product-page .product-item-detail-slider-controls-block::-webkit-scrollbar-track {
	background: transparent;
}

/* Миниатюра не сжимается: восемь кадров в узкой колонке иначе превратились бы
   в восемь полосок, по которым не понять, что на снимке. */
.m367-product-page .product-item-detail-slider-controls-image {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: start;
	background-color: transparent;
}

/* Текущий кадр виден в ленте: без этого при восьми одинаково тёмных кадрах
   непонятно, где ты находишься. */
.m367-product-page .product-item-detail-slider-controls-image.active {
	outline: 2px solid var(--m367-accent);
	outline-offset: 1px;
}

/* --- Характеристики по уровням (21.09) ----------------------------------

   Ось из проекта владельца: у каждого поля в паспорте показа есть уровень —
   chip · primary · spec · secondary · admin. Служебное (admin) покупателю не
   показывается вовсе, второстепенное (secondary) ждёт под кнопкой.

   Зачем: лист характеристик у роутера занимал 7 000 px из 11 000 — восемь
   экранов подряд, где главное тонуло среди подробностей. */

.m367-product-page .m367-spec-row--more { display: none; }

.m367-product-page .m367-spec-group.is-open .m367-spec-row--more { display: grid; }

/* Группа, где всё второстепенное, до раскрытия не показывается: заголовок без
   единой строки читается как пустой блок. */
.m367-product-page .m367-spec-group--more { display: none; }
.m367-product-page .m367-spec-group--more.is-open { display: block; }

.m367-product-page .m367-spec-more { display: inline-block; }

.m367-product-page .m367-spec-more {
	margin-top: 10px;
	padding: 7px 14px;
	color: var(--m367-foundation-text);
	background: transparent;
	border: 1px solid var(--m367-action-border-base);
	border-radius: var(--m367-foundation-radius, 8px);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--m367-motion-control), border-color var(--m367-motion-control);
}

.m367-product-page .m367-spec-more:hover,
.m367-product-page .m367-spec-more:focus-visible {
	background: var(--m367-action-bg-hover);
	border-color: var(--m367-action-border-contact);
}

/* Счётчик в кнопке раскрытия: сколько подробностей ждёт. Приглушён — это
   уточнение к действию, а не само действие. */
.m367-product-page .m367-spec-more__count {
	margin-left: 6px;
	opacity: .6;
	font-weight: var(--m367-font-weight-regular);
}

/* --- Телефон: каталог во всю ширину (21.09) -----------------------------

   Владелец, глядя на телефон: «в мобиле зажимаемся в блоки, это не имеет
   смысла, надо использовать всю ширину».

   Стоковый контейнер Битрикса держит по краям 18 px поля и 22 px отступа —
   сорок пикселей с каждой стороны. На мониторе это поля страницы, а на экране
   390 px это пятая часть ширины: карточка товара выходила 310 px, снимок в
   ней — с ладонь.

   Оставляем 16 px гутера: палец не промахивается мимо края, а карточка
   получает 358 px вместо 310 — на четверть крупнее снимок. */

@media (max-width: 767px) {
	/* `!important` тут вынужденный, а не от лени: ширину и поля контейнера
	   задают два правила с `!important` — общая оболочка сайта
	   (`--m367-foundation-shell` = «ширина экрана минус 36 px») и правило
	   каталога с полями в 22 px. Перебить их иначе нельзя, а менять оболочку
	   ради телефона значит трогать все страницы сразу. */
	.m367-catalog-page .workarea > .container.bx-content-section {
		width: 100% !important;
		max-width: 100% !important;
		margin-inline: 0 !important;
		padding-inline: 16px !important;
	}

	/* Колонка bootstrap внутри добавляла ещё 12 px к уже отданным полям, а её
	   ряд компенсировал их отрицательным полем — вместе это давало лишние
	   шесть пикселей и косой левый край. Обнуляем обе половины разом. */
	.m367-catalog-page .workarea > .container.bx-content-section > .row {
		margin-inline: 0 !important;
	}

	.m367-catalog-page .workarea > .container.bx-content-section > .row > .col,
	.m367-catalog-page .workarea > .container.bx-content-section > .row > .bx-content.col {
		padding-inline: 0 !important;
	}

	/* Карточка товара в списке: снимок во всю ширину карточки. */
	.m367-catalog-page .product-item-container { padding-inline: 0; }

	/* Первый экран страницы товара: снимок по тем же 16 px, что и секции ниже.
	   Ряд bootstrap со своим отрицательным полем и зона медиа со своими 24 px
	   давали снимку 332 px там, где у характеристик 358 — на глаз карточка
	   выглядела косой. */
	.m367-product-page .m367-detail-first-screen-row {
		margin-inline: 0 !important;
	}

	.m367-product-page .m367-card__media,
	.m367-product-page .m367-card__quick-specs,
	.m367-product-page .m367-card__commerce {
		padding-inline: 0 !important;
	}
}

/* --- Телефон: без блоков, во всю ширину (21.09) -------------------------

   Владелец: «может, в целом на мобиле откатиться от блоков и использовать всю
   ширину, не ограничивать».

   На мониторе карточка с рамкой и радиусом отделяет товар от соседей — там
   рядом три колонки. На телефоне колонка одна, соседей нет, и рамка отделяет
   содержимое только от края экрана: шестнадцать пикселей поля плюс своя рамка
   плюс свой отступ внутри — и от 390 px остаётся 310 под содержимое.

   Поэтому на узком экране карточки перестают быть карточками: фон страницы,
   без рамок и радиусов, разделены линией. Отступ внутри остаётся — текст не
   должен липнуть к краю стекла. */

@media (max-width: 767px) {
	.m367-catalog-page .workarea > .container.bx-content-section {
		padding-inline: 0 !important;
	}

	/* Карточка товара в списке и секции страницы товара. Рамку и скругление
	   несёт `.m367-catalog-card`, а не контейнер вокруг неё. */
	.m367-catalog-page .product-item.m367-catalog-card,
	.m367-catalog-page .product-item-container,
	.m367-product-page .m367-card,
	.m367-product-page .m367-product-story,
	.m367-product-page .m367-product-faq,
	.m367-product-page .m367-product-values {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		background: transparent;
		padding-inline: 14px;
	}

	/* Между товарами — линия, а не воздух с рамкой. */
	.m367-catalog-page .product-item-list-col-3 > [class*="col-"] {
		border-bottom: 1px solid var(--m367-card-border);
	}

	/* Наведение на телефоне не бывает: подъём и тень карточке ни к чему,
	   а на прокрутке они ещё и подмигивают под пальцем. */
	.m367-catalog-page .product-item.m367-catalog-card:hover {
		transform: none;
		box-shadow: none;
	}

	/* Заголовок и лид держат тот же отступ, что и содержимое. */
	.m367-product-page .m367-product-title,
	.m367-product-page .m367-product-lead {
		padding-inline: 14px;
		margin-inline: 0;
	}

	/* Чипы типов и полоса фильтра мотаются от самого края: обрезанный
	   на середине чип — знак, что ленту можно тянуть. */
	.m367-catalog-page .m367-type-chips {
		padding-inline: 14px;
		scroll-padding-inline: 14px;
	}

	/* Ряды bootstrap с отрицательным полем: пока у контейнера были свои поля,
	   эти −12 px прятались в них. Контейнер поля отдал — и ряды вылезли за
	   левый край, страница поехала вбок на те же 12 px. */
	.m367-catalog-page .workarea .row {
		margin-inline: 0;
	}

	.m367-catalog-page .workarea .row > .col,
	.m367-catalog-page .workarea .row > [class^="col-"],
	.m367-catalog-page .workarea .row > [class*=" col-"] {
		padding-inline: 0;
	}
}

/* --- Телефон: разделы каталога сеткой, а не полосой во весь экран (21.09) --

   Было: одна плитка на экран — квадратная иллюстрация 388×388 плюс подпись,
   490 px на раздел, вся страница каталога 7 124 px. Одиннадцать разделов
   листались одиннадцатью экранами, и обзора не получалось вовсе.

   Стало как у крупных магазинов на телефоне: две колонки, картинка
   пропорциями 4:3, под ней название и счётчик. Раздел занимает около 200 px,
   на экран помещается четыре — каталог виден целиком за одну прокрутку.

   Иллюстрации по-прежнему вписываются целиком (`contain`): художник просил
   сохранять весь кадр, и на маленькой плитке обрезка съела бы сюжет. */

@media (max-width: 767px) {
	.m367-catalog-page .m367-catalog-parent-overview__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding-inline: 14px;
	}

	.m367-catalog-page .m367-catalog-section-tile {
		padding: 10px;
		border-radius: 14px;
		/* На сетке рамка нужна: она отделяет соседа слева, а не край экрана. */
		border: 1px solid var(--m367-card-border);
		background: var(--m367-card-bg);
	}

	.m367-catalog-page .m367-catalog-section-tile__media {
		margin: -10px -10px 10px;
		border-radius: 14px 14px 0 0;
		aspect-ratio: 4 / 3;
	}

	.m367-catalog-page .m367-catalog-section-tile__title {
		font-size: 14px;
		line-height: 1.25;
		margin-bottom: 4px;
	}

	/* Описание раздела на плитке в два пальца шириной не читают — оно только
	   отодвигает счётчик товаров, ради которого сюда и смотрят. */
	.m367-catalog-page .m367-catalog-section-tile__text { display: none; }

	.m367-catalog-page .m367-catalog-section-tile__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		font-size: 12px;
	}

	/* Наведения на телефоне нет: подъём только моргает под пальцем. */
	.m367-catalog-page .m367-catalog-section-tile:hover {
		transform: none;
		box-shadow: none;
	}
}

/* --- Телефон: шапка раздела в одну строку (21.09) ----------------------

   Владелец: «можно сжать и блоки, мобильный оптимизировать максимально».

   Плашка раздела занимала 140 px: иллюстрация 96 px квадратом, заголовок
   под ней и по 20 px воздуха сверху и снизу — вместе с крошками это 190 px
   до первого товара, на телефоне почти четверть экрана. Ради двух слов.

   Сжимаем в строку: иллюстрация 52 px слева, заголовок рядом. Рамка и фон
   не нужны — блок и так первый на странице, отделять его не от чего. */

@media (max-width: 767px) {
	.m367-catalog-page .m367-page-intro {
		margin-inline: 0;
	}

	/* `!important` — против правила `.m367-section-head--catalog`, которое уже
	   задаёт свои поля с `!important` в мобильном медиа-запросе: без этого
	   плашка оставалась 140 px высотой. */
	.m367-catalog-page .m367-section-head,
	.m367-catalog-page .m367-section-head--catalog {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 14px 12px !important;
		margin: 6px 0 12px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	/* Название товара — ТРИ строки (27.09, владелец: «имена на мобиле»).
	   Прежние две ставились, когда на полку шло сырое имя поставщика в двадцать
	   слов, и обоснование «тремя строками цена уедет за сгиб» было верным. С
	   25.09 короткое имя есть у всех 48 039 опубликованных, и на полку идёт оно.
	   Замер по ним при карточке 157 px (около 19 знаков в строке): в две строки
	   помещается 62,2%, в три — 97,0%. То есть двумя строками мы обрезали
	   18 154 товара, причём обрезали ХВОСТ, где стоит модель: покупатель видел
	   «Роутер беспроводной D-…» и не знал, какой именно прибор перед ним.
	   Четвёртая строка добавляет три десятых процента и не стоит высоты. */
	.m367-catalog-page .product-item-title a {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.m367-catalog-page .m367-section-head--withhero {
		grid-template-columns: none;
	}

	.m367-catalog-page .m367-section-head__hero {
		flex: 0 0 auto;
		/* Тоже по строке заголовка (25.09): на телефоне она 32 px, а значок стоял
		   52 — полторы строки. Правило одно на все ширины. */
		width: 36px;
		height: 36px;
		margin: 0;
		border-radius: 12px;
		overflow: hidden;
	}

	.m367-catalog-page .m367-section-head__hero img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.m367-catalog-page .m367-section-head__title,
	.m367-catalog-page .m367-section-head--catalog .m367-section-head__title {
		margin: 0 !important;
		font-size: 20px !important;
		line-height: 1.2 !important;
	}

	/* Подчёркивание под заголовком раздела — украшение с широкого экрана:
	   в строке оно только добавляет высоты. */
	.m367-catalog-page .m367-section-head__title::after { display: none; }

	/* Вводный текст раздела на телефоне не читают — он отодвигает товар. */
	.m367-catalog-page .m367-section-head__intro { display: none; }

	/* Полоса крошек тоньше: это одна строка, а не блок. */
	.m367-catalog-page .m367-crumbs-bar__inner {
		min-height: 38px;
		padding-inline: 14px;
	}

	.m367-catalog-page .m367-type-chips { margin-bottom: 12px; }
}

/* ==========================================================================
   «Оптимально вместе» — первый слой COMPATIBLE_WITH (канон ST:362–371).
   Плитки товаров-партнёров внизу карточки. Оформление берёт те же токены, что
   и остальные секции страницы: своих цветов у блока нет.
   ========================================================================== */
.m367-product-page .m367-product-together {
	background: var(--m367-card-bg);
	border: 1px solid var(--m367-card-border);
	border-radius: var(--m367-card-radius);
	padding: 26px var(--m367-card-pad, 24px);
	margin-bottom: 20px;
	color: var(--m367-foundation-text);
}

.m367-product-page .m367-product-section__note {
	color: var(--m367-foundation-text-muted, #9aa0a6);
	font-size: 13px;
	margin-top: 2px;
}

.m367-together__grid {
	display: grid;
	/* Четыре плитки на десктопе, две на планшете, две на телефоне: одна в ряд
	   на узком экране растянула бы снимок на всю ширину и увела бы остальные
	   товары за экран. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: 14px;
	margin-top: 16px;
}

.m367-together__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px;
	border: 1px solid var(--m367-card-border);
	border-radius: calc(var(--m367-card-radius) - 4px);
	background: var(--m367-foundation-surface, #121316);
	color: inherit;
	text-decoration: none;
	transition: transform var(--m367-motion-lift, 220ms ease-out),
		background-color var(--m367-motion-lift, 220ms ease-out),
		border-color var(--m367-motion-lift, 220ms ease-out);
}

/* Отклик тот же, что у карточек каталога: подъём плюс светлеющая подложка —
   на тёмном фоне высоту показывает подложка, а не тень. */
.m367-together__item:hover,
.m367-together__item:focus-visible {
	transform: translateY(-4px);
	background: var(--m367-card-bg-hover, #1e2025);
	border-color: var(--m367-action-border-hover, #c2703a);
}

.m367-together__pic {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	max-width: 100%;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
}

.m367-together__pic img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.m367-together__nopic {
	font-size: 34px;
	font-weight: 600;
	color: #c9ced6;
}

.m367-together__shelf {
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--m367-foundation-text-muted, #9aa0a6);
}

.m367-together__name {
	font-size: 13px;
	line-height: 1.35;
	/* Имя режется тремя строками: плитки в ряду должны кончаться на одной
	   высоте, иначе цена у соседей стоит на разных уровнях. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.m367-together__price {
	margin-top: auto;
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.m367-together__item { transition: none; }
	.m367-together__item:hover { transform: none; }
}

/* Телефон: две плитки в ряд, а не одна во весь экран. Снимок в 350 px шириной
   занимал бы пол-экрана на каждый товар, и «оптимально вместе» превращалось в
   ещё одну ленту каталога — ровно то, на что владелец указывал про блоки. */
@media (max-width: 600px) {
	.m367-product-page .m367-product-together {
		padding: 18px 14px;
	}

	.m367-together__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 12px;
	}

	.m367-together__item { padding: 10px; gap: 4px; }
	.m367-together__pic { aspect-ratio: 4 / 3; }
	.m367-together__name { font-size: 12px; -webkit-line-clamp: 2; }
	.m367-together__price { font-size: 14px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Цена без хозяина (23.09)

   Канон владельца 21.09: цена либо от поставщика, либо от прихода. Там, где
   ни того, ни другого, число с витрины убирается, а на его месте стоит ответ
   покупателю — что делать дальше. Набором и кеглем это НЕ цена: покупатель
   не должен принять надпись за сумму, но и не должен решить, что цену забыли.
   ──────────────────────────────────────────────────────────────────────────── */
/* СЕЛЕКТОР ДОЛЖЕН БЫТЬ НЕ СЛАБЕЕ ТОГО, ЧТО ПЕРЕБИВАЕМ. Первая редакция
   написала `.m367-price-no-owner` (один класс) против
   `.m367-catalog-page .product-item-price-current` (два) — правка не подействовала
   вовсе, и мерка честно показала те же 53 px. */
.m367-catalog-page .product-item-price-current.m367-price-no-owner,
.m367-price-no-owner {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--m367-text-secondary);
	/* ЗДЕСЬ СТОИТ ТЕКСТ, А НЕ ЧИСЛО, И ПЕРЕНОС ЕМУ НУЖЕН (27.09).
	   Правило цены запрещает перенос намеренно: «43 500,00 ₽» рвать нельзя.
	   Но у товара без хозяина цены на этом месте «Временно недоступен» — при
	   390 px оно не влезает в колонку и, не имея права перенестись, выезжало за
	   экран на 53 px и УВОЗИЛО ВСЮ СТРАНИЦУ вбок.
	   Нашла новая мерка читаемости (`m367_readability_v1.js`) на первом же
	   запуске; прежние проверки этого не видели — они мерили `scrollWidth`
	   документа, а он считает и то, что лежит внутри полос с собственной
	   прокруткой, поэтому число было и у здоровой страницы. */
	white-space: normal;
}

/* Ссылка на разбор рядом с группой характеристик (24.09, блок «cable»).
   Рисуется ОДИН раз на группу: пять одинаковых ссылок подряд — шум, а не
   помощь. Тон приглушённый: это подсказка, а не призыв уйти со страницы. */
.m367-product-page .m367-spec-more {
	margin-left: .5em;
	font-size: .85em;
	color: var(--m367-text-muted, #8a8f98);
	border-bottom: 1px dashed currentColor;
	text-decoration: none;
	white-space: nowrap;
}
.m367-product-page .m367-spec-more:hover,
.m367-product-page .m367-spec-more:focus-visible {
	color: var(--m367-action, #e8833a);
}

/* СЧЁТЧИК ФИЛЬТРА «ВЫБРАНО N · ПОКАЗАТЬ» (25.09, владелец: «появляется не с
   той стороны и не поверх, и в глубине»).

   Три жалобы — и три разные причины, из которых решающая третья:

   1. СТОРОНА. Параметр `POPUP_POSITION` компоненту не передавался, и он брал
      умолчание `left`: пузырь выходил ВЛЕВО от фильтра, к краю экрана. Передан
      `right` — в сторону товаров, которые он и пересчитывает.
   2. СЛОЙ. Стоковый `z-index: 915`, а над страницей лежит наш системный слой
      шапки с 1100.
   3. **ОБРЕЗКА, и она сильнее слоя.** Колонка фильтра `#m367-filter-panel`
      липкая и прокручивается внутри себя (`overflow: auto`) — а overflow режет
      всё, что вышло за её 280 px, независимо от z-index. Абсолютный пузырь
      сбоку в такой колонке не покажется НИКОГДА.

   Поэтому счётчик перестал быть пузырём сбоку и стал строкой ПОД параметром,
   внутри колонки: обрезать нечего, перекрывать некому, и на телефоне он ведёт
   себя так же, как на десктопе. */
.smart-filter-popup-result,
.bx-filter-popup-result {
	position: static;
	/* `!important` тут по делу: стоковый скрипт ставит `display: inline-block`
	   ВСТРОЕННЫМ стилем (script.js:217), и без приоритета строка сжимается до
	   ширины текста — 102 px в колонке 280. Переспорить встроенный стиль
	   обычным правилом нельзя. */
	display: block !important;
	z-index: 1160;
	margin: 8px 0 2px;
	padding: 8px 10px;
	width: 100%;
	min-height: 0;
	border: 1px solid var(--m367-action-border, rgba(255, 255, 255, .14));
	border-image: none;
	border-radius: 8px;
	background: var(--m367-card-bg, rgba(255, 255, 255, .04));
	color: inherit;
	white-space: normal;
	text-align: left;
	box-shadow: none;
}

/* Компонент кладёт счётчик в ЗАГОЛОВОК группы — flex-строку «название ⌄», и
   притом ПЕРВЫМ ребёнком. В потоке он отбирал у названия половину ширины
   (95 px из 190). Даём ему собственную строку под названием, и только тому
   заголовку, где счётчик сейчас лежит: пустые контейнеры прочих групп трогать
   незачем. Браузер без `:has` показывает счётчик по-старому — узко, но видно. */
.smart-filter-parameters-box-title:has(> .smart-filter-container-modef > #modef) {
	flex-wrap: wrap;
}

.smart-filter-container-modef:has(> #modef) {
	flex: 0 0 100%;
	order: 2;
}

/* Стрелка пузыря больше не нужна: строка стоит на месте, а не указывает вбок. */
.smart-filter-popup-result::before,
.smart-filter-popup-result::after {
	display: none;
}

.smart-filter-popup-result .smart-filter-button-box,
.smart-filter-popup-result a {
	display: inline-block;
	margin-left: 6px;
	color: var(--m367-accent, #e0a23b);
}


/* ЗАСЕЧКИ ЛИНЕЙКИ ЦЕНЫ (25.09, разбор «синих вкраплений»). Стоковый фильтр
   рисует их голубовато-серым `#a2bfc7` — на тёмной колонке это холодное пятно
   рядом с оранжевой полосой диапазона. Засечка только размечает шкалу, цвета
   ей не нужно: берём общий тихий край. */
.smart-filter-slider-ruler {
	background: var(--m367-action-border-divider);
}


/* ЗНАЧОК РАЗДЕЛА — РОСТОМ СО СТРОКУ ЗАГОЛОВКА (25.09, владелец: «надо
   уменьшить картинку до размера строки»).

   Колонка под иллюстрацию была `clamp(120px, 16vw, 200px)`, то есть на широком
   экране 200 px, и плашка заголовка вырастала до 252 px — четверть первого
   экрана под картинку, которая ничего не решает. Строка заголовка при этом
   38 px (35,28 × 1,08), и рядом с ней квадрат в пять строк выглядел не
   иллюстрацией, а недоразумением.

   Теперь колонка едет вместе с заголовком: 2,6vw в тех же границах, что и его
   кегль. На телефоне размер свой (52 px) и задан ниже по файлу — там заголовок
   мельче, и значок уже был соразмерен.

   Квадрат и `object-fit: contain` остаются: художник просил показывать кадр
   целиком, и на маленьком размере это тем более важно — обрезка съела бы
   сюжет. */
.m367-section-head--withhero {
	/* Значок РОСТОМ СО ВСЮ НАДПИСЬ, а не с одну строку (25.09, владелец:
	   «картинку надо делать на размер надписи по высоте»). Первая редакция
	   привязала его к строке — и у заголовка в две строки значок оказался
	   вдвое ниже текста, будто съехал.

	   Ширина колонки поэтому `auto`: сторону задаёт САМ значок, растянутый по
	   высоте строки грида, а квадратным его держит `aspect-ratio`. Одна строка
	   — 38 px, две — под 80, и рядом с текстом это читается как одно целое. */
	/* Сторону значка приносит скрипт в `--m367-hero-size`: это ИЗМЕРЕННАЯ высота
	   надписи. Чистым CSS не выходит — при `width: auto` плюс `aspect-ratio`
	   ширина зависит от высоты, а высота строки сетки от ширины, и браузер
	   разрывает круг по-своему: значок вставал 96 px против надписи в 76.
	   Запасное значение 44 px работает, пока скрипт не отработал. */
	grid-template-columns: var(--m367-hero-size, 44px) 1fr;
	column-gap: 14px;
}

.m367-section-head--withhero .m367-section-head__hero {
	/* Значок стоит напротив ВСЕГО текста — заголовка и описания: высоту ему
	   приносит скрипт, поэтому две строки сетки он больше не распирает. */
	grid-row: 1 / span 2;
	align-self: center;
	height: var(--m367-hero-size, 44px);
	width: var(--m367-hero-size, 44px);
}


/* НА ТЕЛЕФОНЕ СЧЁТЧИК ФИЛЬТРА — ДУБЛЬ КНОПКИ (25.09, проверено на живой
   панели). Поведение фильтра на двух ширинах РАЗНОЕ, и это правильно:

   - на десктопе галочка применяется сразу, страница уходит на адрес отбора —
     счётчику там нечего сказать, он и не успевает появиться;
   - на телефоне панель лежит поверх списка, отбор копится в ней, и число
     найденного живёт на главной кнопке внизу: «Показать 41».

   Строка «Выбрано: 41 · Показать» внутри панели повторяет ровно то же число
   парой сантиметров выше. Одно и то же дважды на маленьком экране — не
   подстраховка, а шум; оставляем кнопку. */
@media (max-width: 767px) {
	#m367-filter-panel .smart-filter-popup-result {
		display: none !important;
	}
}


/* ПОЛОСА «ЧТО ОТОБРАНО» (25.09). Стоит над списком, сразу под чипами типов —
   это один орган управления выдачей, и разносить их по экрану значит заставлять
   глаз прыгать (то же соображение, что у кнопки фильтра 21.09).

   Вид у чипа отличается от чипа ТИПА намеренно: тип — это куда я смотрю,
   отбор — что я снял с полки. У типа заливка марки, у отбора тихий край и
   крестик. */
.m367-picked {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
}

.m367-picked__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 6px 12px;
	border: 1px solid var(--m367-action-border-base);
	border-radius: 999px;
	background: var(--m367-action-tonal-bg);
	color: var(--m367-text-strong);
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.m367-picked__chip i {
	font-style: normal;
	font-size: 16px;
	line-height: 1;
	color: var(--m367-text-tertiary);
}

.m367-picked__chip:hover {
	border-color: var(--m367-action-border-hover);
	background: var(--m367-action-bg-faint);
}

.m367-picked__chip:hover i { color: var(--m367-accent); }

.m367-picked__chip:focus-visible,
.m367-picked__reset:focus-visible {
	outline: none;
	box-shadow: var(--m367-focus-ring);
}

.m367-picked__reset {
	padding: 6px 4px;
	border: 0;
	background: none;
	color: var(--m367-text-tertiary);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.m367-picked__reset:hover { color: var(--m367-accent); }

@media (max-width: 767px) {
	/* На телефоне полоса стоит плотнее: там каждый лишний ряд — это товар,
	   уехавший за край экрана. */
	.m367-picked { gap: 6px; margin-bottom: 10px; }
	.m367-picked__chip { padding: 5px 9px 5px 11px; font-size: 13px; }
}


/* ПОЛОСА УПРАВЛЕНИЯ ВЫДАЧЕЙ ЛИПНЕТ НА ДЕСКТОПЕ (25.09, владелец: «список
   фильтров длинный и там искать, а потом юби и роутер удобно выбрать»).

   Колонка фильтра у нас в 21 параметр: прокрутив к середине списка, человек
   уже не видит, что именно отобрано, и чтобы снять «Ubiquiti», надо ехать
   наверх. Полоса с типом и отбором остаётся под липкой стопкой — и снять, и
   сменить тип можно там, где смотришь товары.

   Садится на ту же стопку, что и колонка фильтра (`--m367-sticky-stack-bottom`):
   высоту шапки и крошек считает контракт, руками её сюда не вписываем — она
   меняется при прокрутке (мини-шапка).

   Фон непрозрачный и полоса растянута отрицательными полями: липкий блок
   пропускает карточки ПОД собой, и без фона товары читались бы сквозь чипы. */
.m367-catalog-bar {
	position: relative;
	z-index: 40;
}

@media (min-width: 768px) {
	.m367-catalog-bar {
		position: sticky;
		/* ЗАЗОРА НАД ПОЛОСОЙ БЫТЬ НЕ ДОЛЖНО. С отступом в 6 px между крошками и
		   чипами оставалась щель, и в неё проезжали верхушки карточек — полоса
		   выглядела дырявой. Садимся вплотную к стопке, а воздух даём
		   внутренним отступом. */
		top: var(--m367-sticky-stack-bottom, 0px);
		/* Растягиваем фон ТОЛЬКО ВЛЕВО — в промежуток между колонкой фильтра и
		   товарами. Вправо нельзя: там край оси, и при окне, в которое ось уже
		   упёрлась (1366 и уже), лишние 18 px выносили полосу за границу
		   документа — появлялась горизонтальная прокрутка на 2 px. */
		/* ЩЕЛЬ ЗА ЧИПАМИ (26.09, владелец прислал снимок). Воздух под полосой
		   давали ДВА поля снаружи фона: `margin-bottom: 6px` и нижний внутренний
		   отступ в 2 px. Липкий блок красит фоном только себя, и в эти восемь
		   пикселей проезжал товар — под строкой сортировки шла рваная кромка из
		   «плеч» карточек. Тот же зазор уже убирали СВЕРХУ полосы; снизу он
		   остался.
		   Весь воздух теперь внутренний: фон полосы кончается там же, где
		   кончается её воздух, и товар выныривает уже под волоском. */
		margin: 0 0 0 calc(var(--m367-grid-gap, 16px) * -1);
		padding: 12px 0 14px var(--m367-grid-gap, 16px);
		background: var(--m367-foundation-bg);
	}

	/* ПОД ПОЛОСОЙ — ЗАТУХАНИЕ, А НЕ ОБРЕЗ. Липкая полоса пропускает товары под
	   собой, и её нижний край рубил проезжающие снимки ровной линией: на тёмной
	   полке это читалось как та же щель, только на два пикселя ниже. Градиент из
	   фона страницы в прозрачность даёт карточке уйти под полосу.
	   Это не тень (тень на тёмном не видна, правило 18.09), а продолжение
	   собственного фона полосы. */
	.m367-catalog-bar:before {
		content: "";
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		height: 18px;
		background: linear-gradient(to bottom, var(--m367-foundation-bg), transparent);
		pointer-events: none;
	}

	/* Нижний край обозначаем волоском, а не тенью: тень на тёмном фоне не
	   читается (правило 18.09), а граница показывает, где кончается полоса и
	   начинается список. */
	.m367-catalog-bar:after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background: var(--m367-action-border-divider);
	}

	/* Внутри полосы отступы гасим: ряды идут вплотную, иначе липкая шапка
	   съедает высоту списка. */
	.m367-catalog-bar .m367-type-chips { margin-bottom: 8px; }
	.m367-catalog-bar .m367-picked { margin-bottom: 8px; }
}


/* КАТАЛОГ ВСТАЁТ НА ОБЩУЮ ОСЬ (25.09, владелец: «мы не используем всю заданную
   ширину, у нас фильтр и товары уже»).

   Ширина 1200 — канон единой оси, решение владельца от 06.07, и он тут ни при
   чём: её держал заголовок, а сетка «фильтр + товары» до неё не доставала.
   Замер на экране 1540: заголовок 1200 от левого края 170, сетка 1156 от 192 —
   44 пикселя съедали отступы бутстраповского контейнера, и каталог выглядел
   уже и правее заголовка.

   Снимаем боковые отступы контейнера ТОЛЬКО на странице раздела: у `.row`
   внутри свой отрицательный отступ, а у колонки — свой положительный, и вместе
   они возвращают содержимое ровно на ось. Страницу товара не трогаем: там своя
   раскладка. */
.m367-catalog-page:not(.m367-product-page) .container.bx-content-section {
	padding-left: 0;
	padding-right: 0;
}


/* ПОДРАЗДЕЛЫ — СТРОКАМИ, А НЕ ПЛАКАТАМИ (25.09, владелец: «огромные подразделы
   на уровне „сети и связь“ — это неправильно, категорически не согласен, надо
   оптимизировать». И он прав.)

   Замер до правки: плитка 285 × 567, картинка внутри 283 × 283, двенадцать
   подразделов занимали 1639 px — почти два экрана по 900. Это навигация: сюда
   приходят выбрать направление и уйти в него, а не разглядывать. Чтобы увидеть
   последний подраздел, приходилось прокрутить всю страницу.

   Стало: значок слева, название и описание справа. Картинка остаётся квадратом
   и показывается целиком (просьба художника), просто её место — 72 px, как у
   значка раздела в заголовке. */
.m367-catalog-page .m367-catalog-parent-overview__grid {
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 12px;
}

.m367-catalog-page .m367-catalog-section-tile {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	align-items: center;
	column-gap: 14px;
	row-gap: 2px;
	padding: 12px 14px;
}

.m367-catalog-page .m367-catalog-section-tile__media {
	/* Значок держит ВСЕ три строки текста: название, описание и счёт товаров.
	   Иначе счётчик с «Открыть» съезжали под значок в первую колонку и вставали
	   не по одной линии с текстом. */
	grid-row: 1 / span 3;
	margin: 0;
	border: 0;
	border-radius: 12px;
	aspect-ratio: 1 / 1;
	align-self: start;
}

.m367-catalog-page .m367-catalog-section-tile__meta {
	grid-column: 2;
	margin: 0;
}

.m367-catalog-page .m367-catalog-section-tile__title {
	margin: 0;
	font-size: 16px;
	line-height: 1.25;
}

/* Описание в две строки: оно помогает выбрать направление, но плитка не место
   для абзаца — полный текст ждёт на самой странице раздела. */
.m367-catalog-page .m367-catalog-section-tile__text {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.m367-catalog-page .m367-catalog-parent-overview__grid {
		grid-template-columns: 1fr;
	}

	.m367-catalog-page .m367-catalog-section-tile {
		grid-template-columns: 56px minmax(0, 1fr);
		padding: 10px 12px;
	}
}


/* ЧЕТЫРЕ КАРТОЧКИ В РЯД ТАМ, ГДЕ ОНИ ВЛЕЗАЮТ (25.09, владелец: «так бы я хотел
   в итоге каталог, 4 в ряд реализуемо?»).

   Компонент раскладывает товары жёстким числом колонок — `LINE_ELEMENT_COUNT`
   превращается в класс `product-item-list-col-3`, и на колонке шириной 900
   получалось три карточки по 287. Жёсткое число неудобно тем, что оно не знает
   про ширину: то же «3» на узком экране давит карточки, а на широком оставляет
   воздух.

   Считает сама сетка: колонка не уже 200 px, сколько влезет — столько и будет.
   На нынешних 900 это ровно четыре по 213, на узком экране — три и два, на
   телефоне — своя раскладка ниже по файлу. */
.m367-catalog-page .m367-catalog-products-col .row[class*="product-item-list-col"] {
	/* КОЛОНОК СТОЛЬКО, СКОЛЬКО КАРТОЧЕК В РЯДУ (25.09, при переходе на ось 1440).
	   `auto-fill` тут не годится: компонент выводит ряды по ЧЕТЫРЕ ячейки, а
	   сетка при широкой колонке насчитывала пять — пятая пустовала, и карточка
	   вместо 270 выходила 212. Отсюда и «пила» в замерах по осям: 210, 240, 212,
	   236 вместо ровного роста.

	   Делим поровну. Половинные раскладки берём кратные четырём (4 и 2): при
	   трёх колонках ряд из четырёх ячеек разваливался бы на 3 + 1. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
	.m367-catalog-page .m367-catalog-products-col .row[class*="product-item-list-col"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* ПОРЯДОК ВЫДАЧИ — СТРОКОЙ ССЫЛОК (25.09, владелец: «с сортировками»).
   Выбор виден целиком, без раскрытия списка; текущий порядок подчёркнут маркой.
   Ссылками, а не кнопками: каждый порядок — свой адрес, его можно прислать. */
.m367-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 0 0 8px;
	font-size: 13px;
}

.m367-sort__label {
	color: var(--m367-text-tertiary);
}

.m367-sort__item {
	color: var(--m367-text-secondary);
	text-decoration: none;
	border-bottom: 1px dashed var(--m367-action-border-soft);
	transition: color .18s ease, border-color .18s ease;
}

.m367-sort__item:hover {
	color: var(--m367-accent);
	border-bottom-color: var(--m367-accent);
}

.m367-sort__item--on {
	color: var(--m367-accent);
	border-bottom: 1px solid var(--m367-accent);
	font-weight: 600;
}

@media (max-width: 767px) {
	/* На телефоне порядок уезжает в свою строку с прокруткой вбок: рядом с
	   чипами типов он занял бы второй ряд и отнял у списка целый товар. */
	.m367-sort {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 10px;
		margin-bottom: 6px;
	}

	.m367-sort::-webkit-scrollbar { display: none; }
	.m367-sort__item { white-space: nowrap; }
}


/* ВЫСОТА КАРТОЧКИ ИДЁТ ЗА ШИРИНОЙ (25.09, владелец: «может под 4 в ряд высоту
   карточки надо корректировать? может не универсально, а в зависимости от
   разрешения?»).

   Он прав: с четырьмя в ряд карточка сузилась с 287 до 210, а кадр 4:3 дал
   176 × 132 — снимок товара стал мельче подписи под ним. Число колонок при этом
   уже считает сама сетка (`auto-fill` от 200 px): на широком экране их четыре,
   на среднем три, на узком два — «в зависимости от разрешения» и есть.

   Кадр переведён в квадрат. Так снимок занимает 210 × 210 вместо 176 × 132 при
   той же ширине карточки, и это тот же квадрат, в котором рисовал художник, —
   `object-fit: contain` внутри показывает его целиком. Высота карточки при этом
   не задаётся: её по-прежнему определяет содержимое. */
.m367-catalog-page .m367-catalog-products-col .product-item-image-wrapper {
	aspect-ratio: 1 / 1;
}


/* НА ТЕЛЕФОНЕ «В КОРЗИНУ» — ЗНАЧОК РЯДОМ С ЦЕНОЙ (25.09, владелец: «может на
   телефоне в корзину заменить иконкой? рядом с ценой»).

   Кнопка занимала отдельную строку в 56 px под ценой — при двух карточках в ряд
   это строка на каждую карточку и полтора товара, уехавших за экран. Цена и
   кнопка в разметке соседи, поэтому ставим их в один ряд сеткой, не трогая сам
   шаблон компонента.

   Значок получает ТОЛЬКО кнопка покупки (`btn-primary`). «Нет в наличии» —
   `btn-link`, и она остаётся словами: значок корзины там обещал бы покупку,
   которой нет. */
@media (max-width: 767.98px) {
	.m367-catalog-page .m367-catalog-products-col .product-item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 10px;
	}

	/* ЧТО ИДЁТ ВО ВСЮ ШИРИНУ (27.09, владелец: «чипы три вряд бред надо по
	   красоте»).

	   Карточка на телефоне — грид «цена | кнопка», и всё, что не названо здесь,
	   молча попадает в первую колонку шириной 75 px. Туда же попадали чипы: в
	   75 px не помещается даже два коротких, и «Wi‑Fi 4», «N300», «2.4 ГГц»,
	   «Mesh» вставали столбиком в четыре строки — карточка вытягивалась, а
	   читалось это как список, а не как метки.

	   Снимок, заголовок и чипы занимают обе колонки; в ряду остаются только цена
	   и кнопка, ради которых ряд и заведён. */
	.m367-catalog-page .m367-catalog-products-col .product-item > .product-item-image-wrapper,
	.m367-catalog-page .m367-catalog-products-col .product-item > .m367-card-title-block,
	.m367-catalog-page .m367-catalog-products-col .product-item > .m367-card-chips {
		grid-column: 1 / -1;
	}

	/* Чипы — в ряд с переносом, и не больше двух строк: третья строка меток на
	   карточке в 157 px спорит с именем товара. */
	.m367-catalog-page .m367-catalog-products-col .product-item > .m367-card-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		/* Постоянная высота под одну строку меток: с ней ряд стоит ровно даже
		   там, где у одного товара чипы есть, а у соседа нет (27.09). Две
		   строки — потолок, третья спорит с именем. */
		min-height: 24px;
		max-height: 52px;
		overflow: hidden;
		justify-content: center;
	}

	/* ТРИ СТРОКИ ИМЕНИ ЦЕНТРУЮТСЯ ОДИНАКОВО (27.09, владелец: «две проблемы
	   центровки тип прибора»).

	   Вид изделия стоял по левому краю, а бренд с моделью — по центру: своего
	   выравнивания у вида нет, он наследовал его от блока заголовка, тогда как
	   стоковый `.product-item-title` внутри того же блока центрируется сам.
	   Три строки об одном товаре обязаны стоять по одной оси — иначе глаз
	   читает их как три разные вещи. */
	.m367-catalog-page .m367-catalog-products-col .product-item > .m367-card-title-block {
		text-align: center;
	}

	.m367-catalog-page .m367-catalog-products-col .m367-card-chip {
		padding: 2px 6px;
		font-size: 11px;
	}

	/* ЦЕНА НЕ НАЛЕЗАЕТ НА КНОПКУ (27.09, аудит).

	   Замер до правки: цена занимала x 28–118, кнопка x 72–157 — наложение
	   45×28 px, и так у 24 карточек из 24. Причина в том же гриде: цене
	   доставались 75 px, а её 22 px кеглем нужно 90, и `nowrap` выносил лишнее
	   поверх соседней ячейки.

	   Кегль на узком экране 18: цене хватает 74 px, и она остаётся самым крупным
	   числом карточки — «громкая цена» (26.09) от этого не пострадала. */
	/* ЦЕНА И КНОПКА — ПО ОДНОЙ ЛИНИИ (27.09, владелец: «цена кнопка корзины по
	   высоте»).

	   Они стояли со сдвигом в 7 px: у ячейки цены свой `padding-top: 12`, у
	   кнопки свой `margin-top: 10`, а высоты разные — 33 против 46. Грид
	   центрирует ЯЧЕЙКИ, но собственные отступы внутри них он не видит, и ряд
	   выходил кривым.
	   Отступы снимаем у обоих, воздух над рядом даёт сам грид. */
	.m367-catalog-page .m367-catalog-products-col .product-item > .product-item-price-container {
		grid-column: 1;
		min-width: 0;
		padding-top: 0;
		margin-top: 0;
		/* ЦЕНА ЦЕНТРУЕТСЯ ПО КНОПКЕ, А НЕ ПРИЖИМАЕТСЯ К ЕЁ НИЗУ (27.09, владелец:
		   «стоит ли цену по высоте относительно корзины отцентровать верх низ»).
		   Обе ячейки стоят `align-self: end`, и низы у них сходятся — 795 против
		   793, — но высоты разные (24 против 46), поэтому центр цены оказывался
		   на 12 px ниже центра кнопки. Ячейка цены получает высоту кнопки и
		   центрирует содержимое: низ ряда прежний, центры совпадают. */
		display: flex;
		align-items: center;
		min-height: 46px;
	}

	.m367-catalog-page .m367-catalog-products-col .product-item > .product-item-info-container:not(.product-item-price-container),
	.m367-catalog-page .m367-catalog-products-col .product-item .product-item-button-container {
		margin-top: 0;
		padding-top: 0;
	}

	.m367-catalog-page .m367-catalog-products-col .product-item {
		row-gap: 10px;
	}

	/* РИТМ РЯДА (27.09, владелец: «карточки на экране не ритмичны», выбран
	   вариант «выровнять полосы»).

	   Высоты самих карточек совпадали и раньше — 409 и 409, — а цены стояли на
	   разной высоте: замер показал расхождение до 18 px в шести рядах из
	   двенадцати. Причина внутри: у одного товара имя занимает две строки и
	   чипов нет вовсе (55 + 0), у соседа имя в три строки и две строки чипов
	   (91 + 46). Полосы разной высоты — и всё, что ниже, съезжает.

	   Лечим двумя правилами, а не подгонкой каждой полосы:
	   1) блок имени получает постоянную высоту под свой максимум — тип, бренд и
	      две строки модели; короткое имя оставляет воздух, зато верх ряда ровный;
	   2) свободное место карточки уходит В ОДИН промежуток — перед ценой.

	   ПУСТОТУ РАЗДАВАТЬ МЕЖДУ ВСЕМИ ПОЛОСАМИ НЕЛЬЗЯ (27.09, владелец: «фото,
	   начало подписи и цена-корзина должны быть на одном уровне»).
	   `align-content: space-between` делил остаток на ТРИ промежутка, и любая
	   разница высот уезжала во все швы сразу: у соседей блок имени вышел 88 и
	   93,34 px (имя переносится на лишнюю строку), пять с третью пикселя
	   разделились на три — и подпись съехала на 1,78 px в четырёх ряду из
	   двенадцати. Глаз это видит как рваный ряд, хотя высоты карточек совпадают
	   до пикселя.

	   Теперь ряды прижаты к верху, а последний растянут (`1fr`): всё свободное
	   место собирается ПОД чипами, цена и кнопка садятся на низ ряда
	   (`align-self: end`). Низ фото и верх подписи от высоты имени больше не
	   зависят вовсе. Рядов ровно четыре — снимок, имя, чипы, цена с кнопкой, —
	   и чипы с 27.09 рисуются всегда, даже пустые, поэтому счёт не плывёт;
	   кнопки избранного и сравнения в потоке не стоят. */
	/* ПЛОТНОСТЬ КАРТОЧКИ НА ТЕЛЕФОНЕ (27.09, владелец: «Оптимизация 10 из 10»).

	   Замер до правки на 390: карточка 157×407, снимок 129×129, блок имени 88
	   при содержимом 57, между именем и чипами 18 px. В первый экран помещались
	   ДВЕ карточки, и половину их высоты занимал воздух.

	   Три источника пустоты, и все три — наши:

	   1) ДВОЙНОЙ ОТСТУП. У снимка, имени и чипов остались собственные
	      `margin-bottom` (14 · 8 · 12) от флексовой раскладки, а грид добавляет
	      к ним свой `row-gap: 10`. Воздух между полосами задаёт РОВНО ОДИН
	      механизм — здесь это грид, поэтому свои поля блоки отдают.
	   2) ЗАПАС БЛОКА ИМЕНИ БЫЛ МЕНЬШЕ ФАКТА (27.09, владелец: «запас блока
	      имени наверно надо оставить, проверь в целом по разделу» — и он прав
	      дважды). Я посчитал максимум по бумаге: вид (17) + 4 + бренд (18) +
	      модель в две строки (36) = 75. ЗАМЕР ПО 120 КАРТОЧКАМ РАЗДЕЛА ответил
	      иначе: **94**, потому что ВИД ИЗДЕЛИЯ БЫВАЕТ В ДВЕ СТРОКИ — «Бесшовный
	      Mesh роутер» занимает 35 px, и таких карточек 45 из 120.
	      Значит и прежние 88 были МАЛЫ: у этих сорока пяти блок растягивался
	      содержимым, и ряд рвался ровно там, где его чинили. Запас теперь
	      считается формулой из строк, а не подбирается числом, и вид ограничен
	      двумя строками — иначе третья снова вынесет блок за запас.
	   3) СНИМОК СТОЯЛ В ПОЛЯХ КАРТОЧКИ. При ширине 157 кадру доставалось 129 —
	      пятая часть ширины и треть площади уходили в поле, которое ничего не
	      говорит. На телефоне снимок и есть товар: по нему узнают прибор.
	      Кадр выносится за поля отрицательным полем, верхние углы берут радиус
	      карточки. */
	.m367-catalog-page .m367-catalog-products-col .product-item > .product-item-image-wrapper {
		margin: -16px -14px 0;
		/* `width: 100%` из стокового стиля держал кадр в ширине ЯЧЕЙКИ, и
		   отрицательное поле только сдвигало его влево, не расширяя. */
		width: auto;
		border-radius: calc(var(--m367-card-radius) - 1px) calc(var(--m367-card-radius) - 1px) 0 0;
		overflow: hidden;
	}

	.m367-catalog-page .m367-catalog-products-col .product-item > .m367-card-title-block,
	.m367-catalog-page .m367-catalog-products-col .product-item > .m367-card-chips {
		margin-bottom: 0;
	}

	.m367-catalog-page .m367-catalog-products-col .product-item > .m367-card-title-block {
		/* вид (2 строки) + его отступ + бренд (1) + модель (2) */
		min-height: 94px;
	}

	/* ПУСТАЯ ПОЛОСА МЕТОК МЕСТА НЕ ЗАНИМАЕТ. Постоянная высота 24 px заведена
	   27.09, чтобы ряд стоял ровно там, где у одного товара метки есть, а у
	   соседа нет. Но ровность ряда держат две другие вещи — одинаковый снимок
	   сверху и цена, прижатая к низу (`align-self: end`), — а пустая полоса
	   просто отнимала 24 px у КАЖДОЙ карточки без меток. Сам элемент остаётся:
	   счёт полос грида от этого не плывёт.

	   `:empty` тут не годится — внутри блока остаётся перевод строки из
	   разметки, и селектор молча не совпадает (проверено замером: «детей 0,
	   empty false»). Спрашиваем прямо: нет ни одной метки. */
	.m367-catalog-page .m367-catalog-products-col .product-item > .m367-card-chips:not(:has(.m367-card-chip)) {
		min-height: 0;
	}

	/* Вид изделия — не больше двух строк: третья вынесла бы блок имени за запас
	   и снова разорвала ряд. */
	.m367-catalog-page .m367-catalog-products-col .m367-card-type {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.m367-catalog-page .m367-catalog-products-col .product-item {
		grid-template-rows: auto auto auto 1fr;
		align-content: start;
	}

	.m367-catalog-page .m367-catalog-products-col .product-item > .product-item-info-container {
		align-self: end;
	}

	.m367-catalog-page .m367-catalog-products-col .product-item-price-current {
		font-size: 18px;
		white-space: nowrap;
	}

	/* НА МЕСТЕ ЦЕНЫ БЫВАЕТ ТЕКСТ, И ОН УВОЗИЛ СТРАНИЦУ ВБОК (27.09, нашла новая
	   мерка читаемости `m367_readability_v1.js` на первом же запуске).

	   У товара без хозяина цены вместо числа печатается «Временно недоступен».
	   Правило выше запрещает перенос — это про ЧИСЛО, «43 500,00 ₽» рвать
	   нельзя, — и текст в 202 px, не имея права перенестись, выходил из колонки
	   75 px за край экрана: страница ездила вбок на 45–53 px на каждом телефоне.

	   Лечим тремя мелочами, и все три нужны:
	   — перенос разрешён (это текст, а не сумма);
	   — кегль 12 px, иначе самое длинное слово («недоступен» — 90 px при 15 px)
	     не влезает в колонку даже одно на строке;
	   — `overflow-wrap: anywhere` как страховка: формулировку задаёт шаблон, и
	     завтра там может оказаться слово длиннее колонки.

	   СЕЛЕКТОР ЧЕТЫРЁХКЛАССОВЫЙ НАМЕРЕННО. Две прежние редакции (один класс и
	   три) не подействовали вовсе: правило цены выше — тоже три класса, и при
	   равной силе побеждает то, что стоит позже. Браузер про это спросили
	   напрямую (CSS.getMatchedStylesForNode), а не подбирали на глаз. */
	.m367-catalog-page .m367-catalog-products-col .product-item-price-current.m367-price-no-owner {
		font-size: 12px;
		white-space: normal;
		overflow-wrap: anywhere;
		line-height: 1.25;
	}

	/* Правило «у недоступного товара цена и кнопка идут в столбик» снято 27.09:
	   надпись «Временно нет» (85 px) заменена значком серой корзины 44 px
	   (владелец: «оптимально серая корзина с выходом»), и ряд «цена + кнопка»
	   теперь вмещает оба случая одинаково. */

	.m367-catalog-page .m367-catalog-products-col .product-item > .product-item-info-container:not(.product-item-price-container) {
		grid-column: 2;
		margin: 0;
	}

	/* Недоступный товар — такая же мишень 44 px, только тихая (27.09, владелец:
	   «оптимально серая корзина с выходом»). Размер задаём здесь, рядом с
	   кнопкой покупки: в `m367_page_contract.css` то же правило перебивалось
	   стоковым и давало 22 px — половину мишени. */
	.m367-catalog-page .m367-catalog-products-col .product-item-button-container .m367-item-unavailable {
		width: 44px !important;
		height: 44px !important;
		min-width: 0 !important;
		padding: 0 !important;
		/* Цвет тоже здесь: в `m367_page_contract.css` он перебивался и значок
		   выходил почти белым — то есть «нельзя купить» читалось как «можно». */
		color: var(--m367-text-disabled) !important;
		border-color: var(--m367-border-disabled) !important;
	}

	.m367-catalog-page .m367-catalog-products-col .product-item-button-container .m367-item-unavailable:hover {
		color: var(--m367-text-secondary) !important;
	}

	/* Кнопка-значок. 44 px — минимальная мишень для пальца; меньше делать нельзя,
	   сколько бы места ни хотелось сэкономить. */
	.m367-catalog-page .m367-catalog-products-col .product-item-button-container .btn-primary {
		width: 44px;
		height: 44px;
		min-width: 0;
		padding: 0;
		/* Текст остаётся в разметке — его читает экранный диктор, — но не виден:
		   `font-size: 0` прячет надпись, не убирая её из дерева доступности. */
		font-size: 0;
		/* Значок рисует ПСЕВДОЭЛЕМЕНТ, а не фон кнопки: у кнопки свой
		   `background` цветом марки, и краткая запись затирала бы картинку —
		   первая редакция дала пустой оранжевый квадрат. */
		position: relative;
	}

	.m367-catalog-page .m367-catalog-products-col .product-item-button-container .btn-primary::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: #fff;
		-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
		mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	}

	/* «Нет в наличии» словами, но в одну строку с ценой и мельче: это состояние,
	   а не действие. */
	.m367-catalog-page .m367-catalog-products-col .product-item-button-container .btn-link {
		padding: 0;
		font-size: 12px;
		line-height: 1.2;
		text-align: right;
		white-space: normal;
		max-width: 92px;
	}
}

/* ЗАГЛУШКА НА СТРАНИЦЕ ТОВАРА (26.09).
   Поле снимка там занимает половину первого экрана, поэтому и надпись крупнее,
   чем на полке. Стоковый `no_photo.png` прячем: он лежит внутри слайдера
   картинкой, а не фоном, — отсюда `img`, а не `background-image`. */
.m367-product-page .m367-detail-no-photo {
	position: relative;
	min-height: 260px;
}

.m367-product-page .m367-detail-no-photo .product-item-detail-slider-image img {
	visibility: hidden;
}

.m367-product-page .m367-catalog-placeholder--detail {
	position: absolute;
	inset: 0;
	z-index: 12;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px;
	text-align: center;
	pointer-events: none;
}

.m367-product-page .m367-catalog-placeholder--detail .m367-catalog-placeholder-brand {
	font-size: 28px;
}

.m367-product-page .m367-catalog-placeholder--detail .m367-catalog-placeholder-type {
	font-size: var(--m367-font-size-small);
}

@media (max-width: 767px) {
	.m367-product-page .m367-catalog-placeholder--detail .m367-catalog-placeholder-brand { font-size: 20px; }
}

/* РИСУНОК ПРЕДМЕТА НА СТРАНИЦЕ ТОВАРА (26.09).
   Поле снимка здесь квадратное и крупное, а подложка нарисована на фоне
   карточки — значит ей не нужно ни рамки, ни подложки, ни надписи поверх:
   бренд и модель стоят в заголовке страницы в полный рост. */
.m367-product-page .m367-catalog-placeholder--detail.m367-catalog-placeholder--art {
	padding: 0;
	gap: 0;
}

.m367-product-page .m367-catalog-placeholder--detail.m367-catalog-placeholder--art img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* ИЗБРАННОЕ: СЕРДЦЕ В УГЛУ СНИМКА (26.09, решение владельца «добавим сравнить
   и фавориты»).
   Кнопка тихая, пока не нажата: у нас уже есть громкая цена и кнопка покупки,
   и третий крикун на карточке сделал бы ровно тот ковёр, который мы сняли.
   Нажатая горит акцентом — это единственное состояние, которое надо видеть
   издалека, потому что оно говорит «я это уже отложил». */
.m367-catalog-page .m367-catalog-card { position: relative; }

.m367-catalog-page .m367-fav-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 14;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--m367-button-passive-border);
	border-radius: 50%;
	background: var(--m367-card-bg);
	color: var(--m367-text-tertiary);
	cursor: pointer;
	transition: color var(--m367-button-motion), border-color var(--m367-button-motion), background var(--m367-button-motion);
}

.m367-catalog-page .m367-fav-btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.m367-catalog-page .m367-fav-btn:hover,
.m367-catalog-page .m367-fav-btn:focus-visible {
	color: var(--m367-accent-strong);
	border-color: var(--m367-accent-strong);
}

/* Отложенное: сердце залито. Заливка + обводка одним цветом — состояние видно
   и тем, кто не различает оттенки: форма меняется, а не только краска. */
.m367-catalog-page .m367-fav-btn.is-on {
	color: var(--m367-accent-strong);
	border-color: var(--m367-accent-strong);
}

.m367-catalog-page .m367-fav-btn.is-on svg { fill: currentColor; }

.m367-catalog-page .m367-fav-btn[disabled] { opacity: .5; cursor: progress; }

@media (max-width: 767px) {
	.m367-catalog-page .m367-fav-btn { width: 32px; height: 32px; top: 6px; right: 6px; }
	.m367-catalog-page .m367-fav-btn svg { width: 16px; height: 16px; }
}

/* СРАВНЕНИЕ — ЗНАЧКОМ ПОД СЕРДЦЕМ (27.09, владелец: «в целом сравнить лучше
   наверно какой-то иконкой»).

   Галочка с подписью «Сравнить» занимала под карточкой отдельную строку и
   читалась как обрывок формы посреди витрины — особенно на телефоне, где
   строка стоила высоты целого ряда.

   ВАЖНО: разметка осталась стоковой (`label` + `input[data-entity]`), потому
   что за неё держится скрипт компонента. Мы меняем ТОЛЬКО ВИД: флажок и
   подпись прячем, `label` превращаем в такую же круглую кнопку, как избранное.
   Подпись остаётся в разметке — её читает скринридер, а `title` даёт
   всплывающую подсказку на десктопе.

   Оба значка говорят одним языком: тот же размер, тот же круг, та же граница,
   та же краска в активном состоянии.

   СТОЯТ ОНИ В ОДНУ СТРОКУ, А НЕ СТОЛБИКОМ (27.09, владелец: «переставить значок
   сравнения перед значком фаворит в верхний ряд, так как там почти везде
   пусто»). Столбиком второй значок спускался на 54 px и попадал уже на сам
   кадр — на фирменной карточке художника поверх текста слайда, — тогда как
   верхний угол у снимков почти всегда пустой. Сравнение встаёт ЛЕВЕЕ сердца:
   сердце остаётся у края, где его уже ищут глазом. */
.m367-catalog-page .product-item-compare-container {
	position: absolute;
	top: 10px;
	/* 10 (поле) + 36 (сердце) + 8 (промежуток) */
	right: 54px;
	z-index: 14;
	margin: 0;
	padding: 0;
}

.m367-catalog-page .product-item-compare,
.m367-catalog-page .product-item-compare .checkbox {
	margin: 0;
	padding: 0;
}

.m367-catalog-page .product-item-compare label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--m367-button-passive-border);
	border-radius: 50%;
	background: var(--m367-card-bg);
	color: var(--m367-text-tertiary);
	cursor: pointer;
	transition: color var(--m367-button-motion), border-color var(--m367-button-motion);
}

/* Флажок прячем от глаза, но НЕ от клавиатуры и не от скрипта: `display: none`
   выбросил бы его из фокуса, а компонент читает его состояние. */
.m367-catalog-page .product-item-compare input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.m367-catalog-page .product-item-compare [data-entity="compare-title"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.m367-catalog-page .m367-compare-ico {
	width: 18px;
	height: 18px;
	fill: currentColor;
	stroke: none;
}

.m367-catalog-page .product-item-compare label:hover,
.m367-catalog-page .product-item-compare input:focus-visible + .m367-compare-ico {
	color: var(--m367-accent-strong);
	border-color: var(--m367-accent-strong);
}

/* Отмеченное к сравнению: та же краска, что у отложенного. Состояние читается
   и цветом, и залитыми столбиками — не одним оттенком. */
.m367-catalog-page .product-item-compare label:has(input:checked) {
	color: var(--m367-accent-strong);
	border-color: var(--m367-accent-strong);
	background: var(--m367-card-bg-hover);
}

@media (max-width: 767px) {
	/* 6 (поле) + 32 (сердце) + 6 (промежуток) */
	.m367-catalog-page .product-item-compare-container { top: 6px; right: 44px; }
	.m367-catalog-page .product-item-compare label { width: 32px; height: 32px; }
	.m367-catalog-page .m367-compare-ico { width: 16px; height: 16px; }
}

/* CP19: align actions with the actual gallery frame, not the outer card padding. */
.m367-product-page .m367-gallery-frame { position: relative; min-width: 0; }
@media (min-width: 992px) {
 .m367-product-page .m367-gallery-frame--cpu .product-item-detail-slider-container:not(.popup) .product-item-detail-slider-block { max-height: min(48vh, 400px); }
}
/* CP18: image actions remain visible on touch screens; one pair per product. */
.m367-product-page .m367-detail-actions {
 position: absolute;
 inset: 12px 12px auto auto;
 z-index: 3;
 display: flex;
 flex-wrap: nowrap;
 gap: 8px;
 margin: 0;
}
.m367-product-page .m367-detail-actions > .m367-detail-action--fav { order: 2; }
.m367-product-page .m367-detail-actions > .product-item-detail-compare-container { order: 1; }
.m367-product-page .m367-detail-action > span {
 position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
 overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.m367-product-page .m367-detail-action:focus-visible,
.m367-product-page .m367-detail-action--compare:has(input:focus-visible) {
 outline: 2px solid var(--m367-accent-strong); outline-offset: 2px;
}


.m367-product-page .m367-detail-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--m367-button-passive-border);
	border-radius: var(--m367-radius-control, 10px);
	background: var(--m367-card-bg);
	color: var(--m367-foundation-text);
	font-size: var(--m367-font-size-small);
	line-height: 1.2;
	cursor: pointer;
	transition: color var(--m367-button-motion), border-color var(--m367-button-motion);
}

.m367-product-page .m367-detail-action svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.m367-product-page .m367-detail-action--fav svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.m367-product-page .m367-detail-action--compare svg {
	fill: currentColor;
	stroke: none;
}

.m367-product-page .m367-detail-action:hover,
.m367-product-page .m367-detail-action:focus-visible {
	color: var(--m367-accent-strong);
	border-color: var(--m367-accent-strong);
}

/* Отложено — сердце залито: состояние видно и тем, кто не различает оттенки,
   потому что меняется форма, а не только краска. */
.m367-product-page .m367-detail-action--fav.is-on {
	color: var(--m367-accent-strong);
	border-color: var(--m367-accent-strong);
}

.m367-product-page .m367-detail-action--fav.is-on svg { fill: currentColor; }

.m367-product-page .m367-detail-action--compare:has(input:checked) {
	color: var(--m367-accent-strong);
	border-color: var(--m367-accent-strong);
}

/* Флажок прячем от глаза, но не от клавиатуры и не от скрипта компонента. */
.m367-product-page .m367-detail-action--compare input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Стоковая обёртка сравнения на странице товара больше не занимает своей
   строки: пара живёт в одном ряду.

   И НЕ СВЕТИТСЯ: у обёртки стоковая заливка `#f3f3f3`, то есть белая плашка
   посреди тёмной витрины — ровно то, что дрес-код запрещает («светлый ТЕКСТ
   норма, светлая ПОДЛОЖКА нет», 25.09). Сама кнопка была прозрачной, красил
   именно контейнер; на снимке это выглядело как выключенная кнопка. */
.m367-product-page .m367-detail-actions .product-item-detail-compare-container,
.m367-product-page .m367-detail-actions .product-item-detail-compare,
.m367-product-page .m367-detail-actions .product-item-detail-compare .checkbox {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}



/* СТРАНИЦА ИЗБРАННОГО (26.09). Полка каталога живёт в двухколоночной раскладке
   (фильтр слева, товары справа), и её сетку задаёт обёртка каталога. Здесь
   фильтра нет, поэтому ряд задаётся своей сеткой — но КАРТОЧКА та же, шаблон
   тот же, и ничего из её оформления не переписывается. */
.m367-favorites-page { padding-block: 8px 32px; }

.m367-favorites-page .m367-favorites-count {
	margin: 0 0 18px;
	color: var(--m367-text-tertiary);
	font-size: var(--m367-font-size-caption);
}

/* ЦЕЛИМСЯ В РЯД ТОВАРОВ, А НЕ В ЛЮБОЙ `.row`. Компонент заворачивает выдачу в
   собственный `.row > .col > .catalog-section > .row.product-item-list-col-4`,
   и правило по голому `.row` сделало сеткой ВНЕШНЮЮ обёртку: колонка с товарами
   стала четвертью ширины, карточка — 64 px. На снимке это выглядело как
   «карточка не растянулась», а сломан был слой выше. */
.m367-favorites-page .row[class*="product-item-list-col-"] {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 18px;
}

.m367-favorites-page .row[class*="product-item-list-col-"] > [class*="col-"] {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
}

.m367-favorites-empty {
	max-width: 520px;
	padding: 48px 0;
}

.m367-favorites-empty__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: var(--m367-font-weight-strong);
}

.m367-favorites-empty__text {
	margin: 0 0 22px;
	color: var(--m367-text-tertiary);
	line-height: 1.55;
}

@media (max-width: 991px) {
	.m367-favorites-page .row[class*="product-item-list-col-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ПЛАШКА СПИСКА СРАВНЕНИЯ (26.09). Компонент рисует её белым блоком и ставит
   `fixed top left` — то есть поверх шапки, в самом видном месте экрана, и она
   перекрывает логотип. Это стоковый вид из светлой темы.

   Переносим вниз справа: список сравнения — это напоминание, а не главное на
   странице; там же, где у сайтов обычно висит «наверх», и он никому не мешает. */
.m367-catalog-page .catalog-compare-list.fixed {
	top: auto !important;
	right: 18px !important;
	bottom: 18px !important;
	left: auto !important;
	width: min(320px, calc(100vw - 36px));
	padding: 14px 16px;
	border: 1px solid var(--m367-button-passive-border);
	border-radius: 12px;
	background: var(--m367-card-bg);
	box-shadow: var(--m367-shadow-card-hover, 0 18px 40px rgba(0, 0, 0, .55));
	color: var(--m367-foundation-text);
	font-size: var(--m367-font-size-caption);
	z-index: 1180;
}

.m367-catalog-page .catalog-compare-list.fixed a {
	color: var(--m367-accent-strong);
	text-decoration: none;
}

.m367-catalog-page .catalog-compare-list.fixed a:hover { text-decoration: underline; }

/* Имена товаров в плашке приходят СЫРЫМИ от компонента (он читает `NAME`
   элемента, а не наш слой), поэтому ужимаем их до двух строк: «Процессор Intel
   Core Ultra 7 265 Soc-1851 2.4GHz OEM» в столбик на три строки превращает
   напоминание в простыню. */
.m367-catalog-page .catalog-compare-list.fixed li,
.m367-catalog-page .catalog-compare-list.fixed .compare-item {
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin: 0 0 8px;
	line-height: 1.35;
}

@media (max-width: 767px) {
	.m367-catalog-page .catalog-compare-list.fixed {
		right: 10px !important;
		bottom: 78px !important;   /* над нижней панелью кнопок */
		width: calc(100vw - 20px);
	}
}

/* ПУСТАЯ ВЫДАЧА (27.09). Пустое место под шапкой раздела читалось как поломка:
   человек не отличал «сломалось» от «такого товара нет». Блок говорит прямо и
   даёт выход — кнопку к полному разделу, когда есть что сбрасывать.
   Краски и отступы — только токены: своего цвета у каталога нет. */
.m367-catalog-page .m367-catalog-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 28px var(--m367-card-pad, 20px);
	background: var(--m367-card-bg);
	border: 1px solid var(--m367-card-border, rgba(255, 255, 255, .08));
	border-radius: var(--m367-card-radius, 14px);
	/* Цвет задаём и контейнеру: иначе следующая строка, добавленная сюда без
	   своего правила, унаследует стоковый `#212529` и пропадёт на тёмном фоне. */
	color: var(--m367-text-secondary, rgba(255, 255, 255, .86));
}

/* ТОКЕН ЗОВЁТСЯ `--m367-text-strong`, А НЕ `--m367-text-primary`. Имя, которого
   нет, молча отдаёт цвет наследованию: заголовок взял стоковый `#212529`
   Bootstrap и дал контраст 1.17 на тёмной карточке — то же самое, что 26.09
   случилось с заголовком «Фильтр». Проверять цвет замером, а не глазами по коду. */
.m367-catalog-page .m367-catalog-empty__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--m367-text-strong, #fff);
}

.m367-catalog-page .m367-catalog-empty__text {
	margin: 0;
	max-width: 62ch;
	color: var(--m367-text-secondary);
	line-height: 1.45;
}

/* Кнопка — тихая: это выход из тупика, а не главное действие страницы.
   Белый текст кладётся только на `--m367-accent-strong` (правило 26.09), поэтому
   здесь краска марки идёт КАЙМОЙ и текстом, а не заливкой. */
.m367-catalog-page .m367-catalog-empty__reset {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--m367-action-border-hover, var(--m367-accent));
	border-radius: 10px;
	color: var(--m367-accent);
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

.m367-catalog-page .m367-catalog-empty__reset:hover,
.m367-catalog-page .m367-catalog-empty__reset:focus-visible {
	background: var(--m367-accent-strong);
	color: #fff;
}

/* M367_SANDBOX_STORY_CONTRACT_20261005: shared dress-code, compact preview. */
.m367-sandbox-ui.m367-product-page .m367-overview-story { padding: 0; }
.m367-sandbox-ui.m367-product-page .m367-overview-story__text { --m367-story-preview-lines: 6; font-family: var(--m367-font-family-base); font-size: var(--m367-font-size-body); line-height: var(--m367-line-height-copy); color: var(--m367-text-secondary); }
.m367-sandbox-ui.m367-product-page .m367-overview-story__text p { margin-bottom: calc(var(--m367-grid-gap) / 2); }
.m367-sandbox-ui.m367-product-page .m367-overview-story__toggle { margin-top: calc(var(--m367-grid-gap) / 2); padding: var(--m367-button-pad-y) var(--m367-button-pad-x); min-height: var(--m367-button-min-h); border: var(--m367-button-border); border-color: var(--m367-button-passive-border); border-radius: var(--m367-button-radius); background: var(--m367-button-passive-bg); color: var(--m367-button-passive-text); font-family: var(--m367-font-family-base); font-size: var(--m367-button-font-size); font-weight: var(--m367-button-weight); line-height: var(--m367-button-line-height); text-decoration: none; }
.m367-sandbox-ui.m367-product-page .m367-overview-story__toggle:hover { background: var(--m367-button-passive-bg-hover); color: var(--m367-button-passive-text-hover); border-color: var(--m367-button-passive-border-hover); }


/* M367_SANDBOX_PRODUCT_FIRSTSCREEN_V5_20261005: summary above, story below. */
@media (min-width: 992px) {
 .m367-sandbox-ui.m367-product-page .m367-product-overview { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr) minmax(290px,.9fr); }
 .m367-sandbox-ui.m367-product-page .m367-product-overview > .m367-card__media { order: 1; }
 .m367-sandbox-ui.m367-product-page .m367-product-summary { order: 2; }
 .m367-sandbox-ui.m367-product-page .m367-product-overview > .m367-card__commerce-col { order: 3; }
}
.m367-sandbox-ui.m367-product-page .m367-product-overview > .m367-overview-story { order: 4; grid-column: 1 / -1; margin-top: 8px; }
.m367-sandbox-ui.m367-product-page .m367-overview-story__description { max-width: 110ch; }
.m367-sandbox-ui.m367-product-page .m367-overview-story__text { --m367-story-preview-lines: 12; }
.m367-sandbox-ui.m367-product-page .m367-product-description-title { display: none; font-size: 20px; font-weight: 700; margin: 0 0 12px; }
.m367-sandbox-ui.m367-product-page .m367-product-summary { min-width: 0; }
.m367-sandbox-ui.m367-product-page .m367-product-summary .m367-first-screen-specs__item { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: 7px 0; }
.m367-sandbox-ui.m367-product-page .m367-product-summary > a { display: inline-flex; margin-top: 12px; }
.m367-sandbox-ui.m367-product-page .m367-product-scenarios { margin-top: 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.m367-sandbox-ui.m367-product-page .m367-product-scenarios h3 { font-size: var(--m367-font-size-small); margin: 0 0 8px; }
.m367-sandbox-ui.m367-product-page .m367-product-scenarios ul { padding: 0; margin: 0; list-style: none; display: flex; gap: 6px 16px; flex-wrap: wrap; }
.m367-sandbox-ui.m367-product-page .m367-product-scenarios p { display: none; font-size: var(--m367-font-size-small); color: var(--m367-text-secondary); margin: 0; }
.m367-sandbox-ui.m367-product-page .m367-card-commerce { padding: 24px; }
.m367-sandbox-ui.m367-product-page .m367-product-overview .m367-buybox { text-align: left; margin: 12px 0 20px; }
.m367-sandbox-ui.m367-product-page .m367-product-overview .m367-buybox__title { display: block; font-size: var(--m367-font-size-body); }
.m367-sandbox-ui.m367-product-page .m367-product-overview .m367-buybox__note { display: block; margin: 4px 0 0; font-size: var(--m367-font-size-small); line-height: var(--m367-line-height-copy); color: var(--m367-text-secondary); }
.m367-sandbox-ui.m367-product-page .product-item-detail-price-current { text-align: left; font-size: 36px; line-height: 1.2; font-weight: 700; }
.m367-sandbox-ui.m367-product-page .m367-product-overview .product-item-detail-buy-button { display: flex; align-items: center; justify-content: center; width: 100%; max-width: none; min-height: 52px; font-size: 16px; }
.m367-sandbox-ui.m367-product-page .m367-product-overview [data-entity="main-button-container"] { width: 100%; margin-bottom: 0 !important; }
.m367-sandbox-ui.m367-product-page .m367-product-overview [data-entity="main-button-container"] .mb-3 { margin-bottom: 0 !important; }
.m367-sandbox-ui.m367-product-page .m367-product-summary .m367-first-screen-specs__item { grid-template-columns: minmax(0,.75fr) minmax(0,1fr); }
@media (max-width: 991.98px) { .m367-sandbox-ui.m367-product-page .m367-product-summary { order: 2; } .m367-sandbox-ui.m367-product-page .m367-card__commerce-col { order: 1; } }

/* End */
/* /local/templates/.default/css/m367_commerce_ui.css?179040334220111 */
/* /bitrix/templates/eshop_bootstrap_v4/components/bitrix/sale.basket.basket.line/bootstrap_v4/style.css?17904036557777 */
/* /bitrix/components/bitrix/menu/templates/bootstrap_v4/style.css?177848006011899 */
/* /bitrix/templates/eshop_bootstrap_v4/template_styles.css?1790404863258449 */
/* /local/templates/.default/css/m367_catalog.css?1791204182219575 */