/* ==================================================================
   Ostatnio oglądane produkty
   ------------------------------------------------------------------
   Cienka nakładka na builder-products-carousel.css i shop.css —
   kafelki mają wyglądać dokładnie tak jak na listingu sklepu.
   Tutaj tylko: odstępy sekcji, nagłówek, reset siatki na karuzelę
   i strzałki (przesunięte do środka, żeby sekcja mogła żyć również
   wewnątrz cudzego .container — np. na karcie produktu).
   ================================================================== */

.recently-viewed-mount[hidden] {
	display: none;
}

.recently-viewed__inner {
	position: relative;
}

.recently-viewed__carousel-wrap {
	position: relative;
}

/* --- nagłówek: ta sama skala co "Podobne produkty" ---------------- */

.recently-viewed .recently-viewed__title {
	margin: 0 0 48px;
	font-family: var(--accent-font);
	font-size: 40px;
	line-height: 48px;
	font-weight: 500;
	color: var(--grey-900);
	text-align: center;
}

/* --- odstępy sekcji zależnie od miejsca --------------------------- */

.recently-viewed.recently-viewed--single {
	padding: 0 0 60px;
}

.recently-viewed.recently-viewed--archive {
	padding: 0 0 100px;
}

.recently-viewed.recently-viewed--cart {
	padding: 24px 0 80px;
}

/* --- karuzela ----------------------------------------------------
   Musi wygrać z .woocommerce ul.products (flex-wrap + gap 64px/24px)
   oraz z .woocommerce-shop.woocommerce ul.products (padding).
   Stąd celowo długi selektor.
   ---------------------------------------------------------------- */

.recently-viewed ul.products.products-carousel__carousel.recently-viewed__carousel {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	align-items: stretch;
}

.recently-viewed .swiper-wrapper {
	align-items: stretch;
}

/* Szerokość kafelka ustala CSS, nie Swiper (patrz komentarz w
   js/recently-viewed.js przy slidesPerView: 'auto').
   !important jest konieczne, bo motyw na archiwach wymusza
   `.archive.woocommerce-page ul.products li.product
    { width: calc(50% - 36px) !important }` — bez tego na telefonie
   w sklepie i na kategorii wchodziły ~3 kafelki zamiast 1.
   Selektor musi mieć wyższą specyficzność niż tamta reguła (0,4,2).
   Wartości = dokładnie to, co liczył wcześniej Swiper:
   (100% - spaceBetween * (liczba-1)) / liczba. */

.recently-viewed ul.products.recently-viewed__carousel li.product.swiper-slide {
	width: 100% !important;
}

@media (min-width: 640px) {
	.recently-viewed ul.products.recently-viewed__carousel li.product.swiper-slide {
		width: calc((100% - 24px) / 2) !important;
	}
}

@media (min-width: 992px) {
	.recently-viewed ul.products.recently-viewed__carousel li.product.swiper-slide {
		width: calc((100% - 48px) / 3) !important;
	}
}

@media (min-width: 1200px) {
	.recently-viewed ul.products.recently-viewed__carousel li.product.swiper-slide {
		width: calc((100% - 108px) / 4) !important;
	}
}

.recently-viewed .products-carousel__carousel__item {
	height: auto;
}

/* --- strzałki ----------------------------------------------------
   Wygląd bierzemy W CAŁOŚCI z motywu: body .swiper-animated-pagination--prev
   / --next w main.css (białe kółko 64px / 48px na mobile, obwódka
   --grey-300, hover na strzałce, ripple, :active i wygaszony glif
   :after Swipera). Tutaj tylko pozycja — builder wystawia je 48px poza
   kontener, a nasza sekcja bywa zagnieżdżona w cudzym .container, więc
   trzymamy je przy krawędziach karuzeli — oraz chowanie, gdy nie ma
   czego przewijać.
   ---------------------------------------------------------------- */

.recently-viewed .products-carousel__container__pagination .swiper-animated-pagination-container--prev,
.recently-viewed .products-carousel__container__pagination .swiper-animated-pagination-container--next {
	/* KLUCZOWE. Kontener strzałki ma z buildera `transform: translateY(-50%)`,
	   a transform zakłada własny kontekst stackingu — przez to z-index: 750
	   z przycisku (main.css) zostaje ZAMKNIĘTY w środku i nie liczy się na
	   zewnątrz. Sam kontener ma z-index: auto, więc maluje się w warstwie
	   niżej niż `.swiper-wrapper`, który w CSS Swipera ma z-index: 1.
	   Efekt: strzałki lądują POD kafelkami — widać je tylko tam, gdzie
	   wystają poza kartę, i nie da się w nie kliknąć.
	   W karuzeli builderowej problem nie wychodzi, bo tam strzałki stoją
	   48px POZA karuzelą i nigdy nie nachodzą na `.swiper-wrapper`. */
	z-index: 10;
}

.recently-viewed .products-carousel__container__pagination .swiper-animated-pagination-container--prev {
	left: 8px;
}

.recently-viewed .products-carousel__container__pagination .swiper-animated-pagination-container--next {
	right: 8px;
}

.recently-viewed .swiper-button-disabled,
.recently-viewed .swiper-button-lock {
	opacity: 0;
	pointer-events: none;
}

/* --- awaryjnie: brak Swipera = zwykły, przewijalny rząd ----------- */

.recently-viewed--plain .swiper-wrapper {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	padding-bottom: 8px;
	scroll-snap-type: x mandatory;
}

.recently-viewed--plain .swiper-slide {
	flex: 0 0 260px;
	width: 260px;
	scroll-snap-align: start;
}

.recently-viewed--plain .products-carousel__container__pagination {
	display: none;
}

/* --- mobile ------------------------------------------------------
   Poniżej 992px builder ustawia strzałki statycznie, wyśrodkowane pod
   karuzelą — zostawiamy ten sam układ, dokładamy tylko odstępy sekcji.
   ---------------------------------------------------------------- */

@media (max-width: 992px) {
	.recently-viewed .products-carousel__container__pagination .swiper-animated-pagination-container--prev,
	.recently-viewed .products-carousel__container__pagination .swiper-animated-pagination-container--next {
		left: auto;
		right: auto;
	}
}

@media (max-width: 768px) {
	.recently-viewed.recently-viewed--single {
		padding: 0 0 40px;
	}

	.recently-viewed.recently-viewed--archive {
		padding: 0 0 64px;
	}

	.recently-viewed.recently-viewed--cart {
		padding: 16px 0 48px;
	}
}

@media (max-width: 576px) {
	.recently-viewed .recently-viewed__title {
		font-size: 28px;
		line-height: 34px;
		margin-bottom: 24px;
	}
}