/* ==========================================================================
CMS9 · Тема "Default" — P2 CONTENT polish (blog chips / related posts /
contacts form / FAQ accordion / category sort pill).
Продовження theme.css + theme-pages.css: ті самі токени (--accent /
--radius / --surface / --line / --pill / --font), namespace .dt-* .
Підключається САМИМИ сторінковими шаблонами (blog / blog_page / contacts /
page_delivery_payment / shop/category) — main.twig не чіпається.
Специфічність: базовий ".dt a{color:inherit}" = (0,1,1), тому кольорові
правила для посилань пишемо як ".dt .cls" (0,2,0)+.
========================================================================== */
/* ==========================================================================
1. BLOG LIST — filter chips (sec-blog): обгортка .dt-blogchips навколо
виводу widget('blog_tag_cloud') → теги стають pill-чипами.
========================================================================== */
.dt-blogchips { margin: -8px 0 0; }
.dt-blogchips .blog-widget__header { display: none; }
.dt-blogchips .tags-cloud__list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.dt-blogchips .tags-cloud__item { margin: 0; }
.dt .dt-blogchips .tags-cloud__link {
display: inline-block; border: 1px solid #ddd; border-radius: var(--pill);
padding: 8px 18px; font-size: 12px; color: var(--ink-2); white-space: nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dt .dt-blogchips .tags-cloud__link:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ==========================================================================
2. ARTICLE — "Читайте також" related grid (sec-article): обгортка
.dt-related навколо widget('popular_blog_posts') (розмітка blog-widget/
small-post) або widget('latest_news') (news-widget/small-post) —
обидві розкладаються у 3 dt-картки; зайві елементи ховаються.
========================================================================== */
.dt-related { max-width: 1000px; margin: 34px auto 0; }
.dt-related__title { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
.dt-related .blog-widget__header, .dt-related .news-widget__header { display: none; }
.dt-related .blog-widget__list, .dt-related .news-widget__inner {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
list-style: none; margin: 0; padding: 0;
}
.dt-related .blog-widget__item, .dt-related .news-widget__item { margin: 0; }
.dt-related .blog-widget__item:nth-child(n+4), .dt-related .news-widget__item:nth-child(n+4) { display: none; }
.dt-related .small-post {
border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
display: flex; flex-direction: column; height: 100%; background: #fff;
}
.dt-related .small-post__image { display: block; width: 100%; height: 130px; background: var(--surface); overflow: hidden; flex: none; }
.dt-related .small-post__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-related .small-post__inner { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dt-related .small-post__date { font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.dt-related .small-post__title { font-size: 13.5px; font-weight: 600; line-height: 1.35; margin: 0; }
.dt .dt-related .small-post__title a { color: var(--ink); }
.dt-related .small-post__desc { font-size: 11.5px; font-weight: 300; color: #666; line-height: 1.6; }
.dt-related .small-post__desc .typo p { margin: 0; }
/* ==========================================================================
3. CONTACTS — "Напишіть нам" form (sec-contacts): справжня форма модуля
feedback (POST site_url('feedback'): name / email / theme / message).
========================================================================== */
.dt-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.dt-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dt-form__field { display: flex; flex-direction: column; margin: 0; font-weight: inherit; }
.dt-form__label { font-size: 11.5px; font-weight: 500; margin-bottom: 6px; color: var(--ink); }
.dt-form__label b { font-weight: 500; color: var(--accent); }
.dt-form__input {
width: 100%; border: 1px solid #ddd; border-radius: var(--pill);
padding: 11px 18px; font: 300 12.5px var(--font); color: var(--ink);
background: #fff; outline: none;
}
.dt-form__input:focus { border-color: var(--accent); }
.dt-form__input::placeholder { color: #bbb; }
.dt-form__input--area { border-radius: 16px; min-height: 84px; resize: vertical; }
.dt-form .dt-btn { align-self: flex-start; }
@media (max-width: 640px) { .dt-form__grid { grid-template-columns: 1fr; } }
/* ==========================================================================
4. FAQ ACCORDION (sec-category / sec-delivery): очікувана розмітка —
CSS ховає відповіді, JS (verbatim у category.twig /
page_delivery_payment.twig) вмикає toggle; перший пункт відкритий.
Працює і для HTML-віджета dt_cat_faq, і для FAQ у тілі CMS-сторінки
(.dt-seo) на "Доставка та оплата".
========================================================================== */
.dt-faq { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.dt-faq__item + .dt-faq__item { border-top: 1px solid var(--line-2); }
.dt-faq__q {
display: flex; justify-content: space-between; align-items: center; gap: 14px;
padding: 15px 20px; font-size: 13.5px; font-weight: 500; color: var(--ink);
line-height: 1.4; cursor: pointer; margin: 0;
}
.dt-faq__q::after { content: '+'; font-size: 16px; color: #bbb; flex: none; line-height: 1; }
.dt-faq__item.is-open .dt-faq__q::after { content: '\2212'; color: var(--accent); }
.dt-faq__a { display: none; padding: 0 20px 16px; font-size: 12.5px; font-weight: 300; color: #666; line-height: 1.7; }
.dt-faq__item.is-open .dt-faq__a { display: block; }
.dt-faq__a p { margin: 0 0 8px; }
.dt-faq__a p:last-child { margin-bottom: 0; }
/* усередині .dt-seo (тіло CMS-сторінки) — прибрати типографічні відступи */
.dt-seo .dt-faq p { margin: 0; }
.dt-seo .dt-faq { margin: 16px 0 0; }
/* контейнер FAQ на сторінці категорії */
.dt-catfaq { margin-top: 34px; }
.dt-catfaq__title { font-size: 18px; font-weight: 600; margin: 0 0 14px; }
/* ==========================================================================
5. CATEGORY SORT — pill "Сортувати: … ▾" (sec-category): обгортка
.dt-sortpill навколо нативного