:root {
    /* Ширины. Блок 1 и блок 3 одинаковые, блок 2 чуть уже. */
    --canvas: 1400px;
    --w-block1: var(--canvas);
    --w-block2: calc(var(--canvas) * 0.94);
    --w-block3: var(--canvas);

    /* Шрифты. Здесь запасные значения; сейчас их перекрывает
       пресет 6 (Raleway + Golos Text) ниже по файлу. */
    --font-text: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-head: var(--font-text);

    /* Размеры */
    --size-text: 17px;   /* интерфейс: шапка, подписи */
    --size-desc: 18px;   /* описание товара */

    --pad: 24px;   /* боковые поля страницы */
    --gap: 10px;   /* просвет внутри сеток */
    --air: 88px;   /* воздух между блоками */

    --ink: #14161a;
    --muted: #8b8d94;
    --line: #e9e9ec;
    --tile: #f4f4f6;  /* подложка под фото */

    /* Цвет кнопки приходит из файла объявления, это запасной. */
    --btn: #14161a;

    /* Фирменная полоска над шапкой: высота, фон, текст и три косые полосы.
       Свои цвета — меняются здесь и больше нигде. */
    --brand-h: 21px;
    --brand-bg: #BD42CA;
    --brand-text: #ffffff;
    --brand-m1: #f0a63c;
    --brand-m2: #9FF04C;
    --brand-m3: #FFEC51;

    /* Высоту шапки проставляет app.js. */
    --header-h: 76px;
}

/* ─────────────────────────────────────────────────────────
   ПРЕСЕТЫ ШРИФТОВ

   Пресет 1 — системный, уже включён выше. Ничего не грузится,
   страница открывается мгновенно, но вид разный на Windows,
   macOS и Android.

   Пресеты 2–4 подключают шрифты Google. Чтобы включить:
     1) раскомментировать нужную строку <link> в index.php;
     2) раскомментировать блок ниже.
   Включать одновременно только один.

   Оговорка: Google Fonts — внешний домен. Это лишний запрос при
   загрузке, а в части сетей он недоступен. Если станет важно —
   скачайте файлы шрифта и раздавайте со своего сервера через
   @font-face, имена в переменных останутся те же.
   ───────────────────────────────────────────────────────── */

/* ПРЕСЕТ 2. Golos Text везде.
   Паратайп, 2019, спроектирован под непрерывное чтение с экрана,
   кириллица родная. Нейтральный и спокойный, ближе всего к тому,
   что сейчас, но одинаковый на всех системах. */
/*
:root {
    --font-text: "Golos Text", system-ui, sans-serif;
    --font-head: "Golos Text", system-ui, sans-serif;
}
*/

/* ПРЕСЕТ 3. PT Serif в заголовках, PT Sans в тексте.
   Русская пара от того же Паратайпа. Засечки в заголовках дают
   более «книжный», обстоятельный тон — уместно, когда описание
   длинное и его надо дочитать. */
/*
:root {
    --font-text: "PT Sans", system-ui, sans-serif;
    --font-head: "PT Serif", Georgia, serif;
    --size-desc: 19px;
}
*/

/* ПРЕСЕТ 4. Montserrat в заголовках, Golos Text в тексте.
   Геометрический гротеск в шапке — тот самый «магазинный» вид.
   Кириллицу Montserrat Google дорисовывал отдельно, она полная.
   Заголовки набираются средним весом: жирный Montserrat тяжелит. */
/*
:root {
    --font-text: "Golos Text", system-ui, sans-serif;
    --font-head: "Montserrat", system-ui, sans-serif;
}

.topbar h1,
.related__title,
.description h2 { font-weight: 600; letter-spacing: -.005em; }
*/

/* ПРЕСЕТ 5. Raleway везде — как на zimabudet.
   Кириллицу нарисовал Пабло Импальяри в 2013-м, охват широкий.
   Учтите: авторы называют Raleway display-гарнитурой, то есть
   заголовочной. В длинном описании он утомляет сильнее нейтрального
   гротеска, а тонкие веса на светлом фоне бледнят. Поэтому текст
   набираем весом 400 и не ниже. */
/*
:root {
    --font-text: "Raleway", system-ui, sans-serif;
    --font-head: "Raleway", system-ui, sans-serif;
    --size-desc: 18px;
}

.topbar h1,
.related__title,
.description h2,
.description h3 { font-weight: 600; }
*/

/* ПРЕСЕТ 6 — ВКЛЮЧЁН. Raleway в заголовках, Golos Text в тексте.
   Тот же характер в шапке и заголовках, но описание читается спокойнее.
   Выключить — закомментировать блок ниже и строку <link> в index.php,
   contact.php и templates/404.php. */
:root {
    --font-text: "Golos Text", system-ui, sans-serif;
    --font-head: "Raleway", system-ui, sans-serif;
}

.topbar h1,
.related__title,
.description h2,
.description h3 { font-weight: 600; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0 0 120px;
    background: #fff;
    color: var(--ink);
    font: var(--size-text) / 1.6 var(--font-text);
    -webkit-text-size-adjust: 100%;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* ── Блоки ──────────────────────────────────────────────── */

.block {
    width: min(100% - var(--pad) * 2, var(--canvas));
    margin-inline: auto;
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.block--content { max-width: var(--w-block2); }
.block--related { max-width: var(--w-block3); }

main > .block { margin-top: var(--air); }

/* ── Блок 1: липкая шапка ───────────────────────────────── */

.sticky-sentinel { height: 1px; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--line);
    transition: box-shadow .18s ease;
}

.topbar.is-stuck { box-shadow: 0 1px 14px rgba(20, 22, 26, .09); }

/* ── Фирменная полоска над шапкой ───────────────────────── */

.brandbar {
    position: relative;
    height: var(--brand-h);
    background: var(--brand-bg);
    overflow: hidden;
}

/* Три полосы: одна плашка с трёхцветным градиентом, наклонённая skewX.
   Стоит по центру правой четверти экрана, справа от неё снова фон.
   Ширина ограничена снизу, чтобы на телефоне полосы не стали нитками. */
.brandbar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 87.5%;
    width: clamp(54px, 9vw, 150px);
    transform: translateX(-50%) skewX(-24deg);
    background: linear-gradient(90deg,
        var(--brand-m1) 0 33.333%,
        var(--brand-m2) 33.333% 66.666%,
        var(--brand-m3) 66.666% 100%);
    pointer-events: none;
}

.brandbar__inner {
    position: relative;
    z-index: 1;
    width: min(100% - var(--pad) * 2, var(--w-block1));
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
}

.brandbar__link {
    color: var(--brand-text);
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    text-decoration: none;
}

.brandbar__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Общая рамка фокуса тёмная и на тёмном фоне не видна */
.brandbar__link:focus-visible { outline-color: var(--brand-text); }

.topbar__inner {
    width: min(100% - var(--pad) * 2, var(--w-block1));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 18px 0;
}

.topbar__title { min-width: 0; }

.topbar h1 {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(19px, 2.1vw, 28px);
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__price {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 15px;
}

.button {
    flex: none;
    display: inline-block;
    padding: 13px 26px;
    background: var(--btn);
    color: #fff;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: filter .15s ease;
}

.button:hover { filter: brightness(1.12); }

/* Блок кнопки: сама кнопка и рейтинг под ней */
.topbar__action {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.rating {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
}

.rating:hover .rating__count { text-decoration: underline; }

.stars { display: block; }
.stars__bg { fill: #dcdce2; }
.stars__on { fill: #f0a63c; }

.rating__value {
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}


/* Проданное: та же плашка, но серая и некликабельная. */
.button--sold {
    background: #f0f0f2;
    color: var(--muted);
    cursor: default;
}

.button--sold:hover { filter: none; }

/* ── Страница 404 ───────────────────────────────────────── */

.error { padding: 96px 0; }

.error h1 {
    font-family: var(--font-head);
    margin: 0 0 12px;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 550;
    letter-spacing: -.015em;
}

.error p { margin: 0 0 8px; color: var(--muted); }

.error__link { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

/* ── Блок 2: галерея ────────────────────────────────────── */

.gallery {
    /* Соотношение плиток задаёт PHP по первому фото объявления. */
    --ratio: 4 / 3;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--gap);
}

.gallery__item {
    grid-column: span 2;
    display: block;
    background: var(--tile);
    border: 1px solid var(--line);
}

.gallery__item--lead { grid-column: span 3; }
.gallery__item--solo { grid-column: span 6; }

.gallery__item img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--ratio);
    object-fit: cover;
}

.gallery-empty {
    margin: 0;
    padding: 72px 0;
    text-align: center;
    color: var(--muted);
    background: var(--tile);
}

/* Неполный последний ряд — по центру, ширина остаётся 1/3. */
@media (min-width: 721px) {
    .gallery__item--offset { grid-column: var(--col-start) / span 2; }
}

/* ── Блок 2: описание ───────────────────────────────────── */

.description {
    max-width: 88ch;
    margin: 72px auto 0;
    font-size: var(--size-desc);
    line-height: 1.7;
}

.description > :first-child { margin-top: 0; }
.description > :last-child  { margin-bottom: 0; }
.description p  { margin: 0 0 1.15em; }
.description ul,
.description ol { margin: 0 0 1.15em; padding-left: 1.25em; }
.description li { margin-bottom: .5em; }
.description a  { text-decoration: underline; text-underline-offset: 2px; }

.description h2 {
    font-family: var(--font-head);
    margin: 3.9em 0 .5em;
    font-size: 1.33em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.description h3 {
    font-family: var(--font-head);
    margin: 2.5em 0 .4em;
    font-size: 1.18em;
    font-weight: 500;
    line-height: 1.35;
}

.description h2:first-child,
.description h3:first-child { margin-top: 0; }

/* Таблицы: размерные сетки и характеристики */
.table-scroll {
    margin: 0 0 1.3em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.description table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92em;
    line-height: 1.45;
}

.description th,
.description td {
    padding: 9px 14px 9px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.description th {
    font-weight: 600;
    white-space: nowrap;
}

.description thead th { border-bottom-color: var(--ink); }

.description tbody tr:last-child td { border-bottom: none; }

/* ── Блок 3: другие объявления ──────────────────────────── */

.block--related { padding-top: 40px; border-top: 1px solid var(--line); }

.related__title {
    margin: 0 0 24px;
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 550;
    letter-spacing: -.01em;
}

.related {
    --cols: 6;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ширина колонки считается вручную, чтобы неполный ряд не растягивался. */
.related__cell {
    flex: 0 0 calc((100% - (var(--cols) - 1) * 20px) / var(--cols));
    min-width: 0;
}

.related__link { display: block; text-decoration: none; }

.related__link img,
.related__stub {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--tile);
    border: 1px solid var(--line);
}

.related__link:hover img { opacity: .85; }

/* Проданное: фото приглушено, плюс текстовая пометка — видна и без цвета. */
.related__link--sold img {
    opacity: .5;
    filter: grayscale(.7);
}

.related__sold {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 6px;
    background: #f0f0f2;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
}

.related__caption {
    display: -webkit-box;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Лайтбокс ───────────────────────────────────────────── */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(255, 255, 255, .98);
}

.lightbox[hidden] { display: none; }

.lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
}

.lightbox__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.lightbox__btn:hover { background: var(--tile); }
.lightbox__btn[hidden] { display: none; }

.lightbox__close { top: 24px; right: 24px; }
.lightbox__prev  { left: 24px;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 24px; top: 50%; transform: translateY(-50%); }

.lightbox__counter {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

body.is-locked { overflow: hidden; }

/* ── Мобильные ──────────────────────────────────────────── */

@media (max-width: 720px) {
    :root { --pad: 14px; --gap: 6px; --air: 48px; }

    body { padding-bottom: 64px; }

    .topbar__inner { gap: 14px; padding: 14px 0; }
    .topbar h1 { white-space: normal; }

    .button { padding: 11px 18px; font-size: 14px; }

    .topbar__action { gap: 5px; }
    .rating { gap: 5px; font-size: 12px; }
    .stars { width: 82px; height: 15px; }

    .gallery { grid-template-columns: repeat(2, 1fr); }
    .gallery__item { grid-column: span 1; }

    /* Первые два фото — во всю ширину, по одному. */
    .gallery__item--lead,
    .gallery__item--solo { grid-column: span 2; }

    .description { margin-top: 40px; }

    .block--related { padding-top: 28px; }
    .related { --cols: 3; gap: 12px; }
    .related__cell { flex-basis: calc((100% - (var(--cols) - 1) * 12px) / var(--cols)); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

/* ── Обратная связь: кнопка в углу, модалка, форма ───────── */

/* Столбик кнопок в углу: каждая появляется по своему условию,
   поэтому позиционируем контейнер, а не сами кнопки. */
.contact-dock {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Пока открыто окно формы, столбик прячем — иначе кнопки торчат поверх него */
body.is-locked .contact-dock { display: none; }

.contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 4px 16px rgba(20, 22, 26, .22);
    transition: transform .15s ease;
}

.contact-button:hover { transform: translateY(-2px); }

/* Телеграм — фирменным синим, чтобы кнопки не путались */
.contact-button--tg { background: #229ed9; }

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    /* Окно у кнопок в правом нижнем углу, а не по центру экрана:
       взгляд не перескакивает, путь «нажал — заполняю» остаётся коротким. */
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px;
    background: rgba(20, 22, 26, .45);
}

.modal[hidden] { display: none; }

.modal__window {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 28px;
    background: #fff;
    border-radius: 10px;
}

.modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.modal__close:hover { background: var(--tile); }

.modal__title {
    font-family: var(--font-head);
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 600;
}

.contact-page { margin-top: 56px; max-width: 520px; }

.form__row { margin-bottom: 16px; }

.form__label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    color: var(--muted);
}

.form__input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
}

.form__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.form__textarea { resize: vertical; min-height: 120px; }

.form__error {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #c8232c;
}

.form__alert {
    margin: 0 0 16px;
    padding: 11px 13px;
    border-radius: 6px;
    background: #fdecec;
    color: #93222a;
    font-size: 14px;
}

.form__done {
    margin: 0;
    padding: 14px 16px;
    border-radius: 6px;
    background: #eef7f1;
    color: #1f6b46;
}

.form__consent {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

.form__consent a { color: var(--ink); }

.form__submit {
    width: 100%;
    margin-top: 6px;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    --btn: var(--ink);
}

.form__submit[disabled] { opacity: .6; cursor: default; }

/* Ловушка для ботов: убрана с глаз, но доступна их парсерам */
.form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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

.site-footer {
    margin-top: var(--air);
    border-top: 1px solid var(--line);
}

.site-footer__inner {
    width: min(100% - var(--pad) * 2, var(--canvas));
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding: 28px 0;
    font-size: 15px;
}

.site-footer a {
    color: var(--muted);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Все объявления ──────────────────────────────────────── */

.catalog { margin-top: 56px; max-width: 760px; }

.catalog section + section { margin-top: 56px; }

.catalog__heading {
    font-family: var(--font-head);
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 600;
}

.catalog__count {
    margin-left: 6px;
    font-size: 15px;
    font-weight: 400;
    color: var(--muted);
}

.catalog__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.catalog__link {
    color: var(--ink);
    text-decoration: none;
}

.catalog__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Название и под ним полный адрес мелким шрифтом */
.catalog__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.catalog__url {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
    text-decoration: none;
    overflow-wrap: anywhere;   /* длинный адрес переносится, а не распирает страницу */
}

.catalog__url:hover { text-decoration: underline; text-underline-offset: 2px; }

.catalog__price {
    flex: none;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Проданные — приглушённо, но кликабельно: страницы живые */
.catalog__sold .catalog__link { color: var(--muted); }

.catalog__empty { color: var(--muted); }

/* ── Обратная связь на мобильных ─────────────────────────── */
/* Блок идёт последним: правила формы выше, и медиазапрос должен
   стоять после них, иначе значения по умолчанию его перебьют. */
@media (max-width: 720px) {
    .contact-dock {
        right: 14px;
        bottom: 14px;
        gap: 8px;
    }

    .contact-button { width: 46px; height: 46px; }

    /* На узком экране окно занимает ширину целиком и прижато к низу */
    .modal {
        padding: 12px;
        align-items: flex-end;
        justify-content: center;
    }

    .modal__window {
        padding: 20px;
        max-height: calc(100vh - 100px);
    }
}