/* ============================================================================
Асент-Импорт — защитные стили для HTML-контента из БД (статьи, новости,
«Сотрудничество», SEO-тексты каталога, описания товаров, статические страницы).
Один блок на оба устройства (шаблон kdteam_mobile: телефон и десктоп).
ПОДКЛЮЧЕНИЕ (любой из двух вариантов):
A) рекомендуемый — отдельный файл ПОСЛЕ main.min.css, в footer.php сразу после строки
B) дописать в конец template_styles.css — селекторы начинаются с "html body",
поэтому перебивают main.min.css, который грузится позже.
!important стоит только там, где надо перебить inline-стили редактора
(style="width:600px", style="float:left") или атрибуты align/width/height.
Проверено инъекцией на живых страницах (Playwright, до/после) — см. before_after/.
============================================================================ */
/* 1. База текста: main.min.css задаёт ВСЕМ элементам `:not(html){font-size:1.2rem}` (≤479px — 1.5rem)
и reset `font:inherit; margin:0; padding:0; list-style:none`. Внутри контента возвращаем нормальную типографику. */
html body .detail_articles,
html body .textInTwoColumns .column,
html body .detail_news,
html body .seo-category,
html body .card-seo__table[itemprop="description"],
html body .seo__content,
html body .block-page__text,
html body .custom-page--text,
html body div.policy-text,
html body .faq .answer {
overflow-wrap: break-word;
word-wrap: break-word;
line-height: 1.5;
}
/* потомки наследуют кегль контейнера, а не 1.2rem/1.5rem из :not(html) — убирает «скачки» кегля внутри абзаца и в заголовках */
html body .detail_articles *,
html body .textInTwoColumns .column *,
html body .detail_news *,
html body .seo-category *,
html body .card-seo__table[itemprop="description"] *,
html body .seo__content *,
html body .block-page__text *,
html body .custom-page--text *,
html body div.policy-text *,
html body .faq .answer * {
font-size: inherit;
box-sizing: border-box;
}
html body .detail_articles p,
html body .textInTwoColumns .column p,
html body .detail_news p,
html body .seo-category p,
html body .card-seo__table[itemprop="description"] p,
html body .seo__content p,
html body .block-page__text p,
html body .custom-page--text p,
html body div.policy-text p,
html body .faq .answer p {
margin: 0 0 .8em;
}
html body .detail_articles b,
html body .detail_articles strong,
html body .textInTwoColumns .column b,
html body .textInTwoColumns .column strong,
html body .detail_news b,
html body .detail_news strong,
html body .seo-category b,
html body .seo-category strong,
html body .card-seo__table[itemprop="description"] b,
html body .card-seo__table[itemprop="description"] strong,
html body .seo__content b,
html body .seo__content strong,
html body .block-page__text b,
html body .block-page__text strong,
html body .custom-page--text b,
html body .custom-page--text strong,
html body div.policy-text b,
html body div.policy-text strong,
html body .faq .answer b,
html body .faq .answer strong {
font-family: Inter-SemiBold, sans-serif;
font-weight: 600;
}
html body .detail_articles i,
html body .detail_articles em,
html body .textInTwoColumns .column i,
html body .textInTwoColumns .column em,
html body .detail_news i,
html body .detail_news em,
html body .seo-category i,
html body .seo-category em,
html body .card-seo__table[itemprop="description"] i,
html body .card-seo__table[itemprop="description"] em,
html body .seo__content i,
html body .seo__content em,
html body .block-page__text i,
html body .block-page__text em,
html body .custom-page--text i,
html body .custom-page--text em,
html body div.policy-text i,
html body div.policy-text em,
html body .faq .answer i,
html body .faq .answer em {
font-style: italic;
}
html body .detail_articles sup,
html body .detail_articles sub,
html body .textInTwoColumns .column sup,
html body .textInTwoColumns .column sub,
html body .detail_news sup,
html body .detail_news sub,
html body .seo-category sup,
html body .seo-category sub,
html body .card-seo__table[itemprop="description"] sup,
html body .card-seo__table[itemprop="description"] sub,
html body .seo__content sup,
html body .seo__content sub,
html body .block-page__text sup,
html body .block-page__text sub,
html body .custom-page--text sup,
html body .custom-page--text sub,
html body div.policy-text sup,
html body div.policy-text sub,
html body .faq .answer sup,
html body .faq .answer sub {
font-size: .7em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
html body .detail_articles sup,
html body .textInTwoColumns .column sup,
html body .detail_news sup,
html body .seo-category sup,
html body .card-seo__table[itemprop="description"] sup,
html body .seo__content sup,
html body .block-page__text sup,
html body .custom-page--text sup,
html body div.policy-text sup,
html body .faq .answer sup {
top: -.5em;
}
html body .detail_articles sub,
html body .textInTwoColumns .column sub,
html body .detail_news sub,
html body .seo-category sub,
html body .card-seo__table[itemprop="description"] sub,
html body .seo__content sub,
html body .block-page__text sub,
html body .custom-page--text sub,
html body div.policy-text sub,
html body .faq .answer sub {
bottom: -.25em;
}
/* 2. Заголовки внутри текста: на iPhone h2/h3 сейчас 16.7px — как абзац, а ссылка внутри h3 даже мельче (15.6px) */
html body .detail_articles h2,
html body .textInTwoColumns .column h2,
html body .detail_news h2,
html body .seo-category h2,
html body .card-seo__table[itemprop="description"] h2,
html body .seo__content h2,
html body .block-page__text h2,
html body .custom-page--text h2,
html body div.policy-text h2,
html body .faq .answer h2 {
font-size: 1.3em;
line-height: 1.25;
margin: 1.2em 0 .5em;
font-family: Inter-SemiBold, sans-serif;
}
html body .detail_articles h3,
html body .textInTwoColumns .column h3,
html body .detail_news h3,
html body .seo-category h3,
html body .card-seo__table[itemprop="description"] h3,
html body .seo__content h3,
html body .block-page__text h3,
html body .custom-page--text h3,
html body div.policy-text h3,
html body .faq .answer h3 {
font-size: 1.15em;
line-height: 1.3;
margin: 1.1em 0 .45em;
font-family: Inter-SemiBold, sans-serif;
}
html body .detail_articles h4,
html body .detail_articles h5,
html body .detail_articles h6,
html body .textInTwoColumns .column h4,
html body .textInTwoColumns .column h5,
html body .textInTwoColumns .column h6,
html body .detail_news h4,
html body .detail_news h5,
html body .detail_news h6,
html body .seo-category h4,
html body .seo-category h5,
html body .seo-category h6,
html body .card-seo__table[itemprop="description"] h4,
html body .card-seo__table[itemprop="description"] h5,
html body .card-seo__table[itemprop="description"] h6,
html body .seo__content h4,
html body .seo__content h5,
html body .seo__content h6,
html body .block-page__text h4,
html body .block-page__text h5,
html body .block-page__text h6,
html body .custom-page--text h4,
html body .custom-page--text h5,
html body .custom-page--text h6,
html body div.policy-text h4,
html body div.policy-text h5,
html body div.policy-text h6,
html body .faq .answer h4,
html body .faq .answer h5,
html body .faq .answer h6 {
font-size: 1.1em;
line-height: 1.35;
margin: 1em 0 .4em;
font-family: Inter-SemiBold, sans-serif;
}
/* main.min.css: `h1 *{font-size:1.7rem!important}`, `h2 *{1.55rem!important}`, `h3 *{1.4rem!important}` —
любой // внутри заголовка получает фиксированный кегль: h3-ссылка 15.6px мельче абзаца 16.7px.
Внутри текста из БД части заголовка наследуют кегль самого заголовка. */
html body .detail_articles h1 *,
html body .detail_articles h2 *,
html body .detail_articles h3 *,
html body .detail_articles h4 *,
html body .textInTwoColumns .column h1 *,
html body .textInTwoColumns .column h2 *,
html body .textInTwoColumns .column h3 *,
html body .textInTwoColumns .column h4 *,
html body .detail_news h1 *,
html body .detail_news h2 *,
html body .detail_news h3 *,
html body .detail_news h4 *,
html body .seo-category h1 *,
html body .seo-category h2 *,
html body .seo-category h3 *,
html body .seo-category h4 *,
html body .card-seo__table[itemprop="description"] h1 *,
html body .card-seo__table[itemprop="description"] h2 *,
html body .card-seo__table[itemprop="description"] h3 *,
html body .card-seo__table[itemprop="description"] h4 *,
html body .seo__content h1 *,
html body .seo__content h2 *,
html body .seo__content h3 *,
html body .seo__content h4 *,
html body .block-page__text h1 *,
html body .block-page__text h2 *,
html body .block-page__text h3 *,
html body .block-page__text h4 *,
html body .custom-page--text h1 *,
html body .custom-page--text h2 *,
html body .custom-page--text h3 *,
html body .custom-page--text h4 *,
html body div.policy-text h1 *,
html body div.policy-text h2 *,
html body div.policy-text h3 *,
html body div.policy-text h4 *,
html body .faq .answer h1 *,
html body .faq .answer h2 *,
html body .faq .answer h3 *,
html body .faq .answer h4 * {
font-size: inherit !important;
}
html body .detail_articles h1 sup,
html body .detail_articles h2 sup,
html body .detail_articles h3 sup,
html body .detail_articles h4 sup,
html body .detail_articles h1 sub,
html body .detail_articles h2 sub,
html body .detail_articles h3 sub,
html body .detail_articles h4 sub,
html body .textInTwoColumns .column h1 sup,
html body .textInTwoColumns .column h2 sup,
html body .textInTwoColumns .column h3 sup,
html body .textInTwoColumns .column h4 sup,
html body .textInTwoColumns .column h1 sub,
html body .textInTwoColumns .column h2 sub,
html body .textInTwoColumns .column h3 sub,
html body .textInTwoColumns .column h4 sub,
html body .detail_news h1 sup,
html body .detail_news h2 sup,
html body .detail_news h3 sup,
html body .detail_news h4 sup,
html body .detail_news h1 sub,
html body .detail_news h2 sub,
html body .detail_news h3 sub,
html body .detail_news h4 sub,
html body .seo-category h1 sup,
html body .seo-category h2 sup,
html body .seo-category h3 sup,
html body .seo-category h4 sup,
html body .seo-category h1 sub,
html body .seo-category h2 sub,
html body .seo-category h3 sub,
html body .seo-category h4 sub,
html body .card-seo__table[itemprop="description"] h1 sup,
html body .card-seo__table[itemprop="description"] h2 sup,
html body .card-seo__table[itemprop="description"] h3 sup,
html body .card-seo__table[itemprop="description"] h4 sup,
html body .card-seo__table[itemprop="description"] h1 sub,
html body .card-seo__table[itemprop="description"] h2 sub,
html body .card-seo__table[itemprop="description"] h3 sub,
html body .card-seo__table[itemprop="description"] h4 sub,
html body .seo__content h1 sup,
html body .seo__content h2 sup,
html body .seo__content h3 sup,
html body .seo__content h4 sup,
html body .seo__content h1 sub,
html body .seo__content h2 sub,
html body .seo__content h3 sub,
html body .seo__content h4 sub,
html body .block-page__text h1 sup,
html body .block-page__text h2 sup,
html body .block-page__text h3 sup,
html body .block-page__text h4 sup,
html body .block-page__text h1 sub,
html body .block-page__text h2 sub,
html body .block-page__text h3 sub,
html body .block-page__text h4 sub,
html body .custom-page--text h1 sup,
html body .custom-page--text h2 sup,
html body .custom-page--text h3 sup,
html body .custom-page--text h4 sup,
html body .custom-page--text h1 sub,
html body .custom-page--text h2 sub,
html body .custom-page--text h3 sub,
html body .custom-page--text h4 sub,
html body div.policy-text h1 sup,
html body div.policy-text h2 sup,
html body div.policy-text h3 sup,
html body div.policy-text h4 sup,
html body div.policy-text h1 sub,
html body div.policy-text h2 sub,
html body div.policy-text h3 sub,
html body div.policy-text h4 sub,
html body .faq .answer h1 sup,
html body .faq .answer h2 sup,
html body .faq .answer h3 sup,
html body .faq .answer h4 sup,
html body .faq .answer h1 sub,
html body .faq .answer h2 sub,
html body .faq .answer h3 sub,
html body .faq .answer h4 sub {
font-size: .7em !important;
}
/* редактор иногда заворачивает в целые куски текста со списками и картинками (напр. /news/futbolnoe-pole-…):
такие «заголовки» не увеличиваем. Отдельным правилом — браузер без :has() просто его пропустит. */
html body .detail_articles h2:has(ul, ol, img, table, p, div),
html body .detail_articles h3:has(ul, ol, img, table, p, div),
html body .detail_articles h4:has(ul, ol, img, table, p, div),
html body .textInTwoColumns .column h2:has(ul, ol, img, table, p, div),
html body .textInTwoColumns .column h3:has(ul, ol, img, table, p, div),
html body .textInTwoColumns .column h4:has(ul, ol, img, table, p, div),
html body .detail_news h2:has(ul, ol, img, table, p, div),
html body .detail_news h3:has(ul, ol, img, table, p, div),
html body .detail_news h4:has(ul, ol, img, table, p, div),
html body .seo-category h2:has(ul, ol, img, table, p, div),
html body .seo-category h3:has(ul, ol, img, table, p, div),
html body .seo-category h4:has(ul, ol, img, table, p, div),
html body .card-seo__table[itemprop="description"] h2:has(ul, ol, img, table, p, div),
html body .card-seo__table[itemprop="description"] h3:has(ul, ol, img, table, p, div),
html body .card-seo__table[itemprop="description"] h4:has(ul, ol, img, table, p, div),
html body .seo__content h2:has(ul, ol, img, table, p, div),
html body .seo__content h3:has(ul, ol, img, table, p, div),
html body .seo__content h4:has(ul, ol, img, table, p, div),
html body .block-page__text h2:has(ul, ol, img, table, p, div),
html body .block-page__text h3:has(ul, ol, img, table, p, div),
html body .block-page__text h4:has(ul, ol, img, table, p, div),
html body .custom-page--text h2:has(ul, ol, img, table, p, div),
html body .custom-page--text h3:has(ul, ol, img, table, p, div),
html body .custom-page--text h4:has(ul, ol, img, table, p, div),
html body div.policy-text h2:has(ul, ol, img, table, p, div),
html body div.policy-text h3:has(ul, ol, img, table, p, div),
html body div.policy-text h4:has(ul, ol, img, table, p, div),
html body .faq .answer h2:has(ul, ol, img, table, p, div),
html body .faq .answer h3:has(ul, ol, img, table, p, div),
html body .faq .answer h4:has(ul, ol, img, table, p, div) {
font-size: inherit;
line-height: 1.5;
margin: 0 0 .8em;
}
/* 3. Списки: reset `ol,ul{list-style:none}` + padding:0 убирает маркеры и отступы у списков из редактора.
Только списки без классов (у вёрстки шаблона классы есть). */
html body .detail_articles ul:not([class]),
html body .textInTwoColumns .column ul:not([class]),
html body .detail_news ul:not([class]),
html body .seo-category ul:not([class]),
html body .card-seo__table[itemprop="description"] ul:not([class]),
html body .seo__content ul:not([class]),
html body .block-page__text ul:not([class]),
html body .custom-page--text ul:not([class]),
html body div.policy-text ul:not([class]),
html body .faq .answer ul:not([class]) {
list-style: disc outside;
padding-left: 1.4em;
margin: 0 0 1em;
}
html body .detail_articles ol:not([class]),
html body .textInTwoColumns .column ol:not([class]),
html body .detail_news ol:not([class]),
html body .seo-category ol:not([class]),
html body .card-seo__table[itemprop="description"] ol:not([class]),
html body .seo__content ol:not([class]),
html body .block-page__text ol:not([class]),
html body .custom-page--text ol:not([class]),
html body div.policy-text ol:not([class]),
html body .faq .answer ol:not([class]) {
list-style: decimal outside;
padding-left: 1.6em;
margin: 0 0 1em;
}
html body .detail_articles ul:not([class]) > li,
html body .detail_articles ol:not([class]) > li,
html body .textInTwoColumns .column ul:not([class]) > li,
html body .textInTwoColumns .column ol:not([class]) > li,
html body .detail_news ul:not([class]) > li,
html body .detail_news ol:not([class]) > li,
html body .seo-category ul:not([class]) > li,
html body .seo-category ol:not([class]) > li,
html body .card-seo__table[itemprop="description"] ul:not([class]) > li,
html body .card-seo__table[itemprop="description"] ol:not([class]) > li,
html body .seo__content ul:not([class]) > li,
html body .seo__content ol:not([class]) > li,
html body .block-page__text ul:not([class]) > li,
html body .block-page__text ol:not([class]) > li,
html body .custom-page--text ul:not([class]) > li,
html body .custom-page--text ol:not([class]) > li,
html body div.policy-text ul:not([class]) > li,
html body div.policy-text ol:not([class]) > li,
html body .faq .answer ul:not([class]) > li,
html body .faq .answer ol:not([class]) > li {
display: list-item;
list-style: inherit;
margin: 0 0 .35em;
}
/* в .seo-category у li стоит list-style:inside — перенос строки уходит под маркер */
html body .seo-category li {
list-style-position: outside;
}
/* 4. Картинки/видео не шире колонки и без искажения: max-width:100% есть в main.min.css, но inline-ширина (style="width:…")
и атрибут height из редактора его перебивают / ломают пропорции — фиксируем с !important только внутри текста */
html body .detail_articles img:not([style*="max-width"]),
html body .detail_articles video,
html body .detail_articles embed,
html body .detail_articles object,
html body .textInTwoColumns .column img:not([style*="max-width"]),
html body .textInTwoColumns .column video,
html body .textInTwoColumns .column embed,
html body .textInTwoColumns .column object,
html body .detail_news img:not([style*="max-width"]),
html body .detail_news video,
html body .detail_news embed,
html body .detail_news object,
html body .seo-category img:not([style*="max-width"]),
html body .seo-category video,
html body .seo-category embed,
html body .seo-category object,
html body .card-seo__table[itemprop="description"] img:not([style*="max-width"]),
html body .card-seo__table[itemprop="description"] video,
html body .card-seo__table[itemprop="description"] embed,
html body .card-seo__table[itemprop="description"] object,
html body .seo__content img:not([style*="max-width"]),
html body .seo__content video,
html body .seo__content embed,
html body .seo__content object,
html body .block-page__text img:not([style*="max-width"]),
html body .block-page__text video,
html body .block-page__text embed,
html body .block-page__text object,
html body .custom-page--text img:not([style*="max-width"]),
html body .custom-page--text video,
html body .custom-page--text embed,
html body .custom-page--text object,
html body div.policy-text img:not([style*="max-width"]),
html body div.policy-text video,
html body div.policy-text embed,
html body div.policy-text object,
html body .faq .answer img:not([style*="max-width"]),
html body .faq .answer video,
html body .faq .answer embed,
html body .faq .answer object {
max-width: 100% !important;
}
html body .detail_articles img,
html body .detail_articles video,
html body .textInTwoColumns .column img,
html body .textInTwoColumns .column video,
html body .detail_news img,
html body .detail_news video,
html body .seo-category img,
html body .seo-category video,
html body .card-seo__table[itemprop="description"] img,
html body .card-seo__table[itemprop="description"] video,
html body .seo__content img,
html body .seo__content video,
html body .block-page__text img,
html body .block-page__text video,
html body .custom-page--text img,
html body .custom-page--text video,
html body div.policy-text img,
html body div.policy-text video,
html body .faq .answer img,
html body .faq .answer video {
height: auto !important;
}
html body .detail_articles iframe,
html body .textInTwoColumns .column iframe,
html body .detail_news iframe,
html body .seo-category iframe,
html body .card-seo__table[itemprop="description"] iframe,
html body .seo__content iframe,
html body .block-page__text iframe,
html body .custom-page--text iframe,
html body div.policy-text iframe,
html body .faq .answer iframe {
max-width: 100% !important;
}
html body .detail_articles iframe[src*="youtube"],
html body .detail_articles iframe[src*="rutube"],
html body .detail_articles iframe[src*="vk.com/video"],
html body .detail_articles iframe[src*="vkvideo"],
html body .textInTwoColumns .column iframe[src*="youtube"],
html body .textInTwoColumns .column iframe[src*="rutube"],
html body .textInTwoColumns .column iframe[src*="vk.com/video"],
html body .textInTwoColumns .column iframe[src*="vkvideo"],
html body .detail_news iframe[src*="youtube"],
html body .detail_news iframe[src*="rutube"],
html body .detail_news iframe[src*="vk.com/video"],
html body .detail_news iframe[src*="vkvideo"],
html body .seo-category iframe[src*="youtube"],
html body .seo-category iframe[src*="rutube"],
html body .seo-category iframe[src*="vk.com/video"],
html body .seo-category iframe[src*="vkvideo"],
html body .card-seo__table[itemprop="description"] iframe[src*="youtube"],
html body .card-seo__table[itemprop="description"] iframe[src*="rutube"],
html body .card-seo__table[itemprop="description"] iframe[src*="vk.com/video"],
html body .card-seo__table[itemprop="description"] iframe[src*="vkvideo"],
html body .seo__content iframe[src*="youtube"],
html body .seo__content iframe[src*="rutube"],
html body .seo__content iframe[src*="vk.com/video"],
html body .seo__content iframe[src*="vkvideo"],
html body .block-page__text iframe[src*="youtube"],
html body .block-page__text iframe[src*="rutube"],
html body .block-page__text iframe[src*="vk.com/video"],
html body .block-page__text iframe[src*="vkvideo"],
html body .custom-page--text iframe[src*="youtube"],
html body .custom-page--text iframe[src*="rutube"],
html body .custom-page--text iframe[src*="vk.com/video"],
html body .custom-page--text iframe[src*="vkvideo"],
html body div.policy-text iframe[src*="youtube"],
html body div.policy-text iframe[src*="rutube"],
html body div.policy-text iframe[src*="vk.com/video"],
html body div.policy-text iframe[src*="vkvideo"],
html body .faq .answer iframe[src*="youtube"],
html body .faq .answer iframe[src*="rutube"],
html body .faq .answer iframe[src*="vk.com/video"],
html body .faq .answer iframe[src*="vkvideo"] {
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
}
/* 5. Обтекание. reset `margin:0` обнуляет hspace/vspace у ![]()
, поэтому текст прилипает к картинке.
Возвращаем поля; float-ы не вылезают из блока статьи. */
html body .detail_articles img[align="left"],
html body .detail_articles img[style*="float: left"],
html body .detail_articles img[style*="float:left"],
html body .textInTwoColumns .column img[align="left"],
html body .textInTwoColumns .column img[style*="float: left"],
html body .textInTwoColumns .column img[style*="float:left"],
html body .detail_news img[align="left"],
html body .detail_news img[style*="float: left"],
html body .detail_news img[style*="float:left"],
html body .seo-category img[align="left"],
html body .seo-category img[style*="float: left"],
html body .seo-category img[style*="float:left"],
html body .card-seo__table[itemprop="description"] img[align="left"],
html body .card-seo__table[itemprop="description"] img[style*="float: left"],
html body .card-seo__table[itemprop="description"] img[style*="float:left"],
html body .seo__content img[align="left"],
html body .seo__content img[style*="float: left"],
html body .seo__content img[style*="float:left"],
html body .block-page__text img[align="left"],
html body .block-page__text img[style*="float: left"],
html body .block-page__text img[style*="float:left"],
html body .custom-page--text img[align="left"],
html body .custom-page--text img[style*="float: left"],
html body .custom-page--text img[style*="float:left"],
html body div.policy-text img[align="left"],
html body div.policy-text img[style*="float: left"],
html body div.policy-text img[style*="float:left"],
html body .faq .answer img[align="left"],
html body .faq .answer img[style*="float: left"],
html body .faq .answer img[style*="float:left"] {
float: left;
margin: .3em 1.5em 1em 0 !important;
}
html body .detail_articles img[align="right"],
html body .detail_articles img[style*="float: right"],
html body .detail_articles img[style*="float:right"],
html body .textInTwoColumns .column img[align="right"],
html body .textInTwoColumns .column img[style*="float: right"],
html body .textInTwoColumns .column img[style*="float:right"],
html body .detail_news img[align="right"],
html body .detail_news img[style*="float: right"],
html body .detail_news img[style*="float:right"],
html body .seo-category img[align="right"],
html body .seo-category img[style*="float: right"],
html body .seo-category img[style*="float:right"],
html body .card-seo__table[itemprop="description"] img[align="right"],
html body .card-seo__table[itemprop="description"] img[style*="float: right"],
html body .card-seo__table[itemprop="description"] img[style*="float:right"],
html body .seo__content img[align="right"],
html body .seo__content img[style*="float: right"],
html body .seo__content img[style*="float:right"],
html body .block-page__text img[align="right"],
html body .block-page__text img[style*="float: right"],
html body .block-page__text img[style*="float:right"],
html body .custom-page--text img[align="right"],
html body .custom-page--text img[style*="float: right"],
html body .custom-page--text img[style*="float:right"],
html body div.policy-text img[align="right"],
html body div.policy-text img[style*="float: right"],
html body div.policy-text img[style*="float:right"],
html body .faq .answer img[align="right"],
html body .faq .answer img[style*="float: right"],
html body .faq .answer img[style*="float:right"] {
float: right;
margin: .3em 0 1em 1.5em !important;
}
html body .detail_articles::after,
html body .textInTwoColumns .column::after,
html body .detail_news::after,
html body .seo-category::after,
html body .card-seo__table[itemprop="description"]::after,
html body .seo__content::after,
html body .block-page__text::after,
html body .custom-page--text::after,
html body div.policy-text::after,
html body .faq .answer::after {
content: "";
display: table;
clear: both;
}
/* 6. Таблицы из редактора: не шире колонки; на телефоне — горизонтальная прокрутка вместо обрезания
(html/body имеют overflow-x:hidden, поэтому сейчас всё, что шире экрана, просто отрезано). */
html body .detail_articles table,
html body .textInTwoColumns .column table,
html body .detail_news table,
html body .seo-category table,
html body .card-seo__table[itemprop="description"] table,
html body .seo__content table,
html body .block-page__text table,
html body .custom-page--text table,
html body div.policy-text table,
html body .faq .answer table {
max-width: 100%;
border-collapse: collapse;
}
html body .detail_articles td,
html body .detail_articles th,
html body .textInTwoColumns .column td,
html body .textInTwoColumns .column th,
html body .detail_news td,
html body .detail_news th,
html body .seo-category td,
html body .seo-category th,
html body .card-seo__table[itemprop="description"] td,
html body .card-seo__table[itemprop="description"] th,
html body .seo__content td,
html body .seo__content th,
html body .block-page__text td,
html body .block-page__text th,
html body .custom-page--text td,
html body .custom-page--text th,
html body div.policy-text td,
html body div.policy-text th,
html body .faq .answer td,
html body .faq .answer th {
padding: .3em .5em;
vertical-align: top;
}
html body .table-responsive {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 7. Inline-ширины в px из редактора не должны распирать колонку */
html body .detail_articles [style*="width"]:not([style*="max-width"]),
html body .textInTwoColumns .column [style*="width"]:not([style*="max-width"]),
html body .detail_news [style*="width"]:not([style*="max-width"]),
html body .seo-category [style*="width"]:not([style*="max-width"]),
html body .card-seo__table[itemprop="description"] [style*="width"]:not([style*="max-width"]),
html body .seo__content [style*="width"]:not([style*="max-width"]),
html body .block-page__text [style*="width"]:not([style*="max-width"]),
html body .custom-page--text [style*="width"]:not([style*="max-width"]),
html body div.policy-text [style*="width"]:not([style*="max-width"]),
html body .faq .answer [style*="width"]:not([style*="max-width"]) {
max-width: 100% !important;
}
/* 8. Телефон и планшет-портрет */
@media (max-width: 767px) {
/* 8.1 Обтекание на узком экране: картинка на всю ширину, текст под ней (сейчас колонка 150–180px) */
html body .detail_articles img[align],
html body .detail_articles img[style*="float"],
html body .detail_articles [style*="float"],
html body .detail_articles table[align],
html body .textInTwoColumns .column img[align],
html body .textInTwoColumns .column img[style*="float"],
html body .textInTwoColumns .column [style*="float"],
html body .textInTwoColumns .column table[align],
html body .detail_news img[align],
html body .detail_news img[style*="float"],
html body .detail_news [style*="float"],
html body .detail_news table[align],
html body .seo-category img[align],
html body .seo-category img[style*="float"],
html body .seo-category [style*="float"],
html body .seo-category table[align],
html body .card-seo__table[itemprop="description"] img[align],
html body .card-seo__table[itemprop="description"] img[style*="float"],
html body .card-seo__table[itemprop="description"] [style*="float"],
html body .card-seo__table[itemprop="description"] table[align],
html body .seo__content img[align],
html body .seo__content img[style*="float"],
html body .seo__content [style*="float"],
html body .seo__content table[align],
html body .block-page__text img[align],
html body .block-page__text img[style*="float"],
html body .block-page__text [style*="float"],
html body .block-page__text table[align],
html body .custom-page--text img[align],
html body .custom-page--text img[style*="float"],
html body .custom-page--text [style*="float"],
html body .custom-page--text table[align],
html body div.policy-text img[align],
html body div.policy-text img[style*="float"],
html body div.policy-text [style*="float"],
html body div.policy-text table[align],
html body .faq .answer img[align],
html body .faq .answer img[style*="float"],
html body .faq .answer [style*="float"],
html body .faq .answer table[align] {
float: none !important;
display: block;
margin: .75em auto !important;
width: auto !important;
}
/* 8.2 Таблица шире экрана — прокручивается внутри себя */
html body .detail_articles table,
html body .textInTwoColumns .column table,
html body .detail_news table,
html body .seo-category table,
html body .card-seo__table[itemprop="description"] table,
html body .seo__content table,
html body .block-page__text table,
html body .custom-page--text table,
html body div.policy-text table,
html body .faq .answer table {
display: block;
width: auto !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 8.2a На телефоне ничто из текста не шире колонки — даже с inline max-width в px */
html body .detail_articles img,
html body .detail_articles [style*="width"],
html body .textInTwoColumns .column img,
html body .textInTwoColumns .column [style*="width"],
html body .detail_news img,
html body .detail_news [style*="width"],
html body .seo-category img,
html body .seo-category [style*="width"],
html body .card-seo__table[itemprop="description"] img,
html body .card-seo__table[itemprop="description"] [style*="width"],
html body .seo__content img,
html body .seo__content [style*="width"],
html body .block-page__text img,
html body .block-page__text [style*="width"],
html body .custom-page--text img,
html body .custom-page--text [style*="width"],
html body div.policy-text img,
html body div.policy-text [style*="width"],
html body .faq .answer img,
html body .faq .answer [style*="width"] {
max-width: 100% !important;
}
/* 8.3 /css/news.css центрирует весь текст статьи (.news-content{text-align:center}) — длинные абзацы читаются плохо */
html body .news-content .detail_articles,
html body .news-content .detail_news,
html body .news-content .textInTwoColumns {
text-align: left;
}
/* 8.4 Карточка товара: значения «Назначение» склеены («Для ванной Для кухни…») — разделитель есть только в десктопном CSS */
html.mobile body .card-seo__table__name__r {
display: flex;
flex-wrap: wrap;
column-gap: .4em;
}
html.mobile body .card-seo__table__name__r .devided:not(:last-child)::after {
content: ",";
}
/* 8.5 Карточка товара, блок «Описание» внизу: класс .text--desktop (font-size:1.07rem ≈ 12px) используется только в мобильной ветке */
html.mobile body .text.text--desktop {
font-size: 1.4rem;
line-height: 1.5;
}
}
/* 9. Конфликт имён: на /about/faq/ вопросы размечены