/* ============================================================
   Industry — podstrony branżowe /branze/<slug>/ (detail).
   Phase 3. Sekcje: hero / context / benefits / proof / products / faq.
   Hub /branze/ → industry-hub (dodane w Kroku 5).
   Tokeny only (lint). Zero-JS (FAQ = native details).
   ============================================================ */

/* ---------- Hero — migrowany do .u-hero/.u-hero--medium/.u-split (utilities.css).
   Hub (page-branze.php) i detail (section-industry-hero.php) oba na .u-hero teraz —
   .industry-hero-block zostaje (owija hero+marquee-bar tylko na detail). ---------- */

/* ---------- Context — layout: .u-split (utilities). Tu tylko specyfika kadru. ---------- */
@media (min-width: 992px) {
	/* Wiersz o wysokości treści (stretch): media = wysokość treści, obraz wpisany (contain).
	   Grafika Rozwiązania (mirror) powiększona o 20% — wystaje poza kadr, grid tracks bez zmian. */
	.industry-context__grid {
		align-items: stretch;
	}
	.industry-context__media {
		position: relative;
	}
	.industry-context__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}
	/* Grafika Rozwiązania (context2) odbita w poziomie — manifold w stronę treści; +20%. */
	.industry-context--mirror .industry-context__media img {
		transform: scaleX(-1) scale(1.2);
	}
}
/* Lewa kolumna (treść). Measure zdjęte — kolumna już połówkowa. */
.industry-context__inner {
	min-width: 0;
}
/* Prawa kolumna — grafika (line-art przekroju), CAŁY obraz.
   multiply: białe tło line-artu znika (webp bez alpha), czarne linie zostają,
   siateczka tła prześwituje — efekt transparentnego line-artu bez obróbki pliku.
   height auto TYLKO mobile (desktop steruje height:100% w @media wyżej — reguła
   niżej w pliku nadpisałaby przy tej samej specyfice). */
.industry-context__media img {
	width: 100%;
	mix-blend-mode: multiply;
}
@media (max-width: 991px) {
	.industry-context__media img { height: auto; }
}
/* --- Nagłówek sekcji: .section-head w utilities.css --- */
/* Odstęp nagłówek→treść: sitewide default z wrappera (utilities.css, audyt 24.07 —
   32 desktop / 8 mobile). Lokalny override wrappera (był 0) i __title (był 16 na
   wszystkich sekcjach branży) usunięte — kolidowały z nową bazą. FAQ --compact (16)
   zostaje niżej jako świadomy wyjątek (gęstszy head→lista, decyzja user 2026-07-24). */
.industry-context__body {
	font-size: var(--text-body);   /* 16px — proza sekcji jednolicie (user 2026-07-24: bez 17 w midderze) */
	line-height: 1.7;
	color: var(--graphite);
}
.industry-context__body p { margin: 0 0 var(--space-16); }
.industry-context__body p:last-child { margin-bottom: 0; }
/* Scroll-reveal NAGŁÓWKA (port Reading Text Reveal z 21st, 2026-07-23): słowa-spany;
   armowane JS-em (.is-armed) — bez JS / reduced-motion pełny kolor od razu. */
.industry-context__title.is-armed .industry-context__w {
	color: color-mix(in srgb, var(--graphite) 24%, transparent);
	transition: color var(--transition-base);
}
.industry-context__title.is-armed .industry-context__w.is-on {
	color: var(--graphite);
}

/* ---------- Wspólny head: .section-head w utilities.css ---------- */

/* ---------- Benefits — split: kadr foto | akordeon hairline ----------
   Port wariantu Claude Design 2026-07-23, przycięty do kanonu (korekty Tomka:
   spec-head/numerator OUT — nagłówek = .section-head; górne linie OUT).
   Akordeon = rejestr wierszy z plus/minus jak FAQ (kanon); exclusive-open. */
/* Benefits layout: .u-split.u-split--reverse (utilities) — akordeon lewa, kadr foto prawa.
   Tu tylko: align-items start (kadr NIE rośnie z otwieranym akordeonem — nadpisuje util). */
@media (min-width: 992px) {
	.industry-benefits__split { align-items: start; }
}
/* Kadr: ostre rogi + .u-image (shadow-mega, blue frame z krzyżykami — utilities.css).
   Wewnętrzny __media-frame robi crop (overflow na .u-image przycinałby krzyżyki -8px). */
.industry-benefits__media {
	position: relative;
	background: var(--graphite);
	aspect-ratio: 4 / 3;
}
@media (min-width: 992px) {
	.industry-benefits__media {
		aspect-ratio: auto;
		height: 480px;   /* tier wysoki, STAŁA — kadr niezależny od wysokości akordeonu */
	}
}
.industry-benefits__media-frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.industry-benefits__media-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Kadr per wiersz akordeonu: obrazki w stosie, crossfade na otwarcie taba
   (JS industry-benefits.js; bez JS widoczny pierwszy — is-active z serwera). */
.industry-benefits__media-frame img {
	opacity: 0;
	transition: opacity var(--transition-base);
}
.industry-benefits__media-frame img.is-active {
	opacity: 1;
}
/* Mobile: gorna linia listy OUT (dublowalaby section-head) — dolna pod ostatnim
   WRACA (user 2026-07-24, ramka symetryczna jak FAQ first-child) */
@media (max-width: 767.98px) {
	.industry-benefits__list { border-top: 0; }
}

/* Mobile: kadr NAD belką otwartego wiersza (element przed details, JS toggle .is-open;
   user 2026-07-24 v2 — obrazek nad tytułem, nie między tytułem a akapitem) */
.industry-benefits__row-media { display: none; }
@media (max-width: 991.98px) {
	.industry-benefits__split > .industry-benefits__media { display: none; }
	.industry-benefits__row-media.is-open {
		display: block;   /* zdjęcie doklejone do hairline powyżej — bez top-padu (user 2026-07-24) */
	}
	.industry-benefits__row-media img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.industry-benefits__list {
	border-top: 1px solid var(--border);   /* linia nad 1. wierszem — taka sama jak separatory */
}
.industry-benefits__item {
	border-bottom: 1px solid var(--border);
}
.industry-benefits__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	padding: var(--space-16) var(--space-8) var(--space-16) 0;   /* 16 T/B + bez lewego padu (user 2026-07-24) */
	cursor: pointer;
	list-style: none;
}
.industry-benefits__q::-webkit-details-marker { display: none; }
.industry-benefits__q:focus-visible {
	outline: var(--focus-ring);
	outline-offset: calc(-1 * var(--focus-offset));
}
.industry-benefits__q-label {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	min-width: 0;
}
.industry-benefits__icon {
	flex-shrink: 0;
	display: inline-flex;
	color: var(--blue-dark);
}
.industry-benefits__title {
	margin: 0;
	font-size: var(--text-lead);   /* 17px stałe — user 2026-07-27, było var(--text-h4) clamp 17→22 */
	font-weight: 500;   /* było 600 z portu CD — korekta do kierunku wag (user 2026-07-24) */
	color: var(--graphite);
}
/* Plus/minus — utilities.css (scalone z faq/product-faq/tabs, audit prio 2.3) */
.industry-benefits__a {
	padding: 0 var(--space-8) var(--space-24);
}
.industry-benefits__a p {
	margin: 0;
	max-width: 60ch;   /* ciaśniejsza miara niż --measure — gęsty rejestr w kolumnie */
	font-size: var(--text-base);   /* 16px — korekta Tomka (design dawał 14, za mało dla B2B) */
	line-height: 1.6;
	color: var(--text-muted);
}

/* ---------- Proof (realizacje / empty-state) ---------- */
.industry-proof__grid {
	display: grid;
	gap: var(--space-32);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.industry-proof__grid { grid-template-columns: repeat(3, 1fr); }
	/* guard: ul nosi też .realizations__grid (mobile carousel home) — desktop/tablet
	   układ proof (3 RÓWNE, bez featured) musi wygrać z home-owym feature 1.6fr+span2 (user 2026-07-24) */
	.industry-proof .realizations__grid { grid-template-columns: repeat(3, 1fr); }
	.industry-proof .realizations__grid > li:first-child { grid-row: auto; }
	.industry-proof .realizations__grid > li:first-child .realizations__card {
		height: auto;
		aspect-ratio: 3 / 4;   /* jak pozostałe kafle proof (kanon kafla) */
	}
	.industry-proof .realizations__grid > li:not(:first-child) .realizations__card { aspect-ratio: 3 / 4; }
	.industry-proof .realizations__grid > li:first-child .realizations__title { font-size: var(--text-h3); }
	/* 1-2 realizacje (branża z niepełnym kompletem case studies): wyśrodkuj zamiast
	   rozciągać do 3-kolumnowej siatki z pustymi komórkami po prawej (user 2026-07-27). */
	.industry-proof__grid:has(> li:nth-child(1):last-child),
	.industry-proof__grid:has(> li:nth-child(2):last-child),
	.industry-proof .realizations__grid:has(> li:nth-child(1):last-child),
	.industry-proof .realizations__grid:has(> li:nth-child(2):last-child) {
		grid-template-columns: repeat(auto-fit, minmax(0, 380px));
		justify-content: center;
	}
}
/* Head→tresc: sitewide default 16 (utilities.css, plaskie, bez media query) — lokalne
   --start/proof/FAQ-compact override'y usuniete (--compact skasowany, byl 32, teraz
   kolidowalby z nowa baza 16; FAQ dostaje ta sama baze bez modyfikatora). */
/* Karta proof = kafel realizacji (.realizations__card, realizations.css): grafit,
   media-scrim bez zdjęcia (NDA placeholder), chip/title/desc on-dark, krzyżyki narożne.
   z-index:2 — nad ghost-rurą FAQ (wchodzi górą na tę sekcję, nie pod karty).
   aspect 16:10 (2 klasy > realizations__card 3:4) — proporcja jak hub realizacji. */
.industry-proof__card { position: relative; z-index: 2; }
.industry-proof__grid .industry-proof__card { aspect-ratio: 16 / 10; }
/* .industry-proof__empty -> .u-empty-state.u-empty-state--boxed (utilities.css) */

/* ---------- Products (karty kategorii — płaski panel, linia u góry na hover) ---------- */
.industry-products__grid {
	display: grid;
	gap: var(--space-32);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	.industry-products__grid { grid-template-columns: repeat(2, 1fr); }
}
.industry-products__item { display: flex; }
/* .industry-products__card/__icon/__title/__cta: .u-card.u-card--link / .u-card-icon /
   .u-card-title / .u-cta.u-cta--gap-8.u-cta--auto w utilities.css */
/* opis: .u-desc.u-desc--gap-16 w utilities.css */

/* ---------- FAQ (native details/summary, zero-JS) ----------
   Wzorzec kanoniczny = product-faq (products.css): wiersz hairline (border-bottom),
   zero radiusa, plus/minus z linii 1px. Przestylowane z wariantu karta+chevron
   (radius-md) — decyzja 2026-07-22, audyt pkt 3. */
.industry-faq {
	position: relative;
	/* Bez clipu: na szerokich ekranach rura wystaje górą na sekcję proof (ghost),
	   ale zostaje POD kartami realizacji — industry-proof__card z-index:2. */
}
/* Ghosted line-art (kanon cta-contact: opacity 0.4) — lewa krawędź EKRANU + bottom sekcji,
   mirror (reverse); tylko desktop (na stacku mobile kolidowałby z treścią). */
.industry-faq__art {
	display: none;
}
@media (min-width: 992px) {
	.industry-faq__art {
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: calc(50% - var(--space-48));   /* do prawej krawędzi lewego 1fr: 50% sekcji − pół gapu 96 (user 2026-07-24) */
		height: auto;
		transform: scaleX(-1);
		opacity: 0.4;
		pointer-events: none;
		z-index: 0;
	}
}
/* Split konstrukcyjnie jak .industry-benefits__split (wzorzec, user 2026-07-24):
   czysty .container > __split (grid 1fr|1fr gap 96) > __content w PRAWEJ kolumnie.
   Lewa pusta — na ghost line-art (absolutny do sekcji, poza gridem). Mobile: stack. */
.industry-faq__split {
	position: relative;
	z-index: 1;   /* treść nad ghost artem */
}
@media (min-width: 992px) {
	.industry-faq__split {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-96);
		align-items: start;
	}
	.industry-faq__content { grid-column: 2; }
}
.industry-faq__item {
	border-bottom: 1px solid var(--border);
}
.industry-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	padding: var(--space-24) var(--space-8) var(--space-24) 0;
	font-size: var(--text-lead);
	font-weight: 600;
	color: var(--graphite);
	cursor: pointer;
	list-style: none;
}
/* Mobile: spacingi i rozmiar tytułu wg wzoru product-faq (user 2026-07-24) —
   summary 16 T/B, tytuł 16 zamiast 17 */
@media (max-width: 767.98px) {
	.industry-faq__q {
		padding: var(--space-16) var(--space-8) var(--space-16) 0;
		font-size: var(--text-body);
	}
}
/* Ramka nad 1. pytaniem (symetria z border-bottom kazdego wiersza) — normalny
   padding-top (bylo zerowane, cofniete: user 2026-07-24) */
.industry-faq__item:first-child {
	border-top: 1px solid var(--border);
}
.industry-faq__q::-webkit-details-marker { display: none; }
/* Plus/minus — utilities.css (scalone z product-faq/benefits/tabs, audit prio 2.3) */
.industry-faq__q:focus-visible {
	outline: var(--focus-ring);
	outline-offset: calc(-1 * var(--focus-offset));
}
.industry-faq__a {
	padding: 0 0 var(--space-24);   /* typografia: .u-desc.u-desc--loose w utilities.css */
}
.industry-faq__a p { margin: 0 0 var(--space-16); }
.industry-faq__a p:last-child { margin-bottom: 0; }

/* ---------- Hub /branze/ (listing 6 branż) ---------- */
/* Hero hub — .u-hero--medium (utilities.css), bez modyfikatora lokalnego. */
/* Odstęp hub->intro o połowę mniejszy niż standardowe 2×section-py (tylko ta granica,
   padding-top/bottom obu sekcji zostaje bez zmian względem hero i CTA po drugiej stronie). */
.industry-intro {
	margin-top: calc(var(--section-py) * -1);
}
/* Intro SEO pod gridem: 3 akapity osobno, każdy z ikoną nad tekstem. */
.industry-intro__inner {
	display: grid;
	gap: var(--space-32);
	align-items: start;
}
@media (min-width: 768px) {
	.industry-intro__inner {
		grid-template-columns: repeat(3, 1fr);
		column-gap: var(--space-96);
	}
}
.industry-hub__grid {
	display: grid;
	gap: var(--space-32);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	.industry-hub__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	.industry-hub__grid { grid-template-columns: repeat(3, 1fr); }
}
.industry-hub__item { display: flex; }
/* .industry-hub__card: .u-card--elevated w utilities.css (shadow-mega + krzyżyki, wzorzec
   .products-cf__card). .industry-hub__title/__cta: .u-card-title / .u-cta.u-cta--sm */

/* Opis branży — base .u-card--elevated .u-desc tnie do 2 linii; tu 3 (za mało miejsca na
   pełne zdania przy 3 kartach/wiersz, ale 2 ucinało w połowie zdania — user 31.07). Odstęp do
   CTA = sam base .u-card .u-cta margin-top:24, bez dodatkowego marginesu tutaj (user 31.07:
   "nie trzeba 48 w sumie"). */
.industry-hub__card .u-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
/* base .u-card--elevated min-height:260 za niski dla tytułu 2-wierszowego + opisu 3-wierszowego.
   Realna treść (icon w flow + gwarantowany margin opis→cta) rośnie do ~334px i tak — floor
   280 to bezpieczna siatka na wypadek gdyby treść się skróciła, nie aktywny limit. Bez floora
   wiersze bez 2-wierszowego tytułu byłyby niższe niż wiersze z nim (grid liczy track osobno
   per wiersz) — floor wymusza tę samą wysokość wszędzie niezależnie od miksu tytułów (31.07). */
.industry-hub__card {
	min-height: 280px;
	/* base flex-end (treść dociągnięta do dołu, wzorzec slidera) tu odwrotnie — ikona/tytuł/opis
	   do góry, CTA osobno przypięte do dołu przez .u-cta--auto (margin-top:auto) w markupie
	   (user 31.07: "ikona title opis to dociągnij do góry", "cta tylko na dole"). */
	justify-content: flex-start;
	/* base padding-top:48 rezerwował miejsce na absolute ikonę (narożnik) — nieaktualne, ikona
	   w normalnym flow. Boki/dół już 24 z base, top wyrównany do tego samego (user 31.07). */
	padding-top: var(--space-24);
}
/* base .u-card--elevated .u-card-icon: position:absolute (wyjęta z flow, narożnik karty —
   wzorzec slidera produktowego). Tu z powrotem w normalnym flow jako pierwszy flex-child —
   odstęp do tytułu to zwykły margin-bottom, nie ręczna matematyka clearance względem
   absolutnego boksu (user 31.07: "czemu ikona nie jest w kontenerze tylko gdzieś sobie lata"). */
.industry-hub__card .industry-hub__icon {
	position: static;
	margin-bottom: var(--space-16);
}
/* Luz w karcie (różnica między jej naturalną wysokością a wysokością wiersza po row-stretch)
   ma wsiąkać TU — między ikoną a tytułem — nie niżej. Krótszy tytuł (1 wiersz, np. "Wodór")
   dostaje większy odstęp nad sobą i "klei się" do opisu od dołu; opis ma stałą wysokość
   (line-clamp), więc automatycznie ląduje na tej samej wysokości we WSZYSTKICH kartach
   wiersza, niezależnie od liczby wierszy tytułu (user 31.07: "opisy wyrównać do dołu"). */
.industry-hub__title {
	margin-top: auto;
}

/* ---------- Systems — rejestr wierszy spec (kanon 2026-07-24) ----------
   Ruled rows wg FOUNDATION §6: hairline między wierszami, mono = warstwa danych
   (kod obiegu CWS/FWS/TCS + materiał), zero kart / zero hover-liftu. */
.industry-systems__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--border);
}
.industry-systems__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	padding: var(--space-24) 0;
	border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) {
	.industry-systems__row {
		grid-template-columns: 72px 200px 1fr 200px;
		column-gap: var(--space-32);
		align-items: baseline;
	}
}
.industry-systems__code {
	font-family: var(--font-mono);
	font-size: var(--text-label);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blue-dark);
}
.industry-systems__name {
	margin: 0;
	font-size: var(--text-h4);
	font-weight: 500;
	letter-spacing: -0.015em;
}
.industry-systems__app {
	margin: 0;
	font-size: var(--text-body);
	color: var(--text-muted);
}
.industry-systems__material {
	font-family: var(--font-mono);
	font-size: var(--text-label);
	color: var(--text-muted);
}
@media (min-width: 768px) {
	.industry-systems__material { text-align: right; }
}

/* ---------- Products — slider kart produktów (kanon 2026-07-24) ----------
   Karty .product-card (products.css, reuse z katalogu). Bazowo grid (no-JS);
   .is-embla (industry-products-carousel.js) przełącza na full-bleed slider —
   wzorzec products-cf (100vw + 50%-50vw, overflow-x clip na sekcji jako guard
   scrollbara) + zapas padding-block 32 na shadow-mega/krzyżyki (nie ucina ich
   overflow:hidden), kompensowany ujemnym marginesem w rytmie sekcji.
   Fallback kategorii: .industry-products__grid (niżej, bez zmian). */
.industry-products {
	overflow-x: clip;
}
.industry-products__track {
	display: grid;
	gap: var(--space-24);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.industry-products__track { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
	.industry-products__track { grid-template-columns: repeat(4, 1fr); }
}
/* Za mało kart, by wypełnić rząd (marquee wtedy nie startuje — industry-products-carousel.js
   nadaje .is-static): centrujemy CAŁĄ sekcję — nagłówek i karty — zamiast zostawiać pustą
   prawą część. Szerokość karty jak w siatce. */
@media (min-width: 768px) {
	.industry-products:has(.industry-products__viewport.is-static) .section-head--start {
		text-align: center;
	}
}
@media (min-width: 768px) {
	.industry-products__viewport:not(.is-embla) .industry-products__track {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.industry-products__viewport:not(.is-embla) .industry-products__slide {
		flex: 0 1 calc((100% - var(--space-24)) / 2);
	}
}
@media (min-width: 1200px) {
	.industry-products__viewport:not(.is-embla) .industry-products__slide {
		flex: 0 1 calc((100% - 3 * var(--space-24)) / 4);
	}
}
.industry-products__viewport.is-embla {
	overflow: hidden;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding-block: var(--space-32);
	margin-block: calc(-1 * var(--space-32)) calc(-1 * var(--space-24));
	cursor: grab;
}
/* Mobile: kompensacje ujemne OUT (skrojone pod head mb 48; przy head 8 ściskały slider) —
   pad viewportu 32 działa jako realny odstęp góra/dół, jak proof (user 2026-07-24) */
@media (max-width: 767.98px) {
	.industry-products__viewport.is-embla { margin-block: 0; }
}
.industry-products__viewport.is-embla.is-dragging {
	cursor: grabbing;
	user-select: none;
}
.industry-products__viewport.is-embla .industry-products__track {
	display: flex;
	gap: 0;   /* gap dublowałby się z margin-right slajdów (lekcja home) */
	margin: 0;
	padding: 0;   /* marquee align:center jak home — bez wcięcia do linii containera */
}
.industry-products {
	--ipc-card-w: 70%; /* why: szerokość slajdu — mobile peek-next-card jak home cf (1 pełna + sąsiedzi); lokalna */
}
@media (min-width: 768px) {
	.industry-products {
		--ipc-card-w: 304px; /* why: STAŁA jak kanon home (cf-card-w) — % z full-bleed rosło z monitorem; 304 = karta siatki katalogu 4-kol (1320 − 2×16 pad − 3×24 gap) / 4; lokalna */
	}
}
/* Mobile: karty równej wysokości (najwyższa dyktuje — tytuł 2-wierszowy nie łamie rytmu) */
@media (max-width: 767.98px) {
	.industry-products__viewport.is-embla .industry-products__slide { display: flex; }
	.industry-products__viewport.is-embla .industry-products__slide .product-card {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	/* CTA zawsze przy dole karty (przy stretch do najwyższej tytuł 1-wierszowy nie podnosi CTA) */
	.industry-products__viewport.is-embla .industry-products__slide .product-card__body {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}
	.industry-products__viewport.is-embla .industry-products__slide .product-card__cta {
		margin-top: auto;
	}
}
.industry-products__viewport.is-embla .industry-products__slide {
	flex: 0 0 var(--ipc-card-w);
	min-width: 0;
	margin-right: var(--space-32); /* kanon home products-cf: 32, krzyżyki narożne (8px poza kartą) potrzebują oddechu */
}