/* Оформление магазина шин и дисков (/shiny/, /diski/). Вынесено из shiny.php,
   чтобы оба каталога выглядели одинаково и стили кешировались браузером. */
.ts { background:#0a0a0a; color:#fff; min-height:100vh; padding:110px 0 60px; }
.ts .wrap { max-width:1240px; margin:0 auto; padding:0 16px; }
.ts-crumbs { font-size:13px; color:#888; margin-bottom:12px; }
.ts-crumbs a { color:#aaa; text-decoration:none; }
.ts h1 { font-family:Montserrat,sans-serif; font-size:clamp(24px,3.4vw,34px); margin:0 0 8px; line-height:1.2; }
.ts h1 em { font-style:normal; color:#ff003c; }
.ts-lead { color:#bbb; font-size:15px; max-width:780px; margin:0 0 16px; line-height:1.55; }
.ts-ok { padding:16px 18px; border-radius:12px; margin-bottom:18px; background:rgba(33,194,107,.1); border:1px solid rgba(33,194,107,.35); }
.ts-err { padding:14px 18px; border-radius:12px; margin-bottom:18px; background:rgba(255,0,60,.1); border:1px solid rgba(255,0,60,.4); }

/* Строка фильтров: кнопки с выпадающими списками галочек */
/* Общие стили сайта оформляют любую form карточкой с фоном и отступами — здесь это строка кнопок */
.ts form.fbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; padding:0;
    background:none; border:0; box-shadow:none; border-radius:0; max-width:none; width:auto; }
.fc { position:relative; }
.fc summary { list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px;
    padding:10px 14px; border-radius:10px; background:#17171c; border:1px solid #2a2a31; font-size:14.5px; color:#e6e6e6; white-space:nowrap; }
.fc summary::-webkit-details-marker { display:none; }
.fc summary i { font-size:11px; color:#888; transition:transform .15s; }
.fc[open] summary i { transform:rotate(180deg); }
.fc summary b { background:#ff003c; color:#fff; border-radius:10px; padding:0 7px; font-size:12px; }
.fc.on summary, .fc summary:hover { border-color:#ff003c; }
.fc-pop { position:absolute; top:calc(100% + 6px); left:0; z-index:50; min-width:220px; max-width:92vw;
    background:#17171c; border:1px solid #2e2e36; border-radius:12px; padding:12px; box-shadow:0 14px 40px rgba(0,0,0,.6); }
.fc-list { display:grid; grid-template-columns:repeat(var(--cols,1), minmax(76px, 1fr)); gap:2px 10px; max-height:320px; overflow:auto; }
.fc-list label { display:flex; align-items:center; gap:8px; padding:6px 4px; font-size:14px; color:#ddd; cursor:pointer; border-radius:6px; }
.fc-list label:hover { background:#202027; }
.fc-list input { width:17px; height:17px; accent-color:#ff003c; }
.fc-apply { width:100%; margin-top:10px; padding:10px; border:0; border-radius:9px; background:#ff003c; color:#fff; font-weight:700; cursor:pointer; }
.fbar-reset { padding:10px 14px; border-radius:10px; color:#aaa; text-decoration:none; font-size:14px; }
.fbar-reset:hover { color:#fff; }

.ts-sizes { display:flex; flex-wrap:wrap; gap:7px; margin:4px 0 16px; }
.ts-sizes a { padding:6px 11px; border-radius:20px; background:#131317; border:1px solid #26262d; color:#ccc; font-size:13px; text-decoration:none; }
.ts-sizes a:hover, .ts-sizes a.on { border-color:#ff003c; color:#fff; }
.ts-bar { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; font-size:14px; color:#aaa; }
.ts-bar a { color:#ff5c7f; }

/* Карточки: белое поле с фото, на нём остаток и бренд; ниже название, цена справа, кнопка во всю ширину */
.ts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:22px 18px; }
.tc { display:flex; flex-direction:column; gap:10px; }
.tc-img { position:relative; background:#e9ebee; border-radius:14px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.tc-img img { max-width:86%; max-height:78%; object-fit:contain; }
.tc-img .noimg { color:#bbb; font-size:48px; }
/* Название — ровно 3 строки: иначе цены и кнопки в одном ряду «плавали» на разной высоте */
.tc-name { font-size:15px; line-height:1.35; color:#eee; height:calc(1.35em * 3); overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.tc-price { margin-top:auto; text-align:right; font-family:Montserrat,sans-serif; font-size:21px; font-weight:800; }
.tc-price small { display:block; font-family:Roboto,sans-serif; font-weight:400; font-size:12.5px; color:#999; }
.tc-btn { width:100%; padding:12px; border-radius:10px; border:0; background:#ff003c; color:#fff; font-weight:700; font-size:15px; cursor:pointer; }
.tc-btn:hover { background:#e00035; }

.ts-pages { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:30px 0 10px; }
.ts-pages a, .ts-pages span { min-width:40px; padding:9px 12px; text-align:center; border-radius:9px; background:#16161b; border:1px solid #2a2a31; color:#ddd; text-decoration:none; }
.ts-pages .on { background:#ff003c; border-color:#ff003c; color:#fff; }
.ts-empty { padding:40px 20px; text-align:center; color:#aaa; border:1px dashed #333; border-radius:14px; }

.tm { position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:2000; padding:16px; }
.tm.open { display:flex; }
.tm-box { width:100%; max-width:440px; max-height:92vh; overflow:auto; background:#15151a; border:1px solid #2c2c33; border-radius:16px; padding:20px; }
.tm-box h3 { margin:0 0 4px; font-size:18px; }
.tm-box .g { color:#aaa; font-size:14px; margin-bottom:10px; }
.tm-box label { display:block; font-size:13px; color:#aaa; margin:10px 0 5px; }
.tm-box input, .tm-box select, .tm-box textarea { width:100%; box-sizing:border-box; padding:11px; border-radius:9px; background:#0d0d10; color:#fff; border:1px solid #333; font-size:16px; font-family:inherit; }
.tm-sum { margin:12px 0; padding:12px; border-radius:10px; background:#1b1b21; font-size:14px; }
.tm-sum b { font-size:20px; }
.tm-close { float:right; background:none; border:0; color:#999; font-size:24px; cursor:pointer; line-height:1; }
.tm-note { font-size:12px; color:#888; margin-top:10px; line-height:1.5; }
.ts-hp { position:absolute; left:-9999px; }

.fbar-all { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; background:#ff003c; border:0; color:#fff; font-size:14.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.fbar-all b { background:#fff; color:#ff003c; border-radius:10px; padding:0 7px; font-size:12px; }
.fbar-car { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; background:#17171c; border:1px solid #2a2a31; color:#e6e6e6; font-size:14.5px; cursor:pointer; white-space:nowrap; }
.fbar-car:hover { border-color:#ff003c; }
.car-sizes { display:grid; gap:8px; margin-top:16px; }
/* Тип диска в окне подбора по авто: Все / Литые / Штампованные */
.car-dtype { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:3px; border:1px solid #333; border-radius:9px; }
.car-dtype button { border:0; background:none; border-radius:7px; padding:10px 4px; color:#ddd; font:inherit; font-size:14px; cursor:pointer; }
.car-dtype button.on { background:#2a2a31; color:#fff; font-weight:700; }
html[data-theme="light"] .car-dtype { border-color:#cfd3d9; }
html[data-theme="light"] .car-dtype button { color:#16181c; }
html[data-theme="light"] .car-dtype button.on { background:#f1f2f4; }
.car-sizes a { display:block; padding:12px 14px; border-radius:10px; background:#1b1b21; border:1px solid #ff003c; color:#fff; text-decoration:none; }
.car-sizes a.none { border-color:#333; opacity:.7; }
.car-sizes a b { font-size:17px; margin-right:8px; }
.car-sizes a span { font-size:13px; color:#aaa; }
.car-sizes p a { color:#ff5c7f; }
a.tc-img, a.tc-name { text-decoration:none; color:inherit; }
a.tc-name:hover { color:#fff; text-decoration:underline; }
.tc-dlv { font-size:12.5px; color:#7fd99a; text-decoration:none; }
a.tc-dlv:hover { text-decoration:underline; }
.ts-addr { color:inherit; text-decoration:underline dotted; }
/* Код товара — по нему менеджер находит шину в CRM, когда клиент звонит */
.tc-code { font-size:11.5px; color:#777; margin-top:-6px; }
.tp-code { font-size:13px; color:#999; margin:-6px 0 12px; }
.tp-code b { color:#ddd; }
/* Остаток — на фото, в правом нижнем углу */
.tc-img .qt { position:absolute; right:10px; top:10px; font-size:11.5px; font-weight:700; color:#1b7a3d; background:#dff3e6; padding:4px 8px; border-radius:7px; }
.tc-img .ics { position:absolute; left:10px; top:10px; display:flex; flex-direction:column; gap:6px; }
.tc-img .ic { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-style:normal; font-size:13px; font-weight:800; color:#fff; }
.tc-img .ic.w { background:#4dabf7; } .tc-img .ic.a { background:#20c997; } .tc-img .ic.s { background:#ffb020; }
.tc-img .ic.sp { background:#fff; color:#e8590c; border:2px solid #e8590c; font-size:12px; }
.tc-img .ic.rf { background:#343a40; font-size:10px; }
.tc-img .prs { position:absolute; left:10px; bottom:10px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.tc-img .pr { font-size:11.5px; font-weight:700; color:#fff; background:#ff003c; padding:4px 8px; border-radius:7px; }
.tc-img .pr.st { background:#fff; color:#33373d; border:1px solid #dcdfe4; font-weight:600; }

/* «Все фильтры»: на телефоне — на весь экран, кнопки внизу под пальцем */
.af { position:fixed; inset:0; z-index:2100; background:rgba(0,0,0,.7); display:none; }
.af.open { display:flex; justify-content:center; align-items:flex-start; padding:40px 16px; overflow:auto; }
.af-box { width:100%; max-width:1100px; background:#121216; border:1px solid #2a2a31; border-radius:18px; display:flex; flex-direction:column; }
.af-head { display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid #24242a; }
.af-head h2 { margin:0; font-size:24px; font-family:Montserrat,sans-serif; }
.af-x { background:none; border:0; color:#aaa; font-size:32px; line-height:1; cursor:pointer; padding:0 6px; }
.af-body { padding:18px 22px; columns:3 300px; column-gap:16px; }
.fs { break-inside:avoid; margin:0 0 12px; background:#18181e; border:1px solid #26262d; border-radius:12px; }
.fs summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:14px 16px; font-size:15.5px; font-weight:500; }
.fs summary::-webkit-details-marker { display:none; }
.fs summary i { margin-left:auto; font-size:12px; color:#888; transition:transform .15s; }
.fs[open] summary i { transform:rotate(180deg); }
.fs summary b { background:#ff003c; color:#fff; border-radius:10px; padding:0 7px; font-size:12px; }
.fs-list { display:grid; grid-template-columns:repeat(4, 1fr); gap:2px 8px; padding:0 12px 12px; max-height:260px; overflow:auto; }
.fs-radio { grid-template-columns:1fr; }
.fs-list label { display:flex; align-items:center; gap:8px; padding:7px 4px; font-size:14.5px; color:#ddd; cursor:pointer; min-height:34px; }
.fs-list input { width:19px; height:19px; accent-color:#ff003c; flex:none; }
.fs-price { display:flex; gap:10px; padding:0 14px 14px; }
.fs-price input { flex:1; min-width:0; padding:11px; border-radius:9px; background:#0d0d10; color:#fff; border:1px solid #333; font-size:16px; }
.af-foot { display:flex; gap:10px; justify-content:flex-end; padding:14px 22px; border-top:1px solid #24242a; background:#121216; border-radius:0 0 18px 18px; position:sticky; bottom:0; }
.af-reset { padding:13px 20px; border-radius:10px; background:#1f1f26; color:#ddd; text-decoration:none; font-weight:600; }
.af-apply { padding:13px 26px; border-radius:10px; background:#ff003c; color:#fff; border:0; font-weight:700; font-size:15px; cursor:pointer; }

/* Карточка шины */
.tp { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:28px; align-items:start; }
.tp-img { background:#e9ebee; border-radius:16px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.tp-img img { max-width:86%; max-height:86%; object-fit:contain; }
.tp-h1 { font-size:clamp(21px,2.6vw,28px) !important; color:#fff !important; margin:0 0 12px !important; }
.tp-price { font-family:Montserrat,sans-serif; font-size:32px; font-weight:800; }
.tp-price span { font-size:15px; font-weight:400; color:#999; }
.tp-set { color:#ccc; margin:4px 0 14px; }
.tp-dlv { padding:12px 14px; border-radius:12px; background:rgba(33,194,107,.08); border:1px solid rgba(33,194,107,.3); color:#bff0cf; margin-bottom:10px; }
.tp-dlv i { color:#7fd99a; margin-right:6px; }
.tp-dlv small { display:block; color:#8fbf9f; margin-top:3px; }
.tp-stock { font-size:14px; color:#7fd99a; margin-bottom:14px; display:flex; flex-wrap:wrap; gap:6px 14px; }
.tp-stock span { color:#aaa; }
.tp-btn { font-size:17px; padding:15px; margin-bottom:18px; }
/* Общие стили сайта красят любые таблицы как прайс (капс, моноширинный шрифт, фон) — здесь обычный список характеристик */
.ts table.tp-specs { width:100%; border-collapse:collapse; font-size:14.5px; background:none; border:0; box-shadow:none; }
.ts .tp-specs th, .ts .tp-specs td { text-align:left; padding:9px 0; border:0; border-bottom:1px solid #222; background:none;
    font-family:Roboto,sans-serif; text-transform:none; letter-spacing:0; color:#eee; font-size:14.5px; }
.ts .tp-specs th { color:#999; font-weight:400; width:48%; }
.tp-h2 { font-size:20px; margin:30px 0 12px; }
.tp-same { flex-wrap:wrap !important; }
@media (max-width: 860px) { .tp { grid-template-columns:1fr; gap:16px; } .tp-img { max-width:420px; width:100%; margin:0 auto; } }

@media (max-width: 560px) {
    .ts { padding-top:90px; }
    .af.open { padding:0; }
    .af-box { max-width:none; min-height:100%; border-radius:0; border:0; }
    .af-head { position:sticky; top:0; background:#121216; z-index:2; padding:14px 16px; }
    .af-head h2 { font-size:21px; }
    .af-body { columns:1; padding:12px 16px 90px; }
    .fs-list { grid-template-columns:repeat(3, 1fr); max-height:none; }
    .af-foot { position:fixed; left:0; right:0; bottom:0; border-radius:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
    .af-reset { flex:1; text-align:center; } .af-apply { flex:2; }
    /* Форма заказа — шторкой снизу */
    .tm.open { align-items:flex-end; padding:0; }
    .tm-box { max-width:none; border-radius:18px 18px 0 0; max-height:94vh; padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
    .tp-price { font-size:28px; }
    /* Как у Авторуси в телефоне: две иконки — сортировка слева, фильтры справа; всё остальное в панели */
    .ts form.fbar { flex-wrap:nowrap; }
    .ts form.fbar .fc:not(.fc-sort) { display:none; }
    .fc-sort summary .t, .fc-sort summary .fa-chevron-down { display:none; }
    .fc-sort summary { padding:11px 14px; font-size:17px; }
    .fbar-car { padding:11px 14px; font-size:17px; }
    .fbar-car .t { display:none; }
    .fbar-all { margin-left:auto; padding:11px 14px; }
    .fbar-all .t { display:none; }
    .fbar-all i { font-size:17px; }
    .fbar-reset { order:2; padding:10px 6px; }
    .fbar-all { order:3; }
    /* Строка фильтров листается вбок, поэтому список открывается шторкой снизу, а не под кнопкой */
    .fc-pop { position:fixed; left:0; right:0; bottom:0; top:auto; max-width:none; border-radius:16px 16px 0 0; padding:16px 16px 20px; }
    .fc-list { max-height:55vh; }
    /* Ходовые размеры — одной строкой вбок, иначе на телефоне они занимают весь первый экран */
    .ts-sizes { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
    .ts-sizes a { white-space:nowrap; }
    /* minmax(0, 1fr): колонка не распирается содержимым — иначе при крупном шрифте айфона правая плитка уезжала за экран */
    .ts-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 10px; }
    .tc { min-width:0; }
    .tc-av { padding:6px 7px; }
    .tc-av-row { font-size:11.5px; gap:4px; }
    .tc-av-row span { white-space:nowrap; }
    .tc-av-row em { display:none; }   /* остаток виден в плашке «N шт» на фото */
    .tc-name { font-size:13.5px; height:calc(1.35em * 4); -webkit-line-clamp:4; }
    .tc-price { font-size:18px; }
    .tc-btn { font-size:14px; padding:11px 6px; }
    .tc-img .ics { left:8px; top:8px; gap:4px; } .tc-img .ic { width:24px; height:24px; font-size:11px; }
    .tc-img .prs { left:6px; bottom:6px; gap:3px; } .tc-img .pr { font-size:10px; padding:2px 5px; }
    .tc-img .qt { right:6px; top:6px; font-size:10px; padding:2px 5px; }
}

/* ===== Светлая страница каталога (только в светлой теме сайта) =====
   Фото шин сняты на белом — на тёмном фоне они горели белыми квадратами.
   Как у крупных магазинов шин: светлый каталог, шапка и подвал сайта остаются тёмными. */
html[data-theme="light"] .ts { background:#f3f4f6; color:#1b1d21; }
html[data-theme="light"] .ts h1, html[data-theme="light"] .ts h2, html[data-theme="light"] .ts .tp-h1 { color:#16181c !important; text-shadow:none !important; -webkit-text-fill-color:currentColor; background:none; }
html[data-theme="light"] .ts h1 em { color:#e3002d; }
html[data-theme="light"] .ts-crumbs, html[data-theme="light"] .ts-crumbs a { color:#7a7f87; }
html[data-theme="light"] .ts-lead { color:#4a4f57; }
html[data-theme="light"] .ts-lead b { color:#16181c; }
html[data-theme="light"] .ts-ok { background:#e9f8ef; border-color:#9bd9b2; color:#1d5e36; }
html[data-theme="light"] .ts-err { background:#fdecef; border-color:#f3a3b3; color:#8a1030; }
html[data-theme="light"] .fc summary, html[data-theme="light"] .fbar-car { background:#fff; border-color:#dcdfe4; color:#23262b; }
html[data-theme="light"] .fc summary i { color:#8a8f98; }
html[data-theme="light"] .fc-pop { background:#fff; border-color:#dcdfe4; box-shadow:0 14px 40px rgba(0,0,0,.14); }
html[data-theme="light"] .fc-list label { color:#23262b; }
html[data-theme="light"] .fc-list label:hover { background:#f1f3f5; }
html[data-theme="light"] .fbar-reset { color:#6b7079; }
html[data-theme="light"] .fbar-reset:hover { color:#16181c; }
html[data-theme="light"] .ts-sizes a { background:#fff; border-color:#dcdfe4; color:#33373d; }
html[data-theme="light"] .ts-sizes a:hover, html[data-theme="light"] .ts-sizes a.on { border-color:#e3002d; color:#e3002d; }
html[data-theme="light"] .ts-bar { color:#6b7079; }
html[data-theme="light"] .ts-bar a { color:#e3002d; }
html[data-theme="light"] .tc { background:#fff; border-radius:16px; padding:10px 10px 12px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
html[data-theme="light"] .tc-img { background:#fff; }
html[data-theme="light"] .tc-name { color:#1b1d21; }
html[data-theme="light"] a.tc-name:hover { color:#e3002d; }
html[data-theme="light"] .tc-code { color:#9aa0a8; }
html[data-theme="light"] .tc-dlv { color:#1f8a4c; }
html[data-theme="light"] .tc-price { color:#16181c; }
html[data-theme="light"] .tc-price small { color:#8a8f98; }
html[data-theme="light"] .tc-btn { background:#e3002d; }
html[data-theme="light"] .tc-btn:hover { background:#c70027; }
html[data-theme="light"] .ts-pages a, html[data-theme="light"] .ts-pages span { background:#fff; border-color:#dcdfe4; color:#33373d; }
html[data-theme="light"] .ts-pages .on { background:#e3002d; border-color:#e3002d; color:#fff; }
html[data-theme="light"] .ts-empty { color:#6b7079; border-color:#cfd3d9; background:#fff; }
html[data-theme="light"] .tp-img { background:#fff; }
html[data-theme="light"] .tp-price { color:#16181c; }
html[data-theme="light"] .tp-price span, html[data-theme="light"] .tp-set { color:#555a62; }
html[data-theme="light"] .tp-code { color:#8a8f98; } .tp-code b { color:#16181c; }
html[data-theme="light"] .tp-dlv { background:#e9f8ef; border-color:#b5e3c6; color:#1d5e36; }
html[data-theme="light"] .tp-dlv i { color:#1f8a4c; } .tp-dlv small { color:#4b7a5d; }
html[data-theme="light"] .tp-stock { color:#1f8a4c; }
html[data-theme="light"] .ts .tp-specs th, html[data-theme="light"] .ts .tp-specs td { color:#23262b; border-bottom-color:#e3e5e9; }
html[data-theme="light"] .ts .tp-specs th { color:#7a7f87; }
html[data-theme="light"] .ts .tp-same a { background:#fff; }
/* Панель «Все фильтры» и формы — тоже светлые */
html[data-theme="light"] .af-box, html[data-theme="light"] .af-head, html[data-theme="light"] .af-foot { background:#fff; border-color:#e3e5e9; color:#1b1d21; }
html[data-theme="light"] .af-head h2 { color:#16181c !important; text-shadow:none !important; }
html[data-theme="light"] .af-x { color:#6b7079; }
html[data-theme="light"] .fs { background:#f6f7f9; border-color:#e3e5e9; }
html[data-theme="light"] .fs summary { color:#1b1d21; }
html[data-theme="light"] .fs-list label { color:#23262b; }
html[data-theme="light"] .fs-price input { background:#fff; color:#16181c; border-color:#cfd3d9; }
html[data-theme="light"] .af-reset { background:#eef0f3; color:#33373d; }
html[data-theme="light"] .af-apply { background:#e3002d; }
html[data-theme="light"] .tm-box { background:#fff; border-color:#e3e5e9; color:#1b1d21; }
html[data-theme="light"] .tm-box h3 { color:#16181c; }
html[data-theme="light"] .tm-box .g, html[data-theme="light"] .tm-box label, html[data-theme="light"] .tm-note { color:#6b7079; }
html[data-theme="light"] .tm-box input, html[data-theme="light"] .tm-box select, html[data-theme="light"] .tm-box textarea { background:#fff; color:#16181c; border-color:#cfd3d9; }
html[data-theme="light"] .tm-sum { background:#f3f4f6; color:#1b1d21; }
html[data-theme="light"] .car-sizes a { background:#f6f7f9; color:#16181c; border-color:#e3002d; }
html[data-theme="light"] .car-sizes a.none { border-color:#dcdfe4; }
html[data-theme="light"] .car-sizes a span { color:#6b7079; }

/* Плашки акции: на компьютере — на фото, на телефоне — строкой под фото
   (на узкой карточке две плашки и остаток на фото наезжали друг на друга) */
.tc-pills { display:none; }
.tc-img .fg { position:absolute; right:10px; bottom:10px; line-height:0; }
.tc-img .fg .flag { border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.tc-pills .pr { font-size:10.5px; font-weight:700; color:#fff; background:#e3002d; padding:3px 7px; border-radius:6px; white-space:nowrap; }
.tc-pills .pr.st { background:#f1f3f5; color:#33373d; }
@media (max-width: 560px) {
    .tc-img .prs { display:none; }
    .tc-pills { display:flex; flex-wrap:wrap; gap:4px; margin-top:-4px; }
}

.ts-perks { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:36px; }
.ts-perks div { padding:16px; border-radius:12px; background:#fff; border:1px solid #e6e8ec; font-size:14px; color:#555a62; line-height:1.5; }
.ts-perks b { display:block; color:#16181c; margin-bottom:4px; }
.ts-perks i { color:#e3002d; margin-right:6px; }
/* «Подбор по авто» на телефоне — кнопкой с текстом во всю ширину: иконку машинки никто не узнавал */
@media (max-width: 560px) {
    .ts form.fbar { flex-wrap:wrap; }
    .ts form.fbar .fbar-car { order:-1; flex:1 1 100%; justify-content:center; padding:12px; font-size:15px; font-weight:700;
        background:#fff; border:2px solid #e3002d; color:#e3002d; }
    .ts form.fbar .fbar-car .t { display:inline; }
}
/* ===== Светлые шапка и подвал — только на странице шин =====
   Стили шапки и подвала выводятся ниже по странице, поэтому здесь
   селекторы с body.page-light: они весомее и перебивают тёмные. */
body.page-light { background:#f3f4f6; }
/* Красная неоновая полоса под шапкой (border-image из style.css) на белом выглядела грязным штрихом */
body.page-light .header, body.page-light .header.scrolled { background:rgba(255,255,255,.97); border-image:none; border-bottom:1px solid #e3e5e9; box-shadow:none; }
body.page-light .header.scrolled { box-shadow:0 4px 18px rgba(0,0,0,.08); }
body.page-light .logo img, body.page-light .mobile-logo img, body.page-light .footer-logo img { filter:brightness(0); }
body.page-light .logo-tagline { color:#6b7079; }
body.page-light .menu a { color:#33373d; }
body.page-light .menu a:hover { background:#f1f3f5; color:#16181c; }
body.page-light .menu a.active { background:#fdecef; color:#e3002d; }
body.page-light .mobile-menu-toggle, body.page-light .mobile-menu-close { color:#16181c; }
body.page-light .btn-legal { background:#fff; }
body.page-light .mobile-menu { background:#fff; box-shadow:-5px 0 20px rgba(0,0,0,.12); }
body.page-light .mobile-menu-header, body.page-light .mobile-menu-buttons { border-color:#e3e5e9; }
body.page-light .mobile-nav a { color:#33373d; }
body.page-light .mobile-nav a:hover, body.page-light .mobile-nav a.active { background:#fdecef; color:#e3002d; }
body.page-light .footer { background:#fff; border-top:3px solid #e3002d; color:#33373d; }
body.page-light .footer::before { display:none; }
body.page-light .logo-name { color:#e3002d; text-shadow:none; }
body.page-light .logo-slogan, body.page-light .footer-description p, body.page-light .social-title { color:#6b7079; }
body.page-light .footer-title { color:#16181c; }
body.page-light .footer-link { color:#33373d; background:#f6f7f9; border-color:#e6e8ec; }
body.page-light .footer-link:hover { color:#e3002d; background:#fdecef; border-color:#f3b8c4; }
body.page-light .service-tag { color:#33373d; background:#f6f7f9; border-color:#e6e8ec; }
body.page-light .service-tag:hover { color:#e3002d; background:#fdecef; border-color:#e3002d; }
body.page-light .contact-link.phone, body.page-light .contact-text { color:#16181c; }
body.page-light .contact-label, body.page-light .contact-link, body.page-light .yandex-reviews-link { color:#6b7079; }
body.page-light .footer-bottom { border-top-color:#e6e8ec; }
body.page-light .footer-copyright, body.page-light .legal-links a { color:#7a7f87; }
body.page-light .footer-copyright > div:first-child { color:#33373d; }
body.page-light .company-info { color:#8a8f98; }

/* SEO-блок: текст, перелинковка, вопросы */
.seo { margin-top:32px; padding:22px 24px; border-radius:16px; background:#fff; border:1px solid #e6e8ec; color:#33373d; font-size:14.5px; line-height:1.6; }
.seo h2 { font-size:20px; margin:0 0 8px; }
.seo h3 { font-size:17px; margin:18px 0 8px; color:#16181c; }
.seo p { margin:0 0 12px; color:#4a4f57; }
.seo-links { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0; }
.seo-links b { font-size:13.5px; margin-right:4px; color:#16181c; }
.seo-links a { font-size:13px; padding:4px 10px; border-radius:16px; background:#f3f4f6; color:#33373d; text-decoration:none; }
.seo-links a:hover { background:#fdecef; color:#e3002d; }
.seo-faq { border-top:1px solid #eceef1; padding:10px 0; }
.seo-faq summary { cursor:pointer; font-weight:600; color:#16181c; }
.seo-faq p { margin:6px 0 0; }

/* Пункт самовывоза с картой */
.pk { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:0; margin-top:28px; border-radius:18px; overflow:hidden;
    background:#fff; border:1px solid #e6e8ec; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.pk-info { padding:22px 24px; color:#1b1d21; }
.pk-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.pk-logo { width:64px; height:64px; object-fit:contain; background:#111; border-radius:14px; padding:8px; box-sizing:border-box; }
.pk-head span { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#e3002d; }
.pk-head b { display:block; font-family:Montserrat,sans-serif; font-size:21px; color:#16181c; }
.pk ul { list-style:none; margin:0 0 16px; padding:0; display:grid; gap:9px; font-size:14.5px; color:#33373d; }
.pk li { display:flex; gap:10px; align-items:flex-start; }
.pk li i { color:#e3002d; width:16px; margin-top:3px; flex:none; text-align:center; }
.pk li a { color:#16181c; font-weight:600; text-decoration:none; }
.pk-btns { display:flex; gap:10px; flex-wrap:wrap; }
.pk-btns a { flex:1; min-width:150px; text-align:center; padding:12px; border-radius:10px; font-weight:700; text-decoration:none; font-size:14.5px; }
.pk-route { background:#e3002d; color:#fff; }
.pk-call { background:#f1f3f5; color:#16181c; }
.pk-map { min-height:320px; background:#e9ebee; }
.pk-map iframe { width:100%; height:100%; min-height:320px; border:0; display:block; }
@media (max-width: 760px) { .pk { grid-template-columns:1fr; } .pk-map, .pk-map iframe { min-height:260px; } .pk-info { padding:18px 16px; } }

/* Баннер акции — как у крупных магазинов: крупно «комплектом выгоднее», шина справа */
.ts-promo { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:22px 26px; margin:0 0 18px; border-radius:18px; background:#fff; color:#16181c; border:1px solid #eceef1;
    box-shadow:0 1px 3px rgba(0,0,0,.06); }
.ts-promo .pt { position:relative; z-index:1; }
.ts-promo .lbl { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#e3002d; background:#fdecef; padding:4px 9px; border-radius:6px; margin-bottom:8px; }
.ts-promo b { display:block; font-family:Montserrat,sans-serif; font-size:clamp(22px,3vw,32px); font-weight:800; line-height:1.1; text-transform:uppercase; }
.ts-promo em { display:block; font-style:normal; font-family:Montserrat,sans-serif; font-size:clamp(20px,2.7vw,29px); font-weight:800; line-height:1.15;
    text-transform:uppercase; color:#e3002d; margin:2px 0 8px; }
.ts-promo small { display:block; font-size:13.5px; color:#5a5f67; max-width:460px; }
.ts-promo img { height:150px; width:auto; object-fit:contain; flex:none; margin:-8px 0; }
@media (max-width: 560px) {
    .ts-promo { padding:16px; }
    .ts-promo img { position:absolute; right:-24px; bottom:-10px; height:120px; opacity:.9; }
    .ts-promo .pt { padding-right:70px; }
    .tc { padding:8px 8px 10px; }
}

/* Переключатель «Шины | Диски» над заголовком каталога */
.shop-tabs { display:inline-flex; gap:4px; padding:4px; margin:0 0 12px; border-radius:12px; background:#e9ebee; }
.shop-tabs a { padding:8px 18px; border-radius:9px; font-weight:700; font-size:14.5px; color:#4a4f57; text-decoration:none; }
.shop-tabs a.on { background:#fff; color:#e3002d; box-shadow:0 1px 3px rgba(0,0,0,.1); }
/* Строка поиска над фильтрами — как у крупных магазинов */
.ts-search { display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:6px 6px 6px 14px; background:#fff; border:2px solid #e3002d; border-radius:12px; max-width:760px; }
.ts-search i { color:#8a8f98; }
.ts-search input { flex:1; min-width:0; border:0; outline:0; background:none; font-size:16px; padding:8px 4px; color:#16181c; }
.ts-search button { border:0; background:#e3002d; color:#fff; font-weight:700; font-size:15px; padding:10px 18px; border-radius:9px; cursor:pointer; }
@media (max-width: 560px) { .ts-search { max-width:none; } .ts-search button { padding:10px 14px; } }
/* Первый заход в каталог: подбор, акция строкой и «Популярные» — без повторов */
.ts-picker { margin:4px 0 18px; }
.ts-strip { display:flex; gap:11px; align-items:flex-start; background:#fff4f6; border:1px solid #ffd4dd; border-radius:10px;
            padding:11px 14px; margin:0 0 18px; font-size:14px; line-height:1.45; color:#4a3a3e; }
.ts-strip i { color:#e3002d; font-size:17px; margin-top:1px; flex:none; }
.ts-strip b { color:#16181c; }
.ts .ts-h2 { font-family:Montserrat,sans-serif; font-size:21px; margin:8px 0 14px; }

/* ===== Тёмная тема (по умолчанию на сайте) для блоков, нарисованных только светлыми ===== */
html[data-theme="dark"] .seo { background:#151515; border-color:rgba(255,255,255,.08); color:#cfcfcf; }
html[data-theme="dark"] .seo h2, html[data-theme="dark"] .seo h3, html[data-theme="dark"] .seo-links b, html[data-theme="dark"] .seo-faq summary { color:#f0f0f0; }
html[data-theme="dark"] .seo p { color:#b5b5b5; }
html[data-theme="dark"] .seo-links a { background:rgba(255,255,255,.06); color:#d6d6d6; }
html[data-theme="dark"] .seo-links a:hover { background:rgba(255,0,60,.15); color:#ff5c7f; }
html[data-theme="dark"] .seo-faq { border-top-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .pk { background:#151515; border-color:rgba(255,255,255,.08); box-shadow:none; }
html[data-theme="dark"] .pk-info, html[data-theme="dark"] .pk ul { color:#d6d6d6; }
html[data-theme="dark"] .pk-head b, html[data-theme="dark"] .pk li a { color:#f0f0f0; }
html[data-theme="dark"] .pk-head span, html[data-theme="dark"] .pk li i { color:#ff3366; }
html[data-theme="dark"] .pk-call { background:rgba(255,255,255,.08); color:#f0f0f0; }
html[data-theme="dark"] .pk-route { background:#ff003c; }
html[data-theme="dark"] .pk-map { background:#1e1e1e; }
html[data-theme="dark"] .ts-promo { background:#151515; color:#f0f0f0; border-color:rgba(255,255,255,.08); box-shadow:none; }
html[data-theme="dark"] .ts-promo .lbl { background:rgba(255,0,60,.15); color:#ff5c7f; }
html[data-theme="dark"] .ts-promo small { color:#b5b5b5; }
html[data-theme="dark"] .shop-tabs { background:rgba(255,255,255,.06); }
html[data-theme="dark"] .shop-tabs a { color:#b5b5b5; }
html[data-theme="dark"] .shop-tabs a.on { background:#1e1e1e; color:#ff5c7f; box-shadow:none; }
html[data-theme="dark"] .ts-search { background:#151515; border-color:#ff003c; }
html[data-theme="dark"] .ts-search input { color:#f0f0f0; }
html[data-theme="dark"] .ts-search button { background:#ff003c; }
html[data-theme="dark"] .ts-strip { background:rgba(255,0,60,.08); border-color:rgba(255,0,60,.3); color:#d6d6d6; }
html[data-theme="dark"] .ts-strip b { color:#f0f0f0; }
html[data-theme="dark"] .ts-strip i { color:#ff3366; }
html[data-theme="dark"] .ts .ts-h2 { color:#f0f0f0; }
html[data-theme="dark"] .tc-code { color:#8f8f8f; }
html[data-theme="dark"] .tc-pills .pr.st { background:rgba(255,255,255,.1); color:#e6e6e6; }
html[data-theme="dark"] .ts-perks div { background:#151515; border-color:rgba(255,255,255,.08); color:#b5b5b5; }
html[data-theme="dark"] .ts-perks b { color:#f0f0f0; }
@media (max-width: 560px) {
    html[data-theme="dark"] .ts form.fbar .fbar-car { background:#151515; }
}html[data-theme="dark"] .tp-code b { color:#f0f0f0; }

/* Поиск под блоком подбора на первом заходе: той же ширины, что подбор, и спокойнее
   основной строки — тонкая рамка, кнопка тёмная, чтобы не спорить с «Показать шины» */
.ts-search.lite { max-width:470px; margin:-6px auto 20px; border-width:1px; padding:5px 5px 5px 14px; box-shadow:none; }
.ts-search.lite input { font-size:15px; padding:7px 4px; }
.ts-search.lite button { padding:9px 16px; font-size:14px; }
html[data-theme="light"] .ts-search.lite { border-color:#dcdfe3; background:#fff; }
html[data-theme="light"] .ts-search.lite button { background:#16181c; }
html[data-theme="dark"] .ts-search.lite { border-color:rgba(255,255,255,.14); background:#151515; }
html[data-theme="dark"] .ts-search.lite button { background:#2a2a2a; color:#f0f0f0; }
/* Баннеры брендов над подбором: на компьютере два рядом, на телефоне листаются */
.bb { position:relative; margin:4px 0 14px; }
.bb-track { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:12px; }
.bb-track::-webkit-scrollbar { display:none; }
.bb-slide { position:relative; flex:0 0 100%; scroll-snap-align:start; border-radius:12px; overflow:hidden; display:block; }
.bb-slide img { display:block; width:100%; height:auto; aspect-ratio:1400/575; }
.bb-rec { position:absolute; top:10px; right:10px; background:#e3002d; color:#fff; font-weight:600; font-size:13px; line-height:1; padding:7px 11px;
    border-radius:20px; box-shadow:0 2px 8px rgba(0,0,0,.25); white-space:nowrap; }
.bb-rec i { margin-right:4px; }
.bb-dots { position:absolute; left:0; right:0; bottom:9px; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.bb-dots button { width:8px; height:8px; padding:0; border:0; border-radius:4px; background:rgba(255,255,255,.6);
    box-shadow:0 0 3px rgba(0,0,0,.35); cursor:pointer; pointer-events:auto; transition:width .2s; }
.bb-dots button.on { width:20px; background:#fff; }
.bb-static .bb-dots { display:none; }
@media (min-width:900px) {
    .bb-slide { flex-basis:calc(50% - 6px); }
}
@media (max-width:520px) {
    .bb-rec { top:7px; right:7px; font-size:11px; padding:5px 8px; }
}

/* ===== Корзина и сравнение ===== */
.tc-acts { display:flex; gap:8px; }
.tc-acts .tc-btn { flex:1; }
.tc-btn.in { background:#1e9e58; }
.tc-btn.in:hover { background:#188a4c; }
.tc-cmp { flex:none; width:46px; border-radius:10px; border:1px solid #33333b; background:transparent; color:#aaa; font-size:16px; cursor:pointer; }
.tc-cmp:hover { border-color:#ff003c; color:#ff003c; }
.tc-cmp.on { background:#ff003c; border-color:#ff003c; color:#fff; }
.tp-buy { display:flex; gap:10px; align-items:stretch; margin:14px 0; flex-wrap:wrap; }
.tp-buy label { display:flex; align-items:center; gap:8px; font-size:14px; color:#aaa; }
.tp-buy select { height:46px; padding:0 10px; border-radius:10px; border:1px solid #33333b; background:#0d0d10; color:#fff; font-size:16px; }
.tp-buy .tp-btn { flex:1; min-width:180px; width:auto; margin:0; }
.tp-buy .tc-cmp { height:46px; }

.sbar { position:fixed; right:16px; bottom:16px; z-index:1500; display:inline-flex; align-items:center; gap:8px; padding:12px 18px;
    border-radius:30px; background:#ff003c; color:#fff; font-weight:700; font-size:15px; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.3); }
.sbar[hidden] { display:none; }
.sbar:hover { background:#e00035; color:#fff; }
.sbar-cmp { right:auto; left:16px; background:#23262b; }
.sbar-cmp:hover { background:#34383f; }
.stoast { position:fixed; left:50%; bottom:78px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; z-index:1600;
    background:#16181c; color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; transition:.25s; max-width:calc(100vw - 32px); }
.stoast.on { opacity:1; transform:translate(-50%, 0); }

.ck .cab-card h2 { margin:0 0 12px; font-size:19px; }
.ck-empty .ck-go { display:inline-flex; width:auto; padding:11px 18px; gap:8px; text-decoration:none; margin:6px 6px 0 0; }
.ck-empty .ck-alt { background:#23262b; }
.ck-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #e3e5e8; }
.ck-row.gone { opacity:.6; }
.ck-img { flex:none; width:64px; height:64px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:8px; }
.ck-img img { max-width:100%; max-height:100%; object-fit:contain; }
.ck-info { flex:1; min-width:0; }
.ck-name { font-weight:700; color:#16181c; text-decoration:none; line-height:1.3; }
.ck-name:hover { color:#e3002d; }
.ck-meta { font-size:13px; color:#6b7079; margin-top:3px; }
.ck-qty select { height:40px; padding:0 8px; border-radius:8px; border:1px solid #cfd3d9; font-size:15px; background:#fff; color:#16181c; }
.ck-sum { width:96px; text-align:right; font-weight:700; white-space:nowrap; }
.ck-del button { width:34px; height:34px; border-radius:8px; border:0; background:transparent; color:#9aa0a8; cursor:pointer; font-size:16px; }
.ck-del button:hover { color:#e3002d; background:#fff0f3; }
.ck-total { display:flex; align-items:baseline; justify-content:flex-end; gap:10px; padding-top:14px; font-size:18px; }
.ck-total b { font-size:22px; }
.ck-total span { color:#6b7079; font-size:14px; }
.ck-promo { margin:12px 0 0; }
.ck-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ck-form label { display:flex; flex-direction:column; gap:5px; font-size:13px; color:#6b7079; }
.ck-form label small { color:#9aa0a8; }
.ck-form input[type=text], .ck-form input[type=tel], .ck-form input:not([type]) { height:44px; border:1px solid #cfd3d9; border-radius:8px; padding:0 12px; font-size:16px; color:#16181c; background:#fff; }
.ck-check { flex-direction:row !important; align-items:center; gap:8px !important; margin:14px 0 4px; font-size:15px !important; color:#23262b !important; }
.ck-check input { width:18px; height:18px; accent-color:#e3002d; }
.ck-ch { margin:14px 0 6px; }
.ck-lbl { font-size:13px; color:#6b7079; margin-bottom:8px; }
.ck-ch label { flex-direction:row !important; align-items:center; gap:8px !important; display:inline-flex !important; padding:10px 14px; border:1px solid #d8dbe0;
    border-radius:10px; margin:0 8px 8px 0; cursor:pointer; font-size:15px !important; color:#23262b !important; }
.ck-ch label.on { border-color:#e3002d; background:#fff4f6; }
.ck-ch input { accent-color:#e3002d; }
.ck-ch .lg { background:#0077ff; color:#fff; font-weight:800; font-size:11px; padding:2px 5px; border-radius:5px; }
.ck-ch small { color:#9aa0a8; }
.ck-ch .fa-telegram { color:#229ed9; }
.ck-submit { margin-top:12px; font-size:16px; padding:14px; }
.ck-line + .ck-line { margin-top:12px; padding-top:12px; border-top:1px solid #e3e5e8; }
.ck-foot { margin-top:12px; }
.ck-st { font-weight:700; }
.ck-st.st-arrived, .ck-st.st-done { color:#1e9e58; }
.ck-st.st-cancelled { color:#9aa0a8; }
.ck-tgbig .lg { color:#229ed9; font-size:26px; background:none; }
@media (max-width:600px) {
    .ck-grid { grid-template-columns:1fr; }
    .ck-row { flex-wrap:wrap; }
    .ck-info { flex-basis:calc(100% - 76px); }
    .ck-qty { margin-left:76px; }
    .ck-sum { flex:1; }
    .sbar { right:12px; bottom:12px; padding:11px 15px; }
    .sbar-cmp { left:12px; }
}

.cmp-diff { float:right; font-size:14px; font-weight:400; display:inline-flex; gap:6px; align-items:center; cursor:pointer; }
.ts-h2 small { font-weight:400; color:#888; font-size:.7em; }
.cmp-wrap { overflow-x:auto; margin-bottom:28px; border-radius:12px; }
.cmp { border-collapse:collapse; min-width:100%; font-size:14px; }
.cmp th { text-align:left; font-weight:600; color:#888; padding:10px 12px; white-space:nowrap; position:sticky; left:0; background:#0f0f12; z-index:1; }
.cmp td { padding:10px 12px; min-width:170px; max-width:220px; vertical-align:top; border-left:1px solid #26262c; }
.cmp tr + tr td, .cmp tr + tr th { border-top:1px solid #26262c; }
.cmp-head td { position:relative; }
.cmp-img { display:flex; height:120px; align-items:center; justify-content:center; background:#fff; border-radius:10px; margin-bottom:8px; }
.cmp-img img { max-height:110px; max-width:100%; object-fit:contain; }
.cmp-name { font-weight:700; color:inherit; text-decoration:none; line-height:1.3; display:block; }
.cmp-x { position:absolute; top:4px; right:6px; width:28px; height:28px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; z-index:2; }
.cmp-price b { font-size:17px; display:block; }
.cmp-price small { color:#888; }
.cmp-price td.best b { color:#1e9e58; }
.cmp tr.diff td { font-weight:600; }
.cmp-wrap.only-diff tr.same { display:none; }
.cmp-buy .tc-btn { font-size:14px; padding:10px; }

html[data-theme="light"] .tc-cmp { border-color:#d8dbe0; color:#6b7079; background:#fff; }
html[data-theme="light"] .tc-cmp.on { background:#e3002d; border-color:#e3002d; color:#fff; }
html[data-theme="light"] .tp-buy label { color:#6b7079; }
html[data-theme="light"] .tp-buy select { background:#fff; color:#16181c; border-color:#cfd3d9; }
html[data-theme="light"] .cmp th { background:#f3f4f6; color:#6b7079; }
html[data-theme="light"] .cmp td { border-left-color:#e3e5e8; background:#fff; color:#23262b; }
html[data-theme="light"] .cmp tr + tr td, html[data-theme="light"] .cmp tr + tr th { border-top-color:#e3e5e8; }
html[data-theme="light"] .cmp-img { border:1px solid #eef0f2; }
html[data-theme="dark"] .ck-row, html[data-theme="dark"] .ck-line + .ck-line { border-color:#2c2c33; }
html[data-theme="dark"] .ck-name { color:#f0f0f0; }
html[data-theme="dark"] .ck-meta, html[data-theme="dark"] .ck-total span, html[data-theme="dark"] .ck-form label, html[data-theme="dark"] .ck-lbl { color:#9aa0a8; }
html[data-theme="dark"] .ck-qty select, html[data-theme="dark"] .ck-form input[type=text], html[data-theme="dark"] .ck-form input[type=tel], html[data-theme="dark"] .ck-form input:not([type]) {
    background:#0d0d10; color:#fff; border-color:#33333b; }
html[data-theme="dark"] .ck-check, html[data-theme="dark"] .ck-ch label { color:#e6e6e6 !important; }
html[data-theme="dark"] .ck-ch label { border-color:#33333b; }
html[data-theme="dark"] .ck-ch label.on { background:rgba(255,0,60,.08); border-color:#ff003c; }
html[data-theme="dark"] .ck-del button:hover { background:rgba(255,0,60,.1); }

/* Общие стили сайта оформляют любой <form> как карточку и любую таблицу как прайс
   (моноширинный шрифт, розовые заголовки, увеличение строки при наведении) — здесь это не нужно */
.ck-qty, .ck-del { background:none; padding:0; border:0; box-shadow:none; border-radius:0; margin:0; }
.ck-form { box-shadow:none; }
.cmp { width:auto; background:none; border-radius:0; overflow:visible; border-collapse:collapse; }
.cmp th { text-transform:none; letter-spacing:0; border-bottom:0; font-size:14px; }
.cmp th::after { display:none; }
.cmp td, .cmp td:not(:first-child) { text-align:left; font-family:inherit; font-weight:400; color:inherit; border-bottom:0; }
.cmp tr.diff td { font-weight:600; }
.cmp tr:hover, .cmp tbody tr:hover { transform:none; background:none; }
.cmp-price td.best b { color:#1e9e58; }
.cmp-diff { float:none; display:flex; width:fit-content; margin:8px 0 0; font-family:inherit; }

/* Выбор МАХ в корзине — крупной карточкой с баллами */
.ck-ch .ck-maxopt { display:flex !important; width:100%; box-sizing:border-box; gap:12px !important; padding:14px 16px; margin:0 0 10px;
    border:2px solid #d8dbe0; border-radius:12px; background:linear-gradient(135deg, #f3f6ff, #f7f2ff); }
.ck-ch .ck-maxopt.on { border-color:#5b3fe0; background:linear-gradient(135deg, #e9efff, #efe6ff); }
.ck-maxopt .lg { font-size:13px !important; padding:6px 8px !important; border-radius:8px !important; background:linear-gradient(135deg, #0077ff, #7b3fe4) !important; }
.ck-maxopt .tx { flex:1; display:flex; flex-direction:column; gap:2px; }
.ck-maxopt .tx b { font-size:16px; color:#16181c; }
.ck-maxopt .tx small { font-size:13px; color:#6b7079; }
.ck-maxopt .pts { text-align:right; font-weight:800; color:#1e9e58; font-size:17px; white-space:nowrap; display:flex; flex-direction:column; }
.ck-maxopt .pts small { font-weight:400; font-size:12px; color:#6b7079; }
.ck-other { display:flex; flex-wrap:wrap; }
.cab-max .pts { margin-left:auto; margin-right:8px; background:rgba(255,255,255,.18); padding:6px 10px; border-radius:8px; font-weight:800; white-space:nowrap; }
.cab-max > span:not(.lg):not(.pts) { flex:1 1 auto; min-width:0; }
/* Телефон: баллы уходят отдельной строкой под текст, стрелка не нужна — вся кнопка нажимается */
@media (max-width:520px) {
    .cab-max { flex-wrap:wrap; gap:12px; padding:14px; }
    .cab-max .lg { width:40px; height:40px; line-height:40px; font-size:12px; }
    .cab-max > span:not(.lg):not(.pts) { flex-basis:calc(100% - 62px); }
    .cab-max b { font-size:16px; }
    .cab-max .pts { order:3; flex-basis:100%; margin:0; text-align:center; }
    .cab-max > i { display:none; }
}
html[data-theme="dark"] .ck-ch .ck-maxopt { background:linear-gradient(135deg, rgba(0,119,255,.12), rgba(123,63,228,.12)); border-color:#33333b; }
html[data-theme="dark"] .ck-ch .ck-maxopt.on { border-color:#7b3fe4; }
html[data-theme="dark"] .ck-maxopt .tx b { color:#f0f0f0; }
@media (max-width:600px) { .ck-maxopt .pts { font-size:15px; } }

/* Пустая корзина: ссылки внутри .cab-card красятся в цвет ссылки — на красной кнопке текст пропадал */
.ck-empty a.tc-btn, .ck-empty a.tc-btn:hover { color:#fff !important; text-decoration:none; }
html[data-theme="light"] .ck .ts-crumbs, html[data-theme="light"] .ck .ts-crumbs a { color:#6b7079; }

/* Подтверждение нового номера перед заказом */
.ck-confirm { margin:14px 0 4px; padding:14px 16px; border:2px dashed #7b3fe4; border-radius:12px; background:#faf7ff; }
.ck-confirm[hidden], .ck-cf-ok[hidden], .ck-cf-sms[hidden], .ck-cf-wait[hidden] { display:none; }
.ck-cf-h { font-weight:700; color:#16181c; margin-bottom:10px; }
.ck-cf-h i { color:#7b3fe4; margin-right:4px; }
.ck-cf-max { margin:0 0 10px; }
.ck-cf-alt { font-size:14px; }
.ck-cf-alt a { color:#6b7079; }
.ck-cf-sms { display:flex; gap:8px; margin-top:10px; }
.ck-cf-sms input { width:140px; height:44px; border:1px solid #cfd3d9; border-radius:8px; padding:0 12px; font-size:18px; letter-spacing:4px; }
.ck-cf-sms .tc-btn { width:auto; padding:0 18px; }
.ck-cf-err { font-size:13px; color:#c0392b; margin-top:8px; min-height:1px; }
.ck-cf-wait { font-size:14px; color:#5b3fe0; margin-top:8px; }
.ck-cf-ok { margin:14px 0 4px; padding:12px 14px; border-radius:10px; background:#eaf8ef; border:1px solid #b8e6c8; color:#1e7a45; font-weight:700; }
.ck-submit:disabled { background:#b9bcc2; cursor:not-allowed; }
html[data-theme="dark"] .ck-confirm { background:rgba(123,63,228,.08); }
html[data-theme="dark"] .ck-cf-h { color:#f0f0f0; }
html[data-theme="dark"] .ck-cf-sms input { background:#0d0d10; color:#fff; border-color:#33333b; }
html[data-theme="dark"] .ck-cf-ok { background:rgba(30,158,88,.12); border-color:rgba(30,158,88,.35); color:#7fd99a; }

/* Когда можно забрать: даты с наличием нарастающим итогом */
.tp-avail { margin:4px 0 14px; padding:12px 14px; border:1px solid #2c2c33; border-radius:12px; max-width:440px; }
.ta-h { font-size:13px; color:#7fd99a; font-weight:600; margin-bottom:8px; }
.ta-row { display:flex; align-items:baseline; gap:8px; font-size:14px; color:#aaa; padding:3px 0; }
.ta-row i { flex:1; border-bottom:1px dotted #555; transform:translateY(-3px); }
.ta-row b { color:#e6e6e6; font-weight:600; white-space:nowrap; }
.ta-row.first span, .ta-row.first b { color:#7fd99a; }
html[data-theme="light"] .tp-avail { border-color:#e3e5e8; background:#fff; }
html[data-theme="light"] .ta-h, html[data-theme="light"] .ta-row.first span, html[data-theme="light"] .ta-row.first b { color:#1f8a4c; }
html[data-theme="light"] .ta-row { color:#6b7079; }
html[data-theme="light"] .ta-row b { color:#23262b; }
html[data-theme="light"] .ta-row i { border-color:#cfd3d9; }

/* Оплата в корзине: онлайн (ЮKassa) или при получении */
.ck-pay { margin:14px 0 6px; display:flex; flex-direction:column; gap:8px; }
.ck-pay .ck-payopt { display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; text-align:left !important; gap:12px !important; width:100%; box-sizing:border-box; padding:12px 14px; margin:0;
    border:2px solid #d8dbe0; border-radius:12px; background:#fff; cursor:pointer; font-weight:400; }
.ck-pay .ck-payopt input { width:auto; margin:0; accent-color:#e3002d; }
.ck-pay .ck-payopt > i { font-size:18px; color:#e3002d; width:22px; text-align:center; }
.ck-pay .ck-payopt span { display:flex; flex-direction:column; gap:2px; }
.ck-pay .ck-payopt b { font-size:15px; color:#16181c; }
.ck-pay .ck-payopt small { font-size:12.5px; color:#6b7079; }
.ck-pay .ck-payopt.on { border-color:#e3002d; background:#fff5f7; }
.ck-pay .ck-fast { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:6px; background:#1e9e58; color:#fff; font-size:11px; font-style:normal; font-weight:700; vertical-align:2px; }
/* Пояснение про срок онлайн-оплаты — мягко, без тревожного красного */
.ck-paynote { display:flex; gap:11px; padding:12px 14px; border-radius:12px; background:#f4f8ff; border:1px solid #cfe0f7; color:#2a3240; font-size:13px; line-height:1.5; }
.ck-paynote[hidden] { display:none; }
.ck-paynote > i { color:#2f7fd1; font-size:17px; margin-top:2px; }
.ck-paynote b { display:block; font-size:14px; color:#16181c; margin-bottom:3px; }
.ck-paynote p { margin:0 0 6px !important; font-size:13px !important; line-height:1.5 !important; }
.ck-paynote p.go { margin:0; font-weight:600; color:#1e7a46; }
.ck-paynote p.go i { color:#1e9e58; }
.ck-paynote a { color:#e3002d; font-weight:700; }
html[data-theme="dark"] .ck-paynote { background:rgba(47,127,209,.1); border-color:rgba(47,127,209,.35); color:#c9d3e0; }
html[data-theme="dark"] .ck-paynote b { color:#f0f0f0; }
html[data-theme="dark"] .ck-paynote p.go { color:#5fd38d; }
html[data-theme="dark"] .ck-pay .ck-payopt { background:transparent; border-color:#33333b; }
html[data-theme="dark"] .ck-pay .ck-payopt.on { border-color:#e3002d; background:rgba(227,0,45,.08); }
html[data-theme="dark"] .ck-pay .ck-payopt b { color:#f0f0f0; }

/* Страница заказа: оплачено / оплатить онлайн */
.pay-ok { color:#1e9e58; font-weight:700; }
.pay-now { margin:14px 0 0; padding:14px; border:1px dashed #d8dbe0; border-radius:12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.pay-now.want { border:2px solid #e3002d; background:#fff5f7; }
.pay-now small { color:#6b7079; font-size:13px; }
.pay-now .tc-btn { width:auto; }
.pay-err { width:100%; color:#c0392b; font-size:13.5px; }
.pay-done { margin-top:14px; padding:12px 14px; border-radius:12px; background:#eafaf1; color:#1e7a46; font-weight:600; }
html[data-theme="dark"] .pay-now { border-color:#33333b; }
html[data-theme="dark"] .pay-now.want { background:rgba(227,0,45,.08); }
html[data-theme="dark"] .pay-done { background:rgba(30,158,88,.12); color:#6fd49a; }

/* Корзина: «Продолжить выбор» — назад к списку на то же место */
.ck-back { display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; font-weight:600; color:#e3002d; text-decoration:none; }
.ck-back:hover { text-decoration:underline; }

/* Сроки и цены по предложениям (11.10.2026): строки выбираются, как радиокнопки */
button.ta-row { width:100%; background:none; border:0; border-radius:6px; font:inherit; text-align:left; cursor:pointer; padding:4px 6px; margin:0 -6px; }
button.ta-row.on { background:rgba(127,217,154,.10); box-shadow:inset 3px 0 0 #7fd99a; }
.ta-hint { font-size:11.5px; color:#888; margin-top:6px; }
.tc-av { margin:6px 0 8px; padding:8px 10px; border:1px solid #2c2c33; border-radius:10px; }
.tc-av-row { display:flex; align-items:baseline; gap:6px; width:100%; background:none; border:0; border-radius:5px; padding:3px 4px; margin:0 -4px;
             font:inherit; font-size:12.5px; color:#aaa; text-align:left; cursor:pointer; }
.tc-av-row i { flex:1; border-bottom:1px dotted #555; transform:translateY(-3px); min-width:8px; }
.tc-av-row b { color:#e6e6e6; font-weight:700; white-space:nowrap; }
.tc-av-row em { font-style:normal; white-space:nowrap; font-size:11.5px; color:#888; }
.tc-av-row.first span, .tc-av-row.first b { color:#7fd99a; }
.tc-av-row.on { background:rgba(127,217,154,.10); }
html[data-theme="light"] .tc-av { border-color:#e3e5e8; background:#fff; }
html[data-theme="light"] .tc-av-row b { color:#1d1d1f; }
html[data-theme="light"] .tc-av-row.first span, html[data-theme="light"] .tc-av-row.first b { color:#1f8a4c; }
html[data-theme="light"] button.ta-row.on, html[data-theme="light"] .tc-av-row.on { background:rgba(31,138,76,.08); }

/* Строки сроков — кнопки: фон темы не нужен, текст читаемый в светлой теме */
.tc-av .tc-av-row, .tp-avail button.ta-row { background:transparent; box-shadow:none; }
.tc-av .tc-av-row.on { background:rgba(127,217,154,.12); }
.tp-avail button.ta-row.on { background:rgba(127,217,154,.10); box-shadow:inset 3px 0 0 #7fd99a; }
.tc-av-row em { color:#bbb; }
html[data-theme="light"] .tc-av-row, html[data-theme="light"] .tc-av-row span { color:#4a4a52; }
html[data-theme="light"] .tc-av-row em { color:#4a4a52; font-weight:600; }
html[data-theme="light"] .tc-av-row i { border-color:#c4c7cc; }
html[data-theme="light"] .tc-av .tc-av-row.on { background:rgba(31,138,76,.08); }
html[data-theme="light"] .ta-row, html[data-theme="light"] .ta-row span { color:#4a4a52; }
html[data-theme="light"] .ta-row b { color:#1d1d1f; }
html[data-theme="light"] .tp-avail button.ta-row.on { background:rgba(31,138,76,.07); box-shadow:inset 3px 0 0 #1f8a4c; }