/* ==========================================================================
   WooCommerce — warstwa wizualna hook-first (ADR-0003).
   Styluje TYLKO nasz własny markup wstrzykiwany hookami/JS + kilka klas z
   rdzenia Woo, których się trzymamy (.stock, .variations). Nie celuje w
   prywatny markup .wc-block-* (zmienny między wydaniami). Wartości = tokeny
   theme.json (var(--wp--preset--*) / var(--wp--custom--*)), zero hardkodów.
   Reużywa prymitywów z components.css (.swatch, .swatch-size, .pill).
   ========================================================================== */

/* BADGE etykiet (nowość / bestseller / promocja) → PRZENIESIONE do components.css.
   Badge to prymityw overlay `.product-card`, a karta renderuje się też poza
   `is_woocommerce()` (wyszukiwarka / 404 / koszyk / ulubione), gdzie ten plik nie
   jest ładowany. Żeby badge działały wszędzie, mieszkają w globalnym components.css. */

/* Na karcie listingu media jest kotwicą pozycjonującą (Woo: li.product > a).
   Gwarantujemy kontekst pozycjonowania dla badge'y bez ruszania szablonu. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	position: relative;
}


/* --------------------------------------------------------------------------
   SWATCHE WARIANTÓW (single product) — DIY z pa_kolor (hex w term meta) +
   pa_rozmiar. Natywny <select> zostaje w DOM (źródło prawdy silnika Woo),
   ale zapada wizualnie i wypada z porządku fokusu, gdy JS wzbogaci formularz.
   Fallback bez JS: selecty widoczne i w pełni sprawne.
   -------------------------------------------------------------------------- */
.variations_form.is-humee-swatches .variations td.value > select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.humee-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Prototyp: kółka koloru rozstawione luźniej (sm) niż gołe numery rozmiaru (xs). */
.humee-swatches--color {
	gap: var(--wp--preset--spacing--sm);
}

/* WP dziedziczy wysoki line-height na <button> (~32px) → „gołe numery" rozmiaru
   puchną. Spłaszczamy do zwartego wiersza, jak w prototypie (zakup). */
.humee-swatches .swatch-size {
	line-height: 1;
}

/* Nazwa aktualnie wybranego koloru nad próbkami (Figma 37:993). */
.humee-swatches__current {
	display: block;
	margin-block-end: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--dark);
}

/* Fokus klawiatury (roving tabindex, wzorzec APG Radio Group) musi być widoczny
   — nawigacja strzałkami przenosi fokus między próbkami (WCAG 2.4.7). */
.humee-swatches .swatch:focus-visible,
.humee-swatches .swatch-size:focus-visible {
	outline: 2px solid var(--wp--preset--color--dark);
	outline-offset: 2px;
}

/* Niedostępna kombinacja: silnik Woo oznacza <option disabled>. Kółko koloru
   wygaszamy (grayscale + opacity); gołe numery rozmiaru korzystają z wyglądu
   disabled prymitywu `.swatch-size--plain` (muted, bez przekreślenia) — nie
   powielamy, dokładamy tylko kursor. */
.humee-swatches .swatch[aria-disabled="true"] {
	opacity: 0.35;
	filter: grayscale(0.4);
	cursor: not-allowed;
}

.humee-swatches .swatch-size[aria-disabled="true"] {
	cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   STEPPER ILOŚCI — natywny <input.qty> Woo wzbogacony w prymityw `.stepper`.
   Prymityw (obrys/pill/przyciski) pochodzi z components.css; tu tylko zdejmujemy
   natywny chrom inputa (spinnery, ramka, tło), żeby wtopił się jako `.stepper__value`.
   -------------------------------------------------------------------------- */
.quantity.stepper .qty.stepper__value {
	inline-size: 2.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity.stepper .qty.stepper__value::-webkit-outer-spin-button,
.quantity.stepper .qty.stepper__value::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity.stepper .stepper__btn[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   TOAST „dodano do koszyka" — potwierdzenie po AJAX add-to-cart na single.
   Nieinwazyjny komunikat w rogu ekranu; a11y: role=status, auto-znika.
   -------------------------------------------------------------------------- */
.humee-toast {
	position: fixed;
	inset-block-end: var(--wp--preset--spacing--md);
	inset-inline-end: var(--wp--preset--spacing--md);
	z-index: 1000;
	max-inline-size: min(22rem, calc(100vw - 2 * var(--wp--preset--spacing--md)));
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--bg-alt);
	background: var(--wp--preset--color--dark);
	box-shadow: 0 6px 24px var(--wp--custom--shadow--ambient);
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.humee-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.humee-toast a {
	color: var(--wp--preset--color--sand);
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Stan „ładowania" przycisku dodania do koszyka podczas AJAX.
   -------------------------------------------------------------------------- */
.single_add_to_cart_button.is-loading {
	opacity: 0.6;
	pointer-events: none;
}