, и в меню
не было НИ ОДНОГО пути на страницу раздела: пункт сайдбара только
переключает панель, ссылки были лишь у подкатегорий. Покупатель не мог
дойти до раздела из меню, поисковик не видел ссылки на 11 посадочных
страниц. Вид оставлен прежним: подчёркивание и стрелка появляются на
наведении, чтобы заголовок не начал выглядеть чужеродно. */
/* margin-bottom: разделы БЕЗ ленты брендов (та несёт свой отступ снизу -
.catalog-brand-padding, margin-bottom:24px) иначе сидели вплотную к сетке
категорий сразу под заголовком. Разделам с брендами лишним не мешает -
просто чуть больше воздуха перед самой лентой.
*/
.catalog-content-header {
font-size: 36px;
font-weight: 700;
color: #222;
display: inline-flex;
align-items: baseline;
gap: 10px;
text-decoration: none;
margin-bottom: 16px;
}
.catalog-content-header:hover,
.catalog-content-header:focus-visible { color: var(--c-brand, #01a572); }
.catalog-col h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 16px;
color: #222;
}
/* Пункт — flex, а не block: при block перенос длинного названия начинался от
левого края и уезжал ПОД иконку («Аксессуары для / капельного полива»,
«Фильтры / и установки»). Во flex текст остаётся отдельным элементом, и
вторая строка встаёт под первой — висячий отступ вместо ступеньки.
flex-start, а не center: иконка садится на первую строку названия и не
ползёт к середине двухстрочного пункта. baseline здесь не годится — у
коробки иконки overflow скрыт, а такой элемент отдаёт под базовую линию
свой нижний край, и картинка проваливалась бы вниз. */
.catalog-col a {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 18px;
line-height: 1.35;
color: rgb(0 0 0 / 60%);
text-decoration: none;
margin-bottom: 14px;
transition: color .2s;
font-weight: 500;
}
.catalog-col a:hover {
color: #01A572;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ИКОНКА В КОРОБКЕ ПОСТОЯННОГО РАЗМЕРА.
Была КРУПНЕЕ названия (20px против 18px) и перетягивала внимание. 16px —
соседняя ступень шкалы: картинка читается, но подчинена тексту.
Коробка нужна из-за самого шрифта: ширина глифа при одной высоте гуляет
(замер по всем 141 иконке меню — медиана 15px). Три худших исходника
вылечены в самих SVG — им сдвинуто окно viewBox на узнаваемый фрагмент, и
ширина ячейки упала с 6.7em до 1.3em, — но КОНТУР в шрифте не обрезается:
остаток рисунка за пределами окна по-прежнему рисуется и без этой коробки
лёг бы поверх названия. Так что overflow здесь несущий, а не украшение.
Высота коробки равна строке названия, чтобы иконка села на ПЕРВУЮ строку
двухстрочного пункта, а не уехала к его середине. */
.catalog-item i {
font-size: 16px;
flex: 0 0 22px;
width: 22px;
height: calc(18px * 1.35);
overflow: hidden;
display: inline-flex;
align-items: center;
/* safe center делает ровно то, что нужно двум разным случаям одним
правилом: что влезает — центрируется, что не влезает — прижимается к
левому краю вместо того, чтобы вылезать поровну в обе стороны. У
обычного center широкий глиф обрезался с ОБЕИХ сторон и показывал
середину рисунка: у фильтра — сетку, у шланга — переход, понять по ним
ничего нельзя. Слева видно начало предмета: корпус фильтра, торец
ленты. */
justify-content: safe center;
}
/* 40 - Footer */
.footer {
width: 100%;
padding: 48px 20px 40px;
font-family: sans-serif;
background: #FBFBFB;
color: #1f1f1f;
box-sizing: border-box;
border-radius: 20px 20px 0 0;
border-top: 1px solid rgba(71, 71, 71, 0.20);
}
.footer-container {
max-width: 1900px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.footer-logo-link {
display: block;
margin-bottom: 12px;
}
.footer-logo img {
width: 200px;
height: auto;
}
/* Основная часть с навигацией */
.footer-main {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 32px 0;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
.footer-columns {
display: flex;
gap: 80px;
flex: 1;
}
.footer-col {
flex: 1;
min-width: 200px;
}
.footer-col h2 {
margin-top: 0;
color: #1f1f1f;
margin-bottom: 20px;
font-size: 18px;
font-weight: 600;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Зону 44px у ссылок подвала владелец отменил: пункты разъезжались. */
.footer-col li a {
font-weight: 500;
color: #474647;
/* `transition: 0.3s` без имени свойства - это тот же `all` (по умолчанию
transition-property = all). У ссылки подвала меняется только цвет. */
transition: color var(--zd-dur) var(--zd-ease);
}
.footer-line {
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
#999999 20%,
#999999 50%,
#999999 80%,
transparent 100%);
opacity: 0.3;
}
.footer-col li a:hover {
color: #01A572;
}
.footer-link {
color: #474647;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.3s ease;
display: block;
padding: 4px 0;
}
.footer-link:hover {
color: #01A572;
}
.footer-middle {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
flex-wrap: wrap;
}
.footer-social-section {
flex: 1;
min-width: 300px;
}
.footer-apps-section {
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.footer-social-title,
.footer-app-title {
margin-top: 0;
margin-bottom: 16px;
font-size: 22px;
font-weight: 600;
color: #1f1f1f;
}
.footer-social {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.footer-contact span {
color: #6b6b6b;
font-size: 12px;
}
.contact-link:hover {
color: #01A572;
}
.footer-contact p {
color: #474647;
}
.footer-social-bg {
padding: 12px 12px;
display: flex;
background-color: #01A572;
border-radius: 8px;
width: 50px;
justify-content: center;
}
.footer-social a {
cursor: pointer;
transition: transform 0.3s ease;
}
.footer-social a:hover {
transform: translateY(-3px);
}
.contact-link {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-social img {
width: 20px;
height: 20px;
}
.footer-contact {
font-weight: 600;
margin-top: 20px;
}
.footer-contact p {
font-size: 16px;
margin: 4px 0;
}
.footer-apps {
display: flex;
gap: 20px;
justify-content: flex-start;
}
.app-card {
position: relative;
border: 1px solid #47464617;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%) border-box;
padding: 24px;
-webkit-tap-highlight-color: transparent;
width: 100%;
text-align: center;
border-radius: 12px;
/* На наведении меняется только подъём (см. .app-card:hover) - `all` держал
под наблюдением ещё и два градиента в background. */
transition: transform var(--zd-dur) var(--zd-ease);
cursor: pointer;
}
.app-card:hover {
transform: translateY(-5px);
}
.app-card img {
width: 45px;
margin-bottom: 12px;
}
.app-card span {
font-weight: 700;
color: #474647;
font-size: 18px;
display: block;
}
.footer-bottom {
font-size: 14px;
color: #737373;
margin-top: 20px;
text-align: center;
font-weight: 500;
}
.footer-bottom p {
margin: 0;
}
/* 89.00 Адаптив только для Header Footer === */
@media (max-width: 1024px) {
/* body main — спецификация 0,0,0,2; перебивает page-css (product-page,
cart, catalog, categories), где переопределён `main {padding: 20px}`
базовым правилом без media-query, загруженным позже main.css */
body main {
padding-left: 12px;
padding-right: 12px;
}
/* Боковое поле страницы на узких экранах - 12px, и от этого же числа должны
считаться блоки, которые «вырываются» на всю ширину: карусель категорий,
полоса брендов, фото товара. Они брали отрицательный margin из
--container-padding, а та осталась 20px с десктопа, - в итоге каждый
вылезал за экран на 8px с каждой стороны (фото товара, со своим -15px, на
3px). Правится в одном месте: значение переменной, а не три хардкода.
Замер.
*/
:root {
--container-padding: 12px;
}
.search-icon {
color: #A8A8A8;
font-size: 23px;
flex-shrink: 0;
}
/* Для мобильной навигации */
.mobile-nav .nav-count {
top: 3px;
right: -9px;
}
.search__input {
transform: translateZ(0);
-webkit-appearance: none;
appearance: none;
}
@supports (-webkit-touch-callout: none) {
.search__input {
line-height: 1.4;
}
}
/* Основные правила для всех текстовых полей */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
touch-action: manipulation;
/* Предотвращаем выделение текста при фокусе */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Фокус-стейт для всех текстовых полей.
* БЫЛО (до): это правило называлось «фокус-стейт», а на деле СНИМАЛО всякий
* признак фокуса — outline:none !important + box-shadow:none !important на
* каждом текстовом поле сайта. Из-за !important оно перебивало даже
* собственные кольца оформления заказа (.co-input:focus в cart.css), и
* человек, идущий по форме с клавиатуры, не видел, где находится. Замерено:
* поле в фокусе отдавало outlineStyle:none и boxShadow:none. Это провал WCAG
* 2.4.7 (Focus Visible) на всей витрине, включая чекаут.
*
* СТАЛО: гасим кольцо только для указателя (:focus:not(:focus-visible)) —
* ровно то, ради чего правило вводилось, клик мышью не «загорается». Для
* клавиатуры (:focus-visible) кольцо есть всегда. !important снят: он мешал
* компонентам рисовать собственный фокус.
*/
input[type="text"]:focus:not(:focus-visible),
input[type="search"]:focus:not(:focus-visible),
input[type="email"]:focus:not(:focus-visible),
input[type="tel"]:focus:not(:focus-visible),
input[type="number"]:focus:not(:focus-visible),
input[type="password"]:focus:not(:focus-visible),
input[type="url"]:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
outline: none;
-webkit-user-modify: read-write-plaintext-only;
}
/* Специально для iOS Safari - предотвращает зум при фокусе */
@supports (-webkit-overflow-scrolling: touch) {
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
font-size: max(16px, 1rem);
line-height: normal;
}
}
/* Для Android Chrome и браузеров на WebKit */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
-webkit-text-size-adjust: 100%;
}
}
/* Только для мобильных устройств (iOS и Android) */
@media (hover: none) and (pointer: coarse) {
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
/* Убираем все интерактивные эффекты */
-webkit-user-select: none;
user-select: none;
cursor: default;
}
/* При фокусе активируем возможность ввода */
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
textarea:focus {
-webkit-user-select: text;
user-select: text;
}
}
.header__nav-item:not(:first-child) {
opacity: 1;
}
.header__nav-item:hover {
transform: none;
}
.icon-search:before {
color: #A8A8A8;
}
.account-img{
display: block;
}
.header__catalog {
display: none;
}
.header.hide {
transform: none;
}
.desktop-nav {
display: none;
}
.header__account i {
display: block;
}
/* Зазор между логотипом, поиском и аккаунтом. 12px на 375px съедали 24px
из 351 доступных, и поле поиска обрывало плейсхолдер на «Ищите семена или
х». 8px - минимум, при котором иконки не сливаются; зона нажатия у
аккаунта остаётся своими 44px, её отдавать нельзя.
*/
.header__top {
gap: 8px;
}
.search {
width: 100%;
max-width: 100%;
/* min-width:0 - ИНАЧЕ КНОПКА АККАУНТА УЕЗЖАЕТ ЗА ЭКРАН.
Flex-элемент по умолчанию не сжимается ниже ширины своего содержимого
(min-width:auto), а внутри поиска поле ввода со своей минимальной шириной.
На 344px шапка не помещалась, и «лишним» оказывался последний элемент
ряда: замер показал .account-img за правым краем на 48px - кнопки входа не
было видно вовсе. Ноль разрешает поиску отдать место.
*/
min-width: 0;
flex: 1 1 auto;
}
/* Логотип, кнопка каталога и аккаунт своей ширины не отдают - сжимается
только поиск. Иначе flex начнёт резать иконки, а зона нажатия у аккаунта
обязана остаться 44px. */
.header__logo,
.header__catalog,
.account-img {
flex: 0 0 auto;
}
/* min-width:0 ЕЩЁ РАЗ - на ВЛОЖЕННЫХ флекс-элементах. Фикс выше снял
min-width только с .search, но .search__wrapper и .search__input - тоже
флекс-элементы (первый flex-ребёнок .search, второй - вложенный ребёнок
самой .search__wrapper), и каждый со своим default min-width:auto. .search
снаружи честно сжался до 201px, а .search__input внутри при font-size:16px
(обязателен против зума на iOS) требовал под плейсхолдер «Ищите семена или
химию?» не меньше 225px и это игнорировал - переливался за свою же обёртку
на 23px и закрашивал иконку аккаунта собственным фоном. Кнопка при этом
оставалась НА МЕСТЕ (44×44, все computed-стили верные) - её просто
рисовало под полем ввода. Ровно тот же класс бага, что и у внешнего
.search, но уровнем глубже - один min-width:0 не размножается на потомков
сам.
*/
.search__wrapper {
height: 45px;
min-width: 0;
}
.search__input {
min-width: 0;
}
.search__input {
font-size: 14px;
padding: 0 12px;
}
/* 60px под одну иконку лупы - это 30px пустоты по бокам от неё, и ровно их
не хватало плейсхолдеру: на 375px он обрывался на «Ищите семена или х».
46px - иконка 24px плюс по 11px воздуха; высота кнопки (45px у
.search__wrapper) порога нажатия не теряет. */
.search__btn {
width: 46px;
}
/* Mobile Navigation */
.mobile-nav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
justify-content: space-around;
align-items: flex-start;
box-sizing: border-box;
height: calc(65px + var(--zd-nav-lift));
padding-bottom: var(--zd-nav-lift);
background-color: #fff;
border-top: 0.5px solid #DBDBDB;
z-index: 999;
}
/* Общие стили пунктов мобильной навигации */
.header__nav-item {
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 14px;
font-weight: 500;
height: 65px;
/* Было #A8A8A8 - контраст к белому 2.4:1 при норме WCAG AA 4.5:1. Это
нижнее меню, то есть ОСНОВНАЯ навигация телефона, и покупателю 40-65+
подписи под иконками просто не читались. #616161 даёт 5.9:1 и остаётся
заметно светлее ink, то есть иерархия «подпись слабее заголовка»
сохраняется. Замер.
*/
color: #616161;
}
.mobile-nav .header__nav-item:nth-child(2) i {
width: auto;
}
.mobile-nav i {
font-size: 23px;
}
/* Активная вкладка — подсветка зелёным брендовым */
.mobile-nav .header__nav-item.is-active,
.mobile-nav .header__nav-item.is-active i {
color: #01A572;
}
.search__wrapper {
padding: 0px;
background-color: #DCDCDC;
}
.search__input,
.search__btn {
background-color: #F0F0F0;
}
.search__btn{
background-color: #F0F0F0;
}
.search__icon {
color: #A8A8A8;
width: 25px;
height: 25px;
}
.footer-top {
gap: 32px;
}
.footer-columns {
gap: 32px;
}
.footer-col {
min-width: 180px;
}
.footer-middle {
gap: 32px;
}
}
@media (max-width: 992px) {
.header{
padding: 0 12px;
}
.comparison-title {
font-size: 22px;
}
.slider-wrapper-outer {
max-width: 90vw;
padding: 0 20px;
}
.card-item {
min-width: 80vw;
padding: 16px;
flex-direction: column;
text-align: center;
align-items: center;
gap: 12px;
}
.card-icon {
margin-bottom: 4px;
}
.separator {
display: block;
border: 0;
border-top: 1px solid #dee2e6;
margin: 40px auto;
width: 100%;
max-width: 300px;
}
.search {
width: 100%;
max-width: 100%;
}
.search__wrapper {
height: 45px;
}
.search__input {
font-size: 14px;
padding: 0 12px;
}
/* 60px под одну иконку лупы - это 30px пустоты по бокам от неё, и ровно их
не хватало плейсхолдеру: на 375px он обрывался на «Ищите семена или х».
46px - иконка 24px плюс по 11px воздуха; высота кнопки (45px у
.search__wrapper) порога нажатия не теряет. */
.search__btn {
width: 46px;
}
}
/* === Мобильные устройства (max-width: 768px) === */
@media (max-width: 768px) {
.header__account i{
font-size: 30px;
}
/* Header */
.header {
align-items: stretch;
gap: 8px;
}
.header__logo img {
height: 50px;
}
.mobile-nav {
height: calc(65px + var(--zd-nav-lift));
border-top: 1px solid #DBDBDB;
}
.header__nav-item {
/* 12 -> 13px и #A8A8A8 -> #616161 (2.4:1 -> 5.9:1). Подпись под иконкой -
единственное, что объясняет пункт нижнего меню; на 12px светло-серым
покупателю 40-65+ она не читалась. Замер.
*/
font-size: 13px;
color: #616161;
}
/* Каталог на мобильных */
.catalog-panel {
flex-direction: column;
/* dvh рядом с vh - см. .zd-packing-panel ниже: на телефоне vh больше
видимой высоты на высоту адресной строки, и низ панели срезается. */
max-height: 85vh;
max-height: 85dvh;
top: 70px;
height: 85vh;
height: 85dvh;
}
.catalog-sidebar {
width: 100%;
min-width: 100%;
border-right: none;
border-bottom: 1px solid #D4D4D4;
padding: 16px;
max-height: 200px;
overflow-y: auto;
}
.catalog-content {
padding: 16px;
overflow-y: auto;
}
.catalog-sidebar li {
padding: 12px 16px;
font-size: 14px;
}
.catalog-icons {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 16px;
padding: 4px;
}
.catalog-icons a {
padding: 16px 12px;
}
.catalog-icons i {
font-size: 28px;
margin-bottom: 8px;
}
.catalog-icons span {
font-size: 14px;
}
/* Footer */
.footer-bottom {
text-align: left;
}
.footer {
padding: 32px 16px 100px;
}
.footer-top {
flex-direction: column;
gap: 24px;
}
.footer-columns {
width: 100%;
justify-content: space-between;
gap: 32px;
}
.footer-col {
min-width: 160px;
flex: 1;
}
.footer-col h2 {
font-size: 18px;
}
.footer-col li {
font-size: 14px;
}
.footer-middle {
flex-direction: column;
gap: 32px;
}
.footer-social-section,
.footer-apps-section {
min-width: 100%;
align-items: flex-start;
}
.footer-apps {
width: 100%;
justify-content: flex-start;
}
.footer-social-title,
.footer-app-title {
font-size: 18px;
}
}
/* === Мобильные устройства (max-width: 425px) === */
@media (max-width: 425px) {
/* Header */
.header {
padding: 16px 12px 0px 12px;
/* Было height:auto - и шапка занимала 68px, пока планка фильтров
держалась за 80px: между ними висела пустая полоса 12px. Теперь
высота задана тем же токеном, что читает планка, и разъехаться им
нечем. Значение токена на этой ширине равно прежней фактической
высоте, так что содержимое шапки не поджимается. */
height: var(--zd-header-h);
}
.header__logo img {
height: 45px;
}
.search {
width: 100%;
max-width: 100%;
margin-right: 0px;
}
/* 44px, а не 40: это самый узкий экран, то есть ровно тот случай, ради
которого правило зоны нажатия и заведено - палец, а не мышь. Замер 21.09
на 375px: обёртка 40px, значит и поле, и кнопка лупы (height:100%) были
40px. Комментарий в блоке 992px обещал 45px и врал - его перебивало
отсюда. */
.search__wrapper {
height: 44px;
}
/* 16px обязательны: Safari на iPhone зумит страницу при фокусе в поле с
меньшим шрифтом и обратно не возвращает. */
.search__input {
font-size: 16px;
}
.search__btn {
width: 45px;
}
.header__account i {
font-size: 26px;
}
.header__catalog {
display: none;
}
/* Каталог на маленьких экранах */
.catalog-icons {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 12px;
}
.catalog-icons a {
padding: 12px 8px;
}
.catalog-icons i {
font-size: 24px;
}
.catalog-icons span {
font-size: 12px;
}
.catalog-sidebar li {
padding: 12px 12px;
gap: 12px;
font-size: 14px;
}
.catalog-sidebar li i {
font-size: 24px;
min-width: 24px;
}
/* Mobile Navigation */
.mobile-nav {
height: calc(60px + var(--zd-nav-lift));
z-index: 999;
}
.header__nav-text {
/* Была ещё одна ступень вниз (12px на 425px) поверх 13px выше - на Pixel 7
срабатывала именно она. Держим 13px до самых узких экранов: подпись в
нижнем меню и так на пределе читаемости. Замер.
*/
font-size: 13px;
}
.header__nav-item img {
width: 20px;
height: 20px;
}
}
/* === Мобильные устройства (max-width: 380px) === */
@media (max-width: 380px) {
/* Footer */
.footer {
padding: 20px 8px 80px;
}
.footer-logo {
width: 160px;
}
.footer-columns {
flex-direction: row;
gap: 12px;
}
.footer-col {
min-width: 48%;
}
.footer-col h2 {
font-size: 14px;
}
.footer-col li {
font-size: 14px;
}
}
/* ============================================ */
/* FAQ ВОПРОС-ОТВЕТ */
/* ============================================ */
.faq {
max-width: 1200px;
margin: 0 auto;
padding: 48px 0;
}
.faq-title {
text-align: center;
font-size: 2.3rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 40px;
color: #1f1f1f;
}
.faq-item {
background: #ffffff;
border-radius: 12px;
margin-bottom: 16px;
overflow: hidden;
border: 2px solid #e6e6e6;
transition: border-color 0.3s ease;
}
.faq-item.active {
border-color: #01A572;
}
.faq-question {
width: 100%;
padding: 16px 20px;
background: #ffffff;
border: none;
font-size: 1.2rem;
font-weight: 700;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
color: #1f1f1f;
transition: background-color 0.3s ease;
}
.faq-question:hover {
background-color: #f8f9fa;
}
.faq-icon {
font-size: 1.5rem;
font-weight: 300;
color: #1f1f1f;
/* Плюс поворачивается в крестик (.faq-item.active .faq-icon) - анимируем
поворот и цвет, а не «всё». */
transition: transform var(--zd-dur) var(--zd-ease),
color var(--zd-dur) var(--zd-ease);
margin-left: 20px;
min-width: 20px;
text-align: center;
}
.faq-item.active .faq-icon {
transform: rotate(45deg);
color: #01A572;
font-weight: 500;
}
.faq-answer {
max-height: 0;
overflow: hidden;
background: linear-gradient(151deg, #01855b 0%, #01A572 100%);
transition: max-height 0.4s ease;
}
.faq-item.active .faq-answer {
max-height: 500px;
}
.faq-answer p {
margin: 0;
padding: 20px;
color: #ffffff;
font-weight: 500;
font-size: 1.1rem;
line-height: 1.6;
}
@media (max-width: 1024px) {
.faq-title {
font-size: 2rem;
margin-bottom: 32px;
}
}
@media (max-width: 480px) {
.faq-title {
font-size: 1.3rem;
}
}
/* ════════════════════════════════════════════════════════════════════════════
AUTOCOMPLETE DROPDOWN (был в search.css — нужен на каждой странице с поиском)
════════════════════════════════════════════════════════════════════════════ */
/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
--clr-green: #01A572;
--clr-green-lt: #01c989;
--clr-green-pale: #e6f7f0;
--clr-accent: #ff6f00;
--clr-text: #1a1a1a;
--clr-muted: #6b7280;
--clr-border: #c4c4c4; /* было #e0e0e0 - контраст ~1.25:1, границы почти не видны */
--clr-bg: #f9fafb;
--clr-white: #ffffff;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--shadow-sm: 0 2px 8px rgba(0,0,0,.08);
--shadow-md: 0 4px 20px rgba(0,0,0,.12);
/* --transition ЗДЕСЬ НЕ ОБЪЯВЛЯТЬ. В самом main.css её не читал никто,
зато она перебивала одноимённые переменные info-pages.css и blog.css: те
файлы подключаются РАНЬШЕ main.css, и в каскаде побеждало это значение.
Инфо-страницы из-за этого молча получали чужие 0.18s вместо своих правил,
а после перевода их переходов на список свойств правка просто не доезжала
до экрана. Общие длительности живут в tokens.css (--zd-dur*).
*/
}
/* ════════════════════════════════════════════════════════════════════════════
AUTOCOMPLETE DROPDOWN
════════════════════════════════════════════════════════════════════════════ */
/* Loading spinner on form */
.search--loading { position: relative; }
.search--loading::after {
content: '';
position: absolute;
right: 12px;
top: 50%;
width: 16px;
height: 16px;
border: 1.5px solid var(--clr-border);
border-top-color: var(--clr-green);
border-radius: 50%;
animation: zdSpin .7s linear infinite;
pointer-events: none;
z-index: 10;
}
@keyframes zdSpin {
from { transform: translateY(-50%) rotate(0deg); }
to { transform: translateY(-50%) rotate(360deg); }
}
/* Dropdown container */
.search-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--clr-white);
border: 1px solid var(--clr-border);
border-radius: var(--zd-r-md);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
z-index: 1000;
overflow: hidden;
max-height: 70vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Sections */
.search-dd-section {
padding: 12px 16px 8px;
border-bottom: 1px solid var(--clr-border);
}
.search-dd-section:last-child { border-bottom: none; }
.search-dd-label {
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--clr-muted);
margin-bottom: 12px;
}
/* Popular pills */
.search-dd-popular {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.search-dd-pill {
background: transparent;
color: var(--clr-text);
border: 1px solid var(--clr-border);
border-radius: 20px;
padding: 4px 16px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
line-height: 1.4;
transition: border-color var(--zd-dur) var(--zd-ease), color var(--zd-dur) var(--zd-ease);
}
.search-dd-pill:hover,
.search-dd-pill.search-dd-focused {
border-color: var(--clr-green);
color: var(--clr-green);
}
/* History items */
.search-dd-history { display: flex; flex-direction: column; gap: 2px; }
.search-dd-hist-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 8px;
border-radius: var(--zd-r-sm);
transition: background var(--zd-dur) var(--zd-ease);
}
.search-dd-hist-item:hover { background: var(--clr-bg); }
.search-dd-hist-text {
font-size: 14px;
color: var(--clr-text);
cursor: pointer;
flex: 1;
}
.search-dd-hist-text.search-dd-focused {
text-decoration: underline;
color: var(--clr-green);
}
.search-dd-hist-remove {
background: none;
border: none;
color: var(--clr-muted);
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 0 4px;
flex-shrink: 0;
transition: color var(--zd-dur) var(--zd-ease);
}
.search-dd-hist-remove:hover { color: var(--clr-text); }
/* "Did you mean" hint */
.search-dd-hint {
padding: 12px 16px;
font-size: 12px;
color: var(--clr-muted);
border-bottom: 1px solid var(--clr-border);
cursor: pointer;
transition: background var(--zd-dur) var(--zd-ease);
}
.search-dd-hint:hover,
.search-dd-hint.search-dd-focused { background: var(--clr-bg); }
.search-dd-hint strong { color: var(--clr-green); }
/* Product result items */
.search-dd-results { display: flex; flex-direction: column; }
.search-dd-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
text-decoration: none;
color: var(--clr-text);
transition: background var(--zd-dur) var(--zd-ease);
outline: none;
}
.search-dd-item:hover,
.search-dd-item:focus,
.search-dd-item.search-dd-focused { background: var(--clr-bg); }
.search-dd-img {
width: 52px;
height: 52px;
/*
* cover, а не contain. Товарное фото — не логотип: у логотипов контур важнее
* площади, поэтому им контур (contain), а фото товара растягивается на весь
* бокс без полей, тот же приём, что и на плитках каталога (.hot-img-box img,
* css/card.css). Обрезка по краям квадратной миниатюры 52×52 не мешает
* узнать товар, а пустая рамка вокруг - мешала.
*/
object-fit: cover;
border-radius: var(--zd-r-sm);
border: 1px solid var(--clr-border);
flex-shrink: 0;
background: var(--clr-bg);
}
/* ── Скелетон строки подсказки ──────────────────────────────────────────
Пока идёт запрос, выпадающий список был ПУСТ при первом вводе и держал
прошлые товары при повторном. Заглушка повторяет .search-dd-item
один-в-один (картинка 52×52 + две строки текста), поэтому список не
прыгает по высоте, когда она сменяется товарами.
Шиммер — общий .skel из начала файла, своей анимации не заводим: он уже
гасится при prefers-reduced-motion.
Не ссылка и не кликается: у заглушки нет href, а курсор и подсветку
строки снимаем явно — иначе она приглашает нажать на пустоту. */
.search-dd-item--skel {
cursor: default;
pointer-events: none;
}
.search-dd-item--skel .search-dd-info {
display: flex;
flex-direction: column;
gap: var(--zd-space-2, 8px);
flex: 1;
min-width: 0;
}
.search-dd-item--skel .skel-line {
height: 12px;
border-radius: var(--zd-r-xs, 4px);
}
/* Две разные длины: одинаковые плашки читаются как таблица, а не как
«название и цена под ним». */
.search-dd-item--skel .skel-line--title { width: 72%; }
.search-dd-item--skel .skel-line--meta { width: 38%; }
.search-dd-img--placeholder {
background: var(--clr-bg);
display: block;
}
.search-dd-info { flex: 1; min-width: 0; }
.search-dd-title {
font-size: 14px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.search-dd-title mark {
background: none;
color: var(--clr-green);
font-weight: 500;
}
/* flex-wrap: строка меты переносится. На телефоне под неё остаётся около 90px,
и бренд с ценой не помещались там даже вдвоём (замер на 375px: нужно 110px,
есть 93) - лишнее просто уезжало за край. С подписью «Ждём поступления» тем
более. Переносим, а не режем: обрезанная цена хуже второй строки. */
.search-dd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12px; }
/* Имя бренда ужимается многоточием, а цена и наличие - нет: в справочнике
встречаются длинные строки вроде «united-genetics United Genetics», которые
не переносятся по пробелу целиком и выталкивали цену за край строки. */
.search-dd-brand {
color: var(--clr-muted);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-dd-price { color: var(--clr-green); font-weight: 600; }
/* «Цена договорная» серым, а не фирменным зелёным: зелёный означает цифру,
которую платят. Тот же #616161, что в карточке, избранном и сравнении. */
.search-dd-price--contract { color: #616161; white-space: nowrap; }
/* ── Позиция без наличия в подсказке поиска ──────────────────────────────
Позиция «Ждём поступления» в поиске серая. Приглушаем тем же способом, что плитку каталога
(.hot-card--out в product-page.css): фото обесцвечено, текст ослаблен.
Ссылка при этом рабочая - карточку открыть можно, там кнопка «Уведомить». */
.search-dd-item--out .search-dd-img {
filter: grayscale(0.7) brightness(0.92);
opacity: 0.75;
}
.search-dd-item--out .search-dd-title,
.search-dd-item--out .search-dd-brand,
.search-dd-item--out .search-dd-price {
opacity: 0.6;
}
/* Подпись НЕ приглушаем вместе с остальным: она единственная объясняет, почему
строка серая, и должна остаться читаемой. */
.search-dd-stock {
color: #616161;
font-weight: 600;
white-space: nowrap;
}
.search-dd-arrow {
position: relative;
width: 14px;
height: 14px;
flex-shrink: 0;
font-size: 0;
color: transparent;
opacity: 0;
transition: opacity var(--zd-dur) var(--zd-ease);
}
.search-dd-arrow::before {
content: "";
position: absolute;
top: 50%;
right: 4px;
width: 6px;
height: 6px;
border-top: 1.5px solid var(--clr-green);
border-right: 1.5px solid var(--clr-green);
transform: translateY(-50%) rotate(45deg);
}
.search-dd-item:hover .search-dd-arrow,
.search-dd-item.search-dd-focused .search-dd-arrow { opacity: 1; }
/* "Show all" link */
.search-dd-all {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: var(--clr-green);
text-decoration: none;
background: transparent;
border-top: 1px solid var(--clr-border);
transition: color var(--zd-dur) var(--zd-ease);
}
.search-dd-all:hover,
.search-dd-all.search-dd-focused { color: var(--clr-green-lt); }
.search-dd-all-arrow {
position: relative;
width: 10px;
height: 10px;
display: inline-block;
}
.search-dd-all-arrow::before {
content: "";
position: absolute;
top: 50%;
right: 2px;
width: 6px;
height: 6px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
/* Empty message */
.search-dd-empty {
padding: 20px 16px;
text-align: center;
font-size: 12px;
color: var(--clr-muted);
}
/* ============================================================
SEO content block — для категорийных и листинговых страниц.
Стиль соответствует .info-zeldom-modern на главной:
светлая плашка, скруглённые углы, акцент-полоса слева,
аккуратная типографика, ссылки и буллеты в брендовом зелёном.
============================================================ */
/* КОНТРАСТ SEO-БЛОКА. Было #7a7a7a (4.3:1) для текста и #888 (3.5:1) для
заголовков - оба ниже нормы WCAG AA 4.5:1, а это самый длинный текст на
странице. Аудитория 40-65+: светло-серый по белому такая аудитория не
читает. Стало #616161 (5.9:1) и #4A4A4A (8.6:1). Замер.
*/
.seo-block {
max-width: 1500px;
margin: 240px auto 0;
padding: 32px 40px;
background: transparent;
border-top: 1px solid #e0e0e0;
position: relative;
color: #616161;
/* 14px, а не 13.5: минимум по сайту для аудитории 40-65+. Контраст здесь
чинили, а кегль остался ниже нормы - самый длинный текст страницы. */
font-size: 14px;
line-height: 1.7;
box-sizing: border-box;
}
.seo-block::before {
display: none;
}
.seo-block h2 {
/* Крупнее текста: при 14px заголовок был неотличим от абзаца. */
font-size: 17px;
font-weight: 600;
color: #4A4A4A;
margin: 0 0 12px;
letter-spacing: 0;
line-height: 1.3;
}
.seo-block > p:first-of-type {
font-size: 14px;
color: #616161;
margin: 0 0 16px;
max-width: 1000px;
}
.seo-block h3 {
font-size: 15px;
font-weight: 600;
color: #4A4A4A;
margin: 20px 0 8px;
letter-spacing: 0;
}
.seo-block p {
margin: 0 0 12px;
}
.seo-block ul {
margin: 8px 0 16px;
padding: 0;
list-style: none;
}
.seo-block ul li {
position: relative;
padding-left: 20px;
margin-bottom: 8px;
}
.seo-block ul li::before {
content: "";
position: absolute;
left: 4px;
top: 9px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #aaa;
}
.seo-block a {
color: #616161;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
transition: color .2s ease;
}
.seo-block a:hover {
color: #444;
border-bottom-color: #4A4A4A;
}
.seo-block strong {
color: #666;
font-weight: 600;
}
@media (max-width: 1024px) {
.seo-block {
margin: 180px 16px 0;
padding: 24px 0;
}
}
@media (max-width: 768px) {
/* Кегли подняты. Здесь лежит самый длинный связный текст на
странице - описание раздела, - и читали его 12px основным, 13px первым
абзацем и 14px заголовком. Покупателям 40-65+ (основная аудитория) это
нечитаемо: телефон приходится держать у самых глаз. Взяты соседние ступени
шкалы 12/14/16/18/22/28/36.
*/
.seo-block {
margin: 120px 12px 0;
padding: 20px 0;
font-size: 16px;
line-height: 1.65;
}
.seo-block h2 { font-size: 22px; }
.seo-block h3 { font-size: 18px; margin: 14px 0 6px; }
.seo-block > p:first-of-type { font-size: 16px; margin-bottom: 14px; }
.seo-block ul li { padding-left: 16px; }
.seo-block ul li::before { left: 2px; top: 8px; width: 4px; height: 4px; }
}
/* ============================================================
BRAND-LANDINGS — ссылки на SEO-лендинги "категория+бренд"
(миграция 053, category.php). Настоящие , не чекбоксы
панели фильтров рядом - нужны краулеру, не только покупателю.
============================================================ */
.brand-landings {
max-width: 1500px;
margin: 32px auto 0;
padding: 0 40px;
box-sizing: border-box;
}
.brand-landings h2 {
font-size: 14px;
font-weight: 600;
color: #888;
margin: 0 0 12px;
}
.brand-landings__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.brand-landings__link {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid #e0e0e0;
color: #444;
font-size: 13px;
text-decoration: none;
transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.brand-landings__link:hover {
border-color: var(--zd-brand);
color: var(--zd-brand-ink);
background: #f0faf6;
}
@media (max-width: 768px) {
.brand-landings { margin: 24px 12px 0; padding: 0; }
}
/* ============================================================
FOOTER — компактная версия (раньше жила inline в index.html). Перенесена в
main.css чтобы применяться на ВСЕХ страницах автоматически (card.html,
cart.html, info/* etc).
============================================================
*/
/* Десктоп */
@media (min-width: 769px) {
.footer { padding: 36px 28px 24px; border-radius: 24px 24px 0 0; }
.footer-container { gap: 16px; max-width: 100%; }
.footer-top { padding: 18px 0; }
.footer-columns { gap: 60px; }
.footer-col h2 { font-size: 15px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #1f1f1f; }
.footer-col ul { gap: 8px; }
.footer-col li, .footer-col li a { font-size: 14px; line-height: 1.4; }
/* flex-wrap: wrap чтобы на промежуточных ширинах (768-1200px) apps-section
уезжал на новую строку, а не прятался за правый край */
.footer-middle { gap: 16px 24px; align-items: center; padding: 12px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; flex-wrap: wrap; }
.footer-social-section { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-social-title { font-size: 14px; margin: 0; color: #6b6b6b; font-weight: 500; }
.footer-social { gap: 10px; }
.footer-social-bg { width: 38px; padding: 8px; border-radius: 8px; }
.footer-social-bg svg { width: 18px; height: 18px; }
/* Compact-вариант (новая разметка с .ct-city). Только под модификатор —
старая разметка (.footer-contact без --compact) сохраняет блочный layout
и не ломается на промежуточных ширинах. */
/* Apps теперь sibling of .footer-social внутри .footer-social-section.
В строке: [Наши соцсети][icons] ........ [apps],
контакты уезжают на 2-ю строку через flex-basis: 100%. */
.footer-social-section .footer-apps-section { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-left: auto; }
.footer-apps-section { flex: 0 0 auto; min-width: auto; display: flex; align-items: center; gap: 12px; }
.footer-app-title { display: none; }
.footer-contact--compact { margin-top: 0; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-weight: 500; flex-basis: 100%; }
.footer-contact--compact p { margin: 0; font-size: 14px; display: flex; gap: 6px; align-items: baseline; }
.footer-contact--compact .ct-city { font-size: 13px; color: #616161; font-weight: 500; }
.footer-apps { gap: 8px; flex-direction: row; }
.app-card { padding: 8px 12px; display: flex; align-items: center; gap: 8px; text-align: left; border-radius: 8px; background: #1f1f1f; border: none; transition: opacity .2s; }
.app-card:hover { opacity: 0.85; transform: none; }
.app-card svg { width: 16px; height: 18px; flex-shrink: 0; }
.app-card svg path { fill: #fff; }
.app-card span { font-size: 12px; color: #fff; font-weight: 600; margin: 0; }
.footer-logo img { width: 150px; }
.footer-bottom { font-size: 14px; color: #616161; margin-top: 4px; }
}
/* Планшеты + узкий десктоп — на ВСЕХ страницах .mobile-nav (65px) фиксирован
снизу при viewport ≤1024px. Чтобы копирайт/политики не уезжали под него —
запас 90px к нижнему padding футера. */
@media (max-width: 1024px) {
.footer { padding-bottom: calc(90px + var(--zd-nav-lift)); }
/* На card.html и cart.html помимо .mobile-nav ещё .mobile-checkout-btn (~95px),
поэтому запас увеличиваем до 170px. */
body:has(.mobile-checkout-btn) .footer { padding-bottom: calc(170px + var(--zd-nav-lift)); }
}
/* Мобайл */
@media (max-width: 768px) {
.footer { padding: 24px 14px calc(90px + var(--zd-nav-lift)); border-radius: 18px 18px 0 0; }
.footer-container { gap: 14px; max-width: 100%; }
.footer-logo img { width: 120px; }
.footer-top { padding: 14px 0; gap: 18px; }
.footer-columns { gap: 20px; }
.footer-col h2 { font-size: 16px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.footer-col ul { gap: 6px; }
/* 13 -> 15px: ссылки футера - это разделы сайта, а не сноска. Аудитория
40-65+, кегли ниже 14px на телефоне не читаются. */
.footer-col li, .footer-col li a { font-size: 15px; line-height: 1.5; }
.footer-middle { gap: 14px; padding: 14px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; }
.footer-social-section { min-width: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-social-title { font-size: 15px; margin: 0; color: #616161; font-weight: 500; }
.footer-social { gap: 8px; }
.footer-social-bg { width: 36px; padding: 7px; border-radius: 8px; }
.footer-social-bg svg { width: 16px; height: 16px; }
.footer-contact--compact { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.footer-contact--compact p { margin: 0; font-size: 15px; display: flex; gap: 6px; align-items: baseline; }
/* Футер на телефоне: было 11-12px цветом #999 - контраст 2.8:1 при норме
4.5:1, и это самый мелкий текст на сайте. Город рядом с телефоном
покупатель 40-65+ не разбирал вовсе. #616161 даёт 5.9:1. Замер.
*/
.footer-contact--compact .ct-city { font-size: 14px; color: #616161; font-weight: 500; min-width: 62px; }
/* Apps mobile — маленькие пилюли в ряд, всегда последние внутри social-section
(order: 2 переносит их под контакты независимо от DOM-порядка) */
.footer-apps-section { min-width: auto; align-items: flex-start; margin-top: 4px; order: 2; }
.footer-social-section { flex-direction: column; align-items: stretch; }
.footer-app-title { display: none; }
.footer-apps { gap: 8px; flex-direction: row; flex-wrap: wrap; }
.app-card { padding: 7px 10px; display: flex; align-items: center; gap: 6px; border-radius: 8px; background: #1f1f1f; border: none; flex: 0 1 auto; }
.app-card:hover { transform: none; }
.app-card svg { width: 14px; height: 16px; flex-shrink: 0; }
.app-card svg path { fill: #fff; }
.app-card span { font-size: 11px; color: #fff; font-weight: 600; margin: 0; }
.footer-bottom { font-size: 14px; color: #616161; margin-top: 4px; line-height: 1.5; }
}
/* Узкие телефоны: колонки в одну */
@media (max-width: 480px) {
.footer-columns { flex-direction: column; gap: 14px; }
.footer-col { min-width: 100%; flex: none; }
}
/* ============================================================
FAQ-блок (общий для всех публичных страниц).
Изначальные стили были в card.css — перенесены сюда чтобы блок
работал на любой странице, не только на карточке товара.
JS-управление .active классом — в js/catalog.js (initFAQ).
============================================================ */
.faq-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 12px;
color: #1f1f1f;
}
.faq-sub {
text-align: center;
font-size: 14px;
color: #6b7280;
margin: 0 0 48px;
line-height: 1.5;
}
.faq-sub a {
color: #01A572;
font-weight: 600;
text-decoration: none;
}
.faq-sub a:hover { text-decoration: underline; }
.faq-item {
background: #fff;
border-radius: 12px;
margin-bottom: 16px;
overflow: hidden;
border: 2px solid #e0e0e0;
transition: border-color var(--zd-dur) var(--zd-ease);
}
.faq-item.active { border-color: #01A572; }
.faq-question {
width: 100%;
padding: 20px 20px;
background: #fff;
border: none;
font-size: 1.2rem;
font-weight: 700;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
color: #1f1f1f;
transition: background var(--zd-dur) var(--zd-ease),
color var(--zd-dur) var(--zd-ease);
}
.faq-question:hover { background: #f8f9fa; }
.faq-item.active .faq-question { background: #fff; color: #1f1f1f; }
.faq-icon {
font-size: 1.5rem;
font-weight: 300;
color: #1f1f1f;
/* Плюс поворачивается в крестик (.faq-item.active .faq-icon) - анимируем
поворот и цвет, а не «всё». */
transition: transform var(--zd-dur) var(--zd-ease),
color var(--zd-dur) var(--zd-ease);
margin-left: 20px;
min-width: 20px;
text-align: center;
}
.faq-item.active .faq-icon {
transform: rotate(45deg);
color: #01A572;
font-weight: 500;
}
.faq-answer {
max-height: 0;
overflow: hidden;
background: linear-gradient(151deg, rgba(1, 133, 91, 1) 0%, rgba(1, 165, 114, 1) 100%);
transition: max-height 0.4s ease;
}
.faq-item.active .faq-answer { max-height: 500px; }
.faq-answer p {
margin: 0;
padding: 20px;
color: #fff;
font-weight: 500;
font-size: 1.1rem;
line-height: 1.6;
background: transparent;
}
.faq-answer a {
color: #fff;
text-decoration: underline;
font-weight: 700;
}
@media (max-width: 768px) {
.faq-title { font-size: 1.8rem; }
.faq-sub { font-size: 14px; margin-bottom: 40px; }
.faq-question { padding: 18px 16px; font-size: 1rem; }
.faq-icon { font-size: 1.3rem; margin-left: 15px; }
.faq-answer p { padding: 18px 16px; font-size: 1rem; }
}
/* ============================================================
Точечно гасим прыжки кнопок на hover/focus — список конкретный,
чтобы не зацепить карусель партнёров, галереи, hot-card и др.
Только button-like элементы.
============================================================ */
.btn-white:hover,
.btn-primary:hover,
.btn-zd:hover,
.btn-zd-dark:hover,
.submit-btn:hover,
.recover-submit:hover,
.cta-btn:hover,
.download-btn:hover,
.cmp-remove:hover,
.close-modal:hover,
.zoom-btn:hover,
.video-close:hover,
.header__catalog:hover,
.header__nav-item:hover,
.app-card:hover,
.footer-social a:hover,
.info-zeldom__hide-button:hover,
.read-more:hover,
.review-add:hover,
.scroll-btn:hover {
transform: none !important;
}
/* ── Жёлтая плашка «Возможно, вы имели в виду» (search.js renderResults) ── */
.search-dd-correction {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin: 8px 12px;
border-radius: 12px;
background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%);
border: 1px solid #f6c542;
color: #6b4d00;
font-size: 13.5px;
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.search-dd-correction:hover,
.search-dd-correction.search-dd-focused {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(246, 197, 66, .35);
background: linear-gradient(135deg, #fff3c4 0%, #ffea91 100%);
}
.search-dd-correction-icon { font-size: 20px; flex: 0 0 auto; line-height: 1; }
.search-dd-correction-text { flex: 1 1 auto; min-width: 0; }
.search-dd-correction-text strong { color: #4a3300; font-weight: 700; }
.search-dd-correction-cta {
flex: 0 0 auto;
font-size: 11.5px;
color: #b07b00;
font-weight: 600;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: .03em;
}
@media (max-width: 600px) {
.search-dd-correction-cta { display: none; }
.search-dd-correction { font-size: 12.5px; padding: 10px 12px; }
}
/* ===== Выбор фасовки перед добавлением в корзину (листинги) =====
Тот же визуальный паттерн, что у выезжающих панелей "Сортировка"/"Фильтры"
на странице каталога (см. .panel/.overlay/.radio-item в product-page.css) -
снизу на мобильном, слева на десктопе. Свои классы, чтобы работать на любой
странице независимо от того, подключён там product-page.css или нет. */
.zd-packing-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .3);
backdrop-filter: blur(5px);
z-index: 10001;
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
.zd-packing-overlay.active { opacity: 1; pointer-events: auto; }
/* Ползунок «потяни вниз - закроется» у панели «Вы выбрали».
Базовый .panel-handle (css/product-page.css) показан только на мобиле: те
панели на десктопе выезжают сбоку, и тянуть вниз там нечего. Эта же
выезжает снизу на ЛЮБОЙ ширине, и ползунок нужен и на ПК -
поэтому показываем его здесь без медиазапроса.
*/
/* Внешний вид задаём ЗДЕСЬ ЦЕЛИКОМ, а не наследуем от базового .panel-handle:
тот объявлен в css/product-page.css, который на самой странице товара не
подключается. Ползунок отрисовывался нулевой высоты и без полоски - виден
в разметке, невидим глазу. Размеры повторяют базовый, чтобы ощущение было
одинаковым во всех окнах. */
.zd-packing-panel .panel-handle {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 0 8px;
touch-action: none;
cursor: grab;
}
.zd-packing-panel .panel-handle:active { cursor: grabbing; }
.zd-packing-panel .panel-handle::before {
content: "";
width: 40px;
height: 5px;
border-radius: 4px;
background: #d6d9dd;
}
.zd-packing-panel.zd-panel-dragging { transition: none; }
.zd-packing-panel {
position: fixed;
background: #fff;
z-index: 10002;
display: flex;
flex-direction: column;
/* Шторка ездит по transform (см. медиазапросы ниже) - его и анимируем.
Прежняя запись без имени свойства означала `all`: браузер сторожил и
высоту с радиусом, а это самая заметная анимация на витрине. */
transition: transform var(--zd-dur-slow) var(--zd-ease-out);
/* Единственное объявление transform на весь компонент: мобильный блок
пишет только в --zdpp-ty, десктопный - только в --zdpp-tx. Два
отдельных transform в разных медиазапросах уже роняли соседний
компонент (.panel, см. css/product-page.css) - панель улетала за экран,
потому что применялся транслейт не по той оси. */
--zdpp-tx: 0;
--zdpp-ty: 0;
transform: translate(var(--zdpp-tx), var(--zdpp-ty));
}
@media (max-width: 1024px) {
.zd-packing-panel {
left: 0; right: 0; bottom: 0;
border-radius: 20px 20px 0 0;
--zdpp-ty: 100%;
/* vh СЧИТАЕТСЯ ПО ЭКРАНУ БЕЗ АДРЕСНОЙ СТРОКИ, а шторка прижата к низу -
её подвал с кнопкой «Добавить в корзину» уходил под видимую границу. В
эмуляторе не воспроизводилось: там адресной строки нет и vh совпадает с
видимой высотой. dvh считает по ТЕКУЩЕЙ, vh оставлен запасным для
браузеров постарше.
*/
max-height: 90vh;
max-height: 90dvh;
}
.zd-packing-panel.active { --zdpp-ty: 0; }
}
/* НА ДЕСКТОПЕ - СЛЕВА, КАК ФИЛЬТР И СОРТИРОВКА; на мобайле - снизу.
Снизу-вверх «как у Kaspi» относилось К МОБАЙЛУ - там шторка и осталась; на
десктоп это правило применили ошибочно, и панель выбора разошлась с
остальными выезжающими окнами сайта. Геометрия намеренно совпадает с
.panel (css/product-page.css): та же ширина, та же полная высота, те же
скругления справа - чтобы у всех «выбрать что-либо» на ПК было одно
поведение.
*/
@media (min-width: 1025px) {
.zd-packing-panel {
top: 0; left: 0; bottom: 0;
width: 440px;
height: 100vh;
--zdpp-tx: -100%;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
box-shadow: 8px 0 30px rgba(0, 0, 0, .12);
}
.zd-packing-panel.active { --zdpp-tx: 0; }
/* Ползунок «потяни вниз» - только у шторки снизу. Слева тащить вниз
нечего, ровно как у .panel-handle общего движка. */
.zd-packing-panel .panel-handle { display: none; }
}
.zd-packing-panel__header {
padding: 24px;
border-bottom: 1px solid #eef0f2;
display: flex;
align-items: center;
justify-content: space-between;
}
.zd-packing-panel__header h2 { margin: 0; font-size: 20px; font-weight: 700; color: #111827; }
.zd-packing-panel__close {
border: none;
background: transparent;
font-size: 24px;
line-height: 1;
color: #1f1f1f;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Только для мыши: с клавиатуры кнопка закрытия обязана быть видимой,
иначе из панели фасовок не выйти вслепую. */
.zd-packing-panel__close:focus:not(:focus-visible) { outline: none; }
/* Прежний .zd-packing-panel__name (серая строчка с названием под шапкой)
заменён блоком «Вы выбрали» ниже: там то же название, но рядом с фото,
ценой и брендом. Селектор оставлен пустым намеренно не был - разметки с
ним больше нет вовсе. */
/* ── «ВЫ ВЫБРАЛИ»: карточка товара в шапке модалки ──────────────────────────
Порядок внутри правой колонки - цена, название, бренд: цена первая и
крупная, то же решение, что в строке фасовки.
*/
.zd-picked {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 16px 24px;
}
.zd-picked__photo {
width: 88px;
height: 88px;
flex: 0 0 auto;
object-fit: cover; /* как везде, где показано фото товара */
border-radius: 12px;
background: #f5f6f7;
border: 1px solid #eef0f2;
}
.zd-picked__info { min-width: 0; }
.zd-picked__price {
font-size: 22px;
font-weight: 700;
color: #1f1f1f;
line-height: 1.2;
}
/* Зачёркнутая прежняя цена - рядом с текущей, мельче и приглушённой. */
.zd-picked__price s {
font-size: 14px;
font-weight: 500;
color: #8A9297;
margin-left: 6px;
}
.zd-picked__name {
margin-top: 4px;
font-size: 14px;
line-height: 1.35;
color: #333;
}
.zd-picked__brand {
margin-top: 4px;
font-size: 14px; /* строка фасовки; мельче 14px аудитории не читается */
color: #333;
}
.zd-picked__brand img { display: block; max-width: 96px; height: 16px; object-fit: contain; }
.zd-packing-panel__body {
overflow-y: auto;
flex: 1;
padding: 0 24px 24px;
}
/* Слово над списком вариантов: «Водовылив», «Кассета», «Фасовка». Тот же
кегль и цвет, что у подписи переключателя на странице товара - покупатель
встречает одну и ту же надпись в двух местах, и выглядеть она должна
одинаково. 14px - минимум по сайту для читаемого текста. */
.zd-packing-panel__caption {
padding: 14px 0 2px;
font-size: 14px;
font-weight: 700;
color: #333;
}
/* Заголовок ветки внутри списка: «1,6 л/ч», под ним только её метражи.
Плоский список из шести строк «1,6 л/ч · 500 м» на телефоне читается
одинаково, отличие стоит в начале строки, а глаз ловит цену справа.
Слабее общего заголовка панели, но заметно отделён линией сверху. */
.zd-packing-panel__group {
margin-top: 12px;
padding: 10px 0 4px;
border-top: 1px solid #E5E7EB;
font-size: 15px;
font-weight: 700;
color: #01663F;
}
.zd-packing-panel__group:first-of-type {
margin-top: 4px;
border-top: 0;
}
/* Строка одной фасовки - у каждой своя кнопка/степпер, не общий
confirm внизу панели: выбор одной фасовки не должен снимать/трогать
состояние остальных, можно доложить в корзину сразу несколько.
*/
.zd-packing-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 0;
border-bottom: 1px solid #f9f9f9;
}
.zd-packing-row:last-child { border-bottom: none; }
.zd-packing-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Цена — главная строка, фасовка под ней подписью.
Раньше было наоборот: фасовка 15px/600 чёрным, цена 13px серым — глаз
цеплялся за «10 шт», а выбирают по цене. Кегли не выдуманы: взяты те же
два, что тут и были, просто поменялись местами.
*/
.zd-packing-row__price { font-size: 15px; font-weight: 700; color: #111827; }
.zd-packing-row__label { font-size: 13px; font-weight: 500; color: #6b7280; }
/* "Доп. информация о фасовке" - внутри .zd-packing-row__info (та же колонка,
что label/price), поэтому визуально всегда под СВОЕЙ фасовкой, даже когда
в панели одновременно показаны все фасовки товара (см. js/catalog.js::renderRow). */
.zd-packing-row__note {
margin-top: 4px;
font-size: 12.5px;
line-height: 1.4;
color: #065F46;
background: #ECFDF5;
border: 1px solid #6EE7B7;
border-radius: 8px;
padding: 8px 8px;
white-space: pre-line;
}
/* ОПТОВАЯ ПОДСКАЗКА В ПАНЕЛИ ВЫБОРА. Цвета и форма - те же, что у такой же
подсказки в корзине (.cart-item-opt в css/cart.css): один и тот же смысл
покупатель встречает дважды за покупку, и выглядеть он должен одинаково.
Оранжевая - «доберите ещё», зелёная - «оптовая цена уже действует». */
.zd-packing-row__opt {
display: inline-flex;
align-items: center;
margin-top: 6px;
padding: 4px 10px;
border-radius: 999px;
background: #fff7ed;
border: 1px solid #fed7aa;
color: #92400e;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}
.zd-packing-row__opt--on {
background: #e8f6ee;
border-color: #bfe5d0;
color: #0f7a44;
font-weight: 700;
}
.zd-packing-row__action { flex: 0 0 auto; }
/* Строка товара БЕЗ фасовок: подпись «Количество» - это не выбор варианта, а
просто заголовок степпера, поэтому обычным текстом и без разделителя сверху.
Цена у такого товара стоит крупно в шапке «Вы выбрали». */
.zd-packing-row--plain { border-bottom: none; padding-top: 8px; }
.zd-packing-row--plain .zd-packing-row__label { font-size: 14px; color: #333; }
/* Подвал панели фасовок: выбор не уходит в корзину по
клику на строку - его подтверждает одна кнопка «Применить». Подвал вне
прокручиваемого __body, поэтому при длинном списке фасовок кнопка всегда
на виду.
*/
.zd-packing-panel__footer {
flex: 0 0 auto;
border-top: 1px solid #eef0f2;
padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
gap: 12px;
background: #fff;
}
/* Строка «Выбрано: N шт · SUM ₸» - это итог, ради которого покупатель и
открыл панель. Стояла 13px светло-серым #6b7280, то есть мельче и бледнее
всего остального в окне: цена строки 15px, количество 16px, оба почти
чёрные.
*/
.zd-packing-panel__summary { font-size: 15px; font-weight: 600; color: #111827; }
.zd-packing-panel__apply {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 12px;
background: #01A572;
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background .15s, opacity .15s;
-webkit-tap-highlight-color: transparent;
}
.zd-packing-panel__apply:hover:not(:disabled) { background: #018a5f; }
.zd-packing-panel__apply:disabled { opacity: .45; cursor: default; }
/* Выбранная строка видна и без взгляда на кнопку. */
.zd-packing-row.is-picked .zd-packing-row__label { color: #01A572; }
.zd-packing-row__add {
padding: 12px 20px;
border: none;
border-radius: 12px;
background: #01A572;
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background .15s;
-webkit-tap-highlight-color: transparent;
}
.zd-packing-row__add:hover { background: #018a5f; }
.zd-packing-qty {
display: flex;
align-items: center;
gap: 12px;
background: #f4f6f5;
border-radius: 12px;
padding: 4px;
}
/* «−» и «+» - 44px, как любая кнопка на телефоне.
Было 30x30 - меньше нормы вдвое, и это при том, что по ним жмут по
несколько раз подряд, набирая количество.
touch-action: manipulation - двойное нажатие по ним больше НЕ ЗУМИТ
страницу. Свойство отключает double-tap-zoom именно на этом элементе, не
трогая масштабирование страницы двумя пальцами.
*/
.zd-packing-qty__btn {
width: 44px;
height: 44px;
border: none;
border-radius: 10px;
background: #fff;
color: #111827;
font-size: 20px;
font-weight: 700;
line-height: 1;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,.08);
touch-action: manipulation;
}
.zd-packing-qty__value { min-width: 36px; text-align: center; font-size: 16px; font-weight: 700; color: #111827; }
/* Значение стало - гасим рамку, фон и спиннеры, чтобы ячейка
осталась такой же на вид, как была текстом. */
input.zd-packing-qty__value {
width: 44px;
padding: 2px 0;
border: 1px solid transparent;
border-radius: 6px;
background: #fff;
font-family: inherit;
appearance: textfield;
-moz-appearance: textfield;
}
input.zd-packing-qty__value::-webkit-outer-spin-button,
input.zd-packing-qty__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.zd-packing-qty__value:focus { outline: none; border-color: #01A572; }
/* Форма "Уведомить о поступлении" (js/catalog.js::zdOpenRestockModal) -
компактный центрированный диалог, не боковая панель как у фасовок
(тут одно поле, панель на весь экран была бы избыточна). */
.zd-restock-modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(.95);
width: min(360px, calc(100vw - 32px));
background: #fff;
border-radius: 20px;
padding: 24px 24px 24px;
z-index: 10002;
opacity: 0;
pointer-events: none;
transition: opacity .25s, transform .25s;
box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.zd-restock-modal.active { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.zd-restock-modal h2 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #111827; }
.zd-restock-modal__hint { margin: 0 0 16px; font-size: 13px; color: #6b7280; line-height: 1.4; }
.zd-restock-modal__close {
position: absolute; top: 14px; right: 14px;
width: 28px; height: 28px; border: none; border-radius: 50%;
background: #f4f6f5; font-size: 18px; line-height: 1; cursor: pointer; color: #6b7280;
}
.zd-restock-modal__phone {
width: 100%; box-sizing: border-box; padding: 12px 14px;
border: 1px solid #e5e7eb; border-radius: 10px; font-size: 15px; margin-bottom: 10px;
}
.zd-restock-modal__phone:focus { outline: none; border-color: #01A572; }
.zd-restock-modal__error { color: #e26262; font-size: 13px; margin-bottom: 10px; }
.zd-restock-modal__submit {
width: 100%; padding: 13px; border: none; border-radius: 10px;
background: #01A572; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
transition: background .15s, opacity .15s;
}
.zd-restock-modal__submit:hover:not(:disabled) { background: #018a5f; }
.zd-restock-modal__submit:disabled { opacity: .6; cursor: not-allowed; }
/* ============================================================
ФОКУС С КЛАВИАТУРЫ — единое кольцо на весь сайт.
Намеренно в конце файла и НА ВЕРХНЕМ УРОВНЕ (не внутри @media):
правило про текстовые поля выше живёт в @media (max-width:1024px),
и кольцо, положенное рядом, действовало бы только на мобильных.
:where() держит нулевую специфичность — компонент со своим фокус-стилем
(.co-input:focus в cart.css и т.п.) спокойно перекрывает это правило,
а всё, у чего своего стиля нет, получает видимый фокус по умолчанию.
Цвет темнее фирменного #01A572: у того контраст к белому ~3.0:1 —
ровно на границе WCAG 1.4.11, кольцо должно читаться уверенно.
============================================================ */
/* Мягкое "гало" вместо жёсткой линии. Плоская обводка через outline заменена на слоёный
box-shadow: белый зазор отделяет кольцо от самого элемента (не сливается с
его собственной рамкой/фоном), тёмно-зелёное кольцо - тот же цвет #016B4A
и та же толщина (2px), что и раньше (WCAG 2.4.7/ 1.4.11 не трогаю, это уже
отдельная история регрессий), плюс мягкое размытие снаружи - вместе
выглядит как современный фокус-ринг (Stripe/Linear-стиль), а не системная
рамка браузера. outline:none безопасен ТОЛЬКО потому, что box-shadow ниже
- полноценная замена индикатора, а не его отсутствие.
*/
/* Цвет кольца - ФИРМЕННЫЙ ЯРКИЙ #01A572, а не тёмный #016B4A. Тёмный
стоял ради контраста: у яркого к белому ~3.0:1, ровно на границе WCAG
1.4.11. Поэтому яркое кольцо не осталось голым - снаружи добавлен волосок
тёмно-зелёного (1px): цвет кольца читается как фирменный, а граница
остаётся чёткой на любом фоне. Тот же рецепт продублирован в
agroadmin/css/zeldom-admin.css - фокус на сайте и в админке выглядит
одинаково намеренно; меняешь здесь - меняй и там.
*/
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: none;
box-shadow: var(--zd-focus-ring);
border-radius: 8px;
}
/* Поле поиска в шапке гасило outline безусловно (.search__input выше),
из-за чего с клавиатуры не было видно, что курсор в поиске. Кольцо
рисуем внутрь: поле прижато к кнопке, внешнее кольцо срезалось бы. */
/*
* ФОКУС ПОИСКА РИСУЕМ ВОКРУГ ПЛАШКИ, А НЕ ВНУТРИ ПОЛЯ.
*
* Было: кольцо 2px внутрь самого input (outline-offset: -2px). Внутри белого
* поля тёмно-зелёная линия читается как чужеродная рамка — юзер спрашивал
* про неё дважды ( «чтобы так не выделялось» «зачем область выделяется
* чёрной линией»). Убрать совсем нельзя: без индикатора фокуса поиск не
* найти с клавиатуры (WCAG 2.4.7).
*
* Стало: подсвечиваем .search__wrapper — ту самую зелёную плашку, которая
* уже обрамляет поле. Кольцо ложится СНАРУЖИ, на белый фон шапки, и читается
* как «поиск активен», а не как линия внутри поля. Контраст #016B4A к белому
* ~5.8:1 — с запасом к порогу 3:1 (WCAG 1.4.11).
*
* :focus-within, а не :focus-visible на поле: подсветить надо всю плашку, а
* фокус получает вложенный input. Текстовые поля по спецификации совпадают с
* :focus-visible и при клике мышью — поэтому кольцо видно в обоих случаях, и
* это правильно: человек должен видеть, куда попал курсор.
*/
/*
* ПОДСВЕТКА ПОИСКА — ТОЛЬКО ДЛЯ КЛАВИАТУРЫ.
*
* Требование принято — мышью не показываем НИЧЕГО.
*
* Но и совсем убрать индикатор нельзя: без него человек, идущий по странице
* с Tab, не видит, что попал в поиск (WCAG 2.4.7). Одним CSS это не
* разводится — текстовые поля по спецификации всегда совпадают с
* :focus-visible, потому что в них ожидается ввод. Способ ввода определяет
* js/script.js: класс zd-kbd на живёт, пока ходят клавиатурой, и
* снимается при первом касании мыши.
*
* Итог: клик мышью — поиск выглядит как обычно; переход по Tab — зелёная
* плашка темнеет. Отдельной рамки не появляется ни в одном из случаев,
* меняется оттенок уже нарисованной.
*/
.zd-kbd .search__wrapper:focus-within {
background: #016B4A;
}
/* Внутреннего кольца у самого поля больше нет — его роль забрала плашка.
border-radius возвращаем ЯВНО. Общее правило фокуса выше ставит всем полям
4px, чтобы кольцо не было угловатым, — но у поиска белое поле лежит внутри
зелёной плашки с радиусом 12px и отступом 2px. Стоило радиусу упасть до
4px, как в углах вылезала зелёная заливка шириной 8px вместо ровных 2px по
сторонам: поле выглядело обгрызенным по краям при каждом клике.
*/
.search__input:focus-visible {
outline: none;
border-radius: 10px 0 0 10px;
/*
* НИКАКОГО КОЛЬЦА ВОКРУГ ПОИСКА - НИ МЫШЬЮ, НИ С КЛАВИАТУРЫ.
*
* Здесь гасился только outline, а общее правило фокуса выше (:where(a,
* button, input, ...):focus-visible) рисует кольцо не outline'ом, а
* трёхслойным box-shadow #016B4A. Оно и оставалось: текстовые поля по
* спецификации совпадают с :focus-visible даже при клике мышью, поэтому
* зелёная обводка вылезала на каждый клик по поиску. Гасить надо и outline,
* и тень - раньше гасили только outline.
*
* Индикатор фокуса при этом НЕ пропадает: с клавиатуры темнеет сама зелёная
* плашка (.zd-kbd .search__wrapper:focus-within выше) - решение принято
* тогда же и описано там. WCAG 2.4.7 выполняется ею, а не этим кольцом.
*/
box-shadow: none;
}
/* ============================================================
ПОДСКАЗКИ В ПОЛЯХ — СВЕТЛЕЕ ВВЕДЁННОГО ТЕКСТА.
============================================================
Браузер по умолчанию рисует placeholder цветом #757575 — рядом с почти
чёрным текстом поля (#111827) это читается как уже заполненное значение: в
форме адреса «35/А», «12», «041600» выглядели введёнными, хотя это
примеры.
#9CA3AF — тот же серый, которым в проекте набраны пояснения под полями
(.orders-empty__text и form-hint), контраст к белому ~2.9:1: подсказку
видно, но спутать с данными уже нельзя.
opacity: 1 обязателен — Firefox дополнительно приглушает placeholder своей
полупрозрачностью, и без сброса он получился бы бледнее заданного.
:where держит нулевую специфичность: у чекаута (.co-input::placeholder в
cart.css) свой цвет, и он остаётся за ним.
============================================================
*/
:where(input, textarea)::placeholder {
color: #9CA3AF;
opacity: 1;
}
/* ============================================================
ФОКУС ТЕКСТОВЫХ ПОЛЕЙ: СВОЯ РАМКА ВМЕСТО КОЛЬЦА СВЕРХУ.
============================================================
У меня уже есть своя обводка».
ПОЧЕМУ ГЛУШИТЕЛЬ ВЫШЕ НЕ РАБОТАЛ. Правило
`input:focus:not(:focus-visible)` (см. «Фокус-стейт для всех текстовых
полей») задумано гасить кольцо при клике мышью. Но текстовые поля по
спецификации совпадают с :focus-visible ВСЕГДА, включая клик мышью, —
условие :not(:focus-visible) у них не выполняется никогда. В итоге общее
кольцо `3px solid #016B4A` с отступом 2px рисовалось поверх собственной
рамки поля при каждом клике. Замер на /account/address/: outline = solid
3px rgb(1,107,74), fv = true.
КАК СТАЛО. Внешнее кольцо снимаем, а признак фокуса отдаём самому полю:
его рамка становится фирменной тёмно-зелёной, вокруг — мягкая тень того же
цвета. Чужеродной линии поверх рамки больше нет, но фокус по-прежнему
видно — WCAG 2.4.7 соблюдён, контраст #016B4A к белому ~5.8:1 (порог
1.4.11 — 3:1).
ЧЕКБОКСОВ И РАДИО ЗДЕСЬ НЕТ СОЗНАТЕЛЬНО: у них своей рамки, которую можно
подсветить, нет — им общее кольцо и нужно.
:where держит нулевую специфичность, как и у общего правила выше, а стоит
ниже по файлу — поэтому перекрывает его, но само уступает любому
компоненту со своим фокус-стилем (.co-input:focus в cart.css и т.п.).
============================================================
*/
:where(
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="date"],
textarea,
select
):focus-visible {
outline: none;
border-color: #01A572;
box-shadow: 0 0 0 1px #01A572;
}
/* ============================================================
ГОРИЗОНТАЛЬНАЯ ЛЕНТА - ЕДИНЫЙ ИСТОЧНИК ПРАВДЫ.
============================================================
Ряд, который не влезает в экран и листается вбок: крошки, категории
блога и новостей, навигация брендов на странице партнёра.
ЧТО БЫЛО. Каждая лента прятала полосу прокрутки (scrollbar-width: none)
и обрывала содержимое ровно по краю экрана. Замер на 412px: крошки
454px против 388 видимых, категории блога 1173, бренды партнёра 2715.
Прокрутка работала - но признака, что она есть, не было ни одного, и
покупатель видел просто обрезанное слово: «Семен» вместо «Семена
томата». Для аудитории 40-65+ это не подсказка, а тупик.
ПОЧЕМУ ТЕНЬ, А НЕ ПОСТОЯННОЕ ЗАТУХАНИЕ. Маска, висящая всегда (так
сделано у .toolbar-chips), гасит хвост и тогда, когда листать уже
некуда, и тогда, когда лента влезла целиком - на десктопе последняя
кнопка блога выцветала бы без причины. Здесь два вида слоёв: «тень»
приклеена к рамке (background-attachment: scroll), «заслонка» цвета
фона - к содержимому (local). Лента не прокручена - заслонка стоит
поверх тени; уехала вбок - тень открылась; влезла целиком - обе
заслонки на местах и теней не видно вовсе. Ни строчки JS и ни одного
замера ширины.
Цвет заслонки - из --zd-scroll-row-bg: лента на цветной подложке
переопределяет одну переменную, а не копирует весь приём.
============================================================ */
.zd-scroll-row {
--zd-scroll-row-bg: var(--zd-canvas);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
/* Порядок слоёв обязателен: заслонки объявлены первыми, значит лежат
ПОВЕРХ теней. Поменять местами - тени будут видны всегда. */
background:
linear-gradient(to right, var(--zd-scroll-row-bg) 60%, transparent) left center / 32px 100% no-repeat local,
linear-gradient(to left, var(--zd-scroll-row-bg) 60%, transparent) right center / 32px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(16, 24, 32, .34), rgba(16, 24, 32, 0)) left center / 22px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 32, .34), rgba(16, 24, 32, 0)) right center / 22px 100% no-repeat scroll;
}
.zd-scroll-row::-webkit-scrollbar {
display: none;
}
/* Крошки - частный случай ленты: короткий текст на чисто белом фоне без
карточек и границ вокруг. Тени по краям тут не работают ни в каком виде, и
это уже второй заход: радиальный «фонарик» -> линия («тень какая-то в
конце тупо»); линию тоже убрать («убрать тень справа в конце»). На плотном
ряде чипов тёмный край читается как «тут ещё есть», а на строке крошек он
ложится грязной полосой поверх обрезанного слова. Остаются только заслонки
цвета фона: текст растворяется к краю, и это тот же сигнал «строка длиннее
экрана», но без единого тёмного пикселя.
*/
.breadcrumbs.zd-scroll-row {
background:
linear-gradient(to right, var(--zd-scroll-row-bg) 60%, transparent) left center / 32px 100% no-repeat local,
linear-gradient(to left, var(--zd-scroll-row-bg) 60%, transparent) right center / 32px 100% no-repeat local;
}
/* ============================================================
ХЛЕБНЫЕ КРОШКИ - ЕДИНЫЙ ИСТОЧНИК ПРАВДЫ.
============================================================
Раньше этот блок был скопирован в восемь файлов (card, cart, catalog,
categories, favorites, blog, info-pages, product-page) и успел разойтись:
на карточке товара у .breadcrumbs-text стоял лишний padding: 4px 8px
(текущая страница съезжала на 8px вправо относительно других страниц),
в блоге разделитель был темнее (#6b6b6b против #999), а transition
местами был all вместо color. Крошки одинаковы на всех страницах, значит
и правило должно быть одно - [[feedback_oop_always]].
main.css подключается на КАЖДОЙ странице (ZdPage::$styles по умолчанию),
поэтому блок живёт здесь.
============================================================ */
/* Отступы вокруг крошек: на 24px текста приходилось 60px воздуха (32 сверху от тулбара,
8+8 внутри списка, 12 снизу). Сняли по ступени шкалы с внутренних: список
8→4, низ 12→8. Правим ЗДЕСЬ, а не на странице каталога: крошки одинаковы
на всех страницах, для того блок и сведён в один источник.
*/
.breadcrumbs {
padding-bottom: 8px;
}
.breadcrumbs-container {
max-width: 1900px;
margin: 0 auto;
}
.breadcrumbs-list {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 4px 0px;
gap: 8px;
}
.breadcrumbs-item {
display: flex;
align-items: center;
}
.breadcrumbs-link {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
/* Было #1f1f1f8a (полупрозрачный) - на белом фоне давало #868686,
контраст 3.64:1 против требуемых WCAG AA 4.5:1. Сплошной #666 держит тот
же приглушённый серый на глаз, но проходит порог - 5.74:1.
*/
color: #666666;
font-size: 14px;
font-weight: 500;
border-radius: 6px;
transition: color 0.2s ease;
}
.breadcrumbs-link:hover {
color: #01A572;
}
.breadcrumbs-link .home-icon {
transition: stroke 0.2s ease;
}
.breadcrumbs-link:hover .home-icon path {
stroke: #01A572;
}
.breadcrumbs-separator {
display: flex;
align-items: center;
color: #999;
margin: 0 2px;
}
.breadcrumbs-separator svg {
opacity: 0.6;
}
/* Без собственного padding: на карточке товара он был, на остальных нет -
и текущая страница в цепочке стояла не на одной линии с соседями. */
.breadcrumbs-text {
color: #1f1f1f8a;
font-size: 14px;
font-weight: 600;
}
.breadcrumbs-item.current .breadcrumbs-text {
color: #01A572;
}
@media (max-width: 992px) {
/* На узком экране цепочка не переносится, а прокручивается вбок -
иначе длинный путь занимал бы три строки над контентом. Сама
прокрутка и подсказка о ней - в .zd-scroll-row, здесь только то,
что относится к крошкам. */
.breadcrumbs {
padding: 0;
white-space: nowrap;
}
.breadcrumbs-list {
min-width: max-content;
}
/* 12 -> 14px. Крошки - навигация «где я и как вернуться», и на телефоне
они были самым мелким текстом страницы. Прокрутка вбок уже включена выше,
так что более крупный текст цепочку не ломает. Замер.
*/
.breadcrumbs-link,
.breadcrumbs-text {
font-size: 14px;
}
}
/* Контакт-ссылка в карточке сотрудника (главная — рисует js/script.js,
«О компании» — info/about.php). Класс был только на серверной версии, а
правила не было нигде: браузер красил ссылку своим синим, и на тёмной
карточке главной он читался хуже всего. Наследуем цвет окружения —
правило одно на обе карточки, светлую и тёмную. */
.team-card__contact {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.team-card__contact:hover,
.team-card__contact:focus-visible {
text-decoration-thickness: 2px;
}
/* ------------------------------------------------------------------
Поля ввода на мобильном: не меньше 16px
------------------------------------------------------------------
Safari на iPhone НАСИЛЬНО приближает страницу, когда палец попадает в
поле с font-size меньше 16px, и обратно сам не отдаляет: человек
дозаполняет форму на увеличенной странице, гоняя её пальцем вбок.
Обратно уменьшить может только он сам, и большинство просто уходит.
Правило одно на весь сайт, а не по классу в каждом файле: поля живут в
style.css (.form-input), cart.css (.co-input, .co-select, .co-textarea)
и registration.css (.country-selector) - три копии разъехались бы на
первой же правке, и «зумит только в корзине» ловилось бы руками.
Специфичность набрана намеренно через :not() - иначе класс с 14px в
своём файле перебьёт голый тег независимо от порядка подключения.
:is() нужен именно здесь: он берёт специфичность своего аргумента, и
textarea с select получают ту же прибавку, что и input. Без него они
оставались 14px - проверено замером, первая версия правила их не взяла.
Флажки и переключатели исключены: у них размер не от шрифта.
------------------------------------------------------------------ */
@media (max-width: 767px) {
:is(input, textarea, select):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
font-size: 16px;
}
}
/* ------------------------------------------------------------------
Зона касания иконки кабинета
------------------------------------------------------------------
Размер ссылке задавала только сама иконка (.header__account i, 26px),
поэтому попасть в кабинет с телефона получалось не с первого раза:
26x26 против 44x44, которые Apple считает минимумом для пальца.
Растёт зона, а не иконка: font-size у не трогаем, ссылка просто
центрирует её в своём прямоугольнике. Внешне ничего не меняется.
------------------------------------------------------------------ */
@media (max-width: 768px) {
.header__account {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
}
/* Подвал и блок вопросов - те же соображения, что у секций карточки товара
(см. css/card.css): они всегда ниже первого экрана, и считать их вёрстку
до того, как человек домотал, незачем. Резерв высоты обязателен, иначе
прокрутка прыгает - это и есть CLS, за который ругается PageSpeed. */
.footer {
content-visibility: auto;
contain-intrinsic-size: auto 601px;
}
.faq {
content-visibility: auto;
contain-intrinsic-size: auto 694px;
}
/* SEO-текст раздела - всегда в самом низу страницы каталога и категории, и
это самый длинный блок: замер дал 1302px на категории и 509px на каталоге.
Считать его вёрстку до того, как человек домотал, незачем. Резерв взят по
замеру ДО включения content-visibility - меряя скрытую секцию, меряешь
собственный резерв, а не реальную высоту.
*/
.seo-block {
content-visibility: auto;
contain-intrinsic-size: auto 1300px;
}
/* --- Плашка «разрешить уведомления» (js/push.js) ---------------------------
*
* СВОЯ, А НЕ СИСТЕМНАЯ. Системный запрос браузера вызывается только по
* нажатию «Напомнить»: показанный без объяснения, он получает «Блокировать»
* навсегда - второго раза домену не дают.
*
* СНИЗУ И НАД НИЖНИМ МЕНЮ. На телефоне меню фиксировано на 60-65px, и без
* отступа плашка накрыла бы «Корзину» - то есть ровно ту кнопку, ради которой
* человек здесь.
*
* Кегли и зоны - по общему правилу витрины: текст не мельче 14px, кнопки не
* ниже 44px (аудитория 40-65+).
*/
.zd-push-invite {
position: fixed;
left: 16px;
right: 16px;
bottom: calc(80px + var(--zd-nav-lift));
z-index: 998;
max-width: 420px;
margin: 0 auto;
padding: 16px;
background: var(--zd-canvas);
border: 1px solid var(--zd-line);
border-radius: 14px;
box-shadow: var(--zd-shadow-md);
}
.zd-push-invite__text {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.45;
color: var(--zd-text);
}
.zd-push-invite__row {
display: flex;
gap: 8px;
}
.zd-push-invite__yes,
.zd-push-invite__no {
flex: 1 1 auto;
min-height: 44px;
padding: 0 12px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
border-radius: 10px;
cursor: pointer;
}
.zd-push-invite__yes {
background: var(--zd-brand);
border: 1px solid var(--zd-brand);
color: #fff;
}
.zd-push-invite__yes:hover { background: var(--zd-brand-hover); border-color: var(--zd-brand-hover); }
.zd-push-invite__no {
background: var(--zd-canvas);
border: 1px solid var(--zd-line-strong);
color: var(--zd-text-muted);
}
.zd-push-invite__no:hover { background: var(--zd-surface-1); color: var(--zd-text); }
@media (min-width: 1025px) {
/* На десктопе нижнего меню нет - плашка садится ниже. */
.zd-push-invite { bottom: 24px; left: auto; right: 24px; margin: 0; }
}
/* Таблица, вставленная из Word или чужого кода, должна выглядеть так же,
как своя.
Вставленная разметка приносит свои границы, и они сильнее наших: атрибут
border="1" рисует рамку у каждой ячейки (мы задаём только border-bottom,
поэтому оставались лишние вертикальные линии), а inline-стиль на ячейке
обычным правилом не перебить вовсе - так устроены 175 таблиц в
легаси-описаниях.
Правило здесь, потому что main.css - единственный лист, общий для
карточки товара и статьи. !important - единственный способ перебить
inline-стиль; действует только на ячейки таблиц внутри этих двух
контейнеров.
Цвет берётся из контекста: --border-color объявлен в blog.css, на
карточке товара его нет и срабатывает запасное значение.
Фон ячеек и ширины не трогаем: фон автор задаёт осмысленно, а лишняя
ширина уходит в прокрутку вбок. */
.description-summernote td,
.description-summernote th,
.article-body td,
.article-body th {
border-color: var(--border-color, #e8e8e8) !important;
border-width: 0 0 1px !important;
border-style: solid !important;
}
/* Сетка между колонками остаётся там, где она осмысленна, - в статьях:
у них ячейка изначально обведена со всех сторон (blog.css). */
.article-body td,
.article-body th {
border-width: 1px !important;
}
/* Переключатель языка в подвале (lib/footer.php): в одной строке с соцсетями,
выбранный язык залит зелёным, второй - ссылка. Зона нажатия 44px. */
.footer-lang {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-left: auto;
}
.footer-lang__title {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: #6b6b6b;
}
.footer-lang__globe {
flex: 0 0 auto;
color: #01A572;
}
.footer-lang__opt {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 14px;
border: 1.5px solid #01A572;
border-radius: 10px;
background: #fff;
color: #016B4A;
font-size: 14px;
text-decoration: none;
transition: background-color 0.2s ease;
}
.footer-lang__opt b {
font-weight: 800;
letter-spacing: .04em;
}
a.footer-lang__opt:hover {
background: #ECFDF5;
}
a.footer-lang__opt:focus-visible {
outline: none;
box-shadow: var(--zd-focus-ring);
}
.footer-lang__opt.is-current {
background: #01A572;
color: #fff;
font-weight: 600;
}
/* Телефон: подсказки поиска на всю ширину экрана, а не шириной поля -
панель держится за шапку (она во всю ширину), форма её не ограничивает. */
@media (max-width: 767px) {
.header .search { position: static; }
.header .search .search-dropdown {
top: 100%;
left: 12px;
right: 12px;
}
}
/* Кабинет и корзина на телефоне - без подвала (lib/footer.php). */
@media (max-width: 767px) {
.footer.footer--hide-mobile { display: none; }
}
/* Шторка «Вы выбрали»: зазор по бокам и снизу, как у остальных шторок; большая зона хвата у ручки. */
@media (max-width: 1024px) {
.zd-packing-panel { left: 8px; right: 8px; bottom: var(--zd-sheet-bottom); border-radius: 22px; --zdpp-ty: calc(100% + var(--zd-sheet-bottom) + 8px); }
.zd-packing-panel.active { --zdpp-ty: 0; }
.zd-packing-panel .panel-handle { display: none; }
}
/* Крестики окон: зона не меньше 44px, иначе по ним не попасть. */
.zd-packing-panel__close { min-width: 44px; min-height: 44px; font-size: 28px; }
.zd-restock-modal__close { width: 44px; height: 44px; font-size: 24px; }
/* Нижнее меню телефона приподнято над зоной системного жеста (свайп домой на iPhone, полоса жестов на Android): иначе по кнопкам меню трудно попасть. Все панели над меню считают отступ от этой же переменной. */
:root { --zd-nav-lift: calc(14px + env(safe-area-inset-bottom, 0px)); }
/* Высота нижнего меню и нижняя граница шторок: шторка стоит над меню, меню под затемнением остаётся видно. */
:root { --zd-nav-base: 65px; --zd-sheet-bottom: calc(var(--zd-nav-base) + var(--zd-nav-lift) + 8px); }
@media (max-width: 425px) { :root { --zd-nav-base: 60px; } }
/* ===== Метки на фото плитки: процент скидки и плашка экспресса (lib/tile-badges.php) ===== */
.hot-disc {
position: absolute; top: 8px; right: 8px; z-index: 3;
display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px;
border-radius: 14px; background: #D81B60; color: #fff;
font-size: 14px; font-weight: 800; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}
.hot-express {
position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3;
display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 5px 8px; border-radius: 12px; background: rgba(255, 255, 255, .8);
color: #7A3E00; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden;
}
.hot-express i { color: #FF7700; font-size: 15px; line-height: 1; flex: none; }
.hot-express span { overflow: hidden; text-overflow: ellipsis; }
.hot-badge-labels { display: none !important; }
@media (max-width: 1024px) {
/* На телефоне хит, новинка и предзаказ показывает шторка «Характеристики». */
.hot-icon-strip { display: none; }
}
@media (max-width: 1024px) {
.hot-img-box .hot-icon-strip { display: none; }
}
/* Плашка экспресса на узком фото плитки: подпись переносится на вторую строку, а не обрезается многоточием. */
.hot-express { white-space: normal; line-height: 1.1; padding: 4px 8px; }
.hot-express span { white-space: normal; overflow: visible; text-overflow: clip; text-align: left; }
.hot-express i { font-size: 13px; }
.card-info-panel__marks .hot-express { white-space: nowrap; }
/* Скидка стоит вплотную к правому верхнему углу фото и повторяет его скругление. */
.hot-disc { top: 0; right: 0; border-radius: 0 12px 0 12px; box-shadow: none; }
/* На телефоне скидка на плитке компактнее. */
@media (max-width: 768px) { .hot-img-box .hot-disc { min-height: 22px; padding: 0 7px; font-size: 12px; } }
/* ===== Узкие экраны (320 и 280px): ничего не вылезает за край, все блоки видны ===== */
/* Нижнее меню: пять пунктов делят ширину поровну, подпись сжимается, а не вылезает; кружок счётчика внутри экрана. */
@media (max-width: 360px) {
.mobile-nav .header__nav-item { flex: 1 1 0; min-width: 0; padding: 0 1px; }
.mobile-nav .header__nav-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.mobile-nav .nav-count { right: auto; left: calc(50% + 2px); }
}
@media (max-width: 340px) {
.mobile-nav .header__nav-text { font-size: 12px; }
}
@media (max-width: 300px) {
.mobile-nav .header__nav-text { font-size: 11px; }
.mobile-nav .header__nav-item i, .mobile-nav i { font-size: 20px; }
}
@media (max-width: 360px) {
/* Пункты делят ширину по содержимому: длинная подпись «Избранное» получает больше места, чем «Заказы». */
.mobile-nav .header__nav-item { flex: 1 1 auto; }
}
@media (max-width: 300px) {
.mobile-nav .nav-count { left: calc(50% - 4px); }
}
/* ===== Сайт на самых узких телефонах (до 400px): заголовки и цифры меньше, блоки не шире экрана ===== */
@media (max-width: 400px) {
body main { min-width: 0; }
/* заголовки страниц и крупные цифры */
body main h1 { font-size: 22px; line-height: 1.2; }
body .info-zeldom-title, body .about-title, body .security-h1, body .how-to-buy-h1,
body .blog-hero-title, body .catalog-title { font-size: 22px; line-height: 1.2; }
body .faq-title, body .comic-story-title { font-size: 20px; line-height: 1.2; }
body .map-title, body .map-title span, body .ct-with, body .ct-without { font-size: 22px; }
body .about-stat__val, body .how-to-buy-stat-value, body .how-to-buy-term-value { font-size: 22px; }
body .deliv-price-main, body .total-price { font-size: 18px; }
body .zd-404__code { font-size: 64px; }
body .cart-empty i { font-size: 40px; }
/* карточки доставки, оплаты, о компании: колонка не шире экрана, поля меньше */
body .deliv-grid { grid-template-columns: minmax(0, 1fr); }
body .deliv-method-card, body .method-card, body .about-card { padding: 16px; min-width: 0; }
body .legal-details { min-width: 0; }
/* страница товара: название и цена в нашем размере */
body .hot-info h1 .hot-name-ru { font-size: 20px; line-height: 1.25; }
body .hot-info .hot-price-box .hot-price { font-size: 22px; }
/* нижняя плашка оформления в корзине: текст ужимается, а не уезжает за край */
body .mobile-checkout-action-text { min-width: 0; font-size: 14px; }
body .mobile-checkout-content { gap: 8px; }
body .recommend__all { font-size: 14px; }
}
@media (max-width: 400px) {
body .how-to-buy-help-text h3, body .section-work .left h2, body .utp-header h2, body .brands-wrapper h2 { font-size: 20px; line-height: 1.2; }
body .cart-header h1 { font-size: 22px; }
body .cart-header h1 i { font-size: 20px; }
body .hot-info .hot-price-box .hot-price, body .hot-price-box .hot-price { font-size: 22px !important; }
body .payment-methods, body .about-cards, body .how-to-buy-channels, body .deliv-grid { grid-template-columns: minmax(0, 1fr); }
body .phone-input { min-width: 0; }
body main { overflow-x: clip; }
}
@media (max-width: 300px) {
body .how-to-buy-term-card { flex-direction: column; align-items: flex-start; min-width: 0; }
body .how-to-buy-term-content { min-width: 0; width: 100%; }
body .right label, body .right a, body .right span { overflow-wrap: anywhere; min-width: 0; }
body .recommend__all { white-space: normal; max-width: 100%; }
}
@media (max-width: 400px) {
body .how-to-buy-terms-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 340px) {
body .search__input { font-size: 14px; padding-left: 12px; }
body .search__input::placeholder { font-size: 13px; }
}
/* Главная на телефоне: блоки ближе друг к другу, чтобы за экран помещалось больше. */
@media (max-width: 768px) {
body main .section-padding, body main .map-block { padding-top: 24px; padding-bottom: 24px; }
body main .comic-story, body main .brands-wrapper, body main .two-blocks-p, body main .faq { padding-top: 16px; padding-bottom: 16px; }
body main .info-zeldom-modern { margin-top: 16px; padding-top: 16px; padding-bottom: 16px; }
body main .hot-line { margin-top: 12px; }
body main .promo-section-scroll { padding-top: 12px; }
}
@media (max-width: 400px) {
body main .section-padding, body main .map-block { padding-top: 16px; padding-bottom: 16px; }
body main .comic-story, body main .brands-wrapper, body main .two-blocks-p, body main .faq { padding-top: 12px; padding-bottom: 12px; }
}
.search-dd-label--row { display: flex; align-items: center; justify-content: space-between; }
.search-dd-clear { border: 0; background: none; padding: 6px 4px; min-height: 36px; font: inherit; font-size: 13px; font-weight: 700; color: #01704F; cursor: pointer; text-transform: none; letter-spacing: 0; }
.zd-lang-strip { display: none; }
@media (max-width: 767px) {
.zd-lang-strip { display: flex; justify-content: center; gap: 8px; padding: 12px 16px calc(84px + var(--zd-nav-lift)); background: #fff; }
body:has(.mobile-checkout-btn) .zd-lang-strip { padding-bottom: calc(200px + var(--zd-nav-lift)); }
}
/* iOS сам превращает телефон в синюю ссылку: возвращаем цвет и шрифт текста вокруг. */
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; -webkit-text-fill-color: currentColor; }
/* Цвет оценки (zd_rating_tone): звезда яркая, число темнее того же тона - 4.5:1 на белом */
.zd-rate--high .stars, .zd-rate--high i.icon { color: #01A572 !important; }
.zd-rate--mid .stars, .zd-rate--mid i.icon { color: #F5B301 !important; }
.zd-rate--low .stars, .zd-rate--low i.icon { color: #E5372B !important; }
.zd-rate--high .hot-rating-count { color: #047857 !important; }
.zd-rate--mid .hot-rating-count { color: #A16207 !important; }
.zd-rate--low .hot-rating-count { color: #C81E1E !important; }
.hot-rating.zd-rate--high, .hot-rating.zd-rate--mid, .hot-rating.zd-rate--low { justify-content: flex-start; gap: 4px; font-size: 14px; }
.hot-rating[class*="zd-rate--"] .stars { font-size: 16px; }
/* Плашка экспресса на плитке: по центру снизу по своей ширине, с полями до краёв фото. */
.hot-img-box .hot-express { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px); box-sizing: border-box; }
/* Значки хита/новинки на ПК - в левом верхнем углу фото, чтобы не наезжать на плашку экспресса. */
.hot-img-box .hot-icon-strip { top: 8px; bottom: auto; }
.hot-express__short { display: none; }
/* Телефон: маленькая плашка в одну строку со значком (просьба владельца). */
@media (max-width: 767px) {
.hot-img-box { container-type: inline-size; }
.hot-img-box .hot-express { font-size: 9px; line-height: 1; min-height: 20px; padding: 3px 6px; gap: 3px; white-space: nowrap; max-width: calc(100% - 12px); }
.hot-img-box .hot-express i { font-size: 9px; }
.hot-img-box .hot-express .hot-express__full, .hot-img-box .hot-express .hot-express__short { white-space: nowrap !important; font-size: 9px !important; letter-spacing: 0; }
/* Фото уже 140px (телефоны 344-320px): полная надпись со значком, только мельче - 8px. */
@container (max-width: 139px) {
.hot-img-box .hot-express { padding: 2px 4px; gap: 2px; min-height: 18px; max-width: calc(100% - 8px); }
.hot-img-box .hot-express i { font-size: 7px; }
.hot-img-box .hot-express .hot-express__full { font-size: 8px !important; }
}
}
/* Смена языка в шапке телефона (lib/view/_header.php): плашка с другим языком на месте прежней иконки кабинета. */
.header__lang {
position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
border-radius: 50%; color: #01A572; background: #E8F8F1; text-decoration: none; transition: background .15s ease, transform .15s ease;
}
.header__lang svg { width: 24px; height: 24px; flex: none; }
/* Метка в углу - язык, НА КОТОРЫЙ переключит. */
.header__lang-code { position: absolute; right: -4px; bottom: -2px; padding: 1px 4px; border: 2px solid #fff; border-radius: 8px;
background: #01A572; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: .02em; }
.header__lang:active { background: #CDEFDF; transform: scale(.94); }
/* ===== Экспресс-отправка: один вид на плитке, в шторке и на странице товара ===== */
.hot-img-box .hot-express,
.card-info-panel__marks .hot-express,
.photo-badge--express {
background: linear-gradient(135deg, rgba(255, 140, 26, .92) 0%, rgba(245, 118, 0, .92) 100%) !important;
color: #fff !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(245, 118, 0, .3) !important;
font-weight: 700;
}
.hot-img-box .hot-express i, .card-info-panel__marks .hot-express i, .photo-badge--express i { color: #fff !important; }
/* Страница товара: плашка крупная и не должна закрывать фото - полупрозрачная с размытием, без оранжевого свечения. */
.photo-badge--express {
background: linear-gradient(135deg, rgba(240, 110, 0, .64) 0%, rgba(240, 110, 0, .64) 100%) !important;
box-shadow: none !important; text-shadow: none;
}
.hot-img-box .hot-express { font-size: 13px; padding: 4px 10px; min-height: 26px; }
.card-info-panel__marks .hot-express { font-size: 15px; min-height: 38px; padding: 0 14px; }
/* Страница товара: по центру низа фото. */
.photo-badges-logistics { left: 50% !important; right: auto !important; transform: translateX(-50%); align-items: center; }
.photo-badges-logistics .photo-badge.photo-badge--express { height: 40px !important; padding: 0 16px !important; font-size: 15px !important; gap: 8px !important; }
.photo-badges-logistics .photo-badge.photo-badge--express i { font-size: 18px !important; }
@media (max-width: 767px) {
.hot-img-box .hot-express { font-size: 12px; padding: 3px 8px; min-height: 24px; gap: 4px; }
.hot-img-box .hot-express i { font-size: 12px; }
.card-info-panel__marks .hot-express { font-size: 13px; min-height: 32px; padding: 0 12px; }
.photo-badges-logistics .photo-badge.photo-badge--express { height: 32px !important; padding: 0 12px !important; font-size: 13px !important; gap: 6px !important; }
.photo-badges-logistics .photo-badge.photo-badge--express i { font-size: 15px !important; }
}
/* ПК: хит, новинка, предзаказ - подписанными вкладками справа сверху фото (как в шторке), под скидкой. */
@media (min-width: 1025px) {
.hot-img-box .hot-icon-strip { display: none !important; }
.hot-img-box .hot-badge-labels {
display: flex !important; flex-direction: column; align-items: flex-end; gap: 4px;
/* Отступ от края: вкладка у самого края перекрывала скругление рамки фото и торчала уголком. */
position: absolute; top: 8px; right: 0; z-index: 3; pointer-events: none;
}
.hot-img-box .hot-disc ~ .hot-badge-labels, .hot-img-box:has(.hot-disc) .hot-badge-labels { top: 36px; }
.hot-img-box .hot-badge-labels .hbl {
display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px 0 8px;
border-radius: 8px 0 0 8px; background: rgba(255, 255, 255, .92); color: #1F1F1F;
font-size: 13px; font-weight: 700; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}
.hot-img-box .hot-badge-labels .hbl i { font-size: 16px; line-height: 1; }
.hot-img-box .hot-badge-labels .hbl[data-badge="hit"] i { color: #E53935; }
.hot-img-box .hot-badge-labels .hbl[data-badge="new"] i { color: #F5B400; }
.hot-img-box .hot-badge-labels .hbl[data-badge="preorder"] i { color: #8E44AD; }
}
/* Обычная плитка товара - светло-серая с рамкой, чтобы не сливаться с белым фоном (вариант А владельца).
Плитки со своим цветом (скидка, новинка, хит, ждём поступления) не трогаем. */
.hot-card:not(.hot-card--sale):not(.hot-card--new):not(.hot-card--hit):not(.hot-card--out) {
background: #F6F7F8 !important; border-color: #BCC5CE !important;
}
/* Цветные плитки - свой фон и рамка везде, в том числе в «Также рекомендуем» на странице товара. */
.hot-card.hot-card--sale { background: #FFF6EE !important; border-color: #F5BE8A !important; }
.hot-card.hot-card--hit { background: #FFF1F0 !important; border-color: #EDA39D !important; }
.hot-card.hot-card--new { background: #FFFBE5 !important; border-color: #E6CF5E !important; }
/* «Также рекомендуем»: на ПК сравнение в ряду кнопок (слева от «В корзину»), на телефоне - на фото. */
.hot-add-flex .hot-compare.hot-compare--row { display: none !important; }
@media (min-width: 1025px) {
.hot-card--vertical .hot-img-box > .hot-compare { display: none !important; }
.hot-card--vertical .hot-add-flex .hot-compare.hot-compare--row,
.hot-card--vertical .hot-add-flex .hot-fav {
display: inline-flex !important; align-items: center; justify-content: center; position: static;
flex: 0 0 44px; width: 44px; height: 44px; padding: 0;
background: #fff; border: 1px solid #E0E0E0; border-radius: 12px; box-shadow: none;
}
.hot-card--vertical .hot-add-flex .hot-compare.hot-compare--row.is-active { background: #168BD4; border-color: #168BD4; }
.hot-card--vertical .hot-add-flex .hot-compare.hot-compare--row.is-active i { color: #fff; }
}
/* Метки «Хит», «Новинка», «Скидка» на главном фото товара - крупнее и заметнее на белом фото. */
.product-chips .chip { height: 38px !important; padding: 0 10px 0 14px !important; font-size: 15px !important; gap: 8px !important;
border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
.product-chips .chip i { font-size: 19px !important; }
@media (max-width: 600px) {
.product-chips { gap: 6px !important; }
.product-chips .chip { height: 34px !important; font-size: 14px !important; padding: 0 9px 0 12px !important; }
.product-chips .chip i { font-size: 17px !important; }
}
/* ===== Кнопка «Смотреть, как купить» на карточке товара (lib/buy-video.php) ===== */
.zd-buyvid { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 20px; }
.zd-buyvid__btn {
display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 24px 0 10px; border: 0;
border-radius: 16px; background: #01A572; color: #fff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
box-shadow: 0 6px 18px rgba(1, 165, 114, .3); transition: background .15s ease, transform .15s ease;
}
.zd-buyvid__btn:hover { background: #018A60; }
.zd-buyvid__btn:active { transform: scale(.98); }
.zd-buyvid__ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .2); display: grid; place-items: center; }
.zd-buyvid__ic svg { width: 22px; height: 22px; }
.zd-buyvid__alt { font-size: 14px; color: #4B5563; }
.zd-buyvid__alt button { border: 0; background: none; padding: 6px 2px; color: #01704F; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.zd-buyvid__on-m { display: none; }
@media (max-width: 1024px) { .zd-buyvid__on-m { display: inline; } .zd-buyvid__on-d { display: none; } .zd-buyvid__btn { width: 100%; max-width: 420px; } }
.zd-buyvid-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(17, 24, 39, .75); }
.zd-buyvid-modal__box { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
.zd-buyvid-modal__box--mobile { width: min(420px, 100%); aspect-ratio: 9 / 16; max-height: calc(100vh - 32px); }
.zd-buyvid-modal__box iframe { width: 100%; height: 100%; border: 0; display: block; }
.zd-buyvid-modal__x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #111827; font-size: 26px; line-height: 1; cursor: pointer; }
.product-actions-row:has(.zd-buyvid) { flex-wrap: wrap; justify-content: center; }
.product-actions-row > .zd-buyvid { flex: 1 1 100%; }
/* Производитель на странице товара - без серой подложки, логотип и название прямо на фоне. */
.main-info .product-brand-row { background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Две плитки в ряд на самых узких телефонах: «В корзину» без значка тележки и с меньшими полями - текст влезает целиком. */
@media (max-width: 359px) {
.hot-card--vertical .hot-add-flex { gap: 6px; }
.hot-card--vertical .hot-add { padding-left: 6px !important; padding-right: 6px !important; }
.hot-card--vertical .hot-add i { display: none; }
}
/* Шапка телефона: содержимое по центру высоты - сверху и снизу поровну (было 20px сверху и 4px снизу). */
@media (max-width: 425px) {
.header { padding-top: 0 !important; padding-bottom: 0 !important; display: flex; flex-direction: column; justify-content: center; }
}
/* Картинки из текстов (описание, статья, новость): размеры подставляет zd_content_img_dims(), здесь - не шире блока и без искажения. */
.description-content img, .article-body img, .author-about__text img { max-width: 100%; height: auto; }
/* Логотип в подвале: высота по пропорции, когда ширину ужимает телефон (было 160x78 - сплющен). */
.footer-logo { height: auto !important; max-width: 100%; }
/* Картинка с размерами в разметке не сплющивается, когда вёрстка ужимает ширину: высота по пропорции файла.
:where() - нулевая специфичность: где CSS сам задаёт высоту (логотипы, плитки), он и побеждает. */
:where(img[width][height]) { height: auto; }
/* Плитка: русское название до 3 строк, второе до 2, дальше многоточие (полностью - на странице товара). */
.hot-card .hot-name-ru { -webkit-line-clamp: 3; }
.hot-card .hot-name-en { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Кнопка «Показать N товаров»: число сменилось - короткая светлая вспышка и толчок (js/filters.js). */
@keyframes zdCountFlash {
0% { background-color: #01A572; transform: scale(1); }
30% { background-color: #F57600; transform: scale(1.04); }
60% { background-color: #F57600; transform: scale(1); }
100% { background-color: #01A572; transform: scale(1); }
}
.zd-count-flash { animation: zdCountFlash 1.1s ease-in-out; }
/* Выключенные анимации в системе (tokens.css гасит все): толчка нет, но смена цвета - не движение, её оставляем. */
@keyframes zdCountFlashColor { 0%, 100% { background-color: #01A572; } 30%, 60% { background-color: #F57600; } }
@media (prefers-reduced-motion: reduce) { .zd-count-flash { animation: zdCountFlashColor 1.1s ease-in-out !important; animation-duration: 1.1s !important; } }
/* Подложка фото квадратная с белым фоном - её угол торчал за скругление карточки. Скругляем по внутреннему краю (12px карточки - 1px рамки). */
.hot-card .hot-img-box, .hot-card .hot-img-box img { border-radius: 11px; }
/* Листание фото на плитке (js/catalog.js): полоски по числу фото внизу снимка; экспресс поднимается над ними. */
.hot-img-box { position: relative; }
.hot-photo-dots { position: absolute; left: 10px; right: 10px; bottom: 5px; z-index: 4; display: flex; gap: 4px; pointer-events: none; }
.hot-photo-dots i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 3px rgba(0, 0, 0, .45); transition: background .15s ease; }
.hot-photo-dots i.is-on { background: #01A572; }
.hot-img-box:has(.hot-photo-dots) .hot-express { bottom: 14px; }
.hot-img-box[data-photo-swipe] img { touch-action: pan-y; }
/* Автозаполнение и вставка в поля: Chrome красит поле голубым. Не заливаем своим цветом (у полей разный фон -
серый, зелёный при фокусе, розовый при ошибке), а не даём голубому проявиться вовсе - поле остаётся своего цвета. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
-webkit-text-fill-color: inherit; caret-color: inherit; transition: background-color 600000s 0s, color 600000s 0s;
}
/* Нижнее меню телефона: подписи мельче, на узких экранах не упираются друг в друга (просьба владельца). */
@media (max-width: 1024px) {
.mobile-nav .header__nav-text { font-size: 11px; font-weight: 500; letter-spacing: -.01em; }
}
/* Переключатель языка в подвале: одна «таблетка» из двух половин, всегда в одну строку; текущий язык - зелёная половина. */
.footer-lang__seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 12px; background: #EEF2F0; flex: 0 0 auto; }
.footer-lang__seg .footer-lang__opt { min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: #2E3A35; font-weight: 500; gap: 6px; }
.footer-lang__seg .footer-lang__opt b { font-weight: 700; font-size: 12px; letter-spacing: .06em; opacity: .7; }
.footer-lang__seg .footer-lang__opt.is-current { background: #01A572; color: #fff; box-shadow: 0 1px 3px rgba(1, 107, 74, .25); }
.footer-lang__seg .footer-lang__opt.is-current b { opacity: 1; }
.footer-lang__seg a.footer-lang__opt:hover { background: #fff; color: #016B4A; }
.footer-lang { flex-wrap: nowrap; }
/* «Жалобы и предложения:» - длинная подпись; почта сразу за ней, а при нехватке места - строкой ниже, а не на краю. */
.footer-contact--compact p { flex-wrap: wrap; column-gap: 6px; row-gap: 2px; }
.footer-contact--compact .ct-city { white-space: nowrap; }
/* Подвал столбиком (телефон/планшет): переключатель языка по левому краю, как соцсети и контакты; вправо - только на ПК. */
@media (max-width: 1023px) { .footer-lang { margin-left: 0; align-self: flex-start; } }
/* Кружок «Доставка»/«Оплата» с роликом-инструкцией: значок ▶ в углу - нажатие открывает видео (lib/buy-video.php). */
.info-action-btn--video .info-action-btn__icon { position: relative; }
.info-action-btn--video .info-action-btn__icon::after {
content: ""; position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%;
background: #01A572 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23fff'/%3E%3C/svg%3E") center / 14px no-repeat;
border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
/* Экспресс полупрозрачный и без теней; белые бейджи (хит, новинка) - белые, почти непрозрачные (владелец 08.10). */
.hot-img-box .hot-express, .card-info-panel__marks .hot-express {
background: linear-gradient(135deg, rgba(240, 110, 0, .64) 0%, rgba(240, 110, 0, .64) 100%) !important;
box-shadow: none !important; text-shadow: none !important;
}
/* Только белые бейджи-вкладки; цветные .photo-badge (наличие, предзаказ) держат свой цвет. */
.hot-img-box .hot-badge-labels .hbl, .card-info-panel__pills .hbl {
background: rgba(255, 255, 255, .78) !important; box-shadow: none !important;
}
/* Хлебные крошки на телефоне компактнее: 12px и меньше воздуха - над товарами они занимали лишнюю строку. */
@media (max-width: 767px) {
.breadcrumbs-link, .breadcrumbs-text { font-size: 12px; }
.breadcrumbs-list { padding-top: 2px; padding-bottom: 2px; }
.breadcrumbs { padding-bottom: 2px; }
/* Меньше пустоты вокруг крошек: было по 12px сверху и снизу. */
main > nav.breadcrumbs:first-child { margin-top: -6px; }
.catalog-section.catalog-page { padding-top: 6px; }
}
/* Окно «Вы выбрали» на телефоне - как фильтр: поля по бокам, стоит вплотную на нижнем меню, низ прямой;
меню остаётся видно поверх затемнения - окно читается его частью. */
@media (max-width: 1024px) {
.zd-packing-panel {
left: 8px; right: 8px; bottom: calc(var(--zd-nav-base) + var(--zd-nav-lift));
border-radius: 22px 22px 0 0;
max-height: calc(90dvh - var(--zd-nav-base) - var(--zd-nav-lift));
--zdpp-ty: calc(100% + var(--zd-nav-base) + var(--zd-nav-lift));
}
.zd-packing-panel.active { --zdpp-ty: 0; }
body:has(.zd-packing-panel.active) .mobile-nav { z-index: 10003; }
}
/* Страница товара: «Экспресс отправка» не впритык к точкам листания фото - зазор 8px. */
.photo-badges-logistics { bottom: 52px !important; }
/* tokens.css при выключенных анимациях гасит ВСЕ анимации (.01ms) - переливанию загрузки возвращаем ход. */
@media (prefers-reduced-motion: reduce) {
.skel, .skel *, .hot-card .hot-img-box::before, .product-top .hot-img-box::before, .blog-featured-img::before, .blog-card-img::before,
.article-hero::before, .favorite-item-image::before, .cart-item-image::before, .cmp-img-wrap::before, img.zd-img-wait {
animation-duration: 1.8s !important; animation-iteration-count: infinite !important;
}
}
/* Ссылка в строке «С компьютера?» - как кнопка рядом (когда ролика нет, это ). */
.zd-buyvid__alt a { padding: 6px 2px; color: #01704F; font-weight: 700; text-decoration: underline; }
/* Вход: «Запомнить меня» и «Забыли пароль?» - каждое в одну строку, по центру по высоте, галочка вровень с текстом. */
.remember-forgot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.remember-forgot .remember-me { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.remember-forgot .remember-me input { margin: 0; flex: 0 0 auto; }
.remember-forgot .remember-label, .remember-forgot .forgot-password, .remember-forgot .forgot-password a { white-space: nowrap; font-size: 14px; line-height: 1.2; margin: 0; }
/* Крестик закрытия окон - один на сайт: значок f000 из шрифта иконок zeldomkz в светлом кружке 36px
(как в фильтре и «Характеристиках»). Старый текстовый «×» в разметке прячем, зона нажатия 44px. */
.zd-packing-panel__close, .zd-restock-modal__close, .modal-close, .share-modal-close, .zd-buyvid-modal__x, .zd-pdfv__x,
.reel-modal__close, .close-modal, .video-close, .zd-photo-editor-x {
position: relative; width: 44px !important; height: 44px !important; min-width: 44px; padding: 0 !important; border: 0 !important;
background: transparent !important; box-shadow: none !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; cursor: pointer;
}
.zd-packing-panel__close::before, .zd-restock-modal__close::before, .modal-close::before, .share-modal-close::before, .zd-buyvid-modal__x::before, .zd-pdfv__x::before,
.reel-modal__close::before, .close-modal::before, .video-close::before, .zd-photo-editor-x::before {
content: "\f000"; font-family: 'zeldomkz'; position: absolute; left: 4px; top: 4px; width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: #3A3F44; background: #F1F3F5;
transition: background .15s ease;
}
.zd-packing-panel__close:hover::before, .modal-close:hover::before, .share-modal-close:hover::before, .zd-restock-modal__close:hover::before { background: #E3E7EB; color: #111; }
/* Кабинет: ряд «Выйти из аккаунта» - значок и текст по той же линии, что у «Мои данные» и «Новости сайта». */
@media (max-width: 768px) {
.zd-acc-list .zd-acc-list__row.logout-mobile {
margin: 0 !important; width: auto !important; padding: 12px 16px !important; gap: 14px !important;
justify-content: flex-start !important; text-align: left !important; box-sizing: border-box;
}
}
/* Кабинет без подвала на любой ширине (lib/footer.php). */
.footer.footer--hide-all { display: none !important; }
/* Открытый каталог в шапке перекрывает боковое меню кабинета: оно ниже по смыслу, сквозь прозрачную подложку
каталога торчать не должно. */
body:has(.catalog-overlay.active) > aside { visibility: hidden; }
/* Страница товара (владелец 08.10): скидка - розовая плашка «-N%» в верхнем углу фото, как на плитке;
белые метки «Хит»/«Новинка» вплотную к правому краю фото, ниже скидки; фоны прозрачнее, без размытия. */
.product-disc { position: absolute; top: 0; right: 0; z-index: 6; min-height: 34px; padding: 0 12px; font-size: 16px; border-radius: 0 12px 0 12px; }
.product-chips { right: 0 !important; top: 14px !important; }
.product-chips.product-chips--with-disc { top: 48px !important; }
.product-chips .chip { border-radius: 10px 0 0 10px !important; background: rgba(255, 255, 255, .78) !important; box-shadow: none !important; }
@media (max-width: 600px) {
.product-disc { min-height: 30px; font-size: 14px; padding: 0 10px; }
.product-chips.product-chips--with-disc { top: 42px !important; }
}
/* Описание товара - одна карточка на всех экранах (на телефоне была, на компьютере нет): серая плашка с рамкой,
затухание под «Читать все» того же цвета, а не белое пятно на сером. */
.product-description { background: #F7F8F9; border: 1px solid #E3E7EA; border-radius: 16px; padding: 14px 18px; margin-top: 12px; }
.product-description .description-content::after {
background: linear-gradient(to bottom, rgba(247, 248, 249, 0) 0%, rgba(247, 248, 249, .92) 80%, #F7F8F9 100%);
}
/* Бейджи на фото: чуть размытия под плашкой (2px) - надпись читается на пёстком фото, фон при этом прозрачный (владелец 08.10). */
.hot-img-box .hot-express, .card-info-panel__marks .hot-express, .photo-badge--express,
.hot-img-box .hot-badge-labels .hbl, .card-info-panel__pills .hbl, .product-chips .chip {
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
/* Телефон, страница товара: скидка - такая же вкладка, как «Хит продаж» (одна высота, скругление только слева, вровень по правому краю фото). */
@media (max-width: 600px) {
.product-disc, .hot-img-box .product-disc { top: 14px; height: 34px; min-height: 34px; padding: 0 12px; font-size: 14px; border-radius: 10px 0 0 10px; }
.product-chips.product-chips--with-disc { top: 54px !important; }
}
/* Зелёная полоска загрузки при переходе по ссылке (js/page-progress.js). Движение - transform, без перерисовки страницы. */
.zd-page-progress {
position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000;
background: #01A572; box-shadow: 0 0 8px rgba(1, 165, 114, .6);
transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none;
transition: transform .2s ease-out, opacity .3s ease;
}
.zd-page-progress.is-on { opacity: 1; }
/* «Нужна консультация? / Не нашли ответ?» - строка и две кнопки вместо абзаца со ссылками (команда, вопросы-ответы). */
.zd-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: 24px 0 40px; }
.zd-ask__q { flex-basis: 100%; text-align: center; font-size: 15px; font-weight: 600; color: #1f1f1f; }
.zd-ask__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 22px;
border: 1.5px solid #01A572; background: #fff; color: #016B4A; font-size: 14px; font-weight: 600; text-decoration: none; }
.zd-ask__btn:hover { background: #ECFDF5; }
.zd-ask__btn--wa { background: #01A572; color: #fff; }
.zd-ask__btn--wa:hover { background: #018f63; }
.faq .zd-ask { margin: 0 0 32px; }
/* Переливание на самой картинке, пока она не пришла (js/img-loading.js, список SELF): для слайдера,
логотипов, команды - там подложка под контейнером сломала бы вёрстку. */
img.zd-img-wait {
background-image: var(--zd-skel);
background-size: 250% 100%;
animation: skelShimmer 1.8s linear infinite;
}
/* Окно «Уведомить о поступлении»: поле и кнопка как во всех формах (52px, 16px), подсказки не мельче 14px, крестик 44px. */
.zd-restock-modal__phone { height: 52px; font-size: 16px; border-radius: 12px; padding: 0 16px; box-sizing: border-box; }
.zd-restock-modal__submit { min-height: 52px; font-size: 16px; border-radius: 12px; }
.zd-restock-modal__hint, .zd-restock-modal__error { font-size: 14px; }
.zd-restock-modal__close { width: 44px; height: 44px; }
/* Меню каталога: белый фон до краёв экрана по бокам и снизу - на широком экране панель (max 1900px) не закрывала страницу под собой. */
.catalog-panel { box-shadow: 0 0 0 100vw #fff; clip-path: inset(0 -100vw -100vw -100vw); }
/* Страницы кабинета с боковым меню (избранное, сравнение) - без хлебных крошек, как остальные страницы кабинета:
навигацию даёт меню, а в поиск эти страницы не идут. Гостю (без меню) крошки остаются. */
body > aside ~ main nav.breadcrumbs { display: none; }
/* Окно «Уведомить о поступлении»: крестик в правом верхнем углу, а не поверх заголовка (общее правило крестика делало его position: relative). */
.zd-restock-modal__close { position: absolute !important; top: 8px; right: 8px; left: auto; }
.zd-restock-modal h2 { padding-right: 44px; }
/* Шторка «Характеристики»: фасовка под английским названием, зелёным - как в заказе и «Купить снова». */
.card-info-panel__packing { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: #01A572; }
/* Бейджи на фото - внутри рамки, с отступом от края, а не на линии обводки (владелец 08.10): плитка, страница товара, шторка «Характеристики». */
.hot-img-box .hot-disc { top: 8px !important; right: 8px !important; border-radius: 8px !important; }
@media (min-width: 1025px) {
.hot-img-box .hot-badge-labels { right: 8px !important; }
.hot-img-box .hot-disc ~ .hot-badge-labels, .hot-img-box:has(.hot-disc) .hot-badge-labels { top: 40px !important; }
.hot-img-box .hot-badge-labels .hbl { border-radius: 8px !important; }
}
.product-disc { top: 10px !important; right: 10px !important; border-radius: 10px !important; }
.product-chips { right: 10px !important; }
.product-chips .chip { border-radius: 10px !important; }
.card-info-panel__flags { top: 10px !important; right: 10px !important; border-radius: 12px; overflow: hidden; }
.card-info-panel__flags .hbl:last-child, .card-info-panel__flags .hot-disc:last-child { border-radius: 0 !important; }
.product-chips.product-chips--with-disc { top: 54px !important; }
@media (max-width: 600px) { .product-disc, .hot-img-box .product-disc { top: 10px !important; } .product-chips.product-chips--with-disc { top: 52px !important; } }
/* Значки интерфейса - шрифт zd-ui (iconfont/sets/zd-ui, 6 КБ): вместо встроенных svg. Шрифт скачивается только там, где такой значок есть на странице. */
@font-face { font-family: 'zd-ui'; src: url('../fonts/ui.woff2?v=1791544369') format('woff2'); font-weight: normal; font-style: normal; font-display: block; }
:where(.zi) { font-family: 'zd-ui' !important; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; flex: none; vertical-align: middle; -webkit-font-smoothing: antialiased; speak: never; }
/* ==== .zi: значки шрифта zd-ui вместо svg (сгенерировано по правилам svg выше) ==== */
@media (min-width: 769px) { .footer-social-bg .zi { width: 18px; font-size: 18px; height: 18px; } }
@media (min-width: 769px) { .app-card .zi { width: 16px; font-size: 16px; height: 18px; flex-shrink: 0; } }
@media (min-width: 769px) { .app-card .zi { color: #fff; } }
@media (max-width: 768px) { .footer-social-bg .zi { width: 16px; font-size: 16px; height: 16px; } }
@media (max-width: 768px) { .app-card .zi { width: 14px; font-size: 14px; height: 16px; flex-shrink: 0; } }
@media (max-width: 768px) { .app-card .zi { color: #fff; } }
.breadcrumbs-separator .zi { opacity: 0.6; }
.header__lang .zi { width: 24px; font-size: 24px; height: 24px; flex: none; }
.zd-buyvid__ic .zi { width: 22px; font-size: 22px; height: 22px; }
/* «Ждём поступления» на всю ширину низа фото: полоски листания - над плашкой, а не поверх неё. */
.hot-img-box:has(.hot-out-overlay) .hot-photo-dots { bottom: 35px; }
@media (max-width: 767px) { .hot-img-box:has(.hot-out-overlay) .hot-photo-dots { bottom: 27px; } }
/* Подвал по ширине шапки: те же 1900px и те же боковые отступы, иначе на широком мониторе он шире шапки и края не совпадают. */
.footer { max-width: 1900px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
@media (max-width: 992px) { .footer { padding-left: 12px; padding-right: 12px; } }
/* Кнопка обратного звонка MindSales (js/call-widget.js): на телефоне - над нижним меню, в корзине и на карточке - выше нижней панели покупки. Пульсация - зелёное кольцо. */
#ms5WidgetButton { left: 32px !important; right: auto !important; bottom: 96px !important; opacity: 1 !important; border-radius: 50%; animation: zd-call-pulse 2s ease-out infinite; }
#ms5WidgetButton:hover { transform: scale(1.06) !important; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
#ms5WidgetButton { left: 14px !important; right: auto !important; bottom: calc(120px + var(--zd-nav-lift)) !important; }
body:has(.mobile-checkout-btn) #ms5WidgetButton { bottom: calc(168px + var(--zd-nav-lift)) !important; }
}
/* Окно виджета - наш шрифт, крупные поле и кнопка (аудитория 40-65+: 16px и 48px). */
.ms5ModalCall .ms5ModalCall__box { border-radius: 20px; max-width: calc(100vw - 32px); }
.ms5ModalCall .ms5ModalCall__head, .ms5ModalCall .ms5ModalCall__body, .ms5ModalCall .ms5ModalCall__phone, .ms5ModalCall .ms5ModalCall__submit { font-family: inherit; }
.ms5ModalCall .ms5ModalCall__head { font-weight: 700; line-height: 1.25; }
.ms5ModalCall .ms5ModalCall__body { line-height: 1.4; }
.ms5ModalCall .ms5ModalCall__form { align-items: center; gap: 12px; }
.ms5ModalCall .ms5ModalCall__phone-wrap { flex: 0 0 220px; }
.ms5ModalCall .ms5ModalCall__phone { height: 48px; font-size: 16px; border-radius: 12px; padding: 0 14px; border-color: #D1D5DB; }
.ms5ModalCall .ms5ModalCall__submit { height: 48px; font-size: 16px; font-weight: 700; border-radius: 12px; padding: 0 22px; }
@media (max-width: 600px) {
.ms5ModalCall .ms5ModalCall__box { max-width: none; }
.ms5ModalCall .ms5ModalCall__form, .ms5ModalCall .ms5ModalCall__submit-wrap, .ms5ModalCall .ms5ModalCall__submit { width: 100%; max-width: 300px; }
.ms5ModalCall .ms5ModalCall__phone-wrap { flex: 0 0 auto; width: 100%; max-width: 300px; margin: 0; }
}
/* Пункт «Позвонить» в меню (zd_nav_call_item). Номер прячется визуально, но остаётся в разметке: виджет MindSales подменяет его. */
.header__nav-item--call .nav-call-phone { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.header__nav-item--call { position: relative; }
.header__nav-item--call .zi.nav-icon { font-size: 22px; color: #fff; }
/* Оранжевый - как у скидки и «В корзину»: звонок выделяется среди серых пунктов. */
.mobile-nav .header__nav-item--call .zi,
.mobile-nav .header__nav-item--call .header__nav-text,
.mobile-nav .header__nav-item--call:hover .zi,
.mobile-nav .header__nav-item--call:active .zi { color: #FF7700 !important; }
@keyframes zd-call-pulse { 0% { box-shadow: 0 0 0 0 rgba(1,165,114,.55), 0 6px 18px rgba(1,165,114,.35); } 70% { box-shadow: 0 0 0 22px rgba(1,165,114,0), 0 6px 18px rgba(1,165,114,.35); } 100% { box-shadow: 0 0 0 0 rgba(1,165,114,0), 0 6px 18px rgba(1,165,114,.35); } }
/* Пульсация виджета - сигнал «можно позвонить», видны и при выключенных анимациях (tokens.css гасит всё до .01ms). */
@media (prefers-reduced-motion: reduce) {
#ms5WidgetButton { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
}
/* Подвал: три колонки по 200px + промежутки не влезали в окно ~760px, третья уезжала за край. Не влезла - переносится вниз. */
.footer-columns { flex-wrap: wrap; row-gap: 24px; min-width: 0; }
.footer-col { min-width: min(200px, 100%); }
@media (max-width: 1100px) { .footer-columns { column-gap: 32px; } }
/* Кнопка «Назад» в левом верхнем углу фото товара. */
.product-back { position: absolute; top: 10px; left: 10px; z-index: 6; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #1f2937; box-shadow: 0 2px 8px rgba(15, 23, 42, .15); text-decoration: none; transition: background-color .15s, transform .15s; }
.product-back .zi { font-size: 22px; }
.product-back:hover { background: #fff; color: #01A572; }
.product-back:active { transform: scale(.94); }
/* «Позвонить» в нижнем меню - как соседние пункты (размер значка и подписи), отличается только цветом. Размер 23px - рисунок трубки той же высоты, что у соседних значков (замер по пикселям). */
.mobile-nav .header__nav-item--call .zi { font-size: 23px; height: 23px; display: flex; align-items: center; justify-content: center; }
/* Фасовка на плитке каталога (lib/product-card.php) - одной строкой под названием, длинный список обрезается многоточием. */
.hot-pack-line { margin: 4px 0 2px; font-size: 14px; line-height: 1.35; color: #374151; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hot-pack-line__k { font-weight: 500; color: #6B7280; }
/* «В корзину» на узкой плитке (ноутбук 1220-1260 и 1460-1500px, сетка добавляет колонку): значок тележки уходит, текст целиком. */
.hot-add-flex { container-type: inline-size; }
@container (max-width: 236px) { .hot-add-flex .hot-add:not(.hot-add--notify) > i { display: none; } }
/* Шапка ПК на 1025-1199px: с пунктом «Позвонить» меню (495px) наезжало на поиск. Плотнее промежутки, поиск может сжаться - все пункты и подписи на месте. */
@media (min-width: 1025px) and (max-width: 1199px) {
.header__nav.desktop-nav { gap: 12px; padding-left: 14px; padding-right: 14px; }
/* Поле поиска держало ширину по атрибуту size (~236px) и не уступало место меню. */
.header__top .search, .search__wrapper, .search__wrapper .search__input { min-width: 0; }
}
/* Трубка «Позвонить» в нижнем меню покачивается раз в 2,4 с; видно и при выключенных анимациях (tokens.css гасит их до .01ms). */
.mobile-nav .header__nav-item--call .zi { animation: zd-call-ring 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes zd-call-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 80% { transform: rotate(12deg); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) {
.mobile-nav .header__nav-item--call .zi { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
}
/* «Позвонить» в шапке ПК: по наведению - окно с номерами (главный первым) и мессенджерами (lib/view/_nav.php, zd_nav_call_item). */
.nav-call { position: relative; display: flex; }
.nav-call__pop {
position: absolute; top: 100%; right: -14px; z-index: 1000; width: 356px; padding-top: 12px;
opacity: 0; visibility: hidden; transform: translateY(8px);
/* Закрытие плавное и с паузой 0,15 с: окно не пропадает, если мышь чуть соскользнула. */
transition: opacity .28s ease .15s, transform .28s ease .15s, visibility 0s linear .43s;
}
.nav-call__pop::before { content: ""; position: absolute; inset: 12px 0 0; background: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 0 0 1px rgba(15, 23, 42, .06); z-index: -1; }
.nav-call:hover .nav-call__pop, .nav-call:focus-within .nav-call__pop { opacity: 1; visibility: visible; transform: none; transition: opacity .28s ease, transform .28s ease, visibility 0s; }
/* tokens.css при выключенных анимациях гасит переходы - окну возвращаем плавность. */
@media (prefers-reduced-motion: reduce) {
.nav-call__pop { transition-duration: .28s, .28s, 0s !important; transition-delay: .15s, .15s, .43s !important; }
.nav-call:hover .nav-call__pop, .nav-call:focus-within .nav-call__pop { transition-duration: .28s, .28s, 0s !important; transition-delay: 0s, 0s, 0s !important; }
}
.nav-call__pop > * { margin-left: 18px; margin-right: 18px; }
.nav-call__title { padding-top: 16px; font-size: 14px; font-weight: 600; color: #6B7280; }
.nav-call__main { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 22px; font-weight: 800; color: #01A572; text-decoration: none; white-space: nowrap; }
.nav-call__main .zi { font-size: 20px; }
.nav-call__main:hover { color: #018f63; }
.nav-call__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; margin-top: 12px; padding: 10px 12px; background: #F6F7F8; border-radius: 12px; }
.nav-call__list a { padding: 5px 0; font-size: 14px; font-weight: 600; color: #1f2937; text-decoration: none; white-space: nowrap; }
.nav-call__list a:hover { color: #01A572; }
.nav-call__msg { display: flex; gap: 8px; margin-top: 12px; padding-bottom: 18px; }
.nav-call__m { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff; text-decoration: none; }
.nav-call__m i { font-size: 16px; }
.nav-call__m--wa { background: #25D366; }
.nav-call__m--tg { background: #229ED9; }
.nav-call__m:hover { filter: brightness(.94); }
/* Шапка и планка фильтров прячутся плавно и при выключенных анимациях Windows:
у владельца они выключены, и общее правило tokens.css делало рывок. */
.header,
.toolbar {
transition: transform .45s cubic-bezier(.22, 1, .36, 1) !important;
}