/* ==========================================================================
   Карточка товара в каталоге — переработка внешнего вида.
   Подключается последним, все правила ограничены .catalog__list-content,
   поэтому слайдеры на главной, корзина и «просмотренные» не затрагиваются.
   Откат: убрать SetAdditionalCSS в header.php и удалить этот файл.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Карточка целиком: обычный поток вместо абсолютного позиционирования.
   Причина пустоты в середине — правило
   @media (min-width:1025px){ .product_item_buy_box{position:absolute;bottom:0} }
   Цена с кнопкой были вырваны из потока и прибиты к низу.
   -------------------------------------------------------------------------- */
/* Ниже 768px сайт показывает другую карточку (.new_card_wrapper), а старую прячет
   через .new_card_old_hide{display:none}. Поэтому всё, что затрагивает общих предков,
   включается только с 768px — мобильная вёрстка не трогается. */
@media (min-width: 768px) {
    .catalog__list-content .product-item-container {
        display: flex;
        margin-bottom: 20px;
    }

    .catalog__list-content .new_card_old_hide {
        display: flex;
        width: 100%;
    }
}

.catalog__list-content .product_item.product-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: 12px 12px 12px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(39, 39, 39, .07);
    transition: box-shadow .25s ease, transform .25s ease;
}

.catalog__list-content .product_item.product-item:hover {
    box-shadow: 0 10px 26px rgba(39, 39, 39, .14);
    transform: translateY(-2px);
}

@media (min-width: 1025px) {
    .catalog__list-content .product_item.product-item .product_item_buy_box {
        position: static;
        left: auto;
        bottom: auto;
        margin-top: auto; /* цена и кнопка внизу карточки, но без «дырки» */
        width: 100%;
    }
}

/* блок цены и кнопки лежит ВНУТРИ .product_item_name_box, поэтому
   колонкой делаем именно его — тогда цена с кнопкой прижимаются к низу
   карточки при любой длине названия */
.catalog__list-content .product_item.product-item .product_item_name_box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* у сайта здесь justify-content:space-between — из-за него короткое
       название «провисало» к середине карточки и названия соседних карточек
       начинались на разной высоте. Прижимаем название под фото, а цену с
       кнопкой вниз отдельным margin-top:auto (ниже). */
    justify-content: flex-start;
}

.catalog__list-content .product_item_name_box .rating_item,
.catalog__list-content .product_item_name_box .product_item_title {
    flex: 0 0 auto;
}

.catalog__list-content .product_item_name_box .product_item_buy_box {
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   2. Фото: квадрат во всю ширину карточки вместо фиксированных 180/220px
   -------------------------------------------------------------------------- */
.catalog__list-content .product_item_img {
    position: relative;
    margin-bottom: 10px;
    /* у сайта здесь flex:1 1 auto — блок с фото забирал часть свободного места
       карточки, поэтому у товара с коротким названием под фото появлялась
       пустота и название начиналось ниже, чем у соседа. Фото должно занимать
       ровно свой квадрат, всё свободное место уходит в .product_item_name_box. */
    flex: 0 0 auto;
}

/* у обёртки картинки был margin-bottom:25px — лишний воздух под фото */
.catalog__list-content .product_item_img > .product-item-image-wrapper {
    margin-bottom: 0 !important;
}

.catalog__list-content .product_item_img > .product-item-image-wrapper {
    display: block;
    position: relative;
    width: 100%;
    height: auto !important;
    padding-top: 100% !important;
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
}

/* contain, а не cover: на упаковках сухого корма сверху есть текст,
   при обрезке по краям он срезался. Картинка вписывается целиком. */
.catalog__list-content .product_item_img > .product-item-image-wrapper > span {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.catalog__list-content .product_item_img .product_item_img-bg {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

/* --------------------------------------------------------------------------
   3. Рейтинг: компактной строкой слева, а не прижатым к правому краю
   -------------------------------------------------------------------------- */
.catalog__list-content .product_item_name_box .rating_item {
    justify-content: flex-start;
    margin: 0 0 4px;
}

.catalog__list-content .product_item_name_box .rating_item .count_rating {
    font-size: 13px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Название: контрастнее, две строки с обрезкой — карточки одной высоты
   -------------------------------------------------------------------------- */
/* Название показывается полностью. Разная длина карточку не ломает:
   ряд выравнивается по самой высокой карточке, а цена с кнопкой
   прижаты к низу через margin-top:auto выше. min-height держит
   резерв под две строки, чтобы короткие названия не прыгали. */
.catalog__list-content .product_item_title .name {
    display: block;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: none;
    min-height: 2.5em;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--main_font_color);
    word-break: break-word;
}

/* Подзаголовок (свойства товара из LIST_PROPERTY_CODE) во всём каталоге пустой,
   но внутри неразрывный пробел — поэтому :empty не срабатывает и он занимал 21px
   в каждой карточке. Скрыт. Если понадобится выводить там бренд —
   удалить это правило и вернуть оформление. */
.catalog__list-content .product_item_subtitle {
    display: none;
}

/* --------------------------------------------------------------------------
   5. Цена: крупная, старая цена рядом в одну строку
   -------------------------------------------------------------------------- */
.catalog__list-content .product_item__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 8px 0 10px;
}

.catalog__list-content .product_item__price .price {
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--main_font_color);
    white-space: nowrap;   /* чтобы «от» не отрывалось от суммы в узкой колонке */
}

.catalog__list-content .product_item__price .old_price {
    margin: 0;
    font-size: 15px;
    line-height: 1.1;
    color: #9a9a9a;
    text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   6. Кнопка и счётчик.
   В styles.css у .product-item-button-container стоят width:50% и
   margin-right:35px, а у .product_item__cart — justify-content:center.
   Вместе это делает строку шире карточки, и кнопку выносит за левый край.
   Ниже эти размеры снимаются, ширину распределяет flex.
   -------------------------------------------------------------------------- */
/* Блок цены помечен классом .col-12, а его родитель — флекс-колонка.
   В колонке flex-basis:100% относится к ВЫСОТЕ: цена занимала всю карточку,
   а .btn-block-col с кнопкой выдавливался за нижний край.
   Поэтому обоим принудительно flex:0 0 auto. */
.catalog__list-content .product_item_buy_box > div {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    align-items: stretch !important;
}

.catalog__list-content .product_item_buy_box .price-block-col {
    margin-bottom: 6px !important;
}

.catalog__list-content .product_item_buy_box .price-block-col,
.catalog__list-content .product_item_buy_box .btn-block-col {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;   /* у .btn-block-col стоял фиксированный height:40px */
    align-self: stretch;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.catalog__list-content .product_item__cart {
    display: flex;
    flex-wrap: nowrap;   /* ширины заданы жёстко ниже, переносить нечего */
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    visibility: visible;
    opacity: 1;
}

.catalog__list-content .product_item__cart .product-item-button-container {
    flex: 1 1 auto;    /* кнопка забирает всё, что осталось от счётчика */
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* .product_item__cart .basket_icon{max-width:130px} в product_card/style.css
   не давал кнопке растянуться — снимаем ограничение */
.catalog__list-content .product_item__cart .product-item-button-container button,
.catalog__list-content .product_item__cart .basket_icon,
.catalog__list-content .product_item__cart .btn-buy,
.catalog__list-content .product_item__cart .btn-primary,
.catalog__list-content .product_item__cart .btn {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 13px 8px !important;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

/* счётчик фиксированной ширины — тогда результат не зависит
   от длины названия и прочего содержимого карточки */
.catalog__list-content .product_item__cart .product-item-quantity-block {
    flex: 0 0 110px;
    width: 110px !important;
    min-width: 110px;
    max-width: 110px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.catalog__list-content .product_item__cart .product-item-amount,
.catalog__list-content .product_item__cart .product-item-amount-field-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-content: space-between;
}

.catalog__list-content .product_item__cart .product-item-amount-field {
    width: 38px !important;
    min-width: 0 !important;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Мобильная (<768px).
   В разделах 129 и 130 там показывается отдельная карточка .new_card_wrapper,
   а старая спрятана обёрткой .new_card_old_hide — правила ниже её не касаются.
   Во всех остальных разделах на мобильном видна именно старая карточка,
   поэтому её нужно ужать: иначе фото 1:1 во всю ширину даёт огромную плитку.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* --- две колонки одинаковой высоты -----------------------------------
       Раньше ряд оставался флексом (.row бутстрапа), а высота карточки
       задавалась процентами (height:100%). В Chrome это работало, в Safari
       на iPhone — нет: процент от родителя, чья высота получена
       растягиванием, Safari не разрешает, поэтому карточка оставалась по
       высоте своего содержимого и соседние карточки расходились по высоте
       из-за разной длины названия.
       Grid растягивает ячейки ряда по самой высокой во всех браузерах и
       не требует процентов вообще. Разделы 129/130 (там своя новая карточка)
       не трогаем — их список содержит .new_card_wrapper. */
    .catalog__list-content .product__list:not(:has(.new_card_wrapper)) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10px;
        row-gap: 14px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* между карточками компонент печатает <script> — это тоже прямые дети
       списка, в grid они заняли бы ячейку и разорвали сетку */
    .catalog__list-content .product__list:not(:has(.new_card_wrapper)) > script {
        display: none !important;
    }

    /* ширину и отступы теперь задаёт сетка, колоночные классы бутстрапа
       (col-12 и т.п.) и padding:5px из copy_style.css снимаем */
    .catalog__list-content .product__list:not(:has(.new_card_wrapper)) > .product-item-container {
        flex: none !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ячейка сетки тянется на высоту ряда, карточка — на высоту ячейки.
       Никаких процентных height/min-height: именно они ломали Safari. */
    .catalog__list-content .product-item-container {
        display: flex;
        align-items: stretch;
    }

    .catalog__list-content .product-item-container > .product_item.product-item {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
    }

    .catalog__list-content .product_item.product-item {
        padding: 8px 8px 10px;
        border-radius: 14px;
    }

    /* На мобильной сайт раскладывает старую карточку горизонтально:
       .product_item_img{max-width:45%} и .product_item_name_box{max-width:55%}.
       Мы делаем вертикальную карточку, поэтому ограничения снимаем. */
    .catalog__list-content .product_item_img,
    .catalog__list-content .product_item_name_box {
        max-width: none !important;
        width: 100% !important;
    }

    .catalog__list-content .product_item_img {
        padding: 0 !important;
    }

    .catalog__list-content .product_item_buy_box {
        margin-right: 0 !important;
        padding-left: 0 !important;
    }

    .catalog__list-content .product_item_buy_box .btn-block-col {
        position: relative;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
    }

    .catalog__list-content .product_item_img {
        margin-bottom: 8px;
    }

    .catalog__list-content .product_item_name_box .rating_item .count_rating {
        font-size: 12px;
    }

    .catalog__list-content .product_item_title .name {
        font-size: 13px;
        line-height: 1.25;
        min-height: 2.5em;
    }

    .catalog__list-content .product_item__price {
        margin: 6px 0 8px;
        gap: 2px 6px;
    }

    .catalog__list-content .product_item__price .price {
        font-size: 17px;
    }

    .catalog__list-content .product_item__price .old_price {
        font-size: 13px;
    }

    /* иконка «в избранное» на мобильной уезжала в левый нижний угол и налезала
       на кнопку. Позиционируется обёртка .product-icon-action, её и двигаем. */
    .catalog__list-content .product_item .product-icon-action {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        z-index: 3;
    }

    .catalog__list-content .product_item .to_favorites {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
    }

    /* кнопка и счётчик — отдельными строками, иначе в узкой колонке не помещаются */
    .catalog__list-content .product_item__cart {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .catalog__list-content .product_item__cart .product-item-button-container {
        order: 1;
    }

    .catalog__list-content .product_item__cart .product-item-quantity-block {
        order: 2;
    }

    .catalog__list-content .product_item__cart .product-item-button-container,
    .catalog__list-content .product_item__cart .product-item-quantity-block {
        flex: 1 0 100%;
        width: 100% !important;
        min-width: 0;
        max-width: none !important;
    }

    .catalog__list-content .product_item__cart .product-item-button-container button,
    .catalog__list-content .product_item__cart .basket_icon,
    .catalog__list-content .product_item__cart .btn-buy,
    .catalog__list-content .product_item__cart .btn-primary,
    .catalog__list-content .product_item__cart .btn {
        padding: 11px 6px !important;
        font-size: 14px;
    }

    .catalog__list-content .product_item__cart .product-item-amount,
    .catalog__list-content .product_item__cart .product-item-amount-field-container {
        width: 100% !important;
        justify-content: space-between;
    }
}