/**
 * Hockey Store - blokowy szablon produktu (templates/single-product.html).
 * ========================================================================
 * JEDYNE zrodlo stylow boxu zakupowego. Laduje sie jako ostatni arkusz
 * motywu (zaleznosc: hockey-store-system, patrz h4f-block-product-preview.php).
 *
 * DLACZEGO TEN PLIK UROSL - weryfikacja wizualna 09.08.2026
 * ---------------------------------------------------------
 * Strona produktu zostala przeniesiona z klasycznego szablonu WooCommerce
 * na natywny szablon blokowy. W szablonie blokowym NIE ISTNIEJE element
 * .summary, a caly box zakupowy w product.css i buybox.css byl pod niego
 * zakotwiczony (.single-product div.product .summary > ...). Po migracji
 * te reguly przestaly cokolwiek stylizowac - box przejal fallback z
 * woocommerce.css i frontend.css wtyczki hockey-store-core.
 *
 * Stan zmierzony na zywej stronie przed poprawka:
 *   - oba CTA identyczne: #C48A3A, font-weight 800, 48px - zero hierarchii
 *   - przyciski 870px w kolumnie 878px - krawedzie sie nie pokrywaly
 *   - "Dostepnosc: Produkt dostepny (25 szt.)" i akapit .stock
 *     "25 w magazynie" jeden pod drugim, ta sama tresc dwa razy
 *   - marginesy 8/12/16/24/32px bez zadnego systemu
 *   - pole ilosci 108px samotnie w wierszu nad pelnowymiarowym CTA
 *
 * SPECYFICZNOSC - przeczytaj przed edycja strefy akcji
 * ----------------------------------------------------
 * frontend.css wtyczki hockey-store-core maluje przyciski selektorem
 *   .woocommerce div.product form.cart .button        -> (0,3,2)
 * Selektor .hs-product-block-cart form.cart > .button ma tylko (0,3,1),
 * wiec przegrywa MIMO pozniejszego ladowania - w pierwszym podejsciu CTA
 * zostawalo przy 48px i wadze 800. Dlatego reguly strefy akcji maja
 * prefiks .woocommerce div.product. Nie skracaj ich.
 *
 * Reguly boxu przeniesione tu z product.css i buybox.css sa w tamtych
 * plikach USUNIETE, a nie zduplikowane - jedna regula, jedno miejsce.
 */

/* ============================================================
   1. RAMA STRONY
   ============================================================ */
.single-product .wp-site-blocks > .wp-block-group.woocommerce.product {
	display: block !important;
}

.hs-product-block-template {
	background: var(--hs-ice);
	color: var(--hs-graphite);
}

.hs-product-block-shell {
	width: min(1280px, calc(100% - 32px));
	margin-inline: auto;
	padding-block: 24px 64px;
}

.hs-product-block-breadcrumbs {
	margin-bottom: 16px;
	color: var(--hs-blue);
	font-size: 0.875rem;
}

.hs-product-block-layout {
	gap: 40px;
	align-items: start;
	margin-block: 0 40px;
}

.hs-product-block-gallery,
.hs-product-block-buybox {
	min-width: 0;
	border: 1px solid var(--hs-border);
	border-radius: 16px;
	background: var(--hs-white);
}

.hs-product-block-gallery {
	padding: 16px;
}

.hs-product-block-buybox {
	padding: clamp(24px, 3vw, 40px);
}

/* ============================================================
   2. TYPOGRAFIA BOXU
   Tytul 30-34px / cena 28px. Wczesniej bylo odwrotnie
   (29,5 vs 31,7px), wiec cena i nazwa produktu konkurowaly
   o pierwsze spojrzenie.
   ============================================================ */
.hs-product-block-title {
	color: var(--hs-navy);
	font-size: clamp(1.875rem, 2.4vw, 2.125rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* !important jest tu konieczny: WordPress wypisuje presety rozmiaru
   z theme.json jako .has-large-font-size { font-size: ... !important }.
   Blok ceny ma ta klase z szablonu, wiec bez !important preset wygrywa. */
.hs-product-block-price,
.hs-product-block-price .wc-block-components-product-price {
	color: var(--hs-navy);
	font-size: 1.75rem !important;
	font-weight: 750;
	line-height: 1.15;
}

.hs-product-block-price del {
	margin-right: 8px;
	opacity: 0.7;
	color: var(--hs-graphite);
	font-size: 1.125rem !important;
	font-weight: 400;
}

.hs-product-block-price ins {
	text-decoration: none;
}

.hs-product-block-summary {
	max-width: 62ch;
	color: var(--hs-graphite);
}

/* Blok oceny nic nie renderuje, dopoki sklep nie ma opinii - pusty
   kontener zostawial 24px dziury miedzy nazwa a cena. */
.hs-no-reviews .hs-product-block-buybox .wp-block-woocommerce-product-rating,
.hs-product-block-buybox .wp-block-woocommerce-product-rating:empty {
	display: none;
}

/* ============================================================
   3. RYTM PIONOWY
   Odstep koduje przynaleznosc: 4-6px wewnatrz grupy, 20px miedzy
   grupami. Wczesniej kazdy blok mial inna, przypadkowa wartosc.
   ============================================================ */
.hs-product-block-buybox > * {
	margin-block: 0;
}

.hs-product-block-buybox > .hs-product-block-title {
	margin-bottom: 6px;
}

.hs-product-block-buybox > .hs-product-block-price {
	margin-bottom: 4px;
}

.hs-product-block-buybox > .hs-product-block-summary {
	margin-bottom: 20px;
}

.hs-product-block-buybox > .hs-buybox-facts {
	margin-bottom: 20px;
}

.hs-product-block-buybox > .hs-product-block-cart {
	margin-bottom: 20px;
}

.hs-product-block-buybox > .hs-trust {
	margin-bottom: 0;
}

/* ============================================================
   4. WARUNKI HANDLOWE
   ============================================================ */
.hs-buybox-facts {
	list-style: none;
	padding: 14px 0;
	border-top: 1px solid var(--hs-border);
	border-bottom: 1px solid var(--hs-border);
	display: grid;
	row-gap: 8px;
}

.hs-buybox-facts li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	color: var(--hs-graphite);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.hs-buybox-facts li strong {
	color: var(--hs-navy);
	font-weight: 600;
}

.hs-buybox-facts svg {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--hs-blue);
}

/* ============================================================
   5. STREFA AKCJI
   Jeden komponent dla produktow prostych i wariantowych:
   [ilosc] [glowne CTA] w jednym wierszu, drugorzedne CTA
   pelna szerokoscia pod spodem, ulubione na koncu.
   ============================================================ */

/* Akapit z liczba sztuk powtarza wiersz Dostepnosc z listy warunkow
   handlowych. Ta sama informacja pojawia sie raz - DESIGN.md. */
.hs-product-block-cart > p.stock {
	display: none;
}

/* Zewnetrzny formularz uklada warianty i strefe zakupu. W produkcie
   prostym kontrolki sa jego bezposrednimi dziecmi. W produkcie
   wariantowym WooCommerce umieszcza je w:
   .single_variation_wrap > .woocommerce-variation-add-to-cart. */
.hs-product-block-cart.wc-block-add-to-cart-form form.cart,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0;
	padding: 0;
}

/* Stary clearfix WooCommerce staje sie elementami flex i rozsuwa
   kontrolki. Zerujemy go na obu poziomach struktury. */
.woocommerce div.product .hs-product-block-cart form.cart::before,
.woocommerce div.product .hs-product-block-cart form.cart::after,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart::before,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart::after {
	content: none;
	display: none;
}

/* Domyslnie kazdy bezposredni element formularza zajmuje cala szerokosc. */
.woocommerce div.product .hs-product-block-cart form.cart > * {
	flex: 1 1 100%;
	margin: 0;
	float: none;
	min-width: 0;
}

.woocommerce div.product .hs-product-block-cart form.cart > .variations,
.woocommerce div.product .hs-product-block-cart form.cart > table.variations {
	order: 0;
}

/* Kontener wariantu dostaje te sama szerokosc co bezposrednia strefa
   akcji produktu prostego. Cena wariantu, jesli sie pojawi, pozostaje
   nad kontrolkami. */
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap {
	order: 1;
	flex: 1 1 100%;
	min-width: 0;
}

.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation {
	margin: 0 0 10px;
}

/* Ilosc ma identyczny rozmiar i pozycje w obu strukturach DOM. */
.woocommerce div.product .hs-product-block-cart form.cart > .quantity,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .quantity {
	order: 1;
	flex: 0 0 112px;
	display: block;
	margin: 0;
	float: none;
}

.woocommerce div.product .hs-product-block-cart form.cart .quantity input.qty {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--hs-border);
	border-radius: 8px;
	background: var(--hs-white);
	color: var(--hs-navy);
	font-size: 1rem;
	text-align: center;
}

/* Glowne CTA kreatora lezy obok pola ilosci. */
.woocommerce div.product .hs-product-block-cart form.cart > .lumise-customize-button,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .lumise-customize-button {
	order: 2;
	flex: 1 1 200px;
}

/* Produkt z aktywnym kreatorem musi trafic do koszyka z zapisanym projektem.
   Ukrywamy tylko natywny element <button>; CTA Lumise jest linkiem <a> i pozostaje widoczne. */
.woocommerce div.product .hs-product-block-cart form.cart:has(.lumise-customize-button) button.single_add_to_cart_button {
	display: none;
}

/* Produkt bez kreatora ma jedno CTA, wiec przycisk zajmuje miejsce obok
   pola ilosci. Brak obslugi :has() daje bezpieczny uklad pelnej szerokosci. */
.woocommerce div.product .hs-product-block-cart form.cart:not(:has(.lumise-customize-button)) > button.single_add_to_cart_button,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart:not(:has(.lumise-customize-button)) > button.single_add_to_cart_button {
	order: 2;
	flex: 1 1 200px;
}

/* Wspolna baza wygladu obu CTA, niezalezna od typu produktu. */
.woocommerce div.product .hs-product-block-cart form.cart > .button,
.woocommerce div.product .hs-product-block-cart form.cart > .lumise-customize-button,
.woocommerce div.product .hs-product-block-cart form.cart > button.single_add_to_cart_button,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .button,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .lumise-customize-button,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 52px;
	margin: 0;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--hs-copper);
	background-image: none;
	color: var(--hs-navy);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.woocommerce div.product .hs-product-block-cart form.cart > .button:hover,
.woocommerce div.product .hs-product-block-cart form.cart > .lumise-customize-button:hover,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .button:hover,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .lumise-customize-button:hover {
	background: var(--hs-copper-hover);
	color: var(--hs-navy);
}

/* Przycisk drugorzedny jest zawsze bialy z granatowa ramka. */
.woocommerce div.product .hs-product-block-cart form.cart > button.single_add_to_cart_button.button,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > button.single_add_to_cart_button.button {
	background: var(--hs-white);
	background-image: none;
	border: 1px solid var(--hs-navy);
	color: var(--hs-navy);
	font-weight: 600;
}

.woocommerce div.product .hs-product-block-cart form.cart > button.single_add_to_cart_button.button:hover,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > button.single_add_to_cart_button.button:hover {
	background: var(--hs-ice);
	color: var(--hs-navy);
}

/* Stan nieaktywny zachowuje geometrie komponentu, ale jest czytelny.
   Pelne sciezki sa potrzebne, aby wygrac z baza przycisku w obu DOM-ach. */
.woocommerce div.product .hs-product-block-cart form.cart > .button.disabled,
.woocommerce div.product .hs-product-block-cart form.cart > .button:disabled,
.woocommerce div.product .hs-product-block-cart form.cart > .lumise-customize-button.disabled,
.woocommerce div.product .hs-product-block-cart form.cart > .lumise-customize-button[disabled],
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .button.disabled,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .button:disabled,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .lumise-customize-button.disabled,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .lumise-customize-button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.woocommerce div.product .hs-product-block-cart form.cart > .button:focus-visible,
.woocommerce div.product .hs-product-block-cart form.cart > .lumise-customize-button:focus-visible,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .button:focus-visible,
.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .lumise-customize-button:focus-visible,
.hs-wishlist-button:focus-visible {
	outline: var(--hs-focus-width, 3px) solid var(--hs-focus-color, #3F6E8C);
	outline-offset: var(--hs-focus-offset, 2px);
}

/* --- Warianty ------------------------------------------------------ */
.woocommerce div.product .hs-product-block-cart form.cart table.variations {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.woocommerce div.product .hs-product-block-cart form.cart table.variations th,
.woocommerce div.product .hs-product-block-cart form.cart table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

.woocommerce div.product .hs-product-block-cart form.cart table.variations th label {
	display: block;
	margin: 0 0 6px;
	color: var(--hs-graphite);
	font-size: 0.9375rem;
	font-weight: 600;
}

.woocommerce div.product .hs-product-block-cart form.cart table.variations td {
	margin: 0 0 14px;
}

.woocommerce div.product .hs-product-block-cart form.cart table.variations select {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--hs-border);
	border-radius: 8px;
	background-color: var(--hs-white);
	color: var(--hs-navy);
	font-size: 1rem;
}

/* --- Ulubione ------------------------------------------------------
   Trzeci poziom hierarchii: nie konkuruje z zadnym CTA, wiec ramka
   jest w kolorze linii, a nie granatowa jak przycisk drugorzedny. */
.hs-wishlist-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--hs-border);
	border-radius: 8px;
	background: var(--hs-white);
	color: var(--hs-navy);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.hs-product-block-cart > .hs-wishlist-button {
	margin: 10px 0 0;
}

.hs-wishlist-button:hover {
	background: var(--hs-ice);
}

.hs-wishlist-button[aria-pressed="true"] {
	border-color: var(--hs-copper);
	background: var(--hs-copper-tint);
}

.hs-wishlist-button svg {
	width: 18px;
	height: 18px;
}

/* ============================================================
   6. PASEK ZAUFANIA I METADANE
   ============================================================ */
.hs-trust {
	list-style: none;
	padding: 12px 14px;
	display: grid;
	gap: 8px;
	background: var(--hs-surface-alt);
	border: 1px solid var(--hs-border-soft);
	border-radius: 10px;
}

.hs-trust li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--hs-graphite);
	font-size: 0.875rem;
}

.hs-trust svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: var(--hs-blue);
}

.hs-product-block-meta {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--hs-border);
	color: var(--hs-navy-soft);
	font-size: 0.8125rem;
}

.hs-product-block-details {
	margin-top: 40px;
}

/* ============================================================
   7. UKLAD RESPONSYWNY
   Breakpointy zgodne z system.css: 600 / 782 / 1024.
   ============================================================ */
@media (min-width: 1025px) {
	/* Podzial 56/44 zamiast 50/50: galeria potrzebuje szerokosci na
	   zdjecie, box zakupowy to waska kolumna tekstu i przyciskow.
	   !important jest konieczny - szablon blokowy zapisuje szerokosc
	   kolumn jako styl inline (style="flex-basis:50%"). */
	.hs-product-block-layout > .hs-product-block-gallery {
		flex-basis: 56% !important;
	}

	.hs-product-block-layout > .hs-product-block-buybox {
		flex-basis: 44% !important;
	}

	/* Przyklejamy GALERIE, nie box zakupowy. Box ma ok. 800px wysokosci,
	   czyli wiecej niz typowe okno - sticky nic by tam nie dalo
	   (ten sam wniosek co w audycie klasycznego szablonu). */
	.hs-product-block-gallery {
		position: sticky;
		top: 24px;
	}

	.admin-bar .hs-product-block-gallery {
		top: 56px;
	}
}

@media (max-width: 1024px) {
	.hs-product-block-layout {
		flex-direction: column;
		gap: 24px;
	}

	.hs-product-block-gallery,
	.hs-product-block-buybox {
		flex-basis: auto !important;
		width: 100%;
	}
}

@media (min-width: 783px) and (max-width: 1024px) {
	/* Kolumny sa na stosie, wiec box ma pelna szerokosc strony.
	   Przycisk rozciagniety na 750px wyglada jak baner, a nie jak
	   przycisk - ograniczamy dlugosc wiersza. */
	.hs-product-block-buybox > * {
		max-width: 640px;
	}
}

@media (max-width: 782px) {
	.hs-product-block-shell {
		width: min(100% - 24px, 1280px);
		padding-block: 16px 48px;
	}

	.hs-product-block-buybox {
		padding: 24px;
	}

	.woocommerce div.product .hs-product-block-cart form.cart > .quantity,
	.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .quantity {
		flex: 0 0 96px;
	}

	.woocommerce div.product .hs-product-block-cart form.cart > .lumise-customize-button,
	.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart > .lumise-customize-button,
	.woocommerce div.product .hs-product-block-cart form.cart:not(:has(.lumise-customize-button)) > button.single_add_to_cart_button,
	.woocommerce div.product .hs-product-block-cart form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart:not(:has(.lumise-customize-button)) > button.single_add_to_cart_button {
		flex: 1 1 160px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hs-product-block-template *,
	.hs-product-block-template *::before,
	.hs-product-block-template *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}