/* Všechny grily, které vedeme — jedna plocha, žádné podstránky.

   Roman 8. 9. 2026 poslal Vitra Office Chair Finder: „tenhle efekt bych
   chtěl udělat na Všechny grily, které vedeme… uprostřed logo Weber
   s nápisem, start, na té liště budou grily podle paliva, a když na to
   najedeme, otevře se velká stránka."

   Stavba je proto stejná jako tam: rozsypané produkty a Start, po startu
   mřížka s lištou, klik otevře velkou stránku. Grily se mezi úvodem
   a mřížkou nevyměňují — jsou to pořád tytéž prvky, jen se přeskládají,
   takže je vidět pohyb, ne střih.

   Fotky mají průhledné pozadí (tools/pruhledne-fotky.js), takže na téhle
   světlé ploše nemají bílé rámečky a dá se s nimi hýbat. */

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

/* Vlastní `display` v pravidlech níž by přebil `hidden` z prohlížeče —
   úvodní obrazovka pak po Startu zůstala viset přes celou plochu
   a grily se schovaly za ni. */
[hidden] { display: none !important; }

:root {
  --gf-plocha: #f3f3f4;
  --gf-bila: #fff;
  --gf-text: #16161a;
  --gf-seda: #6a6a70;
  --gf-linka: #e3e1de;
  --gf-cervena: #e4002b;   /* červená z loga Weber */
  --gf-cervena-web: #e01820;  /* červená tlačítek na zbytku webu */
  --gf-hlava: 64px;
}

html { scroll-behavior: smooth; }

.gf-telo {
  margin: 0;
  min-height: 100vh;
  background: var(--gf-plocha);
  color: var(--gf-text);
  font: 15px/1.6 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Dokud se nezmáčkne Start, stránka se nescrolluje — je to jeden obraz. */
.gf-telo.gf-pred-startem { overflow: hidden; }

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

.gf-hlava {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--gf-hlava); padding: 0 clamp(14px, 3vw, 34px);
  background: rgba(243, 243, 244, .86);
  backdrop-filter: blur(8px);
}
.gf-hlava-logo img { display: block; height: 26px; width: auto; }
.gf-hlava-vpravo { display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); }
.gf-hlava-vpravo a {
  color: var(--gf-text); text-decoration: none;
  font-size: 13px; letter-spacing: .04em;
}
.gf-hlava-vpravo a:hover { color: var(--gf-cervena); }
.gf-hlava-zpet {
  padding: 7px 14px; border: 1px solid var(--gf-linka); border-radius: 999px;
  background: var(--gf-bila);
}

/* --------------------------------------------------------------- úvod */

.gf-uvod {
  position: relative;
  display: grid; place-items: center;
  min-height: 100vh; padding: var(--gf-hlava) 16px 40px;
}
.gf-uvod-stred { position: relative; z-index: 2; text-align: center; max-width: 560px; }
/* Logo je černá varianta přímo z archivu Weberu (Primary Logo Black Red),
   nic k ní nepřidávám ani z ní neubírám.

   Roman 8. 9. 2026: „logo má být černé" — a poslal přesně tuhle podobu.
   Dřív tu byla světlá varianta, kterou jsem podložil vlastní destičkou;
   ta je pryč, tohle logo žádný podklad nepotřebuje. */
.gf-uvod-znak {
  display: block; width: clamp(150px, 15vw, 214px); height: auto;
  margin: 0 auto 24px;
}
.gf-uvod-stred h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 4.4vw, 52px); font-weight: 400; line-height: 1.12;
  letter-spacing: -.015em;
}
.gf-uvod-stred p { margin: 0 0 26px; color: var(--gf-seda); font-size: 15px; }

/* Cudlík Start. Roman 11. 9. 2026 poslal předlohu z Uiverse (btn-53):
   cudlík je bílý, po najetí sjede líc dolů a zpod něj se odkryje černá
   plocha, na kterou naskáčou písmena jedno po druhém — sudá shora, lichá
   zdola. Mění se jen tenhle cudlík, nic jiného na stránce. */
.gf-start {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 156px;
  padding: 1.1rem 2.6rem;
  border: 1px solid var(--gf-text);
  border-radius: 999px;
  background: var(--gf-text);
  color: #fff;
  font: inherit; font-size: 14px; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  transition: opacity .2s;
}
/* Líc leží přes celé tlačítko a při najetí sjede dolů z rámu ven.
   Přesahuje o pixel přes rám a sjíždí o kousek dál než na plnou výšku,
   jinak by po sjetí u spodní hrany prosvítal bílý proužek. */
.gf-start .gf-start-lic {
  position: absolute;
  inset: -1px;
  display: grid;
  place-content: center;
  background: #fff;
  color: var(--gf-text);
  transition: transform .2s cubic-bezier(.87, 0, .13, 1);
}
.gf-start:hover:not(:disabled) .gf-start-lic { transform: translateY(102%); }

.gf-start .gf-start-pismena { display: inline-flex; }
.gf-start .gf-start-pismena span {
  opacity: 0;
  transform: translateY(-15px);
  transition: transform .2s cubic-bezier(.87, 0, .13, 1), opacity .2s;
}
.gf-start .gf-start-pismena span:nth-child(2n) { transform: translateY(15px); }
.gf-start:hover:not(:disabled) .gf-start-pismena span { opacity: 1; transform: translateY(0); }
.gf-start:hover:not(:disabled) .gf-start-pismena span:nth-child(2) { transition-delay: .1s; }
.gf-start:hover:not(:disabled) .gf-start-pismena span:nth-child(3) { transition-delay: .2s; }
.gf-start:hover:not(:disabled) .gf-start-pismena span:nth-child(4) { transition-delay: .3s; }
.gf-start:hover:not(:disabled) .gf-start-pismena span:nth-child(5) { transition-delay: .4s; }
.gf-start:hover:not(:disabled) .gf-start-pismena span:nth-child(6) { transition-delay: .5s; }

.gf-start:disabled { opacity: .4; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .gf-start .gf-start-lic,
  .gf-start .gf-start-pismena span { transition: none; }
}

/* ------------------------------------------------------- panel s filtrem

   Roman 8. 9. 2026: „lišta na vyhledávání grilu je dole, ne nahoře,
   a vypadá jinak — má posuvný cudlík, řekl jsem stejně, tak to oprav."

   Předloha je karta z Vitry: plave dole uprostřed nad plochou, v hlavě
   šipky doleva a doprava mezi otázkami, název a kolečko s vysvětlením,
   pod tím posuvník s knoflíkem, po stranách krajní hodnoty a dole to,
   co je zrovna vybrané. */

.gf-lista {
  position: fixed; left: 50%; bottom: clamp(16px, 3vh, 34px); z-index: 25;
  /* Utla karta jako u Vitry (365 px). Delsi seznamy se schovaji za
     tlacitko Dalsi rady, at se karta nerozlije pres pul obrazovky. */
  /* Skoro celá šířka monitoru, aby se všechny řady vešly do dvou řádků. */
  width: min(1560px, calc(100vw - 40px));
  transform: translateX(-50%);
  padding: 0 26px 4px;
  text-align: center;
}

/* Roman 10. 9. 2026: „nebude rámeček na čudlíky a přijde pryč nápis Řada."
   Cudlíky leží rovnou na ploše s grily, karta ani nadpis tam nejsou. */
.gf-lista-hlava { display: none; }
.gf-lista-nazev {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 17px; letter-spacing: .01em;
}
.gf-napoveda {
  display: inline-grid; place-items: center;
  width: 19px; height: 19px; padding: 0;
  border: 1px solid var(--gf-linka); border-radius: 50%;
  background: transparent; color: var(--gf-seda);
  font: inherit; font-size: 11px; font-style: italic; cursor: help;
}
.gf-sipka {
  flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0;
  border: 0; background: transparent; color: var(--gf-text);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.gf-sipka:hover:not(:disabled) { color: var(--gf-cervena); }
.gf-sipka:disabled { opacity: .22; cursor: default; }

/* Cudlíky. Roman 8. 9. 2026: „to kolečko je v tomto nepraktické, nech
   to dole, ale ať je vidět, na co klikáš, takže udělej cudlíky a ty
   grily se poskládají; cudlíků dej víc, dej to i po názvech modelů."

   U posuvníku nebylo poznat, co je pod knoflíkem — u paliva a řad, kde
   jsou hodnoty pojmenované, je to slepé. Tady je každá volba vidět
   i s počtem grilů, které pod ni spadnou. */
.gf-volby {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
}
/* Roman 10. 9. 2026: „cudlíky budou červený a když se na ně najede, zbělají,
   takže obráceně." Klidový stav je plná červená ze značky, najetí i vybraná
   volba jsou bílé — vybraný cudlík tak vypadá stejně, jako když na něj sáhneš. */
/* Roman 10. 9. 2026: „cudlíky jsou moc velké, zmenši je." */
.gf-volba {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px;
  /* Roman 10. 9. 2026: „cudlíky budou mít stejnou červenou, co je ten pruh
     nalevo." Tedy tatáž červená jako tlačítka na zbytku webu (#e01820),
     ne odstín z loga Weber. */
  border: 1px solid var(--gf-cervena-web); border-radius: 999px;
  background: var(--gf-cervena-web); color: #fff;
  font: inherit; font-size: 11.5px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.gf-volba i { font-style: normal; font-size: 10px; color: rgba(255, 255, 255, .72); }
.gf-volba:hover:not(:disabled),
.gf-volba:focus-visible,
.gf-volba[aria-pressed="true"] {
  background: var(--gf-bila); border-color: var(--gf-bila); color: var(--gf-text);
}
.gf-volba:hover:not(:disabled) i,
.gf-volba:focus-visible i,
.gf-volba[aria-pressed="true"] i { color: var(--gf-seda); }

/* Cudlík „Všechny grily" stojí sám uprostřed nad první řadou. */
.gf-volby-vse { display: flex; justify-content: center; margin: 0 0 9px; }
.gf-volba-vse { font-weight: 700; letter-spacing: .02em; }
/* Volba, pod kterou by nezbyl žádný gril, se nenabízí jako slepá cesta. */
.gf-volba:disabled { opacity: .3; cursor: default; }
.gf-volba-vic { border-style: dashed; color: var(--gf-seda); }

.gf-lista-pocet { margin: 6px 0 0; color: var(--gf-seda); font-size: 12px; }

/* -------------------------------------------------------------- plocha */

.gf-plocha { position: relative; }

/* Před startem: grily stojí v kole kolem středu a kolo se otáčí.

   Roman 8. 9. 2026: „má to být v tom kole hned, když na to najedu, kolo
   se má točit a ty grily mají cestovat." Měřeno na Vitře: produkty leží
   na kružnicích kolem středu okna a celé kolo se otáčí velmi pomalu,
   plná otáčka trvá minuty. Tady taky — samo se točí zvolna, a jakmile
   nad plochu vjede myš, zrychlí. */
.gf-plocha.je-rozsyp {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  /* 250 s na otáčku — stejně jako Vitra. Rychlost se nemění ničím,
     ani pohybem myši; Roman na to upozornil, a měl pravdu. */
  animation: gf-kolo 250s linear infinite;
}

@keyframes gf-kolo {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

.gf-plocha.je-rozsyp .gf-gril {
  position: absolute;
  /* Čtvercové místo, stranu rozdává skript. U Vitry má každý produkt
     jinou velikost mezi 194 a 254 px při okně 1500 — díky tomu kolo
     nevypadá jako narýsovaná tabulka. */
  width: var(--gf-strana, 220px);
  height: var(--gf-strana, 220px);
  margin: 0; padding: 0;
}
.gf-plocha.je-rozsyp .gf-gril b,
.gf-plocha.je-rozsyp .gf-gril span { display: none; }
/* Fotka se vepíše do čtverce a poměr stran si podrží. Naše grily jsou
   na šířku, kdežto židle u Vitry na výšku — bez tohohle by se po natočení
   roztáhly přes půl kola.

   Vnitřní okraj dělá mezeru mezi sousedy. Židle je úzká a ve svém čtverci
   nechá vzduch po stranách sama; široký gril by čtverec vyplnil celý
   a kolo by se slepilo do souvislého pásu. */
.gf-plocha.je-rozsyp .gf-gril img {
  width: 100%; height: 100%;
  padding: 13%;
  object-fit: contain;
}
/* Co se do rozsypu nevešlo, čeká na mřížku. Úvod má být obraz, ne výpis
   všeho — nacpat tam sto grilů znamená kupu, ve které nic nepoznáš. */
.gf-plocha.je-rozsyp .gf-gril.je-schovany { display: none; }
.gf-plocha.je-rozsyp .gf-gril img { height: auto; }

/* Po startu: mřížka jako u Vitry.

   Roman 8. 9. 2026: „grily se musejí skládat stejně jako ty židle."
   Změřeno na jejich stránce: osm sloupců při okně 1500, řádek vysoký
   kolem 240 px, produkt uprostřed buňky a kolem něj hodně vzduchu.
   Žádné popisky pod obrázkem — jméno a cena se ukážou, až na gril
   najedeš. */
.gf-plocha.je-mrizka {
  display: grid;
  grid-template-columns: repeat(var(--gf-sloupcu, 10), 1fr);
  /* Rozteč řádků 238 px jako u Vitry: dlaždice 150 + mezera 88. Buňka
     drží pevnou výšku, takže velké kusy přetečou do mezery a řádky se
     kvůli nim neroztáhnou. */
  /* Výšku řádku rozdává skript tak, aby grily vyplnily celé okno —
     u Vitry zabírají celou plochu, u nás se dřív mačkaly nahoru. */
  grid-auto-rows: var(--gf-radek, 190px);
  align-items: center;
  column-gap: 6px;
  align-items: center; justify-items: center;
  /* Dole musí zbýt místo na plovoucí kartu, jinak by zakryla poslední
     řadu grilů. */
  /* Po stranách musí zbýt na posun cik cak, jinak krajní gril vyjede
     z okna. */
  /* Po stranách musí zbýt na posun cik cak, jinak krajní gril vyjede
     z okna a stránka se dá rozjet do strany. */
  padding: calc(var(--gf-hlava) + 26px) clamp(38px, 5vw, 88px) 210px;
}


.gf-gril {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px 20px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: inherit;
  font: inherit; text-align: center; cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.gf-gril img {
  width: 100%; height: 148px; object-fit: contain;
  transition: transform .25s ease;
}
/* Grily jsou všechny stejně velké, jen řádky se střídají cik cak.

   Roman 8. 9. 2026: „grily nech všechny stejně velké, to nemám vrtat
   tu velikost, jen je nedej do řady, to je všechno — řada je cik cak."

   Každý druhý řádek se posune o půl buňky. Pravidelná síť tak přestane
   být vidět jako tabulka a přitom se nemusí sahat na velikost grilu. */
.gf-plocha.je-mrizka .gf-gril {
  height: var(--gf-strana, 180px);
  padding: 0;
  overflow: visible;
  position: relative;
  justify-content: center;
  transition: transform .25s ease;
}
/* Jednotné čtvercové místo pro každý gril. Roman 8. 9. 2026: „proč je
   tenhle gril tak velkej, mají být stejné." Fotky mají různý poměr stran,
   takže při pevné výšce vycházel široký gril opticky mnohem větší než
   vysoký. Vepsáním do stejného čtverce jsou si všechny rovné. */
/* Stejné místo jako v kole na titulce: čtverec o straně --gf-strana,
   žádná pevná výška navíc. Roman 10. 9. 2026: „nemůžou mít stejnou,
   koukni se na ten rozdíl" — mřížka měla 142 px, kolo 180. */
.gf-plocha.je-mrizka .gf-gril img { width: 100%; height: var(--gf-strana, 180px); object-fit: contain; }

.gf-plocha.je-mrizka .gf-gril:nth-child(20n+1),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+2),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+3),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+4),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+5),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+6),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+7),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+8),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+9),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+10) { transform: none; }

.gf-plocha.je-mrizka .gf-gril:nth-child(20n+11),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+12),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+13),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+14),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+15),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+16),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+17),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+18),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+19),
.gf-plocha.je-mrizka .gf-gril:nth-child(20n+20) { transform: none; }

@media (max-width: 1180px) {
  .gf-plocha.je-mrizka { padding-left: 52px; padding-right: 52px; }
  .gf-plocha.je-mrizka .gf-gril:nth-child(12n+1),
  .gf-plocha.je-mrizka .gf-gril:nth-child(12n+2),
  .gf-plocha.je-mrizka .gf-gril:nth-child(12n+3),
  .gf-plocha.je-mrizka .gf-gril:nth-child(12n+4),
  .gf-plocha.je-mrizka .gf-gril:nth-child(12n+5),
  .gf-plocha.je-mrizka .gf-gril:nth-child(12n+6) { transform: none; }

  .gf-plocha.je-mrizka .gf-gril:nth-child(12n+7),
  .gf-plocha.je-mrizka .gf-gril:nth-child(12n+8),
  .gf-plocha.je-mrizka .gf-gril:nth-child(12n+9),
  .gf-plocha.je-mrizka .gf-gril:nth-child(12n+10),
  .gf-plocha.je-mrizka .gf-gril:nth-child(12n+11),
  .gf-plocha.je-mrizka .gf-gril:nth-child(12n+12) { transform: none; }
}
@media (max-width: 760px) {

  .gf-plocha.je-mrizka .gf-gril:nth-child(6n+1),
  .gf-plocha.je-mrizka .gf-gril:nth-child(6n+2),
  .gf-plocha.je-mrizka .gf-gril:nth-child(6n+3) { transform: none; }

  .gf-plocha.je-mrizka .gf-gril:nth-child(6n+4),
  .gf-plocha.je-mrizka .gf-gril:nth-child(6n+5),
  .gf-plocha.je-mrizka .gf-gril:nth-child(6n+6) { transform: none; }
}

/* Popisek visí pod buňkou, aby řádky nepodskakovaly. */
.gf-plocha.je-mrizka .gf-gril b,
.gf-plocha.je-mrizka .gf-gril span { position: absolute; }
/* Popisek je široký jako dlaždice s malou rezervou. Pevných 180 px u
   posledního grilu v řadě přetékalo za okno a stránka pak šla posunout
   do strany. */
.gf-plocha.je-mrizka .gf-gril b { bottom: -34px; left: 50%; width: min(180px, calc(var(--gf-strana, 180px) * 1.25)); transform: translateX(-50%); }
.gf-plocha.je-mrizka .gf-gril span { bottom: -54px; left: 50%; transform: translateX(-50%); }
.gf-gril b { font-size: 13px; font-weight: 500; line-height: 1.35; }
.gf-gril span { color: var(--gf-seda); font-size: 12.5px; }
/* Popisek se drží stranou, dokud na gril nenajedeš — u Vitry pod
   produktem nestojí nic a mřížka je tím vzdušná. Místo si drží
   i schovaný, aby řádky nepodskakovaly. */
.gf-plocha.je-mrizka .gf-gril b,
.gf-plocha.je-mrizka .gf-gril span {
  opacity: 0; transition: opacity .18s;
}
.gf-plocha.je-mrizka .gf-gril:hover b,
.gf-plocha.je-mrizka .gf-gril:hover span,
.gf-plocha.je-mrizka .gf-gril:focus-visible b,
.gf-plocha.je-mrizka .gf-gril:focus-visible span { opacity: 1; }
/* Roman 8. 9. 2026: „grily mají být bez rámečku." Najetí myší proto
   nekreslí kolem dlaždice ani rámeček, ani bílou plochu — zvětší se
   jen sám gril, jak je to u Vitry. */
.gf-plocha.je-mrizka .gf-gril:hover { background: transparent; }
/* Zvětšuje se obrázek, ne celá dlaždice — text pod ním musí zůstat
   čitelný a nesmí poskočit sousedům. */
.gf-plocha.je-mrizka .gf-gril:hover img { transform: scale(1.06); }
.gf-gril-bez {
  width: 100%; height: 148px;
  background: repeating-linear-gradient(45deg, #eceae7 0 8px, #f3f3f4 8px 16px);
  border-radius: 4px;
}

/* Přeskládání z rozsypu do mřížky. Skript změří, kde prvek byl a kde
   bude, a rozdíl přehraje jako pohyb — proto tu stačí jediný přechod. */
.gf-gril.je-leti { transition: transform .85s cubic-bezier(.22, .61, .36, 1), opacity .5s ease; }

/* Zamíchání při přepnutí řady. Roman 10. 9. 2026: „ten chaos musí být jak
   když dáš tenisáky do krabice a zamícháš s ní — tak se začnou pohybovat
   sem tam, a takový efekt musí být, až se srovnají."

   Dlaždice se nepřekreslují, jen dostanou náhodný posun a natočení; proto
   je vidět, že je to pořád tentýž gril, který se přesunul. */
/* Bloudění. Roman 10. 9. 2026: „ne se hýbat ze strany na stranu jak zvoneček
   — ten gril se musí jako motat, bloudit a pak skončit na svém místě, jako
   když se hraje, že lidi chodí kolem židlí, řekne se ‚teď' a každý si sedne;
   nebo ty tenisáky v krabici, kde jsou díry: tak dlouho lítá, až spadne do
   té díry, takže na místo."

   Proto se posun v každém kroku sčítá s tím předchozím — gril putuje po
   ploše místo aby kmital kolem jednoho bodu. Dobu kroku dostane každý svou,
   takže se nehýbou v zákrytu. */
.gf-gril.je-bloudi { transition: none; }

/* Gril, který do vybrané řady nepatří, odjíždí z obrazovky. Na position:fixed
   vypadne z mřížky, ale zůstane vidět, dokud nezajede za okraj. */
.gf-gril.je-odjizdi {
  position: fixed;
  margin: 0;
  z-index: 3;
  transition: none;
  pointer-events: none;
}
/* V mřížce se schované dlaždice nesmí počítat do rozvržení. */
.gf-plocha.je-mrizka .gf-gril.je-schovany { display: none; }

.gf-prazdno { padding: 60px 20px 100px; color: var(--gf-seda); text-align: center; }

/* -------------------------------------------------------------- detail */

.gf-detail {
  position: fixed; inset: 0; z-index: 60;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--gf-bila);
  animation: gf-nabeh .28s ease;
}
@keyframes gf-nabeh { from { opacity: 0; transform: translateY(12px); } }

.gf-detail-zavrit {
  position: fixed; top: 16px; right: clamp(14px, 3vw, 30px); z-index: 3;
  width: 42px; height: 42px;
  border: 1px solid var(--gf-linka); border-radius: 50%;
  background: var(--gf-bila); color: var(--gf-text);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.gf-detail-zavrit:hover { background: var(--gf-text); color: #fff; }

.gf-detail-vnitrek {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  min-height: 100vh;
}
/* Fotka drží u horního okraje. Roman 10. 9. 2026: „gril je moc dole,
   musíš ho dát nahoru." Sloupec je vysoký jako celé okno a obsah v něm
   byl vycentrovaný, takže u delších popisů zůstala nahoře prázdná plocha
   a gril spadl pod hranu obrazovky. */
.gf-detail-obraz {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 18px;
  padding: clamp(70px, 8vh, 104px) clamp(20px, 4vw, 64px) 40px;
  background: var(--gf-plocha);
}
.gf-detail-hlavni { display: grid; place-items: center; min-height: 40vh; }
.gf-detail-hlavni img { max-width: 100%; max-height: 58vh; object-fit: contain; }
.gf-detail-nahledy { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.gf-nahled {
  width: 68px; height: 68px; padding: 5px;
  border: 1px solid var(--gf-linka); border-radius: 4px;
  background: var(--gf-bila); cursor: pointer;
}
.gf-nahled img { width: 100%; height: 100%; object-fit: contain; }
.gf-nahled[aria-selected="true"] { border-color: var(--gf-text); }

.gf-detail-text {
  padding: clamp(60px, 7vw, 96px) clamp(20px, 4vw, 60px) 60px;
  max-width: 620px;
}
.gf-detail-rada {
  margin: 0 0 8px; color: var(--gf-cervena);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.gf-detail-text h2 {
  margin: 0 0 6px;
  font-size: clamp(27px, 3.3vw, 42px); font-weight: 400; line-height: 1.12;
  letter-spacing: -.015em;
}
.gf-detail-kod { margin: 0 0 26px; color: var(--gf-seda); font-size: 13px; }
.gf-detail-popis { margin-bottom: 26px; color: #35353b; }
.gf-detail-popis p { margin: 0 0 12px; }
.gf-detail-popis ul { margin: 0 0 12px; padding-left: 20px; }

.gf-detail-parametry { display: grid; gap: 0; margin: 0 0 28px; }
.gf-detail-parametry > div {
  display: grid; grid-template-columns: 44% 1fr; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--gf-linka);
  font-size: 13.5px;
}
.gf-detail-parametry dt { margin: 0; color: var(--gf-seda); }
.gf-detail-parametry dd { margin: 0; }

.gf-detail-cena { margin: 0 0 4px; font-size: clamp(24px, 2.6vw, 32px); }
.gf-detail-stav { margin: 0 0 22px; font-size: 13.5px; }
.gf-detail-stav.je-skladem { color: #1a7f37; }
.gf-detail-stav.je-malo { color: #b45309; }
.gf-detail-stav.je-objednavka { color: var(--gf-seda); }
.gf-detail-stav.je-vyprodano { color: var(--gf-cervena); }

.gf-detail-akce { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.gf-akce-hlavni, .gf-akce-vedlejsi {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px; border-radius: 3px;
  font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
}
.gf-akce-hlavni { border: 0; background: var(--gf-cervena); color: #fff; }
.gf-akce-hlavni:hover { background: #c30025; }
.gf-akce-vedlejsi {
  border: 1px solid var(--gf-text); background: transparent; color: var(--gf-text);
}
.gf-akce-vedlejsi:hover { background: var(--gf-text); color: #fff; }

/* ------------------------------------------------------------ poptávka */

.gf-poptavka {
  padding: 20px; border: 1px solid var(--gf-linka); border-radius: 6px;
  background: var(--gf-plocha);
}
.gf-poptavka-hlava { display: flex; gap: 12px; margin-bottom: 16px; }
.gf-poptavka-znak {
  flex: 0 0 auto;
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--gf-cervena); color: #fff;
  font-size: 14px; font-weight: 700;
}
.gf-poptavka-hlava b { display: block; margin-bottom: 4px; font-weight: 600; }
.gf-poptavka-hlava p { margin: 0; color: var(--gf-seda); font-size: 13.5px; }
.gf-poptavka-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gf-poptavka-form label { display: grid; gap: 5px; font-size: 12.5px; }
.gf-poptavka-form label span { color: var(--gf-seda); }
.gf-poptavka-form label i { font-style: normal; opacity: .7; }
.gf-poptavka-form input {
  height: 44px; padding: 0 12px;
  border: 1px solid var(--gf-linka); border-radius: 3px;
  background: var(--gf-bila); font: inherit; font-size: 14px;
}
.gf-poptavka-form input:focus { outline: 0; border-color: var(--gf-text); }
.gf-poptavka-vzkaz, .gf-poptavka-odeslat, .gf-poptavka-stav { grid-column: 1 / -1; }
.gf-poptavka-odeslat {
  min-height: 48px; border: 0; border-radius: 3px;
  background: var(--gf-text); color: #fff; font: inherit; font-size: 14px; cursor: pointer;
}
.gf-poptavka-odeslat:hover:not(:disabled) { background: var(--gf-cervena); }
.gf-poptavka-odeslat:disabled { opacity: .5; cursor: default; }
.gf-poptavka-stav { margin: 0; font-size: 13px; }
.gf-poptavka-stav.je-chyba { color: var(--gf-cervena); }
.gf-poptavka-stav.je-hotovo { color: #1a7f37; }

/* --------------------------------------------------------- náladová fotka */

.gf-detail-nalada { margin: 0; background: var(--gf-plocha); }
.gf-detail-nalada img { display: block; width: 100%; height: auto; }
.gf-detail-nalada figcaption {
  padding: 14px clamp(20px, 4vw, 60px) 40px;
  color: var(--gf-seda); font-size: 13px;
}

/* --------------------------------------------------------------- chyba */

.gf-chyba { padding: 90px 20px; color: var(--gf-seda); text-align: center; }
.gf-chyba button {
  margin-left: 10px; padding: 9px 18px;
  border: 1px solid var(--gf-text); border-radius: 3px;
  background: transparent; font: inherit; cursor: pointer;
}

/* --------------------------------------------------------------- mobil */

@media (max-width: 900px) {
  .gf-detail-vnitrek { grid-template-columns: 1fr; }
  .gf-detail-obraz { padding-top: 78px; }
  .gf-detail-hlavni { min-height: 40vh; }
  .gf-detail-text { max-width: none; padding-top: 30px; }
}

@media (max-width: 620px) {
  .gf-hlava-vpravo a:not(.gf-hlava-zpet) { display: none; }
  .gf-plocha.je-mrizka { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .gf-gril img, .gf-gril-bez { height: 116px; }
  .gf-poptavka-form { grid-template-columns: 1fr; }
  .gf-detail-akce { flex-direction: column; }
  .gf-akce-hlavni, .gf-akce-vedlejsi { width: 100%; }
}

/* Kdo si vypnul animace, dostane rovnou hotový stav. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gf-gril.je-leti,
  .gf-gril.je-bloudi,
  .gf-gril.je-odjizdi { transition: none; }
  .gf-detail { animation: none; }
  .gf-plocha.je-mrizka .gf-gril:hover img { transform: none; }
}

/* ------------------------------------------------------- rovná mřížka

   Roman 10. 9. 2026: „srovnej ty grily do řady a pod sebe a nech jim
   větší rozestupy." Cik cak posun převzatý z Vitry tedy končí; řádky
   i sloupce stojí rovně a mezi nimi je vzduch. Pravidlo má schválně
   stejnou váhu jako ta s :nth-child výš, aby je přebilo pořadím a nemusel
   se používat !important. */
.gf-plocha.je-mrizka {
  /* Sloupce pevné šířky, řady těsně u sebe a začátek rovnou u kraje.
     Plocha smí být širší než okno — na konci je vidět načatý gril a dá
     se zajet do strany. */
  grid-template-columns: repeat(var(--gf-sloupcu, 6), var(--gf-sloupec, 200px));
  grid-auto-rows: var(--gf-radek, 150px);
  /* Roman 10. 9. 2026: „skládají se od středu dál." Mřížka proto stojí
     uprostřed okna, ne u levého kraje — jinak by čtyři Travelery seděly
     uprostřed mřížky, ale v okně kus vlevo. */
  justify-content: center;
  /* Roman 10. 9. 2026: „vprostředku znamená vprostředku monitoru." Když se
     grily vejdou na obrazovku, stojí uprostřed i svisle; jakmile je jich víc,
     než se vejde, `safe` přepne na začátek, aby se horní řada dala odrolovat. */
  align-content: safe center;
  min-height: 100vh;
  column-gap: 18px;
  row-gap: 18px;
  padding: 84px 0 170px;
}
/* Vejde-li se mřížka na obrazovku, je odsazení souměrné a střed grilů sedí
   na střed okna. */
.gf-plocha.je-mrizka.je-na-stred { padding: 84px 0; }
.gf-plocha.je-mrizka .gf-gril:nth-child(n) {
  /* Gril si drží svou velikost z kola; do sloupce se jen posadí. */
  width: var(--gf-strana, 200px);
  height: var(--gf-strana, 200px);
  transform: translateX(var(--gf-posun-rady, 0));
}
.gf-plocha.je-mrizka .gf-gril:nth-child(n) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}