/* ───────────────────────────────────────────────────────────────────────── Витрина «Ткани на вес» для страницы Tilda. ОФОРМЛЕНИЕ. Взято целиком из витрины «Товар партнёра» (partner-store): те же переменные, размеры, начертания, отступы и поведение на телефоне. Обе страницы магазина — часть одного сайта, и выглядеть они должны одинаково; подбирать вид заново означало бы разойтись с сайтом. шрифт сайта FuturaPT, Arial, sans-serif название товара 16px / 21.6px / 700 характеристики 14px / 21.7px / 300 цена 17px / 22px / 500 кнопка 16px / 22.4px / 600, фон #fdba73, текст #171717, радиус 6px линия-разделитель 0.8px solid #eee ВАЖНО про шрифт. У на Tilda стоит Times New Roman (Tilda задаёт шрифты классами, а не на body), поэтому `inherit` даёт засечки, а сокращённая запись `font:` с `inherit` вообще невалидна — браузер отбрасывает всё правило. Шрифт задаётся явно и только полными свойствами. ОТЛИЧИЯ от «Товара партнёра» — только там, где отличается сам товар, и собраны они в конце файла: • плашка режима продажи на фотографии (Отрезами / На метраж / На вес); • список отрезов в окне товара — покупатель выбирает конкретный кусок; • единица измерения бывает килограммом, а не только метром. Все классы имеют префикс tks- и не используют глобальные селекторы (button, form, img, *), чтобы ничего не задеть на странице магазина. ───────────────────────────────────────────────────────────────────────── */ .tks-root, .tks-popup, .tks-lightbox { --tks-font: FuturaPT, Arial, sans-serif; --tks-ink: #000000; --tks-ink-soft: #171717; --tks-muted: #6f6f74; --tks-line: #eeeeee; --tks-line-strong: #dcdcdc; --tks-bg: #ffffff; --tks-bg-soft: #f7f7f7; --tks-accent: #fdba73; --tks-accent-dark: #f8ab5a; --tks-badge: #ff4a4a; --tks-discount: #fe8f1a; --tks-ok: #2f7d55; --tks-ok-soft: #e8f4ec; --tks-warn: #8a6212; --tks-warn-soft: #fdf3e3; --tks-radius: 6px; /* Цвета способов продажи. У каждого способа свой пастельный тон, и он один и тот же везде: плашка на фотографии, бейдж в окне товара, галочки фильтра и метки в панели управления. Покупатель и приёмка узнают товар по цвету, не вчитываясь. Тона намеренно приглушённые — рядом их три, и кричать не должен ни один. */ --tks-cuts-bg: #ece7fb; --tks-cuts-ink: #55479b; --tks-cuts-line: #d9d0f5; --tks-meterage-bg: #e2f2e8; --tks-meterage-ink: #2f7150; --tks-meterage-line: #cbe6d7; --tks-weight-bg: #fdeadb; --tks-weight-ink: #9d5b1c; --tks-weight-line: #f7dcc3; /* ── Цвета карточки и окна товара ─────────────────────────────────────── Кнопка покупки — насыщенный оранжевый с белой надписью: она одна на карточке должна быть заметна издалека. Пастельный --tks-accent остался за панелью управления каталогом (кнопка «Каталог тканей», галочки) — там кнопок много, и кричать не должна ни одна. Плашки со значениями раскрашены по смыслу, а не по красоте: зелёная — то, что есть, и цена, по которой это отдаём; янтарная — пересчёт в другую единицу («≈ 145 ₽ за 1 м»); голубая — правило заказа и калькулятор: условие, а не выгода; серая — остатка нет. Один и тот же набор в карточке каталога и в окне товара. */ --tks-cta: #f97316; --tks-cta-dark: #e5670c; --tks-cta-ink: #ffffff; --tks-cta-soft: #fff1e3; --tks-good-bg: #e9f6ef; --tks-good-line: #cfe9dc; --tks-good-label: #55886e; --tks-good-ink: #1d7a4e; --tks-amber-bg: #fdf4e6; --tks-amber-line: #f3e2c6; --tks-amber-label: #9a7233; --tks-amber-ink: #8a5a16; /* Остаток на складе — свой пастельно-жёлтый, а не тёплый бежевый условий продажи: «В наличии» стоит рядом с зелёной ценой в каждой карточке и в каждом окне товара, и цвет у него должен быть один и тот же везде. Отдельные переменные затем, чтобы правка оттенка остатка не задевала плашки «Продаём на вес» и «Товар продаётся на отрез». */ --tks-stock-bg: #fdf6dc; --tks-stock-label: #8d7736; --tks-stock-ink: #7c6212; --tks-blue-bg: #eef2fb; --tks-blue-line: #dbe3f5; --tks-blue-label: #6c7c9c; --tks-blue-ink: #2f5aa8; --tks-flat-bg: #f4f3f1; --tks-flat-line: #e6e4e0; --tks-card-radius: 16px; --tks-media-radius: 12px; --tks-tile-radius: 10px; --tks-ctl-radius: 10px; } .tks-root { font-family: var(--tks-font); color: var(--tks-ink); font-size: 16px; line-height: 1.35; font-weight: 400; box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Popup и lightbox вставляются в , а не внутрь .tks-root, поэтому раньше не получали border-box и считали ширину по content-box. Из-за этого у «В корзину» ширина 100% складывалась с горизонтальными отступами, и кнопка вылезала за рамку блока покупки — и на ПК, и на телефоне. */ .tks-root *, .tks-root *::before, .tks-root *::after, .tks-popup, .tks-popup *, .tks-popup *::before, .tks-popup *::after, .tks-lightbox, .tks-lightbox *, .tks-lightbox *::before, .tks-lightbox *::after { box-sizing: border-box; } .tks-root .tks-muted { color: var(--tks-muted); } /* ── Кнопки: те же, что в блоках Tilda на сайте ─────────────────────────── */ .tks-root .tks-btn, .tks-popup .tks-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--tks-font); font-size: 14px; font-weight: 500; line-height: 19.6px; min-height: 44px; padding: 11px 24px; border: 0.8px solid var(--tks-ink-soft); border-radius: 5px; background: transparent; color: var(--tks-ink-soft); cursor: pointer; text-decoration: none; text-align: center; transition: background-color .16s ease, border-color .16s ease, color .16s ease; } .tks-root .tks-btn:hover, .tks-popup .tks-btn:hover { background: var(--tks-bg-soft); } .tks-root .tks-btn:disabled, .tks-popup .tks-btn:disabled { opacity: .5; cursor: not-allowed; } .tks-root .tks-btn--primary, .tks-popup .tks-btn--primary { background: var(--tks-accent); border-color: var(--tks-accent); color: var(--tks-ink-soft); font-size: 16px; font-weight: 600; line-height: 22.4px; border-radius: 6px; } .tks-root .tks-btn--primary:hover, .tks-popup .tks-btn--primary:hover { background: var(--tks-accent-dark); border-color: var(--tks-accent-dark); } .tks-root .tks-btn--wide, .tks-popup .tks-btn--wide { width: 100%; } /* ── Кнопка-корзина ──────────────────────────────────────────────────────── Одна кнопка на всю витрину: значок плюс надпись, насыщенный оранжевый фон, белые буквы. В карточке каталога на телефоне надпись прячется — места на неё нет, — но сама кнопка остаётся той же: те же высота, радиус и цвет. Нажатие обязано отзываться, иначе непонятно, сработало ли: значок на мгновение сменяется галочкой, надпись — словом «Добавлено», а кнопка зеленеет. Через полторы секунды всё возвращается. */ .tks-root .tks-btn--cart, .tks-popup .tks-btn--cart { position: relative; gap: 8px; padding: 0 16px; min-height: 42px; border-radius: var(--tks-ctl-radius); background: var(--tks-cta); border-color: var(--tks-cta); color: var(--tks-cta-ink); font-size: 14px; font-weight: 600; line-height: 19px; } .tks-root .tks-btn--cart:hover, .tks-popup .tks-btn--cart:hover { background: var(--tks-cta-dark); border-color: var(--tks-cta-dark); } .tks-root .tks-btn--cart .tks-cart-ico, .tks-popup .tks-btn--cart .tks-cart-ico, .tks-root .tks-btn--cart .tks-cart-ok, .tks-popup .tks-btn--cart .tks-cart-ok { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: opacity .16s ease, transform .16s ease; } /* Галочка и «Добавлено» лежат поверх обычного содержимого и проявляются на месте — так ширина кнопки при отклике не меняется. */ .tks-root .tks-btn--cart .tks-cart-ok, .tks-popup .tks-btn--cart .tks-cart-ok, .tks-root .tks-btn--cart .tks-cart-label-ok, .tks-popup .tks-btn--cart .tks-cart-label-ok { position: absolute; opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; } .tks-root .tks-btn--cart .tks-cart-ok, .tks-popup .tks-btn--cart .tks-cart-ok { inset: 0; transform: scale(.55); } .tks-root .tks-btn--cart .tks-cart-label-ok, .tks-popup .tks-btn--cart .tks-cart-label-ok { inset: 0; display: grid; place-items: center; } .tks-root .tks-btn--cart.is-added .tks-cart-ico, .tks-popup .tks-btn--cart.is-added .tks-cart-ico, .tks-root .tks-btn--cart.is-added .tks-cart-label, .tks-popup .tks-btn--cart.is-added .tks-cart-label { opacity: 0; } .tks-root .tks-btn--cart.is-added .tks-cart-ok, .tks-popup .tks-btn--cart.is-added .tks-cart-ok { opacity: 1; transform: scale(1); } /* Пока показана галочка, слова «Добавлено» рядом с ней не нужно: в узкой карточке они не помещаются, а в окне товара — дублируют друг друга. */ .tks-popup .tks-btn--cart.is-added .tks-cart-label-ok { opacity: 1; } .tks-root .tks-btn--cart.is-added, .tks-popup .tks-btn--cart.is-added { background: var(--tks-ok); border-color: var(--tks-ok); color: #fff; } /* Пока идёт добавление, кнопка заблокирована на 0,9 с — но гасить её в этот момент нельзя: именно она и показывает, что всё получилось. */ .tks-root .tks-btn--cart.is-added:disabled, .tks-popup .tks-btn--cart.is-added:disabled { opacity: 1; } .tks-added-flash { position: absolute; left: 50%; bottom: calc(100% + 7px); z-index: 6; padding: 4px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; background: var(--tks-ok); color: #fff; font-family: var(--tks-font); font-size: 12.5px; font-weight: 600; line-height: 17px; box-shadow: 0 5px 14px rgba(0, 0, 0, .18); animation: tks-added-pop 1.5s ease forwards; } @keyframes tks-added-pop { 0% { opacity: 0; transform: translate(-50%, 7px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 74% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -7px) scale(.97); } } @media (prefers-reduced-motion: reduce) { .tks-added-flash { animation-duration: .01s; opacity: 1; transform: translateX(-50%); } } /* ── Панель управления каталогом ───────────────────────────────────────── */ .tks-root .tks-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; } .tks-root .tks-search { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 380px; } .tks-root .tks-search input { width: 100%; min-height: 44px; padding: 10px 40px 10px 16px; border: 0.8px solid var(--tks-line-strong); border-radius: var(--tks-radius); background: #fff; color: var(--tks-ink); font-family: var(--tks-font); font-size: 16px; font-weight: 400; line-height: 22.4px; } .tks-root .tks-search input:focus { outline: none; border-color: var(--tks-accent); } .tks-root .tks-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-right: 22px; cursor: pointer; background: var(--tks-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 14px 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 14px 14px no-repeat; } .tks-root .tks-search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--tks-muted); pointer-events: none; } .tks-root .tks-count { margin-left: auto; color: var(--tks-muted); font-family: var(--tks-font); font-size: 14px; font-weight: 300; line-height: 21.7px; } /* ── Каталог тканей ────────────────────────────────────────────────────── */ /* Раньше разделы были рядом кнопок-плиток с поиском по ним и ссылкой «Показать все разделы». При тридцати с лишним разделах это занимало пол-экрана и позволяло выбрать только один раздел за раз. Теперь разделы живут в списке с галочками: на ПК он выпадает под кнопкой в три колонки, на телефоне открывается во весь экран. ЖИРНОСТЬ. В списке разделов её нет нигде: названия 400, количество 300. Полужирный текст на тридцати строках подряд читать невозможно. */ .tks-root .tks-pick { position: relative; flex: 0 0 auto; } .tks-root .tks-pick[hidden] { display: none; } /* Размеры кнопка берёт у поля сортировки «Сначала популярные» — та же высота, отступы, радиус и размер шрифта, — а цвет фирменный: рядом с белым полем сортировки оранжевая кнопка сразу видна и её не приходится искать. */ .tks-root .tks-pick-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 0.8px solid var(--tks-accent); border-radius: var(--tks-radius); background: var(--tks-accent); color: var(--tks-ink-soft); cursor: pointer; font-family: var(--tks-font); font-size: 16px; font-weight: 400; line-height: 22.4px; transition: border-color .16s ease, background-color .16s ease; } .tks-root .tks-pick-btn:hover { background: var(--tks-accent-dark); border-color: var(--tks-accent-dark); } .tks-root .tks-pick-btn svg { flex: 0 0 auto; color: var(--tks-ink-soft); } .tks-root .tks-pick-btn-text { white-space: nowrap; } /* Закрытый список ничем не показывает, что каталог отфильтрован, поэтому число выбранных разделов стоит прямо на кнопке. Кружок белый: на оранжевом фоне оранжевый на оранжевом был бы не виден. */ .tks-root .tks-pick-badge { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: #fff; color: var(--tks-ink-soft); font-family: var(--tks-font); font-size: 12px; font-weight: 500; line-height: 21px; } .tks-root .tks-pick-badge[hidden] { display: none; } /* ПК: список выпадает под кнопкой. Прозрачная подложка на весь экран нужна, чтобы щелчок мимо списка закрывал его. */ .tks-root .tks-pick-drop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 90; } .tks-root .tks-pick-drop[hidden] { display: none; } .tks-root .tks-pick-back { position: fixed; inset: 0; } .tks-root .tks-pick-panel { position: relative; width: min(980px, calc(100vw - 40px)); display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 0.8px solid var(--tks-line); border-radius: 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, .16); } /* Шапка «Закрыть / Каталог тканей» нужна только полноэкранному списку. */ .tks-root .tks-pick-head { display: none; } /* Высоту ограничивает и прокручивает обёртка, колонки строит сам список: у многоколоночного блока с заданной высотой лишнее содержимое уходит не вниз, а в новые колонки вправо, за край окна. */ .tks-root .tks-pick-scroll { padding: 14px 18px; max-height: min(56vh, 460px); overflow: hidden auto; } .tks-root .tks-pick-list { column-count: 3; column-gap: 28px; } .tks-root .tks-pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; font-family: var(--tks-font); font-size: 15px; font-weight: 400; line-height: 21px; color: var(--tks-ink); } .tks-root .tks-pick-row:hover .tks-pick-name { text-decoration: underline; text-underline-offset: 3px; } .tks-root .tks-pick-name { flex: 1 1 auto; min-width: 0; } .tks-root .tks-pick-count { flex: 0 0 auto; color: var(--tks-muted); font-family: var(--tks-font); font-size: 13px; font-weight: 300; line-height: 21px; } .tks-root .tks-pick-box { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--tks-accent); } /* На ПК шапка списка — одна строка: слева галочки способов продажи, справа «Сбросить» и «Показать». Раньше это были две строки одна под другой, и они вдвоём съедали высоту у самого списка разделов, ради которого окно и открывают. На телефоне обёртка становится display: contents (см. конец файла): галочки и кнопки снова делаются детьми панели, и кнопки уходят вниз экрана. */ /* Одна строка на весь отбор: «Со скидкой», «Как продаём» с пилюлями и обе кнопки справа. Раньше кнопки уезжали на вторую строку — способы продажи стояли с flex: 1 1 auto и забирали под себя весь остаток ширины, хотя занимали хорошо если половину. Теперь ширину берут по содержимому, а «Сбросить/Показать» прижаты к правому краю. */ .tks-root .tks-pick-bar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 0.8px solid var(--tks-line); background: #fff; } .tks-root .tks-pick-foot { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0; background: transparent; } .tks-root .tks-pick-reset { border: 0; background: none; cursor: pointer; padding: 10px 12px; min-height: 44px; white-space: nowrap; color: var(--tks-ink-soft); font-family: var(--tks-font); font-size: 15px; font-weight: 400; line-height: 21px; } .tks-root .tks-pick-reset:hover { text-decoration: underline; text-underline-offset: 3px; } /* Кнопка была шириной в 200 px ради одного слова — из-за неё пара «Сбросить/Показать» не помещалась в строку со способами продажи и сваливалась под них. Ширины по содержимому хватает с запасом. */ .tks-root .tks-pick-apply { min-width: 132px; min-height: 44px; padding: 11px 20px; cursor: pointer; white-space: nowrap; border: 0.8px solid var(--tks-accent); border-radius: var(--tks-radius); background: var(--tks-accent); color: var(--tks-ink-soft); font-family: var(--tks-font); font-size: 15px; font-weight: 500; line-height: 21px; transition: background-color .16s ease, border-color .16s ease; } .tks-root .tks-pick-apply:hover { background: var(--tks-accent-dark); border-color: var(--tks-accent-dark); } .tks-root .tks-pick-close { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 0; background: none; padding: 6px 4px; color: var(--tks-ink-soft); font-family: var(--tks-font); font-size: 16px; font-weight: 400; line-height: 22.4px; } /* ── Способ продажи ──────────────────────────────────────────────────────── Три галочки стоят выше разделов и всегда на виду: «нужен готовый отрез» или «нужна нарезка» — это первое, с чем покупатель приходит, и только потом он выбирает раздел. Каждая галочка своего цвета — тем же, каким помечена ткань на карточке. */ .tks-root .tks-pick-modes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 1 auto; min-width: 0; padding: 0; } /* Подпись читается наравне с самими способами продажи: мелкий светло-серый текст рядом с крупными пилюлями выглядел случайной пометкой. */ .tks-root .tks-pick-modes-label { color: var(--tks-ink); font-family: var(--tks-font); font-size: 15px; font-weight: 500; line-height: 21px; margin-right: 2px; } .tks-root .tks-pick-mode { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 7px 12px; border-radius: 50px; border: 0.8px solid var(--tks-line-strong); background: #fff; font-family: var(--tks-font); font-size: 15px; font-weight: 400; line-height: 20px; color: var(--tks-ink); transition: background-color .16s ease, border-color .16s ease; } .tks-root .tks-pick-mode:hover { background: var(--tks-bg-soft); } /* Выбранный способ заливается своим цветом — видно и без взгляда на галочку. */ .tks-root .tks-pick-mode.is-active { background: var(--tks-mode-bg, var(--tks-bg-soft)); border-color: var(--tks-mode-line, var(--tks-line-strong)); color: var(--tks-mode-ink, var(--tks-ink)); } .tks-root .tks-pick-mode .tks-pick-box { width: 17px; height: 17px; } .tks-root .tks-pick-mode-count { color: var(--tks-muted); font-family: var(--tks-font); font-size: 13px; font-weight: 300; line-height: 20px; } .tks-root .tks-pick-mode.is-active .tks-pick-mode-count { color: inherit; opacity: .75; } .tks-root .tks-pick-scroll[hidden] { display: none; } /* «Со скидкой» — первый отбор в панели. Выглядит как пилюля способа продажи, но своим цветом: за акцией приходят прицельно, и она должна находиться взглядом сразу, не сливаясь с остальными галочками. */ .tks-root .tks-pick-sale { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: 0 0 auto; padding: 7px 12px; border-radius: 50px; border: 0.8px solid #f0c7c1; background: #fdf1ef; font-family: var(--tks-font); font-size: 15px; font-weight: 500; line-height: 20px; color: #b3392f; transition: background-color .16s ease, border-color .16s ease; } .tks-root .tks-pick-sale[hidden] { display: none; } /* Скидок сейчас нет: строку видно, но нажимать нечего. */ .tks-root .tks-pick-sale.is-empty { border-color: var(--tks-line, #e4ded8); background: #f6f4f2; color: #8b837c; cursor: default; } .tks-root .tks-pick-sale.is-empty:hover { background: #f6f4f2; } .tks-root .tks-pick-sale.is-empty .tks-pick-box { accent-color: #b6aea7; } .tks-root .tks-pick-sale.is-empty .tks-pick-sale-count { color: #8b837c; } .tks-root .tks-pick-sale:hover { background: #fbe6e2; } .tks-root .tks-pick-sale.is-active { background: #f6d9d4; border-color: #dd9d93; } .tks-root .tks-pick-sale .tks-pick-box { width: 17px; height: 17px; accent-color: #b3392f; } .tks-root .tks-pick-sale-count { color: #b3392f; opacity: .7; font-family: var(--tks-font); font-size: 13px; font-weight: 400; line-height: 20px; } /* ── Способ продажи в панели каталога ────────────────────────────────────── Кнопка один в один как «Каталог тканей»: класс .tks-pick-btn общий, поэтому размеры, радиус и фирменный фон у них всегда совпадают. Это второй по важности отбор на витрине, и стоять он должен наравне с каталогом, а не белым полем рядом с сортировкой. Список свой: галочки вместо пунктов, мгновенный отклик и сколько угодно способов сразу — «отрезы и метраж» спрашивают постоянно. */ .tks-root .tks-modes { position: relative; flex: 0 0 auto; } .tks-root .tks-modes-btn { justify-content: space-between; min-width: 236px; } .tks-root .tks-modes-arrow { flex: 0 0 auto; width: 8px; height: 8px; margin: -4px 3px 0 0; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg); transition: transform .16s ease, margin .16s ease; } .tks-root .tks-modes-btn[aria-expanded="true"] .tks-modes-arrow { transform: rotate(-135deg); margin: 3px 3px 0 0; } /* Прозрачная подложка на весь экран — щелчок мимо списка закрывает его. */ .tks-root .tks-modes-drop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 90; } .tks-root .tks-modes-drop[hidden] { display: none; } .tks-root .tks-modes-back { position: fixed; inset: 0; } .tks-root .tks-modes-panel { position: relative; min-width: 100%; width: max-content; max-width: min(320px, calc(100vw - 40px)); background: #fff; border: 0.8px solid var(--tks-line); border-radius: 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, .16); overflow: hidden; } .tks-root .tks-modes-row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 11px 16px; border-bottom: 0.8px solid var(--tks-line); font-family: var(--tks-font); font-size: 15px; font-weight: 400; line-height: 21px; color: var(--tks-ink); transition: background-color .16s ease; } .tks-root .tks-modes-row:last-child { border-bottom: 0; } .tks-root .tks-modes-row:hover { background: var(--tks-bg-soft); } /* Отмеченный способ заливается своим цветом — тем же, что плашка на карточке. */ .tks-root .tks-modes-row.is-active { background: var(--tks-mode-bg, var(--tks-bg-soft)); color: var(--tks-mode-ink, var(--tks-ink)); } .tks-root .tks-modes-name { flex: 1 1 auto; min-width: 0; } .tks-root .tks-modes-count { flex: 0 0 auto; color: var(--tks-muted); font-family: var(--tks-font); font-size: 13px; font-weight: 300; line-height: 21px; } .tks-root .tks-modes-row.is-active .tks-modes-count { color: inherit; opacity: .75; } /* ── Сортировка ──────────────────────────────────────────────────────────── Свой список вместо системного