/*
Theme Name: Na Styk
Theme URI: https://nastykmeble.pl
Author: Na Styk meble na wymiar
Description: Motyw strony Na Styk – meble na wymiar, Białystok.
Version: 1.0
Text Domain: nastyk
*/

:root{
  --grafit:#1C1D21; --zloto:#BE935C; --zloto-j:#D6B585; --dab:#7A5528;
  --tlo:#F9F8F6; --bialy:#FFFFFF; --linia:#E6E1D8; --pole:#D9D3C8;
  --tekst2:#4A4B50; --tekst3:#5C5D62; --ciemny-tekst:#C9C6BF; --ciemna-linia:#3A3B40;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--tlo);color:var(--grafit);font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--dab)}a:hover{color:var(--grafit)}
:focus-visible{outline:3px solid var(--zloto);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;background:var(--grafit);color:#fff;padding:10px 16px;z-index:100}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.g2>*,.g3>*,.g4>*,.g5>*,.lista-wpisow>*,.galeria>*{min-width:0}
.stack{display:flex;flex-direction:column}
.sekcja{padding:96px 0}
.sekcja.biala{background:var(--bialy)}
.sekcja.ciemna{background:var(--grafit);color:var(--tlo)}
.etykieta{font-size:13px;letter-spacing:3.5px;text-transform:uppercase;font-weight:600;color:var(--dab)}
.ciemna .etykieta{color:var(--zloto-j)}
.h1{margin:0;font-size:60px;line-height:1.04;font-weight:900;letter-spacing:-1px}
.h2{margin:0;font-size:40px;font-weight:900;line-height:1.1}
.lead{margin:0;font-size:19px;line-height:1.6;color:var(--tekst2)}
.szary{color:var(--tekst3)}
.naglowek-sekcji{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.naglowek-sekcji .stack{gap:12px;max-width:680px}

.btn{display:inline-block;font-weight:700;font-size:16px;padding:18px 28px;border-radius:4px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;line-height:1.2;text-align:center}
.btn-ciemny{background:var(--grafit);color:var(--tlo)}.btn-ciemny:hover{background:#000;color:var(--tlo)}
.btn-zloty{background:var(--zloto);color:var(--grafit)}.btn-zloty:hover{background:var(--zloto-j);color:var(--grafit)}
.btn-wa{background:#1F9D55;color:#fff;display:inline-flex;align-items:center;gap:10px;justify-content:center}.btn-wa:hover{background:#178246;color:#fff}
.btn-obrys{border:1.5px solid var(--grafit);color:var(--grafit);padding:16.5px 26px;background:transparent}.btn-obrys:hover{background:var(--grafit);color:var(--tlo)}
.przyciski{display:flex;gap:14px;flex-wrap:wrap}
.link-strzalka{font-weight:700;font-size:16px}

/* Nagłówek */
.naglowek{background:var(--tlo);border-bottom:1px solid var(--linia);position:sticky;top:0;z-index:20}
.admin-bar .naglowek{top:32px}
.naglowek .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.logo img{height:52px;width:auto}
.menu{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500}
.menu a{color:var(--grafit);text-decoration:none;white-space:nowrap}
.menu a:hover,.menu .current-menu-item>a,.menu .current_page_item>a{color:var(--dab)}
.menu .current-menu-item>a{font-weight:700}
.naglowek-tel{display:flex;align-items:center;gap:16px}
.naglowek .btn{font-size:15px;padding:14px 22px;white-space:nowrap}
.burger{display:none;background:none;border:1.5px solid var(--grafit);border-radius:4px;width:48px;height:48px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--grafit);position:relative;content:""}
.burger span::before{position:absolute;top:-6px}.burger span::after{position:absolute;top:6px}

/* Hero */
.hero{padding:72px 0 88px}
.hero .tekst{gap:28px}
.statystyki{display:flex;gap:28px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--linia)}
.statystyki .liczba{font-size:28px;font-weight:900;line-height:1.3}
.statystyki .opis{font-size:14px;color:var(--tekst3)}
.hero-foto{position:relative;height:620px}
.hero-foto .glowne{position:absolute;right:0;top:0;width:78%;height:100%;object-fit:cover;border-radius:6px}
.hero-foto .male{position:absolute;left:0;bottom:40px;width:40%;height:300px;object-fit:cover;border-radius:6px;border:8px solid var(--tlo);object-position:70% 75%}

/* Karty oferty */
.karta{text-decoration:none;color:var(--grafit);display:flex;flex-direction:column;gap:14px}
.karta img{width:100%;height:280px;object-fit:cover;border-radius:6px;transition:transform .3s}
.karta:hover img{transform:scale(1.015)}
.karta .tytul{font-size:21px;font-weight:700}
.karta .opis{font-size:15px;color:var(--tekst3);line-height:1.55}

/* Dlaczego */
.atut{display:flex;flex-direction:column;gap:14px;padding-top:22px;border-top:2px solid var(--zloto)}
.atut .tytul{font-size:18px;font-weight:700}
.atut .opis{font-size:15px;line-height:1.6;color:var(--ciemny-tekst)}

/* Mozaika realizacji */
.mozaika{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:240px;gap:16px}
.mozaika figure{margin:0;position:relative}
.mozaika img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.mozaika .d{grid-column:span 2;grid-row:span 2}.mozaika .w{grid-row:span 2}
.mozaika figcaption{position:absolute;left:16px;bottom:16px;background:var(--tlo);padding:8px 14px;font-size:14px;font-weight:600;border-radius:3px}

/* Proces */
.proces{list-style:none;margin:0;padding:0}
.proces li{display:flex;flex-direction:column;gap:10px}
.proces .nr{font-size:44px;font-weight:900;color:var(--zloto);line-height:1.2}
.proces .tytul{font-size:17px;font-weight:700}
.proces .opis{font-size:14px;line-height:1.6;color:var(--tekst3)}

/* O mnie */
.o-mnie img{width:100%;height:520px;object-fit:cover;border-radius:6px}
.o-mnie .stack{gap:22px}
.o-mnie p{margin:0;font-size:17px;line-height:1.7;color:var(--tekst2)}
.ramka{padding:24px 26px;background:var(--bialy);border-radius:6px;display:flex;flex-direction:column;gap:10px}
.ramka .tytul{font-size:18px;font-weight:700}

/* Poradnik karty */
.wpis-karta{min-width:0;text-decoration:none;color:var(--grafit);display:flex;flex-direction:column;gap:12px}
.wpis-karta img{width:100%;max-width:100%;height:220px;object-fit:cover;border-radius:6px}
.wpis-karta .kat{font-size:13px;color:var(--dab);font-weight:600}
.wpis-karta .tytul{font-size:20px;font-weight:700;line-height:1.35}
.wpis-karta .opis{font-size:15px;color:var(--tekst3);line-height:1.55}
.wpis-karta:hover .tytul{color:var(--dab)}

/* CTA */
.cta{background:var(--zloto);border-radius:8px;padding:56px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta.ciemne{background:var(--grafit);color:var(--tlo)}
.cta h2{margin:0;font-size:38px;font-weight:900;line-height:1.1}
.cta p{margin:0;font-size:17px;line-height:1.6}
.cta.ciemne p{color:var(--ciemny-tekst)}
.cta .stack{gap:12px;max-width:640px}

/* Stopka */
.stopka{background:var(--grafit);color:var(--ciemny-tekst);padding:56px 0 40px;font-size:14px}
.stopka .wrap{display:flex;flex-direction:column;gap:32px}
.stopka .kol{display:flex;flex-direction:column;gap:8px}
.stopka .kol-tytul{color:var(--tlo);font-weight:700}
.stopka a{color:var(--ciemny-tekst);text-decoration:none}.stopka a:hover{color:var(--tlo)}
.stopka .marka{color:var(--tlo);font-weight:900;font-size:20px}
.stopka .podpis{letter-spacing:3.5px;font-weight:500;font-size:12px;text-transform:uppercase}
.stopka .dol{border-top:1px solid var(--ciemna-linia);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Podstrony */
.okruszki{font-size:14px;color:var(--tekst3)}.okruszki a{color:var(--tekst3)}
.lista-ok{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:16px}
.lista-ok li{display:flex;gap:12px;align-items:flex-start}
.lista-ok svg{flex-shrink:0;margin-top:1px}
.kafel{display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid var(--linia);border-radius:6px}
.kafel .tytul{font-size:18px;font-weight:700}.kafel .opis{font-size:15px;line-height:1.6;color:var(--tekst3)}
.material{display:flex;flex-direction:column;gap:14px}
.material img{width:100%;height:260px;object-fit:cover;border-radius:6px}
.material .tytul{font-size:19px;font-weight:700}.material .opis{font-size:15px;line-height:1.6;color:var(--tekst3)}
.cennik .wiersz{display:flex;justify-content:space-between;gap:20px;padding:22px 0;border-bottom:1px solid var(--ciemna-linia);font-size:17px}
.cennik .kwota{font-weight:700;color:var(--zloto-j);text-align:right}
.faq details{border-bottom:1px solid var(--linia);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;font-size:18px;font-weight:700;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--dab);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq p{margin:14px 0 0;font-size:16px;line-height:1.7;color:var(--tekst2)}

/* Realizacje */
.filtry{display:flex;gap:10px;flex-wrap:wrap}
.filtr{font-family:inherit;font-size:15px;font-weight:600;padding:12px 20px;min-height:44px;border-radius:999px;cursor:pointer;border:1.5px solid var(--grafit);background:transparent;color:var(--grafit)}
.filtr[aria-pressed="true"]{background:var(--grafit);color:var(--tlo)}
.galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.galeria figure{margin:0;display:flex;flex-direction:column;gap:12px}
.galeria figure[hidden]{display:none}
.galeria .powieksz{position:relative;display:block;overflow:hidden;border-radius:6px;cursor:zoom-in;background:var(--linia)}
.galeria img{width:100%;height:380px;object-fit:cover;transition:transform .5s ease}
.galeria .powieksz:hover img,.galeria .powieksz:focus-visible img{transform:scale(1.06)}
.galeria .lupa{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;background:rgba(249,248,246,.92);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.galeria .powieksz:hover .lupa,.galeria .powieksz:focus-visible .lupa{opacity:1;transform:none}
.galeria .tytul{font-size:17px;font-weight:700}.galeria .opis{font-size:14px;color:var(--tekst3)}
.galeria-pasek{display:none;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--tekst3);margin-top:-16px}
.galeria-pasek .nawig{display:flex;gap:8px}
.galeria-pasek button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--grafit);background:transparent;color:var(--grafit);font-size:22px;line-height:1;cursor:pointer;font-family:inherit}
.galeria-pasek button:disabled{opacity:.3;cursor:default}
.filtr .ile{font-weight:500;opacity:.6;margin-left:2px}
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(20,21,24,.94);color:var(--tlo)}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox::backdrop{background:rgba(20,21,24,.94)}
.lb-figura{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:calc(100vw - 160px)}
.lb-figura img{max-width:100%;max-height:calc(100vh - 120px);width:auto;height:auto;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5);touch-action:pan-y}
.lb-figura figcaption{font-size:15px;color:var(--ciemny-tekst);text-align:center}
.lb-figura strong{color:var(--tlo)}
.lb-licznik{opacity:.6;margin-left:8px}
.lb-zamknij,.lb-strzalka{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;cursor:pointer;font-family:inherit;line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center}
.lb-zamknij{top:18px;right:18px;width:48px;height:48px;font-size:32px}
.lb-strzalka{top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:40px;padding-bottom:4px}
.lb-wstecz{left:20px}.lb-dalej{right:20px}
.lb-zamknij:hover,.lb-strzalka:hover{background:rgba(255,255,255,.22)}
body.lb-otwarty{overflow:hidden}

/* Kontakt */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.dane{display:flex;flex-direction:column;gap:18px;padding:28px;background:var(--bialy);border-radius:6px}
.dane .poz{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.6;color:var(--grafit);text-decoration:none}
.dane .poz svg{flex-shrink:0}
.dane .tel{font-weight:700;font-size:20px;align-items:center}
.formularz{background:var(--bialy);border-radius:8px;padding:40px;display:flex;flex-direction:column;gap:22px}
.formularz fieldset{border:0;margin:0;padding:0}
.formularz legend{font-size:16px;font-weight:700;padding:0;margin-bottom:12px}
.pigulki{display:flex;gap:10px;flex-wrap:wrap}
.pigulki label{display:flex;align-items:center;gap:8px;border:1.5px solid var(--pole);border-radius:999px;padding:10px 16px;font-size:15px;min-height:44px;cursor:pointer}
.pigulki label:has(input:checked){border-color:var(--grafit);background:var(--tlo)}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pole{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600}
.pole input,.pole select,.pole textarea{font:inherit;font-weight:400;font-size:16px;padding:14px 16px;border:1.5px solid var(--pole);border-radius:4px;background:var(--tlo);color:var(--grafit);width:100%}
.pole input:focus,.pole select:focus,.pole textarea:focus{border-color:var(--grafit);outline:none}
.pole input[type=file]{border-style:dashed;font-size:15px}
.zgoda{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--tekst3)}
.zgoda input{margin-top:3px}
.hp{position:absolute;left:-9999px}
.komunikat{padding:18px 22px;border-radius:6px;font-weight:600}
.komunikat.ok{background:#E8F1E4;color:#1F4D17}
.komunikat.blad{background:#F8E3E0;color:#7A1E12}

/* Blog */
.lista-wpisow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.kategorie{display:flex;gap:10px;flex-wrap:wrap}
.kategorie a{font-size:14px;font-weight:600;padding:10px 18px;border-radius:999px;border:1.5px solid var(--grafit);color:var(--grafit);text-decoration:none}
.kategorie a.aktywna,.kategorie a:hover{background:var(--grafit);color:var(--tlo)}
.paginacja{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.paginacja .page-numbers{padding:10px 16px;border:1.5px solid var(--linia);border-radius:4px;text-decoration:none;color:var(--grafit);font-weight:600}
.paginacja .current{background:var(--grafit);color:var(--tlo);border-color:var(--grafit)}
.artykul-naglowek{padding:56px 0 32px}
.artykul-naglowek .wrap{max-width:860px;display:flex;flex-direction:column;gap:18px}
.artykul-naglowek h1{margin:0;font-size:46px;line-height:1.1;font-weight:900}
.artykul-meta{font-size:14px;color:var(--tekst3)}
.artykul-foto{max-width:1100px;margin:0 auto;padding:0 32px}
.artykul-foto img{width:100%;max-height:620px;object-fit:cover;border-radius:6px}
.tresc{max-width:760px;margin:0 auto;padding:48px 32px 72px;font-size:18px;line-height:1.75;color:#2A2B30}
.tresc h2{font-size:28px;line-height:1.2;font-weight:800;margin:44px 0 14px;color:var(--grafit)}
.tresc h3{font-size:22px;margin:32px 0 10px}
.tresc p{margin:0 0 20px}
.tresc ul,.tresc ol{margin:0 0 20px;padding-left:24px}
.tresc li{margin-bottom:8px}
.tresc img{border-radius:6px;margin:24px 0}
.ramka-autora{max-width:760px;margin:0 auto 72px;padding:0 32px}
.ramka-autora .in{display:flex;gap:22px;align-items:center;background:var(--bialy);border-radius:8px;padding:28px}
.ramka-autora img{width:96px;height:96px;object-fit:cover;border-radius:50%}
.ramka-autora .stack{gap:6px}

/* Cookies */
.dol-linki{display:flex;gap:20px;flex-wrap:wrap}
.link-cookies{background:none;border:0;padding:0;font:inherit;color:var(--ciemny-tekst);cursor:pointer}
.link-cookies:hover{color:var(--tlo)}
.cookies{position:fixed;left:24px;bottom:24px;z-index:60;max-width:440px;background:var(--bialy);color:var(--grafit);border:1px solid var(--linia);border-radius:8px;padding:24px;box-shadow:0 18px 50px rgba(28,29,33,.22);display:flex;flex-direction:column;gap:12px}
.cookies[hidden]{display:none}
.cookies-tytul{font-weight:800;font-size:18px}
.cookies p{margin:0;font-size:14px;line-height:1.6;color:var(--tekst2)}
.cookies-przyciski{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.cookies .btn{font-size:14px;padding:12px 18px;flex:1 1 auto}
.cookies .btn-obrys{padding:10.5px 16.5px}

/* Telefon mobilny */
.tel-mobilny{display:none}

@media (max-width:1100px){
  .menu{gap:20px;font-size:14px}
  .naglowek-tel .numer{display:none}
}
@media (max-width:960px){
  .g2,.g3,.g4,.g5,.split,.f2,.galeria,.lista-wpisow{grid-template-columns:minmax(0,1fr)}
  .wrap{padding:0 20px}
  .sekcja{padding:64px 0}
  .h1{font-size:40px}.h2,.cta h2{font-size:30px}
  .hero{padding:40px 0 56px}
  .hero-foto{height:420px}.hero-foto .glowne{width:100%}.hero-foto .male{display:none}
  .burger{display:flex}
  .naglowek .wrap{height:72px}
  .logo img{height:44px}
  .naglowek .btn{display:none}
  .nawigacja{position:fixed;inset:72px 0 auto 0;background:var(--tlo);border-bottom:1px solid var(--linia);padding:12px 20px 24px;display:none;box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .admin-bar .nawigacja{top:118px}
  .nawigacja.otwarte{display:block}
  .menu{flex-direction:column;gap:0;font-size:17px}
  .menu a{display:block;padding:14px 0;border-bottom:1px solid var(--linia)}
  .mozaika{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px}
  .mozaika .d{grid-column:span 2}
  .o-mnie img{height:360px}
  .cta{padding:32px}
  .formularz{padding:24px}
  .filtry{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px;padding:0 20px 4px;scrollbar-width:none}
  .filtry::-webkit-scrollbar{display:none}
  .filtr{flex:0 0 auto}
  .galeria{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:0 20px 8px;scroll-padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .galeria::-webkit-scrollbar{display:none}
  .galeria figure{flex:0 0 84%;scroll-snap-align:start}
  .galeria img{height:440px}
  .galeria .lupa{opacity:1;transform:none;width:38px;height:38px}
  .galeria-pasek{display:flex}
  .lb-figura{max-width:100vw;padding:0 8px}
  .lb-figura img{max-height:calc(100vh - 140px)}
  .lb-strzalka{top:auto;bottom:18px;transform:none;width:52px;height:52px}
  .lb-wstecz{left:calc(50% - 64px)}.lb-dalej{right:calc(50% - 64px)}
  .artykul-naglowek h1{font-size:32px}
  .tresc{font-size:17px;padding:32px 20px 56px}
  .artykul-foto{padding:0 20px}
  .tel-mobilny{display:flex;position:fixed;left:16px;right:16px;bottom:16px;z-index:30;justify-content:center;gap:10px;align-items:center;background:var(--zloto);color:var(--grafit);font-weight:800;font-size:17px;padding:16px;border-radius:6px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.2)}
  body{padding-bottom:84px}
  .cookies{left:12px;right:12px;bottom:90px;max-width:none;padding:20px}
}
@media (max-width:782px){.admin-bar .naglowek{top:46px}}