/* TASK-0688 — главная: блоки «Мебель для кафе, баров и ресторанов» (.ent-fb)
   и «Выберите мебель по фото интерьера» (.ent-pf). Макет — enterer-home-blocks.html (Дмитрий).
   Разметка — core/elements/chunks/home-blocks-task0688.tpl, скрипт — js/home-blocks-task0688.js.
   Все правила — внутри .ent-fb / .ent-pf, общие стили темы не меняются.
   Каждое правило начинается с корня блока: тема оформляет ссылки и заголовки внутри .page
   селекторами из класса и тега, и одиночный класс блока им проигрывает. */

.ent-fb, .ent-pf {
  --ent-ink: #1F2B38; --ent-muted: #5B6673; --ent-line: #D5DAE0; --ent-soft: #F5F6F8;
  --ent-accent: #EF7A17; --ent-accent-dark: #CF5F08; --ent-accent-darker: #B25005; --ent-accent-soft: #FFF4EA;
  --ent-radius: 18px;
  display: block; width: 100%; color: var(--ent-ink); text-align: left; box-sizing: border-box;
}
.ent-fb *, .ent-pf * { box-sizing: border-box; }
/* тема: div ведёт себя как flex-строка с space-between — внутри блоков возвращаем обычный блок,
   раскладку задают классы ниже (у них та же специфичность, и они стоят позже) */
.ent-fb :where(div), .ent-pf :where(div) { display: block; justify-content: normal; align-items: normal; }
.ent-fb :where(ul, li), .ent-pf :where(ul, li) { margin: 0; padding: 0; list-style: none; }
.ent-fb :where(li)::before, .ent-pf :where(li)::before { content: none; }
.ent-fb :where(button), .ent-pf :where(button) { font: inherit; color: inherit; margin: 0; }
.ent-fb .page, .ent-pf .page { display: block; }
/* тема: .page > div при ≤ 1250 px получает flex-wrap: wrap — в колонке это растягивает
   ленту вкладок на всю её длину (1200 px на телефоне), в строке уносит правую колонку вниз */
.ent-fb .page > div, .ent-pf .page > div { flex-wrap: nowrap; }

.ent-fb .ent-ph, .ent-pf .ent-ph { background-color: #E7E2DB; background-image: repeating-linear-gradient(135deg, rgba(31,43,56,.05) 0 12px, transparent 12px 24px); }
.ent-fb .ent-img, .ent-pf .ent-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; margin: 0; }
.ent-fb .ent-btn, .ent-pf .ent-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border: 0; border-radius: 10px;
  background: var(--ent-accent-dark); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s; }
.ent-fb .ent-btn:hover, .ent-fb .ent-btn:focus-visible, .ent-pf .ent-btn:hover, .ent-pf .ent-btn:focus-visible { background: var(--ent-accent-darker); color: #fff; text-decoration: none; }
.ent-fb :focus-visible, .ent-pf :focus-visible { outline: 3px solid var(--ent-accent); outline-offset: 2px; }

/* ---------- Блок 1: Мебель для ---------- */
.ent-fb { padding: 48px 0 56px; background: #fff; }
.ent-fb .ent-fb__body { display: flex; flex-wrap: nowrap; gap: 24px; height: 564px; }
.ent-fb .ent-fb__tabs { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.ent-fb .ent-fb__tab { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 20px; border-radius: 14px;
  border: 1px solid var(--ent-soft); background: var(--ent-soft); color: var(--ent-ink); text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.ent-fb .ent-fb__tab:hover { border-color: var(--ent-accent); }
.ent-fb .ent-fb__tab svg { flex-shrink: 0; }
.ent-fb .ent-fb__tab-text { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; }
.ent-fb .ent-fb__tab-name { font-weight: 700; font-size: 18px; line-height: 22px; }
.ent-fb .ent-fb__tab-list { font-size: 13px; line-height: 18px; color: var(--ent-muted); }
.ent-fb .ent-fb__tab[aria-selected="true"] { background: var(--ent-ink); border-color: var(--ent-ink); color: #fff; }
.ent-fb .ent-fb__tab[aria-selected="true"] .ent-fb__tab-list { color: #C9D1DA; }
.ent-fb .ent-fb__panels { flex-grow: 1; position: relative; min-width: 0; }
.ent-fb .ent-fb__panel { position: absolute; inset: 0; border-radius: var(--ent-radius); overflow: hidden; }
.ent-fb .ent-fb__panel[hidden] { display: none; }
.ent-fb .ent-fb__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(to top, rgba(18,24,31,.88) 0%, rgba(18,24,31,.5) 50%, rgba(18,24,31,0) 100%); }
.ent-fb .ent-fb__content { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ent-fb .ent-fb__title { margin: 0; font-weight: 700; font-size: 34px; line-height: 40px; color: #fff; }
.ent-fb .ent-fb__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ent-fb .ent-fb__chip { display: inline-block; font-size: 14px; line-height: 20px; font-weight: 500; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--ent-ink); text-decoration: none; transition: background .15s, color .15s; }
.ent-fb .ent-fb__chip:hover { background: var(--ent-accent); color: #fff; text-decoration: none; }

/* H1 страницы — заголовок блока. На телефоне (≤ 767) действует компактный стиль .home-h1
   из <head> шаблона, поэтому оформление по макету — только от 768 px. */
@media (min-width: 768px) {
  .ent-fb .title-wrapper.ent-fb__head { display: block; margin: 0 0 28px; padding: 0; background: none; text-align: center; }
  .ent-fb .title-wrapper.ent-fb__head h1 { margin: 0; padding: 0; font-weight: 700; font-size: 32px !important; line-height: 1.25; color: var(--ent-ink); text-align: center; background: none; }
}

@media (max-width: 1024px) {
  .ent-fb .ent-fb__body { flex-direction: column; height: auto; gap: 16px; }
  .ent-fb .ent-fb__tabs { width: auto; flex-direction: row; overflow-x: auto; gap: 8px; margin: 0 -15px; padding: 0 15px 4px; scrollbar-width: none; }
  .ent-fb .ent-fb__tabs::-webkit-scrollbar { display: none; }
  .ent-fb .ent-fb__tab { flex: 0 0 auto; height: 44px; padding: 0 16px; border-radius: 999px; }
  .ent-fb .ent-fb__tab-list, .ent-fb .ent-fb__tab svg { display: none; }
  .ent-fb .ent-fb__tab-name { font-size: 15px; white-space: nowrap; }
  .ent-fb .ent-fb__panels { height: 480px; }
}
@media (max-width: 767px) {
  .ent-fb { padding: 0 0 40px; }
}
@media (max-width: 600px) {
  .ent-fb .ent-fb__panels { height: 440px; }
  .ent-fb .ent-fb__content { padding: 20px; gap: 14px; }
  .ent-fb .ent-fb__title { font-size: 24px; line-height: 30px; }
  .ent-fb .ent-fb__chip { font-size: 13px; padding: 7px 12px; }
  .ent-fb .ent-btn { width: 100%; }
}

/* TASK-1019 (19.10.2026, Дмитрий): на телефоне панели — горизонтальная лента со свайпом.
   Что лента листается, видно сразу: край следующей карточки выглядывает справа, под лентой
   точки-счётчик, автолистание едет по ленте. Вкладки сверху остаются и следуют за свайпом. */
@media (max-width: 767px) {
  .ent-fb .ent-fb__panels { display: flex; gap: 15px; overflow-x: auto; overflow-y: hidden; margin: 0 -15px; padding: 0 15px;
    scroll-snap-type: x mandatory; scroll-padding: 0 15px; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ent-fb .ent-fb__panels::-webkit-scrollbar { display: none; }
  .ent-fb .ent-fb__panel, .ent-fb .ent-fb__panel[hidden] { display: block; position: relative; inset: auto; flex: 0 0 84%; height: 100%;
    scroll-snap-align: start; scroll-snap-stop: always; }
  .ent-fb .ent-fb__dots { display: flex; justify-content: center; align-items: center; gap: 6px; height: 8px; margin-top: -4px; }
  .ent-fb .ent-fb__dot { width: 8px; height: 8px; border-radius: 4px; background: #D5CFC6; transition: width .25s, background-color .25s; }
  .ent-fb .ent-fb__dot.is-on { width: 22px; background: var(--ent-accent); }
}
@media (min-width: 768px) {
  .ent-fb .ent-fb__dots { display: none; }
}

/* ---------- Блок 2: Интерьеры ---------- */
/* 17.09 (Дмитрий): блок на белом фоне, как «Мебель для…». Правая колонка держится
   на рамке, а не на заливке. */
.ent-pf { padding: 56px 0; background: #fff; }
.ent-pf .ent-pf__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.ent-pf .ent-pf__h2 { margin: 0; padding: 0; font-weight: 700; font-size: 32px; line-height: 1.25; color: var(--ent-ink); text-align: left; }
.ent-pf .ent-pf__lead { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--ent-muted); }
.ent-pf .ent-pf__all { display: inline-flex; align-items: center; gap: 8px; height: 44px; font-weight: 600; font-size: 15px; color: var(--ent-ink); text-decoration: none; white-space: nowrap; }
.ent-pf .ent-pf__all:hover { color: var(--ent-accent-dark); text-decoration: none; }
.ent-pf .ent-pf__body { display: flex; gap: 24px; align-items: stretch; }
.ent-pf .ent-pf__main { width: 65%; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Сцена. Кадр .ent-pf__canvas всегда 1400:790, как нарезка фото, и заполняет сцену «обрезкой по центру»
   (как object-fit: cover). Точки стоят в процентах кадра, поэтому попадают в мебель при любой форме
   сцены: на телефоне сцена 3:2 и срезает по 9 % слева и справа. */
.ent-pf .ent-pf__stage { position: relative; aspect-ratio: 1400 / 790; border-radius: var(--ent-radius); overflow: hidden; container-type: size; }
.ent-pf .ent-pf__look { position: absolute; inset: 0; }
.ent-pf .ent-pf__look[hidden], .ent-pf .ent-pf__side-look[hidden] { display: none; }
.ent-pf .ent-pf__canvas { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%);
  width: max(100cqw, 177.2152cqh); height: max(100cqh, 56.4286cqw); }
.ent-pf .ent-pf__label { position: absolute; left: 20px; top: 20px; z-index: 1; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ent-ink); background: #fff; padding: 6px 12px; border-radius: 999px; }

.ent-pf .ent-pf__spot { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.ent-pf .ent-pf__spot::before { content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%; background: rgba(239,122,23,.45); animation: ent-ring 2s ease-out infinite; }
.ent-pf .ent-pf__spot-dot { position: relative; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(18,24,31,.35);
  display: flex; align-items: center; justify-content: center; transition: background .15s; }
.ent-pf .ent-pf__spot-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ent-accent); transition: background .15s; }
.ent-pf .ent-pf__spot[aria-expanded="true"] .ent-pf__spot-dot { background: var(--ent-accent); }
.ent-pf .ent-pf__spot[aria-expanded="true"] .ent-pf__spot-dot::after { background: #fff; }
@keyframes ent-ring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ent-pf .ent-pf__spot::before { animation: none; opacity: .5; } }

/* Окошко товара. Место (справа или слева от точки, в пределах сцены) считает скрипт. */
.ent-pf .ent-pf__pop { position: absolute; left: 12px; top: 12px; z-index: 2; width: 260px; background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(18,24,31,.22);
  padding: 12px; display: flex; gap: 12px; }
.ent-pf .ent-pf__pop[hidden] { display: none; }
.ent-pf .ent-pf__pop-img { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #fff; }
.ent-pf .ent-pf__pop-img .ent-img, .ent-pf .ent-pf__item-img .ent-img { object-fit: contain; }
.ent-pf .ent-pf__pop-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ent-pf .ent-pf__cat { font-size: 12px; line-height: 16px; color: var(--ent-muted); }
.ent-pf .ent-pf__model { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--ent-ink); overflow-wrap: anywhere; }
.ent-pf .ent-pf__price { font-weight: 700; font-size: 17px; line-height: 22px; color: var(--ent-accent-dark); white-space: nowrap; }
.ent-pf .ent-pf__pop-row { display: contents; }
.ent-pf .ent-pf__pop-link { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ent-accent-dark); text-decoration: underline; }
.ent-pf .ent-pf__pop-link:hover { color: var(--ent-accent-darker); }

.ent-pf .ent-pf__thumbs { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.ent-pf .ent-pf__thumb { position: relative; flex: 0 0 calc((100% - 60px) / 6); height: 92px; padding: 0; border-radius: 12px; overflow: hidden;
  border: 3px solid transparent; cursor: pointer; background-color: #E7E2DB; transition: border-color .15s; }
.ent-pf .ent-pf__thumb:hover, .ent-pf .ent-pf__thumb[aria-current="true"] { border-color: var(--ent-accent); }

.ent-pf .ent-pf__side { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ent-line); border-radius: var(--ent-radius); padding: 24px; }
.ent-pf .ent-pf__side-look { display: flex; flex-direction: column; gap: 16px; flex-grow: 1; }
.ent-pf .ent-pf__side-title { margin: 0; font-weight: 700; font-size: 20px; line-height: 26px; color: var(--ent-ink); }
.ent-pf .ent-pf__count { font-size: 14px; line-height: 20px; color: var(--ent-muted); margin-top: 4px; }
.ent-pf .ent-pf__items { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.ent-pf .ent-pf__item { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 8px; border-radius: 12px; border: 0; background: transparent;
  color: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.ent-pf .ent-pf__item:hover, .ent-pf .ent-pf__item[aria-pressed="true"] { background: var(--ent-accent-soft); }
.ent-pf .ent-pf__item-img { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #fff; }
.ent-pf .ent-pf__item-text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.ent-pf .ent-pf__item .ent-pf__model { font-size: 14px; line-height: 18px; }
.ent-pf .ent-pf__item-price { font-weight: 700; font-size: 15px; line-height: 20px; white-space: nowrap; color: var(--ent-ink); }
.ent-pf .ent-pf__actions { display: flex; flex-direction: column; gap: 10px; }
.ent-pf .ent-pf__actions .ent-btn { width: 100%; height: 50px; }
.ent-pf .ent-pf__ghost { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 10px; border: 1px solid var(--ent-line);
  font-weight: 600; font-size: 14px; color: var(--ent-ink); text-decoration: none; background: #fff; }
.ent-pf .ent-pf__ghost:hover { border-color: var(--ent-ink); color: var(--ent-ink); text-decoration: none; }

@media (max-width: 1024px) {
  .ent-pf .ent-pf__body { flex-direction: column; }
  .ent-pf .ent-pf__main { width: 100%; }
  .ent-pf .ent-pf__thumb { flex-basis: 132px; }
}
@media (max-width: 600px) {
  .ent-pf .ent-pf__h2 { font-size: 24px; }
  .ent-pf .ent-pf__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ent-pf .ent-pf__lead { font-size: 15px; }
  .ent-pf .ent-pf__stage { aspect-ratio: 3 / 2; }
  .ent-pf .ent-pf__label { left: 12px; top: 12px; }
  /* окошко — полосой по низу фото, компактно: цена и ссылка в одну строку */
  .ent-pf .ent-pf__pop { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; padding: 8px; gap: 10px; align-items: center; border-radius: 12px; }
  .ent-pf .ent-pf__pop-img { width: 56px; height: 56px; }
  .ent-pf .ent-pf__pop-text { gap: 1px; }
  .ent-pf .ent-pf__pop .ent-pf__cat { font-size: 11px; line-height: 14px; }
  .ent-pf .ent-pf__pop .ent-pf__model { font-size: 14px; line-height: 18px; }
  .ent-pf .ent-pf__pop-row { display: flex; align-items: baseline; gap: 12px; }
  .ent-pf .ent-pf__pop .ent-pf__price { font-size: 15px; line-height: 20px; }
  .ent-pf .ent-pf__thumb { flex-basis: 104px; height: 76px; }
  .ent-pf .ent-pf__side { padding: 16px; }
  .ent-pf { padding: 32px 0 40px; }
}

/* ---------- Три блока главной ростом в экран (Дмитрий, 17.09) ----------
   «Мебель для…», «География поставок» и «Выберите мебель по фото интерьера» занимают высоту окна
   за вычетом шапки (140 px + 10 запаса), содержимое — по центру, поля у всех трёх одинаковые,
   поэтому одинаков и «шаг» прокрутки. Колесо доводит страницу до границы блока: scroll-snap-type
   на странице и scroll-snap-align у этих секций. Тип proximity, а не mandatory: остальную главную
   (первый экран, SEO-текст, FAQ) прокрутка не должна тащить к чужим границам. scroll-margin-top
   равен высоте шапки, иначе верх блока уезжает под неё. box-sizing: border-box обязателен — без
   него поля прибавляются к min-height и блок оказывается выше экрана.
   Правила карты живут здесь, а не в общем deals-map.css: ту же карту показывает «О компании»
   heavytop, её вид не меняем. Слой флажков лежит на сцене в процентах и сжимается вместе с картой. */
@media (min-width: 1025px) and (min-height: 700px) {
  /* ⚠️ Без этой пары прилипание не работает вовсе: тема держит на body `overflow: scroll`,
     а на main — `overflow: hidden`. Оба делают их собственными контейнерами прокрутки, и тогда
     секции «принадлежат» им, а не окну, у которого только и есть прокрутка. У main ставим `clip`:
     обрезает так же, как hidden, но контейнером прокрутки не становится. У body `clip` не годится —
     он на body вычисляется в `auto hidden` (правило распространения на область просмотра), поэтому
     возвращаем `visible`. Замерено: ширина документа равна ширине окна на 1280–1920, горизонтальной
     прокрутки не появилось, шапка на месте. */
  /* по вертикали body должен быть «прозрачным» (visible), иначе прокрутка принадлежит ему, а не окну;
     по горизонтали обрезку сохраняем — на 1280–1366 макет темы шире экрана (.page 1600 px), и без
     неё появляется горизонтальная прокрутка. `clip` по X и `visible` по Y — допустимая пара, и
     контейнером прокрутки body от неё не становится. Два тега в селекторе: ниже по странице лежат
     файлы со своим `body { … !important }`, одиночному `body` они бы выиграли по порядку. */
  html body { overflow-x: clip !important; overflow-y: visible !important; }
  html main { overflow: clip !important; }
  html { scroll-snap-type: y proximity; }
  .ent-fb, .deals-map-home, .ent-pf {
    box-sizing: border-box; min-height: calc(100vh - 150px); padding: 24px 0;
    display: flex; align-items: center;
    scroll-snap-align: start; scroll-margin-top: 140px;
  }
  .ent-fb > .page, .deals-map-home > .page, .ent-pf > .page { width: 100%; }

  /* блок 1: фото ужимается по высоте окна, но не выше макетных 564 px
     (48 — поля секции, 68 — заголовок с отступом) */
  .ent-fb .ent-fb__body { height: min(564px, calc(100vh - 150px - 116px)); }

  /* блок 2: ширину сцены задаёт остаток высоты (голова блока 104, лента миниатюр 106, поля 48),
     колонка справа держит свою долю — сужается вся пара, как карточка карты.
     2,726 = 1,772 (кадр 1400:790) / 0,65 (доля левой колонки) */
  .ent-pf .ent-pf__body { max-width: calc((100vh - 408px) * 2.726); margin: 0 auto; }

  /* карта: сцена и карточка под ту же высоту; 372 = поля карточки 28 + колонка 320 + зазор 24 */
  .deals-map-home .dmap { margin: 0 auto; }   /* у общего стиля снизу 40 px — здесь они лишние */
  .deals-map-home .dmap .dmap__title { margin: 0 0 16px !important; }
  .deals-map-home .dmap__stage { max-width: calc((100vh - 345px) * 1.818); margin: 0 auto; }
  .deals-map-home .dmap__layout { max-width: calc((100vh - 345px) * 1.818 + 372px); margin: 0 auto; }
  .deals-map-home .dmap .dmap__list { max-height: min(390px, calc(100vh - 480px)); }
}
@media (min-width: 981px) and (max-width: 1024px), (min-width: 981px) and (max-height: 699px) {
  /* низкие и узкие экраны: в высоту окна блоки не вписываем — фото стало бы совсем мелким;
     лишний нижний отступ карты убираем и здесь */
  .deals-map-home .dmap { margin: 0 auto 16px; }
}

/* TASK-1019 (19.10.2026, Дмитрий): на телефоне в «Географии поставок» — только карта и счётчики
   (пункты / компании / часовые пояса); список городов с числом клиентов скрыт как лишний. */
@media (max-width: 767px) {
  .deals-map-home .dmap .dmap__panel { display: none !important; } /* перебивает .dmap div { display: block !important } из deals-map.css */
}