/** * ELBIN R2 — структурний CSS основного рядка хедера (desktop). * * Перетворює дефолтний середній рядок Blocksy (логотип · Каталог · пошук · * дії) на лейаут фінального дизайну elbin-final-v1 (header.jsx / styles.css): * grid auto · minmax(0,1fr) · auto → пошук тягнеться, дії притиснуті вправо. * * Усе нижче — ЛИШЕ десктоп (≥1000px, брейкпоінт Blocksy). Мобільний рядок * (бургер + лого + іконки) НЕ чіпаємо — лишається як у затвердженому дизайні. * * Кольори/радіуси беруться з токенів (tokens.css). Мапінг до фінального * дизайну: --accent=--elbin-r2-accent, --accent-deep=--elbin-r2-accent-700, * --accent-tint=--elbin-r2-accent-50, --header-*=--elbin-r2-header-*. * * Підключається ПІСЛЯ fibosearch.css (залежність у enqueue.php), щоб * перебити старий скін поля пошуку (висота/рамка/радіус/ширина). * * @package ELBIN * @since 2.0.0 * @date 22.06.2026 */ /* ─────────────────────────────────────────────── ФОН ХЕДЕРА = спільний темний токен шапки/підвалу (--elbin-surface-dark). Customizer-інлайн (ct-main-styles-inline-css) ставить background-color:#000000 на рядки хедера, і друга копія інлайну йде ПІСЛЯ цього файлу в , тож за рівної специфічності виграє інлайн. Щоб токен переміг БЕЗ !important — додаємо html-префікс (+1 type-селектор до специфічності). Так колір хедера й футера керується з одного місця (tokens.css → --elbin-surface-dark). ─────────────────────────────────────────────── */ html [data-header*="type-1"] .ct-header [data-row*="top"] { /* топ-смуга — світліша за решту темних поверхонь (рішення 10.07) */ background-color: var(--elbin-r2-header-top-bg, #1A1A1A); } html [data-header*="type-1"] .ct-header [data-row*="middle"] { /* основний ряд — трохи темніший за топ-смугу; той самий токен читає стікі-бар (баг 10.07: стікі світлішав, бо брав --elbin-r2-header-bg) */ background-color: var(--elbin-r2-header-mid-bg, #0D0D0D); } @media (min-width: 1000px) { /* ─────────────────────────────────────────────── КОНТЕЙНЕР СЕРЕДНЬОГО РЯДКА — grid 1fr · auto · 1fr (R-G) Структура Blocksy: [data-row="middle"] > .ct-container-fluid — це GRID (start/middle/end). Шаблон R-G: start=1fr (лого, тягне бічну колонку рівно з end), middle=auto (група Каталог+пошук за контентом — геометрично ПО ЦЕНТРУ між двома рівними 1fr), end=1fr (дії справа). Дві однакові 1fr-колонки по краях → auto-трек middle центрується. start вирівнює вміст вліво (flex-start, лого зліва), end — вправо (flex-end, дії справа). Пошук усередині middle — фіксований 560px. Селектор #header підіймає специфічність. */ #header [data-row="middle"] > [class*="ct-container"], [data-row="middle"] > [class*="ct-container"] { /* R-N: бічні колонки = ГАРАНТОВАНИЙ мінімум 376px (= реальна ширина блоку дій з підписами Обране/Кошик/Кабінет; лого вужче, 124px). Рівні мінімуми → група Каталог+пошук лишається геометрично по центру. Це БАЗА = режим ≥1600px (де все вміщається з пошуком до 560px). Нижче 1600px підписи дій ховаються (іконки), а мінімум падає до 160px — див. @media(max-width:1599px) у кінці файлу. Так дії НІКОЛИ не наїжджають на пошук, а Каталог — на лого, на будь-якій ПК-ширині. */ grid-template-columns: minmax(376px, 1fr) auto minmax(376px, 1fr); align-items: center; gap: 16px; position: relative; } /* start / end — за контентом */ [data-row="middle"] [data-column="start"], [data-row="middle"] [data-column="end"] { display: flex; align-items: center; gap: 20px; min-width: 0; } /* START-колонка (1fr) тримає ЛИШЕ лого (R-G). Вміст вліво (flex-start), щоб лого сиділо біля лівого краю, а порожній простір 1fr був праворуч від лого — це й центрує auto-трек middle. gap неважливий (1 елемент). */ [data-row="middle"] [data-column="start"] { justify-content: flex-start; gap: 10px; } /* ─────────────────────────────────────────────── START-КОЛОНКА = [logo] (R-F). Розкладка: [ЛОГО] | [Каталог · пошук-560px] | [дії]. R-F: Каталог винесено зі start у middle (placements start=[logo], middle=[button, menu-secondary]) — щоб Каталог стояв ВПРИТУЛ до пошуку (одна колонка), а лого лишилось ОКРЕМО зліва з проміжком до групи Каталог+пошук (проміжок дає grid gap:16px між колонками start↔middle). ─────────────────────────────────────────────── */ /* Лого в ОСНОВНОМУ рядку — зліва, вертикально центроване. Рядок тут вищий за топ-бар (54px), тож лого крупніше за топбарне (38px). R-F: збільшено 44px → 60px (ціль 56-64px, лого помітніше зліва). Розмір керуємо суто CSS — theme_mod logo height НЕ чіпаємо. min-height рядка тримає вертикаль, щоб крупніше лого не «стрибало» відносно решти елементів. */ [data-row="middle"] .site-branding, [data-row="middle"] .site-logo-container, [data-row="middle"] .ct-logo-container { display: flex; align-items: center; flex: 0 0 auto; min-height: 80px; /* R-P: лого 70px + люфт; = висота стікі-бару (узгоджено) */ } [data-row="middle"] .site-logo-container img, [data-row="middle"] .ct-logo-container img, [data-row="middle"] .site-branding img { max-height: 70px; /* R-M: 60px → 70px (рішення Данила) */ height: auto; width: auto; object-fit: contain; } /* ─────────────────────────────────────────────── СЕРЕДНЯ КОЛОНКА = [button(Каталог), menu-secondary(пошук)] (R-G). Колонка — auto-трек, ПО ЦЕНТРУ рядка (затиснута двома 1fr по краях). Усередині — flex-рядок (Каталог + пошук), читається зліва направо (flex-start), Каталог↔пошук впритул (gap:8px). Пошук фіксований ~560px. Сама колонка центрована геометрично за рахунок grid 1fr·auto·1fr. */ [data-row="middle"] [data-column="middle"] { display: flex; align-items: center; justify-content: flex-start; gap: 20px; /* R-I: Каталог ↔ пошук розведено до 20px (рішення Данила) */ min-width: 0; } /* Внутрішня обгортка items у start/end (data-items) — Blocksy робить її розтяжною; у flex-ряду їй досить бути за контентом. */ [data-row="middle"] [data-column="start"] > [data-items], [data-row="middle"] [data-column="start"] > div, [data-row="middle"] [data-column="end"] > [data-items], [data-row="middle"] [data-column="end"] > div { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; } /* Внутрішня start-обгортка: вміст вліво + лого↔Каталог впритул (gap:10px, перебиває спільні 20px вище — R-E). */ [data-row="middle"] [data-column="start"] > [data-items], [data-row="middle"] [data-column="start"] > div { justify-content: flex-start; gap: 10px; } /* Прибираємо дефолтні Blocksy-margin'и на елементах [data-items] > * (branding/cta mr:10 + ml:10), що додаються ДО flex-gap і роздувають проміжки. Blocksy задає їх правилом `#header [data-items] > * { margin: var(--margin, 0 10px) }` (специфічність 1-0-1), тож ПЕРЕБИВАЄМО префіксом #header (1-3-0). R-F: лого тепер єдине в start; Каталог (.ct-header-cta) переїхав у MIDDLE — обнуляємо його margin і ТАМ, інакше Blocksy `0 10px` додасть ~10px до gap:8px (Каталог↔пошук) і впритул не вийде. */ #header [data-row="middle"] [data-column="start"] .site-branding, #header [data-row="middle"] [data-column="middle"] .ct-header-cta, #header [data-row="middle"] [data-column="middle"] #header-menu-2 { margin-left: 0; margin-right: 0; } /* Внутрішня обгортка елементів middle (R-F) — flex-рядок Каталог+пошук, ВЛІВО, gap:8px впритул. Більше НЕ тягнеться на весь трек (відкат R-E width:100%) — пошук усередині має фіксовану ширину ~560px (нижче). */ [data-row="middle"] [data-column="middle"] > [data-items], [data-row="middle"] [data-column="middle"] > div { display: flex; align-items: center; justify-content: flex-start; gap: 20px; /* R-I (історичне): між Каталогом і пошуком; R-J вийняв Каталог із потоку, тож тепер тут лише пошук */ flex: 0 1 auto; min-width: 0; } /* ─────────────────────────────────────────────── R-M: кнопка «Каталог» — У ПОТОЦІ middle-колонки, групою з пошуком (проміжок 20px з правила вище), група центрована грідом 1fr·auto·1fr. ВІДКОЧЕНО R-J (absolute «midway»): вимір на staging показав, що абсолютне позиціонування наїжджало на лого на ВСІХ десктопних ширинах до 1600px (1366/1440 — найпоширеніші ноутбуки). Потік + flex-проміжки + адаптивний пошук (clamp вище) гарантують відсутність наїзду на будь-якій ширині. position:static перебиває можливий залишковий absolute. */ [data-row="middle"] [data-column="middle"] .ct-header-cta { position: static; transform: none; margin: 0; } [data-row="middle"] [data-column="end"] { justify-content: flex-end; gap: 4px; /* дії-іконки тісніше, як у дизайні (.sh-actions gap:4px) */ } [data-row="middle"] [data-column="end"] > [data-items], [data-row="middle"] [data-column="end"] > div { justify-content: flex-end; gap: 4px; } /* ─────────────────────────────────────────────── КНОПКА «КАТАЛОГ» — бірюзова рамка → заливка (.sh-catalog) Тригер мегаменю: посилання a[href="#elbin-catalog"] у CTA-елементі білдера (.ct-header-cta) або пункті меню. ─────────────────────────────────────────────── */ [data-row="middle"] a[href="#elbin-catalog"] { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; height: 50px; padding: 0 20px; border-radius: var(--elbin-r2-r-control); border: 1.5px solid var(--elbin-r2-accent); /* рамка в колір фону — край чіткий, габарити не стрибають */ background: var(--elbin-r2-accent); /* R-I: суцільна бірюзова заливка у спокої */ color: var(--elbin-r2-ink-on-accent); /* темний контраст #063D2E — той самий ink, що на кнопці-лупі пошуку */ font-family: var(--elbin-r2-font-ui); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } [data-row="middle"] a[href="#elbin-catalog"]:hover, [data-row="middle"] a[href="#elbin-catalog"].is-active, [data-row="middle"] a[href="#elbin-catalog"][aria-expanded="true"] { background: var(--elbin-r2-accent-700); /* R-I: hover темніша бірюза #0E9994 */ color: var(--elbin-r2-ink-on-accent); border-color: var(--elbin-r2-accent-700); } /* Іконка-сітка в кнопці (svg, якщо є) фарбується currentColor */ [data-row="middle"] a[href="#elbin-catalog"] svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; } /* R-K: іконка-сітка 2×2 перед текстом «Каталог товарів». Чотири квадрати через CSS mask + currentColor → колір = колір тексту (#063D2E), на hover лишається контрастним. Без svg у DOM (рішення Данила: текст міняє PHP-фільтр, іконку — CSS). gap:9px кнопки дає відступ до тексту. */ [data-row="middle"] a[href="#elbin-catalog"]::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat; } /* ─────────────────────────────────────────────── ПОШУК — ланцюг menu-обгортки FiboSearch (R-F). FiboSearch вставлено як пункт меню: середня колонка містить nav#header-menu-2 > ul.menu > li > .dgwt-wcas-search-wrapp. R-F: ланки задають ФІКСОВАНУ ширину 560px (не тягнуться flex'ом, як у R-E). flex:0 0 560px фіксує блок, width:560px дублює для надійності. Так пошук — стабільна «пігулка» ~560px поряд з Каталогом, а не розтягнута на весь вільний простір. */ [data-row="middle"] #header-menu-2, [data-row="middle"] #header-menu-2 > ul.menu, [data-row="middle"] #header-menu-2 > ul.menu > li { display: flex; flex: 0 0 560px; width: 560px; min-width: 0; margin: 0; } /* ─────────────────────────────────────────────── ПОШУК (FiboSearch Solaris) — поле на всю ширину колонки (.sh-search). ВАЖЛИВО: плагін (style.min.css) позиціонує submit-кнопку ABSOLUTE справа поверх поля, а НЕ flex-сіблінгом. Тому НЕ ламаємо цю розкладку — лишаємо submit absolute, лише перефарбовуємо/розмір, а поле розтягуємо й даємо праве поле під кнопку. Специфічність плагіна: поле = `.dgwt-wcas-sf-wrapp input[type=search] .dgwt-wcas-search-input` (0-3-1), submit = `.dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit` (0-2-1). Перебиваємо, додаючи [data-row="middle"] до того ж ланцюга → вища специфічність. ─────────────────────────────────────────────── */ /* Поле пошуку — ФІКСОВАНА ширина ~560px (R-F). R-E тягнув поле на весь трек (flex:1; width:100% → ~767px @1440). Тепер фіксуємо 560px: flex:0 0 560px + width:560px. position:static (плагін має relative на .sf-wrapp нижче, що якорить absolute submit — цей relative НЕ чіпаємо). max-width:560 страхує від розтягування. */ [data-row="middle"] .dgwt-wcas-search-wrapp { position: static; /* R-N: ДЕТЕРМІНОВАНА ширина (flex:0 0 auto — без grow/shrink), щоб не залежати від flex-shrink і медіа-брейкпоінтів плагіна FiboSearch. БАЗА = режим ≥1600px (підписи дій): 100vw−1046px = padding(60)+2×бічні(752)+проміжки(32)+Каталог(182)+проміжок(20). Обмежено 380…560px. <1600px формула переозначається (нижче). */ flex: 0 0 auto; width: clamp(380px, calc(100vw - 1046px), 560px); max-width: none; transform: none; left: auto; /* R-M: обнуляємо бічні маргіни — FiboSearch додає їх (≈37px) на деяких ширинах (1180-1260px), що зсувало поле праворуч у дії. Без них поле тримається проміжку 20px після Каталогу (flex gap). */ margin-left: 0; margin-right: 0; } /* «Пігулка» = .sf-wrapp: рамка-акцент, фон, радіус, фіксована висота. Лишається position:relative (з плагіна) — submit absolute якорить тут. */ [data-row="middle"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp { height: 50px; background: var(--elbin-r2-surface); border: 1.5px solid var(--elbin-r2-accent); border-radius: var(--elbin-r2-r-control); overflow: hidden; transition: background 0.15s, box-shadow 0.15s, border-color 0.15s; } /* HOVER (без фокусу) — мʼякший за focus-ring натяк: насиченіша рамка (--accent-700) + легка тінь. focus-ring нижче перебиває цей стан. */ [data-row="middle"] .dgwt-wcas-search-wrapp:hover .dgwt-wcas-sf-wrapp { border-color: var(--elbin-r2-accent-700); box-shadow: 0 2px 10px rgba(14, 153, 148, 0.18); } /* Поле вводу — ланцюг із 3 класів + type, щоб перебити плагін (0-3-1). Префікс #header підіймає специфічність над інлайн-палітрою Blocksy. Фідбек Данила (22.06): введений текст був білий на білому полі — ставимо темний --text + страховка -webkit-text-fill-color (деякі скіни Solaris фарбують саме fill-color у білий). */ #header [data-row="middle"] .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input, [data-row="middle"] .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input { width: 100%; height: 100%; border: none; background: transparent; border-radius: 0; padding: 0 64px 0 14px; /* праве поле під absolute submit (56px) */ font-family: var(--elbin-r2-font-ui); font-weight: 400; font-size: 15px; line-height: normal; color: var(--elbin-r2-text); -webkit-text-fill-color: var(--elbin-r2-text); box-shadow: none; outline: none; box-sizing: border-box; } #header [data-row="middle"] .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus, [data-row="middle"] .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus { border: none; background: transparent; box-shadow: none; outline: none; color: var(--elbin-r2-text); -webkit-text-fill-color: var(--elbin-r2-text); } #header [data-row="middle"] .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder, [data-row="middle"] .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder { color: var(--elbin-r2-text-3); -webkit-text-fill-color: var(--elbin-r2-text-3); opacity: 1; /* деякі браузери приглушують placeholder за замовч. */ font-style: normal; font-weight: 400; } /* Focus-ring на всій «пігулці» (коли поле у фокусі) */ [data-row="middle"] .dgwt-wcas-search-wrapp.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp, [data-row="middle"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp:focus-within { background: var(--elbin-r2-accent-50); box-shadow: 0 0 0 3px rgba(26, 208, 202, 0.18); } /* Submit-кнопка: лишаємо absolute (з плагіна), перефарбовуємо/розмір. Ланцюг .sf-wrapp button.dgwt-wcas-search-submit + [data-row] → 0-2-1+attr. */ [data-row="middle"] .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit, [data-row="middle"] .dgwt-wcas-sf-wrapp input[type="submit"].dgwt-wcas-search-submit { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 56px; min-width: 56px; height: 100%; padding: 0; margin: 0; border: none; border-radius: 0; background-color: var(--elbin-r2-accent); color: var(--elbin-r2-ink-on-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; text-shadow: none; box-shadow: none; transition: background-color 0.15s; } [data-row="middle"] .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover { background-color: var(--elbin-r2-accent-hover); opacity: 1; } [data-row="middle"] .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier { width: 18px; height: 18px; fill: var(--elbin-r2-ink-on-accent); } /* Прелоадер / кнопка очищення — від правого краю поля, поза submit (56px) */ [data-row="middle"] .dgwt-wcas-preloader, [data-row="middle"] .dgwt-wcas-close { right: 66px; } /* ─────────────────────────────────────────────── ІКОНКА-ДІЯ АКАУНТ (50×50-квадрат). Кошик ВИВЕДЕНО з цього правила нижче (own flex-рядок з лейблом «Кошик», по аналогії з wishlist «Обране»). ─────────────────────────────────────────────── */ [data-row="middle"] .ct-header-account { position: relative; width: 50px; height: 50px; border-radius: var(--elbin-r2-r-control); display: inline-flex; align-items: center; justify-content: center; color: var(--elbin-r2-header-text-3); background: transparent; text-decoration: none; transition: background 0.15s, color 0.15s; } [data-row="middle"] .ct-header-account:hover { background: rgba(255, 255, 255, 0.1); color: var(--elbin-r2-accent); } /* Іконка всередині акаунта — світла (currentColor) */ [data-row="middle"] .ct-header-account svg { width: 26px; height: 26px; } /* ─────────────────────────────────────────────── WISHLIST (Обране) — дія з іконкою + текстом «Обране». Не 50×50-квадрат, а flex-рядок (іконка + лейбл), авто-ширина. ─────────────────────────────────────────────── */ [data-row="middle"] .elbin-r2-wishlist-head { position: relative; width: auto; height: 50px; border-radius: var(--elbin-r2-r-control); display: inline-flex; align-items: center; justify-content: center; gap: 12px; /* лишаємо простір під бейдж, що виступає праворуч від іконки на ~8px */ padding: 0 10px; margin: 0; /* скидаємо margin-right із wishlist.css — gap рядка керує відступом */ color: var(--elbin-r2-header-text-3); background: transparent; text-decoration: none; transition: background 0.15s, color 0.15s; } [data-row="middle"] .elbin-r2-wishlist-head:hover { background: rgba(255, 255, 255, 0.1); color: var(--elbin-r2-accent); } /* Обгортка іконки — база позиціонування бейджа (relative) */ [data-row="middle"] .elbin-r2-wishlist-head .sh-action-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 auto; } [data-row="middle"] .elbin-r2-wishlist-head .sh-action-ico svg { width: 26px; height: 26px; display: block; } /* Текст-лейбл «Обране» — видимий на desktop */ [data-row="middle"] .elbin-r2-wishlist-head .sh-action-label { font-family: var(--elbin-r2-font-ui); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--elbin-r2-header-text-3); transition: color 0.15s; } [data-row="middle"] .elbin-r2-wishlist-head:hover .sh-action-label { color: var(--elbin-r2-accent); } /* ─────────────────────────────────────────────── КОШИК — flex-рядок (іконка + лейбл «Кошик» + бейдж), як wishlist. DOM Blocksy: .ct-header-cart > a.ct-cart-item > span.ct-label[data-price] (сума — ховаємо) span.ct-icon-container (anchor бейджа) > span.ct-dynamic-count-cart + svg Виведено з 50×50-правила account: тут auto-ширина, рядок іконка+текст. ─────────────────────────────────────────────── */ /* Контейнер елемента білдера — за контентом, центр по вертикалі */ [data-row="middle"] .ct-header-cart { display: inline-flex; align-items: center; } /* Сам клікабельний рядок кошика = flex авто-ширини (іконка + лейбл). ГОЧА: анкер має data-label="bottom" → Blocksy main.min.css задає [data-label=bottom]{flex-direction:column} (іконка згори, текст знизу). Перебиваємо на row, щоб лейбл «Кошик» був ПОРУЧ з іконкою (як Обране/Акаунт). */ [data-row="middle"] .ct-header-cart .ct-cart-item { position: relative; width: auto; height: 50px; border-radius: var(--elbin-r2-r-control); display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; /* іконка ↔ лейбл «Кошик» */ padding: 0 10px; margin: 0; color: var(--elbin-r2-header-text-3); background: transparent; text-decoration: none; transition: background 0.15s, color 0.15s; } [data-row="middle"] .ct-header-cart .ct-cart-item:hover { background: rgba(255, 255, 255, 0.1); color: var(--elbin-r2-accent); } /* Обгортка іконки — anchor бейджа (relative), 22×22 */ [data-row="middle"] .ct-header-cart .ct-icon-container { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 auto; } [data-row="middle"] .ct-header-cart .ct-icon-container svg { width: 26px; height: 26px; display: block; } /* Сума (.ct-label[data-price]) — лишається прихованою */ [data-row="middle"] .ct-header-cart .ct-label[data-price="yes"], [data-row="middle"] .ct-header-cart .ct-cart-price, [data-row="middle"] .ct-header-cart .ct-label { display: none; } /* Текст-лейбл «Кошик» через ::after — стиль як .sh-action-label */ [data-row="middle"] .ct-header-cart .ct-cart-item::after { content: "Кошик"; order: 2; /* після іконки-контейнера */ font-family: var(--elbin-r2-font-ui); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--elbin-r2-header-text-3); transition: color 0.15s; } [data-row="middle"] .ct-header-cart .ct-cart-item:hover::after { color: var(--elbin-r2-accent); } /* Бейдж-лічильник — ВІДНОСНО .ct-icon-container (кут іконки), як wishlist: top:-6 / right:-8. */ [data-row="middle"] .ct-header-cart .ct-icon-container .ct-dynamic-count-cart { position: absolute; top: -9px; right: -11px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--elbin-r2-accent); color: var(--elbin-r2-ink-on-accent); font-family: var(--elbin-r2-font-mono); font-weight: 800; font-size: 9px; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--elbin-r2-header-mid-bg, #0D0D0D); } /* ─────────────────────────────────────────────── WISHLIST — бейдж-лічильник. Позиціонуємо ВІДНОСНО .sh-action-ico (а не всього ), щоб коло сиділо на куті іконки-серця, не зміщуючись від тексту-лейбла «Обране». Реальний клас бейджа — .elbin-r2-wishlist-head__count. ─────────────────────────────────────────────── */ [data-row="middle"] .elbin-r2-wishlist-head .sh-action-ico .elbin-r2-wishlist-head__count { position: absolute; top: -9px; right: -11px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--elbin-r2-accent); color: var(--elbin-r2-ink-on-accent); font-family: var(--elbin-r2-font-mono); font-weight: 800; font-size: 9px; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--elbin-r2-header-mid-bg, #0D0D0D); } } /* ─────────────────────────────────────────────── МОБІЛЬНИЙ (<1000px) — ховаємо текст-лейбл «Кошик» (узгоджено з .sh-act-desktop сусідів Обране/Акаунт, що ховаються <1000px). ─────────────────────────────────────────────── */ @media (max-width: 999px) { .ct-header-cart .ct-cart-item::after { display: none !important; } } /* ─────────────────────────────────────────────── R-N: ДЕСКТОП <1600px — режим «іконки без підписів». Контент хедера (лого + Каталог товарів + пошук 560 + дії з підписами 376px) вміщається без наїздів лише ≥1600px. Нижче — ховаємо текстові підписи дій (Обране/Кошик/Кабінет), лишаємо іконки (~150px замість 376px), зменшуємо бічний мінімум до 160px і переозначаємо ширину пошуку під менший резерв. Так на ВСІХ ПК-ширинах 1000-1599px дії не наїжджають на пошук, а Каталог — на лого (перевірено Playwright-виміром bounding-box). ≥1600px — підписи є. ─────────────────────────────────────────────── */ @media (min-width: 1000px) and (max-width: 1599px) { /* Бічні колонки: 180px (≥ реальна ширина 3 іконок-дій 174px, ≥ лого 124) */ #header [data-row="middle"] > [class*="ct-container"], [data-row="middle"] > [class*="ct-container"] { grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); } /* Пошук: резерв під бічні 2×180, формула 100vw−654px, 280…560px */ [data-row="middle"] .dgwt-wcas-search-wrapp { width: clamp(280px, calc(100vw - 654px), 560px); } /* Ховаємо текстові підписи дій → лишаються самі іконки. Префікс #header (специфічність 1-3-0) перебиває header-account.css (.sh-action-text {display:flex}, 0-3-0), що вантажиться ПІСЛЯ цього файлу. */ #header [data-row="middle"] .elbin-r2-wishlist-head .sh-action-label, #header [data-row="middle"] .ct-header-account .sh-action-text { display: none; } #header [data-row="middle"] .ct-header-cart .ct-cart-item::after { display: none; } } /* ─────────────────────────────────────────────── R-O: ДЕСКТОП ≥1330px — Каталог «midway» (окремо в лівій зоні). Рішення Данила: повернути вигляд [лого] — [Каталог] — [пошук-по-центру]. Вище 1330px вистачає місця, щоб винести Каталог із потоку (position:absolute) у ліву зону між лого і пошуком — тоді в middle лишається ЛИШЕ пошук, який центрується грідом. Нижче 1330px цього місця нема → Каталог лишається групою з пошуком (правила вище). Позиція left=calc(25% − 55px) ставить Каталог приблизно посередині між правим краєм лого і лівим краєм центрованого пошуку (відкалібровано Playwright-виміром). Мегаменю — fixed-оверлей, не залежить. */ @media (min-width: 1330px) { [data-row="middle"] [data-column="middle"] .ct-header-cta { position: absolute; left: calc(25% - 78px); top: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 5; } } /* ─────────────────────────────────────────────── R-P: СТІКІ основний бар (десктоп ≥1000px). Рішення Данила: липне ЛИШЕ основний рядок (топбар скролиться геть), завжди видимий після скролу, висота 80px (під неї підлаштований контент-офсет). JS (header-sticky.js) додає #header.elbin-stuck коли проскролили нижче топбару, і виставляє висоту плейсхолдера .elbin-sticky-ph = висоті рядка (резерв місця в потоці → контент не стрибає при переході у fixed). z-index 990 < мегаменю (9999) і < акаунт-дропдаун — щоб ті були вище. */ .elbin-sticky-ph { height: 0; } @media (min-width: 1000px) { #header.elbin-stuck [data-row="middle"][data-column-set="3"] { position: fixed; top: 0; left: 0; right: 0; z-index: 990; height: var(--elbin-sticky-h, 80px); /* керується Customizer (опція рядка) */ min-height: var(--elbin-sticky-h, 80px); background: var(--elbin-r2-header-mid-bg, #0D0D0D); box-shadow: 0 4px 18px rgba(14, 18, 20, 0.32); /* R-P fix: БЕЗ анімації в'їзду — у точці прилипання бар уже стоїть на верху (топбар саме доскролився геть), тож slide-in виглядав як «бар з'явився знову». Для режиму «завжди видимий» — просто фіксуємо. */ } /* Внутрішній контейнер тягнемо на повну висоту стікі — грід-центрування */ #header.elbin-stuck [data-row="middle"][data-column-set="3"] > [class*="ct-container"] { min-height: var(--elbin-sticky-h, 80px); } } /* МОБІЛЬНИЙ стікі (<1000px): у мобільному блоці хедера лише один рядок і він на самому верху, тож липне весь #header нативним position:sticky — без JS-скролу і плейсхолдера (sticky сам зберігає місце в потоці). z-index 300 успадковується з базового правила #header нижче. Клас .elbin-sticky-m ставить header-sticky.js, шануючи Customizer-вмикач рядка elbin_sticky_enabled (--elbin-sticky-on). ⚠️ #main-container у Blocksy має overflow:hidden→clip — sticky працює завдяки clip (не створює scroll-контейнер); старі браузери без clip тихо деградують у звичайний нелипкий хедер. */ @media (max-width: 999.98px) { #header.elbin-sticky-m { position: sticky; top: 0; } } /* ─────────────────────────────────────────────── СТЕК ХЕДЕРА НАД ЛИПКИМ ТУЛБАРОМ КАТАЛОГУ ───────────────────────────────────────────────── #header — власний стек-контекст (position:relative; z-index:50 у Blocksy). Липкий тулбар каталогу (.elbin-r2-toolbar) має z-index:200 у кореневому контексті, тож за дефолтних 50 ВЕСЬ хедер (разом із дропдауном кошика .ct-cart-content z15 та мегаменю) малюється ПІД тулбаром — тулбар перекриває ховер-меню кошика. Внутрішні z (фікс-бар 990, акаунт 1001, мегаменю 9999) не рятують, бо стеля = z-index самого #header. Піднімаємо корінь хедера вище тулбара. (Мобільну offcanvas-панель .ct-panel.ct-header НЕ чіпаємо — правило по id, у неї id немає.) Шухляда фільтрів (z 99998+) лишається вище. */ #header { position: relative; z-index: 300; } /* ─────────────────────────────────────────────── R2-ДРОПДАУН КОШИКА (.ct-cart-content) — гібрид (як summary чекауту): біла панель зі списком товарів → ТЕМНИЙ рядок «РАЗОМ» (#0D0D0D) → бірюзова CTA «Оформлення» (на всю ширину) + текст-лінк «Переглянути кошик». Перебиваємо дефолтні Blocksy-кольори (синюватий фон) під дизайн R2. DOM: ul.woocommerce-mini-cart > li(.remove + .ct-media-container + .product-data) + p.woocommerce-mini-cart__total + p.woocommerce-mini-cart__buttons. */ #header [data-row="middle"] .ct-cart-content { width: 320px; max-width: 90vw; padding: 0 !important; background: var(--elbin-r2-surface, #fff) !important; border: 1px solid var(--elbin-r2-line, #E4E6E9) !important; border-radius: var(--elbin-r2-r-card, 8px) !important; box-shadow: 0 16px 40px rgba(14, 18, 20, 0.16) !important; overflow: hidden !important; color: var(--elbin-r2-text, #1A1A1A) !important; font-family: var(--elbin-r2-font-ui) !important; } /* Список товарів */ .ct-cart-content ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 8px; max-height: 320px; overflow-y: auto; } .ct-cart-content .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 10px 38px 10px 8px; margin: 0 !important; border: none !important; border-radius: 8px; } .ct-cart-content .woocommerce-mini-cart-item:hover { background: var(--elbin-r2-surface-3, #F5F6F7); } .ct-cart-content .ct-media-container { width: 56px; height: 56px; border: 1px solid var(--elbin-r2-line, #E4E6E9); border-radius: 8px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; } .ct-cart-content .ct-media-container img { width: 100%; height: 100%; object-fit: contain; } .ct-cart-content .product-data { min-width: 0; } .ct-cart-content .product-title { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--elbin-r2-text, #1A1A1A); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ct-cart-content .product-title:hover { color: var(--elbin-r2-accent-700, #0E9994); } .ct-cart-content .quantity { display: block; margin-top: 5px; font: 600 13px/1 var(--elbin-r2-font-mono); color: var(--elbin-r2-text-3, #6C757D); } /* Кнопка видалення (🗑) — праворуч у рядку */ .ct-cart-content .woocommerce-mini-cart-item .remove { position: absolute !important; top: 50% !important; right: 8px !important; left: auto !important; transform: translateY(-50%) !important; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--elbin-r2-text-3, #6C757D) !important; background: transparent !important; border-radius: 6px; font-size: 0; } .ct-cart-content .woocommerce-mini-cart-item .remove:hover { color: #DC2626 !important; background: rgba(220, 38, 38, 0.08) !important; } .ct-cart-content .woocommerce-mini-cart-item .remove svg { width: 16px; height: 16px; } /* Рядок «РАЗОМ» — темна смуга */ .ct-cart-content .woocommerce-mini-cart__total { display: flex; align-items: center; justify-content: space-between; margin: 0 !important; padding: 14px 16px !important; background: #0D0D0D !important; color: #fff !important; border: none !important; } .ct-cart-content .woocommerce-mini-cart__total strong { font: 700 12px/1 var(--elbin-r2-font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); } .ct-cart-content .woocommerce-mini-cart__total .amount { font: 800 18px/1 var(--elbin-r2-font-ui); color: #fff; } /* Кнопки: CTA «Оформлення» (бірюза, зверху) + «Переглянути кошик» (лінк, знизу) */ .ct-cart-content .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin: 0 !important; padding: 14px 16px !important; } .ct-cart-content .woocommerce-mini-cart__buttons .button { margin: 0 !important; min-width: 0; } .ct-cart-content .woocommerce-mini-cart__buttons .button.checkout { order: 0; display: flex; align-items: center; justify-content: center; height: 46px; background: var(--elbin-r2-accent, #1AD0CA) !important; color: var(--elbin-r2-ink-on-accent, #063D2E) !important; border: none !important; border-radius: var(--elbin-r2-r-control, 6px); font: 700 13px/1 var(--elbin-r2-font-ui); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; } .ct-cart-content .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--elbin-r2-accent-hover, #16B8B2) !important; } .ct-cart-content .woocommerce-mini-cart__buttons .button:not(.checkout) { order: 1; height: auto; padding: 0 !important; background: transparent !important; border: none !important; color: var(--elbin-r2-text-2, #474E54) !important; text-align: center; font: 600 12px/1 var(--elbin-r2-font-ui); text-decoration: underline; text-underline-offset: 2px; } .ct-cart-content .woocommerce-mini-cart__buttons .button:not(.checkout):hover { color: var(--elbin-r2-accent-700, #0E9994) !important; } /* Cutover 12.07 (глобально, всі ширини): на проді blogname="ELBIN" → site-title дублюється текстом під лого-картинкою (на staging blogname порожній, тому не проявлялось). Лого і так містить назву — текстовий дубль ховаємо. */ .ct-header [data-id="logo"] .site-title-container, #header [data-id="logo"] .site-title-container { display: none; }