/** * Критичные стили шапки/подвала (работают до hydrate vitacart-shop-nav.js). */ .vitacart-mobile-nav-backdrop, .vitacart-mobile-nav-backdrop.is-visible { display: none !important; visibility: hidden !important; pointer-events: none !important; opacity: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } @media (max-width: 991.98px) { body.vitacart-mobile-nav-open .vitacart-category-bar, body.vitacart-mobile-nav-open .vitacart-category-bar--ssr, body.vitacart-mobile-nav-open .vitacart-category-bar--ssr-slot { visibility: hidden !important; pointer-events: none !important; } } /* Пустая промо-полоса — не занимать место */ .vitacart-announcement-zone--hidden, .vitacart-announcement-zone[hidden], .vitacart-announcement-zone:has(#vitacartAnnouncementBar:empty) { display: none !important; } .vitacart-announcement-zone--hidden + .vitacart-announcement-zone-spacer, .vitacart-announcement-zone:has(#vitacartAnnouncementBar:empty) + .vitacart-announcement-zone-spacer { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden; } /* SEO-плейсхолдер — скрыть только после успешного hydrate */ html.vitacart-footer-hydrated .vitacart-footer-ssr-only { display: none !important; } .vitacart-footer-top > .vitacart-footer-col { display: flex; flex-direction: column; } .vitacart-footer-top .vitacart-footer-newsletter-col form { flex: 1 1 auto; display: flex; flex-direction: column; } @media (min-width: 992px) { .vitacart-footer-top { --bs-gutter-x: 1.5rem; } } :root { --vitacart-pdp-nav-reserve: 118px; --vitacart-store-nav-reserve: 136px; --vitacart-catalog-subnav-reserve: 5rem; --shop-accent: #198754; --shop-accent-hover: #157347; --bs-link-color: var(--shop-accent); --bs-link-color-rgb: 25, 135, 84; --bs-link-hover-color: var(--shop-accent-hover); --bs-link-hover-color-rgb: 21, 115, 71; } /* До hydrate: резерв высоты шапки. Не задавать --vitacart-site-header-h на body после JS — иначе перекрывает inline на и fixed-полоска каталога остаётся на 136px при шапке ~60px. */ html.js:not(.vitacart-js-nav-ready) body.vitacart-page-catalog { --vitacart-site-header-h: var(--vitacart-store-nav-reserve, 136px); --vitacart-category-bar-h: 0px; } .vitacart-announcement-zone-spacer, .vitacart-header-strip-spacer { width: 100%; flex-shrink: 0; pointer-events: none; } @media (max-width: 991.98px) { .vitacart-header-strip-spacer--pdp-reserve { min-height: var(--vitacart-pdp-nav-reserve, 118px); } .vitacart-header-strip-spacer--store-reserve { min-height: var(--vitacart-store-nav-reserve, 136px); } /* До injectNavStyles — header не должен быть in-flow (иначе CLS ~0.06) */ #vitacartNavHost .vitacart-site-header:not(.vitacart-site-header--admin) { position: fixed; left: 0; right: 0; top: 0; z-index: 1030; margin: 0; padding: 0; } } /* * SSR-страницы добавляют class=js до hydrate: не показываем static nav + host одновременно * (иначе ~200px сверху, после mount ~118px — CLS ~0.12 на PDP). */ html.js:not(.vitacart-js-nav-ready) #vitacartStaticNav { display: none !important; } /* Store-shell: static nav дублирует SSR spacer — после js-nav-ready мог мигать и сдвигать main */ body.vitacart-store-shell #vitacartStaticNav { display: none !important; } html.js:not(.vitacart-js-nav-ready) body.vitacart-hide-mobile-subnav:not(.vitacart-page-catalog) #vitacartNavHost { min-height: 118px; } /* Каталог mobile: full header + search — высота через inner spacer (phase 5c) */ html.js:not(.vitacart-js-nav-ready) body.vitacart-page-catalog #vitacartNavHost { min-height: 0; } html.js:not(.vitacart-js-nav-ready) body.vitacart-page-catalog #vitacartNavHost .vitacart-header-strip-spacer--store-reserve { min-height: var(--vitacart-store-nav-reserve, 136px); } /* Каталог mobile: SSR-полоска категорий — стабильная высота (CLS main ~0.057) */ @media (max-width: 991.98px) { body.vitacart-page-catalog #vitacartNavHost .vitacart-header-strip-spacer--store-reserve { min-height: var(--vitacart-store-nav-reserve, 136px); } html.js:not(.vitacart-js-nav-ready) body.vitacart-page-catalog .vitacart-category-bar--ssr-slot, html.js:not(.vitacart-js-nav-ready) body.vitacart-page-catalog .vitacart-category-bar--ssr, body.vitacart-page-catalog #vitacartCategoryBar.vitacart-category-bar--ssr:not(.d-none), body.vitacart-page-catalog #vitacartCategoryBar[data-catalog-subnav-ssr="1"]:not(.d-none) { min-height: var(--vitacart-catalog-subnav-reserve, 5rem); } body.vitacart-page-catalog.vitacart-hide-mobile-subnav #vitacartCategoryBar, body.vitacart-page-catalog.vitacart-hide-mobile-subnav .vitacart-category-bar--ssr-slot { min-height: 0 !important; } } /* Burger skeleton until nav hydrate (store shell / PDP) */ html.js:not(.vitacart-js-nav-ready) body.vitacart-store-shell #vitacartNavHost::before, html.js:not(.vitacart-js-nav-ready) body.vitacart-page-pdp #vitacartNavHost::before { content: ""; position: fixed; top: 6px; right: 12px; width: 2.75rem; height: 2.75rem; border-radius: 0.8125rem; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.12); box-sizing: border-box; z-index: 1031; pointer-events: none; } /* Главная: SSR-spacer в host до hydrate nav (CLS mobile ~0.086) */ html.js:not(.vitacart-js-nav-ready) body.vitacart-page-home #vitacartNavHost { min-height: 0; } html.js:not(.vitacart-js-nav-ready) body.vitacart-page-home #vitacartNavHost .vitacart-header-strip-spacer--store-reserve { min-height: var(--vitacart-store-nav-reserve, 136px); } /* Корзина / чекаут: SSR-spacer до hydrate nav (CLS mobile ~0.31 без резерва) */ html.js:not(.vitacart-js-nav-ready) body.vitacart-page-cart #vitacartNavHost, html.js:not(.vitacart-js-nav-ready) body.vitacart-page-checkout #vitacartNavHost { min-height: 0; } html.js:not(.vitacart-js-nav-ready) body.vitacart-page-cart #vitacartNavHost .vitacart-header-strip-spacer--store-reserve, html.js:not(.vitacart-js-nav-ready) body.vitacart-page-checkout #vitacartNavHost .vitacart-header-strip-spacer--store-reserve { min-height: var(--vitacart-store-nav-reserve, 136px); } body.vitacart-page-cart, body.vitacart-page-checkout { --vitacart-site-header-h: var(--vitacart-store-nav-reserve, 136px); } html.js:not(.vitacart-js-nav-ready) body.vitacart-page-home .vitacart-category-bar--ssr-slot, html.js:not(.vitacart-js-nav-ready) body.vitacart-page-home .vitacart-category-bar--ssr { min-height: 2.5rem; } body.vitacart-page-home .vitacart-category-bar { min-height: 2.5rem; } /* Резервируем высоту навигации до JS-гидрации — предотвращает CLS */ #vitacartNavHost { min-height: 56px; } @media (min-width: 992px) { html.js:not(.vitacart-js-nav-ready) .vitacart-category-bar--ssr-slot, html.js:not(.vitacart-js-nav-ready) .vitacart-category-bar--ssr { min-height: 2.5rem; } } /* Flex footer до hydrate nav — без скачка при vitacart-store-layout */ body.vitacart-store-shell, body.vitacart-store-layout { min-height: 100dvh; display: flex; flex-direction: column; } body.vitacart-store-shell #vitacartNavHost, body.vitacart-store-layout #vitacartNavHost { flex-shrink: 0; } body.vitacart-page-catalog .vitacart-catalog-subnav-spacer { flex-shrink: 0; } body.vitacart-store-shell #vitacartSiteFooter, body.vitacart-store-layout #vitacartSiteFooter { flex-shrink: 0; margin-top: auto; } /* Catalog subnav (SSR under site header — главная и каталог) */ .vitacart-category-bar--ssr-slot, .vitacart-category-bar--ssr { min-height: 2.5rem; } .vitacart-category-bar--ssr { position: sticky; top: var(--vitacart-site-header-h, 56px); z-index: 1025; background: #fff; } /* Каталог desktop: полоска категорий fixed под поиском + spacer в потоке (sticky в flex ломался) */ @media (min-width: 992px) { body.vitacart-page-catalog #vitacartCategoryBar:not(.d-none) { position: fixed; left: 0; right: 0; top: var(--vitacart-site-header-h, 56px); z-index: 1025; background: #fff; box-shadow: 0 1px 0 #e5e7eb; } body.vitacart-page-catalog #vitacartCategoryBar:not(.d-none) .container { background: #fff; } body.vitacart-page-catalog .vitacart-catalog-subnav-spacer { flex-shrink: 0; width: 100%; min-height: var(--vitacart-category-bar-h, 2.75rem); pointer-events: none; } } .vitacart-category-bar .vitacart-cat-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0; padding: 0.4rem 0; font-size: 0.875rem; } .vitacart-category-bar a { color: #374151; text-decoration: none; padding: 0.2rem 0.5rem; border-radius: 6px; } .vitacart-category-bar a:hover { background: #f3f4f6; color: #15803d; } .vitacart-category-bar a.vitacart-cat-accent { color: #dc2626; font-weight: 600; } .vitacart-category-bar .vitacart-cat-sep { width: 1px; height: 1rem; background: #e5e7eb; margin: 0 0.15rem; align-self: center; } .vitacart-cat-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; } .vitacart-cat-quick a { white-space: nowrap; flex-shrink: 0; } .vitacart-subnav-item--mega { position: relative; } /* Невидимый мостик: курсор не «роняет» меню при переходе к панели */ .vitacart-subnav-item--mega::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; z-index: 1029; } .vitacart-subnav-trigger { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.55rem; border: 0; border-radius: 6px; background: transparent; color: #374151; font-size: inherit; font-weight: 600; font-family: inherit; line-height: inherit; cursor: pointer; user-select: none; } .vitacart-subnav-trigger::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #9ca3af; transition: transform 0.15s ease; } .vitacart-subnav-trigger:hover, .vitacart-subnav-item--mega:focus-within .vitacart-subnav-trigger, .vitacart-subnav-item--mega.is-open .vitacart-subnav-trigger { background: #f3f4f6; color: #15803d; } .vitacart-subnav-item--mega.is-open .vitacart-subnav-trigger::after { transform: rotate(180deg); border-top-color: #15803d; } .vitacart-subnav-panel { padding: 0.65rem 0.85rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); z-index: 1030; } .vitacart-subnav-panel-title { margin: 0 0 0.5rem; padding: 0 0.15rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: #9ca3af; } .vitacart-subnav-panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.1rem 1.25rem; } .vitacart-subnav-link--row { display: block; padding: 0.4rem 0.5rem; border-radius: 6px; color: #374151; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.12s ease, color 0.12s ease; } .vitacart-subnav-link--row:hover { background: #f3f4f6; color: #15803d; } .vitacart-subnav-link--active { font-weight: 600; color: #15803d !important; background: #ecfdf5; } .vitacart-subnav-panel-footer { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid #f3f4f6; text-align: right; } .vitacart-subnav-all-link { display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.8125rem; font-weight: 600; color: #15803d; text-decoration: none; border-radius: 6px; } .vitacart-subnav-all-link:hover { background: #ecfdf5; color: #166534; } @media (min-width: 992px) { .vitacart-subnav-panel { position: absolute; top: calc(100% + 8px); left: 0; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease; transform: translateY(-4px); } .vitacart-subnav-panel--categories { display: flex; flex-direction: column; gap: 0.05rem; min-width: 15rem; max-width: 20rem; padding: 0.5rem 0.35rem; } .vitacart-subnav-panel--brands { min-width: min(42rem, calc(100vw - 2rem)); max-width: min(48rem, calc(100vw - 2rem)); padding: 0.75rem 1rem 0.65rem; } .vitacart-subnav-item--brands .vitacart-subnav-panel { left: 0; } .vitacart-subnav-item--mega:hover .vitacart-subnav-panel, .vitacart-subnav-item--mega:focus-within .vitacart-subnav-panel, .vitacart-subnav-item--mega.is-open .vitacart-subnav-panel { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); } } @media (max-width: 991.98px) { /* Каталог/PDP: полоска в HTML для SEO, на мобилке скрыта — есть offcanvas «Фильтры» */ body.vitacart-hide-mobile-subnav #vitacartCategoryBar { display: none !important; max-height: none !important; transform: none !important; pointer-events: none; } .vitacart-category-bar .vitacart-cat-inner:has(.vitacart-subnav-trigger) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.35rem; row-gap: 0.35rem; align-items: stretch; width: 100%; } .vitacart-category-bar .vitacart-cat-inner:not(:has(.vitacart-subnav-trigger)) { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; align-items: center; gap: 0.35rem 0; width: 100%; } .vitacart-category-bar .vitacart-cat-inner:not(:has(.vitacart-subnav-trigger))::-webkit-scrollbar { display: none; } .vitacart-category-bar .vitacart-cat-inner:not(:has(.vitacart-subnav-trigger)) .vitacart-cat-sep { display: none; } .vitacart-subnav-item--categories, .vitacart-subnav-item--brands { display: contents; } .vitacart-subnav-item--categories .vitacart-subnav-trigger { grid-column: 1; grid-row: 1; } .vitacart-subnav-item--brands .vitacart-subnav-trigger { grid-column: 2; grid-row: 1; } .vitacart-cat-inner:not(:has(.vitacart-subnav-item--brands)) .vitacart-subnav-item--categories .vitacart-subnav-trigger { grid-column: 1 / -1; } .vitacart-cat-inner:not(:has(.vitacart-subnav-item--categories)) .vitacart-subnav-item--brands .vitacart-subnav-trigger { grid-column: 1 / -1; } .vitacart-cat-inner:not(:has(.vitacart-subnav-trigger)) .vitacart-cat-quick { grid-row: 1; } .vitacart-subnav-trigger { display: flex; width: 100%; justify-content: center; box-sizing: border-box; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.5rem; } .vitacart-subnav-item--mega::after { display: none; } .vitacart-cat-sep { display: none; } .vitacart-cat-quick { grid-column: 1 / -1; grid-row: 2; min-width: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; max-width: 100%; } .vitacart-subnav-panel { grid-column: 1 / -1; grid-row: 3; width: 100%; display: none; max-height: min(50vh, 380px); overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; border-radius: 10px; } .vitacart-subnav-item--categories.is-open .vitacart-subnav-panel, .vitacart-subnav-item--brands.is-open .vitacart-subnav-panel { display: block; } .vitacart-subnav-panel--categories { padding: 0.35rem 0.25rem; } .vitacart-subnav-panel--brands .vitacart-subnav-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vitacart-category-bar--ssr + .hero-landing, .vitacart-category-bar--ssr + .hero-shop, .vitacart-category-bar--ssr-slot + .hero-landing, .vitacart-category-bar--ssr-slot + .hero-shop { margin-top: 0.15rem; } .vitacart-category-bar--animating { overflow: hidden; max-height: var(--vitacart-cat-bar-h, 6rem); background: transparent !important; border-bottom-color: transparent !important; transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s ease; } .vitacart-category-bar--animating .container { background: #fff; border-bottom: 1px solid #e5e7eb; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(0); will-change: transform; } .vitacart-category-bar--animating.vitacart-category-bar--slide-up .container { transform: translateY(-100%); } .vitacart-category-bar--animating .vitacart-cat-inner { overflow: hidden; } .vitacart-category-bar:not(.vitacart-category-bar--collapsed):not(.vitacart-category-bar--animating):has( .vitacart-subnav-item--mega.is-open ) .vitacart-cat-inner { overflow: visible; } .vitacart-category-bar--collapsed { max-height: 0 !important; min-height: 0 !important; overflow: hidden; background: transparent !important; border-bottom-color: transparent !important; pointer-events: none; transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s ease; } .vitacart-category-bar--collapsed .container { transform: translateY(-100%); } .vitacart-category-bar--collapsed .vitacart-cat-inner { overflow: hidden; } } @media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { .vitacart-category-bar--animating .container, .vitacart-category-bar--collapsed .container { transition: none; } } /* Lighthouse: tap target 44px — на строке списка, без лишних отступов между ссылками */ @media (max-width: 991.98px) { #vitacartSiteFooter .vitacart-footer-col .small > p { /* !important — перебиваем Bootstrap-утилиту mb-1 на

*/ margin-bottom: 0 !important; min-height: 44px; display: flex; align-items: center; } #vitacartSiteFooter .vitacart-footer-col .small > p > a.link-secondary { min-height: 0; padding-top: 0; padding-bottom: 0; display: inline; } #vitacartSiteFooter .list-unstyled li { margin-bottom: 0 !important; } }