/* immersafe-child-search-bar */ /* Wspolny pasek wyszukiwania produktow. */ .imsf-search-bar { box-sizing: border-box; display: flex; position: relative; z-index: 900; width: 100%; max-width: 100%; height: 42px; margin: 20px 0 18px; border: 1px solid #be0225; background: #fff; } .imsf-search-bar--home { width: 96%; max-width: 1600px; margin-right: auto; margin-left: auto; } .imsf-search-bar__input { box-sizing: border-box; flex: 1 1 auto; min-width: 0; height: 40px; min-height: 0; margin: 0; padding: 0 14px; border: 0; border-radius: 0; background: #fff; color: #1a1a1a; font-size: 16px; } .imsf-search-bar__input::placeholder { color: #595959; opacity: 1; } .imsf-search-bar__button { box-sizing: border-box; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-width: 96px; height: 40px; min-height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: #be0225; color: #fff; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; } .imsf-search-bar__button svg { flex: 0 0 20px; } .imsf-search-bar__button:hover { background: #93001c; color: #fff; } .imsf-search-bar__input:focus-visible { outline: 2px solid #1a1a1a; outline-offset: -4px; } .imsf-search-bar__button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; } .imsf-search-bar__suggestions { box-sizing: border-box; position: absolute; top: 100%; left: -1px; right: -1px; z-index: 1; max-height: min(420px, 65vh); overflow-y: auto; border: 1px solid #ddd; background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } .imsf-search-bar__suggestions[hidden] { display: none; } .imsf-search-bar__option { box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; border-bottom: 1px solid #eee; color: #1a1a1a; font-size: 14px; text-decoration: none; } .imsf-search-bar__option:last-child { border-bottom: 0; } .imsf-search-bar__option:hover, .imsf-search-bar__option.is-active { background: #f6f6f6; color: #1a1a1a; } .imsf-search-bar__option--all { color: #a0001f; font-weight: 600; } .imsf-search-bar__option--all:hover, .imsf-search-bar__option--all.is-active { color: #a0001f; } .imsf-search-bar__thumbnail { box-sizing: border-box; flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; background: #f5f5f5; } .imsf-search-bar__details { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; } .imsf-search-bar__name { line-height: 1.35; overflow-wrap: anywhere; } .imsf-search-bar__sku { color: #595959; font-size: 12px; } .imsf-search-bar__price { flex: 0 0 auto; margin-left: auto; white-space: nowrap; } .imsf-search-bar__empty { padding: 14px 12px; color: #595959; font-size: 14px; } .imsf-search-bar__live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 640px) { .imsf-search-bar { height: 46px; } .imsf-search-bar--home { width: 100%; } /* poza strona glowna (tam rodzic ma juz margines 16 px) pasek odsuniety od krawedzi ekranu jak slider */ body:not(.home) .imsf-search-bar--home { width: calc(100% - 32px); } .imsf-search-bar__input, .imsf-search-bar__button { height: 44px; } .imsf-search-bar__button { min-width: 44px; min-height: 44px; padding: 0; } .imsf-search-bar__button-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .imsf-search-bar__option { min-height: 48px; gap: 8px; padding: 6px 8px; } .imsf-search-bar__price { font-size: 12px; } } /* immersafe-child-home */ /* Slider na pelna szerokosc, stara kolumna z menu (boksy) ukryta - zastepuje ja siatka .imsf-home-cats. */ .elementor-element-24e40ea > .elementor-container > .elementor-column:first-child { display: none; } /* Anti-Return-Label: jeden stabilny panel - tekst od 5% jego lewej krawedzi, obraz w prawej kolumnie, bez absolutnych przesuniec i pustego spaceru. */ body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-96b2879 > .elementor-widget-wrap { display: grid !important; grid-template-columns: minmax(0, 60%) minmax(0, 40%); align-items: center; padding: clamp(20px, 3vw, 40px) 5% !important; background: radial-gradient(at 50% 0%, rgb(238, 117, 25) 10%, rgb(182, 72, 25) 46%) !important; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-35bd6c0 { grid-column: 1; grid-row: 1; position: static !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; background: none !important; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-35bd6c0 > .elementor-container { padding: 0 !important; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-f2c4e6a, body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-f2c4e6a > .elementor-widget-wrap { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-f2c4e6a > .elementor-widget-wrap { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; } body.home .elementor-6405 .elementor-element-a79bffa :is(.elementor-element-d6264e8, .elementor-element-a8e8de6) { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; margin-left: 0 !important; max-width: 100% !important; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-d6264e8 { width: 100% !important; text-align: left !important; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-d6264e8 :is( .aux-modern-heading-primary, .aux-modern-heading-secondary, .aux-modern-heading-description ) { width: 100% !important; max-width: 100% !important; text-align: left !important; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-4740dab { display: none !important; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-a8e8de6 { width: max-content !important; margin-top: 24px !important; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-0a3b14f { grid-column: 2; grid-row: 1; position: static !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; justify-self: end; align-self: center; width: min(100%, 550px) !important; max-width: 100% !important; height: auto !important; margin: 0 !important; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-0a3b14f img { display: block; width: 100%; height: auto; object-fit: contain; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-d6264e8 .aux-modern-heading-primary { font-size: 15px !important; line-height: 1.35 !important; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-d6264e8 .aux-modern-heading-secondary { font-size: clamp(28px, 3vw, 60px) !important; line-height: 1.1 !important; letter-spacing: normal !important; overflow-wrap: normal !important; word-break: normal !important; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-d6264e8 .aux-modern-heading-description p { font-size: 15px !important; line-height: 1.5 !important; margin: 0 0 0.75em !important; } @media (max-width: 1024px) { body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-d6264e8 .aux-modern-heading-secondary { font-size: clamp(28px, 3.2vw, 36px) !important; line-height: 1.15 !important; } } @media (max-width: 767px) { body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-96b2879 > .elementor-widget-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-0a3b14f { grid-column: 1; grid-row: 2; justify-self: center; width: min(100%, 300px) !important; } } .elementor-element-24e40ea > .elementor-container > .elementor-column:last-child { width: 100%; } .imsf-home-cats { /* 1600px = max-width .elementor-container slajdera nad tym blokiem, zeby kafelki mialy ta sama szerokosc. */ box-sizing: border-box; width: 96%; max-width: 1600px; margin: 0 auto; padding: 24px 0 8px 4px; } @media (min-width: 1667px) { .imsf-home-cats { padding-left: 6px; } } .imsf-home-cats__list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } body.home .imsf-home-cats__list { padding-inline-start: 0; } .imsf-home-cats__item { margin: 0; padding: 0; list-style: none; } .imsf-home-cats__item::marker, .imsf-home-cats__item::before { content: none; } .imsf-home-cats__link { display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; padding: 16px 10px 14px; border: 1px solid #ececec; background: #fff; color: #1a1a1a; text-align: center; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; } .imsf-home-cats__link:hover, .imsf-home-cats__link:focus-visible { border-color: #be0225; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); color: #be0225; } .imsf-home-cats__img { display: flex; align-items: center; justify-content: center; width: min(160px, 100%); aspect-ratio: 1; } .imsf-home-cats__img img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } .imsf-home-cats__name { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; } @media (max-width: 1024px) { .imsf-home-cats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 640px) { .imsf-home-cats { width: auto; padding: 16px 16px 4px; } .imsf-home-cats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .imsf-home-cats__link { padding: 12px 6px 10px; } .imsf-home-cats__name { font-size: 12.5px; } } /* Zakladki ElementsKit "Erfahrung in der Produktion" - tresc zakladki ("Seit uber zehn Jahren...") nie miala w ogole paddingu (0px), tekst dotykal krawedzi. Dodany odstep ok. 30px na kazdej szerokosci (mobile ma juz wlasny, mniejszy padding 16px nizej w tym pliku). */ .elementor-element-845f771 .elementkit-tab-content { padding: 30px; } /* Zakladki ElementsKit "Erfahrung in der Produktion": Elementor daje kolumnie zakladek flex-basis 30% bez wariantu mobilnego - na telefonie tekst lamal sie po literze. Do 767 px zakladki i tresc na pelna szerokosc. */ @media (max-width: 767px) { .elementor-element-845f771 .elementkit-tab-wraper.vertical { flex-wrap: wrap; } .elementor-6405 .elementor-element.elementor-element-845f771 .elementkit-tab-wraper.vertical > .elementkit-tab-nav, .elementor-6405 .elementor-element.elementor-element-845f771 .elementkit-tab-wraper.vertical > .elementkit-tab-content { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin-right: 0 !important; } .elementor-element-845f771 .elementkit-tab-wraper.vertical > .elementkit-tab-nav .elementkit-nav-link { display: flex; align-items: center; gap: 10px; text-align: left; } .elementor-element-845f771 .elementkit-tab-wraper.vertical > .elementkit-tab-content { margin-top: 12px; padding: 16px !important; } .elementor-element-845f771 .elementkit-tab-content p { font-size: 14px !important; line-height: 1.6 !important; } } /* Te same zakladki na tablecie (768-1024 px): kolumna zakladek jest waska, a prawy padding przycisku (35 px, zapas na nieuzywana ikonke) zabiera miejsce na tekst - "Sicherheitsqualitat" lamalo sie w polowie slowa ("Sicherheitsqualit" / "at"). Mniejszy font + mniejszy padding + zakaz lamania w srodku slowa. */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-element-845f771 .elementkit-tab-nav .elementkit-nav-link { padding: 14px 14px 14px 10px !important; } .elementor-element-845f771 .elementskit-tab-title { font-size: 13px !important; line-height: 1.3 !important; word-break: keep-all; overflow-wrap: normal; } } /* Dwa rzedy kart produktow: stale odstepy i normalny przeplyw widgetow. Dekoracyjna warstwa tla Elementora pozostaje pod trescia karty. */ @media (max-width: 9999px) { body.home .elementor-6405 .elementor-element-3ba2b78 { margin-bottom: 20px !important; } body.home .elementor-6405 .elementor-element-3c1cb2b { padding-top: 0 !important; } /* CSS Grid z repeat(3, minmax(0,1fr)) dawal tylko 2 kolumny w rzedzie - przyczyna: natywny clearfix Elementora ".elementor-container::before{content:"";display:block}" (stary haczyk spod ukladu float) w kontekscie flex/grid staje sie wedlug specyfikacji PRAWDZIWYM elementem potomnym (bo ma content i display:block), wiec zajmowal pierwsza "widmowa" kolumne/komorke, zepychajac prawdziwe karty. Pseudoelement wylaczony ponizej. */ body.home .elementor-6405 .elementor-element-3ba2b78 > .elementor-container::before, body.home .elementor-6405 .elementor-element-3ba2b78 > .elementor-container::after, body.home .elementor-6405 .elementor-element-3c1cb2b > .elementor-container::before, body.home .elementor-6405 .elementor-element-3c1cb2b > .elementor-container::after { display: none !important; } body.home .elementor-6405 .elementor-element-3ba2b78 > .elementor-container, body.home .elementor-6405 .elementor-element-3c1cb2b > .elementor-container { display: flex !important; flex-wrap: wrap; gap: 20px; align-items: flex-start; } body.home .elementor-6405 .elementor-element-3ba2b78 > .elementor-container > .elementor-column, body.home .elementor-6405 .elementor-element-3c1cb2b > .elementor-container > .elementor-column { flex: 1 1 calc(33.333% - 13.334px) !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; order: 0 !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-column > .elementor-widget-wrap, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-column > .elementor-widget-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; height: auto; min-width: 0; margin: 0 !important; padding: 20px; box-sizing: border-box; text-align: left; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-column > .elementor-widget-wrap > .elementor-element, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-column > .elementor-widget-wrap > .elementor-element { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; transform: none !important; } /* Na oryginale (immersafe.de/shop) naglowek jest NAD zdjeciem - u nas bylo odwrotnie, przez co szary tekst nagłówka ("Gamma 10" itp.) nachodzil wizualnie na deseniowe tlo zdjecia (np. mapa swiata) i byl slabo czytelny. Zdjecie przesuniete za naglowek. */ body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-wrap > .elementor-element.elementor-widget-aux_image, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-widget-wrap > .elementor-element.elementor-widget-aux_image { order: 1; max-width: 260px !important; align-self: center; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-aux_image img, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-widget-aux_image img { width: 100%; max-width: 100%; max-height: 160px; height: auto !important; display: block; object-fit: contain; } /* Plakietka CO2 jest dodatkiem do ceny, nie drugim zdjeciem produktu. */ body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-wrap > .elementor-element.elementor-element-3899375 { order: 3; max-width: 56px !important; align-self: flex-start; } /* Elementor daje kontenerowi naglowka padding ok. 28 px - tekst nie miescil sie w karcie. */ body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-aux_modern_heading > .elementor-widget-container, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-widget-aux_modern_heading > .elementor-widget-container { padding: 0 !important; } /* Marginesy Phlox po projekcie opartym na pozycjonowaniu absolutnym. */ body.home .elementor-6405 .elementor-element-3ba2b78 .aux-widget-modern-heading :is(.aux-modern-heading-primary, .aux-modern-heading-secondary, .aux-modern-heading-description), body.home .elementor-6405 .elementor-element-3c1cb2b .aux-widget-modern-heading :is(.aux-modern-heading-primary, .aux-modern-heading-secondary, .aux-modern-heading-description), body.home .elementor-6405 .elementor-element-05a4188 .aux-widget-modern-heading :is(.aux-modern-heading-primary, .aux-modern-heading-secondary, .aux-modern-heading-description) { margin: 0 0 6px !important; padding: 0 !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-aux_modern_heading, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-widget-aux_modern_heading { order: 0; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-text-editor, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-widget-text-editor { order: 2; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-aux_button, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-widget-aux_button { order: 4; margin-top: auto !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-aux_button .elementor-widget-container, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-widget-aux_button .elementor-widget-container { text-align: left; } body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-widget-spacer { display: none; } body.home .elementor-6405 .elementor-element-3ba2b78 .aux-widget-modern-heading, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-widget-modern-heading, body.home .elementor-6405 .elementor-element-3ba2b78 .aux-widget-modern-heading .aux-widget-inner, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-widget-modern-heading .aux-widget-inner, body.home .elementor-6405 .elementor-element-3ba2b78 .aux-widget-modern-heading .aux-widget-inner > *, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-widget-modern-heading .aux-widget-inner > * { text-align: left !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-text-editor .elementor-widget-container, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-widget-text-editor .elementor-widget-container { text-align: left; } /* Wspolna hierarchia pisma we wszystkich szesciu kartach. */ body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-primary, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-primary { font-size: 1rem !important; line-height: 1.35 !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-secondary, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-secondary { font-size: 1.625rem !important; line-height: 1.15 !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-description, body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-description p, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-description, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-description p { font-size: 1rem !important; line-height: 1.35 !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-primary, body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-secondary, body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-description p, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-primary, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-secondary, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-description p { overflow-wrap: anywhere; word-break: normal; hyphens: auto; white-space: normal; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-text-editor .elementor-widget-container p, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-widget-text-editor .elementor-widget-container p { font-size: 0.9375rem !important; line-height: 1.5; } body.home .elementor-6405 .elementor-element-3ba2b78 .aux-button .aux-text, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-button .aux-text { font-size: 0.875rem !important; } /* Opisy mialy ujemny margines akapitu w wygenerowanym CSS Elementora. */ body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) .aux-modern-heading-description p { margin: 0 !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-element-3899375 img { width: 100% !important; max-width: 100% !important; } /* Phlox dodaje dolny margines akapitom i przyciskom, niezaleznie od gap widgetow. */ body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) .elementor-widget-text-editor p { margin: 0 0 8px; line-height: 1.4 !important; } body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) .elementor-widget-text-editor p:last-child, body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) .aux-button { margin-bottom: 0 !important; } } /* Desktop: proporcje 2:1:1 i 1:1:2 jak w referencji. Dlugi opis dostaje szerokosc, zamiast rozciagac trzy waskie karty w pionie. Tylko szerokie karty maja obraz obok tekstu. */ @media (min-width: 1400px) { body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) > .elementor-container { align-items: stretch; } body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) > .elementor-container > .elementor-column { flex: 1 1 0 !important; } body.home .elementor-6405 .elementor-element-3ba2b78 > .elementor-container > .elementor-element-b5de7b7, body.home .elementor-6405 .elementor-element-3c1cb2b > .elementor-container > .elementor-element-b3ca156 { flex-grow: 2 !important; } body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) .elementor-column > .elementor-widget-wrap { min-height: 320px; height: 100%; } body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) :is(.elementor-element-b5de7b7, .elementor-element-b3ca156) > .elementor-widget-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34%); grid-template-rows: auto auto auto 1fr; column-gap: 16px; align-content: start; } body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) :is(.elementor-element-b5de7b7, .elementor-element-b3ca156) .elementor-widget-aux_modern_heading { grid-column: 1; grid-row: 1; } body.home .elementor-6405 .elementor-element-b5de7b7 .elementor-element-3d68eaf { grid-column: 1; grid-row: 2; } body.home .elementor-6405 .elementor-element-b5de7b7 .elementor-element-49fdcfd { grid-column: 1 / -1; grid-row: 3; } body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) :is(.elementor-element-b5de7b7, .elementor-element-b3ca156) > .elementor-widget-wrap > .elementor-element.elementor-widget-aux_image { grid-column: 2; grid-row: 1 / 3; align-self: center; max-width: 100% !important; } body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) :is(.elementor-element-b5de7b7, .elementor-element-b3ca156) .elementor-widget-aux_image img { max-height: 230px; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-element-b5de7b7 > .elementor-widget-wrap > .elementor-element.elementor-element-3899375 { grid-column: 2; grid-row: 4; max-width: 56px !important; justify-self: end; align-self: end; } body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) :is(.elementor-element-b5de7b7, .elementor-element-b3ca156) .elementor-widget-aux_button { grid-column: 1; grid-row: 4; align-self: end; margin-top: 0 !important; } body.home .elementor-6405 .elementor-element-3c1cb2b :is(.elementor-element-d75798f, .elementor-element-f71208d) .elementor-widget-aux_image img { max-height: 128px; } /* W waskich kartach naglowek poprzedza zdjecie, CTA zamyka karte. */ body.home .elementor-6405 :is(.elementor-element-aa13740, .elementor-element-562ad8f, .elementor-element-d75798f, .elementor-element-f71208d) .elementor-widget-aux_modern_heading { order: -1; } } /* Tablet i wezszy desktop: trzy karty w rzedzie, wiekszy obraz nad tekstem. */ @media (min-width: 768px) and (max-width: 1399px) { body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-column > .elementor-widget-wrap, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-column > .elementor-widget-wrap { padding: 18px; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-wrap > .elementor-element.elementor-widget-aux_image:not(.elementor-element-3899375), body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-widget-wrap > .elementor-element.elementor-widget-aux_image:not(.elementor-element-3899375) { max-width: 220px !important; } } @media (min-width: 768px) and (max-width: 1024px) { body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-primary, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-primary { font-size: 0.875rem !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-secondary, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-secondary { font-size: 1.25rem !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-description, body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-description p, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-description, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-description p { font-size: 0.9375rem !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-text-editor .elementor-widget-container p, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-widget-text-editor .elementor-widget-container p { font-size: 0.875rem !important; } } @media (max-width: 767px) { body.home .elementor-6405 .elementor-element-3ba2b78 > .elementor-container > .elementor-column, body.home .elementor-6405 .elementor-element-3c1cb2b > .elementor-container > .elementor-column { flex: 1 1 100% !important; min-width: 0 !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-column > .elementor-widget-wrap, body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-column > .elementor-widget-wrap { padding: 20px; } body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-primary, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-primary { font-size: 0.9375rem !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-secondary, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-secondary { font-size: 1.375rem !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-description, body.home .elementor-6405 .elementor-element-3ba2b78 .aux-modern-heading-description p, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-description, body.home .elementor-6405 .elementor-element-3c1cb2b .aux-modern-heading-description p { font-size: 1rem !important; } body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) .elementor-column > .elementor-widget-wrap { align-items: center; } body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) .elementor-column :is(.aux-widget-modern-heading, .aux-widget-inner, .aux-widget-inner > *, .elementor-widget-container) { text-align: center !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-widget-wrap > .elementor-element.elementor-element-3899375 { align-self: center; } } /* Tablet: "Ihre Vorteile auf einen Blick" - Elementor daje lewej kolumnie ok. 22 % szerokosci, slowa sie lamia po literze. Kolumna z lista na pelna szerokosc, Secure Bag pod nia w normalnym przeplywie. */ @media (min-width: 768px) and (max-width: 1024px) { body.home .elementor-6405 .elementor-element-e71925a > .elementor-container { flex-wrap: wrap; } body.home .elementor-6405 .elementor-element-e71925a > .elementor-container > .elementor-element-01251ac, body.home .elementor-6405 .elementor-element-e71925a > .elementor-container > .elementor-element-05a4188 { width: 100% !important; } body.home .elementor-6405 .elementor-element-01251ac > .elementor-widget-wrap { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-content: start; } body.home .elementor-6405 .elementor-element-01251ac > .elementor-widget-wrap > .elementor-element { width: 100% !important; } body.home .elementor-6405 .elementor-element-01251ac > .elementor-widget-wrap > .elementor-element-a04b1c0 { grid-column: 1 / -1; } body.home .elementor-6405 .elementor-element-a04b1c0 .elementor-heading-title { font-size: clamp(1.5rem, 1.125rem + 1.5vw, 2rem); line-height: 1.2; } body.home .elementor-6405 .elementor-element-01251ac .elementor-icon-box-title, body.home .elementor-6405 .elementor-element-01251ac .elementor-icon-list-text { font-size: 0.9375rem !important; line-height: 1.4; overflow-wrap: normal; word-break: normal; hyphens: manual; } /* "SECURE BAG": Phlox ma 120 px / line-height 1 px pod uklad absolutny. Interlinia 1.1 (110%). Font 2x wiekszy; "Secure" i "Bag" sa dwoma oddzielnymi

(wlasnosc oryginalnej tresci Elementora), polaczone ponizej w jeden plynacy akapit (display:inline + spacja), zamiast dwoch oddzielnych blokow. */ body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-description, body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-description p { font-size: clamp(4rem, 1.6rem + 9.6vw, 6.4rem); line-height: 1.1; } /* Baner Anti-Return-Label: obraz (laptop) wystawal 17 px za kolumne. */ body.home .elementor-6405 .elementor-element-96b2879 > .elementor-widget-wrap > .elementor-element-0a3b14f { left: auto !important; right: 24px !important; width: 40% !important; max-width: 40% !important; } /* Baner "Behaelter mit integriertem Deckel": obraz wystaje 84 px za prawa krawedz. */ body.home .elementor-6405 .elementor-element-3c94ec6 > .elementor-widget-wrap > .elementor-element-ae55a16 { left: auto !important; right: 12px !important; width: 46% !important; max-width: 46% !important; } } /* Baner "Secure Bag" (kolumna 05a4188): obraz, naglowek i przycisk byly pozycjonowane absolutnie na sztywnych pikselach - przycisk "Mehr Info" mial staly "top" wzgledem jednej szerokosci odniesienia, wiec na innych szerokosciach "odrywal" sie od tekstu (czasem daleko pod nim, czasem tuz obok). Regula dziala teraz zawsze (nie tylko na tablecie): obraz, naglowek, przycisk jeden pod drugim - przycisk zawsze bezposrednio pod naglowkiem, u dolu karty. */ body.home .elementor-6405 .elementor-element-05a4188 > .elementor-widget-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 20px 26px; text-align: left; } body.home .elementor-6405 .elementor-element-05a4188 > .elementor-widget-wrap > .elementor-element { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } body.home .elementor-6405 .elementor-element-05a4188 > .elementor-widget-wrap > .elementor-element.elementor-widget-aux_image { order: 0; max-width: 360px !important; } body.home .elementor-6405 .elementor-element-05a4188 .elementor-widget-aux_image img { max-width: 100%; height: auto; } body.home .elementor-6405 .elementor-element-05a4188 .elementor-widget-aux_modern_heading { order: 1; } body.home .elementor-6405 .elementor-element-05a4188 .aux-widget-modern-heading, body.home .elementor-6405 .elementor-element-05a4188 .aux-widget-modern-heading .aux-widget-inner { text-align: left; } body.home .elementor-6405 .elementor-element-05a4188 .elementor-widget-aux_button { order: 2; } body.home .elementor-6405 .elementor-element-05a4188 .elementor-widget-aux_button .elementor-widget-container { text-align: left; } /* Mobile: baner Anti-Return-Label - naglowek przesuniety o 127 px (miejsce na obraz) nachodzil na przycisk, obraz wraca do przeplywu nad tekstem; tekst min. 15 px. Pomaranczowy gradient jest ustawiony tylko na sekcji z tekstem (35bd6c0) - kolumna ze zdjeciem laptopa (96b2879) byla przezroczysta, wiec na mobile (zdjecie nad tekstem) nad pomaranczowym blokiem bylo biale tlo. Ten sam gradient dodany tez do kolumny ze zdjeciem, zeby bylo spojnie. */ @media (max-width: 767px) { body.home .elementor-6405 .elementor-element-96b2879 { background: radial-gradient(at 50% 0%, rgb(238, 117, 25) 10%, rgb(182, 72, 25) 46%) !important; } body.home .elementor-6405 .elementor-element-96b2879 > .elementor-widget-wrap > .elementor-element-0a3b14f { position: static !important; top: auto !important; left: auto !important; width: 60% !important; max-width: 240px !important; margin: 0 auto 8px !important; } body.home .elementor-6405 .elementor-element-0a3b14f img { max-width: 100%; height: auto; } body.home .elementor-6405 .elementor-element-f2c4e6a > .elementor-widget-wrap > .elementor-element-d6264e8, body.home .elementor-6405 .elementor-element-f2c4e6a > .elementor-widget-wrap > .elementor-element-a8e8de6 { top: 0 !important; left: 0 !important; width: 100% !important; max-width: 100% !important; } body.home .elementor-6405 .elementor-element-f2c4e6a > .elementor-widget-wrap > .elementor-element-4740dab { display: none; } body.home .elementor-6405 .elementor-element-a8e8de6 .elementor-widget-container { text-align: center; } body.home .elementor-6405 .elementor-element-d6264e8 .aux-modern-heading-primary { font-size: 0.9375rem; line-height: 1.35; } body.home .elementor-6405 .elementor-element-d6264e8 .aux-modern-heading-secondary { font-size: clamp(2rem, 1rem + 6vw, 2.75rem); line-height: 1.05; } body.home .elementor-6405 .elementor-element-d6264e8 .aux-modern-heading-description p { font-size: 0.9375rem; line-height: 1.5; margin-bottom: 0.75em; } body.home .elementor-6405 .elementor-element-a8e8de6 .aux-button .aux-text { font-size: 0.875rem; } /* Mobile: Secure Bag - tekst min. 15 px, obraz torby nie wystaje za prawa krawedz karty. */ body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-primary { font-size: 0.9375rem; } body.home .elementor-6405 .elementor-element-05a4188 > .elementor-widget-wrap > .elementor-element-b91c159 { left: auto !important; right: 14px !important; width: 46% !important; max-width: 46% !important; } /* Mobile: pasek "Hohe Qualitat / Schnelle Lieferung / ..." - 2 kolumny zamiast jednej, ostatnia pozycja (nieparzysta piata) wysrodkowana, ikony zmniejszone (byly 155 px). Margines 80px na kolumnie (ustawienie desktopowe Elementora) scisnal siatke do 170 px - wyzerowany tutaj. */ body.home .elementor-6405 .elementor-element-e6c6a5c .elementor-element-populated { margin: 0 !important; } body.home .elementor-6405 .elementor-element-e6c6a5c .elementor-widget-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 0.5rem; } body.home .elementor-6405 .elementor-element-e6c6a5c .elementor-widget-wrap > .elementor-widget-aux_text { width: 100% !important; } body.home .elementor-6405 .elementor-element-e6c6a5c .elementor-widget-wrap > .elementor-widget-aux_text:last-child { grid-column: 1 / -1; } /* Rowna wysokosc wszystkich 5 boxow (teksty roznej dlugosci lamia sie na 1-2 linie) - stala wysokosc + wysrodkowanie zawartosci w pionie, zeby ikony byly na tym samym poziomie. */ body.home .elementor-6405 .elementor-element-e6c6a5c .elementor-widget-wrap > .elementor-widget-aux_text { min-height: 8.125rem; } /* justify-content:flex-start (nie center) - niektore z 5 widgetow maja wlasny, inny padding ustawiony w Elementorze, wiec ich laczna wysokosc tresci rozni sie o kilkanascie px; przy wysrodkowaniu w pionie to przesuwalo ikony wzgledem siebie. Ikona ma teraz zawsze ten sam odstep od gory boxu, niezaleznie od dlugosci tekstu pod nia. */ body.home .elementor-6405 .elementor-element-e6c6a5c .aux-widget-advanced-text { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; padding: 0 !important; margin: 0 !important; text-align: center; } /* Kazdy z 5 widgetow mial inny wlasny padding nagłówka ustawiony w Elementorze (dziedzictwo desktopowego projektu) - wysokosc "nagłówka z ikona" wahala sie 61-71 px miedzy pozycjami, wiec mimo tej samej wysokosci calego boxu ikony nie byly w jednej linii w pionie. Nagłówek dostaje teraz stala wysokosc kwadratu (72x72) z ikona wysrodkowana w srodku - niezaleznie od oryginalnego paddingu danego widgetu. */ body.home .elementor-6405 .elementor-element-e6c6a5c .aux-text-widget-header { display: flex !important; align-items: center; justify-content: center; width: 72px !important; height: 72px !important; padding: 0 !important; margin: 0 0 0.5rem !important; } body.home .elementor-6405 .elementor-element-e6c6a5c .aux-ico-box { display: flex !important; align-items: center; justify-content: center; width: 56px !important; height: 56px !important; padding: 0 !important; margin: 0 !important; } body.home .elementor-6405 .elementor-element-e6c6a5c .aux-ico-box img { width: 56px !important; height: 56px !important; object-fit: contain; } body.home .elementor-6405 .elementor-element-e6c6a5c .aux-text-inner { text-align: center; } body.home .elementor-6405 .elementor-element-e6c6a5c .col-title { font-size: 0.8125rem; text-align: center; } } /* "Ihre Vorteile auf einen Blick" (tablet+desktop, kolumna 01251ac - osobna wersja mobile w innej kolumnie): checkmarki 38 px i kolor #F0B800 (jaskrawy zloty, slaby kontrast z bialym tlem) - zmniejszone, kolor zmieniony na granat zgodny z naglowkiem sekcji (#004A8F), lepszy kontrast. */ /* Cztery odstepy miedzy piecioma glownymi zaletami: 20px -> 0px. Odstep pod Personalisierung przed jej podlista pozostaje bez zmian. */ body.home .elementor-6405 .elementor-element-01251ac > .elementor-widget-wrap > :is( .elementor-element-9c57ca9, .elementor-element-185c540, .elementor-element-eb2b7aa, .elementor-element-4d5efce ) { margin-bottom: 0 !important; } body.home .elementor-6405 .elementor-element-01251ac .elementor-icon-box-title { font-size: 0.8125rem !important; color: #004A8F !important; } body.home .elementor-6405 .elementor-element-01251ac .elementor-icon { color: #004A8F !important; } body.home .elementor-6405 .elementor-element-01251ac .elementor-icon i { font-size: 1.375rem !important; width: 1.375rem; height: 1.375rem; } /* "SECURE BAG" - na desktopie (>=1025px) naglowki zmniejszone o polowe wzgledem poprzedniej wersji: "SECURE BAG" z 104 na 52px, "Sicherheitstaschen" z 30 na 15px, zdjecie torby z 360 na 220px, mniejszy padding/odstep - caly blok wyraznie nizszy. Desktop (>=1025px) nie mial wczesniej zadnej regulki wiec "przeciekal" font 120px z nieopatrzonej w breakpoint regulki (ten sam wzorzec co inne sekcje naprawiane dzisiaj); do tego Phlox ma tu line-height:1px pod uklad absolutny (litery renderuja sie "nad" wlasnym boxem) - przy duzym foncie to wizualnie nachodzilo na "Sicherheitstaschen" nad tekstem. Tablet (768-1024px) mial juz wlasna regulke nizej w tym pliku (z poprawnym line-height) - tu tylko mniejszy font. */ body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-description, body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-description p { font-size: 5.2rem !important; line-height: 1.1 !important; } /* "Secure" i "Bag" sa dwa oddzielne

w tresci widgetu (oryginalna tresc Elementora) - stad dziwne zachowanie przy zmianach interlinii/marginesow. Polaczone w jeden plynacy akapit: oba

obok siebie (display:inline) ze spacja miedzy nimi zamiast dwoch blokow. */ body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-description p { display: inline; margin: 0 !important; } body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-description p:first-child::after { content: " "; } /* "Sicherheitstaschen" (aux-modern-heading-secondary) mial stala interlinie 46px niezaleznie od rozmiaru czcionki (15-30px w zaleznosci od szerokosci) - przy malej czcionce dawalo to absurdalnie duzy odstep (do 3x wysokosci litery) nad "SECURE BAG". Interlinia proporcjonalna do fontu na kazdej szerokosci. */ body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-secondary { line-height: 1.2 !important; } @media (min-width: 1025px) { body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-secondary { font-size: 0.9375rem !important; } body.home .elementor-6405 .elementor-element-05a4188 > .elementor-widget-wrap > .elementor-element.elementor-widget-aux_image { max-width: 220px !important; } body.home .elementor-6405 .elementor-element-05a4188 > .elementor-widget-wrap { gap: 8px; padding: 20px; } } @media (max-width: 767px) { body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-description, body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-description p { font-size: 3.1rem !important; line-height: 1.1 !important; } } @media (min-width: 768px) and (max-width: 1024px) { body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-description, body.home .elementor-6405 .elementor-element-74260a3 .aux-modern-heading-description p { font-size: clamp(2.4rem, 9.6vw, 4.8rem) !important; } } /* "Ihre Vorteile auf einen Blick" - podpunkty "mit eigenem Barcode/Text/Logo" (widget 792f14c w kolumnie 01251ac) mialy ten sam jaskrawy zloty #F0B800 co checkmarki wyzej - zmienione na ciemnoszary (kolor teksu w pozostalej czesci strony), dla lepszego kontrastu i czytelnosci. */ body.home .elementor-6405 .elementor-element-792f14c .elementor-icon-list-text { color: #444444 !important; font-size: 13px !important; } body.home .elementor-6405 .elementor-element-792f14c .elementor-icon-list-icon, body.home .elementor-6405 .elementor-element-792f14c .elementor-icon-list-icon i { color: #004A8F !important; } /* Trzy ikony list Elementora na home, bez arkuszy i fontow Font Awesome 5. */ body.home i.far.fa-arrow-alt-circle-right, body.home i.far.fa-check-circle, body.home i.fas.fa-circle { display: inline-block; width: 1em; height: 1em; flex: 0 0 1em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; font-style: normal; line-height: 1; vertical-align: -.125em; } body.home i.far.fa-arrow-alt-circle-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M504%20192c0%20-137%20-111%20-248%20-248%20-248s-248%20111%20-248%20248s111%20248%20248%20248s248%20-111%20248%20-248zM56%20192c0%20-110.5%2089.5%20-200%20200%20-200s200%2089.5%20200%20200s-89.5%20200%20-200%20200s-200%20-89.5%20-200%20-200zM128%20172v40c0%206.59961%205.40039%2012%2012%2012h116v67%20c0%2010.7002%2012.9004%2016%2020.5%208.5l99%20-99c4.7002%20-4.7002%204.7002%20-12.2998%200%20-17l-99%20-99c-7.59961%20-7.59961%20-20.5%20-2.2002%20-20.5%208.5v67h-116c-6.59961%200%20-12%205.40039%20-12%2012z%22%20transform%3D%22translate%280%20448%29%20scale%281%20-1%29%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M504%20192c0%20-137%20-111%20-248%20-248%20-248s-248%20111%20-248%20248s111%20248%20248%20248s248%20-111%20248%20-248zM56%20192c0%20-110.5%2089.5%20-200%20200%20-200s200%2089.5%20200%20200s-89.5%20200%20-200%20200s-200%20-89.5%20-200%20-200zM128%20172v40c0%206.59961%205.40039%2012%2012%2012h116v67%20c0%2010.7002%2012.9004%2016%2020.5%208.5l99%20-99c4.7002%20-4.7002%204.7002%20-12.2998%200%20-17l-99%20-99c-7.59961%20-7.59961%20-20.5%20-2.2002%20-20.5%208.5v67h-116c-6.59961%200%20-12%205.40039%20-12%2012z%22%20transform%3D%22translate%280%20448%29%20scale%281%20-1%29%22%2F%3E%3C%2Fsvg%3E"); } body.home i.far.fa-check-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20440c136.967%200%20248%20-111.033%20248%20-248s-111.033%20-248%20-248%20-248s-248%20111.033%20-248%20248s111.033%20248%20248%20248zM256%20392c-110.549%200%20-200%20-89.4678%20-200%20-200c0%20-110.549%2089.4678%20-200%20200%20-200c110.549%200%20200%2089.4678%20200%20200c0%20110.549%20-89.4678%20200%20-200%20200z%20M396.204%20261.733c4.66699%20-4.70508%204.63672%20-12.3037%20-0.0673828%20-16.9717l-172.589%20-171.204c-4.70508%20-4.66797%20-12.3027%20-4.63672%20-16.9697%200.0683594l-90.7812%2091.5156c-4.66797%204.70605%20-4.63672%2012.3047%200.0683594%2016.9717l22.7188%2022.5361%20c4.70508%204.66699%2012.3027%204.63574%2016.9697%20-0.0693359l59.792%20-60.2773l141.353%20140.216c4.70508%204.66797%2012.3027%204.6377%2016.9697%20-0.0673828z%22%20transform%3D%22translate%280%20448%29%20scale%281%20-1%29%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20440c136.967%200%20248%20-111.033%20248%20-248s-111.033%20-248%20-248%20-248s-248%20111.033%20-248%20248s111.033%20248%20248%20248zM256%20392c-110.549%200%20-200%20-89.4678%20-200%20-200c0%20-110.549%2089.4678%20-200%20200%20-200c110.549%200%20200%2089.4678%20200%20200c0%20110.549%20-89.4678%20200%20-200%20200z%20M396.204%20261.733c4.66699%20-4.70508%204.63672%20-12.3037%20-0.0673828%20-16.9717l-172.589%20-171.204c-4.70508%20-4.66797%20-12.3027%20-4.63672%20-16.9697%200.0683594l-90.7812%2091.5156c-4.66797%204.70605%20-4.63672%2012.3047%200.0683594%2016.9717l22.7188%2022.5361%20c4.70508%204.66699%2012.3027%204.63574%2016.9697%20-0.0693359l59.792%20-60.2773l141.353%20140.216c4.70508%204.66797%2012.3027%204.6377%2016.9697%20-0.0673828z%22%20transform%3D%22translate%280%20448%29%20scale%281%20-1%29%22%2F%3E%3C%2Fsvg%3E"); } body.home i.fas.fa-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20440c137%200%20248%20-111%20248%20-248s-111%20-248%20-248%20-248s-248%20111%20-248%20248s111%20248%20248%20248z%22%20transform%3D%22translate%280%20448%29%20scale%281%20-1%29%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20440c137%200%20248%20-111%20248%20-248s-111%20-248%20-248%20-248s-248%20111%20-248%20248s111%20248%20248%20248z%22%20transform%3D%22translate%280%20448%29%20scale%281%20-1%29%22%2F%3E%3C%2Fsvg%3E"); } body.home i.far.fa-arrow-alt-circle-right::before, body.home i.far.fa-check-circle::before, body.home i.fas.fa-circle::before { content: none; } /* Animacje fade-in opozniaja pokazanie tresci podczas przewijania na telefonie. */ @media (max-width: 767px), (prefers-reduced-motion: reduce) { body.home main .aux-appear-watch-animation[class*="aux-fade-in"] { animation: none !important; opacity: 1 !important; transform: none !important; } } /* Kafel "Alle anzeigen" (14.) - ikona SVG siatki w kolorze marki zamiast zdjecia produktu. */ .imsf-home-cats__link--all .imsf-home-cats__img { color: #be0225; } .imsf-home-cats__link--all .imsf-home-cats__img svg { width: 66px; height: 66px; } .imsf-home-cats__link--all:hover .imsf-home-cats__img, .imsf-home-cats__link--all:focus-visible .imsf-home-cats__img { color: inherit; } /* Gorny Smart Slider: wszystkie widoczne warstwy tekstowe zaczynaja sie 5% od lewej krawedzi calego slidera, niezaleznie od wycentrowanego slide limitera. Grafiki zostaja w oryginalnych pozycjach absolutnych Smart Slidera. */ body.home #n2-ss-4 { container-type: inline-size; --imsf-slider-limiter: 100cqw; --imsf-slider-text-left: calc(5cqw - max(0px, (100cqw - var(--imsf-slider-limiter)) / 2) - 20px); } @media (min-width: 768px) and (max-width: 1199px) { body.home #n2-ss-4 { --imsf-slider-limiter: 800px; } } @media (min-width: 1200px) and (max-width: 1319px) { body.home #n2-ss-4 { --imsf-slider-limiter: 1200px; } } @media (min-width: 1320px) { body.home #n2-ss-4 { --imsf-slider-limiter: 1300px; } body.home #n2-ss-4 .n2-ss-slide-limiter { max-width: 1300px !important; } body.home #n2-ss-4 .n2-ss-slide-21 .n-uc-0YY4eQtwPabB { margin-left: 80px !important; } } body.home #n2-ss-4 :is( .n2-ss-slide-19, .n2-ss-slide-20, .n2-ss-slide-21, .n2-ss-slide-22, .n2-ss-slide-23 ) .n2-ss-section-main-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; min-height: 576px !important; } body.home #n2-ss-4 :is( .n-uc-s8gXuJDT3bMc, .n-uc-IusdqQUNPtzv, .n-uc-jzHURSe9tQmA, .n-uc-XdRI8zThhl3E, .n-uc-xgWrW8MNhj7o, .n-uc-buyq7aHxyHz1, .n-uc-z8NMazUgndm2, .n-uc-8ERamKHjHT7R, .n-uc-Sl0lScszObzQ, .n-uc-yQzGn3wsGKPk, .n-uc-tMddHA8qnbi1, .n-uc-oBTJlfAL64eJ, .n-uc-A3VuZ1CDLqxM, .n-uc-JdiDFiYyIXv1, .n-uc-raos7yWiWoC1, .n-uc-uLyPYqOYyVKj, .n-uc-Z1iG4TUJ6eg0, .n-uc-pw1ztDNzPG5d, .n-uc-FiLHo0HBuCOw, .n-uc-ZXpFHBv3iyJZ, .n-uc-WKDCBa5fjW4w, .n-uc-J4y47gBd757f, .n-uc-wZujXbTmhdDV, .n-uc-3hAJhuHxEMe7, .n-uc-YdyuctX5YIYu, .n-uc-TQFTWNA9upYr, .n-uc-idcLF2ExisAy, .n-uc-vl3SCoPugB9N, .n-uc-mReKYbyFPScs, .n-uc-JjLxJ9ftlZAT, .n-uc-Z9oZ1Bs55Oet, .n-uc-E4bRFuP31WE0, .n-uc-tMvZVJrLl4ET, .n-uc-BHXFQP5z6r5V, .n-uc-Ndcku87qgGZ6 ) { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: auto !important; height: auto !important; max-width: 45cqw !important; margin: 0 0 0 var(--imsf-slider-text-left) !important; align-self: flex-start !important; text-align: left !important; } body.home #n2-ss-4 :is( .n-uc-jzHURSe9tQmA, .n-uc-XdRI8zThhl3E, .n-uc-yQzGn3wsGKPk, .n-uc-tMddHA8qnbi1, .n-uc-Z1iG4TUJ6eg0, .n-uc-pw1ztDNzPG5d, .n-uc-3hAJhuHxEMe7, .n-uc-YdyuctX5YIYu, .n-uc-Z9oZ1Bs55Oet, .n-uc-E4bRFuP31WE0 ) { order: 1; margin-bottom: 8px !important; } body.home #n2-ss-4 :is( .n-uc-s8gXuJDT3bMc, .n-uc-IusdqQUNPtzv, .n-uc-8ERamKHjHT7R, .n-uc-Sl0lScszObzQ, .n-uc-raos7yWiWoC1, .n-uc-uLyPYqOYyVKj, .n-uc-J4y47gBd757f, .n-uc-wZujXbTmhdDV, .n-uc-mReKYbyFPScs, .n-uc-JjLxJ9ftlZAT ) { order: 2; margin-bottom: 16px !important; } body.home #n2-ss-4 :is( .n-uc-xgWrW8MNhj7o, .n-uc-oBTJlfAL64eJ, .n-uc-FiLHo0HBuCOw, .n-uc-TQFTWNA9upYr, .n-uc-tMvZVJrLl4ET ) { order: 3; width: min(45cqw, 500px) !important; margin-bottom: 20px !important; } body.home #n2-ss-4 :is( .n-uc-buyq7aHxyHz1, .n-uc-z8NMazUgndm2, .n-uc-A3VuZ1CDLqxM, .n-uc-JdiDFiYyIXv1, .n-uc-ZXpFHBv3iyJZ, .n-uc-WKDCBa5fjW4w, .n-uc-idcLF2ExisAy, .n-uc-vl3SCoPugB9N, .n-uc-BHXFQP5z6r5V, .n-uc-Ndcku87qgGZ6 ) { order: 4; max-width: none !important; } body.home #n2-ss-4 :is( .n-uc-s8gXuJDT3bMc, .n-uc-IusdqQUNPtzv, .n-uc-8ERamKHjHT7R, .n-uc-Sl0lScszObzQ, .n-uc-raos7yWiWoC1, .n-uc-uLyPYqOYyVKj, .n-uc-J4y47gBd757f, .n-uc-wZujXbTmhdDV, .n-uc-mReKYbyFPScs, .n-uc-JjLxJ9ftlZAT ) .n2-ss-item-content { white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } @media (min-width: 768px) { body.home div#n2-ss-4 :is( .n-uc-s8gXuJDT3bMc, .n-uc-8ERamKHjHT7R, .n-uc-raos7yWiWoC1, .n-uc-J4y47gBd757f, .n-uc-mReKYbyFPScs ) .n2-ss-item-content { font-size: clamp(26px, 3.6cqw, 52px) !important; line-height: 1.12 !important; } } @media (min-width: 768px) and (max-width: 1199px) { body.home div#n2-ss-4 :is( .n-uc-jzHURSe9tQmA, .n-uc-yQzGn3wsGKPk, .n-uc-Z1iG4TUJ6eg0, .n-uc-3hAJhuHxEMe7, .n-uc-Z9oZ1Bs55Oet ) .n2-ss-item-content { font-size: 15px !important; line-height: 1.3 !important; } body.home div#n2-ss-4 :is( .n-uc-xgWrW8MNhj7o, .n-uc-oBTJlfAL64eJ, .n-uc-FiLHo0HBuCOw, .n-uc-TQFTWNA9upYr, .n-uc-tMvZVJrLl4ET ) .n2-ss-item-content { font-size: 14px !important; line-height: 1.5 !important; } } @media (max-width: 767px) { body.home #n2-ss-4 :is( .n2-ss-slide-19, .n2-ss-slide-20, .n2-ss-slide-21, .n2-ss-slide-22, .n2-ss-slide-23 ) .n2-ss-section-main-content { justify-content: flex-start !important; } body.home #n2-ss-4 :is( .n-uc-IusdqQUNPtzv, .n-uc-XdRI8zThhl3E, .n-uc-z8NMazUgndm2, .n-uc-Sl0lScszObzQ, .n-uc-tMddHA8qnbi1, .n-uc-JdiDFiYyIXv1, .n-uc-uLyPYqOYyVKj, .n-uc-pw1ztDNzPG5d, .n-uc-WKDCBa5fjW4w, .n-uc-wZujXbTmhdDV, .n-uc-YdyuctX5YIYu, .n-uc-vl3SCoPugB9N, .n-uc-JjLxJ9ftlZAT, .n-uc-E4bRFuP31WE0, .n-uc-Ndcku87qgGZ6 ) { max-width: 90cqw !important; } body.home #n2-ss-4 :is( .n-uc-XdRI8zThhl3E, .n-uc-tMddHA8qnbi1, .n-uc-pw1ztDNzPG5d, .n-uc-YdyuctX5YIYu, .n-uc-E4bRFuP31WE0 ) { margin-bottom: 4px !important; } body.home #n2-ss-4 :is( .n-uc-IusdqQUNPtzv, .n-uc-Sl0lScszObzQ, .n-uc-uLyPYqOYyVKj, .n-uc-wZujXbTmhdDV, .n-uc-JjLxJ9ftlZAT ) { margin-bottom: 12px !important; } body.home div#n2-ss-4 :is( .n-uc-IusdqQUNPtzv, .n-uc-Sl0lScszObzQ, .n-uc-uLyPYqOYyVKj, .n-uc-wZujXbTmhdDV, .n-uc-JjLxJ9ftlZAT ) .n2-ss-item-content { font-size: clamp(19px, 6cqw, 26px) !important; line-height: 1.2 !important; } } /* Osiem wskazanych zdjec na stronie glownej, bez zmiany pozostalych kart. */ body.home .elementor-6405 :is( .elementor-element-c8ef2b8, .elementor-element-e341da3, .elementor-element-3894c65, .elementor-element-d063c52, .elementor-element-b99926e, .elementor-element-598eb82 ) img { max-height: 192px !important; width: 100%; height: auto !important; object-fit: contain; } body.home .elementor-6405 .elementor-element-3899375 { max-width: 67.2px !important; } body.home .elementor-6405 .elementor-element-3899375 img { width: 100% !important; height: auto !important; object-fit: contain; } @media (min-width: 1400px) { body.home .elementor-6405 :is(.elementor-element-b5de7b7, .elementor-element-b3ca156) > .elementor-widget-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 38%) !important; } body.home .elementor-6405 :is(.elementor-element-3894c65, .elementor-element-598eb82) img { max-height: 276px !important; } body.home .elementor-6405 .elementor-element-3ba2b78 .elementor-element-b5de7b7 > .elementor-widget-wrap > .elementor-element.elementor-element-3899375 { max-width: 67.2px !important; } } @media (min-width: 768px) { body.home .elementor-6405 :is(.elementor-element-3ba2b78, .elementor-element-3c1cb2b) .elementor-widget-wrap > .elementor-element:is( .elementor-element-c8ef2b8, .elementor-element-e341da3, .elementor-element-d063c52, .elementor-element-b99926e ) { max-width: 312px !important; align-self: center; } } /* Secure Bag: tekst i CTA w naturalnej szerokosci po lewej, torba po prawej. Ponizej 1400px dotychczasowy pionowy uklad daje im potrzebne miejsce. */ @media (min-width: 1400px) { body.home .elementor-6405 .elementor-element-05a4188 > .elementor-widget-wrap { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 28px; } body.home .elementor-6405 .elementor-element-05a4188 > .elementor-widget-wrap > .elementor-element-74260a3 { grid-column: 1; grid-row: 1; width: max-content !important; max-width: 100% !important; } body.home .elementor-6405 .elementor-element-74260a3 :is( .aux-modern-heading-primary, .aux-modern-heading-secondary, .aux-modern-heading-description ) { width: max-content; max-width: 100%; } body.home .elementor-6405 .elementor-element-05a4188 > .elementor-widget-wrap > .elementor-element.elementor-element-b91c159 { grid-column: 2; grid-row: 1 / 3; justify-self: end; width: 528px !important; max-width: 100% !important; } body.home .elementor-6405 .elementor-element-05a4188 > .elementor-widget-wrap > .elementor-widget-aux_button { grid-column: 1; grid-row: 2; width: max-content !important; max-width: 100% !important; } } /* Wskazane teksty kart: skala z makiety 2164 px, mniejsza przy wezszych kartach. */ @media (min-width: 1400px) { body.home .elementor-6405 .elementor-element-4aff684 .aux-modern-heading-secondary { /* !important konieczne: ogolna regula kart (ok. l.467-470) ma !important i bez tego wygrywa. */ font-size: calc(min(78.0078px, 3.605vw) - 5px) !important; line-height: 1.1; } body.home .elementor-6405 .elementor-element-216679c .aux-modern-heading-secondary { font-size: min(52.0052px, 2.403vw) !important; line-height: 1.1 !important; white-space: nowrap; } body.home .elementor-6405 :is(.elementor-element-99a04a4, .elementor-element-dd9b347) .aux-modern-heading-description p { font-size: 48.0048px !important; line-height: 1.12 !important; } /* Tekst Containerplomben potrzebuje szerszej kolumny przy podwojonym foncie. */ body.home .elementor-6405 .elementor-element-b3ca156 > .elementor-widget-wrap { grid-template-columns: minmax(0, 69%) minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; align-content: center; position: relative; } body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-element-b3ca156 > .elementor-widget-wrap > .elementor-element-598eb82 { position: absolute !important; grid-column: auto !important; grid-row: auto !important; top: calc(50% + 3.5px) !important; right: 20px !important; transform: translateY(-50%) !important; width: 31% !important; max-width: 31% !important; margin: 0 !important; } body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-element-b3ca156 > .elementor-widget-wrap > .elementor-element-0fc12cc { grid-column: 1; grid-row: 2; margin-top: 8px !important; } body.home .elementor-6405 .elementor-element-3c1cb2b .elementor-element-b3ca156 > .elementor-widget-wrap > .elementor-element-36ed994 { grid-column: 1; grid-row: 3; align-self: start; margin-top: 16px !important; } } /* CTA slidera: regularny font i bialo-czerwony hover/focus. */ body.home div#n2-ss-4 .n2-ss-button-container a, body.home div#n2-ss-4 .n2-ss-button-container a div { font-weight: 400 !important; } body.home div#n2-ss-4 .n2-ss-button-container a:is(:hover, :focus-visible) { background: #fff !important; color: #bd0000 !important; } body.home div#n2-ss-4 .n2-ss-button-container a:is(:hover, :focus-visible) div { color: #bd0000 !important; } /* Tablet: obraz wypelnia kolumne zamiast 40% jej szerokosci. */ @media (min-width: 768px) and (max-width: 1024px) { body.home .elementor-6405 .elementor-element-a79bffa .elementor-element-96b2879 > .elementor-widget-wrap > .elementor-element.elementor-element-0a3b14f { width: 80% !important; max-width: 80% !important; } } /* Mobile: wspolna os i polowa poprzedniej wysokosci (536,4 -> 268,2px). */ @media (max-width: 767px) { body.home div#n2-ss-4 :is(.n2-ss-slide-19, .n2-ss-slide-20, .n2-ss-slide-21, .n2-ss-slide-22, .n2-ss-slide-23) .n2-ss-section-main-content { min-height: 248.2px !important; align-items: center !important; } body.home div#n2-ss-4 .n2-ss-section-main-content > .n2-ss-layer:not(:has(img)) { margin-inline: 0 !important; align-self: center !important; text-align: center !important; } body.home div#n2-ss-4 .n2-ss-section-main-content .n2-ss-item-content { text-align: center !important; } body.home div#n2-ss-4 :is(.n-uc-5OjhyyXXsx9w, .n-uc-E46T470EuLqr, .n-uc-nVWwnAavO0p6) { left: 50% !important; top: auto !important; bottom: 22px !important; transform: translateX(-50%) !important; width: min(22cqw, 80px) !important; height: auto !important; } } /* Wezszy mobile: 396 -> 198px, z zachowaniem 20px ramy slidera. */ @media (max-width: 519px) { body.home div#n2-ss-4 :is(.n2-ss-slide-19, .n2-ss-slide-20, .n2-ss-slide-21, .n2-ss-slide-22, .n2-ss-slide-23) .n2-ss-section-main-content { min-height: 178px !important; } } /* Ukryty mobilnie opis nie zostawia pustego marginesu przed CTA. */ @media (max-width: 767px) { body.home div#n2-ss-4 :is(.n-uc-xgWrW8MNhj7o, .n-uc-oBTJlfAL64eJ, .n-uc-FiLHo0HBuCOw, .n-uc-TQFTWNA9upYr, .n-uc-tMvZVJrLl4ET) { display: none !important; } } @media (max-width: 519px) { body.home div#n2-ss-4 :is(.n-uc-5OjhyyXXsx9w, .n-uc-E46T470EuLqr, .n-uc-nVWwnAavO0p6) { width: min(16cqw, 50px) !important; bottom: 16px !important; } } /* Widoczna i dostepna klawiatura nawigacja glownego slidera. */ body.home #n2-ss-4 .imsf-hero-arrow { position: static; visibility: visible; box-sizing: border-box; z-index: 15; display: grid; place-items: center; width: 36.96px; height: 36.96px; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 0; background: rgba(255, 255, 255, 0.92); color: #bd0000; cursor: pointer; } body.home #n2-ss-4 .n2-ss-control-bullet { display: flex !important; align-items: center; justify-content: center; gap: 11.2px; } body.home #n2-ss-4 .imsf-hero-arrow { flex: 0 0 36.96px; } body.home #n2-ss-4 .imsf-hero-arrow svg { display: block; width: 16.8px; height: 16.8px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } body.home #n2-ss-4 .imsf-hero-arrow:hover { background: #bd0000; color: #fff; } body.home #n2-ss-4 .imsf-hero-arrow:focus-visible, body.home #n2-ss-4 .nextend-bullet-bar .n2-bullet:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px #bd0000; } body.home #n2-ss-4 .nextend-bullet-bar > div { display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; } body.home #n2-ss-4 .nextend-bullet-bar .n2-bullet { box-sizing: border-box; width: 16px; height: 16px; margin: 8px; padding: 0; } /* auxin-child */ /* Theme Name: Immersafe Phlox Child Template: phlox Description: Motyw potomny Phlox dla immersafe.de/shop Version: 0.1.0 Text Domain: immersafe-phlox-child */ /* Fly Cart: przycisk Checkout jako zielone CTA (styl Fly Cart 02) */ .woofc-area.woofc-style-02 .woofc-area-bot .woofc-action .woofc-action-inner > div a.woofc-action-checkout { background-color: #007a08; border-color: #007a08; color: #fff; font-weight: 700; } .woofc-area.woofc-style-02 .woofc-area-bot .woofc-action .woofc-action-inner > div a.woofc-action-checkout:hover { background-color: #005f06; border-color: #005f06; color: #fff; } /* Nagłówek tablet i mobile (szablon ElementsKit #6222): logo w jednym rzędzie z koszykiem i hamburgerem, desktop bez zmian */ @media (max-width: 1024px) { .elementor-element-580f10b > .elementor-widget-wrap { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; justify-content: space-between; background-color: #f0f0f0; padding: 6px 12px; } .elementor-element-580f10b .elementor-element-91ee56c { order: 2; flex: 0 0 auto; width: auto; margin: 0; } .elementor-element-580f10b .elementor-element-91ee56c .elementor-container { padding: 0; } .elementor-element-580f10b .elementor-element-6afcabc > .elementor-element-populated { background-color: transparent; padding: 0; margin: 0; } .elementor-6222 .elementor-element.elementor-element-6880a63 { margin-top: 0; margin-bottom: 12px; } .elementor-element-580f10b .elementor-element-0754a86 { order: 1; flex: 1 1 auto; width: auto; max-width: none; margin: 0; } .elementor-element-580f10b .elementor-element-0754a86 img { width: auto; height: 48px; display: block; } } /* Menu mobilne ElementsKit: jeden prosty wjazd panelu z prawej (ease-in), tło zanika, bez pozostałych efektów */ @media (max-width: 1024px) { body .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements { left: auto; right: 0; transform: translateX(100%); visibility: hidden; transition: transform 0.3s ease-in, visibility 0s linear 0.3s; } body .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements.active { left: auto; transform: translateX(0); visibility: visible; transition: transform 0.3s ease-in, visibility 0s; } body .elementskit-menu-overlay { left: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } body .elementskit-menu-overlay.active { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; } body .elementskit-navbar-nav-default .elementskit-dropdown, body .elementskit-navbar-nav-default .elementskit-megamenu-panel, body .elementskit-navbar-nav-default .elementskit-navbar-nav > li > a, body .elementskit-navbar-nav-default .elementskit-submenu-panel > li > a, body button.elementskit-menu-close, body button.elementskit-menu-hamburger, .ekit-sticky .elementskit-menu-offcanvas-elements::before { transition: none; } } /* Tablet i mobile: koszyk (menu serch-header, pozycja Fly Cart) jako ikona obok hamburgera */ @media (max-width: 1024px) { .elementor-6222 { position: relative; } .elementor-6222 .elementor-element-d305abf, .elementor-6222 .elementor-element-d305abf .elementor-column, .elementor-6222 .elementor-element-39512de > .elementor-element-populated, .elementor-6222 .elementor-element-39512de > .elementor-widget-wrap { background: transparent !important; background-color: transparent !important; } .elementor-6222 .elementor-element-39512de { display: block !important; position: absolute; right: 64px; z-index: 5; width: auto !important; height: 60px; padding: 0; margin: 0; } .elementor-6222 .elementor-element-39512de > .elementor-widget-wrap { height: 100%; padding: 0; margin: 0; align-items: center; } .elementor-6222 .elementor-element-39512de .elementor-widget, .elementor-6222 .elementor-element-39512de .elementskit-navbar-nav > li > a, .elementor-6222 .elementor-element-2818879 .elementor-widget { margin: 0; } .elementor-element-580f10b > .elementor-widget-wrap { height: 60px; } .elementor-6222 .elementor-element-d908c3a .elementskit-menu-hamburger, .elementor-6222 .elementor-element-d908c3a .elementskit-menu-overlay, .elementor-6222 .elementor-element-d908c3a .elementskit-menu-close { display: none !important; } body .elementor-element-d908c3a .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements { position: static !important; display: block !important; width: auto; height: auto; padding: 0; overflow: visible; background: transparent; box-shadow: none; transform: none !important; visibility: visible !important; transition: none !important; } .elementor-6222 .elementskit-menu-hamburger { margin: 0; } .elementor-element-580f10b .elementor-element-0754a86, .elementor-element-580f10b .elementor-element-0754a86 .elementor-widget-container, .elementor-element-580f10b .elementor-element-0754a86 a { display: block; line-height: 0; } .elementor-element-d908c3a .elementskit-navbar-nav { display: block; margin: 0; padding: 0; } .elementor-6222 .elementor-element-d908c3a .elementskit-navbar-nav > li > a { padding: 0 8px; line-height: 1; } } @media (max-width: 767px) { .elementor-6222 .elementor-element-d305abf { position: absolute; top: 0; left: 0; right: 0; height: 0; margin: 0; padding: 0; } .elementor-6222 .elementor-element-d305abf > .elementor-container { position: static; } .elementor-6222 .elementor-element-39512de { top: 0; } .elementor-element-d908c3a .woofc-menu-item-inner-subtotal { display: none; } } /* Tablet: pasek kontaktowy zostaje (stała wysokość), koszyk i hamburger głównego menu w rzędzie z logo */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-6222 .elementor-element-d305abf { position: static; height: 56px; overflow: hidden; } .elementor-6222 .elementor-element-d305abf .elementor-widget-text-editor { font-size: 13px; line-height: 20px; } .elementor-6222 .elementor-element-d305abf > .elementor-container { position: static; } .elementor-6222 .elementor-element-39512de { top: 56px; } .elementor-6222 .elementor-element-23c5e2f, .elementor-6222 .elementor-element-23c5e2f > .elementor-widget-wrap { position: static; } .elementor-6222 .elementor-element-9827c62 { position: absolute; top: 0; right: 12px; z-index: 10001; width: 45px; height: 60px; margin: 0; padding: 0; } .elementor-6222 .elementor-element-9827c62 > .elementor-container { position: static; } .elementor-6222 .elementor-element-9827c62 > .elementor-container, .elementor-6222 .elementor-element-2818879, .elementor-6222 .elementor-element-2818879 > .elementor-widget-wrap { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; background: transparent; align-items: center; align-content: center; } } /* immersafe-fonts */ /* Montserrat (SIL OFL 1.1), hostowany lokalnie, zmienna waga 100-900. Zrodlo: Google Fonts (latin, latin-ext). */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url("https://immersafe.de/wp-content/themes/phlox-child/assets/fonts/montserrat-jtusjig1_i6t8kchkm459wlhyw.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url("https://immersafe.de/wp-content/themes/phlox-child/assets/fonts/montserrat-jtusjig1_i6t8kchkm459wdhyzbi.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Montserrat';font-style:italic;font-weight:100 900;font-display:swap;src:url("https://immersafe.de/wp-content/themes/phlox-child/assets/fonts/montserrat-jtuqjig1_i6t8kchkm459wxrys7m.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* immersafe-typography */ :root { --imsf-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; } body, body h1, body h2, body h3, body h4, body h5, body h6, body .elementor-heading-title, body button, body input, body select, body textarea, body :where(div, span, a, p, li, label, td, th, strong, em, h1, h2, h3, h4, h5, h6):not([class*='icon']):not([class*='fa-']):not(.fa):not(.fas):not(.far):not(.fab):not(.dashicons) { font-family: var(--imsf-font); } /* Smart Slider ustawia font selektorami z ID, stad !important tylko dla jego klas. */ body [class*='n2-font-'], body [class*='n2-style-'], body [class*='n2-style-'] :where(div, span, a, p):not([class*='icon']), body .n2-ss-slider :where(div, span, a, p, h1, h2, h3, h4):not([class*='icon']) { font-family: var(--imsf-font) !important; } /* Desktop: plywajacy koszyk (Woo Fly Cart) 200 px od gory przy prawej krawedzi (nie zaslania przycisku do gory), o 30% mniejszy (80 -> 56 px). */ @media (min-width: 783px) { #woofc-count.woofc-count, #woofc-count.woofc-count:hover { top: 200px !important; right: 40px !important; bottom: auto !important; left: auto !important; width: 56px !important; height: 56px !important; padding: 0 !important; line-height: 56px !important; } #woofc-count.woofc-count i { font-size: 17px; line-height: 56px; } #woofc-count.woofc-count .woofc-count-number { top: -17px; right: -17px; width: 35px; height: 35px; font-size: 11px; line-height: 35px; } } /* Mobile i tablet: plywajacy koszyk ukryty (koszyk jest w naglowku). */ @media (max-width: 1024px) { #woofc-count.woofc-count { display: none !important; } } /* Rozwijane menu ElementsKit w naglowku wystaje za prawa krawedz i daje poziomy scroll calej strony; clip (nie hidden) nie tworzy kontenera przewijania, wiec position: sticky dalej dziala. */ html, body { overflow-x: clip; } /* Tablet (hamburger): pasek informacji w jednej linii, "Versandkostenfrei" bez lamania slowa. */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-6222 .elementor-element-d305abf .elementor-container { flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px; } .elementor-6222 .elementor-element-d305abf .elementor-column { width: auto; flex: 0 1 auto; } .elementor-6222 .elementor-element-d305abf .elementor-widget-container, .elementor-6222 .elementor-element-d305abf p { font-size: 0.6875rem; white-space: nowrap; } .elementor-6222 .elementor-element-206f620 .elementor-column { width: auto; flex: 1 1 0; } .elementor-6222 .elementor-element-51317ee * { white-space: nowrap; word-break: normal; overflow-wrap: normal; hyphens: manual; } .elementor-6222 .elementor-element-51317ee img { max-width: 56px; height: auto; } .elementor-6222 .elementor-element-51317ee .elementor-widget-container, .elementor-6222 .elementor-element-51317ee p { font-size: 0.75rem; } } /* Mobile: logo w naglowku zajmuje wolne miejsce (hamburger i koszyk po prawej) niezaleznie od kolejnosci ladowania CSS Elementora. */ @media (max-width: 767px) { body .elementor-6222 .elementor-widget-wrap .elementor-element.elementor-element-0754a86 { max-width: 100%; width: auto; --container-widget-width: auto; --container-widget-flex-grow: 1; } } /* Mobile/tablet: rzad logo/koszyk/hamburger nie wciaga tresci pod naglowek (Elementor ma tam margines -22px). */ @media (max-width: 1024px) { body .elementor-6222 .elementor-element.elementor-element-6880a63 { margin-top: 0; margin-bottom: 0; } } /* Mobile: okruszki w jednej linii, przewijane poziomo. */ @media (max-width: 782px) { body .woocommerce-breadcrumb { white-space: nowrap; overflow-x: auto; overflow-y: hidden; overflow-wrap: normal; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body .woocommerce-breadcrumb::-webkit-scrollbar { display: none; } } /* Ikona koszyka w naglowku o 4 px wieksza (Fly Cart daje 14 px). */ body .elementor-6222 .woofc-menu-item .woofc-menu-item-inner i { font-size: 18px; } /* Desktop: megamenu i podmenu po najechaniu takze w trybie "click" ElementsKit (szablon 6222 na RC ma ekit-nav-dropdown-click, produkcja ekit-nav-dropdown-hover - zachowanie jak na produkcji). */ @media (min-width: 1025px) { .elementskit-navbar-nav-default.ekit-nav-dropdown-click .elementskit-megamenu-has:hover > .elementskit-megamenu-panel, .elementskit-navbar-nav-default.ekit-nav-dropdown-click .elementskit-dropdown-has:hover > .elementskit-submenu-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Pelna szerokosc ElementsKit to 100vw; ograniczenie panelu nie zmienia animacji hover/click. */ body .elementor-6222 .elementskit-navbar-nav-default .elementskit-navbar-nav > li.elementskit-megamenu-has > .elementskit-megamenu-panel { box-sizing: border-box; /* ElementsKit kotwiczy panel w lewej krawedzi okna (inline left:0) - centrujemy go marginesem */ width: min(1600px, 96vw) !important; max-width: 1600px; margin-left: calc((100vw - min(1600px, 96vw)) / 2) !important; } body .elementor-6222 .elementskit-megamenu-panel .elementor-section-wrap > .elementor-section > .elementor-container { max-width: 100%; } } /* Gorny pasek: "Anmelden" i koszyk zawsze obok siebie, takze <=1024 px (ElementsKit zmienia tam menu na pionowy blok, * a kolumna zwezala sie do szerokosci jednego wyrazu). */ body .elementor-6222 ul#menu-serch-header { display: flex !important; flex-flow: row nowrap !important; align-items: center; justify-content: flex-end; gap: 0.5rem; width: auto !important; } body .elementor-6222 ul#menu-serch-header > li { display: flex; flex: 0 0 auto; align-items: center; width: auto !important; } /* Menu konta w gornym pasku: awatar + "Kundenbereich", rozwijana lista (otwarcie: hover, focus, klik/dotyk). */ body .elementor-6222 li.imsf-header-login { position: relative; display: flex !important; align-items: center; align-self: center; height: auto; } body .elementor-6222 .imsf-account-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.25rem 0.5rem; border: 0; background: transparent; line-height: 1.2; color: inherit; font: inherit; font-size: 15.52px; font-weight: 400; cursor: pointer; } body .elementor-6222 .imsf-account-menu { position: absolute; top: 100%; right: 0; z-index: 999; display: none; min-width: 14rem; margin: 0; padding: 0.4rem 0; list-style: none; background: #fff; border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); } body .elementor-6222 li.imsf-header-login:hover > .imsf-account-menu, body .elementor-6222 li.imsf-header-login:focus-within > .imsf-account-menu, body .elementor-6222 li.imsf-header-login.is-open > .imsf-account-menu { display: block; } body .elementor-6222 .imsf-account-menu li { display: block; width: auto; } body .elementor-6222 .imsf-account-menu a { display: block; padding: 0.5rem 1rem; color: #222; font-size: 15.52px; white-space: nowrap; } body .elementor-6222 .imsf-account-menu a:hover, body .elementor-6222 .imsf-account-menu a:focus { background: rgba(0, 0, 0, 0.05); } /* Lista menu konta ma wchodzic na menu glowne pod paskiem: ElementsKit daje obu kontenerom nav z-index 1000, * wiec nizszy w DOM (menu glowne) przykrywalby liste. */ body .elementor-6222 nav.elementskit-menu-container:has(.imsf-header-login:hover, .imsf-header-login:focus-within, .imsf-header-login.is-open) { z-index: 1100; } /* Licznik koszyka: zaokraglony prostokat rosnacy wraz z liczba cyfr (wtyczka daje stale kolko 16 px). */ body .woofc-menu-item .woofc-menu-item-inner:after, body .woofc-cart-link .woofc-cart-link-inner:after { box-sizing: border-box; width: auto; min-width: 16px; padding: 0 5px; white-space: nowrap; } /* Gorny pasek: jeden rozmiar, kroj i grubosc (13 px desktop, 12 px mobile) dla tekstow, kontaktu, konta, wylogowania i sumy koszyka. */ body .elementor-6222 :is(.elementor-element-01b8137, .elementor-element-6d306f4, .elementor-element-c0c75f3) p, body .elementor-6222 :is(.elementor-element-01b8137, .elementor-element-6d306f4, .elementor-element-c0c75f3) a, body .elementor-6222 .imsf-account-toggle, body .elementor-6222 .imsf-account-menu a, body .elementor-6222 .woofc-menu-item .woofc-menu-item-inner-subtotal, body .elementor-6222 .woofc-menu-item .woofc-menu-item-inner-subtotal * { font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4; } @media (max-width: 782px) { body .elementor-6222 :is(.elementor-element-01b8137, .elementor-element-6d306f4, .elementor-element-c0c75f3) p, body .elementor-6222 :is(.elementor-element-01b8137, .elementor-element-6d306f4, .elementor-element-c0c75f3) a, body .elementor-6222 .imsf-account-toggle, body .elementor-6222 .imsf-account-menu a, body .elementor-6222 .woofc-menu-item .woofc-menu-item-inner-subtotal, body .elementor-6222 .woofc-menu-item .woofc-menu-item-inner-subtotal * { font-size: 12px !important; } } /* Menu konta na telefonie: przycisk stoi przy lewej krawedzi ekranu, a lista byla kotwiczona do prawej (right: 0) * i wychodzila poza ekran. Na waskich ekranach kotwiczymy ja do lewej i ograniczamy szerokosc do okna. */ @media (max-width: 782px) { body .elementor-6222 .imsf-account-menu { right: auto; left: 0; min-width: 12rem; max-width: calc(100vw - 1rem); } } /* ElementsKit na tablecie i telefonie daje liscie menu overflow: auto i wysokosc paska (40 px) - to ucinalo * rozwijane menu konta do cienkiego paska. Przy liscie konta overflow zostaje widoczny. */ @media (max-width: 1024px) { body .elementor-6222 ul.elementskit-navbar-nav:has(.imsf-header-login) { overflow: visible !important; } } /* immersafe-child-site-scale */ /* * Globalna skala typografii sklepu. * Karta produktu jest celowo pomijana; jej skala pozostaje w assets/css/card.css. */ /* Elementor headings: wyzsza specyficznosc od reguł widgetow, bez !important. */ body:not(.single-product) .elementor .elementor-widget-heading .elementor-heading-title:is(h1) { font-size: clamp(2rem, calc(1rem + 5vw), 5.25rem); } body:not(.single-product) .elementor .elementor-widget-heading .elementor-heading-title:is(h2) { font-size: clamp(1.5rem, calc(1.125rem + 1.5vw), 2.25rem); } body:not(.single-product) .elementor .elementor-widget-heading .elementor-heading-title:is(h3) { font-size: clamp(1.25rem, calc(1rem + 0.83vw), 1.75rem); } body:not(.single-product) .elementor .elementor-widget-heading .elementor-heading-title:is(h4) { font-size: clamp(1.125rem, calc(0.875rem + 0.7vw), 1.5625rem); } body:not(.single-product) .elementor .elementor-widget-heading .elementor-heading-title:is(h5) { font-size: clamp(1.0625rem, calc(0.875rem + 0.625vw), 1.4375rem); } body:not(.single-product) .elementor .elementor-widget-heading .elementor-heading-title:is(h6) { font-size: clamp(1rem, calc(0.75rem + 0.5vw), 1.25rem); } /* Zwykly tekst i stopka. Skala mobilna ma podloge 12 px. */ body:not(.single-product) .elementor .elementor-widget-text-editor .elementor-widget-container p { font-size: clamp(0.75rem, calc(0.6875rem + 0.45vw), 0.875rem); } body:not(.single-product) .elementor .elementor-widget-image-box .elementor-image-box-title { font-size: clamp(1.125rem, calc(1rem + 0.625vw), 1.4375rem); } body:not(.single-product) .elementor .elementor-widget-image-box .elementor-image-box-description, body:not(.single-product) .elementor .elementor-icon-list .elementor-icon-list-text { font-size: 0.75rem; } body:not(.single-product) .elementor .elementor-widget-text-editor .elementor-widget-container p a:not(.elementor-button):not([class*='icon']), body:not(.single-product) .elementor .elementor-widget-image-box .elementor-image-box-content a:not([class*='icon']) { font-size: 0.75rem; } body:not(.single-product) .elementor .elementor-button .elementor-button-text { font-size: 0.8125rem; } body:not(.single-product) .ekit-menu-nav-link, body:not(.single-product) .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a, body:not(.single-product) .elementskit-menu-offcanvas-elements .elementskit-submenu-panel > li > a { font-size: 0.875rem; } body:not(.single-product) .aux-text, body:not(.single-product) .elementor-location-footer .elementor-widget-text-editor p, body:not(.single-product) .aux-site-footer .aux-text { font-size: 0.875rem; } /* Smart Slider: tylko zmierzone klasy, bez ujednolicania wszystkich n2-font-*. * Rozmiary są skalowane przez sam slider na mniejszych ekranach. */ body:not(.single-product) .n2-ss-slider [class*='n2-font-eef96c07'] { font-size: 40px !important; } body:not(.single-product) .n2-ss-slider [class*='n2-font-a4c1f0e0'] { font-size: 17px !important; } body:not(.single-product) .n2-ss-slider [class*='n2-font-12dc4408'] { font-size: 16px !important; } body:not(.single-product) .n2-ss-slider [class*='n2-font-974567c3'] { font-size: 18px !important; } body:not(.single-product) .n2-ss-slider [class*='n2-font-ea20af39'], body:not(.single-product) .n2-ss-slider [class*='n2-font-4d5ca79c'] { font-size: 13px !important; } body:not(.single-product) .n2-ss-slider .n2-ss-slide--focus { font-size: 14px !important; } body:not(.single-product) .n2-ss-slider .n2-ss-slide--focus div:not([class]) { font-size: 13px !important; } /* Stopka: mniejsze wartości tylko dla wskazanych elementów stopki. */ body:not(.single-product) .elementor-location-footer h4, body:not(.single-product) .aux-site-footer h4 { font-size: 15px; } body:not(.single-product) .elementor-location-footer h2.aux-modern-heading-primary, body:not(.single-product) .aux-site-footer h2.aux-modern-heading-primary { font-size: 15px; } body:not(.single-product) .elementor-location-footer .aux-icon-list-text, body:not(.single-product) .aux-site-footer .aux-icon-list-text, body:not(.single-product) .elementor-location-footer :is(small, .small), body:not(.single-product) .aux-site-footer :is(small, .small) { font-size: 14px; } /* Lista produktow oraz ceny poza karta. */ body:not(.single-product) .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.9375rem; } body:not(.single-product).immersafe-list ul.products li.product .woocommerce-loop-product__title { font-size: 0.875rem; } body:not(.single-product) .woocommerce ul.products li.product .price, body:not(.single-product) .woocommerce ul.products li.product .imsf-b2b-loop-price, body:not(.single-product) .imsf-b2b-loop-price { font-size: 1rem; } body:not(.single-product).immersafe-list ul.products li.product .price { font-size: 0.875rem; } body:not(.single-product).immersafe-list .imsf-loop-excerpt { font-size: 0.75rem; } /* Koszyk i checkout. Kwoty zostaja nieco wieksze od tekstu opisowego. */ body:not(.single-product).woocommerce-cart .woocommerce table.shop_table th, body:not(.single-product).woocommerce-cart .woocommerce table.shop_table td:not(.product-remove), body:not(.single-product).woocommerce-cart .cart_totals .shop_table th, body:not(.single-product).woocommerce-cart .cart_totals .shop_table td:not(.product-remove), body:not(.single-product).woocommerce-checkout #order_review table.shop_table th, body:not(.single-product).woocommerce-checkout #order_review table.shop_table td:not(.product-remove) { font-size: 0.875rem; } body:not(.single-product).woocommerce-cart .woocommerce-Price-amount, body:not(.single-product).woocommerce-checkout #order_review .woocommerce-Price-amount { font-size: 1rem; } body:not(.single-product).woocommerce-cart .cart_totals h2, body:not(.single-product).woocommerce-checkout .woocommerce-billing-fields h3, body:not(.single-product).woocommerce-checkout .woocommerce-additional-fields h3, body:not(.single-product).woocommerce-checkout #order_review_heading { font-size: 1.0625rem; } body:not(.single-product).woocommerce-cart .coupon :is(input, button), body:not(.single-product).woocommerce-checkout .form-row :is(label, input, select, textarea), body:not(.single-product).woocommerce-checkout #place_order { font-size: 0.8125rem; } /* Mini-koszyk oraz wysuwany Fly Cart. */ body:not(.single-product) :is(.widget_shopping_cart_content, .woofc-area) .woocommerce-mini-cart-item > a:not(.remove), body:not(.single-product) .woofc-area :is(.woofc-product-title, .woofc-item-title) { font-size: 0.875rem; } body:not(.single-product) :is(.widget_shopping_cart_content, .woofc-area) :is(.woocommerce-mini-cart__total, .woofc-total, .woofc-subtotal) { font-size: 0.875rem; } body:not(.single-product) :is(.widget_shopping_cart_content, .woofc-area) .woocommerce-Price-amount, body:not(.single-product) .woofc-area :is(.woofc-product-price, .woofc-item-price) { font-size: 1rem; } body:not(.single-product) :is(.widget_shopping_cart_content, .woofc-area) :is(.button, button) { font-size: 0.8125rem; } /* Elementy o jednej wartosci docelowej. !important, bo Elementor/ElementsKit ustawiaja rozmiary selektorami z ID. */ body:not(.single-product) .ekit-menu-nav-link, body:not(.single-product) .elementskit-tab-title, body:not(.single-product) .aux-text, body:not(.single-product) .col-title, body:not(.single-product) h6.aux-modern-heading-primary { font-size: 0.875rem !important; } body:not(.single-product) .woocommerce-loop-product__title { font-size: 0.9375rem !important; } body:not(.single-product) li.product .woocommerce-Price-amount, body:not(.single-product) li.product .woocommerce-Price-currencySymbol { font-size: 1.125rem !important; } body:not(.single-product) .imsf-b2b-loop-price { font-size: 0.875rem !important; } body:not(.single-product) footer h4, body:not(.single-product) footer .widgettitle { font-size: 0.9375rem !important; } body:not(.single-product) footer :is(.aux-icon-list-text, small) { font-size: 0.875rem !important; } body:not(.single-product) :is(a, .elementor-icon-list-text) { min-height: 0; } body:not(.single-product) .elementor-widget-container a:not([class*='button']) { font-size: max(0.75rem, 1em); } body:not(.single-product) .elementor-icon-list-text { font-size: max(0.75rem, 1em) !important; } /* Nagłówki stron (kategorie, strony treści): 35 -> 29 px, tytuły sekcji Elementora zostają. */ body:not(.single-product) :is(.page-title, .entry-title, .woocommerce-products-header__title, h1.elementor-heading-title) { font-size: 1.8125rem; } body:not(.single-product) :is(.entry-content, .elementor-widget-container, .term-description) :is(strong, b, p, li, h1, h2, h3) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } /* Gorny pasek (wszystkie strony): cala kolumna z notka "Preisangabe exkl. MwSt." - kolumna Elementora ca2d4f4 w poscie 6222. */ .elementor-6222 .elementor-element-ca2d4f4 { display: none; } /* Po ukryciu kolumny z notka VAT koszyk (ostatnia kolumna paska) wraca do prawej krawedzi. */ .elementor-6222 .elementor-container:has(> .elementor-element-ca2d4f4) > .elementor-column:last-child { margin-left: auto; } /* Okruszki: maks. 12 px (0,75 rem) na wszystkich stronach, takze linki. */ body .woocommerce-breadcrumb, body .woocommerce-breadcrumb a { font-size: 0.75rem; } /* Mobile: naglowek (logo, koszyk, menu) zawsze przyklejony do gory ekranu. */ @media (max-width: 782px) { .ekit-template-content-markup:has(> .elementor-6222) { position: sticky; top: 0; z-index: 9500; } /* overflow-x: hidden z motywu robi z body kontener przewijania i psuje sticky; clip tego nie robi. */ body { overflow-x: clip !important; overflow-y: visible !important; } } @media (max-width: 782px) { .elementor-6222 .elementor-element-6880a63 > .elementor-container { padding-left: 0; padding-right: 0; } } /* immersafe-child-nav-mobile */ /* * Zakladamy strukture ElementsKit: oba panele sa bezposrednimi dziecmi li, * a otwarty panel listy dostaje klase elementskit-dropdown-open. * CSS wtyczki nie jest w repo; !important przelamuje jej reguly mobilne. */ .imsf-menu-close { display: none; } /* Po ukryciu notki VAT obie kolumny tekstowe wykorzystują miejsce przed koszykiem. */ @media (min-width: 1025px) { .elementor-6222 .elementor-element-d305abf > .elementor-container > :is(.elementor-element-6a0d70d, .elementor-element-33a7972) { flex: 1 1 0 !important; width: auto !important; min-width: 0; } /* Tylko glowne pozycje gornego menu; submenu zachowuje wlasna typografie. */ .elementor-6222 .elementskit-navbar-nav > .menu-item > a.ekit-menu-nav-link { font-size: 13px !important; } } /* Węższy desktop: logo i oznaczenia w górnym rzędzie, menu pod nimi na szerokość kontenera. */ @media (min-width: 1025px) and (max-width: 1500px) { .elementor-6222 .elementor-element-6880a63 > .elementor-container { position: relative; display: block; } .elementor-6222 .elementor-element-580f10b { position: absolute; top: 4px; left: 0; z-index: 1; width: 120px; max-width: 120px; } .elementor-6222 .elementor-element-0754a86 img { width: auto; height: 104px; max-width: 100%; } .elementor-6222 .elementor-element-23c5e2f { width: 100% !important; max-width: 100% !important; } .elementor-6222 .elementor-element-206f620 { display: flex; align-items: center; box-sizing: border-box; min-height: 112px; padding-left: 120px; } .elementor-6222 .elementor-element-206f620 > .elementor-container { width: 100%; } /* 6 pozycji menu (z paddingiem 15px/15px) bylo o ok. 18-100px za szerokie na pelna szerokosc kontenera w tym zakresie - "LDPE Taschen" zawijalo sie do drugiego wiersza. */ .elementor-6222 .elementskit-navbar-nav > .menu-item > a.ekit-menu-nav-link { padding-left: 10px !important; padding-right: 10px !important; } } /* Przy dolnej granicy desktopu ikona dostawy przechodzi nad pełną etykietę. Zakres rozszerzony z 1150px do 1245px - do 1150px kolumna ikona+tekst byla zbyt waska i "Versandkostenfrei" lamalo sie w srodku slowa (Versandkoste/nfrei) w przedziale 1151-1245px, gdzie reguła jeszcze nie dzialala. */ @media (min-width: 1025px) and (max-width: 1245px) { .elementor-6222 .elementor-element-51317ee .aux-widget-advanced-text { display: flex; flex-direction: column; align-items: center; } .elementor-6222 .elementor-element-51317ee .aux-text-widget-header { padding: 0; } .elementor-6222 .elementor-element-51317ee .aux-ico-box img { width: 40px; height: auto; } .elementor-6222 .elementor-element-51317ee .aux-text-widget-content { width: 100%; text-align: center; } .elementor-6222 .elementor-element-51317ee .col-title { /* site-scale.css ma globalne .col-title{font-size:0.875rem !important} (14px) - trzeba przebic. */ font-size: 12px !important; white-space: nowrap; word-break: normal; } } /* Odstep tresci (breadcrumb itp.) od gornego menu: Phlox daje 4.375em (70px) stale, na mobile za duzo pustej przestrzeni pod naglowkiem - zmniejszone do 20px. Boczny odstep tresci daje .aux-container nizej, tu tylko gora. */ @media (max-width: 767px) { .aux-content-top-margin .aux-primary { padding-top: 20px; } } /* Boczny margines tresci na kazdej podstronie (kategorie, produkt, koszyk, kasa, zwykle strony): .aux-container z phlox-main-lean.css daje stale 35px niezaleznie od szerokosci ekranu - jeden wspolny margines 16px na mobile zamiast osobnych regul per typ strony. Wymaga !important - bez niego regula .aux-fold (bez !important, nizsza specyficznosc) mimo to wygrywa kaskade z niewyjasnionej przyczyny (ten sam przypadek co pasek zaufania w stopce). */ @media (max-width: 782px) { .aux-container.aux-fold { padding-left: 16px !important; padding-right: 16px !important; } } @media (max-width: 1024px) { .ekit_menu_responsive_tablet li.elementskit-megamenu-has > .elementskit-megamenu-panel { display: none !important; } .ekit_menu_responsive_tablet li.elementskit-megamenu-has > ul.elementskit-submenu-panel.elementskit-dropdown-open, .ekit_menu_responsive_tablet li.elementskit-megamenu-has ul.elementskit-submenu-panel li.menu-item-has-children > ul.elementskit-submenu-panel.elementskit-dropdown-open { display: block !important; position: static !important; width: 100% !important; max-width: 100% !important; max-height: none !important; height: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; padding-left: 16px !important; box-sizing: border-box; margin-right: 0 !important; margin-left: 0 !important; overflow: visible !important; } .ekit_menu_responsive_tablet li.elementskit-megamenu-has > ul.elementskit-submenu-panel li { width: 100%; max-width: 100%; box-sizing: border-box; } .ekit_menu_responsive_tablet li.elementskit-megamenu-has > ul.elementskit-submenu-panel li > a { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px !important; box-sizing: border-box; white-space: normal; min-width: 0; overflow-wrap: anywhere; } .ekit_menu_responsive_tablet nav.elementskit-menu-container.elementskit-menu-offcanvas-elements > ul.elementskit-navbar-nav > li.menu-item-has-children > a.ekit-menu-nav-link { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; } /* Strzalka zachowuje obszar dotyku, bez ramki nadanej przez ElementsKit. */ .ekit_menu_responsive_tablet nav.elementskit-menu-container.elementskit-menu-offcanvas-elements > ul.elementskit-navbar-nav > li.menu-item-has-children > a > .elementskit-submenu-indicator, .ekit_menu_responsive_tablet nav.elementskit-menu-container.elementskit-menu-offcanvas-elements > ul.elementskit-navbar-nav > li > ul.elementskit-submenu-panel > li.menu-item-has-children > a > .elementskit-submenu-indicator { position: static !important; display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; line-height: 1 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: inherit !important; font-size: 18px !important; transition: transform 0.2s ease; } .ekit_menu_responsive_tablet nav.elementskit-menu-container.elementskit-menu-offcanvas-elements > ul.elementskit-navbar-nav > li.menu-item-has-children > a > .elementskit-submenu-indicator::before, .ekit_menu_responsive_tablet nav.elementskit-menu-container.elementskit-menu-offcanvas-elements > ul.elementskit-navbar-nav > li > ul.elementskit-submenu-panel > li.menu-item-has-children > a > .elementskit-submenu-indicator::before { content: '\e994' !important; font-family: elementskit !important; font-size: 18px !important; line-height: 1 !important; color: inherit !important; } /* Otwarty panel jest jedynym potwierdzonym stanem ElementsKit. */ .ekit_menu_responsive_tablet nav.elementskit-menu-container.elementskit-menu-offcanvas-elements > ul.elementskit-navbar-nav > li.menu-item-has-children:has(> ul.elementskit-submenu-panel.elementskit-dropdown-open) > a > .elementskit-submenu-indicator, .ekit_menu_responsive_tablet nav.elementskit-menu-container.elementskit-menu-offcanvas-elements > ul.elementskit-navbar-nav > li > ul.elementskit-submenu-panel > li.menu-item-has-children:has(> ul.elementskit-submenu-panel.elementskit-dropdown-open) > a > .elementskit-submenu-indicator { transform: rotate(180deg); } .ekit_menu_responsive_tablet nav.elementskit-menu-container.elementskit-menu-offcanvas-elements .imsf-menu-all > a { display: flex !important; align-items: center; gap: 8px; min-height: 44px !important; padding: 0 12px !important; box-sizing: border-box; font-weight: 600; } .ekit_menu_responsive_tablet nav.elementskit-menu-container.elementskit-menu-offcanvas-elements .imsf-menu-all > a::after { content: '\2192'; flex: 0 0 auto; margin-left: auto; } /* Nav jest position:fixed, wiec absolute = prawy gorny rog panelu; lista dostaje miejsce pod przyciskiem. */ .ekit_menu_responsive_tablet nav.elementskit-menu-container.elementskit-menu-offcanvas-elements.active > .imsf-menu-close { position: absolute; top: 8px; right: 8px; z-index: 10; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 1px solid #d8d8d8; border-radius: 4px; background: #fff; color: #222; cursor: pointer; } .ekit_menu_responsive_tablet nav.elementskit-menu-container.elementskit-menu-offcanvas-elements.active > ul.elementskit-navbar-nav { padding-top: 56px !important; } .ekit_menu_responsive_tablet .imsf-menu-close svg { display: block; width: 24px; height: 24px; } } /* Mobilny pasek oznaczen nad stopka: szesc rownych kafli w jednym przewijanym rzedzie. */ .imsf-trust-controls { display: none; } @media (max-width: 767px) { .elementor-2989 .elementor-element-7bea5ab { overflow: hidden; } .elementor-2989 .elementor-element-7bea5ab > .elementor-container { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; gap: 12px; box-sizing: border-box; width: 100%; max-width: 100%; padding: 12px 16px 4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .elementor-2989 .elementor-element-7bea5ab > .elementor-container::-webkit-scrollbar { display: none; } .elementor-2989 .elementor-element-7bea5ab > .elementor-container > .elementor-column, .elementor-2989 .elementor-element-7bea5ab > .elementor-container > .elementor-column > .elementor-widget-wrap { display: contents !important; } .elementor-2989 .elementor-element-7bea5ab .elementor-widget { display: flex !important; flex: 0 0 clamp(148px, 30vw, 180px) !important; align-items: center; justify-content: center; box-sizing: border-box; width: clamp(148px, 30vw, 180px) !important; min-height: 108px; margin: 0 !important; scroll-snap-align: start; } .elementor-2989 .elementor-element-7bea5ab .elementor-widget-container { width: 100%; text-align: center; } .elementor-2989 .elementor-element-7bea5ab .elementor-widget-image img { display: block; width: auto; height: auto; max-width: min(100%, 140px); max-height: 64px; margin: auto; object-fit: contain; } .elementor-2989 .elementor-element-7bea5ab .elementor-element-946852e img { max-width: 76px; max-height: 76px; } .elementor-2989 .elementor-element-7bea5ab .aux-widget-advanced-text { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .elementor-2989 .elementor-element-7bea5ab .aux-text-widget-header { padding: 0; } .elementor-2989 .elementor-element-7bea5ab .aux-ico-box img { width: auto; height: auto; max-width: 56px; max-height: 36px; } .elementor-2989 .elementor-element-7bea5ab .col-title { font-size: 13px; white-space: nowrap; word-break: normal; } .elementor-2989 .elementor-element-7bea5ab .col-subtitle { font-size: 12px; } .elementor-2989 .elementor-element-7bea5ab .imsf-trust-controls { display: flex; justify-content: center; gap: 12px; margin: 4px 0 16px; } .elementor-2989 .elementor-element-7bea5ab .imsf-trust-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #b9bfc4; border-radius: 50%; background: #fff; color: #20252a; cursor: pointer; } .elementor-2989 .elementor-element-7bea5ab .imsf-trust-controls button::before { content: ''; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; } .elementor-2989 .elementor-element-7bea5ab .imsf-trust-prev::before { transform: rotate(-135deg); } .elementor-2989 .elementor-element-7bea5ab .imsf-trust-next::before { transform: rotate(45deg); } .elementor-2989 .elementor-element-7bea5ab .imsf-trust-controls button:disabled { opacity: 0.4; cursor: default; } .elementor-2989 .elementor-element-7bea5ab .imsf-trust-controls button:focus-visible { outline: 2px solid #20252a; outline-offset: 3px; } } /* Pasek zaufania w stopce (Klarna/Mollie/ISO + "Grosser Lagerbestand" itp., sekcja 5cf7b45) - widget globalny (kazda strona, nie tylko home), stad regulka tutaj a nie w home.css. Jak na oryginale (immersafe.de/shop/): 9 kolumn w jednym rzedzie (flex-wrap:nowrap), kazda po 1/9 szerokosci, ikony/logo pomniejszone i tekst 12px - dzieki temu niemieckie zlozone slowa ("Lagerbestand", "Engineering", "Versandkostenfrei") miesza sie w 1-2 linie bez lamania litera po literze. Wczesniejsza siatka 3x3 wygladala zle (za duze ikony, nierowne odstepy) - wracamy do ukladu oryginalu. Mobile (<768px) ma juz natywnie elementor-hidden-mobile - bez zmian. */ @media (min-width: 768px) { .elementor-element-5cf7b45 > .elementor-container { flex-wrap: nowrap !important; } .elementor-element-5cf7b45 > .elementor-container > .elementor-column { /* flex-basis:0 (nie %) - procentowy flex-basis na obu zagniezdzonych poziomach flex (kolumna + widget-wrap w srodku) dawal Chromium min-content zamiast 1/9 szerokosci. */ width: auto !important; max-width: none !important; flex: 1 1 0 !important; min-width: 0 !important; } .elementor-element-5cf7b45 .elementor-column .elementor-widget-container { overflow-wrap: normal !important; } /* Wspolne proporcje: kazde logo/ikona w boksie o stalej wysokosci (--imsf-tb-h), skalowane do niej (max-height) z zachowaniem proporcji i wysrodkowane - wczesniej wszystkie mialy width:100px, wiec kwadratowe ikony 400x400 byly 100px wysokie, a szerokie loga (Klarna 454x111) tylko 24px i "wisialy" u gory kolumny. Teksty pod ikonami zaczynaja sie na tej samej linii, bo boks ma zawsze ta sama wysokosc. */ .elementor-element-5cf7b45 { --imsf-tb-h: 44px; /* jak na produkcji: ikony 44px, loga max 74px szerokosci, badge 70px */ } .elementor-element-5cf7b45 .elementor-widget-aux_image .elementor-widget-container, .elementor-element-5cf7b45 .elementor-widget-aux_image .aux-widget-image, .elementor-element-5cf7b45 .elementor-widget-aux_image .aux-media-hint-frame, .elementor-element-5cf7b45 .elementor-widget-aux_image .aux-media-image { display: flex !important; align-items: center !important; justify-content: center !important; height: var(--imsf-tb-h) !important; margin: 0 !important; padding: 0 !important; } .elementor-element-5cf7b45 .elementor-widget-aux_image img { display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: var(--imsf-tb-h) !important; object-fit: contain !important; margin: 0 auto !important; } /* Loga (Klarna, mollie, ISO): max 74px szerokosci jak na produkcji; badge "100% sicheres" 70px. */ .elementor-element-5cf7b45 .elementor-element-032281b img, .elementor-element-5cf7b45 .elementor-element-0fac473 img, .elementor-element-5cf7b45 .elementor-element-bbb97d8 img { max-width: 74px !important; } .elementor-element-5cf7b45 .elementor-element-3459894 .aux-media-image, .elementor-element-5cf7b45 .elementor-element-3459894 img { height: 70px !important; max-height: 70px !important; } .elementor-element-5cf7b45 .elementor-widget-aux_image { margin-bottom: 16px !important; } .elementor-element-5cf7b45 .elementor-widget-text-editor .elementor-widget-container { margin: 0 !important; padding: 0 !important; } /* Kolumny wysrodkowane w pionie w sekcji ok. 214px (jak produkcja), bez marginesow Elementora. */ .elementor-element-5cf7b45 { min-height: 214px !important; } .elementor-element-5cf7b45 > .elementor-container { align-items: center !important; min-height: 214px !important; } .elementor-element-5cf7b45 > .elementor-container > .elementor-column > .elementor-widget-wrap { justify-content: center !important; align-content: center !important; padding: 0 !important; } .elementor-element-5cf7b45 .elementor-widget-wrap { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; } .elementor-element-5cf7b45 .elementor-widget-wrap > .elementor-element { width: 100% !important; min-width: 0 !important; } .elementor-element-5cf7b45 .elementor-widget-text-editor p { font-size: 12px !important; line-height: 1.3 !important; overflow-wrap: normal !important; word-break: normal !important; } } @media (min-width: 1025px) and (max-width: 1199px) { .elementor-element-5cf7b45 { --imsf-tb-h: 40px; } .elementor-element-5cf7b45 .elementor-element-3459894 .aux-media-image, .elementor-element-5cf7b45 .elementor-element-3459894 img { height: 60px !important; max-height: 60px !important; } } /* 768-1099px: dziewiec kolumn przewija sie poziomo; od 1100px nazwy mieszcza sie w calosci. */ @media (min-width: 768px) and (max-width: 1099px) { .elementor-element-5cf7b45 { --imsf-tb-h: 40px; } .elementor-element-5cf7b45 > .elementor-container { justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 16px !important; gap: 8px; } .elementor-element-5cf7b45 > .elementor-container::-webkit-scrollbar { display: none; } .elementor-element-5cf7b45 > .elementor-container > .elementor-column { flex: 0 0 150px !important; width: 150px !important; scroll-snap-align: center; } .elementor-element-5cf7b45 .elementor-element-032281b img, .elementor-element-5cf7b45 .elementor-element-0fac473 img, .elementor-element-5cf7b45 .elementor-element-bbb97d8 img { max-width: 74px !important; } .elementor-element-5cf7b45 .elementor-element-3459894 .aux-media-image, .elementor-element-5cf7b45 .elementor-element-3459894 img { height: 60px !important; max-height: 60px !important; } .elementor-element-5cf7b45 .imsf-trust-controls { display: flex; justify-content: center; gap: 12px; margin: 0 0 16px; } .elementor-element-5cf7b45 .imsf-trust-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #b9bfc4; border-radius: 50%; background: #fff; color: #20252a; cursor: pointer; } .elementor-element-5cf7b45 .imsf-trust-controls button::before { content: ''; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; } .elementor-element-5cf7b45 .imsf-trust-prev::before { transform: rotate(-135deg); } .elementor-element-5cf7b45 .imsf-trust-next::before { transform: rotate(45deg); } .elementor-element-5cf7b45 .imsf-trust-controls button:disabled { opacity: 0.4; cursor: default; } .elementor-element-5cf7b45 .imsf-trust-controls button:focus-visible { outline: 2px solid #20252a; outline-offset: 3px; } } @media (max-width: 0px) { /* nieuzywane - stare wartosci tabletowe */ .elementor-element-5cf7b45 .elementor-element-032281b img, .elementor-element-5cf7b45 .elementor-element-0fac473 img, .elementor-element-5cf7b45 .elementor-element-bbb97d8 img { max-width: 60px !important; } .elementor-element-5cf7b45 .elementor-element-3459894 .aux-media-image, .elementor-element-5cf7b45 .elementor-element-3459894 img { height: 48px !important; max-height: 48px !important; } .elementor-element-5cf7b45 .elementor-widget-text-editor p { font-size: 11px !important; } } /* Sekcja logo, oznaczen i menu bez odstepow wewnetrznych. */ .elementor-6222 .elementor-element.elementor-element-6880a63 { padding: 0 !important; }