/* ABBRO — карточки товаров в разделах каталога (шаблон catalog.tile.4), вариант А.
   Содержимое карточки не меняется: только отступы, перенос названия и облачко «Общая стоимость».
   Облачко показывает/прячет сам шаблон (как раньше), здесь — только положение и вид. */

/* ---------- общее: облачко с итогом над кнопкой ---------- */
.ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-advanced {
    position: relative;
    /* в шаблоне min-height: 82px — место под строку «Общая стоимость» (30px).
       Итог теперь облачко поверх, поэтому резерв не нужен: иначе под кнопкой пустота */
    min-height: 0 !important;
}
/* шаблон при пересчёте (кол-во > 1) ставит min-height: 82px !important — перекрываем точнее */
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item[data-recalculation][data-available] .catalog-section-item-advanced {
    min-height: 0 !important;
}
.ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-summary {
    position: absolute !important;
    left: auto !important;
    right: 0;
    width: auto !important;
    bottom: calc(100% + 10px);
    z-index: 5;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 8px 10px !important;
    background: #ffffff;
    color: #1d2230;
    border: 1px solid #dde2ec;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(15, 23, 41, .16);
    font-size: 0 !important; /* прячем подпись «Общая стоимость», оставляем только итог */
    line-height: 16px !important;
    text-align: center;
    white-space: nowrap;
    overflow: visible !important;
    pointer-events: none;
}
.ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-summary span {
    display: inline;
    line-height: 16px !important;
    font-size: 14px;
    font-weight: 700;
    color: #1d2230;
}
.ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-summary::before {
    content: "\418\442\43E\433\43E\A0"; /* «Итого » */
    font-size: 12px;
    color: #4a5060;
}
.ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-summary::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: -6px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-right: 1px solid #dde2ec;
    border-bottom: 1px solid #dde2ec;
    transform: rotate(45deg);
}

/* ---------- десктоп и планшет: убираем пустоты ---------- */
@media (min-width: 769px) {
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-vote {
        margin: 12px 0 8px !important;
    }
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-name {
        margin: 8px 0 8px !important;
    }
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-information {
        margin: 0 0 6px !important;
    }
}

/* ---------- мобильный: 2 в ряд, компакт, полное название ---------- */
@media (max-width: 768px) {
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-items {
        margin: -4px !important;
    }
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item {
        padding: 4px !important;
    }
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-wrapper {
        padding: 10px !important;
        border-radius: 12px !important;
    }
    /* отступ между ценой и счётчиком: в шаблоне 20px !important (для 2 колонок) → 8px */
    html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-base,
    html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4[data-columns-mobile] .catalog-section-item .catalog-section-item-base,
    html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4[data-columns-mobile] .catalog-section-item:has(.catalog-section-item-summary) .catalog-section-item-base {
        padding-bottom: 8px !important;
    }
    /* счётчик и кнопка ниже: 52 → 40 и 46 → 42 px */
    html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-counter .intec-ui-part-input {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
        height: 40px !important;
    }
    html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-counter .intec-ui-part-decrement,
    html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-counter .intec-ui-part-increment {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }
    html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-purchase-button {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-image {
        padding-top: 78% !important;
    }
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-vote {
        margin: 8px 0 6px !important;
    }
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-name {
        height: auto !important;
        margin: 4px 0 6px !important;
    }
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-name > a {
        font-size: 14px !important;
        line-height: 18px !important;
        height: auto !important;
        max-height: 72px !important;
        -webkit-line-clamp: 4 !important;
        line-clamp: 4;
    }
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-information {
        margin: 0 0 6px !important;
    }
    /* шаблон на телефоне прятал итог совсем — показываем облачком так же, как на десктопе */
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-summary {
        display: block !important;
        visibility: hidden !important;
        opacity: 0 !important;
        padding: 6px 10px !important;
    }
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item[data-recalculation="true"][data-available="true"] .catalog-section-item-summary {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-summary::before {
        display: block;
        line-height: 14px;
    }
}

/* ================= UX-3 (изм. 12.10.2026): наличие под фото справа, цена внизу =================
   Порядок: фото → наличие (справа) → рейтинг/артикул → название → цена «N ₽ / шт» → счётчик и кнопка.
   Блоки шаблона не удаляются — только меняется порядок (flex order). */
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-base {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-base > * {
    flex: 0 0 100%;
    max-width: 100%;
    order: 9;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-base > .catalog-section-item-action-buttons { order: 0; }
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-base > .catalog-section-item-image-container { order: 1; }
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-base > .catalog-section-item-price {
    order: 6; /* цена снова внизу, над счётчиком и кнопкой */
    flex: 0 0 100%;
    min-width: 0;
    margin: 4px 0 0 !important;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-base > .catalog-section-item-information {
    order: 2; /* наличие сразу под фото, справа */
    flex: 0 0 auto;
    margin: 6px 0 0 auto !important;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-base > .catalog-section-item-vote { order: 4; margin: 6px 0 4px !important; }
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-base > .catalog-section-item-name { order: 5; margin: 2px 0 4px !important; }

/* цена: без отрицательных полей сетки, «Цена за шт» → «15 930 ₽ / шт» (единица берётся из шаблона) */
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-price-wrapper {
    margin: 0 !important;
    flex-wrap: wrap;
    align-items: baseline !important;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-price-wrapper > * {
    padding: 0 6px 0 0 !important;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-price-discount-block {
    display: flex !important;
    align-items: baseline;
    flex-wrap: wrap;
    white-space: nowrap;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-price-discount-block > span {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    color: #1d2230;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-price-discount-title {
    order: 2;
    font-size: 0 !important;
    line-height: 1 !important;
    margin: 0 0 0 4px !important;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-price-discount-title span {
    font-size: 12px !important;
    color: #6b7080;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-price-discount-title span::before {
    content: "/ ";
}

@media (max-width: 768px) {
    html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-base > .catalog-section-item-information {
        margin-top: 6px !important;
    }
    html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-price-discount-block > span {
        font-size: 17px !important;
        line-height: 22px !important;
    }
}
/* наличие рядом с ценой: без полей сетки шаблона, в одну строку */
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-information .intec-grid {
    margin: 0 !important;
    flex-wrap: nowrap !important;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-information .intec-grid-item,
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-information .intec-grid-item-auto {
    padding: 0 !important;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-information * {
    white-space: nowrap;
}
html body .ns-bitrix.c-catalog-section.c-catalog-section-catalog-tile-4 .catalog-section-item-information .catalog-section-item-quantity-icon {
    margin-right: 5px !important;
}

/* ================= Разделы каталога (catalog.section.list, шаблон tile-7) — мобильный =================
   Без картинок: только название и количество товаров, строка целиком кликабельна. */
@media (max-width: 768px) {
    html body .ns-bitrix.c-catalog-section-list.c-catalog-section-list-catalog-tile-7 .catalog-section-list-item-wrapper > .intec-grid-item-auto {
        display: none !important;
    }
    /* правка Ивана (13.10.2026): скругление 25 → 20px, боковые поля -20 → -15px */
    html body .ns-bitrix.c-catalog-section-list.c-catalog-section-list-catalog-tile-7 .catalog-section-list-item {
        border-radius: 20px !important;
        margin: -3px -15px !important;
    }
    html body .ns-bitrix.c-catalog-section-list.c-catalog-section-list-catalog-tile-7 .catalog-section-list-item-wrapper {
        position: relative;
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box;
        min-height: 0 !important;
        height: auto !important;
        padding: 12px 34px 12px 14px !important;
    }
    html body .ns-bitrix.c-catalog-section-list.c-catalog-section-list-catalog-tile-7 .catalog-section-list-item-wrapper > .intec-grid-item {
        padding: 0 !important;
        flex: 1 1 auto !important;
        max-width: 100% !important;
    }
    html body .ns-bitrix.c-catalog-section-list.c-catalog-section-list-catalog-tile-7 .catalog-section-list-item-name {
        display: block !important;
        font-size: 16px !important;
        line-height: 20px !important;
    }
    /* вся строка — ссылка на раздел */
    html body .ns-bitrix.c-catalog-section-list.c-catalog-section-list-catalog-tile-7 .catalog-section-list-item-name::after {
        content: "";
        position: absolute;
        inset: 0;
    }
    html body .ns-bitrix.c-catalog-section-list.c-catalog-section-list-catalog-tile-7 .catalog-section-list-item-count {
        margin-top: 3px !important;
        font-size: 13px !important;
        line-height: 16px !important;
        color: #6b7080 !important;
    }
    /* стрелка справа */
    html body .ns-bitrix.c-catalog-section-list.c-catalog-section-list-catalog-tile-7 .catalog-section-list-item-wrapper::after {
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        width: 10px;
        height: 10px;
        margin-top: -4px;
        border-right: 2px solid #9aa0ad;
        border-top: 2px solid #9aa0ad;
        transform: rotate(45deg);
        pointer-events: none;
    }
}
