/* =========================================================
   KAVÁRNA HLÍNA — Litoměřice
   Design system + stránka
   ========================================================= */

/* ---------- 1. TOKENY ---------- */
:root{
  /* ---- ZNAČKA ----
     Žlutá a tmavě hnědá jsou odečtené přímo z logotypu Farma Hlína. */
  --pollen:      #FCF054;   /* ⭐ značková žlutá — z loga */
  --sun-deep:    #E4D53C;   /* tmavší odstín pro stíny a hover */
  --soil:        #24180C;   /* ⭐ značková tmavá — z loga */

  /* ---- Doplňková zemitá paleta ---- */
  --clay:        #C2643F;   /* terakota / hlína — sekundární akcent */
  --clay-dark:   #A24F30;
  --clay-soft:   #E8B79E;
  --soil-soft:   #5B463C;
  --cream:       #FBF3E7;   /* hlavní pozadí */
  --sand:        #F3E5D0;   /* sekundární pozadí */
  --sand-deep:   #E8D5BA;
  --herb:        #5C7346;   /* bylinková zeleň */
  --herb-soft:   #A8BE92;
  --petal:       #E39A94;   /* okvětní plátek */
  --white:       #FFFDF9;

  /* Typografie */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-hero: clamp(3rem, 10vw, 8.5rem);
  --fs-h2:   clamp(2rem, 5vw, 3.9rem);
  --fs-h3:   clamp(1.15rem, 2vw, 1.45rem);
  --fs-body: clamp(1rem, 1.1vw, 1.1rem);

  /* Prostor */
  --gap:      clamp(1rem, 2.5vw, 2rem);
  --section-y: clamp(4.5rem, 11vw, 9.5rem);
  --container: 1240px;
  --radius:   22px;
  --radius-lg: 34px;

  /* Stíny */
  --shadow-sm: 0 2px 10px rgba(46,33,27,.07);
  --shadow:    0 14px 40px -14px rgba(46,33,27,.28);
  --shadow-lg: 0 32px 70px -26px rgba(46,33,27,.42);

  /* Křivky */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --bounce:    cubic-bezier(.34,1.56,.64,1);

  --header-h: 76px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--soil);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
address{ font-style:normal; }

::selection{ background:var(--clay); color:var(--cream); }

:focus-visible{
  outline:3px solid var(--clay);
  outline-offset:3px;
  border-radius:6px;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:9999;
  background:var(--soil); color:var(--cream);
  padding:.8rem 1.2rem; border-radius:0 0 12px 0;
}
.skip-link:focus{ left:0; }

.container{
  width:min(100% - 2.5rem, var(--container));
  margin-inline:auto;
}

/* Zámek rolování pro otevřené menu a lightbox.
   Samotné overflow:hidden na body pozadí neudrží (hlavně ne na iOS
   Safari) — proto se body zafixuje a JS si pamatuje, kde uživatel byl. */
body.scroll-lock{
  position:fixed; left:0; right:0; width:100%;
  overflow:hidden;
}

/* ---------- 3. TYPOGRAFIE ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.02em;
  font-variation-settings:'SOFT' 30,'WONK' 1;
}

.hl{
  position:relative;
  color:var(--clay);
  white-space:nowrap;
}
.hl::after{
  content:'';
  position:absolute; left:-2%; right:-2%; bottom:.02em;
  height:.28em;
  background:var(--pollen);
  opacity:.62;
  border-radius:99px;
  z-index:-1;
  transform:rotate(-.6deg);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.78rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--clay);
  margin-bottom:1.1rem;
}
.eyebrow__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--clay);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(194,100,63,.5); }
  50%    { transform:scale(1.18); box-shadow:0 0 0 9px rgba(194,100,63,0); }
}

.link{
  color:var(--clay);
  font-weight:500;
  background-image:linear-gradient(var(--clay),var(--clay));
  background-size:0% 2px; background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .35s var(--ease);
}
.link:hover{ background-size:100% 2px; }

/* ---------- 4. GRAIN + PROGRESS ---------- */
.grain{
  position:fixed; inset:0; z-index:9000;
  pointer-events:none; opacity:.32; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.progress{
  position:fixed; top:0; left:0; right:0; height:3px;
  z-index:9500; background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--clay),var(--pollen),var(--herb));
  transition:width .1s linear;
}

/* ---------- 5. PRELOADER ---------- */
.preloader{
  position:fixed; inset:0; z-index:9800;
  display:grid; place-items:center;
  background:var(--cream);
  transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ text-align:center; color:var(--clay); }
.seed{
  width:88px; height:88px; margin-inline:auto;
  border-radius:50%; object-fit:cover;
  background:var(--pollen);
  animation:seedGrow 1.6s var(--bounce) infinite alternate;
}
@keyframes seedGrow{
  from{ transform:scale(.82) rotate(-10deg); }
  to  { transform:scale(1.06) rotate(10deg); }
}
.preloader__word{
  display:block; margin-top:1rem;
  font-family:var(--font-display); font-size:1.7rem; font-weight:900;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--soil);
  animation:fadeInOut 1.5s var(--ease) infinite alternate;
}
@keyframes fadeInOut{ from{opacity:.35} to{opacity:1} }

/* ---------- 6. TLAČÍTKA ---------- */
/* Žluté tlačítko s tmavým „3D" stínem — přímo podle logotypu. */
.btn{
  --btn-bg:var(--pollen); --btn-fg:var(--soil);
  --btn-sh:var(--soil); --btn-hover:var(--sun-deep);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.6rem;
  font-weight:700; font-size:.95rem; line-height:1;
  border-radius:99px;
  background:var(--btn-bg); color:var(--btn-fg);
  cursor:pointer;
  transition:transform .3s var(--bounce), box-shadow .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
  box-shadow:0 5px 0 0 var(--btn-sh), var(--shadow-sm);
  isolation:isolate;
}
.btn svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--btn-hover);
  transform:translateY(101%);
  transition:transform .4s var(--ease-out);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 8px 0 0 var(--btn-sh), var(--shadow); }
.btn:hover::before{ transform:translateY(0); }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:translateY(2px); box-shadow:0 2px 0 0 var(--btn-sh); }

.btn--primary{ --btn-bg:var(--pollen); --btn-fg:var(--soil); }

.btn--ghost{
  --btn-hover:var(--soil);
  background:transparent; color:var(--soil);
  box-shadow:inset 0 0 0 2px var(--soil);
}
.btn--ghost:hover,
.btn--ghost:active{ color:var(--cream); box-shadow:inset 0 0 0 2px var(--soil); }

.btn--lg{ padding:1.1rem 2rem; font-size:1.02rem; }
.btn--sm{ padding:.62rem 1.1rem; font-size:.85rem; box-shadow:0 4px 0 0 var(--btn-sh); }
.btn--block{ width:100%; }

/* ---------- 7. HEADER ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:800;
  padding-top:env(safe-area-inset-top);
  transition:transform .45s var(--ease), box-shadow .35s;
}
/* Rozostřené pozadí je na pseudo-elementu, ne na .header.
   Kdyby backdrop-filter seděl přímo na hlavičce, stala by se z ní
   „containing block" a mobilní zásuvka .nav (position:fixed) by se
   místo přes celou obrazovku smrskla na výšku hlavičky. */
.header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  pointer-events:none; opacity:0;
  background:rgba(251,243,231,.86);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  transition:opacity .35s var(--ease);
}
.header__inner{
  width:min(100% - 2.5rem, var(--container));
  margin-inline:auto;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.header.is-stuck{
  box-shadow:0 1px 0 rgba(46,33,27,.09), var(--shadow-sm);
}
.header.is-stuck::before{ opacity:1; }
.header.is-hidden{ transform:translateY(-110%); }

.logo{ display:flex; align-items:center; gap:.65rem; }
.logo__mark{
  width:44px; height:44px; flex:none;
  border-radius:50%; overflow:hidden;
  background:var(--pollen);
  transition:transform .5s var(--bounce);
}
.logo__mark img{ width:100%; height:100%; object-fit:cover; }
.logo:hover .logo__mark{ transform:rotate(-14deg) scale(1.08); }
.logo__text strong{
  display:block;
  font-family:var(--font-display); font-size:1.42rem; font-weight:900;
  letter-spacing:-.03em; line-height:1;
}
.logo__text em{
  display:block; font-style:normal;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--soil-soft); margin-top:2px;
}

.nav__list{ display:flex; gap:.3rem; }
.nav__link{
  position:relative; display:block;
  padding:.5rem .85rem; border-radius:99px;
  font-size:.92rem; font-weight:500;
  transition:color .25s, background-color .25s;
}
.nav__link::after{
  content:''; position:absolute; left:50%; bottom:4px;
  width:0; height:3px; border-radius:99px;
  background:var(--clay);
  transform:translateX(-50%);
  transition:width .32s var(--ease);
}
.nav__link:hover{ color:var(--clay); }
.nav__link:hover::after{ width:18px; }
.nav__link.is-active{ color:var(--clay); font-weight:700; }
.nav__link.is-active::after{ width:22px; }

.header__actions{ display:flex; align-items:center; gap:.75rem; }

.status{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .8rem; border-radius:99px;
  font-size:.78rem; font-weight:700;
  background:var(--sand); color:var(--soil-soft);
  white-space:nowrap;
}
.status__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--soil-soft); flex:none;
}
.status.is-open{ background:rgba(92,115,70,.14); color:var(--herb); }
.status.is-open .status__dot{
  background:var(--herb);
  animation:pulseGreen 2s var(--ease) infinite;
}
@keyframes pulseGreen{
  0%,100%{ box-shadow:0 0 0 0 rgba(92,115,70,.55); }
  50%    { box-shadow:0 0 0 7px rgba(92,115,70,0); }
}
.status.is-closed{ background:rgba(194,100,63,.13); color:var(--clay-dark); }
.status.is-closed .status__dot{ background:var(--clay); }

.burger{
  display:none; width:44px; height:44px;
  border-radius:12px; background:var(--sand);
  padding:12px 11px;
  flex-direction:column; justify-content:space-between;
}
.burger span{
  display:block; height:2.5px; width:100%;
  background:var(--soil); border-radius:2px;
  transition:transform .4s var(--ease), opacity .25s;
}
.burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; transform:scaleX(.2); }
.burger.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------- 8. HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--header-h) + 3rem) 0 7rem;
  background:
    radial-gradient(120% 90% at 85% 8%, rgba(232,169,59,.15), transparent 55%),
    radial-gradient(90% 80% at 5% 90%, rgba(92,115,70,.13), transparent 60%),
    var(--cream);
  overflow:hidden;
}
.hero__inner{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}

.hero__blobs{ position:absolute; inset:0; pointer-events:none; }
.blob{
  position:absolute; display:block;
  filter:blur(2px); opacity:.5;
}
.blob--1{
  width:min(46vw,420px); aspect-ratio:1/.92; top:-8%; right:-6%;
  background:var(--clay-soft);
  border-radius:58% 42% 46% 54% / 52% 48% 52% 48%;
  animation:morph 16s var(--ease) infinite alternate;
}
.blob--2{
  width:min(34vw,300px); aspect-ratio:1; bottom:-10%; left:-8%;
  background:var(--herb-soft); opacity:.45;
  border-radius:42% 58% 62% 38% / 48% 55% 45% 52%;
  animation:morph 21s var(--ease) infinite alternate-reverse;
}
.blob--3{
  width:min(18vw,150px); aspect-ratio:1; top:22%; left:44%;
  background:var(--pollen); opacity:.24;
  border-radius:50% 50% 42% 58% / 55% 45% 55% 45%;
  animation:morph 13s var(--ease) infinite alternate;
}
@keyframes morph{
  0%  { border-radius:58% 42% 46% 54% / 52% 48% 52% 48%; transform:rotate(0deg) scale(1); }
  100%{ border-radius:38% 62% 63% 37% / 41% 44% 56% 59%; transform:rotate(18deg) scale(1.13); }
}

.hero__title{
  font-size:var(--fs-hero);
  font-weight:900;
  letter-spacing:-.045em;
  margin-bottom:1.6rem;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero__title .line__i{
  display:inline-block;
  transform:translateY(115%) rotate(4deg);
  opacity:0;
  animation:lineUp .95s var(--ease-out) forwards;
}
.hero__title .line:nth-child(1) .line__i{ animation-delay:.15s; }
.hero__title .line:nth-child(2) .line__i{ animation-delay:.27s; }
.hero__title .line:nth-child(3) .line__i{ animation-delay:.39s; }
@keyframes lineUp{ to{ transform:translateY(0) rotate(0); opacity:1; } }

.hero__accent{
  position:relative;
  color:var(--clay);
  font-style:italic;
  font-variation-settings:'SOFT' 60,'WONK' 1;
}
.squiggle{
  position:absolute; left:0; right:-6%; bottom:-.16em;
  width:106%; height:.24em;
  color:var(--pollen);
  stroke-dasharray:300; stroke-dashoffset:300;
  animation:draw 1.1s var(--ease-out) 1.05s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

.hero__lead{
  max-width:47ch; font-size:clamp(1.02rem,1.35vw,1.18rem);
  color:var(--soil-soft); margin-bottom:2rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.8rem; }

.hero__facts{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.6rem); }
.hero__facts li{ display:flex; align-items:center; gap:.7rem; }
.hero__facts b{
  font-family:var(--font-display); font-size:2.1rem; font-weight:900;
  color:var(--clay); line-height:1;
}
.hero__facts span{ font-size:.8rem; line-height:1.3; color:var(--soil-soft); }

.hero__media{ position:relative; }
.hero__frame{
  position:relative;
  border-radius:52% 48% 45% 55% / 48% 45% 55% 52%;
  overflow:hidden;
  aspect-ratio:4/4.4;
  box-shadow:var(--shadow-lg);
  transition:border-radius 1.2s var(--ease);
  will-change:transform;
}
.hero__frame:hover{ border-radius:var(--radius-lg); }
.hero__frame img{ width:100%; height:100%; object-fit:cover; }

.hero__sticker{
  position:absolute; right:-4%; bottom:6%;
  width:118px; height:118px;
  display:grid; place-items:center;
  background:var(--pollen);
  border-radius:50%;
  box-shadow:var(--shadow);
}
.hero__sticker svg{
  position:absolute; inset:0; width:100%; height:100%;
  animation:spin 14s linear infinite;
  fill:var(--soil);
  font-size:11.5px; font-weight:700; letter-spacing:.06em;
  font-family:var(--font-body);
}
.hero__sticker-cup{ font-size:2rem; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero__note{
  position:absolute; left:-6%; top:8%;
  display:flex; align-items:center; gap:.7rem;
  background:var(--white); padding:.85rem 1.15rem;
  border-radius:18px; box-shadow:var(--shadow);
  animation:float 5s var(--ease) infinite alternate;
}
.hero__note p{ font-size:.8rem; line-height:1.35; }
.hero__note-emoji{ font-size:1.6rem; }
@keyframes float{ from{ transform:translateY(0) rotate(-2deg); } to{ transform:translateY(-13px) rotate(2deg); } }

.scroll-hint{
  position:absolute; left:50%; bottom:5.5rem;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--soil-soft); z-index:5;
}
.scroll-hint__mouse{
  width:24px; height:38px; border:2px solid currentColor;
  border-radius:14px; display:grid; justify-items:center; padding-top:6px;
}
.scroll-hint__mouse span{
  width:3px; height:7px; border-radius:2px; background:currentColor;
  animation:wheel 1.7s var(--ease) infinite;
}
@keyframes wheel{ 0%{opacity:0;transform:translateY(0)} 40%{opacity:1} 100%{opacity:0;transform:translateY(12px)} }
.scroll-hint__label{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; }

/* Vlny mezi sekcemi */
.wave{ position:absolute; left:0; right:0; line-height:0; pointer-events:none; }
.wave svg{ width:100%; height:clamp(45px,7vw,90px); }
.wave--bottom{ bottom:-1px; color:var(--cream); }
.wave--top{ top:-1px; color:var(--cream); transform:scaleY(-1); }

/* ---------- 9. MARQUEE ---------- */
.marquee{
  background:var(--soil); color:var(--cream);
  padding:1rem 0; overflow:hidden;
  transform:rotate(-1.1deg) scale(1.03);
  margin-block:-1.4rem;
  position:relative; z-index:6;
}
.marquee__track{
  display:flex; align-items:center; gap:2rem;
  width:max-content;
  animation:slide 34s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--font-display); font-size:clamp(1rem,2vw,1.45rem);
  font-weight:600; white-space:nowrap;
}
.marquee i{ color:var(--pollen); font-style:normal; font-size:1rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- 10. SEKCE ---------- */
.section{ position:relative; padding-block:var(--section-y); }
.section__head{ max-width:720px; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.section__title{ font-size:var(--fs-h2); margin-bottom:1.1rem; }
.section__sub{ color:var(--soil-soft); font-size:1.06rem; max-width:58ch; }

/* ---------- 11. PŘÍBĚH ---------- */
.story{ background:var(--cream); }
.timeline{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.5vw,2rem);
  margin-bottom:clamp(3rem,7vw,5rem);
}
.timeline__item{ position:relative; }
.timeline__item:not(:last-child)::after{
  content:''; position:absolute; top:2.6rem; right:-1.15rem;
  width:2.3rem; height:2px;
  background-image:linear-gradient(90deg,var(--clay-soft) 55%,transparent 0);
  background-size:9px 2px;
}
.timeline__num{
  font-family:var(--font-display); font-size:3.6rem; font-weight:900;
  color:var(--clay); opacity:.2; line-height:.9; margin-bottom:-.6rem;
}
.timeline__card{
  position:relative; height:100%;
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:2rem 1.7rem 1.9rem;
  box-shadow:var(--shadow-sm);
  border:2px solid var(--sand-deep);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  will-change:transform;
}
.timeline__card:hover{
  box-shadow:var(--shadow);
  border-color:var(--clay-soft);
}
.timeline__icon{
  font-size:2.3rem; margin-bottom:.9rem;
  display:inline-block;
  transition:transform .5s var(--bounce);
}
.timeline__card:hover .timeline__icon{ transform:scale(1.25) rotate(-10deg); }
.timeline__card h3{ font-size:var(--fs-h3); margin-bottom:.6rem; }
.timeline__card p{ color:var(--soil-soft); font-size:.96rem; }

.story__quote{ text-align:center; }
.story__quote blockquote p{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.5rem,3.6vw,2.6rem);
  font-weight:600; letter-spacing:-.02em;
  color:var(--clay); max-width:18ch; margin-inline:auto;
  font-variation-settings:'SOFT' 60,'WONK' 1;
}
.story__quote cite{
  display:block; margin-top:1rem; font-style:normal;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--soil-soft);
}

/* ---------- 12. MENU ---------- */
.menu{ background:var(--sand); }
.tabs__nav{
  position:relative;
  display:flex; flex-wrap:wrap; gap:.4rem;
  background:var(--white);
  padding:.45rem; border-radius:99px;
  box-shadow:var(--shadow-sm);
  margin-bottom:2.5rem;
  width:max-content; max-width:100%;
}
.tabs__pill{
  position:absolute; top:.45rem; bottom:.45rem; left:0;
  background:var(--clay); border-radius:99px;
  transition:transform .45s var(--ease-out), width .45s var(--ease-out);
  z-index:0;
}
.tab{
  position:relative; z-index:1;
  padding:.72rem 1.25rem; border-radius:99px;
  font-size:.92rem; font-weight:700; white-space:nowrap;
  color:var(--soil-soft);
  transition:color .3s var(--ease);
}
.tab:hover{ color:var(--clay); }
.tab.is-active{ color:var(--cream); }

.panel{ display:none; }
.panel.is-active{ display:block; animation:panelIn .5s var(--ease-out); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.menu-list{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:.3rem clamp(2rem,5vw,4rem);
}
.menu-item{
  display:flex; align-items:baseline; gap:.7rem;
  padding:1.05rem .6rem;
  border-radius:14px;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.menu-item:hover{ background:rgba(255,253,249,.75); transform:translateX(5px); }
.menu-item__main{ flex:none; max-width:70%; }
.menu-item h3{
  font-size:1.06rem; font-weight:700;
  font-family:var(--font-body); letter-spacing:0;
  margin-bottom:.15rem;
}
.menu-item p{ font-size:.85rem; color:var(--soil-soft); line-height:1.45; }
.menu-item__dots{
  flex:1 1 auto;
  border-bottom:2px dotted var(--sand-deep);
  transform:translateY(-4px);
  min-width:14px;
}
.menu-item__price{
  flex:none; font-family:var(--font-display);
  font-weight:700; font-size:1.05rem; color:var(--clay);
  white-space:nowrap;
}
.tag{
  display:inline-block; margin-top:.4rem;
  padding:.14rem .55rem; border-radius:99px;
  font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  background:var(--sand-deep); color:var(--soil-soft);
}
.tag--farm{ background:rgba(92,115,70,.16); color:var(--herb); }

/* ---------- 13. FARMA ---------- */
.farm{ background:var(--herb); color:var(--cream); overflow:hidden; }
.farm .eyebrow{ color:var(--pollen); }
.farm .eyebrow__dot{ background:var(--pollen); }
.farm .hl{ color:var(--pollen); }
.farm .hl::after{ background:var(--cream); opacity:.2; }
.farm__inner{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem); align-items:center;
  position:relative; z-index:2;
}
.farm__copy > p{ color:rgba(251,243,231,.82); margin-bottom:2.2rem; max-width:46ch; }

.farm__media{ position:relative; display:grid; place-items:center; }

/* Pečeť Farma Hlína — jejich vlastní logotyp, pomalu se otáčí */
.farm__seal{
  width:min(100%, 420px); aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  background:var(--pollen);
  box-shadow:var(--shadow-lg), 0 0 0 12px rgba(252,240,84,.16);
  animation:sealSpin 44s linear infinite;
}
.farm__seal img{ width:100%; height:100%; object-fit:cover; }
@keyframes sealSpin{ to{ transform:rotate(360deg); } }
.farm__media:hover .farm__seal{ animation-play-state:paused; }

.farm__badge{
  position:absolute; left:-5%; top:6%;
  background:var(--pollen); color:var(--soil);
  padding:.7rem 1.1rem; border-radius:16px;
  font-size:.74rem; line-height:1.35; text-align:center;
  box-shadow:var(--shadow);
  animation:float 6s var(--ease) infinite alternate;
}
.farm__badge b{ font-size:.85rem; }

.farm__grid{ display:grid; gap:.9rem; }
.farm-card{
  display:flex; align-items:flex-start; gap:1.1rem;
  background:rgba(251,243,231,.09);
  border:1.5px solid rgba(251,243,231,.2);
  padding:1.25rem 1.4rem; border-radius:var(--radius);
  backdrop-filter:blur(6px);
  transition:background-color .35s var(--ease), transform .35s var(--ease), border-color .35s;
  will-change:transform;
}
.farm-card:hover{
  background:rgba(251,243,231,.16);
  border-color:var(--pollen);
}
.farm-card__emoji{
  font-size:1.9rem; line-height:1; flex:none;
  transition:transform .5s var(--bounce);
}
.farm-card:hover .farm-card__emoji{ transform:scale(1.3) rotate(12deg); }
.farm-card h3{ font-size:1.14rem; margin-bottom:.2rem; color:var(--cream); }
.farm-card p{ font-size:.88rem; color:rgba(251,243,231,.78); }

/* ---- Z farmy domů: produkty + chlebové předplatné ---- */
.farm__shop{
  position:relative; z-index:2;
  margin-top:clamp(3rem,7vw,5rem);
  padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1.5px dashed rgba(251,243,231,.28);
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center;
}
.farm__shop-media{
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg);
  will-change:transform;
}
.farm__shop-media img{ width:100%; height:auto; display:block; }
.farm__shop-title{ font-size:clamp(1.4rem,2.8vw,2rem); margin-bottom:.7rem; color:var(--cream); }
.farm__shop-copy > p{ color:rgba(251,243,231,.8); max-width:48ch; margin-bottom:1.4rem; }

.farm__shop-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.5rem .9rem; margin-bottom:1.8rem;
}
.farm__shop-list li{
  padding:.6rem .9rem; border-radius:12px;
  background:rgba(251,243,231,.08);
  border:1px solid rgba(251,243,231,.16);
  transition:background-color .3s var(--ease), border-color .3s;
}
.farm__shop-list li:hover{ background:rgba(251,243,231,.15); border-color:var(--pollen); }
.farm__shop-list b{ display:block; font-size:.95rem; color:var(--cream); }
.farm__shop-list span{ font-size:.78rem; color:rgba(251,243,231,.66); }

.subscription{
  background:var(--pollen); color:var(--soil);
  border-radius:var(--radius); padding:1.3rem 1.5rem;
  box-shadow:var(--shadow);
}
.subscription__head{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.1rem; }
.subscription__emoji{ font-size:2rem; line-height:1; flex:none; }
.subscription h4{ font-size:1.22rem; margin-bottom:.3rem; }
.subscription p{ font-size:.88rem; line-height:1.5; opacity:.82; }
.subscription__foot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.8rem;
  padding-top:1rem; border-top:2px dotted rgba(36,24,12,.25);
}
.subscription__price{
  font-family:var(--font-display); font-size:1.9rem; font-weight:900;
  letter-spacing:-.03em; line-height:1;
}
/* Uvnitř žluté karty musí být tlačítko tmavé, aby bylo vidět */
.subscription .btn{ --btn-bg:var(--soil); --btn-fg:var(--pollen); --btn-sh:rgba(36,24,12,.45); --btn-hover:#3d2a17; }

/* ---------- 14. GALERIE ---------- */
.gallery{ background:var(--cream); }
/* Masonry (zděná zeď) přes CSS sloupce.
   Fotky jsou originály v různých poměrech stran — takhle se zobrazí
   celé a nic se neořezává ani nedeformuje. */
.gallery__grid{
  column-count:4;
  column-gap:clamp(.7rem,1.4vw,1.1rem);
}
.gallery__item{
  position:relative; overflow:hidden;
  break-inside:avoid;
  margin-bottom:clamp(.7rem,1.4vw,1.1rem);
  border-radius:var(--radius);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.gallery__item img{
  width:100%; height:auto; display:block;
  transition:transform .8s var(--ease), filter .5s;
}
.gallery__item:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.gallery__item:hover img{ transform:scale(1.09); }
.gallery__item::after{
  content:'⤢'; position:absolute; top:.9rem; right:.9rem;
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--cream); color:var(--soil);
  border-radius:50%; font-size:.95rem;
  opacity:0; transform:scale(.6);
  transition:opacity .35s var(--ease), transform .35s var(--bounce);
}
.gallery__item:hover::after{ opacity:1; transform:scale(1); }
.gallery__item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.4rem .95rem .85rem;
  font-size:.85rem; font-weight:600; color:var(--white);
  background:linear-gradient(transparent,rgba(46,33,27,.82));
  transform:translateY(102%);
  transition:transform .45s var(--ease-out);
}
.gallery__item:hover figcaption{ transform:translateY(0); }

/* ---------- 15. NÁVŠTĚVA ---------- */
.visit{ background:var(--sand); }
.visit__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1rem,2vw,1.6rem);
}
.visit__card{
  background:var(--white); border-radius:var(--radius-lg);
  padding:2.1rem 2rem; box-shadow:var(--shadow-sm);
  border:2px solid var(--sand-deep);
}
.visit__card--map{
  grid-column:1 / -1; padding:0; overflow:hidden;
  height:340px; border:2px solid var(--sand-deep);
}
.visit__card--map iframe{ width:100%; height:100%; border:0; filter:saturate(.82) contrast(1.04); }
.visit__h{
  font-size:1.35rem; margin-bottom:1.3rem;
  padding-bottom:.8rem; border-bottom:2px dotted var(--sand-deep);
}
.hours li{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.62rem .7rem; border-radius:10px;
  font-size:.95rem;
  transition:background-color .3s;
}
.hours li span{ color:var(--soil-soft); }
.hours li b{ font-weight:700; }
.hours li b.is-closed{ color:var(--clay); }
.hours li.is-today{
  background:rgba(252,240,84,.42);
  font-weight:700;
}
.hours li.is-today span{ color:var(--soil); }
.hours li.is-today span::after{
  content:' · dnes';
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--clay);
}
.visit__live{
  margin-top:1.2rem; padding:.85rem 1.1rem;
  border-radius:14px; background:var(--sand);
  font-size:.88rem; font-weight:600;
}
.visit__addr{ font-size:1.05rem; line-height:1.75; margin-bottom:.9rem; }
.visit__addr b{ font-family:var(--font-display); font-size:1.2rem; }
.visit__meta{ margin-bottom:1.5rem; font-size:.95rem; }
.visit__btns{ display:flex; flex-wrap:wrap; gap:.7rem; }

/* ---------- 16. KONTAKT ---------- */
.contact{ background:var(--cream); }
.contact__inner{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem); align-items:start;
}
.contact__copy > p{ color:var(--soil-soft); margin-bottom:1.1rem; max-width:46ch; }

/* ---- Kontaktní karta (místo formuláře) ---- */
.contact__card{
  background:var(--white); border-radius:var(--radius-lg);
  padding:clamp(1.4rem,3vw,2rem);
  box-shadow:var(--shadow);
  border:2px solid var(--sand-deep);
  display:grid; gap:1rem;
}

/* Hlavní akce — velké žluté tlačítko na e-mail */
.contact__mail{
  display:flex; align-items:center; gap:1.1rem;
  padding:1.15rem 1.3rem;
  background:var(--pollen); color:var(--soil);
  border-radius:var(--radius);
  box-shadow:0 5px 0 0 var(--soil);
  transition:transform .3s var(--bounce), box-shadow .3s var(--ease);
}
.contact__mail:hover{ transform:translateY(-3px); box-shadow:0 8px 0 0 var(--soil), var(--shadow); }
.contact__mail:active{ transform:translateY(2px); box-shadow:0 2px 0 0 var(--soil); }
.contact__mail-ico{ font-size:1.7rem; line-height:1; flex:none; }
.contact__mail-text{ flex:1 1 auto; min-width:0; }
.contact__mail-text b{
  display:block; font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; opacity:.72;
}
.contact__mail-text em{
  display:block; font-style:normal;
  font-family:var(--font-display); font-size:clamp(1rem,2.2vw,1.3rem);
  font-weight:700; letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.contact__mail-arrow{ width:20px; height:20px; flex:none; transition:transform .3s var(--ease); }
.contact__mail:hover .contact__mail-arrow{ transform:translateX(5px); }

/* Sítě */
.contact__socials{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.contact__social{
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1rem;
  background:var(--cream);
  border:2px solid var(--sand-deep);
  border-radius:var(--radius);
  transition:border-color .3s var(--ease), transform .3s var(--ease), background-color .3s;
}
.contact__social:hover{ border-color:var(--clay); background:var(--white); transform:translateY(-2px); }
.contact__social > span:first-child{ font-size:1.3rem; line-height:1; flex:none; }
.contact__social b{
  display:block; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--soil-soft);
}
.contact__social em{ display:block; font-style:normal; font-size:.9rem; font-weight:500; }

/* Adresa */
.contact__where{
  display:grid; grid-template-columns:auto 1fr; gap:.3rem .85rem;
  align-items:start;
  padding:1rem 1.1rem;
  background:var(--cream);
  border-radius:var(--radius);
}
.contact__where-ico{ font-size:1.25rem; line-height:1.4; grid-row:span 2; }
.contact__where address{ font-size:.92rem; line-height:1.6; color:var(--soil-soft); }
.contact__where address b{ color:var(--soil); font-size:1rem; }
.contact__where-link{
  grid-column:2; font-size:.85rem; font-weight:700; color:var(--clay);
  transition:transform .3s var(--ease);
}
.contact__where-link:hover{ display:inline-block; transform:translateX(4px); }

/* ---------- 17. FOOTER ---------- */
.footer{
  background:var(--soil); color:var(--cream);
  padding-block:clamp(3rem,6vw,4.5rem) 1.6rem;
}
.footer__top{
  display:grid; grid-template-columns:1fr 1.3fr;
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(251,243,231,.14);
}
.logo--footer .logo__text em{ color:rgba(251,243,231,.55); }
.footer__brand p{
  margin-top:1.1rem; font-size:.92rem;
  color:rgba(251,243,231,.66); line-height:1.7;
}
.footer__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.footer__nav h4{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pollen); margin-bottom:.9rem;
  font-family:var(--font-body); font-weight:700;
}
.footer__nav a{
  display:block; padding:.28rem 0;
  font-size:.93rem; color:rgba(251,243,231,.72);
  transition:color .25s, transform .25s var(--ease);
}
.footer__nav a:hover{ color:var(--pollen); transform:translateX(5px); }

.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; padding-top:1.6rem;
}
.footer__bottom p{ font-size:.8rem; color:rgba(251,243,231,.5); }
.to-top{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  border-radius:50%; background:rgba(251,243,231,.1);
  color:var(--cream);
  transition:background-color .3s, transform .35s var(--bounce);
}
.to-top:hover{ background:var(--pollen); color:var(--soil); transform:translateY(-4px); }
.to-top svg{ width:19px; height:19px; }

/* ---------- 18. LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:9600;
  display:grid; place-items:center;
  background:rgba(46,33,27,.94);
  backdrop-filter:blur(8px);
  padding:clamp(1rem,4vw,3rem);
  opacity:0; transition:opacity .35s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }
.lightbox__fig{
  max-width:min(1100px,92vw); max-height:82vh;
  display:flex; flex-direction:column; gap:.9rem; align-items:center;
}
.lightbox__fig img{
  max-width:100%; max-height:74vh;
  object-fit:contain; border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  transform:scale(.92); opacity:0;
  transition:transform .45s var(--ease-out), opacity .35s;
}
.lightbox.is-open .lightbox__fig img{ transform:scale(1); opacity:1; }
.lightbox__fig figcaption{
  color:var(--cream); font-size:.95rem; font-weight:600; text-align:center;
}
.lightbox__close,.lightbox__nav{
  position:absolute; z-index:2;
  display:grid; place-items:center;
  background:rgba(251,243,231,.12); color:var(--cream);
  border-radius:50%;
  transition:background-color .3s, transform .3s var(--bounce);
}
.lightbox__close{ top:1.4rem; right:1.4rem; width:48px; height:48px; font-size:1.15rem; }
.lightbox__nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:2.1rem; line-height:0; padding-bottom:6px; }
.lightbox__nav--prev{ left:clamp(.6rem,2.5vw,2rem); }
.lightbox__nav--next{ right:clamp(.6rem,2.5vw,2rem); }
.lightbox__close:hover{ background:var(--clay); transform:rotate(90deg); }
.lightbox__nav:hover{ background:var(--clay); }
.lightbox__nav--prev:hover{ transform:translateY(-50%) translateX(-4px); }
.lightbox__nav--next:hover{ transform:translateY(-50%) translateX(4px); }
.lightbox__count{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  color:rgba(251,243,231,.65); font-size:.85rem; letter-spacing:.1em;
}

/* ---------- 19. TOAST ---------- */
.toast{
  position:fixed; left:50%; bottom:2rem; z-index:9700;
  transform:translate(-50%,140%);
  background:var(--soil); color:var(--cream);
  padding:.9rem 1.5rem; border-radius:99px;
  font-size:.9rem; font-weight:600;
  box-shadow:var(--shadow-lg);
  transition:transform .5s var(--bounce);
  white-space:nowrap;
}
.toast.is-visible{ transform:translate(-50%,0); }

/* ---------- 20. REVEAL ---------- */
[data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- 21. CHYBĚJÍCÍ OBRÁZKY (placeholder) ---------- */
/* Dokud nenahrajete fotky do /images, zobrazí se hezký zástupný dlaždicový vzor
   s názvem souboru, který tam patří. Jakmile soubor přidáte, zmizí sám. */
.img-ph{
  position:relative;
  display:grid; place-items:center;
  width:100%; height:100%; min-height:150px;
  background:
    repeating-linear-gradient(45deg, var(--sand) 0 12px, var(--sand-deep) 12px 24px);
  color:var(--soil-soft);
  text-align:center; padding:1.2rem;
  font-size:.78rem; font-weight:700; line-height:1.5;
  letter-spacing:.02em;
}
.img-ph::before{
  content:'🖼'; display:block; font-size:1.9rem; margin-bottom:.4rem;
}
.img-ph b{
  display:block; font-family:var(--font-body);
  font-size:.72rem; font-weight:700;
  background:var(--soil); color:var(--cream);
  padding:.2rem .6rem; border-radius:99px;
  margin-top:.45rem;
}
.farm .img-ph{
  background:repeating-linear-gradient(45deg, #6d8654 0 12px, #61784a 12px 24px);
  color:rgba(251,243,231,.85);
}

/* ---------- 22. RESPONZIVITA ---------- */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; gap:3rem; }
  .hero__media{ max-width:520px; margin-inline:auto; width:100%; }
  .hero{ min-height:auto; padding-bottom:8rem; }
  .scroll-hint{ display:none; }
  .farm__inner,.contact__inner{ grid-template-columns:1fr; }
  .farm__shop{ grid-template-columns:1fr; }
  .farm__shop-media{ max-width:460px; margin-inline:auto; }
  .farm__media{ max-width:480px; margin-inline:auto; width:100%; order:2; }
  .timeline{ grid-template-columns:1fr; }
  .timeline__item:not(:last-child)::after{ display:none; }
  .gallery__grid{ column-count:3; }
  .footer__top{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .header__cta{ display:none; }
  /* Nad zásuvkou (z-index 790), jinak by se křížek schoval pod ni
     a menu by nešlo zavřít jinak než klepnutím vedle. */
  .burger{ display:flex; position:relative; z-index:795; }
  .nav{
    position:fixed; top:0; right:0; left:auto; bottom:auto;
    width:min(340px,86vw);
    /* Pevná výška místo bottom:0 — drží i kdyby nad zásuvkou vznikl
       nějaký containing block. dvh počítá s lištou mobilního prohlížeče. */
    height:100vh; height:100dvh;
    background:var(--cream);
    padding:calc(var(--header-h) + env(safe-area-inset-top) + 2rem) 2rem
            calc(2rem + env(safe-area-inset-bottom));
    box-shadow:var(--shadow-lg);
    transform:translateX(100%);
    transition:transform .5s var(--ease-out);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    z-index:790;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__list{ flex-direction:column; gap:.2rem; }
  .nav__link{
    padding:.95rem 1rem; font-size:1.25rem;
    font-family:var(--font-display); font-weight:700;
    border-bottom:1px dotted var(--sand-deep); border-radius:0;
  }
  .nav__link::after{ display:none; }

  body.nav-open::after{
    content:''; position:fixed; inset:0; z-index:780;
    background:rgba(46,33,27,.45); backdrop-filter:blur(3px);
    animation:fadeIn .4s var(--ease);
  }
  @keyframes fadeIn{ from{opacity:0} to{opacity:1} }

  .menu-list{ grid-template-columns:1fr; }
  .visit__grid{ grid-template-columns:1fr; }
  .gallery__grid{ column-count:2; }
  .footer__nav{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:560px){
  :root{ --header-h:66px; }
  .container{ width:min(100% - 2rem, var(--container)); }
  .status{ display:none; }

  /* Hero: menší mrtvý prostor pod fotkou (vlna + marquee potřebují ~70px) */
  .hero{ padding-bottom:4.5rem; }
  .hero__note{ left:0; padding:.7rem .9rem; }
  .hero__note p{ font-size:.76rem; }
  /* Placka sedí uvnitř .hero__frame, který má overflow:hidden — na úzkém
     displeji ji zaoblený tvar rámu ořezával, tak ji posuneme dovnitř. */
  .hero__sticker{ width:84px; height:84px; right:13%; bottom:15%; }
  .hero__sticker svg{ font-size:13px; }
  .hero__sticker-cup{ font-size:1.6rem; }
  .hero__facts{ gap:1.2rem; }
  .hero__facts b{ font-size:1.7rem; }

  .tabs__nav{ border-radius:20px; width:100%; }
  .tabs__pill{ display:none; }
  .tab{ flex:1 1 calc(50% - .2rem); text-align:center; }
  .tab.is-active{ background:var(--clay); }

  .gallery__grid{ column-count:2; column-gap:.6rem; }
  .gallery__item{ margin-bottom:.6rem; border-radius:16px; }

  /* `flex:none` + `max-width:100%` znamenalo, že se název položky
     nesmrskne a cenu vytlačí za pravý okraj (schoval ji overflow-x). */
  .menu-item{ padding:.95rem .35rem; gap:.5rem; }
  .menu-item__main{ flex:1 1 auto; min-width:0; max-width:none; }
  .menu-item__dots{ flex:0 1 auto; }

  /* Nadpis a text karty stály vedle sebe a text se mačkal do úzkého sloupku */
  .farm-card{
    display:grid; grid-template-columns:auto 1fr;
    column-gap:1rem; row-gap:.15rem; align-items:start;
    padding:1.15rem 1.2rem;
  }
  .farm-card__emoji{ grid-row:1 / span 2; }

  .farm__seal{ width:min(100%, 280px); }
  .farm__badge{ left:0; top:2%; }   /* nesmí vykukovat za levý okraj */
  .visit__card{ padding:1.5rem 1.3rem; }
  .visit__card--map{ height:280px; }

  .contact__socials{ grid-template-columns:1fr; }
  /* Aby se „info@hlinafarm.com" nelámalo uprostřed slova */
  .contact__mail{ gap:.8rem; padding:1rem 1.05rem; }
  .contact__mail-text em{ font-size:.95rem; }

  .footer__nav a{ padding:.5rem 0; }
  .footer__bottom{ justify-content:center; text-align:center; }
  .lightbox__nav{ width:44px; height:44px; font-size:1.7rem; }
}

/* ---------- 22b. DOTYKOVÁ ZAŘÍZENÍ ---------- */
/* Co je schované za :hover, se na mobilu nikdy neukáže — u galerie
   to znamenalo neviditelné popisky a žádný náznak, že jde klikat. */
@media (hover:none){
  .gallery__item figcaption{ transform:translateY(0); }
  .gallery__item::after{ opacity:1; transform:scale(1); }
  .btn--sm{ padding:.8rem 1.2rem; }
  .nav__link, .footer__nav a, .tab, .btn, .contact__social{
    -webkit-tap-highlight-color:rgba(194,100,63,.18);
  }
}

/* Ovládání lightboxu mimo výřez / pod čelní kamerou */
@supports (padding:env(safe-area-inset-top)){
  .lightbox__close{ top:calc(1.4rem + env(safe-area-inset-top)); }
  .lightbox__count{ bottom:calc(1.6rem + env(safe-area-inset-bottom)); }
}

/* ---------- 23. PŘÍSTUPNOST — méně pohybu ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .hero__title .line__i{ opacity:1; transform:none; }
  .squiggle{ stroke-dashoffset:0; }
}

/* ---------- 24. TISK ---------- */
@media print{
  .header,.preloader,.grain,.progress,.marquee,.scroll-hint,
  .lightbox,.toast,.to-top,.hero__blobs{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:1.5rem; page-break-inside:avoid; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .panel{ display:block !important; }
}