/* AK Serwis — system wizualny motywu (tokeny + komponenty). Źródło: docs/akserwis.pl/design/mockups/style.css (przeniesione 1:1). Fonty (Rubik + Nunito Sans) ładowane przez wp_enqueue_style — patrz inc/enqueue.php. UWAGA — kolizje nazw klas z WordPressem/WooCommerce: WP dokleja do klasy 'blog'/'search' (+ post_class() dokleja 'post' do artykułów), więc generyczne nazwy komponentów z makiety nadpisywały . Skomponentowane na 'ak-': .ak-blog, .ak-post, .ak-search. Przy budowie M3/M4 namespace'uj kolejne ryzykowne nazwy z makiety, gdy zaczną być renderowane: .price/.summary/.cart/.products/.columns/.related (kolizja z Woo). */ :root{ --navy:#0E2A47; --navy-700:#1E3A5F; --slate-900:#0F172A; --slate-700:#334155; --slate-500:#64748B; --slate-300:#CBD5E1; --bg:#F8FAFC; --surface:#FFFFFF; --muted:#EDF2F7; --border:#E2E8F0; --accent:#EA580C; --accent-600:#C2410C; --accent-700:#9A3412; --safe:#16A34A; --alarm:#DC2626; /* Pomarańcz marki (--accent) na biały tekst daje 3,56:1 — poniżej progu AA 4,5:1. Dla powierzchni NIOSĄCYCH TEKST (przyciski CTA) używamy więc --accent-ink (=--accent-600, 5,18:1); --accent zostaje do ikon, obramowań i plakietek, gdzie obowiązuje próg 3:1. Ta sama rampa pomarańczy, tylko ciemniejszy stopień. */ --accent-ink:var(--accent-600); --font-head:'Rubik',system-ui,Arial,sans-serif; --font-body:'Nunito Sans',system-ui,Arial,sans-serif; --r:14px; --r-sm:10px; --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.06); --shadow-lg:0 12px 40px rgba(15,23,42,.12); --maxw:1200px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--font-body);color:var(--slate-900);background:var(--bg);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);line-height:1.2;margin:0 0 .4em} h1{font-size:clamp(1.9rem,5vw,3.1rem);font-weight:800;letter-spacing:-.5px} h2{font-size:clamp(1.4rem,3.5vw,2.1rem);font-weight:700} h3{font-size:1.15rem;font-weight:600} p{margin:0 0 1rem} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} .eyebrow{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:.72rem;color:var(--accent-ink)} .muted{color:var(--slate-500)} .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;font-size:.95rem;border-radius:var(--r-sm);padding:.8rem 1.3rem;cursor:pointer;border:2px solid transparent;transition:background .2s,border-color .2s,color .2s,transform .1s;min-height:48px} /* Obwódka fokusu musi być widoczna i na jasnym tle, i na granatowym przycisku. Sam błękit #93c5fd dawał na bieli 1,80:1 (próg dla elementów nietekstowych to 3:1), więc ring jest dwutonowy: granat czyta się na jasnym tle (14,6:1), a błękitna poświata na granacie (8,1:1). Zawsze jeden ze stopni ma kontrast. */ .btn:focus-visible{outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 6px #93c5fd} .btn:active{transform:translateY(1px)} .btn-accent{background:var(--accent-ink);color:#fff} .btn-accent:hover{background:var(--accent-700)} .btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-700)} .btn-ghost{background:#fff;color:var(--navy);border-color:var(--border)} .btn-ghost:hover{border-color:var(--navy);background:var(--muted)} .btn-outline-navy{background:transparent;color:var(--navy);border-color:var(--navy)} .btn-outline-navy:hover{background:var(--navy);color:#fff} .btn-sm{padding:.55rem .9rem;min-height:40px;font-size:.88rem} .icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .section{padding:clamp(40px,7vw,84px) 0} .center{text-align:center} .badge{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-head);font-weight:600;font-size:.72rem;padding:.25rem .6rem;border-radius:999px} .badge-quote{background:#FFF1E8;color:var(--accent-600)} .badge-stock{background:#E8F6EE;color:#15803d} /* top bar */ .topbar{background:var(--navy);color:#cbd5e1;font-size:.82rem} .topbar .wrap{display:flex;gap:1.2rem;justify-content:flex-end;align-items:center;height:38px;flex-wrap:wrap} .topbar a{display:inline-flex;align-items:center;gap:.4rem;color:#cbd5e1} .topbar a:hover{color:#fff} .topbar .icon{width:16px;height:16px} /* header */ header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)} .hdr{display:flex;align-items:center;gap:1rem;height:74px} .logo{height:46px;flex:none;width:200px} .ak-search{flex:1;display:flex;align-items:center;gap:.5rem;background:var(--muted);border:1px solid var(--border);border-radius:var(--r-sm);padding:.55rem .8rem;max-width:520px} .ak-search input{border:0;background:transparent;outline:none;width:100%;font-size:.95rem;font-family:var(--font-body)} .ak-search .icon{color:var(--slate-500)} .nav{display:flex;align-items:center;gap:.3rem;margin-left:auto} .nav a.lnk{font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--slate-700);padding:.5rem .7rem;border-radius:8px} .nav a.lnk:hover,.nav a.lnk.active{color:var(--navy);background:var(--muted)} .iconbtn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:10px;color:var(--navy);background:transparent;border:0;cursor:pointer;position:relative} .iconbtn:hover{background:var(--muted)} .cart-dot{position:absolute;top:8px;right:8px;background:var(--accent);color:#fff;font-size:.65rem;font-weight:700;font-family:var(--font-head);min-width:17px;height:17px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px} .burger{display:none} .phone-link{display:none} .mnav{display:none} /* breadcrumb */ .crumbs{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.82rem;color:var(--slate-500);padding:16px 0} .crumbs a:hover{color:var(--accent)} .crumbs .icon{width:14px;height:14px;color:var(--slate-300)} .crumbs b{color:var(--navy);font-weight:600} /* product card (shared) */ .grid-prod{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s} .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:#cbd5e1} /* `overflow:hidden` trzyma powiększenie zdjęcia na hover w ramce kadru. Bez niego skalowany obraz wychodził poza `.ph` i nachodził na plakietkę oraz na linię oddzielającą kadr od treści (przycinała go dopiero krawędź karty). */ .card .ph{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:18px;position:relative;border-bottom:1px solid var(--border);overflow:hidden} .card .ph img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply} .card .ph .badge{position:absolute;top:10px;left:10px} .card .body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1} /* Producent to slot o stałej wysokości, nie element warunkowy. Część pozycji nie ma marki (akcesoria, I-NET) i bez rezerwacji linii ich tytuły startowały ~18 px wyżej niż w sąsiednich kartach — w rzędzie czytało się to jak rozjechana siatka. */ .card .brand{display:block;line-height:1.15;min-height:1.15em;font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--slate-500)} .card h3{font-size:1rem;margin:.15rem 0 .5rem;color:var(--navy)} .card .spec{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.7rem} .chip{font-size:.7rem;font-family:var(--font-head);font-weight:600;background:var(--muted);color:var(--slate-700);border-radius:6px;padding:.18rem .45rem} .card .foot{margin-top:auto} .price{font-family:var(--font-head);font-weight:800;color:var(--navy);font-size:1.25rem;font-variant-numeric:tabular-nums} .price small{font-weight:600;font-size:.72rem;color:var(--slate-500)} .quote-line{font-family:var(--font-head);font-weight:700;color:var(--accent-600);font-size:.95rem} /* Cena i „Cena ustalana indywidualnie" zajmują ten sam slot w stopce karty, więc dostają wspólną wysokość — inaczej dwie ścieżki zakupu (kup teraz / na zapytanie) stojące obok siebie w rzędzie miały CTA na różnych liniach. */ .card .foot .price,.card .foot .quote-line{display:flex;align-items:center;min-height:2rem} .card .cta{width:100%;justify-content:center;margin-top:.6rem} /* Nagłówki grup w wynikach wyszukiwania (Produkty / Artykuły). */ .ak-search-group{font-size:1.15rem;margin:28px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border)} .ak-search-group:first-of-type{margin-top:22px} /* FAQ */ .faq{max-width:820px;margin:0 auto} .qa{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:12px;overflow:hidden} .qa summary{cursor:pointer;list-style:none;padding:18px 20px;font-family:var(--font-head);font-weight:600;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:1rem} .qa summary::-webkit-details-marker{display:none} .qa summary .icon{transition:transform .2s;color:var(--accent)} .qa[open] summary .icon{transform:rotate(180deg)} .qa .ans{padding:0 20px 18px;color:var(--slate-700)} /* footer */ footer.site{background:var(--navy);color:#94a3b8;padding:50px 0 26px;margin-top:10px} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:30px} footer.site h4{color:#fff;font-size:.95rem;letter-spacing:.5px;text-transform:uppercase;margin-bottom:1rem} footer.site a{display:block;color:#94a3b8;padding:.25rem 0} footer.site a:hover{color:#fff} .fcontact div{display:flex;gap:.5rem;align-items:flex-start;margin-bottom:.6rem} .fcontact .icon{color:var(--accent);width:18px;height:18px;flex:none;margin-top:3px} .fbar{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem} .note{background:#FEF9C3;border:1px dashed #ca8a04;color:#713f12;border-radius:var(--r-sm);padding:10px 16px;font-size:.85rem;margin:0 auto;max-width:var(--maxw)} /* ===== HOME-specific ===== */ .hero{background:radial-gradient(1100px 380px at 85% -10%,rgba(234,88,12,.10),transparent 60%),linear-gradient(180deg,#fff,var(--bg));border-bottom:1px solid var(--border)} .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:clamp(36px,6vw,72px);padding-bottom:clamp(36px,6vw,72px)} .hero h1 span{color:var(--accent)} .hero p.lead{font-size:1.12rem;color:var(--slate-700);max-width:48ch} .hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.4rem 0 1.2rem} .hero-trust{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.9rem;color:var(--slate-700)} .hero-trust span{display:inline-flex;align-items:center;gap:.45rem} .hero-trust .icon{color:var(--safe);width:18px;height:18px} .hero-card{background:var(--navy);border-radius:var(--r);padding:26px;color:#cbd5e1;box-shadow:var(--shadow-lg);position:relative;overflow:hidden} .hero-card h3{color:#fff;font-size:1.25rem} .hero-card .row{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.12)} .hero-card .row:last-child{border:0} .hero-card .icon{color:var(--accent);width:22px;height:22px} /* `minmax(0,1fr)`: samo `1fr` ma minimum `auto`, więc kafelek z długim słowem („przeciwchemiczne") rozpychał kolumnę i strona główna dostawała 4 px poziomego przewijania na telefonie. */ .cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .cat{display:flex;flex-direction:column;gap:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;transition:border-color .2s,box-shadow .2s,transform .2s} .cat:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)} .cat .ic{width:46px;height:46px;border-radius:12px;background:#FFF1E8;display:flex;align-items:center;justify-content:center;color:var(--accent)} .cat .ic .icon{width:24px;height:24px} .cat b{font-family:var(--font-head);font-weight:600;color:var(--navy);font-size:1rem} .cat small{color:var(--slate-500)} .trust{background:var(--navy);color:#cbd5e1} .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:30px 20px} .trust .t{display:flex;gap:.8rem;align-items:flex-start} .trust .icon{color:var(--accent);width:26px;height:26px;flex:none} .trust b{display:block;color:#fff;font-family:var(--font-head);font-weight:600} .trust small{font-size:.85rem} .svc{background:linear-gradient(120deg,var(--navy),#13243d);color:#cbd5e1;border-radius:var(--r);overflow:hidden} .svc .in{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding:clamp(26px,4vw,46px)} .svc h2{color:#fff} .svc ul{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.6rem} .svc li{display:flex;gap:.6rem;align-items:flex-start} .svc .icon{color:var(--accent);flex:none;margin-top:2px} .svc .panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:22px} .svc .step{display:flex;gap:.8rem;padding:.55rem 0} .svc .step b{background:var(--accent);color:#fff;font-family:var(--font-head);font-weight:700;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none} .ak-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .ak-post{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:.5rem;transition:border-color .2s,box-shadow .2s} .ak-post:hover{border-color:var(--accent);box-shadow:var(--shadow)} .ak-post .tag{font-size:.72rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px} .ak-post h3{font-size:1.05rem} .ak-post .more{margin-top:auto;font-family:var(--font-head);font-weight:600;color:var(--navy);display:inline-flex;gap:.3rem;align-items:center} .band{background:var(--accent);color:#fff;border-radius:var(--r)} .band .in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px clamp(20px,4vw,40px)} .band h2{color:#fff;margin:0} .band .btn-ghost{background:#fff} /* ===== CATEGORY page ===== */ .cathead{background:linear-gradient(180deg,#fff,var(--bg));border-bottom:1px solid var(--border);padding:6px 0 26px} .cathead p.intro{max-width:75ch;color:var(--slate-700)} .catlayout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;padding:28px 0} .filters{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;position:sticky;top:90px} .fgroup{padding:12px 0;border-bottom:1px solid var(--border)} .fgroup:last-child{border:0} .fgroup h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;color:var(--slate-500);margin-bottom:.6rem} .fopt{display:flex;align-items:center;gap:.55rem;padding:.3rem 0;font-size:.92rem;color:var(--slate-700);cursor:pointer} .fopt input{width:17px;height:17px;accent-color:var(--accent)} .fopt .ct{margin-left:auto;color:var(--slate-500);font-size:.8rem} .toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px} .toolbar .count{color:var(--slate-500);font-size:.9rem} .select{font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--navy);border:1px solid var(--border);border-radius:var(--r-sm);padding:.55rem .8rem;background:#fff;cursor:pointer} .catlayout .grid-prod{grid-template-columns:repeat(3,1fr)} .filterbtn{display:none} .seo-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:24px;margin-top:8px} .seo-block h2{font-size:1.3rem} .seo-block p{color:var(--slate-700);max-width:80ch} .relchips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem} .relchips a{font-family:var(--font-head);font-weight:600;font-size:.82rem;background:var(--muted);color:var(--navy);padding:.4rem .8rem;border-radius:999px} .relchips a:hover{background:#FFF1E8;color:var(--accent-600)} /* ===== PRODUCT (PDP) page ===== */ .pdp{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:10px 0 40px;align-items:start} .gallery .main{background:#fff;border:1px solid var(--border);border-radius:var(--r);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:28px;position:relative} .gallery .main img{max-height:100%;object-fit:contain;mix-blend-mode:multiply} .gallery .main .badge{position:absolute;top:14px;left:14px} .thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap} .thumbs .t{width:74px;height:74px;border:1px solid var(--border);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:7px;cursor:pointer} .thumbs .t.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .thumbs .t img{max-height:100%;mix-blend-mode:multiply} .pdp-info .brand{font-size:.78rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--slate-500)} .pdp-info h1{font-size:clamp(1.5rem,3vw,2.1rem);margin:.2rem 0 .5rem} .keyparams{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0} .keyparams .kp{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px} .keyparams .kp span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--slate-500)} .keyparams .kp b{font-family:var(--font-head);color:var(--navy);font-size:.95rem} .buybox{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin:18px 0} .buybox .price{font-size:1.9rem} .buybox .qrow{display:flex;gap:10px;align-items:center;margin:14px 0} .qty{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden} .qty button{width:42px;height:46px;border:0;background:#fff;font-size:1.2rem;cursor:pointer;color:var(--navy)} .qty button:hover{background:var(--muted)} .qty input{width:46px;height:46px;border:0;text-align:center;font-family:var(--font-head);font-weight:700;font-size:1rem;-moz-appearance:textfield} .buybox .meta{display:flex;flex-direction:column;gap:.5rem;margin-top:14px;font-size:.88rem;color:var(--slate-700)} .buybox .meta div{display:flex;gap:.5rem;align-items:center} .buybox .meta .icon{color:var(--safe);width:18px;height:18px} .quotebox{border-left:3px solid var(--accent)} /* --- Konfigurator w boxie „Zapytaj o wycenę" (MX6 i pokrewne) -------------- Wcześniej całość jechała na stylach inline: selecty miały własny promień 8 px, wysokość ~38 px i zero pierścienia fokusu, a etykiety kolor z nieistniejącego tokenu `--slate-600` (zawsze fallback spoza palety). Teraz korzystają z komponentu `.field`, więc dziedziczą wysokość 48 px, promień i fokus formularzy. */ .quote-line--lg{font-size:1.1rem} /* Nie flex: ikona i tekst są rozdzielone spacjami w znaczniku, więc `gap` dokładałby drugi odstęp obok tych spacji. */ .quote-avail{margin:.35rem 0 0;font-size:.9rem} .quote-avail .icon{width:14px;height:14px;color:var(--accent);vertical-align:-2px} .quote-note{margin:.3rem 0 0} .ak-config{margin:.9rem 0 .2rem} .ak-config .field:last-child{margin-bottom:0} .ak-gas-wrap{margin:.9rem 0 .2rem;padding:0;border:0;min-width:0} .ak-gas-wrap legend{padding:0;font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--navy);margin-bottom:.35rem} .ak-gas-count{font-family:var(--font-body);font-weight:400;color:var(--slate-500);font-size:.82rem} .ak-gas-count.is-full{color:var(--accent-ink);font-weight:600} /* Cel dotykowy 44 px — lista 21 sensorów była siatką ~27 px wierszy z natywnymi checkboxami; na telefonie nie dawała się trafić kciukiem. */ .ak-gas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px .8rem;margin-top:.2rem} .ak-gas-opt{display:flex;gap:.55rem;align-items:center;min-height:44px;padding:.2rem .4rem .2rem 0; font-size:.88rem;color:var(--slate-700);cursor:pointer;border-radius:8px;transition:background .15s,color .15s} .ak-gas-opt:hover{background:var(--muted)} .ak-gas-opt input{width:18px;height:18px;flex:none;accent-color:var(--accent);cursor:pointer} .ak-gas-opt:has(input:checked){color:var(--navy);font-weight:600} /* Niedostępne (limit osiągnięty) mają się cofać, ale nadal dać się przeczytać — `--slate-300` to token obramowań (1,6:1), nie tekstu. Sygnałem „dlaczego" jest licznik nad listą, nie sam wyszarzony napis. */ .ak-gas-opt:has(input:disabled){color:var(--slate-500);cursor:not-allowed} .ak-gas-opt:has(input:disabled):hover{background:transparent} .ak-gas-opt input:disabled{cursor:not-allowed} .qrow--quote{margin-bottom:0} .qrow--quote .ak-quote-cta{flex:1;justify-content:center} .pdp-sub{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:6px} .pdp-sub a{font-size:.85rem;color:var(--navy);font-family:var(--font-head);font-weight:600;display:inline-flex;align-items:center;gap:.35rem} .pdp-sub .icon{width:16px;height:16px;color:var(--accent)} .spectable{width:100%;border-collapse:collapse;margin:.5rem 0 1.2rem} .spectable th,.spectable td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);font-size:.92rem;vertical-align:top} /* 38% dotyczy TYLKO trybu etykieta/wartość (wiersz `th` + `td`), do którego ten komponent powstał. Strony „Dostawa i płatności" czy „Zwroty" używają go jako zwykłej tabeli 3-kolumnowej z wierszem nagłówka — tam sztywna szerokość pierwszej kolumny rozjeżdżała proporcje. */ .spectable th{color:var(--slate-500);font-family:var(--font-head);font-weight:600} .spectable tr:has(td)>th:first-child{width:38%} .spectable td{color:var(--slate-900)} .spectable tr:nth-child(even){background:var(--muted)} .longdesc{max-width:80ch;color:var(--slate-700)} .longdesc h3{margin-top:1.4rem} /* ===== SERVICE / CONTACT + FORM ===== */ .svc-hero{background:linear-gradient(120deg,var(--navy),#13243d);color:#cbd5e1} .svc-hero .wrap{padding:clamp(30px,5vw,60px) 20px} .svc-hero h1{color:#fff;max-width:18ch} .svc-hero .lead{font-size:1.12rem;max-width:60ch;color:#cbd5e1} .svc-hero .hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.2rem} .svc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .svc-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px} .svc-tile .ic{width:46px;height:46px;border-radius:12px;background:#FFF1E8;display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:.7rem} .svc-tile h3{font-size:1.05rem} .svc-tile ul{margin:.4rem 0 0;padding-left:1.1rem;color:var(--slate-700)} .svc-tile li{margin:.25rem 0} .process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step} .process .p{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;position:relative} .process .p b{display:flex;width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;font-family:var(--font-head);font-weight:700;align-items:center;justify-content:center;margin-bottom:.6rem} .brands{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center} .brandtag{font-family:var(--font-head);font-weight:700;color:var(--navy);border:1px solid var(--border);background:#fff;border-radius:10px;padding:.55rem 1rem} .formwrap{display:grid;grid-template-columns:1.4fr .9fr;gap:28px;align-items:start} .formcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow)} .steps{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap} .steps .s{display:flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;font-size:.85rem;color:var(--slate-500)} .steps .s b{width:26px;height:26px;border-radius:999px;background:var(--muted);color:var(--slate-500);display:flex;align-items:center;justify-content:center;font-size:.8rem} .steps .s.active{color:var(--navy)} .steps .s.active b{background:var(--accent);color:#fff} .steps .sep{flex:1;height:2px;background:var(--border);min-width:14px;align-self:center} .field{margin-bottom:16px} .field label{display:block;font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--navy);margin-bottom:.35rem} .req{color:var(--accent)} .field input,.field textarea,.field select{width:100%;font-family:var(--font-body);font-size:.95rem;color:var(--slate-900);background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);padding:.7rem .85rem;min-height:48px;outline:none;transition:border-color .15s,box-shadow .15s} .field textarea{min-height:110px;resize:vertical} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(234,88,12,.15)} .field .help{font-size:.78rem;color:var(--slate-500);margin-top:.3rem} .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px} .radio-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .rc{position:relative;border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;display:flex;gap:.6rem;align-items:flex-start;transition:border-color .15s,background .15s} .rc:hover{border-color:#cbd5e1} .rc input{position:absolute;opacity:0;inset:0;cursor:pointer} .rc .ic{color:var(--accent);flex:none} .rc b{font-family:var(--font-head);font-weight:600;color:var(--navy);font-size:.92rem;display:block} .rc small{color:var(--slate-500);font-size:.78rem} .rc:has(input:checked){border-color:var(--accent);background:#FFF7F2;box-shadow:0 0 0 1px var(--accent)} .rodo{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:var(--slate-700);margin:4px 0 18px} .rodo input{width:18px;height:18px;accent-color:var(--accent);margin-top:2px;flex:none} .contact-card{background:var(--navy);color:#cbd5e1;border-radius:var(--r);padding:24px} .contact-card h3{color:#fff} .contact-card .cr{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.12)} .contact-card .cr:last-of-type{border:0} .contact-card .icon{color:var(--accent);flex:none;width:20px;height:20px;margin-top:2px} .contact-card a{color:#fff;font-family:var(--font-head);font-weight:600} .map{margin-top:14px;border-radius:var(--r-sm);overflow:hidden;border:1px solid rgba(255,255,255,.15);height:160px;background: repeating-linear-gradient(45deg,#13243d,#13243d 12px,#162a45 12px,#162a45 24px);position:relative;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:.82rem;text-align:center} .map .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);color:var(--accent)} /* ===== CART / CHECKOUT ===== */ .cprog{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:22px 0 6px} .cprog .st{display:flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--slate-500)} .cprog .st b{width:28px;height:28px;border-radius:999px;background:var(--muted);color:var(--slate-500);display:flex;align-items:center;justify-content:center;font-size:.82rem} .cprog .st.done{color:var(--safe)} .cprog .st.done b{background:#E8F6EE;color:var(--safe)} .cprog .st.active{color:var(--navy)} .cprog .st.active b{background:var(--accent);color:#fff} .cprog .ln{flex:1;height:2px;background:var(--border);min-width:18px} .shop-layout{display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:start;padding:18px 0 50px} .cart-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden} .cart-item{display:grid;grid-template-columns:88px 1fr auto;gap:16px;padding:18px;border-bottom:1px solid var(--border);align-items:center} .cart-item:last-child{border-bottom:0} .cart-item .thumb{width:88px;height:88px;border:1px solid var(--border);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px} .cart-item .thumb img{max-height:100%;mix-blend-mode:multiply} .cart-item .brand{font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--slate-500)} .cart-item h3{font-size:1rem;margin:.1rem 0 .35rem} .cart-item .rm{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;color:var(--slate-500);background:none;border:0;cursor:pointer;padding:0} .cart-item .rm:hover{color:var(--alarm)} .cart-item .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem} .cart-item .lineprice{font-family:var(--font-head);font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums} .cart-item .unit{font-size:.78rem;color:var(--slate-500)} .inquiry-note{display:flex;gap:.7rem;align-items:flex-start;background:#FFF7F2;border:1px solid #FED7AA;border-radius:var(--r);padding:14px 16px;margin-top:16px;font-size:.9rem;color:#7c2d12} .inquiry-note .icon{color:var(--accent);flex:none;margin-top:2px} .summary{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;position:sticky;top:90px;box-shadow:var(--shadow)} .summary h3{font-size:1.1rem;margin-bottom:14px} .sumrow{display:flex;justify-content:space-between;gap:12px;padding:.45rem 0;color:var(--slate-700);font-size:.95rem} .sumrow .v{font-variant-numeric:tabular-nums;font-weight:600;color:var(--slate-900)} .sumtotal{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--border);margin-top:8px;padding-top:14px} .sumtotal .l{font-family:var(--font-head);font-weight:700;color:var(--navy)} .sumtotal .t{font-family:var(--font-head);font-weight:800;color:var(--navy);font-size:1.6rem;font-variant-numeric:tabular-nums} .sumtotal small{font-weight:600;font-size:.72rem;color:var(--slate-500)} .summary .btn{width:100%;justify-content:center;margin-top:16px} .trustrow{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:.78rem;color:var(--slate-500)} .trustrow span{display:inline-flex;align-items:center;gap:.35rem} .trustrow .icon{width:15px;height:15px;color:var(--safe)} .codefield{display:flex;gap:8px;margin-top:14px} .codefield input{flex:1;border:1px solid var(--border);border-radius:var(--r-sm);padding:.6rem .8rem;min-height:44px;outline:none;font-family:var(--font-body)} .codefield input:focus{border-color:var(--accent)} .block{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;margin-bottom:18px} .block h3{font-size:1.05rem;margin-bottom:14px;display:flex;align-items:center;gap:.5rem} .block h3 .n{width:26px;height:26px;border-radius:999px;background:var(--accent);color:#fff;font-size:.82rem;display:inline-flex;align-items:center;justify-content:center;flex:none} .optrow{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;margin-bottom:10px;cursor:pointer;position:relative;transition:border-color .15s,background .15s} .optrow:hover{border-color:#cbd5e1} .optrow input{position:absolute;opacity:0;inset:0;cursor:pointer} .optrow .l{display:flex;gap:.7rem;align-items:center} .optrow .l .icon{color:var(--accent)} .optrow b{font-family:var(--font-head);font-weight:600;color:var(--navy);font-size:.95rem;display:block} .optrow small{color:var(--slate-500);font-size:.8rem} .optrow .pr{font-family:var(--font-head);font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums} .optrow:has(input:checked){border-color:var(--accent);background:#FFF7F2;box-shadow:0 0 0 1px var(--accent)} .paychip{font-family:var(--font-head);font-weight:700;font-size:.7rem;border:1px solid var(--border);border-radius:6px;padding:.2rem .45rem;color:var(--slate-700);background:#fff} .paylogos{display:flex;gap:6px;flex-wrap:wrap} .mini{display:flex;gap:10px;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border)} .mini:last-of-type{border-bottom:0} .mini .th{width:46px;height:46px;border:1px solid var(--border);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;padding:5px;flex:none} .mini .th img{max-height:100%;mix-blend-mode:multiply} .mini .nm{font-size:.85rem;color:var(--slate-900);font-weight:600} .mini .q{font-size:.75rem;color:var(--slate-500)} .mini .pp{margin-left:auto;font-family:var(--font-head);font-weight:700;font-variant-numeric:tabular-nums;color:var(--navy);font-size:.9rem} /* ===== responsive ===== */ @media(max-width:1000px){ .hero .wrap{grid-template-columns:1fr;gap:28px} .cats{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-prod{grid-template-columns:repeat(2,1fr)} .catlayout .grid-prod{grid-template-columns:repeat(2,1fr)} .trust .wrap{grid-template-columns:repeat(2,1fr)} .svc .in{grid-template-columns:1fr} .ak-blog{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr 1fr} .catlayout{grid-template-columns:1fr} .filters{position:static} .pdp{grid-template-columns:1fr;gap:24px} .svc-cols{grid-template-columns:1fr} .process{grid-template-columns:repeat(2,1fr)} .formwrap{grid-template-columns:1fr} .shop-layout{grid-template-columns:1fr} .summary{position:static} } @media(max-width:680px){ .ak-search{display:none} .nav .lnk{display:none} .burger{display:inline-flex} .phone-link{display:inline-flex;color:var(--accent-ink)} /* Nagłówek 375 px: logo 200 px + trzy przyciski 48 px + odstępy = 408 px. Logo zwężone do 150 px, przyciski 44 px (nadal próg dotykowy), ciaśniej. */ .logo{width:150px;height:36px} .hdr{gap:.5rem} .nav{gap:.15rem} .iconbtn{width:44px;height:44px} /* Stepper formularzy: trzy etykiety w rzędzie nie mieszczą się w 335 px („1 Czego dotyczy — 2 Szczegóły — 3 Kontakt" łamało się na trzy wiersze). Na telefonie każdy krok dostaje równą kolumnę z numerem NAD etykietą — bez łączników, które i tak niczego nie łączyły przy zawijaniu. */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:start} .steps .s{flex-direction:column;text-align:center;font-size:.74rem;gap:.3rem;line-height:1.2} .steps .s b{width:24px;height:24px;font-size:.74rem} .steps .sep{display:none} /* Ten sam układ dla paska postępu koszyk → dane → gotowe („3 Gotowe" spadało samo do drugiego wiersza). */ .cprog{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:start} .cprog .st{flex-direction:column;text-align:center;font-size:.78rem;gap:.3rem;line-height:1.2} .cprog .ln{display:none} .topbar .hide-sm{display:none} .cats{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-prod,.catlayout .grid-prod{grid-template-columns:repeat(2,1fr)} .fgrid{grid-template-columns:1fr} .band .in{flex-direction:column;align-items:flex-start} .keyparams{grid-template-columns:1fr} .frow{grid-template-columns:1fr} .radio-cards{grid-template-columns:1fr} .process{grid-template-columns:1fr} .cart-item{grid-template-columns:64px 1fr;gap:12px} .cart-item .thumb{width:64px;height:64px} .cart-item .right{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center;width:100%;border-top:1px solid var(--border);padding-top:10px} .filters{display:none} .filters.open{display:block} .filterbtn{display:inline-flex} .mnav.open{display:block;border-top:1px solid var(--border);background:#fff} .mnav a{display:block;padding:14px 20px;font-family:var(--font-head);font-weight:600;color:var(--navy);border-bottom:1px solid var(--border)} .mnav-search{display:flex;align-items:center;gap:.5rem;margin:12px 20px 4px;background:var(--muted);border:1px solid var(--border);border-radius:var(--r-sm);padding:0 .8rem;min-height:48px} .mnav-search .icon{color:var(--slate-500);flex:none} .mnav-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:16px;font-family:var(--font-body);min-height:46px} .mnav-phone{display:flex;align-items:center;gap:.6rem;color:var(--accent-ink);border-bottom:0} .mnav-phone .icon{color:var(--accent);flex:none} } @media(max-width:420px){ .grid-prod,.catlayout .grid-prod{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} /* ============================================================ WYPOŻYCZALNIA (Etap 3) Karty sprzętu to komponent `.card` ze sklepu — tu tylko drobne różnice (kafelek zastępczy, stawka dzienna, kaucja). Rezerwacja korzysta z `.formcard` i `.steps` znanych z formularza wyceny. ============================================================ */ /* Wypożyczalnia jest wstawiana shortcodem w treść strony, a ta jedzie w kolumnie czytelniczej (`.longdesc`, 80ch ≈ 800 px). Dla akapitu to dobra szerokość, dla siatki kart — za wąska (wychodziły dwie kolumny na desktopie). Rozpinamy więc kolumnę na stronach, które zawierają siatkę, a same akapity zostawiamy wąskie, żeby tekst dalej dobrze się czytał. Przeglądarka bez `:has()` po prostu zostanie przy wąskim układzie. */ .entry-content:has(.ak-rent-grid){max-width:none} .entry-content:has(.ak-rent-grid)>p{max-width:80ch} /* Ten sam zabieg dla stron z tabelami danych (dostawa, płatności, zwroty): tabela to nie akapit i nie podlega mierze czytelniczej. Ściśnięta do 80ch łamała komórki kosztów i czasów, a ~400 px szerokości strony stało puste. Akapity i listy zostają wąskie, żeby tekst dalej dobrze się czytał. */ .entry-content:has(.spectable){max-width:none} .entry-content:has(.spectable)>:where(p,ul,ol,h2,h3,h4,blockquote){max-width:80ch} /* Wąski ekran: tabela WIELOKOLUMNOWA przewija się w swojej ramce zamiast rozpychać stronę. Warunek `:has(th + th + th)` celuje wyłącznie w tabele z wierszem nagłówka (3+ kolumny) — dwukolumnowa specyfikacja na karcie produktu mieści się na telefonie i przewijania nie dostaje. */ @media(max-width:680px){ .spectable:has(tr>th+th+th){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} .spectable:has(tr>th+th+th)>tbody{display:table;width:100%;min-width:520px} } /* Flota bywa mała (3–8 egzemplarzy), więc karty rozkładają się same zamiast sztywnych 4 kolumn ze sklepu — przy trzech egzemplarzach rząd jest pełny, a nie wiszą przy lewej krawędzi. */ .ak-rent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px; margin:0 0 clamp(36px,6vw,64px)} /* Karta sprzętu jest **kompaktowa**, bez kadru 1:1 znanego ze sklepu: egzemplarze wypożyczalni nie mają zdjęć katalogowych, a pusty kwadrat z ikoną zajmował pół karty i wyglądał jak wypełniacz. Liczy się tu cennik i termin, więc karta jest gęsta informacyjnie. */ .ak-rent-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px; transition:box-shadow .2s,transform .2s,border-color .2s} .ak-rent-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:#cbd5e1} .ak-rent-card__top{display:flex;align-items:flex-start;gap:12px} .ak-rent-card__thumb{flex:none;width:46px;height:46px;border-radius:11px;background:var(--muted); display:flex;align-items:center;justify-content:center;overflow:hidden} .ak-rent-card__thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .ak-rent-card__thumb--icon{color:var(--navy);opacity:.45} .ak-rent-card__thumb--icon svg{width:24px;height:24px;stroke-width:1.7} .ak-rent-card__id{min-width:0;flex:1} .ak-rent-card__id .brand{display:block;font-size:.7rem;font-weight:700;letter-spacing:.5px; text-transform:uppercase;color:var(--slate-500);line-height:1.3} .ak-rent-card__id h3{font-size:1.02rem;margin:.1rem 0 0;color:var(--navy);line-height:1.25} .ak-rent-card__top .badge{flex:none;margin-top:2px} .ak-rent-card__rate{display:flex;align-items:baseline;gap:.35rem;padding-top:2px} .ak-rent-card__rate .price{font-size:1.5rem} .ak-rent-per{font-family:var(--font-body);font-size:.82rem;font-weight:500;color:var(--slate-500)} /* Pakiety jako para etykieta/kwota — czytelniejsze niż chipy, gdy są dwa. */ .ak-rent-card__packs{display:flex;gap:8px;margin:0;flex-wrap:wrap} .ak-rent-card__packs>div{flex:1 1 0;min-width:96px;background:var(--muted);border-radius:10px;padding:7px 10px} .ak-rent-card__packs dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;color:var(--slate-500);font-weight:700} .ak-rent-card__packs dd{margin:1px 0 0;font-family:var(--font-head);font-weight:700;color:var(--navy); font-size:.92rem;font-variant-numeric:tabular-nums} .ak-rent-card__foot{margin-top:auto;padding-top:2px} .ak-rent-card__deposit{margin:0 0 10px;font-size:.82rem;color:var(--slate-700)} .ak-rent-card__deposit b{color:var(--navy);font-variant-numeric:tabular-nums} .ak-rent-cta{width:100%;justify-content:center} .ak-rent-cta-off{cursor:default;color:var(--slate-500)} .ak-rent-cta-off:hover{border-color:var(--border);background:#fff} .ak-badge-busy{background:var(--muted);color:var(--slate-700)} /* ------------------------------------------------ formularz rezerwacji */ .ak-rent-form{max-width:760px;margin:0 auto} .ak-rent-form__head{text-align:center;margin-bottom:22px} .ak-rent-form__head h2{margin:.3rem 0 .4rem} .ak-rent-form__head .lede{color:var(--slate-700);margin:0} .ak-rent-formcard select, .ak-rent-formcard input[type=date]{width:100%} /* Błąd ma własny wygląd, nie wariant `.note`: `.note` jest w tym systemie językiem draftu (żółty, obramowanie KRESKOWANE), a kreska na komunikacie blokującym czyta się jak placeholder, nie jak alarm. Stąd pełna linia, ikona i czerwień z palety. */ .ak-rent-error{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 20px;padding:14px 16px; background:#FEF2F2;border:1px solid #FCA5A5;border-radius:var(--r-sm);color:#7f1d1d} .ak-rent-error .icon{color:var(--alarm);flex:none;margin-top:2px} .ak-rent-error p{margin:0;font-size:.92rem;font-weight:600} /* Stan pusty — neutralny, nie ostrzegawczy. */ .ak-rent-empty{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:clamp(28px,5vw,44px) 24px;text-align:center;max-width:560px; margin:0 auto clamp(36px,6vw,64px);box-shadow:var(--shadow)} .ak-rent-empty__mark{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px; border-radius:14px;background:var(--muted);color:var(--navy);margin-bottom:14px} .ak-rent-empty__mark .icon{width:26px;height:26px;opacity:.7} .ak-rent-empty h3{margin:0 0 .4rem} .ak-rent-empty p{margin:0 auto 18px;max-width:44ch} .ak-hp{position:absolute;left:-9999px} .ak-rent-submit{width:100%;justify-content:center} .ak-rent-foothelp{margin-top:10px} .ak-inline-link{color:var(--accent-600);font-weight:600} .ak-inline-link:hover{color:var(--accent-700)} /* Numer telefonu nigdy nie łamie się w połowie — „22 / 787 06 70" na końcu zdania czyta się jak dwie różne liczby. */ a[href^="tel:"]{white-space:nowrap} /* Podsumowanie kwoty — wyróżnione, ale nie krzyczy: to szacunek, nie faktura. */ .ak-rent-sum{background:var(--muted);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:0 0 16px} .ak-rent-sum__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:.95rem;color:var(--navy)} .ak-rent-sum__row+.ak-rent-sum__row{margin-top:6px} .ak-rent-sum__row em{font-style:normal;color:var(--slate-500);font-size:.85rem} .ak-rent-sum__row b{font-family:var(--font-head);font-size:1.15rem;font-variant-numeric:tabular-nums} .ak-rent-sum__row--muted{color:var(--slate-700)} .ak-rent-sum__row--muted b{font-size:1rem;font-weight:600} .ak-rent-sum .help{margin:8px 0 0} /* ------------------------------------------------ potwierdzenie */ /* Bez paska akcentu na górze: zieloną obwódkę niosła już plakietka z „fajką", więc kreska powtarzała ten sam sygnał drugim językiem wizualnym i na zaokrąglonej karcie czytała się jak pasek powiadomienia przeglądarki. Szerokość zrównana z formularzem (760px), żeby potwierdzenie i rezerwacja stały w jednej kolumnie zamiast w dwóch różnych. */ .ak-rent-done{text-align:center;max-width:760px;margin:0 auto clamp(32px,5vw,56px);border-left:0} .ak-rent-done__mark{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:999px; background:#E8F6EE;color:var(--safe);margin-bottom:10px} .ak-rent-done__mark svg{width:26px;height:26px;stroke-width:2.6} .ak-rent-done h3{margin:0 0 .35rem} .ak-rent-done__ref{font-family:var(--font-head);color:var(--navy);margin:0 0 .5rem} .ak-rent-done__ref b{font-size:1.15rem;letter-spacing:.5px;font-variant-numeric:tabular-nums} .ak-rent-done__next{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 0} @media (max-width:560px){ .ak-rent-grid{grid-template-columns:1fr} }