/* AK Serwis — glue CSS specyficzny dla WordPressa (poza systemem z main.css).
   Trzymamy tu wyłącznie rzeczy WP/a11y, żeby main.css pozostał 1:1 z design/. */

/* Dostępność */
.screen-reader-text{
	border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
	margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important;
}
.skip-link{
	position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;
	padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0;font-family:var(--font-head);font-weight:600;
}
.skip-link:focus{left:0}

/* Jedna obwódka fokusu dla całego serwisu. Bez niej wszystko poza `.btn`
   (linki menu, kafelki galerii, checkboxy filtrów, <summary> w FAQ, pola
   koszyka) zostawało z domyślną obwódką przeglądarki — inną w każdej z nich.
   `:where()` zeruje swoistość, więc `.btn:focus-visible` i `.field …:focus`
   dalej wygrywają. Na ciemnych blokach granat byłby niewidoczny, więc tam
   ring jest jasny. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
	outline:3px solid var(--navy);outline-offset:2px;
}
:where(.topbar,footer.site,.contact-card,.hero-card,.svc,.trust,.band)
	:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
	outline-color:#93c5fd;
}

/* Hero ze zdjęciami (przemysł + detektory) — full-bleed, navy overlay */
.hero-media{position:relative;overflow:hidden;display:flex;align-items:center;min-height:calc(100vh - 112px);min-height:calc(100svh - 112px);border-bottom:1px solid var(--border);isolation:isolate}
.hero-media__bg{position:absolute;inset:0;z-index:-2;background:var(--navy)}
.hero-media__bg .hslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease}
.hero-media__bg .hslide.is-active{opacity:1}
.hero-media__overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,42,71,.94) 0%,rgba(14,42,71,.82) 38%,rgba(14,42,71,.42) 70%,rgba(14,42,71,.22) 100%)}
.hero-media__inner{position:relative;color:#fff;padding:clamp(40px,7vw,80px) 20px}
.hero-media .eyebrow{color:#fb923c}
.hero-media h1{color:#fff;max-width:20ch}
.hero-media h1 .hl-1{display:block;color:#fff}
.hero-media h1 .hl-2{display:block;color:var(--accent)}
.hero-media h1 .hl-2 .w{display:inline-block}
.hero-media .lead{color:#e2e8f0;max-width:54ch;font-size:1.12rem}
.hero-media .hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.4rem 0 1.2rem}
.hero-media .hero-trust{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.92rem;color:#cbd5e1}
.hero-media .hero-trust span{display:inline-flex;align-items:center;gap:.45rem}
.hero-media .hero-trust .icon{color:var(--safe);width:18px;height:18px}
.hero-media .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.45);backdrop-filter:blur(2px)}
.hero-media .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
@media(max-width:680px){
	/* na mobile pasek górny zawija się (wyższy) — odejmujemy więcej */
	.hero-media{min-height:calc(100vh - 150px);min-height:calc(100svh - 150px)}
	.hero-media__overlay{background:linear-gradient(180deg,rgba(14,42,71,.84),rgba(14,42,71,.8))}
}
@media (prefers-reduced-motion:reduce){.hero-media__bg .hslide{transition:none}}

/* Hero — wejście tekstu (sekwencyjne) + „Ken Burns" tła (życie w statycznym zdjęciu). */
@keyframes ak-hero-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ak-hero-word{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ak-kenburns{from{transform:scale(1.001)}to{transform:scale(1.12)}}
.hero-media .eyebrow,.hero-media h1 .hl-1,.hero-media .lead,.hero-media .hero-cta,.hero-media .hero-trust{opacity:0;animation:ak-hero-in .8s cubic-bezier(.22,.61,.36,1) both}
.hero-media h1 .hl-2 .w{opacity:0;animation:ak-hero-word .65s cubic-bezier(.22,.61,.36,1) both}
.hero-media .eyebrow{animation-delay:.10s}
.hero-media h1 .hl-1{animation-delay:.24s}
.hero-media h1 .hl-2 .w:nth-child(1){animation-delay:.46s}
.hero-media h1 .hl-2 .w:nth-child(2){animation-delay:.58s}
.hero-media h1 .hl-2 .w:nth-child(3){animation-delay:.70s}
.hero-media .lead{animation-delay:.80s}
.hero-media .hero-cta{animation-delay:.94s}
.hero-media .hero-trust{animation-delay:1.08s}
.hero-media__bg .hslide{transform:scale(1.001)}
.hero-media__bg .hslide.is-active{animation:ak-kenburns 9s ease-out both}
@media (prefers-reduced-motion:reduce){
	.hero-media .eyebrow,.hero-media h1 .hl-1,.hero-media h1 .hl-2 .w,.hero-media .lead,.hero-media .hero-cta,.hero-media .hero-trust{animation:none;opacity:1}
	.hero-media__bg .hslide.is-active{animation:none}
}

/* Wskaźnik „przewiń niżej" — pojawia się po tekście, potem delikatnie pulsuje. */
.hero-scroll{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);backdrop-filter:blur(2px);opacity:0;animation:ak-cue-in .6s ease 1.4s forwards,ak-scroll-cue 1.9s ease-in-out 2s infinite;transition:background .18s,border-color .18s}
.hero-scroll:hover{background:rgba(255,255,255,.2);border-color:#fff}
.hero-scroll .icon{width:22px;height:22px}
@keyframes ak-cue-in{to{opacity:1}}
@keyframes ak-scroll-cue{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
#dalej{scroll-margin-top:90px}
@media(max-height:560px){.hero-scroll{display:none}}
@media(prefers-reduced-motion:reduce){.hero-scroll{animation:none;opacity:1}}

/* Menu w stopce jako prawidłowe listy (a11y) */
footer.site .fmenu{list-style:none;margin:0;padding:0}
footer.site .fmenu li{margin:0}
footer.site .fmenu-inline{list-style:none;margin:0;padding:0;display:inline-flex;flex-wrap:wrap;gap:.2rem 1.1rem}
footer.site .fmenu-inline li{margin:0}
footer.site .fmenu-inline a{display:inline}

/* Wyszukiwarka z podpowiedziami */
.ak-search{position:relative}
.ak-suggest{position:absolute;top:calc(100% + 9px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:50;overflow:hidden;max-height:72vh;overflow-y:auto}
.ak-suggest-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--navy)}
.ak-suggest-item:hover{background:var(--muted)}
.ak-suggest-item img{width:44px;height:44px;object-fit:contain;border:1px solid var(--border);border-radius:8px;background:#fff;padding:3px;flex:none}
.ak-suggest-item .s-t{flex:1;min-width:0;font-size:.9rem;line-height:1.25;display:flex;flex-direction:column;font-family:var(--font-head);font-weight:600}
.ak-suggest-item .s-t small{font-size:.64rem;letter-spacing:.5px;text-transform:uppercase;color:var(--slate-500);font-weight:700}
.ak-suggest-item .s-p{font-family:var(--font-head);font-weight:800;color:var(--navy);font-size:.9rem;white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}
.ak-suggest-item .s-p.quote{color:var(--accent-600);font-size:.78rem;font-weight:700}
.ak-suggest-all{display:block;text-align:center;padding:12px;font-family:var(--font-head);font-weight:600;color:var(--accent-600);background:var(--bg)}
.ak-suggest-all:hover{background:var(--muted)}
.ak-suggest-empty{padding:20px;text-align:center;color:var(--slate-500);font-size:.9rem}

/* Nagłówek sekcji z akcjami (np. karuzela) */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.sec-head h2{margin:0}
.sec-head-actions{display:flex;align-items:center;gap:12px}
.carousel-nav{display:flex;gap:8px}
.cnav{width:46px;height:46px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s}
.cnav:hover:not(:disabled){border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow)}
.cnav:active:not(:disabled){transform:scale(.94)}
.cnav:disabled{opacity:.34;cursor:default}
.cnav .icon{width:20px;height:20px}

/* Karuzela produktów (scroll-snap + peek, drag-to-scroll, swipe na mobile) */
.ak-carousel{position:relative;margin:18px -4px 0}
.ak-carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc(27% - 12px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 4px 18px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;overscroll-behavior-x:contain}
.ak-carousel-track::-webkit-scrollbar{display:none}
.ak-carousel-track.dragging{scroll-behavior:auto;scroll-snap-type:none;cursor:grabbing}
.ak-carousel-track.dragging a{pointer-events:none}
.ak-carousel-track>.card{scroll-snap-align:start;min-width:0}
@media(max-width:1000px){.ak-carousel-track{grid-auto-columns:calc(44% - 10px)}}
@media(max-width:680px){.ak-carousel-track{grid-auto-columns:calc(82% - 8px);scroll-padding-left:4px}}

/* Karta produktu — kwadratowy obszar zdjęcia NIEZALEŻNIE od proporcji pliku.
   Link <a> wypełnia pole o proporcji 1:1 (pozycja absolutna), więc w .ph nie ma
   treści „w przepływie", która mogłaby rozepchać kafelek wysokim zdjęciem.
   Działa na home (karuzela) i na listingu — wszędzie, gdzie jest .card .ph. */
.card .ph{padding:0;overflow:hidden}
.card .ph>a{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;margin:0}
.card .ph>a img{max-width:100%;max-height:100%;width:auto;height:auto}
.card .ph .badge{z-index:2}

/* Logo jako link */
.logo-link{display:inline-flex;align-items:center;flex:none}
.logo-link svg,.logo-link img.logo{height:46px;width:auto;max-width:210px}

/* Nawigacja z wp_nav_menu (lista zamiast pojedynczych <a> w makiecie) */
.nav .nav-list{display:flex;align-items:center;gap:.3rem;list-style:none;margin:0;padding:0}
/* Na telefonie chowamy CAŁĄ listę, nie same linki (menu mobilne żyje w `.mnav`).
   Reguła musi stać TUTAJ: `main.css` ukrywa `.nav .lnk`, ale zostawiało to puste
   `<li>` wraz z odstępami flexa (~30 px), a pozycja doklejana spoza menu
   (przełącznik „Sklep BHP") nie łapała się na tamtą regułę. Efekt: nagłówek
   rozpychał się do 417 px w oknie 375 px — hamburger wypadał poza ekran, a cała
   strona przewijała się w bok. W `main.css` ta reguła by nie zadziałała:
   `wp.css` ładuje się PÓŹNIEJ i przy równej swoistości nadpisywałby ją
   powyższy `display:flex`. */
@media(max-width:680px){
	.nav .nav-list{display:none}
}
.mnav .nav-list{display:block;list-style:none;margin:0;padding:0}

/* Treść wpisów/stron (Gutenberg) */
.entry-content img{height:auto;border-radius:var(--r-sm)}
.entry-content ul,.entry-content ol{margin:0 0 1rem 1.2rem}
.entry-content h2{margin-top:1.6rem}
.entry-content a{color:var(--accent-600);text-decoration:underline}
.entry-content a:hover{color:var(--accent)}
/* Przycisk wstawiony w treść strony (shortcode) to przycisk, nie odnośnik
   w akapicie — podkreślenie z reguły wyżej zjadało mu wygląd. */
.entry-content a.btn{text-decoration:none;color:inherit}
.entry-content a.btn:hover{color:inherit}
.wp-block-image{margin:1.2rem 0}
.alignwide{max-width:min(100%,1000px)}

/* Paginacja */
.pagination .nav-links{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.pagination .page-numbers{
	display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;
	padding:.4rem .7rem;border:1px solid var(--border);border-radius:var(--r-sm);background:#fff;
	font-family:var(--font-head);font-weight:600;color:var(--navy);
}
.pagination .page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination .page-numbers:hover{border-color:var(--accent)}

/* =========================================================================
   ANIMACJE / UX „app-like" — subtelne, zgodne z prefers-reduced-motion.
   ========================================================================= */

/* Wejście elementów przy scrollu. Klasy nadaje JS i TYLKO elementom poniżej
   pierwszego ekranu, więc treść nad foldem nigdy nie „mignie" ukryta. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* Nagłówek: cień po przewinięciu + chowanie na mobile przy scrollu w dół. */
header.site{transition:transform .35s ease,box-shadow .25s ease}
header.site.is-scrolled{box-shadow:0 8px 28px rgba(15,23,42,.08)}
header.site.is-hidden{transform:translateY(-100%)}

/* Delikatny zoom zdjęcia w karcie na hover (obcięty przez .ph overflow:hidden). */
.card .ph img{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.card:hover .ph img{transform:scale(1.05)}

/* FAQ: płynne pojawienie odpowiedzi po rozwinięciu <details>. */
@keyframes ak-fade-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
details.qa[open] .ans{animation:ak-fade-down .28s ease}
details.qa summary{transition:color .15s ease}

/* Toast „Dodano do koszyka". */
.ak-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,160%);z-index:80;display:flex;align-items:center;gap:.55rem;background:var(--navy);color:#fff;font-family:var(--font-head);font-weight:600;font-size:.92rem;padding:13px 20px;border-radius:var(--r-sm);box-shadow:var(--shadow-lg);max-width:90vw;transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.ak-toast.show{transform:translate(-50%,0)}
.ak-toast .icon{width:18px;height:18px;color:#34d399;flex:none}
@media(max-width:680px){.ak-toast{bottom:auto;top:74px}}

/* Plakietka koszyka — krótki puls po dodaniu produktu. */
@keyframes ak-pulse{0%{transform:scale(1)}35%{transform:scale(1.55)}100%{transform:scale(1)}}
.cart-dot.pulse{animation:ak-pulse .45s ease}

/* Mobilne menu jako płynna szuflada (zamiast display:none→block). */
@media(max-width:680px){
	.mnav{display:block;max-height:0;overflow:hidden;opacity:0;visibility:hidden;background:#fff;border-top:0;transition:max-height .38s ease,opacity .26s ease,visibility 0s linear .38s}
	.mnav.open{max-height:80vh;overflow-y:auto;opacity:1;visibility:visible;border-top:1px solid var(--border);transition:max-height .38s ease,opacity .26s ease}
	body.nav-open{overflow:hidden}
}
.burger{transition:transform .2s ease}
.burger[aria-expanded="true"]{transform:rotate(90deg)}

/* Reduced motion: pokaż treść od razu, bez wejść/transformacji. */
@media(prefers-reduced-motion:reduce){
	.reveal{opacity:1!important;transform:none!important}
	header.site.is-hidden{transform:none!important}
	.card:hover .ph img{transform:none}
	details.qa[open] .ans{animation:none}
	.ak-toast{transform:translate(-50%,0);opacity:0}
	.ak-toast.show{opacity:1}
	.cart-dot.pulse{animation:none}
}

/* =========================================================================
   MOBILE-FIRST — usprawnienia dotyku / iOS (80% zamówień z telefonu).
   ========================================================================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Subtelny, brandowy błysk dotyku zamiast domyślnego szarego prostokąta. */
a,button,.btn,summary,.cat,.card,.fopt,.cnav,.iconbtn{-webkit-tap-highlight-color:rgba(234,88,12,.14)}

@media(max-width:680px){
	/* iOS auto-zoomuje pola o font-size < 16px przy focusie — wymuszamy 16px,
	   żeby checkout/kontakt/szukajka nie „skakały" na telefonie. */
	input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
	/* Wygodniejsze pola dotyku w menu stopki (≥40px). */
	footer.site .fmenu a{display:inline-block;padding:8px 0}
	footer.site .fmenu-inline a{display:inline-block;padding:5px 0}
}