/* Tylko to, czego theme.json nie wyrazi. Kolory i rozmiary wyłącznie ze zmiennych theme.json. */

/* Zdjęcia we wpisie: nieparzysta liczba -> ostatnie na całą szerokość (decyzja 04.11.2026) */
.wp-block-gallery.has-nested-images > figure.wp-block-image:last-child:nth-child(odd) {
	flex-basis: 100%;
	width: 100%;
}

/* Tabele bez poziomego suwaka: zawijanie tekstu (decyzja 27.10.2026) */
.wp-block-table { overflow-x: visible; }
.wp-block-table table { table-layout: auto; width: 100%; }
.wp-block-table td, .wp-block-table th { word-break: normal; overflow-wrap: anywhere; }

/* Akordeon (details) */
.wp-block-details summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: '+'; color: var(--wp--preset--color--link); font-size: 22px; line-height: 1; }
.wp-block-details[open] summary::after { content: '\2212'; }
.wp-block-details:last-of-type { border-bottom: 1px solid var(--wp--preset--color--line); }

/* Przypięty nagłówek na wszystkich podstronach (decyzja 04.11.2026) */
.hw-sticky-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .hw-sticky-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .hw-sticky-header { top: 0; } }

/* Kroki (zastępstwo ha-step-flow): rząd na komputerze, pionowo na telefonie */
.hw-kroki { counter-reset: hwkrok; }
.hw-kroki > .wp-block-column { counter-increment: hwkrok; border-top: 1px solid var(--wp--preset--color--line); padding-top: 22px; }
.hw-kroki > .wp-block-column::before { content: counter(hwkrok, decimal-leading-zero); display: block; font-size: 13px; font-weight: 700; color: var(--wp--preset--color--link); margin-bottom: 14px; }
.hw-kroki h3, .hw-kroki h4 { margin-top: 0; hyphens: manual; overflow-wrap: normal; word-break: keep-all; }

/* Ścieżka nawigacji + H1 — wartości zmierzone na hardwood-grafit 1.0.52.0 (04.11.2026) */

/* ---------- 0.9.2: elementy stron przeniesionych z Elementora ---------- */

/* Kroki „Proces zamówienia”: brązowa ikona liniowa w polu kroku (zamiast pustego kwadratu), słowa bez łamania w środku (decyzja 04.11.2026) */
.elementor-widget-ha-step-flow .ha-steps-icon .hw-krok-ikona { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: 38px !important; height: 38px !important; max-width: none; margin: 0; color: var(--wp--preset--color--link) !important; fill: none !important; stroke: currentColor !important; }
.elementor-widget-ha-step-flow .ha-steps-icon .hw-krok-ikona * { fill: none !important; stroke: currentColor !important; }
.elementor-widget-ha-step-flow .ha-steps-title { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; }

/* Karuzela zdjęć (własna, bez wtyczki) */
.hw-karuzela { position: relative; overflow: hidden; }
.hw-karuzela > .swiper-wrapper { display: flex; flex-wrap: nowrap; will-change: transform; }
.hw-karuzela .swiper-slide { flex: 0 0 auto; margin-top: 0; margin-bottom: 0; touch-action: pan-y; max-width: none !important; }
.hw-karuzela .swiper-slide img { user-select: none; -webkit-user-drag: none; }
.hw-karuzela .elementor-swiper-button { cursor: pointer; }

/* Podgląd zdjęcia */
.hw-podglad { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(20, 20, 18, .92); }
.hw-podglad.is-open { display: flex; }
.hw-podglad__img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; box-shadow: 0 8px 40px rgba(0, 0, 0, .5); }
.hw-podglad button { position: absolute; border: 0; background: transparent; color: var(--wp--preset--color--inverse); font-size: 44px; line-height: 1; padding: 12px 18px; cursor: pointer; }
.hw-podglad button:focus-visible { outline: 2px solid var(--wp--preset--color--action); }
.hw-podglad__zamknij { top: 8px; right: 8px; }
.hw-podglad__poprz { left: 8px; top: 50%; transform: translateY(-50%); }
.hw-podglad__nast { right: 8px; top: 50%; transform: translateY(-50%); }
.hw-podglad.is-single .hw-podglad__poprz, .hw-podglad.is-single .hw-podglad__nast { display: none; }
html.hw-podglad-otwarty { overflow: hidden; }

/* Link „Przejdź do treści” (dodawany przez WordPress w motywach blokowych): niewidoczny, pojawia się po przejściu klawiszem Tab */
.skip-link.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.skip-link.screen-reader-text:focus { background-color: var(--wp--preset--color--paper); clip-path: none; color: var(--wp--preset--color--ink); display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }

/* ---------- 0.9.10: strony usługowe w kanonie strony głównej (realizacje w miastach) ----------
   Elementy z biblioteki strony głównej (.hw-ui: wrap, section, btn, text-link, proof-strip, planning, quote-section,
   quote-form, gallery-tabs, process-grid, planning-steps, project-card); tu tylko dopasowanie do treści tych stron. */
.hw-kanon { background: var(--bg); color: var(--ink); }
.hw-kanon .section { padding-block: 48px; }
.hw-kanon :is(h2, .hw-kanon-h2) { font-size: 32px; line-height: 1.25; font-weight: 700; letter-spacing: normal; color: var(--ink); margin: 0 0 20px; }
.hw-kanon h3 { font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: normal; color: var(--ink); margin: 28px 0 14px; }
.hw-kanon p { font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0 0 16px; }
.hw-kanon p:last-child { margin-bottom: 0; }
.hw-kanon :is(ul, ol):not(.process-grid):not(.planning-steps) { margin: 0 0 16px; padding-left: 22px; font-size: 17px; line-height: 1.65; }
.hw-kanon strong { font-weight: 700; color: inherit; }
.hw-kanon .hw-kanon-tekst { max-width: 880px; }

/* Tekst + zdjęcie */
.hw-kanon .hw-kanon-dwie { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.hw-kanon .hw-kanon-dwie.hw-kanon-odwrotnie > .hw-kanon-tresc { order: 2; }
.hw-kanon .hw-kanon-dwie > .hw-kanon-tresc > :first-child { margin-top: 0; }
.hw-kanon .hw-kanon-zdjecie { margin: 0; position: sticky; top: 200px; }
.hw-kanon .hw-kanon-zdjecie img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }

/* Zapytanie: zakładki + kroki + formularz */
.hw-kanon .hw-kanon-zakladki { margin-bottom: 32px; }
.hw-kanon .hw-kanon-zakladki button { cursor: pointer; font-family: inherit; }
.hw-kanon .hw-kanon-panel[hidden] { display: none; }
.hw-kanon .hw-kanon-zapytanie .quote-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.hw-kanon .hw-kanon-zapytanie .planning-steps { padding: 0; margin: 0; }
.hw-kanon .planning-steps > li { display: flex; gap: 20px; align-items: flex-start; margin: 0; list-style: none; }
.hw-kanon .process-grid > li { margin: 0; }
.hw-kanon .hw-kanon-ikona { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border: 1px solid var(--accent); border-radius: 2px; color: var(--accent); }
.hw-kanon .hw-kanon-ikona .hw-krok-ikona { width: 22px !important; height: 22px !important; color: var(--accent); fill: none !important; stroke: currentColor !important; }
.hw-kanon .hw-kanon-ikona .hw-krok-ikona * { fill: none !important; stroke: currentColor !important; }
.hw-kanon .hw-kanon-krok-etykieta { font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
.hw-kanon .hw-kanon-krok-tytul { font-weight: 700; margin: 0 0 4px; }
.hw-kanon .planning-steps .hw-kanon-krok-opis { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
.hw-kanon .hw-kanon-zapytanie .quote-copy .hw-kanon-zdjecie-maly { margin: 28px 0 0; }
.hw-kanon .hw-kanon-zapytanie .quote-copy .hw-kanon-zdjecie-maly img { display: block; width: 100%; height: auto; border-radius: 2px; }

/* Proces zamówienia: kroki w rzędzie z ikoną liniową, słowa bez łamania */
.hw-kanon .process-grid > li { list-style: none; }
.hw-kanon .process-grid > li::before { content: none; }
.hw-kanon .process-grid .hw-kanon-ikona { margin-bottom: 18px; }
/* Numer przed nazwą kroku, w tej samej linii — jak „1. Rozmowa i wycena” na stronie głównej */
.hw-kanon .process-grid > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-content: start; }
.hw-kanon .process-grid > li > .hw-kanon-ikona { grid-column: 1 / -1; }
.hw-kanon .hw-kanon-nr { font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--accent); margin: 0; }
.hw-kanon .hw-kanon-nr::after { content: "."; }
.hw-kanon .process-grid h2 { font-size: 17px; line-height: 1.4; font-weight: 700; margin: 0; overflow-wrap: normal; word-break: normal; hyphens: none; }

/* Zaproszenie (wezwanie do działania) */
.hw-kanon .planning { padding: 48px 0; }
.hw-kanon .planning-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.hw-kanon .planning-copy h2 { margin-bottom: 0; }
.hw-kanon .planning-copy p { margin: 16px 0 0; max-width: 620px; }
.hw-kanon .planning .actions { justify-content: flex-end; align-items: center; gap: 12px; }
.hw-kanon .btn .hw-canon-icon { width: 18px !important; height: 18px !important; }

/* Liczby (pas jak na stronie głównej) */
.hw-kanon .proof-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hw-kanon .proof-item p { margin: 0; }
.hw-kanon .proof-item .text-link { font-size: 14px; margin-top: 4px; min-height: 0; }

/* Galeria realizacji: karuzele zdjęć w kartach jak na stronie głównej */
.hw-kanon .hw-kanon-galeria-lead { font-size: 15px; color: var(--muted); margin: 0 0 32px; }
.hw-kanon .hw-kanon-karuzela-blok + .hw-kanon-karuzela-blok { margin-top: 48px; }
.hw-kanon .hw-kanon-karuzela-glowa { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 0 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.hw-kanon .hw-kanon-karuzela-tytul { font-size: 23px; line-height: 1.3; font-weight: 700; color: var(--ink); margin: 0; }
.hw-kanon .hw-kanon-strzalki { display: flex; gap: 8px; }
.hw-kanon .hw-kanon-strzalki > div { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #8b8376; border-radius: 3px; color: var(--ink); cursor: pointer; }
.hw-kanon .hw-kanon-strzalki > div:hover { background: #eae5dc; }
.hw-kanon .hw-kanon-strzalki i { display: contents; }
/* Bez margin-right: odstęp między zdjęciami ustawia skrypt karuzeli */
.hw-kanon .hw-karuzela .project-card { margin-top: 0; margin-bottom: 0; margin-left: 0; }
.hw-kanon .hw-karuzela .project-card img { display: block; width: 100%; height: auto; aspect-ratio: .9; object-fit: cover; border-radius: 2px; }

@media (max-width: 1024px) {
	/* Jak w starej wersji strony: na tablecie i telefonie w zakładkach zapytania sam formularz */
	.hw-kanon .hw-kanon-zapytanie .quote-copy { display: none; }
	.hw-kanon .hw-kanon-zapytanie .quote-layout { display: block; }
}
@media (max-width: 799px) {
	.hw-kanon .hw-kanon-dwie { grid-template-columns: 1fr; gap: 28px; }
	.hw-kanon .hw-kanon-dwie.hw-kanon-odwrotnie > .hw-kanon-tresc { order: 0; }
	.hw-kanon .hw-kanon-zdjecie { position: static; }
	.hw-kanon .planning-inner { grid-template-columns: 1fr; gap: 24px; }
	.hw-kanon .planning .actions { justify-content: flex-start; }
	.hw-kanon .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.hw-kanon .hw-kanon-karuzela-tytul { font-size: 20px; }
}
@media (min-width: 1025px) {
	/* Kroki zapytania zostają w polu widzenia obok długiego formularza */
	.hw-kanon .hw-kanon-zapytanie .quote-copy { position: sticky; top: 200px; }
}
.hw-kanon .proof-item:has(.text-link) { display: block; }
.hw-kanon .proof-item .text-link { white-space: nowrap; }
.hw-kanon .hw-kanon-liczby { padding-bottom: 0; }

/* Przycisk wysyłki formularza w zapytaniu: piaskowy jak w formularzu na stronie głównej (zamiast koloru z ustawień wtyczki) — w tej samej warstwie co reguły formularzy starego motywu (@layer hw-canon), inaczej one wygrywają */
@layer hw-canon {
	body.hw-grafit main.hw-content .hw-kanon .quote-form .super-form:is(#super-form-79210, #super-form-79313, #super-form-85368, #super-form-79337) .super-form-button > .super-button-wrap { background: #d6c2a0 !important; border-color: #d6c2a0 !important; color: #2f2b24 !important; }
	body.hw-grafit main.hw-content .hw-kanon .quote-form .super-form:is(#super-form-79210, #super-form-79313, #super-form-85368, #super-form-79337) .super-form-button > .super-button-wrap:hover { background: #e3d2b6 !important; border-color: #e3d2b6 !important; }
	body.hw-grafit main.hw-content .hw-kanon .quote-form .super-form:is(#super-form-79210, #super-form-79313, #super-form-85368, #super-form-79337) .super-form-button .super-button-name { color: #2f2b24 !important; }
}

/* Nagłówek podstron: „Kalkulator tarasu” wypełniony jak na stronie głównej */
body.hw-grafit .site-header .header-actions a.btn.btn-outline { background: #d6c2a0 !important; border-color: #d8d4cc !important; color: #2f2b24 !important; }
body.hw-grafit .site-header .header-actions a.btn.btn-outline:hover { background: #e3d2b6 !important; }

/* Listy zalet (dawne listy z ikonami) i opis galerii */
.hw-kanon ul.hw-kanon-lista { list-style: none; padding: 0; margin: 0 0 16px; }
.hw-kanon ul.hw-kanon-lista > li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; font-size: 17px; line-height: 1.65; }
.hw-kanon ul.hw-kanon-lista > li > svg { flex-shrink: 0; width: 20px !important; height: 20px !important; margin-top: 4px; color: var(--accent); }
.hw-kanon .hw-kanon-dwie-rowno { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw-kanon .hw-kanon-galeria-opis { max-width: 880px; margin: 0 0 24px; }
@media (max-width: 799px) { .hw-kanon .hw-kanon-dwie-rowno { grid-template-columns: 1fr; } }
/* Pas liczb: tyle kolumn, ile pozycji (bywają 2 albo 3) */
.hw-kanon .proof-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* 0.9.20 — poprawki telefonu (uwagi Marcina 05.11): zakładki zapytania jak w kanonie także pod starym motywem (tam globalny styl przycisków robił z nich piaskowe pudełka), równe przyciski CTA, pas liczb jeden pod drugim */
.hw-kanon .hw-kanon-zakladki { display: flex; flex-wrap: wrap; gap: 0 28px; border-bottom: 1px solid var(--line); padding: 0; }
.hw-kanon .hw-kanon-zakladki button { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; margin: 0 0 -1px; padding: 8px 0 15px; min-height: 48px; width: auto; color: var(--ink); font-size: 14px; line-height: 1.65; font-weight: 600; letter-spacing: normal; text-transform: none; }
.hw-kanon .hw-kanon-zakladki button:hover { background: transparent; color: var(--accent); }
.hw-kanon .hw-kanon-zakladki button[aria-selected="true"] { border-bottom-color: var(--accent); }
@media (max-width: 799px) {
	.hw-kanon .hw-kanon-zakladki { gap: 0 20px; }
	.hw-kanon .planning .actions { flex-direction: column; align-items: stretch; justify-content: flex-start; }
	.hw-kanon .planning .actions .btn { width: 100%; justify-content: center; text-align: center; }
	.hw-kanon .proof-strip { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 0; }
	.hw-kanon .proof-strip > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
	.hw-kanon .proof-strip > * { padding-top: 16px; padding-bottom: 16px; }
	.hw-kanon .proof-item .text-link { white-space: normal; }
}
/* Facebook wyjęty z pasa liczb (decyzja Marcina 05.11): w pasie same liczby jak na stronie głównej, pod pasem jedna linia z linkiem */
.hw-kanon .hw-kanon-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 20px; }
.hw-kanon .hw-kanon-fb p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.hw-kanon .hw-kanon-fb .text-link { font-size: 14px; margin: 0; min-height: 0; }

/* === 0.9.22–0.9.23 (05.11.2026): style przeniesione z treści stron do motywu, jedno źródło wyglądu === */
/* Zakładki zapytania i kroki procesu jak na stronie głównej (było: styl w treści /elewacje-drewniane/) */
@layer hw-canon{html body.hw-grafit .hw-ui.hw-kanon .gallery-tabs button[role=tab],html body.hw-grafit .hw-ui.hw-kanon .gallery-tabs button[role=tab]:hover,html body.hw-grafit .hw-ui.hw-kanon .gallery-tabs button[role=tab]:focus{background:transparent!important;color:rgb(39,39,34)!important;font-weight:600!important;font-size:14px!important;line-height:23.1px!important;border-radius:0!important;min-height:48px!important;border-bottom-color:transparent!important;box-shadow:none!important}html body.hw-grafit .hw-ui.hw-kanon .gallery-tabs button[role=tab][aria-selected="true"]{border-bottom-color:rgb(112,92,62)!important}html body.hw-grafit .hw-ui.hw-kanon p.hw-kanon-krok-etykieta{color:rgb(112,92,62)!important;font-weight:700!important;font-size:12px!important;line-height:18px!important;letter-spacing:.96px!important;margin-bottom:4px!important}html body.hw-grafit .hw-ui.hw-kanon p.hw-kanon-krok-tytul{font-weight:700!important;margin-bottom:4px!important}html body.hw-grafit .hw-ui.hw-kanon p.hw-kanon-krok-opis{color:rgb(96,93,87)!important;font-size:15px!important;line-height:24px!important}}
/* Piaskowy przycisk „Wyślij” w formularzach (było: styl w treści /kontakt/) */
@layer hw-canon{html body.hw-grafit main.hw-content :is(#super-form-79210,#super-form-79313,#super-form-85368,#super-form-79337):is(#super-form-79210,#super-form-79313,#super-form-85368,#super-form-79337) .super-form-button .super-button-wrap,html body.hw-grafit main.hw-content :is(#super-form-79210,#super-form-79313,#super-form-85368,#super-form-79337):is(#super-form-79210,#super-form-79313,#super-form-85368,#super-form-79337) .super-form-button .super-button-wrap:hover{background-color:#d6c2a0!important;background:#d6c2a0!important;border-color:#d6c2a0!important;color:#2f2b24!important}html body.hw-grafit main.hw-content :is(#super-form-79210,#super-form-79313,#super-form-85368,#super-form-79337):is(#super-form-79210,#super-form-79313,#super-form-85368,#super-form-79337) .super-form-button .super-button-wrap .super-button-name{color:#2f2b24!important}}
/* Tabela cen na telefonie bez łamania słów (było: styl w treści /taras-drewniany-cena/) */
@layer hw-canon{html body .hw-ct th,html body .hw-ct td{overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}}
/* Tło pod zdjęciami w karuzelach (było: Dodatkowy CSS w stylach globalnych) */
.hw-karuzela .project-card,.hw-karuzela figure{background-color:#f0ede7}
/* Przyciski w nagłówku 16 px na wszystkich stronach, jak na stronie głównej i na obecnej hardwood.pl */
@layer hw-canon{html body .header-actions .btn{font-size:16px!important}}