/*
  Дополнения к design.css для того, чего в макетах не было как данных:
  форматированный текст из CKEditor, списки преимуществ и ограничений на
  карточке продукта, обязательное предупреждение, уведомление о cookie,
  состояния формы. design.css не трогаем — это источник дизайна.
*/
.rich-text p{margin:0 0 20px;color:var(--muted)}
.rich-text p:last-child{margin-bottom:0}
.rich-text h2{font-size:35px;margin:38px 0 20px}
.rich-text h2:first-child{margin-top:0}
.rich-text h3{margin:28px 0 14px}
.rich-text ul,.rich-text ol{margin:0 0 20px;padding-left:26px;color:var(--muted)}
.rich-text li{margin-bottom:8px}
.rich-text a{text-decoration:underline;text-underline-offset:4px}
.rich-text table{width:100%;border-collapse:collapse;font-size:20px;margin:0 0 20px}
.rich-text td,.rich-text th{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.rich-text blockquote{margin:0 0 20px;padding-left:22px;border-left:4px solid var(--red);color:var(--muted)}
.small-text{font-size:18px}
.small-text p{font-size:18px}

/* карточка продукта */
.product-badges{margin-top:30px}
.product-badges span{background:var(--soft);border-color:transparent;font-size:18px}
.bullet-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.bullet-list li{display:flex;gap:12px;align-items:start;color:var(--ink)}
.bullet-list .icon{color:var(--red);margin-top:4px}
.important-title{margin-top:35px;font-size:23px}
.important-list{margin:14px 0 0;padding-left:22px;color:var(--muted);display:grid;gap:10px}
.warning-block{border:2px solid var(--red);border-radius:27px;padding:35px}
.warning-block h2{font-size:30px;color:var(--red);margin-bottom:20px}
.warning-block .rich-text p{color:var(--ink)}
.product-heading.long-title h1{font-size:54px}
#purpose .rich-text{margin-top:25px}
#purpose{align-items:start}
#purpose .image-panel{position:sticky;top:24px}

/* формы: состояния */
.form-content[data-state=sending] .btn{background:#dfe2e4;color:#62686e;cursor:default}
.form-content .notice[hidden]{display:none}
.field.invalid input,.field.invalid textarea{border:2px solid #ba1b26;padding:14px;background:#fffafa}

/* cookie */
.cookie-bar{position:fixed;left:0;right:0;bottom:20px;z-index:30;padding:0 20px}
.cookie-bar .cookie-sample{box-shadow:0 16px 40px #25262622;max-width:960px}
.cookie-bar[hidden]{display:none}
@media(max-width:680px){.cookie-bar .cookie-sample{flex-direction:column;align-items:stretch;gap:16px}}

/* китайский текст: системный шрифт с иероглифами, свои интервалы (LANGUAGES.md) */
.lang-zh body,body.lang-zh{font-family:Onest,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
body.lang-zh h1,body.lang-zh h2,body.lang-zh h3,body.lang-zh h4{letter-spacing:0;line-height:1.25;font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Onest,sans-serif}
body.lang-zh .home-hero h1{letter-spacing:0;line-height:1.2}

/* длинные заголовки служебных страниц на телефоне: «Политика конфиденциальности» */
.page-head.compact h1{hyphens:auto;overflow-wrap:anywhere}

/* Блок «Что планируете приклеить?»: фото заполняет левую ячейку целиком.
   В design.css поздняя правка (этап 10) прибила картинке высоту 520 px и
   центрирование — когда текст справа выше, вокруг фото оставались серые поля
   и прямые углы. Пусть тянется на всю ячейку, углы скругляет родитель. */
.task-feature>img{height:100%;min-height:530px;align-self:stretch}
@media(max-width:680px){.task-feature>img{height:310px;min-height:0}}

/* Инструкции: этапы в одну колонку, всегда раскрыты (правка владельца 16.09.2026) */
.steps.stacked{grid-template-columns:1fr;gap:34px}
.steps.stacked .step p{max-width:65ch}
.resource-main .steps.stacked{margin-top:10px}

/* Этап 12: первый блок сразу под заголовком страницы (hub-grid на «Клиентам»,
   полоса бренда на «Рекламных материалах») в макетах идёт без отступа раздела */
.page-head + .section{margin-top:0}

/* Раздел «Упаковка» на странице продукта: рендеры без фона на той же светлой
   поверхности, что и карточки каталога; клик открывает исходный PNG */
.photo-gallery.packaging figure{background:#f2f3f3;border-radius:18px;overflow:hidden;padding:0 0 16px}
.photo-gallery.packaging a{display:block}
.photo-gallery.packaging img{border-radius:0;aspect-ratio:1;object-fit:contain;padding:7%;box-sizing:border-box}
.photo-gallery.packaging figcaption{padding:0 22px;font-size:18px;color:var(--muted);margin-top:4px}