/*
 * ===================================================================
 * ФИНАЛЬНЫЕ УНИВЕРСАЛЬНЫЕ СТИЛИ ДЛЯ БЛОКА ЦЕН (1 и 2 цены)
 * ===================================================================
 */

/* --- ОБЩИЕ ПРАВИЛА, РАБОТАЮЩИЕ ВЕЗДЕ --- */

/* 1. Центрируем родительский контейнер. */
.catalog-block__item .js-popup-price {
    display: flex;
    justify-content: center;
}

/* 2. Центрируем саму строку с ценой (цифры). */
.catalog-block__item .price__row {
    display: flex;
    justify-content: center;
}


/* --- СТИЛИ ДЛЯ СЛУЧАЯ, КОГДА ЦЕНЫ ДВЕ --- */

/* 3. Задаем ширину контейнеру двух цен. */
.catalog-block__item .prices.prices--with-table {
    width: 340px;
    /* Измените, если нужно шире */
}

/* 4. Создаем общую рамку и задаем порядок. */
.catalog-block__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%;
}

/* 5. Делаем ячейки равной ширины. */
.catalog-block__item .prices__table .price {
    flex: 1;
    padding: 8px 16px;
    text-align: center;
    border: none;
    white-space: nowrap;
}

/* 6. Рисуем разделитель. */
.catalog-block__item .prices__table .price:first-child {
    border-left: 1px solid var(--stroke_black);
}


/* --- НОВЫЕ СТИЛИ ДЛЯ СЛУЧАЯ, КОГДА ЦЕНА ТОЛЬКО ОДНА --- */

/* 7. Стилизуем одиночную цену, чтобы она была похожа на ячейку с двумя ценами. */
/* :not(.prices--with-table) - этот селектор сработает, ТОЛЬКО если у .prices нет класса .prices--with-table */
.catalog-block__item .prices:not(.prices--with-table) .price {
    border: 1px solid var(--stroke_black);
    border-radius: 8px;
    padding: 8px 16px;
    white-space: nowrap;
    text-align: center;
    min-width: 160px;
    /* Задаем минимальную ширину, чтобы выглядело аккуратно */
}

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

/* 8. ИСКУССТВЕННО ДОБАВЛЯЕМ ПОДПИСЬ "Розничная" ДЛЯ ОДИНОЧНОЙ ЦЕНЫ */
/* Мы используем псевдо-элемент ::before, чтобы вставить текст перед ценой */
@media (min-width: 768px) {

    /* 
     * ===================================================================
     * ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ №2: Выравниваем текст ВНУТРИ статуса
     * ===================================================================
    */

    /* --- Остальные правила для десктопа --- */

    /* Принудительно убираем левый отступ у статуса */
    .mobile-tech-bottom-row .line-block__item {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Исправляем центрирование родительского блока */
    .catalog-block__info-tech {
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }

    .mobile-tech-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .mobile-tech-top-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .mobile-tech-bottom-row {
        margin-top: 4px;
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }
}


/* === СТИЛИ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ (экраны до 767px включительно) === */
@media (max-width: 767px) {

    /* Главный контейнер для мобильных */
    .mobile-tech-wrapper {
        display: flex;
        flex-direction: column;
        /* Располагаем дочерние блоки друг под другом */
        align-items: flex-start;
        /* Выравниваем все по левому краю */
    }

    /* Верхняя строка: рейтинг, отзывы, артикул */
    .mobile-tech-top-row {
        display: flex;
        align-items: center;
        /* Центрируем элементы по вертикали */
        flex-wrap: wrap;
        /* Позволяем элементам переноситься, если не влезают */
        gap: 12px;
        /* Расстояние между элементами в строке */
        width: 100%;
        margin-bottom: 4px;
        /* Небольшой отступ до статуса */
    }

    /* Нижняя строка: статус */
    .mobile-tech-bottom-row {
        width: 100%;
        /* Занимает всю ширину, чтобы быть на новой строке */
    }
}

.status-with-tooltip {
    position: relative;
    cursor: pointer;
    /* Показываем пользователю, что сюда можно нажать */
}

/* Стили самого тултипа */
.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: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    /* Прячем его по умолчанию */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

/* Треугольная стрелочка внизу тултипа */
.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;
}

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

/*
 * ===================================================================
 * ФИНАЛЬНОЕ РЕШЕНИЕ: Правильное выравнивание кнопок И контента
 * ===================================================================
*/

/* 
 * 1. Заставляем главный информационный блок (`.info`) растягиваться,
 *    чтобы он занял всё свободное пространство под картинкой.
 *    ЭТО ВЫРАВНИВАЕТ КНОПКИ ПО НИЖНЕЙ ЛИНИИ.
*/
.catalog-block__item .catalog-block__info {
    display: flex;
    flex-direction: column;
    /* Его дети (текст и кнопка) будут в столбик */
    flex-grow: 1;
}

/* 
 * 2. Контейнер для текста (`.info-top`) тоже должен быть flex-колонкой
 *    и растягиваться, чтобы заполнить все место до кнопок.
*/
.catalog-block__item .catalog-block__info-top {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/*
 * 3. Внутренний контейнер (`.info-inner`), в котором лежит и название,
 *    и артикул, ТАКЖЕ делаем flex-колонкой и растягиваем.
*/
.catalog-block__item .catalog-block__info-inner {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* 
 * 4. ГЛАВНОЕ ПРАВИЛО: Теперь, когда все контейнеры растянуты,
 *    мы "отрываем" блок с артикулом/статусом (`.info-tech`) и
 *    "прижимаем" его к самому низу текстовой области.
 *    ЭТО УБИРАЕТ БОЛЬШОЙ ОТСТУП.
*/
.catalog-block__item .catalog-block__info-tech {
    margin-top: auto;
}

/*
 * 5. Добавляем гарантированный и одинаковый для всех карточек
 *    отступ между названием и блоком с артикулом/статусом.
*/
.catalog-block__item .catalog-block__info-title {
    margin-bottom: 16px;
}

/*
 * ===================================================================
 * ФИНАЛЬНОЕ РЕШЕНИЕ: Прямое управление родителем тултипа
 * ===================================================================
*/

/* --- Стили для ДЕСКТОПНОЙ версии (экраны шире 768px) --- */
@media (min-width: 768px) {

    /* 
     * ГЛАВНОЕ ПРАВИЛО: Приказываем родителю выстроить детей в СТРОКУ.
     * Это отменит любое `flex-direction: column` из шаблона.
    */
    .status-tooltip {
        display: flex !important;
        flex-direction: row !important;
        /* Выстроить в строку */
        white-space: nowrap !important;
        /* Запретить перенос текста */
    }


}


/* --- Стили для МОБИЛЬНОЙ версии (экраны до 767px) --- */
@media (max-width: 767px) {

    /* На мобилке, наоборот, приказываем родителю стать КОЛОНКОЙ */
    .status-tooltip {
        display: flex !important;
        flex-direction: column !important;
        /* Выстроить в столбик */
        align-items: center !important;
        /* Центрируем строки */
        white-space: normal !important;
        /* Разрешаем перенос, если нужно */
        min-width: 180px;
    }

    /* Убираем пробел */
    .status-tooltip .tooltip-line-2::before {
        content: "";
    }

    /* Добавляем отступ для второй строки */
    .status-tooltip .tooltip-line-2 {
        margin-top: 4px;
        text-align: center;
    }
}

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

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

/* 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: var(--grey_bg) transparent transparent transparent;
}

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


/*
 * ===================================================================
 * НОВЫЕ СТИЛИ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ CATALOG_BLOCK
 * (Цены в строку, без заголовков + тултипы)
 * ===================================================================
 */
@media (max-width: 767px) {

    /* --- ДЕЛАЕМ БЛОК ЦЕН ГОРИЗОНТАЛЬНЫМ --- */

    /* Задаем ширину, чтобы блок занимал все место */
    .catalog-block__item .prices.prices--with-table {
        width: 100%;
    }

    /* Главное правило: заставляем блок с ценами быть строкой */
    .catalog-block__item .prices__table.flexbox--direction-column {
        flex-direction: row-reverse !important;
        /* Розничная слева, Оптовая справа */
    }

    /* --- СКРЫВАЕМ ЗАГОЛОВКИ И ДОБАВЛЯЕМ КУРСОР --- */

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

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

    #retail-tooltip-global {
        min-width: 150px;
        /* Задаем минимальную ширину. Можете изменить это значение (например, на 180px), если нужно еще шире */
    }
}

@media (max-width: 767px) {
    .amigo-tooltip-trigger {

        top: 11px;
        right: 4px;
    }
}


.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;
   
}




/* 1. Гарантируем, что основной контейнер ведет себя как колонка */
.catalog-block__item .catalog-block__info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 2. Заставляем блок с артикулом/статусом прижиматься к низу доступного места */
.catalog-block__item .catalog-block__info-tech {
    margin-top: auto;
    /* Убираем лишние отступы снизу, так как отступ теперь будет давать блок кнопки */
    margin-bottom: 0; 
}

/* 3. ГЛАВНОЕ ИСПРАВЛЕНИЕ: Резервируем место под кнопку */
.catalog-block__item .catalog-block__info-bottom {
    /* 
       Здесь нужно подобрать число, равное высоте твоей кнопки вместе с отступами.
       Судя по btn-sm, это примерно 42px - 50px. 
       Попробуй 46px, если будет мало/много - поменяй.
    */
    min-height: 46px; 
    
    /* Дополнительно: центрируем контент (кнопку), если она есть */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Или center, в зависимости от дизайна */
}

/*
 * ===================================================================
 * ФИКС ДЛЯ МОБИЛЬНЫХ: 2 КАРТОЧКИ В РЯД
 * ===================================================================
 */
@media (max-width: 600px) {
    /* 1. Заставляем слайды занимать ровно половину экрана минус отступ */
    .catalog-block .swiper-wrapper .catalog-block__wrapper.swiper-slide {
        /* 6px — это половина стандартного отступа (grid-gap) между карточками */
        width: calc(50% - 6px) !important; 
        margin-right: 12px !important;
    }

    /* 2. Отменяем ваше ограничение min-width: 160px для одиночной цены, 
          иначе карточка не сможет сжаться до нужных 150-170px */
    .catalog-block__item .prices:not(.prices--with-table) .price {
        min-width: 100% !important; 
        padding: 8px 4px !important; /* Уменьшаем боковые отступы */
    }
    
    /* 3. Сильно уменьшаем паддинги для двух цен (опт/розница), 
          чтобы они поместились в узкой карточке рядом друг с другом */
    .catalog-block__item .prices__table .price {
        padding: 8px 2px !important;
    }

    /* 4. Немного уменьшаем шрифт цены, чтобы длинные суммы (например 15 000 ₽) 
          не разрывали блок */
    .catalog-block__item .price__new-val {
        font-size: 13px !important;
    }

    /* 5. Корректируем позицию вашей оранжевой иконки (вопросика), 
          чтобы она не наезжала на цифры в узком блоке */
    .catalog-block__item .amigo-tooltip-trigger {
        width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
        /* Центрируем ровно по вертикали */
        top: 50% !important;
        transform: translateY(-50%);
        right: 2px !important;
    }
    
    /* 6. Чуть уменьшаем отступы внутри самой карточки, чтобы сэкономить место */
    .catalog-block__item .catalog-block__inner {
        padding: 12px 10px !important;
    }
}

/* ===================================================================
   ИДЕАЛЬНАЯ СЕТКА: ЖЕСТКАЯ ФИКСАЦИЯ ВЫСОТЫ (КАТАЛОГ + ДЕТАЛЬНАЯ)
   =================================================================== */

/* 1. Отключаем "резиновость" Аспро. Блоки будут просто стоять друг под другом */
.catalog-block__item .catalog-block__info,
.catalog-block__item .catalog-block__info-top,
.catalog-block__item .catalog-block__info-inner {
    display: block !important;
    height: auto !important;
    flex: none !important;
    padding-bottom: 0 !important;
}

/* 2. Блок цен: жестко фиксируем высоту */
.catalog-block__item .js-popup-price {
    height: 42px !important;
    min-height: 42px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
}

/* 3. НАЗВАНИЕ ТОВАРА: Секрет идеального выравнивания!
      Резервируем место РОВНО под 4 строки текста. 
      Даже если текста на 2 строки, статус ниже никуда не поднимется. */
.catalog-block__item .catalog-block__info-title {
    height: 57px !important;          /* 3 строки по 19px */
    min-height: 57px !important;
    max-height: 57px !important;
    margin-bottom: 12px !important;   /* Отступ до артикула */
    
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Ограничение в 3 строки */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 19px !important; 
    white-space: normal !important;
}

/* 4. Блок тех. информации (Артикул + Статус): 
      Высота ровно на 2 строки, без центрирования */
.catalog-block__item .catalog-block__info-tech {
    display: block !important;
    height: 44px !important;      
    min-height: 44px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}

/* Убираем отступы внутри артикула */
.catalog-block__item .catalog-block__info-tech .line-block {
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* 5. КНОПКА: Прилипает сразу под статус */
.catalog-block__item .catalog-block__info-bottom {
    margin-top: 8px !important;   /* Минимальный зазор над кнопкой */
    height: 40px !important;
    min-height: 40px !important;
    display: block !important;
}

/* ===================================================================
   ФИКС ДЛЯ МОБИЛЬНЫХ: ЗАПРЕТ ПЕРЕНОСА АРТИКУЛА НА НОВУЮ СТРОКУ
   =================================================================== */

@media (max-width: 600px) {
    /* 1. Находим строку, где лежат звезды, отзывы и артикул */
    .catalog-block__item .mobile-tech-top-row {
        display: flex !important;
        flex-wrap: nowrap !important; /* СТРОГО ЗАПРЕЩАЕМ ПЕРЕНОС НА НОВУЮ СТРОКУ */
        align-items: center !important;
        gap: 6px !important; /* Уменьшаем отступы между звездами и артикулом (было 12px) */
        width: 100% !important;
        overflow: hidden !important;
    }

    /* 2. Немного уменьшаем шрифт, чтобы влезло больше текста */
    .catalog-block__item .mobile-tech-top-row .line-block__item {
        font-size: 11px !important;
        white-space: nowrap !important; /* Запрещаем перенос внутри самих блоков */
    }

    /* 3. Если артикул очень длинный, он обрежется многоточием, а не сломает верстку */
    .catalog-block__item .mobile-tech-top-row .line-block__item.secondary-color {
        flex-shrink: 1 !important; /* Разрешаем блоку с артикулом сжиматься */
        min-width: 0 !important;   /* Важный хак для работы обрезки во флексе */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 4. Запрещаем статусу ("Нет в наличии") переноситься на две строки */
    .catalog-block__item .mobile-tech-bottom-row .status-container {
        white-space: nowrap !important;
        font-size: 11px !important;
    }
}

/* Стиль тултипа под стандарт Аспро */
#aspro-title-tooltip {
    position: fixed;
    z-index: 10000;
    /* Используем переменные темы: фон карточки или всплывающего окна */
    background: var(--card_bg_hover, #fff); 
    color: var(--white_text_black); /* Ваша переменная для текста */
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    max-width: 320px;
    /* Тень в зависимости от темы (прозрачная в темной, заметная в светлой) */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    /* Граница, которая видна в темной теме */
    border: 1px solid var(--stroke_black, #ececec);
    pointer-events: none;
    display: none;
    word-wrap: break-word;
    font-weight: 400;
}

/* Небольшая коррекция для плавности */
.catalog-block__item .catalog-block__info-title {
    cursor: pointer;
}

.catalog-block__offers .sku-props{
    background-color: var(--card_bg_black) !important; 
}