/* ============================================================================
   AO-BASE — общая оболочка шаблонов АртОбои (20.07.2026)
   ============================================================================
   Порядок подключения на странице: tokens-ao.css -> ao-base.css -> <style>
   шаблона (только уникальная сетка страницы). Контракт: НИ ОДНОГО цветового
   литерала — только var() из tokens-ao.css (гейт: grep-литералов = 0).
   Урок Т5: у серии из 3+ сестёр общий CSS-файл, а не копипаста <style>.

   Состав: reset · типографика · шапка (бургер-чекбокс) · крошки · кнопки
   (btn/kaspi-btn/чипы) · бейджи · Kaspi-полоса доверия · карточка товара
   с двойным превью · фото-плейсхолдеры (слоты) · FAQ · форма (юр-минимум) ·
   CTA-полоса · футер · reveal-утилита · .pending-маркер слотов.
   ============================================================================ */

/* ---- reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-700);
  font: 400 var(--fs-16)/var(--lh-body) var(--ff-text);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-inline); }
.sec { padding-block: var(--section-pad); }
.sec-alt { background: var(--panel); }
.sec-soft { background: var(--accent-soft); }

/* ---- типографика ------------------------------------------------------------ */
h1, h2, h3 { color: var(--ink); font-family: var(--ff-display); font-weight: 400; line-height: var(--lh-head); margin: 0 0 .6em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.eyebrow {
  display: inline-block; font: 600 var(--fs-12)/1.2 var(--ff-text);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .9rem;
}
.lead { font-size: var(--fs-17); color: var(--ink-700); max-width: 40rem; }
.note { font-size: var(--fs-14); color: var(--muted); }

/* Слот-маркер: значение ждёт facts-artoboi.yaml / опросник владельца */
.pending { border-bottom: 1px dashed var(--line-strong); color: var(--muted); cursor: help; }

/* ---- шапка ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-header);
}
.header-row { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); position: relative; }
.logo { display: inline-flex; align-items: baseline; gap: .15rem; text-decoration: none; }
.logo b { font-family: var(--ff-display); font-weight: 400; font-size: 1.375rem; color: var(--ink); }
.logo span { font: 600 var(--fs-13)/1 var(--ff-text); color: var(--accent); }
.site-nav { display: flex; gap: .25rem; margin-left: auto; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: .25rem .8rem; border-radius: var(--radius-btn);
  font: 500 var(--fs-15)/1.3 var(--ff-text); color: var(--ink-700); text-decoration: none;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.site-nav a:hover { background: var(--accent-soft); color: var(--accent-deep); }
.header-actions { display: flex; align-items: center; gap: .75rem; }
/* мини-бейдж рейтинга в шапке (факт: Kaspi 4.8, 133 отзыва — OTCHET-KASPI) */
.rating-chip {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px;
  padding: .2rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-chip);
  font: 600 var(--fs-13)/1.2 var(--ff-text); color: var(--ink); text-decoration: none;
  background: var(--paper);
}
.rating-chip .star { color: var(--accent); }

/* бургер: visually-hidden чекбокс (клавиатурно доступен, урок Фазы 0) */
.nav-toggle { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.burger { display: none; width: var(--tap); height: var(--tap); cursor: pointer; position: relative; border-radius: var(--radius-btn); }
.burger i, .burger i::before, .burger i::after {
  content: ''; position: absolute; left: 12px; right: 12px; height: 2px;
  background: var(--ink); border-radius: 2px; transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.burger i { top: calc(50% - 1px); }
.burger i::before { left: 0; right: 0; top: -7px; }
.burger i::after { left: 0; right: 0; top: 7px; }
.nav-toggle:focus-visible ~ .header-actions .burger { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 900px) {
  .header-row { min-height: var(--header-h-m); }
  .burger { display: block; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0; padding: 0 var(--pad-inline);
    background: var(--paper); box-shadow: var(--shadow-card-hover);
    max-height: 0; overflow: hidden;
    transition: max-height var(--dur-3) var(--ease);
  }
  .site-nav a { min-height: var(--tap); border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-toggle:checked ~ .site-nav { max-height: calc(100vh - var(--header-h-m)); overflow-y: auto; }
  .nav-toggle:checked ~ .header-actions .burger i { transform: rotate(45deg); }
  .nav-toggle:checked ~ .header-actions .burger i::before { transform: rotate(-90deg) translateX(-7px); }
  .nav-toggle:checked ~ .header-actions .burger i::after { opacity: 0; }
  .rating-chip { display: none; }
}

/* ---- хлебные крошки --------------------------------------------------------- */
.breadcrumbs { padding-block: 1rem 0; font-size: var(--fs-13); color: var(--faint); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.breadcrumbs li + li::before { content: '·'; margin-right: .35rem; color: var(--line-strong); }
.breadcrumbs a { color: var(--faint); display: inline-block; padding-block: .5rem; }
.breadcrumbs a:hover { color: var(--accent); }

/* ---- кнопки ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: .6rem 1.5rem; max-width: 100%;
  border: 0; border-radius: var(--radius-btn); cursor: pointer; text-decoration: none;
  font: 600 var(--fs-16)/1.3 var(--ff-text); white-space: normal; text-align: center;
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--accent-deep); color: var(--accent-ink); box-shadow: var(--shadow-btn-hover); }
.btn-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn-outline:hover { background: var(--accent-soft); color: var(--accent-deep); }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* Kaspi: ЕДИНСТВЕННОЕ место красного (карантин токена). Метка >=19px/700 —
   AA large text (3.71:1); менять кегль/вес НЕЛЬЗЯ без пересчёта контраста. */
.kaspi-btn {
  background: var(--kaspi); color: var(--kaspi-ink);
  font-size: var(--fs-19); font-weight: 700; box-shadow: var(--shadow-kaspi);
}
.kaspi-btn:hover { background: var(--kaspi-deep); color: var(--kaspi-ink); }
.kaspi-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .9rem; min-height: 40px; border-radius: var(--radius-chip);
  background: var(--kaspi); color: var(--kaspi-ink);
  font: 700 var(--fs-19)/1.2 var(--ff-text);
}

/* ---- чипы-фасеты (ссылки, пилюли; tap >=48) ---------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chips .chips-label { font: 600 var(--fs-13)/1.2 var(--ff-text); color: var(--faint); margin-right: .35rem; letter-spacing: .06em; text-transform: uppercase; }
.chip {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: .3rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-chip);
  background: var(--paper); color: var(--ink-700); text-decoration: none;
  font: 500 var(--fs-14)/1.3 var(--ff-text);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.chip[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- бейджи ------------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .7rem; border-radius: var(--radius-chip);
  font: 600 var(--fs-13)/1.2 var(--ff-text);
  background: var(--accent-soft); color: var(--accent);
}
.badge-hit { background: var(--accent); color: var(--accent-ink); }

/* ---- Kaspi-полоса доверия ---------------------------------------------------- */
.trust-strip { border-block: 1px solid var(--line); background: var(--paper); }
.trust-strip .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; padding-block: 1.1rem;
}
.trust-items { display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; align-items: center; }
.trust-item { display: flex; align-items: baseline; gap: .5rem; }
.trust-item b { font: 700 var(--fs-18)/1.2 var(--ff-text); color: var(--ink); }
.trust-item span { font-size: var(--fs-14); color: var(--muted); }

/* ---- карточка товара с двойным превью ---------------------------------------- */
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.pc {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.pc:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.pc-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.pc-media .ph { position: absolute; inset: 0; transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.pc-media .ph-int { opacity: 0; } /* второй кадр «в интерьере» */
@media (hover: hover) {
  .pc:hover .pc-media .ph-int { opacity: 1; }
  .pc:hover .pc-media .ph-print { transform: scale(var(--zoom-print)); }
}
.pc-badges { position: absolute; top: .75rem; left: .75rem; z-index: 2; display: flex; gap: .4rem; }
.pc-body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.15rem 1.25rem; flex: 1; }
.pc-title { margin: 0; font: 600 var(--fs-16)/1.35 var(--ff-text); }
.pc-title a { color: var(--ink); text-decoration: none; }
.pc-title a::after { content: ''; position: absolute; inset: 0; } /* вся карточка кликабельна */
.pc-title a:hover { color: var(--accent-deep); }
.pc-price { margin-top: auto; font: 700 var(--fs-18)/1.2 var(--ff-text); color: var(--ink); }
.pc-price small { font: 500 var(--fs-13)/1.2 var(--ff-text); color: var(--faint); }
.pc-meta { font-size: var(--fs-13); color: var(--faint); }
/* спец-карточка «Печать по своему фото» */
.pc-custom { background: var(--accent-soft); border-color: var(--accent); }
.pc-custom .pc-media { display: grid; place-items: center; background: var(--ph-grad); }

/* ---- фото-плейсхолдеры (слоты до фотосъёмки/рендеров; НЕ сток и НЕ AI) ------- */
.ph {
  display: grid; place-items: center; text-align: center;
  background: var(--ph-grad); min-height: 100%;
  border-radius: inherit;
}
.ph-warm { background: var(--ph-grad-warm); }
.ph .ph-label {
  margin: 1rem; padding: .5rem .9rem;
  /* max-width обязателен: max-content подписи распирает grid-треки на 360px
     (семейство «min-width:auto у grid-детей», ловится только матрицей кодом) */
  max-width: calc(100% - 2rem); overflow-wrap: break-word;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-btn);
  font: 500 var(--fs-12)/1.45 var(--ff-text); color: var(--faint);
  background: var(--header-bg);
}
/* грид-дети со слотами фото не распирают треки */
.pc-grid > *, .pc-media > * { min-width: 0; }
.ph-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-plate); }

/* ---- FAQ (details/summary, без JS) ------------------------------------------- */
.faq-list { display: grid; gap: .75rem; max-width: 46rem; }
.faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--tap); padding: .85rem 1.25rem; cursor: pointer; list-style: none;
  font: 600 var(--fs-16)/1.4 var(--ff-text); color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font: 400 1.4rem/1 var(--ff-text); color: var(--accent); transition: transform var(--dur-1) var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 1.25rem 1.1rem; color: var(--ink-700); max-width: 40rem; }

/* ---- форма заказа (юр-минимум: чекбокс НЕ предотмечен + политика + honeypot) -- */
.lead-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-card); max-width: 34rem;
}
.lead-card h3 { font-family: var(--ff-text); font-weight: 700; font-size: var(--fs-18); }
.lead-card .hint { color: var(--muted); font-size: var(--fs-15); margin: -.25rem 0 1rem; }
.lead-form { display: grid; gap: .9rem; }
.fld { display: grid; gap: .35rem; font: 600 var(--fs-13)/1.3 var(--ff-text); color: var(--muted); }
.fld input, .fld textarea {
  min-height: var(--tap); padding: .6rem .9rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
  background: var(--bg); color: var(--ink); font: 400 var(--fs-16)/1.4 var(--ff-text);
}
.fld textarea { min-height: 96px; resize: vertical; }
.fld input:focus-visible, .fld textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 0; border-color: var(--accent); }
.hp-field { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; } /* honeypot */
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-13); color: var(--muted); }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--accent); flex: none; }
.form-trust { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; font-size: var(--fs-14); color: var(--muted); }
.form-trust li { padding-left: 1.2rem; position: relative; }
.form-trust li::before { content: ''; position: absolute; left: 0; top: .45em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }

/* ---- CTA-полоса (зелёная, компактная; паддинг секции погашен) ----------------- */
.cta-strip { background: var(--accent); padding-block: 0; }
.cta-strip .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding-block: clamp(2.75rem, 5vw, 4rem);
}
.cta-strip h2 { color: var(--accent-ink); margin: 0; font-size: var(--fs-h2); max-width: 34rem; }
.cta-strip p { color: var(--accent-ink); opacity: .85; margin: .4rem 0 0; font-size: var(--fs-15); }
.cta-strip .btn-light { background: var(--paper); color: var(--accent-deep); }
.cta-strip .btn-light:hover { background: var(--accent-soft); }

/* ---- футер (единственная тёмная зона) ----------------------------------------- */
.site-footer { background: var(--dark); color: var(--on-dark); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem;
  padding-block: var(--section-pad) 2rem;
}
.site-footer h4 { font: 700 var(--fs-14)/1.3 var(--ff-text); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-faint); margin: 0 0 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.site-footer li a { display: inline-block; padding-block: .5rem; color: var(--on-dark-dim); text-decoration: none; }
.site-footer li a:hover { color: var(--accent-on-dark); }
.footer-brand .logo b { color: var(--on-dark-strong); }
.footer-brand .logo span { color: var(--accent-on-dark); }
.footer-brand p { color: var(--on-dark-dim); font-size: var(--fs-15); max-width: 22rem; }
.footer-kaspi {
  border: 1px solid var(--dark-line); border-radius: var(--radius);
  background: var(--dark-panel); padding: 1.25rem; display: grid; gap: .75rem; justify-items: start;
}
.footer-kaspi p { margin: 0; color: var(--on-dark); font-size: var(--fs-15); }
.footer-bottom {
  border-top: 1px solid var(--dark-line);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  padding-block: 1.25rem; font-size: var(--fs-12); color: var(--on-dark-faint);
}
.footer-bottom a { color: var(--on-dark-faint); }
.footer-bottom a:hover { color: var(--accent-on-dark); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ---- reveal (WOW-зоны: hero, плитки; НЕ конфигуратор/формы) -------------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pc, .btn, .ph { transition: none; }
}

/* ---- прочее -------------------------------------------------------------------- */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.section-head .all-link { font: 600 var(--fs-15)/1.3 var(--ff-text); white-space: nowrap; }
.tags-row { display: flex; flex-wrap: wrap; gap: .5rem; }