/**
 * Sztuka Gier — odświeżenie wyglądu.
 *
 * Kolory bierzemy ze zmiennych Astry (--ast-global-color-*), żeby zmiana palety
 * w Customizerze nadal działała. Własne tokeny dotyczą tylko szerokości i odstępów.
 */

:root {
	--sg-szerokosc: 1600px;
	--sg-margines: clamp( 16px, 3vw, 40px );
	--sg-obramowanie: #e3e8ef;
	--sg-tlo-delikatne: #f7f9fc;
	--sg-promien: 10px;
	--sg-cien: 0 1px 2px rgba( 16, 24, 40, .04 );
	--sg-cien-hover: 0 6px 20px rgba( 16, 24, 40, .09 );
	--sg-przejscie: .18s ease;
}

/* --- Jedna szerokość dla całego serwisu ------------------------------------ */

/*
 * Header miał 1600 px, listingi sklepu 1200 px, a stopka 1200 px. Sprowadzamy
 * wszystko do jednego tokenu. Zamiast `width: 95%` używamy stałego marginesu,
 * żeby odstęp od krawędzi nie rósł wraz z monitorem.
 *
 * Selektory są celowo poprzedzone `body`: konkurencyjne reguły siedzą w
 * „Dodatkowym CSS” Customizera i w snippetach, a te drukują się w <head> po tym
 * arkuszu. Przy równej specyficzności wygrywałyby one.
 */
body .ast-container,
body.ast-woo-shop-archive .site-content > .ast-container,
body .site-header .ast-container,
body .site-footer .ast-container,
body .sg-footer {
	max-width: var( --sg-szerokosc );
	width: 100%;
	margin-inline: auto;
	padding-inline: var( --sg-margines );
}

/* Astra dokłada własny padding na kontenerze treści — inaczej wychodzi podwójny. */
body .ast-plain-container .site-content > .ast-container {
	padding-inline: var( --sg-margines );
}

/* Stopka siedzi już w kontenerze o docelowej szerokości. */
body .sg-footer {
	padding-inline: 0;
}

#primary {
	padding-inline: 0;
}

/*
 * `clip` zamiast `hidden`: ucina poziome wyjazdy treści, ale nie tworzy kontekstu
 * przewijania, więc `position: sticky` w sidebarze działa. Tego samego NIE wolno dać
 * na `html` — wtedy sidebar przestaje się przyklejać (sprawdzone).
 */
#page {
	overflow-x: clip;
}

h1,
.entry-title,
.woocommerce-products-header__title {
	overflow-wrap: break-word;
}

/*
 * Galeria produktu to pasek wszystkich zdjęć obok siebie (~2000 px), który chowa
 * `.flex-viewport` dokładany przez FlexSlider. Gdyby skrypt nie wstał (odroczony JS),
 * pasek wyjechałby poza ekran — dlatego kadr pilnujemy też od naszej strony.
 */
.woocommerce-product-gallery {
	overflow: hidden;
}

/*
 * Bloki „szerokie” (koszyk, kasa) Astra rozciąga ujemnym marginesem −20 px, więc na
 * wąskich ekranach wychodziły poza kolumnę treści. Selektor musi być tak samo mocny
 * jak reguła motywu, inaczej margines zostaje.
 */
@media ( max-width: 600px ) {
	body.ast-plain-container .entry-content > .alignwide,
	body.ast-plain-container .entry-content[data-ast-blocks-layout] > .alignwide,
	body.ast-separate-container .entry-content > .alignwide,
	body.ast-separate-container .entry-content[data-ast-blocks-layout] > .alignwide {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* --- Header ----------------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var( --sg-obramowanie );
}

.site-title {
	white-space: nowrap;
}

.site-title a {
	color: var( --ast-global-color-2 );
}

/* --- Sidebar listingu -------------------------------------------------------- */

/*
 * Sidebar to dwie karty: nawigacja po kategoriach i filtr ceny. Szerokość jest stała,
 * bo procentowa (domyślna w Astrze) przy 1024–1200 px zwężała kolumnę tak, że nazwy
 * kategorii łamały się na „Gry komputero / we PC”.
 */
#secondary {
	padding-inline-end: 0;
}

#secondary .sidebar-main {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#secondary .sg-kategorie,
#secondary .ast-woo-sidebar-widget {
	margin: 0;
	padding: 16px 14px;
	border: 1px solid var( --sg-obramowanie );
	border-radius: var( --sg-promien );
	background: #fff;
	box-shadow: var( --sg-cien );
}

#secondary .ast-filter-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Astra nadaje nagłówkom sidebara rozmiar H2, stąd `#secondary` w selektorze. */
#secondary .sg-kategorie__tytul,
#secondary .wp-block-heading,
#secondary .widget-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b7689;
	margin: 0 0 10px;
}

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

.sg-kategorie__lista--p1 {
	margin: 2px 0 6px;
	padding-inline-start: 12px;
	border-inline-start: 1px solid var( --sg-obramowanie );
}

.sg-kategorie__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 8px;
	color: var( --ast-global-color-3 );
	text-decoration: none;
	font-size: 15px;
	line-height: 1.3;
	transition: background var( --sg-przejscie ), color var( --sg-przejscie );
}

.sg-kategorie__link:hover,
.sg-kategorie__link:focus-visible {
	background: var( --sg-tlo-delikatne );
	color: var( --ast-global-color-0 );
}

.sg-kategorie__nazwa {
	flex: 1 1 auto;
	min-width: 0;
}

/* Licznik nie może łamać nazwy kategorii do drugiej linii — stąd osobna kolumna. */
.sg-kategorie__licznik {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: var( --sg-tlo-delikatne );
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #6b7689;
}

.sg-kategorie__pozycja--aktywna > .sg-kategorie__link {
	color: var( --ast-global-color-2 );
	font-weight: 600;
}

/* Wcięcie z pionową kreską pokazuje, że to gałąź oglądanej kategorii. */
.sg-kategorie__link[aria-current="page"] {
	background: #eaf2fd;
	box-shadow: inset 2px 0 0 var( --ast-global-color-0 );
	color: var( --ast-global-color-1 );
}

.sg-kategorie__link[aria-current="page"] .sg-kategorie__licznik {
	background: #fff;
	color: var( --ast-global-color-1 );
}

/* --- Filtr ceny -------------------------------------------------------------- */

/*
 * Domyślny suwak WooCommerce ma puste kółka, podwójną szynę i pola, które
 * rozjeżdżają się na boki. Składamy to w jeden zwarty blok: szyna, pełne
 * uchwyty i dwa pola z etykietami „od / do”.
 */
#secondary .wp-block-woocommerce-product-filter-price {
	margin-top: 8px;
}

#secondary .wp-block-woocommerce-product-filter-price .wp-block-heading {
	margin-bottom: 14px !important;
}

#secondary .wc-block-product-filter-price-slider__content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

#secondary .wc-block-product-filter-price-slider__range {
	flex: 1 1 100%;
	order: -1;
	height: 4px;
	margin: 6px 8px 2px;
	border-radius: 999px;
	background: #e3e8ef;
	--range-color: var( --ast-global-color-0 );
}

#secondary .wc-block-product-filter-price-slider__range:before {
	display: none;
}

#secondary .wc-block-product-filter-price-slider__range .range-bar {
	height: 4px;
	border-radius: 999px;
}

#secondary .wc-block-product-filter-price-slider__range input[type='range'] {
	outline: none;
}

#secondary .wc-block-product-filter-price-slider__range input[type='range']::-webkit-slider-thumb {
	width: 16px;
	height: 16px;
	margin-top: -6px;
	background: var( --ast-global-color-0 );
	border: 2px solid #fff;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, .18 );
}

#secondary .wc-block-product-filter-price-slider__range input[type='range']::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: var( --ast-global-color-0 );
	border: 2px solid #fff;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, .18 );
}

#secondary .wc-block-product-filter-price-slider__range input[type='range']:hover::-webkit-slider-thumb,
#secondary .wc-block-product-filter-price-slider__range input[type='range']:focus-visible::-webkit-slider-thumb,
#secondary .wc-block-product-filter-price-slider__range input[type='range']:hover::-moz-range-thumb,
#secondary .wc-block-product-filter-price-slider__range input[type='range']:focus-visible::-moz-range-thumb {
	background: var( --ast-global-color-1 );
	border-color: #fff;
	transform: none;
}

/* Woo przesuwa skrajne uchwyty o 2 px, przez co w kółku widać kreskę szyny. */
#secondary .wc-block-product-filter-price-slider__range input[type='range'].min::-webkit-slider-thumb,
#secondary .wc-block-product-filter-price-slider__range input[type='range'].max::-webkit-slider-thumb {
	margin-left: 0;
}

#secondary .wc-block-product-filter-price-slider__left,
#secondary .wc-block-product-filter-price-slider__right {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

#secondary .wc-block-product-filter-price-slider__left::before,
#secondary .wc-block-product-filter-price-slider__right::before {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8a94a6;
}

#secondary .wc-block-product-filter-price-slider__left::before {
	content: 'Od';
}

#secondary .wc-block-product-filter-price-slider__right::before {
	content: 'Do';
}

#secondary .wc-block-product-filter-price-slider .text input[type='text'] {
	width: 100%;
	max-width: none;
	min-width: 0;
	padding: 7px 10px;
	border: 1px solid var( --sg-obramowanie );
	border-radius: 8px;
	background: #fff;
	color: var( --ast-global-color-2 );
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	text-align: left;
}

#secondary .wc-block-product-filter-price-slider .text input[type='text']:focus {
	outline: none;
	border-color: var( --ast-global-color-0 );
	box-shadow: 0 0 0 3px #eaf2fd;
}

/* --- Kafelki kategorii ------------------------------------------------------- */

.sg-kafelki {
	margin: 0 0 40px;
}

.sg-kafelki__tytul {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --ast-global-color-3 );
	margin: 0 0 14px;
}

/*
 * Sklep ma sześć kategorii najwyższego poziomu, więc siatka 3 × 2 wypada równo.
 * Auto-fill przy tej liczbie zostawiał sierotę w ostatnim rzędzie.
 */
.sg-kafelki__lista {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sg-kafelek {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 10px 14px 10px 10px;
	border: 1px solid var( --sg-obramowanie );
	border-radius: var( --sg-promien );
	background: #fff;
	box-shadow: var( --sg-cien );
	text-decoration: none;
	transition: border-color var( --sg-przejscie ), box-shadow var( --sg-przejscie ), transform var( --sg-przejscie );
}

.sg-kafelek:hover,
.sg-kafelek:focus-visible {
	border-color: #c7d7ee;
	box-shadow: var( --sg-cien-hover );
	transform: translateY( -2px );
}

.sg-kafelek__obraz {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: var( --sg-tlo-delikatne );
	overflow: hidden;
}

/* Okładki gier są pionowe — kadrowanie ucinało im tytuły. */
.sg-kafelek__obraz img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
}

.sg-kafelek__opis {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sg-kafelek__nazwa {
	font-weight: 600;
	color: var( --ast-global-color-2 );
	line-height: 1.3;
}

.sg-kafelek__licznik {
	font-size: 12px;
	color: #8a94a6;
	font-variant-numeric: tabular-nums;
}

/* --- Opis kategorii ------------------------------------------------------------ */

.sg-kat-wstep {
	max-width: 78ch;
	margin: 0 0 28px;
	color: var( --ast-global-color-3 );
	line-height: 1.65;
}

.sg-kat-wstep p {
	margin-bottom: 14px;
}

.sg-kat-wstep h2 {
	font-size: 18px;
	line-height: 1.3;
	margin: 24px 0 8px;
}

.sg-kat-wiecej__przycisk {
	display: inline-block;
	margin-top: 4px;
	color: var( --ast-global-color-0 );
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.sg-kat-wiecej__przycisk::-webkit-details-marker {
	display: none;
}

.sg-kat-wiecej__przycisk::after {
	content: ' ↓';
}

.sg-kat-wiecej[open] .sg-kat-wiecej__przycisk::after {
	content: ' ↑';
}

.sg-kat-wiecej__zwin,
.sg-kat-wiecej[open] .sg-kat-wiecej__rozwin {
	display: none;
}

.sg-kat-wiecej[open] .sg-kat-wiecej__zwin {
	display: inline;
}

.sg-kat-wiecej[open] .sg-kat-wiecej__przycisk {
	margin-bottom: 8px;
}

/* --- FAQ pod siatką ------------------------------------------------------------- */

.sg-kat-faq {
	max-width: 78ch;
	margin: 56px 0 0;
	padding-top: 32px;
	border-top: 1px solid var( --sg-obramowanie );
}

.sg-kat-faq__tytul {
	font-size: 22px;
	margin: 0 0 18px;
}

.sg-kat-faq__lista {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sg-kat-faq__pozycja {
	border: 1px solid var( --sg-obramowanie );
	border-radius: var( --sg-promien );
	background: #fff;
}

.sg-kat-faq__pytanie {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px;
	font-weight: 600;
	color: var( --ast-global-color-2 );
	cursor: pointer;
	list-style: none;
	line-height: 1.4;
}

.sg-kat-faq__pytanie::-webkit-details-marker {
	display: none;
}

/* Strzałka rysowana ramką — bez dodatkowego pliku z ikonami. */
.sg-kat-faq__pytanie::after {
	content: '';
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin: 5px 0 0 auto;
	border-right: 2px solid #8a94a6;
	border-bottom: 2px solid #8a94a6;
	transform: rotate( 45deg );
	transition: transform var( --sg-przejscie );
}

.sg-kat-faq__pozycja[open] .sg-kat-faq__pytanie::after {
	transform: rotate( -135deg );
	margin-top: 8px;
}

.sg-kat-faq__pozycja[open] .sg-kat-faq__pytanie {
	padding-bottom: 4px;
}

.sg-kat-faq__odpowiedz {
	padding: 0 18px 16px;
	color: var( --ast-global-color-3 );
	line-height: 1.65;
}

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

.sg-prod-wstep {
	max-width: 78ch;
	margin: 0 0 28px;
	line-height: 1.65;
}

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

.single-product .sg-prod-faq {
	max-width: none;
	margin: 40px 0 0;
}

/* --- Pasek nad listingiem ----------------------------------------------------- */

.woocommerce-products-header {
	margin-bottom: 8px;
}

.ast-woo-shop-archive .woocommerce-result-count,
.ast-woo-shop-archive .woocommerce-ordering {
	margin-bottom: 20px;
}

.woocommerce-result-count {
	color: #6b7280;
	font-size: 14px;
}

/* --- Karty produktów ---------------------------------------------------------- */

/*
 * Zdjęcia produktów są robione „z ręki” i mają różne proporcje, przez co karty
 * miały różną wysokość, a przyciski układały się schodkami. Wymuszamy kwadratowe
 * pole obrazka z `contain`, a resztę karty układamy flexem od dołu.
 */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	padding: 10px 10px 14px;
	border: 1px solid var( --sg-obramowanie );
	border-radius: var( --sg-promien );
	background: #fff;
	box-shadow: var( --sg-cien );
	transition: border-color var( --sg-przejscie ), box-shadow var( --sg-przejscie ), transform var( --sg-przejscie );
}

.woocommerce ul.products li.product:hover {
	border-color: #c7d7ee;
	box-shadow: var( --sg-cien-hover );
	transform: translateY( -2px );
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
	background: var( --sg-tlo-delikatne );
	margin-bottom: 12px;
	transition: transform var( --sg-przejscie );
}

.woocommerce ul.products li.product:hover img {
	transform: scale( 1.03 );
}

.woocommerce ul.products li.product .ast-woo-product-category {
	font-size: 12px;
	color: #8a94a6;
	margin-bottom: 2px;
}

/*
 * Tytuły mają od jednej do trzech linii. Przycinamy do dwóch i rezerwujemy
 * wysokość dwóch linii — dzięki temu ceny i przyciski we wszystkich kartach
 * stoją w jednej osi, niezależnie od długości nazwy gry.
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
	font-size: 15px;
	line-height: 1.35;
	color: var( --ast-global-color-2 );
	margin-bottom: 6px;
}

.woocommerce ul.products li.product .price {
	font-size: 17px;
	font-weight: 600;
	color: var( --ast-global-color-2 );
}

.woocommerce ul.products li.product .button {
	width: 100%;
	margin-top: 12px;
	text-align: center;
}

.woocommerce ul.products li.product .added_to_cart {
	display: none;
}

/* --- Strona produktu ---------------------------------------------------------- */

.single-product .product_title {
	font-size: clamp( 26px, 2.4vw, 34px );
	line-height: 1.2;
	margin-bottom: 10px;
}

.single-product div.product .summary p.price,
.single-product div.product .summary span.price {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var( --ast-global-color-2 );
	margin-bottom: 20px;
}

/* Jedyna akcja na stronie produktu — do tej pory wyglądała jak zwykły link. */
.single-product div.product .summary .single_add_to_cart_button {
	min-width: 240px;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 600;
	background: var( --ast-global-color-0 );
	border-color: var( --ast-global-color-0 );
	color: #fff;
}

.single-product div.product .summary .single_add_to_cart_button:hover,
.single-product div.product .summary .single_add_to_cart_button:focus-visible {
	background: var( --ast-global-color-1 );
	border-color: var( --ast-global-color-1 );
	color: #fff;
}

/*
 * Bez ograniczenia szerokości galeria rosła do ~650 px, a kolumna z ceną kończyła
 * się po 250 px — strona wyglądała na w połowie pustą.
 */
.single-product .woocommerce-product-gallery {
	max-width: 520px;
	border: 1px solid var( --sg-obramowanie );
	border-radius: var( --sg-promien );
	padding: 16px;
	background: #fff;
}

/*
 * Zdjęcia produktów mają różne proporcje — bez wspólnego kadru galeria potrafiła
 * urosnąć na dwa ekrany, podczas gdy kolumna z ceną kończyła się po 300 px.
 */
/*
 * Kwadratowy kadr zamiast naturalnych proporcji — zdjęcia są robione „z ręki”
 * i bez tego każdy produkt miał galerię innej wysokości. Szare wypełnienie
 * (ze snippetu „Galeria – pelne powiekszenie zdjecia”) gasimy, bo ramka poniżej
 * wystarczy za obramowanie.
 */
.single-product .woocommerce-product-gallery__image img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	background: transparent;
	border-radius: 8px;
}

/* Miniatury zostawiamy w responsywnej siatce Astry, dokładamy tylko wspólny kadr. */
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border: 1px solid var( --sg-obramowanie );
	border-radius: 8px;
	background: var( --sg-tlo-delikatne );
	opacity: 1;
	cursor: pointer;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	border-color: var( --ast-global-color-0 );
}

/*
 * Opis produktu zaczyna się nagłówkiem „Szczegóły egzemplarza”, który przez
 * domyślne style H2 był większy od nazwy produktu.
 */
.single-product .woocommerce-Tabs-panel h2,
.single-product .woocommerce-Tabs-panel h3 {
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 14px;
}

.single-product .woocommerce-tabs {
	margin-top: 48px;
}

.single-product .woocommerce-tabs .panel {
	padding-top: 24px;
}

.single-product .woocommerce-tabs .panel p {
	margin-bottom: 8px;
}

.single-product .product_meta {
	font-size: 14px;
	color: #6b7280;
}

/* --- Koszyk i kasa ------------------------------------------------------------- */

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
	margin-bottom: 24px;
}

/*
 * Strona /wishlist/ ma H1 z motywu („Obserwowane”). YITH dokłada drugi nagłówek
 * w treści shortcode’u. Zostaje tylko H1 strony.
 */
.wishlist-title-container {
	display: none;
}

/* --- Logowanie i konto -------------------------------------------------------- */

/*
 * Gość widzi H1 „Moje konto” z motywu i H2 „Logowanie” z WooCommerce.
 * Zostaje jeden nagłówek, ten przy formularzu.
 */
.woocommerce-account:not( .logged-in ) .entry-header {
	display: none;
}

.woocommerce-account:not( .logged-in ) .entry-content > .woocommerce {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px 0 48px;
}

.woocommerce-account:not( .logged-in ) .woocommerce > h2 {
	width: min( 420px, 100% );
	margin: 0 0 20px;
	font-size: clamp( 26px, 2.4vw, 32px );
	line-height: 1.2;
	color: var( --ast-global-color-2 );
	text-align: center;
}

.woocommerce-form-login,
.woocommerce-ResetPassword,
.woocommerce-form-register {
	width: min( 420px, 100% );
	margin: 0;
	padding: 28px 28px 24px;
	border: 1px solid var( --sg-obramowanie );
	border-radius: var( --sg-promien );
	background: #fff;
	box-shadow: var( --sg-cien );
}

.woocommerce-form-login .form-row,
.woocommerce-ResetPassword .form-row,
.woocommerce-form-register .form-row {
	margin-bottom: 16px;
}

.woocommerce-form-login label,
.woocommerce-ResetPassword label,
.woocommerce-form-register label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var( --ast-global-color-3 );
}

.woocommerce-form-login .woocommerce-Input,
.woocommerce-ResetPassword .woocommerce-Input,
.woocommerce-form-register .woocommerce-Input,
.woocommerce-form-login input.input-text,
.woocommerce-ResetPassword input.input-text,
.woocommerce-form-register input.input-text {
	width: 100%;
	max-width: none;
	padding: 12px 14px;
	border: 1px solid var( --sg-obramowanie );
	border-radius: 8px;
	background: #fff;
	color: var( --ast-global-color-2 );
	font-size: 15px;
	line-height: 1.4;
}

.woocommerce-form-login .woocommerce-Input:focus,
.woocommerce-ResetPassword .woocommerce-Input:focus,
.woocommerce-form-register .woocommerce-Input:focus,
.woocommerce-form-login input.input-text:focus,
.woocommerce-ResetPassword input.input-text:focus,
.woocommerce-form-register input.input-text:focus {
	outline: none;
	border-color: var( --ast-global-color-0 );
	box-shadow: 0 0 0 3px #eaf2fd;
}

.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 14px;
	font-weight: 400;
	color: var( --ast-global-color-3 );
}

body.woocommerce-account .woocommerce-form-login .button,
body.woocommerce-account .woocommerce-ResetPassword .button,
body.woocommerce-account .woocommerce-form-register .button {
	display: block;
	width: 100%;
	margin: 4px 0 0;
	padding: 13px 20px;
	border: 0;
	border-radius: 8px;
	background: var( --ast-global-color-0 );
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

body.woocommerce-account .woocommerce-form-login .button:hover,
body.woocommerce-account .woocommerce-ResetPassword .button:hover,
body.woocommerce-account .woocommerce-form-register .button:hover,
body.woocommerce-account .woocommerce-form-login .button:focus-visible,
body.woocommerce-account .woocommerce-ResetPassword .button:focus-visible,
body.woocommerce-account .woocommerce-form-register .button:focus-visible {
	background: var( --ast-global-color-1 );
	border-color: var( --ast-global-color-1 );
	color: #fff;
}

body.woocommerce-account .woocommerce-ResetPassword .form-row-first,
body.woocommerce-account .woocommerce-ResetPassword .form-row-last {
	float: none;
	width: 100%;
}

.woocommerce-ResetPassword > p:first-of-type {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: var( --ast-global-color-3 );
}

.woocommerce-LostPassword {
	margin: 16px 0 0;
	text-align: center;
}

.woocommerce-LostPassword a {
	font-size: 14px;
	font-weight: 500;
}

.woocommerce-account .woocommerce-notices-wrapper {
	width: min( 420px, 100% );
}

/* --- Stopka -------------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid var( --sg-obramowanie );
	margin-top: 64px;
}

/* --- Blog -------------------------------------------------------------------- */

body.blog .site-main,
body.archive .site-main,
body.single-post .site-main {
	max-width: 820px;
}

body.blog #primary.ast-grid-3,
body.archive #primary.ast-grid-3 {
	display: flex;
	flex-direction: column;
	gap: 20px;
	grid-template-columns: none;
}

body.blog .ast-article-post,
body.archive .ast-article-post {
	width: 100%;
	margin: 0;
	padding: 22px 24px;
	border: 1px solid var( --sg-obramowanie );
	border-radius: var( --sg-promien );
	background: #fff;
	box-shadow: var( --sg-cien );
}

body.blog .ast-article-post .entry-title,
body.archive .ast-article-post .entry-title {
	font-size: clamp( 1.15rem, 2.2vw, 1.45rem );
	line-height: 1.3;
	margin: 0 0 8px;
}

body.blog .ast-article-post .entry-meta,
body.archive .ast-article-post .entry-meta {
	font-size: 13px;
	color: var( --ast-global-color-3 );
	margin-bottom: 12px;
}

body.blog .ast-article-post .entry-content,
body.archive .ast-article-post .entry-content {
	font-size: 15px;
	line-height: 1.55;
	color: var( --ast-global-color-3 );
}

body.single-post .entry-title {
	font-size: clamp( 1.5rem, 3vw, 2rem );
	line-height: 1.25;
}

body.single-post .entry-content {
	font-size: 17px;
	line-height: 1.65;
}

body.single-post .entry-content p {
	margin-bottom: 1.1em;
}

/* --- Panele wysuwane: menu i filtry ----------------------------------------- */

/*
 * Astra na tablecie i mobile wypycha sidebar pod siatkę produktów, a jej własny
 * toggle menu zależy od klasy `ast-header-break-point`, której dokłada skrypt motywu —
 * gdy ten nie wystartuje, hamburger jest martwy. Dlatego obsługę bierze `nawigacja.js`:
 * menu wysuwa się z prawej, kategorie i filtry z lewej.
 */

/* Nad przyklejonym paskiem Astry (z-index 99) i nad wygaszoną szufladą Woo (9999). */
.sg-naklad {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba( 16, 24, 40, .45 );
}

.sg-naklad[hidden] {
	display: none;
}

body.sg-bez-przewijania {
	overflow: hidden;
}

/* Panel menu. Sidebar (`#secondary`) dostaje ten sam układ, ale tylko poniżej 1024 px. */
.sg-panel--menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10001;
	display: flex;
	flex-direction: column;
	width: min( 360px, 88vw );
	background: #fff;
	box-shadow: 0 10px 40px rgba( 16, 24, 40, .18 );
	transform: translateX( 100% );
	visibility: hidden;
	transition: transform .24s ease, visibility .24s;
}

.sg-panel--menu.sg-panel--otwarty {
	transform: none;
	visibility: visible;
}

/*
 * Zamknięty panel wypada z rysowania. Gdyby tylko stał obok ekranu (`translateX`),
 * przeglądarki mobilne pozwalałyby przeciągnąć stronę w bok do pustego miejsca.
 * Klasę zdejmuje i nakłada `nawigacja.js` — nakłada po animacji zamykania.
 */
.sg-panel--menu.sg-panel--zwiniety {
	display: none;
}

.sg-panel__belka {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 16px;
	border-bottom: 1px solid var( --sg-obramowanie );
}

.sg-panel__tytul {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b7689;
}

.sg-panel__zamknij {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var( --sg-obramowanie );
	border-radius: 8px;
	background: #fff;
	color: var( --ast-global-color-2 );
	cursor: pointer;
}

.sg-panel__zamknij:hover {
	background: var( --sg-tlo-delikatne );
	color: var( --ast-global-color-0 );
}

.sg-panel__tresc {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 14px 16px 24px;
}

.sg-panel__stopka {
	flex: 0 0 auto;
	padding: 12px 16px;
	border-top: 1px solid var( --sg-obramowanie );
	background: #fff;
}

.sg-panel__pokaz {
	width: 100%;
	padding: 12px 16px;
	border: 0;
	border-radius: 8px;
	background: var( --ast-global-color-0 );
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.sg-panel__pokaz:hover {
	background: var( --ast-global-color-1 );
}

/* Wyszukiwarka nie mieści się na pasku mobilnym — jej miejsce jest w panelu menu. */
.sg-panel__szukaj {
	margin: 0 0 16px;
}

.sg-panel__szukaj-etykieta {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b7689;
}

.sg-panel__szukaj-pole {
	width: 100%;
	margin-top: 6px;
	padding: 11px 12px;
	border: 1px solid var( --sg-obramowanie );
	border-radius: 8px;
	font-size: 15px;
}

.sg-menu,
.sg-menu__podlista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sg-menu > .menu-item {
	display: block;
	border-bottom: 1px solid var( --sg-obramowanie );
}

.sg-menu > .menu-item:last-child {
	border-bottom: 0;
}

.sg-menu .menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 2px;
	color: var( --ast-global-color-2 );
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.sg-menu .menu-link:hover,
.sg-menu .menu-link:focus-visible {
	color: var( --ast-global-color-0 );
}

.sg-menu .current-menu-item > .menu-link {
	color: var( --ast-global-color-0 );
	font-weight: 600;
}

.sg-menu__podlista {
	margin: 0 0 8px;
	padding-inline-start: 12px;
	border-inline-start: 1px solid var( --sg-obramowanie );
}

.sg-menu__podlista .menu-link {
	padding: 10px 2px;
	font-size: 15px;
	font-weight: 400;
}

/* --- Wejście w filtry na tablecie i mobile ---------------------------------- */

.sg-filtry-trigger {
	display: none;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 11px 14px;
	border: 1px solid var( --sg-obramowanie );
	border-radius: 10px;
	background: #fff;
	box-shadow: var( --sg-cien );
	color: var( --ast-global-color-2 );
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.sg-filtry-trigger:hover,
.sg-filtry-trigger:focus-visible {
	border-color: #c7d7ee;
	color: var( --ast-global-color-0 );
}

/*
 * Blok filtrów WooCommerce ma własną szufladę poniżej 601 px („Filtrowanie produktów”).
 * W naszym panelu dałoby to szufladę w szufladzie, więc wymuszamy układ zwykłej treści —
 * te same reguły, które Woo stosuje od 601 px w górę.
 */
#secondary .wc-block-product-filters,
#secondary .wc-block-product-filters.is-overlay-opened {
	display: flex;
}

#secondary .wc-block-product-filters__open-overlay,
#secondary .wc-block-product-filters__overlay-header,
#secondary .wc-block-product-filters__overlay-footer {
	display: none;
}

#secondary .wc-block-product-filters__overlay {
	position: relative;
	inset: 0;
	flex-grow: 1;
	background: inherit;
	pointer-events: auto;
	transition: none;
}

#secondary .wc-block-product-filters__overlay-wrapper {
	width: auto;
	height: auto;
	background: inherit;
}

#secondary .wc-block-product-filters__overlay-dialog {
	position: relative;
	transform: none;
	background: inherit;
}

#secondary .wc-block-product-filters__overlay-content {
	padding: 0;
	overflow: visible;
	background: inherit;
}

/* --- Sidebar: od 1025 px obok siatki, niżej panel --------------------------- */

@media ( min-width: 1025px ) {
	/*
	 * Stała szerokość zamiast procentowej: przy 1024–1200 px kolumna zwężała się
	 * tak, że nazwy kategorii łamały się w środku wyrazu.
	 */
	body.sg-listing #secondary {
		position: sticky;
		top: 20px;
		flex: 0 0 276px;
		width: 276px;
		align-self: flex-start;
	}

	body.sg-listing #primary {
		min-width: 0;
	}

	/* Belka i stopka należą do panelu — obok siatki nie mają czego zamykać. */
	#secondary > .sg-panel__belka,
	#secondary > .sg-panel__stopka {
		display: none;
	}
}

@media ( max-width: 1024px ) {
	.sg-js .sg-filtry-trigger {
		display: inline-flex;
	}

	.sg-js body.sg-listing #secondary {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 10001;
		display: flex;
		flex-direction: column;
		width: min( 360px, 88vw );
		margin: 0;
		padding: 0;
		background: #fff;
		box-shadow: 0 10px 40px rgba( 16, 24, 40, .18 );
		transform: translateX( -100% );
		visibility: hidden;
		transition: transform .24s ease, visibility .24s;
	}

	.sg-js body.sg-listing #secondary.sg-panel--otwarty {
		transform: none;
		visibility: visible;
	}

	/* Zamknięty panel nie może stać obok ekranu — patrz `.sg-panel--zwiniety` wyżej. */
	.sg-js body.sg-listing #secondary.sg-panel--zwiniety {
		display: none;
	}

	/* W panelu karty zamieniają się w sekcje jednej przewijanej listy. */
	.sg-js body.sg-listing #secondary .sidebar-main {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 14px 16px 24px;
	}

	.sg-js body.sg-listing #secondary .sg-kategorie,
	.sg-js body.sg-listing #secondary .ast-woo-sidebar-widget {
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.sg-js body.sg-listing #secondary .ast-woo-sidebar-widget {
		padding-top: 18px;
		border-top: 1px solid var( --sg-obramowanie );
	}

	.sg-js body.sg-listing #secondary .sg-kategorie__link {
		padding: 12px 10px;
		font-size: 16px;
	}
}

/* --- Nawigacja: pasek desktopowy -------------------------------------------- */

@media ( min-width: 922px ) {
	#ast-desktop-header .ast-builder-grid-row {
		align-items: center;
	}

	#ast-desktop-header .site-header-primary-section-right {
		min-width: 0;
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: 10px;
	}

	#ast-desktop-header .ast-builder-menu-1 {
		min-width: 0;
	}

	#ast-desktop-header .main-header-menu {
		flex-wrap: nowrap;
	}

	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		white-space: nowrap;
	}
}

/*
 * Do 1400 px pasek nie mieści menu razem z rozwiniętym polem szukania — pole
 * nachodziło na „Sklep / Blog / Kontakt”. Zostaje ikona, a formularz otwiera się
 * jako dymek pod paskiem (klasę `ast-dropdown-active` przełącza `nawigacja.js`).
 */
@media ( max-width: 1400px ) and ( min-width: 922px ) {
	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		padding-inline: 9px;
		font-size: 14px;
	}

	#ast-desktop-header .site-logo-img img {
		width: 54px;
		height: auto;
	}

	#ast-desktop-header .site-title {
		font-size: 17px;
	}

	#ast-desktop-header .ast-header-search {
		position: relative;
		flex: 0 0 auto;
	}

	.sg-js #ast-desktop-header .ast-search-menu-icon .search-form {
		/* Astra trzyma ten formularz na `display: flex !important` — inaczej się nie schowa. */
		display: none !important;
		position: absolute;
		top: calc( 100% + 12px );
		right: 0;
		z-index: 60;
		width: min( 340px, 80vw );
		padding: 8px;
		border: 1px solid var( --sg-obramowanie );
		border-radius: 10px;
		background: #fff;
		box-shadow: var( --sg-cien-hover );
	}

	#ast-desktop-header .ast-search-menu-icon.ast-dropdown-active .search-form {
		display: flex !important;
	}

	#ast-desktop-header .ast-search-menu-icon .search-form label {
		display: flex;
		align-items: center;
		gap: 6px;
		width: 100%;
	}

	#ast-desktop-header .ast-search-menu-icon .search-field,
	#ast-desktop-header .ast-search-menu-icon.ast-dropdown-active .search-field {
		width: 100%;
		padding: 10px 12px;
	}

	#ast-desktop-header .ast-search-menu-icon .search-submit {
		display: inline-flex;
	}

	/* W trybie „inline search” Astra gasi samą ikonę (`display: none !important`). */
	.sg-js #ast-desktop-header .ast-header-search .ast-search-icon {
		display: flex !important;
	}

	#ast-desktop-header .ast-search-icon .astra-search-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 1px solid var( --sg-obramowanie );
		border-radius: 10px;
		background: #fff;
		color: var( --ast-global-color-2 );
		cursor: pointer;
	}

	#ast-desktop-header .ast-search-icon .astra-search-icon:hover,
	#ast-desktop-header .ast-search-icon .astra-search-icon:focus-visible {
		border-color: #c7d7ee;
		color: var( --ast-global-color-0 );
	}

	#ast-desktop-header .ast-search-icon .ast-icon {
		display: inline-flex;
	}

	#ast-desktop-header .ast-search-icon .ast-icon svg {
		width: 18px;
		height: 18px;
		fill: currentColor;
	}
}

@media ( max-width: 1180px ) and ( min-width: 922px ) {
	/* Nazwa sklepu obok gęstego menu to już tylko ciasnota — zostaje logo. */
	#ast-desktop-header .ast-site-title-wrap {
		display: none;
	}

	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		padding-inline: 7px;
		font-size: 13px;
	}
}

/* --- Nawigacja: pasek mobilny (≤921) ---------------------------------------- */

@media ( max-width: 921px ) {
	#ast-mobile-header .ast-primary-header-bar {
		padding-inline: var( --sg-margines );
	}

	#ast-mobile-header .ast-builder-grid-row {
		width: 100%;
		margin: 0;
		gap: 10px;
		align-items: center;
		flex-wrap: nowrap;
		min-height: 60px;
	}

	#ast-mobile-header .site-header-primary-section-left {
		flex: 1 1 auto;
		min-width: 0;
		flex-wrap: nowrap;
	}

	#ast-mobile-header .site-header-primary-section-right {
		flex: 0 0 auto;
		gap: 6px;
		justify-content: flex-end;
		flex-wrap: nowrap;
	}

	#ast-mobile-header .site-branding {
		align-items: center;
		gap: 10px;
		min-width: 0;
	}

	#ast-mobile-header .site-logo-img img {
		width: 40px;
		height: auto;
	}

	#ast-mobile-header .site-title {
		font-size: 15px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Szukanie siedzi w panelu menu, więc na pasku zostaje logo i hamburger. */
	.sg-js #ast-mobile-header .ast-header-search {
		display: none;
	}

	#ast-mobile-header .ast-button-wrap {
		display: flex;
		align-items: center;
	}

	#ast-mobile-header .menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		min-width: 42px;
		padding: 0;
		border: 1px solid var( --sg-obramowanie );
		border-radius: 10px;
		background: #fff;
		color: var( --ast-global-color-2 );
	}

	#ast-mobile-header .menu-toggle .ast-close-svg {
		display: none;
	}

	/* Rozwijana lista Astry jest zbędna — menu żyje w panelu. */
	.sg-js #ast-mobile-header .ast-mobile-header-content {
		display: none;
	}

	#secondary {
		padding-inline-end: 0;
	}

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

	body.blog .ast-article-post,
	body.archive .ast-article-post {
		padding: 18px 16px;
	}
}

@media ( max-width: 544px ) {
	/* Nazwa nie mieści się razem z logo i hamburgerem. */
	#ast-mobile-header .ast-site-title-wrap {
		display: none;
	}

	/* Dymki przy kartach produktów wystawały poza ekran, a na dotyku nic nie wnoszą. */
	.ast-card-action-tooltip {
		display: none;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 14px;
	}

	.sg-kafelki__lista {
		grid-template-columns: 1fr;
	}
}

/* Zdjęcie otwierające wpis. Szerokość kolumny, bez wyjeżdżania na boki. */
.entry-content .sg-wpis-zdjecie {
	margin: 0 0 1.6rem;
}

.entry-content .sg-wpis-zdjecie img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Dolny rząd stopki Astra rozciąga na pełną szerokość aż do ~1500 px, więc copyright
 * i linki dotykały krawędzi ekranu, a przycisk „do góry” (stała pozycja, 30 px od
 * prawego dolnego narożnika) siadał na „Polityce prywatności” i „Zwrotach”.
 * Wcięcie po bokach trzyma tekst w kadrze, zapas na dole przepuszcza przycisk.
 */
@media ( max-width: 1500px ) {
	.site-below-footer-wrap .site-below-footer-inner-wrap {
		padding-inline: 20px;
		padding-bottom: 52px;
	}
}