/* Ширина каталога */
@media screen and (min-width: 960px) and (max-width: 1360px) {
  #rec3205836901 .t-catalog__card {
    width: calc((100% - 2 * var(--t-catalog-col-gap, 20px)) / 3) !important;
    max-width: calc((100% - 2 * var(--t-catalog-col-gap, 20px)) / 3) !important;
    flex-basis: auto !important;
  }
}


/* Цвет и форма отметки на карточке */
.t-catalog__card__mark {
    border-radius: 8px;
    font-size: 10px;
    height: 30px;
}




/* Кнопка на всю ширину контейнера карточки */
.t-catalog__card__btns-wrapper {
  width: 100%;
}

.t-catalog__card__btns-wrapper .t-catalog__card__btn {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  margin-right: 0 !important;
}


/* Кнопка "Весь каталог" — оба состояния, всегда красная */
#allrecords .t-catalog__parts-switch-btn-all,
#allrecords .t-catalog__parts-back-btn {
  background-color: #F74A00 !important;
  opacity: 1 !important;
}

/* Отключаем "выцветание" в активном/заблокированном состоянии */
#allrecords .t-catalog__parts-switch-btn-all.t-catalog__parts-current,
#allrecords .t-catalog__parts-switch-btn-all.t-catalog__parts-disabled,
#allrecords .t-catalog__parts-back-btn.t-catalog__parts-current,
#allrecords .t-catalog__parts-back-btn.t-catalog__parts-disabled {
  background-color: #F74A00 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* На случай, если эффект сделан наложением через ::before / ::after */
#allrecords .t-catalog__parts-switch-btn-all::before,
#allrecords .t-catalog__parts-switch-btn-all::after,
#allrecords .t-catalog__parts-back-btn::before,
#allrecords .t-catalog__parts-back-btn::after {
  background: none !important;
  opacity: 0 !important;
}

/* И на hover тоже держим цвет */
#allrecords .t-catalog__parts-switch-btn-all:hover,
#allrecords .t-catalog__parts-back-btn:hover {
  background-color: #F74A00 !important;
  opacity: 1 !important;
}




/* Фиксация разделов каталога вверху на мобильном */
@media screen and (max-width: 1200px) {
.t-catalog-parts-above__container {
    position: -webkit-sticky;
    position: sticky;
    top: 64px;              /* хедер 60px + отступ 15px, подгоните под себя */
    z-index: 100;           /* чтобы карточки товаров не наезжали сверху */
    background: #f7f7f7;    /* иначе товары будут просвечивать под разделами */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;  /* было 40px из стилей Тильды */
  }
}




/* Карточка товара на отдельной странице */
@media screen and (min-width: 1360px) {

  /* Общий контейнер карточки товара */
  .js-product .t-container {
    width: 1360px;
    max-width: 1360px;
  }

  /* Текстовая часть карточки товара — ширина 620px */
  .t-container .t-catalog__prod-popup__info {
    width: 640px;
    max-width: 620px;
    height: 500px;
  }

  /* Табы (Описание / Характеристики) — ширина контента 1320px */
  .js-product .js-catalog-tabs {
    max-width: 1320px;   /* перебиваем родной .t-col_12 max-width:1160px */
  }

}


/* Кнопка на всю ширину контейнера карточки */
 .t-catalog__card__btns-wrapper {
  width: 100%;
}

 .t-catalog__card__btns-wrapper .t-catalog__card__btn {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  margin-right: 0 !important;
}

/* Отступы у сетки каталога — до 1200px */
@media screen and (max-width: 1200px) {
    .t-catalog__grid-cont {
        padding: 0 10px;
    }
}

/* ========================================================= */
/* Карточка товара — скругление счётчика количества          */
/* Блоку «−  1  +» (кол-во товара) задаём скругление 4px.    */
/* overflow прячет прямые уголки внутренних кнопок, чтобы    */
/* они не торчали из-под скруглённой рамки.                  */
/* ========================================================= */
.t-catalog__prod__quantity {
    border-radius: 4px;   /* скругление всех углов на 4px */
    overflow: hidden;     /* обрезаем содержимое по скруглению */
}





/* ========================================================= */
/* Блок «Смотрите также» — ширина контента                  */
/* На экранах 1360px и выше расширяем контейнер до 1320px.   */
/* Ниже 1360px — как задаёт Tilda по умолчанию.             */
/* ========================================================= */
@media (min-width: 1360px) {
    .t-catalog__relevants__container .t-container {
        max-width: 1360px;   /* ширина контентной области 1320px */
    }
}

/* ========================================================= */
/* Блок «Смотрите также» — пропорции картинки 4:3            */
/* Коробку картинки приводим к соотношению 4:3. Tilda задаёт */
/* высоту сама, поэтому снимаем её и ставим aspect-ratio.    */
/* Работает на всех разрешениях.                             */
/* ========================================================= */
.t-catalog__relevants__container .t-catalog__card__imgwrapper {
    height: auto !important;        /* убираем высоту, навязанную Tilda */
    padding-bottom: 0 !important;   /* и её приём с padding для пропорции */
    aspect-ratio: 4 / 3 !important; /* задаём соотношение сторон 4:3 */
}

/* ========================================================= */
/* Блок «Смотрите также» — фон и скругление карточки         */
/* Белый фон всей карточки и скругление углов 4px.           */
/* На всех разрешениях.                                      */
/* ========================================================= */
.t-catalog__relevants__container .t-item {
    background-color: #ffffff;   /* белый фон карточки */
    border-radius: 4px;          /* скругление всех четырёх углов на 4px */
    overflow: hidden;            /* чтобы углы картинки тоже обрезались по скруглению */
}

/* ========================================================= */
/* Блок «Смотрите также» — отступы текстового блока          */
/* Поля только у текста под картинкой: слева, справа, снизу. */
/* Сверху отступа нет — текст идёт сразу под картинкой.      */
/* На всех разрешениях.                                      */
/* ========================================================= */
.t-catalog__relevants__container .t-catalog__card__wrap_txt-and-btns {
    padding-left: 20px;     /* поле слева */
    padding-right: 20px;    /* поле справа */
    padding-bottom: 20px;   /* поле снизу */
    padding-top: 0;         /* сверху без отступа (текст вплотную к картинке) */
}



/* ========================================================= */
/* Блок «Смотрите также» — убираем стрелки слайдера           */
/* Прячем левую и правую стрелки навигации на всех экранах.   */
/* ========================================================= */
.t-catalog__relevants__container .t-slds__arrow_wrapper {
    display: none !important;   /* обе стрелки (влево и вправо) скрыты */
}


/* ========================================================= */
/* Блок «Смотрите также» — высота кнопки на мобильных        */
/* На экранах до 640px кнопку сплющивает. Снимаем навязанную */
/* высоту и задаём нормальную через вертикальные отступы.    */
/* ========================================================= */
@media (max-width: 640px) {
    .t-catalog__relevants__container .t-catalog__card__btn {
        height: auto !important;         /* убираем навязанную высоту */
        padding-top: 14px !important;    /* высоту задаём отступами  */
        padding-bottom: 14px !important; /* — снизу столько же       */
        line-height: 1.2 !important;     /* чтобы текст не сжимался   */
    }
}


/* ========================================================= */
/* Блок «Смотрите также» — зазор между карточками в слайдере */
/* Даём слайду padding-right: 10px внутри его ширины (300px).*/
/* box-sizing удерживает padding внутри — карточка сама      */
/* становится 290px, слайд остаётся 300px, свайп не плывёт.  */
/* Карточку не двигаем, поэтому overflow:hidden слайда её    */
/* угол не режет. Класс t-slds__item есть у ВСЕХ слайдов,    */
/* включая первый. Только до 960px (там слайдер).            */
/* ========================================================= */
@media (max-width: 960px) {
    .t-catalog__relevants__container .t-slds__item {
        box-sizing: border-box !important;  /* padding внутри 300px, слайд не шире */
        padding-right: 10px !important;      /* зазор справа = 10px между карточками */
    }
}



/* ========================================================= */
/* Блок «Смотрите также» — убрать зазор между карточками     */
/* на десктопе (1200px и выше). Перебиваем глобальный        */
/* .t-col { margin-right: 20px } только внутри блока          */
/* рекомендаций — основной каталог не затрагивается.         */
/* ========================================================= */
@media (min-width: 1200px) {
    .t-catalog__relevants__container .t-catalog__card-list .t-item {
        margin-right: 0 !important;   /* убираем зазор — карточки вплотную */
    }
}



/* ========================================================= */
/* Блок «Смотрите также» — размер заголовка карточки         */
/* В рекомендациях заголовок менее приоритетный, чем в       */
/* основной карточке товара, поэтому уменьшаем до 14px.      */
/* На всех разрешениях. !important — чтобы перебить правило  */
/* Tilda с ID-селектором (#recXX\ .t-catalog__card__title). */
/* ========================================================= */
.t-catalog__relevants__container .t-catalog__card__title {
    font-size: 14px !important;   /* размер заголовка в рекомендациях */
}





/* ============================================================
   Смена порядка характеристик и описания в карточке товара
   ------------------------------------------------------------
   Поднимает характеристики (.js-catalog-prod-all-charcs) над
   описанием через order. Итог: цена → кнопка →
   ХАРАКТЕРИСТИКИ → описание.
   Отступ между блоками задаём через gap на родителе, а не
   margin'ом на самом блоке — тогда зазор всегда сидит МЕЖДУ
   ними и не зависит от порядка. Инлайновый margin-top:20px,
   который Tilda вешает на характеристики, гасим (иначе он
   даст лишнюю дырку сверху). Инлайн бьётся только !important.
   ============================================================ */

/* родитель — flex-колонка + фиксированный зазор между блоками */
.js-catalog-prod-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* поднимаем характеристики над описанием и гасим их инлайн-отступ */
.js-catalog-prod-all-charcs {
  order: -1;
  margin-top: 0 !important;
}
}