/* ============================================================================
   sidesign — vizuální styl přenesený z eshopu
   ----------------------------------------------------------------------------
   Zdroj hodnot: brand/ANALYZA.md (sesbíráno 2026-08-24 přímo z běžícího eshopu
   sidesign.cz, šablona charme). Co tam není doložené, je označené jako návrh.

   Dvě pravidla, která drží celý vzhled a nesmí se porušit:
     1. Velké nadpisy jdou v **Light**, ne v Bold. Kontrast se dělá velikostí,
        ne tučností.
     2. Paleta je **monochromatická**. Barvu nesou fotografie, ne rozhraní.

   ⛔ Pestré barvy z eshopového all.css (#428bca, #d9534f, #f0ad4e, #5cb85c)
      jsou výchozí Bootstrap 3, ne značka. Do aplikace nepatří.
   ========================================================================== */

/* --- písmo -----------------------------------------------------------------
   Lato se hostuje z aplikace, ne z Google Fonts — stejně jako to dělá eshop.
   Licence SIL Open Font License, přenos je bez licenčního problému. */

@font-face {
    font-family: "Lato";
    src: url("/fonts/Lato-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/fonts/Lato-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/fonts/Lato-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/fonts/Lato-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --- Zákaznický web (font-varianta): self-hostované woff2 (jako Lato výš) ---
   Playfair Display (nadpisy + zlatý kurz akcent) + Plus Jakarta Sans (text).
   Variabilní fonty: JEDEN soubor na subset pokrývá celý rozsah vah
   (`font-weight: min max`). Subsety latin + latin-ext (čeština). Staženo z Google
   Fonts (SIL OFL) 13.9.2026 → self-host ruší FOUT/skok nadpisu z online načítání
   (⛝ Google Fonts `<link>` zrušen); kritické hero faces se preloadují v hlavičce
   (zaklad.twig / nahled-ram.twig). Rozšíří-li se použité váhy, soubor stačí týž. */
@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/PlayfairDisplay-latin.woff2") format("woff2");
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/PlayfairDisplay-latinext.woff2") format("woff2");
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/PlayfairDisplay-italic-latin.woff2") format("woff2");
    font-weight: 500 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/PlayfairDisplay-italic-latinext.woff2") format("woff2");
    font-weight: 500 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/fonts/PlusJakartaSans-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/fonts/PlusJakartaSans-latinext.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- proměnné --------------------------------------------------------------
   Role barev podle brand/ANALYZA.md. Stavové barvy jsou zvlášť dole — ty
   z eshopu odvozené nejsou. */

:root {
    --pismo: "Lato", -apple-system, "Segoe UI", Arial, sans-serif;

    --text: #222222;            /* základní barva písma */
    --text-tvrdy: #000000;      /* velké sekční nadpisy */
    --plocha: #ffffff;          /* dominantní plocha */
    --linka: #e9e9e9;           /* oddělovače */
    --ramecek: #eaeaea;         /* rámečky */
    --popisek: #989898;         /* sekundární text */
    --popisek-2: #939393;       /* sekundární text, druhý odstín */
    --neaktivni: #c3c3c3;       /* neaktivní prvky */
    --neaktivni-2: #c4c4c4;
}

/* --- základ ---------------------------------------------------------------- */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--plocha);
    color: var(--text);
    font-family: var(--pismo);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
}

/* --- typografie ------------------------------------------------------------
   Velikosti jsou doložené z eshopu, ne odhadnuté. Nadpisy jsou centrované
   a velké jdou v Light. */

h1,
h2 {
    font-weight: 300;
    font-size: 56px;
    line-height: 60px;
    color: var(--text-tvrdy);
    text-align: center;
    margin: 0 0 24px;
}

.nadpis-sekce {
    font-weight: 300;
    font-size: 36px;
    line-height: 1.3;
    color: var(--text-tvrdy);
    text-align: center;
    margin: 0 0 24px;
}

h3 {
    font-weight: 400;
    font-size: 26px;
    line-height: 30px;
    margin: 0 0 16px;
}

p {
    margin: 0 0 16px;
}

.drobne {
    font-size: 13px;
    font-weight: 300;
    color: var(--popisek);
}

.cena {
    font-size: 18px;
    font-weight: 700;
}

a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--popisek);
}

/* --- rozvržení ------------------------------------------------------------- */

.hlavicka {
    border-bottom: 1px solid var(--linka);
    padding: 24px;
    text-align: center;
}

/* Logo je vektor (SVG), takže je ostré v každé velikosti. Rozměr 128×61
   odpovídá skutečnému poměru kresby 2.0839 — stará PNG z eshopu měla 128×64
   jen proto, že kolem kresby zbýval 1px okraj. */
.hlavicka img {
    display: block;
    margin: 0 auto;
    width: 128px;
    height: 61px;
}

.obsah {
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 24px 80px;
}

.pata {
    border-top: 1px solid var(--linka);
    padding: 24px;
    text-align: center;
    font-size: 13px;
    font-weight: 300;
    color: var(--popisek);
}

.sekce {
    margin: 0 0 72px;
}

.sekce + .sekce {
    padding-top: 8px;
}

/* Popisek pod nadpisem sekce. Vzniklo z toho, že se `text-align:center;
   margin-bottom:32px` opakovalo u čtyř nadpisů — což není čtyři výjimky,
   ale chybějící pravidlo. (Zatím tu není ucelená škála odstupů jako
   u turnajů; udělá se, až bude víc stránek než jedna.) */
.podnadpis-sekce {
    text-align: center;
    font-size: 13px;
    font-weight: 300;
    color: var(--popisek);
    margin: 0 0 32px;
}

/* --- prvky ----------------------------------------------------------------- */

/* CTA systém (revize 15. 9.): primár = zlatá --cta + bílý text, 1 výška 44px,
   verzálky + radius 4px (volba usera), jasná hierarchie + focus-visible.
   Značková --zlata zůstává akcent/linka. Plná šířka JEN přes .blok (úzké kontejnery). */
.tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 24px;
    min-width: 120px;
    max-width: 100%;
    font-family: var(--pismo);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.15;
    text-align: center;
    color: #fff;
    background: var(--cta);
    border: 1px solid var(--cta);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.tlacitko:hover {
    color: #fff;
    background: var(--cta-hover);
    border-color: var(--cta-hover);
}

.tlacitko:active {
    background: var(--cta-active);
    border-color: var(--cta-active);
}

.tlacitko:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cta);
}

/* sekundární = ink outline (třída .druhotne) */
.tlacitko.druhotne {
    color: var(--text);
    background: transparent;
    border-color: var(--text);
}

.tlacitko.druhotne:hover {
    color: #fff;
    background: var(--text);
    border-color: var(--text);
}

.tlacitko.druhotne:active {
    background: var(--text-tvrdy);
    border-color: var(--text-tvrdy);
}

.tlacitko.druhotne:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text);
}

/* malá varianta — řádky, filtry (36px) */
.tlacitko.maly {
    min-height: 36px;
    padding: 0 16px;
    min-width: 0;
    font-size: 13px;
}

/* plná šířka — JEN úzké kontejnery (mobil, úzká karta); ⛝ default „pruh" */
.tlacitko.blok {
    display: flex;
    width: 100%;
}

.tlacitko[disabled],
.tlacitko.neaktivni {
    color: #fff;
    background: var(--neaktivni);
    border-color: var(--neaktivni);
    cursor: default;
    box-shadow: none;
}

.pole {
    font-family: var(--pismo);
    font-size: 14px;
    color: var(--text);
    background: var(--plocha);
    border: 1px solid var(--ramecek);
    padding: 11px 14px;
    width: 100%;
    max-width: 280px;
}

.pole:focus {
    outline: none;
    border-color: var(--text);
}

.pole::placeholder {
    color: var(--neaktivni);
}

.popisek-pole {
    display: block;
    font-size: 13px;
    color: var(--popisek);
    margin: 0 0 6px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

thead th {
    font-weight: 400;
    font-size: 13px;
    color: var(--popisek);
    text-align: left;
    border-bottom: 1px solid var(--linka);
    padding: 10px 0;
}

tbody td {
    border-bottom: 1px solid var(--ramecek);
    padding: 14px 0;
    vertical-align: middle;
}

.vpravo {
    text-align: right;
}

/* --- vzorník barev (jen pro typostránku) ----------------------------------- */

.vzorky {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vzorek {
    width: 150px;
}

.vzorek .plocha-vzorku {
    height: 72px;
    border: 1px solid var(--ramecek);
}

.vzorek code {
    display: block;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    margin-top: 8px;
}

.vzorek span {
    display: block;
    font-size: 13px;
    color: var(--popisek);
}

.radek-ukazky {
    display: flex;
    align-items: baseline;
    gap: 20px;
    border-bottom: 1px solid var(--ramecek);
    padding: 18px 0;
}

.radek-ukazky .znaceni {
    flex: 0 0 190px;
    font-size: 13px;
    color: var(--popisek);
}

/* Ukázka, která se vedle popisku nevejde (tabulka) — popisek jde nad ni. */
.radek-ukazky.pod-sebou {
    display: block;
}

.radek-ukazky.pod-sebou .znaceni {
    margin-bottom: 12px;
}

/* ============================================================================
   NÁVRH — stavové barvy
   ----------------------------------------------------------------------------
   ⚠️ Tohle jediné **není odvozené z eshopu**. Eshop žádnou akcentní barvu nemá
   (ověřeno rozborem šablonového CSS), takže úspěch / chybu / varování nemáme
   odkud vzít a museli jsme je navrhnout.

   Záměr: tlumené, odbarvené tóny, které vedle monochromatického rozhraní
   nekřičí. Používají se **jen na stavové hlášky** — ne na navigaci, ne na
   tlačítka, ne na odkazy. Jinak by se z nich stala druhá paleta a značka by
   přestala být monochromatická.

   Čeká na odsouhlasení zadavatelem.
   ========================================================================== */

:root {
    --stav-uspech: #4a7c59;
    --stav-uspech-plocha: #f2f6f3;
    --stav-chyba: #a4453a;
    --stav-chyba-plocha: #faf3f2;
    --stav-varovani: #8a6d3b;
    --stav-varovani-plocha: #faf7f0;
}

.hlaska {
    font-size: 14px;
    padding: 14px 18px;
    border-left: 3px solid var(--neaktivni);
    background: var(--plocha);
    margin: 0 0 12px;
}

.hlaska.uspech {
    border-left-color: var(--stav-uspech);
    background: var(--stav-uspech-plocha);
    color: var(--stav-uspech);
}

.hlaska.chyba {
    border-left-color: var(--stav-chyba);
    background: var(--stav-chyba-plocha);
    color: var(--stav-chyba);
}

.hlaska.varovani {
    border-left-color: var(--stav-varovani);
    background: var(--stav-varovani-plocha);
    color: var(--stav-varovani);
}

.navrh {
    border: 1px dashed var(--neaktivni);
    padding: 28px 28px 8px;
}

/* Nadpis uvnitř návrhového bloku se nezarovnává na střed — blok je ohraničený
   a centrovaný nadpis v něm vypadá jako další sekce stránky, ne jako jeho část. */
.navrh .nadpis-sekce {
    text-align: left;
}

.navrh .vzorky {
    margin-top: 28px;
}

.navrh .drobne {
    margin-top: 24px;
}

.navrh-stitek {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--popisek);
    border: 1px solid var(--neaktivni);
    padding: 4px 10px;
    margin: 0 0 20px;
}

@media (max-width: 640px) {
    h1,
    h2 {
        font-size: 40px;
        line-height: 44px;
    }

    .nadpis-sekce {
        font-size: 28px;
    }

    .radek-ukazky {
        display: block;
    }

    .radek-ukazky .znaceni {
        margin-bottom: 8px;
    }
}

/* ============================================================================
   ADMINISTRACE
   ----------------------------------------------------------------------------
   Stejný vizuální jazyk jako veřejná část — Lato, monochromatická paleta,
   nadpisy v Light. Značka je jedna, i když jsou stránky dvoje.

   Co se tu liší: administrace má navigaci a je hustší. Veřejná stránka má
   dýchat, pracovní obrazovka má na jednu obrazovku vejít.
   ========================================================================== */

/* Hlavička veřejného webu — logo a čára, nic víc.
   Uživatel 28. 8. 2026: *„převezmi logo tak, jak ho máme v hlavičce
   administrace a bez menu, jen s čárou pod logem."* Menší svislé odsazení
   než u administrace: je to jen značka, ne pruh s nabídkou. */
.hlavicka-web {
    display: flex;
    align-items: center;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
}
/* Logo veřejné (legal/404) hlavičky sjednoceno s eshop hlavičkou: sloupec 1200/24
   (lícuje s .verejna .obsah i .hlavicka-obchod) + logo 128×61 (user 16. 9.). Scoped
   na .hlavicka-web → globální .znacka-admin (admin hlavička) zůstává 96×46 beze změny. */
.hlavicka-web .znacka-admin img { width: 128px; height: 61px; }

.hlavicka-admin {
    display: flex;
    align-items: center;
    gap: var(--mezera-hlavicky);
    text-align: left;
    padding: 16px var(--odsazeni-hlavicky);
}

.znacka-admin img {
    display: block;
    width: var(--sirka-loga);
    height: 46px;
}

.nav-admin {
    display: flex;
    gap: 24px;
    flex: 1;
}

.nav-admin a {
    font-size: 14px;
    text-decoration: none;
    color: var(--popisek);
    padding-bottom: 2px;
}

.nav-admin a:hover {
    color: var(--text);
}

.nav-admin a.tady {
    color: var(--text);
    border-bottom: 1px solid var(--text);
}

.ucet-admin {
    display: flex;
    align-items: center;
    gap: 16px;
}

.obsah-admin {
    max-width: 980px;
    /* Zkráceno 27. 8. 2026 z 40 px: nad obsahem je teď podnavigace, takže
       ten prostor dělá mezeru dvakrát. „Ať trochu šetříme místem." */
    padding-top: 20px;
}

/* Tlačítko, které vypadá jako odkaz — akce v tabulce nemají křičet.
   Musí to být `button` uvnitř `form`, protože každá mění stav a nese token;
   odkaz by šel vyvolat i cizí stránkou. */
.odkaz-tlacitko {
    font-family: var(--pismo);
    font-size: 13px;
    color: var(--text);
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.odkaz-tlacitko:hover {
    color: var(--popisek);
}

.vedle {
    display: inline;
}

.pruh-nadpisu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.pruh-nadpisu h3 {
    margin: 0;
}

.akce {
    white-space: nowrap;
}

.akce form + form::before {
    content: " · ";
    color: var(--neaktivni);
}

tr.vypnuty td {
    color: var(--neaktivni);
}

tr.vypnuty a {
    color: var(--neaktivni);
}

/* Stav publikování jako rozbalovací štítek ve výpisu stránek: vypadá jako
   barevná pilulka (koncept/publikováno) + nenápadný chevron, ne jako select box. */
.stav-form {
    margin: 0;
    display: inline-block;
}

.stav-badge {
    position: relative;
    display: inline-block;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.4;
}

.stav-badge.zver {
    background: var(--stav-uspech-plocha);
    border: 1px solid #cfe0d3;
}

.stav-badge.rozep {
    background: #f3f3f3;
    border: 1px solid var(--ramecek);
}

.stav-badge::after {
    content: "▾";
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    pointer-events: none;
}

.stav-badge.zver::after {
    color: var(--stav-uspech);
}

.stav-badge.rozep::after {
    color: var(--popisek);
}

.stav-badge select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 3px 24px 3px 11px;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.4;
    border-radius: 12px;
    cursor: pointer;
}

.stav-badge.zver select {
    color: var(--stav-uspech);
}

.stav-badge.rozep select {
    color: var(--popisek);
}

.prazdno {
    border: 1px dashed var(--neaktivni);
    padding: 32px;
    text-align: center;
}

.prazdno p {
    margin: 0 0 8px;
}

.prazdno code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
}

.seznam-utilit {
    list-style: none;
    margin: 0;
    padding: 0;
}

.seznam-utilit li {
    border-bottom: 1px solid var(--ramecek);
    padding: 16px 0;
}

.seznam-utilit .drobne {
    display: block;
}

/* Jednorázový odkaz na heslo. Je to vstupenka k cizímu účtu, takže se ukazuje
   jednou a má vypadat jako něco, co se má hned někam odnést. */
.odkaz-jednorazovy {
    border: 1px solid var(--text);
    padding: 20px;
    margin-bottom: 28px;
}

.odkaz-jednorazovy p {
    margin: 0 0 8px;
}

/* --- vstupní stránky (přihlášení, heslo) ---------------------------------- */

.vstup {
    max-width: 380px;
    margin: 0 auto;
    padding: 80px 24px;
    text-align: center;
}

.vstup-logo {
    display: block;
    margin: 0 auto 40px;
}

.vstup-karta {
    border: 1px solid var(--linka);
    padding: 32px;
    text-align: left;
}

.vstup-karta h3 {
    margin-top: 0;
    text-align: center;
}

.vstup-karta form {
    margin: 0;
}

/* --- odstupy --------------------------------------------------------------
   Malá uzavřená škála. Když se hodnota nehodí, není to důvod napsat si
   vlastní — je to buď vlastnost komponenty, nebo znamení, že se prvek
   odsazuje jinak než všechno kolem. */

.odsad {
    margin-top: 20px;
}

.pole-siroke {
    max-width: 420px;
}

/* Střední šířka — mezi base `.pole` (280) a `.pole-siroke` (420). Pro `<select>`
   vlastností (CMS „Stav"/„Vzhled na webu", role uživatele): širší než 280 kvůli
   delším volbám („plná hlavička (eshop)"), ⛝ přes celou šířku jako textové pole. */
.pole-stredni {
    max-width: 340px;
}

.pole-plne {
    max-width: 100%;
}

select.pole {
    /* Bez tohohle si prohlížeč sáhne pro vlastní písmo a pole vedle
       ostatních vyčnívá. */
    font-family: var(--pismo);
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--popisek) 50%),
                      linear-gradient(135deg, var(--popisek) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

@media (max-width: 640px) {
    .hlavicka-admin {
        flex-wrap: wrap;
        gap: 16px;
    }

    .nav-admin {
        order: 3;
        flex-basis: 100%;
    }

    .pruh-nadpisu {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- podnavigace uvnitř utility CMS ----------------------------------------
   Utilita je v katalogu jedna položka se dvěma částmi (stránky, galerie).
   Vizuálně je to **druhá úroveň, ne druhá navigace** — proto menší písmo než
   `.nav-admin` a odsazení od horní lišty, ať je vidět, že je to uvnitř. */

/* ⛔ **Podnavigace sedí pod čárou hlavičky a zarovnaná s menu v ní.**

   Uživatel 27. 8. 2026: *„umístil bych to pod čáru definující hlavičku
   a zarovnal to s menu, které je v hlavičce. Pod sebou to podle mě nemusí
   mít další čáru. Ať trochu šetříme místem — toto má být praktická stránka."*

   Vlastní čára zmizela: jedna čára odděluje hlavičku, druhá by z toho udělala
   pruh, který zabere místo a nic nepřidá.

   Odsazení se **počítá z týchž proměnných, ze kterých je složená hlavička**,
   ne opisuje. Napoprvé jsem ho opsal z atributu `width` v HTML (128 px), jenže
   CSS logo zmenšuje na 96 — vyšlo 184 místo 152 a test to chytil. Teď z toho
   nejde udělat překlep: změní-li se logo nebo mezera, posune se obojí naráz. */
:root {
    --odsazeni-hlavicky: 24px;
    --sirka-loga: 96px;
    --mezera-hlavicky: 32px;
    --odsazeni-menu: calc(var(--odsazeni-hlavicky) + var(--sirka-loga) + var(--mezera-hlavicky));
}

.cms-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 7px var(--odsazeni-hlavicky) 7px var(--odsazeni-menu);
    /* Vzduch mezi podnavigací a obsahem (user 14.9.: detail objednávky lepil na menu). */
    margin-bottom: 18px;
}

/* Na úzké obrazovce se hlavička zalomí a zarovnávat není k čemu; položky submenu
   (teď ~10) se zabalí do víc řádků místo vodorovného přetékání (⛝ scroll body). */
@media (max-width: 720px) {
    .cms-nav { padding-left: var(--odsazeni-hlavicky); gap: 8px 14px; }
}

.cms-nav a {
    font-size: 13px;
    text-decoration: none;
    color: var(--popisek);
    padding-bottom: 2px;
}

.cms-nav a:hover {
    color: var(--text);
}

.cms-nav a.tady {
    color: var(--text);
    border-bottom: 2px solid var(--text);
}

/* ============================================================================
   SKLÁDANÁ STRÁNKA (CMS)
   ----------------------------------------------------------------------------
   Tahle část je sdílená mezi náhledem v administraci a budoucím frontendem —
   stejně jako šablona `_casti/stranka.twig`. Kdyby měl web vlastní mřížku,
   náhled by ukazoval něco jiného, než co vyjde ven.
   ========================================================================== */

.s-sekce {
    margin: 0 0 40px;
}

/* Mřížka sekce. **Zalamuje prohlížeč, ne PHP:** HTML se pošle jednou, ale
   zalomení se má lišit podle šířky okna. CSS Grid to umí sám — jakmile součet
   `span` přeteče přes dvanáct, položka jde na další řádek.

   `--d` je globální šířka buňky, `--d-xs` … `--d-xl` jsou přepisy. Zápis
   `var(--d-m, var(--d))` znamená „přepis pro M, jinak globál" — **ne hodnota
   ze sousedního breakpointu**. Tohle záměrně není kaskáda jako v Bootstrapu;
   model si zvolil uživatel a je popsaný v `Mrizka`. */
.s-mrizka {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.s-bunka {
    grid-column: span var(--d-xs, var(--d, 12));
    min-width: 0;   /* jinak dlouhé slovo roztáhne sloupec přes mřížku */
}

@media (min-width: 576px)  { .s-bunka { grid-column: span var(--d-s,  var(--d, 12)); } }
@media (min-width: 768px)  { .s-bunka { grid-column: span var(--d-m,  var(--d, 12)); } }
@media (min-width: 992px)  { .s-bunka { grid-column: span var(--d-l,  var(--d, 12)); } }
@media (min-width: 1280px) { .s-bunka { grid-column: span var(--d-xl, var(--d, 12)); } }

.s-komponenta + .s-komponenta {
    margin-top: 20px;
}

.s-prazdno {
    color: var(--neaktivni);
    font-size: 14px;
    font-style: italic;
    margin: 0;
}

/* --- náhled v rámu --------------------------------------------------------
   Rám má **skutečnou šířku** breakpointu, aby se media queries vyhodnotily
   doopravdy. Simulovat zalomení v administraci by znamenalo, že náhled
   ukazuje něco jiného než web. */



/* Veřejná stránka má širší plochu než administrace. 860 px je šířka pro
   čtení souvislého textu; stránka skládaná z buněk a galerií je něco jiného
   a na notebooku by se v úzkém sloupci ztratila — u XL by pak nebyl vidět
   rozdíl proti L. Až vznikne frontend, tohle je první číslo k probrání. */
.verejna .obsah {
    max-width: 1200px;
}

/* Plátno **vystupuje ze sloupce administrace**.

   Sloupec je široký 980 px, protože se v něm čte text. Rám se ale musí vejít
   ve **skutečné šířce breakpointu** — a XL je 1440 px. Kdyby plátno zůstalo
   ve sloupci, nevešel by se nikdy a L i XL by natrvalo spadly do režimu
   prohlídky, i na velké obrazovce. Tedy: na notebooku by nešlo upravovat
   rozvržení pro notebook.

   Šířka okna zůstává jediná mez, která rozhoduje — a to je správně, protože
   je to skutečná mez. */
.nahled-obal {
    border: 1px solid var(--linka);
    background: #fafafa;
    padding: 24px;
    margin-top: 12px;
    margin-left: calc(50% - 50vw + 24px);
    margin-right: calc(50% - 50vw + 24px);
    overflow-x: auto;
}

/* ⛔ **Na telefonu plátno nesmí nic ukrajovat.** Rám na XS je široký 390 px —
   přesně tolik, kolik má displej. Když si obal vezme 24 px odsazení na každé
   straně a ještě okraj, zbude 294 a rám se „nevejde": přepne se do prohlídky,
   zmenší se a **zhasne ovládání**. Na telefonu by pak nešlo upravovat vůbec nic,
   což je opak toho, proč dotykové ovládání vzniklo.

   Chytil to test v emulaci (26. 8. 2026), ne úvaha — a je dobře, že dřív, než
   se na to podíval uživatel na skutečném telefonu. */
@media (max-width: 640px) {
    .nahled-obal {
        padding: 0;
        border: 0;
        background: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

/* ⛔ **Žádný `max-width`.** Byl tu od začátku a tiše rušil to jediné, kvůli čemu
   rám existuje: na okně užším než 1440 px se rám zúžil na šířku obalu, takže se
   media queries uvnitř vyhodnotily na 802 px, zatímco obrazovka tvrdila „XL,
   1440 px". **Náhled na L a XL tedy lhal** — a nešlo to poznat, protože vypadal
   správně.

   Zjištěno 25. 8. 2026 měřením, ne okem: transformace hlásila poměr 0,557,
   ale vykreslený rám měl 443 px místo 802. Hlídá to teď test „rám má skutečnou
   šířku breakpointu".

   Nevejde-li se rám, řeší to zmenšení v `js/pagebuilder.js` (šířku rozvržení
   nemění) a bez JavaScriptu posouvání do stran v obalu. */
.nahled-ram {
    display: block;
    margin: 0 auto;
    height: 640px;
    /* ⛔ **`border: 0` se musí napsat.** `<iframe>` má od prohlížeče výchozí
       `border: 2px inset` a s `box-sizing: border-box` se odečte **zevnitř**:
       při šířce 390 px se uvnitř rámu počítalo s 386. Vlastní rámeček to
       nespravil, jen ta čísla změnil (1px → 388).

       Rámeček se proto kreslí `outline`em, který leží vně a do rozvržení
       nezasahuje. Chyceno měřením, ne okem — vizuálně to vypadalo správně
       ve všech případech. */
    border: 0;
    outline: 1px solid var(--ramecek);
    background: var(--plocha);
}

/* V režimu úprav je rám pracovní plocha, ne náhled — potřebuje víc výšky.
   Dorovnání na výšku obsahu (aby se posouvala celá administrace a rám neměl
   vlastní posuvník) přijde v druhém celku; potřebuje JavaScript a je to
   vylepšení, ne základ. */
.nahled-ram-upravy {
    height: 78vh;
    min-height: 520px;
}

/* --- šířky po breakpointech v obrazovce skládání --------------------------
   Ukazuje se **výsledná** šířka na každém breakpointu, ne jen to, co je
   vyplněné — globální hodnota totiž platí i na telefonu a je snadné na to
   zapomenout. */

.bp-radek {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.bp-pole {
    border: 1px solid var(--ramecek);
    padding: 8px 10px;
    font-size: 12px;
    min-width: 132px;
}

/* Přepis musí být poznat od zděděné hodnoty na první pohled. */
.bp-prepsano {
    border-color: var(--text);
    border-left-width: 3px;
}

.bp-uzke {
    border-color: var(--stav-varovani);
    background: var(--stav-varovani-plocha);
}

.bp-nazev {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
}

.bp-popis {
    display: block;
    font-weight: 400;
    color: var(--popisek);
}

.bp-vyber {
    font-family: var(--pismo);
    font-size: 12px;
    width: 100%;
    border: 1px solid var(--ramecek);
    padding: 4px;
    background: var(--plocha);
    color: var(--text);
}

.bp-vysledek {
    display: block;
    margin-top: 4px;
}

.bp-px {
    color: var(--popisek);
}

.bp-potvrd {
    font-size: 12px;
    margin-top: 4px;
}

.bp-varovani {
    font-size: 13px;
    margin-bottom: 12px;
}

.nahled-ramec {
    border: 1px solid var(--linka);
    padding: 32px;
    margin-top: 24px;
}

/* --- obrazovka skládání ---------------------------------------------------- */

/* ============================================================================
   PAGEBUILDER — ovládání nad vykresleným obsahem
   ----------------------------------------------------------------------------
   Nahradilo schematickou obrazovku, která ukazovala popisky prvků místo
   stránky. Podle ní se nedalo posoudit, jak stránka dopadne — a přesně to
   uživatel označil za kostrbaté.

   **Skládá se vždycky po jedné úrovni.** Rámečky sekcí, buněk a komponent se
   nikdy nekreslí naráz: tři rámečky kolem téhož místa se nedají rozeznat a tři
   proužky ikon by se praly o týž roh. Které se ukážou, řídí `?uroven=` a šablona
   `_casti/stranka.twig`.

   Barvy jsou dané zadáním a nediskutují se: sekce zelená, buňka modrá,
   komponenta žlutá.
   ========================================================================== */

:root {
    --pb-sekce: #4a7c59;
    --pb-bunka: #2f6f9f;
    --pb-komponenta: #8a6d3b;
}

/* --- lišty nad plátnem ----------------------------------------------------- */

/* Pruh nad plátnem — jeden, ne tři.
   ------------------------------------------------------------------------
   ⛔ **Plátno je pán, ovládání sluha.** Změřeno 26. 8. 2026: rám se stránkou
   začínal na 928 px (telefon s obrazovkou 700) a na monitoru 1440×900 byla
   režie 57 % první obrazovky. Nad rámem stály hlavička, jméno stránky,
   vysvětlující odstavec a tři řady přepínačů.

   Teď je to jeden tmavý pruh: jméno, úroveň, šířka, čistý pohled, zbytek
   pod „⋯". Vysvětlení se přesunulo pod rám. */
/* ⛔ **Pruh je široký jako plátno, ne jako šedé pole.**

   Uživatel 28. 8. 2026 nad první podobou: *„ten tmavý pruh je takhle ošklivý.
   Buď ho udělej až do stran a až nahoru v daném prostoru, nebo mu udělej
   zaoblené rohy, jako jsi je měl v návrhu a udělej to na šířku toho
   pagebuilderu."*

   **Byl mezi tím** — na šířku šedého pole, ale s 24px mezerou okolo, takže
   ani nebyl jeho hranou, ani samostatným prvkem. Ošklivé bylo právě to
   nedorozhodnuté.

   Zvolena druhá cesta: **pruh je tak široký jako plátno, které ovládá.**
   Svislice sedí a je z ní vidět, co k čemu patří; kdyby byl širší, ta vazba
   se ztratí. Zaoblení je totéž jako v maketě, na kterou se uživatel odvolal.

   ⚠️ Zmenšování rámu tím nezačne vadit: `transform` se týká **rámu**,
   ne tohohle obalu. */
.pb-platno {
    /* `max-width` schválně **není**: rám má skutečnou šířku breakpointu
       a to je celý smysl náhledu. Zúžení by z něj udělalo lež. */
    margin: 0 auto;
}

/* ⛔ (starší rozbor, platí dál) **Šedý kontejner je jeden jediný.**

   Uživatel 27. 8. 2026: *„přesunul bych ho níž nad pagebuilder ale do rámu,
   ve kterém je pagebuilder, roztáhl ho na celou šířku daného divu"* a den nato
   upřesnil: *„celé to tmavé menu jsem si myslel, že bude posunuté tak jak je
   ještě o úroveň výš — do toho šedého divu."*

   Šedý kontejner je **jeden jediný** a jmenuje se `.nahled-obal` (`#fafafa`,
   celoplošný pruh kolem plátna) — ověřeno projitím řetězu předků od rámu,
   ostatní jsou bílé nebo průhledné. Pruh je tedy jeho přímé dítě a je široký
   jako on (1184 px proti 820 px, kdyby seděl na plátně).

   ⭐ **A tím zmizel spor se zmenšováním.** `pagebuilder.js` zmenšuje
   `transform`em **rám**, ne šedé pole — pruh je nad tou transformací, takže
   zůstane čitelný a nemusí se dopočítávat. Plánovaná práce odpadla. */

.pb-hlava {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--text-tvrdy);
    color: #fff;
    padding: 8px 12px;
    /* Zaoblení z makety, na kterou se uživatel odvolal. */
    border-radius: 5px;
    /* Pod sebou drží pruh od plátna odstup, jinak by na něm ležel. */
    margin: 0 0 10px;
}

.pb-hlava-nazev {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-right: auto;
    min-width: 0;
}

.pb-hlava-nazev strong {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Popisky uvnitř tmavého pruhu musí být čitelné — `--popisek` je na bílou. */
.pb-hlava .drobne { color: rgba(255, 255, 255, .62); }

/* Tužka vlevo v tmavém pruhu — nastavení stránky. Stejná plocha jako ostatní
   tlačítka pruhu, jen bez rámečku: je to první věc zleva a rámeček by z ní
   udělal ovládací prvek mezi jménem a logem. */
.pb-hlava-tuzka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    flex: 0 0 auto;
}

.pb-hlava-tuzka:hover,
.pb-hlava-tuzka:focus-visible { background: rgba(255, 255, 255, .18); }

/* ⛔ **`hidden` musí schovávat i to, co má vlastní `display`.**

   Prohlížeč dává `[hidden]` jen `display: none` ze své výchozí sady, a tu
   přebije každé autorské pravidlo s `display`. Tlačítko „Přepnout" (záložní
   cesta k přepnutí šířky bez JavaScriptu) má `display: inline-flex`, takže
   `potvrd.hidden = true` v `pagebuilder.js` neudělalo nic a tlačítko bylo
   vidět i tam, kde skript běží. Našlo se to 27. 8. 2026 na snímku pruhu,
   ne v kódu — v kódu to vypadá správně.

   Pravidlo je schválně globální: totéž by potkalo každý další prvek, který
   se schovává atributem a má vlastní `display`. */
/* ⛔ **Přechod mezi stránkami místo bílého bliknutí.**

   Uživatel 27. 8. 2026: *„jde nějak udělat, aby po každé akci neproblikával
   obsah? Vždy po užití akce zmizí vše a pak se objeví."*

   Měl pravdu a bylo to víc, než jsem čekal. Naměřeno, co se při které akci
   překresluje: **přepnutí úrovně, přepnutí breakpointu, ＋ i šipky jsou plná
   navigace** — tedy dva dokumenty za sebou a mezi nimi okamžik prázdna.
   Jen otevření okna nepřekresluje nic a uložení v okně jen rám.

   Plnou navigaci **nechceme zrušit**: na ní stojí chod bez JavaScriptu, což
   je u pagebuilderu základ, ne ústupek. Tohle pravidlo ji nechává být a jen
   říká prohlížeči, ať mezi oběma dokumenty prolne. Je to **čisté CSS**,
   nepotřebuje ani řádek skriptu, a kde to prohlížeč neumí, zůstane dnešní
   chování — tedy přesně to, co je dnes.

   Nepřidávají se vlastní animace: cílem je, aby nebylo vidět nic, ne aby
   se něco dělo. */
@view-transition { navigation: auto; }

/* Kdo si nepřeje pohyb, nemá ho dostat ani tady. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

[hidden] { display: none !important; }

.pb-hlava-tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3);
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    padding: 7px 10px;
    text-decoration: none;
    cursor: pointer;
}

.pb-hlava-tlacitko:hover,
.pb-hlava-tlacitko:focus-visible { border-color: #fff; }
.pb-hlava-tlacitko.tady { background: #fff; color: var(--text-tvrdy); }

.pb-sirka {
    display: flex;
    gap: 6px;
    align-items: center;
}

.pb-sirka select {
    font-family: inherit;
    font-size: 13px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: transparent;
    color: #fff;
}

/* Nabídka se vykresluje systémem, ne stránkou — na tmavém pozadí by měly
   položky bílý text na bílém. */
.pb-sirka option { color: var(--text); background: #fff; }

/* Zbytek pod „⋯" — `<details>` funguje bez JavaScriptu i z klávesnice. */
.pb-hlava-vic { position: relative; }
.pb-hlava-vic > summary { list-style: none; }
.pb-hlava-vic > summary::-webkit-details-marker { display: none; }

.pb-hlava-vic-obsah {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 5;
    min-width: 200px;
    background: var(--plocha);
    border: 1px solid var(--ramecek);
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.pb-hlava-vic-obsah a {
    padding: 9px 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
}

.pb-hlava-vic-obsah a:hover { background: var(--linka); }

.pb-hlava-vic-cara {
    border: 0;
    border-top: 1px solid var(--linka);
    margin: 4px 0;
}

.pb-prepinac {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* ⛔ **Na telefonu dvě řady, ne tři.**
   Změřeno 27. 8. 2026: pruh se na 390 px zalomil do tří řad a měl 204 px,
   takže rám začínal na 389 px místo slíbených 250. Přepínače dostanou
   vlastní řádek a jméno stránky sdílí ten první s ikonami. */
@media (max-width: 560px) {
    /* Pořadí v DOM je tužka → jméno → úrovně → šířka. Na telefonu nese první
       řádek tužku se jménem a druhý oba přepínače; jinak z toho vyjdou čtyři
       řádky a rám se odsune o dalších sto pixelů.

       Očičko a „⋯" tu bývaly taky — 28. 8. 2026 obojí zrušeno, takže první
       řádek zůstal jen se jménem a tužkou. */
    .pb-hlava-tuzka { order: 1; }
    .pb-hlava-nazev { order: 2; flex: 1 1 0; overflow: hidden; }
    /* ⚠️ **Každý přepínač na vlastní řádek.** Zkoušel jsem je nechat sdílet
       jeden (`flex: 1 1 0; min-width: 0`) — přepínač úrovní se zhroutil na
       sloupec 104 px široký a 140 px vysoký, tedy hůř než tři řádky.
       Změřeno 27. 8. 2026, ne odhadnuto. */
    .pb-prepinac { order: 4; flex: 1 1 auto; }
    .pb-sirka { order: 5; flex: 1 1 auto; }

    .pb-hlava-nazev .drobne { display: none; }
    .pb-sirka select { flex: 1 1 auto; min-width: 0; }
    .pb-volba { flex: 1 1 0; padding: 7px 4px; }
}

.pb-volba {
    display: block;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .3);
    padding: 7px 11px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.pb-volba .drobne {
    display: block;
    font-weight: 400;
}

.pb-volba.tady {
    border-color: var(--text);
    background: var(--text);
    color: var(--plocha);
}

.pb-volba.tady .drobne {
    color: var(--neaktivni-2);
}

/* Volba úrovně nese barvu své úrovně, aby se dalo poznat, co znamená barva
   rámečku na plátně. Bez toho by byl barevný rámeček jen ozdoba. */
.pb-volba-sekce.tady      { background: var(--pb-sekce);      border-color: var(--pb-sekce); }
.pb-volba-bunka.tady      { background: var(--pb-bunka);      border-color: var(--pb-bunka); }
.pb-volba-komponenta.tady { background: var(--pb-komponenta); border-color: var(--pb-komponenta); }

/* --- rámečky uvnitř rámu ---------------------------------------------------
   `outline`, ne `border`: **nemění rozvržení**. S rámečkem by se prvek posunul
   o dva pixely a náhled by přestal odpovídat tomu, co uvidí návštěvník — což je
   jediný důvod, proč se skládá nad skutečným vykreslením. */

.pb-ram {
    position: relative;
    outline: 1px dashed var(--neaktivni);
    outline-offset: 2px;
}

.pb-ram-sekce      { outline-color: var(--pb-sekce); }
.pb-ram-bunka      { outline-color: var(--pb-bunka); }
.pb-ram-komponenta { outline-color: var(--pb-komponenta); }

/* Pruh ovládání jednoho prvku.

   **Je uvnitř prvku, v běžném toku** — ne absolutně nad ním. Prošlo to dvěma
   koly a stojí za to popsat obě, aby to nikdo nevracel zpátky:

   1. Nejdřív visel proužek ikon sám v rohu. U dvou buněk 4/12 na telefonu
      přesahoval ven a sedl si na sousední buňku — kliknutí mohlo trefit cizí
      prvek. Ukázal to až snímek.
   2. Pak byl pruh široký jako prvek a ukotvený nad ním (`bottom: 100%`). Tím
      přestal přetékat do stran, ale při zalomení ikon do druhého řádku povyrostl
      nahoru **do prvku nad sebou**. Mezera mezi buňkami byla 48 px, dvouřádkový
      pruh měřil ~50. Chytil to test `10-pagebuilder-vzhled`, ne oko.

   Ladit velikost mezery by znamenalo hádat, kolik řádků pruh bude mít — a ten
   počet závisí na šířce prvku, kterou dopředu neznáme. **V toku ta otázka
   nevzniká:** pruh si místo udělá sám a přesáhnout nemůže z podstaty.

   Cenou je, že v režimu úprav je obsah o výšku pruhu níž než na webu. Na to je
   přepínač „Jak to uvidí lidé" — tam ovládání není a stránka sedí přesně.

   Štítek ustupuje ikonám: má `min-width: 0` a ořezává se, protože jméno prvku je
   informace, kdežto ikony jsou ovládání. */

.pb-pruh {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2px;
    margin-bottom: 8px;
    /* Skrývá se **průhledností**, a to ze dvou různých důvodů:

       1. **Ne `display: none`** — pruh je v toku, takže by při najetí myší
          obsah nadskočil a při odjetí spadl zpátky. Na ploše, kde se posuzuje
          vzhled, je poskakující obsah horší než pár ikon navíc.
       2. **Ne `visibility: hidden`** — to sice místo drží, ale **znemožňuje
          ohnisko**: do skryté větve se tabulátorem nedostaneš, takže by
          `:focus-within` nemohl nastat nikdy a ovládání by z klávesnice bylo
          nedosažitelné. Chyceno testem `10-pagebuilder-vzhled` 25. 8. 2026 —
          okem ani proklikáním myší se to nepozná.

       Průhledný pruh zůstává v toku i v pořadí tabulátoru a čtečka obrazovky
       ho přečte. Aby se do něj nedalo omylem kliknout, dokud není vidět,
       nepřijímá ukazatel. */
    opacity: 0;
    pointer-events: none;
}

/* Ovládání se ukáže u prvku, **na kterém zrovna jsem**. Do toho stavu vedou
   tři rovnocenné cesty a žádná není náhradní:

   - myš najetím (`:hover`),
   - klávesnice ohniskem (`:focus-within`) — proto jsou ikony `<button>`
     a `<a>`, ne obrázky odchytávající kliknutí,
   - prst klepnutím (`.pb-vybrano`, přidává `js/pagebuilder.js`).

   Kdyby ovládání viselo jen na najetí, na telefonu by bylo nedosažitelné
   a z klávesnice taky. Jeden stav se třemi spouštěči je proti dvěma
   rozhraním vedle sebe výhodný v tom, že se nemá co rozejít. */
.pb-ram:hover > .pb-pruh,
.pb-ram:focus-within > .pb-pruh,
.pb-ram.pb-vybrano > .pb-pruh {
    opacity: 1;
    pointer-events: auto;
}

/* --- ukotvená lišta na dotyku ----------------------------------------------
   ⚠️ **Postaveno 26. 8. 2026 naslepo — neověřeno na skutečném zařízení.**
   Emulace v prohlížeči neřekne, jestli se to dá ovládat prstem; to ukáže až
   telefon. Do té doby to není hotová věc, ale připravená k ověření.

   Proč vůbec: nástrojů je devět, na dotyku mají mít terče od 44 px a to je
   i po zúžení na pět 220 px. Buňka 3/12 na displeji 390 px má 118. **V rohu
   prvku to místo prostě není** — ať se rozdělí jakkoli.

   Lišta se proto na dotykových zařízeních přesune ke **spodní hraně obrazovky**,
   kde je místo bez ohledu na to, jak je prvek široký. Není to druhé rozhraní:
   jsou to **tytéž formuláře**, jen vykreslené jinde (`js/pagebuilder.js` je
   přenese). Na myši se nemění nic. */

.pb-lista-dole {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: none;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--plocha);
    border-top: 1px solid var(--ramecek);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
}

.pb-lista-dole.je-videt {
    display: flex;
}

/* **Musí být poznat, ke kterému prvku lišta patří.** Bez toho by uživatel
   posouval něco jiného, než si myslí — a je to ta část, na které to spadne,
   když se odbyde. Štítek nese jméno prvku i jeho barvu. */
/* ⛔ **Klon si nese třídy originálu, tedy i to, čím je originál skrytý.**
   Pravidlo `@media (hover: none) { .pb-pruh { visibility: hidden } }` platí
   i tady v hostitelské stránce — takže by ukotvená lišta byla neviditelná
   a nedalo by se na ni klepnout. Na telefonu by ovládání prostě nebylo.

   Chytil to test v emulaci (26. 8. 2026); v prohlížeči na počítači se to
   neprojeví, protože tam se na dotykovou větev vůbec nedojde. */
.pb-lista-dole .pb-pruh {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    margin: 0;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
}

.pb-lista-dole .pb-stitek {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 6px 10px;
}

.pb-lista-dole .pb-ikony {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 4px;
}

/* Na dotyku není najetí. Obrys aktivní úrovně je proto vidět **pořád** —
   bez něj by uživatel klepal naslepo a netrefil by ani prvek, natož ikonu.
   Ikony se pořád ukazují až po klepnutí, takže záměr „ať mi nepřekážejí,
   dokud je nepotřebuju" zůstává. Rozhoduje schopnost zařízení, ne jméno
   prohlížeče; hybridní notebook dostane obojí a nevadí to. */
@media (hover: none) {
    .pb-ram {
        outline-style: dashed;
        /* ⛔ **`cursor: pointer` tu není pro kurzor — je pro Safari.**

           Výběr prvku na dotyku stojí na tom, že klepnutí do plochy rámečku
           vyvolá `click`. **Safari ho z obyčejné plochy pošle jen tehdy, když
           prvek vypadá klikatelně** — má `cursor: pointer`, nebo vlastní
           obsluhu přímo na sobě. Ověřeno v kódu 29. 8. 2026: `.pb-ram` neměl
           **ani jedno** (obsluha sedí na dokumentu uvnitř rámu), takže to
           **drželo jen na tom, že to uživateli 26. 8. fungovalo**.

           Na náhodě to stát nemá. Jeden řádek tu podmínku splní výslovně.

           ⚠️ **Jen na dotyku.** Na myši by ruka nad celým rámečkem lhala —
           tam se klepá na ikony v liště, ne na plochu. */
        cursor: pointer;
    }

    /* Lišta v rohu se na dotyku nepoužívá — přenáší se dolů. Zůstává v DOM
       (odtud se klonuje) a drží si své místo, aby obsah nenadskakoval. */
    .pb-pruh {
        visibility: hidden;
    }

    /* Vybraný prvek musí jít poznat, když se ovládá zdola. */
    .pb-ram.pb-vybrano {
        outline-width: 3px;
        outline-style: solid;
    }
}

.pb-stitek {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 6px;
    color: #fff;
    background: var(--neaktivni);
}

.pb-ikony {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1px;
}

.pb-ikony form {
    display: block;
    margin: 0;
}

.pb-ikona {
    display: block;
    border: 0;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 5px 8px;
    color: #fff;
    background: var(--neaktivni);
    text-decoration: none;
    font-family: inherit;
}

.pb-pruh-sekce .pb-stitek,
.pb-pruh-sekce .pb-ikona           { background: var(--pb-sekce); }
.pb-pruh-bunka .pb-stitek,
.pb-pruh-bunka .pb-ikona           { background: var(--pb-bunka); }
.pb-pruh-komponenta .pb-stitek,
.pb-pruh-komponenta .pb-ikona      { background: var(--pb-komponenta); }

.pb-ikona:hover,
.pb-ikona:focus {
    filter: brightness(1.25);
}

/* Prstem se pětipixelová ikonka netrefí. 44 px je Applem doporučená minimální
   plocha a WCAG 2.5.5 chce totéž. `pointer: coarse` je dotykové zařízení —
   pozná se to podle schopnosti, ne podle názvu prohlížeče, takže na myši
   rozhraní nezhrubne. */
@media (pointer: coarse) {
    .pb-ikona {
        min-width: 44px;
        min-height: 44px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pb-ikony { gap: 2px; }
}

/* --- prázdné místo ---------------------------------------------------------
   Prázdný prvek nemá velikost, takže není co obtáhnout ani kam kliknout.
   Kostra (`StrankaRepozitar::zajistiKostru`) zaručí sekci a buňku; prázdné
   místo pro komponentu se **vykresluje**, nezakládá se v databázi — komponenta
   musí mít druh a ten si vybírá uživatel.

   Na webu se nevykreslí nic. Prázdný prvek má být pro návštěvníka neviditelný,
   ne popsaný poznámkou pro redaktora. */

.pb-misto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border: 1px dashed var(--neaktivni);
    background: #fbfbfb;
}

.pb-misto-sekce {
    margin-top: 24px;
    justify-content: center;
}

.pb-misto form {
    display: block;
    margin: 0;
}

.pb-misto-tlacitko {
    border: 1px solid var(--ramecek);
    background: var(--plocha);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    padding: 8px 14px;
    color: var(--text);
}

.pb-misto-tlacitko:hover {
    border-color: var(--text);
}

@media (pointer: coarse) {
    .pb-misto-tlacitko { min-height: 44px; }
}

/* --- nastavení v překryvném okně -------------------------------------------
   Okno je `<dialog>`, ne `<div>` s vlastní obsluhou: ohnisko se do něj přesune,
   uvnitř se zacyklí, `Esc` zavře a vrátí ohnisko zpátky. Tohle všechno umí
   prohlížeč sám a ruční náhrada bývá právě to místo, kde se přístupnost ztratí.

   Obsah se do něj natáhne ze **skutečné stránky nastavení**. Bez JavaScriptu
   se na tu stránku prostě přejde — jedna adresa, jeden formulář, dvě podoby. */

.pb-okno {
    border: 1px solid var(--ramecek);
    padding: 0;
    width: min(680px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    background: var(--plocha);
    color: var(--text);
}

.pb-okno::backdrop {
    background: rgba(0, 0, 0, .35);
}

.pb-okno-hlavicka {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--linka);
}

.pb-okno-telo {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(100vh - 140px);
}

.pb-okno-zavrit {
    border: 1px solid var(--ramecek);
    background: var(--plocha);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    padding: 8px 16px;
    color: var(--text);
}

/* Na úzké obrazovce je přirozená podoba nastavení **celá obrazovka**.
   Plovoucí okénko uprostřed telefonu je k ničemu a postranní panel taky. */
@media (max-width: 640px) {
    .pb-okno {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        margin: 0;
        border: 0;
    }

    .pb-okno-telo {
        max-height: calc(100vh - 70px);
    }
}

@media (pointer: coarse) {
    .pb-okno-zavrit { min-height: 44px; }
}

/* --- prohlídka, když se rám nevejde ----------------------------------------
   Rám má mít **skutečnou šířku** breakpointu, jinak by se media queries
   vyhodnotily špatně a náhled by lhal. Na displeji širokém 390 px se ale rám
   o 1280 px ukázat nedá.

   Řešení není rám zúžit, ale **zmenšit obraz**: `transform: scale()` nemění
   šířku rozvržení, takže se uvnitř pořád počítá s 1280 px. Odpověď na otázku
   „jak to vypadá na notebooku" tak zůstane pravdivá a je vidět celá naráz.

   Upravovat se v tom režimu nedá schválně: při zmenšení na 0,3× vyjde běžný
   text asi na pět pixelů. **Upravovat v nečitelném měřítku je horší než nemoct
   to** — proto se v něm ovládání zhasne. */

.nahled-obal-zmenseno {
    overflow-x: hidden;
}

.nahled-ram-zmenseno {
    transform-origin: top left;
}

.pb-zmenseno-hlaska {
    margin: 0 0 8px;
}

.pb-prazdno {
    color: var(--neaktivni);
    font-size: 14px;
    font-style: italic;
    margin: 0;
}

/* Rozestupy v režimu úprav.

   Jsou tu jen proto, aby šly sousední prvky od sebe rozeznat — **ne aby se do
   nich vešlo ovládání**. To si své místo dělá samo tím, že je v toku. Dokud
   viselo nad prvkem, byly tyhle hodnoty pojistkou, kterou bylo potřeba hádat;
   teď jsou to prostě rozestupy.

   Na webu žádné ovládání není a rozestupy tam určuje sazba, ne administrace. */
.pb-upravy .s-sekce {
    margin-bottom: 40px;
}

.pb-upravy .s-mrizka {
    row-gap: 28px;
}

.pb-upravy .s-komponenta + .s-komponenta {
    margin-top: 28px;
}

.pole-uzke {
    max-width: 180px;
}

.odsad-vetsi {
    margin-top: 32px;
}

/* Popisek, který potřebuje odečítač obrazovky, ale na obrazovce by překážel.
   `display:none` by ho schoval i odečítači — proto tenhle způsob. */
.skryte {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- editor textové komponenty --------------------------------------------
   Lišta a plocha vznikají až v JavaScriptu; bez něj zůstane textarea. */

.ed-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border: 1px solid var(--ramecek);
    border-bottom: none;
    padding: 8px;
    background: #fafafa;
}

.ed-tlacitko {
    font-family: var(--pismo);
    font-size: 13px;
    color: var(--text);
    background: var(--plocha);
    border: 1px solid var(--ramecek);
    padding: 5px 10px;
    cursor: pointer;
}

.ed-tlacitko:hover {
    border-color: var(--text);
}

.ed-plocha {
    min-height: 280px;
    max-width: 100%;
    padding: 16px;
    overflow-y: auto;
}

.ed-plocha:focus {
    outline: none;
    border-color: var(--text);
}

/* Nadpisy v ploše mají vypadat jako na stránce, ne jako v administraci —
   jinak si redaktor neudělá představu o výsledku. */
.ed-plocha h2 { font-size: 32px; font-weight: 300; text-align: left; margin: 0 0 12px; }
.ed-plocha h3 { font-size: 24px; margin: 16px 0 8px; }
.ed-plocha h4 { font-size: 18px; font-weight: 700; margin: 16px 0 8px; }
.ed-plocha p  { margin: 0 0 12px; }
.ed-plocha ul,
.ed-plocha ol { margin: 0 0 12px; padding-left: 24px; }
.ed-plocha blockquote {
    margin: 0 0 12px;
    padding-left: 16px;
    border-left: 2px solid var(--linka);
    color: var(--popisek);
}

.ed-zdroj {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
}

/* Vykreslený text na stránce */
.s-text h2 { text-align: left; font-size: 36px; }
.s-text h3 { margin-top: 24px; }
.s-text ul,
.s-text ol { padding-left: 24px; }
.s-text blockquote {
    margin: 0 0 16px;
    padding-left: 20px;
    border-left: 2px solid var(--linka);
    color: var(--popisek);
}

/* --- galerie na stránce ----------------------------------------------------

   ⛔ **Pravidla nesou `.s-fotky`, ne `.s-galerie`.** Obal komponenty dostává
   `s-{typ}`, takže u galerie je obalem `div.s-komponenta.s-galerie`. Mřížka
   psaná na `.s-galerie` tedy padala **na obal** — ten se stal mřížkou
   o jednom 180px sloupci a seznam uvnitř dostal 182 px bez ohledu na okno.
   Změřeno 27. 8. 2026 na XS až XL: všude 1 sloupec, obal 1152 px. */

.s-fotky {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    /* ⛔ **Svisle víc než vodorovně.** Uživatel 28. 8. 2026: *„udělej ve výpisu
       galerie trochu větší vertikální odsazení mezi řádky, aby to nebylo tolik
       slepené."* Řekl **„trochu"**, tak je to 24 px místo 12 — ne vzdušné
       rozvržení. Vodorovná mezera zůstává na 12: řádky se slepovaly, sloupce ne. */
    column-gap: 12px;
    row-gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.s-fotky img {
    display: block;
    width: 100%;
    height: auto;
}

.s-popisek {
    display: block;
    font-size: 13px;
    color: var(--popisek);
    margin-top: 6px;
}

/* --- galerie v administraci ------------------------------------------------ */

.nahravani {
    border: 1px solid var(--linka);
    padding: 20px;
}

.gal-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.gal-dlazdice {
    border: 1px solid var(--ramecek);
    padding: 12px;
    background: var(--plocha);
}

.gal-nahled {
    display: block;
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    background: #fafafa;
    margin-bottom: 10px;
}

.gal-udaje {
    word-break: break-all;
    margin: 8px 0;
}

.gal-akce form + form::before {
    content: " · ";
    color: var(--neaktivni);
}

.gal-akce button[disabled] {
    color: var(--neaktivni);
    cursor: default;
    text-decoration: none;
}

/* Přetahování je vylepšení nad tlačítky — třídy přidává js/galerie.js. */
.gal-dlazdice[draggable="true"] {
    cursor: grab;
}

.gal-tazena {
    opacity: 0.4;
}

.gal-cil {
    outline: 2px dashed var(--text);
    outline-offset: 2px;
}

/* Výběr druhu komponenty v nastavení. Druh se volí až tady, ne při vzniku
   komponenty — uživatel 26. 8. 2026. */
.pb-druhy {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.pb-druhy form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 220px;
}

/* Prázdný prvek musí být na co kliknout. Bez toho by komponenta bez druhu
   neměla výšku, lišta by neměla kde být a druh by se nedal vybrat. */
.pb-upravy .pb-ram {
    min-height: 40px;
}

/* --- zřídkavé nástroje pod „⋯" ---------------------------------------------
   Nástrojů je devět a devět terčů po 44 px je 396 px; buňka 3/12 na telefonu
   má 118. Čtyři jsou proto pořád vidět a zbytek je schovaný.

   Je to `<details>`, ne vlastní obsluha: prohlížeč ho otevře i klávesnicí,
   odečítač obrazovky ho přečte jako věc, která něco skrývá, a funguje bez
   JavaScriptu. */

.pb-vic {
    position: relative;
    display: inline-block;
}

.pb-vic-spoust {
    list-style: none;   /* pryč s výchozím trojúhelníkem */
    cursor: pointer;
    user-select: none;
}

.pb-vic-spoust::-webkit-details-marker {
    display: none;
}

/* Aby „⋯" nebylo jen devátá ikona v řadě, ale bylo poznat, že něco skrývá. */
.pb-vic-spoust {
    letter-spacing: 2px;
}

.pb-vic[open] > .pb-vic-spoust {
    filter: brightness(1.35);
}

.pb-vic-obsah {
    position: absolute;
    top: 100%;
    right: 0;
    /* poznámka: v ukotvené liště dole se to obrací, viz níž */
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
    min-width: 140px;
    background: var(--plocha);
    border: 1px solid var(--ramecek);
}

/* ⛔ **V ukotvené liště se rozbaluje nahoru, ne dolů.**

   Lišta je přilepená ke spodní hraně (`position: fixed; bottom: 0`), takže
   všechno, co se z ní rozbalí dolů, skončí **pod obrazovkou**. Změřeno
   27. 8. 2026 na 390×700: nabídka měla spodní hranu na **830 px**, tedy
   **130 px mimo** — nedalo se na ni dostat vůbec.

   Nahlásil to uživatel z telefonu. Emulace by to ukázala taky, jen se na to
   nikdo nepodíval — proto u toho vzniknul test, který měří, jestli je
   rozbalené menu celé uvnitř okna. */
.pb-lista-dole .pb-vic-obsah {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 2px;
    /* Kdyby se nabídka nevešla ani nahoru (hodně položek, nízké okno),
       roluje se sama v sobě — pryč z obrazovky se dostat nesmí. */
    max-height: 60vh;
    overflow-y: auto;
}

.pb-vic-obsah .pb-ikona {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
    letter-spacing: 0;
}

@media (pointer: coarse) {
    .pb-vic-obsah .pb-ikona { min-height: 44px; }
}

/* HTML režim textové komponenty. Píše se v něm zdroj, ne text — proto písmo
   s pevnou šířkou a bez automatických oprav. Uživatel si režim vyžádal, aby
   mohl psát `<br>` a jednoduché formátování; bílý seznam platí dál. */
.ed-html {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    tab-size: 2;
}

/* Ukázka stylu na jeho obrazovce. Rám kolem ní má **vlastní pozadí a rámeček**,
   aby bylo vidět, kde ukázka končí — styl, který nastaví bílé pozadí, by se
   jinak na bílé stránce ztratil a vypadalo by to, že nedělá nic. */
.styl-ukazka {
    border: 1px dashed var(--ramecek);
    padding: 8px;
    margin-top: 8px;
}

.seznam-pouziti {
    margin: 8px 0 16px 20px;
}

.seznam-pouziti li {
    margin-bottom: 4px;
}

/* --- rozklik galerie na stránce ---------------------------------------------
   Jediná část rozhraní, kterou uvidí návštěvník. Proto střídmě: obrázek,
   popisek, počítadlo a dvě šipky — nic víc. */

.gv-okno {
    border: 0;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    background: transparent;
    overflow: hidden;
}

.gv-okno::backdrop {
    background: rgba(0, 0, 0, .88);
}

.gv-panel {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* ⛔ **`minmax(0, 1fr)`, ne `1fr`.**
       Uživatel 28. 8. 2026: *„ta fotka vytékala a byla tím pádem uříznutá,
       když jsem ji rozkliknul."*

       `1fr` má **automatické minimum `auto`**, tedy min-content — u fotky je
       to její vlastní výška. Řádek proto vyrostl nad okno a `max-height: 100%`
       na obrázku se neměl oč opřít. Naměřeno na jeho čtvercové fotce
       v okně 1440×900: obrázek **1304 × 1304 px v panelu vysokém 900**,
       tedy 420 px přes okraj. Na telefonu se to neprojevilo, protože tam
       velikost omezila šířka. */
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-items: center;
    justify-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
}

/* Obal fotky v rozkliku
   ------------------------------------------------------------------------
   ⛔ **Existuje kvůli označení vzorníku.** Vrstva se značkami musí sedět na
   **fotce**, ne na buňce mřížky — a `object-fit: contain` nechává kolem
   obrázku prázdno. Obal dostane poměr stran z databáze (skript ho čte
   z `data-pomer`), takže má tvar fotky **dřív, než se fotka stáhne**,
   a obrázek ho vyplní beze zbytku. */
.gv-obal {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    /* Bez tohohle by obal zůstal široký jako celá buňka a vrstva by se
       roztáhla vedle fotky. */
    width: auto;
    height: auto;
}

/* Značky se v obalu měří stejně jako v mřížce — vrstva má `inset: 0`. */
.gv-obal-vzornik .vz-vrstva { container-type: inline-size; }

.gv-obal .gv-obrazek {
    display: block;
    width: 100%;
    height: 100%;
}

.gv-obrazek {
    grid-column: 2;
    grid-row: 1;
    /* `min-height: 0` je druhá půlka téhož: bez ní si prvek drží svou
       min-content výšku i v `minmax(0, 1fr)` řádku. */
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gv-popisek,
.gv-pocitadlo {
    grid-column: 1 / -1;
    margin: 0;
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.gv-pocitadlo {
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
}

.gv-zavrit,
.gv-dozadu,
.gv-dopredu {
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 22px;
    line-height: 1;
    /* Terče od 44 px i na myši — u překryvu přes celou obrazovku není důvod
       je dělat malé a na dotyku by menší nešly trefit. */
    min-width: 44px;
    min-height: 44px;
}

/* ⛔ **Křížek musí být vidět a musí být na dosah palce.**

   Uživatel 28. 8. 2026 z telefonu: *„není tu ani žádný ovládací prvek na
   toto."* Tlačítko přitom existovalo — sedělo vpravo nahoře, tedy:

   1. **pod stavovým řádkem.** Aplikace spuštěná z ikony na ploše kreslí až
      k hornímu okraji displeje, takže `top: 12px` skončí za hodinami a signálem.
      `env(safe-area-inset-top)` je právě ta výška, kterou tam iOS potřebuje.
   2. **v rohu, kam palec nedosáhne.** Na 6palcovém telefonu drženém jednou
      rukou je pravý horní roh to nejvzdálenější místo.

   Proto se křížek **na dotykových obrazovkách stěhuje dolů** k počítadlu, kde
   palec přirozeně je. Na myši zůstává nahoře — tam je zvykem a nepřekáží. */
.gv-zavrit {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    font-size: 18px;
}

@media (pointer: coarse) {
    /* ⚠️ **Vlastní řádek, ne místo vedle počítadla.** Popisek i počítadlo
       zabírají `grid-column: 1 / -1`, takže by se tlačítko s nimi v jednom
       řádku překrývalo — a protože je v DOM první, zmizelo by **pod** nimi.
       Přesně ta chyba, kterou uživatel hlásil, jen jinou cestou. */
    .gv-panel {
        grid-template-rows: minmax(0, 1fr) auto auto auto;
    }

    .gv-zavrit {
        position: relative;
        top: auto;
        right: auto;
        grid-column: 1 / -1;
        grid-row: 4;
        justify-self: center;
        /* Palec drží telefon dole; sem se dosáhne bez přehmatu. */
        margin: 4px 0 calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 0 22px;
        background: rgba(255, 255, 255, .22);
        border-radius: 6px;
    }
}

.gv-dozadu { grid-column: 1; grid-row: 1; }
.gv-dopredu { grid-column: 3; grid-row: 1; }

.gv-zavrit:hover,
.gv-dozadu:hover,
.gv-dopredu:hover {
    background: rgba(255, 255, 255, .25);
}

/* Náhledy v mřížce ať mají podobnou výšku, jinak se řádky rozskáčou podle
   toho, jestli je fotka na výšku nebo na šířku. */
.s-fotky a {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

/* Obrazovka fronty — jedna věc, jedna obrazovka
   ------------------------------------------------------------------------
   Ukládá se na plochu telefonu, takže **nemá hlavičku administrace ani
   podnavigaci**. Není to jiná aplikace, je to užší pohled — a pořád
   za přihlášením. */
.fronta-telo {
    margin: 0;
    background: var(--plocha);
}

.fronta-pruh {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    background: var(--text-tvrdy);
    color: #fff;
    padding: 12px 16px;
    /* Zůstává nahoře i při rolování: počet čekajících je to, kvůli čemu se
       sem člověk dívá, a u dvaceti fotek by jinak odjel pryč. */
    position: sticky;
    top: 0;
    z-index: 5;
}

.fronta-pocet { font-size: 14px; color: rgba(255, 255, 255, .78); }

.fronta-obsah { padding: 16px; max-width: 720px; margin: 0 auto; }

.fronta-odkud { margin: 0 0 12px; }

/* ⛔ **Akce nejsou lepivé — a je to oprava, ne opomenutí.**

   Napřed jsem je přilepil ke spodnímu okraji s odůvodněním, že u dávky
   o dvaceti fotkách by se k odbavení muselo rolovat zpátky. Dvakrát se to
   nepovedlo: lepivý prvek **nezabírá místo**, takže napoprvé překryl poslední
   řadu fotek, a napodruhé — s odstupem pod mřížkou — zůstala na konci
   **prázdná díra o výšce lišty**.

   Obojí bylo vidět na snímku a ani jednou v kódu (§28). Cena za to, že si
   ušetřím jedno odrolování, byla vyšší než ten zisk: **po odškrtnutí fotky
   se stejně dolů posouvám**, takže je lišta na konci mřížky tam, kde ji ruka
   čeká. Zůstává lepivý jen **pruh nahoře** — počet čekajících je to, kvůli
   čemu se sem člověk dívá. */
.fronta-akce {
    background: var(--plocha);
    border-top: 1px solid var(--linka);
    padding: 12px 0 16px;
    margin-top: 16px;
}

.fronta-akce .tlacitko-velke { width: 100%; margin-top: 8px; }
.fronta-akce .tlacitko-tise { display: block; margin: 8px auto 0; }

.fronta-prepnout { margin-bottom: 12px; }

.fronta-hotovo { text-align: center; padding: 48px 16px; }
.fronta-fajfka { font-size: 46px; line-height: 1; margin: 0 0 8px; color: var(--stav-uspech, #3f5a0c); }

.fronta-pata {
    text-align: center;
    padding: 24px 16px 40px;
    font-size: 14px;
}

.fronta-pata a { color: var(--popisek); }

/* Označení vzorníku — vrstva nad fotkou
   ------------------------------------------------------------------------
   ⛔ **Barvy nesou význam a mají vlastní podklad.**

   Uživatel: „navrhni podle sebe barvy pro číslo a písmena, ale udělej je
   jinou." Podklad se v té fotce mění — dřevo, bílá látka, tmavě modrá,
   hořčicová, purpurová, růžová — takže **samotný barevný text by na některém
   poli zmizel**. Každý znak má proto vlastní plochu.

   **Číslo: bílá na grafitové.** Neutrální kotva, která nesoutěží s barvami
   produktů — říká „tahle fotka".
   **Písmena: bílá na petrolejové.** Ta barva se ve výrobcích nevyskytuje
   (jsou tam růžové, pastely, hořčicová, purpurová, dřevo a tmavě modré
   květiny), takže se s nimi neplete — říká „tenhle vzorek".

   Kontrasty jsou změřené, ne odhadnuté; čísla jsou v commitu. */
/* ⛔ **Fotka vzorníku se neořezává — a je to příčina, ne kosmetika.**

   Uživatel 28. 8. 2026: *„ty popisky někde chybí, někde ujedou z míst, kde
   mají být."* Změřeno, proč:

   | kde | poměr boxu | poměr fotky | co se dělo |
   |---|---|---|---|
   | dlaždice v administraci | 0,935 | 1,0 | `cover` ořezával → značky **ujížděly** |
   | mřížka na webu | 1,333 | 1,0 | ořez o čtvrtinu → spodní řada **chyběla** |
   | listování | 1,0 | 1,0 | bez ořezu → sedělo |

   **Pozice byly celou dobu správné.** Vrstva se ale měří od **boxu prvku**,
   kdežto fotka je uvnitř zmenšená a **oříznutá** (`object-fit: cover`), takže
   třetiny boxu přestaly odpovídat třetinám fotky.

   ⚠️ **Vypálení popisků do souboru tohle neopraví celé.** Ujíždění ano —
   značky by se ořezávaly spolu s fotkou. Ale v mřížce 4:3 se ze čtvercové
   fotky ořízne čtvrtina, takže **spodní řada písmen by chyběla i vypálená**.
   Jediné, co spraví obojí, je fotku vzorníku **neořezávat**.

   Dlaždice pak nemají stejnou výšku. U vzorníku je to správná výměna: je to
   galerie, kde se čtou označení, ne kde se srovnává vzhled. */
.vz-obal img {
    object-fit: contain !important;
    aspect-ratio: auto !important;
    height: auto !important;
}

/* Totéž pro dlaždici v administraci. Tam značky nejsou v `.vz-obal` —
   dlaždice je sama vrstvenou mřížkou, takže se rozlišuje třídou na ní.

   ⚠️ Selektor nese **obě třídy** schválně: `.vz-dlazdice img` má stejnou
   váhu jako `.por-dlazdice img` a rozhodovalo by pořadí v souboru —
   naměřeno, že prohrával. Dvě třídy tu nejednoznačnost odstraní. */
.por-dlazdice.vz-dlazdice {
    aspect-ratio: auto;
}

.por-dlazdice.vz-dlazdice img {
    object-fit: contain;
    height: auto;
}

.vz-vrstva {
    position: absolute;
    inset: 0;
    /* V mřížce administrace je dlaždice vrstvená přes `grid-area`; tady se
       vrstva musí dostat nad fotku i tam. */
    grid-area: vrstva;
    /* ⛔ **Měří se tahle vrstva, ne obal.**
       Napoprvé nesl `container-type: inline-size` obal — jenže ten má
       `width: fit-content`, takže jeho šířka závisí na obsahu a obsah
       (velikost písma v `cqw`) na jeho šířce. Prohlížeč ten kruh rozetne
       tím, že **obal zmenší na nulu**; naměřeno `obal 0×0` a značky zmizely.

       Tahle vrstva má rozměr z `inset: 0`, tedy z obalu — je definitivní
       a žádný kruh nevzniká. */
    container-type: inline-size;
    pointer-events: none;   /* vrstva nesmí překážet rozkliku fotky */
}

.vz-cislo,
.vz-pismeno {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    /* Velikost se řídí šířkou fotky, ne pevnými pixely: totéž označení musí
       být čitelné na dlaždici 180 px i na rozkliku přes celou obrazovku. */
    font-size: clamp(11px, 3.2cqw, 34px);
    padding: 0.35em 0.55em;
    border-radius: 0.25em;
}

/* ⛔ **Oranžová vpravo nahoře — rozhodnutí uživatele, které přebíjí moje.**

   Původně bílá na tmavě grafitové vlevo nahoře; odůvodňoval jsem to tím, že
   je to neutrální kotva, která nesoutěží s barvami produktů. Uživatel
   28. 8. 2026: *„udělej to číslo oranžové v pravém horním rohu (respektive
   ne číslo, ale barvu obdélníčku)"* — tedy podklad, písmo zůstává bílé.

   **Bílá na `#c2410c` má kontrast 5,18 : 1**, tedy nad hranicí 4,5 i pro
   drobné písmo. Změřeno, ne odhadnuto.

   ⚠️ **Proti petrolejové u písmen se liší hlavně odstínem, ne jasem**
   (poměr jasů 1,2 : 1). V odstínech šedi by si byly podobné — rozliší je
   ale **poloha** (číslo vlevo nahoře nad celou fotkou, písmena v pravých
   dolních rozích polí) a **oranžová proti modrozelené je opačná dvojice**,
   kterou rozezná i většina barvoslepých.

   ⚠️ Přesun doprava se **vrátil zpátky**: uživatel *„to červené číslo prosím
   ponech v levém horním rohu"*. Mění se jen barva. */
.vz-cislo {
    top: 2.5%;
    left: 2%;
    background: #c2410c;
    font-size: clamp(13px, 4.2cqw, 46px);
}

/* **Krytí podkladu písmen — 55 %, vybral uživatel 28. 8. 2026.**

   Nabídnuté byly tři úrovně; z měření vycházelo 85 % jako jediná, která projde
   i v mřížce. **Uživatel vybral 55 % se znalostí té ceny** a k otázce, jestli
   z dlaždice písmeno čte, odpověděl: *„většinou kliknu, ale bylo mi to čitelné
   i v malém. Za mě je to dobré."*

   ⚠️ **Co to znamená, ať to nikdo nemusí dohledávat:** nejhorší naměřený
   kontrast bílého písma je **3,05 : 1 v rozkliku** (hranice pro velké písmo
   je 3,0 — projde) a **2,54 : 1 v mřížce na stolním** (hranice pro drobné
   písmo je 4,5 — neprojde). V mřížce je tedy označení **vodítko, ne text ke
   čtení**; informace se bere z rozkliku, kam si uživatel stejně klikne.

   ⚠️ **Pozor na past, do které jsem spadl:** mírnější hranice 3,0 : 1 platí až
   pro **velké písmo**, a to je podle WCAG **14 bodů tučně, tedy ≈ 18,7 px** —
   ne 14 px. Aby označení v mřížce prošlo se stejnou průhledností, muselo by
   z dnešních 11 px vyrůst zhruba **na dvojnásobek**, což už není kompenzace,
   ale jiný vzhled. **Proto se nic takového nezapínalo.** */
.vz-pismeno { background: rgb(14 107 116 / var(--vz-kryti, 0.55)); }

/* Devět pevných pozic — pravý dolní roh každého pole mřížky 3 × 3,
   tak jak to uživatel zakreslil do ukázky.

   ⛔ **Čísla nejsou odhadnutá, jsou změřená z jeho fotky.** Skript projel
   sloupce a řádky a našel bílé mezery mezi poli na **33,1–33,5 %**
   a **66,4–66,9 %** (v obou směrech, fotka je 2048 × 2048). Pole tedy končí
   na 33,1 %, 66,4 % a 100 %.

   Uživatel 28. 8. 2026: *„potřebuji posunout písmenka více doprava a dolů,
   aby méně zakrývala samotné vzorky."* Značky se proto posunuly z odstupu
   ~6 % na **1,5 % od hrany pole**.

   ⚠️ **Dál už to nejde:** za hranou je bílá mezera (u prvních dvou sloupců
   a řádků) nebo okraj fotky (u třetího). Značka by pak vypadala, jako by
   patřila sousednímu poli — nebo by se uřízla. **1,5 % je mez, ne volba.** */
.vz-p1 { top: 31.6%; left: 31.6%; }
.vz-p2 { top: 31.6%; left: 64.9%; }
.vz-p3 { top: 31.6%; left: 98.5%; }
.vz-p4 { top: 64.9%; left: 31.6%; }
.vz-p5 { top: 64.9%; left: 64.9%; }
.vz-p6 { top: 64.9%; left: 98.5%; }
.vz-p7 { top: 98.5%; left: 31.6%; }
.vz-p8 { top: 98.5%; left: 64.9%; }
.vz-p9 { top: 98.5%; left: 98.5%; }

/* Pozice míří na pravý dolní roh pole, takže se značka posune sama k sobě. */
.vz-pismeno { transform: translate(-100%, -100%); }

/* Nádoba pro `cqw` výš — bez ní by se velikost písma řídila oknem, ne fotkou,
   a na dlaždici v administraci by značky přerostly obrázek. */
/* ⛔ **Obal se musí smrsknout na fotku, ne na místo kolem ní.**

   Napoprvé byl `display: block`, takže se roztáhl na celou šířku položky —
   a protože velká fotka v listování je vycentrovaná a užší (`max-height: 62vh`),
   **značky se rozmístily mimo obrázek**: „C" a „F" visely v prázdnu vpravo.
   Bylo to vidět hned na první snímku se skutečnou fotkou; v CSS to vypadalo
   správně (§28).

   `fit-content` obal zúží na obsah, tedy na obrázek, a `margin: 0 auto`
   ho nechá vycentrovaný jako předtím. */
.vz-obal {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

/* Strop sloupců u mřížky
   ------------------------------------------------------------------------
   ⭐ **Uživatel to nechce kvůli počtu, ale kvůli velikosti fotek** — „bude to
   mít vliv na velikost obrázků v mřížce". Míň sloupců = širší dlaždice.

   ⛔ **Je to strop, ne pevný počet.** `minmax(180px, 1fr)` dál rozhoduje na
   úzké obrazovce, kde se tolik sloupců stejně nevejde; strop se uplatní až
   tam, kde by se jich vešlo víc. Proto `min()`, ne pevná hodnota. */
/* Dlaždice podle poměru fotky
   ------------------------------------------------------------------------
   ⛔ **Není to nový typ rozvržení, je to mřížka bez ořezu.** Uživatel
   28. 8. 2026 u vzorníku: *„poměr stran obrázku v galerii přizpůsob poměru
   stran obrázku, který máš jako originál"* — aby byly na náhledu vidět
   jednotlivé vzorky. Čtvrtý typ by se od mřížky lišil jedinou vlastností.

   Poměr přichází ze šablony jako `--pomer` a bere se **z databáze**, ne
   z načteného obrázku: kdyby se čekalo na obrázek, stránka by po jeho
   načtení poskočila.

   ⚠️ Při různých tvarech fotek mají dlaždice v řádku různou výšku. Není to
   rozbité — mřížka řádek srovná podle nejvyšší — ale je to jiný dojem než
   pravidelný rastr, proto je to volba a **výchozí zůstává pevných 4:3**. */
.s-fotky-pomer a {
    aspect-ratio: var(--pomer, 4 / 3);
    overflow: visible;
}

.s-fotky-pomer img {
    object-fit: contain;
    /* Fotka vyplní dlaždici. Bez tohohle se vykreslí ve své vlastní velikosti
       a v široké dlaždici vedle ní zbude prázdno — naměřeno 480 px fotky
       v dlaždici 570 px. */
    width: 100%;
    height: 100%;
}

.s-fotky-strop {
    grid-template-columns: repeat(auto-fill, minmax(max(180px, 100% / var(--sloupcu, 6) - 12px), 1fr));
}

/* Pás — jedna řada, roluje se do strany
   ------------------------------------------------------------------------
   ⛔ **Bez skriptu.** Rolování i zarážky umí prohlížeč sám; prstem a trackpadem
   je to nativní gesto. Šipky by skript potřebovaly — a protože rolování
   funguje i bez nich, nejsou. */
.s-pas {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Aby bylo poznat, že se pokračuje: poslední viditelná fotka je uříznutá
       v půli. Je to jediná spolehlivá nápověda — šipka se dá přehlédnout,
       useknutý obrázek ne. */
    scroll-padding-left: 0;
}

.s-pas > li {
    flex: 0 0 clamp(140px, 34%, 280px);
    margin: 0;
    scroll-snap-align: start;
}

.s-pas img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* Šipky u listování
   ------------------------------------------------------------------------
   Jsou to **odkazy na sousední kotvu**, ne tlačítka se skriptem — fungují
   tedy bez JavaScriptu, z klávesnice i tlačítkem zpět.

   44 px je Applem doporučená minimální plocha a WCAG 2.5.5 chce totéž;
   je to veřejná stránka a listuje se na telefonu. Sedí **u kraje fotky**,
   ne přes ni: zakrývat obsah kvůli ovládání je u galerie obzvlášť nešikovné. */
.s-sipka {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    background: rgba(0, 0, 0, .45);
}

.s-sipka:hover,
.s-sipka:focus-visible { background: rgba(0, 0, 0, .75); }

.s-sipka-vlevo  { left: 0; }
.s-sipka-vpravo { right: 0; }

/* Listování — jedna velká, náhledy pod ní
   ------------------------------------------------------------------------
   ⛔ **Bez jediného řádku JavaScriptu.** Velké fotky leží všechny v dokumentu
   a ukazuje se ta, na kterou míří `:target`. Náhledy jsou obyčejné odkazy na
   kotvu, takže funguje klávesnice, tlačítko zpět i prohlížeč bez skriptu —
   a nic z toho se nemuselo psát.

   **Které se ukáže, když se na nic nemíří:** první. Řeší to `:has()` —
   dokud v seznamu není nic zacíleného, platí `:first-child`. Kdyby prohlížeč
   `:has()` neuměl, ukázaly by se dvě fotky místo jedné; to je nepohodlí,
   ne rozbitá stránka, a `:has()` umí od roku 2023 všechny hlavní prohlížeče. */
.s-listovani-velke {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

/* `relative` kvůli šipkám uvnitř — ty se umisťují k okraji fotky. */
.s-listovani-velke > li { display: none; position: relative; }
.s-listovani-velke > li:target { display: block; }
.s-listovani-velke > li:first-child { display: block; }
.s-listovani-velke:has(> li:target) > li:first-child:not(:target) { display: none; }

.s-listovani-velke img {
    display: block;
    /* Poměr se **nevnucuje**: u listování je fotka hlavní obsah a ořez by
       z portrétu uřízl to podstatné. V mřížce je to naopak — tam dělá
       jednotný ořez pořádek. */
    max-width: 100%;
    height: auto;
    /* ⛔ **Strop výšky, ať jsou náhledy vidět zároveň s velkou fotkou.**
       Bez něj se fotka roztáhla na celou šířku sloupce a řádek náhledů
       spadl pod ohyb — a listování, ve kterém není vidět, mezi čím se
       listuje, je jen velká fotka. Měřeno na 1440×720. */
    max-height: 62vh;
    width: auto;
    margin: 0 auto;
}

/* ⛔ **Řada, ne mřížka.** S `auto-fill` se náhledy nalepily doleva, kdežto
   velká fotka je uprostřed — vypadalo to jako chyba sazby. Řada s vystředěním
   drží obojí na téže ose a při větším počtu fotek se zalomí. */
.s-listovani-nahledy {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.s-listovani-nahledy li { margin: 0; }

.s-listovani-nahledy a {
    display: block;
    /* 44 px je Applem doporučená minimální plocha a WCAG 2.5.5 chce totéž;
       64 px je pohodlně nad ní i na telefonu. */
    width: 64px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    outline-offset: 2px;
}

.s-listovani-nahledy img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kde jsem. Bez toho se v deseti náhledech nedá poznat, která je zobrazená —
   a protože se stav drží v adrese, musí se to odvodit z `:target` výš. */
.s-listovani-nahledy a:hover img,
.s-listovani-nahledy a:focus-visible img { opacity: .75; }

.s-fotky img {
    height: 100%;
    object-fit: cover;
}

/* ========================================================================
   Příjem fotek z telefonu
   ========================================================================

   Obrazovka schvalování je dělaná **pro palec**, ne pro myš: kdo fotí
   v terénu, schvaluje na telefonu. Odtud velké náhledy (na miniaturách
   se nepozná, co je na fotce) a zaškrtávátko přes celý obrázek. */

.prijem-mrizka {
    display: grid;
    /* Dva sloupce i na úzké obrazovce — jeden by znamenal donekonečna
       dlouhé rolování, tři jsou na 390 px moc malé. */
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.prijem-dlazdice {
    margin: 0;
}

/* Celý náhled je zaškrtávátko. Trefit se palcem do čtverečku vedle obrázku
   nejde — WCAG 2.5.5 chce aspoň 44 px a čtvereček má 13. */
.prijem-vyber {
    position: relative;
    display: block;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--ramecek);
}

.prijem-vyber img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* Nevybraná fotka je vybledlá, ne skrytá — musí být pořád vidět, co to je. */
    opacity: 0.45;
    transition: opacity 0.12s ease;
}

.prijem-vyber input:checked ~ img {
    opacity: 1;
}

/* ⚠️ Zaškrtávátko se **nesmí schovat přes `visibility` ani `display`** — obojí
   mu vezme ohnisko a obrazovka by přestala jít ovládat z klávesnice.
   (POUCENI §13: `visibility: hidden` znemožňuje ohnisko.) */
.prijem-vyber input {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    z-index: 2;
}

/* Značka „vybráno" pro rychlé přehlédnutí — barva sama by nestačila,
   proto je vidět i zaškrtávátko. */
.prijem-znacka {
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    pointer-events: none;
}

.prijem-vyber input:checked ~ .prijem-znacka {
    border-color: var(--stav-uspech);
}

.prijem-vyber input:focus-visible ~ .prijem-znacka {
    border-color: var(--text-tvrdy);
}

.prijem-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.tlacitko-velke {
    min-height: 2.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Klíč k opsání — musí jít přečíst znak po znaku. */
code.klic {
    display: inline-block;
    word-break: break-all;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* ========================================================================
   Přerovnávání obrázků v mřížce
   ========================================================================

   Zvláštní režim správy galerie: **v mřížce nic než náhledy**. V seznamu má
   každý obrázek popisek, šipky a mazání a na telefonu se do řádku vejde
   tolik, že se náhled zmenší na nepoznání — přerovnávat se v tom nedá. */

.por-mrizka {
    display: grid;
    /* ⛔ **9 rem je dané terči, ne vkusem.** Od 27. 8. 2026 sedí na dlaždici
       tužka a „⋯"; každý terč má mít 44 px (Apple i WCAG 2.5.5), tedy 88 px
       jen na ikony. Do dřívějších 6,5 rem (104 px) by se vešly tak tak
       a nezbylo by na úchyt. Na telefonu 390 px z toho vyjdou dva sloupce. */
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 12px;
    list-style: none;
    margin: 16px 0;
    padding: 0;
}

.por-dlazdice {
    position: relative;
    /* Nádoba pro `cqw` u označení vzorníku: velikost písma se řídí šířkou
       dlaždice, ne oknem — jinak by značky na malé dlaždici přerostly fotku. */
    container-type: inline-size;
    /* ⛔ **Vrstvení mřížkou, ne pozicováním.** Obrázek i ovládání sedí ve
       **téže buňce** — `grid-area` je slepí na sebe, aniž by kterýkoli z nich
       musel být `position: absolute`.

       Proč to takhle: rozbalené „⋯" se musí měřit **od dlaždice**, jinak
       vyjede z obrazovky. `position: absolute` si za vztažný bod bere
       nejbližšího pozicovaného předka — takže stačilo, aby byla pozicovaná
       lišta, a nabídka se měřila od ní (změřeno 27. 8. 2026: pod kurzorem
       tlačítka byl odstavec nad mřížkou, ne tlačítko).

       Druhý pokus dal `position: absolute` obrázku a lištu nechal v toku —
       jenže pozicovaný prvek se kreslí **nad** nepozicovaným, takže ikony
       zmizely pod fotkou. Vidět to bylo zase až na snímku, ne v kódu (§28).

       Mřížka řeší obojí: nikdo není pozicovaný, tak se kreslí v pořadí
       zdroje — fotka první, ovládání nad ní. */
    display: grid;
    grid-template-areas: 'vrstva';
    aspect-ratio: 1 / 1;
    margin: 0;
    border: 1px solid var(--ramecek);
    background: var(--plocha);
    cursor: grab;
    /* ⛔ **Svislý pohyb patří prohlížeči, vodorovný nám.**

       Dřív tu bylo `touch-action: none` a nad dlaždicí se **nedalo rolovat** —
       u delší galerie je přitom dlaždicí **82 % obrazovky** (24 obrázků, rám
       390×700, změřeno 26. 8. 2026). Krátká galerie to schová, dvacet fotek už
       ne: člověk otevře přerovnávání a nedostane se dolů.

       S `pan-y` roluje svislý švih normálně a tažení začne až podržením —
       kdo prst zastaví, žádné rolování nespustil. Viz `js/prerovnani.js`. */
    /* ⛔ **`auto`, ne `none` — a je to schválně.** Dokud se tah nenabije
       podržením, patří gesto prohlížeči a seznam se roluje normálně. Teprve
       když prst 400 ms vydrží na místě, vezme si ho stránka (`.por-tahne`
       přepne `touch-action` na `none`). Kdyby tu stálo `none` natrvalo, vrátí
       se přesně ta vada, kvůli které kdysi vznikl úchyt: nad mřížkou se nedá
       rolovat. */
    touch-action: auto;
    /* Bez tohohle iOS při podržení nabídne kopírování obrázku. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ⛔ **Obrázek je spodní vrstva, ovládání zůstává v běžném toku.**

   Napřed to bylo obráceně — obrázek v toku a lišta `position: absolute`.
   Jenže rozbalené „⋯" se pak neměřilo od dlaždice, ale od **lišty**:
   `position: absolute` uvnitř lišty si za vztažný bod vezme ji, ne dlaždici.
   Nabídka tím vyjela ven z dlaždice přes text nad mřížkou a klepnutí na
   tlačítko chytal odstavec. Změřeno `elementFromPoint` 27. 8. 2026 —
   pod kurzorem byl `P.drobne`, ne tlačítko.

   Takhle je vztažným bodem dlaždice, protože mezi ní a nabídkou už nic
   pozicovaného není. */
.por-dlazdice img {
    grid-area: vrstva;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;   /* ať cíl gesta je vždycky dlaždice, ne obrázek */
}

/* Pořadové číslo — na malých náhledech je jediné, z čeho se pozná, kam se
   dlaždice posunula. Během tažení se přečíslovává. */
.por-cislo {
    position: absolute;
    left: 4px;
    top: 4px;
    min-width: 1.25rem;
    padding: 1px 4px;
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
    color: #fff;
    background: rgba(0, 0, 0, .55);
}

/* „Zůstat přihlášen" — terč pro palec, protože se to zaškrtává na telefonu. */
.prihl-pamatuj {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
}

.prihl-pamatuj input { width: 20px; height: 20px; }

/* **Úchyt šířky buňky — tažení na místě.**

   ⛔ **Sedí na pravém okraji buňky**, tedy tam, kde se šířka mění. Terč má
   44 px na výšku i šířku; na myši je nenápadný, dokud se na buňku nenajede.

   ⚠️ **Neschovává se úplně:** na dotyku není najetí, takže by ho nikdo
   nenašel. Tam je vidět pořád — je to jediné místo, kde se šířka dá měnit
   bez otevírání okna. */
.pb-sirka-uchyt {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
    color: #fff;
    background: var(--bunka, #1d4ed8);
    border-radius: 4px 0 0 4px;
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
    cursor: ew-resize;
    /* Gesto patří nám, ne rolování — jinak se při tažení roluje stránka. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    opacity: 0;
}

.s-bunka:hover > .pb-sirka-uchyt,
.s-bunka:focus-within > .pb-sirka-uchyt,
.pb-ram-bunka.pb-vybrano > .pb-sirka-uchyt,
.pb-sirka-tahne > .pb-sirka-uchyt { opacity: 1; }

/* Na dotyku není najetí — tam musí být vidět pořád. */
@media (hover: none) {
    .pb-sirka-uchyt { opacity: 1; }
}

.pb-sirka-tahne {
    outline: 2px dashed var(--bunka, #1d4ed8);
    outline-offset: -2px;
}

/* **Nápověda pod rozbalením.**

   ⛔ **Není to schovávání, je to pořadí.** Uživatel 28. 8. 2026: *„vysvětlování
   většinou u pracovního nástroje, kde se práce opakuje, není třeba."* Text,
   který je pro první seznámení, tedy zůstává dostupný — jen nestojí mezi
   člověkem a prací. **Popisky polí se takhle neschovávají**: bez nich by
   z formuláře byla hádanka.

   Zkouška, podle které se to třídilo: **obstojí ta věta ještě při třetím
   použití?** */
.napoveda > summary {
    cursor: pointer;
    /* Terč pro palec i tady — rozbalovátko je ovládací prvek jako každý jiný. */
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--popisek);
}

.napoveda > summary::marker { color: var(--popisek); }
.napoveda[open] > summary { margin-bottom: 4px; }

/* **Výběr fotek k mazání.**

   ⛔ **Zaškrtávátko sedí v rohu, ne přes celou dlaždici.** Ve frontě příjmu je
   přes celý náhled, protože tam se nic nepřetahuje — tady by se pralo
   s tažením, které se spouští podržením prstu na fotce. Terč má i tak 44 px,
   jen nezabírá plochu, kterou potřebuje jiné gesto. */
.gal-vyber {
    grid-area: vrstva;
    justify-self: start;
    align-self: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    /* Nad fotkou, pod ovládací lištou — lišta má svoje terče a nesmí je ztratit. */
    z-index: 1;
}

.gal-vyber input {
    /* Vlastní vzhled: systémové zaškrtávátko je na fotce špatně vidět. */
    position: absolute;
    opacity: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    cursor: pointer;
}

.gal-vyber-znacka {
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    border-radius: 4px;
    background: rgba(0, 0, 0, .45);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

.gal-vyber input:checked ~ .gal-vyber-znacka {
    background: var(--stav-uspech, #3f5a0c);
    border-color: #fff;
}

/* Zaškrtnutá fotka musí být poznat i bez dívání se do rohu. */
.por-dlazdice:has(.gal-vyber input:checked) {
    outline: 3px solid var(--stav-uspech, #3f5a0c);
    outline-offset: -3px;
}

.gal-vyber input:focus-visible ~ .gal-vyber-znacka {
    outline: 3px solid var(--ohnisko, #0e6b74);
    outline-offset: 2px;
}

.gal-vyber-akce { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ⛔ **Když je rozbalené „⋯", zaškrtávátko se schová.**

   Nabídka se otevírá **přes celou dlaždici** (`inset: 0`), kdežto zaškrtávátko
   sedí v jejím levém horním rohu — a leželo by **nad ní**. Klepnutí na první
   položku nabídky by tak spolklo. Změřeno: test na přerovnání šipkou skončil
   čekáním na načtení, které nikdy nepřišlo. */
.por-dlazdice:has(.gal-vic[open]) .gal-vyber { display: none; }

/* ⛔ **Rozbalená nabídka musí být nad vším okolo, ne jen nad dlaždicí.**

   Nabídka se otevírá i **nad horní okraj dlaždice** — a jakmile nad mřížkou
   přibyla rozbalovací nápověda (28. 8. 2026), její `<summary>` začal
   překrývat první položku nabídky. Změřeno, ne dovozeno: Playwright hlásil
   „<summary class="drobne"> … intercepts pointer events" a `elementFromPoint`
   na tlačítku „později →" vracel `.drobne`.

   Dlaždice je položka mřížky, takže `z-index` na ní funguje i bez
   `position` — a platí **jen po dobu, co je nabídka otevřená**. */
.por-dlazdice:has(.gal-vic[open]) { z-index: 3; }

/* Náhledy na potvrzovací stránce — ať je vidět, co zmizí. */
.smaz-nahledy {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.smaz-nahledy img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* ⛔ **Jen po dobu tahu.** Natrvalo tu `touch-action: none` už jednou bylo
   a nad mřížkou se nedalo rolovat (viz hlavička `prerovnani.js`). Tady platí
   od chvíle, kdy člověk chytil úchyt, do puštění — mezitím rolovat nechce. */
.por-mrizka.por-tahne { touch-action: none; }

/* ⛔ **Nabitý tah musí být vidět, jinak je podržení k ničemu.**

   Tah se prstem spouští **podržením** (400 ms) a člověk nemá jak poznat, že
   už drží dost dlouho — pustí o půl vteřiny dřív a nahlásí „nejde to".
   Proto se dlaždice v ten okamžik **zvedne**: povyroste, dostane stín a jde
   nad sousedy. Je to jediná zpětná vazba, kterou v ten moment má.

   ⚠️ **Ne průhlednost.** Ta se používala jako „duch na původním místě",
   jenže tažená dlaždice je pod prstem ta jediná, na kterou se člověk dívá —
   vybledlá vypadá jako zakázaná, ne jako zvednutá. */
.por-dlazdice.por-tazena {
    cursor: grabbing;
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    outline: 2px solid var(--text-tvrdy);
    z-index: 2;
    transition: box-shadow .12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .por-dlazdice.por-tazena { transform: none; }
}

/* Ohnisko z klávesnice musí být vidět stejně dobře jako tažení myší. */
.por-dlazdice:focus-visible {
    outline: 2px solid var(--text-tvrdy);
    outline-offset: 2px;
}

/* Úchyt: jediné místo dlaždice, kde si gesto bereme.
   ------------------------------------------------------------------------
   ⛔ **Vzniklo z měření, ne z vkusu.** Nad dlaždicí musí jít rolovat (u delší
   galerie je dlaždicí 82 % obrazovky) a rolování se svislým tažením vylučuje —
   s `pan-y` si prohlížeč svislé gesto vzal a přesun o řádek níž přestal jít.
   Úchyt ty dvě plochy odděluje. Viz rozbor v `js/prerovnani.js`. */



/* Rozcestník galerií — karta s obálkou místo řádku tabulky.
   ------------------------------------------------------------------------
   Galerie se hledá okem, ne čtením: první fotka je název, který nelže. */
.gal-rozcestnik {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 14px;
    list-style: none;
    margin: 18px 0;
    padding: 0;
}

.gal-rozcestnik li { margin: 0; }

.gal-karta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid var(--ramecek);
    background: var(--plocha);
    padding: 0 0 10px;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.gal-karta:hover,
.gal-karta:focus-visible { border-color: var(--text-tvrdy); }

.gal-obalka {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin-bottom: 7px;
}

/* Prázdná galerie nemá co ukázat — ale musí zabrat totéž místo, jinak
   mřížka poskakuje. */
.gal-obalka-prazdna {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    background: var(--plocha-2, #f2f3f5);
    color: var(--neaktivni-2, #98a0aa);
    font-size: 28px;
    line-height: 1;
}

.gal-karta-nazev {
    font-weight: 700;
    padding: 0 10px;
}

.gal-karta .drobne { padding: 0 10px; }

/* ⛔ **Na telefonu je karta na šířku, ne na výšku.**

   Návrh sliboval, že se na obrazovku vejde **víc galerií než dnešních devět**.
   Svislá karta s obálkou 3:2 zabere na 390 px kolem 250 px, takže se vešly
   tři — tedy míň než tabulka, kterou nahradila. Změřeno na snímku, ne
   odhadnuto.

   Vodorovná podoba drží obojí: náhled zůstane (galerie se hledá okem)
   a řádek má kolem 80 px, takže jich je vidět osm. */
@media (max-width: 560px) {
    .gal-rozcestnik { grid-template-columns: 1fr; gap: 8px; }

    .gal-karta {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        align-items: center;
        column-gap: 10px;
        padding: 0;
    }

    .gal-obalka,
    .gal-obalka-prazdna {
        grid-row: 1 / 4;
        aspect-ratio: 1 / 1;
        margin: 0;
        height: 72px;
    }

    .gal-karta-nazev { padding: 6px 8px 0 0; align-self: end; }
    .gal-karta .drobne { padding: 0 8px 0 0; }
    .gal-karta .drobne:last-child { padding-bottom: 6px; align-self: start; }
}

/* Přepnutí režimu editoru — patří k němu, ne do pruhu s nadpisem. */
.ed-rezim { margin: 0 0 10px; }

/* Ovládání na dlaždici galerie
   ------------------------------------------------------------------------
   Uživatel 27. 8. 2026: *„na fotce umožnil otevřít editační formulář, kde
   můžeme vyplňovat například alt."* Ikony jsou **dvě, ne pět**: na telefon
   se vejdou dva sloupce a dlaždice má kolem 180 px. Zbytek je pod „⋯". */
/* ⛔ **Lišta není `position: absolute`** — kdyby byla, stala by se vztažným
   bodem pro rozbalené „⋯" a nabídka by se měřila od ní místo od dlaždice.
   V běžném toku sedí nahoře sama od sebe, protože obrázek je pod ní. */
/* Lišta je **další vrstva téže buňky**, ne pozicovaný prvek — viz rozbor
   u `.por-dlazdice`. Kdyby byla pozicovaná, měřilo by se od ní rozbalené „⋯". */
.gal-lista {
    grid-area: vrstva;
    align-self: start;
    justify-self: end;
    display: flex;
    gap: 2px;
}

.gal-ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44 px je Applem doporučená minimální plocha a WCAG 2.5.5 chce totéž. */
    min-width: 44px;
    min-height: 44px;
    font-size: 17px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    text-decoration: none;
    cursor: pointer;
    border: 0;
    list-style: none;      /* summary bez trojúhelníčku */
}

.gal-ikona::-webkit-details-marker { display: none; }

.gal-ikona:hover,
.gal-ikona:focus-visible { background: rgba(0, 0, 0, .85); }

.gal-vic { position: static; }

/* ⛔ **Rozbalené „⋯" překryje dlaždici, ne okolí.**

   Na telefonu se 27. 8. 2026 nabídka u spodního okraje otevírala dolů, kam
   se nedalo dostat — uživatel: „na mobilu když dám tři tečky u menu entity,
   tak se mi rozbaluje směrem dolů, kam se nedá dostat." V pagebuilderu se to
   spravilo otevíráním nahoru, jenže v mřížce není „nahoru" ani „dolů"
   bezpečné: dlaždice jsou nad sebou i vedle sebe.

   Překryv uvnitř dlaždice nemůže odejít z obrazovky nikdy, protože nikdy
   neopustí dlaždici. */
.gal-vic-obsah {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    color: #fff;
    padding: 6px;
    display: flex;
    flex-direction: column;
    /* ⛔ **`safe center`, ne `center`.** Když je obsah nabídky vyšší než
       dlaždice, obyčejné centrování ho **vysune ven na obě strany** — a část
       tlačítek skončí nad dlaždicí, kde je překryje cokoli, co je nad mřížkou.
       `safe` v takovém případě zarovná na začátek a `overflow-y` se postará
       o zbytek.

       Změřeno 29. 8. 2026 u vzorníkové galerie, kde dlaždice nemá pevný poměr
       stran a u malé fotky vyjde nízká: `elementFromPoint` na tlačítku
       „později →" vracel `<summary>` nastavení galerie, tedy prvek **nad
       mřížkou**. Do té doby to bylo skryté tím, co zrovna leželo výš. */
    justify-content: safe center;
    gap: 6px;
    overflow-y: auto;
    z-index: 2;
}

.gal-vic-akce {
    display: flex;
    gap: 4px;
}

.gal-tlacitko {
    flex: 1 1 auto;
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    padding: 4px 6px;
    cursor: pointer;
}

.gal-tlacitko:hover:not(:disabled),
.gal-tlacitko:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .12); }

.gal-tlacitko:disabled { opacity: .4; cursor: default; }

.gal-smaz { border-color: rgba(255, 160, 150, .7); color: #ffb4ab; }



/* Obrazovka jednoho obrázku — náhled a formulář vedle sebe, na úzkém pod sebou. */
.obr-uprava {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 18px;
}

.obr-uprava-nahled {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ramecek);
}

@media (max-width: 640px) {
    .obr-uprava { grid-template-columns: 1fr; }
}

.por-chyba {
    color: var(--stav-chyba);
}

/* Prstem se malá dlaždice špatně chytá; na dotyku se zvětší. */
@media (pointer: coarse) {
    .por-mrizka {
        grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    }
}

/* Cesta dovnitř prázdného kontejneru.
   ------------------------------------------------------------------------
   Od 26. 8. 2026 kostra do vyprázdněné buňky nic nedoplňuje — smazání
   posledního prvku se respektuje. Bez tohohle tlačítka by byla prázdná buňka
   slepá ulička: ＋ v liště vytváří sourozence, ne dítě.

   ⛔ **Není to návrat vkládacích ploch.** Ty byly *mezi* prvky a všude; tohle
   je *uvnitř* prázdného kontejneru a nikde jinde.

   Zároveň tím prázdný kontejner dostane **velikost** — z dobrého důvodu, ne
   kvůli vzhledu. Bez ní není co obtáhnout rámečkem a ovládání zhasne přesně
   tam, kde je jediné potřeba. */
.pb-dovnitr {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    padding: 12px;
}

.pb-dovnitr button {
    border: 1px dashed var(--neaktivni);
    background: transparent;
    color: var(--popisek);
    font-family: inherit;
    font-size: 14px;
    padding: 10px 16px;
    cursor: pointer;
    width: 100%;
}

.pb-dovnitr button:hover,
.pb-dovnitr button:focus-visible {
    border-color: var(--text);
    color: var(--text);
}

/* Prstem se do nízkého tlačítka netrefí. */
@media (pointer: coarse) {
    .pb-dovnitr button { min-height: 44px; }
}

/* Prstem se do nízkého prvku netrefí — v pruhu nad plátnem to platí stejně
   jako v liště u prvku. */
@media (pointer: coarse) {
    .pb-hlava-tlacitko,
    .pb-volba,
    .pb-sirka select { min-height: 44px; }
}

/* Listování galerie na webu.
   ------------------------------------------------------------------------
   ⭐ **Odkazy, ne tlačítka** — listuje se bez JavaScriptu, z klávesnice
   i tlačítkem zpět.

   ⛔ **44 px terč.** Čísla stránek jsou na telefonu to nejmenší, do čeho se
   dá trefit; Apple i WCAG 2.5.5 chtějí 44 px. */
.s-strany {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 14px 0 4px;
}

.s-strana {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--ramecek, #d4d4d8);
    border-radius: 6px;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

/* Kde jsem. Bez toho se v deseti číslech nedá poznat, která strana je vidět —
   a to je jediná informace, kterou ten pruh nese navíc k odkazům. */
.s-strana-tady {
    font-weight: 700;
    border-color: currentColor;
    cursor: default;
}

/* ============================================================================
   ZÁKAZNICKÝ WEB — font-varianta (Playfair Display nadpisy + Plus Jakarta Sans
   text + zlatý akcent). User pick potvrzen 12. 9. 2026.
   ----------------------------------------------------------------------------
   ⛔ Scoped na `body.eshop` (CONTAIN — jen eshop, ne `.verejna`!). Rozhodnutí
   usera/teamleadera 13. 9.: staging přebarví JEN eshop; **živá CMS homepage
   (`.verejna` bez `.eshop`) zůstává na Lato/monochromu BEZE ZMĚNY**. Marker
   `.eshop`: zaklad.twig (storefront) vždy; nahled-ram podmíněně dle signálu
   z Verejne (eshop stránky). Fonty: dočasně Google Fonts, pre-launch self-host
   woff2 do /fonts. (Pozn.: `.verejna .obsah` šířka výše je nezávislá, zůstává.)
   ========================================================================== */

:root {
    --serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --sans-jakarta: "Plus Jakarta Sans", -apple-system, "Segoe UI", Arial, sans-serif;
    --zlata: #b08830;
    --zlata-tmava: #957123;
    --zlata-plocha: #fcf0da;
    --krem: #faf7f2;
    /* CTA (schváleno userem 15. 9.): ztmavená zlatá + bílý text, ověřené AA ≥4,5:1.
       Značková --zlata (#b08830) zůstává akcentová/linková + zlatý text v nadpisech. */
    --cta: #92701c;         /* primár, bílý text = AA 4,61 */
    --cta-hover: #856019;   /* AA 5,70 */
    --cta-active: #785915;  /* AA 6,48 */
}

/* Site-wide písmo zákaznického webu: text Jakarta, nadpisy Playfair. */
.eshop { font-family: var(--sans-jakarta); }
/* Gradovaná typografická škála (design polish 15. 9.) — Playfair, modular ratio √2.
   Titulek stránky ≫ sekce > podsekce > karta (fixuje h1==h2 splývání). Váhy INVERZNĚ
   (velké lehčí = Didone hairline eleganci; malé těžší = čitelnost) + tonální krok
   (h1 #000 vs sekce/podsekce #222). Scoped na .eshop = admin/editor beze změny. */
.eshop h1, .eshop h2, .eshop h3 { font-family: var(--serif); }
.eshop h1 {
	font-size: clamp(32px, 4.5vw + 10px, 45px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--text-tvrdy);
}
.eshop h2,
.eshop .nadpis-sekce,
.eshop .s-sekce-nadpis {
	font-size: clamp(26px, 3vw + 9px, 34px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--text);
}
.eshop h3 {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--text);
}
.eshop .produkt-karta__nazev,
.eshop .s-dlazdice-nazev {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text);
}
.eshop .kurz { font-style: italic; font-weight: 500; color: var(--zlata); }

/* --- STOREFRONT HLAVIČKA (eshop) — sdílený partial _casti/eshop-hlavicka.twig --- */
/* Logo + nav (kořenové kategorie) + hledání + košík. eshop-scoped (CONTAIN):
   include jen na body.eshop; CMS/admin drží svou logo-only .hlavicka.
   Šířka + odsazení jako `.verejna .obsah` (1200 px / 24 px), ať hlavička lícuje s obsahem. */
.hlavicka-obchod { position: relative; display: flex; align-items: center; gap: 26px; max-width: 1200px; margin: 0 auto; padding: 16px 24px; border-bottom: 1px solid var(--linka); }
.hlavicka-obchod__znacka { flex: none; line-height: 0; }
.hlavicka-obchod__znacka img { display: block; width: 128px; height: 61px; }
.hlavicka-obchod__nav { display: flex; gap: 26px; flex: 1; flex-wrap: wrap; }
.hlavicka-obchod__nav a { font-family: var(--sans-jakarta); font-size: 14px; font-weight: 500; text-decoration: none; color: var(--text); padding-bottom: 3px; border-bottom: 2px solid transparent; transition: border-color .2s ease, color .2s ease; }
.hlavicka-obchod__nav a:hover { border-bottom-color: var(--zlata); }
.hlavicka-obchod__nav a.tady { border-bottom-color: var(--zlata); color: var(--text-tvrdy); }
.hlavicka-obchod__nastroje { display: flex; align-items: center; gap: 20px; flex: none; margin-left: auto; }
.hlavicka-obchod__nastroje a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-tvrdy); font-family: var(--sans-jakarta); font-size: 14px; font-weight: 500; transition: color .2s ease; }
.hlavicka-obchod__nastroje a:hover { color: var(--zlata-tmava); }
.hlavicka-obchod__nastroje svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Mobilní hamburger (bez JS, <details>) — na desktopu skrytý; nav se skryje, menu se otevře pod hlavičkou. */
.hlavicka-obchod__mobil { display: none; }
@media (max-width: 760px) {
	/* Mobil: menší vodorovná stopa — úzký padding + gap, ať se logo+nástroje+hamburger
	   vejdou i na 360px (dřív flex nowrap přetékal; icons-only ≤560 níž ubere text). */
	.hlavicka-obchod { gap: 12px; padding-left: 12px; padding-right: 12px; }
	.hlavicka-obchod__nastroje { gap: 14px; }
	.hlavicka-obchod__nav { display: none; }
	.hlavicka-obchod__mobil { display: block; flex: none; margin-left: 8px; }
	.hlavicka-obchod__mobil > summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
	.hlavicka-obchod__mobil > summary::-webkit-details-marker { display: none; }
	.hlavicka-obchod__mobil > summary span { display: block; width: 22px; height: 2px; background: var(--text-tvrdy); }
	.hlavicka-obchod__mobil-nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; display: flex; flex-direction: column; background: #fff; border-bottom: 1px solid var(--linka); padding: 6px 24px 14px; box-shadow: 0 8px 16px rgba(0,0,0,.06); }
	.hlavicka-obchod__mobil-nav a { padding: 12px 0; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--linka); }
	.hlavicka-obchod__mobil-nav a:last-child { border-bottom: none; }
}
@media (max-width: 560px) {
	/* Telefony: nástroje jen ikony (text „Přihlásit"/„Košík (N)" pryč) — hlavní úspora
	   šířky. Nad 560px se plný text ještě vejde (menší padding/gap výš), proto až tady. */
	.hlavicka-obchod__kosik-text,
	.hlavicka-obchod__ucet-text { display: none; }
}

/* --- HERO: dvě layout varianty (komponenta) --- */
/* split: fotka 1/2 + text 1/2 */
.s-hero-split { background: var(--krem); }
/* Eyebrow (štítek nad nadpisem) — plain ZLATÝ text VERZÁLKAMI (jako návrh font-varianty).
   ⛔ Bez symbolů: v4 námitka mířila na eyebrow SYMBOLY (medaile/sparkle), ne na text. */
.s-hero-split__eyebrow, .s-hero-banner__eyebrow { font-family: var(--sans-jakarta); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 16px; }
.s-hero-split__eyebrow { color: var(--zlata-tmava); }             /* na krému tmavá zlatá */
.s-hero-banner__eyebrow { color: #f0dca6; position: relative; z-index: 1; }  /* na scrim světlá zlatá (jako návrh .hb-text .eyebrow) */
.s-hero-split__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
/* text-align:left téže příčiny jako u banneru (dole): h2 dědí globální center;
   split je grid s textem v levém sloupci (eyebrow/perex left) → nadpis MUSÍ left. */
.s-hero-split__nadpis { font-size: clamp(36px, 6vw, 66px); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 20px; text-align: left; }
.s-hero-split__perex { font-size: clamp(16px, 2.2vw, 19px); line-height: 1.6; font-weight: 300; color: var(--text); max-width: 46ch; margin: 0 0 28px; }
.s-hero-split__foto { aspect-ratio: 4/5; overflow: hidden; background: #fff; }
.s-hero-split__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* banner: fotka přes celou šířku obsahu + překrytý text (scrim pro čitelnost) */
/* Banner = edge-to-edge (user 12.9.): breakout z content-width buňky na plný
   viewport. ⚠️ Předpoklad: žádný předek na cestě (main/sekce/buňka) nemá
   `overflow:hidden`, jinak se ořízne — pak je to strukturální limit layoutu. */
.s-hero-banner { position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: clamp(360px, 48vw, 520px); display: flex; align-items: center; overflow: hidden; background: var(--krem); }
.s-hero-banner__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-hero-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,10,.62), rgba(20,16,10,.2) 62%, rgba(20,16,10,0)); }
/* Text zarovnaný na content-width (1200 + 24px gutter) jako hlavička/sekce —
   dřív inset 56px (víc než hlavička) → nelícoval. Vertikálně centruje flex + min-height. */
.s-hero-banner__text { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; color: #fff; }
/* ⛔ Selektor MUSÍ přebít `.eshop h2` (výš: color:var(--text-tvrdy), specificita 0,1,1).
   `.s-hero-banner__nadpis` sám (0,1,0) prohrával → nadpis banneru byl na fotce ČERNÝ
   místo bílého (chyceno qlmanage renderem 13.9.; perex byl světlý, protože na <p>
   žádné `.eshop`-pravidlo necílí). `.s-hero-banner .…__nadpis` = 0,2,0 → vyhrává. */
/* ⛔ text-align:left MUSÍ přebít globální `h1,h2 { text-align:center }` (ř. ~146,
   spec. 0,0,1) — hero nadpis je h2, bez override dědil CENTER → krátký zlatý akcent
   („stylově") se vycentroval na 2. řádku = „odskočení" (user prod 14.9.). Selektor
   `.s-hero-banner .…__nadpis` = 0,2,0 → vyhrává. ⛝ NEcentruj hero (sekční hlavy
   `.s-sekce-hlava` center ZŮSTÁVAJÍ dle designu). */
.s-hero-banner .s-hero-banner__nadpis { color: #fff; font-size: clamp(34px, 6vw, 62px); line-height: 1.05; margin: 0 0 18px; max-width: 20ch; text-align: left; }
.s-hero-banner__perex { color: #f3ece1; max-width: 44ch; margin: 0 0 26px; font-weight: 300; }
.s-hero-banner__text .kurz { color: #f0dca6; }
.s-hero-banner__text .tlacitko { background: #fff; color: var(--text-tvrdy); border-color: #fff; }
.s-hero-banner__text .tlacitko:hover { background: #f2ebdf; color: var(--text-tvrdy); border-color: #f2ebdf; }
.s-hero-banner__text .tlacitko:focus-visible { box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 0 4px #fff; }

/* --- PŘEDNOSTI --- */
.s-prednosti-mrizka { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 34px); }
.s-prednost-ikona { width: 52px; height: 52px; border-radius: 14px; background: var(--zlata-plocha); color: var(--zlata-tmava); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.s-prednost-ikona svg { width: 26px; height: 26px; }
.s-prednost-nadpis { font-size: 23px; line-height: 1.2; margin: 0 0 10px; }
.s-prednost-text { margin: 0; color: var(--popisek); font-size: 15px; line-height: 1.6; }

/* --- Sekční nadpis (vitrína / dlaždice) --- */
/* --- Hlava showcase sekce: zlatý eyebrow + Playfair nadpis (se zlatým kurz akcentem) + podnadpis --- */
.s-sekce-blok { padding-block: clamp(48px, 7vw, 78px); }
/* Krémová sekce full-bleed: ::before přes 100vw ZA obsahem (obsah zůstane zarovnaný s ostatními,
   ⛔ NE breakout obsahu). isolation: izoluje z-index, aby ::before nešel za pozadí stránky. */
.s-sekce-blok--krem { position: relative; isolation: isolate; }
.s-sekce-blok--krem::before { content: ""; position: absolute; z-index: -1; inset-block: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: var(--krem); border-block: 1px solid var(--linka); }
.s-sekce-hlava { text-align: center; max-width: 60ch; margin: 0 auto clamp(28px, 4vw, 40px); }
.s-sekce-eyebrow { font-family: var(--sans-jakarta); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--zlata-tmava); margin: 0 0 14px; }
.s-sekce-nadpis { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 4vw, 44px); line-height: 1.12; color: var(--text-tvrdy); margin: 0; }
.s-sekce-podnadpis { font-family: var(--sans-jakarta); font-size: clamp(15px, 2vw, 18px); line-height: 1.6; color: var(--text); margin: 14px auto 0; max-width: 46ch; }
.s-sekce-cta { text-align: center; margin: clamp(28px, 4vw, 40px) 0 0; }

/* --- Storefront patička (eshop) — sdílený partial _casti/eshop-pata.twig --- */
.pata-obchod { border-top: 1px solid var(--linka); padding-block: clamp(32px, 5vw, 48px); }
.pata-obchod__in { max-width: 1200px; margin: 0 auto; padding-inline: 24px; text-align: center; }
.pata-obchod__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 0 0 16px; }
.pata-obchod__nav a { font-family: var(--sans-jakarta); font-size: 14px; font-weight: 500; text-decoration: none; color: var(--text); }
.pata-obchod__nav a:hover { color: var(--zlata-tmava); }
.pata-obchod__copy { font-family: var(--sans-jakarta); font-size: 13px; color: var(--popisek); margin: 0; }

/* --- VITRÍNA + sdílená KARTA PRODUKTU --- */
.s-vitrina-mrizka { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 34px); }
.produkt-karta { text-align: center; }
.produkt-karta__odkaz { display: block; text-decoration: none; color: inherit; }
.produkt-karta__obr { display: block; aspect-ratio: 1/1; overflow: hidden; background: #f4f2ee; }
.produkt-karta__obr img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.produkt-karta__odkaz:hover .produkt-karta__obr img { transform: scale(1.04); }
.produkt-karta__nazev { display: block; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.3; margin-top: 14px; color: var(--text-tvrdy); }
.produkt-karta__odkaz:hover .produkt-karta__nazev { color: var(--zlata-tmava); }
.produkt-karta__cena { font-weight: 700; font-size: 17px; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.produkt-karta__od { font-weight: 400; color: var(--popisek); }
.produkt-karta__stav { font-size: 13px; color: var(--popisek); margin: 4px 0 0; }
.produkt-karta__stav--skladem { color: var(--stav-uspech, #4a7c59); }

/* --- DLAŽDICE KATEGORIÍ (text-only v1) --- */
.s-dlazdice-mrizka { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.s-dlazdice { display: flex; align-items: center; justify-content: center; min-height: 118px; padding: 24px; text-align: center; text-decoration: none; color: var(--text-tvrdy); background: var(--krem); border: 1px solid var(--linka); transition: border-color .2s ease, color .2s ease; }
.s-dlazdice:hover { border-color: var(--zlata); color: var(--zlata-tmava); }
.s-dlazdice-nazev { font-family: var(--serif); font-size: 20px; font-weight: 500; }

/* --- Mobil --- */
@media (max-width: 900px) {
    .s-hero-split__in { grid-template-columns: 1fr; gap: 28px; }
    /* Banner na mobilu: horizontální pozice ořezu z adminu (obsah.mobil_pozice_x). */
    .s-hero-banner__foto { object-position: var(--mobil-x, 50%) center; }
    .s-prednosti-mrizka { grid-template-columns: 1fr; text-align: center; gap: 44px; }
    .s-prednost-ikona { margin-left: auto; margin-right: auto; }
    .s-vitrina-mrizka { grid-template-columns: repeat(2, 1fr); }
    .s-dlazdice-mrizka { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================================
   E4 — ADMIN OBJEDNÁVKY: stavové štítky, přechody, rekapitulace dokladu,
   adresy, historie, filtr. Rekapitulace `.objednavka` je sdílená s frontend
   potvrzením (objednavka-prijato). Neplátce → doklad bez rozpadu DPH.
   =========================================================================== */
.stav-stitek {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eef1f4;
    color: #5a6b7b;
    white-space: nowrap;
}
.stav-stitek--ceka     { background: #fbf1dd; color: #a86a00; }
.stav-stitek--zaplac   { background: #e8f0fb; color: #1a5fb4; }
.stav-stitek--priprava { background: #e8f0fb; color: #1a5fb4; }
.stav-stitek--odeslano { background: #e8f0fb; color: #1a5fb4; }
.stav-stitek--doruceno { background: #e6f4ec; color: #178a4c; }
.stav-stitek--storno   { background: #f2f2f2; color: #8a8a8a; }
/* odvozený stav reklamace/vratky na objednávce (§9, ReklamaceZobrazeni) — zlatá = otevřená
   reklamace (jako .reklamace-stav--uplatnena), fialová = částečně vráceno, šedá = vráceno
   (tmavší text než --storno kvůli kontrastu) */
.stav-stitek--reklamace        { background: var(--zlata-plocha); color: var(--zlata-tmava); }
.stav-stitek--castecne-vraceno { background: #f3eefb; color: #5b3a8c; }
.stav-stitek--vraceno          { background: #f2f2f2; color: #5f5f5f; }

.tlacitko.varovne { background: #fff; color: #b3261e; border-color: #e6b4af; }
.tlacitko.varovne:hover { background: #fbeceb; border-color: #b3261e; }

/* Filtr stavů = „pilulky" (vzhled sladěn s turnajbot filtrem odpovědí, user 14.9.):
   neaktivní bílá + šedý text + rámeček, aktivní tmavá výplň. Počet ztlumený. */
.objednavky-filtr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stav-chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
	border: 1px solid #d1d5d6; background: #fff; color: #5a6470;
	border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.stav-chip:hover { border-color: #9aa2ab; color: #1c2027; }
.stav-chip.je-aktivni { background: #1c2027; border-color: #1c2027; color: #fff; }
.stav-chip__pocet { font-variant-numeric: tabular-nums; font-weight: 400; opacity: .7; }
.stav-chip.je-aktivni .stav-chip__pocet { opacity: .85; }

.objednavka-prechody { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.objednavka-prechod { margin: 0; }

/* Admin VÝPIS objednávek = standardní tabulka (selektor table.objednavky-vypis).
   ⚠ Třídu .objednavky-vypis sdílí i ZÁKAZNICKÝ výpis v účtu — tam je to <ul> karet
   s display:grid (viz blok „historie objednávek" níže). Grid z karet jinak přebije
   table-layout admin tabulky → sloupce slepené. Proto: admin pravidla scope na table.,
   kartová na ul. Generické th/td nemají vodorovný padding → gutter doplňujeme tady.
   Sloupce: 1 Číslo · 2 Datum · 3 Zákazník · 4 Platba · 5 Celkem(→vpravo) · 6 Stav.
   (user 14.9.: čitelná mezera mezi Celkem a Stav — gutter + jemný oddělovač.) */
table.objednavky-vypis { margin-bottom: 18px; }
table.objednavky-vypis th, table.objednavky-vypis td { padding-right: 28px; }
table.objednavky-vypis th:nth-child(5), table.objednavky-vypis td:nth-child(5) { text-align: right; padding-right: 30px; }
table.objednavky-vypis th:nth-child(6), table.objednavky-vypis td:nth-child(6) { padding-right: 0; padding-left: 30px; border-left: 1px solid var(--linka); }
/* Změna stavu z výpisu = klikací dropdown na štítku (user 14.9., nahradil sloupec
   Akce → kompaktnější). Native <details> (bez JS); menu absolutně = nerozhrne řádek. */
.stav-dropdown { display: inline-block; position: relative; }
.stav-dropdown__trigger { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.stav-dropdown__trigger::-webkit-details-marker { display: none; }
.stav-dropdown__sipka { font-size: 10px; color: var(--popisek); }
.stav-dropdown[open] .stav-dropdown__sipka { transform: rotate(180deg); }
.stav-dropdown__menu { position: absolute; z-index: 20; top: calc(100% + 5px); left: 0; min-width: 220px;
	background: #fff; border: 1px solid var(--linka); border-radius: 10px; box-shadow: 0 8px 24px rgba(20,22,28,.14); padding: 6px; }
.stav-dropdown__hlava { margin: 4px 8px 6px; font-size: 12px; color: var(--popisek); }
.stav-dropdown__polozka { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
	padding: 8px 10px; border-radius: 6px; font-size: 13.5px; color: var(--text); }
.stav-dropdown__polozka:hover { background: #f4f6f8; }
.stav-dropdown__polozka.varovne { color: #b3261e; }
.stav-dropdown__polozka.varovne:hover { background: #fbeceb; }

table.objednavka { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 14px; }
table.objednavka th,
table.objednavka td { border-bottom: 1px solid var(--linka); padding: 9px 10px; text-align: left; vertical-align: top; }
table.objednavka thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--popisek); }
/* Hlavičky s částkami (Cena za kus / Celkem = th.vpravo) VPRAVO — admin detail objednávky
   lícují se svými hodnotami (#9, Martin). `table.objednavka th` (0,1,1) jinak přebíjí `.vpravo`
   (0,1,0) → hlavička zůstala vlevo (stejný případ jako košík #4). Storefront hlavičky `.vpravo` nemají → bez dopadu. */
table.objednavka thead th.vpravo { text-align: right; }
table.objednavka .cena { text-align: right; white-space: nowrap; }
table.objednavka tfoot th { font-weight: 600; }
/* Součtový řádek (Celkem) výraznější — admin detail objednávky (#9, Martin: à la košík #4).
   Base = admin kontext; storefront (`.objednavka__polozky`) přebíjí níž na 13px (#8 děkovačka). */
table.objednavka tfoot tr:last-child th,
table.objednavka tfoot tr:last-child td { border-bottom: none; font-size: 19px; }
/* Děkovačka / historie účtu: celková částka MENŠÍ než položky (#8, Martin) — objednávka je
   dokončená, zvýrazněné jsou položky. Scoped na storefront `.objednavka__polozky` (admin beze změny). */
.objednavka__polozky table.objednavka tfoot tr:last-child th,
.objednavka__polozky table.objednavka tfoot tr:last-child td { font-size: 13px; font-weight: 400; }
/* Řádkové částky (dílčí ceny Cena za kus/Celkem + doprava) MENŠÍ než součet — silnější hierarchie
   (#9 tweak, Martin): dílčí ceny ↓, „Celkem" součet ↑ (19px výš). Admin-only (`.obsah-admin` →
   storefront děkovačka/účet beze změny). Doprava-řádek konzistentní s řádkovými cenami. */
.obsah-admin table.objednavka tbody td.cena,
.obsah-admin table.objednavka tfoot tr:not(:last-child) td.cena { font-size: 13px; }

/* #1 T4 — admin výpis produktů responsivní: table→karty na mobilu. Scope `.obsah-admin .admin-prehled`
   (desktop beze změny, ostatní admin tabulky netknuté). Popisky sloupců přes ::before (stabilní pořadí). */
@media (max-width: 768px) {
    .obsah-admin .admin-prehled thead { display: none; }
    .obsah-admin .admin-prehled,
    .obsah-admin .admin-prehled tbody,
    .obsah-admin .admin-prehled tr,
    .obsah-admin .admin-prehled td { display: block; }
    .obsah-admin .admin-prehled tbody tr {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--linka);
        border-radius: 8px;
        padding: 12px 14px;
        margin: 0 0 12px;
    }
    .obsah-admin .admin-prehled tbody td { border: 0; padding: 2px 0; text-align: left; }
    .obsah-admin .admin-prehled tbody td:nth-child(2) { order: -1; font-weight: 600; font-size: 15px; margin-bottom: 2px; }
    .obsah-admin .admin-prehled tbody td:nth-child(1)::before { content: "Kód: "; color: var(--popisek); }
    .obsah-admin .admin-prehled tbody td:nth-child(3)::before { content: "Cena: "; color: var(--popisek); }
    .obsah-admin .admin-prehled tbody td:nth-child(4)::before { content: "Variant: "; color: var(--popisek); }
    .obsah-admin .admin-prehled tbody td:nth-child(5)::before { content: "Stav: "; color: var(--popisek); }
    .obsah-admin .admin-prehled tbody td.akce { margin-top: 10px; }
    .obsah-admin .admin-prehled tbody td.akce a { display: inline-block; margin: 0 14px 4px 0; }
}
.objednavka__nazev { display: block; font-weight: 600; }
.objednavka__varianta { display: block; font-size: 13px; color: var(--popisek); }
.objednavka__customizace { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--popisek); }

.objednavka__adresy { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Nadpisy sekcí v detailu objednávky (poděkování / historie účtu) doleva k obsahu —
   globální `h2{text-align:center}` jinak centruje „Kontakt" (full-width) i adresy (Martin). */
.objednavka__polozky h2, .objednavka__adresa h2, .objednavka__kontakt h2 { text-align: left; }
.objednavka__poznamka { padding: 10px 14px; background: #f7f8fa; border-radius: 8px; font-size: 14px; }

table.objednavka-historie { width: 100%; border-collapse: collapse; font-size: 14px; }
table.objednavka-historie td { border-bottom: 1px solid var(--linka); padding: 7px 10px; vertical-align: middle; }
/* Datum (1. sloupec) — tabular-nums + nowrap, ať data svisle lícují ve sloupci (#9, Martin). */
table.objednavka-historie td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 640px) {
    .objednavka__adresy { grid-template-columns: 1fr; }

    /* #8/#9 T3 — děkovačka / historie účtu: 4sloupcová tabulka se na telefon nevejde
       (přetékala, „Celkem" se ořezával) → položky přeskládat do karet. Scoped na storefront
       `.objednavka__polozky` (admin beze změny). Řeší #9 (přetečení + částky vpravo) i #8
       (množství čitelně v řádku + „Celkem k úhradě" zvětšit). data-label v _objednavka-detail.twig. */
    .objednavka__polozky table.objednavka thead { display: none; }
    .objednavka__polozky table.objednavka,
    .objednavka__polozky table.objednavka tbody,
    .objednavka__polozky table.objednavka tfoot,
    .objednavka__polozky table.objednavka tr,
    .objednavka__polozky table.objednavka td,
    .objednavka__polozky table.objednavka th { display: block; }
    .objednavka__polozky table.objednavka tbody tr {
        border: 1px solid var(--linka);
        border-radius: 8px;
        padding: 12px 14px;
        margin: 0 0 12px;
    }
    .objednavka__polozky table.objednavka tbody td { border-bottom: 0; padding: 0; }
    .objednavka__polozky table.objednavka tbody td[data-label] {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        margin-top: 6px;
    }
    .objednavka__polozky table.objednavka tbody td[data-label]::before {
        content: attr(data-label);
        color: var(--popisek);
        font-size: 13px;
    }
    .objednavka__polozky table.objednavka tfoot tr {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 10px 2px 0;
    }
    .objednavka__polozky table.objednavka tfoot th,
    .objednavka__polozky table.objednavka tfoot td { border-bottom: 0; }
    .objednavka__polozky table.objednavka tfoot th { font-weight: 600; }
    .objednavka__polozky table.objednavka tfoot tr:last-child th,
    .objednavka__polozky table.objednavka tfoot tr:last-child td { font-size: 17px; font-weight: 600; }
}

/* =====================================================================
   ÚČET ZÁKAZNÍKA (E5) — centrovaná formulářová karta na storefront systému.
   Reuse `.pole`/`.pole-plne`/`.popisek-pole`/`.tlacitko`; nadpisy dědí `.eshop`
   (font-varianta). ⛝ nový design — konzistence se storefrontem.
   ===================================================================== */
.ucet { max-width: 440px; margin: 0 auto; padding-block: 8px 24px; }
.ucet__nadpis { text-align: center; margin: 0 0 8px; }
.ucet__uvod { text-align: center; color: var(--popisek); margin: 0 0 22px; }
.ucet__pole { margin: 0 0 14px; }
.ucet__pole .popisek-pole { display: block; margin: 0 0 4px; }
.ucet__nepovinne, .ucet__napoveda { color: var(--popisek); font-weight: 400; }
.ucet__pamatuj { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; cursor: pointer; }
.ucet__pamatuj input { width: 16px; height: 16px; accent-color: var(--zlata); flex: 0 0 auto; }
.ucet__napoveda-radek { margin: 0 0 16px 24px; font-size: 13px; color: var(--popisek); }
.ucet__odeslat { width: 100%; margin-top: 6px; }
.ucet__odkaz-dole { text-align: center; margin: 18px 0 0; font-size: 14px; line-height: 1.9; color: var(--popisek); }
.ucet__odkaz-dole a { color: var(--zlata-tmava); }
.ucet--prehled { text-align: center; }
.ucet__odhlaseni { margin-top: 20px; }

/* E5 fáze B — profil, adresář, rozcestník. Reuse .ucet systém. */
.ucet--sirsi { max-width: 560px; }
.ucet__radek { display: flex; gap: 14px; }
.ucet__radek .ucet__pole { flex: 1 1 0; }
.ucet__pole--psc { flex: 0 0 34%; }
@media (max-width: 480px) { .ucet__radek { display: block; } .ucet__pole--psc { flex: none; } }

/* Rozcestník na /ucet (profil / adresy) */
.ucet__rozcestnik { display: grid; gap: 12px; margin: 8px 0 20px; }
.ucet__dlazdice { display: block; padding: 16px 18px; border: 1px solid var(--linka); border-radius: 8px;
    text-decoration: none; color: var(--text); transition: border-color .2s ease; }
.ucet__dlazdice:hover { border-color: var(--zlata); }
.ucet__dlazdice-nadpis { display: block; font-family: var(--sans-jakarta); font-weight: 600; color: var(--text-tvrdy); }
.ucet__dlazdice-popis { display: block; margin-top: 2px; font-size: 13px; color: var(--popisek); }
.ucet__pozdeji { font-size: 13px; }

/* Adresář — seznam uložených adres */
.adresar { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.adresar__polozka { border: 1px solid var(--linka); border-radius: 8px; padding: 14px 16px; }
.adresar__typ { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--zlata-tmava); background: var(--zlata-plocha); border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
.adresar__telo { font-size: 14px; line-height: 1.55; color: var(--text); }
.adresar__ido, .adresar__tel { font-size: 13px; color: var(--popisek); }
.adresar__akce { display: flex; gap: 16px; align-items: center; margin-top: 12px; }
.adresar__akce form { margin: 0; }
.adresar__smaz { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--stav-chyba); cursor: pointer; }
.adresar__smaz:hover { text-decoration: underline; }
.adresar__pridat { text-align: center; margin: 0 0 4px; }

/* E5 fáze C — historie objednávek zákazníka (výpis karet + stránkování).
   ⚠ .objednavky-vypis jako <ul> = karty (grid). Admin výpis používá stejnou třídu
   na <table> (viz „Admin VÝPIS objednávek" výš) → base rule scope na ul., ať
   display:grid nepřebije admin table-layout (jinak sloupce slepené). */
ul.objednavky-vypis { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.objednavky-vypis__odkaz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px;
	padding: 15px 18px; border: 1px solid var(--linka); border-radius: 8px; text-decoration: none; color: var(--text); transition: border-color .2s ease; }
.objednavky-vypis__odkaz:hover { border-color: var(--zlata); }
.objednavky-vypis__hlava { display: flex; flex-direction: column; gap: 2px; }
.objednavky-vypis__cislo { font-family: var(--serif); font-size: 17px; color: var(--text-tvrdy); }
.objednavky-vypis__datum { font-size: 13px; color: var(--popisek); }
.objednavky-vypis__spodek { display: flex; align-items: center; gap: 14px; }
.objednavky-vypis__castka { font-weight: 700; font-variant-numeric: tabular-nums; }
.strankovani { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: 14px; }
.strankovani__odkaz { color: var(--zlata-tmava); text-decoration: none; }
.strankovani__odkaz:hover { text-decoration: underline; }
.strankovani__stav { color: var(--popisek); }

/* E5 fáze C — detail objednávky (hlava; tělo = sdílený .objednavka__* doklad) */
.objednavka-detail { max-width: 720px; }
.objednavka-detail__zpet { margin: 0 0 12px; font-size: 14px; }
.objednavka-detail__zpet a { color: var(--zlata-tmava); text-decoration: none; }
.objednavka-detail__zpet a:hover { text-decoration: underline; }
.objednavka-detail__hlava { margin: 0 0 24px; }
.objednavka-detail__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 6px; }
.objednavka-detail__datum { font-size: 13px; color: var(--popisek); }

/* ===== DESIGN POLISH (15. 9.) — storefront formulářové sekce + odeslání ==========
   Připomínka usera: „extrémně výrazné outline sekce, potlačený obsah uvnitř." Příčina
   = defaultní UA border <fieldset> (app.css mu styl nedával). Fix: rám pryč, legenda =
   typografický nadpis sekce (Playfair, jako storefront) + jemná linka; obsah primární
   (tmavší popisky, definované inputy, zlatý focus). Scope: checkout + produkt (výběr
   varianty). E5 účtové formy fieldset nepoužívají. Admin/CMS-builder mimo. */
.pokladna__formular fieldset,
.produkt-koupit fieldset {
    border: 0;
    margin: 0 0 34px;
    padding: 0;
}
.pokladna__formular legend,
.produkt-koupit legend {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 12px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--linka);
    font-family: var(--serif);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    color: var(--text-tvrdy);
}
.pokladna__formular .popisek-pole {
    color: var(--text);
    font-weight: 500;
    font-size: 13.5px;
}
.pokladna__formular .pole {
    border-color: #d4d4d4;
}
.pokladna__formular .pole:focus {
    border-color: var(--cta);
    box-shadow: 0 0 0 3px rgba(146, 112, 28, .15);
}

/* ===== Pokladna layout (sidesign-ui): desktop = 2 sloupce [formulář | shrnutí bokem],
   adresní fieldy ve 2-sloupcové mřížce, větší spacing pod poli. Mobil = pod sebou. ===== */
.pokladna { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 880px) {
    .pokladna { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 48px; }
    .pokladna__formular { grid-column: 1; grid-row: 1; }
    .pokladna__rekapitulace { grid-column: 2; grid-row: 1; position: sticky; top: 24px; }
}
/* shrnutí objednávky = karta v boku */
.pokladna__rekapitulace { background: var(--krem); border: 1px solid var(--linka); border-radius: 10px; padding: 20px 22px; margin: 0; }
.pokladna__rekapitulace h2 { text-align: left; font-family: var(--serif); font-size: 18px; margin: 0 0 14px; }
.rekapitulace { list-style: none; margin: 0 0 14px; padding: 0; }
.rekapitulace > li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--linka); }
.rekapitulace__nazev { grid-column: 1; }
.rekapitulace__mnozstvi { grid-column: 1; color: var(--popisek); font-size: 13px; }
.rekapitulace .cena { grid-column: 2; grid-row: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rekapitulace__customizace { grid-column: 1 / -1; margin: 4px 0 0; padding-left: 16px; font-size: 13px; color: var(--popisek); }
.rekapitulace__mezisoucet { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; margin: 0 0 6px; }
.pokladna__rekapitulace .drobne { margin: 0; }

/* adresní/kontaktní fieldset = 2-sloupcová mřížka skupin; pole vyplní buňku (⛝ globální 280px cap) */
.pokladna__skupina { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.pokladna__skupina legend { grid-column: 1 / -1; margin-bottom: 4px; }
.pole-skupina { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.pole-skupina--plne { grid-column: 1 / -1; }
.pokladna__formular .pole { max-width: none; }
/* větší spacing pod poli i v NEmřížkových fieldsetech (dřív nalepené na další nadpis) */
.pokladna__formular fieldset:not(.pokladna__skupina) .pole:not(:last-child) { margin-bottom: 20px; }
/* Volba dopravy/platby = řádek na vlastním řádku (dřív inline → cramped); cena vpravo, popis pod. */
.pokladna__formular .volba { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; margin-bottom: 10px; }
.pokladna__formular .volba .cena { margin-left: auto; white-space: nowrap; }
.pokladna__formular .volba .drobne { flex-basis: 100%; color: var(--popisek); }
.pokladna__formular .popisek-volba { margin-bottom: 12px; }
@media (max-width: 879px) {
    .pokladna__skupina { grid-template-columns: 1fr; gap: 18px; }
}

/* Odeslání objednávky: primár stojí sám a prominentně, „Zpět" je podřízený link
   POD ním (⛝ vedle primáru — připomínka usera 15. 9.). */
.pokladna__odeslat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 8px;
}
.pokladna__zpet {
    font-size: 14px;
    color: var(--popisek);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pokladna__zpet:hover {
    color: var(--text);
}

/* E5 fáze E — smazání účtu (destruktivní; znění schválené pravnikem) */
.ucet--smazat { max-width: 620px; text-align: left; }
.ucet--smazat .ucet__nadpis { text-align: left; }
.smazat__seznam { margin: 8px 0 4px; padding-left: 20px; }
.smazat__seznam li { margin: 4px 0; }
.smazat__zakon { font-size: 13px; color: var(--popisek); background: var(--krem); border: 1px solid var(--linka); border-radius: 8px; padding: 10px 14px; margin: 14px 0; }
.smazat__form { margin: 22px 0 0; }
.smazat__odeslat { margin-top: 14px; }
/* „Smazat účet" v rozcestníku — oddělená nebezpečná zóna dole (⛝ mezi běžné dlaždice) */
.ucet__nebezpeci { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--linka); text-align: center; }
.ucet__smazat-odkaz { font-size: 13px; color: var(--popisek); text-decoration: underline; text-underline-offset: 3px; }
.ucet__smazat-odkaz:hover { color: var(--stav-chyba, #b3261e); }
/* E5 fáze D — checkout „Založit účet" (volitelná sekce; pole hesla schovává pokladna.js) */
.pokladna__ucet-pole { margin: 12px 0 0; padding-left: 26px; border-left: 2px solid var(--linka); }

/* #6/#7 Testing-3 — fakturace dědí jméno z kontaktu + přepínače „Nakupuji na firmu" /
   „Doručit na jinou adresu" (storefront tokeny, ⛝ navy z mockupu). Reveal = `hidden` (JS). */
.pokladna__dedi-kontakt { margin: 0; color: var(--popisek); }
.pokladna__dedi-kontakt strong { color: var(--text); font-weight: 600; }
.pokladna__prepinac { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 13px 15px; border: 1px solid var(--linka); border-radius: 8px; background: var(--krem); cursor: pointer; font-size: 14px; color: var(--text); }
.pokladna__prepinac:hover { border-color: var(--zlata); }
.pokladna__prepinac input { flex: 0 0 auto; margin-top: 1px; width: 18px; height: 18px; cursor: pointer; accent-color: var(--zlata); }
.pokladna__prepinac-text { display: flex; flex-direction: column; gap: 2px; }
.pokladna__prepinac-nazev { font-weight: 600; }
.pokladna__dodaci { margin-top: 14px; }
.pokladna__dodaci-info { margin: 10px 0 0; padding: 10px 14px; background: var(--krem); border: 1px solid var(--linka); border-radius: 8px; font-size: 13.5px; color: var(--popisek); }

/* Výdejní místo (Balíkovna) + modál widgetu ČP (pokladna.js). Pozadí modálu tmavé
   bez ohledu na motiv; iframe = oficiální b2c.cpost.cz/locations. */
.pokladna__vydejni-misto .vydejni-misto__vybrano { margin: 0 0 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--zlata); border-radius: 6px; }
.pokladna__vydejni-misto .vydejni-misto__nazev { margin: 0; font-weight: 600; }
/* #4: zřetelné potvrzení výběru výdejního místa (po zavření modalu, hlavně mobil). */
.vydejni-misto__stav { margin: 0 0 4px; color: var(--zlata-tmava); font-weight: 600; font-size: 14px; }
.pokladna__vydejni-misto .vydejni-misto__rucne { margin-top: 8px; }
.rekapitulace__vydejni-misto { margin: 8px 0 0; font-size: 14px; }
.rekapitulace__vydejni-misto span { font-weight: 600; }
body.vm-modal-otevren { overflow: hidden; }
.vm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(8px, 3vw, 32px); background: rgba(24, 20, 16, .72); }
.vm-modal__panel { position: relative; display: flex; flex-direction: column; width: min(960px, 96vw); height: min(88vh, 760px); height: min(88dvh, 760px); background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, .4); }
.vm-modal__zavrit { position: absolute; top: 8px; right: 10px; z-index: 2; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.vm-modal__zavrit:hover { background: rgba(0, 0, 0, .78); }
/* #4: instrukce nad widgetem (výběr je implicitní klik na pobočku) — pravý padding kvůli × tlačítku. */
.vm-modal__info { margin: 0; padding: 11px 48px 11px 14px; background: var(--krem); color: var(--text); font-size: 13px; line-height: 1.45; border-bottom: 1px solid var(--linka); }
.vm-modal__ramec { flex: 1; min-height: 0; }
.vm-modal__iframe { width: 100%; height: 100%; border: 0; display: block; }
/* =====================================================================
   SOUHLAS S COOKIES — lišta + modál (CMP). Eshop-scoped: markup se vkládá
   jen na veřejné eshop stránky (viz cookie-souhlas.twig). Monochrom + zlatý
   akcent jako zbytek eshopu; tlačítka stojí na `.tlacitko` (verzálky) kvůli
   kontinuitě se storefrontem.

   ⛔ „Odmítnout vše" má STEJNOU velikost i váhu jako „Přijmout vše" (jen výplň
      vs. obrys) — stejná vrstva, jeden klik, stejné rozměry = ÚOOÚ/GDPR.
   ===================================================================== */
.cookie-tl { font-size: 13px; padding: 11px 22px; }
/* Odmítnout = obrys, ale IDENTICKÁ geometrie (padding/velikost/váha) → stejná
   viditelnost jako Přijmout. */
.cookie-tl--odmitnout { color: var(--text); background: var(--plocha); }
.cookie-tl--odmitnout:hover { background: var(--plocha); color: var(--text-tvrdy); border-color: var(--text-tvrdy); }
/* „Nastavení" = terciární (ne consent volba, jen víc možností) → smí být decentní. */
.cookie-odkaz { background: none; border: 0; padding: 11px 8px; font: inherit; font-size: 13px;
    color: var(--popisek); text-decoration: underline; cursor: pointer; }
.cookie-odkaz:hover { color: var(--text); }

.cookie-lista { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    background: var(--plocha); border-top: 2px solid var(--zlata); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.10); }
.cookie-lista__in { max-width: 1200px; margin: 0 auto; padding: 16px 24px;
    display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; }
.cookie-lista__text { margin: 0; flex: 1 1 320px; font-family: var(--sans-jakarta);
    font-size: 14px; line-height: 1.5; color: var(--text); }
.cookie-lista__text a { color: var(--zlata-tmava); }
.cookie-lista__akce { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) {
    .cookie-lista__in { padding: 14px 16px; }
    .cookie-lista__akce { width: 100%; }
    .cookie-lista__akce .cookie-tl { flex: 1 1 auto; }
}

.cookie-modal { width: min(520px, calc(100vw - 32px)); max-width: 520px; border: 0; border-radius: 4px;
    padding: 0; color: var(--text); background: var(--plocha); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28); }
.cookie-modal::backdrop { background: rgba(0, 0, 0, 0.45); }
.cookie-modal__hlava { display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--linka); }
.cookie-modal__nadpis { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--text-tvrdy); }
.cookie-modal__zavrit { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--popisek);
    cursor: pointer; padding: 0 4px; }
.cookie-modal__zavrit:hover { color: var(--text); }
.cookie-modal__telo { padding: 6px 22px 10px; }
.cookie-modal__uvod { margin: 14px 0; font-size: 14px; color: var(--popisek); }
.cookie-kat { display: block; padding: 12px 0; border-top: 1px solid var(--linka); }
.cookie-kat__hlava { display: flex; align-items: center; gap: 10px; }
.cookie-kat__nazev { font-family: var(--sans-jakarta); font-weight: 600; color: var(--text-tvrdy); }
.cookie-kat__vzdy { margin-left: auto; font-size: 11px; color: var(--popisek);
    text-transform: uppercase; letter-spacing: 0.05em; }
.cookie-kat__popis { display: block; margin: 5px 0 0 28px; font-size: 13px; color: var(--popisek); }
.cookie-kat input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--zlata); flex: 0 0 auto; }
.cookie-modal__akce { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid var(--linka); }
.cookie-modal__akce .cookie-tl { flex: 1 1 auto; text-align: center; }
@media (max-width: 640px) {
    .cookie-modal__akce .cookie-tl { flex: 1 1 100%; }
}
.cookie-modal__pravni { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 2px; font-size: 13px; }
.cookie-modal__pravni a { color: var(--zlata-tmava); text-decoration: underline; }

/* Znovuotevření z patičky — decentní odkaz v duchu patičky (Jakarta/popisek). */
.pata-obchod__cookies { display: inline-block; margin-top: 8px; background: none; border: 0; padding: 0;
    font-family: var(--sans-jakarta); font-size: 13px; color: var(--popisek); text-decoration: underline; cursor: pointer; }
.pata-obchod__cookies:hover { color: var(--zlata-tmava); }
/* Znovuotevření na CMS patičce (`.pata`) — site-wide lišta. Decentní, v duchu
   minimální CMS patičky (popisek, podtržení). ⛝ ne navigace — zákonný ovládací prvek. */
.pata__cookies { display: inline-block; margin-left: 10px; background: none; border: 0; padding: 0;
    font: inherit; color: var(--popisek); text-decoration: underline; cursor: pointer; }
.pata__cookies:hover { color: var(--text); }
/* Systémové stránky (admin mapování + null-safe právní odkazy) */
.sys-polozka { margin: 0 0 22px; }
.sys-stav { display: block; margin-top: 4px; font-size: 13px; }
.sys-stav--ok { color: var(--stav-uspech); }
.sys-stav--koncept { color: var(--stav-varovani); }
.sys-stav--ne { color: var(--popisek); }
.pata-obchod__pravni { font-family: var(--sans-jakarta); font-size: 13px; color: var(--popisek); margin: 0 0 6px; }
.pata-obchod__pravni a { color: var(--popisek); text-decoration: underline; }
.pata-obchod__pravni a:hover { color: var(--zlata-tmava); }
.pokladna__pravni { margin: 8px 0 0; }
.pokladna__pravni a { color: var(--zlata-tmava); }

/* ===== DETAIL PRODUKTU — editoriální (směr C, user 17. 9.) =====================
   Dominantní foto vpravo, vzdušné info vlevo (velký Playfair název, jemné zlaté
   linky, filmstrip náhledů). Foto ve zdroji první → mobil: foto nahoře, pak info;
   desktop: explicitní sloupce (info vlevo, galerie vpravo). Data `obrazky` z galerie;
   bez galerie prázdný rám (placeholder). Prodejní logika (varianty/CTA) beze změny. */
.produkt-detail { max-width: 1200px; margin: 0 auto; padding-block: 8px 8px; }
/* Explicitní grid-template-areas (⛝ grid-column + auto-flow): při zdrojovém pořadí
   galerie-první by info s grid-column:1 spadlo do 2. řádku (sparse auto-flow přeskočí
   obsazený kurzor) → „info dole vlevo, levý sloupec nahoře prázdný". Areas to zamknou
   do 1 řádku: info vlevo | galerie vpravo, nahoru zarovnané. */
.produkt-detail__hlava { display: grid; grid-template-columns: 1fr 1.1fr; grid-template-areas: "info galerie"; gap: clamp(28px, 5vw, 64px); align-items: start; }
.produkt-detail__info { grid-area: info; padding-right: clamp(0px, 2vw, 24px); }
.produkt-detail__galerie { grid-area: galerie; }

.produkt-detail__oko { font-family: var(--sans-jakarta); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--zlata-tmava); margin: 0 0 12px; }
.produkt-detail__nazev { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.2vw + 12px, 46px); line-height: 1.08; letter-spacing: -.01em; color: var(--text-tvrdy); margin: 0; }
.produkt-detail__perex { font-size: clamp(16px, 1.2vw + 8px, 19px); font-weight: 300; line-height: 1.6; color: var(--text); max-width: 40ch; margin: 14px 0 0; }
.produkt-detail__linka { border: 0; border-top: 1px solid var(--zlata); opacity: .4; margin: 24px 0; }
.produkt-detail__cena { font-family: var(--serif); font-weight: 600; font-size: 28px; color: var(--text-tvrdy); margin: 0; }
.produkt-detail__dph { margin: 4px 0 0; }
.produkt-detail__stav { margin: 12px 0 0; font-size: 15px; }
.produkt-detail__koupit { display: flex; align-items: flex-end; gap: 14px; margin-top: 22px; }
.produkt-detail__koupit .pole-mnozstvi { width: 76px; }
.varianta__kod { color: var(--popisek); }

.produkt-detail__foto { margin: 0; background: var(--krem); border: 1px solid var(--linka); border-radius: 6px; overflow: hidden; aspect-ratio: 4/5; }
.produkt-detail__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.produkt-detail__foto--prazdno { background: linear-gradient(160deg, #fcf7ef, #f1e9db); }
.produkt-detail__filmstrip { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.produkt-detail__thumb { flex: 0 0 auto; width: 72px; aspect-ratio: 1/1; padding: 0; background: var(--krem); border: 1px solid var(--linka); border-radius: 5px; overflow: hidden; cursor: pointer; transition: border-color .15s ease; }
.produkt-detail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.produkt-detail__thumb:hover { border-color: var(--zlata); }
.produkt-detail__thumb.je-aktivni { border-color: var(--zlata); box-shadow: 0 0 0 1px var(--zlata); }

/* --- Lightbox fotek (produkt.js) ------------------------------------------
   Hlavní foto = tlačítko (zoom-in) → overlay přes celé okno s velkou fotkou,
   šipkami (víc fotek) a zavřením. Bez JS je tlačítko prostý obrázek (overlay
   se nevloží). Pozadí schválně tmavé bez ohledu na motiv storefrontu. */
.produkt-detail__zvetsit { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
body.produkt-lightbox-otevren { overflow: hidden; }
.produkt-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 48px); background: rgba(24, 20, 16, .9); }
.produkt-lightbox__ramec { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
    max-width: min(92vw, 1000px); max-height: 90vh; }
.produkt-lightbox__obraz { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain;
    border-radius: 4px; background: var(--krem); box-shadow: 0 12px 44px rgba(0, 0, 0, .45); }
.produkt-lightbox__popis { margin: 0; max-width: 60ch; color: #f4efe6; font-size: 14px; text-align: center; }
.produkt-lightbox__zavrit, .produkt-lightbox__nav { position: absolute; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .14); color: #fff; line-height: 1; cursor: pointer; transition: background .15s ease; }
.produkt-lightbox__zavrit:hover, .produkt-lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.produkt-lightbox__zavrit { top: 16px; right: 20px; width: 44px; height: 44px; font-size: 26px; }
.produkt-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; }
.produkt-lightbox__nav--predchozi { left: 16px; }
.produkt-lightbox__nav--dalsi { right: 16px; }
.produkt-lightbox button:focus-visible { outline: 2px solid var(--zlata); outline-offset: 3px; }
@media (max-width: 600px) {
    .produkt-lightbox__nav { width: 40px; height: 40px; font-size: 24px; }
    .produkt-lightbox__nav--predchozi { left: 6px; }
    .produkt-lightbox__nav--dalsi { right: 6px; }
    .produkt-lightbox__zavrit { top: 8px; right: 8px; }
}

.produkt-detail__popis, .produkt-detail__extra { max-width: 68ch; margin: 40px 0 0; line-height: 1.7; color: var(--text); }

@media (max-width: 760px) {
	/* Stack: foto nahoře (galerie první), pak info — přes areas, ne grid-column. */
	.produkt-detail__hlava { grid-template-columns: 1fr; grid-template-areas: "galerie" "info"; gap: 22px; }
	.produkt-detail__info { padding-right: 0; }
	.produkt-detail__foto { max-width: 420px; margin: 0 auto; }
}

/* ===== ADMIN „AGENTI" — správa tokenů agentních klientů (wiring #6) ==============
   Seznam (jen prefix, ⛝ token/hash) + nový agent + show-once token blok. Admin oblast,
   reuse .tlacitko/.pole/.pruh-nadpisu/tabulka. Show-once vzor = .odkaz-jednorazovy. */
.pruh-nadpisu__akce { display: flex; align-items: center; gap: 12px; white-space: nowrap; }

/* Checkbox volba (label s odškrtávátkem) — admin forma nemá vlastní třídu. */
.popisek-volba { display: flex; align-items: baseline; gap: 8px; margin: 4px 0; font-size: 14px; color: var(--text); cursor: pointer; }
.popisek-volba input { flex: 0 0 auto; }

/* Varovná varianta decentního odkaz-tlačítka (Zneplatnit). */
.odkaz-tlacitko--varovny { color: var(--stav-chyba, #b3261e); }
.odkaz-tlacitko--varovny:hover { color: var(--stav-chyba, #b3261e); text-decoration: underline; }

/* Show-once token — prominentní zlatý rám, ať je jasné „zkopíruj teď". */
.agent-token { background: var(--zlata-plocha, #fcf3da); border: 1px solid var(--zlata, #b08830); border-left: 4px solid var(--zlata, #b08830); border-radius: 8px; padding: 14px 18px; margin: 0 0 22px; }
.agent-token__nadpis { font-weight: 700; color: var(--text-tvrdy, #000); margin: 0 0 4px; }
.agent-token__varovani { margin: 0 0 10px; font-size: 14px; }
.agent-token__pole { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .02em; background: #fff; }

/* Nový agent — kompaktní dvousloupcový řádek + rozsah. */
.agent-novy { max-width: 620px; background: var(--krem, #faf7f2); border: 1px solid var(--linka, #e9e9e9); border-radius: 10px; padding: 16px 18px; margin-bottom: 26px; }
.agent-novy h4 { margin: 0 0 12px; }
.agent-novy__radek { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.agent-novy__radek > div:first-child { flex: 1 1 260px; }
.agent-rozsah { border: 0; margin: 6px 0 12px; padding: 0; }
.agent-rozsah legend { padding: 0; margin: 0 0 6px; }

/* Seznam — chipy rozsahu, prefix, stav. */
.agent-chip { display: inline-block; font-size: 12px; background: var(--zlata-plocha, #fcf3da); color: var(--zlata-tmava, #957123); border: 1px solid #ecd9a3; border-radius: 999px; padding: 2px 9px; margin: 1px 3px 1px 0; }
.agent-prefix { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: var(--popisek, #898989); }
.agent-stav { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 2px 9px; }
.agent-stav--on { background: var(--stav-uspech-plocha, #e6f4ec); color: var(--stav-uspech, #1f7a44); }
.agent-stav--off { background: #f0f2f5; color: var(--popisek, #898989); }
.agent-stav--exp { background: var(--oran-pl, #fbefe2); color: var(--oran, #b4631a); }
.agent-akce { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.agent-akce form { margin: 0; display: inline; }

/* ===== VÝPIS KATEGORIE + HLEDÁNÍ — mřížka sdílené karty + v4 karta (Martin 16. 10.) =====
   `.produkty-vypis` dosud bez CSS → karty padaly pod sebe. Grid = mirror `.s-vitrina-mrizka`.
   v4 karta (sans název/lehčí cena/barvy stavů/motýlek placeholder) je SCOPED na `.produkty-vypis`
   → showcase vitrína (`.s-vitrina-mrizka`, homepage) zůstává BEZE ZMĚNY (design-polish) do
   Martinova ranního OK; sjednocení celého eshopu na v4 = follow-up. Placeholder markup je ve
   sdílené product-card, ale zobrazí se jen tady (jinde skrytý). Platí i pro /hledat. */
.produkty-vypis { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 34px); margin-top: 8px; }
@media (max-width: 900px) { .produkty-vypis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .produkty-vypis { grid-template-columns: repeat(2, 1fr); } }
/* v4 karta — scoped (⛝ vitrína). Specificita 0,2,0 + pozdější pořadí → přebíjí design-polish. */
.produkty-vypis .produkt-karta__nazev { font-family: var(--pismo); font-weight: 400; font-size: 16px; margin-top: 15px; }
.produkty-vypis .produkt-karta__cena { font-weight: 400; font-size: 16px; }
.produkty-vypis .produkt-karta__stav { font-weight: 300; margin-top: 6px; }
.produkty-vypis .produkt-karta__stav--na_objednavku { color: var(--stav-varovani, #8a6d3b); }
.produkty-vypis .produkt-karta__stav--vyprodano { color: var(--neaktivni, #c3c3c3); }
/* No-photo zlatý motýlek placeholder — jen ve výpisu (jinde skrytý → vitrína prázdný rám beze změny). */
.produkt-karta__placeholder { display: none; }
.produkty-vypis .produkt-karta__obr { display: flex; align-items: center; justify-content: center; }
.produkty-vypis .produkt-karta__placeholder { display: block; width: 46%; height: auto; color: var(--zlata-svetla, #d0a547); }

/* Admin hledání produktů (feature admin-search, sidesign-app; design dolazen sidesign-ui):
   input + „Hledat" + „zrušit" na jednom řádku, input roste. Input má `.pole` (admin styl). */
.hledani-produktu { display: flex; align-items: center; gap: 10px; max-width: 480px; margin-bottom: 20px; }
.hledani-produktu .pole { flex: 1; margin: 0; }

/* ===== Zákazníci (admin, read-only CELEK 1) — sladěno se stylem adminu (produkty/objednávky). ===== */
/* seznam: hledání jako u produktů (tabulka = obecný admin styl) */
.hledani-zakazniku { display: flex; align-items: center; gap: 10px; max-width: 480px; margin-bottom: 20px; }
.hledani-zakazniku .pole { flex: 1; margin: 0; }
/* obecné admin buňky mají 0 horizontálního paddingu → pravá číselná sloupec (Útrata vpravo)
   by se slepila s následující (Stav). Mezera jen v seznamu zákazníků (⛝ globální `.vpravo`). */
.hledani-zakazniku ~ table th.vpravo, .hledani-zakazniku ~ table td.vpravo { padding-right: 32px; }
/* detail — údaje zákazníka (definiční seznam: štítek | hodnota) */
.udaje { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0; max-width: 560px; }
.udaje dt { color: var(--popisek); font-size: 13px; }
.udaje dd { margin: 0; }
/* detail — adresář (karty v mřížce) */
.adresy-seznam { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.adresa-karta { border: 1px solid var(--linka); border-radius: 8px; padding: 14px 16px; background: var(--plocha); }
.adresa-karta > .drobne:first-child { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .03em; font-size: 12px; }
.adresa-karta p { margin: 0; line-height: 1.5; }

/* Detail produktu — popis v INFO sloupci pod nákupem (směr B, user 17. 10.): teče u produktu,
   ne full-width pod gridem. Override full-width základu (`.produkt-detail__popis` ~ř.4064). */
.produkt-detail__info .produkt-detail__popis,
.produkt-detail__info .produkt-detail__extra { max-width: none; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--linka); }

/* Zlatý akcent pod nadpisem — výpis kategorie + hledání (v4, user 17. 10.). Zatím JEN tady
   (⛝ globálně po eshopu — další rozhovor). Značková --zlata #B08830. */
.nadpis-akcent { width: 54px; height: 2px; background: var(--zlata); border: 0; margin: 14px auto 24px; }

/* Drobečková navigace (#6) — výpis kategorie + detail produktu. Skeleton partial
   `eshop/_casti/drobecky.twig` (nav>ol>li, poslední = <span aria-current="page">);
   separátory „›" z CSS (li+li::before), ne z markupu — data-kontrakt beze změny.
   Zarovnání VLEVO: konvence pro čtení cesty + jedno pravidlo, co sedí i nad
   2sloupcovým detailem produktu. Trail začíná kategorií — ⛝ „Domů" root. */
.drobecky { margin: 2px 0 18px; }
.drobecky ol { list-style: none; margin: 0; padding: 0; font-family: var(--sans-jakarta); font-size: 13px; line-height: 1.5; letter-spacing: .005em; }
.drobecky li { display: inline; }
.drobecky li + li::before { content: "\203A"; margin: 0 7px; color: var(--popisek); }
.drobecky a { color: var(--popisek); text-decoration: none; transition: color .15s ease; }
.drobecky a:hover, .drobecky a:focus-visible { color: var(--zlata-tmava); text-decoration: underline; text-underline-offset: 2px; }
.drobecky [aria-current="page"] { color: var(--text); }
/* Mobil (shodně s přechodem hlavičky na hamburger, 760px): drobečky na střed; desktop zůstává vlevo (A, Martin). */
@media (max-width: 760px) { .drobecky ol { text-align: center; } }

/* Popis kategorie = perex/lead (user 17. 10.): vzdušnější, lehčí než běžný odstavec,
   omezená míra řádku pro čtivost. Renderuje sanitizovaný HTML (`|bezpecne`), proto i styl
   vnořených <p>. (`.kategorie-popis` dosud bez CSS → obyč paragraf.) */
.kategorie-popis { max-width: 62ch; margin: 2px 0 26px; font-size: clamp(16px, 1.1vw + 8px, 19px); font-weight: 300; line-height: 1.6; color: var(--text); }
.kategorie-popis p { margin: 0 0 .6em; }
.kategorie-popis p:last-child { margin-bottom: 0; }

/* Filtr podkategorií (C, Martin 17. 9.): učesané chips sourozenců místo holého
   odkazového proužku `.podkategorie`. Aktivní (= aktuální kategorie) zlatá plocha.
   Dlaždicový fallback (kořen / jediné dítě) používá showcase `.s-dlazdice-mrizka`. */
.kategorie-filtr { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.kategorie-filtr a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--linka); border-radius: 999px; font-family: var(--sans-jakarta); font-size: 14px; color: var(--text); text-decoration: none; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.kategorie-filtr a:hover { border-color: var(--zlata); color: var(--zlata-tmava); }
.kategorie-filtr a.je-aktivni { background: var(--zlata-plocha); border-color: var(--zlata); color: var(--zlata-tmava); font-weight: 600; }

/* Storefront stránkování = kompaktní číselné boxíky (user 17. 10.): ⛝ full-width roztažení,
   blíž k výpisu. Modifikátor `.strankovani--cisla` — base `.strankovani` (prev/next layout
   u admin objednávky/produkty + účet objednávky) ZŮSTÁVÁ netknutá. */
.strankovani--cisla { justify-content: center; gap: 6px; margin: 24px 0 8px; flex-wrap: wrap; }
.strankovani__strana { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--linka); border-radius: 6px; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; transition: border-color .2s ease, color .2s ease; }
.strankovani__strana:hover { border-color: var(--zlata); color: var(--zlata-tmava); }
.strankovani__strana--zde { background: var(--zlata-plocha); border-color: var(--zlata); color: var(--zlata-tmava); font-weight: 600; }

/* Admin „Agenti" — inline editor rozsahu (scope-grant) rozbalený přes <details>.
   Nové názvy tříd (⛝ kolize), base .strankovani ani .agent-* chips se netýká. */
.agent-edit { margin: 0 0 8px; }
.agent-edit > summary { cursor: pointer; display: inline-block; }
.agent-edit[open] > summary { margin-bottom: 8px; }
.agent-edit__form { padding: 12px; border: 1px solid var(--linka); border-radius: 6px; background: var(--plocha); text-align: left; }
.agent-edit__ovladani { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* ===== Fotky produktu — inline správa v detailu produktu (admin, média op#7 fáze 1).
   Produktová galerie 1:1; fail-closed hlášku u ne-migrované CMS galerie řeší backend
   (galerieCeka). Markup: eshop/admin/produkt/formular.twig (reviewnutý, ⛝ měněn). ===== */
.produkt-fotky { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--linka); }
.produkt-fotky > h4 { font-family: var(--pismo); font-weight: 500; font-size: 20px; margin: 0 0 14px; }
.produkt-fotky > h4 .drobne { font-family: var(--sans-jakarta); font-weight: 400; }
/* nahrávací pole — jen přímá forma sekce (upload); popisové formy jsou uvnitř karet */
.produkt-fotky > form { border: 1px dashed var(--linka); border-radius: 10px; padding: 16px 18px; margin: 0 0 24px; background: #faf8f4; }
.produkt-fotky > form .odsad { margin-top: 12px; }
/* mřížka fotek */
.produkt-fotky__mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin: 0 0 12px; }
.produkt-fotka { position: relative; display: flex; flex-direction: column; border: 1px solid var(--linka); border-radius: 10px; overflow: hidden; background: var(--plocha); }
/* `height:auto` nutné: HTML width/height atributy `<img>` (reálné rozměry fotky) jinak
   nastaví CSS height → u portrétu přebije aspect-ratio → box „nudle". Auto → ctí aspect-ratio. */
.produkt-fotka__nahled { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #f1ece3; }
/* první fotka = hlavní (pořadí šipkami) → zlatý štítek bez zásahu do markupu */
.produkt-fotka:first-child::before { content: "Hlavní"; position: absolute; top: 9px; left: 9px; z-index: 1; background: var(--zlata-plocha); color: var(--zlata-tmava); border: 1px solid var(--zlata); font-family: var(--sans-jakarta); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.produkt-fotka__popis { display: flex; flex-direction: column; gap: 7px; padding: 11px 11px 9px; }
.produkt-fotka__popis .pole { font-size: 13px; padding: 7px 9px; }
.produkt-fotka__popis .odkaz-tlacitko { align-self: flex-start; font-size: 13px; }
/* akce: ← → vlevo (boxované, krajní disabled), Smazat vpravo (destruktivní, bez rámu) */
.produkt-fotka__akce { display: flex; align-items: center; gap: 6px; padding: 0 11px 12px; margin-top: auto; }
.produkt-fotka__akce form { margin: 0; }
.produkt-fotka__akce .odkaz-tlacitko { border: 1px solid var(--linka); border-radius: 6px; padding: 5px 11px; font-size: 14px; line-height: 1; }
.produkt-fotka__akce .odkaz-tlacitko[disabled] { opacity: .35; }
.produkt-fotka__akce .odkaz-tlacitko--varovny { margin-left: auto; border-color: transparent; color: var(--stav-chyba); padding-right: 2px; }
/* fail-closed (přechodové okno) — hláška už má .varovani styl; přidán zámek */
.produkt-fotky .hlaska.varovani { display: flex; gap: 10px; align-items: flex-start; max-width: 680px; }
.produkt-fotky .hlaska.varovani::before { content: "🔒"; font-size: 15px; line-height: 1.5; }

/* ===== Focal picker (#5 fáze 2) — ořez náhledu per fotka (admin editace produktu). Progresivní: tlačítko + <dialog> doplní focal-picker.js; bez JS se nevloží. ===== */
.focal-spustit { border: 1px solid var(--linka); border-radius: 6px; padding: 5px 11px; font-size: 13px; line-height: 1; }
.focal-spustit--nastaveno { border-color: var(--zlata); color: var(--zlata-tmava); }
.focal-spustit--nastaveno::before { content: "\25C9\00A0"; }
.focal-modal { width: min(640px, 94vw); border: 0; border-radius: 12px; padding: 0; color: var(--text); background: var(--plocha); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.focal-modal::backdrop { background: rgba(20,16,10,.45); }
.focal-modal__form { padding: 20px 22px 22px; margin: 0; }
.focal-modal__hlava { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
.focal-modal__hlava h3 { font-family: var(--pismo); font-weight: 500; font-size: 18px; margin: 0; }
.focal-modal__nazev { color: var(--popisek); font-weight: 400; font-size: 14px; }
.focal-modal__x { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--popisek); padding: 0 2px; }
.focal-modal__x:hover { color: var(--text); }
.focal-modal__napoveda { margin: 0 0 14px; }
.focal-modal__telo { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.focal-modal__stage { position: relative; flex: 0 0 auto; align-self: flex-start; line-height: 0; border: 1px solid var(--linka); border-radius: 8px; overflow: hidden; cursor: crosshair; }
.focal-modal__stage img { display: block; max-width: 100%; max-height: 380px; width: auto; height: auto; background: #f4f2ee; }
.focal-modal__cross { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--zlata-tmava), 0 1px 5px rgba(0,0,0,.45); pointer-events: none; }
.focal-modal__cross::before, .focal-modal__cross::after { content: ""; position: absolute; background: var(--zlata-tmava); }
.focal-modal__cross::before { left: 50%; top: -9px; width: 2px; height: 9px; margin-left: -1px; }
.focal-modal__cross::after { top: 50%; left: -9px; height: 2px; width: 9px; margin-top: -1px; }
.focal-modal__bok { flex: 1 1 150px; display: flex; flex-direction: column; gap: 8px; }
.focal-modal__bok .plabel { font-family: var(--sans-jakarta); font-size: 11px; color: var(--popisek); text-transform: uppercase; letter-spacing: .06em; }
.focal-modal__preview { width: 140px; height: 140px; border: 1px solid var(--ramecek); border-radius: 8px; overflow: hidden; background: #f4f2ee; }
.focal-modal__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.focal-modal__pole { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.focal-modal__pole label { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.focal-modal__pole .pole { width: 72px; padding: 6px 8px; font-size: 13px; }
.focal-modal__val { font-variant-numeric: tabular-nums; }
.focal-modal__akce { display: flex; align-items: center; gap: 12px; margin-top: 20px; border-top: 1px solid var(--linka); padding-top: 16px; }

/* ===== Košík (storefront) — skeleton → design + cleanup pass (Martin). ===== */
.kosik { width: 100%; border-collapse: collapse; margin: 10px 0 20px; }
.kosik th, .kosik td { padding: 14px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linka); }
.kosik thead th { font-family: var(--sans-jakarta); font-weight: 600; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--popisek); }
/* Částky (Cena za kus / Celkem) VPRAVO — „částky pod částkami" (#4 kolo 2, Martin): tělo
   řádků i footer totals svisle lícují; hlavičky sloupců s částkami (th.vpravo) taky vpravo. */
.kosik td.cena { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kosik thead th.vpravo { text-align: right; }
.kosik__kod { font-family: var(--sans-jakarta); font-size: 13px; color: var(--popisek); white-space: nowrap; }
.kosik__nazev { display: block; font-weight: 500; }
/* Proklik na detail produktu (#2) — název je odkaz; dědí barvu, hover zlatě (jako karta). Prázdný slug → span bez odkazu. */
a.kosik__nazev { color: inherit; text-decoration: none; transition: color .15s ease; }
a.kosik__nazev:hover, a.kosik__nazev:focus-visible { color: var(--zlata-tmava); text-decoration: underline; text-underline-offset: 2px; }
.kosik__varianta { display: block; font-size: 14px; color: var(--popisek); margin-top: 2px; }
.kosik__customizace { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--popisek); }
.kosik__mnozstvi { display: flex; align-items: center; gap: 8px; margin: 0; }
.kosik__mnozstvi input[type="number"] { width: 68px; -moz-appearance: textfield; }
/* #4a dočištění — skrýt nativní spinner šipky number inputu (vlastní stepper −/+ staví kosik.js). */
.kosik__mnozstvi input[type="number"]::-webkit-inner-spin-button,
.kosik__mnozstvi input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kosik__akce-bunka form { margin: 0; }
.kosik tfoot th, .kosik tfoot td { border-bottom: 0; padding-top: 18px; font-size: 16px; font-weight: 600; }
.kosik tfoot th[scope="row"] { text-align: right; }
.kosik tfoot td.cena { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Součet (poslední footer řádek = Mezisoučet / K platbě) výraznější než položky — větší písmo (#4 kolo 2, Martin). */
.kosik tfoot tr:last-child th, .kosik tfoot tr:last-child td.cena { font-size: 20px; }
/* kompaktní sekundární tlačítka v košíku (Přepočítat fallback / Odebrat) */
.kosik .tlacitko.druhotne { padding: 7px 14px; font-size: 14px; min-height: 0; }
/* #2 T4 — slevový kód v košíku: dosud neostylované (SKELETON) → učesat. Label nad polem,
   pole + tlačítko v řádku (na mobilu se zalomí). Storefront tokeny. */
.kosik__sleva { margin: 18px 0 24px; }
.kosik__sleva-info { margin: 0 0 8px; color: var(--zlata-tmava); font-weight: 500; }
.kosik__sleva-chyba { margin: 0 0 8px; color: #b3261e; }
.kosik__sleva-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.kosik__sleva-form label { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--popisek); }
.kosik__sleva-form .pole { flex: 1 1 180px; max-width: 280px; }
.kosik__sleva-form .tlacitko { flex: 0 0 auto; }

.kosik__akce { display: flex; justify-content: flex-end; margin-top: 10px; }
/* úzké obrazovky: tabulka se vodorovně odscrolluje (⛝ rozbití layoutu) */
/* #4 T3 — košík na mobilu: 6sloupcová tabulka se na telefon nevejde → položky přeskládat
   do karet (dřív jen overflow-x scroll). thead skrytý; řádek = karta; buňky = labeled řádky
   (data-label v kosik.twig, ::before). Pořadí v kartě přes flex `order` (DOM má Kód první,
   titulem chceme název). Scoped na `.kosik`; desktop beze změny. */
@media (max-width: 680px) {
    .kosik thead { display: none; }
    .kosik, .kosik tbody, .kosik tfoot, .kosik tr, .kosik td, .kosik th { display: block; }
    .kosik tbody tr {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--linka);
        border-radius: 8px;
        padding: 14px;
        margin: 0 0 12px;
    }
    .kosik tbody td { border-bottom: 0; padding: 0; }
    .kosik tbody td:nth-child(2) { order: 1; }   /* Zboží (název) = titul */
    .kosik tbody td:nth-child(1) { order: 2; }   /* Kód */
    .kosik tbody td:nth-child(3) { order: 3; }   /* Cena za kus */
    .kosik tbody td:nth-child(4) { order: 4; }   /* Množství (stepper) */
    .kosik tbody td:nth-child(5) { order: 5; }   /* Celkem */
    .kosik tbody td:nth-child(6) { order: 6; }   /* Akce (Odebrat) */
    .kosik tbody td.kosik__kod { font-size: 13px; color: var(--popisek); margin-top: 2px; }
    .kosik tbody td[data-label] {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 6px 14px;
        margin-top: 8px;
    }
    .kosik tbody td[data-label]::before {
        content: attr(data-label);
        color: var(--popisek);
        font-size: 13px;
    }
    .kosik tbody td.cena { text-align: right; white-space: nowrap; }
    .kosik tbody td.kosik__akce-bunka { margin-top: 12px; text-align: right; }
    .kosik tfoot tr { display: flex; justify-content: space-between; gap: 14px; }
    .kosik tfoot th, .kosik tfoot td { border-bottom: 0; padding: 6px 0 0; }
    .kosik tfoot td:empty { display: none; }
}

/* ===== Admin číselníkové karty (doprava, parametry) — sidesign-ui ================
   Fieldset `.karta-parametru` dosud neměl styl → zůstal mu defaultní UA rám (viz
   pozn. u `.pokladna__formular fieldset`: tam byl rám odstraněn, ale „Admin/
   CMS-builder mimo"). Teď: karta = jemný rám + plocha + radius; legenda = Lato
   nadpis karty s linkou (admin používá Lato, ne storefront serif).
   Pole ve stohovaných formulářích (doprava) dostávají svislou mezeru týmž
   mechanismem jako pokladna; inline formuláře parametrů (`.vedle`) se nedotknou.
   `.seznam-hodnot` = čistý řádkový seznam hodnot/pravidel s akcí zarovnanou vpravo.
   Sdílené s `eshop/admin/parametr/prehled.twig` → sjednotí i tu stránku. */
.karta-parametru {
    min-width: 0;                      /* zruší implicitní min-width fieldsetu */
    border: 1px solid var(--linka);
    border-radius: 10px;
    background: var(--plocha);
    padding: 24px 24px 28px;
    margin: 0 0 20px;
}

.karta-parametru > legend {
    float: none;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 12px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--linka);
    font-family: var(--pismo);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    color: var(--text-tvrdy);
}

.karta-parametru > legend .drobne {
    font-weight: 400;
}

/* Stohovaná admin pole v kartě (doprava) = mezera pod každým (vzor pokladny:
   „dřív nalepené na nadpis"). Inline formuláře parametru (`.vedle`) vynechat. */
.karta-parametru form:not(.vedle) .pole:not(:last-child) {
    margin-bottom: 16px;
}

.karta-parametru .odsad-vetsi {
    margin-bottom: 4px;
}

.seznam-hodnot {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.seznam-hodnot li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ramecek);
}

.seznam-hodnot li:last-child {
    border-bottom: 0;
}

.seznam-hodnot__popis {
    flex: 1 1 auto;
    min-width: 0;
}

.seznam-hodnot .vedle {
    flex: 0 0 auto;
}

/* Generická admin tabulka (výpisy bez order-specific ladění `objednavky-vypis`,
   které má nth-child(5/6) na míru 6sloupcové tabulce objednávek/dokladů) —
   sloupcové rozestupy + spodní mezera; poslední sloupec (akce) bez pravého
   paddingu. Používá `eshop/admin/kupon/prehled.twig`; reusable pro další
   generické admin výpisy. Barvy/linky/padding-vertical dědí z base `table`. */
table.tabulka {
    margin-bottom: 18px;
}

table.tabulka th,
table.tabulka td {
    padding-right: 24px;
}

table.tabulka th:last-child,
table.tabulka td:last-child {
    padding-right: 0;
}

/* Číselné sloupce v admin tabulce (reuse `.vpravo` = right-align): tabular-nums pro
   svislé zarovnání číslic. Scope `.tabulka` → ⛝ dopad na jiné `.vpravo` v appce. */
table.tabulka th.vpravo,
table.tabulka td.vpravo {
    font-variant-numeric: tabular-nums;
}

/* Obal širokých admin tabulek → na úzkém viewportu scrollují vodorovně ve VLASTNÍM
   boxu (⛝ scroll celého body — „široký obsah scrolluje v kontejneru"). Tabulka
   zůstává `width:100%`, takže když se vejde, obal vzhled nemění; přeteče-li (např.
   9sloupcový kupon, 6sloupcové reporty na mobilu), scrolluje jen uvnitř obalu.
   Obalují se `.tabulka` i doklady (`objednavky-vypis` bez dropdownu); objednávky
   NEobaleny — mají absolutní `.stav-dropdown__menu`, který by obal (overflow) oříznul. */
.tabulka-obal {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== Admin PŘEHLEDY (reporty) — sidesign-ui ===================================
   KPI stat-dlaždice + sparkline box + inline filtr období. Monochrom (brand):
   hodnota = ink (kontrast velikostí, ne tučností), popis = sekundární; žádná
   kategorická paleta. Tabulky výpisů = kanonická `.tabulka` (viz výše). */

/* KPI mřížka = responzivní grid stat-dlaždic (dlaždice se zabalí na úzkém) */
.kpi-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--linka);
    border-radius: 10px;
    background: var(--plocha);
    padding: 18px 20px;
}

/* Hodnota = dominantní velikostí; proporcionální číslice (ne tabular — standalone
   velké číslo; tabular je na sloupce), Lato (⛝ serif/display). */
.kpi__cislo {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--text-tvrdy);
}

/* Popisek = sekundární, sentence case. */
.kpi__popis {
    font-size: 13px;
    color: var(--popisek);
}

/* Sparkline = jemná karta; čára dědí ink přes `stroke="currentColor"` (Sparkline.php). */
.sparkline-box {
    color: var(--text);
    border: 1px solid var(--linka);
    border-radius: 10px;
    background: var(--plocha);
    padding: 16px 20px;
}

.sparkline-box svg.sparkline {
    display: block;
    max-width: 100%;
    height: auto;
}

.sparkline-box .drobne {
    display: block;
    margin-top: 8px;
}

/* Inline filtr rozsahu období: „Od [date] Do [date] [Zobrazit]" na řádku, wrap na
   mobilu. Labely jsou inline (text + date input) — ⛝ blokový popisek-pole, tohle
   je filtr-řádek, ne stohovaný formulář. */
.obdobi-rozsah {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.obdobi-rozsah label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--popisek);
}

.obdobi-rozsah .pole {
    width: auto;
}

/* ===== Storefront filtry + našeptávač (vlna 3) — sidesign-ui =====================
   Řazení = <details> dropdown (no-JS); filtr ceny = inline řádek; hledání = search
   bar; našeptávač = vanilla-JS autocomplete (naseptavac.js). Storefront jazyk:
   Jakarta, zlatý akcent (--zlata), 999px chipy vedle (kategorie-filtr), jemné linky. */

/* — Řazení: dropdown (details/summary), no-JS nativní — */
.razeni {
    position: relative;
    display: inline-block;
    margin: 0 0 22px;
    font-family: var(--sans-jakarta);
}
.razeni__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--linka);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.razeni__trigger::-webkit-details-marker { display: none; }
.razeni__trigger:hover,
.razeni[open] .razeni__trigger { border-color: var(--zlata); }
.razeni__popisek { color: var(--popisek); }
.razeni__vybrane { font-weight: 600; color: var(--text-tvrdy); }
.razeni__sipka { color: var(--popisek); font-size: 11px; transition: transform .15s ease; }
.razeni[open] .razeni__sipka { transform: rotate(180deg); }
.razeni__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    padding: 6px;
    white-space: nowrap;
}
.razeni__moznost {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
}
.razeni__moznost:hover { background: var(--krem); color: var(--zlata-tmava); }
.razeni__moznost.je-aktivni { color: var(--zlata-tmava); font-weight: 600; }

/* — Filtr ceny: inline řádek (label + pole od/do + tlačítko) — */
.filtr-cena {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 26px;
    font-family: var(--sans-jakarta);
}
.filtr-cena .popisek-pole { margin: 0; font-size: 14px; color: var(--popisek); }
.filtr-cena .pole { width: 110px; }
/* #2 T3: cenový filtr ve výpisu kategorie na mobilu skrýt (špatné zarovnání, Martin) — desktop beze změny. */
@media (max-width: 640px) {
    .filtr-cena { display: none; }
}

/* — Facet-filtr (barva/vzor, #facety v1.5): toggle-chipy konzistentní s kategorie-filtr pills.
   GET form, `.filtr-facety__check` (skrytý checkbox hodnoty[]) + sibling label `.popisek-volba` = chip;
   checked = zlatě aktivní přes `:checked + label` (robust 100% napříč prohlížeči), popisek „hodnota (pocet)". — */
.filtr-facety { margin: 0 0 26px; font-family: var(--sans-jakarta); }
.filtr-facety__skupina { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.filtr-facety__skupina legend { display: block; width: 100%; padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text); }
/* label jako chip — přebíjí admin `.popisek-volba` (flex řádek s odškrtávátkem) */
.filtr-facety .popisek-volba { display: inline-flex; align-items: center; gap: 0; height: 36px; margin: 0 6px 6px 0; padding: 0 15px; border: 1px solid var(--linka); border-radius: 999px; font-size: 14px; color: var(--text); cursor: pointer; user-select: none; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.filtr-facety__check { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.filtr-facety .popisek-volba .drobne { margin-left: 5px; color: var(--popisek); }
.filtr-facety .popisek-volba:hover { border-color: var(--zlata); color: var(--zlata-tmava); }
.filtr-facety__check:checked + .popisek-volba { background: var(--zlata-plocha); border-color: var(--zlata); color: var(--zlata-tmava); font-weight: 600; }
.filtr-facety__check:checked + .popisek-volba .drobne { color: var(--zlata-tmava); }
.filtr-facety__check:focus-visible + .popisek-volba { outline: 2px solid var(--zlata); outline-offset: 2px; }
.filtr-facety > button[type="submit"] { margin-top: 2px; }

/* — Hledání: search bar (popisek nad, input roste, tlačítko vedle) — */
.hledani-formular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    max-width: 620px;
    font-family: var(--sans-jakarta);
}
.hledani-formular .popisek-pole { flex-basis: 100%; margin: 0 0 2px; }
.hledani-formular .naseptavac { flex: 1 1 280px; }
.hledani-formular .pole { width: 100%; max-width: none; }

/* — Našeptávač: autocomplete dropdown (JS plní naseptavac.js) — */
.naseptavac { position: relative; }
.naseptavac__seznam {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    max-height: 340px;
    overflow-y: auto;
}
.naseptavac__polozka {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--sans-jakarta);
}
.naseptavac__polozka:hover,
.naseptavac__polozka.je-aktivni { background: var(--krem); }
.naseptavac__nazev { font-size: 14px; color: var(--text); }
.naseptavac__cena {
    font-size: 13px;
    color: var(--popisek);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* — Našeptávač adres v pokladně (#7): stejný dropdown pattern jako product-search výš
   (plní naseptavac-adres.js z Mapy.com). Položka = ulice (hlavní) nad městem (sekundární). — */
.naseptavac-adres { position: relative; }
.naseptavac-adres__seznam {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--plocha);
    border: 1px solid var(--linka);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    max-height: 340px;
    overflow-y: auto;
}
.naseptavac-adres__polozka {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--sans-jakarta);
}
.naseptavac-adres__polozka:hover,
.naseptavac-adres__polozka.je-aktivni { background: var(--krem); }
.naseptavac-adres__ulice { font-size: 14px; color: var(--text); }
.naseptavac-adres__mesto { font-size: 13px; color: var(--popisek); }

/* ===== Merchandising bloky na detailu produktu (vlna 3) — sidesign-ui ============
   „Mohlo by se vám líbit" + „Naposledy prohlédnuté" (produkty-blok.twig). Full-width
   za detailem; mřížka karet = reuse `.produkty-vypis` (katalogový grid, nestyluji
   znovu). Jen sekce (oddělení hairline + odstup) + nadpis (Playfair z `.eshop h2`). */
.produkty-blok {
    margin-top: clamp(44px, 6vw, 64px);
    padding-top: clamp(32px, 5vw, 44px);
    border-top: 1px solid var(--linka);
}

.produkty-blok__nadpis {
    margin: 0 0 clamp(20px, 3vw, 28px);
    font-weight: 600;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.15;
    color: var(--text-tvrdy);
}

/* Danger zone pro NEVRATNÉ GDPR akce (výmaz zákazníka, čl. 17) — vizuálně oddělit
   od běžných akcí, ať admin neklikne omylem. Jemná červená linka + error tint +
   odstup; destruktivní tlačítko uvnitř = `.tlacitko.varovne` (červené). */
.gdpr-nebezpeci {
    margin-top: 28px;
    border: 1px solid #e6b4af;
    background: var(--stav-chyba-plocha, #faf3f2);
    border-radius: 10px;
    padding: 16px 18px;
}

/* ===== Akční ceny (slevy v2 Fáze A) — sidesign-ui ================================
   Přeškrtnutá původní (tlumená) + akční (zlatý akcent) + odznak „akce" (zlatý pill).
   Sdílené: karta (vitrína/kategorie/hledání/merchandising) + detail + varianta.
   Ceny ze `souhrn`/resolveru (server-side) — ui jen vzhled. */

/* zarovnání řádku ceny v akci (původní + akční + odznak na baseline, mezery přes gap) */
.produkt-karta__cena--akce {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
}
.produkt-detail__cena--akce {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 10px;
    color: var(--zlata-tmava); /* akční cena (text. uzel) zlatě; <s>/odznak mají vlastní */
}

/* přeškrtnutá původní cena — tlumená a menší (<s> už škrtá) */
.produkt-karta__puvodni,
.produkt-detail__puvodni,
.varianta__puvodni {
    color: var(--popisek);
    font-weight: 400;
    font-size: .8em;
}

/* akční cena — zlatý akcent (karta má vlastní span; varianta text. uzel) */
.produkt-karta__akcni,
.varianta__cena--akce {
    color: var(--zlata-tmava);
    font-weight: 600;
}

/* odznak „akce" — malý zlatý pill */
.produkt-karta__odznak,
.produkt-detail__odznak {
    display: inline-block;
    font-family: var(--sans-jakarta);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--zlata-tmava);
    background: var(--zlata-plocha);
    border-radius: 999px;
    padding: 2px 8px;
    line-height: 1.4;
}

/* #1 Hero flip (testing): HP eshop hero fotka překlopená horizontálně (CSS, ⛝ nový
   asset). Gradient/overlay `::after` se neflipuje — jen fotka. */
.s-hero-split__foto img,
.s-hero-banner__foto {
    transform: scaleX(-1);
}

/* #4a Košík — krokové tlačítko (−/+) vlastního stepperu množství (staví kosik.js;
   bez JS zůstává nativní number input + „Přepočítat" jako fallback). */
.kosik__krok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--ramecek);
    border-radius: 6px;
    background: var(--plocha);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.kosik__krok:hover { border-color: var(--text); }
.kosik__krok:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }

/* ===== Mezikrok „přidáno do košíku" (#3) — sidesign-ui ==========================
   Modal <dialog> na detailu produktu (otevírá mezikrok-kosik.js z JSON; bez JS skryté). */
.mezikrok {
    position: relative;
    max-width: 440px;
    width: calc(100% - 32px);
    border: 1px solid var(--linka);
    border-radius: 12px;
    padding: 28px 28px 24px;
    background: var(--plocha);
    color: var(--text);
    box-shadow: 0 16px 48px rgba(20, 16, 10, .18);
    font-family: var(--sans-jakarta);
}
.mezikrok::backdrop { background: rgba(20, 16, 10, .45); }
/* #3 T3: na mobilu modal fixně vycentrovat do viewportu. showModal() ho s position:relative kreslil
   v toku stránky → po „přidání do košíku" se na odscrollovaném telefonu objevil až nahoře a nebyl vidět.
   position:fixed drží i kotvu pro absolutní ×. Desktop beze změny. */
@media (max-width: 640px) {
    .mezikrok {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
    }
}
.mezikrok__x {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    color: var(--popisek);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    /* #3 dočištění — × vycentrovaný v klikací ploše (ne prázdný prostor nad/pod) + bez výběru textu. */
    -webkit-user-select: none;
    user-select: none;
}
.mezikrok__x:hover { color: var(--text); }
.mezikrok__nadpis { margin: 0 0 16px; font-size: 22px; }
.mezikrok__polozka { margin: 0 0 6px; font-size: 15px; }
.mezikrok__varianta { color: var(--popisek); }
.mezikrok__meta { display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mezikrok__souhrn { margin: 0 0 20px; }
.mezikrok__akce { display: flex; flex-wrap: wrap; gap: 10px; }
.mezikrok__akce .tlacitko { flex: 1 1 auto; }
.mezikrok__chyby { margin: 0; }
.mezikrok__chyby ul { margin: 0; padding-left: 18px; }

/* ===== Reklamace / storno objednávky — admin UI (net-new, §9 dle pravnik legal spec
   `sidesign_reklamace_vratka_admin_legal_spec_2026-10-29`). Microcopy právních textů VERBATIM
   dle spec (⛝ vymýšlet). Refund/účto = účetní-gated → DobropisSluzba text netknut. Scope admin. ===== */
.reklamace-stav { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; vertical-align: middle; }
.reklamace-stav--uplatnena { background: var(--zlata-plocha); color: var(--zlata-tmava); }
.reklamace-stav--vyrizena { background: #e3f4e9; color: #1d6b3a; }
.reklamace-stav--zamitnuta { background: #fbeceb; color: #b3261e; }
/* B storno dohodou (titul=dohoda, rodí se rovnou vyrizena) — odznak místo stavu, neutrální */
.reklamace-stav--dohoda { background: #f0f2f5; color: #4a5160; }

/* 30denní lhůta na vyřízení (§19/3 ZOS) — odpočet + po-lhůtě flag */
.reklamace-lhuta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0; padding: 13px 16px; border: 1px solid var(--linka); border-left: 4px solid var(--zlata); border-radius: 8px; background: var(--krem); }
.reklamace-lhuta__cislo { font-size: 24px; font-weight: 700; color: var(--zlata-tmava); font-variant-numeric: tabular-nums; line-height: 1; }
.reklamace-lhuta__popis { font-size: 13px; color: var(--popisek); }
.reklamace-lhuta--po-lhute { border-left-color: #b3261e; background: #fbeceb; }
.reklamace-lhuta--po-lhute .reklamace-lhuta__cislo { color: #b3261e; }

/* detail / protokol — dt/dd řádky */
.reklamace-sekce { margin: 0 0 26px; }
.reklamace-udaje { margin: 0; }
.reklamace-udaje > div { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linka); font-size: 14px; }
.reklamace-udaje > div:last-child { border-bottom: 0; }
.reklamace-udaje dt { flex: 0 0 170px; margin: 0; color: var(--popisek); }
.reklamace-udaje dd { margin: 0; min-width: 0; }

/* refund / legal poznámky (texty z backendu dle spec — ui jen zobrazuje) */
.reklamace-refund { margin: 10px 0 0; padding: 11px 15px; background: #e3f4e9; border: 1px solid #b6ddc4; border-radius: 8px; font-size: 13px; color: #16301f; }
.reklamace-pouceni { margin: 10px 0 0; padding: 11px 15px; background: var(--krem); border: 1px solid var(--linka); border-radius: 8px; font-size: 13px; }
.reklamace-legal-duvod { font-style: italic; color: var(--popisek); }

/* vyřízení: conditional bloky (JS reveal dle zpusob_vyrizeni; bez JS vidět = fallback) */
.reklamace-vysledek-detail { margin: 12px 0 0; padding-left: 14px; border-left: 3px solid var(--linka); }

@media (max-width: 640px) {
    .reklamace-udaje dt { flex-basis: 120px; }
}