/* ===========================================================================
sauna82 v2 — слой нового дизайна поверх темы Aspro
---------------------------------------------------------------------------
Подключается последним, после всех стилей темы, поэтому при равной
специфичности выигрывает по порядку. `!important` — только там, где тема
бьёт своим `!important`, и с комментарием почему.
Тему Aspro (~600 КБ CSS) выкинуть нельзя: от неё зависят умный фильтр,
попапы, слайдеры и fancybox. Поэтому здесь не «новая вёрстка», а
перекраска существующей разметки по токенам из макета.
Разделы добавляются по мере внедрения макета:
01. Шрифт
02. Токены
03. База
04. Карточка в списке каталога
05. Сайдбар: города и умный фильтр
06. Логотип
07. Шапка
=========================================================================== */
/* --- 01. Шрифт ------------------------------------------------------------
Вместо Ubuntu с fonts.googleapis.com — самохостинг Inter. Внешний домен
на каждой странице это и лишний RTT, и зависимость от доступности Google
у российского посетителя.
Один вариативный файл на подмножество покрывает начертания 400–700,
поэтому вместо восьми запросов — два, суммарно 65 КБ.
Подмножество latin-ext намеренно не берём: 83 КБ ради символов, которых
на сайте нет.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Inter v2';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/inter-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter v2';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --- 02. Токены -----------------------------------------------------------
Значения взяты из макета (Tailwind-палитра). Сам Tailwind не подключаем:
в макете он идёт с CDN, а это JIT-компилятор в браузере — блокирующий
скрипт и голая страница без JS. Для каталога, живущего с поиска, нельзя.
-------------------------------------------------------------------------- */
:root {
/* Фирменный оранжевый из макета. Прежний #e66200 в css/custom.css этого
шаблона заменён на var(--v2-brand) — два разных оранжевых на одной
странице читаются как баг, а не как система. Боевой шаблон
aspro_mshop_sauna со своим #e66200 не тронут. */
--v2-brand: #f97316;
--v2-brand-hover: #ea580c;
--v2-brand-light: #ffedd5;
--v2-brand-dark: #c2410c;
/* Нейтральные */
--v2-bg: #f9fafb;
--v2-surface: #ffffff;
--v2-gray: #f3f4f6;
--v2-border: #e5e7eb;
--v2-text: #111827;
--v2-text-muted: #374151;
/* gray-600 из макета: цвет кнопки меню, крестика и подписи счётчика.
Отдельный токен, потому что это не «чуть темнее» — в макете рядом
стоят gray-500 (значок сравнения) и gray-600 (бутерброд). */
--v2-text-soft: #4b5563;
--v2-text-light: #6b7280;
/* Служебные цвета из макета */
--v2-badge-hit: #3b82f6;
--v2-badge-rec: #7c3aed;
--v2-star: #facc15;
/* Скругления */
--v2-radius-sm: 0.375rem;
--v2-radius: 0.5rem;
--v2-radius-lg: 0.75rem;
--v2-radius-xl: 1rem;
--v2-radius-full: 9999px;
/* Тени */
--v2-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
--v2-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
--v2-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
/* Типографика */
--v2-font: 'Inter v2', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
/* Переход — тем же ease-out 0.2s, что уже используется в теме,
чтобы новые элементы не выбивались из общего ритма. */
--v2-transition: .2s ease-out;
/* Значки применяются через mask, поэтому цвет задаётся обычным
background-color и меняется при наведении.
⚠️ Это НЕ перерисовка «по мотивам», а исходные контуры Font Awesome
Free 6.4.0 — ровно те, что подключены в макете (Icons: CC BY 4.0,
© Fonticons, Inc., https://fontawesome.com/license/free). Сама
библиотека не подключается: в макете она идёт с CDN, а это лишний
внешний домен и ~30 КБ CSS на каждой странице ради четырёх значков.
⚠️ viewBox у иконок НЕ квадратный (bars и chart-simple — 448×512,
xmark — 384×512). Размер в mask-size обязан сохранять пропорцию,
иначе значок растянется: 0.875 ширины от высоты у первых двух,
0.75 у крестика. В макете это соотношение держит сам Font Awesome
(высота 1em, ширина auto). */
--v2-icon-compare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M160 80c0-26.5 21.5-48 48-48h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V80zM0 272c0-26.5 21.5-48 48-48H80c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272zM368 96h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H368c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48z'/%3E%3C/svg%3E");
--v2-icon-burger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");
--v2-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
--v2-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
/* Звёзды рейтинга: заливка и контур — тоже Font Awesome 6.4.0
(`star` solid и regular), ровно как в макете. До этого на карточке
стояли спрайты темы, оранжевые вместо жёлтых. */
--v2-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
--v2-icon-star-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.6 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/svg%3E");
--v2-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
--v2-icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/svg%3E");
/* Значки соцсетей для «Поделиться» — те же контуры Font Awesome Free
6.4.0 (brands: facebook-f, instagram, telegram, whatsapp, viber;
solid: link, check). Логотипы — товарные знаки владельцев,
используются как кнопки перехода, не как оформление сайта. */
--v2-icon-fb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
--v2-icon-ig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
--v2-icon-tg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z'/%3E%3C/svg%3E");
--v2-icon-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
--v2-icon-viber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M444 49.9C431.3 38.2 379.9.9 265.3.4c0 0-135.1-8.1-200.9 52.3C27.8 89.3 14.9 143 13.5 209.5c-1.4 66.5-3.1 191.1 117 224.9h.1l-.1 51.6s-.8 20.9 13 25.1c16.6 5.2 26.4-10.7 42.3-27.8 8.7-9.4 20.7-23.2 29.8-33.7 82.2 6.9 145.3-8.9 152.5-11.2 16.6-5.4 110.5-17.4 125.7-142 15.8-128.6-7.6-209.8-49.8-246.5zM457.9 287c-12.9 104-89 110.6-103 115.1-6 1.9-61.5 15.7-131.2 11.2 0 0-52 62.7-68.2 79-5.3 5.3-11.1 4.8-11-5.7 0-6.9.4-85.7.4-85.7-.1 0-.1 0 0 0-101.8-28.2-95.8-134.3-94.7-189.8 1.1-55.5 11.6-101 42.6-131.6 55.7-50.5 170.4-43 170.4-43 96.9.4 143.3 29.6 154.1 39.4 35.7 30.6 53.9 103.8 40.6 211.1zm-139-80.8c.4 8.6-12.5 9.2-12.9.6-1.1-22-11.4-32.7-32.6-33.9-8.6-.5-7.8-13.4.7-12.9 27.9 1.5 43.4 17.5 44.8 46.2zm20.3 11.3c1-42.4-25.5-75.6-75.8-79.3-8.5-.6-7.6-13.5.9-12.9 58 4.2 88.9 44.1 87.8 92.5-.1 8.6-13.1 8.2-12.9-.3zm47 13.4c.1 8.6-12.9 8.7-12.9.1-.6-81.5-54.9-125.9-120.8-126.4-8.5-.1-8.5-12.9 0-12.9 73.7.5 133 51.4 133.7 139.2zM374.9 329v.2c-10.8 19-31 40-51.8 33.3l-.2-.3c-21.1-5.9-70.8-31.5-102.2-56.5-16.2-12.8-31-27.9-42.4-42.4-10.3-12.9-20.7-28.2-30.8-46.6-21.3-38.5-26-55.7-26-55.7-6.7-20.8 14.2-41 33.3-51.8h.2c9.2-4.8 18-3.2 23.9 3.9 0 0 12.4 14.8 17.7 22.1 5 6.8 11.7 17.7 15.2 23.8 6.1 10.9 2.3 22-3.7 26.6l-12 9.6c-6.1 4.9-5.3 14-5.3 14s17.8 67.3 84.3 84.3c0 0 9.1.8 14-5.3l9.6-12c4.6-6 15.7-9.8 26.6-3.7 14.7 8.3 33.4 21.2 45.8 32.9 7 5.7 8.6 14.4 3.8 23.6z'/%3E%3C/svg%3E");
--v2-icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/svg%3E");
--v2-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
/* Конверт (envelope-open, FA regular) — блок подписки на главной. */
--v2-icon-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M255.4 48.2c.2-.1 .4-.2 .6-.2s.4 .1 .6 .2L460.6 194c2.1 1.5 3.4 3.9 3.4 6.5v13.6L291.5 355.7c-20.7 17-50.4 17-71.1 0L48 214.1V200.5c0-2.6 1.2-5 3.4-6.5L255.4 48.2zM48 276.2L190 392.8c38.4 31.5 93.7 31.5 132 0L464 276.2V456c0 4.4-3.6 8-8 8H56c-4.4 0-8-3.6-8-8V276.2zM256 0c-10.2 0-20.2 3.2-28.5 9.1L23.5 154.9C8.7 165.4 0 182.4 0 200.5V456c0 30.9 25.1 56 56 56H456c30.9 0 56-25.1 56-56V200.5c0-18.1-8.7-35.1-23.4-45.6L284.5 9.1C276.2 3.2 266.2 0 256 0z'/%3E%3C/svg%3E");
--v2-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
}
/* --- 03. База -------------------------------------------------------------
Ровно три вещи: шрифт, фон и цвет ссылок. Ни ресета, ни нормалайза —
у темы Aspro свой, и второй поверх него ломает вёрстку компонентов
(фильтр, попапы, слайдеры).
Шапка структурно не трогается — она отдельная задача. Но типографика
и акцентный цвет применяются глобально, иначе на странице оказалось бы
два разных шрифта и два разных оранжевых.
-------------------------------------------------------------------------- */
body#main {
font-family: var(--v2-font);
background: var(--v2-bg);
color: var(--v2-text-muted);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Тема задаёт font-family точечно многим элементам, поэтому наследования
от body недостаточно. Ограничиваемся текстовыми элементами: трогать
`*` нельзя — иконочные шрифты темы (fonts/*.woff) подменятся и вместо
иконок появятся квадраты. */
body#main h1, body#main h2, body#main h3, body#main h4, body#main h5, body#main h6,
body#main p, body#main a, body#main span, body#main li, body#main td, body#main th,
body#main label, body#main input, body#main select, body#main textarea, body#main button,
body#main .title, body#main .item-title, body#main .price {
font-family: var(--v2-font);
}
/* ⚠️ Глобального перекрашивания ссылок здесь нет и быть не должно.
Первая версия задавала цвет через `body#main a` — селектор с ID, он
перебивает почти любое правило темы, и белый текст активного пункта
в списке городов стал оранжевым на оранжевом, то есть исчез.
Оранжевый темы (#fa6b00) от нашего (#f97316) на глаз неотличим, поэтому
ссылки оставляем теме, а цвет задаём точечно там, где так велит макет. */
/* --- 04. Карточка в списке каталога ---------------------------------------
Разметка Aspro менять не пришлось: .list_item уже трёхколоночный flex —
фото / описание / цена с кнопкой, ровно как в макете. Перекрашиваем.
Селекторы с префиксом `.display_list` — чтобы по специфичности не уступать
правилам темы. Файл грузится последним, поэтому при равном весе выигрывает
по порядку и `!important` почти нигде не нужен.
-------------------------------------------------------------------------- */
/* Сама карточка */
.display_list .list_item_wrapp {
background: var(--v2-surface);
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius-xl);
box-shadow: var(--v2-shadow-sm);
margin-bottom: 24px;
overflow: visible;
transition: box-shadow var(--v2-transition), border-color var(--v2-transition);
}
/* Тема срезает верхнюю грань у второй и последующих карточек
(.display_list .list_item_wrapp + div .list_item_wrapp{border-top-width:0}),
из-за чего верх и низ карточки выглядели по-разному. */
.display_list .list_item_wrapp + div .list_item_wrapp {
border-top-width: 1px;
}
.display_list .list_item_wrapp:hover {
box-shadow: var(--v2-shadow-md);
}
/* Тема белит рамку при наведении своим !important — перебиваем своим. */
.display_list .item_wrap:hover {
border-color: var(--v2-border) !important;
}
.display_list .list_item_wrapp.wc-tier-vip:hover {
border-color: var(--v2-brand) !important;
}
/* ⚠️ Никакого `gap` здесь быть не должно. Ширины трёх колонок заданы темой
в процентах и в сумме дают ровно 100%; любой gap выталкивает третью колонку
(цену с кнопкой) на следующую строку — `flex-wrap` у .list_item включён.
Промежутки набираем внутренними отступами колонок. */
.display_list .list_item {
padding: 20px;
align-items: stretch;
background: transparent;
}
/* Тема растягивает .list_item за края карточки отрицательными полями
(padding 19px + margin -19px), из-за чего его собственный отступ
обнуляется, а видимый отступ даёт padding колонок. Мы padding колонки
с фото убрали ради ширины — значит поля надо погасить, иначе снимок
прилипает к рамке. Только на десктопе: на мобильном карточка
складывается в столбец и растяжка за края там работает как надо. */
@media (min-width: 768px) {
.display_list .item_wrap .list_item {
margin-left: 0;
margin-right: 0;
}
}
/* Колонка с фото ---------------------------------------------------------- */
/* Фото должно занимать колонку целиком. Тема отдавала ему 170px из 225:
19px padding у колонки с каждой стороны, ещё max-width:170px и
margin:0 8.5px у самой ссылки-обёртки. В сумме 55px пустого места
по бокам, из-за чего снимок получался вертикальным, хотя колонка
позволяет горизонтальный. */
/* Ширины колонок переопределены: тема делит карточку 25/50/25, но у описания
запас есть, а фото от лишней ширины выигрывает заметно — снимок перестаёт
быть «портретным». Сумма обязана остаться ровно 100%: flex-wrap у
.list_item включён, и перебор выбросит колонку с ценой на новую строку. */
/* ⚠️ Селектор с `.item_wrap` — не для красоты: тема задаёт ширины через
`.display_list .item_wrap .list_item .image_block`, это на один класс
больше, чем напрашивается, и короткий селектор ей проигрывает молча.
При равной специфичности выигрываем порядком загрузки. */
.display_list .item_wrap .list_item .image_block {
flex: 0 0 31%;
width: 31%;
max-width: 31%;
height: auto;
padding: 0;
}
.display_list .item_wrap .list_item .description_wrapp {
flex: 0 0 40%;
width: 40%;
max-width: 40%;
}
/* Колонке цены нужно 27%, а не 25%: у неё свои 19px отступов от темы,
и на 25% надпись «ПОКАЗАТЬ ТЕЛЕФОН» переставала помещаться в строку.
⚠️ Здесь тема цепляет ещё и `.main_item_wrapper` — пять классов против
четырёх у соседних колонок. Без него правило проигрывает. */
/* 29% — минимум, при котором иконка сравнения, «Отзывы (N)» и пять звёзд
помещаются в одну строку, как в макете: им нужно 218px, колонка даёт 229. */
.display_list .item_wrap .list_item .information_wrapp.main_item_wrapper {
flex: 0 0 29%;
width: 29%;
max-width: 29%;
}
.display_list .list_item .image_wrapper_block {
width: 100%;
max-width: none;
height: auto;
}
.display_list .list_item .thumb {
display: block;
width: 100%;
max-width: none;
height: 200px;
margin: 0;
border-radius: var(--v2-radius-lg);
/* overflow:hidden здесь НЕ ставим: обрезку делает object-fit, а hidden
срезал бы стикеры HIT и «Рекомендуем» — они лежат внутри .thumb
и намеренно вынесены за её край. */
}
.display_list .list_item .thumb img {
border-radius: var(--v2-radius-lg);
}
/* Колонка с описанием ----------------------------------------------------- */
.display_list .description_wrapp .item-title a {
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: var(--v2-brand);
text-decoration: none;
}
.display_list .description_wrapp .item-title a:hover {
color: var(--v2-brand-hover);
text-decoration: underline;
}
.display_list .description_wrapp .item-title {
margin-bottom: 12px;
}
.display_list .props_list li {
font-size: 14px;
line-height: 1.5;
margin-bottom: 8px;
color: var(--v2-text-light);
}
/* Название свойства («Адрес:», «Вместительность:») — тёмное и полужирное,
значение остаётся серым. В макете это главный приём читаемости карточки. */
.display_list .props_list .cl_prop_name_section {
font-weight: 600;
color: var(--v2-text-muted);
}
/* Колонка с ценой и действиями -------------------------------------------- */
.display_list .description_wrapp {
box-sizing: border-box;
padding: 0 24px;
}
/* ⚠️ Пять классов — иначе не перебить тему, которая держит здесь
`padding: 0 19px`. Правый отступ съедал 19px внутри колонки, хотя
от рамки карточки её и так отделяет её собственный padding: содержимое
зря обрывалось, не доходя до края. */
.display_list .item_wrap .list_item .information_wrapp.main_item_wrapper {
box-sizing: border-box;
border-left: 1px solid var(--v2-gray);
padding: 0 0 0 20px;
}
.display_list .cl_price_sauni_section {
font-size: 18px;
font-weight: 400;
color: var(--v2-text);
}
.display_list .cl_price_offer_in_section b {
font-size: 18px;
font-weight: 700;
color: var(--v2-text);
}
/* Пояснение к цене («Будни — 1500 ₽/час…») — мелкое и тихое. */
.display_list .cl_price_offer_in_section > span:not(.cl_price_sauni_section) {
display: block;
margin-top: 6px;
font-size: 12px;
line-height: 1.5;
color: var(--v2-text-light);
}
/* Кнопка «Показать телефон». В теме она 10px и радиусом 2px — в макете это
главное действие карточки: во всю ширину колонки, крупное.
⚠️ Цепляемся за `data-obj`, а не за класс. По клику скрипт СНИМАЕТ
с этого же спана класс `cl_display_phone` и вешает другие, поэтому
стили, привязанные к классу, после показа номера переставали
действовать: элемент падал к теме, сжимался по содержимому, и вся
строка со сравнением и отзывами прыгала. `data-obj` остаётся в обоих
состояниях. У «Забронировать» его нет, так что чужого не зацепим. */
.display_list .cl_contact_block > span[data-obj] {
display: block;
flex: 0 0 100%;
width: 100%;
box-sizing: border-box;
/* Боковые отступы небольшие: колонка узкая, а «ПОКАЗАТЬ ТЕЛЕФОН»
капслоком при padding 16px переносилось на вторую строку. */
padding: 13px 8px;
/* Прозрачная рамка нужна и в залитом состоянии: у показанного номера
рамка есть, и без неё коробки отличались бы по высоте на 2px. */
border: 1px solid transparent;
border-radius: var(--v2-radius-lg);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
/* Запас по ширине здесь измеряется единицами пикселей, и без запрета
переноса надпись рвётся пополам при любой мелкой правке колонок. */
white-space: nowrap;
transition: background var(--v2-transition), border-color var(--v2-transition);
}
/* До клика — сплошная фирменная кнопка. */
.display_list .cl_contact_block > span.cl_display_phone {
background: var(--v2-brand);
border-color: var(--v2-brand);
color: #fff;
box-shadow: var(--v2-shadow-sm);
cursor: pointer;
}
.display_list .cl_contact_block > span.cl_display_phone:hover {
background: var(--v2-brand-hover);
border-color: var(--v2-brand-hover);
}
/* После клика спан превращается в контейнер: у заведения может быть
несколько номеров, и каждый должен быть отдельной кнопкой, по которой
можно позвонить. Сам контейнер поэтому теряет вид кнопки. */
.display_list .cl_contact_block > span[data-obj]:not(.cl_display_phone) {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
border-color: transparent;
background: none;
box-shadow: none;
text-transform: none;
}
/* Компонент разделяет номера ещё и
— он нужен старому шаблону,
где список остаётся строчным. Здесь раскладку задаёт флекс. */
.display_list .cl_contact_block > span[data-obj]:not(.cl_display_phone) br {
display: none;
}
/* Номер — контурная кнопка того же размера, что «Показать телефон»:
действие выполнено, но остаётся кликабельным для звонка. */
.display_list .cl_contact_block > span[data-obj] a.wc-phone {
display: block;
box-sizing: border-box;
padding: 13px 8px;
border: 1px solid var(--v2-brand);
border-radius: var(--v2-radius-lg);
background: var(--v2-surface);
color: var(--v2-brand);
/* Кегль строго тот же, что у надписи до клика: иначе коробка становится
выше и строка ниже дёргается в момент показа номера. */
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
transition: background var(--v2-transition), color var(--v2-transition);
}
.display_list .cl_contact_block > span[data-obj] a.wc-phone:hover {
background: var(--v2-brand);
color: #fff;
}
/* Блок контактов: кнопка на всю ширину, под ней в одну строку сравнение
и отзывы — как в макете. Разметку не трогаем, раскладываем флексом.
Скрытые темой элементы («Забронировать», покупка в 1 клик, избранное)
в потоке не участвуют. */
.display_list .cl_contact_block {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
/* Между строками — столько же, сколько отделяет блок сверху от цены,
иначе строка со сравнением и отзывами прилипает к кнопке.
Между колонками остаётся 6px: иконка, «Отзывы (N)» и пять звёзд
помещаются в строку впритык. */
gap: 16px 6px;
margin-top: 16px;
}
/* Обёртка сравнения шире своей иконки на 5px: внутри inline-block, и место
занимают пробелы между тегами в разметке. Флекс их съедает. Мелочь, но
ровно этих пикселей не хватало карточкам с широким счётчиком —
«Отзывы (49)» шире «Отзывы (11)» на 6px, цифры в шрифте разной ширины. */
.display_list .cl_contact_block .wrapp_stockers {
flex: 0 0 auto;
margin: 0;
padding: 0;
}
.display_list .cl_contact_block .wrapp_stockers .like_icons {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
/* Отзывы растягиваются на остаток строки и прижимаются вправо — сравнение
слева, отзывы справа, как в макете. Раньше это не помещалось: колонка
была уже, а внутри неё пропадал ещё и правый отступ темы. */
.display_list .cl_contact_block .cl_reviews_forobject_section {
flex: 1 1 auto;
justify-content: flex-end;
margin: 0;
min-width: 0;
}
/* В разметке блока контактов россыпь
для отступов — во флексе они
становятся полноценными элементами и рвут строку. */
.display_list .cl_contact_block > br {
display: none;
}
.display_list .compare_item_button .compare_item {
box-sizing: border-box;
width: 30px;
height: 30px;
/* Вертикальный зазор задаём здесь, а не отступом у иконки: у обёртки
нет ни padding, ни border, поэтому margin-top ребёнка схлопывался
наружу и иконка оставалась прижатой к верху. */
padding: 7px 0;
background: var(--v2-gray);
border-radius: var(--v2-radius);
transition: background var(--v2-transition);
}
.display_list .compare_item_button .compare_item:hover {
background: var(--v2-border);
}
/* Иконка сравнения — своя, вместо спрайта темы (29×29, из-за него кнопка
была заметно шире, чем в макете, и строка с отзывами не помещалась).
В макете это тонкие столбики из Font Awesome, но саму библиотеку мы не
подключаем — она идёт с CDN, а это лишний внешний домен на каждой
странице. Рисуем те же столбики инлайновой SVG через mask: так иконка
красится обычным background-color и меняет цвет при наведении.
⚠️ Центрируется отступами, а не флексом: тема ставит на обёртку
инлайновый style="display:block", а инлайн сильнее любого селектора.
`display:flex !important` ставить нельзя — тем же инлайном тема прячет
состояние «в сравнении», и !important показал бы обе иконки разом. */
.display_list .compare_item_button .compare_item > i {
display: block;
/* Пропорция контура Font Awesome — 0.875, поэтому не 16×16. */
width: 14px;
height: 16px;
margin: 0 auto;
background: #9ca3af;
-webkit-mask: var(--v2-icon-compare) center / 14px 16px no-repeat;
mask: var(--v2-icon-compare) center / 14px 16px no-repeat;
transition: background var(--v2-transition);
}
.display_list .compare_item_button .compare_item:hover > i {
background: var(--v2-text-muted);
}
/* «В сравнении» — тот же значок фирменным цветом на светлой фирменной
подложке.
⚠️ Обязательно перекрыть фон: тема заливает этот спан сплошным
оранжевым (#fa6b00) из своего общего правила для `.added`, и после
возврата из карточки в раздел на месте значка был просто оранжевый
квадрат — значка на нём не видно вовсе. */
.display_list .compare_item_button .compare_item.in,
.display_list .compare_item_button .compare_item.added {
background: var(--v2-brand-light);
}
.display_list .compare_item_button .compare_item.in:hover,
.display_list .compare_item_button .compare_item.added:hover {
background: #fed7aa;
}
.display_list .compare_item_button .compare_item.in > i,
.display_list .compare_item_button .compare_item.added > i {
background: var(--v2-brand);
}
/* Отклик на действие: при наведении значок чуть подрастает, при нажатии
приседает, а при добавлении в сравнение делает короткий «поп». Без
этого кнопка ощущается неживой — соседние элементы карточки на
наведение отвечают. */
.display_list .compare_item_button .compare_item > i,
.catalog_detail .top_info .like_icons .compare_item span.value::before {
transition: background var(--v2-transition), transform var(--v2-transition);
}
.display_list .compare_item_button .compare_item:hover > i,
.catalog_detail .top_info .like_icons .compare_item:hover span.value::before {
transform: scale(1.12);
}
.display_list .compare_item_button .compare_item:active > i,
.catalog_detail .top_info .like_icons .compare_item:active span.value::before {
transform: scale(0.92);
}
.display_list .compare_item_button .compare_item.in > i,
.display_list .compare_item_button .compare_item.added > i,
.catalog_detail .top_info .like_icons > div.compare_item.added span.value.added::before {
animation: v2-compare-pop .28s ease-out;
}
@keyframes v2-compare-pop {
0% { transform: scale(0.8); }
60% { transform: scale(1.18); }
100% { transform: scale(1); }
}
/* Уважение к системной настройке «меньше движения»: анимация и рост
значка отключаются, цвет остаётся. */
@media (prefers-reduced-motion: reduce) {
.display_list .compare_item_button .compare_item > i,
.catalog_detail .top_info .like_icons .compare_item span.value::before {
transition: background var(--v2-transition);
animation: none;
transform: none;
}
}
/* Тема кладёт «Отзывы (N)» и звёзды через float — во флексе это даёт
схлопнутую высоту. Раскладываем в строку. */
.display_list .cl_reviews_forobject_section {
display: flex;
align-items: center;
gap: 5px;
}
.display_list .cl_reviews_forobject_section .cl_reviews_section,
.display_list .cl_reviews_forobject_section .rating {
float: none;
margin: 0;
}
/* В макете отзывы — приглушённая ссылка с пунктирным подчёркиванием,
а не второй по яркости оранжевый элемент рядом с кнопкой. */
.display_list .cl_reviews_section {
color: var(--v2-text-light);
font-size: 13px;
white-space: nowrap;
text-decoration: underline dashed;
text-underline-offset: 3px;
cursor: pointer;
transition: color var(--v2-transition);
}
.display_list .cl_reviews_section:hover {
color: var(--v2-brand);
}
/* Мобильная карточка ------------------------------------------------------
Полноценный мобильный проход — отдельная часть; здесь только то, без чего
десктопные правила выше ломают мобильный вид. */
@media (max-width: 767.98px) {
/* Процентные ширины колонок — только для десктопа; на мобильном карточка
складывается в столбец, и 31/44/25 превратили бы её в три узких полосы. */
.display_list .item_wrap .list_item .image_block,
.display_list .item_wrap .list_item .description_wrapp,
.display_list .item_wrap .list_item .information_wrapp.main_item_wrapper {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
/* Колонки сложились в столбец — вертикальный разделитель и отступ под
него превращаются в бессмысленную линию слева от цены. */
.display_list .information_wrapp {
border-left: 0;
padding-left: 0;
}
.display_list .description_wrapp {
padding: 0;
}
/* Без ограничения высоты фото растягивается на всю ширину экрана
пропорционально — под 400px вместо прежних 200. */
.display_list .list_item .thumb {
height: 200px;
}
}
/* --- 05. Сайдбар: города и умный фильтр -----------------------------------
В макете каждый блок сайдбара — отдельная белая карточка со скруглением
и тенью. В теме это сплошной столбец без фона; собираем карточки.
-------------------------------------------------------------------------- */
/* Подложка и рамка старого дизайна. В теме весь блок фильтра лежит на
сплошной светло-серой плашке, обведённой рамкой; в макете под группами
нет ничего — каждая сама по себе на фоне страницы.
⚠️ Фон стоит на `.bx_filter`, а рамка — на вложенном `.bx_filter_section`.
Убрать надо оба, иначе остаётся контур вокруг всех групп разом. */
.left_block .bx_filter,
.left_block .bx_filter .bx_filter_section {
background: transparent;
border: 0;
padding: 0;
}
/* Общий вид карточки сайдбара */
.left_block .internal_sections_list,
.left_block .bx_filter .bx_filter_parameters_box,
.left_block .bx_filter .bx_filter_button_box {
background: var(--v2-surface);
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius-lg);
box-shadow: var(--v2-shadow-sm);
margin-bottom: 16px;
}
/* Скругление должно резать первый и последний пункт списка, иначе углы
заливки вылезают за рамку. */
.left_block .internal_sections_list,
.left_block .bx_filter .bx_filter_parameters_box {
overflow: hidden;
}
/* ⚠️ А вот блоку кнопок overflow:hidden ставить нельзя: внутри лежит
всплывающее «Выбрано N — Показать» (.bx_filter_popup_result), которое
позиционируется за пределами блока и было бы обрезано. */
/* Список городов --------------------------------------------------------- */
.left_block .internal_sections_list .title {
padding: 14px 16px;
background: var(--v2-bg);
border-bottom: 1px solid var(--v2-border);
font-size: 15px;
font-weight: 500;
color: var(--v2-text-muted);
}
/* У пункта списка своя серая заливка от темы. Из-за неё пункты выглядели
серыми, а заголовок «Каталог» переставал от них отличаться — при том что
заливка задана именно ему. Гасим на , всё оформление живёт на ,
который растянут на всю его площадь. */
.left_block .sections_list_wrapp .item {
background: transparent;
border: 0;
}
.left_block .sections_list_wrapp .item a {
display: block;
padding: 12px 16px;
font-size: 14px;
color: var(--v2-text-light);
background: transparent;
transition: background var(--v2-transition), color var(--v2-transition);
}
/* Разделители только между пунктами: у первого линия дублировала бы
границу заголовка. */
.left_block .sections_list_wrapp .item + .item a {
border-top: 1px solid var(--v2-gray);
}
/* ⚠️ Селекторы длиннее, чем кажется нужным, и наведение ловится на ,
а не на — потому что тема бьёт правилом
`.left_block .internal_sections_list li.item:hover > a { color:#fff }`.
Оно специфичнее наивного `.item a:hover`, и текст на светлой заливке
становился белым, то есть исчезал. */
.left_block .internal_sections_list .sections_list_wrapp li.item:hover > a {
background: #fff7ed;
color: var(--v2-brand);
}
/* Активный город — заливка фирменным цветом и полоса слева, как в макете. */
.left_block .internal_sections_list .sections_list_wrapp li.item.cur > a,
.left_block .internal_sections_list .sections_list_wrapp li.item.cur:hover > a {
background: var(--v2-brand);
border-left: 4px solid var(--v2-brand-dark);
padding-left: 12px;
color: #fff;
font-weight: 500;
}
/* Группы фильтра --------------------------------------------------------- */
.left_block .bx_filter .bx_filter_parameters_box_title {
padding: 14px 16px;
font-size: 15px;
font-weight: 500;
color: var(--v2-text-muted);
}
.left_block .bx_filter .bx_filter_block .bx_filter_parameters_box_container {
padding: 0 16px 12px;
/* Списки вроде «Для клиентов» длинные — в макете они прокручиваются
внутри блока, а не растягивают сайдбар на два экрана. Коротким
группам ограничение не мешает: полоса прокрутки не появляется. */
max-height: 210px;
overflow-y: auto;
}
/* Чекбоксы --------------------------------------------------------------
Настоящий input скрыт темой (display:none), а видимую часть рисует
label. Поэтому квадратик собираем на псевдоэлементах обёртки текста,
а отметку включаем соседним селектором input:checked + label. */
/* ⚠️ Тема рисует СВОЙ квадратик чекбокса псевдоэлементами самой метки:
`::after` — картинка-спрайт, `::before` — оранжевая заливка отмеченного.
Оба лежат абсолютно в левом верхнем углу, поэтому рядом с нашим
квадратиком появлялся второй, чуть смещённый. Гасим их: видимую часть
целиком рисуем сами на .bx_filter_input_checkbox.
⚠️ Состояния перечислены поимённо не для красоты. Тема возвращает свой
квадратик правилом
`.bx_filter_vertical input[type="checkbox"] + label:hover::before`,
и оно специфичнее короткого `.bx_filter_param_label::before`: классов
поровну, но элементов в селекторе больше. Поэтому при наведении второй
чекбокс возвращался. Гасим обычное, наведённое и отмеченное состояния
селектором той же формы, но длиннее. */
.left_block .bx_filter .bx_filter_param_label::before,
.left_block .bx_filter .bx_filter_param_label::after,
.left_block .bx_filter_vertical input[type="checkbox"] + .bx_filter_param_label::before,
.left_block .bx_filter_vertical input[type="checkbox"] + .bx_filter_param_label::after,
.left_block .bx_filter_vertical input[type="checkbox"] + .bx_filter_param_label:hover::before,
.left_block .bx_filter_vertical input[type="checkbox"] + .bx_filter_param_label:hover::after,
.left_block .bx_filter_vertical input[type="checkbox"]:checked + .bx_filter_param_label::before,
.left_block .bx_filter_vertical input[type="checkbox"]:checked + .bx_filter_param_label::after {
display: none;
}
/* Интервал между пунктами — 8px, как в макете (там space-y-2).
Правый отступ темы в 10px убираем: он сдвигал текст и ломал ритм. */
.left_block .bx_filter .bx_filter_param_label {
display: block;
margin: 0;
padding: 4px 0;
}
.left_block .bx_filter .bx_filter_input_checkbox {
display: flex;
align-items: center;
gap: 12px;
background: none;
font-size: 14px;
line-height: 1.4;
color: var(--v2-text-light);
transition: color var(--v2-transition);
}
.left_block .bx_filter .bx_filter_input_checkbox::before {
content: '';
flex: 0 0 auto;
width: 20px;
height: 20px;
box-sizing: border-box;
border: 2px solid #d1d5db;
border-radius: var(--v2-radius-sm);
background: var(--v2-surface);
transition: background var(--v2-transition), border-color var(--v2-transition);
}
/* Галочка — две грани повёрнутого прямоугольника; отдельная картинка
ради неё не нужна. */
.left_block .bx_filter .bx_filter_input_checkbox::after {
content: '';
position: absolute;
left: 7px;
top: 5px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
transition: opacity var(--v2-transition);
}
.left_block .bx_filter .bx_filter_param_label:hover .bx_filter_input_checkbox {
color: var(--v2-text);
}
.left_block .bx_filter .bx_filter_param_label:hover .bx_filter_input_checkbox::before {
border-color: var(--v2-brand);
}
.left_block .bx_filter input[type="checkbox"]:checked + .bx_filter_param_label .bx_filter_input_checkbox::before {
background: var(--v2-brand);
border-color: var(--v2-brand);
}
.left_block .bx_filter input[type="checkbox"]:checked + .bx_filter_param_label .bx_filter_input_checkbox::after {
opacity: 1;
}
.left_block .bx_filter input[type="checkbox"]:checked + .bx_filter_param_label .bx_filter_input_checkbox {
color: var(--v2-text);
}
/* Кнопки фильтра --------------------------------------------------------- */
.left_block .bx_filter .bx_filter_button_box .bx_filter_parameters_box_container {
display: flex;
box-sizing: border-box;
gap: 8px;
padding: 12px;
max-height: none;
overflow: visible;
}
/* ⚠️ У контейнера кнопок класс `clearfix`, а его псевдоэлемент во флексе
становится полноценным третьим элементом: забирает ещё один зазор и
часть свободного места. Из-за него кнопки не добирали 8px и справа
оставался лишний отступ — при том что слева он был правильный. */
.left_block .bx_filter .bx_filter_button_box .bx_filter_parameters_box_container::before,
.left_block .bx_filter .bx_filter_button_box .bx_filter_parameters_box_container::after {
display: none;
}
/* «Сбросить» скрыта по решению заказчика: при пустом фильтре кнопка
ничего не значит, а место занимает. Сброс никуда не делся — фильтр
ведёт на `filter/clear/apply/` из блока с числом найденных.
Из DOM не убираем, только прячем: это штатный submit смарт-фильтра,
и удалять его из разметки компонента ради вида не стоит.
Освободившаяся ширина позволила поставить макетные 14px вместо 11px,
на которые пришлось ужиматься, пока кнопок было две. */
.left_block .bx_filter .bx_filter_button_box .bx_filter_search_reset {
display: none;
}
/* ⚠️ Отступ кнопки «Показать» приходится гасить отдельным правилом ниже:
тема задаёт его через `.bx_filter .button#set_filter`, а селектор с ID
перебивает любое количество классов. Из-за этих 8px справа кнопки
стояли несимметрично относительно краёв своего блока. */
.left_block .bx_filter .bx_filter_button_box .bx_filter_search_button {
/* ⚠️ Обязательно. Тема глобально держит `* { box-sizing: content-box }`,
из-за чего флекс считал ширину кнопки не по тем правилам и строка
не добирала несколько пикселей до края блока. */
box-sizing: border-box;
flex: 1 1 0;
width: auto;
min-width: 0;
height: auto;
margin: 0;
padding: 11px 16px;
border-radius: var(--v2-radius);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: background var(--v2-transition), border-color var(--v2-transition);
}
/* Единственное место, где нужен ID: перебиваем `.bx_filter .button#set_filter`
темы, иначе у кнопки остаётся margin-right: 8px и блок выглядит кривым. */
.left_block .bx_filter .bx_filter_button_box .button#set_filter {
margin: 0;
float: none;
}
.left_block .bx_filter .bx_filter_search_button {
background: var(--v2-brand);
border: 1px solid var(--v2-brand);
color: #fff;
}
.left_block .bx_filter .bx_filter_search_button:hover {
background: var(--v2-brand-hover);
border-color: var(--v2-brand-hover);
}
/* --- 06. Логотип ----------------------------------------------------------
Логотип теперь вектор и лежит в шаблоне (см. header.php). Тема рассчитана
на растровую картинку фиксированного размера, поэтому задаём поведение
явно: на узких экранах он должен ужиматься, а не выпирать за шапку.
-------------------------------------------------------------------------- */
/* ⚠️ У ссылки логотипа тема держит сплошную оранжевую заливку. Прежний
логотип был непрозрачным PNG и полностью её закрывал, поэтому её никто
не видел; вектор прозрачный — и заливка вылезла оранжевым прямоугольником
вокруг рисунка.
Селектор с двумя ID — вынужденно: тема красит через
`.h_color_white .header_wrap #header .middle-h-row .logo_wrapp .logo a`,
а ID перебивает любое количество классов. Свой `#header` дал бы ничью
по ID и проигрыш по числу классов, поэтому добавлен `body#main`: двух
ID достаточно, и правило не зависит от класса цветовой схемы темы
(`h_color_white` может смениться в настройках). */
body#main .header_wrap #header .middle-h-row .logo_wrapp .logo a {
background: transparent;
}
/* ⚠️ Никакого `max-width: 100%`. Обёртка `.logo` — table-cell нулевой
ширины: тема рассчитывает её по содержимому. Ограничение в 100% берётся
от этого нуля и обнуляет саму картинку — логотип пропадал совсем.
Ширину задаём точными значениями по брейкпоинтам. */
.logo_wrapp .logo img {
display: block;
width: 187px;
max-width: none;
height: auto;
}
@media (max-width: 991.98px) {
.logo_wrapp .logo img {
width: 160px;
}
}
@media (max-width: 767.98px) {
/* На мобильном шапка отдаёт логотипу заметно меньше места: рядом
иконка сравнения и кнопка меню. Ограничиваем шириной контейнера,
чтобы он ужимался вместе с ней, а не наезжал на соседей. */
.logo_wrapp .logo img {
width: 140px;
}
}
/* --- 07. Шапка ------------------------------------------------------------
Структурно шапку не перекраиваем: меню и его выпадающие списки — логика
темы, ломать её ради вида не стоит. Берём из макета то, что просили:
липкость, иконки и убранный телефон (он снят в header.php).
-------------------------------------------------------------------------- */
/* Липкая шапка.
⚠️ Липкой сделана `.header_wrap`, а не сам `#header`. Sticky держит
элемент у верха, только пока в зоне видимости его РОДИТЕЛЬ: у `#header`
родителем была та же `.header_wrap`, которая заканчивалась сразу под ним,
и шапка уезжала вверх, пролистав свои же 188px. Баннеры вынесены за
пределы обёртки в header.php, поэтому теперь `.header_wrap` — это ровно
шапка, а её родитель — вся страница. */
body#main .header_wrap {
position: sticky;
top: 0;
z-index: 1000;
background: var(--v2-surface);
box-shadow: var(--v2-shadow-sm);
}
/* Sticky отменяется любым overflow, кроме visible, у любого предка. */
body#main > .wrapper {
overflow: visible;
}
/* Иконки шапки ------------------------------------------------------------
Все три были спрайтами темы. Заменяем на те же начертания, что в макете
(лупа, столбики, три полосы), своими SVG через mask: Font Awesome тянется
с CDN, а это лишний внешний домен на каждой странице. Через mask значок
красится обычным background-color и меняет цвет при наведении. */
.header_wrap .search_block span.icon {
display: block;
width: 20px;
height: 20px;
background: var(--v2-text-light);
-webkit-mask: var(--v2-icon-search) center / 20px 20px no-repeat;
mask: var(--v2-icon-search) center / 20px 20px no-repeat;
transition: background var(--v2-transition);
}
.header_wrap .search_block:hover span.icon {
background: var(--v2-brand);
}
/* Размеры ровно как в макете: там `fa-chart-simple` стоит на `text-lg`,
то есть высота 18px, ширина 0.875 от неё. */
#compare_line .wraps_icon_block::before {
display: block;
width: 15.75px;
height: 18px;
background: var(--v2-text-light);
-webkit-mask: var(--v2-icon-compare) center / 15.75px 18px no-repeat;
mask: var(--v2-icon-compare) center / 15.75px 18px no-repeat;
transition: background var(--v2-transition);
}
#compare_line:hover .wraps_icon_block::before {
background: var(--v2-brand);
}
/* ⚠️ `body#main` в начале обязателен. Тема возвращает спрайт правилом
`#header ul.menu.adaptive.opened > li.menu_opener i` — с ID, а он
перебивает любое количество классов. Пока меню закрыто, выигрывало моё
правило, и значок подменялся; стоило открыть меню — возвращался старый.
Ровно это и было видно как «в мобильной остались старые иконки». */
body#main .header_wrap ul.menu.adaptive li.menu_opener i.icon {
display: block;
/* `fa-bars` на `text-2xl`: высота 24px, ширина 0.875 от неё. */
width: 21px;
height: 24px;
background: var(--v2-text-soft);
-webkit-mask: var(--v2-icon-burger) center / 21px 24px no-repeat;
mask: var(--v2-icon-burger) center / 21px 24px no-repeat;
transition: background var(--v2-transition);
}
body#main .header_wrap ul.menu.adaptive li.menu_opener:hover i.icon {
background: var(--v2-brand);
}
/* Состояния «открыто» у самой кнопки больше нет: меню уехало в свою
панель (см. раздел «Выдвижное меню»), закрывается крестиком внутри неё
и кликом по затемнению — ровно как в макете. Класс `.opened` темы
не выставляется, потому что её обработчик перехвачен в js/v2-menu.js. */
/* Кнопка поиска в мобильном меню — последний спрайт, оставшийся в шапке. */
body#main .header_wrap #search-submit-button i,
body#main .header_wrap .search1 button.submit i {
display: block;
width: 22px;
height: 22px;
background: var(--v2-text-light);
-webkit-mask: var(--v2-icon-search) center / 22px 22px no-repeat;
mask: var(--v2-icon-search) center / 22px 22px no-repeat;
}
/* Высота и выравнивание ---------------------------------------------------
Ряд шапки — таблица, и тема раскладывает ячейки по-своему: логотип,
бутерброд и иконки оказывались на трёх разных уровнях (центры 34, 21
и 28px), а счётчик сравнения вылезал за верхний край. Переводим ряд
во флекс — тогда всё выравнивается по одной линии одним правилом,
а высота шапки становится высотой логотипа плюс отступы. */
body#main .header_wrap .middle-h-row,
body#main .header_wrap .middle-h-row tbody {
display: block;
width: 100%;
}
body#main .header_wrap .middle-h-row tr {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
body#main .header_wrap .middle-h-row td {
display: block;
width: auto;
padding: 0;
vertical-align: middle;
}
/* Средняя ячейка забирает остаток строки: на десктопе в ней меню,
на мобильном — только кнопка меню. */
body#main .header_wrap .middle-h-row td.center_block {
flex: 1 1 auto;
min-width: 0;
}
body#main .header_wrap .middle-h-row td.logo_wrapp,
body#main .header_wrap .middle-h-row td.basket_wrapp {
flex: 0 0 auto;
}
/* Высота шапки = высота логотипа + по 8px сверху и снизу. */
body#main .header_wrap #header .wrapper_inner {
padding-top: 8px;
padding-bottom: 8px;
}
/* Иконки справа — в одну линию по центру. */
body#main .header_wrap .wrapp_all_icons {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
}
body#main .header_wrap .wrapp_all_icons > div {
float: none;
margin: 0;
}
@media (max-width: 991.98px) {
/* Кнопка меню прижимается к правому краю своей ячейки, чтобы стоять
рядом с иконкой сравнения, а не болтаться посередине. */
body#main .header_wrap ul.menu.adaptive {
display: flex;
justify-content: flex-end;
}
body#main .header_wrap ul.menu.adaptive li.menu_opener {
float: none;
position: static;
margin: 0;
}
}
/* Лишняя высота и смещения приходили из четырёх мест сразу, поэтому
выравнивание флексом само по себе их не убирало:
#header padding 16px сверху и 18px снизу
td.basket_wrapp margin-top 23px
.wrapp_all_icons padding-top 20px
.wraps_icon_block margin-right 37px
Первое раздувало шапку на 34px, следующие два опускали иконки
на 43px ниже логотипа. */
body#main .header_wrap #header {
padding: 0;
margin: 0;
}
body#main .header_wrap #header td.basket_wrapp {
margin: 0;
}
body#main .header_wrap .wrapp_all_icons {
padding: 0;
}
body#main .header_wrap #compare_line .wraps_icon_block {
margin: 0;
}
/* ⚠️ Пятый источник, и только на ГЛАВНОЙ и только уже ниже 600px:
`@media (max-width:600px){ .wrapper.front_page .header_wrap{padding-bottom:47px} }`
в `css/media.css` темы. В её вёрстке этим отступом компенсировали строку
поиска, которая на главной ложилась поверх шапки; у нас там пусто, и
47px превращались в белую полосу — шапка на телефоне выглядела вдвое
выше (116px вместо 69). Проверять правки шапки надо на ОБЕИХ страницах:
на странице города этого правила нет, поэтому раньше не всплыло. */
body#main .wrapper.front_page .header_wrap {
padding-bottom: 0;
}
/* Иконка поиска сидела на `position:relative; top:10px` от темы — этим она
и не попадала на одну линию с остальным. Сдвиг снимаем, а сам ряд меню
раскладываем флексом: у `.main-nav` нулевая высота (внутри всё на
флоатах), поэтому выравнивать её содержимое было нечем. */
body#main .header_wrap .main-nav {
display: flex;
align-items: center;
gap: 24px;
/* Тема держит здесь margin-top:15px и padding:7px 15px — вертикальные
съезжали относительно логотипа, их снимаем. ⚠️ Боковые оставляем:
на них держится отступ кнопки меню от края экрана, без них она
вылезала за правую границу на мобильном. */
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
body#main .header_wrap .search_block span.icon {
position: static;
top: auto;
}
@media (max-width: 991.98px) {
/* ⚠️ Тема увеличивала мобильные иконки трансформом
`scale(1.4) translateY(-15px)` — отсюда и подъём ровно на 21px,
из-за которого бутерброд со сравнением висели выше логотипа,
а счётчик срезался верхним краем шапки. Размер иконок мы задаём
явно, поэтому трансформ только мешает. */
body#main .header_wrap ul.menu.adaptive li.menu_opener,
body#main .header_wrap #compare_line {
transform: none;
}
/* ⚠️ Значки НЕ увеличиваем: в макете `text-2xl` и `text-lg` заданы без
брейкпоинтов, то есть на телефоне ровно те же 24 и 18px, что на
десктопе. Раньше здесь стояли 28 и 24 «на касание» — из-за этого
мобильная шапка и не совпадала с макетом. Размер пальца добирается
не значком, а площадью кнопки (40×40 ниже), как `p-2` в макете. */
body#main .header_wrap ul.menu.adaptive li.menu_opener i.icon {
float: none;
}
}
/* Порог мобильного меню сдвинут с 768 на 992px ---------------------------
Тема прячет полное меню только ниже 768, и на планшете четыре пункта
не помещались в строку: меню переносилось на две строки и раздувало
шапку. Ниже 992 показываем «бутерброд», как на телефоне. */
@media (max-width: 991.98px) {
body#main .header_wrap ul.menu.full {
display: none;
}
body#main .header_wrap ul.menu.adaptive {
display: flex;
justify-content: flex-end;
align-items: center;
}
/* Кнопка меню должна стоять у правого края своей ячейки, рядом со
значком сравнения. Прижимать надо и `.main-nav`, и сам пункт:
тема растягивает `li.menu_opener` на всю ширину списка, поэтому
значок оказывался у левого края, а не у правого. */
body#main .header_wrap .main-nav {
justify-content: flex-end;
}
/* ⚠️ Внутри кнопки меню, кроме значка, лежит ссылка с подписью «Меню».
Ниже 768 тема её схлопывала, а в диапазоне 768–992 она показывалась
и роняла значок под себя. В макете подписи нет.
Просто спрятать ссылку нельзя — обработчик открытия висит на ней,
и кнопка перестала бы работать. Поэтому ссылку растягиваем на всю
кнопку и гасим у неё текст: значок под ней, кликабельна вся площадь. */
/* ⚠️ Тема даёт ячейке со значком сравнения фиксированные 155px вместо
его собственных 24. Из-за этого кнопке меню оставалось 18px, и она
вылезала за правый край экрана. Ужимаем обе по содержимому. */
body#main .header_wrap .middle-h-row td.basket_wrapp,
body#main .header_wrap .wrapp_all_icons {
width: auto;
min-width: 0;
}
/* Обе иконки прижаты к правому краю: ячейка меню перестаёт растягиваться,
а свободное место забирает автоотступ логотипа. */
body#main .header_wrap .middle-h-row td.center_block {
flex: 0 0 auto;
}
body#main .header_wrap .middle-h-row td.logo_wrapp {
margin-right: auto;
}
/* Кнопка 40×40 — это `p-2` вокруг значка 21×24 из макета. Значок мельче
пальца, поэтому площадь нажатия задаёт кнопка, а не он. */
body#main .header_wrap ul.menu.adaptive li.menu_opener {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
}
body#main .header_wrap ul.menu.adaptive li.menu_opener > a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 0;
font-size: 0;
line-height: 0;
}
body#main .header_wrap ul.menu.adaptive li.menu_opener > i.icon {
position: static;
}
body#main .header_wrap .search_block {
display: none;
}
}
/* Счётчик сравнения — маленькая серая пилюля в углу значка, как в макете
(там `-top-2 -right-2`, фон gray-200, текст gray-600, 10px полужирным).
В теме это крупный кружок, который спорил с самим значком. */
body#main .header_wrap #compare_line .wraps_icon_block {
position: relative;
}
body#main .header_wrap #compare_line .count {
position: absolute;
/* Значения ровно из макета: -top-2/-right-2, px-1.5/py-0.5, bg-gray-200,
text-gray-600, text-[10px] font-bold. */
top: -8px;
right: -8px;
min-width: 0;
width: auto;
height: auto;
padding: 2px 6px;
border: 0;
border-radius: var(--v2-radius-full);
background: var(--v2-border);
color: var(--v2-text-soft);
font-size: 10px;
font-weight: 700;
line-height: 1;
text-align: center;
}
body#main .header_wrap #compare_line .count > span,
body#main .header_wrap #compare_line .count .items,
body#main .header_wrap #compare_line .count .text {
display: inline;
width: auto;
height: auto;
padding: 0;
margin: 0;
background: none;
color: inherit;
font: inherit;
line-height: inherit;
}
/* --- 08. Выдвижное меню (мобильное) ---------------------------------------
Панель по макету главной: 85% ширины (но не шире 320px), затемнение,
аккордеон городов, поиск внизу. Аспровское раскрытие меню в шапке при
этом отключено — см. js/v2-menu.js, там объяснено почему перехват идёт
на фазе погружения.
Показывается ровно до того же порога, что и кнопка-бутерброд (992px):
выше неё меню в шапке полное, и панель не нужна.
Телефон и «Заказать звонок» из макета не переносятся — они убраны и из
шапки, по решению заказчика. */
/* ⚠️ z-index не 60/70, как в макете. Там шапка на z-50, и панель ложится
поверх неё; у Aspro `.header_wrap` сидит на **1000**, поэтому панель с
макетными значениями уезжала ПОД шапку — её собственная шапка с
логотипом и крестиком оказывалась не видна, а затемнение обрывалось
по нижнему краю шапки. Берём заведомо выше всего, что есть в теме:
самое высокое значение в её стилях — 999. */
.v2-menu-overlay {
position: fixed;
inset: 0;
z-index: 9998;
background: rgba(0, 0, 0, .5);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease-in-out;
}
.v2-menu-overlay.open {
opacity: 1;
pointer-events: auto;
}
.v2-menu {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
flex-direction: column;
/* Как в макете: `w-[85%] sm:w-[320px]` — на узком экране доля ширины,
с 640px фиксированные 320. */
width: 85%;
height: 100%;
background: var(--v2-surface);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
overflow-y: auto;
/* ⚠️ Панель едет трансформом, а не свойством left: left пересчитывает
раскладку на каждом кадре и на телефоне заметно дёргается. */
transform: translateX(-100%);
transition: transform .3s ease-in-out;
/* На iOS инерционная прокрутка внутри панели без этого рывками. */
-webkit-overflow-scrolling: touch;
}
.v2-menu.open {
transform: translateX(0);
}
@media (min-width: 640px) {
.v2-menu {
width: 320px;
}
}
/* Пока меню закрыто, оно не должно ловить нажатия и попадать в обход по
Tab. `visibility` гасится с той же задержкой, что и уезжает панель,
иначе она исчезала бы мгновенно, не доиграв анимацию. */
.v2-menu[aria-hidden="true"] {
visibility: hidden;
transition: transform .3s ease-in-out, visibility 0s linear .3s;
}
.v2-menu[aria-hidden="false"] {
visibility: visible;
transition: transform .3s ease-in-out, visibility 0s;
}
/* Прокрутка страницы под открытой панелью. Класс, а не инлайновый стиль:
тема сама трогает overflow у body (попапы, «летающая» корзина), и два
источника инлайна затирали бы друг друга. */
body.v2-menu-lock {
overflow: hidden;
}
/* Шапка панели: логотип и крестик. Липкая — при длинном списке городов
крестик обязан оставаться на виду. */
.v2-menu__head {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px;
background: var(--v2-surface);
border-bottom: 1px solid var(--v2-gray);
}
.v2-menu__logo {
display: block;
flex: 0 1 auto;
min-width: 0;
}
.v2-menu__logo img {
display: block;
width: auto;
height: 40px;
}
.v2-menu__close {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.v2-menu__close-icon {
display: block;
/* `fa-xmark` на `text-xl`: высота 20px, пропорция контура 0.75. */
width: 15px;
height: 20px;
background: var(--v2-text-light);
-webkit-mask: var(--v2-icon-close) center / 15px 20px no-repeat;
mask: var(--v2-icon-close) center / 15px 20px no-repeat;
transition: background var(--v2-transition);
}
.v2-menu__close:hover .v2-menu__close-icon {
background: var(--v2-brand);
}
.v2-menu__nav {
flex: 1 0 auto;
}
/* Группа «Сауны и бани» — оранжевая полоса с раскрытием городов. */
.v2-menu__group-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 16px;
border: 0;
background: var(--v2-brand);
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-align: left;
text-transform: uppercase;
letter-spacing: .05em;
cursor: pointer;
transition: background var(--v2-transition);
}
.v2-menu__group-btn:hover {
background: var(--v2-brand-hover);
}
.v2-menu__chevron {
flex: 0 0 auto;
display: block;
width: 12px;
height: 12px;
margin-left: 12px;
background: #fff;
-webkit-mask: var(--v2-icon-chevron) center / 12px 12px no-repeat;
mask: var(--v2-icon-chevron) center / 12px 12px no-repeat;
transition: transform .3s ease-in-out;
}
/* Список городов. max-height проставляет JS по фактической высоте —
в CSS только начальное состояние и переход. */
.v2-menu__cities {
max-height: 0;
opacity: 0;
overflow: hidden;
background: var(--v2-bg);
transition: max-height .3s ease-in-out, opacity .3s ease-in-out;
}
.v2-menu__cities.open {
opacity: 1;
}
.v2-menu__city {
display: block;
padding: 12px 24px;
color: #374151;
font-size: 14px;
line-height: 1.4;
transition: color var(--v2-transition), background var(--v2-transition);
}
.v2-menu__city + .v2-menu__city {
border-top: 1px solid var(--v2-gray);
}
.v2-menu__city:hover {
background: var(--v2-brand-light);
color: var(--v2-brand);
}
/* Текущий город: белая подложка и оранжевая грань слева. Отступ уменьшен
ровно на толщину грани, иначе строка сдвигается относительно соседних. */
.v2-menu__city.current {
padding-left: 20px;
border-left: 4px solid var(--v2-brand);
background: var(--v2-surface);
font-weight: 500;
}
/* Остальные пункты меню. */
.v2-menu__link {
display: block;
padding: 16px;
color: #1f2937;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
transition: background var(--v2-transition), color var(--v2-transition);
}
.v2-menu__link + .v2-menu__link {
border-top: 1px solid var(--v2-gray);
}
.v2-menu__link:hover {
background: var(--v2-bg);
color: var(--v2-brand);
}
.v2-menu__link.current {
color: var(--v2-brand);
}
/* Поиск по сайту — в шапке телефона его нет, это единственная точка входа. */
.v2-menu__search {
margin-top: 8px;
padding: 16px;
background: var(--v2-bg);
border-top: 1px solid var(--v2-gray);
border-bottom: 4px solid var(--v2-brand);
}
.v2-menu__search form {
position: relative;
}
.v2-menu__search input {
width: 100%;
padding: 10px 40px 10px 16px;
border: 2px solid var(--v2-brand);
border-radius: var(--v2-radius);
background: var(--v2-surface);
color: var(--v2-text);
font-family: inherit;
font-size: 14px;
line-height: 1.4;
}
.v2-menu__search input:focus {
outline: none;
box-shadow: 0 0 0 1px var(--v2-brand);
}
.v2-menu__search button {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.v2-menu__search-icon {
display: block;
width: 18px;
height: 18px;
background: var(--v2-text-soft);
-webkit-mask: var(--v2-icon-search) center / 18px 18px no-repeat;
mask: var(--v2-icon-search) center / 18px 18px no-repeat;
transition: background var(--v2-transition);
}
.v2-menu__search button:hover .v2-menu__search-icon {
background: var(--v2-brand);
}
/* Выше порога бутерброда панели нет вовсе: меню в шапке полное. */
@media (min-width: 992px) {
.v2-menu,
.v2-menu-overlay {
display: none;
}
}
/* --- 09. Подвал -----------------------------------------------------------
По макету: белая подложка, сверху полоса подписки на сером, ниже четыре
колонки — копирайт и три меню, VK под «Рекламодателями».
Разметку темы не трогаем: состав подвала уже совпадает с макетом один
в один (те же три меню, тот же копирайт, та же форма подписки), меняются
только раскладка и оформление.
⚠️ Заголовки колонок и сами списки лежат в РАЗНЫХ контейнерах: заголовки
приходят из меню `bottom` (`.submenu_top`), списки — из трёх отдельных
меню (`.submenu_block`). Свести их в колонки без правки шаблонов
позволяет `display: contents` на всех промежуточных обёртках: заголовки
и списки становятся прямыми элементами одной сетки. Копирайт занимает
обе строки (`grid-row: span 2`), поэтому автоматическая расстановка
уводит списки во вторую строку начиная со второй колонки — ровно под
свои заголовки. */
#footer {
background: var(--v2-surface);
border-top: 1px solid var(--v2-border);
}
/* Полоса подписки ---------------------------------------------------------
⚠️ Фон должен идти во всю ширину экрана, но блок лежит внутри
`.wrapper_inner`, который ограничен по ширине. Растягиваем не элемент,
а его фон: огромная тень плюс clip-path по горизонтали. Через `100vw`
этого делать нельзя — vw считается вместе с полосой прокрутки, и на
десктопе появляется горизонтальный скролл. */
#footer .footer_top > .wrap_md > .sblock {
/* Тема держит блок как inline-block, и он сжимался по содержимому
(770px при контейнере 1132) — из-за этого полоса подписки была
заметно уже колонок под ней. */
display: block;
width: auto;
background: var(--v2-bg);
box-shadow: 0 0 0 100vmax var(--v2-bg);
clip-path: inset(0 -100vmax);
}
#footer .subscribe-form_footer > .wrap_md {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
/* max-w-5xl из макета. */
max-width: 1024px;
margin: 0 auto;
padding: 40px 0;
}
#footer .subscribe-form_footer .wrap_bg,
#footer .subscribe-form_footer .forms {
float: none;
margin: 0;
}
/* На телефоне подпись и форма встают друг под друга, форма — во всю
ширину («flex-col» и «w-full» из макета). Без этого текст и поле делят
строку пополам и на 430px поле ввода сжимается до 32px. */
@media (max-width: 767.98px) {
#footer .subscribe-form_footer > .wrap_md {
flex-direction: column;
align-items: stretch;
gap: 16px;
padding: 28px 0;
}
#footer .subscribe-form_footer .forms {
max-width: none;
}
}
#footer .subscribe-form_footer .wrap_text {
display: flex;
align-items: center;
gap: 16px;
}
/* Конверт тема прячет на узких экранах, а в макете он есть и на телефоне.
Возвращаем: это спрайт с фиксированными размерами, поэтому display
достаточно. */
#footer .subscribe-form_footer .wrap_icon {
display: block;
flex: 0 0 auto;
}
/* ⚠️ Две строки подписи — это один текстовый узел с `
` в подключаемой
области `/include/subscribe_text_footer.php`. Область общая с боевым
шаблоном, править её нельзя. Поэтому первая строка выделяется
`::first-line` — единственный способ добраться до неё без правки
разметки (перенос гарантирован тем самым `
`). */
#footer .subscribe-form_footer .wrap_more_text {
color: var(--v2-text-light);
font-size: 14px;
line-height: 1.35;
}
#footer .subscribe-form_footer .wrap_more_text::first-line {
color: var(--v2-text);
font-size: 18px;
font-weight: 700;
}
/* Поле и кнопка в макете сомкнуты в одну «таблетку». */
#footer .subscribe-form_footer .forms {
flex: 1 1 auto;
max-width: 512px;
}
#footer .sform_footer > .wrap_md {
display: flex;
align-items: stretch;
}
#footer .sform_footer .email_wrap {
flex: 1 1 auto;
margin: 0;
padding: 0;
border: 0;
background: none;
}
#footer .sform_footer .email_wrap input {
width: 100%;
height: 100%;
padding: 14px 16px;
border: 0;
border-radius: var(--v2-radius) 0 0 var(--v2-radius);
background: var(--v2-border);
color: var(--v2-text);
font-family: inherit;
font-size: 14px;
}
#footer .sform_footer .email_wrap input::placeholder {
color: var(--v2-text-light);
}
#footer .sform_footer .email_wrap input:focus {
outline: none;
box-shadow: inset 0 0 0 2px var(--v2-brand);
}
#footer .sform_footer .button_wrap {
flex: 0 0 auto;
margin: 0;
}
#footer .sform_footer .button_wrap input.button {
height: 100%;
margin: 0;
padding: 14px 24px;
border: 0;
border-radius: 0 var(--v2-radius) var(--v2-radius) 0;
background: var(--v2-brand);
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
transition: background var(--v2-transition);
}
#footer .sform_footer .button_wrap input.button:hover {
background: var(--v2-brand-hover);
}
/* Колонки -----------------------------------------------------------------
Сетка одна на все ширины, меняется только число колонок.
⚠️ Ниже 550px тема правилом `.footer_bottom .all_menu_block
.submenu_block{display:none}` прячет ВСЕ списки подвала — на телефоне
от него остаются три заголовка, копирайт и значок VK, а ссылки на
города и разделы недоступны в принципе (аккордеона там нет, это просто
скрытие). В макете подвал на телефоне полный, в одну колонку, — его
и возвращаем. */
#footer .footer_bottom > .wrap_md {
display: grid;
grid-template-columns: 1fr;
row-gap: 0;
padding: 32px 0;
}
#footer .footer_bottom > .wrap_md > .menu_block,
#footer .footer_bottom .menu_block > .wrap_md,
#footer .footer_bottom .all_menu_block,
#footer .footer_bottom .all_menu_block > .wrap_md,
#footer .footer_bottom .submenu_top {
display: contents;
}
#footer .footer_bottom .all_menu_block .submenu_block {
display: block;
}
/* ⚠️ В одной колонке заголовки и списки нужно расставить по строкам
вручную: в разметке сначала идут ВСЕ три заголовка и только потом все
три списка (они приходят из разных меню), поэтому автоматическая
расстановка дала бы три заголовка подряд, а следом три списка.
⚠️ И обязательно внутри `max-width`, а не «до» десктопной сетки:
у селекторов с `:nth-child()` специфичность выше, и на десктопе они
перебивали бы сброс `grid-row: auto` — вся сетка схлопывалась в одну
колонку (проверено на 768px). */
@media (max-width: 767.98px) {
#footer .footer_bottom .copy_block {
grid-row: 1;
width: auto;
margin: 0 0 32px;
}
#footer .footer_bottom .submenu_top .menu_item:nth-child(1) { grid-row: 2; }
#footer .footer_bottom .all_menu_block > .wrap_md > .submenu_block:nth-child(1) { grid-row: 3; }
#footer .footer_bottom .submenu_top .menu_item:nth-child(2) { grid-row: 4; }
#footer .footer_bottom .all_menu_block > .wrap_md > .submenu_block:nth-child(2) { grid-row: 5; }
#footer .footer_bottom .submenu_top .menu_item:nth-child(3) { grid-row: 6; }
#footer .footer_bottom .all_menu_block > .wrap_md > .submenu_block:nth-child(3) { grid-row: 7; }
/* Отступ между группами в одной колонке — `gap-8` из макета.
⚠️ Селектор длиннее, чем нужно для попадания: общий сброс отступов
у `.submenu_block` идёт ниже по файлу и с равной специфичностью
выигрывал бы по порядку — списки слипались вплотную со следующим
заголовком. */
#footer .footer_bottom .all_menu_block > .wrap_md > .submenu_block {
margin-bottom: 32px;
}
}
#footer .footer_bottom .submenu_top .menu_item,
#footer .footer_bottom .submenu_block {
width: auto;
margin: 0;
padding: 0;
}
/* Кнопка соцсети живёт внутри последней колонки (перенесена в footer.php),
отступ до ссылок — `mb-8` из макета. */
#footer .footer_bottom .social_block {
width: auto;
margin: 32px 0 0;
text-align: left;
}
#footer .footer_bottom .social_block > .wrap_md,
#footer .footer_bottom .social_wrapper,
/* Тема отбивает значки соцсетей слева на 56px — под свою раскладку,
где они стояли по центру подвала. В колонке это выглядит как съехавшая
кнопка. */
#footer .footer_bottom .social {
display: block;
width: auto;
margin: 0;
padding: 0;
text-align: left;
}
#footer .footer_bottom .social_block .empty_block {
display: none;
}
@media (min-width: 768px) {
#footer .footer_bottom > .wrap_md {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
/* ⚠️ Первая строка обязана быть `min-content`. При `auto` сетка
раздаёт высоту копирайта (он занимает обе строки) между строками
поровну, и под заголовками колонок появляется провал под сотню
пикселей до первой ссылки. */
grid-template-rows: min-content auto auto;
/* Между строками зазора нет: отступ заголовка от списка задаёт сам
заголовок (16px, как `mb-4` в макете), иначе он складывается с
зазором сетки и получается провал в полсотни пикселей. */
column-gap: 32px;
row-gap: 0;
padding: 48px 0;
}
/* Раскладка автоматическая: копирайт занимает обе строки первой
колонки, поэтому списки уходят во вторую строку, начиная со второй
колонки — каждый под свой заголовок. */
#footer .footer_bottom .copy_block {
grid-column: 1;
grid-row: span 2;
width: auto;
margin: 0;
padding-right: 16px;
}
#footer .footer_bottom .submenu_top .menu_item,
#footer .footer_bottom .submenu_block {
width: auto;
margin: 0;
padding: 0;
}
@media (min-width: 1024px) {
#footer .footer_bottom > .wrap_md {
/* ⚠️ Именно column-gap. Короткое `gap` задаёт и междустрочный
зазор тоже — и между заголовком колонки и её списком снова
появлялся провал в 48px. */
column-gap: 48px;
}
}
}
/* Заголовок колонки. */
#footer .submenu_top .menu_item a {
display: block;
margin-bottom: 16px;
color: var(--v2-text);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
#footer .submenu_top .menu_item a:hover {
color: var(--v2-brand);
}
/* Ссылки в колонках: space-y-2.5 и gray-600 из макета. */
#footer .submenu_block ul.submenu {
margin: 0;
padding: 0;
list-style: none;
}
#footer .submenu_block ul.submenu li {
margin: 0 0 10px;
padding: 0;
background: none;
}
#footer .submenu_block ul.submenu li:last-child {
margin-bottom: 0;
}
#footer .submenu_block ul.submenu li a {
color: var(--v2-text-soft);
font-size: 14px;
line-height: 1.4;
transition: color var(--v2-transition);
}
#footer .submenu_block ul.submenu li a:hover,
#footer .submenu_block ul.submenu li.selected a {
color: var(--v2-brand);
}
/* Копирайт — мелкий и приглушённый, как в макете (text-xs gray-500). */
#footer .copy_block .copyright {
color: var(--v2-text-light);
font-size: 12px;
line-height: 1.6;
}
#footer .copy_block .copyright a {
color: var(--v2-text-light);
border-bottom: 1px solid transparent;
transition: color var(--v2-transition), border-color var(--v2-transition);
}
#footer .copy_block .copyright a:hover {
color: var(--v2-text);
border-bottom-color: currentColor;
}
/* Кнопка VK: квадрат 40×40 со скруглением, фирменный цвет сети. */
#footer .social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--v2-radius);
background: #4c75a3;
transition: background var(--v2-transition);
}
#footer .social a:hover {
background: #3f628a;
}
/* --- 10. Карточка заведения ------------------------------------------------
Макет: белая карточка со скруглением, внутри две колонки — слева галерея,
карта, описание и отзывы, справа липкий блок с залами, ценой, телефоном
и характеристиками. На мобильном всё в одну колонку, и блок с ценой
поднимается сразу под галерею.
⚠️ Разметка страницы — плавающая (float) и разложена НЕ в том порядке,
в каком нужны колонки: `.img_wrapper` (галерея), потом `.right_info`
с ценами и свойствами, потом карта, потом второй `.right_info` с
описанием, а отзывы вообще лежат снаружи, соседями `.item_main_info`.
Поэтому сеткой становится внешний `.catalog_detail`, а `.item_main_info`
переводится в `display: contents` — его дети попадают в ту же сетку и
раскладываются по колонкам поштучно.
⚠️ Два блока `.right_info` различаются только соседями: `:nth-of-type`
тут не работает (он считает ВСЕ div-ы подряд, а их между ними ещё
несколько). Отсюда селекторы через `+`: `.img_wrapper + .right_info` —
это сайдбар, всё остальное уходит в левую колонку. */
.catalog_detail {
background: var(--v2-surface);
border: 1px solid var(--v2-gray);
border-radius: var(--v2-radius-xl);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
padding: 16px;
}
/* Технические обёртки темы для очистки float — в сетке они только плодят
пустые строки. */
.catalog_detail .clearfix,
.catalog_detail .clearleft {
display: none;
}
/* Мобильный порядок — тот же, что в разметке: галерея, блок с ценой и
свойствами, карта, описание, отзывы. Совпадает с макетом, поэтому
переставлять ничего не нужно, достаточно снять float. */
.catalog_detail .item_main_info {
display: flex;
flex-direction: column;
gap: 24px;
/* ⚠️ На узких экранах тема обводит `.item_main_info` серой рамкой без
скругления, а `.right_info` отбивает верхней гранью — это её способ
разделить блоки в одну колонку. Внутри нашей скруглённой карточки
получалась вторая, прямоугольная рамка. */
border: 0;
}
/* `body` в начале — не для красоты: правило темы ниже 600px записано как
`body .catalog_detail .item_main_info .right_info`, и без него верхняя
грань оставалась на месте. */
body .catalog_detail .item_main_info > .right_info,
body .catalog_detail .item_main_info > .cl_inmap_img_wrapper {
border: 0;
padding: 0;
}
.catalog_detail .item_main_info > .img_wrapper,
.catalog_detail .item_main_info > .right_info,
.catalog_detail .item_main_info > .cl_inmap_img_wrapper {
float: none;
width: auto;
margin: 0;
/* ⚠️ У `.right_info` тема держит `padding-left` в ширину плавающей
галереи (~324px) — так текст обтекал её справа. В колонке это
отъедало половину ширины: описание получалось 365px вместо 689
и начиналось от середины. */
padding-left: 0;
}
@media (min-width: 1024px) {
.catalog_detail {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
column-gap: 32px;
align-items: start;
padding: 32px;
}
.catalog_detail .item_main_info {
display: contents;
}
/* Левая колонка — всё, кроме сайдбара. */
.catalog_detail .img_wrapper,
.catalog_detail .cl_inmap_img_wrapper,
.catalog_detail .item_main_info > .right_info,
.catalog_detail > .tabs_section,
.catalog_detail > #reviews_content {
grid-column: 1;
}
/* ⚠️ Обёртки сайдбара тоже переводятся в `display: contents`, и вот
почему: внутри того же `.info_item`, кроме блока с ценой, лежит
кнопка «Поделиться», а в макете она под картой, в левой колонке.
Раскрыв обёртки, мы получаем оба блока прямыми элементами сетки и
раскладываем их по разным колонкам. */
.catalog_detail .img_wrapper + .right_info,
.catalog_detail .img_wrapper + .right_info > .info_item {
display: contents;
}
/* Сайдбар растянут на все строки, чтобы липкому блоку было куда ехать:
иначе его ячейка кончается вместе с первой строкой. */
.catalog_detail .img_wrapper + .right_info .middle_info {
grid-column: 2;
grid-row: 1 / span 20;
position: sticky;
/* 88px — высота липкой шапки на десктопе, плюс воздух. */
top: 104px;
}
/* Порядок левой колонки задаём явно: в разметке «Поделиться» идёт
раньше карты, а в макете — после неё. */
.catalog_detail .img_wrapper { grid-row: 1; }
.catalog_detail .cl_inmap_img_wrapper { grid-row: 2; }
.catalog_detail .element_detail_text { grid-row: 3; }
.catalog_detail .cl_inmap_img_wrapper + .right_info { grid-row: 4; }
.catalog_detail > .tabs_section { grid-row: 5; }
.catalog_detail > #reviews_content { grid-row: 6; }
}
/* Галерея ------------------------------------------------------------------ */
/* ⚠️ Тема отводит слайдеру 47% ширины и пускает его во float — рядом с ним
стояла правая колонка карточки товара. У нас галерея занимает всю левую
колонку, поэтому и ширину, и float снимаем. Селектор повторяет тему
один в один: специфичность равная, выигрываем порядком подключения. */
.catalog_detail .item_main_info .item_slider {
width: 100%;
float: none;
padding: 0;
}
/* Серая вертикальная полоса-разделитель между галереей и правой колонкой
старой раскладки. В новой она рисуется поперёк пустого места. */
.catalog_detail .item_main_info .item_slider::after {
display: none;
}
/* ⚠️ Слайдеров на странице ДВА: `.item_slider` для десктопа и
`.item_slider.flex` (flexslider) для мобильного — тема показывает то
один, то другой. Правила выше попадают только в первый, поэтому на
телефоне фото оставалось мелким по центру пустого бокса. */
.catalog_detail .item_slider.flex .slides > li {
/* Пропорция 4:3 из макета. */
aspect-ratio: 4 / 3;
height: auto;
}
.catalog_detail .item_slider.flex .slides > li > a {
display: block;
height: 100%;
}
.catalog_detail .item_slider.flex .slides img {
position: static;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
border-radius: var(--v2-radius-lg);
}
/* Лента миниатюр у темы зажата в 270px по центру — под узкую колонку.
Растягиваем на всю ширину галереи. */
.catalog_detail .item_slider .thumbs {
max-width: none;
margin: 0;
}
.catalog_detail .item_slider #thumbs {
width: 100%;
}
.catalog_detail .item_slider .slides > li img,
.catalog_detail .item_slider .slides > li a {
border-radius: var(--v2-radius-lg);
}
/* Большое фото заполняет колонку, как в макете. Тема кладёт снимки
`position:absolute; inset:0; margin:auto` с `max-width:100%` — они
вписывались в бокс и оставляли поля по краям. */
/* ⚠️ `:not(.flex)` обязателен: фиксированная высота нужна десктопному
слайдеру, а мобильный (flexslider) с ней получал 420px под фото
высотой 273 — и под снимком зияла пустая полоса. */
.catalog_detail .item_slider:not(.flex) .slides {
height: 420px;
/* Отступ до ленты миниатюр — такой же, как от ленты до карты ниже
(у темы здесь 10px, и лента прилипала к карте снизу). */
margin-bottom: 16px;
border-radius: var(--v2-radius-lg);
overflow: hidden;
}
/* ⚠️ Видимое фото лежит не в `li`, а в отдельном `.offers_img` (в `li`
прячется слайдер по миниатюрам) — стилизовать нужно оба, иначе после
первого же клика по миниатюре фото снова окажется в середине бокса. */
.catalog_detail .item_slider .slides .offers_img,
.catalog_detail .item_slider .slides > ul > li,
.catalog_detail .item_slider .slides .offers_img > a,
.catalog_detail .item_slider .slides > ul > li > a {
display: block;
height: 100%;
}
.catalog_detail .item_slider .slides img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
/* Миниатюры: горизонтальные 120×90 вместо квадратных 60×60 темы. Ширину
задаёт flexslider инлайном из `itemWidth` (см. template.php), здесь —
высота и заполнение кадра. */
.catalog_detail .item_slider .thumbs li,
.catalog_detail .item_slider #thumbs li {
/* ⚠️ `!important` — ответ на `!important` темы: у неё
`.item_slider .thumbs li{width:60px!important}`, и она перебивала
даже инлайновую ширину, которую flexslider проставляет сам.
Значение совпадает с `itemWidth` в template.php и script.js —
менять надо во всех трёх местах. */
width: 120px !important;
height: 90px;
}
.catalog_detail .item_slider .thumbs li span,
.catalog_detail .item_slider .thumbs li a {
display: block;
width: 100%;
height: 100%;
}
.catalog_detail .item_slider .thumbs li img {
position: static;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.catalog_detail .item_slider #thumbs,
.catalog_detail .item_slider .thumbs .flex-viewport {
height: auto;
}
/* Стрелки листания. У темы это спрайты 29×29, положенные абсолютом прямо
на ленту: левая накрывала первую миниатюру. Разносим их по краям —
в макете стрелок нет вовсе, но фото может быть больше четырёх, и
листать чем-то надо.
⚠️ Обе стрелки лежат в одном `` ПОСЛЕ
ленты, то есть соседями друг другу, а не ленте. Чтобы поставить их по
разные стороны, обёртка и список раскрываются `display: contents` —
тогда сами пункты становятся элементами флекса `.wrapp_thumbs`, и
порядок задаётся `order`. */
.catalog_detail .wrapp_thumbs {
display: flex;
align-items: center;
gap: 10px;
/* Столько же, сколько сверху: лента миниатюр стоит на равных
отступах между большим фото и картой. */
margin-bottom: 16px;
}
.catalog_detail .wrapp_thumbs .thumbs {
flex: 0 1 auto;
order: 0;
}
.catalog_detail .thumbs_navigation,
.catalog_detail .thumbs_navigation .flex-direction-nav {
display: contents;
}
.catalog_detail .thumbs_navigation .flex-nav-prev { order: -1; }
.catalog_detail .thumbs_navigation .flex-nav-next { order: 1; }
/* ⚠️ Тема кладёт пункты со стрелками абсолютом (`top:45px; left:10px`
и симметрично справа) — оттого левая и накрывала первую миниатюру.
Возвращаем их в поток, дальше раскладку держит флекс выше. */
.catalog_detail .thumbs_navigation .flex-direction-nav li {
position: static;
float: none;
width: auto;
height: auto;
margin: 0;
padding: 0;
background: none;
}
.catalog_detail .thumbs_navigation .flex-direction-nav a {
display: block;
width: 28px;
height: 28px;
border: 1px solid var(--v2-border);
border-radius: 50%;
background-image: none;
background-color: var(--v2-surface);
transition: border-color var(--v2-transition);
}
.catalog_detail .thumbs_navigation .flex-direction-nav a:hover {
border-color: var(--v2-brand);
}
.catalog_detail .thumbs_navigation .flex-direction-nav a::before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: var(--v2-text-light);
-webkit-mask: var(--v2-icon-chevron) center / 10px 10px no-repeat;
mask: var(--v2-icon-chevron) center / 10px 10px no-repeat;
}
.catalog_detail .thumbs_navigation .flex-direction-nav a:hover::before {
background-color: var(--v2-brand);
}
/* Значок один — «шеврон вниз», поворачиваем под каждую сторону. */
.catalog_detail .thumbs_navigation .flex-prev::before {
transform: rotate(90deg);
}
.catalog_detail .thumbs_navigation .flex-next::before {
transform: rotate(-90deg);
}
/* Когда листать некуда, flexslider гасит стрелку — не показываем её вовсе,
чтобы рядом с лентой не висела мёртвая кнопка. */
.catalog_detail .thumbs_navigation .flex-direction-nav a.flex-disabled {
display: none;
}
/* Миниатюры: активная — с фирменной рамкой, остальные приглушены, как в
макете (`opacity: .5` и оранжевая рамка у активной). */
.catalog_detail .wrapp_thumbs .thumbs li {
border-radius: var(--v2-radius);
overflow: hidden;
border: 2px solid transparent;
opacity: .5;
transition: opacity var(--v2-transition), border-color var(--v2-transition);
cursor: pointer;
}
.catalog_detail .wrapp_thumbs .thumbs li.current,
.catalog_detail .wrapp_thumbs .thumbs li:hover {
opacity: 1;
border-color: var(--v2-brand);
}
.catalog_detail .wrapp_thumbs .thumbs li img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Сайдбар ----------------------------------------------------------------- */
.catalog_detail .img_wrapper + .right_info .middle_info {
/* Серая карточка из макета (`bg-gray-50 rounded-2xl p-6 border`). */
display: flex;
flex-direction: column;
background: var(--v2-bg);
border: 1px solid var(--v2-gray);
border-radius: var(--v2-radius-xl);
padding: 24px;
}
/* ⚠️ Залы и характеристики лежат в одном контейнере `.prices_block`, а по
макету между ними должны встать цена, телефон и отзывы из соседнего
`.buy_block`. Раскрываем контейнер и расставляем блоки порядком. */
.catalog_detail .img_wrapper + .right_info .prices_block {
display: contents;
}
.catalog_detail .img_wrapper + .right_info .sku_props { order: 1; }
.catalog_detail .img_wrapper + .right_info .buy_block { order: 2; }
.catalog_detail .img_wrapper + .right_info .props_list { order: 3; }
/* Залы — «таблетки», активная фирменным цветом. */
.catalog_detail .sku_props {
margin: 0 0 20px;
padding: 0 0 20px;
border-bottom: 1px solid var(--v2-border);
}
.catalog_detail .sku_props .bx_scu_scroller_container,
.catalog_detail .sku_props .bx_scu {
width: auto;
height: auto;
overflow: visible;
}
.catalog_detail .sku_props .bx_scu ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
width: auto;
margin: 0;
padding: 0;
list-style: none;
}
.catalog_detail .sku_props .bx_scu ul li {
display: block;
width: auto;
height: auto;
margin: 0;
padding: 6px 12px;
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius-sm);
background: var(--v2-surface);
color: var(--v2-text-muted);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
transition: background var(--v2-transition), color var(--v2-transition), border-color var(--v2-transition);
}
.catalog_detail .sku_props .bx_scu ul li:hover {
border-color: var(--v2-brand);
color: var(--v2-brand);
}
.catalog_detail .sku_props .bx_scu ul li.active {
background: var(--v2-brand);
border-color: var(--v2-brand);
color: #fff;
}
/* ⚠️ Внутри пункта у темы своя «кнопка в кнопке»: пустой `` под рамку
выбора, маркер-точка в `::before` и `span.cnt` СО СВОЕЙ рамкой, своими
отступами и старым оранжевым #fa6b00 в активном состоянии. Из-за этого
в таблетке была видна вторая рамка, а при наведении — вторая заливка.
Гасим всё внутреннее, оформление держит сам `li`. */
.catalog_detail .sku_props .bx_scu ul li i,
.catalog_detail .sku_props .bx_scu ul li::before,
.catalog_detail .sku_props .bx_scu ul li::after {
display: none;
content: none;
}
.catalog_detail .sku_props .bx_scu ul li .cnt,
.catalog_detail .sku_props .bx_scu ul li .cnt.txt,
.catalog_detail .sku_props .bx_scu ul li:hover .cnt.txt,
.catalog_detail .sku_props .bx_scu ul li.active .cnt.txt {
display: block;
width: auto;
height: auto;
margin: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
font: inherit;
color: inherit;
}
/* Цена, телефон, сравнение и отзывы — один блок `.buy_block`. Раскладываем
сеткой: цена и кнопка во всю ширину, ниже «Сравнить» слева, «Отзывы» со
звёздами справа. */
/* ⚠️ Тема делит сайдбар пополам: `.prices_block` 53%, `.buy_block` 47% —
под свою двухколоночную карточку товара. У нас блоки идут друг под
другом во всю ширину. Селектор с `.info_item .middle_info` повторён
намеренно: у правила темы такая же специфичность, и без него цена с
кнопкой оставались вдвое уже колонки. */
.catalog_detail .info_item .middle_info .prices_block,
.catalog_detail .info_item .middle_info .buy_block {
width: auto;
padding: 0;
}
.catalog_detail .buy_block {
display: grid;
/* Первая колонка тянется, вторая по содержимому: иначе строка
«Сравнить / Отзывы» разъезжается по краям неравномерно. */
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 10px;
margin: 0;
}
/* Строки: цена, кнопка телефона, ряд «Сравнить + Поделиться», под ними
отзывы со звёздами. */
.catalog_detail .buy_block .cl_sauni_price_block { grid-column: 1 / -1; grid-row: 1; }
.catalog_detail .buy_block .cl_contact_block { grid-column: 1 / -1; grid-row: 2; }
.catalog_detail .buy_block .top_info { grid-column: 1; grid-row: 3; justify-self: start; }
.catalog_detail .buy_block .v2-share { grid-column: 2; grid-row: 3; justify-self: end; }
/* Отзывы и звёзды — одной строкой под кнопками. */
/* ⚠️ `align-self: start`, а не `center`: при центрировании отступ сверху
уходит внутрь строки, и между кнопками и отзывами не остаётся ничего.
Со `start` элемент честно отодвигается от края строки на свои 20px. */
.catalog_detail .buy_block .cl_reviews_forobject { grid-column: 1; grid-row: 4; justify-self: end; align-self: start; margin-top: 20px; }
/* Звёзды прижаты к ЛЕВОМУ краю своей колонки, а «Отзывы» — к правому краю
соседней: так между ними остаётся только зазор сетки, и пара читается
одной строкой. При `end` у обеих между ними зияло 60px — ширину второй
колонки задаёт кнопка «Поделиться». */
/* Отступ до строки с отзывами — ровно такой же, как между кнопкой
телефона и кнопками ниже (20px), чтобы блок читался единым ритмом. */
/* 24px, а не 20: звёзды ниже строки «Отзывы» на 8px, и лишние 4px
выравнивают их по её середине. */
.catalog_detail .buy_block .rating { grid-column: 2; grid-row: 4; justify-self: start; align-self: start; margin-top: 24px; }
/* ⚠️ Внутри `.top_info` у темы висит `
` — из-за него коробка кнопки
«Сравнить» становилась 52px против 31px у «Поделиться», и кнопки
вставали на разной высоте. */
.catalog_detail .buy_block .top_info br,
.catalog_detail .buy_block .top_info .wrap_md > br {
display: none;
}
/* Остатки магазинной части: пустые цены и кнопки покупки. */
.catalog_detail .buy_block .cost.prices,
.catalog_detail .buy_block .offer_buy_block,
.catalog_detail .buy_block .cl_contact_block br,
.catalog_detail .buy_block .cl_sb_order,
.catalog_detail .buy_block .wrapp_one_click {
display: none;
}
.catalog_detail .cl_price_offer_in_detail {
margin-bottom: 20px;
padding: 16px;
border: 1px solid var(--v2-brand-light);
border-radius: var(--v2-radius-lg);
background: var(--v2-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
color: var(--v2-text-light);
font-size: 14px;
line-height: 1.6;
}
.catalog_detail .cl_price_offer_in_detail .cl_price_sauni_detail,
.catalog_detail .cl_price_offer_in_detail b {
color: var(--v2-text);
font-size: 18px;
font-weight: 700;
line-height: 1.4;
}
/* ⚠️ Стили привязаны к `data-obj`, а не к классу `cl_display_phone`: по
клику скрипт темы СНИМАЕТ этот класс и подставляет внутрь номера. Пока
правила висели на классе, показанный телефон терял скругление, отступ
снизу и ширину — «Сравнить» со звёздами прилипали к нему вплотную.
Ровно та же ловушка уже была в карточке списка, см. раздел 04. */
.catalog_detail .cl_contact_block > span[data-obj] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
/* ⚠️ У кнопок темы `box-sizing: content-box`, и 100% + padding вылезали
за карточку сайдбара на 32px. */
box-sizing: border-box;
height: auto;
margin: 0 0 20px;
padding: 15px 16px;
border: 1px solid transparent;
border-radius: var(--v2-radius-lg);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-align: center;
transition: background var(--v2-transition);
}
/* До нажатия — сплошная фирменная кнопка со значком трубки. */
.catalog_detail .cl_contact_block > span.cl_display_phone {
background: var(--v2-brand);
border-color: var(--v2-brand);
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.catalog_detail .cl_contact_block > span.cl_display_phone:hover {
background: var(--v2-brand-hover);
border-color: var(--v2-brand-hover);
}
.catalog_detail .cl_contact_block > span.cl_display_phone::before {
content: '';
display: block;
flex: 0 0 auto;
width: 15px;
height: 15px;
background: #fff;
-webkit-mask: var(--v2-icon-phone) center / 15px 15px no-repeat;
mask: var(--v2-icon-phone) center / 15px 15px no-repeat;
}
/* После нажатия внутрь встают номера — у заведения их может быть
несколько, и каждый должен быть отдельной кнопкой звонка. Сам контейнер
перестаёт быть кнопкой. */
.catalog_detail .cl_contact_block > span[data-obj]:not(.cl_display_phone) {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
border-color: transparent;
background: none;
text-transform: none;
}
/* Компонент разделяет номера ещё и `
` — здесь раскладку держит флекс. */
.catalog_detail .cl_contact_block > span[data-obj]:not(.cl_display_phone) br {
display: none;
}
/* ⚠️ Номер — ссылка `tel:` во всю ширину кнопки, а не текст внутри неё:
до этого нажималась только сама цифра, а промах по кнопке ничего не
давал. Разметку ссылок отдаёт компонент `wcom:getphone`. */
.catalog_detail .cl_contact_block > span[data-obj] a.wc-phone {
display: block;
box-sizing: border-box;
width: 100%;
padding: 15px 16px;
border: 1px solid var(--v2-brand);
border-radius: var(--v2-radius-lg);
background: var(--v2-surface);
color: var(--v2-brand);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
transition: background var(--v2-transition), color var(--v2-transition);
}
.catalog_detail .cl_contact_block > span[data-obj] a.wc-phone:hover {
background: var(--v2-brand);
color: #fff;
}
/* ⚠️ Отступы темы снимаем, но НЕ `margin` целиком: строке с отзывами
выше по файлу задан `margin-top`, и общий сброс, идущий позже,
затирал его — отзывы прилипали к кнопкам вплотную. */
.catalog_detail .buy_block .top_info,
.catalog_detail .buy_block .cl_reviews_forobject,
.catalog_detail .buy_block .rating {
width: auto;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
}
.catalog_detail .buy_block .top_info .wrap_md > div {
display: block;
}
.catalog_detail .buy_block .compare_item .value {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius);
background: var(--v2-surface);
color: var(--v2-text-light);
font-size: 14px;
line-height: 1.2;
transition: color var(--v2-transition), border-color var(--v2-transition);
}
/* ⚠️ Все правила «Сравнить» пишутся селектором ТОЙ ЖЕ длины, что у темы
(`.catalog_detail .top_info .like_icons span.value…`) — она специфичнее
короткого `.buy_block .compare_item .value`, и без этого сквозь наши
стили проступали её рамка #e5e5e5, спрайт-иконка 29×29 и оранжевая
заливка в состояниях. Отсюда же нечитаемое «В сравнении»: белый текст
на оранжевом появлялся только при наведении. */
.catalog_detail .top_info .like_icons span.value span {
/* Подпись тема прячет ниже 600px — в макете она есть всегда. */
display: inline;
margin: 0;
font: inherit;
color: inherit;
}
/* ⚠️ Рамка «таблетки» висит на САМОЙ ссылке `.compare_item`, а не на
подписи внутри. Причина: подписей две («Сравнить» и «В сравнении»), и
тема переключает их ИНЛАЙНОВЫМ `style="display:…"` из своего скрипта —
инлайн сильнее любого селектора, поэтому `display:inline-flex` на
подписи не держался, значок уезжал на отдельную строку, а кнопка
становилась двухэтажной. На `.compare_item` инлайна нет, и переключение
подписей остаётся полностью за темой. */
.catalog_detail .top_info .like_icons .compare_item {
display: inline-flex;
align-items: center;
white-space: nowrap;
padding: 6px 12px;
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius);
background: var(--v2-surface);
color: var(--v2-text-light);
line-height: 1.2;
transition: color var(--v2-transition), border-color var(--v2-transition);
}
.catalog_detail .top_info .like_icons .compare_item span.value,
.catalog_detail .top_info .like_icons .compare_item span.value.added {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: inherit;
font-size: 14px;
line-height: inherit;
}
/* «В сравнении» — тот же контур, но фирменным цветом; заливки нет, иначе
белый текст на оранжевом не читается (так и было). */
/* ⚠️ Селектор с `> div` не для красоты: у темы для этого состояния есть
`.catalog_detail .top_info .like_icons > div.text.added{border-radius:2px}`,
и по специфичности (класс+тег) оно перебивало скругление из правила
выше — «В сравнении» получалась с острыми углами. */
.catalog_detail .top_info .like_icons > div.compare_item.added {
border-radius: var(--v2-radius);
/* Заливку тема ставит фирменной оранжевой — и белый текст «В сравнении»
на ней не читался. Оставляем контур. */
background: var(--v2-surface);
border-color: var(--v2-brand);
color: var(--v2-brand);
}
/* Значок — своя маска вместо спрайта темы (тот шёл боксом 29×29 и
раздувал кнопку). */
/* Значок — своя маска вместо спрайта темы (тот шёл боксом 29×29 и
раздувал кнопку). `inline-block`, а не `block`: подпись рядом, в одну
строку. */
.catalog_detail .top_info .like_icons .compare_item span.value::before,
.catalog_detail .top_info .like_icons .compare_item span.value.added::before {
content: '';
display: inline-block;
vertical-align: -2px;
width: 12px;
height: 14px;
margin: 0 6px 0 0;
background-image: none;
background-color: currentColor;
-webkit-mask: var(--v2-icon-compare) center / 12px 14px no-repeat;
mask: var(--v2-icon-compare) center / 12px 14px no-repeat;
}
.catalog_detail .top_info .like_icons .compare_item:hover {
background: var(--v2-surface);
border-color: var(--v2-brand);
color: var(--v2-brand);
}
.catalog_detail .buy_block .cl_reviews_forobject .cl_reviews_click {
color: var(--v2-brand);
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.catalog_detail .buy_block .cl_reviews_forobject .cl_reviews_click:hover {
text-decoration: underline;
}
/* Звёзды: вместо оранжевых спрайтов темы — жёлтые из макета. */
.catalog_detail .rating table,
.catalog_detail .rating tbody,
.catalog_detail .rating tr {
display: flex;
gap: 2px;
}
.catalog_detail .rating td {
display: block;
padding: 0;
border: 0;
}
.catalog_detail .rating .star-voted,
.catalog_detail .rating .star-empty {
display: block;
width: 14px;
height: 13px;
background-image: none;
background-color: var(--v2-star);
-webkit-mask: var(--v2-icon-star) center / 14px 13px no-repeat;
mask: var(--v2-icon-star) center / 14px 13px no-repeat;
}
.catalog_detail .rating .star-empty {
background-color: #d1d5db;
-webkit-mask-image: var(--v2-icon-star-o);
mask-image: var(--v2-icon-star-o);
}
/* Характеристики: жирная подпись фиксированной ширины, значение серым. */
.catalog_detail .props_list {
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.catalog_detail .props_list li {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 0 12px;
padding: 0;
background: none;
font-size: 14px;
line-height: 1.45;
}
.catalog_detail .props_list li:last-child {
margin-bottom: 0;
}
.catalog_detail .props_list .char_name {
flex: 0 0 144px;
width: auto;
color: var(--v2-text-muted);
font-weight: 700;
}
.catalog_detail .props_list .char_name span,
.catalog_detail .props_list .char_value span {
font: inherit;
color: inherit;
}
.catalog_detail .props_list .char_value {
flex: 1 1 auto;
width: auto;
min-width: 0;
color: var(--v2-text-light);
word-break: break-word;
}
.catalog_detail .props_list .char_value a {
color: var(--v2-brand);
}
.catalog_detail .props_list .char_value a:hover {
text-decoration: underline;
}
/* Описание занимает всю левую колонку: у темы `.info_item` фиксированной
ширины под её двухколоночную карточку. */
.catalog_detail .cl_inmap_img_wrapper + .right_info .info_item,
.catalog_detail .cl_inmap_img_wrapper + .right_info .middle_info {
width: auto;
float: none;
padding: 0;
}
/* «Поделиться» -------------------------------------------------------------
Кнопка стоит в одной строке со «Сравнить» и выглядит так же; по нажатию
раскрывается список сервисов. Разметка своя (см. template.php), виджет
Яндекса с ЖЖ и «Мой миром» не используется. */
.catalog_detail .v2-share {
position: relative;
}
.catalog_detail .v2-share__btn {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
padding: 6px 12px;
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius);
background: var(--v2-surface);
color: var(--v2-text-light);
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1.2;
/* Тема пишет все свои кнопки капслоком — здесь это обычная подпись
рядом со «Сравнить», регистр возвращаем. */
text-transform: none;
cursor: pointer;
transition: color var(--v2-transition), border-color var(--v2-transition);
}
.catalog_detail .v2-share__btn:hover,
.catalog_detail .v2-share.open .v2-share__btn {
border-color: var(--v2-brand);
color: var(--v2-brand);
}
.catalog_detail .v2-share__btn-icon {
display: block;
flex: 0 0 auto;
width: 14px;
height: 16px;
background-color: currentColor;
-webkit-mask: var(--v2-icon-share) center / 14px 16px no-repeat;
mask: var(--v2-icon-share) center / 14px 16px no-repeat;
}
/* Список сервисов. Выпадает вправо-вниз от кнопки; на узкой колонке
прижимается к правому краю, чтобы не вылезать за карточку. */
.catalog_detail .v2-share__menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 20;
min-width: 210px;
padding: 6px;
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius-lg);
background: var(--v2-surface);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .15);
}
.catalog_detail .v2-share__item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
border: 0;
border-radius: var(--v2-radius-sm);
background: none;
color: var(--v2-text-muted);
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1.2;
text-align: left;
text-decoration: none;
text-transform: none;
cursor: pointer;
transition: background var(--v2-transition), color var(--v2-transition);
}
.catalog_detail .v2-share__item:hover {
background: var(--v2-bg);
color: var(--v2-brand);
}
.catalog_detail .v2-share__ico {
display: block;
flex: 0 0 auto;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 18px 18px;
mask-size: 18px 18px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.catalog_detail .v2-share__ico--tg { -webkit-mask-image: var(--v2-icon-tg); mask-image: var(--v2-icon-tg); }
.catalog_detail .v2-share__ico--wa { -webkit-mask-image: var(--v2-icon-wa); mask-image: var(--v2-icon-wa); }
.catalog_detail .v2-share__ico--viber { -webkit-mask-image: var(--v2-icon-viber); mask-image: var(--v2-icon-viber); }
.catalog_detail .v2-share__ico--fb { -webkit-mask-image: var(--v2-icon-fb); mask-image: var(--v2-icon-fb); }
.catalog_detail .v2-share__ico--ig { -webkit-mask-image: var(--v2-icon-ig); mask-image: var(--v2-icon-ig); }
.catalog_detail .v2-share__ico--link { -webkit-mask-image: var(--v2-icon-link); mask-image: var(--v2-icon-link); }
/* Подтверждение копирования: подпись меняется на «Скопировано», значок —
на галочку. Без ответа непонятно, сработало нажатие или нет. */
.catalog_detail .v2-share__item.copied {
color: #16a34a;
}
.catalog_detail .v2-share__item.copied .v2-share__ico {
-webkit-mask-image: var(--v2-icon-check);
mask-image: var(--v2-icon-check);
}
/* Карта -------------------------------------------------------------------- */
/* ⚠️ `#main .cl_inmap_indetail{width:47%;float:left}` в custom.css — селектор
с ID, поэтому здесь нужен `body#main`, иначе карта остаётся в половину
колонки (так и было: 326px вместо 689). */
body#main .catalog_detail .cl_inmap_indetail {
width: 100%;
float: none;
height: 320px;
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius-lg);
overflow: hidden;
}
/* У блока с кнопкой остаётся отступ темы под старую колоночную раскладку —
кнопка выезжала на 30px правее края колонки. */
.catalog_detail .element_detail_text {
padding: 0;
margin: 0;
}
.catalog_detail .element_detail_text .sh {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid #d1d5db;
border-radius: var(--v2-radius);
color: var(--v2-text-light);
font-size: 14px;
cursor: pointer;
transition: background var(--v2-transition);
}
/* Значок «поделиться» — свой, вместо спрайта темы. */
.catalog_detail .element_detail_text .sh::before {
content: '';
display: block;
flex: 0 0 auto;
width: 14px;
height: 16px;
background-color: currentColor;
-webkit-mask: var(--v2-icon-share) center / 14px 16px no-repeat;
mask: var(--v2-icon-share) center / 14px 16px no-repeat;
}
.catalog_detail .element_detail_text .sh .text.button::before,
.catalog_detail .element_detail_text .sh .text.button::after {
content: none;
display: none;
}
/* ⚠️ Внутри лежит ещё одна кнопка темы (`.text.button.transparent`) со
своей серой рамкой и отступами — из-за неё в кнопке была видна вторая
рамка. Оформление держит внешний блок, внутренний обнуляем. */
.catalog_detail .element_detail_text .sh .share_wrapp,
.catalog_detail .element_detail_text .sh .text.button {
display: block;
width: auto;
height: auto;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: inherit;
font: inherit;
line-height: 1.2;
}
.catalog_detail .element_detail_text .sh:hover {
background: var(--v2-bg);
border-color: var(--v2-brand);
color: var(--v2-brand);
}
/* Описание ---------------------------------------------------------------- */
/* ⚠️ У блока описания тема держит свой `font-family: Ubuntu` — шрифт,
который мы отключили вместе с Google Fonts, поэтому текст откатывался
на системный Arial и выбивался из остальной страницы. Внутренние абзацы
вдобавок имеют собственные 13px и цвет #888 — их тоже приводим к общему
виду, иначе описание выглядит мельче всего вокруг. */
.catalog_detail .cl_offerdetail_text {
/* Не `inherit`: правило темы для `.detail_text` специфичнее и всё равно
возвращало Ubuntu, а с ним и всё поддерево ниже. */
font-family: var(--v2-font);
color: var(--v2-text-light);
font-size: 15px;
line-height: 1.7;
}
/* ⚠️ Единственный `!important` в этом разделе, и он неизбежен: описания
заполнялись копипастом из Google Docs, и внутри лежат ИНЛАЙНОВЫЕ
`font-family: Georgia` (видно по служебным `docs-internal-guid`).
Инлайн сильнее любого селектора, поэтому половина карточек показывала
описание засечным шрифтом посреди страницы на Inter. Размеры и цвет не
трогаем — там встречается осмысленное форматирование. */
.catalog_detail .cl_offerdetail_text * {
font-family: inherit !important;
}
.catalog_detail .cl_offerdetail_text p,
.catalog_detail .cl_offerdetail_text li,
.catalog_detail .cl_offerdetail_text td,
.catalog_detail .cl_offerdetail_text span,
.catalog_detail .cl_offerdetail_text div {
font-size: inherit;
line-height: inherit;
color: inherit;
}
.catalog_detail .cl_offerdetail_text p {
margin: 0 0 16px;
}
.catalog_detail .cl_offerdetail_text h2,
.catalog_detail .cl_offerdetail_text h3,
.catalog_detail .cl_offerdetail_text h4,
.catalog_detail .cl_offerdetail_text strong,
.catalog_detail .cl_offerdetail_text b {
color: var(--v2-text);
}
.catalog_detail .cl_offerdetail_text h3 {
margin: 24px 0 12px;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
/* Отзывы ------------------------------------------------------------------ */
.catalog_detail .tabs_section {
margin: 40px 0 24px;
border-bottom: 1px solid var(--v2-border);
}
/* Заголовок «Отзывы (N)» — вкладка темы. Рамку и заливку снимаем, вместо
них подчёркивание фирменным цветом, как в макете. */
.catalog_detail .tabs_section ul.tabs1 {
display: flex;
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.catalog_detail .tabs_section ul.tabs1 > li {
display: block;
margin: 0;
padding: 0 0 12px;
border: 0;
background: none;
list-style: none;
color: var(--v2-text-light);
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
.catalog_detail .tabs_section ul.tabs1 > li.current {
border-bottom: 2px solid var(--v2-brand);
color: var(--v2-brand);
}
.catalog_detail .tabs_section ul.tabs1 > li span,
.catalog_detail .tabs_section ul.tabs1 > li .count {
display: inline;
padding: 0;
background: none;
color: inherit;
font: inherit;
}
/* Тело вкладки пустое — в него ничего не выводится, отзывы идут ниже
отдельным блоком. */
.catalog_detail .tabs_section ul.tabs_content {
display: none;
}
.catalog_detail .modern-page-navigation {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
}
.catalog_detail .modern-page-navigation .modern-page-title {
color: var(--v2-text-light);
}
.catalog_detail .modern-page-navigation .modern-page-current {
color: var(--v2-text);
font-weight: 700;
}
.catalog_detail .modern-page-navigation a {
color: var(--v2-brand);
}
.catalog_detail .modern-page-navigation a:hover {
text-decoration: underline;
}
/* Каждый отзыв — таблица. Разбираем её в обычные блоки: нужен только
разделитель между отзывами и типографика. */
.catalog_detail .reviews-post-table,
.catalog_detail .reviews-post-table thead,
.catalog_detail .reviews-post-table tbody,
.catalog_detail .reviews-post-table tr,
.catalog_detail .reviews-post-table td {
display: block;
width: auto;
padding: 0;
border: 0;
background: none;
}
.catalog_detail .reviews-post-table {
padding: 24px 0;
border-top: 1px solid var(--v2-gray);
}
.catalog_detail .reviews-post-first {
border-top: 0;
padding-top: 0;
}
.catalog_detail .reviews-post-table thead b,
.catalog_detail .reviews-post-table thead [itemprop="author"] {
color: var(--v2-text);
font-size: 15px;
font-weight: 700;
}
.catalog_detail .reviews-post-table .message-post-date {
margin-left: 8px;
color: #9ca3af;
font-size: 12px;
}
.catalog_detail .reviews-text {
margin: 8px 0 0;
color: var(--v2-text-light);
font-size: 14px;
line-height: 1.6;
}
.catalog_detail .reviews-collapse {
margin: 24px 0;
}
.catalog_detail .reviews-collapse-link.button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: 0;
border-radius: var(--v2-radius-sm);
background: var(--v2-brand);
color: #fff;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
transition: background var(--v2-transition);
}
.catalog_detail .reviews-collapse-link.button:hover {
background: var(--v2-brand-hover);
}
/* Форма отзыва — серая карточка, как в макете. Появляется по кнопке
«Оставить отзыв», до этого свёрнута компонентом. */
.catalog_detail .reviews-form {
padding: 24px;
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius-lg);
background: var(--v2-bg);
}
.catalog_detail .reviews-form label {
display: block;
margin-bottom: 6px;
color: var(--v2-text-light);
font-size: 14px;
}
.catalog_detail .reviews-form input[type="text"],
.catalog_detail .reviews-form input[type="email"],
.catalog_detail .reviews-form textarea {
width: 100%;
box-sizing: border-box;
padding: 10px 16px;
border: 1px solid #d1d5db;
border-radius: var(--v2-radius-sm);
background: var(--v2-surface);
color: var(--v2-text);
font-family: inherit;
font-size: 14px;
line-height: 1.5;
}
.catalog_detail .reviews-form textarea {
resize: vertical;
}
.catalog_detail .reviews-form input[type="text"]:focus,
.catalog_detail .reviews-form input[type="email"]:focus,
.catalog_detail .reviews-form textarea:focus {
outline: none;
border-color: var(--v2-brand);
box-shadow: 0 0 0 1px var(--v2-brand);
}
.catalog_detail .reviews-form input[type="submit"],
.catalog_detail .reviews-form button[type="submit"] {
padding: 10px 32px;
border: 0;
border-radius: var(--v2-radius-sm);
background: var(--v2-brand);
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
transition: background var(--v2-transition);
}
.catalog_detail .reviews-form input[type="submit"]:hover,
.catalog_detail .reviews-form button[type="submit"]:hover {
background: var(--v2-brand-hover);
}
/* --- 11. Главная -----------------------------------------------------------
Разделы у главной те же, что в макете: баннеры, города, новости с
подпиской, редакторский блок, карусели. Меняются оформление и раскладка,
разметка компонентов не трогается. */
/* Заголовок раздела: слева название, справа ссылка «Все …». Используется
и городами, и новостями, и статьями. */
#content .top_block,
.wrapper_inner .top_block {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
padding: 0;
border: 0;
}
#content .top_block .title_block,
.wrapper_inner .top_block .title_block {
margin: 0;
color: var(--v2-text);
font-size: 30px;
font-weight: 700;
line-height: 1.2;
}
#content .top_block > a,
.wrapper_inner .top_block > a {
flex: 0 0 auto;
color: var(--v2-brand);
font-size: 14px;
font-weight: 500;
}
#content .top_block > a:hover,
.wrapper_inner .top_block > a:hover {
color: var(--v2-brand-hover);
}
/* Плитка городов ----------------------------------------------------------
⚠️ У темы это «тизеры»: элементы плавают, зазоры между ними сделаны
БЕЛЫМИ РАМКАМИ по 10px, а пропорция держится на `padding-bottom: 23%`.
Всё это снимаем — раскладку задаёт сетка, пропорцию `aspect-ratio`. */
.start_promo {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (min-width: 768px) {
.start_promo {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
@media (min-width: 1024px) {
.start_promo {
grid-template-columns: repeat(4, 1fr);
}
}
.start_promo .item,
.start_promo .item.normal {
position: relative;
float: none;
width: auto;
height: auto;
aspect-ratio: 4 / 3;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--v2-radius-xl);
overflow: hidden;
background: var(--v2-gray);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
transition: box-shadow var(--v2-transition);
}
.start_promo .item:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}
/* Фото лежит в отдельной ссылке последним ребёнком. */
.start_promo .item > a:last-child {
display: block;
width: 100%;
height: 100%;
}
.start_promo .item img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transition: transform .7s ease-out;
}
.start_promo .item:hover img {
transform: scale(1.05);
}
/* Затемнение снизу — чтобы подпись читалась на любом снимке. */
.start_promo .item::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .2) 50%, transparent 100%);
pointer-events: none;
transition: background var(--v2-transition);
}
/* Подпись города — фирменная плашка в нижнем углу, как в макете. */
.start_promo .item .wrap_tizer {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
width: auto;
height: auto;
padding: 16px;
background: none;
text-align: left;
}
.start_promo .item .wrapper_inner_tizer,
.start_promo .item .wr_block,
.start_promo .item .wrap_outer.title {
display: block;
width: auto;
height: auto;
margin: 0;
padding: 0;
background: none;
}
.start_promo .item .outer_text {
display: inline-block;
padding: 6px 16px;
border-radius: var(--v2-radius);
background: var(--v2-brand);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2);
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
transition: background var(--v2-transition);
}
.start_promo .item:hover .outer_text {
background: var(--v2-brand-hover);
}
.start_promo .item .inner_text {
color: inherit;
font: inherit;
}
/* Ссылка-подложка на всю плитку остаётся сверху остальных слоёв. */
.start_promo .item .opacity_block {
position: absolute;
inset: 0;
z-index: 3;
background: none;
opacity: 1;
}
/* Кнопка «Перейти в каталог» под плиткой городов: контурная фирменная,
по центру, как в макете. Заливкой отвечает на наведение.
⚠️ В разметке компонента кнопка лежит ВНУТРИ `.start_promo` — то есть
она элемент той же сетки, что и города, и без растяжки на все колонки
занимала одну ячейку: вставала под вторую колонку, а её `aspect-ratio`
от правила плиток раздувал пустую ячейку до размеров карточки города. */
.wrapper_inner.wides .catalog_btn {
grid-column: 1 / -1;
margin-top: 16px;
text-align: center;
aspect-ratio: auto;
}
body#main .catalog_btn a.button,
body#main .catalog_btn a.button.transparent {
display: inline-flex;
align-items: center;
justify-content: center;
height: auto;
padding: 13px 32px;
border: 2px solid var(--v2-brand);
border-radius: var(--v2-radius-lg);
background: none;
color: var(--v2-brand);
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
transition: background var(--v2-transition), color var(--v2-transition);
}
body#main .catalog_btn a.button:hover,
body#main .catalog_btn a.button.transparent:hover {
background: var(--v2-brand);
color: #fff;
}
/* Новости ------------------------------------------------------------------
В макете это две колонки: слева карточки новостей строкой «фото + текст»,
справа блок подписки.
⚠️ Сетку вешаем на `.news_items`, а не на `.info_block`: у последнего
всего один ребёнок-обёртка, и колонки получались пустыми. */
.news_wrap .news_block .news_items {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 768px) {
.news_wrap .news_block .news_items {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
.news_wrap .news_block .item {
display: flex;
gap: 16px;
width: auto;
margin: 0;
padding: 0;
border: 0;
background: none;
}
.news_wrap .news_block .item .image {
flex: 0 0 auto;
width: 128px;
height: 96px;
margin: 0;
border-radius: var(--v2-radius-lg);
overflow: hidden;
background: var(--v2-gray);
}
.news_wrap .news_block .item .image a,
.news_wrap .news_block .item .image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.news_wrap .news_block .item .image img {
transition: transform var(--v2-transition);
}
.news_wrap .news_block .item:hover .image img {
transform: scale(1.05);
}
.news_wrap .news_block .item .info {
flex: 1 1 auto;
min-width: 0;
padding: 0;
}
.news_wrap .news_block .item .date,
.news_wrap .news_block .item .info .date {
margin: 0 0 4px;
color: #9ca3af;
font-size: 12px;
}
.news_wrap .news_block .item .name a,
.news_wrap .news_block .item .info a {
color: var(--v2-brand);
font-size: 15px;
font-weight: 700;
line-height: 1.35;
}
.news_wrap .news_block .item .name a:hover,
.news_wrap .news_block .item .info a:hover {
text-decoration: underline;
}
.news_wrap .news_block .item .previewtext,
.news_wrap .news_block .item .text {
margin-top: 8px;
color: var(--v2-text-light);
font-size: 14px;
line-height: 1.5;
}
/* ⚠️ Два наследства старой раскладки, где фото лежало абсолютом слева:
у текста ширина в процентах (и у самого блока, и у каждой строки) и
отступ слева в 110px под это фото. Из-за них колонка обрезалась втрое
(115px вместо 225). Селектор с `.image + .info` повторяет тему — у неё
он длиннее, и короткая запись проигрывала. */
.news_wrap .news_block .item .info,
.news_wrap .news_block .item .info > * {
width: auto;
}
.news_wrap .news_block .news_items .item .image + .info {
padding-left: 0;
}
.news_wrap .news_block .item .preview {
margin-top: 8px;
color: var(--v2-text-light);
font-size: 14px;
line-height: 1.5;
}
.news_wrap .news_block .item .preview b,
.news_wrap .news_block .item .preview strong {
font-weight: 400;
color: inherit;
}
/* Подписка -----------------------------------------------------------------
Карточка с фирменным градиентом из макета. */
.subscribe_wrap .subscribe-form {
height: 100%;
}
.subscribe_wrap .subscribe-form .wrap_bg {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
box-sizing: border-box;
padding: 28px;
border-radius: var(--v2-radius-xl);
/* ⚠️ Тема ставит сюда фоновую картинку инлайновым стилем
(`background-position`), поэтому фон задаём с !important — иначе
градиент перекрывается её фотоподложкой. */
background: linear-gradient(135deg, var(--v2-brand) 0%, var(--v2-brand-dark) 100%) !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
color: #fff;
}
.subscribe_wrap .subscribe-form .top_block {
display: flex;
align-items: flex-start;
gap: 16px;
/* ⚠️ Ширину и прижатие вправо задаёт тема (у неё этот блок плавал у
правого края узкой полосой) — без сброса заголовок с текстом
уезжали вправо, а круг значка висел посреди карточки. */
float: none;
width: auto;
margin: 0 0 20px;
padding: 0;
border: 0;
text-align: left;
}
.subscribe_wrap .subscribe-form .top_block .image {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin: 0;
border-radius: var(--v2-radius-full);
background: rgba(255, 255, 255, .2);
}
/* ⚠️ Текстовому блоку тема даёт фиксированную узкую ширину и прижимает
его вправо — между иконкой и заголовком зияла дыра, а справа текст
упирался в край. Отпускаем: блок занимает всё после иконки. */
.subscribe_wrap .subscribe-form .top_block .text {
flex: 1 1 auto;
width: auto;
min-width: 0;
margin: 0;
padding: 0;
float: none;
}
/* Круг был пустым: у темы значок — спрайт, который мы не тащим.
Рисуем конверт маской, как остальные значки дизайна. */
.subscribe_wrap .subscribe-form .top_block .image::before {
content: '';
display: block;
width: 24px;
height: 24px;
background: #fff;
-webkit-mask: var(--v2-icon-envelope) center / 24px 24px no-repeat;
mask: var(--v2-icon-envelope) center / 24px 24px no-repeat;
}
.subscribe_wrap .subscribe-form .title {
margin: 0 0 4px;
color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
}
.subscribe_wrap .subscribe-form .more {
color: rgba(255, 255, 255, .8);
font-size: 14px;
line-height: 1.4;
}
/* ⚠️ Флекс — на самой форме: в отличие от подвала, здесь у полей нет
обёртки `.wrap_md`, инпут и кнопка лежат прямо в `.sform` (скрытый
чекбокс «Новости магазина» в раскладке не участвует). */
.subscribe_wrap .sform,
.subscribe_wrap .sform .wrap_md {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 8px;
}
.subscribe_wrap .sform label.hidden {
display: none;
}
.subscribe_wrap .sform .email_wrap {
flex: 1 1 180px;
width: auto;
float: none;
margin: 0;
padding: 0;
border: 0;
background: none;
}
.subscribe_wrap .sform input[type="email"],
.subscribe_wrap .sform input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: 12px 16px;
border: 0;
border-radius: var(--v2-radius);
background: var(--v2-surface);
color: var(--v2-text);
font-family: inherit;
font-size: 14px;
}
/* `flex: 1 1 auto`, а не `0 0`: карточка узкая (~306px изнутри), инпут с
кнопкой в одну строку не помещаются, и флекс переносит кнопку. При
переносе она растягивается на всю ширину — как в макете на узких
экранах (`flex-col` → `w-full`), а не висит огрызком слева. */
.subscribe_wrap .sform .button_wrap {
flex: 1 1 auto;
width: auto;
float: none;
margin: 0;
}
.subscribe_wrap .sform .button_wrap input.button {
width: 100%;
}
/* Селектор с типом и классом — у кнопки темы вариант `transparent white`
с прозрачным фоном и белой рамкой, он специфичнее простого `.button`. */
.subscribe_wrap .sform input.button,
.subscribe_wrap .sform input.button.transparent.white {
height: 100%;
margin: 0;
padding: 12px 24px;
border: 0;
border-radius: var(--v2-radius);
background: #111827;
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
transition: background var(--v2-transition);
}
.subscribe_wrap .sform input.button:hover,
.subscribe_wrap .sform input.button.transparent.white:hover {
background: #1f2937;
}
/* Вкладки «Популярные / Рекомендуем» и карусели ----------------------------- */
.tab_slider_wrapp .top_blocks,
.news_akc_block .top_block {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
border-bottom: 1px solid var(--v2-border);
}
.tab_slider_wrapp .tabs {
display: flex;
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
border: 0;
}
.tab_slider_wrapp .tabs > li {
margin: 0;
padding: 0 0 12px;
border: 0;
background: none;
color: var(--v2-text-light);
font-size: 18px;
font-weight: 500;
line-height: 1.3;
cursor: pointer;
transition: color var(--v2-transition);
}
.tab_slider_wrapp .tabs > li:hover {
color: var(--v2-text);
}
.tab_slider_wrapp .tabs > li.cur {
border-bottom: 2px solid var(--v2-brand);
color: var(--v2-brand);
font-weight: 700;
}
.tab_slider_wrapp .tabs > li span {
font: inherit;
color: inherit;
}
.tab_slider_wrapp .tabs > li.stretch {
display: none;
}
/* Стрелки каруселей — те же кружки, что у миниатюр в карточке. */
.slider_navigation {
display: flex;
gap: 8px;
margin: 0 0 12px;
padding: 0;
list-style: none;
}
.slider_navigation li {
margin: 0;
padding: 0;
background: none;
}
.slider_navigation li a,
.slider_navigation li span {
display: block;
width: 34px;
height: 34px;
border: 1px solid var(--v2-border);
border-radius: 50%;
background-color: var(--v2-surface);
background-image: none;
transition: border-color var(--v2-transition);
}
.slider_navigation li a:hover,
.slider_navigation li span:hover {
border-color: var(--v2-brand);
}
.slider_navigation li a::before,
.slider_navigation li span::before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: var(--v2-text-light);
-webkit-mask: var(--v2-icon-chevron) center / 11px 11px no-repeat;
mask: var(--v2-icon-chevron) center / 11px 11px no-repeat;
transition: background-color var(--v2-transition);
}
.slider_navigation li:hover a::before,
.slider_navigation li:hover span::before {
background-color: var(--v2-brand);
}
.slider_navigation li.prev a::before,
.slider_navigation li.prev span::before {
transform: rotate(90deg);
}
.slider_navigation li.next a::before,
.slider_navigation li.next span::before {
transform: rotate(-90deg);
}
/* Стрелки каруселей на главной лежат глубже: внутри `.slider_navigation`
у темы ещё один список `ul.flex-direction-nav` от flexslider. */
.slider_navigation .flex-direction-nav {
display: flex;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.slider_navigation .flex-direction-nav li {
position: static;
float: none;
width: auto;
height: auto;
margin: 0;
padding: 0;
background: none;
}
.slider_navigation .flex-direction-nav a {
display: block;
width: 34px;
height: 34px;
border: 1px solid var(--v2-border);
border-radius: 50%;
background-color: var(--v2-surface);
background-image: none;
transition: border-color var(--v2-transition);
}
.slider_navigation .flex-direction-nav a:hover {
border-color: var(--v2-brand);
}
.slider_navigation .flex-direction-nav a::before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: var(--v2-text-light);
-webkit-mask: var(--v2-icon-chevron) center / 11px 11px no-repeat;
mask: var(--v2-icon-chevron) center / 11px 11px no-repeat;
transition: background-color var(--v2-transition);
}
.slider_navigation .flex-direction-nav a:hover::before {
background-color: var(--v2-brand);
}
.slider_navigation .flex-direction-nav .flex-prev::before {
transform: rotate(90deg);
}
.slider_navigation .flex-direction-nav .flex-next::before {
transform: rotate(-90deg);
}
/* Стрелки неактивной вкладки не показываем — иначе рядом висят две пары. */
.slider_navigation > li:not(.cur) {
display: none;
}
.slider_navigation .flex-direction-nav a.flex-disabled {
opacity: .35;
pointer-events: none;
}
/* Карточки в каруселях «Популярные», «Рекомендуем», «Ранее вы смотрели» ----- */
.tabs_content .catalog_item,
.similar_products_wrapp .catalog_item {
box-sizing: border-box;
padding: 12px;
border: 1px solid var(--v2-gray);
border-radius: var(--v2-radius-xl);
background: var(--v2-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
transition: box-shadow var(--v2-transition);
}
.tabs_content .catalog_item:hover,
.similar_products_wrapp .catalog_item:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}
.tabs_content .image_wrapper_block,
.similar_products_wrapp .image_wrapper_block {
margin-bottom: 12px;
border-radius: var(--v2-radius-lg);
overflow: hidden;
background: var(--v2-gray);
}
.tabs_content .image_wrapper_block .thumb,
.similar_products_wrapp .image_wrapper_block .thumb {
display: block;
position: relative;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
/* ⚠️ Фотографии в этих блоках приходят из компонента с атрибутами
`width="0" height="0"` — так на боевом сайте и в старом шаблоне тоже,
поэтому карусель «Популярные» стоит без картинок. Лечим стилями:
атрибуты задают лишь собственный размер, CSS его перекрывает. */
.tabs_content .image_wrapper_block img,
.similar_products_wrapp .image_wrapper_block img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.tabs_content .catalog_item .item-title a,
.similar_products_wrapp .catalog_item .item-title a {
color: var(--v2-brand);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
.tabs_content .catalog_item .item-title a:hover,
.similar_products_wrapp .catalog_item .item-title a:hover {
text-decoration: underline;
}
/* Ритм главной: одинаковый вертикальный воздух между разделами. У темы он
набирается разнородными отступами блоков, поэтому задаём его на уровне
секций. */
/* ⚠️ Отступ вешаем на сами блоки, а не на обёртки `.wrapper_inner`: на
главной три такие обёртки пустые (остатки отключённых блоков), и с
padding на них между разделами появлялась дыра почти в 300px. */
body#main .wrapper > .wrapper_inner.wides,
body#main .wrapper > .wrapper_inner > .similar_products_wrapp,
body#main .wrapper > .wrapper_inner > .news_akc_block,
body#main .wrapper > .grey_bg {
padding-top: 48px;
padding-bottom: 48px;
}
body#main .wrapper > .cl_block_headderbanner {
padding-top: 16px;
padding-bottom: 0;
}
body#main .wrapper > .grey_bg {
background: var(--v2-bg);
}
/* Разделитель-«hr» темы между подписью и блоком новостей в новой раскладке
лишний: разделы и так отбиты воздухом. */
body#main .wrapper hr.grey {
display: none;
}
/* Редакторский блок: фото слева, текст справа, как в макете. */
body#main .grey_bg .wrap_md > .md-50.img img {
display: block;
width: 100%;
height: auto;
border-radius: var(--v2-radius-xl);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}
/* Подпись в блоке подписки тема прижимает вправо — в макете текст слева. */
.subscribe_wrap .subscribe-form .wrap_bg,
.subscribe_wrap .subscribe-form .text,
.subscribe_wrap .subscribe-form .title,
.subscribe_wrap .subscribe-form .more {
text-align: left;
}
/* ⚠️ Серую подложку держит сам кадр 4:3, а не обёртка: обёртка выше
кадра (в ней ещё скрытые блоки цены), и её фон торчал серой полосой
под каждым снимком. */
.tabs_content .image_wrapper_block,
.similar_products_wrapp .image_wrapper_block {
background: none;
}
.tabs_content .image_wrapper_block .thumb,
.similar_products_wrapp .image_wrapper_block .thumb {
border-radius: var(--v2-radius-lg);
overflow: hidden;
background: var(--v2-gray);
}
/* Статьи -------------------------------------------------------------------
Карточка: фото сверху, ниже дата, заголовок и анонс — как в макете. */
.news_akc_block .news_slider_wrapp .item {
box-sizing: border-box;
padding: 0;
border: 1px solid var(--v2-gray);
border-radius: var(--v2-radius-xl);
background: var(--v2-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
overflow: hidden;
transition: box-shadow var(--v2-transition);
}
.news_akc_block .news_slider_wrapp .item:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}
.news_akc_block .news_slider_wrapp .item .img {
margin: 0;
background: var(--v2-gray);
}
.news_akc_block .news_slider_wrapp .item .img a {
display: block;
aspect-ratio: 16 / 9;
}
.news_akc_block .news_slider_wrapp .item .img img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transition: transform var(--v2-transition);
}
.news_akc_block .news_slider_wrapp .item:hover .img img {
transform: scale(1.04);
}
.news_akc_block .news_slider_wrapp .item .info,
.news_akc_block .news_slider_wrapp .item .text {
padding: 20px;
}
.news_akc_block .news_slider_wrapp .item .date {
margin-bottom: 12px;
color: #9ca3af;
font-size: 12px;
}
.news_akc_block .news_slider_wrapp .item .name a,
.news_akc_block .news_slider_wrapp .item .title a {
color: var(--v2-brand);
font-size: 16px;
font-weight: 700;
line-height: 1.35;
}
.news_akc_block .news_slider_wrapp .item .name a:hover,
.news_akc_block .news_slider_wrapp .item .title a:hover {
text-decoration: underline;
}
.news_akc_block .news_slider_wrapp .item .preview,
.news_akc_block .news_slider_wrapp .item .previewtext {
margin-top: 10px;
color: var(--v2-text-light);
font-size: 14px;
line-height: 1.5;
}
/* --- 12. Контакты ----------------------------------------------------------
Слева карточка с телефоном и почтой, справа — врезка о сайте и форма
обратной связи. Разметка компонентов не трогается, только оформление. */
body#main .contacts_left,
body#main .contacts_right {
float: none;
width: auto;
margin: 0;
padding: 0;
}
@media (min-width: 1024px) {
/* Общей обёртки у двух колонок нет, родитель на разных страницах
разный — поэтому не сетка на родителе, а инлайн-блоки фиксированной
доли: так колонки живут в любом контейнере. */
body#main .contacts_left {
display: inline-block;
vertical-align: top;
width: 340px;
margin-right: 32px;
}
body#main .contacts_right {
display: inline-block;
vertical-align: top;
width: calc(100% - 380px);
}
}
/* Карточка контактов. */
body#main .contacts_left .store_description {
box-sizing: border-box;
padding: 24px;
border: 1px solid var(--v2-gray);
border-radius: var(--v2-radius-xl);
background: var(--v2-surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
body#main .store_description .store_property {
margin: 0 0 20px;
padding: 0;
border: 0;
}
body#main .store_description .store_property:last-child {
margin-bottom: 0;
}
body#main .store_description .store_property .title {
margin: 0 0 4px;
color: var(--v2-text-light);
font-size: 13px;
text-transform: uppercase;
letter-spacing: .03em;
}
body#main .store_description .store_property .value,
body#main .store_description .store_property .value a {
color: var(--v2-text);
font-size: 18px;
font-weight: 700;
line-height: 1.4;
}
body#main .store_description .store_property .value a:hover {
color: var(--v2-brand);
}
/* Значки перед ссылками — по типу ссылки, а не по порядку блоков:
порядок в include-области может поменяться. */
body#main .store_description .value a[href^="tel:"]::before,
body#main .store_description .value a[href^="mailto:"]::before {
content: '';
display: inline-block;
vertical-align: -2px;
width: 16px;
height: 16px;
margin-right: 10px;
background: var(--v2-brand);
-webkit-mask: var(--v2-icon-phone) center / 16px 16px no-repeat;
mask: var(--v2-icon-phone) center / 16px 16px no-repeat;
}
body#main .store_description .value a[href^="mailto:"]::before {
-webkit-mask-image: var(--v2-icon-envelope);
mask-image: var(--v2-icon-envelope);
}
/* Врезка «Интернет-каталог…» — акцентная цитата в фирменной рамке,
как блок «Старейший каталог» на главной в макете. */
body#main .contacts_right blockquote {
margin: 0 0 24px;
padding: 20px 24px;
border: 1px solid rgba(249, 115, 22, .2);
border-radius: var(--v2-radius-xl);
background: rgba(255, 237, 213, .5);
color: var(--v2-text-muted);
font-size: 15px;
font-style: normal;
line-height: 1.6;
}
/* Форма обратной связи — серая карточка, поля как в форме отзыва. */
body#main .contacts_right .form.inline {
box-sizing: border-box;
margin: 0;
padding: 24px;
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius-lg);
background: var(--v2-bg);
}
body#main .contacts_right .form_head h4 {
margin: 0 0 16px;
color: var(--v2-text);
font-size: 18px;
font-weight: 700;
}
/* ⚠️ Правую половину тема кладёт АБСОЛЮТОМ (`.form .form_right
{position:absolute; left:56%}`), а не флоатом — без сброса позиции
поля имени и телефона наезжали на textarea сбоку. Складываем колонкой:
поля по очереди, во всю ширину. */
body#main .contacts_right .form_body .form_left,
body#main .contacts_right .form_body .form_right {
position: static;
float: none;
width: auto;
padding: 0;
}
body#main .contacts_right .form-control {
margin: 0 0 16px;
/* ⚠️ Тема заливает каждый form-control белым — на серой карточке это
выглядело белыми полосами во всю ширину за каждым лейблом. */
background: none;
padding: 0;
border: 0;
}
/* Согласие на обработку данных: чекбокс в одну строку с текстом, слева.
В разметке текстовый label идёт ПЕРЕД чекбоксом — переставляем флексом.
Второй label (пустой, для стилизации темы) в строке не участвует.
Без поддержки :has блок остаётся столбиком — не сломан, просто менее
красив. */
body#main .contacts_right .form-control:has(input[type="checkbox"]) {
display: flex;
align-items: flex-start;
gap: 10px;
}
body#main .contacts_right .form-control:has(input[type="checkbox"]) > label:first-child {
order: 2;
margin: 0;
}
body#main .contacts_right .form-control input[type="checkbox"] {
order: 1;
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 1px 0 0;
accent-color: var(--v2-brand);
}
/* Капче тема пишет инлайновое `width: 25%` — на узких контейнерах виджет
сжимался. 302px — родной размер чекбокса Яндекса. */
body#main .contacts_right .smart-captcha {
width: 302px !important;
max-width: 100%;
}
body#main .contacts_right .form-control label {
display: block;
margin-bottom: 6px;
color: var(--v2-text-light);
font-size: 14px;
}
body#main .contacts_right .form-control label .star {
color: #ef4444;
}
body#main .contacts_right .form-control input[type="text"],
body#main .contacts_right .form-control input[type="tel"],
body#main .contacts_right .form-control input[type="email"],
body#main .contacts_right .form-control textarea {
width: 100%;
box-sizing: border-box;
padding: 10px 16px;
border: 1px solid #d1d5db;
border-radius: var(--v2-radius-sm);
background: var(--v2-surface);
color: var(--v2-text);
font-family: inherit;
font-size: 14px;
line-height: 1.5;
}
body#main .contacts_right .form-control textarea {
min-height: 120px;
resize: vertical;
}
body#main .contacts_right .form-control input:focus,
body#main .contacts_right .form-control textarea:focus {
outline: none;
border-color: var(--v2-brand);
box-shadow: 0 0 0 1px var(--v2-brand);
}
/* Капче нужен запас высоты — тот же приём, что в форме отзыва: контейнер
с height:0 схлопывает iframe чекбокса в ноль. */
body#main .contacts_right .smart-captcha {
min-height: 100px;
margin-bottom: 16px;
}
body#main .contacts_right .form_footer {
display: flex;
gap: 12px;
margin-top: 4px;
}
body#main .contacts_right .form_footer input[type="submit"] {
padding: 11px 32px;
border: 0;
border-radius: var(--v2-radius-sm);
background: var(--v2-brand);
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
transition: background var(--v2-transition);
}
body#main .contacts_right .form_footer input[type="submit"]:hover {
background: var(--v2-brand-hover);
}
body#main .contacts_right .form_footer button[type="reset"] {
padding: 11px 24px;
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius-sm);
background: var(--v2-surface);
color: var(--v2-text-light);
font-family: inherit;
font-size: 14px;
cursor: pointer;
transition: color var(--v2-transition), border-color var(--v2-transition);
}
body#main .contacts_right .form_footer button[type="reset"]:hover {
border-color: var(--v2-brand);
color: var(--v2-brand);
}
body#main .contacts_right .form_footer button[type="reset"] span {
font: inherit;
color: inherit;
}
/* На телефоне обе колонки во всю ширину, контакты над формой. */
@media (max-width: 1023.98px) {
body#main .contacts_left {
margin-bottom: 24px;
}
}