- посетитель сам разворачивает список кликом. */
.product-delivery-methods {
margin: 4px 0 16px;
padding: 12px 16px;
background: #FBFBFB;
border: 1px solid #E8E8E8;
border-radius: 12px;
}
.product-delivery-methods summary {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
font-weight: 600;
color: #1f1f1f;
cursor: pointer;
list-style: none;
}
.product-delivery-methods summary::-webkit-details-marker { display: none; }
.product-delivery-methods summary > span:not(.product-delivery-methods__toggle) { flex: 1; }
.product-delivery-methods__toggle {
font-size: 20px;
font-weight: 300;
color: #707070;
line-height: 1;
transition: transform 0.25s ease, color 0.25s ease;
}
.product-delivery-methods[open] .product-delivery-methods__toggle {
transform: rotate(45deg);
color: #01A572;
}
/* .read-more рассчитан на margin-top: -40px сразу после .description-content
(наезжает на градиент-затемнение) - когда между ними встал этот блок,
возвращаем обычный отступ, иначе кнопка наедет на блок доставки. */
.product-delivery-methods + .read-more {
margin-top: 16px;
}
/* Без иконок - заметность через карточки с тенью + крупный пронумерованный
значок (CSS-counter, не картинка), подсвечивается и приподнимается на hover. */
.product-delivery-methods ul {
counter-reset: delivery-method;
display: flex;
flex-direction: column;
gap: 12px;
margin: 12px 0 0;
padding: 16px 0 0;
border-top: 1px solid #E8E8E8;
list-style: none;
}
.product-delivery-methods ul li {
counter-increment: delivery-method;
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: #fff;
border: 1px solid #E8E8E8;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(16, 24, 40, 0.04);
font-size: 14.5px;
font-weight: 700;
color: #1f2937;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.product-delivery-methods ul li:hover {
background: #fff;
border-color: rgba(1, 165, 114, 0.35);
box-shadow: 0 6px 16px rgba(1, 165, 114, 0.16);
transform: translateY(-1px);
}
.product-delivery-methods ul li::before {
content: counter(delivery-method);
flex: 0 0 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, #01A572 0%, #018758 100%);
box-shadow: 0 3px 8px rgba(1, 165, 114, 0.3);
color: #fff;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* ===== FEATURES ===== */
.product-features {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid #E8E8E8;
}
.feature {
display: flex;
align-items: center;
text-align: center;
gap: 12px;
background: #FBFBFB;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid #E8E8E8;
transition: background var(--zd-dur) var(--zd-ease),
border-color var(--zd-dur) var(--zd-ease);
}
/* Цвет иконок характеристик задаёт РАЗДЕЛ товара (sections.icon_color,
миграция 102): переменную ставит products/card.php прямо на
.product-features. Не задан - остаётся фирменный зелёный, как было у всех
разделов до.
*/
.feature i {
color: var(--zd-feature-icon, #01A572);
font-size: 28px;
}
.feature span {
font-size: 16px;
font-weight: 600;
color: #474647;
line-height: 1.4;
}
/* ===== BRAND ===== */
.product-brand {
display: flex;
align-items: center;
gap: 20px;
padding: 16px 0;
border-bottom: 1px solid #E8E8E8;
border-top: 1px solid #E8E8E8;
}
.product-brand-flex{
display: flex;
align-items: center;
gap: 16px;
}
.product-brand span {
font-size: 18px;
font-weight: 500;
color: #737373;
}
/* Логотип производителя вписывается в РАМКУ, а не в квадрат.
Квадрат 40x40 душил широкие логотипы: в справочнике они все широкие
(~250px при высоте 41-72), и object-fit вписывал Sakata 254x41 как 40x6 -
шесть пикселей высоты, мельче, чем тот же логотип в листинге товаров.
Ограничиваем обе стороны, а размер выбирает соотношение сторон. */
.product-brand img {
/* 180x40 вместо 140x32: на странице товара места вдоволь, а знак с
подписью мелким шрифтом («ГАВРИШ семена», «YUKSEL TOHUM») на 32px читался
не лучше, чем в плитке.
*/
max-width: 180px;
max-height: 40px;
width: auto;
height: auto;
object-fit: contain;
}
/* Флаг страны вместо логотипа - у записи-страны логотипа нет и быть не может
(products/card.php). Размер по строке подписи; width/height задаём явно,
иначе общее правило .product-brand img выше растянуло бы его по своим
правилам. Скругление и рамка - те же, что у флага на плитке (main.css). */
.product-brand .product-flag {
width: 30px;
height: 20px;
max-width: 30px;
max-height: 20px;
flex-shrink: 0;
object-fit: cover;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.product-brand strong {
font-size: 18px;
font-weight: 700;
color: #000;
}
/* ===== DESCRIPTION ===== */
.product-description {
padding: 14px 18px;
border-bottom: 1px solid #E3E7EA;
position: relative;
transition: border-color 0.3s ease;
}
/* Декоративной зелёной чёрточки под h2 (::after) нет. Причина: h2 здесь - не единственный заголовок раздела, а
ЛЮБОЙ h2 внутри импортированного из старой базы текста описания (см.
.description-summernote h2 ниже) - таких заголовков в одной карточке может
быть много подряд, и абсолютно спозиционированная полоска у каждого плыла
по тексту как попало.
*/
.product-description h2 {
font-size: 22px;
font-weight: 700;
color: #000;
margin-top: 0;
margin-bottom: 16px;
}
.product-description h3 {
font-size: 18px;
font-weight: 600;
color: #474647;
margin: 12px 0 12px;
transition: color 0.3s ease; /* Плавное изменение цвета */
}
.product-description p {
font-size: 16px;
line-height: 1.6;
font-weight: 500;
color: #000;
margin: 20px 0px;
transition: transform 0.2s ease; /* Для возможных эффектов */
}
/* ===================================================================
Рендер HTML из Summernote (.description-summernote)
— таблицы, списки, цитаты, картинки. Резильентно к любой разметке.
=================================================================== */
.description-summernote {
font-size: 16px;
line-height: 1.6;
color: #000;
word-wrap: break-word;
overflow-wrap: anywhere; /* длинные слова/URL не ломают вёрстку */
}
/* Сбрасываем возможные inline-стили width/height, которые ставит Summernote */
.description-summernote [style*="width"] { max-width: 100%; }
.description-summernote p {
font-size: 16px;
line-height: 1.6;
margin: 12px 0;
}
.description-summernote h1,
.description-summernote h2,
.description-summernote h3,
.description-summernote h4,
.description-summernote h5,
.description-summernote h6 {
margin: 24px 0 12px;
font-weight: 700;
color: #1f1f1f;
line-height: 1.3;
}
.description-summernote h1 { font-size: 24px; }
.description-summernote h2 { font-size: 22px; }
.description-summernote h3 { font-size: 20px; }
.description-summernote h4 { font-size: 18px; }
.description-summernote h5 { font-size: 16px; }
.description-summernote h6 { font-size: 15px; }
.description-summernote a {
color: #01A572;
text-decoration: underline;
text-underline-offset: 2px;
}
.description-summernote a:hover { color: #018f63; }
.description-summernote strong,
.description-summernote b { font-weight: 700; }
.description-summernote em,
.description-summernote i { font-style: italic; }
.description-summernote u { text-decoration: underline; }
.description-summernote s,
.description-summernote del { text-decoration: line-through; color: #888; }
.description-summernote mark { background: #fff39a; padding: 0 3px; border-radius: 3px; }
.description-summernote code,
.description-summernote kbd {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.9em;
background: #f4f5f7;
padding: 2px 8px;
border-radius: 6px;
}
.description-summernote pre {
background: #f4f5f7;
padding: 16px 16px;
border-radius: 8px;
overflow-x: auto;
font-size: 14px;
line-height: 1.5;
}
/* Списки */
.description-summernote ul,
.description-summernote ol {
margin: 12px 0;
padding-left: 24px;
}
.description-summernote ul li,
.description-summernote ol li {
margin: 8px 0;
line-height: 1.55;
}
.description-summernote ul ul,
.description-summernote ol ol,
.description-summernote ul ol,
.description-summernote ol ul {
margin: 4px 0 4px 4px;
}
/* Цитата */
.description-summernote blockquote {
margin: 16px 0;
padding: 16px 20px;
border-left: 4px solid #01A572;
background: rgba(1, 165, 114, 0.06);
border-radius: 0 8px 8px 0;
color: #2a2a2a;
font-style: italic;
}
.description-summernote blockquote p { margin: 0; }
/* Картинки и видео */
.description-summernote img,
.description-summernote video,
.description-summernote iframe {
max-width: 100%;
height: auto;
display: block;
border-radius: 8px;
margin: 12px 0;
}
/* hr-разделитель */
.description-summernote hr {
border: 0;
border-top: 1px solid #e8e8e8;
margin: 20px 0;
}
/* Таблицы — Summernote умеет вставлять .
Оборачиваются в .table-responsive для горизонтального скролла на узких экранах.
Если автор забыл обёртку — стили на сам table делают всё равно красиво. */
.description-summernote .table-responsive {
position: relative;
overflow-x: auto;
overflow-y: hidden;
margin: 16px 0;
-webkit-overflow-scrolling: touch;
border-radius: 8px;
/* Видимый тонкий скроллбар во всех браузерах */
scrollbar-width: thin;
scrollbar-color: #01A572 rgba(1, 165, 114, 0.1);
/* Намёк-градиент справа: показывает, что есть ещё контент.
Через mask — мягко затухает на 32px у правого края. */
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
/* WebKit-скроллбар (Chrome / Edge / Safari) */
.description-summernote .table-responsive::-webkit-scrollbar {
height: 8px;
}
.description-summernote .table-responsive::-webkit-scrollbar-track {
background: rgba(1, 165, 114, 0.08);
border-radius: 6px;
margin: 0 4px;
}
.description-summernote .table-responsive::-webkit-scrollbar-thumb {
background: #01A572;
border-radius: 6px;
}
.description-summernote .table-responsive::-webkit-scrollbar-thumb:hover {
background: #018f63;
}
/* Когда таблица доскроллена до конца — убираем правый fade */
.description-summernote .table-responsive.is-end {
-webkit-mask-image: none;
mask-image: none;
}
/* Подсказка "← листайте таблицу →" под таблицей */
.description-summernote .table-responsive + .table-hint {
display: none;
text-align: center;
font-size: 12px;
font-weight: 500;
color: #888;
margin: 4px 0 12px;
}
/* Показываем подсказку только если таблица шире контейнера (JS-класс) */
.description-summernote .table-responsive.has-overflow + .table-hint {
display: block;
}
/*
* ТАБЛИЦУ ВСТАВЛЯЮТ ИЗ WORD, И ОНА БЫВАЕТ ЛЮБОЙ ШИРИНЫ.
*
* Было: width:100% + min-width:480px + overflow:hidden. На телефоне таблица
* из пяти колонок ужималась в 360px, слова ломались по слогам
* («Наимен-ование»), а последняя колонка просто СРЕЗАЛАСЬ краем - пролистать
* её было нельзя, overflow:hidden её и прятал. Замер на настоящей вставке из
* Word: правый край таблицы 372 при контейнере 363.
*
* Стало: таблица сама себе контейнер прокрутки (display:block +
* overflow-x:auto). Колонки держат свою ширину, лишнее листается пальцем
* вбок - страница при этом не едет.
*
* ТО ЖЕ ПРАВИЛО ДЛЯ СТАТЕЙ И НОВОСТЕЙ - css/blog.css, .article-body table.
* Оформление у них своё, поведение обязано быть одинаковым.
*/
/*
* ПРОКРУТКУ ДАЁТ ОБЁРТКА, А НЕ САМА ТАБЛИЦА.
*
* Здесь стояло display:block + overflow-x:auto - таблица была сама себе
* контейнером прокрутки. Обёртку .table-responsive (js/card.js) при этом
* всё равно ставили каждой таблице, и два вложенных скролл-контейнера
* ломали две вещи сразу:
*
* 1. Подсказка «листайте таблицу» не появлялась НИКОГДА. Признак
* .has-overflow считается по обёртке (scrollWidth > clientWidth), а у
* обёртки переполнения не бывало: лишнее прятала внутрь сама таблица.
* Замер на телефоне 375px: три таблицы из шести реально прокручивались
* (1177px при контейнере 349px), подсказки не было ни у одной.
*
* 2. display:block отменяет табличную раскладку: колонки больше не делят
* ширину, а жмутся по содержимому. Вставленная таблица с width:100%
* (так их отдают и Word, и любой ИИ-генератор) занимала треть карточки,
* а рамка при этом рисовалась на всю ширину - выглядело поломкой.
*
* max-width:100% убран по той же причине: он сжимал широкую таблицу до
* контейнера, и прокручивать становилось нечего.
*
* В СТАТЬЯХ (css/blog.css) ПРАВИЛО ОСТАЁТСЯ ПРЕЖНИМ: там обёртку никто не
* ставит, и display:block - единственная прокрутка, которая у них есть.
*/
/*
* ЗАПАСНОЙ ПУТЬ - ТАБЛИЦА БЕЗ ОБЁРТКИ.
*
* Обёртку ставит js/card.js; пока он не отработал (или если упал), таблица
* шире карточки не обрезается краем - она остаётся сама себе прокруткой,
* как было раньше. Замер без обёртки: правый край таблицы 1190px при окне
* 375px, и всё лишнее пряталось насовсем.
*
* Как только обёртка появилась, правило перестаёт действовать само -
* селектор требует родителя БЕЗ .table-responsive.
*/
.description-summernote :not(.table-responsive) > table {
display: block;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
/* Рамка - через !important, и это не лень.
Описания приходят из Word и Summernote, и 403 таблицы несут СВОЙ border
инлайном: чаще всего `border: none` (артефакт редактора), реже
`border-color: #ddd`. Инлайн-стиль специфичнее любого класса, поэтому
нормализация до него не доставала - таблица без рамки стояла рядом с
таблицей в рамке: внешняя рамка вычислялась то в `0px none`, то в
`1px solid #e8e8e8` при одинаковом на вид содержимом.
Цвет расходился на #ddd против #e8e8e8 - разница незаметна, единый вид
важнее. */
.description-summernote table {
border-collapse: collapse;
background: #fff;
font-size: 14px;
border: 1px solid #e8e8e8 !important;
border-radius: 8px;
margin: 16px 0;
}
/* Колонка не схлопывается до одной буквы: ниже этого читать нечего, лучше
прокрутка. Длинные слова внутри ячейки при этом переносятся. */
/*
* 120px НА КОЛОНКУ - ЧТОБЫ СЛОВА НЕ ЛОМАЛИСЬ ПО СЛОГАМ.
*
* Ширину колонок в прокручиваемой таблице раздаёт браузер по содержимому, и
* при пяти колонках на экране 351px каждой доставалось 84px: «Наименование»
* рвалось на «Наименов-ание», читать было невозможно. 120px - ширина, в
* которую слово такой длины помещается целиком. Что не влезло - уходит в
* прокрутку вбок, это дешевле нечитаемого текста.
*/
/*
* ЯЧЕЙКА НЕ ПЕРЕНОСИТ ТЕКСТ - ТАБЛИЦА ЛИСТАЕТСЯ ВБОК.
*
* Было: перенос по словам с min-width 120px. Таблица помещалась по ширине,
* но росла в высоту: строка «5-6 мм (обеспечивает отличную плотность,
* великолепный товарный вид и хорошую транспортабельность)» разворачивалась
* на четыре строки, и описание товара занимало полтора экрана.
*
* Прокрутка вбок у таблицы уже есть (display:block + overflow-x:auto выше),
* так что лишняя ширина уходит именно в неё.
*
* ЯВНО ЗАДАННЫЙ В WORD ПЕРЕНОС УВАЖАЕМ - ветка ниже: если автор сам поставил
* ячейке white-space, наше правило его не перебивает.
*/
.description-summernote td,
.description-summernote th {
min-width: 120px;
white-space: nowrap;
}
.description-summernote td[style*="white-space"],
.description-summernote th[style*="white-space"] { white-space: revert; }
/*
* ШИРИНУ КОЛОНКИ, ЗАДАННУЮ В WORD, УВАЖАЕМ.
*
* Общее правило выше (.description-summernote [style*="width"]) режет любую
* inline-ширину до 100% контейнера - оно про картинки и блоки, и для них
* верно. Но у ячейки таблицы это давало обратное: пять колонок по 240pt
* сжимались в ширину экрана, и текст читался по слогам («Наименов-ание»).
* Внутри прокручиваемой таблицы места сколько угодно - пусть колонка будет
* такой, какой её задал автор. Сверху ограничиваем, чтобы одна колонка не
* съела весь экран целиком.
*/
.description-summernote td[style*="width"],
.description-summernote th[style*="width"],
.description-summernote td[width],
.description-summernote th[width] { max-width: 60vw; }
/* table внутри обёртки не нуждается в min-width — он скроллится */
.description-summernote .table-responsive table {
margin: 0;
}
/*
* ВНУТРИ ЯЧЕЙКИ АБЗАЦ НЕ ОТСТУПАЕТ.
*
* Word и Google Docs заворачивают содержимое КАЖДОЙ ячейки в , и этот
* абзац приносит общий отступ описания (12px сверху и снизу): строка
* вырастала с 43 до 51px, а между строками появлялись дыры - таблица
* выглядела разъехавшейся, хотя данные в ней те же.
*
* Второму абзацу в одной ячейке отступ возвращаем: там он разделяет текст,
* а не имитирует пустую строку.
*/
.description-summernote td p,
.description-summernote th p {
margin: 0;
}
.description-summernote td p + p,
.description-summernote th p + p {
margin-top: 8px;
}
.description-summernote thead {
background: #f7f9f8;
}
.description-summernote thead th {
font-weight: 700;
color: #1f1f1f;
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid #e8e8e8;
white-space: nowrap;
}
.description-summernote tbody td {
padding: 12px 16px;
border-bottom: 1px solid #f0f0f0;
vertical-align: top;
color: #333;
}
.description-summernote tbody tr:last-child td {
border-bottom: 0;
}
.description-summernote tbody tr:nth-child(even) {
background: rgba(1, 165, 114, 0.025);
}
.description-summernote tbody tr:hover {
background: rgba(1, 165, 114, 0.06);
}
/* Адаптив таблиц */
@media (max-width: 600px) {
/* min-width убран: он и заставлял таблицу вылезать за карточку. Ширину
держат сами колонки, лишнее уходит в прокрутку. */
.description-summernote table { font-size: 13px; }
.description-summernote td,
.description-summernote th { min-width: 120px; }
.description-summernote thead th { padding: 10px 12px; }
.description-summernote tbody td { padding: 9px 12px; }
}
/* Ссылка-навигация в конце описания: "Перейти в раздел: ..." */
.description-section-link {
text-align: left;
margin: 24px 0 12px;
font-size: 16px;
font-weight: 500;
color: #1f1f1f;
}
.description-section-link a {
color: #01A572;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
margin-left: 8px;
transition: color 0.2s ease;
}
.description-section-link a:hover { color: #018f63; }
/* Описание помещается целиком - ни кнопки, ни затемнения.
Класс ставит js/catalog.js::zdSyncDescriptionOverflow по фактической высоте. */
.product-description.is-short .description-content { max-height: none; }
.product-description.is-short .description-content::after { display: none; }
.product-description.is-short .read-more { display: none; }
.description-content {
max-height: 222px;
overflow: hidden;
position: relative;
transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Улучшенная плавность с кастомной кривой */
will-change: max-height; /* Оптимизация для анимации */
scrollbar-width: thin; /* Тонкий скроллбар */
scrollbar-color: #01A572 rgba(1, 165, 114, 0.1);
max-width: 1400px;
}
/* Стилизация скроллбара для WebKit браузеров */
.description-content::-webkit-scrollbar {
width: 6px;
}
.description-content::-webkit-scrollbar-track {
background: rgba(1, 165, 114, 0.05);
border-radius: 12px;
}
.description-content::-webkit-scrollbar-thumb {
background: #01A572;
border-radius: 12px;
transition: background 0.3s ease;
}
.description-content::-webkit-scrollbar-thumb:hover {
background: #008c5e;
}
.description-content::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.9) 80%,
#ffffff 100%
);
pointer-events: none;
z-index: 1;
transition: opacity 0.4s ease, visibility 0.4s ease; /* Плавное исчезновение */
}
.read-more {
display: inline-block;
width: 100%;
margin-top: -40px;
padding: 12px 24px;
background: rgba(1, 165, 114, 0.15);
color: #01A572;
border: 1px solid rgba(1, 165, 114, 0.3);
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
position: relative;
z-index: 2;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
/* 400мс было выше потолка интерфейса (300мс по DESIGN.md) - кнопка
откликалась с заметной задержкой. Свойства перечислены поимённо: `all`
тянул сюда и backdrop-filter с размерами, а это самые дорогие кадры. */
transition: transform var(--zd-dur) var(--zd-ease),
background var(--zd-dur) var(--zd-ease),
border-color var(--zd-dur) var(--zd-ease),
color var(--zd-dur) var(--zd-ease);
transform: translateY(0); /* Для плавного перемещения */
will-change: transform, background, backdrop-filter, color; /* Оптимизация анимаций */
letter-spacing: 0.3px; /* Легкий интервал для текста */
}
.read-more i {
margin-left: 12px;
transform: rotate(-90deg);
color: #01A572;
display: inline-block; /* Для анимации */
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease; /* Плавный поворот и изменение цвета */
}
.read-more:active {
transform: translateY(0); /* Возврат при нажатии */
transition: transform var(--zd-dur-fast) var(--zd-ease); /* Отклик на нажатие - самый быстрый */
}
.product-description.active .description-content {
max-height: max-content;
}
.product-description.active .description-content::after {
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease; /* Плавное исчезновение */
}
.product-description.active .read-more {
margin-top: 16px;
background: #01A572;
color: #fff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid #01A572;
transform: translateY(0); /* Сброс трансформации */
}
.product-description.active .read-more i {
color: #fff;
transform: rotate(0deg);
}
/* Анимация для плавного появления контента */
.product-description.active .description-content p {
animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== REVIEWS =====
Токены --rv-* переехали в css/review-modal.css - тот подключён и здесь, и на
странице заказа, а этот файл только на карточке товара. Подробности - в
шапке review-modal.css. */
.product-reviews {
padding-bottom: 32px;
}
.reviews-card {
background: var(--rv-bg);
border: 1px solid var(--rv-border);
border-radius: var(--rv-radius);
padding: 32px 24px;
}
@media (max-width: 600px) {
.reviews-card { padding: 24px 16px; }
}
/* Header */
.reviews-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--rv-border);
}
.reviews-summary {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.reviews-title {
margin: 0;
font-size: 28px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--rv-text);
line-height: 1.2;
}
.reviews-rating {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-weight: 700;
color: var(--rv-text);
}
.reviews-rating__star {
color: var(--rv-star);
font-size: 18px;
line-height: 1;
transform: translateY(1px);
}
.reviews-rating__value {
font-size: 22px;
letter-spacing: -0.01em;
}
.reviews-rating__max {
color: var(--rv-muted);
font-weight: 500;
font-size: 16px;
margin-left: 2px;
}
.reviews-count {
font-size: 14px;
color: var(--rv-muted);
line-height: 1;
}
/* Просмотры — служебная приписка в подвале блока отзывов. Раньше строка стояла в
шапке, рядом с оценкой, и кегль был как у числа отзывов — на равных с ним.
Теперь это не соседняя строка группы, а подпись под всем блоком: мельче,
светлее и прижата вправо, чтобы не читаться как ещё один показатель
товара. Отбивка сверху отделяет её от последнего отзыва.
*/
.reviews-views {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin-top: var(--zd-space-5, 20px);
/* 14px - минимум текста на сайте (аудитория 40-65+), без прозрачности: так
серый держит контраст 4.5:1. */
font-size: var(--zd-text-sm, 14px);
color: var(--rv-muted);
line-height: 1;
}
/* Глиф крупнее текста: у глаза светлая середина, и в кегль строки он
проваливался в серое пятно. */
.reviews-views__eye {
font-size: 16px;
line-height: 1;
}
.review-add {
padding: 16px 24px;
background: var(--rv-brand);
color: #fff;
border: 1px solid var(--rv-brand);
border-radius: var(--rv-radius-sm);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
}
.review-add:hover {
background: #019866;
border-color: #019866;
}
.review-add:active {
transform: translateY(1px);
}
/* Вариант «нельзя»: вошёл, но товар не покупал. Не кнопка и не ссылка -
нажимать нечего, поэтому ни курсора-руки, ни ховера. Тот же размер и
форма, чтобы блок отзывов не менял высоту в зависимости от того, кто
смотрит. */
.review-add--locked {
background: transparent;
color: var(--rv-muted, #6b7280);
border-color: var(--rv-border, #e5e7eb);
cursor: default;
font-weight: 500;
}
.review-add--locked:hover {
background: transparent;
border-color: var(--rv-border, #e5e7eb);
}
/* Гостевой вариант - ссылка, но выглядит и ведёт себя как кнопка:
.review-add задаёт padding/фон, здесь снимаем только подчёркивание и
выравниваем по центру, чего ссылке по умолчанию не хватает. */
a.review-add {
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* List */
.reviews-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.review {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
padding: 24px 0;
border-bottom: 1px solid var(--rv-border);
background: transparent;
border-radius: 0;
margin: 0;
}
.review[hidden] {
display: none;
}
.review:last-child {
border-bottom: none;
padding-bottom: 24px;
}
.review__main {
flex: 1;
min-width: 0;
}
.review__author {
font-size: 16px;
font-weight: 700;
color: var(--rv-text);
margin-bottom: 8px;
line-height: 1.3;
}
.review__text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: #4a4f4c;
max-width: 640px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
overflow-wrap: anywhere; /* ломать длинные слова без пробелов */
word-break: break-word;
}
.review.is-expanded .review__text {
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
display: block;
}
.review__more {
margin-top: 8px;
padding: 0;
background: transparent;
border: none;
color: #ff8a3b;
font-size: 14px;
font-weight: 500;
cursor: pointer;
line-height: 1;
transition: color 0.2s ease;
}
.review__more:hover {
color: #e5761f;
}
.review__meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
flex-shrink: 0;
padding-top: 2px;
}
.review__stars {
display: inline-flex;
gap: 4px;
font-size: 14px;
line-height: 1;
}
.review__stars .icon {
color: var(--rv-star);
font-size: 14px;
line-height: 1;
}
.review__stars .icon.is-empty {
color: var(--rv-star-empty);
}
.review__date {
font-size: 14px;
color: var(--rv-muted);
line-height: 1;
}
/* Show more */
.show-more {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 8px;
padding: 16px;
background: var(--rv-bg-soft);
color: var(--rv-text);
border: 1px solid var(--rv-border);
border-radius: var(--rv-radius-sm);
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
text-align: center;
}
.show-more__chevron {
display: inline-block;
transition: transform 0.25s ease;
color: currentColor;
}
.show-more:hover {
background: var(--rv-brand-soft);
border-color: rgba(1, 165, 114, 0.35);
color: var(--rv-brand);
}
.show-more.is-open .show-more__chevron {
transform: rotate(180deg);
}
/* Стили формы отзыва переехали в css/review-modal.css: ту же форму открывает
страница заказа в кабинете, где card.css не подключён. */
/* ===== REVIEWS PHOTOS PREVIEW ===== */
.reviews-photos-preview {
display: flex;
gap: 8px;
margin-top: 8px;
}
.reviews-photos-preview[hidden] {
display: none;
}
.reviews-photos-preview__tile {
position: relative;
width: 88px;
height: 88px;
border: 1px solid var(--rv-border);
border-radius: 12px;
overflow: hidden;
padding: 0;
background: var(--rv-bg-soft);
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.reviews-photos-preview__tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.reviews-photos-preview__tile:hover {
border-color: var(--rv-brand);
transform: translateY(-1px);
}
.reviews-photos-preview__more-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 22, 18, 0.55);
color: #fff;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.01em;
pointer-events: none;
}
/* ===== REVIEW PHOTOS ROW ===== */
.review__photos {
display: flex;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap;
}
.review-photo {
width: 56px;
height: 56px;
padding: 0;
background: var(--rv-bg-soft);
border: 1px solid var(--rv-border);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.review-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.review-photo:hover {
border-color: var(--rv-brand);
transform: translateY(-1px);
}
.review.is-highlighted {
animation: reviewFlash 1.6s ease-out;
border-radius: 12px;
}
@keyframes reviewFlash {
0% { background: var(--rv-brand-soft); }
100% { background: transparent; }
}
/* ===== PHOTO GALLERY ===== */
.photo-gallery {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
flex-direction: column;
background: rgba(15, 22, 18, 0.96);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
color: #fff;
padding: 20px 24px 24px;
overscroll-behavior: contain;
}
@media (min-width: 1024px) {
.photo-gallery {
background: rgba(15, 22, 18, 0.9);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
}
.photo-gallery[hidden] {
display: none;
}
.photo-gallery.is-visible {
opacity: 1;
pointer-events: auto;
}
.photo-gallery__close {
position: absolute;
top: 16px;
right: 18px;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
z-index: 2;
}
.photo-gallery__close:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.45);
}
.photo-gallery__top {
display: flex;
align-items: center;
gap: 20px;
padding: 0 56px 0 4px;
flex-wrap: wrap;
min-height: 42px;
}
.photo-gallery__rating {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-weight: 700;
font-size: 16px;
}
.photo-gallery__rating .icon {
color: var(--rv-brand);
font-size: 16px;
transform: translateY(1px);
}
.photo-gallery__rating-max {
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
font-size: 14px;
}
.photo-gallery__count {
font-size: 14px;
color: rgba(255, 255, 255, 0.72);
}
.photo-gallery__date {
margin-left: auto;
font-size: 14px;
color: rgba(255, 255, 255, 0.72);
}
.photo-gallery[data-gallery-mode="local"] .photo-gallery__date {
display: none;
}
.photo-gallery__stage {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 0;
margin: 16px 0 12px;
}
.photo-gallery__image-wrap {
position: relative;
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
user-select: none;
touch-action: pan-y;
overflow: hidden;
}
.photo-gallery__image-pan {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transform: translate3d(0, 0, 0) scale(1);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.photo-gallery__image-pan.is-panning {
transition: none;
}
.photo-gallery__image-wrap.is-zoomed {
cursor: grab;
touch-action: none;
}
.photo-gallery__image-wrap.is-zoomed.is-grabbing {
cursor: grabbing;
}
.photo-gallery__image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 16px;
-webkit-user-drag: none;
pointer-events: none;
}
.photo-gallery__nav {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: #fff;
cursor: pointer;
flex-shrink: 0;
border: 0;
padding: 0;
opacity: 0.75;
transition: opacity 0.15s ease;
}
.photo-gallery__nav:hover {
opacity: 1;
}
.photo-gallery__nav:disabled {
opacity: 0.25;
cursor: default;
}
.photo-gallery__nav svg {
width: 16px;
height: 16px;
}
.photo-gallery__video {
max-width: 100%;
max-height: 100%;
border-radius: 16px;
background: #000;
cursor: pointer;
outline: none;
}
.photo-gallery__video::-webkit-media-controls {
display: none !important;
}
.photo-gallery__thumb-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
pointer-events: none;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.photo-gallery__thumb {
position: relative;
}
.photo-gallery__thumb video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.photo-gallery__jump {
align-self: center;
padding: 12px 24px;
background: var(--rv-brand);
border: 1px solid var(--rv-brand);
color: #fff;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
margin-bottom: 12px;
transition: background 0.2s ease;
}
.photo-gallery__jump:hover {
background: var(--rv-brand-dark);
}
.photo-gallery[data-gallery-mode="local"] .photo-gallery__jump {
display: none;
}
.photo-gallery[data-gallery-mode="product"] .photo-gallery__top,
.photo-gallery[data-gallery-mode="product"] .photo-gallery__jump {
display: none;
}
.photo-gallery__strip {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 8px 2px 4px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.photo-gallery__strip::-webkit-scrollbar {
height: 6px;
}
.photo-gallery__strip::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.25);
border-radius: 3px;
}
.photo-gallery__thumb {
width: 64px;
height: 64px;
flex-shrink: 0;
padding: 0;
background: transparent;
border: 2px solid transparent;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
opacity: 0.55;
transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.photo-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.photo-gallery__thumb:hover {
opacity: 0.85;
transform: translateY(-1px);
}
.photo-gallery__thumb.is-active {
opacity: 1;
border-color: var(--rv-brand);
}
/* ===== ZOOM CONTROLS ===== */
.photo-gallery__zoom {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 8px;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 4;
user-select: none;
opacity: 0.9;
transition: opacity 0.2s ease;
}
.photo-gallery__zoom:hover {
opacity: 1;
}
.photo-gallery__zoom-btn {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 0;
color: #fff;
border-radius: 50%;
cursor: pointer;
transition: background 0.15s ease;
}
.photo-gallery__zoom-btn:hover {
background: rgba(255, 255, 255, 0.14);
}
.photo-gallery__zoom-btn:active {
background: rgba(255, 255, 255, 0.22);
}
.photo-gallery__zoom-btn:disabled {
opacity: 0.35;
cursor: default;
}
.photo-gallery__zoom-value {
min-width: 44px;
text-align: center;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.85);
font-variant-numeric: tabular-nums;
}
.photo-gallery[data-gallery-mode="video"] .photo-gallery__zoom,
.photo-gallery__zoom.is-hidden {
display: none;
}
@media (max-width: 600px) {
.photo-gallery {
padding: 16px 12px 16px;
}
.photo-gallery__top {
padding-right: 48px;
gap: 12px;
}
.photo-gallery__date {
width: 100%;
margin-left: 0;
}
.photo-gallery__stage {
gap: 8px;
}
.photo-gallery__nav {
width: 20px;
height: 20px;
}
.photo-gallery__zoom {
bottom: 10px;
padding: 4px 8px;
gap: 2px;
}
.photo-gallery__zoom-btn {
width: 30px;
height: 30px;
}
.photo-gallery__zoom-value {
min-width: 38px;
font-size: 12px;
}
.reviews-photos-preview__tile {
width: 72px;
height: 72px;
}
}
@media (max-width: 768px) {
.reviews-card {
padding: 24px 20px;
border-radius: 16px;
}
.reviews-title {
font-size: 22px;
}
.review {
flex-direction: column;
gap: 12px;
padding: 20px 0;
}
.review__meta {
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 12px;
}
}
/* FAQ Вопрос ответ */
.faq {
max-width: 1500px;
margin: 0 auto;
padding: 20px 0;
}
.faq-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 40px;
color: #1f1f1f;
}
.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: 24px 32px;
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;
}
/* ===== ADAPTIVE ===== */
@media (max-width: 1024px) {
h1.hot-name .hot-name-ru{
/* Было 18px - заголовок товара выходил мельче описания под ним, та же
беда, что у избранного с его лестницей 22/20/18/17. Одна ступень вниз от
32px по шкале 12/14/16/18/22/28/36. Замер.
*/
font-size: 28px;
}
h1.hot-name .hot-name-en{
/* 16 -> 18px: латинское название - подзаголовок, оно должно оставаться
заметно мельче русского (28), но держаться на ступени шкалы. */
font-size: 18px;
}
.product-top {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.hot-img-box img {
border: none;
}
.hot-price-box {
padding-top: 12px;
}
h1.hot-name ~ .hot-price-box .hot-price {
font-size: 28px;
}
h1.hot-name ~ .hot-price-box .hot-old {
font-size: 18px;
}
.faq-title {
font-size: 1.8rem;
margin-bottom: 32px;
}
.faq-question {
padding: 20px;
font-size: 1.1rem;
}
.faq-answer p {
padding: 24px 20px;
font-size: 1rem;
}
}
@media (max-width: 768px) {
.footer {
padding: 32px 16px 180px !important;
}
/* Одна колонка, а не 2: иконкам лучше отдать место, чем сужать текст.
В 2 колонках длинные подписи ("Теплица/открытый грунт")
переносились по 2-3 слова в строку и плохо читались - каждая плашка теперь
во всю ширину, текст в одну строку почти всегда.
*/
.product-features {
grid-template-columns: 1fr;
gap: 10px;
}
.feature {
padding: 12px 16px;
justify-content: flex-start;
}
.feature i {
font-size: 24px;
}
h1.hot-name .hot-name-ru {
font-size: 28px;
}
h1.hot-name ~ .hot-price-box .hot-price {
font-size: 28px;
}
.reviews-head {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.review-add {
width: 100%;
text-align: center;
}
}
@media (max-width: 425px) {
.faq-title {
font-size: 1.5rem;
}
.faq-question {
padding: 20px 16px;
font-size: 1rem;
}
.faq-icon {
font-size: 1.3rem;
margin-left: 16px;
}
.faq-answer p {
padding: 20px 16px;
}
.right-menu-func{
gap: 4px;
}
.right-menu i{
font-size: 23px;
}
/* Ступени заголовка здесь НЕТ. Всего их было четыре - 32 в базе, 28 на 1024,
28 на 768 и 22 тут, - и на Pixel 7 (412px) срабатывала последняя: название
товара выходило 22px против 28px у заголовка списка на соседнем экране, то
есть главный заголовок сайта был мельче второстепенного. Латиница по той
же причине падала до 14px, вровень с обычным текстом. Оставлена одна
мобильная ступень (28/18 на 1024). Замер.
*/
.hot-price-box {
align-items: flex-start;
gap: 8px;
}
h1.hot-name ~ .hot-price-box .hot-price {
font-size: 22px;
}
.product-features {
grid-template-columns: 1fr;
}
.product-brand {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
/* Модальное окно "Поделиться" */
.share-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
justify-content: center;
align-items: center;
animation: fadeIn 0.3s;
}
.share-modal.active {
display: flex;
}
.share-modal-content {
background: #fff;
border-radius: 20px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
padding: 24px;
position: relative;
animation: slideUp 0.3s;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.share-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 2px solid #f0f0f0;
}
.share-modal-header h3 {
font-size: 18px;
margin: 0;
color: #333;
}
.share-modal-close {
background: none;
border: none;
font-size: 32px;
cursor: pointer;
color: #999;
padding: 0 12px;
line-height: 1;
}
.share-modal-close:hover {
color: #333;
}
.share-product-info {
background: #f8f9fa;
border-radius: 12px;
margin-bottom: 20px;
display: flex;
padding: 12px;
gap: 16px;
}
.share-product-image {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
}
.share-product-details {
flex: 1;
text-align: left;
}
.share-product-name {
font-weight: 600;
font-size: 18px;
margin-bottom: 4px;
color: #333;
}
.share-product-name-en {
font-size: 14px;
color: #666;
margin-bottom: 4px;
}
.share-product-price {
font-size: 22px;
font-weight: 700;
color: #28a745;
}
.share-product-oldprice{
color: #A8A8A8;
font-size: 18px;
text-decoration: line-through;
font-weight: 500;
padding-left: 16px;
}
.share-product-flex{
display: flex;
flex-direction: row;
}
.share-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.share-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
color: #fff;
}
.whatsapp {
background-color: #01A572;
transition: background-color 0.3s ease;
}
.telegram {
background-color: #0088cc;
transition: background-color 0.3s ease;
}
.whatsapp:hover{
background-color: #018b5e;
}
.telegram:hover{
background-color: #1275b3;
}
/* «Скопировать ссылку» и «Ещё…» - второстепенные: светлые, чтобы WhatsApp и Telegram оставались главными. */
.share-btn--light { background: #F2F4F5; color: #1f2937; font-family: inherit; min-height: 48px; padding: 12px 10px; font-size: 15px; white-space: nowrap; }
.share-buttons .share-note { grid-column: 1 / -1; margin-top: 0; }
.share-btn--light:hover { background: #E6EAEC; }
.share-btn--light .zi { font-size: 18px; color: #01A572; }
.whatsapp, .telegram { min-height: 48px; }
.share-link-box {
display: flex;
gap: 12px;
margin-top: 16px;
}
.share-link-input {
flex: 1;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 14px;
background: #f8f9fa;
}
.share-note {
margin-top: 16px;
padding: 12px;
border-radius: 8px;
font-size: 14px;
display: none;
}
.share-note.success {
display: block;
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
/* Адаптация для мобильных */
@media (max-width: 480px) {
.share-buttons {
grid-template-columns: 1fr;
}
.share-product-info {
flex-direction: column;
text-align: center;
}
.share-modal-content{
padding: 16px;
}
.share-product-flex{
flex-direction: column;
}
.share-product-oldprice{
padding-left: 0;
}
}
/* Кнопки в корзину связаться */
/* Основная панель */
.mobile-checkout-btn {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: #fff;
border: none;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 16px 20px 24px 20px;
margin: 0 auto;
z-index: 998;
box-shadow: 0px 13px 52px 36px rgba(0, 0, 0, 0.12);
pointer-events: auto;
}
.mobile-checkout-content {
display: flex;
align-items: center;
gap: 12px;
background: transparent;
padding: 0;
border-radius: 0;
width: 100%;
}
/* Общий стиль кнопок */
.mobile-action-btn {
flex: 1;
height: 54px;
border-radius: 16px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border: none;
transition: background-color 0.3s ease;
}
.mobile-action-btn.primary {
gap: 8px;
background: #FF7700;
color: #fff;
}
.mobile-action-btn.primary:hover {
background: #e56900;
}
.mobile-action-btn.primary.added {
background: #01A572;
}
.mobile-action-btn.primary.added:hover {
background: #018f63;
}
.mobile-action-btn.secondary {
gap: 8px;
/* #168bd4 давал белому тексту 3.7:1, норма 4.5 */
background: #1276b8;
color: #fff;
}
.mobile-action-btn.secondary:hover {
background: #0f6299;
}
@media screen and (max-width: 1024px) {
.mobile-checkout-btn{
bottom: 64px;
}
}
@media screen and (min-width: 1024px) {
.mobile-checkout-btn{
display: none;
}
}
@media screen and (max-width: 768px) {
.mobile-checkout-btn {
padding: 16px 16px 24px 16px;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.mobile-action-btn {
height: 50px;
font-size: 18px;
border-radius: 16px;
}
}
@media screen and (max-width: 576px) {
.mobile-checkout-btn {
bottom: calc(60px + var(--zd-nav-lift));
padding: 12px 12px 20px 12px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.mobile-action-btn {
height: 48px;
font-size: 16px;
border-radius: 12px;
}
.mobile-checkout-content {
gap: 12px;
}
}
@media screen and (max-width: 440px) {
.mobile-action-btn {
height: 46px;
font-size: 16px;
border-radius: 12px;
}
}
.mobile-checkout-btn.variant-cart .primary {
background: #fff;
color: #01A572;
border: 2px solid #01A572;
}
.mobile-checkout-btn.variant-cart .secondary {
background: #01A572;
color: #fff;
}
/* === Десктопные кнопки === */
.checkout-btn {
width: 100%;
margin-top: 20px;
}
.checkout-content {
display: flex;
align-items: center;
gap: 12px;
max-width: 900px;
/* Кнопки стояли вплотную к разделительной линии под ними - выглядело так,
будто блок обрезали. Отступ по шкале проекта: 24px, как у остальных блоков
карточки.
*/
margin-bottom: 24px;
}
.action-btn {
flex: 1;
height: 54px;
border-radius: 16px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border: none;
transition: background-color 0.3s ease;
}
.action-btn.primary {
background: #FF7700;
color: #fff;
transition: background 0.3s ease;
}
.action-btn.primary:hover {
background: #e56900;
}
.action-btn.primary.added {
background: #01A572;
}
.action-btn.primary.added:hover {
background: #018f63;
}
/* Тот же синий, что у "Узнать цену" на плитке в каталоге
(.hot-add--contract, css/product-page.css) - было #168bd4, чуть темнее и
заметно другой оттенок рядом с тем же назначением кнопки на плитке.
*/
.action-btn.secondary {
background: #1E88E5;
color: #fff;
}
.action-btn.secondary:hover {
background: #1976D2;
}
@media (max-width: 1024px) {
.checkout-btn {
display: none;
}
}
@media (min-width: 1025px) {
.checkout-btn {
display: block;
}
}
.action-btn i{
padding: 0 8px;
}
/*****************************
70 - Recommend block ("Также рекомендуем купить")
Полностью самодостаточная секция — все стили .hot-card
скопированы из product-page.css и заскоплены под .recommend.
НЕ зависит от product-page.css.
Дизайн-система (всё кратно 4px):
─ card radius: 12px
─ image: 1:1, cover, без рамки
─ button height: 40px
─ like: 32×32
─ label: 11px / 700 / uppercase
─ scale tokens: 4 / 8 / 12 / 16 / 32 / 40
*****************************/
.recommend {
max-width: 1500px;
margin: 0 auto;
padding: 40px 0 24px;
}
.recommend__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.recommend__title {
font-size: 1.75rem;
font-weight: 700;
color: #1f1f1f;
margin: 0;
line-height: 1.2;
}
.recommend__all {
display: inline-flex;
align-items: center;
gap: 8px;
color: #01A572;
font-size: 14px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: color .2s ease, gap .2s ease;
}
.recommend__all:hover {
gap: 12px;
color: #018f63;
}
.recommend__all-arrow {
width: 7px;
height: 7px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
display: inline-block;
}
/* === Сетка: 3 колонки === */
/* Было 4 колонки, но карточек ровно 3 (см. products/card.php -
array_slice(...,0,3)) - 4-колоночная сетка с 3 карточками оставляла пустой
правый слот, ряд читался перекошенным вправо/не по центру.
*/
.recommend__list {
/* ЧЕТЫРЕ КАРТОЧКИ. Раскладка
ступенями: 4 → 3 → 2, ниже по файлу. Ряд всегда заполнен целиком — блок из
четырёх карточек в трёхколоночной сетке оставлял одинокую четвёртую во
второй строке.
*/
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
/* === Карточка-вариант: вертикальный layout (img сверху, инфо снизу).
ООП-модификатор .hot-card.hot-card--vertical — применяется в блоке
«Также рекомендуем» и в любом контексте, где нужна узкая колонка. === */
.hot-card.hot-card--vertical {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
}
.hot-card--vertical .hot-top {
display: flex;
flex-direction: column;
height: 100%;
}
/* Вертикальный layout: картинка сверху, инфо снизу */
.hot-card--vertical .hot-main-row {
position: relative;
display: flex;
flex-direction: column;
/* flex:1 - без него .hot-main-row (потомок .hot-top{height:100%}) не
растягивался сам, и .content-wrapper{flex:1} внутри него было нечем
заполнять: карточки с более коротким инфо-блоком (например, без лого
бренда - просто короче) получали более короткий content-wrapper, и
цена/кнопка (margin-top:auto ниже) съезжали выше, чем у соседних карточек
той же высоты. Найдено: "криво не по центру".
*/
flex: 1;
}
/* === Картинка — квадрат, на всю ширину, без рамки === */
.hot-card--vertical .hot-img-box {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: #fff;
overflow: hidden;
border: none;
border-radius: 0 0 12px 12px;
margin: 0;
}
.hot-card--vertical .hot-img-box img {
width: 100%;
height: 100%;
/* cover - согласовано с .image-track img выше: заполнение бокса важнее
небольшой обрезки краёв. */
object-fit: cover;
object-position: center;
display: block;
}
.hot-card--vertical .hot-img-box a {
display: block;
width: 100%;
height: 100%;
}
/* Лейбл .hot-label убран — статусы карточки выражаются через
модификаторы .hot-card--sale/new/hit и чипы .hot-icon-strip. */
/* === Кнопка «Сравнение» — правый-верхний угол фото === */
.hot-card--vertical .hot-compare {
position: absolute;
top: 8px;
right: 8px;
/* 32px были ниже минимальной зоны нажатия (44px).
Кнопка лежит поверх фото абсолютом, поэтому рост ничего не двигает. */
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.92);
border: none;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
padding: 0;
}
.hot-card--vertical .hot-compare i { font-size: 14px; color: #1f1f1f; }
.hot-card--vertical .hot-compare.is-active { background: #168bd4; }
.hot-card--vertical .hot-compare.is-active i { color: #fff; }
/* === Контент === */
.hot-card--vertical .content-wrapper {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
width: 100%;
}
.hot-card--vertical .hot-info {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
padding-bottom: 0;
}
.hot-card--vertical .hot-info > a {
text-decoration: none;
color: inherit;
}
.hot-card--vertical .hot-name-ru {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: #1f1f1f;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.1px;
min-height: calc(16px * 1.35 * 2);
margin-bottom: 8px;
word-break: break-word;
}
.hot-card--vertical .hot-name-en {
display: block;
color: #666;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
/* СЛОТ, А НЕ СТРОКА. Элемент рендерится ВСЕГДА (lib/product-card.php),
но у товаров без английского названия он пустой и занимает 0px вместо
Всё, что ниже - страна, отзывы, цена, - съезжало на эти 17px, и соседние
карточки в ряду не совпадали ни одной строкой. Замерено на блоке «Также
рекомендуем» карточки 10: цена стояла на 485px у одних и 502px у
других. Держим высоту одной строки независимо от содержимого.
*/
min-height: calc(14px * 1.2);
}
/* СЛОТ БРЕНДА - ОДНА ВЫСОТА НА ОБА ВИДА.
Разметка рисует ЛИБО ![]()
, ЛИБО
(lib/product-card.php). У логотипа нижний отступ
был 4px, у страны - 8px (main.css), и карточки расходились ещё на 4px
поверх истории с name-en.
overflow:hidden с мелким line-height - защита от БИТОГО логотипа: alt у
картинки это brand_text, то есть целая фраза «Данный продукт произведён в
Иране». Не загрузился файл - и браузер разливал её на две строки прямо в
слоте высотой 18px, ломая ряд.
Текст для скринридера при этом остаётся на месте.
*/
/* Слот вырос с 18px до 22px вслед за .brand-logo в main.css. Высота меняется у ОБОИХ видов сразу - в этом весь
смысл общего правила: разойдутся они, разъедутся и карточки.
*/
.hot-card--vertical .brand-logo,
.hot-card--vertical .brand-country {
margin-bottom: 4px;
align-self: flex-start;
overflow: hidden;
}
/* Логотип - 32px вслед за .brand-logo в main.css. Ширина больше не
зажата в 86px: при таком потолке высота у длинного знака падала обратно, и
подъём слота ничего ему не давал.
*/
.hot-card--vertical .brand-logo {
width: auto;
max-width: 100%;
height: 32px;
min-height: 32px;
}
/* Чип страны держит ТОТ ЖЕ слот, что логотип (32px). Пока он был 22px, ряд
«Рекомендуем» расходился на 10px: у одной карточки логотип, у соседней -
страна. Внутри чипа теперь ещё и флаг, и в 22px он не помещался. */
/* Боковых отступов и скругления здесь больше нет: они держали ПОДЛОЖКУ-пилюлю,
а её убрали («фон не нужен!!», см. css/main.css). Без фона padding остался
пустым полем - флаг отъезжал от левого края на 12px и не вставал в одну
линию с названием, ценой и остальным текстом карточки.
Резерва высоты тоже нет, как на плитках (product-page.css): флаг 14px в слоте 32px
давал 16px пустоты сверху и снизу против 7px у логотипа. Цены в ряду ровняет
прижатый низ карточки, а не этот слот. */
.hot-card--vertical .brand-country {
height: auto;
min-height: 0;
padding: 0;
}
.hot-card--vertical .brand-logo {
object-fit: contain;
object-position: left center;
font-size: 10px;
/* alt-текст, если файл не загрузился, держим в одну строку
внутри слота - поэтому равно его высоте (32px, см. выше). */
line-height: 32px;
}
.hot-card--vertical .brand-country {
width: auto;
max-width: 100%;
margin-bottom: 4px;
}
/* Исключения для --made здесь тоже больше нет: на плитке у страны флаг и её
название («Китай»), а не фраза, и всё это укладывается в общий слот. Что
было и почему убрано - в css/main.css, на месте прежнего блока. */
.hot-card--vertical .brand-country--made {
/* Подложка по ширине текста, а не всей колонки: без этого пилюля тянется
пустым хвостом до правого края карточки. */
width: fit-content;
}
/* Цена прижата к низу текста, текст растянут на всю карточку: так цены в ряду стоят
на одной линии сразу над кнопкой, а разница в строках уходит в зазор выше цены. */
.hot-card--vertical .main-info { flex-grow: 1; }
.hot-card--vertical .main-info .hot-price-box { margin-top: auto; }
/* Телефон: от цены до кнопки было 22px, на ПК 12. */
@media (max-width: 768px) {
.hot-card--vertical .main-info .hot-price-box { padding-bottom: 2px; }
}
.hot-card--vertical .hot-rating {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 8px;
font-size: 14px;
line-height: 1;
margin-bottom: 8px;
width: auto;
}
.hot-card--vertical .hot-rating-count { font-weight: 600; }
.hot-card--vertical .stars {
font-family: "zeldomkz";
font-size: 12px;
color: #01A572;
}
.hot-card--vertical .hot-review-count {
font-weight: 600;
color: #4b4b4b;
}
/* Карточка без оценок: строка та же (ряд не разъезжается по высоте), но
приглушена - она не должна спорить за внимание с карточками, где оценки
есть. Одна зелёная звезда без цифр читалась как обрубок вёрстки. */
.hot-rating--empty .stars { color: #c9cdd2; }
.hot-rating--empty .hot-review-count {
font-weight: 500;
color: #616161;
}
/* justify-content:space-between у базового .hot-rating рассчитан на ТРИ
элемента (число - звезда - ссылка с числом отзывов) - у пустого состояния
их только два (звезда + "Нет отзывов"), и space-between раздвигал их в
разные концы строки на широкой плитке.
*/
.hot-rating--empty {
justify-content: flex-start;
gap: 8px;
}
/* === Цены === */
.hot-card--vertical .hot-price-box {
display: flex;
align-items: baseline;
gap: 8px;
padding-top: 0;
padding-bottom: 12px;
}
.hot-card--vertical .hot-price {
font-size: 18px;
font-weight: 700;
color: #000;
white-space: nowrap;
}
.hot-card--vertical .hot-old {
font-size: 14px;
font-weight: 600;
color: #FF7700;
text-decoration: line-through;
white-space: nowrap;
}
/* === Кнопки «В корзину» + «Избранное» === */
.hot-card--vertical .hot-add-flex {
width: 100%;
display: flex;
align-items: stretch;
gap: 8px;
padding: 0 12px 12px;
box-sizing: border-box;
}
.hot-card--vertical .hot-add {
flex: 1 1 auto;
/* 40 -> 44px: минимум уверенного попадания пальцем, как у кнопки
в основном каталоге. */
height: 44px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #FF7700;
color: #fff;
border: none;
border-radius: 12px;
cursor: pointer;
font-size: 12px;
font-weight: 700;
letter-spacing: .2px;
text-transform: uppercase;
white-space: nowrap;
padding: 0 8px;
}
.hot-card--vertical .hot-add.added { background: #01A572; }
.hot-card--vertical .hot-add i { font-size: 14px; }
/* =========================================================
Out-of-stock для recommend-карточек (.hot-card--vertical.hot-card--out).
product-page.css на card.html не подключён, поэтому атомы дублируем здесь.
Тот же визуальный язык что и на listing — overlay снизу + notify-кнопка.
========================================================= */
.hot-card--vertical.hot-card--out .hot-img-box {
position: relative;
}
.hot-card--vertical.hot-card--out .hot-img-box a {
position: relative;
display: block;
}
.hot-card--vertical.hot-card--out .hot-img-box img,
.hot-card--vertical.hot-card--out .brand-logo {
filter: grayscale(0.7) brightness(0.92);
opacity: 0.75;
}
.hot-card--vertical.hot-card--out .hot-price,
.hot-card--vertical.hot-card--out .hot-name-ru,
.hot-card--vertical.hot-card--out .hot-name-en,
.hot-card--vertical.hot-card--out .hot-rating {
opacity: 0.6;
}
.hot-card--vertical.hot-card--out .hot-out-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 8px;
background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 100%);
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 1.1;
letter-spacing: 0.1px;
white-space: nowrap;
pointer-events: none;
}
.hot-card--vertical.hot-card--out .hot-out-overlay i {
font-size: 12px;
line-height: 1;
flex-shrink: 0;
}
/* Кнопка «Уведомить» вместо «В корзину» — специфичность 0,3,0
перебивает .hot-card--vertical .hot-add (0,2,0). */
.hot-card--vertical.hot-card--out .hot-add--notify,
.hot-card--vertical.hot-card--out .hot-add--notify:hover {
background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 100%);
color: #fff;
}
.hot-card--vertical.hot-card--out .hot-add--notify.is-active,
.hot-card--vertical.hot-card--out .hot-add--notify.is-active:hover {
background: linear-gradient(135deg, #5B21B6 0%, #6D28D9 100%);
color: #fff;
}
.hot-card--vertical .hot-add--notify .notify-bell {
font-size: 13px;
line-height: 1;
}
.hot-card--vertical .hot-fav {
flex: 0 0 44px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
cursor: pointer;
}
.hot-card--vertical .hot-fav i {
font-size: 16px;
color: #FF7700;
}
.hot-card--vertical .hot-fav.is-active {
background: #FF7700;
border-color: #FF7700;
}
.hot-card--vertical .hot-fav.is-active i {
color: #fff;
}
/* ============================================
Брейкпоинты — меняем КОЛИЧЕСТВО колонок и
плотность текста. Кнопки/лайки фиксированы.
============================================ */
/* 3 колонки — с 1280px: при четырёх карточка становится уже 240px, и
название начинает рваться на три строки. */
@media (max-width: 1280px) {
.recommend__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* 2 колонки */
@media (max-width: 820px) {
.recommend {
padding: 32px 0 40px;
}
.recommend__title { font-size: 1.5rem; }
.recommend__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}
/* Мобилка — 2 колонки, скрываем латынь */
@media (max-width: 560px) {
.recommend {
padding: 24px 0 40px;
}
.recommend__title { font-size: 1.25rem; }
/* 12 -> 14px: ссылка «Смотреть все» уводит в подборку товаров, её надо
видеть. Базовое правило и так 14px, ступень вниз тут лишняя. Замер.
*/
.recommend__all { font-size: 14px; }
.recommend__list { gap: 8px; }
/* 8px с боков - в линию с кнопками (.hot-add-flex ниже), их отступ трогать нельзя. */
.hot-card--vertical .hot-info { padding: 10px 8px; }
/* 13.5px - не ступень шкалы и мельче основного текста. Название товара
в рекомендациях читают так же, как в каталоге. */
.hot-card--vertical .hot-name-ru {
font-size: 15px;
line-height: 1.3;
min-height: calc(15px * 1.3 * 2);
margin-bottom: 4px;
}
.hot-card--vertical .hot-name-en { font-size: 13px; margin-bottom: 3px; }
/* 16 -> 24px вслед за общим подъёмом слота: на 16px подпись под знаком
(«семена», «TOHUM») не читалась вовсе. Ширину не зажимаем - иначе
высота у длинного знака падает обратно. */
.hot-card--vertical .brand-logo { width: auto; max-width: 100%; height: 24px; }
.hot-card--vertical .hot-price { font-size: 15px; }
/* 10 -> 13px. Это та же кнопка покупки, только в блоке рекомендаций;
10px - мельче всего остального на сайте. */
/* 13 -> 14px и 38 -> 44px: порог читаемости и зона нажатия проекта.
Прошлый заход поднял надпись с 10 до 13, но до порога не довёл. */
.hot-card--vertical .hot-add { font-size: 14px; gap: 4px; padding: 0 6px; letter-spacing: 0; }
.hot-card--vertical .hot-add i { font-size: 14px; }
.hot-card--vertical .hot-add-flex { gap: 6px; padding: 0 8px 8px; }
.hot-card--vertical .hot-fav { flex: 0 0 44px; min-height: 44px; }
/*
* СЕРДЕЧКО СРЕЗАЛОСЬ КРАЕМ ПЛИТКИ. В рекомендациях плитки идут в два
* столбца: на 375px это 172px на плитку, а строке нужно было 8+120+6+44+8 =
* 186px. Замер: правый край сердечка 191 против правого края карточки 184 -
* семь пикселей за бортом, палец попадал в пустоту.
*
* ПОД КНОПКУ ОСТАЁТСЯ 104px (170 - отступы 16 - зазор 6 - сердечко 44).
* Замерены все варианты надписи «В корзину» в этом шрифте:
*
* ЗАГЛАВНЫЕ строчные 14px 120 / 100 без иконки 110 / 90 13px 114 / 94 105 /
* 85 12px 107 / 87 99 / 79 <- влезает С ИКОНКОЙ
*
* Это ниже общего порога читаемости витрины (14px), поэтому сужение
* действует ТОЛЬКО здесь - в плитках рекомендаций, где ширины физически нет.
* В каталоге и поиске плитка на телефоне одна в ряд (351px), там надпись
* остаётся крупной.
*
* Зоны нажатия не трогаем: и кнопка, и сердечко остаются 44px. Итог:
* 8+99+6+44+8 = 165px в 170px.
*/
.recommend__list .hot-card--vertical .hot-add {
font-size: 12px;
text-transform: none;
letter-spacing: 0;
gap: 4px;
padding: 0 6px;
min-width: 0;
}
.recommend__list .hot-card--vertical .hot-add i { font-size: 13px; }
}
/* ===== БЛОК ИНФО-КНОПОК (между описанием и отзывами) =====
Десктоп: одна горизонтальная строка [3 инфо-иконки | разделитель | лэнг].
Мобиле: 3 инфо-иконки в строку + lang-toggle компактной пилюлей под ними. */
.product-actions-row {
display: flex;
justify-content: center;
align-items: flex-start;
margin: 16px 0 20px;
padding: 0;
background: transparent;
border: none;
}
/* Разделитель между инфо-блоком и языковой кнопкой (только десктоп) */
.product-actions-row::after {
content: none;
}
/* Переводчик описания RU ↔ KK — простой текстовый линк (не кнопка-пилюля),
живёт сразу под секцией .product-description. Подпись сама меняется на
"Оригинал" в состоянии KK через data-ru/data-kk (js/lang-toggle.js). */
.lang-toggle-text {
/* block + fit-content: у inline-block отрицательный отступ съедала строка. */
display: block;
width: fit-content;
margin: -6px 0 4px;
padding: 0;
border: none;
background: transparent;
color: #01A572;
font-size: 14px;
font-weight: 700;
text-decoration: underline;
text-decoration-color: rgba(1, 165, 114, 0.4);
cursor: pointer;
}
.lang-toggle-text:hover { text-decoration-color: #01A572; }
/* 3 круглые инфо-кнопки */
.info-actions {
display: flex;
text-align: center;
align-items: flex-start;
gap: 20px;
}
.info-action-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-decoration: none;
color: #1f1f1f;
font-size: 14px;
font-weight: 600;
min-width: 72px;
}
.info-action-btn__icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: #fff;
border: 2px solid #01A572;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.18s ease, transform 0.18s ease;
}
.info-action-btn__icon i {
font-size: 22px;
color: #01A572;
}
.info-action-btn:hover .info-action-btn__icon {
background: #01A572;
transform: translateY(-2px);
}
.info-action-btn:hover .info-action-btn__icon i { color: #fff; }
.info-action-btn:hover { color: #01A572; }
@media (max-width: 600px) {
.product-actions-row { gap: 16px; padding: 16px 0px; }
.info-actions { gap: 12px; }
/* 12 -> 13 -> 14px: «Как купить?», «Доставка», «Оплата» под иконками -
короткие подписи, которые объясняют смысл кнопки. Прошлый заход поднял их
с 12 до 13, но до порога 14px не довёл; кнопок три в ряд, при min-width
64px они помещаются и на 320px.
*/
.info-action-btn { font-size: 14px; min-width: 64px; }
.info-action-btn__icon { width: 46px; height: 46px; }
.info-action-btn__icon i { font-size: 19px; }
}
/* [hidden] из js/card.js должен реально прятать блок параметров фасовки:
.product-pack-specs задаёт display:flex, а авторский стиль перебивает
UA-правило [hidden]{display:none} — у товара без «доп. информации о
фасовке» на карточке оставалась пустая зелёная рамка. */
.product-pack-specs[hidden] { display: none; }
/* =====================================================================
КНОПКИ ПОКУПКИ - К НИЗУ КОЛОНКИ
---------------------------------------------------------------------
У товара без доп. фасовок блок «Фасовка» больше не рисуется (задача А40),
и правая колонка стала короче фотографии: «Связаться»/«В корзину» повисали
в середине, а под ними оставалось 208px пустоты до нижнего края фото -
замерено на #572.
Прижимаем панель кнопок к низу: колонка становится flex, а .checkout-btn
получает margin-top:auto. Товар С фасовками ничего не теряет - там
контента ровно столько, что auto-отступ схлопывается в ноль.
Скоуп .product-top обязателен: .hot-info.main-info носят и карточки в
списках (lib/product-card.php), где вертикальная раскладка своя.
=====================================================================
*/
.product-top .hot-info.main-info {
display: flex;
flex-direction: column;
height: 100%;
}
/* КНОПКИ ИДУТ СРАЗУ ЗА СОДЕРЖИМЫМ, а не прижимаются к низу колонки.
Пробовали margin-top:auto - кнопки вставали вровень с нижним краем фото,
но у короткой карточки (договорная цена: ни фасовок, ни второй цены) между
брендом и кнопкой зияло полстраницы пустоты, и «Связаться» оказывалась
оторванной от того, к чему относится. Поэтому держатся контента. Отступ фиксированный - воздух есть, привязка не теряется.
*/
.product-top .hot-info.main-info > :last-child { margin-top: 24px; }
/* Договорная цена на карточке товара: вместо цифры - текст. Крупнее, чем в
плитке (здесь он занимает место главной цены), но не такой тяжёлый, как
сумма: это не число, а условие сделки. Оптовая цена - строкой ниже. */
/* Цвет был #8a9099 - 3.2:1 к белому. «Цена договорная» стоит на месте самой
цены, то есть это ключевая строка карточки. */
.hot-price--contract { font-size: 22px; color: #616161; font-weight: 700; }
.hot-opt-price {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 8px;
font-size: 14px;
}
.hot-opt-price__label { color: #01A572; font-weight: 600; }
.hot-opt-price__value { font-weight: 700; color: #01A572; }
/* Условие «от 50 бухт» - тише цифры. */
.hot-opt-price__note { color: #616161; }
/* КНОПКИ ДЕЙСТВИЙ НА ТЕЛЕФОНЕ - ПОД ПАЛЕЦ.
Избранное, сравнение и «поделиться» - 35x35 на всех экранах. На мышке
это нормально, пальцем - промах: рекомендованный минимум цели касания
44x44 (Apple HIG) / 48x48 (Material). Значок внутри не растёт, растёт
только область нажатия. */
@media (max-width: 768px) {
.right-menu {
width: 44px;
height: 44px;
}
}
/* Служебная ссылка «Править» — видна только вошедшему сотруднику
(products/card.php выводит её лишь при zd_is_admin_session()).
Оформлена как остальные кнопки правого меню, но текстом: карандаша в
шрифте zeldomkz нет, а inline-SVG в проекте не используется. */
.right-menu--admin {
display: inline-flex;
align-items: center;
/* width:auto обязателен: класс .right-menu задаёт квадрат 35x35 под глиф,
и текстовая подпись из него вылезала прямо на соседнюю кнопку. */
width: auto;
padding: 0 10px;
height: 32px;
font-size: 12px;
font-weight: 700;
color: #6B7280;
border: 1px dashed #C7CDD3;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
}
.right-menu--admin:hover {
color: #01A572;
border-color: #01A572;
border-style: solid;
}
/* ------------------------------------------------------------------
Секции ниже первого экрана - не отрисовывать, пока до них не дошли
------------------------------------------------------------------
content-visibility: auto говорит браузеру пропустить вёрстку и отрисовку
блока, пока он за пределами экрана. Работа не пропадает, а откладывается:
первый экран появляется раньше, а тяжёлые блоки считаются в момент, когда
человек до них домотал.
Замер карточки товара: ниже сгиба лежат описание (367px), отзывы (219px),
рекомендации (1421px), FAQ (694px) и подвал (601px) - почти 3300 пикселей
вёрстки, которые браузер считал до показа первого экрана.
contain-intrinsic-size ОБЯЗАТЕЛЕН. Без него скрытый блок занимает нулевую
высоту, полоса прокрутки прыгает при каждом появлении секции, и это ровно
тот скачок макета (CLS), за который ругается PageSpeed. Значения -
реальные высоты из замера, с запасом: точность тут не нужна, нужен
правдоподобный резерв.
------------------------------------------------------------------
*/
.product-description,
.product-reviews,
.recommend {
content-visibility: auto;
}
/* Числа - высоты, замеренные ДО включения content-visibility. Это важно:
у скрытой секции высота равна резерву, поэтому повторный замер «по факту»
меряет собственную же догадку и уводит значения вверх с каждым разом
(проверено: подгонка по такому замеру увеличила сдвиг со 126 до 241px). */
.product-description { contain-intrinsic-size: auto 367px; }
.product-reviews { contain-intrinsic-size: auto 219px; }
.recommend { contain-intrinsic-size: auto 1421px; }
/* ------------------------------------------------------------------
БЛОК «ТАКЖЕ РЕКОМЕНДУЕМ»: ДАННЫЕ ЛИПНУТ К НАЗВАНИЮ
------------------------------------------------------------------
ОТКУДА БРАЛСЯ ПРОМЕЖУТОК. У .hot-name-ru зарезервированы ДВЕ строки
(min-height), у .hot-name-en - одна. Это сделано по его же просьбе «чтобы
цена стояла на одной линии у соседних карточек»: без резерва цена вставала
на 485px у одних и на 502px у других. У товара с коротким названием резерв
превращается в пустоту перед логотипом бренда.
ПОЧЕМУ ТОЧЕЧНО, А НЕ ГЛОБАЛЬНО. Те же классы носят плитки каталога,
избранного и поиска - там выравнивание рядов оставляем. Скоуп
.recommend__list меняет поведение только в этом блоке.
КАК ОБА ТРЕБОВАНИЯ УЖИВАЮТСЯ. Резерв высоты снят - текст идёт сразу за
названием. Ровную линию цен держит теперь не он, а margin-top:auto у
нижней группы: карточка растянута на всю высоту ячейки грида, и низ
прижимается к низу независимо от того, сколько строк занял заголовок.
*/
.recommend__list .hot-card--vertical {
display: flex;
flex-direction: column;
height: 100%;
}
.recommend__list .hot-card--vertical .hot-name-ru,
.recommend__list .hot-card--vertical .hot-name-en {
min-height: 0;
}
.recommend__list .hot-card--vertical .content-wrapper {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
/* Нижняя группа - цена и кнопки - уходит вниз, что бы ни было выше. */
.recommend__list .hot-card--vertical .hot-add-flex {
margin-top: auto;
}
/* ===================== ПРАВКА КАРТОЧКИ С ВИТРИНЫ =====================
Ссылка в админку, которую видит ТОЛЬКО вошедший в неё сотрудник
(products/card.php решает, печатать ли её). Покупателю не показывается
никогда, поэтому фирменной палитрой не притворяется: служебная плашка
пунктиром, чтобы её нельзя было спутать с кнопкой покупки.
ПЛАВАЮЩАЯ, ПОВЕРХ КОНТЕНТА. Раньше стояла в потоке сразу под названием и
на длинном описании уезжала за первый экран - редактировать приходилось
сначала листать вверх.
На телефоне и планшете (≤1024px) низ экрана уже занят: .mobile-nav (65px)
и .mobile-checkout-btn над ним (ещё ~90px). Именно из-за этой пары раньше
и отказались от плавающей кнопки. Не перекрываем их - поднимаем кнопку на
180px (170px - тот же запас, каким в main.css футер обходит эту связку
через body:has(.mobile-checkout-btn), плюс 10px зазора: на планшетной
ширине .mobile-checkout-btn на 4px выше, чем на телефоне, и без запаса
кнопки соприкасались бы).
*/
.zd-admin-edit {
display: inline-flex;
align-items: center;
gap: 6px;
position: fixed;
right: 16px;
bottom: 24px;
z-index: 950;
width: fit-content;
max-width: calc(100vw - 32px);
padding: 8px 14px;
border: 1px dashed #9aa3ae;
border-radius: 999px;
background: #f8fafc;
color: #4b5563;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
box-shadow: 0 4px 16px rgba(15, 23, 42, .18);
/* 36px, а не общие 44: кнопка служебная, ею пользуется сотрудник за
рабочим столом, а не покупатель пальцем на телефоне. */
min-height: 36px;
}
@media (max-width: 1024px) {
.zd-admin-edit { bottom: 180px; }
}
.zd-admin-edit:hover,
.zd-admin-edit:focus-visible {
border-style: solid;
border-color: var(--zd-green, #01A572);
color: var(--zd-green, #01A572);
background: #fff;
}
/* До 1024px кнопки «Связаться/В корзину» прилипают к низу экрана, и их
обёртка в колонке пустая - её 24px сверху были лишней дырой перед
характеристиками. */
@media (max-width: 1024px) {
.product-top .hot-info.main-info > :last-child { margin-top: 0; }
}
/* Компактнее блок фасовок: правая колонка росла, и слева под фото
оставалась большая пустота. Между последней кнопкой и «Связаться» было
три отступа подряд (16 + 24 + 20 = 60px) - теперь 24. */
.pack-panel { margin-bottom: 8px; }
@media (min-width: 1025px) {
.product-top .hot-info.main-info > :last-child { margin-top: 8px; }
.product-top .checkout-btn { margin-top: 8px; }
}
/* Кнопки фасовок одной строки - одной высоты, по самой высокой (с подписью
«N вариантов»), текст по центру. Ряд - flex с переносом: у inline-кнопок
высота своя у каждой, и кнопка с подписью торчала выше соседей. Всё, что
JS вставляет в ряд (подпись, доп.информация), - на всю ширину, отдельной
строкой. */
.hot-packs:not(.hot-packs--single) {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.hot-packs:not(.hot-packs--single) > a,
.hot-packs:not(.hot-packs--single) > button,
.hot-packs__track > a,
.hot-packs__track > button {
align-items: center;
text-align: center;
}
.hot-packs:not(.hot-packs--single) > .label,
.hot-packs:not(.hot-packs--single) > .product-pack-specs,
.hot-packs__track > .product-pack-specs {
flex: 0 0 100%;
}
/* Лента кнопок фасовок - одна строка, как на Kaspi: не помещается - листается
вбок, а не переносится. На телефоне доходит до края экрана (12px - боковое
поле страницы на всех ширинах до 768), на ПК по краям стрелки (card.js).
Вертикальные 6px - место под кольцо фокуса, которое прокрутка иначе обрезает. */
.hot-packs__track {
display: flex;
flex: 1 0 100%;
min-width: 0;
gap: 8px;
margin: -6px 0 2px;
padding: 6px 0;
overflow-x: auto;
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.hot-packs__track::-webkit-scrollbar { display: none; }
.hot-packs__track > a,
.hot-packs__track > button {
flex: 0 0 auto;
margin: 0;
white-space: nowrap;
scroll-snap-align: start;
}
@media (max-width: 768px) {
.hot-packs__track {
margin: -6px -12px 2px;
padding: 6px 12px;
scroll-padding-inline: 12px;
}
}
/* Лента прилипает к краю кнопки: на ПК - правее стрелки (44px + зазор), иначе стрелка
закрывает выбранную фасовку, которую card.js ставит первой. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
.hot-packs__track { scroll-padding-inline: 56px; }
}
/* Стрелки ленты (ПК): card.js ставит их, только когда кнопкам тесно. */
.hot-packs .hot-packs__nav {
position: absolute;
z-index: 2;
width: 44px;
height: 44px;
min-height: 0;
margin: 0;
padding: 0 0 4px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--zd-line-strong, #C2C8CE);
border-radius: 50%;
background: #fff;
color: #474647;
font-size: 30px;
font-weight: 500;
line-height: 1;
transform: translateY(-50%);
transition: border-color var(--zd-dur-fast, 120ms) var(--zd-ease, ease), color var(--zd-dur-fast, 120ms) var(--zd-ease, ease);
}
.hot-packs .hot-packs__nav--prev { left: 0; }
.hot-packs .hot-packs__nav--next { right: 0; }
.hot-packs .hot-packs__nav[hidden] { display: none; }
.hot-packs .hot-packs__nav:hover { border-color: var(--zd-brand, #01A572); color: var(--zd-brand-ink, #016B4A); }
.hot-packs .hot-packs__nav:focus-visible { outline: none; box-shadow: var(--zd-focus-ring); }
/* Затухания краёв ленты нет: кнопка у края обрезана как есть - так видно, что лента
продолжается. */
/*
* ТАБЛИЦЫ ОПИСАНИЯ НА ТЕЛЕФОНЕ - ОДИН ВИД ДЛЯ ВСЕХ.
* Перенесённые со старого сайта таблицы несут свои шрифты, ширины и запрет
* переноса: строка «Актеллика» уходила на 2000px, и читать её было нельзя.
* Здесь: 14px, узкие поля, перенос внутри колонки 130-220px, первая колонка
* закреплена, остальное листается вбок. !important - против инлайн-стилей
* из Word и потолка ширины, который ставит js/card.js (zdCapWideTableCells).
*/
@media (max-width: 767px) {
.description-summernote table { font-size: 14px !important; }
.description-summernote td,
.description-summernote th {
white-space: normal !important;
min-width: 130px !important;
max-width: 220px !important;
width: auto !important;
padding: 8px 10px !important;
line-height: 1.4;
font-size: 14px !important;
overflow-wrap: break-word;
}
.description-summernote td *,
.description-summernote th * { font-size: inherit !important; line-height: inherit !important; }
.description-summernote tr > :first-child {
position: sticky;
left: 0;
z-index: 1;
background: #fff;
box-shadow: inset -1px 0 0 #e8e8e8;
}
.description-summernote thead tr > :first-child { background: #f7f9f8; }
.description-summernote tbody tr:nth-child(even) > :first-child { background: #fbfdfc; }
}
/* Заголовки внутри описания товара на узком экране: меньше и с переносом. */
@media (max-width: 400px) {
.product-description h2, .product-description h3 { font-size: 19px; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.product-description { overflow-wrap: break-word; }
}
/* Карточка товара на телефоне: блоки цены, страны, фасовки и характеристик заметны и отделены друг от друга. */
@media (max-width: 768px) {
.main-info .product-brand-row { background: #F2F2F2; border: 0; border-radius: 14px; padding: 10px 14px; margin: 0 0 6px; }
.product-features { display: flex; flex-direction: column; gap: 6px; }
.product-features .feature { background: #F2F2F2; border: 0; border-radius: 14px; }
.product-description { background: #F7F8F9; border: 1px solid #E3E7EA; border-radius: 16px; padding: 14px; margin-top: 12px; }
}
/* Логотип-надпись без знака (пропорция от 6:1) ниже общего слота: при 32px буквы крупнее, чем у остальных логотипов. */
.hot-card .brand-logo.brand-logo--wide { width: 130px; max-width: 100%; object-fit: contain; object-position: left center; }
/* Длинный логотип-надпись на странице товара - той же ширины, что на плитке. */
.product-brand img.brand-logo--wide { width: 130px; height: auto; max-width: 100%; object-fit: contain; }
/* Блок отзывов отделён фоном, как описание. */
.product-reviews .reviews-card { background: #F7F8F9; border-color: #E3E7EA; }
/* Стрелка доп. информации упирается в выбранную кнопку: окно плашки поднято на зазор под лентой, иначе оно срезало стрелку до 4px. */
.product-pack-specs-clip { margin-top: -12px; padding-top: 11px; }
.product-pack-specs-clip > .product-pack-specs { margin-top: 0; }
/* Заглушки «Также рекомендуем» до прихода блока (js/card-lazy.js): форма плитки - фото, две строки названия, цена, кнопка. */
.recommend-skel {
display: flex; flex-direction: column; gap: 10px; padding: 10px;
border: 1px solid #BCC5CE; border-radius: 12px; min-height: 500px;
}
.recommend-skel .skel { border-radius: 8px; }
.recommend-skel__img { aspect-ratio: 1 / 1; width: 100%; border-radius: 11px; }
.recommend-skel__l1 { height: 16px; width: 85%; }
.recommend-skel__l2 { height: 16px; width: 55%; }
.recommend-skel__price { height: 22px; width: 45%; margin-top: auto; }
.recommend-skel__btn { height: 44px; width: 100%; border-radius: 10px; }
@media (max-width: 820px) { .recommend-skel { min-height: 370px; } }
/* ==== .zi: значки шрифта zd-ui вместо svg (сгенерировано по правилам svg выше) ==== */
.reel-slide__play .zi { transform: rotate(45deg); margin-left: 2px; }
.photo-gallery__nav .zi { width: 16px; font-size: 16px; height: 16px; }
/* Поделиться: три небольшие кнопки в ряд (значок над подписью) - WhatsApp, ссылка, системное меню. Telegram убран (владелец 09.10). */
.share-modal .share-buttons { display: flex !important; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.share-modal .share-buttons > .share-btn { flex: 1 1 0; min-width: 0; }
.share-modal .share-buttons > .share-btn[hidden] { display: none; }
.share-modal .share-buttons .share-note { flex: 0 0 100%; }
.share-modal .share-btn { flex-direction: column; gap: 4px; min-height: 64px; padding: 10px 6px; font-size: 14px; white-space: nowrap; }
.share-modal .share-btn .icon, .share-modal .share-btn .zi { font-size: 20px; }
@media (max-width: 480px) {
/* Фото слева от названия - окно ниже вдвое. */
.share-modal .share-product-info { flex-direction: row; text-align: left; align-items: center; gap: 12px; margin-bottom: 14px; }
.share-modal .share-product-image { width: 64px; height: 64px; flex: none; }
.share-modal .share-product-flex { flex-direction: row; }
}
, и этот
* абзац приносит общий отступ описания (12px сверху и снизу): строка
* вырастала с 43 до 51px, а между строками появлялись дыры - таблица
* выглядела разъехавшейся, хотя данные в ней те же.
*
* Второму абзацу в одной ячейке отступ возвращаем: там он разделяет текст,
* а не имитирует пустую строку.
*/
.description-summernote td p,
.description-summernote th p {
margin: 0;
}
.description-summernote td p + p,
.description-summernote th p + p {
margin-top: 8px;
}
.description-summernote thead {
background: #f7f9f8;
}
.description-summernote thead th {
font-weight: 700;
color: #1f1f1f;
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid #e8e8e8;
white-space: nowrap;
}
.description-summernote tbody td {
padding: 12px 16px;
border-bottom: 1px solid #f0f0f0;
vertical-align: top;
color: #333;
}
.description-summernote tbody tr:last-child td {
border-bottom: 0;
}
.description-summernote tbody tr:nth-child(even) {
background: rgba(1, 165, 114, 0.025);
}
.description-summernote tbody tr:hover {
background: rgba(1, 165, 114, 0.06);
}
/* Адаптив таблиц */
@media (max-width: 600px) {
/* min-width убран: он и заставлял таблицу вылезать за карточку. Ширину
держат сами колонки, лишнее уходит в прокрутку. */
.description-summernote table { font-size: 13px; }
.description-summernote td,
.description-summernote th { min-width: 120px; }
.description-summernote thead th { padding: 10px 12px; }
.description-summernote tbody td { padding: 9px 12px; }
}
/* Ссылка-навигация в конце описания: "Перейти в раздел: ..." */
.description-section-link {
text-align: left;
margin: 24px 0 12px;
font-size: 16px;
font-weight: 500;
color: #1f1f1f;
}
.description-section-link a {
color: #01A572;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
margin-left: 8px;
transition: color 0.2s ease;
}
.description-section-link a:hover { color: #018f63; }
/* Описание помещается целиком - ни кнопки, ни затемнения.
Класс ставит js/catalog.js::zdSyncDescriptionOverflow по фактической высоте. */
.product-description.is-short .description-content { max-height: none; }
.product-description.is-short .description-content::after { display: none; }
.product-description.is-short .read-more { display: none; }
.description-content {
max-height: 222px;
overflow: hidden;
position: relative;
transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Улучшенная плавность с кастомной кривой */
will-change: max-height; /* Оптимизация для анимации */
scrollbar-width: thin; /* Тонкий скроллбар */
scrollbar-color: #01A572 rgba(1, 165, 114, 0.1);
max-width: 1400px;
}
/* Стилизация скроллбара для WebKit браузеров */
.description-content::-webkit-scrollbar {
width: 6px;
}
.description-content::-webkit-scrollbar-track {
background: rgba(1, 165, 114, 0.05);
border-radius: 12px;
}
.description-content::-webkit-scrollbar-thumb {
background: #01A572;
border-radius: 12px;
transition: background 0.3s ease;
}
.description-content::-webkit-scrollbar-thumb:hover {
background: #008c5e;
}
.description-content::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.9) 80%,
#ffffff 100%
);
pointer-events: none;
z-index: 1;
transition: opacity 0.4s ease, visibility 0.4s ease; /* Плавное исчезновение */
}
.read-more {
display: inline-block;
width: 100%;
margin-top: -40px;
padding: 12px 24px;
background: rgba(1, 165, 114, 0.15);
color: #01A572;
border: 1px solid rgba(1, 165, 114, 0.3);
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
position: relative;
z-index: 2;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
/* 400мс было выше потолка интерфейса (300мс по DESIGN.md) - кнопка
откликалась с заметной задержкой. Свойства перечислены поимённо: `all`
тянул сюда и backdrop-filter с размерами, а это самые дорогие кадры. */
transition: transform var(--zd-dur) var(--zd-ease),
background var(--zd-dur) var(--zd-ease),
border-color var(--zd-dur) var(--zd-ease),
color var(--zd-dur) var(--zd-ease);
transform: translateY(0); /* Для плавного перемещения */
will-change: transform, background, backdrop-filter, color; /* Оптимизация анимаций */
letter-spacing: 0.3px; /* Легкий интервал для текста */
}
.read-more i {
margin-left: 12px;
transform: rotate(-90deg);
color: #01A572;
display: inline-block; /* Для анимации */
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease; /* Плавный поворот и изменение цвета */
}
.read-more:active {
transform: translateY(0); /* Возврат при нажатии */
transition: transform var(--zd-dur-fast) var(--zd-ease); /* Отклик на нажатие - самый быстрый */
}
.product-description.active .description-content {
max-height: max-content;
}
.product-description.active .description-content::after {
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease; /* Плавное исчезновение */
}
.product-description.active .read-more {
margin-top: 16px;
background: #01A572;
color: #fff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid #01A572;
transform: translateY(0); /* Сброс трансформации */
}
.product-description.active .read-more i {
color: #fff;
transform: rotate(0deg);
}
/* Анимация для плавного появления контента */
.product-description.active .description-content p {
animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== REVIEWS =====
Токены --rv-* переехали в css/review-modal.css - тот подключён и здесь, и на
странице заказа, а этот файл только на карточке товара. Подробности - в
шапке review-modal.css. */
.product-reviews {
padding-bottom: 32px;
}
.reviews-card {
background: var(--rv-bg);
border: 1px solid var(--rv-border);
border-radius: var(--rv-radius);
padding: 32px 24px;
}
@media (max-width: 600px) {
.reviews-card { padding: 24px 16px; }
}
/* Header */
.reviews-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--rv-border);
}
.reviews-summary {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.reviews-title {
margin: 0;
font-size: 28px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--rv-text);
line-height: 1.2;
}
.reviews-rating {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-weight: 700;
color: var(--rv-text);
}
.reviews-rating__star {
color: var(--rv-star);
font-size: 18px;
line-height: 1;
transform: translateY(1px);
}
.reviews-rating__value {
font-size: 22px;
letter-spacing: -0.01em;
}
.reviews-rating__max {
color: var(--rv-muted);
font-weight: 500;
font-size: 16px;
margin-left: 2px;
}
.reviews-count {
font-size: 14px;
color: var(--rv-muted);
line-height: 1;
}
/* Просмотры — служебная приписка в подвале блока отзывов. Раньше строка стояла в
шапке, рядом с оценкой, и кегль был как у числа отзывов — на равных с ним.
Теперь это не соседняя строка группы, а подпись под всем блоком: мельче,
светлее и прижата вправо, чтобы не читаться как ещё один показатель
товара. Отбивка сверху отделяет её от последнего отзыва.
*/
.reviews-views {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin-top: var(--zd-space-5, 20px);
/* 14px - минимум текста на сайте (аудитория 40-65+), без прозрачности: так
серый держит контраст 4.5:1. */
font-size: var(--zd-text-sm, 14px);
color: var(--rv-muted);
line-height: 1;
}
/* Глиф крупнее текста: у глаза светлая середина, и в кегль строки он
проваливался в серое пятно. */
.reviews-views__eye {
font-size: 16px;
line-height: 1;
}
.review-add {
padding: 16px 24px;
background: var(--rv-brand);
color: #fff;
border: 1px solid var(--rv-brand);
border-radius: var(--rv-radius-sm);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
}
.review-add:hover {
background: #019866;
border-color: #019866;
}
.review-add:active {
transform: translateY(1px);
}
/* Вариант «нельзя»: вошёл, но товар не покупал. Не кнопка и не ссылка -
нажимать нечего, поэтому ни курсора-руки, ни ховера. Тот же размер и
форма, чтобы блок отзывов не менял высоту в зависимости от того, кто
смотрит. */
.review-add--locked {
background: transparent;
color: var(--rv-muted, #6b7280);
border-color: var(--rv-border, #e5e7eb);
cursor: default;
font-weight: 500;
}
.review-add--locked:hover {
background: transparent;
border-color: var(--rv-border, #e5e7eb);
}
/* Гостевой вариант - ссылка, но выглядит и ведёт себя как кнопка:
.review-add задаёт padding/фон, здесь снимаем только подчёркивание и
выравниваем по центру, чего ссылке по умолчанию не хватает. */
a.review-add {
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* List */
.reviews-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.review {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
padding: 24px 0;
border-bottom: 1px solid var(--rv-border);
background: transparent;
border-radius: 0;
margin: 0;
}
.review[hidden] {
display: none;
}
.review:last-child {
border-bottom: none;
padding-bottom: 24px;
}
.review__main {
flex: 1;
min-width: 0;
}
.review__author {
font-size: 16px;
font-weight: 700;
color: var(--rv-text);
margin-bottom: 8px;
line-height: 1.3;
}
.review__text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: #4a4f4c;
max-width: 640px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
overflow-wrap: anywhere; /* ломать длинные слова без пробелов */
word-break: break-word;
}
.review.is-expanded .review__text {
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
display: block;
}
.review__more {
margin-top: 8px;
padding: 0;
background: transparent;
border: none;
color: #ff8a3b;
font-size: 14px;
font-weight: 500;
cursor: pointer;
line-height: 1;
transition: color 0.2s ease;
}
.review__more:hover {
color: #e5761f;
}
.review__meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
flex-shrink: 0;
padding-top: 2px;
}
.review__stars {
display: inline-flex;
gap: 4px;
font-size: 14px;
line-height: 1;
}
.review__stars .icon {
color: var(--rv-star);
font-size: 14px;
line-height: 1;
}
.review__stars .icon.is-empty {
color: var(--rv-star-empty);
}
.review__date {
font-size: 14px;
color: var(--rv-muted);
line-height: 1;
}
/* Show more */
.show-more {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 8px;
padding: 16px;
background: var(--rv-bg-soft);
color: var(--rv-text);
border: 1px solid var(--rv-border);
border-radius: var(--rv-radius-sm);
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
text-align: center;
}
.show-more__chevron {
display: inline-block;
transition: transform 0.25s ease;
color: currentColor;
}
.show-more:hover {
background: var(--rv-brand-soft);
border-color: rgba(1, 165, 114, 0.35);
color: var(--rv-brand);
}
.show-more.is-open .show-more__chevron {
transform: rotate(180deg);
}
/* Стили формы отзыва переехали в css/review-modal.css: ту же форму открывает
страница заказа в кабинете, где card.css не подключён. */
/* ===== REVIEWS PHOTOS PREVIEW ===== */
.reviews-photos-preview {
display: flex;
gap: 8px;
margin-top: 8px;
}
.reviews-photos-preview[hidden] {
display: none;
}
.reviews-photos-preview__tile {
position: relative;
width: 88px;
height: 88px;
border: 1px solid var(--rv-border);
border-radius: 12px;
overflow: hidden;
padding: 0;
background: var(--rv-bg-soft);
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.reviews-photos-preview__tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.reviews-photos-preview__tile:hover {
border-color: var(--rv-brand);
transform: translateY(-1px);
}
.reviews-photos-preview__more-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 22, 18, 0.55);
color: #fff;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.01em;
pointer-events: none;
}
/* ===== REVIEW PHOTOS ROW ===== */
.review__photos {
display: flex;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap;
}
.review-photo {
width: 56px;
height: 56px;
padding: 0;
background: var(--rv-bg-soft);
border: 1px solid var(--rv-border);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.review-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.review-photo:hover {
border-color: var(--rv-brand);
transform: translateY(-1px);
}
.review.is-highlighted {
animation: reviewFlash 1.6s ease-out;
border-radius: 12px;
}
@keyframes reviewFlash {
0% { background: var(--rv-brand-soft); }
100% { background: transparent; }
}
/* ===== PHOTO GALLERY ===== */
.photo-gallery {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
flex-direction: column;
background: rgba(15, 22, 18, 0.96);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
color: #fff;
padding: 20px 24px 24px;
overscroll-behavior: contain;
}
@media (min-width: 1024px) {
.photo-gallery {
background: rgba(15, 22, 18, 0.9);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
}
.photo-gallery[hidden] {
display: none;
}
.photo-gallery.is-visible {
opacity: 1;
pointer-events: auto;
}
.photo-gallery__close {
position: absolute;
top: 16px;
right: 18px;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
z-index: 2;
}
.photo-gallery__close:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.45);
}
.photo-gallery__top {
display: flex;
align-items: center;
gap: 20px;
padding: 0 56px 0 4px;
flex-wrap: wrap;
min-height: 42px;
}
.photo-gallery__rating {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-weight: 700;
font-size: 16px;
}
.photo-gallery__rating .icon {
color: var(--rv-brand);
font-size: 16px;
transform: translateY(1px);
}
.photo-gallery__rating-max {
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
font-size: 14px;
}
.photo-gallery__count {
font-size: 14px;
color: rgba(255, 255, 255, 0.72);
}
.photo-gallery__date {
margin-left: auto;
font-size: 14px;
color: rgba(255, 255, 255, 0.72);
}
.photo-gallery[data-gallery-mode="local"] .photo-gallery__date {
display: none;
}
.photo-gallery__stage {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 0;
margin: 16px 0 12px;
}
.photo-gallery__image-wrap {
position: relative;
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
user-select: none;
touch-action: pan-y;
overflow: hidden;
}
.photo-gallery__image-pan {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transform: translate3d(0, 0, 0) scale(1);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.photo-gallery__image-pan.is-panning {
transition: none;
}
.photo-gallery__image-wrap.is-zoomed {
cursor: grab;
touch-action: none;
}
.photo-gallery__image-wrap.is-zoomed.is-grabbing {
cursor: grabbing;
}
.photo-gallery__image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 16px;
-webkit-user-drag: none;
pointer-events: none;
}
.photo-gallery__nav {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: #fff;
cursor: pointer;
flex-shrink: 0;
border: 0;
padding: 0;
opacity: 0.75;
transition: opacity 0.15s ease;
}
.photo-gallery__nav:hover {
opacity: 1;
}
.photo-gallery__nav:disabled {
opacity: 0.25;
cursor: default;
}
.photo-gallery__nav svg {
width: 16px;
height: 16px;
}
.photo-gallery__video {
max-width: 100%;
max-height: 100%;
border-radius: 16px;
background: #000;
cursor: pointer;
outline: none;
}
.photo-gallery__video::-webkit-media-controls {
display: none !important;
}
.photo-gallery__thumb-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
pointer-events: none;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.photo-gallery__thumb {
position: relative;
}
.photo-gallery__thumb video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.photo-gallery__jump {
align-self: center;
padding: 12px 24px;
background: var(--rv-brand);
border: 1px solid var(--rv-brand);
color: #fff;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
margin-bottom: 12px;
transition: background 0.2s ease;
}
.photo-gallery__jump:hover {
background: var(--rv-brand-dark);
}
.photo-gallery[data-gallery-mode="local"] .photo-gallery__jump {
display: none;
}
.photo-gallery[data-gallery-mode="product"] .photo-gallery__top,
.photo-gallery[data-gallery-mode="product"] .photo-gallery__jump {
display: none;
}
.photo-gallery__strip {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 8px 2px 4px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.photo-gallery__strip::-webkit-scrollbar {
height: 6px;
}
.photo-gallery__strip::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.25);
border-radius: 3px;
}
.photo-gallery__thumb {
width: 64px;
height: 64px;
flex-shrink: 0;
padding: 0;
background: transparent;
border: 2px solid transparent;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
opacity: 0.55;
transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.photo-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.photo-gallery__thumb:hover {
opacity: 0.85;
transform: translateY(-1px);
}
.photo-gallery__thumb.is-active {
opacity: 1;
border-color: var(--rv-brand);
}
/* ===== ZOOM CONTROLS ===== */
.photo-gallery__zoom {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 8px;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 4;
user-select: none;
opacity: 0.9;
transition: opacity 0.2s ease;
}
.photo-gallery__zoom:hover {
opacity: 1;
}
.photo-gallery__zoom-btn {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 0;
color: #fff;
border-radius: 50%;
cursor: pointer;
transition: background 0.15s ease;
}
.photo-gallery__zoom-btn:hover {
background: rgba(255, 255, 255, 0.14);
}
.photo-gallery__zoom-btn:active {
background: rgba(255, 255, 255, 0.22);
}
.photo-gallery__zoom-btn:disabled {
opacity: 0.35;
cursor: default;
}
.photo-gallery__zoom-value {
min-width: 44px;
text-align: center;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.85);
font-variant-numeric: tabular-nums;
}
.photo-gallery[data-gallery-mode="video"] .photo-gallery__zoom,
.photo-gallery__zoom.is-hidden {
display: none;
}
@media (max-width: 600px) {
.photo-gallery {
padding: 16px 12px 16px;
}
.photo-gallery__top {
padding-right: 48px;
gap: 12px;
}
.photo-gallery__date {
width: 100%;
margin-left: 0;
}
.photo-gallery__stage {
gap: 8px;
}
.photo-gallery__nav {
width: 20px;
height: 20px;
}
.photo-gallery__zoom {
bottom: 10px;
padding: 4px 8px;
gap: 2px;
}
.photo-gallery__zoom-btn {
width: 30px;
height: 30px;
}
.photo-gallery__zoom-value {
min-width: 38px;
font-size: 12px;
}
.reviews-photos-preview__tile {
width: 72px;
height: 72px;
}
}
@media (max-width: 768px) {
.reviews-card {
padding: 24px 20px;
border-radius: 16px;
}
.reviews-title {
font-size: 22px;
}
.review {
flex-direction: column;
gap: 12px;
padding: 20px 0;
}
.review__meta {
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 12px;
}
}
/* FAQ Вопрос ответ */
.faq {
max-width: 1500px;
margin: 0 auto;
padding: 20px 0;
}
.faq-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 40px;
color: #1f1f1f;
}
.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: 24px 32px;
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;
}
/* ===== ADAPTIVE ===== */
@media (max-width: 1024px) {
h1.hot-name .hot-name-ru{
/* Было 18px - заголовок товара выходил мельче описания под ним, та же
беда, что у избранного с его лестницей 22/20/18/17. Одна ступень вниз от
32px по шкале 12/14/16/18/22/28/36. Замер.
*/
font-size: 28px;
}
h1.hot-name .hot-name-en{
/* 16 -> 18px: латинское название - подзаголовок, оно должно оставаться
заметно мельче русского (28), но держаться на ступени шкалы. */
font-size: 18px;
}
.product-top {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.hot-img-box img {
border: none;
}
.hot-price-box {
padding-top: 12px;
}
h1.hot-name ~ .hot-price-box .hot-price {
font-size: 28px;
}
h1.hot-name ~ .hot-price-box .hot-old {
font-size: 18px;
}
.faq-title {
font-size: 1.8rem;
margin-bottom: 32px;
}
.faq-question {
padding: 20px;
font-size: 1.1rem;
}
.faq-answer p {
padding: 24px 20px;
font-size: 1rem;
}
}
@media (max-width: 768px) {
.footer {
padding: 32px 16px 180px !important;
}
/* Одна колонка, а не 2: иконкам лучше отдать место, чем сужать текст.
В 2 колонках длинные подписи ("Теплица/открытый грунт")
переносились по 2-3 слова в строку и плохо читались - каждая плашка теперь
во всю ширину, текст в одну строку почти всегда.
*/
.product-features {
grid-template-columns: 1fr;
gap: 10px;
}
.feature {
padding: 12px 16px;
justify-content: flex-start;
}
.feature i {
font-size: 24px;
}
h1.hot-name .hot-name-ru {
font-size: 28px;
}
h1.hot-name ~ .hot-price-box .hot-price {
font-size: 28px;
}
.reviews-head {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.review-add {
width: 100%;
text-align: center;
}
}
@media (max-width: 425px) {
.faq-title {
font-size: 1.5rem;
}
.faq-question {
padding: 20px 16px;
font-size: 1rem;
}
.faq-icon {
font-size: 1.3rem;
margin-left: 16px;
}
.faq-answer p {
padding: 20px 16px;
}
.right-menu-func{
gap: 4px;
}
.right-menu i{
font-size: 23px;
}
/* Ступени заголовка здесь НЕТ. Всего их было четыре - 32 в базе, 28 на 1024,
28 на 768 и 22 тут, - и на Pixel 7 (412px) срабатывала последняя: название
товара выходило 22px против 28px у заголовка списка на соседнем экране, то
есть главный заголовок сайта был мельче второстепенного. Латиница по той
же причине падала до 14px, вровень с обычным текстом. Оставлена одна
мобильная ступень (28/18 на 1024). Замер.
*/
.hot-price-box {
align-items: flex-start;
gap: 8px;
}
h1.hot-name ~ .hot-price-box .hot-price {
font-size: 22px;
}
.product-features {
grid-template-columns: 1fr;
}
.product-brand {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
/* Модальное окно "Поделиться" */
.share-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
justify-content: center;
align-items: center;
animation: fadeIn 0.3s;
}
.share-modal.active {
display: flex;
}
.share-modal-content {
background: #fff;
border-radius: 20px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
padding: 24px;
position: relative;
animation: slideUp 0.3s;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.share-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 2px solid #f0f0f0;
}
.share-modal-header h3 {
font-size: 18px;
margin: 0;
color: #333;
}
.share-modal-close {
background: none;
border: none;
font-size: 32px;
cursor: pointer;
color: #999;
padding: 0 12px;
line-height: 1;
}
.share-modal-close:hover {
color: #333;
}
.share-product-info {
background: #f8f9fa;
border-radius: 12px;
margin-bottom: 20px;
display: flex;
padding: 12px;
gap: 16px;
}
.share-product-image {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
}
.share-product-details {
flex: 1;
text-align: left;
}
.share-product-name {
font-weight: 600;
font-size: 18px;
margin-bottom: 4px;
color: #333;
}
.share-product-name-en {
font-size: 14px;
color: #666;
margin-bottom: 4px;
}
.share-product-price {
font-size: 22px;
font-weight: 700;
color: #28a745;
}
.share-product-oldprice{
color: #A8A8A8;
font-size: 18px;
text-decoration: line-through;
font-weight: 500;
padding-left: 16px;
}
.share-product-flex{
display: flex;
flex-direction: row;
}
.share-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.share-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
color: #fff;
}
.whatsapp {
background-color: #01A572;
transition: background-color 0.3s ease;
}
.telegram {
background-color: #0088cc;
transition: background-color 0.3s ease;
}
.whatsapp:hover{
background-color: #018b5e;
}
.telegram:hover{
background-color: #1275b3;
}
/* «Скопировать ссылку» и «Ещё…» - второстепенные: светлые, чтобы WhatsApp и Telegram оставались главными. */
.share-btn--light { background: #F2F4F5; color: #1f2937; font-family: inherit; min-height: 48px; padding: 12px 10px; font-size: 15px; white-space: nowrap; }
.share-buttons .share-note { grid-column: 1 / -1; margin-top: 0; }
.share-btn--light:hover { background: #E6EAEC; }
.share-btn--light .zi { font-size: 18px; color: #01A572; }
.whatsapp, .telegram { min-height: 48px; }
.share-link-box {
display: flex;
gap: 12px;
margin-top: 16px;
}
.share-link-input {
flex: 1;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 14px;
background: #f8f9fa;
}
.share-note {
margin-top: 16px;
padding: 12px;
border-radius: 8px;
font-size: 14px;
display: none;
}
.share-note.success {
display: block;
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
/* Адаптация для мобильных */
@media (max-width: 480px) {
.share-buttons {
grid-template-columns: 1fr;
}
.share-product-info {
flex-direction: column;
text-align: center;
}
.share-modal-content{
padding: 16px;
}
.share-product-flex{
flex-direction: column;
}
.share-product-oldprice{
padding-left: 0;
}
}
/* Кнопки в корзину связаться */
/* Основная панель */
.mobile-checkout-btn {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: #fff;
border: none;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 16px 20px 24px 20px;
margin: 0 auto;
z-index: 998;
box-shadow: 0px 13px 52px 36px rgba(0, 0, 0, 0.12);
pointer-events: auto;
}
.mobile-checkout-content {
display: flex;
align-items: center;
gap: 12px;
background: transparent;
padding: 0;
border-radius: 0;
width: 100%;
}
/* Общий стиль кнопок */
.mobile-action-btn {
flex: 1;
height: 54px;
border-radius: 16px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border: none;
transition: background-color 0.3s ease;
}
.mobile-action-btn.primary {
gap: 8px;
background: #FF7700;
color: #fff;
}
.mobile-action-btn.primary:hover {
background: #e56900;
}
.mobile-action-btn.primary.added {
background: #01A572;
}
.mobile-action-btn.primary.added:hover {
background: #018f63;
}
.mobile-action-btn.secondary {
gap: 8px;
/* #168bd4 давал белому тексту 3.7:1, норма 4.5 */
background: #1276b8;
color: #fff;
}
.mobile-action-btn.secondary:hover {
background: #0f6299;
}
@media screen and (max-width: 1024px) {
.mobile-checkout-btn{
bottom: 64px;
}
}
@media screen and (min-width: 1024px) {
.mobile-checkout-btn{
display: none;
}
}
@media screen and (max-width: 768px) {
.mobile-checkout-btn {
padding: 16px 16px 24px 16px;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.mobile-action-btn {
height: 50px;
font-size: 18px;
border-radius: 16px;
}
}
@media screen and (max-width: 576px) {
.mobile-checkout-btn {
bottom: calc(60px + var(--zd-nav-lift));
padding: 12px 12px 20px 12px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.mobile-action-btn {
height: 48px;
font-size: 16px;
border-radius: 12px;
}
.mobile-checkout-content {
gap: 12px;
}
}
@media screen and (max-width: 440px) {
.mobile-action-btn {
height: 46px;
font-size: 16px;
border-radius: 12px;
}
}
.mobile-checkout-btn.variant-cart .primary {
background: #fff;
color: #01A572;
border: 2px solid #01A572;
}
.mobile-checkout-btn.variant-cart .secondary {
background: #01A572;
color: #fff;
}
/* === Десктопные кнопки === */
.checkout-btn {
width: 100%;
margin-top: 20px;
}
.checkout-content {
display: flex;
align-items: center;
gap: 12px;
max-width: 900px;
/* Кнопки стояли вплотную к разделительной линии под ними - выглядело так,
будто блок обрезали. Отступ по шкале проекта: 24px, как у остальных блоков
карточки.
*/
margin-bottom: 24px;
}
.action-btn {
flex: 1;
height: 54px;
border-radius: 16px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border: none;
transition: background-color 0.3s ease;
}
.action-btn.primary {
background: #FF7700;
color: #fff;
transition: background 0.3s ease;
}
.action-btn.primary:hover {
background: #e56900;
}
.action-btn.primary.added {
background: #01A572;
}
.action-btn.primary.added:hover {
background: #018f63;
}
/* Тот же синий, что у "Узнать цену" на плитке в каталоге
(.hot-add--contract, css/product-page.css) - было #168bd4, чуть темнее и
заметно другой оттенок рядом с тем же назначением кнопки на плитке.
*/
.action-btn.secondary {
background: #1E88E5;
color: #fff;
}
.action-btn.secondary:hover {
background: #1976D2;
}
@media (max-width: 1024px) {
.checkout-btn {
display: none;
}
}
@media (min-width: 1025px) {
.checkout-btn {
display: block;
}
}
.action-btn i{
padding: 0 8px;
}
/*****************************
70 - Recommend block ("Также рекомендуем купить")
Полностью самодостаточная секция — все стили .hot-card
скопированы из product-page.css и заскоплены под .recommend.
НЕ зависит от product-page.css.
Дизайн-система (всё кратно 4px):
─ card radius: 12px
─ image: 1:1, cover, без рамки
─ button height: 40px
─ like: 32×32
─ label: 11px / 700 / uppercase
─ scale tokens: 4 / 8 / 12 / 16 / 32 / 40
*****************************/
.recommend {
max-width: 1500px;
margin: 0 auto;
padding: 40px 0 24px;
}
.recommend__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.recommend__title {
font-size: 1.75rem;
font-weight: 700;
color: #1f1f1f;
margin: 0;
line-height: 1.2;
}
.recommend__all {
display: inline-flex;
align-items: center;
gap: 8px;
color: #01A572;
font-size: 14px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: color .2s ease, gap .2s ease;
}
.recommend__all:hover {
gap: 12px;
color: #018f63;
}
.recommend__all-arrow {
width: 7px;
height: 7px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
display: inline-block;
}
/* === Сетка: 3 колонки === */
/* Было 4 колонки, но карточек ровно 3 (см. products/card.php -
array_slice(...,0,3)) - 4-колоночная сетка с 3 карточками оставляла пустой
правый слот, ряд читался перекошенным вправо/не по центру.
*/
.recommend__list {
/* ЧЕТЫРЕ КАРТОЧКИ. Раскладка
ступенями: 4 → 3 → 2, ниже по файлу. Ряд всегда заполнен целиком — блок из
четырёх карточек в трёхколоночной сетке оставлял одинокую четвёртую во
второй строке.
*/
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
/* === Карточка-вариант: вертикальный layout (img сверху, инфо снизу).
ООП-модификатор .hot-card.hot-card--vertical — применяется в блоке
«Также рекомендуем» и в любом контексте, где нужна узкая колонка. === */
.hot-card.hot-card--vertical {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
}
.hot-card--vertical .hot-top {
display: flex;
flex-direction: column;
height: 100%;
}
/* Вертикальный layout: картинка сверху, инфо снизу */
.hot-card--vertical .hot-main-row {
position: relative;
display: flex;
flex-direction: column;
/* flex:1 - без него .hot-main-row (потомок .hot-top{height:100%}) не
растягивался сам, и .content-wrapper{flex:1} внутри него было нечем
заполнять: карточки с более коротким инфо-блоком (например, без лого
бренда - просто короче) получали более короткий content-wrapper, и
цена/кнопка (margin-top:auto ниже) съезжали выше, чем у соседних карточек
той же высоты. Найдено: "криво не по центру".
*/
flex: 1;
}
/* === Картинка — квадрат, на всю ширину, без рамки === */
.hot-card--vertical .hot-img-box {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: #fff;
overflow: hidden;
border: none;
border-radius: 0 0 12px 12px;
margin: 0;
}
.hot-card--vertical .hot-img-box img {
width: 100%;
height: 100%;
/* cover - согласовано с .image-track img выше: заполнение бокса важнее
небольшой обрезки краёв. */
object-fit: cover;
object-position: center;
display: block;
}
.hot-card--vertical .hot-img-box a {
display: block;
width: 100%;
height: 100%;
}
/* Лейбл .hot-label убран — статусы карточки выражаются через
модификаторы .hot-card--sale/new/hit и чипы .hot-icon-strip. */
/* === Кнопка «Сравнение» — правый-верхний угол фото === */
.hot-card--vertical .hot-compare {
position: absolute;
top: 8px;
right: 8px;
/* 32px были ниже минимальной зоны нажатия (44px).
Кнопка лежит поверх фото абсолютом, поэтому рост ничего не двигает. */
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.92);
border: none;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
padding: 0;
}
.hot-card--vertical .hot-compare i { font-size: 14px; color: #1f1f1f; }
.hot-card--vertical .hot-compare.is-active { background: #168bd4; }
.hot-card--vertical .hot-compare.is-active i { color: #fff; }
/* === Контент === */
.hot-card--vertical .content-wrapper {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
width: 100%;
}
.hot-card--vertical .hot-info {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
padding-bottom: 0;
}
.hot-card--vertical .hot-info > a {
text-decoration: none;
color: inherit;
}
.hot-card--vertical .hot-name-ru {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: #1f1f1f;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.1px;
min-height: calc(16px * 1.35 * 2);
margin-bottom: 8px;
word-break: break-word;
}
.hot-card--vertical .hot-name-en {
display: block;
color: #666;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
/* СЛОТ, А НЕ СТРОКА. Элемент рендерится ВСЕГДА (lib/product-card.php),
но у товаров без английского названия он пустой и занимает 0px вместо
Всё, что ниже - страна, отзывы, цена, - съезжало на эти 17px, и соседние
карточки в ряду не совпадали ни одной строкой. Замерено на блоке «Также
рекомендуем» карточки 10: цена стояла на 485px у одних и 502px у
других. Держим высоту одной строки независимо от содержимого.
*/
min-height: calc(14px * 1.2);
}
/* СЛОТ БРЕНДА - ОДНА ВЫСОТА НА ОБА ВИДА.
Разметка рисует ЛИБО , ЛИБО