/* Профиль магазина на витрине: фон сайта и страница «Отделения» (/info/about).
   Владелец — агент site-profile. Данные — из выгрузок панели (site.json, pickup.json).
   Блок «О нас» + отделения на главной отключён по просьбе владельца 14.10 — его стилей здесь больше нет. */

/* ---------- Фон сайта (класс и переменные ставит tb-profile.js по site.json) ---------- */
/* «Цвет»: tb-profile.js меняет --tb-canvas/--bg-color на <html> — фон везде, где тема рисует «холст». */
/* «Картинка» (просьба владельца 14.10): по ширине экрана, вниз ПОВТОРЯЕТСЯ вместе со страницей, а не растягивается;
   без затемнений по умолчанию. Рисуем на <html>: фон корня закрывает весь холст страницы до самого низа.
   Первый слой — белая «вуаль» (--tb-bg-veil 0…0.8 из панели, по умолчанию 0 — прозрачная), второй — картинка.
   Карточки, шапка и тексты остаются на своих белых подложках. */
html.tb-bg--image {
    background-color: var(--tb-canvas, #f4f5f7);
    background-image:
        linear-gradient(rgba(244, 245, 247, var(--tb-bg-veil, 0)), rgba(244, 245, 247, var(--tb-bg-veil, 0))),
        var(--tb-bg-image, none);
    background-size: auto, 100% auto;
    background-repeat: repeat, repeat-y;
    background-position: 0 0, center top;
}
html.tb-bg--image body,
html.tb-bg--image main.maincontent,
html.tb-bg--image .globalheader {
    background: transparent;
}

/* ---------- Анимированные эффекты (холст рисует tb-profile.js по site.json → effects) ---------- */
/* Над содержимым, но под липкой шапкой, плашкой cookie и окнами; клики проходят насквозь. */
.tb-fx {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 800;
    pointer-events: none;
}
@media print {
    .tb-fx { display: none; }
}
/* читаемость на картинке: заголовки — на светлой «таблетке», тексты страниц — на белой карточке */
html.tb-bg--image .tb-feed__title,
html.tb-bg--image main h1[itemprop="name"],
html.tb-bg--image h1.category-name {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .9);
    border-radius: 12px;
    padding: 4px 14px;
}
/* обычные страницы «Сайта» — на белой карточке; у /info/about свои карточки */
html.tb-bg--image #page:not(:has(.tb-aboutpage)) {
    background: var(--tb-card, #fff);
    border-radius: var(--tb-radius, 14px);
    box-shadow: var(--tb-shadow, 0 1px 3px rgba(16, 24, 40, .1));
    padding: 16px 20px;
}

/* ---------- Страница «Отделения» (/info/about): отделения → «О компании» → контакты и реквизиты ---------- */
.tb-aboutpage { display: grid; gap: 14px; max-width: 1100px; }

/* карточки отделений: компьютер и планшет — 2 в ряд, телефон — 1 */
.tb-branches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
    scroll-margin-top: 90px;
}
.tb-branchx {
    background: var(--tb-card, #fff);
    border-radius: var(--tb-radius, 14px);
    box-shadow: var(--tb-shadow, 0 1px 3px rgba(16, 24, 40, .1));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    scroll-margin-top: 90px;
}
.tb-branchx:target { box-shadow: 0 0 0 3px #29b6f6, var(--tb-shadow, 0 1px 3px rgba(16, 24, 40, .1)); }
.tb-branchx__gallery {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    background: #eef2f6;
}
.tb-branchx__shot { flex: 0 0 100%; scroll-snap-align: start; display: block; }
.tb-branchx__shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* branch-gallery-fix-r2: рамка фокуса у фото отделения при Tab — внутрь (снаружи её обрезала бы лента) */
.tb-branchx__shot:focus-visible { outline: 3px solid rgba(41, 182, 246, .55); outline-offset: -3px; }
.tb-branchx__swipe { margin: 4px 14px 0; font-size: 12px; color: var(--tb-muted, #6b7280); }
/* branch-gallery (22.10.2026, просьба владельца «не полоска, стрелочками листать»): несколько фото — по одному на всю
   ширину, без полосы прокрутки; поверх — стрелки «‹ ›» и счётчик «1 / 3». Это общие классы галереи товара
   (.tb-gal__nav, .tb-gal__count — tb-features.css), вид тот же. Видны, когда tb-features.js (BranchGal) их оживил
   (.is-ready); без JS лента листается вбок. На телефоне стрелки тоже есть (44 px), пальцем листается (scroll-snap). */
.tb-branchx__gal { position: relative; min-width: 0; }
.tb-branchx__gallery--many { gap: 0; scrollbar-width: none; overscroll-behavior-x: contain; }
.tb-branchx__gallery--many::-webkit-scrollbar { display: none; }
.tb-branchx__gallery--many .tb-branchx__shot { scroll-snap-stop: always; }
.tb-branchx__gal > .tb-gal__nav,
.tb-branchx__gal > .tb-gal__count { display: none; }
.tb-branchx__gal.is-ready > .tb-gal__nav { display: flex; }
.tb-branchx__gal.is-ready > .tb-gal__count { display: block; }
/* branch-gallery-fix-r1: без JS полоса прокрутки нужна — иначе мышью без тачпада ленту не пролистать. «Без JS» узнаём
   по noscript: только тогда браузер разбирает его содержимое как разметку и у .tb-branchx__gal появляется сосед
   noscript > .tb-branchx__swipe (с JS это просто текст — правило не срабатывает, полосы нет, ничего не мигает).
   Браузер без :has() правило пропустит — останется как было (без полосы). */
.tb-branchx__gal:has(+ noscript > .tb-branchx__swipe) > .tb-branchx__gallery--many { scrollbar-width: thin; }
.tb-branchx__gal:has(+ noscript > .tb-branchx__swipe) > .tb-branchx__gallery--many::-webkit-scrollbar { display: block; height: 8px; }
.tb-branchx__gal:has(+ noscript > .tb-branchx__swipe) > .tb-branchx__gallery--many::-webkit-scrollbar-thumb { background: #c3cad4; border-radius: 4px; }
.tb-branchx__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 16 / 5;
    background: linear-gradient(135deg, #e1f5fe 0%, #eef2f6 100%);
    color: #29b6f6;
    font-size: 13px;
    font-weight: 600;
}
.tb-branchx__ph span { color: #0277bd; }
.tb-branchx__body { padding: 12px 14px 14px; display: grid; gap: 4px; }
.tb-branchx__name { margin: 0; font-size: 18px; line-height: 1.25; }
.tb-branchx__tag {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px; /* не мельче 12 px (раунд 6c) */
    font-weight: 700;
    color: #fff;
    background: var(--tb-ok, #059669);
    border-radius: 6px;
    padding: 3px 7px;
    margin-left: 4px;
    letter-spacing: 0;
}
.tb-branchx__addr { margin: 0; font-size: 15px; color: var(--tb-ink, #1f2937); }
.tb-branchx__desc,
.tb-branchx__hours { margin: 0; font-size: 14px; line-height: 1.4; color: var(--tb-muted, #6b7280); }
.tb-branchx__phone { margin: 0; font-size: 14px; color: var(--tb-muted, #6b7280); }
.tb-branchx__phone a { color: #0288d1; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tb-branchx__acts { display: flex; gap: 8px; padding-top: 10px; max-width: 420px; }
.tb-branchx__btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px; /* тап-цель (раунд 6c) */
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--tb-line, #e5e7eb);
    background: #fff;
    color: var(--tb-ink, #1f2937);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.tb-branchx__btn svg { flex: 0 0 auto; color: #0288d1; }
.tb-branchx__btn span { overflow: hidden; text-overflow: ellipsis; }
.tb-branchx__btn:hover { border-color: #29b6f6; color: #0288d1; }

/* «О компании», «Контакты», «Реквизиты» — белые карточки (читаются и на фоновой картинке) */
.tb-aboutpage__box {
    background: var(--tb-card, #fff);
    border-radius: var(--tb-radius, 14px);
    box-shadow: var(--tb-shadow, 0 1px 3px rgba(16, 24, 40, .1));
    padding: 4px 16px 14px;
    scroll-margin-top: 90px;
}
.tb-aboutpage__h { margin: 10px 0 0; font-size: 21px; line-height: 1.25; }
.tb-aboutpage__text { margin-top: 10px; }
.tb-aboutpage__text p { margin: 0 0 .8em; font-size: 16px; line-height: 1.55; max-width: 760px; }
.tb-aboutpage__text p:last-child { margin-bottom: 0; }
.tb-aboutpage__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tb-aboutpage__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tb-aboutpage__list li { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.tb-aboutpage__k { display: block; font-size: 12px; color: var(--tb-muted, #6b7280); }
.tb-aboutpage__note { color: var(--tb-muted, #6b7280); font-size: 13px; }
.tb-aboutpage__docs { margin: 12px 0 0; font-size: 14px; }
@media (max-width: 767px) {
    .tb-branches,
    .tb-aboutpage__cols { grid-template-columns: 1fr; }
    .tb-aboutpage__text p { font-size: 15px; }
    .tb-aboutpage__h { font-size: 19px; }
    .tb-branchx__ph { aspect-ratio: 16 / 4; }
}

/* r8-branches: отделение закрыто на период (праздники) */
.tb-branchx__closed { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: #c62828; }