/** * Logo-bar responsywność (desktop + wąski desktop 768–980 px z html.mobile). * Klasy na ustawia user.js: emag-logo-bar-desktop, emag-logo-bar--search-compact, * emag-logo-bar--two-rows. Skala search: --emag-header-search-scale (1 → 0.9 → 0.8 → 0.7 → 0.6 → 0.5). * * Etapy: * 0 — tekst konta znika (1180 px) * 1 — search proporcjonalnie od <1320 px: 100% → 90% → 80% → 70% → 60% → 50% (540 px baza) * 2 — ukryta lupa + zakres (po osiągnięciu 50%) * 3 — 2 rzędy: logo (70%) + ikonki / search pełna szerokość */ @media screen and (min-width: 768px) { html.emag-logo-bar-desktop { --emag-header-search-scale: 1; --emag-header-search-max-w: calc(540px * var(--emag-header-search-scale, 1)); --emag-header-search-min-w: 120px; --emag-header-logo-scale: 1.1; --emag-header-gutter: 40px; } /* Logo pełnej wielkości do momentu 2 rzędów — nadpisuje emagheader.css @1024 */ html.emag-logo-bar-desktop:not(.emag-logo-bar--two-rows) header .logo-bar .link-logo img, html.emag-logo-bar-desktop:not(.emag-logo-bar--two-rows) #box_wce_sticky-header #wce_sticky-logo img { transform: scale(1.1) !important; transform-origin: left center; } html.emag-logo-bar-desktop:not(.emag-logo-bar--two-rows) header .logo-bar .link-logo, html.emag-logo-bar-desktop:not(.emag-logo-bar--two-rows) #box_wce_sticky-header #wce_sticky-logo { min-width: max-content !important; flex-shrink: 0 !important; overflow: visible !important; } html.emag-logo-bar-desktop header .logo-bar .emag-header-actions, html.emag-logo-bar-desktop #box_wce_sticky-header .emag-header-actions { min-width: max-content !important; flex-shrink: 0 !important; } html.emag-logo-bar-desktop header .emag-header-basket-wrap .basket > a.count img.px1, html.emag-logo-bar-desktop #box_wce_sticky-header .emag-header-basket-wrap .basket > a.count img.px1, html.emag-logo-bar-desktop header .emag-header-basket-wrap .basket > a.count:before, html.emag-logo-bar-desktop #box_wce_sticky-header .emag-header-basket-wrap .basket > a.count:before, html.emag-logo-bar-desktop header .emag-header-basket-wrap .basket > a.count:after, html.emag-logo-bar-desktop #box_wce_sticky-header .emag-header-basket-wrap .basket > a.count:after { display: none !important; content: none !important; } html.emag-logo-bar-desktop header .emag-header-basket-wrap, html.emag-logo-bar-desktop #box_wce_sticky-header .emag-header-basket-wrap { position: relative !important; width: var(--emag-header-action-size, 53px) !important; max-width: var(--emag-header-action-size, 53px) !important; min-width: var(--emag-header-action-size, 53px) !important; overflow: visible !important; flex-shrink: 0 !important; } html.emag-logo-bar-desktop header .emag-header-basket-wrap > .basket-contain, html.emag-logo-bar-desktop #box_wce_sticky-header .emag-header-basket-wrap > .basket-contain { position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; width: 540px !important; max-width: min(540px, calc(100vw - 32px)) !important; margin-top: 0 !important; box-sizing: border-box !important; } /* === Wymuszenie layoutu eMAG gdy Hammer dodał html.mobile (768–980 px) === */ html.emag-logo-bar-desktop header.row { display: grid !important; grid-template-columns: var(--emag-header-gutter) minmax(0, 1fr) var(--emag-header-gutter) !important; padding-top: var(--emag-header-row-pad-y, 5px) !important; padding-bottom: var(--emag-header-row-pad-y, 5px) !important; background: #fff !important; } html.emag-logo-bar-desktop header.row > .logo-bar { grid-column: 2 / 3 !important; } html.emag-logo-bar-desktop header .login-bar { display: none !important; } html.emag-logo-bar-desktop header .logo-bar.emag-header-logo-bar, html.emag-logo-bar-desktop header .logo-bar { display: grid !important; grid-template-areas: "emag-logo emag-search emag-actions"; /* 1fr | search | 1fr — search optycznie na środku; boczne 1fr kurczą się równo */ grid-template-columns: 1fr var(--emag-header-search-max-w) 1fr !important; align-items: center; column-gap: var(--emag-header-logo-bar-gap, clamp(8px, 1.2vw, 16px)); min-height: var(--emag-header-logo-bar-min-h, 64px); padding-top: var(--emag-header-logo-bar-pad-y, 8px); padding-bottom: var(--emag-header-logo-bar-pad-y, 8px); width: 100% !important; max-width: var(--emag-content-max-width, 1320px) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; overflow: visible !important; } html.emag-logo-bar-desktop header .logo-bar .link-logo { grid-area: emag-logo !important; justify-self: start !important; display: inline-flex !important; align-items: center !important; float: none !important; height: var(--emag-header-action-size, 53px) !important; max-width: max-content; } html.emag-logo-bar-desktop header .logo-bar .link-logo img { max-height: var(--emag-header-logo-max-h, 53px); transform: scale(var(--emag-header-logo-scale, 1.1)); transform-origin: left center; } html.emag-logo-bar-desktop header .logo-bar .search__container, html.emag-logo-bar-desktop header .logo-bar > .search-form { grid-area: emag-search !important; display: block !important; visibility: visible !important; justify-self: center !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; float: none !important; position: relative !important; padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* Pełne 540 px — tylko środkowa kolumna grid (≥1320 px viewport) */ @media screen and (min-width: 1320px) { html.emag-logo-bar-desktop.emag-logo-bar--search-full:not(.emag-logo-bar--two-rows) { --emag-header-search-scale: 1; --emag-header-search-max-w: 540px !important; } } html.emag-logo-bar-desktop header .logo-bar .emag-header-actions { grid-area: emag-actions !important; display: flex !important; visibility: visible !important; justify-self: end !important; align-self: center !important; float: none !important; } /* emagrelated4.css: minmax(80px,540px) — nie stosować przy logo-bar eMAG */ html.emag-logo-bar-desktop:not(.emag-logo-bar--two-rows) header .logo-bar.emag-header-logo-bar, html.emag-logo-bar-desktop:not(.emag-logo-bar--two-rows) header .logo-bar, html.emag-logo-bar-desktop:not(.emag-logo-bar--two-rows) #box_wce_sticky-header.emag-sticky-compact > .container { grid-template-columns: 1fr var(--emag-header-search-max-w, 540px) 1fr !important; } html.emag-logo-bar-desktop header .logo-bar #box_wce_headerinfo, html.emag-logo-bar-desktop header .logo-bar .wce_desktop-trigger-search { display: none !important; } html.emag-logo-bar-desktop #box_wce_sticky-header.emag-sticky-compact { display: grid !important; grid-template-columns: var(--emag-header-gutter) minmax(0, 1fr) var(--emag-header-gutter) !important; width: 100% !important; box-sizing: border-box; } html.emag-logo-bar-desktop #box_wce_sticky-header.emag-sticky-compact > .container { display: grid !important; grid-template-areas: "emag-logo emag-search emag-actions"; grid-template-columns: 1fr var(--emag-header-search-max-w) 1fr !important; align-items: center; column-gap: var(--emag-header-logo-bar-gap, clamp(8px, 1.2vw, 16px)); grid-column: 2 / 3 !important; width: 100% !important; max-width: var(--emag-content-max-width, 1320px) !important; margin-left: auto !important; margin-right: auto !important; min-height: var(--emag-header-logo-bar-min-h, 64px); padding-top: var(--emag-header-logo-bar-pad-y, 8px); padding-bottom: var(--emag-header-logo-bar-pad-y, 8px); box-sizing: border-box; } html.emag-logo-bar-desktop #box_wce_sticky-header #wce_sticky-logo { grid-area: emag-logo !important; justify-self: start !important; display: inline-flex !important; align-items: center !important; } html.emag-logo-bar-desktop #box_wce_sticky-header #wce_sticky-logo img { max-height: var(--emag-header-logo-max-h, 53px); transform: scale(var(--emag-header-logo-scale, 1.1)) !important; transform-origin: left center; } html.emag-logo-bar-desktop #box_wce_sticky-header #wce_sticky-search { grid-area: emag-search !important; display: block !important; visibility: visible !important; justify-self: center !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; } html.emag-logo-bar-desktop #box_wce_sticky-header .emag-header-actions { grid-area: emag-actions !important; display: flex !important; visibility: visible !important; justify-self: end !important; } html.emag-logo-bar-desktop #box_wce_sticky-header #wce_sticky-mobile, html.emag-logo-bar-desktop #box_wce_sticky-header #wce_sticky-basket, html.emag-logo-bar-desktop #box_wce_sticky-header #wce_sticky-menu, html.emag-logo-bar-desktop #box_wce_sticky-header #wce_sticky-roll-up { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; } html.emag-logo-bar-desktop #box_wce_sticky-header:not(.wce_visible) { position: fixed !important; top: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; pointer-events: none !important; } html.emag-logo-bar-desktop #box_wce_sticky-header.emag-sticky-compact.wce_visible { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; height: auto !important; min-height: 0 !important; overflow: visible !important; pointer-events: auto !important; z-index: 10070 !important; background: #fff !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } /* Etap 2 — bez lupy i zakresu; samo pole wyszukiwania (po osiągnięciu 50% szerokości search) */ html.emag-logo-bar-desktop.emag-logo-bar--search-compact header .search .emag-search-scope-wrap, html.emag-logo-bar-desktop.emag-logo-bar--search-compact #box_wce_sticky-header .search .emag-search-scope-wrap, html.emag-logo-bar-desktop.emag-logo-bar--search-compact header .search .search__btn-search, html.emag-logo-bar-desktop.emag-logo-bar--search-compact #box_wce_sticky-header .search .search__btn-search, html.emag-logo-bar-desktop.emag-logo-bar--search-compact header .search .search__input-area-item:has(.search__btn-search), html.emag-logo-bar-desktop.emag-logo-bar--search-compact #box_wce_sticky-header .search .search__input-area-item:has(.search__btn-search) { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; padding: 0 !important; margin: 0 !important; } html.emag-logo-bar-desktop.emag-logo-bar--search-compact header .search .search__input-area, html.emag-logo-bar-desktop.emag-logo-bar--search-compact #box_wce_sticky-header .search .search__input-area { border-radius: 8px !important; padding-right: 14px !important; } html.emag-logo-bar-desktop.emag-logo-bar--search-compact header .search .search__input[type="search"], html.emag-logo-bar-desktop.emag-logo-bar--search-compact #box_wce_sticky-header .search .search__input[type="search"] { border-radius: 8px !important; } /* Etap 3 — dwa rzędy: logo (70%) + ikonki / search pełna szerokość */ html.emag-logo-bar-desktop.emag-logo-bar--two-rows { --emag-header-logo-scale: 0.77; --emag-header-search-max-w: none; --emag-header-search-min-w: 0; --emag-header-gutter: 16px; } html.emag-logo-bar-desktop.emag-logo-bar--two-rows header .logo-bar .link-logo img, html.emag-logo-bar-desktop.emag-logo-bar--two-rows #box_wce_sticky-header #wce_sticky-logo img { transform: scale(0.77) !important; transform-origin: left center; } html.emag-logo-bar-desktop.emag-logo-bar--two-rows header .logo-bar.emag-header-logo-bar, html.emag-logo-bar-desktop.emag-logo-bar--two-rows header .logo-bar, html.emag-logo-bar-desktop.emag-logo-bar--two-rows #box_wce_sticky-header.emag-sticky-compact > .container { grid-template-areas: "emag-logo emag-actions" "emag-search emag-search"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 8px; align-items: center; } html.emag-logo-bar-desktop.emag-logo-bar--two-rows header .logo-bar .search__container, html.emag-logo-bar-desktop.emag-logo-bar--two-rows header .logo-bar > .search-form, html.emag-logo-bar-desktop.emag-logo-bar--two-rows #box_wce_sticky-header #wce_sticky-search { grid-area: emag-search !important; width: 100% !important; max-width: none !important; justify-self: stretch !important; } html.emag-logo-bar-desktop.emag-logo-bar--two-rows header .logo-bar .emag-header-actions, html.emag-logo-bar-desktop.emag-logo-bar--two-rows #box_wce_sticky-header .emag-header-actions { grid-area: emag-actions !important; justify-self: end !important; flex-shrink: 0; } html.emag-logo-bar-desktop.emag-logo-bar--two-rows #box_wce_sticky-header.emag-sticky-compact.wce_visible { transition: transform 0.22s ease, opacity 0.22s ease; } html.emag-logo-bar-desktop.emag-logo-bar--two-rows #box_wce_sticky-header.emag-sticky-compact.emag-sticky-scroll-hidden { transform: translateY(-105%); opacity: 0; pointer-events: none !important; } /* Etap 0 — tekst konta (zachowanie bez zmian, selektor pod emag-logo-bar-desktop) */ @media screen and (max-width: 1180px) { html.emag-logo-bar-desktop .emag-header-account__text { display: none !important; } html.emag-logo-bar-desktop .emag-header-account__trigger { gap: 0; padding: 0; } } }