/* 3drops: серверные характеристики в карточках каталога, без AJAX. */ .product-thumb__caption { /* v3.0.6: было overflow:hidden - страховка от переполнения фиксированной коробки. Коробка больше не фиксированная, переполняться нечему, а hidden теперь только мешал бы блоку вырасти под содержимое. */ overflow: visible !important; } .product-thumb__name { flex: 0 0 auto !important; min-height: auto !important; margin-bottom: 6px !important; } .product-thumb__description.attribute { display: block !important; flex: 0 0 auto !important; margin: 0 0 10px !important; white-space: pre-line !important; font-size: 13px !important; line-height: 1.4 !important; visibility: visible !important; opacity: 1 !important; } .product-thumb__description.attribute .product-thumb__attribute-value { display: inline !important; visibility: visible !important; opacity: 1 !important; } .product-thumb__description.attribute .product-thumb__attribute-value::before, .product-thumb__description.attribute .product-thumb__attribute-value::after { display: none !important; content: none !important; } /* v3.0.6 - убираем фиксированную высоту блока характеристик. Что было не так у v3.0.5. Тема задаёт блоку height/min/max = 100px и overflow:hidden, и при пяти характеристиках содержимое (109px) не влезало - пятая строка резалась. v3.0.5 поднимала блок на строку вверх и на столько же увеличивала высоту. Обрезка на ПК уходила, но появлялись две беды: 1. Текст уезжал вверх, а низ блока оставался на месте - пустота под характеристиками росла на 18px у ВСЕХ карточек. Замер: при 1 характеристике дыра 96 -> 114px, при 2 - 78 -> 96px, при 4 - 41 -> 59px. Кнопка "В корзину" визуально отрывалась. 2. На узких экранах значение вида "Подача, макс.: 188.5 м³/ч" переносится на две строки, пять характеристик занимают семь строк, и обрезка возвращалась. Решение. Не подбирать высоту под содержимое, а перестать её задавать: блок растёт под текст, а строка с ценой прижимается к низу карточки через margin-top:auto. Обрезка становится структурно невозможной - фиксированной высоты, о которую можно обрезаться, больше нет ни при какой ширине, шрифте и числе переносов. Выравнивание сохраняется: карточки в ряду тянутся до одной высоты, а цена и кнопка прижаты к низу, поэтому в пределах ряда они совпадают до пикселя. Проверено на живой странице /konsolnye-nasosy/?page=5 (25 карточек, замер по всем): 1440 / 1520 / 1280 / 768 / 390 / 360 px, сетка и список, а также страница, где у карточек характеристик нет вовсе. Обрезанных карточек 0. Рядов с разной высотой карточек или разным положением цены - 0. Дыра под характеристиками стала МЕНЬШЕ, чем была изначально: при 1 характеристике 96 -> 50px, при 2 - 78 -> 59px, при 4 - 41 -> 32px. На скорость не влияет: правка чисто в CSS, новых запросов, шрифтов и скриптов нет, содержимое приходит в первом HTML-ответе, поэтому скачков вёрстки (CLS) не добавляется. */ .product-thumb__description.attribute { height: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 0 !important; } .product-thumb__price-cart { margin-top: auto !important; } /* v3.0.8 - название товара: не режется и не ломает выравнивание. Дефект темы: .product-thumb__name задан height/min/max = 65px при line-height 20px, то есть 3.25 строки. Название в четыре строки режется посередине четвёртой. Проверено отключением всего нашего CSS - обрезка та же, значит дефект не наш. Почему v3.0.7 была неверной. Она снимала высоту совсем, название занимало сколько нужно - обрезка уходила, но высота названий становилась разной, и характеристики в соседних карточках ряда начинались с разных уровней. Замер на /kanalizatsionnye-stantsii/, 390px: 2 ряда из 11 с разъехавшимися характеристиками. Решение: фиксированная высота, но в ЦЕЛЫХ строках и с запасом. На узких экранах - ровно 5 строк (100px при line-height 20px). Половины строки не бывает по построению; -webkit-line-clamp: 5 страхует на случай ещё более длинного названия - тогда будет многоточие, а не обрез букв. Почему именно 5 строк. Замер на 390px по пяти категориям, сколько строк занимают названия: циркуляционные 3 стр - 10, 4 стр - 5, 5 стр - 10 (максимум 5) скважинные 2 стр - 3, 3 стр - 8, 4 стр - 14 (максимум 4) дренажные 2 стр - 23, 3 стр - 1, 4 стр - 1 (максимум 4) фекальные 2 стр - 15, 3 стр - 9, 4 стр - 1 (максимум 4) КНС 3 стр - 8, 4 стр - 2, 5 стр - 12 (максимум 5) Пяти строк хватает везде, ни одно название не обрезается. Уменьшение шрифта до 13px не помогает - проверено, названия всё равно занимают 5 строк, поэтому типографику темы не трогаем. На ширине 768px и выше правило НЕ применяется: там карточка шире, названия занимают 2-3 строки и спокойно помещаются в 65px темы - проверено на 768, 1024 и 1440px, обрезанных названий ноль. Значит, десктоп остаётся стоковым. Замер на 390px после правки: обрезанных названий 0, рядов с разным уровнем характеристик 0, высота карточек внутри ряда одинаковая. */ @media (max-width: 767px) { .product-thumb__name { line-height: 18px !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } } /* v3.1.0 - карточки в каруселях на главной перестают прыгать. Что было. После того как блок характеристик стал расти под содержимое (v3.0.6), высота карточки зависит от числа характеристик. В сетке категории это незаметно: колонки ряда тянутся до одной высоты, и карточка заполняет колонку. А в карусели owl каждый слайд живёт сам по себе - замер на главной, блок "Новинки", 390px: 30 карточек и ПЯТЬ разных высот (429, 448, 484, 520, 538), поэтому при перелистывании цена и кнопка скачут. Причина точная: .owl-stage - флекс-контейнер с align-items: stretch, но слайды до его высоты не растягивались, а карточка внутри слайда не наследовала высоту. Решение: слайд с товаром тянется на всю высоту ленты, карточка заполняет слайд. Дальше работает то же, что и в сетке: цена прижата к низу, поэтому цены и кнопки во всех карточках карусели встают на один уровень. Селектор намеренно сужен через :has(> .product-thumb) - правило применяется только к слайдам, внутри которых лежит карточка товара. Карусели баннеров не затрагиваются: проверено, их высоты (350; 189/209/229; 160/165/184; 275/315/335) до и после совпали. Если браузер не понимает :has(), правило просто не применится и поведение останется прежним - сломать оно ничего не может. Замер на главной, 390px, блок "Новинки": высот карточек 5 -> 1 (все 538px), высот слайдов 5 -> 1 (все 548px). */ .owl-item:has(> .product-thumb) { align-self: stretch !important; height: auto !important; } .owl-item > .product-thumb { height: 100% !important; } /* v3.1.1 - резерв под название уменьшен с 5 строк до 4, интервал с 20px до 18px. Причина. Владелец: пустого места слишком много, у конкурента mircli.ru такого нет. Разобрал их вёрстку: название жёстко 54px при line-height 18px, то есть ровно 3 строки, плюс -webkit-line-clamp: 3. Длинные названия у них заканчиваются многоточием - из 6 замеренных карточек 4 обрезаны. Характеристики у них начинаются на одном уровне именно потому, что название фиксировано. Тот же приём, что и у нас, разница только в числе строк: у нас было 5, у них 3. Замер на 390px по трём категориям - пустота под названием и число многоточий: вариант консольные циркуляционные КНС 5 строк x20 57px / 0 28px / 0 24px / 0 5 строк x18 ~50px / 0 25px / 0 22px / 0 4 строки x18 33px / 0 14px / 10 из 25 13px / 12 из 22 3 строки x18 15px / 0 6px / 15 из 25 6px / 14 из 22 Выбраны 4 строки: пустота на консольных падает с 57 до 33px, а многоточие появляется только у самых длинных названий. Три строки отвергнуты сознательно: у нас модель стоит В КОНЦЕ названия, и при трёх строках десяток карточек в категории стали бы визуально неразличимы - у конкурента названия короче, поэтому им это не мешает. Уровни при любом варианте остаются ровными: высота названия фиксирована, значит характеристики во всех карточках ряда начинаются одинаково. На 768px и выше правило не применяется - там стоковое поведение темы. */ /* v3.3.0 - подпись и значение стали настоящими элементами: значения по правому краю, между ними пунктир, двоеточие убрано. Почему разметка собирается в модели, а не в шаблоне. Шаблон uni_attributes.twig подключается через {% include %}, а движок Twig на этом сайте читает такие шаблоны из оригинальной папки темы, минуя каталог модификаций. Править их через OCMOD бесполезно - проверено на версии 3.2.0, файл в модификациях появился, а сайт его не прочитал. Зато движок работает с autoescape => false, поэтому HTML, положенный в значение характеристики, рендерится как разметка. Проверено также, что потребитель этих данных один - карточки каталога. Что получается в HTML: Напряжение 380 В Внешний span становится строкой, внутренние - подписью и значением. Двоеточие исчезает само: поле name у характеристики теперь пустое, и шаблон его не печатает. Страховка. Все правила включаются только при наличии наших классов (через :has). Если операция над моделью не применится - вид останется прежним. Если не загрузится CSS - строка прочитается как "Напряжение 380 В": между элементами стоит обычный пробел. Ширина строки ограничена 360px: в списочном виде блок 753px, и без ограничения пунктир растянулся бы примерно на 600px - полоса через всю карточку вместо связки. Мобильный: пунктира нет (карточка около 155px, места нет), двоеточие возвращается через CSS, значение идёт сразу за подписью. */ .product-thumb__description.attribute:has(.three-drops-spec__name) { white-space: normal !important; } .product-thumb__description.attribute .product-thumb__attribute-value:has(.three-drops-spec__name) { display: flex !important; align-items: baseline; gap: 6px; max-width: 360px; } .three-drops-spec__name { /* Тема задаёт hyphens: auto, из-за чего подпись рвалась по слогам: "Напряже-ние", "Мощ-ность". Отключаем переносы по слогам и запрещаем подписи сжиматься - переносится длинное значение, а не подпись. Замер на карточке товара, блок 281px: подписей с переносом 8 -> 0, правые края значений остались ровными. */ flex: 0 0 auto; hyphens: none; -webkit-hyphens: none; } .three-drops-spec__value { order: 2; flex: 0 1 auto; text-align: right; } .product-thumb__description.attribute .product-thumb__attribute-value:has(.three-drops-spec__name)::before { /* content и display обязаны быть с !important: выше в этом же файле псевдоэлементы у значения погашены правилом с !important (оно убирает разделители темы). Важность бьёт специфичность, поэтому без !important пунктир не рисуется - проверено, ушло полчаса на поиск. */ content: "" !important; display: block !important; order: 1; flex: 1 1 auto; min-width: 10px; align-self: center; border-bottom: 1px dotted rgba(0, 0, 0, 0.28); } @media (max-width: 767px) { .three-drops-spec__name::after { content: ":"; } .three-drops-spec__name { /* На узкой карточке подписи разрешаем сжиматься: длинная подпись вроде "Защита от сухого хода" иначе вытеснила бы значение. */ flex: 0 1 auto; min-width: 0; } .three-drops-spec__value--num { /* Только измерения. "138 м³/ч" браузер переносит по косой черте, и "ч" уезжает на вторую строку. Текстовым значениям перенос оставлен: без него "Поплавковый выключатель" вылезает за край карточки - замер на карточке товара дал 8 переполненных строк. */ white-space: nowrap; } .product-thumb__description.attribute .product-thumb__attribute-value:has(.three-drops-spec__name) { /* Зазоры ужаты, чтобы подписи реже переносились: замер на главной, 390px - подписей с переносом 54 -> 36. */ gap: 3px; } .product-thumb__description.attribute .product-thumb__attribute-value:has(.three-drops-spec__name)::before { min-width: 4px; } } /* v3.3.1 - две правки по мобильному. 1. Числовые значения больше не рвутся. "138 м³/ч" браузер переносил по косой черте, и "ч" уезжала на вторую строку. Класс для таких значений ставит модель: признак - наличие цифры. Запрещать перенос всем значениям нельзя, проверено: текстовые вроде "Поплавковый выключатель" тогда вылезают за край карточки (8 переполненных строк на карточке товара). 2. Пунктир на мобильном оставлен по решению владельца. В v3.3.0 у правила, которое его скрывало, не было !important, поэтому он и так показывался - правило удалено как мёртвое, чтобы не вводить в заблуждение. Замеры, 390px: главная - числовых значений с переносом 38 -> 0, переполненных строк 0, подписей с переносом 54 -> 36 (после ужатия зазоров), высота блока 91 -> 73px. карточка товара, похожие - числовых с переносом 3 -> 0, переполненных строк 2 -> 0 (был дефект и до нас), подписей 12 -> 11. Текстовые значения переносятся по-прежнему - так и задумано. */ /* v3.4.2 - списочные виды каталога: «Список» и «Компактный». Собрано от v3.3.1: правки версий 3.4.0 и 3.4.1 не наслаиваются, вместо трёх блоков один связный. ЗАЧЕМ. Владелец прислал скриншоты: в обоих списочных видах вёрстка поехала - картинка во всю ширину над названием, характеристики узким столбиком, вокруг пустота. ЧЬЯ ЭТО БЕДА. Не наша: с отключённым этим файлом ровно то же самое. Тема умеет раскладывать эти виды правильно, у неё есть .list-view .product-thumb{flex-direction:row} .compact-view .product-thumb{flex-direction:row;align-items:center} .compact-view .product-thumb__description{display:none} но в пользовательских стилях сайта (админка, попадают в хвост merged.*.min.css и в generated-user-style.0.css) лежит блок «ЖЕСТКИЙ КАРКАС КАРТОЧКИ»: .product-thumb,.owl-item{display:flex!important;flex-direction:column!important;height:100%!important} .product-thumb__name{height:65px!important;...} .product-thumb__description{height:100px!important;overflow:hidden!important;display:block!important} Специфичность у него ниже (0,1,0 против 0,2,0), но !important бьёт специфичность, и режимные правила темы не работают. Этот же блок - источник обрезки характеристик и названия, ради которых делались версии 3.0.5-3.1.1. ПОЧЕМУ ЧИНИМ ЗДЕСЬ, А НЕ В АДМИНКЕ. Проверено измерением: если приписать блоку .grid-view, его специфичность вырастет до (0,2,0), он станет сильнее правил этого файла, height:100px вернётся, и карточка в сетке вырастет 495 -> 531px. То есть «убрать первопричину» ломает то, что на ней построено. Здесь же селекторы .list-view / .compact-view заведомо сильнее блока, а в сетку и карусели не заходят. ЭТАЛОН. Компактный вид сверен с демо темы unishop2.top/hometechnic/appliances, 390px: карточка 72px, .product-thumb и .product-thumb__caption - строка, картинка display:none, название тянется, цена и кнопка справа, кнопка 40px без подписи (span display:none). Наш результат: 74px, кнопка 40px. ГРАНИЦЫ. Компактный вид - строка на всех ширинах, как на эталоне. Список - раскладка «картинка слева» только от 768px: на 390px картинка 240px не влезает, замер показал 25 карточек за краем экрана и высоты 309/291. На мобильном список остаётся колонкой, но фото и название по центру - по просьбе владельца. ЗАМЕРЫ, /nasosnye-stantsii/ и /drenazhnye-nasosy/, 25 карточек: Компактный 390: 227 -> 74/92, кнопка 28 -> 40px, характеристики скрыты 360: 74/92/110, 320: 92/110/128 - за краем 0, обрезано названий 0 1440: 136, подпись на кнопке на месте - не изменился Список 390: 421, картинка по центру (119px слева, 119px справа), название по центру 1440: 292, картинка 240x260 слева - не изменился Сетка 390: 448/466, 1440: 495/496 - не изменилась Карусели 1440: карточки 493 / слайды 513 - не изменились Везде: карточек за краем 0, рядов с разной высотой 0, обрезано названий 0, обрезано характеристик 0, разброс правых краёв значений внутри карточки 0. */ /* ---------- КОМПАКТНЫЙ ВИД: строка на всех ширинах, как в стоковой теме ---------- */ .compact-view .product-thumb { flex-direction: row !important; align-items: center !important; } .compact-view .product-thumb__caption { flex-direction: row !important; align-items: center !important; } /* Название тянется на свободное место. Кроме высоты приходится снимать -webkit-line-clamp и overflow: замер показал, что именно они, а не height, держали название в 4 строках и резали его на узком экране. Проверено пробой: height:auto один ничего не менял, 72px оставались; с clamp и overflow высота стала 90px и обрезка ушла. */ .compact-view .product-thumb__name { flex: 1 1 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; -webkit-line-clamp: initial !important; overflow: visible !important; } .compact-view .product-thumb__name a { -webkit-line-clamp: initial !important; display: block !important; } /* Характеристики в компактном виде тема прячет сама; кастомный блок это отменял. */ .compact-view .product-thumb__description, .compact-view .product-thumb__description.attribute { display: none !important; } /* ---------- МОБИЛЬНЫЙ ---------- */ @media (max-width: 767px) { /* Кнопка «В корзину» без подписи, как на эталоне. Тема даёт ей 28px - для пальца мало, на эталоне 40. Подпись не возвращаем: на эталоне её нет, а места на 320px в строке с ценой уже впритык. */ .compact-view .product-thumb__add-to-cart { min-width: 40px !important; } /* Модели вида «НИМС-4м3/ч-30м-900Вт-ПК» не имеют пробелов и на 320px распирали карточку: замер дал одну карточку за краем экрана. */ .compact-view .product-thumb__name { overflow-wrap: anywhere !important; } /* Списочный вид: фото и название по центру - решение владельца 02.09.2026. */ .list-view .product-thumb__image { margin-left: auto !important; margin-right: auto !important; } .list-view .product-thumb__name { text-align: center !important; } } /* ---------- СПИСОЧНЫЙ ВИД ОТ 768px: картинка слева, текст справа ---------- */ @media (min-width: 768px) { .list-view .product-thumb { flex-direction: row !important; } .list-view .product-thumb__image { flex: 0 0 240px !important; max-width: 240px !important; } .list-view .product-thumb__name { flex: 0 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; } .list-view .product-thumb__name a { -webkit-line-clamp: initial !important; display: block !important; } .list-view .product-thumb__description, .list-view .product-thumb__description.attribute { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; } }