/* M367_PAGE_CONTRACT_V1
   Shared page geometry and primitives. Family styles consume this contract;
   they do not redefine the site shell.
*/

.m367-page,
.m367-page * {
    box-sizing: border-box;
}


.m367-page {
    color: var(--m367-foundation-text);
    background: var(--m367-foundation-bg);
    font-family: var(--m367-font-family-base);
}


.m367-page-frame,
.m367-page-panel,
.m367-page-hero,
.m367-page-filter-bar,
.m367-page-card-grid,
.m367-page-final-cta {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

/* M367_PAGE_INTRO_TOKEN_CONTRACT_V1_20260903 START
   Shared renderer for the shell-owned breadcrumbs and public page title.
   Families may position the intro, but must not restyle these primitives. */
.m367-page.m367-page-intro,
.m367-page .m367-page-intro {
    width: 100%;
    margin: 0 0 var(--m367-page-intro-content-gap);
    color: var(--m367-foundation-text);
    background: var(--m367-foundation-bg);
}

.m367-page .m367-section-head {
    width: 100%;
    margin: 0;
    padding: 0;
}

.m367-page .m367-section-head__crumbs-row {
    margin: 0 0 var(--m367-page-intro-crumb-title-gap) !important;
}

.m367-page .m367-section-head__crumbs {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 !important;
}

.m367-page.m367-page-intro .bx-breadcrumb,
.m367-page .m367-page-intro .bx-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--m367-breadcrumb-gap);
    margin: 0;
    padding: 0;
    color: var(--m367-breadcrumb-current);
    background: var(--m367-breadcrumb-bg);
    border: 0;
    font-family: var(--m367-breadcrumb-font-family);
    font-size: var(--m367-breadcrumb-font-size);
    font-weight: var(--m367-breadcrumb-current-weight);
    line-height: var(--m367-breadcrumb-line-height);
}

.m367-page.m367-page-intro .bx-breadcrumb-item,
.m367-page .m367-page-intro .bx-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--m367-breadcrumb-gap);
    margin: 0;
    padding: 0;
}

.m367-page.m367-page-intro .bx-breadcrumb a,
.m367-page.m367-page-intro .bx-breadcrumb a:link,
.m367-page.m367-page-intro .bx-breadcrumb a:visited,
.m367-page .m367-page-intro .bx-breadcrumb a,
.m367-page .m367-page-intro .bx-breadcrumb a:link,
.m367-page .m367-page-intro .bx-breadcrumb a:visited {
    color: var(--m367-breadcrumb-link);
    font-weight: var(--m367-breadcrumb-link-weight);
    text-decoration: none;
}

.m367-page.m367-page-intro .bx-breadcrumb a:hover,
.m367-page.m367-page-intro .bx-breadcrumb a:focus-visible,
.m367-page .m367-page-intro .bx-breadcrumb a:hover,
.m367-page .m367-page-intro .bx-breadcrumb a:focus-visible {
    color: var(--m367-breadcrumb-link-hover);
    text-decoration: none;
}

.m367-page.m367-page-intro :where(.bx-breadcrumb-item-text, [aria-current="page"]),
.m367-page .m367-page-intro :where(.bx-breadcrumb-item-text, [aria-current="page"]) {
    color: var(--m367-breadcrumb-current);
    font-weight: var(--m367-breadcrumb-current-weight);
}

.m367-page.m367-page-intro :where(.bx-breadcrumb-item-angle, .breadcrumb-separator, i),
.m367-page .m367-page-intro :where(.bx-breadcrumb-item-angle, .breadcrumb-separator, i) {
    color: var(--m367-breadcrumb-separator);
    font-weight: var(--m367-breadcrumb-current-weight);
}

.m367-page #pagetitle.m367-section-head__title {
    margin: 0 !important;
    color: var(--m367-page-title-color) !important;
    font-family: var(--m367-font-family-base);
    font-size: var(--m367-font-size-page-title);
    font-weight: var(--m367-font-weight-display);
    line-height: var(--m367-line-height-page-title);
    letter-spacing: var(--m367-letter-spacing-page-title);
}
/* M367_PAGE_INTRO_TOKEN_CONTRACT_V1_20260903 END */


/* Canonical global search. Homepage and page families share this geometry. */
.m367-site-search {
    position: relative;
    top: auto;
    z-index: 1;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    background: transparent;
}


.m367-site-search__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    width: 100%;
    height: 46px;
    overflow: hidden;
    background: #111214;
    border: 1px solid var(--m367-foundation-border);
    border-radius: var(--m367-foundation-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}


.m367-site-search__form input {
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 22px;
    color: var(--m367-foundation-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
}


.m367-site-search__form input::placeholder {
    color: rgba(242, 234, 223, .54);
}


.m367-site-search__form button {
    height: 100%;
    margin: 0;
    padding: 0 18px;
    color: #fff;
    /* Заливка под белым текстом — тёмная ступень акцента: на марке #ff5a00
       белая надпись давала 3,13 при норме 4,5 (замер 26.09). */
    background: var(--m367-accent-strong);
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: 15px;
    font-weight: var(--m367-font-weight-strong);
    cursor: pointer;
}


.m367-site-search__form button:hover,
.m367-site-search__form button:focus-visible {
    background: var(--m367-accent-strong-hover);
}


.m367-page-panel,
.m367-page-hero,
.m367-page-final-cta {
    color: var(--m367-foundation-text);
    background: var(--m367-foundation-surface);
    border: 1px solid var(--m367-foundation-border-soft);
    border-radius: var(--m367-foundation-radius);
}


@media (max-width: 991px) {
    .m367-site-search__form {
        grid-template-columns: minmax(0, 1fr) 92px;
        height: 42px;
    }


    .m367-site-search__form input {
        padding: 0 14px;
        font-size: 14px;
    }


    .m367-site-search__form button {
        padding: 0 10px;
        font-size: 14px;
    }

}

/* M367_GENERIC_STATE_CONTRACT_V1 START
   Owner: m367_page_contract.css
   Purpose: generic active/focus/error/success states for page families.
   Scope: .m367-page only. No homepage-only selectors. No breadcrumbs package.
*/
.m367-page :where(a, button, input, select, textarea, [role="button"], .m367-action, .m367-btn, .m367-chip):focus-visible {
    outline: 0;
    box-shadow: var(--m367-input-focus-ring);
}


.m367-page :where(.is-active, .m367-is-active, [aria-current="page"], [aria-selected="true"]) {
    border-color: var(--m367-border-strong);
}


.m367-page :where(.is-error, .m367-is-error, [aria-invalid="true"]) {
    border-color: var(--m367-state-error-border);
}


.m367-page :where(.is-success, .m367-is-success, .m367-success) {
    border-color: var(--m367-state-success-border);
}

/* M367_GENERIC_STATE_CONTRACT_V1 END */

/* M367_TASKS_HERO_CONTRACT_FROM_HOME_READONLY_V0_2_20260701_START */
/* Downstream hero contract copied from readonly homepage source. Homepage files are not modified by this package. */
.m367-hero-standard {
  --m367-hero-standard-columns: minmax(0, 49fr) minmax(0, 51fr);
  --m367-hero-standard-gap: 56px;
  --m367-hero-standard-min-height: 380px;
  --m367-hero-standard-padding: 36px 0 46px;
  --m367-hero-standard-mobile-padding: 18px;
  --m367-hero-standard-media-min-height: 340px;
  --m367-hero-standard-media-radius: 10px;
  --m367-hero-standard-title-max-width: 720px;
  --m367-hero-standard-title-margin: 0 0 20px;
  --m367-hero-standard-title-size: clamp(36px, 2.65vw, 48px);
  --m367-hero-standard-title-weight: var(--m367-font-weight-display);
  --m367-hero-standard-title-line-height: 1.1;
  --m367-hero-standard-text-max-width: 700px;
  --m367-hero-standard-text-size: 16px;
  --m367-hero-standard-text-line-height: 1.6;
  --m367-hero-standard-actions-gap: 14px;
  display: grid;
  grid-template-columns: var(--m367-hero-standard-columns);
  align-items: center;
  gap: var(--m367-hero-standard-gap);
  min-height: var(--m367-hero-standard-min-height);
  padding: var(--m367-hero-standard-padding);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.m367-hero-standard::before,
.m367-hero-standard::after {
  content: none;
  display: none;
}

.m367-hero-standard__content {
  min-width: 0;
}

.m367-hero-standard__title {
  max-width: var(--m367-hero-standard-title-max-width);
  margin: var(--m367-hero-standard-title-margin);
  color: var(--m367-foundation-text);
  font-size: var(--m367-hero-standard-title-size);
  font-weight: var(--m367-hero-standard-title-weight);
  line-height: var(--m367-hero-standard-title-line-height);
  letter-spacing: 0;
}

.m367-hero-standard__title span {
  color: var(--m367-foundation-accent);
}

.m367-hero-standard__text {
  max-width: var(--m367-hero-standard-text-max-width);
  margin: 0;
  color: var(--m367-foundation-muted);
  font-size: var(--m367-hero-standard-text-size);
  line-height: var(--m367-hero-standard-text-line-height);
}

.m367-hero-standard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m367-hero-standard-actions-gap);
}

.m367-hero-standard__visual,
.m367-hero-standard__image-panel {
  min-width: 0;
  min-height: var(--m367-hero-standard-media-min-height);
  overflow: hidden;
  border-radius: var(--m367-hero-standard-media-radius);
}

.m367-hero-standard__image-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .m367-hero-standard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .m367-hero-standard {
    padding: var(--m367-hero-standard-mobile-padding);
  }
}
/* M367_TASKS_HERO_CONTRACT_FROM_HOME_READONLY_V0_2_20260701_END */

/* M367_BUTTON_CONTRACT_SITE_V0_2_1_20260802_START
   Single site-level renderer. Page families assign semantic roles and may
   control placement/width only; visual geometry and states are owned here. */
.m367-page .m367-button {
    box-sizing: border-box;
    display: inline-flex;
    min-block-size: var(--m367-button-min-h);
    align-items: center;
    justify-content: center;
    gap: var(--m367-button-gap);
    padding-inline: var(--m367-button-pad-x);
    border: var(--m367-button-border);
    border-radius: var(--m367-button-radius);
    font: inherit;
    font-size: var(--m367-button-font-size);
    font-weight: var(--m367-button-weight);
    line-height: var(--m367-button-line-height);
    text-align: center;
    text-decoration: none;
    text-decoration-line: none;
    cursor: pointer;
    outline: none;
    transition: color var(--m367-button-motion), background-color var(--m367-button-motion), border-color var(--m367-button-motion), box-shadow var(--m367-button-motion);
}

.m367-page .m367-button:hover,
.m367-page .m367-button:focus,
.m367-page .m367-button:focus-visible,
.m367-page .m367-button:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

.m367-page .m367-button:focus-visible {
    outline: var(--m367-button-focus-ring);
    outline-offset: var(--m367-button-focus-offset);
}

.m367-page .m367-button--primary,
.m367-page .m367-button--primary:link,
.m367-page .m367-button--primary:visited {
    color: var(--m367-button-active-1-text);
    -webkit-text-fill-color: var(--m367-button-active-1-text);
    background: var(--m367-button-active-1-bg);
    border-color: var(--m367-button-active-1-border);
    box-shadow: var(--m367-button-active-1-shadow);
}

.m367-page .m367-button--primary:hover,
.m367-page .m367-button--primary:focus,
.m367-page .m367-button--primary:focus-visible,
.m367-page .m367-button--primary:active {
    color: var(--m367-button-active-1-text-hover);
    -webkit-text-fill-color: var(--m367-button-active-1-text-hover);
    background: var(--m367-button-active-1-bg-hover);
    border-color: var(--m367-button-active-1-border-hover);
}

.m367-page .m367-button--active-2,
.m367-page .m367-button--active-2:link,
.m367-page .m367-button--active-2:visited {
    color: var(--m367-button-active-2-text);
    -webkit-text-fill-color: var(--m367-button-active-2-text);
    background: var(--m367-button-active-2-bg);
    border-color: var(--m367-button-active-2-border);
    box-shadow: var(--m367-button-active-2-shadow);
}

.m367-page .m367-button--active-2:hover,
.m367-page .m367-button--active-2:focus,
.m367-page .m367-button--active-2:focus-visible,
.m367-page .m367-button--active-2:active {
    color: var(--m367-button-active-2-text-hover);
    -webkit-text-fill-color: var(--m367-button-active-2-text-hover);
    background: var(--m367-button-active-2-bg-hover);
    border-color: var(--m367-button-active-2-border-hover);
    box-shadow: var(--m367-button-active-2-shadow-hover);
}

.m367-page .m367-button--secondary,
.m367-page .m367-button--secondary:link,
.m367-page .m367-button--secondary:visited,
.m367-page .m367-button--ghost,
.m367-page .m367-button--ghost:link,
.m367-page .m367-button--ghost:visited {
    color: var(--m367-button-passive-text);
    -webkit-text-fill-color: var(--m367-button-passive-text);
    background: var(--m367-button-passive-bg);
    border-color: var(--m367-button-passive-border);
    box-shadow: var(--m367-button-passive-shadow);
}

.m367-page .m367-button--secondary:hover,
.m367-page .m367-button--secondary:focus,
.m367-page .m367-button--secondary:focus-visible,
.m367-page .m367-button--secondary:active,
.m367-page .m367-button--ghost:hover,
.m367-page .m367-button--ghost:focus,
.m367-page .m367-button--ghost:focus-visible,
.m367-page .m367-button--ghost:active {
    color: var(--m367-button-passive-text-hover);
    -webkit-text-fill-color: var(--m367-button-passive-text-hover);
    background: var(--m367-button-passive-bg-hover);
    border-color: var(--m367-button-passive-border-hover);
}
/* M367_BUTTON_CONTRACT_SITE_V0_2_1_20260802_END */

/* M367_CRUMBS_BAR_V1 (18.09.2026)
   Крошки — своя полоса под шапкой, одна на весь сайт: они навигация, а не часть
   заголовка. Полоса липкая; отступ сверху публикует контракт шапки
   (--m367-sticky-breadcrumbs-top) с учётом системного слоя, мини-шапки и
   компактной шапки каталога. Стиль самих звеньев — те же токены хлебных крошек,
   что и в плашке: примитив один, меняется только его место. */

.m367-crumbs-bar {
    /* шов стопки: соседние липкие полосы стыкуются с точностью до доли пикселя,
       и в щель просвечивает прокручиваемое. Тень в 1px фоном закрывает стык,
       ничего не сдвигая (владелец 18.09: «не должны иметь под собой мусора»). */
    box-shadow: 0 -1px 0 0 var(--m367-foundation-bg);
    position: sticky;
    top: var(--m367-sticky-breadcrumbs-top, 0px);
    z-index: var(--m367-z-sticky-breadcrumbs);
    width: 100%;
    background: var(--m367-foundation-bg);
    border-bottom: var(--m367-border-width-hairline) solid var(--m367-breadcrumb-border);
}

.m367-crumbs-bar__inner {
    display: flex;
    align-items: center;
    min-height: var(--m367-control-height);
    padding-block: calc(var(--m367-grid-gap) / 3);
    overflow-x: auto;
    scrollbar-width: none;
}

.m367-crumbs-bar__inner::-webkit-scrollbar { display: none; }

.m367-crumbs-bar .bx-breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--m367-breadcrumb-gap);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--m367-breadcrumb-current);
    font-family: var(--m367-breadcrumb-font-family);
    font-size: var(--m367-breadcrumb-font-size);
    font-weight: var(--m367-breadcrumb-current-weight);
    line-height: var(--m367-breadcrumb-line-height);
    white-space: nowrap;
}

.m367-crumbs-bar .bx-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--m367-breadcrumb-gap);
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.m367-crumbs-bar .bx-breadcrumb a,
.m367-crumbs-bar .bx-breadcrumb a:link,
.m367-crumbs-bar .bx-breadcrumb a:visited {
    color: var(--m367-breadcrumb-link);
    font-weight: var(--m367-breadcrumb-link-weight);
    text-decoration: none;
}

.m367-crumbs-bar .bx-breadcrumb a:hover,
.m367-crumbs-bar .bx-breadcrumb a:focus-visible {
    color: var(--m367-breadcrumb-link-hover);
    text-decoration: none;
}

.m367-crumbs-bar :where(.bx-breadcrumb-item-text, [aria-current="page"]) {
    color: var(--m367-breadcrumb-current);
    font-weight: var(--m367-breadcrumb-current-weight);
}

.m367-crumbs-bar :where(.bx-breadcrumb-item-angle, .breadcrumb-separator, i) {
    color: var(--m367-breadcrumb-separator);
}

/* Последнее звено — это текущая страница, и у товара оно длинное. Раньше оно
   уезжало за край полосы; теперь сжимается с многоточием, а путь виден целиком. */
.m367-crumbs-bar .bx-breadcrumb-item:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.m367-crumbs-bar .bx-breadcrumb-item:last-child .bx-breadcrumb-item-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===================================================================== */
/* M367_SEARCH_PAGE_V1 (18.09, замечание владельца «страница результатов  */
/* поиска вне дрес кода»). Стоковый шаблон Битрикса заменён своим; здесь  */
/* только токены — своих цветов и размеров у страницы нет.               */
/* ===================================================================== */

.m367-search { max-width: 900px; }

.m367-search__form {
    display: flex;
    gap: 10px;
    margin: 0 0 26px;
}

.m367-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 14px;
    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-base, 16px);
    line-height: var(--m367-line-height-meta);
}

.m367-search__input::placeholder { color: var(--m367-text-secondary); opacity: .65; }
.m367-search__input:focus { outline: none; border-color: var(--m367-brand-border-strong); }
.m367-search__input:focus-visible { outline: 2px solid var(--m367-brand-orange); outline-offset: 1px; }

.m367-search__submit {
    flex: 0 0 auto;
    padding: 11px 26px;
    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);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.m367-search__submit: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-search__submit:focus { outline: none; }
.m367-search__submit:focus-visible { outline: 2px solid var(--m367-brand-orange); outline-offset: 2px; }

.m367-search__count,
.m367-search__note {
    margin: 0 0 18px;
    color: var(--m367-text-secondary);
    font-size: var(--m367-font-size-small);
}

.m367-search__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.m367-search__item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--m367-action-border-divider);
}

.m367-search__item:first-child { border-top: 0; }

/* снимок товара: находка каталога должна выглядеть товаром, а не строкой ссылок */
.m367-search__thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--m367-neutral-white, #fff);
    overflow: hidden;
}

.m367-search__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

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

.m367-search__title {
    display: inline-block;
    margin: 0 0 6px;
    color: var(--m367-foundation-text);
    font-size: var(--m367-font-size-base, 16px);
    line-height: var(--m367-line-height-heading);
    font-weight: var(--m367-font-weight-medium);
    text-decoration: none;
}

.m367-search__title:hover { color: var(--m367-brand-orange); }
.m367-search__title b { color: var(--m367-brand-orange); font-weight: var(--m367-font-weight-strong); }

.m367-search__snippet {
    margin: 0;
    color: var(--m367-text-secondary);
    font-size: var(--m367-font-size-small);
    line-height: var(--m367-line-height-meta);
    overflow-wrap: anywhere;
}

.m367-search__snippet b { color: var(--m367-foundation-text); font-weight: var(--m367-font-weight-medium); }

.m367-search__path {
    margin: 8px 0 0;
    color: var(--m367-text-secondary);
    font-size: var(--m367-font-size-small);
    opacity: .8;
}

.m367-search__pager { margin-top: 26px; }

.m367-search__pager .modern-page-navigation,
.m367-search__pager .bx-pagination { color: var(--m367-text-secondary); font-size: var(--m367-font-size-small); }

.m367-search__pager a {
    color: var(--m367-foundation-text);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
}

.m367-search__pager a:hover { background: var(--m367-surface-overlay-subtle); color: var(--m367-brand-orange); }

@media (max-width: 575.98px) {
    .m367-search__form { flex-wrap: wrap; }
    .m367-search__submit { width: 100%; }
    .m367-search__thumb { width: 56px; height: 56px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Хлебные крошки: своя разметка (21.09)

   Прежние правила писались под стоковый `.bx-breadcrumb` и остаются рядом —
   компонент стоит не только в шапке. Новые повторяют ту же типографику теми же
   токенами: полоса не должна измениться на вид, меняется только то, из чего
   она собрана.

   Стрелка рисуется знаком, а не значком шрифта: ради одной галочки стоковый
   шаблон тянул font-awesome.css отдельным файлом на каждую страницу.
   ─────────────────────────────────────────────────────────────────────────── */

.m367-crumbs-bar .m367-crumbs { min-width: 0; }

.m367-crumbs__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--m367-breadcrumb-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--m367-breadcrumb-current);
    font-family: var(--m367-breadcrumb-font-family);
    font-size: var(--m367-breadcrumb-font-size);
    font-weight: var(--m367-breadcrumb-current-weight);
    line-height: var(--m367-breadcrumb-line-height);
    white-space: nowrap;
}

.m367-crumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--m367-breadcrumb-gap);
    min-width: 0;
}

/* Разделитель — часть элемента, а не отдельный узел: так он не попадает в
   выделение текста и не читается голосовым доступом как «слэш». */
.m367-crumbs__item + .m367-crumbs__item::before {
    content: "/";
    color: var(--m367-breadcrumb-separator, var(--m367-breadcrumb-current));
    opacity: .55;
    speak: never;
}

.m367-crumbs__link,
.m367-crumbs__link:link,
.m367-crumbs__link:visited {
    color: var(--m367-breadcrumb-link);
    font-weight: var(--m367-breadcrumb-link-weight);
    text-decoration: none;
}

.m367-crumbs__link:hover,
.m367-crumbs__link:focus-visible {
    color: var(--m367-breadcrumb-link-hover, var(--m367-action-fg));
    text-decoration: underline;
}

.m367-crumbs__current {
    color: var(--m367-breadcrumb-current);
    font-weight: var(--m367-breadcrumb-current-weight);
}

/* На узком экране цепочка длиннее полосы и уезжает в прокрутку.

   Первая редакция разворачивала список `row-reverse`, чтобы текущая страница
   оказалась слева. Это сломало полосу: звенья наложились друг на друга —
   разворот меняет порядок вывода, но не порядок переноса, и правая часть
   цепочки поехала поверх левой. Видно было сразу на скриншоте телефона.

   Порядок оставляем прямым, а нужное место показываем прокруткой: полоса
   мотается к концу скриптом. Так и читается естественно, и текущая страница
   перед глазами. */
@media (max-width: 767px) {
    /* На телефоне цепочка целиком не нужна и не помещается: прокрученная, она
       показывает обрывок слова слева и читается как мусор (видно на скриншоте
       21.09). Покупателю на узком экране нужна одна вещь — вернуться на шаг
       назад, в раздел, откуда он пришёл.

       Поэтому видимой остаётся ОДНА ссылка — на родителя, со стрелкой. Прочие
       звенья прячутся визуально, но остаются в разметке: по ним поисковик
       строит цепочку в выдаче, и терять её из-за ширины экрана незачем. */
    .m367-crumbs-bar__inner { justify-content: flex-start; overflow: visible; }
    .m367-crumbs__list { flex-wrap: nowrap; }

    .m367-crumbs__item { display: none; }
    .m367-crumbs__item:nth-last-child(2) { display: inline-flex; }
    .m367-crumbs__item:nth-last-child(2)::before { content: none; }

    .m367-crumbs__item:nth-last-child(2) .m367-crumbs__link::before {
        margin-inline-end: 6px;
        content: "←";
    }

    /* Единственный видимый элемент — ссылка назад; текущая страница и так
       написана заголовком страницей ниже, повторять её незачем. */
    .m367-crumbs__item--current { display: none; }
}

/* Пустое оформление — приглашение, а не красная строка (21.09). */
.m367-split-empty {
    margin: 24px 0 40px;
    padding: 28px;
    background: var(--m367-foundation-surface, #101113);
    border: 1px solid var(--m367-action-border-divider);
    border-radius: var(--m367-foundation-radius, 8px);
}

.m367-split-empty h2 { margin: 0 0 8px; font-size: 22px; }
.m367-split-empty p { margin: 0 0 16px; color: var(--m367-color-muted-500); }
.m367-split-empty__actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }

/* Состав оформления: строки документа, как в кокпите (21.09). */
.m367-split-checkout__lines {
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--m367-action-border-divider);
    list-style: none;
}

.m367-split-checkout__lines li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 4px 10px;
    align-items: baseline;
    padding: 6px 0;
    font-size: 13px;
}

.m367-split-checkout__line-name { color: var(--m367-foundation-text); overflow-wrap: anywhere; }
.m367-split-checkout__line-qty { color: var(--m367-color-muted-500); white-space: nowrap; }
.m367-split-checkout__line-sum { font-weight: 600; white-space: nowrap; }

.m367-split-checkout__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--m367-action-border-base);
}

.m367-split-checkout__total strong { font-size: 20px; white-space: nowrap; }

/* --- Меню сайта на телефоне (21.09) -------------------------------------

   Владелец: «бутерброд в нижнем меню сделать многофункциональный, все разделы
   сайта — каталог, решения, как нас найти, юридический блок».

   На телефоне верхнего меню нет вовсе: до «Гарантии» или «Реквизитов»
   добирались через подвал, то есть пролистав всю страницу. Теперь первая
   кнопка нижней панели открывает весь сайт разом.

   Панель выезжает снизу и занимает почти весь экран: это не всплывающая
   подсказка, а отдельный экран навигации — так его и показываем. */

.m367-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 1180;
	display: flex;
	flex-direction: column;
	background: var(--m367-foundation-bg);
	overflow: hidden;
}

.m367-mobile-menu[hidden] { display: none !important; }

.m367-mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
	border-bottom: 1px solid var(--m367-card-border);
}

.m367-mobile-menu__title {
	font-size: 17px;
	font-weight: var(--m367-font-weight-strong, 600);
	color: var(--m367-foundation-text);
}

.m367-mobile-menu__close {
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--m367-foundation-text);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

.m367-mobile-menu__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 16px calc(env(safe-area-inset-bottom, 0px) + 96px);
}

.m367-mobile-menu__group { padding: 14px 0; border-bottom: 1px solid var(--m367-card-border); }
.m367-mobile-menu__group:last-child { border-bottom: 0; }

.m367-mobile-menu__group-title {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--m367-color-muted-500);
	margin-bottom: 10px;
}

/* Разделы каталога — в две колонки: их десять, и списком они заняли бы весь
   экран, оттеснив остальное меню за сгиб. */
.m367-mobile-menu__roots {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.m367-mobile-menu__root {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border: 1px solid var(--m367-card-border);
	border-radius: 12px;
	background: var(--m367-card-bg);
	color: var(--m367-foundation-text);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.25;
}

.m367-mobile-menu__root-count { font-size: 12px; color: var(--m367-color-muted-500); }

.m367-mobile-menu__all {
	display: inline-block;
	margin-top: 10px;
	color: var(--m367-accent);
	font-weight: 600;
	text-decoration: none;
	font-size: 14px;
}

/* Пункт — во всю ширину и в палец высотой: в меню попадают пальцем на ходу. */
.m367-mobile-menu__link {
	display: block;
	padding: 11px 0;
	color: var(--m367-foundation-text);
	text-decoration: none;
	font-size: 15px;
}

.m367-mobile-menu__note {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--m367-color-muted-500);
}

/* Пока меню открыто, страница под ним не ездит. */
body.m367-mobile-menu-open { overflow: hidden; }

@media (min-width: 768px) {
	.m367-mobile-menu { display: none !important; }
}

/* --- Телефон: шапка перестала занимать полэкрана (21.09) ----------------

   Было 250 px: логотип, два телефона с часами работы и четыре кнопки
   «Каталог · Все задачи · Заявка · Контакты». Первый товар начинался на
   611 px — человек открывал раздел и видел шапку, а не товар.

   Все четыре кнопки и оба телефона уже есть в нижней панели и в меню сайта,
   которое она открывает: «Каталог» → «Меню», «Контакты» → «Позвонить» и
   «Написать». Дублировать их сверху незачем — остаётся логотип, по нему
   возвращаются на главную. */

@media (max-width: 767px) {
	.m367-mobile-header__nav,
	.m367-mobile-header__contacts {
		display: none !important;
	}

	.m367-mobile-header {
		padding: 8px 0 6px !important;
	}

	.m367-mobile-header__logo,
	.m367-mobile-header__logo .m367-logo-picture {
		width: min(210px, 62vw) !important;
	}
}


/* ЮРИДИЧЕСКИЕ СТРАНИЦЫ — В ДРЕС-КОДЕ САЙТА (25.09, владелец: «проверь весь сайт
   на несоответствие дизайн дрес коду»).

   `/privacy/`, `/offer/` и `/personal-data-consent/` рисовались БЕЛЫМ ЛИСТОМ
   посреди тёмного сайта: `#f8fafc` подложка, текст `#111827`, своя красная
   марка `#d94a36` вместо нашей `#d85a1b`. Разметка страниц при этом чистая —
   врал только слой оформления подрядчика (`template_styles.css`, блок
   «mitino-legal-page»).

   Правим здесь, а не там: оформление страниц живёт в нашем контракте. У
   подрядчика каждое правило помечено `!important`, поэтому перебить его можно
   только тем же — наш файл подключается позже, и при равном весе побеждает он.
   Это тот случай, когда `!important` не лень, а единственный ход. */
.mitino-legal-page {
	background: var(--m367-foundation-bg) !important;
	color: var(--m367-foundation-text) !important;
}

.mitino-legal-page .container {
	background: var(--m367-card-bg) !important;
	border: 1px solid var(--m367-action-border-soft) !important;
	box-shadow: var(--m367-shadow-card-soft) !important;
}

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

.mitino-legal-page p,
.mitino-legal-page li,
.mitino-legal-page td,
.mitino-legal-page th {
	color: var(--m367-text-secondary) !important;
}

.mitino-legal-page strong {
	color: var(--m367-text-strong) !important;
}

.mitino-legal-page a {
	color: var(--m367-accent) !important;
}

/* Плашка и врезка держали СВОЙ красный (#d94a36) — близкий к нашему, но не наш:
   рядом с шапкой это читается как второй оттенок марки. */
.legal-badge {
	background: rgba(var(--m367-accent-rgb), .12) !important;
	color: var(--m367-accent) !important;
}

.legal-summary {
	background: var(--m367-surface-overlay-subtle) !important;
	border: 1px solid var(--m367-action-border-soft) !important;
	box-shadow: none !important;
}

/* РАЗДЕЛИТЕЛЬ КРОШЕК НЕ ГРОМЧЕ ПУТИ (26.09, решение владельца «различать весом»).

   Крошки на страницах витрины размечены просто: `<a>Главная</a><span>/</span>
   <span>Текущая</span>` — то есть разделитель это такой же `span`, и вес он
   наследует от полосы, где теперь стоит вес ТЕКУЩЕГО места (700). Служебный
   знак выходил жирнее ссылки, по которой человек возвращается.

   Правило одно на все семейства: `span`, кроме последнего, — это разделитель.
   Цвет не трогаем: у него свой токен, и он уже тише. */
.m367-about__breadcrumbs span:not(:last-child),
.m367-company-page__breadcrumbs span:not(:last-child),
.m367-contacts__breadcrumbs span:not(:last-child),
.m367-delivery__breadcrumbs span:not(:last-child),
.m367-guarantee__breadcrumbs span:not(:last-child),
.m367-news__breadcrumbs span:not(:last-child),
.m367-requisites__breadcrumbs span:not(:last-child),
.m367-services-breadcrumbs span:not(:last-child) {
    font-weight: var(--m367-font-weight-regular);
}

/* «ВРЕМЕННО НЕТ» НА ПОЛКЕ: ВИД НЕРАБОЧЕЙ КНОПКИ (26.09, решение владельца
   «на мобильной нет в наличии сделать серой не активной»).

   Замер полки на телефоне: у шести карточек из двадцати четырёх на месте
   «В корзину» стояла стоковая кнопка-ссылка с `javascript:void(0)` — обычного
   вида, нажимаемая и ничего не делающая. Теперь у неё `disabled`, а здесь вид:
   тихий текст, обычный вес, курсор запрета, никакого отклика на наведение.

   Цвет из системы (`--m367-text-tertiary`), а не буквальный «серый»: тема
   тёмная, и серый на почти чёрном фоне читался бы хуже нормы.

   ЛЕЖИТ ЗДЕСЬ, А НЕ В `m367_catalog.css`, И ЭТО НЕ ВКУСОВЩИНА: каталожный файл
   Битрикс сливает в объединённый `template_*.css`, и правка доезжает только
   после пересборки того кеша — проверено, страница держала прежнюю копию даже
   в чистом браузере. `m367_page_contract.css` подключён своей ссылкой с
   `?v=filemtime`, то есть обновляется сразу.

   `!important` по делу: кнопку красит слой подрядчика, у него правила важные. */
.m367-item-unavailable,
.m367-item-unavailable:hover,
.m367-item-unavailable:focus,
.m367-item-unavailable:active {
    color: var(--m367-text-tertiary) !important;
    background: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-weight: var(--m367-font-weight-regular) !important;
    opacity: 1;
}

/* СЕРАЯ КОРЗИНА С ВЫХОДОМ (27.09, владелец: «оптимально серая корзина с выходом
   временно недоступно / сообщить, обсуждали уже»).

   26.09 из этого сделали только половину: кнопка стала нерабочей надписью
   «Временно нет». Надпись занимала 85 px — вдвое больше значка покупки, — ломала
   ряд «цена + кнопка» на телефоне и, главное, была ТУПИКОМ: человек видел
   отказ и не знал, что делать дальше.

   Теперь это тот же значок корзины, что у доступного товара, но тихого цвета —
   «купить нельзя» читается с одного взгляда, — И ОН ВЕДЁТ НА КАРТОЧКУ, где
   стоят «Сообщить о поступлении» и «Подобрать замену» (решение 21.09). Курсор
   запрета снят: ссылка рабочая, запрещена покупка, а не переход. */
.m367-item-unavailable .m367-unavailable-ico {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.m367-item-unavailable .m367-unavailable-ico circle { fill: currentColor; stroke: none; }

.m367-item-unavailable {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

.m367-item-unavailable:hover { color: var(--m367-text-secondary) !important; }

@media (max-width: 767px) {
    /* На телефоне остаётся один значок: подпись уводит ряд за край карточки, а
       смысл «нельзя купить» несёт сам цвет. Слово не пропадает — оно в `title`
       и в дереве доступности, его читает экранный диктор. */
    .m367-catalog-page .m367-item-unavailable {
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 0;
        padding: 0;
        border: 1px solid var(--m367-button-passive-border) !important;
        border-radius: var(--m367-radius-control, 10px);
    }

    .m367-catalog-page .m367-item-unavailable .m367-unavailable-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* СТРАНИЦА СРАВНЕНИЯ (26.09). Компонент приезжает из светлой темы: зелёный
   блок «Параметры сравнения», серый текст на тёмном фоне, синие галочки.
   Страница не каталожная по признаку (адрес `/catalog/compare/` — не раздел),
   поэтому правила живут здесь, где подключается свой ссылкой с `?v=filemtime`. */
.catalog-compare-filter,
.bx_catalog_compare_block,
.bx_filter_block,
.catalog-compare-params,
[class*="compare"] .bx_filter_parameters_box {
	background: var(--m367-card-bg, #151619) !important;
	border: 1px solid var(--m367-button-passive-border, rgba(216, 90, 27, .48)) !important;
	border-radius: 12px;
	color: var(--m367-foundation-text, #fff) !important;
}

/* Таблица сравнения: значения должны читаться. Стоковый стиль красит их
   приглушённым серым по светлому фону, и на нашем тёмном они почти исчезают —
   на снимке это выглядело как «данные не приехали», хотя они на месте. */
.m367-compare-page table td,
.m367-compare-page table th,
[class*="compare"] table td,
[class*="compare"] table th {
	color: var(--m367-foundation-text, rgba(255, 255, 255, .94));
	border-color: rgba(255, 255, 255, .08);
}

[class*="compare"] table th,
[class*="compare"] table td:first-child {
	color: var(--m367-text-tertiary, rgba(255, 255, 255, .74));
}

/* ДРЕС-КОД СТРАНИЦЫ СРАВНЕНИЯ (26.09, замером, а не глазами).
   Обход страницы с чтением вычисленных цветов нашёл пять чужих мест, и все
   пять — стоковый Bootstrap, который на тёмном фоне виден как из другого сайта:

     form-check-input  rgb(13,110,253)   — СИНИЕ галочки, 8 штук
     btn-secondary     rgb(108,117,125)  — серая кнопка «Все характеристики»
     text-muted        rgb(108,117,125)  — тот же холодный серый
     table (края)      rgb(222,226,230)  — светлые линии, 13 штук
     body              bx-theme-green    — страница помечена ЗЕЛЁНОЙ темой

   Правило 25.09 сводило `--primary` у тем, но эти классы красятся СВОИМИ
   переменными Bootstrap — их и переопределяем. */
.m367-page-compare .form-check-input,
[class*="compare"] .form-check-input {
	background-color: var(--m367-card-bg, #151619);
	border-color: var(--m367-button-passive-border, rgba(216, 90, 27, .48));
	accent-color: var(--m367-accent-strong, #bf4f18);
}

.m367-page-compare .form-check-input:checked,
[class*="compare"] .form-check-input:checked {
	background-color: var(--m367-accent-strong, #bf4f18);
	border-color: var(--m367-accent-strong, #bf4f18);
}

.m367-page-compare .form-check-input:focus,
[class*="compare"] .form-check-input:focus {
	border-color: var(--m367-accent-strong, #bf4f18);
	box-shadow: 0 0 0 .2rem rgba(var(--m367-accent-strong-rgb, 191, 79, 24), .25);
}

/* Кнопка «Все характеристики» была серой (Bootstrap secondary) рядом с нашей
   оранжевой — две чужие друг другу кнопки в одной строке. Делаем парой: одна
   тихая, вторая активная, как на полке. */
[class*="compare"] .btn-secondary,
[class*="compare"] .btn-sm.btn-secondary {
	background: var(--m367-button-passive-bg, rgba(216, 90, 27, .045)) !important;
	border-color: var(--m367-button-passive-border, rgba(216, 90, 27, .48)) !important;
	color: var(--m367-button-passive-text, #fff8f1) !important;
}

[class*="compare"] .text-muted {
	color: var(--m367-text-tertiary, rgba(255, 255, 255, .74)) !important;
}

/* Светлые линии таблицы — из светлой темы. На тёмном они рисуют белую сетку. */
[class*="compare"] table,
[class*="compare"] table td,
[class*="compare"] table th,
[class*="compare"] .table > :not(caption) > * > * {
	border-color: rgba(255, 255, 255, .08) !important;
	background-color: transparent;
}

/* СНИМОК В ТАБЛИЦЕ СРАВНЕНИЯ (26.09). Квадратное поле, подложка вписывается
   целиком; там, где подложки нет, остаются те же две строки, что на полке. */
.m367-compare-figure {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 160px;
	text-decoration: none;
	background: var(--m367-card-bg, #151619);
	border-radius: 10px;
	overflow: hidden;
}

.m367-compare-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.m367-compare-figure__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px;
	text-align: center;
}

.m367-compare-figure__brand {
	color: var(--m367-text-tertiary, rgba(255, 255, 255, .74));
	font-size: 15px;
	font-weight: var(--m367-font-weight-strong, 700);
}

.m367-compare-figure__kind {
	color: var(--m367-breadcrumb-separator, rgba(255, 255, 255, .5));
	font-size: 12px;
}

[class*="compare"] .catalog-compare-item-image {
	max-width: 160px;
	height: auto;
	border-radius: 10px;
}

/* M367_ERROR_PAGE_V1 (27.09, владелец: «вернулись и исправили срочно! подвели в
   дрескод»).

   Страница 404 шла стоковой разметкой Битрикса: серая картинка `images/404.png`
   на тёмном фоне, классы `bx-404-*` и сетка Bootstrap 3 в шаблоне на Bootstrap 4.
   Признак страницы заводится в `header.php` по константе `ERROR_404`, и она
   попадает в `$fullWidthContent` — отсюда же уходит боковая врезка старого
   шаблона.

   Своих красок тут нет: только токены. Кнопки рисует общий контракт
   `.m367-button`, здесь только раскладка. */
.m367-error-page {
	max-width: 720px;
	margin: 0 auto;
	padding: 32px 16px 8px;
	text-align: center;
}

/* Число — тихий знак, а не заголовок: говорить «страница не найдена» уже
   поручено плашке заголовка, и второй громкий голос на экране лишний. */
.m367-error-page__code {
	font-size: clamp(40px, 6vw, 64px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	/* Тише заголовка намеренно: «страница не найдена» уже сказано плашкой, и
	   громких голосов на экране должно быть не больше одного. Прежние 120 px
	   серым читались пятном во весь первый экран. */
	color: var(--m367-text-disabled);
	user-select: none;
}

.m367-error-page__lead {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--m367-text-secondary);
}

.m367-error-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 24px;
}

.m367-error-page__maps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 40px;
	max-width: var(--m367-shell, 1440px);
	margin: 40px auto 0;
	padding: 24px 16px 8px;
	border-top: 1px solid var(--m367-card-border);
}

/* Одна колонка на телефоне: две карты по 195 px читаются столбиками из
   обрезанных слов. */
@media (max-width: 767px) {
	.m367-error-page__maps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

.m367-error-page__map-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--m367-text-tertiary);
}

/* Стоковые компоненты карты рисуют свои списки и заголовки. Красим их здесь, а
   не правим шаблоны компонентов: данные и разметку не трогаем, меняется только
   вид — то же решение, что у каталога 18.09. */
.m367-error-page__map ul,
.m367-error-page__map ol {
	margin: 0;
	padding-left: 18px;
	list-style: none;
}

.m367-error-page__map li { margin: 0 0 6px; }

.m367-error-page__map a,
.m367-error-page__map a:link,
.m367-error-page__map a:visited {
	color: var(--m367-text-strong);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--m367-motion-lift, 220ms ease), border-color var(--m367-motion-lift, 220ms ease);
}

.m367-error-page__map a:hover,
.m367-error-page__map a:focus-visible {
	color: var(--m367-accent-strong);
	border-bottom-color: var(--m367-accent-strong);
}

/* Счётчик товаров в скобках — справка, а не часть ссылки. */
.m367-error-page__map .catalog-section-count,
.m367-error-page__map small { color: var(--m367-text-disabled); }