/* ============================================================
   РЕПУТОП — стили сайта
   Палитра: синий / зелёный / белый (по ТЗ)
   ============================================================ */

:root {
  --blue:        #1d4ed8;
  --blue-600:    #2563eb;
  --blue-dark:   #0b1f4b;
  --blue-soft:   #eef3fe;
  --green:       #22c55e;
  --green-600:   #16a34a;
  --green-soft:  #e9f9ef;
  --white:       #ffffff;
  --bg:          #ffffff;
  --bg-soft:     #f5f8ff;
  --text:        #1e293b;
  --muted:       #64748b;
  --line:        #e2e8f0;
  --radius:      16px;
  --shadow:      0 10px 30px rgba(11, 31, 75, .10);
  --shadow-lg:   0 20px 50px rgba(11, 31, 75, .16);
  --font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; font-size: 1rem; }

.container { width: min(1120px, 92%); margin: 0 auto; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: 14px;
  padding: 16px 30px;
  font-size: 1.05rem; font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-align: center;
}
.btn:active { transform: scale(.98); }
.btn-green {
  background: var(--green); color: #fff;
  box-shadow: 0 8px 24px rgba(34, 197, 94, .35);
}
.btn-green:hover { background: var(--green-600); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-600); }
.btn-outline {
  background: transparent; color: var(--blue);
  border: 2px solid var(--blue);
}
.btn-outline:hover { background: var(--blue-soft); }
.btn-block { width: 100%; }
.btn-lg { padding: 18px 40px; font-size: 1.15rem; border-radius: 16px; }
.btn-sm { padding: 10px 18px; font-size: .92rem; border-radius: 10px; }

/* ============================================================
   ШАПКА (все страницы кроме главной)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  height: 68px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-img { height: 40px; width: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.logo-text {
  color: var(--blue-dark); font-weight: 800; font-size: 1.3rem;
  letter-spacing: -.02em; line-height: 1;
}

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.cart-btn {
  position: relative;
  width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff;
  display: grid; place-items: center;
  transition: background .15s;
}
.cart-btn:hover { background: var(--blue-soft); }
.cart-btn svg { width: 22px; height: 22px; stroke: var(--blue-dark); }
.cart-badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 999px; background: var(--green);
  color: #fff; font-size: .72rem; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(34,197,94,.5);
}
.cart-badge.hidden { display: none; }

/* Выпадающая корзина */
.cart-panel {
  position: fixed; top: 76px; right: calc((100vw - min(1120px, 92vw)) / 2);
  width: min(360px, 92vw);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px; z-index: 110;
  display: none;
}
.cart-panel.open { display: block; animation: fadeDown .18s ease; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px);} to { opacity: 1; transform: none;} }
.cart-panel h4 { font-size: 1.05rem; margin-bottom: 12px; color: var(--blue-dark); }
.cart-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: .95rem; }
.cart-row span:last-child { font-weight: 700; }
.cart-total {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 12px;
  font-weight: 800; font-size: 1.05rem; color: var(--blue-dark);
}
.cart-empty { text-align: center; color: var(--muted); padding: 14px 0 18px; font-size: .95rem; }
.cart-panel .btn { margin-top: 12px; }
.cart-clear {
  background: none; border: none; color: var(--muted); font-size: .85rem;
  text-decoration: underline; margin-top: 10px; width: 100%;
}

/* ============================================================
   ГЛАВНАЯ — HERO
   ============================================================ */
.hero {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(34,197,94,.2), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, rgba(29,78,216,.18), transparent 60%),
    linear-gradient(160deg, #eaf2ff 0%, #f0faf4 55%, #e8f0ff 100%);
  padding: 44px 0 56px;
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 48px; align-items: center;
}
.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.12; letter-spacing: -.03em;
  color: var(--blue-dark); font-weight: 800;
}
.hero h1 em { font-style: normal; color: var(--green-600); }
.hero-sub {
  margin: 20px 0 34px;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--muted); max-width: 520px;
}
.hero-sub b { color: var(--text); }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-note { margin-top: 18px; font-size: .9rem; color: var(--muted); }

/* Визуал: фото обеих NFC-карточек одним кадром */
.cards-stage { position: relative; height: 420px; }
.card-photo-hero {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(430px, 92%); display: block;
  filter: drop-shadow(0 18px 34px rgba(16,42,90,.20));
}
.card-logo .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.card-chip {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 46px; height: 34px; border-radius: 7px;
  background: linear-gradient(135deg, #ffd76a, #e8b93c);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
}
.scroll-hint {
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  color: var(--muted); font-size: .85rem; display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: bob 1.8s infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0);} 50% { transform: translate(-50%, 8px);} }

/* ============================================================
   ОБЩИЕ СЕКЦИИ
   ============================================================ */
/* Все блоки лендинга — на общем сером фоне (как «Отзывы решают»);
   титульный блок .hero остаётся со своим градиентом */
.section { padding: 52px 0; background: var(--bg-soft); }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--blue-dark); color: #fff; }

/* Плотная вёрстка: максимум информации на экране, без больших пробелов */

/* Блок «Честные отзывы и безопасность» */
.trust-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.trust-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.trust-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 18px; box-shadow: 0 2px 12px rgba(16,42,90,.05);
}
.trust-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-600);
  display: grid; place-items: center;
}
.trust-item b { display: block; font-size: 1.02rem; color: var(--text); }
.trust-item small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.45; }
.trust-stat {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(120deg, var(--blue-dark), #123a7a);
  color: #fff; border-radius: 18px; padding: 16px 20px;
}
.trust-num { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; color: var(--green); line-height: 1; white-space: nowrap; }
.trust-stat p { margin: 0; color: #dce6f7; font-size: .95rem; line-height: 1.4; }
.trust-side { display: flex; flex-direction: column; gap: 18px; }
.trust-qa {
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: 16px; padding: 18px 20px;
}
.trust-qa h3 { margin: 0 0 10px; font-size: 1.1rem; color: var(--blue-dark); }
.trust-qa p { margin: 0 0 10px; color: var(--muted); line-height: 1.55; font-size: .95rem; }
.trust-qa p:last-child { margin-bottom: 0; }

/* Фото карточек вместо мокапов */
.mat-photo-fig { margin: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.mat-photo {
  width: 100%; max-width: 300px; display: block;
  filter: drop-shadow(0 16px 30px rgba(16,42,90,.18));
}
.spec-strip { margin-top: 40px; }

/* Блок «Подойдёт к любому помещению» */
.scene-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 56px; align-items: center;
}
.scene-fig { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.scene-fig img { width: 100%; display: block; }
.scene-blue { border: 6px solid #2f6fed; transform: rotate(-2.5deg); }
.scene-green { border: 6px solid #00c48c; transform: rotate(2.5deg); }
.scene-title {
  margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--blue-dark);
}
.scene-note {
  margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 800; line-height: 1.3; color: var(--blue-dark);
}

/* Логотипы доставки */
.dl-ozon { color: #0058f8; }
.dl-word { font-weight: 800; letter-spacing: .01em; }
.dl-cdek img { height: 34px; }
.prices-note .price-green { color: var(--green-600); font-weight: 700; }

/* Поддержка внутри блока FAQ */
.support-inline {
  margin-top: 44px; text-align: center;
  background: linear-gradient(120deg, var(--blue-dark) 0%, #123a7a 60%, #0e5a3a 130%);
  color: #fff; border-radius: 24px; padding: 44px 28px;
}
.support-inline h3 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.02em; }
.support-inline p { color: #b9c4dd; margin: 10px 0 26px; }

/* Контакты мелким шрифтом в футере */
.footer-contacts {
  margin: 0; width: 100%; order: 10;
  font-size: .78rem; line-height: 1.6; color: rgba(255,255,255,.5);
}
.footer-contacts a { color: rgba(255,255,255,.72); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.section-head .kicker {
  display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-600);
  background: var(--green-soft); padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.section-dark .section-head .kicker { background: rgba(34,197,94,.15); color: var(--green); }
.section-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: -.02em; line-height: 1.2; color: var(--blue-dark); font-weight: 800;
}
.section-dark .section-head h2 { color: #fff; }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 1.05rem; }
.section-dark .section-head p { color: #b9c4dd; }

/* ---------- Блок «Проблема» ---------- */
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stat-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 38px 34px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 6px;
  background: linear-gradient(var(--blue), var(--green));
}
.stat-num {
  font-size: clamp(3rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -.04em;
  color: var(--blue); line-height: 1;
}
.stat-card:nth-child(2) .stat-num { color: var(--green-600); }
.stat-text { margin-top: 14px; font-size: 1.1rem; color: var(--text); }
.stat-text b { color: var(--blue-dark); }

/* ---------- Блок «Решение» ---------- */
.solution-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.solution-steps { list-style: none; margin-top: 28px; display: grid; gap: 18px; }
.solution-steps li {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
}
.step-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  background: var(--blue); color: #fff; font-weight: 800;
  display: grid; place-items: center;
}
li:nth-child(2) .step-num { background: var(--green-600); }
li:nth-child(3) .step-num { background: var(--blue-dark); }
.solution-steps b { display: block; color: var(--blue-dark); }
.solution-steps small { color: var(--muted); }
.phone-mockup {
  width: min(300px, 80%); margin: 0 auto;
  background: #0c0f16; border-radius: 40px; padding: 14px;
  box-shadow: var(--shadow-lg);
  border: 1px solid #232a3a;
}
.phone-mockup img,
.phone-mockup iframe { border-radius: 28px; width: 100%; display: block; }
.phone-mockup iframe { height: 560px; border: none; background: #fff; pointer-events: none; }

/* ---------- Блок «Статистика» (вертикальный график) ---------- */
.chart-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 40px 30px 26px;
}
.chart {
  display: flex; align-items: flex-end; justify-content: space-around;
  gap: 4%; height: 340px;
  border-bottom: 2px solid var(--line);
  padding: 0 10px;
}
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; max-width: 150px; }
.bar-value { font-weight: 800; font-size: 1.05rem; color: var(--blue-dark); margin-bottom: 8px; white-space: nowrap; }
.bar {
  width: 100%; border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, var(--blue-600), var(--blue));
  height: 0;
  transition: height 1.2s cubic-bezier(.22,.9,.35,1);
  position: relative;
}
.bar-col.win .bar { background: linear-gradient(180deg, var(--green), var(--green-600)); box-shadow: 0 0 30px rgba(34,197,94,.35); }
.bar-col.win .bar-value { color: var(--green-600); font-size: 1.25rem; }
/* Подписи — отдельным рядом под базовой линией, чтобы столбики стояли ровно */
.chart-labels { display: flex; justify-content: space-around; gap: 4%; padding: 14px 10px 0; }
.bar-label { flex: 1; max-width: 150px; text-align: center; font-size: .92rem; font-weight: 700; color: var(--text); }
.bar-label small { display: block; font-weight: 500; color: var(--muted); }
.chart-caption {
  text-align: center; margin-top: 26px; font-size: 1.15rem; font-weight: 700; color: var(--blue-dark);
}
.chart-caption b { color: var(--green-600); }

/* ---------- Блок «Премиум материалы» ---------- */
.materials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.mat-figure { position: relative; padding: 30px 0; }
.mat-card {
  position: relative; width: 100%; aspect-ratio: 1.586; border-radius: 22px;
  box-shadow: var(--shadow-lg);
}
.mat-front {
  background: linear-gradient(135deg, #ffffff 0%, #eef3fe 60%, #dbe7ff 100%);
  border: 1px solid #d7e3ff;
  display: flex; flex-direction: column; justify-content: space-between; padding: 24px;
}
.mat-back {
  background: linear-gradient(135deg, #101c3f 0%, #0b1f4b 60%, #123a2a 140%);
  display: grid; place-items: center;
}
.mat-back .back-label { color: #8fa3cf; font-weight: 700; letter-spacing: .2em; font-size: .85rem; text-transform: uppercase; }
.callout {
  position: absolute; max-width: 210px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; box-shadow: var(--shadow);
  font-size: .92rem; font-weight: 700; color: var(--blue-dark);
  z-index: 2;
}
.callout small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; }
.callout::after {
  content: ''; position: absolute; width: 46px; height: 2px;
  background: var(--green-600);
}
.callout .arrow-tip {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-600);
}
.co-coating { top: 0; left: -8px; }
.co-coating::after { right: 34px; bottom: -26px; transform: rotate(38deg); }
.co-coating .arrow-tip { right: 12px; bottom: -34px; }
.co-chip { bottom: 6px; right: -8px; }
.co-chip::after { left: 40px; top: -24px; transform: rotate(-32deg); }
.co-chip .arrow-tip { left: 18px; top: -32px; }
.mat-caption { margin-top: 22px; font-size: 1.02rem; color: var(--text); }
.mat-caption b { color: var(--blue-dark); }

/* ---------- Блок «Кейсы» (пока скрыт, включается в config.js) ---------- */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
}
.case-tag {
  align-self: flex-start; font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue); background: var(--blue-soft);
  padding: 5px 12px; border-radius: 999px;
}
.case-card h3 { font-size: 1.15rem; color: var(--blue-dark); }
.case-result { font-size: 1.5rem; font-weight: 800; color: var(--green-600); letter-spacing: -.02em; }
.case-card p { color: var(--muted); font-size: .95rem; }

/* ---------- Блок «Доставка и цены» ---------- */
/* ---------- Блок «Характеристики» ---------- */
.spec-section { padding-top: 0; }
.spec-strip {
  display: flex; gap: 18px 44px; justify-content: center; align-items: center; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--blue-soft), var(--green-soft));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 30px;
}
.spec-item { display: flex; align-items: center; gap: 14px; }
.spec-item svg { width: 42px; height: 42px; color: var(--blue); flex-shrink: 0; }
.spec-item b { display: block; font-size: 1.02rem; color: var(--blue-dark); }
.spec-item span { color: var(--muted); font-size: .95rem; }

.delivery-logos { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }
.dl-logo {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 28px; font-weight: 800; font-size: 1.2rem; box-shadow: var(--shadow);
}
.dl-logo img { height: 34px; width: auto; }
.price-table-wrap { max-width: 720px; margin: 0 auto; }
table.prices {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.prices th, .prices td { padding: 18px 22px; text-align: center; font-size: 1.05rem; }
.prices thead th {
  background: var(--blue-dark); color: #fff; font-weight: 700; letter-spacing: .02em;
}
.prices tbody tr:nth-child(even) { background: var(--bg-soft); }
.prices td:first-child { font-weight: 700; color: var(--blue-dark); }
.prices .price-val { font-weight: 800; color: var(--green-600); font-size: 1.15rem; }
.prices-note { text-align: center; margin-top: 22px; font-size: 1.1rem; font-weight: 700; color: var(--blue-dark); }
.prices-note .free, .hero-note .free { color: var(--green-600); font-weight: 700; }
.prices-note .paid { color: #e31e24; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; transition: box-shadow .2s;
}
.faq-item.open { box-shadow: var(--shadow); border-color: #c9d8f5; }
.faq-q {
  width: 100%; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; font-size: 1.05rem; font-weight: 700; color: var(--blue-dark);
  text-align: left;
}
.faq-arrow {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue-soft); display: grid; place-items: center;
  transition: transform .25s ease, background .25s;
}
.faq-arrow svg { width: 14px; height: 14px; stroke: var(--blue); }
.faq-item.open .faq-arrow { transform: rotate(90deg); background: var(--green-soft); }
.faq-item.open .faq-arrow svg { stroke: var(--green-600); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.faq-a-inner { padding: 0 24px 22px; color: var(--text); font-size: .98rem; }
.faq-a-inner p + p { margin-top: 10px; }

/* ---------- Поддержка / футер ---------- */
.support-band {
  background: linear-gradient(120deg, var(--blue-dark) 0%, #123a7a 60%, #0e5a3a 130%);
  color: #fff; padding: 70px 0; text-align: center;
}
.support-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; }
.support-band p { color: #b9c4dd; margin: 12px 0 30px; }
.support-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.tg-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 14px; padding: 14px 26px;
  font-weight: 700; transition: background .15s;
}
.tg-btn:hover { background: rgba(255,255,255,.2); }
.tg-btn.primary { background: var(--green); border-color: var(--green); }
.tg-btn.primary:hover { background: var(--green-600); }
.tg-btn svg { width: 20px; height: 20px; fill: currentColor; }

.contacts-section {
  padding: 44px 0;
  background: #f2f7ff;
  border-top: 1px solid var(--line);
}
.contacts-section h2 { margin-bottom: 14px; }
.contacts-text {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--muted);
  letter-spacing: .2px;
}
.contacts-text a { color: var(--blue); }

.site-footer {
  background: #081228; color: #8fa3cf; padding: 34px 0; font-size: .92rem;
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-inner .logo-img { height: 34px; width: 34px; }
.footer-inner .logo-text { color: #fff; font-size: 1.05rem; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: #b9c4dd; }
.footer-links a:hover { color: #fff; }

/* ============================================================
   ФОРМА ЗАКАЗА
   ============================================================ */
.order-page { padding: 48px 0 80px; }
.order-title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800;
  color: var(--blue-dark); letter-spacing: -.02em; margin-bottom: 8px;
}
.order-sub { color: var(--muted); margin-bottom: 36px; }
.order-layout { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; }

.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 30px;
  margin-bottom: 24px;
}
.form-card > h3 {
  font-size: 1.2rem; color: var(--blue-dark); margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
}
.form-card > h3 .num {
  width: 28px; height: 28px; border-radius: 9px; background: var(--blue);
  color: #fff; font-size: .9rem; display: grid; place-items: center; flex-shrink: 0;
}
.form-hint { color: var(--muted); font-size: .92rem; margin-bottom: 20px; }

/* Выбор дизайна: счётчики */
.design-row {
  display: flex; align-items: center; gap: 18px;
  padding: 16px; border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 14px; background: #fff;
}
.design-thumb {
  /* Карточка занимает всю рамку — без подложки, рамки и тени вокруг */
  display: block; width: 96px; height: 96px; flex-shrink: 0;
  object-fit: contain; border-radius: 10px;
  background: transparent;
}
.design-name { font-weight: 700; color: var(--blue-dark); flex: 1; }
.design-name small { display: block; font-weight: 500; color: var(--muted); font-size: .82rem; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button {
  width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line);
  background: #fff; font-size: 1.3rem; font-weight: 700; color: var(--blue);
  display: grid; place-items: center; line-height: 1;
  transition: background .15s, transform .1s;
}
.stepper button:hover { background: var(--blue-soft); }
.stepper button:active { transform: scale(.94); }
.stepper input {
  width: 64px; text-align: center; font-size: 1.1rem; font-weight: 800;
  border: 1px solid var(--line); border-radius: 11px; padding: 8px 4px;
  color: var(--blue-dark);
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

.total-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding: 18px 20px;
  background: var(--green-soft); border: 1px dashed var(--green);
  border-radius: 14px;
}
.total-line .t-label { font-weight: 700; color: var(--blue-dark); }
.total-line .t-price { font-size: 1.7rem; font-weight: 800; color: var(--green-600); letter-spacing: -.02em; }
.total-line .t-unit { font-size: .85rem; color: var(--muted); }

/* Поля форм */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: .92rem; color: var(--blue-dark); margin-bottom: 7px; }
.field label .req { color: #e31e24; }
.field .where-find {
  font-weight: 500; font-size: .85rem; color: var(--blue);
  text-decoration: underline; cursor: pointer; margin-left: 8px;
  background: none; border: none; padding: 0;
}
.field input[type=text], .field input[type=tel], .field input[type=email], .field input[type=url] {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s; background: #fff; color: var(--text);
}
.field input:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(29,78,216,.12);
}
.field input.invalid { border-color: #e31e24; box-shadow: 0 0 0 4px rgba(227,30,36,.1); }
.field .err-msg { display: none; color: #e31e24; font-size: .82rem; margin-top: 6px; }
.field.has-error .err-msg { display: block; }
.field .hint { font-size: .82rem; color: var(--muted); margin-top: 6px; }

/* Переключатели доставки и оплаты */
.toggle-group { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.toggle-opt { position: relative; }
.toggle-opt input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-opt .opt-face {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 2px solid var(--line); border-radius: 14px; padding: 16px;
  font-weight: 700; color: var(--text); background: #fff;
  transition: all .15s; cursor: pointer; text-align: center;
}
.toggle-opt .opt-face small { display: block; font-weight: 500; color: var(--muted); font-size: .82rem; }
.toggle-opt input:checked + .opt-face {
  border-color: var(--green-600); background: var(--green-soft); color: var(--blue-dark);
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}
.toggle-opt input:checked + .opt-face small { color: var(--green-600); }
.pay-toggle .opt-face { flex-direction: column; gap: 6px; padding: 20px; }
.pay-toggle .opt-face svg { width: 26px; height: 26px; }

/* Сводка заказа (сайдбар) */
.summary-card {
  position: sticky; top: 88px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px;
}
.summary-card h3 { color: var(--blue-dark); font-size: 1.1rem; margin-bottom: 16px; }
.sum-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: .95rem; color: var(--text); }
.sum-row span:last-child { font-weight: 700; text-align: right; }
.sum-row.muted { color: var(--muted); }
.sum-divider { border-top: 1px dashed var(--line); margin: 12px 0; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.25rem; font-weight: 800; color: var(--blue-dark); }
.sum-total span:last-child { color: var(--green-600); font-size: 1.5rem; }
.summary-card .btn { margin-top: 18px; }
.sum-note { margin-top: 12px; font-size: .8rem; color: var(--muted); text-align: center; }

/* ============================================================
   СТРАНИЦА ОПЛАТЫ
   ============================================================ */
.pay-page { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 40px 0; background: var(--bg-soft); }
.pay-card {
  width: min(520px, 94vw); background: #fff; border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 40px; text-align: center;
  border: 1px solid var(--line);
}
.pay-card .pay-icon {
  width: 74px; height: 74px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--blue-soft); display: grid; place-items: center;
}
.pay-card .pay-icon svg { width: 36px; height: 36px; stroke: var(--blue); }
.pay-card h1 { font-size: 1.6rem; color: var(--blue-dark); letter-spacing: -.02em; }
.pay-card .pay-order-id { color: var(--muted); margin: 8px 0 24px; font-size: .95rem; }
.pay-amount {
  font-size: 2.6rem; font-weight: 800; color: var(--blue-dark); letter-spacing: -.03em;
  margin-bottom: 6px;
}
.pay-methods { display: flex; gap: 12px; justify-content: center; margin: 22px 0 26px; flex-wrap: wrap; }
.pay-methods .pm {
  border: 2px solid var(--line); border-radius: 12px; padding: 12px 20px;
  font-weight: 700; font-size: .95rem; color: var(--text); background: #fff;
}
.pay-methods .pm.active { border-color: var(--green-600); background: var(--green-soft); color: var(--blue-dark); }
.pay-success { display: none; }
.pay-success.show { display: block; animation: fadeDown .3s ease; }
.pay-fail { display: none; }
.pay-fail.show { display: block; animation: fadeDown .3s ease; }
.success-check {
  width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--green-soft); display: grid; place-items: center;
}
.success-check svg { width: 44px; height: 44px; stroke: var(--green-600); }
.pay-success h1 { color: var(--green-600); }

/* Ошибка оплаты */
.pay-fail .success-check { background: #fdecec; }
.pay-fail .success-check svg { stroke: #e31e24; }
.pay-fail h1 { color: #e31e24; }
.checking-note {
  margin-top: 18px; text-align: center;
  color: var(--muted); font-size: .95rem; line-height: 1.5;
}
.pay-success .order-number {
  margin: 16px 0 26px; font-size: 1.15rem; color: var(--text);
}
.pay-success .order-number b { color: var(--blue-dark); font-size: 1.3rem; letter-spacing: .02em; }

/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ
   ============================================================ */
.account-page { padding: 48px 0 80px; }
.account-card {
  max-width: 640px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 34px;
}
.account-card h1 { font-size: 1.7rem; color: var(--blue-dark); letter-spacing: -.02em; margin-bottom: 6px; }
.account-card .sub { color: var(--muted); margin-bottom: 24px; font-size: .95rem; }
.order-status-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-top: 18px;
  background: var(--bg-soft);
}
.osc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.osc-head b { color: var(--blue-dark); font-size: 1.05rem; }
.status-pill {
  font-size: .8rem; font-weight: 800; padding: 5px 12px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue);
}
.status-pill.paid { background: var(--green-soft); color: var(--green-600); }
.osc-rows { display: grid; gap: 6px; font-size: .92rem; }
.osc-rows div { display: flex; justify-content: space-between; gap: 12px; }
.osc-rows span:first-child { color: var(--muted); }
.osc-rows span:last-child { font-weight: 600; text-align: right; }

/* ============================================================
   МОДАЛКА «ГДЕ НАЙТИ?»
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(8,18,40,.55);
  display: none; place-items: center; z-index: 200; padding: 20px;
}
.modal-backdrop.open { display: grid; }
.modal {
  width: min(520px, 100%); background: #fff; border-radius: 18px;
  padding: 30px; box-shadow: var(--shadow-lg);
  animation: fadeDown .2s ease;
}
.modal h3 { color: var(--blue-dark); font-size: 1.25rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.modal ol { padding-left: 20px; display: grid; gap: 10px; color: var(--text); font-size: .97rem; }
.modal .modal-close {
  margin-top: 22px; width: 100%;
}
.modal .brand-2gis { color: #4caf23; font-weight: 800; }
.modal .brand-yandex { color: #e31e24; font-weight: 800; }

/* ---------- Модал: выбор ПВЗ на карте ---------- */
.pvz-modal {
  width: min(880px, 100%); padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.pvz-hint-top { margin: 0; color: var(--muted); font-size: .9rem; }
.pvz-search-row { display: flex; gap: 10px; }
.pvz-search-row input {
  flex: 1; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 10px; font-size: .95rem; font-family: inherit;
}
.pvz-body { display: grid; grid-template-columns: 300px 1fr; gap: 12px; height: 420px; }
.pvz-geo-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--blue); font-weight: 600; font-size: .9rem; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.pvz-geo-btn svg { width: 15px; height: 15px; }
.pvz-geo-btn:hover { text-decoration: underline; }
.pvz-map { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); min-height: 300px; }
.pvz-results { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.pvz-empty { color: var(--muted); font-size: .9rem; text-align: center; margin: 20px 0; }
.pvz-item {
  text-align: left; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; cursor: pointer;
  transition: border-color .15s, background .15s; display: block; width: 100%;
}
.pvz-item:hover { border-color: var(--blue); background: var(--blue-soft); }
.pvz-item b { display: block; font-size: .92rem; color: var(--blue-dark); }
.pvz-item small { color: var(--muted); font-size: .82rem; }
.pvz-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pvz-selected { font-size: .9rem; color: var(--text); font-weight: 600; }
.pvz-foot-btns { display: flex; gap: 10px; }
.pvz-map-btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; }
.pvz-map-btn svg { width: 16px; height: 16px; }
.pvz-instr { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }

/* ---------- Интерактивная карта ПВЗ (Яндекс Карты) ---------- */
.pvz-map-box {
  margin-top: 12px; border: 1.5px solid var(--line); border-radius: 14px;
  overflow: hidden; background: #fff;
}
.pvz-map-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid #f0f2f7;
}
.pvz-map-head b { font-size: .92rem; color: var(--blue-dark); white-space: nowrap; }
.pvz-map-city {
  flex: 1; min-width: 150px; padding: 9px 12px; font-size: .9rem; font-family: inherit;
  border: 1.5px solid #d7dce8; border-radius: 10px; outline: none;
}
.pvz-map-city:focus { border-color: var(--green, #22c55e); }
.pvz-map-status { margin: 0; padding: 8px 12px; font-size: .8rem; color: var(--muted); min-height: 1.3em; }
.pvz-map-canvas { height: 320px; background: #e8ecf3; position: relative; overflow: hidden; }
.pvz-map-canvas .ymap,
.pvz-map-canvas .ymap * { font-family: inherit; }

/* Вкладки «Карта / Список» */
.pvz-tabs { display: inline-flex; gap: 3px; background: #edf1f8; border-radius: 10px; padding: 3px; margin-left: auto; }
.pvz-tab {
  border: none; background: transparent; font-family: inherit; font-size: .8rem; font-weight: 700;
  color: var(--muted); padding: 6px 12px; border-radius: 8px; cursor: pointer;
  transition: background .15s, color .15s;
}
.pvz-tab:hover { color: var(--blue-dark); }
.pvz-tab.is-active { background: #fff; color: var(--blue-dark); box-shadow: 0 1px 4px rgba(11,31,75,.14); }
.pvz-tab[hidden] { display: none; }

/* Список пунктов выдачи (fallback без карты) */
.pvz-list { list-style: none; margin: 0; padding: 8px; max-height: 340px; overflow-y: auto; }
.pvz-list-item {
  display: block; width: 100%; text-align: left; font-family: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  padding: 10px 12px; margin-bottom: 6px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pvz-list-item:last-child { margin-bottom: 0; }
.pvz-list-item:hover { border-color: var(--blue); background: var(--blue-soft); }
.pvz-list-item.is-selected { border-color: var(--green); background: var(--green-soft); }
.pvz-list-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.pvz-list-name { display: block; font-weight: 700; font-size: .9rem; color: var(--blue-dark); }
.pvz-list-addr { display: block; font-size: .84rem; color: var(--muted); margin-top: 2px; }
.pvz-list-sched { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }

@media (max-width: 560px) {
  .pvz-map-canvas { height: 250px; }
  .pvz-map-head { padding: 8px 10px; }
  .pvz-list { max-height: 260px; }
  .pvz-tabs { margin-left: 0; }
}
.pvz-yandex-link { text-decoration: none; }

/* Маркеры ПВЗ на карте */
.pvz-divicon { background: none; border: none; }
.pvz-pin {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pvz-pin.ozon { background: #005bff; }
.pvz-pin.cdek { background: #ff5722; }
.pvz-pin.other { background: var(--blue-dark); font-size: 13px; }
.pvz-pin:hover { transform: scale(1.12); }
.pvz-divicon.active .pvz-pin {
  transform: scale(1.25);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.4);
}
/* Список пунктов с расстоянием */
.pvz-list { display: flex; flex-direction: column; gap: 8px; }
.pvz-item { position: relative; padding-right: 56px; }
.pvz-item-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pvz-chip {
  font-style: normal; font-size: .68rem; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; color: #fff;
}
.pvz-chip.ozon { background: #005bff; }
.pvz-chip.cdek { background: #ff5722; }
.pvz-dist {
  position: absolute; right: 10px; top: 10px;
  font-size: .8rem; font-weight: 700; color: var(--green);
}
.pvz-item.active { border-color: var(--green); background: #eafaf0; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 960px) {
  .hero-grid, .solution-grid, .materials-grid, .trust-grid { grid-template-columns: 1fr; }
  /* Хиро: фото сразу под текстом, а не в глубоком абсолютном позиционировании */
  .cards-stage { height: auto; margin-top: 26px; padding-bottom: 44px; }
  .card-photo-hero { position: static; transform: none; margin: 0 auto; width: min(330px, 82%); }
  .pvz-body { grid-template-columns: 1fr; height: auto; }
  .pvz-map { height: 260px; order: -1; }
  .pvz-results { max-height: 220px; }
  .order-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .cases-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .problem-grid { grid-template-columns: 1fr; }
  .chart { height: 260px; }
  .callout { max-width: 170px; font-size: .82rem; }
}
@media (max-width: 560px) {
  .section { padding: 60px 0; }
  /* Хиро: максимально компактно, чтобы фото карточек было на первом экране */
  .hero { padding: 18px 0 28px; }
  .hero h1 { font-size: 1.8rem; line-height: 1.1; }
  .hero-sub { margin: 12px 0 16px; font-size: 1rem; }
  .hero-cta-row { gap: 10px; }
  .btn-lg { padding: 14px 24px; font-size: 1.02rem; border-radius: 14px; }
  .hero-note { margin-top: 12px; }
  .cards-stage { margin-top: 10px; padding-bottom: 34px; }
  .card-photo-hero { width: min(225px, 64%); }
  /* Блок «любое помещение»: колонкой */
  .scene-grid { grid-template-columns: 1fr; gap: 36px; }
  .scene-fig { max-width: 420px; margin: 0 auto; }
  .scene-title, .scene-note { text-align: center; }
  /* Характеристики: иконки выровнены по левому краю */
  .spec-strip { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px 18px; }
  .spec-item { width: 100%; }
  /* График: всё влезает в ширину экрана, без прокрутки влево/вправо */
  .chart-wrap { padding: 24px 12px 18px; }
  .chart { gap: 2%; padding: 0 2px; height: 220px; }
  .chart-labels { gap: 2%; padding: 10px 2px 0; }
  .bar-value { font-size: .78rem; margin-bottom: 6px; }
  .bar-col.win .bar-value { font-size: .92rem; }
  .bar-label { font-size: .7rem; line-height: 1.25; }
  .bar-label small { font-size: .6rem; }
  .chart-caption { font-size: .95rem; margin-top: 18px; }
  .form-card { padding: 22px 18px; }
  .design-row { flex-wrap: wrap; }
  .toggle-group { grid-template-columns: 1fr; }
  .header-inner { height: 62px; }
  .logo-img { height: 34px; width: 34px; }
  .logo-text { font-size: 1.1rem; }
  .btn { padding: 14px 22px; font-size: 1rem; }
  .cart-panel { right: 4vw; }
  .co-coating { left: 0; }
  .co-chip { right: 0; }
  .prices th, .prices td { padding: 13px 10px; font-size: .92rem; }
}

/* === Юридические документы и согласия (ТЗ 17.10.2026) === */
.consent{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;color:#444;cursor:pointer}
.consent input[type=checkbox]{width:18px;height:18px;min-width:18px;margin-top:1px;accent-color:#22c55e;cursor:pointer}
.consent a{color:#16a34a;text-decoration:underline}
.consent-error{color:#dc2626;font-size:12.5px;margin-top:4px;display:none}
.consent-error.visible{display:block}
.consent-note{font-size:12.5px;line-height:1.5;color:#777;margin-top:10px}
.consent-note a{color:#16a34a}
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px}
.footer-legal a{color:rgba(255,255,255,.65);text-decoration:none}
.footer-legal a:hover{color:#fff}
.doc-page{padding:48px 0 64px}
.doc-article{max-width:820px;margin:0 auto;background:#fff;border-radius:16px;padding:32px 28px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.doc-article h1{font-size:26px;line-height:1.3;margin-bottom:8px}
.doc-article h2{font-size:19px;margin-top:28px}
.doc-article p,.doc-article li{line-height:1.65;color:#333;font-size:15px}
.doc-article ul{padding-left:20px}
.doc-meta{margin-top:32px;font-size:13px;color:#888}
@media(max-width:640px){.doc-page{padding:28px 0 40px}.doc-article{padding:22px 18px}}

/* Совместимость с механизмом ошибок формы (setFieldError в js/order.js):
   ошибка показывается тем же способом, что и у других полей — при .has-error на обёртке поля */
.consent.has-error ~ .consent-error,
.field.has-error .consent-error{display:block}
/* Ошибка галочки оферты: в order.html это <div class="err-msg" id="offerErr"> внутри .consents */
.consents .err-msg{display:none;color:#e31e24;font-size:.82rem;margin-top:6px}
.consent.has-error ~ .err-msg{display:block}
.consent input[type=checkbox].invalid{accent-color:#dc2626;box-shadow:0 0 0 4px rgba(227,30,36,.1)}

/* ============================================================
   Карта ПВЗ v30: пилюли-маркеры, кластеры, поиск, баннеры
   ============================================================ */
.pvz-map-wrap { position: relative; }
.pvz-empty-overlay {
  position: absolute; inset: 0; z-index: 800; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232,236,243,.75); color: var(--muted);
  font-size: .9rem; font-weight: 600; text-align: center; padding: 16px;
}
.pvz-empty-overlay[hidden] { display: none; }

/* v46: плейсхолдер до ввода города (карта не создаётся) */
.pvz-city-placeholder {
  background: rgba(232,236,243,.92); color: var(--blue-dark);
  font-size: .95rem; line-height: 1.45;
}

/* Строка инструментов: поиск адреса + «моё местоположение» */
.pvz-tools-row { display: flex; gap: 8px; padding: 0 12px 8px; align-items: stretch; }
.pvz-search-wrap { position: relative; flex: 1; min-width: 0; }
.pvz-search-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted); pointer-events: none;
}
.pvz-search-input {
  width: 100%; box-sizing: border-box; padding: 9px 12px 9px 32px;
  font-size: .88rem; font-family: inherit; border: 1.5px solid #d7dce8;
  border-radius: 10px; outline: none; background: #fff;
}
.pvz-search-input:focus { border-color: var(--blue); }
/* Блок ПВЗ вложен в .field#f-address: глобальное правило
   .field input[type=text] (специфичность 0,2,1) перебивает padding у
   .pvz-search-input / .pvz-map-city (0,1,0) — иконка лупы наезжает на текст.
   Чиним через id (1,1,0). */
#pvzMapBox .pvz-search-input { padding: 9px 12px 9px 32px; }
#pvzMapBox .pvz-map-city { padding: 9px 12px; }
.pvz-search-drop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 900;
  list-style: none; margin: 0; padding: 4px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(11,31,75,.16); max-height: 240px; overflow-y: auto;
}
.pvz-search-drop[hidden] { display: none; }
.pvz-search-item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  font-family: inherit; font-size: .84rem; color: var(--text);
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pvz-search-item:hover { background: var(--blue-soft); color: var(--blue-dark); }
.pvz-locate-btn {
  flex: 0 0 auto; width: 40px; border: 1.5px solid #d7dce8; border-radius: 10px;
  background: #fff; color: var(--blue-dark); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pvz-locate-btn svg { width: 18px; height: 18px; }
.pvz-locate-btn:hover { border-color: var(--blue); background: var(--blue-soft); }

/* Выбор города (select из /api/pvz/cities) */
.pvz-city-select {
  padding: 9px 10px; font-size: .88rem; font-family: inherit;
  border: 1.5px solid #d7dce8; border-radius: 10px; outline: none;
  background: #fff; color: var(--text); max-width: 220px;
}
.pvz-city-select:focus { border-color: var(--green, #22c55e); }

/* Статус + кнопки действий */
.pvz-status-row { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.pvz-status-row .pvz-map-status { flex: 1; min-width: 0; padding: 8px 0; }
.pvz-mini-btn {
  flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: var(--blue-dark);
  font-family: inherit; font-size: .76rem; font-weight: 700;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
}
.pvz-mini-btn:hover { border-color: var(--blue); background: var(--blue-soft); }
.pvz-mini-btn[hidden] { display: none; }

/* Баннер «приблизьте карту» (truncated) */
.pvz-trunc-banner {
  margin: 6px 12px 0; padding: 7px 12px; border-radius: 9px;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  font-size: .8rem; font-weight: 600;
}
.pvz-trunc-banner[hidden] { display: none; }

/* Баннер «карта временно недоступна» (graceful degradation v43/v44) */
.pvz-key-dead {
  display: flex; flex-direction: column; gap: 3px;
  margin: 6px 12px 0; padding: 9px 12px; border-radius: 9px;
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
  font-size: .8rem; line-height: 1.4;
}
.pvz-key-dead strong { font-size: .85rem; }

/* ---------- Пилюля-маркер одиночной точки ---------- */
.pvz-divicon { background: none; border: none; }
.pvz-anchor { position: relative; width: 0; height: 0; }
.pvz-pill {
  position: absolute; bottom: 6px; left: 0; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  background: #1c1c1e; color: #fff; border-radius: 999px;
  padding: 5px 12px 5px 6px; font-size: 12px; line-height: 1.15;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pvz-pill::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1c1c1e; border-bottom: none;
}
.pvz-pill:hover { transform: translateX(-50%) scale(1.06); z-index: 10; }
.pvz-pill.is-selected { outline: 2px solid #4cd964; outline-offset: 1px; }
.pvz-pill__logo { width: 40px; height: 14px; display: block; flex: 0 0 auto; }
.pvz-pill__text { display: flex; flex-direction: column; gap: 1px; }
.pvz-pill__price { color: #4cd964; font-weight: 700; font-size: 12px; }
.pvz-pill__hours { color: rgba(255,255,255,.72); font-size: 10.5px; }

/* ---------- Кластеры ---------- */
.pvz-cluster-wrap { background: none; border: none; }
.pvz-cluster {
  display: grid; place-items: center; border-radius: 50%;
  background: #ff5500; color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: 0 2px 10px rgba(255,85,0,.45), 0 0 0 4px rgba(255,85,0,.22);
  cursor: pointer;
}

/* Список: бейдж сети + адрес + мета */
.pvz-badge { display: inline-block; vertical-align: middle; margin-right: 8px; flex: 0 0 auto; }
.pvz-badge img { display: block; width: 46px; height: 17px; }
.pvz-list-item { display: flex; align-items: center; }
.pvz-list-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pvz-list-meta { font-size: .78rem; color: var(--muted); }
.pvz-list-meta b { color: var(--green, #16a34a); font-weight: 700; }

@media (max-width: 560px) {
  .pvz-pill { font-size: 11px; padding: 4px 10px 4px 5px; gap: 6px; }
  .pvz-pill__logo { width: 34px; height: 12px; }
  .pvz-pill__hours { font-size: 10px; }
  .pvz-tools-row { padding: 0 10px 8px; }
  .pvz-city-select { max-width: 150px; }
  /* 16px на мобильных: иначе iOS/WebKit при тапе по полю автоматически
     приближает страницу (~133%) и вся вёрстка «съезжает» */
  .pvz-map-city, .pvz-search-input, .pvz-city-select { font-size: 16px; }
}

/* v56: метка «найдено по ссылке» (умная вставка 2ГИС/Яндекс) */
.pvz-found-dot {
  position: absolute; bottom: 0; left: 0; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: #2f7cf6; border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  animation: pvz-found-pulse 1.8s ease-out infinite;
}
.pvz-found-dot::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: #fff;
}
@keyframes pvz-found-pulse {
  0%   { box-shadow: 0 2px 10px rgba(0,0,0,.4), 0 0 0 0 rgba(47,124,246,.55); }
  70%  { box-shadow: 0 2px 10px rgba(0,0,0,.4), 0 0 0 16px rgba(47,124,246,0); }
  100% { box-shadow: 0 2px 10px rgba(0,0,0,.4), 0 0 0 0 rgba(47,124,246,0); }
}