/* ==========================================================================
   ui-zakup.css (v3 "Meridian"): ścieżka zakupu wspólna dla stron warstwy.
   Ładuje się sam (inc/ui/zakup.php, ewardega_ui_zakup_assets) po ui.css i po arkuszach szuflady wtyczek.
   - Szuflada ewa-cart (aside#ewacartDrawer.ewacart-drawer, stan .is-open z wtyczki): markup wtyczki
     bez zmian, tu tylko skórka. ui.css (sekcja 10) chowa .ewacart-drawer do [open] jak <dialog> z makiety,
     a wtyczka otwiera klasą .is-open, więc szuflada musi zostać w układzie (widoczność daje wtyczka).
   - Toast "Dodano do koszyka" nie zasłania stopki szuflady.
   ========================================================================== */

/* 1. Szuflada: układ (wtyczka przesuwa ją transform/visibility) */
body.ewa-ui .ewacart-drawer {
	display: flex; flex-direction: column; inset: 0 0 0 auto;
	width: min(100vw, 440px); height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
	color: var(--ui-ink); background: var(--ui-ivory); font-family: var(--ui-font);
	border-radius: 0; box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .45);
}
@media (min-width: 600px) {
	body.ewa-ui .ewacart-drawer { inset: 12px 12px 12px auto; height: auto; width: 440px; border-radius: 28px; overflow: hidden; }
}
/* Tło jak pod sheetem terminu (dialog::backdrop w ui.css): to samo przyciemnienie, rozmycie i czas, więc przejście
   sheet -> szuflada nie zmienia systemu (runda 3 kasy, pkt 10) */
body.ewa-ui .ewacart-overlay {
	background: rgba(11, 9, 7, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	transition: opacity var(--ui-t3) var(--ui-ease-sheet), visibility 0s linear var(--ui-t3);
}
body.ewa-ui .ewacart-overlay.is-open { transition: opacity var(--ui-t3) var(--ui-ease-sheet), visibility 0s; }

/* Nagłówek: etykieta + tytuł jak w makiecie ("Twój koszyk" + licznik), zamknij 44 px */
body.ewa-ui .ewacart-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--ui-line); background: var(--ui-ivory); }
body.ewa-ui .ewacart-drawer__title { display: flex; align-items: center; gap: 10px; margin: 0; font: 300 1.625rem/1.1 var(--ui-font); letter-spacing: -.03em; color: var(--ui-ink); }
body.ewa-ui .ewacart-drawer__title :is(.ewacart-count, .fkcart-shortcode-price) {
	display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
	font: 700 13px/1 var(--ui-font); letter-spacing: 0; color: var(--ui-on-orange); background: var(--ui-orange);
}
body.ewa-ui .ewacart-drawer__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; color: var(--ui-ink); background: var(--ui-card); box-shadow: inset 0 0 0 1px var(--ui-line); cursor: pointer; }
body.ewa-ui .ewacart-drawer__close:hover { box-shadow: inset 0 0 0 1px var(--ui-ink); }

/* Treść: karta pozycji, perki */
body.ewa-ui .ewacart-drawer__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 20px; display: block; }
body.ewa-ui .ewacart-items { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
body.ewa-ui .ewacart-item {
	position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 0 0;
	padding: 14px 14px 14px 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-r); background: var(--ui-card); box-shadow: var(--ui-sh-1);
}
body.ewa-ui .ewacart-item__media { width: 72px; height: 90px; border-radius: 12px; overflow: hidden; background: var(--ui-noir); box-shadow: inset 0 0 0 1px var(--ui-gold-a); }
body.ewa-ui .ewacart-item__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
body.ewa-ui .ewacart-item__main { display: grid; gap: 8px; min-width: 0; padding-right: 34px; }
body.ewa-ui .ewacart-item__name { font: 600 1.0625rem/1.3 var(--ui-font); letter-spacing: -.01em; color: var(--ui-ink); }
body.ewa-ui .ewacart-item__name a { display: inline; min-height: 0; color: inherit; text-decoration: none; }
body.ewa-ui .ewacart-item__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.ewa-ui .ewacart-item__chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.ewa-ui .ewacart-chip {
	display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border-radius: 999px;
	font: 600 var(--ui-fs-xs)/1.2 var(--ui-font); letter-spacing: 0; text-transform: none; color: var(--ui-ink-2); background: rgba(22, 18, 14, .04); border: 1px solid var(--ui-line);
}
body.ewa-ui .ewacart-chip svg { width: 14px; height: 14px; color: var(--ui-gold-ink); }
/* Chip "zadatek" bez kwoty czytał się dwuznacznie obok ceny kursu; zadatek i jego kwota stoją w stopce szuflady (runda 2) */
body.ewa-ui .ewacart-chip--deposit { display: none; }
body.ewa-ui .ewacart-item__stock { width: fit-content; padding: 0; font: 600 var(--ui-fs-xs)/1.3 var(--ui-font); color: var(--ui-orange-ink); background: none; display: inline-flex; align-items: center; gap: 6px; }
body.ewa-ui .ewacart-item__stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Jedno miejsce: bez stepera (zakup.php dodaje .ui-q1; liczbę miejsc zmienia termin i koszyk) */
body.ewa-ui .ewacart-item.ui-q1 .ewacart-qty { display: none; }
body.ewa-ui .ewacart-item__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.ewa-ui .ewacart-item.ui-q1 .ewacart-item__row { justify-content: flex-end; }
/* Wiersz ceny pod przyciskiem usuwania, więc bez rezerwy na "x": cena równo z prawą krawędzią treści karty i kwotą w stopce */
body.ewa-ui .ewacart-item__row { margin-right: -34px; }
/* Jedno miejsce (bez stepera): cena w jednym wierszu ze statusem "Ostatnie 3 miejsca", bez pustego wiersza pod spodem */
body.ewa-ui .ewacart-item.ui-q1 .ewacart-item__main { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
body.ewa-ui .ewacart-item.ui-q1 .ewacart-item__main > :not(.ewacart-item__stock, .ewacart-item__row) { grid-column: 1 / -1; }
body.ewa-ui .ewacart-item.ui-q1 .ewacart-item__stock { grid-column: 1; align-self: center; }
body.ewa-ui .ewacart-item.ui-q1 .ewacart-item__row { grid-column: 2; align-self: center; }
body.ewa-ui .ewacart-item__price { font: 600 1rem var(--ui-font); color: var(--ui-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.ewa-ui .ewacart-item__price :is(.woocommerce-Price-amount, bdi) { font: inherit; color: inherit; }
body.ewa-ui .ewacart-qty { display: inline-flex; align-items: center; border: 1px solid var(--ui-line-2); border-radius: 999px; background: var(--ui-card); }
body.ewa-ui .ewacart-qty__btn { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; border: 0; border-radius: 50%; background: none; color: var(--ui-ink); font: 400 1.25rem/1 var(--ui-font); cursor: pointer; }
body.ewa-ui .ewacart-qty__btn:hover { background: rgba(22, 18, 14, .06); }
body.ewa-ui .ewacart-qty__val { min-width: 24px; text-align: center; font: 600 1rem var(--ui-font); font-variant-numeric: tabular-nums; }
body.ewa-ui .ewacart-item__remove {
	position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: none; color: var(--ui-ink-3); font: 300 1.5rem/1 var(--ui-font); cursor: pointer;
}
body.ewa-ui .ewacart-item__remove:hover { color: #a3261b; background: rgba(163, 38, 27, .08); }
body.ewa-ui .ewacart-perks { display: grid; gap: 6px; margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-r); background: var(--ui-paper); font-size: var(--ui-fs-s); color: var(--ui-ink-2); }
body.ewa-ui .ewacart-perks__label { font: 600 var(--ui-fs-xs)/1.4 var(--ui-font); letter-spacing: .16em; text-transform: uppercase; color: var(--ui-gold-ink); }
body.ewa-ui .ewacart-perk { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: var(--ui-fs-s); color: var(--ui-ink-2); }
body.ewa-ui .ewacart-perk svg, body.ewa-ui .ewacart-perk__ico { flex: none; width: 18px; height: 18px; color: var(--ui-gold-ink); }
body.ewa-ui .ewacart-perk span { font-size: inherit; color: inherit; }
/* Lista pod blokiem "W cenie szkolenia" (inc/ui/zakup.php): przepisanie zadatku, faktury, telefon, jak w koszyku i kasie */
/* Ten sam rytm co w koszyku i kasie: odstęp 10 px, ikona przy pierwszej linii, telefon inline z celem 44 px na wierszu */
body.ewa-ui .ewacart-drawer .ui-kasa-perks { display: grid; gap: 10px; margin: 16px 0 0; padding: 0 16px; list-style: none; font-size: var(--ui-fs-s); line-height: 1.45; color: var(--ui-ink-2); }
body.ewa-ui .ewacart-drawer .ui-kasa-perks li { position: relative; display: flex; gap: 10px; align-items: flex-start; min-height: 0; }
body.ewa-ui .ewacart-drawer .ui-kasa-perks .ui-ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ui-gold-ink); }
body.ewa-ui .ewacart-drawer .ui-kasa-perks a { display: inline; min-height: 0; padding-block: calc((44px - 1.375em) / 2); font-weight: 600; color: var(--ui-ink); text-decoration: none; }
body.ewa-ui .ewacart-drawer .ui-kasa-perks a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.ewa-ui :is(.ewacart-empty, .ewacart-drawer__empty) { display: grid; justify-items: center; gap: 12px; padding: 40px 12px; text-align: center; }
body.ewa-ui .ewacart-empty__icon { color: var(--ui-gold-ink); }
body.ewa-ui .ewacart-empty__text { font-size: 1rem; color: var(--ui-ink-2); }

/* Stopka: ciemna karta "Zadatek dziś" (bilet), CTA rezerwacji pomarańczowe, powrót obrysem */
body.ewa-ui .ewacart-foot { display: grid; gap: 10px; padding: 16px 20px calc(16px + var(--ui-safe)); border-top: 1px solid var(--ui-line); background: var(--ui-card); }
body.ewa-ui .ewacart-deposit {
	position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 4px; padding: 16px 18px; border: 0; border-radius: var(--ui-r);
	color: var(--ui-snow); background: radial-gradient(120% 90% at 100% 0, rgba(201, 164, 106, .12), transparent 60%), var(--ui-noir-2);
}
body.ewa-ui .ewacart-deposit::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201, 164, 106, .28); border-radius: calc(var(--ui-r) - 5px); pointer-events: none; }
body.ewa-ui .ewacart-deposit span { font-size: inherit; color: inherit; }
body.ewa-ui .ewacart-deposit__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; color: var(--ui-noir); background: var(--ui-gold); box-shadow: none; }
body.ewa-ui .ewacart-deposit__ico svg { width: 100%; height: 100%; }
body.ewa-ui .ewacart-deposit__main { display: grid; gap: 4px; min-width: 0; flex: 1; }
body.ewa-ui .ewacart-deposit__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body.ewa-ui .ewacart-deposit .ewacart-deposit__label { font: 600 var(--ui-fs-s) var(--ui-font); color: var(--ui-snow); }
body.ewa-ui .ewacart-deposit .ewacart-deposit__amt, body.ewa-ui .ewacart-deposit__amt :is(.woocommerce-Price-amount, bdi) { font: 300 1.75rem/1 var(--ui-font); letter-spacing: -.03em; color: var(--ui-snow); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.ewa-ui .ewacart-deposit .ewacart-deposit__sub { font: 400 var(--ui-fs-xs)/1.45 var(--ui-font); color: var(--ui-snow-2); }
body.ewa-ui .ewacart-deposit__sub :is(.woocommerce-Price-amount, bdi) { white-space: nowrap; color: var(--ui-snow); font-weight: 600; }
/* Wiersze stopki (inc/ui/zakup.php: ewardega_ui_zakup_drawer_html): "Cena kursu X" i "Reszta później Y" bez kropki na końcu wiersza */
body.ewa-ui .ewacart-deposit__sub .ui-dsub { display: block; }
body.ewa-ui .ewacart-deposit__main { grid-template-columns: minmax(0, 1fr); }
body.ewa-ui .ewacart-btn {
	display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 24px; border-radius: 999px;
	font: 600 1.0313rem/1.15 var(--ui-font); letter-spacing: -.005em; text-transform: none; text-decoration: none; cursor: pointer;
	transition: background-color var(--ui-t1), box-shadow var(--ui-t2) var(--ui-ease), transform var(--ui-t2) var(--ui-spring);
}
body.ewa-ui .ewacart-btn:active { transform: scale(.98); }
body.ewa-ui .ewacart-btn--primary { color: var(--ui-on-orange); background: var(--ui-orange); border: 1px solid var(--ui-orange); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 28px -14px rgba(239, 133, 11, .8); }
body.ewa-ui .ewacart-btn--primary:hover { background: var(--ui-orange-hi); border-color: var(--ui-orange-hi); color: var(--ui-on-orange); }
body.ewa-ui .ewacart-btn--primary :is(svg, .ui-ico) { width: 18px; height: 18px; transition: transform var(--ui-t2) var(--ui-ease); }
body.ewa-ui .ewacart-btn--primary:hover :is(svg, .ui-ico) { transform: translateX(4px); }
body.ewa-ui .ewacart-btn--ghost { min-height: 48px; color: var(--ui-ink); background: transparent; border: 1px solid var(--ui-line-2); box-shadow: none; }
body.ewa-ui .ewacart-btn--ghost:hover { border-color: var(--ui-ink); background: transparent; }
body.ewa-ui .ewacart-drawer :focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
body.ewa-ui .ewacart-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 2. Toast: na telefonie szuflada zajmuje ekran i sama potwierdza dodanie, więc toast znika;
      na desktopie stoi u góry, obok szuflady (nie na jej przyciskach). */
/* Runda 2: także na desktopie bez toastu przy otwartej szufladzie; potwierdzenie dodania daje sama szuflada
   (nagłówek, pozycja i jej komunikat dla czytnika .ewacart-live), a toast obok niej nachodził na menu. */
body.ewa-ui:has(.ewacart-drawer.is-open) .ui-toast { display: none; }

/* 3. Sheet wyboru terminu (fundament ui.css): siatka wyboru odporna na arkusze podstron
      (stare .ui-pick z v2 rozpychały kolumnę radia). Id dialogu daje pierwszeństwo. */
#ui-sheet .ui-pick { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "r d p" "r s st"; gap: 2px 14px; padding: 14px 16px; }
#ui-sheet .ui-pick > * { min-width: 0; }
#ui-sheet .ui-pick .ui-st { white-space: nowrap; }
/* Telefon: status pod miastem, żeby data i miasto miały całą szerokość (bez łamania "23-25 / października") */
@media (max-width: 479px) {
	#ui-sheet .ui-pick { grid-template-areas: "r d p" "r s s" "r st st"; }
	#ui-sheet .ui-pick .ui-st { justify-self: start; margin-top: 4px; }
	/* Runda 2: gęstsze karty terminów, żeby karta kwot weszła wyżej nad stopkę z CTA */
	#ui-sheet .ui-pick { gap: 0 14px; padding-block: 10px; }
	#ui-sheet .ui-pick .ui-st { margin-top: 2px; }
	#ui-sheet .ui-picks { gap: 6px; }
}
/* Treść sheetu przewija się pod stopką z CTA: miękkie wygaszenie dolnej krawędzi mówi, że jest dalej,
   a zapas na dole pozwala dojechać ostatnim akapitem nad wygaszenie. Bez treści do przewinięcia gaśnie sam zapas. */
#ui-sheet .ui-sheet__body {
	padding-bottom: 32px;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}

/* Sheet: hierarchia kwot jak w szufladzie, koszyku i kasie. Bohaterem jest zadatek dziś (duży, lekki),
   cena kursu to zwykły wiersz nad paskiem proporcji (runda 3 kasy, pkt 2; markup components.php bez zmian).
   Pełna płatność (is-full, bez zadatku): cena kursu zostaje dużą kwotą. */
#ui-sheet .ui-sum__big dd { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
#ui-sheet .ui-sum__dep { align-items: baseline; }
#ui-sheet .ui-sum__dep dt { color: var(--ui-ink); font-weight: 600; }
#ui-sheet .ui-sum__dep dd { font-size: 1.625rem; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
#ui-sheet.is-full .ui-sum__big dd { font-size: 1.5rem; font-weight: 300; letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce) {
	body.ewa-ui .ewacart-drawer, body.ewa-ui .ewacart-overlay { transition-duration: 1ms !important; }
}

/* 4. Elewacja 2.2 (noc, runda 2 kasy, pkt 8) */
/* Treść szuflady kolumną: pozycja i blok "W cenie szkolenia" razem u góry (runda 3 nocy, pkt 2: dziura między nimi
   rozsypywała kompozycję w chwili decyzji), lista zapewnień (przepisanie, faktury, telefon) dosunięta do stopki z zadatkiem.
   Wolne miejsce wysokiego telefonu stoi nad listą, a nie jako pusta kość słoniowa nad stopką; przy wielu pozycjach
   (przewijanie) auto = 0 i układ jak dotąd. */
body.ewa-ui .ewacart-drawer__body:has(> .ewacart-items) { display: flex; flex-direction: column; }
body.ewa-ui .ewacart-drawer__body > * { flex: none; }
body.ewa-ui .ewacart-drawer__body > .ewacart-perks { margin-top: 16px; }
body.ewa-ui .ewacart-drawer__body > .ewacart-perks + .ui-kasa-perks { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ui-line); } /* linia: zapewnienia to stopka treści, nie zgubiony akapit */
/* Odbiór kasy (pkt 6): przy jednej pozycji auto dawało 48 do 75 px pustki nad listą (wyglądała na zgubioną). Do stopki
   dosuwa się tylko w wysokim oknie, gdzie pustka i tak byłaby pod listą. */
@media (min-height: 1000px) { body.ewa-ui .ewacart-drawer__body > .ewacart-perks + .ui-kasa-perks { margin-top: auto; } }
body.ewa-ui .ewacart-drawer__body > .ewacart-items { margin-bottom: 0; }
/* Karta zadatku jak bilet koszyka i kasy: bez ikony portfela, etykieta "Zadatek dziś" i 500 zł wielką cienką liczbą
   w złocie na ciemnym (elewacja §1 zasada 4), wiersze ceny i reszty pod spodem */
body.ewa-ui .ewacart-deposit { padding: 18px 20px 16px; }
body.ewa-ui .ewacart-deposit__ico { display: none; }
body.ewa-ui .ewacart-deposit__top { align-items: last baseline; }
body.ewa-ui .ewacart-deposit .ewacart-deposit__amt, body.ewa-ui .ewacart-deposit__amt :is(.woocommerce-Price-amount, bdi) {
	font-size: clamp(2.5rem, 2.2rem + 1.2vw, 2.875rem); font-weight: 200; line-height: .95; letter-spacing: -.035em; color: var(--ui-gold);
}
body.ewa-ui .ewacart-deposit__main { gap: 8px; }

/* 5. Elewacja 2.2 (noc, runda 3, pkt 1) */
/* Status "Ostatnie miejsca" w sheecie terminu i w szufladzie stoi: przy wyborze terminu i kwotach zero pętli
   (§6: maks. jedna widoczna pętla ciągła, tylko z data-anim; §3.0: pulsu nie ma w inwentarzu). Kropka zostaje. */
body.ewa-ui :is(#ui-sheet, .ewacart-drawer) .ui-st--last::before { animation: none; }

/* Komunikat Woo "… jest w koszyku" (ścieżka bez JS, ?add-to-cart=; inc/ui/zakup.php): "Zobacz koszyk" jako zwykły
   link tuż za zdaniem, do lewej, z celem 44 px; bez pustej obwódki pigułki (odbiór kasy 2026-10-12, pkt 11). */
.woocommerce-message .ui-wcmsg__a { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; }

/* 6. Odbiór kasy, runda 3 (2026-10-12) ------------------------------------- */
/* pkt 9: cele 44 px w szufladzie na samych linkach (nazwa kursu, telefon). Dopełnienie pionowe elementu inline nie zmienia
   wysokości wiersza, więc rytm karty i listy zostaje; nakładka telefonu na cały wiersz zdjęta (zachodziła na punkt wyżej). */
body.ewa-ui .ewacart-item__name a { padding-block: calc((44px - 1.375em) / 2); }
/* pkt 8: zamknięcie szuflady. Obrys fokusu jeden, 2 px w tokenie --ui-focus, bez wewnętrznej linii przycisku (dwa pierścienie
   czytały się jak gruba podwójna obwódka). Po otwarciu myszą albo dotykiem (html.ui-ptr, skrypt w inc/ui/zakup.php) obrysu
   nie ma, wraca przy pierwszym klawiszu; otwarcie klawiaturą pokazuje go od razu. */
body.ewa-ui .ewacart-drawer__close:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; box-shadow: none; }
html.ui-ptr body.ewa-ui .ewacart-drawer :focus-visible { outline: none; }
html.ui-ptr body.ewa-ui .ewacart-drawer__close:focus-visible { box-shadow: inset 0 0 0 1px var(--ui-line); }
/* pkt 7: sheet od 860 px (panel z prawej) kończy się pod treścią, więc stopka z CTA stoi tuż pod kwotami zamiast 110 px
   niżej przy dolnej krawędzi okna. Przy wielu terminach panel rośnie do wysokości okna i treść przewija się jak dotąd. */
@media (min-width: 860px) {
	#ui-sheet.ui-sheet { inset: 12px 12px auto auto; height: auto; max-height: calc(100dvh - 24px); }
}