/* ═══════════════════════════════════════════════════════════
   POLIMERIT — warstwa wizualna

   Skad bierze sie ten wyglad: ze swiata FDM. Maszyna jest zimna
   i precyzyjna, tworzywo jest gorace. Dlatego podloze idzie
   w gleboki niebieski grafit (obudowa maszyny, rysunek techniczny),
   a pomarancz przestaje byc atmosfera i jest MATERIALEM — filamentem,
   uzywanym oszczednie i celowo.

   Znak rozpoznawczy: linia warstwy. Detal powstaje przez ukladanie
   sciezek co 0,10–0,30 mm i widac to na kazdym wydruku, wiec granice
   sekcji to nie kreska 1px, tylko pasmo wlosowatych linii o skoku 3px.

   Typografia: Archivo (zmienny 400–800) niesie naglowki, IBM Plex Mono
   niesie WSZYSTKIE dane — liczby, jednostki, etykiety, specyfikacje.
   Mono to tu jezyk branzy, nie ozdoba. Fonty hostowane u nas, nie
   z CDN Google'a — polityka prywatnosci tej strony nie przewiduje
   wysylania IP odwiedzajacych do Google'a.
   ═══════════════════════════════════════════════════════════ */

/* ─── Fonty (self-hosted) ─────────────────────────────────── */
@font-face{font-family:Archivo;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/archivo-400-800-lat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/archivo-400-800-latext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/plexmono-400-lat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/plexmono-400-latext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/plexmono-600-lat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/plexmono-600-latext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ─── Zmienne ─────────────────────────────────────────────── */
:root{
  /* Jasny motyw. Neutralne nie sa czystymi szarosciami — maja przechyl
     w blekit, zeby czytaly sie jak papier rysunku technicznego. */
  --bg:#F2F5FA; --surface:#FFFFFF; --surface-2:#E8EDF6; --border:#D3DBE9;
  --text:#0C1320; --muted:#55647D; --accent:#C2410C; --accent-soft:#FFF1E7;
  /* para przyciskowa: wypelnienie + etykieta, dobrane pod ten motyw */
  --accent-fill:#C2410C; --on-accent:#FFFFFF;
  --field-border:#7E8CA3;   /* 3,33:1 na bieli */
  --ok:#0F7A42; --warn:#8F5300; --warn-bg:#FFF6E3; --err:#B3261E; --err-bg:#FDECEA;
  --shadow-sm:0 1px 2px rgba(12,19,32,.05);
  --shadow:0 1px 2px rgba(12,19,32,.06),0 10px 28px -14px rgba(12,19,32,.22);
  --shadow-lg:0 2px 6px rgba(12,19,32,.07),0 32px 64px -24px rgba(12,19,32,.32);

  /* Plynny kontener zamiast stalego 1200 px. Na 2560 px tresc zajmowala
     47% ekranu; teraz 55%. Wiersze tekstu sie NIE wydluzyly — wszystkie
     maja twardy limit w ch (lead 52, sub 56, FAQ 66, krok procesu 62) —
     urosly tylko siatki kart, ktore byly za waskie: kafelek zastosowania
     z 39 na 47 znakow, mala karta bento z 27 na 32. Ponizej 1520 px
     szerokosci decyduje 86vw, wiec laptop (1366-1440) zachowuje swoje
     ~100 px marginesu — problem byl wylacznie na szerokich monitorach
     i tylko tam kontener rosnie do pelnych 1400. */
  --wrap:min(1400px, 86vw);
  /* Znak marki jako maska: jeden rysunek dla naglowka, stopki i wszystkich
     podstron. Kolor bierze sie z --accent, wiec sam sledzi motyw. */
  --znak:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M26.13 6 L49.87 6 A8 8 0 0 1 57.22 17.15 L45.35 44.84 A8 8 0 0 1 30.65 44.84 L18.78 17.15 A8 8 0 0 1 26.13 6 Z M26 78 H80 A8 8 0 0 1 80 94 H26 A8 8 0 0 1 26 78 Z'/%3E%3C/svg%3E");

  /* Strzalka listy rozwijanej. Wlasna, bo systemowa siedziala tuz przy
     krawedzi pola i nie dalo sie jej odsunac. */
  --strzalka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355647D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --radius:16px;
  --r-xs:6px; --r-sm:10px; --r-md:12px; --r-pill:999px;

  --font:Archivo,'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;

  /* Skala typograficzna — realne przeskoki zamiast siedemnastu
     rozmiarow stloczonych miedzy 10,5 a 20 px. */
  --t-display:clamp(36px,5.2vw,66px);
  --t-title:clamp(27px,3.4vw,44px);
  --t-sub:clamp(20px,2.1vw,25px);
  --t-card:18px;
  --t-lead:17.5px;
  --t-body:15.5px;
  --t-small:13.5px;
  --t-label:11.5px;

  --t:.14s ease;
}
@media (prefers-color-scheme:dark){
  :root{
    /* Ciemny motyw: gleboki niebieski grafit, nie neutralna czern. */
    --bg:#080B11; --surface:#0F1621; --surface-2:#172032; --border:#212C40;
    --text:#E7EDF7; --muted:#8A99B4; --accent:#FF7A2F; --accent-soft:#2A1708;
    --accent-fill:#FF7A2F; --on-accent:#12100E;
    --field-border:#5C6E8C;   /* 3,47:1 na --surface */
    --ok:#3DDC84; --warn:#FBBF24; --warn-bg:#2A2109; --err:#F87171; --err-bg:#2B1412;
    --strzalka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A99B4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px -14px rgba(0,0,0,.7);
    --shadow-lg:0 2px 8px rgba(0,0,0,.5),0 36px 72px -26px rgba(0,0,0,.9);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background-color:var(--bg); color:var(--text);
  font:400 var(--t-body)/1.6 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* jedno cieple zrodlo swiatla w prawym gornym rogu — nic wiecej */
  background-image:radial-gradient(112% 46% at 86% -14%,
    color-mix(in srgb,var(--accent) 17%,transparent),transparent 62%);
  background-repeat:no-repeat; background-size:100% 860px;
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
a{color:var(--accent)}

/* ─── Znak rozpoznawczy: linia warstwy ────────────────────────
   Powtarzalne wlosowate linie o skoku 3 px — dokladnie to, co widac
   na przekroju kazdego wydruku FDM. Uzywane jako granica sekcji
   i jako znacznik przy nadtytule. Nic wiecej. */
.layerline{background-image:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 3px)}

/* ─── Etykiety danych (mono) ─────────────────────────────────
   Kazda liczba, jednostka i etykieta na tej stronie mowi tym samym
   glosem. To jezyk branzy: mm, °C, MPa, %, zl. */
.lbl-mono{font:600 var(--t-label)/1 var(--mono);text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"zero"1}

/* Widoczny focus dla calej strony. */
a:focus-visible,button:focus-visible,summary:focus-visible,
label:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}

/* ─── Układ ───────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.brand .dot{width:26px;height:26px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--accent),#f0a500);flex:none}
.topbar .meta{color:var(--muted);font-size:13px}

.wrap{max-width:var(--wrap);margin:0 auto;display:flex;gap:20px;align-items:flex-start}
.col-main{flex:1.15 1 0;min-width:0;display:flex;flex-direction:column;gap:20px}
.col-side{flex:.85 1 0;min-width:340px;display:flex;flex-direction:column;gap:20px;
  position:sticky;top:70px;align-self:flex-start}
@media(max-width:900px){
  .wrap{flex-direction:column}
  .col-main,.col-side{width:100%;min-width:0}
  .col-side{position:static;top:auto}
}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm),inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent)}
.app-section .card{box-shadow:var(--shadow-lg),inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent)}

.card-head{padding:16px 18px 0}
.card-head h2{font-size:15px}
.card-head p{margin:4px 0 0;color:var(--muted);font-size:13px}
.card-body{padding:18px}

/* ─── Dropzone / podgląd ──────────────────────────────────── */
.stage{position:relative;aspect-ratio:4/3;min-height:320px;border-radius:var(--radius);overflow:hidden;background:var(--surface-2)}
@media(max-width:960px){.stage{aspect-ratio:1/1;min-height:260px}}
#viewer{position:absolute;inset:0}
#viewer canvas{display:block;width:100%;height:100%}

/* ─── Pole wgrywania pliku ────────────────────────────────────
   To jest element, na ktorym stoi cala transakcja: klient albo tu
   upusci plik, albo wyjdzie. Dotad bylo najcichszym miejscem strony —
   przycisk 13,5 px (mniejszy niz ten zamykajacy strone), naglowek
   16 px (mniejszy niz tytul karty o dronach), obramowanie w kolorze
   wlosa i tlo identyczne z tlem sceny, wiec pole nie mialo granicy.
   Teraz naglowek i przycisk sa najwiekszymi elementami kalkulatora
   w stanie pustym, a samo pole ma widoczna krawedz i wlasne swiatlo. */
.dropzone{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;text-align:center;padding:28px;cursor:pointer;
  border:2px dashed color-mix(in srgb,var(--accent) 68%,var(--border));
  border-radius:var(--radius);
  background:
    radial-gradient(120% 82% at 50% 4%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 64%),
    var(--surface-2);
  transition:border-color var(--t),background var(--t);
}
.dropzone:hover{
  border-color:var(--accent);
  background:
    radial-gradient(120% 82% at 50% 4%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 64%),
    var(--surface-2);
}
.dropzone.drag{border-color:var(--accent);background:var(--accent-soft)}
.dropzone.hidden{display:none}
/* flex:none — bez tego ikona jako flex-item w ciasnej kolumnie
   (.stage ma aspect-ratio 1/1 ponizej 960px) kurczy sie do wysokosci 0 */
.dropzone > svg{flex:none;width:54px;height:54px;opacity:1;color:var(--accent);
  margin-bottom:18px;transition:transform var(--t)}
.dropzone:hover > svg{transform:translateY(-3px)}
/* ikona w przycisku dziedziczy kolor etykiety */
.btn-file svg{flex:none;width:19px;height:19px;margin:0}
.dropzone strong{font-size:clamp(21px,2vw,29px);font-weight:800;letter-spacing:-.03em;line-height:1.15;
  max-width:24ch;text-wrap:balance}
.dropzone span{color:var(--muted);font:400 13px/1.5 var(--mono);margin-top:11px}
/* najwiekszy przycisk na stronie — bo to najwazniejsza akcja na stronie */
.btn.small.btn-file{margin-top:24px;width:auto;min-width:250px;padding:18px 44px;font-size:17px;
  font-weight:700;letter-spacing:-.01em;border-radius:var(--r-md)}
.dropzone #btnSample{margin-top:18px;font-size:14px}

/* Dolny pasek sceny: legenda podpor stoi nad chipami z danymi pliku, nie na
   modelu. Wczesniej legenda byla osobnym pudelkiem w lewym gornym rogu i
   zaslaniala podglad. */
/* W widoku warstw chipy koncza sie przed suwakiem. Suwak zajmuje prawe 36 px
   kadru, a dluzsza nazwa pliku wsuwala sie pod niego na 22 px, takze na duzym
   ekranie. */
.stage:has(#layerCtl:not(.hidden)) .stage-bottom{right:46px}
.stage-bottom{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;
  display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.stage-overlay{display:flex;gap:6px;flex-wrap:wrap;
  font:12px/1 var(--mono);pointer-events:none
}
.chip{background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--border);
  padding:5px 8px;border-radius:var(--r-pill);backdrop-filter:blur(6px)}
/* PODGLAD-06: gorny pasek kadru to jedna siatka. Wczesniej przelacznik widoku
   i narzedzia staly niezaleznie na pozycjach absolutnych, wiec przy 390 px
   narzedzia wchodzily na napis "Warstwy" o 2 px, a przy 360 px juz o 15.
   Elementy siatki nie moga na siebie wejsc z definicji. Kolumny 1fr auto 1fr
   trzymaja przelacznik posrodku, dopoki jest miejsce; gdy go brakuje, boczne
   kolumny same sie zwezaja. Przypisania kolumn sa jawne, bo kazdy z trzech
   elementow bywa ukryty i bez tego reszta by sie przesuwala. */
.stage-top{position:absolute;left:12px;right:12px;top:12px;z-index:5;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.stage-top > .stage-del{grid-column:1;justify-self:start}
.stage-top > .view-toggle{grid-column:2;justify-self:center;position:static;transform:none;left:auto;top:auto}
.stage-top > .stage-tools{grid-column:3;justify-self:end;position:static;right:auto;top:auto}
.stage-tools{display:flex;gap:6px}
.icon-btn .ic-out{display:none}

/* PODGLAD-05: powiekszenie kadru. Nie uzywamy Fullscreen API, bo Safari na
   iPhonie daje pelny ekran tylko dla wideo, nie dla dowolnego elementu. Zwykla
   warstwa na caly ekran zachowuje sie identycznie na kazdym urzadzeniu.
   Wczesniej byl tu jeden przycisk z ikona czterech naroznikow, czyli
   powszechnym znakiem pelnego ekranu, ktory w rzeczywistosci tylko wysrodkowywal
   model. Teraz sa dwa i kazdy robi to, co obiecuje jego ikona. */
.stage.pelny{position:fixed;inset:0;z-index:60;width:100%;height:100%;
  aspect-ratio:auto;min-height:0;border-radius:0;background:var(--surface-2);
  /* na telefonie scena ma max-height:42vh; bez tego powiekszenie zatrzymywalo sie
     na 42 procentach wysokosci ekranu, bo tamta regula ustawia inna wlasciwosc
     i moja jej nie nadpisywala */
  max-height:none;max-width:none}
.stage.pelny .ic-in{display:none}
.stage.pelny .ic-out{display:block}
/* Krzyzyk usuwajacy model znika w powiekszeniu, bo kazdy odczytalby go jako
   "zamknij widok". Jego miejsce w lewym rogu zajmuje krzyzyk, ktory faktycznie
   zamyka powiekszenie: klient szuka go tam odruchowo, a narozniki po prawej
   robia to samo. Oba siedza w pierwszej i trzeciej kolumnie paska gornego,
   wiec nigdy nie wystepuja razem i nie moga na siebie wejsc. */
.stage.pelny .stage-del{display:none}
/* Selektory musza byc bardziej szczegolowe niz .icon-btn{display:grid}, ktore
   lezy nizej w pliku i przy rownej wadze wygrywalo kolejnoscia. */
.stage-top > .stage-close{display:none;grid-column:1;justify-self:start}
.stage.pelny .stage-top > .stage-close{display:grid}
body.stage-pelny{overflow:hidden}
.icon-btn{
  width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);cursor:pointer;
  background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--border);color:var(--text);
  backdrop-filter:blur(6px)
}
/* Podswietlenie na najechanie tylko tam, gdzie kursor faktycznie istnieje.
   Na dotyku stan :hover zostaje na przycisku az do dotkniecia czegos innego,
   przez co po kliknieciu zostawala pomaranczowa ramka na stale. */
@media (hover: hover) {
  .icon-btn:hover{border-color:var(--accent);color:var(--accent)}
}
/* Potwierdzenie klikniecia: ta sama ramka, ale na moment. */
.icon-btn.blysk{border-color:var(--accent);color:var(--accent)}
.icon-btn.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}

/* przełącznik Model / Warstwy – na górze podglądu */
.view-toggle{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:2px;z-index:3;
  background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:3px;backdrop-filter:blur(6px)}
.vt-btn{border:0;background:transparent;color:var(--muted);font:600 12px/1 inherit;
  padding:6px 13px;border-radius:var(--r-xs);cursor:pointer}
.vt-btn.active{background:var(--accent-fill);color:var(--on-accent)}
@media (hover: hover) {
  .vt-btn:not(.active):hover{color:var(--text)}
}

/* podgląd warstw – pionowy suwak po prawej
   WARSTWY-03: kolumna ma stala szerokosc rowna suwakowi, a licznik jest z niej
   wyjety. Wczesniej kolumna dopasowywala sie do tresci licznika, wiec przy
   przejsciu z dwoch cyfr na trzy rosla, a suwak, wysrodkowany w niej, uciekal
   w lewo o polowe przyrostu. Licznik wisi teraz przy prawej krawedzi i moze
   rosnac w lewo, nie ruszajac niczego. */
.layer-ctl{position:absolute;right:14px;top:54px;bottom:16px;width:22px;
  display:flex;flex-direction:column;align-items:center;padding-top:29px}
.layer-slider{writing-mode:vertical-lr;direction:rtl;flex:1;width:22px;accent-color:var(--accent);cursor:pointer}
.layer-label{position:absolute;top:0;right:0;
  font:11px var(--mono);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:3px 8px;backdrop-filter:blur(6px)}

/* Legenda podpór stoi POD scena, nie na niej: kazde pudelko w kadrze zaslanialo
   albo model, albo same podpory, ktore opisuje. Widoczna tylko w widoku warstw. */
.layer-legend{display:flex;gap:8px;align-items:flex-start;margin:10px 2px 0;
  font-size:11.5px;line-height:1.45;color:var(--muted)}
.ll-dot{width:11px;height:11px;border-radius:3px;background:#ff4fb0;flex:0 0 auto;margin-top:2px}

/* PODGLĄD-02: chip kontroli mieszczenia na stole */
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--border))}
.chip.warn{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}

/* PODGLĄD-04: przycisk usuwania odsunięty (lewy górny róg) i wyciszony */
/* Bez left i top: ten przycisk nigdy nie byl pozycjonowany absolutnie, wiec
   te wartosci nic nie robily, a jego miejsce w rogu bylo przypadkiem. Teraz
   ustawia go pierwsza kolumna paska gornego. */
.stage-del{width:28px;height:28px;color:var(--muted);opacity:.72}
@media (hover: hover) {
  .stage-del:hover{color:var(--accent);opacity:1;border-color:var(--accent)}
}
/* PODGLĄD-04: pasek „Cofnij" po usunięciu */
.undo-bar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:6;display:flex;gap:12px;align-items:center;
  font-size:13px;color:var(--text);
  background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:8px 14px;backdrop-filter:blur(6px)}
.undo-bar button{background:none;border:0;color:var(--accent);font:inherit;font-weight:650;cursor:pointer}
.undo-bar button:hover{text-decoration:underline}

/* koszyk */
/* --- Panel zamowienia -------------------------------------------
   Dotad koszyk byl OSOBNA karta pod wycena. Przy dwoch plikach klient
   widzial dwa panele, dwie sumy i dwa pomaranczowe przyciski, a ten
   w koszyku po cichu pomijal plik, ktory mial wlasnie na ekranie.
   Teraz zamowienie jest stopka tej samej karty: inne tlo mowi "to juz
   nie wycena, to rachunek", a przycisk jest na stronie jeden. */
.order-panel{border-top:1px solid var(--border);background:var(--surface-2);
  padding:16px 18px 18px;
  border-radius:0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px)}
.op-head{margin-bottom:10px}
.op-head h2{font-size:15px;margin:0}
.op-head p{margin:4px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45}
.order-panel .linklike{margin-top:12px}
.order-panel .field{margin:16px 0 0}
.order-panel table.lines{margin-top:14px}

.cart-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border)}
.cart-item:first-child{padding-top:0}
.cart-item:last-child{border-bottom:0}
/* Numer wiersza: klient ma widziec, ILE pozycji zamawia, bez liczenia. */
.ci-num{flex:none;width:20px;height:20px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);color:var(--muted);
  font:600 11px/18px var(--mono);text-align:center}
.cart-item.pending .ci-num{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.ci-main{flex:1;min-width:0}
.ci-name{display:flex;align-items:center;gap:6px;min-width:0;font-weight:600;font-size:13px}
.ci-fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Ten jeden wiersz to plik otwarty w kalkulatorze. Bez tej etykiety klient
   nie wiedzialby, ktora pozycja odpowiada wielkiej kwocie u gory karty. */
/* Bez tla, bez ramki, bez koloru. Odznaka wokol napisu jest forma
   ostrzezenia niezaleznie od tego, na jaki kolor ja pomalujesz, wiec
   zostaje sam podpis, tym samym glosem co reszta etykiet (.lbl-mono).
   Ktory wiersz jest biezacy, mowi pomaranczowy numer po lewej. */
.ci-tag{flex:none;color:var(--muted);white-space:nowrap;
  font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.11em}
.ci-spec{font-size:11.5px;color:var(--muted);margin-top:2px}
.ci-price{font-weight:650;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ci-del{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:17px;line-height:1;padding:0 2px}
.ci-del:hover{color:var(--err)}

/* ─── Formularz ───────────────────────────────────────────── */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
label.lbl{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
label.lbl .hint,.section-lbl .hint{font-weight:400;color:var(--muted);margin-left:6px}
.section-lbl{font:600 var(--t-label)/1 var(--mono);text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);margin-bottom:11px}
.section-lbl .hint{text-transform:none;letter-spacing:0;font-size:12px}

select,input[type=text],input[type=email],input[type=tel],input[type=number],textarea{
  width:100%;padding:9px 11px;font:inherit;font-size:14px;color:var(--text);
  background:var(--surface);border:1px solid var(--field-border);border-radius:var(--r-sm);outline:none;
  /* Przegladarka daje liscie rozwijanej line-height:normal, a polom tekstowym
     dziedziczone 1.6. Bez tej linii lista byla o 5 px nizsza od pola obok
     i rzad parametrow nie trzymal sie jednej linii. */
  line-height:1.6
}
select{
  -webkit-appearance:none;appearance:none;padding-right:36px;
  background-image:var(--strzalka);background-repeat:no-repeat;
  background-position:right 13px center;background-size:15px 15px
}
select::-ms-expand{display:none}
select:focus,input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
textarea{resize:vertical;min-height:70px}

.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.opt{
  border:1px solid var(--border);border-radius:var(--r-md);padding:9px 11px;cursor:pointer;background:var(--surface);
  transition:border-color var(--t),background var(--t),box-shadow var(--t)
}
.opt:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
/* --- Zaznaczenie NIE jest ostrzezeniem ---------------------------
   Akcent tej strony jest pomaranczowy, a pomarancz to w sieci kolor
   ostrzezenia. Cieple wypelnienie --accent-soft (#FFF1E7) lezalo o wlos
   od tla ostrzezenia --warn-bg (#FFF6E3), wiec wybrany material czytal sie
   jak alert, mimo ze mowil tylko "to wybrales". Zaznaczenie niesie teraz
   CHLODNE wypelnienie --surface-2 i podwojna ramke w kolorze akcentu.
   Cieple wypelnienie zostaje wylacznie przy .note.warn, gdzie naprawde
   cos ostrzega, i dzieki temu znowu cos znaczy. */
.opt.sel{border-color:var(--accent);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--accent)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .t{font:600 13.5px/1.2 var(--mono);display:block;letter-spacing:-.02em}
.opt .s{color:var(--muted);font-size:11.5px;display:block;margin-top:2px}
/* CENA-06: pudelko ceny musi miec te sama wysokosc puste, w trakcie ladowania
   i wypelnione. Placeholder byl inline-block o wysokosci 12 px, wiec wpadal w
   linie tekstu i wiersz kafelkow puchl. Kazde przeliczenie ceny podnosilo caly
   panel ponizej o 12 px i po chwili opuszczalo z powrotem. */
.opt .opt-price{display:block;height:14px;font:600 14px/1 var(--mono);font-variant-numeric:tabular-nums;margin-top:5px}
.opt .opt-price.price-skel{width:54px;border-radius:var(--r-xs);color:transparent;
  background:linear-gradient(90deg,var(--surface-2),var(--border),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite}

/* PARAM-05: opisy pod wyborem materialu i jakosci maja rozna dlugosc, wiec
   kazda zmiana wyboru podnosila albo opuszczala caly panel ponizej o jedna
   linijke. Na telefonie to 20 px ruchu pod palcem tuz przed kolejnym dotknieciem.
   Rezerwujemy najwyzszy wariant, ale najwyzszy zalezy od szerokosci ekranu.
   Zmierzone na produkcji: 342 px daje 4 linie, od 360 do 460 px trzy, od 500 px
   dwie i tak juz zostaje az do 1440 px. Stad trzy progi zamiast jednej wartosci:
   przy 60 px dla wszystkich skok wracal na najwezszych ekranach, a na desktopie
   marnowalo sie 20 px. Opis jakosci ma
   1 linie, bo wszystkie cztery skrocono do 53 znakow: przy 390 px to granica
   jednej linijki. Dluzszy opis wroci do dwoch i rezerwacje trzeba podniesc.
   Jednostka lh liczy sie od interlinii elementu; px zostaje dla starszych
   przegladarek, ktore lh zignoruja. */
#matDesc{min-height:80px;min-height:4lh}
@media(min-width:350px){#matDesc{min-height:60px;min-height:3lh}}
@media(min-width:500px){#matDesc{min-height:40px;min-height:2lh}}
/* Dwie linie, nie jedna. Opis jakosci miescil sie w jednej, dopoki pole bylo
   szerokie na pol karty. W rzedzie trzech kolumn ma 213 px i kazdy z czterech
   opisow zawija sie na dwie linie, wiec przy rezerwacji 20 px tresc doklejana
   przez skrypt zepchnela reszte panelu. Zmierzone: 342 i 360 px dwie linie,
   375 do 520 px jedna, od 1000 px znowu dwie. Rezerwujemy najwyzszy wariant. */
#qualityHint{min-height:40px;min-height:2lh}

/* PARAM-03: presety wytrzymałości */
.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.preset{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;cursor:pointer;
  color:var(--text);font-family:inherit;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  transition:border-color var(--t),background var(--t),box-shadow var(--t)}
.preset:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
.preset.sel{border-color:var(--accent);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--accent)}
.preset .p-name{font-weight:650;font-size:13.5px}
.preset .p-desc{color:var(--muted);font-size:11px;line-height:1.3}
/* Presety zostaja w rzedzie takze na telefonie. W slupku zajmowaly 236 px, czyli
   dwa razy wiecej niz na desktopie, i to one, a nie liczba pol, robily z panelu
   dlugi formularz. Opis w kafelku zawija sie w kilka linii i to wystarczy. */
@media(max-width:400px){.preset{padding:9px 8px}.preset .p-desc{font-size:10.5px}}
.adv{margin-top:12px}
.adv summary{cursor:pointer;color:var(--muted);font-size:12.5px;list-style:none;display:inline-flex;align-items:center;gap:6px}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:"▸";transition:transform .15s;display:inline-block}
.adv[open] summary::before{transform:rotate(90deg)}

/* CENA-06 / ZAUFANIE-01 / PRAWO-02 */
.linklike{display:inline-block;margin-top:10px;background:none;border:0;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;padding:0}
.linklike:hover{text-decoration:underline}
/* Gwarancja poprawki. To nie ostrzezenie, tylko obietnica, wiec nie moze
   nosic koloru akcentu, ktorym na tej stronie mowia uwagi do wyceny.
   Zielen --ok czyta sie jak potwierdzenie, tarcza jak rekojmia. */
.guarantee{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;
  font-size:12.5px;color:var(--text);line-height:1.45;
  background:color-mix(in srgb,var(--ok) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--ok) 32%,var(--border));
  border-radius:var(--r-sm);padding:10px 12px}
.guarantee svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--ok)}
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.45;cursor:pointer}
.consent input{margin-top:2px;accent-color:var(--accent);flex:none}
.consent a{color:var(--accent)}
.consent .req{color:#e8590c}
.consent-sub{margin-left:22px;margin-top:6px}
.consents{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
/* Przelacznik firma / osoba prywatna: ten sam ksztalt co przelacznik widoku
   materialow, zeby nie wprowadzac trzeciego wzoru na to samo. */
.buyer-switch{display:flex;gap:4px;padding:4px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-pill)}
.bs-btn{flex:1;border:0;background:none;color:var(--muted);font:inherit;font-size:13.5px;
  font-weight:600;padding:8px 12px;border-radius:var(--r-pill);cursor:pointer}
.bs-btn:hover{color:var(--text)}
.bs-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(16,24,40,.06)}
.order-info{margin-top:14px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);font-size:12.5px;line-height:1.5}
.order-info p{margin:0}
.order-info .oi-sub{margin-top:8px;color:var(--muted)}
/* Lista plików w oknie zamówienia (drugie podsumowanie) */
.order-items{margin:0 0 16px;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.oi-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 12px;border-bottom:1px solid var(--border)}
.oi-name{font-size:13.5px;font-weight:600}
.oi-spec{font-size:12px;color:var(--muted);margin-top:2px}
.oi-price{font-size:13.5px;font-weight:650;white-space:nowrap}
.oi-foot{padding:8px 12px;background:var(--surface-2)}
.oi-frow{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);padding:2px 0}
.oi-frow.oi-total{color:var(--text);font-weight:750;font-size:14px;margin-top:2px}

/* UKLAD-05: Jakosc i Skala stoja obok siebie. Obie kontrolki mieszcza swoja
   tresc w polowie szerokosci (najdluzsza opcja jakosci to 162 px), a jako paski
   na cala szerokosc wydluzaly panel i kazaly czytac go jako dlugi formularz.
   Ponizej 520 px rzad i tak wraca do jednej kolumny, bo polowa 390 px to za malo. */
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
/* Rzad, ktory sam decyduje o liczbie kolumn: trzy krotkie pola stoja obok siebie,
   dopoki kazde ma 200 px, potem schodza do dwoch i do jednej kolumny. Bez tego
   Kolor, Jakosc i Skala zajmowaly trzy pelne wiersze mimo krotkiej tresci. */
.row-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;
  align-items:start;margin-bottom:16px}
/* Odstepy miedzy polami daje gap rzedu, a odstep pod rzedem jego wlasny margines.
   Bez tego .field:last-child zerowalo margines ostatniego pola i kolejna etykieta
   przyklejala sie do kontrolki. */
.row-auto > .field{margin-bottom:0}
@media(max-width:520px){.row{grid-template-columns:1fr}}

/* Pole liczbowe z wlasnymi strzalkami. Systemowe pokazuja sie dopiero po
   najechaniu, sa szare i maja rozmiar spoza tej strony; te sa zawsze
   widoczne i w kolorze akcentu, wiec widac, ze skale da sie klikac. */
.numctl{position:relative}
.numctl input[type=number]{padding-right:32px;-moz-appearance:textfield}
.numctl input::-webkit-outer-spin-button,
.numctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.numctl-arrows{position:absolute;top:1px;right:1px;bottom:1px;width:27px;
  display:flex;flex-direction:column;border-radius:0 var(--r-sm) var(--r-sm) 0;overflow:hidden}
.numctl-arrows button{flex:1;display:flex;align-items:center;justify-content:center;
  border:0;padding:0;background:none;color:var(--accent);cursor:pointer}
.numctl-arrows button:hover{background:var(--surface-2)}
.numctl-arrows button:active{color:var(--text)}
.numctl-arrows svg{width:11px;height:11px}
.numctl-arrows #scaleDown svg{transform:rotate(180deg)}

.slider-row{display:flex;align-items:center;gap:12px}
input[type=range]{flex:1;accent-color:var(--accent)}
.slider-val{font:13px var(--mono);min-width:52px;text-align:right;color:var(--muted)}

.switch{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:10px 11px;border:1px solid var(--border);border-radius:var(--r-md)}
.switch.sel{border-color:var(--accent);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--accent)}
.switch input{margin:2px 0 0;accent-color:var(--accent)}
.switch .t{font-weight:600;font-size:13.5px;display:block}
.switch .s{color:var(--muted);font-size:11.5px;display:block;margin-top:2px}

/* ─── Wycena ──────────────────────────────────────────────── */
.price-card{position:static}
/* Cala obietnica serwisu to natychmiastowa wiazaca cena, wiec ta liczba
   jest po naglowku strony najwiekszym elementem na stronie. Cyfry
   tabelaryczne, zeby kwota nie drgala przy przeliczaniu. */
.price-hero{padding:24px 20px 20px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 72%);
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0}
/* Ta cena nie jest oferta wpisana recznie — wychodzi z realnego
   slicowania modelu. Monospace mowi "wynik", a nie "propozycja". */
.price-big{font:600 clamp(38px,3.4vw,50px)/1 var(--mono);letter-spacing:-.05em;
  font-variant-numeric:tabular-nums}
.price-big small{font:600 19px/1 var(--mono);color:var(--muted);margin-left:7px;letter-spacing:-.02em}
.price-sub{color:var(--muted);font:400 13px/1.5 var(--mono);margin-top:10px}
.price-unit{font-size:13px;color:var(--muted);margin-top:8px}
/* Przy kilku plikach ta kwota nie jest kwota do zaplaty, tylko cena
   jednej pozycji. Nazwa pliku nad nia mowi to wprost. */
.price-file{font:400 12px/1.3 var(--mono);color:var(--muted);margin-bottom:9px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Stan pusty: dotad wielki jasny myslnik dominowal panel i czytal sie jak
   blad. Teraz prowadzi instrukcja, a myslnik jest tylko miejscem, ktore
   czeka na kwote. Uklad i tresc bez zmian. */
.price-card:has(#quoteBody.hidden) .price-hero{background:none}
.price-card:has(#quoteBody.hidden) .price-big{
  font-size:34px;color:var(--border);letter-spacing:0;line-height:1.1}
.price-card:has(#quoteBody.hidden) .price-sub{
  font:600 15px/1.4 var(--font);color:var(--text);margin-top:2px}
.price-note{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.4}
.price-big.recalc{opacity:.45;transition:opacity .15s}
@keyframes priceFlash{0%{color:var(--accent)}100%{color:var(--text)}}
.price-big.price-flash{animation:priceFlash .5s ease-out}
@media(prefers-reduced-motion:reduce){.price-big.price-flash{animation:none}.col-side{scroll-behavior:auto}}
.dz-privacy{font-size:13.5px;color:var(--muted);margin:26px 0 0;max-width:38ch;line-height:1.5}

/* UWAGA: te reguly musza stac PO bazowych regulach .dropzone — media
   query nie podnosi specyficznosci, a wczesniej ten blok stal wyzej
   w pliku i przez to nie dzialal wcale.
   Scena ma overflow:hidden, wiec tresc pola musi sie w niej zmiescic:
   przy aspect-ratio 1/1 scena miala na telefonie 309 px, a tresc
   342 px — dol byl ucinany. Stad i mniejsza skala, i wyzsza scena. */
@media(max-width:640px){
  /* aspect-ratio:auto jest tu konieczne: sama min-height przy proporcji
     1/1 rozpychala scene rowniez w SZEROKOSC (376 px przy oknie 375 px)
     i strona dostawala poziomy scroll. */
  .stage{aspect-ratio:auto;min-height:298px}
  .dropzone{padding:18px}
  .dropzone > svg{width:38px;height:38px;margin-bottom:9px}
  .btn-file svg{width:17px;height:17px}
  .dropzone strong{font-size:20px;max-width:20ch}
  /* 10,5px, zeby lista formatow zmiescila sie w jednej linii — przy
     11,5px "MB" zostawalo samo w drugim wierszu */
  .dropzone span{margin-top:6px;font-size:10.5px}
  .btn.small.btn-file{margin-top:13px;min-width:0;padding:14px 24px;font-size:15.5px}
  .dropzone #btnSample{margin-top:9px;font-size:13px}
  /* pelna szerokosc: notka lamie sie na 2 linie zamiast 3 */
  .dz-privacy{margin-top:11px;font-size:12px;max-width:none}
}

table.lines{width:100%;border-collapse:collapse;font-size:13.5px}
table.lines td{padding:7px 0;border-bottom:1px dashed var(--border);vertical-align:top}
table.lines td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap;padding-left:12px}
table.lines tr:last-child td{border-bottom:none}
table.lines .neg td:last-child{color:var(--ok)}
table.lines tr.sum td{font-weight:700;font-size:15px;border-top:1px solid var(--border);
  border-bottom:none;padding-top:11px}

.prodstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:14px}
.prodstats div{background:var(--surface);padding:10px}
.prodstats .k{font:600 10.5px/1 var(--mono);white-space:nowrap;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em}
.prodstats .v{font:600 15px/1.2 var(--mono);font-variant-numeric:tabular-nums;margin-top:5px}

.note{border-radius:var(--r-sm);padding:10px 12px;font-size:13px;margin-top:10px}
.note.warn{background:var(--warn-bg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.note.err{background:var(--err-bg);color:var(--err);border:1px solid color-mix(in srgb,var(--err) 30%,transparent)}
.note.ok{background:color-mix(in srgb,var(--ok) 10%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:13px 18px;font:inherit;font-weight:700;font-size:15px;letter-spacing:-.01em;cursor:pointer;
  background:var(--accent-fill);color:var(--on-accent);border:1px solid transparent;border-radius:var(--r-md);
  text-decoration:none
}
.btn:hover{filter:brightness(1.06)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
.btn.small{width:auto;padding:8px 14px;font-size:13.5px}

/* Kreciolek musi zmiescic sie w wierszu tekstu, w ktorym stoi, inaczej podnosi
   go i uklad drga. 12 px z linia bazowa opuszczona o 2 px miesci sie w wierszu
   13 px o interlinii 1,5, czyli 19,5 px. */
.spinner{display:inline-block;width:12px;height:12px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;vertical-align:-2px;margin-right:7px;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--border),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r-sm);color:transparent!important}
@keyframes sk{to{background-position:-200% 0}}

.muted{color:var(--muted)}
.small{font-size:12.5px}
.hidden{display:none!important}
details.raw summary{cursor:pointer;font-size:12.5px;color:var(--muted);padding-top:6px}
details.raw pre{font:11.5px/1.5 var(--mono);background:var(--surface-2);padding:10px;border-radius:var(--r-sm);overflow:auto;max-height:240px}

/* ─── Modal zamówienia ────────────────────────────────────── */
@media(max-width:600px){.prodstats{grid-template-columns:repeat(2,1fr)}}
.modal{position:fixed;inset:0;background:rgba(10,14,19,.55);display:grid;place-items:center;padding:20px;z-index:50;backdrop-filter:blur(3px)}
/* Formularz stal w jednym slupku 480 px i mial 1266 px wysokosci przy
   oknie 900 px, wiec kazdy klient musial go przewijac, zeby zobaczyc
   przycisk zamowienia. Powyzej 820 px idzie w dwie kolumny: po lewej
   co zamawiam i kto zamawia, po prawej dostawa i uwagi, a oswiadczenia
   z przyciskami na pelnej szerokosci pod spodem. */
.modal .card{max-width:820px;width:100%;max-height:90vh;overflow:auto}
@media(min-width:820px){
  .order-form{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:start}
  .of-full{grid-column:1/-1}
  /* .field:last-child zeruje margines, wiec kolumna dotykalaby bloku nizej */
  .of-col > :last-child{margin-bottom:16px}
}
/* Formularz miesci sie w oknie, dopoki klient nie otworzy listy paczkomatow:
   ta doklada 230 px i wtedy okno musi sie przewijac. Zamiast obcinac liste
   przyklejamy pasek przyciskow do dolu, wiec "Zamawiam z obowiazkiem zaplaty"
   jest widoczny zawsze, takze na telefonie.
   Pasek stoi POZA siatka .order-form celowo: sticky przesuwa element tylko
   w obrebie jego bloku zawierajacego, wiec w kolumnie mial do dyspozycji
   jej 265 px i nie dociagal do krawedzi okna. */
#orderModal .order-actions{position:sticky;bottom:0;z-index:2;
  background:var(--surface);padding:12px 0 0;margin-top:2px;
  box-shadow:0 -12px 16px -10px color-mix(in srgb,var(--text) 32%,transparent)}
/* Na telefonie .row schodzi do jednej kolumny, wiec przyklejony pasek
   zajmowalby 170 px malego ekranu. Tu oba przyciski zostaja w linii:
   "Anuluj" na szerokosc napisu, zamowienie na reszte. */
@media(max-width:520px){
  #orderModal .order-actions{grid-template-columns:auto 1fr;gap:8px}
  #orderModal .order-actions .btn.ghost{width:auto;padding:13px 16px}
  #orderModal .order-actions .btn{font-size:14px}
}
/* ─── Nawigacja ───────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 76%,transparent);
  backdrop-filter:blur(16px) saturate(1.6);border-bottom:1px solid var(--border)}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:13px 28px;display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;letter-spacing:-.03em;
  color:var(--text);text-decoration:none}
.brand .dot{width:24px;height:24px;border-radius:var(--r-xs);flex:none;
  background:linear-gradient(150deg,var(--accent),#f0a500)}
.nav-links{display:flex;align-items:center;gap:21px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;
  white-space:nowrap;transition:color var(--t)}
.nav-links a:hover{color:var(--text)}
.nav-links a.btn{color:var(--on-accent)}
.nav-links a.btn.ghost{color:var(--text)}
/* Menu zwezasie stopniowo, a nie skokowo. Marka 107 px + pelne menu
   644 px mieszcza sie komfortowo do 1024 px, ale przycisk CTA po
   wgraniu modelu zmienia tekst na "Aktualna wycena: 00,00 zl" i od tego
   momentu trzyma szerokosc szerszego napisu, wiec progi maja zapas. Kolejnosc znikania idzie od pozycji najmniej
   potrzebnych kupujacemu — Materialy, Zastosowania i Pytania zostaja
   najdluzej, bo to one prowadza do decyzji. */
@media(max-width:1080px){.nav-links a.nav-more{display:none}}
@media(max-width:880px){.nav-links a.nav-mid{display:none}}
@media(max-width:680px){.nav-links a:not(.btn){display:none}}

/* ─── Nadtytul sekcji ─────────────────────────────────────────
   Mono, wersaliki, obok znacznik z linii warstwy. Etykiety biora
   slowa, ktore juz sa w nawigacji — nic nowego nie obiecuja. */
.eyebrow{display:flex;align-items:center;gap:13px;margin:0 0 26px;
  font:600 var(--t-label)/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;
  color:var(--accent)}
.eyebrow::before{content:"";flex:none;width:28px;height:9px;
  background-image:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 3px)}

/* ─── Hero: teza strony ──────────────────────────────────────
   Wyrownany do lewej, naglowek na pelna skale, a osiem korzysci
   przenosi sie z paska pod spodem do prawej kolumny. Dzieki temu
   miedzy naglowkiem a kalkulatorem nie ma juz pasa drobnego druku. */
.hero{padding:56px 28px 44px;position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,
    color-mix(in srgb,var(--text) 7%,transparent) 0 1px,transparent 1px 4px);
  -webkit-mask-image:radial-gradient(46% 88% at 84% 50%,#000,transparent 72%);
  mask-image:radial-gradient(46% 88% at 84% 50%,#000,transparent 72%)}
.hero-inner{max-width:var(--wrap);margin:0 auto;text-align:left;
  display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,.62fr);
  /* Lista obietnic siega az do wiersza z etykieta nad H1: jej naglowek stoi
     w jednej linii z "wycena online...", a hero jest o 38px nizsze. */
  grid-template-areas:"eyebrow aside" "title aside" "lead aside";
  column-gap:64px}
.hero .eyebrow{grid-area:eyebrow}
.hero h1{grid-area:title;font-size:var(--t-display);font-weight:800;letter-spacing:-.042em;
  line-height:.99;max-width:17ch;margin:0}
.lead{grid-area:lead;font-size:var(--t-lead);color:var(--muted);line-height:1.6;
  /* 60ch, nie 52ch: przy 52ch nowy lead lamal sie na trzy linie i samo
     "konta." zostawalo w ostatniej. 60ch trzyma dwie linie az do ~960px. */
  margin:20px 0 0;max-width:60ch}
.hero-aside{grid-area:aside;align-self:start}

/* stary, wysrodkowany znaczek — zostaje dla podstron */
.badge{display:inline-block;font:600 var(--t-label)/1 var(--mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);border:1px solid var(--border);
  padding:7px 13px;border-radius:var(--r-pill);margin-bottom:14px}

/* ─── Rytm sekcji ─────────────────────────────────────────── */
.section,.hero{scroll-margin-top:84px}
.section{padding:112px 28px;position:relative}
.section.alt{background:var(--surface)}
.section-inner{max-width:var(--wrap);margin:0 auto}
.app-section{padding-top:26px;padding-bottom:64px}

/* ZNAK ROZPOZNAWCZY: granica sekcji to pasmo linii warstwy o skoku
   3 px — przekroj wydruku FDM. Zastepuje kreske 1 px na kazdym
   styku rozdzialow, niezaleznie od tego, czy tla sie roznia. */
.section::before,.cta-band::before,.libband::before{
  content:"";position:absolute;left:0;right:0;top:0;height:9px;pointer-events:none;
  color:var(--border);
  background-image:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 3px)}

/* ─── Naglowek sekcji: asymetryczny, do lewej ─────────────────
   Tytul w lewej kolumnie, lead w prawej. Koniec z osmioma
   wysrodkowanymi blokami jeden pod drugim. */
.section-head{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  grid-template-areas:"eyebrow eyebrow" "title sub";
  column-gap:76px;align-items:end;margin:0 0 62px;text-align:left;max-width:none}
.section-head .eyebrow{grid-area:eyebrow}
.section-title{grid-area:title;font-size:var(--t-title);font-weight:800;
  letter-spacing:-.035em;line-height:1.03;margin:0;max-width:19ch}
.section-sub{grid-area:sub;color:var(--muted);font-size:var(--t-lead);line-height:1.62;
  margin:0;padding-bottom:.4em;max-width:56ch}

@media(max-width:900px){
  .hero{padding:42px 22px 34px}
  .hero-inner,.section-head{grid-template-columns:1fr;
    grid-template-areas:"eyebrow" "title" "lead" "aside";column-gap:0}
  .section-head{grid-template-areas:"eyebrow" "title" "sub";margin-bottom:40px}
  .hero h1{max-width:20ch}
  .hero-aside{align-self:start;padding-bottom:0;margin-top:22px}
  .usp-lbl{margin-bottom:7px}
  .section-title{max-width:24ch}
  .section-sub{margin-top:16px;padding-bottom:0}
  .section{padding:72px 22px}
}
@media(max-width:560px){
  /* Na telefonie liczy sie odleglosc od naglowka do przycisku wgrania
     pliku. Naglowek zostaje duzy — to teza strony — ale wszystko
     dookola sie zaciska, zeby "Wybierz plik" zmiescil sie nad zgieciem. */
  .hero{padding:24px 18px 22px}
  .hero h1{font-size:32px;letter-spacing:-.035em}
  .lead{margin-top:14px;font-size:16px;line-height:1.55}
  .hero-aside{margin-top:20px}
  .app-section{padding-top:22px;padding-bottom:44px}
  .section{padding:56px 18px}
  .section-head{margin-bottom:32px}
  .section-sub{font-size:16px}
}

/* ─── Korzysci: prawa kolumna hero ───────────────────────────
   Osiem pozycji stalo wczesniej jako pas drobnego druku miedzy
   naglowkiem a kalkulatorem. Teraz sa kolumna obok naglowka
   i czytaja sie jak lista kontrolna, a nie jak przypis. */
/* Rejestr zobowiazan.
   Bylo tu siedem nasyconych ptaszkow pod rzad — najbardziej oklepany
   wzorzec w marketingu SaaS, a przy tym akcent powtorzony siedem razy
   w malym polu po prostu tanieje. Glif nie mowil tez nic o tej firmie.

   Zamiast tego: cicha linia odniesienia przy kazdej pozycji, jak leader
   na rysunku technicznym, i JEDEN akcent na caly blok — kreska
   otwierajaca u gory. Numeracji swiadomie nie ma: pozycje 1-6 ukladaja
   sie chronologicznie, ale siodma jest polityka materialowa, nie etapem,
   wiec numery klamalyby o tresci (i dublowaly sekcje o procesie). */
/* Zapowiedz listy: lista siedmiu zobowiazan wisiala bez wprowadzenia.
   Etykieta, nie naglowek - ma ramowac, a nie zabierac miejsca nad zgieciem. */
.usp-lbl{margin:0 0 9px;font:600 var(--t-label)/1 var(--mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted)}
.usp{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border:0;background:none;box-shadow:none;
  border-top:2px solid color-mix(in srgb,var(--accent) 72%,var(--border));
  border-bottom:1px solid var(--border)}
.usp li{display:flex;align-items:center;gap:6px;padding:12px 2px;
  font-size:17px;font-weight:550;line-height:1.35;letter-spacing:-.017em;color:var(--text);
  border-bottom:1px solid var(--border)}
.usp li:last-child{border-bottom:0}
.usp li::before{content:"";flex:none;width:14px;height:2px;border-radius:1px;
  /* margin-right rezerwuje miejsce na 24px z hovera: kreska rosnie w swoje
     wlasne pole zamiast przepychac tekst. Bez tego najdluzszy punkt listy
     lamal sie na druga linie i cala strona podskakiwala. */
  margin-right:10px;
  background:color-mix(in srgb,var(--muted) 78%,transparent);
  transition:width var(--t),margin-right var(--t),background var(--t)}
/* 3) Reakcja per wiersz, nie na caly blok: podswietlenie siedmiu
   znacznikow naraz przywracaloby dokladnie to, co usunelismy. */
.usp li:hover::before{width:24px;margin-right:0;background:var(--accent)}

@media(max-width:900px){
  .usp{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0;border-bottom:0}
  .usp li{border-bottom:0;padding:7px 0;gap:11px;font-size:15px;font-weight:450;
    letter-spacing:-.01em;color:var(--text)}
  .usp li::before{width:13px;margin-right:0}
  .usp li:hover::before{width:13px;margin-right:0}
}
@media(max-width:560px){
  .usp{grid-template-columns:1fr}
  .usp li{padding:4px 0;font-size:14px;gap:10px}
  .usp li::before{width:11px;margin-right:0}
  .usp li:hover::before{width:11px;margin-right:0}
}

/* ─── Pasek bibliotek modeli (zwarta wersja sekcji) ───────── */
.libbar{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.6fr);gap:24px 64px;align-items:start;
  padding:0;border:0;background:none;box-shadow:none}
.section.alt .libbar{background:var(--bg)}
/* Pasek pod kalkulatorem: tlo na pelna szerokosc strony, tresc w kolumnie.
   Nizszy niz zwykla sekcja, bo to przystanek w drodze do wyceny, nie rozdzial. */
.libband{position:relative;padding:44px 28px;background:var(--surface);scroll-margin-top:84px}
.libband .libbar{background:transparent;border:0;box-shadow:none;padding:0}
.libbar-txt h2{font-size:var(--t-sub);letter-spacing:-.03em;margin-bottom:10px;max-width:16ch}
.libbar-txt p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.libbar-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.libbar-links a{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-md);padding:10px 13px;
  transition:border-color var(--t),background var(--t),transform var(--t)}
.libbar-links a:hover{transform:translateY(-1px);border-color:var(--accent);background:var(--accent-soft)}
.libbar-links .lib-name{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600}
.libbar-links a:hover .lib-name{color:var(--accent)}
.libbar-links .lib-desc{font-size:13px;line-height:1.5;color:var(--muted)}
.libbar-links .lib-arrow{font-size:12px;line-height:1;color:var(--accent)}

/* UWAGA: te reguly musza stac PO bazowych regulach .libbar — media query nie
   podnosi specyficznosci, wiec przeniesione wyzej byly bez efektu. */
@media(max-width:820px){
  .libbar{grid-template-columns:1fr;gap:20px}
  .libbar-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .libband{padding:36px 22px}
  .libbar-txt h2{max-width:none}
}
@media(max-width:560px){
  .libbar-links{grid-template-columns:1fr}
  .libbar-txt h2{font-size:20px}
}

/* ─── Grupy materiałów w kalkulatorze ─────────────────────── */
.mat-group + .mat-group{margin-top:12px}
.mat-group-lbl{display:block;margin-bottom:9px;font:600 var(--t-label)/1 var(--mono);
  text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
/* UKLAD-06: odnosnik do porownania siedzi teraz w wierszu z etykieta, a nie
   w osobnej linii pod kafelkami. Odzyskuje 29 px miedzy materialem a kolorem
   i nie zmienia swojego charakteru: nadal wyciszony i ze strzalka w dol. */
.mat-link{font-weight:400;font-size:12.5px;margin-left:8px}
.mat-hint{margin:9px 0 0}
/* Odnosnik do sekcji materialow zamiast dawnej podpowiedzi "PLA do gadzetow...".
   Ma byc do znalezienia, gdy ktos szuka, i niewidoczny, gdy juz wie, co wybiera -
   dlatego kolor wyciszony i strzalka w dol, ktora mowi, ze to skok na tej samej stronie. */
.mat-link,.mat-hint a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--muted) 38%,transparent);transition:color var(--t)}
.mat-link::after,.mat-hint a::after{content:" \2193";text-decoration:none;display:inline-block}
.mat-link:hover,.mat-hint a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* CTA w navie, gdy trzyma kwotę wyceny */
.nav-links a.btn.cta-quote{font-variant-numeric:tabular-nums}

/* powrót na podstronach treściowych */
.subpage-back{max-width:var(--wrap);margin:0 auto;padding:18px 24px 0}
.subpage-back a{font-size:14px;text-decoration:none;color:var(--muted)}
.subpage-back a:hover{color:var(--accent)}

/* Sekcja .lib-grid ("Skąd wziąć gotowe modele") zostala zastapiona
   zwartym paskiem .libbar. Jej reguly .lib-name/.lib-desc przetrwaly
   w arkuszu i — stojac nizej — nadpisywaly pasek: nazwa serwisu liczyla
   sie na 16.5px zamiast 13.5px. Usuniete; historia w gicie. */

/* ─── Najczęstsze zastosowania druku 3D ───────────────────────
   Kafelek ma dwie warstwy: sygnet kategorii (SVG) leży pod zdjęciem.
   Gdy zdjęcia jeszcze nie ma, `onerror` chowa <img> i zostaje sygnet —
   sekcja wygląda wtedy celowo, a nie jak zepsuty obrazek. */
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.uc{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;
  box-shadow:var(--shadow-sm),inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent);
  transition:border-color var(--t)}
.uc:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.section.alt .uc{background:var(--bg)}

.uc-shot{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;
  display:grid;place-items:center;background:var(--surface-2);border-bottom:1px solid var(--border)}
.section.alt .uc-shot{background:var(--surface)}
.uc-shot svg{width:54px;height:54px;opacity:.7;color:color-mix(in srgb,var(--accent) 55%,var(--muted))}
.uc-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.uc-shot img[hidden]{display:none}

.uc-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.uc-body h3{font-size:var(--t-card);margin-bottom:8px;letter-spacing:-.02em}
.uc-body p{color:var(--muted);font-size:var(--t-body);line-height:1.66;margin:0}
.uc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px}
.uc-tag{font:400 11px/1.5 var(--mono);color:var(--muted);background:var(--surface-2);
  border-radius:var(--r-xs);padding:4px 8px}
.section.alt .uc-tag{background:var(--surface-2)}

.uc-note{margin:22px 0 0;font:400 12px/1.5 var(--mono);color:var(--muted)}

@media(max-width:900px){.uc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){
  .uc-grid{grid-template-columns:1fr}
  .uc-shot{aspect-ratio:16/9}
  .uc-body{padding:16px 18px 18px}
}

/* ─── Przewagi druku 3D nad innymi metodami wytwarzania ───────
   Uwaga: nie nazywać tych klas `adv-*` – filtry kosmetyczne adblocków
   ukrywają elementy o takim prefiksie (display:none) i sekcja znika. */
/* Bento: dwie karty wiodace na gorze, cztery wspierajace pod nimi.
   Wiodace to te dwie pozycje, ktore zmieniaja sam model kosztu
   (geometria za darmo, wybor tworzywa) — reszta to wygoda. */
.meth-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.meth-grid > .meth:nth-child(-n+2){grid-column:span 2}
.meth{padding:26px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm),inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent);
  transition:border-color var(--t)}
.meth:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--border))}
.section.alt .meth{background:var(--bg)}
.meth-ico{width:38px;height:38px;flex:none;display:grid;place-items:center;margin-bottom:16px;
  border-radius:var(--r-sm);background:var(--surface-2);color:var(--accent);
  border:1px solid var(--border)}
.meth-ico svg{width:19px;height:19px;display:block}
.meth h3{font-size:var(--t-card);margin-bottom:8px;letter-spacing:-.02em}
.meth p{color:var(--muted);font-size:var(--t-body);margin:0;line-height:1.66}
.meth-grid > .meth:nth-child(-n+2) h3{font-size:var(--t-sub);letter-spacing:-.03em;max-width:23ch}
.meth-grid > .meth:nth-child(-n+2) p{font-size:16.5px;max-width:54ch}
/* wiersz porównawczy – metoda alternatywna i jej ograniczenie; dosunięty do dołu karty */
/* "W praktyce" to konkretny przyklad, wiec dostaje wlasny rejestr:
   mono na etykiecie, dosuniete do dolu karty. */
.meth-vs{display:block;margin-top:auto;padding-top:15px;font-size:14px;line-height:1.6;color:var(--muted)}
.meth p + .meth-vs{border-top:1px solid var(--border);margin-top:auto}
.meth-vs strong{display:block;margin-bottom:4px;font:600 var(--t-label)/1 var(--mono);
  text-transform:uppercase;letter-spacing:.11em;color:var(--accent)}

/* uczciwa granica – kiedy odradzamy tę technologię */
.meth-limits{margin-top:0;padding:32px 34px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--shadow-sm),inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent)}
.section.alt .meth-limits{background:var(--bg)}
.meth-limits h3{font-size:var(--t-card);margin-bottom:8px;letter-spacing:-.02em}
.meth-limits > p{color:var(--muted);font-size:15px;line-height:1.65;margin:0 0 18px;max-width:68ch}
.meth-lim{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.meth-lim li{position:relative;padding:24px 26px 24px 46px;font-size:var(--t-body);line-height:1.65;
  color:var(--muted);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--shadow-sm),inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent)}
.section.alt .meth-lim li{background:var(--bg)}
.meth-lim strong{display:block;margin-bottom:5px;color:var(--text);font-weight:700;
  font-size:var(--t-card);letter-spacing:-.02em}
.meth-lim li::before{content:"";position:absolute;left:26px;top:28px;width:12px;height:9px;
  background-image:repeating-linear-gradient(to bottom,var(--accent) 0 1px,transparent 1px 3px)}
.meth-lim strong{color:var(--text);font-weight:650}

@media(max-width:1000px){
  .meth-grid{grid-template-columns:repeat(2,1fr)}
  .meth-grid > .meth:nth-child(-n+2){grid-column:span 2}
}
@media(max-width:660px){
  .meth-grid{grid-template-columns:1fr}
  .meth-grid > .meth:nth-child(-n+2){grid-column:span 1}
  .meth-lim{grid-template-columns:1fr}
  .meth,.meth-limits{padding:20px}
  .meth-grid > .meth:nth-child(-n+2) h3{font-size:var(--t-card);max-width:none}
  .meth-grid > .meth:nth-child(-n+2) p{font-size:var(--t-body)}
}

/* ─── Proces druku FDM ────────────────────────────────────── */
.fdm-proc{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:44px;align-items:start}
.fdm-vis{position:sticky;top:80px}
.fdm-vis svg{display:block;width:100%;height:auto}
.fdm-vis svg text{font-family:inherit}

/* kroki procesu – numeracja spięta pionową osią */
.fdm-steps{list-style:none;margin:0;padding:0;position:relative}
.fdm-steps::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:1px;background:var(--border)}
.fdm-steps li{display:flex;gap:16px;padding-bottom:24px;position:relative}
.fdm-steps li:last-child{padding-bottom:0}
.fs-n{flex:none;width:35px;height:35px;border-radius:var(--r-xs);display:grid;place-items:center;
  font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--accent);background:var(--surface);border:1px solid var(--border);
  position:relative;z-index:1}
.section.alt .fs-n{background:var(--surface)}
.fdm-steps h4{margin:6px 0 6px;font-size:var(--t-card);font-weight:700;letter-spacing:-.02em}
.fdm-steps p{margin:0;font-size:var(--t-body);line-height:1.66;color:var(--muted);max-width:62ch}

/* parametry procesu – dane techniczne, nie hasła
   Separatory rysuje tlo kontenera prześwitujace przez szczeliny gap, wiec kazda
   komorka bez kafelka zostawala pustym prostokatem w kolorze obramowania. Po
   usunieciu kafelka ze srednica dyszy zostaly trzy kafelki w siatce cztero-
   i dwukolumnowej, czyli zawsze jedna dziura, na desktopie cala cwiartka pasa.
   Flex z zawijaniem nie tworzy pustych komorek: kafelki rozciagaja sie na caly
   wiersz, ile by ich nie bylo, wiec kolejne dodanie albo usuniecie kafelka
   niczego juz nie zepsuje. */
.fdm-specs{display:flex;flex-wrap:wrap;gap:1px;margin:44px 0 0;padding:0;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.fspec{background:var(--surface);padding:22px 24px;flex:1 1 200px;min-width:0}
.section.alt .fspec{background:var(--bg)}
.fspec dt{font:600 var(--t-label)/1 var(--mono);text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
.fspec dd{margin:11px 0 0;font:600 clamp(17px,1.6vw,21px)/1.15 var(--mono);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fspec-note{display:block;margin-top:6px;font:400 11.5px/1.3 var(--mono);color:var(--muted)}

@media(max-width:900px){
  .fdm-proc{grid-template-columns:1fr;gap:32px}
  .fdm-vis{position:static;max-width:380px;margin:0 auto}
  .fdm-specs{margin-top:32px}
}
@media(max-width:560px){
  .fdm-steps li{gap:13px;padding-bottom:20px}
  .fdm-steps::before{left:15px}
  .fs-n{width:31px;height:31px;font-size:11px}
  .fdm-steps h4{font-size:15px;margin-top:5px}
  .fdm-steps p{font-size:13.5px}
  .fspec{padding:14px 16px}
  .fspec dd{font-size:18px}
}

/* ─── Sekcja materiałów: przełącznik widoku ───────────────── */
.mat-viewsel{display:flex;gap:4px;justify-content:center;margin:0 0 26px;padding:4px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);width:max-content;max-width:100%}
.mv-btn{border:0;background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;
  padding:7px 16px;border-radius:var(--r-pill);cursor:pointer;transition:background var(--t),color var(--t);white-space:nowrap}
.mv-btn:hover{color:var(--text)}
.mv-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(16,24,40,.06)}

/* ─── Karty materiałów ────────────────────────────────────── */
.mat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:stretch}
.mat-card{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;transition:border-color var(--t);
  box-shadow:var(--shadow-sm),inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent)}
.mat-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}

.mc-head{display:flex;flex-direction:column;gap:8px}
.mc-title{margin:0;font:600 21px/1 var(--mono);letter-spacing:-.02em}
.mc-headline{margin:0;font-size:15px;line-height:1.55;color:var(--text)}
/* twarde liczby – to, czego szuka klient techniczny */
.mc-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:15px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mc-fact{display:flex;flex-direction:column;gap:2px;min-width:0}
.mcf-v{font:600 16px/1.15 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mcf-l{margin-top:4px;font-size:11px;line-height:1.35;color:var(--muted)}

/* paski ocen 0–5 */
.mc-axes{display:flex;flex-direction:column;gap:7px}
.mc-axis{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mc-axis-lbl{font-size:13px;color:var(--muted)}
.rating-bar{display:inline-flex;gap:3px;flex:none}
.rb-seg{width:16px;height:6px;border-radius:2px;background:var(--surface-2);border:1px solid var(--border)}
.rb-seg.on{background:var(--accent);border-color:var(--accent)}

.mc-uses h4{margin:0 0 9px;font:600 var(--t-label)/1 var(--mono);text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted)}
.mc-uses ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.mc-uses li{font-size:14px;line-height:1.5;padding-left:16px;position:relative}
.mc-uses li::before{content:"";position:absolute;left:3px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* Porada, nie ostrzezenie. Wypelnione pudelko z ramka to uniwersalny wzorzec
   alertu, a pomaranczowe tlo dokladalo skojarzenie z ostrzezeniem: rzetelna
   porada zakupowa czytala sie jak powod, zeby sie wycofac. Teraz mowi jezykiem
   samej karty, ta sama wlosowa kreska co nad liczbami i ten sam naglowek co nad
   zastosowaniami, wiec jest kolejna sekcja specyfikacji, a nie komunikat. */
.mc-tip{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--border)}
.mc-tip h4{margin:0 0 8px;font:600 var(--t-label)/1 var(--mono);text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted)}
.mc-tip p{margin:0;font-size:13.5px;line-height:1.6;color:var(--text)}

/* ─── Tabela porównawcza ──────────────────────────────────── */
.mat-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm),inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent);
  padding:6px 6px 0;overflow-x:auto}
.mat-table{width:100%;border-collapse:collapse;font-size:13px;min-width:840px}
.mat-table th,.mat-table td{padding:11px 10px;text-align:left;border-bottom:1px solid var(--border)}
.mat-table thead th{font:600 var(--t-label)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);white-space:nowrap;vertical-align:bottom}
/* Naglowki ocen sa dlugie ("Odpornosc na wysoka temperature") - bez zawijania
   tabela robi sie szersza od kontenera i chowa kolumne z przyciskiem. */
.mat-table thead th[scope="col"]{white-space:normal}
.mt-group th{padding-bottom:6px;font:600 10.5px/1 var(--mono);letter-spacing:.11em;color:var(--accent);
  border-bottom:0;text-align:center}
.mt-group td{border-bottom:0}
.mt-group th+th{border-left:1px solid var(--border)}
.mat-table tbody tr:last-child th,.mat-table tbody tr:last-child td{border-bottom:0}
.mat-table tbody tr:hover{background:var(--surface-2)}
.mt-name{font:600 14px/1.2 var(--mono);letter-spacing:-.02em;white-space:nowrap}
.mt-sub{display:block;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:2px}
.mt-num{white-space:nowrap;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}
.mt-rate{width:1%}
.mt-pick{background:none;border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 12px;
  font:inherit;font-size:12.5px;font-weight:600;color:inherit;cursor:pointer;white-space:nowrap;
  transition:background var(--t),border-color var(--t),color var(--t)}
.mt-pick:hover{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.mat-note{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:92ch}

@media(max-width:560px){
  .mat-card{padding:16px}
  .mc-facts{grid-template-columns:1fr;gap:10px}
  .mc-fact{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px}
  .mcf-l{text-align:right}
}

.cta-band{position:relative;padding:120px 28px;text-align:center;background:var(--surface);
  background-image:radial-gradient(78% 128% at 50% 128%,
    color-mix(in srgb,var(--accent) 17%,transparent),transparent 64%)}
.cta-band h2{font-size:var(--t-title);font-weight:800;letter-spacing:-.038em;max-width:16ch;margin:0 auto}
.cta-band p{color:var(--muted);margin:16px auto 34px;font-size:var(--t-lead);max-width:46ch}
.cta-band .btn{width:auto;padding:16px 38px;font-size:16px;border-radius:var(--r-md)}
@media(max-width:560px){.cta-band{padding:72px 20px}}

.site-footer{position:relative;background:var(--surface);padding:64px 28px 40px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-note{color:var(--muted);font-size:12.5px;line-height:1.6;text-align:right}

@media(max-width:820px){
  .steps,.benefits{grid-template-columns:1fr}
}

/* ─── PARAM-04: próbniki kolorów ───────────────────────────── */
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:30px;height:30px;padding:0;border-radius:var(--r-sm);border:2px solid var(--border);background:var(--surface);cursor:pointer;display:grid;place-items:center}
.swatch .sw-dot{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.swatch:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
.swatch.sel{border-color:var(--accent)}
.swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ─── CENA-04: stepper ilości + progi rabatowe ─────────────── */
.qty-block{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.qty-lbl{font-weight:600;font-size:13.5px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--field-border);border-radius:var(--r-sm);overflow:hidden}
.stepper button{width:34px;height:34px;border:0;background:var(--surface-2);color:var(--text);font-size:18px;line-height:1;cursor:pointer}
.stepper button:hover{color:var(--accent)}
.stepper input{width:52px;height:34px;border:0;border-left:1px solid var(--field-border);border-right:1px solid var(--field-border);
  background:var(--surface);color:var(--text);text-align:center;font:inherit;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tiers{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.tier{font-size:11px;color:var(--muted);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:3px 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tier.on{color:var(--accent);border-color:var(--accent);background:var(--surface-2);font-weight:600}

/* Pasek linkow tuz pod naglowkiem sekcji. To jest GLOWNA droga do podstron:
   link na dole karty widzi tylko ten, kto przewinie 1400 px karty do konca. */
.sekcja-linki{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 30px}
.sl-lbl{font:600 var(--t-label)/1 var(--mono);text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted)}
.sekcja-linki ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sekcja-linki a{display:inline-block;padding:7px 14px;border:1px solid var(--border);
  border-radius:var(--r-pill);font-size:13.5px;font-weight:600;text-decoration:none;
  color:var(--text);background:var(--surface);transition:border-color var(--t),color var(--t)}
.section.alt .sekcja-linki a{background:var(--bg)}
.sekcja-linki a:hover{border-color:var(--accent);color:var(--accent)}

/* Linki ze strony glownej do podstron tematycznych. Bez nich nowe strony
   sa sierotami: klient ich nie znajdzie, a robot dojdzie tylko przez mape. */
.mc-link{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:600;
  color:var(--accent);text-decoration:none}
.mc-link:hover{text-decoration:underline}
.uc-link{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:600;
  color:var(--accent);text-decoration:none}
.uc-link:hover{text-decoration:underline}
/* Pytania i poradniki obok siebie. Poradniki sa dluzsza odpowiedzia na te
   same watpliwosci, wiec stoja w zasiegu wzroku przez cala liste pytan,
   a nie dopiero pod nia. Kolumna jest przyklejona, bo lista pytan jest
   dluzsza od niej. */
.faq-uklad{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:26px 40px;align-items:start}
.faq-uklad .faq{max-width:none}
.faq-bok{position:sticky;top:88px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);padding:20px 22px;
  box-shadow:var(--shadow-sm),inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent)}
/* Cztery materialy, szesc zastosowan i cztery poradniki, czyli komplet.
   Przy niskim oknie kolumna jest wyzsza od ekranu, wiec przewija sie sama,
   zamiast chowac dolne pozycje pod krawedzia. */
.faq-bok{max-height:calc(100vh - 108px);overflow-y:auto}
.fb-tytul{margin:0 0 6px;font-size:16px;font-weight:750;letter-spacing:-.02em}
.fb-wstep{margin:0 0 16px;color:var(--muted);font-size:12.5px;line-height:1.5}
.fb-grupa + .fb-grupa{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.faq-bok h3{margin:0 0 8px;font:600 var(--t-label)/1 var(--mono);text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted)}
.faq-bok ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.faq-bok a{display:block;padding:7px 0;font-size:13.5px;line-height:1.35;font-weight:600;
  color:var(--text);text-decoration:none}
.faq-bok a:hover{color:var(--accent)}
@media(max-width:900px){
  .faq-uklad{grid-template-columns:1fr}
  .faq-bok{position:static;max-height:none;overflow:visible}
}

/* --- Podstrony tematyczne (materialy, zastosowania, poradniki) -----
   Wezsza kolumna niz sekcje na stronie glownej, bo to sie CZYTA, a nie
   przeglada. Zadnego nowego jezyka wizualnego: naglowki, listy kart i
   pytania biora style, ktore juz sa. */
.artykul{max-width:880px;margin:0 auto;padding:34px 24px 80px}
.art-okruszki{font-size:12.5px;color:var(--muted);margin-bottom:22px}
.art-okruszki a{color:var(--muted);text-decoration:none}
.art-okruszki a:hover{color:var(--accent);text-decoration:underline}
.art-sep{opacity:.5;margin:0 2px}
.artykul h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.035em;
  line-height:1.05;margin:0 0 16px;text-wrap:balance}
.art-lead{font-size:var(--t-lead);line-height:1.62;color:var(--muted);margin:0 0 30px;max-width:58ch}
.artykul h2{font-size:clamp(21px,2.6vw,27px);font-weight:800;letter-spacing:-.028em;
  margin:44px 0 14px;text-wrap:balance}
.artykul h3{font-size:17px;margin:28px 0 8px}
.artykul p{font-size:16px;line-height:1.7;margin:0 0 15px;max-width:68ch}
.artykul > ul{margin:0 0 18px;padding-left:22px;max-width:68ch}
.artykul > ul > li{font-size:16px;line-height:1.65;margin-bottom:9px}
.artykul a{color:var(--accent)}
/* Lista kart: ten sam wyglad, co granice technologii na stronie glownej,
   ale w jednej kolumnie, bo kolumna tekstu jest tu wezsza. */
.art-karty{grid-template-columns:1fr;gap:10px;margin:0 0 20px}
.art-karty li{padding:18px 22px 18px 42px}
.art-karty li::before{left:22px;top:22px}
.art-fakty{margin:0 0 26px}
.art-tabela{overflow-x:auto;margin:0 0 22px}
.art-tabela table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:460px}
.art-tabela th,.art-tabela td{text-align:left;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--border);vertical-align:top;line-height:1.5}
.art-tabela thead th{font-size:12px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;border-bottom-color:var(--field-border)}
.art-tabela tbody th{font-weight:650;padding-right:20px}
.art-uwaga{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:14px 16px;font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 22px;max-width:none}
.art-faq{margin:8px 0 26px;max-width:none}
.art-wycen{margin:28px 0 8px}
.art-wycen .btn{width:auto;padding:14px 30px}
/* .artykul a{color:var(--accent)} ma wyzsza specyficznosc niz .btn, wiec
   napis na przycisku robil sie pomaranczowy na pomaranczowym tle i zostawal
   sam prostokat. Ten sam blad byl juz raz przy .legal-download. */
.artykul a.btn,.artykul a.btn:hover{color:var(--on-accent)}
.art-dalej{margin-top:52px;padding-top:26px;border-top:1px solid var(--border)}
.art-dalej h2{font-size:15px;font-weight:600;letter-spacing:.02em;margin:0 0 12px;color:var(--muted)}
.art-dalej ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.art-dalej a{display:inline-block;padding:8px 14px;border:1px solid var(--border);
  border-radius:var(--r-pill);font-size:13.5px;text-decoration:none;color:var(--text)}
.art-dalej a:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:640px){
  .artykul{padding:24px 18px 64px}
  .artykul p,.artykul > ul > li{font-size:15.5px}
}

/* ─── Podstrony prawne (regulamin / polityka) ──────────────── */
.legal{max-width:760px;margin:0 auto;padding:40px 24px 64px}
.legal-back{display:inline-block;margin-bottom:20px;font-size:13.5px;text-decoration:none}
.legal-back:hover{text-decoration:underline}
.legal h1{font-size:clamp(24px,3vw,30px);letter-spacing:-.02em;margin-bottom:6px}
.legal-meta{color:var(--muted);font-size:13px;margin-bottom:24px}
.legal h2{font-size:17px;margin:28px 0 10px}
.legal p,.legal li{color:var(--text);font-size:14.5px;line-height:1.65}
.legal ul,.legal ol{margin:0 0 4px;padding-left:22px}
.legal li{margin-bottom:6px}
.legal a{color:var(--accent)}
.legal-note{margin-top:32px;padding-top:16px;border-top:1px solid var(--border);color:var(--muted);font-size:12.5px;font-style:italic}
.legal-note-inline{color:var(--muted);font-style:italic}
.legal h3{font-size:15px;margin:20px 0 8px}
.legal-download{margin:0 0 22px}
/* .legal a{color:var(--accent)} wygrywalo specyficznoscia z .btn i malowalo napis
   na przycisku tym samym kolorem co tlo: przycisk byl pomaranczowa plamka bez
   tekstu, przez co wygladal jak zepsute pobieranie. */
.legal-download .btn,.legal-download .btn:hover{color:var(--on-accent)}
.legal-attachments{margin:18px 0 24px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2)}
.legal-attachments strong{display:block;margin-bottom:8px;font-size:13.5px}
.legal-attachments ul{margin:0;padding-left:20px}
.legal-attachments li{font-size:14px;margin-bottom:4px}

/* ─── STATUS-01: strona powrotu z platnosci ───────────────────
   Podsumowanie zamowienia po powrocie z bramki. Etykieta i wartosc obok siebie
   na szerokim ekranie, jedna pod druga na telefonie, bo nazwy plikow bywaja
   dlugie i na waskim ekranie nie ma ich gdzie zmiescic w drugiej kolumnie. */
.pay-box{margin:4px 0 18px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);
  padding:4px 16px}
.pay-row{display:flex;gap:16px;justify-content:space-between;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--border);font-size:14.5px}
.pay-row:last-child{border-bottom:none}
.pay-lbl{color:var(--muted);font-size:13px;flex:none}
.pay-row strong{font-variant-numeric:tabular-nums}
.pay-files span:last-child{text-align:right;word-break:break-word}
.pay-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pay-actions .btn{width:auto}
@media(max-width:520px){
  .pay-row{flex-direction:column;gap:3px}
  .pay-files span:last-child{text-align:left}
  .pay-actions .btn{width:100%}
}

.table-wrap{overflow-x:auto;margin:12px 0 18px}
.legal table{border-collapse:collapse;width:100%;font-size:13px}
.legal th,.legal td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}
.legal th{background:var(--surface-2);font-weight:650}
.legal code{background:var(--surface-2);padding:1px 5px;border-radius:5px;font-size:12.5px}
/* Rozbudowana stopka (dane sprzedawcy + linki prawne) */
.site-footer .foot{max-width:var(--wrap);margin:0 auto;display:grid;align-items:start;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  grid-template-areas:"brand links" "seller links" "gpsr gpsr";
  gap:14px 64px}
.foot-brand{grid-area:brand;font-weight:750;display:flex;align-items:center;gap:9px;font-size:16px;
  letter-spacing:-.01em}
/* Znak marki w stopce nie renderowal sie wcale: stylowal go selektor
   .brand .dot, a stopka uzywa .foot-brand — element mial 0x0 px. */
.foot-brand .dot{width:22px;height:22px;border-radius:var(--r-xs);flex:none;
  background:linear-gradient(135deg,var(--accent),#f0a500)}
/* Znak: pelna bryla z trzema wycieciami, plaska, bez gradientu. Maska
   zostawia border-radius jako awaryjny ksztalt tam, gdzie mask nie dziala. */
.brand .dot,.foot-brand .dot{background:var(--accent);
  -webkit-mask:var(--znak) center/contain no-repeat;
  mask:var(--znak) center/contain no-repeat}

.foot-seller{grid-area:seller;color:var(--muted);font-size:13px;line-height:1.75;max-width:68ch}
.foot-seller a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.foot-seller a:hover{color:var(--accent)}
/* Piec pomaranczowych linkow w jednym rzedzie czytalo sie jak pasek
   ostrzezen. Kolumna, kolor tekstu pomocniczego, akcent na hover. */
.foot-links{grid-area:links;display:flex;flex-direction:column;gap:11px;
  font:400 12.5px/1.3 var(--mono)}
.foot-links a{color:var(--muted);text-decoration:none;width:max-content}
.foot-links a:hover{color:var(--accent)}
.foot-gpsr{grid-area:gpsr;color:var(--muted);font:400 12px/1.6 var(--mono);margin-top:28px;
  border-top:1px solid var(--border);padding-top:18px}
.foot-gpsr a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.foot-gpsr a:hover{color:var(--accent)}

@media(max-width:760px){
  .site-footer{padding:44px 20px 30px}
  .site-footer .foot{grid-template-columns:1fr;
    grid-template-areas:"brand" "seller" "links" "gpsr";gap:16px}
  .foot-links{gap:12px;margin-top:4px}
}
/* Baner zgód cookies */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:1000;padding:14px}
.cc-box{max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:0 8px 30px rgba(0,0,0,.28)}
.cc-head{font-weight:750;font-size:15px;margin-bottom:6px}
.cc-text{color:var(--muted);font-size:12.5px;line-height:1.55;margin:0 0 12px}
.cc-text a{color:var(--accent)}
.cc-btns{display:flex;gap:8px;flex-wrap:wrap}
.cc-btns .btn{width:auto}
.cc-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:8px 0;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted);line-height:1.5}
.cc-row span strong{color:var(--text)}
.cc-row input{margin-top:2px;accent-color:var(--accent);flex:none}
.cc-row:first-of-type{border-top:0}

/* ─── Wyszukiwarka paczkomatów ─────────────────────────────── */
.locker-search{display:flex;gap:8px}
.locker-search input{flex:1}
.locker-search .btn{width:auto;white-space:nowrap}
.locker-filter{margin-top:8px;width:100%}
.locker-results{margin-top:8px;max-height:230px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.locker-item{display:grid;grid-template-columns:1fr auto;column-gap:8px;row-gap:2px;width:100%;text-align:left;cursor:pointer;
  padding:9px 12px;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--text);font:inherit}
.locker-item:last-child{border-bottom:0}
.locker-item:hover{background:var(--surface-2)}
/* Wiersz listy, wiec zamiast ramki dookola lewa krawedz w akcencie. */
.locker-item.sel{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent)}
.li-code{grid-column:1;grid-row:1;font-weight:650;font-size:13px}
.li-addr{grid-column:1/-1;grid-row:2;color:var(--muted);font-size:12px;line-height:1.35}
.li-dist{grid-column:2;grid-row:1;align-self:center;font-size:11.5px;font-weight:600;color:var(--accent);white-space:nowrap}
.locker-empty,.locker-more{padding:10px 12px;color:var(--muted);font-size:12.5px}
.locker-more{text-align:center;border-top:1px solid var(--border)}

/* ─── STRONA-08: FAQ + dla firm ────────────────────────────── */
/* Lista pytan wyrownana do lewej, w mierze czytelnej dla naglowkow
   pytan — nie na pelna szerokosc kontenera, bo wiersz podsumowania
   rozjechalby sie na 1400 px. */
.faq{max-width:880px;margin:0;display:flex;flex-direction:column;gap:9px}
.faq details{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  transition:border-color var(--t)}
.faq details:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.faq summary::after{transition:color var(--t)}
.faq summary:hover::after{color:var(--accent)}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;font-size:16.5px;
  letter-spacing:-.015em;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-size:20px;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0;padding:0 22px 20px;color:var(--muted);font-size:var(--t-body);line-height:1.66;max-width:66ch}

/* ─── UKŁAD-03: zwinięcie hero po wgraniu modelu ───────────── */
.hero{transition:padding .2s ease}
body.has-model .hero{padding:14px 28px}
body.has-model .hero::before{display:none}
body.has-model .hero .badge,
body.has-model .hero .lead,
body.has-model .hero .eyebrow,
body.has-model .hero .hero-aside{display:none}
body.has-model .hero-inner{display:block}
body.has-model .hero h1{font-size:18px;line-height:1.3;margin:0;max-width:none;letter-spacing:-.02em}
@media(prefers-reduced-motion:reduce){
  .hero{transition:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .libbar-links a:hover{transform:none}
}

/* ─── UKŁAD-04: mobilny pasek z ceną i przyciskiem ─────────── */
.mobile-bar{display:none}
@media(max-width:900px){
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(0,0,0,.25)}
  .mobile-bar .mb-price{flex:1;font:600 19px/1.1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
  .mobile-bar .mb-price small{display:block;margin-top:3px;letter-spacing:0;
    font:400 11px/1.2 var(--font);color:var(--muted)}
  .mobile-bar .btn{width:auto;padding:12px 20px}
  body.has-quote{padding-bottom:70px}
  .stage{max-height:42vh}
  .opt-grid{grid-template-columns:repeat(2,1fr)}
}