/* Vitamin Shop - produkt.css
   Karta produktu: galeria, boks zakupowy, warianty, tryby zakupu,
   pasek sekcji, przyklejony pasek zakupu, zestaw, tabela skladu.
   Warunek: is_product().
   Zrodlo: wizualizacja sklepu (assets/css/style.css). */

/* ---------- 30. STRONA PRODUKTU ---------- */
.pdp{display:grid;gap:var(--s6)}
/* Obie kolumny siatki maja klase vs-pdp__kol - daje ja wtyczka produktu galerii
   i szablon kolumnie decyzyjnej. min-width:0 jest tu obowiazkowe: element siatki
   ma domyslnie min-width:auto, wiec dluga tabela skladu albo nazwa wariantu
   rozpycha sciezke ponad zadeklarowana szerokosc i wypycha kolumne obok. */
.vs-pdp__kol{min-width:0}
/* woocommerce-layout.css ustawia div.summary na float:right i width:48% - to
   selektor .woocommerce div.product div.summary o swoistosci 0,3,3, a nasza
   klasa ma 0,1,0. Float w siatce jest ignorowany, ale szerokosc juz nie: boks
   zakupowy zwezal sie do polowy swojej kolumny i po prawej zostawala pusta
   plama. Dolozona klasa podnosi swoistosc ponad arkusz sklepu. */
.woocommerce div.product div.summary.vs-pdp__kol,
div.product div.summary.vs-pdp__kol{float:none;clear:none;width:auto;margin:0}
@media(min-width:1024px){
  /* Rowne kolumny: wczesniej szersza byla galeria, a wezsza kolumna decyzyjna.
     align-items:start jest load-bearing — rozciagniety element siatki ma wysokosc
     wiersza i sticky nigdy sie nie uruchamia. */
  .pdp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start}
  .pdp>div:first-child{position:sticky;top:144px}
}

.gallery{display:grid;gap:12px}
@media(min-width:640px){.gallery{grid-template-columns:78px 1fr;align-items:start}}
.gallery__thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:64px;gap:8px;
  overflow-x:auto;order:2;scroll-snap-type:x mandatory}
@media(min-width:640px){
  .gallery__thumbs{grid-auto-flow:row;grid-auto-columns:auto;order:0;overflow:visible;
    overflow-y:auto;max-height:520px}
}
.gallery__thumbs button{aspect-ratio:1/1;border:2px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;background:var(--surface);transition:border-color var(--dur-1);
  scroll-snap-align:start}
/* Miniatury to grupa przyciskow przelacznych (role=group + aria-pressed),
   a nie zakladki - wtyczka produktu przestala wystawiac aria-selected,
   wiec aktywna miniatura tracila tu ramke. */
.gallery__thumbs button[aria-pressed="true"]{border-color:var(--brand)}
.gallery__thumbs button:hover:not([aria-pressed="true"]){border-color:var(--slate-2)}
.gallery__thumbs button:active{transform:scale(.96)}
.gallery__thumbs img{width:100%;height:100%;object-fit:cover}
.gallery__main{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;
  background:var(--surface);border:1px solid var(--line)}
.gallery__main img{width:100%;height:100%;object-fit:cover;transition:opacity var(--dur-2)}
.gallery__main .card__badges{top:12px;left:12px}
.gallery__zoom{position:absolute;bottom:12px;right:12px;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;
  color:var(--ink);box-shadow:var(--sh-1)}
/* Tlo wpisane na sztywno, wiec ciemna wersja musi objac takze tryb systemowy -
   inaczej bialy krazek z bialym symbolem na ciemnym zdjeciu. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gallery__zoom{background:rgba(22,27,33,.94)}
}
:root[data-theme="dark"] .gallery__zoom{background:rgba(22,27,33,.94)}
.gallery__dots{display:flex;justify-content:center;gap:6px;margin-top:4px}
@media(min-width:640px){.gallery__dots{display:none}}
.gallery__dots i{width:7px;height:7px;border-radius:50%;background:var(--line);
  transition:all var(--dur-1)}
.gallery__dots i.is-on{background:var(--brand);width:20px;border-radius:99px}

.buybox{display:flex;flex-direction:column;gap:var(--s4)}
/* H1 produktu bil sie z H2 sekcji (30,4 vs 40 px). Podnosimy H1 i sciagamy
   H2 wylacznie na tej stronie — 40 px jest poprawne na pozostalych. */
.buybox h1{font-family:'Barlow',sans-serif;font-size:clamp(1.5rem,2.6vw,2rem);
  text-transform:none;letter-spacing:-.01em;font-weight:700;line-height:1.2}
/* Klasa body to vs-pdp - taka dopisuje motyw i taka nosi korzen wtyczki produktu.
   Wczesniejszy selektor .page-pdp nie istnial w zadnym markupie, wiec naglowki
   sekcji na karcie produktu zostawaly przy 40 px i bily sie z nazwa produktu. */
.vs-pdp .h2{font-size:clamp(1.35rem,2.2vw,1.625rem)}
.buybox__brand{display:flex;align-items:center;gap:10px}
/* Marka bez dzialajacego archiwum wychodzi z wtyczki jako span, nie a -
   bez tego drugiego selektora zostawala calkiem nieostylowana. Plakietka
   obok jest tez spanem, stad wykluczenie .badge. */
.buybox__brand a,
.buybox__brand > span:not(.badge){font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--brand-ink);font-size:.9375rem}
.buybox__rate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.875rem}
.buybox__rate a{text-decoration:underline;color:var(--slate)}
.buybox__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.buybox__price .price{font-size:2.5rem}
.buybox__unit{font-size:.8125rem;color:var(--slate)}
.buybox__omni{font-size:.75rem;color:var(--slate-2)}

.variants{display:grid;gap:9px}
.variants__label{font-size:.8125rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--slate-2)}
.variants__opts{display:flex;flex-wrap:wrap;gap:8px}
.vopt{border:2px solid var(--line);border-radius:var(--r-sm);padding:9px 15px;
  min-height:48px;display:inline-flex;flex-direction:column;justify-content:center;
  font-weight:600;font-size:.9375rem;transition:all var(--dur-1);background:var(--card);
  text-align:left}
.vopt small{font-size:.75rem;color:var(--slate);font-weight:500}
.vopt:hover{border-color:var(--brand-ink)}
.vopt[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-tint)}
.vopt[disabled]{opacity:.4;text-decoration:line-through;pointer-events:none}

.buyopt{border:2px solid var(--line);border-radius:var(--r-md);padding:14px;
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;transition:all var(--dur-1);
  background:var(--card)}
.buyopt:hover{border-color:var(--brand-ink)}
.buyopt.is-sel{border-color:var(--brand);background:var(--brand-tint)}
.buyopt input{width:20px;height:20px;accent-color:var(--brand);margin-top:2px;flex:none}
.buyopt b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9375rem}
/* Celowo klasa, nie `.buyopt span` — tamten selektor nadpisywał kolor
   badge'ów i cen zagnieżdżonych w tym samym bloku. */
.buyopt__desc{font-size:.8125rem;color:var(--slate);display:block;margin-top:2px}
.buyopt .price{font-size:1.25rem;display:inline}

.buy-actions{display:flex;gap:10px;align-items:stretch}
.buy-actions .qty{flex:none;height:56px}
.buy-actions .qty button{height:100%;width:44px}
.buy-actions .qty input{height:100%}
.buy-actions .btn{flex:1}
@media(max-width:420px){
  .buy-actions{flex-wrap:wrap}
  .buy-actions .btn{order:3;flex:1 0 100%}
}

.deliv{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.deliv__row{display:flex;gap:12px;padding:13px 15px;align-items:flex-start;
  border-bottom:1px solid var(--line-2)}
.deliv__row:last-child{border-bottom:0}
.deliv__row svg{color:var(--brand-ink);flex:none;margin-top:2px}
.deliv__row b{display:block;font-size:.875rem;font-weight:700}
.deliv__row span{font-size:.8125rem;color:var(--slate)}
.deliv__row .hot{color:var(--hot);font-weight:700}

/* Nawigacja sekcji PDP */
.pdp-nav{position:sticky;top:var(--header-h);z-index:var(--z-sticky);background:var(--bg);
  border-bottom:1px solid var(--line);margin-top:var(--s8)}
/* 76 (.header__bar) + 1 (border-top .nav) + 50 (.nav__list) + 1 (border-bottom .header) */
@media(min-width:1024px){.pdp-nav{top:128px}}
.pdp-nav ul{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.pdp-nav ul::-webkit-scrollbar{display:none}
.pdp-nav a{display:inline-flex;align-items:center;height:52px;padding:0 15px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:.9375rem;white-space:nowrap;color:var(--slate);
  border-bottom:3px solid transparent;transition:all var(--dur-1)}
.pdp-nav a:hover{color:var(--ink)}
.pdp-nav a.is-on{color:var(--brand-ink);border-bottom-color:var(--brand)}

/* Sticky pasek kupna (mobile) */
.stickybuy{position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  background:var(--bg);border-top:1px solid var(--line);padding:10px 16px;z-index:var(--z-sticky);
  display:flex;gap:12px;align-items:center;transform:translateY(130%);
  transition:transform var(--dur-3) var(--ease-out);box-shadow:var(--sh-up)}
.stickybuy.is-on{transform:none}
@media(min-width:1024px){
  /* trzyma te sama kolumne co .container zamiast stalych 32 px */
  .stickybuy{bottom:0;padding-block:var(--s3);
    padding-inline:max(var(--s7), calc((100% - var(--container))/2 + var(--s7)))}
}
.stickybuy img{width:46px;height:46px;border-radius:var(--r-sm);object-fit:cover;flex:none;
  background:var(--surface-2)}
.stickybuy__i{flex:1;min-width:0}
.stickybuy__i b{font-size:.8125rem;font-weight:600;display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.stickybuy__i .price{font-size:1.25rem}
.stickybuy .btn{flex:none}
@media(max-width:389px){.stickybuy img{display:none}}

/* Zestaw „często kupowane razem" */
.bundle{border:2px dashed var(--line);border-radius:var(--r-lg);padding:var(--pad-panel-lg)}
.bundle__items{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.bundle__it{display:flex;flex-direction:column;gap:8px;width:118px}
.bundle__it img{width:118px;height:118px;object-fit:cover;border-radius:var(--r-sm);
  background:var(--surface-2)}
.bundle__it label{display:flex;gap:7px;align-items:flex-start;font-size:.75rem;
  line-height:1.35;cursor:pointer}
.bundle__it input{accent-color:var(--brand);width:20px;height:20px;flex:none;margin-top:1px}
.bundle__plus{font-size:1.5rem;color:var(--slate-2);font-weight:300}
.bundle__sum{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;
  padding-top:var(--s5);border-top:1px solid var(--line)}

/* Tabele składu */
/* border-collapse:collapse z resetu blokuje border-radius — stad ostre rogi tabel */
.spec{width:100%;font-size:.9375rem;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;border-collapse:separate;border-spacing:0}
.spec th,.spec td{padding:var(--s3) var(--s4);text-align:left;border-bottom:1px solid var(--line-2)}
/* naglowek o poziom ciemniejszy niz zebra — wczesniej mial dokladnie ten sam token */
.spec thead th{background:var(--surface-2);font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem;color:var(--slate)}
.spec tbody tr:last-child td{border-bottom:0}
.spec td:last-child,.spec th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.spec tbody tr:nth-child(even){background:transparent}

/* ---------- Zszycie z markupem wtyczki produktu ----------
   Przy aktywnym motywie wtyczka NIE laduje swojego szkieletu, wiec te klasy
   nie maja zadnego innego zrodla stylu. Bez nich opis produktu zlewa sie
   w jedna sciane tekstu (reset zeruje marginesy akapitow), a formularz zakupu
   traci odstepy miedzy wariantami a przyciskiem. */
.vs-pdp__form{display:flex;flex-direction:column;gap:var(--s4)}
/* Opis przeniesiony ze sprzedazy zewnetrznej to w praktyce ciag BANEROW,
   a nie akapitow. Miara czytania na calym bloku sciskala je do 30em i robila
   z pelnowymiarowej grafiki znaczek. Dlatego miare dostaje TEKST, a obrazy
   maja wlasny, szerszy limit. */
.vs-pdp__opis{max-width:none;line-height:1.65}
.vs-pdp__opis > p,
.vs-pdp__opis > ul,
.vs-pdp__opis > ol,
.vs-pdp__opis > h1,
.vs-pdp__opis > h2,
.vs-pdp__opis > h3,
.vs-pdp__opis > h4{max-width:var(--measure-lg)}

/* Naglowki w przeniesionym opisie nie maja wlasnej klasy, wiec bez tych regul
   wygladaja jak zwykly pogrubiony akapit. */
.vs-pdp__opis h1,.vs-pdp__opis h2,.vs-pdp__opis h3,.vs-pdp__opis h4{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;line-height:1.15;
  color:var(--ink);margin:1.6em 0 .5em;text-transform:uppercase;letter-spacing:.01em;
}
.vs-pdp__opis h1{font-size:1.75rem}
.vs-pdp__opis h2{font-size:1.5rem}
.vs-pdp__opis h3{font-size:1.25rem}
.vs-pdp__opis h4{font-size:1.0625rem}
.vs-pdp__opis > :first-child{margin-top:0}

/* Obraz w opisie. Limit 760px, bo baner z Allegro potrafi miec 1200 pikseli
   i bez niego zjada cala szerokosc kolumny, spychajac tekst pod zagiecie. */
.vs-pdp__opis img{
  max-width:min(100%,760px);height:auto;
  margin:1.25em 0;border-radius:var(--r-md);
}
.vs-pdp__opis p:has(> img){max-width:none}
.vs-pdp__opis p > img:only-child{margin-block:0}

.vs-pdp__opis p{margin:0 0 1em}
.vs-pdp__opis p:last-child{margin-bottom:0}
.vs-pdp__opis ul,.vs-pdp__opis ol{padding-left:22px;margin:0 0 1em}
.vs-pdp__opis ul{list-style:disc}
.vs-pdp__opis ol{list-style:decimal}
.vs-pdp__opis li+li{margin-top:6px}
.vs-pdp__opis strong{color:var(--ink)}
.vs-pdp__certy{flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.vs-pdp__recenzje{min-width:0}

/* Blok „kluczowe fakty" — pod odpowiedzi AI (AIO) */
.facts{background:var(--brand-tint);border-left:4px solid var(--brand);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s5)}
.facts h3{font-size:1.0625rem;margin-bottom:10px}
.facts ul{display:grid;gap:8px}
.facts li{display:flex;gap:10px;font-size:.9375rem;align-items:flex-start;max-width:var(--measure-lg)}
.facts li svg{color:var(--brand-ink);flex:none;margin-top:3px}
.facts li b{font-weight:700}