/* KD Theme — baza. Zadnej wartosci na sztywno: wszystko z var(--kd-*) generowanych z tokens.json. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--kd-font-body); font-size: var(--kd-body-size); font-weight: var(--kd-body-weight, 400); line-height: var(--kd-body-lh, 1.5); color: var(--kd-color-text); background: var(--kd-color-background); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--kd-color-secondary); text-decoration: none; } a:hover { text-decoration: underline; } /* * ⚠️ Odnosnik W NAGLOWKU bierze kolor naglowka, nie kolor odnosnika. * * `colors.secondary` to ten sam odcien co `primary`, wiec kazdy odnosnik w sklepie jest * akcentowy. W zdaniu to poprawne. W naglowku nie: na stronie wynikow wyszukiwania cztery * turkusowe naglowki na jednym ekranie byly najglosniejszym elementem strony i zaden z nich * nie prowadzil do zakupu (zmierzone 21.09.2026 na `szukaj-mobile-full.png`). To samo dotyczy * tytulow wpisow na liscie bloga i nazw produktow w kaflach. Akcent ma jedna robote: akcje. * Sygnalem, ze naglowek jest klikalny, zostaje podkreslenie przy najechaniu. */ :is(h1, h2, h3, h4, h5, h6) a { color: inherit; } h1, h2, h3, h4, h5, h6 { color: var(--kd-color-text); margin: 0 0 var(--kd-space-2); /* Bez tego dwuwierszowy naglowek zostawia w drugim wierszu jedno slowo. */ text-wrap: balance; } /* * Krój i skala naglowkow celowo przez klase ``. Elementor rozdawal je regula * `.elementor-kit-5618 h1` — klasa + element, wiec bila selektory jednoklasowe w tresciach * wklejonych do buildera (`.tsh-h1` i podobne). Tresc przeniesiona do `post_content` ma * dzieki temu ten sam uklad kaskady co na produkcji. Kolor i margines zostaja na poziomie * elementu, bo kit ich nie ustawial — inaczej bialy naglowek na ciemnym banerze zrobilby sie * czarny. */ .kd h1, .kd h2, .kd h3, .kd h4, .kd h5, .kd h6 { font-family: var(--kd-font-heading); } .kd h1 { font-family: var(--kd-h1-family, var(--kd-font-heading)); font-size: var(--kd-h1-size); font-weight: var(--kd-h1-weight); line-height: var(--kd-h1-lh); letter-spacing: var(--kd-h1-ls); } .kd h2 { font-family: var(--kd-h2-family, var(--kd-font-heading)); font-size: var(--kd-h2-size); font-weight: var(--kd-h2-weight); line-height: var(--kd-h2-lh); letter-spacing: var(--kd-h2-ls, 0); } .kd h3 { font-family: var(--kd-h3-family, var(--kd-font-heading)); font-size: var(--kd-h3-size); font-weight: var(--kd-h3-weight); line-height: var(--kd-h3-lh); } .kd h4 { font-family: var(--kd-h4-family, var(--kd-font-heading)); font-size: var(--kd-h4-size); font-weight: var(--kd-h4-weight); line-height: var(--kd-h4-lh); } p, ul, ol { margin: 0 0 var(--kd-space-2); } /* --- uklad --- */ .kd-container { width: 100%; max-width: var(--kd-container); margin-inline: auto; padding-inline: var(--kd-gutter); } .kd-section { padding-block: var(--kd-section-py); } .kd-grid { display: grid; gap: var(--kd-gap); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .kd-stack > * + * { margin-top: var(--kd-gap); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .kd-skip-link { position: absolute; left: -9999px; top: 0; background: var(--kd-color-primary); color: var(--kd-color-primary-contrast); padding: var(--kd-space-2); z-index: 999; } .kd-skip-link:focus { left: 0; } /* --- przyciski --- */ .kd-btn, button, input[type="submit"], .button { display: inline-block; font-family: var(--kd-font-body); font-size: var(--kd-button-size); font-weight: var(--kd-button-weight, 700); text-transform: var(--kd-button-transform, none); letter-spacing: var(--kd-button-ls, 0); line-height: 1.2; /* 18/32 px zamiast 14/28: przycisk zszedl z 16 px pisma na 14 px wersalikow, wiec bez wiekszego wypelnienia zrobilby sie niski — a to nadal musi byc cel 40 px na telefonie. */ padding: 18px 32px; border: var(--kd-btn-border); border-radius: var(--kd-radius-button); background: var(--kd-btn-bg); color: var(--kd-btn-text); box-shadow: var(--kd-shadow-button); cursor: pointer; transition: background-color var(--kd-motion-fast) var(--kd-ease), box-shadow var(--kd-motion-fast) var(--kd-ease); } .kd-btn:hover, button:hover, input[type="submit"]:hover, .button:hover { background: var(--kd-btn-hover-bg); box-shadow: var(--kd-shadow-button-hover); text-decoration: none; color: var(--kd-btn-text); } /* Przycisk drugoplanowy to sam obrys w kolorze pisma — nigdy w kolorze akcentu, bo akcent ma zostac wylacznie przy cenie i odnosniku. */ .kd-btn--ghost { background: transparent; color: var(--kd-color-text); box-shadow: none; border: 1px solid var(--kd-color-border-strong, var(--kd-color-border)); } .kd-btn--ghost:hover { background: var(--kd-color-text); color: var(--kd-color-background); border-color: var(--kd-color-text); } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--kd-color-primary); outline-offset: 2px; } /* --- pola formularzy --- */ input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; font-family: inherit; font-size: var(--kd-body-size); color: var(--kd-input-text); background: var(--kd-input-bg); border: var(--kd-input-border); border-radius: var(--kd-radius-input); box-shadow: var(--kd-shadow-input); padding: 12px 14px; } input:focus, select:focus, textarea:focus { background: var(--kd-input-focus-bg); border-color: var(--kd-input-focus-border); box-shadow: var(--kd-shadow-input-focus); } /* Zgody i wybory: przegladarka rysuje kwadracik 13 px, a klientka celuje w niego kciukiem. Same pola robimy wieksze, a etykiecie dajemy pelny wiersz dotyku (WCAG 2.5.8). */ /* 24 px to minimum WCAG 2.5.8 (AA) dla samego pola. Wiekszego celu nie robimy tu, tylko w etykiecie — kwadrat 40 px obok zdania wyglada jak blad, a etykieta i tak jest klikalna. */ input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--kd-color-primary); cursor: pointer; } input:disabled, select:disabled, textarea:disabled, .kd-btn[disabled], button:disabled { opacity: .55; cursor: not-allowed; } /* --- pasek promocyjny --- */ /* * Pasek nie jest juz plaszczyzna w kolorze marki, tylko wierszem drobnego pisma nad naglowkiem. * Tlo i kolor pisma ida z wlasnych tokenow (`announce_bg`, `announce_text`), wiec kierunek * z ciemna oprawa dostaje grafit, a kierunki jasne — biel albo krem, bez dotykania arkusza. */ .kd-announce { background: var(--kd-color-announce-bg, var(--kd-color-background)); color: var(--kd-color-announce-text, var(--kd-color-text-muted)); border-bottom: 1px solid var(--kd-color-header-border, var(--kd-color-border)); text-align: center; font-size: var(--kd-label-size); font-weight: var(--kd-label-weight, 500); letter-spacing: var(--kd-label-ls, 0); text-transform: var(--kd-label-transform, none); /* Wysokosc paska daje teraz cel dotykowy w srodku, wiec wlasne wypelnienie pionowe znika — inaczej 40 px odnosnika i 2x8 px paska zsumowaloby sie do 56 px. */ padding: 0 var(--kd-gutter); min-height: 40px; display: flex; align-items: center; justify-content: center; } /* Wypelnienie pionowe na elemencie liniowym nie podnosi jego prostokata: wysokosc pudelka liniowego liczy sie z metryk fontu, a nie z `line-height` ani `padding`. Dlatego wczesniejsze `padding-block: 11px; line-height: 18px` dawalo w pomiarze 39 px, a nie 40. */ .kd-announce a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; } .kd-announce a:hover { text-decoration: underline; } /* --- naglowek --- */ /* * Naglowek dostaje wlasne tokeny koloru, bo to jedyne miejsce, w ktorym kierunek moze byc * ciemny przy jasnej tresci. Wszystko w srodku dziedziczy `currentColor` albo * `--kd-color-header-muted`, wiec odwrocenie oprawy nie wymaga ani jednej reguly wiecej. */ .kd-header { background: var(--kd-color-header-bg, var(--kd-color-background)); color: var(--kd-color-header-text, var(--kd-color-text)); border-bottom: 1px solid var(--kd-color-header-border, var(--kd-color-border)); position: sticky; top: 0; z-index: 100; } .kd-header__inner { display: flex; align-items: center; gap: var(--kd-gap); /* Wysokosc rzedu idzie za znakiem, nie odwrotnie: 60 px logo + 2x14 px powietrza. */ min-height: calc(var(--kd-logo-h) + var(--kd-space-4)); } .kd-header__logo { flex: none; display: flex; align-items: center; min-height: 44px; gap: var(--kd-space-1); text-decoration: none; color: inherit; } .kd-header__logo img { max-height: var(--kd-logo-h); width: auto; filter: var(--kd-logo-filter, none); } .kd-header__name { font-weight: 500; font-size: var(--kd-body-size); line-height: 1.15; letter-spacing: .02em; white-space: nowrap; } .kd-header--lean .kd-header__inner { justify-content: space-between; } .kd-header__secure { display: inline-flex; align-items: center; gap: 6px; margin: 0; margin-left: auto; font-size: var(--kd-body-sm-size); color: var(--kd-color-header-muted, var(--kd-color-text-muted)); } .kd-header__secure svg { width: 18px; height: 18px; flex: none; } .kd-header__back { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--kd-body-sm-size); color: var(--kd-color-header-muted, var(--kd-color-text-muted)); } .kd-header__nav { margin-left: auto; } .kd-header__actions { display: flex; align-items: center; gap: var(--kd-space-1); margin-left: auto; } .kd-header__nav ~ .kd-header__actions { margin-left: 0; } .kd-action { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--kd-radius-sm); } /* Przygaszenie zamiast zmiany koloru: to jedyny stan najechania, ktory dziala tak samo na jasnym i na ciemnym naglowku, wiec kierunek nie potrzebuje wlasnej reguly. */ .kd-action:hover { opacity: .6; } /* Kit Elementora (`.elementor-kit-5618 button`) jest bardziej specyficzny niz nasze klasy i maluje ikonowe przyciski na kolor akcentu. Do czasu wylaczenia Elementora trzeba go przebic. */ .kd-header__actions .kd-action, .kd-header .kd-burger, .kd-menu .kd-menu__expand { padding: 0; border: 0; background: none; box-shadow: none; } .kd-cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--kd-radius-pill); background: var(--kd-color-primary); color: var(--kd-color-text-on-primary); font-size: var(--kd-label-size); line-height: 18px; font-weight: 600; text-align: center; } .kd-cart-count:not(.is-filled) { display: none; } .kd-header__search { border-top: 1px solid var(--kd-color-header-border, var(--kd-color-border)); padding-block: var(--kd-space-2); } /* --- menu glowne --- */ .kd-menu { display: flex; gap: var(--kd-space-3); list-style: none; margin: 0; padding: 0; } .kd-menu__item { position: relative; } .kd-menu__link { display: flex; align-items: center; gap: 10px; padding: 12px 0; color: inherit; /* Skala przycisku, nie etykiety: etykieta ma 11 px, a to za malo na pozycje menu, w ktora trzeba trafic palcem. Wersaliki i rozstrzelenie zostaja z etykiety. */ font-size: var(--kd-button-size); font-weight: var(--kd-label-weight, 500); letter-spacing: var(--kd-label-ls, 0); text-transform: var(--kd-label-transform, none); text-decoration: none; } /* Podkreslenie wloskowate zamiast przemalowania na kolor akcentu — akcent na ciemnym naglowku nie wyrobilby progu kontrastu, a cienka kreska czyta sie tak samo w obie strony. */ .kd-menu__link:hover, .kd-menu__item.is-current > .kd-menu__link { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; } .kd-menu__expand { display: none; } .kd-menu__panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 640px; max-width: min(92vw, 900px); /* Rozwijana warstwa nalezy do oprawy, nie do tresci — bierze kolory naglowka, wiec przy kierunku z ciemnym paskiem opada ciemna, zamiast wycinac w nim biala dziure. */ background: var(--kd-color-header-bg, var(--kd-color-background)); color: var(--kd-color-header-text, var(--kd-color-text)); border: 1px solid var(--kd-color-header-border, var(--kd-color-border)); border-radius: var(--kd-radius-md); box-shadow: var(--kd-shadow-overlay); padding: var(--kd-space-3); visibility: hidden; opacity: 0; pointer-events: none; } .kd-menu__item--parent:hover > .kd-menu__panel, .kd-menu__item--parent:focus-within > .kd-menu__panel { visibility: visible; opacity: 1; pointer-events: auto; } .kd-menu__sub { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--kd-space-2); list-style: none; margin: 0; padding: 0; } /* Podmenu to nazwy kategorii, czesto dlugie — wersaliki i rozstrzelenie z pozycji glownej rozpychalyby je na dwa wiersze, wiec tu wracamy do pisma tresci. */ .kd-menu__sub .kd-menu__link { padding: 6px; border-radius: var(--kd-radius-sm); font-size: var(--kd-body-size); font-weight: 400; letter-spacing: 0; text-transform: none; } /* Podswietlenie z wlasnego koloru pisma, a nie z `surface`: jasna powierzchnia pod bialym napisem na ciemnym panelu zgasilaby go do zera. */ .kd-menu__sub .kd-menu__link:hover { background: color-mix(in srgb, currentColor 8%, transparent); } .kd-menu__thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--kd-radius-sm); flex: none; } .kd-menu__thumb--empty { display: block; } /* Znaki zodiaku to rysunek obrysem, a nie zdjecie: `padding` zostawia mu powietrze w tym samym kwadracie 40 px, w ktorym siedza miniatury, zeby wiersze w panelu trzymaly linie. */ .kd-menu__thumb--zodiac { box-sizing: border-box; padding: 3px; opacity: .85; } .kd-menu__link:hover .kd-menu__thumb--zodiac, .kd-menu__link:focus-visible .kd-menu__thumb--zodiac { opacity: 1; } /* --- hamburger --- */ .kd-burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: inherit; } .kd-burger__bars, .kd-burger__bars::before, .kd-burger__bars::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: var(--kd-radius-pill); } .kd-burger__bars { position: relative; margin: 0 auto; } .kd-burger__bars::before, .kd-burger__bars::after { content: ""; position: absolute; left: 0; } .kd-burger__bars::before { top: -7px; } .kd-burger__bars::after { top: 7px; } /* --- stopka --- */ .kd-footer { background: var(--kd-color-footer-bg, var(--kd-color-surface)); color: var(--kd-color-footer-text, var(--kd-color-text)); margin-top: var(--kd-section-py); padding-block: var(--kd-section-py); font-size: var(--kd-body-size); } /* Pas zapisu nad kolumnami: zdanie po lewej, formularz po prawej. Kreska pod spodem oddziela jedyne wezwanie w stopce od menu, ktore jest juz tylko nawigacja. */ .kd-footer__signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--kd-gap); align-items: start; padding-bottom: var(--kd-space-5); margin-bottom: var(--kd-space-5); border-bottom: 1px solid var(--kd-color-footer-border, var(--kd-color-border)); } .kd-footer__signup-text p { margin: 0; max-width: 42ch; color: var(--kd-color-footer-muted, var(--kd-color-text-muted)); } .kd-footer__cols { display: grid; gap: var(--kd-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Selektor musi byc mocniejszy niz `.kd h2` (0,1,1), inaczej naglowek kolumny stopki dostaje 29 px skali artykulu i konkuruje wzrokiem z tytulem strony. */ .kd .kd-footer__title, .kd-footer__title { font-family: var(--kd-font-body); font-size: var(--kd-label-size); font-weight: var(--kd-label-weight, 500); letter-spacing: var(--kd-label-ls, 0); text-transform: var(--kd-label-transform, none); line-height: 1.4; letter-spacing: 0; margin-bottom: var(--kd-space-2); } .kd-footer ul { list-style: none; margin: 0; padding: 0; } .kd-footer li + li { margin-top: 8px; } .kd-footer a { color: inherit; text-decoration: none; } .kd-footer a:hover { text-decoration: underline; text-underline-offset: 4px; } /* Odnosniki w stopce mialy 21 px wysokosci i 8 px odstepu — palec trafial w sasiada. Odstep przenosimy do wnetrza odnosnika, zeby cel rosl, a nie same przerwy. */ .kd-footer__col li a, .kd-footer__legal a { display: inline-flex; align-items: center; min-height: 40px; /* Krotkie pozycje („Sklep") mialy 38,5 px szerokosci — cel musi byc kwadratem 40 px. */ min-width: 40px; } .kd-footer__col li + li { margin-top: 0; } .kd-social li + li { margin-top: 0; } .kd-social { display: flex; gap: var(--kd-space-2); margin-top: var(--kd-space-3) !important; } .kd-social li + li { margin-top: 0; } .kd-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; /* Obrys i tlo z wlasnego koloru pisma — stopka moze byc jasna albo grafitowa, a krazek ma w obu przypadkach byc ledwie widoczna obwodka, nie biala plama. */ border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 50%; background: none; } .kd-social a:hover { border-color: currentColor; } .kd-footer__bottom { margin-top: var(--kd-space-4); padding-top: var(--kd-space-2); border-top: 1px solid var(--kd-color-footer-border, var(--kd-color-border)); color: var(--kd-color-footer-muted, var(--kd-color-text-muted)); display: flex; flex-wrap: wrap; gap: var(--kd-space-2); justify-content: space-between; align-items: center; } .kd-footer__legal { display: flex; flex-wrap: wrap; gap: var(--kd-space-3); } .kd-footer__legal li + li { margin-top: 0; } /* * Przycisk zapisu byl atramentowo-czarny — jedyny taki na calej stronie, bo wszedzie indziej * glowne wezwanie jest turkusowe. Wraca do akcentu marki (`.kd-btn` z main.css), zeby „zapisz sie" * czytalo sie jako to samo dzialanie co „dodaj do koszyka". * * Wczesniej reguly odwracaly go wzgledem tla stopki, bo grafit #121416 na grafitowym #14171A * dawal 1,05:1. Turkus #007575 z bialym pismem ma 5,52:1 niezaleznie od tla pod przyciskiem, * wiec odwracanie przestalo byc potrzebne. * * UWAGA na przyszlosc: nie da sie tu uzyc `background: currentColor`. `currentColor` czyta `color` * TEGO SAMEGO elementu, a ten jest w stopce ustawiony na kolor tla — przycisk wychodzil wtedy * grafitowy na graficie. */ /* Zgoda dziedziczyla szarosc tresci (#575D61) — na graficie 1,7:1. */ .kd-footer .kd-form__consent { color: var(--kd-color-footer-muted, var(--kd-color-text-muted)); } /* Komunikat po wyslaniu ma jasne tlo, wiec jego pismo musi wrocic do koloru tresci. */ .kd-footer .kd-form__note { color: var(--kd-color-text); } .kd-footer .kd-form__note--error { color: var(--kd-color-error); } /* --- tresc --- */ .kd-entry { padding-block: var(--kd-space-5); } .kd-entry__content > *:last-child { margin-bottom: 0; } /* Regulamin wkleja pelne adresy (uokik.gov.pl, ec.europa.eu) jako jeden nielamliwy wyraz — przy 390 px rozpychaly strone do 502 px. Lamiemy tylko to, czego nie da sie zlamac inaczej. */ .kd-entry__content { overflow-wrap: break-word; } .kd-entry__content a { overflow-wrap: anywhere; } /* Regulamin niesie z dawnego edytora `style="color:#3498db"` — obcy niebieski, ktory wychodzil takze na kasie (skrocony regulamin przy zgodzie). Kolor odnosnika nalezy do palety, nie do tresci. */ .kd-entry__content a[style*="color"], .woocommerce-terms-and-conditions a[style*="color"] { color: var(--kd-color-secondary) !important; } /* Ta sama spuscizna niesie inline `color:#888` przy 13 px („Ostatnia aktualizacja") — 3,54:1, ponizej progu 4,5:1. Szary z palety trzyma 6,1:1 i wyglada tak samo. */ .kd-entry__content [style*="color: #888"], .kd-entry__content [style*="color:#888"], .kd-entry__content [style*="color: #999"], .kd-entry__content [style*="color:#999"] { color: var(--kd-color-text-muted) !important; } /* Tabela wklejona w tresc ma szerokosc minimalna, ktorej nie da sie zbic ponizej sumy kolumn: czterokolumnowa tabela twardosci na `/jak-dbac-o-kamienie/` mierzy 377 px i przy 390 px rozpychala cala strone w bok. `display: block` robi z niej wlasne okno przewijania, wiec przewija sie sama tabela, a nie dokument. Zakres celowo `.kd-entry__content`, a nie `.kd-entry` — koszyk i kasa tez stoja na tabelach, a te maja wlasny uklad. ⚠️ `width` musi zostac `auto`. Pierwsza wersja miala `max-content` i dzialala tylko dopoty, dopoki tabela stala w kontenerze o znanej szerokosci: jawne `max-content` jest brane takze jako *minimalny* wklad tresci, a `max-width: 100%` przy liczeniu rozmiaru wewnetrznego jest pomijane. W komorce siatki `1fr` — tak stoja tabele wlasciwosci na `/ametyst/` i `/turmalin/` — komorka rozpychala sie do 478 px w oknie 390 px. Przy `auto` tabela wypelnia kontener, a nadmiar przewija sie w niej. ⚠️ `:not(.shop_table)` dopisane 16.08: zdanie wyzej o wylaczeniu koszyka i kasy bylo ZALOZENIEM, nie faktem. Obie te tabele siedza w `.kd-entry__content`, wiec od N13 chodzily jako `display: block` z wlasnym oknem przewijania — zmierzone na stagingu (`display: block` przy 350 i 400 px szerokosci). Tabela podsumowania ma dwie kolumny i miesci sie w kazdym oknie, wiec okno przewijania bylo tam niepotrzebne, a `display: block` psulo zaokraglone rogi, ktore dostaje teraz w `checkout.css`. */ .kd-entry__content table:not(.shop_table) { display: block; width: auto; max-width: 100%; overflow-x: auto; } /* Strony przeniesione z Elementora niosa wlasny uklad i wlasne marginesy. */ .kd-entry--full { padding-block: 0; } /* Tytul wyniku wyszukiwania i wpisu na liscie to caly odnosnik naglowka. Wysokosc brala sie wylacznie z interlinii, wiec zalezala od kroju — po zamianie Poppins na DM Sans spadla do 34 px. Podpiete pod `min-height`, tak samo jak okruszki. */ .kd-entry__item > h2 > a, .kd-entry__body > h2 > a { display: inline-flex; align-items: center; min-height: 40px; } /* Wynik wyszukiwania: kadr z lewej, tresc z prawej. `align-items: start` trzyma zdjecie przy gornej krawedzi, gdy zajawka ma trzy wiersze, a sasiedni wynik jeden. */ .kd-entry__item:has(.kd-entry__thumb) { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--kd-space-3); align-items: start; } .kd-entry__thumb { display: block; border-radius: var(--kd-radius-sm); overflow: hidden; background: var(--kd-color-surface); } .kd-entry__thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } .kd-entry__body > *:last-child { margin-bottom: 0; } .kd-entry__price { margin: 0 0 var(--kd-space-1); font-weight: 600; color: var(--kd-color-text); } /* * Zajawka produktu to krotki opis z Woo, a stron — pierwszy akapit tresci. Przy 390 px pierwszy * wynik zajmowal caly ekran (dziewiec wierszy), wiec drugiego nie bylo widac bez przewijania. * Trzy wiersze wystarcza, zeby rozpoznac temat; reszte czyta sie juz na docelowej stronie. * Obciecie jest wizualne — pelny tekst zostaje w kodzie strony dla wyszukiwarek. */ .kd-entry__excerpt > p { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .kd-entry__excerpt > p ~ p { display: none; } /* Cena przekreslona przy promocji przychodzi z Woo jako `` — ta sama skladnia co w siatce. */ .kd-entry__price del { font-weight: 400; color: var(--kd-color-text-muted); } .kd-entry__price ins { text-decoration: none; color: var(--kd-color-accent); } @media (max-width: 600px) { .kd-entry__item:has(.kd-entry__thumb) { grid-template-columns: 72px minmax(0, 1fr); gap: var(--kd-space-2); } } .kd-breadcrumbs { font-size: var(--kd-body-sm-size); color: var(--kd-color-text-muted); padding-block: var(--kd-space-2); } /* Jak w pasku promocyjnym: wypelnienie odnosnika liniowego powieksza cel bez zmiany ukladu. `padding` liczony od wysokosci wiersza daje inny wynik przy kazdym kroju — DM Sans wychodzil 38 px. Cel dotykowy podpiety pod `min-height`, wiec nie zalezy juz od pisma. */ /* Szerokosc pilnujemy tak samo: najkrotszy okruszek to nazwa kategorii wpisu („Turkus" — 34 px na telefonie). Pole rosnie w prawo, a na telefonie kontener i tak ma `overflow: hidden`, wiec dolozone piksele nie moga wypchnac strony w bok. */ /* ⚠️ Okruszki nie biora akcentu. Sciezka powrotu to nawigacja, a nie wezwanie — turkusowe „Strona główna" bylo na archiwum jedynym kolorowym napisem nad siatka produktow. Zostaje kolor tekstu drugorzednego i podkreslenie przy najechaniu. */ .kd-breadcrumbs a { color: var(--kd-color-text-muted); } .kd-breadcrumbs a { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 40px; min-width: 44px; } /* Na telefonie okruszki produktu schodzily na trzy wiersze — 75 px zabrane zdjeciu, zeby powtorzyc nazwe, ktora i tak stoi w naglowku pod spodem. Zwijamy je do jednego wiersza z wielokropkiem. Znaczniki zostaja w calosci: czytnik ekranu ma pelna sciezke, a dane strukturalne robi Rank Math. */ @media (max-width: 767px) { .kd-breadcrumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--kd-caption-size); } } /* Paginacja wpisow (`the_posts_pagination`) nie miala zadnych stylow — numery mialy 30 px. */ .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--kd-gap); } .kd-404__back { margin-top: var(--kd-space-3); } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border-radius: var(--kd-radius-sm); background: var(--kd-color-surface); color: var(--kd-color-text); font-weight: 500; text-decoration: none; } /* ⚠️ Numer biezacej strony NIE jest akcja, wiec nie bierze akcentu. Byl pelnym turkusowym kwadratem, czyli najmocniejszym kolorem na calym archiwum — mocniejszym niz cokolwiek, co prowadzi do zakupu (zmierzone 21.09.2026 na `sklep-mobile-full.png`). Teraz mowi „tu jestes" ciemnym tlem i grubsza kreska. Najechanie zostaje bez akcentu z tego samego powodu: to nawigacja po liscie, nie wezwanie. */ .pagination .page-numbers.current { background: var(--kd-color-text); color: var(--kd-color-background); font-weight: 600; } .pagination a.page-numbers:hover { background: var(--kd-color-surface-deep); color: var(--kd-color-text); } /* --- strona glowna --- */ /* Nadkreslnik sekcji ma wlasna role `eyebrow`, nie pozyczona `label`. To dwie rozne rzeczy: `label` opisuje element interfejsu (plakietka, znacznik), `eyebrow` zapowiada naglowek i u wszystkich czterech konkurentow jest wyraznie wiekszy i mocniej rozstrzelony. */ .kd-eyebrow, .kd-hero__eyebrow { font-family: var(--kd-eyebrow-family, var(--kd-font-body)); font-size: var(--kd-eyebrow-size); font-weight: var(--kd-eyebrow-weight, 500); letter-spacing: var(--kd-eyebrow-ls, 1.8px); line-height: var(--kd-eyebrow-lh, 1.2); text-transform: var(--kd-eyebrow-transform, uppercase); color: var(--kd-color-text-muted); margin: 0 0 var(--kd-space-2); } /* * Hero nie ma juz miatowego tla. Pierwszy ekran to bialy arkusz, na ktorym stoi tylko * naglowek i zdjecie towaru — kolor ma przyjsc ze zdjecia, nie z plaszczyzny pod nim. * Domkniecie od dolu robi wloskowata linia, a nie zmiana tla. */ .kd-hero { background: var(--kd-color-background); border-bottom: 1px solid var(--kd-color-border); padding-block: var(--kd-section-py-lg); text-align: center; } .kd-hero__title { margin: 0 0 var(--kd-space-3); } .kd-hero__lead { max-width: 46rem; margin: 0 auto var(--kd-space-4); color: var(--kd-color-text-muted); font-size: var(--kd-h4-size); } .kd-hero__cta { margin: 0; } /* Naglowek ze zdjeciem bestsellera: na telefonie zdjecie stoi miedzy leadem a przyciskiem, zeby zmiescilo sie na pierwszym ekranie — to jedyny sposob, zeby klientka od razu zobaczyla towar, a nie sam tekst. */ .kd-hero--split { text-align: left; } .kd-hero--split .kd-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--kd-space-5); align-items: center; } .kd-hero--split .kd-hero__lead { margin-inline: 0; } /* Zdjecie bestsellera bylo „karta" z zaokraglonym rogiem i wlasnym tlem — czyli kaflem szablonu. Teraz to sam kadr: bez ramki, bez tla, ewentualne zaokraglenie tylko takie, jakie niesie kierunek. */ .kd-hero__media { position: relative; display: block; border-radius: var(--kd-radius); overflow: hidden; text-decoration: none; color: inherit; } .kd-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .kd-hero__tag { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kd-space-2); padding: var(--kd-space-2); font-size: var(--kd-body-size); } .kd-hero__tag strong { font-weight: 500; } .kd-hero__price { font-family: var(--kd-price-family, var(--kd-font-heading)); font-size: var(--kd-price-size); font-weight: var(--kd-price-weight, 500); /* ⚠️ Cena NIGDY nie jest akcentowa — DESIGN.md §1: „cena zawsze tym samym krojem i w tym samym kolorze, kolor `text`". W hero turkusowa cena byla drugim elementem w kolorze akcji, obok przycisku, na najcenniejszym ekranie sklepu. */ color: var(--kd-color-text); white-space: nowrap; } .kd-hero__price del { display: none; } .kd-hero__media:hover .kd-hero__price { text-decoration: underline; } /* Naglowki sekcji stoja na tej samej osi co hero i siatka produktow — do lewej. Wysrodkowane ciagnely wzrok na srodek strony i wracaly nad kazda sekcja, przez co strona czytala sie jak lista blokow, a nie jak jeden ciag. Nadkreslnik (`kd-eyebrow`) jest teraz nad kazda sekcja. */ .kd-home__heading { text-align: left; margin-bottom: var(--kd-space-3); } .kd-home__lead { max-width: 46rem; margin: 0 0 var(--kd-space-4); color: var(--kd-color-text-muted); } .kd-about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kd-space-5); align-items: center; } .kd-about__media img { width: 100%; height: auto; border-radius: var(--kd-radius); } /* * Trzy sprawdzalne liczby przy historii marki. Zastapily sekcje „Dlaczego my" z trzema kaflami, * w ktorych bylo dziewiec przymiotnikow i zero informacji. Kreska nad kazda pozycja zamiast * ramki — ten sam zabieg co na liscie intencji nizej. */ .kd-about__facts { list-style: none; margin: var(--kd-space-3) 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kd-space-3); } .kd-about__facts li { border-top: 1px solid var(--kd-color-border); padding-top: var(--kd-space-2); } .kd-about__facts strong { display: block; font-size: var(--kd-h3-size); font-weight: var(--kd-h3-weight); line-height: 1.2; } .kd-about__facts span { display: block; margin-top: 2px; font-size: var(--kd-caption-size); color: var(--kd-color-text-muted); } /* --- wybor po intencji --- */ /* * Zamiast szesciu kart z ramka i cieniem — szesc pozycji na tle strony, rozdzielonych sama * wloskowata linia. Ten sam zabieg co przy karcie produktu: towar (albo wybor) stoi na tym * samym tle co reszta strony, a porzadek robi odstep, nie pudelko. */ .kd-intentions__title { margin-bottom: var(--kd-space-1); } .kd-intentions__lead { max-width: 46rem; margin: 0 0 var(--kd-space-5); color: var(--kd-color-text-muted); } .kd-intentions__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--kd-color-border); border-block: 1px solid var(--kd-color-border); } /* Kafle stoja na wloskowatej siatce: `gap: 1px` na tle koloru ramki rysuje linie miedzy pozycjami bez ani jednej dodatkowej reguly na obramowania i bez podwojnych kresek. */ .kd-intentions__grid > li { background: var(--kd-color-background); } .kd-intention { display: block; padding: var(--kd-space-4); color: inherit; text-decoration: none; transition: background var(--kd-motion-fast) var(--kd-ease); } .kd-intention:hover { background: var(--kd-color-surface); } .kd-intention__icon { display: block; width: 36px; height: 36px; margin-bottom: var(--kd-space-2); stroke: var(--kd-color-accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .kd-intention__name { display: block; font-size: var(--kd-body-size); font-weight: 500; margin-bottom: 4px; } .kd-intention:hover .kd-intention__name { text-decoration: underline; text-underline-offset: 3px; } .kd-intention__desc { display: block; font-size: var(--kd-body-sm-size); line-height: 1.5; color: var(--kd-color-text-muted); } @media (max-width: 782px) { .kd-about { grid-template-columns: 1fr; } .kd-about__media { order: -1; margin: 0; } .kd-about__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kd-space-2); } } @media (max-width: 767px) { /* Dwie kolumny i bez zdan opisowych: szesc kart z opisem to bylo 6 x 150 px przewijania za informacje, ktora niesie juz sama nazwa intencji. Tekst zostaje w kodzie dla czytnika. */ .kd-intentions__grid { grid-template-columns: repeat(2, 1fr); } .kd-intention { padding: var(--kd-space-3) var(--kd-space-2); } .kd-intention__icon { width: 28px; height: 28px; margin-bottom: var(--kd-space-1); } .kd-intention__name { font-size: var(--kd-body-size); margin-bottom: 0; } .kd-intention__desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* --- kontakt i zapis do newslettera --- */ .kd-contact__lead { max-width: 46rem; color: var(--kd-color-text-muted); } .kd-contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--kd-space-5); margin-top: var(--kd-space-5); } .kd-contact__details h3 { font-size: var(--kd-body-size); margin: var(--kd-space-4) 0 var(--kd-space-1); } .kd-contact__list { list-style: none; margin: 0; padding: 0; } .kd-contact__list li { padding-block: 2px; } .kd-contact__form { background: var(--kd-color-surface); border-radius: var(--kd-radius); padding: var(--kd-space-4); } .kd-contact__map iframe { display: block; border-radius: var(--kd-radius); } .kd-signup { text-align: center; } .kd-signup__lead { max-width: 42rem; margin: 0 auto var(--kd-space-3); color: var(--kd-color-text-muted); } /* Bylo wypelnione plaszczyzna w kolorze marki. Rabat to informacja, nie plakietka — wystarczy wersalik w kolorze akcentu nad naglowkiem. */ .kd-signup__badge { display: inline-block; margin: 0 0 var(--kd-space-2); padding: 0; background: none; color: var(--kd-color-accent, var(--kd-color-primary)); font-size: var(--kd-label-size); font-weight: var(--kd-label-weight, 500); letter-spacing: var(--kd-label-ls, 0); text-transform: var(--kd-label-transform, none); } .kd-signup__note { font-size: var(--kd-caption-size); color: var(--kd-color-text-muted); } .kd-signup__form { max-width: 34rem; margin: var(--kd-space-4) auto 0; padding: var(--kd-space-4); background: var(--kd-color-surface); border-radius: var(--kd-radius); text-align: left; } .kd-signup__form h2 { text-align: center; } .kd-signup__form > p { text-align: center; color: var(--kd-color-text-muted); } @media (max-width: 782px) { .kd-contact__grid { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .kd-container { max-width: var(--kd-container-tablet); } } /* Na telefonie sam znak graficzny zlewa sie w plamke — nazwa marki lamie sie na dwie linie, bo w rzedzie 390 px stoja juz burger i trzy przyciski po 44 px. */ @media (max-width: 560px) { /* Wysokosc rzedu i znaku ida z tokenow (`components.logo.height_mobile_px`) — tutaj zostaje tylko to, czego token nie opisze: sciesniony odstep i lamanie nazwy marki. */ /* Pasek lamal sie na dwa wiersze: 47 znakow wersalikami z trackingiem 1,6 px nie miesci sie w 350 px. Sciesnienie trackingu odzyskuje ~40 px szerokosci i pasek wraca do jednego wiersza. */ .kd-announce { font-size: var(--kd-label-size); letter-spacing: .06em; padding-inline: var(--kd-space-1); } .kd-header__inner { gap: var(--kd-space-1); } .kd-header__logo { gap: 6px; } .kd-header__name { font-size: var(--kd-body-sm-size); white-space: normal; max-width: 6.5em; line-height: 1.12; } .kd-header__actions { gap: 0; } /* W kasie rzad musi pomiescic nazwe marki, powrot i znaczek platnosci — z trojki ustepuje napis przy klodce. Tekst zostaje w kodzie, wiec czytnik ekranu nadal go przeczyta. */ .kd-header__secure span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .kd-header__back { font-size: var(--kd-caption-size); } } @media (max-width: 1024px) { .kd-burger { display: inline-flex; align-items: center; justify-content: center; } .kd-header__logo { margin-right: auto; } .kd-header__nav { display: none; position: absolute; inset: 100% 0 auto 0; max-height: calc(100dvh - var(--kd-logo-h) - var(--kd-space-4)); overflow-y: auto; background: var(--kd-color-header-bg, var(--kd-color-background)); color: var(--kd-color-header-text, var(--kd-color-text)); border-bottom: 1px solid var(--kd-color-header-border, var(--kd-color-border)); padding: var(--kd-gutter); margin-left: 0; } .kd-header__nav.is-open { display: block; } .kd-menu { flex-direction: column; gap: 0; } .kd-menu__item { border-bottom: 1px solid var(--kd-color-header-border, var(--kd-color-border)); } .kd-menu__item--parent { display: grid; grid-template-columns: 1fr auto; align-items: center; } .kd-menu__link { padding: 14px 0; } .kd-menu__expand { display: block; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; color: inherit; } .kd-menu__expand::before, .kd-menu__expand::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; } .kd-menu__expand::after { transform: rotate(90deg); } .kd-menu__expand[aria-expanded="true"]::after { transform: rotate(0); } .kd-menu__panel { grid-column: 1 / -1; position: static; transform: none; min-width: 0; max-width: none; border: 0; box-shadow: none; padding: 0 0 var(--kd-space-2) var(--kd-space-2); display: none; visibility: visible; opacity: 1; pointer-events: auto; } .kd-menu__item--parent:hover > .kd-menu__panel { display: none; } .kd-menu__panel.is-open, .kd-menu__item--parent:hover > .kd-menu__panel.is-open { display: block; } .kd-menu__sub { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 767px) { /* Rytm pionowy na telefonie schodzi z tokena `section_py_mobile_px`, a nie z reguly tutaj — inaczej zmiana kierunku nie ruszalaby odstepow na 84% ruchu. */ /* Dwie kolumny, nie jedna. Cztery listy jedna pod druga to bylo 1 200 px samej stopki — a odnosniki maja po 40 px celu, wiec obok siebie nadal mieszcza sie palcem. */ .kd-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Kolumna kontaktowa idzie przez cala szerokosc: adres e-mail ma 26 znakow i w polowie z 390 px wchodzil na sasiednia kolumne („kontakt@kamienieduchowe.plSklep"). */ .kd-footer__cols > .kd-footer__col:first-child { grid-column: 1 / -1; } .kd-footer__col li a { overflow-wrap: anywhere; } .kd-footer__signup { grid-template-columns: 1fr; gap: var(--kd-space-3); padding-bottom: var(--kd-space-4); margin-bottom: var(--kd-space-4); } .kd-hero--split .kd-hero__inner { display: flex; flex-direction: column; gap: var(--kd-space-3); } /* `display: contents` rozpuszcza pojemnik tekstu, zeby zdjecie mozna bylo wsunac miedzy lead a przycisk bez dublowania znacznikow. */ .kd-hero--split .kd-hero__text { display: contents; } .kd-hero--split .kd-hero__eyebrow { order: 1; margin-bottom: 0; } .kd-hero--split .kd-hero__title { order: 2; margin-bottom: 0; } .kd-hero--split .kd-hero__lead { order: 3; margin-bottom: 0; font-size: var(--kd-body-size); } .kd-hero--split .kd-hero__media { order: 4; } .kd-hero--split .kd-hero__cta { order: 5; } .kd-hero--split .kd-hero__cta .kd-btn { display: block; text-align: center; } .kd-hero--split .kd-hero__media img { aspect-ratio: 4 / 3; } } /* --- ograniczony ruch: jedna regula na caly sklep --- Arkusze modulow mialy wlasne wyjatki w trzech miejscach na dziewiec plikow z animacjami, wiec „szanujemy ustawienie systemu" bylo prawda tylko na szufladzie koszyka i pasku wysylki. `!important` jest tu konieczny: arkusze modulow laduja sie PO tym pliku, a zwykla regula o tej samej wadze przegralaby kolejnoscia. Czasy schodza do 0,01 ms zamiast do zera, bo zdarzenie `transitionend` przy czasie 0 w ogole nie pada i kod czekajacy na koniec przejscia (zamkniecie szuflady) zawisnalby. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* --- nawigacja wizualna: kafle, pigulki, przejscia boczne (21.09.2026) --- Powod i zrodlo danych: `inc/nav-visual.php`. Tu jest tylko warstwa wizualna. */ /* Pas w kolorze `surface` na calej szerokosci. Wlasnego marginesu nie ma: sasiad ma juz `--kd-section-py` od dolu i dwa naraz dawaly 288 px pustki miedzy sekcjami. */ .kd-band { background: var(--kd-color-surface); padding-block: var(--kd-section-py); margin-block: 0; } .kd-tiles { display: grid; grid-template-columns: repeat(var(--kd-tiles-cols, 3), minmax(0, 1fr)); gap: var(--kd-grid-gap); margin: 0; padding: 0; list-style: none; } .kd-tiles--3 { --kd-tiles-cols: 3; } .kd-tiles--5 { --kd-tiles-cols: 5; } .kd-tiles--6 { --kd-tiles-cols: 6; } .kd-tile__link { display: block; color: inherit; text-decoration: none; } /* Kadr jest ten sam dla kazdego kafla: to on scala rzad w kolekcje, mimo ze tla samych zdjec roznia sie o 215 poziomow jasnosci (zmierzone w jednym rzedzie). Zdjec produktow nie ruszamy. */ .kd-tile__media { display: block; position: relative; aspect-ratio: var(--kd-product-ratio); overflow: hidden; border-radius: var(--kd-radius-md); background: var(--kd-color-background); } .kd-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--kd-motion-base) var(--kd-ease); } .kd-tile__link:hover .kd-tile__media img { transform: scale(1.03); } .kd-tile__body { display: block; padding-top: var(--kd-space-1); } .kd-tile__name { display: block; font-size: var(--kd-body-size); font-weight: 500; line-height: 1.3; } .kd-tile__count { display: block; margin-top: 2px; font-size: var(--kd-caption-size); color: var(--kd-color-text-muted); } .kd-tile__link:focus-visible { outline: 2px solid var(--kd-color-primary); outline-offset: 3px; border-radius: var(--kd-radius-md); } /* Nazwa znaku zodiaku to jedno slowo i kafel jest o polowe wezszy — etykieta schodzi o stopien. */ .kd-tiles--zodiac .kd-tile__name { font-size: var(--kd-body-sm-size); } @media (max-width: 767px) { /* Dwie kolumny, nie jedna: kolumna jednoelementowa zamienia siatke w liste i wydluza strone dwukrotnie. Zodiak dostaje trzy, bo kafel to jedno slowo. */ .kd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kd-grid-gap); } .kd-tiles--zodiac { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- przejscia boczne pod siatka produktow --- */ .kd-crossnav { margin-top: var(--kd-space-5); padding-top: var(--kd-space-4); border-top: 1px solid var(--kd-color-border); } .kd-crossnav__row + .kd-crossnav__row { margin-top: var(--kd-space-4); } .kd-crossnav__title { margin: 0 0 var(--kd-space-2); font-size: var(--kd-h4-size); font-weight: var(--kd-h4-weight); line-height: 1.3; } .kd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .kd-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; font-size: var(--kd-body-sm-size); color: var(--kd-color-text); text-decoration: none; background: var(--kd-color-background); border: 1px solid var(--kd-color-border); border-radius: var(--kd-radius-pill); transition: border-color var(--kd-motion-fast) var(--kd-ease), background-color var(--kd-motion-fast) var(--kd-ease); } .kd-chip span { color: var(--kd-color-text-muted); font-size: var(--kd-caption-size); } .kd-chip:hover { border-color: var(--kd-color-border-strong); background: var(--kd-color-surface); } .kd-chip:focus-visible { outline: 2px solid var(--kd-color-primary); outline-offset: 2px; } /* --- zdjecie w naglowku kategorii --- Kadr 3:2 i maksimum 420 px szerokosci: mediana szerokosci pliku zdjecia produktu to 1 024 px, wiec przy ekranie retina wszystko powyzej ~600 px CSS zaczyna byc rozmyte. */ .kd-shop-hero--media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: var(--kd-space-4); } .kd-shop-hero__media { border-radius: var(--kd-radius-md); overflow: hidden; background: var(--kd-color-surface); } .kd-shop-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } @media (max-width: 1024px) { .kd-shop-hero--media { grid-template-columns: 1fr; gap: var(--kd-space-3); } /* Na waskim ekranie zdjecie kategorii nie jest informacja, tylko 260 px miedzy tytulem a pierwszym produktem. Tytul, jedno zdanie i towar. */ .kd-shop-hero__media { display: none; } } /* ---- Stopka: kolumny zwijane na telefonie (patrz `kd_footer_menu_block()`) ---- */ .kd-footer__summary { list-style: none; cursor: default; } .kd-footer__summary::-webkit-details-marker { display: none; } .kd-footer__summary > .kd-footer__title { margin-bottom: var(--kd-space-2); } /* `display: contents` zdejmuje z summary wlasne pudelko, wiec na pulpicie kolumna wyglada dokladnie tak jak przed zmiana — naglowek i lista, bez sladu po elemencie rozwijanym. */ @media (min-width: 768px) { .kd-footer__col--menu > .kd-footer__summary { display: contents; } } @media (max-width: 767px) { .kd-footer__col--menu { grid-column: 1 / -1; } .kd-footer__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--kd-space-2); min-height: 44px; cursor: pointer; border-top: 1px solid var(--kd-color-footer-border, var(--kd-color-border)); } .kd-footer__summary > .kd-footer__title { margin-bottom: 0; } /* Strzalka rysowana bordiurami: zero dodatkowych zadan i zero znaku spoza kroju (Poppins nie ma U+2190-2193, pulapka z N21). */ .kd-footer__summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--kd-motion-fast, 160ms) var(--kd-ease, ease); flex: none; } .kd-footer__col--menu[open] > .kd-footer__summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .kd-footer__col--menu[open] > .kd-footer__list { padding-bottom: var(--kd-space-3); } } /* --- zaslona mapy Google (znacznik z `inc/blog.php`, obsluga w `main.js`) --- */ /* Pudelko jest CELOWO nizsze od mapy (200 px zamiast 420): pusty prostokat wielkosci mapy wyglada na blad ladowania. Przesuniecie tresci po klikniecu nie liczy sie do CLS, bo nastepuje po dzialaniu klientki. */ .kd-mapa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kd-space-3); min-height: 200px; padding: var(--kd-space-4); border: 1px solid var(--kd-color-border); border-radius: var(--kd-radius-md); background: var(--kd-color-surface); text-align: center; } .kd-mapa__info { margin: 0; max-width: 46ch; color: var(--kd-color-text-muted); font-size: var(--kd-body-sm-size); } .kd-mapa__akcje { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--kd-space-3); margin: 0; } /* Cel dotykowy: odnosnik obok przycisku musi miec te same 44 px wysokosci, a interlinia sama ich nie da (pulapka z Etapu C). */ .kd-mapa__link { display: inline-flex; align-items: center; min-height: 44px; } /* Po klikniecu pudelko oddaje cala przestrzen ramce. */ .kd-mapa--otwarta { display: block; min-height: 0; padding: 0; overflow: hidden; } .kd-mapa__ramka { display: block; width: 100%; height: var(--kd-mapa-h, 420px); border: 0; }