/* Paleta podle Weberu a loga grilcentrum.cz — bílá plocha, uhlová čerň,
   jedna červená. Žádné další barvy kromě odstínů kategorií dílů. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --panel-bg: #fafafa;
  --ink: #1a1a1a;
  --ink-soft: #6a6a6a;
  --line: #e4e4e4;
  --accent: #e2001a;
  --accent-dark: #b30015;
  --accent-soft: #fff2f3;
  --flame: #e2001a;
  --ok: #167f4d;
  --ok-soft: #eef8f2;
  --header-bg: #0b0b0b;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .06);
  --shadow-lift: 0 4px 10px rgba(0, 0, 0, .07), 0 16px 36px rgba(0, 0, 0, .11);

  /* Jedno písmo pro všechny cudlíky v hlavičce. Každý si ho dřív nesl vlastní
     a rozešly se: .64/750 u bílých pilulek, .72/850 u telefonu, .75/800
     u popisku a .76/800 u červených tlačítek. Vedle sebe to bylo vidět.
     Kdo přidá další tlačítko, sáhne sem a nemá jak se odchýlit. */
  /* Pole pro hledání a řada tlačítek pod ním mají jednu šířku. 600 px proto,
     že se do ní čtyři nápisy vejdou vedle sebe na jeden řádek, aniž by se
     musely zmenšit. */
  --pole-sirka: min(600px, 100%);
  /* Jedna osa úvodní stránky. Hero, výhody, postup, banner i patička musí mít
     stejné levé a pravé okraje; mění se jen celoplošné pozadí.

     Roman 29. 8. 2026: „nahradnidilyweber.cz a grilnapuceni.cz mají každý jiný
     rozměr, musíte to sjednotit vždy na celou plochu monitoru." Půjčovna
     stála na 1440 px, náhradní díly na 920 — vedle sebe to vypadalo jako dva
     různé weby. Teď mají obě stejnou šňůrku: 1440 px a 48 px od kraje
     (v pujcovna.css je to --shell a `100% - 48px`, tady totéž). Kdo jednu
     stranu posune, musí posunout i druhou. */
  --intro-width: 1440px;
  /* Boční okraj té osy dohromady (levý + pravý). Je to jedno číslo schválně:
     jakmile si každá sekce psala vlastní 2.5rem / 3rem / nic, přestaly si
     sedět a banner se štítkem lezl o kus vedle zbytku stránky. */
  --intro-inset: 3rem;
  /* Čtecí šířka. Rámec je široký přes celý monitor, ale řádek textu přes
     1440 px nikdo nepřečte — oko na konci řádku netrefí začátek dalšího.
     Dlouhý text a políčka průvodce proto zůstávají uvnitř téhle míry;
     je to původní šířka celé stránky, na kterou byly texty psané. */
  --text-width: 920px;

  --chip-size: .74rem;
  /* 600 je u Segoe UI skutečný řez Semibold, ne uměle ztučněný text. Na 800
     byla hlavička samý tučný nápis a splývala v jednu tmavou kaši. Neuvádí se
     jménem rodiny, ale vahou — na Macu a v Androidu se tak vezme jejich
     vlastní polotučný řez a hlavička vypadá stejně i tam. */
  --chip-weight: 600;
  --chip-spacing: .02em;
}

* { box-sizing: border-box; }

/* Sloupec přes celou výšku okna — patička se tak drží dole a na úvodní
   obrazovce nevznikne rolování jen kvůli ní. */
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
body.viewer-open { overflow: hidden; }

/* Testovací pruh přes celou hlavu stránky je pryč. Testovací režim samotný
   zůstal — pozná se podle označení v předmětu a těle objednávky. */

/* SVISLA OSA STRANKY — jedno misto, odkud ji berou vsechny hlavni bloky.

   Roman 29. 8. 2026: "kdyz mame pod sebou tri ramecky, pokazde je kazdej jinak
   od kraje." Bylo to tim, ze si ctyri bloky tentyz vypocet opisovaly samy.
   Dokud je vzorec na jednom miste, posune se snurka vsem najednou.

   Blok pres celou sirku okna sem nepatri — ten srovna obsah do osy tim, ze
   si da po stranach polovinu okraje (var(--intro-inset) / 2), protoze osa
   je zapsana jako "cela sirka minus okraj" a ten se deli na obe strany.

   Hlida to tools/osa-symetrie.js. */
.wrap,
.service-benefits,
.ean-banner,
.service-contact { width: min(var(--intro-width), 100% - var(--intro-inset)); }
.wrap { margin-inline: auto; }

/* ---------- hlavička ---------- */

/* Hlavička je tmavá podle firemního banneru — černá plocha, bílý text,
   jedna červená. Zbytek stránky zůstává bílý kvůli čitelnosti dlouhých
   seznamů dílů. */
.site-header {
  background: var(--header-bg);
  border-bottom: 3px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
}
.brand { display: flex; align-items: center; gap: .6rem; }

/* Banner má vlastní černé pozadí a červený rám, takže navazuje na tmavou
   hlavičku bez šva. */
.masthead { background: var(--header-bg); padding: clamp(.4rem, 1.4vh, .9rem) 0; }
.masthead[hidden] { display: none; }
.masthead-home {
  display: flex; justify-content: center; width: 100%;
  border: 0; padding: 0; background: none;
  cursor: pointer;
}
/* Výška banneru se odvíjí od okna — na nízkém displeji nesmí ukrojit půl
   obrazovky, na velkém může být v plné parádě. */
.masthead-home img {
  display: block;
  width: auto; max-width: 100%;
  height: auto; max-height: clamp(58px, 15vh, 150px);
}

.header-label {
  color: rgba(255, 255, 255, .7);
  font-size: .86rem;
  letter-spacing: .04em;
}

/* Na mobilu a menším tabletu se okraj zúží. 48 px po stranách je na širokém
   monitoru správný odstup, ale na telefonu širokém 360 px by ukrojilo osminu
   obrazovky — text by se lámal po třech slovech. Půjčovna má na téhle hranici
   30 px, tak je má i tahle stránka; obě se pak zužují stejně.

   Šňůrka se přitom neruší, jen se posouvá: obsah dál drží jednu osu, jen
   blíž ke kraji. */
@media (max-width: 760px) {
  :root { --intro-inset: 30px; }
}

@media (max-width: 640px) {
  .masthead { padding: .5rem 0 .4rem; }
  .header-label { font-size: .8rem; }
}
.brand-logo { height: 26px; width: auto; display: block; }
.brand-weber {
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: .82rem;
  padding: .2rem .55rem;
  border-radius: 4px;
}

.cart-button {
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: .45rem .95rem;
  font: inherit; font-size: .9rem;
  cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  white-space: nowrap;
}
.cart-button:hover { border-color: var(--accent); background: var(--accent); }
.cart-count {
  background: var(--accent); color: #fff;
  border-radius: 999px;
  min-width: 1.4rem; padding: 0 .4rem;
  font-size: .8rem; font-weight: 700;
  text-align: center;
}

/* ---------- postup ---------- */

.steps {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 1.6rem 0 1rem; padding: 0;
  font-size: .82rem; color: var(--ink-soft);
}
.steps li {
  padding: .3rem .85rem;
  border-radius: 999px;
  background: #f2f2f2;
  transition: background .2s, color .2s;
}
.steps li[data-state="done"] { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.steps li[data-state="done"]::before { content: "✓ "; }
.steps li[data-state="current"] {
  background: var(--accent);
  color: #fff; font-weight: 700;
}

/* ---------- panely ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem;
  margin-bottom: 2.5rem;
}

/* ---------- úvodní obrazovka ---------- */

/* Úvod se musí vejít na obrazovku bez rolování — proto se odsazení odvíjí
   od výšky okna, ne od pevných hodnot. Na nízkých displejích se samo stáhne. */
.hero {
  padding: clamp(1rem, 4vh, 2.6rem) 0 clamp(.8rem, 3vh, 1.6rem);
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.5rem, 4.2vw, 2.5rem);
  letter-spacing: -.02em;
  margin: 0 0 .3rem;
}
.hero-lead {
  color: var(--ink-soft);
  font-size: clamp(.95rem, 1.6vw, 1.08rem);
  margin: 0 0 clamp(.9rem, 3vh, 1.7rem);
}


/* ---------- čtecí šířka ----------

   Rámec stránky je široký přes celý monitor (--intro-width), ale text ne.
   Řádek přes 1440 px se nedá číst: oko na konci řádku netrefí začátek toho
   dalšího. Nadpis a podtitul úvodu proto zůstávají uvnitř čtecí míry
   a drží se na střed, stejně jako políčko hledání pod nimi.

   Roman 29. 8. 2026: sjednotit šířku „vždy na celou plochu monitoru" —
   plochu zabírá rámec, ne řádek textu. */
.hero h1,
.hero-lead {
  max-width: var(--text-width);
  margin-inline: auto;
}

.hero-search { max-width: 640px; margin: 0 auto; }
.hero-search input {
  width: 100%;
  font: inherit; font-size: 1.1rem;
  padding: clamp(.7rem, 1.6vh, 1rem) 1.3rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  text-align: center;
}
.hero-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.hero-results { max-width: 640px; margin: 1rem auto 0; text-align: left; }
.hero-results:empty { margin: 0; }

.hero-alt { margin: clamp(1rem, 3.5vh, 2rem) 0 0; color: var(--ink-soft); }
.link-button.big {
  font-size: 1.02rem; font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}

.hero-foot {
  margin: clamp(1rem, 3vh, 2rem) 0 0;
  display: flex; justify-content: center; align-items: center;
  gap: .7rem; flex-wrap: wrap;
  font-size: .88rem; color: var(--ink-soft);
}
.hero-or { color: var(--ink-soft); margin: 0 .3rem; }

/* ---------- výrobní štítek ---------- */

.serial-form {
  display: flex; flex-wrap: wrap; align-items: end; gap: .8rem;
  margin-bottom: 1rem;
}
.serial-form .field { flex: 0 0 auto; }
.serial-form select { min-width: 6rem; font-size: 1.1rem; font-weight: 700; }
.serial-form input { min-width: 12rem; font-size: 1.1rem; letter-spacing: .06em; }
.serial-form .primary { flex: 0 0 auto; }

.serial-state {
  margin: 0 0 1.2rem;
  padding: .8rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-bg);
  font-size: .92rem;
}
.serial-state[data-kind="ok"] { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.serial-state[data-kind="error"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
/* Gril jsme poznali, jen ho neprodáváme — to není chyba zákazníka, tak ať
   to ani nevypadá jako chyba. */
.serial-state[data-kind="warn"] { border-color: #e8a33d; background: #fff8ec; color: #7a4d05; }

.serial-help { font-size: .88rem; color: var(--ink-soft); }
.serial-help summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.serial-help ul { margin: .7rem 0; padding-left: 1.2rem; }
.serial-help li { margin-bottom: .3rem; }

.hero-hint {
  max-width: 560px;
  margin: clamp(.8rem, 2.5vh, 1.4rem) auto 0 !important;
}

body[data-screen="intro"] .masthead .wrap { width: auto; }
body[data-screen="intro"] .masthead-home { justify-content: flex-start; }
body[data-screen="intro"] .masthead-home img { max-height: 68px; }

/* ---------- profesionální servisní úvod ---------- */

body[data-screen="intro"] #main { width: 100%; max-width: none; }
body[data-screen="intro"] .steps {
  display: flex;
  flex-wrap: nowrap;
  width: auto;
  margin: 0;
  padding: 0;
  gap: .45rem;
  background: transparent;
  color: #161719;
}
body[data-screen="intro"] .steps li {
  min-width: 82px;
  padding: .28rem .55rem;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #fff;
  color: #161719;
  font-size: var(--chip-size);
  font-weight: var(--chip-weight);
  letter-spacing: var(--chip-spacing);
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
  cursor: pointer;
}
body[data-screen="intro"] .steps li:hover { border-color: #d9362d; background: #d9362d; color: #fff; }
body[data-screen="intro"] .steps li:focus-visible { outline: 3px solid #d9362d; outline-offset: 3px; }
body[data-screen="intro"] .steps li[data-state="current"] {
  border-color: #d9362d;
  background: #d9362d;
  color: #fff;
}
body[data-screen="intro"] .steps li:first-child {
  border-color: #d9362d;
  background: #d9362d;
  color: #fff;
}
body[data-screen="intro"] .steps li[data-state="done"] {
  border-color: #fff;
  background: #fff;
  color: #161719;
}
/* Červený je vždycky jen jeden krok. Při najetí myší si červenou vezme
   ten pod kurzorem a dosud zvýrazněný zbělá — je hned vidět, kam kliknu. */
body[data-screen="intro"] .steps:hover li[data-state="current"]:not(:hover),
body[data-screen="intro"] .steps:hover li:first-child:not(:hover) {
  border-color: #fff;
  background: #fff;
  color: #161719;
}
.service-nav .header-phone {
  display: inline-block;
  flex: 0 0 auto;
  margin-left: .7rem;
  color: #ef493f;
  font-size: var(--chip-size);
  font-weight: var(--chip-weight);
  letter-spacing: var(--chip-spacing);
  text-decoration: none;
  white-space: nowrap;
}
.service-nav { display: flex; align-items: flex-end; }
.service-nav .header-phone:hover,
.service-nav .header-phone:focus-visible { color: #ff7168; text-decoration: underline; }
.service-home {
  padding: 0;
  overflow: hidden;
  text-align: left;
}
.service-top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1.1rem;
  padding: .55rem max(calc(var(--intro-inset) / 2), calc((100% - var(--intro-width)) / 2)) 0;
  background:
    linear-gradient(90deg, rgba(7, 8, 9, .94) 0%, rgba(7, 8, 9, .82) 48%, rgba(7, 8, 9, .48) 100%),
    url("assets/weber/vecer-genesis.jpg") center 56%/cover no-repeat;
  background-color: #070809;
}
body[data-screen="intro"] .masthead { background: transparent; }
.service-top > .masthead { padding: 0; }
.service-top > .service-nav { align-self: center; }
.service-hero {
  grid-column: 1 / -1;
  min-height: 0;
  background: transparent;
  color: #fff;
}
.service-hero-inner {
  width: 100%;
  margin: 0 auto;
  padding: 8px 0 14px;
}
.service-eyebrow {
  margin: 0 0 .25rem;
  color: #df3b31;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.service-eyebrow { display: none; }
.service-home .service-hero h1 {
  max-width: 540px;
  margin: 0 0 .25rem;
  color: #fff;
  font-size: clamp(2.25rem, 3.7vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.service-lead { margin: 0 0 .75rem; color: #eee; font-size: .92rem; line-height: 1.45; }
.service-trust { display: flex; width: min(720px, 100%); max-width: none; margin: 1.15rem 0 0; }
.service-trust > div {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding: 0 1rem;
  border-right: 1px solid rgba(255, 255, 255, .22);
}
.service-trust > div:first-child { padding-left: 0; }
.service-trust > div:last-child { border-right: 0; }
.service-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid #d8342b;
  border-radius: 50%;
  color: #e3453c;
  font-size: 1.15rem;
}
.service-trust p { margin: 0; line-height: 1.25; }
.service-trust b, .service-trust small { display: block; }
.service-trust b { font-size: .77rem; white-space: nowrap; }
.service-trust small { margin-top: .2rem; color: #ddd; font-size: .68rem; white-space: nowrap; }
/* Každé tlačítko široké přesně na svůj nápis.

   Stejně široká tlačítka znamenala, že u krátkých nápisů zbývalo uvnitř
   rámečku prázdné místo — „Hledat díly" plavalo ve stejně velkém rámečku
   jako „Pokud nemáte gril". Teď se rámeček k písmenům přimkne a začíná
   i končí s nimi. */
.service-actions {
  display: flex;
  flex-wrap: wrap;
  /* Stejná šířka jako pole pro hledání nad nimi — řada tlačítek pak začíná
     i končí přesně s ním a hlavička drží jednu svislici. */
  width: var(--pole-sirka);
  gap: .5rem;
  margin-top: 1rem;
}
.service-button {
  display: flex;
  box-sizing: border-box;
  /* Roztáhnou se tak, aby řada přesně vyplnila šířku pole nad nimi. Poměry
     mezi nimi zůstanou podle délky nápisu, takže krátký nápis nedostane
     stejně velký rámeček jako dlouhý. */
  flex: 1 1 auto;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: .3rem .55rem;
  border: 2px solid #d54338;
  border-radius: 10px;
  background: #08090a;
  color: #fff;
  font: inherit;
  font-size: var(--chip-size);
  font-weight: var(--chip-weight);
  letter-spacing: var(--chip-spacing);
  line-height: 1.15;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.primary-service, .secondary-service, .service-shop-link { background: #08090a; }
.service-button:hover,
.service-button:focus-visible {
  border-color: #ef5146;
  background: #c9342b;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.service-button span { font-size: 1.25rem; }
.service-search-label {
  display: block; margin: 0 0 .4rem; color: #fff;
  font-size: var(--chip-size);
  font-weight: var(--chip-weight);
  letter-spacing: var(--chip-spacing);
  text-transform: uppercase;
}
.service-search { position: relative; width: var(--pole-sirka); }
.service-search input {
  width: 100%;
  min-height: 42px;
  padding: .62rem 3.2rem .62rem 1rem;
  border: 2px solid #d54338;
  border-radius: 10px;
  background: #fff;
  color: #171719;
  font: inherit;
  font-size: .86rem;
}
.service-search input::placeholder { color: #777; }
.service-search input:focus { outline: 2px solid #d83c32; outline-offset: 2px; }
.service-search > span { position: absolute; top: .12rem; right: 1rem; color: #d9362d; font-size: 1.65rem; }
/* Nabídka pod polem musí být stejně široká jako pole samo — 560 px tu
   zbylo z doby, kdy bylo užší i hledání, a okno pak působilo useknutě. */
.service-home .hero-results { max-width: var(--pole-sirka); margin: .4rem 0 0; color: #171717; }

.service-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(var(--intro-width), 100% - var(--intro-inset));
  margin: 0 auto;
  padding: 1.35rem 0;
}
.service-benefits article { display: flex; align-items: center; gap: .8rem; padding: 0 1.7rem; border-right: 1px solid #ddd; }
.service-benefits article:first-child { padding-left: 0; }
.service-benefits article:last-child { border-right: 0; padding-right: 0; }
.service-benefits article > span { color: #d83930; font-size: 2rem; line-height: 1; }
.service-benefits p { margin: 0; line-height: 1.25; }
.service-benefits b, .service-benefits small { display: block; }
.service-benefits b { font-size: .83rem; }
.service-benefits small { margin-top: .25rem; color: #555; font-size: .72rem; }

.ean-banner { margin: 1.4rem auto 0; }
.ean-banner button {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(220px, 42%) 1fr;
  align-items: center;
  gap: 1.4rem;
  overflow: hidden;
  padding: 0;
  border: 2px solid #d63a31;
  border-radius: 12px;
  background: #fff;
  color: #171719;
  text-align: left;
  cursor: zoom-in;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.ean-banner img { display: block; width: 100%; height: 130px; object-fit: cover; object-position: top center; }
.ean-banner span { padding-right: 1.5rem; }
.ean-banner strong, .ean-banner small { display: block; }
.ean-banner strong { font-size: 1.25rem; }
.ean-banner small { margin-top: .35rem; color: #666; }
.service-contact .ean-banner { grid-column: 2; grid-row: 1; width: 100%; height: 100%; margin: 0; }
.service-contact .ean-banner button { height: 160px; display: block; overflow: hidden; border-width: 0 0 0 1px; border-color: #ddd; border-radius: 0; box-shadow: none; }
.service-contact .ean-banner img { width: 100%; height: 160px; min-height: 0; object-fit: cover; object-position: top center; }

.ean-dialog { width: min(1180px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 14px; background: #fff; color: #171719; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
.ean-dialog::backdrop { background: rgba(0, 0, 0, .82); }
.ean-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 2px solid #d63a31; }
.ean-dialog-bar strong, .ean-dialog-bar small { display: block; }
.ean-dialog-bar small { margin-top: .15rem; color: #666; }
.ean-dialog-bar button { width: 42px; height: 42px; border: 0; border-radius: 8px; background: #c9342b; color: #fff; font-size: 1.15rem; cursor: pointer; }
.ean-dialog-content { max-height: calc(100vh - 7rem); overflow: auto; padding: 1rem; }
.ean-dialog-content img { display: block; width: 100%; height: auto; }
.ean-dialog-content p { margin: 1rem auto .25rem; max-width: 920px; color: #444; line-height: 1.55; }

.service-process { border-top: 1px solid #e7e7e7; padding: 1.1rem calc(var(--intro-inset) / 2) 1.8rem; }
.service-process h2 { margin: 0 0 1.25rem; text-align: center; font-size: 1.3rem; text-transform: uppercase; }
.service-process h2::after { content: ""; display: block; width: 34px; height: 2px; margin: .45rem auto 0; background: #d9362d; }
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(var(--intro-width), 100%); margin: 0 auto; }
.process-grid > * {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  align-items: start;
  border: 0;
  padding: .25rem .7rem;
  background: transparent;
  color: #171717;
  font: inherit;
  text-align: left;
}
.process-grid > *:first-child { padding-left: 0; }
.process-grid > *:last-child { padding-right: 0; }
.process-grid button { cursor: pointer; }
.process-grid button:hover b { color: #c93229; }
.process-grid > *:not(:last-child)::after { content: "›"; position: absolute; top: 50%; right: -.2rem; transform: translateY(-50%); color: #ccc; font-size: 1.7rem; }
.process-grid em { color: #e8e8e8; font: 800 clamp(2.4rem, 2.4vw, 3.2rem)/1 sans-serif; }
.process-icon { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid #ddd; border-radius: 50%; color: #d9362d; font-size: 1.5rem; }
.process-grid b, .process-grid small { display: block; }
.process-grid b { min-height: 3.2em; font-size: .78rem; text-transform: uppercase; text-wrap: balance; }
.process-grid small { margin-top: .3rem; color: #555; font-size: .7rem; line-height: 1.4; white-space: normal; }

.service-contact {
  display: grid;
  grid-template-columns: .52fr 2.48fr;
  align-items: center;
  width: min(var(--intro-width), 100% - var(--intro-inset));
  min-height: 170px;
  margin: 0 auto 2rem;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: linear-gradient(90deg, #fff, #f5f5f5);
}
.contact-intro { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .1rem; height: 160px; padding: .1rem 1rem .3rem; border-right: 1px solid #ddd; }
.contact-mark { color: #c9342b; font-size: 4.3rem; line-height: 1; }
.contact-logo { flex: 0 0 auto; width: 112px; height: 112px; object-fit: contain; }
.contact-email { color: #b92f27; font-size: .78rem; font-weight: 750; text-decoration: none; }
.contact-intro h2 { margin: 0; font-size: 1.35rem; }
.contact-intro p { margin: .1rem 0 .8rem; font-size: .8rem; }
.contact-intro a { display: flex; min-width: 160px; justify-content: center; align-items: center; padding: .52rem .8rem; border: 2px solid #0c0d0f; border-radius: 10px; background: #0c0d0f; color: #fff; font-size: .66rem; font-weight: 750; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.contact-intro a:hover, .contact-intro a:focus-visible { border-color: #d54338; background: #c9342b; transform: translateY(-1px); }
.contact-details { grid-column: 1; grid-row: 2; padding: .7rem 2rem 1.2rem; border-right: 1px solid #ddd; }
.contact-details p { display: grid; grid-template-columns: auto 1fr; gap: 0 .75rem; margin: .7rem 0; font-size: .8rem; }
.contact-details p > span { grid-row: 1 / 3; font-size: 1.5rem; }
.contact-details b, .contact-details small { display: block; }
.contact-details small { color: #555; }
.service-contact > img { width: 100%; height: 170px; object-fit: cover; object-position: center; }
.service-catalog-size { margin: -1.2rem auto 2rem; color: #777; font-size: .72rem; text-align: center; }

@media (max-width: 1000px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0; }
  /* Ve dvou sloupcích se nadpisy vejdou na řádek, místo na zalomení už
     držet nemusí — jinak by pod nimi zbyla zbytečná mezera. */
  .process-grid b { min-height: 0; }
  .process-grid > *:nth-child(2)::after { display: none; }
}
@media (max-width: 900px) {
  body[data-screen="intro"] .masthead-home img { max-height: 64px; }
  body[data-screen="intro"] .steps li { min-width: 82px; }
  .service-hero { background-position: 58% center; }
  .service-trust { width: min(660px, 100%); }
  .service-trust b, .service-trust small { white-space: normal; }
  .service-benefits { grid-template-columns: repeat(2, 1fr); gap: 1rem 0; }
  .service-benefits article:nth-child(2) { border-right: 0; }
  .service-contact { grid-template-columns: 1fr 1fr; }
  .contact-intro { grid-column: 1 / -1; grid-row: 1; }
  .service-contact > img { display: none; }
  .service-contact .ean-banner { grid-column: 1 / -1; grid-row: 2; }
  .service-contact .ean-banner button { border-width: 1px 0 0; }
}
@media (max-width: 620px) {
  .service-top { display: block; padding: .75rem 1rem 0; }
  body[data-screen="intro"] .masthead-home img { max-height: 58px; }
  body[data-screen="intro"] .steps {
    margin-top: .7rem;
    padding: 0 0 .35rem;
    gap: .4rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body[data-screen="intro"] .steps::-webkit-scrollbar { display: none; }
  body[data-screen="intro"] .steps li { min-width: max-content; padding: .45rem .85rem; }
  .service-hero {
    min-height: 0;
    background: transparent;
  }
  .service-top {
    background:
      linear-gradient(rgba(7, 8, 9, .86), rgba(7, 8, 9, .72)),
      url("assets/weber/vecer-genesis.jpg") center 56%/cover no-repeat;
    background-color: #070809;
  }
  .service-hero-inner { width: 100%; padding: 1.5rem 0; }
  .service-home .service-hero h1 {
    max-width: 100%;
    font-size: clamp(2rem, 10vw, 2.55rem);
    overflow-wrap: anywhere;
  }
  .service-search-label { max-width: 100%; line-height: 1.35; overflow-wrap: anywhere; }
  .service-lead br { display: none; }
  .service-trust { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  .service-trust > div { padding: 0; border: 0; }
  /* Tlačítka tu dřív stála pod sebou, jenže vedle nich byla mřížka a tahle
     dvě pravidla se vůbec neuplatnila. Skládání na úzkém displeji řeší
     pravidlo pro 640 px níž — dvě na řádek, ne čtyři pod sebou. */
  .service-benefits { grid-template-columns: 1fr; width: min(100% - 2rem, 520px); }
  .service-benefits article { padding: .65rem 0; border-right: 0; border-bottom: 1px solid #ddd; }
  .service-benefits article:last-child { border-bottom: 0; }
  .ean-banner { width: min(100% - 2rem, 520px); }
  .ean-banner button { grid-template-columns: 1fr; gap: 0; }
  .ean-banner img { height: 150px; }
  .ean-banner span { padding: 1rem; }
  .ean-dialog { width: calc(100% - 1rem); max-height: calc(100vh - 1rem); }
  .ean-dialog-content { padding: .5rem; }
  .service-process { padding-inline: 1rem; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid > * { padding: .45rem 0; }
  .process-grid > *::after { display: none; }
  .process-grid b, .process-grid small { white-space: normal; }
  .service-contact { grid-template-columns: 1fr; width: min(100% - 2rem, 520px); }
  .contact-intro { grid-column: 1; grid-row: 1; border-right: 0; border-bottom: 1px solid #ddd; padding: 1.2rem; }
  .service-contact .ean-banner { grid-column: 1; grid-row: 2; }
  .contact-logo { width: 140px; height: 140px; }
}
@media (min-width: 640px) { .panel { padding: 2rem 2.2rem; } }

h1 { font-size: 1.6rem; margin: 0 0 .5rem; line-height: 1.25; }
h2 { font-size: 1.28rem; margin: 0 0 .5rem; line-height: 1.3; }
h3 { font-size: 1.05rem; margin: 2rem 0 .8rem; }
.lead { color: var(--ink-soft); margin: 0 0 1.6rem; }
.question-help { color: var(--ink-soft); font-size: .92rem; margin: 0 0 1.2rem; }
.hint { color: var(--ink-soft); font-size: .86rem; margin: 1.4rem 0 0; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem; color: var(--ink-soft); font-weight: 600;
}

.back {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-bottom: 1rem;
  padding: .4rem .8rem;
  border: 2px solid #c9342b;
  border-radius: 10px;
  background: #fff;
  color: #b92f27;
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.back::before { content: "← "; }
.back:hover,
.back:focus-visible { background: #c9342b; color: #fff; transform: translateY(-1px); }

.link-button {
  background: none; border: 0; padding: 0;
  color: var(--accent); font: inherit; font-size: .88rem;
  text-decoration: underline; cursor: pointer;
}

/* ---------- volby ---------- */

.choice-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.choice-card {
  text-align: left;
  display: grid; gap: .35rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  font: inherit; cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.choice-card:hover {
  border-color: var(--flame);
  transform: translateY(-3px) rotate(-.4deg);
  box-shadow: var(--shadow-lift);
}
.choice-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(140deg, #ffd9b8, #ffc0c8);
  color: var(--accent-dark);
  font-size: 1.3rem; font-weight: 800;
  margin-bottom: .5rem;
}
.choice-title { font-weight: 600; }
.choice-sub { color: var(--ink-soft); font-size: .88rem; }

.option-grid {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.option {
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 13px;
  padding: .9rem 1.05rem;
  font: inherit; cursor: pointer;
  display: grid; gap: .15rem;
  transition: border-color .15s, background .15s, transform .15s;
}
.option:hover {
  border-color: var(--ink);
  background: var(--panel-bg);
}
.option-label { font-weight: 650; }
.option-note { color: var(--ink-soft); font-size: .82rem; }

/* Kategorie dílů — plná barva jako na předloze, ilustrace vlevo, šipka vpravo.
   Barvu nese --cat a nastavuje ji skript podle kategorie. */
.option-category {
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon label arrow"
    "icon note  arrow";
  gap: .1rem 1.1rem;
  align-items: center;
  padding: 0 1.1rem 0 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--cat);
  color: #16120e;
  min-height: 118px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .10), 0 8px 20px rgba(0, 0, 0, .10);
}
.option-category:hover {
  background: var(--cat);
  filter: brightness(1.06);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .14), 0 16px 34px rgba(0, 0, 0, .16);
}

.option-category .option-illustration {
  grid-area: icon;
  width: 118px;
  height: 100%;
  object-fit: cover;
  display: block;
}
.option-category .option-icon {
  grid-area: icon;
  width: 118px; align-self: stretch;
  display: grid; place-items: center;
  font-size: 2.6rem;
}
.option-category .option-label {
  grid-area: label;
  font-size: 1.06rem; font-weight: 800;
  line-height: 1.25;
}
.option-category .option-note {
  grid-area: note;
  color: rgba(22, 18, 14, .78);
  font-size: .92rem; font-weight: 600;
}

/* Kolečko se šipkou — tmavší odstín téže barvy, ať drží pohromadě s dlaždicí. */
.option-arrow {
  grid-area: arrow;
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cat) 72%, #000);
  color: #fff;
  font-size: 1.15rem; font-weight: 700;
  transition: transform .15s;
}
.option-category:hover .option-arrow { transform: translateX(3px); }

/* Na počítači jsou vždy tři kategorie v řádku. Rozměry obsahu jsou o něco
   úspornější, aby zůstaly dobře čitelné i v užším třetinovém sloupci. */
#categoryOptions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}
#categoryOptions .option-category {
  position: relative;
  grid-template-columns: 54% minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas: "icon label" "icon note";
  gap: .2rem .75rem;
  padding: 0 .75rem 0 0;
  min-height: 150px;
  border: 2px solid color-mix(in srgb, var(--cat) 70%, #111);
  border-radius: 16px;
}
#categoryOptions .option-illustration,
#categoryOptions .option-icon { width: 100%; }
#categoryOptions .option-illustration {
  align-self: stretch;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--cat);
  filter: none;
  -webkit-mask-image: linear-gradient(to right, #000 0 90%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0 90%, transparent 100%);
}
#categoryOptions .option-label {
  align-self: center;
  padding-top: .7rem;
  font-size: .94rem;
  line-height: 1.2;
}
#categoryOptions .option-note {
  align-self: end;
  padding: 0 2.7rem .75rem 0;
  font-size: .84rem;
}
#categoryOptions .option-arrow {
  position: absolute;
  right: .65rem; bottom: .6rem;
  width: 36px; height: 36px;
  border: 2px solid color-mix(in srgb, var(--cat) 58%, #111);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--cat) 50%, #111);
}

@media (max-width: 780px) {
  #categoryOptions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  #categoryOptions { grid-template-columns: 1fr; }
  #categoryOptions .option-category {
    grid-template-columns: 48% minmax(0, 1fr);
    min-height: 142px;
  }
  #categoryOptions .option-illustration,
  #categoryOptions .option-icon { width: 100%; }
}

.narrowing {
  margin: 1.3rem 0 0;
  font-size: .85rem; color: var(--ink-soft);
}

/* ---------- hledání ---------- */

.search {
  width: 100%;
  padding: .8rem 1rem;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfaf9;
}
.search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.result-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.result-list li { border-bottom: 1px solid var(--line); }

/* Dlouhý seznam se roluje uvnitř rámečku — nic se neskrývá, jen se to vejde
   na obrazovku. */
.result-list.scrollable {
  max-height: 58vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 .9rem;
  background: var(--surface);
}
.result-count {
  position: sticky; top: 0;
  background: var(--surface);
  padding: .7rem 0 .5rem;
  font-size: .84rem; font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line) !important;
}
.result-list button {
  width: 100%; text-align: left;
  background: none; border: 0;
  padding: .75rem .2rem;
  font: inherit; cursor: pointer;
  display: flex; justify-content: space-between; gap: 1rem;
}
.result-list button:hover { color: var(--accent); }
.result-list .rid { color: var(--ink-soft); font-size: .85rem; font-variant-numeric: tabular-nums; }

/* Výsledky hlavního vyhledávání musí zůstat čitelné na tmavém hero pozadí. */
.service-home .hero-results.result-list {
  width: var(--pole-sirka);
  max-height: 260px;
  margin: .45rem 0 0;
  padding: 0 .9rem;
  overflow-y: auto;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: #fff;
  color: #171717;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .38);
}
.service-home .hero-results.result-list:empty { display: none; }
.service-home .hero-results.result-list li:last-child { border-bottom: 0; }
.service-home .hero-results .question-help { color: #555; }
.service-home .hero-results button { color: #171717; }
.service-home .hero-results button:hover { color: #b92f27; }

/* ---------- potvrzení modelu ---------- */

/* Podle výkresu zákazník pozná, že je to opravdu jeho gril — proto je
   uprostřed a co největší. Popis modelu stojí nad ním, ne vedle. */
.model-confirm {
  display: grid; gap: .9rem;
  justify-items: center;
  text-align: center;
}
.model-confirm-text { max-width: 44rem; }
.model-meta { color: var(--ink-soft); font-size: .9rem; margin: .2rem 0 0; }

/* Návody ke grilu — drobný řádek pod údaji o modelu. Schválně nenápadný:
   zákazník sem přišel pro díl, návod je bonus a nesmí přebít cestu k dílu.
   Odkazy se zalomí do dalšího řádku, aby na úzkém okně nic nepřetékalo. */
.model-manuals {
  color: var(--ink-soft);
  font-size: .85rem;
  margin: .35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .35rem;
  align-items: baseline;
}
.model-manuals a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.model-manuals a:hover { color: var(--brand, #c0392b); }

/* Nahoře nic nezdržuje — hlavička obrazovky sedí těsně pod tlačítkem Zpět,
   ať je výkres vidět hned, bez rolování. */
#screen-problem { position: relative; padding-top: .75rem; }
#screen-problem .back {
  position: absolute;
  top: .75rem;
  left: 1.1rem;
  z-index: 2;
  margin: 0;
}
#screen-problem .model-confirm { gap: .55rem; }
#screen-problem .model-confirm-text .eyebrow { font-size: .8rem; }
#screen-problem .model-confirm-text h2 { margin: .15rem 0 .35rem; font-size: clamp(1.65rem, 3vw, 2.25rem); }
#screen-problem .model-meta { margin-top: 0; font-size: 1.05rem; }
.model-figure {
  width: 100%;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .6rem;
  background: #fbfaf9;
}
/* Tlačítko se lepí na obrázek, ať proužek „Zvětšit výkres" nekončí ve vzduchu
   vedle úzkého výkresu. */
.model-figure .figure-zoom { width: fit-content; max-width: 100%; margin-inline: auto; }
/* Šířka na celý panel, ale nikdy vyšší než obrazovka — u výkresu na výšku
   by jinak zbytek stránky spadl daleko pod okraj. */
.model-figure img,
.model-figure .figure-zoom img {
  width: auto; max-width: 100%;
  max-height: 76vh;
  height: auto; display: block;
  margin-inline: auto;
  mix-blend-mode: multiply;
}
.model-figure figcaption {
  font-size: .76rem; color: var(--ink-soft);
  text-align: center; margin-top: .4rem;
}

/* Barevná vrstva je součástí plochy výkresu. Čísla sedí v jeho prázdných
   bočních okrajích u vodicích čar, takže nezakrývají kresbu součástek. */
.model-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
/* --shift je odsazení do druhého sloupce. Když jsou dvě čísla ve výkresu
   blíž, než je kolečko vysoké, uhne to druhé stranou místo dolů — jinak by
   přestalo sedět na svém původním čísle. */
.model-hotspot {
  position: absolute;
  transform: translate(calc(-50% + var(--shift, 0px)), -50%);
  min-width: .92rem; height: .92rem;
  padding: 0 .16rem;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid #fff;
  background: var(--spot-color);
  color: #17130f;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .42);
  font-size: clamp(.42rem, .68vw, .54rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.model-color-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem .9rem;
  margin: .7rem .25rem .15rem;
}
.model-color-legend[hidden] { display: none; }
.model-legend-item {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--ink);
  font-size: .76rem; font-weight: 700;
}
.model-legend-item i {
  width: .85rem; height: .85rem;
  border-radius: 50%;
  background: var(--spot-color);
  border: 1px solid color-mix(in srgb, var(--spot-color) 72%, #000);
}

@media (max-width: 560px) {
  #screen-problem .back { position: static; margin-bottom: .45rem; }
  .model-hotspot {
    min-width: .78rem; height: .78rem;
    padding: 0 .1rem;
    border-width: 1px;
    font-size: .4rem;
  }
}

/* ---------- seznam dílů ---------- */

.part-list { list-style: none; margin: 0; padding: 0; }
.part-item {
  display: flex; align-items: center; gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}
.part-pos {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #f5f5f5;
  color: var(--ink);
  font: inherit;
  font-size: .86rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
button.part-pos {
  cursor: pointer;
  border-color: var(--ink);
  transition: background .15s, color .15s;
}
button.part-pos:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Výřez z výkresu — zákazník vidí, jak díl vypadá a kde na grilu sedí,
   aniž by musel hledat číslo v nákresu. */
.part-thumb {
  flex: none;
  position: relative;
  width: 72px; height: 72px;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--cat, var(--line)) 45%, #fff);
  border-radius: 8px;
  /* Barva kategorie podložená pod kresbu — bílá plocha se obarví,
     černé čáry zůstanou. */
  background-color: color-mix(in srgb, var(--cat, #fff) 26%, #fff);
  background-blend-mode: multiply;
  cursor: zoom-in;
  transition: border-color .15s, transform .15s;
}
/* Výkres je jemná šedá perokresba — po zmenšení šedne ještě víc. Přidaný
   kontrast vrátí čárám černou a plochám bílou, takže výřez působí čistě. */
.thumb-img {
  position: absolute; inset: 0;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-color: #fff;
  filter: grayscale(1) brightness(.75) contrast(2.4);
}
.part-thumb:hover { border-color: var(--cat, var(--accent)); transform: scale(1.04); }
.thumb-badge {
  position: absolute; left: -6px; top: -6px;
  min-width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--cat, var(--accent)); color: #fff;
  font-size: .74rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.part-body { flex: 1 1 auto; min-width: 0; }
.part-name { font-weight: 600; }
.part-sub { color: var(--ink-soft); font-size: .85rem; }
/* Původní anglický popis Weberu — drobně pod českým názvem, pro jistotu. */
.part-orig { color: #9a9a9a; font-size: .78rem; margin-bottom: .1rem; }
.part-sku { font-variant-numeric: tabular-nums; }

.add {
  flex: none;
  border: 1px solid var(--accent);
  background: var(--surface); color: var(--accent);
  border-radius: 999px;
  padding: .4rem 1rem;
  font: inherit; font-size: .86rem; font-weight: 600;
  cursor: pointer;
}
.add:hover { background: var(--accent); color: #fff; }
.add[data-added="true"] {
  border-color: var(--ok); color: var(--ok);
  background: #eef7f2;
}
.remove {
  flex: none;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: .4rem .9rem;
  font: inherit; font-size: .86rem; cursor: pointer;
  color: var(--ink-soft);
}
.remove:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- akce ---------- */

.summary-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.primary, .secondary {
  border-radius: 999px; padding: .65rem 1.5rem;
  font: inherit; font-weight: 600; cursor: pointer;
}
.primary {
  background: var(--accent);
  color: #fff; border: 1px solid var(--accent);
  transition: background .15s;
}
.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.primary:disabled { opacity: .4; cursor: not-allowed; }
.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.secondary:hover { border-color: var(--ink-soft); }

/* ---------- filtry ---------- */

.filter-grid {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 1rem;
}
.field { display: grid; gap: .25rem; font-size: .85rem; color: var(--ink-soft); }
.field span { font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf9;
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.field-inline { margin-bottom: 1rem; max-width: 320px; }

.filter-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 1rem 0 .4rem;
}
.filter-count { font-size: .88rem; color: var(--ink-soft); font-weight: 600; }

/* ---------- ceny ---------- */

.part-price {
  flex: none;
  min-width: 7.5rem;
  text-align: right;
  display: grid;
  gap: .05rem;
  font-variant-numeric: tabular-nums;
}
.price-czk { font-weight: 700; }
.price-eur { color: var(--ink-soft); font-size: .82rem; }
.part-price.price-unknown { font-weight: 400; color: var(--ink-soft); font-size: .88rem; }
.stock { color: var(--ok); font-size: .85rem; }

.qty {
  flex: none; width: 4rem;
  font: inherit; text-align: center;
  padding: .35rem .3rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fbfaf9;
}

.total-line {
  margin: 1.2rem 0 0;
  font-size: .92rem; color: var(--ink-soft);
  text-align: right;
}

/* Katalogové číslo je tlačítko — kliknutí díl objedná. */
button.part-sku {
  border: 0; background: none; padding: 0;
  font: inherit; font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
button.part-sku:hover { color: var(--accent-dark); }
button.part-sku.flash { animation: flash .6s ease; }
@keyframes flash {
  0%   { background: var(--accent); color: #fff; }
  100% { background: transparent; color: var(--accent); }
}

/* ---------- objednávka ---------- */

.form-error {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: .7rem .9rem;
  color: var(--accent-dark);
  font-size: .9rem;
  margin: 1rem 0 0;
}

.preview { margin-top: 1.8rem; font-size: .88rem; color: var(--ink-soft); }
.preview summary { cursor: pointer; }
.preview pre {
  margin-top: .8rem; padding: 1rem;
  background: #fbfaf9;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  font-size: .82rem; line-height: 1.5;
  white-space: pre-wrap;
}

button.brand {
  border: 0; background: none; padding: 0;
  font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: .6rem;
}

.catalog-size { font-weight: 600; color: var(--ink); }

.loading, .error { text-align: center; color: var(--ink-soft); padding: 2rem 0; }
.error { color: var(--accent); }

/* ---------- výřez sekce nad seznamem dílů ---------- */

/* Grafická hlavička otevřené kategorie: její ilustrace a výrazná barevná
   linka propojí dlaždici z předchozí obrazovky se seznamem dílů. */
.parts-category-visual {
  display: flex;
  align-items: center;
  width: 100%;
  margin: .35rem 0 1rem;
}
.parts-category-visual[hidden] { display: none; }
.parts-category-visual img {
  flex: none;
  width: 132px; height: 92px;
  display: block;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
  filter: saturate(1.16) contrast(1.07) brightness(1.04);
}
.parts-category-line {
  flex: 1 1 auto;
  height: 14px;
  margin-left: -2px;
  border-radius: 0 999px 999px 0;
  background: var(--cat, var(--accent));
  box-shadow: 0 2px 7px color-mix(in srgb, var(--cat, var(--accent)) 30%, transparent);
}
@media (max-width: 560px) {
  .parts-category-visual img { width: 96px; height: 72px; }
  .parts-category-line { height: 10px; }
}

/* Výřez držíme na šířce, na které se výkres nemusí zvětšovat — roztažený
   přes celý panel by byl jen rozmazaný. */
.section-view {
  width: min(100%, 760px);
  margin: 0 auto 1.4rem;
  border: 3px solid var(--cat, var(--line));
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
/* Barvu sekce nyní nese výrazná grafická linka nad nadpisem. */
/* Výkres je černá kresba na bílém — když se pod něj podloží barva kategorie
   a smíchá násobením, bílá plocha se obarví a čáry zůstanou černé. Zákazník
   tak vidí barvu té části grilu, kterou zrovna prohlíží. */
.section-image {
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  background-color: color-mix(in srgb, var(--cat, #fff) 34%, #fff);
  background-blend-mode: multiply;
}
.section-view figcaption {
  padding: .55rem .9rem;
  background: var(--panel-bg);
  border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-soft);
}
/* Puntík v nákresu = jeden díl ze seznamu. */
.section-dot {
  position: absolute;
  width: 20px; height: 20px;
  /* --shift uhne číslo do druhého sloupce, když se dvě nevejdou pod sebe. */
  margin: -10px 0 0 calc(-10px + var(--shift, 0px));
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--dot-color, var(--cat, var(--accent)));
  color: #17130f;
  font: inherit; font-size: .6rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: transform .15s, background .15s;
}
.section-dot:hover {
  transform: scale(1.2);
  background: color-mix(in srgb, var(--dot-color, var(--cat, var(--accent))) 82%, #fff);
}
/* Číslo dílu, který neprodáváme. Ve výkresu být musí, ale nemá se tvářit
   jako nabídka — proto bledé, bez stínu a nekliknutelné. */
.section-dot[data-offer="false"] {
  background: #fff;
  color: var(--ink-soft);
  border: 2px solid color-mix(in srgb, var(--dot-color, var(--line)) 45%, #fff);
  box-shadow: none;
  cursor: default;
}
.section-dot[data-offer="false"]:hover { transform: none; background: #fff; }
.section-dot[data-active="true"] {
  background: var(--dot-color, var(--cat, var(--accent)));
  transform: scale(1.35);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--dot-color, var(--cat, var(--accent))) 35%, transparent);
}

.part-item[data-active="true"] {
  background: var(--accent-soft);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 8px;
}

/* I tlačítko Zpět nese barvu otevřené kategorie — červené by v modré nebo
   žluté obrazovce bylo jediné cizí místo. Odstíny kategorií jsou pastelové,
   takže se na text ztmaví na 52 %: teprve tam projde i nejsvětlejší z nich,
   žlutá u vozíku, požadovaný kontrast 4,5:1 proti bílému pozadí.
   U „všech dílů modelu" žádná kategorie není a zůstává firemní červená. */
#screen-parts .back {
  border-color: color-mix(in srgb, var(--cat, #c9342b) 52%, #000);
  color: color-mix(in srgb, var(--cat, #c9342b) 52%, #000);
}
#screen-parts .back:hover,
#screen-parts .back:focus-visible {
  background: color-mix(in srgb, var(--cat, #c9342b) 52%, #000);
  color: #fff;
}

/* Číslo v seznamu používá vždy stejnou barvu jako karta, výkres a pruh. */
#screen-parts button.part-pos {
  border-color: var(--cat, var(--accent));
  background: var(--cat, var(--accent));
  color: #17130f;
}
#screen-parts button.part-pos:hover {
  border-color: var(--cat, var(--accent));
  background: color-mix(in srgb, var(--cat, var(--accent)) 82%, #fff);
  color: #17130f;
}

/* ---------- prohlížeč výkresu ---------- */

.figure-zoom {
  display: block; width: 100%;
  border: 0; padding: 0; background: none;
  cursor: zoom-in; position: relative;
  border-radius: 10px; overflow: hidden;
}
.figure-zoom img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.zoom-hint {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(36, 32, 28, .82));
  color: #fff; font-size: .82rem; font-weight: 600;
  padding: 1.6rem .6rem .5rem;
  opacity: 0; transition: opacity .18s;
}
.figure-zoom:hover .zoom-hint { opacity: 1; }

.viewer {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(28, 24, 20, .92);
  display: flex; flex-direction: column;
}
.viewer[hidden] { display: none; }

.viewer-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1.1rem;
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
.viewer-title { font-size: .92rem; display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; }
.viewer-part {
  background: var(--flame); color: #22190f;
  padding: .15rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 800;
}
.viewer-tools { display: flex; align-items: center; gap: .45rem; }
.viewer-tools button {
  background: rgba(255, 255, 255, .14);
  color: #fff; border: 0;
  border-radius: 9px;
  min-width: 2.3rem; height: 2.3rem;
  padding: 0 .8rem;
  font: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer;
}
.viewer-tools button:hover { background: rgba(255, 255, 255, .28); }
.viewer-tools #zoomLevel {
  color: #fff; font-size: .84rem; font-variant-numeric: tabular-nums;
  min-width: 3.6rem; text-align: center;
}
.viewer-close { background: var(--accent) !important; }

/* Plátno je absolutně ukotvené v levém horním rohu jeviště a posouvá se
   výhradně přes transform. Dřív bylo vycentrované gridem a zároveň
   transformované s origin 0 0 — při přiblížení pak obrázek utíkal z obrazovky. */
.viewer-stage {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.viewer-stage.grabbing { cursor: grabbing; }

.viewer-canvas {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
  /* Tažení vždy zachytí plocha prohlížeče, ne obrázek ani barevné číslo. */
  pointer-events: none;
}
.viewer-canvas img {
  display: block;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
}

/* Barevná posloupnost ve zvětšeném výkresu. Vrstva se transformuje společně
   s obrázkem, takže čísla zůstanou na místě při přiblížení i posouvání. */
.viewer-hotspots {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
}
.viewer-hotspot {
  position: absolute;
  transform: translate(calc(-50% + var(--shift, 0px)), -50%);
  min-width: 23px; height: 23px;
  padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--spot-color);
  color: #17130f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  font-size: 11px; font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Špendlík se ukáže jen tam, kde jsou zapsané souřadnice pozice. */
.marker {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(216, 31, 54, .34);
  animation: pulse 1.6s ease-out infinite;
  z-index: 3;
}
.marker::after {
  content: attr(data-label);
  position: absolute; left: 50%; top: -1.9rem;
  transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-size: .74rem; font-weight: 800;
  padding: .1rem .5rem; border-radius: 999px;
  white-space: nowrap;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 4px rgba(216, 31, 54, .40); }
  70%  { box-shadow: 0 0 0 18px rgba(216, 31, 54, 0); }
  100% { box-shadow: 0 0 0 4px rgba(216, 31, 54, 0); }
}

.viewer-help {
  margin: 0; padding: .7rem 1.1rem 1rem;
  color: rgba(255, 255, 255, .74);
  font-size: .84rem; text-align: center;
}

/* ---------- interní zákres pozic ---------- */

.hotspot-layout { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .hotspot-layout { grid-template-columns: 1fr 340px; } }

.hotspot-image {
  position: relative;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: crosshair;
  overflow: hidden;
}
.hotspot-image img { display: block; width: 100%; height: auto; user-select: none; }
.hotspot-image .marker { animation: none; cursor: default; }
.hotspot-image .marker[data-active="true"] { animation: pulse 1.6s ease-out infinite; }

.hotspot-list { max-height: 70vh; overflow-y: auto; }
.position-list { list-style: none; margin: .6rem 0 0; padding: 0; }
.position-row {
  display: flex; align-items: center; gap: .5rem;
  border-bottom: 1px solid var(--line);
  padding: .3rem 0;
}
.position-row[data-done="true"] { background: var(--ok-soft); }
.position-row[data-active="true"] { outline: 2px solid var(--accent); border-radius: 8px; }
.position-button {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: .7rem;
  background: none; border: 0; padding: .35rem;
  font: inherit; text-align: left; cursor: pointer;
  min-width: 0;
}
.position-text {
  font-size: .85rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- administrace ---------- */

.admin-tools { display: flex; gap: .5rem; align-items: center; }
.admin-tools a { text-decoration: none; }

.admin-stats {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 1.6rem;
}
.stat {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .9rem 1rem;
  display: grid; gap: .1rem;
  background: var(--panel-bg);
}
.stat strong { font-size: 1.5rem; line-height: 1.1; }
.stat span { font-size: .82rem; color: var(--ink-soft); }
.stat-warn { border-color: var(--accent); background: var(--accent-soft); }
.stat-warn strong { color: var(--accent); }

.table-scroll { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.admin-table th {
  text-align: left;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--line);
  padding: .5rem .6rem;
  white-space: nowrap;
}
.admin-table td {
  border-bottom: 1px solid var(--line);
  padding: .65rem .6rem;
  vertical-align: top;
}
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table tr[data-test="true"] { background: #fffdf2; }
.admin-table .contact a { color: var(--ink); text-decoration: none; font-size: .84rem; }
.admin-table .contact a:hover { color: var(--accent); text-decoration: underline; }

.test-tag {
  display: inline-block; margin-left: .4rem;
  background: #ffcf33; color: #1a1a1a;
  font-size: .64rem; font-weight: 800; letter-spacing: .08em;
  padding: .1rem .35rem; border-radius: 3px;
  vertical-align: middle;
}

.status-select {
  font: inherit; font-size: .82rem;
  padding: .3rem .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.status-select[data-status="nova"] { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.status-select[data-status="odeslana"] { border-color: var(--ok); color: var(--ok); }
.status-select[data-status="stornovana"] { color: var(--ink-soft); text-decoration: line-through; }

.detail-body { flex: 1 1 auto; overflow-y: auto; padding: 1.4rem 0 3rem; }
.detail-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.detail-actions a {
  text-decoration: none;
  border-radius: 999px; padding: .6rem 1.3rem;
  font-weight: 600; font-size: .9rem;
}
#detailText {
  background: #fff;
  border-radius: 10px;
  padding: 1.2rem;
  font-size: .82rem; line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
}

.site-footer {
  flex: none;
  border-top: 3px solid var(--accent);
  background: var(--header-bg);
  padding: clamp(.7rem, 2vh, 1.4rem) 0;
  color: rgba(255, 255, 255, .65);
  /* Stejně velké písmo jako na zbytku stránky. Drobným písmem se text
     v patičce četl hůř zrovna tam, kde stojí to podstatné — že objednávka
     je nezávazná. */
  font-size: 1rem;
}
.site-footer p { margin: 0; }
/* Na úvodní stránce jsou bloky nad patičkou širší než zbytek webu. Patička
   se jim musí srovnat, jinak jí text začíná o kus dál od kraje než všechno
   nad ní. Na ostatních obrazovkách zůstává užší šířka obsahu. */
body[data-screen="intro"] .site-footer .wrap { width: min(var(--intro-width), 100% - var(--intro-inset)); }
body[data-screen="intro"] .footer-topline { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
body[data-screen="intro"] .footer-links { flex-wrap: wrap; }
.footer-topline {
  display: grid;
  /* Název dostane přesně tolik místa, kolik potřebuje na jednu řádku —
     zlomený na dva řádky vypadal jako dva různé nadpisy. */
  grid-template-columns: max-content auto minmax(190px, .65fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer-brand {
  color: #fff;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .92rem;
  margin-bottom: .6rem !important;
}
.footer-topline .footer-brand { margin-bottom: 0 !important; white-space: nowrap; }
.footer-brand span { color: var(--accent); }
.footer-links { display: flex; align-items: center; gap: .65rem; }
.footer-links a {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 6px;
  padding: .65rem .9rem;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease;
}
.footer-links a:hover { border-color: var(--accent); background: var(--accent); }
.footer-bottomline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: .9rem;
}
.footer-author { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; flex: none; margin-top: 0; }
.footer-author > span { color: rgba(255,255,255,.55); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
/* Značka autora. Výška se drží nízko schválně — patička patří Weberu
   a grilcentru, tohle je jen podpis pod prací. */
.footer-author-logo {
  display: block;
  width: auto;
  height: 52px;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 1250px) {
  .footer-topline { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(.75rem, 1.5vw, 1.25rem); }
  .footer-topline .footer-brand { grid-column: auto; font-size: .78rem; letter-spacing: .12em; }
  .footer-links { flex-wrap: nowrap; gap: .5rem; }
  .footer-links a { padding: .55rem .7rem; font-size: .85rem; }
  .footer-author { min-width: 0; }
  .footer-author > span { font-size: .72rem; }
  .footer-author-logo { height: 46px; }
}
@media (max-width: 850px) {
  .footer-topline { grid-template-columns: 1fr; align-items: start; }
  .footer-topline .footer-brand { grid-column: auto; }
  .footer-links { flex-wrap: wrap; }
  /* Značka autora zůstává vpravo i na úzkém displeji — patří k okraji
     stránky, ne doprostřed textu. */
  .footer-bottomline { align-items: flex-end; }
  .footer-author { justify-content: flex-end; }
  /* Na úzkém displeji se na jednu řádku nevejde ani při nejlepší vůli. */
  .footer-topline .footer-brand { white-space: normal; }
}

/* Interní odkazy — dokud administrace nemá přihlášení, ať aspoň nevypadají
   jako součást nabídky pro zákazníka. */
.footer-admin { margin: 0 !important; font-size: .92rem; }
.footer-admin a { color: rgba(255, 255, 255, .8); }
.footer-admin span { color: rgba(255, 255, 255, .4); }
@media (max-width: 700px) {
  .footer-bottomline { flex-direction: column; align-items: stretch; }
  .footer-author { align-self: flex-end; }
}

.home-button {
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: .45rem 1rem;
  font: inherit; font-size: .88rem;
  cursor: pointer;
  white-space: nowrap;
  /* Na textových stránkách je to odkaz, ne tlačítko — nesmí se podtrhávat. */
  text-decoration: none;
  display: inline-block;
}
.home-button::before { content: "⌂ "; }
.home-button:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }

/* ------------------------------------------------ textové stránky (zásady) */
/* Delší souvislý text potřebuje užší sloupec a větší rozestupy než rozhraní
   průvodce — jinak se čte špatně a nikdo ho nedočte. */
.legal {
  max-width: 46rem;
  padding: 2rem 0 4rem;
  line-height: 1.65;
}
.legal h2 {
  margin: 2.2rem 0 .6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
}
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .45rem; }
.legal p { margin: 0 0 .9rem; }
.legal-date { margin-top: 2rem; color: var(--ink-soft); font-size: .9rem; }
.legal ol { padding-left: 1.2rem; }

/* Upozornění nahoře na právní stránce: dokud text neprošel schválením,
   musí to být vidět na první pohled, ne schované v patičce. */
.legal-note {
  margin: 1.2rem 0 1.8rem;
  padding: .9rem 1.1rem;
  border-left: 4px solid #c93e32;
  background: #fdf3f2;
  border-radius: 0 6px 6px 0;
  font-size: .95rem;
  line-height: 1.55;
}
.legal-note code { background: #fff; padding: .05rem .3rem; border-radius: 3px; }

/* Formulář na odstoupení se kopíruje do mailu, proto neproporcionálním
   písmem a s zachovanými mezerami — jinak by se tečkované řádky rozsypaly. */
.legal-form {
  margin: 1rem 0 1.4rem;
  padding: 1.1rem 1.2rem;
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .84rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Odkaz na zásady u odesílacího tlačítka. Musí být vidět, ale nesmí
   přebít samotné odeslání — proto drobným písmem pod tlačítky. */
.privacy-note {
  margin: .75rem 0 0;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* Nevratná akce v administraci. Musí být rozeznatelná od ostatních tlačítek
   dřív, než na ni obsluha klikne — ne až podle textu. */
.danger {
  border: 1px solid #c0392b;
  background: #fff;
  color: #c0392b;
  border-radius: 6px;
  padding: .55rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.danger:hover { background: #c0392b; color: #fff; }

/* Finální jednotný vzhled návratu ve všech pracovních obrazovkách.
   Selektor je záměrně na konci souboru, aby ho nepřepsaly styly katalogu. */
.panel > .back {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .4rem .8rem;
  border: 2px solid #c9342b;
  border-radius: 10px;
  background: #fff;
  color: #b92f27;
  font-size: .82rem;
  font-weight: 750;
  box-shadow: 0 3px 10px rgba(185, 47, 39, .1);
}
.panel > .back:hover,
.panel > .back:focus-visible {
  border-color: #c9342b;
  background: #c9342b;
  color: #fff;
  transform: translateY(-1px);
}

/* Upozornění, že objednávka je nezávazná poptávka. Musí být vidět dřív, než
   zákazník klikne — ne splynout s drobným textem kolem. Zároveň nesmí
   vypadat jako chyba, proto rámeček a ne červená. */
.order-notice {
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent, #d9362d);
  border-radius: 6px;
  background: #fafafa;
  font-size: .9rem;
  line-height: 1.55;
}

/* Vysvětlení u výkresů, kde se čísla zakreslit nepodařilo. Bez něj vypadá
   výkres bez jediného barevného čísla jako rozbitá stránka. */
.figure-note {
  margin: .75rem auto 0;
  max-width: 42rem;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fafafa;
  color: var(--ink-soft);
  font-size: .86rem;
  line-height: 1.55;
  text-align: left;
}
.figure-note strong { color: var(--ink); }

/* ------------------------------------------------------------- půjčovna */
.rental { max-width: 62rem; padding: 1.5rem 0 4rem; }
.rental h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: .2rem 0 .6rem; }
.rental-lead { color: var(--ink-soft); font-size: 1.05rem; max-width: 40rem; margin: 0 0 1.6rem; }

/* Rozcestník podle paliva — jediná otázka, kterou si člověk u půjčovny klade. */
.rental-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.rental-filter button {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: .5rem 1.1rem;
  font: inherit; font-size: .92rem; cursor: pointer;
}
.rental-filter button:hover { border-color: var(--ink); }
.rental-filter button[data-active="true"] {
  background: var(--ink); color: #fff; border-color: var(--ink);
}

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

.rental-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem; background: #fff;
}
.rental-card img {
  width: 100%; height: 9.5rem; object-fit: contain;
  margin-bottom: .7rem;
}
.rental-card h3 { font-size: 1rem; line-height: 1.35; margin: 0 0 .5rem; }

.rental-price { margin: 0 0 .6rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; }
.rental-price strong { font-size: 1.45rem; }
.rental-price span { color: var(--ink-soft); font-size: .9rem; }
.rental-price em { flex-basis: 100%; font-style: normal; color: var(--ink-soft); font-size: .88rem; }

.rental-details { list-style: none; padding: 0; margin: 0 0 .9rem; font-size: .84rem; color: var(--ink-soft); }
.rental-details li { margin-bottom: .2rem; }

/* Odkaz ven, ne odesílací tlačítko — půjčovné se vyřizuje na grilcentrum.cz. */
.rental-button {
  margin-top: auto; text-align: center; text-decoration: none;
  background: var(--accent); color: #fff;
  border-radius: 6px; padding: .6rem 1rem; font-weight: 600;
}
.rental-button:hover { background: var(--accent-dark); }

.rental-terms { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.rental-terms h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.rental-terms dl { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; }
.rental-terms dt { font-weight: 700; margin-bottom: .2rem; }
.rental-terms dd { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }

.rental-source { margin-top: 1.6rem; color: var(--ink-soft); font-size: .84rem; }

/* Čtyři tlačítka vedle sebe se na úzkém displeji nevejdou — na mobilu 2 × 2.
   Tady se naopak roztáhnou přes celou šířku, aby se do nich dobře trefovalo
   prstem. */
@media (max-width: 640px) {
  .service-actions {
    width: 100%;
    gap: .6rem;
  }
  /* Dvě na řádek, ať se do nich dá trefit prstem — tady je čitelnost
     přednější než přimknutý rámeček. */
  .service-button { min-width: 0; flex: 1 1 calc(50% - .6rem); }
}
@media (max-width: 400px) {
  .service-button { padding-inline: .3rem; font-size: .62rem; letter-spacing: 0; }
}