.catalog-table {
  position: relative;
}

.catalog-table--hidden {
  overflow: hidden;
}

.catalog-table .catalog-table__wrapper.grid-list-border-outer {
  margin: 0 0 -1px 0;
}

.catalog-table__item {
  padding: 12px 0px 12px;
  height: 100%;
}

#table-scroller-wrapper__header {
  width: 100%;
}

.catalog-table__info-tech {
  margin-top: 8px;
}

/*button*/
.catalog-table__info-bottom {
  flex: 1;
  justify-content: space-between;
  /* align-items: center; */
}

.catalog-table__info-bottom .side-icons__item.side-icons__item--fast-view {
  display: none;
}

/*optovaya pokupka*/
.opt-buy {
  padding: 8px 0px 16px;
}

.opt-buy__item-text {
  display: inline-block;
  padding: 0 1px;
  margin-right: -3px;
}

.opt_action.no-action,
.side-icons.static .opt_action.no-action {
  opacity: 0.5;
  cursor: not-allowed;
}

.no-opt-action .form-checkbox__box {
  cursor: auto;
}

.opt-buy .form-checkbox__label {
  margin: 0px;
}

.opt_action.item-action__inner:not(.no-action) {
  --item-action-width: auto;
}

.opt_action.item-action__inner .svg {
  top: 0px;
  left: 0px;
  transform: translate(0, 0);
}

.opt_action.item-action__inner .opt-buy__item-text {
  margin-left: 23px;
  margin-bottom: 1px;

  font-size: calc(1rem - 2px);
}

.catalog-table__inner .form-checkbox {
  margin-top: 13px;
}

/*rows props*/
.properties-table-item {
  margin-top: 15px;
  max-width: 180px;
}

.properties-table-item .properties__title {
  margin-bottom: 4px;
}

.product-info-head {
  padding: 9px 0px 10px;
  margin: 0px 0px -1px;
  height: auto;
}

#table-scroller-wrapper {
  margin-bottom: 1px;
}

.footer-button .buttons {
  max-width: 100%;
}

@media (max-width: 1200px) and (min-width: 992px) {
  /* .catalog-table__info-bottom .btn .counter {
    width: 100%;
  } */
}

@media (min-width: 992px) {
  .table-props-rows .catalog-table__info-top {
    min-width: 250px;
  }

  .table-props-rows.table-props-cols {
    overflow-x: auto;
    overflow-y: hidden;
    border-top-width: 0px;
  }

  .catalog-table__item-wrapper.props {
    width: 160px;
    text-align: center;
    flex-shrink: 0;
  }

  .table-props-cols.bordered .catalog-table__item,
  .table-props-cols.bordered .product-info-headnote {
    margin-left: -1px;
    border-radius: 0px;
    border-right-width: 0px;
  }

  .table-props-rows .catalog-table__info-bottom {
    flex: 0 0 500px;
    width: 500px;
  }

  .catalog-table__inner .catalog-table__item-wrapper .properties__value {
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

@media (max-width: 991px) {
  .table-props-rows.table-props-cols {
    border: none;
  }
}

@media (min-width: 601px) {
  .table-props-rows .opt-buy__buttons {
    max-width: 208px;
  }

  .table-props-rows .btn-actions--with-icons {
    max-width: 230px;
  }

  #main .catalog-table__info-bottom.catalog-table__info-bottom--center {
    justify-content: center;
  }

  .bx-touch #main .catalog-table .side-icons-hover .side-icons__item {
    visibility: visible;
    opacity: 0;
  }

  .catalog-table__item.bordered {
    border-left: none;
    border-right: none;

    /* -webkit-clip-path: inset(0px 1px 0px 1px);
    clip-path: inset(0px 1px 0px 1px); */
  }

  .catalog-table__wrapper:last-of-type .catalog-table__item.bordered {
    border-bottom: none;
  }

  .catalog-table__item--hide-top-border.bordered {
    border-top: 0;
  }

  .catalog-table:has(.banners-slider) .catalog-table__wrapper:nth-child(2) .catalog-table__item {
    border-bottom: 0px;
  }

  .banners-slider+.catalog-table__wrapper .catalog-table__item {
    border-top: 0px;
  }

  .catalog-table-scrollable {
    overflow: hidden;
  }

  .catalog-table-scrollable .opt-buy {
    padding: 10px;
  }

  .catalog-table-scrollable .catalog-table__item {
    padding-inline: 10px;
  }
}

/* */
@media (max-width: 600px) {
  .catalog-table__outer-wrapper.bordered {
    border: none;
    border-radius: 0;
  }

  .catalog-table__item .catalog-table__info-wrapper {
    justify-content: space-between;
    flex-direction: column;
  }

  .catalog-table__item .catalog-table__info-bottom.catalog-table__info-bottom--center .js-popup-price {
    text-align: left;
  }
}

@media (max-width: 1300px) and (min-width: 992px) {
  .catalog-table__item .catalog-table__info-bottom {
    flex-direction: column;
    align-items: flex-start;
    display: block;
    max-width: 250px;
    padding-left: 10px;
  }

  .catalog-table__item .js-popup-price {
    padding: 0px 0px 10px;
  }
}

@media (max-width: 768px) {
  .catalog-table__item .catalog-table__info-bottom {
    flex-direction: column;
    align-items: normal;
    display: block;
    padding-left: 10px;
  }

  .catalog-table__item .js-popup-price {
    padding: 0px 0px 10px 0px;
  }

  .catalog-table__item .btn-actions {
    padding-top: 8px;
    max-width: none;
  }

  .catalog-table__info-bottom.catalog-table__info-bottom--center .js-popup-price {
    text-align: center;
  }
}

@media (min-width: 601px) {
  .catalog-table .grid-list--no-gap .catalog-table__wrapper {
    margin-right: 0px;
  }

  .catalog-table__item .image-list {
    width: 56px;
    flex-basis: 56px;
    flex-shrink: 0;
  }

  .catalog-table__item .image-list .sticker {
    display: none;
  }

  .catalog-table__info-top {
    flex: 1;
  }

  .catalog-table__item-wrapper {
    padding: 0px 10px;
  }
}

@media (max-width: 600px) {
  .catalog-table__outer-wrapper.bordered {
    box-shadow: none;
  }

  .grid-list.grid-list--compact.list {
    gap: var(--theme-items-gap);
  }

  .grid-list.grid-list--compact .catalog-table__item {
    padding: 16px 16px 12px;
    border: 1px solid var(--stroke_black);
    border-radius: var(--theme-outer-border-radius);
  }

  .catalog-table__item .catalog-table__info {
    padding: 0px;
  }

  .catalog-table__item .catalog-table__inner {
    flex-direction: column;
  }

  .catalog-table__item .block-with-icon,
  .catalog-table__item .info-buttons {
    display: none;
  }

  .catalog-table__item .catalog-table__info-bottom>div {
    padding: 5px 0px 0px;
  }

  .catalog-table__info-bottom .btn {
    font-size: 0.8667em;
    line-height: calc(1em + 3px);
    padding: 9px 15px 11px;
  }

  .catalog-table__info-bottom .btn .counter {
    height: 36px;
  }

  .catalog-table__item .catalog-table__info {
    margin-top: 12px;
    justify-content: space-between;
    flex-direction: column;
  }

  .catalog-table__item .catalog-table__info-text {
    font-size: 0.8em;
    -webkit-line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-line-clamp: 4;
    overflow: hidden;
  }

  .grid-list:not(.grid-list--compact) .catalog-table__info-text {
    display: none;
  }

  .catalog-table__item .catalog-table__info .catalog-table__info-bottom {
    display: flex;
    padding: 0px;
  }

  .catalog-table__item .js-btn-state-wrapper {
    flex: 1;
  }

  .catalog-table__item .btn-actions {
    padding: 0px;
  }

  .btn-actions__inner .side-icons {
    display: none;
  }

  .catalog-table__item .btn-actions--with-icons {
    flex-basis: auto;
  }
}

/*
 * ===================================================================
 * Стили для всплывающего тултипа (подсказки) у статуса
 * (Работает для catalog-block, catalog-list и catalog-table)
 * ===================================================================
 */

/* Контейнер-родитель */
.catalog-block__item .status-with-tooltip,
.catalog-list__item .status-with-tooltip,
.catalog-table__item .status-with-tooltip {
  position: relative;
  cursor: pointer;
  z-index: 11;
}

/* Стили самого тултипа */
.catalog-block__item .status-tooltip,
.catalog-list__item .status-tooltip,
.catalog-table__item .status-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  background-color: var(--grey_bg);
  color: var(--white_text_black);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 12;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  white-space: nowrap;
  /* Для десктопа всегда в одну строку */
}

/* Треугольная стрелочка внизу тултипа */
.catalog-block__item .status-tooltip::after,
.catalog-list__item .status-tooltip::after,
.catalog-table__item .status-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--grey_bg) transparent transparent transparent;
}

/* Класс для отображения тултипа */
.catalog-block__item .status-tooltip.is-visible,
.catalog-list__item .status-tooltip.is-visible,
.catalog-table__item .status-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

/*
 * ===================================================================
 * ФИНАЛЬНЫЕ СТИЛИ ДЛЯ БЛОКА ЦЕН (ШАБЛОН catalog-table)
 * ЦЕНТР ЦЕНЫ ВЫРОВНЕН ПО ЦЕНТРУ КНОПКИ
 * ===================================================================
 */

/* --- ОБЩИЕ ПРАВИЛА --- */

/* <<< КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Добавляем позиционирование и смещение вверх */
.catalog-table__item .js-popup-price {
  display: flex;
  justify-content: right;
  align-items: center;
  width: 100%;
  position: relative;
  /* Позволяет смещать элемент */
  top: -6px;
  /* Смещаем блок на 4px вверх */
}

.catalog-table__item .price__row {
  display: flex;
  justify-content: center;
}

/* Выравниваем колонки по верху */
.catalog-table__item .catalog-table__info-wrapper {
  align-items: flex-start;
}

/* Выравниваем цену и кнопку по верху между собой (это наша база) */
.catalog-table__item .catalog-table__info-bottom {
  align-items: flex-start;
}


/* --- СТИЛИ ДЛЯ ДВУХ ЦЕН --- */
.catalog-table__item .prices.prices--with-table {
  width: 224px;
}

.catalog-table__item .prices__table.flexbox--direction-column {
  display: flex;
  flex-direction: row-reverse;
  border: 1px solid var(--stroke_black);
  border-radius: 8px;
  overflow: hidden;
  gap: 0;
  width: 100%;
}

.catalog-table__item .prices__table .price {
  flex: 1;
  padding: 4px 16px;
  text-align: center;
  border: none;
  white-space: nowrap;
}

.catalog-table__item .prices__table .price:first-child {
  border-left: 1px solid var(--stroke_black);
}


/* --- СТИЛИ ДЛЯ ОДНОЙ ЦЕНЫ --- */
.catalog-table__item .prices:not(.prices--with-table) .price {
  border: 1px solid var(--stroke_black);
  border-radius: 8px;
  padding: 4px 16px;
  white-space: nowrap;
  text-align: center;
  width: 224px;
  box-sizing: border-box;
}

.catalog-table__item .price__new-val {
  font-weight: 650;
}

/*
 * ===================================================================
 * МОБИЛЬНЫЕ СТИЛИ ДЛЯ БЛОКА ЦЕН (ШАБЛОН catalog-table)
 * Экраны до 767px включительно
 * ===================================================================
 */
@media (max-width: 767px) {

  /* --- ШАГ 1: Располагаем блок цен и кнопку друг под другом --- */

  /* Делаем главный контейнер вертикальным */
  .catalog-table__item .catalog-table__info-bottom {
    flex-direction: column;
    /* Ставим элементы (цены и кнопки) в колонку */
    align-items: center;
    /* Центрируем их по горизонтали */
    gap: 12px;
    /* Добавляем отступ между блоком цен и кнопкой */
    width: 100%;
    /* Заставляем занять всю доступную ширину */
  }

  /* Сбрасываем десктопное смещение цены вверх */
  .catalog-table__item .js-popup-price {
    top: 0;
    justify-content: center;
    /* Центрируем содержимое */
  }


  /* --- ШАГ 2: Располагаем цены друг под другом --- */

  /* Делаем контейнер с ДВУМЯ ценами 100% ширины */
  .catalog-table__item .prices.prices--with-table {
    width: 100%;
    max-width: 280px;
    /* Опционально: Ограничиваем макс. ширину для эстетики */
  }

  /* Главное изменение: ставим цены в колонку */
  .catalog-table__item .prices__table.flexbox--direction-column {
    flex-direction: column-reverse;
    /* Ставим в колонку и меняем порядок, чтобы оптовая была сверху */
    border: none;
    /* Убираем общую рамку */
    gap: 8px;
    /* Добавляем отступ между ценами */
  }

  /* Задаем стиль для каждой цены отдельно */
  .catalog-table__item .prices__table .price {
    border: 1px solid var(--stroke_black);
    /* У каждой цены своя рамка */
    border-radius: 8px;
    /* И свое скругление */
  }

  /* Убираем десктопный разделитель */
  .catalog-table__item .prices__table .price:first-child {
    border-left: none;
  }


  /* --- ШАГ 3: Стилизуем ОДИНОЧНУЮ цену для единообразия --- */

  .catalog-table__item .prices:not(.prices--with-table) .price {
    width: 100%;
    max-width: 280px;
    /* Такое же ограничение, как и для двух цен */
    margin: 0 auto;
    /* Центрируем */
  }
}


/* 
 * --- ТЕПЕРЬ МОБИЛЬНАЯ ВЕРСИЯ.
 * Правила внутри #mobile-table-view НЕВОЗМОЖНО перебить глобальными стилями по классам.
*/
@media (max-width: 767px) {

  /* 1. Отключаем сетку для родителя. ГЛАВНОЕ ПРАВИЛО! */
  #mobile-table-view .grid-list {
    display: block !important;
    gap: 0 !important;
  }

  /* 2. Настраиваем каждую строку товара */
  #mobile-table-view .catalog-table__item {
    flex-direction: row !important;
    padding: 0px 10px 12px 10px !important;
    border-bottom: 1px solid var(--stroke_black) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
  }

  #mobile-table-view .catalog-table__wrapper:first-of-type .catalog-table__item {
    border-top: 1px solid var(--stroke_black) !important;
  }

  /* 3. Скрываем картинку */
  #mobile-table-view .catalog-table__item-wrapper.js-config-img {
    display: none !important;
  }

  /* 4. Настраиваем внутреннюю структуру 70/30 */
  #mobile-table-view .catalog-table__info-wrapper {
    flex-direction: row !important;
    align-items: flex-start;
  }

  /* Левая колонка (70%) */
  #mobile-table-view .catalog-table__info-top {
    flex: 0 1 70%;
    min-width: 0;
    padding-right: 10px;
  }

  /* Правая колонка (30%) */
  #mobile-table-view .catalog-table__info-bottom {
    flex: 0 1 30%;
    min-width: 0;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px;
  }

  #mobile-table-view .catalog-table__info-title a {
    -webkit-line-clamp: 3;
    /* Ограничиваем 3 строками */
    line-clamp: 3;
    /* Стандартное свойство для совместимости */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }

  /* Цена и кнопка */
  #mobile-table-view .js-popup-price {
    width: 100%;
    justify-content: center;
    padding: 0 !important;
    top: 0;
  }

  #mobile-table-view .prices__table.flexbox--direction-column {
    width: auto;
    /* убираем фикс ширину для мобильных */
  }

  #mobile-table-view .js-btn-state-wrapper {
    width: 100%;
  }
}



/*
 * ===================================================================
 * ФИНАЛЬНЫЕ УНИВЕРСАЛЬНЫЕ СТИЛИ ДЛЯ ТУЛТИПА (НОВЫЙ ДИЗАЙН v2)
 * ===================================================================
 */

/* 1. Блок с оптовой ценой (.price) становится базой для позиционирования иконки */
.amigo-tooltip-host {
  position: relative !important;
  cursor: pointer;
}

/* 2. Иконка (?) - оранжевый круг, белый знак вопроса */
.amigo-tooltip-trigger {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #6bc0ec;
  /* <<< Рамка оранжевая */
  background-color: #6bc0ec;
  /* <<< ИЗМЕНЕНО: Фон круга оранжевый */
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  /* <<< ИЗМЕНЕНО: Знак вопроса белый */
  cursor: pointer;
  z-index: 5;
}

/* --- Остальные стили для .amigo-tooltip-content остаются БЕЗ ИЗМЕНЕНИЙ --- */

.amigo-tooltip-content.is-calculating {
  visibility: hidden;
  display: block !important;
}

.amigo-tooltip-content {
  position: absolute;
  padding: 12px 16px;
  background-color: var(--grey_bg);
  /* Темный фон */
  color: var(--white_text_black);
  border: 1px solid #e5e5e5;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.4;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s;
}

.amigo-tooltip-content.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.amigo-tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.amigo-tooltip-content a {
  color: #6bc0ec;
}



@media (max-width: 767px) {

  /* 
     * 1. Находим родительский элемент блока со статусом.
     * Селектор :has() выбирает .line-block__item, ВНУТРИ которого есть .status-container.
    */
  .catalog-table__item .js-popup-info>.line-block__item:has(.status-container),
  .catalog-table__item .js-popup-info>.line-block__item:has(.status-with-tooltip) {

    /* 2. Растягиваем его на всю ширину, чтобы он гарантированно перенесся на новую строку. */
    flex-basis: 100%;

    /* 3. С помощью 'order' визуально отправляем его в самый конец. */
    /* Это заставит артикул и другие элементы "подняться" вверх в потоке. */
    order: 99;
  }
}

/*
 * ===================================================================
 * МОБИЛЬНЫЕ СТИЛИ ДЛЯ ЦЕН В catalog.table (БЕЗ ЗАГОЛОВКОВ + ТУЛТИП)
 * ===================================================================
 */
@media (max-width: 767px) {

  /* 1. Скрываем заголовки "Оптовая" и "Розничная" */
  .catalog-table__item .price__title {
    display: none !important;
  }

  /* 2. Добавляем курсор-указатель для блока с розничной ценой, чтобы показать, что он кликабельный */
  /* Класс .js-retail-tooltip-trigger будет добавлен скриптом */
  .catalog-table__item .js-retail-tooltip-trigger {
    cursor: pointer;
  }
}

/*
 * ===================================================================
 * ПЕРЕНОС СТАТУСА НАЛИЧИЯ В НАЧАЛО (CATALOG_TABLE, ДЕСКТОП)
 * ===================================================================
 */

/* Применяем стили только для экранов шире 767px (планшеты и десктопы) */
@media (min-width: 768px) {

  /* 
     * ГЛАВНОЕ ПРАВИЛО:
     * Находим родительский элемент блока со статусом (у него есть класс .status-with-tooltip)
     * и с помощью свойства 'order' ставим его на первое место.
     * По умолчанию у всех элементов order: 0. Значение -1 поставит его левее всех.
    */
  .catalog-table__item .js-popup-info>.line-block__item.status-with-tooltip,
  .catalog-table__item .js-popup-info>.line-block__item:has(.status-container) {
    order: -1;
  }
}


/*
 * ===================================================================
 * ФИНАЛЬНЫЕ СТИЛИ ДЛЯ БЛОКА ЦЕН (ШАБЛОН catalog-table)
 * (Вертикальное центрирование)
 * ===================================================================
 */

/* Применяем стили только для десктопов, чтобы не сломать мобильную верстку */
@media (min-width: 768px) {

  /* 1. Выравниваем левую и правую колонки по центру друг друга */
  .catalog-table__item .catalog-table__info-wrapper {
    align-items: center !important;
    /* Было flex-start */
  }

  /* 2. Выравниваем содержимое правой колонки (цена и кнопка) по центру */
  .catalog-table__item .catalog-table__info-bottom {
    align-items: center !important;
    /* Было flex-start */
    justify-content: flex-end;
    /* Распределяем место между ценой и кнопкой */
    gap: 15px;
  }

  /* 3. Убираем искусственное смещение у блока цен */
  .catalog-table__item .js-popup-price {
    position: static;
    /* Отменяем position: relative */
    top: 0;
    /* Сбрасываем смещение */
    width: auto;
    /* Ширина по контенту */
    justify-content: center;

  }

  .catalog-table__item .price__row {
    display: flex;
    justify-content: center;
  }

  /* --- Стили для двух цен (остаются почти без изменений) --- */
  .catalog-table__item .prices.prices--with-table {
    width: 224px;
  }

  .catalog-table__item .prices__table.flexbox--direction-column {
    display: flex;
    flex-direction: row-reverse;
    border: 1px solid var(--stroke_black);
    border-radius: 8px;
    overflow: hidden;
    gap: 0;
    width: 100%;
  }

  .catalog-table__item .prices__table .price {
    flex: 1;
    padding: 4px 16px;
    text-align: center;
    border: none;
    white-space: nowrap;
  }

  .catalog-table__item .prices__table .price:first-child {
    border-left: 1px solid var(--stroke_black);
  }

  /* --- Стили для одной цены (остаются почти без изменений) --- */
  .catalog-table__item .prices:not(.prices--with-table) .price {
    border: 1px solid var(--stroke_black);
    border-radius: 8px;
    padding: 4px 16px;
    white-space: nowrap;
    text-align: center;
    width: 224px;
    box-sizing: border-box;
  }

  .catalog-table__item .price__new-val {
    font-weight: 650;
  }


}

@media (max-width: 767px) {
  .amigo-tooltip-trigger {
    top: 7px;
    right: 4px;
  }
}






/*
 * ===================================================================
 * ЦЕНТРИРОВАНИЕ ТЕКСТА ВНУТРИ МОБИЛЬНОГО ТУЛТИПА
 * ===================================================================
 */
@media (max-width: 767px) {

  /*
     * Превращаем тултип в flex-контейнер, чтобы
     * легко отцентрировать текст по вертикали и горизонтали.
    */
  #amigo-tooltip-global,
  #retail-tooltip-global {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
  }

  /* 
     * Переворачиваем и перемещаем стрелочку на правую сторону,
     * чтобы она указывала на блок с ценой.
    */
  #amigo-tooltip-global::after,
  #retail-tooltip-global::after {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 0;
    border-color: transparent transparent transparent #fff;
    /* Указывает вправо */
  }


}


/*
 * ===================================================================
 * ВЕРТИКАЛЬНОЕ ЦЕНТРИРОВАНИЕ ЧЕКБОКСА И КАРТИНКИ В catalog_table (ДЕСКТОП)
 * ===================================================================
 */

/* Применяем стили только для экранов шире 767px (планшеты и десктопы) */
@media (min-width: 768px) {

  /*
     * ГЛАВНОЕ ПРАВИЛО:
     * Находим главный контейнер строки (.catalog-table__inner)
     * и приказываем ему выровнять все дочерние элементы (чекбокс, картинку, инфо-блок)
     * по центральной оси.
    */
  .catalog-table__item .catalog-table__inner {
    align-items: center;
  }

  .catalog-table__item .form-checkbox {
    position: relative;
    /* Включаем возможность смещения */
    top: -7px;
    /* Сдвигаем на 2 пикселя вверх. Можете изменить это значение. */
  }
}

.status-delivery-wrapper .js-replace-status {
  color: #fe620d !important;
}

/* 2. Находим контейнер иконки */
.status-delivery-wrapper .status__svg-icon {
  position: relative;
  /* База для позиционирования */
}

/* 3. СКРЫВАЕМ ОРИГИНАЛЬНУЮ ЗЕЛЕНУЮ ИКОНКУ */
.status-delivery-wrapper .status__svg-icon svg {
  visibility: hidden;
}

/* 
 * 4. ВСТАВЛЯЕМ НОВУЮ ОРАНЖЕВУЮ ИКОНКУ КАК ФОН ПСЕВДО-ЭЛЕМЕНТА.
 * Убедитесь, что путь к вашему файлу custom_status_icons.svg верный!
*/
.status-delivery-wrapper .status__svg-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/images/custom_status_icons.svg');
  background-repeat: no-repeat;
  background-position: center center;

}


/* Применяем только для десктопа, чтобы не ломать мобилку */
@media (min-width: 768px) {

  /* 1. Находим обертку кнопки внутри нижнего блока */
  .catalog-table__item .catalog-table__info-bottom .js-btn-state-wrapper {
    /* 
           Задаем фиксированную минимальную ширину, равную ширине вашей кнопки.
           По скриншоту это примерно 160px - 180px. 
           Подберите значение так, чтобы цены выровнялись идеально.
        */
    min-width: 170px;

    /* Гарантируем, что блок останется в потоке */
    box-sizing: border-box;
  }

  /* 2. Если скрипт скрыл кнопку (добавил класс hidden или подобный), 
          мы принудительно показываем блок, но делаем его прозрачным */
  .catalog-table__item .catalog-table__info-bottom .js-btn-state-wrapper.hidden,
  .catalog-table__item .catalog-table__info-bottom .js-btn-state-wrapper[style*="display: none"] {
    display: block !important;
    /* Возвращаем в поток */
    visibility: hidden !important;
    /* Делаем невидимым глазу */
    opacity: 0 !important;
    pointer-events: none;
    /* Чтобы нельзя было случайно нажать */
  }
}

/*
 * ===================================================================
 * FIX: Устранение наложения цен на название (1300px - 1500px)
 * ===================================================================
 */
@media (min-width: 1299px) and (max-width: 1500px) {

  /* Добавляем буферную зону справа от названия товара */
  .catalog-table__item .catalog-table__info-top {
    flex: 1 1 auto;
    min-width: 0;
    /* Критично для корректного переноса текста в Flexbox */
    padding-right: 20px;
    /* Гарантированный отступ от блока цен */
    box-sizing: border-box;
  }

  /* Фиксируем блок с ценами и кнопкой, чтобы он не "плыл" влево */
  .catalog-table__item .catalog-table__info-bottom {
    flex: 0 0 auto;
    /* Запрещаем сжатие блока */
    flex-shrink: 0;
    width: auto;
    z-index: 2;
    /* На всякий случай поднимаем слоем выше */
  }
}

/* 
 * ===================================================================
 * FIX: Выравнивание кнопок и иконок в одну линию (760px - 1300px)
 * Версия на основе вашего HTML
 * ===================================================================
 */

@media (min-width: 760px) and (max-width: 1300px) {

  /* 1. Главный контейнер (Правая часть карточки) */
  .catalog-table__item .catalog-table__info-bottom {
    display: flex !important;
    flex-direction: column !important;
    /* Сначала цена, под ней кнопки */
    align-items: flex-start !important;
    /* Всё прижато к левому краю */
    gap: 10px;
    /* Отступ между ценой и кнопками */
    width: auto !important;
    padding-left: 0 !important;
  }

  /* 2. Блок цены: выравниваем контент влево */
  .catalog-table__item .js-popup-price {
    width: 100%;
    max-width: 260px;
    /* Ограничиваем ширину для красоты */
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Сдвигаем саму таблицу цен влево */
  .catalog-table__item .prices.prices--with-table {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* 3. Обертка ВСЕХ кнопок (Корзина + Иконки) */
  /* Селектор находит div сразу после блока цены */
  .catalog-table__item .catalog-table__info-bottom>.flex-auto {
    display: flex !important;
    flex-direction: row !important;
    /* Строго в строку */
    align-items: center !important;
    /* Центрируем по вертикали */
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 260px;
    /* Ширина должна совпадать с блоком цен */
    margin-top: 0 !important;
  }

  /* 4. Контейнер кнопки "В корзину" */
  .catalog-table__item .js-btn-state-wrapper {
    flex: 1 1 auto !important;
    /* Занимает всё свободное место */
    width: auto !important;
    min-width: 0 !important;
    margin-right: 8px !important;
    /* Отступ до иконок */
  }

  /* Сама кнопка "В корзину" на всю ширину своего контейнера */
  .catalog-table__item .js-btn-state-wrapper .btn {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 5. Контейнер иконок (класс .hide-600 в вашем HTML) */
  .catalog-table__item .hide-600 {
    display: block !important;
    /* Убеждаемся, что он виден */
    flex: 0 0 auto !important;
    /* Не сжимается */
  }

  /* Внутренняя обертка иконок */
  .catalog-table__item .js-replace-icons {
    display: flex !important;
    flex-direction: row !important;
    /* Принудительно в строку (у вас было row-reverse) */
    gap: 8px !important;
  }

  /* Стили для самих иконок (чтобы стояли ровно) */
  .catalog-table__item .item-action {
    margin: 0 !important;
  }

  /* Убираем лишние отступы у кнопок внутри иконок */
  .catalog-table__item .item-action__inner {
    margin: 0 !important;
  }

  .catalog-table__item .catalog-table__info-bottom .js-btn-state-wrapper {

    min-width: 110px !important;
  }

  .line-block--gap-20 {
    gap: 25px !important;
  }
}

/* 1. Общие стили для кнопки (работает и в обычном, и в инкогнито) */
.catalog-table__wrapper .item-action--subscribe .btn {
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-size: 13px;
  letter-spacing: -0.3px;
  min-width: 170px;
}

@media (min-width: 760px) and (max-width: 1300px) {

  /* 2. Уменьшаем расстояние (gap) — привязываемся к родителю подписки */
  .catalog-table__wrapper .line-block--gap-20:has(.item-action--subscribe) {
    gap: 3px !important;
  }

  /* 3. Узкая кнопка под блок цен */
  .catalog-table__wrapper .item-action--subscribe .btn {
    width: 165px !important;
    min-width: 165px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 11px !important; 
    letter-spacing: -0.5px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 760px) { 
  .catalog-table__wrapper .item-action--subscribe .btn {
    width: 135px !important;
    min-width: 135px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 11px !important; 
    letter-spacing: -0.5px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
}