/* ============================================================
   TWÓJ PRĄD+ — Sklep EMS · main.css (v2, styl Apple-like)
   Jasna baza (biel + #f5f5f7), wielka typografia-hasła, ogromne
   oddechy, zaokrąglenia XL, akcent zielony używany oszczędnie.
   Wzorce: apple.com (strony MacBook Air i Mac). Fonty systemowe,
   zero CDN (CSP-safe). Kontrakt klas i selektorów bez zmian.
   ============================================================ */

/* ---------- TOKENY ---------- */
:root{
  /* Jasna baza */
  --c-bg:#ffffff;
  --c-bg-alt:#f5f5f7;          /* szarość sekcji alternatywnych */
  --c-bg-deep:#e8e8ed;         /* głębsza szarość (separatory scen) */
  --c-surface-dark:#0c1512;    /* ciemna scena/karta (rzadko, 1 sekcja) */
  --c-surface-raised:#182a22;

  /* Panele treści */
  --c-panel:#ffffff;
  --c-panel-alt:#f5f5f7;
  --c-panel-2:#e8e8ed;

  /* Tekst */
  --c-text:#1d1d1f;            /* czerń Apple */
  --c-muted:#6e6e73;
  --c-faint:#86868b;
  --c-on-dark:#f5f5f7;
  --c-on-dark-muted:rgba(245,245,247,.72);
  --c-on-dark-faint:rgba(245,245,247,.48);

  /* Linie */
  --c-border:#d2d2d7;
  --c-border-strong:#b8b8bf;
  --c-line-dark:rgba(255,255,255,.12);
  --c-line-dark-2:rgba(255,255,255,.20);
  --c-line-accent:rgba(20,106,52,.35);

  /* Akcent marki — zieleń energii (oszczędnie, jak akcent akcji u Apple) */
  --c-accent:#157a42;          /* główny kolor akcji na jasnym (AA) */
  --c-accent-hover:#1b944f;
  --c-accent-press:#0f5c31;
  --c-accent-ink:#ffffff;      /* tekst na akcencie */
  --c-accent-2:#26e0c9;        /* turkus — tylko ilustracje */
  --c-accent-3:#a3f04b;        /* limonka — chipy/badge na ciemnym, detale */
  --c-link:#157a42;
  --c-link-hover:#0f5c31;

  /* Sygnały */
  --c-error:#cc2f34;   --c-error-bg:#fdeef0;  --c-error-line:#f3b9bd;
  --c-ok:#157a42;      --c-ok-bg:#e9faf0;     --c-ok-line:#b6e6c8;
  --c-warn:#9a6a00;    --c-warn-bg:#fdf5e5;   --c-warn-line:#f0d79a;
  --c-info:#1f6fd6;    --c-info-bg:#ebf3fe;   --c-info-line:#bcd8f7;

  /* Cienie — ledwo widoczne */
  --sh-sm:0 2px 10px rgba(0,0,0,.06);
  --sh-card:0 10px 34px rgba(0,0,0,.08);
  --sh-card-dark:0 24px 70px rgba(0,0,0,.50);
  --sh-cta:0 6px 22px rgba(20,106,52,.25);
  --glow-lime:0 0 70px rgba(163,240,75,.22);

  /* Typografia systemowa (SF Pro na Apple, spójny fallback wszędzie) */
  --font-display:-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-text:-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --fs-display:70px;  --fs-h1:48px;  --fs-h2:40px;  --fs-h3:24px;
  --fs-lead:21px;     --fs-body:17px; --fs-small:14px; --fs-eyebrow:14px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;

  --radius-xs:8px; --radius-sm:12px; --radius-md:18px; --radius-lg:24px;
  --radius-xl:30px; --radius-pill:999px;

  --ease:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms; --dur-base:220ms;

  --container:1100px;
  --gutter:24px;
}

/* ---------- RESET / BASE ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--c-link); text-decoration:none; transition:color var(--dur-fast) var(--ease); }
a:hover{ color:var(--c-link-hover); text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.015em;
  line-height:1.07; margin:0; color:inherit; }
p{ margin:0; text-wrap:pretty; }
::selection{ background:rgba(21,122,66,.18); }
[hidden]{ display:none !important; }

:focus-visible{ outline:3px solid var(--c-accent); outline-offset:2px; border-radius:6px; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.eyebrow{ font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.01em;
  color:var(--c-accent); text-transform:none; }
.mono{ font-family:var(--font-mono); }
.lead{ font-size:var(--fs-lead); line-height:1.45; color:var(--c-muted); font-weight:400; }
.flow-line{ height:1px; background:var(--c-border); border:0; margin:var(--space-6) 0; }

/* ============================================================
   HEADER — jasny frosted (jak globalna nawigacja Apple)
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
  color:var(--c-text);
}
.site-header .container{ display:flex; align-items:center; gap:var(--space-6);
  min-height:52px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px; }
.logo{ display:inline-flex; align-items:baseline; gap:10px; color:var(--c-text);
  font-family:var(--font-display); font-weight:700; font-size:18px; white-space:nowrap; }
.logo:hover{ color:var(--c-text); text-decoration:none; }
.logo .plus{ color:var(--c-accent); }
.logo .logo-sub{ font-weight:500; font-size:12px; color:var(--c-muted); letter-spacing:.05em;
  text-transform:uppercase; border-left:1px solid var(--c-border); padding-left:10px; }
.site-nav{ margin-left:auto; display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.site-nav a{ color:#424245; font-weight:400; font-size:14px; padding:8px 14px;
  border-radius:var(--radius-pill); }
.site-nav a:hover{ color:var(--c-text); text-decoration:none; background:rgba(0,0,0,.05); }
.site-nav a.active{ color:var(--c-text); font-weight:600; }
.nav-chip{ display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--c-border); border-radius:var(--radius-pill); padding:7px 14px !important; }
.nav-chip .count{ min-width:19px; height:19px; border-radius:999px; background:var(--c-accent);
  color:#fff; font-size:11px; font-weight:700; display:inline-grid; place-items:center; padding:0 5px; }

/* ============================================================
   HERO / PAGE-HEAD — biała scena, wielkie hasło (Apple-like)
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--c-bg);
  color:var(--c-text);
  border-bottom:1px solid var(--c-bg-alt);
  text-align:center;
}
.hero::before{ content:none; }
.hero .container{ padding-top:var(--space-20); padding-bottom:var(--space-20); }
.hero h1{ font-size:clamp(40px, 7vw, var(--fs-display)); font-weight:700; }
.hero .lead{ margin:var(--space-5) auto 0; max-width:38em; }
.hero .eyebrow{ margin-bottom:var(--space-3); display:block; }
.hero-actions{ display:flex; gap:var(--space-4); justify-content:center;
  flex-wrap:wrap; margin-top:var(--space-8); }

.page-head{
  background:var(--c-bg);
  color:var(--c-text);
  text-align:center;
  border-bottom:1px solid var(--c-bg-alt);
}
.page-head .container{ padding-top:var(--space-16); padding-bottom:var(--space-12); }
.page-head h1{ font-size:clamp(34px, 5.5vw, var(--fs-h1)); }
.page-head .lead{ margin:var(--space-4) auto 0; max-width:40em; }
.page-head .eyebrow{ display:block; margin-bottom:var(--space-2); }

.page-main{ background:var(--c-bg-alt); }  /* treść na szarości jak sklep Apple */
.section{ padding:var(--space-16) 0 var(--space-20); }
.section-head{ text-align:center; max-width:44em; margin:0 auto var(--space-12); }
.section-head h2{ font-size:clamp(30px, 5vw, var(--fs-h2)); }
.section-head .lead{ margin-top:var(--space-4); }

/* Panel treści — biała karta XL na szarym tle */
.panel{
  background:var(--c-panel);
  border:0;
  border-radius:var(--radius-lg);
  padding:var(--space-8);
  box-shadow:var(--sh-sm);
}
.panel + .panel{ margin-top:var(--space-6); }

/* ============================================================
   PRZYCISKI — pill jak CTA Apple
   ============================================================ */
button, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; min-height:44px;
  font-family:var(--font-text); font-size:16px; font-weight:500;
  border:1px solid var(--c-accent);
  background:var(--c-accent); color:var(--c-accent-ink);
  border-radius:var(--radius-pill);
  cursor:pointer; text-decoration:none;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
button:hover, .btn:hover{ background:var(--c-accent-hover); border-color:var(--c-accent-hover);
  color:var(--c-accent-ink); text-decoration:none; }
button:active, .btn:active{ background:var(--c-accent-press); border-color:var(--c-accent-press); }
button.secondary, .btn.secondary{
  background:transparent; color:var(--c-accent); border-color:var(--c-accent);
}
button.secondary:hover, .btn.secondary:hover{ background:rgba(21,122,66,.08); color:var(--c-accent); }
button:disabled{ opacity:.4; cursor:not-allowed; }
.btn.small{ padding:7px 16px; min-height:34px; font-size:14px; }

/* ============================================================
   FORMULARZE — czyste, przestronne
   ============================================================ */
fieldset{ border:0; padding:0; margin:0 0 var(--space-10); }
legend{ font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700;
  padding:0; margin-bottom:var(--space-5); color:var(--c-text); }
form .field{ margin-bottom:var(--space-4); }
label{ display:block; font-size:var(--fs-small); font-weight:600; margin-bottom:6px;
  color:var(--c-text); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="url"],
input[type="datetime-local"], input[type="file"], select, textarea{
  width:100%; padding:12px 14px; font-size:16px; font-family:var(--font-text);
  color:var(--c-text); background:#fff;
  border:1px solid var(--c-border); border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input:hover, select:hover, textarea:hover{ border-color:var(--c-border-strong); }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--c-accent);
  box-shadow:0 0 0 4px rgba(21,122,66,.15); }
textarea{ min-height:110px; resize:vertical; }
select{
  appearance:none; -webkit-appearance:none;
  background-color:#fff;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:38px;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4) var(--space-5); }
.form-grid .field{ margin-bottom:0; }
.form-grid .full{ grid-column:1 / -1; }
.checkbox-field{ display:flex; gap:12px; align-items:flex-start; margin-bottom:var(--space-4); }
.checkbox-field input[type="checkbox"], .checkbox-field input[type="radio"]{
  width:20px; height:20px; margin-top:2px; accent-color:var(--c-accent); flex:none; }
.checkbox-field label{ font-weight:400; font-size:15px; line-height:1.5; margin:0; }
.hint{ font-size:var(--fs-small); color:var(--c-muted); }
.field-error{ color:var(--c-error); font-size:var(--fs-small); margin-top:6px; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:var(--c-error); }
.req{ color:var(--c-error); }
.toolbar{ display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:end; }
.toolbar .field{ margin-bottom:0; }
.toolbar .grow{ flex:1 1 220px; }

/* ============================================================
   ALERTY
   ============================================================ */
.alert{ padding:14px 18px; border-radius:var(--radius-sm); font-size:15px;
  border:1px solid var(--c-border); background:#fff; margin:var(--space-4) 0; }
.alert.error{ background:var(--c-error-bg); border-color:var(--c-error-line); color:var(--c-error); }
.alert.success{ background:var(--c-ok-bg); border-color:var(--c-ok-line); color:var(--c-ok); }
.alert.info{ background:var(--c-info-bg); border-color:var(--c-info-line); color:#174f96; }
.alert.warn{ background:var(--c-warn-bg); border-color:var(--c-warn-line); color:var(--c-warn); }

/* ============================================================
   KARTY PRODUKTÓW — lineup jak „Zobacz je w pełnym składzie"
   ============================================================ */
.product-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--space-6); }
/* Grupa z jedną kartą (np. Usługi) — nie rozciągaj karty na całą szerokość. */
.product-grid:has(> .card:only-child){ grid-template-columns:minmax(280px, 380px); justify-content:start; }
.card{
  background:var(--c-panel); border:0; border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-6); text-align:center;
  box-shadow:var(--sh-sm);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  display:flex; flex-direction:column; gap:var(--space-3); align-items:center;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-card); }
.card img{ border-radius:var(--radius-md); margin-bottom:var(--space-2); }
.card h3{ font-size:22px; }
.card p{ color:var(--c-muted); font-size:15px; }
.card .btn{ margin-top:auto; }
.price{ font-size:22px; font-weight:700; color:var(--c-text); margin:var(--space-2) 0; }
.price .hint, .price .vat{ font-size:13px; font-weight:400; color:var(--c-muted); }
.price s{ color:var(--c-faint); font-weight:400; font-size:16px; }

/* Badge — dyskretne kapsuły */
.status-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; letter-spacing:.02em; vertical-align:middle;
  background:var(--c-bg-alt); color:var(--c-muted); border:1px solid transparent;
}
.status-badge .dot{ width:6px; height:6px; border-radius:999px; background:currentColor; }
.status-badge.new{ background:var(--c-info-bg); color:var(--c-info); }
.status-badge.hit, .status-badge.bestseller{ background:#1d1d1f; color:var(--c-accent-3); }
.status-badge.sale, .status-badge.promo, .status-badge.promocja{ background:var(--c-error-bg); color:var(--c-error); }
.status-badge.featured, .status-badge.polecany{ background:var(--c-ok-bg); color:var(--c-ok); }
.status-badge.ok, .status-badge.success, .status-badge.paid, .status-badge.completed{
  background:var(--c-ok-bg); color:var(--c-ok); }
.status-badge.warn, .status-badge.pending, .status-badge.processing{
  background:var(--c-warn-bg); color:var(--c-warn); }
.status-badge.error, .status-badge.canceled, .status-badge.failed{
  background:var(--c-error-bg); color:var(--c-error); }
.status-badge.info, .status-badge.new-order, .status-badge.shipped{
  background:var(--c-info-bg); color:var(--c-info); }

/* ============================================================
   TABELE / PODSUMOWANIA — jak „Dane techniczne" Apple
   ============================================================ */
table.data{ width:100%; border-collapse:collapse; font-size:15px; background:#fff;
  border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--sh-sm); }
table.data th, table.data td{ border:0; border-bottom:1px solid var(--c-bg-alt);
  padding:14px 16px; text-align:left; vertical-align:top; }
table.data thead th{ background:var(--c-bg-alt); color:var(--c-muted);
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
table.data tbody tr:last-child th, table.data tbody tr:last-child td{ border-bottom:0; }
table.data .num{ text-align:right; font-variant-numeric:tabular-nums; }

dl.summary{ display:grid; grid-template-columns:max-content 1fr; gap:12px 24px; font-size:15px; }
dl.summary dt{ font-weight:600; color:var(--c-muted); }
dl.summary dd{ margin:0; }

/* ============================================================
   PRODUKT — scena, galeria, buy-box
   ============================================================ */
.product-layout{ display:grid; grid-template-columns:1.2fr .8fr; gap:var(--space-10);
  align-items:start; }
.gallery-main img, #product figure img{
  background:#fff; border:0; border-radius:var(--radius-lg);
  box-shadow:var(--sh-sm); margin:0 auto;
}
#product figure{ margin:0 0 var(--space-4); text-align:center; }
#product figcaption{ margin-top:var(--space-2); }
.gallery-thumbs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.gallery-thumbs button, #product [data-img]{ border-radius:var(--radius-sm); padding:3px;
  background:#fff; border:1px solid var(--c-border); min-height:0; }
#product [data-img] img{ border-radius:8px; }
.buy-box{ background:#fff; border-radius:var(--radius-lg); padding:var(--space-8);
  box-shadow:var(--sh-sm); position:sticky; top:76px; }
.media-ph{ display:grid; place-items:center; background:var(--c-bg-alt); color:var(--c-faint);
  border-radius:var(--radius-md); aspect-ratio:4/3; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; }
.video-ph{ aspect-ratio:16/9; }
.attachments{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.attachments li{ background:#fff; border-radius:var(--radius-sm); padding:12px 16px;
  box-shadow:var(--sh-sm); }
.attachments .size{ color:var(--c-faint); font-size:13px; }
.payu-widget-placeholder{
  border:1px dashed var(--c-border-strong); border-radius:var(--radius-md);
  padding:16px 18px; color:var(--c-muted); font-size:14px; margin:var(--space-6) 0;
  background:#fff;
}

/* Informacja o ratach PayU w karcie zakupu — wersja statyczna, dopóki nie mamy
   klucza widgetu. Zastąpiła szary komunikat „po aktywacji PayU Raty". */
.payu-raty-box{
  display:flex; align-items:center; gap:14px; margin:var(--space-6) 0;
  padding:14px 16px; background:#fff; border:1px solid var(--c-border);
  border-radius:var(--radius-md);
}
.payu-raty-box img{ height:26px; width:auto; display:block; flex:none; }
.payu-raty-box div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.payu-raty-box strong{ font-size:14px; }
.payu-raty-box span{ font-size:13px; color:var(--c-muted); }
.payu-raty-box a{ color:inherit; text-decoration:underline; }

/* ============================================================
   KOSZYK / CHECKOUT / STATUS / DOKUMENTY
   ============================================================ */
.cart-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--space-6); align-items:start; }
.cart-aside{ display:grid; gap:var(--space-6); position:sticky; top:76px; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--c-border);
  border-radius:var(--radius-pill); overflow:hidden; }
.qty button{ min-height:0; padding:6px 12px; border:0; border-radius:0;
  background:#fff; color:var(--c-text); }
.qty input{ width:44px; text-align:center; border:0; padding:6px 0; }
.remove-link{ background:none; border:0; color:var(--c-link); font-size:14px;
  padding:4px 8px; min-height:0; }
.remove-link:hover{ background:none; color:var(--c-link-hover); text-decoration:underline; }

.checkout-layout{ display:grid; grid-template-columns:.9fr 1.4fr; gap:var(--space-6);
  align-items:start; }
.checkout-layout #order-summary{ position:sticky; top:76px; }
.checkout-layout #checkout-form{ background:#fff; border-radius:var(--radius-lg);
  padding:var(--space-8); box-shadow:var(--sh-sm); }

.status-card{ background:#fff; border-radius:var(--radius-lg); padding:var(--space-8);
  box-shadow:var(--sh-sm); }
.status-top{ display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.status-steps{ list-style:none; margin:var(--space-6) 0 0; padding:0; display:grid; gap:10px; }
.status-steps .step{ color:var(--c-faint); padding-left:26px; position:relative; }
.status-steps .step::before{ content:''; position:absolute; left:6px; top:7px; width:8px;
  height:8px; border-radius:999px; background:var(--c-border); }
.status-steps .step.done{ color:var(--c-muted); }
.status-steps .step.done::before{ background:var(--c-ok); }
.status-steps .step.now{ color:var(--c-text); font-weight:600; }
.status-steps .step.now::before{ background:var(--c-accent); box-shadow:0 0 0 4px rgba(21,122,66,.18); }

.doc-layout{ display:grid; grid-template-columns:220px 1fr; gap:var(--space-10); align-items:start; }
.doc-nav{ position:sticky; top:76px; display:grid; gap:6px; font-size:14px; }
.doc-body{ background:#fff; border-radius:var(--radius-lg); padding:var(--space-10);
  box-shadow:var(--sh-sm); max-width:75ch; }
.doc-body h2{ font-size:24px; margin:var(--space-8) 0 var(--space-3); }
.doc-body p, .doc-body li{ color:#424245; line-height:1.65; }
.doc-body p{ margin-bottom:var(--space-3); }
.doc-meta{ color:var(--c-faint); font-size:13px; }
.legal-note{ font-size:13px; color:var(--c-warn); }

/* Kafle zaufania („Dlaczego warto kupić…") */
.trust-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--space-6); }
.trust-item{ background:#fff; border-radius:var(--radius-lg); padding:var(--space-8) var(--space-6);
  text-align:center; box-shadow:var(--sh-sm); }
.trust-item h3, .trust-item h4{ font-size:19px; margin-bottom:var(--space-2); }
.trust-item p{ color:var(--c-muted); font-size:15px; }

/* ============================================================
   STOPKA — jasnoszara, drobna (jak stopka Apple)
   ============================================================ */
.site-footer{ background:var(--c-bg-alt); border-top:1px solid var(--c-bg-deep);
  color:var(--c-muted); font-size:13px; }
.site-footer .container{ padding-top:var(--space-10); padding-bottom:var(--space-8); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-8); }
.site-footer .logo{ color:var(--c-text); }
.site-footer h4{ font-size:13px; font-weight:600; color:var(--c-text); margin-bottom:var(--space-3); }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.footer-links a{ color:var(--c-muted); }
.footer-links a:hover{ color:var(--c-text); }
.footer-bottom{ display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
  border-top:1px solid var(--c-bg-deep); margin-top:var(--space-8); padding-top:var(--space-5);
  color:var(--c-faint); }

/* ============================================================
   OPIS PRODUKTU (#description) — rozdziały jak sekcje Apple
   ============================================================ */
#description{ max-width:72ch; }
#description p{ margin:0 0 16px; color:#424245; line-height:1.65; }
#description p:first-child{ font-size:19px; color:var(--c-text); line-height:1.5; }
#description h3{ font-size:clamp(24px, 3.5vw, 32px); font-weight:700; letter-spacing:-0.015em;
  margin:44px 0 16px; }
#description h4{ font-size:19px; margin:28px 0 10px; }
#description ul, #description ol{ margin:0 0 20px; padding-left:22px; display:grid; gap:10px; }
#description li{ line-height:1.6; color:#424245; }
#description li strong{ color:var(--c-text); }
#description table{ width:100%; border-collapse:collapse; margin:0 0 22px; font-size:15px; }
#description th, #description td{ border:0; border-bottom:1px solid var(--c-bg-deep);
  padding:14px 12px; text-align:left; vertical-align:top; }
#description th{ color:var(--c-muted); font-weight:600; width:230px; }
#description td{ color:#424245; }
#description blockquote{ margin:36px 0; padding:0; border:0; text-align:center;
  font-size:clamp(21px, 3vw, 28px); font-weight:700; letter-spacing:-0.015em;
  color:var(--c-text); }
#description hr{ border:0; height:1px; background:var(--c-bg-deep); margin:32px 0; }
@media (max-width:600px){
  #description th{ width:auto; }
  #description tr{ display:grid; }
  #description th, #description td{ border-bottom:0; padding:8px 4px; }
  #description tr{ border-bottom:1px solid var(--c-bg-deep); padding:6px 0; }
}

/* ============================================================
   RWD
   ============================================================ */
@media (max-width:960px){
  .product-layout, .checkout-layout, .cart-layout{ grid-template-columns:1fr; }
  .checkout-layout #order-summary, .cart-aside, .buy-box{ position:static; }
  .doc-layout{ grid-template-columns:1fr; }
  .doc-nav{ position:static; display:flex; flex-wrap:wrap; gap:12px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  :root{ --gutter:20px; }
  .site-header .container{ justify-content:center; }
  .site-nav{ margin-left:0; justify-content:center; }
  .form-grid{ grid-template-columns:1fr; }
  .panel, .checkout-layout #checkout-form, .doc-body{ padding:var(--space-6); }
  .footer-grid{ grid-template-columns:1fr; }
  dl.summary{ grid-template-columns:1fr; gap:2px 0; }
  dl.summary dd{ margin-bottom:10px; }
  .hero .container{ padding-top:var(--space-12); padding-bottom:var(--space-12); }
}

/* ============================================================
   v2.1 — DOPRACOWANIE APPLE-LIKE
   Nowe klasy (pełna lista: RAPORT.md). Kontrakt klas JS bez zmian.
   ============================================================ */
:root{ --space-28:112px; }

/* ---------- Rytm sekcji i pasy tła ---------- */
.section{ padding:var(--space-20) 0 var(--space-24); }
.band-white{ background:var(--c-bg); }
.band-gray{ background:var(--c-bg-alt); }
.section-head{ margin-bottom:var(--space-10); }
.section-head h2{ font-size:clamp(32px,5vw,48px); letter-spacing:-.02em; text-wrap:balance; }
.band-title{ font-size:clamp(28px,4vw,40px); letter-spacing:-.015em; margin:0 0 var(--space-8); text-wrap:balance; }

/* ---------- HERO v2 — hasło + scena ---------- */
.hero{ border-bottom:0; }
.hero .container{ padding-top:var(--space-24); padding-bottom:0; }
.hero h1{ letter-spacing:-.02em; }
.hero .lead{ max-width:34em; }
.hero-scene{ margin-top:var(--space-16); }
.scene-panel{
  background:
    radial-gradient(90% 120% at 18% 0%, rgba(38,224,201,.10), transparent 50%),
    radial-gradient(90% 120% at 84% 8%, rgba(163,240,75,.16), transparent 55%),
    var(--c-bg-alt);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:var(--space-16) var(--space-6);
  display:grid; place-items:center;
}

/* Karta aplikacji EMS w scenie hero */
.app-card{ width:min(560px,100%); background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-radius:var(--radius-lg); padding:26px 26px 22px;
  box-shadow:0 18px 50px rgba(0,0,0,.10); text-align:left; display:grid; gap:18px; }
.app-card-head{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:13px; color:var(--c-muted); }
.app-card-head strong{ color:var(--c-text); font-weight:600; }
.app-live{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--c-ok); }
.app-live i{ width:7px; height:7px; border-radius:999px; background:var(--c-ok); }
.app-stat{ display:flex; align-items:baseline; gap:12px; }
.app-stat b{ font-size:46px; font-weight:700; letter-spacing:-.02em; line-height:1;
  font-family:var(--font-display); }
.app-stat span{ font-size:13px; color:var(--c-muted); line-height:1.35; }
.rce-bars{ display:flex; align-items:flex-end; gap:3px; height:64px; }
.rce-bars i{ flex:1; border-radius:3px 3px 0 0; background:var(--c-bg-deep); }
.rce-bars i.low{ background:var(--c-accent); }
.rce-bars i.high{ background:var(--c-error); }
.rce-caption{ display:flex; justify-content:space-between; gap:12px; font-size:12px;
  color:var(--c-faint); margin-top:6px; }
.rce-legend{ display:inline-flex; gap:14px; }
.rce-caption .low-dot, .rce-caption .high-dot{ display:inline-flex; align-items:center; gap:6px; }
.rce-caption .low-dot::before, .rce-caption .high-dot::before{ content:''; width:8px; height:8px;
  border-radius:2px; background:var(--c-accent); }
.rce-caption .high-dot::before{ background:var(--c-error); }
.app-rows{ display:grid; gap:10px; border-top:1px solid var(--c-bg-alt); padding-top:16px; }
.app-row{ display:flex; align-items:center; gap:10px; font-size:14px; }
.app-row svg{ width:18px; height:18px; stroke:var(--c-muted); flex:none; }
.app-row .tag{ margin-left:auto; font-size:12px; font-weight:600; color:var(--c-ok);
  background:var(--c-ok-bg); padding:2px 10px; border-radius:var(--radius-pill); white-space:nowrap; }
.app-row .tag.plain{ background:var(--c-bg-alt); color:var(--c-muted); }

/* ---------- Taśma „Co go wyróżnia" ---------- */
.highlights-track{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(232px,1fr);
  gap:var(--space-5); overflow-x:auto; padding:4px 4px 10px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.highlights-track::-webkit-scrollbar{ display:none; }
.highlight-card{ background:var(--c-panel); border-radius:var(--radius-lg); padding:28px;
  display:grid; gap:12px; align-content:start; scroll-snap-align:start; box-shadow:var(--sh-sm); }
.highlight-card svg{ width:28px; height:28px; stroke:var(--c-accent); }
.highlight-card p{ font-size:17px; line-height:1.5; color:var(--c-muted); }
.highlight-card b{ color:var(--c-text); }

/* ---------- Cicha wyszukiwarka (index) ---------- */
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.search-bar{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  max-width:760px; margin:0 auto var(--space-10); }
.search-bar .field{ margin:0; }
.search-bar .grow{ flex:1 1 260px; }
.search-bar input[type="search"], .search-bar select{
  background-color:var(--c-bg-alt); border-color:transparent; border-radius:var(--radius-pill);
  padding:11px 20px; }
.search-bar select{ padding-right:38px; }
.search-bar input[type="search"]:hover, .search-bar select:hover{ border-color:var(--c-border); }
.search-bar input[type="search"]:focus, .search-bar select:focus{ background-color:#fff; }

/* ---------- Karty produktów — porównanie pakietów ---------- */
.card{ padding:var(--space-8) var(--space-6) var(--space-6); }
.card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-md);
  background:var(--c-bg-alt); }
.card h3 .status-badge{ margin-left:4px; transform:translateY(-2px); }
.card .media-ph{ width:100%; font-family:var(--font-mono); }
.card > p:last-child{ margin-top:auto; padding-top:var(--space-2); }
.card .price{ margin:var(--space-2) 0 0; }

/* ---------- Kafle zaufania ---------- */
.trust-item{ display:grid; gap:8px; justify-items:center; }
.trust-item svg{ width:30px; height:30px; stroke:var(--c-accent); margin-bottom:4px; fill:none; }
.trust-item h3{ font-size:19px; }

/* ---------- LOCALNAV — sticky pasek produktu ---------- */
.localnav{ position:sticky; top:52px; z-index:40;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08); }
.localnav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:50px; }
.localnav-title{ font-size:18px; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.localnav-actions{ display:inline-flex; align-items:center; gap:14px; flex:none; }
.localnav-price{ font-size:14px; color:var(--c-muted); white-space:nowrap; }
.localnav .localnav-buy{ padding:6px 16px; min-height:30px; font-size:14px; }
@media (max-width:600px){ .localnav-price{ display:none; } }

/* ---------- PRODUKT — karta jako scena Apple ---------- */
.product-main{ background:var(--c-bg); }
#product > h1{ text-align:center; font-size:clamp(36px,5.5vw,56px); letter-spacing:-.02em;
  margin:var(--space-6) auto 10px; max-width:22em; }
#product > h1 .status-badge{ vertical-align:middle; transform:translateY(-5px); margin-left:6px; }
#product > .hint{ text-align:center; color:var(--c-faint); }
#product figure{ margin:var(--space-10) 0 var(--space-4); }
#product figure img{ box-shadow:none; max-height:560px; width:auto; max-width:100%; }
#product figure + div{ justify-content:center; }
#product [data-img]{ border-radius:var(--radius-sm); border:1px solid var(--c-border);
  background:#fff; transition:border-color var(--dur-fast) var(--ease); }
#product [data-img]:hover{ border-color:var(--c-border-strong); background:#fff; }
#product > .price{ text-align:center; font-size:26px; line-height:1.5;
  background:var(--c-bg-alt); border-radius:var(--radius-lg);
  max-width:560px; margin:var(--space-10) auto; padding:var(--space-6); }
#product > .field-error{ text-align:center; }
#description{ margin:var(--space-16) auto 0; }
#product > h2{ text-align:center; font-size:clamp(28px,4vw,40px); letter-spacing:-.02em;
  margin:var(--space-24) 0 var(--space-8); }
#product table.data{ max-width:760px; margin:0 auto; }
#product iframe, #product video{ display:block; margin:0 auto; border-radius:var(--radius-md);
  max-width:100%; }
#product > ul{ list-style:none; padding:0; margin:0 auto; max-width:560px; display:grid; gap:10px; }
#product > ul li{ background:var(--c-bg-alt); border-radius:var(--radius-sm); padding:12px 16px; }
#product [data-payu-installments]{ max-width:560px; margin:var(--space-8) auto; }
#product > p:last-child{ display:flex; justify-content:center; gap:var(--space-4);
  flex-wrap:wrap; margin:var(--space-10) auto var(--space-6); }
#product #add-to-cart{ font-size:17px; padding:16px 32px; scroll-margin-top:160px; }

/* ---------- Dokumenty — cichy szablon ---------- */
.doc-nav a{ color:var(--c-muted); padding:8px 12px; border-radius:10px; }
.doc-nav a:hover{ color:var(--c-text); background:rgba(0,0,0,.05); text-decoration:none; }
.doc-nav a.active{ color:var(--c-text); font-weight:600; background:#fff; box-shadow:var(--sh-sm); }
.doc-body h2:first-child{ margin-top:0; }

/* ---------- Checkout mikropolish ---------- */
#payment-methods .checkbox-field{ border:1px solid var(--c-border); border-radius:var(--radius-sm);
  padding:12px 14px; transition:border-color var(--dur-fast) var(--ease); }
#payment-methods .checkbox-field:hover{ border-color:var(--c-border-strong); }
#payment-methods .checkbox-field:has(input:checked){ border-color:var(--c-accent);
  box-shadow:0 0 0 1px var(--c-accent) inset; }
#payment-methods p{ color:var(--c-muted); }

/* ---------- Bloki kodu (wzorzec-opisu.html) ---------- */
.code-block{ background:var(--c-bg-alt); border-radius:var(--radius-md); padding:20px 22px;
  overflow:auto; font-family:var(--font-mono); font-size:13px; line-height:1.6; margin:0;
  max-height:520px; }
.code-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 12px; flex-wrap:wrap; }
.code-head h2{ font-size:22px; }

/* ---------- Mikrointerakcje ---------- */
button:active, .btn:active{ transform:scale(.985); }

/* ---------- RWD v2 ---------- */
@media (max-width:600px){
  .hero .container{ padding-top:var(--space-16); padding-bottom:0; }
  .scene-panel{ padding:var(--space-8) var(--space-4); }
  .app-stat b{ font-size:38px; }
  .section{ padding:var(--space-12) 0 var(--space-16); }
  #product > .price{ font-size:22px; }
}

/* ---------- Ścieżka zakupu — mikropolish (koszyk / zamówienie / status / konfigurator) ---------- */
#cart-content h2, #order-summary h2, #status-result h2, #result h2{
  font-size:24px; margin:var(--space-10) 0 var(--space-4); }
#order-summary h2, #status-result h2{ margin-top:0; }
#result h2{ margin-top:var(--space-6); }
#cart-content > p:last-child{ display:flex; gap:var(--space-4); flex-wrap:wrap;
  margin-top:var(--space-8); }
#status-result{ background:#fff; border-radius:var(--radius-lg); padding:var(--space-8);
  box-shadow:var(--sh-sm); }
#cart-content [data-payu-installments]{ border:1px dashed var(--c-border-strong);
  border-radius:var(--radius-md); padding:16px 18px; color:var(--c-muted); font-size:14px;
  background:#fff; margin:var(--space-6) 0; }
#cart-content [data-payu-installments]:empty{ display:none; }

/* ============================================================
   v2.2 — implementacja propozycji designu w szablonach JS
   (lista cech na kartach, badge nad tytułem, sticky buy-box)
   ============================================================ */
.card .media-ph{ width:100%; aspect-ratio:4/3; font-size:13px; }
.card-features{ list-style:none; padding:0; margin:0; display:grid; gap:6px;
  font-size:14px; color:var(--c-muted); text-align:center; }
.card-features li{ position:relative; }
.card-features li::before{ content:'✓'; color:var(--c-ok); margin-right:7px; font-weight:700; }
.product-badges{ display:flex; gap:8px; justify-content:center; margin-bottom:var(--space-3); }
#product > h1{ text-align:center; font-size:clamp(32px, 5vw, var(--fs-h1)); }
#product > .hint{ text-align:center; margin-bottom:var(--space-8); }
.product-layout{ margin-top:var(--space-8); }
.product-media{ min-width:0; }
.product-media h2{ font-size:26px; margin:var(--space-10) 0 var(--space-4); }
.buy-box .price{ font-size:30px; line-height:1.25; margin-top:0; }
.buy-box .price .hint{ font-size:13px; }
.buy-box [data-payu-installments]{ margin:var(--space-4) 0; }
.buy-actions{ display:grid; gap:10px; }
.buy-actions .btn, .buy-actions button{ width:100%; }
@media (max-width:960px){
  .product-layout{ display:flex; flex-direction:column; }
  .buy-box{ order:-1; }
}

/* ============================================================
   v2.3 — FINALNY SZLIF KARTY PRODUKTU
   (spójność ze stroną główną: scena packshotu, premium buy-box)
   ============================================================ */
#product{ padding-top:6px; }
.product-badges{ margin:var(--space-2) 0 var(--space-3); }
#product > h1{ font-size:clamp(34px,5vw,52px); letter-spacing:-.02em; margin-bottom:8px; }
#product > .hint{ font-size:13px; margin-bottom:var(--space-6); }
.product-layout{ grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:var(--space-10); margin-top:var(--space-6); align-items:start; }

/* Galeria jako scena */
.product-media figure{ margin:0; background:var(--c-bg-alt); border-radius:var(--radius-lg);
  padding:var(--space-6); display:grid; place-items:center; min-height:360px; }
.product-media figure img{ max-height:520px; width:auto; max-width:100%;
  border-radius:var(--radius-md); box-shadow:none; background:transparent; }
.product-media figcaption{ margin-top:10px; text-align:center; }
#product figure + div{ justify-content:flex-start; margin-top:12px; }
#product [data-img]{ border-radius:12px; padding:3px; }
#product [data-img] img{ border-radius:9px; }

/* Treść w kolumnie mediów */
.product-media h2{ font-size:clamp(24px,3vw,30px); letter-spacing:-.015em;
  margin:var(--space-16) 0 var(--space-5); text-align:left; }
#description{ margin:var(--space-12) 0 0; max-width:66ch; }
.product-media table.data{ max-width:none; margin:0; }
.product-media ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.product-media ul li{ background:var(--c-bg-alt); border-radius:var(--radius-sm);
  padding:12px 16px; font-size:15px; }
.product-media iframe, .product-media video{ display:block; margin:0;
  border-radius:var(--radius-md); max-width:100%; }

/* Buy-box premium */
.buy-box{ top:132px; border-radius:var(--radius-lg); padding:var(--space-6);
  border:1px solid var(--c-bg-deep); box-shadow:var(--sh-sm); }
.buy-box .price{ background:transparent; padding:0; max-width:none; text-align:left;
  font-size:30px; margin:0 0 var(--space-2); }
.buy-box .price .hint{ display:block; font-weight:400; margin-top:4px; }
.buy-box .price s{ font-size:15px; }
.buy-box .field-error{ text-align:left; }
.buy-actions{ border-top:1px solid var(--c-bg-alt); padding-top:var(--space-4);
  margin:var(--space-2) 0 0; }
.buy-box #add-to-cart{ scroll-margin-top:150px; }
@media (max-width:960px){
  .product-layout{ align-items:stretch; }
  .product-media figure{ min-height:240px; padding:var(--space-4); }
  .product-media figure img{ max-height:380px; }
  .buy-box{ top:auto; }
}

/* ============================================================
   v2.4 — POWRÓT DESIGNU KINOWEGO (ciemne hero, rozdziały,
   galeria „Poznaj", karty-lineup) — port z zaakceptowanej wersji
   ============================================================ */
/* Hero ciemny, kinowy */
.hero-dark{ background:radial-gradient(80% 60% at 50% -10%, rgba(163,240,75,.10), transparent 60%),
  var(--c-surface-dark); color:var(--c-on-dark); border-bottom:0; }
.hero-dark .eyebrow{ color:var(--c-accent-3); }
.hero-dark h1{ color:#fff; font-size:clamp(48px,8vw,84px); }
.hero-dark .lead{ color:var(--c-on-dark-muted); }
.hero-price{ margin:22px 0 0; font-size:17px; color:var(--c-on-dark-muted); }
.hero-price b{ color:var(--c-on-dark); font-weight:600; }
.btn-light{ background:#f5f5f7; border-color:#f5f5f7; color:#1d1d1f; }
.btn-light:hover{ background:#fff; border-color:#fff; color:#1d1d1f; }
.btn-light:active{ background:#e8e8ed; border-color:#e8e8ed; }
.btn-outline-light{ background:transparent; border-color:rgba(255,255,255,.4); color:#f5f5f7; }
.btn-outline-light:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.6); color:#fff; }
.scene-dark{
  background:
    radial-gradient(70% 90% at 30% 15%, rgba(38,224,201,.10), transparent 55%),
    radial-gradient(70% 90% at 75% 10%, rgba(163,240,75,.14), transparent 60%),
    var(--c-surface-raised);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:var(--space-16) var(--space-6);
  display:grid; place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-dark .app-card{ background:rgba(16,28,22,.88); border:1px solid rgba(255,255,255,.08);
  color:var(--c-on-dark); box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 70px rgba(163,240,75,.10); }
.hero-dark .app-card-head{ color:var(--c-on-dark-faint); }
.hero-dark .app-card-head strong{ color:var(--c-on-dark); }
.hero-dark .app-live{ color:var(--c-accent-3); }
.hero-dark .app-live i{ background:var(--c-accent-3); }
.hero-dark .rce-bars i{ background:rgba(255,255,255,.16); }
.hero-dark .rce-bars i.low{ background:var(--c-accent-3); }
.hero-dark .rce-bars i.high{ background:#ff8a6b; }
.hero-dark .rce-caption{ color:var(--c-on-dark-faint); }
.hero-dark .rce-caption .low-dot::before{ background:var(--c-accent-3); }
.hero-dark .rce-caption .high-dot::before{ background:#ff8a6b; }
.hero-dark .app-rows{ border-top-color:rgba(255,255,255,.10); }
.hero-dark .app-row svg{ stroke:var(--c-on-dark-faint); }
.hero-dark .app-row .tag{ background:rgba(163,240,75,.14); color:var(--c-accent-3); }
.hero-dark .app-row .tag.plain{ background:rgba(255,255,255,.08); color:var(--c-on-dark-muted); }

/* Galeria „Poznaj system EMS." */
.band-title-xl{ font-size:clamp(32px,5vw,48px); letter-spacing:-.02em; margin:0 0 var(--space-8);
  text-wrap:balance; }
.feature-nav{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 var(--space-6); }
.feature-nav a{ padding:7px 16px; border-radius:999px; background:#fff; color:#424245;
  font-size:14px; font-weight:500; text-decoration:none; box-shadow:var(--sh-sm); }
.feature-nav a:hover{ color:var(--c-text); text-decoration:none; }
.feature-track{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,1fr);
  gap:var(--space-5); overflow-x:auto; padding:4px 4px 12px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.feature-track::-webkit-scrollbar{ display:none; }
.feature-card{ background:#fff; border-radius:28px; padding:28px 28px 0; min-height:420px;
  display:flex; flex-direction:column; gap:10px; box-shadow:var(--sh-sm);
  scroll-snap-align:start; overflow:hidden; }
.feature-card h3{ font-size:21px; letter-spacing:-.01em; }
.feature-card > p{ color:var(--c-muted); font-size:15px; max-width:34em; }
.feature-card .chip{ align-self:flex-start; padding:3px 12px; border-radius:999px;
  background:rgba(163,240,75,.16); color:#a3f04b; font-size:12px; font-weight:600; }
.feature-img{ display:block; margin:18px -28px 0; margin-top:auto; width:calc(100% + 56px);
  max-width:none; aspect-ratio:16/10; object-fit:cover; }
.feature-card.dark{ background:var(--c-surface-dark); color:var(--c-on-dark); }
.feature-card.dark h3{ color:#fff; }
.feature-card.dark > p{ color:var(--c-on-dark-muted); }

/* Rozdziały-kino */
.chapter{ text-align:center; }
.chapter .container{ padding-top:var(--space-32); padding-bottom:var(--space-32); }
.chapter h2{ font-size:clamp(36px,6vw,56px); letter-spacing:-.02em; line-height:1.05;
  text-wrap:balance; }
.chapter .eyebrow{ display:block; margin-bottom:var(--space-3); }
.chapter .lead{ margin:20px auto 0; max-width:36em; }
.chapter-dark{ background:radial-gradient(70% 50% at 50% 0%, rgba(163,240,75,.08), transparent 60%),
  var(--c-surface-dark); color:var(--c-on-dark); }
.chapter-dark h2{ color:#fff; }
.chapter-dark .lead{ color:var(--c-on-dark-muted); }
.chapter-dark .eyebrow{ color:var(--c-accent-3); }
.chip-row{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:24px; }
.chip-row .chip{ padding:4px 14px; border-radius:999px; background:rgba(163,240,75,.14);
  color:var(--c-accent-3); font-size:13px; font-weight:600; }
.chapter-cta{ margin-top:var(--space-8); }
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-8); margin-top:var(--space-12); }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(44px,6vw,64px);
  font-weight:700; letter-spacing:-.02em; line-height:1; }
.stat span{ display:block; margin-top:10px; color:var(--c-muted); font-size:15px; }
.chapter-dark .stat span{ color:var(--c-on-dark-muted); }
.chapter-scene{ margin:56px auto 0; max-width:820px; }
.chapter-img{ display:block; width:100%; border-radius:24px; }
.chapter-dark .chapter-img{ box-shadow:0 0 70px rgba(163,240,75,.15); }

/* Karty produktów — lineup (nadpisuje wariant wyśrodkowany) */
.card{ padding:28px 28px 26px; text-align:left; align-items:stretch; gap:0; }
.card img, .card .media-ph{ width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-md); background:var(--c-bg-alt); margin:0 0 var(--space-4); }
.card img + div, .card .media-ph + div{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 6px; }
.card h3{ font-size:24px; letter-spacing:-.015em; margin:0 0 4px; }
.card > p{ margin:0; }
.card h3 + p{ color:#424245; font-size:15px; }
.card .card-features{ margin:var(--space-4) 0 0; display:block; text-align:left; color:#424245; }
.card .card-features li{ padding:10px 0; border-top:1px solid var(--c-bg-alt);
  font-size:14px; line-height:1.45; }
.card .card-features li::before{ content:none; }
.card .price{ margin-top:auto; padding-top:var(--space-4); border-top:1px solid var(--c-bg-alt);
  font-size:24px; line-height:1.25; text-align:left; }
.card .price .hint{ font-size:13px; }
.card .price s{ font-size:14px; }
.card > p:last-child{ margin:var(--space-4) 0 0; display:flex; align-items:center; gap:14px;
  flex-wrap:wrap; }
.card .btn{ margin-top:0; }
@media (max-width:600px){
  .chapter .container{ padding-top:var(--space-20); padding-bottom:var(--space-20); }
  .feature-card{ min-height:360px; }
}

/* Wizualizacje funkcji w kartach „Poznaj system EMS." */
.feature-viz{ margin:18px -28px 0; margin-top:auto; padding:22px 28px 26px;
  background:var(--c-bg-alt); flex:none; }
.feature-card.dark .feature-viz{ background:rgba(255,255,255,.05); }
.viz-rows{ display:grid; gap:12px; }
.viz-row{ display:grid; gap:5px; }
.viz-row .lbl{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:12px; color:var(--c-muted); }
.viz-row .lbl b{ color:var(--c-text); font-size:13px; }
.viz-track{ display:block; height:10px; border-radius:999px; background:var(--c-bg-deep);
  overflow:hidden; }
.viz-fill{ display:block; height:100%; border-radius:999px; background:var(--c-accent); }
.viz-fill.alt{ background:rgba(21,122,66,.45); }
.viz-fill.gray{ background:var(--c-border); }
.viz-bars{ display:flex; align-items:flex-end; gap:3px; height:64px; }
.viz-bars i{ flex:1; border-radius:3px 3px 0 0; background:var(--c-bg-deep); }
.viz-bars i.low{ background:var(--c-accent); }
.viz-bars i.high{ background:#e0685f; }
.viz-tags{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:12px; flex-wrap:wrap; }
.viz-tag{ padding:2px 10px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:var(--c-ok-bg); color:var(--c-ok); }
.viz-tag.sell{ background:var(--c-error-bg); color:var(--c-error); }
.viz-note{ font-size:11.5px; color:var(--c-faint); }
.viz-batt{ display:flex; align-items:center; justify-content:center; gap:20px;
  padding:6px 0 2px; }
.batt{ position:relative; display:block; width:56px; height:104px;
  border:2.5px solid rgba(255,255,255,.35); border-radius:14px; }
.batt::before{ content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:20px; height:5px; border-radius:3px 3px 0 0; background:rgba(255,255,255,.35); }
.batt-fill{ position:absolute; left:5px; right:5px; bottom:5px; height:72%;
  border-radius:8px; background:linear-gradient(180deg,#c8f78e,#a3f04b); }
.viz-batt-meta b{ display:block; font-size:26px; font-weight:700; letter-spacing:-.01em;
  color:#fff; }
.viz-batt-meta span{ display:block; margin-top:4px; font-size:12.5px; line-height:1.4;
  color:var(--c-on-dark-muted); }

/* ============================================================
   v2.5 — przejścia przy scrollu + rozdziały funkcji (produkt)
   ============================================================ */
/* Czasy dobrane tak, żeby efekt był widoczny, ale nieodczuwalny jako czekanie.
   Wcześniej: 0,7 s przejścia + do 0,24 s kaskady = 0,94 s na każdą sekcję —
   przy przewijaniu wyglądało to jak wolno ładująca się strona. */
.js-reveal [data-reveal]{ opacity:0; transform:translateY(14px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.js-reveal [data-reveal].in{ opacity:1; transform:translateY(0); }
.js-reveal .func-grid > *:nth-child(2){ transition-delay:.02s; }
.js-reveal .func-grid > *:nth-child(3){ transition-delay:.04s; }
.js-reveal .func-grid > *:nth-child(4){ transition-delay:.06s; }
.func-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--space-5); text-align:left; margin-top:var(--space-12); }
.func-card{ background:#fff; border-radius:24px; overflow:hidden; box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; }
.func-card .media-ph{ aspect-ratio:16/10; border-radius:0; }
.func-card img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.func-body{ padding:22px 24px 26px; display:grid; gap:8px; }
.func-body h3{ font-size:19px; letter-spacing:-.01em; }
.func-body p{ color:var(--c-muted); font-size:15px; }
.chapter-dark .media-ph{ background:rgba(255,255,255,.05); color:var(--c-on-dark-faint); }

/* ============================================================
   v2.6 — rodziny produktów + konfigurator wariantów w buy-boxie
   ============================================================ */
#products:has(.cat-group){ display:block; }
.cat-group{ margin:0 0 var(--space-16); }
.cat-group:last-child{ margin-bottom:0; }
.cat-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px 20px;
  flex-wrap:wrap; border-top:1px solid var(--c-bg-deep); padding-top:var(--space-6);
  margin:0 0 var(--space-6); }
.cat-head h3{ font-size:clamp(24px,3vw,32px); letter-spacing:-.015em; }
.cat-head p{ color:var(--c-muted); font-size:15px; }

.cfg-heading{ font-size:15px; font-weight:700; margin:0 0 var(--space-4); }
.cfg-group{ margin:0 0 var(--space-5); }
.cfg-title{ font-size:12.5px; font-weight:600; color:#424245; margin:0 0 8px; }
.buy-box .cfg-option{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  width:100%; min-height:0; padding:12px 14px; margin:0 0 8px; text-align:left;
  background:#fff; color:var(--c-text); border:1px solid var(--c-border); border-radius:12px;
  font-size:15px; font-weight:400;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.buy-box .cfg-option:hover{ background:#fff; color:var(--c-text);
  border-color:var(--c-border-strong); }
.buy-box .cfg-option:active{ transform:none; }
.buy-box .cfg-option.selected{ border-color:var(--c-accent);
  box-shadow:0 0 0 1px var(--c-accent) inset; }
.cfg-option b{ display:block; font-size:15px; font-weight:600; }
.cfg-option .sub{ display:block; font-size:12.5px; color:var(--c-muted); font-weight:400; }
.cfg-option .delta{ font-size:13px; color:var(--c-muted); white-space:nowrap; }
.cfg-option.selected .delta{ color:var(--c-accent); font-weight:600; }
.buy-box .cfg-total-label{ font-size:12.5px; font-weight:600; color:#424245;
  border-top:1px solid var(--c-bg-alt); padding-top:var(--space-4); margin:0 0 4px; }

/* v2.7 — strona „Poznaj zestawy EMS" + dwa CTA na kartach */
.card-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }
.card-actions .btn{ flex:1 1 auto; text-align:center; margin-top:0; padding-left:14px; padding-right:14px; }
.chapter .price{ margin-top:var(--space-6); }
.chapter .price .hint{ font-weight:400; }
.chapter-dark .price .hint, .chapter-dark .price s{ color:var(--c-on-dark-muted); }
/* packshoty w kartach bez przycinania (badge/ikony przy krawędziach) */
.card img{ object-fit:contain; background:#fff; }
.chapter-cta{ display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; }

/* Kotwice (#ems-pro, #magazyny, #sklep, #f-*) — cel skoku nie chowa się pod
   sticky headerem i localnav. */
section[id], div[id^="f-"], .cat-group[id]{ scroll-margin-top: 120px; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* Dokumenty prawne — bloki z treści prawnej (projekt roboczy, ramki informacyjne). */
.doc-body .draft{ margin:20px 0; padding:14px 18px; border-left:4px solid var(--c-warn, #9a6a00);
  background:var(--c-warn-bg, #fdf5e5); border-radius:8px; }
.doc-body .box{ margin:16px 0; padding:14px 18px; background:var(--c-bg-alt, #f5f5f7);
  border:1px solid var(--c-border, #d2d2d7); border-radius:10px; }
.doc-body .meta{ color:var(--c-muted, #6e6e73); font-size:14px; margin:0 0 8px; }
.doc-body table{ width:100%; border-collapse:collapse; margin:16px 0; }
.doc-body th,.doc-body td{ text-align:left; vertical-align:top;
  border:1px solid var(--c-border, #d2d2d7); padding:8px 10px; }
.doc-body th{ background:var(--c-bg-alt, #f5f5f7); }
.doc-body ol,.doc-body ul{ padding-left:22px; }

/* ---------- Pasek metod płatności (stopka, płatności, checkout) ---------- */
.pay-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:22px;
  padding:22px 0; margin-top:8px; border-top:1px solid rgba(255,255,255,.14); }
.pay-strip img{ height:26px; width:auto; display:block; flex:none;
  /* Logotypy są w wersji na jasne tło — stopka jest ciemna, więc podkładamy biel. */
  background:#fff; border-radius:5px; padding:5px 8px; }
.pay-strip-label{ font-size:13px; opacity:.7; margin-right:4px; flex:none; }
@media (max-width:640px){
  .pay-strip{ gap:14px; }
  .pay-strip img{ height:22px; }
}

/* Wariant na jasnym tle — strona „Płatności i raty" oraz checkout. */
.pay-strip.on-light{ border-top:1px solid var(--line, #e5e5ea); }
.pay-strip.on-light img{ background:transparent; padding:0; height:30px; }
.pay-strip.on-light .pay-strip-label{ opacity:1; color:var(--muted, #6e6e73); }

/* Znacznik „Raty PayU" przy widgecie rat i na kartach produktów. */
.pay-badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 12px;
  border:1px solid var(--line, #e5e5ea); border-radius:999px; background:#fff;
  font-size:13px; color:var(--muted, #6e6e73); }
.pay-badge img{ height:18px; width:auto; display:block; }