/* AMP Supplements - makieta sklepu. Pryzma Studio, 2026.
   System wizualny: tokeny marki (Seed style reference) - botaniczno-kliniczny.
   Reguły systemu, których trzymamy się bez wyjątku:
   - jedyny kolor chromatyczny prowadzący: Forest Depths #1c3a13
   - Lime Pulse tylko jako plakietka i mała emfaza, nigdy jako tło sekcji
   - wagi 300-350 dla nagłówków, 400-500 dla treści, przycisków i etykiet
   - promień: przyciski i plakietki 1000px, karty 16px, duże karty 32px, pola 8px
   - zero cieni, zero gradientów, zero czystej bieli (#ffffff) */

[hidden] { display: none !important; }

/* ---------- tokeny ---------- */
:root {
  --color-forest-depths: #1c3a13;
  --color-lime-pulse:    #d3fa99;
  --color-sage-moss:     #757c5d;
  --color-olive-gold:    #9f995b;
  --color-eucalyptus:    #698e79;
  --color-snow-white:    #fcfcf7;
  --color-warm-stone:    #eeeee9;
  --color-frosted-glass: #c4c7c4;
  --color-ash:           #b3b3b3;
  --color-pewter:        #666666;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-micro: 10px;      --leading-micro: 1;
  --text-label: 12px;      --leading-label: 1.5;
  --text-caption: 14px;    --leading-caption: 1.4;
  --text-body-sm: 16px;    --leading-body-sm: 1.5;
  --text-body: 18px;       --leading-body: 1.3;   --tracking-body: -0.18px;
  --text-subheading: 24px; --leading-subheading: 1.2; --tracking-subheading: -0.48px;
  --text-heading-sm: 32px;
  --text-heading: 36px;
  --text-heading-lg: 40px; --leading-heading-lg: 1.1; --tracking-heading-lg: -0.4px;
  --text-display: 48px;    --leading-display: 1.1; --tracking-display: -0.72px;

  --w-light: 300; --w-350: 350; --w-regular: 400; --w-medium: 500;

  --spacing-8: 8px;   --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px;
  --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px; --spacing-64: 64px;
  --spacing-80: 80px; --spacing-96: 96px; --spacing-128: 128px;

  --page-max-width: 1200px;
  --section-gap: 64px;
  --card-padding: 16px;

  --radius-cards: 16px;
  --radius-large-cards: 32px;
  --radius-inputs: 8px;
  --radius-full: 1000px;

  /* zdjęcie sceny otwierającej (wygenerowane 25.08.2026) + siła przyciemnienia pod tekstem */
  --scena-foto: url("scena-natura.jpg");
  --scena-zaciemnienie: 1;

  --surface-canvas: var(--color-snow-white);
  --surface-card:   var(--color-warm-stone);
  --surface-dark:   var(--color-forest-depths);

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--w-regular);
  background: var(--surface-canvas);
  color: var(--color-forest-depths);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.ramka { max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--spacing-24); }
@media (min-width: 1000px) { .ramka { padding: 0 var(--spacing-48); } }

/* ---------- typografia ---------- */
.display, .heading-lg, .heading, .subheading {
  font-weight: var(--w-350);
  color: inherit;
}
.display {
  font-size: clamp(34px, 4.4vw, var(--text-display));
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
}
.heading-lg {
  font-size: clamp(28px, 3.4vw, var(--text-heading-lg));
  line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg);
}
.heading {
  font-size: clamp(24px, 2.6vw, var(--text-heading-sm));
  line-height: 1.15; letter-spacing: -0.4px;
}
.subheading {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading);
}
.body { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-pewter); }
.mikro { font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: 0.02em; }
.tresc { max-width: 52ch; }
.przyciemniony { color: var(--color-pewter); }
.na-ciemnym .przyciemniony,
.ciemna .przyciemniony { color: rgba(252,252,247,0.72); }

.kod {
  font-family: var(--font-mono);
  font-size: var(--text-label); font-weight: var(--w-medium);
  letter-spacing: 0.015em; text-transform: uppercase;
}

/* ---------- ikony (cienka kreska, maska = kolor tekstu) ---------- */
.ikona {
  display: inline-block; width: 20px; height: 20px; flex: none;
  background: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* ---------- przyciski: wyłącznie pigułki ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-24);
  border-radius: var(--radius-full); border: 1.5px solid transparent;
  font: inherit; font-size: var(--text-body-sm); font-weight: var(--w-regular);
  line-height: 1; white-space: nowrap; cursor: pointer;
  background: var(--color-forest-depths); color: var(--color-snow-white);
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .12s var(--ease);
}
.btn:hover { background: #14290d; }
.btn:active { transform: scale(0.985); }

/* wersja odwrócona: na jasnych sekcjach jako akcja drugorzędna */
.btn--jasny {
  background: var(--color-snow-white);
  border-color: var(--color-forest-depths);
  color: var(--color-forest-depths);
}
.btn--jasny:hover { background: var(--color-warm-stone); }

/* wersja duch: na ciemnozielonych sekcjach i na zdjęciach */
.btn--duch {
  background: transparent;
  border-color: var(--color-snow-white);
  color: var(--color-snow-white);
}
.btn--duch:hover { background: rgba(252,252,247,0.12); }

/* wersja na ciemnym tle jako akcja główna */
.btn--snow { background: var(--color-snow-white); color: var(--color-forest-depths); }
.btn--snow:hover { background: var(--color-lime-pulse); }

.btn--maly { padding: 10px var(--spacing-16); font-size: var(--text-caption); }
.btn--pelny { width: 100%; }

.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-forest-depths); outline-offset: 3px;
}
.ciemna .btn:focus-visible, .ciemna a:focus-visible, .ciemna button:focus-visible {
  outline-color: var(--color-lime-pulse);
}

/* link tekstowy ze strzałką */
.link-strzalka {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  padding: 7px 0; border-bottom: 1.5px solid currentColor;
  font-size: var(--text-body-sm); font-weight: var(--w-regular);
  transition: gap .25s var(--ease);
}
.link-strzalka:hover { gap: 14px; }

/* ---------- plakietki i pigułki ---------- */
.plakietka {
  display: inline-flex; align-items: center;
  padding: 6px var(--spacing-8); border-radius: var(--radius-full);
  background: var(--color-lime-pulse); color: var(--color-forest-depths);
  font-size: var(--text-label); font-weight: var(--w-medium); line-height: 1;
}
.pigulka-kodu {
  display: inline-flex; align-items: center;
  padding: 6px var(--spacing-8); border-radius: var(--radius-full);
  border: 1.5px solid currentColor;
  font-family: var(--font-mono); font-size: var(--text-label);
  font-weight: var(--w-medium); line-height: 1; letter-spacing: 0.015em;
}

/* ---------- pasek promocyjny i nawigacja ---------- */
.pasek-promo {
  height: 40px; display: flex; align-items: center; justify-content: center; gap: var(--spacing-8);
  background: var(--color-snow-white); color: var(--color-forest-depths);
  border-bottom: 1px solid var(--color-warm-stone);
  font-size: var(--text-label); font-weight: var(--w-medium);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.pasek-promo .ikona { width: 15px; height: 15px; }
.pasek-promo a { border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
@media (max-width: 760px) {
  .pasek-promo { font-size: 11px; letter-spacing: 0.04em; padding: 0 var(--spacing-16); }
  .pasek-promo a { display: none; }
}

.nawi {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-snow-white);
  border-bottom: 1px solid var(--color-warm-stone);
}
.nawi__srodek {
  height: 72px; display: flex; align-items: center; gap: var(--spacing-40);
  max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--spacing-24);
}
@media (min-width: 1000px) { .nawi__srodek { padding: 0 var(--spacing-48); } }
.nawi__logo { display: flex; align-items: center; gap: 7px; }
.nawi__logo img { height: 20px; width: auto; }
.nawi__kropka { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-lime-pulse); }
.nawi__menu { display: flex; gap: var(--spacing-32); }
.nawi__menu a { font-size: var(--text-caption); font-weight: var(--w-regular); padding: 2px 0; border-bottom: 1.5px solid transparent; transition: border-color .2s var(--ease); }
.nawi__menu a:hover, .nawi__menu a[aria-current] { border-bottom-color: var(--color-forest-depths); }
.nawi__prawo { margin-left: auto; display: flex; align-items: center; gap: var(--spacing-16); }
.nawi__ikonka { display: flex; align-items: center; gap: 6px; font-size: var(--text-caption); }
.nawi__licznik {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
  background: var(--color-forest-depths); color: var(--color-snow-white);
  font-size: var(--text-micro); font-weight: var(--w-medium);
  display: inline-flex; align-items: center; justify-content: center;
}
.nawi__burger { display: none; background: none; border: 0; color: inherit; cursor: pointer; }
@media (max-width: 1000px) {
  .nawi__menu { display: none; }
  .nawi__burger { display: flex; }
  .nawi__srodek { gap: var(--spacing-16); height: 64px; }
  .nawi__ikonka span { display: none; }
  .nawi .btn { display: none; }
}

/* ---------- sekcje ---------- */
.sekcja { padding: clamp(var(--spacing-64), 8vw, var(--spacing-96)) 0; }
.sekcja--kamien { background: var(--surface-card); }
.ciemna { background: var(--surface-dark); color: var(--color-snow-white); }
.sekcja__glowa { margin-bottom: var(--spacing-48); max-width: 46ch; }
.sekcja__glowa .body { margin-top: var(--spacing-16); color: var(--color-pewter); }
.ciemna .sekcja__glowa .body { color: rgba(252,252,247,0.72); }

/* ---------- hero ---------- */
.hero { background: var(--surface-canvas); }
.hero__siatka {
  max-width: var(--page-max-width); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-48);
  align-items: center; padding: var(--spacing-64) var(--spacing-24) var(--spacing-80);
}
@media (min-width: 1000px) { .hero__siatka { padding: var(--spacing-80) var(--spacing-48) var(--spacing-96); } }
.hero__tytul { margin-bottom: var(--spacing-24); }
.hero__cta { display: flex; gap: var(--spacing-8); margin-top: var(--spacing-32); flex-wrap: wrap; }
.hero__foto {
  border-radius: var(--radius-large-cards); overflow: hidden;
  background: var(--color-warm-stone); aspect-ratio: 5 / 4;
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 62%; }
@media (max-width: 860px) {
  .hero__siatka { grid-template-columns: 1fr; gap: var(--spacing-32); padding-top: var(--spacing-40); }
  .hero__foto { order: -1; aspect-ratio: 4 / 3; }
}

/* ---------- pasek zaufania ---------- */
.zaufanie { background: var(--surface-card); }
.zaufanie__siatka {
  max-width: var(--page-max-width); margin: 0 auto;
  padding: var(--spacing-40) var(--spacing-24);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-32);
}
@media (min-width: 1000px) { .zaufanie__siatka { padding: var(--spacing-48); } }
.zaufanie__pkt { display: flex; flex-direction: column; gap: var(--spacing-8); }
.zaufanie__pkt .ikona { color: var(--color-forest-depths); }
.zaufanie__pkt b { font-size: var(--text-caption); font-weight: var(--w-medium); }
.zaufanie__pkt p { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-pewter); }
@media (max-width: 860px) { .zaufanie__siatka { grid-template-columns: 1fr 1fr; gap: var(--spacing-24); } }
@media (max-width: 520px) { .zaufanie__siatka { grid-template-columns: 1fr; } }

/* ---------- karty produktów ---------- */
.siatka-produktow {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-16);
}
/* pięć produktów stoi w jednym rzędzie - siatka ma dokładnie tyle komórek, ile jest towarów */
@media (max-width: 1100px) { .siatka-produktow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .siatka-produktow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .siatka-produktow { grid-template-columns: 1fr; } }

/* sekcja "Kupowane razem" - trzy karty, ale na malych ekranach tak samo zwija sie jak siatka glowna */
.siatka-produktow--trzy { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .siatka-produktow--trzy { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .siatka-produktow--trzy { grid-template-columns: 1fr; } }

.karta { display: flex; flex-direction: column; gap: 10px; }
.karta__foto {
  border-radius: var(--radius-cards); overflow: hidden;
  background: var(--color-warm-stone); aspect-ratio: 4 / 5; position: relative;
}
.karta__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.karta:hover .karta__foto img { transform: scale(1.03); }
.karta__plakietka { position: absolute; top: var(--spacing-16); left: var(--spacing-16); }
.karta__kod { align-self: flex-start; }
.karta__nazwa { font-size: var(--text-body); line-height: 1.2; letter-spacing: -0.3px; font-weight: var(--w-350); letter-spacing: var(--tracking-subheading); line-height: var(--leading-subheading); }
.karta__opis { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-pewter); }
.ciemna .karta__opis { color: rgba(252,252,247,0.72); }
.karta__cena { font-size: var(--text-label); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: 0.06em; }
.karta__stopka { margin-top: auto; display: flex; flex-direction: column; gap: var(--spacing-8); padding-top: var(--spacing-8); }

/* pasek wariantu produktu - kolory wyłącznie z palety systemu */
.wariant { display: inline-block; width: 24px; height: 3px; border-radius: var(--radius-full); }

/* ---------- zestawy ---------- */
.zestaw {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-32);
  align-items: center; background: var(--color-warm-stone);
  border-radius: var(--radius-large-cards); overflow: hidden;
  margin-bottom: var(--spacing-24);
}
.zestaw:last-child { margin-bottom: 0; }
.zestaw--odwrocony .zestaw__foto { order: 2; }
.zestaw__foto { aspect-ratio: 16 / 11; }
.zestaw__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.zestaw__tresc { padding: var(--spacing-32) var(--spacing-32) var(--spacing-32) 0; }
.zestaw--odwrocony .zestaw__tresc { padding: var(--spacing-32) 0 var(--spacing-32) var(--spacing-32); }
.zestaw__sklad { display: flex; gap: var(--spacing-8); flex-wrap: wrap; margin: var(--spacing-16) 0 var(--spacing-24); }
.zestaw__ceny { display: flex; align-items: baseline; gap: var(--spacing-16); }
.zestaw__cena { font-size: var(--text-heading-sm); font-weight: var(--w-350); letter-spacing: -0.4px; }
.zestaw__stara { font-size: var(--text-body-sm); color: var(--color-pewter); text-decoration: line-through; }
.omnibus { font-size: var(--text-label); color: var(--color-pewter); margin-top: var(--spacing-8); }
.zestaw .btn { margin-top: var(--spacing-24); }
@media (max-width: 860px) {
  .zestaw { grid-template-columns: 1fr; gap: 0; }
  .zestaw--odwrocony .zestaw__foto { order: 0; }
  .zestaw__tresc, .zestaw--odwrocony .zestaw__tresc { padding: var(--spacing-24); }
}

/* ---------- subskrypcja (sekcja ciemna) ---------- */
.subskrypcja__siatka { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--spacing-64); align-items: center; }
.kroki { display: flex; flex-direction: column; gap: var(--spacing-8); }
.krok {
  display: flex; gap: var(--spacing-16); align-items: flex-start;
  padding: var(--spacing-24); border-radius: var(--radius-cards);
  background: rgba(252,252,247,0.06);
}
.krok .ikona { color: var(--color-lime-pulse); margin-top: 2px; }
.krok b { display: block; font-size: var(--text-body-sm); font-weight: var(--w-medium); margin-bottom: 4px; }
.krok p { font-size: var(--text-caption); line-height: var(--leading-caption); color: rgba(252,252,247,0.72); }
@media (max-width: 860px) { .subskrypcja__siatka { grid-template-columns: 1fr; gap: var(--spacing-32); } }

/* ---------- skład: jest / nie ma ---------- */
.sklad { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-16); }
.sklad__kol { border-radius: var(--radius-large-cards); padding: var(--spacing-32); }
.sklad__kol--jest { background: var(--color-warm-stone); }
.sklad__kol--nie {
  background: rgba(196,199,196,0.38);
  backdrop-filter: blur(37.5px); -webkit-backdrop-filter: blur(37.5px);
}
.sklad__kol h3 { font-size: var(--text-label); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--spacing-24); }
.sklad__lista { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-16); }
.sklad__lista li { display: flex; gap: var(--spacing-16); align-items: flex-start; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.sklad__lista .ikona { width: 18px; height: 18px; margin-top: 3px; }
.sklad__kol--nie li { color: var(--color-pewter); }
@media (max-width: 760px) { .sklad { grid-template-columns: 1fr; } }

/* ---------- wiedza ---------- */
.wiedza__poz {
  display: grid; grid-template-columns: 96px 1fr auto; gap: var(--spacing-24);
  align-items: baseline; padding: var(--spacing-24) 0;
  border-top: 1px solid rgba(28,58,19,0.12);
  transition: padding-left .3s var(--ease);
}
.wiedza__poz:last-child { border-bottom: 1px solid rgba(28,58,19,0.12); }
.wiedza__poz:hover { padding-left: var(--spacing-8); }
.wiedza__data { font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-pewter); letter-spacing: 0.015em; }
.wiedza__tyt { font-size: var(--text-subheading); font-weight: var(--w-350); letter-spacing: var(--tracking-subheading); line-height: var(--leading-subheading); }
.wiedza__tyt span { display: block; font-size: var(--text-caption); font-weight: var(--w-regular); color: var(--color-pewter); margin-top: 6px; letter-spacing: 0; }
.wiedza__poz .ikona { color: var(--color-pewter); width: 18px; height: 18px; }
@media (max-width: 700px) { .wiedza__poz { grid-template-columns: 1fr; gap: var(--spacing-8); } .wiedza__poz .ikona { display: none; } }

/* ---------- FAQ ---------- */
.faq-uklad { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--spacing-64); align-items: start; }
.faq details { border-top: 1px solid rgba(28,58,19,0.12); }
.faq details:last-of-type { border-bottom: 1px solid rgba(28,58,19,0.12); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--spacing-24) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-24);
  font-size: var(--text-body); font-weight: var(--w-regular); letter-spacing: var(--tracking-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ikona { color: var(--color-pewter); transition: transform .3s var(--ease); width: 16px; height: 16px; }
.faq details[open] summary .ikona { transform: rotate(180deg); }
.faq__odp { padding: 0 0 var(--spacing-24); max-width: 64ch; font-size: var(--text-body-sm); color: var(--color-pewter); }
@media (max-width: 860px) { .faq-uklad { grid-template-columns: 1fr; gap: var(--spacing-24); } }

/* ---------- stopka ---------- */
.stopka { background: var(--surface-dark); color: var(--color-snow-white); padding: var(--spacing-80) 0 var(--spacing-32); }
.stopka__siatka { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--spacing-40); }
.stopka__logo img { height: 22px; margin-bottom: var(--spacing-16); }
.stopka h4 { font-size: var(--text-label); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(252,252,247,0.6); margin-bottom: var(--spacing-16); }
.stopka ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.stopka a { font-size: var(--text-caption); color: rgba(252,252,247,0.86); }
.stopka a:hover { color: var(--color-lime-pulse); }
.stopka__platnosci { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--spacing-16); }
.stopka__platnosci span {
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: 0.05em;
  padding: 6px var(--spacing-8); border-radius: var(--radius-full);
  border: 1.5px solid rgba(252,252,247,0.4); color: rgba(252,252,247,0.86);
}
.ostrzezenie {
  margin-top: var(--spacing-48); padding: var(--spacing-24);
  border-radius: var(--radius-cards); background: rgba(252,252,247,0.06);
  font-size: var(--text-label); line-height: 1.6; color: rgba(252,252,247,0.72);
}
.stopka__dol {
  margin-top: var(--spacing-32); padding-top: var(--spacing-24);
  border-top: 1px solid rgba(252,252,247,0.16);
  display: flex; justify-content: space-between; gap: var(--spacing-16); flex-wrap: wrap;
  font-size: var(--text-label); color: rgba(252,252,247,0.6);
}
@media (max-width: 900px) { .stopka__siatka { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stopka__siatka { grid-template-columns: 1fr; gap: var(--spacing-32); } }

/* ---------- karta produktu ---------- */
.produkt { padding: var(--spacing-32) 0 var(--spacing-64); }
.okruszki { display: flex; gap: var(--spacing-8); font-size: var(--text-label); color: var(--color-pewter); margin-bottom: var(--spacing-24); }
.produkt__siatka { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-48); align-items: start; }
@media (max-width: 900px) { .produkt__siatka { grid-template-columns: 1fr; gap: var(--spacing-32); } }

.galeria__glowna { border-radius: var(--radius-large-cards); overflow: hidden; background: var(--color-warm-stone); aspect-ratio: 1 / 1; }
.galeria__glowna img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.galeria__mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-8); margin-top: var(--spacing-8); }
.galeria__mini button {
  padding: 0; cursor: pointer; overflow: hidden; aspect-ratio: 1 / 1;
  border-radius: var(--radius-cards); border: 1.5px solid transparent;
  background: var(--color-warm-stone);
  transition: border-color .2s var(--ease);
}
.galeria__mini button[aria-current="true"] { border-color: var(--color-forest-depths); }
.galeria__mini img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }

.pd__tytul { margin: var(--spacing-16) 0 var(--spacing-8); }
.pd__cena-blok { display: flex; align-items: baseline; gap: var(--spacing-16); margin-top: var(--spacing-24); }
.pd__cena { font-size: var(--text-heading-sm); font-weight: var(--w-350); letter-spacing: -0.4px; }
.pd__wybor { margin-top: var(--spacing-24); }
.pd__etykieta { font-size: var(--text-label); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--spacing-8); }
.pd__opcje { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-8); }
.pd__opcja {
  display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; cursor: pointer;
  padding: var(--spacing-16); border-radius: var(--radius-cards);
  border: 1.5px solid var(--color-frosted-glass); background: var(--color-snow-white);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.pd__opcja:hover { border-color: var(--color-forest-depths); }
.pd__opcja[aria-checked="true"] { border-color: var(--color-forest-depths); background: var(--color-warm-stone); }
.pd__opcja b { font-size: var(--text-caption); font-weight: var(--w-medium); }
.pd__opcja span { font-size: var(--text-caption); color: var(--color-pewter); }
.pd__opcja .plakietka { margin-top: 4px; align-self: flex-start; }
.pd__akcje { display: flex; gap: var(--spacing-8); margin-top: var(--spacing-24); align-items: center; }
.pd__ilosc {
  display: flex; align-items: center; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-frosted-glass);
}
.pd__ilosc button { width: 42px; height: 52px; background: none; border: 0; cursor: pointer; color: inherit; display: flex; align-items: center; justify-content: center; }
.pd__ilosc output { width: 28px; text-align: center; font-size: var(--text-caption); font-weight: var(--w-medium); }
.pd__lista { display: flex; flex-direction: column; gap: var(--spacing-16); margin-top: var(--spacing-32); padding-top: var(--spacing-24); border-top: 1px solid rgba(28,58,19,0.12); }
.pd__lista div { display: flex; gap: var(--spacing-16); align-items: flex-start; font-size: var(--text-caption); color: var(--color-pewter); line-height: var(--leading-caption); }
.pd__lista .ikona { width: 18px; height: 18px; color: var(--color-forest-depths); margin-top: 1px; }
.pd__lista b { color: var(--color-forest-depths); font-weight: var(--w-medium); }

/* tabela wartości odżywczych - wymagana prawem, zostaje tabelą */
.tabela-wo { width: 100%; border-collapse: collapse; font-size: var(--text-caption); }
.tabela-wo caption { text-align: left; font-size: var(--text-label); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: var(--spacing-16); }
.tabela-wo th { text-align: left; font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--w-regular); color: var(--color-pewter); padding-bottom: var(--spacing-8); letter-spacing: 0.015em; }
.tabela-wo td { padding: 12px 0; border-top: 1px solid rgba(28,58,19,0.1); }
.tabela-wo td:not(:first-child) { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabela-wo tr:last-child td { border-bottom: 1px solid rgba(28,58,19,0.1); }

.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-64); align-items: start; }
@media (max-width: 860px) { .dwie-kolumny { grid-template-columns: 1fr; gap: var(--spacing-32); } }

.dawka { display: flex; flex-direction: column; gap: var(--spacing-8); }
.dawka__poz { display: flex; gap: var(--spacing-16); padding: var(--spacing-16); border-radius: var(--radius-cards); background: var(--color-warm-stone); }
.dawka__poz .ikona { color: var(--color-forest-depths); margin-top: 2px; }
.dawka__poz b { display: block; font-size: var(--text-caption); font-weight: var(--w-medium); margin-bottom: 3px; }
.dawka__poz p { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-pewter); }

/* ---------- pojawianie się przy przewijaniu ---------- */
.wjazd { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.wjazd.widoczny { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wjazd { opacity: 1; transform: none; transition: none; }
  .karta__foto img, .btn, .wiedza__poz, .link-strzalka { transition: none !important; }
}

/* znacznik makiety, żeby klient wiedział, że ogląda projekt, nie działający sklep */
.znacznik {
  position: fixed; right: var(--spacing-16); bottom: var(--spacing-16); z-index: 60;
  padding: 8px var(--spacing-16); border-radius: var(--radius-full);
  background: var(--color-forest-depths); color: var(--color-snow-white);
  font-family: var(--font-mono); font-size: var(--text-micro);
  text-transform: uppercase; letter-spacing: 0.08em; pointer-events: none;
}
@media (max-width: 560px) { .znacznik { left: var(--spacing-16); right: var(--spacing-16); text-align: center; } }

/* ---------- klasy ikon (Phosphor, pliki lokalne w img/ikony) ---------- */
.i-seal-check { -webkit-mask-image: url("ikony/seal-check.svg"); mask-image: url("ikony/seal-check.svg"); }
.i-flask { -webkit-mask-image: url("ikony/flask.svg"); mask-image: url("ikony/flask.svg"); }
.i-leaf { -webkit-mask-image: url("ikony/leaf.svg"); mask-image: url("ikony/leaf.svg"); }
.i-shield-check { -webkit-mask-image: url("ikony/shield-check.svg"); mask-image: url("ikony/shield-check.svg"); }
.i-truck { -webkit-mask-image: url("ikony/truck.svg"); mask-image: url("ikony/truck.svg"); }
.i-arrow-clockwise { -webkit-mask-image: url("ikony/arrow-clockwise.svg"); mask-image: url("ikony/arrow-clockwise.svg"); }
.i-lock-key { -webkit-mask-image: url("ikony/lock-key.svg"); mask-image: url("ikony/lock-key.svg"); }
.i-package { -webkit-mask-image: url("ikony/package.svg"); mask-image: url("ikony/package.svg"); }
.i-magnifying-glass { -webkit-mask-image: url("ikony/magnifying-glass.svg"); mask-image: url("ikony/magnifying-glass.svg"); }
.i-user { -webkit-mask-image: url("ikony/user.svg"); mask-image: url("ikony/user.svg"); }
.i-shopping-bag { -webkit-mask-image: url("ikony/shopping-bag.svg"); mask-image: url("ikony/shopping-bag.svg"); }
.i-caret-down { -webkit-mask-image: url("ikony/caret-down.svg"); mask-image: url("ikony/caret-down.svg"); }
.i-plus { -webkit-mask-image: url("ikony/plus.svg"); mask-image: url("ikony/plus.svg"); }
.i-minus { -webkit-mask-image: url("ikony/minus.svg"); mask-image: url("ikony/minus.svg"); }
.i-check { -webkit-mask-image: url("ikony/check.svg"); mask-image: url("ikony/check.svg"); }
.i-x { -webkit-mask-image: url("ikony/x.svg"); mask-image: url("ikony/x.svg"); }
.i-arrow-right { -webkit-mask-image: url("ikony/arrow-right.svg"); mask-image: url("ikony/arrow-right.svg"); }
.i-brain { -webkit-mask-image: url("ikony/brain.svg"); mask-image: url("ikony/brain.svg"); }
.i-drop { -webkit-mask-image: url("ikony/drop.svg"); mask-image: url("ikony/drop.svg"); }
.i-lightning { -webkit-mask-image: url("ikony/lightning.svg"); mask-image: url("ikony/lightning.svg"); }
.i-sun { -webkit-mask-image: url("ikony/sun.svg"); mask-image: url("ikony/sun.svg"); }
.i-barbell { -webkit-mask-image: url("ikony/barbell.svg"); mask-image: url("ikony/barbell.svg"); }
.i-heart { -webkit-mask-image: url("ikony/heart.svg"); mask-image: url("ikony/heart.svg"); }
.i-star { -webkit-mask-image: url("ikony/star.svg"); mask-image: url("ikony/star.svg"); }

/* =========================================================================
   EKRAN OTWIERAJĄCY - ciemna scena
   Powód zmiany (25.08.2026): białe butelki ginęły na jasnym tle. Teraz cała
   pierwsza plansza stoi na Forest Depths, a produkt siedzi w jasnych witrynach,
   więc opakowanie jest najjaśniejszym punktem strony.
   ========================================================================= */

.scena {
  background: var(--surface-dark);
  color: var(--color-snow-white);
  min-height: 100dvh;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
/* Zdjęcie sceny wchodzi jedną zmienną: ustaw --scena-foto na url(...) w :root.
   Warstwa przyciemniająca pilnuje kontrastu białego tekstu na fotografii:
   bez niej nagłówek na jasnych liściach spada poniżej progu WCAG. */
.scena::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--scena-foto, none);
  /* kadr przesuniety w prawo: lewa paproc wychodzi poza ekran, pod naglowkiem
     zostaje ciemna czesc sceny. Sprawdzone pomiarem kontrastu, nie na oko. */
  background-size: cover; background-position: 72% center;
  background-repeat: no-repeat;
}
/* wideo w tle sceny. Lezy nad zdjeciem (::before), a pod zielona warstwa (::after),
   dzieki czemu wpada w ten sam ton co reszta strony i nie widac zadnej ramki. */
/* selektor musi byc mocniejszy niz .scena > * (ktore ustawia position: relative),
   inaczej wideo wchodzi w uklad strony i rozpycha ekran */
.scena > .scena__wideo {
  /* kadr przesuwamy w prawo zamiast go powiekszac: butelka trafia nad prawa polowe
     ekranu i zachowuje naturalna wielkosc. Lewy pas zostaje na zdjeciu z ::before. */
  position: absolute; top: 0; bottom: 0; left: 24%; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: brightness(1.24) contrast(1.08) saturate(1.05);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .scena > .scena__wideo { display: none; } }
@media (max-width: 900px) { .scena > .scena__wideo { left: 0; object-position: 58% center; } }

.scena::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(20,43,14,0.96) 0%, rgba(20,43,14,0.92) 36%, rgba(20,43,14,0.62) 52%, rgba(20,43,14,0.2) 72%, rgba(20,43,14,0.1) 100%);
  opacity: var(--scena-zaciemnienie, 0);
}
.scena:has(> *) { isolation: isolate; }
.scena > * { position: relative; z-index: 1; }

/* pasek promocyjny i nawigacja w wersji na ciemnym */
.scena .pasek-promo {
  background: transparent; color: rgba(252,252,247,0.86);
  border-bottom: 1px solid rgba(252,252,247,0.14);
}
.scena .pasek-promo a:hover { color: var(--color-lime-pulse); }
.scena .nawi {
  background: transparent; border-bottom: 0; position: relative;
}
.scena .nawi__menu a { color: var(--color-snow-white); }
.scena .nawi__menu a:hover, .scena .nawi__menu a[aria-current] { border-bottom-color: var(--color-lime-pulse); }
.scena .nawi__prawo { color: var(--color-snow-white); }
.scena .nawi__licznik { background: var(--color-snow-white); color: var(--color-forest-depths); }
.scena .nawi .btn { background: var(--color-snow-white); color: var(--color-forest-depths); }
.scena .nawi .btn:hover { background: var(--color-lime-pulse); }

.scena__tresc {
  flex: 1; display: grid; grid-template-columns: minmax(0, 640px);
  gap: var(--spacing-40); align-items: center;
  max-width: var(--page-max-width); width: 100%; margin: 0 auto;
  padding: var(--spacing-48) var(--spacing-24) var(--spacing-64);
}
@media (min-width: 1000px) { .scena__tresc { padding: var(--spacing-56) var(--spacing-48) var(--spacing-80); } }

.scena__tytul {
  font-weight: var(--w-350);
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 1.04; letter-spacing: -0.03em;
  margin-bottom: var(--spacing-24);
}
.scena__tytul .cichy { color: rgba(252,252,247,0.45); }

/* odsłanianie słowo po słowie */
.slowo { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.slowo > span {
  display: inline-block;
  animation: odsloniecie .7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes odsloniecie {
  from { opacity: 0; transform: translateY(100%); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}
.op-1 > span { animation-delay: .30s } .op-2 > span { animation-delay: .40s }
.op-3 > span { animation-delay: .50s } .op-4 > span { animation-delay: .60s }
.op-5 > span { animation-delay: .70s } .op-6 > span { animation-delay: .80s }

@keyframes wjazd-z-dolu { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes powiekszenie { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.anim-dol { animation: wjazd-z-dolu .8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-skala { animation: powiekszenie 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.zw-600 { animation-delay: .6s } .zw-700 { animation-delay: .7s }
.zw-900 { animation-delay: .9s } .zw-1000 { animation-delay: 1s } .zw-1100 { animation-delay: 1.1s }

@media (prefers-reduced-motion: reduce) {
  .slowo > span, .anim-dol, .anim-skala { animation: none !important; opacity: 1; transform: none; filter: none; }
}

.scena__cta { display: flex; gap: var(--spacing-24); align-items: center; flex-wrap: wrap; margin-top: var(--spacing-32); }
.scena__cta p { max-width: 34ch; font-size: var(--text-caption); color: rgba(252,252,247,0.72); line-height: var(--leading-caption); }

/* witryna z produktem - jasna płyta na ciemnej scenie */
.witryna {
  border-radius: var(--radius-large-cards); overflow: hidden;
  background: var(--color-warm-stone); aspect-ratio: 4 / 3;
}
.witryna img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 60%; }

.scena__male { display: flex; gap: var(--spacing-8); margin-top: var(--spacing-8); }
.scena__male div {
  flex: 1; border-radius: var(--radius-cards); overflow: hidden;
  background: var(--color-warm-stone); aspect-ratio: 1 / 1;
}
.scena__male img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .scena { min-height: 0; }
  .scena__tresc { grid-template-columns: 1fr; padding: var(--spacing-32) var(--spacing-24) var(--spacing-48); }
  .witryna { aspect-ratio: 3 / 2; }
}

/* ---------- trzy panele pod sceną ---------- */
.panele { display: grid; grid-template-columns: 2fr 1fr 2fr; position: relative; z-index: 10; }
.panel { padding: var(--spacing-32); display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-24); min-height: 230px; }
.panel--kamien { background: var(--color-warm-stone); color: var(--color-forest-depths); }
.panel--snieg  { background: var(--color-snow-white); color: var(--color-forest-depths); }
.panel--ciemny { background: #142b0e; color: var(--color-snow-white); flex-direction: row; align-items: center; gap: var(--spacing-24); }
.panel__tytul { font-size: clamp(20px, 2vw, 28px); font-weight: var(--w-350); line-height: 1.1; letter-spacing: -0.03em; max-width: 22ch; }

/* panel 2: karuzela kart */
.karuzela { position: relative; flex: 1; }
.karuzela__karta {
  display: flex; gap: var(--spacing-16); align-items: flex-start;
  opacity: 0; transform: translateY(16px); position: absolute; inset: 0;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.karuzela__karta[data-aktywna="true"] { opacity: 1; transform: none; position: relative; }
.karuzela__ikona {
  width: 44px; height: 44px; border-radius: var(--radius-full); flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--color-snow-white);
}
.karuzela__karta p { font-size: var(--text-caption); line-height: 1.25; color: rgba(28,58,19,0.82); }
.kropki { display: flex; gap: 6px; }
.kropki span { height: 2px; flex: 1; border-radius: var(--radius-full); background: rgba(28,58,19,0.2); transition: background .4s var(--ease); }
.kropki span[data-aktywna="true"] { background: var(--color-forest-depths); }

.panel--ciemny img { width: 130px; border-radius: var(--radius-cards); flex: none; }
.panel__liczba { font-size: clamp(26px, 2.4vw, 35px); font-weight: var(--w-350); letter-spacing: -0.05em; }
.panel--ciemny p { font-size: var(--text-caption); color: rgba(252,252,247,0.6); line-height: 1.25; margin-top: 4px; }

@media (max-width: 900px) {
  .panele { grid-template-columns: 1fr; }
  .panel { min-height: 0; padding: var(--spacing-24); }
  .karuzela { min-height: 84px; }
  .panel--ciemny img { width: 108px; }
}



/* ---------- strony dokumentów: regulamin, polityka, zwroty ---------- */
.dokument { max-width: 78ch; margin-top: var(--spacing-32); }
.dokument > h1 { margin-bottom: var(--spacing-24); }
.dokument > h2 {
  margin-top: var(--spacing-56); padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-frosted-glass);
}
.dokument > h3 { margin-top: var(--spacing-32); }
.dokument > h1 + p, .dokument > h2 + p, .dokument > h3 + p { margin-top: var(--spacing-16); }
.dokument > p { margin-top: var(--spacing-16); font-size: var(--text-body-sm); line-height: 1.6; }
.dokument .lista-dok {
  margin-top: var(--spacing-16); padding-left: var(--spacing-24);
  display: flex; flex-direction: column; gap: var(--spacing-8);
  font-size: var(--text-body-sm); line-height: 1.6;
}
.dokument ol.lista-dok { list-style: decimal; }
.dokument ul.lista-dok { list-style: disc; }
.dokument .lista-dok li::marker { color: var(--color-sage-moss); }
.dokument .tabela-przewijana { overflow-x: auto; margin-top: var(--spacing-24); }
.dokument .tabela-wo { min-width: 0; }
@media (min-width: 700px) { .dokument .tabela-wo { min-width: 480px; } }
.dokument a { color: var(--color-forest-depths); text-decoration: underline; text-underline-offset: 3px; }

/* miejsce, w które trzeba wpisać dane klienta, zanim sklep ruszy */
.brak {
  font-family: var(--font-mono); font-size: var(--text-label);
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--color-lime-pulse); color: var(--color-forest-depths);
  white-space: normal;
}

/* ---------- zgoda na cookies ----------
   Baner nie jest modalem: nie blokuje treści i nie łapie fokusu.
   Zgoda i odmowa stoją obok siebie, tak samo widoczne. */
.cookies {
  position: fixed; z-index: 60;
  left: var(--spacing-16); right: var(--spacing-16); bottom: var(--spacing-16);
  margin: 0 auto; max-width: var(--page-max-width);
  display: flex; gap: var(--spacing-24); align-items: center; justify-content: space-between;
  padding: var(--spacing-24);
  background: var(--color-snow-white);
  border: 1.5px solid var(--color-frosted-glass);
  border-radius: var(--radius-large-cards);
}
.cookies__tresc { min-width: 0; }
.cookies__tekst { font-size: var(--text-caption); line-height: 1.5; max-width: 62ch; }
.cookies__tekst a { color: var(--color-forest-depths); text-decoration: underline; text-underline-offset: 3px; }
.cookies__wybory { display: flex; flex-direction: column; gap: var(--spacing-8); margin-top: var(--spacing-16); }
.cookies__pozycja { display: flex; gap: var(--spacing-8); align-items: flex-start; font-size: var(--text-label); line-height: 1.5; cursor: pointer; }
.cookies__pozycja input { margin-top: 2px; accent-color: var(--color-forest-depths); flex: none; }
.cookies__pozycja input:disabled { cursor: not-allowed; }
.cookies__pozycja b { font-weight: var(--w-medium); }
.cookies__akcje { display: flex; gap: var(--spacing-8); flex: none; flex-wrap: wrap; justify-content: flex-end; }
.cookies__link {
  font: inherit; font-size: var(--text-label); font-weight: var(--w-medium);
  color: var(--color-forest-depths); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 0 var(--spacing-8);
}
.z-banerem .znacznik { display: none; }

@media (max-width: 860px) {
  .cookies { flex-direction: column; align-items: stretch; gap: var(--spacing-16); padding: var(--spacing-16); border-radius: var(--radius-cards); }
  .cookies__akcje { justify-content: stretch; }
  .cookies__akcje .btn { flex: 1 1 auto; justify-content: center; }
}