/* Theme Name: FSH Theme URI: https://kk.mobilny-fryzjer.pl/ Description: Motyw sklepu Football Second Hand. Motyw potomny dla Hello Elementor – układ strony (nagłówek, stopka, szablony WooCommerce) budowany w Elementor Pro Theme Builder. Author: FSH Version: 1.0.0 Template: hello-elementor Text Domain: fsh Requires PHP: 7.4 Tested up to: 6.7 */ /* ========================================================================== Ustawienia bazowe – uzupełnienie tego, co wcześniej dawała Astra. Właściwy wygląd nagłówka/stopki/treści pochodzi z Elementor Pro + kit globalny. ========================================================================== */ :root { --fsh-max-width: 1200px; --fsh-text: #f2f2f2; --fsh-bg: #000000; --fsh-muted: #9aa0a6; --fsh-border: #262626; --fsh-accent: #e11d2a; --fsh-font: 'Teko', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* WooCommerce ma WŁASNE zmienne CSS (fiolet #720eec jako "primary", zieleń, złoto/oliwka jako "highlight" itd.) używane w całym jego core CSS (gwiazdki ocen, znaczniki "Sprzedano", focus na polach, komunikaty, przyciski) – nadpisujemy je RAZ tutaj zamiast gonić każdy element osobno. */ --woocommerce: #e11d2a; --wc-green: #e11d2a; --wc-red: #ff5c5c; --wc-orange: #e11d2a; --wc-blue: #e11d2a; --wc-primary: #e11d2a; --wc-primary-text: #ffffff; --wc-secondary: #101014; --wc-secondary-text: #ffffff; --wc-highlight: #e11d2a; --wc-highligh-text: #ffffff; --wc-content-bg: #101014; --wc-subtext: rgba(255,255,255,.6); --wc-destructive: #ff5c5c; } /* Czarne tło wyjściowe na całej stronie + Teko globalnie (cały serwis) */ html, body { color: var(--fsh-text); background-color: var(--fsh-bg); /* siatka bezpieczeństwa na poziomym scrollu strony – Hello Elementor sam ustawia body{overflow-x:clip}, ale dokładamy hidden+100% na obu, żeby żaden przyszły element (bez własnego zabezpieczenia) nie potrafił rozciągnąć całej strony w poziomie */ overflow-x: hidden; max-width: 100%; } body, button, input, select, textarea, p, li, a, span, div, blockquote, figcaption, label, th, td, .elementor-widget-container, .elementor h1, .elementor h2, .elementor h3, .elementor h4, .elementor h5, .elementor h6, h1, h2, h3, h4, h5, h6 { font-family: var(--fsh-font); } .elementor-section, .e-con, .elementor-widget-wrap { background-color: transparent; } /* Elementor "boxed" content width spójny z poprzednim układem */ .e-con { --container-max-width: var(--fsh-max-width); } /* Domyślny tytuł strony Hello Elementor (Koszyk/Zamówienie/Moje konto – strony WooCommerce bez własnego szablonu Elementora) – bez tej reguły dziedziczył przygaszony, niski kontrast (wyglądał "wygaszony" na czarnym tle). */ .page-header .entry-title { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } /* Linki – czytelny stan podstawowy i hover */ a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } /* WooCommerce – drobne wyrównanie siatki, dopóki nie przejmie tego kit Elementora */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; } @media (max-width: 1024px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; } } /* Komunikaty WooCommerce */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--fsh-accent); } /* ========================================================================== Nagłówek FSH – czarne tło, większe logo, mega menu (wzorzec kickback.pl). Paleta: czarny / czerwony / biały. ========================================================================== */ :root { --fsh-red: #e11d2a; --fsh-header-gutter: 40px; } /* Na mobile 40px marginesu z każdej strony (konsola na głównej, panel sklepu, karta produktu – wszystkie liczą się z tej samej zmiennej) niepotrzebnie zjadało miejsce na wąskim ekranie; węższy margines daje filtrom/tytułom realnie więcej przestrzeni. */ @media (max-width: 767px) { :root { --fsh-header-gutter: 16px; } } /* --- Baza: czarny nagłówek, białe teksty ------------------------------------ */ #fsh-header { position: relative; background: #000 !important; } /* Zbity nagłówek – kasujemy domyślny 20px „gap" Elementora między paskiem górnym a paskiem menu oraz pionowy padding kontenera nagłówka. */ #fsh-header.e-con { --gap: 0px; --row-gap: 0px; --column-gap: 0px; --padding-top: 0px; --padding-bottom: 0px; --padding-block-start: 0px; --padding-block-end: 0px; gap: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #fsh-header .elementor-element-4c6fc68 { --padding-top: 4px; --padding-bottom: 4px; } /* Ten kontener (logo + nav + ikony) ma w Elementorze na sztywno ustawione flex_wrap:"nowrap" BEZ osobnej wartości dla mobile/tablet – więc na wąskim ekranie logo+menu+ikony nigdy się nie łamały do nowej linii, tylko wychodziły poza szerokość ekranu (poziomy scroll całej strony, "nic się nie mieści"). Elementor sam potrafi to przełączać przez zmienną --flex-wrap-mobile, ale jawny --flex-wrap:nowrap ustawiony na tym elemencie ma wyższą specyficzność niż globalna reguła .e-con.e-flex w @media(max-width:767px), więc nigdy nie wygrywał – prościej i pewniej nadpisać wprost flex-wrap. */ @media (max-width: 1024px) { #fsh-header .elementor-element-4c6fc68 { flex-wrap: wrap !important; row-gap: 10px !important; } /* PRAWDZIWA przyczyna łamania się wiersza logo/menu/ikon na 2 linie: ".fsh-nav { width:100% }" (reguła dla desktopu, żeby wyśrodkować pełną listę menu) nadawała elementowi nav (na mobile to tylko mały burger) hipotetyczny rozmiar "100% wiersza" JESZCZE PRZED liczeniem zawijania – przez to nav nigdy nie mieścił się obok loga i szedł do nowej linii, ciągnąc za sobą kolumnę ikon. Na mobile nav ma być tak wąski jak jego treść (sam burger). */ .fsh-nav { width: auto !important; } } /* Nagłówek na pełną szerokość ekranu, treść z bocznym marginesem */ #fsh-header > .e-con-inner, #fsh-header .elementor-element-7d6c79a, #fsh-header .elementor-element-4c6fc68 { max-width: 100% !important; } #fsh-header a { text-decoration: none; } #fsh-header a:hover { text-decoration: none; } /* Logo – bez tła, tylko delikatny hover */ #fsh-header .elementor-widget-image img { background: transparent; transition: transform .18s ease, filter .18s ease; } #fsh-header .elementor-widget-image a:hover img { transform: scale(1.04); } /* Ikony po prawej: wyszukiwarka, konto, koszyk – biały kolor, czerwony hover */ #fsh-header .elementor-search-form__icon, #fsh-header .elementor-search-form__toggle, #fsh-header #fsh-account .elementor-button-icon i, #fsh-header #fsh-cart a, #fsh-header #fsh-cart .elementor-button-icon, #fsh-header .elementor-menu-cart__toggle .elementor-button-text, #fsh-header .elementor-menu-cart__toggle .elementor-button-icon { color: #fff !important; fill: #fff !important; } #fsh-header #fsh-account:hover .elementor-button-icon i, #fsh-header .elementor-search-form__toggle:hover, #fsh-header .elementor-menu-cart__toggle:hover .elementor-button-icon { color: var(--fsh-red) !important; } /* Ikony akcji (lupa / konto / koszyk) – JEDEN spójny zestaw. Domyślnie FontAwesome (lupa/user) + eicon Elementora (koszyk) = 3 różne kroje. Podmieniamy wszystkie na jednolity zestaw linii (styl Lucide), renderowany jako maska SVG na oryginalnym (glif fonta ukryty). */ #fsh-header #fsh-search .elementor-search-form__toggle { --e-search-form-toggle-size: 21px; --e-search-form-toggle-background-color: transparent; --e-search-form-toggle-border-width: 0; } #fsh-header #fsh-search .elementor-search-form__toggle i, #fsh-header #fsh-account .elementor-button-icon i, #fsh-header #fsh-cart .elementor-button-icon i { display: block !important; flex: none !important; width: 21px !important; height: 21px !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; font-size: 0 !important; line-height: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: currentColor !important; background-image: none !important; -webkit-mask: var(--fsh-ico) no-repeat center / 21px 21px; mask: var(--fsh-ico) no-repeat center / 21px 21px; } #fsh-header #fsh-search .elementor-search-form__toggle i::before, #fsh-header #fsh-account .elementor-button-icon i::before, #fsh-header #fsh-cart .elementor-button-icon i::before { content: none !important; } #fsh-header #fsh-search .elementor-search-form__toggle i { --fsh-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27m21%2021-4.35-4.35%27%2F%3E%3C%2Fsvg%3E"); } #fsh-header #fsh-account .elementor-button-icon i { --fsh-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3C%2Fsvg%3E"); } #fsh-header #fsh-cart .elementor-button-icon i { --fsh-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z%27%2F%3E%3Cpath%20d%3D%27M3%206h18%27%2F%3E%3Cpath%20d%3D%27M16%2010a4%204%200%200%201-8%200%27%2F%3E%3C%2Fsvg%3E"); } #fsh-header #fsh-account .elementor-button-icon svg, #fsh-header #fsh-cart .elementor-button-icon svg, #fsh-header .elementor-search-form__toggle svg { width: 21px !important; height: 21px !important; } /* Koszyk – bez ramki i bez „pudełka", padding jak przy pozostałych ikonach */ #fsh-header #fsh-cart .elementor-menu-cart__toggle { --toggle-button-border-width: 0; --toggle-button-hover-border-color: transparent; --toggle-icon-padding: 6px; } #fsh-header #fsh-cart .elementor-menu-cart__toggle .elementor-button, #fsh-header #fsh-cart .elementor-menu-cart__toggle .elementor-button:hover { border: 0 !important; background: transparent !important; } #fsh-header #fsh-account .elementor-button, #fsh-header #fsh-cart .elementor-menu-cart__toggle .elementor-button, #fsh-header #fsh-search .elementor-search-form__toggle { padding: 7px !important; display: inline-flex; align-items: center; justify-content: center; gap: 0 !important; min-height: 0 !important; line-height: 0 !important; } #fsh-header #fsh-account .elementor-button-icon, #fsh-header #fsh-cart .elementor-button-icon, #fsh-header #fsh-search .elementor-search-form__icon { margin: 0 !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; line-height: 0; } /* Koszyk = sama ikona (bez ceny w nagłówku – była różnej „wielkości" od reszty) */ #fsh-header #fsh-cart .elementor-menu-cart__toggle .elementor-button-text { display: none !important; } /* wspólne wyrównanie i odstępy w klastrze ikon */ #fsh-header #fsh-search, #fsh-header #fsh-account, #fsh-header #fsh-cart { display: flex; align-items: center; } /* Wyszukiwarka pełnoekranowa – klik w lupę otwiera okno z polem frazy */ .elementor-search-form__container { background-color: rgba(0, 0, 0, .95) !important; } .elementor-search-form--skin-full_screen .elementor-search-form__input, .elementor-search-form--skin-full_screen .elementor-search-form__input::placeholder { color: #fff !important; } .elementor-search-form--skin-full_screen .elementor-search-form__input { border-bottom: 2px solid var(--fsh-red) !important; } .elementor-search-form__container .dialog-close-button, .elementor-search-form--skin-full_screen .elementor-search-form__submit { color: #fff !important; } .elementor-search-form__container .dialog-close-button:hover { color: var(--fsh-red) !important; } /* „X" do prawego górnego rogu ekranu – nie może nachodzić na pole wpisywania */ .elementor-search-form--skin-full_screen .elementor-search-form__container .dialog-lightbox-close-button { position: fixed !important; inset: clamp(16px,3vw,28px) clamp(16px,3vw,28px) auto auto !important; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 26px; } .elementor-search-form--skin-full_screen .elementor-search-form__input { max-width: 820px; margin-inline: auto; } /* mobile: pole wyszukiwania nie może dotykać krawędzi ekranu */ @media (max-width: 1024px) { .elementor-search-form--skin-full_screen .elementor-search-form__container { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } .elementor-search-form--skin-full_screen .elementor-search-form__input { padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box !important; } } /* Licznik koszyka – czerwony „bąbelek” (tylko liczba sztuk) */ #fsh-header span.elementor-menu-cart__items-indicator--bubble { background-color: var(--fsh-red) !important; color: #fff !important; } /* cena / subtotal w koszyku – bez czerwonego tła */ #fsh-header .elementor-menu-cart__toggle .elementor-button-text, #fsh-header .elementor-menu-cart__subtotal, #fsh-header .elementor-menu-cart__subtotal .woocommerce-Price-amount { background: transparent !important; } /* Rozwijany koszyk (side-cart) – domyślnie Elementor renderuje białe tło panelu (--cart-background-color: #fff) z tekstem dziedziczonym z globalnego `a{color:inherit}`/`body{color:#f2f2f2}`, czyli prawie biały tekst na białym tle – niewidoczny. Panel dostaje markowe czarne tło + czerwony akcent zamiast szarych domyślnych Elementora. */ #fsh-header #fsh-cart .elementor-menu-cart__container { background-color: rgba(0, 0, 0, .6) !important; } #fsh-header #fsh-cart .elementor-menu-cart__main { --cart-background-color: #101014; --cart-border-color: var(--fsh-red); --cart-border-style: solid; --cart-border-radius: 0; color: var(--fsh-text) !important; box-shadow: -10px 0 30px rgba(0, 0, 0, .5) !important; border-width: 0 0 0 3px !important; } #fsh-header #fsh-cart .elementor-menu-cart__close-button { --cart-close-button-color: var(--fsh-text); --cart-close-button-hover-color: var(--fsh-red); } #fsh-header #fsh-cart .widget_shopping_cart_content .woocommerce-mini-cart__empty-message { --empty-message-color: var(--fsh-muted); } #fsh-header #fsh-cart .elementor-menu-cart__product { --divider-color: var(--fsh-border); --product-variations-color: var(--fsh-muted); } #fsh-header #fsh-cart .elementor-menu-cart__product-name a { color: var(--fsh-text) !important; } #fsh-header #fsh-cart .elementor-menu-cart__product-name a:hover { color: var(--fsh-red) !important; } #fsh-header #fsh-cart .elementor-menu-cart__product-price { --product-price-color: var(--fsh-muted); } #fsh-header #fsh-cart .elementor-menu-cart__product-remove { --remove-item-button-color: var(--fsh-muted); --remove-item-button-hover-color: var(--fsh-red); } #fsh-header #fsh-cart .elementor-menu-cart__subtotal { --menu-cart-subtotal-color: #fff; --subtotal-divider-color: var(--fsh-border); } #fsh-header #fsh-cart .elementor-menu-cart__subtotal .woocommerce-Price-amount { color: var(--fsh-red) !important; } /* Obramowanie "Zobacz koszyk" NIE jest zwykłym border – zwykły clip-path ze wspólnej reguły ".elementor-button" (róg ścięty) ucina border na skosie, bo są na tym samym elemencie. Ten sam trik co pigułki filtrów: dwie nałożone, osobno przycięte warstwy (::before = kolor ramki, ::after = wypełnienie wsunięte o grubość ramki) dają ciągłą linię na całym, również ściętym, obwodzie. */ #fsh-header #fsh-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart { --view-cart-button-background-color: transparent; --view-cart-button-text-color: #fff; --view-cart-button-hover-background-color: transparent; --view-cart-button-hover-text-color: #fff; position: relative; isolation: isolate; border: none !important; } #fsh-header #fsh-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart::before, #fsh-header #fsh-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); } #fsh-header #fsh-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart::before { inset: 0; background: var(--fsh-red); } #fsh-header #fsh-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart::after { inset: 1.5px; background: #101014; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12.5px), calc(100% - 12.5px) 100%, 0 100%); } #fsh-header #fsh-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover::after { background: var(--fsh-red); } #fsh-header #fsh-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout { --checkout-button-background-color: var(--fsh-red); --checkout-button-text-color: #fff; --checkout-button-hover-background-color: #ff3b3b; --checkout-button-hover-text-color: #fff; } /* ikony social (FB/IG) w pasku górnym – odstęp między nimi, na każdej szerokości */ .fsh-topbar-social { display: inline-flex; align-items: center; gap: 18px; margin-left: 10px; } .fsh-topbar-social a { color: #fff; font-size: 14px; line-height: 1; display: inline-flex; padding: 4px; } .fsh-topbar-social a:hover { color: #000; } /* ========================================================================== Układ nagłówka na mobile (na życzenie użytkownika, wrzesień 2026): – pasek usług (Sklep/Skup koszulek/Klejenie nadruków/Kontakt) zawsze w jednej linii u góry; – pod nim osobny wiersz: waluta + język + ikony social (FB/IG) – ten wiersz chowa się przy scrollu w dół (JS w functions.php dodaje klasę "fsh-scrolled" na ) i wraca przy scrollu w górę; – logo bez napisu (tylko odznaka) + burger + lupa/konto/koszyk w jednej linii pod spodem. ========================================================================== */ @media (max-width: 1024px) { /* ten sam próg co przycisk-hamburger (.fsh-nav__burger, widoczny ≤1024px) – w zakresie 768–1024px burger już się pokazywał, ale napis przy logo i pełne odstępy paska wciąż były te z desktopu, więc mimo burgera cały wiersz dalej się nie mieścił w jednej linii. */ #fsh-header .elementor-element-7d6c79a, #fsh-header .elementor-element-4c6fc68 { --padding-left: 16px !important; --padding-right: 16px !important; padding-left: 16px !important; padding-right: 16px !important; } #fsh-header .elementor-element-4c6fc68 { --gap: 10px !important; gap: 10px !important; /* logo z lewej, burger+ikony razem z prawej (blisko siebie) zamiast 3 elementów rozstrzelonych po całej szerokości przez space-between */ --justify-content: flex-start !important; justify-content: flex-start !important; } #fsh-header .elementor-element-fshmeganav { margin-left: auto !important; } /* Desktopowa reguła menu-po-prawej ustawia ikonom flex:0 0 auto (żeby nie rosły i nie pchały menu do środka) – na mobile to za sztywne: przy wąskim ekranie ikony (bez możliwości skurczenia) nie mieściły się już obok loga i burgera w jednej linii i spadały niżej mimo flex-wrap. Na mobile menu to tylko mały burger (margin-left:auto wyżej), więc ikony mogą bezpiecznie odzyskać flex-shrink. */ #fsh-header .elementor-element-4c6fc68 > .elementor-element-774a544 { flex: 0 1 auto !important; } #fsh-header .elementor-element-774a544 { --gap: 10px !important; gap: 10px !important; } /* rząd 1: usługi – zawsze widoczne, zawsze w jednej linii (poziomy scroll jako siatka bezpieczeństwa na bardzo wąskich ekranach zamiast łamania na 2 linie) */ #fsh-topbar-right { flex-wrap: wrap; row-gap: 6px; justify-content: center; } #fsh-topbar .fsh-topbar-services { flex: 1 1 100%; flex-wrap: nowrap; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; font-size: 11px !important; } #fsh-topbar .fsh-topbar-services::-webkit-scrollbar { display: none; height: 0; } #fsh-topbar .fsh-topbar-services a { white-space: nowrap; } /* "Sklep" zbędny na mobile (i tak jest sklepem) – chowamy link i "/" po nim */ #fsh-topbar .fsh-topbar-services a:first-child, #fsh-topbar .fsh-topbar-services a:first-child + .sep { display: none; } /* rząd 2 (waluta/język/social) w pasku górnym – na mobile schodzi z paska górnego całkowicie, bo ten sam zestaw jest teraz w .fsh-mobile-bottombar (przyklejony do dołu ekranu, patrz niżej i wp_footer w functions.php) */ #fsh-topbar-right .elementor-element-844a3f2, #fsh-topbar-right .elementor-element-fshtblang, #fsh-topbar-right .elementor-element-fshtbsoc { display: none !important; } /* logo: sama odznaka, bez napisu "FOOTBALL SECOND HAND" – oszczędza miejsce, żeby logo + burger + lupa + konto + koszyk zmieściły się w jednej linii bez łamania */ #fsh-header .elementor-element-fshlogotxt { display: none !important; } /* logo (fshlogowrap) na sztywno tyle szerokości ile sama odznaka – nie ma prawa się rozciągać i pchać reszty wiersza (ten sam footgun co .fsh-nav wyżej: klasa "e-con-full" to tylko ustawienie content_width WEWNĄTRZ kontenera, ale dla pewności blokujemy wprost jego własny flex-grow/width jako dziecka wiersza nagłówka). */ #fsh-header .elementor-element-fshlogowrap { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } } /* Mobile: logo | burger + lupa+konto+koszyk w JEDNEJ linii. Grid zamiast flexa: Elementor ma dla tego wiersza/ikon --flex-wrap-mobile:wrap (ikony spadały pod spód), a wymuszony flex nowrap wypychał ikony poza ekran (html/body mają overflow-x:hidden, więc po prostu znikały). W gridzie kolumna loga to minmax(0,1fr) – to ona się kurczy, a burger i ikony zawsze mają swoje miejsce. Logo z lewej, burger tuż przed lupą. */ @media (max-width: 1024px) { #fsh-header .elementor-element-4c6fc68 { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "logo nav icons"; align-items: center !important; column-gap: 4px !important; } #fsh-header .elementor-element-4c6fc68 > .elementor-element { width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; align-self: center !important; } #fsh-header .elementor-element-4c6fc68 > .elementor-element-fshmeganav { grid-area: nav; } #fsh-header .elementor-element-4c6fc68 > .elementor-element-fshlogowrap { grid-area: logo; justify-self: start; } #fsh-header .elementor-element-4c6fc68 > .elementor-element-774a544 { grid-area: icons; justify-self: end; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; padding: 0 !important; } #fsh-header .fsh-nav__burger { margin: 0 !important; } #fsh-header .elementor-element-774a544 > .elementor-element { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; align-self: center !important; } } /* ========================================================================== Nawigacja – własne mega menu (.fsh-nav / .fsh-mega, shortcode [fsh_mega_menu]) ========================================================================== */ /* Panel mega menu liczy się względem #fsh-header. NIE nadpisujemy tu position #fsh-header (to psuło sticky Elementora – „skakanie" strony). Zerujemy tylko elementy MIĘDZY nagłówkiem a panelem. */ #fsh-header { padding: 0 !important; margin: 0 !important; } header.elementor-location-header, .elementor-location-header > .elementor { margin: 0 !important; padding: 0 !important; } #fsh-topbar > .elementor-widget-wrap, #fsh-topbar > .e-con-inner { padding-top: 0 !important; padding-bottom: 0 !important; } #fsh-header .elementor-element-4c6fc68, #fsh-header .elementor-widget-shortcode, #fsh-nav.elementor-widget, #fsh-nav .elementor-widget-container, .fsh-nav, .fsh-nav__list, .fsh-nav__item { position: static !important; } /* ========================================================================== Pasek waluty/języka/social przyklejony do dołu ekranu – TYLKO mobile (na desktopie ten sam zestaw zostaje w pasku górnym bez zmian; oryginał w pasku górnym jest na mobile ukryty wyżej, display:none). Markup drukuje PHP w wp_footer (functions.php), sam kontener ".fsh-mobile-bottombar". ========================================================================== */ .fsh-mobile-bottombar { display: none; } @media (max-width: 1024px) { .fsh-mobile-bottombar { display: flex; align-items: center; justify-content: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #0a0a0a; border-top: 2px solid var(--fsh-red); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); } .fsh-mobile-bottombar select.wmc-nav, .fsh-mobile-bottombar .fsh-lang select { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; height: 32px; margin: 0; letter-spacing: normal !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #000 !important; color: #fff !important; border: 1px solid var(--fsh-red) !important; border-radius: 3px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e11d2a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; cursor: pointer; font-family: var(--fsh-font); font-size: 13px; text-transform: uppercase; padding: 0 34px 0 11px; } .fsh-mobile-bottombar select.wmc-nav { width: 128px !important; } .fsh-mobile-bottombar .fsh-lang select { width: 60px !important; } .fsh-mobile-bottombar .fsh-topbar-social { gap: 14px; margin-left: 0; } .fsh-mobile-bottombar .fsh-topbar-social a { color: #fff; } .fsh-mobile-bottombar .fsh-topbar-social a:hover { color: var(--fsh-red); } /* odstęp na dole strony, żeby stały pasek nie zasłaniał ostatniej treści (np. przycisku "Dodaj do koszyka" czy stopki) */ body { padding-bottom: 56px; } } /* Menu po prawej, koło ikon: logo i ikony trzymają naturalną szerokość (flex:0 0 auto), a menu (margin-left:auto) zjada całą wolną przestrzeń po lewej, lądując tuż przed kolumną ikon. (Wcześniej logo+ikony miały równe 1fr, co wyśrodkowywało menu — to była poprzednia wersja layoutu.) */ #fsh-header .elementor-element-4c6fc68 > .elementor-element-fshlogowrap, #fsh-header .elementor-element-4c6fc68 > .elementor-element-774a544 { flex: 0 0 auto !important; } #fsh-header .elementor-element-4c6fc68 > .elementor-widget-shortcode { flex: 0 0 auto; margin-left: auto; } #fsh-nav.elementor-widget, #fsh-nav .elementor-widget-container, .fsh-nav { display: flex; align-items: center; } .fsh-nav { width: auto; } .fsh-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; justify-content: center; /* menu wyśrodkowane */ } .fsh-nav__item { display: flex; align-items: center; } /* cienka pionowa linia między pozycjami menu (bez wyróżnionych kafelków) */ .fsh-nav__item + .fsh-nav__item::before { content: ""; align-self: center; width: 1px; height: 15px; margin: 0 5px; background: rgba(255,255,255,.18); } .fsh-nav__item--hot::before, .fsh-nav__item--premium::before { display: none; } .fsh-nav__link { display: flex; align-items: center; padding: 14px 16px; font-family: var(--fsh-font); font-size: 20px; font-weight: 600; /* menu 20px */ letter-spacing: .04em; text-transform: uppercase; color: #fff; white-space: nowrap; } .fsh-nav__item:hover > .fsh-nav__link, .fsh-nav__item.is-open > .fsh-nav__link { color: var(--fsh-red); } .fsh-nav__burger, .fsh-nav__expand { display: none; } @media (min-width: 1025px) and (max-width: 1500px) { .fsh-nav__link { padding-left: 11px; padding-right: 11px; font-size: 17px; } } /* Wyróżnione, lekko pulsujące kafelki w menu: HOT DEALS (czerwony) + PREMIUM (złoty) */ .fsh-nav__item--hot, .fsh-nav__item--premium { align-self: center; } .fsh-nav__item--premium { margin-left: 8px; } .fsh-nav__item--hot > .fsh-nav__link, .fsh-nav__item--premium > .fsh-nav__link { font-weight: 700; border-radius: 3px; padding: 4px 14px; line-height: 1.35; animation: fshTilePulse 2.6s ease-in-out infinite; } .fsh-nav__item--hot > .fsh-nav__link { color: #fff; background: #e11d2a; --tile-glow: 225,29,42; } .fsh-nav__item--hot:hover > .fsh-nav__link, .fsh-nav__item--hot.is-open > .fsh-nav__link { color: #fff; background: #ff3947; animation: none; } .fsh-nav__item--premium > .fsh-nav__link { color: #1c1503; background: #d7a13c; --tile-glow: 215,161,60; } .fsh-nav__item--premium:hover > .fsh-nav__link, .fsh-nav__item--premium.is-open > .fsh-nav__link { color: #1c1503; background: #e6b048; animation: none; } @keyframes fshTilePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--tile-glow,225,29,42), .55); } 55% { box-shadow: 0 0 0 7px rgba(var(--tile-glow,225,29,42), 0); } } @media (prefers-reduced-motion: reduce) { .fsh-nav__item--hot > .fsh-nav__link, .fsh-nav__item--premium > .fsh-nav__link { animation: none; } } @media (max-width: 1024px) { .fsh-nav__item--hot, .fsh-nav__item--premium { margin: 8px 20px; } .fsh-nav__item--hot > .fsh-nav__link, .fsh-nav__item--premium > .fsh-nav__link { display: inline-flex; } } /* --- PANEL mega (desktop) --- */ .fsh-mega, .fsh-flatmenu { position: absolute; left: 0; right: 0; top: 100%; background: #0a0a0a; border-top: 2px solid var(--fsh-red); box-shadow: 0 30px 60px rgba(0,0,0,.5); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s; z-index: 100; } .fsh-nav__item--mega:hover > .fsh-mega, .fsh-nav__item--mega:hover > .fsh-flatmenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .24s ease, transform .24s ease, visibility 0s; } /* „mostek" nad panelem – utrzymuje hover przy przejściu myszą z pozycji menu */ .fsh-mega::before, .fsh-flatmenu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 46px; pointer-events: none; } .fsh-nav__item--mega:hover > .fsh-mega::before, .fsh-nav__item--mega:hover > .fsh-flatmenu::before { pointer-events: auto; } /* płaski panel klubów (Bluzy / Kurtki / Akcesoria) – siatka linków bez podziału na ligi */ .fsh-flatmenu__inner { max-height: calc(100vh - 150px); overflow-y: auto; padding: 16px var(--fsh-header-gutter) 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px 28px; } .fsh-flatmenu__club { display: block; padding: 5px 0; font-size: 16px; line-height: 1.25; color: rgba(255,255,255,.72); border-bottom: 1px solid rgba(255,255,255,.06); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fsh-flatmenu__club span { opacity: .5; margin-left: 3px; } .fsh-flatmenu__club:hover { color: var(--fsh-red); padding-left: 5px; transition: padding .15s ease, color .15s ease; } .fsh-mega__inner { position: relative; min-height: 0; max-height: calc(100vh - 150px); padding: 10px 0 12px; overflow: hidden; background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)); background-repeat: no-repeat; background-size: 1px calc(100% - 24px); background-position: 320px 12px; } /* lewa kolumna: ligi */ .fsh-mega__leagues { list-style: none; margin: 0; padding: 0; width: 320px; max-height: calc(100vh - 174px); overflow-y: auto; } .fsh-mega__league { position: static; } .fsh-mega__league-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px var(--fsh-header-gutter); font-family: var(--fsh-font); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255,255,255,.06); } .fsh-mega__chevron { opacity: .4; font-size: 16px; line-height: 1; } .fsh-mega__league:hover > .fsh-mega__league-link { background: rgba(255,255,255,.06); color: var(--fsh-red); } .fsh-mega__league:hover > .fsh-mega__league-link .fsh-mega__chevron { opacity: 1; color: var(--fsh-red); } /* prawa część: kluby wybranej ligi – styka się z lewą kolumną (brak martwej strefy) */ .fsh-mega__panel { position: absolute; left: 320px; right: var(--fsh-header-gutter); top: 10px; bottom: 12px; padding-left: 40px; display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 0 28px; align-content: start; overflow-y: auto; } .fsh-mega__leagues > .fsh-mega__league:first-child > .fsh-mega__panel { display: grid; } .fsh-mega__leagues:hover > .fsh-mega__league:first-child:not(:hover) > .fsh-mega__panel { display: none; } .fsh-mega__league:hover > .fsh-mega__panel { display: grid; } .fsh-mega__club, .fsh-mega__all { display: block; padding: 3.5px 0; font-size: 16px; line-height: 1.25; color: rgba(255,255,255,.72); border-bottom: 1px solid rgba(255,255,255,.06); } .fsh-mega__club:hover, .fsh-mega__all:hover { color: var(--fsh-red); padding-left: 5px; transition: padding .15s ease, color .15s ease; } .fsh-mega__all { grid-column: 1 / -1; margin-top: 7px; border: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; } /* --- Mobile --- */ @media (max-width: 1024px) { /* !important wszędzie tutaj – wtyczkowy/motywowy reset `button{border:1px solid #c36;padding:.5rem 1rem}` + hover/focus `background-color:#c36` (patrz notatka przy globalnym resecie [type=button] wyżej w pliku) rozjeżdżał ten