/*
 * Wersja mobilna (do 767 px, jak telefon w Elementorze). Klasa tapis-mobile na <body>
 * dochodzi z includes/mobile.php, więc w trybie podglądu reguły widzi tylko admin.
 */
@media (max-width: 767px) {

	/* 1. Bez przesuwania strony na boki. Sekcje Elementora mają ujemne marginesy
	 *    i szerokości ponad 100% (np. przycisk w banerze na głównej), a iPhone
	 *    pozwala wtedy przesuwać ekran mimo overflow: hidden na <html>.
	 *    clip zamiast hidden: nie tnie w pionie.
	 *    Nagłówka i jego przodków (#outer-wrap, #wrap) nie przycinamy: na iPhonie po
	 *    przewinięciu (nagłówek przyklejony) menu z trzema kreskami od razu się chowało (0.7.25). */
	body.tapis-mobile #main,
	body.tapis-mobile #footer,
	body.tapis-mobile .elementor-section.elementor-top-section,
	body.tapis-mobile .e-con.e-parent {
		overflow-x: clip;
	}

	body.tapis-mobile #site-header .elementor-section,
	body.tapis-mobile #site-header .e-con,
	body.tapis-mobile .elementor-location-header .elementor-section,
	body.tapis-mobile .elementor-location-header .e-con,
	body.tapis-mobile .she-header-yes {
		overflow: visible;
	}

	body.tapis-mobile .elementor-widget-video .elementor-wrapper,
	body.tapis-mobile .elementor-widget-video video,
	body.tapis-mobile .elementor-widget-image img {
		max-width: 100%;
	}

	/* 2. Strona produktu: jeden margines 16 px z obu stron dla wszystkich sekcji.
	 *    Dziś treść zaczyna się raz 4, raz 18, raz 32 px od krawędzi.
	 *    Sekcja główna 12 px + odstęp kolumny Elementora 4 px = 16 px;
	 *    sekcja wewnętrzna cofa się o te 4 px, a jej kolumny dodają je z powrotem. */
	body.tapis-mobile.single-product .elementor-location-single .elementor-section.elementor-top-section {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	body.tapis-mobile.single-product .elementor-location-single .elementor-section.elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	body.tapis-mobile.single-product .elementor-location-single .elementor-section.elementor-inner-section {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: -4px !important;
		margin-right: -4px !important;
		width: calc(100% + 8px) !important;
		max-width: none !important;
	}

	body.tapis-mobile.single-product .elementor-location-single .elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	body.tapis-mobile.single-product .elementor-location-single .elementor-container {
		max-width: none !important;
	}

	body.tapis-mobile.single-product .elementor-location-single .elementor-widget:not(.tapis-peek) {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
	}
}

/* 3. Slidery ze zdjęciami (karuzela mediów Elementora na głównej i na produkcie):
 *    jedno zdjęcie i ok. 1/3 następnego, przesuwane palcem, od marginesu do
 *    prawej krawędzi ekranu. Swipera wyłącza assets/js/mobile.js, przewija przeglądarka.
 *    Poza @media: klasę tapis-peek skrypt daje tylko na telefonie, a po obróceniu
 *    ekranu Swiper już nie wróci, więc pasek musi zostać. */
.tapis-peek .elementor-main-swiper {
	margin-left: calc(-1 * var(--tapis-peek-l, 0px)) !important;
	margin-right: calc(-1 * var(--tapis-peek-r, 0px)) !important;
	width: auto !important;
}

.tapis-peek .swiper-wrapper {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 16px;
	padding: 0 16px;
	transform: none !important;
	transition: none !important;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.tapis-peek .swiper-wrapper::-webkit-scrollbar {
	display: none;
}

/* Odstęp za ostatnim zdjęciem, żeby nie kleiło się do krawędzi. */
.tapis-peek .swiper-wrapper::after {
	content: "";
	flex: 0 0 8px;
}

.tapis-peek .swiper-slide {
	flex: 0 0 calc((100vw - 24px) * 0.75) !important;
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
}

.tapis-peek .swiper-slide-duplicate {
	display: none !important;
}

.tapis-peek .elementor-carousel-image {
	height: auto !important;
	aspect-ratio: 3 / 4;
	background-size: cover;
	background-position: center;
}

.tapis-peek .elementor-swiper-button,
.tapis-peek .swiper-pagination,
.tapis-peek .swiper-lazy-preloader {
	display: none !important;
}