/* ==========================================================================
   Strona produktu — sygnatura „The Painter's Afterglow" per obraz.
   Aurora w barwach samego płótna (kolory ustawia assets/js/product.js;
   tu żyje fallback), pokoje .gd-morph, blok zaufania, „Z tej kolekcji",
   wzmocniony stan „Sprzedane". Ładowane warunkowo tylko na is_product().
   Rdzeń układu produktu (.gd-product*, .gd-donation-note, .gd-sold-badge)
   żyje w style.css — tu wyłącznie warstwa sygnaturowa.
   ========================================================================== */

/* Test pipeline'u deploy.yml po Kroku zerowym, 2026-08-19 — do usunięcia po weryfikacji. */

/* --- Dostępność: nagłówek "O obrazie" bez zmiany wyglądu ---------------- *
   [gd_product_label key="about"] renderuje realny <h2> obok wizualnej
   etykiety .gd-eyebrow, żeby sekcja była widoczna dla nawigacji nagłówkami
   czytnika ekranu (patrz inc/product-page.php). Standardowy wzorzec
   "visually hidden" — nie display:none, bo to usunęłoby element z drzewa
   dostępności. */
.gd-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Pokój 1: showcase -------------------------------------------------- */
/* main.gd-main już odsuwa treść od fixed-headera, więc górny odstęp mały. */
.gd-product-showcase {
	position: relative;
	/* Aurora (position:absolute) nie może wyjść poza szerokość ekranu.
	   body{overflow-x:clip} tego nie utnie — obcina potomków absolutnych tylko
	   element POZYCJONOWANY, a showcase nim jest. Oś X obcinamy, oś Y (pionowy
	   blask aurory) i sticky media zostają nietknięte. */
	overflow-x: clip;
	padding-block: clamp(1rem, 3vh, 2rem) clamp(4rem, 9vh, 7rem);
}

/* Strona produktu zaczyna się od ciemnego tła body. Transparentny fixed header
   nad tłem wygląda na desktopowym Chrome jak ciemny pas u góry — szczególnie
   gdy pod nim nie ma jeszcze kolorowej aurory. Dajemy headerowi na stronach
   produktów jednolite tło zgodne z body, a szkło pojawia się dopiero po scrollu.
   iOS używa od początku jednolitego tła przez .gd-ios-scrollport. */
body.single-product:not(.gd-ios-scrollport) .gd-header:not(.is-scrolled) {
	background: var(--gd-bg);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* --- Aurora tego obrazu — plamy koloru za płótnem ----------------------- */
.gd-product__media { isolation: isolate; }

/* Jedna wspólna oś dla wszystkich sekcji kolumny detali. */
.gd-product__layout .gd-product__details {
	align-items: stretch;
	min-width: 0;
}

.gd-product-blobs {
	position: absolute;
	inset: -16% -6% -16% -28%;
	z-index: 0;
	pointer-events: none;
}

/* Galeria płótna świeci ponad aurorą. Frameless: obraz JEST powierzchnią
   (DESIGN.md „żadnego pudła za nim") — zdejmujemy tło surface z kafla i wrappera,
   żeby żaden sub-pikselowy pasek nie prześwitywał wokół płótna. Cień i 4px radius
   (style.css) zostają, więc płótno wciąż „wisi na ścianie". */
.gd-product__media .woocommerce-product-gallery,
.gd-product__media .wp-block-woocommerce-product-image-gallery {
	position: relative;
	z-index: 1;
	background: transparent;
}

.gd-product__media .woocommerce-product-gallery__wrapper {
	background: transparent;
}

/* WooCommerce daje galerii domyślne 2em marginesu na dole (rezerwa pod miniatury);
   przy jednym zdjęciu to tylko ciemny pasek tła pod płótnem — kasujemy.
   Odstęp obraz↔miniatury zapewnia osobno .flex-control-thumbs (style.css). */
.gd-product__media .woocommerce-product-gallery {
	margin-bottom: 0 !important;
}

.gd-product-blobs .gd-blob {
	position: absolute;
	z-index: auto;
	margin: 0;
}

.gd-blob--art-1 {
	width: 82%; height: 66%;
	top: -8%; left: -6%;
	opacity: 0.62;
	background: radial-gradient(circle at 32% 32%, var(--gd-art-1, var(--gd-cobalt)), transparent 66%);
}

.gd-blob--art-2 {
	width: 66%; height: 58%;
	bottom: -10%; right: -4%;
	opacity: 0.5;
	background: radial-gradient(circle at 60% 40%, var(--gd-art-2, var(--gd-magenta)), transparent 66%);
}

.gd-blob--art-3 {
	width: 48%; height: 44%;
	top: 34%; left: 28%;
	opacity: 0.38;
	background: radial-gradient(circle at 50% 50%, var(--gd-art-3, var(--gd-orange)), transparent 62%);
}

/* --- Blok zaufania kolekcjonera ---------------------------------------- */
.gd-product-trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.gd-product-trust li {
	position: relative;
	padding-left: 1.4rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--gd-muted);
}

.gd-product-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.42rem;
	height: 0.42rem;
	border-radius: 50%;
	background: var(--gd-ochre-bright);
}

.gd-product-trust strong {
	color: var(--gd-cream);
	font-weight: 600;
}

/* --- Specyfikacja dzieła (wymiary · technika · rok, z atrybutów produktu) - */
.gd-artwork-specs {
	margin: 0;
	display: flex;
	flex-direction: column;
	border-top: var(--gd-border-subtle);
}

.gd-artwork-specs__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding: 0.7rem 0;
	border-bottom: var(--gd-border-subtle);
}

.gd-artwork-specs dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gd-muted);
}

.gd-artwork-specs dd {
	margin: 0;
	font-family: var(--gd-font-body);
	font-size: 0.95rem;
	color: var(--gd-cream);
	text-align: right;
}

/* --- Ścieżka pytania przedzakupowego (przy koszyku, gdy dostępny) -------- */
.gd-product-inquire { margin: 0.25rem 0 0; }

.gd-product-inquire a {
	font-family: var(--gd-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gd-muted);
	transition: color 0.3s var(--gd-ease);
}

.gd-product-inquire a:hover { color: var(--gd-ochre-bright); }

/* Produkt opublikowany przed zatwierdzeniem danych: spokojny status redakcyjny
   i droga kontaktu, bez udawania kolejnej karty lub komunikatu systemowego. */
.gd-product-readiness {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	max-width: 36rem;
	margin: 0.25rem 0 0;
}

/* Stan „w przygotowaniu" bywa jedyną treścią całej kolumny detali (dopóki Agata
   nie zatwierdzi ceny/wymiarów/opisu — dziś dotyczy wszystkich 5 obrazów).
   Bez własnego tła i rytmu ta pusta kolumna czyta się jak niedokończona strona,
   zwłaszcza na wąskich ekranach. Karta na Plum Surface (jedyna „podniesiona"
   powierzchnia systemu) daje jej ciężar bez cienia (Flat Wall, Lit Canvas Rule —
   DESIGN.md „Elevation & Depth"): separację robi tu ton, nie box-shadow. */
.gd-product-not-ready {
	gap: 0.85rem;
	max-width: 30rem;
	padding: 1.5rem 1.5rem;
	background: var(--gd-surface);
	border-radius: 10px;
	border: var(--gd-border-subtle);
}

.gd-product-readiness__status {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--gd-cream);
}

.gd-product-not-ready .gd-product-readiness__status::before {
	content: "";
	flex: 0 0 auto;
	width: 0.42rem;
	height: 0.42rem;
	margin-top: 0.55em;
	border-radius: 50%;
	background: var(--gd-ochre-bright);
}

/* Zdanie kuratorskie: dlaczego stan „w przygotowaniu" jest sensowny, nie zepsuty.
   Rejestr wielkości jak .gd-product-inquire i sold-note (0.9rem to funkcyjny
   krok „small body copy" z DESIGN.md typography.scale — collector trust list
   i sold mission line używają tej samej wartości). */
.gd-product-readiness__note {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--gd-muted);
}

/* --- Zdanie misyjne na stronie sprzedanego obrazu ---------------------- */
.gd-mission-note {
	margin: 0.25rem 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--gd-muted);
}

/* --- Stan „Sprzedane" na stronie produktu ------------------------------ */
/* Plakietkę i przygaszenie obrazu wstrzykuje inc/product-page.php;
   .gd-sold-badge i .gd-is-sold img mają style w style.css. */
.gd-product__media .gd-is-sold { position: relative; }

.gd-product-sold-note {
	margin: 0.25rem 0 0;
	font-family: var(--gd-font-display);
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.4;
	color: var(--gd-muted);
}

.gd-product-sold-note a {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: var(--gd-font-body);
	font-style: normal;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gd-ochre-bright);
	transition: color 0.3s var(--gd-ease);
}

.gd-product-sold-note a:hover { color: var(--gd-cream); }

/* --- Stan „W koszyku" po dodaniu (AJAX, product-cart.js, lub server-side po
   odświeżeniu — inc/product-page.php gorna_design_in_cart_markup()) --------- */
.gd-in-cart__status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.85rem;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--gd-teal, #2E7D6B);
}

.gd-in-cart__status::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background: var(--gd-teal, #2E7D6B);
	color: var(--gd-cream);
	font-size: 0.75em;
}

.gd-in-cart__link {
	opacity: 0.92;
}

.gd-in-cart__link:hover {
	opacity: 1;
}

/* --- Pokój 2: O obrazie (na .gd-section, więc zerujemy własne odstępy) --- */
.gd-product-about .gd-product__description {
	margin-block: 0;
	padding-top: 0;
	border-top: 0;
}

/* --- Pokój 3: Z tej kolekcji ------------------------------------------- */
.gd-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 3.5vw, 3rem);
	max-width: 1360px;
	margin-inline: auto;
}

/* Poświata reflektora przy hoverze (frame jest tu <div>, nie blok Woo) */
.gd-related-grid .gd-artwork__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(14, 12, 29, 0.45), transparent 45%);
	opacity: 0;
	transition: opacity 0.5s var(--gd-ease);
	pointer-events: none;
}

.gd-related-grid .gd-artwork:hover .gd-artwork__frame::after { opacity: 1; }

.gd-related-price {
	margin: 0.35rem 0 0;
	font-family: var(--gd-font-body);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--gd-ochre-bright);
	white-space: nowrap;
}

/* Cena + status dostępności obok siebie w kolumnie meta (patrz .gd-artwork__meta,
   style.css) — .gd-artwork__availability/.gd-price--available zostają nietknięte,
   to tylko lokalny wrapper dla par cena+dostępność w tej siatce. */
.gd-related-grid .gd-related-status {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.35rem;
}

.gd-related-grid .gd-related-status .gd-related-price {
	margin-top: 0;
}

.gd-related-empty {
	text-align: center;
	margin: 0;
}

.gd-related-empty a {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gd-ochre-bright);
}

/* --- Responsywność (spójna z siatką galerii) --------------------------- */
@media (max-width: 881px) {
	.gd-related-grid { grid-template-columns: repeat(2, 1fr); }
	/* aurora zawężona, gdy media wraca do jednej kolumny (patrz 1080px) */
}

@media (max-width: 560px) {
	.gd-related-grid { grid-template-columns: 1fr; }
	/* Na telefonie mocniej kadrujemy płótno, by cena + CTA były bliżej. */
	.gd-product__media .woocommerce-product-gallery__image img { max-height: 62vh; }
}

/* Gdy layout produktu spada do jednej kolumny (style.css ustawia tu media na
   position:static): kotwiczymy aurorę z powrotem przy płótnie (relative, nie
   sticky) i zdejmujemy poziomy bleed — resztę i tak obcina overflow-x na showcase.
   Kadrujemy też wysokość płótna, żeby cena + „Do koszyka" były osiągalne bez
   przewijania całego obrazu na cały ekran (persona Casey). */
@media (max-width: 1080px) {
	/* Jedna kolumna: kotwica dla aurory + wyśrodkowanie skadrowanego płótna.
	   W landscape (krótki, szeroki viewport) płótno kadrowane wysokością robi się
	   wąskie — flex/align-items:center zbiera je do środka (symetryczna przestrzeń),
	   zamiast zostawiać pustkę tylko po prawej. */
	.gd-product__media {
		/* relative (nie static) potrzebne, by aurora (position:absolute) kotwiczyła
		   się przy płótnie. ALE: desktop ustawia sticky `top: calc(header + 1.5rem)`
		   (~104px); przy relative ten offset przesuwałby cały blok w dół BEZ rezerwacji
		   miejsca, przez co skadrowane płótno nachodziło na detale (eyebrow „Obrazy").
		   `top: auto` zeruje odziedziczony offset sticky. */
		position: relative;
		top: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.gd-product-blobs { inset: -8% 0; }
	.gd-product__media .woocommerce-product-gallery,
	.gd-product__media .wp-block-woocommerce-product-image-gallery {
		width: fit-content;
		max-width: 100%;
	}
	/* Wysokość .flex-viewport (kontener nad którym „wisi" aktualne zdjęcie) CELOWO
	   nie jest tu w ogóle dotykana. WooCommerce włącza flexsliderowi opcję
	   `smoothHeight: true` (patrz plugins/woocommerce/includes/class-wc-frontend-scripts.php),
	   więc flexslider SAM przelicza .flex-viewport do wysokości aktywnego slajdu
	   przy KAŻDEJ zmianie zdjęcia (funkcja smoothHeight() w jquery.flexslider.js,
	   wywoływana z flexAnimate() po każdej animacji) — to już działa natywnie,
	   z własnym transition:height.
	   Dwie próby „poprawienia" tego w tej sesji (2026-08-31, zgłoszenie: pusta
	   przestrzeń pod poziomym kadrem „Przenikanie" na mobile) skończyły się gorzej
	   niż oryginalny bug:
	   1) `height: auto !important` na .flex-viewport/.wrapper/.image dla WSZYSTKICH
	      slajdów naraz — flexslider trzyma wszystkie 6 miniatur w jednym opływającym
	      rzędzie, więc auto-wysokość (via BFC z overflow:hidden) liczyła się jako
	      maksimum ze WSZYSTKICH, nie z faktycznie widocznego zdjęcia.
	   2) Poprawka „height:0 na nieaktywne slajdy, auto tylko na .flex-active-slide" —
	      naprawiała (1), ale height:0 = offsetHeight 0 = element „niewidoczny" dla
	      jQuery/flexslidera, co ubiło przełączanie na kolejne zdjęcia („poza pierwszym
	      obrazem żaden kolejny się nie wyświetla").
	   3) Własny JS w product.js (MutationObserver + ręczne ustawianie
	      .style.height), napisany zanim odkryto, że smoothHeight jest już
	      włączone — okazał się całkowicie zbędny: flexslider i tak już robi
	      dokładnie to, co ten JS próbował robić ręcznie. Usunięty.
	   Skoro flexslider sam zarządza wysokością .flex-viewport, JEDYNE co CSS musi
	   zapewnić to poprawne kadrowanie samego obrazu (niżej) — reszta dzieje się
	   automatycznie. */
	.gd-product__media .woocommerce-product-gallery__image img {
		max-height: 74vh;
		width: auto !important;
		height: auto;
		margin-inline: auto;
		display: block;
	}
}

/* W jednokolumnowym układzie tabletowym specyfikacja zachowuje pełną szerokość,
   ale akcja zakupowa pozostaje poręczna zamiast zmieniać się w pas sekcyjny. */
@media (min-width: 561px) and (max-width: 1080px) {
	.gd-product__details .wp-block-add-to-cart-form form.cart {
		max-width: 36rem;
	}
}

/* Landscape na telefonie (krótki, szeroki viewport): portretowe płótno i tak jest
   węższe niż ekran (nieuniknione), więc dajemy mu maksimum wysokości = realną
   obecność, wyśrodkowane jak płótno na ścianie galerii. */
@media (max-width: 1080px) and (orientation: landscape) {
	.gd-product__media .woocommerce-product-gallery__image img {
		max-height: 90vh;
	}
}

/* --- Audyt: tap-targety i kontrast (P2/P3) ----------------------------- */
/* Przycisk zoom galerii — min. 44×44 (WCAG 2.5.8). WooCommerce rysuje lupę
   przez ::before (soczewka) + ::after (rączka) na sztywnych px skalibrowanych
   pod natywne 36px; po powiększeniu boxa do 44px przesuwamy całą kompozycję
   sztywno o +4px (zachowując kształt), żeby wróciła do środka. */
.gd-product__media .woocommerce-product-gallery__trigger {
	min-width: 44px;
	min-height: 44px;
	display: flex;
}

.gd-product__media .woocommerce-product-gallery__trigger::before {
	top: 13px !important;
	left: 13px !important;
}

.gd-product__media .woocommerce-product-gallery__trigger::after {
	top: 23px !important;
	left: 26px !important;
}

/* Urządzenia dotykowe: linki tekstowe dostają hit-area ≥44px bez zmiany desktopu. */
@media (pointer: coarse) {
	.gd-product-inquire a,
	.gd-product-sold-note a,
	.gd-related-empty a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}