/* SSDL tokens + ev-pages light-web layout classes. Tokens mirror
   steerty-sites-servis-design-brief.md §15; --primary is overridden per-instance by the
   renderer's inline <style> from service_station_branding (restyle by logo/colors). */
:root, [data-theme="pult"] {
  --coral-500:#FF6A1A; --coral-400:#FF8A4D; --coral-600:#E2540C;
  --steel-950:#0E1113; --graphite-800:#232830; --steel-500:#5A6472;
  --mist-200:#DDE1E7; --paper-50:#F7F7F6; --paper-0:#FCFCFB;
  --ink-body:#232830; --ink-muted:#5A6472;
  --bg:var(--paper-50); --surface:var(--paper-0); --border:var(--mist-200);
  --text:var(--ink-body); --text-strong:var(--steel-950); --text-muted:var(--ink-muted);
  --primary:var(--coral-500); --primary-ink:#1A1410;
  --font-sans:"Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",SFMono-Regular,Menlo,monospace;
  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-8:64px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px;
  --shadow-2:0 6px 18px rgba(14,17,19,.10);
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font-sans); color:var(--text); background:var(--bg); line-height:1.5; }
/* Formulářové prvky jinak berou písmo prohlížeče (tlačítka 13,3 px) — ne písmo webu. */
button, input, select, textarea { font:inherit; }
.ss-mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
img { max-width:100%; display:block; }
/* Atribut `hidden` platí VŽDY. Sám skrývá jen výchozím stylem prohlížeče (`display:none`)
   a ten přebije každá třída s vlastním `display`: `app.js` skrýval „Zobrazit časy“, ale
   `.ss-btn { display:inline-block }` tlačítko nechal vidět (ověřeno 5. 10. 2026). Proto
   `!important` — jediné místo v souboru, které ho smí mít (hlídá test). */
[hidden] { display:none !important; }
/* prázdná nápověda a důvod u objednávky: server je vykreslí prázdné, text dosadí app.js (hidden server nevykresluje) */
[data-termin-nepovinny]:empty, [data-odeslat-duvod]:empty { display:none; }

.ss-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
  padding:var(--space-4) var(--space-6); background:var(--surface); border-bottom:1px solid var(--border); }
.ss-header__brand img { max-height:40px; } .ss-header__brand { font-weight:800; color:var(--text-strong); text-decoration:none; }
.ss-nav { display:flex; gap:var(--space-5); } .ss-nav a { color:var(--text); text-decoration:none; font-weight:600; }
/* Menu s katalogy na webu (7. 10. 2026: 8 položek) se na šířce 720–900 px nevešlo — stránka měla
   vodorovný posuvník (novak.steerty.com při 792 px: menu do 842 px). Mezi stolem a telefonem se
   proto položky zalomí do dalšího řádku; položka sama se nedělí („Použité pneumatiky“ celé). */
@media (min-width: 720px) {
  .ss-nav { flex-wrap:wrap; justify-content:flex-end; row-gap:var(--space-2); min-width:0; }
  .ss-nav a { white-space:nowrap; }
}
.ss-nav a:hover { color:var(--primary); }

.ss-main { max-width:1100px; margin:0 auto; padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-8); }
.ss-btn { display:inline-block; padding:var(--space-3) var(--space-5); border-radius:var(--radius-pill);
  font-weight:700; border:0; cursor:pointer; text-decoration:none; }
.ss-btn--primary { background:var(--primary); color:var(--primary-ink); }

.ss-hero { position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:360px;
  display:flex; align-items:flex-end; background:var(--graphite-800); }
.ss-hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.ss-hero__inner { position:relative; padding:var(--space-8); color:#fff; }
.ss-hero__title { font-size:2.4rem; margin:0 0 var(--space-3); }
.ss-hero__sub { font-size:1.15rem; margin:0 0 var(--space-5); max-width:40ch; }

.ss-usp { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.ss-tag { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4); font-weight:600; }

.ss-section-intro h2 { font-size:1.8rem; margin:0 0 var(--space-3); }
.ss-prose { color:var(--text); max-width:65ch; }
.ss-about { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); align-items:start; }
.ss-gallery { display:grid; gap:var(--space-3); } .ss-gallery img { border-radius:var(--radius-md); }
.ss-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-6); }
.ss-contact p { margin:var(--space-2) 0; }
.ss-contact__line { font-family:var(--font-sans); }
.ss-about--bez-fotek { grid-template-columns:1fr; }

.ss-tyre-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--space-4); }
.ss-tyre { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); }
.ss-tyre__name { font-weight:700; } .ss-tyre__price { font-size:1.2rem; color:var(--text-strong); }
/* Pevny pomer stran drzi mrizku klidnou, i kdyz fotka dorazi az po prvnim vykresleni,
   a `contain` nechá dezen cely — `cover` by u siroke fotky uriznul bok pneumatiky. */
.ss-tyre__photo { width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--bg);
  border-radius:var(--radius-sm); }
.ss-tyres--unbound { display:none; }
.ss-bound { min-height:1px; }

.ss-footer { display:flex; justify-content:space-between; padding:var(--space-6); color:var(--text-muted);
  border-top:1px solid var(--border); margin-top:var(--space-8); }

.ss-text-muted { color:var(--text-muted); }

/* services teaser + price list */
.ss-svc-teaser { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-4); }
.ss-svc { display:flex; justify-content:space-between; align-items:center; }
.ss-svc__name { font-weight:600; } .ss-svc__price { color:var(--text-strong); font-weight:700; }
.ss-pricelist { display:flex; flex-direction:column; gap:var(--space-6); }
.ss-pl-group h3, .ss-svc-group h3 { margin:0 0 var(--space-3); }
.ss-pl-table { width:100%; border-collapse:collapse; }
.ss-pl-table td { padding:var(--space-3) 0; border-bottom:1px solid var(--border); }
.ss-pl-time { color:var(--text-muted); text-align:right; width:8ch; }
.ss-pl-price { text-align:right; font-weight:700; color:var(--text-strong); width:10ch; }

/* opening hours + lamp */
.ss-hours-table { border-collapse:collapse; } .ss-hours-table td { padding:var(--space-2) var(--space-5) var(--space-2) 0; }
/* časy otevírací doby v písmu stránky, číslice stejně široké (zarovnané pod sebou) — dřív strojové ss-mono */
.ss-hours__time { font-variant-numeric:tabular-nums; white-space:nowrap; }
.ss-lamp { font-size:.85rem; padding:2px var(--space-3); border-radius:var(--radius-pill); color:#fff; }
.ss-lamp--ok { background:#14935A; } .ss-lamp--busy { background:#E5484D; }

/* reviews */
.ss-reviews { display:flex; align-items:center; gap:var(--space-3); }
.ss-reviews__stars { color:#E8B11C; font-size:1.3rem; } .ss-reviews__score { font-size:1.2rem; font-weight:700; }

/* reservation (embedded widget) */
.ss-reservation { display:flex; justify-content:center; }

/* widget modal (progressive enhancement) */
/* Na telefonu CELA PLOCHA. Objednavka je nejdelsi krok na strance a orezany
   ramecek s vlastnim posuvnikem uvnitr posuvniku se na male obrazovce ovlada
   mizerne. Zaoblene rohy a stin tu nic nepridavaji — nic za nimi neni videt. */




/* ── Katalog: záložky, filtr, odznaky, stránkování ───────────────────────── */
.ss-tabs { display:flex; gap:var(--space-2); border-bottom:1px solid var(--border); margin-bottom:var(--space-4); }
.ss-tab { padding:var(--space-3) var(--space-4); text-decoration:none; color:var(--text-muted); font-weight:700;
  border-bottom:3px solid transparent; }
.ss-tab--on { color:var(--text-strong); border-bottom-color:var(--primary); }
.ss-filter { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:flex-end; padding:var(--space-4);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:var(--space-5); }
.ss-field { display:flex; flex-direction:column; gap:4px; min-width:120px; flex:1 1 140px; }
.ss-field > span, .ss-svc-qty__label, .ss-svc-qty__custom > span { font-size:.85rem; color:var(--text-muted); font-weight:600; }
.ss-field select, .ss-field input, .ss-field textarea, .ss-svc-qty__custom input { font:inherit; padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--paper-0); color:var(--text); }
.ss-field--err input, .ss-field--err select, .ss-field--err textarea, .ss-svc-qty__custom input[aria-invalid="true"] { border-color:#C23838; }
.ss-err { color:#C23838; font-style:normal; font-size:.85rem; }
.ss-btn--ghost { background:transparent; color:var(--text-strong); border:1px solid var(--border); }
/* Na tmavém hlavním pruhu je text --text-strong prakticky neviditelný (1,3 : 1, změřeno
   27. 9. 2026 na „Vybrat pneumatiky“). Tady světlý text a obrys. */
.ss-hero .ss-btn--ghost { color:#fff; border-color:rgba(255,255,255,.6); }
.ss-hero .ss-btn--ghost:hover { background:rgba(255,255,255,.12); }
.ss-btn--big { padding:var(--space-4) var(--space-6); font-size:1.05rem; }
.ss-tyre--used { border-color:var(--coral-400); }
.ss-tyre__badges { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
/* Indexy pneu (nosnost + rychlost) zřetelně pod rozměrem, s výkladem v kg a km/h. */
.ss-tyre__index { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:4px; }
.ss-badge--index { font-family:var(--font-mono); font-weight:700; color:var(--text-strong); }
/* „vč. DPH“ za cenou kusu — menší a tlumeně, ať číslo zůstane hlavní. */
.ss-tyre__vat { font-family:var(--font-sans); font-size:.75em; font-weight:400; color:var(--text-muted); }
/* Rekapitulace objednávky s cenami (7. 10. 2026): cena řádku v košíku, součet, tabulka v potvrzení. */
.ss-cart__price { white-space:nowrap; }
.ss-cart__total { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:6px; margin:var(--space-2) 0 0; }
.ss-recap { width:100%; border-collapse:collapse; margin:var(--space-3) 0; font-variant-numeric:tabular-nums; }
.ss-recap th, .ss-recap td { padding:6px 8px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.ss-recap th.ss-recap__num, .ss-recap td.ss-recap__num { text-align:right; white-space:nowrap; }
.ss-recap tfoot th, .ss-recap tfoot td { border-bottom:0; font-weight:700; }
/* Tabulka nesmí roztáhnout stránku do strany (375 px: o 47 px). Fieldset má výchozí min-width:min-content,
   proto souhrn ceny min-width:0; na úzkém displeji menší písmo a odsazení, krajní záchrana je posun tabulky. */
.ss-recap-wrap { overflow-x:auto; }
.ss-sum { min-width:0; }
.ss-sum__term { margin:0 0 var(--space-2); display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; }
/* Objednávka: hlavní sloupec a boční panel (rekapitulace + odeslání). Úzký displej = pod sebou,
   panel na konci před odesláním. Široký (majitel 7. 10. 2026: „vpravo místo — plovoucí, stále
   viditelný blok rekapitulace, odeslání bude vědomé“) = panel vpravo, drží se při posunu a má
   vlastní posuvnou plochu, aby se dlouhý seznam neořízl. */
.ss-order__main, .ss-order__side { display:flex; flex-direction:column; gap:var(--space-5); min-width:0; }
@media (min-width:1024px) {
  .ss-form.ss-order { display:grid; grid-template-columns:minmax(0, 1fr) 340px; align-items:start; gap:var(--space-6); max-width:none; }
  .ss-order__side { position:sticky; top:var(--space-4); max-height:calc(100vh - 2 * var(--space-4)); overflow-y:auto; gap:var(--space-4); }
  .ss-order__side .ss-recap { font-size:.8125rem; }
  .ss-order__side .ss-recap th, .ss-order__side .ss-recap td { padding:6px 4px; }
  .ss-order__side .ss-recap td.ss-recap__ask { white-space:normal; }
}
@media (max-width:480px) {
  .ss-recap { font-size:.8125rem; }
  .ss-recap th, .ss-recap td { padding:6px 4px; }
  .ss-recap td.ss-recap__ask { white-space:normal; } /* „Cena dohodou“ je text, ne částka — smí se zalomit */
}
.ss-badge { font-size:.75rem; padding:2px 8px; border-radius:var(--radius-pill); background:var(--mist-200); color:var(--text); }
.ss-badge--used { background:var(--coral-400); color:var(--primary-ink); }
.ss-badge--ok { background:#E9F6EF; color:#218358; }
.ss-badge--muted { background:transparent; border:1px solid var(--border); color:var(--text-muted); }
/* Stránkování katalogu: „Načíst další“ uprostřed, čísla a šipky vpravo; na telefonu pod sebou. */
.ss-pager { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--space-4); margin-top:var(--space-5); }
.ss-pager__more { grid-column:2; display:inline-flex; align-items:center; gap:var(--space-2); text-decoration:none; }
.ss-pager__pages { grid-column:3; justify-self:end; display:flex; align-items:center; gap:var(--space-2); }
.ss-pager__page, .ss-pager__arrow { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px;
  padding:0 var(--space-2); border:1px solid var(--border); background:var(--surface); color:var(--text-strong); text-decoration:none; font-weight:600; }
.ss-pager__page { border-radius:var(--radius-sm); }
.ss-pager__arrow { border-radius:var(--radius-pill); }
.ss-pager__page--current { background:var(--bg); border-color:var(--text-strong); }
.ss-pager a:hover { border-color:var(--text-strong); }
.ss-pager__icon { flex:none; }
.ss-pager[aria-busy="true"] .ss-pager__more { opacity:.6; pointer-events:none; }
@media (max-width: 640px) {
  .ss-pager { grid-template-columns:1fr; justify-items:center; }
  .ss-pager__more, .ss-pager__pages { grid-column:1; justify-self:center; }
}
.ss-tyres__more { text-align:center; margin-top:var(--space-4); }
.ss-empty-note { padding:var(--space-4); background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-md); }

/* ── Objednávka / rezervace ──────────────────────────────────────────────── */
.ss-form { display:flex; flex-direction:column; gap:var(--space-5); max-width:760px; }
.ss-fieldset { border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-4); background:var(--surface); }
.ss-fieldset legend { font-weight:800; padding:0 6px; }
.ss-row { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:flex-end; }
.ss-choices { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.ss-choice { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-pill); }
/* Objednávka na firmu (firma.js): volba nad poli, nabídka firem z ARESu visí pod polem přes obsah
   (nic pod ní se při psaní neposouvá); dlouhý název se zalomí. */
.ss-choice--firma { align-self:flex-start; margin:var(--space-2) 0; }
.ss-firma-pole { position:relative; display:flex; flex:1 1 140px; min-width:120px; }
.ss-firma-pole > .ss-field { flex:1 1 auto; }
.ss-firma-pole--nazev { flex:2 1 16em; }
.ss-navrhy { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20; margin:0; padding:4px 0; list-style:none;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-2); }
.ss-navrhy__volba { display:block; width:100%; min-height:44px; padding:8px 12px; border:0; background:none; color:var(--text);
  font:inherit; text-align:left; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
.ss-navrhy__volba:hover, .ss-navrhy__volba:focus { background:var(--bg); outline:none; }
.ss-summary { display:flex; gap:var(--space-4); align-items:flex-start; padding:var(--space-4); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md); }
.ss-summary .ss-tyre__photo { width:140px; height:140px; object-fit:contain; flex:0 0 auto; }
.ss-alert { padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); }
.ss-alert--err { background:#FBECEC; color:#C23838; }
.ss-alert a { color:inherit; font-weight:700; }
.ss-done { padding:var(--space-6); }
.ss-done__when { font-size:1.2rem; }
.ss-done__items { padding-left:1.2em; }
.ss-small { font-size:.85rem; }
.ss-reservation-off { display:flex; flex-direction:column; gap:var(--space-3); align-items:flex-start; }
.ss-footer a { color:var(--text); }
/* Aktivní položka: oranžový TEXT na bílé má jen 2,9 : 1 (pod 4,5 : 1). Barvu nese
   podtržení, text zůstává tmavý. */
.ss-nav a[aria-current="page"] { color:var(--text-strong); box-shadow:inset 0 -3px 0 var(--primary); }
@media (max-width: 719px) {
  .ss-summary { flex-direction:column; }
  .ss-summary .ss-tyre__photo { width:100%; height:auto; }
}

/* ── Katalog: dotykový výběr rozměru, košík (ev-pages, 24. 9. 2026) ─────────── */
.ss-touch { display:flex; flex-direction:column; gap:var(--space-3); }
.ss-touch__rims { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.ss-chip { display:inline-block; min-width:3.2em; text-align:center; padding:var(--space-2) var(--space-3);
  border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface);
  color:var(--text); text-decoration:none; font-weight:600; font-variant-numeric:tabular-nums; }
/* Najetí myší zvýrazní jen NEvybraný čip. Dřív `.ss-chip:hover` (0,2,0) přebil `.ss-chip--on`
   (0,1,0): vybraný čip dostal text v barvě `--primary` na pozadí `--primary` — neviditelný. */
.ss-chip:not(.ss-chip--on):hover { border-color:var(--primary); color:var(--primary); }
.ss-chip--on, .ss-svc-qty__opt input:checked + .ss-chip { background:var(--primary); border-color:var(--primary); color:var(--primary-ink); }
.ss-field--wide { flex:1 1 16em; }
/* Dotykovy vyber je VRSTVA nad strankou (27. 9. 2026): ve strance zustava jen lista
   (tlacitko + souhrn zvoleneho), kroky jsou v <dialog>. Bez JS se `<dialog open>` kresli do
   stranky jako blok — proto `:not(:modal)` bez pozice a stinu. Na telefonu cela plocha:
   mrizka sirka x profil se ovlada palcem a orezany ramecek s vlastnim posuvnikem by
   prekazel. Stin jen u vrstvy, ktera opravdu pluje (design brief: edges over shadows). */
.ss-touch__bar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.ss-touch__summary { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.ss-chip--zrusit span { opacity:.75; margin-left:2px; }
.ss-touch-dialog { border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-2);
  padding:0; width:min(760px, calc(100vw - 2 * var(--space-4))); max-height:calc(100vh - 2 * var(--space-6));
  background:var(--surface); color:var(--text); font:inherit; }
.ss-touch-dialog::backdrop { background:rgba(14,17,19,.45); }
.ss-touch-dialog[open]:not(:modal) { position:static; margin:0; width:100%; max-height:none; box-shadow:none; }
.ss-touch-dialog[aria-busy="true"] .ss-touch-dialog__body { opacity:.5; }
.ss-touch-dialog__head { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3);
  padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); }
.ss-touch-dialog__head h2 { margin:0; font-size:1.2rem; }
.ss-touch-dialog__close { padding:var(--space-2) var(--space-3); line-height:1; font-size:1.2rem; }
.ss-touch-dialog__body { padding:var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); overflow:auto; }
.ss-step { display:flex; flex-direction:column; gap:var(--space-2); }
.ss-step__label { font-size:.8rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.ss-step--on .ss-step__label { color:var(--primary); }
.ss-step__body { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.ss-step__body p { margin:0; }
.ss-matrix-scroll { overflow-x:auto; max-width:100%; }
.ss-matrix { border-collapse:separate; border-spacing:4px; font-variant-numeric:tabular-nums; }
.ss-matrix th { font-weight:600; color:var(--text-muted); padding:2px 4px; text-align:center; font-size:.85rem; }
.ss-matrix th[scope="row"] { text-align:right; }
.ss-matrix__corner { font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.ss-cell { display:block; min-width:3.6em; padding:var(--space-2); text-align:center; border:1px solid var(--border);
  border-radius:4px; background:var(--paper-0); color:var(--text-strong); text-decoration:none; font-weight:600; }
/* Totéž u buňky mřížky: vybraná buňka zůstane čitelná při najetí i při fokusu klávesnicí
   (ten jí nechá obrys prohlížeče — `outline:none` patří jen k nevybrané, která má rámeček). */
.ss-cell:not(.ss-cell--on):hover, .ss-cell:not(.ss-cell--on):focus-visible { border-color:var(--primary); color:var(--primary); outline:none; }
.ss-cell--on { background:var(--primary); border-color:var(--primary); color:var(--primary-ink); }
/* JEDEN PANEL HLEDÁNÍ (majitel 5. 10. 2026): lišta dotykového výběru je první řádek formuláře
   filtru a parametry rozměru jsou ROZBALENÉ hned při načtení (dřív složené v <details>).
   Mřížka místo řádku pod řádkem: na telefonu 375 px se vejdou dvě pole vedle sebe (2 × 120 px
   + mezera < 311 px obsahu), tedy 2 × 2 místo čtyř řádků — výpis nezačíná až pod okrajem. */
.ss-filter > .ss-touch { flex:1 1 100%; }
/* Fulltext + tlačítko na jednom řádku; popisek pole je jen pro čtečku (tlačítko ho pojmenuje). */
.ss-filter__hledat { flex:1 1 100%; display:flex; gap:var(--space-3); align-items:flex-end; }
.ss-filter__hledat .ss-field { min-width:0; }
.ss-filter__hledat .ss-btn { flex:0 0 auto; min-height:44px; }
.ss-filter__fields { flex:1 1 100%; min-width:0; margin:0; padding:0; border:0; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:var(--space-3); align-items:end; }
.ss-field--aspon { flex:0 1 10em; }
/* Cíle na dotyk v panelu aspoň 44 px: čipy (souhrn i kroky výběru) a „i na objednání“ měly 42. */
.ss-filter .ss-chip { display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
.ss-filter .ss-choice { min-height:44px; }
/* Telefon: panel nad výpisem co nejnižší — užší okraje a mezery, menší popisky polí a souhrn
   zvoleného rozměru v JEDNOM řádku, který jde posunout prstem (jako menu webu). Změřeno na
   náhledu 5. 10. 2026 (375 × 812): bez toho začínala první karta až pod okrajem obrazovky. */
@media (max-width:719px) {
  .ss-filter { padding:var(--space-3); gap:var(--space-2); }
  .ss-filter .ss-touch { gap:var(--space-2); }
  .ss-filter__hledat, .ss-filter__fields { gap:var(--space-2); }
  .ss-filter .ss-field { gap:2px; }
  .ss-filter .ss-field > span { font-size:.8rem; line-height:1.25; }
  .ss-filter .ss-touch__bar { gap:var(--space-2); }
  .ss-filter .ss-touch__summary { flex:1 1 100%; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .ss-filter .ss-touch__summary::-webkit-scrollbar { display:none; }
  .ss-filter .ss-touch__summary .ss-chip { flex:0 0 auto; }
}
@media (max-width:719px) {
  .ss-touch-dialog:modal { width:100vw; height:100dvh; max-height:none; max-width:none; border:0; border-radius:0; margin:0; }
  .ss-touch__open { flex:1 1 100%; text-align:center; }
}
.ss-buy { display:flex; gap:var(--space-2); align-items:center; margin-top:auto; }
.ss-buy select { padding:var(--space-2); border:1px solid var(--border); border-radius:var(--radius-sm); }
.ss-cart__items { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.ss-cart__item { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); justify-content:space-between;
  padding:var(--space-2) 0; border-bottom:1px solid var(--border); }
.ss-cart__item--gone { color:var(--text-muted); }
.ss-cart__name { flex:1 1 14em; }
/* ── Košík je vidět (majitel 12. 10. 2026) ──────────────────────────────────────
   Odkaz do košíku je ve stránce vždy: v liště jako výrazné tlačítko, vpravo dole jako plovoucí.
   Prázdný je schovaný TŘÍDOU (ne atributem `hidden`) — po přidání ho app.js ukáže bez načtení
   stránky. Zelená „přidáno“ je vlastní barva stavu, ne barva servisu (ta může být i červená). */
:root { --ok:#218358; --ok-bg:#E9F6EF; }
.ss-kosik { display:inline-flex; align-items:center; gap:6px; }
/* `.ss-nav a` má na mobilu vlastní `display` s vyšší specificitou — proto i druhý selektor. */
.ss-kosik--prazdny, .ss-nav a.ss-kosik--prazdny { display:none; }
.ss-kosik__ikona { flex:0 0 auto; }
.ss-kosik__pocet { min-width:1.6em; text-align:center; font-weight:800; }
.ss-nav a.ss-nav__cart { padding:6px var(--space-4); border-radius:var(--radius-pill); background:var(--primary);
  color:var(--primary-ink); box-shadow:none; }
.ss-nav a.ss-nav__cart:hover { color:var(--primary-ink); filter:brightness(.94); }
.ss-nav__cart .ss-badge, .ss-fab .ss-badge { background:var(--surface); color:var(--text-strong); }
.ss-fab { position:fixed; right:var(--space-4); bottom:var(--space-4); z-index:30; min-height:56px;
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-pill); background:var(--primary);
  color:var(--primary-ink); font-weight:800; text-decoration:none; box-shadow:var(--shadow-2), 0 2px 6px rgba(14,17,19,.18); }
.ss-fab:hover { filter:brightness(.94); }
.ss-fab:focus-visible, .ss-nav a.ss-nav__cart:focus-visible { outline:3px solid var(--text-strong); outline-offset:2px; }
/* Plovoucí košík nesmí zakrýt patičku: patička za ním nechá dole místo. */
.ss-fab ~ .ss-footer { padding-bottom:calc(56px + var(--space-6)); }
/* Přidání: košík poskočí, číslo se nadechne; ke košíku doletí tečka (app.js). */
@keyframes ss-kosik-skok { 0% { transform:scale(1); } 35% { transform:scale(1.14); } 100% { transform:scale(1); } }
.ss-kosik--skok { animation:ss-kosik-skok .45s ease; }
.ss-let { position:fixed; z-index:40; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  background:var(--ok); pointer-events:none; }
/* Řádek „Přidáno do košíku“ pod tlačítkem: bez JS ho ukáže kotva karty, s JS třída. */
.ss-buy__ok { display:none; align-items:center; flex-wrap:wrap; gap:6px; margin:var(--space-2) 0 0; padding:6px 10px;
  border-radius:var(--radius-sm); background:var(--ok-bg); color:var(--ok); font-size:.875rem; font-weight:700; }
.ss-buy__ok a { color:var(--ok); }
.ss-tyre:target .ss-buy__ok, .ss-tyre--pridano .ss-buy__ok { display:flex; }
.ss-tyre:target, .ss-tyre--pridano { border-color:var(--ok); scroll-margin-top:var(--space-5); }
.ss-buy__ok-mark, .ss-btn--ok::before { content:""; display:inline-block; width:6px; height:11px; margin:-3px 10px 0 2px;
  border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); }
.ss-btn--ok, .ss-btn--ok:hover { background:var(--ok); color:#fff; }
.ss-btn[aria-busy="true"] { opacity:.7; cursor:progress; }
@keyframes ss-pridano { 0% { transform:scale(.96); } 60% { transform:scale(1.05); } 100% { transform:scale(1); } }
.ss-btn--ok { animation:ss-pridano .3s ease; }
/* Celková cena je hlavní číslo rekapitulace (objednávka i potvrzení). */
.ss-recap tfoot th, .ss-recap tfoot td { padding-top:var(--space-3); border-top:2px solid var(--text-strong); vertical-align:baseline; }
.ss-recap tfoot strong, .ss-cart__total strong { font-size:1.5rem; line-height:1.2; color:var(--text-strong); }
@keyframes ss-zmena { 0% { background:var(--ok-bg); } 100% { background:transparent; } }
.ss-sum--zmena .ss-recap tfoot td { animation:ss-zmena 1.2s ease; }
/* Hláška u řádku služby („Přidáno do košíku“, „Aktualizováno v košíku“) — pod názvem, sama zmizí. */
.ss-svc-opt__info { color:var(--ok); font-size:.8125rem; font-weight:700; }
.ss-svc-opt__info--pryc { color:var(--text-muted); }
/* Telefon: lišta se posouvá do strany a košík na jejím konci by byl mimo obraz — nese ho plovoucí
   tlačítko. Na stránce objednávky (bez plovoucího) v ní návštěvník už je. */
@media (max-width:719px) {
  .ss-nav a.ss-nav__cart { display:none; }
  .ss-fab { right:var(--space-3); bottom:var(--space-3); }
}
@media (prefers-reduced-motion:reduce) {
  .ss-kosik--skok, .ss-btn--ok, .ss-sum--zmena .ss-recap tfoot td { animation:none; }
}
@media (max-width:640px) { .ss-chip { min-width:2.8em; padding:var(--space-2); } }

/* ── Mobil: hlavička, menu, hlavní pruh (ladění veřejných webů 27. 9. 2026) ─────
   Menu se dřív na 375 px nevešlo (položky do 592 px) a stránka přetékala do strany —
   Rezervace, O nás ani Kontakt nebyly z hlavičky vidět. Bez JavaScriptu: menu je na
   mobilu vlastní řádek, který jde posunout prstem, a stránka už nepřeteče. */
.ss-nav a { padding:var(--space-2) 0; }
@media (max-width: 719px) {
  .ss-header { flex-wrap:wrap; gap:var(--space-2); padding:var(--space-3) var(--space-4); }
  .ss-nav { width:100%; overflow-x:auto; gap:var(--space-5); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .ss-nav::-webkit-scrollbar { display:none; }
  .ss-nav a { white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; }
  .ss-main { padding:var(--space-4); gap:var(--space-6); }
  .ss-hero { min-height:0; }
  .ss-hero__inner { padding:var(--space-6) var(--space-5); }
  .ss-hero__title { font-size:1.8rem; line-height:1.2; }
  .ss-hero__sub { font-size:1.05rem; }
  .ss-about { grid-template-columns:1fr; }
  .ss-footer { flex-direction:column; gap:var(--space-2); padding:var(--space-5) var(--space-4); }
}
/* Odkazy v hlavním pruhu se lámou pod sebe s mezerou, ne na sebe. */
.ss-hero__inner .ss-btn { margin:0 var(--space-2) var(--space-2) 0; }

/* ── Objednávka: výběr služeb jako na portálu (5. 10. 2026) ─────────────────────
   Zadání majitele: stejný ZPŮSOB výběru jako objednávka služeb na portálu (b2c
   `reservation-service-list`) a rozdělení jako ceník. CELÝ řádek je přepínač (dřív malé
   zaškrtávátko v pilulce), pod vybraným řádkem lišta počtu.
   BEZ JS: řádek je <label for> vizuálně skrytého zaškrtávátka, stav kreslí `:checked +`
   a lištu ukáže `:checked ~` — sourozenecké selektory umí každý prohlížeč, `:has` ne.
   Vzhled přebírá z existujících pravidel (selektor přidaný tam, hodnoty neopsané):
   nadpis skupiny = `.ss-pl-group h3` (ceník), zvolený počet = `.ss-chip--on`, pole
   „vlastní“ = `.ss-field input`, popisky = `.ss-field > span`. Barva výběru je `--primary`,
   takže ji servis přebarví brandingem. */

/* Skryté pro oko, ne pro klávesnici a čtečku (`display:none` by pole vyřadilo z obou). */
.ss-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.ss-svc-pick { display:flex; flex-direction:column; gap:var(--space-5); }
/* `relative`: skryté zaškrtávátko zůstane u svého řádku — fokus klávesnicí neodskočí stránkou. */
.ss-svc-opt { position:relative; }
.ss-svc-opt + .ss-svc-opt { margin-top:var(--space-2); }
/* Řádek = cíl na dotyk přes celou šířku (portál: 64 px), rámeček a plocha jako `.ss-fieldset`. */
.ss-svc-opt__row { display:flex; align-items:center; gap:var(--space-3); min-height:64px;
  padding:var(--space-3) var(--space-4); border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface); cursor:pointer; transition:border-color .15s ease, background-color .15s ease; }
/* Jen kde je myš: na dotyku `:hover` po klepnutí „zasekne“ a nevybraný řádek vypadá jako vybraný. */
@media (hover:hover) { .ss-svc-opt__row:hover { border-color:var(--primary); } }
.ss-svc-opt__input:focus-visible + .ss-svc-opt__row,
.ss-svc-qty__opt input:focus-visible + .ss-chip { outline:2px solid var(--primary); outline-offset:2px; }
/* Vybraný řádek: rámeček v barvě servisu + jemné podbarvení odvozené z TÉŽE barvy
   (`color-mix`; starší prohlížeč zůstane u plochy `--surface`, rámeček stav nese i tak). */
.ss-svc-opt__input:checked + .ss-svc-opt__row { border-color:var(--primary); background:var(--surface);
  background:color-mix(in srgb, var(--primary) 8%, var(--surface)); }
/* Lišta počtu navazuje na vybraný řádek: spodní rohy patří jí. */
.ss-svc-opt--qty > .ss-svc-opt__input:checked + .ss-svc-opt__row { border-bottom-left-radius:0; border-bottom-right-radius:0; }
/* Kolečko ukazuje STAV (prázdné → plné se zatržením), ne akci; barvy jako `.ss-chip--on`. */
.ss-svc-opt__mark { flex:0 0 24px; display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  border:2px solid var(--border); border-radius:50%; }
.ss-svc-opt__mark::after { content:""; width:6px; height:11px; margin-top:-3px; border:solid transparent;
  border-width:0 2px 2px 0; transform:rotate(45deg); }
.ss-svc-opt__input:checked + .ss-svc-opt__row .ss-svc-opt__mark { background:var(--primary); border-color:var(--primary); }
.ss-svc-opt__input:checked + .ss-svc-opt__row .ss-svc-opt__mark::after { border-color:var(--primary-ink); }
/* Název smí lámat (i dlouhé slovo), cena drží vpravo a „Cena dohodou“ se smí zalomit —
   na telefonu 375 px tak řádek nepřeteče (ověřeno na náhledu 5. 10. 2026). */
.ss-svc-opt__text { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; overflow-wrap:anywhere; }
.ss-svc-opt__price { flex:0 1 auto; max-width:45%; text-align:right; }
/* Lišta počtu: jen pod VYBRANÝM řádkem, vizuálně jeho pokračování. */
.ss-svc-qty { display:none; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4);
  border:1px solid var(--primary); border-top:0; border-radius:0 0 var(--radius-md) var(--radius-md); background:var(--bg); }
.ss-svc-opt__input:checked ~ .ss-svc-qty { display:flex; }
.ss-svc-qty__label { margin-right:var(--space-2); }
/* Volby počtu jsou `.ss-chip`; tady jen cíl na dotyk aspoň 44 × 44 px. */
.ss-svc-qty .ss-chip { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; cursor:pointer; }
.ss-svc-qty__custom { display:inline-flex; align-items:center; gap:var(--space-2); }
.ss-svc-qty__custom input { width:5.5em; min-height:44px; }
.ss-svc-qty .ss-err { flex-basis:100%; }
@media (max-width:719px) {
  .ss-svc-opt__row { padding:var(--space-3); }
  .ss-svc-qty { padding:var(--space-2) var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .ss-svc-opt__row { transition:none; } }
/* ── Objednávka: výběr termínu jako na portálu (majitel 7. 10. 2026: „vč. minikalendáře“) ────
   Portál (`reservation-date-time`, main.scss + portal-v2 §10): vlevo dny pod sebou (jméno vlevo,
   datum vpravo) a pod nimi měsíční kalendář, vpravo časy jako tlačítka (obsazené zeslabené).
   Telefon: dny → časy → kalendář, cíle na dotyk aspoň 44 px. Dny a časy jsou přepínače `radio`
   skryté `.ss-sr-only` (klávesnice i čtečka zůstanou), stav přes `:checked +`. */
.ss-term__grid { display:grid; gap:var(--space-4) var(--space-5); grid-template-columns:minmax(0, 1fr); }
@media (min-width:720px) {
  .ss-term__grid { grid-template-columns:minmax(240px, 320px) minmax(0, 1fr);
    grid-template-areas:"dny casy" "kalendar casy"; align-items:start; }
  .ss-term__part--dny { grid-area:dny; }
  .ss-term__part--casy { grid-area:casy; }
  .ss-term__part--kalendar { grid-area:kalendar; }
}
.ss-term__part { display:flex; flex-direction:column; align-items:stretch; gap:var(--space-2); min-width:0; }
.ss-term__label { font-weight:600; color:var(--text-strong); }
.ss-term__kdy { font-weight:400; color:var(--text-muted); }
.ss-term__days { display:flex; flex-direction:column; gap:6px; }
.ss-term__opt { position:relative; display:block; }
.ss-term__day { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); min-height:44px;
  padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
  font-variant-numeric:tabular-nums; cursor:pointer; transition:border-color .15s ease, background-color .15s ease; }
.ss-term__wd { font-weight:600; }
.ss-term__date { color:var(--text-muted); }
.ss-term__day--plny { cursor:not-allowed; opacity:.5; background:var(--bg); }
/* Den z kalendáře MIMO seznam: řádek seznamu jen tehdy, když je zvolený (jinak je přepínač
   vypnutý a řádek pryč) — klávesnice i oko tak vidí, co se odešle. */
.ss-term__opt--kalendar input:disabled + .ss-term__day { display:none; }
.ss-term__times { display:grid; gap:var(--space-2); grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); }
.ss-term__times .ss-term__none { grid-column:1 / -1; margin:0; padding:var(--space-3) 0; }
.ss-term__times .ss-chip { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; cursor:pointer; }
.ss-term__times .ss-chip--obsazeno { opacity:.35; cursor:not-allowed; text-decoration:line-through; }
@media (hover:hover) {
  .ss-term__opt input:not(:disabled):not(:checked) + .ss-term__day:hover { border-color:var(--primary); }
}
.ss-term__opt input:checked + .ss-term__day,
.ss-term__opt input:checked + .ss-chip { background:var(--primary); border-color:var(--primary); color:var(--primary-ink); }
.ss-term__opt input:checked + .ss-term__day .ss-term__date { color:var(--primary-ink); }
.ss-term__opt input:focus-visible + .ss-term__day,
.ss-term__opt input:focus-visible + .ss-chip { outline:2px solid var(--primary); outline-offset:2px; }
.ss-term__times[aria-busy="true"] { opacity:.6; }
.ss-term .ss-btn[data-nojs] { align-self:flex-start; margin-top:var(--space-2); }
/* Kalendář (portál `mini-calendar`): měsíc se šipkami, týden od pondělí, zvolený den v barvě servisu. */
.ss-cal { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); padding:var(--space-2); overflow-x:auto; }
@media (max-width:719px) { .ss-cal { padding:4px; } }
.ss-cal__head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-2); }
.ss-cal__title { font-weight:600; }
.ss-cal__nav { min-width:44px; min-height:44px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
  color:var(--text); font-size:1.25em; line-height:1; cursor:pointer; }
.ss-cal__nav:disabled { opacity:.35; cursor:not-allowed; }
.ss-cal__grid { width:100%; border-collapse:collapse; table-layout:fixed; text-align:center; font-variant-numeric:tabular-nums; }
.ss-cal__grid th { padding:4px 0; font-size:.8em; font-weight:600; color:var(--text-muted); }
.ss-cal__grid td { padding:1px; }
/* Cíl na dotyk aspoň 44 × 44 px i na telefonu (portál `--pt-cil-dotyk`, revize 7. 10.). */
.ss-cal__day { width:100%; min-width:44px; min-height:44px; padding:0; border:1px solid transparent; border-radius:var(--radius-sm); background:none;
  color:var(--text); cursor:pointer; }
.ss-cal__day--dnes { border-color:var(--border); font-weight:700; }
.ss-cal__day--on { background:var(--primary); border-color:var(--primary); color:var(--primary-ink); }
.ss-cal__day:disabled { color:var(--text-muted); opacity:.4; cursor:not-allowed; }
@media (hover:hover) {
  .ss-cal__day:not(:disabled):not(.ss-cal__day--on):hover, .ss-cal__nav:not(:disabled):hover { border-color:var(--primary); }
}
.ss-cal__day:focus-visible, .ss-cal__nav:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
@media (prefers-reduced-motion: reduce) { .ss-term__day { transition:none; } }