/*
Theme Name: Astra Child — LKS Łochowo
Description: Motyw sklepu klubowego LKS Łochowo. Barwy i herb klubu, sportowa typografia kondensowana, ciemny header z pełnoszerokościową nawigacją.
Template: astra
Version: 1.0.0
Author: Rafał Ignaczak
*/

/* ============================================================
   FONTY — self-hosted (Google Fonts z CDN to ryzyko RODO)
   Barlow Condensed: nagłówki, wersaliki sportowe
   Barlow: treść
   ============================================================ */

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/barlow-condensed-600-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/barlow-condensed-600-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/barlow-condensed-700-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/barlow-condensed-700-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/barlow-condensed-800-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/barlow-condensed-800-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/barlow-400-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/barlow-400-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/barlow-500-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/barlow-500-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/barlow-600-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/barlow-600-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/barlow-700-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/barlow-700-latin.woff2') format('woff2');
}

/* Kroje zapasowe o metryce dociągniętej do Barlow — przy font-display: swap
   tekst rysuje się najpierw krojem systemowym i podmiana przesuwała układ
   (CLS 0,03-0,07; z zablokowanymi woff2 CLS = 0). Nadpisania liczone wobec
   Arial: size-adjust = stosunek średniej szerokości znaku, ascent/descent =
   metryki Barlow (1000/-200 na 1000 jednostek) podzielone przez size-adjust.
   Wartość dla odmiany wąskiej to średnia z grubości 700 i 800, bo obie są
   w użyciu (nawigacja i nagłówki). */
@font-face {
	font-family: 'Barlow zapasowy';
	src: local('Arial');
	size-adjust: 93.2%;
	ascent-override: 107.3%;
	descent-override: 21.5%;
	line-gap-override: 0%;
}
@font-face {
	font-family: 'Barlow Condensed zapasowy';
	src: local('Arial');
	size-adjust: 76%;
	ascent-override: 131.6%;
	descent-override: 26.3%;
	line-gap-override: 0%;
}

/* ============================================================
   BARWY KLUBU — pobrane z herbu LKS Łochowo
   ============================================================ */

:root {
	--lks-czerwien: #d8302f;
	--lks-czerwien-ciemna: #a81f22;
	--lks-czerwien-jasna: #f04438;
	--lks-czern: #14110f;
	--lks-grafit: #221e1b;
	--lks-zloto: #e8cd6d;
	--lks-zloto-ciemne: #c9a94a;
	--lks-bialy: #ffffff;
	--lks-kosc: #f6f4f1;
	--lks-szary: #6f6763;
	--lks-szary-jasny: #ddd7d2;

	--lks-naglowek: 'Barlow Condensed', 'Barlow Condensed zapasowy', 'Arial Narrow', sans-serif;
	--lks-tresc: 'Barlow', 'Barlow zapasowy', -apple-system, sans-serif;

	--lks-cien: 0 2px 8px rgba(20, 17, 15, 0.08);
	--lks-cien-mocny: 0 12px 32px rgba(20, 17, 15, 0.16);
	--lks-szer: 1280px;
}

/* ============================================================
   TYPOGRAFIA
   ============================================================ */

body,
.ast-container,
button,
input,
select,
textarea {
	font-family: var(--lks-tresc);
	color: var(--lks-czern);
}

body {
	background: var(--lks-bialy);
	font-size: 16px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--lks-naglowek);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.08;
	color: var(--lks-czern);
}

h1, .entry-title { font-size: clamp(2.2rem, 5vw, 3.4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); text-transform: uppercase; }
h3 { font-size: 1.4rem; }

/* ============================================================
   DOSTĘPNOŚĆ — widoczny focus (WCAG 2.4.7)
   ============================================================ */

/* Astra gasi obrys na polach formularzy w kilku miejscach (`input { outline: none }`,
   `.woocommerce select:focus { outline: 0 }`, a najmocniej
   `.woocommerce-js input[type="text"]:focus { outline-style: unset }` o
   specyficzności 0,3,1), przez co przejście Tabem przez ścieżkę zakupu było
   niewidoczne. Stąd `html body` i `:not(:disabled)` — dają 0,3,2, więc bijemy
   tamte reguły bez !important, niezależnie od kolejności ładowania arkuszy.
   :focus-visible zostawia klikanie myszą bez obrysu. */
html body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible:not(:disabled) {
	outline: 3px solid var(--lks-czerwien);
	outline-offset: 2px;
}

/* Na ciemnych tłach klubowa czerwień zlewa się z podkładem — tam obrys złoty. */
html body :is(.lks-nawigacja, .lks-stopka, .lks-hero, .lks-atuty, .lks-pasek-info)
	:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible:not(:disabled) {
	outline-color: var(--lks-zloto);
}

/* ============================================================
   PASEK UTILITY — nad headerem
   ============================================================ */

.lks-pasek-info {
	background: var(--lks-czern);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.82rem;
	letter-spacing: 0.03em;
}

.lks-pasek-info__wnetrze {
	max-width: var(--lks-szer);
	margin: 0 auto;
	padding: 0 24px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.lks-pasek-info strong {
	color: var(--lks-zloto);
	font-weight: 600;
}

.lks-pasek-info__linki {
	display: flex;
	gap: 22px;
}

.lks-pasek-info a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: color 0.15s;
}

.lks-pasek-info a:hover {
	color: var(--lks-zloto);
}

/* ============================================================
   HEADER — herb + nazwa + wyszukiwarka + koszyk
   ============================================================ */

.lks-header {
	background: var(--lks-bialy);
	border-bottom: 1px solid var(--lks-szary-jasny);
}

.lks-header__wnetrze {
	max-width: var(--lks-szer);
	margin: 0 auto;
	padding: 18px 24px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 32px;
}

.lks-marka {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

/* Herbem sterujemy wysokością — szerokość dobiera się z proporcji pliku,
   więc żadne kadrowanie (object-fit) nie jest potrzebne.
   Selektor z .lks-header, bo Astra na stronach sklepu daje
   `.woocommerce img, .woocommerce-page img { height: auto }` — bez podniesienia
   specyficzności herb puchł tam do naturalnych 134 px i koszyk nachodził
   na nazwę sklepu. */
.lks-header .lks-marka__herb {
	height: 66px;
	width: auto;
	flex-shrink: 0;
}

.lks-marka__tekst {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.lks-marka__nad {
	font-family: var(--lks-naglowek);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lks-czerwien);
	margin-bottom: 4px;
}

.lks-marka__nazwa {
	font-family: var(--lks-naglowek);
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--lks-czern);
}

.lks-szukaj {
	max-width: 460px;
	width: 100%;
	justify-self: center;
	position: relative;
}

.lks-szukaj input[type="search"] {
	width: 100%;
	height: 46px;
	padding: 0 52px 0 18px;
	border: 2px solid var(--lks-szary-jasny);
	border-radius: 3px;
	font-size: 0.95rem;
	background: var(--lks-kosc);
	transition: border-color 0.15s, background 0.15s;
}

.lks-szukaj input[type="search"]:focus {
	border-color: var(--lks-czerwien);
	background: var(--lks-bialy);
}

/* Obrys gasimy wyłącznie przy kliknięciu myszą — dla klawiatury zostaje
   reguła :focus-visible z sekcji dostępności. */
.lks-szukaj input[type="search"]:focus:not(:focus-visible) {
	outline: none;
}

.lks-szukaj button {
	position: absolute;
	right: 0;
	top: 0;
	height: 46px;
	width: 48px;
	border: none;
	background: var(--lks-czerwien);
	color: #fff;
	cursor: pointer;
	border-radius: 0 2px 2px 0;
	display: grid;
	place-items: center;
	transition: background 0.15s;
}

.lks-szukaj button:hover {
	background: var(--lks-czerwien-ciemna);
}

.lks-koszyk {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--lks-czern);
}

.lks-koszyk__ikona {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--lks-kosc);
	border-radius: 50%;
	transition: background 0.15s;
}

.lks-koszyk:hover .lks-koszyk__ikona {
	background: var(--lks-szary-jasny);
}

.lks-koszyk__licznik {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 21px;
	height: 21px;
	padding: 0 5px;
	background: var(--lks-czerwien);
	color: #fff;
	border-radius: 11px;
	font-size: 0.72rem;
	font-weight: 700;
	display: grid;
	place-items: center;
	border: 2px solid #fff;
}

.lks-koszyk__opis {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.lks-koszyk__etykieta {
	font-family: var(--lks-naglowek);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lks-szary);
}

.lks-koszyk__kwota {
	font-weight: 700;
	font-size: 0.98rem;
}

/* ============================================================
   NAWIGACJA — pełnoszerokościowa, ciemna, z czerwonym akcentem
   ============================================================ */

.lks-nawigacja {
	background: var(--lks-czerwien);
	position: relative;
	z-index: 50;
}

.lks-nawigacja__wnetrze {
	max-width: var(--lks-szer);
	margin: 0 auto;
	padding: 0 24px;
}

.lks-nawigacja ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.lks-nawigacja li {
	position: relative;
	margin: 0;
}

.lks-nawigacja a {
	display: block;
	padding: 15px 22px;
	font-family: var(--lks-naglowek);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	transition: background 0.15s;
}

.lks-nawigacja > .lks-nawigacja__wnetrze > ul > li > a::after {
	content: '';
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 8px;
	height: 2px;
	background: var(--lks-zloto);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.lks-nawigacja > .lks-nawigacja__wnetrze > ul > li:hover > a::after,
.lks-nawigacja > .lks-nawigacja__wnetrze > ul > li.current-menu-item > a::after {
	transform: scaleX(1);
}

.lks-nawigacja li:hover > a {
	background: rgba(0, 0, 0, 0.16);
}

/* podmenu */
.lks-nawigacja ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--lks-czern);
	flex-direction: column;
	box-shadow: var(--lks-cien-mocny);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.lks-nawigacja li:hover > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lks-nawigacja ul ul a {
	padding: 12px 20px;
	font-size: 0.94rem;
	letter-spacing: 0.06em;
	border-left: 3px solid transparent;
}

.lks-nawigacja ul ul li:hover > a {
	border-left-color: var(--lks-zloto);
	background: rgba(216, 48, 47, 0.35);
}

/* Wszystkie stany jawnie: Astra nadaje każdemu <button> tło globalnego koloru,
   które przy dotknięciu na telefonie zamieniało pasek menu w granatową belkę. */
.lks-nawigacja__przelacznik,
.lks-nawigacja__przelacznik:hover,
.lks-nawigacja__przelacznik:focus,
.lks-nawigacja__przelacznik:active {
	background: none;
	color: #fff;
}

.lks-nawigacja__przelacznik:focus-visible {
	outline: 2px solid var(--lks-zloto);
	outline-offset: -4px;
}

.lks-nawigacja__przelacznik {
	display: none;
	width: 100%;
	padding: 14px 0;
	background: none;
	border: none;
	color: #fff;
	font-family: var(--lks-naglowek);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	text-align: left;
}

/* ============================================================
   UKŁAD STRONY GŁÓWNEJ
   ============================================================ */

/* Strona lądowania (klubowa strona główna i strona sklepu) rządzi się swoimi
   prawami: hero zamiast nagłówka i sekcje na pełną szerokość okna. Klasę
   `lks-landing` dokłada motyw, gdy w treści strony jest którykolwiek hero —
   dawniej służył do tego `.home`, ale strona główna to teraz strona klubu,
   a sklep przeniósł się pod /sklep i musiał zachować ten sam układ. */

.lks-landing .entry-header,
.lks-landing .ast-archive-description {
	display: none;
}

.lks-landing .site-content .ast-container,
.lks-landing .entry-content > .ast-container {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

.lks-landing .site-main .ast-article-single,
.lks-landing .entry-content,
.lks-landing .site-content > .ast-container {
	padding: 0;
}

/* Hero ma przylegać do nawigacji, bez białej szczeliny.
   Selektor z #primary, bo Astra ustawia tu margin-top: 60px z wyższą
   specyficznością niż same klasy. */
.lks-landing .site-content,
.lks-landing .content-area,
.lks-landing #primary.content-area {
	padding-top: 0;
	margin-top: 0;
}

/* Astra ogranicza bezpośrednie dzieci .entry-content do 1200 px i centruje je —
   sekcje pełnoszerokościowe muszą to ograniczenie zdjąć (własny kontener
   wewnętrzny i tak centruje treść do --lks-szer). */
.lks-landing .entry-content > .lks-hero,
.lks-landing .entry-content > .lks-atuty,
.lks-landing .entry-content > .lksk-hero,
.lks-landing .entry-content > .lks-sekcja--kosc {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

/* Sekcje na białym tle zostają wyśrodkowane w kolumnie treści. */
.lks-landing .entry-content > .lks-sekcja:not(.lks-sekcja--kosc) {
	max-width: var(--lks-szer);
	margin-left: auto;
	margin-right: auto;
}

/* Bloki strony klubu wstawiane shortcode'ami trafiają wprost do .entry-content,
   a Astra rozciąga bezpośrednie dzieci na całą kolumnę — te mają zostać
   w czytelnej szerokości razem z tekstem. */
.lks-landing .entry-content > .lksk-sekcje,
.lks-landing .entry-content > .lksk-kadra,
.lks-landing .entry-content > .lksk-aktualnosci,
.lks-landing .entry-content > .lksk-sponsorzy,
.lks-landing .entry-content > .lksk-grafik,
.lks-landing .entry-content > .lksk-sklep-pasek,
.lks-landing .entry-content > h2,
.lks-landing .entry-content > h3,
.lks-landing .entry-content > p,
.lks-landing .entry-content > ul,
.lks-landing .entry-content > ol {
	max-width: var(--lks-szer);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* ============================================================
   HERO
   ============================================================ */

.lks-hero {
	position: relative;
	background:
		radial-gradient(circle at 78% 28%, rgba(216, 48, 47, 0.42) 0%, transparent 52%),
		linear-gradient(135deg, var(--lks-czern) 0%, var(--lks-grafit) 62%, #2c1512 100%);
	color: #fff;
	overflow: hidden;
}

/* Diagonalny akcent w barwach klubu — dynamika sportowa. Zakotwiczony przy
   prawej krawędzi i ograniczony clampem, żeby na szerokich ekranach nie
   rozlewał się na kolumnę tekstu, a na wąskich nie znikał do paska. */
.lks-hero::after {
	content: '';
	position: absolute;
	right: -8%;
	top: -35%;
	width: clamp(300px, 38%, 520px);
	height: 190%;
	background: linear-gradient(180deg, var(--lks-czerwien) 0%, var(--lks-czerwien-ciemna) 100%);
	transform: skewX(-13deg);
	opacity: 0.16;
}

/* Druga kolumna ma szerokość herbu, nie ułamek siatki — dzięki temu nie
   powstaje martwe pole po bokach grafiki. */
.lks-hero__wnetrze {
	position: relative;
	z-index: 2;
	max-width: var(--lks-szer);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 76px) 24px clamp(56px, 7vw, 84px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(160px, 21vw, 280px);
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
}

.lks-hero__nad {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--lks-naglowek);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--lks-zloto);
	margin-bottom: 18px;
}

.lks-hero__nad::before {
	content: '';
	width: 42px;
	height: 3px;
	background: var(--lks-czerwien);
}

.lks-hero h1 {
	color: #fff;
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	text-transform: uppercase;
	margin: 0 0 18px;
	text-wrap: balance;
}

.lks-hero h1 em {
	font-style: normal;
	color: var(--lks-czerwien-jasna);
}

.lks-hero p {
	font-size: 1.12rem;
	color: rgba(255, 255, 255, 0.78);
	max-width: 54ch;
	margin: 0 0 30px;
}

.lks-hero__herb {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.45));
}

.lks-przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ============================================================
   PRZYCISKI
   ============================================================ */

.lks-btn,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 30px;
	background: var(--lks-czerwien);
	color: #fff;
	font-family: var(--lks-naglowek);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--lks-czerwien);
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.16s, border-color 0.16s, transform 0.16s;
	line-height: 1.2;
}

.lks-btn:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--lks-czerwien-ciemna);
	border-color: var(--lks-czerwien-ciemna);
	color: #fff;
	transform: translateY(-2px);
}

.lks-btn--obrys {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.lks-btn--obrys:hover {
	background: #fff;
	border-color: #fff;
	color: var(--lks-czern);
}

/* ============================================================
   SEKCJE
   ============================================================ */

.lks-sekcja {
	max-width: var(--lks-szer);
	margin: 0 auto;
	padding: 66px 24px;
}

.lks-sekcja--kosc {
	max-width: none;
	background: var(--lks-kosc);
}

.lks-sekcja--kosc > * {
	max-width: var(--lks-szer);
	margin-left: auto;
	margin-right: auto;
}

.lks-naglowek-sekcji {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 34px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--lks-szary-jasny);
}

.lks-naglowek-sekcji h2 {
	margin: 0;
	position: relative;
	padding-left: 18px;
}

.lks-naglowek-sekcji h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.1em;
	bottom: 0.16em;
	width: 5px;
	background: var(--lks-czerwien);
}

.lks-naglowek-sekcji a {
	font-family: var(--lks-naglowek);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Ciemniejsza czerwień, bo jasna dawała na kości słoniowej 4,36:1 —
	   poniżej progu WCAG AA dla drobnego tekstu. */
	color: var(--lks-czerwien-ciemna);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s;
}

.lks-naglowek-sekcji a:hover {
	border-bottom-color: var(--lks-czerwien-ciemna);
}

/* ============================================================
   KAFLE STREF / KATEGORII
   ============================================================ */

/* min(300px, 100%) zamiast samego 300px — na ekranie 320 px kolumna o sztywnej
   podłodze wychodziła poza kontener i strona dostawała poziomy pasek przewijania. */
.lks-strefy {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 22px;
}

.entry-content a.lks-strefa,
.lks-strefa {
	position: relative;
	display: block;
	min-height: 260px;
	padding: 32px 30px;
	border-radius: 4px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: var(--lks-czern);
	isolation: isolate;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.entry-content a.lks-strefa:hover,
.lks-strefa:hover {
	transform: translateY(-4px);
	box-shadow: var(--lks-cien-mocny);
	color: #fff;
	text-decoration: none;
}

.lks-strefa::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease;
}

.lks-strefa:hover::before {
	transform: scale(1.05);
}

.lks-strefa::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(160deg, rgba(20, 17, 15, 0.42) 0%, rgba(20, 17, 15, 0.88) 74%);
}

.lks-strefa--zawodnik::before {
	background-image: linear-gradient(140deg, #1d4d2b 0%, #0d2716 100%);
}

.lks-strefa--kibic::before {
	background-image: linear-gradient(140deg, var(--lks-czerwien) 0%, #5c1210 100%);
}

.lks-strefa__etykieta {
	display: inline-block;
	padding: 5px 12px;
	background: var(--lks-czerwien);
	font-family: var(--lks-naglowek);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.lks-strefa h2,
.lks-strefa h3 {
	color: #fff;
	font-size: 2rem;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.lks-strefa p {
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 22px;
	max-width: 42ch;
	font-size: 0.98rem;
}

.lks-strefa__wiecej {
	position: absolute;
	left: 30px;
	bottom: 28px;
	font-family: var(--lks-naglowek);
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lks-zloto);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.lks-strefa:hover .lks-strefa__wiecej {
	gap: 14px;
}

.lks-strefa__wiecej span {
	transition: gap 0.2s;
}

/* Podkategorie — mniejsze kafle dyscyplin */
.lks-dyscypliny {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
	margin-top: 22px;
}

.entry-content a.lks-dyscyplina,
.lks-dyscyplina {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px;
	background: var(--lks-bialy);
	border: 1px solid var(--lks-szary-jasny);
	border-left: 4px solid var(--lks-czerwien);
	border-radius: 3px;
	text-decoration: none;
	color: var(--lks-czern);
	font-family: var(--lks-naglowek);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}

.entry-content a.lks-dyscyplina:hover,
.lks-dyscyplina:hover {
	transform: translateX(3px);
	box-shadow: var(--lks-cien);
	color: var(--lks-czerwien);
	text-decoration: none;
}

.lks-dyscyplina::after {
	content: '→';
	color: var(--lks-czerwien);
	font-size: 1.2rem;
}

/* ============================================================
   KARTY PRODUKTÓW (WooCommerce)
   ============================================================ */

.woocommerce ul.products {
	--lks-kolumny: repeat(auto-fill, minmax(200px, 1fr));
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
}

/* Astra betonuje siatkę na cztery kolumny regułą
   `.woocommerce ul.products:not(.elementor-grid) { grid-template-columns: repeat(4, 1fr) }`
   (specyficzność 0,3,1), przez co przy 993 px — gdy dochodzi jeszcze sidebar
   filtrów — karty ściskały się do 149 px, węziej niż na tablecie. Powtarzamy
   selektor Astry z dodatkowym :not() (0,4,1), żeby wygrać niezależnie od
   kolejności ładowania arkuszy; siatek WooCommerce Blocks i tak nie ruszamy.
   Listę torów trzymamy w zmiennej, żeby media queries nie musiały powtarzać
   całego selektora. */
.woocommerce ul.products:not(.elementor-grid):not(.wc-block-grid__products),
.woocommerce-page ul.products:not(.elementor-grid):not(.wc-block-grid__products) {
	grid-template-columns: var(--lks-kolumny);
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	background: var(--lks-bialy);
	border: 1px solid var(--lks-szary-jasny);
	border-radius: 3px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--lks-czerwien);
	box-shadow: var(--lks-cien-mocny);
	transform: translateY(-4px);
}

.woocommerce ul.products li.product a img {
	margin: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--lks-kosc);
	transition: transform 0.35s ease;
}

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

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	overflow: hidden;
}

.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .star-rating {
	margin-left: 16px;
	margin-right: 16px;
}

.woocommerce ul.products li.product .ast-woo-product-category {
	margin-top: 14px;
	font-family: var(--lks-naglowek);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lks-czerwien);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--lks-naglowek);
	font-size: 1.22rem !important;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	padding: 4px 0 0 !important;
	color: var(--lks-czern);
}

.woocommerce ul.products li.product .price {
	font-family: var(--lks-naglowek);
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--lks-czern);
	margin-top: 6px;
	margin-bottom: 14px;
}

.woocommerce ul.products li.product .price del {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--lks-szary);
	opacity: 1;
	margin-right: 8px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--lks-czerwien);
}

/* Selektor z body, bo Astra ustawia tu własny margin-top z wyższą specyficznością
   niż sama klasa — bez tego przycisk nie schodzi do dołu karty i w rzędzie,
   gdzie jeden produkt ma informację o najniższej cenie z 30 dni, przyciski
   rozjeżdżają się o wysokość tego komunikatu. */
/* Astra owija treść karty w .astra-shop-summary-wrap, który domyślnie jest
   blokiem — a `margin-top: auto` na przycisku działa tylko wtedy, gdy jego
   BEZPOŚREDNI rodzic jest kontenerem flex. Bez tego w rzędzie, gdzie jeden
   produkt ma informację o najniższej cenie z 30 dni, przyciski stoją na
   różnych wysokościach. */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

body.woocommerce-js ul.products li.product .button,
body.woocommerce ul.products li.product .button,
body.woocommerce-page ul.products li.product .button,
.woocommerce ul.products li.product .button {
	margin-top: auto !important;
	margin-bottom: 16px;
	margin-left: auto;
	margin-right: auto;
	width: calc(100% - 32px);
	font-size: 0.88rem;
	padding: 12px 16px;
}

/* Cena i komunikat Omnibus trzymają wspólny blok, żeby wysokość karty rosła
   w jednym miejscu, a nie przesuwała przycisku. */
.woocommerce ul.products li.product .price {
	margin-bottom: 8px;
}

.woocommerce ul.products li.product .lks-omnibus {
	margin: 0 16px 12px;
	min-height: 0;
}

/* Badge promocji */
.woocommerce span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
	min-width: auto;
	min-height: auto;
	padding: 6px 12px;
	background: var(--lks-czerwien);
	color: #fff;
	font-family: var(--lks-naglowek);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 2px;
	line-height: 1.2;
	z-index: 3;
}

.woocommerce ul.products li.product {
	position: relative;
}

/* ============================================================
   WYSZUKIWARKA — podpowiedzi
   ============================================================ */

.lks-podpowiedzi {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--lks-szary-jasny);
	border-radius: 3px;
	box-shadow: var(--lks-cien-mocny);
	z-index: 200;
	max-height: 60vh;
	overflow-y: auto;
}

.lks-podpowiedz {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
	color: var(--lks-czern);
	border-bottom: 1px solid var(--lks-kosc);
	transition: background 0.12s;
}

.lks-podpowiedz:last-child {
	border-bottom: none;
}

.lks-podpowiedz:hover,
.lks-podpowiedz:focus {
	background: var(--lks-kosc);
	color: var(--lks-czern);
}

.lks-podpowiedz img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 2px;
	background: var(--lks-kosc);
	flex-shrink: 0;
}

.lks-podpowiedz__tresc {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.lks-podpowiedz__nazwa {
	font-family: var(--lks-naglowek);
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.15;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lks-podpowiedz__cena {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--lks-czerwien);
}

.lks-podpowiedzi__pusto {
	margin: 0;
	padding: 16px;
	color: var(--lks-szary);
	font-size: 0.92rem;
}

/* ============================================================
   PODKATEGORIE (rozdroże: dyscypliny / grupy odzieży)
   ============================================================ */

.lks-podkategorie {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin: 0 0 34px;
}

.lks-podkategoria {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 180px;
	padding: 22px;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(150deg, var(--lks-grafit), var(--lks-czern));
	background-size: cover;
	background-position: center;
	transition: transform 0.2s, box-shadow 0.2s;
	isolation: isolate;
}

.lks-podkategoria::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(20, 17, 15, 0.25) 0%, rgba(20, 17, 15, 0.85) 100%);
}

.lks-podkategoria:hover {
	transform: translateY(-4px);
	box-shadow: var(--lks-cien-mocny);
	color: #fff;
}

.lks-podkategoria__nazwa {
	font-family: var(--lks-naglowek);
	font-size: 1.55rem;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.1;
}

.lks-podkategoria__ile {
	font-size: 0.88rem;
	color: var(--lks-zloto);
	font-weight: 600;
	margin-top: 4px;
}

.lks-podpowiedz-kategorii {
	color: var(--lks-szary);
	font-size: 0.95rem;
}

/* ============================================================
   UKŁAD SKLEPU Z FILTRAMI
   ============================================================ */

.lks-sklep-uklad {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 34px;
	align-items: start;
}

.lks-sklep-tresc {
	min-width: 0;
}

.lks-filtry {
	position: sticky;
	top: 20px;
	background: var(--lks-kosc);
	border: 1px solid var(--lks-szary-jasny);
	border-radius: 4px;
	padding: 20px;
}

.lks-filtry__naglowek {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--lks-czerwien);
}

.lks-filtry__naglowek h2 {
	margin: 0;
	font-size: 1.2rem;
	text-transform: uppercase;
}

.lks-filtry__wyczysc {
	font-size: 0.84rem;
	color: var(--lks-czerwien);
	text-decoration: underline;
}

.lks-filtr-grupa {
	margin-bottom: 22px;
}

.lks-filtr-grupa h3 {
	font-size: 0.94rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lks-szary);
	margin: 0 0 10px;
}

.lks-filtr-rozmiary {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.lks-filtr-rozmiar {
	position: relative;
	cursor: pointer;
	margin: 0;
}

.lks-filtr-rozmiar input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.lks-filtr-rozmiar span {
	display: inline-block;
	padding: 7px 11px;
	background: #fff;
	border: 1px solid var(--lks-szary-jasny);
	border-radius: 3px;
	font-family: var(--lks-naglowek);
	font-size: 0.92rem;
	font-weight: 700;
	transition: border-color 0.14s, background 0.14s, color 0.14s;
}

.lks-filtr-rozmiar:hover span {
	border-color: var(--lks-czerwien);
}

.lks-filtr-rozmiar input:checked + span {
	background: var(--lks-czerwien);
	border-color: var(--lks-czerwien);
	color: #fff;
}

.lks-filtr-rozmiar input:focus-visible + span {
	outline: 2px solid var(--lks-czern);
	outline-offset: 2px;
}

.lks-filtr-cena {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lks-filtr-cena input {
	width: 100%;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--lks-szary-jasny);
	border-radius: 3px;
	background: #fff;
	font-size: 0.94rem;
}

.lks-filtr-przelacznik {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 8px;
	cursor: pointer;
	font-size: 0.95rem;
}

.lks-filtr-przelacznik input {
	width: 17px;
	height: 17px;
	accent-color: var(--lks-czerwien);
}

.lks-filtry__zastosuj {
	width: 100%;
	font-size: 0.9rem;
	padding: 12px;
}

/* ============================================================
   PASEK ZAUFANIA
   ============================================================ */

.lks-atuty {
	background: var(--lks-czern);
	color: #fff;
}

.lks-atuty__siatka {
	max-width: var(--lks-szer);
	margin: 0 auto;
	padding: 34px 24px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 26px;
}

.lks-atut {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.lks-atut__ikona {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: rgba(216, 48, 47, 0.18);
	border: 1px solid rgba(232, 205, 109, 0.35);
	border-radius: 3px;
	font-size: 1.15rem;
}

.lks-atut h3 {
	color: #fff;
	font-size: 1.05rem;
	margin: 0 0 3px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.lks-atut p {
	margin: 0;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.68);
	line-height: 1.45;
}

/* ============================================================
   STOPKA
   ============================================================ */

.lks-stopka {
	background: var(--lks-grafit);
	color: rgba(255, 255, 255, 0.72);
	border-top: 4px solid var(--lks-czerwien);
}

.lks-stopka__siatka {
	max-width: var(--lks-szer);
	margin: 0 auto;
	padding: 52px 24px 34px;
	display: grid;
	/* Kolumn bywa cztery albo pięć — sklep dokłada swoją tylko wtedy, gdy działa. */
	grid-template-columns: 1.4fr repeat(auto-fit, minmax(150px, 1fr));
	gap: 36px;
}

.lks-stopka h3 {
	color: #fff;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}

.lks-stopka ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lks-stopka li {
	margin-bottom: 9px;
}

.lks-stopka a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.15s;
}

.lks-stopka a:hover {
	color: var(--lks-zloto);
}

.lks-stopka__marka {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.lks-stopka__marka img {
	height: 62px;
	width: auto;
	flex-shrink: 0;
}

.lks-stopka__dol {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 18px 24px;
	text-align: center;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   STRONY SKLEPU — nagłówek archiwum, karta produktu
   ============================================================ */

.woocommerce-products-header,
.ast-woocommerce-container .woocommerce-breadcrumb {
	max-width: var(--lks-szer);
	margin-left: auto;
	margin-right: auto;
}

/* Astra maluje okruszki na #777 (4,48:1 na bieli — poniżej progu WCAG AA).
   Selektor z body.woocommerce-js bije jej `.woocommerce-js .woocommerce-breadcrumb`. */
body.woocommerce-js .woocommerce-breadcrumb,
body.woocommerce-js .woocommerce-breadcrumb a {
	color: var(--lks-szary);
}

.woocommerce-products-header__title {
	text-transform: uppercase;
}

.woocommerce div.product .product_title {
	text-transform: uppercase;
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--lks-naglowek);
	font-size: 2rem;
	font-weight: 800;
	color: var(--lks-czern);
}

.woocommerce div.product p.price ins {
	text-decoration: none;
	color: var(--lks-czerwien);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--lks-czerwien);
}

/* Konfigurator personalizacji dziedziczy typografię klubu */
.lks-konfigurator {
	border-color: var(--lks-szary-jasny);
	background: var(--lks-kosc);
	border-radius: 4px;
}

.lks-konfigurator .lks-tytul,
.lks-konfigurator .lks-etykieta-siatki,
.lks-konfigurator .lks-pole-nazwisko label {
	font-family: var(--lks-naglowek);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.lks-konfigurator .lks-kafelek {
	font-family: var(--lks-naglowek);
	font-size: 1.02rem;
}

/* :not(.lks-wybrany) — bez tego podświetlenie hovera wygrywało specyficznością
   ze stanem wybranym i numer robił się biały na białym. */
.lks-konfigurator .lks-kafelek:hover:not(.lks-zajety):not(.lks-wybrany) {
	border-color: var(--lks-czerwien);
	background: rgba(216, 48, 47, 0.07);
}

.lks-konfigurator .lks-kafelek.lks-wybrany,
.lks-konfigurator .lks-kafelek.lks-wybrany:hover {
	background: var(--lks-czerwien);
	border-color: var(--lks-czerwien);
	color: #fff;
}

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */

@media (max-width: 992px) {
	/* Filtry nad listą produktów — sidebar nie mieści się obok siatki. */
	.lks-sklep-uklad {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Rozwinięty panel filtrów zajmował 444 px, więc pierwszy produkt wypadał
	   dopiero po dwóch ekranach przewijania. Prawdziwej rozwijanki nie da się
	   zrobić samym CSS-em — markup (functions.php) nie ma ani <details>, ani
	   checkboxa, ani kotwicy pod :target, a schowanie zawartości pod
	   :focus-within odcięłoby ją od klawiatury i dotyku, bo nie zostałoby
	   nic, co można sfokusować. Zamiast chować, spłaszczamy panel do jednego
	   paska przewijanego w poziomie: wszystkie kontrolki zostają w drzewie
	   i w kolejności tabulacji, a przeglądarka sama dosuwa je do widoku. */
	.lks-filtry {
		position: static;
		padding: 10px 12px;
		/* Bez tego element siatki rozdyma się do szerokości treści i pasek
		   rozpycha stronę zamiast przewijać się w środku. */
		min-width: 0;
	}

	.lks-filtry form {
		display: flex;
		align-items: center;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	.lks-filtry form > * {
		flex: 0 0 auto;
	}

	.lks-filtry__naglowek {
		margin-bottom: 0;
		padding-bottom: 0;
		padding-right: 14px;
		border-bottom: none;
		border-right: 2px solid var(--lks-czerwien);
		gap: 12px;
	}

	.lks-filtr-grupa {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 0;
	}

	.lks-filtr-grupa h3 {
		margin: 0;
		white-space: nowrap;
	}

	.lks-filtr-rozmiary {
		flex-wrap: nowrap;
	}

	.lks-filtr-cena input {
		width: 76px;
	}

	.lks-filtr-przelacznik {
		margin-bottom: 0;
		white-space: nowrap;
	}

	.lks-filtry__zastosuj {
		width: auto;
		white-space: nowrap;
	}

	.lks-header__wnetrze {
		grid-template-columns: auto 1fr;
		gap: 18px;
	}

	/* Koszyk siedzi w rozciągliwej kolumnie 1fr, więc bez dosunięcia lądował
	   tuż przy marce, z pustką po prawej — a przy spuchniętym herbie nachodził
	   na nazwę sklepu. */
	.lks-koszyk {
		justify-self: end;
	}

	.lks-szukaj {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: none;
	}

	.lks-hero__wnetrze {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}

	.lks-hero__nad {
		justify-content: center;
	}

	.lks-hero p {
		margin-left: auto;
		margin-right: auto;
	}

	.lks-przyciski {
		justify-content: center;
	}

	/* Ukośny pas zaprojektowano pod układ dwukolumnowy — nad jedną kolumną
	   przecinałby tekst, więc go wygaszamy. */
	.lks-hero::after {
		display: none;
	}

	.lks-hero__herb {
		grid-row: 1;
		justify-self: center;
		width: clamp(120px, 30vw, 168px);
	}

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

@media (max-width: 768px) {
	.lks-pasek-info__wnetrze {
		justify-content: center;
	}

	.lks-pasek-info__linki {
		display: none;
	}

	.lks-marka__nazwa {
		font-size: 1.25rem;
	}

	.lks-header .lks-marka__herb {
		height: 50px;
		width: auto;
	}

	.lks-koszyk__opis {
		display: none;
	}

	.lks-nawigacja__przelacznik {
		display: block;
	}

	.lks-nawigacja ul {
		display: none;
		flex-direction: column;
		padding-bottom: 10px;
	}

	.lks-nawigacja.otwarta ul {
		display: flex;
	}

	.lks-nawigacja ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(0, 0, 0, 0.22);
	}

	.lks-naglowek-sekcji {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.woocommerce ul.products {
		gap: 14px;
	}

	.lks-podkategorie {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 12px;
	}

	.lks-podkategoria {
		min-height: 130px;
		padding: 16px;
	}

	.lks-podkategoria__nazwa {
		font-size: 1.2rem;
	}

	.lks-stopka__siatka {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* Na telefonie liczbę kolumn ustawiamy wprost: przy 320 px żadna sensowna
   podłoga auto-fill nie daje dwóch kolumn, a jedna karta na rząd zabiłaby
   gęstość przeglądania (przed poprawką telefon miał dwie kolumny i tak zostaje). */
@media (max-width: 480px) {
	.woocommerce ul.products {
		--lks-kolumny: repeat(2, minmax(0, 1fr));
	}
}

/* ============================================================
   CELE DOTYKOWE — minimum 44x44 px (WCAG 2.5.5)
   Blok trzymamy na końcu arkusza, żeby przy równej specyficzności
   wygrywał z regułami bazowymi i wcześniejszymi media queries.
   ============================================================ */

@media (pointer: coarse), (max-width: 992px) {
	/* Astra tnie tu padding do 10px selektorem o specyficzności 0,5,2 —
	   min-height jest bezkolizyjny i osiąga ten sam cel. */
	.woocommerce div.product form.cart .single_add_to_cart_button {
		min-height: 48px;
	}

	.lks-filtr-rozmiar span {
		padding: 11px 14px;
		min-width: 44px;
		text-align: center;
	}

	/* Bez zmiany display, żeby nie zgubić trójkąta rozwijania. */
	.lks-panel-wolnych > summary {
		min-height: 44px;
		padding: 11px 0;
	}

	/* Same linki miały 19 px wysokości; odstęp z listy do celu dotykowego się
	   nie liczy, więc powiększamy pudełko linku, a nie krój. */
	.lks-stopka li a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.lks-stopka li {
		margin-bottom: 0;
	}
}


/* ============================================================
   STRONA KLUBU — nagłówek i stopka w wersji klubowej

   Sklep i strona klubu dzielą ten sam pasek, herb i przełącznik menu.
   Różnica jest tylko po prawej stronie nagłówka: sklep ma tam wyszukiwarkę
   i koszyk, klub — dwa skróty, po które ludzie tu przychodzą.
   ============================================================ */

.lks-header--klub .lks-header__wnetrze {
	grid-template-columns: auto 1fr;
}

.lks-header__akcje {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.lks-header__akcje .lks-btn {
	padding: 11px 20px;
	font-size: 0.95rem;
	white-space: nowrap;
}

/* Wariant „obrys” powstał dla ciemnego hero i ma białą treść — na białym
   nagłówku byłby niewidzialny. */
.lks-header__akcje .lks-btn--obrys {
	color: var(--lks-czern);
	border-color: var(--lks-szary-jasny);
}

.lks-header__akcje .lks-btn--obrys:hover,
.lks-header__akcje .lks-btn--obrys:focus {
	background: var(--lks-czern);
	border-color: var(--lks-czern);
	color: #fff;
}

.lks-stopka__spolecznosciowe {
	margin: 14px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.lks-stopka__spolecznosciowe a {
	font-weight: 600;
	border-bottom: 2px solid var(--lks-zloto);
	padding-bottom: 1px;
}

/* Wpis aktualności i strony klubu czytają się jak tekst, a nie jak listing —
   dajemy im szerokość kolumny czytelnej, tak jak stronom regulaminowym. */
.lksk-wpis__tresc {
	max-width: 74ch;
}

@media (max-width: 900px) {
	.lks-header__dolacz {
		display: none;
	}
}

@media (max-width: 600px) {
	.lks-header--klub .lks-header__wnetrze {
		grid-template-columns: auto auto;
		gap: 12px;
	}

	.lks-header__akcje .lks-btn {
		padding: 9px 14px;
		font-size: 0.85rem;
	}
}

/* ============================================================
   AKTUALNOŚCI KLUBU

   Astra traktuje wpisy jak blog: inne tło strony niż na resztę
   witryny, niebieskie linki i karta z cieniem. Sprowadzamy to
   do tego samego wyglądu, co pozostałe podstrony klubu.
   ============================================================ */

body.blog,
body.archive,
body.single-post,
body.search {
	background-color: var(--lks-bialy);
}

.single-post .ast-article-single,
.blog .ast-article-post {
	background: transparent;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

/* Linki wpisane w treści (bez własnej klasy) w barwach klubu, nie w domyślnym
   niebieskim Astry. `:where()` nie podnosi wagi selektora, więc kafle,
   przyciski i dokumenty — które klasy mają — zachowują swoje kolory. */
.entry-content a:where(:not([class])) {
	color: var(--lks-czerwien);
	text-underline-offset: 2px;
}

.entry-content a:where(:not([class])):hover,
.entry-content a:where(:not([class])):focus {
	color: var(--lks-czerwien-ciemna);
}

.single-post .entry-title {
	font-family: var(--lks-naglowek);
	text-transform: uppercase;
	line-height: 1.05;
}

/* Astra koloruje datę regułą `.entry-meta *` (globalny błękit), więc samo
   pomalowanie kontenera nic nie daje — trzeba trafić w te same elementy. */
.single-post .entry-meta,
.single-post .entry-meta * {
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lks-szary);
}

.single-post .entry-meta a,
.single-post .entry-meta a * {
	color: var(--lks-czerwien);
}