/*
 * A8P: poprawki stron zbudowanych w Elementorze, ładowane na każdej stronie (motyw 1.0.5, 30.10.2026).
 *
 * Selektory .elementor-17381 .elementor-element-xxxxxxx dotyczą strony głównej (wpis 17381). Elementor zachowuje
 * identyfikatory elementów przy edycji, ale po przebudowie sekcji od zera trzeba sprawdzić, czy jeszcze pasują.
 * Specyficzność jest celowo wyższa niż w CSS Elementora (zestaw .elementor-kit-17351 i reguły strony),
 * bo kolejność arkuszy w <head> nie jest gwarantowana.
 */

/*
 * 1. Strona nie przesuwa się w bok na iPhonie.
 * Storefront ma body { overflow-x: hidden }, ale WebKit (Safari i Chrome na iOS) i tak pozwala przesunąć stronę palcem,
 * gdy coś wystaje poza ekran. Wtedy z boku widać koniec tła.
 *
 * Źródło: pole ikon społecznościowych Elementora wychodzi poza swój widżet. W WebKit (klasa e--ua-appleWebkit na body)
 * Elementor układa je flexem z ujemnym marginesem po bokach równym połowie odstępu (na stronie głównej 721c22d:
 * -50 px, czyli 6-12 px za ekran; w stopce 6e62f4ab: -20 px, czyli 1 px za ekran na każdej stronie). Widżet przycina
 * ten pusty nadmiar u siebie; ikony leżą wewnątrz widżetu i wyglądają tak samo. Ta reguła sama naprawia też iOS < 16.
 * Tylko ekrany bez kursora (hover: none), bo na komputerze przycięcie ucinałoby powiększenie ikony po najechaniu
 * (elementor-animation-grow) i obwódkę fokusu, a przesuwania w bok tam nie ma.
 * (max-width: 100% na polu ikon nie nadaje się: WebKit zawijał wtedy ikony jedna pod drugą.)
 */
@media (hover: none) {
	.elementor-widget-social-icons {
		overflow: hidden;
	}
}

/*
 * Zabezpieczenie na przyszłe elementy szersze od ekranu (iOS 16+ i nowe przeglądarki): overflow-x: clip przycina nadmiar
 * na samym body i nie tworzy obszaru przewijania, więc nie psuje przyklejanego nagłówka ani elementów sticky.
 * Elementy fixed (szuflada koszyka, przycisk prywatności) nie są przycinane.
 */
html,
body {
	overflow-x: clip;
}

/*
 * 2. Kropki karuzeli „Poznaj nasze deski ścienne” (blok HTML #a8p-kar).
 * Styl przycisków z zestawu Elementora (.elementor-kit-17351 button) ma wyższą specyficzność niż .a8p-kar-dot,
 * więc 11 z 12 kropek dostawało przezroczyste tło i widać było tylko aktywną. Kropka zostaje 8 px, a pole dotyku
 * rośnie do 20 px (tło przycięte do środka przycisku), żeby trafić w nią palcem.
 */
#a8p-kar .a8p-kar-dots {
	gap: 0;
	padding: 12px 0 16px;
}

#a8p-kar .a8p-kar-dot {
	width: 20px;
	height: 20px;
	min-width: 0;
	min-height: 0;
	padding: 6px;
	border: 0;
	border-radius: 50%;
	background: #cfcfcf;
	background-clip: content-box;
	box-shadow: none;
}

#a8p-kar .a8p-kar-dot[aria-current="true"] {
	background-color: #1e1e1e;
}

@media (max-width: 767px) {

	/*
	 * 3. Tytuły kart Projektowanie, Dopracowanie modelu, Optymalizacja produkcji.
	 * Tytuł miał margines tylko od góry (10% szerokości) i siedział przy górnej albo dolnej krawędzi swojego pola.
	 * Odstęp między tytułem a ramką z opisem przejmuje sam tytuł, a automatyczne marginesy stawiają go na środku pola.
	 */
	.elementor-17381 .elementor-element.elementor-element-e4e9d88.e-con,
	.elementor-17381 .elementor-element.elementor-element-24143f8.e-con,
	.elementor-17381 .elementor-element.elementor-element-ee153ff.e-con {
		row-gap: 0;
	}

	.elementor-17381 .elementor-element.elementor-element-ed0c160.elementor-widget,
	.elementor-17381 .elementor-element.elementor-element-c336833.elementor-widget,
	.elementor-17381 .elementor-element.elementor-element-be593b1.elementor-widget {
		margin-top: auto;
		margin-bottom: auto;
		padding-top: 24px;
		padding-bottom: 24px;
	}

	/*
	 * 4. Kafle kategorii w sekcji „Sklep a8p” stały od krawędzi do krawędzi ekranu.
	 * Margines 15 px wyrównuje je z nagłówkiem sekcji.
	 */
	.elementor-17381 .elementor-element.elementor-element-de31f61.elementor-widget {
		padding-left: 15px;
		padding-right: 15px;
	}
}