/* * KFD - jedna szerokosc strony (27.09.2026) * * Srodek strony ma te same krawedzie co naglowek i stopka: * lewa = poczatek logo KFD, prawa = koniec ikony koszyka. * Tresc 1240 px, margines boczny 40 px (komputer) i 16 px (tablet, telefon; * tyle ma naglowek w wersji mobilnej). * * Plik dolaczany jako ostatni arkusz w (templates/_partials/stylesheets.tpl). * Reguly maja !important i #id, bo nadpisuja szerokosci ustawione dla * poszczegolnych stron w custom.css, kfd-catalog.css, kfd-cart.css, * kfd-checkout.css i kfd-menu.css (te laduja sie pozniej w dokumencie). */ :root { --kfd-page-max: 1240px; --kfd-page-gutter: 40px; } @media (max-width: 1023px) { :root { --kfd-page-gutter: 16px; } } /* 1. Srodek strony: ta sama szerokosc na wszystkich stronach */ html body #wrapper > .container, html body #notifications > .container { width: 100% !important; max-width: calc(var(--kfd-page-max) + 2 * var(--kfd-page-gutter)) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--kfd-page-gutter) !important; padding-right: var(--kfd-page-gutter) !important; } /* Logowanie i haslo na bardzo waskim telefonie: karta od krawedzi do krawedzi, jak dotad */ @media (max-width: 359px) { html body:is(#authentication, #password) #wrapper > .container { padding-left: 0 !important; padding-right: 0 !important; } } /* 2. Naglowek od 768 px: ten sam margines co tresc (przy 1024-1319 px logo dotykalo krawedzi ekranu) */ @media (min-width: 768px) { html body #header .kfd-header > .container { width: 100% !important; max-width: calc(var(--kfd-page-max) + 2 * var(--kfd-page-gutter)) !important; padding-left: var(--kfd-page-gutter) !important; padding-right: var(--kfd-page-gutter) !important; } /* Rozwijane menu (Kategorie, Producenci, O KFD) na cala szerokosc naglowka, nie wiecej */ html body #header .mm_menus_li.mm_has_sub > .mm_columns_ul { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; } } /* 2b. Komputer 1024-1099 px: przy marginesie 40 px pole wyszukiwania 312 px zaslanialo ostatnia * pozycje menu ("Dostawa i platnosc"); w tym zakresie pole ma 240 px. */ @media (min-width: 1024px) and (max-width: 1099px) { html body #header .kfd-header__search { width: 240px !important; min-width: 240px !important; max-width: 240px !important; flex: 0 0 240px !important; } html body #header .kfd-header__search #topsearchelastic_widget, html body #header .kfd-header__search #topsearchelastic_widget form { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* 2a. Naglowek na tablecie (768-1023 px), 28.09.2026 - same style, bez zmian w custom.js. * Wczesniej nie bylo tu logo ani ikon konta, kontaktu i koszyka, a menu sie nie otwieralo: * kfd-menu.css chowa logo komputerowe do 1023 px, pasek telefonu jest ukryty od 768 px, * a motyw przenosi logo i ikony do paska telefonu dopiero ponizej 768 px. Panele menu * pokazywal tylko stan komputerowy (menu_hover), a custom.js do 1023 px dziala jak na * telefonie i po dotknieciu ustawia klase opened. * Teraz: dwa rzedy (logo, menu, ikony / wyszukiwarka), panel otwiera sie dotknieciem * (klasa opened), tlo przyciemnia zaslona kfd-menu-overlay, a jej dotkniecie zamyka panel. */ @media (min-width: 768px) and (max-width: 1023px) { html body #header .kfd-header__layout { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; /* pierwszy rzad staly: custom.js nadaje paskowi menu wysokosc szuflady telefonu */ grid-template-rows: 30px auto !important; grid-template-areas: "logo menu actions" "search search search" !important; align-items: center !important; column-gap: 16px !important; row-gap: 0 !important; min-height: 0 !important; padding: 12px 0 10px !important; } /* naglowek kompaktowy kasy: modul kfdonepagecheckout daje mu 20 px z bokow przy 768-991 px */ html body:is(#checkout, #cart, #order, #order-confirmation) #header .kfd-header__layout--compact { padding-left: 0 !important; padding-right: 0 !important; } html body #header .kfd-header__logo.hidden-sm-down { display: flex !important; grid-area: logo !important; align-items: center !important; } /* pasek menu: jego pusty obszar (wysokosc od custom.js) nie przechwytuje dotkniec */ html body #header .kfd-header__menu { grid-area: menu !important; display: flex !important; align-self: start !important; justify-content: center !important; min-width: 0 !important; pointer-events: none; } html body #header .kfd-header__menu .mm_menus_li { pointer-events: auto; } html body #header .kfd-header__utilities.hidden-sm-down { display: contents !important; } html body #header .kfd-header__search { grid-area: search !important; width: 100% !important; margin-top: 10px !important; } html body #header .kfd-header__utilities .kfd-header__actions { grid-area: actions !important; display: flex !important; align-items: center !important; gap: 12px !important; } html body #header .kfd-header__utilities .kfd-header__mobile-toggle, html body #header .kfd-header__mobile { display: none !important; } /* panel otwarty dotknieciem (custom.js w trybie telefonu ustawia opened) */ html body #header .mm_menus_li.mm_has_sub.opened > .mm_columns_ul { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } html body #header .manufacturers.mm_has_sub.opened > .mm_columns_ul { display: grid !important; } /* zaslona pod naglowkiem, jak na komputerze; jej dotkniecie zamyka panel (obsluga w custom.js) */ html body:has(#header .mm_menus_li.mm_has_sub.opened) .kfd-menu-overlay { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Panel Kategorie: siatka - zakladki z lewej, tresc 3 kolumny z prawej, wysokosc z tresci * (na komputerze wysokosc liczy custom.js, w trybie telefonu nie) */ html body #header .mm_menus_li.mm_menus_li_tab.opened > .mm_columns_ul { display: grid !important; grid-template-columns: 220px minmax(0, 1fr) !important; grid-auto-rows: min-content !important; align-content: start !important; height: auto !important; min-height: 0 !important; max-height: calc(100vh - 140px) !important; overflow-y: auto !important; background: linear-gradient(90deg, #f8f9fb 0, #f8f9fb 220px, #e5e7eb 220px, #e5e7eb 221px, #fff 221px, #fff 100%) !important; } html body #header .mm_menus_li.mm_menus_li_tab > .mm_columns_ul > .mm_tabs_li { display: contents !important; } html body #header .mm_menus_li.mm_menus_li_tab > .mm_columns_ul > .mm_tabs_li > .mm_tab_li_content { grid-column: 1 !important; } html body #header .mm_menus_li.mm_menus_li_tab > .mm_columns_ul > .mm_tabs_li > .mm_columns_contents_ul { position: static !important; left: auto !important; right: auto !important; width: auto !important; grid-column: 2 !important; grid-row: 1 / span 50 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* zadna zakladka nie wybrana (tak otwiera custom.js) - pokaz pierwsza */ html body #header .mm_menus_li_tab > .mm_columns_ul:not(:has(> .mm_tabs_li.open)) > .mm_tabs_li:first-child > .mm_columns_contents_ul { display: grid !important; } html body #header .mm_menus_li_tab > .mm_columns_ul:not(:has(> .mm_tabs_li.open)) > .mm_tabs_li:first-child .mm_tab_li_content { background: #fff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } html body #header .mm_menus_li_tab > .mm_columns_ul:not(:has(> .mm_tabs_li.open)) > .mm_tabs_li:first-child .mm_tab_toggle_title a { font-weight: 700 !important; } /* Panel O KFD: 3 karty bez karty z logo (przy 768 px czwarta kolumna wystawala poza panel) */ html body #header .okfd-dropdown > .mm_columns_ul.okfd-panel { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body #header .okfd-dropdown.opened > .mm_columns_ul.okfd-panel { display: grid !important; } html body #header .okfd-dropdown > .mm_columns_ul.okfd-panel > .okfd-card--promo { display: none !important; } } /* 3. Stopka: ten sam margines boczny */ @media (min-width: 768px) { html body #footer .kfd-footer { padding-left: var(--kfd-page-gutter) !important; padding-right: var(--kfd-page-gutter) !important; } } html body #footer .kfd-checkout-footer { padding-left: var(--kfd-page-gutter) !important; padding-right: var(--kfd-page-gutter) !important; } /* 4. Strona glowna: baner na cala szerokosc tresci */ html body#index #carousel .carousel-item figure { display: block; } /* 5. Karta produktu: zdjecie od lewej krawedzi, opis bez wystawania w prawo */ @media (min-width: 768px) { html body#product #content { max-width: none; margin-left: 0; margin-right: 0; } /* zdjecie w swoim rozmiarze (bez powiekszania), na srodku karty */ html body#product .images-container .product-cover img { display: block; max-width: min(100%, 452px); margin-left: auto; margin-right: auto; } } html body#product .tabs-info { width: 100% !important; } html body#product .tabs-info > .tabs { padding-left: 0; padding-right: 0; } /* 6. Koszyk: tytul i produkty od lewej krawedzi, podsumowanie konczy sie rowno z ikona koszyka */ @media (min-width: 768px) { html body#cart .kfd-cart-main__header, html body#cart .kfd-cart-line, html body#cart .kfd-cart-continue { padding-left: 0; padding-right: 0; } } @media (min-width: 1200px) { html body#cart .cart-grid-body.col-lg-8 { width: calc(100% - 390px); } } /* 7. Strony informacyjne (Dostawa, Regulamin, FAQ, O KFD): tekst od krawedzi, bez wciecia 20 px */ html body#cms #main .page-content.page-cms { padding-left: 0; padding-right: 0; } /* 8. Kontakt: dane sklepu od lewej krawedzi, formularz do prawej */ html body#contact #wrapper > .container > #left-column { padding-left: 0; } html body#contact #wrapper > .container > #content-wrapper { padding-right: 0; } html body#contact #main > #content.page-content { padding-left: 0; padding-right: 0; } @media (max-width: 767px) { html body#contact #wrapper > .container > #left-column, html body#contact #wrapper > .container > #content-wrapper { padding-left: 0; padding-right: 0; } } /* 9. Nowe produkty: tytul i kafelki od krawedzi do krawedzi */ html body#new-products #wrapper > .container > #content-wrapper { padding-left: 0; padding-right: 0; } html body#new-products #js-product-list .products.row { margin-left: -10px; margin-right: -10px; } /* 10. Nasze sklepy: lista na cala szerokosc, mapka od lewej krawedzi */ html body#stores #main .page-stores { width: auto; margin-left: 0; margin-right: 0; } html body#stores #main .page-stores .store-item { padding-left: 0; padding-right: 0; } html body#stores #main .store-item-container > .store-picture { padding-left: 0; } /* 11. Mapa strony: kolumny od lewej krawedzi */ html body#sitemap #main > .container-fluid { padding-left: 0; padding-right: 0; } /* 12. Konto klienta: bez dodatkowego zwezenia do 1120 px */ html body#my-account #main, html body:is(#history, #identity, #addresses, #address, #order-detail, #order-slip, #discount, #order-follow, #order-return, #module-blockwishlist-lists, #module-blockwishlist-view, #module-psgdpr-gdpr, #module-allinone_rewards-rewards, #module-allinone_rewards-gifts, #module-allinone_rewards-sponsorship, #module-hioutofstocknotification-subscribe, #module-ets_sociallogin-social, #module-kfdambassadors-ambassador) #main { max-width: none; } /* 13. Promocje i Najczesciej kupowane: ten sam wyglad co Nowe produkty (28.09.2026). * Te strony maja ten sam szablon i kafelek co Nowe produkty, ale custom.css ustawial * uklad i kafelki tylko dla #category, #manufacturer i #new-products. Zostawal goly * motyw classic: pusta lewa kolumna 25%, kafelki po 180 px bez ramek, male szare nazwy, * "Szybki podglad" w dziwnym miejscu i podwojna plakietka "Niedostepny". */ html body:is(#prices-drop, #best-sales) #wrapper > .container > #left-column { padding: 0; } /* pusta lewa kolumna znika tylko wtedy, gdy jest w niej sam pusty pojemnik filtrow * (gdyby wlaczyc tu filtry albo inny blok, kolumna sama wroci) */ html body:is(#prices-drop, #best-sales) #wrapper > .container > #left-column:not(:has(#search_filters)):not(:has(> :not(#search_filters_wrapper))) { display: none; } html body:is(#prices-drop, #best-sales) #wrapper > .container > #left-column:not(:has(#search_filters)):not(:has(> :not(#search_filters_wrapper))) + #content-wrapper { width: 100%; padding-left: 0; padding-right: 0; } html body:is(#prices-drop, #best-sales) #js-product-list .products.row { margin-left: -10px; margin-right: -10px; } /* kafelki: 5 w rzedzie od 1200 px, 3 od 576 px, 2 na telefonie */ html body:is(#prices-drop, #best-sales) #products .product { width: 20%; max-width: none; max-height: none; padding: 0 10px; margin-bottom: 15px; } @media (min-width: 576px) and (max-width: 1199px) { html body:is(#prices-drop, #best-sales) #products .product { width: 33.33%; } } @media (max-width: 575px) { html body:is(#prices-drop, #best-sales) #products .product { width: 50%; } } html body:is(#prices-drop, #best-sales) #products .product .product-miniature { width: 100%; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; } html body:is(#prices-drop, #best-sales) #products .product-title { min-height: 40px; } /* na telefonie nazwa ma co najmniej 3 linie (ceny w jednej linii), ale dluzsza nazwa nie wchodzi * na cene - tak samo poprawione na Nowych produktach (custom.css mial tam sztywne 60 px) */ @media (max-width: 767px) { html body:is(#new-products, #prices-drop, #best-sales) #products .product-title { height: auto; min-height: 60px; } } html body:is(#prices-drop, #best-sales) #products .product-title a { font-size: 14px; font-weight: bold; } html body:is(#prices-drop, #best-sales) #products .product-description .product-price-and-shipping { position: relative; left: unset; bottom: unset; width: 100%; } html body:is(#prices-drop, #best-sales) #products .thumbnail-container:hover .product-description::after { display: none; } /* plakietki male w lewym gornym rogu zdjecia; "Niedostepny" tylko raz - niebieski pasek pod nazwa */ html body:is(#prices-drop, #best-sales) #products .product .product-flags { position: absolute; top: 5px; left: 5px; z-index: 99; flex-direction: row; justify-content: space-between; width: auto; min-height: 32px; margin: auto; } html body:is(#prices-drop, #best-sales) #products .product .product-flags .product-flag { min-width: unset; min-height: unset; margin: auto 5px auto auto; padding: 1px 9px; font-size: 12px; border-radius: 5px; } html body:is(#prices-drop, #best-sales) #products .product .product-flags .product-flag.out_of_stock { display: none; } html body:is(#prices-drop, #best-sales) #products .product-out-of-stock { margin-bottom: 0; justify-content: center; } html body:is(#prices-drop, #best-sales) #products .product-out-of-stock .out_of_stock { margin-top: 0; padding: 2px 25px; font-size: 12px; font-weight: bold; color: #fff; text-align: center; text-transform: none; background: #3D52D5; border-radius: 5px; } /* "Szybki podglad" pod cena, jak na Nowych produktach */ html body:is(#prices-drop, #best-sales) #products .highlighted-informations { position: relative; top: 0; display: block; width: 100%; min-height: unset; margin: auto !important; cursor: pointer; } html body:is(#prices-drop, #best-sales) #products .highlighted-informations .quick-view { width: 100%; font-size: 14px; text-align: center; } /* serduszko listy zyczen w prawym gornym rogu */ html body:is(#prices-drop, #best-sales) #products .wishlist-button-add { top: 10px; right: 5px; } /* 14. Strona glowna do 991 px: baner od krawedzi do krawedzi okna, bez 100vw. * theme.css robil to przez left: 50%, width: 100vw i margin-left: -50vw; 100vw liczy tez * pasek przewijania, wiec w oknie komputera baner wystawal o ok. 8 px, strona przewijala sie * w bok, a strzalki byly uciete. Teraz baner wychodzi tylko na margines boczny strony. */ @media (max-width: 991px) { html body#index #carousel.carousel { left: auto !important; width: auto !important; margin-left: calc(-1 * var(--kfd-page-gutter)) !important; margin-right: calc(-1 * var(--kfd-page-gutter)) !important; } } /* 15. Strona glowna od 992 px: prawa strzalka banera nie wystaje poza baner (pole ikony 50 px * w pojemniku 30 px wystawalo o 3 px); stoi symetrycznie do lewej. */ @media (min-width: 992px) { html body#index #carousel .carousel-control .icon-next { right: 1px; width: 3.125rem; margin-right: 0; } } /* 16. Strona glowna na telefonie: tytul "Wyroznione" w linii z kafelkami i logo (byl wciety o 15 px) */ @media (max-width: 768px) { html body#index .hc-tabs .hc-cat.parent-cat:first-child { margin-left: 0 !important; padding-left: 0; } } /* 17. Strona glowna na telefonie: pasek zalet ("Polska rodzinna firma"...) do samej prawej * krawedzi ekranu (mial -15 px, a margines strony to 16 px) */ @media (max-width: 767px) { html body #wrapper .kfd-benefits { margin-right: calc(-1 * var(--kfd-page-gutter)); } } /* 18. Kategoria (i producent) bez filtrow, np. "Odzywki i suplementy": pusta lewa kolumna nie zajmuje * 250 px, produkty od lewej krawedzi (28.09.2026). :not(:has(*)) zamiast :empty, bo na produkcji * HTML nie jest sciskany i w kolumnie zostaja odstepy. */ html body:is(#category, #manufacturer) #wrapper > .container > #left-column:not(:has(*)) { display: none; } html body:is(#category, #manufacturer) #wrapper > .container > #left-column:not(:has(*)) + #content-wrapper { width: 100%; } /* 19. Strona glowna, dolny blok z banerem fabryki i opisem KFD (modul "wlasny tekst", tresc w bazie), * 28.09.2026: bez wciecia 50 px z bokow - tekst w linii z logo i koszykiem, jak kafelki produktow * nad nim; baner (akapit z samym obrazkiem na poczatku bloku) na cala szerokosc tresci, wysrodkowany. * Obrazek ma 999 px, wiec przy tresci 1240 px jest powiekszony ok. 1,24 raza (sprawdzone - ostry). */ html body #custom-text { padding-left: 0 !important; padding-right: 0 !important; } html body #custom-text > p:first-child > img:only-child { display: block; width: 100%; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; } /* 20. Strona glowna na telefonie (28.09.2026): kafelki zalet w pasku przewijanym w bok tej samej wysokosci. * Dluzszy podpis kafelka 3 ("Paczkomaty, Automaty Orlen, Kurier") zawija sie na 2 linie; bez tego * kafelek bylby wyzszy od sasiednich (pasek ma align-items: start z ukladu komputerowego). */ @media (max-width: 767px) { html body .kfd-benefits__track { align-items: stretch; } }