/* Peckomat — vizuální systém podle ROZHODNUTI §2.1.
   Jedna značka, dvě plochy: katalog i Peckomat Data sdílejí tokeny. */

:root{
  color-scheme: light dark;

  --pismo-ui: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pismo-serif: "Source Serif 4", ui-serif, Georgia, serif;
  --pismo-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* teple neutrální podklad, ne šedá bez odstínu */
  --podklad: #FBF7F6;
  --podklad-2: #F4EEEC;
  --plocha: #FFFFFF;
  --ram: #E4D9D6;
  --ram-silny: #CDBDB9;
  --text: #241B1C;
  --text-tlumeny: #6B5C5D;
  --text-slaby: #776869;   /* 4,5:1 na všech podkladech — nese časové razítko (§4) */

  /* třešňová je značka; „mat" v logu ji nese */
  --akcent: #8C2F39;
  --akcent-tmavsi: #6E242C;
  --akcent-podklad: #F7EAEB;

  /* sémantika dostupnosti — ODDĚLENĚ od akcentu */
  --skladem: #2F6B4F;
  --skladem-podklad: #E8F2ED;
  --predobjednavka: #9A6212;
  --predobjednavka-podklad: #FAF0DF;
  --vyprodano: #776869;    /* tlumené, ale čitelné: je to text, ne jen tečka */
  --vyprodano-podklad: #F1ECEB;

  --stin: 0 1px 2px rgba(36,27,28,.06), 0 4px 12px rgba(36,27,28,.04);
  --r: 10px;
  --r-mala: 6px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --podklad:#151011; --podklad-2:#1D1617; --plocha:#1B1415;
    --ram:#332728; --ram-silny:#4A3A3C;
    --text:#F2E9E8; --text-tlumeny:#B3A2A3; --text-slaby:#968788;
    --akcent:#E0808A; --akcent-tmavsi:#C9505F; --akcent-podklad:#2B1B1E;
    --skladem:#6FBF95; --skladem-podklad:#16281F;
    --predobjednavka:#D9A455; --predobjednavka-podklad:#2A2015;
    --vyprodano:#968788; --vyprodano-podklad:#221A1B;
    --stin: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --podklad:#151011; --podklad-2:#1D1617; --plocha:#1B1415;
  --ram:#332728; --ram-silny:#4A3A3C;
  --text:#F2E9E8; --text-tlumeny:#B3A2A3; --text-slaby:#968788;
  --akcent:#E0808A; --akcent-tmavsi:#C9505F; --akcent-podklad:#2B1B1E;
  --skladem:#6FBF95; --skladem-podklad:#16281F;
  --predobjednavka:#D9A455; --predobjednavka-podklad:#2A2015;
  --vyprodano:#968788; --vyprodano-podklad:#221A1B;
  --stin: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--podklad); color:var(--text);
  font-family:var(--pismo-ui); font-size:15px; line-height:1.5;
  font-synthesis-weight:none;
}
a{color:var(--akcent); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--akcent-tmavsi)}
:focus-visible{outline:2px solid var(--akcent); outline-offset:2px; border-radius:3px}
.jen-pro-ctecky{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.obal{max-width:1080px; margin:0 auto; padding:0 20px}
.uzky{max-width:760px}

/* ── hlavička ─────────────────────────────────────────────── */
.hlavicka{border-bottom:1px solid var(--ram); background:var(--plocha); position:sticky; top:0; z-index:20}
.hlavicka .obal{display:flex; align-items:center; gap:20px; height:56px}
.logo{font-weight:700; font-size:19px; letter-spacing:-.02em; text-decoration:none; color:var(--text)}
.logo b{color:var(--akcent); font-weight:700}
.hl-nav{display:flex; gap:16px; margin-left:auto; align-items:center; font-size:14px}
.hl-nav a{color:var(--text-tlumeny); text-decoration:none}
.hl-nav a:hover,.hl-nav a[aria-current]{color:var(--text)}
.prepinac{background:none; border:1px solid var(--ram); color:var(--text-tlumeny);
  border-radius:var(--r-mala); padding:5px 9px; cursor:pointer; font:inherit; font-size:13px}
.prepinac:hover{border-color:var(--ram-silny); color:var(--text)}

/* ── hero: otevírá vyhledáváním, ne titulkem ──────────────── */
.hero{padding:44px 0 28px; border-bottom:1px solid var(--ram); background:var(--plocha)}
.hledani{position:relative}
.hledani input{
  width:100%; font:inherit; font-size:17px; padding:14px 16px 14px 44px;
  border:1px solid var(--ram-silny); border-radius:var(--r); background:var(--podklad);
  color:var(--text);
}
.hledani input:focus{border-color:var(--akcent); outline:none; box-shadow:0 0 0 3px var(--akcent-podklad)}
.hledani svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-slaby)}
.hero-veta{font-family:var(--pismo-serif); font-size:17px; color:var(--text-tlumeny);
  margin:12px 2px 0}
.hero-veta strong{color:var(--text); font-weight:600}
h1.hero-veta{letter-spacing:0}   /* h1 kvůli přístupnosti, vzhled zůstává heroverzí */
.vysledky{margin-top:10px; border:1px solid var(--ram); border-radius:var(--r);
  background:var(--plocha); box-shadow:var(--stin); overflow:hidden}
.vysledky:empty{display:none}
.vysledky a{display:flex; gap:10px; align-items:baseline; padding:9px 14px;
  text-decoration:none; color:var(--text); border-bottom:1px solid var(--ram)}
.vysledky a:last-child{border-bottom:none}
.vysledky a:hover{background:var(--podklad-2)}
.vysledky .v-hra{font-size:12px; color:var(--text-slaby); margin-left:auto; white-space:nowrap}

/* ── obecné bloky ─────────────────────────────────────────── */
section{padding:30px 0}
h1{font-size:26px; line-height:1.25; letter-spacing:-.02em; margin:0 0 6px}
h2{font-size:17px; margin:0 0 14px; letter-spacing:-.01em}
h3{font-size:14px; margin:0 0 8px; color:var(--text-tlumeny); font-weight:600;
   text-transform:uppercase; letter-spacing:.06em}
.tlumene{color:var(--text-tlumeny)}
.mono{font-family:var(--pismo-mono); font-variant-numeric:tabular-nums}

.karta{background:var(--plocha); border:1px solid var(--ram); border-radius:var(--r)}
.mrizka{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* ── tabulka nabídek: hustota je vlastnost ────────────────── */
.nabidky{width:100%; border-collapse:collapse; font-size:14px}
.nabidky th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-slaby); font-weight:600; padding:0 12px 7px; white-space:nowrap;
}
.nabidky td{padding:9px 12px; border-top:1px solid var(--ram); vertical-align:baseline}
.nabidky tr:hover td{background:var(--podklad-2)}
.nabidky .cena{font-family:var(--pismo-mono); font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:600; white-space:nowrap; text-align:right}
.nabidky .cena small{font-weight:400; color:var(--text-slaby); font-size:11px}
.nabidky .cas{font-family:var(--pismo-mono); font-variant-numeric:tabular-nums;
  font-size:12px; color:var(--text-slaby); white-space:nowrap}
.nabidky .nejlevnejsi td{background:var(--akcent-podklad)}
.nabidky .nejlevnejsi .cena{color:var(--akcent)}
.znacka-nej{font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--akcent); font-weight:700; margin-left:6px}

/* dostupnost nese TVAR, ne jen barvu */
.dost{display:inline-flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap}
.dost i{width:9px; height:9px; border-radius:50%; flex:none}
.dost.skladem{color:var(--skladem)}
.dost.skladem i{background:var(--skladem)}
.dost.predobjednavka{color:var(--predobjednavka)}
.dost.predobjednavka i{background:transparent; border:2px solid var(--predobjednavka)}
.dost.vyprodano{color:var(--vyprodano)}
.dost.vyprodano i{background:transparent; border:1px solid var(--vyprodano)}

/* ── štítky ───────────────────────────────────────────────── */
.stitek{display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px;
  border:1px solid var(--ram-silny); color:var(--text-tlumeny); background:var(--podklad-2)}
.stitek.tier{font-family:var(--pismo-mono)}

/* ── značka balení (SVG) ──────────────────────────────────── */
.balení{display:flex; align-items:center; gap:14px}
.balení svg{flex:none}
.foto{border-radius:var(--r); border:1px solid var(--ram); background:var(--plocha);
  max-width:100%; height:auto; display:block}
/* fotka vedle hlavičky, ne nad ní — na úzkém displeji pod sebe */
.hlava-produktu{display:grid; gap:22px; grid-template-columns:200px 1fr; align-items:start}
.hlava-produktu figure{margin:0}
@media (max-width:640px){ .hlava-produktu{grid-template-columns:1fr} }
.foto-zdroj{font-size:11px; color:var(--text-slaby); margin-top:5px}

/* ── poznámky pod tabulkou (§4 body 3–5) ──────────────────── */
.pravidla{margin-top:12px; font-size:12.5px; color:var(--text-tlumeny); line-height:1.65}
.pravidla p{margin:0 0 4px}

/* ── prázdný stav: navržený stav, ne chyba ────────────────── */
.bez-nabidky{
  background:var(--podklad-2); border:1px dashed var(--ram-silny);
  border-radius:var(--r); padding:26px; text-align:center;
}
.bez-nabidky .veta{font-family:var(--pismo-serif); font-size:18px; margin:0 0 6px}

.patka{border-top:1px solid var(--ram); margin-top:40px; padding:26px 0 40px;
  font-size:13px; color:var(--text-tlumeny); background:var(--plocha)}
.patka a{color:var(--text-tlumeny)}
.patka-mrizka{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

@media (max-width:640px){
  .nabidky .cas{display:none}
  h1{font-size:21px}
  .hlavicka .obal{gap:12px}
  .hl-nav{gap:10px; font-size:13px}
}
@media print{ .hlavicka,.hero,.prepinac{display:none} }