/* Osnowa: strona pokazowa stylu SKLEP (biblioteka HVMBAK, Nº 004). Wzór: sklepy z Kopenhagi, jeden drobny krój, rzeczy na jednym szarym. */

:root {
  --bialy: #ffffff;
  --szary: #efefef;
  --linia: #e3e3e3;
  --tekst: #000000;
  --tekst-2: #737373;

  --m: 14px;
  --m-l: max(var(--m), env(safe-area-inset-left));
  --m-r: max(var(--m), env(safe-area-inset-right));
  --st: 11px;          /* jeden stopień na całą stronę */
  --st-akapit: 12px;
  --h-pasek: 30px;
  --h-nav: 34px;
  --odstep: 120px;
  --hx1: 20%;
  --hx2: 80%;
  --hy1: 17%;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bialy);
  scroll-padding-top: calc(var(--h-pasek) + var(--h-nav));
}

body {
  margin: 0;
  background: var(--bialy);
  color: var(--tekst);
  font-family: 'Zalando Sans', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--st);
  line-height: 1.45;
  letter-spacing: .02em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, figure, table { margin: 0; padding: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; line-height: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 1px solid var(--tekst); outline-offset: 3px; }

/* akapity piszemy normalnie, bez wersalików */
.akapit {
  font-size: var(--st-akapit);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  max-width: 30em;
}

/* ---------- pasek i nawigacja (przyklejone razem) ---------- */
.gora {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bialy);
}
.pasek {
  height: var(--h-pasek);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--m-r) 0 var(--m-l);
}
.pasek-srodek { grid-column: 2; text-align: center; }
.pasek-prawa { grid-column: 3; justify-self: end; }

.nawigacja {
  height: var(--h-nav);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--m-r) 0 var(--m-l);
  border-top: 1px solid var(--tekst);
  border-bottom: 1px solid var(--linia);
}
.nav-lewa { display: flex; gap: 22px; }
.nav-menu { display: none; }
.znak {
  grid-column: 2;
  font-family: 'Zalando Sans Expanded', 'Zalando Sans', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
}
.nav-prawa { grid-column: 3; justify-self: end; display: flex; gap: 22px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: calc(100svh - var(--h-pasek) - var(--h-nav));
  min-height: 420px;
  overflow: hidden;
  background: var(--szary);
}
.hero-kadr { position: absolute; inset: 0; }
.hero-zdjecie {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero-napisy { position: absolute; inset: 0; }
.napis { color: var(--tekst); transition: color .3s; }
.napis[data-ton="jasny"] { color: var(--bialy); }
.hero-napisy .napis {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/* ---------- siatka produktów ---------- */
.kafle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.kafel { min-width: 0; }
.kafel-zdjecie {
  background: var(--szary);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.kafel-zdjecie img { width: 100%; height: 100%; object-fit: cover; }
.kafel-podpis { padding: 12px 12px 32px; }
.kafel-podpis .cena { margin-top: 1px; }
/* cyfry o stałej szerokości tylko przy cenach i w tabeli: w tym kroju tnum poszerza też spację */
.cena, .tabela td, .h-liczba { font-variant-numeric: tabular-nums; }
.stan { color: var(--tekst-2); margin-top: 1px; }

/* ---------- kadry na całą szerokość i pary ---------- */
.kadr {
  position: relative;
  overflow: hidden;
  background: var(--szary);
}
.kadr img {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
}
.kadr-pelny { aspect-ratio: 16 / 9; }
.para { display: grid; grid-template-columns: 1fr 1fr; }
.kadr-pol { aspect-ratio: 4 / 5; }
.kadr-napis,
.kadr-napisy {
  position: absolute;
  left: 50%;
  top: var(--ny, 50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-align: center;
}
.kadr-napisy { display: grid; gap: 2px; justify-items: center; }

/* ---------- o marce ---------- */
.marka {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 14px;
  padding: var(--odstep) var(--m-r) var(--odstep) var(--m-l);
}
.marka-wstep { grid-column: 1 / span 5; display: grid; gap: 14px; align-content: start; }
.etykieta { display: block; }
.wiersze { grid-column: 7 / -1; }
.wiersz {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  border-top: 1px solid var(--linia);
  padding: 12px 0 28px;
}
.wiersz:last-child { border-bottom: 1px solid var(--linia); }
.wiersz-nr { color: var(--tekst-2); }
.wiersz-tresc { display: grid; gap: 10px; }

.tabela {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  margin-top: 8px;
}
.tabela caption { text-align: left; color: var(--tekst-2); padding-bottom: 8px; }
.tabela th,
.tabela td {
  text-align: left;
  font-weight: 400;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--linia);
}
.tabela thead th { color: var(--tekst-2); }

/* ---------- newsletter ---------- */
.newsletter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 40px;
  padding: 0 var(--m-r) var(--odstep) var(--m-l);
}
.newsletter-blok { grid-column: 8 / span 4; display: grid; gap: 14px; align-content: start; }
.formularz { grid-column: 7 / -1; display: grid; gap: 14px; }
.pole {
  display: grid;
  grid-template-columns: calc((100% + 14px) / 6 - 14px) minmax(0, 1fr);
  column-gap: 14px;
  align-items: end;
}
.pole input {
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: var(--tekst);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tekst-2);
  border-radius: 0;
  padding: 4px 0 6px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.pole input::placeholder { color: var(--tekst-2); opacity: 1; text-transform: lowercase; }
.pole input:focus { outline: none; border-bottom-color: var(--tekst); }
.pole-przycisk { margin-top: 6px; }
.przycisk {
  justify-self: start;
  font: inherit;
  font-weight: 500;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--tekst);
  background: transparent;
  border: 1px solid var(--tekst);
  border-radius: 0;
  padding: 10px 16px;
  cursor: pointer;
}
.odpowiedz { grid-column: auto; padding-left: calc((100% + 14px) / 6); color: var(--tekst-2); text-transform: none; letter-spacing: 0; font-size: var(--st-akapit); }

/* ---------- stopka ---------- */
.stopka { border-top: 1px solid var(--linia); }
.stopka-kolumny,
.stopka-dol {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.6fr;
}
.stopka-kol { border-left: 1px solid var(--linia); min-height: 230px; }
.stopka-kol:first-child { border-left: 0; }
.stopka-kol .etykieta { padding: 8px var(--m); border-bottom: 1px solid var(--linia); }
.stopka-kol ul { padding: 28px var(--m); display: grid; gap: 5px; }
.stopka-kol:first-child .etykieta,
.stopka-kol:first-child ul { padding-left: var(--m-l); }
.stopka-dol { border-top: 1px solid var(--linia); }
.stopka-dol p { padding: 8px var(--m); border-left: 1px solid var(--linia); }
.stopka-dol p:first-child { border-left: 0; padding-left: var(--m-l); }
.stopka-druk {
  border-top: 1px solid var(--linia);
  padding: 10px var(--m-r) calc(14px + env(safe-area-inset-bottom)) var(--m-l);
  color: var(--tekst-2);
}

/* ---------- ruch (tylko gdy użytkownik nie ogranicza animacji) ---------- */
.ruch .hero-zdjecie { animation: oddal 1.6s var(--ease) both; }
@keyframes oddal { from { transform: scale(1.04); } to { transform: none; } }

.ruch .kafel {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.ruch .kafel img {
  transform: scale(1.04);
  transition: transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.ruch .kafel.widoczny { opacity: 1; transform: none; }
.ruch .kafel.widoczny img { transform: none; }

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  .kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .marka-wstep { grid-column: 1 / -1; margin-bottom: 48px; }
  .wiersze { grid-column: 1 / -1; }
  .newsletter-blok { grid-column: 1 / -1; }
  .formularz { grid-column: 1 / -1; }
}

/* ---------- telefon ---------- */
@media (max-width: 600px) {
  :root {
    --m: 12px;
    --st: 12px;
    --st-akapit: 13px;
    --odstep: 72px;
    --hx1: 7%;
    --hx2: 93%;
  }
  .pasek { grid-template-columns: 1fr; }
  .pasek-srodek { grid-column: 1; }
  .pasek-prawa { display: none; }
  .nav-lewa { display: none; }
  .nav-menu { display: block; grid-column: 1; }
  .nav-szukaj, .nav-konto, .nav-koszyk-slowo { display: none; }
  .znak { font-size: 12px; }
  .kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kafel-podpis { padding: 10px var(--m) 28px; }
  .para { grid-template-columns: 1fr; }
  .kadr-pelny { aspect-ratio: 4 / 5; }
  .wiersz { grid-template-columns: 40px minmax(0, 1fr); }
  .pole { grid-template-columns: 84px minmax(0, 1fr); }
  .odpowiedz { padding-left: 98px; }
  .stopka-kolumny,
  .stopka-dol { grid-template-columns: 1fr; }
  .stopka-kol { border-left: 0; min-height: 0; border-top: 1px solid var(--linia); }
  .stopka-kol:first-child { border-top: 0; }
  .stopka-kol ul { padding: 16px var(--m-l) 24px; }
  .stopka-kol .etykieta { padding-left: var(--m-l); }
  .stopka-dol p { border-left: 0; border-top: 1px solid var(--linia); padding-left: var(--m-l); }
  .stopka-dol p:first-child { border-top: 0; }
}