/* ============================================================================
   21c-oferta-okno.css — OKNO „OFERTA KONSULTACJI” (wzór: PROJEKT-OKIEN\artefakt\Konsultacje.html, okno `ofk-okno`; zlecenie 18.10.2026)
   ----------------------------------------------------------------------------
   Kod: okna/oferta-konsultacji-okno.js, -karty.js, -wersje.js. Telefon: 9-telefon/24-oferta-okno.css (wyłącznie :root[data-ui="mobile"]).
   Układ (komputer): nagłówek → pasek wersji (Oferta A | B | + Nowa wersja · Generuj prezentację) → panel ceny (21b) → po lewej filtry 236 px,
   po prawej przełącznik „Wszystkie konstrukcje | Wybrane do oferty” i siatka kart (przewija się tylko siatka). Tablet (≤ 1180 px): filtry w jednym
   wierszu (Szukaj | Norma | Typ | „Więcej filtrów”), całe okno się przewija, a pasek filtrów i przełącznik zostają przyklejone u góry.
   Mapa tokenów (wzór → program): --pow→--surface, --pow-3→--surface-3, --linia→--line, --linia-2→--line-soft, --ramka→--line-strong,
   --tusz→--text, --tusz-2→--text-muted, --tusz-3→--text-faint, --ak→--accent, --ak-tlo→--accent-soft, --na-ak→--on-accent, --bl→--danger,
   --bl-tlo→--danger-soft, --uw→--warn-strong, --ok-tlo→--ok-soft, --h-k→--h-control, --r-s→--r-sm, --r-p→--r-pill, --f-tytul→--font-tytul.
   Położenie i wysokość okna („duże”, przy dolnej krawędzi) — wyłącznie 3-komponenty/20-okna-polozenie.css; tu tylko szerokość (--okno-w).
   Progi: @media 1180 = kanon. Zero !important.
   ============================================================================ */

/* === 1. OKNO: szerokość 1180 jak inne duże okna wzoru; nagłówek 8 / 12 / 8 / 24, stopka 8 / 16, treść 12 / 16 === */
.modal.offer-modal.ofk-okno { --okno-w: 1180px; --ofk-h: 36px; --okno-tlo: var(--surface); box-shadow: var(--cien-2); }   /* --ofk-h: zakładki wersji mają we wzorze stałe 36 px także na tablecie; okno = powierzchnia jak Design (25h) */
#modal-root .modal.ofk-okno > header { align-items: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-5); border-bottom: 1px solid var(--line); }
#modal-root .modal.ofk-okno > header h2 { font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-bold); line-height: var(--lh-base); letter-spacing: var(--ls-tytul); }
#modal-root .modal.ofk-okno > footer { flex-wrap: wrap; padding: var(--s-2) var(--s-4); border-top-color: var(--line); }
/* przycisk drugorzędny = powierzchnia + ramka --line-strong (wzór: .btn); akcja główna: akcent, wyłączona — ten sam akcent w połowie krycia (wzór: .btn:disabled) */
#modal-root .modal.ofk-okno > footer .button:not(.primary), #modal-root .modal.ofk-okno .ofv-p .button:not(.primary) { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
#modal-root .modal.ofk-okno > footer .button:not(.primary):hover:not(:disabled), #modal-root .modal.ofk-okno .ofv-p .button:not(.primary):hover:not(:disabled) { background: var(--surface-2); }
#modal-root .modal.ofk-okno > footer .button.primary, #modal-root .modal.ofk-okno .ofv-p .button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
#modal-root .modal.ofk-okno > footer .button.primary:disabled, #modal-root .modal.ofk-okno .ofv-p .button.primary:disabled { opacity: .5; cursor: not-allowed; }
.modal.offer-modal.ofk-okno > .modal-form { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--s-2); min-height: 0; overflow: hidden; padding: var(--s-3) var(--s-4); background: var(--okno-tlo); font-size: var(--t-md); line-height: var(--lh-base); }
.modal.ofk-okno > .modal-form > * { flex: none; }
.modal.ofk-okno > .modal-form > .ofk-k { flex: 1 1 auto; min-height: 0; }
.ofk [data-oferta-dodatki] { padding: 0; }
.ofk [data-oferta-dodatki][hidden] { display: none; }

/* przyciski okna: krój wzoru (.btn — 14 px / 600, róg --r, 12 px po bokach) */
.modal.ofk-okno .ofv .button, .modal.ofk-okno .ofk-cbt, .modal.ofk-okno > footer .button, .modal.ofk-okno .ofk-wiecej { height: var(--h-control); gap: var(--s-2); padding: 0 var(--s-3); border-radius: var(--r); font-size: var(--t-base); font-weight: var(--w-bold); line-height: var(--lh-base); white-space: nowrap; }
.modal.ofk-okno .ofv .button .icon, .modal.ofk-okno .ofk-cbt .icon { width: 16px; height: 16px; flex: none; }

/* === 2. PASEK WERSJI === */
.ofv { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.ofv-l { display: flex; align-items: stretch; flex-wrap: wrap; gap: var(--s-2); min-width: 0; }
.ofv-t { position: relative; display: flex; }
#modal-root .modal.ofk-okno .ofv-t > button[role="tab"] { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--s-3); row-gap: 2px; min-width: 0; min-height: var(--ofk-h); padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text-muted); font: inherit; text-align: left; cursor: pointer; }
#modal-root .modal.ofk-okno .ofv-t > button[role="tab"]:hover { background: var(--surface-2); }
#modal-root .modal.ofk-okno .ofv-t > button[role="tab"]:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent); }
.ofv-t > button b { display: flex; align-items: center; gap: var(--s-1); color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); }
.ofv-t > button small { display: flex; align-items: center; gap: 3px; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
#modal-root .modal.ofk-okno .ofv-t.akt > button[role="tab"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 -3px 0 var(--accent); }
.ofv-t.akt > button small { color: var(--text-muted); }
.ofv-st { display: flex; flex-wrap: wrap; gap: 3px; margin: 0; }
.ofv-st em { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--r-pill); font-size: var(--t-xs); font-style: normal; font-weight: var(--w-strong); line-height: 12px; }
.ofv-nz { background: var(--warn-soft); color: var(--warn-strong); }
.ofv-li { background: var(--ok-soft); color: var(--ok); }
#modal-root .modal.ofk-okno .ofv-t:has(.ofv-x) > button[role="tab"] { padding-right: calc(var(--h-control) + var(--s-1)); }
.ofv-x { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.modal.ofk-okno .ofv .ofv-n { align-self: stretch; height: auto; min-height: var(--ofk-h); border: 1px dashed transparent; background: var(--accent-soft); color: var(--accent); }
.modal.ofk-okno .ofv .ofv-n:hover { background: color-mix(in srgb, var(--accent) 18%, var(--accent-soft)); }
.ofv-p { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }
.modal.ofk-okno .ofv .ofv-p .button:not(.primary) { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
.modal.ofk-okno .ofv .ofv-p .presentation-copy-link-button[hidden] { display: none; }
.ofv-p .presentation-copy-link-button::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.icon-minus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }

/* === 3. TREŚĆ: filtry 236 px | przełącznik + siatka kart === */
.ofk-k { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-areas: "fl pk" "fl sz"; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: stretch; }
.ofk-st { display: contents; }
.ofk-stl { display: none; }
.ofk-fl { grid-area: fl; align-self: start; max-height: 100%; margin: 0; overflow-y: auto; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ofk-ft { display: flex; align-items: baseline; gap: var(--s-2); }
.ofk-ft h3 { margin: 0; min-height: 0; font-size: var(--t-base); font-weight: var(--w-strong); line-height: var(--lh-base); white-space: nowrap; }
.ofk-fx { min-height: 24px; margin-left: auto; padding: 0 var(--s-1); border: 0; background: transparent; color: var(--accent); font: inherit; font-size: var(--t-xs); font-weight: var(--w-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ofk-fx[hidden] { display: none; }
.ofk-fx:hover { color: var(--accent-hover); }
.ofk-fx:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.ofk-fk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1) var(--s-2); }
.ofk-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#modal-root .modal.ofk-okno .ofk-f > label { display: flex; align-items: center; gap: var(--s-1); overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: var(--lh-base); text-overflow: ellipsis; white-space: nowrap; }
#modal-root .modal.ofk-okno :is(.ofk-fl, .ofk-ark) :is(select, .combo-input, .ofk-sr input, .ofk-zr input) { width: 100%; min-width: 0; height: 32px; min-height: 0; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background-color: var(--surface); color: var(--text); font: inherit; font-size: var(--t-sm); font-weight: var(--w-regular); line-height: var(--lh-base); }
#modal-root .modal.ofk-okno :is(.ofk-fl, .ofk-ark) .combo-input { padding-right: calc(var(--s-2) + 16px + var(--s-1)); }
#modal-root .modal.ofk-okno :is(.ofk-fl, .ofk-ark) .ofk-sr input { padding-left: calc(var(--s-2) + 16px + var(--s-1)); }
#modal-root .modal.ofk-okno :is(.ofk-fl, .ofk-ark) :is(.ofk-zr input, .ofk-sr input, .combo-input):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#modal-root .modal.ofk-okno :is(.ofk-fl, .ofk-ark) .combo-input::placeholder { color: var(--text); opacity: 1; }   /* „Wszystkie” = wartość pola, nie podpowiedź (wzór: select) */
.ofk-sr { position: relative; display: block; }
.ofk-sr .icon { position: absolute; left: var(--s-2); top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.ofk-wiecej { display: none; }
.ofk-w-m { display: none; }
.ofk-gr { display: flex; flex-direction: column; gap: var(--s-1); padding-top: var(--s-1); border-top: 1px solid var(--line-soft); }
.ofk-gr > b { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-strong); line-height: var(--lh-base); }
.ofk-gr > b small { margin-left: var(--s-1); color: var(--text-faint); font-size: inherit; font-weight: var(--w-medium); line-height: inherit; }
.ofk-zr { display: grid; grid-template-columns: 76px minmax(0, 1fr) 10px minmax(0, 1fr); align-items: center; gap: var(--s-1); color: var(--text-muted); font-size: var(--t-sm); }
.ofk-zr.jeden { grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr); }
.ofk-zr > i { color: var(--text-faint); font-style: normal; text-align: center; }
.ofk-zr input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ofk-zr input[type="number"]::-webkit-inner-spin-button, .ofk-zr input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.ofk-pk { grid-area: pk; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
#modal-root .modal .segmented.ofk-zak { display: inline-grid; grid-auto-flow: column; gap: 3px; padding: 3px; border: 0; border-radius: var(--r); background: var(--surface-3); }
#modal-root .modal .segmented.ofk-zak > button { min-height: var(--h-control); height: var(--h-control); padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; }
#modal-root .modal .segmented.ofk-zak > button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--cien-1); }
.ofk-zak button small { display: inline-block; min-width: 20px; margin-left: var(--s-1); padding: 0 6px; border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-strong); text-align: center; }
.ofk-zak button[aria-pressed="true"] small { background: var(--accent); color: var(--on-accent); }
.ofk-pod { color: var(--text-faint); font-size: var(--t-xs); line-height: var(--lh-base); }
.ofk-sz { grid-area: sz; min-width: 0; min-height: 0; margin: -3px; padding: 3px; overflow-y: auto; scrollbar-gutter: stable; outline: 0; }
.ofk-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: var(--s-3); }
.ofk-g > .pusto { grid-column: 1 / -1; padding: var(--s-4) 0; color: var(--text-faint); font-size: var(--t-sm); }

/* === 4. KARTA KONSTRUKCJI === */
.ofk-c { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.ofk-c.wyb { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ofk-cf { position: relative; }
.ofk-cf > .ofk-cz { position: relative; display: grid; place-items: center; overflow: hidden; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: 0; background: var(--surface-3); color: var(--accent); cursor: zoom-in; }
.ofk-cf > .ofk-cz.placeholder { border: 0; color: var(--text-faint); cursor: default; }
.ofk-cf > .ofk-cz .offer-thumb-image { width: 100%; height: 100%; padding: var(--s-2); object-fit: contain; box-sizing: border-box; transition: transform .2s; }
.ofk-cf > .ofk-cz:hover .offer-thumb-image { transform: scale(1.04); }
.ofk-cf > .ofk-cz:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.ofk-cf .offer-thumb-fallback .icon { width: 32px; height: 32px; }
.ofk-cf .offer-thumb-fallback small { font-size: var(--t-sm); }
.ofk-cok { position: absolute; left: var(--s-2); top: var(--s-2); display: inline-flex; align-items: center; gap: var(--s-1); height: 28px; padding: 0 var(--s-2) 0 6px; border-radius: var(--r-pill); background: var(--accent); box-shadow: var(--cien-1); color: var(--on-accent); font-size: var(--t-sm); font-weight: var(--w-strong); pointer-events: none; }
.ofk-cok .icon { width: 16px; height: 16px; }
.ofk-cl { position: absolute; right: var(--s-2); bottom: var(--s-2); display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--miniatura-licznik-tlo); color: var(--miniatura-licznik-tekst); font-size: var(--t-xs); font-weight: var(--w-strong); pointer-events: none; }
.ofk-cl .icon { width: 12px; height: 12px; }
.ofk-cc { display: flex; flex: 1; flex-direction: column; gap: var(--s-1); padding: var(--s-2) var(--s-3) var(--s-3); }
.ofk-ct { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ofk-ct > b { display: flex; align-items: flex-start; gap: var(--s-1); color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); line-height: var(--lh-tight); }
.ofk-ct > b > span:last-child { overflow-wrap: anywhere; }
.ofk-ct > small { overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.ofk-cm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1) var(--s-2); margin: 0; }
.ofk-cm > div { display: flex; flex-direction: column; min-width: 0; }
.ofk-cm > .sz { grid-column: span 2; }
.ofk-cm dt { overflow: hidden; color: var(--text-faint); font-size: var(--t-xs); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ofk-cm dd { display: flex; align-items: center; gap: var(--s-1); min-height: 20px; margin: 0; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.ofk-pg { height: var(--h-control); margin: calc((var(--h-control) - 20px) / -2) 0; padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--accent); font: inherit; font-size: var(--t-xs); font-weight: var(--w-bold); cursor: pointer; }
.ofk-pg:hover { background: var(--accent-soft); }
.ofk-pg:disabled { background: transparent; color: var(--text-faint); cursor: default; }
.ofk-ca { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: auto; padding-top: var(--s-1); border-top: 1px solid var(--line-soft); }
.ofk-c .ofk-kw { display: flex; flex-direction: column; min-width: 0; color: var(--text); font-size: var(--t-base); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ofk-c .ofk-kw.ofk-wp { color: var(--warn-strong); font-size: var(--t-sm); font-weight: var(--w-bold); white-space: normal; }
.ofk-c .ofk-min { color: var(--danger); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.modal.ofk-okno .ofk-cbt { flex: none; gap: var(--s-1); }
.modal.ofk-okno .ofk-cbt.primary { border-color: var(--accent); }
.modal.ofk-okno .ofk-cbt.us { border-color: transparent; background: var(--danger-soft); color: var(--danger); }
.modal.ofk-okno .ofk-cbt.us:hover { filter: brightness(1.05); }

/* === 5. ARKUSZ „WIĘCEJ FILTRÓW” (małe okno nad ofertą) === */
.modal.ofk-ark-okno { --okno-w: 460px; --okno-tlo: var(--surface); }
#modal-root .modal.ofk-ark-okno > footer { border-top-color: var(--line); }
#modal-root .modal.ofk-ark-okno > footer .button:not(.primary) { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
#modal-root .modal.ofk-ark-okno > footer .button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.ofk-ark-tresc { display: flex; flex-direction: column; gap: var(--s-3); }
.ofk-ark .ofk-fk { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.ofk-ark .ofk-gr { gap: var(--s-1); padding-top: var(--s-2); }
.ofk-ark .ofk-gr:first-child { padding-top: 0; border-top: 0; }

/* === 6. TABLET (≤ 1180 px, nie telefon): jedna kolumna, całe okno się przewija, pasek filtrów i przełącznik przyklejone u góry === */
@media (max-width: 1180px) {
  :root:not([data-ui="mobile"]) .modal.offer-modal.ofk-okno > .modal-form { display: block; overflow: auto; }
  :root:not([data-ui="mobile"]) .modal.ofk-okno > .modal-form > * + * { margin-top: var(--s-2); }
  :root:not([data-ui="mobile"]) .modal.ofk-okno > .modal-form > .ofk-k { display: flex; flex-direction: column; gap: var(--s-2); }
  :root:not([data-ui="mobile"]) .ofk-k > .ofk-sz { overflow: visible; margin: 0; padding: 0; }
  :root:not([data-ui="mobile"]) .ofk-st { position: sticky; top: calc(var(--s-3) * -1); z-index: 3; display: flex; flex-direction: column; gap: var(--s-2); margin: 0 -3px; padding: var(--s-2) 3px; border-bottom: 1px solid var(--line); background: var(--okno-tlo); box-shadow: 0 6px 8px -8px color-mix(in srgb, var(--zaslona-kolor) 35%, transparent); }
  :root:not([data-ui="mobile"]) .ofk-stl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-2); order: -2; color: var(--text-muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
  :root:not([data-ui="mobile"]) .ofk-stl b { color: var(--text); }
  :root:not([data-ui="mobile"]) .ofk-stl span + span::before { content: "· "; }
  :root:not([data-ui="mobile"]) .ofk-stl em { color: var(--warn-strong); font-style: normal; font-weight: var(--w-strong); }
  :root:not([data-ui="mobile"]) .ofk-k .ofk-fl { display: flex; flex-direction: row; align-items: flex-end; align-self: stretch; gap: var(--s-3); max-height: none; overflow: visible; padding: var(--s-2) var(--s-3); }
  :root:not([data-ui="mobile"]) .ofk-ft, :root:not([data-ui="mobile"]) .ofk-fl > .ofk-gr { display: none; }
  :root:not([data-ui="mobile"]) .ofk-fl .ofk-fk { flex: 1 1 auto; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
  :root:not([data-ui="mobile"]) .ofk-fl .ofk-fk > .ofk-f:first-child { grid-column: auto; }
  :root:not([data-ui="mobile"]) .modal.ofk-okno .ofk-wiecej { display: inline-flex; flex: none; justify-content: center; }
  :root:not([data-ui="mobile"]) .ofk-g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root:not([data-ui="mobile"]) .modal.ofk-okno .ofk-cbt { height: var(--h-control); }
}