/**
 * Hockey Store — tokeny i warstwa bazowa.
 * =======================================
 * Ladowany jako PIERWSZY arkusz motywu, wiec wszystkie tokeny sa dostepne
 * dla marketplace.css, catalog.css, product.css, buybox.css, sections.css,
 * product-blocks.css i system.css.
 *
 * Ten plik jest jedynym zrodlem prawdy dla skal. Jesli piszesz w innym
 * arkuszu sztywna wartosc — rozmiar czcionki w px, odstep spoza skali,
 * nowy promien naroznika, kolor spoza palety — to znaczy, ze albo da sie
 * ja wyrazic tokenem, albo jest bledem. Trzeciej mozliwosci nie ma.
 */

:root {
	/* --- PALETA (DESIGN.md § Colors) --------------------------------
	   Siedem kolorow bazowych i tyle ma zostac. */
	--hs-navy: #14213D;
	--hs-graphite: #334155;
	--hs-ice: #F4F7FA;
	--hs-white: #FFFFFF;
	--hs-blue: #3F6E8C;
	--hs-copper: #C48A3A;
	--hs-border: #D9E2EA;

	/* --- SKALA TYPOGRAFICZNA (DESIGN.md § Typography) ---------------
	   Wylacznie rem i clamp().

	   UWAGA HISTORYCZNA: wczesniejsza konwersja px -> rem byla masowa
	   zamiana i splaszczyla hierarchie — 12px, 13px i 14px staly sie
	   tym samym 0.875rem. Przez to nazwa kategorii i licznik produktow,
	   albo etykieta filtra i jej licznik, mialy identyczny rozmiar.
	   Skala ponizej rozdziela te poziomy z powrotem: --hs-fs-xs to
	   metadane, --hs-fs-sm to tekst pomocniczy. */
	--hs-fs-hero:  clamp(2.1rem, 3.4vw, 3.45rem);
	--hs-fs-h1:    clamp(1.75rem, 3vw, 2.5rem);
	--hs-fs-h2:    clamp(1.5rem, 2.4vw, 2rem);
	--hs-fs-h3:    clamp(1.05rem, 1.4vw, 1.25rem);
	--hs-fs-price: clamp(1.1875rem, 1.6vw, 1.375rem);
	--hs-fs-body:  1rem;      /* 16px — minimum wg DESIGN.md */
	--hs-fs-sm:    0.875rem;  /* 14px — tekst pomocniczy */
	--hs-fs-xs:    0.75rem;   /* 12px — wylacznie metadane i badge */

	--hs-lh-hero:  1.05;
	--hs-lh-h1:    1.1;
	--hs-lh-h2:    1.15;
	--hs-lh-h3:    1.25;
	--hs-lh-body:  1.6;
	--hs-lh-tight: 1.35;

	--hs-fw-heading: 750;
	--hs-fw-strong:  700;
	--hs-fw-medium:  600;
	--hs-fw-body:    400;

	/* --- SKALA ODSTEPOW (DESIGN.md § spacing) ----------------------- */
	--hs-space-xs:  4px;
	--hs-space-sm:  8px;
	--hs-space-md:  16px;
	--hs-space-lg:  24px;
	--hs-space-xl:  40px;
	--hs-space-xxl: 64px;

	/* --- PROMIENIE (DESIGN.md § Shapes) -----------------------------
	   Cztery wartosci, kazda z przypisana rola. Wczesniej w samym
	   marketplace.css bylo ich siedemnascie (0, 2, 3, 4, 5, 6, 8, 10,
	   16, 50%, 999px i warianty z !important). */
	--hs-radius-sm:      4px;   /* pola wyboru, drobne znaczniki */
	--hs-radius-control: 8px;   /* pola formularzy, przyciski */
	--hs-radius-card:    10px;  /* karty produktowe, kafelki */
	--hs-radius-panel:   16px;  /* sekcje, bannery, panele */
	--hs-radius-pill:    999px; /* wylacznie statusy, badge, filtry */

	/* Alias zgodnosci — uzywany w starszych regulach. */
	--hs-radius: var(--hs-radius-card);

	/* --- UNIESIENIE (DESIGN.md § Elevation & Depth) -----------------
	   Cien bierze odcien tla, nigdy czystej czerni. */
	--hs-shadow-panel: 0 2px 8px rgba(20, 33, 61, .08);
	--hs-shadow-hover: 0 7px 20px rgba(20, 33, 61, .12);

	/* --- UKLAD ------------------------------------------------------ */
	--hs-wide: min(1280px, calc(100% - 32px));
	--hs-gutter: max(16px, calc((100% - 1280px) / 2));

	/* --- DOSTEPNOSC ------------------------------------------------- */
	--hs-focus-color:  var(--hs-blue);
	--hs-focus-width:  3px;
	--hs-focus-offset: 2px;
	--hs-tap: 44px;
}

/* --- WARIANTY POCHODNE PALETY --------------------------------------
   Wyliczane z kolorow bazowych, nie dobierane recznie. Statyczne wartosci
   to fallback dla przegladarek bez color-mix(); @supports podmienia je
   na wyliczane tam, gdzie jest wsparcie. */
:root {
	--hs-copper-hover: #B47C2E;
	--hs-copper-tint:  #FBF4E9;
	--hs-blue-hover:   #28486A;
	--hs-navy-soft:    #7C8BA1;
	--hs-surface-alt:  #F8FAFC;
	--hs-border-soft:  #EEF3F6;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--hs-copper-hover: color-mix(in srgb, var(--hs-copper) 85%, #000);
		--hs-copper-tint:  color-mix(in srgb, var(--hs-copper) 12%, #fff);
		--hs-blue-hover:   color-mix(in srgb, var(--hs-blue) 85%, #000);
		--hs-navy-soft:    color-mix(in srgb, var(--hs-navy) 62%, #fff);
		--hs-surface-alt:  color-mix(in srgb, var(--hs-ice) 55%, #fff);
		--hs-border-soft:  color-mix(in srgb, var(--hs-border) 55%, #fff);
	}
}

/* ============================================================
   BAZA
   ============================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--hs-ice);
	color: var(--hs-graphite);
	font-size: var(--hs-fs-body);
	line-height: var(--hs-lh-body);
}

a {
	color: var(--hs-blue);
	text-underline-offset: 3px;
}

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--hs-focus-width) solid var(--hs-focus-color);
	outline-offset: var(--hs-focus-offset);
}

/* ============================================================
   UKLAD STRONY
   ============================================================ */

.hs-main,
.hs-shop,
.hs-product {
	width: var(--hs-wide);
	margin: 0 auto;
	padding: var(--hs-space-xl) 0 var(--hs-space-xxl);
}

.hs-topbar {
	background: var(--hs-navy);
	color: var(--hs-white);
	padding: 6px var(--hs-gutter);
}

.hs-topbar p { margin: 0; }
.hs-topbar a { color: var(--hs-white); }

.hs-header {
	background: var(--hs-white);
	border-bottom: 1px solid var(--hs-border);
	padding: 14px var(--hs-gutter);
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .hs-header { top: 32px; }

.hs-header__main { gap: var(--hs-space-md); }

.hs-header .hs-search {
	flex: 1;
	min-width: 280px;
	max-width: 720px;
}

.hs-category-nav {
	background: var(--hs-white);
	border-bottom: 1px solid var(--hs-border);
	padding: var(--hs-space-sm) var(--hs-gutter);
	overflow-x: auto;
}

.hs-category-menu { white-space: nowrap; }

.hs-footer {
	background: var(--hs-navy);
	color: var(--hs-white);
	padding-left: var(--hs-gutter);
	padding-right: var(--hs-gutter);
}

.hs-footer a { color: var(--hs-white); }

/* ============================================================
   KONTROLKI
   ============================================================ */

.wp-block-search__inside-wrapper,
input:not([type=checkbox]):not([type=radio]),
select,
textarea {
	min-height: var(--hs-tap);
	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-body);
}

.wp-element-button,
.wp-block-button__link,
.button {
	min-height: var(--hs-tap);
	border-radius: var(--hs-radius-control) !important;
	font-weight: var(--hs-fw-strong);
}

/* ============================================================
   KARTY I SEKCJE
   ============================================================ */

.hs-card,
.wc-block-product {
	background: var(--hs-white);
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-card);
	padding: 14px;
	transition: transform .15s ease, border-color .15s ease;
}

.hs-card:hover,
.wc-block-product:hover {
	transform: translateY(-2px);
	border-color: var(--hs-blue);
}

.hs-hero {
	min-height: min(640px, calc(100vh - 150px));
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
	align-items: center;
	gap: var(--hs-space-xl);
	padding: clamp(48px, 7vw, 96px) var(--hs-gutter);
}

.hs-hero h1 {
	font-size: var(--hs-fs-hero);
	line-height: var(--hs-lh-hero);
	max-width: 13ch;
	margin: 0;
}

.hs-hero p {
	font-size: var(--hs-fs-body);
	max-width: 62ch;
}

.hs-section {
	padding: clamp(48px, 6vw, 80px) var(--hs-gutter);
}

.hs-section--surface { background: var(--hs-white); }

.hs-benefits {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: var(--hs-border);
	border-block: 1px solid var(--hs-border);
}

.hs-benefits > * {
	background: var(--hs-white);
	padding: 18px;
	text-align: center;
	margin: 0;
}

.hs-scroll-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(230px, 1fr);
	overflow-x: auto;
	gap: var(--hs-space-md);
	scroll-snap-type: x mandatory;
	padding-bottom: 10px;
}

.hs-scroll-row > * { scroll-snap-align: start; }

.hs-category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--hs-space-md);
}

.hs-category-tile {
	min-height: 170px;
	padding: var(--hs-space-lg);
	border-radius: var(--hs-radius-panel);
	background: linear-gradient(145deg, var(--hs-white), var(--hs-border-soft));
	border: 1px solid var(--hs-border);
	display: flex;
	align-items: flex-end;
}

.hs-steps {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: var(--hs-space-xl);
}

.hs-steps ol { display: grid; gap: var(--hs-space-md); }
.hs-steps li { padding: 18px; border-top: 1px solid var(--hs-border); }

.hs-club-banner {
	background: var(--hs-navy);
	color: var(--hs-white);
	border-radius: var(--hs-radius-panel);
	padding: clamp(28px, 5vw, 56px);
}

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

.hs-legal-warning {
	padding: 14px;
	border-left: 4px solid var(--hs-copper);
	background: var(--hs-copper-tint);
	color: var(--hs-navy);
	font-weight: var(--hs-fw-strong);
}

/* ============================================================
   RESPONSYWNOSC — 1024 / 782 / 600
   ------------------------------------------------------------
   Trzy punkty wg DESIGN.md. Wczesniej ten arkusz uzywal 900 i 480,
   ktorych nie ma w kontrakcie i ktore rozjezdzaly sie z 1020 i 420
   w marketplace.css. Lacznie bylo szesc breakpointow na szesc plikow.
   ============================================================ */

@media (max-width: 1024px) {
	.hs-benefits { grid-template-columns: repeat(3, 1fr); }
	.hs-category-grid { grid-template-columns: repeat(2, 1fr); }
	.hs-hero { grid-template-columns: 1fr; min-height: auto; }
	.hs-steps { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
	.hs-topbar { display: none; }
	.admin-bar .hs-header { top: 46px; }

	.hs-header .hs-search {
		order: 3;
		flex-basis: 100%;
		max-width: none;
	}

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

	.wp-block-columns { flex-wrap: wrap !important; }
	.hs-footer .wp-block-column { flex-basis: calc(50% - var(--hs-space-md)) !important; }
}

@media (max-width: 600px) {
	.hs-benefits { grid-template-columns: 1fr; }
	.hs-category-grid { grid-template-columns: 1fr; }
	.hs-footer .wp-block-column { flex-basis: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hs-card,
	.wc-block-product { transition: none; }
}