/* ==========================================================================
   Avuerra, strona kursu i sklep

   1. Naglowek kursu     2. Pas faktow       3. Blok zapisu
   4. Terminy            5. Pasek zapisu     6. Tresc kursu
   7. Bloki tresci       8. Prowadzacy       9. Galeria
   10. FAQ               11. Uczestnicy      12. Tablet i telefon
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Naglowek kursu
   Cena, terminy i przycisk stoja tutaj, a nie w bocznej kolumnie. Przy
   szkoleniu otwartym w kilku miastach pierwsze pytanie brzmi „czy jest
   termin, w ktorym moge”, wiec odpowiedz musi byc nad zgieciem.
   -------------------------------------------------------------------------- */

.av-kurs-head{
	padding-block: clamp(40px, 5vw, 76px);
	background: var(--av-paper);
}

.av-kurs-head__grid{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	gap: clamp(32px, 4.5vw, 64px);
	align-items: center;
}

/* Kurs bez zdjecia wyrozniajacego. Bez tego druga kolumna zostaje pusta,
   a tekst i blok zapisu sa scisniete do polowy szerokosci. */
.av-kurs-head__grid--solo{ grid-template-columns: minmax(0, 1fr); }

.av-kurs-head__etykieta{
	font-family: var(--av-font-body);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--av-red);
	margin: 0 0 16px;
}

.av-kurs-head__tytul{
	font-size: clamp(28px, 3.8vw, 46px);
	line-height: 1.15;
}

.av-kurs-head__lead{
	margin-top: 24px;
	font-family: var(--av-font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--av-ink-soft);
	max-width: 54ch;
}

.av-kurs-head__lead p{ margin: 0 0 .8em; }
.av-kurs-head__lead p:last-child{ margin-bottom: 0; }

.av-kurs-head__foto{
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--av-blush);
	border-radius: 2px;
}

.av-kurs-head__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   2. Pas szybkich faktow
   -------------------------------------------------------------------------- */

.av-fakty-pas{
	background: #fff;
	border-block: 1px solid var(--av-linia-lekka);
	padding-block: clamp(20px, 2.4vw, 30px);
}

.av-fakty{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 18px 26px;
}

.av-fakt{ display: flex; flex-direction: column; gap: 4px; }

.av-fakt__etykieta{
	font-family: var(--av-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-ink-soft);
}

.av-fakt__wartosc{
	font-family: var(--av-font-head);
	font-size: 20px;
	font-weight: 600;
	color: var(--av-ink);
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
   3. Blok zapisu
   Bez ramki i cienia, bo to nie jest juz karta doklejona z boku,
   tylko czesc naglowka.
   -------------------------------------------------------------------------- */

.av-zapis{
	margin-top: clamp(26px, 3vw, 36px);
	padding-top: clamp(22px, 2.6vw, 30px);
	border-top: 1px solid var(--av-linia-lekka);
	max-width: 900px;
}

.av-zapis__cena{
	font-family: var(--av-font-head);
	font-size: clamp(30px, 3.6vw, 42px);
	font-weight: 600;
	color: var(--av-ink);
	line-height: 1.1;
	margin: 0 0 18px;
}

.av-zapis__cena del{ color: var(--av-ink-soft); font-size: .6em; margin-right: 8px; }
.av-zapis__cena ins{ text-decoration: none; }

.av-zapis__etykieta{
	display: block;
	font-family: var(--av-font-body);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-ink-soft);
	margin: 4px 0 8px;
}

.av-zapis__dalej{
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--av-linia-lekka);
}

.av-zapis__dalej-tekst{
	font-family: var(--av-font-body);
	font-size: 13px;
	line-height: 1.6;
	color: var(--av-ink-soft);
	margin: 0 0 .6em;
	max-width: none;
}

.av-zapis__dalej-tekst:last-child{ margin-bottom: 0; }

.av-zapis__brak{
	font-family: var(--av-font-head);
	font-size: 22px;
	font-weight: 600;
	color: var(--av-red);
	margin: 0 0 10px;
}

/* ---- Powiadomienia WooCommerce ----
   Domyslne sa niebieskie, z wlasna ikona i przyciskiem odsylajacym do koszyka,
   ktory w tej sciezce zakupu jest pomijany. Sprowadzamy je do jezyka strony:
   jasne tlo, czerwona kreska z boku, bez ikon i bez obcego przycisku.
   Regula dziala tak samo na stronie kursu, w koszyku i przy platnosci. */

.woocommerce-notices-wrapper:empty{ display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
	list-style: none;
	font-family: var(--av-font-body);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--av-ink);
	background: var(--av-karta);
	border: 1px solid var(--av-linia-lekka);
	border-left: 3px solid var(--av-red);
	border-radius: 2px;
	padding: 14px 18px;
	margin: 0 0 18px;
}

/* WooCommerce wstawia ikone przez ::before. Nie pasuje do zadnej innej
   ikony na tej stronie, wiec ja zdejmujemy. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{ content: none; }

.woocommerce-error{ background: var(--av-blush); }
.woocommerce-error li{ margin: 0 0 .4em; }
.woocommerce-error li:last-child{ margin-bottom: 0; }

/* Gdyby jakies powiadomienie przyszlo z wlasnym przyciskiem, ma byc linkiem,
   a nie niebieskim klockiem z palety Kadence. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button{
	display: inline;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0 0 0 6px;
	font-family: var(--av-font-body);
	font-size: inherit;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--av-red);
	text-decoration: underline;
}

/* ---- Elementy WooCommerce w bloku zapisu ---- */

.av-zapis form.cart{ margin: 0; }

.av-zapis .quantity{ display: inline-block; margin: 0 12px 0 0; vertical-align: bottom; }

.av-zapis .quantity input[type="number"]{
	width: 92px;
	font-family: var(--av-font-body);
	font-size: 16px;
	color: var(--av-ink);
	background: #fff;
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	padding: 15px 12px;
	text-align: center;
}

.av-zapis .quantity input:focus{ outline: 2px solid var(--av-red); outline-offset: -1px; }

.av-zapis .single_add_to_cart_button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-family: var(--av-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	border: 0;
	border-radius: 2px;
	padding: 18px 40px;
	margin: 0;
	transition: background .2s ease;
}

/* Kolor wymuszony.
   WooCommerce dodaje temu przyciskowi klasy „button” i „alt”, ktore Kadence
   koloruje wlasna paleta selektorami o wyzszej specyficznosci niz nasze.
   Stad przycisk wracal do niebieskiego mimo regul powyzej. To jedyne miejsce
   w motywie, gdzie siegam po !important, i robie to swiadomie, bo walczymy
   z arkuszem motywu nadrzednego, a nie z wlasnym. */
.av-zapis .single_add_to_cart_button,
.av-zapis .single_add_to_cart_button:focus,
.av-zapis .single_add_to_cart_button:active{
	background: var(--av-red) !important;
	color: #fff !important;
}

.av-zapis .single_add_to_cart_button:hover{ background: var(--av-red-hover) !important; }
.av-zapis .single_add_to_cart_button:focus-visible{ outline: 2px solid var(--av-ink); outline-offset: 3px; }
.av-zapis .single_add_to_cart_button.disabled,
.av-zapis .single_add_to_cart_button:disabled{ opacity: .45; cursor: not-allowed; }

.av-zapis .woocommerce-variation-price{ margin: 0 0 16px; }

.av-zapis .woocommerce-variation-price .price{
	font-family: var(--av-font-head);
	font-size: 30px;
	font-weight: 600;
	color: var(--av-red);
	line-height: 1.1;
}

.av-zapis .woocommerce-variation-availability{ margin: 0 0 14px; }
.av-zapis .stock{ font-family: var(--av-font-body); font-size: 13px; font-weight: 600; margin: 0; }
.av-zapis .stock.in-stock{ color: var(--av-ink-soft); }
.av-zapis .stock.out-of-stock{ color: var(--av-red); }

.av-zapis .reset_variations{
	display: inline-block;
	font-family: var(--av-font-body);
	font-size: 12.5px;
	color: var(--av-ink-soft);
	margin-bottom: 12px;
}

/* Natywna tabela wariantow, widoczna gdy atrybutow jest wiecej niz jeden
   albo gdy JS nie dziala. */
.av-zapis table.variations{ width: 100%; margin: 0 0 16px; border: 0; }
.av-zapis table.variations th,
.av-zapis table.variations td{ display: block; padding: 0; border: 0; text-align: left; }

.av-zapis table.variations th{
	font-family: var(--av-font-body);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-ink-soft);
	margin-bottom: 8px;
}

.av-zapis table.variations select{
	width: 100%;
	font-family: var(--av-font-body);
	font-size: 15px;
	color: var(--av-ink);
	background: #fff;
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	padding: 13px 14px;
	margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   4. Terminy jako kafelki
   Oryginalna lista zostaje w kodzie, bo steruje nia WooCommerce. Chowamy ja
   wizualnie, ale nie przez display:none, zeby walidacja formularza dalej
   mogla ustawic na niej fokus.
   -------------------------------------------------------------------------- */

.av-warianty-ukryte{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* W naglowku jest wiecej miejsca niz w dawnej bocznej kolumnie, wiec
   terminy ida po dwa w rzedzie. */
/* Trzy kolumny. Blok zapisu poszerzony do 660 px daje im na to miejsce,
   a przy waskim ekranie ponizsze progi schodza na dwie i jedna. */
.av-terminy{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 20px;
}

/* Uklad pionowy: nazwa, dzien i godziny, cena, dostepnosc, jedno pod drugim.
   Przy trzech kolumnach cena obok nazwy scisnela oba, wiec cena schodzi pod
   spod. Kolejnosc bierze sie z kolejnosci w skrypcie, ktory buduje kafelek. */
.av-termin{
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	text-align: left;
	cursor: pointer;
	font: inherit;
	background: #fff;
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	padding: 14px 16px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

/* Kolor na kazdym stanie z osobna. Kafelek jest znacznikiem <button>, a
   Kadence koloruje przyciski wlasna paleta osobnymi regulami dla hover,
   focus i active. Opisanie samego stanu spoczynku nie wystarcza, bo przy
   najechaniu i kliknieciu wchodzila paleta motywu nadrzednego i kafelek
   robil sie niebieski. */
.av-termin:hover,
.av-termin:focus,
.av-termin:active{
	background: #fff;
	color: var(--av-ink);
	border-color: var(--av-red);
	box-shadow: none;
}

.av-termin:focus-visible{ outline: 2px solid var(--av-ink); outline-offset: 2px; }

.av-termin--wybrany,
.av-termin--wybrany:hover,
.av-termin--wybrany:focus,
.av-termin--wybrany:active{
	border-color: var(--av-red);
	box-shadow: inset 0 0 0 1px var(--av-red);
	background: var(--av-blush);
	color: var(--av-ink);
}

/* Termin, ktory klient ma juz w zgloszeniu. Znacznik w rogu kafelka,
   zeby nie dokladal drugi raz tego samego. */
.av-termin{ position: relative; }

.av-termin--wzgl::after{
	content: "w zgłoszeniu";
	position: absolute;
	top: -1px;
	right: -1px;
	font-family: var(--av-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--av-red);
	padding: 3px 8px;
	border-radius: 0 2px 0 2px;
}

.av-juz-zapisany{
	font-family: var(--av-font-body);
	font-size: 13px;
	line-height: 1.6;
	color: var(--av-ink-soft);
	margin: 14px 0 0;
}

.av-juz-zapisany[hidden]{ display: none; }
.av-juz-zapisany a{ color: var(--av-red); font-weight: 600; }

.av-termin--brak,
.av-termin--brak:hover,
.av-termin--brak:focus,
.av-termin--brak:active{
	opacity: .5;
	cursor: not-allowed;
	background: var(--av-paper);
	border-color: var(--av-sand-soft);
	box-shadow: none;
}

/* Termin zapowiadany bez ceny. Wyszarzony i nieklikalny, sama informacja. */
.av-termin--wkrotce,
.av-termin--wkrotce:hover,
.av-termin--wkrotce:focus,
.av-termin--wkrotce:active{
	opacity: .75;
	cursor: default;
	background: var(--av-paper);
	border-color: var(--av-sand-soft);
	box-shadow: none;
}

.av-termin__nazwa{
	font-family: var(--av-font-head);
	font-size: 17px;
	font-weight: 600;
	color: var(--av-ink);
	line-height: 1.25;
}

.av-termin__kiedy{
	font-family: var(--av-font-body);
	font-size: 12.5px;
	color: var(--av-ink-soft);
	line-height: 1.4;
}

.av-termin__miejsca{
	font-family: var(--av-font-body);
	font-size: 12px;
	color: var(--av-ink-soft);
}

.av-termin--brak .av-termin__miejsca{ color: var(--av-red); font-weight: 600; }

/* Ostatnie miejsca. Pogrubione i w czerwieni marki, zeby przycisnac decyzje. */
.av-termin__miejsca--malo{
	color: var(--av-red);
	font-weight: 600;
}

.av-termin__cena{
	font-family: var(--av-font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--av-red);
	white-space: nowrap;
	margin-top: 6px;
}

.av-termin__cena del{ color: var(--av-ink-soft); font-weight: 400; margin-right: 4px; }

/* W kafelku cena jest mala, wiec dopisek podatkowy bylby mikrodrukiem.
   Netto plus VAT stoi juz przy duzej cenie nad kafelkami. */
.av-termin__cena .woocommerce-price-suffix{ display: none; }

/* „Cena wkrotce” zamiast kwoty: spokojny szary, bez czerwieni, bo to nie
   jest oferta cenowa, tylko zapowiedz terminu. */
.av-termin__cena--wkrotce{
	color: var(--av-ink-soft);
	font-weight: 600;
}

/* Napis przy cenie wczesniejszej, np. „Cena do 30 wrzesnia”. Drobny,
   w czerwieni marki, zeby zaznaczyc, ze ta cena jest czasowa. */
.av-termin__cenanapis{
	font-family: var(--av-font-body);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--av-red);
	margin-top: 2px;
}

/* ---- Szczegoly wybranego terminu ----
   Panel stoi miedzy kafelkami a polem liczby miejsc. Czerwona kreska z lewej
   powtarza sygnal wybranego kafelka, wiec widac, ze to opis tego terminu,
   a nie osobna ramka z informacjami o szkoleniu. */

.av-termin-info{
	background: var(--av-karta);
	border: 1px solid var(--av-linia-lekka);
	border-left: 3px solid var(--av-red);
	border-radius: 0;
	padding: 14px 16px;
	margin: 0 0 20px;
}

.av-termin-info[hidden]{ display: none; }

.av-termin-info__tytul{
	font-family: var(--av-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-red);
	margin: 0 0 10px;
}

/* Etykiety w stalej kolumnie, zeby wartosci ustawily sie w pion i dalo sie
   je przebiec wzrokiem. */
.av-termin-info__lista{
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 4px 14px;
	margin: 0;
}

/* Kolory podane z wyzsza specyficznoscia niz sama klasa. Kadence ma wlasne
   reguly dla dt i dd wewnatrz tresci strony i wygrywalo z pojedyncza klasa,
   przez co wartosci wychodzily niebieskie. */
.av-termin-info__lista dt.av-termin-info__etykieta{
	font-family: var(--av-font-body);
	font-size: 12.5px;
	color: var(--av-ink-soft);
	margin: 0;
}

.av-termin-info__lista dd.av-termin-info__wartosc{
	font-family: var(--av-font-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--av-ink);
	margin: 0;
}

/* Telefon i e-mail w uwadze. Czerwien marki sygnalizuje, ze to odnosnik,
   podkreslenie potwierdza klikalnosc. Numer nie lamie sie w pol. */
.av-termin-info__wartosc a{
	color: var(--av-red);
	text-decoration: underline;
	white-space: nowrap;
}

.av-termin-info__wartosc a:hover,
.av-termin-info__wartosc a:focus-visible{
	color: var(--av-red-hover);
}

@media (max-width: 480px){
	.av-termin-info__lista{ grid-template-columns: minmax(0, 1fr); gap: 0; }
	.av-termin-info__etykieta{ margin-top: 8px; }
	.av-termin-info__etykieta:first-child{ margin-top: 0; }
}

@keyframes av-puls{
	0%, 100%{ box-shadow: 0 0 0 0 rgba(211, 0, 0, 0); }
	35%     { box-shadow: 0 0 0 4px rgba(211, 0, 0, .22); }
}

.av-terminy.av-uwaga,
.variations.av-uwaga{ border-radius: 3px; animation: av-puls 1.5s ease; }

@media (prefers-reduced-motion: reduce){
	.av-terminy.av-uwaga,
	.variations.av-uwaga{ animation: none; box-shadow: 0 0 0 3px rgba(211, 0, 0, .3); }
}

/* --------------------------------------------------------------------------
   5. Pasek zapisu przyklejony do dolu
   -------------------------------------------------------------------------- */

.av-pasek{
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	background: rgba(var(--av-paper-rgb), .97);
	border-top: 1px solid var(--av-sand-soft);
	box-shadow: 0 -8px 28px -22px rgba(46, 33, 26, .8);
	transform: translateY(100%);
	transition: transform .25s ease;
}

.av-pasek--on{ transform: none; }

.av-pasek__in{
	max-width: var(--av-maxw);
	margin-inline: auto;
	padding: 12px clamp(20px, 5vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.av-pasek__info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.av-pasek__tytul{
	font-family: var(--av-font-head);
	font-size: 18px;
	font-weight: 600;
	color: var(--av-ink);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.av-pasek__termin{
	font-family: var(--av-font-body);
	font-size: 12.5px;
	color: var(--av-ink-soft);
	/* Krotka fraza „Wybierz termin szkolenia” ma zostac w jednej linii. Bez
	   tego na waskim pasku lamala sie na dwa wiersze i wygladala jak rozbita. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.av-pasek--gotowy .av-pasek__termin{ color: var(--av-red); font-weight: 600; }

.av-pasek__akcja{ display: flex; align-items: center; gap: 18px; flex: none; }

.av-pasek__cena{
	font-family: var(--av-font-body);
	font-size: 17px;
	font-weight: 600;
	color: var(--av-ink);
	white-space: nowrap;
}

.av-pasek__cena del{ color: var(--av-ink-soft); font-weight: 400; margin-right: 5px; }

body.av-ma-pasek{ padding-bottom: 84px; }

/* --------------------------------------------------------------------------
   6. Tresc kursu, jedna kolumna
   -------------------------------------------------------------------------- */

.av-kurs-tresc{
	padding-block: clamp(48px, 6vw, 90px);
	background: var(--av-paper);
}

/* Dlugi tekst nie moze isc przez cala szerokosc kontenera, bo przy 1180 px
   wychodzi okolo 140 znakow w wierszu. Bloki tekstowe dostaja wiec wlasne
   ograniczenie, a listy i siatki korzystaja z pelnej szerokosci. */
.av-kurs-blok .av-proza,
.av-kurs-blok .av-tekst{ max-width: 78ch; }

/* --------------------------------------------------------------------------
   7. Bloki tresci
   -------------------------------------------------------------------------- */

.av-kurs-blok + .av-kurs-blok{ margin-top: clamp(44px, 5vw, 72px); }

.av-kurs-blok__tytul{
	font-size: clamp(24px, 2.9vw, 32px);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.av-kurs-blok .av-tekst{ margin-top: 22px; }
.av-kurs-blok .av-proza{ margin-top: 22px; }

/* ---- Lista z ptaszkiem ---- */

.av-zyski{
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.av-zyski li{
	position: relative;
	padding-left: 30px;
	font-family: var(--av-font-body);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--av-ink-soft);
}

.av-zyski li::before{
	content: "";
	position: absolute;
	left: 2px;
	top: .42em;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--av-red);
	border-bottom: 2px solid var(--av-red);
	transform: rotate(-45deg);
}

.av-zyski--kol2{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px clamp(24px, 3vw, 44px);
}

/* Wariant z cyframi. Znacznik ptaszka znika, w jego miejsce wchodzi numer
   liczony przez CSS. Te same reguly maja te sama specyficznosc co ptaszek,
   wiec o wyniku decyduje kolejnosc: ten blok stoi nizej i wygrywa. */
.av-zyski--cyfry{ counter-reset: av-krok; }

.av-zyski--cyfry li{ padding-left: 42px; }

.av-zyski--cyfry li::before{
	counter-increment: av-krok;
	content: counter(av-krok);
	left: 0;
	top: 0;
	width: 26px;
	height: auto;
	border: 0;
	transform: none;
	font-family: var(--av-font-head);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.35;
	color: var(--av-red);
	text-align: left;
}

.av-zyski--program li{ font-size: 16px; }

@media (max-width: 700px){
	.av-zyski--kol2{ grid-template-columns: minmax(0, 1fr); }
}

/* ---- Harmonogram dnia ----
   Dwie kolumny w gridzie: godzina po lewej (kolumna dostosowana do najszerszej
   godziny), opis po prawej, rownolegle. Pusta godzina znaczy „ciag dalszy”,
   wtedy opis siada pod poprzednim opisem. */

.av-harmonogram{
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 10px 24px;
	margin: 22px 0 0;
	max-width: 720px;
	font-family: var(--av-font-body);
	color: var(--av-ink);
	line-height: 1.5;
}

/* Godziny w wlasnej rodzinie o rownej szerokosci znakow, zeby wszystkie
   „09:00" i „12:45" siedzialy dokladnie pod soba. System-ui mono, bez
   ladowania fontow z zewnatrz: SF Mono na macOS, Cascadia Mono na
   Windows 11, Consolas starsze Windows, Roboto Mono na Androidzie. */
.av-harmonogram__godz{
	margin: 0;
	font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, 'Liberation Mono', monospace;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: -0.01em;
	color: var(--av-ink);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.av-harmonogram__opis{ margin: 0; color: var(--av-ink-soft); }

@media (max-width: 520px){
	.av-harmonogram{ grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
	.av-harmonogram__opis{ margin-bottom: 8px; }

	/* Ciag dalszy: pusta godzina znika, a opis siada tuz pod poprzednim,
	   bez rezerwowania miejsca na godzine, ktorej nie ma. */
	.av-harmonogram__godz--cd{ display: none; }
	.av-harmonogram__opis--cd{ margin-top: -8px; }
}

/* ---- Program numerowany ---- */

.av-program{
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.av-program__poz{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px;
	padding: 24px 0;
	border-top: 1px solid var(--av-sand-soft);
}

.av-program__poz:last-child{ border-bottom: 1px solid var(--av-sand-soft); }

.av-program__nr{
	font-family: var(--av-font-head);
	font-size: 24px;
	font-weight: 600;
	color: var(--av-red);
	line-height: 1;
	padding-top: 4px;
	font-variant-numeric: tabular-nums;
}

.av-program__tytul{
	font-family: var(--av-font-head);
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 600;
	color: var(--av-ink);
	margin: 0 0 8px;
	line-height: 1.25;
}

.av-program__opis{
	font-family: var(--av-font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--av-ink-soft);
	margin: 0 0 .8em;
	max-width: 70ch;
}

.av-program__opis:last-child{ margin-bottom: 0; }

/* --------------------------------------------------------------------------
   8. Prowadzacy
   -------------------------------------------------------------------------- */

.av-prowadzacy{
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
	margin-top: 26px;
}

/* Prelegent bez zdjecia. Jedna kolumna, opis na pelnej szerokosci. */
.av-prowadzacy--solo{ grid-template-columns: minmax(0, 1fr); }

.av-prowadzacy + .av-prowadzacy{
	margin-top: 34px;
	padding-top: 34px;
	border-top: 1px solid var(--av-sand-soft);
}

.av-prowadzacy__foto{
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 2px;
	background: var(--av-blush);
}

.av-prowadzacy__img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.av-prowadzacy__imie{
	font-family: var(--av-font-head);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 600;
	color: var(--av-ink);
	margin: 0 0 4px;
	line-height: 1.2;
}

.av-prowadzacy__rola{
	font-family: var(--av-font-body);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-red);
	margin: 0 0 16px;
}

.av-prowadzacy__bio{
	font-family: var(--av-font-body);
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--av-ink-soft);
	margin: 0 0 .9em;
	max-width: 70ch;
}

.av-prowadzacy__bio:last-child{ margin-bottom: 0; }

@media (max-width: 700px){
	.av-prowadzacy{ grid-template-columns: minmax(0, 1fr); }
	.av-prowadzacy__foto{ max-width: 190px; }
}

/* ---- Media, w ktorych komentuje ---- */

.av-media{
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--av-sand-soft);
}

.av-media__etykieta{
	font-family: var(--av-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--av-ink-soft);
	margin: 0 0 12px;
}

.av-media__lista{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Nazwy redakcji jako etykiety, bez logotypow. Logotyp sugerowalby
   partnerstwo albo rekomendacje, a to jest komentarz eksperta
   w materiale redakcyjnym. */
.av-media__lista li{
	font-family: var(--av-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--av-ink);
	background: var(--av-blush);
	border-radius: 2px;
	padding: 6px 12px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. Galeria
   -------------------------------------------------------------------------- */

/* Uklad kolumnowy, jak kafelki na tablicy. Zdjecia zachowuja wlasne
   proporcje, nic nie jest przycinane, a pionowe i poziome moga stac obok
   siebie bez rozjazdu. Liczbe kolumn dobiera przegladarka do szerokosci. */
.av-galeria{
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	columns: 3 220px;
	column-gap: 12px;
}

.av-galeria__poz{
	break-inside: avoid;
	margin: 0 0 12px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--av-blush);
	line-height: 0;
}

.av-galeria__img{
	width: 100%;
	height: auto;
	display: block;
	transition: transform .35s ease;
}

.av-galeria__poz:hover .av-galeria__img{ transform: scale(1.04); }

@media (prefers-reduced-motion: reduce){
	.av-galeria__img{ transition: none; }
	.av-galeria__poz:hover .av-galeria__img{ transform: none; }
}

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */

.av-faq{ margin-top: 26px; max-width: 900px; }

.av-faq__poz{ border-bottom: 1px solid var(--av-sand-soft); }
.av-faq__poz:first-of-type{ border-top: 1px solid var(--av-sand-soft); }

.av-faq__pytanie{
	cursor: pointer;
	list-style: none;
	padding: 20px 44px 20px 0;
	position: relative;
	font-family: var(--av-font-head);
	font-size: clamp(18px, 1.9vw, 22px);
	font-weight: 600;
	color: var(--av-ink);
	line-height: 1.3;
}

.av-faq__pytanie::-webkit-details-marker{ display: none; }

.av-faq__pytanie::after{
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 11px;
	height: 11px;
	border-right: 2px solid var(--av-red);
	border-bottom: 2px solid var(--av-red);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}

.av-faq__poz[open] .av-faq__pytanie::after{ transform: translateY(-30%) rotate(-135deg); }

.av-faq__pytanie:focus-visible{ outline: 2px solid var(--av-ink); outline-offset: 2px; }

.av-faq__odpowiedz{ padding: 0 44px 22px 0; }

.av-faq__odpowiedz .av-tekst{ font-size: 15.5px; line-height: 1.75; margin-top: 0; }

/* --------------------------------------------------------------------------
   11. Uczestnicy w zamowieniu
   -------------------------------------------------------------------------- */

.av-uczestnicy{
	margin: 40px 0;
	padding-top: 34px;
	border-top: 1px solid var(--av-sand-soft);
}

.av-uczestnicy__tytul{
	font-family: var(--av-font-head);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 600;
	color: var(--av-ink);
	margin: 0 0 10px;
}

.av-uczestnicy__wstep{
	font-family: var(--av-font-body);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--av-ink-soft);
	max-width: 62ch;
	margin: 0 0 26px;
}

.av-uczestnicy__kurs + .av-uczestnicy__kurs{
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px dashed var(--av-sand-soft);
}

.av-uczestnicy__nazwa{
	font-family: var(--av-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-red);
	margin: 0 0 14px;
}

.av-uczestnik{ border: 0; margin: 0 0 6px; padding: 0; }

.av-uczestnik__nr{
	font-family: var(--av-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--av-ink);
	padding: 0 0 8px;
}

/* --------------------------------------------------------------------------
   11b. Zgloszenie, czyli strona zamowienia
   Uklad opisuje szablon woocommerce/checkout/form-checkout.php. Tutaj
   nadajemy mu wyglad marki i naprawiamy to, co WooCommerce i Kadence
   rozkladaja po swojemu: szerokosci pol, kolory przyciskow i powiadomien.
   -------------------------------------------------------------------------- */

/* Najpierw zdejmujemy cudzy uklad.
   WooCommerce i Kadence celuja w sam formularz oraz w identyfikatory
   customer_details, order_review i order_review_heading, ustawiajac im
   wlasna siatke, oplywanie i szerokosci procentowe. Nasz szablon ma inna
   strukture, wiec te reguly nie tyle pomagaly, co scisnely prawa kolumne
   do dwustu pikseli i wypchnely z niej tabele. Zerujemy je zanim
   zbudujemy wlasny uklad. */
.woocommerce-checkout form.checkout.av-zgloszenie{
	display: block;
	grid-template-columns: none;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

.av-zgloszenie #customer_details,
.av-zgloszenie #order_review,
.av-zgloszenie #order_review_heading,
.av-zgloszenie .col2-set,
.av-zgloszenie .col2-set .col-1,
.av-zgloszenie .col2-set .col-2{
	float: none;
	width: auto;
	max-width: none;
	padding: 0;
	border: 0;
	background: none;
}

.av-zgloszenie #order_review_heading{ margin: 0 0 18px; }
.av-zgloszenie #order_review{ margin: 0; }

.av-zgloszenie,
.av-zgloszenie *,
.av-zgloszenie *::before,
.av-zgloszenie *::after{ box-sizing: border-box; }

.av-zgloszenie__grid{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

/* min-width zero, bo domyslnie element siatki nie schodzi ponizej szerokosci
   swojej najdluzszej tresci i tabela podsumowania wypychalaby kolumne. */
.av-zgloszenie__glowna,
.av-zgloszenie__bok{ min-width: 0; }

/* Podsumowanie jedzie ze strona, zeby kwota i przycisk byly widoczne takze
   przy dlugim formularzu z danymi kilku uczestnikow. */
.av-zgloszenie__bok{
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.av-zgloszenie__karta{
	background: var(--av-karta);
	border: 1px solid var(--av-linia-lekka);
	border-radius: 2px;
	padding: clamp(22px, 2.5vw, 30px);
}

.av-zgloszenie__tytul{
	font-family: var(--av-font-head);
	font-size: clamp(21px, 2.2vw, 26px);
	font-weight: 600;
	color: var(--av-ink);
	margin: 0 0 18px;
}

/* ---- Naglowki sekcji formularza ---- */

.av-zgloszenie h3{
	font-family: var(--av-font-head);
	font-size: clamp(21px, 2.2vw, 26px);
	font-weight: 600;
	color: var(--av-ink);
	margin: 0 0 18px;
}

/* ---- Pola ---- */

/* Siatka zamiast oplywania. WooCommerce ustawia polom szerokosc procentowa
   i float, co przy naszym ukladzie kolumn rozjezdza sie przy kazdej zmianie
   szerokosci bocznej kolumny. */
.av-zgloszenie .woocommerce-billing-fields__field-wrapper,
.av-zgloszenie .woocommerce-shipping-fields__field-wrapper,
.av-zgloszenie .woocommerce-additional-fields__field-wrapper,
.av-zgloszenie .av-uczestnik{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
}

.av-zgloszenie .form-row{
	float: none;
	width: auto;
	padding: 0;
	margin: 0 0 16px;
	grid-column: 1 / -1;
}

.av-zgloszenie .form-row-first{ grid-column: 1; }
.av-zgloszenie .form-row-last{ grid-column: 2; }

.av-zgloszenie .form-row label{
	display: block;
	font-family: var(--av-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--av-ink);
	margin: 0 0 6px;
}

.av-zgloszenie .form-row label .required{
	color: var(--av-red);
	border: 0;
	text-decoration: none;
}

.av-zgloszenie .form-row .input-text,
.av-zgloszenie .form-row select,
.av-zgloszenie .form-row textarea{
	width: 100%;
	font-family: var(--av-font-body);
	font-size: 15px;
	color: var(--av-ink);
	background: #fff;
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	padding: 13px 14px;
	box-shadow: none;
}

.av-zgloszenie .form-row .input-text:focus,
.av-zgloszenie .form-row select:focus,
.av-zgloszenie .form-row textarea:focus{
	outline: 2px solid var(--av-red);
	outline-offset: -1px;
	border-color: var(--av-red);
}

.av-zgloszenie .form-row.woocommerce-invalid .input-text{ border-color: var(--av-red); }

/* Lista krajow, ktora WooCommerce podmienia na select2. */
.av-zgloszenie .select2-container--default .select2-selection--single{
	height: auto;
	background: #fff;
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	padding: 12px 14px;
}

.av-zgloszenie .select2-container--default .select2-selection--single .select2-selection__rendered{
	font-family: var(--av-font-body);
	font-size: 15px;
	color: var(--av-ink);
	line-height: 1.3;
	padding: 0;
}

.av-zgloszenie .select2-container--default .select2-selection--single .select2-selection__arrow{ top: 50%; transform: translateY(-50%); right: 10px; }

/* ---- Faktura na zadanie ----
   Nazwa firmy i NIP sa schowane, dopoki ktos nie zaznaczy, ze potrzebuje
   faktury. Klase av-js-zgloszenie dodaje skrypt, wiec przy wylaczonym
   JavaScripcie pola zostaja widoczne i formularz dziala po staremu. */

.av-js-zgloszenie .av-faktura-pole{ display: none; }
.av-js-zgloszenie .av-faktura-pole--widoczne{ display: block; }

.av-zgloszenie .av-faktura-przelacznik{ margin-bottom: 18px; }

.av-zgloszenie .av-faktura-przelacznik label{
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--av-font-body);
	font-size: 14.5px;
	font-weight: 400;
	color: var(--av-ink);
	margin: 0;
	cursor: pointer;
}

/* WooCommerce dokleja „(opcjonalne)” do kazdego pola, ktore nie jest wymagane.
   Przy przelaczniku to bez sensu: on z natury jest wyborem, a dopisek sugeruje,
   ze mozna go pominac tak samo jak numer telefonu. */
.av-zgloszenie .av-faktura-przelacznik .optional{ display: none; }

.av-zgloszenie .av-faktura-przelacznik input[type="checkbox"]{
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: var(--av-red);
	margin: 0;
	cursor: pointer;
}

/* ---- Podsumowanie ---- */

.av-zgloszenie .shop_table{
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0 0 20px;
}

.av-zgloszenie .shop_table th,
.av-zgloszenie .shop_table td{
	border: 0;
	border-bottom: 1px solid var(--av-linia-lekka);
	padding: 12px 0;
	font-family: var(--av-font-body);
	font-size: 14px;
	color: var(--av-ink);
	text-align: left;
	vertical-align: top;
}

.av-zgloszenie .shop_table thead th{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-ink-soft);
	padding-bottom: 10px;
}

.av-zgloszenie .shop_table td.product-total,
.av-zgloszenie .shop_table th:last-child,
.av-zgloszenie .shop_table td:last-child{ text-align: right; white-space: nowrap; }

.av-zgloszenie .shop_table .product-name{ line-height: 1.45; }

.av-zgloszenie .shop_table .order-total th,
.av-zgloszenie .shop_table .order-total td{
	border-bottom: 0;
	padding-top: 16px;
	font-family: var(--av-font-head);
	font-size: 20px;
	font-weight: 600;
	color: var(--av-ink);
}

/* Dane wariantu pod nazwa kursu. */
.av-zgloszenie .variation{
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--av-ink-soft);
}

.av-zgloszenie .variation dt,
.av-zgloszenie .variation dd{ display: inline; margin: 0; padding: 0; font-weight: 400; }
.av-zgloszenie .variation dd{ margin-right: 6px; }
.av-zgloszenie .variation p{ margin: 0; }

/* ---- Liczba miejsc i rezygnacja ---- */

.av-poz{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin: 10px 0 0;
	font-weight: 400;
}

.av-poz__ilosc{
	font-family: var(--av-font-body);
	font-size: 12.5px;
	color: var(--av-ink-soft);
}

.av-poz__akcje{ display: flex; align-items: center; gap: 6px; }

.av-poz__krok,
.av-poz__krok:visited{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-family: var(--av-font-body);
	font-size: 15px;
	line-height: 1;
	color: var(--av-ink);
	background: #fff;
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	text-decoration: none;
}

.av-poz__krok:hover,
.av-poz__krok:focus,
.av-poz__krok:active{
	background: #fff;
	color: var(--av-red);
	border-color: var(--av-red);
}

.av-poz__usun,
.av-poz__usun:visited{
	font-family: var(--av-font-body);
	font-size: 12.5px;
	color: var(--av-ink-soft);
	text-decoration: underline;
	margin-left: 4px;
}

.av-poz__usun:hover,
.av-poz__usun:focus,
.av-poz__usun:active{ color: var(--av-red); }

/* ---- Platnosc ---- */

.av-zgloszenie #payment{
	background: transparent;
	border-radius: 0;
	padding: 0;
}

/* Bez kreski u gory. Platnosc jest osobna karta, wiec ma juz swoja ramke. */
.av-zgloszenie #payment ul.payment_methods{
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.av-zgloszenie #payment ul.payment_methods li{
	margin: 0 0 10px;
	font-family: var(--av-font-body);
	font-size: 14.5px;
	color: var(--av-ink);
}

.av-zgloszenie #payment ul.payment_methods li label{ font-weight: 600; }

.av-zgloszenie #payment div.payment_box{
	background: var(--av-paper);
	border-radius: 2px;
	padding: 12px 14px;
	margin: 8px 0 0;
	font-family: var(--av-font-body);
	font-size: 13px;
	line-height: 1.6;
	color: var(--av-ink-soft);
}

.av-zgloszenie #payment div.payment_box::before{ display: none; }

.av-zgloszenie .woocommerce-privacy-policy-text{
	font-family: var(--av-font-body);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--av-ink-soft);
}

.av-zgloszenie .woocommerce-privacy-policy-text p{ margin: 0 0 14px; }

/* Przycisk konczacy zapis. Selektor z identyfikatorem, bo Kadence koloruje
   przyciski wlasna paleta i przy samej klasie wracal blekit. */
#place_order,
#place_order:hover,
#place_order:focus,
#place_order:active{
	display: block;
	width: 100%;
	font-family: var(--av-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--av-red);
	border: 0;
	border-radius: 2px;
	padding: 17px 24px;
	cursor: pointer;
}

#place_order:hover{ background: var(--av-red-hover); }
#place_order:focus-visible{ outline: 2px solid var(--av-ink); outline-offset: 3px; }

/* ---- Kod rabatowy ---- */

.woocommerce-form-coupon-toggle{ margin: 0 0 24px; }

.checkout_coupon{
	border: 1px solid var(--av-linia-lekka);
	border-radius: 2px;
	padding: 18px;
	margin: 0 0 24px;
	background: var(--av-karta);
}

.checkout_coupon .form-row{ margin-bottom: 12px; }

.checkout_coupon .input-text{
	width: 100%;
	font-family: var(--av-font-body);
	font-size: 15px;
	color: var(--av-ink);
	background: #fff;
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	padding: 13px 14px;
}

.checkout_coupon button,
.checkout_coupon button:hover,
.checkout_coupon button:focus,
.checkout_coupon button:active{
	font-family: var(--av-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--av-red);
	background: transparent;
	border: 1px solid var(--av-red);
	border-radius: 2px;
	padding: 12px 22px;
	cursor: pointer;
}

.checkout_coupon button:hover{ background: var(--av-red); color: #fff; }

/* ---- Powiadomienia, druga proba ----
   Reguly z sekcji 2b opisuja sama klase, a Kadence celuje w te elementy
   selektorem z klasa strony, wiec na zamowieniu wygrywalo. */
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error{
	background: var(--av-karta);
	border: 1px solid var(--av-linia-lekka);
	border-left: 3px solid var(--av-red);
	border-radius: 2px;
	color: var(--av-ink);
	font-family: var(--av-font-body);
	font-size: 14.5px;
	line-height: 1.6;
	padding: 14px 18px;
}

.woocommerce-page .woocommerce-error{ background: var(--av-blush); }

.woocommerce-page .woocommerce-info a,
.woocommerce-page .woocommerce-message a{ color: var(--av-red); }

/* ---- Uczestnicy w kolumnie formularza ---- */

.av-zgloszenie .av-uczestnicy{ margin: 34px 0 0; }

/* Na telefonie kolejnosc jest inna niz kolejnosc kolumn.
   Najpierw podsumowanie, zeby przed wypelnianiem bylo widac, za co sie placi.
   Potem dane. Platnosc na koncu, bo dopiero wtedy jest czym placic.

   display: contents na kolumnie bocznej rozpuszcza jej ramke, dzieki czemu
   obie karty staja sie samodzielnymi elementami tej samej listy i kazda
   dostaje wlasne miejsce w kolejnosci. */
@media (max-width: 900px){
	.av-zgloszenie__grid{
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		gap: 22px;
	}
	.av-zgloszenie__bok{ display: contents; }
	.av-zgloszenie__podsumowanie{ order: 1; }
	.av-zgloszenie__glowna{ order: 2; }
	.av-zgloszenie__platnosc{ order: 3; }
}

@media (max-width: 600px){
	.av-zgloszenie .woocommerce-billing-fields__field-wrapper,
	.av-zgloszenie .woocommerce-shipping-fields__field-wrapper,
	.av-zgloszenie .woocommerce-additional-fields__field-wrapper,
	.av-zgloszenie .av-uczestnik{ grid-template-columns: minmax(0, 1fr); }
	.av-zgloszenie .form-row-first,
	.av-zgloszenie .form-row-last{ grid-column: 1; }
}

/* --------------------------------------------------------------------------
   12. Tablet i telefon
   -------------------------------------------------------------------------- */

@media (max-width: 1024px){
	.av-kurs-head__grid{ grid-template-columns: minmax(0, 1fr); }
	.av-kurs-head__foto{ order: -1; aspect-ratio: 16 / 9; }
	.av-zapis{ max-width: none; }
}

@media (max-width: 920px){
	.av-terminy{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px){
	.av-terminy{ grid-template-columns: minmax(0, 1fr); }
	.av-zapis .quantity{ display: block; margin: 0 0 12px; }
	.av-zapis .quantity input[type="number"]{ width: 100%; }
	.av-zapis .single_add_to_cart_button{ display: flex; width: 100%; }
}

@media (max-width: 600px){
	.av-pasek__in{ padding: 10px 16px; gap: 12px; }
	.av-pasek__tytul{ font-size: 15px; }
	.av-pasek__cena{ font-size: 15px; }
	.av-pasek__btn{ padding: 13px 20px; font-size: 13px; }
	body.av-ma-pasek{ padding-bottom: 76px; }
	.av-zapis__cena{ font-size: 28px; }
}

/* ==========================================================================
   16. Opinie o szkoleniu
   Korzystamy z szablonu opinii WooCommerce, wiec stylujemy jego klasy.
   Gwiazdki WooCommerce rysuje wlasnym fontem ikon przez ::before, dlatego
   wystarczy zmienic kolor, nie trzeba podmieniac znakow.
   ========================================================================== */

/* ---------- Ocena w naglowku szkolenia ---------- */

.av-ocena{
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	margin: 10px 0 0;
	text-decoration: none;
}

.av-ocena__gwiazdki{
	color: var(--av-red);
	font-size: 15px;
	letter-spacing: .12em;
	line-height: 1;
}

.av-ocena__liczba{
	font-family: var(--av-font-head);
	font-size: 16px;
	font-weight: 600;
	color: var(--av-ink);
	font-variant-numeric: tabular-nums;
}

.av-ocena__ile{
	font-size: 12.5px;
	letter-spacing: .04em;
	color: var(--av-ink-soft);
	border-bottom: 1px solid currentColor;
}

.av-ocena:hover .av-ocena__ile{ color: var(--av-red); }

/* ---------- Blok opinii ---------- */

.av-opinie-woo #reviews{ margin: 0; }
.av-opinie-woo #comments > h2{ display: none; }   /* naglowek daje nasz blok */

.av-opinie-woo .commentlist{
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
	display: grid;
	gap: 18px;
}

.av-opinie-woo .commentlist li{
	margin: 0;
	padding: 24px 26px;
	background: var(--av-karta);
	border: 1px solid var(--av-linia-lekka);
	border-left: 3px solid var(--av-red);
	border-radius: 3px;
}

.av-opinie-woo .comment_container{
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.av-opinie-woo .comment_container img.avatar{
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex: 0 0 auto;
	margin: 0;
	position: static;
}

.av-opinie-woo .comment-text{
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
}

.av-opinie-woo .meta{
	margin: 0 0 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--av-ink-soft);
}

.av-opinie-woo .meta strong{
	display: block;
	font-family: var(--av-font-head);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--av-ink);
}

.av-opinie-woo .woocommerce-review__verified{
	display: inline-block;
	margin-top: 3px;
	padding: 2px 8px;
	border-radius: 2px;
	background: var(--av-blush);
	color: var(--av-red);
	font-size: 11px;
	font-weight: 600;
	font-style: normal;
	letter-spacing: .02em;
}

.av-opinie-woo .description p{
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--av-ink);
}
.av-opinie-woo .description p:last-child{ margin-bottom: 0; }

/* Gwiazdki WooCommerce w kolorze marki. */
.av-opinie-woo .star-rating,
.av-opinie-woo p.stars a{ color: var(--av-red); }

.av-opinie-woo .woocommerce-noreviews{
	margin: 0 0 28px;
	padding: 18px 20px;
	background: var(--av-karta);
	border: 1px dashed var(--av-sand-soft);
	border-radius: 3px;
	font-size: 14.5px;
	color: var(--av-ink-soft);
}

/* ---------- Formularz opinii ---------- */

.av-opinie-woo #review_form_wrapper{
	padding: 28px 28px 26px;
	background: #fff;
	border: 1px solid var(--av-linia-lekka);
	border-top: 3px solid var(--av-sand-soft);
	border-radius: 3px;
}

.av-opinie-woo #reply-title{
	display: block;
	font-family: var(--av-font-head);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--av-ink);
	margin: 0 0 6px;
}

.av-opinie__nota,
.av-opinie-woo .comment-notes{
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--av-ink-soft);
}

.av-opinie-woo .comment-form-rating label,
.av-opinie-woo .comment-form label{
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--av-ink-soft);
}

.av-opinie-woo .comment-form input[type="text"],
.av-opinie-woo .comment-form input[type="email"],
.av-opinie-woo .comment-form textarea{
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	background: var(--av-paper);
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	font-family: var(--av-font-body);
	font-size: 15px;
	color: var(--av-ink);
}

.av-opinie-woo .comment-form input[type="text"]:focus,
.av-opinie-woo .comment-form input[type="email"]:focus,
.av-opinie-woo .comment-form textarea:focus{
	outline: none;
	border-color: var(--av-red);
	box-shadow: 0 0 0 3px rgba(211, 0, 0, .1);
}

.av-opinie-woo .comment-form p{ margin: 0 0 16px; }

.av-opinie-woo .form-submit input[type="submit"]{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	border: 0;
	border-radius: 2px;
	background: var(--av-red);
	color: #fff;
	font-family: var(--av-font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease;
}

.av-opinie-woo .form-submit input[type="submit"]:hover{ background: var(--av-red-hover); }

@media (max-width: 600px){
	.av-opinie-woo .commentlist li{ padding: 20px; }
	.av-opinie-woo .comment_container{ gap: 12px; }
	.av-opinie-woo .comment_container img.avatar{ width: 36px; height: 36px; }
	.av-opinie-woo #review_form_wrapper{ padding: 22px 20px 20px; }
}