/*
 * Дизайн «Концепция 04» — ручные дополнения к основе (base.css генерируется design-prep/extract-css.py).
 * Здесь: правила для html (в основе пропущены), адаптации концепта к WordPress, служебная страница-образец.
 */

/* Плавная прокрутка и отступ якорей под закреплённую шапку — только на переведённых страницах */
html:has(body.da-page) {
	scroll-behavior: smooth;
	scroll-padding-top: 120px; /* шапка 104 px + 16 (4.3.8) */
}
@media (max-width: 800px) {
	html:has(body.da-page) { scroll-padding-top: 98px; }
}
@media (prefers-reduced-motion: reduce) {
	html:has(body.da-page) { scroll-behavior: auto; }
}

/* WordPress: админ-панель сверху у вошедших в систему */
body.da-page.admin-bar { min-height: calc(100vh - 32px); }

/* Ссылка «К содержимому» */
body.da-page .skip { z-index: 1000; }

/* ---------- Страница-образец (4.1.5) ---------- */
.da-page .da-sample section { padding: 56px 0; border-top: 1px solid var(--line); }
.da-page .da-sample section:first-of-type { border-top: 0; }
.da-page .da-sample h2.da-sample__title { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 28px; font-family: var(--sans); font-weight: 600; }
.da-page .da-sample__row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.da-page .da-sample__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.da-page .da-sample__swatch { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; font-size: 13px; }
.da-page .da-sample__swatch i { display: block; height: 70px; }
.da-page .da-sample__swatch span { display: block; padding: 10px 12px; }
.da-page .da-sample__icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.da-page .da-sample__icon { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--line); border-radius: 14px; font-size: 12px; color: var(--muted); }
.da-page .da-sample__icon .ui-icon { width: 24px; height: 24px; color: var(--ink); }
.da-page .da-sample__arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.da-page .da-sample__art { padding: 16px; border-radius: 18px; background: var(--rose); color: var(--brown); text-align: center; font-size: 12px; }
.da-page .da-sample__art .line-art { width: 100%; height: 150px; }
.da-page .da-sample__type p { max-width: 720px; }
/* 4.11.1: экран 320px (увеличение 400%) — длинное слово заголовка не выходит за край; в основе правило ≤360px перекрыто правилом ≤560px */
@media(max-width:360px){.da-page .page-heading h1,.da-page .contacts-top h1{font-size:36px}}
.da-page h1{overflow-wrap:break-word}