/* Katalog topení — sdílený vizuální jazyk pro všechny varianty rozložení i Plán nákupů.
   Převzato z katalogu baterií: bílý podklad, Inter, tabular-nums, normální velikost
   písma, žádný monospace. Všechny hodnoty jdou přes tokeny v :root. */
:root {
  /* barvy */
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --line: #e4e4e4;
  --soft: #f6f6f4;
  --paper: #fff;
  --ok: #0a5c36;
  --ok-line: #bcd8c8;
  --ok-soft: #f0f7f3;
  --warn: #9a3412;
  --warn-line: #ecd3c4;
  --warn-soft: #fbf3ee;

  /* písmo */
  --font: Inter, -apple-system, "Segoe UI", sans-serif;
  --fs-micro: 12px;
  --fs-small: 13.5px;
  --fs-base: 15px;
  --fs-h3: 16px;
  --fs-h2: 19px;
  --fs-h1: 28px;
  --lh: 1.5;

  /* rozestupy */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* tvary a míry */
  --radius: 10px;
  --radius-lg: 12px;
  --radius-pill: 99px;
  --maxw: 1440px;
  --aside-w: 320px;
  --sloupec-min: 230px;
  --nahled: 72px;
  --nahled-detail: 130px;
  --vstup-w: 200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "tnum";
  line-height: var(--lh);
}

main { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6) var(--sp-5) 120px; }

/* ---------- hlavička stránky ---------- */
.crumb { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--sp-4); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.crumb a { color: inherit; }

h1 { font-size: var(--fs-h1); font-weight: 650; letter-spacing: -0.01em; }
.lead { color: var(--muted); margin: var(--sp-2) 0 var(--sp-5); max-width: 720px; }

/* přepínač sekcí katalogu — připravený na budoucí sekci Povrch podlahy */
.sekce-prepinac { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); flex-wrap: wrap; align-items: center; }
.sekce-prepinac .zalozka {
  font-size: var(--fs-small); padding: 7px var(--sp-4); border-radius: var(--radius-pill);
  border: 1px solid var(--line); color: var(--muted); text-decoration: none; background: var(--paper);
}
.sekce-prepinac .zalozka.aktivni { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
.sekce-prepinac .zalozka.zamcena { border-style: dashed; cursor: default; }

/* přepínač variant rozložení — mimo pravý horní roh, tam sedí tlačítko pinu */
.rozlozeni { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-small); color: var(--muted); }
.rozlozeni a { padding: 2px var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-pill); text-decoration: none; color: inherit; }
.rozlozeni a.aktivni { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }

/* ---------- obecné bloky ---------- */
.box { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); background: var(--soft); margin-bottom: var(--sp-4); }
.box h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.box p { font-size: var(--fs-small); color: var(--muted); }

h2 { font-size: var(--fs-h2); font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); font-weight: 650; }
.secnote { color: var(--muted); font-size: var(--fs-small); margin-bottom: var(--sp-3); max-width: 720px; }

.verdikt { border: 1px solid var(--warn-line); background: var(--warn-soft); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-small); margin: var(--sp-3) 0; }
.verdikt b { color: var(--warn); }

/* ---------- rozvržení: obsah + panel výběru ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-w); gap: var(--sp-6); align-items: start; }
.panel-vyberu {
  position: sticky; top: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5); background: var(--soft);
}
.panel-vyberu h3 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: var(--sp-2); }
.panel-vyberu .chybi { font-size: var(--fs-small); color: var(--warn); margin-top: var(--sp-2); }
.panel-vyberu .ulozeni { margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.panel-vyberu .ulozeni label { display: block; margin-bottom: var(--sp-1); }
.panel-vyberu .ulozeni .btn { margin-top: var(--sp-2); width: 100%; }
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .panel-vyberu { position: static; }
}

/* ---------- kategorie ---------- */
.kategorie { margin-top: var(--sp-7); scroll-margin-top: 76px; }
.kategorie-hlava { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.kategorie-hlava .naradi { margin-left: auto; display: flex; gap: var(--sp-2); }
.prepinac-pohledu { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.prepinac-pohledu button {
  font: var(--fs-small) var(--font); padding: var(--sp-1) var(--sp-3); border: 0;
  background: var(--paper); color: var(--muted); cursor: pointer;
}
.prepinac-pohledu button.aktivni { background: var(--ink); color: var(--paper); font-weight: 600; }

.skupina { margin: var(--sp-4) 0; }
.skupina > .nazev { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; margin-bottom: var(--sp-2); }
.skupina-patka { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); flex-wrap: wrap; }
.kategorie-patka { margin-top: var(--sp-3); }

/* ---------- položka ---------- */
.polozka { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); }
.polozka.vybrana { border-color: var(--ok); background: var(--ok-soft); }
.polozka .hlava { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; cursor: pointer; }
.polozka .jmeno { font-weight: 600; }
.polozka .cena { margin-left: auto; font-weight: 650; white-space: nowrap; }
.polozka .rozdil { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.polozka .proc { color: var(--muted); font-size: var(--fs-small); margin-top: var(--sp-1); }
.polozka .akce { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); flex-wrap: wrap; }

.odkaz-btn {
  font: var(--fs-small) var(--font); background: none; border: 0; padding: 0;
  color: var(--ok); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.odkaz-btn:hover { color: var(--ink); }
.odkaz-btn:disabled { color: var(--muted); cursor: default; text-decoration: none; }

/* ---------- rozbalený detail ---------- */
.detail { margin-top: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.detail-nadpis { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; margin-bottom: var(--sp-2); }
.detail .slozeni { margin: 0 0 var(--sp-2) var(--sp-4); font-size: var(--fs-small); color: var(--muted); }
.detail .slozeni li { margin-bottom: 2px; }
.detail .poznamka { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--sp-2); }
.detail .poznamka.varovani { color: var(--warn); }
.detail dl { display: grid; grid-template-columns: 170px 1fr; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-small); margin: var(--sp-2) 0; }
.detail dt { color: var(--muted); font-weight: 600; }
.detail .zdroje { font-size: var(--fs-small); display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }
.detail .zdroje a { color: var(--ok); }
@media (max-width: 700px) { .detail dl { grid-template-columns: 1fr; } .detail dd { margin-bottom: var(--sp-2); } }

.detail select { font: var(--fs-small) var(--font); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }

/* ---------- fotky ---------- */
.nahled {
  flex: 0 0 auto; width: var(--nahled); height: var(--nahled); padding: 2px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  cursor: zoom-in; position: relative; overflow: visible;
}
.nahled img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nahled:hover { border-color: var(--ink); }
.nahled.prazdny {
  display: inline-flex; align-items: center; justify-content: center;
  border-style: dashed; color: var(--muted); font-size: var(--fs-small); cursor: default;
}
.nahled .pocet {
  position: absolute; right: -4px; top: -6px; min-width: 16px; height: 16px;
  border-radius: var(--radius-pill); background: var(--ink); color: var(--paper);
  font-size: 10px; line-height: 16px; text-align: center; padding: 0 4px;
}
.nahled.maly { width: 30px; height: 30px; }

.detail .fotky { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.detail .fotka { width: var(--nahled-detail); }
.detail .fotka button {
  width: 100%; height: var(--nahled-detail); padding: var(--sp-2); cursor: zoom-in;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.detail .fotka button:hover { border-color: var(--ink); }
.detail .fotka img { width: 100%; height: 100%; object-fit: contain; display: block; }
.detail .fotka figcaption { font-size: var(--fs-micro); color: var(--muted); margin-top: var(--sp-1); }

/* zvětšená fotka přes stránku */
.prohlizec {
  position: fixed; inset: 0; z-index: 10050; background: rgba(20, 20, 20, 0.82);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
}
.prohlizec-okno {
  position: relative; background: var(--paper); border-radius: var(--radius-lg);
  padding: var(--sp-4); max-width: min(1000px, 90vw); max-height: 90vh;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.prohlizec-okno > img { max-width: 100%; max-height: 62vh; object-fit: contain; }
.prohlizec-okno figcaption { display: flex; gap: var(--sp-3); align-items: baseline; font-size: var(--fs-small); }
.prohlizec-popis { color: var(--ink); }
.prohlizec-pocet { color: var(--muted); margin-left: auto; white-space: nowrap; }
.prohlizec-pasek { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.prohlizec-pasek img {
  width: 56px; height: 56px; object-fit: contain; padding: 2px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.prohlizec-pasek img.aktivni { border-color: var(--ink); }
.prohlizec-sip {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.prohlizec-sip.vlevo { left: calc(-1 * var(--sp-6)); }
.prohlizec-sip.vpravo { right: calc(-1 * var(--sp-6)); }
.prohlizec-sip:hover { border-color: var(--ink); background: var(--soft); }
.prohlizec-zavrit {
  position: absolute; top: var(--sp-4); right: var(--sp-5);
  font: 600 var(--fs-small) var(--font); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--paper); border-radius: var(--radius); background: transparent; color: var(--paper); cursor: pointer;
}
.prohlizec-zavrit:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 700px) {
  .prohlizec-sip.vlevo { left: var(--sp-1); }
  .prohlizec-sip.vpravo { right: var(--sp-1); }
}

/* ---------- odznaky ---------- */
.odznak { font-size: var(--fs-micro); padding: 1px var(--sp-2); border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.odznak.doporuceno { border-color: var(--ok-line); color: var(--ok); background: var(--ok-soft); }
.odznak.neoverene { border-color: var(--warn-line); color: var(--warn); background: var(--warn-soft); }
.odznak.vybrany { border-color: var(--ink); color: var(--ink); }
.odznak.vyrazeny { border-style: dashed; }
.odznak.bazar { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.polozka .proc.duvod { color: var(--warn); }
.bez-vyberu { color: var(--muted); width: 13px; text-align: center; flex: 0 0 auto; }

/* ---------- tabulky ---------- */
.tabulka-blok { margin: var(--sp-3) 0; }
.tabulka-blok figcaption { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; margin-bottom: var(--sp-3); }
.tabulka-obal { overflow-x: auto; margin: var(--sp-2) 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
th { text-align: left; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--ink); vertical-align: bottom; }
td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; }
td.cislo, th.cislo { text-align: right; white-space: nowrap; }
tr.vybrano td, tr.pick td { background: var(--soft); }
tr.neovereno td { color: var(--warn); }
table a { color: var(--ok); }
/* první sloupec nese názvy — bez minima se láme na hromadu řádků */
th:first-child, td:first-child { min-width: var(--sloupec-min); }

.vyber-tab tr.vybrano td { background: var(--ok-soft); }
.vyber-tab .jmeno-bunka label { display: flex; gap: var(--sp-2); align-items: center; font-weight: 600; cursor: pointer; }
.vyber-tab .jmeno-bunka .akce { display: flex; gap: var(--sp-3); margin-top: var(--sp-1); }
.vyber-tab .rozdil { color: var(--muted); font-weight: 400; }
.vyber-tab .detail-radek td { background: var(--paper); }
.vyber-tab .detail-radek .detail { border-top: 0; padding-top: 0; }
.mistnosti-tab td:first-child, .mistnosti-tab th:first-child { min-width: 0; }
.nic-volba { display: flex; gap: var(--sp-2); align-items: baseline; font-size: var(--fs-small); color: var(--muted); padding: var(--sp-2) var(--sp-3); }

/* ---------- poznámky a diskuze ---------- */
details.poznamky-blok { margin-top: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-2); }
details summary { font-size: var(--fs-small); color: var(--muted); cursor: pointer; }
details summary:hover { color: var(--ink); }
.poznamky { margin: var(--sp-2) 0 0 var(--sp-4); font-size: var(--fs-small); color: var(--muted); }
.poznamky li { margin-bottom: var(--sp-2); }
.odkazy { font-size: var(--fs-small); margin-top: var(--sp-2); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.odkazy a { color: var(--ok); }
.diskuze-blok { margin-top: var(--sp-2); }

/* ---------- souhrn a ukládání ---------- */
.souhrn-radek { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.souhrn-radek .souhrn-nazev { color: var(--muted); }
.souhrn-radek .souhrn-nazev b { display: block; color: var(--ink); font-weight: 600; }
.souhrn-radek .castka { white-space: nowrap; font-weight: 600; }
.souhrn-celkem { display: flex; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); font-weight: 650; font-size: var(--fs-h3); }

.btn { font: 600 var(--fs-small) var(--font); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--ink); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:disabled { opacity: 0.4; cursor: default; }
input[type="text"] { font: var(--fs-small) var(--font); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); width: 100%; }
.ulozeni label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.hlaska { font-size: var(--fs-small); color: var(--ok); margin-top: var(--sp-2); }
.hlaska.chyba { color: var(--warn); }
.hlaska a { color: inherit; }

/* ---------- lišta se součtem ---------- */
.lista {
  position: sticky; top: 0; z-index: 10; background: var(--paper);
  border-bottom: 1px solid var(--line); padding: var(--sp-3) 0;
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
}
.lista .popisek { color: var(--muted); font-size: var(--fs-small); }
.lista .castka { font-size: var(--fs-h2); font-weight: 650; }
.lista .chybi { font-size: var(--fs-small); color: var(--warn); }
.lista .vpravo { margin-left: auto; }
.btn.maly { padding: var(--sp-1) var(--sp-3); }

/* rozepsaný přehled výběru — vysouvá se pod lištou, aby lišta zůstala jednořádková */
.souhrn-panel {
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: var(--sp-3) var(--sp-4); background: var(--soft);
}
.souhrn-panel .ulozeni { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; margin-top: var(--sp-3); }
.souhrn-panel .ulozeni label { display: flex; flex-direction: column; gap: var(--sp-1); }
.souhrn-panel .ulozeni input { width: var(--vstup-w); }
.souhrn-panel .hlaska { margin-top: 0; align-self: center; }

/* ---------- patička ---------- */
.meta { margin-top: var(--sp-7); font-size: var(--fs-small); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--sp-3); }