/* pages.css · склады, доставка, сотрудничество, служебные страницы.
   Дизайн-система «Шоурум» (v2/design/SYSTEM.md): линейка вместо тени, радиус 3 px,
   рамок-карточек нет, таблиц нет, числа тем же шрифтом, что текст. */

/* ---------- выбор города в hero главной ----------
   Строка городов читается как текст с разделителями-точками: ни рамок, ни кнопочного вида.
   Активный город (класс is-active ставит site.js) - чернилами и полужирным. */
.hero__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:0}
.hero__city{
  appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;font-size:15px;color:var(--muted);
}
.hero__city:hover{color:var(--ink)}
.hero__city.is-active{color:var(--ink);font-weight:600}
.hero__city + .hero__city::before{content:"·";color:var(--line);margin:0 9px;font-weight:400;pointer-events:none}
.hero__city:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ---------- карта склада ---------- */
.map{
  position:relative;aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:var(--warm);
  border:1px solid var(--line);
}
/* Виджет Яндекс Карт первые секунды показывает превью 200×150 в углу и разворачивается на весь блок,
   когда догрузит свой код (в безголовом браузере это занимает до 40 с) - это не ошибка вёрстки. */
/* заглушка под картой: видна, если iframe не поднялся (блокировщик, медленная сеть) */
.map__fb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:24px;color:var(--muted);font-size:15.5px}
.map__fb b{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink)}
.map iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.map-cap{font-size:14.5px;color:var(--muted);margin-top:10px;max-width:52ch}

/* ---------- блок склада на /sklady/ ---------- */
.hubrow{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:48px;align-items:start}
.hubrow + .hubrow{margin-top:56px;padding-top:56px;border-top:1px solid var(--line)}
.hubrow .hub-card__ph,.hubrow .hub-card__mark{margin-bottom:0}
.hubrow h2{margin-bottom:10px}
.hubrow .hub-card__addr{font-size:18px}

/* ---------- страница склада: две колонки ---------- */
.hub-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.hub-two .kv{margin-top:6px}
.hub-photo{margin:0 0 24px}
.hub-photo img{width:100%;height:auto;aspect-ratio:4/3;border-radius:3px;background:var(--warm)}
.hub-photo figcaption{font-size:14.5px;color:var(--muted);margin-top:8px}

/* проезд: список без линеек */
.route{margin:14px 0 0;padding:0;list-style:none}
.route li{position:relative;padding-left:20px;margin-top:11px;color:var(--muted);font-size:16.5px;max-width:54ch}
.route li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--line)}
.route--note{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.route--note li{font-size:15.5px}

/* фотографии склада */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.gal--hub img{height:auto}

/* ---------- строка коллекции (склад, без таблицы) ---------- */
.collrow{border-top:1px solid var(--line);padding-top:16px}
.collrow h3{margin-bottom:6px}
.collrow__facts{font-size:15px;color:var(--muted)}
.collrow__pr{font-family:var(--display);font-weight:600;font-size:17px;margin-top:10px}
.collrow .st{margin-top:8px}

/* ---------- короткий блок «признак» (без рамки, линейка сверху) ---------- */
.feat{border-top:1px solid var(--line);padding-top:17px}
.feat h3{font-size:19px;margin-bottom:7px}
.feat p{color:var(--muted);font-size:16px;max-width:40ch}
.feat p + p{margin-top:9px}

/* ---------- телефон крупно ---------- */
.callout{border-top:1px solid var(--line);padding-top:22px}
.callout__tel{
  font-family:var(--display);font-weight:600;letter-spacing:-0.03em;
  font-size:clamp(26px,3vw,34px);line-height:1.1;display:inline-block;white-space:nowrap;
}
.callout p{color:var(--muted);font-size:16px;margin-top:10px;max-width:44ch}

/* ---------- каталоги PDF ---------- */
.docs{margin-top:6px}
.doc{
  display:flex;justify-content:space-between;align-items:baseline;gap:22px;
  padding:18px 0;border-top:1px solid var(--line);
}
.doc:last-child{border-bottom:1px solid var(--line)}
.doc span:first-child{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-0.018em}
.doc .m{color:var(--muted);font-size:15px;white-space:nowrap}
.doc:hover span:first-child{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}

/* ---------- пары «город - сумма» ---------- */
.kv .km{color:var(--muted);font-size:14.5px;margin-left:8px}
.kv--wide dd{font-weight:400}
/* порядок по колонкам: список городов читается сверху вниз, а не змейкой */
.kv--flow{grid-auto-flow:column;grid-template-rows:repeat(var(--rows,6),auto)}

/* ---------- доставка: блоки городов ----------
   Два блока в одном контейнере data-hub-order: site.js ставит город из шапки первым,
   поэтому отступ и линейка - у второго по порядку, а не у конкретного города. */
.dost-city + .dost-city{margin-top:64px;padding-top:56px;border-top:1px solid var(--line)}

/* ---------- 404 ---------- */
.nf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 30px;margin-top:6px}

/* ---------- главная: интерьеры (26.09.2026) ----------
   Три визуализации разных коллекций, кадр 4:3 и подпись-ссылка на декор. На телефоне - лента с привязкой. */
.rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.room{display:block;color:inherit;text-decoration:none}
.room__ph{display:block;aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:var(--warm)}
.room__ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.room:hover .room__ph img{transform:scale(1.025)}
.room:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.room__cap{display:block;margin-top:12px;font-size:15.5px;color:var(--muted)}
.room__cap b{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:reduce){.room__ph img{transition:none}}

@media (max-width:1100px){
  .hubrow{gap:34px}
  .hub-two{gap:38px}
}
@media (max-width:900px){
  .rooms{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * var(--pad));padding-right:var(--pad)}
  .rooms::-webkit-scrollbar{display:none}
  .room{flex:0 0 84%;scroll-snap-align:start}
  .hubrow,.hub-two,.nf{grid-template-columns:1fr}
  .hubrow{gap:22px}
  .hubrow + .hubrow{margin-top:40px;padding-top:40px}
  .dost-city + .dost-city{margin-top:44px;padding-top:40px}
  /* самовывоз: на телефоне склады идут столбцом - второму по порядку тот же отступ и линейка,
     что у блоков городов ниже, иначе «Казань» прилипает к кнопке московского склада (R17) */
  .hubs-grid.dost-pick{gap:0}
  .dost-pick > [data-hub-card] + [data-hub-card]{margin-top:44px;padding-top:40px;border-top:1px solid var(--line)}
  .hub-two{gap:34px}
  .route li{max-width:none}
  .feat p{max-width:none}
  .collrow{margin-top:0}
  .kv--flow{grid-auto-flow:row;grid-template-rows:none}
}
@media (max-width:640px){
  .grid.feats{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .doc{flex-direction:column;gap:4px}
  .doc .m{white-space:normal}
}