/* ==========================================================================
   Omega Vintage Watch — blok „content”: strony prawne/FAQ/kontakt i blog.
   Figma: fig/content-*.txt (desktop 1920, mobile 393). Wzorzec z .page-shell
   i .entry__content istniejących w main.css — tu tylko to, czego tam brakuje.
   ========================================================================== */

/* ---------- Okruszki ---------- */
/* Figma #31658: pole okruszków 34 px @101 (13 px pod nagłówkiem), „/” 11 px z odstępami 14 / 13, 34 px do tytułu @169. */
.crumb {
	display: flex;
	align-items: center;
	padding: 13px 0 34px;
	font-size: 10px;
	line-height: 34px;
	color: #717171;
}
.crumb [aria-hidden="true"] { margin: 0 13px 0 14px; font-size: 11px; }
.crumb a:hover { color: var(--c-black); }
.crumb span[aria-current] { color: var(--c-black); }

/* ---------- Layout wspólny: sidebar + treść ---------- */
.legal__inner,
.blog__inner,
.contact-page__inner,
.article__inner {
	padding: 0 var(--gutter) var(--section);
}
.legal__layout,
.blog__layout {
	display: grid;
	grid-template-columns: 399px 1fr;
	gap: clamp(24px, 6.6vw, 127px);
	align-items: start;
}
/* Strony prawne: okruszki to ten sam komponent `.crumbs` co na „Gwarancja i serwis”
   (wysokość 47 px, pod nim 32 px). Figma: menu boczne od y=167, h1 (52 px) od y=169. */
.legal__inner { padding-top: 32px; }
.legal__content .legal__title { margin-top: 2px; }
/* Figma #22294: menu kończy się @585, blok „Masz pytania…” @649 → 64 px. */
.legal__side { display: flex; flex-direction: column; gap: 64px; position: sticky; top: 108px; }
/* Dolny odstęp strony: stopka 120 px pod treścią (Figma). Domyślne 80 px `#main` z main.css dokładałoby się do paddingu `.legal__inner`. */
#main.legal:not(.home):not(.about) { padding-bottom: 0; }

/* Nawigacja boczna (desktop) — Figma #22425: wiersz 48 px = tekst 34 px u góry + 13 px + linia #eee 1 px,
   odstęp między wierszami 13,67 px (pitch 61,67). Tekst pierwszego wiersza @167, jak tytuł. */
.legal-nav__list li { border-bottom: 1px solid #eee; margin-bottom: 13.67px; }
.legal-nav__list li:last-child { margin-bottom: 0; }
.legal-nav__list a {
	display: block;
	padding: 0 0 13px;
	font-size: 14px;
	line-height: 34px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-black);
	transition: color 0.2s;
}
.legal-nav__list a:hover { color: var(--c-gold); }
.legal-nav__list a.is-current { font-weight: 600; color: var(--c-gold); }
.legal-nav-m { display: none; }

.legal__content { min-width: 0; }
.legal__title,
.blog-list__title,
.article__title {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: clamp(28px, 1.98vw, 38px);
	line-height: 1.3684;
	margin-bottom: clamp(20px, 2.5vw, 40px);
}
/* Odstęp tytuł → treść wg Figmy: treść prawna 36 px (#22729), lista FAQ 48 px (#22444), wstęp Reklamacji/Zwrotów 18 px (#23136).
   Wartości dla 1920 px, skalowane z szerokością; na telefonie wszędzie 18 px (zob. @media 767). */
#main.legal .legal__content > .legal__title { margin-bottom: clamp(20px, 1.875vw, 36px); }
#main.legal .legal__content:has(.process-steps) > .legal__title { margin-bottom: clamp(14px, 0.9375vw, 18px); }
/* Figma #22729: DM Sans 300/14, lh auto (ok. 18,2 px), kolumna 1154 px; tylko wstęp Reklamacji/Zwrotów ma 794 px (#23136). */
.entry__content--legal { max-width: none; font-size: 14px; line-height: 1.3; font-weight: 300; }
.legal__content:has(.process-steps) > .entry__content--legal { max-width: 794px; }
.entry__content--legal p + p { margin-top: 1.4em; }
/* Treść z edytora i dokumenty Complianz: nagłówki DM Sans 500 (h2 — Noto Serif Display 300), pogrubienia 500.
   Prefiks #main podbija specyficzność ponad CSS Complianza (.cmplz-document h2/h3: 22px/700). */
#main :is(.entry__content, .article__content, .cmplz-document) :is(h2, h3, h4) { font-family: var(--f-sans); font-weight: 500; font-size: 16px; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; margin: 2em 0 .75em; }
#main :is(.entry__content, .article__content, .cmplz-document) h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(22px, 1.46vw, 28px); line-height: 1.37; letter-spacing: 0; text-transform: none; }
#main :is(.entry__content, .article__content, .cmplz-document) :is(strong, b) { font-weight: 500; }
/* Brak plików kursywy — bez sztucznego pochylenia */
#main :is(.entry__content, .article__content, .cmplz-document) :is(em, i) { font-style: normal; }
/* Figma #23109: przycisk pod kartami 276×48, napis i strzałka wyśrodkowane; stopka 96 px niżej (#22930). */
.legal__form-cta {
	margin-bottom: 0;
	width: max-content;
	min-width: 276px;
	justify-content: center;
}
.legal__inner:has(.process-steps) { padding-bottom: clamp(56px, 5vw, 96px); }
/* Gwarancja i serwis (przycisk zaraz pod treścią): Figma #23592 — 32 px pod tekstem, 292×48 (odstęp wewn. 28 px razem z obrysem). */
.entry__content--legal + .legal__form-cta { margin-top: 32px; min-width: 0; padding-inline: 27px; }

/* ---------- Kroki procesu (Reklamacje/Zwrot): 4 ponumerowane karty ---------- */
.process-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 32px; /* Figma #23137: akapit wstępu @239 (36 px), karty @307 */
	margin-bottom: clamp(24px, 2.5vw, 48px);
}
.process-steps__item {
	background: #fbfbfb;
	border-radius: 4px;
	padding: 24px;
	min-height: 470px; /* Figma #23138: karty równej wysokości 276×470 */
}
.process-steps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 18px; /* Figma #23139: tytuł 18 px pod kółkiem */
	border-radius: 116px;
	background: #efefef;
	font-family: var(--f-sans);
	font-weight: 600;
	font-size: 14px;
}
.process-steps__title {
	font-family: var(--f-sans);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.286;
	margin-bottom: 18px;
}
.process-steps__text {
	font-family: var(--f-sans);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.3; /* Figma #23142: lh 100% (18 px) */
}
.process-steps__text + .process-steps__text { margin-top: 18px; } /* Figma #23143: pusty wiersz 18 px między akapitami */

/* CTA „Masz pytania…” w sidebarze */
.help-cta {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.help-cta__label {
	font-size: 14px;
	line-height: 23px;
	min-height: 34px; /* Figma #22415: ramka etykiety 399×34, przycisk 14 px niżej */
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.help-cta .btn-line { width: max-content; }
/* Figma #22418: przycisk 271×48, odstęp wewnętrzny 32 px razem z obrysem (tekst @152, strzałka @341). */
.legal .help-cta .btn-line { padding-inline: 31px; }

/* ---------- FAQ: akordeon ---------- */
/* Figma #22447: wiersz pytania 68 px (tekst 18/500, lh 34, ikona 32 px u góry), linia #eee, odstęp 24 px → pitch 92 */
.faq-list { display: flex; flex-direction: column; gap: 24px; padding-top: clamp(8px, 0.625vw, 12px); } /* + 36 px pod tytułem = 48 px (Figma #22444) */
.faq-item { border-bottom: 1px solid var(--c-bar); }
.faq-item__btn {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	min-height: 67px;
	padding: 0 0 33px;
	text-align: left;
}
.faq-item__btn span {
	font-family: var(--f-sans);
	font-weight: 500;
	font-size: 18px;
	line-height: 34px;
}
/* Figma #22454/#22449: zamknięte „+” z ramionami 16 px, otwarte „−” (tylko pozioma kreska). Ikona `add` to dwie przekątne:
   obrót 45° daje „+”, a ukrycie pierwszej przekątnej (po obrocie pionowej) zostawia „−”. Skala .91 → ramię 16 px zamiast 17,6. */
.faq-item__icon { width: 32px; height: 32px; flex: none; transform: rotate(45deg) scale(0.91); }
.faq-item.is-open .faq-item__icon path:first-child { opacity: 0; }
.faq-item.is-open .faq-item__btn { min-height: 0; padding-bottom: 0; }
.faq-item__a {
	max-width: 759px; /* Figma #22448: 14/20, #000, 759 px */
	padding-top: 4px; /* Figma: odpowiedź @307, pytanie kończy się @303 */
	padding-bottom: 33px;
	font-size: 14px;
	line-height: 20px;
	color: var(--c-black);
}
.faq-item__a[hidden] { display: none; }

/* ---------- Kontakt ---------- */
/* Figma #31065: strona `#fbfbfb`, okruszki jak na innych podstronach, karta formularza 1154×576 @646,161
   (26 px pod okruszkami), h1 „Kontakt” w lewej kolumnie @169, stopka 137 px pod lewą kolumną. */
.contact-page { background: #fbfbfb; }
/* Figma: karta kończy się @737, stopka @874 (137 px). Domyślne 80 px `#main` z main.css dokładałyby się do tego. */
#main.contact-page:not(.home):not(.about) { padding-bottom: 0; }
.contact-page__inner { padding-top: 26px; padding-bottom: clamp(56px, 7.1vw, 137px); }
.contact-page__info .legal__title { margin-top: 8px; }
.contact-page__grid {
	display: grid;
	grid-template-columns: 399px 1fr;
	gap: clamp(24px, 6.6vw, 127px);
	align-items: start;
}
/* Figma #31301: bloki co 48 px; nagłówek 23 px + 10 px + linia #e0e0e0 (razem 34), wartość 18 px niżej, wiersze wartości co 8 px. */
.info-block { margin-top: clamp(24px, 2.5vw, 48px); font-size: 14px; line-height: 23px; }
.info-block:first-of-type { margin-top: clamp(24px, 3vw, 48px); }
.info-block__head { letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid #e0e0e0; }
.info-block p:not(.info-block__head) + p { margin-top: 8px; }
.info-block__text { line-height: 19px; } /* Figma #31315: 14/19 */
.info-block a:hover { color: var(--c-gold); }
/* Figma #31316: ikony 24×24 co 42 px, 28 px pod tekstem */
.info-block__social { display: flex; gap: 18px; margin-top: 28px; }
.info-block__social a, .info-block__social svg { display: block; width: 24px; height: 24px; }

/* Karta: padding 48 (tytuł @694,209), pola @696 (331×56, odstęp 32), textarea 694 px, zgoda 20×20, przycisk 249×48; narożniki proste (Figma bez promienia) */
.contact-page__form { background: var(--c-white); padding: clamp(28px, 2.5vw, 48px); padding-bottom: clamp(28px, 1.77vw, 34px); border-radius: 0; }
.contact-form__title {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: clamp(28px, 1.98vw, 38px);
	line-height: 1.37;
	margin-bottom: clamp(24px, 2.4vw, 46px);
}
.contact-form__form { display: flex; flex-direction: column; gap: 0; padding-inline: clamp(0px, 0.1vw, 2px) 0; }
/* Figma #31328: trzy równe pola 331 px, odstęp 32. Na węższych ekranach trzecie pole jest szersze, żeby „Wybierz temat (opcjonalne)” się mieściło. */
.contact-form__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.67vw, 32px); }
@media (max-width: 1599px) {
	.contact-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(250px, 1.3fr); }
}
.contact-form__form .field--area { max-width: 694px; margin-top: clamp(20px, 2.66vw, 51px); }
.contact-form__form .consent { max-width: 714px; margin-top: clamp(20px, 1.67vw, 32px); line-height: 24px; gap: 18px; }
.contact-form__form .btn-line { margin-top: clamp(24px, 2.03vw, 39px); padding-inline: 30.5px; } /* przycisk 249×48 @655 (zgoda 2×24 + 39) */

/* Pola formularza: tylko dolna kreska #d9d9d9 (Figma #31329/#31338: 56 / 122 px, etykieta 8 px od lewej, czarna) */
.contact-form__form .field :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	border: 0;
	border-bottom: 1px solid #d9d9d9;
	border-radius: 0;
	background-color: transparent;
	padding: 0 8px;
	color: var(--c-black);
}
.contact-form__form .field textarea[name] { padding: 16px 8px; }
.contact-form__form .field :is(input, textarea)::placeholder { color: var(--c-black); opacity: 1; }
.contact-form__form .field :is(input, select, textarea):focus { outline: 0; border-bottom-color: var(--c-black); }
.contact-form__form .field :is(input, select, textarea):focus-visible { outline: 1px solid var(--c-black); outline-offset: 3px; }
/* Strzałka rozwijania 16×16 przy prawej krawędzi (Figma #31335: 8 px od brzegu) */
.contact-form__form .field select[name] {
	padding-right: 32px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 5.5 8 11l5.5-5.5' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px 16px;
}
/* Zgoda: kwadrat 20×20, obrys #000 1 px, zaznaczenie czarnym kwadratem (jak w koszyku / newsletterze) */
.contact-form__form .consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	display: grid;
	place-content: center;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--c-black);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}
.contact-form__form .consent input[type="checkbox"]:checked::before { content: ""; width: 10px; height: 10px; background: var(--c-black); }
.contact-form__form .consent input[type="checkbox"]:focus-visible { outline: 1px solid var(--c-black); outline-offset: 3px; }
.contact-form__form .field textarea { display: block; }
.contact-page__info .info-block:first-of-type { margin-top: 0; }
.contact-page__info .legal__title { margin-bottom: 32px; }
.field { display: block; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
	width: 100%;
	height: 56px;
	padding: 0 16px;
	border: 1px solid var(--c-line-3);
	font: inherit;
	font-size: 14px;
	background: var(--c-white);
	color: var(--c-black);
}
.field select { appearance: none; cursor: pointer; }
.field textarea { height: auto; min-height: 122px; padding: 16px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #868686; }
.field--hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 24px; }
.consent input { margin-top: 2px; flex: none; width: 20px; height: 20px; accent-color: var(--c-gold); }
.consent a { text-decoration: underline; }
.contact-form__form .btn-line { align-self: flex-start; }.form-msg { padding: 14px 18px; margin-bottom: 16px; font-size: 14px; }
.form-msg--ok { background: #eef4ea; color: #2a5c1f; }
.form-msg--error { background: #f8e9e9; color: #7c1f1f; }

/* ---------- Blog: lista ---------- */
/* Siatka: filtry w lewej kolumnie na obu wierszach, tytuł i lista po prawej (tytuł jest osobnym dzieckiem siatki — na telefonie idzie przed filtry). */
.blog__layout { row-gap: 0; grid-template-areas: "filters title" "filters list"; grid-template-rows: auto 1fr; }
.blog__layout > .blog-list__title { grid-area: title; }
.blog__layout > .blog-filters { grid-area: filters; }
.blog__layout > .blog-list { grid-area: list; min-width: 0; }
/* Przełącznik filtrów (telefon) — na desktopie niewidoczny, filtry zawsze rozwinięte */
.blog-filters__toggle, .blog-filters__open { display: none; }
/* Figma #31860: nagłówek 36 px + 24 px + linia #d8d8d8 = 61 px, napisy wyśrodkowane w 36 px */
.blog-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--c-line-3); margin-bottom: 24px; box-sizing: content-box; }
.blog-filters__label { font-size: 14px; }
.blog-filters__reset { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.blog-filters__reset .icon { width: 18px; height: 18px; }
/* Figma #31874: chipy co 18 px, padding 14, obrys #eee */
.blog-filters__list { display: flex; flex-wrap: wrap; gap: 18px; }
.blog-filters__list a {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 14px;
	border: 1px solid #eee;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 0.2s, border-color 0.2s;
}
.blog-filters__list a:hover,
.blog-filters__list a.is-active { background: var(--c-sand); border-color: var(--c-sand); }

.blog-list > .news-lead { margin-bottom: clamp(32px, 3.5vw, 56px); }
/* Figma #31668/#31669: zdjęcie 514×345, kolumna tekstu 598 px @ +556 (odstęp 42), pitch wierszy 393 (odstęp 48). */
.blog-row {
	display: grid;
	grid-template-columns: 514px minmax(0, 1fr);
	gap: clamp(24px, 2.2vw, 42px);
	padding: 24px 0 23px; /* 24 + 1 (linia) + 23 = odstęp 48 między kartami → pitch 393 */
	border-top: 1px solid var(--c-line-2);
}
.blog-list > .blog-row:first-child { padding-top: 0; border-top: 0; }
.blog-list > .blog-row:last-of-type { padding-bottom: 0; }
/* Figma #31859: 120 px od ostatniej karty do stopki — domyślne 80 px `#main` z main.css już się nie dokłada. */
#main.blog:not(.home):not(.about), #main.article:not(.home):not(.about) { padding-bottom: 0; }
.blog-list__title { max-width: 660px; } /* Figma #31664: tytuł 660 px → 2 wiersze */
@media (min-width: 768px) {
	.blog-list__title { margin-bottom: 33px; } /* Figma: tytuł kończy się @273, pierwszy wiersz @306 */
}
.blog-row__media { display: block; aspect-ratio: 514/345; overflow: hidden; }
.blog-row__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.blog-row:hover .blog-row__img { transform: scale(1.03); }
.blog-row__body { display: flex; flex-direction: column; }
/* Figma #31670: tag 22 px pod górą karty, tytuł 42 px pod tagiem, 24 px do wstępu (Sofia 14/17), 24 px do rzędu daty 40 px */
@media (min-width: 768px) {
	.blog-row__body { padding-top: 22px; }
	.blog-row .news-meta { padding-right: 5px; } /* rząd 593 px (ramka 61), strzałka kończy się @1795 */
}
.blog-row__title {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: clamp(22px, 1.98vw, 38px); /* Figma #31672: 38/300 */
	line-height: 1.3684;
	margin: 42px 0 24px;
}
.blog-row__excerpt { font-family: var(--f-sofia); font-size: 14px; line-height: 17px; font-weight: 300; margin-bottom: 24px; }
.blog-row .news-meta { margin-top: auto; min-height: 40px; }
/* Figma #31678: przycisk-strzałka 52×40 z obrysem #e5e5e5 */
.blog-row .news-meta__go { width: 52px; height: 40px; border: 1px solid var(--c-line-2); border-radius: 0; flex: none; }

/* Paginacja WP */
.pagination,
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(24px, 3vw, 48px); }
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--c-line-3);
	font-size: 14px;
}
.nav-links .page-numbers.current { background: var(--c-sand); border-color: var(--c-sand); }
.nav-links .page-numbers:hover { border-color: var(--c-gold); }

/* ---------- Blog: artykuł ---------- */
/* Figma #31887: kolumna treści 1154 px od x=646 (399 + odstęp jak `.legal__layout`), data 14/300 nad tytułem,
   obraz 1154×560, akapit 14/300. */
.article__layout {
	display: grid;
	grid-template-columns: 399px minmax(0, 1fr);
	gap: clamp(24px, 6.6vw, 127px);
}
.article__col { grid-column: 2; min-width: 0; }
.article__head { max-width: 660px; }
.article__meta { font-size: 14px; line-height: 18px; font-weight: 300; margin-bottom: clamp(16px, 1.67vw, 32px); }
.article__title { margin-bottom: clamp(20px, 1.67vw, 32px); }
.article__media { margin-bottom: clamp(24px, 1.67vw, 32px); aspect-ratio: 1154/560; overflow: hidden; } /* Figma #32065: 32 px między zdjęciem a tekstem */
.article__img { width: 100%; height: 100%; object-fit: cover; }
.article__content { max-width: none; font-size: 14px; line-height: 1.7; font-weight: 300; } /* akapit na pełną kolumnę 1154 px (#32063) */
.article__back { margin-top: clamp(32px, 3.5vw, 56px); }
@media (max-width: 1199px) {
	.article__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.article__col { grid-column: 1; }
	.blog-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* ==========================================================================
   Mobile (≤767px)
   ========================================================================== */
@media (max-width: 767px) {
	.legal__layout,
	.blog__layout,
	.contact-page__grid { grid-template-columns: 1fr; gap: 32px; }
	/* Figma #30214: menu-dropdown pod okruszkami (@134), h1 45 px niżej, blok „Masz pytania…” na końcu treści.
	   `.legal__side` znika z układu (display: contents), więc menu i CTA są osobnymi wierszami siatki:
	   menu (order -1) → treść → CTA (order 1). */
	.legal__inner,
	.contact-page__inner { padding-left: 20px; padding-right: 20px; }
	/* Dropdown @134 (Figma #30216): okruszki kończą się @127 → 7 px odstępu. */
	.legal__inner { padding-top: 7px; padding-bottom: 64px; }
	.legal__inner:has(.process-steps) { padding-bottom: 38px; } /* Figma #30513: stopka 38 px pod blokiem „Masz pytania…” */
	.legal__layout { gap: 45px; }
	.legal__content .legal__title { margin-top: 0; }
	#main.legal .legal__content > .legal__title,
	#main.legal .legal__content:has(.process-steps) > .legal__title { margin-bottom: 18px; } /* Figma: treść 18 px pod tytułem */
	.faq-list { padding-top: 0; }
	.legal__side { display: contents; }
	/* Figma #30577: karty równej wysokości 353×398, odstęp 18 px, 45 px pod wstępem, 38 px nad przyciskiem */
	.process-steps { grid-template-columns: 1fr; gap: 18px; margin-top: 45px; margin-bottom: 38px; }
	.process-steps__item { min-height: 398px; }
	/* Figma #30570: przycisk na całą szerokość, napis wyśrodkowany; blok „Masz pytania…” 106 px pod nim (Gwarancja: 82 px, #30792) */
	.legal__form-cta { width: 100%; min-width: 0; margin-bottom: 24px; }
	.entry__content--legal + .legal__form-cta { margin-bottom: 0; padding-inline: 0; }
	.legal-nav { display: none; }
	/* Figma #30369: napis @+18 od ramki (64 px pod treścią), przycisk 42 px pod górą napisu; przycisk na całą szerokość, wyśrodkowany. */
	.help-cta { order: 1; gap: 19px; padding-top: 37px; }
	.help-cta__label { min-height: 0; }
	.legal .help-cta .btn-line { width: 100%; justify-content: center; }

	.legal-nav-m { display: block; order: -1; margin-inline: -13px; background: #f5f5f5; border: 1px solid #f4f4f4; }
	.legal-nav-m__current {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 19px 12px; /* 34 + 2×19 + 2×1 (obrys) = 74 px; napis @20 i strzałka kończy się @373 (Figma #30218) */
		font-size: 14px;
		line-height: 34px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		cursor: pointer;
		list-style: none;
	}
	.legal-nav-m__current::-webkit-details-marker { display: none; }
	.legal-nav-m[open] .legal-nav-m__current .icon { transform: rotate(180deg); }
	.legal-nav-m__current .icon { width: 16px; height: 16px; flex: none; } /* Figma #30220: strzałka 16×16 */
	.legal-nav-m__list { padding: 0 12px 20px; }
	.legal-nav-m__list li + li { border-top: 1px solid #e6e6e6; }
	.legal-nav-m__list a { display: block; padding: 12px 0; font-size: 14px; }

	/* Figma #30328: pytanie 18/500 (tekst 292 px, lh 21 px, otwarte 22 px), ikona 32×32; odpowiedź 14/16 w kolumnie 292 px, 14 px pod pytaniem */
	.faq-item__btn { gap: 16px; }
	.faq-item__btn span { flex: 0 1 293px; line-height: 21px; }
	.faq-item.is-open .faq-item__btn span { line-height: 22px; }
	.faq-item__a { max-width: 292px; padding-top: 14px; line-height: 16px; }

	/* Figma #31347: biała karta 379 px @7 (padding 32 / 13), pola pełnej szerokości, przycisk na całą szerokość */
	.contact-page__inner { padding-top: 0; }
	.contact-page__info .legal__title { margin-top: 2px; }
	/* Figma #31451: bloki co 18 px, wartości co 3 px */
	.info-block { margin-top: 18px; }
	.info-block p:not(.info-block__head) + p { margin-top: 3px; }
	.contact-page__form { margin-inline: -13px; padding: 32px 13px 33px; }
	/* Figma #31485: checkbox 26×26, blok zgody 82 px */
	.contact-form__form .consent { min-height: 82px; }
	.contact-form__form .consent input[type="checkbox"] { width: 26px; height: 26px; }
	.contact-form__form .consent input[type="checkbox"]:checked::before { width: 13px; height: 13px; }
	.contact-form__form { padding-inline: 0; }
	.contact-form__row { grid-template-columns: 1fr; gap: 32px; }
	.contact-form__form .field--area { max-width: none; margin-top: 41px; }
	.contact-form__form .consent { max-width: none; margin-top: 41px; }
	.contact-form__form .btn-line { align-self: stretch; justify-content: center; margin-top: 41px; }
	.contact-form__title { margin-bottom: 46px; }
	/* iOS powiększa stronę przy polach <16px */
	.field input[type="text"],
	.field input[type="email"],
	.field input[type="tel"],
	.field select,
	.field textarea { font-size: 16px; }
	/* Figma: tytuł listy bloga 24/Regular */
	.blog-list__title { font-size: 24px; font-weight: 400; }

	/* Figma #26172: marginesy 20 px, okruszki @102 (30 px pod paskiem), tytuł @154 (18 px niżej), na wpisie data @160 (24 px) */
	.blog__inner, .article__inner { padding-left: 20px; padding-right: 20px; }
	.blog__inner { padding-bottom: 64px; }
	.crumb { padding: 30px 0 18px; }
	.article .crumb { padding-bottom: 24px; }
	/* Kolejność: tytuł → przycisk „Pokaż filtry” (Figma #26277, @238, 18 px pod tytułem) → karty 32 px niżej */
	.blog__layout { grid-template-areas: "title" "filters" "list"; grid-template-rows: none; gap: 0; }
	.blog-list__title { margin-bottom: 18px; }
	.blog-filters { position: relative; margin-bottom: 32px; }
	.blog-filters__toggle { display: block; position: absolute; top: 0; right: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
	.blog-filters__open { display: flex; align-items: center; gap: 10px; width: max-content; height: 36px; margin-left: auto; font-size: 14px; line-height: 18px; cursor: pointer; }
	.blog-filters__open .icon { width: 18px; height: 18px; }
	.blog-filters__toggle:focus-visible + .blog-filters__open { outline: 1px solid var(--c-black); outline-offset: 3px; }
	.blog-filters__head, .blog-filters__list { display: none; }
	.blog-filters__toggle:checked ~ .blog-filters__head { display: flex; margin-top: 24px; }
	.blog-filters__toggle:checked ~ .blog-filters__list { display: flex; }
	.blog-filters__list { gap: 8px; }
	/* Figma #26288: zdjęcie 237 px, tag 32 px pod zdjęciem, tytuł 24 px pod tagiem, wstęp DM Sans 14/18, rząd daty 14 px pod wstępem, odstęp między kartami 32 */
	.blog-row { grid-template-columns: 1fr; gap: 16px; padding: 16px 0 15px; }
	.blog-row__body { padding-top: 16px; }
	.blog-row__excerpt { font-family: var(--f-sans); line-height: 18px; margin-bottom: 14px; }
	/* Figma #26343: tytuł wiersza 16/400 (2 wiersze po 22 px) */
	.blog-row__title { font-size: 16px; font-weight: 400; line-height: 22px; margin: 24px 0 14px; }
	.article__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.article__col { grid-column: 1; }
	/* Figma #26520: data @160, tytuł 24/400 @188 */
	.article__meta { margin-bottom: 10px; }
	.article__title { font-size: 24px; font-weight: 400; line-height: 1.375; margin-bottom: 24px; }

	.article__media { aspect-ratio: 4/3; }
}