/* ==========================================================================
   Таблицы в текстовом блоке карточки товара (.content)
   Палитра сайта: #0B1E2C — основной текст, #E7F6FE — фирменный голубой,
   rgba(0,166,247,.05) — подсветка при наведении, #FC637B — коралловый акцент.
   Добавлять в конец styles.css (или отдельным файлом после него).
   ========================================================================== */

/* --- контейнер: таблица сама становится областью прокрутки ---------------- */
.content table {
    display: block;              /* даёт горизонтальную прокрутку без обёртки */
    width: 100%;
    max-width: 100%;
    min-width: 0;                /* снимаем min-width: 548px — он ломал мобильные */
    margin: 24px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 0 0 1px #E3EBF1;
    font-size: 14px;
    line-height: 1.45;
    color: #0B1E2C;

    /* подсказка-тень у краёв, пока таблица прокручена не до конца */
    background:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left,  #fff 30%, rgba(255, 255, 255, 0)) right center,
        radial-gradient(farthest-side at 0 50%, rgba(11, 30, 44, .14), rgba(11, 30, 44, 0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(11, 30, 44, .14), rgba(11, 30, 44, 0)) right center;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* --- сетка: tbody держит ширину колонок ---------------------------------- */
.content table > tbody,
.content table > thead {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

/* --- ячейки -------------------------------------------------------------- */
.content th,
.content td {
    padding: 11px 16px;
    border: 0;
    border-bottom: 1px solid #EDF1F5;
    text-align: left;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;   /* цифры не «пляшут» по колонкам */
}

.content td p { margin: 0; }

/* Данные не переносим — колонки остаются читаемыми,
   а если строка не помещается, таблица прокручивается по горизонтали */
.content table > tbody > tr + tr > td,
.content table > tbody > tr + tr > th { white-space: nowrap; }

/* --- шапка: первая строка (в контенте нет <thead>) ------------------------ */
.content table > thead td,
.content table > thead th,
.content table > tbody > tr:first-child > td,
.content table > tbody > tr:first-child > th {
    background-color: #E7F6FE;
    color: #0B1E2C;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: normal;
    border-bottom: 1px solid #CFE7F4;
}

/* --- зебра и наведение --------------------------------------------------- */
.content table > tbody > tr:nth-child(even) > td { background-color: #F6FAFD; }

.content table > tbody > tr:last-child > td { border-bottom: 0; }

@media (hover: hover) {
    .content table > tbody > tr:hover > td {
        background-color: rgba(0, 166, 247, .07);
    }
    .content table > tbody > tr:first-child:hover > td {
        background-color: #E7F6FE;     /* шапку не подсвечиваем */
    }
}

/* --- планшет / мобильные -------------------------------------------------- */
@media (max-width: 767px) {
    .content table {
        margin: 20px 0;
        font-size: 13px;
    }

    .content th,
    .content td { padding: 9px 12px; }
}

/* --- опция: таблицы с длинным текстом в ячейках ---------------------------
   По умолчанию значения не переносятся (колонки читаются ровно).
   Если в какой-то таблице длинные описания и перенос уместнее прокрутки —
   либо уберите блок с white-space: nowrap выше, либо добавьте таблице
   класс table--wrap в HTML-редакторе:
.content table.table--wrap > tbody > tr > td { white-space: normal; }
   -------------------------------------------------------------------------- */

/* --- печать --------------------------------------------------------------- */
@media print {
    .content table {
        display: table;
        overflow: visible;
        box-shadow: none;
        background: none;
        border: 1px solid #D6D6D6;
    }
    .content table > tbody { display: table-row-group; min-width: 0; }
}