`). Ta si veze celý bootstrapí markup — a to včetně věcí, které se v editorovém obsahu nevyskytují, takže je vrstva dosud neuměla. Změřeno 1. 9. 2026 na zákaznické nabídce (`pages/offer-detail.php`, /nabidka/{id}) — jediná zbylá zákaznická stránka na v1 obsahu. Chybělo: · **responzivní sloupce** `col-md-*`, `col-lg-*`, `col-xl-*` — bez nich se dvousloupcové rozvržení (položky | souhrn) na desktopu slilo do jednoho sloupce, protože zabral jen bezpříznakový `col-12`; · **tlačítka** `.btn` — „Tisk", „Do košíku" i „Objednat" se kreslily jako holý text bez podkladu; · **formulářová pole** `.form-control`, `.form-select`, `.form-check-input` — selektory dopravy a platby byly systémové, bez rámečku a výšky. Hodnoty jdou z tokenů v2, ne z Bootstrapu: stránka má vypadat jako zbytek v2, ne jako Bootstrap. Až bude nabídka portovaná, tenhle blok může zmizet — proto je oddělený a ne rozpuštěný ve vrstvě výš. ────────────────────────────────────────────────────────────────────────── */ /* ── Responzivní sloupce ── Stejná mechanika jako u bezpříznakových: `flex-basis` v procentech dvanáctiny. Bootstrap má `flex: 0 0 auto` + `width`; tady stačí basis, protože `.row` z vrstvy výš je `display: flex; flex-wrap: wrap`. */ @media (min-width: 576px) { .gb-content .col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .gb-content .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .gb-content .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .gb-content .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .gb-content .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .gb-content .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .gb-content .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .gb-content .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .gb-content .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .gb-content .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .gb-content .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .gb-content .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .gb-content .col-sm-auto { flex: 0 0 auto; max-width: none; width: auto; } } @media (min-width: 768px) { .gb-content .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .gb-content .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .gb-content .col-md-3 { flex: 0 0 25%; max-width: 25%; } .gb-content .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .gb-content .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .gb-content .col-md-6 { flex: 0 0 50%; max-width: 50%; } .gb-content .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .gb-content .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .gb-content .col-md-9 { flex: 0 0 75%; max-width: 75%; } .gb-content .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .gb-content .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .gb-content .col-md-12 { flex: 0 0 100%; max-width: 100%; } .gb-content .col-md-auto { flex: 0 0 auto; max-width: none; width: auto; } } @media (min-width: 992px) { .gb-content .col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .gb-content .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .gb-content .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .gb-content .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .gb-content .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .gb-content .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .gb-content .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .gb-content .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .gb-content .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .gb-content .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .gb-content .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .gb-content .col-lg-12 { flex: 0 0 100%; max-width: 100%; } .gb-content .col-lg-auto { flex: 0 0 auto; max-width: none; width: auto; } } @media (min-width: 1200px) { .gb-content .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .gb-content .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .gb-content .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .gb-content .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .gb-content .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .gb-content .col-xl-12 { flex: 0 0 100%; max-width: 100%; } } /* ── Doplňkové flex/utility, které v editorovém obsahu nejsou ── */ .gb-content .align-items-end { align-items: flex-end; } .gb-content .align-items-baseline { align-items: baseline; } .gb-content .align-self-center { align-self: center; } .gb-content .align-self-baseline { align-self: baseline; } .gb-content .align-self-end { align-self: flex-end; } .gb-content .justify-content-end { justify-content: flex-end; } .gb-content .justify-content-start { justify-content: flex-start; } .gb-content .flex-grow-1 { flex-grow: 1; } .gb-content .flex-shrink-0 { flex-shrink: 0; } .gb-content .gap-1 { gap: var(--gb-sp-xs); } .gb-content .gap-4 { gap: var(--gb-sp-lg); } .gb-content .text-nowrap { white-space: nowrap; } .gb-content .text-reset { color: inherit; } .gb-content .position-relative { position: relative; } .gb-content .position-sticky { position: sticky; } @media print { .gb-content .d-print-none { display: none !important; } } /* ── Tlačítka ── Vzhled z tokenů v2 (stejná výška a rádius jako `.gb-btn`), ne z Bootstrapu. `.btn` bez varianty je neutrální s rámečkem — v Bootstrapu je průhledné a na naší stránce by splynulo s textem. */ .gb-content .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 var(--gb-sp-lg); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff; color: var(--gb-ink); font-family: inherit; font-size: var(--gb-fs-xs); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; } .gb-content .btn:hover { border-color: var(--gb-navy-mut); } .gb-content .btn-sm { min-height: 34px; padding: 0 var(--gb-sp-md); font-size: var(--gb-fs-xxs); } .gb-content .btn-lg { min-height: 46px; padding: 0 var(--gb-sp-xl); font-size: var(--gb-fs-sm); } .gb-content .btn-primary, .gb-content .btn-success { background: var(--gb-green); border-color: var(--gb-green); color: #fff; } .gb-content .btn-primary:hover, .gb-content .btn-success:hover { background: var(--gb-green-2); border-color: var(--gb-green-2); } .gb-content .btn-outline-success { background: #fff; border-color: var(--gb-green); color: var(--gb-green-2); } .gb-content .btn-outline-success:hover { background: var(--gb-green-tint); } .gb-content .btn-secondary { background: var(--gb-navy); border-color: var(--gb-navy); color: #fff; } .gb-content .btn-secondary:hover { background: var(--gb-navy-2); } .gb-content .btn-outline-secondary { background: #fff; border-color: var(--gb-navy-mut); color: var(--gb-navy); } .gb-content .btn-outline-secondary:hover { background: var(--gb-bg-4); } .gb-content .btn-danger { background: var(--gb-err); border-color: var(--gb-err); color: #fff; } .gb-content .btn-link { border-color: transparent; background: none; color: var(--gb-navy); text-decoration: underline; } .gb-content .btn[disabled], .gb-content .btn.disabled { opacity: .6; cursor: default; } /* ── Formulářová pole ── */ .gb-content .form-control, .gb-content .form-select { width: 100%; min-height: 40px; padding: 0 var(--gb-sp-md); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff; color: var(--gb-ink); font-family: inherit; font-size: var(--gb-fs-input); } .gb-content textarea.form-control { min-height: 90px; padding-block: var(--gb-sp-sm); } .gb-content .form-control:focus, .gb-content .form-select:focus { border-color: var(--gb-info); outline: none; } .gb-content .form-control-sm, .gb-content .form-select-sm { min-height: 34px; font-size: var(--gb-fs-xs); } .gb-content .form-control-lg { min-height: 46px; } .gb-content .form-label { display: block; margin-bottom: 4px; font-size: var(--gb-fs-xs); font-weight: 600; } .gb-content .form-text { display: block; margin-top: 4px; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); } .gb-content .form-check { display: flex; align-items: center; gap: var(--gb-sp-sm); } .gb-content .form-check-input { width: 18px; height: 18px; flex: none; accent-color: var(--gb-green); } .gb-content .form-check-label { cursor: pointer; } .gb-content .input-group { display: flex; } .gb-content .input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; } .gb-content .input-group-text { display: inline-flex; align-items: center; padding: 0 var(--gb-sp-md); border: 1px solid var(--gb-line-4); border-left: 0; border-top-right-radius: var(--gb-r-sm); border-bottom-right-radius: var(--gb-r-sm); background: var(--gb-bg-4); color: var(--gb-ink-2); font-size: var(--gb-fs-xs); } .gb-content .invalid-feedback { display: none; color: var(--gb-err); font-size: var(--gb-fs-xxs); } .gb-content .is-invalid ~ .invalid-feedback, .gb-content .was-validated :invalid ~ .invalid-feedback { display: block; } .gb-content .is-invalid { border-color: var(--gb-err); } /* ── Dlouhé nezalomitelné řetězce v redakčním obsahu ───────────────────── E-mail, URL nebo kód produktu nemá kde zalomit, takže v úzké buňce přeteče ven a překreslí souseda. Změřeno 1. 9. 2026 na `/kontakt/` při 390 px: `veronika.d@golfprovsechny.cz` potřebuje 190 px v kartě široké 170 (`scrollWidth` > `clientWidth`, `overflow: visible`). `anywhere` (ne `break-word`): jen ono zmenšuje i min-content, takže se nesmrskne jen text, ale i buňka, která ho drží. Cílíme na to, co je opravdu jeden token — odkazy, `code`, `kbd` — ne na běžný odstavec, kde by dělení uprostřed slova bylo horší než přetečení, které stejně nenastane. */ .gb-content a, .gb-content code, .gb-content kbd, .gb-content samp { overflow-wrap: anywhere; } /* ── Celoplošné dekorace z v1 nesmí rozjet stránku do šířky ─────────────── Redakční CSS z v1 běžně kreslí dělicí linky jako `::before` s `position: absolute; width: 140%; left: -20%` — mají „vytéct" přes okraj sloupce. Ve v1 to nevadilo, protože `.main-wrap` i `body` měly `position: relative; overflow-x: hidden` a přetok ustřihly. V2 takový obal nemá, takže se pseudoprvek pozicuje vůči initial containing blocku a **prodlouží kořenový scroller**: `/kontakt/` šlo při 390 px posunout o 75 px doprava do prázdna (`#employees::before` = 525 px na `left:-75px`, změřeno 1. 9. 2026; ve v1 na tomtéž obsahu 0). Obojí je nutné: `position` proto, aby byl `.gb-content` v řetězci containing blocků těch absolutních potomků (bez toho `overflow` nemá co stříhat), `overflow-x` pro samotné ustřižení. `clip`, ne `hidden` — `hidden` by z obalu udělal scroll kontejner a přebral roli scrollportu `position: sticky` prvkům uvnitř; `clip` scrollport nevytváří a svislý směr nechává `visible`, takže rozbalovací menu a tooltipy přetékají dál. */ .gb-content { position: relative; overflow-x: clip; } /* ── Akordeon (Bootstrap 5 collapse) ────────────────────────────────────── FAQ na stránce Kontakt sedmi trhů EU je v DB jako akordeon Bootstrapu (IS_SET_TEXTS, REG_ID 5 a 7–12; v celé tabulce 7 textů s `data-bs-toggle`, změřeno 16. 10. 2026). Bez Bootstrapu bylo všech 13 odpovědí rozbalených (přes 6 000 px). Otevírá a zavírá gb.js („Akordeon v obsahu z DB"). */ .gb-content .accordion { margin-bottom: var(--gb-sp-lg); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-md); overflow: hidden; background: #fff; } .gb-content .accordion-item + .accordion-item { border-top: 1px solid var(--gb-line-4); } .gb-content .accordion-header { margin: 0; font-size: inherit; line-height: inherit; } .gb-content .accordion-button { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-sm); width: 100%; min-height: 48px; padding: 12px var(--gb-sp-md); border: 0; background: none; color: var(--gb-navy); font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .gb-content .accordion-button::after { content: ''; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .gb-content .accordion-button:not(.collapsed)::after { margin-top: 4px; transform: rotate(-135deg); } .gb-content .accordion-button:hover { background: var(--gb-navy-tint); } .gb-content .accordion-button:focus-visible { outline: 2px solid var(--gb-navy); outline-offset: -2px; } .gb-content .accordion-body { padding: 0 var(--gb-sp-md) var(--gb-sp-md); } .gb-content .collapse:not(.show) { display: none; }