/* Sztuka Grawerowania — warstwa wspólna
 *
 * Ładuje się na każdej stronie. Zawiera tylko to, czego theme.json
 * wyrazić nie potrafi: układ trzech pasów nagłówka, stopkę, wyszukiwarkę,
 * fokus klawiaturowy i pomocnicze klasy wzorców.
 *
 * Kolory NIE są tu zapisane jako wartości. Wszystkie skróty --sg-*
 * to aliasy tokenów z theme.json, więc zmiana koloru w Stylach globalnych
 * przechodzi przez cały serwis. Jedno źródło prawdy.
 */

:root {
	--sg-base: var(--wp--preset--color--base);
	--sg-surface: var(--wp--preset--color--surface);
	--sg-photo: var(--wp--preset--color--surface-photo);
	--sg-ink: var(--wp--preset--color--contrast);
	--sg-ink-2: var(--wp--preset--color--contrast-2);
	--sg-ink-3: var(--wp--preset--color--contrast-3);
	--sg-muted: var(--wp--preset--color--muted);
	--sg-faint: var(--wp--preset--color--faint);
	--sg-line: var(--wp--preset--color--line);
	--sg-line-soft: var(--wp--preset--color--line-soft);
	--sg-line-strong: var(--wp--preset--color--line-strong);
	--sg-field: var(--wp--preset--color--field);
	--sg-primary: var(--wp--preset--color--primary);
	--sg-primary-dark: var(--wp--preset--color--primary-dark);
	--sg-primary-tint: var(--wp--preset--color--primary-tint);
	--sg-primary-tint-line: var(--wp--preset--color--primary-tint-line);
	--sg-accent: var(--wp--preset--color--accent);
	--sg-accent-dark: var(--wp--preset--color--accent-dark);
	--sg-danger: var(--wp--preset--color--danger);
	--sg-danger-dark: var(--wp--preset--color--danger-dark);
	--sg-danger-tint: var(--wp--preset--color--danger-tint);
	--sg-danger-tint-line: var(--wp--preset--color--danger-tint-line);
	--sg-star: var(--wp--preset--color--star);
	--sg-footer: var(--wp--preset--color--footer);
	--sg-footer-line: var(--wp--preset--color--footer-line);
	--sg-footer-text: var(--wp--preset--color--footer-text);

	--sg-h-sm: var(--wp--custom--control--height-sm);
	--sg-h-md: var(--wp--custom--control--height-md);
	--sg-h-lg: var(--wp--custom--control--height-lg);
	--sg-h-field: var(--wp--custom--control--height-field);
	--sg-t: var(--wp--custom--duration);
}

/* ---------- model pudełka ----------
 *
 * Motyw blokowy nie dostaje od WordPressa uniwersalnego resetu box-sizing,
 * a przeglądarki liczą elementy w content-box. Ten sam błąd wyszedł w tym
 * projekcie trzy razy: pola graweru wychodziły 26 px poza ramkę, blok
 * personalizacji 34 px poza kolumnę, galeria produktu 22 px poza ekran.
 * Wzór jest zawsze ten sam — `width: 100%` albo `flex-basis: 100%` odnosi
 * się do pudełka treści, więc padding i obramowanie dokładają się na wierzch.
 *
 * Reset uniwersalny, nie punktowy: łatanie po jednym selektorze zostawia
 * następny przypadek na później.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------- fokus klawiaturowy ----------
 * Specyfikacja zakazuje poświaty przy fokusie — chodzi o box-shadow.
 * Obrys jest czym innym: bez niego osoba nawigująca klawiaturą nie wie,
 * gdzie jest. Kontrast zieleni do bieli wynosi 7,35:1.
 */
:where(a, button, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--sg-primary);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Pola formularza obsługujemy inaczej niż odnośniki i przyciski. Obrys
   z odstępem 1 px rysuje się POZA ramką pola, więc widać dwie linie —
   szarą ramkę i mosiądzowy obrys wokół niej. Zamiast tego pogrubiamy samą
   ramkę: kolor marki plus wewnętrzny cień 1 px czyta się jak ramka 2 px,
   bez przesuwania układu i bez poświaty, której zabrania specyfikacja.
   Konkretne selektory pól, z wyższą specyficznością, są w woocommerce.css. */
:where(input, select, textarea):focus-visible {
	outline: none;
	border-color: var(--sg-primary);
	box-shadow: inset 0 0 0 1px var(--sg-primary);
}

/* Fokus na ciemnym tle musi zmienić kolor, bo zieleń na grafitowym
   pasku kontaktu daje 1,5:1. */
.sg-topbar :where(a, button):focus-visible,
.sg-footer :where(a, button):focus-visible {
	outline-color: #fff;
}

/* ---------- pomijanie do treści ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 999;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 12px 18px;
	background: var(--sg-primary);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

/* ---------- pas kontaktowy ---------- */
.sg-topbar {
	background: var(--sg-primary);
	color: #fff;
	/* Nieco większy niż resztę drobnego tekstu: to jedyny komunikat
	   sprzedażowy widoczny na każdym ekranie, więc ma się czytać
	   bez wysiłku, a nie ginąć w mikrodruku. */
	font-size: 13.5px;
	letter-spacing: 0.01em;
}

.sg-topbar :where(a) {
	color: #fff;
	text-decoration: none;
}

.sg-topbar :where(a):hover {
	color: #fff;
	text-decoration: underline;
}

.sg-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 36px;
	padding-block: 7px;
	text-align: center;
}

/* Pasek promocyjny. Wyróżnienia robimy wagą, nie kolorem — na mosiądzu
   każdy inny kolor tekstu spada poniżej progu kontrastu, a biel na wadze 900
   czyta się mocniej niż jakikolwiek odcień. */
.sg-topbar__promo strong,
.sg-topbar__code strong {
	font-weight: 900;
	letter-spacing: 0.02em;
}

.sg-topbar__sep {
	padding-inline: 8px;
	opacity: 0.5;
}

/* ---------- pas z logotypem ----------
 *
 * Jeden wiersz mieści wszystko: nawigację, logotyp, wyszukiwarkę i akcje.
 * Rozmieszczeniem steruje wyłącznie `order`, więc ten sam znacznik daje
 * na desktopie cztery pasy, a na telefonie zwarty pasek sklepowy.
 */
.sg-masthead {
	background: var(--sg-surface);
	border-bottom: 1px solid var(--sg-line);
}

.sg-masthead__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	/* Bez dolnego marginesu wewnętrznego. Ostatnim wierszem jest pas
	   nawigacji, którego pozycje mają własne 14 px padding-bottom — te dwie
	   wartości sumowały się do 30 px pustki między kategoriami a dolną
	   krawędzią paska. Odstęp nad i pod etykietami jest teraz równy. */
	padding-block: 16px 0;
}

.sg-brand {
	order: 1;
	min-width: 0;
}

/* ---------- logotyp dwuwierszowy ----------
 *
 * Górny wiersz: Cormorant Garamond kursywa 700, tusz.
 * Dolny: Montserrat 700 wersalikami, w kolorze marki.
 *
 * Oba wiersze są elementami blokowymi wewnątrz odnośnika tytułu witryny,
 * a same słowa dokłada filtr `sg_split_site_title` w inc/setup.php. Rozmiar
 * dolnego wiersza podany w `em`, więc cały znak skaluje się jedną wartością
 * na `.wp-block-site-title`.
 *
 * 0,38 em, a nie tyle samo co w górnym wierszu: wersaliki Montserrata są
 * wysokie, więc przy równym rozmiarze dolny wiersz przytłaczałby górny.
 */
.sg-masthead .wp-block-site-title a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
}

.sg-logo__lead {
	display: block;
	font-family: var(--wp--preset--font-family--logo);
	font-style: italic;
	font-weight: 700;
	line-height: 1.02;
	color: var(--sg-ink);
}

.sg-logo__tail {
	display: block;
	font-family: var(--wp--preset--font-family--logo-alt);
	font-weight: 700;
	font-size: 0.38em;
	letter-spacing: 0.18em;
	/* Rozstrzelenie dokłada odstęp także po ostatniej literze, przez co wyraz
	   przestaje być wyśrodkowany. Ujemny margines po prawej to kompensuje. */
	margin-right: -0.18em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sg-primary);
}

.sg-masthead .wp-block-site-title a:hover .sg-logo__lead,
.sg-masthead .wp-block-site-title a:hover .sg-logo__tail {
	color: var(--sg-primary-dark);
}

.sg-masthead__search {
	order: 2;
	flex: 1 1 320px;
	max-width: 520px;
}

/* Selektor z rodzicem, nie sama klasa. WordPress dorzuca do układu flex
   regułę `.is-layout-flex > :is(*, div) { margin: 0 }` o specyficzności
   (0,1,1), która bije samo `.sg-masthead__actions` (0,1,0) — akcje zostawały
   przyklejone do wyszukiwarki zamiast odjechać do prawej krawędzi.
   `.sg-masthead__inner > .sg-masthead__actions` to (0,2,0), czyli wygrywa. */
.sg-masthead__inner > .sg-masthead__actions {
	order: 3;
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
}

/* ---------- wyszukiwarka ---------- */
.sg-search {
	display: flex;
	width: 100%;
}

.sg-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--sg-h-md);
	padding: 0 14px;
	border: 1px solid var(--sg-field);
	border-right: 0;
	background: #fff;
	color: var(--sg-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
}

.sg-search__input::placeholder {
	color: var(--sg-faint);
}

.sg-search__submit {
	flex: 0 0 auto;
	height: var(--sg-h-md);
	padding: 0 22px;
	border: 1px solid var(--sg-primary);
	background: var(--sg-primary);
	color: #fff;
	font: inherit;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--sg-t) ease;
}

.sg-search__submit:hover {
	background: var(--sg-primary-dark);
	border-color: var(--sg-primary-dark);
}

/* ---------- akcje z ikonami ---------- */
.sg-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sg-ink-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
	transition: color var(--sg-t) ease;
}

.sg-action:hover {
	color: var(--sg-primary);
	text-decoration: none;
}

/* Rozmiar z CSS, nie z atrybutów `width`/`height` na znaczniku SVG: atrybuty
   są tylko podpowiedzią i reguła je nadpisuje, więc obie ikony w pasku da się
   trzymać w jednym rozmiarze z jednego miejsca. */
.sg-action__icon {
	flex: 0 0 auto;
	display: block;
	width: 25px;
	height: 25px;
}

/* Plakietka licznika pozycjonowana względem IKONY, nie względem całego
   odnośnika — inaczej „left” liczy się od początku linku i przy widocznej
   etykiecie „Koszyk” liczba wchodziła na środek wózka. */
.sg-cart__icon {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
}

.sg-cart__count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sg-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Przycisk lupy dokłada assets/js/sg.js tylko wtedy, gdy potrafi zwinąć
   wyszukiwarkę. Bez JavaScriptu pole pozostaje widoczne i przycisk
   nie powstaje — nie ma jak zgubić wyszukiwania. */
.sg-search-toggle {
	display: none;
}

/* ---------- pas nawigacji ----------
 *
 * Na desktopie: własny pełnowymiarowy wiersz pod logotypem, oddzielony
 * linią włosową. Na telefonie (dalej w tym pliku) wraca do pierwszego
 * wiersza jako hamburger.
 */
.sg-masthead__nav {
	order: 4;
	flex: 1 0 100%;
	margin-top: 16px;
	border-top: 1px solid var(--sg-line);
}

/* Odstęp między pozycjami idzie przez `gap` kontenera, nie przez margines
   treści pozycji. Margines na .__content rozdzielał etykietę od jej własnej
   strzałki rozwijania — strzałka stoi w DOM-ie POZA odnośnikiem, jako
   osobny przycisk, więc lądowała przyklejona do następnej kategorii
   i wyglądała, jakby należała do niej. */
.sg-masthead__nav .wp-block-navigation {
	gap: 26px;
}

.sg-masthead__nav .wp-block-navigation-item {
	align-items: center;
}

.sg-masthead__nav .wp-block-navigation-item__content {
	display: inline-block;
	padding: 14px 0;
	margin: 0;
	border-bottom: 2px solid transparent;
}

.sg-masthead__nav .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--sg-line-strong);
}

.sg-masthead__nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.sg-masthead__nav .wp-block-navigation-item.current-menu-ancestor .wp-block-navigation-item__content {
	color: var(--sg-ink);
	border-bottom-color: var(--sg-primary);
}

/* ---------- listy rozwijane kategorii ----------
 * Blok nawigacji rdzenia otwiera podmenu na hover i na fokus, bo atrybut
 * openSubmenusOnClick zostaje domyślnie wyłączony. Nie potrzeba do tego
 * ani jednej linii JavaScriptu.
 */
.sg-masthead__nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .wp-block-navigation__submenu-container {
	min-width: 232px;
	/* Bez marginesu pionowego. Przy 6 px podświetlenie pierwszej i ostatniej
	   pozycji nie dochodziło do krawędzi i zostawały dwa jasne paski —
	   pozycje mają się stykać z obramowaniem. */
	padding: 0;
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
	box-shadow: 0 8px 20px rgba(22, 21, 15, 0.09);
}

/* Wewnątrz podmenu zerujemy dekoracje pozycji górnego poziomu. */
.sg-masthead__nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 9px 16px;
	margin: 0;
	border-bottom: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--sg-ink-2);
}

.sg-masthead__nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.sg-masthead__nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: var(--sg-primary-tint);
	color: var(--sg-primary);
	border-bottom: 0;
}

/* Strzałka przy pozycji z podmenu — cieńsza i bliżej etykiety niż domyślna. */
/* Strzałka dostaje dokładnie taki sam margines wewnętrzny jak odnośnik,
   plus 2 px z dołu — tyle, ile ma jego `border-bottom` na podkreślenie
   aktywnej pozycji. Bez tego strzałka centrowała się względem pudełka
   odnośnika RAZEM z obramowaniem i siedziała o pikselu za nisko.
   Wyrównanie liczone z wartości, nie zgadywane. */
.sg-masthead__nav .wp-block-navigation__submenu-icon {
	display: flex;
	align-items: center;
	padding: 14px 0 16px;
	margin: 0 0 0 5px;
	color: var(--sg-muted);
}

.sg-masthead__nav .wp-block-navigation__submenu-icon svg {
	width: 12px;
	height: 12px;
}


/* ---------- stopka ---------- */
.sg-footer {
	background: var(--sg-footer);
	color: var(--sg-footer-text);
}

.sg-footer :where(h2, h3, h4) {
	color: #fff;
}

.sg-footer :where(a) {
	color: var(--sg-footer-text);
	text-decoration: none;
}

.sg-footer :where(a):hover {
	color: #fff;
	text-decoration: underline;
}

.sg-footer__bottom {
	border-top: 1px solid var(--sg-footer-line);
	font-size: var(--wp--preset--font-size--micro);
}

/* ---------- wzorce ---------- */

/* ---------- baner główny ----------
 *
 * Siatka: panel promocyjny po lewej, kolumna dwóch kart po prawej. Panel jest
 * ścieżką karuzeli ze scroll-snap, bez biblioteki i bez autoodtwarzania. Bez
 * JavaScriptu zostaje przewijany pasek slajdów: treść jest dostępna, ginie
 * tylko wygoda kropek i strzałek.
 *
 * Tekst slajdu stoi POD zdjęciem, nie na nim. Napis na tej fotografii wymagałby
 * przyciemnienia kadru, a to kasuje jedyną rzecz, która na nim sprzedaje:
 * świecące krawędzie pleksi.
 */
.sg-hero {
	/* Szerokość kolumny kart. Reszta idzie na panel, więc zmiana tej jednej
	   wartości przestawia proporcję całego banera. */
	--sg-hero-side: 340px;
	--sg-hero-gap: 16px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sg-hero-side);
	gap: var(--sg-hero-gap);
}

/* Specyficzność (0,2,0) bije regułę układu przepływowego WordPressa (0,1,0),
   która dokłada dzieciom grupy margines pionowy. */
.sg-hero.wp-block-group > .wp-block-group {
	margin: 0;
}

.sg-hero-carousel {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Kontekst zapytań o kontener. Pozwala policzyć wysokość zdjęcia w CSS:
	   szerokość panelu podzielona przez proporcję kadru, z tą samą górną
	   granicą co na obrazku. Bez tego nie dałoby się umieścić kropek na dole
	   zdjęcia, bo procenty w `top` liczą się od wysokości, nie od szerokości,
	   a pasek tekstu pod spodem ma wysokość zmienną. */
	container-type: inline-size;
	--sg-media-h: min(100cqw / 2.586, 430px);
}

.sg-hero-carousel__track {
	display: flex;
	flex: 1 1 auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	/* Pasek przewijania byłby tu szumem: nawigację niosą kropki. */
	scrollbar-width: none;
}

.sg-hero-carousel__track::-webkit-scrollbar {
	display: none;
}

.sg-hero-carousel__track > * {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

/* Slajd to dwa rzędy: zdjęcie o stałych proporcjach i pasek treści pod nim.
   Rząd treści dostaje 1fr, więc gdy karuzela ma kilka slajdów o różnej
   długości opisu, wszystkie kończą się na tej samej wysokości. */
/* Górne narożniki zaokrąglone, dolne proste. Świadome odstępstwo od zasady
   „zero zaokrągleń”, ograniczone do górnej krawędzi banera: miękka linia na
   samej górze strony, twarde kanty w całej reszcie układu.

   `overflow: hidden` jest tu konieczne, nie ozdobne. Bez niego zdjęcie
   wchodziłoby prostym kątem w zaokrąglony narożnik obramowania i widać by
   było, że kadr wystaje za ramkę. */
.sg-slide {
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}

.sg-slide.wp-block-group > * {
	margin: 0;
}

/* Wysokość zdjęcia liczy się z proporcji, nie ze stałej liczby pikseli.
   Wcześniej stała wartość i `height: 100%` na obrazku dawały kadr zależny od
   wysokości kontenera, a ta bywała nieokreślona. Proporcja odpowiada plikowi
   (1536 na 594), więc kadr nie jest przycinany na desktopie. */
.sg-slide__media {
	margin: 0;
}

.sg-slide__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1536 / 594;
	/* Po poszerzeniu strony panel ma około 1360 px, a sama proporcja dałaby
	   zdjęcie wysokie na 527 px i baner znowu wyrósłby razem z kartami obok.
	   Górna granica wysokości domyka to. Powyżej niej kadr się dociska, ale
	   docisk zjada podstawki górnego rzędu i blat pod spodem, nie same lampki
	   z imionami: te siedzą w środku kadru. */
	max-height: 430px;
	object-fit: cover;
	background: var(--sg-photo);
}

/* Pasek treści to jeden rząd: tekst po lewej, przycisk z ceną po prawej.
   Ułożenie jedno pod drugim dawało pasek wyższy od potrzebnego, a ponieważ
   karty obok rozciągają się do wysokości banera, każdy zbędny piksel paska
   robił pustkę w obu kartach. Rząd zamiast słupka zabiera z wysokości banera
   cały wiersz przycisku. */
.sg-slide__content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 28px;
	padding: 20px 28px 22px;
}

.sg-slide__content.wp-block-group > * {
	margin: 0;
}

/* Podstawa 380 px, nie `auto`: o zawijaniu decyduje rozmiar hipotetyczny, więc
   przy `auto` długi opis rozpychałby tekst i zrzucał przycisk do drugiego
   wiersza już na desktopie. */
.sg-slide__text {
	flex: 1 1 380px;
	/* Panel ma 922 px szerokości, czyli około 120 znaków w wierszu. To dwa razy
	   więcej, niż da się czytać bez gubienia linii. */
	max-width: 62ch;
}

.sg-slide__text.wp-block-group > * {
	margin: 0;
}

.sg-slide__text > h2 {
	line-height: 1.15;
	margin-bottom: 8px;
}

.sg-slide__actions {
	flex: 0 0 auto;
}

.sg-slide__price {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 900;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* ---------- karty obok banera ---------- */
.sg-hero__side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: var(--sg-hero-gap, 16px);
}

.sg-hero__side.wp-block-group > * {
	margin: 0;
}

/* Zaokrąglenie tylko na pierwszej karcie: to ona zamyka górną krawędź
   kolumny obok banera. Druga karta stoi pod nią, w środku układu, i tam
   miękki narożnik nie miałby z czym się zestawiać. */
.sg-hero__side > .sg-hero-card:first-child {
	border-radius: 10px 10px 0 0;
}

.sg-hero-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 22px 24px;
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
}

.sg-hero-card.wp-block-group > * {
	margin: 0;
}

.sg-hero-card h2 {
	line-height: 1.25;
}

.sg-hero-card p {
	color: var(--sg-ink-3);
	line-height: 1.55;
}

.sg-hero-card__link {
	margin-top: 2px;
}

.sg-hero-card__link a {
	font-weight: 700;
	text-decoration: none;
}

.sg-hero-card__link a::after {
	content: "→";
	margin-left: 7px;
}

.sg-hero-card__link a:hover {
	text-decoration: underline;
}

/* Druga karta na kolorze marki. Biel na #836417 to 5,53:1, czyli z zapasem
   ponad progiem 4,5:1 dla tekstu. */
.sg-hero-card--brand {
	background: var(--sg-primary);
	border-color: var(--sg-primary);
}

.sg-hero-card--brand h2,
.sg-hero-card--brand p,
.sg-hero-card--brand .sg-hero-card__link a {
	color: #fff;
}

/* Nawigacja pod karuzelą, nie na zdjęciu: strzałki po bokach kropek.
   Wyśrodkowana, więc nie zasłania produktu. */
/* Nawigacja leży NA zdjęciu: strzałki przy krawędziach, kropki na dole kadru.
   Warstwa obejmuje dokładnie obszar zdjęcia i sama nie łapie kliknięć, żeby
   nie blokować przeciągania karuzeli palcem; łapią je tylko przyciski. */
.sg-hero-carousel__nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--sg-media-h);
	pointer-events: none;
	z-index: 2;
}

/* Zerowy margines, i to nie z ostrożności.
   Grupa karuzeli niesie klasę `is-layout-flow`, więc WordPress dokłada
   każdemu kolejnemu dziecku `margin-block-start` równy odstępowi blokowemu.
   Nawigacja jest drugim dzieckiem, po ścieżce slajdów, i dostawała 24 px.
   Element jest pozycjonowany bezwzględnie, ale margines i tak przesuwa go
   względem `top: 0`, więc cała warstwa leżała 23 px poniżej zdjęcia: kropki
   spadały na pasek tekstu, a strzałki siedziały za nisko.
   Selektor z rodzicem, żeby pewnie przebić regułę układu. */
.sg-hero-carousel > .sg-hero-carousel__nav {
	margin: 0;
}

.sg-hero-carousel__nav > * {
	pointer-events: auto;
}

/* Białe tło, nie przezroczyste: zdjęcia w banerze bywają ciemne i jasne,
   a strzałka musi być widoczna na obu. */
.sg-hero-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: var(--sg-surface);
	border: 0;
	color: var(--sg-ink);
	cursor: pointer;
	transition: background-color var(--sg-t) ease, color var(--sg-t) ease;
}

.sg-hero-carousel__arrow:first-child {
	left: 14px;
}

.sg-hero-carousel__arrow:last-child {
	right: 14px;
}

.sg-hero-carousel__arrow:hover:not(:disabled) {
	background: var(--sg-primary);
	color: #fff;
}

.sg-hero-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.sg-hero-carousel__dots {
	position: absolute;
	left: 0;
	right: 0;
	/* Odsunięte od dolnej krawędzi zdjęcia, żeby kropki siedziały na kadrze,
	   a nie na styku z paskiem tekstu pod nim. */
	bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

/* Kropki są okrągłe, bo kropka kwadratowa przestaje być kropką. Drugie
   i ostatnie odstępstwo od zasady zera zaokrągleń w tym motywie.
   Półprzezroczysta biel plus cień: muszą być widoczne i na ciemnym zdjęciu
   lampek, i na jasnej tabliczce komunijnej. */
.sg-hero-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	background: rgba(255, 255, 255, 0.55);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(22, 21, 15, 0.25);
	cursor: pointer;
	transition: background-color var(--sg-t) ease;
}

.sg-hero-carousel__dot[aria-current="true"] {
	background: var(--sg-primary);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* Pasek trzech obietnic pod banerem. */
.sg-promises {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--sg-line);
	border: 1px solid var(--sg-line);
}

.sg-promises__item {
	background: var(--sg-surface);
	padding: 18px 20px;
}

.sg-promises__title {
	margin: 0 0 4px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	letter-spacing: 0;
}

.sg-promises__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--sg-ink-3);
}

/* Kafle kategorii. */
/* auto-fit, nie stała liczba kolumn: liczba kategorii pochodzi teraz
   z systemu i może być dowolna. auto-fit zwija nieużyte tory, więc siedem
   kafli rozkłada się na siedem równych kolumn, a nie sześć plus jeden
   osamotniony w drugim wierszu. */
.sg-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
	gap: var(--wp--custom--grid--tile-gap);
}

.sg-tile {
	display: block;
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
	text-decoration: none;
	transition: border-color var(--sg-t) ease;
}

.sg-tile:hover {
	border-color: var(--sg-primary);
	text-decoration: none;
}

.sg-tile__media {
	display: block;
	width: 100%;
	/* height: auto jest tu konieczne. Atrybut height="400" w znaczniku
	   obrazka trafia do CSS jako podpowiedź prezentacyjna i ustala wysokość
	   pudełka, przez co aspect-ratio jest ignorowane — kafle miały 400 px
	   wysokości niezależnie od szerokości kolumny. */
	height: auto;
	aspect-ratio: 1 / 1;
	background: var(--sg-photo);
	object-fit: cover;
}

.sg-tile__label {
	display: block;
	padding: 10px 12px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--sg-ink);
	line-height: 1.3;
}

.sg-tile__count {
	display: block;
	margin-top: 2px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	color: var(--sg-muted);
}

/* Sekcja „Personalizacja nic nie kosztuje”. */
.sg-callout {
	background: var(--sg-primary-tint);
	border: 1px solid var(--sg-primary-tint-line);
}

.sg-callout__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-callout__list li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 8px;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.55;
	color: var(--sg-ink-2);
}

.sg-callout__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.45em;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--sg-primary);
	border-bottom: 2px solid var(--sg-primary);
	transform: rotate(-45deg);
}

/* Trzy kroki procesu zamówienia. Numer jest dużą cyfrą w kolorze marki,
   a nie kółkiem z tłem — specyfikacja zakazuje ozdobników, a sama liczba
   w wadze 900 prowadzi wzrok równie dobrze. */
.sg-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--sg-line);
	border: 1px solid var(--sg-line);
}

.sg-step {
	background: var(--sg-surface);
	padding: 26px 28px 30px;
}

.sg-step__num {
	display: block;
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--sg-primary);
}

.sg-step__title {
	margin: 12px 0 8px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.sg-step__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
	color: var(--sg-ink-3);
}

/* Lista okazji. */
.sg-occasions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sg-occasions a {
	display: inline-flex;
	align-items: center;
	height: var(--sg-h-sm);
	padding: 0 16px;
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
	color: var(--sg-ink-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	transition: border-color var(--sg-t) ease, color var(--sg-t) ease;
}

.sg-occasions a:hover {
	border-color: var(--sg-primary);
	color: var(--sg-primary);
	text-decoration: none;
}

/* Opinie klientów. */
.sg-reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--custom--grid--card-gap);
}

.sg-review {
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
	padding: 20px 22px;
}

.sg-review__text {
	margin: 12px 0 14px;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	color: var(--sg-ink-2);
}

.sg-review__author {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--sg-muted);
}

/* Gwiazdki rysowane w SVG, a nie znakiem ★.
   Kontrast złotego do bieli to 2,76:1 — poniżej progu 3:1 dla grafiki
   niosącej treść. Dlatego gwiazdki są dekoracją (aria-hidden), a ocenę
   zawsze podaje liczba obok. */
.sg-stars {
	display: inline-flex;
	gap: 2px;
	vertical-align: -2px;
}

.sg-stars svg {
	width: 14px;
	height: 14px;
	fill: var(--sg-star);
}

/* Blok tekstu SEO. */
.sg-seo {
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
	padding: 28px 32px;
}

.sg-seo p {
	/* Bez tego wiersz ma na szerokiej stronie ponad 200 znaków. To najdłuższy
	   tekst na stronie i jedyny czytany od początku do końca, więc miara jest
	   tu ważniejsza niż wypełnienie karty. */
	max-width: 95ch;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.75;
	color: var(--sg-ink-3);
}

.sg-seo p:last-child {
	margin-bottom: 0;
}

/* Blok komunikatów sklepu renderuje się zawsze, także gdy nie ma czego
   pokazać — ma wtedy zerową wysokość, ale jako pierwsze dziecko sekcji
   sprawia, że baner dostaje pełny odstęp międzysekcyjny „po nim”.
   Na telefonie zjadało to 72 px nad pierwszą treścią. Gdy komunikat
   faktycznie jest, odstęp wraca. */
:is(.wc-block-store-notices, .wp-block-woocommerce-store-notices):not(:has(.woocommerce-message, .woocommerce-error, .woocommerce-info)) + * {
	margin-block-start: 0;
}

/* Ukryty nagłówek H1 nie zajmuje miejsca, ale nadal jest elementem sekcji,
   więc następny blok dostawał po nim pełny odstęp międzysekcyjny — nad
   banerem robiło się 48 px pustki bez powodu.
   Prefiks `body > .wp-site-blocks` nie jest ozdobą: bez niego reguła ma
   specyficzność (0,1,1) i przegrywa z regułą odstępu sekcji poniżej,
   która ma (0,1,2). Z prefiksem wychodzi (0,2,2). */
body > .wp-site-blocks main > .screen-reader-text + * {
	margin-block-start: 0;
}

/* ---------- narzędzia ---------- */

/* Sekcje poniżej pierwszego ekranu nie muszą być renderowane od razu.
   contain-intrinsic-size podaje przeglądarce wysokość zastępczą, żeby
   pasek przewijania nie skakał. */
.sg-defer {
	content-visibility: auto;
	contain-intrinsic-size: auto 400px;
}

.sg-nowrap {
	white-space: nowrap;
}

/* ---------- mobile ---------- */
@media (max-width: 900px) {
	/* Kolumna kart nie zmieści się obok panelu, więc karty schodzą pod baner
	   i dzielą szerokość na pół. */
	.sg-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.sg-hero__side {
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr;
	}

	.sg-masthead__inner {
		flex-wrap: wrap;
	}

	.sg-masthead__search {
		order: 3;
		flex-basis: 100%;
		max-width: none;
	}

	.sg-promises,
	.sg-reviews,
	.sg-steps {
		grid-template-columns: 1fr;
	}

	.sg-tiles {
		grid-template-columns: repeat(3, 1fr);
	}

	.sg-seo {
		padding: 22px 20px;
	}
}

/* ---------- nagłówek na telefonie ----------
 *
 * Punkt przełamania to 600 px, nie 782 px, i to celowo: dokładnie tam
 * WordPress przełącza blok nawigacji na nakładkę z hamburgerem. Gdyby
 * przebudowa startowała wcześniej, w przedziale 600–782 px pozioma lista
 * kategorii wylądowałaby wciśnięta w 44-pikselowe gniazdo obok logotypu.
 *
 * Układ: [hamburger] [nazwa sklepu] [lupa] [konto] [koszyk]
 * Wyszukiwarka rozwija się pod paskiem po dotknięciu lupy.
 */
@media (max-width: 599.98px) {
	.sg-hero__side {
		grid-template-columns: 1fr;
	}

	/* Kadr 2,6:1 na szerokości telefonu daje pasek około 140 px wysokości,
	   w którym imiona na lampkach są nieczytelne. Proporcja 16:9 przycina boki,
	   więc lampek widać mniej, ale są większe. */
	.sg-slide__media img {
		aspect-ratio: 16 / 9;
	}

	/* 24 px marginesu z każdej strony to na 375-pikselowym ekranie 13%
	   szerokości. Zwężamy do 16 px — odzyskane miejsce idzie na nazwę
	   sklepu, która inaczej musiałaby się urywać wielokropkiem. */
	/* Selektor `:root body`, nie samo `:root` — WordPress deklaruje te
	   zmienne na `body`, a wartość zadeklarowana bliżej elementu wygrywa
	   z odziedziczoną z :root niezależnie od kolejności arkuszy. */
	:root body {
		--wp--style--root--padding-left: 16px;
		--wp--style--root--padding-right: 16px;
	}

	.sg-masthead__inner {
		gap: 8px;
		/* Na telefonie nawigacja jest ikoną w pierwszym wierszu, nie osobnym
		   pasem — dolny margines wewnętrzny znów jest potrzebny. */
		padding-block: 6px;
	}

	.sg-masthead__nav {
		order: 1;
		flex: 0 0 auto;
		margin-top: 0;
		border-top: 0;
	}

	/* flex-basis: 0, nie auto. Przy zawijaniu flexbox decyduje o złamaniu
	   wiersza na podstawie rozmiaru hipotetycznego, czyli bazy — a nie po
	   skurczeniu elementów. Z bazą `auto` nazwa sklepu miała 281 px i trzy
	   ikony lądowały w drugim wierszu. Z bazą 0 wszystko mieści się w jednym,
	   a nazwa dostaje resztę miejsca. */
	.sg-brand {
		order: 2;
		flex: 1 1 0;
		min-width: 0;
		overflow: hidden;
	}

	/* Logotyp dwuwierszowy: bez ucinania wielokropkiem, bo ucięciu podlegałby
	   tylko jeden z dwóch wierszy i znak wyglądałby na uszkodzony. */
	.sg-masthead .wp-block-site-title {
		font-size: 24px;
		line-height: 1.2;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	/* Ikony stykają się bokami — każda ma własne 44 px pola dotyku,
	   więc odstęp między nimi nie jest potrzebny, a odzyskane piksele
	   idą na nazwę sklepu. */
	.sg-masthead__inner > .sg-masthead__actions {
		order: 3;
		flex: 0 0 auto;
		gap: 0;
		margin-left: 0;
		/* Ikona ma 21 px w 44-pikselowym przycisku, więc bez tego przesunięcia
		   jej krawędź kończy się 27 px od brzegu ekranu, gdy hamburger po
		   lewej trafia dokładnie w 16 px. Wyrównanie optyczne, nie pudełkowe. */
		margin-right: -10px;
	}

	/* Same ikony. Etykieta znika z ekranu, ale zostaje w drzewie
	   dostępności — czytnik ekranu nadal mówi „Koszyk, 2 produkty”. */
	.sg-action__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.sg-action,
	.sg-masthead__actions .wc-block-mini-cart__button {
		width: 44px;
		height: 44px;
		justify-content: center;
		color: var(--sg-ink);
	}

	/* Etykieta koszyka znika razem z pozostałymi: w pasku mobilnym zostają
	   same ikony. Rysuje ją pseudoelement, więc nie łapie jej reguła
	   ukrywająca `.sg-action__label`. */
	.sg-masthead__actions .wc-block-mini-cart__button::after {
		content: none;
	}

	.sg-search-toggle {
		display: inline-flex;
	}

	/* Trzy kreski, nie dwie. WordPress rysuje w tym przycisku własny SVG,
	   który w tym wydaniu ma dwie belki i własny viewBox — stąd i mała
	   liczba kresek, i przesunięcie względem środka przycisku. Chowamy go
	   i rysujemy ikonę z jednego pseudo-elementu: środkowa kreska to jego
	   tło, skrajne to dwa cienie. Wyśrodkowanie robi flex, więc nie ma
	   już czego przesuwać. */
	.sg-masthead__nav .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		margin-left: -10px;
		color: var(--sg-ink);
	}

	.sg-masthead__nav .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.sg-masthead__nav .wp-block-navigation__responsive-container-open::before {
		content: "";
		display: block;
		width: 20px;
		height: 2px;
		background: currentColor;
		box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
	}

	/* ---------- nakładka menu ----------
	   Selektory mają dodatkową klasę kontenera nie dla ozdoby: WordPress
	   ma dla otwartej nakładki własne reguły o tej samej specyficzności
	   (0,3,0), które stoją później w kaskadzie i wygrywały remis —
	   podkategorie dostawały 2rem wcięcia, a pozycje zerowy padding.
	   Z dodatkową klasą wychodzi (0,4,0).

	   Bez tego do nakładki przeciekał wygląd rozwijanych list z desktopu:
	   podkategorie renderowały się jako białe karty z cieniem, wciśnięte
	   w ciemne tło. W nakładce mają być zwykłą wciętą listą. */
	.sg-masthead__nav .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--sg-surface);
		padding: 12px 24px 40px;
	}

	/* WordPress rezerwuje treści nakładki `padding-top: calc(2rem + 24px)`,
	   czyli 56 px, na przycisk zamykania — a ten jest pozycjonowany
	   bezwzględnie i zajmuje tylko 24 px. Razem z marginesem nakładki dawało
	   to 74 px pustki nad pierwszą kategorią. 34 px wystarcza, żeby przycisk
	   nie wchodził na pierwszą pozycję.
	   Uwaga na pomiar: zalogowanemu administratorowi WordPress dokłada
	   jeszcze `margin-top: 46px` na pasek admina. Klient tego nie widzi. */
	.sg-masthead__nav .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 24px;
	}

	/* Przycisk zamykania: pełne pole dotyku 44 px, wyrównany do prawej
	   krawędzi treści. */
	.sg-masthead__nav .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: -6px -10px 0 0;
		color: var(--sg-ink);
	}

	.sg-masthead__nav .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 0;
		width: 100%;
	}

	.sg-masthead__nav .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		align-items: stretch;
		flex-direction: column;
	}

	.sg-masthead__nav .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 13px 0;
		margin: 0;
		border-bottom: 1px solid var(--sg-line-soft);
		font-size: 16px;
		font-weight: 700;
		color: var(--sg-ink);
	}

	.sg-masthead__nav .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static;
		min-width: 0;
		width: 100%;
		padding: 4px 0 10px 14px;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.sg-masthead__nav .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 9px 0;
		border-bottom: 0;
		font-size: var(--wp--preset--font-size--base);
		font-weight: 400;
		color: var(--sg-ink-2);
	}

	/* Strzałki rozwijania w nakładce nie stylujemy — WordPress ją tam ukrywa,
	   bo podmenu są rozwinięte od razu. Nie ma czego rozwijać, więc nie ma
	   po co trzymać przycisku w drzewie dostępności. */

	/* Wyszukiwarka: pełny wiersz pod paskiem, zwijana.
	   Klasę is-collapsible dokłada JavaScript — bez niego pole zostaje
	   widoczne, więc wyszukiwania nie da się stracić. */
	.sg-masthead__search {
		order: 4;
		flex: 1 0 100%;
		max-width: none;
	}

	.sg-masthead__search.is-collapsible {
		display: none;
	}

	.sg-masthead__search.is-collapsible.is-open {
		display: block;
		padding-bottom: 8px;
	}

	.sg-search__input,
	.sg-search__submit {
		height: 44px;
	}

	.sg-search__submit {
		padding-inline: 16px;
	}
}

@media (max-width: 782px) {
	/* Pas kontaktu: sam telefon. E-mail nie mieści się w jednym wierszu,
	   a i tak nikt nie przepisuje adresu z ekranu telefonu. */
	.sg-topbar__code {
		display: none;
	}

	.sg-topbar__inner {
		min-height: 0;
		padding-block: 5px;
		justify-content: center;
	}

	.sg-topbar__inner p {
		font-size: 12px;
	}

	/* Baner: 48 px marginesu wewnętrznego zostawiało 231 px na treść. */
	.sg-slide__content {
		padding: 18px 18px 22px;
	}

	/* Nagłówek 32 px na szerokości 293 px łamie się na dwa wiersze i razem
	   z opisem daje pasek tekstu wyższy od samego zdjęcia. 28 px trzyma te same
	   dwa wiersze, ale niższe. */
	.sg-slide__text > h2 {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	.sg-hero-card {
		padding: 18px 18px 20px;
	}

	/* Odstęp między sekcjami: 72 px to na telefonie prawie jedna dziesiąta
	   ekranu na każdą przerwę. Specyficzność (0,1,2) bije regułę układu
	   generowaną przez WordPress (0,1,0), więc obywa się bez !important. */
	body > .wp-site-blocks main > * + * {
		margin-block-start: var(--wp--preset--spacing--70);
	}

	/* Nad sekcją główną jest już 24 px odstępu od nagłówka (blockGap
	   korzenia z theme.json), a szablon dokłada własne 24 px paddingu —
	   razem 48 px pustki na telefonie.
	   !important jest tu właściwym narzędziem, nie obejściem: padding
	   przychodzi ze stylu wpisanego w elemencie przez szablon, a stylu
	   wpisanego w elemencie nie da się nadpisać specyficznością. */
	body > .wp-site-blocks main {
		padding-top: 8px !important;
	}
}

@media (max-width: 600px) {
	.sg-topbar__hours {
		display: none;
	}

	.sg-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}