/*
 * Style wnętrza szuflady mini-koszyka (inc/mini-cart.php) — wydzielone z
 * woocommerce.css 2026-09-15 (audyt regresji PageSpeed mobile: 73→68/100 po
 * pierwszym wdrożeniu mini-koszyka bez React). Szuflada jest `hidden` do
 * pierwszego kliknięcia ikony koszyka, więc ten CSS nie jest potrzebny do
 * pierwszego malowania strony — mimo to, jako część głównego, łączonego przez
 * LiteSpeed pliku CSS, blokował render na KAŻDEJ stronie. Ładowany osobno,
 * nieblokująco (rel=preload + swap na stylesheet, patrz enqueue w
 * inc/mini-cart.php) — przycisk/plakietka w nagłówku (.gd-cart-trigger*,
 * potrzebne od razu) zostają w style.css, tu tylko wnętrze panelu.
 */

/* Szuflada koszyka (zamiennik React Mini-Cart Blocka, patrz inc/mini-cart.php i
   assets/js/cart-drawer.js) — cała chrome drawera (tło, slide-in, backdrop) budowana
   od zera, bo blok dostarczał ją wcześniej sam ze swoich domyślnych styli
   (wc-blocks-packages-style-css), których teraz w ogóle nie ładujemy. */
.gd-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	pointer-events: none;
}
.gd-cart-drawer[hidden] {
	/* Nadpisuje domyślne UA `display: none` dla [hidden] — potrzebujemy elementu
	   w layoucie (choć niewidocznego/nieinteraktywnego), żeby transitionend miał
	   szansę zadziałać przy zamykaniu (patrz assets/js/cart-drawer.js). */
	display: block;
}
.gd-cart-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}
.gd-cart-drawer::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Ten sam odcień co istniejące box-shadow w style.css (.gd-artwork__frame itp.,
	   rgba(0,0,0,0.65)) — nie nowa wartość, tylko ten sam czarny scrim w innym użyciu. */
	background: rgba(0, 0, 0, 0.65);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.gd-cart-drawer.is-open::before {
	opacity: 1;
}
.gd-cart-drawer__panel {
	/* position:absolute + top/right/bottom:0 (NIE display:flex + height:100% na
	   rodzicu) — po zgłoszeniu, że panel po przewinięciu strony renderował się z
	   niepoprawną, znacznie mniejszą wysokością (zweryfikowane: computed height
	   spadało z 929px do ok. 79px po pewnych sekwencjach interakcji). Wysokość
	   liczona wprost z top+bottom, niezależnie od procentowego `height` na dziecku
	   flex — odporne na tę klasę błędów z definicji, nie tylko w tym jednym
	   przypadku, który udało się złapać. */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: min(26rem, 100vw);
	box-sizing: border-box;
	overflow-y: auto;
	background: var(--gd-void, #0E0C1D);
	color: var(--gd-cream, #F4EFE6);
	/* Górny padding większy niż reszta — .gd-cart-drawer__close jest position:absolute
	   (wyjęty z przepływu), więc bez tego pierwsza pozycja koszyka (jej własny przycisk
	   .remove, też top:0 względem SIEBIE) nachodzi na przycisk zamknięcia szuflady —
	   oba lądowały w tym samym rogu. 4.5rem = wysokość przycisku zamknięcia (24px top +
	   padding 0.5rem + font-size 1.5rem + padding 0.5rem) z zapasem. */
	padding: 4.5rem 24px 24px;
	/* rgba(0,0,0,0.5) — ten sam odcień co drugi człon istniejących podwójnych cieni
	   w style.css (np. .gd-artwork__frame, "0 10px 30px rgba(0, 0, 0, 0.5)"). */
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
	transform: translateX(100%);
	transition: transform 0.25s ease;
}
.gd-cart-drawer.is-open .gd-cart-drawer__panel {
	transform: translateX(0);
}

/* Przycisk zamknięcia szuflady — ten sam rytm odstępu (24px) co dawny blokowy drawer. */
.gd-cart-drawer__close {
	position: absolute;
	top: 24px;
	right: 24px;
	background: none;
	border: none;
	color: var(--gd-cream, #F4EFE6);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.5rem;
}

/* Lista pozycji w szufladzie koszyka (klasyczny markup WooCommerce, templates/
   cart/mini-cart.php) — bez tego zdjęcie renderuje się w naturalnym rozmiarze
   (pełna szerokość, nachodząc na tytuł), bo classic mini-cart nigdy wcześniej nie
   był w tym motywie używany/stylowany (blok Mini-Cart miał własny, gotowy CSS). */
.woocommerce-mini-cart {
	list-style: none;
	/* !important: ".woocommerce ul.cart_list" z WC (wyższa swoistość) narzuca margin:0 —
	   bez tego dolny odstęp przed .woocommerce-mini-cart__total znika. */
	margin: 0 0 1.25rem !important;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* WooCommerce ładuje własny woocommerce-general.css OBOK naszego pliku
   (add_theme_support('woocommerce') nie wyłącza domyślnych styli wtyczki, tylko
   włącza jej funkcje) — jego selektory (".woocommerce ul.cart_list li img",
   ".widget_shopping_cart .cart_list li" itd.) mają wyższą swoistość niż nasze
   pojedyncze klasy poniżej (padding-left:2em, img float:right;width:32px, .remove
   left:0 zamiast right:0) i WYGRYWAJĄ mimo późniejszej kolejności w kaskadzie —
   stąd !important tam, gdzie naprawdę nadpisujemy konkretną, znaną regułę wtyczki,
   nie "na wszelki wypadek". */
.woocommerce-mini-cart-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-left: 0 !important;
	padding-right: 1.75rem; /* miejsce na przycisk usuwania (absolutny, w rogu) */
	/* Ten sam element (identyczna szerokość panelu, identyczny markup) renderował
	   tytuł/ilość różnie na /koszyk/ niż na stronie produktu — strona koszyka
	   (WooCommerce Cart Block) ładuje dodatkowy CSS bloków, którego nie ma na
	   stronie produktu, a domyślne `min-width:auto` na fleksie sprawia, że
	   dostępna przestrzeń dzieli się między tytuł i ilość nieprzewidywalnie w
	   zależności od tego, co jeszcze wpłynie na kaskadę. min-width:0 (tu i niżej)
	   i flex-shrink:0 na .quantity usuwają tę zależność — układ ma być identyczny
	   niezależnie od strony. */
	min-width: 0;
}

.woocommerce-mini-cart-item > a:not(.remove) {
	display: flex !important; /* bije ".widget_shopping_cart .cart_list li a{display:block}" z WC (wyższa swoistość) */
	align-items: center;
	gap: 0.5rem;
	min-width: 0; /* pozwala tytułowi kurczyć się/zawijać przewidywalnie zamiast blokować flex na szerokości treści */
	color: inherit;
	text-decoration: none;
	/* !important: WC ma ".woocommerce ul.cart_list li a{font-weight:700}", ale TYLKO
	   gdy <body> ma dosłowną klasę "woocommerce" — na /koszyk/ (zwykła strona z
	   osadzonym blokiem Cart, body ma "woocommerce-cart", nie "woocommerce") ta
	   reguła w ogóle nie działa, więc tytuł wychodził różnie pogrubiony zależnie
	   od strony. Jawna wartość usuwa tę zależność od tego, co akurat jest w body_class. */
	font-weight: 600 !important;
}

.woocommerce-mini-cart-item img {
	float: none !important;
	/* 3.25rem (nie 4rem) — tytuły produktów potrzebują tu każdego dostępnego piksela,
	   żeby zmieścić się w jednej linii przy szerokości panelu 26rem (patrz komentarz
	   przy .woocommerce-mini-cart-item o niedeterministycznym dzieleniu przestrzeni). */
	width: 3.25rem !important;
	height: 3.25rem !important;
	margin: 0 !important;
	flex: 0 0 auto;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: none;
}

.woocommerce-mini-cart-item .quantity {
	display: block;
	flex-shrink: 0; /* zawsze naturalna szerokość — inaczej dzieli się nieprzewidywalnie z tytułem (patrz komentarz przy .woocommerce-mini-cart-item) */
	white-space: nowrap;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: var(--gd-cream, #F4EFE6);
	opacity: 0.75;
}

.woocommerce-mini-cart-item .remove {
	position: absolute !important;
	top: 0 !important;
	left: auto !important;
	right: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	opacity: 0.7;
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
}
/* Swoistość: WC ma ".woocommerce a.remove{color:var(--wc-red)!important}" — (0,2,1),
   ta sama jak dosłowne ".woocommerce-mini-cart-item .remove" (0,2,0) BY samo
   !important nie wystarczyło (przegrywało na elemencie "a"). Dopisujemy "a" +
   drugą klasę z realnego markupu (remove_from_cart_button), żeby definitywnie
   wygrać (0,3,1) niezależnie od kolejności w kaskadzie — a nie liczyć na to, że
   nasz plik ładuje się później. Gated za dosłowną klasą "woocommerce" na <body>
   (patrz komentarz przy font-weight tytułu wyżej), więc bez tego przycisk
   wychodził raz czerwony (WC), raz kremowy (nasz), zależnie od strony. */
.woocommerce-mini-cart-item a.remove.remove_from_cart_button {
	color: var(--gd-cream, #F4EFE6) !important;
}
.woocommerce-mini-cart-item .remove:hover {
	opacity: 1;
}

.woocommerce-mini-cart__total {
	margin: 0 0 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(244, 239, 230, 0.09);
}

.woocommerce-mini-cart__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* Przyciski "Zobacz koszyk"/"Przejdź do kasy" dziedziczyły font-size, padding i
   letter-spacing (wszystkie trzy w em, więc zależne od kontekstu) z otoczenia
   strony — na /koszyk/ wychodziły zauważalnie większe/szersze niż na stronie
   produktu, mimo identycznego markupu (button wc-forward wp-element-button),
   co przy wąskiej szufladzie (mobile) powodowało, że oba przyciski mieściły się
   obok siebie na jednej stronie, a na drugiej łamały się jeden pod drugi.
   Zrównanie samego font-size NIE WYSTARCZYŁO — padding/letter-spacing okazały
   się częściowo NIEZALEŻNE od font-size tego elementu (dziedziczone z innego
   kontekstu), więc jawne rem (nie em) na wszystkich trzech, żeby całkowicie
   odciąć zależność od tego, jaki kontekst typograficzny akurat obowiązuje
   w miejscu, gdzie strona osadza [gd_cart_trigger]. */
.woocommerce-mini-cart__buttons .button {
	font-size: 0.78125rem !important;
	/* 1.5rem w poziomie (nie 1.8rem) — przy panelu ograniczonym do 26rem oba
	   przyciski razem z gapem 0.75rem mieściły się w dostępnej szerokości z
	   zapasem mniejszym niż 1px (zweryfikowane pomiarem) — jedna, dowolna
	   subpikselowa różnica renderowania i zawijały się jeden pod drugi. */
	padding: 0.85rem 1.5rem !important;
	letter-spacing: 0.08rem !important;
}