/* Warstwa produktowa vcuthoracicimaging.com — osobny arkusz od archiwum.
   Zmienne powtorzone lokalnie, zeby strona produktowa nie zalezala od
   main.css archiwum: gdyby ktos tamten przebudowal, ta ma dzialac dalej. */

:root{
  --t:#15202b;        /* tekst */
  --s:#5d6b7a;        /* tekst drugorzedny */
  --l:#e2e7ee;        /* linie */
  --tlo:#fff;
  --karta:#f7f9fc;
  --akcent:#0b7a4b;   /* zielen: przyciski i cena */
  --akcent-ciemny:#095c39;
  --akcent-tlo:#eaf6f0;
  /* Kolor NAPISU na przycisku trzymany osobno od koloru linku.
     W ciemnym motywie akcent musi byc jasny (zeby tekst akcentowany byl
     czytelny na ciemnym tle), ale wtedy bialy napis na tym samym jasnym
     zielonym daje kontrast 2,3 — ponizej progu. Dlatego tam napis jest
     ciemny. Zmierzone w DOM, nie zalozone. */
  --guzik-tekst:#fff;
  --uwaga:#8a5a00;
  --uwaga-tlo:#fff8e8;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --t:#e9eef4; --s:#9fadbd; --l:#2b3744; --tlo:#0f151c; --karta:#161f29;
    --akcent:#31c184; --akcent-ciemny:#28a06d; --akcent-tlo:#13261e;
    --uwaga:#e0b457; --uwaga-tlo:#241f12; --guzik-tekst:#0d1319;
  }
}
:root[data-theme="dark"]{
  --t:#e9eef4; --s:#9fadbd; --l:#2b3744; --tlo:#0f151c; --karta:#161f29;
  --akcent:#31c184; --akcent-ciemny:#28a06d; --akcent-tlo:#13261e;
  --uwaga:#e0b457; --uwaga-tlo:#241f12; --guzik-tekst:#0d1319;
}

*{box-sizing:border-box}
body.nutra{
  margin:0;background:var(--tlo);color:var(--t);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  /* ⚠ BYLO TU `overflow-x:hidden` i ZABIJALO `position:sticky` na
     formularzu zamowienia: overflow na body tworzy wlasny kontener
     przewijania. Przed przewijaniem w bok chroni `html{overflow-x:clip}`
     na koncu arkusza — `clip` przycina bez tworzenia kontenera. */
}
.in{max-width:1190px;margin:0 auto;padding:0 16px}

.top{border-bottom:1px solid var(--l);padding:12px 0;margin-bottom:26px}
.top .znak{font-weight:700;color:var(--t);text-decoration:none;font-size:1rem}

/* okruszki */
.okruszki{font-size:.86rem;color:var(--s);margin:0 auto 16px;display:flex;
          flex-wrap:wrap;gap:7px;align-items:center}
.okruszki a{color:var(--s);text-decoration:none}
.okruszki a:hover{text-decoration:underline}
.okruszki [aria-current]{color:var(--t)}

/* hero: zdjecie + tresc obok, na telefonie jedno pod drugim */
.hero{display:grid;gap:30px;align-items:center;margin:0 auto 34px;
      grid-template-columns:minmax(0,48fr) minmax(0,52fr)}
/* HERO = zdjecie opakowania, nie scena z doklejonym produktem.
   Wyciety obiekt polozony na obcym tle czyta sie jak wklejka — mielismy to
   juz przy Ostefrinie. Tlo robi gradient z poswiata, wiec produkt i podloze
   to jedno swiatlo, a nie dwa zdjecia na sobie. */
/* Kadr ciasniejszy, produkt wiekszy: na renderze butelka czytala sie jak
   „niewielki przedmiot na duzym tle" — zajmowala ok. 1/3 powierzchni kadru.
   Cel: 70–80 % wysokosci pola. */
.hero-media{position:relative;display:grid;place-items:center;
            border-radius:14px;overflow:hidden;padding:16px 14px 22px;
            min-height:376px;
            background:
              radial-gradient(120% 95% at 50% 8%, #f4f8fc 0%, #e6edf5 46%, #d7e1ec 100%)}
/* poswiata za produktem — ten sam chwyt co na adenicilu */
.hero-media::before{content:"";position:absolute;width:62%;height:58%;
            top:16%;left:19%;border-radius:50%;
            background:radial-gradient(circle, rgba(11,122,75,.16) 0%, rgba(11,122,75,0) 70%)}
/* cien kontaktowy POD produktem, wysrodkowany razem z nim —
   przesuniety cien byl drugim powodem, przez ktory packshot wygladal na wklejke */
.hero-media::after{content:"";position:absolute;bottom:20px;left:50%;
            transform:translateX(-50%);width:46%;height:16px;border-radius:50%;
            background:radial-gradient(ellipse, rgba(20,32,43,.26) 0%, rgba(20,32,43,0) 72%)}
.hero-pack{position:relative;z-index:1;max-height:330px;width:auto;
           max-width:94%;height:auto;display:block;
           filter:drop-shadow(0 2px 3px rgba(20,32,43,.22))
                  drop-shadow(0 18px 30px rgba(20,32,43,.20))}
.hero-tresc{min-width:0}
.hero h1{margin:.1em 0 .45em;font-size:clamp(1.5rem,3.2vw,2.05rem)}
.kategoria{margin:0 0 .3em;font-size:.8rem;letter-spacing:.07em;
           text-transform:uppercase}
.kategoria a{color:var(--akcent);text-decoration:none;font-weight:600}
.hero-lead{font-size:1.04rem;color:var(--s);margin:0 0 1.1em}
.hero-cta{margin:0 0 .6em;max-width:330px}
.hero-drobne{font-size:.82rem;color:var(--s);margin:0}

/* cennik: cena przekreslona pojawia sie tylko gdy jest realna podstawa */
.cennik{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0 0 1em}
.cennik .stara{font-size:1.15rem;color:var(--s);text-decoration:line-through}
.cennik .nowa{font-size:2.15rem;font-weight:700;color:var(--akcent);
              line-height:1.05}
.cennik .oszczedzasz,.cennik .gratis{font-size:.85rem;font-weight:600;
       color:var(--akcent);background:var(--akcent-tlo);
       padding:4px 10px;border-radius:99px}

@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:18px;margin-bottom:26px}
  .hero-media{min-height:238px;padding:12px 10px 18px}
  .hero-pack{max-height:204px;max-width:88%}
  .hero-cta{max-width:none}
}

/* uklad: tekst + przyklejona karta zamowienia */
main.in{display:grid;gap:36px;align-items:start;
        grid-template-columns:minmax(0,1fr) 330px;padding-bottom:90px}
/* Wiersz mial 84 znaki — za dlugo, oko gubi poczatek nastepnej linii.
   Optimum to 60–75 znakow, stad ograniczenie szerokosci bloku tekstu.
   Zmierzone, nie przyjete na slowo. */
.tekst{min-width:0;font-size:17px}
.tekst > p,.tekst > ul,.tekst > ol{max-width:68ch}

h1{font-size:clamp(1.55rem,3.6vw,2.1rem);line-height:1.25;margin:0 0 .6em}
/* Naglowek z ikona. Tekst mial 52 akapity i miejscami 7 pod rzad —
   ikona przy H2 daje oku punkt zaczepienia przy przewijaniu. */
h2{font-size:clamp(1.35rem,2.3vw,1.72rem);line-height:1.25;
   margin:2.4em 0 .6em;padding-top:.3em;
   display:flex;align-items:center;gap:11px}
h2 .ikona{flex:0 0 auto;width:20px;height:20px;color:var(--akcent);
          padding:8px;border-radius:9px;background:var(--akcent-tlo);
          box-sizing:content-box}
h2 > span{min-width:0}

/* pasek liczb pod hero */
.kafelki{list-style:none;display:grid;gap:12px;margin:0 auto 32px;padding:0;
         max-width:1120px;grid-template-columns:repeat(4,1fr)}
.kafelki li{background:var(--karta);border:1px solid var(--l);border-radius:14px;
            padding:20px 16px;min-height:104px;text-align:center;
            display:flex;flex-direction:column;justify-content:center}
.kaf-liczba{display:block;font-size:1.6rem;font-weight:700;color:var(--akcent);
            line-height:1.1}
.kaf-opis{display:block;font-size:.8rem;color:var(--s);margin-top:.3em;
          line-height:1.35}
@media(max-width:720px){
  .kafelki{grid-template-columns:repeat(2,1fr);gap:10px}
  .kaf-liczba{font-size:1.35rem}
}
h3{font-size:1.06rem;margin:1.5em 0 .4em}
p{margin:0 0 1em}
/* :not(.guzik) — inaczej regula dla linkow w ciemnym motywie ma wyzsza
   specyficznosc niz .guzik i robi zielony tekst na zielonym tle przycisku */
a:not(.guzik){color:var(--akcent-ciemny)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) a:not(.guzik){color:var(--akcent)}}
strong{font-weight:650}

ul{margin:.3em 0 1.2em;padding-left:1.35em}
li{margin-bottom:.45em}

/* tabele — przewijane poziomo WEWNATRZ ramki, nie cala strona */
.tabela{overflow-x:auto;margin:0 0 1.4em;border:1px solid var(--l);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:min(100%,420px)}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--l);
      vertical-align:top}
th{background:var(--karta);font-weight:650}
tr:last-child td{border-bottom:none}

/* wejscia sprzedazowe w tresci */
.cta{margin:1.5em 0}
.guzik{display:inline-block;background:var(--akcent);color:var(--guzik-tekst);
       text-decoration:none;font-weight:650;padding:13px 22px;border-radius:9px;
       border:none;cursor:pointer;font-size:1rem;line-height:1.3;text-align:center}
.guzik:hover{background:var(--akcent-ciemny)}
.guzik.duzy{display:block;width:100%;padding:15px 18px;font-size:1.03rem}

.zastrzezenie{font-size:.88rem;color:var(--s);border-top:1px solid var(--l);
              padding-top:1.1em;margin-top:2em}

/* FAQ: natywne <details>, bez JS — dziala tez, gdy skrypty nie wstana */
.faq{display:grid;gap:8px;margin:.4em 0 1.6em}
.pyt{border:1px solid var(--l);border-radius:11px;background:var(--karta);
     overflow:hidden}
.pyt summary{cursor:pointer;padding:17px 46px 17px 20px;font-weight:600;min-height:48px;box-sizing:border-box;
             position:relative;list-style:none;line-height:1.45}
.pyt summary::-webkit-details-marker{display:none}
/* strzalka rysowana z dwoch kresek, zeby nie zalezec od fontu ikon */
.pyt summary::after{content:"";position:absolute;right:18px;top:50%;
             width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--s);
             border-bottom:2px solid var(--s);transform:rotate(45deg);
             transition:transform .18s ease}
.pyt[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.pyt summary:hover{color:var(--akcent)}
.pyt summary:focus-visible{outline:2px solid var(--akcent);outline-offset:-2px}
.odp{padding:0 20px 17px;color:var(--s);line-height:1.6}
.odp p{margin:0 0 .7em}
.odp p:last-child{margin-bottom:0}

/* ───── strona kategorii ───── */
main.in.kat{grid-template-columns:1fr;padding-bottom:50px}
.uwaga-med{background:var(--uwaga-tlo);border-left:3px solid var(--uwaga);
           color:var(--t);padding:13px 16px;border-radius:0 8px 8px 0;
           font-size:.94rem;margin:1.4em 0 0}
.pozycje{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.pozycja{display:grid;gap:18px;grid-template-columns:160px minmax(0,1fr);
         border:1px solid var(--l);border-radius:14px;padding:18px;
         background:var(--karta);align-items:start}
.pozycja-foto{display:block}
.pozycja-foto img{width:100%;height:auto;border-radius:10px;display:block}
.pozycja-tresc{min-width:0}
.pozycja h2{margin:0 0 .15em;font-size:1.25rem;padding:0}
.pozycja h2 a{color:var(--t);text-decoration:none}
.pozycja h2 a:hover{text-decoration:underline}
.pozycja-forma{font-size:.85rem;color:var(--s);margin:0 0 .6em}
.pozycja-stopka{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
                margin:1em 0 0}
.pozycja-cena{font-size:1.2rem;font-weight:700;color:var(--akcent)}
@media(max-width:620px){
  .pozycja{grid-template-columns:1fr}
  .pozycja-foto{max-width:150px}
}

/* Bilans: „za" i „przeciw" obok siebie, nie jedno pod drugim.
   Dwie listy w pionie czytaly sie jak kolejny kawalek tekstu. */
.bilans{display:grid;gap:16px;margin:1.2em 0 1.8em;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))}
.bilans section{border:1px solid var(--l);border-radius:14px;padding:18px 20px;
                background:var(--karta)}
.bilans h3{margin:0 0 .7em;font-size:1rem;letter-spacing:.04em;
           text-transform:uppercase}
.plusy h3{color:var(--akcent)}
.minusy h3{color:var(--uwaga)}
.bilans ul{margin:0;padding:0;list-style:none}
.bilans li{position:relative;padding-left:27px;margin-bottom:.75em;
           font-size:.96rem;line-height:1.55}
.bilans li:last-child{margin-bottom:0}
/* znaczniki rysowane z kresek — nie zaleza od fontu ani emoji */
.plusy li::before,.minusy li::before{content:"";position:absolute;left:2px;top:.42em}
.plusy li::before{width:11px;height:6px;border-left:2px solid var(--akcent);
                  border-bottom:2px solid var(--akcent);transform:rotate(-45deg)}
.minusy li::before{width:11px;height:11px;top:.3em;
                   background:linear-gradient(currentColor,currentColor) 50%/2px 11px no-repeat,
                              linear-gradient(currentColor,currentColor) 50%/11px 2px no-repeat;
                   color:var(--uwaga);transform:rotate(45deg)}

/* szerokie zdjecie przerywajace akapity */
.foto{margin:1.6em 0 1.9em;max-width:none}
.foto img{width:100%;height:auto;max-height:330px;object-fit:cover;
          display:block;border-radius:14px;background:var(--karta)}
.foto figcaption{font-size:.87rem;color:var(--s);margin-top:.6em;
                 line-height:1.5;max-width:68ch}

/* zdjecia skladnikow — po jednym na pozycje ze skladu */
.skladniki{display:grid;gap:16px;margin:1.3em 0 1.8em;
           grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr))}
.skladniki figure{margin:0}
.skladniki img{width:100%;height:190px;object-fit:cover;display:block;
               border-radius:10px;border:1px solid var(--l);background:var(--karta)}
.skladniki figcaption{font-size:.84rem;color:var(--s);margin-top:.5em;
                      line-height:1.4}

/* Zdjecie opakowania w karcie zamowienia. Zajmowalo 80 % szerokosci karty
   i spychalo cene z formularzem pod ekran — teraz stoi na jasnym kafelku,
   ktory odcina je od ciemnego tla karty i trzyma rozsadna wysokosc. */
.packshot{display:block;max-width:none;width:auto;height:auto;max-height:132px;
          margin:0 auto 14px;object-fit:contain}
.zamow .packshot{padding:10px;border-radius:10px;
   background:radial-gradient(120% 100% at 50% 10%, #f6f9fc 0%, #e8eef5 100%)}

/* karta zamowienia */
.zamow{background:var(--karta);border:1px solid var(--l);border-radius:14px;
       padding:22px;position:sticky;top:18px}
.zamow h2{margin:0 0 .35em;font-size:1.2rem;padding:0}
.cena-duza{font-size:2rem;font-weight:700;color:var(--akcent);margin:0 0 .15em;
           line-height:1.1}
.pod-cena{font-size:.87rem;color:var(--s);margin:0 0 1.2em}
.lead label{display:block;margin-bottom:12px;font-size:.9rem;color:var(--s)}
.lead input{display:block;width:100%;margin-top:5px;padding:12px;font-size:1rem;
            border:1px solid var(--l);border-radius:8px;background:var(--tlo);
            color:var(--t)}
.lead input:focus{outline:2px solid var(--akcent);outline-offset:1px}
.drobne{font-size:.83rem;color:var(--s);margin:.9em 0 0}

/* pasek na telefonie */
.pasek{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
       background:var(--tlo);border-top:1px solid var(--l);
       padding:9px 14px;align-items:center;justify-content:space-between;gap:12px}
.pasek-cena{font-weight:700;color:var(--akcent);font-size:1.15rem}
.pasek .guzik{padding:11px 20px}

.stopka{border-top:1px solid var(--l);margin-top:40px;padding:18px 0 80px}
.stopka-linki{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 12px;
              font-size:.88rem}
.stopka-linki a{color:var(--s);text-decoration:none}
.stopka-linki a:hover{text-decoration:underline;color:var(--akcent)}

/* dokumenty prawne — waski blok tekstu, bo czyta sie je linijka po linijce */
.pismo{max-width:72ch}
.pismo h2{font-size:1.18rem;margin:2em 0 .5em;display:block}
.pismo p,.pismo li{font-size:1rem;line-height:1.72}
.pismo ul{margin:.4em 0 1.3em}
.pismo li{margin-bottom:.6em}
.pisma-inne{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;
            padding-top:20px;border-top:1px solid var(--l)}
.pisma-inne a{font-size:.9rem;color:var(--s);text-decoration:none;
              border:1px solid var(--l);border-radius:99px;padding:7px 15px}
.pisma-inne a:hover{color:var(--akcent);border-color:var(--akcent)}

/* lista kategorii na stronie rynku */
.kategorie{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;
           grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.kategorie a{display:block;border:1px solid var(--l);border-radius:14px;
             padding:20px;background:var(--karta);text-decoration:none;
             color:var(--t)}
.kategorie a:hover{border-color:var(--akcent)}
.kat-nazwa{display:block;font-weight:650;font-size:1.12rem;margin-bottom:.3em}
.kat-opis{display:block;font-size:.93rem;color:var(--s);line-height:1.5}
.kat-ile{display:block;font-size:.82rem;color:var(--akcent);margin-top:.7em;
         font-weight:600}

@media(max-width:860px){
  main.in{grid-template-columns:1fr}
  .zamow{position:static;order:2}
  .pasek{display:flex}
}

/* ───── szerzej (8.10, ta sama uwaga co przy archiwum) ─────
   Karta produktowa miala kontener 1190 px. Po poszerzeniu archiwum do
   1340 px dwie czesci serwisu mialyby rozna szerokosc — a to ta sama
   strona i ten sam naglowek u gory. */
.in{max-width:1340px}
.kafelki{max-width:1240px}

/* ───── tekst na calej kolumnie (8.10, Krzysiek: „poszerz tez tekst") ─────
   Akapity mialy `max-width:68ch` — limit, ktory sam wczesniej wpisalem dla
   czytelnosci wiersza. Przy kontenerze 1340 px konczyly sie w polowie
   kolumny i prawa strona zostawala pusta, co wyglada na usterke, a nie na
   decyzje typograficzna.

   Zdejmuje limit i rekompensuje luzniejsza interlinia — dluzszy wiersz
   przy wiekszym odstepie czyta sie lepiej niz dlugi wiersz ciasno zlozony. */
.tekst > p, .tekst > ul, .tekst > ol{max-width:none}
.tekst{line-height:1.76}
.tekst li{margin-bottom:.45em}

/* formularz przy szerszym kontenerze nie moze zostac chudym paskiem */
@media(min-width:861px){
  main.in{grid-template-columns:minmax(0,1fr) 360px;gap:44px}
}

/* tabele i bilans korzystaja z calej szerokosci */
.bilans{gap:24px}

/* bezpiecznik: `clip` przycina bez tworzenia kontenera przewijania,
   wiec przyklejony formularz dziala dalej (hidden by go zepsul) */
html{overflow-x:clip}

/* ───── zdjecia w tresci bez przycinania (8.10) ─────
   `.foto img` mialo `max-height:330px` z `object-fit:cover`. Przy obrazie
   kwadratowym oznaczalo to wyciecie SRODKOWEGO PASA — gora i dol
   opakowania znikaly. Na zrzucie od Krzyska bylo widac „HONDRO SO"
   zamiast calej nazwy.

   Teraz sceny przychodza juz w proporcji 16:9 (`aspect_ratio` w API),
   wiec nie ma czego przycinac: obraz pokazuje sie w calosci, a wysokosc
   wynika z proporcji. `aspect-ratio` rezerwuje miejsce przed zaladowaniem,
   zeby tekst nie skakal. */
.foto img{
  max-height:none;
  object-fit:contain;
  aspect-ratio:3/2;
  background:var(--karta);
}

/* siatka skladnikow zostaje przycinana celowo — to kafelki o rownej
   wysokosci, a nie zdjecia produktu */

/* ───── podobne produkty z tej samej kategorii (8.10) ─────
   Sekcja na dole tresci: kto trafil z frazy markowej, a produkt mu nie
   pasuje, dostaje alternatywe zamiast wychodzic. Przy okazji karty
   w jednej kategorii zaczynaja sie linkowac wzajemnie. */
.podobne{margin:3em 0 1em;padding-top:1.6em;border-top:1px solid var(--l)}
.podobne h2{margin:0 0 1em}
.podobne-lista{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.podobny a{display:block;text-decoration:none;color:var(--t);
  background:var(--karta);border:1px solid var(--l);border-radius:12px;
  padding:14px;transition:border-color .15s}
.podobny a:hover{border-color:var(--akcent)}
/* ⚠ `contain`, nie `cover` — packshot przyciety w kafelku traci gore
   albo dol opakowania, a to wlasnie etykieta sprzedaje */
.podobny img{width:100%;height:150px;object-fit:contain;display:block;
  margin-bottom:10px}
.podobny-nazwa{display:block;font-weight:600;font-size:.98rem;line-height:1.3}
.podobny-cena{display:block;margin-top:4px;color:var(--akcent);font-weight:700}