/* Палитра из утверждённого прототипа: кремовый фон, латунь, хвойный акцент. */
:root {
  --bg: #EDE6D6;
  --surface: #F7F2E7;
  --ink: #2A2118;
  --ink-muted: #6B5D4D;
  --brass: #B07C34;
  --brass-deep: #8C5F24;
  --pine: #46584C;
  --line: rgba(42, 33, 24, .16);
}

body {
  font-family: system-ui, sans-serif; max-width: 1100px; margin: 0 auto; padding: 1rem;
  color: var(--ink); background: var(--bg);
}
h1 { font-size: 1.6rem; text-wrap: balance; }
/* На узком экране длинный заголовок съедал три строки первого экрана. */
@media (max-width: 599px) {
  h1 { font-size: 1.25rem; }
  body { padding: 0.75rem; }
  .site-header { gap: 0.35rem 1rem; padding-bottom: 0.7rem; margin-bottom: 0.9rem; }
  .site-nav { gap: 0.3rem 0.9rem; }
  .site-nav a { font-size: 0.9rem; }
}
/* Браузерное правило [hidden] слабее, чем #order-form { display: flex },
   поэтому отправленная форма оставалась на экране рядом с «Заказ принят». */
[hidden] { display: none !important; }
a { color: var(--brass-deep); }

/* ── каталог ───────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.card {
  border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem;
  display: flex; flex-direction: column; background: var(--surface);
}
/* Фото WB всегда 900×1200. Пропорции заданы заранее, чтобы страница не прыгала,
   пока картинки подгружаются; contain — на случай, если попадётся не 3:4. */
.card img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 6px; }
.card h3 { font-size: 1rem; margin: 0.6rem 0 0.3rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { font-size: 0.85rem; color: var(--ink-muted); margin: 0 0 0.6rem; flex: 1; }
#search {
  width: 100%; padding: 0.6rem; margin: 1rem 0 0.6rem; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
}
.home-note { margin: 0 0 1rem; font-size: 0.9rem; color: var(--ink-muted); }
#search-count { margin: 0 0 0.8rem; font-size: 0.9rem; color: var(--ink-muted); min-height: 1.2em; }

/* ── темы ──────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.chip {
  display: inline-block; padding: 0.4rem 0.85rem; border-radius: 999px;
  border: 1px dashed var(--brass); background: var(--surface); color: var(--ink-muted);
  font-size: 0.9rem; text-decoration: none;
}
.chip:hover { background: #fff; }
.chip[aria-current="page"] {
  background: var(--brass); border-style: solid; border-color: var(--brass-deep);
  color: #fff; font-weight: 600;
}

/* На телефоне три десятка тем занимали весь первый экран, и товаров не было
   видно вообще. Убираем перенос: темы становятся одной строкой, которую
   листают пальцем, — привычный приём с маркетплейсов. */
@media (max-width: 899px) {
  .chips {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    padding-bottom: 0.35rem; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ── цена ──────────────────────────────────────────────────── */
.price-old { text-decoration: line-through; color: var(--ink-muted); margin-right: 0.5rem; font-size: 1.1rem; }
.price-new { font-size: 2rem; font-weight: 800; color: #c0392b; }
.shipping { font-size: 0.95rem; color: var(--pine); font-weight: 600; }
.product .price-new { font-size: 2.6rem; }
.product .price-old { font-size: 1.3rem; }
.product .shipping { font-size: 1.05rem; }

/* ── кнопки ────────────────────────────────────────────────── */
.order-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.btn {
  display: inline-block; padding: 0.7rem 1.1rem; border: none; border-radius: 8px;
  font-size: 1rem; font-weight: 600; text-decoration: none; color: #fff; cursor: pointer;
  text-align: center; line-height: 1.2;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn-call { background: #25D366; }
.btn-wa { background: #25D366; }
.btn-max { background: #7C4DFF; }
.btn-tg { background: #229ED9; }
.btn-wb { background: #CB11AB; }
.btn-order { background: var(--pine); font-size: 1.1rem; padding: 0.85rem 1.1rem; }
.order-alt { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--ink-muted); }
.messengers-note { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--ink-muted); }
.order-note { font-size: 0.9rem; color: var(--ink-muted); }

/* ── страница товара: телефон ──────────────────────────────── */
.product { max-width: 640px; }
/* scroll-snap-type: proximity, а не mandatory, и без scroll-behavior: smooth.
   С жёстким прилипанием каждая догрузившаяся картинка заставляла ленту
   «доводиться» к следующему кадру, и она молча уползала с первого фото. */
.gallery {
  display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x proximity;
  border-radius: 8px; scrollbar-width: thin; overflow-anchor: none;
}
/* Кадр чуть уже полосы, чтобы следующее фото выглядывало из-за края —
   без этого галерея выглядит как одна картинка, и её не листают. */
.gallery img {
  flex: 0 0 92%; width: 92%; aspect-ratio: 3 / 4; object-fit: contain;
  border-radius: 8px; scroll-snap-align: start;
}
.gallery-hint { font-size: 0.85rem; color: var(--ink-muted); margin: 0.4rem 0 0; }
.description { line-height: 1.55; }


/* ── похожие товары ────────────────────────────────────────── */
.similar { max-width: 1100px; margin: 3rem auto 0; }
.similar h2 {
  font-size: 1.25rem; margin: 0 0 1rem;
  border-bottom: 2px dashed var(--brass); padding-bottom: 0.5rem;
}
.similar .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ── форма заказа ──────────────────────────────────────────── */
#order-form { display: flex; flex-direction: column; gap: 0.6rem; max-width: 420px; margin-top: 2rem; }
#order-form h2 { font-size: 1.2rem; margin: 0; }
#order-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; color: var(--ink-muted); }
#order-form input { padding: 0.6rem; font-size: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }

/* ── подтверждение заказа ──────────────────────────────────── */
.order-done {
  max-width: 480px; margin-top: 2rem; padding: 1.1rem 1.2rem;
  border: 2px solid var(--pine); border-radius: 12px; background: var(--surface);
}
.order-done h2 { margin: 0 0 0.6rem; font-size: 1.25rem; color: var(--pine); }
.order-done p { margin: 0 0 0.6rem; line-height: 1.5; }
.order-done-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.8rem; }
.order-text {
  margin: 0; padding: 0.7rem; border-radius: 8px; background: #fff;
  border: 1px dashed var(--line); font-size: 0.85rem; white-space: pre-wrap;
  font-family: inherit; color: var(--ink-muted);
}

/* ── шапка и подвал ────────────────────────────────────────── */
.site-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem 1.5rem;
  padding-bottom: 0.9rem; margin-bottom: 1.2rem; border-bottom: 2px dashed var(--brass);
}
.site-header .site-nav { flex: 1 1 auto; }
.brand { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.brand-name { font-size: 1.15rem; font-weight: 700; }
.brand-tagline { font-size: 0.8rem; color: var(--brass-deep); }
.site-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
/* Столбиком и по правому краю: в строку два номера не помещались рядом с
   меню и переносились сами, вразнобой. */
.site-phones { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; margin-left: auto; }
.phone { font-weight: 700; text-decoration: none; white-space: nowrap; color: var(--brass-deep); }
.phone:hover { text-decoration: underline; }
.footer-contacts { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.site-nav a { color: var(--ink-muted); text-decoration: none; font-size: 0.95rem; }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--brass-deep); font-weight: 700; }
.site-footer {
  margin-top: 3rem; padding-top: 1.2rem; border-top: 2px dashed var(--brass);
  font-size: 0.9rem; color: var(--ink-muted);
}
.footer-contacts { margin: 0.8rem 0 0.3rem; align-items: baseline; }
.footer-note { margin: 0; color: var(--ink-muted); }

/* ── видео ─────────────────────────────────────────────────── */
.video {
  position: relative; aspect-ratio: 16 / 9; margin: 1rem 0;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #000;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── карта ─────────────────────────────────────────────────── */
.map { margin: 1rem 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.map iframe { display: block; border: 0; }

/* ── услуги ────────────────────────────────────────────────── */
/* .page ниже задаёт 720px и стоит позже в файле, поэтому нужен вес побольше,
   иначе витрина услуг ужимается до двух колонок. */
.page.services-page { max-width: 1100px; }
.services-lead { max-width: 720px; }
.services-hero {
  width: 100%; max-width: 1100px; border-radius: 12px; margin: 1rem 0 0.5rem;
  aspect-ratio: 2 / 1; object-fit: cover;
}
.services-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.2rem; margin-top: 1.5rem;
}
.service-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--surface);
}
.service-card:hover { border-color: var(--brass); }
.service-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* Пока фотографии нет — ровный кремовый прямоугольник вместо дыры в сетке. */
.service-noimg {
  aspect-ratio: 4 / 3; background: repeating-linear-gradient(
    45deg, var(--bg), var(--bg) 12px, var(--surface) 12px, var(--surface) 24px);
  border-bottom: 1px dashed var(--brass);
}
.service-card h2 { font-size: 1.05rem; margin: 0.7rem 0.8rem 0.3rem; }
.service-card p { margin: 0 0.8rem 0.9rem; font-size: 0.88rem; color: var(--ink-muted); }
.service-photo { width: 100%; max-width: 620px; border-radius: 10px; margin: 0.5rem 0 1rem; }
.service-cta {
  border: 1px dashed var(--brass); border-radius: 10px; padding: 0.8rem 1rem;
  background: var(--surface); margin-top: 1.5rem;
}
.service-back { margin-top: 2rem; }

/* ── текстовые страницы ────────────────────────────────────── */
.page { max-width: 720px; }
.page h2 { font-size: 1.15rem; margin-top: 1.8rem; }
.page li { margin-bottom: 0.35rem; }
.draft {
  border: 1px dashed var(--brass); border-radius: 8px; padding: 0.6rem 0.8rem;
  background: var(--surface); color: var(--brass-deep); font-size: 0.9rem;
}

/* ── страница товара: компьютер ────────────────────────────── */
@media (min-width: 900px) {
  .product {
    max-width: 1100px;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 2.5rem; align-items: start;
  }
  /* Фото — своей колонкой с собственной прокруткой: страница не растягивается
     на 11 картинок, а цена, кнопки и форма остаются на виду. */
  .gallery {
    flex-direction: column; max-height: 84vh;
    overflow-x: hidden; overflow-y: auto; scroll-snap-type: y proximity;
  }
  .gallery img { flex: 0 0 auto; width: 100%; }
  .product-info { position: sticky; top: 1rem; }
  .product-info h1 { margin-top: 0; }
  #order-form { margin-top: 1.5rem; }
}

/* ── результаты поиска по всему каталогу ───────────────────── */
.global-results { margin: 1.5rem 0; }
.global-results h2 { font-size: 1.1rem; border-bottom: 2px dashed var(--brass); padding-bottom: 0.4rem; }
.global-results ul { columns: 2; column-gap: 2rem; padding-left: 1.1rem; margin: 0.8rem 0 0; }
.global-results li { margin-bottom: 0.35rem; break-inside: avoid; font-size: 0.92rem; }
@media (max-width: 699px) { .global-results ul { columns: 1; } }