@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/*
  ME605 / хлебные крошки
  CSS CLASS NAME блока: uc-bcmbs

  Что делает код:
  1) применяет наш шрифт Google Sans / Manrope;
  2) подгоняет ширину блока под сетку сайта 1320px;
  3) убирает лишние стандартные ограничения Tilda;
  4) аккуратно оформляет ссылки хлебных крошек.
*/

.uc-bcmbs,
.uc-bcmbs * {
  box-sizing: border-box;
  font-family: "Google Sans", "Manrope", Arial, sans-serif !important;
}

.uc-bcmbs {
  --vn-black: #111111;
  --vn-text: #3b342d;
  --vn-muted: #8a7b6a;

  --vn-orange: #f28a00;
  --vn-orange-hover: #ff970d;
  --vn-orange-active: #d97900;

  --vn-border: rgba(90, 72, 48, 0.10);

  width: 100%;
  background: transparent;
  color: var(--vn-text);
}

/* 
  Основная ширина под нашу сетку.
  1320px — как в шапке, футере и основных блоках сайта.
*/
.uc-bcmbs .t-container {
  width: min(1320px, calc(100% - 32px)) !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Убираем стандартные ограничения колонок Tilda внутри ME605 */
.uc-bcmbs .t-col,
.uc-bcmbs [class*="t-col_"] {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Общая типографика внутри блока */
.uc-bcmbs,
.uc-bcmbs div,
.uc-bcmbs span,
.uc-bcmbs a,
.uc-bcmbs li {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Ссылки хлебных крошек */
.uc-bcmbs a,
.uc-bcmbs a:link,
.uc-bcmbs a:visited {
  color: var(--vn-muted) !important;
  text-decoration: none !important;
  transition: color 0.18s ease, transform 0.12s ease;
}

.uc-bcmbs a:hover {
  color: var(--vn-orange) !important;
}

.uc-bcmbs a:active {
  color: var(--vn-orange-active) !important;
  transform: translateY(1px);
}

/* Текущий пункт / последний пункт */
.uc-bcmbs span,
.uc-bcmbs li:last-child,
.uc-bcmbs [class*="current"] {
  color: var(--vn-text) !important;
}

/* Разделители, если они есть в блоке */
.uc-bcmbs .t-breadcrumbs__separator,
.uc-bcmbs [class*="separator"],
.uc-bcmbs [class*="divider"] {
  color: var(--vn-muted) !important;
  opacity: 0.55;
}

/* Фокус для доступности */
.uc-bcmbs a:focus-visible {
  outline: 2px solid var(--vn-orange);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Планшеты */
@media (max-width: 1180px) {
  .uc-bcmbs .t-container {
    width: min(1120px, calc(100% - 24px)) !important;
  }
}

/* Мобильная версия */
@media (max-width: 760px) {
  .uc-bcmbs .t-container {
    width: calc(100% - 36px) !important;
  }

  .uc-bcmbs,
  .uc-bcmbs div,
  .uc-bcmbs span,
  .uc-bcmbs a,
  .uc-bcmbs li {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* Маленькие телефоны */
@media (max-width: 420px) {
  .uc-bcmbs .t-container {
    width: calc(100% - 28px) !important;
  }

  .uc-bcmbs,
  .uc-bcmbs div,
  .uc-bcmbs span,
  .uc-bcmbs a,
  .uc-bcmbs li {
    font-size: 12px !important;
  }
}



@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/*
  Минимальная стилизация форм обратной связи BF502N
  CSS CLASS блоков: uc-form и uc-optform

  Что меняет код:
  1) шрифты;
  2) цвет заголовка и описания;
  3) зелёную линию под заголовком;
  4) внешний вид полей;
  5) кнопку отправки;
  6) чекбокс согласия, ошибки и сообщение об успешной отправке.

  Что НЕ меняет код:
  - ширину формы;
  - сетку блока;
  - отступы секции;
  - расположение полей;
  - количество колонок;
  - настройки самой формы в Тильде.
*/

.uc-form,
.uc-optform,
.uc-form *,
.uc-optform * {
  box-sizing: border-box;
  font-family: "Google Sans", "Manrope", Arial, sans-serif !important;
}

.uc-form,
.uc-optform {
  --vn-black: #111111;
  --vn-text: #3b342d;
  --vn-muted: #8a7b6a;

  --vn-orange: #f28a00;
  --vn-orange-hover: #ff970d;
  --vn-orange-active: #d97900;

  --vn-green: #0f7f3f;

  --vn-field-bg: #f5f2ed;
  --vn-field-bg-focus: #ffffff;

  color: var(--vn-text);
}

/* Заголовок формы */
.uc-form .t-title,
.uc-form .t-name,
.uc-form .t-heading,
.uc-optform .t-title,
.uc-optform .t-name,
.uc-optform .t-heading {
  color: var(--vn-text) !important;

  /* Здесь можно менять размер и жирность заголовка */
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
}

/* Зелёное подчёркивание под заголовком */
.uc-form .t-title::after,
.uc-form .t-name::after,
.uc-form .t-heading::after,
.uc-optform .t-title::after,
.uc-optform .t-name::after,
.uc-optform .t-heading::after {
  content: "";
  display: block;

  /* Размер линии под заголовком */
  width: 50px;
  height: 4px;

  /* Отступ линии от заголовка */
  margin-top: 14px;

  border-radius: 99px;
  background: var(--vn-green);
}

/* Описание под заголовком */
.uc-form .t-descr,
.uc-optform .t-descr {
  color: var(--vn-muted) !important;

  /* Размер описания */
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

/* Подписи над полями */
.uc-form .t-input-title,
.uc-optform .t-input-title {
  color: var(--vn-black) !important;

  /* Размер подписей */
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

/* Подсказки под полями */
.uc-form .t-input-subtitle,
.uc-optform .t-input-subtitle {
  color: var(--vn-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

/* Поля ввода, select и textarea */
.uc-form .t-input,
.uc-form .t-select,
.uc-form textarea.t-input,
.uc-optform .t-input,
.uc-optform .t-select,
.uc-optform textarea.t-input {
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background-color: var(--vn-field-bg) !important;
  color: var(--vn-text) !important;
  box-shadow: none !important;

  /* Размер текста внутри полей */
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

/* Placeholder */
.uc-form .t-input::placeholder,
.uc-form textarea.t-input::placeholder,
.uc-optform .t-input::placeholder,
.uc-optform textarea.t-input::placeholder {
  color: var(--vn-muted) !important;
  opacity: 0.9 !important;
}

/* Фокус полей */
.uc-form .t-input:focus,
.uc-form .t-select:focus,
.uc-form textarea.t-input:focus,
.uc-optform .t-input:focus,
.uc-optform .t-select:focus,
.uc-optform textarea.t-input:focus {
  outline: none !important;
  background-color: var(--vn-field-bg-focus) !important;
  border-color: rgba(15, 127, 63, 0.36) !important;
  box-shadow: 0 0 0 4px rgba(15, 127, 63, 0.08) !important;
}

/* Поле телефона с маской */
.uc-form .t-input-phonemask__wrap,
.uc-optform .t-input-phonemask__wrap {
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: var(--vn-field-bg) !important;
  overflow: hidden !important;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

.uc-form .t-input-phonemask__wrap:focus-within,
.uc-optform .t-input-phonemask__wrap:focus-within {
  background: var(--vn-field-bg-focus) !important;
  border-color: rgba(15, 127, 63, 0.36) !important;
  box-shadow: 0 0 0 4px rgba(15, 127, 63, 0.08) !important;
}

.uc-form .t-input-phonemask__wrap .t-input,
.uc-optform .t-input-phonemask__wrap .t-input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.uc-form .t-input-phonemask__select,
.uc-optform .t-input-phonemask__select {
  border: 0 !important;
  background: transparent !important;
}

/* Кнопка отправки */
.uc-form .t-submit,
.uc-form button.t-submit,
.uc-optform .t-submit,
.uc-optform button.t-submit {
  border: 0 !important;
  border-radius: 15px !important;
  background: var(--vn-orange) !important;
  color: #ffffff !important;

  /* Размер и жирность текста кнопки */
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;

  box-shadow: 0 12px 28px rgba(242, 138, 0, 0.24) !important;
  cursor: pointer !important;

  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease !important;
}

.uc-form .t-submit:hover,
.uc-form button.t-submit:hover,
.uc-optform .t-submit:hover,
.uc-optform button.t-submit:hover {
  background: var(--vn-orange-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(242, 138, 0, 0.30) !important;
}

.uc-form .t-submit:active,
.uc-form button.t-submit:active,
.uc-optform .t-submit:active,
.uc-optform button.t-submit:active {
  background: var(--vn-orange-active) !important;
  transform: translateY(1px);
  box-shadow: 0 7px 18px rgba(242, 138, 0, 0.22) !important;
}

/* Чекбокс согласия и radio */
.uc-form .t-checkbox__control,
.uc-form .t-radio__control,
.uc-optform .t-checkbox__control,
.uc-optform .t-radio__control {
  color: var(--vn-muted) !important;

  /* Размер текста согласия */
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

.uc-form .t-checkbox__control a,
.uc-form .t-radio__control a,
.uc-optform .t-checkbox__control a,
.uc-optform .t-radio__control a {
  color: var(--vn-orange-active) !important;
  text-decoration: none !important;
}

.uc-form .t-checkbox__control a:hover,
.uc-form .t-radio__control a:hover,
.uc-optform .t-checkbox__control a:hover,
.uc-optform .t-radio__control a:hover {
  color: var(--vn-orange) !important;
}

.uc-form .t-checkbox__indicator,
.uc-optform .t-checkbox__indicator {
  border-radius: 6px !important;
  border-color: rgba(90, 72, 48, 0.82) !important;
}

/* Ошибки под полями */
.uc-form .t-input-error,
.uc-optform .t-input-error {
  color: #d33131 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}

/* Общий блок ошибки */
.uc-form .t-form__errorbox-wrapper,
.uc-form .t-form__errorbox-bottom,
.uc-optform .t-form__errorbox-wrapper,
.uc-optform .t-form__errorbox-bottom {
  border-radius: 14px !important;
  background: rgba(211, 49, 49, 0.08) !important;
  color: #d33131 !important;
}

/* Успешная отправка */
.uc-form .t-form__successbox,
.uc-optform .t-form__successbox {
  border-radius: 16px !important;
  background: rgba(15, 127, 63, 0.09) !important;
  border: 1px solid rgba(15, 127, 63, 0.18) !important;
  color: var(--vn-green) !important;

  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

/* Фокус для ссылок и кнопок */
.uc-form a:focus-visible,
.uc-form button:focus-visible,
.uc-optform a:focus-visible,
.uc-optform button:focus-visible {
  outline: 2px solid var(--vn-orange) !important;
  outline-offset: 4px !important;
  border-radius: 12px !important;
}




@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/*
  Общий CSS для каталога товаров ST340B / Tilda Store

  CSS CLASS NAME блока: uc-pogonaztovar

  Что делает код:
  1) применяет шрифт Manrope / Google Sans ко всем каталогам с классом uc-pogonaztovar;
  2) на десктопе расширяет контейнер каталога до 1320px под нашу сетку;
  3) не меняет визуальный стиль карточек, фильтров, кнопок и других элементов.
*/

.uc-pogonaztovar,
.uc-pogonaztovar * {
  font-family: "Google Sans", "Manrope", Arial, sans-serif !important;
  box-sizing: border-box;
}

/* Десктопная ширина блока под общую сетку сайта */
@media (min-width: 981px) {
  .uc-pogonaztovar .t-container,
  .uc-pogonaztovar .t-store__filter,
  .uc-pogonaztovar .t-store__grid-cont,
  .uc-pogonaztovar .t-store__parts-switch-wrapper,
  .uc-pogonaztovar .js-store-grid-cont {
    width: min(1320px, calc(100% - 32px)) !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
</style>