/* FN PDP Rich — CSS. Wyłącznie strona produktu (enqueue gated is_product() w .php).
   Zero selektorów spoza .single-product / .fn-brand-more / .fn-pdp-breadcrumbs — zero
   ryzyka wpłynięcia na PLP/kategorie/inne ekrany. Zmienne marki z fallbackiem literalnym
   (ten sam wzorzec co fn-design-pdp-tabs-reviews.css, bez zależności od kolejności ładowania
   Additional CSS post 19068). */

/* =========================================================================
 * 1) KARUZELA — wspólny komponent dla upsells / "Ostatnio oglądane" / "Więcej od marki".
 *    Konwersja natywnej siatki CSS-grid (grid-columns-4/wd-grid-g) na poziomy pasek
 *    overflow-x:auto + scroll-snap. Bez swiper/transition — natywny scroll przeglądarki
 *    działa nawet gdy JS jest zamrożony pętlą błędów sgw.stape.bg (GTM klienta).
 * ========================================================================= */
.single-product .related-and-upsells .upsells-carousel .products.wd-products,
.single-product .fn-recently-viewed .products.wd-products,
.single-product .fn-brand-more .products.wd-products {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 14px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0 !important;
	padding: 2px 2px 6px !important;
}
@media (prefers-reduced-motion: reduce) {
	.single-product .related-and-upsells .upsells-carousel .products.wd-products,
	.single-product .fn-recently-viewed .products.wd-products,
	.single-product .fn-brand-more .products.wd-products {
		scroll-behavior: auto;
	}
}
.single-product .related-and-upsells .upsells-carousel .products.wd-products::-webkit-scrollbar,
.single-product .fn-recently-viewed .products.wd-products::-webkit-scrollbar,
.single-product .fn-brand-more .products.wd-products::-webkit-scrollbar {
	display: none;
	height: 0;
}
.single-product .related-and-upsells .upsells-carousel .products.wd-products > .wd-product,
.single-product .fn-recently-viewed .products.wd-products > .wd-product,
.single-product .fn-brand-more .products.wd-products > .wd-product {
	flex: 0 0 212px !important;
	width: 212px !important;
	max-width: 212px !important;
	scroll-snap-align: start;
}
@media (max-width: 480px) {
	.single-product .related-and-upsells .upsells-carousel .products.wd-products > .wd-product,
	.single-product .fn-recently-viewed .products.wd-products > .wd-product,
	.single-product .fn-brand-more .products.wd-products > .wd-product {
		flex-basis: 172px !important;
		width: 172px !important;
		max-width: 172px !important;
	}
}

/* Powłoka (shell) wstrzykiwana przez JS wokół siatki — nosi strzałki. */
.fn-carousel-shell {
	position: relative;
}

/* NAPRAWA (znaleziona przy weryfikacji na żywo, nie zgadywana): motyw Woodmart ma w
   base.css globalny reset `:is(.btn, .button, button, [type="submit"], [type="button"]){
   position:relative; display:inline-flex; background-color:var(--btn-bgcolor,#F3F3F3);
   min-height:var(--btn-height,42px); ...}`. Selektor :is() liczy specyficzność od
   NAJBARDZIEJ specyficznego argumentu na liście (tu: .btn/.button, klasa = 0-1-0) — czyli
   cała reguła ma DOKŁADNIE tyle samo specyficzności co pojedyncza klasa .fn-car-arrow
   (też 0-1-0). Przy remisie wygrywa reguła PÓŹNIEJSZA w kaskadzie, a base.css motywu ładuje
   się PO moim pliku (potwierdzone przez document.styleSheets w przeglądarce) — więc
   `position:relative`+szare tło+wymuszone min-height PRZEBIJAŁY moje wartości, przez co
   przyciski nie leżały jako overlay nad miniaturką tylko jako zwykłe elementy w przepływie
   dokumentu (stąd "są w DOM, ale niewidoczne we właściwym miejscu"). Naprawione: KAŻDA
   właściwość, którą Woodmart mógłby przejąć, ma tu `!important` — stan bazowy jest
   WIDOCZNY zawsze, niezależnie od JS/kolejności ładowania arkuszy. */
.fn-car-arrow {
	position: absolute !important;
	top: 106px !important; /* środek miniaturki (nie środek całej karty z tekstem) na 212px */
	transform: translateY(-50%) !important;
	width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	min-width: 40px !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 1px solid #E7DAD4 !important;
	color: #2E2321 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	box-shadow: 0 4px 14px rgba(46, 35, 33, .14) !important;
	cursor: pointer !important;
	z-index: 5 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-transform: none !important;
	text-shadow: none !important;
	outline: none;
	/* Jawnie WYŁĄCZONY transition (nie samo "pominięcie" właściwości): baza motywu
	   `:is(.btn,.button,button,...)` ustawia `transition:0.25s` (bez listy właściwości =
	   "all"), więc bez jawnego przebicia Woodmart i tak animowałby zmianę tła na hover.
	   Dawid zaznaczył wprost "bez transition na background" — animacja bywała punktem,
	   gdzie mrożący się wątek (pętla sgw.stape.bg) zostawiał element w stanie POŚREDNIM
	   (jak przy toastach/mini-koszyku w innych plikach tego projektu). Zmiana koloru na
	   hover jest teraz w 100% natychmiastowa — zero ryzyka "zamrożenia w połowie animacji". */
	transition: none !important;
}
.fn-car-arrow:hover {
	background: #A34B65 !important;
	background-color: #A34B65 !important;
	border-color: #A34B65 !important;
	color: #ffffff !important;
}
.fn-car-arrow svg { display: block !important; pointer-events: none; }
.fn-car-prev { left: 8px !important; }
.fn-car-next { right: 8px !important; }
@media (max-width: 480px) {
	.fn-car-arrow {
		top: 86px !important; /* środek miniaturki przy karcie 172px (mobile) */
		width: 34px !important;
		height: 34px !important;
		min-height: 34px !important;
		min-width: 34px !important;
	}
	.fn-car-arrow svg { width: 15px !important; height: 15px !important; }
}

/* Chowanie strzałek — WYŁĄCZNIE przez klasę .is-hidden dodawaną przez JS BEZPOŚREDNIO na
   przycisku (nigdy na odwrót: baza jest zawsze widoczna z samego CSS powyżej, JS może
   tylko dołożyć ukrycie, gdy nie ma czego przewijać/jesteśmy na granicy). Jeśli JS się
   nie wykona (zamrożony wątek), przyciski zostają widoczne — bezpieczny stan domyślny,
   zgodnie z wymogiem "stan bazowy widoczny z samego CSS". */
.fn-car-arrow.is-hidden {
	display: none !important;
}

/* Pasek postępu — chowany tą samą logiką, ale na wspólnym .wd-products-element (jest
   tylko jeden na sekcję, nie ma potrzeby stosowania .is-hidden per-element jak dla 2
   strzałek). */
.wd-products-element.fn-car-no-overflow .fn-car-progress {
	display: none;
}

/* Pasek postępu pod karuzelą — JS aktualizuje szerokość wypełnienia na scroll; gdy JS
   zamarznie, pasek po prostu stoi w miejscu (karuzela nadal działa dotykiem/kółkiem). */
.fn-car-progress {
	height: 3px;
	background: #EFE3DD;
	border-radius: 3px;
	margin: 10px 4px 0;
	overflow: hidden;
}
.fn-car-progress-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #C9A15A, #A34B65);
	transition: width .12s linear;
}

/* =========================================================================
 * 3) SEKCJA "WIĘCEJ OD {MARKA}".
 * ========================================================================= */
.fn-brand-more {
	max-width: 1240px;
	margin: 40px auto 0;
	padding-left: 15px;
	padding-right: 15px;
}
.fn-brand-more-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0 0 18px;
}
.fn-brand-more-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 28px;
	font-weight: 600;
	color: #2E2321;
	margin: 0;
}
.fn-brand-more-link {
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #A34B65;
	text-decoration: none;
	white-space: nowrap;
}
.fn-brand-more-link:hover {
	color: #7E3A4F;
	text-decoration: underline;
}

/* =========================================================================
 * 4) CHIP DOSTĘPNOŚCI — restyling natywnego <p class="stock ...">, jeden komunikat.
 *    UWAGA: ".summary-inner" zawiera TAKŻE ".woobt-wrap" (box "Kup razem"/"Dokończ
 *    stylizację"), a KAŻDA pozycja w tym boxie ma WŁASNY, osobny <p class="stock ...">
 *    (.woobt-availability p.stock) pokazujący dostępność DANEGO skladnika zestawu — to
 *    inna, legalna funkcja (per-produktowa dostępność w bundle), nie duplikat komunikatu
 *    głównego produktu, i NIE wolno jej przestylowywać na chip (kolidowałoby z ciemnym,
 *    złotym motywem tego boxu z fn-design-pdp-polish.php, ktorego nie wolno ruszac).
 *    Dlatego selektor celuje WYŁĄCZNIE w <p class="stock"> będące BEZPOŚREDNIM dzieckiem
 *    ".summary-inner" (potwierdzone w żywym DOM: to jedyny stock głównego produktu na tym
 *    poziomie zagnieżdżenia) — kombinator ">" wyklucza głębiej zagnieżdżone .woobt-* .
 * ========================================================================= */
.single-product div.product .summary-inner > p.stock {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	width: auto !important;
	margin: 2px 0 16px !important;
	padding: 6px 14px 6px 11px !important;
	border-radius: 999px !important;
	background: #F3E9E5 !important;
	border: none !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #2E2321 !important;
}
.single-product div.product .summary-inner > p.stock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	background: #6B8F71; /* domyślnie zielony (in-stock) */
}
.single-product div.product .summary-inner > p.stock.out-of-stock {
	background: #F1EAE6 !important;
	color: #756A65 !important;
}
.single-product div.product .summary-inner > p.stock.out-of-stock::before {
	background: #8B7D77;
}
.single-product div.product .summary-inner > p.stock.available-on-backorder::before {
	background: #C9A15A;
}

/* =========================================================================
 * 5) BREADCRUMBS (rank_math_the_breadcrumbs()).
 * ========================================================================= */
.single-product .fn-pdp-breadcrumbs {
	margin: 14px 0 2px;
	max-width: 1240px;
}
.single-product .fn-pdp-breadcrumbs .rank-math-breadcrumb {
	display: block;
}
.single-product .fn-pdp-breadcrumbs .rank-math-breadcrumb p {
	margin: 0;
}
.single-product .fn-pdp-breadcrumbs,
.single-product .fn-pdp-breadcrumbs a,
.single-product .fn-pdp-breadcrumbs .last,
.single-product .fn-pdp-breadcrumbs .separator {
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
}
.single-product .fn-pdp-breadcrumbs a {
	color: #8B7D77;
	text-decoration: none;
}
.single-product .fn-pdp-breadcrumbs a:hover {
	color: #A34B65;
	text-decoration: underline;
}
.single-product .fn-pdp-breadcrumbs .last {
	color: #2E2321;
	font-weight: 600;
}
.single-product .fn-pdp-breadcrumbs .separator {
	color: #C9BAB3;
	padding: 0 3px;
}