/* Rozhraní produktu – průvodce instalací a administrace. Neutrální, nezávislé na šabloně obchodu.
   Barvy jen přes proměnné --ui-*; písmo Onest (assets/fonts); bez stínů a s malým zaoblením (docs/design-pravidla.md). Tmavý režim podle systému. */

:root {
  --ui-bg: #f3f2ee;
  --ui-panel: #ffffff;
  --ui-panel-2: #fafaf8;
  --ui-ink: #17171c;
  --ui-ink-2: #3a3a44;
  --ui-muted: #6c6c78;
  --ui-btn: #3f3f48;   /* hlavní tlačítko tmavě šedé, ne úplně černé (zadavatel 26. 10. 2026) */
  --ui-line: #e5e5df;
  --ui-line-2: #d6d6ce;
  /* barva akcentu rozhraní = tyrkysová AVITONA podle brand manuálu: na světlém #008c94, na tmavém #32d3da (zadavatel
     26. 10. 2026: „AVITONA tyrkys tu má být!“) – barva obchodu patří jen obchodu */
  --ui-accent: #008c94;
  --ui-accent-ink: #008c94;
  --ui-accent-soft: rgb(0 140 148 / .10);
  --ui-on-accent: #ffffff;
  --ui-ok: #16834f;
  --ui-ok-soft: #e7f5ee;
  --ui-warn: #a15c07;
  --ui-warn-soft: #fdf3e2;
  --ui-err: #c2283c;
  --ui-err-soft: #fcebed;
  --ui-shadow: none;
  --ui-shadow-lg: 0 10px 40px rgb(20 20 30 / .14);
  --ui-r: 6px;
  --ui-r-sm: 4px;
  --ui-font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ui-ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

/* tmavý vzhled rozhraní jen podle přepínače v menu administrace (výchozí světlý – zadavatel 25. 10. 2026) */
:root[data-ui="dark"] {
    --ui-bg: #111115;
    --ui-panel: #1a1a20;
    --ui-panel-2: #16161b;
    --ui-ink: #f1f1f4;
    --ui-ink-2: #cfcfd8;
    --ui-muted: #9a9aa8;
    --ui-btn: #e4e4ea;
    --ui-line: #2a2a33;
    --ui-line-2: #393944;
    --ui-accent: #32d3da;
    --ui-accent-ink: #32d3da;
    --ui-accent-soft: rgb(50 211 218 / .14);
    --ui-on-accent: #0a0a0b;
    --ui-ok: #4cc38a;
    --ui-ok-soft: #13291f;
    --ui-warn: #f0b05a;
    --ui-warn-soft: #2d2313;
    --ui-err: #ff6b7f;
    --ui-err-soft: #331820;
    --ui-shadow: none;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ui {
  margin: 0;
  font: 14.5px/1.5 var(--ui-font);
  color: var(--ui-ink);
  /* živé, ale klidné pozadí: jemný nádech barvy obchodu v rozích (bez fialových přechodů, bez skla) */
  background:
    radial-gradient(1200px 720px at 100% -12%, color-mix(in srgb, var(--ui-accent) 24%, transparent), transparent 64%),
    radial-gradient(1000px 680px at -10% 112%, color-mix(in srgb, var(--ui-accent) 14%, transparent), transparent 62%),
    var(--ui-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
.ui a:not(.btn) { color: var(--ui-accent-ink); text-decoration: none; }
.ui a.btn { text-decoration: none; }
.ui a:not(.btn):hover { text-decoration: underline; }
.ui h1, .ui h2, .ui h3 { margin: 0 0 .4em; line-height: 1.2; letter-spacing: -.015em; }
.ui h1 { font-size: 26px; font-weight: 650; }
.ui h2 { font-size: 18px; font-weight: 620; }
.ui h3 { font-size: 15px; font-weight: 620; }
.ui p { margin: 0 0 .9em; }
.ui .muted { color: var(--ui-muted); }
.ui .small { font-size: 13px; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- formuláře ---------- */
.field { display: grid; gap: 8px; margin-bottom: 18px; align-content: start; }
.field > label, .label { font-size: 13px; font-weight: 560; color: var(--ui-ink-2); }
.hint, .field .hint { font-size: 12.5px; color: var(--ui-muted); }
.field .hint { margin: 0; }
.field .err, .err-text { font-size: 12.5px; color: var(--ui-err); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 12px; }
.row > .field > label[style*="min-height"] { display: flex; align-items: flex-end; }   /* admin.js: popisky v řadě stejně vysoké */
.ui input:not([type]), .ui input[type=text], .ui input[type=email], .ui input[type=password], .ui input[type=number], .ui input[type=tel],
.ui input[type=url], .ui input[type=search], .ui input[type=date], .ui input[type=month], .ui select, .ui textarea {
  width: 100%;
  font: inherit;
  color: var(--ui-ink);
  background: var(--ui-panel);
  border: 1px solid var(--ui-line-2);
  border-radius: var(--ui-r-sm);
  padding: 8px 11px;
  min-height: 38px;
  transition: border-color .15s, box-shadow .15s;
}
.ui input[type=date], .ui input[type=month] { color-scheme: light dark; }
.ui textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.ui select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.ui input:focus, .ui select:focus, .ui textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 22%, transparent); }
.ui input[aria-invalid=true] { border-color: var(--ui-err); }
.ui :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui :is(button, .btn, .seg span):focus-visible, .seg input:focus-visible + span { outline-offset: -2px; }   /* zvýraznění tlačítka uvnitř, nepřetéká (zadavatel 27. 10. 2026) */
.input-group { display: flex; gap: 8px; }
.input-group > input { flex: 1; min-width: 0; }

.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.check + p, .check + .form-actions, .check + .btn { margin-top: 20px; } /* tlačítko pod zaškrtávátkem nesmí být přilepené */
.check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--ui-accent); flex: none; }

/* přepínač zapnuto / vypnuto */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.switch input { appearance: none; width: 40px; height: 23px; border-radius: var(--ui-r-sm); background: var(--ui-line-2); position: relative; cursor: pointer; transition: background .2s; flex: none; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 2px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s var(--ui-ease); }
.switch input:checked { background: var(--ui-accent); }
.switch input:checked::after { transform: translateX(17px); }

/* segmentová volba (radio jako čipy) */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--ui-line-2); border-radius: var(--ui-r-sm); font-size: 13px; background: var(--ui-panel); transition: .15s; }
.seg input:checked + span { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-ink); font-weight: 560; }
.seg input:focus-visible + span { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.seg label:hover span { border-color: var(--ui-accent); color: var(--ui-accent-ink); }
/* výběr barev rozhraní: pod myší už barva, kterou volba nastaví – představa před uložením (zadavatel 27. 10. 2026) */
.pal-seg label[data-pal="avitona"] { --pal-c: #008c94; } .pal-seg label[data-pal="puvodni"] { --pal-c: #c2410c; }
:root[data-ui="dark"] .pal-seg label[data-pal="avitona"] { --pal-c: #32d3da; } :root[data-ui="dark"] .pal-seg label[data-pal="puvodni"] { --pal-c: #f08a5d; }
.pal-seg label[data-pal]:hover span { border-color: var(--pal-c); color: var(--pal-c); background: color-mix(in srgb, var(--pal-c) 10%, var(--ui-panel)); }   /* pod myší tyrkysový obrys a text (zadavatel 26. 10. 2026) */
.seg input:disabled { cursor: not-allowed; }
.seg label:has(input:disabled) span { opacity: .45; border-color: var(--ui-line-2); color: inherit; }   /* volba zatím nejde (např. Logo bez loga) */
/* výchozí volba šablony: malá tečka za popiskem; „Výchozí“ u popisku volbu vrátí */
.seg .is-def span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.reset-def { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 0; border: 0; background: none; color: var(--ui-muted);
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; vertical-align: baseline; }
.reset-def:hover { color: var(--ui-accent-ink); }
.reset-def .i { width: 13px; height: 13px; }
.reset-def[hidden] { display: none; }
.studio-defs { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 0 0 18px; font-size: 12.5px; color: var(--ui-muted); }
.studio-defs .reset-all { margin-left: 0; }

.ui input[type=range] { width: 100%; accent-color: var(--ui-accent); }
.range-row { display: grid; grid-template-columns: 1fr 52px; gap: 12px; align-items: center; }
.range-row output { font-size: 13px; color: var(--ui-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* barvy */
.color-input { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ui-line-2); border-radius: var(--ui-r-sm); padding: 4px 8px 4px 4px; background: var(--ui-panel); }
.color-input input[type=color] { width: 30px; height: 30px; border: 0; padding: 0; background: none; border-radius: 6px; cursor: pointer; flex: none; }
.color-input input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-input input[type=color]::-webkit-color-swatch { border: 1px solid rgb(0 0 0 / .12); border-radius: 6px; }
.color-input input[type=text] { border: 0 !important; box-shadow: none !important; padding: 4px 0; min-height: 0; font-family: ui-monospace, monospace; font-size: 13px; text-transform: lowercase; }
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.color-grid .label { margin-bottom: 8px; display: block; }
.wz-section .color-sub { margin: 30px 0 4px; font-size: 15px; }
/* ikona záložky a náhledy pro sdílení (Identita) – ukázky, jak je uvidí prohlížeč, telefon a WhatsApp */
.brandimg .seg { margin: 12px 0; }
.bi-fav { display: flex; align-items: flex-end; gap: 28px; margin: 12px 0 4px; }
.bi-tab { display: inline-flex; align-items: center; gap: 8px; max-width: 230px; padding: 9px 16px 10px; border: 1px solid var(--ui-line-2); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--ui-panel); font-size: 12.5px; box-shadow: 0 1px 0 var(--ui-panel); }
.bi-tab span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bi-tab img { flex: none; image-rendering: auto; }
.bi-app { margin: 0; display: grid; justify-items: center; gap: 5px; }
.bi-app img { border-radius: 14px; }
.bi-app figcaption { font-size: 11px; color: var(--ui-muted); }
.bi-share { display: grid; gap: 16px; margin: 12px 0 0; }
.bi-share figure { margin: 0; display: grid; gap: 6px; }
.bi-msg { max-width: 340px; padding: 4px; border-radius: 8px; background: var(--ui-panel-2); }
.bi-msg img { display: block; width: 100%; height: auto; border-radius: 6px; }
.bi-meta { display: grid; gap: 2px; padding: 7px 8px 5px; font-size: 12px; line-height: 1.35; min-width: 0; }
.bi-meta strong { font-size: 13px; }
.bi-meta span { color: var(--ui-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bi-meta small { color: var(--ui-muted); font-size: 11px; }
.bi-msg-sm { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 4px; }
.bi-msg-sm img { width: 76px; height: 76px; object-fit: cover; }
.color-reset[hidden] { display: none; }
.color-input input[type=text]::placeholder { text-transform: none; font-family: var(--ui-font); }
.color-reset { display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; background: none; color: var(--ui-muted); cursor: pointer; border-radius: var(--ui-r-sm); flex: none; }
.color-reset:hover { color: var(--ui-accent-ink); }
.color-reset .i { width: 14px; height: 14px; }

.palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.palette { border: 1px solid var(--ui-line-2); border-radius: var(--ui-r-sm); padding: 6px; background: var(--ui-panel); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: .15s; }
.palette:hover { border-color: var(--ui-accent); }
.palette[aria-pressed=true] { border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-accent-soft); }
.palette .sw { display: flex; height: 30px; border-radius: 4px; overflow: hidden; }
.palette .sw i { flex: 1; }
.palette .sw i:first-child { flex: 1.6; }
.palette small { display: block; font-size: 11.5px; margin-top: 5px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- tlačítka ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 560; font-size: 14px; line-height: 1;
  min-height: 38px; padding: 0 16px;
  border-radius: var(--ui-r-sm); border: 1px solid var(--ui-line-2);
  background: var(--ui-panel); color: var(--ui-ink);
  cursor: pointer; text-decoration: none !important; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
}
/* po najetí myší tyrkysově místo bílé / černé – stejný styl, jen barva (zadavatel 26. 10. 2026: „tlačítka by měla po najetí
   myší být tyrkysová… ne bílá“): obrysové a průhledné text, ikona a rámeček, plná tlačítka tyrkysová výplň */
.btn:hover { border-color: var(--ui-accent); color: var(--ui-accent-ink); }

.btn { vertical-align: middle; }   /* v řádku textu stejně vysoko s ikonou i bez ní (zadavatel 26. 10. 2026: „hlídej si všude to zarovnání“) */
.btn .i { width: 18px; height: 18px; }
.btn-primary { background: var(--ui-btn); border-color: var(--ui-btn); color: var(--ui-panel); }
.btn-primary:hover, .btn-dark:hover { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-on-accent); }
.btn-dark { background: var(--ui-btn); border-color: var(--ui-btn); color: var(--ui-panel); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ui-ink-2); }
.btn-ghost:hover { background: color-mix(in srgb, var(--ui-ink) 6%, transparent); border-color: transparent; color: var(--ui-accent-ink); }
.btn-danger { color: var(--ui-err); }
.btn-danger:hover { border-color: var(--ui-err); color: var(--ui-err); }
.btn-sm { min-height: 32px; padding: 0 11px; font-size: 13px; }
.btn-lg { min-height: 46px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }
.btn.is-busy::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- karty, štítky, upozornění ---------- */
/* Bloky obsahu bez rámečků a podkladů („žádné chlívky“): blok začíná tenkou linkou nahoře, odděluje ho prostor.
   Nikdy dvě linky pod sebou ani vedle sebe bez obsahu mezi nimi – hlídá scripts/kontrola-linek.js. */
.card { background: none; border: 0; border-top: 1px solid var(--ui-line-2); border-radius: 0; box-shadow: none; }
.card-pad { padding: 18px 0 8px; }
.card + .card { margin-top: 36px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 12px; border-bottom: 1px solid var(--ui-line); }
.card-head h2 { margin: 0; font-size: 15.5px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--ui-r-sm); font-size: 12px; font-weight: 560; background: color-mix(in srgb, var(--ui-ink) 7%, transparent); color: var(--ui-ink-2); white-space: nowrap; }
.badge-ok { background: var(--ui-ok-soft); color: var(--ui-ok); }
.badge-warn { background: var(--ui-warn-soft); color: var(--ui-warn); }
.badge-err { background: var(--ui-err-soft); color: var(--ui-err); }
.badge-accent { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
.notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--ui-r-sm); background: var(--ui-accent-soft); color: var(--ui-ink); font-size: 13.5px; margin-bottom: 16px; }
.notice .i { color: var(--ui-accent-ink); margin-top: 1px; }
.notice-ok { background: var(--ui-ok-soft); } .notice-ok .i { color: var(--ui-ok); }
.notice-warn { background: var(--ui-warn-soft); } .notice-warn .i { color: var(--ui-warn); }
.notice-err { background: var(--ui-err-soft); } .notice-err .i { color: var(--ui-err); }
.notice p:last-child { margin: 0; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--ui-ink); color: var(--ui-panel); padding: 10px 16px; border-radius: var(--ui-r-sm); font-size: 13.5px; box-shadow: var(--ui-shadow-lg); transition: .25s var(--ui-ease); pointer-events: none; display: flex; gap: 8px; align-items: center; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- průvodce instalací ---------- */
.wz { display: grid; grid-template-columns: minmax(420px, 480px) 1fr; height: 100vh; height: 100dvh; }
.wz-panel { min-width: 0; display: flex; flex-direction: column; background: var(--ui-panel); border-right: 1px solid var(--ui-line); min-height: 0; }
.wz-head { position: relative; z-index: 1; padding: 20px 28px 12px; transition: box-shadow .2s; }
/* posunutý obsah kroku nezajíždí bez oddělení pod řádek Krok N z M (audit průvodce 29. 10. 2026) */
.wz-panel.is-scrolled .wz-head { box-shadow: 0 1px 0 var(--ui-line), 0 8px 14px -12px rgb(0 0 0 / .25); }
.wz-brand { display: flex; align-items: center; gap: 10px; font-weight: 620; font-size: 14px; }
@media (max-width: 480px) { .wz-brand { gap: 4px; } .wz-brand-label { display: none; } } /* telefon: Upravit na webu jen ikonou */
.wz-progress { display: flex; gap: 4px; margin: 20px 0 14px; }
.wz-progress a, .wz-progress span { flex: 1; height: 4px; border-radius: 9px; background: var(--ui-line); transition: background .3s; }
.wz-progress .done { background: var(--ui-accent); opacity: .45; }
.wz-progress .now { background: var(--ui-accent); }
.wz-step-meta { font-size: 12.5px; color: var(--ui-muted); font-weight: 520; letter-spacing: .02em; }
.wz-body { position: relative; flex: 1; overflow-y: auto; padding: 0 28px 28px; scrollbar-gutter: stable; }   /* relative: skrytá pole voleb (position: absolute) se počítají k panelu, ne ke stránce – jinak ji natáhla a kolečko v náhledu sjelo s celým průvodcem dolů */
.wz-body h1 { margin-top: 6px; }
.wz-lead { color: var(--ui-muted); font-size: 15px; margin-bottom: 22px; }
.wz-section { padding: 18px 0; border-top: 1px solid var(--ui-line); }
.wz-section:first-of-type { border-top: 0; padding-top: 4px; }
.ui .wz-section > h2 { font-size: 14.5px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.wz-section > h2 .i { color: var(--ui-muted); width: 18px; height: 18px; }
/* výběr dopravy a plateb v průvodci: zaškrtávací seznam s cenou / poznámkou pod názvem */
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pick-list .check { align-items: flex-start; }
.pick-list .check span { display: grid; gap: 1px; }
.pick-list small { color: var(--ui-muted); font-size: 12.5px; line-height: 1.4; }
/* Pokračovat v průvodci: chybějící povinné pole červeně, doporučené (jde přeskočit) žlutě; okénko Přeskočit nad patičkou */
.field.is-missing :is(input, select, textarea) { border-color: var(--ui-err); box-shadow: 0 0 0 3px var(--ui-err-soft); }
.field.is-wanted :is(input, select, textarea) { border-color: var(--ui-warn); box-shadow: 0 0 0 3px var(--ui-warn-soft); }
.field.is-missing > label { color: var(--ui-err); }
.wz-skip { display: grid; gap: 10px; padding: 14px 28px; border-top: 1px solid var(--ui-line); background: var(--ui-warn-soft); font-size: 13.5px; line-height: 1.5; animation: wz-skip-in .25s var(--ui-ease); }
.wz-skip p { margin: 0; }
.wz-skip-btns { display: flex; justify-content: flex-end; gap: 8px; }
@keyframes wz-skip-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .wz-skip { animation: none; } }
@media (max-width: 860px) { .wz-skip { position: sticky; bottom: 68px; padding: 12px 18px; } }
.wz-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 28px; border-top: 1px solid var(--ui-line); background: var(--ui-panel); }
.wz-saved { font-size: 12.5px; color: var(--ui-muted); display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .3s; }
.wz-saved.is-on { opacity: 1; }
.wz-saved .i { width: 16px; height: 16px; color: var(--ui-ok); }

.wz-preview { position: relative; display: flex; flex-direction: column; min-width: 0; background:
  radial-gradient(1200px 600px at 70% -10%, color-mix(in srgb, var(--ui-accent) 9%, transparent), transparent 70%), var(--ui-bg); }
.wz-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; }
.wz-devices { display: inline-flex; background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); padding: 3px; }
.wz-devices button { border: 0; background: transparent; color: var(--ui-muted); width: 38px; height: 30px; border-radius: var(--ui-r-sm); cursor: pointer; display: grid; place-items: center; }
.wz-devices button[aria-pressed=true] { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
.wz-devices button:hover { color: var(--ui-accent-ink); }
.wz-preview .wz-edit-hint { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: -4px 22px 12px; color: var(--ui-muted); font-size: 13px; text-align: left; }
/* lišta náhledu ve Studiu: dvě pevné strany, nic se podle šířky okna nepřesouvá na střed */
.studio-bar-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.studio-bar-end { margin-left: auto; gap: 8px; }
@media (max-width: 860px) {
  /* telefon: stav náhledu na vlastním řádku pod přepínačem, tlačítka zůstávají vpravo nahoře */
  .studio-bar { flex-wrap: wrap; row-gap: 10px; }
  .studio-bar-end { display: contents; }
  .studio-bar-end [data-replay] { margin-left: auto; }
  .studio-bar::after { content: ""; order: 9; flex-basis: 100%; } /* zalomení řádku před stavem náhledu */
  .studio-bar-end .badge { order: 10; }
  .wz-preview .wz-edit-hint { margin: 0 14px 10px; }
}
.wz-edit-hint .i { width: 16px; height: 16px; flex: none; }
.wz-stage { flex: 1; position: relative; min-height: 0; padding: 0 22px 22px; display: grid; place-items: center; }
.wz-frame { position: relative; background: var(--ui-panel); border-radius: 12px; box-shadow: var(--ui-shadow-lg); overflow: hidden; transform-origin: top left; }
.wz-frame::before { content: ""; display: block; height: 30px; background: var(--ui-panel-2); border-bottom: 1px solid var(--ui-line);
  background-image: radial-gradient(circle at 16px 15px, #ff5f57 5px, transparent 5.5px), radial-gradient(circle at 34px 15px, #febc2e 5px, transparent 5.5px), radial-gradient(circle at 52px 15px, #28c840 5px, transparent 5.5px); }
.wz-frame iframe { display: block; border: 0; background: #fff; }
.wz-frame.is-phone { border-radius: 34px; padding: 10px; background: #111; }
.wz-frame.is-phone::before { display: none; }
.wz-frame.is-phone iframe { border-radius: 26px; }
/* Studio: telefon nad rozostřeným náhledem počítače (jako v úpravách na celé obrazovce – zadavatel 28. 10. 2026) */
.studio-phone { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 10px 22px 22px;
  background: rgb(10 10 12 / .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.studio-phone-device { display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 10px; height: min(940px, 100%); }
.studio-phone-head { display: flex; align-items: center; gap: 14px; padding: 4px 4px 4px 14px; border-radius: var(--ui-r-sm); font-size: 14px;
  background: rgb(255 255 255 / .78); color: #16161a; box-shadow: 0 6px 20px rgb(0 0 0 / .18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.studio-phone-head button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--ui-r-sm); background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.studio-phone-head button:hover { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
.studio-phone-head .i { width: 18px; height: 18px; }
.studio-phone iframe { display: block; width: 390px; height: 100%; border: 0; background: #fff; }
/* Telefon s tenkým rámečkem (zadavatel 29. 10. 2026: „jako by to byl opravdu telefon s velmi tenkým rámečkem“) – stejné
   v ui.css (Studio) i edit.css (úpravy na stránce): černý rámeček 5 px, displej 390 px, výřez, stavový řádek, tlačítka z boku */
.phone-hw { position: relative; min-height: 0; padding: 5px; border-radius: 52px; background: #0c0c0e;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .16), 0 0 0 2px #2a2a2e, 0 28px 70px rgb(0 0 0 / .45); }
.phone-hw::before, .phone-hw::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a2a2e; }
.phone-hw::before { left: -4px; top: 150px; height: 64px; box-shadow: 0 -52px 0 -10px #2a2a2e; }
.phone-hw::after { right: -4px; top: 170px; height: 90px; }
.phone-screen { position: relative; display: grid; grid-template-rows: 44px 1fr 24px; height: 100%; overflow: hidden; border-radius: 47px; background: #fff; }
.phone-screen::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 10px; width: 104px; height: 30px; border-radius: 20px;
  background: #000; transform: translateX(-50%); pointer-events: none; }
.phone-status { display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 44px; background: #fff; color: #111;
  font: 600 15px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; transition: background .3s, color .3s; }
.phone-home { position: relative; background: #fff; color: #111; transition: background .3s; }
.phone-home::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; border-radius: 3px; background: currentColor; opacity: .85; transform: translateX(-50%); }
.phone-ind { display: inline-flex; align-items: center; gap: 6px; }
.phone-ind svg { fill: currentColor; }

:root[data-ui="dark"] .studio-phone-head { background: rgb(28 28 32 / .72); color: #ececf0; }
.wz-loading { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .2s; }
.wz-loading.is-on { opacity: 1; }
.wz-loading span { width: 28px; height: 28px; border: 3px solid var(--ui-accent); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

.wz-mobile-toggle { display: none; }

/* volba oboru a šablony */
.choices { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ui-line); }
/* výběr jako seznam oddělený linkami – žádné dlaždice s ikonou */
.choice { position: relative; display: grid; gap: 2px; padding: 13px 36px 13px 0; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.choice strong { font-size: 15px; font-weight: 600; }
.choice small { color: var(--ui-muted); font-size: 13px; line-height: 1.4; }
.choice:hover strong { color: var(--ui-accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.choice[aria-pressed=true] strong { color: var(--ui-accent-ink); }
.choice[aria-pressed=true]::after { content: ""; position: absolute; right: 4px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: var(--ui-accent-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.choice:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
/* obor s náhledem šablony, kterou nastaví (krok Název a obor) */
.choice.has-img { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; align-content: center; }
.choice-img { grid-row: 1 / span 2; width: 104px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: var(--ui-r-sm); background: var(--ui-panel-2); }
.choice.has-img strong { align-self: end; }
.choice.has-img small { align-self: start; }
.choice[aria-pressed=true] .choice-img { outline: 2px solid var(--ui-accent-ink); outline-offset: 2px; }
@media (max-width: 560px) { .choice.has-img { grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; } .choice-img { width: 84px; } }
.choice.is-busy { opacity: .6; pointer-events: none; }

.themes { display: grid; gap: 26px; }
/* šablona = živý zmenšený náhled obchodu (váš obsah v této šabloně) a popis pod ním; celá karta je jedno tlačítko */
.theme-card { position: relative; display: grid; gap: 10px; }
/* nálady šablon nad výběrem (Jak má obchod působit) – jako filtry nad seznamy: linka pod vybranou */
.theme-moods-label { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
/* nálady jako seznam oddělený linkami (výběr, ne karty): název vlevo, její šablony vpravo, vybraná s tyrkysovou linkou */
.theme-moods { display: grid; margin: 0 0 24px; border-top: 1px solid var(--ui-line); }
.theme-moods button { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 11px 12px 11px 14px; border: 0; border-bottom: 1px solid var(--ui-line); background: none; color: var(--ui-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 2px 0 0 transparent; transition: .15s; }
.theme-moods b { font-size: 14.5px; font-weight: 600; }
.theme-moods small { color: var(--ui-muted); font-size: 12.5px; text-align: right; }
.theme-moods button:hover b { color: var(--ui-accent-ink); }
.theme-moods button[aria-pressed="true"] { background: var(--ui-accent-soft); box-shadow: inset 2px 0 0 var(--ui-accent); }
.theme-moods button[aria-pressed="true"] b { color: var(--ui-accent-ink); }
.theme-moods button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.theme-card[hidden] { display: none !important; }
.id-mix-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.theme-view { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ui-panel-2); border: 1px solid var(--ui-line); border-radius: 4px; }
.theme-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.theme-view iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .3)); pointer-events: none; background: transparent; opacity: 0; transition: opacity .3s; }
.theme-view iframe.is-ready { opacity: 1; }
.theme-card.is-on .theme-view { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.theme-card .meta { display: grid; gap: 3px; width: 100%; padding-right: 32px; }
.theme-card strong { font-size: 15px; font-weight: 600; }
.theme-card small { color: var(--ui-muted); font-size: 13px; line-height: 1.4; }
.theme-card .tags { color: var(--ui-muted); font-size: 12.5px; }
.theme-card.is-on strong { color: var(--ui-accent-ink); }
.theme-card:hover strong { color: var(--ui-accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.theme-pick { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 4px; }
.theme-pick:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 4px; }
.theme-pick[aria-pressed=true]::after { content: ""; position: absolute; right: 4px; bottom: 14px; width: 20px; height: 20px; background: var(--ui-accent-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fonts-list { display: grid; gap: 8px; }
.font-pair { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--ui-line-2); border-radius: var(--ui-r-sm); background: var(--ui-panel); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.font-pair[aria-pressed=true] { border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-accent-soft); }
.font-pair .h { font-size: 21px; line-height: 1.15; }
.font-pair .b { font-size: 13px; color: var(--ui-muted); }
.font-pair small { font-size: 11.5px; color: var(--ui-muted); }

.dropzone { position: relative; display: grid; place-items: center; gap: 8px; min-height: 120px; padding: 18px; border: 1.5px dashed var(--ui-line-2); border-radius: var(--ui-r); background: var(--ui-panel-2); text-align: center; cursor: pointer; transition: .15s; }
.dropzone:hover, .dropzone.is-over { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone-sm { min-height: 84px; padding: 12px; }
.dropzone img { max-height: 84px; max-width: 80%; object-fit: contain; }
.dropzone .i { width: 26px; height: 26px; color: var(--ui-muted); }
.dropzone.has-dark { background: #1d1d22; }

.checks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 2px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ui-line); font-size: 14px; }
.checks li:last-child { border-bottom: 0; }
.checks .ok { color: var(--ui-ok); }
.checks .bad { color: var(--ui-err); }
.checks .warn { color: var(--ui-warn); }
.checks small { display: block; color: var(--ui-muted); font-size: 12.5px; }

.usp-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--ui-line); }
.usp-row .wide { grid-column: 1 / -1; }

.sections-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ui-line); }
.sections-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ui-line); }
[data-when][hidden], [data-when-kind][hidden] { display: none !important; }
/* „Smazat / Odebrat“ jako text s ikonou koše (zaškrtávátko skryté, při zaškrtnutí červeně) – administrace i Studio */
.m-del { position: relative; border: 0; background: none; font: inherit; padding: 0; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; color: var(--ui-muted); font-size: 13px; cursor: pointer; white-space: nowrap; }
.m-del input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.m-del .i { width: 17px; height: 17px; }
.m-del:hover, .m-del:has(input:focus-visible) { color: var(--ui-err); }
.m-del:has(input:checked) { color: var(--ui-err); font-weight: 600; }
.sections-list .grip { color: var(--ui-muted); cursor: grab; }
.sections-list li.is-carousel { flex-wrap: wrap; }
.sections-list .carousel-edit { order: 3; flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 2px 0 4px 28px; }
.sections-list .carousel-edit .m-del { min-height: 0; }
@media (max-width: 560px) { .sections-list .carousel-edit { grid-template-columns: 1fr; } }
.sections-list .move { margin-left: auto; display: flex; gap: 2px; }
.sections-list .move button { border: 0; background: transparent; color: var(--ui-muted); width: 26px; height: 26px; border-radius: var(--ui-r-sm); cursor: pointer; display: grid; place-items: center; }
.sections-list .move button:hover { background: var(--ui-bg); color: var(--ui-accent-ink); }
.sections-list .move .i { width: 16px; height: 16px; }

/* Úvod průvodce a uvítací stránka platformy (zadavatel 27. 10. 2026: „šikmo běžící šablony dej přes celou obrazovku a ty údaje
   naskládej do okna, které bude na PC na středu obrazovky, průhledné s blur… musí to být wow design“): za vším stěna všech
   šablon nakloněná do prostoru, sloupce plynou proti sobě; obsah ve skleněném okně uprostřed – vlevo uvítání, vpravo formulář */
.welcome-show { --wg: 26px; position: absolute; inset: -32% -26%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--wg);
  transform: perspective(1900px) rotateX(24deg) rotateZ(-13deg); transform-origin: 50% 40%;
  opacity: .6; filter: saturate(.6); animation: welcome-wall 1.6s var(--ui-ease) both; }   /* stěna jen jako tlumené pozadí, na myš nereaguje (zadavatel 27. 10. 2026) */
:root[data-ui="dark"] .welcome-show { opacity: .45; }
.welcome-col { align-self: start; display: flex; flex-direction: column; gap: var(--wg); animation: welcome-drift 120s linear infinite; will-change: transform; }
.welcome-col:nth-child(even) { animation-direction: reverse; animation-duration: 140s; margin-top: -14%; }
.welcome-col:nth-child(3n) { animation-duration: 160s; }
.welcome-col img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px;
  box-shadow: 0 30px 60px -24px rgb(10 10 11 / .45); }
/* nekonečná smyčka bez skoku: sloupec má každou šablonu dvakrát, posun o polovinu + půl mezery = přesně jedna sada
   (zadavatel 27. 10. 2026: „na PC i na mobilu by měly jet v nekonečné smyčce bez jakýchkoliv skoků“) */
@keyframes welcome-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-50% - var(--wg) / 2), 0); } }
@keyframes welcome-wall { from { opacity: 0; scale: 1.06; } }
.wz[data-step="start"] { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; height: auto; min-height: 100vh; min-height: 100dvh; padding: 40px 32px; }
.wz[data-step="start"] .wz-preview { position: fixed; inset: 0 0 auto; height: 100vh; height: 100lvh; z-index: 0; overflow: hidden; transform: none; background: var(--ui-bg); }
/* pevná výška podle největšího okna (100lvh): na telefonu se při posouvání schovává lišta prohlížeče a mění se výška okna –
   s inset: 0 by se stěna pokaždé přepočítala a šablony poskakovaly (zadavatel 27. 10. 2026) */
/* závoj: stěna kolem okna zůstane živá, za oknem se ztiší */
.wz[data-step="start"] .wz-preview::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 70% at 50% 50%, color-mix(in srgb, var(--ui-bg) 30%, transparent) 0%, color-mix(in srgb, var(--ui-bg) 12%, transparent) 62%, color-mix(in srgb, var(--ui-bg) 28%, transparent) 100%); }
.wz[data-step="start"] .welcome-caption { display: none; }
.wz[data-step="start"] .wz-panel { position: relative; z-index: 1; width: min(1080px, 100%); min-height: 0; border: 1px solid color-mix(in srgb, #fff 55%, transparent);
  border-radius: 12px; background: color-mix(in srgb, var(--ui-panel) 26%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.1) contrast(.7) brightness(1.42); backdrop-filter: blur(24px) saturate(1.1) contrast(.7) brightness(1.42);   /* světlé sklo bílé, ne šedivé (zadavatel 27. 10. 2026) */
  box-shadow: 0 50px 120px -40px rgb(10 10 11 / .5), 0 1px 0 rgb(255 255 255 / .6) inset; animation: welcome-pop 1s .15s var(--ui-ease) both; }
:root[data-ui="dark"] .wz[data-step="start"] .wz-panel { border-color: rgb(255 255 255 / .12); background: color-mix(in srgb, var(--ui-panel) 24%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 50px 120px -30px rgb(0 0 0 / .8), 0 1px 0 rgb(255 255 255 / .08) inset; }
@keyframes welcome-pop { from { opacity: 0; transform: translateY(26px) scale(.985); } }
.wz[data-step="start"] .wz-head { padding: 26px 44px 0; }
.wz[data-step="start"] .wz-progress, .wz[data-step="start"] .wz-step-meta { display: none; }   /* kroky až v průvodci – tady jen přihlášení kódem */
.wz[data-step="start"] .wz-body { overflow: visible; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 52px; align-items: start; padding: 24px 44px 24px; scrollbar-gutter: auto; }
.wz[data-step="start"] .welcome-intro, .wz[data-step="start"] .welcome-strip { grid-column: 1; }
.wz[data-step="start"] .welcome-go { grid-column: 2; grid-row: 2; padding-left: 52px; border-left: 1px solid var(--ui-line); }
/* Vaše obchody (z paměti prohlížeče) nad formulářem a Najít můj obchod pod ním – stejný sloupec s linkou vlevo
   (zadavatel 29. 10. 2026: „táta… druhý den nevěděl, jak se eshop jmenoval“) */
.wz[data-step="start"] .welcome-intro { grid-row: 1 / span 3; }
.wz[data-step="start"] :is(.welcome-mine, .welcome-find) { grid-column: 2; padding-left: 52px; border-left: 1px solid var(--ui-line); }
.wz[data-step="start"] .welcome-mine { grid-row: 1; padding-bottom: 18px; }
.wz[data-step="start"] .welcome-find { grid-row: 3; padding-top: 14px; }
.welcome-mine[hidden] { display: none !important; }
.welcome-mine-title { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ui-ink-2); }
.welcome-mine ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ui-line); }
.welcome-mine li { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; border-bottom: 1px solid var(--ui-line); }
.welcome-mine li a { display: grid; flex: 1; min-width: 0; padding: 10px 0; color: inherit; text-decoration: none; }
.welcome-mine li a strong { font-size: 15px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.welcome-mine li a span { color: var(--ui-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.welcome-mine li em { flex: none; font-style: normal; font-size: 13px; font-weight: 600; color: var(--ui-accent-ink); pointer-events: none; }
.welcome-mine li:hover strong { color: var(--ui-accent-ink); }
.welcome-mine li { position: relative; }
.welcome-mine li a::after { content: ''; position: absolute; inset: 0; }   /* celý řádek klikací, i štítek vpravo */
.welcome-find summary { cursor: pointer; font-size: 13.5px; font-weight: 560; color: var(--ui-accent-ink); padding: 4px 0; }
.welcome-find label { display: block; margin: 8px 0 8px; font-size: 13px; color: var(--ui-ink-2); line-height: 1.45; }
.welcome-find-sent { display: flex; gap: 8px; margin: 8px 0 0; font-size: 13px; }
.welcome-find-sent .i { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ui-ok); }
.welcome-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 24px; }
.ui .welcome-foot .welcome-maker { margin-bottom: 0; }
.ui .welcome-version { margin: 0; color: var(--ui-muted); font-size: 11px; line-height: 1.6; letter-spacing: .02em; }
.wz[data-step="start"] .welcome-foot { grid-column: 1 / -1; margin-top: 22px; }
.wz[data-step="start"] .welcome-maker { margin-top: 0; }
.wz[data-step="start"] .wz-lead { margin-bottom: 18px; }
.wz[data-step="start"] .welcome-list li { padding: 10px 0; }
.wz[data-step="start"] .welcome-go .field { gap: 6px; margin-bottom: 14px; }
.wz[data-step="start"] .welcome-go .hint, .wz[data-step="start"] .welcome-go .code-lead { font-size: 12.5px; line-height: 1.45; }
.wz[data-step="start"] .welcome-list { margin-bottom: 0; }
.wz[data-step="start"] .welcome-list, .wz[data-step="start"] .welcome-list li { border-color: color-mix(in srgb, var(--ui-line) 85%, transparent); }
.wz[data-step="start"] .welcome-hi { font-size: clamp(46px, 4.4vw, 64px); }
.wz[data-step="start"] .wz-foot { display: none; } /* úvod má tlačítko v obsahu – prázdná patička s linkou by jen překážela */
.welcome-caption { position: absolute; left: 32px; bottom: 28px; z-index: 1; margin: 0; display: grid; gap: 2px; max-width: min(560px, 80%);
  font-size: 15px; font-weight: 620; color: var(--ui-ink); }
.welcome-caption span { font-size: 12.5px; font-weight: 450; color: var(--ui-muted); }
.wz-preview:has(.welcome-show) { overflow: hidden; }
.welcome-strip { display: none; }
.ui .welcome-title { margin: 4px 0 14px; }
/* „Vítejte!“ velké na vlastním řádku, slib pod ním menší (zadavatel 25. 10. 2026) */
.welcome-hi { display: block; font-family: 'Fraunces', Georgia, serif; font-size: clamp(40px, 3.6vw, 54px); font-weight: 520; letter-spacing: -.02em; line-height: 1; margin-bottom: 12px; }
.welcome-sub { display: block; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: clamp(21px, 1.8vw, 26px); font-weight: 400; letter-spacing: -.01em; line-height: 1.25; color: var(--ui-ink-2); }
.welcome-list { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--ui-line); }
.welcome-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--ui-line); }
.welcome-list li > .i { grid-row: span 2; width: 20px; height: 20px; margin-top: 1px; color: var(--ui-accent-ink); stroke-width: 1.6; }
.welcome-list strong { font-size: 14.5px; font-weight: 620; }
.welcome-list span { color: var(--ui-muted); font-size: 13.5px; line-height: 1.45; }
.server-check { margin: 0 0 18px; }
.server-check summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 560; padding: 4px 0; }
.server-check summary::-webkit-details-marker { display: none; }
.server-check summary .i { width: 20px; height: 20px; flex: none; }
.server-check summary small { margin-left: auto; color: var(--ui-muted); font-weight: 450; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.server-check[open] summary small { text-decoration: none; }
.server-check .checks { margin-top: 8px; }
.server-check .i.ok { color: var(--ui-ok); } .server-check .i.warn { color: var(--ui-warn); } .server-check .i.bad { color: var(--ui-err); }
.server-probe { display: flex; gap: 10px; margin: 0 0 18px; font-size: 13.5px; color: var(--ui-ink-2); }
.server-probe[hidden] { display: none; }
.server-probe .i { width: 20px; height: 20px; flex: none; color: var(--ui-warn); }
.welcome-go .muted { margin: 12px 0 0; }
.welcome-code { margin-bottom: 16px; }
.welcome-code input { font-size: 17px; letter-spacing: .06em; }
/* adresa nového obchodu na platformě: pevný začátek adresy a pole na konec */
.slug-group { align-items: center; gap: 4px; }
.slug-prefix { color: var(--ui-muted); font-size: 13.5px; white-space: nowrap; }
/* dole na úvodu průvodce jen text: © AVITONA a platforma (zadavatel 26. 10. 2026) */
.ui .welcome-maker { margin: 34px 0 0; color: var(--ui-muted); font-size: 12.5px; line-height: 1.6; }
.ui .welcome-maker a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ui .welcome-maker a:hover { color: var(--ui-accent-ink); }
.ui .welcome-maker small, .ui .login-credit small { font-size: 11px; }   /* podpis platformy menším písmem pod copyrightem */

@media (max-width: 900px) {
  /* úvod průvodce na telefonu a tabletu: pás náhledů šablon nad nadpisem */
  /* pás náhledů plyne sám dokola (dvě stejné sady za sebou, posun o polovinu); při omezení pohybu stojí a posouvá se prstem */
  .welcome-strip { display: block; margin: 0 -18px 26px; padding: 0 0 14px; overflow: hidden; }
  .wz[data-step="start"] .welcome-strip { display: none; }   /* úvod: šablony plynou za oknem přes celou obrazovku */
  .wz[data-step="start"] { display: block; padding: 0 12px 16px; }
  .wz[data-step="start"] .wz-preview { position: fixed; inset: 0 0 auto; transform: none; transition: none; }
  .wz[data-step="start"] .wz-preview::after { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--ui-bg) 25%, transparent) 30%, color-mix(in srgb, var(--ui-bg) 65%, transparent) 100%); }
  .wz[data-step="start"] .welcome-show { --wg: 16px; inset: -20% -90%; }
  .wz[data-step="start"] .wz-panel { margin-top: 26vh; min-height: 0; border-radius: 12px; }
  .wz[data-step="start"] .wz-head { padding: 22px 18px 0; }
  .wz[data-step="start"] .wz-body { display: block; padding: 26px 18px 22px; }
  .wz[data-step="start"] .welcome-go { padding: 0; margin-top: 26px; border-left: 0; }
  .wz[data-step="start"] :is(.welcome-mine, .welcome-find) { padding-left: 0; border-left: 0; align-self: stretch; }
  .welcome-strip-track { display: flex; width: max-content; animation: welcome-slide 70s linear infinite; }
  /* náhledy šablon těsně za sebou, ostré rohy, mezi nimi tenká bílá linka */
  .welcome-strip img { flex: none; width: min(62vw, 280px); aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-right: 1px solid #fff; }
  .wz { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100dvh; }
  .wz-panel { border-right: 0; min-height: 100dvh; }
  .wz-body { overflow: visible; }
  .wz-foot { position: sticky; bottom: 0; }
  .wz-preview { position: fixed; inset: 0; z-index: 50; transform: translateY(100%); transition: transform .35s var(--ui-ease); }
  .wz.show-preview .wz-preview { transform: none; }
  .wz-mobile-toggle { display: inline-flex; }
  .wz-head, .wz-body, .wz-foot { padding-left: 18px; padding-right: 18px; }
  .wz-bar { padding: 12px 14px; gap: 8px; }
  .wz-bar .badge { min-width: 0; white-space: normal; line-height: 1.3; }
  /* patička průvodce: Zpět · Náhled · Pokračovat; „Uloženo“ jako drobný štítek nad ní */
  .wz-foot { position: sticky; }
  .wz-foot .wz-saved { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 3px 8px; border-radius: var(--ui-r-sm); background: var(--ui-panel); box-shadow: var(--ui-shadow); pointer-events: none; }
  .wz-foot-preview.is-hint { animation: wz-hint 1.4s var(--ui-ease); }
  /* uvítací stránka na telefonu: nadpis, pak hned formulář s kódem, přehled kroků až pod ním (dřív bylo pole kódu úplně dole) */
  .wz[data-step="start"] .wz-body { display: flex; flex-direction: column; }
  .wz[data-step="start"] .welcome-intro { display: contents; }
  .wz[data-step="start"] .welcome-go { order: 1; margin: 4px 0 18px; }
  .wz[data-step="start"] .welcome-mine { order: 1; margin-top: 4px; }
  .wz[data-step="start"] .welcome-find { order: 1; margin: 0 0 26px; padding-top: 0; }
  .wz[data-step="start"] :is(.welcome-list, .server-check, .server-probe, .welcome-intro > .notice) { order: 2; }
  .wz[data-step="start"] .welcome-foot { order: 3; }
}
@keyframes wz-hint { 0%, 100% { background: transparent; } 30% { background: var(--ui-accent-soft); color: var(--ui-accent-ink); } }
@media (prefers-reduced-motion: reduce) { .wz-foot-preview.is-hint { animation: none; } }
@media (max-width: 560px) {
  .input-group { flex-wrap: wrap; }
  .input-group > input { flex-basis: 100%; }
}
@media (max-width: 420px) {
  .color-grid { grid-template-columns: 1fr; }
}
@keyframes welcome-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .welcome-col, .welcome-strip-track, .welcome-show, .wz[data-step="start"] .wz-panel { animation: none; }
  .welcome-strip { overflow-x: auto; scrollbar-width: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.back { display: inline-flex; align-items: center; gap: 6px; }
.back .i { width: 17px; height: 17px; }
.ui input[type=file] { max-width: 100%; font: inherit; font-size: 13.5px; color: var(--ui-muted); }
.ui input[type=file]::file-selector-button { margin-right: 12px; padding: 7px 13px; border: 1px solid var(--ui-line-2); border-radius: var(--ui-r-sm); background: var(--ui-panel); color: var(--ui-ink); font: inherit; font-weight: 560; cursor: pointer; }
.ui input[type=file]::file-selector-button:hover { border-color: var(--ui-accent); }

/* Studio: ukázka tvaru tlačítka u volby „Tvar tlačítek“ */
.shape-sample { display: inline-block; width: 22px; height: 12px; margin-right: 7px; vertical-align: -1px; border: 1.5px solid currentColor; }
.shape-square { border-radius: 0; }
.shape-soft { border-radius: 4px; }
.shape-round { border-radius: 999px; }
/* Studio: výřez fotky v úvodu – klik na fotku nastaví viditelné místo */
.focus-zoom { margin-top: 8px; max-width: 360px; }
.focus-pick { position: relative; max-width: 360px; border-radius: var(--ui-r-sm); overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; border: 1px solid var(--ui-line); }
.focus-pick img { display: block; width: 100%; height: auto; pointer-events: none; }
.focus-dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgb(0 0 0 / .55), 0 2px 8px rgb(0 0 0 / .35); background: rgb(255 255 255 / .25); pointer-events: none; }
.focus-ranges { margin-top: 10px; }
.focus-ranges label { display: block; margin-bottom: 2px; color: var(--ui-muted); }

/* Studio → Úvodní stránka: sekce jako rozbalovací řádky oddělené linkami (žádné boxy) */
.ui .sec-intro { margin: 0 0 16px; line-height: 1.5; }
.ui .on-page-tip { margin: 0 0 16px; line-height: 1.5; }
/* Studio › Úvodní stránka: jak upravovat (texty a fotky v náhledu, vlevo pořadí a vzhled sekcí) */
.usp-row .usp-name { grid-column: 1 / -1; order: -1; color: var(--ui-ink); font-weight: 600; }   /* nejdřív, o kterou výhodu jde */
.usp-row:has(.usp-icons) select { grid-column: 1 / -1; }
.usp-row .usp-icons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.usp-icons label { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); color: var(--ui-ink-2); cursor: pointer; }
.usp-icons input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.usp-icons label:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.usp-icons label:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-on-accent); }
.usp-icons label:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.usp-icons .i { width: 18px; height: 18px; }
.sec-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ui-line); }
.sec { border-bottom: 1px solid var(--ui-line); }
.sec-head { display: flex; align-items: center; gap: 8px; min-height: 58px; }
.sec-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 4px 10px 0; border: 0; background: none; color: var(--ui-ink); font: inherit; text-align: left; cursor: pointer; }
.sec-toggle > .i:first-child { width: 20px; height: 20px; color: var(--ui-accent); flex: none; }
.sec-name { display: grid; gap: 2px; min-width: 0; }
.sec-name strong { font-size: 14.5px; font-weight: 620; }
.sec-name small { color: var(--ui-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-chev { width: 16px; height: 16px; margin-left: auto; color: var(--ui-muted); transition: transform .2s var(--ui-ease); flex: none; }
.sec-toggle[aria-expanded="true"] .sec-chev { transform: rotate(180deg); }
.sec-toggle:hover strong { color: var(--ui-accent-ink); }
.sec .move { display: flex; gap: 2px; }
.sec .move button { border: 0; background: transparent; color: var(--ui-muted); width: 28px; height: 28px; border-radius: var(--ui-r-sm); cursor: pointer; display: grid; place-items: center; }
.sec .move button:hover { background: var(--ui-bg); color: var(--ui-accent-ink); }
.sec .move .i { width: 16px; height: 16px; }
/* přetažení sekce za úchyt (myší i prstem) – řádek jede pod prstem, ostatní plynule uhnou */
.sec .move .sec-grip { cursor: grab; touch-action: none; }
.sec-list.is-sorting, .sec-list.is-sorting * { cursor: grabbing !important; user-select: none; }
.sec.is-drag { position: relative; z-index: 3; background: var(--ui-panel); box-shadow: var(--ui-shadow-lg); border-radius: var(--ui-r-sm); }
.sec-switch { flex: none; gap: 0; }
.sec.is-off .sec-name, .sec.is-off .sec-toggle > .i:first-child { opacity: .5; }
.sec-body { padding: 4px 0 22px 32px; }
.sec.is-sec-flash > .sec-head { background: var(--ui-accent-soft); transition: background-color .6s; }
.sec-body > .field:last-child, .sec-style > .field:last-child { margin-bottom: 0; }
.sec-sub { margin: 26px 0 10px; font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.sec-body > .hint, .sec-body > div > .hint { font-size: 12.5px; color: var(--ui-muted); margin: 0 0 14px; }
.sec-sub + .hint { margin-top: -4px; }
.ui .sec-note { margin: 0 0 16px; }
.ui .sec-note a { margin-left: 4px; }
.sec-style { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--ui-line); }
.sec-add { margin-top: 16px; }
@media (max-width: 560px) { .sec-body { padding-left: 0; } }

/* Správa platformy (/sprava): jeden sloupec, sekce oddělené linkami, obchody jako řádky */
.wz-bar-hint { flex: 1; margin: 0 14px; text-align: center; }
@media (max-width: 1100px) { .wz-bar-hint { display: none; } }
.pf-facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 13.5px; }
.pf-facts dt { color: var(--ui-muted); }
.pf-facts dd { margin: 0; overflow-wrap: anywhere; }
.pf-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-gen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.pf-gen .field { margin: 0; }
.pf-gen select { min-width: 84px; }
.pf-gen-note { flex: 1 1 260px; }
.pf-codes .pf-code-copy { display: inline-flex; max-width: 200px; }
.table.pf-codes th, .table.pf-codes td { padding-left: 7px; padding-right: 7px; }   /* 7 sloupců s poli se musí vejít do šířky obsahu */
.pf-codes .pf-code-copy .btn { padding-left: 6px; padding-right: 6px; }
.pf-codes .pf-code-copy input { border: 0; background: transparent; padding-left: 0; font-size: 14px; width: 11ch; flex: 0 0 auto; }
.pf-ecodes .pf-code-copy { max-width: 240px; }
.pf-ecodes .pf-code-copy input { width: 16.5ch; }   /* kódy e-shopu ESHOP-XXXX-XXXX jsou delší */
.pf-ecodes td.num { white-space: nowrap; }
.pf-ecodes td.num form { display: inline-block; }   /* Poslat znovu e-mailem a Zrušit / Smazat vedle sebe */
.pf-note-form input { width: 100%; min-width: 110px; }
.pf-gen-mail { flex: 1 1 240px; }
.pf-send-form .input-group { display: flex; min-width: 200px; }
.pf-send-form input { flex: 1; min-width: 0; }
.pf-send-form + .small { display: block; margin-top: 4px; }
/* platnost kódu v seznamu: datum se uloží hned; prázdné pole ukazuje „bez omezení“ místo dd.mm.rrrr (zadavatel 26. 10. 2026) */
.table .pf-exp-form { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 2px; position: relative; }
.ui .pf-exp-form input[type=date] { width: 134px; flex: none; }
.pf-code-shop { margin-left: 6px; }
.ui .pf-exp-form input.is-empty:not(:focus) { color: transparent; }
.pf-exp-none { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.pf-exp-form input:focus + .pf-exp-none { display: none; }
.pf-remind { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ui-line); }
.pf-remind h3 { margin: 0 0 4px; font-size: 15px; }
.pf-remind-days { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 12px; }
.pf-remind-days .check { align-items: center; }
.pf-remind-days .check input { margin: 0; }
.pf-remind-days .btn { margin-top: 0; }
.pf-mail-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.pf-gen + .hint { margin-top: 12px; }
.pf-gen-send { flex: 1 1 100%; margin: -2px 0 0; }
/* tablet a telefon: řádek kódu skládaný – nahoře kód, stav, datum a smazání, pod tím Komu a Odkaz e-mailem */
.table .pf-send-form { display: block; }
@media (max-width: 1000px) {
  .table.pf-codes thead { display: none; }
  .table.pf-codes, .table.pf-codes tbody { display: block; width: 100%; overflow: visible; }
  /* pevné uspořádání (zadavatel 26. 10. 2026: „hlídej, aby to bylo na mobilu v pořádku zobrazené“): nahoře kód a stav,
     pod tím Komu, e-mail a platnost každé na celý řádek s popiskem, dole vytvořen a smazání */
  .table.pf-codes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code state" "note note" "mail mail" "exp exp" "made del";
    align-items: center; gap: 0 16px; padding: 14px 0 16px; border-bottom: 1px solid var(--ui-line); }
  .table.pf-codes td:nth-child(n+2):not(:nth-child(4)) { margin-top: 12px; }   /* mezery jen u buněk, které se ukazují (ne prázdné řádky) */
  .table.pf-codes td:nth-child(4) { max-width: 62vw; }
  .table.pf-codes td:nth-child(4) .pf-code-shop { display: block; margin-top: 4px; }   /* obchod pod stavem, kód zůstane v jednom řádku */
  .table.pf-codes .pf-code-copy { flex-wrap: nowrap; }
  .table.pf-codes tr:last-child { border-bottom: 0; }
  .table.pf-codes td { display: block; padding: 0; border-bottom: 0; min-width: 0; }
  .table.pf-codes td:nth-child(1) { grid-area: code; }
  .table.pf-codes td:nth-child(4) { grid-area: state; justify-self: end; text-align: right; }
  .table.pf-codes td:nth-child(2) { grid-area: note; }
  .table.pf-codes td:nth-child(3) { grid-area: mail; }
  .table.pf-codes td:nth-child(5) { grid-area: exp; }
  .table.pf-codes td:nth-child(6) { grid-area: made; }
  .table.pf-codes td:nth-child(7) { grid-area: del; justify-self: end; }
  .table.pf-codes td[data-label]::before { content: attr(data-label); display: block; margin: 0 0 5px; font-size: 12.5px; font-weight: 560; color: var(--ui-muted); }
  .table.pf-codes .pf-note-form input, .table.pf-codes .pf-send-form .input-group { width: 100%; }
  .table.pf-codes td.pf-none { display: none; }
  .table.pf-codes td.num { text-align: right; }
  .pf-codes .pf-code-copy { max-width: none; }
  .table.pf-codes .pf-code-copy input { padding-left: 0 !important; }
  .pf-send-form .input-group { min-width: 0; flex-wrap: nowrap; }
  .pf-send-form .input-group > input { flex-basis: auto; }
  .pf-codes tr.is-fresh { background: var(--ui-accent-soft); }
  .table.pf-codes .pf-made-label { display: inline; }
}
.pf-made-label { display: none; }
/* Rozpracované obchody: na počítači tabulka, na telefonu řádek s popisky – nahoře obchod, krok a kdy naposledy,
   pod tím kód (s poznámkou) a kdy se smaže, smazání vpravo */
.pf-d-note { display: block; }
@media (max-width: 760px) {
  .table.pf-drafts thead { display: none; }
  .table.pf-drafts, .table.pf-drafts tbody { display: block; width: 100%; overflow: visible; }
  .table.pf-drafts tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "step ago" "code code" "dl dl" "del del";
    align-items: end; gap: 12px 16px; padding: 14px 0 16px; border-bottom: 1px solid var(--ui-line); }
  .table.pf-drafts tr:last-child { border-bottom: 0; }
  .table.pf-drafts td, .table.pf-drafts td.num { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
  .table.pf-drafts .pf-d-name { grid-area: name; }
  .table.pf-drafts .pf-d-step { grid-area: step; }
  .table.pf-drafts .pf-d-ago { grid-area: ago; justify-self: end; }
  .table.pf-drafts .pf-d-code { grid-area: code; }
  .table.pf-drafts .pf-d-dl { grid-area: dl; }
  .table.pf-drafts td.pf-d-del { grid-area: del; display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }   /* Náhled vlevo, smazat vpravo – vlastní řádek, ať se na úzkém displeji nemačká */
  .table.pf-drafts .pf-d-del .btn:first-child { margin-left: -8px; }
  .table.pf-drafts .pf-d-del form .btn { margin-right: -8px; }
  .table.pf-drafts .pf-d-note { display: inline; margin-left: 10px; }
  .table.pf-drafts td[data-label]::before { content: attr(data-label); display: block; margin: 0 0 5px; font-size: 12.5px; font-weight: 560; color: var(--ui-muted); }
}

.check-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.pf-codes tr.is-fresh td { background: var(--ui-accent-soft); }
.danger-zone > h2, .danger-zone > p { flex-basis: 100%; margin: 0; }
@media (max-width: 560px) { .pf-facts { grid-template-columns: 1fr; gap: 2px; } .pf-facts dd { margin-bottom: 8px; } }
.pf-del summary::-webkit-details-marker { display: none; }
.pf-del[open] { flex-basis: 100%; }
.pf-del form { padding: 10px 0 4px; }
@media (max-width: 560px) { .pf:not(.admin) { padding: 24px 16px 60px; } .pf-head { flex-wrap: wrap; } }
.wz-bar [data-preview-home][hidden] { display: none; }
/* Studio: volby jen pro zařízení v náhledu (telefon / počítač) */
[data-studio-device="phone"] [data-only="desktop"], [data-studio-device="desktop"] [data-only="phone"], html:not([data-studio-device]) [data-only="phone"] { display: none !important; }
.studio-device-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 10px 0; border-bottom: 1px solid var(--ui-line); font-size: 13px; color: var(--ui-ink-2); }
.studio-device-note .i { width: 18px; height: 18px; flex: none; color: var(--ui-accent-ink); margin-top: 1px; }

/* Značka produktu „AVITONA | ESHOP STUDIO“ (product_mark()) podle brand manuálu AVITONA – Logo + projekt (26. 10. 2026):
   logo (celý soubor SVG) v barvě textu, tenká svislá linka a WEB STUDIO písmem Bebas Neue šedě (--ui-muted, zadavatel
   26. 10. 2026: „| ESHOP STUDIO udělej všude šedivé“); tyrkysová (#008c94 na světlém, #32d3da na tmavém) jen po najetí myší. Závazný poměr výška loga 96 : písmo 45,7, mezery 18,6, nahoře 5,4 (.476 / .194 / .056). Mění se jen --pm-h. */
/* nadpis uvítací stránky patkově jako manuály (zadavatel 27. 10. 2026: „změň ty nadpisy v mailech na patkové, jako je to v manuálu…
   a udělej to i na té hlavní stránce“) */
@font-face { font-family: 'Fraunces'; font-weight: 100 900; font-display: swap; src: url(../fonts/fraunces/latin-ext-normal.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Fraunces'; font-weight: 100 900; font-display: swap; src: url(../fonts/fraunces/latin-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/fraunces/latin-ext-italic.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/fraunces/latin-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-display: swap; src: url(../fonts/bebas-neue/latin-ext-normal.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-display: swap; src: url(../fonts/bebas-neue/latin-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
.pm { --pm-h: 36px; --pm-accent: #008c94; display: inline-flex; align-items: center; gap: calc(var(--pm-h) * .194); color: var(--ui-muted); line-height: 1; vertical-align: middle; }   /* celá značka šedě – logo i WEB STUDIO (zadavatel 26. 10. 2026) */
:root[data-ui="dark"] .pm { --pm-accent: #32d3da; }
.pm-logo { display: flex; color: inherit !important; text-decoration: none !important; transition: none !important; }
.pm-logo svg { display: block; height: var(--pm-h); width: auto; }
a.pm-logo:hover, a.pm-logo:focus-visible { color: var(--pm-accent) !important; transition: color .2s !important; }   /* přechod jen při najetí – při načtení stránky nesmí barva problikávat */
.pm-name { padding: calc(var(--pm-h) * .056) 0 0 calc(var(--pm-h) * .194); border-left: 1px solid var(--ui-muted);
  font: 400 calc(var(--pm-h) * .476)/1 'Bebas Neue', var(--ui-font); letter-spacing: .08em; white-space: nowrap;
  color: var(--ui-muted) !important; text-decoration: none !important; transition: none !important; }
/* linka i název šedě (dřív černě) – zadavatel 26. 10. 2026: „| ESHOP STUDIO udělej všude šedivé“; tyrkysová jen po najetí */
a.pm-name:hover, a.pm-name:focus-visible { color: var(--pm-accent) !important; transition: color .2s !important; }
/* hlavní logo stránky (průvodce, přihlášení) stejně velké jako AVITONA | SHOP v hlavičce shop.avitona.cz: 56 px, telefon 46 px
   (pod 390 px menší, ať se vejde vedle tlačítka) – zadavatel 26. 10. 2026: „velikost (a hlavně poměr) stejný jako u loga SHOP“ */
.wz-brand .pm { --pm-h: 56px; }
@media (max-width: 860px) { .wz-brand .pm { --pm-h: clamp(30px, calc(25.2vw - 49px), 46px); } }

/* přihlášení kódem: adresa obchodu jen jako ukázka odvozená z názvu (needitovatelná) */
.ui .slug-preview { margin: 8px 0 0; color: var(--ui-muted); font-size: 14px; overflow-wrap: anywhere; }
.ui .slug-preview .label { display: inline; margin: 0 6px 0 0; color: var(--ui-ink); font-size: 13px; font-weight: 600; }
.ui .slug-preview small { display: block; margin-top: 2px; font-size: 12.5px; }
.ui .slug-preview strong { color: var(--ui-ink); font-weight: 600; }

/* přihlášení kódem: viditelné vysvětlení nad polem, že sem patří zakoupený kód (text v barvě textu, ne šedá nápověda) */
.ui .code-lead { margin: -2px 0 8px; color: var(--ui-ink-2); font-size: 13.5px; line-height: 1.45; }

/* Správa platformy (/admin a její přihlášení) a uvítací stránka platformy v barvách AVITONA podle brand manuálu
   (zadavatel 26. 10. 2026: „správu ESHOP platformy udělej v barvách AVITONA… výchozí dark“, „tahle barva by měla být
   použita i na úvodní stránce“). Tyrkysová #32d3da na tmavém, na světlém všechno tyrkysové #008c94 (text, odkazy,
   ikony, linky, tlačítka – brand manuál AVITONA, kontrast 4,9 : 1). Volba světlý / tmavý správy zvlášť ('pf-ui'). */
body.pf-avitona {
  --brand: #008c94;
  --ui-bg: #ffffff; --ui-panel: #ffffff; --ui-panel-2: #f6f6f4;
  --ui-ink: #0a0a0b; --ui-ink-2: #26262c; --ui-muted: #6b6b66; --ui-line: #e6e6e2; --ui-line-2: #d2d2cc; --ui-btn: #3a3a42;
  --ui-accent: #008c94; --ui-accent-ink: #008c94; --ui-accent-soft: rgb(0 140 148 / .10); --ui-on-accent: #ffffff;
  background: var(--ui-bg);
}
:root[data-ui="dark"] body.pf-avitona {
  --brand: #32d3da;
  --ui-bg: #0a0a0b; --ui-panel: #101013; --ui-panel-2: #101013;
  --ui-ink: #e8e8e4; --ui-ink-2: #c9c9c3; --ui-muted: #9a9a92; --ui-line: #26262c; --ui-line-2: #3a3a42; --ui-btn: #e8e8e4;
  --ui-accent: #32d3da; --ui-accent-ink: #32d3da; --ui-accent-soft: rgb(50 211 218 / .14); --ui-on-accent: #0a0a0b;
}

/* nenápadný přepínač světlý / tmavý vzhled na přihlášeních a uvítací stránce (ikona, žádný rámeček) */
.login-ui { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--ui-r-sm);
  background: none; color: var(--ui-muted); cursor: pointer; opacity: .7; transition: opacity .15s, color .15s; }
.login-ui:hover, .login-ui:focus-visible { opacity: 1; color: var(--ui-accent-ink); }
.login-ui .i { width: 17px; height: 17px; }
.wz-brand .wz-ui { margin-left: auto; flex: 0 0 auto; }
/* uvítací stránka platformy: „Vítejte!“ bez barvy, v barvě textu (zadavatel 26. 10. 2026: „Vítejte! nech bez barvy“) */
/* pole pro zakoupený kód; tlačítko Založit obchod zůstává šedé. Uvítací stránka platformy (body.pf-start) – v barvách AVITONA
   tyrkysově, v původních barvách stejně, jen oranžově (zadavatel 26. 10. 2026: „v tom stylu jako tyrkys vzhled… s tou barvou“) */
/* obráceně: tyrkysová výplň, kód velký a tučný – na světlém bílý, na tmavém (#32d3da) černý podle brand manuálu (zadavatel 26. 10. 2026) */
body.pf-start #w-code { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-on-accent); font-size: 20px; font-weight: 700; letter-spacing: .06em; padding-top: 11px; padding-bottom: 11px; caret-color: var(--ui-on-accent); }
body.pf-start #w-code::placeholder { color: var(--ui-on-accent); opacity: .7; font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; }   /* „SEM VLOŽTE VÁŠ KÓD“ (zadavatel 26. 10. 2026) */
body.pf-start #w-code:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
/* podnadpis „Za pár minut…“: na světlém šedě jako WEB STUDIO ve značce, na tmavém beze změny (zadavatel 26. 10. 2026) */
:root:not([data-ui="dark"]) body.pf-start .welcome-sub { color: var(--ui-muted); }

/* Původní barvy celé platformy (přepínač hlavního správce v Nastavení › Platforma, ui_palette(); zadavatel 26. 10. 2026:
   „dej někam hlavnímu adminovi možnost přepnout celou platformu na ty původní barvy“): všude stejná oranžová jako před
   přechodem na AVITONA (ne barva obchodu – „v e-shop adminovi je pořád jiná barva“); správa platformy a uvítací stránka bez pf-avitona */
:root[data-palette="puvodni"] {
  --ui-accent: #c2410c;
  --ui-accent-ink: color-mix(in srgb, #c2410c 78%, #000);
  --ui-accent-soft: color-mix(in srgb, #c2410c 12%, transparent);
  --ui-on-accent: #ffffff;
}
:root[data-palette="puvodni"][data-ui="dark"] {
  --ui-accent: color-mix(in srgb, #f08a5d 72%, #fff);
  --ui-accent-ink: color-mix(in srgb, #f08a5d 55%, #fff);
  --ui-accent-soft: color-mix(in srgb, #f08a5d 20%, transparent);
  --ui-on-accent: #0a0a0b;
}
:root[data-palette="puvodni"] .pm { --pm-accent: var(--ui-accent); }
/* nápověda hned pod hlavičkou karty – vzdušně od linky, ne nalepená (zadavatel 26. 10. 2026: „nedělej to takhle nalepené“) */
.card-head + .hint, .card-head + p.muted { margin: 16px 0 18px; }
/* text pod řadou s tlačítky nebo pod polem s tlačítkem nikdy nalepený (zadavatel 26. 10. 2026: „zkontroluj vše, aby se
   to takhle nelepilo“) – hlídá scripts/kontrola-linek.js */
.ui :is(.input-group, .btn-row, .mt-actions, .backup-actions, .pf-actions, .inline-actions, .bk-file-row, .form-actions) + :is(p, .hint),
.ui .btn + :is(p, .hint) { margin-top: 10px; }
.ui .mt-form .mt-state { margin-top: 14px; }

/* posuvníky rozhraní (Studio, administrace, průvodce): tenké, zaoblené, nenápadné, bez šipek (zadavatel 27. 10. 2026: „je možné
   ty posuvníky nějak graficky přizpůsobovat?“) */
.ui, .ui * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ui-ink) 22%, transparent) transparent; }
.ui ::-webkit-scrollbar { width: 8px; height: 8px; }
.ui ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 4px; background: color-mix(in srgb, var(--ui-ink) 22%, transparent) padding-box; }
.ui ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ui-ink) 40%, transparent); }
.ui ::-webkit-scrollbar-track, .ui ::-webkit-scrollbar-button { display: none; background: transparent; }

/* ---------- podmínky AVITONA pro WEB STUDIO (lib/terms.php): stránka dokumentu a souhlas při založení obchodu ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: 32px 24px 48px; }
.legal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--ui-line); }
.legal h1 { margin: 36px 0 6px; font-size: 32px; line-height: 1.15; letter-spacing: -.02em; }
.legal-meta { margin: 0; color: var(--ui-muted); font-size: 14px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 22px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--ui-line); font-size: 14px; }
.legal-nav a { color: var(--ui-muted); text-decoration: none; padding: 4px 0; }
.legal-nav a:hover { color: var(--ui-accent); }
.legal-nav a[aria-current="page"] { color: var(--ui-ink); font-weight: 620; box-shadow: inset 0 -2px 0 var(--ui-accent); }
.legal-body { font-size: 15px; line-height: 1.65; }
.legal-body h2 { margin: 34px 0 8px; font-size: 18px; letter-spacing: -.01em; }
.legal-body p, .legal-body li { margin: 0 0 10px; }
.legal-body ul { padding-left: 20px; }
.legal-foot { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--ui-line); color: var(--ui-muted); font-size: 13px; }
@media (max-width: 600px) { .legal { padding: 20px 16px 36px; } .legal h1 { margin-top: 26px; font-size: 26px; } .legal-print span, .legal-print { font-size: 0; gap: 0; } .legal-print .i { width: 18px; height: 18px; } }
@media print {
  .legal-print, .legal-nav { display: none; }
  .legal { max-width: none; padding: 0; }
  .legal-body { font-size: 11pt; }
  .legal-body h2 { break-after: avoid; }
}
.terms-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.terms-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ui-accent); }
.terms-check a { color: var(--ui-accent); }
.field .terms-check + .err { display: block; margin-top: 6px; }
.ui .hint.warn-text { color: var(--ui-warn); }   /* upozornění u pole (např. sleva vůči nejnižší ceně za 30 dní) */

/* Rozpracovaný obchod platformy otevřený v jiném prohlížeči (views/install/locked.php): vzhled uvítací stránky, užší okno
   v jednom sloupci a formulář pro odkaz Pokračovat (zadavatel 27. 10. 2026: „to jako fakt? jinak stránka nic moc“) */
.wz-lock[data-step="start"] .wz-panel { width: min(640px, 100%); }
.wz-lock[data-step="start"] .wz-body { grid-template-columns: minmax(0, 1fr); }
.wz-lock .welcome-hi { font-size: clamp(34px, 3.2vw, 46px); }
.wz-lock .lock-form { margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ui-line); }
.wz-lock .lock-form label { display: block; margin: 0 0 8px; color: var(--ui-ink); font-size: 13.5px; font-weight: 600; }
.wz-lock .lock-row { display: flex; gap: 10px; }
.wz-lock .lock-row input { flex: 1 1 auto; min-width: 0; }
.wz-lock .lock-row .btn { flex: none; }
.wz-lock .lock-form .hint { margin-top: 8px; }
.wz-lock .lock-sent { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 0; padding: 16px 0 0; border-top: 1px solid var(--ui-line); color: var(--ui-ink-2); font-size: 14.5px; line-height: 1.5; }
.wz-lock .lock-sent .i { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--ui-accent); }
.wz-lock .lock-sent strong { display: block; color: var(--ui-ink); }
.wz-lock .lock-other { margin: 22px 0 0; color: var(--ui-muted); font-size: 13.5px; }
.wz-lock .lock-other a { color: var(--ui-accent-ink); }
@media (max-width: 560px) { .wz-lock .lock-row { flex-direction: column; } .wz-lock .lock-row .btn { justify-content: center; } }

/* průvodce: tip, s čím začít, a „Potřebujete:“ u dopravy a platby (zadavatel 28. 10. 2026) */
.wz-tip { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 6px; padding: 12px 0; border-bottom: 1px solid var(--ui-line); font-size: 13.5px; line-height: 1.5; color: var(--ui-ink); }
.wz-tip .i { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ui-accent-ink); }
.pick-list small.wz-need { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 12px; line-height: 1.45; }

/* průvodce, krok Doprava a platby: přístupy u zaškrtnuté možnosti a seznam Co ještě zařídit (zadavatel 28. 10. 2026) */
.wz-more { margin: 10px 0 4px 26px; padding-left: 14px; border-left: 1px solid var(--ui-line); }
.wz-more .field:last-child { margin-bottom: 4px; }
.wz-more details > summary { cursor: pointer; font-size: 13.5px; font-weight: 560; color: var(--ui-accent-ink); padding: 2px 0; list-style: none; display: flex; align-items: center; gap: 6px; }
.wz-more details > summary::-webkit-details-marker { display: none; }
.wz-more details > summary .i { width: 15px; height: 15px; flex: none; transition: transform .15s; }
.wz-more details[open] > summary .i { transform: rotate(90deg); }
.wz-more details > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.wz-more details[open] > summary { margin-bottom: 10px; }
.wz-more .seg { margin-bottom: 12px; }
.wz-more .gw-fields { margin-top: 4px; }
.wz-more .hint:first-of-type { margin-top: 0; }
.wz-section.wz-todo { border-top: 1px solid var(--ui-line); padding-top: 18px; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list li { padding: 9px 0 9px 16px; position: relative; font-size: 13.5px; line-height: 1.5; }
.todo-list li:not([hidden]) ~ li { border-top: 1px solid var(--ui-line); }   /* linka jen mezi viditelnými položkami */
.todo-list li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 5px; height: 5px; border-radius: 50%; background: var(--ui-accent); }
.todo-list li.is-err { color: var(--ui-err); }
.todo-list li.is-err::before { background: var(--ui-err); }
.todo-list li strong { display: block; font-weight: 600; }
.todo-none[hidden], .todo-list li[hidden] { display: none; }
.todo-none { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13.5px; color: var(--ui-ok); }
.todo-none .i { width: 18px; height: 18px; }
.wz-next-hint { margin-top: 18px; }
.gw-test { margin: 2px 0 18px; }   /* testovací režim brány – odstup od dalšího pole (loga karet v administraci) */
.wz-more .gw-test { margin-bottom: 4px; }

/* loga dopravců, karet a bran v rozhraní (lib/logos.php) – průvodce i administrace; SVG ve stránce, jedna šeď (--ui-logo-o) */
:root { --ui-logo-o: .6; }
.ui .pay-logo { display: inline-block; flex: none; height: calc(18px * var(--pl-k, 1)); width: auto; vertical-align: middle; }
.ui span.pay-logo { aspect-ratio: var(--pl-r, 3); background: currentColor; -webkit-mask: var(--pl) center / contain no-repeat; mask: var(--pl) center / contain no-repeat; }
.pick-list .check .pick-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pick-list .check .pick-logos { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--ui-ink); opacity: var(--ui-logo-o); }
.gw-pick { min-height: 34px; }
.gw-pick .pay-logo { height: calc(17px * var(--pl-k, 1)); color: var(--ui-ink); opacity: var(--ui-logo-o); }
.seg input:checked + .gw-pick .pay-logo { color: var(--ui-accent-ink); opacity: 1; }
.table.pf-drafts .pf-d-del { white-space: nowrap; }
.table.pf-drafts .pf-d-del form { display: inline-block; vertical-align: middle; }

/* Studio: odkaz na úpravy na stránce místo druhé kopie voleb (hlavička, patička, logo) – jen věta s ikonou, žádný rámeček */
.studio-here { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; }
.studio-here .i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ui-accent); }
/* Studio jako šuplík Vzhled obchodu v úpravách na celé obrazovce (?panel=1): jen panel bez náhledu */
.studio-panel .wz { grid-template-columns: minmax(0, 1fr); }
.studio-panel .wz-panel { border-right: 0; }
.studio-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.studio-panel-head h1 { margin: 0; font-size: 20px; }
.studio-panel .studio-tab-hint { margin-top: 6px; }
/* Studio na telefonu: náhled telefonu přes celou plochu, bez kresleného rámečku telefonu */
@media (max-width: 600px) {
  .studio-phone { padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .studio-phone-device { width: 100%; height: 100%; gap: 0; }
  .studio-phone-head { width: 100%; border-radius: 0; box-shadow: none; }
  .studio-phone .phone-hw { width: 100%; padding: 0; border-radius: 0; box-shadow: none; }
  .studio-phone .phone-hw::before, .studio-phone .phone-hw::after, .studio-phone .phone-screen::before, .studio-phone .phone-status, .studio-phone .phone-home { display: none; }
  .studio-phone .phone-screen { grid-template-rows: 1fr; border-radius: 0; }
  .studio-phone iframe { width: 100%; }
}

/* sekce úvodu (průvodce, Studio): šipky pořadí jen pod myší / při ovládání klávesnicí – v řádku zůstane úchyt a přepínač
   (audit průvodce 29. 10. 2026: čtyři ovládací prvky na řádku byly moc); na dotykových zařízeních se táhne za úchyt */
.sec .move [data-move] { opacity: 0; transition: opacity .15s; }
.sec:hover .move [data-move], .sec:focus-within .move [data-move] { opacity: 1; }
@media (hover: none) { .sec .move [data-move] { display: none; } }

/* ---------- kresba doplňku E-shop (2.0): administrace (E-shop, Přehled webu) i průvodce (krok E-shop) ---------- */
.eshop-art { width: 100%; max-width: 360px; height: auto; display: block; }
.eshop-art * { fill: none; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.eshop-art .ea2-ground { stroke: var(--ui-line-2); }
.eshop-art .ea2-web * { stroke: var(--ui-ink-2); }
.eshop-art .ea2-shop * { stroke: var(--ui-line-2); stroke-dasharray: 3 4; }
.eshop-art .ea2-plus * { stroke: var(--ui-accent-ink); }
.eshop-art.is-on .ea2-shop * { stroke: var(--ui-ink-2); stroke-dasharray: none; }
.eshop-art.is-on .ea2-shop .ea2-handle { stroke: var(--ui-accent-ink); stroke-width: 1.6; }
.eshop-art.is-small { max-width: 220px; }
@media (prefers-reduced-motion: no-preference) {
  .eshop-art .ea2-plus { animation: ea2-pulse 2.6s ease-in-out infinite; transform-origin: 226px 74px; }
  .eshop-art.is-on .ea2-shop * { animation: ea2-in .9s ease-out both; }
}
@keyframes ea2-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ea2-in { from { opacity: 0; } }


/* krok průvodce E-shop: kresba, věta a pole pro kód */
.wz-eshop { display: grid; gap: 18px; }
.wz-eshop .eshop-art { max-width: 300px; }
.wz-eshop-code { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.wz-eshop-code .field { margin: 0; flex: 1 1 220px; }
.wz-eshop-code input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.wz-eshop-list { list-style: none; margin: 0; padding: 0; }
.wz-eshop-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--ui-line); }
.wz-eshop-list .i { width: 18px; height: 18px; color: var(--ui-accent-ink); margin-top: 2px; }

/* krok průvodce Vzhled (2.0): vzhledy oboru jako velké karty s náhledem, pod nimi sbalené vzhledy jiných oborů */
.variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 6px 0 22px; }
.variant { display: grid; gap: 8px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.variant-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--ui-r-sm); outline: 1px solid var(--ui-line); outline-offset: 0; transition: outline-color .2s; }
.variant-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.variant-meta { display: grid; gap: 2px; }
.variant-meta strong { font-weight: 600; }
.variant-meta small { color: var(--ui-muted); font-size: .82rem; }
.variant:hover .variant-img { outline-color: var(--ui-accent-ink); }
.variant[aria-pressed="true"] .variant-img { outline: 2px solid var(--ui-accent-ink); outline-offset: 2px; }
.variant[aria-pressed="true"] strong { color: var(--ui-accent-ink); }
.variant.is-busy { opacity: .6; pointer-events: none; }
.other-looks { border-top: 1px solid var(--ui-line); padding-top: 4px; }
.other-looks > summary { display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none; }
.other-looks > summary::-webkit-details-marker { display: none; }
.other-looks > summary .i { width: 20px; height: 20px; color: var(--ui-accent-ink); flex: none; }
.other-looks > summary span { display: grid; gap: 2px; }
.other-looks > summary small { color: var(--ui-muted); }
.other-looks[open] > summary { margin-bottom: 8px; }