/*
 * Карточка товара в списке — единый компонент витрины.
 *
 * Применяется в каталоге, в результатах поиска и (в приглушённом варианте)
 * в блоках «ранее просмотренные» и «с этим товаром покупают». До этого каждый
 * список был свёрстан по-своему: плитка на 25 % ширины с картинкой по центру
 * в каталоге, карточка-строка в поиске, флекс-список с тяжёлой тенью в
 * просмотренных.
 *
 * Сетка на auto-fill, а не на фиксированных долях (25 % / 33 %): колонки
 * подстраиваются под ширину экрана сами, без набора медиазапросов на каждый
 * порог, и карточка не сжимается до нечитаемой.
 */

.part-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.part-card {
    display: flex;
    gap: 14px;
    padding: 12px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.part-card:hover,
.part-card:focus-visible {
    border-color: #C00;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}

/* Фокус виден с клавиатуры: карточка — основной интерактивный элемент списка. */
.part-card:focus-visible {
    outline: 2px solid #C00;
    outline-offset: 2px;
}

.part-card__img {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

.part-card__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.part-card__noimg {
    color: #cfcfcf;
    font-size: 26px;
}

.part-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.part-card__title {
    font-weight: 600;
    color: #1f1f1f;
    font-size: 15px;
    line-height: 1.25;
    /* Две строки максимум: карточки в ряду остаются одной высоты. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.part-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.part-card__code {
    color: #777;
    font-size: 12px;
    font-family: Consolas, "Courier New", monospace;
}

.part-card__stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #1e7e34;
    background: #e8f5ec;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.part-card__price {
    color: #1f1f1f;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.part-card__snippet {
    color: #666;
    font-size: 12.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * Приглушённый вариант — «ранее просмотренные», «с этим товаром покупают».
 * Это вспомогательные блоки: они не должны спорить за внимание с основным
 * списком товаров, поэтому меньше превью, одна строка названия, светлее рамка
 * и никакого подъёма при наведении.
 */
.part-cards--quiet {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.part-card--quiet {
    gap: 10px;
    padding: 8px 10px;
    border-color: #ededed;
    background: #fcfcfc;
    border-radius: 10px;
}

.part-card--quiet:hover,
.part-card--quiet:focus-visible {
    border-color: #d0d0d0;
    background: #fff;
    box-shadow: none;
    transform: none;
}

.part-card--quiet .part-card__img {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    border-radius: 6px;
}

.part-card--quiet .part-card__noimg { font-size: 18px; }

.part-card--quiet .part-card__title {
    font-size: 13.5px;
    font-weight: 500;
    color: #444;
    -webkit-line-clamp: 1;
}

.part-card--quiet .part-card__code { font-size: 11px; }
.part-card--quiet .part-card__stock { font-size: 10px; padding: 1px 6px; }
.part-card--quiet .part-card__price { font-size: 12px; font-weight: 600; color: #444; }

/* ---- Заголовки списков ---- */

.parts-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 14px;
}

.parts-head__count {
    color: #888;
    font-size: .8em;
    font-weight: 400;
}

/* Заголовок вспомогательного блока — тише основного: это не раздел каталога.
   Разделительной линии нет намеренно: рядом стоят блоки со своими рамками
   («под заказ»), и лишняя черта сливалась с ними в кашу. Разводим отступом. */
.parts-head--quiet {
    justify-content: space-between;
    margin: 34px 0 10px;
}

.parts-head--quiet h2,
.parts-head--quiet .parts-head__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #666;
    text-transform: none;
}

.parts-head__action {
    background: none;
    border: 0;
    padding: 0;
    color: #999;
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: underline;
}

.parts-head__action:hover { color: #C00; }

/* ---- Адаптив ---- */

@media (max-width: 767px) {
    .part-cards { grid-template-columns: 1fr; }
    .part-cards--quiet { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .part-card__img { flex-basis: 60px; width: 60px; height: 60px; }
    .part-card--quiet { padding: 8px; }
    .part-card--quiet .part-card__img { flex-basis: 44px; width: 44px; height: 44px; }
}

/* ---- Пустой раздел ---- */

.parts-empty {
    text-align: center;
    padding: 34px 20px;
    border: 1px dashed #e0e0e0;
    border-radius: 12px;
    background: #fcfcfc;
    color: #666;
}

.parts-empty__icon {
    font-size: 28px;
    color: #d5d5d5;
    margin-bottom: 10px;
}

.parts-empty__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #444;
}

.parts-empty__hint {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.45;
}

.parts-empty__link {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 9px;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.parts-empty__link:hover {
    border-color: #C00;
    color: #C00;
    text-decoration: none;
}

/* ================= Предложения по детали ================= */
/*
 * Наличие в магазинах и позиции под заказ. Раньше — bootstrap-таблица
 * table-striped внутри блока с тенью rgba(32,32,32,.33) и зелёной кнопкой
 * «Показать»: вторичный блок выглядел заметнее основного предложения,
 * а полосатая заливка мешала читать строки.
 */

.offers {
    margin: 26px 0 0;
}

.offers__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    font-size: 20px;
}

.offers__count {
    color: #888;
    font-size: .7em;
    font-weight: 400;
}

/* Кнопка раскрытия — текстовая, не соперничает с «Заказать». */
.offers__toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.offers__toggle:hover { border-color: #C00; color: #C00; }
.offers__toggle .fa { transition: transform .2s; }
.offers__toggle.is-open .fa { transform: rotate(180deg); }

.offers__table-wrap {
    overflow-x: auto;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
}

.offers__note {
    margin: 0;
    padding: 8px 14px 12px;
    color: #999;
    font-size: 12px;
}

/*
 * Под заказ — тише основного предложения, но отдельно от него.
 *
 * Раньше секция шла сразу под таблицей наличия с обычным заголовком, и в
 * свёрнутом виде читалась как её продолжение — граница между «есть на складе»
 * и «привезём под заказ» терялась, хотя для покупателя это разные вещи.
 * Поэтому: увеличенный отступ сверху и заголовок-полка со своей подложкой,
 * то есть явный сворачиваемый блок.
 */
/* Отступа мало: полка «Под заказ» была залита #f7f7f7, а шапка таблицы выше —
   #fafafa, и на глаз это один и тот же серый. Блок читался как продолжение
   таблицы наличия. Поэтому разделяем явно — линией и воздухом с обеих сторон. */
.offers--secondary {
    margin-top: 44px;
    padding-top: 30px;
}

.offers--secondary .offers__head {
    align-items: center;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #f7f7f7;
    color: #555;
    font-size: 17px;
}

.offers--secondary .offers__table-wrap {
    margin-top: 8px;
    background: #fcfcfc;
    border-color: #ececec;
}

/* ---- Таблица предложений ---- */

.offers-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
}

.offers-table thead th {
    padding: 10px 14px;
    border-bottom: 1px solid #ededed;
    background: #fafafa;
    color: #888;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
    white-space: nowrap;
}

.offers-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid #f2f2f2;
    vertical-align: middle;
}

.offers-table tbody tr:last-child td { border-bottom: 0; }
.offers-table tbody tr:hover { background: #fcfcfc; }

.offers-table__title {
    display: block;
    color: #1f1f1f;
    font-weight: 600;
}

.offers-table__code {
    display: block;
    margin-top: 2px;
    color: #888;
    font-size: 12px;
    font-family: Consolas, "Courier New", monospace;
}

/* Цена и количество — по центру колонки.
   Для заголовков нужен более сильный селектор: правило `.offers-table thead th`
   выше по специфичности, и без него шапка оставалась слева, а значения стояли
   по центру — колонка выглядела кривой.
   На мобильном оба правила перебиваются общим text-align: right: там значение
   стоит в строке напротив подписи, и центрировать нечего. */
.offers-table__num { text-align: center; }
.offers-table thead th.offers-table__num { text-align: center; }
.offers-table__act { text-align: right; width: 1%; white-space: nowrap; }

.offers-table__price {
    color: #1f1f1f;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

/* Перечёркнутая розничная цена магазинов над онлайн-ценой (когда есть скидка). */
.offers-table__price .price-old {
    display: block;
    margin-bottom: 1px;
    color: #555;
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
    white-space: nowrap;
}
/* Цена детали — единым блоком (перечёркнутая → онлайн → подпись),
   чтобы строки стабильно стояли колонкой и на мобильной раскладке. */
.offers-price { display: block; }
.offers-price__now { display: block; }

/* Пояснение под ценой основной детали: это онлайн-цена со скидкой. */
.offers-table__price-note {
    display: block;
    max-width: 190px;
    margin: 3px auto 0;
    color: #2e9b57;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
}

/* inline-block — чтобы линия перечёркивания не шла по иконке. */
.price-old__i {
    display: inline-block;
    margin-left: 4px;
    color: #aaa;
    font-size: 11px;
    text-decoration: none;
    cursor: help;
    vertical-align: baseline;
}

/* Магазины и остатки идут построчно и должны совпадать по вертикали. */
.offers-table__shop { display: block; line-height: 1.5; }
.offers-table__upd { display: block; margin-top: 2px; color: #aaa; font-size: 11.5px; }

.btn-order {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Ссылка «Перейти» у аналога: вторичная, чтобы не спорить с «Заказать»
   у основной детали. */
.btn-goto {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    color: #2f6fbf;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.btn-goto:hover {
    background: #f2f7fd;
    border-color: #2f6fbf;
    color: #2f6fbf;
    text-decoration: none;
}

/* Подзаголовок «Аналоги» внутри таблицы наличия — разделяет основную деталь
   и взаимозаменяемые. */
.offers-table tbody tr.offers-group td {
    padding: 13px 14px 7px;
    border-bottom: 1px solid #ededed;
    background: #fafafa;
}
.offers-table tbody tr.offers-group:hover td { background: #fafafa; }
.offers-group__title {
    display: block;
    color: #666;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ---- Мобильный вид: таблица разворачивается в карточки ---- */

@media (max-width: 767px) {
    .offers-table thead { display: none; }
    .offers-table, .offers-table tbody, .offers-table tr, .offers-table td { display: block; width: 100%; }

    .offers-table tbody tr {
        padding: 12px 14px;
        border-bottom: 1px solid #f0f0f0;
    }

    .offers-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 3px 0;
        border: 0;
        text-align: right;
    }

    /* Подпись столбца переносится в строку — иначе значения теряют смысл. */
    .offers-table tbody td[data-label]::before {
        content: attr(data-label);
        color: #999;
        font-size: 12px;
        text-align: left;
    }

    .offers-table tbody td[data-label="Запчасть"] {
        display: block;
        text-align: left;
        margin-bottom: 6px;
    }

    .offers-table tbody td[data-label="Запчасть"]::before { content: none; }
    .offers-table__act { text-align: left; width: auto; padding-top: 10px !important; }
    .offers-table__act .btn-order { width: 100%; }
    .offers-table__act .btn-goto { display: block; width: 100%; text-align: center; box-sizing: border-box; }

    /* Строка-подзаголовок «Аналоги»: в мобильной раскладке таблица — это карточки,
       поэтому рендерим её отдельным блоком-заголовком, а не ячейкой. */
    .offers-table tbody tr.offers-group { padding: 0; border-bottom: 0; }
    .offers-table tbody tr.offers-group td { display: block; text-align: left; padding: 12px 14px 6px; }
    .offers-table tbody tr.offers-group td::before { content: none; }
}

/* ---- Сводка по разделу ---- */
/*
 * Число позиций, наличие и минимальная цена. Живут здесь, а не внутри
 * сгенерированного текста: прайс переливается каждые пять минут, и цифры,
 * зашитые в текст, устаревали бы молча до следующего прогона LLM.
 */

.parts-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: -4px 0 14px;
    color: #777;
    font-size: 13.5px;
}

.parts-stats__stock {
    display: inline-flex;
    align-items: center;
    color: #1e7e34;
    font-weight: 600;
}

.parts-stats__stock::before {
    content: '';
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: #1e7e34;
}

.parts-stats__price {
    color: #1f1f1f;
    font-weight: 700;
}

/* ================= Карточка товара (страница детали) ================= */
/*
 * Шапка: раньше bootstrap .d-flex с картинкой и плотной колонкой текста
 * (код + совместимость + описание + страна + аналоги) в одном блоке. На узком
 * экране .d-flex не переносился — картинка и текст сжимались, описание и
 * совместимость сливались в кашу. Теперь адаптивный hero (картинка + краткие
 * факты) и отдельные блоки «Совместимость» и «Описание».
 */

.part-hero {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 6px 0 0;
}

.part-hero__media {
    flex: 0 0 300px;
    max-width: 300px;
    margin: 0;
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 14px;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.part-hero__media a { display: block; line-height: 0; }
.part-hero__media img { max-width: 100%; max-height: 320px; object-fit: contain; }

.part-hero__summary { flex: 1 1 320px; min-width: 0; }

.part-facts { display: flex; flex-direction: column; gap: 10px; }

.part-fact { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; }
.part-fact__label { flex: 0 0 108px; color: #888; }
.part-fact__value { color: #1f1f1f; min-width: 0; word-break: break-word; }

.part-code-chip {
    font-family: Consolas, "Courier New", monospace;
    font-weight: 700;
    font-size: 15px;
    color: #1f1f1f;
    background: #f3f3f3;
    border: 1px solid #e6e6e6;
    padding: 2px 10px;
    border-radius: 8px;
}

/* Блоки «Совместимость» и «Описание» — самостоятельные карточки с заголовком. */
.part-panel {
    margin: 20px 0 0;
    border: 1px solid #ececec;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.part-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 16px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.part-panel__title .fa { color: #C00; }
.part-panel__body { padding: 14px 16px; }

.part-compat__item { margin: 0 0 8px; line-height: 1.4; }
.part-compat__item:last-child { margin-bottom: 0; }
.part-compat__link { text-decoration: none; }
.part-compat__link:hover .part-compat__model { color: #C00; text-decoration: underline; }
.part-compat__model { font-weight: 700; color: #1f1f1f; }
.part-compat__group { color: #888; font-size: .9em; }

.part-compat__more {
    display: inline-block;
    margin-top: 6px;
    color: #C00;
    font-size: 13.5px;
    cursor: pointer;
    border-bottom: 1px dashed #C00;
}
.part-compat__more:hover { border-bottom-style: solid; }

.part-descr { color: #333; line-height: 1.55; font-size: 14.5px; }
.part-descr > :first-child { margin-top: 0; }
.part-descr > :last-child { margin-bottom: 0; }
.part-descr p { margin: 0 0 10px; }
.part-descr ul { margin: 0 0 10px; padding-left: 20px; }
.part-descr li { margin: 2px 0; }

/* Наличие — склады с остатками в одной колонке (объединили «Магазин» и «Кол-во»). */
.stock-list { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }

.stock-total {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e8f5ec;
    color: #1e7e34;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.stock-row { display: inline-flex; align-items: baseline; gap: 4px; font-size: 13.5px; white-space: nowrap; }
.stock-row__shop { color: #666; }
.stock-row__cnt { color: #1f1f1f; font-weight: 700; }
.stock-row__cnt::before { content: '— '; color: #ccc; font-weight: 400; }

/* ---- Адаптив карточки ---- */
@media (max-width: 767px) {
    .part-hero { flex-direction: column; gap: 14px; }
    .part-hero__media { flex-basis: auto; max-width: none; width: 100%; }
    .part-hero__media img { max-height: 260px; }
    /* В колонке flex-basis становится высотой: 320px раздувал факты и давал
       большой пробел. Сбрасываем — блок по содержимому. */
    .part-hero__summary { flex: 0 1 auto; width: 100%; }
    .part-fact { gap: 8px; }
    .part-fact__label { flex-basis: 96px; }

    /* «Наличие» в мобильной карточке-строке — блоком под подписью, слева. */
    .offers-table tbody td[data-label="Наличие"] { display: block; text-align: left; }
    .offers-table tbody td[data-label="Наличие"]::before { display: block; margin-bottom: 4px; }

    /* Цена в мобильной раскладке: значение и подпись — справа колонкой. */
    .offers-price { text-align: right; }
    .offers-table__price-note { max-width: none; margin-left: auto; margin-right: 0; text-align: right; }
}

/* ---- Модалка увеличенной картинки товара ---- */
/*
 * Вписываем картинку в экран: инлайн max-width:1000px уводил широкие
 * изображения за вьюпорт на телефоне. Диалог — до 1000px на десктопе и не шире
 * 96vw на узком экране; картинка не превышает ширину диалога и 82vh по высоте.
 */
#partModal .modal-dialog { max-width: min(1000px, 96vw); }

#partModalImage {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    height: auto;
    margin: 0 auto;
}