/* BZ-42 - mobilne poprawki responsywnosci (bpnt / centroom / epi-centrum).
   Selektory sa unikalne per motyw, wiec jeden arkusz jest bezpieczny w calej sieci.
   Dostarczane jako prawdziwy arkusz (nie inline), bo WP Rocket RUCSS wycina inline <style>. */

/* #1 bpnt /transferownia/: email w bloku "wazny link" (28px, bez zawijania) ucinany przy 320px */
@media (max-width:575.98px) {
	.blok--wazny-link .title,
	.blok--wazny-link .title strong,
	.blok--wazny-link .title a {
		font-size: 20px;
		line-height: 1.3;
		overflow-wrap: break-word;
		word-break: break-word;
	}
}

@media (max-width:767.98px) {

	/* #6 epi-centrum slajd "Doswiadczaj poprzez eksperymentowanie".
	   Wlasciwa przyczyna ucinania: blok .experience_sec ma margin-top:-50px (celowe zachodzenie
	   pod skosny fioletowy pas .news z projektu). Na mobile (kolumny stackowane, tekst pierwszy)
	   naglowek siedzi na samej gorze bloku, wiec skos pasa (najglebszy w lewym dolnym rogu, clip
	   100%) przykrywa jego pierwsza linie o ~50px = wielkosc zachodzenia.
	   UWAGA: wczesniejszy selektor .experience_section byl bledny (realna klasa to .experience_sec),
	   przez co poprzedni fix byl no-opem.
	   Rozwiazanie (zgodne z zyczeniem: ZOSTAWIAMY zachodzenie): margin-top:-50px zostaje, a naglowek
	   przesuwamy w dol paddingiem na bloku (~50px zachodzenia + skos + zapas), zeby ZAWSZE wychodzil
	   spod pasa. Zweryfikowane na prod: clearance +14px na 320/360/412px.
	   Font 24px zostaje, by dlugie "eksperymentowanie!" miescilo sie w waskim kontenerze przy 320px. */
	.informacje-obrazek-ozdobny-block.experience_sec {
		padding-top: 64px !important;
	}

	.informacje-obrazek-ozdobny-block.experience_sec .experience_left h2 {
		font-size: 24px;
		line-height: 1.25;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* #7/#8/#9 centroom koszyk i zamowienie: motyw wylacza responsywne zwijanie shop_table
	   (table-layout:fixed, 992px) - opisy i kwota do zaplaty ucinane. Wymuszamy stack. */
	.woocommerce table.shop_table,
	.woocommerce table.shop_table tbody,
	.woocommerce table.shop_table tfoot,
	.woocommerce table.shop_table tr,
	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		text-align: left !important;
		overflow-wrap: break-word;
	}

	.woocommerce table.shop_table {
		table-layout: auto !important;
	}

	.woocommerce table.shop_table thead {
		display: none !important;
	}
}