/* Характеристики в карточке товара — ВАРИАНТ 3:
   таблица с тонкими разделителями, подпись полужирная, значение справа.
   (Вариант 4 «плашки» сохранён в custom-v4-plashki.css — вернуть = скопировать его в custom.css.)
   Отдельный файл, подключается после style-1.css. */

/* контейнер характеристик — во всю ширину карточки, с полями 10px */
.catalog_small ul#features{
    width:100% !important;margin:0 !important;float:none !important;
    padding:0 10px !important;box-sizing:border-box !important;max-width:100% !important;
}

/* строка характеристик: разделитель сверху, без точек-выносок */
.catalog_small ul#features li.featuresli{
    display:flex !important;align-items:baseline;
    padding:5px 0 !important;margin:0 !important;
    border:0 !important;border-top:1px solid #ececec !important;
    background:none !important;
}
.catalog_small ul#features li.featuresli:first-child{
    border-top:0 !important;padding-top:0 !important;
}
.catalog_small ul#features li.featuresli .dots{display:none !important;}

/* подпись — полужирная, тёмно-серая */
.catalog_small ul#features li.featuresli span.featuresliname{
    font-weight:700 !important;font-size:12px !important;color:#464646 !important;
    white-space:nowrap !important;flex:0 0 auto !important;overflow-wrap:normal !important;
}

/* значение — обычное, справа */
.catalog_small ul#features li.featuresli span:last-child{
    flex:1 1 auto !important;min-width:0 !important;
    font-weight:400 !important;font-size:13px !important;color:#3c3c3c !important;
    text-align:right !important;white-space:normal !important;overflow-wrap:normal !important;
}

/* карточки товаров на планшетах (767–1199px): одна карточка во всю ширину колонки.
   Лимит ширины из темы (.catalog_small li{max-width:236px !important}) отключён. */
@media (min-width: 767px) and (max-width: 1199px) {
    .catalog_small li {
        /* max-width: none !important; */
        width: 100% !important;
    }
}

/* ==========================================================================
   Вид «Списком» — таблица: фото 96×96 | наименование | характеристики |
   цена со старой ценой | кнопки (сравнить, купить, избранное).
   Включается переключателем «Показать: Плиткой / Списком» (view-switch.js),
   который вешает на ul.catalog_small id="list".
   Раскладка — flexbox с фиксированными колонками, без переносов.
   ========================================================================== */

ul#list.catalog_small > li{
    display:block !important;
    position:relative;
    float:none !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    min-height:124px;
    margin:0 !important;
    padding:14px 20px 14px 116px !important;
    box-sizing:border-box !important;
    background:none !important;
    border:0 !important;
    border-bottom:1px solid #ececec !important;
}

/* --- фото 96×96, по центру строки по вертикали --- */
ul#list.catalog_small > li .cat{
    position:absolute !important;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:96px;
    margin:0;
    display:block;
}
ul#list.catalog_small > li .image{
    float:none !important;
    width:96px !important;
    height:96px !important;
    margin:0 !important;
    padding:0 !important;
    line-height:normal !important;
    display:flex;
    align-items:center;
    justify-content:center;
}
ul#list.catalog_small > li .image img{
    max-width:96px;
    max-height:96px;
    width:auto;
    height:auto;
    margin:0 !important;
}
ul#list.catalog_small > li .second_picture{display:none !important;}

/* --- обёртка: название | характеристики | цена | кнопки, по центру строки --- */
ul#list.catalog_small > li .product_block{
    display:flex !important;
    align-items:center;
    flex-wrap:nowrap !important;
    margin-left:0;
    float:none !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
}

ul#list.catalog_small > li .name{
    flex:1 1 auto;
    min-width:0;
    order:1;
    margin:0 20px 0 0 !important;
    height:auto !important;
    text-align:left !important;
    font-size:15px;
    line-height:1.35;
}
ul#list.catalog_small > li .summary,
ul#list.catalog_small > li .rating,
ul#list.catalog_small > li .rating_big{display:none !important;}

/* ярлыки в плитке позиционируются абсолютно и в строке списка мешают */
ul#list.catalog_small > li .-b-,
ul#list.catalog_small > li .-f-,
ul#list.catalog_small > li .FreeDeliveryPlugin,
ul#list.catalog_small > li .badge{display:none !important;}

ul#list.catalog_small > li .featuresfu{
    flex:0 0 250px;
    order:2;
    margin:0 20px 0 0;
}
ul#list.catalog_small > li .featuresfu ul#features{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
}
ul#list.catalog_small > li .featuresfu ul#features li.featuresli{
    padding:2px 0 !important;
    border-top:0 !important;
}

ul#list.catalog_small > li .small{
    flex:0 0 140px;
    order:3;
    margin:0 20px 0 0;
    text-align:right;
}
ul#list.catalog_small > li .small .price{
    text-align:right !important;
    font-size:17px !important;
    line-height:1.25;
}
ul#list.catalog_small > li .small .compare-at-price_list_2{text-align:right;}

ul#list.catalog_small > li .hover-area{
    flex:0 0 auto;
    order:4;
    display:flex;
    align-items:center;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    position:static !important;
    width:auto !important;
    background:none !important;
    box-shadow:none !important;
}
ul#list.catalog_small > li .hover-area .stock{display:none !important;}
ul#list.catalog_small > li .hover-area .button-group{
    display:flex;
    align-items:center;
    gap:6px;
    text-align:left !important;
    padding:0 !important;
}
ul#list.catalog_small > li .hover-area .addtocart{
    margin:0 !important;
    padding:0 22px !important;
    height:36px;
    line-height:36px;
}

/* товар «под заказ» — вместо отсутствующей кнопки серая неактивная «КУПИТЬ»,
   чтобы кнопки во всех строках стояли на одном месте */
ul#list.catalog_small > li .hover-area .buy-stub{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:36px;
    padding:0 22px;
    border-radius:3px;
    background:#e9e9e9;
    color:#a8a8a8;
    font-weight:700;
    font-size:14px;
    letter-spacing:.02em;
    white-space:nowrap;
    cursor:default;
    user-select:none;
}

/* на средних экранах колонка товаров уже — характеристики убираем,
   чтобы наименование и цена не сжимались */
@media (max-width: 1449px){
    ul#list.catalog_small > li .featuresfu{display:none !important;}
    ul#list.catalog_small > li .small{flex:0 0 130px;}
    ul#list.catalog_small > li .name{margin-right:16px !important;}
}

/* ==========================================================================
   Масштаб СПИСКА — ползунок рядом с «Сортировать» (только ПК, только список).
   Шаг 10%, диапазон 100–150%. JS ставит на ul#list переменную --ls
   (1 … 1.5), все размеры строки умножаются на неё.
   ========================================================================== */

.scale-list-li{display:none !important;}
body.catalog-list-mode .scale-list-li{display:inline-block !important;}

.scale-list{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:32px;
    padding:0 4px;
    vertical-align:middle;
}
.scale-list-value{
    font-size:12px;
    color:#666;
    min-width:38px;
    text-align:left;
}
.scale-list input[type="range"]{
    -webkit-appearance:none;
    appearance:none;
    width:86px;
    height:4px;
    margin:0;
    border-radius:2px;
    background:#e6e6e6;
    outline:none;
    cursor:pointer;
}
.scale-list input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#ffffff;
    border:3px solid #f15a24;
    box-shadow:0 1px 2px rgba(0,0,0,.15);
    cursor:pointer;
}
.scale-list input[type="range"]::-moz-range-thumb{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#ffffff;
    border:3px solid #f15a24;
    cursor:pointer;
}
.scale-list input[type="range"]::-moz-range-track{
    height:4px;
    border-radius:2px;
    background:#e6e6e6;
}

/* только ПК: на телефонах и планшетах контрол не показываем */
@media (max-width: 1199px){
    .scale-list-li{display:none !important;}
}

/* все размеры строки списка умножаются на --ls */
ul#list.catalog_small > li{
    min-height:calc(124px * var(--ls, 1));
    padding:calc(14px * var(--ls, 1)) 20px calc(14px * var(--ls, 1)) calc(116px * var(--ls, 1)) !important;
}
ul#list.catalog_small > li .cat{
    width:calc(96px * var(--ls, 1));
}
ul#list.catalog_small > li .image{
    width:calc(96px * var(--ls, 1)) !important;
    height:calc(96px * var(--ls, 1)) !important;
}
ul#list.catalog_small > li .image img{
    max-width:calc(96px * var(--ls, 1));
    max-height:calc(96px * var(--ls, 1));
}
ul#list.catalog_small > li .name{
    font-size:calc(15px * var(--ls, 1)) !important;
    line-height:1.3;
}
ul#list.catalog_small > li .featuresfu{
    flex:0 0 250px;   /* ширину колонки не масштабируем: иначе съедается наименование */
}
ul#list.catalog_small > li .featuresfu ul#features li.featuresli span.featuresliname{
    font-size:calc(12px * var(--ls, 1)) !important;
}
ul#list.catalog_small > li .featuresfu ul#features li.featuresli span:last-child{
    font-size:calc(13px * var(--ls, 1)) !important;
}
ul#list.catalog_small > li .small{
    flex:0 0 150px;   /* ширину колонки не масштабируем */
}
ul#list.catalog_small > li .small .price{
    font-size:calc(17px * var(--ls, 1)) !important;
}
ul#list.catalog_small > li .small .compare-at-price_list_2{
    font-size:calc(12px * var(--ls, 1));
}
ul#list.catalog_small > li .hover-area .addtocart{
    height:calc(36px * var(--ls, 1));
    line-height:calc(36px * var(--ls, 1));
    padding:0 calc(22px * var(--ls, 1)) !important;
}
ul#list.catalog_small > li .hover-area .buy-stub{
    height:calc(36px * var(--ls, 1));
    padding:0 calc(22px * var(--ls, 1));
    font-size:calc(14px * var(--ls, 1));
}

/* ==========================================================================
   Карточек в ряд (только ПК, только плитка): три кнопки — 3 / 4 / 5 в строке.
   JS вешает на ul.catalog_small класс cols-set и переменную --gw (ширина карточки).
   ========================================================================== */

.grid-switch-li{display:none !important;}
body:not(.catalog-list-mode) .grid-switch-li{display:inline-block !important;}

@media (max-width: 1199px){
    .grid-switch-li{display:none !important;}
}

.grid-switch{
    display:inline-flex;
    align-items:center;
    gap:4px;
    height:32px;
    padding:0 4px;
    vertical-align:middle;
}
.grid-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:30px;
    padding:0;
    border:1px solid #e5e5e5;
    border-radius:2px;
    background:#ffffff;
    color:#bdbdbd;
    cursor:pointer;
    line-height:1;
}
.grid-btn:hover{color:#8a8a8a;border-color:#d5d5d5;}
.grid-btn.active{color:#f15a24;border-color:#f15a24;}
.grid-btn svg{display:block;}

@media (min-width: 1200px){
    ul.catalog_small.catalog_fix.cols-set > li,
    .fullwidth ul.catalog_small.cols-set > li{
        width:var(--gw, 33.3333%) !important;
        max-width:none !important;
    }
}