/**
 * Слой 4 — блоки лендинга и постоянное обрамление.
 *
 * Тоже только токены: тема меняет вид, не трогая эти правила.
 * Шапка, подвал, cookie-плашка и липкая кнопка — обрамление, в композицию
 * блоков они не входят.
 */

/* ── Логотип: перерисован по вывеске салона ─────────────────────────────── */

.pl-logo {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    line-height: 1;
}

.pl-logo__word {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: var(--step-2);
    letter-spacing: .02em;
    color: var(--ink-strong);
    text-transform: uppercase;
    white-space: nowrap;
}

.pl-logo__sub {
    align-self: flex-start;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-size: var(--step--1);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 2px 14px 2px 10px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.pl-section--invert .pl-logo__word { color: var(--ink-invert); }

/* ── Шапка ──────────────────────────────────────────────────────────────── */

.pl-top {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface-page);
    box-shadow: var(--shadow-inset-line);
}

.pl-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    min-height: 64px;
    padding-block: var(--gap-sm);
}

.pl-top__nav { display: none; gap: var(--gap-lg); }
.pl-top__nav a { color: var(--ink-body); text-decoration: none; font-weight: 500; }
.pl-top__nav a:hover { color: var(--accent-strong); }

.pl-top__side { display: flex; align-items: center; gap: var(--gap-md); }
.pl-top__phone { display: none; font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-strong); text-decoration: none; white-space: nowrap; }

/* Вход в кабинет. Ссылка, а не кнопка: кнопка в шапке спорила бы с липкой
   кнопкой внизу — на мобильном они видны одновременно. Цель нажатия всё
   равно 44 пикселя в высоту: это шапка, промахиваться по ней нечем. */
.pl-top__cabinet {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--accent-strong);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.pl-top__cabinet:hover { text-decoration: underline; }

@media (min-width: 900px) {
    .pl-top__nav { display: flex; }
    .pl-top__phone { display: inline-block; }
}

/* ── Первый экран ───────────────────────────────────────────────────────── */

.pl-hero { display: grid; gap: var(--gap-xl); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1000px) { .pl-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

.pl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gap-md); margin-top: var(--gap-lg); }
.pl-hero__note { margin-top: var(--gap-md); color: var(--ink-muted); font-size: var(--step--1); }

.pl-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-md); margin-top: var(--gap-xl); }
.pl-counters__label { color: var(--ink-muted); font-size: var(--step--1); display: block; margin-top: 2px; }

/* Доказательство: карточка расчёта, как её видит клиент в форме. */
.pl-proof { position: relative; }
.pl-proof__card { background: var(--surface-card); border: 1px solid var(--surface-line); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); overflow: hidden; }
.pl-proof__head { background: var(--accent); color: var(--accent-ink); padding: var(--gap-md) var(--gap-lg); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.pl-proof__body { padding: var(--gap-lg); }
.pl-proof__line { display: flex; justify-content: space-between; gap: var(--gap-md); padding: 8px 0; border-bottom: 1px dashed var(--surface-line); }
.pl-proof__line:last-of-type { border-bottom: 0; }
.pl-proof__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-md); margin-top: var(--gap-md); padding-top: var(--gap-md); border-top: 2px solid var(--ink-strong); }
.pl-proof__sum { font-family: var(--font-display); font-size: var(--step-4); color: var(--ink-strong); }

/* Угловые элементы с прайсов — фирменная деталь, не декоративный шум. */
.pl-corner { position: absolute; pointer-events: none; z-index: -1; opacity: .9; }
.pl-corner--blue { top: calc(var(--gap-xl) * -1); left: calc(var(--gap-lg) * -1); width: clamp(90px, 14vw, 170px); opacity: .5; }
.pl-corner--orange { bottom: 0; right: 0; width: clamp(110px, 20vw, 240px); transform: scaleX(-1); }

/* ── Поиск обычными словами ─────────────────────────────────────────────── */

.pl-search__demo { background: var(--surface-card); border: 1px solid var(--surface-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.pl-search__query { display: flex; align-items: center; gap: var(--gap-sm); padding: var(--gap-md) var(--gap-lg); border-bottom: 1px solid var(--surface-line); font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-strong); }
.pl-search__query span { color: var(--ink-muted); }
.pl-search__hit { display: flex; justify-content: space-between; gap: var(--gap-md); padding: var(--gap-md) var(--gap-lg); border-bottom: 1px solid var(--surface-line); }
.pl-search__hit:last-child { border-bottom: 0; }
.pl-search__hit b { color: var(--ink-strong); font-weight: 600; }
.pl-search__price { white-space: nowrap; font-family: var(--font-display); color: var(--ink-strong); }

.pl-chips { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-top: var(--gap-md); }

/* ── Каталог ────────────────────────────────────────────────────────────── */

/* Кадра прайса на карточке больше нет — верхний отступ сравнялся с боковыми. */
.pl-cat { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.pl-cat__body { padding: var(--gap-lg); display: flex; flex-direction: column; gap: var(--gap-xs); flex: 1; align-items: flex-start; }
.pl-cat__body .pl-tag { align-self: flex-start; }
.pl-cat__body .pl-cat__row, .pl-cat__body details { width: 100%; }
.pl-cat__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-sm); }
.pl-cat__from { font-family: var(--font-display); color: var(--ink-strong); white-space: nowrap; }

/* Лента прайсовых листов (`.pl-sheets`) убрана вместе с блоком: графических
   прайсов на странице нет. */

/* ── Готовые работы ─────────────────────────────────────────────────────── */

/* auto-fit с minmax: снимков может быть три, а может двенадцать — сетка не
   должна требовать правки CSS при каждом пополнении. */
.pl-works { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pl-work { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Кадры у салона разного размера — общее соотношение держит ряд ровным,
   а object-fit не даёт снимку растянуться. */
.pl-work__pic { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-tint); }
.pl-work__body { padding: var(--gap-md) var(--gap-lg) var(--gap-lg); display: flex; flex-direction: column; gap: var(--gap-xs); }
.pl-work__body .pl-text { margin: 0; }

/* ── Шаги ───────────────────────────────────────────────────────────────── */

.pl-step { position: relative; padding-top: var(--gap-lg); }
.pl-step__no { position: absolute; top: 0; left: 0; font-family: var(--font-display); font-size: var(--step-3); color: var(--accent); line-height: 1; }
.pl-step h3 { margin-top: var(--gap-sm); }

/* Блок сроков (`.pl-ready`) снят: страница не обещает дату готовности.
   Скин `invert` в примитивах остался — под будущую тёмную врезку. */

/* ── Оплата ─────────────────────────────────────────────────────────────── */

.pl-pay { display: grid; gap: var(--gap-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .pl-pay { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pl-pay__off { color: var(--ink-muted); }
.pl-pay__off::before { background: var(--surface-line) !important; }
.pl-pay__legal { margin-top: var(--gap-md); font-size: var(--step--1); color: var(--ink-muted); }

/* ── Финальный призыв ───────────────────────────────────────────────────── */

.pl-cta { text-align: center; }
.pl-cta .pl-lead { margin-inline: auto; }
.pl-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--gap-md); margin-top: var(--gap-lg); }

/* ── Контакты ───────────────────────────────────────────────────────────── */

.pl-contacts { display: grid; gap: var(--gap-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pl-contacts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pl-contacts__line { display: flex; gap: var(--gap-md); padding: var(--gap-sm) 0; border-bottom: 1px solid var(--surface-line); }
.pl-contacts__line dt { color: var(--ink-muted); min-width: 132px; }
.pl-contacts__line dd { margin: 0; color: var(--ink-strong); font-weight: 600; }
/* Фотографии вывесок (`.pl-contacts__photos`) убраны: во второй колонке
   контактов теперь карта, а телефон и режим работы написаны текстом слева. */

/* Карта. Высота задана заранее: пока iframe грузится, место под него уже
   занято, и страница не прыгает. Подложка — чтобы пустой кадр не белел. */
.pl-mapbox { display: grid; gap: var(--gap-sm); align-content: start; }
.pl-map { height: clamp(280px, 42vw, 440px); border-radius: var(--radius-card); border: 1px solid var(--surface-line); overflow: hidden; background: var(--surface-tint); }
.pl-map__frame { display: block; width: 100%; height: 100%; border: 0; }

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

.pl-foot { background: var(--surface-invert); color: var(--ink-invert-muted); padding-block: var(--gap-xl); }
.pl-foot a { color: var(--ink-invert); }
.pl-foot__grid { display: grid; gap: var(--gap-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .pl-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pl-foot__title { font-family: var(--font-display); text-transform: uppercase; color: var(--ink-invert); margin-bottom: var(--gap-sm); }
.pl-foot__legal { margin-top: var(--gap-lg); padding-top: var(--gap-md); border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--step--1); }

/* ── Cookie-плашка и липкая кнопка ──────────────────────────────────────── */

.pl-cookie {
    position: fixed;
    left: var(--gap-md);
    right: var(--gap-md);
    bottom: var(--gap-md);
    z-index: 40;
    background: var(--surface-card);
    border: 1px solid var(--surface-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lift);
    padding: var(--gap-md) var(--gap-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 700px) { .pl-cookie { left: auto; max-width: 520px; } }

.pl-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    padding: var(--gap-sm) var(--gap-md) calc(var(--gap-sm) + env(safe-area-inset-bottom, 0px));
    background: var(--surface-page);
    box-shadow: 0 -1px 0 var(--surface-line), var(--shadow-lift);
}

/* Уезжает вниз, пока на экране видна кнопка заказа в тексте: одновременно
   двух призывов «Оформить заказ» человек видеть не должен. Класс ставит
   скрипт; без него кнопка просто остаётся на месте. */
.pl-sticky { transition: transform .2s ease; }
.pl-sticky.is-off { transform: translateY(110%); pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .pl-sticky { transition: none; } }

@media (min-width: 900px) { .pl-sticky { display: none; } }

/* Липкая кнопка перекрывает подвал — компенсируем на мобильном. */
@media (max-width: 899px) { .pl-foot { padding-bottom: calc(var(--gap-xl) + 72px); } }

/* ── Юридические страницы ───────────────────────────────────────────────── */

.pl-legal { padding-block: var(--section-y); }
.pl-legal h2 { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink-strong); margin: var(--gap-lg) 0 var(--gap-sm); }
.pl-legal p, .pl-legal li { max-width: var(--measure); }