/* ============================================================ iFLOW — блок «Ранее вы смотрели» (v1, 2026-08-12) Блок стоит внизу всех страниц и до сих пор выглядел чужим: серая подложка, белые карточки без рамок и теней, подписи вплотную. Приводим к тому же виду, что каталог и услуги: светлая карточка, мягкая тень, подъём при наведении, спокойное появление. Разметку не трогаем — только оформление. Откат: снять подключение iflow_viewed.css в iflow_seo.php. ============================================================ */ .viewed_product_block { --ivw-navy: #0f2340; --ivw-blue: #1457c8; --ivw-blue-2: #365edc; --ivw-line: #e3ecf8; --ivw-muted: #66788f; --ivw-ease: cubic-bezier(.22, .61, .36, 1); background: linear-gradient(180deg, #f7fafd, #eef4fb) !important; border-top: 1px solid var(--ivw-line); padding: 30px 0 34px !important; } /* заголовок — как у остальных блоков сайта */ .viewed_product_block .viewed-wrapper > h3 { margin: 0 0 18px !important; color: var(--ivw-navy) !important; font-size: 22px !important; font-weight: 700; letter-spacing: -.2px; position: relative; padding-left: 14px; } .viewed_product_block .viewed-wrapper > h3::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 20px; margin-top: -10px; border-radius: 3px; background: linear-gradient(180deg, var(--ivw-blue-2), var(--ivw-blue)); } /* карточка товара */ .viewed_product_block .item_block, .viewed_product_block .catalog_item { border: 1px solid var(--ivw-line) !important; border-radius: 14px !important; background: #fff !important; overflow: hidden; box-shadow: 0 2px 8px -6px rgba(15, 35, 64, .3) !important; transition: transform .2s var(--ivw-ease), box-shadow .2s var(--ivw-ease), border-color .2s var(--ivw-ease); } .viewed_product_block .item_block:hover, .viewed_product_block .catalog_item:hover { transform: translateY(-3px); border-color: #bcd3f4 !important; box-shadow: 0 16px 28px -18px rgba(15, 35, 64, .45) !important; } /* картинка: одинаковое поле, товар вписывается целиком */ .viewed_product_block .image, .viewed_product_block .image_block { display: flex; align-items: center; justify-content: center; padding: 6px; background: #fbfcfe; border-radius: 10px; } .viewed_product_block .image img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .3s var(--ivw-ease); } .viewed_product_block .item_block:hover .image img { transform: scale(1.05); } /* название и цена */ .viewed_product_block .item-title a, .viewed_product_block .title a { color: var(--ivw-navy) !important; font-size: 13.5px; line-height: 1.4; transition: color .18s var(--ivw-ease); } .viewed_product_block .item_block:hover .item-title a, .viewed_product_block .item_block:hover .title a { color: var(--ivw-blue) !important; } .viewed_product_block .price, .viewed_product_block .cost { color: var(--ivw-muted) !important; font-weight: 600 !important; font-size: 13px; } /* стрелки карусели — круглые кнопки в тон сайту */ .viewed_product_block .owl-nav button, .viewed_product_block .owl-prev, .viewed_product_block .owl-next { width: 38px !important; height: 38px !important; border: 1px solid var(--ivw-line) !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 4px 12px -6px rgba(15, 35, 64, .4) !important; transition: background .2s var(--ivw-ease), border-color .2s var(--ivw-ease), transform .2s var(--ivw-ease); } .viewed_product_block .owl-nav button:hover, .viewed_product_block .owl-prev:hover, .viewed_product_block .owl-next:hover { background: linear-gradient(135deg, var(--ivw-blue-2), var(--ivw-blue)) !important; border-color: transparent !important; transform: scale(1.06); } .viewed_product_block .owl-nav button:hover svg path, .viewed_product_block .owl-prev:hover svg path, .viewed_product_block .owl-next:hover svg path { fill: #fff !important; } /* карточки проявляются лесенкой, когда блок попадает в поле зрения */ @media (prefers-reduced-motion: no-preference) { .viewed_product_block .owl-item { animation: ivw-in .45s var(--ivw-ease) backwards; } .viewed_product_block .owl-item:nth-child(1) { animation-delay: .03s; } .viewed_product_block .owl-item:nth-child(2) { animation-delay: .08s; } .viewed_product_block .owl-item:nth-child(3) { animation-delay: .13s; } .viewed_product_block .owl-item:nth-child(4) { animation-delay: .18s; } .viewed_product_block .owl-item:nth-child(n+5) { animation-delay: .23s; } @keyframes ivw-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } } @media (max-width: 767px) { .viewed_product_block { padding: 22px 0 26px !important; } .viewed_product_block .viewed-wrapper > h3 { font-size: 18px !important; } } /* ---------- настоящая разметка карточек этого блока ---------- Aspro рисует их не как товары каталога, а своим компактным блоком: .block-item > .item_wrap > .block-item__inner > .block-item__image Поэтому оформление вешаем на эти классы. */ .viewed_product_block .block-item { border: 1px solid var(--ivw-line) !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 2px 8px -6px rgba(15, 35, 64, .3) !important; transition: transform .2s var(--ivw-ease), box-shadow .2s var(--ivw-ease), border-color .2s var(--ivw-ease); } .viewed_product_block .block-item:hover { transform: translateY(-3px); border-color: #bcd3f4 !important; box-shadow: 0 16px 28px -18px rgba(15, 35, 64, .45) !important; } .viewed_product_block .block-item__image { border-radius: 10px; background: #fbfcfe; overflow: hidden; } .viewed_product_block .block-item__image img { object-fit: contain; transition: transform .3s var(--ivw-ease); } .viewed_product_block .block-item:hover .block-item__image img { transform: scale(1.06); } .viewed_product_block .block-item .item-title a, .viewed_product_block .block-item .title a { color: var(--ivw-navy) !important; transition: color .18s var(--ivw-ease); } .viewed_product_block .block-item:hover .item-title a, .viewed_product_block .block-item:hover .title a { color: var(--ivw-blue) !important; } /* ============================================================ iFLOW — «Ранее вы смотрели», v2 (2026-08-12) Разбор ряда карточек. Разметку сверил по шаблону Aspro: .block-item > .block-item__wrapper > .block-item__inner > .block-item__image > a.thumb.shine > img.lazy — внутри поля картинки только ссылка с картинкой, ни спиннера, ни абсолютных наложений, ни кнопки быстрого просмотра. Поэтому центрировать содержимое поля безопасно. ============================================================ */ /* ---------- поле картинки ---------- */ /* Картинки приходят из resize_cache 110_110_1 с разными пропорциями: высокие упирались в край плашки и им срезало углы, низкие (41px) висели посреди пустого поля. Ряд читался рваным — это и есть тот «разнобой размеров», который видно первым. Центрирование держалось на унаследованном line-height и промахивалось на 1,5–3px. Габарит 90×90 у Aspro задан по border-box, поэтому внутреннее поле его не меняет и ширину .owl-item пересчитывать не нужно. Ограничения max-width/max-height картинке уже задают и Aspro, и правило выше по файлу — здесь не повторяем. */ .viewed_product_block .block-item__image { display: flex; align-items: center; justify-content: center; padding: 8px; line-height: 0; } .viewed_product_block .block-item__image .thumb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* ---------- название ---------- */ /* height:53px при строке 19,2px = 2,76 строки: текст обрывался ровно посреди третьей строки, у букв срезало нижнюю половину, многоточия не было — и так во всех восьми карточках. Отдаём три полные строки с многоточием. Высоту карточки держит не заголовок, а плашка картинки (14+90+14=120px): три строки (58px) плюс статус (22px) укладываются в те же 90px. */ .viewed_product_block .viewed-wrapper .block-item__title { height: auto; max-height: none; overflow: visible; } .viewed_product_block .block-item__title a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } /* ---------- цвет названия ---------- */ /* Правила выше по файлу написаны на .item-title и .title — таких классов в разметке этого блока нет, поэтому самый заметный текст блока так и остался чужим серым, третьим оттенком рядом с заголовком и статусом. Aspro красит именно вложенный span, поэтому он в селекторе. */ .viewed_product_block .block-item__title a, .viewed_product_block .block-item__title a span { color: var(--ivw-navy); transition: color .18s var(--ivw-ease); } .viewed_product_block .block-item:hover .block-item__title a, .viewed_product_block .block-item:hover .block-item__title a span { color: var(--ivw-blue); } /* ---------- «Под заказ» ---------- */ /* Это состояние, а не цена, но набрано оно как цена и почти той же кеглей, что название: восемь одинаковых серых строк подряд спорили с названиями. Делаем тихую плашку-статус. Собственный отступ не добавляем — Aspro уже даёт .price.only_price margin-top:8px, и лишние миллиметры вывели бы содержимое за 90px, которые держит картинка. !important — перебиваем собственное правило .viewed_product_block .price выше по файлу, оно объявлено с !important. */ .viewed_product_block .block-item__cost .price.only_price { display: inline-block; padding: 2px 10px; border-radius: 8px; background: #e9f0fa; color: var(--ivw-blue) !important; font-size: 11.5px !important; line-height: 18px; } /* ---------- скругление карточки ---------- */ /* Белая подложка .block-item__wrapper с прямыми углами занимает всю внутреннюю площадь и рисуется поверх рамки родителя — дуга скругления забивалась, и по углам карточки читались четыре надлома. На светло-голубой подложке блока это заметно. Тень рисуется снаружи box и обрезкой не задевается. */ .viewed_product_block .block-item { overflow: hidden; } .viewed_product_block .block-item__wrapper { border-radius: 13px; } /* 14px минус 1px рамки */ /* ---------- стрелки перелистывания ---------- */ /* .owl-nav у Aspro растянут left:-25px / right:-25px, и кнопки ложились поверх первой и последней карточек, накрывая их новую рамку и тень, а справа уходили почти в край экрана (на резиновых ширинах — 5px до края). Уводим пару в строку заголовка, вправо. position:absolute и display:flex у .owl-nav — родные, их не трогаем: меняем только смещения и ширину. Ниже 768px кнопки у Aspro скрыты, поэтому правка закрыта медиазапросом. */ @media (min-width: 768px) { .viewed_product_block .block-items .owl-nav { top: -45px; left: auto; right: 7px; /* по правому краю карточек: у .owl-stage-outer поле 7px */ width: auto; gap: 8px; /* при auto-ширине родной space-between кнопки уже не разводит */ } } /* Шеврон 40×40 внутри кнопки 38×38, да ещё повёрнутый на 90°, стоял не по центру: в левой кнопке смещён на 3,5px, в правой на 1,5px — кнопки перестали быть зеркальными. Центрируем содержимое самой кнопки, размер значка не трогаем, чтобы не сдвинуть центр вращения. */ .viewed_product_block .owl-nav button { display: flex; align-items: center; justify-content: center; padding: 0; } /* ---------- остатки чужого серого ---------- */ /* Верхнюю границу блока мы перекрасили, нижняя осталась серой — на светлом градиенте две линии одного блока разного оттенка видно на глаз. Тем же серым живёт и сам значок стрелки: фирменный цвет появлялся только при наведении. Заливка кнопки при наведении объявлена выше и продолжит перекрывать это правило. Оговорка: в footer.php есть инлайновое правило «footer .viewed_product_block{border-bottom:2px solid ... !important}». Пока блок выводится вне тега