/* CO DOSTAJESZ ZA 999 ZŁ + PARAGON — ostatnia sekcja strony (01.10.2026, wersja 2 po uwagach Kuby).
   Wersja 1 (paragon sam na pustym ekranie, sticky, druk sterowany scrollem; kopia _kopie/paragon-v1-2026-10-01.*) odrzucona:
   „sztuczne, za wąskie na desktopie, po bokach nic nie ma, nie daje wartości, myślałem, że nie działa”. Teraz układ jak strona
   zamówienia: Z LEWEJ nagłówek i lista siedmiu pozycji z opisem, co to jest i po co (treść w src/paragon.js), Z PRAWEJ paragon jako
   podsumowanie z kwotą i przyciskiem. Paragon drukuje się SAM, raz, kiedy wjedzie w kadr (ok. 1,2 s, jak drukarka), nic nie jest
   ukryte za scrollem. Telefon: lista, pod nią paragon. Żadnej tafli, szkła ani kafelka: szary papier na całej szerokości, lekka
   winieta, szczelina drukarki, papier termiczny, przycisk z hero.

   ODDZIELENIE OD WODY: sekcja nieprzezroczysta (tło --papier, position:relative, z-index nad płótnem #liquid), płótno obcięte clip-path
   do górnej krawędzi sekcji (--lq-dol liczy paragon.js), zapas wody tak, żeby kolor wszedł w całości wcześniej (src/liquid.js). */

.paragon{position:relative;z-index:2;background:var(--papier);
  --pap:#f6f3ec;                 /* papier termiczny: biały lekko ciepły, odstaje od chłodnego tła strony */
  --druk:#3b3936;                /* druk: ciemnoszary, nie czarny */
  --druk-slaby:#7b7670;          /* dopiski, kropki, drobny druk */
  --szer:380px;                  /* szerokość papieru (desktop) */
  --slot:9px;                    /* wysokość szczeliny */
  --cta-odstep:28px;             /* odstęp między dołem papieru a przyciskiem */
  padding:calc(var(--vh,1svh)*14) 5vw calc(var(--vh,1svh)*14)}
/* winieta: ciemniejsze rogi, subtelnie, nic więcej */
.paragon::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 92% at 50% 48%,rgba(13,13,13,0) 56%,rgba(13,13,13,.06) 100%)}
.paragon-uklad{position:relative;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) var(--szer);
  column-gap:clamp(56px,8vw,140px);align-items:start}

/* ——— lewa kolumna: etykieta, nagłówek, lista pozycji ——— */
.paragon-etyk{display:flex;align-items:center;gap:10px;margin:0 0 22px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;font-weight:600;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(13,13,13,.6)}
.paragon-etyk i{width:9px;height:2.5px;background:var(--baby)}
.paragon-h{font-size:clamp(30px,3.8vw,54px)}        /* jak nagłówki sekcji 2: czarny, prosty; akcent bordo pochyły */
.paragon-h .akc{color:var(--bordo)}
.paragon-h br.tel{display:none}
.paragon-lista{list-style:none;margin:clamp(34px,3.6vw,52px) 0 0;padding:0;max-width:640px}
.paragon-lista li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px;align-items:start;
  padding:clamp(18px,1.7vw,24px) 0;border-top:1px solid rgba(13,13,13,.14)}
.paragon-lista li:last-child{border-bottom:1px solid rgba(13,13,13,.14)}
.paragon-lista .nr{padding-top:.35em;font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;color:rgba(13,13,13,.48)}
.paragon-lista h3{margin:0;font-family:var(--display);font-weight:900;font-kerning:normal;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(17px,1.5vw,22px);line-height:1.12;color:var(--black)}
.paragon-lista h3 small{display:inline-block;white-space:nowrap;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);
  font-weight:500;font-size:.62em;letter-spacing:.04em;text-transform:uppercase;color:rgba(13,13,13,.5);vertical-align:.08em}
.paragon-lista p{margin:8px 0 0;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;
  font-size:clamp(15px,1.15vw,16.5px);line-height:1.5;color:rgba(13,13,13,.8);text-wrap:pretty}

/* ——— prawa kolumna: drukarka i paragon (podsumowanie) ——— */
.paragon-kadr{position:sticky;top:calc(var(--vh,1svh)*8);width:var(--szer);padding-top:4px}
/* szczelina drukarki: wąska, ciemna, pozioma, włosowa krawędź, minimalny cień wewnątrz, szersza niż papier */
.paragon-szczelina{position:absolute;left:50%;top:0;z-index:3;transform:translateX(-50%);
  width:calc(var(--szer) + 44px);height:var(--slot);background:#1b1c1f;
  box-shadow:0 0 0 1px rgba(13,13,13,.26),inset 0 2px 3px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.05)}
/* okno pod szczeliną: wysokość = wysunięta długość papieru (clip od dołu, nie skalowanie) */
.paragon-okno{position:relative;margin-top:calc(var(--slot)/2);height:0;overflow:hidden}
.paragon-papier{position:relative;width:100%}
.paragon-cialo{position:relative;background:var(--pap);color:var(--druk);padding:14px 20px 18px;
  font-family:'Courier Prime','Courier New',monospace;font-stretch:normal;font-weight:400;font-size:13px;line-height:22px;
  -webkit-font-smoothing:antialiased}
/* dół lekko podwinięty: jeden gradient na krawędzi, bez 3D */
.paragon-cialo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:26px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(40,32,20,0),rgba(40,32,20,.075))}
/* perforacja: ząbki z CSS na górze i na dole (stożkowy gradient, kafelek 12 × 6 px) */
.paragon-zabki{display:block;height:6px;width:100%}
.paragon-zabki.g{background:conic-gradient(from 135deg at 50% 0,var(--pap) 90deg,#0000 0) 0 0/12px 6px repeat-x}
.paragon-zabki.d{background:conic-gradient(from -45deg at 50% 100%,var(--pap) 90deg,#0000 0) 0 0/12px 6px repeat-x}

/* elementy druku: wiersz nad krawędzią druku NIE ISTNIEJE — paragon.js nadaje .jest, kiedy miejsce wiersza w całości wyjechało
   spod szczeliny; --k = delikatna nierówność krycia niektórych wierszy (bez szumu) */
.paragon-el{visibility:hidden;opacity:var(--k,1)}
.paragon-el.jest{visibility:visible}
.paragon-naglowek{text-align:center;font-weight:700;font-size:17px;letter-spacing:.08em;line-height:24px;padding-top:2px}
.paragon-pod{text-align:center;font-size:11.5px;letter-spacing:.05em;line-height:18px;padding-bottom:8px}
/* wiersz: numer i nazwa po lewej, wartość po prawej, między nimi kropki; nazwa nie łamie się w środku */
.paragon-w{display:flex;align-items:flex-end}
.paragon-w .n{flex:0 1 auto;min-width:0;text-transform:uppercase}
.paragon-w .n .nr{color:var(--druk-slaby);padding-right:.6em}
.paragon-w .n .t{font-weight:inherit;white-space:nowrap}
.paragon-w .kropki{flex:1 1 0;min-width:1.6em;overflow:hidden;white-space:nowrap;color:var(--druk-slaby);opacity:.85;
  direction:rtl;padding-left:.35em}   /* rtl: nadmiar kropek ucina się z LEWEJ, więc kropki trzymają jedną siatkę przy wartości */
.paragon-w .kropki::before{content:' . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .'}
.paragon-w .v{flex:0 0 auto;white-space:nowrap;padding-left:.5em;color:var(--druk-slaby)}
.paragon-w.razem{font-weight:700}
.paragon-w.razem .v,.paragon-w.pre .v{color:var(--druk)}
.paragon-w.razem .v{font-size:14px}
/* linie oddzielające z kresek (tekst), nie z borderów */
.paragon-kreska{overflow:hidden;white-space:nowrap;color:var(--druk-slaby);opacity:.9;letter-spacing:.02em}
.paragon-kreska::before{content:'------------------------------------------------------------------------------------'}
.paragon-drobny{text-align:center;font-size:10.5px;line-height:16px;color:var(--druk-slaby);padding-top:8px;text-wrap:balance}
.paragon-drobny span{white-space:nowrap}
.paragon-drobny i{font-style:normal;padding-right:.5em}
/* kod kreskowy: ozdoba, pionowe kreski różnej grubości, bez cyfr (tło liczy paragon.js) */
.paragon-kod{height:38px;width:68%;margin:14px auto 2px}

/* przycisk z hero (ten sam komponent .btn), wyśrodkowany pod papierem */
.paragon-cta{text-align:center;padding-top:var(--cta-odstep)}

/* płótno wody kończy się na górnej krawędzi tej sekcji (zmienną liczy paragon.js; 0 = nic nie obcina) */
#liquid{clip-path:inset(0 0 var(--lq-dol,0px) 0)}

@media(max-width:1100px) and (min-width:821px){
  .paragon{--szer:340px}
  .paragon-uklad{column-gap:48px}
  .paragon-cialo{padding:12px 16px 16px;font-size:12px;line-height:20px}
}
@media(max-width:820px){
  .paragon{--szer:86vw;--cta-odstep:24px;padding:calc(var(--vh,1svh)*11) 18px calc(var(--vh,1svh)*12)}
  .paragon-uklad{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:56px}
  .paragon-etyk{margin-bottom:16px;font-size:9.5px;letter-spacing:.06em}
  .paragon-h{font-size:calc(7.9vw - 3.4px)}
  .paragon-h br.tel{display:inline}
  .paragon-lista{margin-top:30px;max-width:none}
  .paragon-lista li{grid-template-columns:30px minmax(0,1fr);column-gap:12px;padding:16px 0}
  .paragon-lista .nr{font-size:9.5px;padding-top:.3em}
  .paragon-lista h3{font-size:17px}
  .paragon-lista p{margin-top:7px;font-size:15px;line-height:1.45}
  .paragon-kadr{position:relative;top:auto;width:var(--szer);margin:0 auto}
  .paragon-cialo{padding:12px 15px 16px;font-size:12px;line-height:20px}
  .paragon-naglowek{font-size:15.5px;line-height:22px}
  .paragon-pod{font-size:10.5px;line-height:16px;padding-bottom:6px}
  .paragon-w.razem .v{font-size:13px}
  .paragon-drobny{font-size:10px;line-height:15px}
  .paragon-kod{height:34px;margin-top:12px}
}