/* „Ostatnio oglądane” — sekcja to ten sam markup i te same klasy co „Inne z kolekcji”
   (.new-in.pdp-related, template-parts/single-product.php; style: assets/css/main.css), żeby
   wyglądała z nimi identycznie. Tu: ukrycie kontenera do czasu, aż JS (assets/js/recent.js)
   wstawi karty, i pas przewijany w bok (do 10 zegarków) zamiast siatki. */
.recent-viewed[hidden] {
	display: none;
}

/* Tuż pod „Inne z kolekcji” — jeden ciągły kremowy pas zamiast dwóch pasów z białą przerwą. */
.pdp-related + .recent-viewed {
	margin-top: 0;
	padding-top: 0;
}

/* ---------- Slider: 4 karty na desktopie, 3 na tablecie, 2 na telefonie ---------- */
.recent-viewed { --rv-per: 4; --rv-gap: clamp(16px, 1.458vw, 28px); }
.recent-viewed .product-grid {
	display: flex;
	gap: var(--rv-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.recent-viewed .product-grid::-webkit-scrollbar { display: none; }
.recent-viewed .product-grid .p-card {
	display: flex;
	flex: 0 0 calc((100% - (var(--rv-per) - 1) * var(--rv-gap)) / var(--rv-per));
	scroll-snap-align: start;
}

/* Strzałki pod pasem, do prawej — tylko gdy jest co przewijać (klasa z recent.js). */
.recent-viewed .carousel-nav { display: none; }
.recent-viewed.is-scrollable .carousel-nav {
	display: flex;
	justify-content: flex-end;
	gap: 14px;
	margin-top: 32px;
}
.recent-viewed .carousel-nav .pill-btn { width: 68px; }
.recent-viewed .carousel-nav__prev .icon { transform: scaleX(-1); }
.recent-viewed .carousel-nav .pill-btn:disabled { opacity: 0.35; pointer-events: none; }

@media (max-width: 1279px) {
	.recent-viewed { --rv-per: 3; }
}
@media (max-width: 767px) {
	.recent-viewed { --rv-per: 2; --rv-gap: 12px; }
	.recent-viewed.is-scrollable .carousel-nav { margin-top: 20px; }
}