/* MarketCAT Design 2026 — generowane z page.part1.html + wp-extra.css.html.
   Nie edytuj tutaj: zmiany przepadna przy nastepnym build_wp.py. */
/* ============================================================
   MarketCAT — strona główna 2026
   Świat wizualny: „jedwab i maszyna”.
   Jedwabny shader WebGL jest podłożem całej strony (canvas fixed);
   sekcje to matowe płyty, które to podłoże zasłaniają, a hero
   i zamknięcie są oknami, przez które je widać.
   ============================================================ */

:root{
  --bg:#06060B;
  --bg-deep:#02010A;
  --plate:#0A0A12;
  --plate-2:#0D0D16;

  --ink:#F4F5F7;
  --ink-2:rgba(244,245,247,.72);
  --ink-3:rgba(244,245,247,.58);

  --hair:rgba(244,245,247,.09);
  --hair-2:rgba(244,245,247,.16);

  --accent:#D51C82;      /* wypełnienia i przyciski (biały tekst 4.9:1) */
  --accent-lit:#FF5BA9;  /* akcent tekstowy na ciemnym tle (6.7:1) */
  --accent-glow:#E0218A; /* wyłącznie światło i poświata */
  --violet:#916BBF;
  --indigo:#3D2C8D;

  --rail:1416px;
  --gutter:clamp(20px, 4.2vw, 64px);

  --step:clamp(64px, 8vw, 128px);   /* rytm pionowy sekcji */
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{
  background:var(--bg-deep);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  /* Świadomie jednowariantowy, ciemny świat marki: tło malujemy jawnie,
     żeby strona trzymała się także w jasnym motywie hosta. */
  background:var(--bg-deep);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 100;
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* --- powierzchnie, których nie rysujemy sami, też należą do systemu --- */
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent-lit); outline-offset:3px; border-radius:2px; }
html{ scrollbar-color:rgba(244,245,247,.22) transparent; scrollbar-width:thin; caret-color:var(--accent-lit); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-deep); }
::-webkit-scrollbar-thumb{ background:rgba(244,245,247,.16); border:3px solid var(--bg-deep); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(244,245,247,.28); }

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.032em; line-height:1.04; }
ul{ margin:0; padding:0; list-style:none; }

/* ============================================================
   1. PODŁOŻE — jedwabny shader na całą szerokość okna
   ============================================================ */
#silk{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  display:block; pointer-events:none;
  background:linear-gradient(168deg, #0B0A2C 0%, #04052E 42%, #02010A 100%);
}
.page{ position:relative; z-index:1; }

/* ============================================================
   2. SIATKA — jedna szyna i włosowe linie kolumn
   ============================================================ */
.rail{
  width:100%; max-width:var(--rail);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.rules{
  position:absolute; inset:0; left:0; right:0;
  z-index:0; pointer-events:none;
  width:100%; max-width:var(--rail);
  margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.rules span{ border-left:1px solid var(--hair); }
.rules::after{ content:""; position:absolute; top:0; bottom:0; right:var(--gutter); border-right:1px solid var(--hair); }
@media (max-width:760px){ .rules{ grid-template-columns:repeat(2,1fr); } }

section{ position:relative; }
section > .rail{ position:relative; z-index:1; }

/* płyta = sekcja nieprzezroczysta, zasłania jedwab */
.plate{ background:var(--plate); }
.plate--alt{ background:var(--plate-2); }
.plate + .plate{ border-top:1px solid var(--hair); }

/* ============================================================
   3. TYPOGRAFIA
   ============================================================ */
.display{
  font-variation-settings:"wdth" 118;
  font-weight:800;
  letter-spacing:-.038em;
  line-height:.98;
  text-wrap:balance;
}
h1.display{ font-size:clamp(2.55rem, 6.4vw, 6rem); }
h2.display{ font-size:clamp(2rem, 4.1vw, 3.5rem); letter-spacing:-.035em; }
h3{ font-size:clamp(1.18rem,1.5vw,1.4rem); font-variation-settings:"wdth" 108; letter-spacing:-.024em; }

/* Recznie lamane naglowki maja sens dopiero od tabletu w gore. */
@media (max-width:680px){ .display br{ display:none; } }
.lede{
  font-size:clamp(1.09rem,1.02rem + .5vw,1.375rem);
  line-height:1.5; color:var(--ink-2);
  max-width:34ch; text-wrap:pretty;
}
.body{ color:var(--ink-2); max-width:66ch; text-wrap:pretty; }
.small{ font-size:.9375rem; line-height:1.55; color:var(--ink-3); max-width:60ch; }

.meta{
  font-variation-settings:"wdth" 86;
  font-size:.6875rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3);
}
.num{ font-variant-numeric:tabular-nums lining-nums; }

/* ============================================================
   4. PRZYCISKI
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.5em;
  font-family:inherit; font-size:.9375rem; font-weight:600;
  font-variation-settings:"wdth" 100;
  letter-spacing:-.01em;
  border-radius:2px; border:1px solid transparent;
  cursor:pointer; position:relative; overflow:hidden; white-space:nowrap;
  transition:background-color .35s var(--ease), border-color .35s var(--ease),
             color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none; transition:transform .4s var(--ease); }
.btn--primary{
  background:var(--accent); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.28) inset;
}
.btn--primary:hover{ background:#E8248D; transform:translateY(-1px); }
.btn--primary:hover svg{ transform:translateX(3px); }
.btn--ghost{ background:rgba(244,245,247,.04); color:var(--ink); border-color:var(--hair-2); }
.btn--ghost:hover{ background:rgba(244,245,247,.09); border-color:rgba(244,245,247,.32); transform:translateY(-1px); }
.btn--ghost:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(0); }

/* link tekstowy z podkreśleniem rysowanym od zera */
.link{
  display:inline-flex; align-items:center; gap:.45em;
  color:var(--accent-lit); font-weight:600; font-size:.9375rem;
  padding-bottom:2px;
  background-image:linear-gradient(var(--accent-lit),var(--accent-lit));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .45s var(--ease), color .3s var(--ease);
}
.link:hover{ background-size:100% 1px; }
.link svg{ width:14px; height:14px; transition:transform .4s var(--ease); }
.link:hover svg{ transform:translateX(3px); }

/* ============================================================
   5. NAWIGACJA — jedyne szkło na stronie: okno na jedwab
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  border-bottom:1px solid transparent;
  transition:background-color .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(6,6,11,.62);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--hair);
}
.nav__in{ display:flex; align-items:center; gap:clamp(16px,2.4vw,40px); height:72px; }
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand img{ width:26px; height:26px; }
.brand b{
  font-size:1.0625rem; font-weight:800; letter-spacing:-.03em;
  font-variation-settings:"wdth" 112;
}
.nav__links{ display:flex; align-items:center; gap:clamp(14px,1.7vw,28px); }
.nav__links a{
  font-size:.875rem; font-weight:500; color:var(--ink-2);
  transition:color .3s var(--ease);
  white-space:nowrap;
}
.nav__links a:hover{ color:var(--ink); }
.nav__side{ display:flex; align-items:center; gap:14px; }
.nav__cart{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid var(--hair-2); border-radius:2px;
  color:var(--ink-2); transition:border-color .3s var(--ease), color .3s var(--ease);
}
.nav__cart:hover{ border-color:rgba(244,245,247,.34); color:var(--ink); }
.nav__cart svg{ width:17px; height:17px; }
.nav__burger{
  display:none; width:36px; height:36px; padding:0;
  align-items:center; justify-content:center;
  background:rgba(244,245,247,.04); color:var(--ink);
  border:1px solid var(--hair-2); border-radius:2px; cursor:pointer;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav__burger:hover{ border-color:rgba(244,245,247,.34); background:rgba(244,245,247,.09); }
.nav__burger svg{ width:17px; height:17px; }
.nav__burger .x{ display:none; }
.nav__burger[aria-expanded="true"] .x{ display:block; }
.nav__burger[aria-expanded="true"] .m{ display:none; }
.nav__panel{
  border-top:1px solid var(--hair); background:rgba(6,6,11,.94);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
}
.nav__panel[hidden]{ display:none; }
.nav__panel ul{ padding-block:8px 16px; }
.nav__panel a{
  display:block; padding:13px 0; font-size:1rem; color:var(--ink-2);
  border-bottom:1px solid var(--hair); transition:color .3s var(--ease);
}
.nav__panel a:hover{ color:var(--ink); }
/* Reguly .nav__panel a (display:block, ramka, padding) sa bardziej szczegolowe
   niz .btn — przycisk musi je jawnie cofnac, inaczej strzalka lamie sie do nowej linii. */
.nav__panel .btn{
  display:flex; width:100%; justify-content:center;
  padding:.95em 1.5em; border-bottom:0;
  margin-top:18px; margin-bottom:22px; color:#fff;
}
.nav__panel .btn:hover{ color:#fff; }
/* Prog podniesiony z 1080 na 1150 px: po dodaniu pozycji "Kurs" siedem
   odnosnikow zaczynalo sie zbiegac z przyciskiem CTA tuz przy starym progu. */
@media (max-width:1150px){
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
}
@media (min-width:1151px){ .nav__panel{ display:none !important; } }
/* kotwice nie chowaja sie pod nawigacja */
[id]{ scroll-margin-top:96px; }

/* ============================================================
   6. HERO — okno na jedwab, pełna szerokość okna
   ============================================================ */
.hero{ min-height:min(94svh,960px); display:flex; flex-direction:column; justify-content:flex-end; padding-top:clamp(132px,18vh,220px); }
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(2,1,10,.62) 0%, rgba(2,1,10,.34) 38%, rgba(2,1,10,0) 76%),
    linear-gradient(180deg, rgba(2,1,10,.55) 0%, rgba(2,1,10,.10) 28%, rgba(2,1,10,.30) 64%, rgba(6,6,11,.94) 100%);
}
.hero__in{ padding-bottom:clamp(40px,7vh,84px); }
.hero h1{ max-width:15ch; }
.hero h1 .line{ display:block; overflow:hidden; padding-block:.07em; margin-block:-.07em; }
.hero h1 .line > span{ display:block; }
.hero__lede{ margin-top:clamp(20px,2.4vw,30px); max-width:47ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,3.4vw,44px); }

/* pasek danych na dolnej krawędzi hero */
.specs{ position:relative; z-index:1; border-top:1px solid var(--hair-2); }
.specs__in{ display:grid; grid-template-columns:repeat(3,1fr); }
.specs__in > div{ padding:20px 0 22px; padding-right:24px; }
.specs__in > div + div{ border-left:1px solid var(--hair); padding-left:24px; }
.specs strong{ display:block; font-size:.9375rem; font-weight:600; color:var(--ink); letter-spacing:-.015em; }
.specs span{ display:block; margin-top:3px; }
@media (max-width:760px){
  .specs__in{ grid-template-columns:1fr; }
  .specs__in > div + div{ border-left:0; border-top:1px solid var(--hair); padding-left:0; }
}

/* ============================================================
   7. PASEK PLATFORM
   ============================================================ */
.plat__in{ display:flex; align-items:center; gap:clamp(24px,5vw,72px); padding-block:26px; flex-wrap:wrap; }
.plat__lbl{ flex:none; }
.plat__logos{ display:flex; align-items:center; gap:clamp(24px,4.4vw,60px); flex-wrap:wrap; }
.plat__logos img{
  height:23px; width:auto; opacity:.62;
  filter:grayscale(1) brightness(1.8);
  transition:opacity .4s var(--ease), filter .4s var(--ease);
}
.plat__logos img:hover{ opacity:.92; filter:grayscale(0) brightness(1.7); }

/* ============================================================
   8. NAGŁÓWEK SEKCJI — linia z metadanymi po prawej
   ============================================================ */
.head{ padding-top:var(--step); }
.head__rule{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding-bottom:14px; border-bottom:1px solid var(--hair-2);
}
.head h2{ margin-top:clamp(28px,3.2vw,44px); max-width:20ch; }
.head .body{ margin-top:18px; }

/* ============================================================
   9. FLAGOWY PRODUKT — asymetryczny rozkład
   ============================================================ */
.flag{ padding-bottom:var(--step); }
.flag__grid{
  display:grid; gap:clamp(32px,4vw,64px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  align-items:start; margin-top:clamp(36px,4.4vw,60px);
}
@media (max-width:960px){ .flag__grid{ grid-template-columns:1fr; } }
@media (min-width:961px){ .screen{ position:sticky; top:104px; } }

.flag__price{ display:flex; align-items:baseline; gap:12px; margin-top:26px; }
.flag__price b{ font-size:clamp(2rem,3.4vw,2.9rem); font-weight:800; letter-spacing:-.04em; font-variation-settings:"wdth" 112; }
.flag__list{ margin-top:28px; border-top:1px solid var(--hair); }
.flag__list li{
  display:flex; gap:14px; align-items:flex-start;
  padding:13px 0; border-bottom:1px solid var(--hair);
  font-size:.9375rem; color:var(--ink-2);
}
.flag__list svg{ width:15px; height:15px; flex:none; margin-top:4px; color:var(--accent-lit); }
.flag__note{ margin-top:22px; padding-left:16px; border-left:1px solid var(--hair-2); }
.flag__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* ramka wideo — obudowa przyrządu */
.screen{ position:relative; }
.screen__frame{
  position:relative; border:1px solid var(--hair-2); background:#000;
  overflow:hidden; aspect-ratio:16/9;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.screen__frame video,.screen__frame img{ width:100%; height:100%; object-fit:cover; }
.screen__frame iframe{ width:100%; height:100%; border:0; display:block; }
/* nad odtwarzaczem YouTube nie nakladamy przyciemnienia */
.kurs .screen__frame::after{ display:none; }
.screen__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,11,.28),transparent 30%,transparent 72%,rgba(6,6,11,.55));
}
.screen__corner{ position:absolute; width:11px; height:11px; border:1px solid var(--accent); opacity:.85; }
.screen__corner.tl{ top:0; left:0; border-right:0; border-bottom:0; }
.screen__corner.tr{ top:0; right:0; border-left:0; border-bottom:0; }
.screen__corner.bl{ bottom:0; left:0; border-right:0; border-top:0; }
.screen__corner.br{ bottom:0; right:0; border-left:0; border-top:0; }
.screen__cap{ display:flex; justify-content:space-between; gap:16px; padding-top:12px; }

/* ============================================================
   10. KATALOG — dwa duże, reszta jako rejestr
   ============================================================ */
.tools{ padding-bottom:var(--step); }
.tools__two{
  display:grid; gap:1px; margin-top:clamp(36px,4.4vw,60px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--hair);
  border:1px solid var(--hair);
}
@media (max-width:860px){ .tools__two{ grid-template-columns:1fr; } }
.tool{
  position:relative; background:var(--plate);
  display:flex; flex-direction:column;
  transition:background-color .5s var(--ease);
}
.tool__shot{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-bottom:1px solid var(--hair); background:#000;
}
.tool__shot img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.1s var(--ease), opacity .6s var(--ease);
}
.tool:hover .tool__shot img{ transform:scale(1.06); }
.tool__shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(10,10,18,.9) 100%);
}
.tool__body{
  padding:clamp(24px,2.8vw,40px);
  display:flex; flex-direction:column; gap:14px; flex:1;
}
.tool::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-glow),transparent);
  opacity:0; transition:opacity .55s var(--ease);
}
.tool:hover{ background:#101019; }
.tool:hover::before{ opacity:.9; }
.tool__ic{ width:22px; height:22px; color:var(--accent-lit); }
@media (prefers-reduced-motion:reduce){ .tool__shot img,.tool:hover .tool__shot img{ transform:none; transition:none; } }
.tool__price{ margin-top:auto; padding-top:20px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.tool__price b{ font-size:1.5rem; font-weight:800; letter-spacing:-.035em; font-variation-settings:"wdth" 110; }
.tool__foot{ padding-top:16px; }

/* werdykty audytora — prawdziwy wynik produktu, rysowany kodem */
.verdicts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border:1px solid var(--hair-2); border-radius:2px;
  font-size:.75rem; font-weight:600; color:var(--ink-2); letter-spacing:-.005em;
  background:rgba(244,245,247,.03);
}
.chip svg{ width:13px; height:13px; }
.chip--up{ color:#7BE0B0; border-color:rgba(123,224,176,.3); }
.chip--warn{ color:#F2C55C; border-color:rgba(242,197,92,.3); }
.chip--stop{ color:#FF7A85; border-color:rgba(255,122,133,.3); }

/* cytat AI — co robi GEO */
.quotebox{
  margin-top:4px; padding:16px 18px; border:1px solid var(--hair);
  background:rgba(244,245,247,.025); font-size:.875rem; color:var(--ink-2);
  line-height:1.55;
}
.quotebox em{ font-style:normal; color:var(--ink); font-weight:600; background:linear-gradient(transparent 62%, rgba(213,28,130,.4) 62%); }
.quotebox .meta{ display:block; margin-bottom:8px; }

/* rejestr pozostałych narzędzi */
.reg{ margin-top:1px; border:1px solid var(--hair); border-top:0; }
.reg__row{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr) auto auto;
  gap:clamp(14px,2.4vw,32px); align-items:center;
  padding:20px clamp(18px,2.2vw,32px);
  border-top:1px solid var(--hair);
  background:var(--plate);
  transition:background-color .45s var(--ease);
}
.reg__row:hover{ background:#101019; }
.reg__row h3{ font-size:1.0625rem; }
.reg__row p{ font-size:.9063rem; color:var(--ink-3); }
.reg__price{ text-align:right; white-space:nowrap; }
.reg__price b{ font-size:1.0625rem; font-weight:700; letter-spacing:-.02em; }
.reg__price .meta{ margin-left:7px; }
.reg__ic{ width:19px; height:19px; color:var(--accent-lit); display:inline-block; vertical-align:-3px; margin-right:10px; }
.reg__go{ color:var(--ink-3); transition:color .35s var(--ease), transform .35s var(--ease); }
.reg__go svg{ width:16px; height:16px; }
.reg__row:hover .reg__go{ color:var(--accent-lit); transform:translateX(3px); }
@media (max-width:880px){
  .reg__row{ grid-template-columns:1fr auto; row-gap:8px; }
  .reg__row p{ grid-column:1 / -1; }
  .reg__price{ text-align:left; }
  .reg__go{ display:none; }
}

/* ============================================================
   11. OPINIE — cytaty na siatce, nie kafelki
   ============================================================ */
.proof{ padding-bottom:var(--step); }
.proof__grid{
  display:grid; grid-template-columns:1.55fr 1fr 1fr;
  margin-top:clamp(34px,4vw,52px); border-top:1px solid var(--hair-2);
}
@media (max-width:880px){ .proof__grid{ grid-template-columns:1fr; } }
.proof__item{
  margin:0; display:flex; flex-direction:column;
  padding:clamp(28px,3vw,44px) clamp(22px,2.4vw,38px) clamp(28px,3vw,44px) 0;
}
.proof__item + .proof__item{ border-left:1px solid var(--hair); padding-left:clamp(22px,2.4vw,38px); }
@media (max-width:880px){
  .proof__item{ padding-right:0; }
  .proof__item + .proof__item{ border-left:0; border-top:1px solid var(--hair); padding-left:0; }
}
.proof__item blockquote{
  margin:0; font-size:1.0625rem; line-height:1.46;
  letter-spacing:-.018em; color:var(--ink-2); font-weight:400; text-wrap:pretty;
}
.proof__item--lead blockquote{
  font-size:clamp(1.35rem,2.05vw,1.9rem); line-height:1.24;
  letter-spacing:-.032em; color:var(--ink); font-weight:600;
  font-variation-settings:"wdth" 104;
}
.proof__item cite{ margin-top:auto; padding-top:26px; font-style:normal; }
.proof__mark{ width:22px; height:auto; color:var(--accent); margin-bottom:20px; }

/* ============================================================
   12. JAK TO KUPUJESZ — arkusz danych
   ============================================================ */
.buy{ padding-bottom:var(--step); }
.buy__grid{ display:grid; gap:1px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:clamp(36px,4.4vw,56px); background:var(--hair); border:1px solid var(--hair); }
@media (max-width:760px){ .buy__grid{ grid-template-columns:1fr; } }
.buy__col{ background:var(--plate); padding:clamp(26px,3vw,40px); }
.buy__col h3{ margin-bottom:6px; }
.buy__col ul{ margin-top:20px; border-top:1px solid var(--hair); }
.buy__col li{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--hair); font-size:.9063rem; color:var(--ink-2); }
.buy__col li span:last-child{ color:var(--ink); white-space:nowrap; font-weight:600; }
.buy__facts{ display:grid; gap:1px; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--hair); border:1px solid var(--hair); border-top:0; }
@media (max-width:760px){ .buy__facts{ grid-template-columns:1fr; } }
.buy__fact{ background:var(--plate); padding:clamp(22px,2.4vw,32px); }
.buy__fact h4{ font-size:.9375rem; font-weight:700; letter-spacing:-.018em; margin-bottom:7px; }

/* ============================================================
   13. ZAMKNIĘCIE — pełnoekranowy znak marki
   ============================================================ */
.close{ position:relative; overflow:hidden; background:var(--bg-deep); }
.close__bg{
  position:absolute; top:0; left:0; width:100%;
  height:clamp(260px,40vw,520px); object-fit:cover; object-position:center center;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%);
}
.close__in{ position:relative; z-index:2; padding-block:clamp(288px,41vw,556px) clamp(64px,8vw,110px); text-align:center; }
.close h2{ margin-inline:auto; max-width:18ch; }
.close .lede{ margin:22px auto 0; max-width:52ch; }
.close__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px; }

/* ============================================================
   14. STOPKA
   ============================================================ */
.foot{ background:var(--plate); border-top:1px solid var(--hair); }
.foot__grid{
  display:grid; gap:clamp(28px,3vw,48px);
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  padding-block:clamp(48px,6vw,76px);
}
@media (max-width:880px){ .foot__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .foot__grid{ grid-template-columns:1fr; } }
.foot h4{ font-size:.75rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); font-variation-settings:"wdth" 88; margin-bottom:16px; }
.foot li + li{ margin-top:9px; }
.foot a{ font-size:.9063rem; color:var(--ink-2); transition:color .3s var(--ease); }
.foot a:hover{ color:var(--accent-lit); }
.foot__brand p{ margin-top:14px; font-size:.9063rem; color:var(--ink-3); max-width:34ch; }
.foot__social{ display:flex; gap:10px; margin-top:20px; }
.foot__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--hair-2); border-radius:2px; color:var(--ink-2);
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.foot__social a:hover{ border-color:var(--accent); color:var(--accent-lit); transform:translateY(-2px); }
.foot__social svg{ width:16px; height:16px; }
.foot__bar{ display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; padding-block:22px; border-top:1px solid var(--hair); }

/* ============================================================
   15. WSKAŹNIK PRZEWIJANIA — prawa krawędź okna
   ============================================================ */
.progress{ position:fixed; top:0; right:0; bottom:0; width:1px; background:var(--hair); z-index:39; pointer-events:none; }
.progress i{ position:absolute; top:0; left:0; width:100%; height:0; background:linear-gradient(180deg,var(--accent-glow),var(--violet)); }
@media (max-width:760px){ .progress{ display:none; } }

/* ============================================================
   16. RUCH — jeden autorski moment (rozruch) + spokojne wejścia
   ============================================================ */
.boot .hero h1 .line > span{ transform:translateY(105%); }
.boot .hero__lede,.boot .hero__cta,.boot .specs__in,.boot .nav__in{ opacity:0; }

.is-booting .hero h1 .line > span{
  transform:translateY(0);
  transition:transform 1.15s var(--ease);
}
.is-booting .hero h1 .line:nth-child(2) > span{ transition-delay:.09s; }
.is-booting .hero__lede{ opacity:1; transition:opacity .9s var(--ease) .32s; }
.is-booting .hero__cta{ opacity:1; transition:opacity .9s var(--ease) .44s; }
.is-booting .specs__in{ opacity:1; transition:opacity .9s var(--ease) .56s; }
.is-booting .nav__in{ opacity:1; transition:opacity .8s var(--ease) .16s; }

.reveal{ opacity:0; transform:translateY(18px); filter:blur(6px); }
.reveal.in{ opacity:1; transform:none; filter:none; transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }

@media (prefers-reduced-motion:reduce){
  .boot .hero h1 .line > span,
  .boot .hero__lede,.boot .hero__cta,.boot .specs__in,.boot .nav__in{ transform:none; opacity:1; }
  .reveal,.reveal.in{ opacity:1; transform:none; filter:none; transition:none; }
  .btn,.link,.tool,.reg__row{ transition:none; }
}

/* ============================================================
   17. NADPISANIA DLA MAŁYCH EKRANÓW
   Muszą stać na końcu arkusza: przy równej specyficzności
   wygrywa reguła późniejsza, a bazowe .hero__cta jest niżej
   w sekcji hero niż blok nawigacji.
   ============================================================ */
@media (max-width:560px){
  .nav__side .btn{ display:none; }
  .hero__cta,.close__cta,.flag__cta{ display:grid; grid-template-columns:1fr; }
  .hero__cta .btn,.flag__cta .btn,.close__cta .btn{ justify-content:center; }
  .head__rule,.prod__crumbs{ flex-direction:column; align-items:flex-start; gap:7px; }
}

/* ============================================================
   HARTOWANIE POD MOTYW (tylko wersja WordPress, nie ma tego w podglądzie).
   Astra ustawia rodzinę i kolor BEZPOŚREDNIO na h1..h6 oraz 15px w :root,
   więc nagłówki nie dziedziczyły Archivo z body, a cała skala rem kurczyła
   się o 6%. Prefiks html.mcat-d26 podnosi specyficzność ponad reguły motywu,
   niezależnie od kolejności wydruku arkuszy.
   Zmierzone na produkcji 23.08.2026: h1 dostawał "Noto Sans" i łamał się
   na trzy wiersze zamiast dwóch.
   ============================================================ */
html.mcat-d26{ font-size:16px; }
html.mcat-d26 h1, html.mcat-d26 h2, html.mcat-d26 h3,
html.mcat-d26 h4, html.mcat-d26 h5, html.mcat-d26 h6,
html.mcat-d26 button, html.mcat-d26 input, html.mcat-d26 select,
html.mcat-d26 textarea, html.mcat-d26 blockquote, html.mcat-d26 cite,
html.mcat-d26 figure, html.mcat-d26 dl{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
}
html.mcat-d26 h1, html.mcat-d26 h2, html.mcat-d26 h3, html.mcat-d26 h4{
  color:var(--ink);
}

/* Pasek administratora nie przesuwa elementow position:fixed — nawigacja
   chowala sie pod nim dla zalogowanych. Goscie tego nie widza. */
body.admin-bar .nav{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar .nav{ top:46px; } }

/* ============================================================
   18. WARSTWA WORDPRESSOWA — treść z edytora i strony produktu.
   Tego nie ma w podglądzie: dotyczy wyłącznie HTML-u, którego
   nie piszemy sami (the_content, WooCommerce).
   ============================================================ */

/* --- pas tytułowy podstrony: okno na jedwab, jak hero --- */
.pagehead{
  position:relative;
  padding-top:clamp(132px,18vh,220px);
  padding-bottom:clamp(40px,6vw,76px);
}
.pagehead::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(2,1,10,.62) 0%, rgba(2,1,10,.34) 38%, rgba(2,1,10,0) 76%),
    linear-gradient(180deg, rgba(2,1,10,.55) 0%, rgba(2,1,10,.10) 30%, rgba(2,1,10,.46) 72%, rgba(10,10,18,.98) 100%);
}
.pagehead .rail{ position:relative; z-index:1; }
.pagehead h1{ font-size:clamp(2.2rem,5vw,4.4rem); max-width:18ch; }
.pagehead .lede{ margin-top:clamp(16px,2vw,26px); max-width:52ch; }
.pagehead--slim{ padding-bottom:0; }
.pagehead--slim .pagehead__crumbs{ margin-bottom:0; border-bottom:0; }
.pagehead__crumbs{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding-bottom:14px; margin-bottom:clamp(28px,4vw,52px);
  border-bottom:1px solid var(--hair-2);
}
.pagehead__crumbs a{ color:var(--ink-3); transition:color .3s var(--ease); }
.pagehead__crumbs a:hover{ color:var(--accent-lit); }

/* --- treść z edytora: typografia systemu na cudzym HTML-u --- */
.entry{ padding-block:clamp(48px,7vw,104px); }
.entry .rail > *{ max-width:none; }
.entry__body{ max-width:74ch; }
.entry__body > * + *{ margin-top:1.15em; }
.entry__body h2{
  font-size:clamp(1.75rem,3vw,2.6rem); line-height:1.08; letter-spacing:-.035em;
  font-variation-settings:"wdth" 114; font-weight:800;
  margin-top:2.2em; margin-bottom:.55em; max-width:22ch; text-wrap:balance;
}
.entry__body h3{
  font-size:clamp(1.2rem,1.7vw,1.5rem); line-height:1.2; letter-spacing:-.026em;
  font-variation-settings:"wdth" 108; font-weight:700;
  margin-top:1.9em; margin-bottom:.4em;
}
.entry__body h4{ font-size:1.0625rem; font-weight:700; letter-spacing:-.018em; margin-top:1.6em; }
.entry__body p,.entry__body li{ color:var(--ink-2); line-height:1.66; text-wrap:pretty; }
.entry__body strong,.entry__body b{ color:var(--ink); font-weight:600; }
.entry__body a:not(.btn){
  color:var(--accent-lit); font-weight:500;
  background-image:linear-gradient(var(--accent-lit),var(--accent-lit));
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:1px;
  transition:background-size .4s var(--ease);
}
.entry__body a:not(.btn):hover{ background-size:0% 1px; }
.entry__body ul,.entry__body ol{ padding-left:0; }
.entry__body ul li{ position:relative; padding-left:1.6em; margin-top:.55em; }
.entry__body ul li::before{
  content:""; position:absolute; left:.15em; top:.72em;
  width:7px; height:1px; background:var(--accent);
}
.entry__body ol{ counter-reset:mc; }
.entry__body ol li{ position:relative; padding-left:2.1em; margin-top:.55em; counter-increment:mc; }
.entry__body ol li::before{
  content:counter(mc); position:absolute; left:0; top:0;
  font-size:.8125rem; font-weight:700; color:var(--accent-lit);
  font-variant-numeric:tabular-nums;
}
.entry__body img,.entry__body video,.entry__body iframe{
  border:1px solid var(--hair-2); border-radius:0; height:auto;
}
.entry__body figure{ margin:2em 0; }
.entry__body figcaption{ margin-top:10px; font-size:.8125rem; color:var(--ink-3); }
.entry__body blockquote{
  margin:2em 0; padding:clamp(20px,2.4vw,30px);
  border:1px solid var(--hair-2); background:rgba(244,245,247,.025);
  font-size:1.0625rem; color:var(--ink);
}
.entry__body blockquote p{ color:inherit; }
.entry__body hr{ border:0; border-top:1px solid var(--hair); margin:2.6em 0; }
.entry__body table{
  width:100%; border-collapse:collapse; font-size:.9375rem;
  font-variant-numeric:tabular-nums; display:block; overflow-x:auto;
}
.entry__body th,.entry__body td{
  padding:11px 14px; border-bottom:1px solid var(--hair); text-align:left; color:var(--ink-2);
}
.entry__body th{ color:var(--ink-3); font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase; font-variation-settings:"wdth" 86; }
.entry__body code,.entry__body kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.875em;
  background:rgba(244,245,247,.06); padding:.15em .4em; border-radius:2px;
}
.entry__body pre{
  background:var(--plate-2); border:1px solid var(--hair);
  padding:18px; overflow-x:auto; font-size:.875rem;
}
.entry__body .wp-block-button__link,.entry__body .btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.5em; background:var(--accent); color:#fff !important;
  border-radius:2px; font-weight:600; font-size:.9375rem; background-image:none;
  text-decoration:none;
}
.entry__body .wp-block-button__link:hover{ background:#E8248D; }

/* --- strona produktu na skorupie --- */
.wcprod{ padding-bottom:clamp(56px,8vw,110px); }
.wcprod__grid{
  display:grid; gap:clamp(32px,4vw,64px); align-items:start;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
}
@media (max-width:980px){ .wcprod__grid{ grid-template-columns:1fr; } }
@media (min-width:981px){ .wcprod__media{ position:sticky; top:104px; } }
.wcprod__media .woocommerce-product-gallery{ width:100% !important; float:none !important; margin:0 !important; }
.wcprod__media .woocommerce-product-gallery__image img{
  width:100%; height:auto; display:block;
  border:1px solid var(--hair-2);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.wcprod__media .flex-control-thumbs{ display:flex; gap:8px; margin:10px 0 0; padding:0; list-style:none; }
.wcprod__media .flex-control-thumbs li{ width:72px; }
.wcprod__media .flex-control-thumbs img{ width:100%; border:1px solid var(--hair); opacity:.6; cursor:pointer; }
.wcprod__media .flex-control-thumbs img.flex-active,
.wcprod__media .flex-control-thumbs img:hover{ opacity:1; border-color:var(--accent); }

/* WooCommerce/Astra trzyma na .summary `float:right; width:48%` — w komorce
   siatki dawalo to kolumne 291 px zamiast 606 px. */
.wcprod__sum{ float:none !important; width:100% !important; max-width:none !important; }

.wcprod__sum .product_title{
  /* 3rem lamalo dlugie nazwy produktow na szesc wierszy w kolumnie ~620 px */
  font-size:clamp(1.6rem,2.5vw,2.3rem) !important; line-height:1.06 !important;
  letter-spacing:-.032em; font-weight:800; font-variation-settings:"wdth" 112;
  color:var(--ink) !important; margin:0; text-wrap:balance;
}
.wcprod__sum .woocommerce-product-rating{ display:flex; align-items:center; gap:10px; margin:18px 0 0; }
.wcprod__sum .star-rating{ color:var(--accent-lit); }
.wcprod__sum .woocommerce-review-link{ font-size:.8125rem; color:var(--ink-3); }
.wcprod__sum .woocommerce-product-details__short-description{
  margin-top:22px; color:var(--ink-2); font-size:1.0625rem; line-height:1.62; max-width:56ch;
}
.wcprod__sum .price{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:28px 0 0; padding-top:26px; border-top:1px solid var(--hair-2);
  font-size:clamp(2rem,3.2vw,2.8rem) !important; font-weight:800; letter-spacing:-.04em;
  font-variation-settings:"wdth" 112; font-variant-numeric:tabular-nums lining-nums;
  color:var(--ink) !important;
}
.wcprod__sum .price del{ font-size:.42em; opacity:.5; font-weight:500; }
.wcprod__sum .price ins{ text-decoration:none; }
.wcprod__sum .price .woocommerce-Price-currencySymbol{ font-size:.62em; }
.wcprod__sum .subscription-details{
  font-size:.6875rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3); font-variation-settings:"wdth" 86;
}
.wcprod__sum form.cart{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:24px; }
.wcprod__sum form.cart.variations_form{ display:block; }
.wcprod__sum table.variations{ border:0; margin:0 0 16px; width:100%; }
.wcprod__sum table.variations th,.wcprod__sum table.variations td{ border:0; padding:.35rem 0; }
.wcprod__sum table.variations label{
  font-size:.6875rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3); font-variation-settings:"wdth" 86;
}
.wcprod__sum select{
  height:46px; padding:0 .9rem; min-width:240px; max-width:100%;
  background:rgba(244,245,247,.03); color:var(--ink);
  border:1px solid var(--hair-2); border-radius:2px; font:inherit;
}
.wcprod__sum .quantity input.qty{
  height:46px; width:78px; text-align:center;
  background:rgba(244,245,247,.03); color:var(--ink);
  border:1px solid var(--hair-2); border-radius:2px;
  font:inherit; font-weight:600; font-variant-numeric:tabular-nums;
}
.wcprod__sum .single_add_to_cart_button,
.wcprod__sum .woocommerce-variation-add-to-cart .button{
  height:46px; display:inline-flex !important; align-items:center; gap:.6em;
  padding:0 1.6em !important; background:var(--accent) !important; color:#fff !important;
  border:0 !important; border-radius:2px !important;
  font-size:.9375rem !important; font-weight:600 !important; text-transform:none !important;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.28) inset;
  transition:background-color .35s var(--ease), transform .35s var(--ease);
}
.wcprod__sum .single_add_to_cart_button:hover{ background:#E8248D !important; transform:translateY(-1px); }
.wcprod__sum .woocommerce-variation-price{ margin:12px 0; }
.wcprod__sum .product_meta{ margin-top:26px; padding-top:20px; border-top:1px solid var(--hair); font-size:.8125rem; color:var(--ink-3); }
.wcprod__sum .product_meta a{ color:var(--ink-2); }

/* zakładki jako sekcje, nie zakładki */
.wctabs{ border-top:1px solid var(--hair); }
.wctabs .woocommerce-tabs ul.tabs{ display:none !important; }
.wctabs .woocommerce-tabs .panel{ display:block !important; padding-top:clamp(44px,6vw,84px); }
.wctabs .woocommerce-tabs .panel h2:first-child{
  font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.1; letter-spacing:-.032em;
  font-variation-settings:"wdth" 112; font-weight:800; margin-bottom:1em;
}
.wctabs .woocommerce-Tabs-panel--additional_information table{ width:100%; border-collapse:collapse; }
.wctabs .woocommerce-Tabs-panel--additional_information th,
.wctabs .woocommerce-Tabs-panel--additional_information td{
  padding:12px 0; border-bottom:1px solid var(--hair); text-align:left; color:var(--ink-2); font-size:.9375rem;
}

/* opinie */
.wctabs #reviews .commentlist{
  display:grid; gap:1px; grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--hair); border:1px solid var(--hair); padding:0 !important; margin:0;
}
@media (max-width:760px){ .wctabs #reviews .commentlist{ grid-template-columns:1fr; } }
.wctabs #reviews .commentlist li{
  background:var(--plate); margin:0 !important; padding:clamp(22px,2.4vw,32px) !important;
  border:0 !important; list-style:none;
}
.wctabs #reviews .comment_container{ display:block; background:none; border:0; padding:0; }
.wctabs #reviews img.avatar{ display:none !important; }
.wctabs #reviews .comment-text{ margin:0 !important; padding:0 !important; border:0 !important; }
.wctabs #reviews .star-rating{ color:var(--accent-lit); }
.wctabs #reviews .description p{ color:var(--ink-2); line-height:1.55; font-size:.9688rem; }
.wctabs #reviews .woocommerce-review__author{ font-size:.6875rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3); font-variation-settings:"wdth" 86; }
.wctabs #reviews .woocommerce-review__published-date{ font-size:.75rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.wctabs #reviews .comment-reply-title{ display:block; margin-top:2.4em; font-size:1.0625rem; font-weight:700; }
.wctabs #reviews input[type=text],.wctabs #reviews input[type=email],.wctabs #reviews textarea{
  width:100%; max-width:46ch; background:rgba(244,245,247,.03); color:var(--ink);
  border:1px solid var(--hair-2); border-radius:2px; padding:11px 13px; font:inherit; margin-top:6px;
}
.wctabs #reviews .submit{
  display:inline-flex; padding:.9em 1.5em; background:var(--accent); color:#fff;
  border:0; border-radius:2px; font:inherit; font-weight:600; cursor:pointer; margin-top:14px;
}

/* --- lista produktów -----------------------------------------------------
   Astra NIE renderuje domyslnego HTML-u WooCommerce: zamiast
   a.woocommerce-LoopProduct-link daje .astra-shop-thumbnail-wrap
   + .astra-shop-summary-wrap i uklada je obok siebie, a liczbe kolumn
   trzyma w klasie .columns-N. Dlatego celujemy w strukture Astry.
   Te same reguly obowiazuja w produktach powiazanych na karcie produktu. --- */
.wcloop ul.products,
.wctabs ul.products{
  display:grid !important; gap:1px; margin:0; padding:0; list-style:none;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  background:var(--hair); border:1px solid var(--hair); float:none;
}
@media (max-width:1000px){
  .wcloop ul.products,.wctabs ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:620px){
  .wcloop ul.products,.wctabs ul.products{ grid-template-columns:1fr !important; }
}
.wcloop ul.products li.product,
.wctabs ul.products li.product{
  background:var(--plate); margin:0 !important; padding:0 !important;
  width:auto !important; max-width:none !important; float:none !important; clear:none !important;
  /* Astra ustawia na karcie flex-direction:row (uklad „obrazek obok tekstu"),
     wiec kierunek trzeba wymusic — inaczej zdjecie siedzi z boku. */
  display:flex !important; flex-direction:column !important;
  transition:background-color .45s var(--ease);
}
.wcloop ul.products li.product:hover,
.wctabs ul.products li.product:hover{ background:#101019; }

.wcloop .astra-shop-thumbnail-wrap,
.wctabs .astra-shop-thumbnail-wrap{
  margin:0 !important; padding:0 !important;
  flex:0 0 auto !important; width:100% !important; max-width:none !important; overflow:hidden;
}
.wcloop .astra-shop-thumbnail-wrap img,
.wctabs .astra-shop-thumbnail-wrap img{
  width:100% !important; height:auto; display:block; margin:0 !important;
  border-bottom:1px solid var(--hair);
  transition:transform 1.1s var(--ease);
}
.wcloop li.product:hover .astra-shop-thumbnail-wrap img,
.wctabs li.product:hover .astra-shop-thumbnail-wrap img{ transform:scale(1.03); }

.wcloop .astra-shop-summary-wrap,
.wctabs .astra-shop-summary-wrap{
  padding:clamp(20px,2.2vw,28px) !important; margin:0 !important;
  display:flex; flex-direction:column; gap:7px;
  flex:1 1 auto !important; width:100% !important; max-width:none !important;
}
.wcloop .woocommerce-loop-product__title,
.wctabs .woocommerce-loop-product__title{
  font-size:1.0625rem !important; font-weight:700; letter-spacing:-.022em;
  color:var(--ink) !important; padding:0 !important; margin:0 !important; line-height:1.28;
}
.wcloop li.product .star-rating,
.wctabs li.product .star-rating{ color:var(--accent-lit); font-size:.72em; margin:0 !important; }
.wcloop li.product .price,
.wctabs li.product .price{
  margin:auto 0 0 !important; padding-top:14px; display:block;
  font-size:1.25rem !important; font-weight:800; letter-spacing:-.03em;
  color:var(--ink) !important; font-variant-numeric:tabular-nums;
}
.wcloop li.product .price del,.wctabs li.product .price del{ font-size:.55em; opacity:.5; }
.wcloop li.product .price ins,.wctabs li.product .price ins{ text-decoration:none; }
.wcloop li.product .button,
.wctabs li.product .button{
  align-self:flex-start; margin:12px 0 0 !important; padding:0 !important;
  background:none !important; color:var(--accent-lit) !important; border:0 !important;
  font-size:.9375rem !important; font-weight:600 !important; text-transform:none !important;
  min-height:0 !important;
}
.wcloop li.product .button:hover,.wctabs li.product .button:hover{ color:#fff !important; }
.wcloop .woocommerce-result-count{ font-size:.8125rem; color:var(--ink-3); margin:0; }
.wcloop .woocommerce-ordering{ margin:0; }
.wcloop .woocommerce-ordering select{
  height:40px; padding:0 .8rem; background:rgba(244,245,247,.03); color:var(--ink);
  border:1px solid var(--hair-2); border-radius:2px; font:inherit; font-size:.875rem;
}
.wcloop__bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:18px; }
.wcloop .woocommerce-pagination ul{ display:flex; gap:6px; list-style:none; padding:0; margin:32px 0 0; border:0; }
.wcloop .woocommerce-pagination li{ border:0; margin:0; }
.wcloop .woocommerce-pagination a,.wcloop .woocommerce-pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px;
  border:1px solid var(--hair-2); border-radius:2px; color:var(--ink-2); font-size:.875rem;
}
.wcloop .woocommerce-pagination .current{ border-color:var(--accent); color:var(--ink); }

/* --- opis produktu: ta sama typografia co tresc z edytora --- */
.wctabs .woocommerce-Tabs-panel--description{ max-width:76ch; }
.wctabs .woocommerce-Tabs-panel p,
.wctabs .woocommerce-Tabs-panel li{ color:var(--ink-2); line-height:1.66; }
.wctabs .woocommerce-Tabs-panel strong,
.wctabs .woocommerce-Tabs-panel b{ color:var(--ink); font-weight:600; }
.wctabs .woocommerce-Tabs-panel h3{
  font-size:clamp(1.2rem,1.7vw,1.5rem); line-height:1.2; letter-spacing:-.026em;
  font-variation-settings:"wdth" 108; font-weight:700; margin-top:1.9em; margin-bottom:.4em;
}
.wctabs .woocommerce-Tabs-panel ul{ padding-left:0; list-style:none; }
.wctabs .woocommerce-Tabs-panel ul li{ position:relative; padding-left:1.6em; margin-top:.55em; }
.wctabs .woocommerce-Tabs-panel ul li::before{
  content:""; position:absolute; left:.15em; top:.72em; width:7px; height:1px; background:var(--accent);
}
.wctabs .woocommerce-Tabs-panel a{ color:var(--accent-lit); }

/* komunikaty WooCommerce */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error{
  background:rgba(244,245,247,.04); border:1px solid var(--hair-2); border-left:2px solid var(--accent);
  color:var(--ink-2); padding:14px 18px; margin:0 0 22px; list-style:none; font-size:.9375rem;
}
.woocommerce-notices-wrapper a{ color:var(--accent-lit); }


/* ============================================================
   19. ŚCIEŻKA ZAKUPOWA — koszyk, zamówienie, moje konto.
   Warstwa celowo zachowawcza: nie przestawiamy układu WooCommerce,
   dbamy o czytelność pól i kontrast. Tu błąd kosztuje sprzedaż,
   więc żadnych efektów, żadnego chowania elementów.
   ============================================================ */
.wcform{ padding-block:clamp(40px,6vw,84px) clamp(56px,8vw,110px); }
.wcform .rail{ position:relative; z-index:1; }

/* --- pola formularzy: jeden wygląd wszędzie --- */
.wcform input[type=text],.wcform input[type=email],.wcform input[type=tel],
.wcform input[type=password],.wcform input[type=number],.wcform input[type=search],
.wcform textarea,.wcform select,
.wcform .select2-container .select2-selection--single{
  width:100%; min-height:46px; padding:11px 13px;
  background:rgba(244,245,247,.05); color:var(--ink);
  border:1px solid var(--hair-2); border-radius:2px;
  font:inherit; font-size:1rem; line-height:1.4;
}
.wcform textarea{ min-height:110px; }
/* Pole "Uwagi do zamowienia" dostawalo z motywu biale tlo przy jasnym tekscie,
   czyli wpisywany tekst byl niewidoczny. Wymuszamy jawnie. */
.wcform textarea,
.wcform textarea#order_comments{
  background:rgba(244,245,247,.05) !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  border:1px solid var(--hair-2) !important;
}
.wcform input::placeholder,.wcform textarea::placeholder{ color:var(--ink-3); opacity:1; }
.wcform input:focus,.wcform textarea:focus,.wcform select:focus{
  outline:2px solid var(--accent-lit); outline-offset:2px; border-color:transparent;
}
.wcform label{ display:block; margin-bottom:6px; font-size:.875rem; color:var(--ink-2); }
.wcform .required{ color:var(--accent-lit); text-decoration:none; }
.wcform .form-row{ margin:0 0 16px; padding:0; }
.wcform .form-row-first,.wcform .form-row-last{ width:100%; float:none; }
@media (min-width:760px){
  .wcform .form-row-first,.wcform .form-row-last{ width:calc(50% - 8px); display:inline-block; vertical-align:top; }
  .wcform .form-row-first{ margin-right:16px; }
}
/* select2 (kraj, województwo) — bez tego wygląda jak zepsute pole */
.wcform .select2-container--default .select2-selection--single{ height:auto; }
.wcform .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ink); line-height:1.4; padding:0;
}
.wcform .select2-container--default .select2-selection--single .select2-selection__arrow{ height:44px; }
.select2-dropdown{ background:var(--plate-2); border:1px solid var(--hair-2); color:var(--ink); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--accent); color:#fff; }
.select2-search--dropdown .select2-search__field{
  background:rgba(244,245,247,.05); color:var(--ink); border:1px solid var(--hair-2); padding:8px 10px;
}

/* --- przyciski --- */
.wcform .button,.wcform button[type=submit],.wcform input[type=submit]{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:46px; padding:0 1.5em;
  background:rgba(244,245,247,.05); color:var(--ink) !important;
  border:1px solid var(--hair-2); border-radius:2px;
  font:inherit; font-size:.9375rem; font-weight:600; text-transform:none;
  cursor:pointer; transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.wcform .button:hover{ background:rgba(244,245,247,.1); border-color:rgba(244,245,247,.34); }
.wcform .checkout-button,.wcform #place_order,
.wcform .woocommerce-form-login .button,.wcform .woocommerce-form-register .button{
  background:var(--accent) !important; color:#fff !important; border-color:transparent !important;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.28) inset;
}
.wcform .checkout-button:hover,.wcform #place_order:hover{ background:#E8248D !important; }
.wcform #place_order{ width:100%; font-size:1rem; min-height:52px; }

/* --- tabele koszyka i podsumowania --- */
.wcform table.shop_table{
  width:100%; border-collapse:collapse; border:1px solid var(--hair); border-radius:0;
  margin:0 0 28px; font-size:.9375rem;
}
.wcform table.shop_table th,.wcform table.shop_table td{
  padding:14px 16px; border-bottom:1px solid var(--hair); text-align:left;
  color:var(--ink-2); vertical-align:middle;
}
.wcform table.shop_table th{
  font-size:.6875rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); font-variation-settings:"wdth" 86;
}
.wcform table.shop_table .amount,.wcform table.shop_table .product-name a{ color:var(--ink); font-weight:600; }
.wcform table.shop_table .amount{ font-variant-numeric:tabular-nums; }
.wcform table.shop_table img{ width:56px; height:auto; border:1px solid var(--hair); }
.wcform .product-remove a.remove{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border:1px solid var(--hair-2); border-radius:2px;
  color:var(--ink-3) !important; font-size:16px; line-height:1; text-decoration:none;
}
.wcform .product-remove a.remove:hover{ color:#fff !important; background:var(--accent); border-color:transparent; }
.wcform .quantity input.qty{ width:74px; min-height:42px; text-align:center; font-variant-numeric:tabular-nums; }
.wcform .cart_totals table.shop_table tr:last-child td,
.wcform .cart_totals table.shop_table tr.order-total td{ color:var(--ink); font-size:1.125rem; font-weight:800; }
.wcform .cart_totals h2,.wcform #order_review_heading,
.wcform .woocommerce-billing-fields h3,.wcform .woocommerce-additional-fields h3,
.wcform .woocommerce-column__title{
  font-size:clamp(1.15rem,1.7vw,1.4rem); font-weight:800; letter-spacing:-.026em;
  font-variation-settings:"wdth" 110; color:var(--ink); margin:0 0 18px;
}
.wcform .coupon{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.wcform .coupon input[type=text]{ width:auto; min-width:200px; flex:0 1 240px; }
.wcform .actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:16px 0; }

/* WooCommerce trzyma kontenery ukladu na floatach z procentowa szerokoscia
   (#customer_details 48%, #order_review 48%, .cart_totals 48%). W komorce
   CSS Grid dawalo to kolumny 370 i 220 px zamiast 673 i 551. Neutralizujemy
   raz, dla wszystkich — dokladnie ten sam problem co z .summary na produkcie. */
.wcform #customer_details,
.wcform #order_review,
.wcform .woocommerce-billing-fields,
.wcform .woocommerce-additional-fields,
.wcform .woocommerce-shipping-fields,
.wcform .cart_totals,
.wcform .col2-set .col-1,
.wcform .col2-set .col-2{
  float:none !important; width:100% !important; max-width:none !important;
}
/* UWAGA: koszyka NIE prostujemy. Astra uklada go wlasnym flexem
   (.ast-cart-non-sticky 68% + .cart-collaterals 32%) i wymuszenie tam
   szerokosci 100% zawijalo podsumowanie pod tabele. .cart_totals wyzej
   dotyczy wnetrza .cart-collaterals, nie samego kontenera. */

/* --- układ strony zamówienia --- */
@media (min-width:1000px){
  .wcform form.checkout{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,4vw,64px); align-items:start; }
  .wcform form.checkout #customer_details{ grid-column:1; }
  .wcform form.checkout #order_review_heading{ grid-column:2; grid-row:1; margin-top:0; }
  .wcform form.checkout #order_review{ grid-column:2; grid-row:2; position:sticky; top:104px; }
  .wcform form.checkout .col2-set .col-1,.wcform form.checkout .col2-set .col-2{ width:100%; float:none; }
}
.wcform #payment{ background:rgba(244,245,247,.03); border:1px solid var(--hair); padding:20px; border-radius:0; }
.wcform #payment ul.payment_methods{ list-style:none; margin:0; padding:0 0 14px; border-bottom:1px solid var(--hair); }
.wcform #payment ul.payment_methods li{ margin:0 0 10px; padding:0; }
.wcform #payment ul.payment_methods label{ display:inline; margin:0 0 0 8px; color:var(--ink); font-size:.9375rem; }
.wcform #payment .payment_box{
  background:rgba(244,245,247,.04); border:1px solid var(--hair); color:var(--ink-2);
  padding:12px 14px; margin:10px 0 0; font-size:.875rem; border-radius:0;
}
.wcform #payment .payment_box::before{ display:none; }
.wcform .woocommerce-terms-and-conditions-wrapper{ margin:16px 0; font-size:.875rem; color:var(--ink-2); }
.wcform .woocommerce-form__label-for-checkbox{ display:flex; gap:10px; align-items:flex-start; }
.wcform .woocommerce-form__label-for-checkbox input{ width:auto; min-height:0; margin-top:3px; }

/* --- przełącznik „kupuję jako firma" ---
   To <button>, nie checkbox — patrz komentarz w ui.js. Astra robi z etykietami
   pol cztery rzeczy naraz (display:block, position:absolute, opacity:0,
   pointer-events:none), a na .form-row klade warstwe dekoracyjna, ktora
   przechwytywala klikniecia. Dlatego tyle !important w tym jednym miejscu. */
.wcform .mcat-firma-row{
  margin:0 0 18px !important;
  flex:0 0 100% !important; width:100% !important;
  display:block !important; height:auto !important; min-height:0 !important;
}
.wcform .mcat-firma-row::before,
.wcform .mcat-firma-row::after{ content:none !important; display:none !important; }

.wcform .mcat-firma-toggle{
  display:flex !important; align-items:flex-start; gap:12px;
  width:100% !important; min-height:0 !important; padding:14px 16px !important;
  border:1px solid var(--hair-2) !important; border-radius:2px !important;
  background:rgba(244,245,247,.03) !important; color:var(--ink) !important;
  font:inherit; font-size:.9375rem !important; font-weight:500 !important;
  text-align:left; text-transform:none !important; cursor:pointer;
  position:relative; z-index:3; pointer-events:auto !important;
  opacity:1 !important; visibility:visible !important; box-shadow:none !important;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.wcform .mcat-firma-toggle:hover{
  border-color:rgba(244,245,247,.34) !important; background:rgba(244,245,247,.06) !important;
}
.wcform .mcat-firma-toggle:focus-visible{ outline:2px solid var(--accent-lit); outline-offset:2px; }
.wcform .mcat-firma-box{
  flex:0 0 auto; width:18px; height:18px; margin-top:1px;
  border:1px solid var(--hair-2); border-radius:2px;
  background:transparent; position:relative;
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.wcform .mcat-firma-box::after{
  content:""; position:absolute; left:5px; top:1px;
  width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transform-origin:center;
  transition:transform .2s var(--ease);
}
.wcform .mcat-firma-toggle[aria-pressed="true"]{ border-color:var(--accent) !important; }
.wcform .mcat-firma-toggle[aria-pressed="true"] .mcat-firma-box{
  background:var(--accent); border-color:var(--accent);
}
.wcform .mcat-firma-toggle[aria-pressed="true"] .mcat-firma-box::after{ transform:rotate(45deg) scale(1); }
.wcform .mcat-firma-txt small{ display:block; color:var(--ink-3); font-size:.8125rem; margin-top:2px; }

/* --- moje konto --- */
.wcform .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; border:1px solid var(--hair); }
.wcform .woocommerce-MyAccount-navigation li{ margin:0; border-bottom:1px solid var(--hair); }
.wcform .woocommerce-MyAccount-navigation li:last-child{ border-bottom:0; }
.wcform .woocommerce-MyAccount-navigation li a{
  display:block; padding:13px 16px; color:var(--ink-2); font-size:.9375rem;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.wcform .woocommerce-MyAccount-navigation li a:hover{ background:rgba(244,245,247,.05); color:var(--ink); }
.wcform .woocommerce-MyAccount-navigation li.is-active a{ background:rgba(213,28,130,.14); color:var(--ink); }
@media (min-width:900px){
  .wcform .woocommerce-MyAccount-navigation{ width:26%; float:left; }
  .wcform .woocommerce-MyAccount-content{ width:70%; float:right; }
}
.wcform .woocommerce-MyAccount-content{ color:var(--ink-2); }
.wcform .woocommerce-MyAccount-content a:not(.button){ color:var(--accent-lit); }
.wcform .u-columns{ display:grid; gap:clamp(24px,3vw,44px); grid-template-columns:1fr; }
@media (min-width:860px){ .wcform .u-columns{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.wcform .u-column1,.wcform .u-column2{ width:100% !important; float:none !important; }
.wcform form.login,.wcform form.register{
  border:1px solid var(--hair); border-radius:0; padding:clamp(22px,2.6vw,32px); margin:0;
}

/* --- komunikaty --- */
.wcform .woocommerce-message,.wcform .woocommerce-info,.wcform .woocommerce-error,
.wcform .woocommerce-notice{
  background:rgba(244,245,247,.04); border:1px solid var(--hair-2); border-left:2px solid var(--accent);
  color:var(--ink-2); padding:14px 18px; margin:0 0 22px; list-style:none; font-size:.9375rem;
  border-radius:0;
}
.wcform .woocommerce-error{ border-left-color:#FF7A85; }
.wcform .woocommerce-message::before,.wcform .woocommerce-info::before,
.wcform .woocommerce-error::before{ display:none; }
.wcform .woocommerce-message a,.wcform .woocommerce-info a{ color:var(--accent-lit); }

/* ============================================================
   19. LANDING WE WPISIE (.lp)
   Wpis, ktorego trescia jest strona sprzedazowa, a nie artykul.
   Szablon single-2026.php rozpoznaje wrapper .lp: pomija pas
   tytulowy i kolumne czytelnicza .entry__body (74ch), i oddaje
   tresci cala szerokosc — landing sam rysuje wlasne sekcje.
   Komponenty mowia tym samym jezykiem, co strona glowna:
   szyna .rail, wlosowe linie .rules, naglowek sekcji .head.
   ============================================================ */
.lp{ display:block; }
.lp > section{ position:relative; }
/* rytm pionowy sekcji: .head daje gore, to daje dol */
.lp > section.plate{ padding-bottom:var(--step); }
.lp .head h2{ margin-top:clamp(26px,3vw,42px); }

/* --- pasek nad H1: kim jest ten produkt --- */
.lp__eyebrow{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding-bottom:14px; margin-bottom:clamp(26px,3.4vw,42px);
  border-bottom:1px solid var(--hair-2);
}
/* Ta sama zasada co dla .head__rule: na waskim ekranie dwie etykiety
   obok siebie lamia sie kazda na dwa wiersze — czytelniej jedna pod druga. */
@media (max-width:560px){ .lp__eyebrow{ flex-direction:column; align-items:flex-start; gap:7px; } }

/* --- akapit wiodacy sekcji, szerszy niz .lede --- */
.lp__lede{
  font-size:clamp(1.02rem,.98rem + .36vw,1.19rem);
  line-height:1.56; color:var(--ink-2); max-width:64ch; text-wrap:pretty;
  margin-top:18px;
}
.lp__note{
  margin-top:22px; padding-left:16px; border-left:1px solid var(--hair-2);
  font-size:.9063rem; color:var(--ink-3); max-width:74ch; line-height:1.6;
}
.lp__center{ margin-inline:auto; text-align:center; }
.lp__center .lp__lede,.lp__center .body{ margin-inline:auto; }
.lp__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,3.2vw,40px); }
.lp__cta--center{ justify-content:center; }

/* --- REJESTR: obszary dzialania jako wiersze, nie kafelki --- */
.lp__reg{ margin-top:clamp(34px,4vw,54px); border:1px solid var(--hair); }
.lp__reg .lp__row{
  display:grid; grid-template-columns:auto minmax(0,.8fr) minmax(0,2.1fr);
  gap:clamp(14px,2.2vw,30px); align-items:baseline;
  padding:20px clamp(18px,2.2vw,32px);
  background:var(--plate); transition:background-color .45s var(--ease);
}
.lp__reg .lp__row + .lp__row{ border-top:1px solid var(--hair); }
.lp__reg .lp__row:hover{ background:#101019; }
.lp__row svg{ width:19px; height:19px; color:var(--accent-lit); flex:none; transform:translateY(3px); }
.lp__row h3{ font-size:1.0625rem; }
.lp__row p{ font-size:.9375rem; color:var(--ink-3); line-height:1.55; }
@media (max-width:860px){
  .lp__reg .lp__row{ grid-template-columns:auto minmax(0,1fr); row-gap:6px; }
  /* Celujemy w „wszystko poza ikona i naglowkiem", a nie w sam <p>.
     Zmierzone na produkcji 23.08.2026: wiersz „ChatGPT" ma w trzeciej
     kolumnie <div> z dwoma akapitami, wiec regula na <p> go nie lapala —
     <div> spadal do pierwszej kolumny, ta rosla do 298 px, druga do zera
     i strona dostawala 39 px przewijania w poziomie. */
  .lp__row > :not(svg):not(h3){ grid-column:2 / -1; }
}

/* --- MATRYCA: pelen zakres jako siatka przyrzadu --- */
/* Siatka rysowana obrysami komorek, nie tlem z odstepem 1 px.
   Powod jest konkretny: pozycji jest 17, wiec ostatni wiersz nie
   dopelnia sie do trzech — przy tle w odstepach zostawala jasna dziura
   po pustej komorce. Na obrysach lista po prostu sie konczy. */
.lp__matrix{
  display:grid; margin-top:clamp(34px,4vw,54px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--hair); border-left:1px solid var(--hair);
}
@media (max-width:900px){ .lp__matrix{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.lp__matrix--two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:560px){ .lp__matrix--two{ grid-template-columns:1fr; } }
@media (max-width:560px){ .lp__matrix{ grid-template-columns:1fr; } }
.lp__cell{
  background:var(--plate); padding:clamp(20px,2.2vw,28px);
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
  transition:background-color .45s var(--ease);
}
.lp__cell:hover{ background:#101019; }
.lp__cell svg{ width:20px; height:20px; color:var(--accent-lit); margin-bottom:14px; }
.lp__cell h3{ font-size:.9688rem; font-weight:700; letter-spacing:-.018em; font-variation-settings:"wdth" 106; }
.lp__cell p{ margin-top:7px; font-size:.875rem; line-height:1.55; color:var(--ink-3); }

/* --- ROZMOWA: transkrypcja wyrownana do szyny, bez dymkow --- */
.lp__talk{ margin-top:clamp(30px,3.6vw,48px); border-top:1px solid var(--hair-2); }
.lp__turn{
  position:relative;
  display:grid; grid-template-columns:132px minmax(0,1fr);
  gap:clamp(16px,2.4vw,32px); align-items:baseline;
  padding:18px 0 18px 18px; border-bottom:1px solid var(--hair);
}
.lp__turn p{ color:var(--ink-2); font-size:.9688rem; line-height:1.6; max-width:74ch; }
/* Odpowiedz AI znaczy magentowa szyna, ale wciecie maja oba glosy —
   inaczej etykiety „Ty" i „Mcat-MCP" stalyby w dwoch roznych kolumnach. */
.lp__turn--ai::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:1px; background:var(--accent);
}
.lp__turn--ai p{ color:var(--ink); }
.lp__turn--ai .meta{ color:var(--accent-lit); }
@media (max-width:680px){
  .lp__turn{ grid-template-columns:1fr; gap:7px; padding-left:14px; }
}

/* --- KROKI: trzy kolumny na wlosowych liniach --- */
.lp__steps{
  display:grid; gap:1px; margin-top:clamp(34px,4vw,54px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--hair); border:1px solid var(--hair);
}
@media (max-width:760px){ .lp__steps{ grid-template-columns:1fr; } }
.lp__step{ background:var(--plate); padding:clamp(24px,2.8vw,36px); }
.lp__step h3{ margin-top:16px; font-size:1.0625rem; }
.lp__step p{ margin-top:10px; font-size:.9375rem; color:var(--ink-3); line-height:1.58; }

/* --- RAMKA WIDEO: obudowa przyrzadu, jak .screen__frame --- */
.lp__screen{ position:relative; margin-top:clamp(30px,3.6vw,48px); }
.lp__frame{
  position:relative; border:1px solid var(--hair-2); background:#000;
  overflow:hidden; aspect-ratio:16/9;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.lp__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.lp__frame .screen__corner{ z-index:2; }
.lp__cap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 20px; padding-top:12px; }

/* --- CENNIK: dwa pakiety + arkusz zawartosci --- */
.lp__plans{
  display:grid; gap:1px; margin-top:clamp(34px,4vw,54px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--hair); border:1px solid var(--hair);
}
@media (max-width:760px){ .lp__plans{ grid-template-columns:1fr; } }
.lp__plan{ background:var(--plate); padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; }
.lp__plan--pick{ background:#101019; }
.lp__plan__top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.lp__plan b.lp__amount{
  display:block; margin:18px 0 4px;
  font-size:clamp(2.1rem,3.4vw,2.9rem); font-weight:800; letter-spacing:-.04em;
  font-variation-settings:"wdth" 112;
}
.lp__plan p{ font-size:.9375rem; color:var(--ink-3); line-height:1.58; }
.lp__plan .btn{ margin-top:auto; align-self:flex-start; }
.lp__plan__body{ margin-top:16px; margin-bottom:26px; }
.lp__pack{ margin-top:1px; border:1px solid var(--hair); border-top:0; background:var(--plate); padding:clamp(26px,3vw,40px); }
.lp__pack ul{ margin-top:20px; border-top:1px solid var(--hair); }
.lp__pack li{
  display:flex; gap:14px; align-items:flex-start;
  padding:13px 0; border-bottom:1px solid var(--hair);
  font-size:.9375rem; color:var(--ink-2);
}
.lp__pack li svg{ width:15px; height:15px; flex:none; margin-top:4px; color:var(--accent-lit); }

/* --- FAQ: pytania jako wiersze danych --- */
.lp__faq{
  display:grid; gap:1px; margin-top:clamp(34px,4vw,54px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--hair); border:1px solid var(--hair);
}
@media (max-width:820px){ .lp__faq{ grid-template-columns:1fr; } }
.lp__qa{ background:var(--plate); padding:clamp(22px,2.4vw,32px); }
.lp__qa h3{ font-size:1rem; font-variation-settings:"wdth" 106; }
.lp__qa p{ margin-top:10px; font-size:.9063rem; line-height:1.62; color:var(--ink-3); }

/* --- ZNACZNIKI: cechy bezpieczenstwa jako chipy systemu --- */
.lp__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(26px,3vw,34px); }
.lp__tags--center{ justify-content:center; }

/* --- ZAMKNIECIE: okno na jedwab przed stopka --- */
.lp__end{ background:var(--bg-deep); }
.lp__end .rail{ padding-block:clamp(72px,9vw,124px); text-align:center; }
.lp__end h2{ margin-inline:auto; max-width:20ch; }
.lp__end .lp__lede{ margin-inline:auto; text-align:center; }

/* --- wpis jako artykul: nawigacja i komentarze --- */
.entry__nav{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  margin-top:clamp(48px,6vw,80px); background:var(--hair); border:1px solid var(--hair);
}
@media (max-width:640px){ .entry__nav{ grid-template-columns:1fr; } }
.entry__nav a{
  display:block; background:var(--plate); padding:clamp(20px,2.4vw,30px);
  transition:background-color .45s var(--ease);
}
.entry__nav a:hover{ background:#101019; }
.entry__nav strong{
  display:block; margin-top:9px; font-size:1rem; font-weight:700;
  letter-spacing:-.022em; color:var(--ink); line-height:1.28;
}
.entry__nav--next{ text-align:right; }
.entry__comments{ margin-top:clamp(48px,6vw,80px); padding-top:clamp(28px,3.4vw,44px); border-top:1px solid var(--hair-2); }
.entry__comments .comment-list{ padding-left:0; }
.entry__comments .comment-list li{ padding-left:0; }
.entry__comments .comment-list li::before{ display:none; }
.entry__comments input[type=text],.entry__comments input[type=email],
.entry__comments input[type=url],.entry__comments textarea{
  width:100%; background:rgba(244,245,247,.04); color:var(--ink);
  border:1px solid var(--hair-2); border-radius:2px; padding:12px 14px;
  font-family:inherit; font-size:.9375rem;
}
.entry__comments input:focus,.entry__comments textarea:focus{ border-color:var(--accent); outline:none; }
.entry__comments .submit{
  padding:.95em 1.5em; background:var(--accent); color:#fff;
  border:0; border-radius:2px; font-family:inherit; font-weight:600; font-size:.9375rem; cursor:pointer;
}

/* Tytul tylko dla czytnikow ekranu — patrz mcat_d26_tresc_ma_h1(). */
.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}