/* ==========================================================================
   Moje Sejrárna — vizuální styl „Modrá dílna"
   Paleta odvozená z logomanuálu: primární #27336e.
   ========================================================================== */

@font-face {
  font-family: 'Golden Goose';
  src: url('fonts/goldengoose.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('fonts/lato-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('fonts/lato-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --modra: #27336e;
  --modra-tmava: #1b2450;
  --modra-svetla: #4a5896;
  --krem: #f7f2e7;
  --krem-tmavsi: #ece3ce;
  --zlata: #c08f3c;        /* jen jako plocha (tlačítka, linky) — na světlém pozadí je jako text málo čitelná */
  --zlata-tmava: #8a6526;  /* zlatá jako text na krému/bílé — 4,74:1, splňuje WCAG AA */
  --zlata-svetla: #e0b569; /* zlatá jako text na modré — 6,15:1 */
  --text: #23283c;
  --text-tlumeny: #5c6379;
  --bila: #ffffff;

  --displej: 'Golden Goose', Georgia, 'Times New Roman', serif;
  --text-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --sirka: 1180px;
  --mezera: clamp(3.5rem, 9vw, 7rem);
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--text-font);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.68;
  color: var(--text);
  background: var(--krem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--displej);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.12;
  margin: 0;
  hyphens: none;
}

h1 { font-size: clamp(2.6rem, 1.5rem + 5.2vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.2rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.obal {
  width: 100%;
  max-width: var(--sirka);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 3rem);
}

.sekce { padding-block: var(--mezera); }
.sekce--modra { background: var(--modra); color: var(--bila); }

.nadpisek {
  font-family: var(--text-font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--zlata-tmava);
  margin: 0 0 0.85rem;
}
/* Hero má stejnou modrou jako .sekce--modra, ale tohle pravidlo ho dřív
   nepokrývalo — nadpisek tam zůstával tmavě zlatý, tedy 2,22:1 na modré.
   Zjištěno Lighthouse 16. 9. 2026. */
.sekce--modra .nadpisek,
.hero .nadpisek { color: var(--zlata-svetla); }

/* ---------- Tlačítka ---------- */
.tlacitko {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--text-font);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tlacitko--hlavni { background: var(--zlata); color: var(--modra-tmava); border-color: var(--zlata); }
.tlacitko--hlavni:hover, .tlacitko--hlavni:focus-visible { background: var(--zlata-svetla); border-color: var(--zlata-svetla); }
.tlacitko--obrys { background: transparent; color: currentColor; border-color: currentColor; }
.tlacitko--obrys:hover, .tlacitko--obrys:focus-visible { background: currentColor; }
.sekce--modra .tlacitko--obrys:hover, .sekce--modra .tlacitko--obrys:focus-visible { color: var(--modra); }
.hlava .tlacitko--obrys:hover { color: var(--modra); }

:focus-visible { outline: 3px solid var(--zlata); outline-offset: 3px; }

/* ---------- Hlavička ---------- */
.hlava {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--modra);
  color: var(--bila);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.hlava__obal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 66px;
  padding-block: 0.6rem;
}
.znacka { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.znacka svg, .znacka img { height: 38px; width: auto; }

.menu { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.menu a {
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.menu a:hover, .menu a:focus-visible { border-bottom-color: var(--zlata); }
.hlava .tlacitko { padding: 0.62rem 1.15rem; }

@media (max-width: 940px) {
  .menu { display: none; }
}

/* ---------- Hero ---------- */
.hero { background: var(--modra); color: var(--bila); padding-block: clamp(3rem, 7vw, 5.5rem) 0; }
.hero__mrizka {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 { margin-bottom: 1.4rem; }
.hero h1 .radek2 { display: block; font-size: 0.62em; padding-left: 0.06em; }
.hero__perex { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem); max-width: 34ch; color: rgba(255, 255, 255, 0.9); }
/* Od 14. 9. 2026 se v HTML nepoužívá — Monika nechala z úvodní obrazovky
   vyhodit tlačítka „Zavolat a objednat" a „Co u mě koupíte". Blok zůstává
   pro případ, že by se tlačítka vracela. */
.hero__akce { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
/* Od 14. 9. 2026 se v HTML nepoužívá — Monika nechala z úvodní obrazovky
   vyhodit informaci o okénku a provozní době. Blok zůstává pro případ,
   že by se poznámka pod tlačítka vracela. */
.hero__poznamka {
  margin-top: 2.4rem;
  padding-left: 1.15rem;
  border-left: 3px solid var(--zlata);
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 42ch;
}
.hero__foto { margin-bottom: -1px; }
.hero__foto img { border-radius: var(--radius); }

@media (max-width: 820px) {
  .hero__mrizka { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero__perex { max-width: none; }
}

/* ---------- Popiska fotky ---------- */
/* Od 5. 9. 2026 se v HTML nepoužívá — Monika chtěla popisky u všech fotek smazat.
   Blok zůstává pro případ, že by se popisky vrátily. */
.popiska {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-tlumeny);
}
.sekce--modra .popiska, .hero .popiska { color: rgba(255, 255, 255, 0.72); }

/* ---------- Kruhové fotky ---------- */
.kruh {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--krem-tmavsi);
}
.kruh img { width: 100%; height: 100%; object-fit: cover; }

.sekce--modra .vazka { color: var(--zlata-svetla); opacity: 0.6; }

/* ---------- Slogan ---------- */
/* Vlastní slogan Moniky (13. 9. 2026). Pás hned pod hero, aby byl vidět první.
   Písmo je display (Golden Goose = jen verzálky).
   Vývoj mezery nad pruhem: krémový proužek 48 px → 14 (mail 14. 9. 5:26)
   → 7 (mail 5:46) → 0 (mail 6:26: „zrus tu mezeru mezi modryma pozadima").
   `border-top` je proto pryč úplně a modrá hera přechází rovnou do modré
   pruhu — slogan teď čte jako poslední řádek úvodní obrazovky, hned pod
   fotkou. Tím padá starší zadání ze 4:56 („at je oddelen od modreho pozadi
   nad nim"); novější přání vyhrálo. Návrat: vrátit sem
   `border-top: clamp(0.25rem, 0.6vw, 0.45rem) solid var(--krem)`.
   Písmo zmenšeno týmž mailem („slogan dej mensim pismem pod fotku“)
   z clamp(1.35rem, 0.9rem + 2vw, 2.5rem) — na 1280 px 40 px → 24 px.
   Odsazení pruhu zmenšeno s ním, aby kolem drobnějšího textu nezůstala
   nepoměrně velká modrá plocha. */
.pas-slogan {
  background: var(--modra);
  padding-block: clamp(0.85rem, 2vw, 1.45rem);
}
/* Slogan zarovnaný pod fotku (mail 15. 9. 2026, 6:04: „chtela bych ten slogan
   pod tu fotku,ne doprostred radku"). Pruh drží **stejnou mřížku jako
   `.hero__mrizka`** — tytéž sloupce i `gap` — a slogan sedí v jejím druhém
   sloupci, tedy přesně pod fotkou vpravo. Když se ta mřížka někdy v heru
   změní, musí se změnit i tady, jinak se slogan pod fotkou rozjede.
   Do 15. 9. byl slogan vycentrovaný na celou šířku stránky (`.obal` bez
   mřížky, `text-align: center`) — to je ten „prostředek řádku", který
   Monika nechtěla. */
.pas-slogan .obal {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}
.slogan {
  grid-column: 2;
  color: var(--bila);
  font-family: var(--displej);
  text-transform: uppercase;
  font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0;
}
/* Mezipásmo 821–1010 px: slogan už sedí v úzkém sloupci pod fotkou (340–420 px),
   ale písmo se pořád řídí šířkou okna, takže se text „Sejrárna, co si jde svou
   cestou!" nevešel na jeden řádek a lámal se na dva. Změřeno 15. 9. 2026:
   lámalo se v celém pásu 821–1001 px, potřebná velikost byla 18,6 px při 821 px
   proti tehdejším 21,0 px. Tady proto písmo sleduje šířku sloupce (2vw), ne
   šířku stránky. Nad 1010 px se sloupec rozšíří dost na to, aby stačil hlavní
   clamp. Kdyby se text sloganu někdy prodloužil, tohle pásmo se musí přeměřit. */
@media (min-width: 821px) and (max-width: 1010px) {
  .slogan { font-size: clamp(1rem, 0.1rem + 2vw, 1.5rem); }
}
/* ⚠️ Tenhle blok MUSÍ zůstat až za `.pas-slogan .obal` a `.slogan` výše.
   Média nezvyšují specificitu, takže při stejné specificitě rozhoduje pořadí
   v souboru — kdyby stál výš (třeba v tom media bloku u hera), dvousloupcová
   pravidla by ho přebila a slogan by na mobilu zůstal vmáčknutý v úzkém
   druhém sloupci. Vyzkoušeno 15. 9. 2026, přesně to se stalo.
   Hero se tady skládá do jednoho sloupce, takže pruh se sloganem musí taky.
   Pod fotkou je na mobilu doslova: fotka je poslední prvek hera, slogan
   první pod ním. Monika to ví („vim ze zobrazeni na mobilu je jine"). */
@media (max-width: 820px) {
  .pas-slogan .obal { grid-template-columns: 1fr; gap: 0; }
  .slogan { grid-column: 1; }
}

/* Slogan v patičce — „maly,nenapadny" (14. 9. 2026). Zlatá na tmavé modré,
   velikostí pod úrovní okolního textu, aby nekonkuroval logu nad ním. */
.slogan--paticka {
  color: var(--zlata-svetla);
  margin-top: 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-align: left;
  opacity: 0.85;
}

/* ---------- O mně ---------- */
.o-mne { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
/* Bez fotky jeden sloupec, ať text nezůstane vmáčknutý v užší polovině mřížky. */
.o-mne--bez-foto { grid-template-columns: 1fr; }
/* Fotka v „O mně" je složenina dvou záběrů (viz komentář v index.html), takže
   žádný kruh ani pevný poměr stran — zobrazuje se celá, jak je. */
.o-mne__foto img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.o-mne__text p { max-width: 58ch; }
.citat {
  font-family: var(--displej);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.25;
  color: var(--modra);
  margin: 2rem 0 1rem;
  text-transform: uppercase;
}
.sekce--modra .citat { color: var(--zlata-svetla); }
.podpis { font-size: 0.88rem; color: var(--text-tlumeny); }
.podpis strong { font-family: var(--displej); font-size: 1.15rem; letter-spacing: 0.08em; color: var(--modra); display: block; }

@media (max-width: 820px) {
  .o-mne { grid-template-columns: 1fr; }
  .o-mne__foto { max-width: 320px; margin-inline: auto; }
}

/* ---------- Produkty ---------- */
.produkty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: clamp(1.4rem, 2.4vw, 2.1rem);
  margin-top: 3rem;
}
@media (max-width: 560px) {
  .produkty { grid-template-columns: repeat(2, 1fr); }
}
.produkt { text-align: center; }
.produkt .kruh { margin-bottom: 1.15rem; border: 2px solid rgba(255, 255, 255, 0.16); }
.sekce:not(.sekce--modra) .produkt .kruh { border-color: var(--krem-tmavsi); }
.produkt h3 { margin-bottom: 0.55rem; }
.produkt p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); }
.sekce:not(.sekce--modra) .produkt p { color: var(--text-tlumeny); }

.znacky { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.9rem; }
.znacka-pill {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.32rem 0.65rem;
  border: 1px solid currentColor;
  border-radius: 100px;
  opacity: 0.9;
}
.cena {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zlata-svetla);
}
.sekce:not(.sekce--modra) .cena { color: var(--zlata-tmava); }

/* ---------- Na objednávku ---------- */
.dvojice { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); margin-top: 2.8rem; }
.karta__foto { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; background: var(--krem-tmavsi); }
.karta__foto img { width: 100%; height: 100%; object-fit: cover; }
.karta h3 { margin: 1.3rem 0 0.6rem; }

/* ---------- Balíčky ---------- */
/* Karty balíčků. Od 5. 9. 2026 se v HTML nepoužívají — Monika chtěla příležitosti
   jen textem a pod nimi směs fotek. Blok zůstává pro případ, že by se karty vrátily. */
.balicky {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.4rem);
  margin-top: 2.6rem;
}
/* Pevné tři sloupce: řada se dvěma balíčky pak nenafoukne karty na dvojnásobek. */
@media (max-width: 860px) { .balicky { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .balicky { grid-template-columns: 1fr; } }
.balicek { background: var(--bila); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.sekce--modra .balicek { background: rgba(255, 255, 255, 0.07); }
.balicek__foto { aspect-ratio: 3 / 4; background: var(--krem-tmavsi); }
.balicek__foto img { width: 100%; height: 100%; object-fit: cover; }
.balicek__telo { padding: 1.3rem 1.35rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.balicek h4 {
  font-family: var(--displej);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.1rem;
  margin: 0 0 0.45rem;
}
.balicek p { font-size: 0.93rem; color: var(--text-tlumeny); }
.sekce--modra .balicek p { color: rgba(255, 255, 255, 0.82); }
.balicek .cena { margin-top: auto; padding-top: 0.9rem; }

/* ---------- Galerie balíčků ---------- */
.balicky-galerie {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
  margin-top: 2.2rem;
}
@media (max-width: 860px) { .balicky-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .balicky-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.balicky-galerie__dlazdice {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--krem-tmavsi);
}
.balicky-galerie__dlazdice img { width: 100%; height: 100%; object-fit: cover; }
/* Místo, kam teprve přijde fotka — obrys se symbolem vážky, stejně jako u výrobků bez snímku.
   Od 5. 9. 2026 se v HTML nepoužívá — poslední prázdné místo zaplnila fotka b-sekt-dva.
   Blok zůstává, až Monika zase řekne „dej tam zatím jen obrys". */
.balicky-galerie__dlazdice--obrys {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 2px dashed rgba(255, 255, 255, 0.28);
}
.balicky-galerie__dlazdice--obrys img {
  width: 38%;
  height: auto;
  object-fit: contain;
  opacity: 0.5;
  filter: brightness(0) invert(1);
}

/* ---------- Galerie ---------- */
/* Jedna mozaika, ne dva oddělené bloky: velké a malé dlaždice se střídají.
   Monika 14. 9. 2026: „nechat ten styl velke,male,velke,male,velke / a zkus to
   zarovnat,klidne cast orizni,ale velikosti fotek at jsou zarovnane v rade".
   Mřížka má proto DESET sloupců a každá dlaždice pevný poměr stran:
   .velka  = dort na pět sloupců (půl šířky), poměr 6:5 — dva dorty vedle sebe
             mají stejnou výšku. Ořez je podle toho, jak je dort vyfocený.
   .velka--vysoka = dvojice dortů na výšku, poměr 7:8 (viz níž).
   .siroka = fotka na pět sloupců v poměru 4:3.
   bez třídy = malá dlaždice 4:3 na dva sloupce, pět v řadě. */
.galerie { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1.1rem; margin-top: 2.6rem; align-items: start; }
.galerie figure { margin: 0; grid-column: span 2; }
.galerie img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galerie .siroka, .galerie .velka { grid-column: span 5; }
/* Poměry dortů jsou vybrané tak, aby se z každé fotky ubralo co nejmíň:
   obdélníkový dort 1,29 a dort na zahradě 1,11 se sejdou na 6:5 = 1,2,
   dort Edo 0,90 a dort s macešáky 0,85 na 7:8 = 0,875. Ubere se jednotky
   procent, toper ani prkénko se neuříznou. Kdyby do řady přibyl další dort,
   poměr přepočítat — jinak se z něj ukrojí víc, než je potřeba. */
.galerie .velka img { aspect-ratio: 6 / 5; }
.galerie .velka--vysoka img { aspect-ratio: 7 / 8; }
/* Počet sloupců je psaný natvrdo, ne přes auto-fit: dlaždice přes víc sloupců
   by si v jednosloupcové mřížce vynutily druhý, implicitní sloupec a rozhodily
   celou řadu (vyzkoušeno 13. 9. 2026 na šířce 390 px). Ze stejného důvodu se
   na nejužším zlomu musí vrátit na span 1 i malé dlaždice. */
@media (max-width: 860px) {
  .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Malé dlaždice jdou po pěti. Na dvou sloupcích z nich vyjde 2 + 2 + 1
     a pátá by zůstala sama v půlce řady — ta má proto .siroka-na-uzkem
     a roztáhne se přes celou šířku. */
  .galerie .siroka, .galerie .velka, .galerie .siroka-na-uzkem { grid-column: span 4; }
}
@media (max-width: 520px) {
  .galerie { grid-template-columns: 1fr; }
  /* Vyjmenované musí být i třídy: pravidlo výš platí i tady (max-width: 860px
     sedí i na 390 px) a selektor s třídou by přebil samotné .galerie figure. */
  .galerie figure, .galerie .siroka, .galerie .velka, .galerie .siroka-na-uzkem { grid-column: span 1; }
}

/* ---------- Kontakt ---------- */
.kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.kontakt__radek { margin-bottom: 1.5rem; }
.kontakt__popis { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zlata-svetla); margin-bottom: 0.3rem; }
.kontakt__hodnota { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); font-family: var(--displej); letter-spacing: 0.04em; }
.kontakt__hodnota a { text-decoration: none; border-bottom: 2px solid var(--zlata); }
.kontakt__hodnota a:hover { color: var(--zlata-svetla); }

/* ---------- Upozornění / info box ---------- */
.info-box {
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--zlata);
  padding: 1.2rem 1.4rem;
  font-size: 0.94rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.sekce:not(.sekce--modra) .info-box { background: var(--krem-tmavsi); }

/* ---------- Patička ---------- */
.paticka { background: var(--modra-tmava); color: rgba(255, 255, 255, 0.82); padding-block: 3.5rem 6.5rem; font-size: 0.9rem; }
.paticka__mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.2rem; }
.paticka h3 { font-family: var(--displej); font-weight: 400; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.09em; color: var(--bila); margin: 0 0 0.8rem; }
.paticka a { color: var(--zlata-svetla); }
.paticka__dole { margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); }
.paticka .znacka img { height: 46px; }

/* ---------- Lepivý pruh na mobilu ---------- */
.volat-pruh {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--zlata);
  color: var(--modra-tmava);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.22);
}
@media (max-width: 940px) {
  .volat-pruh { display: flex; }
  .paticka { padding-bottom: 6.5rem; }
}

.skryto { display: none !important; }

.preskocit {
  position: absolute;
  left: -9999px;
}
.preskocit:focus {
  left: 1rem; top: 1rem;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  background: var(--zlata);
  color: var(--modra-tmava);
  border-radius: var(--radius);
}

/* Zástupné symboly pro chybějící údaje — viditelně označené, ať se nedostanou do produkce. */
.doplnit {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px dashed currentColor;
  border-radius: 3px;
  font-family: var(--text-font);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

/* ---------- Informace pro spotřebitele ---------- */
.info-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: 2.6rem;
  align-items: start;
}
.info-mrizka h3 { margin-bottom: 0.7rem; }
.info-mrizka p { font-size: 0.96rem; max-width: 52ch; }
.rozbal {
  border-top: 1px solid var(--krem-tmavsi);
  padding-block: 0.7rem;
}
.rozbal:last-of-type { border-bottom: 1px solid var(--krem-tmavsi); }
.rozbal summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.94rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.rozbal summary::-webkit-details-marker { display: none; }
.rozbal summary::after { content: '+'; color: var(--zlata-tmava); font-weight: 700; }
.rozbal[open] summary::after { content: '−'; }
.rozbal p { margin-top: 0.7rem; font-size: 0.92rem; color: var(--text-tlumeny); }

/* ---------- Podstránka s povinnými informacemi ---------- */
.h1--podstranka { font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.2rem); }
.tlacitko--zpet {
  background: transparent;
  color: var(--modra);
  border-color: var(--modra);
}
.tlacitko--zpet:hover, .tlacitko--zpet:focus-visible {
  background: var(--modra);
  color: var(--bila);
}

/* Výrobek zatím bez fotky — místo snímku symbol vážky z loga. */
.kruh--bez-foto {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.09);
  border: 2px dashed rgba(255, 255, 255, 0.28) !important;
}
.kruh--bez-foto img { width: 42%; height: auto; opacity: 0.55; filter: brightness(0) invert(1); }