/* Font Satoshi ładowany przez w (functions.php), nie @import - bez blokowania renderu. */ :root{ --bg:#ffffff; --panel:#eef1f7; --panel-2:#e4e8f2; --img:#dfe3ee; --ink:#141a2e; --ink-soft:#26304d; --ink-mute:#3f465f; --navy:#1c265f; --navy-deep:#13193f; --navy-800:#161e4b; --red:#ef4130; --red-dark:#d5311c; --red-bright:#ff5a44; --muted:#5b6178; --muted-2:#656b85; --line:rgba(28,38,95,.12); --line-strong:rgba(28,38,95,.22); --cream:#eef1f8; --cream-soft:#c7cce0; --cream-line:rgba(238,241,248,.14); --radius:2px; --pad:28px; --wrap:1280px; --wrap-narrow:1080px; --wrap-slim:960px; --shadow-hero:0 22px 40px -22px rgba(12,18,45,.45); --shadow-card:0 16px 34px -16px rgba(15,22,55,.24); --font:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif; --e-soft:cubic-bezier(.22,.61,.36,1); --e-strong:cubic-bezier(.76,0,.24,1); } *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--navy-deep);overflow-x:clip;overscroll-behavior:none} /* granatowe tło html + przycięcie poziomego overflow (m.in. menu mobilne translateX(100%)) → brak białego paska przy przewijaniu w bok i przy „gumkowaniu" (overscroll) na górze/dole. */ body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55;font-size:16px;overflow-x:clip;overscroll-behavior:none} img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.08} p{margin:0} ul{margin:0} ::selection{background:var(--red);color:#fff} :focus-visible{outline:2px solid var(--red);outline-offset:3px} /* ---------- LAYOUT ---------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%} .wrap--narrow{max-width:var(--wrap-narrow)} .wrap--slim{max-width:var(--wrap-slim)} .section{padding:clamp(64px,8vw,110px) 0;position:relative} .section--tight{padding:clamp(48px,6vw,84px) 0} .band-panel{background:var(--panel)} .band-navy{background:var(--navy);color:var(--cream)} .band-navy .h-md,.band-navy h2,.band-navy h3{color:#fff} .band-red{background:var(--red);color:#fff} /* ---------- TYPOGRAPHY HELPERS ---------- */ .h-xl{font-size:clamp(40px,6.6vw,86px);line-height:.98;letter-spacing:-.03em} .h-lg{font-size:clamp(34px,5.4vw,66px);line-height:1;letter-spacing:-.03em} .h-md{font-size:clamp(29px,4.2vw,50px);line-height:1.04;letter-spacing:-.022em} .h-sm{font-size:clamp(25px,3.2vw,38px);line-height:1.08;letter-spacing:-.02em} .h-xs{font-size:clamp(22px,2.6vw,30px);line-height:1.12;letter-spacing:-.015em} .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin:0 0 18px} .eyebrow--light{color:var(--red-bright)} .lede{font-size:clamp(16px,1.7vw,19px);line-height:1.65;color:var(--ink-mute)} .band-navy .lede{color:var(--cream-soft)} /* section header block */ .shead{max-width:760px;margin:0 0 clamp(38px,5vw,60px)} .shead--center{margin-left:auto;margin-right:auto;text-align:center} .shead--wide{max-width:940px} .shead--center .intro__lead{max-width:none;margin-inline:auto} .shead p.lede{margin-top:20px} /* ---------- BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:var(--radius);cursor:pointer;font-family:var(--font);font-size:16px;font-weight:700;letter-spacing:-.01em;padding:16px 26px;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease} .btn svg{width:17px;height:17px;flex:none} .btn--primary{background:var(--red);color:#fff} .btn--primary:hover{background:var(--red-dark);color:#fff} .btn--dark{background:var(--navy);color:#fff} .btn--dark:hover{background:#fff;color:var(--navy)} .btn--invert{background:var(--red);color:#fff} .btn--invert:hover{background:#fff;color:var(--navy)} .btn--ghost{background:transparent;color:var(--cream);border:1px solid rgba(238,241,248,.4)} .btn--ghost:hover{border-color:var(--cream);background:rgba(238,241,248,.08)} .btn--outline{background:transparent;color:var(--ink);border:1px solid var(--line-strong)} .btn--outline:hover{border-color:var(--red);color:var(--red)} .btn--sm{padding:12px 20px;font-size:14px} .btn--lg{padding:19px 32px;font-size:17px} .btn--block{width:100%} .btn .ar{transition:transform .2s ease} .btn:hover .ar{transform:translateX(4px)} .arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--red);cursor:pointer} .arrow-link span{transition:transform .2s ease} .arrow-link:hover span{transform:translateX(5px)} .arrow-link--ink{color:var(--ink)} .arrow-link--ink:hover{color:var(--red)} .arrow-link--light{color:#fff} /* ---------- HEADER (glass) ---------- */ .site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px clamp(12px,3vw,28px) 0;pointer-events:none;transition:padding .45s var(--e-strong)} .site-header__inner{pointer-events:auto;position:relative;max-width:1600px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:clamp(4px,.7vw,14px);padding:11px 12px 11px 22px;background:#fff;border:1px solid var(--line-strong);border-radius:16px;box-shadow:0 14px 40px rgba(9,13,35,.14);color:var(--ink);transition:max-width .5s var(--e-strong),background .4s var(--e-strong),box-shadow .4s var(--e-strong),padding .45s var(--e-strong),border-radius .45s var(--e-strong),border-color .4s var(--e-strong)} .site-header.is-scrolled .site-header__inner{box-shadow:0 10px 30px rgba(9,13,35,.18);border-color:rgba(28,38,95,.2)} .brand{flex:none;display:flex;align-items:center} .brand img{height:30px;width:auto;transition:opacity .22s ease} .site-nav{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:clamp(3px,.5vw,12px)} .site-nav a{position:relative;white-space:nowrap;display:inline-flex;align-items:center;padding:7px 3px;font-size:clamp(12.5px,.85vw,15px);font-weight:900;text-transform:uppercase;color:var(--ink-soft);letter-spacing:0;transition:color .18s ease} .site-nav a:hover{color:var(--red)} .site-nav a.is-active{color:var(--red);font-weight:900} .nav-home{position:relative;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.45);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none} .nav-home svg{width:15px;height:15px} .nav-home::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--red)} .site-header__right{display:flex;align-items:center;gap:clamp(8px,1vw,16px);flex:none} .header-divider{width:1px;height:24px;background:var(--line-strong);flex:none} .header-phone{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap} .header-phone svg{width:16px;height:16px;opacity:.75} .header-cta{border-radius:9px;padding:11px 18px;font-size:14px;background:var(--red);color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:background .18s ease,padding .45s var(--e-strong)} .header-cta:hover{background:var(--red-dark)} .header-cta svg{width:15px;height:15px} .header-user{display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:color .18s ease} .header-user:hover{color:var(--ink)} .header-user svg{width:22px;height:22px} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;flex:none;z-index:120} .nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .4s var(--e-strong),opacity .3s ease} .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.is-open span:nth-child(2){opacity:0} .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobilne menu - rozwijane WEWNĄTRZ samego paska (site-header__inner rośnie na pełny ekran) */ .header-menu{display:none} .header-menu a{font-size:clamp(24px,6.4vw,38px);font-weight:700;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);padding:10px 0;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);opacity:0;transform:translateY(-14px);transition:opacity .32s ease,transform .32s var(--e-soft);transition-delay:calc((var(--n,10) - 1 - var(--i,0)) * .03s);-webkit-tap-highlight-color:transparent;outline:none} /* Brak ramki focus przy tapnięciu; ramkę zostawiamy tylko dla klawiatury. */ .header-menu a:focus-visible{outline:2px solid var(--red-bright);outline-offset:4px} .header-menu a.is-active{color:var(--red)} .header-menu__foot{margin-top:clamp(24px,5vw,40px);display:flex;flex-wrap:wrap;gap:14px 28px;font-size:15px;color:var(--muted)} .header-menu__foot a{font-size:15px;border:0;padding:0;color:var(--muted)} .header-menu__panel svg{width:28px;height:28px;flex:none} .site-header__inner.is-open .header-menu{opacity:1;pointer-events:auto} .site-header__inner.is-open .header-menu a{opacity:1;transform:none;transition-delay:calc(.1s + var(--i,0) * .05s)} /* ---------- HERO (home) ---------- */ .hero{position:relative;background:var(--navy-deep);color:var(--cream);overflow:hidden;min-height:100svh;display:flex;align-items:flex-end;box-shadow:var(--shadow-hero)} .hero__bg{position:absolute;inset:0;overflow:hidden} .hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.5} /* Rotujace zdjecia tla hero: zoom + przenikanie TYLKO w trakcie przejscia (bez ciaglego Ken Burns) - nowe zdjecie wjezdza z lekkiego oddalenia (1.06 -> 1) przenikajac, potem stoi. */ .hero__bg--slides .hero__slide{opacity:0;transform:scale(1.06);transition:opacity 2s ease,transform 2s ease} .hero__bg--slides .hero__slide.is-on{opacity:.5;transform:scale(1)} /* Film w tle hero (YouTube w petli) - wypelnia obszar, bez interakcji. */ .hero__bg--video{pointer-events:none} .hero__bg--video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;opacity:.5} .hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,20,50,.55) 0%,rgba(15,20,50,.28) 34%,rgba(13,17,42,.9) 100%)} .hero__grid{position:absolute;inset:0;background-image:linear-gradient(var(--cream-line) 1px,transparent 1px),linear-gradient(90deg,var(--cream-line) 1px,transparent 1px);background-size:64px 64px;opacity:.35;mask-image:radial-gradient(120% 90% at 50% 100%,#000 20%,transparent 75%)} .hero__inner{position:relative;max-width:var(--wrap);margin:0 auto;width:100%;padding:0 var(--pad) clamp(56px,7vw,96px)} .hero h1{max-width:14ch;color:#fff;font-size:clamp(42px,7vw,90px);line-height:.98;letter-spacing:-.035em} .hero h1 em{font-style:normal;color:var(--red-bright)} .hero__row{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end;margin-top:36px} .hero__row p{margin:0;max-width:540px;font-size:clamp(16px,1.7vw,19px);line-height:1.62;color:var(--cream-soft)} .hero__actions{display:flex;flex-wrap:wrap;gap:12px} @keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .hero__inner .eyebrow{animation:heroIn .85s var(--e-soft) both} .hero__inner h1{animation:heroIn .85s .1s var(--e-soft) both} .hero__row{animation:heroIn .85s .24s var(--e-soft) both} /* ---------- HERO (single/subpage) ---------- */ .pagehero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;min-height:clamp(360px,52vh,520px);display:flex;align-items:flex-end;box-shadow:var(--shadow-hero)} .pagehero__bg{position:absolute;inset:0} .pagehero__bg img{width:100%;height:100%;object-fit:cover;opacity:.42} .pagehero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,20,50,.5),rgba(13,17,42,.86))} .pagehero__inner{position:relative;max-width:var(--wrap);margin:0 auto;width:100%;padding:0 var(--pad) clamp(44px,6vw,72px)} .pagehero .crumbs{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--cream-soft);margin-bottom:20px} .pagehero .crumbs a:hover{color:#fff} .pagehero .crumbs span{opacity:.5} .pagehero h1{color:#fff;font-size:clamp(38px,6vw,74px);letter-spacing:-.032em;line-height:1;animation:heroIn .8s var(--e-soft) both} /* Hero z blokiem kontaktu po prawej (np. Salon Rumia): tytul lewo, adres+telefon prawo. */ .pagehero__inner--split{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 40px;flex-wrap:wrap} .pagehero__inner--split h1{text-transform:uppercase} .pagehero__contact{display:flex;flex-direction:column;gap:5px;font-size:clamp(14px,1.1vw,17px);font-weight:600;animation:heroIn .8s .12s var(--e-soft) both} .pagehero__contact a,.pagehero__contact .info-item{display:inline-flex;align-items:center;gap:10px;color:var(--cream)} .pagehero__contact a:hover{color:#fff} .pagehero__contact svg{width:clamp(16px,1.15vw,19px);height:clamp(16px,1.15vw,19px);flex:none;color:var(--red-bright)} @media (max-width:720px){.pagehero__inner--split{align-items:flex-start}.pagehero__contact{font-size:14px}} .pagehero__actions{animation:heroIn .8s .12s var(--e-soft) both} .pagehero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} /* ---------- INTRO / LEAD statement ---------- */ .intro__lead{font-family:var(--font);font-weight:600;letter-spacing:-.02em;font-size:clamp(24px,3.1vw,40px);line-height:1.16;color:var(--ink);max-width:20ch} .intro__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start} .intro__note{border-left:2px solid var(--red);padding-left:clamp(20px,2.4vw,30px)} .intro__note p{color:var(--ink-mute);font-size:clamp(16px,1.5vw,18px);line-height:1.68;margin-bottom:16px} .intro__note ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;margin-top:6px} .intro__note li{position:relative;padding-left:26px;color:var(--ink-mute);font-size:16.5px;line-height:1.5} .intro__note li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--red);transform:rotate(45deg)} /* ---------- CARD GRID ---------- */ .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} /* Media split - zdjecie + tekst obok (np. sprzet Fortador na Detailingu). */ .mediasplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center} .mediasplit__media{border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;background:var(--img);box-shadow:var(--shadow-card)} .mediasplit__media img{width:100%;height:100%;object-fit:cover;display:block} .mediasplit__body .h-md{margin:.35rem 0 0} .mediasplit__body p:not(.eyebrow){margin:18px 0 0;color:var(--ink-soft);font-size:clamp(15px,1.1vw,17px);line-height:1.65;max-width:48ch} .ticklist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:13px} .ticklist li{position:relative;padding-left:30px;color:var(--ink-soft);line-height:1.5} .ticklist li::before{content:"";position:absolute;left:3px;top:.2em;width:8px;height:14px;border:solid var(--red);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)} @media(max-width:820px){.mediasplit{grid-template-columns:1fr;gap:22px}.mediasplit__media{aspect-ratio:4/3}} /* Opis auta na stronie oferty (pojazd). */ .pcar-desc__label{margin-bottom:10px} .pcar-desc__body{font-size:clamp(15px,1.05vw,17px);line-height:1.75;color:var(--ink-soft);max-width:72ch} .pcar-desc__body p{margin:0 0 .85em} .pcar-desc__body p:last-child{margin-bottom:0} /* Galeria (np. Detailing): box ze skosnie cietymi zdjeciami (4 w rzedzie) + prev/next. */ .gallery-box{position:relative;padding:0 6px} .gallery__viewport{overflow:hidden} .gallery__track{display:flex;transition:transform .55s var(--e-strong)} .gallery__cell{flex:0 0 25%;box-sizing:border-box;padding:0 1px} .gallery__frame{--sk:8%;display:block;overflow:hidden;aspect-ratio:3/4;background:var(--img);clip-path:polygon(var(--sk) 0,100% 0,calc(100% - var(--sk)) 100%,0 100%)} .gallery__frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--e-soft)} .gallery__frame:hover img{transform:scale(1.06)} /* Skrajne: skos tylko od wewnetrznej strony - pierwsze slant z PRAWEJ, ostatnie z LEWEJ. */ .gallery__cell:first-child .gallery__frame{clip-path:polygon(0 0,100% 0,calc(100% - var(--sk)) 100%,0 100%)} .gallery__cell:last-child .gallery__frame{clip-path:polygon(var(--sk) 0,100% 0,100% 100%,0 100%)} .gallery__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-card);transition:background .18s ease,color .18s ease,border-color .18s ease} .gallery__nav svg{width:20px;height:20px} .gallery__nav:hover{background:var(--navy);color:#fff;border-color:var(--navy)} .gallery__nav:disabled{opacity:.35;cursor:default} .gallery__nav--prev{left:-10px} .gallery__nav--next{right:-10px} /* „Pokaz wiecej" - tylko mobile (JS dodaje .has-more gdy zdjec > limitu). */ .gallery__more-wrap{display:none} .gallery-box.has-more .gallery__more-wrap{display:flex;justify-content:center;margin-top:16px} .gallery__more{appearance:none;cursor:pointer;font:inherit;font-weight:700;padding:11px 24px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);transition:background .18s ease,color .18s ease,border-color .18s ease} .gallery__more:hover{background:var(--navy);color:#fff;border-color:var(--navy)} @media(max-width:900px){.gallery__cell{flex-basis:33.333%}} /* Mobile: zwykla galeria (siatka 2 kolumny, proste zdjecia, bez slidera/skosu). */ @media(max-width:640px){ .gallery-box{padding:0} .gallery__nav{display:none} .gallery__viewport{overflow:visible} .gallery__track{display:grid;grid-template-columns:1fr 1fr;gap:8px;transform:none!important} .gallery__cell{width:auto;padding:0;margin:0} .gallery__frame{aspect-ratio:4/3;clip-path:none} .gallery__cell:first-child .gallery__frame,.gallery__cell:last-child .gallery__frame{clip-path:none} .gallery-box.is-collapsed .gallery__cell:nth-child(n+5){display:none} } /* Lightbox - ladny podglad zdjecia na pelnym ekranie (zamiast surowego obrazka w nowej karcie). */ .lightbox{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(9,11,22,.93);opacity:0;transition:opacity .25s ease} .lightbox.is-open{display:flex;opacity:1} .lightbox__img{max-width:min(1100px,92vw);max-height:88vh;width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 24px 70px rgba(0,0,0,.55);transform:scale(.96);transition:transform .25s ease} .lightbox.is-open .lightbox__img{transform:scale(1)} .lightbox__bar{display:contents} .lightbox__close{position:absolute;top:18px;right:20px;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .18s ease} .lightbox__close:hover{background:rgba(255,255,255,.24)} .lightbox__close svg{width:22px;height:22px} .lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .18s ease} .lightbox__nav:hover{background:rgba(255,255,255,.24)} .lightbox__nav svg{width:26px;height:26px} .lightbox__nav--prev{left:20px} .lightbox__nav--next{right:20px} .lightbox__count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.82);font-size:14px;letter-spacing:.04em} @media(max-width:640px){ .lightbox{flex-direction:column;gap:16px;padding:12px} .lightbox__img{max-width:96vw;max-height:72vh} .lightbox__bar{display:flex;align-items:center;justify-content:center;gap:26px} .lightbox__nav{position:static;top:auto;left:auto;right:auto;transform:none;width:46px;height:46px;background:rgba(255,255,255,.16)} .lightbox__count{position:static;transform:none;bottom:auto;left:auto;min-width:54px;text-align:center} .lightbox__close{top:10px;right:10px} } .card-grid--2{grid-template-columns:repeat(2,1fr)} .card-grid--4{grid-template-columns:repeat(4,1fr)} .card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,2.4vw,34px);display:flex;flex-direction:column;gap:16px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;min-height:100%} a.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);border-color:transparent} .card__ico{width:52px;height:52px;border-radius:var(--radius);background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex:none} .card__ico svg{width:26px;height:26px} .card--accent .card__ico{background:var(--red)} .card h3{font-size:clamp(20px,1.7vw,23px);letter-spacing:-.01em} .card p{color:var(--muted);font-size:15.5px;line-height:1.6} .card .arrow-link{margin-top:auto;padding-top:6px} .card__kicker{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red)} /* ---------- HAIRLINE GRID (process / benefits) ---------- */ .hgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .hgrid--3{grid-template-columns:repeat(3,1fr)} .hgrid--2{grid-template-columns:repeat(2,1fr)} .hgrid--5{grid-template-columns:repeat(5,1fr)} .cell{background:var(--bg);padding:clamp(26px,2.6vw,38px);display:flex;flex-direction:column;gap:14px} .band-panel .cell{background:var(--panel)} .cell__num{font-size:clamp(30px,3vw,46px);font-weight:600;letter-spacing:-.03em;color:var(--red);line-height:1} .cell__ico{color:var(--navy)} .cell__ico svg{width:30px;height:30px;stroke-width:1.7} .cell h3{font-size:clamp(19px,1.6vw,22px)} .cell p,.cell li{color:var(--muted);font-size:15px;line-height:1.55} .cell ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px} .cell ul li{position:relative;padding-left:20px} .cell ul li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--red);transform:rotate(45deg)} /* benefit tick cell (compact) */ .tick{display:flex;gap:16px;align-items:flex-start} .tick__ico{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(239,65,48,.1);color:var(--red);display:flex;align-items:center;justify-content:center;margin-top:2px} .tick__ico svg{width:18px;height:18px} .tick p{color:var(--ink-mute);font-size:15.5px;line-height:1.55} .tick p strong{color:var(--ink);font-weight:700} /* ---------- STATS ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .stat{background:var(--bg);padding:clamp(30px,3vw,44px) clamp(24px,2.4vw,34px);display:flex;flex-direction:column;gap:8px} .stat__ico{color:var(--red);margin-bottom:6px} .stat__ico svg{width:30px;height:30px} .stat__num{font-size:clamp(40px,5vw,72px);font-weight:600;letter-spacing:-.03em;line-height:.95;color:var(--navy)} .stat p{color:var(--muted);font-size:16px;line-height:1.4} /* ---------- SPLIT / STEP LIST ---------- */ .steps{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)} .step{background:var(--bg);display:grid;grid-template-columns:120px 1fr;gap:clamp(20px,4vw,56px);padding:clamp(30px,3.4vw,52px) clamp(24px,3vw,44px);align-items:start} .step__num{font-size:clamp(38px,4vw,64px);font-weight:600;letter-spacing:-.03em;color:var(--red);line-height:.9} .step__ico{color:var(--navy);margin-bottom:16px} .step__ico svg{width:36px;height:36px;stroke-width:1.6} .step h3{font-size:clamp(23px,2.4vw,32px);margin-bottom:18px} .step ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px;max-width:70ch} .step li{position:relative;padding-left:24px;color:var(--ink-mute);font-size:16px;line-height:1.55} .step li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--red);transform:rotate(45deg)} /* ---------- QUOTE / MOTTO BAND ---------- */ .motto{text-align:center} .motto .eyebrow{margin-bottom:22px} .motto blockquote{margin:0;font-size:clamp(28px,4vw,52px);font-weight:600;letter-spacing:-.025em;line-height:1.1;max-width:18ch;margin-inline:auto} .band-red .eyebrow{color:#fff;opacity:.8} /* red statement band */ .statement{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center} .statement h2{font-size:clamp(26px,3.2vw,42px);letter-spacing:-.022em;line-height:1.1;color:#fff} .statement p{color:rgba(255,255,255,.9);font-size:clamp(16px,1.5vw,18px);line-height:1.65} /* ---------- CASES (testimonial-like) ---------- */ .case{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(30px,3vw,44px);display:flex;flex-direction:column;gap:18px} .case__ico{width:46px;height:46px;color:var(--red)} .case h3{font-size:clamp(19px,1.7vw,23px);line-height:1.2} .case p{color:var(--muted);font-size:15.5px;line-height:1.62} /* ---------- KNOWLEDGE CARDS ---------- */ .klist{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .kcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease} .kcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)} .kcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--img)} .kcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e-soft)} .kcard:hover .kcard__media img{transform:scale(1.04)} .kcard__body{padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;gap:14px;flex:1} .kcard__body h3{font-size:clamp(20px,1.8vw,25px);line-height:1.15} .kcard__body p{color:var(--muted);font-size:15px;line-height:1.6} .kcard .arrow-link{margin-top:auto;padding-top:4px} /* ---------- SERVICE CROSS-LINK BANNERS ---------- */ .xnav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)} .xnav a{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(34px,4vw,56px);display:flex;flex-direction:column;gap:16px;min-height:280px;justify-content:flex-end;transition:background .3s ease} .xnav a::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;transition:opacity .4s ease,transform .6s var(--e-soft)} .xnav a:hover::before{opacity:.4;transform:scale(1.05)} .xnav a:hover{background:var(--navy-deep)} .xnav__ico{width:46px;height:46px;color:var(--red-bright);position:relative} .xnav__ico svg{width:46px;height:46px;stroke-width:1.5} .xnav a h3{font-size:clamp(24px,2.4vw,32px);position:relative} .xnav a p{color:var(--cream-soft);font-size:15px;line-height:1.6;position:relative;max-width:46ch} .xnav a .arrow-link{position:relative;color:#fff} /* ---------- FAMILY LOGOS ---------- */ .family{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .family__item{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:clamp(40px,5vw,72px)} .band-panel .family__item{background:var(--panel)} .family__item img{height:clamp(48px,5vw,70px);width:auto} /* ---------- CONTACT CARDS ---------- */ .contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .ccard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(28px,2.6vw,38px);display:flex;flex-direction:column;gap:14px} .ccard__ico{width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center} .ccard__ico svg{width:22px;height:22px} .ccard h3{font-size:clamp(18px,1.5vw,21px)} .ccard p{color:var(--muted);font-size:14px} .ccard address{font-style:normal;color:var(--ink);font-size:17px;line-height:1.45;font-weight:600} /* ---------- FORM ---------- */ .brief{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(28px,3.4vw,48px)} .brief-note{margin:0 0 20px;padding:13px 16px;border-radius:var(--radius);font-size:14px;font-weight:600;border:1px solid transparent} .brief-note--ok{background:rgba(26,125,74,.1);border-color:rgba(26,125,74,.35);color:#127a45} .brief-note--err{background:rgba(206,52,38,.1);border-color:rgba(206,52,38,.35);color:#c4362a} .brief--dark .brief-note--ok{background:rgba(52,199,120,.14);border-color:rgba(52,199,120,.4);color:#7ee0a6} .brief--dark .brief-note--err{background:rgba(255,96,80,.14);border-color:rgba(255,96,80,.4);color:#ff9d92} .brief-form{display:flex;flex-direction:column;gap:18px} .form-2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .brief-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--ink-soft)} .brief-form input,.brief-form textarea{font-family:var(--font);padding:14px 15px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:15px;background:var(--bg);color:var(--ink);transition:border-color .18s ease} .brief-form textarea{min-height:150px;resize:vertical} .brief-form input:focus,.brief-form textarea:focus{border-color:var(--red);outline:none} .brief-form input::placeholder,.brief-form textarea::placeholder{color:var(--muted-2)} .brief--dark{position:relative;overflow:hidden;background:var(--navy-deep);border-color:rgba(255,255,255,.1);box-shadow:0 34px 80px -34px rgba(9,13,35,.7)} .brief--dark::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 100% -20%,rgba(239,65,48,.16),transparent 60%);pointer-events:none} .brief--dark .brief-form{position:relative} .brief--dark .brief-form label,.brief--dark .brief-form legend{color:var(--cream-soft)} .brief--dark .brief-form input,.brief--dark .brief-form textarea,.brief--dark .brief-form select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff} .brief--dark .brief-form input::placeholder,.brief--dark .brief-form textarea::placeholder{color:rgba(238,241,248,.5)} .brief--dark .brief-form input:focus,.brief--dark .brief-form textarea:focus,.brief--dark .brief-form select:focus{border-color:var(--red-bright);background:rgba(255,255,255,.1)} .brief--dark .btn--primary{box-shadow:0 16px 34px -14px rgba(239,65,48,.6)} /* ---------- MAP PLACEHOLDER ---------- */ .mapband{background:var(--navy-deep);position:relative;overflow:hidden;min-height:clamp(280px,34vw,420px);display:flex;align-items:center;justify-content:center;color:var(--cream)} .mapband__grid{position:absolute;inset:0;background-image:linear-gradient(var(--cream-line) 1px,transparent 1px),linear-gradient(90deg,var(--cream-line) 1px,transparent 1px);background-size:48px 48px;opacity:.5} .mapband__pin{position:relative;text-align:center} .mapband__pin svg{width:76px;height:auto;margin:0 auto 18px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.4))} .mapband__pin p{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-soft)} .mapband__pin strong{display:block;font-size:clamp(20px,2vw,26px);font-weight:600;color:#fff;letter-spacing:-.01em;margin-top:6px;text-transform:none} /* ---------- FOOTER ---------- */ .site-footer{background:var(--navy);color:var(--cream)} .footer-top{padding:clamp(56px,7vw,90px) 0;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center} .footer-top h3{color:#fff;font-size:clamp(24px,2.4vw,32px);margin-bottom:20px} .footer-top address{font-style:normal;color:var(--cream-soft);font-size:17px;line-height:1.7} .footer-top address strong{color:#fff;font-weight:700} .footer-cta{display:flex;justify-content:flex-end} .footer-bottom{border-top:1px solid var(--cream-line);padding:26px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .footer-bottom img{height:26px;width:auto} .footer-bottom p{color:var(--muted-2);font-size:13px} /* ---------- FLOATING QUICK CONTACT ---------- */ .quick{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:10px} .quick a{width:50px;height:50px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(239,65,48,.4);transition:background .18s ease,transform .18s ease} .quick a:hover{background:var(--red-dark);transform:translateY(-3px)} .quick a svg{width:22px;height:22px} /* ---------- REVEAL ---------- */ .reveal-init{opacity:0;transform:translateY(24px)} .reveal-in{opacity:1;transform:none;transition:opacity .7s var(--e-soft),transform .7s var(--e-soft)} .card.reveal-init,.case.reveal-init,.kcard.reveal-init,.stat.reveal-init,.ccard.reveal-init,.cell.reveal-init{transform:translateX(-32px)} .hgrid[data-reveal]>.cell,.stats[data-reveal]>.stat,.steps[data-reveal]>.step,.contact-cards[data-reveal]>.ccard,.family[data-reveal]>.family__item{opacity:0;transform:translateX(-32px);transition:opacity .6s var(--e-soft),transform .6s var(--e-soft)} .hgrid.reveal-in>.cell,.stats.reveal-in>.stat,.steps.reveal-in>.step,.contact-cards.reveal-in>.ccard,.family.reveal-in>.family__item{opacity:1;transform:none} .hgrid.reveal-in>.cell:nth-child(2),.stats.reveal-in>.stat:nth-child(2),.steps.reveal-in>.step:nth-child(2),.contact-cards.reveal-in>.ccard:nth-child(2),.family.reveal-in>.family__item:nth-child(2){transition-delay:.08s} .hgrid.reveal-in>.cell:nth-child(3),.stats.reveal-in>.stat:nth-child(3),.steps.reveal-in>.step:nth-child(3),.contact-cards.reveal-in>.ccard:nth-child(3),.family.reveal-in>.family__item:nth-child(3){transition-delay:.16s} .hgrid.reveal-in>.cell:nth-child(4),.steps.reveal-in>.step:nth-child(4){transition-delay:.24s} .hgrid.reveal-in>.cell:nth-child(5),.steps.reveal-in>.step:nth-child(5){transition-delay:.32s} .hgrid.reveal-in>.cell:nth-child(6){transition-delay:.4s} /* ---------- KATALOG POJAZDÓW (VEHIS embed / podgląd) ---------- */ .shead__lead{margin:18px 0 0;color:var(--muted);font-size:clamp(16px,1.5vw,18px);line-height:1.6;max-width:640px} .vehis-embed{margin-top:clamp(28px,4vw,44px);width:100dvw;margin-left:calc(50% - 50vw)} .vehis-embed #v-embed{width:100%;border:0;display:block;min-height:640px} .cat-tabs__nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,36px)} .cat-tabs__nav label{display:inline-flex;align-items:center;padding:11px 18px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer;user-select:none;transition:background .18s ease,border-color .18s ease,color .18s ease} .cat-tabs__nav label:hover{border-color:var(--navy);color:var(--ink)} #cat-nasze:checked ~ .cat-tabs__nav label[for="cat-nasze"], #cat-katalog:checked ~ .cat-tabs__nav label[for="cat-katalog"], #cat-uzywane:checked ~ .cat-tabs__nav label[for="cat-uzywane"], #cat-poleasingowe:checked ~ .cat-tabs__nav label[for="cat-poleasingowe"]{background:var(--navy);border-color:var(--navy);color:#fff} #cat-nasze:focus-visible ~ .cat-tabs__nav label[for="cat-nasze"], #cat-katalog:focus-visible ~ .cat-tabs__nav label[for="cat-katalog"], #cat-uzywane:focus-visible ~ .cat-tabs__nav label[for="cat-uzywane"], #cat-poleasingowe:focus-visible ~ .cat-tabs__nav label[for="cat-poleasingowe"]{outline:2px solid var(--red);outline-offset:2px} .cat-panel{display:none} #cat-nasze:checked ~ .cat-panel--nasze, #cat-katalog:checked ~ .cat-panel--katalog, #cat-uzywane:checked ~ .cat-panel--uzywane, #cat-poleasingowe:checked ~ .cat-panel--poleasingowe{display:block} .cat-soon{max-width:860px;margin:0 auto;text-align:center;background:var(--panel);border:1px solid var(--line);padding:clamp(34px,5vw,58px) clamp(22px,4vw,52px)} .cat-soon__badge{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);background:#fff;border:1px solid var(--line-strong);padding:7px 15px;margin-bottom:20px} .cat-soon h3{font-size:clamp(24px,3vw,32px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:0 0 14px} .cat-soon p{font-size:clamp(15.5px,1.4vw,17px);line-height:1.6;color:var(--ink-mute);margin:0 auto;max-width:660px} .cat-soon__cta{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:center;margin-top:28px} .cat-soon__grid{margin-top:clamp(28px,4vw,44px)} .usearch__filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end;margin-bottom:clamp(26px,3.5vw,40px)} .usearch__filters label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--ink-soft)} .usearch__filters select{font-family:var(--font);padding:13px 40px 13px 14px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:14.5px;background:var(--bg);color:var(--ink);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;cursor:pointer;transition:border-color .18s ease} .usearch__filters select:focus{border-color:var(--red);outline:none} .usearch__submit{grid-column:1 / -1;justify-self:start;width:auto;padding:14px 28px} .uslider__track{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(14px,1.8vw,22px)} .uslider__track.is-collapsed .ucard:nth-child(n+7){display:none} .usearch__more{display:flex;align-items:center;gap:9px;width:fit-content;margin:clamp(24px,3vw,34px) auto 0;padding:12px 24px;background:transparent;border:1px solid var(--red);border-radius:var(--radius);color:var(--red);font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:-.01em;cursor:pointer;transition:background .18s ease,color .18s ease} .usearch__more:hover{background:var(--red);color:#fff} .usearch__more[hidden]{display:none} .usearch__more svg{width:16px;height:16px} .ucard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease} .ucard[hidden]{display:none} .ucard:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 18px 36px -20px rgba(28,38,95,.4)} .ucard__media{position:relative;aspect-ratio:16 / 10;background:var(--panel);display:flex;align-items:center;justify-content:center;overflow:hidden} .ucard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ucard__soon{display:inline-flex;flex-direction:column;align-items:center;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-mute)} .ucard__soon svg{width:34px;height:34px;opacity:.55} .ucard__badge{position:absolute;top:10px;left:10px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--navy);padding:5px 10px} .ucard__resv{position:absolute;top:10px;right:10px;z-index:2;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--red);padding:5px 10px;box-shadow:0 2px 10px rgba(9,13,35,.35)} .ucard__360{position:absolute;bottom:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;background:rgba(9,13,35,.72);padding:4px 9px;border-radius:999px;box-shadow:0 2px 10px rgba(9,13,35,.35)} .ucard__360 svg{width:13px;height:13px} /* Baner rezerwacji na karcie pojazdu (między chipsami a galerią) */ .pcar-resv{display:flex;align-items:center;gap:12px;margin:0 0 clamp(16px,2.4vw,24px);padding:14px 18px; border:1px solid rgba(239,65,48,.35);border-radius:12px;background:rgba(239,65,48,.07); color:var(--ink);font-size:15px} .pcar-resv svg{flex:none;width:22px;height:22px;color:var(--red)} .pcar-resv b{color:var(--red)} .ucard__body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px} .ucard__body h3{font-size:18px;letter-spacing:-.01em;color:var(--ink)} .ucard__spec{font-size:13.5px;color:var(--ink-mute)} .ucard__foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)} .ucard__price{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.01em} .ucard__foot .arrow-link{font-size:14px} /* MultiSalon - katalog aut: slider (4 widoczne + strzalki) / paginacja stron. Filtr = .usearch__filters */ @keyframes ccatIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .ccat .ucard.ccat-in{animation:ccatIn .42s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--ccd,0ms)} @media(prefers-reduced-motion:reduce){.ccat .ucard.ccat-in{animation:none}} .ccat__slider{position:relative} .ccat__viewport{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none} .ccat__viewport::-webkit-scrollbar{display:none} .ccat__track{display:flex;align-items:stretch;gap:clamp(14px,1.8vw,22px)} .ccat__track .ucard{scroll-snap-align:start} .ccat__slider .ucard{flex:0 0 calc((100% - 3*clamp(14px,1.8vw,22px))/4)} @media(max-width:900px){.ccat__slider .ucard{flex-basis:calc((100% - 2*14px)/3)}} @media(max-width:640px){.ccat__slider .ucard{flex-basis:calc((100% - 14px)/2)}} @media(max-width:440px){.ccat__slider .ucard{flex-basis:86%}} .ccat__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px -10px rgba(28,38,95,.45);transition:border-color .18s ease,color .18s ease} .ccat__arrow svg{width:20px;height:20px;display:block} .ccat__arrow--prev{left:-10px} .ccat__arrow--next{right:-10px} .ccat__arrow:hover{border-color:var(--navy);color:var(--navy)} .ccat__arrow:disabled{opacity:.3;cursor:default;box-shadow:none} .ccat.is-paged .ccat__arrow{display:none!important} .ccat.is-paged .ccat__viewport{overflow:visible} .ccat.is-paged .ccat__track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:900px){.ccat.is-paged .ccat__track{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:640px){.ccat.is-paged .ccat__track{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:440px){.ccat.is-paged .ccat__track{grid-template-columns:1fr}} .ccat.is-paged .ccat__slider .ucard{flex:none} /* pager tylko w trybie paginacji: bez tego `.ccat__pager{display:flex}` nadpisywalo [hidden] */ .ccat__pager{align-items:center;justify-content:center;gap:16px;margin-top:24px;flex-wrap:nowrap} .ccat__pager:not([hidden]){display:flex} .ccat__pinfo{font-size:14px;font-weight:600;color:var(--ink-mute);white-space:nowrap;text-align:center} /* „Szukaj" w tym samym rzedzie co filtry (nie pelna szerokosc jak w oryginale) */ .ccat .usearch__submit{grid-column:auto;padding-top:13px;padding-bottom:13px} .ccat__pbtn{padding:11px 20px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;flex:0 0 auto;transition:border-color .18s ease} .ccat__pbtn:hover:not(:disabled){border-color:var(--navy)} .ccat__pbtn:disabled{opacity:.4;cursor:default} /* Mobile: pełna szerokość - prev z lewej, info na środku, next z prawej; mniejszy padding, bez zawijania. */ @media (max-width:560px){ .ccat__pager{gap:8px;justify-content:space-between} .ccat__pbtn{padding:9px 12px;font-size:13px} .ccat__pinfo{flex:1 1 auto;min-width:0;font-size:13px} } .ccat__empty,.ccat__none{margin-top:16px;color:var(--ink-mute);font-size:14.5px} .ccat__empty a,.ccat__none a{color:var(--red);font-weight:600} .usearch__empty{margin-top:18px;font-size:15px;color:var(--ink-mute)} .usearch__empty a{color:var(--red);font-weight:600} .usearch__note{margin-top:14px;font-size:12.5px;color:var(--ink-mute);opacity:.75} .pcar-top{padding-top:clamp(96px,11vw,150px);padding-bottom:clamp(26px,3vw,46px);background:linear-gradient(180deg,rgba(28,38,95,.24) 0,rgba(28,38,95,0) 380px)} /* mniejsza szpara między sekcją auta a kolejną (gwarancje / finansowanie) - podwójny padding sekcji */ .pcar-top + .section{padding-top:clamp(26px,3vw,46px)} .pcar-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink-mute);margin-bottom:clamp(18px,2.5vw,26px);transition:color .18s ease} .pcar-back:hover{color:var(--red)} .pcar-back svg{width:17px;height:17px} .pcar-head{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,52px);align-items:start;transition:opacity .22s ease} /* wejście w tryb 360 / wyjście: media + box płynnie się „ustawiają" (obok crossfade nagłówka) */ .pcar-media,.pcar-main-img{transition:aspect-ratio .28s ease,object-position .28s ease} .pcar-info{transition:opacity .28s ease,transform .28s ease} .pcar-head.is-360 .pcar-info{animation:pcarInfoIn .32s ease both} @keyframes pcarInfoIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .pcar-media{position:relative;aspect-ratio:16 / 11;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden} .pcar-media .ucard__soon svg{width:44px;height:44px} .pcar-main-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Szablon premium: 360 na zdjęciu (desktop) / pod zdjęciem (mobile) + „Wsiądź" + urgency */ .pcar-gallery{position:relative} .pcar-360btn{position:absolute;top:12px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;font-weight:700;color:#fff;background:rgba(13,17,25,.62);border:0;border-radius:99px;padding:8px 14px;cursor:pointer;backdrop-filter:blur(2px)} .pcar-360btn:hover{background:rgba(13,17,25,.82)} .pcar-360btn.is-on{background:var(--red)} .pcar-360btn svg{width:16px;height:16px} .pcar-spin__hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#fff;background:rgba(13,17,25,.6);padding:7px 13px;border-radius:99px;backdrop-filter:blur(2px)} .pcar-spin__hint[hidden]{display:none} .pcar-spin__hint svg{width:16px;height:16px} /* Suwak obrotu 360 - pod zdjęciem, pełna szerokość, czerwony uchwyt */ .pcar-spin__slider{display:block;width:min(92%,520px);margin:14px auto 0;height:24px;-webkit-appearance:none;appearance:none;background:transparent;cursor:ew-resize;touch-action:none} .pcar-spin__slider[hidden]{display:none} .pcar-spin__slider::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:var(--line-strong)} .pcar-spin__slider::-moz-range-track{height:4px;border-radius:99px;background:var(--line-strong)} .pcar-spin__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 2px 8px -2px rgba(12,18,45,.5);cursor:grab} .pcar-spin__slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 2px 8px -2px rgba(12,18,45,.5);cursor:grab} .pcar-spin__slider:active::-webkit-slider-thumb{cursor:grabbing} /* Tryb 360 (po wciśnięciu): pełna szerokość, box danych pod spodem, miniatury schowane */ .pcar-head.is-360{grid-template-columns:1fr} .pcar-head.is-360 .pcar-thumbs{display:none} .pcar-head.is-360 .pcar-info{position:static} .pcar-head.is-360 .pcar-media{cursor:grab;touch-action:pan-y;user-select:none;background:#0d1119} .pcar-head.is-360 .pcar-media.is-dragging{cursor:grabbing} .pcar-head.is-360 .pcar-main-img{object-fit:contain;pointer-events:none} /* Mobile: kontrolki 360 POD zdjęciem (nie na nim) */ @media(max-width:820px){ .pcar-360btn{position:static;display:flex;width:fit-content;margin:12px auto 0;color:var(--ink);background:var(--bg);border:1px solid var(--line-strong);backdrop-filter:none} .pcar-360btn:hover{border-color:var(--red);color:var(--red);background:var(--bg)} .pcar-360btn.is-on{background:var(--red);color:#fff;border-color:var(--red)} .pcar-spin__hint{position:static;transform:none;display:flex;width:fit-content;margin:8px auto 0;color:var(--ink-mute);background:var(--panel);backdrop-filter:none} .pcar-spin__hint svg{color:var(--ink-mute)} } .pcar-enter[hidden]{display:none} .pcar-enter{position:absolute;top:12px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14px;font-weight:700;color:#fff;background:var(--red);border:0;border-radius:99px;padding:9px 16px;cursor:pointer;box-shadow:0 6px 18px -8px rgba(239,65,48,.7)} .pcar-enter:hover{background:var(--red-bright)} .pcar-enter svg{width:17px;height:17px} .pcar-urgency{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;border-radius:10px;background:rgba(239,65,48,.08);border:1px solid rgba(239,65,48,.28);color:var(--red);font-size:13.5px;font-weight:700} .pcar-urgency svg{flex:none;width:18px;height:18px} /* „Wsiądź": podmiana zdjęcia w kadrze (#pcar-main) na kokpit + animacja wsiadania */ .pcar-wsiadanie{animation:pcarWsiadanie .68s cubic-bezier(.16,.72,.24,1) both;transform-origin:50% 62%} @keyframes pcarWsiadanie{ 0%{opacity:0;transform:perspective(1400px) translateZ(-260px) scale(1.75) rotateX(6deg);filter:blur(10px)} 55%{opacity:1} 100%{opacity:1;transform:perspective(1400px) translateZ(0) scale(1) rotateX(0);filter:blur(0)} } /* wyjście z kabiny - odsunięcie na zewnątrz (odwrotność wsiadania) */ .pcar-wysiadanie{animation:pcarWysiadanie .52s cubic-bezier(.16,.72,.24,1) both;transform-origin:50% 62%} @keyframes pcarWysiadanie{ 0%{opacity:0;transform:perspective(1400px) translateZ(160px) scale(1.28) rotateX(-4deg);filter:blur(8px)} 55%{opacity:1} 100%{opacity:1;transform:perspective(1400px) translateZ(0) scale(1) rotateX(0);filter:blur(0)} } .pcar-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:10px} .pcar-thumb{width:100%;height:54px;border:1px solid var(--line);border-radius:10px;overflow:hidden;padding:0;cursor:pointer;background:none} .pcar-thumb.is-active{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)} .pcar-thumb img{width:100%;height:100%;object-fit:cover;display:block} /* Buy-box karty pojazdu */ .pcar-info{position:sticky;top:100px;background:var(--bg);border:1px solid var(--line);border-radius:16px; padding:clamp(22px,2.4vw,30px);box-shadow:0 24px 60px -40px rgba(9,13,35,.45)} .pcar-info .eyebrow{margin-bottom:12px} .pcar-title{font-size:clamp(26px,3vw,36px);line-height:1.08;letter-spacing:-.02em;color:var(--ink)} .pcar-facts{display:grid;grid-template-columns:1fr;gap:0;margin:18px 0 0;padding:0} .pcar-facts > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:9px 0;border-bottom:1px solid var(--line)} .pcar-facts > div:last-child{border-bottom:0} .pcar-facts dt{font-size:13.5px;color:var(--ink-mute)} .pcar-facts dd{margin:0;font-size:14.5px;font-weight:700;color:var(--ink);text-align:right} .pcar-pricebox{margin-top:18px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:12px} .pcar-price{font-size:clamp(28px,3.2vw,36px);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1} .pcar-rata{margin:8px 0 0;font-size:14px;color:var(--ink-mute)} .pcar-rata strong{color:var(--red)} .pcar-rata span{opacity:.7} .pcar-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px} .pcar-cta .btn{width:100%;justify-content:center;margin:0} .pcar-cta__full{grid-column:1 / -1} /* Pasek plakietek nad zdjęciem + buy-boxem (chipy jeden obok drugiego) */ .pcar-trust{list-style:none;margin:0 0 clamp(18px,2.4vw,26px);padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .pcar-trust li{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 18px;border:1px solid var(--line-strong);border-radius:999px;font-size:15.5px;font-weight:600;color:var(--ink-soft);background:var(--bg);white-space:nowrap} .pcar-trust li svg{width:19px;height:19px;flex:none;color:var(--navy)} .pcar-trust__warr{border-color:rgba(239,65,48,.4)} .pcar-trust__warr a{display:inline-flex;align-items:center;gap:9px;color:var(--red);font-weight:700} .pcar-trust__warr svg{color:var(--red)} @media(max-width:420px){.pcar-cta{grid-template-columns:1fr}} .pcar-certs{display:flex;flex-wrap:wrap;gap:12px} .pcar-cert{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:14.5px;font-weight:600;color:var(--ink-soft);background:var(--bg)} .pcar-cert svg{width:19px;height:19px;color:var(--navy)} @media(max-width:820px){.pcar-head{grid-template-columns:1fr}.pcar-info{position:static} /* buy-box od razu widoczny na mobile (bez czekania na scroll-reveal) */ .pcar-info.reveal-init{opacity:1;transform:none} /* mobile: plakietki NA DÓŁ (pod zdjęciem + buy-boxem), wyśrodkowane, naturalna szerokość */ .pcar-top .wrap{display:flex;flex-direction:column} .pcar-trust{order:1;justify-content:center;margin:clamp(18px,4vw,26px) 0 0} .pcar-trust li{flex:0 0 auto} } .pmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px)} .pmodal[hidden]{display:none} .pmodal__overlay{position:absolute;inset:0;background:rgba(13,17,25,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .pmodal__box{position:relative;z-index:1;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,4vw,42px);box-shadow:0 30px 80px -30px rgba(9,13,35,.6);animation:pmodalIn .28s var(--e-soft) both} @keyframes pmodalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} .pmodal__x{position:absolute;top:14px;right:14px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--ink-mute);cursor:pointer;border-radius:var(--radius);transition:background .18s ease,color .18s ease} .pmodal__x:hover{background:var(--panel);color:var(--ink)} .pmodal__x svg{width:20px;height:20px} .pmodal__title{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em;color:var(--ink);margin:6px 0 8px} .pmodal__lead{font-size:14.5px;color:var(--ink-mute);margin-bottom:22px} /* pasek marek */ .catalog__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);box-shadow:var(--shadow-card)} .catalog__brands{display:flex;flex-wrap:wrap;gap:8px} .brand-chip{font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink-soft);background:var(--panel);border:1px solid transparent;border-radius:var(--radius);padding:9px 14px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease} .brand-chip:hover{border-color:var(--line-strong);color:var(--ink)} .brand-chip.is-active{background:var(--navy);color:#fff} .brand-chip--more{background:transparent;border:1px dashed var(--line-strong);color:var(--muted)} .catalog__adv{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy);white-space:nowrap} .catalog__adv svg{width:18px;height:18px} .catalog__adv:hover{color:var(--red)} .catalog__sub{margin:clamp(22px,3vw,32px) 0 16px;font-size:clamp(18px,2vw,22px);font-weight:700;letter-spacing:-.02em;color:var(--ink)} /* siatka kart */ .catalog__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)} .ccar{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:18px 18px 18px;box-shadow:var(--shadow-card);cursor:pointer;transition:transform .2s var(--e-soft),box-shadow .2s ease} .ccar:hover{transform:translateY(-3px);box-shadow:0 22px 40px -18px rgba(15,22,55,.32)} .ccar:focus-visible{outline:2px solid var(--red);outline-offset:3px} .ccar.is-hidden{display:none} .ccar__brand{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .ccar__model{margin:2px 0 0;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .ccar__media{margin:14px 0 16px;aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--panel),var(--panel-2));border-radius:var(--radius)} .ccar__media svg{width:72%;height:auto;color:var(--navy);opacity:.32} .ccar__price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .ccar__pcol{display:flex;flex-direction:column;gap:2px} .ccar__pcol--r{text-align:right} .ccar__cat{font-size:12px;color:var(--muted-2);text-decoration:line-through} .ccar__from{font-size:14px;color:var(--muted)} .ccar__from strong{display:block;font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.02em} .ccar__ratalbl{font-size:12.5px;color:var(--muted)} .ccar__rataval{display:block;font-size:19px;font-weight:800;color:var(--red);letter-spacing:-.02em} .catalog__powered{margin:clamp(22px,3vw,30px) 0 0;text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)} .catalog__powered strong{color:var(--navy);letter-spacing:.06em} .ccar__btn{margin-top:16px;width:100%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);font-size:14px;font-weight:700;color:#fff;background:var(--navy);border:1px solid var(--navy);border-radius:var(--radius);padding:12px 14px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease} .ccar:hover .ccar__btn,.ccar__btn:hover{background:var(--red);border-color:var(--red)} .catalog__empty{margin:22px 0 0;font-size:15px;color:var(--muted)} .catalog__reset{font-family:var(--font);font-size:15px;font-weight:700;color:var(--navy);background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;padding:0} .catalog__note{margin:clamp(22px,3vw,30px) 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)} .catalog__badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:var(--radius);padding:3px 9px;margin-right:8px;vertical-align:middle} @media (max-width:1000px){.catalog__grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.catalog__grid{grid-template-columns:1fr}.catalog__bar{justify-content:flex-start}} /* ---------- MODAL modelu ---------- */ .cmodal{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)} .cmodal[hidden]{display:none} .cmodal__backdrop{position:absolute;inset:0;background:rgba(11,15,38,.62);opacity:0;transition:opacity .25s ease;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .cmodal.is-open .cmodal__backdrop{opacity:1} .cmodal__panel{position:relative;width:min(920px,100%);max-height:calc(100svh - 2*clamp(12px,3vw,32px));overflow:auto;background:var(--bg);border-radius:var(--radius);box-shadow:0 40px 90px -30px rgba(9,13,35,.6);padding:clamp(22px,3.4vw,38px);transform:translateY(16px) scale(.98);opacity:0;transition:transform .3s var(--e-strong),opacity .3s ease} .cmodal.is-open .cmodal__panel{transform:none;opacity:1} .cmodal__x{position:absolute;top:14px;right:14px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:0;border-radius:var(--radius);color:var(--ink);cursor:pointer;transition:background .18s ease,color .18s ease} .cmodal__x svg{width:20px;height:20px} .cmodal__x:hover{background:var(--navy);color:#fff} .cmodal__brand{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .cmodal__head h3{margin:4px 0 0;font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.025em;color:var(--ink)} .cmodal__meta{margin:6px 0 0;font-size:14px;color:var(--muted)} .cmodal__vars{margin:clamp(20px,2.6vw,28px) 0 0} .cmodal__filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .cfil{font-size:12.5px;font-weight:600;color:var(--ink-soft);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;display:inline-flex;align-items:center;gap:8px} .cfil::after{content:"⌄";font-size:13px;line-height:1;color:var(--muted-2);transform:translateY(-2px)} .cfil--sort{margin-left:auto;color:var(--navy);border-color:var(--line-strong)} .cfil--sort::after{content:""} .cmodal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .cvar{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);padding:20px 16px 18px} .cvar--best{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset} .cvar__disc{position:absolute;top:-11px;right:14px;font-size:11px;font-weight:800;color:#fff;background:var(--red);border-radius:var(--radius);padding:3px 8px} .cvar__tag{position:absolute;top:-11px;left:16px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--navy);border-radius:var(--radius);padding:3px 8px} .cvar__name{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink)} .cvar__spec{margin-top:2px;font-size:12.5px;color:var(--muted)} .cvar__rlabel{margin-top:16px;font-size:12.5px;color:var(--muted)} .cvar__rval{font-size:24px;font-weight:800;color:var(--red);letter-spacing:-.025em;line-height:1.05} .cvar__pcat{margin-top:10px;font-size:12.5px;color:var(--muted-2)} .cvar__pcat s{color:var(--muted-2)} .cvar__price{margin-top:2px;font-size:12.5px;color:var(--muted)} .cvar__price b{display:block;font-size:18px;color:var(--ink);letter-spacing:-.02em} .cvar__cta{margin-top:14px;display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;color:#fff;background:var(--navy);border:1px solid var(--navy);border-radius:var(--radius);padding:11px 12px;transition:background .18s ease,border-color .18s ease} .cvar__cta:hover{background:var(--red);border-color:var(--red)} .cvar__feat{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px} .cvar__feat li{position:relative;padding-left:26px;font-size:13px;line-height:1.35;color:var(--ink-mute)} .cvar__feat li::before{position:absolute;left:0;top:0;width:18px;height:18px;text-align:center;font-weight:800;font-size:13px;border-radius:50%} .cvar__feat li.is-on::before{content:"✓";color:#0b7a4b;background:rgba(16,160,100,.14)} .cvar__feat li.is-off{color:var(--muted-2)} .cvar__feat li.is-off::before{content:"-";color:var(--muted-2);background:var(--panel)} .cmodal__foot{margin:clamp(20px,2.6vw,28px) 0 0;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px} .cmodal__disc{margin:0;max-width:44ch;font-size:13px;line-height:1.5;color:var(--muted)} @media (max-width:760px){.cmodal__grid{grid-template-columns:1fr}.cfil--sort{margin-left:0}.cmodal__foot{flex-direction:column;align-items:flex-start}.cmodal__foot .btn{width:100%}} /* ---------- PRELOADER (lot logo FLIP) ---------- */ .preloader{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none} .preloader__bg{position:absolute;inset:0;background:#fff;transition:opacity .75s var(--e-strong)} .preloader.is-bgout .preloader__bg{opacity:0} .preloader__logo{position:relative;width:min(300px,54vw);height:auto;transform-origin:center center;will-change:transform;transition:opacity .2s ease} .preloader.is-hidden{display:none} body.is-preloading .brand img{opacity:0} @media (prefers-reduced-motion:reduce){.preloader{display:none}} /* ---------- ICON MOTION ---------- */ @keyframes icoIn{from{opacity:0;transform:scale(.62) translateY(5px)}to{opacity:1;transform:none}} .reveal-in .card__ico,.reveal-in .cell__ico,.reveal-in .stat__ico,.reveal-in .step__ico,.reveal-in .xnav__ico,.reveal-in .ccard__ico,.reveal-in .case__ico{animation:icoIn .55s var(--e-soft)} .card__ico,.xnav__ico,.cell__ico,.ccard__ico{transition:transform .32s var(--e-soft),background .25s ease} a.card:hover .card__ico{transform:translateY(-2px) scale(1.07)} .xnav a:hover .xnav__ico{transform:translateY(-3px) scale(1.05)} a.cell:hover .cell__ico{transform:scale(1.1)} /* ---------- RESPONSIVE ---------- */ /* Nav poziomy pokazujemy dopiero gdy 8 pozycji (UPPERCASE, waga 900) + telefon i CTA MIESZCZĄ się bez kolizji; wężej -> hamburger (czytelniej niż duszenie/wejście na numer). */ @media (max-width:1400px){ .site-nav,.header-phone,.header-divider,.header-cta,.header-user{display:none} .nav-toggle{display:block} /* Pasek to jeden box, który sam rośnie na pełny ekran (nie osobna nakładka) */ .site-header{transition:padding .6s var(--e-strong)} /* Otwarte menu: pasek traci padding i zaokrąglenie → przylega do ścianek (animowane) */ body.is-menu-open .site-header,body.is-menu-open .site-header.is-scrolled{padding:0} /* flex-start na stałe - logo i burger nie skaczą na środek przy zamykaniu */ .site-header__inner{overflow:hidden;height:64px;align-items:flex-start;transition:background .4s var(--e-strong),box-shadow .4s var(--e-strong),border-color .4s var(--e-strong),border-radius .6s var(--e-strong),height .6s var(--e-strong)} .site-header__inner.is-open{height:100vh;height:100dvh;border-radius:0} .brand{min-height:42px} .header-menu{display:flex;flex-direction:column;justify-content:flex-start;position:absolute;left:0;right:0;top:64px;bottom:0;padding:8px clamp(22px,6vw,44px) 36px;opacity:0;pointer-events:none;overflow-y:auto;-webkit-overflow-scrolling:touch} /* Na mobile nagłówek nie zmienia się przy scrollu - zerujemy stan is-scrolled */ .site-header.is-scrolled{padding-top:14px} .site-header.is-scrolled .site-header__inner{max-width:none;padding-top:11px;padding-bottom:11px;background:#fff;border-color:var(--line-strong);border-radius:16px;box-shadow:0 14px 40px rgba(9,13,35,.14)} .site-header.is-scrolled .brand img{height:30px} } @media (max-width:1000px){ .card-grid,.hgrid--3,.hgrid--5,.stats,.contact-cards,.family{grid-template-columns:repeat(2,1fr)} .card-grid--4{grid-template-columns:repeat(2,1fr)} .hgrid--5{grid-template-columns:repeat(3,1fr)} } @media (max-width:900px){ .intro__grid,.statement,.footer-top{grid-template-columns:1fr;gap:28px} .xnav{grid-template-columns:1fr} .klist{grid-template-columns:1fr} .footer-cta{justify-content:flex-start} .step{grid-template-columns:1fr;gap:14px} .step__num{font-size:clamp(34px,10vw,52px)} } @media (max-width:680px){ .card-grid,.card-grid--2,.card-grid--4,.hgrid--3,.hgrid--2,.hgrid--5,.stats,.contact-cards,.family{grid-template-columns:1fr} .form-2{grid-template-columns:1fr} .hero{align-items:center} .hero__inner{padding-top:clamp(90px,22vw,130px);padding-bottom:clamp(90px,22vw,130px)} .hero__row{gap:24px} .hero__actions{width:100%} .hero__actions .btn{flex:1} .quick{right:12px;bottom:12px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important} .reveal-init,.card.reveal-init,.case.reveal-init,.kcard.reveal-init,.stat.reveal-init,.ccard.reveal-init,.cell.reveal-init{opacity:1;transform:none} .hgrid[data-reveal]>.cell,.stats[data-reveal]>.stat,.steps[data-reveal]>.step,.contact-cards[data-reveal]>.ccard,.family[data-reveal]>.family__item{opacity:1;transform:none;transition:none} .kcard:hover .kcard__media img,.xnav a:hover::before{transform:none} } /* ── Baza wiedzy: treść pojedynczego artykułu ─────────────────── */ .prose{font-size:clamp(16px,1.55vw,18px);line-height:1.75;color:var(--ink-soft)} .prose > *:first-child{margin-top:0} .prose p{margin:0 0 20px} .prose h2,.prose h3,.prose h4{color:var(--ink);letter-spacing:-.018em;line-height:1.15} .prose h2{font-size:clamp(24px,3vw,34px);margin:44px 0 16px} .prose h3{font-size:clamp(21px,2.4vw,27px);margin:40px 0 14px} .prose h4{font-size:clamp(19px,2vw,22px);margin:36px 0 12px} .prose ul,.prose ol{margin:0 0 22px;padding-left:1.25em} .prose li{margin:0 0 10px;padding-left:.25em} .prose ul li::marker{color:var(--red)} .prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .prose a:hover{color:var(--red-dark)} .prose strong{color:var(--ink);font-weight:700} .prose img{max-width:100%;height:auto;border-radius:var(--radius)} .prose blockquote{margin:28px 0;padding:4px 0 4px 24px;border-left:2px solid var(--red);color:var(--ink);font-weight:500} .prose .post-lead{font-size:clamp(18px,1.9vw,21px);line-height:1.6;color:var(--ink);font-weight:500; margin:0 0 34px;padding:0 0 28px;border-bottom:1px solid var(--line)} /* ── Paginacja listingu ───────────────────────────────────────── */ .pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:48px} .pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px; padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink-soft); font-weight:600;font-size:15px;text-decoration:none;transition:background .2s var(--e-soft),color .2s var(--e-soft),border-color .2s var(--e-soft)} .pagination .page-numbers:hover{border-color:var(--red);color:var(--red)} .pagination .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff} .pagination .page-numbers.dots{border-color:transparent} /* ── Formularz GAP: pola rozszerzone (select, radio, fieldset) ─── */ .brief-form select{font-family:var(--font);padding:14px 15px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:15px;background:var(--bg);color:var(--ink);transition:border-color .18s ease;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px} .brief-form select:focus{border-color:var(--red);outline:none} .brief-form fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .brief-form legend{padding:0;font-size:13px;font-weight:600;color:var(--ink-soft)} .choices{display:flex;flex-wrap:wrap;gap:8px} .choice{position:relative;display:inline-flex} .choice input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer} .choice span{display:inline-flex;align-items:center;padding:11px 16px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--ink-soft);transition:background .18s ease,border-color .18s ease,color .18s ease} .choice input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff} .choice input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px} .brief--dark .choice span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:var(--cream)} .brief--dark .choice:hover span{border-color:rgba(255,255,255,.45);color:#fff} /* Kolumna: dlugie listy wyboru (np. zakres OC / towary) - kazda opcja pelna szerokosc. */ .choices--col{flex-direction:column;align-items:stretch} .choices--col .choice{display:flex} .choices--col .choice span{width:100%} /* Podpowiedz pod naglowkiem sekcji formularza. */ .form-hint{margin:-6px 0 12px;font-size:13px;color:var(--muted)} .brief--dark .form-hint{color:var(--cream-soft)} /* Zgody (checkbox + drobny tekst w jednym rzedzie). */ .brief-form label.consent{flex-direction:row;align-items:flex-start;gap:10px;font-size:12.5px;font-weight:500;line-height:1.45} .brief-form label.consent input{width:auto;margin-top:2px;flex:none} /* Ostylowany input pliku (ukryty natywny + przycisk + nazwa). */ .filefield{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--ink-soft)} .filefield__control{position:relative;display:flex;align-items:center;gap:12px;padding:7px 12px 7px 7px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg);cursor:pointer;transition:border-color .18s ease} .filefield__control:hover{border-color:var(--navy)} .filefield__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer} .filefield__btn{flex:none;display:inline-flex;align-items:center;padding:10px 18px;border-radius:var(--radius);background:var(--navy);color:#fff;font-size:13px;font-weight:700} .filefield__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:13.5px;color:var(--muted)} .filefield__input:focus-visible ~ .filefield__btn{outline:2px solid var(--red);outline-offset:2px} .brief--dark .filefield{color:var(--cream-soft)} .brief--dark .filefield__control{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)} .brief--dark .filefield__name{color:var(--cream-soft)} .brief--dark .choice input:checked + span{background:var(--red);border-color:var(--red);color:#fff} .brief--dark .choice input:focus-visible + span{outline-color:var(--red-bright)} .form-full{grid-column:1/-1} .form-sub{grid-column:1/-1;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:8px 0 -2px} .form-sub:first-child{margin-top:0} /* Komunikat po wysłaniu */ .formmsg{grid-column:1/-1;padding:16px 18px;border-radius:var(--radius);font-size:15px;font-weight:600;border:1px solid transparent} .formmsg--ok{background:rgba(16,160,100,.1);border-color:rgba(16,160,100,.35);color:#0b7a4b} .formmsg--error{background:rgba(239,65,48,.08);border-color:rgba(239,65,48,.35);color:var(--red-dark)} .errpage{min-height:100svh;background:var(--navy-deep);color:var(--cream);display:flex;align-items:center;justify-content:center;padding:clamp(32px,7vw,80px) var(--pad);position:relative;overflow:hidden} .errpage::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 560px at 50% -8%,rgba(239,65,48,.2),transparent 62%);pointer-events:none} .errpage__inner{position:relative;max-width:660px;text-align:center;display:flex;flex-direction:column;align-items:center} .errpage__logo{display:inline-block;margin:0 0 clamp(26px,5vw,44px)} .errpage__logo img{height:42px;width:auto} .errpage__code{font-family:var(--font);font-size:clamp(96px,23vw,210px);line-height:.86;font-weight:900;letter-spacing:-.05em;color:#fff;margin:0} .errpage__code span{color:var(--red)} .errpage h1{margin:18px 0 14px;color:#fff} .errpage__lead{font-size:clamp(16px,1.8vw,19px);line-height:1.6;color:var(--cream-soft);max-width:46ch;margin:0 auto clamp(28px,4vw,36px)} .errpage__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .authpage{min-height:100svh;background:var(--navy-deep);display:flex;align-items:center;justify-content:center;padding:clamp(24px,6vw,64px) var(--pad);position:relative;overflow:hidden} .authpage::before{content:"";position:absolute;inset:0;background:radial-gradient(1000px 520px at 50% -12%,rgba(239,65,48,.18),transparent 62%);pointer-events:none} .authpage__inner{position:relative;width:100%;max-width:430px;display:flex;flex-direction:column;align-items:center;gap:26px} .authpage__logo{display:block} .authpage__logo img{height:40px;width:auto} .authpage__card{width:100%;background:#fff;border-radius:var(--radius);padding:clamp(28px,5vw,40px);box-shadow:0 30px 70px -28px rgba(0,0,0,.55);transform-origin:center;animation:authCardIn .85s cubic-bezier(.34,1.5,.5,1) both} @keyframes authCardIn{from{opacity:0;transform:scale(.42)}55%{opacity:1}to{opacity:1;transform:scale(1)}} @media (prefers-reduced-motion:reduce){.authpage__card{animation:none}} .authpage__card h1{font-size:clamp(24px,3vw,30px);color:var(--ink);margin:0 0 6px} .authpage__sub{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 24px} .authpage__err{background:rgba(239,65,48,.08);border:1px solid rgba(239,65,48,.35);color:var(--red-dark);padding:11px 14px;border-radius:var(--radius);font-size:14px;font-weight:600;margin:0 0 18px} .authform{display:flex;flex-direction:column;gap:16px} .authform label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--ink-soft)} .authform input{font-family:var(--font);font-size:15px;padding:13px 14px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;color:var(--ink);transition:border-color .16s ease} .authform input:focus{outline:none;border-color:var(--red)} .authform button{margin-top:6px;background:var(--red);color:#fff;border:0;border-radius:var(--radius);padding:14px 18px;font-family:var(--font);font-size:15px;font-weight:700;letter-spacing:-.01em;cursor:pointer;transition:background .18s ease} .authform button:hover{background:var(--red-dark)} .authpage__foot{color:var(--cream-soft);font-size:14px} .authpage__foot a{color:#fff;font-weight:600} .authpage__foot a:hover{color:var(--red-bright)} /* Gwarancje - tabela porownawcza pod autem (publiczna) */ .warranty-table-wrap{overflow-x:auto;border-radius:12px} .warranty-table{border-collapse:collapse;width:100%;font-size:15px;background:#fff} .warranty-table th,.warranty-table td{border:1px solid #e2e6ef;padding:12px 14px;text-align:center} .warranty-table thead th{background:#1c265f;color:#fff} .warranty-table .warranty-corner,.warranty-table .warranty-feat{text-align:left} .warranty-banner{display:block;max-height:44px;width:auto;margin:0 auto 6px} .warranty-pkg{display:block;font-weight:700} .warranty-price{display:block;color:#ef4130;font-weight:700;margin-top:2px} .warranty-period{display:block;font-size:13px;opacity:.85;margin-top:2px;font-weight:400} .warranty-mark .yes{color:#1f9d55;font-weight:700} .warranty-mark .no{color:#9aa3bd} .warranty-val{font-weight:600;color:#1b2440} .warranty-note{display:flex;align-items:flex-start;gap:10px;max-width:760px;margin:18px auto 0; padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel); color:var(--ink-mute);font-size:14.5px;line-height:1.55} .warranty-note svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--red)} .warranty-star{color:#ef4130;font-weight:700;font-size:.72em;margin-left:1px;top:-.4em} .warranty-star-note{max-width:760px;margin:12px auto 0;text-align:center;color:var(--muted);font-size:12px;line-height:1.5;opacity:.85} /* Modal gwarancji na karcie pojazdu: pełna tabela + przyciski „Zapytaj" pod kolumnami -> formularz */ .arrow-link--btn{background:none;border:0;padding:0;font:inherit} .pmodal__box--wide{max-width:760px} .gwar-pick .warranty-table-wrap{margin-top:6px} .warranty-ask-row td{border-top:1px solid var(--line);padding-top:14px;background:transparent} td.warranty-ask{text-align:center;padding:14px 8px} td.warranty-ask .btn{padding:9px 18px;white-space:nowrap} .gwar-back{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;margin-bottom:14px;font-family:var(--font);font-size:14px;font-weight:600;color:var(--ink-mute);cursor:pointer;transition:color .18s ease} .gwar-back:hover{color:var(--red)} .gwar-back span{transition:transform .2s ease} .gwar-back:hover span{transform:translateX(-4px)} /* Kalkulator ubezpieczeń (na ciemnym .brief--dark) */ .calc-result{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;margin-top:22px;padding:22px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.05)} .calc-result[hidden]{display:none} .calc-result__label{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--cream-soft)} .calc-result__range{font-size:clamp(24px,4.6vw,34px);font-weight:800;color:#fff;line-height:1.1} .calc-result__range span{font-size:.5em;font-weight:600;color:var(--cream-soft);margin:0 8px;vertical-align:middle} .calc-hint{margin:16px 0 0;text-align:center;color:var(--cream-soft);font-size:14px} .calc-hint[hidden]{display:none} .calc-note{margin:14px auto 0;max-width:60ch;text-align:center;font-size:12.5px;color:rgba(238,241,248,.6);line-height:1.55} .calc-cta{margin-top:20px;text-align:center} /* Flash po wysłaniu zapytania o finansowanie */ .fin-flash{margin:0 0 18px;padding:13px 16px;border-radius:12px;font-size:14.5px;font-weight:600;border:1px solid transparent} .fin-flash--ok{background:rgba(31,157,85,.12);border-color:rgba(31,157,85,.4);color:#12813f} .fin-flash--err{background:rgba(239,65,48,.1);border-color:rgba(239,65,48,.4);color:#c4362a} /* Kreator „Uzyskaj finansowanie" (modal na karcie auta) */ .finwiz__bar{display:flex;align-items:center;gap:14px;margin:6px 0 20px} .finwiz__step{font-size:13px;color:var(--ink-mute);white-space:nowrap} .finwiz__step b{color:var(--ink)} .finwiz__track{flex:1;height:6px;background:var(--panel);border-radius:99px;overflow:hidden} .finwiz__track i{display:block;height:100%;width:20%;background:var(--red);border-radius:99px;transition:width .3s ease} .finwiz__pane{display:none;flex-direction:column;gap:16px} .finwiz__pane.is-active{display:flex;animation:pmodalIn .22s var(--e-soft) both} .finwiz__form input[type="range"]{width:100%;accent-color:var(--red);margin-top:6px; padding:0;border:0;background:transparent} .fin-vat{align-self:center;display:inline-flex;border:1px solid var(--line-strong);border-radius:99px;overflow:hidden;background:var(--panel)} .fin-vat__opt{border:0;background:none;padding:8px 20px;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink-mute);cursor:pointer;transition:background .15s ease,color .15s ease} .fin-vat__opt.is-on{background:var(--red);color:#fff} .finwiz__add{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer} .finwiz__add input{width:18px;height:18px;accent-color:var(--red)} .finwiz__ok{text-align:center;padding:14px 0} .finwiz__okico{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(31,157,85,.14);color:#1f9d55;margin-bottom:14px} .finwiz__okico svg{width:34px;height:34px} .finwiz__nav{display:flex;align-items:center;gap:12px;margin-top:22px} .finwiz__nav .btn[hidden]{display:none} /* [hidden] musi wygrac z .btn{display:inline-flex} - inaczej „Dalej"/„Wyślij" nie znikaja */ .finwiz .calc-result{background:var(--panel);border-color:var(--line)} .finwiz .calc-result__label{color:var(--ink-mute)} .finwiz .calc-result__range{color:var(--ink)} /* wizard stoi na jasnym tle (modal/karta) - jasne kolory z ciemnej sekcji byly bialy-na-bialym */ .finwiz .calc-hint{color:var(--ink-mute)} .finwiz .calc-note{color:var(--ink-mute)} @media (max-width:560px){ .finwiz__nav{flex-direction:column;align-items:stretch} .finwiz__nav > span{display:none} .finwiz__nav .btn{width:100%} } /* Baner finansowania na karcie auta (Finansowanie / Ubezpieczenia / Gwarancja) */ .finband{position:relative;overflow:hidden;border-radius:20px;padding:clamp(28px,4vw,52px); background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff; box-shadow:0 34px 80px -40px rgba(9,13,35,.7)} .finband::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(760px 340px at 100% -10%,rgba(239,65,48,.18),transparent 60%)} .finband__head{position:relative;max-width:640px;margin-bottom:clamp(22px,3vw,34px)} .finband__head .eyebrow{margin-bottom:8px} .finband__head h2{color:#fff} .finband__grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px)} .finband__item{display:flex;flex-direction:column;align-items:flex-start; padding-left:clamp(22px,3vw,40px);border-left:1px solid rgba(255,255,255,.12)} .finband__item:first-child{padding-left:0;border-left:0} .finband__ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px; background:rgba(239,65,48,.16);color:var(--red-bright);margin-bottom:16px} .finband__ico svg{width:26px;height:26px} .finband__item h3{font-size:19px;margin:0 0 8px;color:#fff} .finband__item p{margin:0 0 16px;color:var(--cream-soft);font-size:14.5px;line-height:1.6} .finband__link{margin-top:auto;display:inline-flex;align-items:center;gap:8px; font-weight:700;font-size:15px;color:#fff;cursor:pointer;background:none;border:0;padding:0; font-family:inherit} .finband__link span{transition:transform .2s ease;color:var(--red-bright)} .finband__link:hover{color:var(--red-bright)} .finband__link:hover span{transform:translateX(5px)} @media (max-width:820px){ .finband__grid{grid-template-columns:1fr;gap:0} .finband__item{padding:22px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.12)} .finband__item:first-child{padding-top:0;border-top:0} } /* Wyszukiwarka na stronie glownej (kieruje do multisalonu, zakladka „Nasze") */ /* Hero: karta wyszukiwarki na DOLE (na tle ze zdjęciem). Napis „Twoje oczekiwania" jest w .intro pod hero. */ .hero.hero--search{align-items:flex-end} .home-search{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,34px);box-shadow:0 24px 60px -28px rgba(9,13,35,.6)} /* Sekcja pod hero z hasłem (ciemne tło, biały napis - jak wcześniej w hero) */ .intro{background:var(--navy-deep);color:var(--cream)} .intro .wrap{padding-top:clamp(60px,8vw,110px);padding-bottom:clamp(60px,8vw,110px)} .intro h1{max-width:14ch;color:#fff;font-size:clamp(42px,7vw,90px);line-height:.98;letter-spacing:-.035em;margin:0} .intro h1 em{font-style:normal;color:var(--red-bright)} .home-search__head{margin-bottom:18px} .home-search__head .eyebrow{margin:0} .home-search__head h2{margin:6px 0 0} /* flex zamiast auto-fit grid: pola wypełniają całą szerokość karty, bez pustych torów z prawej */ .home-search__form{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-bottom:0} .home-search__form label{flex:1 1 160px;min-width:0} .home-search__form .usearch__submit{flex:0 0 auto;grid-column:auto} @media (max-width:560px){ .home-search__form label{flex-basis:calc(50% - 6px)} .home-search__form .usearch__submit{flex-basis:100%;justify-content:center} } /* --- Kalkulator raty leasingu (/leasing/ i /leasing/kalkulator/) --- */ .klc{position:relative} .klc__title{position:relative;font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.01em;color:#fff;margin:0 0 6px;padding-bottom:14px} .klc__title::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;background:var(--red)} .klc__grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,44px);margin-top:24px;align-items:start} .klc__field{margin-bottom:18px} .klc__field h4{margin:0 0 9px;font-size:13px;font-weight:700;color:var(--cream-soft);letter-spacing:.01em} .klc__select{width:100%;font-family:var(--font);padding:14px 40px 14px 15px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);font-size:15px;background:rgba(255,255,255,.06);color:#fff;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c7cce0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;transition:border-color .18s ease,background .18s ease} .klc__select:focus{outline:none;border-color:var(--red-bright);background:rgba(255,255,255,.1)} .klc__price{position:relative;display:flex;align-items:center} .klc__price-ico{position:absolute;left:14px;display:inline-flex;color:var(--cream-soft);pointer-events:none} .klc__price-ico svg{width:18px;height:18px} .klc__price input{width:100%;font-family:var(--font);padding:14px 15px 14px 42px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);font-size:16px;font-weight:600;background:rgba(255,255,255,.06);color:#fff;transition:border-color .18s ease,background .18s ease} .klc__price input:focus{outline:none;border-color:var(--red-bright);background:rgba(255,255,255,.1)} .klc__price input[readonly]{cursor:not-allowed;opacity:.9} .klc__price input[readonly]:focus{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)} .klc__price input::placeholder{color:rgba(238,241,248,.5)} .klc__seg{display:flex;flex-wrap:wrap;gap:8px} .klc__opt{font-family:var(--font);cursor:pointer;padding:11px 16px;min-width:48px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);font-size:14px;font-weight:700;color:var(--cream);background:rgba(255,255,255,.06);transition:background .16s ease,border-color .16s ease,color .16s ease} .klc__opt:hover{border-color:rgba(255,255,255,.5);color:#fff} .klc__opt.is-on{background:var(--red);border-color:var(--red);color:#fff} .klc__opt:focus-visible{outline:2px solid var(--red-bright);outline-offset:2px} .klc__result{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:clamp(20px,2.4vw,28px)} .klc__rate-title{font-size:13px;font-weight:700;color:var(--cream-soft);letter-spacing:.02em} .klc__rate-amount{margin:6px 0 2px;font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.05} .klc__rate-cur{font-size:.5em;font-weight:700;color:var(--cream-soft)} .klc__note{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:#eef1f8} .klc__contact{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)} @media (max-width:820px){ .klc__grid{grid-template-columns:1fr;gap:26px} } /* --- Kalkulator leasingu: wybor pojazdu (przycisk -> modal) --- */ .klc__vehicle{width:100%;display:flex;align-items:center;gap:10px;font-family:var(--font);cursor:pointer;padding:14px 15px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);font-size:15px;font-weight:600;background:rgba(255,255,255,.06);color:#fff;text-align:left;transition:border-color .16s ease,background .16s ease} .klc__vehicle:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)} .klc__vehicle-ico{display:inline-flex;color:var(--cream-soft)} .klc__vehicle-ico svg{width:17px;height:17px} .klc__vehicle-clear{margin-top:8px;background:none;border:0;padding:0;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--cream-soft);cursor:pointer;text-decoration:underline} .klc__vehicle-clear:hover{color:#fff} .klc__cta{margin-top:20px;width:100%;justify-content:center} /* --- Kalkulator leasingu: modale --- */ html.klc-noscroll,body.klc-noscroll{overflow:hidden} .klc-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px} .klc-modal[hidden]{display:none} .klc-modal__overlay{position:absolute;inset:0;background:rgba(9,13,35,.62);backdrop-filter:blur(2px)} .klc-modal__dialog{position:relative;display:flex;flex-direction:column;width:100%;max-width:520px;max-height:86vh;background:var(--bg);color:var(--ink);border-radius:12px;box-shadow:0 40px 90px -30px rgba(9,13,35,.7);padding:clamp(22px,3vw,34px);overflow:hidden} .klc-modal__dialog--wide{max-width:760px} .klc-modal__x{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;border-radius:8px;transition:background .15s ease,color .15s ease} .klc-modal__x:hover{background:var(--panel);color:var(--ink)} .klc-modal__title{margin:0 0 16px;font-size:clamp(19px,2.2vw,24px);font-weight:800;letter-spacing:-.01em;color:var(--navy);padding-right:34px} /* mini-wyszukiwarka pojazdow */ .klc-pick__filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px} .klc-pick__q{grid-column:1 / -1} .klc-pick__q,.klc-pick__sel{min-width:0;width:100%;font-family:var(--font);padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:14px;background:var(--bg);color:var(--ink)} .klc-pick__sel{appearance:none;-webkit-appearance:none;text-overflow:ellipsis;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px} .klc-pick__q:focus,.klc-pick__sel:focus{outline:none;border-color:var(--red)} .klc-pick__list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin:0 -6px;padding:0 6px} .klc-pick__row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--bg);transition:background .14s ease,border-color .14s ease} .klc-pick__row:hover{background:var(--panel);border-color:var(--line-strong)} .klc-pick__row[hidden]{display:none} .klc-pick__thumb{width:72px;height:54px;object-fit:cover;border-radius:7px;background:var(--img);flex:none} .klc-pick__thumb--empty{display:inline-block} .klc-pick__info{display:flex;flex-direction:column;gap:2px;min-width:0} .klc-pick__name{font-size:14.5px;font-weight:700;color:var(--ink)} .klc-pick__name em{font-style:normal;color:var(--muted);font-weight:600} .klc-pick__price{font-size:13px;font-weight:700;color:var(--red)} .klc-pick__empty{margin:14px 2px;font-size:14px;color:var(--muted)} /* ankieta leasingowa */ .klc-survey{gap:14px} .klc-survey.brief-form{flex:1;min-height:0;overflow-y:auto;padding-right:2px} .klc-quiz{display:flex;flex-direction:column;gap:12px} .klc-quiz__row{display:flex;flex-direction:column;gap:8px} .klc-quiz__row > p{margin:0;font-size:14px;font-weight:600;color:var(--ink-soft)} .klc-yn{display:flex;gap:8px} .klc-yn__opt{position:relative;display:inline-flex;flex:1} .klc-yn__opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer} .klc-yn__opt span{flex:1;display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:14px;font-weight:700;color:var(--ink-soft);transition:background .16s ease,border-color .16s ease,color .16s ease} .klc-yn__opt input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff} .klc-yn__opt input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px} .klc-msg{padding:13px 15px;border-radius:10px;font-size:13.5px;line-height:1.5;border:1px solid transparent} .klc-msg--ok{background:rgba(26,125,74,.1);border-color:rgba(26,125,74,.35);color:#127a45} .klc-msg--warn{background:rgba(214,143,20,.12);border-color:rgba(214,143,20,.4);color:#a86a06} .klc-survey__sum{margin:0;padding:11px 14px;border-radius:10px;background:var(--panel);font-size:13px;font-weight:700;color:var(--navy)} @media (max-width:640px){ .klc-pick__filters{grid-template-columns:repeat(2,minmax(0,1fr))} } /* --- Kalkulator leasingu: animacje (wykup przy zmianie okresu + zmiana raty) --- */ .klc__opt--enter,.klc__opt--leave{min-width:0;overflow:hidden;white-space:nowrap} @keyframes klc-opt-in{from{opacity:0;transform:translateY(6px) scale(.9);max-width:0;padding-left:0;padding-right:0;margin-left:-8px}to{opacity:1;transform:none;max-width:140px;margin-left:0}} .klc__opt--enter{animation:klc-opt-in .34s cubic-bezier(.22,.61,.36,1) both} @keyframes klc-opt-out{from{opacity:1;transform:scale(1);max-width:140px}to{opacity:0;transform:scale(.8);max-width:0;padding-left:0;padding-right:0;margin-left:-8px;border-width:0}} .klc__opt--leave{pointer-events:none;animation:klc-opt-out .26s cubic-bezier(.4,0,1,1) forwards} @keyframes klc-bump{0%{transform:scale(1)}32%{transform:scale(1.05)}100%{transform:scale(1)}} .klc__rate-amount{transform-origin:left center} .klc__rate-amount.is-bump{animation:klc-bump .4s cubic-bezier(.22,.61,.36,1)} @media (prefers-reduced-motion: reduce){ .klc__opt--enter,.klc__opt--leave{animation:none} .klc__rate-amount.is-bump{animation:none} } /* Kalkulator leasingu: chowamy scrollbary w modalach (był w brzydkim miejscu - w środku dialogu) */ .klc-modal__dialog, .klc-survey, .klc-pick__list { scrollbar-width: none; -ms-overflow-style: none; } .klc-modal__dialog::-webkit-scrollbar, .klc-survey::-webkit-scrollbar, .klc-pick__list::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Dokumenty pojazdu - kafelki w modalu na stronie auta */ .docgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px} .docgrid--modal{margin-top:6px} .docbox{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);text-decoration:none;color:var(--ink);text-align:center;transition:border-color .16s ease,transform .16s ease} .docbox:hover{border-color:var(--red);transform:translateY(-2px)} .docbox__ico svg{width:38px;height:38px;color:var(--muted)} .docbox--pdf .docbox__ico svg{color:#c4362a} .docbox--image .docbox__ico svg{color:#1f9d55} .docbox--word .docbox__ico svg{color:#2563eb} .docbox--excel .docbox__ico svg{color:#167a45} .docbox--archive .docbox__ico svg{color:#a8710a} .docbox__name{font-size:12.5px;font-weight:600;line-height:1.3;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* „Dokumenty" pod galerią pojazdu (przeniesione z prawego CTA) */ .pcar-docsbtn{width:100%;margin-top:14px;justify-content:center;gap:8px} .pcar-docsbtn svg{width:18px;height:18px} /* Znaki jakości - osobna pełna sekcja pod hero (wyśrodkowane, bez dolnego marginesu listy) */ .pcar-trust-sec{padding:clamp(18px,3vw,30px) 0} .pcar-trust-sec .pcar-trust{margin:0} /* --- Wspólny kalkulator na stronie auta: Leasing / Kredyt / Ubezpieczenie --- */ .ccalc__pills{display:flex;gap:6px;padding:5px;margin:0 0 22px;border:1px solid rgba(255,255,255,.16);border-radius:99px;background:rgba(255,255,255,.05)} .ccalc__pill{flex:1;border:0;background:none;padding:10px 14px;border-radius:99px;font-family:var(--font);font-size:14px;font-weight:700;color:var(--cream-soft);cursor:pointer;transition:background .16s ease,color .16s ease} .ccalc__pill:hover{color:#fff} .ccalc__pill.is-on{background:var(--red);color:#fff} .ccalc__field{margin-bottom:16px} .ccalc__field[hidden]{display:none} .ccalc__field h4{margin:0 0 9px;font-size:13px;font-weight:700;color:var(--cream-soft)} .ccalc__grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ccalc__price,.ccalc__inp,.ccalc__sel{width:100%;font-family:var(--font);padding:13px 15px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);font-size:15px;font-weight:600;background:rgba(255,255,255,.06);color:#fff} .ccalc__price:focus,.ccalc__inp:focus,.ccalc__sel:focus{outline:none;border-color:var(--red-bright);background:rgba(255,255,255,.1)} .ccalc__price::placeholder,.ccalc__inp::placeholder{color:rgba(238,241,248,.5)} .ccalc__sel{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c7cce0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px} .ccalc__seg{display:flex;flex-wrap:wrap;gap:8px} .ccalc__opt{font-family:var(--font);cursor:pointer;padding:11px 16px;min-width:48px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);font-size:14px;font-weight:700;color:var(--cream);background:rgba(255,255,255,.06);transition:background .16s ease,border-color .16s ease,color .16s ease} .ccalc__opt:hover{border-color:rgba(255,255,255,.5);color:#fff} .ccalc__opt.is-on{background:var(--red);border-color:var(--red);color:#fff} .ccalc__result{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)} .ccalc__rate[hidden]{display:none} .ccalc__rate-title{font-size:13px;font-weight:700;color:var(--cream-soft);letter-spacing:.02em} .ccalc__rate-amount{margin:6px 0 2px;font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.05} .ccalc__rate-cur{font-size:.5em;font-weight:700;color:var(--cream-soft)} .ccalc__note{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:#eef1f8} .ccalc__empty{margin:8px 0 0;font-size:13px;color:var(--cream-soft)} .ccalc__cta{margin-top:16px} .ccalc__cta-btn{width:100%;justify-content:center;gap:8px} @media(max-width:560px){.ccalc__grid2{grid-template-columns:1fr}} /* Kalkulator auta: chowanie CTA (`.btn` nadpisywał [hidden]) + animacje przycisków wykupu */ .ccalc__cta-btn[hidden]{display:none} .ccalc__opt--enter,.ccalc__opt--leave{min-width:0;overflow:hidden;white-space:nowrap} .ccalc__opt--enter{animation:klc-opt-in .34s cubic-bezier(.22,.61,.36,1) both} .ccalc__opt--leave{pointer-events:none;animation:klc-opt-out .26s cubic-bezier(.4,0,1,1) forwards} @media (prefers-reduced-motion: reduce){.ccalc__opt--enter,.ccalc__opt--leave{animation:none}} /* Kalkulator auta: puls kwoty przy zmianie wyniku (reuse keyframe klc-bump) */ .ccalc__rate-amount{transform-origin:left center} .ccalc__rate-amount.is-bump{animation:klc-bump .4s cubic-bezier(.22,.61,.36,1)} @media (prefers-reduced-motion: reduce){.ccalc__rate-amount.is-bump{animation:none}} /* Modal rezerwacji: pigulki (Wniosek / Zamowienie), info o zaliczce + potwierdzenie zamowienia */ .rezpills{display:flex;gap:6px;margin:10px 0 18px;padding:5px;background:rgba(9,13,35,.05);border:1px solid var(--line);border-radius:999px} .rezpill{flex:1;padding:9px 14px;border:0;background:transparent;border-radius:999px;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink-mute);cursor:pointer;transition:background .18s,color .18s} .rezpill.is-on{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(9,13,35,.12)} .rez-deposit{margin:6px 0 4px;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;background:rgba(9,13,35,.03)} .rez-deposit>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .rez-deposit>div span{font-size:13px;color:var(--ink-mute);font-weight:600} .rez-deposit>div b{font-size:20px;color:var(--ink);letter-spacing:-.02em} .rez-deposit p{margin:6px 0 0;font-size:12.5px;color:var(--ink-mute);line-height:1.5} .pcar-order-ok{margin:0 0 20px;padding:20px 22px;border:1px solid rgba(31,157,85,.4);background:rgba(31,157,85,.08);border-radius:16px} .pcar-order-ok__head{display:flex;align-items:center;gap:10px;margin-bottom:6px} .pcar-order-ok__head svg{width:24px;height:24px;color:#12813f;flex:0 0 auto} .pcar-order-ok__head h3{margin:0;font-size:19px;letter-spacing:-.02em;color:var(--ink)} .pcar-order-ok>p{margin:0 0 14px;font-size:14.5px;color:var(--ink);line-height:1.55} .pcar-order-ok>p.muted{color:var(--ink-mute);font-size:13px;margin:12px 0 0} .pcar-order-ok__dl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0} .pcar-order-ok__dl>div{display:flex;justify-content:space-between;gap:14px;padding:11px 15px;background:var(--bg)} .pcar-order-ok__dl dt{font-size:13px;color:var(--ink-mute)} .pcar-order-ok__dl dd{margin:0;font-size:14px;color:var(--ink);text-align:right;word-break:break-word} /* Zamowienie: krok „dane do przelewu" + potwierdzenie (spinner -> ptaszek) */ .rezorder__dl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 16px} .rezorder__dl>div{display:flex;justify-content:space-between;gap:14px;padding:12px 15px;background:var(--bg)} .rezorder__dl dt{font-size:13px;color:var(--ink-mute)} .rezorder__dl dd{margin:0;font-size:14px;font-weight:600;color:var(--ink);text-align:right;word-break:break-word} .rezorder__err{color:var(--red,#b3241f);font-size:13.5px;font-weight:600;margin:0 0 12px} .rezorder__actions{display:flex;gap:10px;flex-wrap:wrap} .rezorder__actions .btn{flex:1 1 auto} .rezorder__done{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:200px;padding:24px 0;text-align:center} .rezorder__done[hidden]{display:none} /* [hidden] musi wygrac z display:flex - inaczej spinner widoczny od razu */ .rezorder__done p{margin:0;font-size:15.5px;font-weight:700;color:var(--ink)} .rezorder__badge{width:64px;height:64px;line-height:0} .rezorder__spinner{width:64px;height:64px;color:var(--red,#e11f26);animation:rezspin .8s linear infinite} .rezorder__check{width:64px;height:64px;color:#12813f;display:none} .rezorder__badge.is-done .rezorder__spinner{display:none} .rezorder__badge.is-done .rezorder__check{display:block;animation:rezpop .42s cubic-bezier(.22,.61,.36,1) both} @keyframes rezspin{to{transform:rotate(360deg)}} @keyframes rezpop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}} @media (prefers-reduced-motion: reduce){.rezorder__spinner{animation-duration:1.6s}.rezorder__check{animation:none}} /* Modal finansowania: ankieta - pytania, segmenty (Prywatnie/Firma, Tak/Nie), NIP, ikona ostrzezenia */ .finwiz__q{display:block} .finwiz__q[hidden]{display:none} /* [hidden] musi wygrac z display:block (NIP dla firmy, pytanie zagranica) */ .finwiz__q > span{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px} .fin-seg{display:flex;gap:6px;border:1px solid var(--line-strong);border-radius:12px;padding:4px;background:var(--panel)} .fin-seg__opt{flex:1;border:0;background:none;padding:9px 14px;border-radius:9px;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink-mute);cursor:pointer;transition:background .15s ease,color .15s ease} .fin-seg__opt.is-on{background:var(--red);color:#fff} .fin-nip{display:flex;gap:8px} .fin-nip input{flex:1;min-width:0} .fin-note{margin:8px 0 0;font-size:13px;color:var(--ink-mute)} .finwiz__okico--warn{background:rgba(214,158,46,.16);color:#c2870a} /* Wizard ubezpieczenia: checkbox dodatkow + karta inline (na /ubezpieczenia/kalkulator/) */ .finwiz__chk{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;padding:5px 0} .finwiz__chk input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--red)} .inswiz-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,4vw,36px);box-shadow:0 20px 60px -30px rgba(9,13,35,.35)} /* Wizard ubezpieczenia: dodatki (checkboxy) obok siebie */ .finwiz__chks{display:flex;flex-wrap:wrap;gap:10px 22px} .finwiz__chks .finwiz__chk{padding:2px 0} /* Pola tylko do odczytu (wartosc/rok/moc z auta na karcie) - wizualnie wyszarzone */ .ccalc__inp[readonly], .finwiz__form input[readonly]{opacity:.6;cursor:not-allowed} /* Karta auta: wyposazenie pod opisem - siatka pozycji z ptaszkami */ .pcar-equip__head{margin-top:36px} .pcar-equip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:11px 28px;max-width:900px} .pcar-equip li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;color:var(--ink-soft)} .pcar-equip li svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px;color:var(--red)}