/* =====================================================================
   Fajntisk – vzhled webu. Čistý a decentní: hodně volného místa,
   velké nadpisy, jedno písmo (Montserrat, uložené přímo na webu).
   Barvy jsou jen v proměnných níže – po dodání loga se změní tady.
   ===================================================================== */

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/montserrat-latin-ext.woff2") format("woff2");
    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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/montserrat-latin.woff2") format("woff2");
    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;
}

:root {
    /* Značka podle loga (motýl v barvách CMYK, písmo tmavě modré). */
    --azurova: #27aae2;
    --purpurova: #eb0a8e;
    --zluta: #f6ed22;
    --cerna: #36373b;
    --hlavni: #02082a;
    --hlavni-hover: #1d2554;
    --na-hlavni: #ffffff;
    --akcent: #27aae2;
    --cmyk: linear-gradient(90deg, var(--azurova) 0 25%, var(--purpurova) 25% 50%, var(--zluta) 50% 75%, var(--cerna) 75% 100%);

    /* Text a plochy */
    --nadpis: #02082a;
    --text: #3a3d50;
    --tlumeny: #737688;
    --cara: #e6e6ec;
    --tlacitko-podklad: #f2f3f7;
    --tlacitko-podklad-hover: #e7e9f0;
    --tlacitko-okraj: #c3c6d3;
    --podklad: #f6f7fa;
    --plocha: #ffffff;

    /* Stavy */
    --uspech: #1d6b3a;
    --uspech-podklad: #e9f6ee;
    --chyba: #b3261e;
    --chyba-podklad: #fdeeed;
    --varovani: #7a5200;
    --varovani-podklad: #fff6e0;

    --polomer: 12px;
    --polomer-maly: 8px;
    --stin: 0 12px 32px rgba(26, 25, 28, 0.06);
    --sirka: 1140px;
    --okraj: clamp(1rem, 4vw, 2rem);
}

/* ---- Základ ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--text);
    background: var(--plocha);
    -webkit-font-smoothing: antialiased;
}

main {
    max-width: var(--sirka);
    margin: 0 auto;
    padding: 2.5rem var(--okraj) 4rem;
    min-height: 60vh;
}

h1, h2, h3 {
    color: var(--nadpis);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0 0 1rem;
}

h2 {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    margin: 2.5rem 0 1rem;
}

h3 {
    font-size: 1.2rem;
    margin: 1.5rem 0 .5rem;
}

p {
    margin: 0 0 1rem;
}

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

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

small {
    color: var(--tlumeny);
    font-size: .875em;
}

img {
    max-width: 100%;
}

h1:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--akcent);
    outline-offset: 2px;
}

/* ---- Hlavička a patička ---- */
.hlavicka {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    padding: calc(1rem + 4px) max(var(--okraj), calc((100% - var(--sirka)) / 2 + var(--okraj))) 1rem;
    /* Tenký proužek v barvách CMYK nahoře – jako tiskové značky. */
    background: var(--cmyk) top / 100% 4px no-repeat, rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--cara);
}

.hlavicka .znacka {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--nadpis);
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.hlavicka .znacka img {
    display: block;
    width: 40px;
    height: auto;
}

.hlavicka nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
}

.hlavicka nav a,
.hlavicka > a:not(.znacka) {
    font-weight: 500;
    text-decoration: none;
    color: var(--text);
}

.hlavicka nav a:hover,
.hlavicka > a:not(.znacka):hover {
    color: var(--nadpis);
}

.pata {
    border-top: 1px solid var(--cara);
    background: var(--podklad);
    color: var(--tlumeny);
    font-size: .9rem;
    /* Čtyři sloupce (značka, kontakt, informace, právní) v šířce obsahu, na telefonu pod sebou. */
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    padding: 2.5rem max(var(--okraj), calc((100% - var(--sirka)) / 2));
}

.pata-obsah {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.pata p {
    margin: 0;
}

.pata h2 {
    margin: 0 0 .25rem;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nadpis);
}

.pata-kontakt,
.pata-odkazy {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.pata-kontakt a {
    color: var(--tlumeny);
    text-decoration: none;
}

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

    .pata-obsah {
        grid-column: 1 / -1;
    }
}

.pata-odkazy a {
    color: var(--tlumeny);
    text-decoration: none;
}

.pata-odkazy a:hover {
    color: var(--nadpis);
    text-decoration: underline;
}

/* ---- Textové stránky (podmínky, kontakt, otázky) ---- */

.textova-stranka {
    max-width: 46rem;
}

.textova-stranka h2 {
    margin: 2rem 0 .6rem;
    font-size: 1.2rem;
}

.textova-stranka p,
.textova-stranka li {
    line-height: 1.7;
}

.souhlas {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.souhlas input {
    margin-top: .3rem;
}

/* ---- Tlačítka ---- */
button,
.tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font: inherit;
    font-weight: 500;
    font-size: .95rem;
    line-height: 1.2;
    padding: .8rem 1.4rem;
    /* Vedlejší tlačítka: světle šedý podklad, tmavší okraj a jemný stín – na bílé stránce je poznat, že jde kliknout. */
    border: 1px solid var(--tlacitko-okraj);
    border-radius: 999px;
    background: var(--tlacitko-podklad);
    box-shadow: 0 1px 2px rgba(2, 8, 42, 0.08);
    color: var(--nadpis);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

button:hover,
.tlacitko:hover {
    background: var(--tlacitko-podklad-hover);
    border-color: var(--nadpis);
    color: var(--nadpis);
}

button.hlavni,
.tlacitko.hlavni {
    background: var(--hlavni);
    border-color: var(--hlavni);
    color: var(--na-hlavni);
}

button.hlavni:hover,
.tlacitko.hlavni:hover {
    background: var(--hlavni-hover);
    border-color: var(--hlavni-hover);
    color: var(--na-hlavni);
}

button.odkaz {
    border: none;
    background: none;
    padding: 0;
    border-radius: 0;
    font-weight: 400;
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Formuláře ---- */
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select,
textarea {
    font: inherit;
    font-size: 1rem;
    color: var(--nadpis);
    padding: .65rem .85rem;
    border: 1px solid var(--cara);
    border-radius: var(--polomer-maly);
    background: var(--plocha);
    width: 100%;
    transition: border-color .15s;
}

input:not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus {
    border-color: var(--nadpis);
    outline: none;
}

input[type=checkbox],
input[type=radio] {
    accent-color: var(--hlavni);
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    flex: none;
}

input[type=file] {
    font: inherit;
    font-size: .9rem;
    max-width: 100%;
}

input[type=file]::file-selector-button {
    font: inherit;
    font-weight: 500;
    padding: .55rem 1rem;
    margin-right: .75rem;
    border: 1px solid var(--cara);
    border-radius: 999px;
    background: var(--podklad);
    color: var(--nadpis);
    cursor: pointer;
}

fieldset {
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
    padding: 1rem 1.25rem 1.25rem;
    margin: 0;
}

legend {
    font-weight: 600;
    color: var(--nadpis);
    padding: 0 .4rem;
}

.formular {
    max-width: 36rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.formular.uzky {
    max-width: 24rem;
}

.formular fieldset {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.formular label,
.filtr label,
.radek label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--nadpis);
}

.formular label.volba,
label.volba {
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    font-weight: 400;
    font-size: 1rem;
    color: var(--text);
}

.formular small {
    font-weight: 400;
}

/* ---- Hlášky ---- */
.potvrzeni,
.chyba,
.chyby,
.upozorneni {
    border-radius: var(--polomer-maly);
    padding: .8rem 1rem;
    margin: 0 0 1rem;
}

.potvrzeni {
    background: var(--uspech-podklad);
    color: var(--uspech);
    font-weight: 500;
}

.chyba,
.chyby {
    background: var(--chyba-podklad);
    color: var(--chyba);
}

.upozorneni {
    background: var(--varovani-podklad);
    color: var(--varovani);
    font-size: .95rem;
}

li.chyba {
    background: none;
    padding: 0;
    margin: 0;
}

/* ---- Úvodní stránka ---- */
.uvod {
    padding: clamp(2rem, 8vw, 5rem) 0 clamp(2rem, 6vw, 4rem);
    display: grid;
    grid-template-columns: minmax(0, 46rem) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
}

.uvod img {
    justify-self: center;
    width: min(100%, 320px);
    height: auto;
}

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

    .uvod img {
        display: none;
    }
}

.uvod h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
}

.uvod .perex {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--tlumeny);
    margin-bottom: 2rem;
}

.produkty {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.5rem;
}

.produkty li {
    display: flex;
}

.produkty a.karta {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
    background: var(--plocha);
    color: var(--text);
    text-decoration: none;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.produkty a.karta:hover {
    border-color: var(--azurova);
    box-shadow: var(--stin);
    transform: translateY(-2px);
}

.produkty .karta-ikona {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    padding: 10px;
    box-sizing: content-box;
    border-radius: var(--polomer);
    background: var(--podklad);
    transition: transform .2s;
}

.produkty a.karta:hover .karta-ikona {
    transform: rotate(-4deg) scale(1.05);
}

.produkty .karta :is(h2, h3, h4) {
    margin: 0 0 .5rem;
    font-size: 1.3rem;
}

.produkty .karta p {
    color: var(--tlumeny);
    flex: 1;
}

.produkty .karta .vice {
    font-weight: 600;
    color: var(--nadpis);
}

.kroky {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
    counter-reset: krok;
}

.kroky li {
    counter-increment: krok;
    padding: 1.5rem;
    border-radius: var(--polomer);
    border-top: 4px solid var(--azurova);
    background: var(--podklad);
}

.kroky li:nth-child(4n+2) { border-top-color: var(--purpurova); }
.kroky li:nth-child(4n+3) { border-top-color: var(--zluta); }
.kroky li:nth-child(4n+4) { border-top-color: var(--cerna); }

.kroky li::before {
    content: counter(krok, decimal-leading-zero);
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--nadpis);
    margin-bottom: .5rem;
}

.kroky strong {
    display: block;
    color: var(--nadpis);
    margin-bottom: .25rem;
}

.kroky span {
    color: var(--tlumeny);
    font-size: .95rem;
}

.sekce {
    margin-top: clamp(3rem, 8vw, 5rem);
}

/* ---- Konfigurátor ---- */
.konfigurator {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: flex-start;
    margin-top: 2rem;
}

.volby {
    flex: 1 1 24rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.volby > label {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-weight: 600;
    color: var(--nadpis);
}

.volby .volba {
    display: flex;
    font-weight: 400;
    padding: .2rem 0;
}

.volby small {
    font-weight: 400;
}

.cena {
    flex: 1 1 18rem;
    position: sticky;
    top: 6rem;
    padding: 1.75rem;
    border-radius: var(--polomer);
    background: var(--podklad);
}

.cena .castka {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--nadpis);
    margin: 0;
    line-height: 1.2;
}

.cena h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.cena h2 ~ h2 {
    margin-top: 1.5rem;
}

.cena .castka small {
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: 0;
}

.cena table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: .95rem;
}

.cena td {
    padding: .35rem 0;
    border-bottom: 1px solid var(--cara);
}

.cena td:last-child {
    text-align: right;
}

.cena tr.vybrany {
    font-weight: 600;
    color: var(--nadpis);
}

.cena button {
    width: 100%;
    margin-top: .5rem;
}

/* ---- Tabulky (košík, přehled objednávky, správa) ---- */
.prehled,
.tabulka {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: .95rem;
}

.prehled th,
.prehled td,
.tabulka th,
.tabulka td {
    text-align: left;
    padding: .75rem .75rem;
    border-bottom: 1px solid var(--cara);
    vertical-align: top;
}

.prehled th,
.tabulka th {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tlumeny);
}

.prehled td:first-child,
.prehled th:first-child,
.tabulka td:first-child,
.tabulka th:first-child {
    padding-left: 0;
}

.prehled .cislo {
    text-align: right;
    white-space: nowrap;
}

.prehled tfoot td {
    border-bottom: none;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.prehled tr.celkem td {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--nadpis);
    border-top: 2px solid var(--nadpis);
    padding-top: .75rem;
}

/* ---- Rozvržení a karty ---- */
.akce {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.sloupce {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 2rem;
    margin: 1.5rem 0;
}

.sloupce section {
    padding: 1.5rem;
    border-radius: var(--polomer);
    background: var(--podklad);
}

.sloupce h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

/* ---- Tisková data na stránce objednávky ---- */
.data-polozka {
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
}

.data-polozka form {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-top: .75rem;
}

.nalezy {
    margin: .75rem 0;
    padding-left: 1.25rem;
}

.nalezy .opraveno {
    color: var(--tlumeny);
}

.nahledy {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 1rem 0;
}

.nahledy figure {
    margin: 0;
    text-align: center;
}

.nahledy img {
    display: block;
    max-width: 280px;
    max-height: 280px;
    border-radius: var(--polomer-maly);
    box-shadow: var(--stin);
    background: #fff;
}

.nahledy figcaption {
    font-size: .85rem;
    color: var(--tlumeny);
    margin-top: .5rem;
}

.schvaleni {
    padding: 1rem 1.25rem;
    border-radius: var(--polomer-maly);
    background: var(--podklad);
}

/* ---- Platba převodem ---- */
.platba {
    padding: clamp(1.25rem, 3vw, 2rem);
    margin: 1.5rem 0;
    border-radius: var(--polomer);
    background: var(--podklad);
}

.platba h2 {
    margin-top: 0;
}

.platba-obsah {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    margin-bottom: 1rem;
}

.platba-obsah img {
    image-rendering: pixelated;
    border-radius: var(--polomer-maly);
    background: #fff;
    padding: .5rem;
}

.platba dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem 1.5rem;
    margin: 0;
}

.platba dt {
    color: var(--tlumeny);
}

.platba dd {
    margin: 0;
    color: var(--nadpis);
}

/* ---- Správa ---- */
/* ---- Správa: rozvržení s menu vlevo ---- */
.sprava-ramec {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 100vh;
}

.sprava-menu {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: calc(1.5rem + 4px) 1rem 1.5rem;
    background: var(--cmyk) top / 100% 4px no-repeat, var(--hlavni);
    color: #fff;
}

.sprava-znacka {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0 .5rem;
    font-weight: 700;
    font-size: 1.2rem;
    color: inherit;
    text-decoration: none;
}

.sprava-znacka span {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.sprava-znacka small {
    font-weight: 500;
    font-size: .8rem;
    color: inherit;
    opacity: .6;
}

.sprava-menu nav {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.sprava-menu nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .8rem;
    border-radius: var(--polomer-maly);
    border-left: 3px solid transparent;
    color: rgba(255, 255, 255, .75);
    font-weight: 500;
    text-decoration: none;
}

.sprava-menu nav a:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.sprava-menu nav a.active {
    background: rgba(255, 255, 255, .12);
    border-left-color: var(--azurova);
    color: #fff;
}

.odznak {
    min-width: 1.5rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--purpurova);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
}

.sprava-menu .odhlaseni {
    margin: auto 0 0;
    padding: 1rem .5rem 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .75);
}

.sprava-menu .odhlaseni button {
    padding: .4rem .9rem;
    font-size: .85rem;
    background: transparent;
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.sprava-menu .odhlaseni button:hover {
    border-color: #fff;
    color: #fff;
}

main.sprava-obsah {
    max-width: none;
    margin: 0;
    padding: 2rem clamp(1rem, 3vw, 2.75rem) 4rem;
    background: var(--podklad);
}

.sprava-obsah h1 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.sprava-obsah h2 {
    font-size: 1.2rem;
    margin-top: 2rem;
}

/* V obsahu správy jsou bloky na bílých kartách. */
.sprava-obsah .tabulka,
.sprava-obsah .prehled {
    background: var(--plocha);
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.sprava-obsah .tabulka th,
.sprava-obsah .tabulka td,
.sprava-obsah .prehled th,
.sprava-obsah .prehled td {
    padding-left: 1rem;
    padding-right: 1rem;
}

.sprava-obsah .tabulka tr:last-child td {
    border-bottom: none;
}

.sprava-obsah .tabulka tbody tr:hover {
    background: #fafbfd;
}

.sprava-obsah .sloupce section,
.sprava-obsah .formular.akce,
.sprava-obsah section.akce,
.sprava-obsah .platba-k-vyreseni,
.sprava-obsah .filtr {
    background: var(--plocha);
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
}

.sprava-obsah .filtr {
    padding: 1rem 1.25rem;
}

/* Přehled */
.karty {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2.5rem;
}

.karta-stav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.1rem 1.25rem;
    background: var(--plocha);
    border: 1px solid var(--cara);
    border-top: 4px solid var(--cara);
    border-radius: var(--polomer);
    color: var(--text);
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}

a.karta-stav:hover {
    box-shadow: var(--stin);
    transform: translateY(-2px);
    color: var(--text);
}

.karta-stav .pocet {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--nadpis);
}

.karta-stav .nazev {
    font-weight: 600;
    color: var(--nadpis);
}

.karta-stav small {
    font-size: .8rem;
}

.karta-CekaNaData { border-top-color: var(--azurova); }
.karta-CekaNaPlatbu { border-top-color: var(--zluta); }
.karta-Zaplaceno { border-top-color: var(--purpurova); }
.karta-VeVyrobe { border-top-color: var(--cerna); }
.karta-Odeslano { border-top-color: var(--uspech); }
.karta-stav.trzby { border-top-color: var(--hlavni); }
.karta-stav.trzby .pocet { font-size: 1.5rem; }

.pozornost {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: var(--polomer);
    background: var(--varovani-podklad);
    color: var(--varovani);
}

.pozornost h2 {
    margin: 0 0 .25rem;
    font-size: 1rem;
    color: inherit;
}

.pozornost ul {
    margin: 0;
    padding-left: 1.2rem;
}

.pozornost a {
    color: inherit;
    font-weight: 600;
}

.nadpis-s-odkazem {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

/* Přihlášení do správy */
main.sprava-prihlaseni {
    max-width: 26rem;
    margin: 12vh auto;
    padding: 2rem;
    min-height: 0;
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
    box-shadow: var(--stin);
    background: var(--cmyk) top / 100% 4px no-repeat, var(--plocha);
}

main.sprava-prihlaseni .sprava-znacka {
    padding: 0;
    margin-bottom: 1.5rem;
    color: var(--nadpis);
}

main.sprava-prihlaseni h1 {
    font-size: 1.5rem;
}

@media (max-width: 900px) {
    .sprava-ramec {
        grid-template-columns: 1fr;
    }

    .sprava-menu {
        position: static;
        height: auto;
        gap: 1rem;
    }

    .sprava-menu nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sprava-menu .odhlaseni {
        margin: 0;
    }
}

.filtr {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}

.filtr label {
    flex: 1 1 14rem;
}

.radek {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
    margin: .5rem 0;
}

.radek label {
    flex: 1 1 14rem;
}

.stav {
    display: inline-block;
    padding: .15rem .65rem;
    border-radius: 999px;
    background: var(--podklad);
    border: 1px solid var(--cara);
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
}

.stav-CekaNaPlatbu { background: #fff6e0; border-color: #f3e2b5; }
.stav-Zaplaceno, .stav-PredanoDoVyroby, .stav-VeVyrobe { background: #eaf2fd; border-color: #cfe0f7; }
.stav-Odeslano, .stav-Doruceno { background: #e9f6ee; border-color: #c9e6d3; }
.stav-Zruseno { background: #fdeeed; border-color: #f4cfcc; }

.formular.akce,
section.akce,
.platba-k-vyreseni {
    display: block;
    max-width: none;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
}

.formular.akce > * + * {
    margin-top: .75rem;
}

/* ---- Telefon ---- */
@media (max-width: 640px) {
    body {
        font-size: 16px;
    }

    .prehled th:nth-child(n+3),
    .tabulka thead {
        display: none;
    }

    .tabulka,
    .tabulka tbody,
    .tabulka tr,
    .tabulka td {
        display: block;
    }

    .tabulka tr {
        padding: .75rem 0;
        border-bottom: 1px solid var(--cara);
    }

    .tabulka td {
        border: none;
        padding: .1rem 0;
    }
}

/* ---- Chybová lišta Blazoru ---- */
.blazor-error-boundary {
    background: var(--chyba);
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Došlo k chybě.";
}

.kod-parovani {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--nadpis);
    margin: .25rem 0 .5rem;
}

/* ---- Bubliny vlevo dole (bubliny.js) ---- */

.bublina {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    max-width: 360px;
    padding: 0.8rem 3rem 0.8rem 0.85rem;
    background: var(--plocha);
    border: 1px solid var(--cara);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(2, 8, 42, 0.14);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.35;
    animation: bublina-prijde 0.4s ease-out;
}

.bublina.mizi {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s, transform 0.4s;
}

.bublina-ikona {
    flex: none;
    width: 46px;
    height: 46px;
    padding: 8px;
    border-radius: 50%;
    background: var(--podklad);
    object-fit: contain;
}

.bublina-obsah {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.bublina-obsah strong {
    color: var(--nadpis);
}

.bublina-obsah a {
    color: var(--akcent);
    font-weight: 600;
}

.bublina-obsah small {
    color: var(--tlumeny);
    font-size: 0.8rem;
}

.bublina-zavrit {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    width: 1.8rem;
    height: 1.8rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tlumeny);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.bublina-zavrit:hover,
.bublina-zavrit:focus-visible {
    background: var(--podklad);
    color: var(--nadpis);
}

@keyframes bublina-prijde {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .bublina {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        max-width: none;
        border-radius: var(--polomer);
        font-size: 0.85rem;
    }

    .bublina-ikona {
        width: 38px;
        height: 38px;
        padding: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bublina,
    .bublina.mizi {
        animation: none;
        transition: none;
    }
}

.bubliny-nahled {
    padding-left: 1.2rem;
}

.bubliny-nahled li + li {
    margin-top: 0.4rem;
}

.bubliny-nahled small {
    color: var(--tlumeny);
}

.nastaveni-bublin label {
    display: block;
    margin-bottom: 0.7rem;
}

.nastaveni-bublin input[type="number"] {
    max-width: 8rem;
}

/* ---- Menu „Tiskoviny“ v hlavičce ---- */

/* Panel je široký jako obsah hlavičky – od loga po košík (hlavička je „sticky“, tedy výchozí bod pro umístění). */
.menu-tiskoviny {
    position: static;
}

.menu-tiskoviny .menu-odkaz::after {
    content: " ▾";
    font-size: .8em;
    color: var(--tlumeny);
}

.menu-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: max(var(--okraj), calc((100% - var(--sirka)) / 2 + var(--okraj)));
    right: max(var(--okraj), calc((100% - var(--sirka)) / 2 + var(--okraj)));
    z-index: 20;
    padding: 1.5rem 1.75rem;
    gap: 1rem 1.75rem;
    justify-content: space-between;
    background: var(--plocha);
    border: 1px solid var(--cara);
    border-top: 3px solid var(--purpurova);
    border-radius: 0 0 var(--polomer) var(--polomer);
    box-shadow: 0 18px 40px rgba(2, 8, 42, 0.12);
}

/* Neviditelný most mezi odkazem a panelem, ať panel nezmizí při přejezdu myší. */
.menu-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1.25rem - 3px);
    height: 1.25rem;
}

.menu-tiskoviny:hover .menu-panel,
.menu-tiskoviny:focus-within .menu-panel {
    display: flex;
}

.menu-sloupec {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    flex: 0 1 auto;
    /* Na užší obrazovce se dlouhé názvy zalomí, krátké sloupce (Letáky) zůstanou celé. */
    min-width: 8rem;
}

/* Mezi skupinami v jedné skupině (kalendáře: nástěnné | stolní | kapesní) tenká linka. */
.hlavicka nav .menu-skupina li.menu-oddel {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px solid var(--cara);
}

.hlavicka nav .menu-skupina-nazev {
    display: block;
    font-weight: 700;
    color: var(--nadpis);
    margin-bottom: .3rem;
}

.menu-skupina ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-skupina li {
    break-inside: avoid;
}

.hlavicka nav .menu-skupina li a {
    display: block;
    white-space: normal;
    padding: .2rem 0;
    font-size: .92rem;
    color: var(--tlumeny);
}

.hlavicka nav .menu-panel a:hover {
    color: var(--purpurova);
}

/* Na mobilu bez panelu – „Tiskoviny“ vede na přehled na úvodní stránce. */
@media (max-width: 760px) {
    .menu-tiskoviny:hover .menu-panel,
    .menu-tiskoviny:focus-within .menu-panel {
        display: none;
    }
}

/* ---- Šablony ---- */

.nahled-sablony {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--cara);
    border-radius: var(--polomer-maly);
    background: var(--podklad);
}

.chyba-pole {
    display: block;
    color: var(--chyba);
}

.sablony-odkaz {
    margin-top: 2.5rem;
}

.sablona-sprava {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 2rem;
    align-items: start;
}

.pole-sablony fieldset {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem 1rem;
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
    background: var(--plocha);
}

.pole-sablony legend {
    font-weight: 600;
    padding: 0 .4rem;
}

.pole-sablony label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .85rem;
}

.pole-sablony label.volba {
    flex-direction: row;
    align-items: center;
}

.pole-sablony .siroke {
    grid-column: span 2;
}

.pole-sablony input[type="color"] {
    width: 100%;
    height: 2.4rem;
    padding: 0;
}

@media (max-width: 900px) {
    .sablona-sprava,
    .pole-sablony fieldset {
        grid-template-columns: 1fr;
    }
}

/* Účet zákazníka */
.ucet-hlavicka { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ucet-hlavicka h1 { margin-bottom: 4px; }
.zruseni-uctu { margin-top: 48px; }
.zruseni-uctu summary { cursor: pointer; color: #777; }

/* Objednat znovu (stránka objednávky) */
.objednat-znovu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 32px 0 8px; }
.objednat-znovu small { color: #777; }

/* ---------- Editor šablon (/navrh/{id}, wwwroot/editor.js) ---------- */
/* Pevný rámeček ze šablony: fotka se v něm jen posouvá, rámeček se nehýbe. */
.editor-prvek.pevny {
    cursor: default;
}

.editor-fotka.pevny.s-fotkou {
    cursor: grab;
}

.editor-fotka.pevny.s-fotkou:active {
    cursor: grabbing;
}

.editor-pevny {
    margin: 0 0 0.5rem;
    color: var(--text);
}

.editor-oddelovac {
    width: 1px;
    align-self: stretch;
    background: var(--cara);
}

.editor-stav {
    margin-left: auto;
    color: var(--tlumeny);
    font-size: 0.9rem;
}

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

.editor-plocha {
    position: relative;
    width: 100%;
    max-width: 760px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(2, 8, 42, 0.15);
    touch-action: none;
    user-select: none;
    outline: none;
}

.editor-podklad {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.editor-orez,
.editor-bezpecna {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.editor-orez {
    outline: 1px solid rgba(235, 10, 142, 0.8);
    box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.35);
}

.editor-bezpecna {
    outline: 1px dashed rgba(39, 170, 226, 0.9);
}

.editor-prvky {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.editor-prvek {
    position: absolute;
    cursor: move;
    box-sizing: border-box;
}

.editor-prvek.vybrany {
    outline: 2px solid var(--azurova);
    outline-offset: 1px;
}

.editor-prvek.problem {
    outline: 2px dashed var(--chyba);
}

.editor-text-obsah {
    display: block;
    overflow: visible;
    pointer-events: none;
}

.editor-text-obsah text {
    white-space: pre;
}

.editor-fotka {
    background: rgba(200, 200, 200, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.8rem;
    color: var(--cerna);
}

.editor-fotka img {
    position: absolute;
    max-width: none;
    pointer-events: none;
}

.editor-fotka span {
    padding: 0.5rem;
    max-height: 100%;
    overflow: hidden;
}

.editor-tvar.elipsa {
    border-radius: 50%;
}

.editor-uchyt {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid var(--azurova);
    border-radius: 50%;
}

.editor-uchyt-se {
    right: -9px;
    bottom: -9px;
    cursor: nwse-resize;
}

.editor-uchyt-e {
    right: -9px;
    top: calc(50% - 7px);
    cursor: ew-resize;
}

.editor-panel {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--cara);
    border-radius: 8px;
    background: var(--podklad);
}

.editor-vlastnosti {
    display: grid;
    gap: 0.6rem;
}

.editor-vlastnosti[hidden] {
    display: none;
}

.editor-vlastnosti textarea,
.editor-vlastnosti input[type="number"],
.editor-vlastnosti select {
    width: 100%;
    box-sizing: border-box;
}

.editor-vlastnosti input[type="range"] {
    width: 100%;
}

.editor-poradi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.editor-poradi .nebezpecne {
    color: var(--chyba);
}

.editor-problemy {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
}

.editor-problemy li {
    cursor: pointer;
    margin-bottom: 0.3rem;
}

.editor-problemy li.chyba {
    color: var(--chyba);
}

.editor-problemy li.upozorneni {
    color: var(--varovani);
}

.editor-objednani {
    margin-top: 2rem;
}

.editor-varianta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
}

/* Sleva za logo FajnTisk.cz: volba pod formulářem varianty, místo loga v ploše editoru */
.editor-logo {
    flex-basis: 100%;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-weight: 600;
}

.editor-logo-popis {
    flex-basis: 100%;
    margin-top: -0.75rem;
    font-size: 0.8rem;
    color: var(--tlumeny);
}

.editor-logo-zakryje {
    flex-basis: 100%;
    margin: 0;
    color: var(--varovani);
}

.editor-logo-sleva {
    color: var(--azurova);
    font-weight: 600;
}

.editor-znacka {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    outline: 1px dashed rgba(235, 10, 142, 0.8);
}

/* Úchyt otáčení nad prvkem (otáčí se s ním) */
.editor-uchyt-rot {
    left: calc(50% - 7px);
    top: -30px;
    cursor: grab;
}

.editor-uchyt-rot::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    width: 2px;
    height: 14px;
    background: var(--azurova);
}

.editor-otoceni {
    display: flex;
    gap: 0.5rem;
    align-items: end;
}

.editor-ucet-formular {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}

.akce-radku {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Nahraná fotka nebo logo: bez šedého podkladu, ať je vidět průhlednost loga */
.editor-fotka.s-fotkou {
    background: none;
}

/* Poptávka focení */
.foceni-body li {
    margin-bottom: 0.35rem;
}

.formular .past {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.poptavka {
    border: 1px solid var(--cara);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.poptavka.nevyrizena {
    border-left: 4px solid var(--purpurova);
}

.poptavka.vyrizena {
    opacity: 0.7;
}

.poptavka h2 small {
    font-weight: normal;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.poptavka dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
}

.poptavka dd {
    margin: 0;
}

.poptavka .zprava {
    white-space: pre-line;
}

.poptavka form {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.odkaz-foceni {
    margin-top: 2rem;
}

/* Dlouhý seznam problémů (kalendář: 13 stran bez fotky) neroztáhne panel. */
.editor-problemy {
    max-height: 14rem;
    overflow-y: auto;
}

/* ---- Editor na telefonu ---- */
@media (max-width: 760px) {
    /* Hlavička nezabírá místo nad plochou editoru, když se stránka posune. */
    .hlavicka:has(~ main .editor) {
        position: static;
    }

    /* Strany v jednom řádku, posouvají se do strany. */
    .editor-strany {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .editor-strany button {
        flex: 0 0 auto;
    }
}

/* Prst potřebuje větší úchyty než myš. */
@media (pointer: coarse) {
    .editor-uchyt {
        width: 26px;
        height: 26px;
    }

    .editor-uchyt-se {
        right: -14px;
        bottom: -14px;
    }

    .editor-uchyt-e {
        right: -14px;
        top: calc(50% - 13px);
    }

    .editor-uchyt-rot {
        left: calc(50% - 13px);
        top: -42px;
    }

    .editor-uchyt-rot::after {
        left: 10px;
        top: 24px;
    }
}

.editor-fotka-orez {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* ---- Kontakt ---- */
.kontakt-rozvrzeni {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.kontakt-karty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kontakt-karta {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
    background: var(--plocha);
    box-shadow: var(--stin);
    color: var(--nadpis);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.kontakt-karta:hover {
    border-color: var(--akcent);
}

.kontakt-popis {
    font-size: .8rem;
    color: var(--tlumeny);
}

.kontakt-site {
    display: flex;
    gap: 1rem;
}

.kontakt-formular {
    padding: 1.5rem;
    border-radius: var(--polomer);
    background: var(--podklad);
}

.kontakt-formular h2 {
    margin-top: 0;
}

@media (max-width: 760px) {
    .kontakt-rozvrzeni {
        grid-template-columns: 1fr;
    }
}

/* ---- Správa: obsah webu ---- */
.obsah-uprava {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr);
    gap: 2rem;
    align-items: start;
}

.obsah-text {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .9rem;
    line-height: 1.5;
}

.obsah-tlacitka {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.obsah-napoveda {
    padding: 1rem 1.25rem;
    border-radius: var(--polomer-maly);
    background: var(--podklad);
    font-size: .9rem;
}

.obsah-napoveda h2 {
    margin-top: 0;
    font-size: 1rem;
}

.obsah-nahled {
    margin: 2rem 0;
    padding: 1.5rem;
    border: 2px dashed var(--cara);
    border-radius: var(--polomer);
}

.druh-poptavky {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--podklad);
    font-size: .75rem;
    vertical-align: middle;
}

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

/* ---- Editor: zásobník fotek a fotky z mobilu ---- */
.editor-zasobnik {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
    background: var(--podklad);
}

.editor-zasobnik-lista {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.editor-zasobnik-lista h2 {
    margin: 0 auto 0 0;
    font-size: 1.1rem;
}

.editor-zasobnik-napoveda {
    margin: .5rem 0;
    font-size: .85rem;
    color: var(--tlumeny);
}

.editor-zasobnik-fotky {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: .5rem;
}

.editor-zasobnik-fotky li {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--polomer-maly);
    overflow: hidden;
    background: var(--plocha);
    cursor: grab;
    outline: 2px solid transparent;
}

.editor-zasobnik-fotky li:hover {
    outline-color: var(--akcent);
}

.editor-zasobnik-fotky img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fotka už je v rámečku: zašedlá se zatržítkem. */
.editor-zasobnik-fotky li.pouzita img {
    opacity: .45;
}

.editor-zasobnik-fotky li.pouzita::after {
    content: "✓";
    position: absolute;
    left: .35rem;
    bottom: .25rem;
    color: var(--na-hlavni);
    background: var(--uspech);
    border-radius: 999px;
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    font-size: .8rem;
}

.editor-zasobnik-odebrat {
    position: absolute;
    top: .25rem;
    right: .25rem;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(2, 8, 42, .7);
    color: #fff;
    line-height: 1;
    cursor: pointer;
}

.editor-mobil {
    width: min(44rem, calc(100vw - 2rem));
    border: 0;
    border-radius: var(--polomer);
    padding: 1.5rem 2rem;
    box-shadow: var(--stin);
}

.editor-mobil::backdrop {
    background: rgba(2, 8, 42, .45);
}

.editor-mobil h2 {
    margin-top: 0;
}

.editor-mobil-obsah {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
}

.editor-mobil-qr {
    width: 240px;
    height: 240px;
    border: 1px solid var(--cara);
    border-radius: var(--polomer-maly);
    image-rendering: pixelated;
}

.editor-mobil-odkaz a {
    overflow-wrap: anywhere;
}

.editor-mobil-stav {
    color: var(--uspech);
    font-weight: 600;
}

@media (max-width: 600px) {
    .editor-mobil-obsah {
        grid-template-columns: 1fr;
    }
}

/* ---- Fotky z mobilu (stránka z QR kódu) ---- */
.fotky-z-mobilu {
    max-width: 30rem;
    margin: 0 auto;
}

.mobil-vybrat {
    display: block;
    text-align: center;
    padding: 1rem;
    font-size: 1.1rem;
}

.fotky-z-mobilu progress {
    width: 100%;
    margin-top: 1rem;
}

.mobil-stav {
    font-weight: 600;
}

/* ---- Úvodní stránka: výhody, šablony, kontakt ---- */
.uvod .perex p {
    margin: 0 0 .75rem;
}

.vyhody {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
}

.vyhody li {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding-left: 1rem;
    border-left: 4px solid var(--azurova);
}

.vyhody li:nth-child(4n+2) { border-left-color: var(--purpurova); }
.vyhody li:nth-child(4n+3) { border-left-color: var(--zluta); }
.vyhody li:nth-child(4n+4) { border-left-color: var(--cerna); }

.vyhody strong {
    color: var(--nadpis);
    font-size: 1.1rem;
}

.vyhody span {
    color: var(--tlumeny);
}

.uvod-sablony > div {
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--polomer);
    background: var(--hlavni);
    color: var(--na-hlavni);
}

.uvod-sablony h2 {
    margin-top: 0;
    color: var(--na-hlavni);
}

.uvod-sablony p {
    max-width: 44rem;
}

.uvod-sablony .tlacitko.hlavni {
    background: var(--azurova);
    border-color: var(--azurova);
}

.uvod-sablony .tlacitko:not(.hlavni) {
    color: var(--na-hlavni);
    border-color: var(--na-hlavni);
    background: transparent;
}

.uvod-tlacitka {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.5rem 0 0;
}

.uvod-kontakt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 2rem;
    border-radius: var(--polomer);
    background: var(--podklad);
}

.uvod-kontakt h2 {
    margin: 0 0 .25rem;
}

.uvod-kontakt p {
    margin: 0;
}

/* ---- Editor: celá sezóna najednou ---- */
.editor-serie {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border: 1px dashed var(--cara);
    border-radius: var(--polomer);
}

.editor-serie h3 {
    margin-top: 0;
}

.editor-serie textarea {
    font-family: ui-monospace, Consolas, monospace;
}

/* ---- Okno po nahrání tiskových dat (výsledek základní kontroly) ---- */
.okno-prekryv {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--okraj);
    background: rgba(2, 8, 42, 0.55);
}

.okno {
    width: min(100%, 44rem);
    max-height: 100%;
    overflow-y: auto;
    padding: 1.75rem;
    background: var(--plocha);
    border-radius: var(--polomer);
    box-shadow: var(--stin);
}

.okno h2 {
    margin-top: 0;
}

.okno-soubor {
    color: var(--tlumeny);
    overflow-wrap: anywhere;
}

.okno-vysledek {
    padding: .75rem 1rem;
    border-radius: var(--polomer-maly);
}

.okno-vysledek.uspech {
    color: var(--uspech);
    background: var(--uspech-podklad);
}

.okno-vysledek.varovani {
    color: var(--varovani);
    background: var(--varovani-podklad);
}

.okno-vysledek.chyba {
    color: var(--chyba);
    background: var(--chyba-podklad);
}

.okno-tabulka {
    width: 100%;
    font-size: .95rem;
}

.stav-kontroly {
    white-space: nowrap;
    font-weight: 600;
}

.stav-kontroly.stav-ok {
    color: var(--uspech);
}

.stav-kontroly.stav-varovani {
    color: var(--varovani);
}

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

.okno-akce {
    margin: 1.25rem 0 0;
    text-align: right;
}

@media (max-width: 560px) {
    .okno {
        padding: 1.25rem;
    }
}

@media (max-width: 640px) {
    .okno-tabulka td[data-popisek]::before {
        content: attr(data-popisek) ": ";
        color: var(--tlumeny);
    }
}

/* ---- Výsledek kontroly dat ve správě ---- */
.data-kontrola td {
    background: var(--podklad);
}

.nahledy.male img {
    max-width: 140px;
    max-height: 140px;
}

/* ---- Průběh nahrávání tiskových dat (nahravani.js) ---- */
.prubeh-nahravani {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-top: .75rem;
}

.prubeh-nahravani progress {
    flex: 1 1 14rem;
    height: .75rem;
    accent-color: var(--akcent);
}

.chyba-text {
    color: var(--chyba);
}

.schvaleni.riziko {
    border-color: var(--varovani);
    background: var(--varovani-podklad);
}

.data-polozka.pretahovani {
    border-color: var(--akcent);
    border-style: dashed;
    background: var(--podklad);
}

.pretahnout-napoveda {
    color: var(--tlumeny);
}

@media (hover: none) {
    .pretahnout-napoveda {
        display: none;
    }
}

/* ---- Tisková data přiložená v konfigurátoru a v košíku ---- */
.prilozit-pdf {
    display: block;
    margin: 0 0 .75rem;
    font-size: .95rem;
}

.prilozit-pdf input {
    display: block;
    margin-top: .35rem;
}

.kosik-data {
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
}

.kosik-data form {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

/* ---- Tisk z hotových PDF (/podle-souboru) ---- */
.podle-souboru {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    padding: 1.5rem;
    border: 2px dashed var(--cara);
    border-radius: var(--polomer);
}

.podle-souboru.pretahovani {
    border-color: var(--akcent);
    background: var(--podklad);
}

.podle-souboru-navrhy {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    list-style: none;
}

.podle-souboru-navrhy small {
    display: block;
    color: var(--tlumeny);
}

.menu-podle-souboru {
    max-width: 13rem;
    margin: .5rem 0 0;
    font-size: .9rem;
    color: var(--tlumeny);
}

.uvod .tlacitko + .tlacitko {
    margin-left: .5rem;
}

/* ---- Firemní účet ve správě zákazníků ---- */
.firemni-ucet {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    align-items: center;
    font-size: .9rem;
}

.firemni-ucet input[type=number] {
    width: 4.5rem;
}

/* ---- Reklamace ---- */
.reklamace-popis {
    white-space: pre-line;
    padding: 1rem 1.25rem;
    background: var(--podklad);
    border-radius: var(--polomer-maly);
}

.ukazka-tabulky {
    font-size: .85rem;
}

/* ---- Inspirace ---- */
.inspirace {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0 2rem;
}

.inspirace-karta {
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 1.25rem;
    background: var(--plocha);
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
    box-shadow: var(--stin);
}

.inspirace-karta img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--polomer-maly);
}

.inspirace-karta h2 {
    margin: 1rem 0 .25rem;
    font-size: 1.25rem;
}

.inspirace-odkazy {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: auto;
    padding-top: .75rem;
}

.inspirace-karta.skryta {
    opacity: .6;
}

.ukazky-praci {
    margin-top: 2.5rem;
}

.ukazky-praci figcaption {
    margin-top: .5rem;
    font-weight: 600;
}

.inspirace-produkty {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .25rem 1rem;
}

.inspirace-obrazek {
    position: relative;
}

.stitek-ilustracni {
    position: absolute;
    left: .6rem;
    bottom: .6rem;
    padding: .15rem .55rem;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    background: rgba(2, 8, 42, .72);
    border-radius: 999px;
}

.inspirace-karta > p > .stitek-ilustracni {
    position: static;
}

/* ---- Hodnocení zákazníků ---- */
.pro-ctecky {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.hvezdicky {
    display: inline-flex;
    gap: 0.05em;
    font-size: 1.15em;
    line-height: 1;
    vertical-align: -0.1em;
}

.hvezdicky .plna {
    color: #f2b705;
}

.hvezdicky .prazdna {
    color: var(--cara);
}

.hodnoceni-souhrn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.15rem;
}

.hodnoceni-souhrn .hvezdicky {
    font-size: 1.6rem;
}

.hodnoceni-overeni {
    max-width: 60rem;
    color: var(--tlumeny);
}

.hodnoceni-seznam {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.hodnoceni-karta {
    padding: 1rem 1.25rem;
    background: var(--plocha);
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
    box-shadow: var(--stin);
}

.hodnoceni-karta > p {
    margin: 0.5rem 0;
}

.hodnoceni-podpis {
    color: var(--tlumeny);
    font-size: 0.9rem;
}

.overeny-nakup {
    color: var(--uspech);
    font-weight: 600;
}

.hodnoceni-odpoved {
    margin-top: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--podklad);
    border-left: 3px solid var(--purpurova);
    border-radius: var(--polomer-maly);
    font-size: 0.95rem;
}

.hodnoceni-odpoved p {
    margin: 0.25rem 0 0;
}

/* Volba hvězdiček: pořadí 5 → 1 obrácené, takže najetí a zaškrtnutí rozsvítí i hvězdy vlevo. */
.hvezdicky-volba {
    border: 0;
    padding: 0;
}

.hvezdy {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    width: fit-content;
    gap: 0.15rem;
}

.hvezdy input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.hvezdy label {
    font-size: 2.4rem;
    line-height: 1;
    color: var(--cara);
    cursor: pointer;
    transition: color 0.1s;
}

.hvezdy input:checked ~ label,
.hvezdy label:hover,
.hvezdy label:hover ~ label {
    color: #f2b705;
}

.hvezdy input:focus-visible + label {
    outline: 2px solid var(--akcent);
    outline-offset: 2px;
    border-radius: 4px;
}

.hodnoceni-objednavky {
    margin: 1.5rem 0;
}

.sprava-hodnoceni {
    display: grid;
    gap: 1rem;
}

.sprava-hodnoceni .stav-cekanaschvaleni {
    border-color: var(--varovani);
}

.sprava-hodnoceni .stav-skryto {
    opacity: 0.6;
}

/* ---- Rychlý editor vizitek ---- */
.navrhnout-vizitku {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: var(--podklad);
    border-left: 4px solid var(--purpurova);
    border-radius: var(--polomer-maly);
}

.vizitky-volby {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    margin: 1rem 0;
}

.vizitky-volby > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.barva-vzorek {
    display: inline-block;
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--plocha);
    box-shadow: 0 0 0 1px var(--cara);
    cursor: pointer;
}

.barva-vzorek.vybrana,
.barva-vzorek:has(input:checked) {
    box-shadow: 0 0 0 3px var(--akcent);
}

.barva-kolecko {
    display: block;
    width: 100%;
    height: 100%;
}

.barva-vzorek input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.barva-vzorek:has(input:focus-visible) {
    outline: 2px solid var(--akcent);
    outline-offset: 3px;
}

.vizitky-vzory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1.25rem;
    margin: 1rem 0 2rem;
}

.vizitka-vzor {
    padding: 1rem;
    background: var(--plocha);
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
    box-shadow: var(--stin);
}

.vizitka-vzor img,
.vizitka-nahledy img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.vizitka-vzor h2 {
    margin: 0.75rem 0 0.5rem;
    font-size: 1.1rem;
}

.vizitka-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2rem;
    align-items: start;
}

.vizitka-nahledy {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
}

.vizitka-nahledy figure {
    margin: 0;
}

.vizitka-nahledy figcaption {
    margin-top: 0.4rem;
    color: var(--tlumeny);
    font-size: 0.9rem;
}

.vizitky-barvy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

@media (max-width: 760px) {
    .vizitka-editor {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Na telefonu náhled nahoře, ať je vidět, co se píše. */
    .vizitka-nahledy {
        order: -1;
        position: static;
    }
}

/* ---- Zušlechtění v editoru (lak, fólie) – jen naznačení, přesně ukáže náhled ze serveru ---- */
.editor-tvar.zuslechteni-foliezlata {
    background-image: linear-gradient(135deg, #8a6a1f, #f6e27a 30%, #b8892c 55%, #fff4b0 75%, #9c7a27);
}

.editor-tvar.zuslechteni-foliestribrna {
    background-image: linear-gradient(135deg, #7d7d82, #f4f4f6 30%, #9e9ea4 55%, #ffffff 75%, #86868c);
}

.zuslechteni-foliezlata text {
    fill: #c9a227;
}

.zuslechteni-foliestribrna text {
    fill: #a8a8ae;
}

.zuslechteni-foliezlata img {
    filter: sepia(1) saturate(3) hue-rotate(-12deg) brightness(1.05);
}

.zuslechteni-foliestribrna img {
    filter: grayscale(1) brightness(1.35) contrast(1.15);
}

.zuslechteni-lak text,
.zuslechteni-lak img {
    filter: drop-shadow(0 0.6px 0 rgba(0, 0, 0, 0.35));
}

.zuslechteni-lak::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 45%, transparent 60%);
    pointer-events: none;
    mix-blend-mode: screen;
    outline: 1px dashed rgba(39, 170, 226, 0.7);
    outline-offset: 1px;
}

.editor-zuslechteni {
    margin: 0.25rem 0;
    font-weight: 600;
}

/* Tvar se vzorem laku: na ploše jen naznačený vzor (barvou se netiskne). */
.editor-tvar.s-vzorem-laku {
    background-color: rgba(39, 170, 226, 0.06);
    background-repeat: repeat;
    background-position: 0 0;
    outline: 1px dashed rgba(39, 170, 226, 0.8);
    opacity: 0.6;
}

.editor-tvar.s-vzorem-laku.elipsa {
    border-radius: 50%;
}

.vzory-laku {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 1rem;
}

.vzor-laku {
    padding: 0.75rem;
    background: var(--plocha);
    border: 1px solid var(--cara);
    border-radius: var(--polomer);
}

.vzor-laku img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--polomer-maly);
}

.vzor-laku h2 {
    margin: 0.5rem 0 0.25rem;
    font-size: 1rem;
}

.vzor-laku.skryta {
    opacity: 0.55;
}

/* Rámeček formuláře má výchozí min. šířku podle obsahu – na telefonu by přetékal. */
.vizitka-formular fieldset {
    min-width: 0;
}

/* Pole pro výběr souboru má v prohlížeči pevnou šířku – na telefonu by přetékalo (i jeho vnitřní tlačítko a text). */
input[type="file"] {
    width: 100%;
    max-width: 100%;
}

/* Tabulky na telefonu: menší okraje buněk a písmo, ať se vejdou bez posouvání do strany. */
@media (max-width: 480px) {
    .prehled,
    .tabulka {
        font-size: .88rem;
    }

    .prehled th,
    .prehled td,
    .tabulka th,
    .tabulka td {
        padding: .55rem .35rem;
    }

    .prehled th,
    .tabulka th {
        letter-spacing: .02em;
    }

    .prehled tr.celkem td {
        font-size: 1rem;
    }
}

/* Skener vstupenek: velký výsledek čitelný na první pohled u vchodu. */
.skener { max-width: 36rem; }
/* Skryté prvky skeneru (kamera, tlačítka) – styl tlačítek by je jinak ukázal. */
.skener [hidden] { display: none !important; }
.skener-stav { font-size: 1.25rem; }
.skener-vysledek { display: grid; gap: .25rem; padding: 1.25rem; margin: 1rem 0; border-radius: .75rem; text-align: center; background: #eef0f2; color: #02082a; min-height: 5.5rem; align-content: center; }
.skener-vysledek strong { font-size: 2rem; line-height: 1.1; }
.skener-vysledek span { font-size: 1.15rem; }
.skener-vysledek.platna { background: #17803d; color: #fff; }
.skener-vysledek.uz-prosla { background: #e08a00; color: #fff; }
.skener-vysledek.neplatna { background: #c4122f; color: #fff; }
.skener-kamera video { width: 100%; max-height: 50vh; border-radius: .75rem; background: #000; object-fit: cover; }
.skener-rucne input { font-size: 1.25rem; letter-spacing: .05em; text-transform: uppercase; }

/* Košík: doplněk k zásilce (vzorník) a slevový kód. */
.kosik-doplnky { display: grid; gap: 1.25rem; margin: 1.5rem 0; max-width: 40rem; }
.kosik-doplnek { padding: 1rem 1.25rem; border: 1px solid #e3e5e8; border-radius: .75rem; background: #fafafb; }
.kosik-doplnek h2 { font-size: 1.15rem; margin: 0 0 .25rem; }
.kosik-kod label { max-width: 20rem; }

/* Stránky podle příležitosti (svatby, vinaři, plesy, firmy). */
.prilezitost .perex { max-width: 46rem; }
.prilezitost-body { display: grid; gap: .6rem; max-width: 46rem; padding-left: 1.25rem; }
.prilezitost-body li::marker { color: #eb0a8e; }
.skener-sit { font-size: .95rem; color: #17803d; }
.skener-sit.offline { color: #b25e00; font-weight: 600; }
.skener-sit.konflikt { color: #c4122f; }
.skener-rezim { display: flex; flex-wrap: wrap; gap: .5rem 1rem; border: 0; padding: 0; margin: .5rem 0; }
.skener-rezim legend { font-weight: 600; margin-bottom: .25rem; }
.skener-rezim label { display: flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 1px solid #d5d8dc; border-radius: 2rem; font-size: 1.05rem; }
.skener-rezim label:has(input:checked) { border-color: #02082a; background: #02082a; color: #fff; }
/* Výstraha: výsledek bliká, ať si toho člověk u vchodu všimne. */
.skener-vysledek.vystraha { animation: skener-blik .3s step-end 6; }
@keyframes skener-blik { 50% { filter: brightness(1.6); transform: scale(1.03); } }
.skener-pripojeni { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.skener-pripojeni img, .skener-pripojit img { border: 1px solid #e3e5e8; border-radius: .5rem; background: #fff; }
.skener-pripojit summary { cursor: pointer; font-weight: 600; margin: .75rem 0; }
.skener-nabidka { margin: 1rem 0 1.5rem; padding: 1rem 1.25rem; border-left: 4px solid #eb0a8e; background: #fdf2f8; border-radius: .5rem; max-width: 46rem; }
.skener-nabidka h2 { font-size: 1.15rem; margin: 0 0 .4rem; }

/* ---- Fajný vstup (skener vstupenek jako aplikace v telefonu) ---- */
.aplikace { min-height: 100vh; background: #33373b; padding: 1rem; }
.vstup-app { max-width: 24rem; margin: 0 auto; color: #fff; }
.vstup-app a { color: #fff; }
.vstup-karta { background: #fff; color: #33373b; border-radius: 1.1rem; overflow: hidden; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); cursor: default; }
.vstup-hlavicka { background: #ff2a2a; color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: .03em; padding: .65rem 1rem; }
.vstup-telo { padding: 1rem 1.4rem 1.25rem; min-height: 22rem; }
.vstup-akce { color: #ff2a2a; font-size: 1.75rem; font-weight: 800; line-height: 1.15; margin: 0; text-transform: uppercase; }
.vstup-cara { border: 0; border-top: 2px dashed #8a8f94; margin: .9rem 0 1rem; }
.vstup-vyzva { color: #6b7075; font-size: 1.15rem; font-weight: 600; margin: 0 0 .9rem; }
.vstup-hledacek { position: relative; width: 13rem; height: 13rem; margin: 0 auto; display: grid; place-items: center; }
.vstup-hledacek video { width: 100%; height: 100%; object-fit: cover; border-radius: .4rem; }
.vstup-roh { position: absolute; width: 1.6rem; height: 1.6rem; border: 4px solid #6b7075; }
.vstup-roh.lh { top: -.6rem; left: -.6rem; border-right: 0; border-bottom: 0; border-top-left-radius: .6rem; }
.vstup-roh.ph { top: -.6rem; right: -.6rem; border-left: 0; border-bottom: 0; border-top-right-radius: .6rem; }
.vstup-roh.ld { bottom: -.6rem; left: -.6rem; border-right: 0; border-top: 0; border-bottom-left-radius: .6rem; }
.vstup-roh.pd { bottom: -.6rem; right: -.6rem; border-left: 0; border-top: 0; border-bottom-right-radius: .6rem; }
.vstup-bez-kamery { font-size: .9rem; color: #6b7075; margin-top: 1rem; }
.vstup-vysledek { text-align: left; }
.vstup-vysledek p { margin: 0; }
.vstup-popisek { color: #6b7075; font-weight: 600; text-transform: uppercase; font-size: .95rem; }
.vstup-cas { color: #ff2a2a; font-weight: 700; font-size: 1.1rem; min-height: 1.4rem; }
.vstup-verdikt { text-align: center; font-size: 2.6rem; font-weight: 800; margin: .5rem 0 .4rem !important; letter-spacing: .02em; }
.vstup-poznamka { font-size: .95rem; margin-bottom: .5rem !important; }
.vstup-cislo { font-size: 1.6rem; letter-spacing: .04em; margin: .1rem 0 .3rem !important; word-break: break-all; }
.vstup-carovy { width: 100%; height: 3rem; fill: currentColor; }
.vstup-karta.platna .vstup-verdikt { color: #17803d; }
.vstup-karta.neplatna { background: #f07f7a; color: #fff; }
.vstup-karta.neplatna .vstup-akce, .vstup-karta.neplatna .vstup-cas, .vstup-karta.neplatna .vstup-popisek { color: #fff; }
.vstup-karta.neplatna .vstup-cara { border-top-color: #fff; }
.vstup-karta.neplatna .vstup-hlavicka { background: #ff2a2a; }
.vstup-karta.vystraha { animation: skener-blik .3s step-end 6; }
.vstup-sit { background: #17803d; color: #fff; font-weight: 800; letter-spacing: .04em; padding: .6rem 1rem; }
.vstup-sit.offline { background: #e08a00; }
.vstup-statistika { text-align: center; font-size: 1.15rem; margin: 1rem 0; }
.vstup-app .skener-rezim { justify-content: center; }
.vstup-app .skener-rezim legend { width: 100%; text-align: center; color: #fff; }
.vstup-app .skener-rezim label { border-color: #6b7075; color: #fff; }
.vstup-app .skener-rezim label:has(input:checked) { background: #ff2a2a; border-color: #ff2a2a; }
.vstup-app .formular label, .vstup-app summary { color: #fff; }
.vstup-app .skener-rucne input { background: #fff; color: #33373b; }
.vstup-stav { text-align: center; font-size: .9rem; color: #c9ccd0; }
.vstup-stav.konflikt { color: #ffb3b0; font-weight: 700; }
.vstup-app [hidden] { display: none !important; }

/* Navrhněte s AI: prompty ke zkopírování. */
.ai-upozorneni { max-width: 46rem; padding: .9rem 1.1rem; border-left: 4px solid #eb0a8e; background: #fdf2f8; border-radius: .5rem; font-size: .95rem; }
.ai-prompt { max-width: 46rem; margin: 2rem 0; }
.ai-prompt h2 { margin-bottom: .25rem; }
.ai-rozmer { color: var(--tlumeny); font-size: .95rem; margin: 0 0 .5rem; }
.ai-prompt textarea { width: 100%; font: inherit; font-size: .95rem; line-height: 1.5; padding: .75rem; border: 1px solid var(--cara); border-radius: .5rem; background: #fafafb; resize: vertical; }

/* Editor: vzory a AI v pravém panelu. */
.editor-vzory, .editor-ai, .editor-kalendar { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--cara); }
.editor-kalendar h2 { font-size: 1.05rem; margin: 0 0 .25rem; }
.editor-vzory h2 { font-size: 1.05rem; margin: 0 0 .25rem; }
.editor-vzory-mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; max-height: 26rem; overflow-y: auto; padding: .25rem; }
.editor-vzory-mrizka form { margin: 0; }
.editor-vzory-mrizka button { display: block; width: 100%; padding: 0; border: 1px solid var(--cara); border-radius: .4rem; background: #fff; cursor: pointer; overflow: hidden; }
.editor-vzory-mrizka button:hover, .editor-vzory-mrizka button:focus-visible { border-color: var(--purpurova); box-shadow: 0 0 0 2px var(--purpurova); }
.editor-vzory-mrizka img { display: block; width: 100%; height: auto; }
.editor-prazdne { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; margin-top: .75rem; }
.editor-ai summary { cursor: pointer; font-weight: 600; }
.editor-ai textarea { width: 100%; font: inherit; font-size: .85rem; line-height: 1.45; padding: .5rem; border: 1px solid var(--cara); border-radius: .4rem; background: #fafafb; }

/* Tiskovina: dvě cesty – hotová data, nebo vytvořit v editoru. */
.jak-zacit { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.25rem 0 1.75rem; max-width: 52rem; }
.jak-zacit-volba { display: grid; gap: .3rem; padding: 1.1rem 1.25rem; border: 2px solid var(--cara); border-radius: var(--polomer); text-decoration: none; color: inherit; background: var(--plocha); }
.jak-zacit-volba strong { font-size: 1.15rem; color: var(--nadpis); }
.jak-zacit-volba span { color: var(--tlumeny); font-size: .95rem; }
.jak-zacit-volba:hover, .jak-zacit-volba:focus-visible { border-color: var(--purpurova); }
.jak-zacit-volba.hlavni { border-color: var(--purpurova); background: #fdf2f8; }
.produkty .karta-volby h2 a { color: inherit; text-decoration: none; }
.produkty .karta-akce { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }

/* ---- Kalendář na míru ---- */
.editor-prvek.zamceny {
    pointer-events: none;
}

/* Prázdný rámeček ze šablony: velké červené plus uprostřed, klik nabídne fotku. */
.editor-fotka.pevny:not(.s-fotkou) {
    cursor: pointer;
    flex-direction: column;
    gap: 0.25rem;
    background: rgba(229, 231, 235, 0.9);
    color: var(--text);
}

.editor-fotka.pevny:not(.s-fotkou)::before {
    content: "+";
    font-size: 3rem;
    font-weight: 200;
    line-height: 1;
    color: var(--chyba);
}

.editor-fotka-lista {
    position: absolute;
    left: 50%;
    bottom: 0.5rem;
    transform: translateX(-50%);
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    background: rgba(31, 41, 55, 0.85);
}

.editor-fotka-lista button {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: none;
    border-radius: 0.35rem;
    background: none;
    color: #FFFFFF;
    font-size: 1.3rem;
    line-height: 1;
}

.editor-fotka-lista button:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.kalendar-fotek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.75rem 0 0.25rem;
}

.kalendar-fotek button {
    padding: 0.25rem;
    border-radius: 0.35rem;
    border: 2px solid transparent;
    background: none;
}

.kalendar-fotek button svg rect {
    fill: #C4C8CE;
}

.kalendar-fotek button[aria-pressed="true"] {
    border-color: var(--nadpis);
}

.kalendar-fotek button[aria-pressed="true"] svg rect {
    fill: #6B7280;
}

.kalendar-vzhled {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 1.25rem;
    margin-bottom: 0.9rem;
}

.kalendar-vzhled label {
    display: grid;
    gap: 0.2rem;
    font-size: 0.85rem;
}

.kalendar-vzhled select {
    min-width: 9rem;
}

.kalendar-vzhled button {
    padding: 0.45rem 1rem;
}

.kalendar-styly img {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.editor-fotka-lista input[type="range"] {
    width: 8rem;
    margin: 0 0.4rem;
    accent-color: #FFFFFF;
}

/* Fotka s málo body: červený proužek s textem přes horní okraj fotky (celé upozornění v bublině). */
.editor-fotka-varovani {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0.2rem 0.5rem;
    background: rgba(214, 40, 40, 0.9);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: help;
}

/* Přepisování textu přímo na ploše: pole přes text ve stejném písmu. */
.editor-text-uprava {
    position: absolute;
    z-index: 5;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    outline: 2px solid var(--azurova);
    background: rgba(255, 255, 255, 0.55);
    resize: none;
    overflow: hidden;
    white-space: pre;
}

.editor-prvek.upravovany {
    visibility: hidden;
}

.editor-text.pevny {
    cursor: text;
}

/* Naznačená vazba kalendáře (výsek na háček, díry) – jen v editoru, netiskne se. */
.kalendar-vazba {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    pointer-events: none;
}

.kalendar-vazba circle {
    fill: #FFFFFF;
    stroke: #9CA3AF;
    stroke-width: 0.25;
}

/* Co má splňovat tiskové PDF (po volbě „Mám hotová data“ a na stránce podle souboru). */
.pozadavky-pdf { max-width: 52rem; margin: 1.5rem 0 2rem; padding: 1.25rem 1.5rem; border: 2px solid var(--purpurova); border-radius: var(--polomer); background: var(--plocha); scroll-margin-top: 9rem; }
.pozadavky-pdf h2 { margin-top: 0; }
.pozadavky-pdf table { width: 100%; border-collapse: collapse; }
.pozadavky-pdf th, .pozadavky-pdf td { padding: .55rem .75rem; border-bottom: 1px solid var(--cara); text-align: left; vertical-align: top; }
.pozadavky-pdf th { width: 13rem; color: var(--nadpis); font-weight: 600; }
.pozadavky-pdf td small { color: var(--tlumeny); }
.pozadavky-pdf tr:last-child th, .pozadavky-pdf tr:last-child td { border-bottom: 0; }
.pozadavky-pdf > p { margin: .75rem 0 0; color: var(--tlumeny); }

/* „Více informací ▾“: podrobnosti schované, dokud o ně někdo nestojí. */
.vice-informaci { margin: .75rem 0 0; }
.vice-informaci > summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--nadpis); list-style: none; }
.vice-informaci > summary::-webkit-details-marker { display: none; }
.vice-informaci > summary::after { content: "▾"; color: var(--purpurova); transition: transform .15s; }
.vice-informaci[open] > summary::after { transform: rotate(180deg); }
.vice-informaci > table { margin-top: .5rem; }
@media (max-width: 600px) {
    .pozadavky-pdf { padding: 1rem; }
    .pozadavky-pdf th, .pozadavky-pdf td { display: block; width: auto; padding: .2rem 0; border: 0; }
    .pozadavky-pdf td { padding-bottom: .6rem; border-bottom: 1px solid var(--cara); }
}

/* Úvodní věta seznamu chyb („Než návrh půjde do košíku…“) bez odrážky. */
.chyby li.nadpis { list-style: none; margin-left: -1.25rem; font-weight: 600; }

/* Okno v editoru (náhled všech stran, co opravit před košíkem) – na stránce, ne v novém okně prohlížeče. */
.editor-okno {
    width: min(56rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 1.5rem 1.75rem;
    border: 0;
    border-radius: var(--polomer);
    box-shadow: 0 24px 60px rgba(2, 8, 42, 0.3);
    background: var(--plocha);
    color: inherit;
}
.editor-okno::backdrop { background: rgba(2, 8, 42, 0.55); }
.editor-okno h2 { margin: 0 2rem 1rem 0; }
.editor-okno-krizek { position: absolute; top: .75rem; right: .75rem; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%; font-size: 1.4rem; line-height: 1; }
.editor-okno-tlacitka { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; margin-top: 1.25rem; }
.editor-okno-poznamka { color: var(--tlumeny); font-size: .95rem; }
.editor-okno-seznam { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.editor-okno-seznam li { padding: .6rem .9rem; border-radius: var(--polomer-maly); background: var(--chyba-podklad); color: var(--chyba); }
.editor-okno-seznam li:has(> .editor-okno-odkaz) { padding: 0; }
.editor-okno-odkaz { display: block; width: 100%; padding: .6rem .9rem; border: 0; border-radius: var(--polomer-maly); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.editor-okno-odkaz:hover, .editor-okno-odkaz:focus-visible { text-decoration: underline; }
.editor-nahled-strany { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }
.editor-nahled-strany.na-sirku { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.editor-nahled-strany.jedna { grid-template-columns: minmax(0, 24rem); justify-content: center; }
.editor-nahled-strany figure { margin: 0; text-align: center; }
.editor-nahled-strany img { display: block; width: 100%; height: auto; box-shadow: 0 2px 10px rgba(2, 8, 42, 0.18); user-select: none; -webkit-user-drag: none; }
.editor-nahled-strany figcaption { margin-top: .35rem; font-size: .85rem; color: var(--tlumeny); }

/* Čekání po odeslání do košíku. */
.editor-cekani { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 1rem; background: rgba(255, 255, 255, 0.85); }
.editor-cekani p { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--nadpis); }
.editor-cekani-kolecko { width: 3rem; height: 3rem; border: 4px solid var(--cara); border-top-color: var(--purpurova); border-radius: 50%; animation: editor-toceni .8s linear infinite; }
@keyframes editor-toceni { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .editor-cekani-kolecko { animation-duration: 2.4s; } }

/* Po kliknutí na odkaz v menu Tiskoviny zůstane panel zavřený, dokud myš menu neopustí (menu.js). */
.menu-tiskoviny.zavrene .menu-panel { display: none; }
.editor-okno h3 { margin: 1.1rem 0 .5rem; font-size: 1rem; }
.editor-okno-seznam.upozorneni { padding: 0; background: none; }
.editor-okno-seznam.upozorneni li { background: var(--varovani-podklad); color: var(--varovani); }
.editor-okno-presto { display: grid; justify-items: start; gap: .4rem; margin-top: 1rem; }
.editor-okno-presto small { color: var(--tlumeny); }
.editor-okno-seznam.upozorneni li { display: flex; align-items: center; gap: .5rem; }
.editor-okno-seznam.upozorneni .editor-okno-odkaz { flex: 1; }
.editor-okno-nemam { display: flex; align-items: center; gap: .4rem; padding-right: .9rem; white-space: nowrap; font-size: .9rem; cursor: pointer; }
.editor-okno-presto .editor-okno-tlacitka { justify-content: flex-start; margin-top: 0; }
.editor-okno button:disabled { opacity: .4; cursor: not-allowed; }

.nezalamovat { white-space: nowrap; }
/* Výběr kalendáře: druh a formát jako hustá řada menších tlačítek. */
.kalendar-volby { display: grid; gap: 0.5rem; margin: 1rem 0 1.25rem; }
.kalendar-volby > div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kalendar-volby .tlacitko { padding: 0.45rem 0.9rem; font-size: 0.9rem; }

/* Karta stylu kalendáře: klik kamkoli na kartu (tlačítko „Vybrat a vložit fotky“ se přes ni roztáhne). */
.kalendar-styl { position: relative; transition: border-color .15s, box-shadow .15s; }
.kalendar-styl button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kalendar-styl:hover, .kalendar-styl:focus-within { border-color: var(--purpurova); box-shadow: 0 6px 22px rgba(2, 8, 42, 0.14); }
.kalendar-styl:hover { cursor: pointer; }
/* Sleva za logo: tučně „Sleva 5 %“, pod tím menším písmem, co to znamená. */
.editor-logo span small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--tlumeny); }
.editor-objednani .editor-logo-popis { margin: 0 0 1rem; }

/* ---- Stránka tiskoviny: volby jako dlaždice ---- */
.volby fieldset.dlazdice { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; }
.volby fieldset.dlazdice > legend { width: 100%; margin-bottom: .45rem; padding: 0; font-weight: 600; color: var(--nadpis); }
.volby .dlazdice-volba {
    position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem;
    border: 1px solid var(--tlacitko-okraj); border-radius: var(--polomer-maly); background: var(--plocha);
    font-weight: 500; color: var(--nadpis); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.volby .dlazdice-volba:hover { border-color: var(--nadpis); }
.volby .dlazdice-volba input { position: absolute; opacity: 0; pointer-events: none; }
.volby .dlazdice-volba:has(input:checked) { border-color: var(--purpurova); background: #fdf2f8; box-shadow: inset 0 0 0 1px var(--purpurova); }
.volby .dlazdice-volba:has(input:focus-visible) { outline: 2px solid var(--purpurova); outline-offset: 2px; }
.volby .dlazdice-volba small { display: block; font-size: .78rem; font-weight: 400; color: var(--tlumeny); }
.dlazdice-ikona, .dlazdice-ilustrace { flex: none; }
.dlazdice-ilustrace { width: 36px; height: 36px; margin: -4px 0; }
.dlazdice-naklad .dlazdice-volba { flex-direction: column; align-items: center; min-width: 6.5rem; text-align: center; }
.dlazdice-jiny { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--tlumeny); }
.dlazdice-jiny input { width: 7rem; }
.dlazdice-naklad > small { width: 100%; }

/* Rychlý výběr hotových sestav. */
.rychly-vyber { margin: 1.5rem 0 0; }
.rychly-vyber h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.rychly-vyber > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem; max-width: 52rem; }
.rychly-vyber-karta {
    display: grid; gap: .2rem; padding: .9rem 1.1rem; border: 1px solid var(--tlacitko-okraj); border-radius: var(--polomer);
    background: var(--plocha); color: inherit; text-decoration: none;
}
.rychly-vyber-karta strong { color: var(--nadpis); }
.rychly-vyber-karta span { font-size: .9rem; color: var(--tlumeny); }
.rychly-vyber-karta:hover { border-color: var(--nadpis); }
.rychly-vyber-karta.vybrana { border-color: var(--purpurova); background: #fdf2f8; box-shadow: inset 0 0 0 1px var(--purpurova); }


/* Nestandardní zakázka. */
.nestandardni {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 2rem 0; padding: 1.25rem 1.5rem; border: 1px solid var(--cara); border-radius: var(--polomer); background: var(--podklad);
}
.nestandardni h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
.nestandardni p { margin: 0; color: var(--tlumeny); }
.cena .cena-nebo { display: flex; align-items: center; gap: .6rem; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; }
.cena .cena-nebo::before, .cena .cena-nebo::after { content: ""; flex: 1; border-top: 1px solid var(--cara); }

.fe-vizualizace { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; max-width: 40rem; margin: 0 auto; }
.fe-vizualizace.dve { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.fe-vizualizace img { display: block; width: 100%; height: auto; border-radius: var(--polomer-maly); background: var(--podklad); aspect-ratio: 16 / 10; user-select: none; }
@media (max-width: 600px) { .fe-vizualizace { grid-template-columns: minmax(0, 1fr); } }

/* ---- Návod k editoru ---- */
.navod { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.navod-obsah { position: sticky; top: 6rem; display: grid; gap: .5rem; padding-left: 1rem; border-left: 2px solid var(--cara); }
.navod-obsah strong { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tlumeny); }
.navod-obsah a { color: var(--text); text-decoration: none; }
.navod-obsah a:hover { color: var(--purpurova); }
.navod-text { max-width: 48rem; }
.navod-text section { margin-top: 2.5rem; scroll-margin-top: 6rem; }
.navod-stitek { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--purpurova); }
.navod-text h2 { margin-top: .3rem; }
.navod-kroky { display: grid; gap: 1rem; padding-left: 1.4rem; }
.navod-kroky li::marker { font-weight: 700; color: var(--purpurova); }
.navod-kroky span { display: block; color: var(--tlumeny); }
.navod-tabulka { width: 100%; border-collapse: collapse; }
.navod-tabulka th, .navod-tabulka td { padding: .7rem .5rem; border-bottom: 1px solid var(--cara); text-align: left; vertical-align: top; }
.navod-tabulka th { width: 9rem; color: var(--nadpis); }
.navod-tip { margin-top: 1.25rem; padding: 1rem 1.25rem; border-left: 3px solid var(--purpurova); border-radius: var(--polomer-maly); background: var(--podklad); }
.navod-tip p { margin: .3rem 0 0; }
.navod-otazka { padding: .75rem 0; border-bottom: 1px solid var(--cara); }
.navod-otazka summary { font-weight: 600; cursor: pointer; color: var(--nadpis); }
.navod-otazka p { margin: .5rem 0 0; color: var(--tlumeny); }
@media (max-width: 800px) { .navod { grid-template-columns: minmax(0, 1fr); } .navod-obsah { position: static; } }

/* ---- Chat „Napište nám“ (vpravo dole) ---- */
.chat { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.chat-tlacitko {
    position: relative; gap: .45rem; padding: .75rem 1.1rem; border: 0; border-radius: 999px;
    background: var(--hlavni); color: var(--na-hlavni); box-shadow: 0 8px 24px rgba(2, 8, 42, .25); font-weight: 600;
}
.chat-tlacitko:hover { background: var(--hlavni-hover); color: var(--na-hlavni); border-color: transparent; }
.chat-tlacitko svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.chat-novinka { position: absolute; top: .3rem; right: .3rem; width: .7rem; height: .7rem; border: 2px solid var(--plocha); border-radius: 50%; background: var(--purpurova); }
.chat-novinka[hidden] { display: none; }
.chat.otevreny .chat-tlacitko { display: none; }
.chat-okno {
    display: flex; flex-direction: column; width: min(22rem, calc(100vw - 2.5rem)); height: min(32rem, calc(100vh - 6rem));
    border: 1px solid var(--cara); border-radius: var(--polomer); background: var(--plocha); box-shadow: 0 18px 48px rgba(2, 8, 42, .25); overflow: hidden;
}
.chat-okno[hidden] { display: none; }
.chat-okno header { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .85rem 1rem; background: var(--hlavni); color: var(--na-hlavni); }
.chat-okno header small { display: block; opacity: .8; font-size: .8rem; }
.chat-zavrit { width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: inherit; box-shadow: none; font-size: 1.2rem; }
.chat-zavrit:hover { background: rgba(255, 255, 255, .3); color: inherit; }
.chat-zpravy { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: .9rem; overflow-y: auto; background: var(--podklad); }
.chat-zprava { max-width: 85%; margin: 0; padding: .55rem .8rem; border-radius: 1rem; white-space: pre-wrap; font-size: .92rem; line-height: 1.4; }
.chat-zprava small { display: block; margin-top: .2rem; font-size: .7rem; opacity: .65; }
.chat-zprava.od-nas { align-self: flex-start; border-bottom-left-radius: .3rem; background: var(--plocha); color: var(--text); box-shadow: 0 1px 2px rgba(2, 8, 42, .08); }
.chat-zprava.od-vas { align-self: flex-end; border-bottom-right-radius: .3rem; background: var(--hlavni); color: var(--na-hlavni); }
.chat-email { padding: .6rem .9rem; border-top: 1px solid var(--cara); font-size: .82rem; color: var(--tlumeny); }
.chat-email[hidden] { display: none; }
.chat-email span { display: flex; gap: .4rem; margin-top: .3rem; }
.chat-email input { flex: 1; min-width: 0; padding: .4rem .6rem; }
.chat-email button { padding: .4rem .8rem; }
.chat-chyba { margin: 0; padding: .4rem .9rem; color: var(--chyba); font-size: .85rem; }
.chat-chyba[hidden] { display: none; }
.chat-psani { display: flex; gap: .5rem; align-items: flex-end; padding: .7rem; border-top: 1px solid var(--cara); }
.chat-psani textarea { flex: 1; min-width: 0; resize: none; padding: .5rem .7rem; border: 1px solid var(--cara); border-radius: var(--polomer-maly); font: inherit; font-size: .92rem; }
.chat-psani button { padding: .55rem .9rem; }
@media print { .chat { display: none; } }

/* Správa – chat */
.chat-spravy-zpravy { display: grid; gap: .5rem; margin: .75rem 0; padding: 0; list-style: none; }
.chat-spravy-zpravy li { max-width: 80%; padding: .5rem .8rem; border-radius: .8rem; background: var(--podklad); }
.chat-spravy-zpravy li.od-nas { justify-self: end; background: #e8f1ff; }
.chat-spravy-zpravy small { color: var(--tlumeny); }
.chat-spravy-zpravy p { margin: .2rem 0 0; white-space: pre-wrap; }
.chat-odpoved { display: grid; gap: .5rem; margin-bottom: .5rem; }
.chat-odpoved textarea { width: 100%; }
/* Stránka tiskoviny: na začátku jen cena od a volba, jak začít; u hotových dat volby schované pod „Upravit vlastnosti“. */
.cena-od { margin: .25rem 0 0; font-size: 1.15rem; font-weight: 600; color: var(--nadpis); }
.volby details.vlastnosti { margin: 0 0 1.25rem; }
.volby details.vlastnosti > summary,
.do-kosiku details.personalizace > summary {
    cursor: pointer; padding: .6rem .9rem; border: 1px solid var(--tlacitko-okraj); border-radius: var(--polomer);
    background: var(--plocha); color: var(--nadpis); font-weight: 600; list-style-position: inside;
}
.volby details.vlastnosti[open] > summary { margin-bottom: 1rem; }
.do-kosiku details.personalizace { margin: .75rem 0; }
.do-kosiku details.personalizace > summary { font-weight: 500; font-size: .95rem; }
.do-kosiku details.personalizace[open] { display: grid; gap: .5rem; }

/* Editor: QR / čárový kód na ploše (SVG ze serveru), QR vystředěný ve čtverci. */
.editor-prvek.s-kodem img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
/* Okno „QR kód“: položky kontaktu ve dvou sloupcích, barva kódu a podklad pod ním. */
.fe-okno-qr { width: min(40rem, calc(100vw - 2rem)); }
.fe-qr-formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .8rem; margin: .75rem 0; }
.fe-qr-formular label { display: grid; gap: .15rem; font-size: .8rem; font-weight: 500; color: var(--tlumeny); }
.fe-qr-formular input:not([type="checkbox"]):not([type="color"]) { padding: .4rem .6rem; font-size: .92rem; color: var(--text); }
.fe-qr-formular .fe-qr-barva { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .88rem; color: var(--text); }
.fe-qr-formular .fe-qr-barva span { display: inline-flex; align-items: center; gap: .4rem; }
.fe-qr-formular input[type="color"] { width: 3.2rem; height: 2rem; padding: 2px; }
@media (max-width: 520px) { .fe-qr-formular { grid-template-columns: minmax(0, 1fr); } }
.fe-okno-qr .fe-qr-formular .fe-qr-barva { grid-column: 1 / -1; justify-content: flex-start; gap: .75rem; white-space: nowrap; }
.fe-okno-qr .fe-qr-formular input[type="color"] { flex: none; width: 3.2rem; height: 2rem; padding: 2px; border-radius: var(--polomer-maly); }
/* Okno „QR kód“: záložky Kontakt / Vlastní text nebo odkaz. */
.fe-qr-zalozky { display: flex; gap: .25rem; margin: .5rem 0 .25rem; padding: .2rem; border-radius: 999px; background: var(--podklad); width: max-content; max-width: 100%; }
.fe-qr-zalozky button { padding: .4rem .9rem; border: 0; border-radius: 999px; background: none; box-shadow: none; font-size: .88rem; color: var(--tlumeny); }
.fe-qr-zalozky button[aria-selected="true"] { background: var(--plocha); color: var(--purpurova); box-shadow: 0 1px 3px rgba(2, 8, 42, .15); }
.fe-qr-text { display: grid; gap: .2rem; margin: .5rem 0; font-size: .8rem; font-weight: 500; color: var(--tlumeny); }
.fe-qr-text textarea { width: 100%; padding: .5rem .6rem; font: inherit; font-size: .95rem; color: var(--text); resize: vertical; }

/* ---- Úvodní stránka: bannery tiskovin (jako vzory majitele: světlé pozadí s přechodem a „podlahou“, tiskovina velká,
   malý prostrkaný nadtitul, ozdobný název, cena mezi tenkými linkami, decentní tlačítko) ---- */
@font-face { font-family: "Fajn Script"; src: url("/pisma/dancingscript-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fajn Raleway"; src: url("/pisma/raleway-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
.bannery { position: relative; margin: 0 0 2.5rem; }
.bannery-koleje {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
    border-radius: var(--polomer);
}
.bannery-koleje::-webkit-scrollbar { display: none; }
/* Odstíny: zhruba 20 % azurové, purpurové, žluté a 10 % černé; tmavší tón pro název. */
.banner-c { --banner: #cfeaf7; --banner-nazev: #1784b5; }
.banner-m { --banner: #f9d2e6; --banner-nazev: #c40c78; }
.banner-y { --banner: #fbf6c9; --banner-nazev: #b99a00; }
.banner-k { --banner: #e6e7ea; --banner-nazev: #36373b; }
.banner {
    position: relative; flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: "text obrazek"; align-items: center;
    min-height: 25rem; padding: 0 3rem;
    background:
        radial-gradient(110% 95% at 68% 30%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 62%),
        var(--banner);
}
.banner.banner-obracene { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "obrazek text"; }
/* Podlaha: světlejší pruh dole, tiskovina na ní „leží“. */
.banner::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15));
    border-top: 1px solid rgba(255, 255, 255, .8);
}
.banner-text { grid-area: text; position: relative; z-index: 1; text-align: center; padding: 2rem 0; }
.banner-nadtitul { margin: 0; font-family: "Fajn Raleway", sans-serif; font-size: .9rem; letter-spacing: .32em; text-transform: uppercase; color: var(--tlumeny); }
.banner-text h2 {
    margin: .1rem 0 .4rem; font-family: "Fajn Script", cursive; font-weight: 700; font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1.05;
    color: var(--banner-nazev); text-shadow: 0 2px 0 rgba(255, 255, 255, .8);
}
.banner-veta { margin: 0 auto; max-width: 24rem; font-family: "Fajn Raleway", sans-serif; font-size: 1.05rem; color: var(--text); }
.banner-cena { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 1.2rem auto .9rem; max-width: 22rem; }
.banner-cena::before, .banner-cena::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .25; }
.banner-cena span { font-size: 1.45rem; font-weight: 700; letter-spacing: .02em; color: var(--nadpis); white-space: nowrap; }
.banner-tlacitko {
    display: inline-block; padding: .45rem 1.1rem; border-radius: 3px; background: rgba(255, 255, 255, .85); color: var(--nadpis);
    font-size: .85rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
    box-shadow: 0 1px 2px rgba(2, 8, 42, .12);
}
.banner-tlacitko:hover, .banner-tlacitko:focus-visible { background: var(--nadpis); color: #fff; }
.banner-obrazek { grid-area: obrazek; position: relative; z-index: 1; display: block; align-self: stretch; }
.banner-obrazek img { display: block; width: 100%; height: 100%; max-height: 27rem; object-fit: contain; margin-block: -1rem; }
.banner-dph { position: absolute; right: 1rem; bottom: .6rem; z-index: 1; font-size: .7rem; color: var(--tlumeny); opacity: .8; }
.bannery-tecky { display: flex; justify-content: center; gap: .5rem; margin-top: .75rem; }
.bannery-tecky button { width: .7rem; height: .7rem; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--cara); box-shadow: none; }
.bannery-tecky button[aria-current="true"] { width: 1.6rem; border-radius: 999px; background: var(--purpurova); }
@media (max-width: 700px) {
    .banner, .banner.banner-obracene { grid-template-columns: minmax(0, 1fr); grid-template-areas: "obrazek" "text"; padding: 0 1.25rem; min-height: 0; }
    .banner-text { padding: 0 0 1.75rem; }
    .banner-obrazek img { max-height: 14rem; margin-block: 0; }
    .banner::after { height: 52%; }
}
@media (prefers-reduced-motion: reduce) { .bannery-koleje { scroll-behavior: auto; } }

/* ---- Web jen pro zvané (vstupní stránka) ---- */
.zvani { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem 1rem; }
.zvani-karta { max-width: 32rem; width: 100%; text-align: center; }
.zvani-karta img { width: min(60vw, 240px); height: auto; margin-bottom: 1.5rem; }
.zvani-karta h1 { margin: 0 0 1rem; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1.08; letter-spacing: -0.03em; }
.zvani-karta .perex { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--tlumeny); margin: 0 auto; max-width: 28rem; }
.zvani-karta .formular { margin: 2rem auto 0; text-align: left; }

/* ---- Kalendář na míru: výběr po krocích ---- */
.pruvodce-souhrn { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.pruvodce-souhrn li { display: flex; align-items: baseline; gap: .5rem; padding: .4rem .8rem; background: var(--plocha); border: 1px solid var(--cara); border-radius: 999px; font-weight: 600; }
.pruvodce-souhrn li::before { content: "✓"; color: var(--purpurova); }
.pruvodce-souhrn a { font-weight: 400; font-size: .85rem; }
.pruvodce-krok { margin: 0 0 1rem; }
.pruvodce-dlazdice { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 1rem; margin: 0 0 2rem; }
.pruvodce-volba { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.25rem 1rem; text-align: center; color: var(--text); text-decoration: none; background: var(--plocha); border: 1px solid var(--cara); border-radius: var(--polomer); box-shadow: var(--stin); transition: border-color .15s, box-shadow .15s, transform .15s; }
.pruvodce-volba:hover, .pruvodce-volba:focus-visible { border-color: var(--purpurova); box-shadow: 0 6px 22px rgba(2, 8, 42, .14); transform: translateY(-2px); }
.pruvodce-volba strong { font-size: 1.1rem; color: var(--nadpis); }
.pruvodce-volba span { font-size: .9rem; color: var(--tlumeny); }
.pruvodce-volba .pruvodce-cena { margin-top: .25rem; font-weight: 600; color: var(--purpurova); }
.pruvodce-popis { margin: 0 0 1.5rem; color: var(--text); }
.pruvodce-popis .pruvodce-cena { display: block; margin-top: .35rem; color: var(--purpurova); }
.pruvodce-ilustrace, .pruvodce-volba .ilustrace-formatu { flex: none; margin-bottom: .25rem; }
.pruvodce-ilustrace { width: 96px; height: 96px; }
/* Prázdná stránka ve výběru rozvržení: bílá plocha v poměru stránky (A4 / A5 na šířku se spadávkou). */
.kniha-prazdna { display: block; width: 100%; aspect-ratio: 303 / 216; background: #FFFFFF; border: 1px dashed var(--cara); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.kniha-prazdna.na-vysku { aspect-ratio: 216 / 303; }

/* Listování hotovou knihou: okno přes celou obrazovku, stránky jako kniha, list se otáčí kolem hřbetu (CSS 3D). */
.listovani {
    width: min(96vw, 1400px); max-width: none; height: min(94vh, 900px); max-height: none; padding: 0.75rem 1rem;
    border: 0; border-radius: 0.75rem; background: #2B2D3A; color: #FFFFFF;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.5rem;
}
.listovani:not([open]) { display: none; }
.listovani::backdrop { background: rgba(10, 12, 24, 0.75); }
.listovani-hlava { display: flex; align-items: center; gap: 1rem; }
.listovani-hlava h2 { margin: 0; font-size: 1.1rem; color: #FFFFFF; }
.listovani-stav { margin: 0; flex: 1; font-size: 0.9rem; opacity: 0.85; }
.listovani-zavrit { width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; font-size: 1.4rem; line-height: 1; }
.listovani-scena { display: flex; align-items: center; justify-content: center; min-height: 0; perspective: 2600px; overflow: hidden; }
.listovani-kniha {
    position: relative; display: grid; grid-template-columns: 1fr 1fr;
    /* Dvoustrana: dvě stránky vedle sebe, vejde se na výšku i na šířku scény. */
    aspect-ratio: calc(2 * var(--pomer)); width: min(100%, calc((94vh - 9rem) * 2 * var(--pomer)));
    max-height: 100%; touch-action: pan-y; user-select: none; cursor: pointer;
}
.listovani-kniha.jednotlive { grid-template-columns: 1fr; aspect-ratio: var(--pomer); width: min(100%, calc((94vh - 9rem) * var(--pomer))); }
.listovani-strana { position: relative; overflow: hidden; background: #FFFFFF; }
.listovani-strana img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.listovani-strana.bez-stranky { background: transparent; }
.listovani-kniha:not(.jednotlive) .vlevo:not(.bez-stranky) { box-shadow: inset -18px 0 24px -18px rgba(0, 0, 0, 0.45), -4px 6px 18px rgba(0, 0, 0, 0.35); }
.listovani-kniha:not(.jednotlive) .vpravo:not(.bez-stranky) { box-shadow: inset 18px 0 24px -18px rgba(0, 0, 0, 0.45), 4px 6px 18px rgba(0, 0, 0, 0.35); }
.listovani-kniha.jednotlive .vlevo { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.listovani-list {
    position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.35, 1); z-index: 2;
}
.listovani-list.dopredu { left: 50%; transform-origin: left center; }
.listovani-list.dozadu { left: 0; transform-origin: right center; }
.listovani-list.cely { width: 100%; left: 0; }
.listovani-list.dopredu.otoceny { transform: rotateY(-180deg); }
.listovani-list.dozadu.otoceny { transform: rotateY(180deg); }
.listovani-list .lic, .listovani-list .rub { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.listovani-list .rub { transform: rotateY(180deg); }
.listovani-list.cely .rub { background: #F4F4F6; }
.listovani-ovladani { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.listovani-ovladani button { min-width: 3rem; font-size: 1.2rem; }
.listovani-ovladani button:disabled { opacity: 0.35; cursor: not-allowed; }
.listovani-napoveda { margin: 0; font-size: 0.8rem; opacity: 0.75; text-align: center; }
@media (max-width: 700px) {
    .listovani { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; padding: 0.5rem 16px; }
    .listovani-kniha.jednotlive { width: min(100%, calc((100dvh - 9rem) * var(--pomer))); }
}
@media (prefers-reduced-motion: reduce) {
    .listovani-list { transition: none; }
}

/* ---------- Galerie šablon (/sablony) a pás „Vyberte hotový styl“ ---------- */
.sablony-hledani {
    display: flex;
    gap: .5rem;
    max-width: 36rem;
    margin: 1rem 0 .75rem;
}

.sablony-hledani input[type=search] {
    flex: 1;
    min-width: 0;
    border-radius: 999px;
    padding-left: 1.1rem;
}

.sablony-filtry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.5rem;
}

/* Rozbalovací filtr (details): bez skriptu, nabídka jsou obyčejné odkazy. */
.filtr-menu {
    position: relative;
}

.filtr-menu summary {
    list-style: none;
    cursor: pointer;
    padding: .4rem .9rem;
    border: 1px solid var(--tlacitko-okraj);
    border-radius: 999px;
    background: var(--plocha);
    font-size: .92rem;
    color: var(--nadpis);
    user-select: none;
}

.filtr-menu summary::-webkit-details-marker {
    display: none;
}

.filtr-menu summary.vybrany {
    background: var(--hlavni);
    border-color: var(--hlavni);
    color: var(--na-hlavni);
}

.filtr-menu ul {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    min-width: 13rem;
    max-width: calc(100vw - 2rem);
    max-height: 60vh;
    overflow: auto;
    margin: 0;
    padding: .35rem;
    list-style: none;
    background: var(--plocha);
    border: 1px solid var(--cara);
    border-radius: var(--polomer-maly);
    box-shadow: 0 12px 32px rgba(2, 8, 42, .16);
}

.filtr-menu a {
    display: block;
    padding: .45rem .65rem;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
}

.filtr-menu a:hover {
    background: var(--podklad);
}

.filtr-menu a[aria-current] {
    font-weight: 600;
    color: var(--nadpis);
}

.filtr-zrusit {
    font-size: .9rem;
}

.sablony-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: 1.25rem 1rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

/* Karta šablony: celý náhled (bez ořezu, i na šířku) na světle šedé ploše stejné výšky. */
.karta-sablony a {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    height: 100%;
    color: var(--text);
    text-decoration: none;
}

.karta-sablony-plocha {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    margin-bottom: .45rem;
    background: #eef0f4;
    border-radius: var(--polomer-maly);
    transition: background-color .15s;
}

.karta-sablony-plocha img {
    position: absolute;
    inset: 10%;
    width: 80%;
    height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(2, 8, 42, .22));
    transition: transform .15s;
}

.karta-sablony a:hover .karta-sablony-plocha {
    background: #e3e6ee;
}

.karta-sablony a:hover .karta-sablony-plocha img {
    transform: translateY(-3px);
}

.karta-sablony strong {
    font-size: .95rem;
    line-height: 1.3;
    color: var(--nadpis);
}

.karta-sablony small {
    font-size: .8rem;
    color: var(--tlumeny);
}

.karta-sablony .vice {
    margin-top: .15rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--purpurova);
}

.karta-prazdna .karta-sablony-plocha {
    border: 2px dashed var(--tlacitko-okraj);
    background: var(--plocha);
}

.plus {
    font-size: 2.6rem;
    font-weight: 300;
    line-height: 1;
    color: var(--tlumeny);
}

/* ---------- Okno šablony (/sablona/{kód}, sablona-okno.js) ---------- */
.sablona-zpet {
    margin: 0 0 1rem;
}

.sablona-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.5rem 2rem;
    align-items: start;
}

.sablona-velky {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #eef0f4;
    border-radius: var(--polomer);
}

.sablona-velky img {
    position: absolute;
    inset: 6%;
    width: 88%;
    height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(2, 8, 42, .22));
}

.sablona-miniatury {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    margin: .75rem 0 0;
    padding: 0 0 .3rem;
    list-style: none;
}

.sablona-miniatury button,
.sablona-miniatury button:hover {
    position: relative;
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: #eef0f4;
    box-shadow: none;
}

.sablona-miniatury button:hover {
    border-color: var(--tlacitko-okraj);
}

.sablona-miniatury button[aria-pressed="true"] {
    border-color: var(--purpurova);
}

.sablona-miniatury img {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: contain;
}

.sablona-detail-volby h1 {
    margin: 0 0 .2rem;
    font-size: 1.6rem;
}

.sablona-format {
    margin: 0 0 1.25rem;
    font-size: .95rem;
    color: var(--tlumeny);
}

.volby-karty {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: .5rem;
    min-width: 0;
    margin: 0 0 1.1rem;
    padding: 0;
    border: 0;
}

.volby-karty legend {
    margin-bottom: .45rem;
    padding: 0;
    font-weight: 600;
    color: var(--nadpis);
}

.volba-karta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .7rem;
    border: 1px solid var(--cara);
    border-radius: var(--polomer-maly);
    background: var(--plocha);
    cursor: pointer;
    transition: border-color .15s;
}

.volba-karta:hover {
    border-color: var(--tlacitko-okraj);
}

.volba-karta input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.volba-karta strong {
    font-size: .9rem;
    color: var(--nadpis);
}

.volba-karta small {
    font-size: .78rem;
    line-height: 1.3;
    color: var(--tlumeny);
}

.volba-karta:has(input:checked) {
    border-color: var(--purpurova);
    box-shadow: inset 0 0 0 1px var(--purpurova);
}

.volba-karta:has(input:focus-visible) {
    outline: 2px solid var(--akcent);
    outline-offset: 2px;
}

/* Ilustrace k volbám (img/ilustrace – roh papíru, vazba, obálka, laminace). */
.volba-ilustrace {
    width: 48px;
    height: 48px;
    margin: 0 0 .25rem -4px;
}

.sablona-naklad {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.25rem;
    font-weight: 600;
    color: var(--nadpis);
}

.sablona-naklad select {
    width: auto;
    font-weight: 400;
}

.sablona-objednat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cara);
}

.sablona-cena {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.sablona-cena strong {
    font-size: 1.5rem;
    color: var(--nadpis);
}

.sablona-cena small {
    font-size: .8rem;
    color: var(--tlumeny);
}

.sablona-objednat button.hlavni {
    flex: 1 1 12rem;
}

.sablona-podobne {
    grid-column: 1 / -1;
}

.sablona-podobne h2 {
    margin: .5rem 0 1rem;
    font-size: 1.15rem;
}

/* Okno nad stránkou (dialog): zavírá ×, Esc a klik mimo obsah. */
.sablona-okno {
    width: min(1100px, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--polomer);
    background: var(--plocha);
    color: var(--text);
    box-shadow: 0 24px 64px rgba(2, 8, 42, .35);
    overflow: hidden;
}

.sablona-okno::backdrop {
    background: rgba(2, 8, 42, .55);
}

.sablona-okno-obsah {
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 1.75rem;
    box-sizing: border-box;
}

.sablona-okno-zavrit,
.sablona-okno-zavrit:hover {
    position: absolute;
    z-index: 2;
    top: .6rem;
    right: .6rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
}

.sablona-okno .sablona-detail-volby h1 {
    padding-right: 2.5rem;
}

@media (max-width: 760px) {
    .sablona-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .sablona-velky {
        aspect-ratio: 1;
    }

    .sablona-okno {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    .sablona-okno-obsah {
        max-height: 100dvh;
        height: 100%;
        padding: 1rem;
    }
}

/* ---------- Fotokniha po krocích (/kniha) ---------- */
.pruvodce-formular {
    display: flex;
    margin: 0;
}

button.pruvodce-volba,
button.pruvodce-volba:hover {
    flex: 1;
    width: 100%;
    font-weight: 400;
    line-height: inherit;
    color: var(--text);
    background: var(--plocha);
    border-radius: var(--polomer);
    justify-content: flex-start;
}

button.pruvodce-volba:hover {
    border-color: var(--purpurova);
}

.kniha-vzhledy {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.kniha-vzhled-plocha {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: .4rem;
    background: #eef0f4;
    border-radius: var(--polomer-maly);
}

.kniha-vzhled-plocha img {
    position: absolute;
    inset: 7%;
    width: 86%;
    height: 86%;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(2, 8, 42, .22));
}

.kniha-vzhled-plocha.kniha-prazdna {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--tlacitko-okraj);
    background: var(--plocha);
}

/* =====================================================================
   Editor návrhů (/navrh/{id}) – přes celou obrazovku jako Canva, stejný pro všechny tiskoviny.
   Nahoře lišta, vlevo ikony nástrojů a jeden panel, uprostřed stránka na světle šedé ploše, dole stránky.
   Jedna škála mezer (4 / 8 / 12 / 16 / 24 px), ovládací prvky 32–40 px, písmo rozhraní 14 px, ikony 20 px.
   ===================================================================== */
body:has(> main.editor-stranka), body:has(main.editor-stranka) { overflow: hidden; }
main.editor-stranka { max-width: none; margin: 0; padding: 0; min-height: 0; }
.editor-nenalezen { max-width: 36rem; margin: 15vh auto 0; padding: 0 16px; text-align: center; }

.fe {
    --fe-prace: #eef0f4;
    --fe-hover: #f2f3f7;
    --fe-aktivni: #fdf0f7;
    --fe-polomer: 14px;
    --fe-polomer-maly: 10px;
    --fe-stin: 0 1px 2px rgba(2, 8, 42, .05), 0 8px 24px rgba(2, 8, 42, .08);
    --fe-stin-velky: 0 24px 60px rgba(2, 8, 42, .22);
    --fe-prechod: .15s ease;
    position: fixed; inset: 0; z-index: 1;
    display: grid;
    grid-template-columns: 76px auto minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr) auto;
    grid-template-areas: "horni horni horni" "ikony panel prace" "ikony panel dolni";
    background: var(--fe-prace);
    font-size: 14px; line-height: 1.45; color: var(--text);
}
.fe [hidden] { display: none !important; }
.fe h2, .fe h3 { margin: 0; letter-spacing: 0; }
.fe p { margin: 0; }

/* Tlačítka a pole v editoru: jedna velikost (36 px), klidné okraje, žádné „pilulky“ webu. */
.fe button, .fe .tlacitko {
    min-height: 36px; padding: 0 14px; gap: 8px;
    border: 1px solid var(--cara); border-radius: var(--fe-polomer-maly);
    background: var(--plocha); box-shadow: none;
    font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--nadpis);
    transition: background-color var(--fe-prechod), border-color var(--fe-prechod), color var(--fe-prechod), box-shadow var(--fe-prechod);
}
.fe button:hover, .fe .tlacitko:hover { background: var(--fe-hover); border-color: var(--tlacitko-okraj); color: var(--nadpis); }
.fe button:disabled { opacity: .4; cursor: not-allowed; }
.fe button:disabled:hover { background: var(--plocha); border-color: var(--cara); }
.fe button.hlavni, .fe .tlacitko.hlavni { background: var(--hlavni); border-color: var(--hlavni); color: var(--na-hlavni); }
.fe button.hlavni:hover, .fe .tlacitko.hlavni:hover { background: var(--hlavni-hover); border-color: var(--hlavni-hover); color: var(--na-hlavni); }
.fe .nebezpecne { color: var(--chyba); }
.fe :focus-visible { outline: 2px solid var(--purpurova); outline-offset: 2px; }
.fe input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]), .fe select, .fe textarea {
    min-height: 36px; padding: 0 10px; font-size: 14px; color: var(--nadpis); border-radius: 8px; border-color: var(--tlacitko-okraj);
}
.fe textarea { padding: 8px 10px; line-height: 1.4; resize: vertical; }
.fe select { padding-right: 28px; }
.fe input[type=range] { accent-color: var(--purpurova); }
.fe input[type=checkbox], .fe input[type=radio] { accent-color: var(--purpurova); }
.fe .fe-siroke { width: 100%; }
.fe .fe-tlacitka { display: flex; flex-wrap: wrap; gap: 8px; }
.fe .fe-poznamka { font-size: 13px; color: var(--tlumeny); }
.fe .fe-mezera { flex: 1; }
.fe .fe-oddelovac { flex: none; width: 1px; height: 24px; background: var(--cara); }
.fe .fe-odkaz { min-height: 0; padding: 0; border: 0; background: none; color: var(--purpurova); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fe .fe-odkaz:hover { background: none; color: var(--hlavni); }

/* Ikony: vlastní obrysové SVG, barva podle textu. */
.fe svg.ikona { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fe .fe-ikona {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0;
    border: 0; border-radius: var(--fe-polomer-maly); background: transparent; color: var(--nadpis); text-decoration: none; cursor: pointer;
}
.fe .fe-ikona:hover { background: var(--fe-hover); }
.fe .fe-ikona[aria-pressed="true"] { background: var(--fe-aktivni); color: var(--purpurova); }
.fe .fe-ikona[aria-pressed="true"]:disabled { opacity: 1; cursor: default; }
.fe-menu > summary svg.ikona { stroke-width: 3.2; }

/* ---------- Horní lišta ---------- */
.fe-horni {
    grid-area: horni; display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 0 12px; background: var(--plocha); border-bottom: 1px solid var(--cara); position: relative; z-index: 20;
}
.fe-nazev { display: grid; min-width: 0; max-width: 300px; margin-left: 4px; line-height: 1.25; }
.fe-nazev h1 { margin: 0; overflow: hidden; font-size: 15px; font-weight: 600; letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; color: var(--nadpis); }
.fe-nazev span { font-size: 12px; color: var(--tlumeny); white-space: nowrap; }
.fe-horni .fe-oddelovac { margin: 0 4px; }
.fe-horni .editor-stav { margin: 0 4px; font-size: 13px; color: var(--tlumeny); white-space: nowrap; }
.fe-horni .editor-stav.chyba { color: var(--chyba); white-space: normal; }
.fe-horni > .tlacitko, .fe-horni > button:not(.fe-ikona) { min-height: 36px; padding: 0 12px; border-color: transparent; background: transparent; }
.fe-horni > .tlacitko:hover, .fe-horni > button:not(.fe-ikona):hover { background: var(--fe-hover); border-color: transparent; }
.fe-upozorneni { color: var(--chyba) !important; font-weight: 700; }
.fe-upozorneni > span { display: inline-flex; align-items: center; font-size: 13px; }
.fe-upozorneni .fe-upozorneni-fotka { display: none; }
/* Chybí jen fotky: neutrální šedá s ikonou fotky, ne červený trojúhelník. */
.fe-upozorneni.jen-fotky { color: var(--tlumeny) !important; font-weight: 500; }
.fe-upozorneni.jen-fotky .fe-upozorneni-chyba { display: none; }
.fe-upozorneni.jen-fotky .fe-upozorneni-fotka { display: inline-flex; }
.fe-cena {
    display: grid; justify-items: end; gap: 0; margin: 0 4px 0 8px; padding: 2px 8px; border-radius: 10px;
    color: var(--nadpis); text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.fe-cena:hover { background: rgba(2, 8, 42, .05); }
@media (max-width: 1100px) { .fe-cena small { display: none; } }
.fe-cena small { max-width: 200px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--tlumeny); }
.fe-cena strong { font-size: 17px; font-weight: 700; }
.fe .tlacitko.fe-do-kosiku { min-height: 40px; padding: 0 18px; border-color: var(--purpurova); background: var(--purpurova); color: #fff; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(235, 10, 142, .28); }
.fe .fe-do-kosiku-cena { display: none; }
.fe .tlacitko.fe-do-kosiku:hover { border-color: #c80878; background: #c80878; color: #fff; }

/* Nabídka „⋯“: uložení do účtu, návod. */
.fe-menu { position: relative; }
.fe-menu > summary { list-style: none; }
.fe-menu > summary::-webkit-details-marker { display: none; }
.fe-menu[open] > summary { background: var(--fe-hover); }
.fe-menu-obsah {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: grid; gap: 4px; width: 300px; padding: 8px;
    border: 1px solid var(--cara); border-radius: var(--fe-polomer); background: var(--plocha); box-shadow: var(--fe-stin-velky);
}
.fe-menu-ucet { display: grid; gap: 8px; padding: 8px 8px 12px; border-bottom: 1px solid var(--cara); margin-bottom: 4px; }
.fe-menu-ucet small { font-size: 12.5px; line-height: 1.4; }
.fe-menu-ucet .potvrzeni { margin: 0; padding: 8px 10px; font-size: 13px; }
.fe-menu-ucet .editor-ucet-formular { display: grid; gap: 8px; }
.fe-menu-ucet label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: var(--nadpis); }
.fe-menu-ucet .chyba { margin: 0; font-size: 13px; }
.fe .fe-menu-polozka {
    display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 36px; padding: 0 10px;
    border: 0; border-radius: 8px; background: none; color: var(--nadpis); font-weight: 500; text-decoration: none; text-align: left;
}
.fe .fe-menu-polozka:hover { background: var(--fe-hover); color: var(--nadpis); }
.fe .fe-menu-ucet form { margin: 0; }
.fe-jen-mobil { display: none !important; }

/* ---------- Levá lišta s ikonami ---------- */
.fe-ikony {
    grid-area: ikony; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px;
    background: var(--plocha); border-right: 1px solid var(--cara); overflow-y: auto; scrollbar-width: none;
}
.fe .fe-ikony button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 64px; min-height: 60px; padding: 8px 2px;
    border: 0; border-radius: 12px; background: none; font-size: 12px; font-weight: 500; line-height: 1.15; color: var(--tlumeny); text-align: center;
}
.fe .fe-ikony button svg.ikona { width: 22px; height: 22px; }
.fe .fe-ikony button:hover { background: var(--fe-hover); color: var(--nadpis); }
.fe .fe-ikony button.aktivni { background: var(--fe-aktivni); color: var(--purpurova); }

/* ---------- Panel nástroje ---------- */
.fe .fe-panel {
    grid-area: panel; position: relative; display: block; width: 328px; margin: 12px 0 12px 12px; padding: 0; overflow-y: auto; overscroll-behavior: contain;
    border: 0; border-radius: 16px; background: var(--plocha); box-shadow: var(--fe-stin); scrollbar-width: thin;
}
.fe.fe-sbaleno .fe-panel { display: none; }
.fe .fe-panel .fe-skryte { display: none !important; }
.fe .fe-panel-zavrit { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; min-width: 32px; height: 32px; min-height: 32px; color: var(--tlumeny); }
.fe-sekce { position: relative; display: grid; gap: 12px; padding: 18px 20px 24px; }
.fe-panel-hlava { display: flex; align-items: center; gap: 8px; min-height: 32px; padding-right: 36px; }
.fe-panel-hlava h2 { font-size: 16px; font-weight: 600; color: var(--nadpis); }
.fe-sekce h3 { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--nadpis); }
.fe-sekce label:not(.tlacitko):not(.fe-prepinac):not(.editor-logo):not(.zaskrtavatko) { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--nadpis); }
.fe-sekce .tlacitko { cursor: pointer; }

/* Nápověda za otazníkem (místo dlouhých textů). */
.fe .fe-napoveda { position: static; font-size: 13px; }
.fe .fe-napoveda > summary {
    display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--tlacitko-okraj); border-radius: 50%;
    font-size: 12px; font-weight: 700; color: var(--tlumeny); cursor: pointer; list-style: none; user-select: none;
}
.fe .fe-napoveda > summary::-webkit-details-marker { display: none; }
.fe .fe-napoveda > summary:hover, .fe .fe-napoveda[open] > summary { border-color: var(--purpurova); color: var(--purpurova); }
.fe .fe-napoveda > p {
    position: absolute; left: 16px; right: 16px; z-index: 10; margin-top: 8px; padding: 12px 14px;
    border-radius: 12px; background: var(--hlavni); color: #fff; font-size: 13px; line-height: 1.5; box-shadow: var(--fe-stin-velky);
}

/* Text: textové pole a hotové styly v tom, jak vypadají. */
.fe-styly-textu { display: grid; gap: 8px; }
.fe .fe-styly-textu button { justify-content: flex-start; min-height: 0; padding: 12px 14px; text-align: left; color: var(--nadpis); }
.fe .fe-styly-textu button:hover { border-color: var(--purpurova); background: var(--plocha); }
.fe .fe-styl-nadpis { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.fe .fe-styl-podnadpis { font-size: 17px; font-weight: 600; }
.fe .fe-styl-text { font-size: 14px; font-weight: 400; }
.fe-texty { display: grid; gap: 8px; }
.fe .fe-texty textarea { width: 100%; }
.fe .fe-texty textarea.vybrany, .fe .fe-texty textarea:focus { border-color: var(--purpurova); box-shadow: 0 0 0 3px rgba(235, 10, 142, .12); }

/* Tvary, vrstvy, vzory. */
.fe-tvary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fe .fe-tvary button { flex-direction: column; min-height: 88px; padding: 10px 4px; font-size: 12.5px; }
.fe-tvary svg { width: 44px; height: 30px; fill: #f2f3f7; stroke: var(--nadpis); stroke-width: 1.5; }
.fe-vrstvy { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fe .fe-vrstva { width: 100%; justify-content: flex-start; font-weight: 400; }
.fe .fe-vrstva.vybrany { border-color: var(--purpurova); background: var(--fe-aktivni); }
.fe .editor-vzory-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: none; overflow: visible; padding: 0; }
.fe .editor-vzory-mrizka button { min-height: 0; padding: 0; border-radius: 10px; transition: box-shadow var(--fe-prechod), border-color var(--fe-prechod); }
.fe .editor-vzory-mrizka button:hover { border-color: var(--purpurova); box-shadow: 0 0 0 2px var(--purpurova); }
.fe .editor-prazdne { display: grid; gap: 8px; margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--cara); }
.fe .zaskrtavatko, .fe .editor-logo { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 500; color: var(--nadpis); cursor: pointer; }
.fe .editor-logo input, .fe .zaskrtavatko input { margin-top: 2px; }
.fe .editor-logo span small { display: block; font-size: 12.5px; }
.fe .editor-kalendar, .fe .editor-ai { margin: 0; padding: 0; border: 0; }
.fe .editor-kalendar { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--cara); }
.fe .editor-kalendar:last-child { padding-bottom: 0; border-bottom: 0; }
.fe .editor-kalendar .fe-panel-hlava { padding-right: 0; }
.fe .editor-ai textarea { font-size: 13px; background: var(--podklad); }

/* Fotky: zásobník Vaše fotky. */
.fe .editor-zasobnik { display: grid; gap: 10px; margin: 4px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--cara); border-radius: 0; background: none; }
.fe .editor-zasobnik h3 { margin: 0; }
.fe .editor-zasobnik-pocet { font-weight: 500; color: var(--tlumeny); }
.fe .editor-zasobnik-fotky { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fe .editor-zasobnik-fotky li { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--cara); transition: outline-color var(--fe-prechod); }
.fe .editor-zasobnik-fotky li:hover { outline-color: var(--purpurova); }
.fe .editor-zasobnik-odebrat { min-height: 0 !important; width: 24px; height: 24px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(2, 8, 42, .7) !important; color: #fff !important; font-size: 15px; }

/* Kalendář na míru: vzhled a počet fotek na stránce. */
.fe .kalendar-vzhled { display: grid; gap: 14px; margin: 0; }
.fe .kalendar-vzhled select { min-width: 0; width: 100%; }
/* Panel Kalendář: styl a barevné schéma jako náhledy celé stránky (jako v CEWE), vybraný orámovaný. */
.fe .kalendar-dlazdice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin: 0; padding: 0; border: 0; }
.fe .kalendar-dlazdice legend { grid-column: 1 / -1; margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 600; color: var(--nadpis); }
.fe .kalendar-dlazdice-volba { position: relative; display: grid; gap: 4px; justify-items: center; cursor: pointer; font-size: 12px; color: var(--tlumeny); text-align: center; }
.fe .kalendar-dlazdice-volba input { position: absolute; opacity: 0; pointer-events: none; }
.fe .kalendar-dlazdice-volba img {
    display: block; width: 100%; height: auto; border-radius: 4px; background: var(--plocha);
    box-shadow: 0 0 0 1px rgba(2, 8, 42, .08), 0 2px 8px rgba(2, 8, 42, .1); outline: 2px solid transparent; outline-offset: 3px;
    transition: outline-color var(--fe-prechod);
}
.fe .kalendar-dlazdice-volba:hover img { outline-color: var(--tlacitko-okraj); }
.fe .kalendar-dlazdice-volba input:checked ~ img { outline-color: var(--purpurova); }
.fe .kalendar-dlazdice-volba input:checked ~ span { font-weight: 600; color: var(--nadpis); }
.fe .kalendar-dlazdice-volba input:focus-visible ~ img { outline-color: var(--azurova); }
.fe .kalendar-fotek { display: grid; justify-content: stretch; gap: 6px; margin: 0; padding: 14px 0; border-block: 1px solid var(--cara); }
.fe .kalendar-fotek > span { font-size: 13px; font-weight: 500; color: var(--nadpis); }
.fe .kalendar-fotek > div { display: flex; flex-wrap: wrap; gap: 8px; }
.fe .kalendar-fotek button { width: 52px; height: 52px; min-height: 0; padding: 0; border: 1px solid var(--cara); }
.fe .kalendar-fotek button svg rect { fill: #c4c8ce; }
.fe .kalendar-fotek button[aria-pressed="true"] { border-color: var(--purpurova); background: var(--fe-aktivni); box-shadow: inset 0 0 0 1px var(--purpurova); }
.fe .kalendar-fotek button[aria-pressed="true"] svg rect { fill: var(--purpurova); }

/* Fotokniha: počet stran a rozvržení jako dlaždice. */
.fe .kniha-pocet { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--uspech); }
.fe .kniha-pocet.chyba { color: var(--chyba); }
.fe .kniha-rozvrzeni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fe .kniha-rozvrzeni form { display: contents; }
.fe .kniha-rozvrzeni button {
    display: grid; align-content: start; gap: 6px; min-height: 0; padding: 6px 6px 8px; border: 1px solid var(--cara); border-radius: 12px;
    background: var(--plocha); font-size: 12.5px; font-weight: 500; color: var(--text); text-align: center;
}
.fe .kniha-rozvrzeni button:hover { border-color: var(--purpurova); background: var(--plocha); box-shadow: 0 0 0 2px rgba(235, 10, 142, .18); }
.fe .kniha-rozvrzeni img, .fe .kniha-rozvrzeni .kniha-prazdna { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 4px rgba(2, 8, 42, .14); }

/* Tisk: volby objednávky. */
.fe .editor-varianta { display: grid; gap: 14px; }
.fe .editor-varianta input[type="number"] { width: 100%; }
.fe .editor-logo-zakryje { margin: 0; font-size: 13px; color: var(--varovani); }
.fe .fe-radek-napoveda { display: flex; align-items: flex-start; gap: 8px; }
.fe .fe-tisk-cena { padding-top: 14px; border-top: 1px solid var(--cara); font-size: 20px; font-weight: 700; color: var(--nadpis); }
.fe .fe-tisk-cena small { font-size: 13px; font-weight: 500; }

/* Úpravy vybraného prvku (celý panel vlastností). */
.fe .editor-vlastnosti { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--cara); }
.fe .editor-vlastnosti input[type="range"] { width: 100%; }
.fe .editor-pevny { margin: 0; }
.fe .fe-radek { display: flex; align-items: flex-end; gap: 8px; }
.fe .fe-radek .fe-roste { flex: 1; min-width: 0; }
.fe .fe-radek .fe-cislo { width: 76px; flex: none; }
.fe .fe-prepinac {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
    border: 1px solid var(--tlacitko-okraj); border-radius: 8px; background: var(--plocha); font-size: 16px; color: var(--nadpis); cursor: pointer;
}
.fe .fe-prepinac:has(input:checked) { border-color: var(--purpurova); background: var(--fe-aktivni); color: var(--purpurova); }
.fe .fe-prepinac:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.fe .fe-prepinac b, .fe .fe-prepinac i, .fe-kontext b, .fe-kontext i { font-family: Georgia, serif; font-size: 16px; }
.fe .fe-barva { display: flex !important; grid-template-columns: none; align-items: center; justify-content: space-between; }
.fe .fe-barva input[type="color"] { width: 48px; height: 32px; padding: 2px; border: 1px solid var(--tlacitko-okraj); border-radius: 8px; background: var(--plocha); }
.fe .editor-otoceni { display: flex; align-items: flex-end; gap: 8px; }
.fe .editor-otoceni label { flex: 1; }
.fe .editor-poradi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---------- Plocha se stránkou ---------- */
.fe-prace { grid-area: prace; position: relative; display: grid; grid-template-rows: 56px minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; }
.fe .editor-plocha-obal { grid-row: 2; position: relative; display: grid; min-height: 0; overflow: auto; padding: 64px 40px 40px; scrollbar-width: thin; }
.fe.fe-kniha .editor-plocha-obal { padding-bottom: 84px; }
.fe:not(.fe-s-dolni) .editor-plocha-obal { padding-bottom: 76px; }
.fe-sekce h3:has(+ .fe-texty:empty) { display: none; }
.fe.fe-jednoduchy:not(.fe-kniha) .editor-plocha-obal { padding-top: 56px; }
.fe .editor-plocha-obal.lze-posouvat .editor-plocha { cursor: grab; }
.fe .editor-plocha-obal.posouva .editor-plocha { cursor: grabbing; }
.fe-stranka { position: relative; margin: auto; }
.fe .editor-plocha { max-width: none; border-radius: 2px; box-shadow: 0 1px 2px rgba(2, 8, 42, .06), 0 12px 32px rgba(2, 8, 42, .14); }

/* Ikony u stránky (vpravo nad ní): kopie, přidat, přesunout, rozvržení, smazat; orientace. */
.fe-stranka-akce {
    position: absolute; right: 0; bottom: calc(100% + 26px); z-index: 3; display: flex; align-items: center; gap: 2px; padding: 2px;
    border-radius: 12px; background: var(--plocha); box-shadow: var(--fe-stin);
}
.fe.fe-jednoduchy .fe-stranka-akce { bottom: calc(100% + 12px); }
/* Počet stran fotoknihy (vlevo nad stránkou, naproti ikonám). */
.fe .fe-stranka-pocet {
    position: absolute; left: 0; bottom: calc(100% + 26px); z-index: 3; margin: 0; min-height: 38px; padding: 0 14px;
    border-radius: 12px; background: var(--plocha); box-shadow: var(--fe-stin); white-space: nowrap;
}
.fe-stranka-akce form { display: contents; }
.fe .fe-stranka-akce .fe-ikona { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }

/* Pod stránkou knihy: Přidat stránku a ▾ s výběrem. */
.fe-pridat-stranku { position: absolute; left: 0; right: 0; top: calc(100% + 16px); display: flex; justify-content: center; pointer-events: none; }
.fe .fe-pridat-hlavni { pointer-events: auto; min-height: 40px; padding: 0 28px; border-radius: 12px; box-shadow: var(--fe-stin); }

/* Pravítka (prázdné plátno a šablony). */
.fe-pravitko { position: absolute; overflow: visible; pointer-events: none; }
.fe-pravitko line { stroke: #a4a8b8; stroke-width: 1; }
.fe-pravitko text { font-size: 9px; fill: #737688; font-family: inherit; }

/* Prázdný rámeček na fotku: jemná plocha s „+“, klik nabídne fotku. */
.fe .editor-fotka.pevny:not(.s-fotkou) {
    gap: 4px; background: rgba(247, 248, 251, .94); color: var(--tlumeny);
    box-shadow: inset 0 0 0 1.5px #c3c6d3; font-size: 12px; font-weight: 500; transition: background-color var(--fe-prechod);
}
.fe .editor-fotka.pevny:not(.s-fotkou):hover { background: rgba(253, 240, 247, .96); box-shadow: inset 0 0 0 1.5px var(--purpurova); color: var(--purpurova); }
.fe .editor-fotka.pevny:not(.s-fotkou)::before { content: "+"; font-size: 30px; font-weight: 300; line-height: 1; color: var(--purpurova); }
.fe .editor-fotka span { padding: 0 6px; }

/* Lišta vybraného prvku nahoře nad plochou. */
.fe-kontext {
    grid-row: 1; align-self: center; justify-self: center; z-index: 6; display: flex; align-items: center; gap: 2px;
    max-width: calc(100% - 24px); padding: 4px; overflow-x: auto; scrollbar-width: none;
    border-radius: 14px; background: var(--plocha); box-shadow: var(--fe-stin);
}
.fe-kontext > * { flex: none; }
.fe .fe-kontext .fe-ikona { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
.fe .fe-kontext select.fe-kontext-pismo { width: 158px; min-height: 34px; border-color: var(--cara); }
.fe-kontext-velikost { display: inline-flex; align-items: center; }
.fe .fe-kontext-velikost input { width: 52px; min-height: 34px !important; padding: 0 4px !important; border-color: var(--cara) !important; text-align: center; -moz-appearance: textfield; }
.fe .fe-kontext-velikost input::-webkit-inner-spin-button { -webkit-appearance: none; }
.fe-kontext-barva { position: relative; cursor: pointer; }
.fe-kontext-barva input[type="color"] { width: 22px; height: 22px; padding: 0; border: 1px solid var(--tlacitko-okraj); border-radius: 50%; background: none; cursor: pointer; }
.fe-kontext-barva input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.fe-kontext-barva input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.fe-kontext-barva input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.fe .fe-kontext .fe-kontext-text { min-height: 34px; padding: 0 12px; border-color: transparent; background: none; }
.fe .fe-kontext .fe-kontext-text:hover { background: var(--fe-hover); }
.fe-kontext .fe-oddelovac { margin: 0 4px; }
.fe-zarovnat svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.fe-zarovnat svg:not([data-zarovnani="Vlevo"]) { display: none; }
.fe-zarovnat[data-stav="Stred"] svg { display: none; }
.fe-zarovnat[data-stav="Stred"] svg[data-zarovnani="Stred"] { display: block; }
.fe-zarovnat[data-stav="Vpravo"] svg { display: none; }
.fe-zarovnat[data-stav="Vpravo"] svg[data-zarovnani="Vpravo"] { display: block; }

/* Přiblížení vpravo dole. */
.fe-priblizeni {
    position: absolute; right: 16px; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 2px; padding: 4px 6px;
    border-radius: 14px; background: var(--plocha); box-shadow: var(--fe-stin);
}
.fe .fe-priblizeni .fe-ikona { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
.fe-priblizeni input[type="range"] { width: 110px; margin: 0 4px; }
.fe-dolni .fe-priblizeni { position: static; flex: none; padding: 0 0 0 8px; border-left: 1px solid var(--cara); border-radius: 0; box-shadow: none; }
.fe-priblizeni-procenta { min-width: 46px; font-size: 13px; font-weight: 500; text-align: center; color: var(--nadpis); }
.fe .fe-napoveda-nahoru { margin: 0 4px; }
.fe .fe-napoveda-nahoru > p { left: auto; right: 0; bottom: calc(100% + 8px); width: 300px; }
.fe-priblizeni .fe-napoveda-nahoru { position: static; }

/* Přehled všech stránek přes plochu. */
.fe .editor-prehled {
    position: absolute; inset: 0; z-index: 8; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); align-content: start; gap: 24px 20px;
    margin: 0; padding: 24px; overflow-y: auto; background: var(--fe-prace);
}
.fe .editor-prehled-strana { display: grid; gap: 8px; min-height: 0; padding: 0; border: 0; background: none; font-size: 13px; text-align: center; }
.fe .editor-prehled-strana:hover { background: none; }
.fe .editor-prehled-strana img { width: 100%; height: auto; border-radius: 2px; background: var(--plocha); box-shadow: var(--fe-stin); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color var(--fe-prechod); }
.fe .editor-prehled-strana:hover img { outline-color: var(--tlacitko-okraj); }
.fe .editor-prehled-strana.aktivni img { outline-color: var(--purpurova); }
.fe .editor-prehled-strana.aktivni span { font-weight: 600; color: var(--nadpis); }
.fe .editor-prehled-strana.problem span::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--chyba); vertical-align: middle; }

/* ---------- Dole: stránky ---------- */
.fe-dolni {
    grid-area: dolni; position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 12px 12px; padding: 8px 10px;
    border-radius: 16px; background: var(--plocha); box-shadow: var(--fe-stin);
}
.fe-dolni > button, .fe-dolni > form { flex: none; }
.fe .kalendar-miniatury {
    position: static; display: flex; flex: 0 1 auto; gap: 10px; min-width: 0; max-height: none; margin: 0; padding: 4px 4px 2px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.fe .kalendar-miniatura {
    display: flex; flex: none; flex-direction: column; align-items: center; gap: 4px; min-height: 0; padding: 2px 2px 0;
    border: 0; background: none; font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--tlumeny); white-space: nowrap;
}
.fe .kalendar-miniatura:hover { background: none; }
.fe .kalendar-miniatura img {
    display: block; width: auto; height: 52px; aspect-ratio: var(--pomer, .75); max-width: 96px; min-height: 0; object-fit: contain; border-radius: 2px;
    background: var(--plocha); box-shadow: 0 0 0 1px rgba(2, 8, 42, .08), 0 2px 6px rgba(2, 8, 42, .1);
    outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--fe-prechod);
}
.fe .kalendar-miniatura:hover img { outline-color: var(--tlacitko-okraj); }
.fe .kalendar-miniatura.aktivni img { outline-color: var(--purpurova); }
.fe .kalendar-miniatura.aktivni span { font-weight: 600; color: var(--nadpis); }
.fe .kalendar-miniatura span { display: grid; justify-items: center; }
.fe .kalendar-miniatura.problem span::after { content: ""; width: 6px; height: 6px; margin-top: 2px; border-radius: 50%; background: var(--chyba); }
.fe .kniha-misto { display: block; font-size: 11px; font-weight: 400; color: var(--tlumeny); }

/* Počítač: stránky ve svislém sloupci vpravo (jako v CEWE) – větší miniatury pod sebou s názvem, přehled a zadní strana dole. */
@media (min-width: 1100px) {
    .fe.fe-sloupec {
        grid-template-columns: 76px auto minmax(0, 1fr) 176px;
        grid-template-rows: 56px minmax(0, 1fr);
        grid-template-areas: "horni horni horni horni" "ikony panel prace dolni";
    }
    .fe.fe-sloupec .fe-dolni {
        flex-direction: column; align-items: stretch; gap: 8px; margin: 12px 12px 12px 0; padding: 10px 6px; min-height: 0; overflow: hidden;
    }
    .fe.fe-sloupec .fe-dolni > [data-akce="predchozi"], .fe.fe-sloupec .fe-dolni > [data-akce="dalsi"], .fe.fe-sloupec .fe-dolni > .fe-mezera { display: none; }
    .fe.fe-sloupec .kalendar-miniatury {
        flex: 1 1 auto; flex-direction: column; align-items: center; gap: 16px; padding: 6px 4px 10px; overflow-x: hidden; overflow-y: auto;
    }
    .fe.fe-sloupec .kalendar-miniatura { font-size: 13px; }
    .fe.fe-sloupec .kalendar-miniatura img { width: 118px; max-width: 118px; height: auto; }
    .fe.fe-sloupec .fe-dolni > form, .fe.fe-sloupec .fe-dolni > button { width: 100%; justify-content: center; }
}
.fe .editor-strany { display: flex; gap: 4px; margin: 0; border: 0; }
.fe .editor-strany button { position: relative; min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; margin: 0; background: none; font-size: 14px; color: var(--tlumeny); }
.fe .editor-strany button:hover { background: var(--fe-hover); }
.fe .editor-strany button.aktivni { border-color: transparent; background: var(--fe-aktivni); color: var(--purpurova); font-weight: 600; }
.fe .editor-strany button.problem::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--chyba); }
.fe .fe-zadni { margin: 0; }
.fe .fe-zadni button { border-style: dashed; }
.fe .fe-zadni .fe-odebrat { border-style: solid; border-color: transparent; background: none; color: var(--chyba); }
.fe .editor-prehled-prepinac { display: inline-flex; align-items: center; }
.fe .editor-prehled-prepinac[aria-expanded="true"] { border-color: var(--purpurova); background: var(--fe-aktivni); color: var(--purpurova); }

/* ---------- Výběr nové stránky knihy (▾) ---------- */
.fe-vyber[popover] {
    width: min(760px, calc(100vw - 32px)); max-height: min(82vh, 680px); margin: auto; padding: 20px 24px 24px; overflow-y: auto;
    border: 0; border-radius: 18px; background: var(--plocha); box-shadow: var(--fe-stin-velky); color: var(--text);
}
.fe-vyber[popover]::backdrop { background: rgba(2, 8, 42, .35); }
.fe-vyber-hlava { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.fe-vyber-hlava h2 { font-size: 18px; font-weight: 600; color: var(--nadpis); }
.fe .fe-vyber .kniha-rozvrzeni { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }

/* ---------- Kontrola a objednání (panel zprava) ---------- */
.fe-objednani {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; width: min(460px, 100vw);
    background: var(--plocha); box-shadow: -16px 0 48px rgba(2, 8, 42, .18);
    transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
}
.fe-objednani.otevrene, .fe-objednani:target { transform: none; visibility: visible; transition: transform .22s ease; }
.fe.fe-objednava::after { content: ""; position: fixed; inset: 0; z-index: 45; background: rgba(2, 8, 42, .28); }
.fe-objednani-hlava { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--cara); }
.fe-objednani-hlava h2 { font-size: 18px; font-weight: 600; color: var(--nadpis); }
.fe-objednani-telo { display: grid; align-content: start; gap: 16px; padding: 20px 24px 32px; overflow-y: auto; }
.fe .fe-kontrola-strany .editor-nahled-strany { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px; }
.fe .fe-kontrola-strany .editor-nahled-strany.na-sirku { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.fe .fe-kontrola-strany .editor-nahled-strany.jedna { grid-template-columns: minmax(0, 220px); }
.fe .fe-kontrola-strany figcaption { font-size: 12px; }
.fe .fe-kontrola-problemy { display: grid; gap: 8px; }
.fe .fe-kontrola-problemy:empty, .fe .editor-problemy:empty { display: none; }
.fe .fe-kontrola-problemy h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--nadpis); }
.fe .fe-kontrola-problemy .editor-okno-seznam li, .fe .fe-kontrola-problemy .editor-okno-odkaz { font-size: 13.5px; }
.fe .fe-kontrola-problemy .editor-okno-odkaz { min-height: 0; border: 0; background: none; }
.fe .editor-problemy { max-height: none; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fe .editor-problemy li { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--varovani-podklad); color: var(--varovani); font-size: 13.5px; cursor: pointer; }
.fe .fe-souhrn { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--podklad); font-size: 13.5px; }
.fe .fe-objednani .castka { margin: 0; font-size: 26px; font-weight: 700; color: var(--nadpis); }
.fe .fe-objednani .castka small { font-size: 14px; font-weight: 500; }
.fe .fe-objednani .editor-logo-sleva, .fe .fe-objednani .editor-logo-popis { margin: 0; font-size: 13.5px; }
.fe .fe-do-kosiku-formular { display: grid; gap: 14px; }
.fe .fe-kontrola-potvrzeni { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 500; color: var(--nadpis); cursor: pointer; }
.fe .fe-kontrola-potvrzeni input { margin-top: 2px; }
.fe .fe-do-kosiku-formular button[type="submit"] { min-height: 46px; border-color: var(--purpurova); background: var(--purpurova); color: #fff; font-size: 15px; font-weight: 600; }
.fe .fe-do-kosiku-formular button[type="submit"]:hover:not(:disabled) { border-color: #c80878; background: #c80878; }
.fe .fe-do-kosiku-formular button[type="submit"]:disabled:hover { background: var(--purpurova); border-color: var(--purpurova); }
.fe .fe-objednani .chyba { margin: 0; }
.fe .fe-objednani .editor-serie { margin: 0; padding: 12px 16px; border: 1px solid var(--cara); border-radius: 12px; }
.fe .fe-objednani .editor-serie > summary { font-weight: 600; color: var(--nadpis); cursor: pointer; }
.fe .fe-objednani .editor-serie[open] { display: grid; gap: 12px; }
.fe .fe-objednani .editor-serie .formular { gap: 12px; }
.fe .fe-objednani .editor-serie .formular label { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
    .fe *, .fe-objednani { transition: none !important; }
}

/* ---------- Telefon a úzké okno: plocha nahoře, nástroje jako záložky dole, panel zespodu ---------- */
@media (max-width: 1100px) {
    .fe .fe-panel { width: 300px; }
    .fe-nazev { max-width: 180px; }
    .fe .fe-kontext select.fe-kontext-pismo { width: 130px; }
    .fe-priblizeni input[type="range"] { width: 80px; }
}
@media (max-width: 768px) {
    .fe {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 52px minmax(0, 1fr) auto 64px;
        grid-template-areas: "horni" "prace" "dolni" "ikony";
    }
    .fe-jen-desktop { display: none !important; }
    .fe-jen-mobil { display: flex !important; }
    .fe-horni { gap: 4px; padding: 0 8px; }
    .fe-horni .fe-nazev, .fe-horni .editor-stav, .fe-horni .fe-oddelovac { display: none; }
    /* Mobil: u chybějících fotek jen ikona fotky a počet, celá věta by se do lišty nevešla. */
    .fe-upozorneni.jen-fotky .fe-upozorneni-text { display: none; }
    .fe-upozorneni.jen-fotky::after { content: attr(data-pocet); font-size: 13px; }
    /* Mobil: cena je v tlačítku (košík + částka), samostatný blok s cenou by se nevešel. */
    .fe-cena { display: none; }
    .fe .fe-do-kosiku { min-height: 38px; padding: 0 12px; gap: 6px; }
    .fe .fe-do-kosiku > span:not(.fe-do-kosiku-cena) { display: none; }
    .fe .fe-do-kosiku .fe-do-kosiku-cena { display: inline; }
    .fe-menu-obsah { position: fixed; top: 52px; right: 8px; left: 8px; width: auto; }
    .fe-ikony {
        flex-direction: row; justify-content: flex-start; gap: 0; padding: 2px 4px; overflow-x: auto;
        border-right: 0; border-top: 1px solid var(--cara);
    }
    .fe .fe-ikony button { flex: 1 0 58px; width: auto; min-width: 58px; min-height: 58px; padding: 6px 4px; font-size: 11.5px; }
    .fe .fe-panel {
        position: fixed; left: 0; right: 0; bottom: 64px; z-index: 30; width: auto; max-height: 58dvh; margin: 0;
        border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(2, 8, 42, .18);
    }
    .fe .fe-panel-zavrit { transform: rotate(-90deg); }
    .fe-sekce { padding: 16px 16px 20px; }
    .fe-prace { grid-template-rows: 52px minmax(0, 1fr); }
    .fe .editor-plocha-obal { padding: 56px 16px 24px; }
    .fe.fe-kniha .editor-plocha-obal { padding-bottom: 72px; }
    .fe-stranka-akce, .fe.fe-jednoduchy .fe-stranka-akce, .fe .fe-stranka-pocet { bottom: calc(100% + 10px); }
    .fe .fe-stranka-pocet { font-size: 12px; padding: 0 10px; min-height: 40px; max-width: calc(100% - 200px); white-space: normal; }
    .fe-pravitko { display: none; }
    .fe .fe-stranka-akce .fe-ikona { width: 36px; min-width: 36px; height: 36px; }
    .fe-pridat-stranku { top: calc(100% + 12px); }
    .fe-kontext { justify-self: stretch; margin: 0 8px; max-width: none; }
    .fe-priblizeni { right: 8px; bottom: 8px; padding: 2px 4px; }
    .fe-priblizeni input[type="range"], .fe-priblizeni .fe-napoveda-nahoru, .fe-dolni .fe-priblizeni { display: none; }
    .fe-dolni { margin: 0 8px 8px; padding: 6px 8px; gap: 4px; }
    .fe .kalendar-miniatura img { height: 44px; max-width: 72px; }
    .fe .editor-prehled-prepinac span { display: none; }
    .fe .editor-prehled-prepinac { width: 36px; padding: 0; justify-content: center; }
    .fe .editor-prehled { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; gap: 16px; }
    .fe .fe-vyber .kniha-rozvrzeni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fe-vyber[popover] { margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 80dvh; border-radius: 18px 18px 0 0; padding: 16px; }
    .fe-objednani-telo { padding: 16px 16px 28px; }
}

/* Správa – tabulky nákupu, marže a prodeje: čísla vpravo, široká tabulka se na mobilu posouvá. */
.tabulka th.cislo, .tabulka td.cislo { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabulka-posun { overflow-x: auto; }

/* ---------- Mapa města (/mapa-mesta) ---------- */
.mapa-hledani { display: flex; gap: .5rem; max-width: 560px; margin: 0 0 1.5rem; }
.mapa-hledani input { flex: 1; }
.mapa-mista { display: grid; gap: .5rem; max-width: 560px; margin: 0; padding: 0; list-style: none; }
.mapa-mista a { display: block; padding: .75rem 1rem; border: 1px solid var(--cara); border-radius: var(--polomer); background: var(--plocha); color: var(--nadpis); text-decoration: none; }
.mapa-mista a:hover { border-color: var(--purpurova); }
.mapa-mista span { color: var(--tlumeny); font-size: .9rem; }
.mapa-rozvrzeni { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.mapa-nahled { position: sticky; top: 1rem; display: grid; gap: .75rem; justify-items: center; }
.mapa-nahled img { display: block; width: 100%; max-width: 560px; height: auto; background: var(--plocha); box-shadow: 0 8px 28px rgba(2, 8, 42, .16); transition: opacity .2s ease; }
.mapa-nahled img.nacita { opacity: .45; }
.mapa-posun { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.mapa-posun a { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--tlacitko-okraj); border-radius: 50%; background: var(--plocha); color: var(--nadpis); font-size: 1.15rem; text-decoration: none; }
.mapa-posun a:hover { border-color: var(--purpurova); color: var(--purpurova); }
.mapa-volby { display: grid; gap: 1.25rem; }
.mapa-volby .formular { display: grid; gap: .9rem; }
.mapa-volby fieldset { margin: 0; padding: 0; border: 0; }
.mapa-volby legend { margin-bottom: .5rem; font-weight: 600; color: var(--nadpis); }
.mapa-styly-mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: .5rem .35rem; }
.mapa-nahled-obal { position: relative; width: 100%; max-width: 560px; min-height: 240px; }
.mapa-nacitani { position: absolute; inset: 40% 10% auto; margin: 0; padding: .75rem 1rem; border-radius: var(--polomer); background: rgba(255, 255, 255, .92); box-shadow: var(--fe-stin, 0 4px 16px rgba(2, 8, 42, .12)); color: var(--nadpis); text-align: center; font-size: .9rem; }
.mapa-nacitani[hidden] { display: none; }
.mapa-styly label.mapa-styl { position: relative; display: grid; gap: .3rem; justify-items: center; cursor: pointer; font-size: .8rem; flex-direction: initial; align-content: start; line-height: 1.2; hyphens: auto; color: var(--tlumeny); text-align: center; }
.mapa-styl input { position: absolute; opacity: 0; pointer-events: none; }
.mapa-styl img { width: 100%; max-width: 64px; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px rgba(2, 8, 42, .1), 0 2px 8px rgba(2, 8, 42, .1); outline: 2px solid transparent; outline-offset: 3px; }
.mapa-styl input:checked ~ img { outline-color: var(--purpurova); }
.mapa-styl input:checked ~ span { font-weight: 600; color: var(--nadpis); }
.mapa-styl input:focus-visible ~ img { outline-color: var(--azurova); }
.mapa-tvary, .mapa-formaty { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.mapa-tvary legend, .mapa-formaty legend { width: 100%; }
.mapa-formaty strong { margin-left: .35rem; color: var(--purpurova); }
.mapa-kosik { display: grid; gap: .5rem; padding: 1rem; border-radius: var(--polomer); background: var(--podklad); }
.mapa-cena { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--nadpis); }
.mapa-volby .napoveda { margin: 0; font-size: .85rem; color: var(--tlumeny); }
@media (max-width: 860px) {
    .mapa-rozvrzeni { grid-template-columns: minmax(0, 1fr); }
    .mapa-nahled { position: static; }
}

/* ---------- Hvězdná mapa (/hvezdna-mapa) – stejné rozložení jako mapa města ---------- */
.obloha-datum { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.obloha-datum label { flex: 1 1 140px; }
.obloha-napady { padding: .5rem .75rem; border: 1px solid var(--cara); border-radius: var(--polomer); background: var(--plocha); }
.obloha-napady summary { cursor: pointer; font-weight: 600; color: var(--purpurova); }
.obloha-napady ul { margin: .25rem 0 .5rem; padding-left: 1.1rem; }
.obloha-napady a { color: var(--nadpis); }

/* ---- Hlavička na telefonu: logo a košík v jednom řádku, menu pod nimi v jednom řádku posouvaném do strany ---- */
.kosik-mobil {
    display: none;
}

@media (max-width: 760px) {
    .hlavicka {
        gap: .4rem 1rem;
        padding-top: calc(.55rem + 4px);
        padding-bottom: .45rem;
    }

    .hlavicka .znacka {
        font-size: 1.2rem;
    }

    .hlavicka .znacka img {
        width: 32px;
    }

    .hlavicka > a.kosik-mobil {
        display: inline-block;
        font-weight: 600;
        color: var(--nadpis);
        padding: .3rem .8rem;
        border: 1px solid var(--cara);
        border-radius: 999px;
    }

    .hlavicka nav .kosik-menu {
        display: none;
    }

    .hlavicka nav {
        flex-wrap: nowrap;
        width: 100%;
        gap: 1.1rem;
        overflow-x: auto;
        scrollbar-width: none;
        font-size: .95rem;
        /* Poslední položka mizí do ztracena – je vidět, že jde menu posunout. */
        mask-image: linear-gradient(90deg, #000 85%, transparent);
    }

    .hlavicka nav::-webkit-scrollbar {
        display: none;
    }

    .hlavicka nav > * {
        flex: none;
        white-space: nowrap;
    }
}

@media (max-width: 760px) {
    /* Tlačítka v úvodu pod sebou zarovnaná vlevo (zalomené druhé tlačítko nemá odsazení). */
    .uvod .tlacitko {
        margin: .25rem .5rem .25rem 0;
    }
}

/* ---- Začátek průvodce dárkovým plakátem ---- */
.plakat-mesta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: -0.5rem 0 1.5rem; color: var(--tlumeny); font-size: .9rem; }
.plakat-mesta .stitek { padding: .2rem .6rem; font-size: .85rem; border: 1px solid var(--cara); border-radius: 999px; background: var(--plocha); color: var(--nadpis); text-decoration: none; }
.plakat-mesta .stitek:hover { border-color: var(--purpurova); }
.plakat-uvod { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: center; margin: 1rem 0 2rem; padding: 1.5rem; border-radius: var(--polomer); background: var(--podklad); }
.plakat-uvod img { width: 100%; height: auto; display: block; }
.plakat-uvod h2 { margin-top: 0; font-size: 1.15rem; }
.plakat-ceny { list-style: none; margin: 0 0 1rem; padding: 0; }
.plakat-ceny li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--cara); }
@media (max-width: 760px) {
    .plakat-uvod { grid-template-columns: 1fr; padding: 1rem; }
}

/* Pole, která se ukážou až po zaškrtnutí volby nad nimi (firma, jiná doručovací adresa, slepá zásilka) – bez skriptu. */
.zavisle { display: contents; }
label.volba:has(input[data-ukaz]:not(:checked)) + .zavisle,
label.volba:has(input[data-ukaz]:not(:checked)) + small + .zavisle { display: none; }

/* Mapa města: tažení výřezu a přiblížení přímo na náhledu (jako na webových mapách). */
.mapa-nahled-obal { overflow: hidden; }
[data-mapa-tahani] img { cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
[data-mapa-tahani].tahne img { cursor: grabbing; transition: none; }
.mapa-zoom { position: absolute; left: 0; top: 0; margin: .6rem; display: grid; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(2, 8, 42, .25); }
.mapa-zoom a { display: grid; place-items: center; width: 34px; height: 34px; background: #fff; color: #111; font-size: 1.25rem; line-height: 1; text-decoration: none; }
.mapa-zoom a + a { border-top: 1px solid #ddd; }
.mapa-zoom a:hover { background: #f2f2f2; }
.mapa-tahni { margin: 0; text-align: center; }

/* Panel nastavení plakátu (mapa města, hvězdná mapa): záložky Krok 1–3, řádky „popisek vlevo, pole vpravo“
   a kompaktní přepínače místo dlouhých seznamů – méně rolování (majitel 14. 11. 2026, podle konkurence). */
.mapa-titulek { margin-bottom: 1rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.mapa-volby .mapa-panel { gap: 0; }
.mapa-zalozky { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: .5rem; border-bottom: 1px solid var(--tlacitko-okraj); }
.mapa-zalozka { position: relative; display: grid; gap: .1rem; padding: .55rem .25rem .6rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mapa-zalozka input, .mapa-dalsi input, .prepinac input { position: absolute; opacity: 0; pointer-events: none; }
.mapa-zalozka small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tlumeny); }
.mapa-zalozka span { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--nadpis); }
.mapa-zalozka:has(input:checked) { border-bottom-color: var(--nadpis); }
.mapa-zalozka:has(input:checked) small { color: var(--purpurova); }
.mapa-zalozka:has(input:focus-visible) { outline: 2px solid var(--azurova); }
.mapa-panel:has(input[name=krok][value="1"]:checked) .mapa-krok:not([data-krok="1"]),
.mapa-panel:has(input[name=krok][value="2"]:checked) .mapa-krok:not([data-krok="2"]),
.mapa-panel:has(input[name=krok][value="3"]:checked) .mapa-krok:not([data-krok="3"]) { display: none; }
.mapa-krok { display: grid; }
.mapa-radek { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem 1rem; align-items: center; margin: 0; padding: .6rem 0; border: 0; border-bottom: 1px solid var(--tlacitko-okraj); }
fieldset.mapa-radek { display: grid; }
fieldset.mapa-radek > legend { float: left; margin: 0; padding-top: .45rem; }
.mapa-popisek { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nadpis); }
.mapa-volby .mapa-radek input:not([type=radio]), .mapa-volby .mapa-radek select { width: 100%; margin: 0; padding: .5rem .7rem; }
.mapa-misto { display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.mapa-misto a { font-size: .85rem; }
.mapa-krok > .mapa-styly { padding: .6rem 0; border-bottom: 1px solid var(--tlacitko-okraj); }
.mapa-krok > .mapa-styly legend { margin-bottom: .5rem; }
.mapa-krok > .napoveda { padding: .4rem 0; }
.prepinac { display: flex; flex-wrap: wrap; gap: 0; background: var(--podklad); border-radius: 6px; padding: 2px; }
.prepinac label { position: relative; flex: 1 1 auto; cursor: pointer; }
.prepinac span { display: grid; place-items: center; gap: .05rem; min-height: 38px; padding: .35rem .7rem; border: 1px solid transparent; border-radius: 5px; font-size: .85rem; color: var(--tlumeny); text-align: center; line-height: 1.2; }
.prepinac span small { font-weight: 700; color: var(--purpurova); }
.prepinac input:checked + span { background: var(--plocha); border-color: var(--nadpis); color: var(--nadpis); font-weight: 600; }
.prepinac input:focus-visible + span { outline: 2px solid var(--azurova); }
.mapa-dalsi { justify-self: end; margin-top: .75rem; padding: .45rem 1rem; border: 1px solid var(--tlacitko-okraj); border-radius: 999px; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--nadpis); position: relative; }
.mapa-dalsi:hover { border-color: var(--purpurova); color: var(--purpurova); }
.mapa-volby { gap: 1rem; }
.mapa-kosik { grid-template-columns: auto 1fr; align-items: center; column-gap: 1rem; }
.mapa-kosik .napoveda { grid-column: 1 / -1; }
@media (max-width: 520px) {
    .mapa-radek { grid-template-columns: 1fr; gap: .35rem; }
    fieldset.mapa-radek > legend { float: none; padding: 0; }
}
.mapa-panel label.mapa-radek { display: grid; flex-direction: initial; font-weight: 400; }
.mapa-panel label.mapa-zalozka { display: grid; gap: .1rem; }
.mapa-panel .prepinac label { display: block; flex: 1 1 0; min-width: 4.5rem; }
.mapa-panel label.mapa-dalsi { display: inline-block; }
.mapa-panel .prepinac-vic label { flex: 1 1 30%; }

/* Konfigurátor tiskovin zhuštěný jako panel plakátů (majitel 14. 11. 2026: „moc roztahané, moc se roluje“):
   malé popisky skupin, volby v těsné mřížce, oddělovací čáry místo velkých mezer. */
.volby { gap: 0; }
.volby fieldset.dlazdice { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .35rem; padding: 0 0 .7rem; border: 0; border-bottom: 1px solid var(--tlacitko-okraj); border-radius: 0; }
.volby fieldset.dlazdice > legend { float: none; width: auto; margin: 0; padding: .7rem 0 .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.volby .dlazdice-volba { min-height: 40px; padding: .35rem .6rem; gap: .4rem; font-size: .85rem; line-height: 1.2; }
.volby .dlazdice-volba small { font-size: .7rem; }
.volby .dlazdice-ikona { width: 18px; height: auto; }
.volby .dlazdice-ilustrace { width: 26px; height: 26px; margin: -2px 0; }
.volby fieldset.dlazdice-naklad { grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); }
.volby fieldset.dlazdice-naklad > small { grid-column: 1 / -1; }
.dlazdice-naklad .dlazdice-volba { min-width: 0; padding: .3rem .25rem; }
.dlazdice-jiny { font-size: .75rem; }
.dlazdice-jiny input { width: 100%; padding: .3rem .4rem; }
.volby > label, .volby > .volba, .volby > details, .volby > p, .volby > div { margin-top: .6rem; }
.volby details.vlastnosti { margin: 0 0 .25rem; }
.volby details.vlastnosti[open] > summary { margin-bottom: .25rem; }

/* Editor kalendáře: styly a barevná schémata po třech (dřív po dvou, panel se hodně roloval). */
.fe .kalendar-dlazdice { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.fe .kalendar-dlazdice-volba { font-size: 11px; line-height: 1.25; }
.fe .kalendar-vzhled > * + * { margin-top: 12px; }

/* Editor – strana s maskou fotek (MaskaFotek): fotky dole, bílý přechod a grafika šablony nad nimi, ostatní prvky navrch. */
.editor-plocha.s-maskou .editor-prvky > .editor-prvek { z-index: 3; }
.editor-plocha.s-maskou .editor-prvky > .editor-fotka { z-index: 0; }
.editor-maska-prechod { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; z-index: 1; }
.editor-plocha.s-maskou > .editor-podklad { visibility: hidden; }
.mapa-nahled img { outline: 1px solid rgba(2, 8, 42, .12); }

/* Správa: menu má výšku okna – když se položky nevejdou (nízké okno), posouvá se samo, místo aby přeteklo pod okraj (bílý pruh). */
.sprava-menu { overflow-y: auto; overscroll-behavior: contain; }

/* Správa – firemní účet zákazníka na jednom řádku (popisek vedle malého pole), tlačítka v tabulkách menší. */
.sprava-obsah .firemni-ucet label { display: inline-flex; flex-direction: row; align-items: center; gap: .35rem; margin: 0; font-weight: 400; white-space: nowrap; }
.sprava-obsah .firemni-ucet input[type=number] { width: 4.5rem; min-height: 0; padding: .3rem .45rem; }
.sprava-obsah .tabulka .tlacitko { padding: .35rem .9rem; min-height: 0; font-size: .85rem; white-space: nowrap; }
.sprava-obsah .tabulka td form { margin: 0; }
/* Mapa města – okno přes plochu mapy, ve kterém se při tažení posouvá kopie náhledu (nápisy zůstanou). */
.mapa-okno { position: absolute; overflow: hidden; background: #eceef1; pointer-events: none; z-index: 2; }
.mapa-okno img { position: absolute; max-width: none; box-shadow: none; outline: 0; }
/* Předchozí (posunutý) náhled, dokud se nenačte nový – mírně zašedlý. */
img.mapa-predchozi { position: absolute; left: 0; top: 0; max-width: none; opacity: .6; pointer-events: none; z-index: 1; }
.mapa-okno.mapa-predchozi { opacity: .6; z-index: 2; }
.mapa-nacitani { z-index: 3; }

/* Správa – šablony po kategoriích (rozbalovací skupiny). */
.sablony-skupina { margin: 0 0 .75rem; }
.sablony-skupina > summary { cursor: pointer; padding: .6rem .9rem; border: 1px solid var(--tlacitko-okraj); border-radius: var(--polomer-maly); background: var(--plocha); font-weight: 700; color: var(--nadpis); list-style-position: inside; }
.sablony-skupina[open] > summary { margin-bottom: .5rem; }
.sablony-skupina .pocet { margin-left: .4rem; padding: .05rem .5rem; border-radius: 999px; background: var(--podklad); font-size: .8rem; font-weight: 600; color: var(--tlumeny); }
/* Správa – úzký seznam šablon a lišta hromadného přesunu do kategorie. */
.sablony-presun { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 .75rem; padding: .5rem .75rem; border: 1px solid var(--tlacitko-okraj); border-radius: var(--polomer-maly); background: var(--plocha); font-size: .85rem; }
.sablony-presun select, .sablony-presun input { width: auto; min-height: 0; padding: .3rem .5rem; font-size: .85rem; }
.sablony-presun .tlacitko { padding: .35rem .9rem; min-height: 0; font-size: .85rem; }
.sablony-skupina > summary { padding: .4rem .75rem; font-size: .9rem; }
.sprava-obsah .sablony-tabulka td { padding: .3rem .6rem; font-size: .85rem; vertical-align: middle; }
.sablony-tabulka td.vyber { width: 1.5rem; }
.sablony-tabulka small { margin-left: .4rem; color: var(--tlumeny); }
.sablony-tabulka .tlumene { color: var(--tlumeny); white-space: nowrap; }
.sablony-tabulka .zapnuta { color: #1a7f45; white-space: nowrap; }
/* Správa – seznam šablon jako v e-shopech: stavy, lišta filtru a hromadných akcí, úzké řádky. */
.sablony-stavy { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: 0 0 .6rem; font-size: .85rem; }
.sablony-stavy a { text-decoration: none; }
.sablony-stavy a.aktivni { font-weight: 700; color: var(--nadpis); }
.sablony-stavy span { color: var(--tlumeny); }
.sablony-lista { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-size: .85rem; }
.sablony-lista select, .sablony-lista input { width: auto; min-height: 0; margin: 0; padding: .3rem .5rem; font-size: .85rem; }
.sablony-lista .tlacitko { padding: .35rem .9rem; min-height: 0; font-size: .85rem; }
.sablony-lista .pocet-polozek { margin-left: auto; color: var(--tlumeny); }
.sprava-obsah .sablony-tabulka th { padding: .4rem .6rem; font-size: .75rem; }
.sablony-tabulka td.miniatura, .sablony-tabulka th.miniatura { width: 40px; padding-top: .15rem; padding-bottom: .15rem; }
.sablony-tabulka td.miniatura img { display: block; width: 32px; height: 32px; object-fit: contain; }
.sprava-obsah .sablony-lista input, .sprava-obsah .sablony-lista select { flex: 0 1 auto; width: auto; max-width: 16rem; min-height: 0; margin: 0; padding: .3rem .5rem; font-size: .85rem; }
.sprava-obsah .sablony-lista input { width: 13rem; }
.sablony-tabulka td.miniatura img { border: 1px solid var(--tlacitko-okraj); border-radius: 2px; background: #fff; }
.sprava-obsah .sablony-tabulka td:nth-child(3) { min-width: 14rem; }
/* Pole s heslem s ikonou oka (potvrzeni.js). */
.heslo-pole { position: relative; display: block; }
.heslo-pole > input { width: 100%; padding-right: 2.75rem; box-sizing: border-box; }
.heslo-oko { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #5b6070; cursor: pointer; }
.heslo-oko:hover, .heslo-oko:focus-visible { color: #02082a; background: rgba(2, 8, 42, .06); }