/* =====================================================================
   DALEJ RAZEM EDU · system WWW · edu-web.css · v1.0 (2026-10-01)
   Marka (kolory, fonty, skos, mozaika, sowa): katalog A5 + tła prezentacji.
   Układ (siatka, rytm, dyscyplina koloru): teenage engineering + Figma
   z biblioteki styles.refero.design.
   Fonty (Google Fonts):
   https://fonts.googleapis.com/css2?family=Archivo:wght@800&family=Roboto+Condensed:ital,wght@0,400;0,700;1,400&display=swap
   ===================================================================== */

/* ---------- 1. TOKENY ---------- */
:root {
  /* kategorie: główny / jaśniejszy / wersja do tekstu na bieli (AA 4.5:1) */
  --kat-aac: #75319A;        --kat-aac-j: #9E50AE;        --kat-aac-t: #75319A;
  --kat-organizacja: #F0472A; --kat-organizacja-j: #F47A61; --kat-organizacja-t: #C8321A;
  --kat-skupienie: #68C530;  --kat-skupienie-j: #7ECE57;  --kat-skupienie-t: #3A7D1A;
  --kat-motoryka: #2E409E;   --kat-motoryka-j: #5166B9;   --kat-motoryka-t: #2E409E;
  --kat-tus: #BF1B2C;        --kat-tus-j: #D9505C;        --kat-tus-t: #BF1B2C;

  /* marka */
  --fiolet: #75319A;
  --fiolet-d: #662390;
  --fiolet-dd: #472467;      /* ciemny pas: jedyny sposób na "uniesienie" sekcji */
  --fiolet-sowa: #AE83C2;    /* kontur sowy na fiolecie (jak w prezentacji) */

  /* neutralne, lekko ciepłe jak w katalogu */
  --tlo: #FFFFFF;
  --tekst: #231F20;
  --tekst-2: #4E4543;        /* baner opisu, tekst drugiego planu */
  --tekst-3: #6B6461;        /* metadane, podpisy (5.8:1) */
  --linia: #E4E1DF;          /* linie 1px, siatka produktów */
  --foto: #F3F2F0;           /* tło zdjęć produktów */
  --stopka: #ECEAE8;         /* jasnoszary pas stopki (prezentacja) */
  --sowa-szara: #E6E4E2;     /* kontur sowy na bieli */

  /* kategoria bieżąca: nadpisywana przez [data-kat] */
  --kat: var(--fiolet);
  --kat-j: var(--kat-aac-j);
  --kat-t: var(--fiolet);
  --kat-b: var(--fiolet);    /* tło banera z białym tekstem (zieleń przyciemniona) */

  /* typografia: jeden krój wąski + krój banerów */
  --font: "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-baner: "Archivo", "Roboto Condensed", "Arial Black", sans-serif; /* zamiennik Daxline Pro */

  --t-xs: 0.8125rem;   /* 13  metadane, podpisy */
  --t-s: 0.9375rem;    /* 15  UI, karty */
  --t-m: 1.0625rem;    /* 17  tekst ciągły */
  --t-l: 1.25rem;      /* 20  lead */
  --t-xl: 1.625rem;    /* 26  h3 */
  --t-2xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);  /* 28–36  h2, nagłówek kategorii */
  --t-3xl: clamp(2.125rem, 1.4rem + 3vw, 3.25rem);   /* 34–52  h1 */

  /* odstępy: baza 4 px */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --kontener: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --sekcja: clamp(64px, 8vw, 112px);  /* pionowy oddech sekcji */
  --nav-h: 72px;

  --skos: 12deg;        /* kąt banerów i przycisków */
  --skos-krawedz: 4vw;  /* spadek skośnej krawędzi pasa (hero, stopka) */

  /* mozaika trójkątów: nakładka na dowolny kolor kategorii */
  --mozaika: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='14'%3E%3Cpath d='M0 14 9 0 22 14Z' fill='%23fff' fill-opacity='.22'/%3E%3Cpath d='M9 0 22 14 31 0Z' fill='%23000' fill-opacity='.06'/%3E%3Cpath d='M22 14 31 0 47 14Z' fill='%23fff' fill-opacity='.1'/%3E%3Cpath d='M31 0 47 14 55 0Z' fill='%23fff' fill-opacity='.28'/%3E%3Cpath d='M47 14 55 0 70 14Z' fill='%23000' fill-opacity='.08'/%3E%3Cpath d='M55 0 70 14 81 0Z' fill='%23fff' fill-opacity='.14'/%3E%3Cpath d='M70 14 81 0 96 14Z' fill='%23fff' fill-opacity='.24'/%3E%3Cpath d='M81 0 96 14 96 0Z' fill='%23000' fill-opacity='.05'/%3E%3C/svg%3E");
}

/* przypisanie kategorii: HTML  data-kat="..."  |  WooCommerce  klasy product_cat-<slug> / term-<slug>
   slugi z sklep.dalejrazem.pl (stan 2026-10-01) */
[data-kat="aac"], .product_cat-komunikacja, .term-komunikacja
  { --kat: var(--kat-aac); --kat-j: var(--kat-aac-j); --kat-t: var(--kat-aac-t); --kat-b: var(--kat-aac); }
[data-kat="organizacja"], .product_cat-organizowanie-samodzielnosc, .term-organizowanie-samodzielnosc
  { --kat: var(--kat-organizacja); --kat-j: var(--kat-organizacja-j); --kat-t: var(--kat-organizacja-t); --kat-b: var(--kat-organizacja); }
[data-kat="skupienie"], .product_cat-percepcja, .term-percepcja
  { --kat: var(--kat-skupienie); --kat-j: var(--kat-skupienie-j); --kat-t: var(--kat-skupienie-t); --kat-b: var(--kat-skupienie-t); }
[data-kat="motoryka"], .product_cat-motoryka-grafomotoryka, .term-motoryka-grafomotoryka
  { --kat: var(--kat-motoryka); --kat-j: var(--kat-motoryka-j); --kat-t: var(--kat-motoryka-t); --kat-b: var(--kat-motoryka); }
[data-kat="tus"], .product_cat-tus, .term-tus
  { --kat: var(--kat-tus); --kat-j: var(--kat-tus-j); --kat-t: var(--kat-tus-t); --kat-b: var(--kat-tus); }

/* ---------- 2. BAZA ---------- */
.edu, .edu * { box-sizing: border-box; }
.edu {
  font-family: var(--font);
  font-size: var(--t-m);
  line-height: 1.5;
  color: var(--tekst);
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
}
.edu img { max-width: 100%; height: auto; display: block; }
.edu h1, .edu h2, .edu h3, .edu h4 { font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }
.edu h1 { font-size: var(--t-3xl); letter-spacing: -0.01em; }
.edu h2 { font-size: var(--t-2xl); }
.edu h3 { font-size: var(--t-xl); }
.edu h4 { font-size: var(--t-l); }
.edu p { margin: 0; max-width: 65ch; }
.edu a { color: var(--fiolet); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.edu a:hover { color: var(--fiolet-d); }
.edu :focus-visible { outline: 3px solid var(--fiolet); outline-offset: 3px; }
.edu ::selection { background: var(--kat-aac-j); color: #fff; }

.edu-kontener { width: 100%; max-width: calc(var(--kontener) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.edu-sekcja { padding-block: var(--sekcja); }
.edu .edu-stos > * + * { margin-top: var(--s-4); } /* .edu przed klasą: musi wygrać z .edu p i .edu h1 { margin: 0 } (2026-10-05) */

/* teksty pomocnicze */
.edu-lead { font-size: var(--t-l); line-height: 1.45; color: var(--tekst-2); }
.edu-meta { font-size: var(--t-xs); color: var(--tekst-3); }
.edu-etykieta {           /* nad nagłówkiem: nazwa kategorii / działu */
  font: 800 var(--t-xs)/1 var(--font-baner);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--kat-t);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.edu-etykieta::before { content: ""; width: 10px; height: 10px; background: var(--kat); transform: skewX(calc(-1 * var(--skos))); }

/* nagłówek kategorii: kolor kategorii + kropka + kursywa pod spodem (jak w katalogu) */
.edu-naglowek-kat h1, .edu-naglowek-kat h2 { color: var(--kat-t); }
.edu-naglowek-kat h1::after, .edu-naglowek-kat h2::after { content: "."; }
.edu-naglowek-kat p { font-style: italic; color: var(--tekst); margin-top: var(--s-2); }

/* ---------- 3. MOTYWY GRAFICZNE ---------- */
/* pas mozaiki: górna krawędź strony, nagłówki kategorii, kafle */
.edu-mozaika { height: 8px; background: var(--mozaika) 0 0 / auto 100% repeat-x, var(--kat); }
.edu-mozaika--gruba { height: 14px; }

/* pas ze skośną krawędzią (hero, sekcja szkoleń, stopka) */
.edu-pas { position: relative; background: var(--fiolet); color: #fff; }
.edu-pas--skos-dol { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--skos-krawedz)), 0 100%); padding-bottom: calc(var(--sekcja) + var(--skos-krawedz)); }
.edu-pas--skos-gora { clip-path: polygon(0 var(--skos-krawedz), 100% 0, 100% 100%, 0 100%); padding-top: calc(var(--sekcja) + var(--skos-krawedz)); }
.edu-pas--ciemny { background: var(--fiolet-dd); }
.edu-pas--szary { background: var(--stopka); color: var(--tekst); }

/* sowa: znak wodny, tylko kontur */
.edu-sowa { position: absolute; pointer-events: none; color: var(--fiolet-sowa); opacity: .55; }
.edu-pas--szary .edu-sowa, .edu-sowa--jasna { color: var(--sowa-szara); opacity: 1; }

/* ---------- 4. BANERY SKOŚNE (sygnatura katalogu) ---------- */
.edu-baner {
  display: inline-block; position: relative; z-index: 0;
  padding: var(--s-2) var(--s-5);
  font: 800 var(--t-l)/1.15 var(--font-baner);
  text-transform: uppercase; letter-spacing: 0.02em; color: #fff;
}
.edu-baner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kat-b); transform: skewX(calc(-1 * var(--skos))); } /* biały na #68C530 ma tylko 2.2:1, stąd --kat-b */
.edu-baner--opis {
  display: block; max-width: 46ch; margin-left: var(--s-5);
  font: 400 var(--t-s)/1.45 var(--font); text-transform: none; letter-spacing: 0;
  padding: var(--s-3) var(--s-5);
}
.edu-baner--opis::before { background: var(--tekst-2); }
.edu-baner--opis b { font-weight: 700; }
.edu-baner--maly { font-size: var(--t-xs); padding: 3px var(--s-3); letter-spacing: 0.06em; }

/* ---------- 5. PRZYCISKI ---------- */
.edu-btn {
  --btn-bg: var(--fiolet); --btn-fg: #fff; --btn-ramka: transparent;
  position: relative; z-index: 0; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6);
  font: 800 var(--t-s)/1 var(--font-baner); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--btn-fg); text-decoration: none; border: 0; background: none; cursor: pointer;
}
.edu-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-bg); border: 2px solid var(--btn-ramka); transform: skewX(calc(-1 * var(--skos))); transition: background .15s; }
.edu .edu-btn, .edu .edu-btn:hover { color: var(--btn-fg); }
.edu-btn:hover::before { --btn-bg: var(--fiolet-d); }
.edu-btn--drugi { --btn-bg: transparent; --btn-fg: var(--tekst); --btn-ramka: var(--tekst); }
.edu-btn--drugi:hover::before { --btn-bg: var(--foto); }
.edu-btn--na-fiolecie { --btn-bg: #fff; --btn-fg: var(--fiolet); }
.edu-btn--na-fiolecie:hover::before { --btn-bg: #F1E8F5; }
.edu-btn--drugi.edu-btn--na-fiolecie { --btn-bg: transparent; --btn-fg: #fff; --btn-ramka: #fff; }
.edu-btn--drugi.edu-btn--na-fiolecie:hover::before { --btn-bg: rgba(255,255,255,.12); }
.edu-btn--pelny { width: 100%; }
.edu-link-strzalka { font-weight: 700; text-decoration: none; }
.edu-link-strzalka::after { content: " →"; }
.edu-link-strzalka:hover { text-decoration: underline; }

/* ---------- 6. NAGŁÓWEK STRONY ---------- */
.edu-header { background: var(--tlo); border-bottom: 1px solid var(--linia); position: sticky; top: 0; z-index: 20; }
.edu-header__bar { display: flex; align-items: center; gap: var(--s-5); min-height: var(--nav-h); }
.edu-logo { display: block; width: 150px; flex: none; }
.edu-logo svg { width: 100%; height: auto; display: block; }
.edu-szukaj { flex: 1; max-width: 420px; display: flex; }
.edu-szukaj input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--s-4); font: inherit; font-size: var(--t-s); border: 1px solid var(--linia); border-radius: 0; background: var(--foto); color: var(--tekst); }
.edu-szukaj input:focus { background: var(--tlo); border-color: var(--tekst); outline: none; }
.edu-header__linki { display: flex; gap: var(--s-5); margin-left: auto; font-size: var(--t-s); }
.edu-header__linki a { color: var(--tekst); text-decoration: none; }
.edu-header__linki a:hover { color: var(--fiolet); }
.edu-koszyk { font-weight: 700; }
.edu-koszyk span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; background: var(--fiolet); color: #fff; font-size: var(--t-xs); }

/* nawigacja kategorii: kolor = drogowskaz */
.edu-katnav { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--linia); }
.edu-katnav a {
  flex: 1 0 auto; display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); font-size: var(--t-s); font-weight: 700; color: var(--tekst); text-decoration: none;
  border-bottom: 4px solid transparent; white-space: nowrap;
}
.edu-katnav a::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--kat); transform: skewX(calc(-1 * var(--skos))); }
.edu-katnav a:hover, .edu-katnav a[aria-current] { border-bottom-color: var(--kat); color: var(--kat-t); }

/* ---------- 7. KAFLE KATEGORII ---------- */
.edu-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 1px solid var(--linia); border-left: 1px solid var(--linia); }
/* linie rysują same kafle, więc niepełny ostatni rząd zostaje biały */
.edu-kafle > * { border-right: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.edu-kafel { background: var(--tlo); display: flex; flex-direction: column; text-decoration: none; color: var(--tekst); }
.edu .edu-kafel:hover { color: var(--tekst); }
.edu-kafel__tresc { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.edu-kafel h3 { font-size: var(--t-l); color: var(--kat-t); }
.edu-kafel h3::after { content: "."; }
.edu-kafel p { font-size: var(--t-s); font-style: italic; color: var(--tekst-2); }
.edu-kafel__ile { margin-top: auto; padding-top: var(--s-3); font-size: var(--t-xs); color: var(--tekst-3); }
/* najechanie: wzór mozaiki przesuwa się w bok, od dołu wjeżdża linia w kolorze kategorii,
   tytuł przesuwa się o 4 px. Nic nie zmienia wysokości, więc strona stoi w miejscu. */
.edu-kafel { position: relative; }
.edu-kafel .edu-mozaika { background-position: 0 0, 0 0; transition: background-position .6s cubic-bezier(.2, .7, .2, 1); }
.edu-kafel:hover .edu-mozaika, .edu-kafel:focus-visible .edu-mozaika { background-position: 96px 0, 0 0; }
.edu-kafel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--kat); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.edu-kafel:hover::after, .edu-kafel:focus-visible::after { transform: scaleX(1); }
.edu-kafel h3 { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.edu-kafel:hover h3, .edu-kafel:focus-visible h3 { transform: translateX(4px); }

/* ---------- 8. SIATKA PRODUKTÓW (katalog: linie 1px, zdjęcie jest kartą) ---------- */
.edu-produkty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linia); border-left: 1px solid var(--linia); list-style: none; margin: 0; padding: 0; }
.edu-produkty > * { border-right: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.edu-produkt { background: var(--tlo); position: relative; display: flex; flex-direction: column; }
.edu-produkt::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--kat); transform: scaleX(0); transform-origin: left; transition: transform .2s; z-index: 1; }
.edu-produkt:hover::before, .edu-produkt:focus-within::before { transform: scaleX(1); }
.edu-produkt__foto { aspect-ratio: 1; background: var(--foto); position: relative; overflow: hidden; }
.edu-produkt__foto img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.edu-produkt__opis { padding: var(--s-4) var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.edu .edu-produkt__nazwa { font-size: var(--t-m); font-weight: 700; line-height: 1.25; color: var(--tekst); text-decoration: none; }
.edu-produkt__nazwa::after { content: ""; position: absolute; inset: 0; } /* cała karta klikalna */
.edu-produkt:hover .edu-produkt__nazwa { text-decoration: underline; text-underline-offset: 3px; }
.edu-produkt__wym { font-size: var(--t-xs); color: var(--tekst-3); }
.edu-produkt__dol { margin-top: auto; padding-top: var(--s-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.edu-cena { font-weight: 700; font-size: var(--t-l); font-variant-numeric: tabular-nums; }
.edu-cena small { font-size: var(--t-xs); font-weight: 400; color: var(--tekst-3); }
.edu-produkt__koszyk { position: relative; z-index: 2; font-size: var(--t-s); font-weight: 700; color: var(--fiolet); background: none; border: 0; padding: var(--s-2) 0; cursor: pointer; font-family: inherit; }
.edu-produkt__koszyk:hover { text-decoration: underline; }
.edu-produkt .edu-baner--maly { position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2; }

/* ---------- 9. STRONA PRODUKTU ---------- */
.edu-pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
.edu-galeria__glowne { background: var(--foto); aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
.edu-galeria__glowne img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.edu-galeria__miniatury { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); margin-top: var(--s-2); }
.edu-galeria__miniatury button { aspect-ratio: 1; background: var(--foto); border: 1px solid transparent; padding: 8%; cursor: pointer; }
.edu-galeria__miniatury button[aria-current] { border-color: var(--tekst); }
.edu-galeria__miniatury img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.edu-pdp__info { display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: calc(var(--nav-h) + 64px); }
.edu-pdp__tytul { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.edu-pdp__kupno { display: flex; gap: var(--s-3); align-items: stretch; }
.edu-ilosc { display: flex; border: 1px solid var(--tekst); height: 48px; }
.edu-ilosc button { width: 40px; background: none; border: 0; font: inherit; font-size: var(--t-l); cursor: pointer; color: var(--tekst); }
.edu-ilosc input { width: 44px; text-align: center; border: 0; font: inherit; font-weight: 700; color: var(--tekst); background: transparent; }
.edu-pdp__kupno .edu-btn { flex: 1; }
.edu-sygnatura {           /* linia + adres kursywą + wymiary pogrubione: podpis z katalogu */
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  border-top: 1px solid var(--tekst); padding-top: var(--s-2); font-size: var(--t-xs);
}
.edu-sygnatura span:first-child { font-style: italic; color: var(--tekst-2); }
.edu-sygnatura b { white-space: nowrap; }
.edu-zalety { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--t-s); color: var(--tekst-2); }
.edu-zalety li { display: flex; gap: var(--s-2); }
.edu-zalety li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .5em; background: var(--kat); transform: skewX(calc(-1 * var(--skos))); }

/* tabela specyfikacji: linie, bez ramek */
.edu-spec { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.edu-spec th, .edu-spec td { text-align: left; vertical-align: top; padding: var(--s-3) 0; border-bottom: 1px solid var(--linia); }
.edu-spec th { width: 38%; font-weight: 700; padding-right: var(--s-4); }

/* sekcje opisu produktu: kolumny z arkusza (Opis, Zastosowanie, Cele, Zawartość) */
.edu-opis-sekcje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-8); }
.edu-opis-sekcje h3 { font-size: var(--t-l); margin-bottom: var(--s-3); color: var(--kat-t); }
.edu-opis-sekcje h3::after { content: "."; }
.edu-opis-sekcje ul { margin: 0; padding-left: 1.1em; }
.edu-opis-sekcje li + li { margin-top: var(--s-1); }

/* ---------- 10. ELEMENTY POMOCNICZE ---------- */
.edu-okruszki { font-size: var(--t-xs); color: var(--tekst-3); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.edu-okruszki a { color: var(--tekst-3); }
.edu-okruszki span[aria-hidden] { color: var(--linia); }
.edu-chipy { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.edu-chip { font: inherit; font-size: var(--t-s); padding: var(--s-2) var(--s-4); min-height: 40px; border: 1px solid var(--linia); background: var(--tlo); color: var(--tekst); cursor: pointer; }
.edu-chip:hover { border-color: var(--tekst); }
.edu-chip[aria-pressed="true"] { background: var(--tekst); border-color: var(--tekst); color: #fff; }
.edu-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding-block: var(--s-4); border-bottom: 1px solid var(--linia); margin-bottom: var(--s-6); }
.edu-select { font: inherit; font-size: var(--t-s); height: 40px; padding: 0 var(--s-3); border: 1px solid var(--linia); border-radius: 0; background: var(--tlo); color: var(--tekst); }
.edu-pole { display: flex; flex-direction: column; gap: var(--s-1); }
.edu-pole label { font-size: var(--t-s); font-weight: 700; }
.edu-pole input { height: 48px; padding: 0 var(--s-4); font: inherit; border: 1px solid var(--tekst-3); border-radius: 0; background: var(--tlo); color: var(--tekst); }
.edu-pole input:focus { outline: 3px solid var(--kat-aac-j); outline-offset: 0; border-color: var(--tekst); }
.edu-pole small { font-size: var(--t-xs); color: var(--tekst-3); }
.edu-pasek-zaufania { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--linia); }
.edu-pasek-zaufania > div { padding: var(--s-5) var(--s-5) var(--s-5) 0; display: flex; flex-direction: column; gap: var(--s-1); }
.edu-pasek-zaufania > div + div { padding-left: var(--s-5); border-left: 1px solid var(--linia); }
.edu-pasek-zaufania b { font-size: var(--t-m); }
.edu-pasek-zaufania span { font-size: var(--t-s); color: var(--tekst-2); }

/* akapit z pionową kreską (okładka katalogu) */
.edu-wyroznienie { border-left: 4px solid var(--fiolet); padding-left: var(--s-4); }

/* ---------- 11. STOPKA ---------- */
.edu-footer { position: relative; overflow: hidden; }
.edu-footer__siatka { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--s-6); position: relative; }
.edu-footer h4 { font: 800 var(--t-xs)/1 var(--font-baner); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--s-4); }
.edu-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--t-s); }
.edu-footer a { color: var(--tekst); text-decoration: none; }
.edu-footer a:hover { color: var(--fiolet); text-decoration: underline; }
.edu-footer__dol { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid #D6D2CF; display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--tekst-3); position: relative; }

/* ---------- 12. RESPONSYWNOŚĆ ---------- */
@media (max-width: 1024px) {
  .edu-produkty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .edu-pdp { grid-template-columns: 1fr; gap: var(--s-6); }
  .edu-pdp__info { position: static; }
  .edu-footer__siatka { grid-template-columns: 1fr 1fr; }
  .edu-pasek-zaufania { grid-template-columns: 1fr 1fr; }
  .edu-pasek-zaufania > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .edu-pasek-zaufania > div:nth-child(n+3) { border-top: 1px solid var(--linia); }
}
@media (max-width: 720px) {
  :root { --nav-h: 60px; }
  .edu-produkty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu-produkt__opis { padding: var(--s-3) var(--s-3) var(--s-4); }
  .edu-produkt__dol { flex-direction: column; align-items: flex-start; gap: 0; }
  .edu-header__bar { flex-wrap: wrap; gap: var(--s-3); padding-block: var(--s-3); }
  .edu-logo { width: 120px; }
  .edu-szukaj { order: 3; max-width: none; flex-basis: 100%; }
  .edu-header__linki .edu-ukryj-mobile { display: none; }
  .edu-opis-sekcje { grid-template-columns: 1fr; gap: var(--s-6); }
  .edu-pasek-zaufania { grid-template-columns: 1fr; }
  .edu-pasek-zaufania > div, .edu-pasek-zaufania > div + div { padding: var(--s-4) 0; border-left: 0; }
  .edu-pasek-zaufania > div + div { border-top: 1px solid var(--linia); }
  .edu-footer__siatka { grid-template-columns: 1fr; }
  .edu-baner--opis { margin-left: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) {
  .edu *, .edu *::before, .edu *::after { transition: none !important; animation: none !important; }
}