/* ==========================================================================
   Podstawa — zmienne, reset, kontener, typografia, elementy wspólne.
   Ładowana na każdej podstronie; reszta arkuszy dokłada tylko to, co swoje.

   PALETA — kolory z materiałów firmowych, każdy z jedną rolą:
     kobalt   konstrukcja, ceny, przyciski zakupu
     zieleń   programy dotacyjne i statusy dostępności
     żółć     wezwania do działania i pieniądze
     fiolet   akcent nagłówkowy i jeden z programów
     czerwień przeceny i wyprzedaż
     tusz     paski systemowe i stopka
   ========================================================================== */

:root{
  --avm-ko:#2563eb;  --avm-ko-d:#1d4ed8;
  --avm-zi:#16a34a;  --avm-zi-d:#15803d;
  --avm-zo:#facc15;  --avm-zo-d:#b45309;
  --avm-fi:#7c3aed;  --avm-fi-d:#6d28d9;
  --avm-cz:#ef4444;  --avm-cz-d:#dc2626;

  --avm-tx:#0b1020;
  --avm-mut:#6b7280;
  --avm-lin:#e5e7eb;
  --avm-bg:#f3f4f6;

  --avm-kontener:1560px;
  --avm-radius:12px;
  --avm-cien:0 10px 24px -14px rgba(37,99,235,.5);
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--avm-bg);
  color:var(--avm-tx);
  font:15.5px/1.55 'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--avm-ko)}

h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.2}

button,input,select,textarea{font:inherit}

/* Widoczne tylko dla czytników ekranu — bez tego nawigacja klawiaturą jest bezużyteczna. */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Skok do treści — pojawia się dopiero po sfokusowaniu tabulatorem. */
.avm-pomin{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--avm-ko);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:700;
}
.avm-pomin:focus{left:0}

/* 96% daje na szerokim ekranie oddech jak dotąd, ale na telefonie tylko ~8 px
   marginesu — treść kleiła się do krawędzi. `100% - 32px` wchodzi dopiero
   poniżej ~800 px, więc desktop zostaje bez zmian. */
.avm-kontener{width:min(96%,100% - 32px,var(--avm-kontener));margin-inline:auto}

.avm-main{display:block;padding-bottom:16px}

/* ——— sekcja: biała karta na szarym tle, wspólna dla całego serwisu ——— */
.avm-sek{background:#fff;border-radius:var(--avm-radius);padding:26px;margin-bottom:16px}
.avm-sek__h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.avm-sek__h h2{font-size:23px}
.avm-sek__h p{margin:4px 0 0;font-size:14.5px;color:var(--avm-mut)}
.avm-sek__h a{font-size:14px;font-weight:600;color:var(--avm-ko);white-space:nowrap}

/* ——— okruchy ——— */
.avm-okruchy{font-size:13px;color:var(--avm-mut);padding:16px 0 4px}
.avm-okruchy__sep{margin:0 7px}

/* ——— komunikaty WooCommerce ———
   Wcześniej w cart.css, więc komunikat „dodano do koszyka" na karcie produktu
   i komunikaty na listingu wychodziły w domyślnym wyglądzie WooCommerce. */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;background:#fff;border-radius:var(--avm-radius);position:relative;
  border-top:0;border-left:4px solid var(--avm-ko);padding:15px 20px 15px 48px;margin:0 0 16px;
  font-size:14.5px;line-height:1.6;color:var(--avm-tx);
}
.woocommerce-message{border-left-color:var(--avm-zi)}
/* WooCommerce po załadowaniu przenosi fokus na komunikat, żeby czytnik ekranu
   go odczytał — przeglądarka rysowała wtedy grubą czarną ramkę wokół karty.
   Fokus zostaje, znika tylko obrys. */
.woocommerce-message:focus,.woocommerce-info:focus,.woocommerce-error:focus{outline:none}
.woocommerce-error{border-left-color:var(--avm-cz)}
/* Ikona WooCommerce stoi absolutnie na `left:1.5em` i zakłada lewy padding 3.5em —
   przy naszym paddingu tekst na nią nachodził (w tym fontem, który renderował się
   jako pusty kwadrat). Podmieniamy ją na Font Awesome i robimy jej miejsce. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{
  font-family:"Font Awesome 6 Free";font-weight:900;font-size:16px;line-height:23px;
  content:"\f05a";content:"\f05a"/"";
  position:absolute;left:18px;top:15px;color:var(--avm-ko);
}
.woocommerce-message::before{content:"\f058";content:"\f058"/"";color:var(--avm-zi)}
.woocommerce-error::before{content:"\f06a";content:"\f06a"/"";color:var(--avm-cz)}
.woocommerce-message a.button,.woocommerce-info a.button{
  float:right;background:transparent !important;color:var(--avm-ko) !important;
  border:0;font-weight:700;cursor:pointer;
}

/* ——— przyciski ——— */
.avm-btn{
  display:inline-block;text-align:center;border:0;cursor:pointer;
  padding:12px 24px;border-radius:8px;font-size:14.5px;font-weight:700;
  transition:background .2s ease;
}
.avm-btn--ko{background:var(--avm-ko);color:#fff}
.avm-btn--ko:hover{background:var(--avm-ko-d);color:#fff}
.avm-btn--zo{background:var(--avm-zo);color:#3a2a00}
.avm-btn--zo:hover{background:#eab308;color:#3a2a00}
.avm-btn--obrys{background:#fff;color:var(--avm-tx);border:2px solid var(--avm-tx)}

/* ——— kafel produktu — jeden wygląd na stronie głównej i na listingu ——— */
.avm-karta{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--avm-lin);border-radius:10px;padding:16px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.avm-karta:hover{border-color:var(--avm-ko);box-shadow:var(--avm-cien)}
.avm-karta__tag{
  position:absolute;left:12px;top:12px;z-index:2;color:#fff;
  font-size:11px;font-weight:800;padding:4px 9px;border-radius:5px;
}
.avm-karta__tag--promocja{background:var(--avm-cz)}
.avm-karta__tag--program{background:var(--avm-zi)}
.avm-karta__tag--nowosc{background:var(--avm-ko)}
/* Kadr trzyma stalą proporcje i ogranicza SZEROKOSC, nie wysokosc. Przy sztywnej
   wysokosci kwadratowy plik ze zdjeciem szerokiego produktu skalowal sie do
   kwadratu, wiec monitor zajmowal polowe kafla i wygladal na maly. */
/* Delikatne tło kadru to zaślepka na czas leniwego ładowania — bez niej karta
   wygląda na pustą. Kolor jest tak bliski bieli, że `multiply` na białych
   packshotach zlewa tło zdjęcia z kadrem bez widocznej krawędzi. */
.avm-karta__im{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:5/4;min-height:0;margin-bottom:12px;
  background:#f9fafb;border-radius:7px;
}
/* Rozmiar obrazka ograniczamy wylacznie przez `max-*`. Podanie `height:100%`
   przy rodzicu z `aspect-ratio` i bez jawnej wysokosci tworzy zaleznosc cykliczna
   — przegladarka wraca wtedy do naturalnej wysokosci pliku i kafle w jednym
   rzedzie rozjezdzaja sie na roznej wysokosci. */
.avm-karta__im img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;mix-blend-mode:multiply;
}
.avm-karta__kat{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--avm-mut)}
.avm-karta__t{font-size:14.5px;font-weight:600;margin-top:5px;line-height:1.35;min-height:40px}
.avm-karta__c{font-size:21px;font-weight:800;color:var(--avm-ko);margin-top:10px;letter-spacing:-.025em}
.avm-karta__c--zapytaj{font-size:18px}
.avm-od{font-size:.62em;font-weight:700;color:var(--avm-mut);margin-right:2px}
.avm-karta__c .woocommerce-Price-amount{font-size:inherit;font-weight:inherit;color:inherit}
.avm-karta__stara{font-size:14px;color:var(--avm-mut);text-decoration:line-through;margin-left:8px}
.avm-karta__n{font-size:12.5px;color:var(--avm-mut)}
.avm-karta__btn{
  display:block;margin-top:12px;text-align:center;background:var(--avm-ko);color:#fff;
  font-size:13.5px;font-weight:700;padding:11px;border-radius:7px;
}
.avm-karta:hover .avm-karta__btn{background:var(--avm-ko-d)}

/* ——— siatki ——— */
.avm-siatka{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

@media (max-width:1100px){
  .avm-siatka{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .avm-sek{padding:20px 16px;margin-bottom:12px}
  .avm-sek__h{gap:4px 12px;margin-bottom:14px}
  .avm-sek__h h2{font-size:20px}
  .avm-sek__h p{font-size:13.5px}
  .avm-sek__h a{font-size:13.5px}
}

/* ——— kafel na telefonie ———
   W jednej kolumnie karta miała ~500 px wysokości i na ekran wchodziło półtora
   produktu. Dwie kolumny wymagają zwartej karty: kwadratowy kadr, nazwa ucięta
   do trzech linii, a cena z przyciskiem dociśnięte do dołu (`margin-top:auto`),
   żeby w jednym rzędzie stały na tej samej wysokości mimo różnie długich nazw. */
@media (max-width:640px){
  .avm-siatka{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .avm-karta{padding:10px;border-radius:9px}
  .avm-karta__tag{
    left:6px;top:6px;font-size:10px;padding:3px 7px;border-radius:4px;
    max-width:calc(100% - 12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .avm-karta__im{aspect-ratio:1/1;margin-bottom:8px;border-radius:6px}
  .avm-karta__kat{font-size:9.5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .avm-karta__t{
    font-size:13px;line-height:1.3;margin-top:3px;min-height:0;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  }
  .avm-karta__c{font-size:16.5px;margin-top:auto;padding-top:8px;line-height:1.25}
  .avm-karta__c--zapytaj{font-size:14.5px}
  .avm-karta__stara{display:block;margin:1px 0 0;font-size:11.5px;font-weight:600}
  .avm-karta__n{font-size:11px;line-height:1.35}
  .avm-karta__btn{margin-top:8px;padding:8px 4px;font-size:12.5px;border-radius:6px}
}

/* ——— strony treściowe ——— */
.avm-tresc{padding-top:16px}
.avm-strona__h h1{font-size:clamp(28px,3.4vw,40px);font-weight:800}
.avm-strona__meta{margin:8px 0 0;font-size:14px;color:var(--avm-mut)}
.avm-strona__foto{margin:20px 0 0}
.avm-strona__foto img{border-radius:10px}
.avm-strona__tresc{margin-top:18px;font-size:16px;line-height:1.7;max-width:78ch}
/* Strony z własnym układem (bloki pełnej szerokości, sekcje z buildera)
   nie mieszczą się w kolumnie tekstu — patrz `$szeroka` w page.php. */
.avm-strona--szeroka .avm-strona__tresc{max-width:none}
.avm-strona__tresc h2{font-size:26px;margin:32px 0 12px}
.avm-strona__tresc h3{font-size:20px;margin:26px 0 10px}
.avm-strona__tresc p{margin:0 0 16px}
.avm-strona__tresc a{color:var(--avm-ko);text-decoration:underline}
.avm-strona__tresc img{border-radius:10px;margin:8px 0}
.avm-strona__tresc ul,.avm-strona__tresc ol{margin:0 0 16px;padding-left:22px}
.avm-strona__tresc li{margin-bottom:6px}

/* Zabezpieczenie treści z edytora przed poziomym przewijaniem. Regulaminy i polityki
   bywają wklejane z `<pre>`/`<code>` (długie wiersze bez spacji) i tabelami o sztywnej
   szerokości — na 390 px cała strona jeździła w bok. Tutaj, a nie w strony.css,
   bo ten sam kontener treści mają wpisy bloga, które strony.css nie ładują. */
.avm-strona__tresc{min-width:0;overflow-wrap:break-word}
.avm-strona__tresc pre,
.avm-strona__tresc code{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-width:100%}
.avm-strona__tresc pre{overflow-x:auto}
.avm-strona__tresc table{max-width:100%}
.avm-strona__tresc .wp-block-table{max-width:100%;overflow-x:auto}
.avm-strona__tresc iframe,
.avm-strona__tresc video{max-width:100%}
/* Na telefonie szeroka tabela staje się przewijanym blokiem, zamiast rozpychać
   kolumnę. Na komputerze zostaje zwykłą tabelą — `display:block` zwężałby ją. */
@media (max-width:640px){
  .avm-strona__tresc table{display:block;overflow-x:auto}
}

/* ——— pętla produktów WooCommerce ——— */
.woocommerce ul.products{
  display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  margin:0 !important;padding:0 !important;list-style:none;
}
.woocommerce ul.products li.product{
  width:auto !important;float:none !important;clear:none !important;
  margin:0 !important;padding:0 !important;
  grid-column:auto !important;grid-row:auto !important;
}
/* Klasy first/last z WooCommerce służyły układowi opartemu na float —
   w siatce CSS tylko przeszkadzają. */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last{clear:none !important;margin:0 !important}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after{display:none !important;content:none !important}
.avm-karta-li{display:flex;flex-direction:column}
.avm-karta-li > .avm-karta{width:100%;flex:1 1 auto}

/* Przełącznik VAT 0% (wtyczka avm-vat-switcher) pod kartą na listingu — stoi obok
   karty, nie w niej, bo karta jest odnośnikiem. Wygląd wtyczki (10 px, bez zawijania)
   był pisany pod wąski pasek Blocksy: w kaflu napis „Cena dla oświaty 0% VAT"
   wychodził poza kartę na telefonie. Selektor o trzech klasach, bo arkusz
   wtyczki ładuje się niezależnie od naszego. */
.avm-karta-li .avm-vs-switcher{
  display:flex;width:100%;margin:6px 0 0;padding:3px;gap:3px;
  background:#fff;border:1px solid var(--avm-lin);border-radius:8px;
}
.avm-karta-li .avm-vs-switcher .avm-vs-option{
  flex:1 1 0;min-width:0;padding:7px 6px;border-radius:6px;
  font-size:12px;line-height:1.25;white-space:normal;text-align:center;
}
@media (max-width:640px){
  .avm-karta-li .avm-vs-switcher{margin-top:4px;padding:2px;border-radius:7px}
  .avm-karta-li .avm-vs-switcher .avm-vs-option{padding:6px 3px;font-size:10.5px}
}

/* Liczbe kolumn ustala AVM_Woo::kolumny() na podstawie proporcji zdjec w kategorii —
   WooCommerce przeklada ja na klase `columns-N`. */
.woocommerce ul.products.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.woocommerce ul.products.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:1100px){ .woocommerce ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .woocommerce ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} }

/* ——— wyniki wyszukiwania i strona 404 ——— */
.avm-szukanie__h{padding:4px 0 16px}
.avm-szukanie__h h1{font-size:clamp(26px,3.2vw,34px);font-weight:800;letter-spacing:-.02em}
.avm-szukanie__h p{margin:8px 0 0;color:var(--avm-mut);font-size:15.5px}
.avm-szukanie__h b{color:var(--avm-tx)}
.avm-szukanie__licz{
  display:inline-block;margin-left:8px;background:var(--avm-bg);color:var(--avm-mut);
  border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;vertical-align:middle;
}
.avm-szukanie__lista{list-style:none;margin:0;padding:0}
.avm-szukanie__lista li{padding:14px 0;border-bottom:1px solid var(--avm-lin)}
.avm-szukanie__lista li:last-child{border-bottom:0}
.avm-szukanie__lista a{font-size:16.5px;font-weight:700}
.avm-szukanie__lista p{margin:5px 0 0;font-size:14.5px;color:var(--avm-mut);line-height:1.6}
.avm-szukanie__wiecej{display:flex;justify-content:center;margin-top:22px}
.avm-szukanie__wiecej .avm-btn{display:inline-flex;align-items:center;gap:9px}
.avm-szukanie__brak{text-align:center}
.avm-szukanie__brak p{max-width:64ch;margin:0 auto 20px;color:var(--avm-mut);line-height:1.65}

.avm-404{text-align:center;padding:56px 26px}
.avm-404__kod{
  display:block;font-size:64px;font-weight:800;line-height:1;
  letter-spacing:-.04em;color:var(--avm-lin);
}
.avm-404 h1{font-size:clamp(24px,3vw,32px);font-weight:800;margin:14px 0 10px}
.avm-404 p{max-width:60ch;margin:0 auto 24px;color:var(--avm-mut);line-height:1.65}
.avm-404__szukaj{display:flex;gap:8px;max-width:560px;margin:0 auto 26px}
.avm-404__szukaj input{
  flex:1 1 auto;min-width:0;height:48px;padding:0 15px;
  border:1px solid var(--avm-lin);border-radius:10px;font-size:15px;outline:0;
}
.avm-404__szukaj input:focus{border-color:var(--avm-ko)}
.avm-404__szukaj button{
  height:48px;padding:0 22px;border:0;cursor:pointer;border-radius:10px;
  background:var(--avm-ko);color:#fff;font-size:15px;font-weight:700;
}
.avm-404__szukaj button:hover{background:var(--avm-ko-d)}

/* Skróty do działów i przyciski wyjścia — wspólne dla pustego koszyka,
   strony 404 i pustych wyników wyszukiwania. */
.avm-pusty__dzialy{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.avm-pusty__dzialy a{
  border:1px solid var(--avm-lin);border-radius:999px;padding:8px 16px;
  font-size:13.5px;font-weight:600;
}
.avm-pusty__dzialy a:hover{border-color:var(--avm-ko);color:var(--avm-ko)}
.avm-pusty__akcje{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}

/* ——— lista wpisów (blog, archiwa) ——— */
/* Szablon `index.php` budował karty od początku, ale nie miały stylów — wpisy
   wyglądały jak surowa lista odnośników z ogromnymi zdjęciami. */
.avm-wpisy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.avm-wpis{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--avm-lin);border-radius:10px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.avm-wpis:hover{border-color:var(--avm-ko);box-shadow:var(--avm-cien)}
.avm-wpis__im{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--avm-bg)}
.avm-wpis__im img{width:100%;height:100%;object-fit:cover;display:block}
.avm-wpis__brak{
  display:flex;align-items:center;justify-content:center;height:100%;
  font-size:26px;color:var(--avm-lin);
}
.avm-wpis__tresc{display:flex;flex-direction:column;flex:1 1 auto;padding:18px}
.avm-wpis__tresc time{font-size:12px;color:var(--avm-mut);letter-spacing:.02em}
.avm-wpis h3{font-size:16.5px;font-weight:700;line-height:1.35;margin:7px 0 0}
.avm-wpis h3 a{color:inherit}
.avm-wpis h3 a:hover{color:var(--avm-ko)}
.avm-wpis p{margin:9px 0 0;font-size:14px;line-height:1.6;color:var(--avm-mut)}
.avm-wpis__link{
  margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--avm-ko);
}
.avm-wpis:hover .avm-wpis__link{gap:11px}

/* Paginacja archiwów — ten sam wygląd co w katalogu. */
.pagination .nav-links,.navigation .nav-links{display:flex;justify-content:center;gap:8px;margin-top:24px;flex-wrap:wrap}
.pagination .page-numbers,.navigation .page-numbers{
  min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--avm-lin);border-radius:8px;
  font-size:14.5px;font-weight:600;padding:0 12px;
}
.pagination .page-numbers.current,.navigation .page-numbers.current{
  background:var(--avm-ko);border-color:var(--avm-ko);color:#fff;
}

@media (max-width:1000px){ .avm-wpisy{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .avm-wpisy{grid-template-columns:1fr} }

/* Pływający przycisk Complianz „Zarządzaj zgodą" przykrywał treść w prawym dolnym
   rogu (przyciski, ceny w koszyku). Zgodę zmienia się przyciskiem „Ustawienia cookies"
   w stopce — Complianz nasłuchuje kliknięć w każde `.cmplz-manage-consent`, więc
   ukrycie samego pływającego kontenera niczego nie odbiera. */
#cmplz-manage-consent{display:none !important}

/* Nagłówek listy wpisów i archiwów — wielkość jak nagłówek sekcji. */
.avm-lista__h1{font-size:23px;font-weight:800;margin:0;letter-spacing:-.02em}