/**
 * Luna Core — drobne korekty front-endu, których nie da się zrobić w blokach.
 */

/*
 * Mini-koszyk: WooCommerce renderuje DWA <img> (jeden dla produktu ukrytego
 * w katalogu, drugi w linku) i dopiero Interactivity API chowa niepotrzebny.
 * Do czasu hydracji widać oba jeden pod drugim. Chowamy ten spoza linku,
 * dopóki link jest widoczny — czyli dokładnie w stanie, który JS i tak ustawi.
 */
.wc-block-cart-item__image > img:first-child:has(+ a:not([hidden])) {
	display: none;
}

/* Zdjęcie w mini-koszyku: stały kwadrat, bez skoku układu przy ładowaniu. */
.wc-block-cart-item__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/*
 * Strona produktu: gdy jedyną zakładką są „Opinie”, WooCommerce nadaje panelowi
 * focus — przeglądarka rysuje obramowanie i przewija stronę na dół. Obramowanie
 * zdejmujemy tu, samo przewinięcie blokuje skrypt w stopce.
 */
.woocommerce-Tabs-panel:focus {
	outline: none;
}

/*
 * Licznik przy ikonie koszyka: motyw daje mu biały tekst na białym tle,
 * więc liczba jest niewidoczna. Ustawiamy kontrast i kwadratowy kształt
 * spójny z resztą przycisków.
 */
.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--foreground, #352F45) !important;
	color: #fff !important;
	border-radius: 0 !important;
	min-width: 1.25rem;
	padding: 0 0.25rem;
	font-weight: 700;
	line-height: 1.25rem;
	text-align: center;
}

/* Nagłówek: logo urosło, więc ścinamy nadmiarowe powietrze nad i pod nim. */
.site-header .wp-block-columns {
	margin-block: 0;
}

.site-header .wp-block-site-logo {
	margin-block: 0;
}

.site-header > .wp-block-group {
	padding-top: 0.5rem;
}

/*
 * Mobile: nagłówek motywu ma kolumnę o sztywnej szerokości 280 px i kolumny
 * oznaczone jako „nie zwijaj na mobile”, przez co cała strona była szersza
 * od ekranu i przewijała się w poziomie. Pozwalamy im się zwinąć.
 */
@media (max-width: 781px) {
	.site-header .wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.site-header .fixed-column {
		width: auto !important;
		flex-basis: auto !important;
		flex-grow: 1;
	}

	.site-header .wp-block-column {
		min-width: 0;
	}
}