/* ===== ШРИФТ ===== */ .invia-header, .invia-sidebar { font-family: 'Ploni', sans-serif; } /* ===== ЗАЩИТА ОТ ГОРИЗОНТАЛЬНОГО СКРОЛЛА ===== * Marquee внутри announcement bar намеренно шире viewport, плюс Elementor-секции * на главной могут содержать абсолютно/transform-позиционированные декоративные * элементы, выходящие за пределы экрана. Чтобы это не создавало горизонтальный * скролл всей страницы: * * 1) `overflow-x: clip` на и — современный путь, который НЕ * создаёт scroll-container, поэтому не ломает position: sticky/fixed * внутри документа. Дублирование на оба уровня закрывает кейс с * «overflow propagation» (когда у body есть собственный layout-контекст * из-за transform/filter/contain — propagation на html отключается). * 2) `@supports not (overflow-x: clip)` fallback на `overflow-x: hidden` * для iOS Safari < 16, Chrome < 90, Firefox < 81. `hidden` создаёт * scroll-container на body, но т.к. sticky-элементы у нас находятся * внутри body — это не ломает их. * 3) `max-width: 100%` на body как дополнительная страховка от элементов * с `width: 100vw` (которые включают ширину вертикального скроллбара * и сами по себе провоцируют overflow на 15–17px). */ html, body { overflow-x: clip; } body { max-width: 100%; position: relative; } @supports not (overflow-x: clip) { html, body { overflow-x: hidden; } } /* ===== ДОМАШНЯЯ СТРАНИЦА: ЖЁСТКО ОТКЛЮЧАЕМ ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ НА МОБИЛЬНОМ ===== * На /home/ есть Elementor-секции (hero, баннеры) с декоративными элементами, * которые на узких viewport-ах могут выходить за пределы экрана и давать * горизонтальный скролл при свайпе вправо/влево. * Применяем максимально жёсткий containment ТОЛЬКО для body.home (и только до * 1024px), чтобы не повлиять на остальной сайт и десктоп. */ @media (max-width: 1024px) { html:has(body.home), body.home { overflow-x: hidden !important; max-width: 100vw; } } /* ===== ANNOUNCEMENT BAR (внутри хедера) ===== */ .invia-announcement-bar { height: 35px; background: #ECF5E9; overflow: hidden; display: flex; align-items: center; position: relative; direction: ltr; /* force LTR for marquee animation direction */ width: 100%; max-width: 100%; box-sizing: border-box; } .invia-announcement-bar__track-wrap { display: flex; flex-shrink: 0; width: max-content; min-width: max-content; animation: invia-marquee var(--marquee-duration, 30s) linear infinite; will-change: transform; } .invia-announcement-bar__track { display: flex; flex-shrink: 0; } .invia-announcement-bar__text { padding: 0 60px; font-size: 13px; font-weight: 500; color: #2d5016; letter-spacing: 0.02em; white-space: nowrap; } /* Текст бегущей строки — по направлению языка (контейнер .invia-announcement-bar остаётся LTR для анимации) */ html[dir="ltr"] .invia-announcement-bar__text { direction: ltr; } html[dir="rtl"] .invia-announcement-bar__text, body.rtl .invia-announcement-bar__text { direction: rtl; } @keyframes invia-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media screen and (max-width: 782px) { html[dir="rtl"] .invia-announcement-bar, body.rtl .invia-announcement-bar { direction: rtl; } html[dir="ltr"] .invia-announcement-bar { direction: ltr; } .invia-announcement-bar__track-wrap { animation: none; justify-content: center; width: 100%; min-width: 0; } .invia-announcement-bar__track:not(:first-child) { display: none; } .invia-announcement-bar__text { font-size: 12px; padding: 0 16px; } .invia-announcement-bar__text:not(:first-child) { display: none; } } /* ===== HEADER ===== */ .invia-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; will-change: transform; } .invia-header--hidden { transform: translateY(-100%); } .admin-bar .invia-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .invia-header { top: 46px; } } .invia-header__inner { display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 0 32px; } /* Мобильный дубль поиска — скрыт по умолчанию, показан в мобильном media query */ .invia-search-toggle--mobile { display: none !important; } /* Shop mobile button — скрыта на десктопе */ .invia-shop-btn-mobile { display: none; } /* ── Icons (left) ── */ .invia-header__icons { display: flex; align-items: center; gap: 18px; flex: 1; justify-content: flex-start; } /* Иконки и навигация по умолчанию — тёмные (все страницы кроме главной) */ .invia-icon-btn { background: none !important; border: none !important; outline: none !important; cursor: pointer; padding: 4px; display: flex; align-items: center; position: relative; text-decoration: none !important; box-shadow: none !important; color: #151515; transition: opacity 0.2s; font: inherit; -webkit-appearance: none; appearance: none; } .invia-icon-btn:hover { opacity: 0.65; } .invia-icon-btn img { width: 26px; height: 26px; display: block; filter: brightness(0); } .invia-cart-icon img { width: 22px; height: 22px; } .invia-icon-btn svg { color: #151515; stroke: #151515; } .invia-cart-count { position: absolute; top: -2px; inset-inline-end: -4px; background: #151515; color: #fff; font-size: 10px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; } /* ── Logo (center) ── */ .invia-header__logo { position: absolute; left: 50%; transform: translateX(-50%); } .invia-header__logo a { text-decoration: none; display: flex; align-items: center; } .invia-header__logo img { width: 120px; height: auto; display: block; } /* Светлое лого из медиатеки — на внутренних страницах делаем тёмным */ body:not(.invia-header-light) .invia-header__logo img { filter: brightness(0); } body.invia-header-light .invia-header__logo img { filter: none; } /* ── Right: nav + hamburger ── */ .invia-header__right { display: flex; align-items: center; gap: 22px; flex: 1; justify-content: flex-end; } .invia-header__nav { display: flex; align-items: center; gap: 20px; } .invia-header__nav a { font-size: 15px; color: #151515; text-decoration: none; letter-spacing: 0.02em; transition: opacity 0.2s; background: none !important; } .invia-header__nav a:hover, .invia-header__nav a:focus, .invia-header__nav a:active { opacity: 0.92; background: none !important; color: #151515 !important; text-decoration: none !important; } .invia-hamburger { display: flex; flex-direction: column; gap: 5px; background: none !important; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; box-shadow: none !important; } .invia-hamburger__line { display: block; width: 22px; height: 1px; background: #151515; } /* ── Главная: прозрачный хэдер ── */ body.invia-header-light .invia-header { background: transparent !important; border-bottom: none !important; } /* ── Главная: светлый хэдер (белый текст/иконки на тёмном первом экране) ── */ body.invia-header-light .invia-header .invia-icon-btn { color: #fff; } body.invia-header-light .invia-header .invia-icon-btn img { filter: brightness(0) invert(1); } body.invia-header-light .invia-header .invia-icon-btn svg { color: #fff; stroke: #fff; } body.invia-header-light .invia-header .invia-cart-count { background: #fff; color: #151515; } body.invia-header-light .invia-header__nav a, body.invia-header-light .invia-header__nav a:hover, body.invia-header-light .invia-header__nav a:focus, body.invia-header-light .invia-header__nav a:active { color: #fff !important; } body.invia-header-light .invia-hamburger__line { background: #fff; } /* ── Hero-logo: большой логотип на главной ── */ .invia-hero-logo { position: fixed; top: 0; left: 0; right: 0; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 999; pointer-events: none; } .invia-hero-logo img { width: 840px; height: auto; filter: brightness(0) invert(1); /* белый */ will-change: transform; } @media screen and (max-width: 782px) { .invia-hero-logo { align-items: flex-start; padding-top: 35vh; } .invia-hero-logo img { width: 280px; } } /* На старте: скрыть хедерный лого (hero-logo его заменяет) */ body.invia-header-light .invia-header__logo { opacity: 0; transition: opacity 0.3s ease; } /* После скролла: показать хедерный лого + хедер белый + тёмные иконки */ body.invia-header-light.invia-hero-scrolled .invia-header__logo { opacity: 1; } body.invia-header-light.invia-hero-scrolled .invia-header { background: #fff !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; transform: translateY(0) !important; /* перебить auto-hide */ } /* На главной: скрыть бегущую строку когда появляется белый хедер */ body.invia-header-light.invia-hero-scrolled .invia-announcement-bar { display: none !important; } body.invia-header-light.invia-hero-scrolled .invia-header__logo img { filter: brightness(0) !important; } body.invia-header-light.invia-hero-scrolled .invia-header .invia-icon-btn { color: #151515; } body.invia-header-light.invia-hero-scrolled .invia-header .invia-icon-btn img { filter: brightness(0) !important; } body.invia-header-light.invia-hero-scrolled .invia-header .invia-icon-btn svg { color: #151515; stroke: #151515; } body.invia-header-light.invia-hero-scrolled .invia-header .invia-cart-count { background: #151515; color: #fff; } body.invia-header-light.invia-hero-scrolled .invia-header__nav a, body.invia-header-light.invia-hero-scrolled .invia-header__nav a:hover, body.invia-header-light.invia-hero-scrolled .invia-header__nav a:focus, body.invia-header-light.invia-hero-scrolled .invia-header__nav a:active, body.invia-header-light.invia-hero-scrolled .invia-header__nav a:visited, body.invia-header-light.invia-hero-scrolled .invia-header__nav a.invia-nav-sale, body.invia-header-light.invia-hero-scrolled .invia-header__nav a.invia-nav-sale:hover, body.invia-header-light.invia-hero-scrolled .invia-header__nav a.invia-nav-sale:visited, body.invia-header-light.invia-hero-scrolled .invia-header .invia-header__nav a, body.invia-header-light.invia-hero-scrolled .invia-header .invia-header__nav a:hover, body.invia-header-light.invia-hero-scrolled .invia-header .invia-header__nav a:visited { color: #151515 !important; } body.invia-header-light.invia-hero-scrolled .invia-hamburger__line { background: #151515; } /* Плавный переход всех элементов хедера */ body.invia-header-light .invia-header { transition: background 0.4s ease, border-bottom 0.4s ease; } body.invia-header-light .invia-header .invia-icon-btn, body.invia-header-light .invia-header .invia-icon-btn img, body.invia-header-light .invia-header .invia-icon-btn svg, body.invia-header-light .invia-header__nav a, body.invia-header-light .invia-hamburger__line, body.invia-header-light .invia-header .invia-cart-count { transition: color 0.4s ease, background 0.4s ease, filter 0.4s ease, stroke 0.4s ease; } /* Главная — без отступа (хэдер поверх героя). Остальные страницы — запас под fixed-хэдер */ body.invia-header-light { padding-top: 0 !important; } body:not(.invia-header-light) { padding-top: 80px !important; } body.has-announcement-bar:not(.invia-header-light) { padding-top: calc(80px + 35px) !important; } body.admin-bar:not(.invia-header-light) { padding-top: calc(80px + 32px) !important; } body.admin-bar.has-announcement-bar:not(.invia-header-light) { padding-top: calc(80px + 32px + 35px) !important; } /* ── Мобильный хэдер: без полосы Shop/Bestseller/Sale (есть в сайдбаре), компактное лого, интервалы иконок ── */ @media screen and (max-width: 782px) { .invia-header__inner { height: 64px; } body:not(.invia-header-light) { padding-top: 64px !important; } body.has-announcement-bar:not(.invia-header-light) { padding-top: calc(64px + 35px) !important; } /* На узком экране admin-bar ~46px (см. .admin-bar .invia-header { top: 46px }) */ body.admin-bar:not(.invia-header-light) { padding-top: calc(64px + 46px) !important; } body.admin-bar.has-announcement-bar:not(.invia-header-light) { padding-top: calc(64px + 46px + 35px) !important; } .invia-header__inner { padding: 0 12px 0 14px; gap: 10px; justify-content: space-between; position: relative; } /* Ссылки убраны с полосы — дублируются в меню (קנו לפי + Shop / Bestseller / Sale) */ .invia-header__nav { display: none !important; } .invia-header__right { flex: 0 0 auto; gap: 0; min-width: 0; } .invia-header__icons { flex: 0 0 auto; gap: 0; min-width: 0; justify-content: flex-start; align-items: center; } /* Shop "button" — mobile only. Plain text link, no pill, no bg. Uses .invia-header prefix + !important to override the global ".invia-header a { background-color: transparent !important }" reset (we *want* transparent here) and theme link-color rules. Color matches the surrounding header icons: - regular pages (white header) → dark - homepage hero (light header, not scrolled) → white - homepage after scroll → dark again */ .invia-header .invia-shop-btn-mobile, .invia-header .invia-shop-btn-mobile:link, .invia-header .invia-shop-btn-mobile:visited, .invia-header .invia-shop-btn-mobile:hover, .invia-header .invia-shop-btn-mobile:focus, .invia-header .invia-shop-btn-mobile:active { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 4px; margin-inline-start: 2px; /* небольшой воздух от иконки кабинета */ margin-inline-end: 20px; /* воздух перед логотипом по центру */ background: transparent !important; background-color: transparent !important; color: #151515 !important; font-family: 'Ploni', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 600; line-height: 34px; /* совпадает с height — точное вертикальное центрирование */ letter-spacing: 0.02em; text-transform: uppercase; /* "SHOP" на EN, иврит без изменений */ text-decoration: none !important; white-space: nowrap; transition: color 0.4s ease; -webkit-tap-highlight-color: transparent; } /* Иврит "חנות" в шрифте Ploni визуально сидит выше базлайна — небольшой сдвиг вниз чтобы совпасть с центром иконок */ html[lang^="he"] .invia-header .invia-shop-btn-mobile, html[dir="rtl"] .invia-header .invia-shop-btn-mobile, body.rtl .invia-header .invia-shop-btn-mobile { transform: translateY(1px); } /* Главная — белый текст пока хэдер прозрачный (на тёмном hero) */ body.invia-header-light .invia-header .invia-shop-btn-mobile, body.invia-header-light .invia-header .invia-shop-btn-mobile:link, body.invia-header-light .invia-header .invia-shop-btn-mobile:visited, body.invia-header-light .invia-header .invia-shop-btn-mobile:hover, body.invia-header-light .invia-header .invia-shop-btn-mobile:focus, body.invia-header-light .invia-header .invia-shop-btn-mobile:active { color: #fff !important; } /* Главная после скролла — хэдер стал белым → возвращаем чёрный текст */ body.invia-header-light.invia-hero-scrolled .invia-header .invia-shop-btn-mobile, body.invia-header-light.invia-hero-scrolled .invia-header .invia-shop-btn-mobile:link, body.invia-header-light.invia-hero-scrolled .invia-header .invia-shop-btn-mobile:visited, body.invia-header-light.invia-hero-scrolled .invia-header .invia-shop-btn-mobile:hover, body.invia-header-light.invia-hero-scrolled .invia-header .invia-shop-btn-mobile:focus, body.invia-header-light.invia-hero-scrolled .invia-header .invia-shop-btn-mobile:active { color: #151515 !important; } .invia-icon-btn { padding: 4px; } .invia-icon-btn img { width: 21px; height: 21px; } .invia-cart-count { top: 0; inset-inline-end: -2px; font-size: 9px; width: 15px; height: 15px; } /* Лого абсолютно по центру экрана */ .invia-header__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; pointer-events: auto; } .invia-header__logo img { width: auto !important; max-width: 96px; max-height: 22px; height: auto; object-fit: contain; } .invia-hamburger { padding: 8px 4px; margin-inline-start: -2px; } /* На мобильном: поиск из __icons скрыт, дубль в __right виден */ .invia-header__icons > .invia-search-toggle { display: none !important; } .invia-search-toggle--mobile { display: flex !important; } .invia-header__right { display: flex; align-items: center; gap: 4px; } } /* Очень узкие экраны (≤380px): дополнительно ужимаем, чтобы ничего не наезжало */ @media screen and (max-width: 380px) { .invia-header__inner { padding: 0 8px; } .invia-header .invia-shop-btn-mobile, .invia-header .invia-shop-btn-mobile:link, .invia-header .invia-shop-btn-mobile:visited { font-size: 13px; padding: 0 2px; margin-inline-start: 0; margin-inline-end: 14px; } .invia-header__logo img { max-width: 84px; max-height: 20px; } .invia-icon-btn { padding: 3px; } .invia-icon-btn img { width: 20px; height: 20px; } } /* Скрыть штатный заголовок Hello Elementor (не путать с заголовком каталога WC) */ .site-main > .page-header { display: none !important; } /* ===== OVERLAY ===== */ .invia-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1099; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .invia-overlay.is-visible { opacity: 1; pointer-events: all; } /* ===== SIDEBAR ===== */ /* LTR (EN): панель слева, выезжает слева. RTL (HE): панель справа, выезжает справа. */ .invia-sidebar { position: fixed; top: 0; bottom: 0; width: 420px; max-width: 92vw; background: #fff; z-index: 1100; left: 0; right: auto; transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow: hidden; } html[dir="rtl"] .invia-sidebar, body.rtl .invia-sidebar { left: auto; right: 0; transform: translateX(100%); } /* Открытое состояние должно перебить transform выше (иначе у RTL .is-open слабее по специфичности — меню «не открывается»). */ .invia-sidebar.is-open { transform: translateX(0); } html[dir="rtl"] .invia-sidebar.is-open, body.rtl .invia-sidebar.is-open { transform: translateX(0); } /* Sidebar head — dir="rtl": первый элемент справа, последний слева */ .invia-sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px; border-bottom: 1px solid #e8e8e8; flex-shrink: 0; } .invia-sidebar__title { font-size: 15px; font-weight: 400; color: #151515; } .invia-sidebar__close { background: none !important; border: none; cursor: pointer; color: #151515; padding: 6px; display: flex; align-items: center; transition: opacity 0.2s; box-shadow: none !important; } .invia-sidebar__close:hover { opacity: 0.5; } /* Sidebar body */ .invia-sidebar__body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0; } /* ===== УБИВАЕМ ELEMENTOR HOVER СТИЛИ ===== */ .invia-sidebar a, .invia-sidebar a:hover, .invia-sidebar a:focus, .invia-sidebar a:active, .invia-sidebar a:visited, .invia-sidebar button, .invia-sidebar button:hover, .invia-sidebar button:focus, .invia-header a, .invia-header a:hover, .invia-header a:focus, .invia-header button, .invia-header button:hover, .invia-header button:focus { background-color: transparent !important; outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; text-decoration: none !important; } /* Фикс цвета текста при hover внутри сайдбара — перебиваем Elementor */ .invia-sidebar .invia-cat-list a, .invia-sidebar .invia-cat-list a:hover, .invia-sidebar .invia-cat-list a:focus, .invia-sidebar .invia-cat-list a:active, .invia-sidebar .invia-cat-name, .invia-sidebar .invia-cat-name:hover, .invia-sidebar .invia-cat-name:focus, .invia-sidebar .invia-cat-name:active, .invia-sidebar .invia-services-section__head .invia-cat-name, .invia-sidebar .invia-services-section__head .invia-cat-name:hover, .invia-sidebar .invia-services-section__head .invia-cat-name:focus, .invia-sidebar .invia-shop-section .invia-cat-name, .invia-sidebar .invia-shop-section .invia-cat-name:hover, .invia-sidebar .invia-shop-section .invia-cat-name:focus, .invia-services-section .invia-cat-name, .invia-services-section .invia-cat-name:hover, .invia-services-section .invia-cat-name:focus { color: #151515 !important; } /* Opacity на hover делает чёрный «серым» — в сайдбаре отключаем */ .invia-sidebar .invia-cat-name:hover, .invia-sidebar .invia-cat-name:focus, .invia-sidebar .invia-cat-name:active { opacity: 1 !important; } /* Фикс цвета ссылок навигации в хэдере (тёмный вариант, внутренние страницы) */ .invia-header__nav a, .invia-header__nav a:hover, .invia-header__nav a:focus, .invia-header__nav a:active, .invia-header__nav a:visited { color: #151515 !important; text-decoration: none !important; background-color: transparent !important; } .invia-header__nav a.invia-nav-sale, .invia-header__nav a.invia-nav-sale:hover, .invia-header__nav a.invia-nav-sale:focus, .invia-header__nav a.invia-nav-sale:active, .invia-header__nav a.invia-nav-sale:visited { color: #151515 !important; font-weight: 600; letter-spacing: 0.04em; } /* Фикс ссылок в футере сайдбара */ .invia-sidebar__footer-links li a, .invia-sidebar__footer-links li a:hover, .invia-sidebar__footer-links li a:focus, .invia-sidebar__footer-links li a:active { color: #fff !important; background-color: transparent !important; } /* Elementor / Hello — глобальные a:hover часто сильнее; поднимаем специфичность */ body .invia-header .invia-header__nav a, body .invia-header .invia-header__nav a:hover, body .invia-header .invia-header__nav a:focus, body .invia-header .invia-header__nav a:active, body .invia-header .invia-header__nav a:visited { color: #151515 !important; text-decoration: none !important; } /* Главная — белая навигация (перебиваем правила выше) */ body.invia-header-light .invia-header__nav a, body.invia-header-light .invia-header__nav a:hover, body.invia-header-light .invia-header__nav a:focus, body.invia-header-light .invia-header__nav a:active, body.invia-header-light .invia-header__nav a:visited { color: #fff !important; } body.invia-header-light .invia-header__nav a.invia-nav-sale, body.invia-header-light .invia-header__nav a.invia-nav-sale:hover, body.invia-header-light .invia-header__nav a.invia-nav-sale:focus, body.invia-header-light .invia-header__nav a.invia-nav-sale:active, body.invia-header-light .invia-header__nav a.invia-nav-sale:visited { color: #fff !important; font-weight: 600; letter-spacing: 0.04em; } body.invia-header-light .invia-header .invia-header__nav a, body.invia-header-light .invia-header .invia-header__nav a:hover, body.invia-header-light .invia-header .invia-header__nav a:focus, body.invia-header-light .invia-header .invia-header__nav a:active, body.invia-header-light .invia-header .invia-header__nav a:visited { color: #fff !important; text-decoration: none !important; } body .invia-sidebar .invia-cat-name, body .invia-sidebar .invia-cat-name:hover, body .invia-sidebar .invia-cat-name:focus, body .invia-sidebar .invia-cat-name:active, body .invia-sidebar .invia-cat-list a, body .invia-sidebar .invia-cat-list a:hover, body .invia-sidebar .invia-cat-list a:focus, body .invia-sidebar .invia-cat-list a:active { color: #151515 !important; } body .invia-sidebar .invia-cat-name:hover, body .invia-sidebar .invia-cat-name:focus { opacity: 1 !important; } /* ===== CATEGORY LIST ===== */ .invia-cat-list { list-style: none; margin: 0; padding: 0; } /* ── Level 1: обычный список с разделителями ── */ .invia-cat-list--lvl-1 { padding: 0; } .invia-cat-item--lvl-1 > .invia-cat-row { padding: 17px 20px; border-bottom: 1px solid #e8e8e8; } /* ── Level 2: бежевые пилюли #F4ECE2 ── */ .invia-cat-list--lvl-2 { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; } .invia-cat-item--lvl-2 > .invia-cat-row { background: #F4ECE2; border-radius: 14px; padding: 17px 18px; } /* ── Level 3: простой список внутри раскрытой пилюли ── */ .invia-cat-list--lvl-3 { padding: 2px 0 6px; } .invia-cat-item--lvl-3 > .invia-cat-row { padding: 12px 22px; border-bottom: 1px solid #f0f0f0; } .invia-cat-item--lvl-3:last-child > .invia-cat-row { border-bottom: none; } /* ── Level 4: ещё глубже ── */ .invia-cat-list--lvl-4 { padding: 2px 0 4px; } .invia-cat-item--lvl-4 > .invia-cat-row { padding: 10px 32px; border-bottom: 1px solid #f5f5f5; } .invia-cat-item--lvl-4:last-child > .invia-cat-row { border-bottom: none; } /* ── Static (Bestseller, Sale) ── */ .invia-cat-list--static { border-top: 1px solid #e8e8e8; } .invia-cat-item--static > .invia-cat-row { padding: 16px 20px; border-bottom: 1px solid #e8e8e8; } /* ── Row ── */ .invia-cat-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } /* ── Category name ── */ .invia-cat-name { font-size: 15px; color: #151515; text-decoration: none !important; letter-spacing: 0.01em; flex: 1; cursor: pointer; transition: opacity 0.2s; background: transparent !important; } .invia-cat-name:hover { opacity: 0.65; background: transparent !important; } /* ── Toggle button: тонкий + / − через CSS ── */ .invia-cat-toggle { position: relative; width: 24px; height: 24px; background: none !important; border: none; cursor: pointer; flex-shrink: 0; padding: 0; box-shadow: none !important; } /* Горизонтальная линия */ .invia-cat-toggle::before { content: ''; position: absolute; width: 12px; height: 1px; background: #151515; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Вертикальная линия — прячется при expanded */ .invia-cat-toggle::after { content: ''; position: absolute; width: 1px; height: 12px; background: #151515; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.2s; } .invia-cat-toggle[aria-expanded="true"]::after { opacity: 0; } /* ── Accordion ── */ .invia-cat-children { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .invia-cat-children.is-open { max-height: 3000px; } /* ===== СЕКЦИЯ УСЛУГ ===== */ .invia-services-section { border-bottom: 1px solid #e8e8e8; } .invia-services-section__head { padding: 17px 20px; cursor: pointer; } .invia-services-section__body { /* Использует те же стили .invia-cat-children */ } /* ===== SIDEBAR FOOTER ===== */ .invia-sidebar__footer { background: #151515; padding: 24px 20px 30px; flex-shrink: 0; direction: inherit; } .invia-sidebar__footer-links { list-style: none; margin: 0 0 4px; padding: 0; } .invia-sidebar__footer-links li a { display: block; font-size: 15px; color: #fff !important; text-decoration: none !important; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: opacity 0.2s; background: transparent !important; } .invia-sidebar__footer-links li:last-child a { border-bottom: none; } .invia-sidebar__footer-links li a:hover, .invia-sidebar__footer-links li a:focus { opacity: 1; color: #fff !important; } .invia-sidebar__locale { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.75); font-size: 13px; cursor: pointer; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); transition: opacity 0.2s; } .invia-sidebar__locale:hover { color: #fff; } .invia-sidebar__locale img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; } .invia-sidebar__locale-chevron { font-size: 12px; } .invia-sidebar__locale-switch { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.55); font-size: 13px; text-decoration: none; margin-inline-end: 8px; transition: color 0.2s; } .invia-sidebar__locale-switch:hover { color: #fff; } .invia-sidebar__locale-switch img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; } /* ===== LOGIN MODAL ===== */ .invia-login-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .invia-login-modal.is-open { opacity: 1; pointer-events: all; } .invia-login-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); cursor: pointer; } .invia-login-modal__panel { position: relative; width: 420px; max-width: 94vw; background: #fff; border-radius: 16px; overflow: hidden; transform: translateY(16px); transition: transform 0.3s ease; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); } .invia-login-modal.is-open .invia-login-modal__panel { transform: translateY(0); } /* Top — тёмный с лого */ .invia-login-modal__top { background: #151515; padding: 36px 32px 32px; display: flex; flex-direction: column; align-items: center; position: relative; } .invia-login-modal__close { position: absolute; top: 16px; inset-inline-start: 16px; background: none !important; border: none; cursor: pointer; color: rgba(255, 255, 255, 0.6); padding: 6px; display: flex; align-items: center; transition: color 0.2s; box-shadow: none !important; } .invia-login-modal__close:hover { color: #fff; } .invia-login-modal__logo { width: 110px; height: auto; display: block; } .invia-login-modal__logo-text { font-size: 26px; font-weight: 300; letter-spacing: 0.3em; color: #fff; font-family: 'Ploni', sans-serif; } /* Body — форма */ .invia-login-modal__body { padding: 32px; } .invia-login-modal__title { font-size: 20px; font-weight: 400; color: #151515; margin: 0 0 8px; font-family: 'Ploni', sans-serif; text-align: start; } .invia-login-modal__subtitle { font-size: 13px; color: #888; margin: 0 0 28px; text-align: start; line-height: 1.5; } /* Form fields */ .invia-login-form__field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; } .invia-login-form__field label { font-size: 13px; color: #555; text-align: start; } .invia-login-form__field input { width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; font-family: 'Ploni', sans-serif; text-align: start; direction: ltr; transition: border-color 0.2s; box-sizing: border-box; } .invia-login-form__field input:focus { outline: none; border-color: #151515; } .invia-login-form__meta { text-align: end; margin-bottom: 20px; } .invia-login-form__forgot { font-size: 12px; color: #888 !important; text-decoration: none !important; transition: color 0.2s; } .invia-login-form__forgot:hover { color: #151515 !important; } .invia-login-form__submit { width: 100%; padding: 14px; background: #151515; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-family: 'Ploni', sans-serif; cursor: pointer; transition: opacity 0.2s; letter-spacing: 0.03em; } .invia-login-form__submit:hover { opacity: 0.8; } .invia-login-modal__register { text-align: center; margin-top: 20px; font-size: 13px; color: #888; } .invia-login-modal__register a { color: #151515 !important; text-decoration: underline !important; margin-inline-start: 4px; } /* ===== SEARCH: лёгкий фон + белая карточка (не весь экран чёрным) ===== */ .invia-search-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1200; background: rgba(0, 0, 0, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 96px 18px 32px; min-height: 0; height: 100%; max-height: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.28s ease, transform 0.28s ease; color-scheme: light; font-family: 'Ploni', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; box-sizing: border-box; } .invia-search-overlay *, .invia-search-overlay input, .invia-search-overlay button { font-family: inherit; } .admin-bar .invia-search-overlay { top: 32px; height: calc(100% - 32px); padding-top: calc(96px + 32px); } @media screen and (max-width: 782px) { .admin-bar .invia-search-overlay { top: 46px; height: calc(100% - 46px); padding-top: calc(96px + 46px); } } .invia-search-overlay.is-open { opacity: 1; pointer-events: all; transform: translateY(0); } .invia-search-overlay__column { width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; position: relative; z-index: 1; flex-shrink: 0; background: #fff; border-radius: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 22px 48px rgba(0, 0, 0, 0.1); padding: 18px 20px 14px; border: 1px solid rgba(0, 0, 0, 0.06); } .invia-search-overlay__inner { display: flex; align-items: center; gap: 16px; width: 100%; } .invia-search-form { flex: 1; display: flex; align-items: center; border-bottom: 1px solid #e5e5e5; min-width: 0; padding-bottom: 4px; } .invia-search-form__input { flex: 1; min-width: 0; background: none !important; border: none !important; outline: none !important; box-shadow: none !important; font-size: 17px; font-family: 'Ploni', sans-serif; color: #151515 !important; padding: 10px 0; -webkit-appearance: none; appearance: none; border-radius: 0; } html[dir="rtl"] .invia-search-form__input, body.rtl .invia-search-form__input { direction: rtl; } html[dir="ltr"] .invia-search-form__input { direction: ltr; } /* Убираем системные «цветные» кнопки у type=search (WebKit / iOS) */ .invia-search-form__input[type="search"]::-webkit-search-decoration, .invia-search-form__input[type="search"]::-webkit-search-cancel-button, .invia-search-form__input[type="search"]::-webkit-search-results-button, .invia-search-form__input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none !important; appearance: none !important; display: none !important; width: 0 !important; height: 0 !important; } .invia-search-form__input::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; } .invia-search-form__input::placeholder { color: #9a9a9a; } .invia-search-form__input:-webkit-autofill, .invia-search-form__input:-webkit-autofill:hover, .invia-search-form__input:-webkit-autofill:focus { -webkit-text-fill-color: #151515 !important; -webkit-box-shadow: 0 0 0 1000px #fff inset !important; transition: background-color 9999s ease-out; } .invia-search-form__submit { background: none !important; border: none !important; cursor: pointer; color: #151515 !important; display: flex; align-items: center; justify-content: center; padding: 6px; box-shadow: none !important; transition: opacity 0.2s; outline: none !important; flex-shrink: 0; } .invia-search-form__submit:hover, .invia-search-form__submit:focus { opacity: 0.55; color: #151515 !important; } .invia-search-form__submit svg, .invia-search-form__submit svg circle, .invia-search-form__submit svg line { stroke: #151515 !important; fill: none !important; } .invia-search-overlay__close { background: none !important; border: none !important; cursor: pointer; color: #151515 !important; display: flex; align-items: center; justify-content: center; padding: 6px; box-shadow: none !important; transition: opacity 0.2s; flex-shrink: 0; outline: none !important; } .invia-search-overlay__close:hover, .invia-search-overlay__close:focus { opacity: 0.5; color: #151515 !important; } .invia-search-overlay__close svg line { stroke: #151515 !important; } /* ── Результаты поиска (светлая карточка) ── */ .invia-search-results { margin-top: 16px; padding: 12px 0 6px; border-top: 1px solid #f0f0f0; max-height: min(52vh, 420px); overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } .invia-search-results[hidden] { display: none !important; } .invia-search-results.is-visible { display: block; } .invia-search-results__block { margin-bottom: 28px; } .invia-search-results__block:last-child { margin-bottom: 0; } .invia-search-results__heading { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #888; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #eee; text-align: start; font-family: 'Ploni', sans-serif; } .invia-search-results__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .invia-search-results__product { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; text-decoration: none !important; color: #151515 !important; background: #fafafa; border: 1px solid #eee; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .invia-search-results__product:hover, .invia-search-results__product:focus { background: #fff; border-color: #e0e0e0; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); transform: translateY(-1px); color: #151515 !important; } .invia-search-results__thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #fff; border: 1px solid #eaeaea; } .invia-search-results__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .invia-search-results__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; flex: 1; text-align: start; } .invia-search-results__title { font-size: 15px; font-weight: 600; color: #151515 !important; line-height: 1.35; font-family: 'Ploni', sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: 0.01em; } .invia-search-results__price { font-size: 14px; color: #151515 !important; font-family: 'Ploni', sans-serif !important; font-weight: 500; } .invia-search-results__price .woocommerce-Price-amount { color: inherit !important; } .invia-search-results__price ins { text-decoration: none !important; color: #151515 !important; } .invia-search-results__hint { font-size: 10px; letter-spacing: 0.08em; color: #aaa !important; text-transform: uppercase; font-family: 'Ploni', sans-serif; } .invia-search-results__chevron { flex-shrink: 0; width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 1.1rem; line-height: 1; font-weight: 300; } .invia-search-results__chevron::before { content: '\2039'; } .invia-search-results__service { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; text-decoration: none !important; color: #151515 !important; background: #f9f6f1; border: 1px solid #ebe4d8; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .invia-search-results__service:hover, .invia-search-results__service:focus { background: #fff; border-color: #ddd5c8; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); transform: translateY(-1px); color: #151515 !important; } .invia-search-results__service-dot { width: 9px; height: 9px; border-radius: 50%; background: #c4a77d; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(196, 167, 125, 0.2); } .invia-search-results__service-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; min-width: 0; text-align: start; } .invia-search-results__service-title { font-size: 15px; font-weight: 600; color: #151515 !important; font-family: 'Ploni', sans-serif; line-height: 1.35; } .invia-search-results__empty { margin: 16px 0 10px; font-size: 14px; color: #888; text-align: start; font-family: 'Ploni', sans-serif; line-height: 1.5; } /* ===== SHOP SIDEBAR — категории как static-ссылки (без фона, как Bestseller/Sale) ===== */ #invia-shop-sidebar .invia-cat-list--lvl-1 { display: block; padding: 0; } #invia-shop-sidebar .invia-cat-item--lvl-1 > .invia-cat-row { background: none; border-radius: 0; padding: 16px 20px; border-bottom: 1px solid #e8e8e8; } /* ===== SHOP SIDEBAR — анимированное подчёркивание при наведении (справа налево) ===== */ #invia-shop-sidebar .invia-cat-name, #invia-shop-sidebar .invia-cat-list--static .invia-cat-name { position: relative; display: inline-block; flex: none; opacity: 1 !important; transition: none; } #invia-shop-sidebar .invia-cat-name::after, #invia-shop-sidebar .invia-cat-list--static .invia-cat-name::after { content: ''; position: absolute; bottom: -1px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transition: transform 0.3s ease; } html[dir="rtl"] #invia-shop-sidebar .invia-cat-name::after, html[dir="rtl"] #invia-shop-sidebar .invia-cat-list--static .invia-cat-name::after, body.rtl #invia-shop-sidebar .invia-cat-name::after, body.rtl #invia-shop-sidebar .invia-cat-list--static .invia-cat-name::after { right: 0; left: auto; transform-origin: right center; } html[dir="ltr"] #invia-shop-sidebar .invia-cat-name::after, html[dir="ltr"] #invia-shop-sidebar .invia-cat-list--static .invia-cat-name::after { left: 0; right: auto; transform-origin: left center; } #invia-shop-sidebar .invia-cat-name:hover::after, #invia-shop-sidebar .invia-cat-list--static .invia-cat-name:hover::after { transform: scaleX(1); } /* ===== SHOP NAV TOGGLE (кнопка «Shop» в хедере — стиль как у nav-ссылки) ===== */ .invia-header__nav .invia-shop-nav-toggle { font-size: 15px; font-family: inherit; color: #151515; letter-spacing: 0.02em; transition: opacity 0.2s; background: none; border: none; padding: 0; cursor: pointer; line-height: inherit; } .invia-header__nav .invia-shop-nav-toggle:hover, .invia-header__nav .invia-shop-nav-toggle:focus { opacity: 0.92; outline: none; color: #151515; } body.invia-header-light .invia-header__nav .invia-shop-nav-toggle { color: #fff; } body.invia-header-light .invia-header__nav .invia-shop-nav-toggle:hover, body.invia-header-light .invia-header__nav .invia-shop-nav-toggle:focus { color: #fff; } body.invia-header-light.invia-hero-scrolled .invia-header__nav .invia-shop-nav-toggle, body.invia-header-light.invia-hero-scrolled .invia-header__nav .invia-shop-nav-toggle:hover, body.invia-header-light.invia-hero-scrolled .invia-header__nav .invia-shop-nav-toggle:focus { color: #151515; }