/* ==========================================================================
   Karta produktu: galeria, blok decyzji zakupowej, opis, zapytanie o ofertę.
   Kafle produktów powiązanych są w base.css.
   ========================================================================== */

.avm-produkt{padding-top:4px}

/* ——— układ górnej części ——— */
.avm-pr__gora{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;
  background:#fff;border-radius:var(--avm-radius);padding:28px;align-items:start;
}

/* ——— galeria ——— */
.avm-pr__duze{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:4/3;min-height:0;
  background:#fff;border:1px solid var(--avm-lin);border-radius:10px;padding:18px;
}
.avm-pr__duze img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;mix-blend-mode:multiply;
}
/* Duże zdjęcie jest odnośnikiem do powiększenia — wypełnia ramkę, żeby kliknięcie
   w białe pole wokół produktu też otwierało podgląd. */
.avm-pr__powieksz{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;cursor:zoom-in;
}
.avm-pr__lupa{
  position:absolute;right:12px;bottom:12px;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:#fff;border:1px solid var(--avm-lin);color:var(--avm-tx);font-size:15px;
  transition:border-color .15s ease, color .15s ease;
}
.avm-pr__powieksz:hover .avm-pr__lupa{border-color:var(--avm-ko);color:var(--avm-ko)}

/* Okno powiększenia (tworzy je app.js). */
.avm-lb{
  width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;
  padding:64px 84px;border:0;background:rgba(11,16,32,.92);
}
.avm-lb[open]{display:flex;align-items:center;justify-content:center}
.avm-lb::backdrop{background:transparent}
.avm-lb__img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  background:#fff;border-radius:12px;padding:20px;
}
.avm-lb__btn{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:20px;
  transition:background .15s ease;
}
.avm-lb__btn:hover,.avm-lb__btn:focus-visible{background:rgba(255,255,255,.3)}
.avm-lb__zamknij{top:14px;right:14px}
.avm-lb__wstecz,.avm-lb__dalej{top:50%;transform:translateY(-50%)}
.avm-lb__wstecz{left:18px}
.avm-lb__dalej{right:18px}
.avm-lb__licznik{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  color:#fff;font-size:14px;font-weight:600;
}
body.avm-lb-otwarte{overflow:hidden}

.avm-pr__gal--brak{
  display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;
  background:var(--avm-tlo);border-radius:10px;color:var(--avm-mut);font-size:14px;
}

/* Pasek przewijany poziomo, nie siatka. Monitory maja po kilkanascie zdjec
   (zlacza, mocowania, rzuty z boku) i w siatce zajmowaly trzy rzedy, spychajac
   opis pod ekran. Tak zostaje jeden rzad niezaleznie od liczby zdjec. */
.avm-pr__mini{
  display:flex;gap:9px;margin-top:12px;
  overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;
}
.avm-pr__minia{
  flex:0 0 84px;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;min-height:0;padding:7px;
  background:#fff;border:1px solid var(--avm-lin);border-radius:8px;
  transition:border-color .15s ease;
}
.avm-pr__minia img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;mix-blend-mode:multiply;
}
.avm-pr__minia:hover{border-color:var(--avm-ko)}
.avm-pr__minia.jest{border-color:var(--avm-ko);box-shadow:0 0 0 1px var(--avm-ko)}

/* ——— blok decyzji zakupowej ——— */
.avm-pr__kat{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--avm-mut);font-weight:700}
.avm-pr__tytul{font-size:clamp(23px,2.6vw,30px);font-weight:800;line-height:1.25;margin:8px 0 0;letter-spacing:-.02em}

.avm-pr__program{
  display:flex;align-items:center;gap:9px;margin-top:14px;
  background:#f0fdf4;border:1px solid #bbf7d0;border-radius:9px;
  padding:11px 14px;font-size:14px;font-weight:600;color:#14532d;
}
.avm-pr__program i{color:var(--avm-zi)}
.avm-pr__program a{color:#14532d;text-decoration:underline}

.avm-pr__cena{margin-top:20px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.avm-pr__brutto{font-size:34px;font-weight:800;color:var(--avm-ko);letter-spacing:-.03em;line-height:1.1}
.avm-pr__brutto .woocommerce-Price-amount{font-size:inherit;font-weight:inherit;color:inherit}
.avm-pr__brutto s{font-size:19px;color:var(--avm-mut);margin-left:8px;font-weight:600}
.avm-pr__netto{font-size:14.5px;color:var(--avm-mut)}
.avm-pr__cena--zapytaj .avm-pr__brutto{font-size:24px}

.avm-pr__stan{margin-top:10px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.avm-pr__stan::before{content:"";width:8px;height:8px;border-radius:50%}
.avm-pr__stan.jest{color:#15803d}
.avm-pr__stan.jest::before{background:#16a34a}
.avm-pr__stan.brak{color:var(--avm-mut)}
.avm-pr__stan.brak::before{background:#9ca3af}

/* Formularz koszyka pochodzi z WooCommerce — narzucamy mu wygląd sklepu.
   Selektor z nazwą elementu i !important, bo paleta motywu wchodzi w
   `button[type="submit"]` stylem inline. */
/* Bez `gap` na kontenerze. WooCommerce zawsze wypisuje <div class="quantity">,
   ale przy stanie magazynowym 1 wklada do niego pole UKRYTE — pusty div nadal
   jest elementem flex, wiec gap odsuwal przycisk wzgledem tego pod nim.
   Odstep siedzi teraz na samym polu ilosci i znika razem z nim. */
.avm-pr .cart{margin-top:20px;display:flex;align-items:center;flex-wrap:wrap}
.avm-pr .quantity input[type="number"]{
  width:78px;height:50px;padding:0 10px;margin-right:12px;text-align:center;
  border:1px solid var(--avm-lin);border-radius:9px;font-size:15px;font-weight:600;
}
.avm-pr .cart button.single_add_to_cart_button{
  flex:1 1 auto;min-width:220px;height:50px;
  background:var(--avm-ko) !important;color:#fff !important;
  border:0 !important;border-radius:9px !important;
  font-size:15.5px !important;font-weight:700 !important;cursor:pointer;
}
.avm-pr .cart button.single_add_to_cart_button:hover{background:var(--avm-ko-d) !important}

/* Przełącznik VAT 0% (avm-vat-switcher) wtyczka wstawia do formularza koszyka,
   przed polem ilości. W wierszu flex dostawał 218×24 px obok ilości i przycisku —
   stąd osobny wiersz na całą szerokość, przyciski jak w kaflach listingu. */
.avm-pr .cart .avm-vs-switcher{
  flex:1 1 100%;display:flex;gap:3px;margin:0 0 12px;padding:3px;
  background:#fff;border:1px solid var(--avm-lin);border-radius:9px;
}
.avm-pr .cart .avm-vs-switcher .avm-vs-option{
  flex:1 1 0;min-width:0;padding:10px 8px;border-radius:7px;
  font-size:14px;line-height:1.25;white-space:normal;text-align:center;
}

/* Produkty wariantowe: WooCommerce wstawia tu wlasna tabele wyboru, cene
   wariantu i drugi przycisk. Formularz musi byc blokiem — przy `display:flex`
   z reguly wyzej przelacznik VAT laduje obok przycisku zamiast pod cena. */
.avm-pr .variations_form.cart{display:block}
.avm-pr .variations{width:100%;margin:0 0 16px;border-collapse:collapse}
.avm-pr .variations th{
  text-align:left;vertical-align:middle;padding:8px 14px 8px 0;
  font-size:14px;font-weight:600;white-space:nowrap;
}
.avm-pr .variations td{padding:8px 0;width:100%}
.avm-pr .variations select{
  width:100%;height:46px;padding:0 12px;background:#fff;
  border:1px solid var(--avm-lin);border-radius:9px;font-size:15px;outline:0;
}
.avm-pr .variations select:focus{border-color:var(--avm-ko)}
.avm-pr .reset_variations{
  display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:var(--avm-mut);
}

.avm-pr .woocommerce-variation-price{margin:0 0 14px}
/* !important, bo cene wariantu stylują też arkusze WooCommerce i wtyczek —
   bez tego zostaje oliwkowy kolor spoza palety sklepu. */
.avm-pr .woocommerce-variation-price .price,
.avm-pr .woocommerce-variation-price .price span,
.avm-pr .woocommerce-variation-price .price .woocommerce-Price-amount{
  font-size:26px !important;font-weight:800 !important;
  color:var(--avm-ko) !important;letter-spacing:-.025em;
}
.avm-pr .woocommerce-variation-price .price .woocommerce-Price-amount{
  font-size:inherit;font-weight:inherit;color:inherit;
}
.avm-pr .woocommerce-variation-availability{margin-bottom:10px;font-size:14px}
.avm-pr .woocommerce-variation-add-to-cart{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}

.avm-pr__oferta{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:10px;height:48px;border-radius:9px;
  border:2px solid var(--avm-tx);color:var(--avm-tx);
  font-size:14.5px;font-weight:700;
}
.avm-pr__oferta:hover{background:var(--avm-tx);color:#fff}

.avm-pr__atuty{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--avm-lin)}
.avm-pr__atuty li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:#374151;padding:6px 0}
.avm-pr__atuty i{color:var(--avm-ko);width:18px;text-align:center;margin-top:2px}

.avm-pr__meta{margin-top:16px;display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--avm-mut)}
.avm-pr__meta b{color:var(--avm-tx);font-weight:600}

/* ——— opis i specyfikacja ——— */
/* `align-items:start` — tabela techniczna jest zwykle krotsza od opisu i bez
   tego ciagnela sie pusta ramka az do jego konca. */
.avm-pr__dol{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;margin-top:16px;
  align-items:start;
}
.avm-pr__dol--szeroki{grid-template-columns:1fr}
.avm-pr__opis,.avm-pr__spec{background:#fff;border-radius:var(--avm-radius);padding:26px}
.avm-pr__opis h2,.avm-pr__spec h2{font-size:19px;font-weight:800;margin:0 0 14px}
.avm-pr__tresc{font-size:15.5px;line-height:1.7;color:#374151}
.avm-pr__tresc p{margin:0 0 12px}
.avm-pr__tresc ul,.avm-pr__tresc ol{margin:0 0 12px;padding-left:20px}
.avm-pr__tresc li{margin-bottom:5px}
.avm-pr__tresc img{max-width:100%;height:auto;border-radius:8px}
.avm-pr__tresc h2,.avm-pr__tresc h3{font-size:17px;font-weight:700;margin:18px 0 10px}

/* Opisy z hurtowni zaczynają się od własnego <h1> z nazwą produktu (czasem z klasą
   `product_title` i pustym `.product-price` skopiowanym z ich karty), wyśrodkowanego
   stylem inline. Nazwa stoi już w H1 karty tuż wyżej — duplikat zajmował na telefonie
   pół ekranu. Od 2026-09-15 AVM_Tresc::oczysc() usuwa nagłówek równy nazwie produktu,
   a pozostałe <h1> zamienia na <h2 data-avm-h1> (jeden H1 na stronie). Reguły niżej
   łapią duplikaty o nazwie różniącej się od produktu, a zamienione nagłówki wyglądają
   jak dotąd — jak śródtytuły, większe od zwykłych <h2> z opisu. */
.avm-pr__tresc > h2[data-avm-h1]:first-child,
.avm-pr__tresc h2[data-avm-h1].product_title,
.avm-pr__tresc .product-price:empty{display:none}
.avm-pr__tresc h2[data-avm-h1]{font-size:19px;font-weight:800;line-height:1.3;margin:18px 0 10px;text-align:left !important}

/* Tabele układu z hurtowni mają sztywne `width`/`height` w atrybutach (np. 1353 px) —
   bez tego rozpychały kartę szerzej niż ekran. */
.avm-pr__tresc table{max-width:100%;height:auto !important}
.avm-pr__tresc table[width]{width:100% !important}

/* UWAGA: opisy produktów z hurtowni niosą własny <style> i używają TEGO SAMEGO
   prefiksu co motyw (.avm-wrap, .avm-grid, .avm-card, .avm-list, .avm-badge).
   Nie wolno wprowadzać w motywie klas o tych nazwach — nadpisałyby się wzajemnie.
   Tutaj zdejmujemy tylko wyśrodkowanie: przy opisie na pełnej szerokości karty
   blok 860 px stał pośrodku pustej ramki. Długość wiersza zostaje czytelna. */
.avm-pr__tresc .avm-wrap{max-width:80ch;margin:0;padding:0}

.avm-pr__spec table{width:100%;border-collapse:collapse;font-size:14px}
.avm-pr__spec tr{border-bottom:1px solid var(--avm-lin)}
.avm-pr__spec tr:last-child{border-bottom:0}
.avm-pr__spec th{
  text-align:left;font-weight:600;color:var(--avm-mut);
  padding:11px 12px 11px 0;width:45%;vertical-align:top;
}
.avm-pr__spec td{padding:11px 0;font-weight:600}

/* ——— zapytanie o ofertę ——— */
/* Wcześniej ciemny granat z poprzedniej odsłony sklepu — na tle jasnych kart
   wyglądał jak wklejony z innej strony. Teraz ta sama biała karta co reszta,
   z kolumną kontaktową na delikatnym błękicie, żeby sekcja nie zginęła. */
/* `--avm-szczyt` to zmierzona w app.js wysokość przypiętego nagłówka — bez
   marginesu przycisk „Poproś o ofertę" przewijał tak, że tytuł i pola sekcji
   lądowały pod paskiem kategorii. */
.avm-zap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0;
  background:#fff;border-radius:var(--avm-radius);overflow:hidden;margin-top:16px;
  scroll-margin-top:calc(var(--avm-szczyt, 200px) + 16px);
}
/* Kolumna kontaktowa jest krotsza od formularza — bez wysrodkowania zostawal
   pod nia pusty pas tla na wysokosc reCAPTCHA. */
.avm-zap__lewo{
  background:#f8fafc;border-right:1px solid var(--avm-lin);padding:34px;
  display:flex;flex-direction:column;justify-content:center;
}
.avm-zap__prawo{padding:34px}
.avm-zap__lewo h2{font-size:24px;font-weight:800;margin:0 0 12px;letter-spacing:-.02em}
.avm-zap__lewo p{font-size:15px;line-height:1.65;color:var(--avm-mut);margin:0 0 18px}
.avm-zap__tel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px}
.avm-zap__tel i{color:var(--avm-ko)}
.avm-zap__tel a{color:var(--avm-tx);font-weight:800;font-size:20px}
.avm-zap__tel span{color:var(--avm-mut);font-size:13px}

.avm-zap__info{border-radius:9px;padding:12px 15px;font-size:14.5px;font-weight:600;margin:0 0 14px}
.avm-zap__info.jest{background:#dcfce7;color:#14532d}
.avm-zap__info.blad{background:#fee2e2;color:#7f1d1d}

/* Trzy krótkie pola w rzędzie, a „uwagi" pod nimi na całą szerokość. Przy dwóch
   kolumnach wieloliniowe pole stało obok jednoliniowego „Telefonu" i rząd się rozjeżdżał. */
.avm-form__pola{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.avm-form__pola .avm-form__szerokie{grid-column:1 / -1}
.avm-form label{display:block;font-size:13px}
.avm-form__pola span{display:block;margin-bottom:6px;color:var(--avm-tx);font-weight:600}
.avm-form__pola b{color:var(--avm-cz)}
.avm-form input[type="text"],
.avm-form input[type="email"],
.avm-form input[type="tel"]{
  width:100%;height:46px;padding:0 13px;border:1px solid var(--avm-lin);border-radius:9px;
  font-size:14.5px;background:#fff;color:var(--avm-tx);outline:0;
}
.avm-form textarea{
  display:block;width:100%;min-height:100px;padding:11px 13px;resize:vertical;
  border:1px solid var(--avm-lin);border-radius:9px;
  font-size:14.5px;line-height:1.5;background:#fff;color:var(--avm-tx);outline:0;
}
.avm-form input:focus,.avm-form textarea:focus{border-color:var(--avm-ko);box-shadow:0 0 0 3px rgba(37,99,235,.16)}

/* Pole-pułapka dla botów: poza ekranem, ale nie `display:none` — część
   automatów pomija pola ukryte tą właściwością. */
.avm-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Wysokość widżetu zarezerwowana: skrypt ładuje się dopiero przy kontakcie
   z formularzem i bez tego pola pod spodem podskakiwały o 78 px. */
.avm-recaptcha{margin-top:16px;min-height:78px}

/* Natywny checkbox ma ~13 px — na telefonie za mały do trafienia palcem. 20 px
   i wysokość wiersza tekstu 20 px trzymają go w jednej linii z pierwszym wierszem. */
/* `label.` w selektorze — inaczej wygrywa ogólne `.avm-form label{display:block}`
   i tekst opływał checkbox zamiast stać obok niego. */
.avm-form label.avm-form__zgoda{
  display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  font-size:13px;line-height:20px;color:var(--avm-mut);cursor:pointer;
}
.avm-form__zgoda input{
  flex:0 0 20px;width:20px;height:20px;margin:0;cursor:pointer;accent-color:var(--avm-ko);
}
.avm-form__zgoda a{color:var(--avm-ko);text-decoration:underline}

/* Selektor z nazwą elementu i !important — paleta Blocksy wchodzi w
   `button[type="submit"]` stylem inline. */
.avm-form button.avm-form__przycisk{
  margin-top:16px;width:100%;height:50px;border:0;cursor:pointer;
  background:var(--avm-ko) !important;color:#fff !important;
  border-radius:9px;font-size:15.5px;font-weight:700;
}
.avm-form button.avm-form__przycisk:hover{background:var(--avm-ko-d) !important}

/* ——— produkty powiązane ——— */
.avm-pr__powiazane{margin-top:22px}
.avm-pr__powiazane h2{font-size:21px;font-weight:800;margin:0 0 14px}

@media (max-width:1000px){
  /* `minmax(0,1fr)`, nie `1fr` — przy samym `1fr` kolumna nie schodziła poniżej
     szerokości paska miniatur (5 zdjęć = 396 px) i cała karta była szersza od telefonu. */
  .avm-pr__gora,.avm-pr__dol,.avm-zap{grid-template-columns:minmax(0,1fr)}
  .avm-pr__gora{padding:20px;gap:24px}
  .avm-zap__lewo{border-right:0;border-bottom:1px solid var(--avm-lin)}
  .avm-zap__lewo,.avm-zap__prawo{padding:26px}
}
@media (max-width:640px){
  .avm-form__pola{grid-template-columns:1fr}
  .avm-pr__minia{flex-basis:72px}
  /* Strzałki na dole, żeby nie zasłaniały wąskiego zdjęcia. */
  .avm-lb{padding:64px 12px 84px}
  .avm-lb__wstecz,.avm-lb__dalej{top:auto;bottom:16px;transform:none}
  .avm-lb__licznik{bottom:30px}
  .avm-pr__brutto{font-size:28px}
  /* Na telefonie karta ma już boczny margines kontenera — 26–34 px wewnątrz
     zjadało szerokość pól i tekstu opisu. */
  .avm-pr__opis,.avm-pr__spec{padding:20px}
  .avm-zap__lewo,.avm-zap__prawo{padding:22px 20px}
  .avm-zap__lewo h2{font-size:21px}

  /* Opisy z hurtowni układają tekst i ikonę w dwóch kolumnach tabeli. Na 390 px
     kolumny miały po ~150 px, tekst wychodził poza kartę, a ikony 300 px rozpychały
     wiersze. Jedna kolumna: tekst, pod nim ikona w rozsądnym rozmiarze. */
  .avm-pr__tresc table,.avm-pr__tresc tbody,.avm-pr__tresc tr,.avm-pr__tresc td{
    display:block;width:auto !important;height:auto !important;
  }
  .avm-pr__tresc td{padding:0}
  .avm-pr__tresc tr{margin-bottom:18px}
  .avm-pr__tresc td img{display:block;float:none;margin:10px auto 0;max-width:min(100%,180px)}
  .avm-pr__tresc td p[align]{text-align:left}
}