/* ==========================================================================
   Luxury Brands Logistics, s.r.o. — luxurybrandslogistics.com
   --------------------------------------------------------------------------
   Vizuální systém je odvozený z luxurydistribution.cz. Hodnoty byly odečtené
   přímo z jejich vykresleného webu, ne odhadnuté. Podrobnosti a odchylky
   jsou v podklady/design-system.md.

   01. Tokeny
   02. Reset a základ
   03. Typografie
   04. Layout a sekce
   05. Tlačítka
   06. Hlavička a navigace
   07. Hero
   08. Černý pás s tezí
   09. Koho zásobujeme
   10. Co dodáváme (sortiment)
   11. Značky
   12. Trhy
   13. Proces pro dodavatele
   14. Proč my
   15. Kontakt
   16. Patička
   17. Fotomísta
   18. Responzivita a pohyb
   ========================================================================== */

/* ---------- 01. TOKENY ---------- */
:root {
  /* Barvy odečtené z předlohy */
  --white:      #FFFFFF;
  --black:      #000000;
  --ink:        #1B1B1C;   /* nadpisy */
  --text:       #6F6F74;   /* běžný text, ztmaveno oproti předloze kvůli čitelnosti */
  --muted:      #8D8D91;   /* původní odstín předlohy, jen pro popisky a linky */
  --line:       #CBCBCD;
  --line-soft:  #E8E8E9;
  --paper:      #F7F7F7;   /* světlá plocha pro odsazené bloky */

  /* Písma z předlohy */
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Typografická škála z předlohy: 64 / 48 / 30 / 20 / 16 / 13 */
  --t-h1:    clamp(2.6rem, 1.6rem + 3.4vw, 4rem);
  --t-h2:    clamp(2rem, 1.5rem + 1.8vw, 3rem);
  --t-h3:    clamp(1.45rem, 1.28rem + 0.6vw, 1.875rem);
  --t-h4:    1.25rem;
  --t-body:  1rem;
  --t-small: 0.8125rem;

  /* Rytmus: předloha používá 100px odshora sekce */
  --sec-pad:  clamp(2.75rem, 6.5vw, 6.25rem);
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --maxw:     1200px;

  --pill: 80px;
  --radius: 3px;
  --header-h: 84px;
  /* Hlavicka ma navic stale pritomny 1px spodni ram (jen mu meni barvu),
     takze skutecne zabira o pixel vic. Odsazeni obsahu i posazeni
     mobilniho menu se ridi timhle souctem, ne samotnou --header-h. */
  --header-total: calc(var(--header-h) + 1px);
}

/* ---------- 02. RESET A ZÁKLAD ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden;
  /* Skok na kotvu musí skončit tak, aby nadpis sekce nezmizel pod lepkavou
     hlavičkou. Bez tohohle se sekce zarovná na okraj okna a hlavička jí
     ukousne prvních 84 px, což je na mobilu celý nadpis. */
  scroll-padding-top: calc(var(--header-total) + 0.5rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 300;          /* předloha používá Inter Light */
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--black); color: var(--white); }

:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--white); }

.skip-link {
  position: fixed; left: 0; top: 0; z-index: 200;
  background: var(--black); color: var(--white);
  padding: 0.75rem 1.25rem;
  transform: translateY(-120%); transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 03. TYPOGRAFIE ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
h1 { font-size: var(--t-h1); line-height: 1.3; }
h2 { font-size: var(--t-h2); line-height: 1.2; }
h3 { font-size: var(--t-h3); line-height: 1.2; }
h4 { font-size: var(--t-h4); line-height: 1.5; }
p { margin: 0; text-wrap: pretty; }

.lede { font-size: 1.0625rem; line-height: 1.8; }

.on-dark { color: rgba(255,255,255,0.72); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }

/* ---------- 04. LAYOUT A SEKCE ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-pad); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--black); }
.section--tight { padding-block: clamp(2rem, 4.5vw, 4rem); }

.head { max-width: 46ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head h2 { margin-bottom: 1.25rem; }
.head p { color: var(--text); }
.on-dark .head p { color: rgba(255,255,255,0.72); }

/* ---------- 05. TLAČÍTKA ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
  white-space: nowrap;
  text-align: center;
}
.btn--fill {
  background: var(--black); color: var(--white);
  padding: 0.875rem 2.5rem;
  font-size: var(--t-small); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.btn--fill:hover { background: #2C2C2E; }
/* Na černém pásu se plné tlačítko obrací, aby bylo vidět */
.on-dark .btn--fill { background: var(--white); color: var(--black); }
.on-dark .btn--fill:hover { background: rgba(255,255,255,0.84); }
.on-dark .btn--line { color: var(--white); border-color: rgba(255,255,255,0.5); }
.on-dark .btn--line:hover { background: var(--white); color: var(--black); border-color: var(--white); }

/* Volba, ne systémová akce: malá písmena, liší se jen výplní od .btn--line.
   Verzálka zůstává jen u Kontakt a Odeslat poptávku. */
.btn--choice {
  background: var(--black); color: var(--white);
  padding: 1rem 2.5rem; font-size: var(--t-body); font-weight: 500;
}
.btn--choice:hover { background: #2C2C2E; }
.on-dark .btn--choice { background: var(--white); color: var(--black); }
.btn--line {
  background: transparent; color: var(--black);
  border-color: var(--black);
  padding: 1rem 2.5rem;
  font-size: var(--t-body); font-weight: 500;
}
.btn--line:hover { background: var(--black); color: var(--white); }
.btn--invert {
  background: var(--white); color: var(--black);
  padding: 1rem 2.5rem; font-size: var(--t-body); font-weight: 500;
}
.btn--invert:hover { background: rgba(255,255,255,0.82); }
.btn--sm { padding: 0.7rem 1.75rem; }

/* ---------- 06. HLAVIČKA ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.header.is-stuck { border-bottom-color: var(--line-soft); }
.header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }

/* Logo je jeden SVG soubor s obrysy místo textu, ne sestava ze spanů.
   Písmo z Google Fonts se nemusí načíst a lockup by se rozhodl; obrysy ne.
   Jediný rozměr, který se nastavuje, je --logo-s, tedy strana čtverce.
   Vygenerováno skriptem podklady/logo.py, poměr souboru je 182,56 : 38. */
.logo { --logo-s: 38px; display: flex; align-items: center; flex-shrink: 0; }
.logo img { display: block; height: var(--logo-s); width: auto; }
.logo--footer { --logo-s: 52px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 0; }
.nav__link {
  padding: 0.5rem 0.7rem;
  font-size: 0.9375rem; font-weight: 400; color: var(--ink);
  white-space: nowrap;
  transition: color .18s ease;
}
.nav__link:hover { color: var(--muted); }
.nav__link--contact { display: none; }

.header__actions { display: flex; align-items: center; gap: 0.75rem; margin-left: 0.5rem; }

/* Tichá neutrální pilulka. Nesmí soupeřit s černým tlačítkem Kontakt vedle. */
.langswitch {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--paper); border-radius: var(--pill); padding: 3px;
}
.langswitch--mobile { display: none; }
.langswitch a {
  text-decoration: none;
  padding: 0.34rem 0.75rem; border-radius: var(--pill);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.07em;
  color: var(--muted); line-height: 1.4;
  transition: background-color .18s ease, color .18s ease;
}
.langswitch a:hover { color: var(--ink); }
.langswitch a[aria-current="page"] {
  background: var(--white); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}

.burger { display: none; background: none; border: 0; padding: 0.5rem 0.25rem; cursor: pointer; }
.burger span { display: block; width: 20px; height: 1px; background: var(--ink); }
.burger span + span { margin-top: 5px; }

/* Kontakty uvnitř mobilního menu, světlá varianta bloku z patičky */
.nav__contact { display: none; }
.nav__contact .fcontact svg { stroke: var(--muted); }
.nav__contact .fcontact:hover svg { stroke: var(--ink); }
.nav__contact .fcontact b { color: var(--ink); font-size: 1.0625rem; }
.nav__contact .fcontact span { color: var(--muted); }
.nav__contact .fcontact:hover b { color: var(--muted); }

/* ---------- 07. HERO ---------- */
.hero { padding-block: clamp(1.75rem, 4.5vw, 4.5rem) clamp(2.5rem, 5.5vw, 5rem); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero h1 { max-width: 15ch; margin-bottom: 1.75rem; }
.hero__lede { max-width: 54ch; margin-bottom: 2.5rem; color: var(--text); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- 08. ČERNÝ PÁS S TEZÍ ---------- */
.thesis { padding-block: clamp(2.75rem, 6.5vw, 6rem); }
.thesis p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.125rem);
  line-height: 1.45; color: var(--white);
  max-width: 26ch;
}
.thesis__by {
  margin-top: 2rem; max-width: none; font-family: var(--font-body); font-size: var(--t-small);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ---------- 09. KOHO ZÁSOBUJEME ---------- */
.buyers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); row-gap: clamp(2rem, 4vw, 3rem); }
.buyer__media { margin-bottom: 1.5rem; }
.buyer h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.buyer p { font-size: 0.9375rem; line-height: 1.7; }

/* ---------- 10. SORTIMENT ---------- */
.sourcing { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.source__media { margin-bottom: 1.25rem; }
.source h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.source p { font-size: 0.9375rem; line-height: 1.7; }

.branches { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: clamp(3rem, 6vw, 5rem); }
.branch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "head media" "list media";
  align-content: start;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}
.branch--flip { grid-template-areas: "media head" "media list"; }
.branch__head { grid-area: head; }
.branch__media { grid-area: media; align-self: start; }
.branch__list { grid-area: list; align-self: start; }
.branch__tag {
  font-size: var(--t-small); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 1rem;
}
.branch h3 { margin-bottom: 1rem; }
.branch p { font-size: 0.9375rem; line-height: 1.75; }
.branch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.branch li {
  font-size: var(--t-small); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--pill);
  padding: 0.3rem 0.85rem;
}

/* ---------- 11. ZNAČKY ---------- */
.tier + .tier { margin-top: clamp(3rem, 6vw, 4.5rem); }
.tier__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem;
  padding-bottom: 1.25rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.tier__head h3 { font-size: 1.5rem; }
.tier__head p { font-size: 0.9375rem; color: var(--muted); }
.tier__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.tier__grid--six { grid-template-columns: repeat(6, 1fr); }
.tier__cell {
  display: grid; place-items: center;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line-soft);
  transition: border-color .2s ease;
}
.tier__cell:hover { border-color: var(--line); }
/* Loga jsou předpřipravená: černá na průhledné, na plátně 3:2 a se sjednocenou
   optickou vahou. Proto se škálují na šířku dlaždice, ne na pevnou výšku.
   Škálování na stejnou výšku by dalo širokému logu dvojnásobnou váhu. */
.tier__cell img { width: 78%; height: auto; opacity: 0.72; transition: opacity .2s ease; }
.tier__cell:hover img { opacity: 1; }
.tier__cell span {
  font-family: var(--font-display); font-size: 0.8125rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--line);
  user-select: none;
}
/* Dlaždice s názvem značky místo loga.
   Používá se u módních domů, kde logo vědomě nevkládáme.
   Důvod v podklady/pravni-minimum.md */
.tier__cell--name span {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.75rem, 0.62rem + 0.4vw, 0.875rem);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink); line-height: 1.4; text-align: center; padding: 0 0.6rem;
}
/* Zvýšená specificita: .on-dark .tier__cell span stojí v souboru níž
   a se stejnou specificitou by tohle pravidlo přebilo. */
.on-dark .tier__cell.tier__cell--name span { color: rgba(255,255,255,0.88); }

/* Poslední dlaždice v mřížce nese dovětek, ne logo */
.tier__cell--more span {
  font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem;
  letter-spacing: 0; text-transform: none;
  color: var(--muted); line-height: 1.4; text-align: center; padding: 0 0.75rem;
}
.on-dark .tier__cell.tier__cell--more span { color: rgba(255,255,255,0.5); }
.on-dark .tier__head { border-bottom-color: rgba(255,255,255,0.2); }
.on-dark .tier__head p { color: rgba(255,255,255,0.6); }
.on-dark .tier__cell { border-color: rgba(255,255,255,0.16); }
.on-dark .tier__cell:hover { border-color: rgba(255,255,255,0.34); }
.on-dark .tier__cell span { color: rgba(255,255,255,0.3); }
.on-dark .tier__cell img { filter: invert(1); }

/* ---------- 12. TRHY ---------- */
.markets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); }
.markets div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-block: 1rem; border-bottom: 1px solid var(--line-soft);
}
.markets b { font-weight: 400; color: var(--ink); font-size: 1.0625rem; }
.markets span { font-size: var(--t-small); letter-spacing: 0.1em; color: var(--muted); }

/* ---------- 13. PROCES ---------- */
.steps { display: grid; }
.step {
  display: grid; grid-template-columns: 5rem 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line-soft);
}
.step__n { font-family: var(--font-display); font-size: 1.25rem; color: var(--line); line-height: 1.3; }
.step h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.step p { max-width: 60ch; font-size: 0.9375rem; line-height: 1.75; }

/* ---------- 14. PROČ MY ---------- */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.reason h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.reason p { font-size: 0.9375rem; line-height: 1.75; }
.on-dark .reason p { color: rgba(255,255,255,0.72); }

/* ---------- 15. KONTAKT ---------- */
.contact { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.form { display: grid; gap: 1.25rem; }
.form__submit { margin-top: 0.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: var(--t-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  font: inherit; font-size: 0.9375rem; font-weight: 300;
  padding: 0.8rem 0.95rem; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.field input::placeholder, .field textarea::placeholder { color: var(--line); }
.field textarea { resize: vertical; min-height: 7rem; }
/* Mřížka, ne flex. Delší český souhlas se pak zalomí v sobě
   a nespadne pod tlačítko. */
.form__submit { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.form__submit .form__note { max-width: none; margin: 0; line-height: 1.55; }
.form__status { font-size: var(--t-small); min-height: 1.2em; }
.form__status[data-state="ok"]  { color: var(--ink); }
.form__status[data-state="err"] { color: #A63A2E; }
.form__note { font-size: var(--t-small); color: var(--muted); line-height: 1.6; }

.details {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper);
}
.details h3 { font-size: 1.25rem; margin-bottom: 1.75rem; }
.details dl { display: grid; gap: 1.25rem; margin: 0; }
.details dt {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.3rem;
}
.details dd { margin: 0; color: var(--ink); font-size: 0.9375rem; line-height: 1.6; }
.details a:hover { color: var(--muted); }

/* Výběr zájmu: dodavatel nebo odběratel */
.interest { border: 0; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.interest legend {
  padding: 0; font-size: var(--t-small); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem;
}
.interest__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.interest__opt {
  position: relative; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.1rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white);
  font-size: 0.9375rem; line-height: 1.35;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.interest__opt:hover { border-color: var(--line-strong); }
.interest__opt input { position: absolute; opacity: 0; pointer-events: none; }
.interest__dot {
  width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  transition: border-color .18s ease;
}
.interest__dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: transparent; transition: background-color .18s ease; }
.interest__opt:has(input:checked) { border-color: var(--black); background: var(--black); color: var(--white); }
.interest__opt:has(input:checked) .interest__dot { border-color: var(--white); }
.interest__opt:has(input:checked) .interest__dot::after { background: var(--white); }
.interest__opt:has(input:focus-visible) { outline: 2px solid var(--black); outline-offset: 3px; }

/* Dvojice tlačítek dodavatel a odběratel */
.fork { display: flex; flex-wrap: wrap; gap: 1rem; }
.forkband { border-top: 1px solid var(--line-soft); }
.forkband__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.forkband h2 { font-size: var(--t-h3); max-width: 20ch; }

/* ==========================================================================
   FAQ se záložkami dodavatel a odběratel
   Záložky záměrně vypadají jako dvojice tlačítek v rozcestníku:
   je to stejné rozdělení publika, tak má mít stejnou vizuální řeč.
   ========================================================================== */
.faq__tabs { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.faq__tab {
  border-radius: var(--pill); border: 1px solid var(--black);
  background: transparent; color: var(--black);
  padding: 1rem 2.5rem; font-size: var(--t-body); font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background-color .22s ease, color .22s ease;
}
.faq__tab:hover { background: color-mix(in srgb, var(--black) 8%, transparent); }
.faq__tab[aria-selected="true"] { background: var(--black); color: var(--white); }

.faq__panel[hidden] { display: none; }
/* Linka jen mezi otázkami. Nad první ani pod poslední žádná. */
.faq__list { border-top: 0; }

.faq__item + .faq__item { border-top: 1px solid var(--line-soft); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 1.5rem; align-items: start; gap: 1.5rem;
  padding-block: 1.5rem;
  font-family: var(--font-body); font-weight: 500; font-size: 1rem;
  line-height: 1.55; color: var(--ink);
  transition: color .18s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--text); }
.faq__mark { position: relative; width: 14px; height: 14px; margin-top: 0.4rem; justify-self: end; }
.faq__mark::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s ease, border-color .18s ease;
}
.faq__item summary:hover .faq__mark::before { border-color: var(--ink); }
.faq__item[open] .faq__mark::before { transform: translateY(1px) rotate(-135deg); border-color: var(--ink); }
.faq__item[open] summary { color: var(--ink); }
.faq__answer { padding: 0 0 1.6rem; max-width: 68ch; }
.faq__answer p { font-size: 0.9375rem; line-height: 1.75; }
.faq__answer p + p { margin-top: 0.75rem; }

@media (prefers-reduced-motion: reduce) { .faq__mark::before { transition: none; } }
@media (max-width: 560px) {
  .faq__tabs { flex-direction: column; }
  .faq__tab { width: 100%; }
}

/* ---------- 16. PATIČKA ---------- */
.footer { background: var(--black); padding-block: clamp(2.5rem, 5.5vw, 5rem) 1.5rem; }
.footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
  gap: clamp(2rem, 4vw, 3.5rem); margin-bottom: 3.5rem; align-items: start;
}
/* Sloupce navigace jsou přímo v mřížce patičky, aby seděly na stejné ose. */
.footer__nav { display: contents; }

/* Kontakty přímo v patičce: telefon s otevírací dobou a e-mail */
.fcontact { display: flex; align-items: flex-start; gap: 0.85rem; padding-block: 0.6rem; }
.fcontact + .fcontact { margin-top: 0.5rem; }
.fcontact svg {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.35rem;
  stroke: rgba(255,255,255,0.55); fill: none; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .18s ease;
}
.fcontact:hover svg { stroke: var(--white); }
.fcontact b {
  display: block; font-weight: 400; font-size: 1.0625rem;
  color: var(--white); line-height: 1.35; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.fcontact span { display: block; font-size: var(--t-small); color: rgba(255,255,255,0.5); margin-top: 0.15rem; }
.fcontact:hover b { color: rgba(255,255,255,0.82); }
.footer__tagline { margin-top: 1.5rem; max-width: 34ch; font-size: 0.9375rem; line-height: 1.75; color: rgba(255,255,255,0.6); }
.footer__col h4 {
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin-bottom: 1.25rem;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.footer__col a { font-size: 0.9375rem; color: rgba(255,255,255,0.78); transition: color .18s ease; }
.footer__col a:hover { color: var(--white); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.14); padding-top: 1.75rem; margin-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between;
  font-size: var(--t-small); color: rgba(255,255,255,0.5);
}

/* ---------- 17. FOTOMÍSTA ----------
   Zástupná plocha pro fotku. Až bude soubor, nahradí se za <img>.
   Poměr stran odpovídá předloze: na výšku 2:3 u karet, 3:2 u širokých pásů. */
.ph {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  display: grid; place-items: center;
  overflow: hidden;
}
/* Hotová fotka na místě zástupné plochy. Stejné poměry jako .ph, aby se
   při výměně nic neposunulo. */
/* Produktová zátiší jsou generovaná na čistě bílé, takže nesmí mít pod sebou
   šedou plochu, jinak by při načítání probleskla hrana. Scény s prostředím
   ji mít můžou, ale bílá nevadí ani jim. */
/* Podklad zdedi po sekci. Pevna bila by v sede sekci udelala presne ten
   obdelnik, kvuli kteremu se fotky generuji bez pozadi. */
.shot { display: block; overflow: hidden; background: transparent; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot--tall     { aspect-ratio: 4 / 5; }
.shot--portrait { aspect-ratio: 2 / 3; }
.shot--square   { aspect-ratio: 1 / 1; }
.shot--wide     { aspect-ratio: 3 / 2; }

.ph--portrait { aspect-ratio: 2 / 3; }
.ph--square   { aspect-ratio: 1 / 1; }
.ph--wide     { aspect-ratio: 3 / 2; }
.ph--tall     { aspect-ratio: 4 / 5; }
.ph__label {
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-align: center; padding: 1rem; line-height: 1.6;
}
.ph__label b { display: block; font-weight: 500; color: var(--text); letter-spacing: 0.14em; margin-bottom: 0.35rem; }
.ph > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 18. RESPONZIVITA A POHYB ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 26rem; }
}
@media (max-width: 1080px) {
  .buyers { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .tier__grid { grid-template-columns: repeat(4, 1fr); }
  .markets { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .interest__opts { grid-template-columns: 1fr; }
  .branch, .branch--flip {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "media" "list";
  }
  .branch__media { max-width: 30rem; }
  .sourcing { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .contact { grid-template-columns: 1fr; }
  .branches { grid-template-columns: 1fr; }
  .reasons { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

/* Navigace se skládá do hamburgeru už pod 1100 px. Položky menu nesou celé
   fráze ("Komu dodáváme", "Pro dodavatele"), takže vodorovně potřebují
   víc místa než dřívější jednoslovné popisky. */
@media (max-width: 1100px) {
  .header__actions { margin-left: auto; }
  .header__actions > .langswitch { display: none; }
  .nav__contact {
    display: block; padding-top: 1.5rem;
  }
  /* poslední odkaz v menu už spodní linku má, další by byla dvojitá */
  .langswitch--mobile {
    display: inline-flex; align-self: flex-start;
    margin-top: 1.5rem;
  }
  .langswitch--mobile a { font-size: 0.875rem; padding: 0.45rem 1.1rem; }
  .nav {
    position: fixed; inset: var(--header-total) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line-soft);
    padding: 0.5rem var(--gutter) 1.5rem; display: none;
    /* Panel mel bottom: auto, takze rostl podle obsahu a spodni polozky
       (prepinac jazyku) koncily pod dolni hranou obrazovky. Nebyl to
       scroll kontejner, takze dotykovy tah uvnitr menu posouval stranku
       pod nim. Vyska se ted zastavi na viewportu a scrolluje se v panelu. */
    max-height: calc(100vh - var(--header-total));
    max-height: calc(100dvh - var(--header-total));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* na konci seznamu nepredat scroll strance pod menu */
    overscroll-behavior: contain;
    /* gesto-bar na Androidu i iOS */
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .nav.is-open { display: flex; }

  /* Pozadi se pri otevrenem menu nesmi hybat. Zamek patri na <html>, ne na
     <body>: <html> uz ma nastaveny overflow-x: hidden a prohlizec v takovem
     pripade hodnotu z body na viewport nepropaguje, takze zamek na body byl
     bez ucinku. Pravidlo zamerne zustava uvnitr media query -- nad 1100 px
     se hamburger nezobrazuje. */
  html.nav-open { overflow: hidden; }

  /* Hlavicka na mobilu uhne pri scrollu dolu a vrati se pri prvnim pohybu
     nahoru, aby se uzivatel dostal do menu odkudkoli, bez rolovani az na
     zacatek stranky. Na desktopu se nic neskryva, proto je to tady.

     Proc fixed misto sticky: sticky prvek prestane drzet ve chvili, kdy se
     scroll kontejner zamkne kvuli otevrenemu menu -- hlavicka pak odjede
     s obsahem pryc. Fixed se vaze na viewport, takze zustane nahore za
     kazdych okolnosti. Misto, ktere hlavicka drive zabirala v toku,
     nahrazuje padding-top na body; overeno, ze se rozlozeni nezmenilo
     ani o pixel. */
  .header {
    position: fixed; top: 0; left: 0; right: 0;
    transition: transform .28s ease, border-color .25s ease;
  }
  .header.is-hidden { transform: translateY(-100%); }
  body { padding-top: var(--header-total); }
  .nav__link { padding: 0.9rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1.0625rem; }
  .nav__link--contact { display: block; }
  .burger { display: block; order: 3; }
  .header__actions .btn { display: none; }
}

@media (max-width: 780px) {
  .footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  .fork .btn { width: 100%; }
  .markets { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .sourcing { grid-template-columns: 1fr; }
  /* Šest karet pod sebou natahovalo stránku. Na mobilu je z toho
     vodorovný pás se zarážkami, na desktopu zůstává mřížka. */
  .buyers {
    display: flex; grid-template-columns: none;
    gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-bottom: 0.5rem; scrollbar-width: none;
  }
  .buyers::-webkit-scrollbar { display: none; }
  .buyers:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .buyer { flex: 0 0 78%; scroll-snap-align: start; }
  .tier__grid { grid-template-columns: repeat(3, 1fr); }
  .form__row { grid-template-columns: 1fr; }
  .form__submit { grid-template-columns: 1fr; align-items: stretch; }
  .step { grid-template-columns: 1fr; gap: 0.5rem; }
}
@media (max-width: 480px) {
  .tier__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__cta .btn { width: 100%; }
}
/* Kdo si vypnul animace, dostane skok bez prechodu. */
@media (prefers-reduced-motion: reduce) { .header { transition: none; } }

@media print { .header, .burger, .langswitch, .form { display: none; } }

/* ==========================================================================
   19. PRÁVNÍ STRÁNKY
   Sdílené pro ochrana-osobnich-udaju.html a privacy-policy.html.
   ========================================================================== */
.doc { max-width: 46rem; margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }
.doc__back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--t-small); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2.5rem;
}
.doc__back:hover { color: var(--ink); }
.doc h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); margin-bottom: 0.75rem; }
.doc__date { font-size: var(--t-small); color: var(--muted); margin-bottom: 2.5rem; }
.doc h2 {
  font-size: 1.3rem; margin-top: 2.75rem; margin-bottom: 1rem;
  padding-top: 1.75rem; border-top: 1px solid var(--line);
}
.doc h3 { font-size: 1.0625rem; margin-top: 1.75rem; margin-bottom: 0.6rem; }
.doc p { margin-bottom: 1rem; }
.doc ul, .doc ol { margin: 0 0 1.25rem; padding-left: 1.35rem; display: grid; gap: 0.5rem; }
.doc li { padding-left: 0.25rem; }
.doc b, .doc strong { font-weight: 500; color: var(--ink); }
.doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-str, var(--line)); }
.doc a:hover { text-decoration-color: currentColor; }
.doc__box {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: 1.5rem;
}
.doc__box p:last-child { margin-bottom: 0; }
.doc__note { font-size: 0.875rem; color: var(--muted); font-style: normal; }

/* Disclaimer ke značkám v patičce */
.footer__legal {
  margin: 1rem 0 0; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.75rem; line-height: 1.75; color: rgba(255,255,255,0.56); max-width: none;
}
/* Bez podtržení v klidu: v drobném textu patičky odvádí pozornost od sdělení.
   Podtržení se vrací při najetí a vždy při procházení klávesnicí, aby odkaz
   zůstal rozpoznatelný i pro toho, kdo nerozliší odstín. */
.footer__legal a { color: rgba(255,255,255,0.55); text-decoration: none; text-underline-offset: 2px; }
.footer__legal a:hover { color: rgba(255,255,255,0.85); text-decoration: underline; }
.footer__legal a:focus-visible { text-decoration: underline; }

.footer__bottom > span:nth-child(2) { margin-left: auto; }
@media (max-width: 560px) {
  /* Copyright a místo pod sebou a blízko u sebe, zásady zarovnané doprava
     na vlastní řádek. Ve dvou sloupcích se copyright lámal na dva řádky. */
  .footer__bottom { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; }
  .footer__bottom > span:nth-child(1) { grid-column: 1 / -1; grid-row: 1; margin-left: 0; }
  .footer__bottom > span:nth-child(3) { grid-column: 1; grid-row: 2; }
  .footer__bottom > span:nth-child(2) { grid-column: 2; grid-row: 2; justify-self: end; margin-left: 0; }
  .footer__legal { margin-top: 0.85rem; padding-top: 0.85rem; }
}
.footer__bottom a { color: rgba(255,255,255,0.6); text-decoration: none; text-underline-offset: 3px; }
.footer__bottom a:hover, .footer__bottom a:focus-visible { text-decoration: underline; }
.footer__bottom a:hover { color: var(--white); }

/* Past na roboty. Skutečný člověk tohle pole nevidí a nevyplní ho;
   robot, který vyplní všechno, se tím prozradí a Netlify zprávu zahodí. */
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }