@font-face{font-family:"Lora";src:url("../fonts/Lora.woff2") format("woff2-variations"),
  url("../fonts/Lora.woff2") format("woff2");font-weight:400 700;font-display:swap;font-style:normal}
@font-face{font-family:"Mulish";src:url("../fonts/Mulish.woff2") format("woff2-variations"),
  url("../fonts/Mulish.woff2") format("woff2");font-weight:400 700;font-display:swap;font-style:normal}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.65}
h1,h2,h3{font-family:var(--f-display);font-weight:500;letter-spacing:-.02em;line-height:1.12;margin-top:0}
a{color:var(--ink)}
a:hover{color:var(--muted)}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}

.fr-wrap{max-width:1440px;margin:0 auto;padding-inline:var(--gut)}
.fr-main{min-height:40vh}

.fr-skip{position:absolute;left:-9999px}
.fr-skip:focus{left:8px;top:8px;background:var(--ink);color:var(--ivory);padding:10px 14px;z-index:100}

.fr-header__inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.fr-logo{font-family:var(--f-display);font-size:21px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.fr-menu{list-style:none;display:flex;gap:34px;margin:0;padding:0;font-size:15px}
.fr-menu a{text-decoration:none}
.fr-menu .current-menu-item > a{font-weight:700;border-bottom:2px solid var(--ink);padding-bottom:2px}

/* Rozwijane podmenu w naglowku.
   Bez JavaScriptu, na :hover i :focus-within, zeby dzialalo tez
   z klawiatury i zeby nie wisialo na skrypcie, ktory moze nie dojsc.
   „Sklep" prowadzi do prawdziwej strony sklepu, wiec na dotyku, gdzie
   najechania nie ma, klikniecie po prostu tam idzie. Kategorie sa
   wtedy na tamtej stronie i w menu rozwijanym hamburgerem. */
.fr-header .fr-nav{align-self:stretch}
.fr-header .fr-menu{height:100%;align-items:center}
.fr-header .fr-menu > li{position:relative;height:100%;display:flex;align-items:center}
.fr-header .fr-menu .sub-menu{list-style:none;margin:0;padding:8px 0;
  position:absolute;top:100%;left:-18px;z-index:60;min-width:238px;
  background:var(--ivory);border:1px solid var(--line);
  opacity:0;visibility:hidden}
.fr-header .fr-menu > li:hover > .sub-menu,
.fr-header .fr-menu > li:focus-within > .sub-menu{opacity:1;visibility:visible}
.fr-header .fr-menu .sub-menu a{display:block;padding:9px 18px;line-height:1.4}
.fr-header .fr-menu .sub-menu a:hover,
.fr-header .fr-menu .sub-menu a:focus{background:var(--tint)}
.fr-header .fr-menu .sub-menu .current-menu-item > a{font-weight:700;border-bottom:0;padding-bottom:9px}
/* Strzalka mowi, ze pod pozycja cos jest. Bez niej nikt tam nie zajrzy. */
.fr-header .fr-menu > .menu-item-has-children > a::after{content:"";display:inline-block;
  width:6px;height:6px;margin-left:7px;vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg)}

/* Stopka z makiety: jeden rzad, kreska u gory, tlo strony.
   Bez tla, bez logo, bez paska z prawami autorskimi. */
.fr-footer{border-top:1px solid var(--line);margin-top:56px}
.fr-footer__inner{padding-block:40px 56px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:20px 40px}
/* Zdanie po lewej jest elementem, ktory ustepuje. Gdyby trzymalo
   pelna szerokosc, przy piatym odnosniku caly rzad lamal sie na dwa
   i odnosniki ladowaly pod spodem, przy lewej krawedzi. Lamie sie
   wiec tekst, a uklad zostaje taki jak na makiecie. */
.fr-footer__note{flex:1 1 240px;max-width:52ch;margin:0;
  font-size:15px;line-height:1.6;color:var(--muted)}
.fr-footer__linki{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:flex-end;gap:20px 30px}
.fr-footer .fr-menu{flex-direction:row;flex-wrap:wrap;gap:30px;font-size:15px}
.fr-footer .fr-menu a{color:var(--muted)}
.fr-footer .fr-menu a:hover{color:var(--ink)}
/* Pozycje drugiego poziomu wchodza do tego samego rzedu zamiast
   rysowac zagniezdzona liste. Menu stopki jest plaskie z zalozenia,
   ale wpis dodany przez pomylke ma sie pokazac, a nie zniknac. */
.fr-footer .fr-menu .sub-menu{list-style:none;margin:0;padding:0;display:contents}
.fr-social .fr-menu{flex-direction:row;gap:10px}
.fr-social .fr-menu a{display:inline-flex;align-items:center;height:40px;
  padding-inline:16px;background:var(--stone);color:var(--ink);font-weight:600}

.fr-btn{display:inline-flex;align-items:center;justify-content:center;height:56px;
  padding-inline:30px;background:var(--ink);color:var(--ivory);
  text-decoration:none;font-size:17px;font-weight:700;border:0;cursor:pointer}
.fr-btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);font-weight:600}

/* Hamburger istnieje w kodzie strony, ale pokazuje sie dopiero wtedy,
   gdy JavaScript podpial pod niego otwieranie. Bez tego telefon bez JS
   zostalby z przyciskiem, ktory nic nie robi, i bez nawigacji. */
.fr-burger{display:none}

/* Sekcje tresci.
   Te reguly stoja w base.css, a nie w product.css, bo te same sekcje
   sa uzywane na stronie glownej, na sklepie i na 404. Kiedy siedzialy
   w product.css, strona glowna dostawala dziewiec rozdzialow bez tla
   i bez odstepu 76 px, sklejonych w jedna plachte. Zadnego bledu,
   wszystko widoczne, tylko plasko. Pilnuje tego regula 43. */
.fr-band{padding-block:76px}
.fr-band--tint{background:var(--tint)}

.fr-band--ciemny{background:var(--ink);color:var(--ivory)}

.fr-split{display:grid;grid-template-columns:1fr 1.3fr;gap:72px;align-items:start}
.fr-split h2{margin:0;font-size:40px}
.fr-split p{margin:0 0 18px;font-size:18px;line-height:1.7;color:var(--muted)}
.fr-split p:last-child{margin-bottom:0}
.fr-split strong{color:var(--ink)}

.fr-team__inner{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
.fr-team__title{margin:0 0 14px;font-size:34px}
.fr-team p{margin:0 0 12px;font-size:18px;line-height:1.7;color:var(--muted)}
.fr-team__actions{display:flex;flex-direction:column;gap:14px}

/* Naglowek sekcji. Tez wspolny: sklep uzywa go w „Najczesciej
   kupowane", a arkusz strony glownej tam nie wchodzi. */
.fr-sekcja__title{margin:0 0 14px;font-family:var(--f-display);font-size:38px;
  font-weight:500;letter-spacing:-.02em;line-height:1.12}
.fr-sekcja__lead{margin:0 0 34px;font-size:19px;line-height:1.6;color:var(--muted);max-width:60ch}

.fr-link{font-weight:700;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px}
.fr-link:hover{border-bottom-color:var(--muted)}

/* Ciemny rozdzial: kolory tekstu.
   Ten blok MUSI stac po .fr-split, .fr-team i .fr-sekcja, i musi miec
   od nich wyzsza specyficznosc. Wczesniej stal wyzej i przy rownej
   specyficznosci wygrywala regula pozniejsza, czyli .fr-split.
   Skutek na landingu zespolowym: akapity w ciemnej sekcji szly kolorem
   --muted, czyli kontrast 2,41, a ceny probek dostawaly --ink, czyli
   czern na czerni. Liczby byly NIEWIDOCZNE. Zadnego bledu, sekcja
   stoi, tekst jest w kodzie strony. Zlapane automatycznym pomiarem
   kontrastu 23.09.2026, bo na oko nikt nie zauwazy czegos, czego
   nie widac. Pilnuje tego regula 47. */
.fr-band--ciemny .fr-sekcja__title,
.fr-band--ciemny h2,
.fr-band--ciemny h3,
.fr-band--ciemny strong{color:var(--ivory)}
.fr-band--ciemny .fr-sekcja__lead,
.fr-band--ciemny p,
.fr-band--ciemny li{color:var(--accent-on-dark)}
.fr-band--ciemny a{color:var(--ivory)}
.fr-band--ciemny .fr-link{border-bottom-color:var(--accent-on-dark)}
.fr-band--ciemny .fr-link:hover{border-bottom-color:var(--ivory)}

@media (max-width:900px){
  .fr-band{padding-block:36px}
  .fr-split,.fr-team__inner{grid-template-columns:1fr;gap:20px}
  .fr-split h2{font-size:27px}
  .fr-team__title{font-size:26px}
  .fr-sekcja__title{font-size:27px}
  .fr-sekcja__lead{font-size:17px;margin-bottom:24px}
  .fr-header__inner{height:auto;min-height:58px;flex-wrap:wrap;padding-block:10px}
  /* Zawezone do naglowka, zeby nie rozjechac menu w stopce. */
  .fr-header .fr-menu{flex-direction:column;gap:0;width:100%;font-size:17px}
  .fr-header .fr-menu li{border-top:1px solid var(--line)}
  .fr-header .fr-menu a{display:block;padding:14px 0}
  .fr-header .fr-nav{flex-basis:100%}

  /* Na telefonie nie ma najechania, wiec podmenu stoi otwarte,
     wciete. Rozwijane, ktorego nie da sie rozwinac, schowaloby
     cztery kategorie przed kazdym, kto wchodzi z telefonu. */
  .fr-header .fr-nav{align-self:auto}
  .fr-header .fr-menu{height:auto}
  .fr-header .fr-menu > li{height:auto;display:block;position:static}
  .fr-header .fr-menu .sub-menu{position:static;opacity:1;visibility:visible;
    min-width:0;border:0;background:transparent;padding:0;margin-left:18px}
  .fr-header .fr-menu .sub-menu li{border-top:1px solid var(--line)}
  .fr-header .fr-menu .sub-menu a{padding:12px 0;font-size:16px;color:var(--muted)}
  .fr-header .fr-menu > .menu-item-has-children > a::after{display:none}

  .fr-header.is-ready .fr-burger{display:flex;flex-direction:column;justify-content:center;
    gap:5px;width:44px;height:44px;padding:0 10px;background:transparent;border:0;cursor:pointer}
  .fr-burger__kreska{display:block;height:2px;background:var(--ink)}
  .fr-header.is-ready .fr-nav{display:none}
  .fr-header.is-ready.is-open .fr-nav{display:block}
  .fr-header.is-ready.is-open .fr-burger__kreska:nth-child(2){opacity:0}

  /* Makieta mobilna: najpierw odnosniki w kolumnie, zdanie pod nimi.
     Kolejnosc w kodzie zostaje ta sama, zmienia sie tylko wyglad,
     wiec czytnik ekranu i tabulator ida po tym samym. */
  .fr-footer__inner{flex-direction:column;align-items:stretch;gap:22px;
    padding-block:34px 44px}
  .fr-footer__linki{order:-1;flex-direction:column;align-items:stretch;gap:0}
  .fr-footer .fr-menu{flex-direction:column;gap:0}
  .fr-footer .fr-menu li{border-top:1px solid var(--line)}
  .fr-footer .fr-menu a{display:block;padding:13px 0;font-size:16px}
  /* W kolumnie flex-basis liczy sie na WYSOKOSC, wiec „1 1 240px”
     z wersji szerokiej dawalo zdaniu 240 px wysokosci zamiast
     szerokosci: jedenascie pustych wierszy pod trzema wypelnionymi.
     Zadnego bledu, nic sie nie lamie, tylko dziura w stopce. */
  .fr-footer__note{flex:0 0 auto;max-width:none;font-size:14px}
  .fr-social .fr-menu{flex-direction:row;gap:10px;padding-top:14px}
  .fr-footer .fr-social .fr-menu li{border-top:0}
  .fr-footer .fr-social .fr-menu a{display:inline-flex;padding-block:0}
}

/* Ikona koszyka w naglowku.
   Na komputerze stoi na koncu rzedu, za menu. Na telefonie przed
   hamburgerem, bo tam hamburger jest ostatni i ma byc pod kciukiem. */
.fr-koszyk{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-inline-start:-8px;color:var(--ink);text-decoration:none;order:3}
.fr-koszyk:hover{color:var(--muted)}
.fr-koszyk:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fr-koszyk__ikona{display:block}
.fr-koszyk__ile{position:absolute;top:4px;inset-inline-end:2px;min-width:18px;height:18px;
  padding-inline:5px;border-radius:999px;background:var(--ink);color:var(--ivory);
  font-family:var(--f-body);font-size:11px;font-weight:700;line-height:18px;text-align:center}
.fr-header__inner .fr-nav{order:2}

/* Naglowek na telefonie: logo, koszyk, hamburger w jednym rzedzie,
   menu pod nimi.

   Ten blok MUSI stac za podstawowymi regulami ikony, a nie w media
   query wyzej w pliku: przy tej samej specyficznosci wygrywa regula
   pozniejsza w kodzie, wiec wersja komputerowa nadpisywala telefonowa
   mimo pasujacego media query. Zlapane pomiarem: media query pasowalo,
   a koszyk mial nadal margin-inline-start -8px i order 3.

   Bez wylaczenia space-between wolne miejsce dzieli sie na DWIE luki
   i koszyk laduje na srodku naglowka, daleko od hamburgera. */
@media (max-width:900px){
  .fr-header__inner{justify-content:flex-start;gap:0}
  .fr-header .fr-koszyk{order:2;margin-inline-start:auto;margin-inline-end:2px}
  .fr-header .fr-burger{order:3}
  .fr-header__inner .fr-nav{order:4}
}