/* ============================================================
   card-fix.css
   Выравнивание высоты карточек товара в каталоге JoomShopping.
   Шаблон-источник карточки: components/com_jshopping/templates/default/list_products/product.php
   HTML, который мы стилизуем:
     #comjshop_list_product > .row-fluid > .sblock4 > .block_product > .product > .podp
       > .image > .image_block > img.jshop_img
       > .name (название)
       > .jshop_price (старая цена) + .jshop_price (актуальная)
       > .buttons (.button_detail, .button_buy)
   ============================================================ */

/* --- Сетка ряда: flex с выравниванием высоты колонок --- */
.jshop_list_product #comjshop_list_product .row-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 0 4px;
}

/* Скрыть <hr> между рядами — в flex-сетке он не нужен */
.jshop_list_product #comjshop_list_product > hr {
    display: none;
}

/* Колонка: убираем float, делаем flex-контейнером, минимальные горизонт. отступы */
.jshop_list_product #comjshop_list_product .row-fluid > [class*="sblock"] {
    display: flex;
    float: none;
    margin-left: 0;
    padding: 0 4px;
    box-sizing: border-box;
}

/* 4 товара в ряд — равная ширина */
.jshop_list_product #comjshop_list_product .row-fluid > .sblock4 { width: 25%; }
.jshop_list_product #comjshop_list_product .row-fluid > .sblock3 { width: 33.3333%; }
.jshop_list_product #comjshop_list_product .row-fluid > .sblock2 { width: 50%; }

/* Внешняя обёртка занимает всю ширину/высоту колонки */
.jshop_list_product #comjshop_list_product .block_product {
    width: 100%;
    display: flex;
}

/* Сама карточка — flex column на всю высоту */
.jshop_list_product #comjshop_list_product .block_product > .product {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.jshop_list_product #comjshop_list_product .product .podp {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 8px;
    box-sizing: border-box;
    /* Весь блок (картинка → имя → цены → кнопки) центрирован
       по вертикали в свободном месте карточки, и по горизонтали */
    justify-content: center;
    text-align: center;
}

/* --- Картинка: единая высота для всех карточек, contain --- */
.jshop_list_product #comjshop_list_product .product .podp .image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 6px;
}

.jshop_list_product #comjshop_list_product .product .podp .image .image_block {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.jshop_list_product #comjshop_list_product .product .podp .image .image_block .jshop_img {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* Лейбл (бейдж акции) — поверх картинки */
.jshop_list_product #comjshop_list_product .product .podp .image_block .product_label {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
}

/* --- Название: 6 строк очень мелкого шрифта (фикс. высота — карточки не "прыгают").
       На данных vip-collection.ru самые длинные имена доходят до 143 символов
       (комплекты чемоданов с описанием размеров/веса).
       6 строк × 1.2em × 10px ≈ 72px вмещают ~180 символов. --- */
.jshop_list_product #comjshop_list_product .product .podp .name {
    font-size: 10px;
    line-height: 1.2;
    margin: 0 0 4px;
    min-height: calc(1.2em * 6);
    max-height: calc(1.2em * 6);
    overflow: hidden;
    display: block;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.jshop_list_product #comjshop_list_product .product .podp .name a {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.jshop_list_product #comjshop_list_product .product .podp .name a:hover {
    text-decoration: underline;
}

/* --- Цены: оба слота с фикс. min-height, чтобы пустая старая цена не "ломала" сетку.
       text-align: center нужен явно — иначе перебивается правилом из template.css. --- */
.jshop_list_product #comjshop_list_product .product .podp .jshop_price {
    min-height: 1.3em;
    line-height: 1.3em;
    margin: 0;
    text-align: center !important;
}
.jshop_list_product #comjshop_list_product .product .podp .jshop_price span {
    text-align: center;
}

/* Старая цена — первая по порядку .jshop_price, занимает место даже когда пустая */
.jshop_list_product #comjshop_list_product .product .podp .jshop_price:first-of-type {
    font-size: 12px;
}

/* --- Кнопки: в столбик, "Купить" сверху, "Подробнее" снизу.
   margin-top больше не auto — теперь контент карточки центрирован через
   justify-content: center на .podp --- */
.jshop_list_product #comjshop_list_product .product .podp .buttons {
    margin-top: 0;
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

/* Порядок: button_buy → button_detail → всё остальное (_tmp_var_buttons) */
.jshop_list_product #comjshop_list_product .product .podp .buttons > a.btn.button_buy,
.jshop_list_product #comjshop_list_product .product .podp .buttons > a.btn.btn-success.button_buy {
    order: -2;
}
.jshop_list_product #comjshop_list_product .product .podp .buttons > a.btn.button_detail {
    order: -1;
}

.jshop_list_product #comjshop_list_product .product .podp .buttons > a.btn {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
    padding: 7px 10px;
    border-radius: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    text-shadow: none;
    background-image: none;
    box-shadow: none;
}

/* --- Брендовая палитра кнопок (под лого VIP COLLECTION) ---
   "Подробнее" — outline (прозрачная, коричневая рамка)
   "Купить"    — заливка бордовым (главный CTA)
   !important нужен потому что старые правила в template.css
   используют !important и opacity:.6 на hover.
*/
.jshop_list_product #comjshop_list_product .product .podp .buttons > a.btn.button_detail {
    background: transparent !important;
    background-color: transparent !important;
    color: #3d2817 !important;
    border: 1px solid #3d2817 !important;
}
.jshop_list_product #comjshop_list_product .product .podp .buttons > a.btn.button_detail:hover,
.jshop_list_product #comjshop_list_product .product .podp .buttons > a.btn.button_detail:focus {
    background: #3d2817 !important;
    background-color: #3d2817 !important;
    color: #ffffff !important;
    border-color: #3d2817 !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

.jshop_list_product #comjshop_list_product .product .podp .buttons > a.btn.button_buy,
.jshop_list_product #comjshop_list_product .product .podp .buttons > a.btn.btn-success.button_buy {
    background: #8b1a1a !important;
    background-color: #8b1a1a !important;
    color: #ffffff !important;
    border: 1px solid #8b1a1a !important;
}
.jshop_list_product #comjshop_list_product .product .podp .buttons > a.btn.button_buy:hover,
.jshop_list_product #comjshop_list_product .product .podp .buttons > a.btn.btn-success.button_buy:hover,
.jshop_list_product #comjshop_list_product .product .podp .buttons > a.btn.button_buy:focus {
    background: #6e1414 !important;
    background-color: #6e1414 !important;
    border-color: #6e1414 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

/* --- Адаптив --- */
/* --- Панель "Сортировать по / Товаров на странице"
       Перебиваем Bootstrap 2 form-horizontal раскладку:
       все элементы на одной горизонтальной линии, по центру,
       селекты прижаты вплотную к своим лейблам.
       HTML-источник: components/com_jshopping/templates/default/list_products/form_filters.php
       Структура:
         .form_sort_count > .block_sorting_count_to_page
           > .jshop_pagination
           > .control-group.box_products_sorting > .control-label + .controls (select + icon)
           > .control-group.box_products_count_to_page > .control-label + .controls (select)
*/
.jshop_list_product .form_sort_count {
    margin: 0 0 15px;
}
.jshop_list_product .block_sorting_count_to_page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.jshop_list_product .block_sorting_count_to_page .jshop_pagination {
    margin: 0;
    display: inline-flex;
    align-items: center;
}
.jshop_list_product .block_sorting_count_to_page .control-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 !important;
    padding: 0;
}
.jshop_list_product .block_sorting_count_to_page .control-group .control-label {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.4;
    white-space: nowrap;
}
.jshop_list_product .block_sorting_count_to_page .control-group .controls {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.jshop_list_product .block_sorting_count_to_page select {
    margin: 0;
    height: auto;
    padding: 4px 8px;
    line-height: 1.4;
    box-sizing: border-box;
    vertical-align: middle;
    width: auto !important;
    max-width: 100%;
}
.jshop_list_product .block_sorting_count_to_page .box_products_sorting select { min-width: 170px; }
.jshop_list_product .block_sorting_count_to_page .box_products_count_to_page select { min-width: 70px; }
.jshop_list_product .block_sorting_count_to_page .icon-arrow img {
    vertical-align: middle;
    cursor: pointer;
}

@media (max-width: 992px) {
    .jshop_list_product #comjshop_list_product .row-fluid > .sblock4 { width: 33.3333%; }
    .jshop_list_product #comjshop_list_product .product .podp .image .image_block { height: 160px; }
}

@media (max-width: 720px) {
    .jshop_list_product #comjshop_list_product .row-fluid > .sblock4,
    .jshop_list_product #comjshop_list_product .row-fluid > .sblock3,
    .jshop_list_product #comjshop_list_product .row-fluid > .sblock2 { width: 50%; }
    .jshop_list_product #comjshop_list_product .product .podp .image .image_block { height: 150px; }
    .jshop_list_product #comjshop_list_product .product .podp .name { font-size: 11px; }
}

@media (max-width: 420px) {
    .jshop_list_product #comjshop_list_product .row-fluid > [class*="sblock"] { width: 100%; }
    .jshop_list_product #comjshop_list_product .product .podp .image .image_block { height: 200px; }
}