/* ТЕХНО-БУ — фирменный слой поверх штатной темы (Default 5.0).
   Отдельный файл: обновления базовой темы его не затирают. Подключается в index.html после штатных
   стилей, следом идут tb-features.css (формы, реклама, страница товара) и tb-profile.css (фон, «Отделения»).

   Как устроен файл — искать по заголовкам-комментариям:
     1. :root — переменные --tb-* (цвета, радиус, тень); их же берут tb-features.css и tb-profile.css.
     2. «---------- Шапка / Карточки товаров / Плашки состояния Б/У / Подвал …» — первые фирменные блоки.
     3. «ШАПКА-ОСТРОВ» — логотип, телефон, корзина в синем квадрате, строка поиска, лента разделов, вкладки.
     4. «THEME-UX» — адаптив и сетка: разделы с номерами 1–12 (сравнение, поиск, липкий поиск, заголовки ленты, сетка карточек,
        бесконечная прокрутка, пилюли, фильтры, меню каталога, нижняя панель телефона, подвал, поля).
     5. «Компактная шапка» — страницы товара, корзины и документов.
     6. «MOBILE-UX» — телефон: шапка и поиск в одну строку, баннеры на первом экране, 2 карточки в ряд.
     7. «Фоновая картинка сайта» — светлые подложки под подписи, когда в панели выбран фон-картинка.
   После правки: очистить wa-cache и поднять версию темы (команда — в CONTEXT.md, раздел 2), иначе браузеры
   продолжат показывать старый CSS. */

:root {
    --tb-canvas: #f4f5f7;
    --tb-card: #ffffff;
    --tb-ink: #1f2937;
    --tb-muted: #6b7280;
    --tb-line: #e5e7eb;
    --tb-accent: #29b6f6;
    --tb-dark: #111827;
    --tb-sale: #dc2626;
    --tb-ok: #059669;
    --tb-radius: 14px;
    --tb-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --tb-shadow-hover: 0 10px 28px rgba(16, 24, 40, .13);
}

body {
    background: var(--tb-canvas);
    color: var(--tb-ink);
}

h1, h2, h3, h4 {
    letter-spacing: -.02em;
}

/* ---------- Шапка ---------- */

.appheader {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--tb-card);
    border-bottom: 1px solid var(--tb-line);
}

/* ---------- Блок поиска на главной ---------- */

.tb-hero {
    background: var(--tb-card);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    padding: 32px 36px;
    margin-bottom: 22px;
    box-shadow: var(--tb-shadow);
}

.tb-hero h1 {
    font-size: 1.9em;
    margin: 0 0 8px;
}

.tb-hero p {
    color: var(--tb-muted);
    margin: 0 0 20px;
}

.tb-search {
    display: flex;
    gap: 10px;
    max-width: 760px;
}

.tb-search input {
    flex: 1;
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--tb-line);
    border-radius: 10px;
    font-size: 1em;
    background: var(--tb-canvas);
    color: var(--tb-ink);
}

.tb-search input:focus {
    outline: none;
    border-color: var(--tb-accent);
    background: #fff;
}

.tb-search button {
    height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: 10px;
    background: var(--tb-accent);
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
}

.tb-search button:hover {
    filter: brightness(1.07);
}

@media (max-width: 700px) {
    .tb-hero {
        padding: 22px 18px;
    }

    .tb-hero h1 {
        font-size: 1.45em;
    }

    .tb-search {
        flex-direction: column;
    }
}

/* ---------- Заголовки разделов ---------- */

.tb-section-header {
    font-size: 1.3em;
    font-weight: 700;
    margin: 26px 0 14px;
}

/* ---------- Плитка разделов каталога ---------- */

.tb-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 14px;
}

.tb-cat-grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--tb-card);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    padding: 16px 18px;
    font-weight: 600;
    color: var(--tb-ink);
    text-decoration: none;
    box-shadow: var(--tb-shadow);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.tb-cat-grid a:hover {
    box-shadow: var(--tb-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--tb-accent);
    color: var(--tb-ink);
}

.tb-cat-count {
    color: var(--tb-muted);
    font-weight: 500;
    font-size: .85em;
}

/* ---------- Карточки товаров ---------- */

ul.product-list > li {
    background: var(--tb-card);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    padding: 12px;
    box-shadow: var(--tb-shadow);
    transition: box-shadow .18s ease, transform .18s ease;
}

ul.product-list > li:hover {
    box-shadow: var(--tb-shadow-hover);
    transform: translateY(-2px);
}

ul.product-list > li .image,
ul.product-list > li .product_image_slider {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

ul.product-list > li img.image-frame {
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

ul.product-list > li a {
    color: var(--tb-ink);
    text-decoration: none;
}

ul.product-list > li a:hover {
    color: var(--tb-accent);
}

ul.product-list > li .summary {
    color: var(--tb-muted);
    font-size: .85em;
    line-height: 1.45;
}

.pricing .price {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--tb-ink);
}

.pricing .compare-price,
.pricing del {
    color: var(--tb-sale);
    text-decoration: line-through;
    font-size: .9em;
}

/* кнопки действий — тёмные, как в макете */

.button.purchase,
.button.add2cart,
button.purchase {
    background: var(--tb-dark);
    border-color: var(--tb-dark);
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
}

.button.purchase:hover,
.button.add2cart:hover {
    background: #000;
}

/* ---------- Плашки состояния Б/У ---------- */

.tb-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 2px;
}

.tb-badge {
    font-size: .75em;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.tb-badge--new {
    background: #ecfdf5;
    color: var(--tb-ok);
}

.tb-badge--good {
    background: #e0f2fe;
    color: #0369a1;
}

.tb-badge--worn {
    background: #fffbeb;
    color: #b45309;
}

.tb-badge--single {
    background: #f3f4f6;
    color: var(--tb-muted);
}

/* ---------- Боковая колонка с фильтрами ---------- */

#sidebar,
.sidebar {
    background: var(--tb-card);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    padding: 16px;
    box-shadow: var(--tb-shadow);
}

/* ---------- Преимущества и магазины ---------- */

.tb-usp,
.tb-shops__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.tb-usp {
    margin: 22px 0;
}

.tb-usp > div,
.tb-shops__grid > div {
    background: var(--tb-card);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    padding: 16px 18px;
    box-shadow: var(--tb-shadow);
}

.tb-usp b,
.tb-shops__grid b {
    display: block;
    margin-bottom: 5px;
}

.tb-usp span,
.tb-shops__grid span {
    color: var(--tb-muted);
    font-size: .88em;
    line-height: 1.5;
}

.tb-phone {
    margin-top: 14px;
    color: var(--tb-muted);
}

.tb-phone a {
    color: var(--tb-ink);
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Подвал ---------- */

.appfooter {
    background: var(--tb-card);
    border-top: 1px solid var(--tb-line);
    margin-top: 36px;
}

.maincontent > .container {
    padding-top: 20px;
}

/* ---------- Угловые бейджи состояния ---------- */

.badge-wrapper {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin: 10px;
}

ul.product-list > li {
    position: relative;
}

.tb-state {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    font-size: .74em;
    font-weight: 700;
    line-height: 1.5;
    padding: 3px 10px;
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
    /* бейдж всегда в одну строку: перенос на 2 строки закрывал почти половину фото */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-state--new {
    background: #059669;
}

.tb-state--good {
    background: #0284c7;
}

.tb-state--worn {
    background: #d97706;
}

.tb-state--sale {
    background: var(--tb-sale);
}

/* ---------- Верхняя полоса шапки ---------- */

.tb-topbar {
    background: var(--tb-dark);
    color: rgba(255, 255, 255, .85);
    font-size: .86em;
}

.tb-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
    flex-wrap: wrap;
}

.tb-topbar__contacts,
.tb-topbar__links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.tb-topbar a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.tb-topbar a:hover {
    color: #fff;
}

.tb-topbar__phone {
    font-weight: 700;
    color: #fff !important;
}

.tb-topbar__links a {
    border-bottom: 1px dashed rgba(255, 255, 255, .4);
}

@media (max-width: 760px) {
    .tb-topbar__inner {
        justify-content: center;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .tb-topbar__links {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Подвал ---------- */

.tb-footer {
    padding: 34px 0 10px;
    border-bottom: 1px solid var(--tb-line);
}

.tb-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 26px;
}

.tb-footer__col b {
    display: block;
    margin-bottom: 12px;
    font-size: .95em;
}

.tb-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tb-footer__col li {
    margin-bottom: 7px;
    color: var(--tb-muted);
    font-size: .9em;
    line-height: 1.45;
}

.tb-footer__col a {
    color: var(--tb-muted);
    text-decoration: none;
}

.tb-footer__col a:hover {
    color: var(--tb-accent);
}

.tb-footer__phone {
    font-weight: 700;
    color: var(--tb-ink) !important;
}

/* ======== ШАПКА-ОСТРОВ (по макету) ======== */

/* штатную шапку темы прячем — вместо неё наш остров */
#globalnav,
.globalheader .appnav {
    display: none !important;
}

.globalheader {
    background: var(--tb-canvas);
    border: 0;
}

.tb-head {
    padding: 14px 0 6px;
}

.tb-head__island {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    background: var(--tb-card);
    border-radius: 22px;
    padding: 14px 26px;
    box-shadow: var(--tb-shadow);
}

.tb-head__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tb-soc {
    display: block;
    flex: 0 0 auto;
}

.tb-soc img,
.tb-soc svg {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.tb-head__phone {
    margin-left: 8px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--tb-ink) !important;
    text-decoration: none;
    white-space: nowrap;
}

.tb-head__logo {
    display: block;
}

.tb-head__logo img {
    display: block;
    height: 41px; /* +20% по просьбе владельца (было 34) */
    width: auto;
}

.tb-head__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    min-width: 0;
}

.tb-head__right a {
    color: var(--tb-ink);
    text-decoration: none;
    white-space: nowrap;
}

.tb-head__right a:hover {
    color: var(--tb-accent);
}

/* Корзина — синий квадрат с иконкой; красный кружок-счётчик в углу.
   Одна и та же кнопка стоит в острове шапки, в строке телефона и в липкой строке поиска. */
.tb-head a.tb-cartbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    min-height: 0;
    padding: 0;
    border-radius: 12px;
    background: var(--tb-accent);
    color: #fff !important;
    text-decoration: none;
    transition: filter .15s ease;
}

.tb-head a.tb-cartbtn:hover {
    color: #fff !important;
    filter: brightness(.94);
}

.tb-cartbtn svg {
    display: block;
}

.tb-cartbtn b {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border: 2px solid var(--tb-card);
    border-radius: 10px;
    background: var(--tb-sale);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.tb-cartbtn b[hidden] {
    display: none;
}

/* корзина в строке поиска — только когда строка прилипла при прокрутке (ПК и планшет) */
.tb-searchbar__cart {
    display: none;
}

@media (min-width: 768px) {
    .tb-searchbar-slot.is-stuck .tb-searchbar__cart {
        display: flex;
        flex: none;
        align-items: center;
        order: 3;
    }

    .tb-searchbar-slot.is-stuck .tb-searchbar a.tb-cartbtn {
        width: 44px;
        height: 44px;
    }
}

/* строка поиска */

.tb-searchbar {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.tb-searchbar__cats {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 24px;
    border-radius: 16px;
    background: var(--tb-accent);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.tb-searchbar input {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    padding: 0 20px;
    border: 2px solid var(--tb-accent);
    border-radius: 16px;
    background: var(--tb-card);
    color: var(--tb-ink);
    font-size: 1em;
}

.tb-searchbar input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(41, 182, 246, .2);
}

.tb-searchbar button {
    height: 50px;
    padding: 0 30px;
    border: 0;
    border-radius: 16px;
    background: var(--tb-accent);
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
}

.tb-searchbar button:hover {
    filter: brightness(1.07);
}

/* планшет */
@media (max-width: 1000px) {
    .tb-head__island {
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding: 12px 18px;
    }

    .tb-head__right {
        grid-column: 1 / -1;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
    }
}

/* телефон */
@media (max-width: 680px) {
    .tb-head {
        padding: 10px 0 4px;
    }

    .tb-head__island {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        border-radius: 18px;
        padding: 14px;
        gap: 10px;
    }

    .tb-head__logo {
        order: -1;
    }

    .tb-head__logo img {
        height: 34px;
    }

    .tb-head__left {
        flex-wrap: wrap;
        justify-content: center;
    }

    .tb-head__phone {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

    .tb-searchbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .tb-searchbar input {
        flex: 1 1 100%;
        height: 46px;
    }

    .tb-searchbar__cats,
    .tb-searchbar button {
        flex: 1 1 48%;
        height: 46px;
        padding: 0 12px;
        justify-content: center;
        text-align: center;
    }
}

/* ======== Плитки разделов с баннерами ======== */

.tb-cat-grid a.tb-cat--img {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.tb-cat--img img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    background: #fff;
}

.tb-cat--img .tb-cat-count {
    position: absolute;
    right: 12px;
    bottom: 10px;
    background: rgba(17, 24, 39, .06);
    padding: 3px 10px;
    border-radius: 999px;
}

/* ======== Лента разделов и вкладки (как в макете) ======== */

.tb-cats {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    /* полосу прокрутки прячем: на широком экране лента влезает целиком,
       на телефоне прокручивается пальцем */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tb-cats::-webkit-scrollbar {
    display: none;
}

.tb-cats__item {
    flex: 0 0 auto;
    /* высота тянется под ширину экрана, чтобы лента помещалась без прокрутки */
    height: clamp(58px, 6.6vw, 94px);
    border-radius: 16px;
    overflow: hidden;
    background: var(--tb-card);
    border: 1px solid var(--tb-line);
    box-shadow: var(--tb-shadow);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.tb-cats__item:hover {
    box-shadow: var(--tb-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--tb-accent);
}

.tb-cats__item img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
}

/* Ряд вкладок под лентой разделов. Если вкладки не помещаются в строку (другой шрифт, крупный текст
   в настройках телефона), лишние переносятся на вторую строку. Раньше ряд прокручивался вбок со скрытой
   полосой прокрутки — и на планшете «Отделения» просто пропадали за краем, догадаться было нельзя.
   Подписи и поля под разную ширину экрана подобраны так, чтобы перенос не понадобился:
   см. «Пять вкладок шапки» ниже. */
.tb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 12px;
}

.tb-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--tb-card);
    border: 1px solid var(--tb-line);
    color: var(--tb-ink);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--tb-shadow);
}

.tb-tab:hover {
    border-color: var(--tb-accent);
    color: var(--tb-ink);
}

.tb-tab--active {
    background: var(--tb-accent);
    border-color: var(--tb-accent);
    color: #fff;
}

/* красная метка-пин перед «Отделения» — сразу видно, что вкладка ведёт к адресам */
.tb-tab__pin {
    flex: none;
    margin: 0 6px 0 -4px;
}

@media (max-width: 680px) {
    .tb-cats__item {
        height: 66px;
    }

    .tb-tab {
        height: 40px;
        padding: 0 18px;
        font-size: .92em;
    }
}

/* Лента разделов: ширина каждой плитки пропорциональна её картинке,
   поэтому ряд всегда заполняет строку целиком — без прокрутки и обрезки.
   Высота выравнивается сама: при ширине k×пропорция высота у всех = k. */

.tb-cats {
    overflow: visible;
    align-items: flex-start;
}

.tb-cats__item {
    flex: var(--ratio, 1.5) 1 0 !important;
    height: auto;
    min-width: 0;
}

.tb-cats__item img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* на телефоне плитки стали бы совсем мелкими — там лента прокручивается */
@media (max-width: 680px) {
    .tb-cats {
        overflow-x: auto;
    }

    .tb-cats__item {
        flex: 0 0 auto !important;
        height: 66px;
    }

    .tb-cats__item img {
        width: auto;
        height: 100%;
        max-width: none;
    }
}

/* Восьмая плитка собрана текстом — пока нет готового баннера.
   Шрифт подобран под остальные: тонкий гротеск с разрядкой. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

.tb-cats__item--text {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tb-card);
    aspect-ratio: 3 / 2;
}

.tb-cats__item--text span {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-weight: 300;
    letter-spacing: .06em;
    color: #111;
    font-size: clamp(11px, 1.25vw, 19px);
    line-height: 1.2;
    text-align: center;
    padding: 0 8px;
}

/* текстовая плитка тянется по высоте ряда, а не по своей пропорции */
.tb-cats {
    align-items: stretch;
}

.tb-cats__item--text {
    aspect-ratio: auto;
}

/* штатная тема рисует широкую тень под шапкой — она читается как серая полоса */
.globalheader,
.globalfooter {
    box-shadow: none;
}

/* лента недавно добавленных */
.tb-feed__end {
    margin: 26px 0 8px;
    text-align: center;
    color: var(--tb-muted);
}

/* =====================================================================
   THEME-UX (14.10.2026): адаптив «как у Авито/Озон», сетка карточек,
   меню каталога, липкий поиск, нижняя панель, фильтры снизу, подвал.
   Штатные стили темы лежат в @layer или грузятся позже — поэтому селекторы
   здесь чуть «тяжелее» обычного.
   ===================================================================== */

:root {
    --tb-gutter: 16px;
    --tb-tap: 44px;
    --tb-bottomnav-h: 60px;
    /* Ширина колонки контента на ПК — одна на все страницы: шапка-остров, поиск, баннеры,
       вкладки, содержимое и подвал. Раньше её задавали разные штатные стили: магазин 992 px,
       страницы /info/* 938 px, /order/ 1200 px — и при переходе всё «прыгало». */
    --tb-col: 992px;
}

@media (min-width: 1300px) {
    :root {
        --tb-col: 1128px;
    }
}

/* Выше 1024 px колонку держим сами. Селекторы с html.is-order-page нужны, чтобы перебить
   order.css (у страницы заказа своя ширина 1300 px и поля 40 px). На телефоне и планшете
   остаются штатные поля темы. */
@media (min-width: 1025px) {
    .tb-head > .container,
    .maincontent > .container,
    .tb-footer > .container,
    html.is-order-page .tb-head > .container,
    html.is-order-page .maincontent > .container,
    html.is-order-page .tb-footer > .container {
        box-sizing: border-box;
        width: auto;
        min-width: 0;
        max-width: calc(var(--tb-col) + 2 * var(--tb-gutter));
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--tb-gutter);
        padding-right: var(--tb-gutter);
    }
}

html, body {
    overflow-x: clip; /* страховка от горизонтальной прокрутки на узких экранах */
}

html.tb-noscroll,
html.tb-noscroll body,
html.tb-filters-open,
html.tb-filters-open body {
    overflow: hidden;
}

/* ---------- 1. Сравнение товаров убрано ---------- */

.product-list a.compare,
.product-list svg.compare,
a.compare,
.compare-from-list,
#compare-leash,
.compare-leash,
[data-compare],
.s-compare-link,
.product-compare,
.compare-wrapper {
    display: none !important;
}

/* ---------- 2. Шапка: поиск ---------- */

/* штатная тема на телефоне делает всю шапку липкой (остров + лента + вкладки = полэкрана).
   Липкой у нас остаётся только строка поиска — см. .tb-searchbar-slot.is-stuck */
header.globalheader {
    position: relative !important;
    max-height: none !important;
}

.tb-head .tb-searchbar {
    align-items: stretch;
}

.tb-head .tb-searchbar .tb-searchbar__cats,
.tb-head .tb-searchbar button.tb-searchbar__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    height: 50px;
    margin: 0;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.tb-head .tb-searchbar button.tb-searchbar__go {
    padding: 0 28px;
    border: 0;
    border-radius: 16px;
    background: var(--tb-accent);
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    transform: none;
}

.tb-head .tb-searchbar button.tb-searchbar__go:hover {
    background: var(--tb-accent);
    color: #fff;
    filter: brightness(1.07);
}

.tb-head .tb-searchbar button.tb-searchbar__go > *,
.tb-head .tb-searchbar .tb-searchbar__cats > * {
    flex: 0 0 auto;
    display: block;
}

.tb-head .tb-searchbar button.tb-searchbar__go svg,
.tb-head .tb-searchbar .tb-searchbar__cats svg {
    display: none; /* в обычном виде — только текст, как в макете; значки — в приклеенной строке */
}

.tb-head .tb-searchbar input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    margin: 0;
}

.tb-head .tb-searchbar input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
}

/* шапка: зоны нажатия */
.tb-head__right a,
.tb-head__phone {
    display: inline-flex;
    align-items: center;
    min-height: var(--tb-tap);
}

.tb-soc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: var(--tb-tap);
}

/* ---------- 3. Липкая строка поиска при прокрутке ---------- */

.tb-searchbar-slot.is-stuck .tb-searchbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    margin: 0;
    /* поля считаем от той же ширины колонки, что у шапки (--tb-col); 100% тут — ширина окна без полосы прокрутки */
    padding: 8px max(var(--tb-gutter), calc((100% - var(--tb-col)) / 2));
    background: var(--tb-card);
    box-shadow: 0 4px 18px rgba(16, 24, 40, .12);
    animation: tb-drop .18s ease-out;
}

.tb-searchbar-slot.is-stuck .tb-searchbar input,
.tb-searchbar-slot.is-stuck .tb-searchbar .tb-searchbar__cats,
.tb-searchbar-slot.is-stuck .tb-searchbar button.tb-searchbar__go {
    height: 44px;
}

@keyframes tb-drop {
    from { transform: translateY(-100%); }
    to { transform: none; }
}

/* ---------- 4. Заголовки ленты, пустые состояния ---------- */

.tb-feed {
    margin-top: 6px;
}

.tb-cat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 12px;
}

.tb-feed__title,
.tb-cat-head h1.category-name {
    margin: 0;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.2;
}

/* «30 товаров» — на светлой плашке, чтобы читалось и поверх фоновой картинки */
.tb-found {
    display: inline-block;
    margin: 0 0 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--tb-card);
    color: var(--tb-muted);
    font-size: .9em;
}

/* Скрыть визуально, но оставить для экранных читалок и поисковиков (SEO-заголовок h1 главной) */
.tb-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    background: none !important;
    white-space: nowrap !important;
}

.tb-empty {
    background: var(--tb-card);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    padding: 28px 22px;
    text-align: center;
    box-shadow: var(--tb-shadow);
}

.tb-empty p {
    margin: 0 0 14px;
}

.tb-empty__title {
    font-size: 1.15em;
    font-weight: 700;
}

.tb-empty__text {
    color: var(--tb-muted);
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.tb-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.tb-empty .button {
    min-height: var(--tb-tap);
    align-items: center;
    border-radius: 12px;
}

#tb-commission-intro:empty {
    display: none;
}

#tb-commission-intro {
    margin-bottom: 16px;
}

/* ---------- 5. Сетка карточек ---------- */

/* Сетка лежит на сплошной «подложке» (цвет холста) с одинаковыми узкими промежутками
   по горизонтали и вертикали — карточки идут плотно друг за другом и не «висят в воздухе»
   поверх фоновой картинки сайта. Промежуток задаёт одна переменная --tb-grid-gap. */
ul.product-list.tb-grid {
    --tb-grid-gap: 6px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tb-grid-gap);
    margin: 0;
    padding: var(--tb-grid-gap);
    list-style: none;
    border-radius: var(--tb-radius);
    background: var(--tb-canvas);
}

@media (min-width: 768px) {
    ul.product-list.tb-grid { --tb-grid-gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    ul.product-list.tb-grid { --tb-grid-gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    ul.product-list.tb-grid.tb-grid--sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    ul.product-list.tb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    ul.product-list.tb-grid.tb-grid--sidebar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

ul.product-list.tb-grid > li {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 8px;
    border-radius: 10px;
    box-shadow: none; /* на подложке тень не нужна — карточку отделяет рамка */
}

@media (min-width: 768px) {
    ul.product-list.tb-grid > li { padding: 10px; border-radius: 12px; }
}

/* на телефоне карточка не «подпрыгивает» при касании */
@media (hover: none) {
    ul.product-list.tb-grid > li:hover { transform: none; box-shadow: none; }
}

.tb-card__media {
    display: block;
    color: inherit;
}

ul.product-list.tb-grid .tb-card__media .image,
ul.product-list.tb-grid .product_image_slider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

ul.product-list.tb-grid .tb-card__media .image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

ul.product-list.tb-grid .product_image_slider .image-item {
    align-items: center;
}

ul.product-list.tb-grid .product_image_slider .image-frame {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* бейджи в углу фото */
ul.product-list.tb-grid .badge-wrapper {
    top: 0;
    left: 0;
    right: 0; /* колонка бейджей не шире карточки: слишком длинный бейдж обрежется многоточием */
    margin: 12px;
    font-size: 1em;
    pointer-events: none;
}

@media (max-width: 599px) {
    ul.product-list.tb-grid .badge-wrapper { margin: 10px; gap: 3px; }
    ul.product-list.tb-grid .tb-state { font-size: .66em; padding: 2px 7px; }
}

/* ПК, категория с колонкой фильтров: карточки ~165 px — бейджи компактные, как на телефоне,
   чтобы «Средняя цена 15 400 ₽» помещалась в одну строку целиком */
@media (min-width: 1024px) and (max-width: 1439px) {
    ul.product-list.tb-grid.tb-grid--sidebar .badge-wrapper { margin: 8px; gap: 3px; }
    ul.product-list.tb-grid.tb-grid--sidebar .tb-state { font-size: .66em; padding: 2px 7px; }
}

.tb-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding-top: 8px;
}

ul.product-list.tb-grid .tb-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0 0 4px;
}

ul.product-list.tb-grid .tb-card__price .price {
    font-size: 1.12em;
    font-weight: 800;
    line-height: 1.2;
    color: var(--tb-ink);
}

ul.product-list.tb-grid .tb-card__price .compare-at-price {
    font-size: .82em;
    color: var(--tb-muted);
    text-decoration: line-through;
}

@media (min-width: 768px) {
    ul.product-list.tb-grid .tb-card__price .price { font-size: 1.25em; }
}

ul.product-list.tb-grid a.tb-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.6em;
    margin: 0 0 8px;
    font-size: .9em;
    font-weight: 500;
    line-height: 1.3;
    color: var(--tb-ink);
    word-break: break-word;
}

.tb-card__buy {
    margin-top: auto;
}

ul.product-list.tb-grid .tb-card__buy .addtocart-btn-wrapper {
    position: relative;
}

ul.product-list.tb-grid .tb-card__btn,
ul.product-list.tb-grid .tb-card__buy .button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--tb-tap);
    margin: 0;
    padding: 0 10px;
    border-radius: 10px;
    font-size: .9em;
    line-height: 1.15;
    text-align: center;
    transform: none;
}

ul.product-list.tb-grid .tb-card__btn.addtocart-btn {
    background: var(--tb-dark);
    color: #fff;
}

ul.product-list.tb-grid .tb-card__btn.addtocart-btn:hover {
    background: #000;
    color: #fff;
}

ul.product-list.tb-grid .tb-card__btn--added {
    background: var(--tb-ok);
    color: #fff !important;
}

ul.product-list.tb-grid .tb-card__btn.wa-hide {
    display: none;
}

ul.product-list.tb-grid .tb-card__btn--off {
    background: #f3f4f6;
    color: var(--tb-muted) !important;
}

/* скелетон при перерисовке фильтрами */
.tb-card--skeleton {
    pointer-events: none;
}

/* ---------- 6. Бесконечная прокрутка ---------- */

.tb-js .tb-inf-on .paging-nav,
.tb-js .tb-inf-on .tb-pager,
.tb-js .tb-inf-on .lazyloading-paging {
    display: none !important;
}

.tb-inf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 1px;
    margin: 18px 0 6px;
    color: var(--tb-muted);
    font-size: .95em;
    text-align: center;
}

.tb-inf:empty {
    margin: 0;
}

.tb-inf--end {
    padding: 14px 0 4px;
    border-top: 1px dashed var(--tb-line);
}

.tb-inf__spin {
    width: 20px;
    height: 20px;
    border: 3px solid var(--tb-line);
    border-top-color: var(--tb-accent);
    border-radius: 50%;
    animation: tb-spin .8s linear infinite;
}

@keyframes tb-spin {
    to { transform: rotate(360deg); }
}

.tb-inf__retry {
    min-height: var(--tb-tap);
    border-radius: 12px;
}

.paging-nav .menu-h {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.paging-nav .menu-h a,
.paging-nav .menu-h span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tb-tap);
    min-height: var(--tb-tap);
}

/* ---------- 7. Пилюли: сортировка, подкатегории ---------- */

.tb-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    min-width: 0;
}

.tb-chips {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tb-chips::-webkit-scrollbar {
    display: none;
}

.tb-subcats {
    margin: 0 0 12px;
}

.tb-chip,
.tb-toolbar__filters {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--tb-line);
    border-radius: 999px;
    background: var(--tb-card);
    color: var(--tb-ink) !important;
    font-size: .92em;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--tb-shadow);
}

@media (pointer: coarse) {
    .tb-chip,
    .tb-toolbar__filters { height: var(--tb-tap); }
}

.tb-chip:hover {
    border-color: var(--tb-accent);
}

.tb-chip.is-active {
    background: var(--tb-ink);
    border-color: var(--tb-ink);
    color: #fff !important;
}

button.tb-toolbar__filters {
    margin: 0;
    background: var(--tb-card);
    color: var(--tb-ink);
    transform: none;
}

button.tb-toolbar__filters:hover {
    background: var(--tb-card);
    color: var(--tb-ink);
    border-color: var(--tb-accent);
}

button.tb-toolbar__filters.is-applied {
    background: var(--tb-accent);
    border-color: var(--tb-accent);
    color: #fff !important;
}

/* ---------- 8. Категория: фильтры ---------- */

.tb-cat-layout--filters {
    display: block;
}

@media (min-width: 1025px) {
    .tb-cat-layout--filters {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .tb-toolbar__filters {
        display: none !important; /* на компьютере фильтры всегда видны слева */
    }

    .tb-filters-col {
        position: sticky;
        top: 76px;
        /* длинные фильтры (Тип, Цвет…) листаются сами, не дожидаясь конца ленты товаров */
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .tb-filters-col .filters {
        margin: 0;
        border: 1px solid var(--tb-line);
        border-radius: var(--tb-radius);
        background: var(--tb-card);
        box-shadow: var(--tb-shadow);
    }
}

.tb-filters-backdrop {
    display: none;
}

/* телефон и планшет: фильтры — панель снизу */
@media (max-width: 1024px) {
    .tb-filters-col {
        width: auto;
    }

    html.tb-filters-open .tb-filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(17, 24, 39, .45);
    }

    .filters.is-shown {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1001 !important;
        height: auto;
        max-height: 88vh;
        max-height: 88dvh;
        border-radius: 18px 18px 0 0 !important;
        box-shadow: 0 -10px 40px rgba(16, 24, 40, .25) !important;
        overflow: hidden;
        animation: tb-sheet-up .22s ease-out;
    }

    .filters.is-shown .filters-form-wrapper {
        height: auto !important;
        max-height: 88vh;
        max-height: 88dvh;
        transition: transform .18s ease;
    }

    .filters.is-shown .filters-mobile-header {
        min-height: 56px !important;
        padding: 6px 12px 6px 20px !important;
    }

    .filters.is-shown .filters-mobile-header__title {
        font-size: 1.2rem !important;
    }

    .filters.is-shown .filters-mobile-close {
        width: var(--tb-tap) !important;
        height: var(--tb-tap) !important;
    }

    .filters.is-shown .filters-mobile-footer > * {
        min-height: var(--tb-tap);
    }

    .filters .tb-sheet__grip {
        display: none;
    }

    .filters.is-shown .tb-sheet__grip {
        display: block;
        flex: 0 0 auto;
        margin: 8px auto 0;
    }
}

@keyframes tb-sheet-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

/* ---------- 9. Меню каталога ---------- */

.tb-js .tb-catalog--moved {
    display: none;
}

.tb-catalog {
    margin: 30px 0 10px;
}

.tb-catalog__title {
    margin: 0 0 14px;
    font-size: 1.3em;
}

/* Разделы «кирпичиками» (многоколоночная вёрстка, а не grid с рядами): каждая плитка встаёт
   сразу под предыдущей в своей колонке. В grid высота ряда равнялась самой высокой плитке,
   и под короткими разделами оставались пустоты до 170 px — владелец: «плитки лежат в воздухе». */
.tb-catalog__grid {
    columns: 240px;
    column-gap: 12px;
}

.tb-catalog__group {
    break-inside: avoid; /* плитку раздела не разрывать между колонками */
    margin-bottom: 12px;
    background: var(--tb-card);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    padding: 6px;
    box-shadow: var(--tb-shadow);
}

.tb-catalog__group[hidden],
.tb-catalog__kids li[hidden] {
    display: none;
}

.tb-catalog a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: var(--tb-tap);
    padding: 0 10px;
    border-radius: 10px;
    color: var(--tb-ink);
    text-decoration: none;
}

.tb-catalog a:hover {
    background: var(--tb-canvas);
    color: var(--tb-ink);
}

.tb-catalog a em {
    flex: 0 0 auto;
    font-style: normal;
    font-size: .82em;
    color: var(--tb-muted);
}

.tb-catalog__parent {
    font-weight: 700;
}

.tb-catalog__kids {
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
}

.tb-catalog__kids a {
    font-size: .94em;
    min-height: 40px;
    padding-left: 18px;
}

.tb-drawer[hidden] {
    display: none;
}

.tb-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.tb-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    opacity: 0;
    transition: opacity .2s ease;
}

.tb-drawer.is-open .tb-drawer__backdrop {
    opacity: 1;
}

.tb-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(92vw, 420px);
    background: var(--tb-canvas);
    box-shadow: 10px 0 40px rgba(16, 24, 40, .25);
    transform: translateX(-100%);
    transition: transform .22s ease;
    outline: none;
}

.tb-drawer.is-open .tb-drawer__panel {
    transform: none;
}

.tb-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 8px 8px 18px;
    background: var(--tb-card);
    border-bottom: 1px solid var(--tb-line);
}

.tb-drawer__title {
    font-size: 1.2em;
}

button.tb-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tb-tap);
    height: var(--tb-tap);
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--tb-ink);
    transform: none;
}

button.tb-drawer__close:hover {
    background: var(--tb-canvas);
    color: var(--tb-ink);
}

.tb-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
}

.tb-drawer__loading {
    margin: 20px 6px;
    color: var(--tb-muted);
    text-align: center;
}

.tb-catalog--drawer {
    margin: 0;
}

/* телефон и планшет: меню-шторка в одну колонку */
.tb-drawer .tb-catalog__grid {
    columns: 1;
}

.tb-drawer .tb-catalog__group {
    margin-bottom: 10px;
}

/* компьютер: выпадающая панель под строкой поиска */
.tb-drawer--dropdown .tb-drawer__backdrop {
    background: rgba(17, 24, 39, .25);
}

.tb-drawer--dropdown .tb-drawer__panel {
    bottom: auto;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(16, 24, 40, .25);
    transform: translateY(-8px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
    overflow: hidden;
}

.tb-drawer--dropdown.is-open .tb-drawer__panel {
    transform: none;
    opacity: 1;
}

/* компьютер: колонки шириной от 230 px, плитки идут плотно сверху вниз (см. .tb-catalog__grid) */
.tb-drawer--dropdown .tb-catalog__grid {
    columns: 230px;
    column-gap: 12px;
}

.tb-drawer--dropdown .tb-catalog__group {
    margin-bottom: 12px;
}

/* ---------- 10. Нижняя панель (телефон) и шторка «Связаться» ---------- */

.tb-bottomnav {
    display: none;
}

@media (max-width: 767px) {
    body {
        padding-bottom: calc(var(--tb-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    }

    .tb-bottomnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr)); /* Главная, Каталог, Корзина, Кабинет, Связаться */
        height: var(--tb-bottomnav-h);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--tb-card);
        border-top: 1px solid var(--tb-line);
        box-shadow: 0 -4px 16px rgba(16, 24, 40, .08);
    }
}

.tb-bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    color: var(--tb-muted) !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
}

.tb-bottomnav__item svg {
    display: block;
    width: 24px;
    height: 24px;
}

.tb-bottomnav__item.is-active {
    color: var(--tb-accent) !important;
}

.tb-bottomnav__icon {
    position: relative;
    display: block;
}

.tb-bottomnav__badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--tb-sale);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.tb-bottomnav__badge[hidden] {
    display: none;
}

.tb-sheet[hidden] {
    display: none;
}

.tb-sheet {
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.tb-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    opacity: 0;
    transition: opacity .2s ease;
}

.tb-sheet.is-open .tb-sheet__backdrop {
    opacity: 1;
}

.tb-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 520px;
    margin: 0 auto;
    padding: 6px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    background: var(--tb-card);
    box-shadow: 0 -10px 40px rgba(16, 24, 40, .25);
    transform: translateY(100%);
    transition: transform .22s ease;
}

.tb-sheet.is-open .tb-sheet__panel {
    transform: none;
}

.tb-sheet__grip {
    width: 40px;
    height: 5px;
    margin: 4px auto 10px;
    border-radius: 3px;
    background: #d1d5db;
}

.tb-sheet__title {
    display: block;
    margin: 0 0 8px;
    font-size: 1.1em;
    text-align: center;
}

.tb-sheet__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 0 6px;
    border-bottom: 1px solid var(--tb-line);
    color: var(--tb-ink) !important;
    font-weight: 600;
    text-decoration: none;
}

.tb-sheet__row em {
    font-style: normal;
    font-weight: 400;
    color: var(--tb-muted);
    font-size: .9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.tb-sheet__cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    border-radius: 12px;
    background: var(--tb-canvas);
    color: var(--tb-ink);
    transform: none;
}

button.tb-sheet__cancel:hover {
    background: var(--tb-line);
    color: var(--tb-ink);
}

/* ---------- 11. Подвал ---------- */

.tb-footer {
    padding: 30px 0 0;
    border-bottom: 0;
}

.tb-footer > .container {
    padding-bottom: 6px;
}

.tb-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.tb-footer__col .tb-footer__h {
    display: block;
    margin-bottom: 10px;
    color: var(--tb-ink);
    font-size: .95em;
}

.tb-footer__col li {
    margin-bottom: 4px;
}

.tb-footer__col a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

.tb-footer__col small {
    color: var(--tb-muted);
}

.tb-footer__soc {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.tb-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
    margin-top: 18px;
    padding: 14px 0 6px;
    border-top: 1px solid var(--tb-line);
    color: var(--tb-muted);
    font-size: .82em;
    line-height: 1.45;
}

.tb-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.tb-footer__legal a {
    color: var(--tb-muted);
    text-decoration: none;
}

.tb-footer__legal a:hover {
    color: var(--tb-accent);
}

@media (max-width: 1023px) {
    .tb-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .tb-footer__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .tb-footer__col a {
        min-height: var(--tb-tap);
    }

    .tb-footer__legal {
        flex-direction: column;
    }
}

/* ---------- 12. Телефон и планшет: поля, шапка ---------- */

@media (max-width: 767px) {
    .maincontent > .container {
        padding-top: 12px;
    }

    .tb-feed__title,
    .tb-cat-head h1.category-name {
        font-size: 1.3em;
    }

    .tb-head__right {
        gap: 4px 14px;
    }

    .tb-head__right a {
        font-size: .95em;
    }
}

@media (max-width: 680px) {
    /* строка поиска: поле во всю ширину, под ним «Все категории» и «Найти» */
    .tb-head .tb-searchbar input[type="search"] {
        order: -1;
    }

    .tb-head .tb-searchbar .tb-searchbar__cats,
    .tb-head .tb-searchbar button.tb-searchbar__go {
        height: 46px;
        padding: 0 12px;
    }

    .tb-searchbar-slot.is-stuck .tb-searchbar button.tb-searchbar__go svg,
    .tb-searchbar-slot.is-stuck .tb-searchbar .tb-searchbar__cats svg {
        display: block;
    }

    /* приклеенная строка: в одну линию, кнопки — значками */
    .tb-searchbar-slot.is-stuck .tb-searchbar {
        flex-wrap: nowrap;
        gap: 6px;
        padding: 6px var(--tb-gutter);
    }

    .tb-searchbar-slot.is-stuck .tb-searchbar input {
        flex: 1 1 auto;
        order: 1;
        height: 44px;
    }

    .tb-searchbar-slot.is-stuck .tb-searchbar .tb-searchbar__cats,
    .tb-searchbar-slot.is-stuck .tb-searchbar button.tb-searchbar__go {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .tb-searchbar-slot.is-stuck .tb-searchbar .tb-searchbar__cats { order: 0; }
    .tb-searchbar-slot.is-stuck .tb-searchbar button.tb-searchbar__go { order: 2; }

    .tb-searchbar-slot.is-stuck .tb-searchbar .tb-searchbar__cats span,
    .tb-searchbar-slot.is-stuck .tb-searchbar button.tb-searchbar__go span {
        display: none;
    }

    .tb-searchbar input[type="search"] {
        font-size: 16px; /* иначе iPhone увеличивает страницу при вводе */
    }
}

/* ======== Компактная шапка на страницах товара, корзины, документов ========
   На телефоне полная шапка (остров + поиск + лента + вкладки) занимала ~550 px,
   и товар начинался со второго экрана. На «не-списках» оставляем логотип и поиск. */
@media (max-width: 767px) {
    .tb-head--compact .tb-cats,
    .tb-head--compact .tb-tabs,
    .tb-head--compact .tb-head__right,
    .tb-head--compact .tb-head__left {
        display: none !important;
    }

    .tb-head--compact .tb-head__island {
        padding: 10px 14px;
    }
}

/* Штатная тема даёт шапке margin-bottom 2rem и padding 1rem снизу — вместе с нашими
   отступами под вкладками получалось ~85 px пустоты до «Недавно добавленные».
   Отступы шапки задаёт сам .tb-head, поэтому штатные обнуляем. */
header.globalheader {
    --globalheader-mb: 0;
    margin-bottom: 0;
    padding: 0;
}

.maincontent > .container {
    padding-top: 10px;
}

.tb-feed {
    margin-top: 0;
}

/* =====================================================================
   MOBILE-UX (раунд 2, 14.10.2026): телефон — так же лаконично, как компьютер.
   Шапка в одну строку, поиск в одну строку, все 7 баннеров на первом экране
   (два ряда), вкладки помещаются на 360 px, компактные карточки 2 в ряд.
   Компьютер (≥768 px) эти правила не затрагивают, кроме мелких исправлений ниже.
   ===================================================================== */

/* подвал создавал свой слой (z-index:0) — из-за этого бейджи карточек рисовались
   поверх нижней панели, меню каталога и шторки «Связаться», которые лежат в подвале */
footer.globalfooter {
    z-index: auto;
}

ul.product-list.tb-grid .badge-wrapper {
    z-index: 2;
}

.tb-head__m,
.tb-tab__short {
    display: none;
}

.tb-card__ico {
    display: none;
    flex: 0 0 auto;
}

.tb-card__added-short {
    display: none;
}

@media (max-width: 767px) {
    /* ---- шапка: одна строка ~56 px ---- */
    .tb-head {
        padding: 8px 0 0;
    }

    .tb-head .tb-head__island {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        box-sizing: border-box;
        height: 56px;
        padding: 0 8px 0 16px;
        border-radius: 16px;
        text-align: left;
    }

    .tb-head .tb-head__left,
    .tb-head .tb-head__right {
        display: none !important;
    }

    .tb-head .tb-head__logo {
        order: 0;
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .tb-head .tb-head__logo img {
        height: 31px;
        width: auto;
    }

    .tb-head__m {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .tb-head__icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 40px;
        border-radius: 12px;
        background: var(--tb-canvas);
        color: var(--tb-ink) !important;
        text-decoration: none;
    }

    .tb-head__icon svg {
        display: block;
    }

    .tb-head__m a.tb-cartbtn {
        width: 44px;
        height: 40px;
    }

    /* ---- поиск: одна строка, лупа внутри поля ---- */
    .tb-head .tb-searchbar {
        position: relative;
        flex-wrap: nowrap;
        gap: 0;
        margin-top: 8px;
    }

    .tb-head .tb-searchbar .tb-searchbar__cats {
        display: none;
    }

    .tb-head .tb-searchbar input[type="search"] {
        order: 0;
        flex: 1 1 auto;
        height: 44px;
        padding: 0 54px 0 16px;
        border-radius: 14px;
        font-size: 16px;
    }

    .tb-head .tb-searchbar button.tb-searchbar__go {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 44px;
        height: 36px;
        padding: 0;
        border-radius: 11px;
    }

    .tb-head .tb-searchbar button.tb-searchbar__go span {
        display: none;
    }

    .tb-head .tb-searchbar button.tb-searchbar__go svg {
        display: block;
        width: 20px;
        height: 20px;
    }

    /* приклеенная при прокрутке строка — та же раскладка */
    .tb-head .tb-searchbar-slot.is-stuck .tb-searchbar {
        padding: 6px var(--tb-gutter);
    }

    .tb-head .tb-searchbar-slot.is-stuck .tb-searchbar input[type="search"] {
        height: 44px;
    }

    .tb-head .tb-searchbar-slot.is-stuck .tb-searchbar .tb-searchbar__cats {
        display: none;
    }

    .tb-head .tb-searchbar-slot.is-stuck .tb-searchbar button.tb-searchbar__go {
        flex: none;
        top: 10px;
        right: calc(var(--tb-gutter) + 4px);
        width: 44px;
        height: 36px;
    }

    /* ---- лента баннеров: все 7 на экране, два ряда (3 + 4) ----
       ширина плитки ∝ пропорции её картинки (--ratio), поэтому в ряду высоты равны */
    .tb-head .tb-cats {
        flex-wrap: wrap;
        overflow: visible;
        align-items: flex-start;
        column-gap: 6px;
        row-gap: 0;
        margin-top: 8px;
    }

    .tb-head .tb-cats::before {
        content: "";
        order: 2;
        flex: 0 0 100% !important;
        height: 6px;
    }

    .tb-head .tb-cats__item:nth-child(-n+3) {
        order: 1;
    }

    .tb-head .tb-cats__item:nth-child(n+4) {
        order: 3;
    }

    .tb-head .tb-cats__item {
        flex: var(--ratio, 1.5) 1 0 !important;
        height: auto;
        min-width: 0;
        border-radius: 10px;
    }

    .tb-head .tb-cats__item img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    /* ---- вкладки: одна строка на 360 px, короткие подписи ---- */
    .tb-head .tb-tabs {
        gap: 2px;
        margin-top: 8px;
        padding: 3px;
        overflow: visible;
        border: 1px solid var(--tb-line);
        border-radius: 14px;
        background: var(--tb-card);
        box-shadow: var(--tb-shadow);
    }

    .tb-head .tb-tab {
        flex: 1 1 auto;
        justify-content: center;
        height: 36px;
        padding: 0 6px;
        border: 0;
        border-radius: 11px;
        background: transparent;
        box-shadow: none;
        font-size: 13px;
    }

    .tb-head .tb-tab--active {
        background: var(--tb-accent);
        color: #fff;
    }

    .tb-tab__full {
        display: none;
    }

    .tb-tab__short {
        display: inline;
    }

    /* пин мельче, чтобы четыре вкладки помещались на 360 px */
    .tb-tab__pin {
        width: 12px;
        height: 12px;
        margin: 0 2px 0 -2px;
    }
}

/* самые узкие телефоны (360–379 px): вкладкам чуть меньше полей, иначе «Отделения» с пином не влезают */
@media (max-width: 379px) {
    .tb-head .tb-tab {
        padding: 0 4px;
        font-size: 12.5px;
    }
}

/* ======== Пять вкладок шапки (Новинки · Топ · Магазин · Комиссионка · Отделения) ========
   С вкладкой «Топ просмотров» ряд стал шире, и в нескольких диапазонах ширины «Отделения»
   уезжали за край. Ширины ниже замерены на живой шапке (шрифт ПК; на iPhone/Android похожие):
   сколько ряду нужно и сколько есть места — запас везде не меньше 5 px.
     ≤359 px  — шрифт 11 px, поля 2 px      (нужно 275 px; на 320 px есть 280)
     360–400  — шрифт 12 px, поля 3 px      (нужно 309 px; на 360 px есть 320)
     401–429  — шрифт 13 px, поля 4 px      (нужно 340 px; на 401 px есть 361; раньше тут было 368 — не влезало)
     430–767  — как было: шрифт 13 px, поля 6 px (нужно 368 px; на 430 px есть 390)
     768–1023 — планшет: короткие подписи «Новинки», «Топ», вкладки делят ряд поровну (нужно 574 px из 736+)
     1024–1279 — полные подписи, поля 20 px вместо 26 (нужно 837 px из 946)
     ≥1280    — как было (нужно 897 px из 992+)
   Класс tb-tabs--5 ставит шапка (patch_header3.php) — правила сработают только для ряда из пяти. */
@media (max-width: 429px) {
    .tb-head .tb-tabs--5 {
        gap: 0;
    }

    .tb-head .tb-tabs--5 .tb-tab {
        padding: 0 4px;
    }

    .tb-head .tb-tabs--5 .tb-tab__pin {
        margin: 0 1px 0 0;
    }
}

@media (max-width: 400px) {
    .tb-head .tb-tabs--5 .tb-tab {
        padding: 0 3px;
        font-size: 12px;
    }
}

@media (max-width: 359px) {
    .tb-head .tb-tabs--5 .tb-tab {
        padding: 0 2px;
        font-size: 11px;
    }

    .tb-head .tb-tabs--5 .tb-tab__pin {
        width: 10px;
        height: 10px;
    }
}

/* планшет (в т. ч. iPad в портрете: 768/810/820/834 px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .tb-head .tb-tabs {
        gap: 8px;
    }

    .tb-head .tb-tab {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0 16px;
    }

    .tb-head .tb-tab__full {
        display: none;
    }

    .tb-head .tb-tab__short {
        display: inline;
    }
}

/* небольшой ПК и iPad в альбомной ориентации: полные подписи, но с запасом под шрифты Mac/iPad */
@media (min-width: 1024px) and (max-width: 1279px) {
    .tb-head .tb-tab {
        padding: 0 20px;
    }
}

@media (max-width: 767px) {
    /* ---- карточки: компактно, 2 в ряд (промежуток — --tb-grid-gap в разделе 5) ---- */
    ul.product-list.tb-grid > li {
        padding: 6px 6px 8px;
    }

    ul.product-list.tb-grid .tb-card__media .image,
    ul.product-list.tb-grid .product_image_slider {
        border-radius: 8px;
    }

    ul.product-list.tb-grid .badge-wrapper {
        margin: 8px;
    }

    .tb-card__body {
        padding: 6px 2px 0;
    }

    ul.product-list.tb-grid .tb-card__price {
        margin-bottom: 2px;
    }

    ul.product-list.tb-grid .tb-card__price .price {
        font-size: 17px;
    }

    ul.product-list.tb-grid a.tb-card__title {
        min-height: 2.6em;
        margin-bottom: 8px;
        font-size: 13px;
        line-height: 1.3;
    }

    ul.product-list.tb-grid .tb-card__btn,
    ul.product-list.tb-grid .tb-card__buy .button {
        gap: 6px;
        min-height: 36px;
        padding: 0 8px;
        font-size: 13px;
        font-weight: 600;
    }

    .tb-card__ico {
        display: block;
    }

    .tb-card__added-full {
        display: none;
    }

    .tb-card__added-short {
        display: inline;
    }

    /* «Быстрый заказ» на телефоне — только на странице товара */
    ul.product-list button.tb-qo-btn {
        display: none !important;
    }
}

/* ---- шторка «Связаться»: сюда переехали соцсети и «Оценить / Выставить» из шапки телефона ---- */
button.tb-sheet__row.tb-sheet__row--btn {
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--tb-line);
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transform: none;
    box-shadow: none;
}

button.tb-sheet__row.tb-sheet__row--btn:hover {
    background: transparent;
    color: var(--tb-ink);
}

.tb-sheet__acts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.tb-sheet__act {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--tb-dark);
    color: #fff !important;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.tb-sheet__act + .tb-sheet__act {
    background: var(--tb-accent);
}

.tb-sheet__soc {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.tb-sheet__soc a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border: 1px solid var(--tb-line);
    border-radius: 12px;
    color: var(--tb-ink) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.tb-sheet__soc img,
.tb-sheet__soc svg {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

@media (max-width: 767px) {
    /* хлебные крошки: одна строка с прокруткой, без пустоты в 35 px под ними */
    #page-content > .breadcrumbs {
        flex-wrap: nowrap;
        gap: 8px;
        margin: 2px 0 10px;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 13px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #page-content > .breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    #page-content > .breadcrumbs a {
        flex: 0 0 auto;
    }

    .tb-cat-head {
        margin-top: 0;
    }

    /* пилюли сортировки и «Фильтры» — в размер вкладок */
    .tb-toolbar {
        margin-bottom: 10px;
    }

    .tb-chip,
    .tb-toolbar__filters,
    button.tb-toolbar__filters {
        height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    .tb-chips {
        gap: 6px;
    }
}

/* планшет (768–1000 px): остров в одну строку — логотип слева, справа телефон, формы, корзина
   (раньше логотип уезжал вправо, а ссылки переносились на вторую строку) */
@media (min-width: 768px) and (max-width: 1000px) {
    .tb-head .tb-head__island {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 18px;
    }

    .tb-head .tb-head__logo {
        order: 0;
        margin-right: auto;
    }

    .tb-head .tb-head__logo img {
        height: 36px;
    }

    .tb-head .tb-head__left {
        order: 1;
    }

    .tb-head .tb-head__left .tb-soc {
        display: none;
    }

    .tb-head .tb-head__phone {
        margin-left: 0;
        font-size: 15px;
    }

    .tb-head .tb-head__right {
        order: 2;
        flex-wrap: nowrap;
        gap: 14px;
    }

    .tb-head .tb-head__right a {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    /* меньше пустоты перед подвалом */
    .maincontent .container {
        padding-bottom: 16px;
    }

    .tb-footer {
        padding-top: 22px;
    }

    /* подвал: колонки по две, ссылки плотнее — раньше он занимал 3 экрана */
    .tb-footer__grid,
    .tb-footer .tb-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }

    .tb-footer__col li {
        margin-bottom: 0;
        font-size: 14px;
        line-height: 1.3;
    }

    .tb-footer__col a,
    .tb-footer .tb-footer__col a {
        min-height: 34px;
    }

    .tb-footer__col li:not(:has(a)) {
        padding: 6px 0;
    }

    .tb-footer__legal {
        flex-direction: column;
        margin-top: 12px;
        font-size: 12px;
    }

    .tb-footer__legal-links {
        gap: 2px 14px;
    }

    /* страницы «Сайта» (/info/*): заголовок не прилипает к поиску */
    .maincontent article.content > h1 {
        margin: 6px 0 12px;
        font-size: 1.6em;
        line-height: 1.2;
    }
}

/* остатки штатного подвала: «© TEHNO-BU» латиницей и примечание дублируют наш подвал (там уже есть © и реквизиты) */
.globalfooter .footer-note,
.globalfooter .appfooter {
    display: none;
}

/* пилюли сортировки: на телефоне короткие подписи («Новые», «А–Я»), чтобы ряд помещался */
.tb-chip__short {
    display: none;
}

@media (max-width: 767px) {
    .tb-chip__full {
        display: none;
    }

    .tb-chip__short {
        display: inline;
    }
}

/* кнопка «Фильтры»: подпись стояла ниже значка (штатные отступы кнопки) */
button.tb-toolbar__filters {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

button.tb-toolbar__filters > * {
    display: block;
    line-height: 1;
}

@media (max-width: 1024px) {
.tb-toolbar button.tb-toolbar__filters {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
}

/* на компьютере фильтры стоят колонкой — «ручка» шторки там не нужна */
@media (min-width: 1025px) {
    .tb-filters-col .tb-sheet__grip {
        display: none;
    }
}

/* 600–767 px (большие телефоны боком, маленькие планшеты): баннеры в один ряд, как на компьютере —
   в два ряда они здесь вырастают до 120 px в высоту */
@media (min-width: 600px) and (max-width: 767px) {
    .tb-head .tb-cats {
        flex-wrap: nowrap;
    }

    .tb-head .tb-cats::before {
        display: none;
    }

    .tb-head .tb-cats__item:nth-child(n) {
        order: 0;
    }
}

/* под хлебными крошками штатно 35 px пустоты — на компьютере тоже уменьшаем */
@media (min-width: 768px) {
    #page-content > .breadcrumbs {
        margin-bottom: 14px;
    }
}

/* =====================================================================
   Фоновая картинка сайта (Панель → Сайт → Оформление; класс html.tb-bg--image
   ставит tb-profile.js). Подписи, которые лежат не в белой карточке, получают
   светлую плашку — иначе на пёстром фоне их не прочитать. Заголовки разделов
   и категорий так же оформляет tb-profile.css.
   ===================================================================== */
html.tb-bg--image .tb-pp__meta,
html.tb-bg--image .tb-pp__similar-head .tb-pp__h,
html.tb-bg--image .tb-pp__similar-head > a,
html.tb-bg--image .s-order-page .s-section-header .s-header,
html.tb-bg--image .s-order-page .s-delete-button,
html.tb-bg--image .s-order-page .s-back-link,
html.tb-bg--image #page-content > .breadcrumbs {
    width: fit-content;
    padding: 3px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
}

/* Штатный светло-серый цвет крошек на плашке поверх фото почти не читается — делаем темнее.
   Цвет ссылок в default.css задан как var(--gray4) с !important, поэтому меняем саму переменную. */
html.tb-bg--image #page-content > .breadcrumbs {
    --gray4: #4b5563;
}

/* =====================================================================
   Резерв товара, ссылка «Кабинет», длинные плашки (раунд 4)
   ===================================================================== */

/* ---- Резерв (панель → «Продажи → Резерв»; разметку рисуют list-thumbs.html, product.html, order.html) ---- */
.tb-state--reserve {
    background: #334155;
}

.tb-pp .tb-pp__avail.is-res {
    color: #b45309;
}

.tb-pp .tb-pp__reserved {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
}

/* корзина: отложенный товар попал в корзину раньше резерва — форма оформления спрятана, объясняем почему */
.tb-co-reserve {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
    color: #92400e;
    font-size: 15px;
    line-height: 1.45;
}

.tb-co-reserve__title {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
}

.tb-co-reserve__list {
    margin: 0 0 8px;
    padding-left: 20px;
}

.tb-co-reserve p {
    margin: 0;
}

.tb-co-reserve a {
    color: inherit !important;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- «Кабинет» в шапке ПК и планшета (на телефоне — пункт нижней панели) ----
   Логотип стоит по центру острова, и справа от него места мало: со словом «Кабинет» ссылки наезжали
   на логотип на любой ширине (контейнер шапки не шире ~1240 px). Поэтому это квадратная кнопка
   с иконкой рядом с корзиной (как корзина, только светлая); слово «Кабинет» — в подсказке
   и для экранных дикторов. На 1001–1299 px ссылки справа чуть плотнее, чтобы кнопка поместилась
   (замерено: между логотипом и «Оценить онлайн» остаётся ≥ 20 px на любой ширине). */
.tb-head .tb-head__right a.tb-head__cab {
    flex: none;
    justify-content: center;
    width: 46px;
    height: 46px;
    min-height: 0;
    padding: 0;
    border-radius: 12px;
    background: var(--tb-canvas);
    color: var(--tb-ink) !important;
}

.tb-head .tb-head__right a.tb-head__cab:hover {
    color: var(--tb-accent) !important;
}

.tb-head__cab svg {
    flex: 0 0 auto;
}

.tb-head__cab span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (min-width: 1001px) and (max-width: 1299px) {
    .tb-head .tb-head__right {
        gap: 10px;
    }

    .tb-head .tb-head__right a {
        font-size: 15px;
    }
}

@media (min-width: 1001px) and (max-width: 1049px) {
    .tb-head .tb-head__right a {
        font-size: 14px;
    }
}

/* ---- Длинные плашки ----
   Плашки правил из панели («💳 Рассрочка от 1 100 ₽/мес», «Последний экземпляр») и «В резерве до …»
   в одну строку с многоточием теряли смысл: «Рассрочка от 15 800 …» читалось как вся сумма.
   Им разрешены две строки (дальше — многоточие). Плашки состояния короткие и остаются в одну строку. */
.tb-state.tb-rule,
.tb-state.tb-state--reserve {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow-wrap: break-word;
    border-radius: 1em; /* одна строка — та же «таблетка», две строки — скруглённый прямоугольник */
}

/* В сетке плашки идут строками (короткие «Как новый» и «ХИТ» встают рядом), а не столбиком:
   столбик из 5–6 плашек закрывал фото целиком. Больше четырёх в сетке не показываем —
   остальные видны на странице товара (порядок задаёт панель: состояние, скидка, правила по приоритету). */
ul.product-list.tb-grid .badge-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
}

ul.product-list.tb-grid .badge-wrapper > :nth-child(n+5) {
    display: none;
}

/* ---- Вкладка «Топ просмотров»: строка-пояснение под переключателем «За 7 / За 30 дней»
   (разметка — shop/themes/tehnobu/tb-views-top.html; раньше стиль был прямо в разметке) ---- */
.tb-top-note {
    margin: 2px 0 10px;
    color: var(--tb-muted);
    font-size: 13px;
}

/* на фоновой картинке строка лежит не в белой карточке — светлая плашка, как у крошек выше */
html.tb-bg--image .tb-top-note {
    width: fit-content;
    padding: 3px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
}

/* «Топ просмотров»: кнопки периода «За 7 / За 30 дней» прилипали к белому блоку ленты */
.tb-top-period {
    margin-bottom: 12px;
}

/* «Акции»: кнопки «Сначала новые / Дешевле / Дороже» прилипали к белому блоку ленты (зазор ~6 px на телефоне,
   qa-fs-visual №4) — тот же отступ, что у кнопок периода «Топа» выше (разметка — shop/themes/tehnobu/tb-sale.html) */
.tb-sale-sort {
    margin-bottom: 12px;
}


/* ===== Раунд 6c (site-ux): лента «Показать ещё» и «Наверх», тап-цели ≥ 44 px на телефоне (прозрачные рамки с background-clip —
   вид прежний, площадь нажатия больше), контраст крошек и подвала #4b5563, шрифт ≥ 12 px, сетка 1366 / 600–767, градиент у пилюль,
   оформление заказа. Исходник с пояснениями к каждому правилу — /root/backups/r6c-site-ux/src/tehnobu.css ===== */
.tb-inf {
    flex-wrap: wrap;
}
.tb-inf a.tb-inf__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 220px;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 14px;
    background: var(--tb-dark);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: var(--tb-shadow);
}
.tb-inf a.tb-inf__more:hover {
    filter: brightness(1.25);
}
.tb-inf__count {
    flex-basis: 100%;
    color: #4b5563;
    font-size: 13px;
}
.tb-totop {
    position: fixed;
    right: 16px;
    bottom: calc(var(--tb-bnav-h, 0px) + var(--tb-pbar-h, 0px) + 16px);
    z-index: 940;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tb-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: var(--tb-ink);
    box-shadow: 0 6px 18px rgba(16, 24, 40, .16);
    cursor: pointer;
    transform: none;
}
.tb-totop:hover {
    background: #fff;
    color: var(--tb-ink);
    border-color: var(--tb-accent);
}
.tb-totop[hidden],
html.tb-noscroll .tb-totop,
html.tb-lock .tb-totop,
html.tb-filters-open .tb-totop {
    display: none;
}
html:has(.tb-cookie.is-shown) .tb-totop {
    bottom: calc(var(--tb-bnav-h, 0px) + var(--tb-pbar-h, 0px) + 96px);
}
@media (min-width: 768px) {
    .tb-totop {
        right: 24px;
        bottom: 24px;
    }
}
.tb-totop {
    transition: opacity .16s ease, visibility 0s linear 0s;
}
.tb-totop.tb-totop--off {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, visibility 0s linear .16s;
}
@media (prefers-reduced-motion: reduce) {
    .tb-totop,
    .tb-totop.tb-totop--off {
        transition: none;
    }
}
html.tb-totop-room .tb-footer {
    padding-bottom: 72px;
}
@media (min-width: 768px) {
    html.tb-totop-room .tb-footer {
        padding-bottom: 80px;
    }
}
.tb-drawer__info-h {
    padding: 8px 10px 4px;
    color: var(--tb-ink);
    font-weight: 700;
}
.tb-drawer .tb-catalog__kids a {
    min-height: var(--tb-tap);
}
.tb-drawer__info .tb-catalog__kids a {
    padding-left: 10px;
}
.breadcrumbs,
#page-content > .breadcrumbs {
    --gray4: #4b5563;
}
.breadcrumbs a,
#page-content > .breadcrumbs a {
    color: #4b5563 !important;
}
.tb-footer__col a,
.tb-footer__legal,
.tb-footer__legal a,
.tb-footer__col small {
    color: #4b5563;
}
.tb-footer__col a:hover,
.tb-footer__legal a:hover {
    color: var(--tb-ink);
}
.tb-state--good {
    background: #0277bd;
}
@media (max-width: 599px) {
    ul.product-list.tb-grid .tb-state {
        font-size: 12px;
        padding: 2px 7px;
    }
}
@media (min-width: 1024px) and (max-width: 1439px) {
    ul.product-list.tb-grid.tb-grid--sidebar .tb-state {
        font-size: 12px;
        padding: 2px 7px;
    }
}
.tb-bottomnav__item {
    font-size: 12px;
}
.tb-bottomnav__badge {
    font-size: 12px;
}
@media (min-width: 1280px) and (max-width: 1365px) {
    ul.product-list.tb-grid.tb-grid--sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 600px) and (max-width: 767px) {
    ul.product-list.tb-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
button.tb-chip.tb-chip--reset {
    margin: 0;
    color: var(--tb-ink) !important;
    background: var(--tb-card);
    transform: none;
}
button.tb-chip.tb-chip--reset[hidden] {
    display: none;
}
@media (min-width: 1025px) {
    button.tb-chip.tb-chip--reset {
        display: none; 
    }
}
@media (max-width: 767px) {
    .tb-head .tb-head__icon,
    .tb-head .tb-head__m a.tb-cartbtn {
        box-sizing: border-box;
        height: 44px;
        border-top: 2px solid transparent;
        border-bottom: 2px solid transparent;
        border-radius: 12px / 14px;
        background-clip: padding-box;
    }
    .tb-head .tb-searchbar button.tb-searchbar__go,
    .tb-head .tb-searchbar-slot.is-stuck .tb-searchbar button.tb-searchbar__go {
        box-sizing: border-box;
        width: 52px;
        height: 44px;
        border: 4px solid transparent;
        border-radius: 15px;
        background-clip: padding-box;
    }
    .tb-head .tb-searchbar button.tb-searchbar__go {
        top: 0;
        right: 0;
    }
    .tb-head .tb-searchbar-slot.is-stuck .tb-searchbar button.tb-searchbar__go {
        top: 6px;
        right: var(--tb-gutter);
    }
    .tb-head .tb-tabs {
        padding-top: 0;
        padding-bottom: 0;
    }
    .tb-head .tb-tab {
        box-sizing: border-box;
        height: 44px;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-radius: 11px / 15px;
        background-clip: padding-box;
    }
    .tb-chip,
    .tb-toolbar__filters,
    button.tb-toolbar__filters {
        height: var(--tb-tap);
    }
    .tb-chips.tb-chips--more {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }
    #page-content > .breadcrumbs {
        margin-top: -6px;
        margin-bottom: 4px;
    }
    #page-content > .breadcrumbs a {
        display: inline-flex;
        align-items: center;
        min-height: var(--tb-tap);
    }
    ul.product-list.tb-grid .tb-card__btn,
    ul.product-list.tb-grid .tb-card__buy .button,
    ul.product-list button.tb-qo-btn {
        min-height: var(--tb-tap);
    }
    ul.product-list.tb-grid a.tb-card__title {
        box-sizing: content-box;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        margin-top: -6px;
        margin-bottom: 2px;
    }
    .tb-pp__similar-head > a,
    .tb-gal__empty a {
        display: inline-flex;
        align-items: center;
        min-height: var(--tb-tap);
    }
    .tb-footer__col a,
    .tb-footer .tb-footer__col a {
        min-height: var(--tb-tap);
    }
    .tb-footer__soc a {
        justify-content: center;
        min-width: var(--tb-tap);
    }
    .tb-footer__legal-links {
        gap: 0 14px;
    }
    .tb-footer__legal a {
        display: inline-flex;
        align-items: center;
        min-height: var(--tb-tap);
    }
    html body .s-order-page .s-order-section > .s-section-header .s-delete-button {
        display: inline-flex;
        align-items: center;
        min-height: var(--tb-tap);
    }
    html body .s-order-page .s-order-section > .s-section-body .wa-cart-body .wa-product .wa-product-body .wa-column-quantity .wa-quantity-cart-section .wa-button-wrapper .wa-button,
    html body .s-order-page .s-order-section > .s-section-body .wa-cart-body .wa-product .wa-product-body .wa-column-quantity .wa-quantity-cart-section .wa-button-wrapper button {
        min-width: var(--tb-tap);
        min-height: var(--tb-tap);
    }
}
.tb-state {
    font-size: max(12px, .74em);
}
.tb-cartbtn b {
    font-size: 12px;
}
@media (max-width: 767px) {
    html body .s-order-page .wa-product .wa-details a.wa-name {
        display: flex;
        align-items: center;
        min-height: var(--tb-tap);
    }
    html body .s-order-page .wa-quantity-cart-section input.wa-field,
    html body .s-order-page .s-order-section > .s-section-body .wa-cart-body .wa-product .wa-product-body .wa-column-quantity .wa-quantity-cart-section .wa-field-wrapper .wa-field {
        box-sizing: border-box;
        height: var(--tb-tap);
        min-height: var(--tb-tap);
    }
    html body .s-order-page a.google-geolink,
    html body .s-order-page .wa-payment-name a {
        display: inline-flex;
        align-items: center;
        min-height: var(--tb-tap);
    }
    html body .s-order-page .s-order-section > .s-section-body .wa-form-body .wa-agreement-wrapper input.wa-checkbox {
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
        flex: none;
        width: 44px;
        height: 44px;
        margin: -10px -11px -11px;
        border: 11px solid transparent;
        border-radius: 16px;
        background: #fff no-repeat center / 16px 16px;
        background-clip: padding-box;
        background-origin: padding-box;
        box-shadow: inset 0 0 0 2px #9ca3af;
        cursor: pointer;
    }
    html body .s-order-page .s-order-section > .s-section-body .wa-form-body .wa-agreement-wrapper input.wa-checkbox:checked {
        background-color: var(--tb-dark);
        box-shadow: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    html body .s-order-page .s-order-section > .s-section-body .wa-form-body .wa-agreement-wrapper input.wa-checkbox.wa-error {
        box-shadow: inset 0 0 0 2px var(--tb-sale);
    }
    html body .s-order-page .s-order-section > .s-section-body .wa-form-body .wa-agreement-wrapper input.wa-checkbox:focus-visible {
        outline: 2px solid var(--tb-accent);
        outline-offset: -9px;
    }
}

/* =====================================================================================================
   РАУНД 7 (19.10.2026) — список владельца «Мои дела», plan10/site.md:
   S1 новая карточка (образец img/05), S6 город над шапкой (img/06), S7 баннер под «Похожими»,
   S8–S10 вкладки главной (Самые новые · ХИТ · PREMIUM, значок «Отделения» крупнее, нажатая шире).
   Блок стоит в КОНЦЕ файла и перекрывает прежние правила карточки и вкладок.
   ===================================================================================================== */

/* ---------- S1. Карточка товара ---------- */
ul.product-list.tb-grid > li.tb-card { position: relative; }
ul.product-list.tb-grid .tb-card__media { position: relative; display: block; }

/* слева вверху — только «В резерве» и «★ Рекомендуем»; справа оставляем место сердечку */
ul.product-list.tb-grid .tb-card__flags { right: 48px; }

/* сердечко «в избранное» (справа вверху фото) */
ul.product-list.tb-grid .tb-fav,
.tb-fav {
    position: absolute;
    z-index: 3;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #1f2937;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .16);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tb-fav:hover { color: #e53935; }
.tb-fav[aria-pressed="true"] { color: #e53935; }
.tb-fav[aria-pressed="true"] svg path { fill: currentColor; }
.tb-fav:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }
@media (max-width: 767px) {
    ul.product-list.tb-grid .tb-fav { top: 10px; right: 10px; width: 32px; height: 32px; }
    ul.product-list.tb-grid .tb-fav svg { width: 19px; height: 19px; }
    ul.product-list.tb-grid .tb-card__flags { right: 40px; }
}

/* бейджи сайта: столбиком у правого края и у низа фото, сверху вниз по приоритету */
ul.product-list.tb-grid .tb-card__badges {
    position: absolute;
    z-index: 2;
    right: -4px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    max-width: calc(100% - 4px);
    pointer-events: none;
}
ul.product-list.tb-grid .tb-card__badges .tb-state,
.tb-gal__rules .tb-state {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .22);
}

/* состояние — таблетка по центру нижнего края фото, наполовину на фото */
ul.product-list.tb-grid .tb-card__cond {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 0;
    display: flex;
    max-width: calc(100% - 16px);
    transform: translate(-50%, 50%);
    pointer-events: none;
}
ul.product-list.tb-grid .tb-card__cond .tb-state {
    padding: 3px 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .22);
}
ul.product-list.tb-grid .tb-card__body--cond { padding-top: 18px; }
/* цена: крупно, старая зачёркнута, под ней процент */
ul.product-list.tb-grid.tb-grid--r7 .tb-card__price {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0 10px;
    margin: 0 0 4px;
    min-width: 0;
}
ul.product-list.tb-grid.tb-grid--r7 .tb-card__price .price {
    font-size: 1.45em;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .01em;
    color: #039be5;
}
ul.product-list.tb-grid.tb-grid--r7 .tb-card__old {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding-top: 1px;
    line-height: 1.15;
}
ul.product-list.tb-grid.tb-grid--r7 .tb-card__old .compare-at-price {
    font-size: .85em;
    color: #9ca3af;
}
.tb-card__pct {
    font-size: .85em;
    font-weight: 800;
    color: #039be5;
}
@media (max-width: 599px) {
    ul.product-list.tb-grid.tb-grid--r7 .tb-card__price .price { font-size: 1.22em; }
    ul.product-list.tb-grid.tb-grid--r7 .tb-card__price { gap: 0 6px; }
}

/* где лежит */
.tb-card__where {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: -2px 0 8px;
    color: var(--tb-muted);
    font-size: 12.5px;
    line-height: 1.3;
}
.tb-card__where svg { flex: none; }
.tb-card__where span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* «Купить» — крупная синяя таблетка (на телефоне — на всю ширину) */
ul.product-list.tb-grid.tb-grid--r7 .tb-card__btn,
ul.product-list.tb-grid.tb-grid--r7 .tb-card__buy .button { border-radius: 999px; }
ul.product-list.tb-grid.tb-grid--r7 .tb-card__btn.addtocart-btn.tb-card__btn--buy {
    width: auto;
    min-width: 62%;
    min-height: 46px;
    padding: 0 26px;
    background: #0b8de6;
    color: #fff;
    font-size: 1.08em;
    font-weight: 800;
    letter-spacing: .01em;
}
ul.product-list.tb-grid.tb-grid--r7 .tb-card__btn.addtocart-btn.tb-card__btn--buy:hover { background: #0a76c2; color: #fff; }
ul.product-list.tb-grid.tb-grid--r7 .tb-qo-btn { display: none; }
@media (max-width: 767px) {
    ul.product-list.tb-grid.tb-grid--r7 .tb-card__btn.addtocart-btn.tb-card__btn--buy { width: 100%; min-width: 0; min-height: 44px; padding: 0 10px; font-size: 1em; }
}

/* телефон: бейджи мельче и не больше трёх */
@media (max-width: 599px) {
    ul.product-list.tb-grid .tb-card__badges { right: -3px; bottom: 15px; gap: 3px; }
    ul.product-list.tb-grid:not([class*="tb-grid--bph"]) .tb-card__badges > :nth-child(n+4) { display: none; }
    ul.product-list.tb-grid .tb-card__badges .tb-state { padding: 2px 7px; font-size: 10px; letter-spacing: .04em; }
    ul.product-list.tb-grid .tb-card__cond .tb-state { padding: 2px 9px; font-size: 11px; }
    ul.product-list.tb-grid .tb-card__body--cond { padding-top: 15px; }
    .tb-card__where { font-size: 11.5px; }
}
/* ПК, раздел с колонкой фильтров (карточки ~165 px) — бейджи как на телефоне */
@media (min-width: 1024px) and (max-width: 1439px) {
    ul.product-list.tb-grid.tb-grid--sidebar .tb-card__badges .tb-state { padding: 2px 7px; font-size: 10px; letter-spacing: .04em; }
    ul.product-list.tb-grid.tb-grid--sidebar .tb-card__price .price { font-size: 1.2em; }
}
ul.product-list.tb-grid > li.tb-card--sold .tb-card__price .price { color: var(--tb-muted); }

/* крупная карточка (tb-featured, 2 клетки): сердечко у правого края фото, а не карточки */
ul.product-list.tb-grid > li.tb-fw .tb-fav { right: calc(50% + 14px); }
@media (max-width: 599px) {
    ul.product-list.tb-grid > li.tb-fw .tb-fav { right: 10px; }
}

/* страница товара: бейджи сайта столбиком справа внизу фото галереи */
.tb-gal { position: relative; }
.tb-gal__rules {
    position: absolute;
    z-index: 3;
    right: 10px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    max-width: 70%;
    pointer-events: none;
}
.tb-gal__rules .tb-state { font-size: 13px; padding: 4px 12px; }
@media (max-width: 599px) {
    .tb-gal__rules { right: 8px; bottom: 30px; gap: 4px; }
    .tb-gal:not([class*="tb-gal--bph"]) .tb-gal__rules > :nth-child(n+4) { display: none; }
    .tb-gal__rules .tb-state { font-size: 11px; padding: 3px 9px; }
}
.tb-pp__where b { font-weight: 700; }
/* ---------- S6. Город над шапкой ---------- */
.tb-city-bar {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 28px;
    margin: -6px 0 6px;
}
.tb-city { position: relative; }
.tb-city > summary { list-style: none; }
.tb-city > summary::-webkit-details-marker { display: none; }
.tb-city__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 6px 0 2px;
    border-radius: 8px;
    color: var(--tb-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.tb-city__btn:hover { color: #0277bd; }
.tb-city__btn:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }
.tb-city__caret { transition: transform .2s; }
.tb-city[open] .tb-city__caret { transform: rotate(180deg); }
.tb-city__list {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    display: grid;
    gap: 2px;
    min-width: 230px;
    padding: 8px;
    border: 1px solid var(--tb-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--tb-shadow-hover);
}
.tb-city__hint { margin: 2px 8px 6px; color: var(--tb-muted); font-size: 12.5px; line-height: 1.3; }
.tb-city__opt {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--tb-ink);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
.tb-city__opt:hover { background: #f3f4f6; }
.tb-city__opt.is-active { background: #e1f5fe; color: #0277bd; font-weight: 700; }
@media (max-width: 767px) {
    .tb-city-bar { min-height: 26px; margin: -8px 0 4px; }
    .tb-city { position: static; }
    .tb-city__btn { min-height: 26px; font-size: 13px; }
    .tb-city__list { left: 0; right: 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .tb-city__caret { transition: none; } }

/* ---------- S8–S10. Вкладки главной ---------- */
.tb-head .tb-tabs.tb-tabs--r7 { flex-wrap: nowrap; gap: 8px; }
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    overflow: hidden;
    transition: flex-grow .28s ease, background-color .2s, color .2s;
}
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab--active { flex-grow: 2.2; }
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab__ico { flex: none; }
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab__full,
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab__short { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* значок «Отделения» крупнее: 24 px на ПК, 20 px на телефоне (вкладка по высоте не растёт) */
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab__pin { width: 24px; height: 24px; margin: 0; }
/* PREMIUM — всегда чёрная; выбранная отличается шириной (docs4 26.10: синюю обводку убрали — владелец видел «синий овал») */
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab--premium { border-color: #000; background: #000; color: #fff; }
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab--premium:hover { border-color: #000; background: #1f1f1f; color: #fff; }
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab--premium.tb-tab--active { background: #000; color: #fff; box-shadow: none; }
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab--premium .tb-tab__full,
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab--premium .tb-tab__short { letter-spacing: .06em; font-weight: 800; }
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab--hit .tb-tab__full,
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab--hit .tb-tab__short { letter-spacing: .04em; font-weight: 800; }
/* шесть-семь вкладок (появились «Топ» и «Акции») — у «Топа» короткая подпись */
.tb-head .tb-tabs--r7.tb-tabs--many .tb-tab--top .tb-tab__full { display: none; }
.tb-head .tb-tabs--r7.tb-tabs--many .tb-tab--top .tb-tab__short { display: inline; }
.tb-head .tb-tabs.tb-tabs--r7.tb-tabs--noanim .tb-tab { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab { transition: none; }
}
/* телефон: у ненажатых — только значок, нажатая — значок и подпись */
@media (max-width: 767px) {
    .tb-head .tb-tabs.tb-tabs--r7 {
        gap: 2px;
        margin-top: 8px;
        padding: 0 3px;
        border: 1px solid var(--tb-line);
        border-radius: 14px;
        background: var(--tb-card);
        box-shadow: var(--tb-shadow);
    }
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab {
        flex: 1 1 0;
        min-width: 40px;
        box-sizing: border-box;
        height: 44px;
        gap: 5px;
        padding: 0 6px;
        border: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-radius: 11px / 15px;
        background: transparent;
        background-clip: padding-box;
        box-shadow: none;
        font-size: 13px;
    }
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab--active { flex-grow: 2.6; background: var(--tb-accent); color: #fff; }
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab--premium { background: #000; color: #fff; }
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab--premium.tb-tab--active { box-shadow: none; }
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab .tb-tab__full,
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab .tb-tab__short { display: none; }
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab--active .tb-tab__short { display: inline; }
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab__pin { width: 20px; height: 20px; }
}
@media (max-width: 359px) {
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab { min-width: 34px; padding: 0 3px; font-size: 12px; }
}

/* ---------- S7. Баннер на всю ширину под «Похожими» ---------- */
.tb-pp-banner {
    position: relative;
    width: 100vw;
    margin: 28px calc(50% - 50vw) 8px;
}
.tb-pp-banner[hidden] { display: none; }
.tb-pp-banner__in { position: relative; max-width: 1920px; margin: 0 auto; }
.tb-pp-banner__link { display: block; }
.tb-pp-banner__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; background: #eef2f6; }
.tb-pp-banner__label { position: absolute; right: 10px; bottom: 8px; }
@media (max-width: 767px) {
    .tb-pp-banner { margin-top: 20px; }
    .tb-pp-banner__img { aspect-ratio: 8 / 5; }
}
.tb-pp-banner .tb-pp-banner__label { top: auto; right: 10px; bottom: 8px; }

/* ---------- п. 7. Контакты в окнах «Оценить технику онлайн» и «Выставить на комиссию» ---------- */
.tb-form__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: -2px 0 14px;
}
.tb-fc__lead { width: 100%; color: var(--tb-muted); font-size: 13px; line-height: 1.35; }
.tb-fc {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--tb-line);
    border-radius: 999px;
    background: #fff;
    color: var(--tb-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.tb-fc:hover { border-color: var(--tb-accent); color: var(--tb-ink); }
.tb-fc--phone { font-weight: 700; }
.tb-fc--tg { color: #0288d1; }
.tb-fc--vk { color: #0077ff; }
.tb-fc--max { color: #6a1b9a; }

/* =====================================================================================================
   R7B (19.10.2026) — строитель r7b-build, просьба владельца 19.10 (чат):
   1) бейджи сайта (ХИТ, РАССРОЧКА, УДАР ПО ЦЕНАМ, PREMIUM, ОТ ПАРТНЁРА, НОВЫЙ ЗАВОЗ) — примерно вдвое меньше:
      аккуратные таблетки столбиком у правого края низа фото (образец владельца plan10/img/05_image5.png);
      телефон — 9 px, ПК — 10 px, страница товара — 11 px (телефон 9,5 px);
   2) фото карточки в списках — вытянутое 4:5 (было 1:1) в скруглённой рамке на светлом фоне.
      Вертикальные фото (ширина:высота 0,72–0,92, R7B-fix-1) заполняют рамку (cover по центру, класс tb-img--tall ставит
      tb-ux.js, блок R7B); квадратные и горизонтальные — целиком (contain), чтобы не резать товар;
      заглушка «нет фото» — cover. Крупные карточки «2 места» (li.tb-fw) не трогаем.
   Блок стоит в КОНЦЕ файла и перекрывает правила раунда 7.
   ===================================================================================================== */

/* ---------- 1. бейджи сайта в карточках списков ---------- */
ul.product-list.tb-grid .tb-card__badges { right: -3px; bottom: 16px; gap: 2px; }
ul.product-list.tb-grid .tb-card__badges .tb-state {
    padding: 1px 6px;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: .02em;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .18);
}
@media (max-width: 599px) {
    ul.product-list.tb-grid .tb-card__badges { right: -2px; bottom: 14px; gap: 2px; }
    ul.product-list.tb-grid .tb-card__badges .tb-state { padding: 1px 5px; font-size: 9px; letter-spacing: .01em; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
    ul.product-list.tb-grid.tb-grid--sidebar .tb-card__badges .tb-state { padding: 1px 5px; font-size: 10px; letter-spacing: .01em; }
}
/* страница товара — пропорционально */
.tb-gal__rules { gap: 3px; }
.tb-gal__rules .tb-state { font-size: 11px; padding: 2px 8px; line-height: 1.3; letter-spacing: .03em; }
@media (max-width: 599px) {
    .tb-gal__rules { gap: 2px; }
    .tb-gal__rules .tb-state { font-size: 9.5px; padding: 1px 6px; letter-spacing: .02em; }
}

/* ---------- 2. фото карточки 4:5 ---------- */
ul.product-list.tb-grid > li:not(.tb-fw) .tb-card__media .image,
ul.product-list.tb-grid > li:not(.tb-fw) .product_image_slider {
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    background: #f2f4f7;
}
ul.product-list.tb-grid .tb-card__media .image img,
ul.product-list.tb-grid .tb-card__media img.image-frame {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
}
ul.product-list.tb-grid .tb-card__media img.tb-img--tall,
ul.product-list.tb-grid .tb-card__media img[src*="dummy"] { object-fit: cover; }
@media (max-width: 767px) {
    ul.product-list.tb-grid > li:not(.tb-fw) .tb-card__media .image,
    ul.product-list.tb-grid > li:not(.tb-fw) .product_image_slider { border-radius: 12px; }
}
ul.product-list.tb-grid > li:not(.tb-fw) .tb-card__media .image > img {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* рамка 4:5 задаёт высоту; картинка ровно по рамке на любом экране */
    height: 100% !important; /* default.shop.css на ≤768 px ставит .image img { height: auto !important } */
}
/* заглушка-скелет при подгрузке фильтров раздела — той же пропорции */
.tb-card--skeleton .skeleton-line:first-child { aspect-ratio: 4 / 5 !important; }

/* =====================================================================================================
   R7B-fix-2 (19.10.2026) — исправитель r7b-fix-2 (проверка R7B):
   1) телефон: бейджи карточек ещё меньше (владелец просил «раза в 2»): 8,5 px, без разрядки, паддинг 1×4;
   2) узкие телефоны (<390 px): чипы сортировки чуть уже, чтобы на 375/360 все четыре вкладки главной помещались.
   ===================================================================================================== */
@media (max-width: 599px) {
    ul.product-list.tb-grid .tb-card__badges .tb-state { padding: 1px 4px; font-size: 8.5px; line-height: 1.25; letter-spacing: 0; }
}
@media (max-width: 389px) {
    .tb-chips { gap: 4px; }
    .tb-chips > .tb-chip { padding: 0 9px; }
}

/* r7-fix-site (19.10.2026): лимит бейджей на телефоне — из панели «Сайт → Бейджи сайта» (класс tb-grid--bph<N> / tb-gal--bph<N>,
   его ставит тема по tb-badge-max.html); на ПК лимит режет сама разметка (крон shop tbbadges + тема) */
@media (max-width: 599px) {
    ul.product-list.tb-grid.tb-grid--bph1 .tb-card__badges > :nth-child(n+2),
    ul.product-list.tb-grid.tb-grid--bph2 .tb-card__badges > :nth-child(n+3),
    ul.product-list.tb-grid.tb-grid--bph3 .tb-card__badges > :nth-child(n+4),
    ul.product-list.tb-grid.tb-grid--bph4 .tb-card__badges > :nth-child(n+5),
    ul.product-list.tb-grid.tb-grid--bph5 .tb-card__badges > :nth-child(n+6),
    .tb-gal.tb-gal--bph1 .tb-gal__rules > :nth-child(n+2),
    .tb-gal.tb-gal--bph2 .tb-gal__rules > :nth-child(n+3),
    .tb-gal.tb-gal--bph3 .tb-gal__rules > :nth-child(n+4),
    .tb-gal.tb-gal--bph4 .tb-gal__rules > :nth-child(n+5),
    .tb-gal.tb-gal--bph5 .tb-gal__rules > :nth-child(n+6) { display: none; }
}
/* r7-fix-site: товар без фото — бейджи сайта строкой под кнопкой «Запросить фото», а не столбиком поверх неё */
.tb-gal.tb-gal--empty { flex-direction: column; }
.tb-gal.tb-gal--empty .tb-gal__empty { order: 1; }
.tb-gal.tb-gal--empty .tb-gal__rules {
    order: 2;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin: 0 10px 12px;
}

/* =====================================================================================================
   r26b (26.10.2026) — просьбы владельца по сайту (документ 26.10, скриншоты 01, 19, 20, 21):
   1) выбор города — внутри строки поиска справа (над шапкой полосы больше нет), ПК и телефон;
   2) телефон: «‹ Назад» на внутренних страницах; ВК, ТГ, МАКС рядом с телефоном; остров шапки и поиск
      закреплены вверху экрана (едут вместе при прокрутке); под поиском — «Оценить технику по фото» и «Сдать на комиссию»;
   3) ПК: «Оценить онлайн» → «Оценить технику по фото», «Выставить товар» → «Сдать на комиссию»; ♥ «Избранное» у корзины;
   4) у нажатой вкладки ХИТ / PREMIUM подпись видна всегда (как у «Новинки»);
   5) ленты пилюль (подразделы, сортировка): слева такое же затухание, как справа;
   6) страница «Избранное» (/search/?tb_fav=1, tb-fav.html темы магазина).
   ===================================================================================================== */

/* ---------- 1. Поле поиска с выбором города: общая рамка, город справа внутри поля ---------- */
.tb-head .tb-searchbar .tb-searchbar__field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    height: 50px;
    margin: 0;
    border: 2px solid var(--tb-accent);
    border-radius: 16px;
    background: var(--tb-card);
}
.tb-head .tb-searchbar .tb-searchbar__field:focus-within {
    box-shadow: 0 0 0 3px rgba(41, 182, 246, .2);
}
.tb-head .tb-searchbar-slot .tb-searchbar .tb-searchbar__field > input[type="search"],
.tb-head .tb-searchbar-slot.is-stuck .tb-searchbar .tb-searchbar__field > input[type="search"] {
    order: 0;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 10px 0 18px;
    border: 0;
    border-radius: 14px 0 0 14px;
    background: transparent;
    box-shadow: none;
    outline: none;
}
.tb-head .tb-searchbar-slot.is-stuck .tb-searchbar .tb-searchbar__field {
    height: 44px;
}
.tb-searchbar__field .tb-city--field {
    position: relative;
    flex: none;
    align-self: stretch;
    display: flex;
    align-items: center;
}
/* тонкая черта между текстом поиска и городом */
.tb-searchbar__field .tb-city--field::before {
    content: "";
    flex: none;
    width: 1px;
    height: 22px;
    background: var(--tb-line);
}
.tb-searchbar__field .tb-city--field > .tb-city__btn {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding: 0 14px 0 10px;
    border-radius: 0 14px 14px 0;
    font-size: 14px;
    white-space: nowrap;
}
.tb-searchbar__field .tb-city--field > .tb-city__btn:focus-visible { outline-offset: -3px; }
.tb-searchbar__field .tb-city--field .tb-city__list {
    z-index: 960;
    top: calc(100% + 8px);
    left: auto;
    right: -2px;
    text-align: left;
}
/* пункты списка городов теперь внутри формы поиска — снимаем с них оформление кнопок строки поиска */
.tb-head .tb-searchbar .tb-city--field button.tb-city__opt,
.tb-head .tb-searchbar .tb-city--field button.tb-city__opt:active {
    display: block;
    flex: none;
    width: 100%;
    height: auto;
    min-height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--tb-ink);
    filter: none;
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 42px;
    text-align: left;
    transform: none;
}
.tb-head .tb-searchbar .tb-city--field button.tb-city__opt:hover {
    background: #f3f4f6;
    color: var(--tb-ink);
    filter: none;
}
.tb-head .tb-searchbar .tb-city--field button.tb-city__opt.is-active {
    background: #e1f5fe;
    color: #0277bd;
    font-weight: 700;
}
.tb-head .tb-searchbar .tb-city--field button.tb-city__opt:focus-visible {
    outline: 2px solid var(--tb-accent);
    outline-offset: -2px;
}

/* ---------- 3. ПК: «Избранное» — светлый квадрат с сердечком и счётчиком рядом с корзиной ---------- */
.tb-head a.tb-favbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    width: 46px;
    height: 46px;
    min-height: 0;
    padding: 0;
    border-radius: 12px;
    background: var(--tb-canvas);
    color: var(--tb-ink) !important;
    text-decoration: none;
    transition: color .15s ease;
}
.tb-head a.tb-favbtn:hover,
.tb-head a.tb-favbtn.is-active {
    color: #e53935 !important;
}
.tb-head a.tb-favbtn.is-active svg path { fill: currentColor; }
.tb-favbtn svg { display: block; }
.tb-favbtn b {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border: 2px solid var(--tb-card);
    border-radius: 10px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.tb-favbtn b[hidden] { display: none; }
@media (min-width: 768px) {
    .tb-searchbar-slot.is-stuck .tb-searchbar__cart { gap: 10px; }
    .tb-searchbar-slot.is-stuck .tb-searchbar a.tb-favbtn { width: 44px; height: 44px; }
}
/* сердечко «подпрыгивает», когда товар добавили в избранное */
@keyframes tb-fav-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.tb-fav-bump { animation: tb-fav-bump .35s ease-out; }
@media (prefers-reduced-motion: reduce) { .tb-fav-bump { animation: none; } }

/* ПК (≥1001 px): подписи стали длиннее — правая колонка острова берёт столько места, сколько ей нужно;
   логотип по центру, когда хватает ширины (на 1001–1299 px смещается влево не больше чем на ~60 px) */
@media (min-width: 1001px) {
    .tb-head .tb-head__island {
        grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    }
}
@media (min-width: 1001px) and (max-width: 1299px) {
    .tb-head .tb-head__right a:not(.tb-cartbtn):not(.tb-favbtn) { font-size: 14px; }
}
/* планшет (768–1000 px): длинные подписи — в две строки, чтобы остров остался в одну строку */
@media (min-width: 768px) and (max-width: 1000px) {
    .tb-head .tb-head__right { gap: 12px; }
    .tb-head .tb-head__right a:not(.tb-cartbtn):not(.tb-favbtn) {
        max-width: 118px;
        font-size: 14px;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }
}

/* ---------- 2. Телефон: «Назад», соцсети у телефона, закреплённая шапка, кнопки под поиском ---------- */
.tb-head__back,
.tb-head__msoc,
.tb-head__acts {
    display: none;
}
@media (max-width: 767px) {
    :root { --tb-stick-h: 124px; } /* точную высоту ставит tb-ux.js */

    /* остров + поиск закреплены вверху экрана; место под них держит отступ .tb-head (страница не прыгает) */
    .tb-head {
        padding-top: var(--tb-stick-h);
    }
    .tb-head .tb-head__stick {
        position: fixed;
        z-index: 900;
        top: 0;
        left: 0;
        right: 0;
        box-sizing: border-box;
        padding: 8px var(--tb-gutter);
        background: var(--tb-canvas);
        box-shadow: 0 4px 18px rgba(16, 24, 40, .10);
        transition: background-color .2s ease, box-shadow .2s ease;
    }
    /* в самом верху страницы под шапкой видна фоновая картинка сайта; подложка — с началом прокрутки */
    html.tb-js:not(.tb-scrolled) .tb-head .tb-head__stick {
        background: transparent;
        box-shadow: none;
    }
    /* переходы по якорям (#branches и т. п.) — не под закреплённую шапку */
    html { scroll-padding-top: calc(var(--tb-stick-h) + 8px); }
    html .tb-branches,
    html .tb-branchx { scroll-margin-top: 0; }

    /* остров: [‹] логотип … ВК ТГ МАКС ☎ корзина */
    .tb-head .tb-head__island {
        justify-content: flex-start;
        gap: 6px;
        padding: 0 8px 0 14px;
    }
    .tb-head .tb-head__island.tb-head__island--back {
        gap: 4px;
        padding-left: 6px;
    }
    .tb-head .tb-head__logo { margin-right: auto; }
    .tb-head .tb-head__logo img { height: 28px; }
    .tb-head a.tb-head__back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 34px;
        height: 40px;
        border-radius: 12px;
        color: var(--tb-ink) !important;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .tb-head a.tb-head__back:active { background: var(--tb-canvas); }
    .tb-head .tb-head__m { gap: 4px; }
    .tb-head .tb-head__msoc {
        display: flex;
        align-items: center;
    }
    .tb-head a.tb-msoc {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 30px;
        height: 40px;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .tb-head a.tb-msoc img,
    .tb-head a.tb-msoc svg {
        display: block;
        width: 24px;
        height: 24px;
        object-fit: contain;
    }
    .tb-head .tb-head__m .tb-head__icon,
    .tb-head .tb-head__m a.tb-cartbtn {
        width: 40px;
        height: 40px;
    }

    /* поиск: город внутри поля слева от лупы */
    .tb-head .tb-searchbar .tb-searchbar__field {
        order: 0;
        height: 44px;
        padding-right: 50px; /* место под кнопку-лупу (она стоит поверх поля справа) */
        border-radius: 14px;
    }
    .tb-head .tb-searchbar-slot .tb-searchbar .tb-searchbar__field > input[type="search"] {
        padding: 0 6px 0 14px;
        border-radius: 12px 0 0 12px;
    }
    .tb-searchbar__field .tb-city--field { position: static; }
    .tb-searchbar__field .tb-city--field::before { height: 20px; }
    .tb-searchbar__field .tb-city--field > .tb-city__btn {
        gap: 4px;
        padding: 0 4px 0 8px;
        border-radius: 0;
        font-size: 13px;
    }
    .tb-searchbar__field .tb-city--field .tb-city__pre { display: none; }
    .tb-searchbar__field .tb-city--field .tb-city__list {
        top: calc(100% + 6px);
        left: -2px;
        right: -2px;
        min-width: 0;
    }

    /* кнопки под поиском: две в ряд; длинная подпись переносится на вторую строку */
    .tb-head .tb-head__acts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 8px;
    }
    .tb-head a.tb-head__act {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        box-sizing: border-box;
        min-width: 0;
        min-height: 44px;
        padding: 5px 10px;
        border: 1px solid var(--tb-line);
        border-radius: 14px;
        background: var(--tb-card);
        box-shadow: var(--tb-shadow);
        color: var(--tb-ink) !important;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .tb-head a.tb-head__act:active { background: #e1f5fe; }
    .tb-head .tb-head__act svg {
        flex: none;
        display: block;
        color: var(--tb-accent);
    }
    .tb-head--compact .tb-head__acts { margin-bottom: 4px; }
}
/* самые узкие телефоны (360–379 px): значки и логотип чуть меньше, чтобы с «‹» всё поместилось в строку */
@media (max-width: 379px) {
    .tb-head .tb-head__logo img { height: 26px; }
    .tb-head a.tb-msoc { width: 26px; }
    .tb-head a.tb-msoc img,
    .tb-head a.tb-msoc svg { width: 22px; height: 22px; }
}

/* ---------- 4. Вкладки на телефоне: у нажатой (в т. ч. ХИТ и PREMIUM) подпись всегда целиком ----------
   Раньше ширина нажатой вкладки росла анимацией от нуля, а подпись обрезалась многоточием — в Safari/WebView
   подпись могла так и остаться невидимой. Теперь нажатая вкладка не уже своего содержимого. */
@media (max-width: 767px) {
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab--active {
        flex-shrink: 0;
        min-width: max-content;
    }
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab--active .tb-tab__short {
        overflow: visible;
        text-overflow: clip;
    }
}

/* ---------- 5. Ленты пилюль: затухание слева, когда лента прокручена от начала (и справа, когда есть ещё) ---------- */
.tb-chips.tb-chips--less {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
    mask-image: linear-gradient(to right, transparent, #000 40px);
}
.tb-chips.tb-chips--more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.tb-chips.tb-chips--less.tb-chips--more {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

/* ---------- 6. Страница «Избранное» ---------- */
.tb-favpage__note {
    margin: -2px 0 14px;
    color: var(--tb-muted);
    font-size: 14px;
    line-height: 1.4;
}
html.tb-bg--image .tb-favpage__note {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
}
.tb-favpage__sec { margin: 0 0 24px; }
.tb-favpage__h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
    font-size: 1.2em;
    line-height: 1.25;
}
html.tb-bg--image .tb-favpage__h {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 8px 4px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
}
html.tb-bg--image .tb-favpage__h span { background: var(--tb-canvas); box-shadow: none; }
.tb-favpage__h span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--tb-card);
    box-shadow: var(--tb-shadow);
    font-size: 13px;
    font-weight: 700;
}
.tb-favsold {
    margin: 0 0 16px;
    padding: 12px;
    border: 1px solid var(--tb-line);
    border-radius: 16px;
    background: var(--tb-card);
    box-shadow: var(--tb-shadow);
}
.tb-favsold__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding-right: 48px;
}
.tb-favsold__img {
    flex: none;
    width: 64px;
    height: 80px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--tb-canvas);
}
.tb-favsold__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .75;
    filter: grayscale(.7);
}
.tb-favsold__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.tb-favsold__tag {
    padding: 2px 8px;
    border-radius: 6px;
    background: #4b5563;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.tb-favsold__name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--tb-ink) !important;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tb-favsold__price {
    color: var(--tb-muted);
    font-size: 14px;
    text-decoration: line-through;
}
.tb-favsold .tb-fav.tb-favsold__fav {
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
}
.tb-favsold__lead {
    margin: 12px 0 8px;
    font-size: 14px;
    font-weight: 600;
}
.tb-favsold__lead a { font-weight: 400; }
/* похожие под проданным: на ПК до 4 в ряд, на телефоне — 2 */
.tb-favsold ul.product-list.tb-grid { margin: 0; }
@media (min-width: 1024px) {
    .tb-favsold ul.product-list.tb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .tb-favsold { padding: 10px; }
    .tb-favsold ul.product-list.tb-grid > li:nth-child(n+3) { display: none; }
}
/* нижняя панель телефона: пять пунктов (Главная · Каталог · Избранное · Корзина · Связаться) */
@media (max-width: 767px) {
    .tb-bottomnav .tb-bottomnav__item > span:last-child {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* =====================================================================================================
   r26b-fix-1 (26.10.2026) — исправления после проверки группы site:
   1) вкладки: анимация нажатой — только ключевыми кадрами (без requestAnimationFrame в tb-ux.js);
   2) телефон лёжа (высота экрана до 480 px): остров шапки не закрепляем, прилипает только строка поиска.
   ===================================================================================================== */

/* ---------- 1. Вкладки: нажатая «вырастает», прошлая «сжимается»; итоговый вид от анимации не зависит ---------- */
@keyframes tb-tab-grow { from { flex-grow: 1; } }
@keyframes tb-tab-shrink { from { flex-grow: 2.2; } }
@keyframes tb-tab-shrink-m { from { flex-grow: 2.6; } }
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab--grow { animation: tb-tab-grow .28s ease; }
.tb-head .tb-tabs.tb-tabs--r7 .tb-tab--shrink { animation: tb-tab-shrink .28s ease; }
@media (max-width: 767px) {
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab--shrink { animation-name: tb-tab-shrink-m; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab--grow,
    .tb-head .tb-tabs.tb-tabs--r7 .tb-tab--shrink { animation: none; }
}

/* ---------- 2. Телефон лёжа: закреплённые остров + поиск (124 px) и нижняя панель (60 px) съедали половину экрана 667×375.
   Здесь остров уезжает со страницей, а при прокрутке прилипает только строка поиска (.is-stuck, как на планшете). ---------- */
@media (max-width: 767px) and (max-height: 480px) {
    .tb-head { padding-top: 8px; }
    .tb-head .tb-head__stick,
    html.tb-js:not(.tb-scrolled) .tb-head .tb-head__stick {
        position: static;
        padding: 0;
        background: transparent;
        box-shadow: none;
        transition: none;
    }
    html { scroll-padding-top: 68px; }
}

/* =====================================================================================================
   r26b-fix-2 (26.10.2026) — узкие телефоны (320–359 px, например iPhone SE первого поколения — 320 px):
   в строке шапки «‹», логотип, ВК/ТГ/МАКС, телефон и корзина не помещались — с «‹» корзина вылезала за остров
   (на 320 px — на 34 px за его внутренний край и на 10 px за край экрана; на 340 px — на 14 px, на 350 px — на 4 px).
   Здесь всё чуть меньше: «‹», все значки и корзина остаются в шапке. На 360 px и шире ничего не меняется.
   ===================================================================================================== */
@media (max-width: 359px) {
    .tb-head .tb-head__island {
        gap: 4px;
        padding: 0 6px 0 10px;
    }
    .tb-head .tb-head__island.tb-head__island--back {
        gap: 2px;
        padding-left: 4px;
    }
    .tb-head a.tb-head__back { width: 28px; }
    .tb-head .tb-head__logo img { height: 24px; }
    .tb-head .tb-head__m { gap: 2px; }
    .tb-head a.tb-msoc { width: 24px; }
    .tb-head a.tb-msoc img,
    .tb-head a.tb-msoc svg { width: 20px; height: 20px; }
    .tb-head .tb-head__m .tb-head__icon,
    .tb-head .tb-head__m a.tb-cartbtn {
        width: 36px;
        height: 36px;
    }
}
/* нижняя панель на 320–339 px: в пункте шириной 64 px «Избранное» обрезалось до «Избранн…» — шрифт на 1 px меньше */
@media (max-width: 339px) {
    .tb-bottomnav .tb-bottomnav__item {
        font-size: 11px;
        letter-spacing: -.1px;
    }
}

/* =====================================================================================================
   r26b-fix-r2b (26.10.2026), после проверки:
   1) ПК и планшет шире 768 px: у карточек с несколькими фото поверх фото лежит невидимая полоса
      переключения фото (.image-zone, z-index 5 в default.shop.css). Она закрывала сердечко — клик
      открывал товар вместо «в избранное». Сердечко теперь выше этой полосы (двойной класс — чтобы
      перебить основное правило ul.product-list.tb-grid .tb-fav).
   2) ПК от 1001 px: после переименования кнопок («Оценить технику по фото», «Сдать на комиссию»)
      правая часть шапки стала шире левой, и логотип уезжал влево от центра острова на ~40 px.
      От 1300 px подписи 14 px в одну строку, промежутки 16 px; на 1001–1299 px подписи в две строки
      (как на планшете). Замерено: логотип ровно по центру острова на 1001–1920 px.
   ===================================================================================================== */
ul.product-list.tb-grid .tb-fav.tb-fav { z-index: 6; }

@media (min-width: 1300px) {
    .tb-head .tb-head__right { gap: 16px; }
    .tb-head .tb-head__right a:not(.tb-cartbtn):not(.tb-favbtn) { font-size: 14px; }
}
@media (min-width: 1001px) and (max-width: 1299px) {
    .tb-head .tb-head__right a:not(.tb-cartbtn):not(.tb-favbtn) {
        max-width: 114px;
        font-size: 14px;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }
}

/* =====================================================================================================
   docs4 (26.10.2026, ночь), группа site — «если нажать на премиум, то появляется синий овал» (iPhone, Safari):
   1) у нажатой PREMIUM больше нет синей обводки (выше, в разделе «S8–S10. Вкладки главной»);
   2) вкладки ✨/🔥/👑/📊/📍 и пилюли (сортировка «Популярные/Новые/Дешевле/Дороже», подразделы) — без подсветки
      нажатия Safari/Chrome и без рамки фокуса после нажатия мышью или пальцем;
   3) с клавиатуры (Tab) фокус виден — тёмная рамка в цвет текста сайта, а не синий овал браузера.
   ===================================================================================================== */
.tb-tabs .tb-tab,
.tb-chips .tb-chip,
a.tb-chip,
button.tb-chip {
    -webkit-tap-highlight-color: transparent;
}
.tb-tabs .tb-tab:focus,
.tb-chips .tb-chip:focus,
a.tb-chip:focus,
button.tb-chip:focus { outline: none; }
.tb-tabs .tb-tab:focus-visible,
.tb-chips .tb-chip:focus-visible,
a.tb-chip:focus-visible,
button.tb-chip:focus-visible {
    outline: 2px solid var(--tb-ink, #1f2937);
    outline-offset: 2px;
}
.tb-chips .tb-chip:focus-visible { outline-offset: -2px; } /* у ленты пилюль прокрутка обрезает то, что снаружи */
/* на телефоне «наведение» залипает после нажатия — синюю рамку наведения у вкладок и пилюль не показываем */
@media (hover: none) {
    .tb-tabs .tb-tab:not(.tb-tab--active):not(.tb-tab--premium):hover { border-color: var(--tb-line); }
    .tb-chips .tb-chip:not(.is-active):hover { border-color: var(--tb-line); }
}