/* Правки к прототипу для живого сайта (05-OPEN-ITEMS): крупнее мелкие подписи, контраст, без задвоения номеров этапов */
.guide-number { display: none }                       /* номер уже нарисован на иллюстрации этапа */
.small, .muted.small, .vc-hint, .vc-disclaimer, .ordering-note, .hero-caption, .catalog-foot { font-size: 14px !important; line-height: 1.45 }
main small, footer small:not(.brand small) { font-size: 14px; line-height: 1.45 }
.muted, .vc-hint, .vc-disclaimer, small { color: #55585d }
.partner-strip { background: #292c2e; color: #f3ecdf; font-size: 15px }
.partner-strip .wrap { padding-block: 8px }
.partner-strip a { color: #e2c48d; font-weight: 600 }
.done-panel { max-width: 760px; margin: 24px auto; padding: 28px }
.done-panel h1 { margin-top: 0 }
.btn, button, .tab, select, input[type=checkbox] + span { min-height: 44px }
/* ссылки в согласии видны как ссылки, флажок по верхней строке */
.checkline { align-items: flex-start }
.checkline a { color: var(--bronze, #8b6737); text-decoration: underline }
.checkline input { margin-top: 3px; flex: 0 0 auto }

/* шапка. Компьютер: как в макете. Телефон: логотип + «Сделать заказ» + меню «☰», все разделы в выпадающем списке целиком */
.mnav { display: none; position: relative; border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important }
.mnav summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #e5ddcf; background: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px }
.mnav summary::-webkit-details-marker { display: none }
.mnav summary span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #292c2e; transition: transform .2s, opacity .2s }
.mnav[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.mnav[open] summary span:nth-child(2) { opacity: 0 }
.mnav[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
.mnav:not([open]) .mnav-panel { display: none !important }
.mnav-panel { position: fixed; left: 12px; right: 12px; top: 64px; z-index: 80; background: #fff; border: 1px solid #eee7da; border-radius: 16px;
  box-shadow: 0 18px 40px #2921142e; padding: 8px; display: grid; max-height: calc(100vh - 80px); overflow-y: auto }
.mnav-panel > a { padding: 13px 14px; border-radius: 10px; font-size: 17px; color: #292c2e; text-decoration: none }
.mnav-panel > a:active, .mnav-panel > a:hover { background: #f6f0e6 }
.mnav-contacts { display: grid; gap: 2px; border-top: 1px solid #eee7da; margin-top: 6px; padding: 10px 14px 6px }
.mnav-contacts a { font-size: 15px; color: #8b6737; padding: 6px 0; text-decoration: none }
@media (max-width: 860px) {
  .topbar .desktop-link, .topbar .header-contacts, .topbar .header-login { display: none !important }
  .mnav { display: block }
  .topbar .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px;
    padding-left: 12px !important; padding-right: 12px !important; min-height: 64px !important }
  .topbar .brand, .topbar.is-compact .brand { display: flex; flex: 0 1 auto; min-width: 0; gap: 6px }
  .topbar .brand small { display: none !important }
  .topbar .wordmark, .topbar.is-compact .wordmark { font-size: 20px !important }
  .topbar .brand-symbol, .topbar.is-compact .brand-symbol { width: 34px !important; height: 40px !important; flex: 0 0 auto }
  .topbar .nav { flex: 0 0 auto; width: auto !important; overflow: visible !important; justify-content: flex-end !important; padding: 0 !important;
    flex-wrap: nowrap; gap: 8px; margin-left: auto }
  .header-order { padding: 9px 14px !important; font-size: 14px !important; min-height: 44px; white-space: nowrap }
}
@media (max-width: 350px) { .topbar .wordmark, .topbar.is-compact .wordmark { font-size: 17px !important } .header-order { padding: 8px 10px !important; font-size: 13px !important } }
/* «Обратите внимание» на телефоне: текст на всю ширину, картинки «макет / после печи» под ним */
@media (max-width: 650px) {
  .firing-note { flex-direction: column; align-items: flex-start }
  .firing-note p { width: 100%; font-size: 14px }
  .firing-note .eyes-art { margin-left: 0; width: 100%; max-width: 320px }
}
/* каталог на телефоне: портрет над текстом и целиком (квадратный кадр без обрезки) */
@media (max-width: 650px) {
  .direction-tile { grid-template-columns: 1fr !important }
  .direction-photo { min-height: 0 !important; height: min(300px, 78vw); justify-content: center; align-items: center; background: #2f2b27 }
  .direction-photo svg.direction-artwork { min-height: 0 !important; height: 100%; width: auto; aspect-ratio: 1 / 1; max-width: 100% }
  .direction-photo .full-length-example { max-height: 100%; height: 100% }
}
/* кнопки в заголовках разделов: текст не вылезает за кнопку */
.section-head { flex-wrap: wrap }
.section-head .btn { white-space: normal; max-width: 100%; height: auto; line-height: 1.25; text-align: center }
@media (max-width: 650px) { .section-head .btn { font-size: 15px !important; padding: 10px 16px !important; min-height: 44px } }
/* первый экран на телефоне: «Заказать» и «Рассчитать» в один ряд */
@media (max-width: 650px) {
  .hero-actions { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% }
  .hero-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; white-space: normal; line-height: 1.2;
    font-size: 15px !important; padding: 10px 10px !important; min-height: 52px; gap: 6px }
  .hero-actions .btn .icon { width: 16px; height: 16px; flex: 0 0 auto }
}
@media (max-width: 360px) { .hero-actions .btn .icon { display: none } }

/* ===== аудит 09.11: вёрстка ===== */
/* кнопка «наверх»: на телефоне не нужна — перекрывала кнопки и текст */
/* «Наверх» на телефоне: маленькая, полупрозрачная, в самом углу; появляется после двух экранов прокрутки (live.js) */
@media (max-width: 860px) {
  #back-to-top { width: 40px !important; height: 40px !important; right: 10px !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    opacity: .78; box-shadow: 0 3px 10px #69491e40 !important; z-index: 70 }
  #back-to-top svg { width: 20px; height: 20px }
  #back-to-top:active { opacity: 1 }
}
/* мелкие служебные метки — не меньше 12 px */
.art-caption, .price-badge { font-size: 12px !important }
.hero-where { display: block; font-size: 15px; color: #292c2e; margin-bottom: 4px; font-weight: 600 }
/* «Наши направления»: на компьютере три в ряд, фото сверху; фото квадратное на всю ширину карточки — без полос и без обрезки лица */
.direction-photo { min-height: 0 !important; height: auto !important; aspect-ratio: 1 / 1; background: #2f2b27; overflow: hidden }
.direction-photo svg.direction-artwork { width: 100% !important; height: 100% !important; min-height: 0 !important; aspect-ratio: auto }
.direction-photo .full-length-example { width: 100%; height: 100% !important; max-height: none !important; object-fit: cover; object-position: center 30% }
@media (min-width: 861px) {
  .directions-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important }
  .direction-tile { grid-template-columns: 1fr !important }
}
@media (max-width: 860px) { .direction-tile { grid-template-columns: 1fr !important } }
/* липкая шапка на компьютере: оставить один телефон */
@media (min-width: 861px) {
  .topbar.is-compact .header-contacts { display: flex !important; flex-direction: column }
  .topbar.is-compact .header-contacts a:not(:nth-child(2)) { display: none }
}
/* каталог: три вкладки в один ряд */
@media (max-width: 650px) {
  .tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important }
  .tabs .tab { min-width: 0; padding: 8px 4px !important; white-space: normal; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; line-height: 1.2 !important; min-height: 52px; font-size: 15px !important }
  /* цветность — кнопки в столбик, текст не ломается */
  .vc-colors { grid-template-columns: 1fr !important; display: grid !important; gap: 8px }
  .vc-colors .vc-option { justify-content: flex-start; white-space: nowrap }
  /* производство и преимущества — одна колонка */
  .production-values { grid-template-columns: 1fr !important }
  /* форма — все поля в одну колонку */
  .form-grid { grid-template-columns: 1fr !important }
}
/* галочка выбранного размера не налезает на текст */
.vc-sizes .vc-option { padding-right: 26px !important; padding-left: 12px !important }
/* зоны нажатия не меньше 44 px */
details > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; padding-block: 8px; cursor: pointer }
.vc-option, .chip { min-height: 44px }
.legal-footer nav a, .footer-legal a { display: inline-flex; align-items: center; min-height: 44px }
.retail-crumb a { display: inline-flex; align-items: center; min-height: 44px }
/* «Доставка»: «Стоимость доставки» и «Самовывоз» не слипаются */
.service-card-bottom p + b { display: block; margin-top: 16px }
/* предупреждение «макет светлее» — примеры крупнее */
.firing-note .eyes-art { width: 100%; max-width: 420px }
/* «Восстановление / Улучшение / Подготовка» под до/после: на телефоне столбиком (крупный шрифт не помещался в ряд) */
@media (max-width: 650px) {
  .retouch-benefits { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important }
  .retouch-benefits > span { display: flex !important; align-items: center; gap: 10px; border: 0 !important; padding: 0 !important }
  .retouch-benefits br { display: none }
  .retouch-benefits > span br + * { margin-left: 4px }
}
/* форма заказа: карточки выбора переносятся по ширине, длинные слова не вылезают */
@media (max-width: 650px) {
  .choice-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important }
  .choice, .choice * { min-width: 0; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto }
}
/* этапы заказа на телефоне: 2×2 вместо 4 в ряд */
@media (max-width: 650px) {
  ol.progress { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px 10px !important }
  ol.progress li { min-width: 0; white-space: normal !important; line-height: 1.25 !important }
  ol.progress li::after, ol.progress li::before { display: none !important }
}
@media (max-width: 380px) {
  .topbar .wordmark, .topbar.is-compact .wordmark { font-size: 17px !important }
  .topbar .brand-symbol, .topbar.is-compact .brand-symbol { width: 30px !important; height: 36px !important }
  .header-order { padding: 8px 11px !important; font-size: 14px !important }
  .topbar .wrap { gap: 6px !important }
  .mnav summary { width: 42px; height: 42px }
}
/* ===== повторный аудит 09.11 ===== */
/* иконка телефона в шапке — только на телефоне */
.header-call { display: none !important }
@media (max-width: 860px) {
  .header-call { display: inline-flex !important; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0 !important; align-items: center; justify-content: center; border-radius: 12px }
  .header-call .icon { width: 20px; height: 20px; display: inline-block !important }
}
/* первый экран: на телефоне «Заказать» без длинного слова — кнопки одной высоты в одну строку */
@media (max-width: 650px) {
  .hide-sm { display: none }
  .hero-actions { align-items: stretch }
  .hero-actions .btn { min-height: 52px }
  .hero-actions .btn.primary { flex: 0 0 auto !important; white-space: nowrap; padding-inline: 18px !important }
  .hero-actions .btn:not(.primary) { flex: 1 1 auto !important; white-space: normal }
}
/* вкладки каталога на телефоне — столбиком, слово не ломается */
@media (max-width: 650px) {
  .tabs { grid-template-columns: 1fr !important }
  .tabs .tab { hyphens: manual !important; -webkit-hyphens: manual !important; overflow-wrap: normal !important; min-height: 46px; padding: 10px 14px !important }
}
/* «Варианты оформления» и «Частые вопросы» друг под другом — без пустоты слева */
.faq-layout { grid-template-columns: 1fr !important; gap: 26px !important }
.faq-layout .gallery-concept { max-width: 760px }
/* «Доставка» и «Гарантия» на компьютере — каждая по своей высоте, без дыры */
.warranty-card { align-self: start }
/* зоны нажатия */
.vc-option { min-height: 44px !important }
.partner-login { display: inline-flex; align-items: center; min-height: 44px }
/* галочка выбранного размера — в углу, вне текста */
.vc-sizes .vc-option { padding-right: 30px !important; position: relative }
.vc-sizes .vc-option.selected:after { right: 6px !important; top: 50% !important; transform: translateY(-50%) }
/* подзаголовок «Наше производство» на телефоне в одну строку */
@media (max-width: 650px) { .production-kicker { font-size: 11px !important; letter-spacing: .08em !important; white-space: nowrap } }
.lbl-short { display: none }
@media (max-width: 480px) { .lbl-long { display: none } .lbl-short { display: inline } .header-order { padding: 9px 14px !important } }
@media (max-width: 380px) { .topbar .wordmark, .topbar.is-compact .wordmark { font-size: 16px !important } .topbar .brand-symbol, .topbar.is-compact .brand-symbol { width: 26px !important; height: 32px !important } .header-order { padding: 8px 11px !important } }
@media (max-width: 650px) { .hero-refined .hero-copy p br { display: none } }
@media (max-width: 650px) { .small, .muted.small, .vc-hint, .vc-disclaimer, .ordering-note, .catalog-foot, .panel p.muted, .order-actions .btn { font-size: 15px !important } }
.faq-layout > div:last-child { max-width: 900px }
/* плашка партнёра на телефоне — обычным текстом, не колонками */
@media (max-width: 650px) { .partner-strip .wrap { display: block !important; font-size: 15px; line-height: 1.4; padding: 10px 16px !important } .partner-strip .wrap > * { display: inline } .partner-strip a { display: inline-block; margin-top: 4px } }
/* аудит 09.11 (часть 1 полного пути) */
@media (min-width: 651px) and (max-width: 980px) {   /* планшет: текст первого экрана не заходит на портрет */
  .hero-refined .hero-copy { max-width: 50%; position: relative; z-index: 2 }
  .hero-refined .hero-art { left: 52% !important }
  .refined-facts { grid-template-columns: 1fr 1fr !important; gap: 18px 24px !important }
  .refined-facts .fact { border: 0 !important; padding-left: 0 !important }
  .refined-facts .fact::before, .refined-facts .fact::after { display: none !important }
}
.warranty-card { align-self: stretch !important; display: flex; flex-direction: column }
.warranty-card .service-card-bottom { margin-top: auto }
.faq-layout .gallery-concept, .faq-layout > div:last-child { max-width: none !important }
.art-caption { font-size: 14px !important }
@media (max-width: 650px) { .production-kicker { font-size: 14px !important; letter-spacing: .03em !important; white-space: normal !important } }
@media (min-width: 651px) { .hero-actions .btn.primary { flex: 0 0 auto; min-width: 280px; max-width: 320px } }
@media (max-width: 520px) {   /* кнопки шагов заказа: «Далее» на всю ширину, текст в одну-две строки */
  .order-actions { flex-direction: column-reverse !important; align-items: stretch !important }
  .order-actions .btn { width: 100% !important }
}
@media (max-width: 650px) {   /* таблица «Все размеры и цены» на телефоне — карточками, кнопка «Выбрать» целиком */
  .table-wrap { overflow: visible !important }
  .table-wrap table, .table-wrap tbody { display: block }
  .table-wrap thead { display: none }
  .table-wrap tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: center }
  .table-wrap td { padding: 0 !important; border: 0 !important; text-align: left !important }
  .table-wrap td:first-child { grid-column: 1 / -1; font-weight: 600 }
  .table-wrap td:nth-child(2)::after { content: " см" }
  .table-wrap td:nth-child(3) { text-align: right !important; font-weight: 650; white-space: nowrap }
  .table-wrap td:last-child { grid-column: 1 / -1; margin-top: 6px }
  .table-wrap td:last-child .btn { width: 100%; min-height: 44px }
}
.direction-photo .stone-example { object-position: center 40% }
.catalog-links { display: flex; gap: 8px; flex-wrap: wrap }
.upload:has(img) input[type=file] { display: none }   /* фото выбрано — системное «Файл не выбран» не показываем, есть «Убрать фото» */
.photo-need { margin: 0 0 10px; color: #a32c27; font-weight: 600 }
.gallery-concept { aspect-ratio: auto !important; height: auto !important; overflow: hidden } .gallery-concept img { width: 100%; height: auto; display: block }
@media (max-width: 650px) { .gallery-concept { overflow-x: auto !important; -webkit-overflow-scrolling: touch } .gallery-concept img { width: 760px; max-width: none } }
@media (max-width: 650px) { .faq-layout > div { min-width: 0 } .gallery-concept { max-width: 100% !important; width: 100% } }
/* текстовый блок внизу главной — карточка на всю ширину, как соседние блоки */
.seo-block { margin: 36px 0 22px; padding: 30px 34px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px 44px; align-items: start }
.seo-block h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 14px }
.seo-block p { font-size: 16px; line-height: 1.65; color: #3d4045; margin: 0 0 12px }
.seo-block p:last-child { margin-bottom: 0 }
.seo-block a { color: var(--bronze); text-decoration: underline; text-underline-offset: 3px }
.seo-popular { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--tint); border-radius: 12px }
.seo-popular span { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px }
.seo-popular a { text-decoration: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; min-height: 44px; display: flex; align-items: center;
  background: #fff; color: var(--ink); font-size: 15px }
.seo-popular a:hover { border-color: var(--bronze); color: var(--bronze) }
@media (max-width: 900px) { .seo-block { grid-template-columns: 1fr; padding: 24px 20px } }
@media (max-width: 650px) { .seo-block { margin-top: 26px; padding: 22px 16px } .seo-popular { padding: 14px } }