/* Страницы без SPA (templates/page.html, seo.py): статьи /stati, «О нас», опт, доставка и оплата, контакты, 404.
   Общие стили (шапка, подвал, карточки товаров, .guide-card, .cs-faq, svc-*, about-*, facts, steps) — в site.css. */

.pg-cta { text-decoration: none; }
.pg a.pill { display: inline-flex; align-items: center; text-decoration: none; }

.pg-main { max-width: 860px; margin: 0 auto; padding: 22px 24px 80px; }
.pg-main.pg-index, .pg-main.pg-404, .pg-main.pg-wide { max-width: var(--max); padding-left: 32px; padding-right: 32px; }

.pg-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px;
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.pg-crumbs a { color: inherit; text-decoration: none; }
.pg-crumbs a:hover { color: var(--accent); }
.pg-crumbs span[aria-current] { color: #6E6A64; }

.pg-head { margin-bottom: 26px; }
.pg-head h1 {
  font-family: var(--serif); font-size: clamp(30px, 4.2vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: .005em;
}
a.pg-kicker { display: inline-block; text-decoration: none; }
a.pg-kicker:hover { color: var(--accent-hover); }
.pg-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.pg-lead { margin-top: 16px; font-size: 19px; line-height: 1.55; color: #4A4641; max-width: 760px; }

.pg-cover { margin: 0 0 30px; border-radius: 20px; overflow: hidden; background: var(--cream); aspect-ratio: 16 / 9; }
.pg-cover img { width: 100%; height: 100%; object-fit: cover; }

.pg-toc { margin: 0 0 30px; padding: 20px 24px; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 16px; }
.pg-toc-h { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.pg-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.pg-toc li { font-size: 15px; line-height: 1.4; color: #6E6A64; }
.pg-toc a { color: var(--ink); text-decoration: none; }
.pg-toc a:hover { color: var(--accent); }

.pg-body h2 {
  font-family: var(--serif); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; line-height: 1.18;
  margin: 40px 0 14px; scroll-margin-top: 90px;
}
.pg-body h3 { font-size: 18px; font-weight: 700; margin: 26px 0 10px; }
.pg-body p, .pg-body li { font-size: 16.5px; line-height: 1.72; color: #3F3B37; }
.pg-body p { margin: 0 0 14px; }
.pg-body ul, .pg-body ol { margin: 4px 0 18px; padding: 0; display: grid; gap: 9px; }
.pg-body ul { list-style: none; }
.pg-body ul > li { position: relative; padding-left: 22px; }
.pg-body ul > li::before {
  content: ""; position: absolute; left: 3px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.pg-body ol { padding-left: 24px; }
.pg-body ol > li::marker { color: var(--accent); font-weight: 700; }
.pg-body b { color: var(--ink); font-weight: 600; }
.pg-body a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pg-body a:hover { color: var(--accent-hover); }
.pg-body .tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 22px; }
.pg-body table {
  width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; background: #fff;
  border: 1px solid rgba(0,0,0,.08); border-radius: 14px; overflow: hidden; font-size: 14.5px; line-height: 1.45;
}
.pg-body th, .pg-body td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(0,0,0,.06); }
.pg-body tr:last-child td { border-bottom: none; }
.pg-body th { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8C8880; background: #FBFAF8; }
.pg-body td:first-child { font-weight: 600; color: var(--ink); }

.pg-cards { margin: 34px 0 10px; }
.pg-cards-title { font-family: var(--serif); font-size: 24px; font-weight: 700; margin: 0 0 16px; }
.pg-cards .grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pg-cards .card-media { display: flex; }
.pg-cards .card-body { padding: 12px 14px 14px; }
.pg-cards .card-name { color: var(--ink); text-decoration: none; }
.pg-body .pg-cards a.card-name { color: var(--ink); text-decoration: none; }

.pg .cs-faq { margin-top: 34px; }

.pg-cta-box {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 40px; padding: 28px 30px; background: var(--ink); color: #fff; border-radius: 20px;
}
.pg-cta-title { font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; }
.pg-cta-box p { font-size: 15px; line-height: 1.5; color: var(--soft); max-width: 460px; }

.pg-related { margin-top: 56px; }
.pg-related .section-label { margin-bottom: 8px; }
.pg-related h2 { font-family: var(--serif); font-size: 28px; font-weight: 700; margin-bottom: 18px; }
.pg-art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pg-art-grid-lg { grid-template-columns: repeat(3, 1fr); gap: 24px; }

.pg-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 16px; }
.pg-tier { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 20px 22px; }
.pg-tier-off { font-size: 40px; font-weight: 600; line-height: 1; color: var(--accent); }
.pg-tier-off small { font-size: 20px; }
.pg-tier-from { margin-top: 8px; font-size: 14px; color: #6E6A64; }

.pg-files { display: grid; gap: 10px; margin: 6px 0 18px; }
.pg-body a.pg-file, .pg-file {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff;
  border: 1px solid rgba(0,0,0,.08); border-radius: 14px; color: var(--ink); text-decoration: none;
}
.pg-file:hover { border-color: var(--accent); }
.pg-file-name { font-size: 15px; font-weight: 600; flex: 1; }
.pg-file-meta { font-size: 13px; color: #8A857E; }

.pg-contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0 0 30px; }
.pg-body a.pg-contact, .pg-contact {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; background: #fff;
  border: 1px solid rgba(0,0,0,.08); border-radius: 16px; color: var(--ink); text-decoration: none;
}
.pg-contact:hover { border-color: var(--accent); }
.pg-body a.pg-contact.accent, .pg-contact.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-contact .lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #A19E98; }
.pg-contact.accent .lbl { color: rgba(255,255,255,.8); }
.pg-contact .val { font-size: 19px; font-weight: 700; word-break: break-word; }

.pg-404-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; margin-top: 8px; }
.pg-404-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.pg-404-grid .fn-h { color: var(--accent); }
.pg-404-col a { font-size: 15px; color: var(--ink); text-decoration: none; }
.pg-404-col a:hover { color: var(--accent); }

/* ── Блоки служебных страниц 2026-10-22 (templates/_blocks.html): тот же язык, что у «Услуг» ── */
.blk { margin-top: 64px; }
.blk.blk-tight { margin-top: 22px; }
.blk-head { margin: 0 0 24px; max-width: 760px; }
.blk-head .section-label { margin-bottom: 10px; }
.blk-head h2 { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; line-height: 1.08; }
.blk-head p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: #6E6A64; }
.blk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* шапка страницы: тёмная, как у «Услуг», или кремовая */
.blk-hero { margin-bottom: 0; }
.blk-hero .section-label { margin-bottom: 16px; }
.blk-hero .blk-lead { font-size: 16.5px; line-height: 1.6; color: #C9C5BF; max-width: 640px; margin: 0 0 28px; }
.blk-hero .blk-lead:last-child { margin-bottom: 0; }
.blk-hero .svc-kpis + .blk-actions, .blk-hero .pg-contacts + .blk-actions { margin-top: 26px; }
.blk-hero .pill.light { color: #FAFAFA; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32); }
.blk-hero .pill.light:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.blk-hero.cream { background: var(--cream); color: var(--ink); }
.blk-hero.cream h1 { color: var(--ink); }
.blk-hero.cream .blk-lead { color: #5E5A55; }
.blk-hero.cream .svc-kpi { background: #fff; border-color: rgba(0,0,0,.06); }
.blk-hero.cream .svc-kpi .l { color: #8C8880; }
.blk-hero.cream .pill.light { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.18); }
.blk-hero .pg-contacts { margin: 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* сетка карточек */
.blk-grid { display: grid; gap: 22px; }
.blk-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blk-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blk-card { display: flex; flex-direction: column; min-width: 0; }
.blk-card .section-label { margin-bottom: 10px; }
.blk-card h3 { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.18; margin: 0 0 10px; }
.blk-c4 .blk-card h3 { font-size: 20px; }
.blk-card h3 a { color: inherit; text-decoration: none; }
.blk-card h3 a:hover { color: var(--accent); }
.blk-num { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--accent); margin-bottom: 14px; }
.blk-text { flex: 1; }
.blk-text p, .blk-text li { font-size: 14.5px; line-height: 1.6; color: #6E6A64; }
.blk-text p + p, .blk-text ul + p, .blk-text ol + p, .blk-text .pg-files + p { margin-top: 10px; }
.blk-text b { color: var(--ink); font-weight: 600; }
.blk-text a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.blk-text a:hover { color: var(--accent-hover); }
.blk-text a.pg-file { color: var(--ink); text-decoration: none; }
.blk-text ul { list-style: none; display: grid; gap: 10px; margin: 4px 0 0; }
.blk-text ul > li { position: relative; padding-left: 20px; }
.blk-text ul > li::before {
  content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.blk-text .pg-files { margin: 4px 0 14px; }
/* шаги в карточке — как в «Услугах» */
.blk-steps { list-style: none; counter-reset: st; margin: 6px 0 0; padding: 0; }
.blk-steps li {
  counter-increment: st; display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(0,0,0,.07);
  font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
.blk-steps li:last-child { border-bottom: 1px solid rgba(0,0,0,.07); }
.blk-steps li::before { content: counter(st, decimal-leading-zero); flex: none; min-width: 22px; padding-top: 1px; font-size: 13px; font-weight: 700; color: var(--accent); }
.blk-steps + p { margin-top: 16px; }
.blk-more { margin-top: 18px; align-self: flex-start; font-size: 14.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.blk-more:hover { color: var(--accent-hover); }
/* карточка с фото */
.blk-card.has-img { padding: 0; overflow: hidden; }
.blk-card.has-img > :not(.blk-img) { margin-left: clamp(22px, 2.4vw, 30px); margin-right: clamp(22px, 2.4vw, 30px); }
.blk-card.has-img h3 { margin-top: 22px; }
.blk-card.has-img > :last-child { margin-bottom: 26px; }
.blk-img { display: block; aspect-ratio: 4 / 3; background: var(--cream); overflow: hidden; }
.blk-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blk-card.has-img:hover .blk-img img { transform: scale(1.03); }
/* тёмная карточка — текст прижат к низу, как подпись */
.blk-card.dark { background: var(--ink); border-color: var(--ink); color: #FAFAFA; justify-content: flex-end; }
.blk-card.dark .blk-text { flex: 0 0 auto; }
.blk-card.dark .blk-text p { color: var(--soft); }
.blk-card.dark h3 { font-size: 28px; }

/* «О нас»: фото и текст из настроек сайта */
.blk-about { border-radius: 24px; overflow: hidden; }
.blk-about .about-inner { padding: clamp(28px, 4vw, 56px); gap: clamp(28px, 4vw, 56px); }
.blk-about .about-photo { overflow: hidden; background: rgba(0,0,0,.06); }
.blk-about .about-photo img { width: 100%; height: 100%; object-fit: cover; }
.blk-about .section-label { margin-bottom: 12px; }
.blk-about .about-title { margin: 0 0 24px; }
.blk-about .about-text { margin-bottom: 26px; }
.blk-about-more { margin-top: 24px; max-width: 520px; }
.blk-about-more p { font-size: 15px; color: #5E5A55; }
.blk-about .blk-actions { margin-top: 26px; }

/* цифры — тёмная полоса, как была на главной */
.pg .facts.blk-facts { max-width: none; margin: 22px 0 0; }
.blk-facts .section-label { margin-bottom: 22px; }

/* работы клиентов */
.blk-works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.blk-works figure { margin: 0; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 18px; overflow: hidden; }
.blk-works img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.blk-works figcaption { padding: 12px 16px 14px; font-size: 13.5px; line-height: 1.45; color: #6E6A64; }

/* статьи (макрос guides из _ssr.html) внутри страницы */
.pg .blk-guides .guides { max-width: none; padding: 0; }

/* частые вопросы: слева заголовок и кнопки, справа ответы */
.blk-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 24px 56px; align-items: start; }
.blk-faq-side h2 { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; line-height: 1.08; margin: 0 0 14px; }
.blk-faq-side p { font-size: 15.5px; line-height: 1.6; color: #6E6A64; margin-bottom: 22px; }
.pg .blk-faq .cs-faq { margin-top: 0; padding: 8px 30px; }

/* плашка с призывом — как внизу «Услуг» */
.blk-cta { margin-top: 64px; }
.blk-cta-title { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; line-height: 1.2; max-width: 720px; }
.blk-cta-text { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: #9A5530; max-width: 620px; }
.blk-cta .pill { padding: 15px 28px; }

/* «Статьи»: первая статья крупно */
.pg-index-hero { margin-bottom: 24px; }
.pg-art-grid-lg .guide-card.is-featured { grid-column: span 2; flex-direction: row; }
.pg-art-grid-lg .is-featured .guide-photo { position: relative; flex: 0 0 54%; aspect-ratio: auto; min-height: 320px; }
.pg-art-grid-lg .is-featured .guide-photo img { position: absolute; inset: 0; }
.pg-art-grid-lg .is-featured .guide-body { padding: 30px 32px; justify-content: center; gap: 12px; }
.pg-art-grid-lg .is-featured .section-label { margin-bottom: 0; }
.pg-art-grid-lg .is-featured .guide-title { font-size: clamp(22px, 2.2vw, 28px); }
.pg-art-grid-lg .is-featured .guide-text { flex: 0 0 auto; font-size: 15px; }
.pg-index .blk-cta { margin-top: 40px; }

/* подвал без карточек связи — на странице «Контакты» они уже наверху */
.contacts-slim .contacts-inner { padding-top: 56px; }

@media (max-width: 1100px) {
  .blk-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blk-works { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pg-art-grid, .pg-art-grid-lg { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pg-cards .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .blk-c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blk-c3 > .blk-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .blk-faq { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .pg-main, .pg-main.pg-index, .pg-main.pg-404, .pg-main.pg-wide { padding: 16px 14px 56px; }
  .pg-lead { font-size: 17px; }
  .pg-body p, .pg-body li { font-size: 16px; }
  .pg-cover { border-radius: 16px; margin-bottom: 22px; }
  .pg-tiers { grid-template-columns: 1fr; }
  .pg-cta-box { padding: 22px 20px; }
  .blk { margin-top: 44px; }
  .blk.blk-tight { margin-top: 14px; }
  .blk-grid { gap: 14px; }
  .blk-c2 { grid-template-columns: 1fr; }
  .blk-head { margin-bottom: 18px; }
  .blk-about { border-radius: 18px; }
  .blk-about .about-photo { aspect-ratio: 4 / 3; }
  .pg .facts.blk-facts { margin: 14px 0 0; }
  .pg .blk-faq .cs-faq { padding: 4px 20px; }
  .blk-cta { margin-top: 44px; }
  .blk-cta .blk-actions, .blk-cta .pill { width: 100%; }
  .blk-cta .pill { justify-content: center; }
  .pg-art-grid-lg .guide-card.is-featured { grid-column: 1 / -1; flex-direction: column; }
  .pg-art-grid-lg .is-featured .guide-photo { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  .pg-art-grid-lg .is-featured .guide-photo img { position: static; }
  .pg-art-grid-lg .is-featured .guide-body { padding: 20px; }
  .contacts-slim .contacts-inner { padding-top: 40px; }
}
@media (max-width: 600px) {
  .blk-c3, .blk-c4 { grid-template-columns: 1fr; }
  .blk-img { aspect-ratio: 16 / 10; }
  .pg .steps { grid-template-columns: 1fr; }
  .blk-card { padding: 20px 20px 22px; }
  .blk-card h3, .blk-c4 .blk-card h3 { font-size: 20px; }
  .blk-card.dark h3 { font-size: 24px; }
  .blk-num { font-size: 26px; margin-bottom: 8px; }
  .blk-hero .pg-contacts { grid-template-columns: 1fr; gap: 10px; }
  .blk-hero .pg-contact { padding: 16px 18px; }
  .blk-works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 560px) {
  .pg-art-grid, .pg-art-grid-lg { grid-template-columns: 1fr; }
}