/* * SLAVNI UI — накладка поверх style.css (slavni.com, прод) * * Портовано з test.slavni.com. Перенесено рівно три речі: * A. каталог/категорія — елементи по ширині екрана + компактна панель підкатегорій * B. сторінка товару — по ширині екрана, галерея без обрізання фото * C. селектор кольору — сітка H&M замість кольорових крапок * * Нумерація секцій збережена з тесту, щоб правки можна було звіряти між сайтами. * style.css підключається раніше і постійно дає нічию по специфічності — звідси * !important. Пам'ятай: !important не вирішує нічию, вирішує специфічність, * тому .section тут програє section.section у style.css. * * УВАГА: при зміні файлу підняти ?v=NN у common/header.twig (і в копії * system/storage/modification/...), інакше кеш на 31 день віддасть старий файл. * * Три відмінності від тесту (навмисні, не забути при наступному звірянні): * • секції 25 немає — на проді немає seofilter-кнопки #filter_open_seo, і * правило #filter_open{display:none} сховало б єдину кнопку фільтра; * • секція 27 націлена на #filter_open (на проді він уже стоїть у * .control-c_block, тож JS-перенесення з тесту тут не потрібне); * • секція 40 без префікса body.sl-colorsel-hm — H&M-вигляд увімкнено завжди, * перемикач вигляду на прод не переносився. */ :root { /* Графіт — той самий, що на тесті. Було #3c3a3b: близький, але не той самий колір, а замовниця просить рівно #3D4340 по всьому сайту. */ --sl-dark: #3D4340; /* Акцент і його ролі — з палітри 6 (див. секцію 55). На тесті вони приходять з перемикача ПАЛІТРА через класи body.sl-lime-*; тут перемикача немає, тож значення стоять прямо тут числами. Чорнило на лаймі графітове: біле на #E9F54F дає 1.3:1, тобто зникає. */ --sl-accent: #E9F54F; /* основний */ --sl-accent-soft: #F3F8C1; /* світлий: ховери, великі площини */ --sl-accent-cta: #E9F54F; /* головні кнопки */ --sl-accent-text: #3D4340; /* напис поверх акценту */ --sl-accent-cta-text: #3D4340; } /* ===== 26. FLUID CONTAINER — елементи по ширині екрана ===== */ /* style.css:1023 фіксує .container на width:1232px починаючи з 1300px. Міняємо на 94vw, тож блок тягнеться за вікном і коректно реагує на зум. max-width лише щоб на 4K не розповзалось у нечитабельну ширину. */ @media screen and (min-width: 1024px) { .container { width: 94vw !important; max-width: 2400px !important; } } /* ===== 22. SUBCATEGORY — компактна панель зверху категорії ===== */ .wh_img { display: none !important; } .wh_slide { justify-content: center; } /* style.css: font-size:13px + letter-spacing дає перенос у два рядки */ .wh_name { display: block; text-align: center; font-weight: 700; font-size: 11px !important; letter-spacing: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 4px 0 !important; } /* На тесті ховер підсвічувався лимонним --sl-accent із тамтешньої теми. На проді він чужий для палітри, тож назва при наведенні лишається темною. */ .wh_name:hover, .wh_slide:hover .wh_name { color: var(--sl-dark) !important; text-decoration: none; } .slider_white-wrap { padding: 4px 0 !important; } .breadcrumbs_container { margin-top: 10px !important; margin-bottom: 8px !important; } .title_block-wrap { padding-bottom: 8px !important; margin-bottom: 8px !important; } /* ===== 23. PRODUCT CARDS — прямокутні зображення (3:4 portrait) ===== */ /* card__top — реальний контейнер висоти (style.css: height 306px / 420px). Висота фіксована, а ширина після секції 26 тягнеться за екраном, тож бокс ставав ландшафтним і cover різав тим більше, чим ширший монітор: заміряно 439×420 (1.05) і 33% зрізаного кадру у «З цим товаром купують» на 1920px. Джерельні фото портретні (~0.70), тож 3:4 лишає близько 7% замість 33%. Правило навмисно НЕ прив'язане до .catalog__wrapper: ті самі картки живуть у свайперах на сторінці товару («З цим товаром купують», «Рекомендуємо», «Нещодавно переглянуті») і на головній, і там обрізання було найгіршим. */ .card__top { height: auto !important; aspect-ratio: 3 / 4 !important; } /* card__img абсолютний: height:100% рахується від card__top (position:relative), а не через ланцюг відсотків від height:auto, який у частині браузерів дає 0 */ .card__img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; } .card__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; } /* ===== 24 / 49. PRODUCT CARDS — кількість кольорів замість кружечків ===== */ /* Кружечки прибрано, натомість підпис «7 кольорів» — його ставить slavni_catalog.js. Ховаємо саме тут, а не в JS, щоб вони не блимнули до виконання скрипта. :not(.card_opt) — під класом card_opt іде блок опцій на сторінці товару, його чіпати не можна. Компроміс, про який варто пам'ятати: кружечки були радіо-кнопками і через update_size() перемикали розміри в панелі швидкої покупки. Тепер у ній лишаються розміри лише першого кольору. */ .card_options:not(.card_opt) { display: none !important; } .sl-color-count { margin-top: 4px; font-size: 12px; line-height: 16px; color: rgba(17, 17, 17, 0.55); } /* ===== 27. ФІЛЬТР — компактна кнопка в рядку з сортуванням ===== */ /* На проді #filter_open уже лежить у .control-c_block (category.twig:113), тож лишається тільки привести його до вигляду як на тесті. */ #filter_open.filter_elem { border: 1px solid var(--sl-dark) !important; height: 32px !important; padding: 0 14px !important; font-size: 11px !important; line-height: 32px !important; margin: 0 !important; flex-shrink: 0; } /* ===== 28. CATALOG WRAPPER — прибрати відступ коли блок порожній ===== */ .catalog__wrapper:not(:has(*)) { margin: 0 !important; } /* ===== 37. SECTION PADDING — зменшити відступи між блоками ===== */ /* style.css дає .section до 4rem 0 на ≥768px, сусідні блоки складають подвійний розрив */ .section { padding: 1.25rem 0 !important; } .section_top, .section_seo { padding-top: 0.25rem !important; } .swiper_sr { margin: 0 !important; } .subscribe__section { padding: 1.5rem 0 !important; } .text-seo__container { margin-bottom: 1rem !important; } .review-container { margin-bottom: 1rem !important; } .review-write-wrap { padding: 1rem !important; } /* ===== 33. VIDEO — обмежити розміри thumbnail відео ===== */ .cart_video-wrapper { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } .cart_video_elem { display: inline-block !important; width: auto !important; height: auto !important; overflow: hidden !important; border-radius: 6px !important; vertical-align: top !important; flex-shrink: 0 !important; } .cart_video_elem video { display: block !important; width: 260px !important; height: auto !important; max-height: 360px !important; object-fit: cover !important; object-position: top !important; } /* ===== 34. VIDEO HEIGHT FIX — YouTube iframe у product_videos_50 ===== */ .product_videos_50 .video-wrapper { max-height: 500px !important; } .product_videos_50 iframe.js-product-video-yt { max-height: 500px !important; } /* ===== 38. SWIPER — прибрати «мертву» висоту в блоках з картками ===== */ /* style.css має .swiper-wrapper{height:100%}, а тема — html,body{height:100%}. Відсоток резолвиться аж до body, тож обгортка тягнеться на висоту вікна і під «Схожі товари» лишається ~570px пустоти. Галерею (.swiper__card, .swiper_trumb) і банер не чіпаємо — там висота задана навмисно. */ .swiperTop > .swiper-wrapper, .swiperTop2 > .swiper-wrapper, .swiperTop3 > .swiper-wrapper, .swiperOtherProducts > .swiper-wrapper { height: auto !important; } /* ===== 39. ОПИС + ВІДЕО — прибрати провал справа ===== */ /* Опис — дві колонки .product_videos_50 по 50% з inline text-align:center. Відео вертикальне (9:16), тож посеред широкої колонки лишалось по ~337px пустоти з боків. Текст робимо читабельної ширини, відео — фіксованим і притиснутим до правого краю. Мобільна версія (<768px) не змінюється. */ @media (min-width: 768px) { .faq_element-answer > .product_videos_50:first-child { width: 55% !important; } .faq_element-answer > .product_videos_50:first-child + .product_videos_50 { width: 45% !important; } .faq_element-answer .product_videos_50 .video-wrapper { width: 281px !important; height: 500px !important; max-height: 500px !important; padding-top: 0 !important; margin: 0 0 10px auto !important; } .product_videos_50 iframe.js-product-video-yt { height: 500px !important; max-height: 500px !important; } } /* ===== 48. ВІДЕО В ОПИСІ НА МОБІЛЬНОМУ — повернути висоту ===== */ /* style.css на ≤767px робить `.video-wrapper { padding-top:0; height:auto }`, а `.video-wrapper iframe` лишає `position:absolute; height:100%`. Писалось це під слайд галереї, де .video-wrapper є flex-елементом swiper і тягнеться по висоті ряду. Але селектор голий, тож він б'є і по відео в описі товару, де flex-батька немає: абсолютний iframe висоти не додає, бокс схлопується в нуль і відео зникає. Заміряно на проді: 251×0. Це НЕ наслідок накладки — перевірено з вимкненим slavni_ui.css, там ті самі 251×0. Але лагодимо тут, бо в style.css лізти ризикованіше. Повертаємо пропорційний бокс через aspect-ratio (а не padding-top: він там обнулений з !important). Відео вертикальні, 9:16 — та сама пропорція, що й 281×500 на ПК у секції 39. Галерею навмисно не чіпаємо: селектор прив'язаний до .faq_element-answer, тож .swiper__card .video-wrapper лишається як є. */ @media screen and (max-width: 767px) { .faq_element-answer .product_videos_50 .video-wrapper, .faq_element-answer .product_videos_100 .video-wrapper { height: auto !important; aspect-ratio: 9 / 16; width: min(100%, 280px) !important; max-height: 70vh; margin: 0 auto 10px !important; } } /* ===== 41. ГАЛЕРЕЯ ТОВАРУ — фото більше не обрізається ===== */ /* style.css прибиває .swiper__card і .swiper_trumb до height:620px, а фото ставить object-fit:cover. Ширина галереї тягнеться за екраном, висота — ні, тому cover зрізав тим більше, чим ширший монітор: 10% кадру на 1440, 24% на 1680, 34% на 1920, 51% на 2560 (заміряно на тесті). Фото різних пропорцій: більшість 1000×1000, частина 750×1000. Єдиної пропорції боксу, за якої cover нічого не ріже, не існує, тому: • бокс квадратний — під найпоширеніший формат 1:1; • contain замість cover — не ріжеться жодне фото, неквадратні отримують невеликі поля з боків замість зрізаних голів. height:auto + aspect-ratio, а не фіксована висота: висота лишається визначеною (height:100% у слайдів працює), але рахується від ширини. */ .swiper__card { height: auto !important; aspect-ratio: 1 / 1; /* самі фото 1000px завширшки — вище почався б розмитий апскейл */ max-width: 1000px; margin-inline: auto; } .swiper__card .swiper-slide { height: 100% !important; } .swiper__card .swiper-slide img { object-fit: contain !important; background: #fff; } /* Колонка мініатюр має бути тієї ж висоти, що й головне фото. height:100% тут не годиться: .swiper_trumb_wrap — flex-елемент без власної висоти, тож відсоток замикається сам на себе і висота вибухає до мільйонів пікселів (заміряно: 33 554 432px). Тому виймаємо мініатюри з потоку — абсолютний блок не додає висоти обгортці, а обгортка тягнеться за головним фото. */ .swiper_trumb_wrap { position: relative; } .swiper_trumb { position: absolute; inset: 0; height: auto !important; } .swiper_trumb img { object-fit: contain !important; background: #fff; } /* ===== 44. КУПИТИ В 1 КЛІК — прибрати діру між полем і кнопкою ===== */ /* style.css:2782-2784 фіксує на ≥1024px .btns_cart-wr .input = 280px і .btn_cart-add = 210px, разом 506px. Рядок .fl_wraper це flex із justify-content:space-between, тож поки колонка була вужча за 506px, обидва елементи заповнювали її та стискались. Після секції 26 колонка на 1920px доросла до 590px — залишок у 84px перетворився на порожнечу між полем і кнопкою (заміряний проміжок 100px замість штатних 16px). Кнопці лишаємо її розрахункові 210px, а поле забирає решту рядка. Тоді проміжок завжди рівний column-gap:16px із .fl_wraper — так само, як у рядку «Додати у кошик» вище. На вузьких ширинах поведінка не змінюється: поле стискається, як стискалось. Висоту (44px проти 52px у рядку вище) навмисно не чіпаю — так у style.css задумано, рядок «в 1 клік» там тонший. Скажеш зрівняти — зрівняю. */ @media screen and (min-width: 1024px) { /* Поле — рівно під маску, надлишок забирає кнопка. Заміряно у шрифті поля (14px Montserrat): маска «+38 (___)___-__-__» це 118px тексту, заповнений номер — 133px; плюс padding 20+20 і рамка 2px, разом 175px. Ставимо 190px, щоб лишався невеликий запас. Було 280px за style.css, а при широкій колонці поле ще й розтягувалось — на 1920px виходило 364px, тобто 189px порожнечі, більше половини поля. Кнопці даємо flex-grow, тож рядок заповнений до правого краю, і блок читається як пара з рядком «Додати у кошик» вище: вузький елемент зліва, широка кнопка справа. */ .btns_cart-wr .input { width: auto !important; flex: 0 1 190px; min-width: 0; /* інакше мінімум за вмістом не дасть полю стиснутись */ } .btns_cart-wr .btn_cart-add { width: auto !important; flex: 1 1 auto; } } /* ===== 43. ПІДКАТЕГОРІЇ — стрілки прокрутки ===== */ /* Панель підкатегорій це Swiper (.WhSlider), і стрілки .swiper-button-prev/next у ньому вже є та вже підключені — Swiper сам вішає на них .swiper-button-disabled на краях. Нового JS не потрібно. Чому їх не було видно: style.css:4362 ставить кнопкам top:70px — це рахувалось під високу панель із кружечками. Секція 22 стиснула панель до 39px, і кнопки поїхали нижче її межі. Тому центруємо їх по фактичній висоті ряду й робимо компактними (48px кружечок у 39px ряд не влазить). Видно тільки до 1000px: вище style.css:4350 ховає .white_control, і на ПК список підкатегорій уміщається без прокрутки. */ @media screen and (max-width: 999px) { .white_control .swiper-button-prev, .white_control .swiper-button-next { /* Без кружечка: ані фону, ані рамки, ані тіні — лише сам шеврон. */ background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; /* Вирівнювання в одну лінію з назвами категорій. top:50% не годиться: слайд 38.8px, а .wh_name лише 23.4px і притиснута до його верху, тож центр слайда (156.1) виявляється на 8.4px нижче за центр тексту (147.7) — стрілка сиділа під рядком. 11px це і є центр тексту від верху смуги: padding-top 4px із секції 22 плюс половина line-height (15.4/2). Змінюватимеш шрифт чи padding .wh_name у секції 22 — перерахуй і це число. */ top: 11px !important; transform: translateY(-50%); /* Розмір за вмістом, а padding лишає палець куди натиснути: 6+6.25+6 ≈ 18px завширшки і 6+10+6 = 22px заввишки без видимої рамки. */ width: auto !important; height: auto !important; padding: 6px !important; margin: 0 !important; z-index: 5; } .white_control .swiper-button-prev { left: 0 !important; } .white_control .swiper-button-next { right: 0 !important; } /* Розмір задаємо ТІЛЬКИ висотою, ширина — auto. Причина: у двох кнопок різні viewBox. Ліва це 10×16 і шеврон заповнює її повністю; права 16×16, а той самий шеврон 10×16 сидить у ній із полями по ~3px з боків. Якщо задати обом однакові width і height, ліву розплющує в квадрат, і стрілки виглядають кривими та різними. При width:auto кожна тримає власну пропорцію, і обидва шеврони виходять однакові — 6.25×10. */ .white_control .swiper-button-prev svg, .white_control .swiper-button-next svg { width: auto !important; height: 10px !important; } /* Край списку: стрілка сіріє, а не зникає — видно, що напрямок вичерпано. .swiper-button-lock (коли гортати нема чого взагалі) навмисно не чіпаємо, його Swiper ховає повністю, і це правильно. */ .white_control .swiper-button-prev.swiper-button-disabled, .white_control .swiper-button-next.swiper-button-disabled { opacity: 1 !important; pointer-events: none; } .white_control .swiper-button-disabled svg path { fill: rgba(17, 17, 17, 0.25) !important; } } /* --- ПК: ті самі стрілки, бо без них частина підкатегорій недосяжна --- */ /* style.css:4364 ховає .white_control від 1000px: там вважали, що на ПК список уміщається без прокрутки. Не уміщається. Swiper показує 8 слайдів, а в «Жінкам» підкатегорій 14, у «Чоловікам» 13 — решту обрізає `overflow: clip` самого .swiper, і дістатись до неї мишею неможливо: ані стрілок, ані перетягування. Тобто 5-6 категорій на ПК просто не існувало. Дві відмінності від мобільної версії вище, обидві через щільність смуги — на ПК назви заповнюють усю ширину контейнера і підходять упритул до країв: 1) стрілка стоїть на градієнті в білий, і текст під нею згасає, а не обрубується об шеврон. Заміряно на живій сторінці: без градієнта права стрілка на 1920px (1840.4—1862.4) налазить на «Купальники та пляжний одяг», що тягнеться до 1862.1. Фон смуги — чистий #fff (.slider_white-wrap прозорий, колір дає .wrapper), тож градієнт саме білий. 2) вичерпаний напрямок сіріє рівно як на мобільному, обидві стрілки завжди на місці — але сіра йде без градієнта, інакше її біла плашка накрила б початок першої назви. Стрілки лишаються всередині .swiper: у нього `overflow: clip`, тож винести їх на поля контейнера (58px на 1920px) не вийде — їх би просто обрізало. */ @media screen and (min-width: 1000px) { .slider_white-wrap .white_control { display: block !important; } .white_control .swiper-button-prev, .white_control .swiper-button-next { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; /* те саме число, що й у мобільній частині: центр першого рядка назв */ top: 11px !important; transform: translateY(-50%); width: auto !important; height: auto !important; margin: 0 !important; z-index: 5; } /* padding з боку тексту — це і є ширина згасання (22px), з боку краю лишаємо 2px, щоб шеврон не тулився до самої межі контейнера. */ .white_control .swiper-button-prev { left: 0 !important; padding: 6px 22px 6px 2px !important; background: linear-gradient(90deg, #fff 0%, #fff 52%, rgba(255, 255, 255, 0) 100%) !important; } .white_control .swiper-button-next { right: 0 !important; padding: 6px 2px 6px 22px !important; background: linear-gradient(270deg, #fff 0%, #fff 52%, rgba(255, 255, 255, 0) 100%) !important; } /* height замість width — причина та сама, що й у мобільній частині: у двох кнопок різні viewBox (10×16 і 16×16). */ .white_control .swiper-button-prev svg, .white_control .swiper-button-next svg { width: auto !important; height: 10px !important; } /* Край списку: як на мобільному — стрілка сіріє, а не зникає, тож обидві завжди на місці. Градієнт при цьому знімаємо: сірий шеврон сам по собі нікуди не налазить, а от його біла плашка накрила б початок першої назви. Заміряно у крайніх положеннях від 1024 до 1920px: найтісніше на 1024px справа, і там між текстом і шевроном лишається 4.7px, зліва 27.4px. .swiper-button-lock не чіпаємо — коли гортати нема чого взагалі (напр. «Кофти», три підкатегорії), Swiper ховає кнопки сам, і це правильно. */ .white_control .swiper-button-prev.swiper-button-disabled, .white_control .swiper-button-next.swiper-button-disabled { opacity: 1 !important; pointer-events: none; background: none !important; } .white_control .swiper-button-disabled svg path { fill: rgba(17, 17, 17, 0.25) !important; } } /* Наведення і тап: style.css:4266 фарбує шеврон у білий — воно писалось у парі з style.css:4264, яке під наведенням заливає кнопку чорним кружечком. Кружечка тут немає (background знято вище), а правило на fill лишилось чинним, тож під курсором шеврон ставав білим на білому і зникав. На тачі :hover ще й залипає після тапу, тому стрілка пропадала рівно тоді, коли на неї натиснули, і не поверталась, поки не тапнеш деінде — виглядало так, ніби список закінчився, хоч прогорнуто було на одну позицію. Тримаємо той самий колір, що й у спокої. :not() лишає крайній стан сірим: pointer-events:none і так знімає :hover з вимкненої кнопки, але тоді це тримається на одному чужому правилі. */ .white_control .swiper-button-prev:not(.swiper-button-disabled):hover svg path, .white_control .swiper-button-next:not(.swiper-button-disabled):hover svg path { fill: #111111 !important; } /* Підсвітка тапу малюється поверх шеврона суцільним прямокутником і накриває його — style.css:28 знімає її лише з , а стрілки це
. */ .white_control .swiper-button-prev, .white_control .swiper-button-next { -webkit-tap-highlight-color: transparent; } /* ===== 42. ПЛИТКИ КАТЕГОРІЙ НА ГОЛОВНІЙ — не обрізати фото ===== */ /* style.css:1951/1953 тримають .category_elem і .category_top на фіксованій висоті (240px, 360px і 320px за брейкпоінтами), а ширина після секції 26 тягнеться за екраном. Бокс ставав ландшафтним 431×320 (1.35) при джерелі 580×640 (0.91) — зрізало 33% кадру, у «ЧОЛОВІКАМ» і «АКСЕСУАРИ» по голові. Висоту рахуємо від ширини за пропорцією джерела, тож обрізання зникає зовсім. Обидва селектори разом і з однаковою пропорцією — це важливо: .category_elem це кліпуючий бокс з overflow:hidden, а .category_top при наведенні їде вгору на -54/-66px (style.css:1988/1991). Різна висота зламала б цей наїзд. */ .category_elem, .category_top { height: auto !important; aspect-ratio: 29 / 32; /* 580×640 — рівно пропорція вихідних банерів */ } /* ===== 40. СЕЛЕКТОР КОЛЬОРУ — сітка H&M (увімкнено завжди) ===== */ /* Референс — картка товару www2.hm.com: • ПК — суцільна сітка 5 колонок, плитки 2:3, між ними волосяні лінії; рамки сусідів схлопуються через margin:-1px, тож лінія завжди рівно 1px, а активна плитка перекриває сірі лінії сусідів завдяки z-index; • згорнутий стан — рівно 2 ряди, десята комірка це кнопка «+N»; розгорнутий — усі плитки та посилання «МЕНШЕ» під сіткою; • моб — один ряд з горизонтальним скролом, без «+N» і без «МЕНШЕ». Кнопку «+N» і «МЕНШЕ» створює slavni_colors.js, а показує/ховає CSS. */ /* --- підпис «КОЛІР: Бежевий» --- */ .sl-color-name { /* .elem_op_title — flex із justify-content:space-between (там же лінк «таблиця розмірів»), тож без margin-right:auto назву кольору відкидає до правого краю */ margin-right: auto; text-transform: none; font-weight: 400; color: #111; } .sl-color-name::before { content: ': '; } .sl-color-form-wrap { display: block; } .sl-color-form-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; width: min(100%, 500px); /* компенсує -1px правої колонки та нижнього ряду, щоб не було overflow */ padding: 0 1px 1px 0; } .sl-color-card, .sl-hm-more { width: auto; aspect-ratio: 2 / 3; margin: 0 -1px -1px 0; /* схлопує рамки сусідів в одну лінію */ border: 1px solid #e3e3e3; border-radius: 0; background: #fff; overflow: hidden; text-decoration: none; transition: border-color 0.15s ease; } .sl-color-card { display: block; } .sl-color-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .sl-color-card:not(.active):hover, .sl-hm-more:hover { border-color: #b0b0b0; position: relative; z-index: 1; } .sl-color-card.active { border-color: var(--sl-dark); position: relative; z-index: 2; } .sl-color-card.out-stock { opacity: 0.4; } /* --- комірка «+N» на місці десятої плитки --- */ .sl-hm-more { display: none; align-items: center; justify-content: center; padding: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1; color: #111; } /* --- посилання «МЕНШЕ» під розгорнутою сіткою --- */ .sl-hm-toggle { display: none; align-items: center; gap: 6px; margin: 12px 0 0 0; padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; color: #111; } .sl-hm-scroll { display: none; } /* --- ПК: згортання до двох рядів --- */ @media screen and (min-width: 768px) { .sl-color-form-track.is-collapsed .sl-color-card:nth-child(n+10) { display: none; } .sl-color-form-track.is-collapsed .sl-hm-more { display: flex; } /* «МЕНШЕ» — сусід треку, тож видно лише в розгорнутому стані */ .sl-color-form-track:not(.is-collapsed) ~ .sl-hm-toggle { display: inline-flex; } } /* --- моб: один ряд із горизонтальним скролом, усі кольори видно --- */ @media screen and (max-width: 767px) { .sl-color-form-track { display: flex; width: auto; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .sl-color-form-track::-webkit-scrollbar { display: none; } .sl-color-card { width: 60px; flex: 0 0 auto; } /* Індикатор прокрутки під рядом кольорів (як у картці товару Nike): доріжка на всю ширину ряду, повзунок показує видиму частку. Клас is-on вішає JS лише коли ряд реально не вміщається — у товарів з малою кількістю кольорів смужки немає взагалі. is-visible з'являється під час гортання і гасне у спокої. Прозорість, а не display, щоб поява й зникнення не смикали розкладку. */ .sl-hm-scroll.is-on { display: block; width: 100%; height: 3px; margin: 10px 0 2px; border-radius: 2px; background: #ececec; overflow: hidden; opacity: 0; transition: opacity 0.25s ease; } .sl-hm-scroll.is-on.is-visible { opacity: 1; } .sl-hm-scroll__thumb { height: 100%; border-radius: 2px; background: var(--sl-dark); } } /* ===== 50. КОШИК І ОФОРМЛЕННЯ — права колонка більше не тікає за екран ===== */ /* style.css:3492 задає .order_list-block 67% + .order_block 38% = 105%, плюс column-gap 16px. Тобто розкладка завжди вилазила за .container на ~5% + 16px — просто до переходу на 94vw контейнер був 1232px і той виступ падав у порожні поля сторінки, тому його ніхто не бачив. Тепер полів майже немає, і суми ("ТОВАРІВ НА СУМУ", "ЗАГАЛЬНА СУМА", "ВСЬОГО") обрізало правим краєм вікна: 22px на 1280 → 52px на 2560. margin-right:-5% зі style.css:3495 тут не рятує — від'ємний margin останнього flex-елемента зменшує лише зайняте місце, а не сам блок. Робимо так, щоб колонки давали рівно 100%: 62% - gap + 38%. */ @media screen and (min-width: 1024px) { .order_wrapper > .order_list-block { width: calc(62% - 16px) !important; } .order_wrapper > .order_block { width: 38% !important; margin-right: 0 !important; } } /* ===== 46. БІЖУЧИЙ РЯДОК — світлий варіант ===== */ /* Портовано з тесту, де це один із режимів віджета РЯДОК. На проді віджетів немає, тож правило безумовне. style.css:1025 дає .marquee чорну заливку, :1029 білий текст, а :1031 малює білу крапку-роздільник через ::before — її обовʼязково перевертати разом із тлом, інакше на білому роздільники просто зникають. Хайрлайн знизу — inset-тінню, а не border: межа додає 1px висоти й зсуває всю сторінку вниз. Заміряно на живому проді: з border рядок стає 35px замість 34, з тінню висота не змінюється. */ .marquee { background: #ffffff !important; box-shadow: inset 0 -1px 0 #ececec; } .marquee_ins { color: #111111 !important; } .marquee_ins:before { background: #111111 !important; } /* ===== 55. ДИЗАЙН 2026 — порт із тесту (08.09.2026) ===== Переносимо кольорову частину дизайну, затвердженого на test.slavni.com. Порт свідомо НЕ дослівний: на проді інша розмітка, тому кожне правило нижче писалось під селектори, перевірені на живому проді. Що НЕ переноситься і чому: • біжучий рядок — окреме прохання замовниці лишити як є; • квадрат кошика в шапці — на проді немає розмітки .sl-bag--flat; • плашка SALE — потребує правок моделі й двох контролерів; • «Схожі товари» — такого блоку на проді немає; • класи на — не потрібні: на проді немає перемикачів, тож усі правила пишемо без префіксів sl-trio / sl-lime-*. Змінні акценту додані у :root угорі файлу. --sl-dark там же переведено з #3c3a3b на #3D4340 — це той самий графіт, що на тесті. */ /* ----- 55a. Головні кнопки — з зеленого й хакі на лайм ----- style.css: .btn__main був #005E0F (темно-зелений), .btn_basket і .btn_f — #839283 (хакі). Обидва кольори поза новою палітрою. Чорнило на лаймі графітове: біле на ньому дає 1.3:1. */ .btn__main, .btn_cart, .btn_basket, .btn_f, .btn_f-color1 { background: var(--sl-accent) !important; border-color: var(--sl-accent) !important; color: var(--sl-accent-text) !important; } .btn__main:hover, .btn_cart:hover, .btn_basket:hover, .btn_f:hover, .btn_f-color1:hover { background: var(--sl-accent-soft) !important; border-color: var(--sl-accent-soft) !important; color: var(--sl-accent-text) !important; } /* «Купити в 1 клік» — контурний графіт, заливка під курсором. */ .btn_cart-add, .btn_cart_tr { background: #ffffff !important; border: 1px solid var(--sl-dark) !important; color: var(--sl-dark) !important; } .btn_cart-add:hover, .btn_cart_tr:hover { background: var(--sl-dark) !important; border-color: var(--sl-dark) !important; color: #ffffff !important; } /* ----- 55b. Кукі-банер ----- */ .cookies__wrapper { background: var(--sl-dark) !important; } .cookie__btn_gr, .btn__main.cookie__btn_gr { background: var(--sl-accent) !important; border-color: var(--sl-accent) !important; color: var(--sl-accent-text) !important; } /* ----- 55c. Ціни зі знижкою — оранжевий ----- #FF6D00 це «Класичний помаранчевий» з презентації, але тут він фіксований: означає знижку, а не тему, і за палітрою не їде. У картці каталогу знижку позначає клас .price_color. На сторінці товару класу немає — розрізняємо по сусідній закресленій ціні через :has(). */ .price_color { color: #FF6D00 !important; } .price__curr:has(+ .price__old) { color: #FF6D00 !important; } /* ----- 55d. Розміри на сторінці товару ----- Обраний — світлий відтінок палітри; наведення на невибраний нічого не заливає. Скоуп .op_size / .set-item-size навмисний: у картках каталогу розміри лежать у .card_size, і їх це правило не чіпає. */ .set-item-size.active span, .op_size input[type='checkbox']:checked + span, .op_size input[type='radio']:checked + span { background: var(--sl-accent-soft) !important; border-color: var(--sl-accent-soft) !important; color: var(--sl-accent-text) !important; } .set-item-size:not(.active):hover span, .op_size .check_elem:hover > input[type='checkbox']:not(:checked) + span, .op_size .check_elem:hover > input[type='radio']:not(:checked) + span { background: #f2f2f2 !important; border-color: #f2f2f2 !important; color: var(--sl-dark) !important; } /* ----- 55e. «Швидка покупка» на картці ----- */ .card_panel a { background: var(--sl-accent) !important; color: var(--sl-accent-text) !important; } .card_panel a svg path { fill: var(--sl-accent-text) !important; } /* ----- 55f. Маркери списків в описі ----- style.css малює маркер двома шарами: ::before — заливка 14×14 (була хакі), ::after — біла рамка 10×10 поверх. Міняємо лише нижній шар. 09.09.2026: з ніжного лайму переведено на основний акцентний — квадратики були надто блідими на білому і майже губились. */ .article_text ul li::before, ul li::before { background: var(--sl-accent) !important; } /* ----- 55g. Іконки, які лишались чорними або хакі ----- */ .icon_top svg path, .close_popup svg path, .search_form svg path, .filter_elem svg path, .delivery_free-title svg path, .social_elems .social_el svg path, .social_elems .social_el svg g path, .star__elems svg path, .star svg path, .swiper-button-prev svg path, .swiper-button-next svg path, .login_mobile svg path, .leng_mobile-wrap svg path, .aside_list li a svg path, .aside__list li a svg path { fill: var(--sl-dark) !important; } .conditions_line:after { background: var(--sl-dark) !important; } .cart-catalog-link a { color: var(--sl-dark) !important; border-color: var(--sl-dark) !important; } .cart-catalog-link a:hover { background: var(--sl-dark) !important; border-color: var(--sl-dark) !important; color: #ffffff !important; } /* Значок соцмережі підсвічується сам, плитка лишається як є. 10.09.2026: ніжний лайм замінено на основний акцентний — на білій плитці світлий відтінок майже не читався. Додано :active і :focus-visible, бо на тачі ховера немає, а замовниця просила реакцію і на клік. */ .social_elems .social_el:hover svg path, .social_elems .social_el:hover svg g path, .social_elems .social_el:active svg path, .social_elems .social_el:active svg g path, .social_elems .social_el:focus-visible svg path, .social_elems .social_el:focus-visible svg g path, .social_el:hover svg path, .social_el:active svg path, .social_el:focus-visible svg path { fill: var(--sl-accent) !important; } /* ----- 55h. Бургер-меню ----- Шеврони «›» — не svg у розмітці, а фонова картинка img/ar.svg з fill="#111111" усередині. Кольором її не перефарбуєш, тому картинка стає маскою, а колір дає background-color — той самий прийом, що з логотипом. */ .drobd_title i { background-image: none !important; background-color: var(--sl-dark); -webkit-mask: url('../img/ar.svg') center / contain no-repeat; mask: url('../img/ar.svg') center / contain no-repeat; } .menu__head > li.mobile-menu-tabs .menu-tab-switcher.active { border-bottom-color: var(--sl-dark); } /* ----- 55i. Міні-кошик: блок «добери до безкоштовної доставки» ----- Цього блоку на тесті немає взагалі — він живе тільки на проді (.basket_free_ship у попапі і .basket_free_ship--cart на сторінці кошика). Кнопка «Додати» була в зеленому #005E0F, стрілки — сірі #555. */ #modal_basket .basket_free_ship .bfs-add, .basket_free_ship--cart .bfs-add { border-color: var(--sl-dark) !important; color: var(--sl-dark) !important; background: #ffffff !important; } #modal_basket .basket_free_ship .bfs-add:hover, .basket_free_ship--cart .bfs-add:hover { background: var(--sl-dark) !important; color: #ffffff !important; } #modal_basket .basket_free_ship .bfs-arrow, .basket_free_ship--cart .bfs-arrow { color: var(--sl-dark) !important; border-color: var(--sl-dark) !important; } #modal_basket .basket_free_ship .bfs-card-name, .basket_free_ship--cart .bfs-card-name, #modal_basket .basket_free_ship .bfs-card-price, .basket_free_ship--cart .bfs-card-price { color: var(--sl-dark) !important; } .basket_modal-close { color: var(--sl-dark) !important; } .basket_modal-close svg path { fill: var(--sl-dark) !important; } /* ----- 55j. Логотип графітом ----- Той самий прийом, що в секції 45 на тесті: вихідний PNG це чорний напис на прозорому тлі, тож його альфа працює як маска, а колір дає background-color. лишається в потоці — він тримає розмір блока й несе alt. */ .logo_head { background-color: var(--sl-dark); -webkit-mask: url('/image/catalog/LOGOS/HEADER_150_SLAVNI_logo_black2.png') left center / contain no-repeat; mask: url('/image/catalog/LOGOS/HEADER_150_SLAVNI_logo_black2.png') left center / contain no-repeat; } .logo_head img { opacity: 0; } /* ----- 55k. Блок відгуків на сторінці товару ----- На проді він рендериться лише коли у товару є відгуки, тому наживо перевірити не вдалось — правила писались за розміткою тесту. Якщо класи розійдуться, правила просто не спрацюють, нічого не зламавши. */ .swiperExReviews, .swiperExReviews .swiper-wrapper, .swiperExReviews .swiper-slide, .ex-review, .ex-review-content { height: auto !important; } .rating-container svg path, .review-extended-average svg path, .ex-review svg path { fill: var(--sl-dark) !important; } .ex-review--text, .ex-review-author, .review-extended-average { color: var(--sl-dark) !important; } /* ----- 55l. Блок кошика в шапці — з хакі на лайм ----- style.css:1428 заливає .basket_bl хакі #839283 і ставить білу іконку. Це останній шавлієвий елемент у шапці. На тесті цей прямокутник прибраний зовсім, а лайм зʼявляється лише коли в кошику є товар — але там це робить скрипт, який вішає .has-items. На проді такого скрипта немає (0 згадок у header.twig), тож стан кошика розрізнити нічим. Тому робимо просте: прямокутник лишається на місці, але вже лаймовий, з графітовою іконкою — біла на лаймі дає 1.3:1 і зникла б. Якщо треба буде «порожній прозорий / повний лаймовий», як на тесті — це окремий крок: перенести той скрипт синхронізації. */ @media screen and (min-width: 1024px) { .basket_bl { background: var(--sl-accent) !important; } } .basket_elem svg, .basket_elem svg path { fill: var(--sl-dark) !important; } .basket_elem span { color: var(--sl-dark) !important; } .basket_bl:hover .basket_elem svg, .basket_bl:hover .basket_elem svg path { fill: var(--sl-dark) !important; } /* ----- 55m. Останні шавлієві елементи (заміряно аудитом по 4 сторінках) ----- • телефони у випадайці шапки — текст і рамка; • «Чекаю дзвінка» у формі зворотного дзвінка — заливка і рамка; • бічна вкладка «Відгуки» — заливка; • галочка «в наявності» і рамка кнопки «додати фото» у формі відгуку. */ .phones_modal-wrap a { color: var(--sl-dark) !important; border-color: var(--sl-dark) !important; } .submit_custom { background: var(--sl-accent) !important; border-color: var(--sl-accent) !important; color: var(--sl-accent-text) !important; } /* ТІЛЬКИ бічна вкладка. Перша редакція мала тут .tab-review button — і зачепила «Залишити відгук», бо та кнопка лежить у тому ж блоці. */ #feedback-button { background: var(--sl-accent-soft) !important; color: var(--sl-accent-text) !important; } .availability_wrapper svg path { fill: var(--sl-dark) !important; } /* Рамку й базову заливку значка «додати фото» — так, але :not([fill]) тут обовʼязкове: два path усередині мають власний fill="#fff", це плюсик у темному кружечку. Без винятку він зафарбовується разом із кружечком і зникає (09.09.2026, Screenshot_43). */ .media-add-button-icon { border-color: var(--sl-dark) !important; } .media-add-button-icon, .media-add-button-icon svg path:not([fill]), .media-add-button-icon path:not([fill]) { fill: var(--sl-dark) !important; } /* ===== 56. ШРИФТ — Roboto Condensed (порт секції 21 із тесту) ===== На проді базовий шрифт був Arial (заміряно: body → "Arial, sans-serif"). Переносимо ту саму гарнітуру, що затверджена на тесті, включно з біжучим рядком — прохання стосувалось лише його кольору, не шрифту. Файл шрифту нікуди не додається: ні тест, ні прод не вантажать його з сервера чи Google Fonts, гарнітура береться системна. Тому запасний варіант лишається sans-serif — тобто у відвідувача, у якого Roboto Condensed немає, буде рівно те, що він бачить зараз, і гірше не стане. Вага 400/700/500 повторює тест: базовий текст, заголовки, кнопки. */ body, p, span, li, td, input, select, textarea, label { font-family: 'Roboto Condensed', sans-serif !important; font-weight: 400; } h1, h2, h3, h4, h5, h6, .title_h1, .title_h2, .title_h3, .category_title, .product__title, .head_title, .title__name { font-family: 'Roboto Condensed', sans-serif !important; font-weight: 700; } button, .btn__main, .btn_cart, .btn_cart-add, .btn_cart_tr, .btn_f, .btn_f-color1, .btn_basket, .btn_small, .submit_custom, .button_oc, .simplecheckout-button, #simplecheckout_button_login, #simplecheckout_button_account, .btn-primary { font-family: 'Roboto Condensed', sans-serif !important; font-weight: 500; } /* ===== 57. ДОПОРТ 08.09.2026 ===== */ /* ----- 57a. Кнопка «Залишити відгук» ----- style.css:2227 малює рамку #111111, а заливка під курсором — панель ::after того ж чорного, яка виїжджає знизу. Обидва місця на графіт; напис під курсором лишається білим (на #3D4340 це 9.7:1). */ .btn_tr { border-color: var(--sl-dark) !important; } .btn_tr:after { background: var(--sl-dark) !important; } /* ----- 57b. Смужка «до безкоштовної доставки» ----- Заповнення було #005E0F — останній зелений на сайті. Доріжка (#d9d9d9) лишається сірою, інакше зникне сам індикатор. */ #modal_basket .basket_free_ship-bar span, .basket_free_ship--cart .basket_free_ship-bar span { background: var(--sl-dark) !important; } /* ----- 57c. Розміри в картці каталогу ----- Заміряно: на проді наведення на чип заливало його чорним #111111 із білим написом, на тесті — світлим лаймом із графітовим. Це рідний ховер теми, який на тесті перебиває секція 52; тут переносимо його окремим правилом. Скоуп .card_size / .card__pan-text — це саме картка каталогу; чипи на сторінці товару лежать у .op_size і мають власне правило в секції 55d. */ .card_size .check_elem:hover span, .card__pan-text .check_elem:hover span { background: var(--sl-accent-soft) !important; border-color: var(--sl-accent-soft) !important; color: var(--sl-dark) !important; } /* ----- 57d. Ховери, які лишились від старої теми ----- Заміряно порівнянням із тестом (кожен елемент у спокої і під курсором): • .menu__head > li > a під курсором ішов у хакі #839283 → тепер світліший графіт #6B6768, як на тесті (це «Графіт 7» із тієї ж презентації); • .wh_name під курсором на проді не мінявся зовсім → той самий #6B6768; • .icon_wish (сердечко на картці) на тесті графітове й підсвічується акцентом, на проді біле й без реакції. */ .menu__head > li > a:hover, .menu__head > li > a:active, .drobdown-list > li > a:hover, .menu__head li a:hover { color: #6B6768; } @media screen and (min-width: 1024px) { .menu__head > li > a:hover { color: #6B6768; border-bottom: 1px solid #6B6768; } } .wh_name:hover, .wh_slide:hover .wh_name { color: #6B6768 !important; } /* .icon_wish не чіпаємо: на проді це не маска, а сам елемент, і заливка перетворювала сердечко на суцільний темний кружечок. */ /* ----- 57e. Ціна на сторінці товару ----- style.css:1643 фарбує .price__curr у #c60c0c — червоний, який на тесті вже перекритий секцією 8 на графіт. Порт того ж правила; оранжевий зі знижкою лишається (секція 55c, воно нижче за каскадом і специфічніше). */ .price__curr { color: var(--sl-dark) !important; } .price__curr:has(+ .price__old) { color: #FF6D00 !important; } /* ----- 57f. Кнопки фільтра ----- .btn_f-color1 — «Застосувати», лишається лаймовою; .btn_f — «Скинути фільтр», на тесті це біла контурна кнопка, а не друга лаймова. */ .btn_f:not(.btn_f-color1) { background: #ffffff !important; border: 1px solid var(--sl-dark) !important; color: var(--sl-dark) !important; } .btn_f:not(.btn_f-color1):hover { background: var(--sl-dark) !important; color: #ffffff !important; } /* ----- 57g. Написи на кнопках жирніші ----- Було 500 (і на тесті так само) — замовниця просить жирний скрізь. Ставимо 700 на тій же добірці селекторів, що й у секції 56. */ button, .btn__main, .btn_cart, .btn_cart-add, .btn_cart_tr, .btn_f, .btn_f-color1, .btn_basket, .btn_small, .submit_custom, .button_oc, .simplecheckout-button, #simplecheckout_button_login, #simplecheckout_button_account, .btn-primary, .card_panel a { font-weight: 700 !important; } /* ===== 58. КОШИК У ШАПЦІ — вигляд і анімація з тесту (08.09.2026) ===== Розмітку іконки обгорнуто в cart.twig: контур лишився той самий, додано напис SLAVNI всередині (SVG-текст у координатах viewBox — масштабується разом з іконкою) і обгортку . Стан кошика розрізняє клас .has-items, який вішає скрипт синхронізації в header.twig; порожній — без заливки, з товаром — лаймова плашка. Класів на тут немає, тому селектори без префіксів. */ .sl-bag { display: inline-block; line-height: 0; vertical-align: middle; font-style: normal; } .sl-bag--flat .sl-bag__svg { display: block; overflow: visible; /* точка підвісу — середина ручки: пакет гойдається так, ніби його тримають за ручку, інакше рух читається як здригання */ transform-origin: 50% 8%; animation: slBagSwing 4.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite; } .basket_elem .sl-bag--flat text.sl-bag__mark { fill: var(--sl-dark); stroke: none; font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 4.4px; } @keyframes slBagSwing { 0% { transform: rotate(0deg); } 6% { transform: rotate(12deg); } 16% { transform: rotate(-9.5deg); } 26% { transform: rotate(6.5deg); } 36% { transform: rotate(-4deg); } 46% { transform: rotate(2deg); } 54% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } @keyframes slBagSwingHard { 0% { transform: rotate(0deg); } 20% { transform: rotate(-17deg); } 45% { transform: rotate(13deg); } 70% { transform: rotate(-7deg); } 100% { transform: rotate(0deg); } } /* Разовий сильний змах при додаванні товару — і одразу за ним повернення до постійного гойдання. Друга анімація в списку тут не просто так: якщо клас .sl-bag-spin з якоїсь причини лишиться на елементі (а саме це й ставалось, поки скрипт ловив неправильну назву анімації), кінцевий slBagSwingHard перекрив би нескінченний slBagSwing і значок завмер би назавжди. З цим записом рух повертається сам через 0.7s навіть із залиплим класом. */ .basket_elem .sl-bag--flat.sl-bag-spin .sl-bag__svg { animation: slBagSwingHard 0.7s ease-out, slBagSwing 4.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite 0.7s; } @media (prefers-reduced-motion: reduce) { .sl-bag--flat .sl-bag__svg, .basket_elem .sl-bag--flat.sl-bag-spin .sl-bag__svg { animation: none; } } /* Плашка: порожня прозора, з товаром — лайм. Перекриває 55l, де вона була лаймовою завжди (тоді ще не було скрипта, який розрізняє стан). */ @media screen and (min-width: 1024px) { .basket_bl { background: transparent !important; transition: background-color 0.25s linear; } .basket_bl.has-items { background: var(--sl-accent) !important; } } /* ===== 59. ПЛАШКА SALE (порт із тесту, 08.09.2026) ===== Ознаку рахує catalog/model/catalog/product.php → getSaleProductIds(): id категорії розпродажу береться з seo_url за ключем «rozprodazh», далі product_to_category × category_path, тож підкатегорії теж враховані. Форма: прямокутник із малим радіусом, тінь потрібна тому, що плашка лежить поверх фото — на світлому кадрі помаранчевий край без неї зливається з тлом. #FF6D00 тут фіксований: означає знижку, а не тему. */ .sl-sale-badge { position: absolute; left: 14px; top: 14px; z-index: 10; display: inline-block; padding: 6px 11px 5px; border-radius: 3px; background: #FF6D00; color: #ffffff; font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); pointer-events: none; } /* Наявні стікери товару малюються в тому ж куті — зсуваємо їх нижче. */ .card__top:has(.sl-sale-badge) #product_stickers { top: 34px; } /* ===== 60. ШАПКА Й ДРІБНИЦІ — вирівнювання з тестом (08.09.2026) ===== */ /* ----- 60a. Шапка нижча ----- Висоту смуги задає лого: .head_c це картинка плюс по 8px паддінгу. На проді лого 80px → смуга 97px, на тесті 52px → 69px. Зрівнюємо з тестом. */ @media screen and (min-width: 1024px) { .logo_head img { height: 52px !important; max-height: 52px !important; width: auto !important; } } /* ----- 60b. «Швидка покупка» — жирний напис ----- Видимий текст лежить у усередині посилання, і вага 400 бралася саме з нього; правило на самому нічого не давало. */ .card_panel a span { font-weight: 700 !important; } /* ===== 61. ВИРІВНЮВАННЯ З ТЕСТОМ ПО ЕЛЕМЕНТАХ (08.09.2026) ===== Зроблено після поелементного порівняння двох сайтів (колір, фон, рамка, вага, кегль і гарнітура на трьох типах сторінок). Нижче — усе, що розходилось і що можна вирівняти без ризику для прод-розмітки. */ /* Активна сторінка в пагінації була чорна #111, на тесті — графіт. Клас .pagination у цій темі не використовується: розмітка це .pagination_block > ul > li.active > a, тому селектор саме такий. */ .pagination_block li.active a, .pagination_block li.active span { background: var(--sl-dark) !important; } /* «Показати ще»: чорний напис і чорна рамка 2px. Це id, а не клас. */ #product_plus { color: var(--sl-dark) !important; border-color: var(--sl-dark) !important; } /* Лічильник кошика: на тесті 700, тут був 500. */ .basket_elem span { font-weight: 700 !important; } /* Бічна вкладка «Відгуки»: кегль 14px проти 11px на тесті. */ #feedback-button { font-size: 11px !important; } /* Пункти меню: на проді розмір «пливе» від ширини вікна (clamp(10px, 2.1cqw, 14px) у style.css) і на 1440px дає 11.4px, а на тесті стоїть рівно 14px. Зрівнюємо з тестом — але лише з 1300px, щоб на вужчих десктопах лишалась та сама захисна поведінка, заради якої clamp і писали. */ @media screen and (min-width: 1300px) { .menu__head > li > a { font-size: 14px !important; } } /* ===== 62. ПЕРЕНОС ІЗ ТЕСТУ: СМУГА ПІДКАТЕГОРІЙ, МЕНЮ, ЦІНИ В ПОПАПІ (08.09.2026) ===== */ /* ----- 62a. Смуга підкатегорій — щільніше ----- Замовниця просила менші відступи між категоріями у списку підкатегорій. Горизонталь дає свайпер: main.js переведений із slidesPerView: 8 на 'auto' зі spaceBetween 26/24/22/16 (див. коментар там). Тут — вертикальне повітря і те, без чого 'auto' не спрацює. */ .wh_name { padding: 2px 0 !important; } .slider_white-wrap { padding: 2px 0 !important; } /* Слайд завширшки зі свій текст — це і є те, що вмикає slidesPerView:'auto'. Без width:auto Swiper лишає ширину, пораховану попереднім режимом (152px на 1440), і 'auto' нічого не змінює. nowrap — щоб довга назва не ламалась на два рядки і не робила смугу вищою. */ .WhSlider .swiper-slide { width: auto !important; } .WhSlider .wh_name { white-space: nowrap; } /* style.css:4350-4351 центрували коротку смугу через margin:auto на крайніх слайдах. Swiper міряє слайд разом із margin, тож цей auto потрапляє у virtualSize і дає порожнє місце в кінці прокрутки. Центрування переїхало в centerInsufficientSlides (main.js), а тут відступи знімаємо. */ .WhSlider .swiper-slide:first-child { margin-left: 0 !important; } .WhSlider .swiper-slide:last-child { margin-right: 0 !important; } /* Коли гортати нема чого (напр. «Кофти» — три підкатегорії), Swiper вішає .swiper-button-lock, і style.css ховає кнопку. Секція 43 дає стрілкам display:flex !important і те приховування перебиває — повертаємо. */ .white_control .swiper-button-lock { display: none !important; } /* Місце під стрілки на самих краях: у крайніх положеннях градієнта немає, і шеврон сідав просто на текст першої/останньої назви. */ .WhSlider .swiper-slide:first-child { padding-left: 26px; } .WhSlider .swiper-slide:last-child { padding-right: 26px; } /* ----- 62b. Меню-випадайка: назви категорій помітніші ----- Заголовок групи 13px/700, а підпункти під ним 14px/400 — більший кегль переважував жирність, і два рівні читались однаково (Screenshot_25). Піднімаємо заголовок до 14px/800 і додаємо розрядки; підпункти не чіпаємо. Специфічність та сама, що в style.css (.menu__head li .drobd_title). */ .menu__head li .drobd_title, .menu__head li .drobd_title span { font-size: 14px !important; /* 800 було першим підходом (Screenshot_25) — заголовок групи мусив вигравати в підпунктів того ж кегля. 09.09.2026 замовниця попросила легше: 700 усе ще вдвічі важче за підпункти (400), але не «залипає» у випадайці, де всі рядки одного рівня (Screenshot_39). Секція 66 із тим самим числом для бургера тепер надлишкова, лишена як явний запис наміру. */ font-weight: 700 !important; letter-spacing: 0.03em !important; } /* ----- 62c. Акційна ціна в попапі кошика — оранжева, не червона ----- style.css:1400 фарбує .basket_m-price-new / .order_list-price-new у #c60c0c. Це той самий «новий» цінник, що в каталозі вже оранжевий (.price_color), просто інший клас — у попапі кошика й у списку замовлення. Стара ціна поруч (.basket_m-price-old) уже графітова з style.css:1363, її не чіпаємо. */ .basket_m-price-new, .order_list-price-new { color: #FF6D00 !important; } /* ----- Жирний напис доходить і до тих кнопок, де текст у ----- style.css має глобальне `body, p, span, li, td, input, select, textarea, label { font-weight: 400 }`. Воно виграє в наслідування, тож кнопка може бути 700, а видимий напис усередині лишається 400 — саме так було з «ЗАЛИШИТИ ВІДГУК» (.btn_tr > span) і раніше зі «ШВИДКОЮ ПОКУПКОЮ». Тому вагу треба ставити не тільки кнопці, а й спану в ній. .btn_tr додано і в сам список: у style.css він 600, а не 700. */ .btn_tr, button span, .btn__main span, .btn_cart span, .btn_cart-add span, .btn_cart_tr span, .btn_f span, .btn_f-color1 span, .btn_basket span, .btn_small span, .submit_custom span, .button_oc span, .simplecheckout-button span, .btn-primary span, .btn_tr span, .card_panel a span, #product_plus span { font-weight: 700 !important; } /* ----- 62e. Сердечко «в обране» — графіт, під курсором і в обраному акцент ----- Порт секції 12 з тесту. Перша спроба (секція 57d) ставила самий background-color і робила з сердечка суцільний темний кружечок — бо на проді .icon_wish це білий круг із background-image, а не маска. Працює тільки повний набір: прибрати картинку, віддати той самий SVG у mask і залити елемент кольором. Активний стан і ховер підміняють маску на залите сердечко (wish_f.svg) — обидва файли на проді вже лежать, style.css їх використовує. */ .icon_wish { background-image: none !important; background-color: var(--sl-dark); -webkit-mask-image: url(../img/wish.svg); mask-image: url(../img/wish.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: auto; mask-size: auto; } .icon_wish.active, .icon_wish:hover { background-color: var(--sl-accent); -webkit-mask-image: url(../img/wish_f.svg); mask-image: url(../img/wish_f.svg); } /* ===== 63. БУРГЕР І ОСОБИСТИЙ КАБІНЕТ (08.09.2026) ===== */ /* ----- 63a. Червоні пункти в меню й бургері ----- «НОВА КОЛЕКЦІЯ» і «РОЗПРОДАЖ» несуть інлайновий style="color:#BB271D" прямо в header.twig. Інлайн б'є будь-яке звичайне правило, але видимий текст лежить у вкладеному , який успадковує колір, — а пряме правило на span успадкування перебиває. Саме так це вже працює на тесті; шаблон не чіпаємо. */ .menu__head li .drobd_title span, .drobd_title.full span, .summer-sale-link span { color: var(--sl-dark) !important; } /* ----- 63b. Активна вкладка в бургері ----- style.css:1166 фарбує .menu-tab-switcher.active у хакі #839283. Підкреслення вже графітове (секція 55h), тепер і сам напис. */ .menu__head > li.mobile-menu-tabs .menu-tab-switcher, .menu__head > li.mobile-menu-tabs .menu-tab-switcher.active { color: var(--sl-dark) !important; } /* ----- 63c. Особистий кабінет — бічне меню ----- style.css:3203 і :3230 підсвічують активний і наведений пункт хакі. */ .aside_list li.active a, .aside_list li a:hover, .aside__list li.active a, .aside__list li a:hover { color: var(--sl-dark) !important; } /* ----- 63d. Особистий кабінет — посилання в тексті ----- style.css:3057 (.text_acc2 a) — хакі з підкресленням. Як і в попапах входу, замінюємо на графіт жирним: підкреслення лишається, колір іде в палітру. */ .text_acc2 a { color: var(--sl-dark) !important; font-weight: 700 !important; } /* ----- 63e. Особистий кабінет і реєстрація — чорний текст ----- Сторінки кабінету зібрані на стандартній розмітці OpenCart, куди тема не дійшла: заголовки груп, підписи полів і шапка блоку соцавторизації лишились чорними. Колір — і тільки колір, розкладку не чіпаємо. */ #content legend, #content .control-label, #content .form-horizontal label, .reg_socnetauth2__header, .text_acc, .text_acc2, .modal_title, .modal_text { color: var(--sl-dark) !important; } /* Стандартна кнопка OpenCart на реєстрації мала чорну рамку. */ #content .btn-primary, #content input.btn-primary { border-color: var(--sl-dark) !important; } /* ----- 63f. Заголовок сторінки ----- style.css:1517 (.title_h1 span) — хакі. */ .title_h1 span { color: var(--sl-dark) !important; } /* Стандартний

OpenCart на сторінках кабінету й реєстрації — чорний 32px. Тематичний заголовок (.title_h1) сюди не доходить, тож фарбуємо прямо. */ #content h1, #content h2, #content h3 { color: var(--sl-dark) !important; } /* ===== 64. ОСОБИСТИЙ КАБІНЕТ І ФОРМИ — РЕШТА ЧОРНОГО Й ХАКІ (08.09.2026) ===== */ /* Форми кабінету, входу й реєстрації живуть не в style.css, а в stylesheet/modal-login.css — і той файл підключений ПІСЛЯ slavni_ui.css, тож рівна специфічність програє йому. Тому тут скрізь !important. Ті самі класи використані і в шаблонах account/* (input_custom — 14 разів), тож це одночасно правка попапів і сторінок особистого кабінету. */ .formtitle_text, .block_reg-social span, .check_el-ac, .check_el-ac a { color: var(--sl-dark) !important; } /* Текст, який користувач набирає в полях, був #111. */ .input_custom, .textarea_custom { color: var(--sl-dark) !important; } /* Друга (світла) кнопка форм: напис #111, а під курсором вона заливалась чорним. Заливка йде в графіт, напис лишається світлим. */ .submit_reset { color: var(--sl-dark) !important; } .submit_reset:hover { background: var(--sl-dark) !important; border-color: var(--sl-dark) !important; color: #f3f3f6 !important; } .submit_dark { background: var(--sl-dark) !important; } /* Далі — те, що на тесті вже стоїть у секціях 8 і 20, а сюди не доїхало. */ /* Крапка обраного радіо в формах кабінету (style.css:2134) — хакі. */ .radio_acsii input[type='radio']:checked + span:after { background: var(--sl-dark) !important; } /* Картка адреси в кабінеті: хакі смуга ліворуч і хакі квадрат з іконкою (style.css:3371 і :3375). */ .adress_block-wrapper { border-left-color: var(--sl-dark) !important; } .icon_adress { background: var(--sl-dark) !important; } /* ===== 65. КОЛІР «НОВОЇ КОЛЕКЦІЇ» Й «РОЗПРОДАЖУ» В БУРГЕРІ (08.09.2026) ===== */ /* Замовниця попросила повернути колір двом пунктам, але ТІЛЬКИ в бургері: «НОВА КОЛЕКЦІЯ» — акцентний лайм (09.09.2026; до того був фірмовий червоний #BB271D з інлайну), «РОЗПРОДАЖ» — той самий оранжевий, що й акційна ціна. У випадайці на ПК обидва лишаються графітовими — тому все загорнуте в max-width. 1023px — це реальна межа: до неї включно видно .toggle_block і працює бургер, з 1024px він ховається і вмикається десктопне меню (заміряно). Розрізняти пункти доводиться по href: клас .drobd_title.full носять і звичайні категорії теж. Колір ставимо на , бо саме він перебиває інлайновий style="color:#BB271D" з header.twig (сам інлайн лишаємо). */ @media screen and (max-width: 1023px) { .menu__head li a.drobd_title[href*="new-collection"] span, .menu__head li a.drobd_title[href*="nova_kolektsiya"] span, .menu__head li a.drobd_title[href*="nova-kolekciya"] span { color: var(--sl-accent) !important; } .menu__head li a.drobd_title[href*="rozprodazh"] span, .menu__head li a.drobd_title.summer-sale-link span, .menu__head li a.drobd_title#toggleSale span { color: #FF6D00 !important; } } /* ===== 66. ВАГА ШРИФТУ В БУРГЕРІ (08.09.2026) ===== */ /* 800 просилось для випадайки на ПК (Screenshot_25): там заголовок групи 14px мусив виграти в підпунктів того ж кегля. У бургері підпунктів немає — усі рядки одного рівня, — і та сама вага читається як «занадто жирне». Тому вниз до 700 і тільки нижче 1024px; на ПК випадайка лишається 800. */ @media screen and (max-width: 1023px) { .menu__head li .drobd_title, .menu__head li .drobd_title span { font-weight: 700 !important; } } /* ===== 67. БАНЕРНА КНОПКА, КРАПКИ ГАЛЕРЕЇ, «В НАЯВНОСТІ» (08.09.2026) ===== */ /* «Дивитися все» на банерах головної. Під курсором кнопка йшла у ніжний лайм (--sl-accent-soft), а на лаймовій заливці це майже непомітно. Тепер вона заливається графітом з білим написом — той самий жест, що в «Купити в 1 клік» на сторінці товару. Стосується обох варіантів кнопки: .btn__main у банері розпродажу і .category_btn у плитках категорій. */ .btn__main:hover, .btn__main:focus, .category_btn:hover, .category_btn:focus { background: var(--sl-dark) !important; border-color: var(--sl-dark) !important; color: #ffffff !important; text-decoration: none; } /* Активна крапка в галереї товару була хакі #839283 — останній залишок старої палітри на сторінці товару (видно на мобільному, Screenshot_30). */ .swiper-pagination-bullet-active { background: var(--sl-dark) !important; border-color: var(--sl-dark) !important; } /* Галочка біля «В наявності» — акцентний лайм. Решта галочок на сайті (умови доставки й повернення) лишається графітовою, тому селектор прив'язаний саме до .availability_wrapper. */ .availability_wrapper svg path { fill: var(--sl-accent) !important; } /* Біжучий рядок: замовниця попросила текст графітом. Раніше свідомо лишався #111111 — тоді йшлося про те, що з рядка переносимо тільки шрифт. */ .marquee_ins { color: var(--sl-dark) !important; } /* ===== 68. ХОВЕР КНОПОК КОШИКА (08.09.2026) ===== */ /* «Додати у кошик» і «Дивитись кошик» у попапі — той самий ховер, що в банерної кнопки: заливка графітом, білий напис. Було: ніжний лайм поверх лайму (--sl-accent-soft), тобто зміна майже непомітна. .btn_cart-add / .btn_cart_tr («Купити в 1 клік») сюди не входять — вони контурні й уже заливаються графітом, це той самий жест іншим шляхом. */ .btn_cart:hover, .btn_cart:focus, .btn_basket:hover, .btn_basket:focus, .btn_small:hover, .btn_small:focus { background: var(--sl-dark) !important; border-color: var(--sl-dark) !important; color: #ffffff !important; text-decoration: none; } /* ===== 69. КОШИК З ТОВАРОМ НА ТЕЛЕФОНІ (08.09.2026) ===== Секція 58 розрізняє порожній і повний кошик тільки в @media (min-width:1024px) — там це лаймова плашка на всю висоту шапки. На вужчих екранах плашки немає за задумом, але й підсвітки не було жодної: іконка лишалась графітовою і з товаром, і без. На тесті мобільний варіант зроблений інакше — плашки теж немає, зате акцентом фарбується сама іконка, напис SLAVNI в ній і лічильник. Порт того самого блоку (там він у секції 53e, під body.sl-cart-flat; тут класів на немає, тож селектори без префікса). Клас .has-items вішає скрипт синхронізації в header.twig — він працює на будь-якій ширині, тобто нічого, крім CSS, для цього не бракувало. */ @media screen and (max-width: 1023px) { .basket_elem { background: transparent; } .basket_bl.has-items .basket_elem .sl-bag--flat svg path { fill: var(--sl-accent) !important; } .basket_bl.has-items .basket_elem span { color: var(--sl-accent) !important; } /* Напис SLAVNI лишається графітовим — так він і виглядає на тесті. Це не недогляд: іконка контурна, за нею білий фон, і лаймові літери 4.4px на білому дають 1.3:1, тобто зникають. Графіт усередині лаймового контуру читається. */ .basket_bl.has-items .basket_elem .sl-bag--flat text.sl-bag__mark { fill: var(--sl-dark); } } /* ===== 70. СТРІЛКИ КАРУСЕЛЕЙ ТОВАРІВ — ЧОРНЕ НА ГРАФІТ (09.09.2026) ===== Круглі стрілки під заголовками «З цим товаром купують», «Новинки» тощо (.prev_st / .next_st у .button_control). style.css:1815 заливає їх під курсором чистим чорним #111111 з такою ж рамкою — останній чорний елемент на сторінці товару. Шеврон обовʼязково стає білим: у темі його fill лишався графітовим і на ховері, тож на чорному колі стрілка майже зникала (саме це на Screenshot_32 і видно — темний кружечок ледь із чим усередині). Графіт на графіті дав би те саме, тому фон і значок міняємо парою. :focus-visible додано для клавіатури, :active — щоб натиснута стрілка на тачі не лишалась білою до першого руху пальцем. */ .prev_st:hover, .next_st:hover, .prev_st:active, .next_st:active, .prev_st:focus-visible, .next_st:focus-visible { background: var(--sl-dark) !important; border-color: var(--sl-dark) !important; } .prev_st:hover svg path, .next_st:hover svg path, .prev_st:active svg path, .next_st:active svg path, .prev_st:focus-visible svg path, .next_st:focus-visible svg path { fill: #ffffff !important; } /* ===== 71. ФОРМА ВІДГУКУ — ЧОРНЕ Й ШАВЛІЄВЕ (09.09.2026) ===== Порт секцій 54a і 54h з тесту: панель «Залишити відгук» лишалась поза палітрою (Screenshot_33). Заміряно в живій панелі, різниця з тестом була рівно в чотирьох місцях — самі зірки оцінки і три підписи. Кнопки «Залишити відгук» і «Надіслати відгук» уже графітові (секція 55), просто на скріншоті 2px рамка читається як чорна. Свідомо НЕ чіпаємо: дати відгуків (#999) і підпис поля форми (#858585) — це другорядний текст, він і має бути тьмянішим за основний; світлий фон картки (#F6F6F6), роздільники (#E9E9E9) і лаймову плашку бічної вкладки. */ /* Зірки, якими ставлять оцінку. Це FontAwesome-гліфи, тобто колір задає `color`, а не `fill`; на проді вони лишались чорними. */ .add-review-star-wrap .fa-star, .star-block .fa-star { color: var(--sl-dark) !important; -webkit-text-stroke: 0; } /* Підписи під зірками («Поганий»…), напис «Фото» і тексти блоку додавання фото — усе це було #111111. */ .ex-review-section .super-star-text, .ex-review-section .btn-link-text, .ex-review-section .review-media-text-block, .ex-review-section .review-media-add-block a, .ex-review-section .btn-link-review a, .ex-review-section .ex-policy a, .ex-review-section .review-extended-average, .ex-review-section .ex-review-author, .ex-review-section .ex-review--text, .ex-review-section .product-name a { color: var(--sl-dark) !important; } /* Іконки всередині блоку. :not([fill="none"]) обовʼязкове: у стрілки-підказки біля «Додайте фото» першим лежить path "M0 0h47v22H0z" з fill="none" — прямокутник-підкладка на всю площу. Без винятку правило заливає саме його, і замість стрілки виходить темний прямокутник (09.09.2026, Screenshot_34). Сама стрілка — окремий path з fill="#a6a5a5", нейтральний сірий. */ /* :not([fill]) обовʼязкове. У блоці відгуків є іконки, які самі оголошують свій колір, і його треба лишити: у значка «додати фото» два path мають fill="#fff" — це плюсик у темному кружечку, і без винятку він зникає в заливці (09.09.2026, Screenshot_43); у стрілки-підказки path зі своїм fill="#a6a5a5". Фарбуємо тільки ті, що кольору не мають і тому чорні. */ .ex-review-section svg path:not([fill]) { fill: var(--sl-dark) !important; } /* ⚠️ Виняток для стрілки-підказки біля «Додайте фото». Її побудований так: з двома path — перший «M0 0h47v22H0z» без власного fill (прямокутник на всю площу, підкладка) і другий із fill="#a6a5a5" (сама стрілка). Правило вище заливає підкладку, і замість стрілки виходить темний прямокутник — саме це було 09.09.2026, Screenshot_34. Спроба відсіяти :not([fill="none"]) не працює: none стоїть на , а не на path. Тому відновлюємо обидва стани через наявність атрибута: path без fill лишається прозорим, path з fill повертає свій сірий. */ /* Специфічність тут не випадкова: правило вище (.ex-review-section svg path:not([fill])) важить (0,2,2) через :not з атрибутом, тож простий селектор із двома класами програвав би йому і прямокутник повертався. svg.user-content-add-caption-arrow дає ті самі (0,2,2), а далі вирішує порядок у файлі — цей блок нижче. */ .ex-review-section svg.user-content-add-caption-arrow path { fill: none !important; } .ex-review-section svg.user-content-add-caption-arrow path[fill] { fill: #a6a5a5 !important; } /* ⚠️ Стрілку-підказку біля «Додайте фото» НЕ фарбувати заливкою. Всередині її першим лежить path "M0 0h47v22H0z" з fill="none" — це прямокутник на всю площу, підкладка. Будь-яке `fill` на svg/path заливає саме його, і замість стрілки виходить темний прямокутник (так і сталось 09.09.2026). Сама стрілка — окремий path із fill="#a6a5a5", тобто нейтральний сірий, а не чорний; лишаємо як є. */ /* Догортка 71: три чорні місця, яких на тесті вже немає (заміряно поруч). */ /* Назва обраного кольору під галереєю. */ .sl-color-name { color: var(--sl-dark) !important; } /* Іконка «Підібрати розмір» біля посилання на таблицю розмірів. */ .product-sizechart .size_link svg, .product-sizechart .size_link svg path { fill: var(--sl-dark) !important; stroke: var(--sl-dark) !important; } /* Іконка посилання «в кошик» у шапці попапа кошика. */ .basket_modal-cartlink svg, .basket_modal-cartlink svg path { fill: var(--sl-dark) !important; } /* ===== 72. ЗІРКИ У ФОРМІ ВІДГУКУ — СПРАВЖНЯ ПРИЧИНА ХАКІ (09.09.2026) ===== Секція 71 фарбувала .fa-star через color — і не могла спрацювати, бо зірка тут не гліф шрифту. extended_reviews.css:46 малює її як background-image на ::after: inline-SVG у data-URI, де колір зашитий прямо в атрибути stroke="#839283" (порожня) і fill+stroke="#839283" (.star-active, тобто обрана оцінка). Жодне правило на color/fill до цього не дістає — треба перевизначити саму картинку. Нижче ті самі два SVG, байт-у-байт, тільки #839283 → #3D4340. Розмір і позицію не чіпаємо: їх задає той самий блок у extended_reviews.css. */ .add-review-star-wrap .fa-star:after, .star-block .fa-star:after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='21' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.345 6.636.116.235.26.038 6.03.877c.138.022.21.053.244.071a.844.844 0 0 1-.159.208l-4.36 4.253-.189.184.045.259 1.032 6c.003.024.006.076.006.165a.302.302 0 0 1-.014.1.534.534 0 0 1-.211-.077l-.008-.004-.008-.004-5.396-2.837-.233-.122-.233.122-5.396 2.837-.007.003a.583.583 0 0 1-.232.083.298.298 0 0 1-.014-.1v-.012l.003-.035.015-.117 1.032-6.002.045-.26-.189-.183L1.16 8.073a.94.94 0 0 1-.153-.216.765.765 0 0 1 .243-.071l6.03-.877.26-.038.116-.235 2.704-5.469.006-.011A.576.576 0 0 1 10.5.954a.574.574 0 0 1 .135.201l.006.012 2.704 5.469ZM4.65 19.06Z' fill='none' stroke='%233D4340'/%3E%3C/svg%3E") !important; } .add-review-star-wrap .star-active .fa-star:after, .star-block.star-active .fa-star:after, .star-active .fa-star:after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='21' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.345 6.636.116.235.26.038 6.03.877c.138.022.21.053.244.071a.844.844 0 0 1-.159.208l-4.36 4.253-.189.184.045.259 1.032 6c.003.024.006.076.006.165a.302.302 0 0 1-.014.1.534.534 0 0 1-.211-.077l-.008-.004-.008-.004-5.396-2.837-.233-.122-.233.122-5.396 2.837-.007.003a.583.583 0 0 1-.232.083.298.298 0 0 1-.014-.1v-.012l.003-.035.015-.117 1.032-6.002.045-.26-.189-.183L1.16 8.073a.94.94 0 0 1-.153-.216.765.765 0 0 1 .243-.071l6.03-.877.26-.038.116-.235 2.704-5.469.006-.011A.576.576 0 0 1 10.5.954a.574.574 0 0 1 .135.201l.006.012 2.704 5.469ZM4.65 19.06Z' fill='%233D4340' stroke='%233D4340'/%3E%3C/svg%3E") !important; } /* ===== 73. СТОРІНКИ ІНФОРМАЦІЇ Й ВІДГУКІВ — РЕШТА ХАКІ (09.09.2026) ===== Заміряно поруч із тестом на /reviews/, /oplata-i-dostavka/ і /obmin-ta-povernennya/. Скрізь це той самий #839283 старої теми: на тесті він давно перекритий, на прод не доїхав. */ /* Блок «Рейтинг магазину» і картки відгуків (Screenshot_38). */ .reviews__total-block { border-color: var(--sl-dark) !important; } .reviews__star-n { background: var(--sl-dark) !important; } .review__card { border-top-color: var(--sl-dark) !important; } /* Квадрати з іконками на «Оплата і доставка» та «Обмін та повернення». */ .delive_block-icon { background: var(--sl-dark) !important; } /* extended_reviews.css: рештки хакі в самому модулі відгуків. .cheating-button — це «Визначити файли» у вікні завантаження фото (Screenshot_40); .review-video .btn — кнопка під відео у відгуку. */ .cheating-button, .review-video .btn { background: var(--sl-dark) !important; border-color: var(--sl-dark) !important; } .cheating-button:hover, .review-video .btn:hover { color: var(--sl-dark) !important; background: #ffffff !important; } .ex-review--image { border-bottom-color: var(--sl-dark) !important; } .swiper-pagination.pagination_e-r span { border-color: var(--sl-dark) !important; } .media-add-button-icon { fill: var(--sl-dark) !important; } /* Дрібний текст під формою відгуку лишався #111. */ .form-text_acc, .form-text_acc a { color: var(--sl-dark) !important; } /* Заголовок сторінок інформації. Тема їх не стилізує взагалі — це голий

без класу, тож він брав чорний від браузера. Селектор навмисно вузький: тематичні заголовки (.title_h1 і подібні) мають класи й сюди не потрапляють, тому світлі заголовки на темному тлі лишаються як були. */ h1:not([class]) { color: var(--sl-dark) !important; } /* ===== 74. ПАНЕЛЬ ФІЛЬТРА — ІЄРАРХІЯ Й РАМКА КНОПКИ (09.09.2026) ===== Screenshot_41. Ієрархія була перевернута: значення («Бавовна», «Віскоза») малювались #111111 вагою 700, а назви груп («ЦІНА», «МАТЕРІАЛ») — графітом вагою 600. Тобто важче виглядало те, що має бути тлом для вибору. Міняємо місцями наголос: група важча, значення легші й у палітрі. */ .block_fv .elem_op_title, .filter-elem .elem_op_title { color: var(--sl-dark) !important; font-weight: 700 !important; } .filter-elem .text_param, .block_fv .text_param { color: var(--sl-dark) !important; font-weight: 400 !important; } /* «Показати усі» лишалось хакі #839283. */ .title_show-more { color: var(--sl-dark) !important; } /* «Застосувати» — єдина кнопка сайту без обведення: рамка збігалася з лаймовою заливкою, тож поруч зі «Скинути фільтр» вона читалась як інша форма. */ .btn_f-color1 { border-color: var(--sl-dark) !important; } /* Рештки хакі у формі відгуку на /reviews/ (заміряно окремо): квадрат з іконкою «додати файл» і велика іконка-заглушка над формою. */ .input_file-wrap label i { background: var(--sl-dark) !important; } .form-img svg path { fill: var(--sl-dark) !important; } /* ===== 75. КАРТКА АДРЕСИ В КАБІНЕТІ — «EDIT» І «ВИДАЛИТИ» В ОДИН РЯДОК ===== */ /* Screenshot_36 проти Screenshot_37: на проді олівець стояв над написом «Edit», а «Видалити» з'їхало на третій рядок. Шаблон і правила теми в style.css на обох сайтах байт-у-байт однакові, тож розкладку тримало щось стороннє — і покладатись на неї далі не варто. Тому замість того, щоб шукати, хто саме зняв position:absolute зі значка, переписуємо блок на флекс: він дає рядок незалежно від того, що роблять інші правила. Значок стає звичайним елементом потоку з проміжком 6px, абсолютне позиціонування знімаємо явно, інакше воно б лишило порожнє місце. Вага 400 повернута навмисно: «Видалити» це