/* KOMPONENTY. Wszystkie wartości z tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-sans);font-size:var(--t-base);line-height:var(--lh-base);
  color:var(--c-ink);background:var(--c-bg);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:var(--lh-tight);font-weight:var(--fw-bold);letter-spacing:-.015em;margin:0 0 var(--s-3)}
h1{font-size:var(--t-3xl)} h2{font-size:var(--t-2xl)} h3{font-size:var(--t-lg)}
p{margin:0 0 var(--s-4)}
a{color:var(--c-cert-deep);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--c-cert);
  outline-offset:2px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-9999px;top:0;background:var(--c-brand-900);color:#fff;
  padding:var(--s-3) var(--s-4);z-index:99}
.skip:focus{left:0}
.wrap{max-width:var(--w-page);margin:0 auto;padding-inline:var(--s-5)}
main.wrapped{padding-block:var(--s-7) var(--s-8)}
main.flush{padding-block:0}
main.flush + .site-footer{margin-top:0}
.prose{max-width:var(--w-prose)}
.prose h2{margin-top:var(--s-6)}
.prose ul,.prose ol{padding-left:var(--s-5)}
.prose code{background:var(--c-bg-2);padding:.1em .35em;border-radius:var(--r-sm);font-size:.9em}
.site-header{border-bottom:1px solid var(--c-line);background:var(--c-bg);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:var(--s-2);font-weight:var(--fw-bold);color:var(--c-ink);
  font-size:var(--t-lg);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand-mark{width:1.75rem;height:1.75rem;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);font:inherit;
  min-height:48px;font-size:var(--t-base);font-weight:var(--fw-semibold);padding:0 var(--s-5);
  border-radius:12px;border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background var(--m-fast) var(--m-ease),border-color var(--m-fast) var(--m-ease),color var(--m-fast) var(--m-ease)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--c-cert-deep);color:#fff;border-color:var(--c-cert-deep);
  box-shadow:0 1px 2px rgba(0,119,168,.25)}
.btn-primary:hover{background:var(--c-cert-deeper);border-color:var(--c-cert-deeper);color:#fff}
.btn-secondary{background:var(--c-bg);color:var(--c-ink-2);border-color:var(--c-line-2)}
.btn-secondary:hover{border-color:var(--c-cert);background:var(--c-cert-soft);color:var(--c-cert-deep)}
.btn-ghost{background:transparent;color:var(--c-ink-3);border-color:transparent}
.btn-ghost:hover{color:var(--c-ink-2);background:var(--c-bg-2)}
.btn-lg{min-height:54px;padding:0 var(--s-6)}
.btn-blok{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.crumbs{padding-block:var(--s-4) 0;font-size:var(--t-sm);color:var(--c-ink-3)}
.crumbs a{color:var(--c-ink-3)}
.crumbs a:hover{color:var(--c-brand-600)}
.crumbs span[aria-hidden]{padding-inline:var(--s-2);color:var(--c-line-2)}
.hero{padding-block:var(--s-8) var(--s-7);border-bottom:1px solid var(--c-line);
  background:var(--c-bg-2)}
.hero-grid{display:grid;gap:var(--s-7);grid-template-columns:1fr}
@media(min-width:60rem){.hero-grid{grid-template-columns:1.2fr .8fr;align-items:center}}
.hero h1{font-size:var(--t-3xl);margin-bottom:var(--s-4)}
@media(min-width:48rem){.hero h1{font-size:var(--t-4xl)}}
@media(min-width:64rem){.hero h1{font-size:var(--t-5xl)}}
.hero .lead{font-size:var(--t-lg);color:var(--c-ink-2);max-width:34rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-xs);
  font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.08em;
  color:var(--c-brand-700);background:var(--c-brand-100);padding:var(--s-1) var(--s-3);
  border-radius:var(--r-full);margin-bottom:var(--s-4)}
.panel{border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-bg);
  padding:var(--s-5);box-shadow:var(--sh-1)}
.panel h2{font-size:var(--t-lg);margin-bottom:var(--s-4)}
.panel-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.panel-list li{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--t-sm);color:var(--c-ink-2)}
.tick{flex:none;width:1.25rem;height:1.25rem;margin-top:.15rem;color:var(--c-ok-700)}
.trust{border-bottom:1px solid var(--c-line);background:var(--c-bg-2)}
.trust ul{display:grid;gap:var(--s-4);grid-template-columns:repeat(2,1fr);list-style:none;margin:0;padding:var(--s-5) 0}
@media(min-width:48rem){.trust ul{grid-template-columns:repeat(4,1fr)}}
.trust li{font-size:var(--t-sm);color:var(--c-ink-2)}
.trust strong{display:block;color:var(--c-ink);font-size:var(--t-base)}
.section{padding-block:var(--s-7)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}
.section-head p{color:var(--c-ink-2);margin:0}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:36rem){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:60rem){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-bg);padding:var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-2);
  transition:border-color var(--m-base) var(--m-ease),box-shadow var(--m-base) var(--m-ease)}
.card:hover{border-color:var(--c-brand-500);box-shadow:var(--sh-2)}
.card h3{margin:0}
.card h3 a{color:var(--c-ink)}
.card h3 a:hover{color:var(--c-brand-600);text-decoration:none}
.card p{color:var(--c-ink-2);font-size:var(--t-sm);margin:0}
.variants{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin:var(--s-4) 0 var(--s-5)}
.variants-label{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--c-ink-3);margin-right:var(--s-2)}
.variant{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-md);color:var(--c-ink);text-decoration:none;min-width:6.5rem}
.variant b{font-size:var(--t-sm);font-weight:var(--fw-semibold)}
.variant small{font-size:var(--t-xs);color:var(--c-ink-3)}
.variant:hover{border-color:var(--c-brand-600);text-decoration:none}
.variant-off{opacity:.45}
.variant[aria-current="page"]{border-color:var(--c-brand-600);background:var(--c-brand-050);box-shadow:inset 0 0 0 1px var(--c-brand-600)}

.card-foot{margin-top:auto;padding-top:var(--s-3)}
.price{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.price-main{font-size:var(--t-xl);font-weight:var(--fw-bold);letter-spacing:-.02em}
.price-xl .price-main{font-size:var(--t-3xl)}
.price-net{font-size:var(--t-sm);color:var(--c-ink-3)}
.badge{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--t-xs);
  font-weight:var(--fw-semibold);padding:var(--s-1) var(--s-3);border-radius:var(--r-full)}
.badge-draft{background:var(--c-warn-100);color:var(--c-warn-700)}
.badge-ok{background:var(--c-ok-100);color:var(--c-ok-700)}
.badge-info{background:var(--c-brand-100);color:var(--c-brand-700)}
.note{border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-4);
  font-size:var(--t-sm);margin-bottom:var(--s-5)}
.note-warn{background:var(--c-warn-100);border-color:var(--c-warn-line);color:var(--c-warn-700)}
.product{display:grid;gap:var(--s-7);grid-template-columns:1fr}
.product-media{margin:0;display:flex;flex-direction:column;gap:var(--s-3)}
.product-media>img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--s-4)}
.product-thumbs{display:flex;gap:var(--s-2);flex-wrap:wrap}
.product-thumb{width:4.5rem;height:4.5rem;padding:4px;border:1px solid var(--c-line-2);border-radius:var(--r-md);background:var(--c-bg);cursor:pointer}
.product-thumb img{width:100%;height:100%;object-fit:contain}
.product-thumb[aria-current="true"]{border-color:var(--c-brand-600);box-shadow:inset 0 0 0 1px var(--c-brand-600)}
.card-thumb{display:block;margin:calc(-1*var(--s-5)) calc(-1*var(--s-5)) var(--s-4);border-bottom:1px solid var(--c-line);border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--c-bg);padding:var(--s-4)}
.card-thumb img{display:block;width:100%;height:10rem;object-fit:contain}
@media(min-width:60rem){.product{grid-template-columns:1.3fr .7fr;align-items:start}.product-with-media{grid-template-columns:minmax(0,20rem) minmax(0,1fr) minmax(16rem,.7fr)}}
.buybox{border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--s-5);background:var(--c-bg);
  box-shadow:var(--sh-1);position:sticky;top:5rem}
.specs{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-5);margin:var(--s-5) 0 0;font-size:var(--t-sm)}
.specs dt{color:var(--c-ink-3)}
.specs dd{margin:0;color:var(--c-ink)}
.posts{list-style:none;margin:0;padding:0;max-width:var(--w-prose)}
.posts li{padding-block:var(--s-5);border-bottom:1px solid var(--c-line)}
.posts li:first-child{padding-top:0}
.posts h2{font-size:var(--t-xl);margin-bottom:var(--s-1)}
.posts h2 a{color:var(--c-ink)}
.posts h2 a:hover{color:var(--c-brand-600);text-decoration:none}
.posts p{color:var(--c-ink-2);margin:var(--s-2) 0 0}
time,.muted{color:var(--c-ink-3);font-size:var(--t-sm)}
.site-footer{border-top:1px solid var(--c-line);background:var(--c-bg-2);padding-block:var(--s-6);margin-top:var(--s-8)}
.footer-grid{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media(min-width:48rem){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.site-footer h2{font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--c-ink-3);margin-bottom:var(--s-3)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.site-footer a{color:var(--c-ink-2);font-size:var(--t-sm)}
.site-footer a:hover{color:var(--c-cert-deep)}
.legal{margin:var(--s-6) 0 0;padding-top:var(--s-4);border-top:1px solid var(--c-line);font-size:var(--t-sm);color:var(--c-ink-3)}
.center-page{text-align:center;padding-block:var(--s-9);max-width:36rem;margin-inline:auto}

/* ── Pasek informacyjny nad nagłówkiem ─────────────────────── */
.notice{background:var(--c-warn-100);color:var(--c-warn-700);border-bottom:1px solid var(--c-warn-line);font-size:var(--t-sm);font-weight:var(--fw-medium);padding-block:var(--s-2);text-align:center}
.topbar{background:var(--c-bg-dark);color:var(--c-ink-inv-2)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);min-height:2.75rem;flex-wrap:wrap}
.topbar .kicker{color:var(--c-ink-inv-2)}
.topbar-contact{display:flex;align-items:center;gap:var(--s-5);font-size:var(--t-sm)}
.topbar-contact a{color:var(--c-ink-inv);font-weight:var(--fw-medium);
  display:inline-flex;align-items:center;gap:var(--s-2)}
.topbar-contact span{color:var(--c-ink-inv-3)}
.topbar-contact svg{width:.95rem;height:.95rem;flex:none;color:var(--c-ink-inv-3)}

/* ── Etykieta sekcji (mono, wersaliki) ─────────────────────── */
.kicker{display:block;font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.09em;text-transform:uppercase;color:var(--c-cert-deep);
  margin-bottom:var(--s-3)}

/* ── Hero: odznaka obietnicy, kotwica cenowa, pas zaufania ── */
.promise{display:inline-flex;align-items:center;gap:var(--s-2);
  background:var(--c-brand-050);border:1px solid var(--c-brand-line);
  border-radius:var(--r-full);padding:var(--s-2) var(--s-4);margin-bottom:var(--s-5);
  font-size:var(--t-sm);font-weight:var(--fw-semibold);color:var(--c-brand-600)}
.promise svg{width:1rem;height:1rem;flex:none}
.price-anchor{display:flex;align-items:flex-end;gap:var(--s-6);margin-top:var(--s-5);flex-wrap:wrap}
.price-anchor .label{display:block;font-size:var(--t-xs);color:var(--c-ink-3)}
.price-anchor .amount{display:block;font-size:var(--t-2xl);font-weight:var(--fw-semibold);
  letter-spacing:-.025em;color:var(--c-ink);line-height:1.1}
.price-anchor .sep{width:1px;align-self:stretch;background:var(--c-line-2)}
.hero-signals{display:grid;gap:var(--s-5);grid-template-columns:1fr;
  margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--c-line)}
@media(min-width:36rem){.hero-signals{grid-template-columns:repeat(3,1fr)}}
.hero-signals div{display:flex;gap:var(--s-3);font-size:var(--t-sm);
  line-height:var(--lh-snug);color:var(--c-ink-2)}
.hero-signals svg{width:1.25rem;height:1.25rem;flex:none;margin-top:.15rem;color:var(--c-ink)}
.hero-signals span{color:var(--c-ink-3);display:block}
.hero-visual{border:1px solid var(--c-line);border-radius:var(--r-lg);
  background:var(--c-bg);padding:var(--s-5);box-shadow:var(--sh-3)}
.hero-visual svg{width:100%;height:auto}
.hero-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);
  margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--c-line)}
.hero-facts dt{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.07em;
  text-transform:uppercase;color:var(--c-ink-3)}
.hero-facts dd{margin:var(--s-1) 0 0;font-weight:var(--fw-semibold);font-size:var(--t-sm)}

/* ── Kroki „jak to działa" ─────────────────────────────────── */
.steps-band{background:var(--c-brand-050);border-block:1px solid var(--c-brand-line);
  padding-block:var(--s-7)}
.steps{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-5);
  grid-template-columns:1fr}
@media(min-width:36rem){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:60rem){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{border-top:2px solid var(--c-brand-300);padding-top:var(--s-4)}
.steps li:first-child{border-top-color:var(--c-brand-600)}
.steps .num{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--c-brand-600);
  display:block;margin-bottom:var(--s-3)}
.steps h3{font-size:var(--t-base);margin-bottom:var(--s-2)}
.steps p{font-size:var(--t-sm);color:var(--c-ink-2);margin:0}

/* ── Kafle sprzętu (piktogramy) ────────────────────────────── */
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4);grid-template-columns:repeat(2,1fr)}
@media(min-width:60rem){.tiles{grid-template-columns:repeat(4,1fr)}}
.tiles li{border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color var(--m-base) var(--m-ease)}
.tiles li:hover{border-color:var(--c-brand-500)}
.tile-art{background:var(--c-bg-3);display:flex;align-items:center;justify-content:center;
  padding:var(--s-6) 0;border-bottom:1px solid var(--c-line)}
.tile-art svg{width:4.5rem;height:4.5rem;color:var(--c-line-2)}
.tile-body{padding:var(--s-4)}
.tile-body h3{font-size:var(--t-base);margin-bottom:var(--s-1)}
.tile-body h3 a{color:var(--c-ink)}
.tile-body h3 a:hover{color:var(--c-brand-600);text-decoration:none}
.tile-body p{font-size:var(--t-sm);color:var(--c-ink-3);margin:0 0 var(--s-3)}

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-layout{display:grid;gap:var(--s-6);grid-template-columns:1fr}
@media(min-width:60rem){.faq-layout{grid-template-columns:1fr 2fr}}
.faq{list-style:none;margin:0;padding:0}
.faq li{border-top:1px solid var(--c-line-2);padding-block:var(--s-5)}
.faq li:last-child{border-bottom:1px solid var(--c-line-2)}
.faq h3{font-size:var(--t-lg);margin-bottom:var(--s-2)}
.faq p{color:var(--c-ink-2);margin:0}

/* ── Pas wezwania do kontaktu ──────────────────────────────── */
.cta-band{background:var(--c-bg-3);border-block:1px solid var(--c-line);padding-block:var(--s-6)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-5);flex-wrap:wrap}
.cta-band h2{margin-bottom:var(--s-2)}
.cta-band p{color:var(--c-ink-2);margin:0}
.cta-band .actions{display:flex;gap:var(--s-3);flex-wrap:wrap}

/* ── Sekcja na jasnoszarym tle ─────────────────────────────── */
.band{background:var(--c-bg-2);border-block:1px solid var(--c-line);padding-block:var(--s-7)}
.band .section{padding-block:0}

.brand-mark{color:var(--c-cert-deep)}
.hero-signals p{margin:0;font-weight:var(--fw-medium);color:var(--c-ink)}

.card-icon{width:1.75rem;height:1.75rem;color:var(--c-ink);margin-bottom:var(--s-1)}

/* ── Panel administracyjny ─────────────────────────────────── */
.note-ok{background:var(--c-ok-100);border-color:var(--c-ok-700);color:var(--c-ok-700)}

/* Konto klienta */
.konto-login{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media(min-width:50rem){.konto-login{grid-template-columns:1fr 1fr}}
.konto-box{max-width:40rem}
.konto-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);flex-wrap:wrap}
.konto-head h1{margin-bottom:var(--s-1)}
.fields-1{grid-template-columns:1fr!important}
.cart-table a{font-weight:var(--fw-medium)}

/* ── góra serwisu: pas marki + pas nawigacji z megamenu ─────────────────── */
/* Dwa pasy zamiast jednego: marka, konto i koszyk na górze, kategorie niżej.
   W jednym rzędzie było 13 pozycji i kategorie przewijały się poziomo. */
.site-glowa{display:flex;align-items:center;gap:var(--s-4);min-height:4rem}
.site-akcje{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.nav-akcja{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);
  border-radius:var(--r-full);color:var(--c-ink-2);font-size:var(--t-sm);font-weight:var(--fw-medium)}
.nav-akcja svg{width:20px;height:20px;flex:none}
.nav-akcja:hover{color:var(--c-cert-deep);background:var(--c-cert-soft);text-decoration:none}
.nav-akcja[aria-current="page"]{color:var(--c-cert-deep)}
.nav-cart{border:1px solid var(--c-line-2)}
.nav-cart-ile{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-full);
  background:var(--c-cert-deep);color:#fff;font-size:var(--t-xs);font-weight:var(--fw-semibold);
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.nav-hamburger{display:none;align-items:center;justify-content:center;width:42px;height:42px;
  margin-left:calc(-1*var(--s-2));border:0;background:none;color:var(--c-ink);cursor:pointer;border-radius:10px}
.nav-hamburger svg{width:22px;height:22px}
.nav-hamburger:hover{background:var(--c-bg-2)}

.site-nav{position:relative;border-top:1px solid var(--c-line)}
.nav-lista{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-lista::-webkit-scrollbar{display:none}
.nav-poz{display:flex}
.nav-poz > a{display:inline-flex;align-items:center;gap:5px;padding:var(--s-3) var(--s-3);
  font-size:var(--t-sm);font-weight:var(--fw-medium);color:var(--c-ink-2);white-space:nowrap;
  border-bottom:2px solid transparent}
.nav-poz > a:hover{color:var(--c-cert-deep);text-decoration:none}
.nav-poz > a[aria-current="page"]{color:var(--c-ink);border-bottom-color:var(--c-cert-deep)}
.nav-strzalka{width:13px;height:13px;flex:none;color:var(--c-ink-3);
  transition:transform var(--m-fast) var(--m-ease)}
/* Jedenascie pozycji (doszlo „Oprogramowanie”) nie miesci sie w jednym
   rzedzie przy typowych szerokosciach laptopow. Pas przewija sie w poziomie,
   ale menu, ktorego koniec trzeba znalezc scrollem, jest menu, ktorego sie
   nie widzi — wiec na weższych ekranach oddajemy odstepy, nie pozycje. */
@media(max-width:96rem){
  .nav-poz > a{padding-inline:var(--s-2);font-size:.8125rem;gap:4px}
  .nav-strzalka{width:12px;height:12px}
}
@media(max-width:72rem){
  .nav-poz > a{padding-inline:5px;font-size:.78rem}
}

/* Panel na całą szerokość, jak w sklepie Certum. Otwiera go najechanie myszą
   albo klawiatura (`:focus-within`) — bez skryptu, więc działa też wtedy,
   gdy JS się nie wykona. Na dotyku hover nie istnieje, a kafel jest zwykłym
   linkiem do kategorii — stąd `@media (hover:hover)`. */
.nav-panel{position:absolute;left:0;right:0;top:100%;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--m-fast) var(--m-ease),transform var(--m-fast) var(--m-ease),
             visibility var(--m-fast) var(--m-ease);z-index:30}
@media(hover:hover){
  .nav-poz-mega:hover > .nav-panel{opacity:1;visibility:visible;transform:none}
  .nav-poz-mega:hover > a{color:var(--c-cert-deep)}
  .nav-poz-mega:hover .nav-strzalka{transform:rotate(180deg)}
}
.nav-poz-mega:focus-within > .nav-panel{opacity:1;visibility:visible;transform:none}
/* Panel jest kartą o szerokości kolumny tekstu, nie pasem na całą szerokość —
   tak jak w sklepie Certum. `top:100%` bez odstępu, żeby nie dało się
   „wypaść" myszą między pasem a panelem. */
.nav-panel-karta{background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:var(--w-radius);box-shadow:0 20px 44px -22px rgba(35,31,32,.45);
  padding:var(--s-5);display:grid;gap:var(--s-5);
  grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
@media(max-width:80rem){.nav-panel-karta{grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:var(--s-4)}}
.nav-panel-opis{border-right:1px solid var(--c-line);padding-right:var(--s-5);
  display:flex;flex-direction:column;align-items:flex-start}
@media(max-width:80rem){.nav-panel-opis{padding-right:var(--s-4)}}
.nav-panel-opis h3{margin:0 0 var(--s-2);font-size:var(--t-lg);line-height:1.25}
.nav-panel-opis p{margin:0 0 var(--s-4);color:var(--c-ink-2);font-size:var(--t-sm);line-height:1.55}
.nav-panel-cta{margin-top:auto;min-height:42px;padding-inline:var(--s-4);font-size:var(--t-sm)}

/* Zawsze tyle kolumn, ile panel pokazuje produktow (`ILE_W_PANELU`).
   Przy trzech kolumnach czwarty kafel spadal do drugiego rzedu sam jak palec;
   kategoria z dwoma produktami zajmuje po prostu dwie pierwsze kolumny. */
.nav-karty{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);
  grid-template-columns:repeat(4,minmax(0,1fr))}
.nav-karty > li{display:flex}
/* Kafel to jeden link — zdjęcie, cena, nazwa i „Więcej” są jego częściami,
   więc nie ma zagnieżdżonych elementów klikalnych. */
.nav-karta{display:flex;flex-direction:column;width:100%;padding:var(--s-3);
  border:1px solid transparent;border-radius:12px;color:var(--c-ink)}
.nav-karta:hover{background:var(--c-bg-2);border-color:var(--c-line);text-decoration:none}
/* Zdjecia produktow maja biale tlo. Na blekitnym kaflu rysowal sie z tego
   bialy kwadrat — stad szara plyta i `mix-blend-mode:multiply`, dokladnie tak
   jak `.w-prod-foto` w katalogu, gdzie ten sam problem byl rozwiazany.
   Ilustracja kategorii ma wlasne tlo w SVG, wiec jej nie mieszamy. */
.nav-karta-foto{display:flex;align-items:center;justify-content:center;height:104px;
  margin-bottom:var(--s-3);background:var(--c-bg-2);border-radius:10px;overflow:hidden}
.nav-karta-foto img{max-width:84%;max-height:88px;width:auto;height:auto;
  object-fit:contain;mix-blend-mode:multiply}
.nav-karta-foto .nav-karta-zastepcza{max-width:100%;max-height:104px;mix-blend-mode:normal}
.nav-karta-cena{font-size:var(--t-sm);color:var(--c-ink-3);line-height:1.3}
.nav-karta-cena b{color:var(--c-cert-deep);font-size:var(--t-base);font-weight:var(--fw-bold)}
.nav-karta-wycena{color:var(--c-ink-2);font-weight:var(--fw-semibold)}
.nav-karta-netto{font-size:var(--t-xs);color:var(--c-ink-3);line-height:1.3;margin-top:2px}
/* Nazwy produktów Certum bywają czterowierszowe. Trzy wiersze mieszczą
   większość z nich w całości, a „Więcej” i tak stoi równo, bo dociska je
   `margin-top:auto`. */
.nav-karta-nazwa{margin-top:var(--s-2);font-size:var(--t-sm);font-weight:var(--fw-semibold);
  line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.nav-karta-wiecej{margin-top:auto;padding-top:var(--s-3);font-size:var(--t-sm);
  font-weight:var(--fw-semibold);color:var(--c-cert-deep)}
.nav-karta:hover .nav-karta-wiecej{text-decoration:underline}
.nav-zaslona,.nav-szuflada-glowa{display:none}

/* ── telefon i tablet: szuflada zamiast pasa ────────────────────────────── */
@media(max-width:62rem){
  .nav-hamburger{display:inline-flex}
  .site-akcje .nav-akcja span:not(.nav-cart-ile){position:absolute;left:-9999px}
  .nav-akcja{padding:var(--s-2)}
  .site-nav{position:fixed;top:0;bottom:0;left:0;width:min(20rem,86vw);border-top:0;
    border-right:1px solid var(--c-line);background:var(--c-bg);z-index:60;overflow-y:auto;
    padding-block:var(--s-4);visibility:hidden;transform:translateX(-100%);
    transition:transform var(--m-base) var(--m-ease),visibility var(--m-base) var(--m-ease)}
  .site-header[data-menu="otwarte"] .site-nav{visibility:visible;transform:none}
  .site-nav .wrap{padding-inline:0}
  .nav-lista{flex-direction:column;align-items:stretch;overflow:visible}
  .nav-poz{display:block}
  .nav-poz > a{display:flex;justify-content:space-between;padding:var(--s-3) var(--s-5);
    border-bottom:0;font-size:var(--t-base)}
  .nav-poz > a[aria-current="page"]{background:var(--c-cert-soft);color:var(--c-cert-deep)}
  .nav-panel,.nav-strzalka{display:none}
  .nav-szuflada-glowa{display:flex;align-items:center;justify-content:space-between;
    gap:var(--s-3);padding:0 var(--s-4) var(--s-4) var(--s-5);margin-bottom:var(--s-2);
    border-bottom:1px solid var(--c-line)}
  .nav-szuflada-glowa span{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.09em;
    font-weight:var(--fw-semibold);color:var(--c-ink-3)}
  .nav-zamknij{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
    border:0;background:none;color:var(--c-ink-2);cursor:pointer;border-radius:10px}
  .nav-zamknij:hover{background:var(--c-bg-2);color:var(--c-ink)}
  .nav-zamknij svg{width:20px;height:20px}
  .site-header[data-menu="otwarte"] .nav-zaslona{display:block;position:fixed;inset:0;
    background:rgba(35,31,32,.45);z-index:50}
}
body.bez-przewijania{overflow:hidden}

/* ── wyszukiwarka ───────────────────────────────────────────────────── */
.tylko-czytnik{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Srodek pasa marki zajmuja Poradnik i Do pobrania. Wyszukiwarka zostaje
   jako ikona przy Koncie — strona `/szukaj` dalej dziala, tylko nie zabiera
   miejsca materialom, po ktore ludzie tu przychodza czesciej. */
.site-pomoc{display:flex;align-items:center;gap:var(--s-5);margin-left:var(--s-6)}
.site-pomoc a{display:inline-flex;align-items:center;gap:7px;color:var(--c-ink-2);
  font-size:var(--t-sm);font-weight:var(--fw-medium);white-space:nowrap;
  padding:var(--s-2) 0;border-bottom:2px solid transparent}
.site-pomoc a:hover{color:var(--c-cert-deep);text-decoration:none}
.site-pomoc a[aria-current="page"]{color:var(--c-ink);border-bottom-color:var(--c-cert-deep)}
.site-pomoc svg{width:1.05rem;height:1.05rem;flex:none;color:var(--c-cert-deep)}
.site-pomoc a[aria-current="page"] svg{color:var(--c-cert-deep)}

/* Te same dwa odnosniki sa w szufladzie na telefonie — tam pasa marki nie
   widac. Na duzym ekranie ukrywamy je w pasie kategorii. */
.nav-poz-pomoc{display:none}
@media(max-width:62rem){
  .site-pomoc{display:none}
  .nav-poz-pomoc{display:block}
}

.tylko-czytnik{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav-szukaj-ikona{display:inline-flex}

.w-szukaj-glowa{max-width:46rem;margin-bottom:var(--s-6)}
.w-szukaj-glowa h1{margin:var(--s-2) 0 var(--s-4)}
.w-szukaj-duze{position:relative;display:flex;gap:var(--s-3);align-items:stretch}
.w-szukaj-duze > svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--c-ink-3);pointer-events:none}
.w-szukaj-duze input{flex:1;min-width:0;min-height:52px;font:inherit;font-size:var(--t-base);
  padding:0 var(--s-4) 0 48px;border:1px solid var(--c-line-2);border-radius:12px;
  background:var(--c-bg);color:var(--c-ink)}
.w-szukaj-duze input:focus{border-color:var(--c-cert);outline:none;
  box-shadow:0 0 0 3px rgba(0,163,224,.18)}
.w-szukaj-duze .btn{min-height:52px;flex:none}
@media(max-width:34rem){
  .w-szukaj-duze{flex-direction:column}
  .w-szukaj-duze .btn{width:100%}
}

.w-szukaj-kategorie{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;
  margin:0 0 var(--s-5);font-size:var(--t-sm)}
.w-szukaj-kategorie span{color:var(--c-ink-3)}
.w-szukaj-kategorie a{display:inline-flex;padding:var(--s-1) var(--s-3);border-radius:var(--r-full);
  background:var(--c-cert-soft);color:var(--c-cert-deep);font-weight:var(--fw-medium)}
.w-szukaj-kategorie a:hover{text-decoration:none;background:var(--c-cert);color:#fff}

.w-szukaj-naglowek{display:flex;align-items:baseline;gap:var(--s-3);
  margin:var(--s-6) 0 var(--s-4);font-size:var(--t-xl)}
.w-szukaj-naglowek small{font-size:var(--t-sm);font-weight:var(--fw-normal);color:var(--c-ink-3)}

.w-szukaj-nic{max-width:40rem;padding:var(--s-6);border:1px solid var(--c-line);
  border-radius:var(--w-radius);background:var(--c-bg)}
.w-szukaj-nic h2{margin:0 0 var(--s-3);font-size:var(--t-lg)}
.w-szukaj-nic p{margin:0 0 var(--s-4);color:var(--c-ink-2);line-height:1.6}
.w-szukaj-akcje{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:0!important}

.w-szukaj-wpisy{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.w-szukaj-wpisy a{display:flex;flex-direction:column;gap:2px;padding:var(--s-4);
  border:1px solid var(--c-line);border-radius:var(--w-radius);color:var(--c-ink)}
.w-szukaj-wpisy a:hover{border-color:var(--c-cert);background:var(--c-cert-soft);text-decoration:none}
.w-szukaj-wpisy span{font-weight:var(--fw-semibold);font-size:var(--t-base)}
.w-szukaj-wpisy small{color:var(--c-ink-3);font-size:var(--t-sm);line-height:1.5}
.w-szukaj-podpowiedzi h2{margin:0 0 var(--s-4);font-size:var(--t-lg)}