/* ============================================================
   WITRYNA — front sklepu: strona główna, katalog, karta produktu,
   poradnik. Prefiks `.w-`. Wszystkie wartości z tokens.css.

   Akcent jest tu ten sam co w koszyku, koncie i panelu:
   `--c-cert-deep`. Wcześniej strony treściowe stały na
   `--c-brand-600`, więc na jednej stronie potrafiły być dwa
   różne błękity — link w jednym, przycisk w drugim.

   Rytm pionowy: jedna zmienna `--w-sekcja` zamiast doklejanych
   marginesów w szablonach.
   ============================================================ */
:root{ --w-sekcja:var(--s-7); --w-radius:14px }
@media(min-width:48rem){ :root{ --w-sekcja:var(--s-8) } }

/* ── pasma i sekcje ─────────────────────────────────────────────────────── */
.w-pas{background:var(--c-bg-2);border-block:1px solid var(--c-line)}
.w-pas + .w-pas{border-top:0}
.w-sekcja{padding-block:var(--w-sekcja)}
.w-sekcja-glowa{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-5)}
.w-sekcja-glowa h2{margin:0}
.w-sekcja-glowa p{margin:var(--s-2) 0 0;color:var(--c-ink-2);max-width:40rem}
.w-kicker{display:block;font-family:var(--f-mono);font-size:var(--t-xs);font-weight:var(--fw-semibold);
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-cert-deep);margin-bottom:var(--s-2)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.w-hero{background:linear-gradient(180deg,var(--c-cert-soft) 0%,var(--c-bg) 78%);
  border-bottom:1px solid var(--c-line);padding-block:var(--s-7) var(--w-sekcja)}
.w-hero-grid{display:grid;gap:var(--s-6);grid-template-columns:1fr;align-items:start}
@media(min-width:62rem){.w-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-7)}}
.w-obietnica{display:inline-flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-4);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-full);background:var(--c-bg);
  border:1px solid var(--c-cert-line);color:var(--c-cert-deep);
  font-size:var(--t-sm);font-weight:var(--fw-semibold);box-shadow:var(--sh-1)}
.w-obietnica svg{width:16px;height:16px;flex:none}
.w-hero h1{font-size:clamp(2rem,6.5vw,3.5rem);line-height:1.04;letter-spacing:-.025em;
  margin:0 0 var(--s-4);max-width:18ch}
.w-hero .w-lead{font-size:var(--t-lg);color:var(--c-ink-2);line-height:1.55;max-width:36rem;margin:0}

.w-kotwica{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-5);padding:var(--s-4) var(--s-5);
  background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--w-radius);box-shadow:var(--sh-card)}
.w-kotwica > div{display:flex;flex-direction:column;gap:2px;min-width:8rem}
.w-kotwica > div + div{padding-left:var(--s-5);border-left:1px solid var(--c-line)}
.w-kotwica .etykieta{font-size:var(--t-xs);color:var(--c-ink-3);text-transform:uppercase;letter-spacing:.06em}
.w-kotwica .kwota{font-size:var(--t-2xl);font-weight:var(--fw-bold);color:var(--c-ink);
  line-height:1.1;font-variant-numeric:tabular-nums}

.w-akcje{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.w-akcje .btn{flex:1 1 auto;min-width:13rem}
@media(min-width:36rem){.w-akcje .btn{flex:0 0 auto}}

.w-sygnaly{display:grid;gap:var(--s-4);margin-top:var(--s-6);padding-top:var(--s-5);
  border-top:1px solid var(--c-line);grid-template-columns:1fr}
@media(min-width:34rem){.w-sygnaly{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}}
.w-sygnaly > div{display:flex;gap:var(--s-3);align-items:flex-start}
.w-sygnaly svg{width:20px;height:20px;flex:none;color:var(--c-cert-deep);margin-top:2px}
.w-sygnaly p{margin:0;font-size:var(--t-sm);font-weight:var(--fw-semibold);color:var(--c-ink);line-height:1.4}
.w-sygnaly span{display:block;font-weight:var(--fw-normal);color:var(--c-ink-3);margin-top:2px}

.w-wizual{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--w-radius);
  padding:var(--s-5);box-shadow:var(--sh-card)}
.w-wizual svg{width:100%;height:auto}
.w-fakty{display:grid;gap:var(--s-3);margin:var(--s-5) 0 0;padding-top:var(--s-4);
  border-top:1px solid var(--c-line)}
.w-fakty > div{display:flex;justify-content:space-between;gap:var(--s-4);font-size:var(--t-sm)}
.w-fakty dt{color:var(--c-ink-3)}
.w-fakty dd{margin:0;font-weight:var(--fw-semibold);color:var(--c-ink);text-align:right}

/* ── karty ──────────────────────────────────────────────────────────────── */
.w-siatka{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:34rem){.w-siatka{grid-template-columns:repeat(2,1fr)}}
@media(min-width:60rem){.w-siatka-3{grid-template-columns:repeat(3,1fr)}}
.w-karta{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);background:var(--c-bg);
  border:1px solid var(--c-line);border-radius:var(--w-radius);
  transition:border-color var(--m-base) var(--m-ease),box-shadow var(--m-base) var(--m-ease)}
.w-karta:hover{border-color:var(--c-cert);box-shadow:var(--sh-2)}
.w-karta h3{margin:0;font-size:var(--t-lg)}
.w-karta h3 a{color:var(--c-ink)}
.w-karta h3 a:hover{color:var(--c-cert-deep);text-decoration:none}
.w-karta p{margin:0;font-size:var(--t-sm);color:var(--c-ink-2);line-height:1.55}
.w-karta > svg{width:28px;height:28px;color:var(--c-cert-deep);margin-bottom:var(--s-1)}
.w-karta-stopka{margin-top:auto;padding-top:var(--s-4)}

/* ── karta produktu na liście ───────────────────────────────────────────── */
/* Telefon: układ poziomy — miniatura 84 px z boku. 44 karty w pionowych
   kafelkach dawały stronę wysoką na 21 000 px i nikt nie doscrollował. */
.w-prod{display:grid;grid-template-columns:84px minmax(0,1fr);gap:var(--s-4);align-items:center;
  padding:var(--s-4);background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--w-radius);
  transition:border-color var(--m-base) var(--m-ease),box-shadow var(--m-base) var(--m-ease)}
.w-prod:hover{border-color:var(--c-cert);box-shadow:var(--sh-2)}
.w-prod-foto{display:block;width:84px;height:84px;border-radius:var(--r-lg);background:var(--c-bg-2);
  overflow:hidden;flex:none}
.w-prod-foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.w-prod-tresc{min-width:0;display:flex;flex-direction:column;gap:var(--s-1)}
.w-prod h3{margin:0;font-size:var(--t-base);line-height:1.35;letter-spacing:-.01em}
.w-prod h3 a{color:var(--c-ink)}
.w-prod h3 a:hover{color:var(--c-cert-deep);text-decoration:none}
.w-prod-opis{display:none}
.w-prod-cena{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;margin-top:2px}
.w-prod-cena b{font-size:var(--t-lg);font-weight:var(--fw-bold);color:var(--c-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.w-prod-cena small{font-size:var(--t-xs);color:var(--c-ink-3)}
.w-prod-od{font-size:var(--t-sm);font-weight:var(--fw-medium);color:var(--c-ink-3);margin-right:2px}

@media(min-width:34rem){
  /* Od tabletu karta wraca do pionu — jest miejsce na zdjęcie i opis. */
  .w-prod{grid-template-columns:1fr;align-items:stretch;gap:var(--s-3)}
  .w-prod-foto{width:100%;height:9.5rem}
  .w-prod-opis{display:block;font-size:var(--t-sm);color:var(--c-ink-2);margin:0;line-height:1.5}
  .w-prod-cena{margin-top:auto;padding-top:var(--s-3)}
  .w-prod-tresc{gap:var(--s-2);flex:1}
}

.w-prod .w-odznaka,.w-karta .w-odznaka{align-self:flex-start}
.w-odznaka{display:inline-block;font-size:var(--t-xs);font-weight:var(--fw-semibold);
  padding:2px var(--s-2);border-radius:var(--r-full);border:1px solid}
.w-odznaka-szkic{background:var(--c-warn-100);border-color:var(--c-warn-line);color:var(--c-warn-700)}
.w-odznaka-ok{background:var(--c-ok-100);border-color:var(--c-ok-700);color:var(--c-ok-700)}
.w-odznaka-warn{background:var(--c-warn-100);border-color:var(--c-warn-line);color:var(--c-warn-700)}
.w-odznaka-crit{background:var(--c-err-100);border-color:var(--c-err-700);color:var(--c-err-700)}

/* ── kafle kategorii ────────────────────────────────────────────────────── */
.w-kat{display:flex;flex-direction:column;background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:var(--w-radius);overflow:hidden;min-height:44px;
  transition:border-color var(--m-base) var(--m-ease),box-shadow var(--m-base) var(--m-ease)}
.w-kat:hover{border-color:var(--c-cert);box-shadow:var(--sh-2);text-decoration:none}
.w-kat-foto{display:block;background:var(--c-cert-soft);border-bottom:1px solid var(--c-line)}
.w-kat-foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.w-kat-tresc{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4) var(--s-5)}
@media(max-width:34rem){
  .w-siatka-kat{grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
  .w-siatka-kat .w-kat-tresc{padding:var(--s-3)}
  .w-siatka-kat .w-kat-tresc span{display:none}
  .w-siatka-kat b{font-size:var(--t-sm)}
}
.w-kat b{color:var(--c-ink);font-size:var(--t-base);font-weight:var(--fw-semibold)}
.w-kat span{color:var(--c-ink-2);font-size:var(--t-sm);line-height:1.5}
.w-kat em{font-style:normal;color:var(--c-ink-3);font-size:var(--t-xs)}

/* ── strony (paginacja) ─────────────────────────────────────────────────── */
.w-strony{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;justify-content:center;
  margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--c-line)}
.w-strony a,.w-strony span{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 var(--s-3);border-radius:var(--r-lg);
  font-size:var(--t-sm);font-weight:var(--fw-medium);border:1px solid var(--c-line-2);color:var(--c-ink-2)}
.w-strony a:hover{border-color:var(--c-cert);color:var(--c-cert-deep);text-decoration:none;background:var(--c-cert-soft)}
.w-strony [aria-current="page"]{background:var(--c-cert-deep);border-color:var(--c-cert-deep);color:#fff}
.w-strony .w-strony-info{border:0;color:var(--c-ink-3);min-width:0}

/* ── kroki ──────────────────────────────────────────────────────────────── */
.w-kroki{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:var(--s-5);grid-template-columns:1fr;counter-reset:krok}
@media(min-width:40rem){.w-kroki{grid-template-columns:repeat(2,1fr);gap:var(--s-6)}}
@media(min-width:64rem){.w-kroki{grid-template-columns:repeat(4,1fr)}}
.w-kroki li{position:relative;padding-top:var(--s-5)}
.w-kroki li::before{counter-increment:krok;content:counter(krok,decimal-leading-zero);
  position:absolute;top:0;left:0;font-family:var(--f-mono);font-size:var(--t-sm);
  font-weight:var(--fw-semibold);color:var(--c-cert-deep);letter-spacing:.08em}
.w-kroki li::after{content:"";position:absolute;top:var(--s-2);left:2.6rem;right:0;height:1px;
  background:var(--c-cert-line)}
@media(max-width:64rem){.w-kroki li::after{display:none}}
.w-kroki li:last-child::after{display:none}
.w-kroki h3{margin:0 0 var(--s-2);font-size:var(--t-base)}
.w-kroki p{margin:0;font-size:var(--t-sm);color:var(--c-ink-2);line-height:1.55}

/* ── kafle sprzętu ──────────────────────────────────────────────────────── */
.w-kafle{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4);grid-template-columns:repeat(2,1fr)}
@media(min-width:60rem){.w-kafle{grid-template-columns:repeat(4,1fr)}}
.w-kafle li{display:flex;flex-direction:column;background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:var(--w-radius);overflow:hidden}
.w-kafle .art{display:flex;align-items:center;justify-content:center;padding:var(--s-5);
  background:var(--c-bg-2);color:var(--c-ink-3)}
.w-kafle .art svg{width:56px;height:56px}
.w-kafle .opis{padding:var(--s-4)}
.w-kafle h3{margin:0 0 2px;font-size:var(--t-sm)}
.w-kafle h3 a{color:var(--c-ink)}
.w-kafle h3 a:hover{color:var(--c-cert-deep);text-decoration:none}
.w-kafle p{margin:0;font-size:var(--t-xs);color:var(--c-ink-3)}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.w-faq-uklad{display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media(min-width:62rem){.w-faq-uklad{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-7)}}
.w-faq{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.w-faq li{padding:var(--s-4) var(--s-5);background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:var(--w-radius)}
.w-faq h3{margin:0 0 var(--s-2);font-size:var(--t-base)}
.w-faq p{margin:0;font-size:var(--t-sm);color:var(--c-ink-2);line-height:1.6}

/* ── pas z wezwaniem ────────────────────────────────────────────────────── */
.w-cta{background:var(--c-bg-dark);color:var(--c-ink-inv)}
.w-cta .wrap{display:flex;flex-wrap:wrap;gap:var(--s-5);align-items:center;justify-content:space-between;
  padding-block:var(--s-7)}
.w-cta h2{margin:0 0 var(--s-2);color:var(--c-ink-inv);font-size:var(--t-2xl)}
.w-cta p{margin:0;color:var(--c-ink-inv-2);max-width:38rem}
.w-cta .w-akcje{margin-top:0}
.w-cta .btn-secondary{background:transparent;color:var(--c-ink-inv);border-color:var(--c-ink-inv-3)}
.w-cta .btn-secondary:hover{background:rgba(255,255,255,.08);color:var(--c-ink-inv);border-color:var(--c-ink-inv)}

/* ── poradnik ───────────────────────────────────────────────────────────── */
.w-wpisy{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media(min-width:40rem){.w-wpisy{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.w-wpisy{grid-template-columns:repeat(3,1fr)}}
.w-wpis{display:flex;flex-direction:column;background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:var(--w-radius);overflow:hidden;
  transition:border-color var(--m-base) var(--m-ease),box-shadow var(--m-base) var(--m-ease)}
.w-wpis:hover{border-color:var(--c-cert);box-shadow:var(--sh-2)}
.w-wpis-okladka{display:block;aspect-ratio:16/9;background:var(--c-bg-2);overflow:hidden}
.w-wpis-okladka img{width:100%;height:100%;object-fit:cover}
.w-wpis-tresc{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.w-wpis time{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--c-ink-3);letter-spacing:.04em}
.w-wpis h3,.w-wpis h2{margin:0;font-size:var(--t-lg);line-height:1.3}
.w-wpis h3 a,.w-wpis h2 a{color:var(--c-ink)}
.w-wpis h3 a:hover,.w-wpis h2 a:hover{color:var(--c-cert-deep);text-decoration:none}
.w-wpis p{margin:0;font-size:var(--t-sm);color:var(--c-ink-2);line-height:1.55}
.w-wpis-wiecej{margin-top:auto;padding-top:var(--s-3);font-size:var(--t-sm);
  font-weight:var(--fw-semibold);color:var(--c-cert-deep)}

.w-artykul{max-width:var(--w-prose)}
.w-artykul .meta{display:flex;gap:var(--s-3);align-items:center;font-family:var(--f-mono);
  font-size:var(--t-xs);color:var(--c-ink-3);letter-spacing:.04em;margin-bottom:var(--s-5)}
.w-artykul-okladka{margin:0 0 var(--s-6);border-radius:var(--w-radius);overflow:hidden;background:var(--c-bg-2)}
.w-artykul-okladka img{width:100%;height:auto}
.w-dalej{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;
  margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--c-line)}
.w-dalej a{display:flex;flex-direction:column;gap:2px;max-width:22rem;min-height:44px;justify-content:center}
.w-dalej span{font-size:var(--t-xs);color:var(--c-ink-3);text-transform:uppercase;letter-spacing:.06em}
.w-dalej b{font-weight:var(--fw-semibold);font-size:var(--t-sm);color:var(--c-cert-deep)}
.w-dalej a:hover b{text-decoration:underline}

/* ── karta produktu (strona) ────────────────────────────────────────────── */
.w-produkt{display:grid;gap:var(--s-6);grid-template-columns:1fr;align-items:start}
@media(min-width:62rem){
  .w-produkt{grid-template-columns:minmax(0,1fr) 20rem;gap:var(--s-7)}
  .w-produkt-media{grid-column:1;grid-row:1}
  .w-produkt-opis{grid-column:1;grid-row:2}
  .w-buybox{grid-column:2;grid-row:1/span 2;position:sticky;top:var(--s-6)}
}
@media(min-width:74rem){
  .w-produkt{grid-template-columns:22rem minmax(0,1fr) 20rem}
  .w-produkt-media{grid-column:1;grid-row:1}
  .w-produkt-opis{grid-column:2;grid-row:1}
  .w-buybox{grid-column:3;grid-row:1}
}
.w-produkt-media{margin:0}
.w-produkt-glowne{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--w-radius);
  padding:var(--s-5);display:flex;align-items:center;justify-content:center;aspect-ratio:1}
.w-produkt-glowne img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.w-mini{display:flex;gap:var(--s-2);margin-top:var(--s-3);flex-wrap:wrap}
.w-mini button{width:56px;height:56px;padding:4px;background:var(--c-bg);border:1px solid var(--c-line-2);
  border-radius:var(--r-lg);cursor:pointer}
.w-mini button[aria-current="true"]{border-color:var(--c-cert-deep);box-shadow:0 0 0 1px var(--c-cert-deep)}
.w-mini img{width:100%;height:100%;object-fit:contain}
.w-produkt h1{font-size:clamp(1.6rem,4.5vw,2.25rem);margin-bottom:var(--s-3)}
.w-produkt .w-lead{font-size:var(--t-lg);color:var(--c-ink-2);margin:0 0 var(--s-5);line-height:1.55}

.w-warianty{margin:0 0 var(--s-5)}
.w-warianty-etykieta{display:block;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--c-ink-3);margin-bottom:var(--s-2)}
/* Kafel dopasowuje sie do tresci. Sztywne 6,5 rem sprawialo, ze etykieta „5"
   zajmowala tyle co „Z czytnikiem USB typu A" — dziewiec liczb rozlazilo sie
   na trzy rzedy. Wysokosc 44 px zostaje: to minimum dla palca. */
.w-wariant{display:inline-flex;flex-direction:column;gap:2px;padding:var(--s-2) var(--s-4);
  border:1px solid var(--c-line-2);border-radius:var(--r-lg);color:var(--c-ink);min-width:0;
  min-height:44px;justify-content:center;margin:0 var(--s-2) var(--s-2) 0;text-align:center}
.w-wariant b{font-size:var(--t-sm);font-weight:var(--fw-semibold)}
.w-wariant small{font-size:var(--t-xs);color:var(--c-ink-3)}
.w-wariant:hover{border-color:var(--c-cert);text-decoration:none;background:var(--c-cert-soft)}
.w-wariant-off{opacity:.45;pointer-events:none}
.w-wariant[aria-current="page"]{border-color:var(--c-cert-deep);background:var(--c-cert-soft);
  box-shadow:inset 0 0 0 1px var(--c-cert-deep)}

.w-specy{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-5);margin:0;
  font-size:var(--t-sm);padding-top:var(--s-4);border-top:1px solid var(--c-line)}
.w-specy dt{color:var(--c-ink-3)}
.w-specy dd{margin:0;color:var(--c-ink)}

.w-buybox{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--w-radius);
  padding:var(--s-5);box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:var(--s-3)}
.w-buybox .kwota{font-size:var(--t-3xl);font-weight:var(--fw-bold);line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.w-buybox .netto{margin:0;font-size:var(--t-sm);color:var(--c-ink-3)}
.w-buybox form{margin:0}
.w-buybox .w-odznaka{align-self:flex-start}
.w-buybox .uwaga{margin:0;font-size:var(--t-xs);color:var(--c-ink-3);line-height:1.5}

/* ── uwagi ──────────────────────────────────────────────────────────────── */
.w-uwaga{display:flex;gap:var(--s-3);padding:var(--s-4);border-radius:var(--w-radius);
  border:1px solid var(--c-warn-line);background:var(--c-warn-100);color:var(--c-warn-700);
  font-size:var(--t-sm);line-height:1.55;margin:0 0 var(--s-5)}
.w-pusto{padding:var(--s-7) var(--s-5);text-align:center;color:var(--c-ink-3);
  border:1px dashed var(--c-line-2);border-radius:var(--w-radius)}

/* ── pasmo kategorii na stronie glownej ─────────────────────────────── */
.w-pasmo{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4);
  grid-template-columns:repeat(2,1fr)}
@media(min-width:40rem){.w-pasmo{grid-template-columns:repeat(4,1fr)}}
.w-pasmo a{display:flex;flex-direction:column;background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:var(--w-radius);overflow:hidden;height:100%;
  transition:border-color var(--m-base) var(--m-ease),box-shadow var(--m-base) var(--m-ease)}
.w-pasmo a:hover{border-color:var(--c-cert);box-shadow:var(--sh-2);text-decoration:none}
.w-pasmo-foto{display:block;background:var(--c-cert-soft)}
.w-pasmo-foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.w-pasmo b{display:block;padding:var(--s-3) var(--s-4);font-size:var(--t-sm);
  font-weight:var(--fw-semibold);color:var(--c-ink);line-height:1.35}

/* ── ilustracja na karcie („dla kogo”) ──────────────────────────────── */
.w-karta-ilustracja{display:block;width:auto;aspect-ratio:3/2;object-fit:cover;
  margin:calc(-1*var(--s-5)) calc(-1*var(--s-5)) var(--s-4);
  border-bottom:1px solid var(--c-line)}

/* ── naglowek kategorii z ilustracja ────────────────────────────────── */
.w-kat-glowa{display:grid;gap:var(--s-5);align-items:center;grid-template-columns:1fr}
@media(min-width:48rem){.w-kat-glowa{grid-template-columns:minmax(0,1fr) 15rem}}
.w-kat-glowa h1{margin-bottom:var(--s-3)}
.w-kat-opis{max-width:44rem;color:var(--c-ink-2);font-size:var(--t-lg);line-height:1.55;margin:0}
.w-kat-glowa-foto{display:block;width:100%;height:auto;border-radius:var(--w-radius);
  border:1px solid var(--c-line)}

/* ── strona kontaktu ────────────────────────────────────────────────── */
.w-kontakt-glowa{max-width:46rem;margin-bottom:var(--s-6)}
.w-kontakt-glowa h1{margin:var(--s-2) 0 var(--s-3)}
.w-kontakt{display:grid;gap:var(--s-5);align-items:start;grid-template-columns:1fr}
@media(min-width:60rem){.w-kontakt{grid-template-columns:21rem minmax(0,1fr);gap:var(--s-6)}}
.w-kontakt-karta{background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:var(--w-radius);box-shadow:var(--sh-card);padding:var(--s-5)}
@media(min-width:48rem){.w-kontakt-karta{padding:var(--s-6)}}
.w-kontakt-karta h2{margin:0 0 var(--s-4);font-size:var(--t-xl)}
.w-kontakt-sub{margin:calc(-1*var(--s-2)) 0 var(--s-5);color:var(--c-ink-2);
  font-size:var(--t-sm);line-height:1.55}

.w-dane{list-style:none;margin:0;padding:0}
.w-dane li{display:flex;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-4) 0;border-top:1px solid var(--c-line)}
.w-dane li:first-child{border-top:0;padding-top:0}
.w-dane li:last-child{padding-bottom:0}
.w-dane-ico{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--c-cert-soft);color:var(--c-cert-deep)}
.w-dane-ico svg{width:18px;height:18px}
.w-dane-tresc{min-width:0}
.w-dane-etykieta{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-ink-3);font-weight:var(--fw-semibold);margin-bottom:3px}
.w-dane-wartosc{display:block;font-size:var(--t-base);font-weight:var(--fw-semibold);
  color:var(--c-ink);line-height:1.4;overflow-wrap:anywhere}
a.w-dane-wartosc:hover{color:var(--c-cert-deep)}
.w-dane-mapa{display:inline-flex;align-items:center;gap:5px;margin-top:5px;
  font-size:var(--t-sm);font-weight:var(--fw-medium)}
.w-dane-mapa svg{width:15px;height:15px;flex:none}
.w-kontakt-nota{margin:var(--s-5) 0 0;padding:var(--s-4);border-radius:12px;
  background:var(--c-cert-soft);color:var(--c-ink-2);font-size:var(--t-sm);line-height:1.55}

/* Formularz jest tu w karcie, wiec nie ogranicza go juz 44 rem z `.s-formularz`. */
.w-kontakt-form .s-formularz{max-width:none;margin-top:0}
.w-zgoda{grid-column:1/-1;display:flex;gap:var(--s-3);align-items:flex-start;
  font-size:var(--t-sm);line-height:1.5;color:var(--c-ink-2)}
.w-zgoda input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--c-cert-deep)}
.w-zgoda label{margin:0;cursor:pointer}
.w-zgoda b{color:var(--c-err-700)}
.w-zgoda-blad{padding:var(--s-3);margin:calc(-1*var(--s-3));border-radius:10px;
  background:var(--c-err-100,#FDECEC)}

.w-kontakt-stopka{display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media(min-width:48rem){.w-kontakt-stopka{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.w-kontakt-stopka h2{margin:0 0 var(--s-3);font-size:var(--t-lg)}
.w-kontakt-stopka p{margin:0;color:var(--c-ink-2);line-height:1.6}
.w-kontakt-firma{margin:var(--s-4) 0 0;padding-top:var(--s-4);border-top:1px solid var(--c-line);
  color:var(--c-ink-3);font-size:var(--t-sm);line-height:1.5}

/* ── oprogramowanie do pobrania ─────────────────────────────────────── */
.w-oprogramowanie .w-karta{display:flex;flex-direction:column;gap:var(--s-2)}
.w-soft-systemy{display:flex;gap:var(--s-2);color:var(--c-ink-3);margin-bottom:var(--s-2)}
.w-os-ikona{width:20px;height:20px;flex:none}
.w-soft .w-soft-podtytul{margin:0;font-size:var(--t-sm);color:var(--c-ink-3)}
.w-soft h2{margin:0;font-size:var(--t-lg);line-height:1.3}
.w-soft p{margin:0;color:var(--c-ink-2);font-size:var(--t-sm);line-height:1.55}
.w-soft-stopka{margin-top:auto!important;padding-top:var(--s-4);display:flex;
  align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.w-soft-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);
  font-weight:var(--fw-semibold)}
.w-soft-link svg{width:15px;height:15px}
.w-soft-stopka small{color:var(--c-ink-3);font-size:var(--t-xs);white-space:nowrap}
.w-soft-pomoc{display:flex;align-items:flex-start}

.w-soft-uklad{display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media(min-width:62rem){.w-soft-uklad{grid-template-columns:minmax(0,1fr) 20rem;gap:var(--s-7)}}
.w-soft-tresc h1{margin:var(--s-2) 0 var(--s-3)}
.w-soft-tresc h2{margin:var(--s-7) 0 var(--s-4);font-size:var(--t-xl)}
.w-soft-akapit{margin:0 0 var(--s-4);color:var(--c-ink-2);line-height:1.65;max-width:44rem}

.w-soft-grupa{border:1px solid var(--c-line);border-radius:var(--w-radius);
  padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4);background:var(--c-bg)}
.w-soft-grupa-glowa{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.w-soft-ikona{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--c-cert-soft);color:var(--c-cert-deep)}
.w-soft-grupa-glowa h3{margin:0;font-size:var(--t-base)}
.w-soft-wersja{margin:2px 0 0;font-size:var(--t-sm);color:var(--c-ink-3)}
.w-soft-przyciski{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.w-soft-btn{min-height:44px;padding-inline:var(--s-4);font-size:var(--t-sm)}
.w-soft-btn svg{width:17px;height:17px}
.w-soft-opis{margin:var(--s-3) 0 0;font-size:var(--t-sm);color:var(--c-ink-3);line-height:1.55}

.w-soft-specy{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-5);
  margin:0;font-size:var(--t-sm)}
.w-soft-specy dt{color:var(--c-ink-3)}
.w-soft-specy dd{margin:0;font-weight:var(--fw-medium);color:var(--c-ink)}

.w-soft-bok{display:flex;flex-direction:column;gap:var(--s-4)}
@media(min-width:62rem){.w-soft-bok{position:sticky;top:8.5rem;align-self:start}}
.w-soft-karta{border:1px solid var(--c-line);border-radius:var(--w-radius);
  padding:var(--s-5);background:var(--c-bg);box-shadow:var(--sh-card)}
.w-soft-karta h2{margin:0 0 var(--s-3);font-size:var(--t-base)}
.w-soft-karta p{margin:0 0 var(--s-4);font-size:var(--t-sm);color:var(--c-ink-2);line-height:1.55}
.w-soft-inne{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.w-soft-inne a{display:flex;flex-direction:column;padding:var(--s-3);border-radius:10px;color:var(--c-ink)}
.w-soft-inne a:hover{background:var(--c-cert-soft);text-decoration:none}
.w-soft-inne span{font-size:var(--t-sm);font-weight:var(--fw-semibold)}
.w-soft-inne small{font-size:var(--t-xs);color:var(--c-ink-3)}
.w-soft-karta-pomoc{background:var(--c-cert-soft);border-color:transparent}
.w-soft-telefon{margin:var(--s-3) 0 0!important;text-align:center;font-weight:var(--fw-semibold)}

/* ── zwijany wiersz wariantow ───────────────────────────────────────── */
.w-zwin{border:1px solid var(--c-line);border-radius:var(--w-radius);padding:var(--s-3) var(--s-4)}
.w-zwin > summary{display:flex;align-items:baseline;gap:var(--s-3);cursor:pointer;
  list-style:none;min-height:36px}
.w-zwin > summary::-webkit-details-marker{display:none}
.w-zwin > summary:focus-visible{outline:2px solid var(--c-cert);outline-offset:3px;border-radius:6px}
.w-zwin .w-warianty-etykieta{margin:0}
.w-zwin-biezaca{font-size:var(--t-base);font-weight:var(--fw-semibold);color:var(--c-ink)}
.w-zwin-zmien{margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  font-size:var(--t-sm);font-weight:var(--fw-semibold);color:var(--c-cert-deep)}
.w-zwin-zmien svg{width:14px;height:14px;transition:transform var(--m-fast) var(--m-ease)}
.w-zwin[open] .w-zwin-zmien svg{transform:rotate(180deg)}
.w-zwin-lista{display:flex;flex-wrap:wrap;gap:0;padding-top:var(--s-4);margin-top:var(--s-3);
  border-top:1px solid var(--c-line)}

/* Dodatek w buyboksie (usluga wydania). Nie wyglada jak wiersz wariantow —
   i nie powinien: wariant zmienia produkt, dodatek dokłada osobną pozycję. */
.w-dodatek{border:1px solid var(--c-line);border-radius:12px;padding:.75rem .85rem;
  margin:.25rem 0 .9rem;display:grid;gap:.15rem}
.w-dodatek legend{font-size:.82rem;font-weight:600;color:var(--c-ink-2);padding:0 .3rem}
.w-dodatek-poz{display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:.55rem;padding:.45rem .3rem;border-radius:8px;cursor:pointer}
.w-dodatek-poz:hover{background:var(--c-bg-2)}
.w-dodatek-poz input{margin-top:.2rem;accent-color:var(--c-cert-deep)}
.w-dodatek-poz:focus-within{outline:2px solid var(--c-cert-deep);outline-offset:1px}
.w-dodatek-nazwa{font-size:.9rem;line-height:1.35}
.w-dodatek-nazwa small{display:block;font-size:.78rem;color:var(--c-ink-2);margin-top:.15rem}
.w-dodatek-cena{font-size:.88rem;font-weight:600;white-space:nowrap;color:var(--c-cert-deep)}
.w-dodatek-naglowek{margin:.6rem .3rem .1rem;font-size:.82rem;font-weight:600;color:var(--c-ink)}
.w-dodatek-zawiera{margin:0 .3rem .35rem;font-size:.78rem;line-height:1.45;color:var(--c-ink-2)}
.w-dodatek-cena-zero{color:var(--c-ink-2);font-weight:500}
.w-dodatek-stopka{margin:.35rem .3rem 0;font-size:.75rem;color:var(--c-ink-3)}

/* Opis produktu z panelu — pod siatka karty, szerokosc kolumny tekstu. */
.w-produkt-tresc{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--c-line);max-width:var(--w-prose)}
.w-produkt-tresc>h2{margin:0 0 var(--s-4)}
.w-produkt-tresc .prose>:first-child{margin-top:0}
.w-produkt-tresc .prose h2{font-size:1.2rem;margin-top:var(--s-6)}
.w-produkt-tresc .prose h3{font-size:1.05rem}