.v5doc{font-size:15px;line-height:1.65;color:#3a4a3a;}
.v5doc-lead{font-size:18px;line-height:1.6;color:#33433d;margin:0 0 26px;}
.v5doc-h2{font-size:24px;font-weight:700;color:#1b3a1b;margin:36px 0 18px;}
.v5doc p{margin:0 0 14px;}
.v5doc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 24px;}
.v5doc-card{background:#f6f9f6;border:1px solid #e8efe8;border-radius:14px;padding:24px 20px;transition:box-shadow .2s,transform .2s;}
.v5doc-card:hover{box-shadow:0 10px 28px rgba(46,125,50,.12);transform:translateY(-3px);}
.v5doc-card .ic{display:inline-flex;margin-bottom:12px;}
.v5doc-card h3{font-size:16px;font-weight:700;color:#1b3a1b;margin:0 0 7px;}
.v5doc-card p{font-size:13.5px;color:#5a6b5a;line-height:1.5;margin:0;}
.v5doc-card a{color:#2e7d32;text-decoration:none;font-weight:600;}
.v5doc-card a:hover{text-decoration:underline;}
/* ⛔ 29.09.2026, багхант (телефон): замер /brands/, webkit 390 и 320, chromium 412. Карточка
бренда 360×100–140 px с тенью и подъёмом на :hover выглядит одной плиткой, а ссылка в ней —
только название в h3, 22 px высотой (Solgar 49×22). Нажатие на описание или угол карточки
(elementFromPoint → P / DIV.v5doc-card, closest('a') = null) не делало ничего — у всех 8
карточек. Теперь ссылка заголовка растянута на всю карточку (::after поверх, inset:0), а
другие ссылки в карточке (/contact/: почта и t.me в абзаце) подняты над ней и нажимаются
как раньше. Карточки без ссылки в h3 (/about/, /genuine/) не меняются. Сторож:
bin/check-info-pages-css.php, СЕКЦИЯ-6. */
.v5doc-card{position:relative;}
.v5doc-card h3 a::after{content:'';position:absolute;inset:0;border-radius:14px;}
.v5doc-card p a{position:relative;z-index:1;}
.v5doc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:6px 0 24px;}
.v5doc-step{background:#f6f9f6;border:1px solid #e8efe8;border-radius:14px;padding:22px 18px;}
.v5doc-step .num{width:32px;height:32px;border-radius:50%;background:#2e7d32;color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.v5doc-step h3{font-size:15px;font-weight:700;color:#1b3a1b;margin:0 0 6px;}
.v5doc-step p{font-size:13px;color:#5a6b5a;line-height:1.5;margin:0;}
.v5doc-callout{background:#eef6ee;border-left:4px solid #2e7d32;border-radius:10px;padding:18px 22px;margin:20px 0;color:#1b3a1b;font-size:15px;line-height:1.6;}
.v5doc-callout strong{color:#2e7d32;}
.v5doc-note{background:#f7f8f7;border:1px solid #ececec;border-radius:10px;padding:13px 18px;font-size:13px;color:#5f6b5f;margin:16px 0;}
.v5doc-calc{background:#fff;border:1px solid #e2e8e2;border-radius:16px;padding:26px;margin:20px 0;box-shadow:0 8px 26px rgba(27,58,27,.06);}
.v5doc-calc .formula{background:#173a1f;color:#fff;border-radius:10px;padding:15px 18px;font-size:15px;text-align:center;margin-bottom:20px;font-weight:600;}
.v5doc-calc .ex-title{font-weight:700;color:#1b3a1b;margin-bottom:10px;}
.v5doc-calc .row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed #e4ebe4;font-size:14px;}
.v5doc-calc .row span:last-child{font-weight:600;color:#1b3a1b;white-space:nowrap;}
.v5doc-calc .row.total{border-bottom:none;font-size:17px;font-weight:700;}
.v5doc-calc .row.total span:last-child{color:#2e7d32;}
.v5doc-pay{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px;}
.v5doc-pay span{background:#fff;border:1px solid #e2e8e2;border-radius:9px;padding:9px 18px;font-weight:600;font-size:14px;color:#1b3a1b;}
.v5doc-logos{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:14px 0;}
.v5doc-logos .chip{background:#fff;border:1px solid #e2e8e2;border-radius:10px;height:56px;min-width:96px;padding:0 18px;display:flex;align-items:center;justify-content:center;}
.v5doc-logos img{height:30px;width:auto;display:block;object-fit:contain;}
.v5doc-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 18px;}
.v5doc-check{display:flex;gap:12px;align-items:flex-start;background:#eef6ee;border-radius:12px;padding:16px 18px;}
.v5doc-check .cm{color:#2e7d32;font-weight:800;font-size:18px;line-height:1.3;flex:0 0 auto;}
.v5doc-check span:last-child{font-size:14px;color:#33433d;}
.v5doc-nolist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:8px 0 18px;}
.v5doc-no{background:#fdf4f3;border:1px solid #f3ddd9;border-radius:12px;padding:14px 16px;font-size:13.5px;color:#5a4a48;}
.v5doc-no b{color:#c0392b;display:block;margin-bottom:3px;}
.v5doc-contacts{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 18px;}
.v5doc-contacts a,.v5doc-contacts span{background:#f6f9f6;border:1px solid #e8efe8;border-radius:10px;padding:12px 18px;font-size:14px;color:#1b3a1b;text-decoration:none;font-weight:600;}
/* ⛔ 29.09.2026, багхант (телефон): замер /about/, webkit 320 и chromium 412. Правило выше рисовало
ссылку-почту и простой текст одинаковыми плашками (фон #f6f9f6, рамка, 12px 18px, 49 px
высотой): «Telegram-бот: @vita5_picker_bot» 266×49 и «Ежедневно 9:00–21:00» 227×49
выглядели кнопками рядом с нажимаемой почтой, а нажатие по ним не делало ничего. Плашкой
теперь остаётся только ссылка; строка Telegram становится ссылкой в фильтре the_content
ниже. Сторож: bin/check-info-pages-css.php, СЕКЦИЯ-7. */
.v5doc-contacts span{background:transparent;border-color:transparent;font-weight:500;color:#5a6b5a;}
@media(max-width:1024px){.v5doc-cards,.v5doc-checks{grid-template-columns:repeat(2,1fr);}.v5doc-steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.v5doc-cards,.v5doc-checks,.v5doc-steps,.v5doc-nolist{grid-template-columns:1fr;}}
.v5faq{border:1px solid #e8efe8;border-radius:12px;margin:0 0 12px;background:#fff;overflow:hidden;}
.v5faq>summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:600;color:#1b3a1b;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.v5faq>summary::-webkit-details-marker{display:none;}
.v5faq>summary::after{content:"+";color:#2e7d32;font-size:24px;font-weight:700;line-height:1;flex:0 0 auto;}
.v5faq[open]>summary::after{content:"\2212";}
.v5faq[open]>summary{border-bottom:1px solid #eef2ee;}
.v5faq .v5faq-a{padding:14px 20px 18px;color:#5a6b5a;font-size:14px;line-height:1.6;}
/* ⛔ 29.09.2026, багхант-2 (телефон): замер webkit 320/390, chromium 412/768. В статьях
/vitaminy-po-vozrastu-30-40-50/ (6 вопросов), /bazovyy-stek-dobavok-novichku/ и
/vitaminy-dlya-immuniteta-stek/ (по 5) «Частые вопросы» вписаны в текст статьи (в базе) голым
…
…
без класса — у .v5faq и у блоков с чужим классом свой вид; :where держит вес
(0,1,1), чтобы не перебить правила самих блоков. Сторож: bin/check-info-pages-css.php, СЕКЦИЯ-8. */
:where(.v5doc,.v5doc-faq,.single-post .wd-entry-content) details:not([class]){border:1px solid #e8efe8;border-radius:12px;margin:0 0 10px;background:#fff;}
:where(.v5doc,.v5doc-faq,.single-post .wd-entry-content) details:not([class])>summary{list-style:none;cursor:pointer;padding:12px 16px;min-height:44px;box-sizing:border-box;color:#1b3a1b;display:flex;justify-content:space-between;align-items:center;gap:12px;}
:where(.v5doc,.v5doc-faq,.single-post .wd-entry-content) details:not([class])>summary::-webkit-details-marker{display:none;}
:where(.v5doc,.v5doc-faq,.single-post .wd-entry-content) details:not([class])>summary::after{content:"+";color:#2e7d32;font-size:24px;font-weight:700;line-height:1;flex:0 0 auto;}
:where(.v5doc,.v5doc-faq,.single-post .wd-entry-content) details[open]:not([class])>summary::after{content:"\2212";}
:where(.v5doc,.v5doc-faq,.single-post .wd-entry-content) details[open]:not([class])>summary{border-bottom:1px solid #eef2ee;}
:where(.v5doc,.v5doc-faq,.single-post .wd-entry-content) details:not([class])>summary~*{padding:0 16px;margin:12px 0;}
.v5related{margin:34px 0 10px;padding:20px 22px;background:#f6f9f6;border:1px solid #e8efe8;border-radius:14px;}
.v5related h3{margin:0 0 12px;font-size:17px;color:#1b3a1b;}
.v5related ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px;}
.v5related li{margin:0;}
.v5related a{color:#2e7d32;text-decoration:none;font-weight:600;font-size:14px;line-height:1.4;}
.v5related a:hover{text-decoration:underline;}
@media(max-width:768px){.v5related ul{grid-template-columns:1fr;}}
/* Таблицы сравнения в статьях: на телефоне таблица шире колонки текста (770 px при 363 px),
колонки «Цена» и «Дозировка» вместе со ссылками на товар оставались за краем экрана,
а сдвинуть было нечем — ни у таблицы, ни у страницы прокрутки вбок не было. Правила для
таблиц в этом файле не было вовсе. Теперь на узких экранах сама таблица — полоса с
горизонтальной прокруткой, тень у края подсказывает, что её можно двигать, и гаснет,
когда двигать уже некуда. Таблицы, которые и так помещаются, не меняются.
24.09.2026: белая «шторка» (local) гасила тень (scroll) не до конца — сама начинала
светлеть с первого пикселя, и тень просвечивала: серые полосы по 18px у обоих краёв
таблицы, которую двигать некуда («Контакты», «Карточка организации»: 243 вместо 255
по яркости у края, webkit и chromium), и у левого края любой таблицы в начале.
Теперь шторка сплошная на ширину тени (18px) и светлеет на следующих 18px. */
@media(max-width:1024px){
.v5doc table,.single-post .wd-entry-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(46,125,50,.55) rgba(27,58,27,.08);background-image:linear-gradient(to right,#fff 18px,rgba(255,255,255,0)),linear-gradient(to left,#fff 18px,rgba(255,255,255,0)),linear-gradient(to right,rgba(27,58,27,.30),rgba(27,58,27,0)),linear-gradient(to left,rgba(27,58,27,.30),rgba(27,58,27,0));background-position:0 0,100% 0,0 0,100% 0;background-repeat:no-repeat;background-size:36px 100%,36px 100%,18px 100%,18px 100%;background-attachment:local,local,scroll,scroll;}
.v5doc table::-webkit-scrollbar,.single-post .wd-entry-content table::-webkit-scrollbar{-webkit-appearance:none;height:6px;}
.v5doc table::-webkit-scrollbar-track,.single-post .wd-entry-content table::-webkit-scrollbar-track{background:rgba(27,58,27,.08);border-radius:3px;}
.v5doc table::-webkit-scrollbar-thumb,.single-post .wd-entry-content table::-webkit-scrollbar-thumb{background:rgba(46,125,50,.55);border-radius:3px;}
}
/* ⛔ 29.09.2026, багхант-2 (телефон): замер /probiotiki-dlya-domashnih-zhivotnyh/ (пост 438261),
webkit 320/390/768, chromium 412. После нажатия на пункт оглавления (a[href="#section-N"],
7 из 7) заголовок h2#section-N вставал на top=0, а фиксированная шапка .whb-main-header
занимает 0–70: однострочный заголовок (низ 67) скрыт целиком, elementFromPoint в его
середине — поле поиска шапки; scroll-margin-top у заголовков статей не было вовсе. Отступ
как у .v5-blog-index__title в vita5-blog-index.php (90 на компьютере, у телефона 80 —
с запасом над шапкой 70). Только заголовки: в тексте статьи есть и li#menu-item-*.
Проба этим правилом, вставленным в живую страницу (80 px): заголовок на top=80,
elementFromPoint → H2, на webkit 320 и chromium 412.
Сторож: bin/check-info-pages-css.php, СЕКЦИЯ-9. */
.single-post .wd-entry-content :is(h2,h3,h4)[id]{scroll-margin-top:90px;}
@media(max-width:1024px){.single-post .wd-entry-content :is(h2,h3,h4)[id]{scroll-margin-top:80px;}}
/* 09.10.2026, багхант-8 (H6-06), телефон: прокрутка таблиц статей вбок с тенью у края (24.09) —
осознанное решение, остаётся. Но на /kakoy-kreatin-vybrat/ (320 px) таблица в 5 колонок
сжималась до min-content (599 px в окне 290): длинный текст в узкой скрытой колонке делал
строки по 200–300 px с одним-двумя словами в видимых ячейках, а на
/iherb-ili-vita5-gde-zakazyvat/ (390 px) при прокрутке к колонке «Vita5» уезжало, к какой
строке она относится. Теперь до 600 px у таблиц из 3+ колонок первая колонка (название
строки) приклеена к левому краю, а в таблицах из 4+ колонок ячейка не уже 140–220 px (100vw −
170: столько остаётся рядом с приклеенной колонкой, колонка видна целиком) — строки ниже,
текст читается. Только таблицы из текста статьи (в базе они без класса): у .v5gd-tbl,
.v5cmp-tbl и других таблиц плагинов своя раскладка. Фон приклеенной ячейки — фон страницы
(#faf8f5, .main-page-wrapper), у полосатых строк (полосы заданы в базе стилем строки,
tr style="background:#fafafa") — цвет строки: иначе прокручиваемый текст просвечивал бы
под ней. :has() не знают старые браузеры — там остаётся прежняя прокрутка.
Сторож: bin/check-guide-doc-mobile.py. */
@media(max-width:600px){
.single-post .wd-entry-content table:not([class]):has(tr>:nth-child(3)) tr>:first-child{position:sticky;left:0;z-index:1;background-color:#faf8f5;box-shadow:inset -1px 0 0 #e3ece0,6px 0 6px -6px rgba(27,58,27,.28);}
.single-post .wd-entry-content table:not([class]):has(tr>:nth-child(3)) tr[style*=background]>:first-child{background-color:inherit;}
.single-post .wd-entry-content table:not([class]):has(tr>:nth-child(4)) tr>:not(:first-child){min-width:clamp(140px,calc(100vw - 170px),220px);}
}
/* 09.10.2026, багхант-8 (H6-10), телефон: описания шагов /howto/ (.v5doc-step p) и карточек
/about/, /contact/ (.v5doc-card p) — 13–13,5 px серым, плашки «не возим» и примечания —
13–13,5 px. До 600 px текст абзацев 15 px, примечание 14 px; контраст и так ≥ 4,5:1.
Сторож: bin/check-guide-doc-mobile.py. */
@media(max-width:600px){
.v5doc-step p,.v5doc-card p,.v5doc-no{font-size:15px;}
.v5doc-note{font-size:14px;}
}