/**
 * Hockey Store — warstwa marketplace (naglowek, strona glowna, katalog, stopka).
 * ==============================================================================
 * Przepisany 09.08.2026 podczas audytu spojnosci.
 *
 * CO SIE ZMIENILO WZGLEDEM POPRZEDNIEJ WERSJI
 * -------------------------------------------
 * Plik narosl przez cztery kolejne latki dopisywane na koncu ("Visual system
 * 0.8", "Layout audit 0.9", "Layout audit 1.0", audyt 06.08). Efekt: 51 z 198
 * selektorow bylo zadeklarowanych po kilka razy, a wczesniejsze deklaracje
 * w ogole nie dochodzily do skutku. Przyklady martwego kodu, ktory usunieto:
 *
 *   .hs-header__main   — 5 deklaracji. Warianty @1020 i @782 NIGDY nie dzialaly:
 *                        pozniejsza regula bez media query nadpisywala siatke
 *                        przy kazdej szerokosci, wiec mobilny uklad naglowka
 *                        (logo + akcje w jednym rzedzie, wyszukiwarka pod spodem)
 *                        byl napisany, ale nieaktywny. Teraz dziala.
 *   .hs-hero           — 5 deklaracji; liczyla sie mieszanka trzech ostatnich.
 *   .hs-card-meta      — 4 deklaracje ze sprzecznymi wysokosciami:
 *                        min-height:54px -> height:70px -> height:auto+58px.
 *   .hs-benefits > *   — 5 deklaracji.
 *   .hs-loop-cta       — 3 deklaracje; jedna ustawiala ellipsis, nastepna go zdejmowala.
 *
 * Teraz kazdy selektor wystepuje RAZ. Zmiana komponentu to zmiana w jednym
 * miejscu, a nie szukanie, ktora z pieciu kopii wygrywa.
 *
 * TYPOGRAFIA — uwaga na wczesniejsza konwersje
 * -------------------------------------------
 * Poprzednia zamiana px -> rem byla masowa i splaszczyla hierarchie: 12px, 13px
 * i 14px staly sie tym samym 0.875rem. Przez to nazwa kategorii i licznik
 * produktow pod nia mialy identyczny rozmiar, tak samo etykieta filtra i jej
 * licznik, a badge promocji zrownal sie z tekstem pomocniczym. Ten plik
 * rozdziela te poziomy z powrotem przez --hs-fs-xs (metadane) i --hs-fs-sm.
 *
 * ZASADY (DESIGN.md)
 * ------------------
 *   Typografia  — wylacznie tokeny --hs-fs-*. Sztywne px zabronione.
 *   Promienie   — 8px kontrolki, 10px karty, 16px panele, pill tylko badge.
 *   Odstepy     — skala 4/8/16/24/40/64 przez tokeny --hs-space-*.
 *   Breakpointy — WYLACZNIE 1024 / 782 / 600. Poprzednio bylo szesc.
 *
 * DLACZEGO TEN PLIK NIE JEST W @layer
 * -----------------------------------
 * WooCommerce Blocks, FiboSearch i Lumise nie uzywaja warstw, a style bez
 * warstwy wygrywaja ze stylami w warstwie. Duza czesc regul ponizej celowo
 * nadpisuje CSS tych wtyczek — po przeniesieniu do @layer przestalyby dzialac.
 * Patrz naglowek system.css i sekcja "CSS Architecture" w DESIGN.md.
 */

/* ============================================================
   1. TOKENY LOKALNE
   ============================================================ */

:root {
	--hs-market-width: min(1280px, calc(100% - 32px));
	--hs-panel-pad: 20px;
	--hs-edge: calc(max(16px, (100% - 1280px) / 2) + var(--hs-panel-pad));
}

@media (max-width: 782px) {
	:root {
		--hs-market-width: min(100% - 20px, 1280px);
		--hs-panel-pad: 16px;
	}
}

/* ============================================================
   2. BAZA DOKUMENTU
   ============================================================ */

/* Tlo strony: #F4F7FA z palety. Poprzednio body dziedziczylo
   --hs-border-soft (#EEF3F6), czyli kolor przeznaczony na separatory
   wewnatrz komponentu — poza paleta jako tlo strony. */
body {
	background: var(--hs-ice);
	font-size: var(--hs-fs-body);
	line-height: var(--hs-lh-body);
}

/* ============================================================
   3. NAGLOWEK
   ============================================================ */

/* Wspolne wciecie poziome: logo, wyszukiwarka, menu kategorii i naglowki
   sekcji stoja w tej samej pionowej linii. */
.hs-topbar,
.hs-header,
.hs-category-nav,
.hs-footer {
	padding-inline: var(--hs-edge) !important;
}

/* theme.json ustawia layout.contentSize na 820px (szerokosc kolumny tekstu
   w artykulach). Grupy w pasku i stopce dziedziczyly te 820px, przez co byly
   wciete o ~210px wzgledem logo i menu nad nimi. */
.hs-topbar > .wp-block-group,
.hs-topbar > .wp-block-group > *,
.hs-footer > .wp-block-columns,
.hs-footer > .wp-block-group,
.hs-footer > .wp-block-separator {
	width: 100%;
	max-width: none !important;
	margin-left: 0;
	margin-right: 0;
}

/* --- Pasek informacyjny --- */
.hs-topbar {
	min-height: 28px;
	padding-block: var(--hs-space-xs);
	font-size: var(--hs-fs-xs);
}

.hs-topbar > .wp-block-group {
	min-height: 20px;
	gap: var(--hs-space-md);
}

.hs-topbar .wp-block-navigation {
	gap: var(--hs-space-md);
}

/* --- Rzad glowny --- */
.hs-header {
	padding-block: 10px;
	border-bottom: 0;
	box-shadow: 0 1px 4px rgba(20, 33, 61, .1);
}

/* Trzy komorki, bo naglowek ma trzech potomkow: tytul, wyszukiwarka, akcje
   (konto i koszyk siedza razem w .hs-header__actions). Wczesniej siatka
   deklarowala cztery kolumny — pozostalosc po czasach, gdy konto i koszyk
   byly osobnym rodzenstwem. Pusta czwarta kolumna dokladala 12px odstepu
   przy prawej krawedzi. */
.hs-header__main {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: none !important;
}

.hs-header .wp-block-site-title {
	margin: 0;
	font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.hs-header .wp-block-site-title a {
	color: var(--hs-navy);
	text-decoration: none;
}

/* --- Wyszukiwarka ---
   Najwieksza kontrolka naglowka wg DESIGN.md. Pole i wszystkie opakowania
   FiboSearch musza miec te sama wysokosc, inaczej input laduje przy gornej
   krawedzi 48-pikselowej komorki siatki. */
.hs-header .hs-search,
.hs-header .hs-search__field,
.hs-header .hs-search .dgwt-wcas-search-wrapp,
.hs-header .hs-search .dgwt-wcas-sf-wrapp,
.hs-search .dgwt-wcas-search-form {
	display: flex;
	width: 100%;
	min-width: 0;
	max-width: none;
	height: 48px;
	min-height: 48px;
	align-items: center;
	margin: 0;
}

.hs-header .hs-search form {
	display: flex;
	width: 100%;
	height: 48px;
	align-items: stretch;
	margin: 0;
}

.hs-search .dgwt-wcas-sf-wrapp > p {
	display: contents !important;
	margin: 0 !important;
}

.hs-search .dgwt-wcas-sf-wrapp br {
	display: none;
}

/* Pole: 16px zamiast wczesniejszych 15px — ponizej 16px iOS Safari
   powieksza cala strone przy wejsciu w pole. */
.hs-search .dgwt-wcas-search-input,
.hs-search input[type="search"] {
	height: 48px !important;
	min-height: 48px !important;
	border: 2px solid var(--hs-blue) !important;
	border-radius: var(--hs-radius-control) 0 0 var(--hs-radius-control) !important;
	background: var(--hs-white) !important;
	font-size: var(--hs-fs-body) !important;
	box-shadow: none !important;
}

.hs-search .dgwt-wcas-search-submit,
.hs-search button[type="submit"] {
	border-radius: 0 var(--hs-radius-control) var(--hs-radius-control) 0 !important;
	background-color: var(--hs-copper) !important;
	color: var(--hs-navy) !important;
}

/* --- Konto i koszyk --- */
.hs-account-nav a,
.wc-block-mini-cart__button,
.wc-block-customer-account__link {
	display: inline-flex;
	min-height: var(--hs-tap);
	align-items: center;
	gap: 7px;
	padding: 0 10px !important;
	border-radius: var(--hs-radius-control) !important;
	color: var(--hs-navy) !important;
	font-size: var(--hs-fs-sm);
	font-weight: var(--hs-fw-strong);
	text-decoration: none;
	white-space: nowrap;
}

.hs-account-nav a:hover,
.wc-block-mini-cart__button:hover,
.wc-block-customer-account__link:hover {
	background: var(--hs-ice);
}

.hs-header__actions {
	gap: var(--hs-space-xs);
	align-items: center;
}

.hs-header__actions .wp-block-woocommerce-customer-account,
.hs-header__actions .wc-block-mini-cart {
	margin: 0;
}

.wc-block-customer-account__account-icon {
	width: 22px;
	height: 22px;
}

.wc-block-mini-cart__amount {
	font-size: var(--hs-fs-sm);
	font-weight: var(--hs-fw-strong);
}

/* --- Nawigacja kategorii --- */
.hs-category-nav {
	height: 45px;
	min-height: 45px;
	padding-block: 0;
	overflow-x: auto;
	overflow-y: hidden;
	border-top: 1px solid var(--hs-border-soft);
	box-shadow: 0 1px 0 rgba(20, 33, 61, .05);
}

.hs-category-menu,
.hs-category-menu .wp-block-navigation__container {
	display: flex !important;
	width: max-content !important;
	max-width: none !important;
	height: var(--hs-tap);
	min-height: var(--hs-tap);
	margin: 0 !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 0 !important;
}

.hs-category-menu .wp-block-navigation-item {
	flex: 0 0 auto;
}

.hs-category-menu .wp-block-navigation-item__content {
	display: flex;
	min-height: var(--hs-tap);
	align-items: center;
	padding-inline: 15px;
	color: var(--hs-graphite);
	font-size: var(--hs-fs-sm);
	font-weight: var(--hs-fw-medium);
	text-decoration: none;
}

.hs-category-menu .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
	padding-left: 0;
	color: var(--hs-navy);
	font-weight: 800;
}

.hs-category-menu .wp-block-navigation-item__content:hover {
	color: var(--hs-blue);
}

/* ============================================================
   4. STRONA GLOWNA
   ============================================================ */

.hs-home {
	padding-bottom: var(--hs-space-lg);
}

/* --- Hero ---
   UWAGA: DESIGN.md podaje dla Hero H1 skale clamp(2.3rem, 5vw, 4.6rem).
   Tu obowiazuje mniejsza skala (--hs-fs-hero), bo hero jest zwarty (370px)
   i przy 4.6rem naglowek lamie sie na trzy wiersze, co narusza regule
   "hero miesci sie w pierwszym ekranie, naglowek maksymalnie dwa wiersze".
   Rozbieznosc jest swiadoma — opisana w raporcie z audytu do decyzji. */
.hs-hero {
	display: grid;
	width: var(--hs-market-width) !important;
	max-width: 1280px !important;
	min-height: 370px;
	margin: var(--hs-space-md) auto var(--hs-space-md) !important;
	padding: var(--hs-space-xl) var(--hs-panel-pad) !important;
	grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
	align-items: center;
	gap: var(--hs-space-xl);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--hs-radius-panel);
	background-color: var(--hs-navy);
	background-image: linear-gradient(90deg, rgba(9, 20, 40, .98) 0%, rgba(14, 31, 56, .92) 36%, rgba(20, 33, 61, .52) 58%, rgba(20, 33, 61, .06) 78%), url("../images/hero-puck.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	box-shadow: 0 8px 24px rgba(20, 33, 61, .18);
	color: var(--hs-white);
}

/* Uklad constrained WordPressa nadaje dzieciom margin-inline:auto. W polaczeniu
   z max-width:15ch na naglowku centrowalo to hero w jego kolumnie: tekst
   zaczynal sie 122px dalej niz naglowki sekcji pod nim i niz logo nad nim.
   !important jest konieczny — CSS ukladu WordPressa jest generowany
   do <head> po arkuszach motywu i ma rownie wysoka specyficznosc. */
.hs-hero > *,
.hs-hero > * > * {
	margin-inline: 0 !important;
}

.hs-hero h1 {
	max-width: 15ch;
	margin: 0;
	font-size: var(--hs-fs-hero);
	line-height: var(--hs-lh-hero);
	letter-spacing: -.04em;
	color: var(--hs-white);
	text-shadow: 0 2px 18px rgba(0, 0, 0, .22);
}

.hs-hero p {
	max-width: 58ch;
	margin: 12px 0 18px;
	font-size: var(--hs-fs-body);
	color: rgba(255, 255, 255, .88);
}

.hs-hero .wp-block-buttons {
	gap: var(--hs-space-sm);
}

.hs-hero .wp-element-button,
.hs-club-banner .wp-element-button {
	min-height: var(--hs-tap);
	padding: 9px var(--hs-space-md);
	border-radius: var(--hs-radius-control) !important;
	font-size: var(--hs-fs-sm);
}

.hs-hero .is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, .8);
	background: rgba(20, 33, 61, .25);
	color: var(--hs-white);
}

.hs-hero .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .12);
}

/* Wizual hero jest teraz zdjeciem w tle calej sekcji, wiec ten element
   trzyma juz tylko druga kolumne siatki. Dawny placeholder (kolo z napisem
   "H4F") zostal zdjety. */
.hs-hero__visual {
	min-height: 260px;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.hs-hero__visual::after {
	display: none;
}

/* --- Pasek korzysci --- */
.hs-benefits {
	width: var(--hs-market-width) !important;
	max-width: 1280px !important;
	margin: 0 auto var(--hs-space-md) !important;
	gap: 0;
	overflow: hidden;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-panel);
	background: var(--hs-white);
	box-shadow: var(--hs-shadow-panel);
}

.hs-benefits > * {
	position: relative;
	min-height: 70px;
	padding: 10px var(--hs-panel-pad);
	border-right: 1px solid var(--hs-border);
	background: var(--hs-white);
	font-size: var(--hs-fs-xs);
	line-height: var(--hs-lh-tight);
	text-align: left;
}

.hs-benefits > *:last-child {
	border-right: 0;
}

.hs-benefits > *::before {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	margin-bottom: var(--hs-space-sm);
	border-radius: 2px;
	background: var(--hs-copper);
}

.hs-benefits strong {
	display: block;
	margin-bottom: 3px;
	color: var(--hs-navy);
	font-size: var(--hs-fs-sm);
}

/* --- Sekcje --- */
.hs-section,
.hs-section--surface {
	width: var(--hs-market-width) !important;
	max-width: 1280px !important;
	margin: var(--hs-space-md) auto 0 !important;
	padding: var(--hs-panel-pad) !important;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-panel);
	background: var(--hs-white);
	box-shadow: var(--hs-shadow-panel);
}

.hs-section > * {
	max-width: none !important;
}

.hs-section > h2:first-child,
.hs-section > .wp-block-heading:first-child {
	margin-top: 0;
}

.hs-section h2 {
	margin-bottom: var(--hs-space-sm);
	font-size: var(--hs-fs-h2);
	line-height: var(--hs-lh-h2);
	letter-spacing: -.02em;
}

.hs-section h2 + p {
	margin-top: 0;
	margin-bottom: 14px;
	color: var(--hs-graphite);
	font-size: var(--hs-fs-sm);
}

/* Miedziany akcent naglowka lezy w gutterze, zeby tekst naglowka stal
   dokladnie w tej samej linii co tresc pod nim. Ujemny margines nie dziala:
   uklad constrained WordPressa nadpisuje margin-left z wyzsza specyficznoscia. */
.hs-section > h2:first-child,
.hs-main > h1,
.hs-shop > .wp-block-query-title {
	position: relative;
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

.hs-section > h2:first-child::before,
.hs-main > h1::before,
.hs-shop > .wp-block-query-title::before {
	content: "";
	position: absolute;
	top: .16em;
	bottom: .16em;
	left: -16px;
	width: 4px;
	border-radius: 2px;
	background: var(--hs-copper);
}

.hs-main > h1,
.hs-shop > .wp-block-query-title {
	margin: 0 0 var(--hs-space-md);
	font-size: var(--hs-fs-h1);
	line-height: var(--hs-lh-h1);
}

/* Sekcja bez produktow chowa sie sama, zamiast renderowac pusta rame. */
.hs-section:has(.woocommerce):not(:has(li.product)) {
	display: none;
}

.hs-section .wp-block-details {
	margin: 0;
	border-top: 1px solid var(--hs-border);
}

.hs-section .wp-block-details summary {
	display: flex;
	min-height: var(--hs-tap);
	align-items: center;
	padding: 0 var(--hs-space-xs);
	cursor: pointer;
	color: var(--hs-navy);
	font-weight: var(--hs-fw-strong);
}

.hs-section > .wp-block-columns:not(.hs-category-grid) > .wp-block-column {
	padding: var(--hs-space-md);
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-card);
	background: var(--hs-surface-alt);
}

/* --- Sekcja kategorii ze zdjeciem w tle --- */
.hs-category-section {
	background-color: var(--hs-white);
	background-image: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .94) 52%, rgba(255, 255, 255, .68) 100%), url("../images/categories-flatlay.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hs-category-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 10px 0 0;
}

.hs-category-grid + .hs-category-grid {
	margin-top: 10px;
}

.hs-category-tile {
	position: relative;
	min-height: 82px;
	padding: 13px 15px;
	align-items: center;
	border: 1px solid rgba(217, 226, 234, .92);
	border-radius: var(--hs-radius-card);
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 1px 3px rgba(20, 33, 61, .06);
	backdrop-filter: blur(3px);
	transition: border-color .15s ease, transform .15s ease;
}

.hs-category-tile:hover {
	transform: translateY(-1px);
	border-color: var(--hs-blue);
}

.hs-category-tile h3 {
	max-width: 16ch;
	margin: 0;
	font-size: var(--hs-fs-sm);
	line-height: var(--hs-lh-h3);
}

.hs-category-tile a {
	color: var(--hs-navy);
	text-decoration: none;
}

/* --- Kafelki kategorii ze zdjeciem ---
   Nazwa i licznik musza sie roznic wielkoscia: po masowej konwersji
   px -> rem oba mialy 0.875rem i kafelek czytal sie jak dwa rownowazne
   wiersze zamiast nazwy z podpisem. */
.hs-cat-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.hs-cat-tiles__item {
	margin: 0;
}

.hs-cat-tiles__link {
	display: flex;
	height: 100%;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-card);
	background: rgba(255, 255, 255, .94);
	color: var(--hs-navy);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.hs-cat-tiles__link:hover {
	transform: translateY(-2px);
	border-color: var(--hs-blue);
	box-shadow: var(--hs-shadow-hover);
}

.hs-cat-tiles__media {
	display: flex;
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--hs-radius-control);
	background: linear-gradient(145deg, var(--hs-surface-alt), var(--hs-border-soft));
}

.hs-cat-tiles__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
	mix-blend-mode: multiply;
}

.hs-cat-tiles__placeholder {
	width: 100%;
	height: 100%;
	background: var(--hs-border);
}

.hs-cat-tiles__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.hs-cat-tiles__name {
	font-size: var(--hs-fs-sm);
	font-weight: var(--hs-fw-strong);
	line-height: var(--hs-lh-h3);
}

.hs-cat-tiles__count {
	color: var(--hs-graphite);
	font-size: var(--hs-fs-xs);
}

/* --- Kroki personalizacji --- */
.hs-steps {
	grid-template-columns: .9fr 1.1fr;
	gap: var(--hs-space-lg);
}

.hs-steps ol {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hs-space-sm);
	margin: 0;
	padding: 0;
	counter-reset: hs-step;
	list-style: none;
}

.hs-steps li {
	min-height: 78px;
	padding: 12px;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-card);
	background: var(--hs-surface-alt);
	font-size: var(--hs-fs-sm);
}

/* --- Banner klubowy --- */
.hs-club-banner {
	display: flex;
	min-height: 260px;
	flex-direction: column;
	justify-content: center;
	padding: 26px 30px;
	border-radius: var(--hs-radius-panel);
	background-color: var(--hs-navy);
	background-image: linear-gradient(90deg, rgba(9, 20, 40, .98) 0%, rgba(20, 33, 61, .92) 42%, rgba(20, 33, 61, .56) 68%, rgba(20, 33, 61, .22) 100%), url("../images/clubs-locker-room.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hs-club-banner > * {
	width: min(590px, 100%);
	max-width: 590px !important;
	margin-left: 0 !important;
}

.hs-club-banner h2 {
	margin-top: 0;
	color: var(--hs-white);
}

.hs-club-banner p {
	color: rgba(255, 255, 255, .86);
}

/* ============================================================
   5. KATALOG I KARTY PRODUKTOWE
   ============================================================ */

.hs-main,
.hs-shop,
.hs-product {
	padding-top: var(--hs-space-lg);
}

.hs-shop-grid {
	gap: var(--hs-space-lg);
}

.hs-filters,
.hs-catalog-tools,
.hs-product-main,
.hs-product > .wp-block-woocommerce-product-details {
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-panel);
	background: var(--hs-white);
	box-shadow: var(--hs-shadow-panel);
}

.hs-filters {
	min-width: 0;
	padding: var(--hs-space-md);
	overflow-x: clip;
}

.hs-catalog-tools {
	min-height: 56px;
	padding: 10px 14px;
}

.hs-product-main {
	gap: var(--hs-space-xl);
	align-items: flex-start;
	padding: var(--hs-space-lg);
}

.hs-product-main > .wp-block-column:first-child {
	padding: 12px;
	border-radius: var(--hs-radius-card);
	background: linear-gradient(145deg, var(--hs-surface-alt), var(--hs-border-soft));
}

.hs-product-main .wp-block-woocommerce-product-price {
	margin-block: 10px 14px;
	color: var(--hs-navy);
	font-weight: 800;
}

.hs-product > .wp-block-woocommerce-product-details {
	margin-top: 18px;
	padding: var(--hs-space-lg);
}

.hs-product-title {
	margin: 0 0 12px;
	font-size: var(--hs-fs-h1);
	line-height: var(--hs-lh-h1);
}

.hs-product-title a {
	color: var(--hs-navy);
	text-decoration: none;
}

/* --- Karta produktu (WooCommerce Blocks) ---
   Wzorzec kompozycyjny serwisu zakupowego: kwadratowy kadr, tytul
   drugorzedny, CENA dominuje, pod nia zwarty blok informacji o realizacji,
   CTA przy dolnej krawedzi. Kolory, typografia i ikony pozostaja wlasne. */
.wc-block-product-template,
.wp-block-woocommerce-product-template {
	align-items: stretch;
}

.wc-block-product-template .wc-block-product,
.wp-block-woocommerce-product-collection .wc-block-product {
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0;
	padding: 12px;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-card);
	background: var(--hs-white);
	box-shadow: none;
}

.wp-block-woocommerce-product-collection .wc-block-product:hover {
	box-shadow: var(--hs-shadow-hover);
}

/* Kadr kwadratowy — zdjecia o roznych proporcjach ustawialy cene i CTA
   sasiednich kart na roznych wysokosciach. */
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wp-block-woocommerce-product-image {
	aspect-ratio: 1;
	margin-bottom: 10px;
	overflow: hidden;
	border-radius: var(--hs-radius-control);
	background: var(--hs-surface-alt);
}

.wc-block-product .wc-block-components-product-image img,
.wc-block-product .wp-block-woocommerce-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Tytul: dokladnie dwa wiersze, drugorzedny — nie krzyczy. */
.wc-block-product-template .wc-block-product .wp-block-post-title {
	display: -webkit-box;
	height: 2.7em;
	min-height: 0;
	margin: 0 0 var(--hs-space-sm);
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--hs-graphite);
	font-size: var(--hs-fs-sm);
	font-weight: var(--hs-fw-body);
	line-height: var(--hs-lh-tight);
}

.wc-block-product-template .wc-block-product .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wc-block-product-template .wc-block-product .wp-block-post-title a:hover {
	color: var(--hs-navy);
	text-decoration: underline;
}

/* Cena: najmocniejszy element karty. */
.wc-block-product .wp-block-woocommerce-product-price {
	margin: 0 0 10px;
}

.wc-block-product .wc-block-components-product-price__value,
.wc-block-product .wp-block-woocommerce-product-price .woocommerce-Price-amount,
.wc-block-product-template .wc-block-product .wc-block-components-product-price {
	color: var(--hs-navy);
	font-size: var(--hs-fs-price);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.wc-block-product .wc-block-components-product-price__regular {
	margin-right: 6px;
	color: var(--hs-navy-soft);
	font-size: var(--hs-fs-sm);
	font-weight: var(--hs-fw-body);
	text-decoration: line-through;
}

/* Blok realizacji i dostawy. Stala minimalna wysokosc ustawia CTA
   sasiednich kart w jednej linii. Poprzednio ten selektor mial cztery
   deklaracje ze sprzecznymi wysokosciami. */
.hs-card-meta {
	min-height: 58px;
	margin: 0 0 10px;
	padding: 10px 0 0;
	border-top: 1px solid var(--hs-border);
	overflow: hidden;
	color: var(--hs-graphite);
	font-size: var(--hs-fs-xs);
	line-height: 1.5;
	list-style: none;
}

.hs-card-meta li {
	position: static;
	margin: 0;
	padding-left: 0;
}

.hs-card-meta li::before {
	content: none;
}

.hs-card-meta li:first-child {
	color: var(--hs-navy);
	font-weight: var(--hs-fw-medium);
}

/* CTA zawsze przy dolnej krawedzi karty. */
.wc-block-product > .wp-block-button,
.wc-block-product > .wc-block-components-product-button,
.wc-block-product > a.hs-loop-cta,
.wc-block-product > .wp-element-button,
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
}

.wc-block-product-template .wc-block-product .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* Etykieta CTA zawija sie zamiast byc ucinana wielokropkiem — karty
   w rzedzie i tak koncza sie w tej samej linii dzieki stalej wysokosci. */
.hs-loop-cta {
	display: flex;
	height: var(--hs-tap);
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	font-size: var(--hs-fs-sm);
	font-weight: var(--hs-fw-strong);
	line-height: 1.2;
	text-align: center;
	white-space: normal;
}

/* Lumise doklada wlasny przycisk obok natywnego przycisku petli —
   w katalogu zostaje jedno CTA. */
.woocommerce ul.products li.product .lumise-list-button,
.wc-block-product .lumise-list-button,
.wc-block-product-template .lumise-list-button {
	display: none !important;
}

/* --- Klasyczna petla produktow (strona glowna) ---
   Rzad przewijany: kategoria z dwoma produktami nie zostawia pustych
   komorek po prawej stronie. */
.home .woocommerce ul.products,
.home .woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: none !important;
	grid-auto-flow: column;
	grid-auto-columns: minmax(190px, 232px);
	justify-content: start;
	gap: 0;
	margin: 12px 0 0 !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-card);
}

.home .woocommerce ul.products::before,
.home .woocommerce ul.products::after {
	display: none !important;
}

.home .woocommerce ul.products li.product,
.home .woocommerce-page ul.products li.product {
	display: flex;
	height: 100%;
	flex-direction: column;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 14px;
	border: 0;
	border-right: 1px solid var(--hs-border);
	border-radius: 0;
	background: var(--hs-white);
	box-shadow: none;
	scroll-snap-align: start;
	transition: box-shadow .15s ease, transform .15s ease;
}

.home .woocommerce ul.products li.product:last-child {
	border-right: 0;
}

.home .woocommerce ul.products li.product:hover {
	position: relative;
	z-index: 2;
	transform: translateY(-2px);
	box-shadow: var(--hs-shadow-hover);
}

.home .woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 1;
	margin: 0 0 10px;
	object-fit: contain;
	border-radius: var(--hs-radius-control) !important;
	background: linear-gradient(145deg, var(--hs-surface-alt), var(--hs-border-soft));
}

.home .woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	min-height: 38px;
	margin: 0 0 7px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--hs-graphite);
	font-size: var(--hs-fs-sm);
	font-weight: 500;
	line-height: var(--hs-lh-tight);
}

.home .woocommerce ul.products li.product .price {
	display: block;
	min-height: 30px;
	margin: 0 0 var(--hs-space-sm);
	color: var(--hs-navy);
	font-size: var(--hs-fs-price);
	font-weight: 800;
	line-height: 1.2;
}

.home .woocommerce ul.products li.product .button,
.home .woocommerce ul.products li.product .hs-loop-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--hs-tap);
	margin: auto 0 0;
	padding: 8px 10px;
	border-radius: var(--hs-radius-control) !important;
	font-size: var(--hs-fs-sm);
	line-height: 1.2;
	text-align: center;
}

/* Badge promocji — jedyne miejsce na pigulke. Po masowej konwersji
   px -> rem mial 0.875rem, czyli tyle co tekst pomocniczy; wracamy
   do rozmiaru metadanych. */
.home .woocommerce span.onsale {
	min-width: 0;
	min-height: 0;
	padding: 5px 7px;
	border-radius: var(--hs-radius-pill);
	background: var(--hs-copper);
	color: var(--hs-navy);
	font-size: var(--hs-fs-xs);
	line-height: 1;
}

/* ============================================================
   6. FILTRY KATALOGU (nadpisania WooCommerce Blocks)
   ============================================================ */

/* Jeden rytm grup filtrow: naglowek + zawartosc, rozdzielone wlosem.
   Bloki filtrow siedza cztery poziomy glebiej, pod __overlay-content. */
.wc-block-product-filters__overlay-content > * {
	margin: 0;
	padding: 18px 0;
	border: 0;
	border-top: 1px solid var(--hs-border);
	border-radius: 0;
	background: transparent;
}

.wc-block-product-filters__overlay-content > *:first-child {
	padding-top: 0;
	border-top: 0;
}

.wc-block-product-filters__overlay-content > *:last-child {
	padding-bottom: 0;
}

/* Blok listy wyboru renderuje <fieldset> bez klasy — przegladarka daje mu
   wlasna ramke 2px groove, stad biale pudelko wokol kazdej listy. */
.wc-block-product-filters__overlay-content fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.wc-block-product-filters__overlay-content [class*="product-filter-checkbox-list"],
.wc-block-product-filters__overlay-content [class*="product-filter-chips"],
.wc-block-product-filters__overlay-content [class*="product-filter-removable-chips"],
.wc-block-product-filters__overlay-content [class*="product-filter-active"] {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.wp-block-woocommerce-product-filters h3 {
	margin: 0 0 10px;
	color: var(--hs-navy);
	font-size: var(--hs-fs-sm);
	font-weight: var(--hs-fw-strong);
	letter-spacing: .01em;
}

.wc-block-product-filters__overlay-content label,
.wc-block-product-filter-checkbox-list__label {
	display: flex;
	min-height: var(--hs-tap);
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--hs-graphite);
	font-size: var(--hs-fs-sm);
	cursor: pointer;
}

.wc-block-product-filters__overlay-content label:hover {
	color: var(--hs-navy);
}

.wc-block-product-filter-checkbox-list__item {
	margin: 0;
}

.wc-block-product-filter-checkbox-list__text {
	color: var(--hs-graphite);
	font-size: var(--hs-fs-sm);
}

/* Licznik musi byc mniejszy od etykiety — po masowej konwersji oba mialy
   0.875rem i wiersz filtra czytal sie jak dwie rownorzedne informacje. */
.wc-block-product-filter-checkbox-list__count {
	color: var(--hs-navy-soft);
	font-size: var(--hs-fs-xs);
}

.wc-block-product-filter-checkbox-list__label:hover .wc-block-product-filter-checkbox-list__text {
	color: var(--hs-navy);
}

/* Pola wyboru byly niewidoczne: appearance:none, ramka rgba(0,0,0,0). */
.wp-block-woocommerce-product-filters input[type="checkbox"],
.wc-block-product-filter-checkbox-list input[type="checkbox"] {
	width: 20px !important;
	height: 20px !important;
	flex: 0 0 20px;
	margin: 0;
	border: 2px solid var(--hs-border) !important;
	border-radius: var(--hs-radius-sm);
	background: var(--hs-white) !important;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}

.wp-block-woocommerce-product-filters input[type="checkbox"]:hover {
	border-color: var(--hs-blue) !important;
}

.wp-block-woocommerce-product-filters input[type="checkbox"]:checked {
	border-color: var(--hs-navy) !important;
	background: var(--hs-navy) !important;
}

.wp-block-woocommerce-product-filters input[type="checkbox"]:focus-visible {
	outline: var(--hs-focus-width) solid var(--hs-focus-color);
	outline-offset: var(--hs-focus-offset);
}

/* Suwak ceny: tor na pelnej szerokosci, pola pod nim. Wczesniej pole min
   + tor + pole max w jednym rzedzie zostawialy torowi zero pikseli
   w panelu o szerokosci 314px. */
.wc-block-product-filter-price-slider__content,
.wc-block-product-filter-price-slider__content--inline {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 14px 12px;
	align-items: center;
}

.wc-block-product-filter-price-slider__range {
	position: relative;
	display: flex;
	grid-column: 1 / -1;
	grid-row: 1;
	width: 100% !important;
	min-width: 0;
	height: 32px;
	align-items: center;
}

.wc-block-product-filter-price-slider__left {
	grid-column: 1;
	grid-row: 2;
}

.wc-block-product-filter-price-slider__right {
	grid-column: 2;
	grid-row: 2;
}

.wc-block-product-filter-price-slider__left,
.wc-block-product-filter-price-slider__right,
.wc-block-product-filter-price-slider__amount {
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
}

.wc-block-product-filter-price-slider__range::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 6px;
	border-radius: var(--hs-radius-pill);
	background: var(--hs-border);
}

.wc-block-product-filter-price-slider__range .range-bar {
	position: relative;
	z-index: 1;
	height: 6px !important;
	border-radius: var(--hs-radius-pill);
	background: var(--hs-navy) !important;
}

.wc-block-product-filter-price-slider__range input[type="range"] {
	position: absolute;
	z-index: 2;
	left: 0;
	width: 100%;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border: 2px solid var(--hs-navy);
	border-radius: var(--hs-radius-pill);
	background: var(--hs-white);
	box-shadow: 0 1px 3px rgba(20, 33, 61, .28);
	cursor: grab;
	pointer-events: auto;
}

.wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 2px solid var(--hs-navy);
	border-radius: var(--hs-radius-pill);
	background: var(--hs-white);
	box-shadow: 0 1px 3px rgba(20, 33, 61, .28);
	cursor: grab;
	pointer-events: auto;
}

.wc-block-product-filter-price-slider__range input[type="range"]:focus-visible::-webkit-slider-thumb {
	outline: var(--hs-focus-width) solid var(--hs-focus-color);
	outline-offset: var(--hs-focus-offset);
}

/* Pola ceny. Klasa __amount nie istnieje w tej wersji WooCommerce —
   celujemy takze w same pola wewnatrz bloku ceny. */
.wc-block-product-filter-price-slider__amount,
.wp-block-woocommerce-product-filter-price input[type="text"],
.wp-block-woocommerce-product-filter-price input[type="number"],
.wp-block-woocommerce-product-filter-price input[type="tel"] {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: none;
	min-height: var(--hs-tap);
	padding: 8px 10px;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-control);
	background: var(--hs-white);
	color: var(--hs-navy);
	font-size: var(--hs-fs-sm);
	text-align: center;
}

.wp-block-woocommerce-product-filter-price [class*="__left"],
.wp-block-woocommerce-product-filter-price [class*="__right"] {
	min-width: 0;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.wc-block-product-filters {
	min-width: 0;
	overflow-x: clip;
}

/* ============================================================
   7. STOPKA
   ============================================================ */

.hs-footer {
	margin-top: var(--hs-space-lg);
	padding-top: 32px !important;
	padding-bottom: 22px !important;
	font-size: var(--hs-fs-sm);
}

.hs-footer .wp-block-columns {
	gap: 28px;
}

.hs-footer h3 {
	margin: 0 0 10px;
	font-size: var(--hs-fs-h3);
	line-height: var(--hs-lh-h3);
}

.hs-footer .wp-block-navigation {
	gap: 7px;
}

/* Separator: pelnej szerokosci wlos zamiast wysrodkowanej kreski 100px,
   ktora czytala sie jak przypadkowy artefakt. */
.hs-footer > .wp-block-separator {
	height: 1px;
	border: 0;
	background: rgba(255, 255, 255, .16);
	opacity: 1;
}

.hs-footer__bar {
	gap: 12px;
	margin-top: var(--hs-space-sm);
}

.hs-footer__bar p {
	margin: 0;
}

.hs-footer__methods {
	gap: 6px 10px;
	align-items: center;
	color: rgba(255, 255, 255, .78);
	font-size: var(--hs-fs-xs);
}

.hs-footer__methods p {
	margin: 0;
	color: rgba(255, 255, 255, .7);
}

/* Metody dostawy i platnosci — wersja na jasnym tle. */
.hs-methods {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-space-sm);
	margin: var(--hs-space-sm) 0 var(--hs-space-md);
	padding: 0;
	list-style: none;
}

.hs-methods li {
	padding: 6px 12px;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-control);
	background: var(--hs-white);
	color: var(--hs-navy);
	font-size: var(--hs-fs-sm);
	font-weight: var(--hs-fw-medium);
	white-space: nowrap;
}

/* W stopce nadpisywany byl tylko kolor tekstu na bialy, a tlo zostawalo
   biale — wychodzil bialy tekst na bialym tle, czyli rzad pustych
   bialych prostokatow pod "Dostawa:" i "Platnosci:". */
.hs-footer .hs-methods {
	gap: 4px 8px;
	margin: 0;
}

.hs-footer .hs-methods li {
	padding: 2px 8px;
	border-color: rgba(255, 255, 255, .3);
	background: transparent;
	color: rgba(255, 255, 255, .92);
	font-size: var(--hs-fs-xs);
	font-weight: var(--hs-fw-body);
}

/* Brakujace dane rejestrowe sprzedawcy — widoczny komunikat w panelu,
   nigdy surowy znacznik na froncie. */
.hsc-missing-data {
	padding: 0 var(--hs-space-xs);
	border-bottom: 1px dotted currentColor;
	font-style: italic;
	opacity: .8;
}

/* ============================================================
   8. RESPONSYWNOSC — 1024 / 782 / 600
   ------------------------------------------------------------
   Trzy punkty zalamania wg DESIGN.md. Poprzednia wersja miala szesc
   (420, 480, 782, 900, 1020, 1024), przez co ten sam komponent zmienial
   sie przy trzech roznych szerokosciach bez powodu.
   ============================================================ */

@media (max-width: 1024px) {
	.hs-cat-tiles,
	.hs-category-grid,
	.hs-benefits {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hs-account-nav a,
	.wc-block-mini-cart__button,
	.wc-block-customer-account__link {
		padding-inline: 6px !important;
	}

	.hs-product-main {
		gap: var(--hs-space-lg);
		padding: 18px;
	}
}

@media (max-width: 782px) {
	/* Naglowek: logo + akcje w jednym rzedzie, wyszukiwarka pod spodem
	   na pelna szerokosc. Poprzednio ta regula nigdy nie dzialala, bo
	   pozniejsza deklaracja bez media query nadpisywala siatke. */
	.hs-header {
		position: relative;
		top: auto;
	}

	.hs-header__main {
		grid-template-columns: 1fr auto;
		gap: 6px;
	}

	.hs-header .hs-search {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: var(--hs-space-xs);
	}

	.hs-category-nav,
	.hs-category-menu,
	.hs-category-menu .wp-block-navigation__container {
		position: static;
		top: auto;
		height: var(--hs-tap);
		min-height: var(--hs-tap);
	}

	.wc-block-customer-account__link .label {
		display: none;
	}

	.hs-hero {
		min-height: 320px;
		padding: 26px var(--hs-panel-pad) !important;
		grid-template-columns: 1fr;
		background-image: linear-gradient(90deg, rgba(9, 20, 40, .97) 0%, rgba(14, 31, 56, .9) 68%, rgba(20, 33, 61, .35) 100%), url("../images/hero-puck.webp");
		background-position: 64% center;
	}

	.hs-hero__visual {
		display: none;
	}

	.hs-benefits,
	.hs-category-grid,
	.hs-cat-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hs-benefits > *:nth-child(even) {
		border-right: 0;
	}

	.hs-benefits > * {
		min-height: 66px;
	}

	.hs-category-section {
		background-image: linear-gradient(rgba(255, 255, 255, .93), rgba(255, 255, 255, .93)), url("../images/categories-flatlay.webp");
	}

	.hs-club-banner {
		min-height: 300px;
		background-image: linear-gradient(90deg, rgba(9, 20, 40, .96), rgba(20, 33, 61, .72)), url("../images/clubs-locker-room.webp");
		background-position: 62% center;
	}

	.hs-steps {
		grid-template-columns: 1fr;
	}

	.hs-main,
	.hs-shop,
	.hs-product {
		padding-top: 18px;
	}

	.hs-product-main {
		padding: 14px;
	}

	.hs-product > .wp-block-woocommerce-product-details {
		padding: var(--hs-space-md);
	}

	.home .woocommerce ul.products,
	.home .woocommerce-page ul.products {
		grid-auto-columns: minmax(190px, 65vw);
	}

	.hs-footer .wp-block-columns {
		gap: var(--hs-space-lg);
	}
}

@media (max-width: 600px) {
	.hs-benefits,
	.hs-category-grid,
	.hs-cat-tiles,
	.hs-steps ol {
		grid-template-columns: 1fr;
	}

	.hs-benefits > * {
		border-right: 0;
	}

	.hs-category-tile {
		min-height: 68px;
	}
}