/* * cheers-market.kz — власні правки поверх теми oct_promo. * * 🚨 Файл лежить ПОЗА текою теми (catalog/view/javascript/cheers/), тому * оновлення oct_promo його не затирає. Підключається модифікатором * cheers_custom_css.ocmod.xml — не правкою файлів теми. * * 🚨 Нічого не описуємо через !important і фіксовані пікселі там, де тема * рахує розміри сама: перебиваємо тільки те, що справді треба, і тими ж * одиницями, якими користується тема (rem, %, змінні Bootstrap). */ /* ------------------------------------------------------------------ * Плитка підкатегорій: квадрат 1:1 замість приземкуватої смужки. * * Було: висота плитки визначалась картинкою 60×60 плюс підпис, тож плитка * виходила широкою і низькою, а картинка — дрібною крапкою. * * Стало: картинка займає всю ширину плитки і тримає співвідношення 1:1, * підпис лишається під нею. Ширину плитки не чіпаємо — вона задана темою * через flex-basis на кожному брейкпойнті (33.3% / 25% / 20% / 16.6% / * 12.5%), і саме цей адаптив має лишитись недоторканим. * ------------------------------------------------------------------ */ .pr-subcategories-link { /* тема вирівнює вміст по центру; нам треба, щоб картинка тягнулась на всю ширину, а підпис лишався внизу плитки */ justify-content: flex-start; } .pr-subcategories-link img { width: 100%; height: auto; /* 🚨 Головне: квадрат. aspect-ratio тримає 1:1 незалежно від того, які розміри віддав ресайзер OpenCart, тож плитка не «стрибає» при зміні налаштувань розміру картинки в темі. */ aspect-ratio: 1 / 1; /* contain, а не cover: пляшка має вміститись цілком, а не обрізатись */ object-fit: contain; /* картинки в нас із прозорим фоном — хай дихають */ padding: 0.25rem; } /* Підпис під картинкою притискаємо до низу, щоб плитки одного ряду мали однакову висоту навіть при назвах у два рядки. */ .pr-subcategories-link > span { margin-top: auto; } /* ------------------------------------------------------------------ * Тепле тло-градієнт за фото товару (03.10.2026). * * Фото товарів тепер із прозорим фоном, і тема малює під ними порожнє * біле поле. Свого налаштування тла під фото тема не має, тому задаємо * його тут: картки товарів у модулях і категоріях, головне фото й мініатюри * на сторінці товару. Фото-сцени зі своїм фоном перекривають тло повністю. * ------------------------------------------------------------------ */ .pr-module-item-image, .pr-product-images-main, .pr-product-images-additional-item { /* «студійне» світло по центру, коньячний край, тонка золотиста окантовка, затемнення знизу */ background: radial-gradient(ellipse 80% 65% at 50% 38%, #f0d9a6 0%, #c9974f 32%, #7a4a22 68%, #3a2210 100%); box-shadow: inset 0 0 0 1px rgba(232, 200, 140, .35), inset 0 -30px 40px -20px rgba(0, 0, 0, .35); border-radius: .5rem; } /* ------------------------------------------------------------------ * Темна тема в зеленій палітрі (03.10.2026). * * Тема oct_promo фарбує темний режим власними змінними, які в адмінці не * налаштовуються: фон #000, плашки #1d1d1d, рамки #2b2a2a. Через них, зокрема, * фільтр OCFilter у темній темі чорний. Перевизначаємо лише ці змінні темної * теми - світла тема не змінюється, а тема й фільтр далі беруть кольори * через свої ж змінні. * ------------------------------------------------------------------ */ :root { --pr-dark-theme-background-color: #141a15; /* фон сторінки, = «Фон сайта» темної теми */ --pr-dark-theme-white-color: #1c241d; /* плашки, картки, фільтр */ --pr-dark-theme-border-color: #2a352b; /* рамки й розділювачі */ } /* ------------------------------------------------------------------ * Мінібанери слайдшоу на головній: товар крупніше (03.10.2026). * Картинки - SVG з вкладеним WebP 800x800 (image/catalog/slider/mini/), * тому різкі при збільшенні. Тут, а не в «Свой CSS код», бо цей файл * не перезбирається при збереженні шаблону. * ------------------------------------------------------------------ */ .pr-slideshow-plus-banners .slide-image { width: 110%; max-width: none; height: auto; bottom: -42%; } .pr-slideshow-plus-banners .slide-inner:hover .slide-image { transform: translate3d(-50%, -6px, 0) scale(1.02); } /* ------------------------------------------------------------------ * Відступ фото товару в плитці (модулі на головній і категорії), 03.10.2026. * Фото без фону обрізані впритул до товару, тож без відступу пляшка * впирається в край плитки. Розмір картинки не змінюється: відступ * всередині, товар вписується через object-fit. * ------------------------------------------------------------------ */ .pr-module-item-image img:not([class*="sticker"]) { padding: 10px 0; box-sizing: border-box; object-fit: contain; } /* ------------------------------------------------------------------ * Відблиск при наведенні на картку товару (модулі й категорії), 03.10.2026. * Світла смуга один раз пробігає по фото. Хто вимкнув анімації в системі * (prefers-reduced-motion) - ефекту не бачить. * ------------------------------------------------------------------ */ .pr-module-item-image { position: relative; overflow: hidden; } .pr-module-item-image::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(100deg, rgba(255, 240, 200, 0) 0%, rgba(255, 240, 200, .45) 50%, rgba(255, 240, 200, 0) 100%); transform: skewX(-20deg); pointer-events: none; z-index: 2; } .pr-module-item:hover .pr-module-item-image::after { animation: cheers-shine .9s ease-out; } @keyframes cheers-shine { to { left: 125%; } } @media (prefers-reduced-motion: reduce) { .pr-module-item:hover .pr-module-item-image::after { animation: none; } } /* ------------------------------------------------------------------ * Логотип на мобільних (03.10.2026). Розмір логотипа задається лише в адмінці * шаблону - тут його НЕ фіксуємо. На мобільних шапка вужча, тому логотип * зменшується на 30% від того, що задано в адмінці (масштабом, без пікселів). * ------------------------------------------------------------------ */ @media (max-width: 991.98px) { #logo img, .pr-mobile-menu-logo img { transform: scale(.7); transform-origin: left center; } } /* ------------------------------------------------------------------ * Попап підтвердження віку 21+ у темній темі (03.10.2026). * Вікно мало вписаний білий фон, а текст тема в темному режимі робить * світлим - заголовок зникав. Беремо кольори зі змінних теми. * ------------------------------------------------------------------ */ .dark-theme .age-gate__box { background-color: var(--pr-white-color, #1c241d); border: 1px solid var(--pr-border-color, #2a352b); } .dark-theme .age-gate #ageGateYes { color: #fff; } /* Попап 21+, темна тема - доведення (ТЗ-18, 03.10.2026). Лише .dark-theme, * світла тема не змінюється. Затемнення - у тон фону теми, щоб вікно не * зливалося зі сторінкою; рамка вікна - сірий теми навпіл із фоном вікна * (контраст до затемнення ~3:1); тінь у темряві не видно - прибрано. * «Нет» - вторинна контурна кнопка: без заливки, рамка й текст зі змінних * (у темряві її тло зливалося з вікном). Червоне «21+» - як є (контраст 3.5). */ .dark-theme .age-gate { background: color-mix(in srgb, var(--pr-background-color, #141a15) 88%, transparent); } .dark-theme .age-gate__box { border-color: color-mix(in srgb, var(--pr-grey-color, #a6b2a6) 50%, var(--pr-white-color, #1c241d)); box-shadow: none; } .dark-theme .age-gate #ageGateYes:hover { background-color: color-mix(in srgb, var(--pr-primary-light-color, #608860) 90%, #000); color: #fff; } .dark-theme .age-gate #ageGateNo { background-color: transparent; color: var(--pr-black-color, #e7ece6); border: 1px solid var(--pr-primary-light-color, #608860); } .dark-theme .age-gate #ageGateNo:hover { background-color: var(--pr-background-color, #141a15); } /* ------------------------------------------------------------------ * Відступ фото в галереї картки товару (головне фото і мініатюри), 03.10.2026. * Фото без фону обрізані впритул до товару - зверху й знизу трохи вільного місця, * щоб пляшка не прилягала до країв. Зменшення лише візуальне (scale): розміри * блоку галереї і сусідні елементи не зсуваються. * ------------------------------------------------------------------ */ .pr-product-images-main .oct-gallery img { transform: scale(.9); } .pr-product-images-additional-item img { transform: scale(.9); } /* ------------------------------------------------------------------ * Списки товарів без бічної колонки (Акции, бренди, пошук), 03.10.2026. * Тема ставить там 4 картки в ряд - картки ширші, фото 3:4 стає «приплюснутим». * На десктопі - 5 у ряд, як у категоріях з фільтром: та сама ширина й висота карток. * ------------------------------------------------------------------ */ @media (min-width: 1200px) { .no-col .pr-category-products .pr-module-items > .pr-module-item.product-grid { flex: 0 0 calc((100% - 4rem) / 5); width: calc((100% - 4rem) / 5); max-width: calc((100% - 4rem) / 5); } } /* ------------------------------------------------------------------ * Стікери в плитці товару - на полі фото, 03.10.2026. * Тема ставить стікери на верх картки, а фото має відступ my-3 (1rem) - * з градієнтом за фото стікер опинявся над фото. Зсуваємо блок стікерів * на той самий відступ і даємо внутрішній відступ від краю фото. * ------------------------------------------------------------------ */ .pr-module-item-top > .pr-module-item-stickers-box:has(+ .pr-module-item-image.my-3) { top: 1rem !important; padding: 6px; box-sizing: border-box; } /* Стікер «Акция»: вогник перед словом (емодзі - стилем, бо таблиця кешу стікерів теми не зберігає емодзі), 03.10.2026 */ .pr-module-sticker-stickers_special { display: inline-flex; align-items: center; white-space: nowrap; } .pr-module-sticker-stickers_special::before { content: "\1F525\00A0"; } /* Картка товару без фото: тема малює мініатюру з порожнім src (бита іконка під заглушкою) - ховаємо такий слайд, 03.10.2026 */ .pr-product-images-additional .swiper-slide:has(img[src=""]) { display: none; } /* ------------------------------------------------------------------ * Кошик: комплект «Вместе дешевле» (ТЗ-23, 04.10.2026). * Товари зібраного комплекту стоять поруч у спільній штрихпунктирній рамці, * на рамці - стікер знижки в кольорах стікера «Акция» теми. Кольори - змінні * теми, тож темна тема перефарбовується сама. * ------------------------------------------------------------------ */ .dc-set-group { position: relative; list-style: none; margin: 1.5rem 0 .5rem; padding: 1.375rem .75rem .25rem; border: 2px dashed var(--pr-interactive-color); border-radius: .75rem; } /* Стікер сидить на лінії рамки суцільною плашкою, що її перекриває */ .dc-set-group__sticker { position: absolute; top: 0; left: .75rem; z-index: 1; transform: translateY(-50%); padding: .1875rem .625rem; font-size: .875rem; line-height: 1.4; white-space: nowrap; box-shadow: 0 0 0 3px var(--pr-white-color); } /* Фон і текст - як у стікера «Акция» теми; :where() не перебиває колір, що задає тема (специфічність 0) */ :where(.dc-set-group__sticker) { background-color: var(--pr-red-color); color: #fff; } .dc-set-group__list { margin: 0; padding: 0; list-style: none; } .dc-set-badge { color: var(--pr-interactive-color); } @media (max-width: 575.98px) { .dc-set-group { padding: 1.25rem .5rem .25rem; } .dc-set-group__sticker { left: .5rem; } } /* ------------------------------------------------------------------ * Кошик: залишки червоного старого кошика + темна тема (борг 04.10.2026). * Джерело червоного - блок